rails-schema 0.1.4 → 0.1.6

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

@@ -14,12 +14,25 @@
       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);
+    });
+  }
 
   // State
   var selectedNode = null;
+  var lastCheckedIndex = null;
   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;
@@ -39,6 +52,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",
@@ -149,6 +187,11 @@
     return 0;
   }
 
+  function bezierPoint(p0, p1, p2, p3, t) {
+    var mt = 1 - t;
+    return mt*mt*mt*p0 + 3*mt*mt*t*p1 + 3*mt*t*t*p2 + t*t*t*p3;
+  }
+
   function getConnectionPoints(d) {
     var src = d.source;
     var tgt = d.target;
@@ -204,6 +247,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 };
@@ -245,6 +289,81 @@
       .force("collide", d3.forceCollide().radius(function(d) { return Math.max(NODE_WIDTH, d._height) / 2 + 50; }))
       .on("tick", ticked);
 
+    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) {
       if (typeof e.source === 'string' && selfRefIds.has(e.source)) {
@@ -349,13 +468,17 @@
     });
   }
 
-  function truncateText(text, maxWidth, font) {
+  function measureTextWidth(text, font) {
     var canvas = document.createElement("canvas");
     var ctx = canvas.getContext("2d");
-    ctx.font = font + " " + getComputedStyle(document.body).fontFamily;
-    if (ctx.measureText(text).width <= maxWidth) return text;
+    ctx.font = font;
+    return ctx.measureText(text).width;
+  }
+
+  function truncateText(text, maxWidth, font) {
+    if (measureTextWidth(text, font) <= maxWidth) return text;
     var truncated = text;
-    while (truncated.length > 0 && ctx.measureText(truncated + "…").width > maxWidth) {
+    while (truncated.length > 0 && measureTextWidth(truncated + "…", font) > maxWidth) {
       truncated = truncated.slice(0, -1);
     }
     return truncated + "…";
@@ -413,10 +536,21 @@
       .attr("class", "edge-label-bg");
 
     eGroups.append("text")
-      .attr("class", "edge-label")
+      .attr("class", function(d) { return "edge-label " + d.data.association_type; })
       .attr("text-anchor", "middle")
       .attr("dy", -6)
       .text(function(d) { return d.data.label; });
+
+    eGroups.append("rect")
+      .attr("class", "edge-label-bg edge-label-reverse-bg")
+      .style("display", function(d) { return d.data.reverse_label ? null : "none"; });
+
+    eGroups.append("text")
+      .attr("class", function(d) { var type = d.data.reverse_association_type || d.data.association_type; return "edge-label edge-label-reverse " + type; })
+      .attr("text-anchor", "middle")
+      .attr("dy", -6)
+      .text(function(d) { return d.data.reverse_label || ""; })
+      .style("display", function(d) { return d.data.reverse_label ? null : "none"; });
   }
 
   function renderNodes(simNodes) {
@@ -433,6 +567,10 @@
       .on("click", function(event, d) {
         event.stopPropagation();
         selectNode(d.id);
+      })
+      .on("dblclick", function(event, d) {
+        event.stopPropagation();
+        focusNeighborhood(d.id);
       });
 
     // Background rect
@@ -449,7 +587,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")
@@ -457,7 +599,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")
@@ -466,7 +612,7 @@
       .attr("y", function(d) { return -d._height / 2 + 16; })
       .attr("text-anchor", "middle")
       .attr("dominant-baseline", "central")
-      .text(function(d) { return truncateText(d.id, NODE_WIDTH - NODE_PADDING * 2, "bold 13px"); });
+      .text(function(d) { return truncateText(d.id, NODE_WIDTH - NODE_PADDING * 2, "bold 13px " + getComputedStyle(document.body).fontFamily); });
 
     // Table name
     nGroups.append("text")
@@ -475,20 +621,32 @@
       .attr("y", function(d) { return -d._height / 2 + 30; })
       .attr("text-anchor", "middle")
       .attr("dominant-baseline", "central")
-      .text(function(d) { return truncateText(d.table_name, NODE_WIDTH - NODE_PADDING * 2, "10px"); });
+      .text(function(d) { return truncateText(d.table_name, NODE_WIDTH - NODE_PADDING * 2, "10px " + getComputedStyle(document.body).fontFamily); });
 
     // Columns
     nGroups.each(function(d) {
       var g = d3.select(this);
       var startY = -d._height / 2 + NODE_HEADER_HEIGHT + NODE_PADDING;
 
+      var colFont = '11px "SF Mono", "Fira Code", "Cascadia Code", monospace';
+      var typeFont = '10px "SF Mono", "Fira Code", "Cascadia Code", monospace';
+
       d._displayCols.forEach(function(col, i) {
         var y = startY + i * NODE_COLUMN_HEIGHT + 10;
-        g.append("text")
+        var fullName = (col.primary ? "PK " : "") + col.name;
+        var typeWidth = measureTextWidth(col.type, typeFont);
+        var availableWidth = NODE_WIDTH - 20 - typeWidth - 8;
+        var displayName = truncateText(fullName, availableWidth, colFont);
+
+        var nameEl = g.append("text")
           .attr("class", "node-column-text" + (col.primary ? " node-column-pk" : ""))
           .attr("x", -NODE_WIDTH / 2 + 10)
           .attr("y", y)
-          .text((col.primary ? "PK " : "") + col.name);
+          .text(displayName);
+
+        if (displayName !== fullName) {
+          nameEl.append("title").text(fullName);
+        }
 
         g.append("text")
           .attr("class", "node-column-type")
@@ -570,11 +728,17 @@
         ", " + cp2x + " " + cp2y +
         ", " + connPts.x2 + " " + y2);
 
-      var labelX = 0.125 * connPts.x1 + 0.375 * cp1x + 0.375 * cp2x + 0.125 * connPts.x2;
-      var labelY = (y1 + y2) / 2;
-      g.select("text")
+      var labelX = bezierPoint(connPts.x1, cp1x, cp2x, connPts.x2, 0.25);
+      var labelY = bezierPoint(y1, cp1y, cp2y, y2, 0.25);
+      g.select("text.edge-label:not(.edge-label-reverse)")
         .attr("x", labelX)
         .attr("y", labelY);
+
+      var revX = bezierPoint(connPts.x1, cp1x, cp2x, connPts.x2, 0.75);
+      var revY = bezierPoint(y1, cp1y, cp2y, y2, 0.75);
+      g.select("text.edge-label-reverse")
+        .attr("x", revX)
+        .attr("y", revY);
     });
 
     resolveEdgeLabelOverlaps();
@@ -670,6 +834,7 @@
     });
 
   svg.call(zoom);
+  svg.on("dblclick.zoom", null);
 
   // Click background to deselect
   svg.on("click", function() {
@@ -696,6 +861,17 @@
     updateSidebarActive(nodeId);
   }
 
+  function focusNeighborhood(nodeId) {
+    var neighbors = adjacency[nodeId] || new Set();
+    visibleModels.clear();
+    visibleModels.add(nodeId);
+    neighbors.forEach(function(id) { visibleModels.add(id); });
+    buildSidebar();
+    render();
+    selectNode(nodeId);
+    setTimeout(fitToScreen, 100);
+  }
+
   function deselectNode() {
     selectedNode = null;
     nodeGroup.selectAll(".node-group").classed("faded", false).classed("highlighted", false);
@@ -725,7 +901,7 @@
     html += '<ul class="column-list">';
     node.columns.forEach(function(col) {
       var pkCls = col.primary ? ' pk' : '';
-      html += '<li><span class="col-name' + pkCls + '">' + (col.primary ? 'PK ' : '') + escapeHtml(col.name) + '</span>';
+      html += '<li><span class="col-name' + pkCls + '" title="' + escapeHtml(col.name) + '">' + (col.primary ? 'PK ' : '') + escapeHtml(col.name) + '</span>';
       html += '<span class="col-type">' + escapeHtml(col.type) + (col.nullable ? '' : ' NOT NULL') + '</span></li>';
     });
     html += '</ul>';
@@ -749,7 +925,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);
       });
     });
   }
