codebaseiq 0.1.0 → 0.2.0

package/ui/view/map.js

@@ -0,0 +1,424 @@
+import cytoscape from '/vendor/cytoscape.mjs';
+import { el, plural } from '/assets/api.js';
+
+const LABEL_LIMIT = 30;
+const SAMPLE_LIMIT = 5;
+const LARGE_GRAPH = 150;
+const FILE_FONT = 12;
+const DIRECTORY_FONT = 13;
+const MAX_FIT_ZOOM = 1.4;
+
+function token(name) {
+  return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+}
+
+function palette() {
+  return {
+    font: token('--font-ui'),
+    styleFont: token('--font-ui').replaceAll("'", '"'),
+    text: token('--map-text'),
+    muted: token('--map-muted'),
+    dirFill: token('--map-dir-fill'),
+    dirBorder: token('--map-dir-border'),
+    fileFill: token('--map-file-fill'),
+    fileBorder: token('--map-file-border'),
+    externalFill: token('--map-external-fill'),
+    externalBorder: token('--map-external-border'),
+    edge: token('--map-edge'),
+    cycle: token('--map-cycle'),
+    accent: token('--map-accent'),
+  };
+}
+
+function buildStyle(colors) {
+  return [
+    {
+      selector: 'node',
+      style: {
+        label: 'data(label)',
+        color: colors.text,
+        'font-family': colors.styleFont,
+        'font-size': FILE_FONT,
+        'text-valign': 'center',
+        'text-halign': 'center',
+        'text-wrap': 'wrap',
+        shape: 'round-rectangle',
+        width: 'data(boxWidth)',
+        height: 'data(boxHeight)',
+        'background-color': colors.fileFill,
+        'border-width': 1,
+        'border-color': colors.fileBorder,
+      },
+    },
+    {
+      selector: 'node.directory',
+      style: {
+        'font-size': DIRECTORY_FONT,
+        'font-weight': 600,
+        'background-color': colors.dirFill,
+        'border-width': 2,
+        'border-color': colors.dirBorder,
+      },
+    },
+    {
+      selector: 'node.external',
+      style: {
+        color: colors.muted,
+        'background-color': colors.externalFill,
+        'border-color': colors.externalBorder,
+        'border-style': 'dashed',
+      },
+    },
+    {
+      selector: 'node.current, node:selected, node.hover',
+      style: { 'border-color': colors.accent, 'border-width': 3 },
+    },
+    {
+      selector: 'edge',
+      style: {
+        width: 'data(width)',
+        'curve-style': 'bezier',
+        'line-color': colors.edge,
+        'target-arrow-color': colors.edge,
+        'target-arrow-shape': 'triangle',
+        'arrow-scale': 1,
+        opacity: 0.75,
+      },
+    },
+    {
+      selector: 'edge.cycle',
+      style: { 'line-color': colors.cycle, 'target-arrow-color': colors.cycle, opacity: 0.95 },
+    },
+    { selector: 'edge.hover', style: { opacity: 1, 'z-index': 10 } },
+  ];
+}
+
+function shorten(name) {
+  return name.length > LABEL_LIMIT ? `${name.slice(0, LABEL_LIMIT - 1)}…` : name;
+}
+
+const measureContext = document.createElement('canvas').getContext('2d');
+
+/** Size a node box around its label; cytoscape's own label sizing is deprecated. */
+function boxFor(node, label, font) {
+  const directory = node.kind === 'directory';
+  const size = directory ? DIRECTORY_FONT : FILE_FONT;
+  measureContext.font = `${directory ? 600 : 400} ${size}px ${font}`;
+  const lines = label.split('\n');
+  const textWidth = Math.max(...lines.map((line) => measureContext.measureText(line).width));
+  return {
+    boxWidth: Math.ceil(textWidth) + (directory ? 30 : 18),
+    boxHeight: Math.ceil(lines.length * size * 1.3) + (directory ? 20 : 12),
+  };
+}
+
+function nodeLabel(node) {
+  if (node.kind === 'external')
+    return node.name.length > LABEL_LIMIT ? `…${node.name.slice(1 - LABEL_LIMIT)}` : node.name;
+  if (node.kind === 'directory') {
+    const files = node.fileCount === null ? '' : `\n${plural(node.fileCount, 'file')}`;
+    return `${shorten(node.name)}/${files}`;
+  }
+  return shorten(node.name);
+}
+
+/** Seed positions on rings so the force layout starts from the same state every time. */
+function seedPositions(nodes) {
+  const inner = nodes.filter((node) => node.kind !== 'external').sort((a, b) => a.id.localeCompare(b.id));
+  const outer = nodes.filter((node) => node.kind === 'external').sort((a, b) => a.id.localeCompare(b.id));
+  const positions = new Map();
+  const place = (ring, radius) => {
+    ring.forEach((node, index) => {
+      const angle = (2 * Math.PI * index) / Math.max(ring.length, 1);
+      positions.set(node.id, { x: Math.cos(angle) * radius, y: Math.sin(angle) * radius });
+    });
+  };
+  place(inner, 60 + inner.length * 22);
+  place(outer, 140 + inner.length * 22 + outer.length * 14);
+  return positions;
+}
+
+function elementsFor(scope, outgoing, incoming, font) {
+  const positions = seedPositions(scope.nodes);
+  const nodes = scope.nodes.map((node) => {
+    const label = nodeLabel(node);
+    return {
+      group: 'nodes',
+      classes: node.kind,
+      position: positions.get(node.id),
+      data: {
+        id: node.id,
+        kind: node.kind,
+        path: node.path,
+        isFile: node.isFile,
+        internalEdges: node.internalEdges,
+        cycle: node.cycle,
+        name: node.name,
+        label,
+        ...boxFor(node, label, font),
+        fileCount: node.fileCount,
+        outgoing: outgoing.get(node.id) ?? 0,
+        incoming: incoming.get(node.id) ?? 0,
+      },
+    };
+  });
+  const edges = scope.edges.map((edge) => ({
+    group: 'edges',
+    classes: edge.cycle ? 'cycle' : '',
+    data: {
+      id: edge.id,
+      source: edge.source,
+      target: edge.target,
+      count: edge.count,
+      cycle: edge.cycle,
+      samples: edge.samples,
+      width: Math.min(1.2 + Math.log2(edge.count + 1) * 1.3, 9),
+    },
+  }));
+  return [...nodes, ...edges];
+}
+
+function totals(edges) {
+  const outgoing = new Map();
+  const incoming = new Map();
+  for (const edge of edges) {
+    outgoing.set(edge.source, (outgoing.get(edge.source) ?? 0) + edge.count);
+    incoming.set(edge.target, (incoming.get(edge.target) ?? 0) + edge.count);
+  }
+  return { outgoing, incoming };
+}
+
+/** Move external nodes onto an ellipse just outside the box that encloses everything else. */
+function pushExternalsOutward(cy) {
+  const externals = cy.nodes('.external');
+  const internals = cy.nodes().not('.external');
+  if (externals.empty() || internals.empty()) return;
+  const box = internals.boundingBox();
+  const centerX = (box.x1 + box.x2) / 2;
+  const centerY = (box.y1 + box.y2) / 2;
+  const radiusX = box.w / 2 + 80;
+  const radiusY = box.h / 2 + 60;
+  externals.forEach((node, index) => {
+    const position = node.position();
+    let dx = position.x - centerX;
+    let dy = position.y - centerY;
+    if (Math.hypot(dx, dy) < 1) {
+      const angle = (2 * Math.PI * index) / externals.length;
+      dx = Math.cos(angle);
+      dy = Math.sin(angle);
+    }
+    const scale = 1 / Math.hypot(dx / radiusX, dy / radiusY);
+    node.position({ x: centerX + dx * scale, y: centerY + dy * scale });
+  });
+}
+
+export function createMap(container, handlers) {
+  const canvas = el('div', { class: 'map-canvas', role: 'img' });
+  const tooltip = el('div', { class: 'map-tooltip', role: 'tooltip', hidden: true });
+  const message = el('div', { class: 'map-message', hidden: true });
+  const controls = el('div', { class: 'map-controls', role: 'group', 'aria-label': 'Map controls' });
+  container.replaceChildren(canvas, tooltip, message, controls);
+
+  const colorScheme = window.matchMedia('(prefers-color-scheme: dark)');
+  let cy = null;
+  let unit = 'references';
+
+  const hideTooltip = () => {
+    tooltip.hidden = true;
+  };
+
+  const restyle = () => {
+    if (cy) cy.style(buildStyle(palette()));
+  };
+  colorScheme.addEventListener('change', restyle);
+
+  function fitView() {
+    cy.fit(undefined, 30);
+    if (cy.zoom() > MAX_FIT_ZOOM) {
+      cy.zoom(MAX_FIT_ZOOM);
+      cy.center();
+    }
+  }
+
+  let fittedWidth = 0;
+  let fittedHeight = 0;
+  const rememberSize = () => {
+    fittedWidth = canvas.clientWidth;
+    fittedHeight = canvas.clientHeight;
+  };
+  // A pane that changes size (the focus view widens the detail pane) gets the whole graph back in view.
+  const resizeObserver = new ResizeObserver(() => {
+    if (!cy) return;
+    cy.resize();
+    if (Math.abs(canvas.clientWidth - fittedWidth) > 8 || Math.abs(canvas.clientHeight - fittedHeight) > 8) {
+      fitView();
+      rememberSize();
+    }
+  });
+  resizeObserver.observe(canvas);
+
+  const addControl = (label, glyph, action) => {
+    controls.append(
+      el(
+        'button',
+        { type: 'button', class: 'icon-button', 'aria-label': label, title: label, on: { click: action } },
+        glyph,
+      ),
+    );
+  };
+  addControl('Zoom in', '+', () => cy?.zoom({ level: cy.zoom() * 1.3, renderedPosition: center() }));
+  addControl('Zoom out', '−', () => cy?.zoom({ level: cy.zoom() / 1.3, renderedPosition: center() }));
+  addControl('Fit map to view', '⤢', () => cy?.fit(undefined, 30));
+
+  function center() {
+    return { x: canvas.clientWidth / 2, y: canvas.clientHeight / 2 };
+  }
+
+  function showTooltip(content, point) {
+    tooltip.replaceChildren(...content);
+    tooltip.hidden = false;
+    const left = Math.min(point.x + 14, Math.max(canvas.clientWidth - tooltip.offsetWidth - 8, 8));
+    const top = Math.min(point.y + 14, Math.max(canvas.clientHeight - tooltip.offsetHeight - 8, 8));
+    tooltip.style.left = `${Math.max(left, 8)}px`;
+    tooltip.style.top = `${Math.max(top, 8)}px`;
+  }
+
+  function nodeTip(data) {
+    const lines = [el('strong', null, data.path || data.name), el('div', { class: 'muted' }, data.kind)];
+    if (data.kind === 'directory' && data.fileCount !== null) {
+      lines.push(el('div', null, plural(data.fileCount, 'file')));
+    }
+    lines.push(el('div', null, `${data.outgoing} outgoing ${unit}, ${data.incoming} incoming`));
+    if (data.internalEdges > 0) lines.push(el('div', null, `${plural(data.internalEdges, 'edge')} inside`));
+    if (data.cycle !== null) lines.push(el('div', { class: 'cycle-flag' }, `In dependency cycle ${data.cycle}`));
+    return lines;
+  }
+
+  function edgeTip(edge) {
+    const lines = [
+      el('strong', null, `${edge.source().data('name')} → ${edge.target().data('name')}`),
+      el('div', null, `${plural(edge.data('count'), unit === 'imports' ? 'import' : 'reference')}`),
+    ];
+    if (edge.data('cycle')) lines.push(el('div', { class: 'cycle-flag' }, 'Part of a dependency cycle'));
+    const samples = edge.data('samples');
+    if (samples.length > 0) {
+      lines.push(
+        el('div', { class: 'muted' }, 'Sample file pairs'),
+        el(
+          'ul',
+          { class: 'tip-list' },
+          samples.slice(0, SAMPLE_LIMIT).map((sample) => el('li', null, `${sample.from} → ${sample.to}`)),
+          samples.length > SAMPLE_LIMIT
+            ? el('li', { class: 'muted' }, `and ${samples.length - SAMPLE_LIMIT} more`)
+            : null,
+        ),
+      );
+    }
+    return lines;
+  }
+
+  function wire(instance) {
+    instance.on('tap', 'node.file', (event) => handlers.onFile(event.target.data('path')));
+    instance.on('tap', 'node.external', (event) => handlers.onExternal(event.target.data()));
+    instance.on('dbltap', 'node.directory', (event) => handlers.onDrill(event.target.data('path')));
+    instance.on('mouseover', 'node, edge', (event) => {
+      const target = event.target;
+      target.addClass('hover');
+      if (target.isNode()) target.connectedEdges().addClass('hover');
+      showTooltip(target.isNode() ? nodeTip(target.data()) : edgeTip(target), event.renderedPosition);
+    });
+    instance.on('mouseout', 'node, edge', (event) => {
+      event.target.removeClass('hover');
+      if (event.target.isNode()) event.target.connectedEdges().removeClass('hover');
+      hideTooltip();
+    });
+    instance.on('pan zoom drag', hideTooltip);
+  }
+
+  function destroyGraph() {
+    hideTooltip();
+    if (cy) {
+      cy.destroy();
+      cy = null;
+    }
+  }
+
+  function describe(scope) {
+    const counts = { directory: 0, file: 0, external: 0 };
+    for (const node of scope.nodes) counts[node.kind] += 1;
+    const cycles = scope.edges.filter((edge) => edge.cycle).length;
+    return (
+      `Dependency map of ${scope.path || 'the project root'}: ${plural(counts.directory, 'directory')}, ` +
+      `${plural(counts.file, 'file')}, ${plural(counts.external, 'external node')}, ` +
+      `${plural(scope.edges.length, 'dependency edge')}, ${plural(cycles, 'cycle edge')}. ` +
+      'The details panel and breadcrumbs offer the same navigation as lists.'
+    );
+  }
+
+  function showNotice(content) {
+    destroyGraph();
+    canvas.removeAttribute('aria-label');
+    message.replaceChildren(content);
+    message.hidden = false;
+  }
+
+  return {
+    render(scope) {
+      destroyGraph();
+      message.hidden = true;
+      unit = scope.basis;
+      canvas.setAttribute('aria-label', describe(scope));
+      if (scope.nodes.length === 0) {
+        showNotice(el('p', null, 'No files or directories to draw in this scope.'));
+        return;
+      }
+      const { outgoing, incoming } = totals(scope.edges);
+      const colors = palette();
+      cy = cytoscape({
+        container: canvas,
+        elements: elementsFor(scope, outgoing, incoming, colors.font),
+        style: buildStyle(colors),
+        minZoom: 0.15,
+        maxZoom: 3,
+        boxSelectionEnabled: false,
+        autounselectify: false,
+      });
+      cy.layout({
+        name: 'cose',
+        animate: false,
+        fit: true,
+        randomize: false,
+        padding: 30,
+        nodeDimensionsIncludeLabels: true,
+        idealEdgeLength: 70,
+        nodeRepulsion: 20000,
+        nodeOverlap: 20,
+        gravity: 1.2,
+        componentSpacing: 40,
+        numIter: scope.nodes.length > LARGE_GRAPH ? 300 : 1000,
+      }).run();
+      pushExternalsOutward(cy);
+      fitView();
+      rememberSize();
+      wire(cy);
+    },
+
+    select(path) {
+      if (!cy) return;
+      cy.nodes().removeClass('current');
+      if (path)
+        cy.nodes()
+          .filter((node) => node.data('path') === path && node.data('kind') !== 'external')
+          .addClass('current');
+    },
+
+    showNotice,
+
+    destroy() {
+      destroyGraph();
+      resizeObserver.disconnect();
+      colorScheme.removeEventListener('change', restyle);
+      container.replaceChildren();
+    },
+  };
+}