From 2faa2a5854e1827f993cb0169733fb875bda9094 Mon Sep 17 00:00:00 2001 From: Edan Bainglass Date: Fri, 10 Jan 2025 11:32:47 +0000 Subject: [PATCH] Add node view to simplified process tree container --- .../app/result/components/status/status.py | 52 +++++++-- src/aiidalab_qe/app/static/styles/custom.css | 78 -------------- src/aiidalab_qe/app/static/styles/status.css | 102 ++++++++++++++++++ src/aiidalab_qe/common/widgets.py | 14 +-- 4 files changed, 150 insertions(+), 96 deletions(-) create mode 100644 src/aiidalab_qe/app/static/styles/status.css diff --git a/src/aiidalab_qe/app/result/components/status/status.py b/src/aiidalab_qe/app/result/components/status/status.py index 9ff2892fb..dfa50d9ef 100644 --- 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 index ec8800f37..3a0e85130 100644 --- 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 new file mode 100644 index 000000000..0ea443089 --- /dev/null +++ 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 index 4ae49cf0e..1c65b92ab 100644 --- 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"]} """ @@ -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 = ""