Persist lil-gui folder open/closed states and improve reset icon UX in visualizer

examples/visualizer/modules/interactions.js

@@ -24,7 +24,16 @@ export function setupEventListeners(handleFileUploadCallback, handleDownloadCall
   document.getElementById('download').addEventListener('click', handleDownloadCallback);
 
   // Reset button
-  document.getElementById('reset').addEventListener('click', resetViewCallback);
+  document.getElementById('reset').addEventListener('click', () => {
+    if (confirm('Are you sure you want to reset? This will restore all settings to their default values.')) {
+      const resetIcon = document.getElementById('reset');
+      resetIcon.classList.add('spinning');
+      resetIcon.addEventListener('animationend', () => {
+        resetIcon.classList.remove('spinning');
+      }, { once: true });
+      resetViewCallback();
+    }
+  });
 }
 
 /**

examples/visualizer/modules/state.js

@@ -180,3 +180,29 @@ export function clearSlicingSettings() {
     console.warn('Failed to clear slicing settings from localStorage:', error);
   }
 }
+
+/**
+ * Save folder open/closed states to localStorage.
+ */
+export function saveFolderStates(states) {
+  try {
+    localStorage.setItem('visualizer-folder-states', JSON.stringify(states));
+  } catch (error) {
+    console.warn('Failed to save folder states to localStorage:', error);
+  }
+}
+
+/**
+ * Load folder open/closed states from localStorage.
+ */
+export function loadFolderStates() {
+  try {
+    const saved = localStorage.getItem('visualizer-folder-states');
+    if (saved) {
+      return JSON.parse(saved);
+    }
+  } catch (error) {
+    console.warn('Failed to load folder states from localStorage:', error);
+  }
+  return null;
+}

examples/visualizer/modules/ui.js

@@ -4,7 +4,7 @@
  */
 
 import { GUI } from 'three/addons/libs/lil-gui.module.min.js';
-import { saveSlicingSettings, loadSlicingSettings } from './state.js';
+import { saveSlicingSettings, loadSlicingSettings, saveFolderStates, loadFolderStates } from './state.js';
 
 /**
  * Create the legends for movement types and axes.
@@ -216,6 +216,30 @@ export function createSlicingGUI(sliceCallback, useDefaults = false, rotateCallb
   slicingGUI.add(params, 'slice').name('Slice');
   slicingGUI.open();
 
+  // Collect the open/closed state of all folders and persist it.
+  const collectFolderStates = () => {
+    const states = {};
+    for (const folder of slicingGUI.folders) {
+      states[folder._title] = !folder._closed;
+    }
+    return states;
+  };
+
+  // Apply saved folder states, then attach a save handler to each folder.
+  const savedFolderStates = loadFolderStates();
+  for (const folder of slicingGUI.folders) {
+    if (savedFolderStates && folder._title in savedFolderStates) {
+      if (savedFolderStates[folder._title]) {
+        folder.open();
+      } else {
+        folder.close();
+      }
+    }
+    folder.$title.addEventListener('click', () => {
+      saveFolderStates(collectFolderStates());
+    });
+  }
+
   // Store params on the GUI instance for access in sliceModel
   slicingGUI.userData = params;
 

examples/visualizer/visualizer.css

@@ -52,6 +52,15 @@ body {
   transform: scale(1.1);
 }
 
+@keyframes spin-once {
+  from { transform: rotate(0deg); }
+  to   { transform: rotate(360deg); }
+}
+
+#reset.spinning {
+  animation: spin-once 0.5s ease-in-out;
+}
+
 .icon-row {
   display: flex;
   flex-direction: row;