symbiote-ui 0.3.0-alpha.4

package/canvas/graph-explorer.js

@@ -0,0 +1,339 @@
+export const GRAPH_PATH_STYLES = ['pcb', 'bezier', 'orthogonal', 'straight'];
+
+export const GRAPH_DIRECTORY_FRAME_COLORS = [
+  'var(--sn-graph-cluster-0)',
+  'var(--sn-graph-cluster-1)',
+  'var(--sn-graph-cluster-2)',
+  'var(--sn-graph-cluster-3)',
+  'var(--sn-graph-cluster-4)',
+  'var(--sn-graph-cluster-5)',
+  'var(--sn-graph-cluster-6)',
+];
+
+export function resolveInitialGraphViewMode(urlParams) {
+  const modeParam = urlParams.get('mode');
+  return modeParam === 'flat' ? 'flat' : 'structured';
+}
+
+function setGraphButtonVisual(button, icon, label) {
+  const iconElement = button.querySelector?.('.material-symbols-outlined');
+  if (!iconElement) {
+    button.textContent = label;
+    return;
+  }
+
+  iconElement.textContent = icon;
+  const labelNode = [...(button.childNodes || [])]
+    .find((node) => node !== iconElement && node.nodeType === 3 && node.textContent.trim());
+
+  if (labelNode) {
+    labelNode.textContent = ` ${label}`;
+  } else {
+    button.append?.(` ${label}`);
+  }
+}
+
+export function renderGraphViewModeButton(button, viewMode) {
+  if (!button) return;
+  const label = viewMode === 'flat' ? 'FLAT' : 'TREE';
+  const icon = viewMode === 'flat' ? 'account_tree' : 'grid_view';
+  setGraphButtonVisual(button, icon, label);
+  if (viewMode === 'structured') {
+    button.setAttribute('data-active', '');
+  } else {
+    button.removeAttribute('data-active');
+  }
+}
+
+export function getNextGraphPathStyle(currentStyle) {
+  const index = GRAPH_PATH_STYLES.indexOf(currentStyle);
+  return GRAPH_PATH_STYLES[(index + 1) % GRAPH_PATH_STYLES.length] || 'pcb';
+}
+
+export function getGraphPathStyleDisplay(style) {
+  switch (style) {
+    case 'bezier':
+      return { icon: 'timeline', text: 'BEZIER', active: false };
+    case 'orthogonal':
+      return { icon: 'polyline', text: 'ORTHO', active: false };
+    case 'straight':
+      return { icon: 'horizontal_rule', text: 'STRAIGHT', active: false };
+    case 'pcb':
+    default:
+      return { icon: 'route', text: 'PCB', active: true };
+  }
+}
+
+export function renderGraphPathStyleButton(button, style) {
+  if (!button) return;
+  const { icon, text, active } = getGraphPathStyleDisplay(style);
+  setGraphButtonVisual(button, icon, text);
+  if (active) {
+    button.setAttribute('data-active', '');
+  } else {
+    button.removeAttribute('data-active');
+  }
+}
+
+export function addGraphDirectoryFrames({
+  editor,
+  fileMap,
+  dirFiles,
+  positions,
+  FrameClass,
+  colors = GRAPH_DIRECTORY_FRAME_COLORS,
+}) {
+  if (!dirFiles || dirFiles.size < 2) return;
+
+  const padding = 30;
+  const nodeWidth = 120;
+  const nodeHeight = 80;
+  let colorIdx = 0;
+
+  for (const [dir, files] of dirFiles) {
+    if (files.length < 2) continue;
+
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    let hasPositions = false;
+
+    for (const file of files) {
+      const nodeId = fileMap.get(file);
+      if (!nodeId) continue;
+      const pos = positions[nodeId];
+      if (!pos) continue;
+      hasPositions = true;
+
+      if (pos.x < minX) minX = pos.x;
+      if (pos.y < minY) minY = pos.y;
+      if (pos.x + nodeWidth > maxX) maxX = pos.x + nodeWidth;
+      if (pos.y + nodeHeight > maxY) maxY = pos.y + nodeHeight;
+    }
+
+    if (!hasPositions) continue;
+
+    const dirLabel = dir.replace(/\/$/, '').split('/').pop() || 'root';
+    const color = colors[colorIdx % colors.length];
+    colorIdx++;
+
+    try {
+      const frame = new FrameClass(dirLabel, {
+        x: minX - padding,
+        y: minY - padding,
+        width: (maxX - minX) + padding * 2,
+        height: (maxY - minY) + padding * 2,
+        color,
+      });
+      editor.addFrame(frame);
+    } catch {
+      // Invalid frame geometry should not prevent rendering the graph.
+    }
+  }
+}
+
+export function setGraphLayerVisible(canvas, layer, visible) {
+  if (!canvas) return;
+
+  if (layer === 'zones') {
+    const frames = canvas.querySelectorAll('graph-frame');
+    for (const frame of frames) {
+      frame.style.display = visible ? '' : 'none';
+      frame.hidden = !visible;
+    }
+  } else if (layer === 'vias') {
+    if (visible) {
+      canvas.removeAttribute('data-hide-vias');
+    } else {
+      canvas.setAttribute('data-hide-vias', '');
+    }
+  }
+}
+
+export function toggleGraphLayerButtonState(button) {
+  const isActive = button.hasAttribute('data-active');
+  if (isActive) {
+    button.removeAttribute('data-active');
+    button.setAttribute('data-hidden', '');
+  } else {
+    button.setAttribute('data-active', '');
+    button.removeAttribute('data-hidden');
+  }
+  return !isActive;
+}
+
+export function buildFlatPathHash(path, params = new URLSearchParams()) {
+  const nextParams = new URLSearchParams(params);
+  const hash = path ? `#graph/${path}` : '#graph';
+
+  if (!path) {
+    nextParams.delete('focus');
+  }
+
+  const query = nextParams.toString();
+  return query ? `${hash}?${query}` : hash;
+}
+
+export function selectGraphLabelMode(buttons, selectedButton, canvas) {
+  for (const button of buttons) {
+    button.removeAttribute('data-active');
+  }
+  selectedButton.setAttribute('data-active', '');
+
+  const mode = selectedButton.getAttribute('data-mode');
+  if (mode) canvas?.setAttribute('data-label-mode', mode);
+
+  return mode;
+}
+
+export function getFileSelectionNodeId(filePath) {
+  return filePath?.endsWith('/') ? filePath.replace(/\/$/, '') : filePath;
+}
+
+export function shouldClearFocusOnSelection({ selectedNodes = [], initialViewRestored, hash = '' }) {
+  return selectedNodes.length === 0 && Boolean(initialViewRestored) && hash.includes('focus=');
+}
+
+export function resolveFlatHashChange(hash) {
+  if (!hash.startsWith('#graph')) return null;
+
+  const [hashBase, queryStr] = hash.replace('#', '').split('?');
+  const hashParams = hashBase.split('/');
+  if (hashParams[0] === 'graph') hashParams.shift();
+
+  const path = hashParams.join('/');
+  const params = new URLSearchParams(queryStr || '');
+  const focus = params.get('focus');
+
+  return {
+    path,
+    focus: focus ? decodeURIComponent(focus) : null,
+  };
+}
+
+export function getFlatFocusRestoreKey({ path = '', focus = null } = {}) {
+  return `${path || ''}::${focus || ''}`;
+}
+
+export function shouldRestoreFlatFocus({ lastKey = null, path = '', focus = null } = {}) {
+  if (!focus) return false;
+  return getFlatFocusRestoreKey({ path, focus }) !== lastKey;
+}
+
+export function getGraphHashNavigationState(hash = '') {
+  const hasPath = /^#graph\//.test(hash);
+  const hasParams = hash.includes('?');
+
+  return {
+    hasPath,
+    hasParams,
+    shouldRestore: hasPath || hasParams,
+  };
+}
+
+export function shouldFitForceLayoutInitialTick(hash = '') {
+  return !(hash.includes('?') || hash.includes('focus='));
+}
+
+export function resolveGraphNodeClick({ nodeId, path, symbol, depth = 0, hash = '' }) {
+  if (symbol) {
+    return {
+      hashUpdates: [['symbol', symbol.name]],
+      fileEvent: symbol.file ? { path: symbol.file, source: 'canvas' } : null,
+    }
+  }
+
+  if (!path) return null
+
+  if (depth === 0) {
+    return {
+      hashUpdates: [['focus', path], ['in', null]],
+      fileEvent: { path, source: 'canvas' },
+    }
+  }
+
+  const drillBase = hash.split('?')[0]
+  const drillPath = drillBase.replace('#graph/', '')
+  const relativeName = path.startsWith(drillPath) ? path.slice(drillPath.length) : path
+
+  return {
+    hashUpdates: [['focus', relativeName], ['in', '1']],
+    fileEvent: { path, source: 'canvas' },
+  }
+}
+
+export function resolveToolbarAction({ action, nodeId, viewMode, path, symbol }) {
+  if (action === 'explore') {
+    return viewMode === 'flat'
+      ? { type: 'fly-to-node', nodeId }
+      : { type: 'explore-node', nodeId }
+  }
+
+  if (action === 'view-code') {
+    const file = viewMode === 'flat' ? nodeId : (symbol ? symbol.file : path)
+    return file ? { type: 'open-file', hash: `#explorer/${file}` } : null
+  }
+
+  if (action === 'enter' && viewMode === 'flat') {
+    return { type: 'drill-node', nodeId }
+  }
+
+  return null
+}
+
+export function renderClusterPanel({
+  panel,
+  toggle,
+  clusters = [],
+  viewMode,
+  isOpen,
+  doc = typeof document !== 'undefined' ? document : null,
+}) {
+  if (!panel || !doc) return
+  let hasFlatLegend = clusters.length > 0 && viewMode === 'flat'
+
+  if (toggle) {
+    toggle.hidden = !hasFlatLegend
+    toggle.toggleAttribute('data-active', hasFlatLegend && isOpen)
+    toggle.setAttribute(
+      'title',
+      isOpen ? 'Hide semantic color legend' : 'Show semantic color legend',
+    )
+  }
+
+  if (!hasFlatLegend || !isOpen) {
+    panel.hidden = true
+    panel.replaceChildren()
+    return
+  }
+
+  panel.hidden = false
+  panel.replaceChildren(...clusters.map((cluster) => {
+    let row = doc.createElement('div')
+    let swatch = doc.createElement('span')
+    let label = doc.createElement('span')
+    let pathCount = cluster.paths.length
+
+    row.className = 'pcb-cluster-row'
+    row.title = cluster.description || `${cluster.label}: ${pathCount} paths`
+    swatch.className = 'pcb-cluster-swatch'
+    swatch.style.background = cluster.color
+    label.className = 'pcb-cluster-label'
+    label.textContent = cluster.label
+    row.replaceChildren(swatch, label)
+    return row
+  }))
+}
+
+export function renderGraphStats(statsEl, items, doc = typeof document !== 'undefined' ? document : null) {
+  if (!statsEl || !doc) return
+  statsEl.replaceChildren(...items.map(([value, label]) => {
+    let item = doc.createElement('span')
+    let valueEl = doc.createElement('span')
+    valueEl.className = 'graph-explorer-stat-val'
+    valueEl.textContent = String(value)
+    item.append(valueEl, ` ${label}`)
+    return item
+  }))
+}

