rails-schema 0.1.2 → 0.1.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 97d15de972c2e7c9c3d9e395d0b610b95806e7f6ef5729eed214f5cb7723bb61
-  data.tar.gz: 7edc0d7d8cd246ad80cc2dd54936a0c9802b662476400f095d076bed651d6472
+  metadata.gz: 71fa755a65ac8dcdb27f419857dd5ede16a13d4c26e5b9a40bc7e8ec1f41d36b
+  data.tar.gz: 4940bf9f24e51d6caf3e5e70526f7a2ed8d097c352e99920e6191212c1d6137e
 SHA512:
-  metadata.gz: 3ba7bf7dd2ac15538fa4a9f14b2772c4065fd6dc51a5325e1863e4d4e83838cdaa14497f5b4a4f6d7ffcdc014fe03ba9e1f3464e722ef57f73a56d14314997f0
-  data.tar.gz: f41572f08a43be003061f2e47914ed36ed27b2718b10d0d3e238c9ca436ea3230ca7e61e5213acdbf50cab6f19b96506d5d1c8d0de33bc2831e2ab84181adac0
+  metadata.gz: 8004dd0d9b8a82008ec7e4b53c0ec444067ed1ba477e1bafe59dcd18810149bdc713e1c5f1009ae3bcd456a6cfcd46e62be112cd3f1ae4d0a44ccd2929f644f2
+  data.tar.gz: 4269f97b5b87daf25cfd24ed9138b4ed363e3a9ea4c7f70695abc53517216cc04d299567c1c48a80b6f2fae9b99b602434574110c3cd2afc1ccdea0e4c5a6bf0

data/CHANGELOG.md

