Skip to content

Commit

Permalink
arrange widgets and udpate guide
Browse files Browse the repository at this point in the history
  • Loading branch information
@superstar54
superstar54 committed Jan 9, 2025
1 parent 7487061 commit 30e0629
Show file tree
Hide file tree
Showing 2 changed files with 104 additions and 60 deletions.
36 changes: 23 additions & 13 deletions calculation_history.ipynb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,24 +50,34 @@
" color: #2c3e50;\n",
" }\n",
" </style>\n",
" <div class=\"page-title\">Calculation history</div>\n",
" <div class=\"page-title\">Calculation History</div>\n",
" <div class=\"how-to-section\">\n",
" <h2>How to use this page</h2>\n",
" <h2>How to Use This Page</h2>\n",
" <p>\n",
" This page allows you to view and manage your calculation history. Use the table below to\n",
" see all jobs in the database. You can use the following filters to narrow down your search:\n",
" This page allows you to view, filter, sort, and manage your calculation history.\n",
" </p>\n",
" <h4>Filters and Search</h4>\n",
" <ul>\n",
" <li><b>Label search field:</b> Enter a job label to find matching jobs.</li>\n",
" <li><b>Job state dropdown:</b> Filter jobs based on their state (e.g., finished, running).</li>\n",
" <li><b>Date range picker:</b> Select a start and end date to view jobs created within that range.</li>\n",
" <li><b>Properties filter:</b> Select specific properties associated with jobs.</li>\n",
" <li><b>Quick Search Field:</b> Use the search bar above the table to find jobs by any visible field.</li>\n",
" <li><b>Column-Specific Filters:</b> Filter data directly in each column using their respective filter options.</li>\n",
" <li><b>Job State Dropdown:</b> Filter jobs by their state (e.g., Finished, Running).</li>\n",
" <li><b>Date Range Picker:</b> Select a start and end date to narrow down jobs based on creation date.</li>\n",
" <li><b>Properties Filter:</b> Select one or more properties to narrow the results. Only calculations that include all the selected properties will be displayed. Leave all checkboxes unselected to include calculations regardless of their properties.</li>\n",
" </ul>\n",
" <h4>Table Actions</h4>\n",
" <ul>\n",
" <li><b>Editable Fields:</b> Edit the <b>label</b> and <b>description</b> of a job directly by clicking on the respective fields.</li>\n",
" <li><b>Inspect:</b> Click on a job's ID link to view detailed information.</li>\n",
" <li><b>Delete:</b> Remove a job by clicking the \"Delete\" link in its row. A confirmation page will be opened.</li>\n",
" <li><b>Download:</b> Download raw data (i.e. input and output files) and/or the AiiDA archive of a job using the \"Download\" link.</li>\n",
" </ul>\n",
" <h4>Display Options</h4>\n",
" <ul>\n",
" <li><b>Sorting:</b> Click any column header to sort the table by that column.</li>\n",
" <li><b>Column Management:</b> Show, hide columns to customize the table view.</li>\n",
" <li><b>Time Format:</b> Toggle between \"Absolute\" (specific dates) and \"Relative\" (time elapsed).</li>\n",
" <li><b>ID Format:</b> Switch between \"PK\" or \"UUID\" for job identification.</li>\n",
" </ul>\n",
" <p>\n",
" Each row in the table provides links to inspect, delete or download a job. To delete a job, click the \"Delete\"\n",
" link in the respective row. To view detailed information about a job, click the \"PK\" link. To download the\n",
" input/output files of a job, click the \"Download\" link.\n",
" </p>\n",
" </div>\n",
" \"\"\"\n",
")\n",
Expand Down
128 changes: 81 additions & 47 deletions src/aiidalab_qe/app/utils/search_jobs.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,14 @@

