Skip to content

Commit 4ef5084

Browse files
daniel-thomdaniel-thom
authored
Merge pull request #35 from NREL/refactor/torc-dash
Refactor the Dash UI
2 parents 62080d4 + 19ee703 commit 4ef5084

File tree

4 files changed

+1212
-460
lines changed

4 files changed

+1212
-460
lines changed

‎docs/src/how-to/dashboard.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ torc-dash
9393
- Click "Save Configuration"
9494

9595
4. **Test the connection**:
96-
- Navigate to the "View Resources" tab
96+
- Navigate to the "View Details" tab
9797
- Select "Workflows" from the dropdown
9898
- Click "Refresh"
9999
- You should see a list of workflows (if any exist)
@@ -105,7 +105,7 @@ torc-dash
105105
- Set the Torc API URL
106106
- Configure username for workflow operations
107107

108-
### View Resources Tab
108+
### View Details Tab
109109

110110
Browse and monitor Torc resources with interactive tables:
111111

@@ -162,14 +162,14 @@ Real-time execution output is displayed in the "Execution Output" section.
162162

163163
### Monitoring Active Workflows
164164

165-
1. Go to "View Resources" tab
165+
1. Go to "View Details" tab
166166
2. Select "Workflows" from the resource type dropdown
167167
3. Enable "Auto-refresh" for live updates
168168
4. Use the table's filter boxes to search for specific workflows
169169

170170
### Viewing Job Status
171171

172-
1. Go to "View Resources" tab
172+
1. Go to "View Details" tab
173173
2. Select "Jobs" from the resource type dropdown
174174
3. Select a workflow from the filter dropdown
175175
4. Monitor job status changes with auto-refresh enabled
@@ -217,7 +217,7 @@ torc-dash --port 8051
217217

218218
**Solutions**:
219219
- Ensure the "Auto-refresh" toggle is enabled
220-
- Verify you're on the "View Resources" tab
220+
- Verify you're on the "View Details" tab
221221
- Check that the API connection is working
222222
- Manually refresh to test connectivity
223223

‎python_client/src/torc/dash_app/app.py‎

Lines changed: 16 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
"""Main Dash application for Torc workflow management."""
22

33
import os
4-
from dash import Dash, html, dcc
4+
from dash import Dash, html, dcc, Input, Output, State, clientside_callback
55
import dash_bootstrap_components as dbc
66

77
# Initialize the Dash app with Bootstrap theme
@@ -29,6 +29,15 @@
2929
dcc.Store(id="dag-workflow-id-store"),
3030
dcc.Store(id="delete-workflow-id-store"),
3131

32+
# Hidden elements for backward compatibility with old callbacks
33+
html.Div(id="selected-workflow-badge", style={"display": "none"}),
34+
html.Div(id="global-workflows-table-container", style={"display": "none"}),
35+
dcc.Interval(id="global-refresh-interval", interval=30000, disabled=True),
36+
dbc.Collapse(id="workflow-selection-collapse", is_open=False),
37+
dcc.Checklist(id="global-auto-refresh-toggle", options=[], value=[], style={"display": "none"}),
38+
html.Button(id="global-refresh-workflows-button", style={"display": "none"}),
39+
html.Button(id="workflow-selection-collapse-button", style={"display": "none"}),
40+
3241
# Confirmation modal for workflow deletion
3342
dbc.Modal(
3443
[
@@ -163,85 +172,20 @@
163172
)
164173
),
165174

166-
# Workflow Selection panel (collapsible)
167-
dbc.Row(
168-
dbc.Col(
169-
dbc.Card(
170-
[
171-
dbc.CardHeader(
172-
dbc.Button(
173-
[
174-
html.I(className="fas fa-list me-2"),
175-
"Workflow Selection",
176-
html.Span(id="selected-workflow-badge", className="badge bg-primary ms-2"),
177-
],
178-
id="workflow-selection-collapse-button",
179-
className="w-100 text-start",
180-
color="light",
181-
n_clicks=0,
182-
)
183-
),
184-
dbc.Collapse(
185-
dbc.CardBody(
186-
[
187-
dbc.Row(
188-
[
189-
dbc.Col(
190-
[
191-
dbc.Button(
192-
[html.I(className="fas fa-sync me-2"), "Refresh Workflows"],
193-
id="global-refresh-workflows-button",
194-
color="primary",
195-
size="sm",
196-
className="me-2",
197-
),
198-
dbc.Checklist(
199-
id="global-auto-refresh-toggle",
200-
options=[
201-
{"label": " Auto-refresh (every 30s)", "value": "auto"},
202-
],
203-
value=[],
204-
inline=True,
205-
switch=True,
206-
),
207-
],
208-
className="mb-3",
209-
),
210-
]
211-
),
212-
dbc.Row(
213-
dbc.Col(
214-
html.Div(id="global-workflows-table-container"),
215-
)
216-
),
217-
]
218-
),
219-
id="workflow-selection-collapse",
220-
is_open=True,
221-
),
222-
],
223-
className="mb-4"
224-
)
225-
)
226-
),
227-
228-
# Hidden interval component for auto-refresh
229-
dcc.Interval(id="global-refresh-interval", interval=30000, disabled=True),
230-
231175
# Main tabs
232176
dbc.Row(
233177
dbc.Col(
234178
dbc.Tabs(
235179
[
236180
dbc.Tab(
237-
label="View Workflows",
238-
tab_id="view-tab",
181+
label="Manage Workflows",
182+
tab_id="run-tab",
239183
label_style={"cursor": "pointer"},
240184
active_label_class_name="fw-bold",
241185
),
242186
dbc.Tab(
243-
label="Manage Workflows",
244-
tab_id="run-tab",
187+
label="Workflow Details",
188+
tab_id="view-tab",
245189
label_style={"cursor": "pointer"},
246190
active_label_class_name="fw-bold",
247191
),
@@ -271,7 +215,7 @@
271215
),
272216
],
273217
id="main-tabs",
274-
active_tab="view-tab",
218+
active_tab="run-tab",
275219
)
276220
)
277221
),
@@ -297,5 +241,6 @@
297241
# Import callbacks after layout is defined to avoid circular imports
298242
from . import callbacks # noqa: F401
299243

244+
300245
if __name__ == "__main__":
301246
app.run_server(debug=True, host="0.0.0.0", port=8050)

0 commit comments

Comments
 (0)