Skip to content

Commit a0fbd89

Browse files
rookiepengrookiepeng
committed
update
1 parent f20772b commit a0fbd89

File tree

6 files changed

+423
-327
lines changed

6 files changed

+423
-327
lines changed

‎layouts/app_layout.py‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -68,9 +68,9 @@
6868
from layouts.view3d_card_layout import get_view3d_card_layout
6969
from layouts.left2d_card_layout import get_left2d_card_layout
7070
from layouts.right2d_card_layout import get_right2d_card_layout
71-
from layouts.hist_card_layout import hist_card
72-
from layouts.violin_card_layout import violin_card
73-
from layouts.parallel_card_layout import parallel_card
71+
from layouts.hist_card_layout import get_hist_card_layout
72+
from layouts.violin_card_layout import get_violin_card_layout
73+
from layouts.parallel_card_layout import get_parallel_card_layout
7474
from layouts.heatmap_card_layout import get_heatmap_card
7575

7676

@@ -117,8 +117,12 @@ def get_app_layout():
117117
dbc.CardGroup(
118118
[get_left2d_card_layout(), get_right2d_card_layout()], className="mb-3"
119119
),
120-
dbc.CardGroup([hist_card, violin_card], className="mb-3"),
121-
dbc.CardGroup([parallel_card, get_heatmap_card()], className="mb-3"),
120+
dbc.CardGroup(
121+
[get_hist_card_layout(), get_violin_card_layout()], className="mb-3"
122+
),
123+
dbc.CardGroup(
124+
[get_parallel_card_layout(), get_heatmap_card()], className="mb-3"
125+
),
122126
html.Hr(),
123127
dbc.Row(
124128
[

‎layouts/hist_card_layout.py‎

Lines changed: 143 additions & 122 deletions
Original file line numberDiff line numberDiff line change
@@ -31,127 +31,148 @@
3131

3232
import dash_bootstrap_components as dbc
3333

34-
hist_card = dbc.Card(
35-
[
36-
dbc.CardBody(
37-
[
38-
dbc.Row(
39-
[
40-
dbc.Col(dbc.Label("Histogram")),
41-
dbc.Col(
42-
dbc.Checklist(
43-
options=[{"label": "Enable", "value": True}],
44-
value=[],
45-
id="histogram-switch",
46-
switch=True,
47-
style={"float": "right"},
48-
)
49-
),
50-
]
51-
),
52-
html.Hr(),
53-
dbc.Row(
54-
[
55-
dbc.Col(
56-
dbc.InputGroup(
57-
[
58-
dbc.InputGroupText("x"),
59-
dbc.Select(
60-
id="x-picker-histogram",
61-
disabled=False,
62-
),
63-
]
64-
)
65-
),
66-
dbc.Tooltip(
67-
"Select x axis",
68-
target="x-picker-histogram",
69-
placement="top",
70-
),
71-
dbc.Col(
72-
dbc.InputGroup(
73-
[
74-
dbc.InputGroupText("y"),
75-
dbc.Select(
76-
id="y-histogram",
77-
options=[
78-
{
79-
"label": "Probability",
80-
"value": "probability",
34+
35+
def get_hist_card_layout():
36+
"""
37+
Creates and returns a Dash Bootstrap Card layout for a histogram visualization panel.
38+
39+
The layout includes:
40+
- A header with a label and an enable switch.
41+
- Selectors for x, y, and color axes, each with tooltips.
42+
- A loading spinner that wraps a collapsible area containing:
43+
- A histogram graph.
44+
- An export button with tooltip.
45+
46+
Args:
47+
None
48+
49+
Returns:
50+
dbc.Card: A Dash Bootstrap Card component containing the histogram controls and visualization.
51+
"""
52+
return dbc.Card(
53+
[
54+
dbc.CardBody(
55+
[
56+
dbc.Row(
57+
[
58+
dbc.Col(dbc.Label("Histogram")),
59+
dbc.Col(
60+
dbc.Checklist(
61+
options=[{"label": "Enable", "value": True}],
62+
value=[],
63+
id="histogram-switch",
64+
switch=True,
65+
style={"float": "right"},
66+
)
67+
),
68+
]
69+
),
70+
html.Hr(),
71+
dbc.Row(
72+
[
73+
dbc.Col(
74+
dbc.InputGroup(
75+
[
76+
dbc.InputGroupText("x"),
77+
dbc.Select(
78+
id="x-picker-histogram",
79+
disabled=False,
80+
),
81+
]
82+
)
83+
),
84+
dbc.Tooltip(
85+
"Select x axis",
86+
target="x-picker-histogram",
87+
placement="top",
88+
),
89+
dbc.Col(
90+
dbc.InputGroup(
91+
[
92+
dbc.InputGroupText("y"),
93+
dbc.Select(
94+
id="y-histogram",
95+
options=[
96+
{
97+
"label": "Probability",
98+
"value": "probability",
99+
},
100+
{
101+
"label": "Density",
102+
"value": "density",
103+
},
104+
],
105+
value="density",
106+
disabled=False,
107+
),
108+
]
109+
)
110+
),
111+
dbc.Tooltip(
112+
"Select y axis",
113+
target="y-histogram",
114+
placement="top",
115+
),
116+
dbc.Col(
117+
dbc.InputGroup(
118+
[
119+
dbc.InputGroupText("c"),
120+
dbc.Select(
121+
id="c-picker-histogram",
122+
disabled=False,
123+
),
124+
]
125+
)
126+
),
127+
dbc.Tooltip(
128+
"Select color axis",
129+
target="c-picker-histogram",
130+
placement="top",
131+
),
132+
]
133+
),
134+
dcc.Loading(
135+
id="loading_histogram",
136+
children=[
137+
dbc.Collapse(
138+
html.Div(
139+
[
140+
dcc.Graph(
141+
id="histogram",
142+
config={"displaylogo": False},
143+
figure={
144+
"data": [{"type": "histogram", "x": []}]
81145
},
82-
{"label": "Density", "value": "density"},
83-
],
84-
value="density",
85-
disabled=False,
86-
),
87-
]
88-
)
89-
),
90-
dbc.Tooltip(
91-
"Select y axis",
92-
target="y-histogram",
93-
placement="top",
94-
),
95-
dbc.Col(
96-
dbc.InputGroup(
97-
[
98-
dbc.InputGroupText("c"),
99-
dbc.Select(
100-
id="c-picker-histogram",
101-
disabled=False,
102-
),
103-
]
146+
),
147+
dbc.Row(
148+
[
149+
dbc.Col(
150+
dbc.Button(
151+
html.I(
152+
className="bi bi-camera-fill"
153+
),
154+
id="export-histogram",
155+
n_clicks=0,
156+
style={"float": "right"},
157+
)
158+
),
159+
]
160+
),
161+
dbc.Tooltip(
162+
"Export the current figure",
163+
target="export-histogram",
164+
placement="top",
165+
),
166+
]
167+
),
168+
is_open=False,
169+
id="collapse-hist",
104170
)
105-
),
106-
dbc.Tooltip(
107-
"Select color axis",
108-
target="c-picker-histogram",
109-
placement="top",
110-
),
111-
]
112-
),
113-
dcc.Loading(
114-
id="loading_histogram",
115-
children=[
116-
dbc.Collapse(
117-
html.Div(
118-
[
119-
dcc.Graph(
120-
id="histogram",
121-
config={"displaylogo": False},
122-
figure={
123-
"data": [{"type": "histogram", "x": []}]
124-
},
125-
),
126-
dbc.Row(
127-
[
128-
dbc.Col(
129-
dbc.Button(
130-
html.I(
131-
className="bi bi-camera-fill"
132-
),
133-
id="export-histogram",
134-
n_clicks=0,
135-
style={"float": "right"},
136-
)
137-
),
138-
]
139-
),
140-
dbc.Tooltip(
141-
"Export the current figure",
142-
target="export-histogram",
143-
placement="top",
144-
),
145-
]
146-
),
147-
is_open=False,
148-
id="collapse-hist",
149-
)
150-
],
151-
type="default",
152-
),
153-
]
154-
)
155-
],
156-
className="shadow-sm",
157-
)
171+
],
172+
type="default",
173+
),
174+
]
175+
)
176+
],
177+
className="shadow-sm",
178+
)

‎layouts/left2d_card_layout.py‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,22 @@
3737

3838

3939
def get_left2d_card_layout():
40+
"""
41+
Creates and returns a Dash Bootstrap Card layout for the 2D scatter plot controls and display.
42+
43+
The layout includes:
44+
- A header with a label and enable switch for the 2D view.
45+
- Dropdown selectors for x, y, color axes, and colormap.
46+
- Radio buttons to toggle between current frame and all frames.
47+
- A collapsible section containing a loading spinner, the 2D scatter plot, and action buttons for hiding points and exporting the figure.
48+
- Tooltips for user guidance.
49+
50+
Args:
51+
None
52+
53+
Returns:
54+
dbc.Card: A Dash Bootstrap Card component containing the full 2D scatter plot control and display layout.
55+
"""
4056
return dbc.Card(
4157
[
4258
dbc.CardBody(

0 commit comments

Comments
 (0)