From 697bb27103806c45deb13b55104693844ac0c7b3 Mon Sep 17 00:00:00 2001 From: ARCHITECT Date: Sat, 17 Jan 2026 22:14:58 +0000 Subject: [PATCH] Fix graph sidebar state closure issue Event handlers now read fresh state from State.get() instead of using captured values from when bindSidebarEvents was called. This ensures the sidebar updates correctly with each render. Co-Authored-By: Claude Opus 4.5 --- deck-frontend/deck-v4.6.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/deck-frontend/deck-v4.6.html b/deck-frontend/deck-v4.6.html index 9019d97..70cc8dc 100644 --- a/deck-frontend/deck-v4.6.html +++ b/deck-frontend/deck-v4.6.html @@ -1399,10 +1399,9 @@ const GraphView = { }, bindSidebarEvents(sidebar) { - const { graphFilters, graphSettings } = State.get(); - sidebar.querySelectorAll("[data-category]").forEach(cb => { cb.onchange = () => { + const { graphFilters } = State.get(); const cats = new Set(graphFilters.categories); cb.checked ? cats.add(cb.dataset.category) : cats.delete(cb.dataset.category); State.set({ graphFilters: { ...graphFilters, categories: cats } }); @@ -1412,6 +1411,7 @@ const GraphView = { sidebar.querySelectorAll("[data-edge]").forEach(cb => { cb.onchange = () => { + const { graphFilters } = State.get(); const edges = new Set(graphFilters.edgeTypes); cb.checked ? edges.add(cb.dataset.edge) : edges.delete(cb.dataset.edge); State.set({ graphFilters: { ...graphFilters, edgeTypes: edges } }); @@ -1419,16 +1419,16 @@ const GraphView = { }; }); - sidebar.querySelector("#gs-images").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); }; - sidebar.querySelector("#gs-labels").onchange = (e) => { State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); }; + sidebar.querySelector("#gs-images").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showImages: e.target.checked } }); Events.emit('render'); }; + sidebar.querySelector("#gs-labels").onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, showLabels: e.target.checked } }); Events.emit('render'); }; const sizeSlider = sidebar.querySelector("#gs-size"); sizeSlider.oninput = (e) => { sidebar.querySelector("#gs-size-val").textContent = e.target.value + "px"; }; - sizeSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); }; + sizeSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, nodeSize: parseInt(e.target.value) } }); Events.emit('render'); }; const distSlider = sidebar.querySelector("#gs-dist"); distSlider.oninput = (e) => { sidebar.querySelector("#gs-dist-val").textContent = e.target.value + "px"; }; - distSlider.onchange = (e) => { State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); }; + distSlider.onchange = (e) => { const { graphSettings } = State.get(); State.set({ graphSettings: { ...graphSettings, linkDist: parseInt(e.target.value) } }); Events.emit('render'); }; }, renderControls(container) {