From 4f3a7e7949ee59b176702bc66376532e2d0f269c Mon Sep 17 00:00:00 2001 From: ARCHITECT Date: Sat, 17 Jan 2026 22:15:06 +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 --- index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/index.html b/index.html index 8d88538..640b082 100644 --- a/index.html +++ b/index.html @@ -1367,10 +1367,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 } }); @@ -1380,6 +1379,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 } }); @@ -1387,16 +1387,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) {