COLUMNS = {
"ID": {"headerName": "ID 🔗", "dataType": "link", "editable": False},
"Creation time": {
"headerName": "Creation Time ⏰",
# "type": "date",
"Creation time absolute": {
"headerName": "Creation Time ⏰ (absolute)",
"type": "date",
"width": 150,
"editable": False,
},
"Creation time relative": {
"headerName": "Creation Time ⏰ (relative)",
"width": 150,
"editable": False,
},
Expand All @@ -40,7 +45,7 @@ class CalculationHistory:
def __init__(self):
self.main = ipw.VBox(children=[LoadingWidget("Loading the table...")])

self.table = TableWidget()
self.table = TableWidget(style={"margin-top": "20px"})

def on_row_update(change):
node = load_node(change["new"]["UUID"])
Expand Down Expand Up @@ -87,9 +92,13 @@ def load_data(self):
df = pd.DataFrame(results, columns=headers)
# Check if DataFrame is not empty
if not df.empty:
df["Creation time"] = df["ctime"].apply(
df["Creation time absolute"] = df["ctime"].apply(
lambda x: x.strftime("%Y-%m-%d %H:%M:%S")
)
now = pd.Timestamp.now(tz="UTC")
df["Creation time relative"] = df["ctime"].apply(
lambda x: f"{(now - x).days}D ago" if pd.notnull(x) else "N/A"
)
df["Delete"] = df["PK"].apply(
lambda pk: f'<a href="./delete.ipynb?pk={pk}" target="_blank">Delete</a>'
)
Expand Down Expand Up @@ -117,7 +126,8 @@ def load_data(self):
[
"PK_with_link",
"UUID_with_link",
"Creation time",
"Creation time absolute",
"Creation time relative",
"Structure",
"State",
"Label",
Expand All @@ -144,11 +154,10 @@ def setup_widgets(self):
for prop in unique_properties
]
self.properties_box = ipw.HBox(
children=property_checkboxes, description="Properties:"
)
self.properties_filter_description = ipw.HTML(
"<p><b>Properties filter:</b> Select one or more properties to narrow the results. Only calculations that include all the selected properties will be displayed. Leave all checkboxes unselected to include calculations regardless of their properties.</p>"
children=property_checkboxes,
indent=True,
)
self.properties_filter_description = ipw.HTML("<b>Filter by properties</b>:")
# Replace 'None' in 'Properties' with an empty list
self.df["Properties"] = self.df["Properties"].apply(
lambda x: [] if x is None else x
Expand Down Expand Up @@ -176,15 +185,15 @@ def setup_widgets(self):
description="ID format:",
)
self.toggle_id_format.observe(self.update_table_visibility, names="value")
self.toggle_multi_selection = ipw.ToggleButtons(
options=["On", "Off"],
value="Off",
description="Checkbox selection",
tooltips=["Enable multiple selection.", "Disable multiple selection"],
)
self.toggle_multi_selection.observe(
self.update_table_configuration, names="value"
)
# self.toggle_multi_selection = ipw.ToggleButtons(
# options=["On", "Off"],
# value="Off",
# description="Checkbox selection",
# tooltips=["Enable multiple selection.", "Disable multiple selection"],
# )
# self.toggle_multi_selection.observe(
# self.update_table_configuration, names="value"
# )

self.time_start = ipw.DatePicker(description="Start time:")
self.time_end = ipw.DatePicker(description="End time:")
Expand All @@ -196,42 +205,67 @@ def setup_widgets(self):
self.time_start.observe(self.apply_filters, names="value")
self.time_end.observe(self.apply_filters, names="value")
self.job_state_dropdown.observe(self.apply_filters, names="value")

self.main.children = [
ipw.HTML("<h3>Filters:</h3>"),
ipw.VBox(
[
self.job_state_dropdown,
self.time_box,
ipw.VBox([self.properties_filter_description, self.properties_box]),
# self.apply_filters_btn,
]
display_options = ipw.VBox(
children=[
ipw.HTML("<h4>Display options:</h4>"),
ipw.VBox(
[
self.toggle_time_format,
self.toggle_id_format,
# self.toggle_multi_selection,
]
),
],
layout=ipw.Layout(
border="1px solid #ddd",
padding="0px",
margin="0px, 0px, 100px, 0px",
background_color="#f9f9f9",
border_radius="5px",
box_shadow="0 2px 5px rgba(0, 0, 0, 0.1)",
),
ipw.HTML("<h3>Display options:</h3>"),
ipw.VBox(
[
self.toggle_time_format,
self.toggle_id_format,
self.toggle_multi_selection,
]
)
filters = ipw.VBox(
children=[
ipw.HTML("<h4>Filters:</h4>"),
ipw.VBox(
[
self.job_state_dropdown,
self.time_box,
ipw.VBox(
[self.properties_filter_description, self.properties_box],
layout=ipw.Layout(
border="1px solid #ddd", padding="5px", margin="5px"
),
),
]
),
],
layout=ipw.Layout(
border="1px solid #ddd",
padding="0px",
margin="0px, 0px, 100px, 0px",
background_color="#f9f9f9",
border_radius="5px",
box_shadow="0 2px 5px rgba(0, 0, 0, 0.1)",
),
)

self.main.children = [
display_options,
filters,
self.table,
]
self.update_table_value(self.df)

def update_table_value(self, display_df):
# Adjust the Creation time column based on the toggle state
if self.toggle_time_format.value == "Relative":
now = pd.Timestamp.now(tz="UTC")
display_df["Creation time"] = display_df["ctime"].apply(
lambda x: f"{(now - x).days}D ago" if pd.notnull(x) else "N/A"
)
COLUMNS["Creation time"].pop("type", None)
else:
display_df["Creation time"] = display_df["ctime"].apply(
lambda x: x.strftime("%Y-%m-%d %H:%M:%S") if pd.notnull(x) else "N/A"
)
# COLUMNS["Creation time"]["type"] = "date"
COLUMNS["Creation time relative"]["hide"] = (
self.toggle_time_format.value != "Relative"
)
COLUMNS["Creation time absolute"]["hide"] = (
self.toggle_time_format.value != "Absolute"
)
# Adjust the ID column based on the toggle state
if self.toggle_id_format.value == "PK":
display_df = display_df.rename(columns={"PK_with_link": "ID"}).drop(
Expand Down

0 comments on commit 30e0629

Please sign in to comment.