rails-schema 0.1.5 → 0.1.7

data/lib/rails/schema/assets/app.js

@@ -14,6 +14,38 @@
       el.style.display = "none";
     });
   }
+  // Through edges toggle
+  var showThroughEdges = config.show_through_edges !== false;
+  var throughCheckbox = document.getElementById("toggle-through");
+  if (throughCheckbox) {
+    throughCheckbox.checked = showThroughEdges;
+    throughCheckbox.addEventListener("change", function() {
+      showThroughEdges = this.checked;
+      render();
+      if (selectedNode) selectNode(selectedNode);
+      autoSave();
+    });
+  }
+
+  // Freeze layout toggle — when enabled, all simulation forces are removed so
+  // nodes stay wherever they are dropped without being pushed by the simulation.
+  var manualPositioningCheckbox = document.getElementById("manual-positioning");
+  function removeAllForces() {
+    ["link", "charge", "center", "collide", "x", "y", "group"].forEach(function(name) {
+      simulation.force(name, null);
+    });
+  }
+  if (manualPositioningCheckbox) {
+    manualPositioningCheckbox.addEventListener("change", function () {
+      if (this.checked) {
+        removeAllForces();
+      } else {
+        render();
+        if (selectedNode) selectNode(selectedNode);
+      }
+      autoSave();
+    });
+  }
 
   // State
   var selectedNode = null;
@@ -21,11 +53,119 @@
   var visibleModels = new Set(nodes.map(function(n) { return n.id; }));
   var simulation;
   var zoomTransform = d3.zoomIdentity;
+  var collapsedGroups = new Set();
   var NODE_WIDTH = 180;
   var NODE_HEADER_HEIGHT = 36;
   var NODE_COLUMN_HEIGHT = 18;
   var NODE_PADDING = 8;
 
+  // Layout persistence
+  function computeFingerprint() {
+    var ids = nodes.map(function(n) { return n.id; }).sort().join(",");
+    var hash = 5381;
+    for (var i = 0; i < ids.length; i++) {
+      hash = ((hash << 5) + hash + ids.charCodeAt(i)) & 0xffffffff;
+    }
+    return hash.toString(16);
+  }
+  var layoutStorageKey = "rails-schema-layout:" + computeFingerprint();
+
+  function serializeLayout() {
+    var positions = {};
+    nodes.forEach(function(n) {
+      if (n.x !== undefined && n.y !== undefined) {
+        positions[n.id] = { x: n.x, y: n.y };
+      }
+    });
+    return {
+      version: 1,
+      schemaFingerprint: computeFingerprint(),
+      nodePositions: positions,
+      visibleModels: Array.from(visibleModels),
+      zoomTransform: { k: zoomTransform.k, x: zoomTransform.x, y: zoomTransform.y },
+      collapsedGroups: Array.from(collapsedGroups),
+      manualPositioning: manualPositioningCheckbox ? manualPositioningCheckbox.checked : false,
+      showThroughEdges: showThroughEdges
+    };
+  }
+
+  function applyLayout(layout) {
+    if (!layout || layout.version !== 1) return;
+
+    var nodeIdSet = new Set(nodes.map(function(n) { return n.id; }));
+
+    // Restore visibility
+    if (layout.visibleModels) {
+      visibleModels.clear();
+      layout.visibleModels.forEach(function(id) {
+        if (nodeIdSet.has(id)) visibleModels.add(id);
+      });
+    }
+
+    // Restore collapsed groups
+    collapsedGroups.clear();
+    if (layout.collapsedGroups) {
+      layout.collapsedGroups.forEach(function(g) { collapsedGroups.add(g); });
+    }
+
+    // Restore through edges
+    if (layout.showThroughEdges !== undefined) {
+      showThroughEdges = layout.showThroughEdges;
+      if (throughCheckbox) throughCheckbox.checked = showThroughEdges;
+    }
+
+    // Rebuild with restored visibility
+    buildSidebar();
+    render();
+
+    var manual = !!layout.manualPositioning;
+
+    // Apply positions AFTER render created the simulation nodes. Pin with fx/fy
+    // only when restoring into manual mode; otherwise seed x/y as initial
+    // conditions and let the simulation evolve from there.
+    if (layout.nodePositions) {
+      nodes.forEach(function(n) {
+        var saved = layout.nodePositions[n.id];
+        if (saved) {
+          n.x = saved.x;
+          n.y = saved.y;
+          if (manual) {
+            n.fx = saved.x;
+            n.fy = saved.y;
+          } else {
+            n.fx = null;
+            n.fy = null;
+          }
+        }
+      });
+    }
+
+    if (manualPositioningCheckbox) {
+      manualPositioningCheckbox.checked = manual;
+    }
+    if (manual) {
+      removeAllForces();
+    }
+
+    // Update display
+    ticked();
+
+    // Restore zoom
+    if (layout.zoomTransform) {
+      var t = layout.zoomTransform;
+      var transform = d3.zoomIdentity.translate(t.x, t.y).scale(t.k);
+      svg.call(zoom.transform, transform);
+    }
+  }
+
+  function autoSave() {
+    try {
+      localStorage.setItem(layoutStorageKey, JSON.stringify(serializeLayout()));
+    } catch (e) {
+      // localStorage full or unavailable — silently ignore
+    }
+  }
+
   // Bezier curve tuning for edge routing
   var MIN_LOOP_OFFSET = 60;      // Minimum control-point distance for same-side (loop) edges
   var LOOP_OFFSET_RATIO = 0.5;   // Proportion of vertical gap used for loop curve spread
