Skip to content

Commit

Permalink
sort of works
Browse files Browse the repository at this point in the history
  • Loading branch information
@edan-bainglass
edan-bainglass committed Nov 19, 2024
1 parent 6efe1cf commit 8e30977
Show file tree
Hide file tree
Showing 4 changed files with 85 additions and 49 deletions.
19 changes: 19 additions & 0 deletions src/aiidalab_qe/app/configuration/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

from aiidalab_qe.app.parameters import DEFAULT_PARAMETERS
from aiidalab_qe.app.utils import get_entry_items
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.panel import SettingsModel, SettingsPanel
from aiidalab_widgets_base import WizardAppWidgetStep

Expand Down Expand Up @@ -77,6 +78,23 @@ def render(self):
if self.rendered:
return

self.generic_guide = InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, you can define the workflow tasks, such as the
level of structure optimization and/or the desired properties
to compute (in step 2.1). You can also customize the calculation
parameters (in step 2.2).
When you are ready, click "Confirm" to proceed to the next step.
<br>
<strong>Note:</strong> Changes after confirmation will unconfirm
the step and reset the following steps.
</div>
""")
],
)

# RelaxType: degrees of freedom in geometry optimization
self.relax_type_help = ipw.HTML()
ipw.dlink(
Expand Down Expand Up @@ -133,6 +151,7 @@ def render(self):
self.confirm_button.on_click(self.confirm)

self.children = [
self.generic_guide,
self.structure_set_message,
ipw.HTML("""
<div style="padding-top: 0px; padding-bottom: 0px">
Expand Down
17 changes: 17 additions & 0 deletions src/aiidalab_qe/app/configuration/basic/workflow.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
import ipywidgets as ipw

from aiidalab_qe.app.configuration.basic.model import WorkChainModel
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.panel import SettingsPanel


Expand All @@ -24,6 +25,21 @@ def render(self):
if self.rendered:
return

self.generic_guide = InAppGuide(
guide_class="basic",
children=[
ipw.HTML("""
<div>
In the basic settings panel, you can define the type of material
(metal or insulator), and specify if spin polarization is to be
considered. You can also select the protocol to be used in the
calculation, which will modify a set of parameters controlling
the accuracy/speed trade-off.
</div>
""")
],
)

# SpinType: magnetic properties of material
self.spin_type = ipw.ToggleButtons(style={"description_width": "initial"})
ipw.dlink(
Expand Down Expand Up @@ -58,6 +74,7 @@ def render(self):
)

self.children = [
self.generic_guide,
ipw.HTML("""
<div style="line-height: 140%; padding-top: 10px; padding-bottom: 10px">
Below you can indicate both if the material should be treated as an
Expand Down
79 changes: 41 additions & 38 deletions src/aiidalab_qe/app/structure/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,47 @@ def render(self):
if self.rendered:
return

self.generic_guide = InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, you can select a structure as follows:
<ul>
<li>
<strong>Upload file</strong>:
upload a structure file from your computer.
</li>
<li>
<strong>OPTIMADE</strong>:
search for structures in the OPTIMADE database.
</li>
<li>
<strong>AiiDA database</strong>:
search for structures in your AiiDA database.
</li>
<li>
<strong>From Examples</strong>:
select a structure from a list of example structures.
</li>
</ul>
Once selected, you may inspect the structure. You can also edit
the structure using the available structure editors. When done,
you can choose to modify the structure label and/or provide a
description. These will be attached to the input structure node
in your AiiDA database. When you are ready, click "Confirm" to
proceed to the next step.
<br>
<strong>Note:</strong> If the confirmed structure is not yet
stored in the AiiDA database, it will be stored automatically
when you proceed to the next step.
<br>
<strong>Note:</strong> Changes after confirmation will unconfirm
the step and reset the following steps.
</div>
""")
],
)

importers = [
StructureUploadWidget(title="Upload file"),
LazyLoadedOptimade(title="OPTIMADE"),
Expand Down Expand Up @@ -151,44 +192,6 @@ def render(self):
(self.message_area, "value"),
)

self.generic_guide = InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, you can select a structure as follows:
<ul>
<li>
<strong>Upload file</strong>:
upload a structure file from your computer.
</li>
<li>
<strong>OPTIMADE</strong>:
search for structures in the OPTIMADE database.
</li>
<li>
<strong>AiiDA database</strong>:
search for structures in your AiiDA database.
</li>
<li>
<strong>From Examples</strong>:
select a structure from a list of example structures.
</li>
</ul>
Once selected, you may inspect the structure. You can also edit
the structure using the available structure editors. When done,
you can choose to modify the structure label and/or provide a
description. These will be attached to the input structure node
in your AiiDA database. When you are ready, click "Confirm" to
proceed to the next step.
<br>
<strong>Note:</strong> If the confirmed structure is not yet
stored in the AiiDA database, it will be stored automatically
when you proceed to the next step.
</div>
""")
],
)

self.children = [
self.generic_guide,
ipw.HTML("""
Expand Down
19 changes: 8 additions & 11 deletions src/aiidalab_qe/app/wrapper.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,26 +97,21 @@ def _on_guide_select(self, change: dict):
"""Toggle the guide section."""
display(
Javascript(f"""
if (!window.GuideObservers) {{
window.GuideObservers = {{}};
}}
const addGuideObserver = (guideClass) => {{
console.log(guideClass);
const observer = new MutationObserver(() => {{
document.querySelectorAll(
`.qe-app-guide, .${{activeGuide}}-guide`
`.qe-app-guide, .${{guideClass}}-guide`
).forEach(guide => {{
if (!guide.classList.contains("show")) {{
guide.classList.add("show");
}}
}});
}});
// observer.observe(document.body, {{ childList: true, subtree: true }});
// window.qeGuideObservers[guideClass] = observer;
observer.observe(document.body, {{ childList: true, subtree: true }});
}}
const activeGuide = "{change["new"]}";
console.log(activeGuide);
document.querySelectorAll(
`.qe-app-guide, .${{activeGuide}}-guide`
).forEach(guide => {{
Expand All @@ -128,9 +123,11 @@ def _on_guide_select(self, change: dict):
).forEach(guide => {{
guide.classList.add("show");
}});
if (!window.GuideObservers[activeGuide]) {{
addGuideObserver(activeGuide);
}}
addGuideObserver(activeGuide);
}} else {{
document.querySelectorAll(".in-app-guide").forEach(guide => {{
guide.classList.remove("show");
}});
}}
""")
)
Expand Down

0 comments on commit 8e30977

Please sign in to comment.