archrip 0.1.7 → 0.1.9

package/dist/viewer-template/src/hooks/useDepthFilter.ts

@@ -2,7 +2,9 @@ import { useMemo } from 'react';
 import { useQueryState, parseAsInteger } from 'nuqs';
 import type { Edge } from '@xyflow/react';
 
-import type { ArchFlowNode, DepthLevel } from '../types.ts';
+import type { ArchFlowNode, ArchNodeData, DepthLevel, MemberNodeSummary } from '../types.ts';
+import { getCategoryLabel } from '../types.ts';
+import { computeLayout, NODE_WIDTH, NODE_HEIGHT, GROUP_NODE_WIDTH, GROUP_NODE_HEIGHT } from '../utils/layout.ts';
 
 function clampDepth(value: number): DepthLevel {
   if (value <= 0) return 0;
@@ -10,7 +12,11 @@ function clampDepth(value: number): DepthLevel {
   return value as DepthLevel;
 }
 
-export function useDepthFilter(nodes: ArchFlowNode[], edges: Edge[]) {
+export function useDepthFilter(
+  nodes: ArchFlowNode[],
+  edges: Edge[],
+  layoutType: 'dagre' | 'concentric',
+) {
   const [rawDepth, setRawDepth] = useQueryState('depth', parseAsInteger.withDefault(2).withOptions({ history: 'replace' }));
   const depthLevel = clampDepth(rawDepth);
 
@@ -18,20 +24,168 @@ export function useDepthFilter(nodes: ArchFlowNode[], edges: Edge[]) {
     void setRawDepth(level);
   };
 
-  const visibleNodes = useMemo(
-    () => nodes.map((node) => ({ ...node, hidden: node.data.depth > depthLevel })),
-    [nodes, depthLevel],
-  );
-
-  const visibleEdges = useMemo(() => {
-    const hiddenIds = new Set(
-      visibleNodes.filter((n) => n.hidden).map((n) => n.id),
-    );
-    return edges.map((edge) => ({
-      ...edge,
-      hidden: hiddenIds.has(edge.source) || hiddenIds.has(edge.target),
+  const { visibleNodes, visibleEdges } = useMemo(() => {
+    // depth=2 (Detail): pass-through, no merging
+    if (depthLevel === 2) {
+      return { visibleNodes: nodes, visibleEdges: edges };
+    }
+
+    // Split nodes into kept (visible at this depth) and mergeable (to be grouped)
+    const kept: ArchFlowNode[] = [];
+    const mergeable: ArchFlowNode[] = [];
+
+    for (const node of nodes) {
+      if (node.data.depth <= depthLevel) {
+        kept.push(node);
+      } else {
+        mergeable.push(node);
+      }
+    }
+
+    // Group mergeable nodes by category
+    const categoryGroups = new Map<string, ArchFlowNode[]>();
+    for (const node of mergeable) {
+      const cat = node.data.category;
+      const group = categoryGroups.get(cat);
+      if (group) {
+        group.push(node);
+      } else {
+        categoryGroups.set(cat, [node]);
+      }
+    }
+
+    // Build nodeToGroup mapping & create group nodes
+    const nodeToGroup = new Map<string, string>();
+    const groupNodes: ArchFlowNode[] = [];
+
+    for (const [category, groupMembers] of categoryGroups) {
+      if (groupMembers.length === 1) {
+        // Singleton: keep as-is, no grouping
+        kept.push(groupMembers[0]!);
+        continue;
+      }
+
+      const groupId = `__group_${category}`;
+
+      // Map all member IDs to the group ID
+      for (const member of groupMembers) {
+        nodeToGroup.set(member.id, groupId);
+      }
+
+      // Collect member summaries
+      const memberNodes: MemberNodeSummary[] = groupMembers.map((m) => ({
+        id: m.id,
+        label: m.data.label,
+        description: m.data.description,
+        filePath: m.data.filePath,
+        sourceUrl: m.data.sourceUrl,
+      }));
+
+      // Merge useCases from all members
+      const useCasesSet = new Set<string>();
+      for (const m of groupMembers) {
+        for (const uc of m.data.useCases) {
+          useCasesSet.add(uc);
+        }
+      }
+
+      // Use the most common layer from members for layout
+      const layerCounts = new Map<number, number>();
+      for (const m of groupMembers) {
+        const l = m.data.layer ?? 0;
+        layerCounts.set(l, (layerCounts.get(l) ?? 0) + 1);
+      }
+      let bestLayer = 0;
+      let bestCount = 0;
+      for (const [l, c] of layerCounts) {
+        if (c > bestCount) {
+          bestLayer = l;
+          bestCount = c;
+        }
+      }
+
+      const label = `${getCategoryLabel(category)} (${groupMembers.length})`;
+
+      const data: ArchNodeData = {
+        label,
+        category,
+        depth: 0,
+        description: `${groupMembers.length} ${getCategoryLabel(category).toLowerCase()} nodes`,
+        filePath: '',
+        sourceUrl: '',
+        layer: bestLayer,
+        useCases: [...useCasesSet],
+        isGroup: true,
+        memberCount: groupMembers.length,
+        memberNodes,
+      };
+
+      groupNodes.push({
+        id: groupId,
+        type: 'groupNode',
+        position: { x: 0, y: 0 }, // will be computed by layout
+        data,
+      });
+    }
+
+    // Combine kept + group nodes
+    const allNodes = [...kept, ...groupNodes];
+
+    // Remap edges
+    const edgeSet = new Set<string>();
+    const remappedEdges: Edge[] = [];
+
+    for (const edge of edges) {
+      const source = nodeToGroup.get(edge.source) ?? edge.source;
+      const target = nodeToGroup.get(edge.target) ?? edge.target;
+
+      // Skip self-loops (same group)
+      if (source === target) continue;
+
+      // Skip if either endpoint doesn't exist in allNodes
+      const sourceExists = allNodes.some((n) => n.id === source);
+      const targetExists = allNodes.some((n) => n.id === target);
+      if (!sourceExists || !targetExists) continue;
+
+      // Deduplicate by (source, target)
+      const key = `${source}->${target}`;
+      if (edgeSet.has(key)) continue;
+      edgeSet.add(key);
+
+      remappedEdges.push({
+        ...edge,
+        id: key,
+        source,
+        target,
+      });
+    }
+
+    // Compute layout for merged graph
+    const layoutNodes = allNodes.map((n) => ({
+      id: n.id,
+      width: n.data.isGroup ? GROUP_NODE_WIDTH : NODE_WIDTH,
+      height: n.data.isGroup ? GROUP_NODE_HEIGHT : NODE_HEIGHT,
+      layer: n.data.layer,
+    }));
+
+    const layoutEdges = remappedEdges.map((e) => ({
+      source: e.source,
+      target: e.target,
     }));
-  }, [visibleNodes, edges]);
+
+    const positions = computeLayout(layoutNodes, layoutEdges, layoutType);
+
+    // Apply computed positions
+    const positionedNodes: ArchFlowNode[] = allNodes.map((node) => {
+      const pos = positions.get(node.id);
+      if (pos) {
+        return { ...node, position: { x: pos.x, y: pos.y } };
+      }
+      return node;
+    });
+
+    return { visibleNodes: positionedNodes, visibleEdges: remappedEdges };
+  }, [nodes, edges, depthLevel, layoutType]);
 
   return { depthLevel, setDepthLevel, visibleNodes, visibleEdges };
 }

package/dist/viewer-template/src/hooks/useUseCaseFilter.ts

@@ -4,6 +4,13 @@ import type { Edge } from '@xyflow/react';
 
 import type { ArchFlowNode, UseCase } from '../types.ts';
 
+function isNodeActive(node: ArchFlowNode, activeIds: Set<string>): boolean {
+  if (node.data.isGroup && node.data.memberNodes) {
+    return node.data.memberNodes.some((m) => activeIds.has(m.id));
+  }
+  return activeIds.has(node.id);
+}
+
 export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases: UseCase[]) {
   const [selectedUseCase, setSelectedUseCase] = useQueryState('uc', parseAsString.withOptions({ history: 'replace' }));
 
@@ -22,11 +29,12 @@ export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases:
     const activeIds = new Set(uc.nodeIds);
     return nodes.map((node) => {
       if (node.hidden) return node;
+      const active = isNodeActive(node, activeIds);
       return {
         ...node,
         style: {
           ...node.style,
-          opacity: activeIds.has(node.id) ? 1 : 0.15,
+          opacity: active ? 1 : 0.15,
           transition: 'opacity 0.3s',
         },
       };
@@ -38,19 +46,28 @@ export function useUseCaseFilter(nodes: ArchFlowNode[], edges: Edge[], useCases:
     const uc = useCases.find((u) => u.id === selectedUseCase);
     if (!uc) return edges;
     const activeIds = new Set(uc.nodeIds);
+
+    // Build a set of active node IDs (including group nodes whose members are active)
+    const activeNodeIds = new Set<string>();
+    for (const node of nodes) {
+      if (isNodeActive(node, activeIds)) {
+        activeNodeIds.add(node.id);
+      }
+    }
+
     return edges.map((edge) => ({
       ...edge,
       style: {
         ...edge.style,
-        opacity: activeIds.has(edge.source) && activeIds.has(edge.target) ? 1 : 0.08,
+        opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0.08,
         transition: 'opacity 0.3s',
       },
       labelStyle: {
         ...((edge.labelStyle as Record<string, unknown>) ?? {}),
-        opacity: activeIds.has(edge.source) && activeIds.has(edge.target) ? 1 : 0,
+        opacity: activeNodeIds.has(edge.source) && activeNodeIds.has(edge.target) ? 1 : 0,
       },
     }));
-  }, [edges, selectedUseCase, useCases]);
+  }, [edges, nodes, selectedUseCase, useCases]);
 
   return { selectedUseCase, setSelectedUseCase, categories, filteredNodes, filteredEdges };
 }

package/dist/viewer-template/src/types.ts

@@ -2,14 +2,38 @@
 
 export type DepthLevel = 0 | 1 | 2;
 
-const CATEGORY_DEPTH: Record<string, DepthLevel> = {
-  controller: 0, external: 0,
-  service: 1, port: 1, job: 1,
-  adapter: 2, model: 2, dto: 2,
-};
-
-export function getDefaultDepth(category: string): DepthLevel {
-  return CATEGORY_DEPTH[category] ?? 1;
+export function computeDepths(nodes: { layer: number }[]): Map<number, DepthLevel> {
+  if (nodes.length === 0) return new Map();
+  const layers = [...new Set(nodes.map(n => n.layer))].sort((a, b) => a - b);
+
+  const map = new Map<number, DepthLevel>();
+
+  // Flat / workflow: filtering not useful — always show all
+  if (layers.length <= 2) {
+    for (const l of layers) map.set(l, 0);
+    return map;
+  }
+
+  // Exactly 3 layers: 1:1:1 mapping
+  if (layers.length === 3) {
+    map.set(layers[0], 0);
+    map.set(layers[1], 1);
+    map.set(layers[2], 2);
+    return map;
+  }
+
+  // 4+ layers: equal thirds
+  const min = layers[0];
+  const max = layers[layers.length - 1];
+  const range = max - min;
+  const t1 = min + range / 3;
+  const t2 = min + (2 * range) / 3;
+  for (const l of layers) {
+    if (l <= t1) map.set(l, 0);
+    else if (l <= t2) map.set(l, 1);
+    else map.set(l, 2);
+  }
+  return map;
 }
 
 export const DEPTH_LEVELS = [
@@ -95,6 +119,14 @@ export interface TableSchema {
   enumValues?: Record<string, Record<string, string>>;
 }
 
+export interface MemberNodeSummary {
+  id: string;
+  label: string;
+  description: string;
+  filePath: string;
+  sourceUrl: string;
+}
+
 export interface ArchNodeData {
   [key: string]: unknown;
   label: string;
@@ -103,6 +135,7 @@ export interface ArchNodeData {
   description: string;
   filePath: string;
   sourceUrl: string;
+  layer?: number;
   methods?: string[];
   useCases: string[];
   schema?: TableSchema;
@@ -110,6 +143,13 @@ export interface ArchNodeData {
   routes?: string[];
   implements?: string;
   externalService?: string;
+  isGroup?: boolean;
+  memberCount?: number;
+  memberNodes?: MemberNodeSummary[];
+}
+
+export function isGroupNode(data: ArchNodeData): boolean {
+  return data.isGroup === true;
 }
 
 export interface UseCase {

package/dist/viewer-template/src/utils/layout.ts

@@ -0,0 +1,202 @@
+import dagre from '@dagrejs/dagre';
+
+interface LayoutNode {
+  id: string;
+  width: number;
+  height: number;
+  layer?: number;
+}
+
+interface LayoutEdge {
+  source: string;
+  target: string;
+}
+
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 80;
+const GROUP_NODE_WIDTH = 200;
+const GROUP_NODE_HEIGHT = 90;
+const RANK_SEP = 160;
+const NODE_SEP = 40;
+
+// Concentric layout constants
+const RING_SPACING = 250;
+const MIN_ARC_SPACING = 200;
+
+/**
+ * Compute layout positions for a set of nodes and edges.
+ * Ported from packages/cli/src/utils/layout.ts for use in the viewer
+ * when depth-filtered graphs need re-layout after merging.
+ */
+export function computeLayout(
+  nodes: LayoutNode[],
+  edges: LayoutEdge[],
+  layoutType: 'dagre' | 'concentric',
+): Map<string, { x: number; y: number }> {
+  if (nodes.length === 0) return new Map();
+
+  if (layoutType === 'concentric') {
+    return computeConcentricLayout(nodes, edges);
+  }
+  return computeDagreLayout(nodes, edges);
+}
+
+function computeDagreLayout(
+  nodes: LayoutNode[],
+  edges: LayoutEdge[],
+): Map<string, { x: number; y: number }> {
+  const g = new dagre.graphlib.Graph();
+  g.setGraph({
+    rankdir: 'TB',
+    ranksep: RANK_SEP,
+    nodesep: NODE_SEP,
+    marginx: 40,
+    marginy: 40,
+  });
+  g.setDefaultEdgeLabel(() => ({}));
+
+  for (const node of nodes) {
+    g.setNode(node.id, {
+      width: node.width,
+      height: node.height,
+      rank: node.layer,
+    });
+  }
+
+  for (const edge of edges) {
+    g.setEdge(edge.source, edge.target);
+  }
+
+  dagre.layout(g);
+
+  const result = new Map<string, { x: number; y: number }>();
+  for (const nodeId of g.nodes()) {
+    const n = g.node(nodeId);
+    if (n) {
+      const layoutNode = nodes.find((ln) => ln.id === nodeId);
+      const w = layoutNode?.width ?? NODE_WIDTH;
+      const h = layoutNode?.height ?? NODE_HEIGHT;
+      result.set(nodeId, { x: n.x - w / 2, y: n.y - h / 2 });
+    }
+  }
+
+  return result;
+}
+
+function buildAdjacencyMap(edges: LayoutEdge[]): Map<string, Set<string>> {
+  const adj = new Map<string, Set<string>>();
+  for (const edge of edges) {
+    let srcSet = adj.get(edge.source);
+    if (!srcSet) {
+      srcSet = new Set();
+      adj.set(edge.source, srcSet);
+    }
+    srcSet.add(edge.target);
+
+    let tgtSet = adj.get(edge.target);
+    if (!tgtSet) {
+      tgtSet = new Set();
+      adj.set(edge.target, tgtSet);
+    }
+    tgtSet.add(edge.source);
+  }
+  return adj;
+}
+
+function circularMean(angles: number[]): number {
+  let sinSum = 0;
+  let cosSum = 0;
+  for (const a of angles) {
+    sinSum += Math.sin(a);
+    cosSum += Math.cos(a);
+  }
+  return Math.atan2(sinSum / angles.length, cosSum / angles.length);
+}
+
+function computeConcentricLayout(
+  nodes: LayoutNode[],
+  edges: LayoutEdge[],
+): Map<string, { x: number; y: number }> {
+  const result = new Map<string, { x: number; y: number }>();
+
+  // Group nodes by layer
+  const layerGroups = new Map<number, LayoutNode[]>();
+  for (const node of nodes) {
+    const layer = node.layer ?? 0;
+    const group = layerGroups.get(layer);
+    if (group) {
+      group.push(node);
+    } else {
+      layerGroups.set(layer, [node]);
+    }
+  }
+
+  // Sort layers descending: highest layer = ring 0 (center)
+  const sortedLayers = [...layerGroups.keys()].sort((a, b) => b - a);
+
+  const adjacency = buildAdjacencyMap(edges);
+  const placedAngles = new Map<string, number>();
+
+  for (let ringIndex = 0; ringIndex < sortedLayers.length; ringIndex++) {
+    const layer = sortedLayers[ringIndex]!;
+    const ringNodes = layerGroups.get(layer)!;
+    const count = ringNodes.length;
+
+    if (ringIndex === 0 && count === 1) {
+      const node = ringNodes[0]!;
+      placedAngles.set(node.id, 0);
+      result.set(node.id, { x: -node.width / 2, y: -node.height / 2 });
+      continue;
+    }
+
+    // Compute target angle for each node based on placed neighbors
+    const withAngle: { node: LayoutNode; targetAngle: number }[] = [];
+    const withoutAngle: LayoutNode[] = [];
+
+    for (const node of ringNodes) {
+      const neighbors = adjacency.get(node.id);
+      if (!neighbors) {
+        withoutAngle.push(node);
+        continue;
+      }
+
+      const placedNeighborAngles: number[] = [];
+      for (const n of neighbors) {
+        const angle = placedAngles.get(n);
+        if (angle !== undefined) {
+          placedNeighborAngles.push(angle);
+        }
+      }
+
+      if (placedNeighborAngles.length === 0) {
+        withoutAngle.push(node);
+      } else {
+        withAngle.push({ node, targetAngle: circularMean(placedNeighborAngles) });
+      }
+    }
+
+    withAngle.sort((a, b) => a.targetAngle - b.targetAngle);
+    const sorted = [...withAngle.map((n) => n.node), ...withoutAngle];
+
+    const baseRadius = Math.max(ringIndex * RING_SPACING, RING_SPACING / 2);
+    const circumference = count * MIN_ARC_SPACING;
+    const minRadius = circumference / (2 * Math.PI);
+    const ringRadius = Math.max(minRadius, baseRadius);
+
+    const angleStep = (2 * Math.PI) / count;
+    for (let i = 0; i < count; i++) {
+      const angle = i * angleStep - Math.PI / 2;
+      const node = sorted[i]!;
+      placedAngles.set(node.id, angle);
+
+      const x = ringRadius * Math.cos(angle);
+      const y = ringRadius * Math.sin(angle);
+
+      result.set(node.id, { x: x - node.width / 2, y: y - node.height / 2 });
+    }
+  }
+
+  return result;
+}
+
+export { NODE_WIDTH, NODE_HEIGHT, GROUP_NODE_WIDTH, GROUP_NODE_HEIGHT };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "archrip",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "description": "Generate interactive architecture diagrams from your codebase using AI agents",
   "type": "module",
   "bin": {