Skip to content

Commit ba77480

Browse files
author
Oumou
committed
style: update design system and component styling
Update theme, styles, and shared components for visual consistency across all views.
1 parent a279f84 commit ba77480

File tree

7 files changed

+482
-374
lines changed

7 files changed

+482
-374
lines changed

‎omero_metrics/dash_apps/dash_group.py‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
from time import sleep
2-
31
import dash
42
import dash_mantine_components as dmc
53
import pandas as pd
@@ -167,12 +165,8 @@
167165
),
168166
"Download",
169167
],
170-
variant="gradient",
171-
gradient={
172-
"from": THEME["secondary"],
173-
"to": THEME["primary"],
174-
"deg": 105,
175-
},
168+
variant="filled",
169+
color=THEME["primary"],
176170
w="auto",
177171
),
178172
dcc.Download(id="download"),
@@ -195,12 +189,8 @@
195189
),
196190
"Delete All",
197191
],
198-
variant="gradient",
199-
gradient={
200-
"from": THEME["error"],
201-
"to": THEME["primary"],
202-
"deg": 105,
203-
},
192+
variant="filled",
193+
color="red",
204194
w=250,
205195
),
206196
dmc.Modal(
@@ -355,7 +345,6 @@ def delete_all_callback(*args, **kwargs):
355345
request = kwargs["request"]
356346
opened = not args[3]
357347
if triggered_button == "modal-submit-button.n_clicks" and args[0] > 0:
358-
sleep(1)
359348
response_type, response_msg = views.delete_all(request, group_id=group_id)
360349

361350
return my_components.notification_handler(

‎omero_metrics/dash_apps/dash_microscope.py‎

Lines changed: 97 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,130 +1,128 @@
11
import dash_mantine_components as dmc
2-
import pandas as pd
3-
from dash import dash_table, html
2+
from dash_iconify import DashIconify
43
from django_plotly_dash import DjangoDash
54

6-
df = pd.DataFrame(
7-
{
8-
"country": ["Afghanistan", "Albania", "Algeria"],
9-
"continent": ["Asia", "Europe", "Africa"],
10-
"lifeExp": [43.828, 76.423, 72.301],
11-
"pop": [31889923, 3600523, 33333216],
12-
"gdpPercap": [974.5803384, 5937.029526, 6223.367465],
13-
}
14-
)
15-
5+
from omero_metrics.styles import MANTINE_THEME, THEME
166

177
dashboard_name = "top_iu_microscope"
188
dash_app_microscope = DjangoDash(
199
name=dashboard_name,
2010
serve_locally=True,
2111
)
2212

13+
14+
def _info_card(icon, label, description):
15+
return dmc.Paper(
16+
p="lg",
17+
radius="md",
18+
withBorder=True,
19+
style={"borderColor": THEME["border_light"]},
20+
children=[
21+
dmc.Stack(
22+
[
23+
dmc.ThemeIcon(
24+
DashIconify(icon=icon, width=22),
25+
size=40,
26+
radius="md",
27+
color="green",
28+
variant="light",
29+
),
30+
dmc.Text(label, fw=600, size="sm", c=THEME["text"]["primary"]),
31+
dmc.Text(description, size="xs", c=THEME["text"]["muted"]),
32+
],
33+
gap="xs",
34+
),
35+
],
36+
)
37+
38+
2339
dash_app_microscope.layout = dmc.MantineProvider(
24-
[
40+
theme=MANTINE_THEME,
41+
children=[
2542
dmc.Container(
2643
[
2744
dmc.Stack(
2845
[
29-
dmc.Title(
30-
"Microscope Dashboard",
31-
size="h3",
32-
c="#63aa47",
46+
# Hero section
47+
dmc.Paper(
48+
p="xl",
49+
radius="md",
50+
withBorder=True,
3351
style={
34-
"margin-top": "20px",
35-
"text-align": "center",
52+
"borderColor": THEME["border_light"],
53+
"borderLeft": f"4px solid {THEME['primary']}",
3654
},
37-
),
38-
html.Hr(),
39-
dmc.Flex(
40-
direction={"base": "column", "sm": "row"},
41-
gap={"base": "sm", "sm": "lg"},
42-
justify={"sm": "flex-start"},
43-
align={"sm": "center"},
44-
style={
45-
"margin-top": "20px",
46-
"margin-bottom": "10px",
47-
},
48-
),
49-
dmc.Grid(
50-
[
51-
dmc.GridCol(
55+
children=[
56+
dmc.Group(
5257
[
53-
html.Div(
58+
dmc.Stack(
5459
[
55-
dmc.Slider(
56-
id="drag-slider",
57-
value=26,
58-
updatemode="drag",
59-
marks=[
60-
{
61-
"value": 20,
62-
"label": "20%",
63-
},
64-
{
65-
"value": 50,
66-
"label": "50%",
67-
},
68-
{
69-
"value": 80,
70-
"label": "80%",
71-
},
60+
dmc.Group(
61+
[
62+
dmc.Title(
63+
"OMERO Metrics",
64+
order=2,
65+
),
66+
dmc.Badge(
67+
"QC Dashboard",
68+
color="green",
69+
variant="light",
70+
size="md",
71+
),
7272
],
73-
mb=25,
73+
gap="sm",
74+
),
75+
dmc.Text(
76+
"Microscopy quality control and performance tracking",
77+
c=THEME["text"]["secondary"],
78+
size="md",
7479
),
7580
],
76-
style={
77-
"background-color": "#3c652a",
78-
"padding": "10px",
79-
"border-radius": "0.5rem",
80-
"margin-bottom": "10px",
81-
"align": "center",
82-
},
83-
),
84-
dmc.BarChart(
85-
h=300,
86-
dataKey="continent",
87-
data=df.to_dict(orient="records"),
88-
series=[
89-
{
90-
"name": "pop",
91-
"color": "violet.6",
92-
},
93-
{
94-
"name": "lifeExp",
95-
"color": "blue.6",
96-
},
97-
{
98-
"name": "gdpPercap",
99-
"color": "teal.6",
100-
},
101-
],
102-
tickLine="y",
103-
gridAxis="y",
104-
withXAxis=True,
105-
withYAxis=True,
81+
gap="xs",
10682
),
10783
],
108-
span="auto",
84+
justify="space-between",
10985
),
110-
dmc.GridCol(
111-
[
112-
dash_table.DataTable(
113-
data=df.to_dict("records"),
114-
page_size=10,
115-
)
116-
],
117-
span="auto",
86+
],
87+
),
88+
# Feature cards
89+
dmc.SimpleGrid(
90+
cols=3,
91+
spacing="md",
92+
children=[
93+
_info_card(
94+
"tabler:microscope",
95+
"PSF Beads Analysis",
96+
"Measure resolution via point spread function bead imaging",
97+
),
98+
_info_card(
99+
"tabler:brightness-half",
100+
"Field Illumination",
101+
"Assess illumination uniformity across the field of view",
102+
),
103+
_info_card(
104+
"tabler:chart-line",
105+
"Trend Monitoring",
106+
"Track instrument performance over time across datasets",
118107
),
119108
],
120-
justify="space-between",
121-
align="stretch",
122109
),
123-
]
124-
)
110+
# Getting started
111+
dmc.Alert(
112+
"Select a project, dataset, or image from the left panel to begin.",
113+
title="Getting Started",
114+
color="green",
115+
variant="light",
116+
radius="md",
117+
icon=DashIconify(icon="tabler:arrow-left", width=20),
118+
),
119+
],
120+
gap="md",
121+
),
125122
],
126-
style={"background-color": "#e0e0e0"},
127-
fluid=True,
123+
size="lg",
124+
p="lg",
125+
style={"backgroundColor": THEME["background"]},
128126
),
129-
]
127+
],
130128
)

‎omero_metrics/dash_apps/dash_multiple_projects/dash_projects.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
from django_plotly_dash import DjangoDash
55

66
import omero_metrics.dash_apps.dash_utils.omero_metrics_components as my_components
7-
from omero_metrics.styles import CARD_STYLE1
7+
from omero_metrics.styles import CARD_STYLE_ELEVATED
88

99
# Initialize the Dash app
1010
dashboard_name = "omero_multiple_projects"
@@ -61,7 +61,7 @@ def kkm_tables_projects(*args, **kwargs):
6161
)
6262
)
6363
return dmc.Paper(
64-
style={**CARD_STYLE1, "marginTop": "12px"}, children=div_data
64+
style={**CARD_STYLE_ELEVATED, "marginTop": "12px"}, children=div_data
6565
)
6666
else:
6767
return [

0 commit comments

Comments
 (0)