fix: Explorer depth toggle, hover edge labels, and view tab filtering

- Remap depth buttons (Overview=1, Detailed=3, Full=Infinity) so
  Overview shows core architecture instead of isolated actor nodes
- Move edge labels to hover-only with tooltip styling and wider hit
  area to eliminate label overlap/clutter
- Filter edges by selectedView: Architecture=all, Data Flow=data_flow,
  Dependencies=dependency+api_call, with orphan node pruning

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: 2 people

src/app/[owner]/[repo]/explore/page.tsx

@@ -122,9 +122,8 @@ export default function ExplorePage() {
   const mergedDiagram = useMemo<DiagramData | null>(() => {
     if (allDiagrams.length === 0) return null;
 
-    // For now merge all diagrams. In future, filter by view type.
     const mergedNodes = new Map<string, DiagramData['nodes'][0]>();
-    const mergedEdges: DiagramData['edges'] = [];
+    const allEdges: DiagramData['edges'] = [];
     const edgeKeys = new Set<string>();
 
     for (const diagram of allDiagrams) {
@@ -137,18 +136,47 @@ export default function ExplorePage() {
         const key = `${edge.source}->${edge.target}:${edge.type}`;
         if (!edgeKeys.has(key)) {
           edgeKeys.add(key);
-          mergedEdges.push(edge);
+          allEdges.push(edge);
         }
       }
     }
 
+    // Filter edges based on selected view
+    let filteredEdges: DiagramData['edges'];
+    switch (selectedView) {
+      case 'dataflow':
+        filteredEdges = allEdges.filter((e) => e.type === 'data_flow');
+        break;
+      case 'dependencies':
+        filteredEdges = allEdges.filter((e) => e.type === 'dependency' || e.type === 'api_call');
+        break;
+      default: // architecture — show everything
+        filteredEdges = allEdges;
+        break;
+    }
+
+    // For filtered views, prune orphan nodes (keep connected + depth-0 for context)
+    let finalNodes: DiagramData['nodes'][0][];
+    if (selectedView !== 'architecture') {
+      const connectedIds = new Set<string>();
+      for (const edge of filteredEdges) {
+        connectedIds.add(edge.source);
+        connectedIds.add(edge.target);
+      }
+      finalNodes = Array.from(mergedNodes.values()).filter(
+        (n) => connectedIds.has(n.id) || n.depth === 0,
+      );
+    } else {
+      finalNodes = Array.from(mergedNodes.values());
+    }
+
     return {
-      nodes: Array.from(mergedNodes.values()),
-      edges: mergedEdges,
+      nodes: finalNodes,
+      edges: filteredEdges,
       mermaidSource: allDiagrams[0]?.mermaidSource ?? '',
       diagramType: allDiagrams[0]?.diagramType ?? 'flowchart',
     };
-  }, [allDiagrams]);
+  }, [allDiagrams, selectedView]);
 
   // Look up the selected node info for the detail panel
   const selectedNodeInfo = useMemo(() => {
@@ -290,9 +318,9 @@ export default function ExplorePage() {
       <div className="shrink-0 flex items-center justify-center px-4 py-2 border-t border-gray-200 dark:border-zinc-800 bg-white dark:bg-zinc-900">
         <div className="flex items-center gap-1 bg-gray-100 dark:bg-zinc-800 rounded-lg p-0.5">
           {[
-            { depth: 0, label: 'Overview' },
-            { depth: 1, label: 'Detailed' },
-            { depth: 2, label: 'Full' },
+            { depth: 1, label: 'Overview' },
+            { depth: 3, label: 'Detailed' },
+            { depth: Infinity, label: 'Full' },
           ].map(({ depth, label }) => (
             <button
               key={depth}

src/components/explorer/ExplorerEdge.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import {
   BaseEdge,
   EdgeLabelRenderer,
@@ -16,10 +16,13 @@ function ExplorerEdgeComponent({
   targetY,
   sourcePosition,
   targetPosition,
-  label,
   style,
   animated,
+  data,
 }: EdgeProps) {
+  const [hovered, setHovered] = useState(false);
+  const label = (data as Record<string, unknown> | undefined)?.label as string | undefined;
+
   const [edgePath, labelX, labelY] = getBezierPath({
     sourceX,
     sourceY,
@@ -29,20 +32,35 @@ function ExplorerEdgeComponent({
     targetPosition,
   });
 
+  const edgeStyle = hovered
+    ? { ...style, strokeWidth: 2.5 }
+    : style;
+
   return (
     <>
+      {/* Invisible wider path for easier hover targeting */}
+      <path
+        d={edgePath}
+        fill="none"
+        stroke="transparent"
+        strokeWidth={20}
+        onMouseEnter={() => setHovered(true)}
+        onMouseLeave={() => setHovered(false)}
+      />
       <BaseEdge
         id={id}
         path={edgePath}
-        style={style}
+        style={edgeStyle}
         className={animated ? 'react-flow__edge-path animated' : ''}
       />
-      {label && (
+      {label && hovered && (
         <EdgeLabelRenderer>
           <div
-            className="absolute text-[10px] font-medium text-gray-500 dark:text-gray-400 bg-white dark:bg-zinc-900 px-1.5 py-0.5 rounded border border-gray-200 dark:border-zinc-700 pointer-events-none"
+            className="absolute text-[10px] font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-zinc-800 px-2 py-1 rounded-md border border-gray-200 dark:border-zinc-600 shadow-lg"
             style={{
               transform: `translate(-50%, -50%) translate(${labelX}px,${labelY}px)`,
+              zIndex: 1000,
+              pointerEvents: 'none',
             }}
           >
             {label}

src/lib/diagramToReactFlow.ts

@@ -72,7 +72,7 @@ export function diagramDataToReactFlow(
   data: DiagramData,
   options?: ConvertOptions,
 ): { nodes: Node[]; edges: Edge[] } {
-  const maxDepth = options?.maxDepth ?? 2;
+  const maxDepth = options?.maxDepth ?? Infinity;
 
   // 1. Filter nodes by depth
   const filteredNodes = data.nodes.filter((n) => n.depth <= maxDepth);
@@ -103,10 +103,9 @@ export function diagramDataToReactFlow(
         source: e.source,
         target: e.target,
         type: 'explorer',
-        label: e.label ?? undefined,
         animated: style.animated,
         style: { stroke: style.stroke, strokeWidth: 1.5 },
-        data: { edgeType: e.type },
+        data: { edgeType: e.type, label: e.label ?? undefined },
       };
     });