Add node view to simplified process tree container

edan-bainglass · Jan 10, 2025 · 2faa2a5 · 2faa2a5
1 parent cab7963
commit 2faa2a5
Show file tree

Hide file tree

Showing 4 changed files with 150 additions and 96 deletions.
diff --git a/src/aiidalab_qe/app/result/components/status/status.py b/src/aiidalab_qe/app/result/components/status/status.py
@@ -54,17 +54,49 @@ def _render(self):
         self.reset_button.on_click(self._reset_process_tree)
 
         self.node_view_container = ipw.VBox()
+        self.node_view_container.add_class("node-view-container")
+
+        self.to_advanced_view_button = ipw.Button(
+            description="View in advanced panel",
+            button_style="primary",
+            icon="eye",
+            tooltip="Switch to the advanced view",
+            layout=ipw.Layout(width="fit-content"),
+        )
+        self.to_advanced_view_button.on_click(self._switch_to_advanced_view)
+
+        simplified_tree_container = ipw.VBox(
+            children=[self.simplified_process_tree],
+        )
+
+        simplified_tree_node_view_container = ipw.VBox(
+            children=[
+                self.to_advanced_view_button,
+                self.node_view_container,
+            ],
+        )
+
+        simplified_view = ipw.Box(
+            children=[
+                simplified_tree_container,
+                simplified_tree_node_view_container,
+            ]
+        )
+        simplified_view.add_class("simplified-view")
+
+        advanced_view = ipw.VBox(
+            children=[
+                self.reset_button,
+                self.process_tree,
+                self.node_view_container,
+            ],
+        )
+        advanced_view.add_class("advanced-view")
 
         self.accordion = ipw.Accordion(
             children=[
-                self.simplified_process_tree,
-                ipw.VBox(
-                    children=[
-                        self.reset_button,
-                        self.process_tree,
-                        self.node_view_container,
-                    ],
-                ),
+                simplified_view,
+                advanced_view,
             ],
             selected_index=None,
         )
@@ -94,11 +126,13 @@ def _on_accordion_change(self, change):
     def _on_calculation_link_click(self, change):
         if selected_node_uuid := change["new"]:
             self.process_tree.value = selected_node_uuid
-            self.accordion.selected_index = 1
 
     def _on_node_selection_change(self, change):
         self._update_node_view(change["new"])
 
+    def _switch_to_advanced_view(self, _):
+        self.accordion.selected_index = 1
+
     def _update_process_tree(self):
         if self.rendered:
             self.process_tree.update()