@@ -761,46 +944,189 @@
   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);
+    });
+
+    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");
-      cb.addEventListener("change", function(e) {
-        e.stopPropagation();
-        if (cb.checked) {
-          visibleModels.add(n.id);
+    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 {
-          visibleModels.delete(n.id);
+          ungrouped.push(n);
         }
-        render();
       });
 
-      div.addEventListener("click", function(e) {
-        if (e.target.tagName === "INPUT") return;
-        selectNode(n.id);
+      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) {
+            models.forEach(function(n) { visibleModels.add(n.id); });
+          } else {
+            models.forEach(function(n) { visibleModels.delete(n.id); });
+          }
+          buildSidebar();
+          render();
+          setTimeout(fitToScreen, 100);
+        });
+
+        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;";
+          }, 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);
+        });
+
+        return header;
+      }
+
+      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);
       });
 
-      list.appendChild(div);
-    });
+      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));
+      });
+    }
   }
 
   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;
     });
   }
 
@@ -809,26 +1135,95 @@
       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
-  document.getElementById("search-input").addEventListener("input", function() {
+  var searchInput = document.getElementById("search-input");
+  var searchClear = document.getElementById("search-clear");
+
+  searchInput.addEventListener("input", function() {
+    lastCheckedIndex = null;
+    searchClear.style.display = searchInput.value ? "block" : "none";
+    buildSidebar();
+  });
+
+  searchClear.addEventListener("click", function() {
+    searchInput.value = "";
+    searchClear.style.display = "none";
+    lastCheckedIndex = null;
+    searchInput.focus();
     buildSidebar();
   });
 
   // Select/Deselect all
   document.getElementById("select-all-btn").addEventListener("click", function() {
-    nodes.forEach(function(n) { visibleModels.add(n.id); });
+    var filtered = getFilteredModels();
+    if (visibleModels.size === nodes.length && filtered.length < nodes.length) {
+      visibleModels.clear();
+      filtered.forEach(function(n) { visibleModels.add(n.id); });
+    } else {
+      filtered.forEach(function(n) { visibleModels.add(n.id); });
+    }
     buildSidebar();
     render();
+    setTimeout(fitToScreen, 100);
   });
 
   document.getElementById("deselect-all-btn").addEventListener("click", function() {
-    visibleModels.clear();
+    getFilteredModels().forEach(function(n) { visibleModels.delete(n.id); });
     buildSidebar();
     render();
+    setTimeout(fitToScreen, 100);
   });
 
+  // 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";
+      });
+    });
+  }
+
   // Toolbar buttons
   document.getElementById("zoom-in-btn").addEventListener("click", function() {
     svg.transition().duration(300).call(zoom.scaleBy, 1.3);
@@ -920,6 +1315,66 @@
     return div.innerHTML;
   }
 
+  // Export helpers
+  function triggerDownload(blob, filename) {
+    var url = URL.createObjectURL(blob);
+    var a = document.createElement("a");
+    a.href = url;
+    a.download = filename;
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+    setTimeout(function() { URL.revokeObjectURL(url); }, 100);
+  }
+
+  function exportMermaid() {
+    var lines = ["erDiagram"];
+
+    // Entity definitions
+    nodes.forEach(function(n) {
+      if (!visibleModels.has(n.id)) return;
+      var name = n.id.replace(/::/g, "_");
+      lines.push("  " + name + " {");
+      n.columns.forEach(function(col) {
+        var constraint = "";
+        if (col.primary) constraint = " PK";
+        else if (col.name.endsWith("_id")) constraint = " FK";
+        var colType = col.type.replace(/\s+/g, "_");
+        lines.push("    " + colType + " " + col.name + constraint);
+      });
+      lines.push("  }");
+    });
+
+    // Relationships
+    var mermaidRelMap = {
+      belongs_to: "}o--||",
+      has_many: "||--o{",
+      has_one: "||--o|",
+      has_and_belongs_to_many: "}o--o{",
+      embeds_many: "||--o{",
+      embeds_one: "||--o|",
+      embedded_in: "}o--||"
+    };
+
+    edges.forEach(function(e) {
+      if (!visibleModels.has(e.from) || !visibleModels.has(e.to)) return;
+      var from = e.from.replace(/::/g, "_");
+      var to = e.to.replace(/::/g, "_");
+      var rel = mermaidRelMap[e.association_type] || "||--||";
+      var label = e.label || e.association_type;
+      if (e.polymorphic) label += " (polymorphic)";
+      if (e.through) label += " (through " + e.through + ")";
+      lines.push("  " + from + " " + rel + " " + to + ' : "' + label + '"');
+    });
+
+    var md = lines.join("\n") + "\n";
+    var blob = new Blob([md], { type: "text/plain;charset=utf-8" });
+    triggerDownload(blob, "schema-diagram.mmd");
+  }
+
+  // Export button listener
+  document.getElementById("export-mermaid-btn").addEventListener("click", function() { exportMermaid(); });
+
   // Init
   buildSidebar();
   render();