Enhance force simulation tuning features in FORCE_SIMULATION_TUNER and NodeCanvas

- Introduced layout scale and iteration presets in FORCE_SIMULATION_TUNER, allowing users to quickly adjust node spacing and solver passes for auto-layout.
- Updated NodeCanvas to integrate new layout settings, including state management for layout scale and iteration presets, improving user control over graph layout.
- Enhanced ForceSimulationModal with UI elements for selecting layout presets and adjusting scale multipliers, streamlining the tuning process.
- Improved CSS styles for better visual organization of layout options in the simulation modal.

Author: grantiguess

FORCE_SIMULATION_TUNER.md

@@ -18,6 +18,12 @@ Interactive, draggable modal for tuning force-directed graph layout parameters i
 - **Reset**: Randomize node positions and restart from alpha=1.0
 - **Apply to Graph**: Apply the current positions to your actual Redstring graph
 
+### Layout Scale & Iteration Presets (Auto-Layout Synced)
+- **Layout Scale Slider (0.6–2.4×)**: Scales node spacing, repulsion reach, and link targets. Stored globally so Auto-Layout/Test Graph share the exact spacing you tested.
+- **Scale Presets (Compact / Balanced / Spacious)**: Quick chips that reset the slider to tuned baselines and update the shared layout-scale preset.
+- **Iteration Presets (Fast / Balanced / Deep)**: Choose how many solver passes auto-layout should run. Selecting a preset also updates the cooling rate slider to match.
+- These values are saved in the Zustand store (`autoLayoutSettings`) and flow into `applyAutoLayoutToActiveGraph`, the Auto Graph generator, and the Force tuner itself.
+
 ### Tunable Parameters
 
 #### Repulsion Strength (100-5000)

src/NodeCanvas.jsx

@@ -177,6 +177,10 @@ function NodeCanvas() {
         setTypeListMode: () => {},
         toggleEnableAutoRouting: () => {},
         setRoutingStyle: () => {},
+        setCleanLaneSpacing: () => {},
+        setLayoutScalePreset: () => {},
+        setLayoutScaleMultiplier: () => {},
+        setLayoutIterationPreset: () => {},
         deleteNodePrototype: () => {},
         deleteGraph: () => {}
       };
@@ -1168,6 +1172,9 @@ function NodeCanvas() {
   const routingStyle = useGraphStore(state => state.autoLayoutSettings?.routingStyle || 'straight');
   const manhattanBends = useGraphStore(state => state.autoLayoutSettings?.manhattanBends || 'auto');
   const cleanLaneSpacing = useGraphStore(state => state.autoLayoutSettings?.cleanLaneSpacing || 24);
+  const layoutScalePreset = useGraphStore(state => state.autoLayoutSettings?.layoutScale || 'balanced');
+  const layoutScaleMultiplier = useGraphStore(state => state.autoLayoutSettings?.layoutScaleMultiplier ?? 1);
+  const layoutIterationPreset = useGraphStore(state => state.autoLayoutSettings?.layoutIterations || 'balanced');
   const edgesMap = useGraphStore(state => state.edges);
   const savedNodeIds = useGraphStore(state => state.savedNodeIds);
   const savedGraphIds = useGraphStore(state => state.savedGraphIds);
@@ -2041,8 +2048,10 @@ function NodeCanvas() {
       }));
 
     const layoutOptions = {
-      ...FORCE_LAYOUT_DEFAULTS,
-      preSimulate: true
+      layoutScale: layoutScalePreset,
+      layoutScaleMultiplier,
+      iterationPreset: layoutIterationPreset,
+      useExistingPositions: false
     };
 
     try {
@@ -2074,7 +2083,7 @@ function NodeCanvas() {
       console.error('[AutoLayout] Failed to apply layout:', error);
       alert(`Auto-layout failed: ${error.message}`);
     }
-  }, [activeGraphId, baseDimsById, nodes, edges, storeActions, moveOutOfBoundsNodesInBounds, resetConnectionLabelCache]);
+  }, [activeGraphId, baseDimsById, nodes, edges, storeActions, moveOutOfBoundsNodesInBounds, resetConnectionLabelCache, layoutScalePreset, layoutScaleMultiplier, layoutIterationPreset]);
 
   // Auto-correct out-of-bounds nodes on graph load
   useEffect(() => {
@@ -12127,13 +12136,23 @@ function NodeCanvas() {
 
             // Get fresh state - will be updated after graph creation if needed
             let storeState = useGraphStore.getState();
+            const mergedLayoutOptions = {
+              ...options.layoutOptions,
+              layoutScale: layoutScalePreset,
+              layoutScaleMultiplier,
+              iterationPreset: layoutIterationPreset
+            };
+            const patchedOptions = {
+              ...options,
+              layoutOptions: mergedLayoutOptions
+            };
 
             const results = generateGraph(
               parsedData,
               targetGraphId,
               storeState,
               storeActions,
-              options,
+              patchedOptions,
               () => useGraphStore.getState() // Function to get fresh state
             );
 
@@ -12162,6 +12181,12 @@ function NodeCanvas() {
         onClose={() => setForceSimModalVisible(false)}
         graphId={activeGraphId}
         storeActions={storeActions}
+        layoutScalePreset={layoutScalePreset}
+        layoutScaleMultiplier={layoutScaleMultiplier}
+        onLayoutScalePresetChange={storeActions.setLayoutScalePreset}
+        onLayoutScaleMultiplierChange={storeActions.setLayoutScaleMultiplier}
+        layoutIterationPreset={layoutIterationPreset}
+        onLayoutIterationPresetChange={storeActions.setLayoutIterationPreset}
         getNodes={() => hydratedNodes.map(n => {
           const dims = baseDimsById.get(n.id) || getNodeDimensions(n, false, null);
           return {

src/components/ForceSimulationModal.css

@@ -221,3 +221,60 @@
   font-weight: bold;
 }
 
+.force-sim-preset-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px 12px 0;
+}
+
+.force-sim-preset-label {
+  font-size: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: #ffb3b3;
+  opacity: 0.8;
+}
+
+.force-sim-chip-row,
+.force-sim-chip-group {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.force-sim-chip-group {
+  grid-column: 1 / span 3;
+  margin-top: 6px;
+}
+
+.force-sim-chip {
+  flex: 1;
+  min-width: 90px;
+  background: #2a0000;
+  border: 1px solid #7A0000;
+  border-radius: 999px;
+  color: #bdb5b5;
+  font-size: 12px;
+  font-family: 'EmOne', sans-serif;
+  padding: 6px 12px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  transition: background 0.2s, border 0.2s, color 0.2s;
+}
+
+.force-sim-chip small {
+  font-size: 11px;
+  color: #bdb5b5;
+  opacity: 0.8;
+}
+
+.force-sim-chip.active {
+  background: #7A0000;
+  color: #ffffff;
+  border-color: #ff7070;
+}
+