rdbr 0.1.0

data/app/public/database-diagram.js

@@ -0,0 +1,602 @@
+(() => {
+  const dialog = document.querySelector('#database-diagram');
+  const trigger = document.querySelector('[data-open-database-diagram]');
+  if (!dialog || !trigger) return;
+
+  const svg = dialog.querySelector('[data-diagram-svg]');
+  const canvas = dialog.querySelector('[data-diagram-canvas]');
+  const details = dialog.querySelector('[data-diagram-details]');
+  const status = dialog.querySelector('[data-diagram-status]');
+  const search = dialog.querySelector('[data-diagram-search]');
+  const svgNamespace = 'http://www.w3.org/2000/svg';
+  const nodeWidth = 220;
+  const nodeHeight = 58;
+  const componentGap = 140;
+  const nodeClearance = 110;
+  const ringSpacing = 320;
+  const maximumNeighbourhoodSize = 22;
+  let graph;
+  let viewport;
+  let positions = new Map();
+  let transform = { x: 0, y: 0, scale: 1 };
+  let drag;
+
+  const svgElement = (name, attributes = {}) => {
+    const element = document.createElementNS(svgNamespace, name);
+    Object.entries(attributes).forEach(([key, value]) => element.setAttribute(key, value));
+    return element;
+  };
+
+  const setTransform = () => {
+    viewport?.setAttribute('transform', `translate(${transform.x} ${transform.y}) scale(${transform.scale})`);
+  };
+
+  const fit = () => {
+    if (!graph?.nodes.length) return;
+
+    const bounds = Array.from(positions.values());
+    const minimumX = Math.min(...bounds.map((position) => position.x));
+    const minimumY = Math.min(...bounds.map((position) => position.y));
+    const width = Math.max(...bounds.map((position) => position.x)) + nodeWidth - minimumX;
+    const height = Math.max(...bounds.map((position) => position.y)) + nodeHeight - minimumY;
+    const scale = Math.min((canvas.clientWidth - 80) / width, (canvas.clientHeight - 80) / height, 1);
+    transform = {
+      scale: Math.max(scale, 0.12),
+      x: (canvas.clientWidth - width * scale) / 2 - minimumX * scale,
+      y: (canvas.clientHeight - height * scale) / 2 - minimumY * scale
+    };
+    setTransform();
+  };
+
+  const zoom = (factor, originX = canvas.clientWidth / 2, originY = canvas.clientHeight / 2) => {
+    const oldScale = transform.scale;
+    const newScale = Math.max(0.1, Math.min(2.5, oldScale * factor));
+    const graphX = (originX - transform.x) / oldScale;
+    const graphY = (originY - transform.y) / oldScale;
+    transform.x = originX - graphX * newScale;
+    transform.y = originY - graphY * newScale;
+    transform.scale = newScale;
+    setTransform();
+  };
+
+  const showDetails = (node) => {
+    details.replaceChildren();
+    const heading = document.createElement('h3');
+    const kind = document.createElement('p');
+    const list = document.createElement('dl');
+    heading.textContent = `${node.namespace}.${node.name}`;
+    kind.className = 'database-diagram-kind';
+    kind.textContent = node.kind.replaceAll('_', ' ');
+    details.append(heading, kind);
+    if (node.comment) {
+      const comment = document.createElement('p');
+      comment.textContent = node.comment;
+      details.append(comment);
+    }
+    node.columns.forEach((column) => {
+      const row = document.createElement('div');
+      const name = document.createElement('dt');
+      const type = document.createElement('dd');
+      const badges = [];
+      if (column.primary_key) badges.push('PK');
+      column.foreign_keys.forEach((foreignKey) => {
+        const namespace = foreignKey.namespace || node.namespace;
+        const inference = foreignKey.inferred ? ' (inferred)' : '';
+        badges.push(`FK → ${namespace}.${foreignKey.relation}.${foreignKey.column}${inference}`);
+      });
+      name.textContent = column.name;
+      type.textContent = [column.type || 'Unknown', ...badges].join(' · ');
+      row.append(name, type);
+      list.append(row);
+    });
+    details.append(list);
+    viewport.querySelectorAll('.database-diagram-node').forEach((element) => {
+      element.classList.toggle('selected', element.dataset.nodeId === node.id);
+    });
+  };
+
+  const connectedComponents = (adjacency) => {
+    const remaining = new Set(graph.nodes.map((node) => node.id));
+    const components = [];
+    while (remaining.size) {
+      const start = Array.from(remaining).sort((left, right) =>
+        adjacency.get(right).size - adjacency.get(left).size)[0];
+      const component = [];
+      const queue = [start];
+      remaining.delete(start);
+      while (queue.length) {
+        const id = queue.shift();
+        component.push(id);
+        adjacency.get(id).forEach((neighbour) => {
+          if (!remaining.has(neighbour)) return;
+          remaining.delete(neighbour);
+          queue.push(neighbour);
+        });
+      }
+      components.push(component);
+    }
+    return components.sort((left, right) => right.length - left.length);
+  };
+
+  const distancesFrom = (start, componentIds, adjacency) => {
+    const distances = new Map([[start, 0]]);
+    const queue = [start];
+    while (queue.length) {
+      const id = queue.shift();
+      adjacency.get(id).forEach((neighbour) => {
+        if (!componentIds.has(neighbour) || distances.has(neighbour)) return;
+        distances.set(neighbour, distances.get(id) + 1);
+        queue.push(neighbour);
+      });
+    }
+    return distances;
+  };
+
+  const neighbourhoodHubs = (component, adjacency) => {
+    const componentIds = new Set(component);
+    const hubCount = Math.max(1, Math.ceil(component.length / maximumNeighbourhoodSize));
+    const byDegree = component.slice().sort((left, right) =>
+      adjacency.get(right).size - adjacency.get(left).size || left.localeCompare(right));
+    const hubs = [byDegree[0]];
+    const distanceMaps = [distancesFrom(hubs[0], componentIds, adjacency)];
+    while (hubs.length < hubCount) {
+      const candidates = component.filter((id) => !hubs.includes(id)).map((id) => {
+        const separation = Math.min(...distanceMaps.map((distances) => distances.get(id)));
+        return { id, score: (separation + 1) * (adjacency.get(id).size + 1) };
+      });
+      candidates.sort((left, right) => right.score - left.score || left.id.localeCompare(right.id));
+      hubs.push(candidates[0].id);
+      distanceMaps.push(distancesFrom(candidates[0].id, componentIds, adjacency));
+    }
+    return hubs;
+  };
+
+  const partitionComponent = (component, adjacency) => {
+    if (component.length <= maximumNeighbourhoodSize) return [component];
+
+    const hubs = neighbourhoodHubs(component, adjacency);
+    const unassigned = new Set(component);
+    const groups = new Map(hubs.map((hub) => [hub, [hub]]));
+    let frontiers = new Map(hubs.map((hub) => [hub, [hub]]));
+    hubs.forEach((hub) => unassigned.delete(hub));
+    while (unassigned.size) {
+      const proposals = new Map();
+      frontiers.forEach((frontier, hub) => {
+        frontier.forEach((id) => {
+          adjacency.get(id).forEach((neighbour) => {
+            if (!unassigned.has(neighbour)) return;
+            if (!proposals.has(neighbour)) proposals.set(neighbour, []);
+            proposals.get(neighbour).push(hub);
+          });
+        });
+      });
+      const nextFrontiers = new Map(hubs.map((hub) => [hub, []]));
+      Array.from(proposals.keys()).sort().forEach((id) => {
+        const candidates = proposals.get(id).sort((left, right) =>
+          groups.get(left).length - groups.get(right).length || left.localeCompare(right));
+        const owner = candidates[0];
+        groups.get(owner).push(id);
+        nextFrontiers.get(owner).push(id);
+        unassigned.delete(id);
+      });
+      frontiers = nextFrontiers;
+    }
+    return hubs.map((hub) => groups.get(hub));
+  };
+
+  const ringOrder = (ids, levels, angles, adjacency) => {
+    const desired = ids.map((id) => {
+      const innerNeighbours = Array.from(adjacency.get(id)).filter((neighbour) =>
+        levels.get(neighbour) < levels.get(id) && angles.has(neighbour));
+      if (!innerNeighbours.length) return { id, angle: 0 };
+      const x = innerNeighbours.reduce((sum, neighbour) => sum + Math.cos(angles.get(neighbour)), 0);
+      const y = innerNeighbours.reduce((sum, neighbour) => sum + Math.sin(angles.get(neighbour)), 0);
+      return { id, angle: Math.atan2(y, x) };
+    });
+    desired.sort((left, right) => left.angle - right.angle || left.id.localeCompare(right.id));
+    return desired;
+  };
+
+  const groupRingNeighbours = (ordered, adjacency) => {
+    const entries = new Map(ordered.map((entry) => [entry.id, entry]));
+    const remaining = new Set(entries.keys());
+    const groups = [];
+    while (remaining.size) {
+      const start = Array.from(remaining).sort()[0];
+      const group = [];
+      const queue = [start];
+      remaining.delete(start);
+      while (queue.length) {
+        const id = queue.shift();
+        group.push(entries.get(id));
+        Array.from(adjacency.get(id)).sort().forEach((neighbour) => {
+          if (!remaining.has(neighbour) || !entries.has(neighbour)) return;
+          remaining.delete(neighbour);
+          queue.push(neighbour);
+        });
+      }
+      groups.push(group);
+    }
+    return groups.sort((left, right) => left[0].id.localeCompare(right[0].id)).flat();
+  };
+
+  const normalizeAngle = (angle) => {
+    let normalized = angle;
+    while (normalized <= -Math.PI) normalized += Math.PI * 2;
+    while (normalized > Math.PI) normalized -= Math.PI * 2;
+    return normalized;
+  };
+
+  const truncateSvgText = (element, value, maximumWidth) => {
+    element.textContent = value;
+    if (!element.getComputedTextLength || element.getComputedTextLength() <= maximumWidth) return;
+
+    let lower = 0;
+    let upper = value.length;
+    while (lower < upper) {
+      const length = Math.ceil((lower + upper) / 2);
+      element.textContent = `${value.slice(0, length)}…`;
+      if (element.getComputedTextLength() <= maximumWidth) lower = length;
+      else upper = length - 1;
+    }
+    element.textContent = `${value.slice(0, lower)}…`;
+  };
+
+  const spreadRing = (ordered, level, radius) => {
+    if (level === 1) {
+      const step = (Math.PI * 2) / ordered.length;
+      return ordered.map((_entry, index) => -Math.PI / 2 + index * step);
+    }
+
+    const minimumGap = (nodeWidth + nodeClearance) / radius;
+    const angles = ordered.map((entry, index) => entry.angle + index * 0.0001);
+    for (let iteration = 0; iteration < 180; iteration += 1) {
+      const forces = ordered.map((entry, index) => normalizeAngle(entry.angle - angles[index]) * 0.035);
+      for (let left = 0; left < angles.length; left += 1) {
+        for (let right = left + 1; right < angles.length; right += 1) {
+          const difference = normalizeAngle(angles[right] - angles[left]);
+          const distance = Math.abs(difference);
+          if (distance >= minimumGap) continue;
+          const direction = difference >= 0 ? 1 : -1;
+          const separation = (minimumGap - distance) * 0.22;
+          forces[left] -= direction * separation;
+          forces[right] += direction * separation;
+        }
+      }
+      angles.forEach((_angle, index) => {
+        angles[index] = normalizeAngle(angles[index] + forces[index]);
+      });
+    }
+    return angles;
+  };
+
+  const layoutComponent = (component, adjacency) => {
+    const componentIds = new Set(component);
+    const hub = component.slice().sort((left, right) => {
+      const degreeDifference = adjacency.get(right).size - adjacency.get(left).size;
+      return degreeDifference || left.localeCompare(right);
+    })[0];
+    const levels = new Map([[hub, 0]]);
+    const queue = [hub];
+    while (queue.length) {
+      const id = queue.shift();
+      adjacency.get(id).forEach((neighbour) => {
+        if (!componentIds.has(neighbour) || levels.has(neighbour)) return;
+        levels.set(neighbour, levels.get(id) + 1);
+        queue.push(neighbour);
+      });
+    }
+
+    const local = new Map([[hub, { x: -nodeWidth / 2, y: -nodeHeight / 2 }]]);
+    const angles = new Map([[hub, 0]]);
+    const maximumLevel = Math.max(...levels.values());
+    let previousRadius = 0;
+    for (let level = 1; level <= maximumLevel; level += 1) {
+      const ring = component.filter((id) => levels.get(id) === level);
+      let ordered = ringOrder(ring, levels, angles, adjacency);
+      if (level === 1) ordered = groupRingNeighbours(ordered, adjacency);
+      const capacityRadius = ordered.length * (nodeWidth + nodeClearance) / (Math.PI * 2);
+      const radius = Math.max(previousRadius + ringSpacing, capacityRadius);
+      const ringAngles = spreadRing(ordered, level, radius);
+      ordered.forEach((entry, index) => {
+        const angle = ringAngles[index];
+        angles.set(entry.id, angle);
+        local.set(entry.id, {
+          x: Math.cos(angle) * radius - nodeWidth / 2,
+          y: Math.sin(angle) * radius - nodeHeight / 2
+        });
+      });
+      previousRadius = radius;
+    }
+
+    const values = Array.from(local.values());
+    const minimumX = Math.min(...values.map((position) => position.x));
+    const minimumY = Math.min(...values.map((position) => position.y));
+    const maximumX = Math.max(...values.map((position) => position.x)) + nodeWidth;
+    const maximumY = Math.max(...values.map((position) => position.y)) + nodeHeight;
+    local.forEach((position) => {
+      position.x -= minimumX;
+      position.y -= minimumY;
+    });
+    return { positions: local, width: maximumX - minimumX, height: maximumY - minimumY };
+  };
+
+  const packNeighbourhoods = (neighbourhoods) => {
+    const arranged = new Map();
+    const totalArea = neighbourhoods.reduce((sum, neighbourhood) =>
+      sum + (neighbourhood.width + componentGap) * (neighbourhood.height + componentGap), 0);
+    const targetWidth = Math.max(Math.sqrt(totalArea * 1.35), nodeWidth + componentGap);
+    let cursorX = 0;
+    let cursorY = 0;
+    let rowHeight = 0;
+    neighbourhoods.forEach((neighbourhood) => {
+      if (cursorX && cursorX + neighbourhood.width > targetWidth) {
+        cursorX = 0;
+        cursorY += rowHeight + componentGap;
+        rowHeight = 0;
+      }
+      neighbourhood.positions.forEach((position, id) => {
+        arranged.set(id, { x: position.x + cursorX, y: position.y + cursorY });
+      });
+      cursorX += neighbourhood.width + componentGap;
+      rowHeight = Math.max(rowHeight, neighbourhood.height);
+    });
+    return arranged;
+  };
+
+  const normalizeNeighbourhoods = (neighbourhoods, arranged) => {
+    neighbourhoods.forEach((neighbourhood) => {
+      const ids = Array.from(neighbourhood.positions.keys());
+      const values = ids.map((id) => arranged.get(id));
+      const minimumX = Math.min(...values.map((position) => position.x));
+      const minimumY = Math.min(...values.map((position) => position.y));
+      const maximumX = Math.max(...values.map((position) => position.x)) + nodeWidth;
+      const maximumY = Math.max(...values.map((position) => position.y)) + nodeHeight;
+      ids.forEach((id) => {
+        const position = arranged.get(id);
+        neighbourhood.positions.set(id, { x: position.x - minimumX, y: position.y - minimumY });
+      });
+      neighbourhood.width = maximumX - minimumX;
+      neighbourhood.height = maximumY - minimumY;
+    });
+  };
+
+  const neighbourhoodBounds = (neighbourhood, arranged) => {
+    const values = Array.from(neighbourhood.positions.keys()).map((id) => arranged.get(id));
+    const minimumX = Math.min(...values.map((position) => position.x));
+    const minimumY = Math.min(...values.map((position) => position.y));
+    const maximumX = Math.max(...values.map((position) => position.x)) + nodeWidth;
+    const maximumY = Math.max(...values.map((position) => position.y)) + nodeHeight;
+    return { x: (minimumX + maximumX) / 2, y: (minimumY + maximumY) / 2 };
+  };
+
+  const orientNeighbourhoods = (neighbourhoods, arranged) => {
+    const owners = new Map();
+    neighbourhoods.forEach((neighbourhood, index) => {
+      neighbourhood.positions.forEach((_position, id) => owners.set(id, index));
+    });
+    const centers = neighbourhoods.map((neighbourhood) => neighbourhoodBounds(neighbourhood, arranged));
+    const rotations = neighbourhoods.map(() => []);
+    graph.edges.forEach((edge) => {
+      const sourceOwner = owners.get(edge.source);
+      const targetOwner = owners.get(edge.target);
+      if (sourceOwner === undefined || targetOwner === undefined || sourceOwner === targetOwner) return;
+      [[edge.source, sourceOwner, targetOwner], [edge.target, targetOwner, sourceOwner]].forEach(
+        ([id, owner, otherOwner]) => {
+          const position = arranged.get(id);
+          const center = centers[owner];
+          const current = Math.atan2(position.y + nodeHeight / 2 - center.y,
+            position.x + nodeWidth / 2 - center.x);
+          const desired = Math.atan2(centers[otherOwner].y - center.y, centers[otherOwner].x - center.x);
+          rotations[owner].push(normalizeAngle(desired - current));
+        }
+      );
+    });
+    rotations.forEach((values, owner) => {
+      if (!values.length) return;
+      const rotation = Math.atan2(values.reduce((sum, angle) => sum + Math.sin(angle), 0),
+        values.reduce((sum, angle) => sum + Math.cos(angle), 0));
+      const center = centers[owner];
+      neighbourhoods[owner].positions.forEach((_position, id) => {
+        const position = arranged.get(id);
+        const x = position.x + nodeWidth / 2 - center.x;
+        const y = position.y + nodeHeight / 2 - center.y;
+        arranged.set(id, {
+          x: center.x + x * Math.cos(rotation) - y * Math.sin(rotation) - nodeWidth / 2,
+          y: center.y + x * Math.sin(rotation) + y * Math.cos(rotation) - nodeHeight / 2
+        });
+      });
+    });
+  };
+
+  const layoutGraph = () => {
+    const nodeIds = new Set(graph.nodes.map((node) => node.id));
+    const adjacency = new Map(graph.nodes.map((node) => [node.id, new Set()]));
+    graph.edges.forEach((edge) => {
+      if (!nodeIds.has(edge.source) || !nodeIds.has(edge.target)) return;
+      adjacency.get(edge.source).add(edge.target);
+      adjacency.get(edge.target).add(edge.source);
+    });
+    const neighbourhoods = connectedComponents(adjacency)
+      .flatMap((component) => partitionComponent(component, adjacency))
+      .map((component) => layoutComponent(component, adjacency))
+      .sort((left, right) => right.width * right.height - left.width * left.height);
+    const initial = packNeighbourhoods(neighbourhoods);
+    orientNeighbourhoods(neighbourhoods, initial);
+    normalizeNeighbourhoods(neighbourhoods, initial);
+    return packNeighbourhoods(neighbourhoods);
+  };
+
+  const edgeAnchors = (source, target) => {
+    const sourceCenter = { x: source.x + nodeWidth / 2, y: source.y + nodeHeight / 2 };
+    const targetCenter = { x: target.x + nodeWidth / 2, y: target.y + nodeHeight / 2 };
+    const dx = targetCenter.x - sourceCenter.x;
+    const dy = targetCenter.y - sourceCenter.y;
+    const sourceScale = 1 / Math.max(Math.abs(dx) / (nodeWidth / 2), Math.abs(dy) / (nodeHeight / 2));
+    const targetScale = 1 / Math.max(Math.abs(dx) / (nodeWidth / 2), Math.abs(dy) / (nodeHeight / 2));
+    return {
+      source: { x: sourceCenter.x + dx * sourceScale, y: sourceCenter.y + dy * sourceScale },
+      target: { x: targetCenter.x - dx * targetScale, y: targetCenter.y - dy * targetScale }
+    };
+  };
+
+  const renderEdge = (edge) => {
+    const source = positions.get(edge.source);
+    const target = positions.get(edge.target);
+    if (!source || !target) return;
+
+    const selfRelationship = edge.source === edge.target;
+    const anchors = selfRelationship ? undefined : edgeAnchors(source, target);
+    const path = selfRelationship ?
+      `M ${source.x + nodeWidth} ${source.y + nodeHeight / 3} ` +
+        `C ${source.x + nodeWidth + 75} ${source.y - 55}, ` +
+        `${source.x + nodeWidth + 75} ${source.y + nodeHeight + 55}, ` +
+        `${source.x + nodeWidth} ${source.y + nodeHeight * 2 / 3}` :
+      `M ${anchors.source.x} ${anchors.source.y} L ${anchors.target.x} ${anchors.target.y}`;
+    const line = svgElement('path', {
+      class: `database-diagram-edge${edge.inferred ? ' inferred' : ''}`,
+      d: path,
+      'marker-end': 'url(#database-diagram-arrow)'
+    });
+    const title = svgElement('title');
+    const inference = edge.inferred ? ' (inferred)' : '';
+    title.textContent = edge.columns.map((column) =>
+      `${column.source} → ${column.target}${inference}`).join(', ');
+    line.append(title);
+    viewport.append(line);
+  };
+
+  const renderNode = (node) => {
+    const position = positions.get(node.id);
+    const group = svgElement('g', {
+      class: 'database-diagram-node',
+      transform: `translate(${position.x} ${position.y})`,
+      tabindex: '0',
+      role: 'button',
+      'aria-label': `Inspect ${node.namespace}.${node.name}`,
+      'data-node-id': node.id
+    });
+    const box = svgElement('rect', { width: nodeWidth, height: nodeHeight, rx: 7 });
+    const name = svgElement('text', { x: 12, y: 25, class: 'database-diagram-node-name' });
+    const namespace = svgElement('text', { x: 12, y: 44, class: 'database-diagram-node-namespace' });
+    const title = svgElement('title');
+    title.textContent = `${node.namespace}.${node.name}`;
+    group.append(title, box, name, namespace);
+    group.addEventListener('click', (event) => {
+      if (event.detail === 0) showDetails(node);
+    });
+    group.addEventListener('keydown', (event) => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        showDetails(node);
+      }
+    });
+    viewport.append(group);
+    truncateSvgText(name, node.name, nodeWidth - 24);
+    truncateSvgText(namespace, `${node.namespace} · ${node.kind.replaceAll('_', ' ')}`, nodeWidth - 24);
+  };
+
+  const render = () => {
+    svg.replaceChildren();
+    if (!graph.nodes.length) {
+      status.textContent = 'No relations were discovered.';
+      status.hidden = false;
+      return;
+    }
+    positions = layoutGraph();
+
+    const definitions = svgElement('defs');
+    const marker = svgElement('marker', {
+      id: 'database-diagram-arrow', viewBox: '0 0 10 10', refX: '9', refY: '5',
+      markerWidth: '7', markerHeight: '7', orient: 'auto-start-reverse'
+    });
+    marker.append(svgElement('path', { d: 'M 0 0 L 10 5 L 0 10 z' }));
+    definitions.append(marker);
+    viewport = svgElement('g', { class: 'database-diagram-viewport' });
+    svg.append(definitions, viewport);
+    graph.edges.forEach(renderEdge);
+    graph.nodes.forEach(renderNode);
+    status.hidden = true;
+    fit();
+  };
+
+  const load = async () => {
+    if (graph) return;
+
+    try {
+      const response = await fetch(dialog.dataset.graphUrl, { headers: { Accept: 'application/json' } });
+      if (!response.ok) throw new Error(`Graph request failed (${response.status})`);
+      graph = await response.json();
+      render();
+    } catch (error) {
+      status.textContent = `Unable to load the database diagram: ${error.message}`;
+    }
+  };
+
+  const close = () => {
+    dialog.hidden = true;
+    trigger.focus();
+  };
+
+  trigger.addEventListener('click', () => {
+    dialog.hidden = false;
+    search.focus();
+    load();
+  });
+  dialog.addEventListener('click', (event) => {
+    if (event.target === dialog || event.target.closest('[data-close-database-diagram]')) close();
+  });
+  dialog.querySelector('[data-diagram-fit]').addEventListener('click', fit);
+  dialog.querySelector('[data-diagram-zoom-in]').addEventListener('click', () => zoom(1.25));
+  dialog.querySelector('[data-diagram-zoom-out]').addEventListener('click', () => zoom(0.8));
+  search.addEventListener('input', () => {
+    const query = search.value.trim().toLocaleLowerCase();
+    viewport?.querySelectorAll('.database-diagram-node').forEach((element) => {
+      const node = graph.nodes.find((candidate) => candidate.id === element.dataset.nodeId);
+      const matches = query && (`${node.namespace}.${node.name}`.toLocaleLowerCase().includes(query) ||
+        node.columns.some((column) => column.name.toLocaleLowerCase().includes(query)));
+      element.classList.toggle('search-match', Boolean(matches));
+    });
+  });
+  svg.addEventListener('wheel', (event) => {
+    event.preventDefault();
+    const bounds = canvas.getBoundingClientRect();
+    zoom(event.deltaY < 0 ? 1.12 : 0.89, event.clientX - bounds.left, event.clientY - bounds.top);
+  }, { passive: false });
+  svg.addEventListener('pointerdown', (event) => {
+    if (event.button !== 0) return;
+
+    drag = { pointerId: event.pointerId, x: event.clientX, y: event.clientY,
+      transformX: transform.x, transformY: transform.y, moved: false,
+      node: event.target.closest('.database-diagram-node') };
+    svg.setPointerCapture(event.pointerId);
+  });
+  svg.addEventListener('pointermove', (event) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+    const distance = Math.hypot(event.clientX - drag.x, event.clientY - drag.y);
+    if (!drag.moved && distance < 6) return;
+
+    drag.moved = true;
+    svg.classList.add('panning');
+    transform.x = drag.transformX + event.clientX - drag.x;
+    transform.y = drag.transformY + event.clientY - drag.y;
+    setTransform();
+  });
+  const finishPointer = (event, cancelled = false) => {
+    if (!drag || event.pointerId !== drag.pointerId) return;
+
+    if (!cancelled && !drag.moved && drag.node) {
+      const node = graph.nodes.find((candidate) => candidate.id === drag.node.dataset.nodeId);
+      if (node) showDetails(node);
+    }
+    if (svg.hasPointerCapture(event.pointerId)) svg.releasePointerCapture(event.pointerId);
+    drag = undefined;
+    svg.classList.remove('panning');
+  };
+  svg.addEventListener('pointerup', (event) => finishPointer(event));
+  svg.addEventListener('pointercancel', (event) => finishPointer(event, true));
+  window.addEventListener('resize', () => { if (!dialog.hidden && graph) fit(); });
+  document.addEventListener('keydown', (event) => {
+    if (event.key === 'Escape' && !dialog.hidden) close();
+  });
+})();