@@ -40,6 +180,31 @@
   var edgeGroup = container.append("g").attr("class", "edges");
   var nodeGroup = container.append("g").attr("class", "nodes");
 
+  // Group color assignment
+  var GROUP_COLORS = [
+    "#2563eb", "#dc2626", "#059669", "#d97706",
+    "#7c3aed", "#db2777", "#0891b2", "#4f46e5",
+    "#b91c1c", "#047857", "#b45309", "#6d28d9"
+  ];
+  var groupColorMap = {};
+  var groupIndex = 0;
+
+  if (config.grouping_enabled) {
+    nodes.forEach(function(n) {
+      if (n.group && n.group.length > 0) {
+        var key = n.group.join("::");
+        if (!groupColorMap[key]) {
+          groupColorMap[key] = GROUP_COLORS[groupIndex % GROUP_COLORS.length];
+          groupIndex++;
+        }
+      }
+    });
+    if (config.collapse_groups) {
+      Object.keys(groupColorMap).forEach(function(k) { collapsedGroups.add(k); });
+      collapsedGroups.add("__ungrouped__");
+    }
+  }
+
   // Marker definitions for crow's foot notation
   var MARKER_TYPES = {
     belongs_to: "--edge-belongs-to",
@@ -210,6 +375,7 @@
     nodes.forEach(function(n) { nodeMap[n.id] = n; });
 
     var simEdges = edges.filter(function(e) {
+      if (!showThroughEdges && e.through) return false;
       return visibleModels.has(e.from) && visibleModels.has(e.to);
     }).map(function(e) {
       return { source: e.from, target: e.to, data: e };
@@ -249,7 +415,83 @@
       .force("charge", d3.forceManyBody().strength(-600))
       .force("center", d3.forceCenter(svgEl.clientWidth / 2, svgEl.clientHeight / 2))
       .force("collide", d3.forceCollide().radius(function(d) { return Math.max(NODE_WIDTH, d._height) / 2 + 50; }))
-      .on("tick", ticked);
+      .on("tick", ticked)
+      .on("end", autoSave);
+
+    if (config.grouping_enabled) {
+      simulation
+        .force("x", d3.forceX(svgEl.clientWidth / 2).strength(0.03))
+        .force("y", d3.forceY(svgEl.clientHeight / 2).strength(0.03));
+      simulation.force("group", function(alpha) {
+        // Pass 1: Attract same-group nodes toward their group centroid
+        var groupNodes = {};
+        var centroids = {};
+        var counts = {};
+        connectedNodes.forEach(function(n) {
+          if (!n.group || n.group.length === 0) return;
+          var key = n.group.join("::");
+          if (!groupNodes[key]) { groupNodes[key] = []; centroids[key] = { x: 0, y: 0 }; counts[key] = 0; }
+          groupNodes[key].push(n);
+          centroids[key].x += n.x;
+          centroids[key].y += n.y;
+          counts[key]++;
+        });
+        var keys = Object.keys(centroids);
+        keys.forEach(function(k) {
+          centroids[k].x /= counts[k];
+          centroids[k].y /= counts[k];
+        });
+        var attractStrength = 0.15;
+        connectedNodes.forEach(function(n) {
+          if (!n.group || n.group.length === 0) return;
+          var key = n.group.join("::");
+          var c = centroids[key];
+          n.vx += (c.x - n.x) * alpha * attractStrength;
+          n.vy += (c.y - n.y) * alpha * attractStrength;
+        });
+
+        // Pass 2: Push overlapping group bounding boxes apart
+        if (keys.length < 2) return;
+        var pad = 15;
+        var bounds = {};
+        keys.forEach(function(k) {
+          var b = { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity };
+          groupNodes[k].forEach(function(n) {
+            var hw = NODE_WIDTH / 2;
+            var hh = n._height / 2;
+            if (n.x - hw < b.minX) b.minX = n.x - hw;
+            if (n.y - hh < b.minY) b.minY = n.y - hh;
+            if (n.x + hw > b.maxX) b.maxX = n.x + hw;
+            if (n.y + hh > b.maxY) b.maxY = n.y + hh;
+          });
+          b.minX -= pad; b.minY -= pad; b.maxX += pad; b.maxY += pad;
+          b.cx = (b.minX + b.maxX) / 2;
+          b.cy = (b.minY + b.maxY) / 2;
+          bounds[k] = b;
+        });
+
+        var sepStrength = 0.25;
+        for (var i = 0; i < keys.length; i++) {
+          for (var j = i + 1; j < keys.length; j++) {
+            var a = bounds[keys[i]];
+            var b = bounds[keys[j]];
+            var overlapX = Math.min(a.maxX, b.maxX) - Math.max(a.minX, b.minX);
+            var overlapY = Math.min(a.maxY, b.maxY) - Math.max(a.minY, b.minY);
+            if (overlapX <= 0 || overlapY <= 0) continue;
+
+            var dx = a.cx - b.cx;
+            var dy = a.cy - b.cy;
+            var dist = Math.sqrt(dx * dx + dy * dy) || 1;
+            var push = Math.min(overlapX, overlapY) * alpha * sepStrength / dist;
+            var pushX = dx * push;
+            var pushY = dy * push;
+
+            groupNodes[keys[i]].forEach(function(n) { n.vx += pushX; n.vy += pushY; });
+            groupNodes[keys[j]].forEach(function(n) { n.vx -= pushX; n.vy -= pushY; });
+          }
+        }
+      });
+    }
 
     // Manually resolve edge references for self-ref-only nodes
     simEdges.forEach(function(e) {
@@ -378,6 +620,9 @@
     currentSim = setupSimulation();
     renderEdges(currentSim.simEdges);
     renderNodes(currentSim.simNodes);
+    if (manualPositioningCheckbox && manualPositioningCheckbox.checked) {
+      removeAllForces();
+    }
   }
 
   function renderEdges(simEdges) {
@@ -474,7 +719,11 @@
       .attr("width", NODE_WIDTH)
       .attr("height", NODE_HEADER_HEIGHT)
       .attr("x", -NODE_WIDTH / 2)
-      .attr("y", function(d) { return -d._height / 2; });
+      .attr("y", function(d) { return -d._height / 2; })
+      .style("fill", function(d) {
+        if (!config.grouping_enabled || !d.group || d.group.length === 0) return null;
+        return groupColorMap[d.group.join("::")] || null;
+      });
 
     // Cover bottom corners of header
     nGroups.append("rect")
@@ -482,7 +731,11 @@
       .attr("width", NODE_WIDTH)
       .attr("height", 10)
       .attr("x", -NODE_WIDTH / 2)
-      .attr("y", function(d) { return -d._height / 2 + NODE_HEADER_HEIGHT - 10; });
+      .attr("y", function(d) { return -d._height / 2 + NODE_HEADER_HEIGHT - 10; })
+      .style("fill", function(d) {
+        if (!config.grouping_enabled || !d.group || d.group.length === 0) return null;
+        return groupColorMap[d.group.join("::")] || null;
+      });
 
     // Model name
     nGroups.append("text")
@@ -548,8 +801,10 @@
   }
 
   function ticked() {
-    layoutOrphans();
-    layoutSelfRefNodes();
+    if (!manualPositioningCheckbox?.checked) {
+      layoutOrphans();
+      layoutSelfRefNodes();
+    }
     edgeGroup.selectAll(".edge-group").each(function(d) {
       var g = d3.select(this);
       var src = d.source;
@@ -699,8 +954,11 @@
   function dragEnded(event, d) {
     if (isOrphan(d)) return;
     if (!event.active) simulation.alphaTarget(0);
-    d.fx = null;
-    d.fy = null;
+    if (!manualPositioningCheckbox?.checked) {
+      d.fx = null;
+      d.fy = null;
+    }
+    autoSave();
   }
 
   // Zoom
@@ -710,6 +968,7 @@
       zoomTransform = event.transform;
       container.attr("transform", event.transform);
       document.getElementById("zoom-info").textContent = Math.round(event.transform.k * 100) + "%";
+      autoSave();
     });
 
   svg.call(zoom);
@@ -749,6 +1008,7 @@
     render();
     selectNode(nodeId);
     setTimeout(fitToScreen, 100);
+    autoSave();
   }
 
   function deselectNode() {
@@ -804,7 +1064,14 @@
     // Click association targets to navigate
     content.querySelectorAll('.assoc-target').forEach(function(el) {
       el.addEventListener('click', function() {
-        selectNode(el.dataset.model);
+        var modelId = el.dataset.model;
+        if (!visibleModels.has(modelId)) {
+          visibleModels.add(modelId);
+          buildSidebar();
+          render();
+          setTimeout(fitToScreen, 100);
+        }
+        selectNode(modelId);
       });
     });
   }
@@ -816,67 +1083,193 @@
   window.__closeDetail = deselectNode;
 
   // Sidebar
+  function buildModelItem(n, filtered, groupColor) {
+    var edgeCount = edges.filter(function(e) { return e.from === n.id || e.to === n.id; }).length;
+    var div = document.createElement("div");
+    div.className = "model-item" + (selectedNode === n.id ? " active" : "");
+    var nameStyle = groupColor ? ' style="color:' + groupColor + '"' : '';
+    div.innerHTML = '<input type="checkbox" ' + (visibleModels.has(n.id) ? "checked" : "") + '>' +
+      '<span class="model-name"' + nameStyle + '>' + escapeHtml(n.id) + '</span>' +
+      '<span class="assoc-count">' + edgeCount + '</span>';
+
+    var cb = div.querySelector("input");
+    var currentIndex = filtered.indexOf(n);
+    cb.addEventListener("click", function(e) {
+      e.stopPropagation();
+      if (e.shiftKey && lastCheckedIndex !== null) {
+        var start = Math.min(lastCheckedIndex, currentIndex);
+        var end = Math.max(lastCheckedIndex, currentIndex);
+        for (var i = start; i <= end; i++) {
+          var modelId = filtered[i].id;
+          if (cb.checked) {
+            visibleModels.add(modelId);
+          } else {
+            visibleModels.delete(modelId);
+          }
+        }
+      } else {
+        if (cb.checked) {
+          visibleModels.add(n.id);
+        } else {
+          visibleModels.delete(n.id);
+        }
+      }
+      lastCheckedIndex = currentIndex;
+      buildSidebar();
+      render();
+      setTimeout(fitToScreen, 100);
+      autoSave();
+    });
+
+    div.addEventListener("click", function(e) {
+      if (e.target.tagName === "INPUT") return;
+      selectNode(n.id);
+    });
+
+    div.addEventListener("dblclick", function(e) {
+      if (e.target.tagName === "INPUT") return;
+      focusNeighborhood(n.id);
+    });
+
+    return div;
+  }
+
   function buildSidebar() {
     var list = document.getElementById("model-list");
     list.innerHTML = "";
 
     var filtered = getFilteredModels();
 
-    filtered.forEach(function(n) {
-      var edgeCount = edges.filter(function(e) { return e.from === n.id || e.to === n.id; }).length;
-      var div = document.createElement("div");
-      div.className = "model-item" + (selectedNode === n.id ? " active" : "");
-      div.innerHTML = '<input type="checkbox" ' + (visibleModels.has(n.id) ? "checked" : "") + '>' +
-        '<span class="model-name">' + escapeHtml(n.id) + '</span>' +
-        '<span class="assoc-count">' + edgeCount + '</span>';
-
-      var cb = div.querySelector("input");
-      var currentIndex = filtered.indexOf(n);
-      cb.addEventListener("click", function(e) {
-        e.stopPropagation();
-        if (e.shiftKey && lastCheckedIndex !== null) {
-          var start = Math.min(lastCheckedIndex, currentIndex);
-          var end = Math.max(lastCheckedIndex, currentIndex);
-          for (var i = start; i <= end; i++) {
-            var modelId = filtered[i].id;
-            if (cb.checked) {
-              visibleModels.add(modelId);
-            } else {
-              visibleModels.delete(modelId);
-            }
-          }
+    if (config.grouping_enabled) {
+      var grouped = {};
+      var ungrouped = [];
+      filtered.forEach(function(n) {
+        if (n.group && n.group.length > 0) {
+          var key = n.group.join("::");
+          if (!grouped[key]) grouped[key] = { label: n.group, models: [] };
+          grouped[key].models.push(n);
         } else {
+          ungrouped.push(n);
+        }
+      });
+
+      function buildGroupHeader(models, labelHtml, groupKey) {
+        var header = document.createElement("div");
+        header.className = "group-header";
+        header.dataset.groupKey = groupKey;
+        var isCollapsed = collapsedGroups.has(groupKey);
+        var toggleArrow = isCollapsed ? "&#9654;" : "&#9660;";
+        var allVisible = models.every(function(n) { return visibleModels.has(n.id); });
+        var noneVisible = models.every(function(n) { return !visibleModels.has(n.id); });
+        header.innerHTML = '<input type="checkbox" class="group-checkbox"' + (allVisible ? " checked" : "") + '>' +
+          labelHtml +
+          '<span class="group-count">' + models.length + '</span>' +
+          '<span class="group-toggle">' + toggleArrow + '</span>';
+
+        var cb = header.querySelector(".group-checkbox");
+        if (!allVisible && !noneVisible) cb.indeterminate = true;
+
+        cb.addEventListener("click", function(e) {
+          e.stopPropagation();
           if (cb.checked) {
-            visibleModels.add(n.id);
+            models.forEach(function(n) { visibleModels.add(n.id); });
           } else {
-            visibleModels.delete(n.id);
+            models.forEach(function(n) { visibleModels.delete(n.id); });
           }
-        }
-        lastCheckedIndex = currentIndex;
-        buildSidebar();
-        render();
-      });
+          buildSidebar();
+          render();
+          setTimeout(fitToScreen, 100);
+          autoSave();
+        });
+
+        var clickTimer = null;
+        header.addEventListener("click", function(e) {
+          if (e.target.tagName === "INPUT") return;
+          if (clickTimer) return;
+          clickTimer = setTimeout(function() {
+            clickTimer = null;
+            if (collapsedGroups.has(groupKey)) {
+              collapsedGroups.delete(groupKey);
+            } else {
+              collapsedGroups.add(groupKey);
+            }
+            var content = header.nextElementSibling;
+            var toggle = header.querySelector(".group-toggle");
+            var nowCollapsed = collapsedGroups.has(groupKey);
+            content.style.display = nowCollapsed ? "none" : "";
+            toggle.innerHTML = nowCollapsed ? "&#9654;" : "&#9660;";
+            autoSave();
+          }, 250);
+        });
+
+        header.addEventListener("dblclick", function(e) {
+          if (e.target.tagName === "INPUT") return;
+          e.stopPropagation();
+          if (clickTimer) { clearTimeout(clickTimer); clickTimer = null; }
+          visibleModels.clear();
+          models.forEach(function(n) {
+            visibleModels.add(n.id);
+            var neighbors = adjacency[n.id] || new Set();
+            neighbors.forEach(function(id) { visibleModels.add(id); });
+          });
+          buildSidebar();
+          render();
+          setTimeout(fitToScreen, 100);
+          autoSave();
+        });
+
+        return header;
+      }
 
-      div.addEventListener("click", function(e) {
-        if (e.target.tagName === "INPUT") return;
-        selectNode(n.id);
+      var sortedGroups = Object.keys(grouped).sort();
+      sortedGroups.forEach(function(key) {
+        var group = grouped[key];
+        var color = groupColorMap[key] || GROUP_COLORS[0];
+        var labelHtml = '<span class="group-color-dot" style="background:' + color + '"></span>' +
+          '<span class="group-header-label">' + escapeHtml(group.label.join(" > ")) + '</span>';
+        var header = buildGroupHeader(group.models, labelHtml, key);
+        list.appendChild(header);
+
+        var groupContainer = document.createElement("div");
+        groupContainer.className = "group-models";
+        if (collapsedGroups.has(key)) groupContainer.style.display = "none";
+        group.models.forEach(function(n) {
+          groupContainer.appendChild(buildModelItem(n, filtered, color));
+        });
+        list.appendChild(groupContainer);
       });
 
-      div.addEventListener("dblclick", function(e) {
-        if (e.target.tagName === "INPUT") return;
-        focusNeighborhood(n.id);
+      if (ungrouped.length > 0 && sortedGroups.length > 0) {
+        var ungroupedLabelHtml = '<span class="group-header-label">Ungrouped</span>';
+        var ungroupedHeader = buildGroupHeader(ungrouped, ungroupedLabelHtml, "__ungrouped__");
+        list.appendChild(ungroupedHeader);
+        var ungroupedContainer = document.createElement("div");
+        ungroupedContainer.className = "group-models";
+        if (collapsedGroups.has("__ungrouped__")) ungroupedContainer.style.display = "none";
+        ungrouped.forEach(function(n) {
+          ungroupedContainer.appendChild(buildModelItem(n, filtered));
+        });
+        list.appendChild(ungroupedContainer);
+      } else {
+        ungrouped.forEach(function(n) {
+          list.appendChild(buildModelItem(n, filtered));
+        });
+      }
+    } else {
+      filtered.forEach(function(n) {
+        list.appendChild(buildModelItem(n, filtered));
       });
-
-      list.appendChild(div);
-    });
+    }
   }
 
   function getFilteredModels() {
     var query = document.getElementById("search-input").value.toLowerCase();
     if (!query) return nodes;
     return nodes.filter(function(n) {
-      return n.id.toLowerCase().indexOf(query) !== -1 ||
-             n.table_name.toLowerCase().indexOf(query) !== -1;
+      if (n.id.toLowerCase().indexOf(query) !== -1) return true;
+      if (n.table_name.toLowerCase().indexOf(query) !== -1) return true;
+      if (n.group && n.group.join(" ").toLowerCase().indexOf(query) !== -1) return true;
+      return false;
     });
   }
 
@@ -885,6 +1278,19 @@
       var name = el.querySelector(".model-name").textContent;
       el.classList.toggle("active", name === nodeId);
     });
+
+    var activeGroupKey = null;
+    if (nodeId) {
+      var node = nodes.find(function(n) { return n.id === nodeId; });
+      if (node && node.group && node.group.length > 0) {
+        activeGroupKey = node.group.join("::");
+      } else if (node) {
+        activeGroupKey = "__ungrouped__";
+      }
+    }
+    document.querySelectorAll(".group-header").forEach(function(el) {
+      el.classList.toggle("active", el.dataset.groupKey === activeGroupKey);
+    });
   }
 
   // Search
@@ -916,14 +1322,54 @@
     }
     buildSidebar();
     render();
+    setTimeout(fitToScreen, 100);
+    autoSave();
   });
 
   document.getElementById("deselect-all-btn").addEventListener("click", function() {
     getFilteredModels().forEach(function(n) { visibleModels.delete(n.id); });
     buildSidebar();
     render();
+    setTimeout(fitToScreen, 100);
+    autoSave();
   });
 
+  // Collapse/Expand all groups
+  var collapseGroupsBtn = document.getElementById("collapse-groups-btn");
+  if (config.grouping_enabled) {
+    collapseGroupsBtn.style.display = "";
+    if (config.collapse_groups) {
+      collapseGroupsBtn.innerHTML = "\u25B6";
+      collapseGroupsBtn.title = "Expand all groups";
+    }
+    var allGroupKeys = [];
+    nodes.forEach(function(n) {
+      if (n.group && n.group.length > 0) {
+        var key = n.group.join("::");
+        if (allGroupKeys.indexOf(key) === -1) allGroupKeys.push(key);
+      }
+    });
+    allGroupKeys.push("__ungrouped__");
+
+    collapseGroupsBtn.addEventListener("click", function() {
+      var shouldExpand = collapsedGroups.size === allGroupKeys.length;
+      if (shouldExpand) {
+        collapsedGroups.clear();
+      } else {
+        allGroupKeys.forEach(function(k) { collapsedGroups.add(k); });
+      }
+      collapseGroupsBtn.innerHTML = shouldExpand ? "\u25BC" : "\u25B6";
+      collapseGroupsBtn.title = shouldExpand ? "Collapse all groups" : "Expand all groups";
+      document.querySelectorAll(".group-models").forEach(function(el) {
+        el.style.display = shouldExpand ? "" : "none";
+      });
+      document.querySelectorAll(".group-toggle").forEach(function(el) {
+        el.innerHTML = shouldExpand ? "\u25BC" : "\u25B6";
+      });
+      autoSave();
+    });
+  }
+
   // Toolbar buttons
   document.getElementById("zoom-in-btn").addEventListener("click", function() {
     svg.transition().duration(300).call(zoom.scaleBy, 1.3);
@@ -1072,13 +1518,64 @@
     triggerDownload(blob, "schema-diagram.mmd");
   }
 
+  // File menu dropdown
+  var fileMenuBtn = document.getElementById("file-menu-btn");
+  var fileMenu = document.getElementById("file-menu");
+  fileMenuBtn.addEventListener("click", function(e) {
+    e.stopPropagation();
+    fileMenu.classList.toggle("open");
+  });
+  document.addEventListener("click", function() {
+    fileMenu.classList.remove("open");
+  });
+
   // Export button listener
   document.getElementById("export-mermaid-btn").addEventListener("click", function() { exportMermaid(); });
 
+  // Save Layout
+  document.getElementById("save-layout-btn").addEventListener("click", function() {
+    var layout = serializeLayout();
+    var blob = new Blob([JSON.stringify(layout, null, 2)], { type: "application/json" });
+    var title = document.title.replace(/[^a-zA-Z0-9]/g, "-").replace(/-+/g, "-");
+    triggerDownload(blob, title + "-layout.json");
+  });
+
+  // Load Layout
+  var loadLayoutInput = document.getElementById("load-layout-input");
+  document.getElementById("load-layout-btn").addEventListener("click", function() {
+    loadLayoutInput.click();
+  });
+  loadLayoutInput.addEventListener("change", function() {
+    var file = this.files[0];
+    if (!file) return;
+    var reader = new FileReader();
+    reader.onload = function(e) {
+      try {
+        var layout = JSON.parse(e.target.result);
+        applyLayout(layout);
+        autoSave();
+      } catch (err) {
+        console.error("Failed to load layout:", err);
+      }
+    };
+    reader.readAsText(file);
+    this.value = "";
+  });
+
   // Init
   buildSidebar();
   render();
 
-  // Fit after simulation settles
-  setTimeout(function() { fitToScreen(); }, 1500);
+  // Restore saved layout or fit to screen
+  var savedLayout = null;
+  try {
+    var stored = localStorage.getItem(layoutStorageKey);
+    if (stored) savedLayout = JSON.parse(stored);
+  } catch (e) { /* ignore */ }
+
+  if (savedLayout) {
+    applyLayout(savedLayout);
+  } else {
+    setTimeout(function() { fitToScreen(); }, 1500);
+  }
 })();