package/canvas/graph-layout.js

@@ -0,0 +1,148 @@
+export function getGraphCacheKey(isStructured) {
+  return isStructured ? 'structured' : 'flat';
+}
+
+export function getOrBuildGraph({
+  cache,
+  skeleton,
+  isStructured,
+  buildStructuredGraphFn,
+  buildFileGraphFn,
+}) {
+  const cacheKey = getGraphCacheKey(isStructured);
+  const cached = cache[cacheKey];
+
+  if (cached?.skeleton === skeleton) {
+    return { cacheKey, cached: true, graph: cached };
+  }
+
+  const graph = isStructured
+    ? buildStructuredGraphFn(skeleton)
+    : buildFileGraphFn(skeleton);
+
+  if (!graph.symbolMap) graph.symbolMap = new Map();
+  cache[cacheKey] = { skeleton, ...graph };
+
+  return { cacheKey, cached: false, graph: cache[cacheKey] };
+}
+
+export function getDrillableFiles(symbolMap = new Map()) {
+  return new Set([...symbolMap.values()].map((symbol) => symbol.file));
+}
+
+export function findForceNodeGroup(groups = {}, nodeId) {
+  return Object.entries(groups).find(([, ids]) => ids.includes(nodeId))?.[0] ?? null;
+}
+
+export function getForceLayoutOptions(nodeCount, { continuous = false } = {}) {
+  const options = {
+    chargeStrength: nodeCount > 500 ? -300 : -150,
+    linkDistance: nodeCount > 500 ? 100 : 150,
+  };
+
+  if (continuous) {
+    options.nodeWidth = 260;
+    options.nodeHeight = 40;
+    options.mode = 'continuous';
+    options.brownian = 0;
+  }
+
+  return options;
+}
+
+export function createForceLayoutPayload({
+  nodes,
+  connections,
+  positions = {},
+  groups = {},
+  nodeSizes = {},
+  continuous = false,
+}) {
+  return {
+    nodes: nodes.map((node) => ({
+      id: node.id,
+      x: positions[node.id]?.x ?? 0,
+      y: positions[node.id]?.y ?? 0,
+      group: findForceNodeGroup(groups, node.id),
+      w: nodeSizes[node.id]?.w || node.params?.calculatedWidth || 260,
+      h: nodeSizes[node.id]?.h || node.params?.calculatedHeight || 60,
+    })),
+    edges: connections.map((connection) => ({
+      from: connection.from,
+      to: connection.to,
+    })),
+    groups: groups || {},
+    options: getForceLayoutOptions(nodes.length, { continuous }),
+  };
+}
+
+export function computeInitialGraphPositions({
+  editor,
+  isStructured = false,
+  dirFiles = null,
+  dirNodeMap = new Map(),
+  groups = {},
+  computeTreeLayoutFn,
+  random = Math.random,
+}) {
+  if (isStructured && dirFiles) {
+    if (typeof computeTreeLayoutFn !== 'function') {
+      throw new TypeError('computeTreeLayoutFn is required for structured graph layout');
+    }
+    const dirPaths = {};
+    const rootNodeIds = new Set(editor.getNodes().map((node) => node.id));
+    for (const [dir, nodeId] of dirNodeMap.entries()) {
+      if (rootNodeIds.has(nodeId)) {
+        dirPaths[nodeId] = dir;
+      }
+    }
+
+    return computeTreeLayoutFn(editor, {
+      dirPaths,
+      nodeWidth: 250,
+      nodeHeight: 100,
+      gapX: 40,
+      gapY: 60,
+      startX: 60,
+      startY: 60,
+    });
+  }
+
+  const allNodes = [...editor.getNodes()];
+  const totalNodes = allNodes.length;
+  const groupEntries = Object.entries(groups);
+  const positions = {};
+
+  if (groupEntries.length > 1) {
+    const globalRadius = Math.sqrt(totalNodes) * 80;
+    let groupIdx = 0;
+    for (const [, memberIds] of groupEntries) {
+      const angle = (2 * Math.PI * groupIdx) / groupEntries.length;
+      const radius = globalRadius * (0.3 + 0.7 * (groupIdx / groupEntries.length));
+      const cx = Math.cos(angle) * radius;
+      const cy = Math.sin(angle) * radius;
+      const memberRadius = Math.sqrt(memberIds.length) * 60;
+      for (let memberIdx = 0; memberIdx < memberIds.length; memberIdx++) {
+        const memberAngle = (2 * Math.PI * memberIdx) / memberIds.length;
+        positions[memberIds[memberIdx]] = {
+          x: cx + Math.cos(memberAngle) * memberRadius + (random() - 0.5) * 20,
+          y: cy + Math.sin(memberAngle) * memberRadius + (random() - 0.5) * 20,
+        };
+      }
+      groupIdx++;
+    }
+  }
+
+  for (const node of allNodes) {
+    if (!positions[node.id]) {
+      const angle = random() * 2 * Math.PI;
+      const radius = Math.sqrt(totalNodes) * 50 + random() * 200;
+      positions[node.id] = {
+        x: Math.cos(angle) * radius,
+        y: Math.sin(angle) * radius,
+      };
+    }
+  }
+
+  return positions;
+}