diff --git a/src/aiidalab_qe/app/static/styles/custom.css b/src/aiidalab_qe/app/static/styles/custom.css
@@ -112,81 +112,3 @@ footer {
 .p-TabBar-tab {
   min-width: fit-content !important;
 }
-
-.simplified-process-tree .tree-node-header {
-  align-items: center;
-  padding-left: 12px;
-}
-
-.simplified-process-tree .widget-html-content {
-  line-height: 1.5;
-}
-
-.simplified-process-tree .widget-button {
-  height: fit-content;
-}
-
-.simplified-process-tree .tree-node-toggle:focus:enabled,
-.simplified-process-tree .tree-node-toggle:hover:enabled,
-.simplified-process-tree .tree-node-toggle:active:enabled,
-.simplified-process-tree .calculation-link:focus:enabled,
-.simplified-process-tree .calculation-link:hover:enabled,
-.simplified-process-tree .calculation-link:active:enabled {
-  cursor: pointer;
-  color: var(--color-info);
-  outline: none;
-  box-shadow: none;
-  background-color: white;
-  transition: color 0.15s ease-in-out;
-  -webkit-transition: color 0.15s ease-in-out;
-  -moz-transition: color 0.15s ease-in-out;
-  -ms-transition: color 0.15s ease-in-out;
-  -o-transition: color 0.15s ease-in-out;
-}
-
-.simplified-process-tree .tree-node-toggle,
-.simplified-process-tree .calculation-link {
-  width: fit-content;
-  line-height: 1.5;
-  padding: 0;
-  background: white;
-}
-
-.simplified-process-tree .tree-node-toggle {
-  margin: 0 6px 0 -16px;
-}
-
-.simplified-process-tree .tree-node-toggle:hover:enabled,
-.simplified-process-tree .tree-node-toggle:active:enabled,
-.simplified-process-tree .tree-node-toggle:focus:hover:enabled {
-  color: var(--color-info-dark);
-}
-
-.simplified-process-tree .tree-node-toggle:focus:enabled {
-  color: inherit;
-}
-
-.simplified-process-tree .calculation-link {
-  color: var(--color-link);
-}
-
-.simplified-process-tree .calculation-link:hover:enabled,
-.simplified-process-tree .calculation-link:active:enabled,
-.simplified-process-tree .calculation-link:focus:hover:enabled {
-  color: var(--color-info-dark);
-}
-
-.simplified-process-tree .calculation-link:active:enabled {
-  background-color: var(--color-init);
-}
-
-.simplified-process-tree .tree-node-branches {
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.simplified-process-tree .tree-node-branches.open {
-  height: auto;
-  visibility: visible;
-}
diff --git a/src/aiidalab_qe/app/static/styles/status.css b/src/aiidalab_qe/app/static/styles/status.css
@@ -0,0 +1,102 @@
+.simplified-view {
+  flex-direction: row;
+}
+
+.simplified-view > div:first-child {
+  width: 50%;
+}
+
+.simplified-view > div:last-child {
+  width: 70%;
+}
+
+@media (max-width: 1199px) {
+  .simplified-view {
+    flex-direction: column;
+  }
+
+  .simplified-view > div:first-child,
+  .simplified-view > div:last-child {
+    width: 100%;
+  }
+}
+
+/* Process tree */
+
+.simplified-process-tree .tree-node-header {
+  align-items: center;
+  padding-left: 12px;
+}
+
+.simplified-process-tree .widget-html-content {
+  line-height: 1.5;
+}
+
+.simplified-process-tree .widget-button {
+  height: fit-content;
+}
+
+.simplified-process-tree .tree-node-toggle:focus:enabled,
+.simplified-process-tree .tree-node-toggle:hover:enabled,
+.simplified-process-tree .tree-node-toggle:active:enabled,
+.simplified-process-tree .calculation-link:focus:enabled,
+.simplified-process-tree .calculation-link:hover:enabled,
+.simplified-process-tree .calculation-link:active:enabled {
+  cursor: pointer;
+  color: var(--color-info);
+  outline: none;
+  box-shadow: none;
+  background-color: white;
+  transition: color 0.15s ease-in-out;
+  -webkit-transition: color 0.15s ease-in-out;
+  -moz-transition: color 0.15s ease-in-out;
+  -ms-transition: color 0.15s ease-in-out;
+  -o-transition: color 0.15s ease-in-out;
+}
+
+.simplified-process-tree .tree-node-toggle,
+.simplified-process-tree .calculation-link {
+  width: fit-content;
+  line-height: 1.5;
+  padding: 0;
+  background: white;
+}
+
+.simplified-process-tree .tree-node-toggle {
+  margin: 0 6px 0 -16px;
+}
+
+.simplified-process-tree .tree-node-toggle:hover:enabled,
+.simplified-process-tree .tree-node-toggle:active:enabled,
+.simplified-process-tree .tree-node-toggle:focus:hover:enabled {
+  color: var(--color-info-dark);
+}
+
+.simplified-process-tree .tree-node-toggle:focus:enabled {
+  color: inherit;
+}
+
+.simplified-process-tree .calculation-link {
+  color: var(--color-link);
+}
+
+.simplified-process-tree .calculation-link:hover:enabled,
+.simplified-process-tree .calculation-link:active:enabled,
+.simplified-process-tree .calculation-link:focus:hover:enabled {
+  color: var(--color-info-dark);
+}
+
+.simplified-process-tree .calculation-link:active:enabled {
+  background-color: var(--color-init);
+}
+
+.simplified-process-tree .tree-node-branches {
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.simplified-process-tree .tree-node-branches.open {
+  height: auto;
+  visibility: visible;
+}
diff --git a/src/aiidalab_qe/common/widgets.py b/src/aiidalab_qe/common/widgets.py
@@ -54,7 +54,7 @@ def __init__(self, num_min_lines=10, max_output_height="200px", **kwargs):  # no
         self._refresh_output()
         super().__init__(
             [self._output],
-            layout=ipw.Layout(max_height=max_output_height, min_width="51em"),
+            layout=ipw.Layout(max_height=max_output_height),
         )
 
     @traitlets.default("value")
@@ -154,9 +154,7 @@ class FilenameDisplayWidget(ipw.Box):
 
     def __init__(self, max_width=None, **kwargs):
         self.max_width = max_width
-        self._html = ipw.HTML(
-            layout={"margin": "0 0 0 50px"},
-        )
+        self._html = ipw.HTML()
         super().__init__([self._html], **kwargs)
 
     @traitlets.observe("value")
@@ -169,7 +167,7 @@ def _observe_filename(self, change):
             overflow:hidden;
             text-overflow:ellipsis;
             {width_style}">
-            {icon} {change['new']}
+            {icon} {change["new"]}
         </div>
         """
 
@@ -188,9 +186,7 @@ def __init__(self, placeholder=None, **kwargs):
             lambda value: value or self.placeholder or "",
         )
 
-        self._filename_display = FilenameDisplayWidget(
-            layout=ipw.Layout(width="auto"), max_width="55em"
-        )
+        self._filename_display = FilenameDisplayWidget(layout=ipw.Layout(width="auto"))
         ipw.dlink(
             (self, "filename"),
             (self._filename_display, "value"),
@@ -537,7 +533,7 @@ def _display_table(self, _=None):
                 symbol = chemichal_symbols[index]
                 if tag == 0:
                     tag = ""
-                table_data.append([f"{index+ 1}", f"{symbol}", f"{tag}"])
+                table_data.append([f"{index + 1}", f"{symbol}", f"{tag}"])
 
             # Create an HTML table
             table_html = "<table>"