Skip to content

Commit

Permalink
Implement in-app guide mechanism
Browse files Browse the repository at this point in the history
  • Loading branch information
@edan-bainglass
edan-bainglass committed Dec 9, 2024
1 parent ebd9e79 commit ff247c0
Show file tree
Hide file tree
Showing 15 changed files with 340 additions and 31 deletions.
56 changes: 55 additions & 1 deletion 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 (
ConfigurationSettingsModel,
ConfigurationSettingsPanel,
Expand Down Expand Up @@ -114,10 +115,39 @@ def render(self):
children=[
ipw.VBox(
children=[
InAppGuide(
children=[
ipw.HTML("""
<div>
Here we select the properties to calculate.
<div class="alert alert-success">
Select <b>Electronic band structure</b> and
<b>Projected density of states (PDOS)</b>
</div>
</div>
""")
],
),
*self.property_children,
]
),
self.tabs,
ipw.VBox(
children=[
InAppGuide(
children=[
ipw.HTML("""
<div>
Here we can customize the calculation parameters.
<div class="alert alert-success">
Click on each tab to customize its settings.
</div>
</div>
""")
],
),
self.tabs,
],
),
],
layout=ipw.Layout(margin="10px 2px"),
selected_index=None,
Expand All @@ -141,6 +171,30 @@ def render(self):
self.confirm_button.on_click(self.confirm)

self.children = [
InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, we define the workflow tasks, including structure
relaxation and which properties to compute, and select the
parameters of the calculations.
<div class="alert alert-success">
<h4>Tasks</h4>
<ol>
<li>Select <b>Full geometry</b> relaxation</li>
<li>Open <b>Step 2.1</b> to select properties</li>
<li>Open <b>Step 2.2</b> to customize parameters</li>
<li>Click <b>Confirm</b> to proceed</li>
</ol>
</div>
<div class="alert alert-warning">
<b>Note:</b> Changes after confirmation will unconfirm this
step and reset the following steps.
</div>
</div>
""")
],
),
self.structure_set_message,
ipw.HTML("""
<div style="padding-top: 0px; padding-bottom: 0px">
Expand Down
19 changes: 14 additions & 5 deletions src/aiidalab_qe/app/configuration/advanced/advanced.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@

import ipywidgets as ipw

from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.panel import ConfigurationSettingsPanel

from .hubbard import (
Expand Down Expand Up @@ -274,11 +275,19 @@ def render(self):
self.pseudos.render()

self.children = [
ipw.HTML("""
<div style="padding-top: 0px; padding-bottom: 10px">
<h4>Advanced Settings</h4>
</div>
"""),
InAppGuide(
children=[
ipw.HTML("""
<div>
The Advanced settings allow you to finely tune the calculation.
<div class="alert alert-warning">
In this walkthrough, we will not modify advanced settings
and proceed with the defaults.
</div>
</div>
""")
],
),
ipw.HBox(
children=[
self.clean_workdir,
Expand Down
22 changes: 22 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 BasicConfigurationSettingsModel
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.panel import ConfigurationSettingsPanel


Expand Down Expand Up @@ -60,6 +61,27 @@ def render(self):
)

self.children = [
InAppGuide(
children=[
ipw.HTML("""
<div>
The basic settings panel provides top-level calculation
settings including the electronic and magnetic properties of
the material. It also provides a choice of three protocols
that pre-configure many calculation settings, balancing
speed with accuracy.
<div class="alert alert-success">
Select the <b>fast</b> protocol
</div>
<div class="alert alert-warning">
Note: Due to the limited resources provided for the
demo server, we select the <b>fast</b> protocol to
reduce the cost of the calculation.
</div>
</div>
""")
],
),
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
12 changes: 12 additions & 0 deletions src/aiidalab_qe/app/main.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
from aiidalab_qe.app.structure.model import StructureStepModel
from aiidalab_qe.app.submission import SubmitQeAppWorkChainStep
from aiidalab_qe.app.submission.model import SubmissionStepModel
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.widgets import LoadingWidget
from aiidalab_widgets_base import WizardAppWidget

Expand Down Expand Up @@ -109,6 +110,17 @@ def __init__(self, qe_auto_setup=True):

super().__init__(
children=[
InAppGuide(
children=[
ipw.HTML("""
<div>
You've activated an in-app guide. Follow along below to learn
how to use the Quantum ESPRESSO app.
</div>
""")
],
classes=["guide-warning"],
),
self.new_workchain_button,
self._process_loading_message,
self._wizard_app_widget,
Expand Down
7 changes: 0 additions & 7 deletions src/aiidalab_qe/app/static/styles/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,13 +31,6 @@
outline: none !important;
}

.guide ol {
list-style: none;
}
.guide p:not(:last-of-type) {
margin-bottom: 0.5em;
}

.loading {
margin: 0 auto;
padding: 5px;
Expand Down
39 changes: 32 additions & 7 deletions src/aiidalab_qe/app/static/styles/infobox.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,39 @@
display: none;
margin: 2px;
padding: 1em;
border: 3px solid orangered;
background-color: #ffedcc;
border-radius: 1em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
-ms-border-radius: 1em;
-o-border-radius: 1em;
border-left: 3px solid #add8e6;
background-color: #d9edf7;
}
.info-box p {
line-height: 24px;
}
.info-box.in-app-guide.show {
display: flex !important;
}
.guide ol {
list-style: none;
}
.guide p:not(:last-of-type) {
margin-bottom: 0.5em;
}
.guide-warning {
background-color: #fcf8e3;
border-color: #ffe4c4;
margin-bottom: 1em;
}
.in-app-guide .alert {
color: black;
margin: 10px 0;
padding: 10px 14px;
border-width: 0;
border-left-width: 3px;
}
.in-app-guide .alert.alert-warning {
border-color: #ffe4c4;
}
.in-app-guide .alert.alert-success {
border-color: #8fbc8f;
}
.in-app-guide h4 {
font-weight: bold;
}
3 changes: 3 additions & 0 deletions src/aiidalab_qe/app/static/templates/guide.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,5 +42,8 @@
For a more in-depth dive into the app's features, please refer to the
<a href="https://aiidalab-qe.readthedocs.io/howto/index.html" target="_blank">how-to guides</a>.
</p>

<p>
Alternatively, you can select one of our in-app guides below to walk through an example use-case.
</p>
</div>
52 changes: 52 additions & 0 deletions src/aiidalab_qe/app/structure/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
LazyLoadedOptimade,
LazyLoadedStructureBrowser,
)
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_widgets_base import (
BasicCellEditor,
BasicStructureEditor,
Expand Down Expand Up @@ -151,6 +152,57 @@ def render(self):
)

self.children = [
InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, you can select a structure as follows:
<ul>
<li>
<b>Upload file</b>:
upload a structure file from your computer.
</li>
<li>
<b>OPTIMADE</b>:
search for structures in the OPTIMADE database.
</li>
<li>
<b>AiiDA database</b>:
search for structures in your AiiDA database.
</li>
<li>
<b>From Examples</b>:
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>
<div class="alert alert-success">
<h4>Tasks</h4>
<ol>
<li>Click on the <b>From examples</b> tab</li>
<li>Select <b>Gold</b> from the dropdown list</li>
<li>Click the <b>Confirm</b> button to proceed.</li>
</ol>
</div>
<div class="alert alert-warning">
<b>Warning:</b> 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>
<div class="alert alert-warning">
<b>Warning:</b> Changes after confirmation will unconfirm
this step and reset the following steps.
</div>
</div>
"""),
],
),
ipw.HTML("""
<p>
Select a structure from one of the following sources and then
Expand Down
20 changes: 20 additions & 0 deletions src/aiidalab_qe/app/submission/__init__.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@
from aiidalab_qe.app.parameters import DEFAULT_PARAMETERS
from aiidalab_qe.app.utils import get_entry_items
from aiidalab_qe.common.code import PluginCodes, PwCodeModel
from aiidalab_qe.common.infobox import InAppGuide
from aiidalab_qe.common.panel import PluginResourceSettingsModel, ResourceSettingsPanel
from aiidalab_qe.common.setup_codes import QESetupWidget
from aiidalab_qe.common.setup_pseudos import PseudosInstallWidget
Expand Down Expand Up @@ -158,6 +159,25 @@ def render(self):
)

self.children = [
InAppGuide(
children=[
ipw.HTML("""
<div>
In this step, we define the resources to be used in the
calculation. The global resources are used to define resources
across all workflow calculations. Optionally, you can override
the resource settings for specific calculations.
<div class="alert alert-success">
<h4>Tasks</h4>
<ol>
<li>Select resources</li>
<li>Click <b>Submit</b> to proceed</li>
</ol>
</div>
</div>
""")
],
),
ipw.HTML("""
<div style="padding-top: 0px; padding-bottom: 0px">
<h4>Codes</h4>
Expand Down
Loading

0 comments on commit ff247c0

Please sign in to comment.