package/canvas/graph-model.js

@@ -0,0 +1,68 @@
+function normalizeNode(rawNode) {
+  if (!rawNode || typeof rawNode !== 'object') return null;
+  const id = String(rawNode.id || '').trim();
+  if (!id) return null;
+  const children = Array.isArray(rawNode.children) ? rawNode.children.map(String) : [];
+  return {
+    ...rawNode,
+    id,
+    label: rawNode.label == null ? id : String(rawNode.label),
+    type: rawNode.type || 'data',
+    parentId: rawNode.parentId == null ? null : String(rawNode.parentId),
+    isGroup: Boolean(rawNode.isGroup),
+    children,
+  };
+}
+
+function normalizeEdge(rawEdge) {
+  if (!rawEdge || typeof rawEdge !== 'object') return null;
+  const rawFrom = rawEdge.from ?? rawEdge.source?.node ?? rawEdge.source?.id ?? rawEdge.source;
+  const rawTo = rawEdge.to ?? rawEdge.target?.node ?? rawEdge.target?.id ?? rawEdge.target;
+  const from = String(rawFrom || '').trim();
+  const to = String(rawTo || '').trim();
+  if (!from || !to) return null;
+  return { ...rawEdge, from, to };
+}
+
+export function normalizeCanvasGraphModel(model = {}) {
+  const nodes = [];
+  const nodesById = new Map();
+  const edges = [];
+  const rootNodes = [];
+
+  for (const rawNode of model.nodes || []) {
+    const node = normalizeNode(rawNode);
+    if (!node || nodesById.has(node.id)) continue;
+    nodes.push(node);
+    nodesById.set(node.id, node);
+  }
+
+  const rawEdges = Array.isArray(model.connections) ? model.connections : model.edges || [];
+  for (const rawEdge of rawEdges) {
+    const edge = normalizeEdge(rawEdge);
+    if (!edge || !nodesById.has(edge.from) || !nodesById.has(edge.to)) continue;
+    edges.push(edge);
+  }
+
+  const explicitRoots = Array.isArray(model.rootNodes) ? model.rootNodes.map(String) : [];
+  for (const id of explicitRoots) {
+    if (nodesById.has(id) && !rootNodes.includes(id)) rootNodes.push(id);
+  }
+
+  if (rootNodes.length === 0) {
+    for (const node of nodes) {
+      if (!node.parentId || !nodesById.has(node.parentId)) rootNodes.push(node.id);
+    }
+  }
+
+  return { nodes, edges, rootNodes };
+}
+
+export function createCanvasGraphStore(model = {}) {
+  const normalized = normalizeCanvasGraphModel(model);
+  return {
+    nodes: new Map(normalized.nodes.map((node) => [node.id, node])),
+    edges: normalized.edges,
+    rootNodes: normalized.rootNodes,
+  };
+}