@@ -4,6 +4,29 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/), and this project adheres to [Semantic Versioning](https://semver.org/).
 
+## [0.1.4] - 2026-03-08
+
+### Added
+
+- Support for Ruby 2.7+ and Rails 5.2+ (improved compatibility with older versions)
+
+### Changed
+
+- Self-referential-only models (all edges point to themselves) are now placed in a vertical column to the left of the main graph instead of floating in the force simulation
+- True orphan models (zero edges) continue to appear in rows above the diagram
+- Improved class names and table names visibility
+
+## [0.1.3] - 2026-03-01
+
+### Added
+
+- Mongoid support: visualize MongoDB-backed models without a schema file (`schema_format: :mongoid`)
+- Auto-detection of Mongoid when `schema_format: :auto` and `Mongoid::Document` is defined
+- Mongoid extractors: `ModelScanner`, `ModelAdapter`, `ColumnReader`, `AssociationReader`
+- Support for all Mongoid association types: `has_many`, `has_one`, `belongs_to`, `has_and_belongs_to_many`, `embeds_many`, `embeds_one`, `embedded_in`
+- Embedded document styling in the frontend (dashed borders for embed associations)
+- Engine model eager-loading for Mongoid apps
+
 ## [0.1.2] - 2026-02-22
 
 ### Added

data/CLAUDE.md

@@ -0,0 +1,107 @@
+# CLAUDE.md — Project Instructions for Claude Code
+
+## Project
+
+`rails-schema` — a Ruby gem that generates an interactive HTML entity-relationship diagram from a Rails app's models, associations, and columns. Single self-contained HTML output, no server needed.
+
+## Quick Commands
+
+```bash
+bundle exec rspec          # Run all tests
+bundle exec rubocop        # Run linter
+bundle exec rspec spec/rails/schema/extractor/mongoid/  # Mongoid tests only
+```
+
+## Architecture
+
+Three-layer pipeline: **Extractor → Transformer → Renderer**
+
+| Layer | Responsibility | Key Classes |
+|---|---|---|
+| **Extractor** | Introspects Rails environment; collects models, columns, associations | `ModelScanner`, `ColumnReader`, `AssociationReader`, `SchemaFileParser`, `StructureSqlParser`, plus `Mongoid::ModelScanner`, `Mongoid::ModelAdapter`, `Mongoid::ColumnReader`, `Mongoid::AssociationReader` |
+| **Transformer** | Normalizes extracted data into a serializable graph (nodes + edges + metadata) | `GraphBuilder`, `Node`, `Edge` |
+| **Renderer** | Injects graph data into an HTML/JS/CSS template via ERB | `HtmlGenerator` |
+| **Railtie** | Provides the `rails_schema:generate` rake task | `Railtie` |
+
+### Key Paths
+
+- `lib/rails/schema.rb` — entry point, `generate` dispatches to ActiveRecord or Mongoid pipeline
+- `lib/rails/schema/extractor/` — model discovery, column/association reading, schema file parsing
+- `lib/rails/schema/extractor/mongoid/` — Mongoid-specific extractors
+- `lib/rails/schema/transformer/` — builds normalized graph JSON
+- `lib/rails/schema/renderer/` — ERB-based HTML generation with inlined JS/CSS/data
+- `lib/rails/schema/assets/` — frontend (vanilla JS + d3-force, CSS, HTML template)
+
+### Generation Pipeline
+
+```ruby
+def generate(output: nil)
+  schema_data = parse_schema
+  models = Extractor::ModelScanner.new(schema_data: schema_data).scan
+  column_reader = Extractor::ColumnReader.new(schema_data: schema_data)
+  graph_data = Transformer::GraphBuilder.new(column_reader: column_reader).build(models)
+  Renderer::HtmlGenerator.new(graph_data: graph_data).render_to_file(output)
+end
+```
+
+### Data Extraction Strategy
+
+1. **`db/schema.rb`** — `SchemaFileParser` parses with regex (table names, columns, types, nullable, defaults, PKs)
+2. **`db/structure.sql`** — `StructureSqlParser` parses SQL `CREATE TABLE` statements, maps SQL types to Rails types
+3. **ActiveRecord reflection API** — `AssociationReader` uses `reflect_on_all_associations` for associations
+4. **`Model.columns`** — `ColumnReader` falls back to this when table not found in schema_data
+
+### Model Discovery
+
+`ModelScanner` (ActiveRecord):
+1. Calls `Rails.application.eager_load!` (Zeitwerk support, multiple fallback strategies including `LoadError` rescue)
+2. Collects `ActiveRecord::Base.descendants`
+3. Filters: abstract classes, anonymous classes, models without known tables
+4. Applies `exclude_models` config (supports wildcard prefix like `"ActiveStorage::*"`)
+
+`Mongoid::ModelScanner`:
+1. Eager-loads via Zeitwerk or file glob with fallbacks
+2. Scans `ObjectSpace` for `Mongoid::Document` includers
+3. Also loads models from mounted Rails engines
+4. Returns models wrapped in `ModelAdapter` for GraphBuilder compatibility
+
+## Key Conventions
+
+- Ruby >= 2.7, Rails >= 5.2
+- Double quotes for strings (RuboCop enforced)
+- RuboCop max method length: 15 lines, default ABC/complexity limits
+- No `Style/Documentation` required
+- `spec/support/test_models.rb` — ActiveRecord test models (User, Post, Comment, Tag)
+- `spec/support/mongoid_test_models.rb` — Mongoid test models (MongoidUser, MongoidPost, MongoidComment)
+- Tests use in-memory SQLite for ActiveRecord, stubbed Mongoid::Document for Mongoid
+- `config.before(:each) { Rails::Schema.reset_configuration! }` in spec_helper
+
+## Schema Formats
+
+`config.schema_format` supports: `:auto`, `:ruby`, `:sql`, `:mongoid`
+
+- `:auto` — tries schema.rb, falls back to structure.sql; auto-detects Mongoid if `Mongoid::Document` is defined
+- `:mongoid` — runtime introspection of Mongoid models (no schema file needed)
+
+## Testing Notes
+
+- Always run `bundle exec rubocop` before committing — CI checks both tests and linting
+- CI matrix: Ruby 2.7, 3.0, 3.1, 3.2, 3.3, 3.4
+- Mongoid specs stub `Rails::Engine` and `Rails::Application` since they may not exist in test env
+- SimpleCov is enabled; coverage report goes to `coverage/`
+
+## Frontend
+
+Single self-contained HTML file — no CDN, no network requests. D3 is vendored/minified.
+
+- **Vanilla JS + d3-force** for graph rendering
+- **CSS custom properties** for dark/light theming
+- Features: searchable sidebar, click-to-focus, detail panel, zoom/pan, keyboard shortcuts (`/` search, `Esc` deselect, `+/-` zoom, `F` fit)
+
+## Design Decisions
+
+- **Single HTML file** — zero deployment friction, offline-first, portable (CI, GitHub Pages, email)
+- **Not a mounted engine** — static file works without a running server
+- **Parse schema files** — works without DB connection (CI environments, no local DB)
+- **Force-directed layout** — handles unknown schemas gracefully without pre-defined positions
+- **Node layout categories** — three-way partition in `app.js`: connected nodes use force simulation, self-ref-only models (all edges point to themselves) are placed in a vertical left column via `layoutSelfRefNodes()`, true orphans (zero edges) are placed in rows above the diagram via `layoutOrphans()`

data/README.md

@@ -4,6 +4,13 @@ Interactive HTML visualization of your Rails database schema. Introspects your a
 
 No external server, no CDN — just one command and a browser.
 
+## Compatibility
+
+| Dependency | Required version |
+|-----------|-----------------|
+| Ruby | >= 2.7 |
+| Rails | >= 5.2 |
+
 **[Live example](https://andrew2net.github.io/rails-schema/)** — generated from [Fizzy](https://www.fizzy.do), a modern spin on kanban for tracking just about anything, created by [37signals](https://37signals.com).
 
 ![Rails Schema screenshot](docs/screenshot.png)
@@ -48,7 +55,7 @@ Rails::Schema.configure do |config|
   config.title = "My App Schema"
   config.theme = :auto          # :auto, :light, or :dark
   config.expand_columns = false # start with columns collapsed
-  config.schema_format = :auto  # :auto, :ruby, or :sql
+  config.schema_format = :auto  # :auto, :ruby, :sql, or :mongoid
   config.exclude_models = [
     "ActiveStorage::Blob",
     "ActiveStorage::Attachment",
@@ -63,7 +70,7 @@ end
 | `title` | `"Database Schema"` | Title shown in the HTML page |
 | `theme` | `:auto` | Color theme — `:auto`, `:light`, or `:dark` |
 | `expand_columns` | `false` | Whether model nodes start with columns expanded |
-| `schema_format` | `:auto` | Schema source — `:auto`, `:ruby`, or `:sql` (see below) |
+| `schema_format` | `:auto` | Schema source — `:auto`, `:ruby`, `:sql`, or `:mongoid` (see below) |
 | `exclude_models` | `[]` | Models to hide; supports exact names and wildcard prefixes (`"ActionMailbox::*"`) |
 
 ### Schema format
@@ -72,18 +79,35 @@ Rails projects can use either `db/schema.rb` (Ruby DSL) or `db/structure.sql` (r
 
 | Value | Behavior |
 |-------|----------|
-| `:auto` | Tries `db/schema.rb` first, falls back to `db/structure.sql` |
+| `:auto` | Tries `db/schema.rb` first, falls back to `db/structure.sql`. If Mongoid is detected, uses the Mongoid pipeline instead |
 | `:ruby` | Only reads `db/schema.rb` |
 | `:sql` | Only reads `db/structure.sql` |
+| `:mongoid` | Introspects Mongoid models directly (see below) |
+
+### Mongoid support
+
+If your app uses [Mongoid](https://www.mongodb.com/docs/mongoid/current/) instead of ActiveRecord, rails-schema can introspect your Mongoid models directly — no schema file needed.
+
+```ruby
+Rails::Schema.configure do |config|
+  config.schema_format = :mongoid
+end
+```
+
+When set to `:auto`, Mongoid mode activates automatically if `Mongoid::Document` is defined.
+
+The Mongoid pipeline reads fields, types, defaults, and presence validations from your models, and discovers all association types including `embeds_many`, `embeds_one`, `embedded_in`, and `has_and_belongs_to_many`.
 
 ## How it works
 
 The gem parses your `db/schema.rb` or `db/structure.sql` file to extract table and column information — **no database connection required**. It also introspects loaded ActiveRecord models for association metadata. This means the gem works even if you don't have a local database set up, as long as a schema file is present (which is standard in Rails projects under version control).
 
+For Mongoid apps, the gem introspects model classes at runtime to read field definitions, associations, and validations — no schema file or database connection required.
+
 ## Features
 
-- **No database required** — reads from `db/schema.rb` or `db/structure.sql`
-- **Force-directed layout** — models cluster naturally by association density
+- **No database required** — reads from `db/schema.rb`, `db/structure.sql`, or Mongoid model introspection
+- **Force-directed layout** — models cluster naturally by association density; self-referential-only models are placed in a left column, true orphans in rows above
 - **Searchable sidebar** — filter models by name or table
 - **Click-to-focus** — click a model to highlight its neighborhood, fading unrelated models
 - **Detail panel** — full column list and associations for the selected model

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

@@ -6,6 +6,15 @@
   var nodes = data.nodes;
   var edges = data.edges;
 
+  // Hide legend items that don't apply to the current schema mode
+  var mode = data.metadata && data.metadata.mode;
+  if (mode) {
+    var hideMode = mode === "mongoid" ? "active_record" : "mongoid";
+    document.querySelectorAll('.legend-item[data-mode="' + hideMode + '"]').forEach(function(el) {
+      el.style.display = "none";
+    });
+  }
+
   // State
   var selectedNode = null;
   var visibleModels = new Set(nodes.map(function(n) { return n.id; }));
@@ -35,7 +44,10 @@
     belongs_to: "--edge-belongs-to",
     has_many: "--edge-has-many",
     has_one: "--edge-has-one",
-    has_and_belongs_to_many: "--edge-habtm"
+    has_and_belongs_to_many: "--edge-habtm",
+    embeds_many: "--edge-embeds-many",
+    embeds_one: "--edge-embeds-one",
+    embedded_in: "--edge-embedded-in"
   };
 
   function buildMarkers() {
@@ -113,7 +125,10 @@
     belongs_to:              { start: "many", end: "one" },
     has_many:                { start: "one",  end: "many" },
     has_one:                 { start: "one",  end: "one" },
-    has_and_belongs_to_many: { start: "many", end: "many" }
+    has_and_belongs_to_many: { start: "many", end: "many" },
+    embeds_many:             { start: "one",  end: "many" },
+    embeds_one:              { start: "one",  end: "one" },
+    embedded_in:             { start: "many", end: "one" }
   };
 
   function getColumnY(node, colName) {
@@ -142,10 +157,11 @@
     var srcColY = 0;
     var tgtColY = 0;
 
-    if (assocType === "belongs_to") {
+    if (assocType === "belongs_to" || assocType === "embedded_in") {
       srcColY = getColumnY(src, fk);
       tgtColY = getPkColumnY(tgt);
-    } else if (assocType === "has_many" || assocType === "has_one") {
+    } else if (assocType === "has_many" || assocType === "has_one" ||
+               assocType === "embeds_many" || assocType === "embeds_one") {
       srcColY = getPkColumnY(src);
       tgtColY = getColumnY(tgt, fk);
     } else {
@@ -179,6 +195,10 @@
   }
 
   // d3-force simulation
+  var orphanNodes = [];
+  var connectedNodes = [];
+  var selfRefNodes = [];
+
   function setupSimulation() {
     var nodeMap = {};
     nodes.forEach(function(n) { nodeMap[n.id] = n; });
@@ -191,18 +211,156 @@
 
     var simNodes = nodes.filter(function(n) { return visibleModels.has(n.id); });
 
+    // Partition into connected, self-ref-only, and orphan nodes
+    var connectedIds = new Set();
+    var selfRefIds = new Set();
+    simEdges.forEach(function(e) {
+      if (e.data.from !== e.data.to) {
+        connectedIds.add(e.data.from);
+        connectedIds.add(e.data.to);
+      } else {
+        selfRefIds.add(e.data.from);
+      }
+    });
+    // Self-ref-only = has self-ref edge but no cross-model edges
+    selfRefIds.forEach(function(id) { if (connectedIds.has(id)) selfRefIds.delete(id); });
+
+    connectedNodes = simNodes.filter(function(n) { return connectedIds.has(n.id); });
+    selfRefNodes = simNodes.filter(function(n) { return selfRefIds.has(n.id); });
+    selfRefNodes.sort(function(a, b) { return a.id.localeCompare(b.id); });
+    orphanNodes = simNodes.filter(function(n) { return !connectedIds.has(n.id) && !selfRefIds.has(n.id); });
+    orphanNodes.sort(function(a, b) { return a.id.localeCompare(b.id); });
+
+    // Exclude self-ref-only edges from force simulation
+    var forceEdges = simEdges.filter(function(e) {
+      return !selfRefIds.has(e.data.from) || connectedIds.has(e.data.from);
+    });
+
     if (simulation) simulation.stop();
 
-    simulation = d3.forceSimulation(simNodes)
-      .force("link", d3.forceLink(simEdges).id(function(d) { return d.id; }).distance(320))
+    simulation = d3.forceSimulation(connectedNodes)
+      .force("link", d3.forceLink(forceEdges).id(function(d) { return d.id; }).distance(320))
       .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);
 
+    // Manually resolve edge references for self-ref-only nodes
+    simEdges.forEach(function(e) {
+      if (typeof e.source === 'string' && selfRefIds.has(e.source)) {
+        var node = selfRefNodes.find(function(n) { return n.id === e.source; });
+        e.source = node;
+        e.target = node;
+      }
+    });
+
     return { simNodes: simNodes, simEdges: simEdges };
   }
 
+  function layoutOrphans() {
+    if (orphanNodes.length === 0) return;
+
+    // Find connected graph bounds
+    var minY = Infinity, minX = Infinity, maxX = -Infinity;
+    connectedNodes.forEach(function(n) {
+      var top = n.y - n._height / 2;
+      if (top < minY) minY = top;
+      if (n.x - NODE_WIDTH / 2 < minX) minX = n.x - NODE_WIDTH / 2;
+      if (n.x + NODE_WIDTH / 2 > maxX) maxX = n.x + NODE_WIDTH / 2;
+    });
+
+    // Defaults when no connected nodes
+    if (minY === Infinity) minY = svgEl.clientHeight / 2;
+    if (minX === Infinity) minX = svgEl.clientWidth / 2 - NODE_WIDTH;
+    if (maxX === -Infinity) maxX = svgEl.clientWidth / 2 + NODE_WIDTH;
+
+    var centerX = (minX + maxX) / 2;
+    var gap = 20;
+    var rowGap = 30;
+
+    // Lay out orphans into rows (wrap when exceeding connected graph width)
+    var maxRowWidth = Math.max(maxX - minX, NODE_WIDTH * 3);
+    var rows = [[]];
+    var rowWidths = [0];
+
+    orphanNodes.forEach(function(n) {
+      var lastRow = rows[rows.length - 1];
+      var lastWidth = rowWidths[rows.length - 1];
+      var addedWidth = (lastRow.length > 0 ? gap : 0) + NODE_WIDTH;
+
+      if (lastRow.length > 0 && lastWidth + addedWidth > maxRowWidth) {
+        rows.push([n]);
+        rowWidths.push(NODE_WIDTH);
+      } else {
+        lastRow.push(n);
+        rowWidths[rows.length - 1] = lastWidth + addedWidth;
+      }
+    });
+
+    // Position rows above the diagram, bottom row first (closest to graph)
+    var currentY = minY - rowGap;
+    for (var r = rows.length - 1; r >= 0; r--) {
+      var row = rows[r];
+      var rowHeight = 0;
+      row.forEach(function(n) { if (n._height > rowHeight) rowHeight = n._height; });
+
+      currentY -= rowHeight / 2;
+      var startX = centerX - rowWidths[r] / 2 + NODE_WIDTH / 2;
+
+      row.forEach(function(n, i) {
+        n.x = startX + i * (NODE_WIDTH + gap);
+        n.y = currentY;
+      });
+
+      currentY -= rowHeight / 2 + rowGap;
+    }
+
+  }
+
+  function layoutSelfRefNodes() {
+    if (selfRefNodes.length === 0) return;
+
+    var minX = Infinity, minY = Infinity, maxY = -Infinity;
+    connectedNodes.forEach(function(n) {
+      if (n.x - NODE_WIDTH / 2 < minX) minX = n.x - NODE_WIDTH / 2;
+      if (n.y - n._height / 2 < minY) minY = n.y - n._height / 2;
+      if (n.y + n._height / 2 > maxY) maxY = n.y + n._height / 2;
+    });
+
+    if (minX === Infinity) minX = svgEl.clientWidth / 2;
+    if (minY === Infinity) minY = svgEl.clientHeight / 2 - 100;
+    if (maxY === -Infinity) maxY = svgEl.clientHeight / 2 + 100;
+
+    var gap = 20;
+    var colGap = 40;
+    var centerY = (minY + maxY) / 2;
+
+    var totalHeight = 0;
+    selfRefNodes.forEach(function(n) { totalHeight += n._height; });
+    totalHeight += (selfRefNodes.length - 1) * gap;
+
+    var currentY = centerY - totalHeight / 2;
+    var x = minX - NODE_WIDTH - colGap;
+
+    selfRefNodes.forEach(function(n) {
+      n.x = x;
+      n.y = currentY + n._height / 2;
+      currentY += n._height + gap;
+    });
+  }
+
+  function truncateText(text, maxWidth, 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;
+    var truncated = text;
+    while (truncated.length > 0 && ctx.measureText(truncated + "…").width > maxWidth) {
+      truncated = truncated.slice(0, -1);
+    }
+    return truncated + "…";
+  }
+
   // Render
   var currentSim;
 
@@ -251,6 +409,9 @@
         return m ? "url(#marker-" + m.end + "-" + d.data.association_type + ")" : null;
       });
 
+    eGroups.append("rect")
+      .attr("class", "edge-label-bg");
+
     eGroups.append("text")
       .attr("class", "edge-label")
       .attr("text-anchor", "middle")
@@ -305,7 +466,7 @@
       .attr("y", function(d) { return -d._height / 2 + 16; })
       .attr("text-anchor", "middle")
       .attr("dominant-baseline", "central")
-      .text(function(d) { return d.id; });
+      .text(function(d) { return truncateText(d.id, NODE_WIDTH - NODE_PADDING * 2, "bold 13px"); });
 
     // Table name
     nGroups.append("text")
@@ -314,7 +475,7 @@
       .attr("y", function(d) { return -d._height / 2 + 30; })
       .attr("text-anchor", "middle")
       .attr("dominant-baseline", "central")
-      .text(function(d) { return d.table_name; });
+      .text(function(d) { return truncateText(d.table_name, NODE_WIDTH - NODE_PADDING * 2, "10px"); });
 
     // Columns
     nGroups.each(function(d) {
@@ -350,6 +511,8 @@
   }
 
   function ticked() {
+    layoutOrphans();
+    layoutSelfRefNodes();
     edgeGroup.selectAll(".edge-group").each(function(d) {
       var g = d3.select(this);
       var src = d.source;
@@ -414,23 +577,84 @@
         .attr("y", labelY);
     });
 
+    resolveEdgeLabelOverlaps();
+
     nodeGroup.selectAll(".node-group")
       .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
   }
 
+  function resolveEdgeLabelOverlaps() {
+    var labels = [];
+    edgeGroup.selectAll(".edge-group text").each(function() {
+      var el = d3.select(this);
+      var x = +el.attr("x");
+      var y = +el.attr("y");
+      var text = el.text();
+      var w = text.length * 6;  // approximate width at 10px font
+      var h = 14;               // approximate height
+      labels.push({ el: el, x: x, y: y, w: w, h: h });
+    });
+
+    // Run a few nudge passes
+    for (var pass = 0; pass < 3; pass++) {
+      for (var i = 0; i < labels.length; i++) {
+        for (var j = i + 1; j < labels.length; j++) {
+          var a = labels[i], b = labels[j];
+          var overlapX = (a.w + b.w) / 2 - Math.abs(a.x - b.x);
+          var overlapY = (a.h + b.h) / 2 - Math.abs(a.y - b.y);
+          if (overlapX > 0 && overlapY > 0) {
+            // Push apart vertically
+            var shift = (overlapY / 2) + 2;
+            if (a.y <= b.y) {
+              a.y -= shift;
+              b.y += shift;
+            } else {
+              a.y += shift;
+              b.y -= shift;
+            }
+          }
+        }
+      }
+    }
+
+    // Apply resolved positions and update background rects
+    labels.forEach(function(l) {
+      l.el.attr("y", l.y);
+      var bg = d3.select(l.el.node().previousElementSibling);
+      if (bg.classed("edge-label-bg")) {
+        bg.attr("x", l.x - l.w / 2)
+          .attr("y", l.y - l.h + 2)
+          .attr("width", l.w)
+          .attr("height", l.h);
+      }
+    });
+  }
+
   // Drag behavior
+  function isOrphan(d) {
+    return orphanNodes.indexOf(d) !== -1 || selfRefNodes.indexOf(d) !== -1;
+  }
+
   function dragStarted(event, d) {
+    if (isOrphan(d)) return;
     if (!event.active) simulation.alphaTarget(0.3).restart();
     d.fx = d.x;
     d.fy = d.y;
   }
 
   function dragged(event, d) {
+    if (isOrphan(d)) {
+      d.x = event.x;
+      d.y = event.y;
+      ticked();
+      return;
+    }
     d.fx = event.x;
     d.fy = event.y;
   }
 
   function dragEnded(event, d) {
+    if (isOrphan(d)) return;
     if (!event.active) simulation.alphaTarget(0);
     d.fx = null;
     d.fy = null;
@@ -491,10 +715,11 @@
 
     var nodeEdges = edges.filter(function(e) { return e.from === nodeId || e.to === nodeId; });
 
-    var html = '<div style="position:relative;">';
+    var html = '<div class="detail-header">';
+    html += '<h2 title="' + escapeHtml(node.id) + '">' + escapeHtml(node.id) + '</h2>';
     html += '<button id="detail-close" onclick="window.__closeDetail()">&times;</button>';
-    html += '<h2>' + escapeHtml(node.id) + '</h2>';
-    html += '<div class="detail-table">' + escapeHtml(node.table_name) + '</div>';
+    html += '</div>';
+    html += '<div class="detail-table" title="' + escapeHtml(node.table_name) + '">' + escapeHtml(node.table_name) + '</div>';
 
     html += '<h3>Columns</h3>';
     html += '<ul class="column-list">';
@@ -519,7 +744,6 @@
       html += '</ul>';
     }
 
-    html += '</div>';
     content.innerHTML = html;
 
     // Click association targets to navigate
@@ -701,5 +925,5 @@
   render();
 
   // Fit after simulation settles
-  setTimeout(fitToScreen, 1500);
+  setTimeout(function() { fitToScreen(); }, 1500);
 })();