Skip to content

Commit 75da835

Browse files
hexaederhexaeder
committed
add resize capabilities
1 parent 1aaf3f4 commit 75da835

File tree

4 files changed

+98
-34
lines changed

4 files changed

+98
-34
lines changed

‎NetworkDynamicsInspector/assets/app.css

Lines changed: 33 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,31 +19,48 @@ html, body {
1919

2020
.maingrid {
2121
display: grid;
22-
grid-template-columns: 25% 75%;
22+
grid-template-columns: min-content auto;
2323
width: 100%;
24+
gap: 5px;
2425
}
25-
.graphplot-col {
26-
display: grid;
27-
grid-template-columns: 100%;
28-
}
29-
.timeseries-col{
30-
display: grid;
31-
grid-template-columns: 100%;
26+
27+
.graphplot-col, .timeseries-col, .timeseries-stack{
28+
display: flex;
29+
flex-direction: column;
30+
gap: 5px;
31+
overflow: hidden; /* otherwise it won't shrink */
3232
}
3333

3434
.graphplot-card {
35-
heigth:400px;
35+
heigth:400px; /* initial widht and height */
36+
width: 400px;
37+
min-width:250px;
38+
resize: both;
39+
overflow: hidden;
3640
/* grid-column: 1; */
3741
}
38-
.gpstate-control-card.vertex {
39-
height:min-content;
40-
/* grid-column: 1; */
41-
}
42-
.gpstate-control-card.edge {
43-
height:min-content;
44-
/* grid-column: 1; */
42+
43+
.gpstate-control-card {
4544
}
4645

4746
.timeslider-card {
4847
height:min-content;
4948
}
49+
50+
.timeseries-card {
51+
resize: vertical;
52+
overflow: hidden;
53+
/* grid-column: 2; */
54+
}
55+
.timeseries-card-container{
56+
display: flex;
57+
flex-direction: column;
58+
height: 100%; /* otherwise it won't shrink */
59+
}
60+
.timeseries-card-container .comp-state-sel-grid {
61+
height: min-content; /* otherwise it won't shrink */
62+
}
63+
.timeseries-axis-container{
64+
flex-grow: 1;
65+
overflow:hidden;
66+
}

‎NetworkDynamicsInspector/src/NetworkDynamicsInspector.jl

Lines changed: 20 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@ function graphplot_card(app; kwargs...)
109109
THICK = 6
110110
edge_width = Observable(fill(THIN, NE))
111111

112-
onany(app.graphplot.selcomp) do selcomp
112+
onany(app.graphplot.selcomp; update=true) do selcomp
113113
@debug "GP: Sel comp => node_size, edge_width"
114114
fill!(node_size[], SMALL)
115115
fill!(edge_width[], THIN)
@@ -146,8 +146,8 @@ function graphplot_card(app; kwargs...)
146146
node_attr=(;colorrange=app.graphplot.ncolorrange, colormap=app.graphplot.ncolorscheme),
147147
edge_attr=(;colorrange=app.graphplot.ncolorrange, colormap=app.graphplot.ncolorscheme))
148148

149-
hidespines!(ax)
150-
hidedecorations!(ax)
149+
# hidespines!(ax)
150+
# hidedecorations!(ax)
151151
fig, ax
152152
end
153153
on(ax.scene.viewport) do lims
@@ -207,7 +207,7 @@ function timeslider_card(app)
207207
RoundedLabel(tw_slider.value_l; style=Styles("text-align"=>"right")),
208208
tw_slider,
209209
RoundedLabel(tw_slider.value_r; style=Styles("text-align"=>"left"));
210-
columns="70px 1fr 70px",
210+
columns="70px auto 70px",
211211
justify_content="begin",
212212
align_items="center",
213213
);
@@ -223,6 +223,7 @@ function gpstate_control_card(app, type)
223223
colorrange = type == :vertex ? app.graphplot.ncolorrange : app.graphplot.ecolorrange
224224
colorscheme = type == :vertex ? app.graphplot.ncolorscheme : app.graphplot.ecolorscheme
225225
class = type == :vertex ? "gpstate-control-card vertex" : "gpstate-control-card edge"
226+
class *= " resize-with-gp"
226227

227228
####
228229
#### State selection
@@ -294,7 +295,7 @@ function gpstate_control_card(app, type)
294295
end
295296

296297
fig = with_theme(apptheme()) do
297-
fig = Figure(; figure_padding=10)
298+
fig = Figure(size=(400,40); figure_padding=10)
298299
Colorbar(fig[1,1];
299300
colormap=colorscheme,
300301
colorrange=colorrange,
@@ -305,13 +306,14 @@ function gpstate_control_card(app, type)
305306
cslider = ContinuousSlider(maxrange, thumb_l, thumb_r)
306307

307308
Card(
308-
Grid(
309+
DOM.div(
309310
selector,
310311
DOM.div(fig; style=Styles("height" => "40px")),
312+
# fig,
311313
# RoundedLabel(@lift $maxrange[1]; style=Styles("text-align"=>"right")),
312314
cslider,
313315
# RoundedLabel(@lift $maxrange[2]; style=Styles("text-align"=>"left"));
314-
columns="100%",
316+
class="gpstate-control-card-content",
315317
);
316318
class
317319
)
@@ -374,7 +376,9 @@ function timeseries_card(app, session)
374376
comp_state_sel_dom = Grid(
375377
DOM.span("Components"), comp_sel, reset_button,
376378
DOM.span("States"), state_sel, rel_toggle;
377-
columns = "auto 1fr auto", align_items = "center"
379+
columns = "min-content auto min-content",
380+
align_items = "center",
381+
class = "comp-state-sel-grid"
378382
)
379383

380384
# hl choice of elements in graphplot
@@ -449,7 +453,7 @@ function timeseries_card(app, session)
449453
styleContent += `#$(comp_ms_id) +span li[title='${title}']::after {
450454
content: 'xx';
451455
display: inline-block;
452-
padding-left: 0px 4px;
456+
padding: 0px 4px;
453457
background-color: ${color} !important;
454458
color: ${color} !important;
455459
border-left: 1px solid #aaa;
@@ -487,8 +491,7 @@ function timeseries_card(app, session)
487491
styleContent += `#$(state_ms_id) +span li[title='${title}']::after {
488492
content: '${linestyle}';
489493
display: inline-block;
490-
padding-left: 5px;
491-
padding-right: 5px;
494+
padding: 0px 4px;
492495
color: inherit;
493496
border-left: 1px solid #aaa;
494497
font-size: smaller;
@@ -563,7 +566,7 @@ function timeseries_card(app, session)
563566
@debug "TS: t, valid_idx, rel, sol => update data"
564567
_dat = _sol(_ts, idxs=_valid_idxs)
565568
if _rel
566-
u0 = _sol(sol.t[begin], idxs=_valid_idxs)
569+
u0 = _sol(_sol.t[begin], idxs=_valid_idxs)
567570
for row in _dat
568571
row .-= u0
569572
end
@@ -611,10 +614,12 @@ function timeseries_card(app, session)
611614
register_interaction!(set_time_interaction, ax, :set_time)
612615

613616
Card(
614-
Grid(
617+
DOM.div(
615618
comp_state_sel_dom,
616-
fig
617-
)
619+
DOM.div(fig; class="timeseries-axis-container");
620+
class="timeseries-card-container"
621+
);
622+
class="timeseries-card"
618623
)
619624
end
620625
function _sidx_to_str(s)

‎NetworkDynamicsInspector/src/widgets.jl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -477,7 +477,7 @@ function Bonito.jsrender(session::Session, multiselect::MultiSelect)
477477
478478
const sortedElements = new_order.map(i => jq_tags.eq(i));
479479
jq_tags_ul.append(sortedElements);
480-
console.log("Rendered selection")
480+
// console.log("Rendered selection")
481481
}
482482
function selectionHandler(e){
483483
const jq_select2 = $esc(this);
@@ -571,7 +571,7 @@ end
571571
height::Int = 24
572572
width::Int = 35
573573
inset::Int = 3
574-
checked_color::String = "#2196F3"
574+
checked_color::String = "#0072B2FF"
575575
background_color::String = "#ccc"
576576
thumb_color::String = "white"
577577
transition_time::Float64 = 0.4

‎test/Inspector_test.jl

Lines changed: 43 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,43 @@ let
8686
@info "start new session"
8787
WGLMakie.activate!(resize_to=:parent)
8888
NetworkDynamicsInspector.clear_obs!(app)
89+
90+
resize_gp = js"""
91+
const graphplotCard = document.querySelector(".graphplot-card");
92+
93+
// Function to update the width dynamically
94+
function updateResizeWithGpWidth() {
95+
const graphplotWidth = getComputedStyle(graphplotCard).width; // Get the computed width of .graphplot-card
96+
const resizeWithGpElements = document.querySelectorAll(".resize-with-gp");
97+
98+
// Dynamically update the styles for .resize-with-gp elements
99+
let styleTag = document.getElementById("dynamic-resize-style");
100+
101+
// Create the <style> tag if it doesn't exist
102+
if (!styleTag) {
103+
styleTag = document.createElement("style");
104+
styleTag.id = "dynamic-resize-style";
105+
document.head.appendChild(styleTag);
106+
}
107+
108+
// Generate new CSS rule based on the width of .graphplot-card
109+
styleTag.innerHTML = `.resize-with-gp { width: ${graphplotWidth} !important; }`;
110+
111+
// Manually trigger the resize event on the window
112+
const resizeEvent = new Event('resize');
113+
window.dispatchEvent(resizeEvent);
114+
};
115+
116+
// Use ResizeObserver for live resizing feedback
117+
const updateResizeWithGpWidth_throttled = Bonito.throttle_function(updateResizeWithGpWidth, 1);
118+
const resizeObserver = new ResizeObserver(updateResizeWithGpWidth_throttled);
119+
resizeObserver.observe(graphplotCard);
120+
121+
// Initial update
122+
updateResizeWithGpWidth();
123+
"""
124+
Bonito.evaljs(session, resize_gp)
125+
89126
DOM.div(
90127
DOM.div(
91128
NetworkDynamicsInspector.graphplot_card(app),
@@ -95,7 +132,12 @@ let
95132
),
96133
DOM.div(
97134
NetworkDynamicsInspector.timeslider_card(app),
98-
NetworkDynamicsInspector.timeseries_card(app, session),
135+
DOM.div(
136+
NetworkDynamicsInspector.timeseries_card(app, session),
137+
Card("foo"),
138+
Card("bar"),
139+
class="timeseries-stack"
140+
),
99141
class="timeseries-col"
100142
),
101143
class="maingrid"

0 commit comments

Comments
 (0)