beads-map 0.3.3 → 0.3.5

package/app/page.tsx

@@ -19,6 +19,7 @@ import AllCommentsPanel from "@/components/AllCommentsPanel";
 import { ActivityOverlay } from "@/components/ActivityOverlay";
 import { ActivityPanel } from "@/components/ActivityPanel";
 import { HelpPanel } from "@/components/HelpPanel";
+import { SettingsModal } from "@/components/SettingsModal";
 import { TutorialOverlay, TUTORIAL_STEPS } from "@/components/TutorialOverlay";
 import { useBeadsComments } from "@/hooks/useBeadsComments";
 import type { BeadsComment } from "@/hooks/useBeadsComments";
@@ -191,6 +192,7 @@ export default function Home() {
   const [selectedNode, setSelectedNode] = useState<GraphNode | null>(null);
   const [hoveredNode, setHoveredNode] = useState<GraphNode | null>(null);
   const [collapsedEpicIds, setCollapsedEpicIds] = useState<Set<string>>(new Set());
+  const [focusedEpicId, setFocusedEpicId] = useState<string | null>(null);
   const [colorMode, setColorMode] = useState<ColorMode>("status");
   const [projectName, setProjectName] = useState("Beads");
   const [repoCount, setRepoCount] = useState(0);
@@ -252,16 +254,28 @@ export default function Home() {
   const [helpPanelOpen, setHelpPanelOpen] = useState(false);
   const [tutorialStep, setTutorialStep] = useState<number | null>(null);
 
+  // Set of node IDs in the local graph — used to filter global comments/activity
+  // to only events relevant to beads in this repo
+  const localNodeIds = useMemo(() => {
+    if (!data) return new Set<string>();
+    return new Set(data.graphData.nodes.map((n) => n.id));
+  }, [data]);
+
   // Rebuild historical feed when data or comments change
+  // Filter comments to only those targeting nodes in our graph, since the
+  // Hypergoat indexer returns comments globally across all repos using beads
   useEffect(() => {
     if (!data) return;
+    const localComments = allComments
+      ? allComments.filter((c) => localNodeIds.has(c.nodeId))
+      : null;
     const historical = buildHistoricalFeed(
       data.graphData.nodes,
       data.graphData.links,
-      allComments
+      localComments
     );
     setActivityFeed((prev) => mergeFeedEvents(prev, historical));
-  }, [data, allComments]);
+  }, [data, allComments, localNodeIds]);
 
   // Context menu state for right-click (phase 1: shows ContextMenu)
   const [contextMenu, setContextMenu] = useState<{
@@ -281,6 +295,9 @@ export default function Home() {
   const [descriptionModalNode, setDescriptionModalNode] =
     useState<GraphNode | null>(null);
 
+  // Settings modal state
+  const [settingsModalOpen, setSettingsModalOpen] = useState(false);
+
   // Avatar hover tooltip state
   const [avatarTooltip, setAvatarTooltip] = useState<{
     handle: string;
@@ -583,6 +600,14 @@ export default function Home() {
     setCollapsedEpicIds(new Set());
   }, []);
 
+  const handleFocusEpic = useCallback((epicId: string) => {
+    setFocusedEpicId(epicId);
+  }, []);
+
+  const handleExitFocusedEpic = useCallback(() => {
+    setFocusedEpicId(null);
+  }, []);
+
   // --- Tutorial callbacks ---
   const handleStartTutorial = useCallback(() => {
     setHelpPanelOpen(true);
@@ -1285,6 +1310,16 @@ export default function Home() {
               <span className="hidden sm:inline">Learn</span>
             </button>
             <div className="w-px h-5 bg-zinc-200 mx-2" />
+            <button
+              onClick={() => setSettingsModalOpen(true)}
+              className="p-2 text-zinc-400 hover:text-zinc-600 hover:bg-zinc-50 rounded-full transition-colors"
+              title="Settings"
+            >
+              <svg className="w-4 h-4" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.325.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.241-.438.613-.43.992a7.723 7.723 0 010 .255c-.008.378.137.75.43.991l1.004.827c.424.35.534.955.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.47 6.47 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.281c-.09.543-.56.94-1.11.94h-2.594c-.55 0-1.019-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.991a6.932 6.932 0 010-.255c.007-.38-.138-.751-.43-.992l-1.004-.827a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.086.22-.128.332-.183.582-.495.644-.869l.214-1.28z" />
+                <path strokeLinecap="round" strokeLinejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+              </svg>
+            </button>
             <AuthButton />
           </div>
         </div>
@@ -1323,6 +1358,8 @@ export default function Home() {
             collapsedEpicIds={collapsedEpicIds}
             onCollapseAll={handleCollapseAll}
             onExpandAll={handleExpandAll}
+            focusedEpicId={focusedEpicId}
+            onExitFocusedEpic={handleExitFocusedEpic}
             colorMode={colorMode}
             onColorModeChange={setColorMode}
             autoFit={autoFit}
@@ -1429,6 +1466,23 @@ export default function Home() {
                     }
                   : undefined
               }
+              onFocusEpic={
+                contextMenu.node.issueType === "epic" && !focusedEpicId
+                  ? () => {
+                      handleFocusEpic(contextMenu.node.id);
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
+              onExitFocusEpic={
+                contextMenu.node.issueType === "epic" &&
+                focusedEpicId === contextMenu.node.id
+                  ? () => {
+                      handleExitFocusedEpic();
+                      setContextMenu(null);
+                    }
+                  : undefined
+              }
               onClose={() => setContextMenu(null)}
             />
           )}
@@ -1457,9 +1511,16 @@ export default function Home() {
               node={descriptionModalNode}
               onClose={() => setDescriptionModalNode(null)}
               repoUrl={repoUrls[descriptionModalNode.prefix]}
+              onOpenSettings={() => setSettingsModalOpen(true)}
             />
           )}
 
+          {/* Settings modal */}
+          <SettingsModal
+            isOpen={settingsModalOpen}
+            onClose={() => setSettingsModalOpen(false)}
+          />
+
           {/* Node hover tooltip */}
           {nodeTooltip && !avatarTooltip && (
             <BeadTooltip
@@ -1578,6 +1639,7 @@ export default function Home() {
               isAuthenticated={isAuthenticated}
               currentDid={session?.did}
               repoUrls={repoUrls}
+              onOpenSettings={() => setSettingsModalOpen(true)}
             />
 
           </div>
@@ -1636,6 +1698,7 @@ export default function Home() {
                 isAuthenticated={isAuthenticated}
                 currentDid={session?.did}
                 repoUrls={repoUrls}
+                onOpenSettings={() => setSettingsModalOpen(true)}
               />
             </div>
           </div>
@@ -1645,7 +1708,7 @@ export default function Home() {
         <AllCommentsPanel
           isOpen={allCommentsPanelOpen}
           onClose={() => setAllCommentsPanelOpen(false)}
-          allComments={allComments}
+          allComments={allComments.filter((c) => localNodeIds.has(c.nodeId))}
           onNodeNavigate={(nodeId) => {
             handleNodeNavigate(nodeId);
             setAllCommentsPanelOpen(false);

package/components/BeadsGraph.tsx

@@ -62,6 +62,10 @@ interface BeadsGraphProps {
   showPulse?: boolean;
   /** Callback to toggle pulse animation */
   onShowPulseToggle?: () => void;
+  /** When set, only show this epic and its connected subgraph */
+  focusedEpicId?: string | null;
+  /** Callback to exit focused epic mode */
+  onExitFocusedEpic?: () => void;
 }
 
 // Node size calculation
@@ -254,6 +258,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   pulseNodeId,
   showPulse = true,
   onShowPulseToggle,
+  focusedEpicId,
+  onExitFocusedEpic,
 }, ref) {
   const graphRef = useRef<any>(null);
   const containerRef = useRef<HTMLDivElement>(null);
@@ -347,11 +353,64 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
   // then removes child nodes and remaps their links to the parent epic.
   // Must be declared BEFORE effects that reference viewNodes/viewLinks.
   const { viewNodes, viewLinks } = useMemo(() => {
-    if (!collapsedEpicIds || collapsedEpicIds.size === 0) return { viewNodes: nodes, viewLinks: links };
+    let currentNodes = nodes;
+    let currentLinks = links;
+
+    // === PHASE 1: Epic focus mode ===
+    // When focused on an epic, filter to only the epic's subgraph
+    if (focusedEpicId) {
+      // Build child->parent map
+      const childToParent = new Map<string, string>();
+      for (const link of currentLinks) {
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
+        if (link.type === "parent-child") {
+          childToParent.set(tgt, src);
+        }
+      }
+      const nodeIdSet = new Set(currentNodes.map((n) => n.id));
+      for (const node of currentNodes) {
+        if (!childToParent.has(node.id) && node.id.includes(".")) {
+          const parentId = node.id.split(".")[0];
+          if (nodeIdSet.has(parentId)) {
+            childToParent.set(node.id, parentId);
+          }
+        }
+      }
+
+      // Collect epic + direct children
+      const subgraphIds = new Set<string>();
+      subgraphIds.add(focusedEpicId);
+      for (const [childId, parentId] of childToParent) {
+        if (parentId === focusedEpicId) {
+          subgraphIds.add(childId);
+        }
+      }
+
+      // Add 1-hop neighbors connected via blocks/relates_to links
+      for (const link of currentLinks) {
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
+        if (link.type !== "parent-child") {
+          if (subgraphIds.has(src) && nodeIdSet.has(tgt)) subgraphIds.add(tgt);
+          if (subgraphIds.has(tgt) && nodeIdSet.has(src)) subgraphIds.add(src);
+        }
+      }
+
+      currentNodes = currentNodes.filter((n) => subgraphIds.has(n.id));
+      currentLinks = currentLinks.filter((link) => {
+        const src = typeof link.source === "object" ? (link.source as any).id : link.source;
+        const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
+        return subgraphIds.has(src) && subgraphIds.has(tgt);
+      });
+    }
+
+    // === PHASE 2: Collapse mode ===
+    if (!collapsedEpicIds || collapsedEpicIds.size === 0) return { viewNodes: currentNodes, viewLinks: currentLinks };
 
     // Build child->parent map from parent-child links
     const childToParent = new Map<string, string>();
-    for (const link of links) {
+    for (const link of currentLinks) {
       const src = typeof link.source === "object" ? (link.source as any).id : link.source;
       const tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
       if (link.type === "parent-child") {
@@ -360,8 +419,8 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       }
     }
     // Fallback: infer from hierarchical IDs (e.g., "beads-map-3r3.1" -> parent "beads-map-3r3")
-    const nodeIds = new Set(nodes.map((n) => n.id));
-    for (const node of nodes) {
+    const nodeIds = new Set(currentNodes.map((n) => n.id));
+    for (const node of currentNodes) {
       if (!childToParent.has(node.id) && node.id.includes(".")) {
         const parentId = node.id.split(".")[0];
         if (nodeIds.has(parentId)) {
@@ -378,7 +437,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
       }
     }
 
-    if (childIds.size === 0) return { viewNodes: nodes, viewLinks: links };
+    if (childIds.size === 0) return { viewNodes: currentNodes, viewLinks: currentLinks };
 
     // Also build a filtered childToParent for only the collapsed children (for link remapping)
     const collapsedChildToParent = new Map<string, string>();
@@ -392,7 +451,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     const extraDependentCount = new Map<string, number>();
     for (const [childId, parentId] of collapsedChildToParent) {
       collapsedCounts.set(parentId, (collapsedCounts.get(parentId) || 0) + 1);
-      const child = nodes.find((n) => n.id === childId);
+      const child = currentNodes.find((n) => n.id === childId);
       if (child) {
         extraBlockerCount.set(parentId, (extraBlockerCount.get(parentId) || 0) + child.blockerCount);
         extraDependentCount.set(parentId, (extraDependentCount.get(parentId) || 0) + child.dependentCount);
@@ -400,7 +459,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     }
 
     // Filter nodes: remove collapsed children, augment their parents
-    const filteredNodes: GraphNode[] = nodes
+    const filteredNodes: GraphNode[] = currentNodes
       .filter((n) => !childIds.has(n.id))
       .map((n) => ({
         ...n,
@@ -412,7 +471,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     // Remap links: replace collapsed child IDs with parent IDs, drop internal parent-child links
     const remappedLinks: GraphLink[] = [];
     const linkSeen = new Set<string>();
-    for (const link of links) {
+    for (const link of currentLinks) {
       let src = typeof link.source === "object" ? (link.source as any).id : link.source;
       let tgt = typeof link.target === "object" ? (link.target as any).id : link.target;
       // Drop parent-child links where the child is collapsed
@@ -428,7 +487,7 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     }
 
     return { viewNodes: filteredNodes, viewLinks: remappedLinks };
-  }, [nodes, links, collapsedEpicIds]);
+  }, [nodes, links, collapsedEpicIds, focusedEpicId]);
 
   // Keep viewNodesRef in sync for mousemove avatar hit-testing
   viewNodesRef.current = viewNodes;
@@ -897,6 +956,24 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
     }
   }, [nodes.length, timelineActive, autoFit]);
 
+  // Auto zoom-to-fit when entering/exiting epic focus mode (unconditional)
+  const prevFocusedEpicIdRef = useRef<string | null | undefined>(undefined);
+  useEffect(() => {
+    // Skip on mount (initial render)
+    if (prevFocusedEpicIdRef.current === undefined) {
+      prevFocusedEpicIdRef.current = focusedEpicId ?? null;
+      return;
+    }
+    prevFocusedEpicIdRef.current = focusedEpicId ?? null;
+    const graph = graphRef.current;
+    if (!graph) return;
+    // Small delay to let the force graph process the new node set
+    const timer = setTimeout(() => {
+      graph.zoomToFit(400, 60);
+    }, 100);
+    return () => clearTimeout(timer);
+  }, [focusedEpicId]);
+
   // Memoize graphData so the object reference stays stable across renders.
   // This prevents react-force-graph from treating it as "new data" and
   // re-heating the simulation on every hover/selection change.
@@ -1822,8 +1899,29 @@ const BeadsGraph = forwardRef<BeadsGraphHandle, BeadsGraphProps>(function BeadsG
 
   return (
     <div ref={containerRef} className="w-full h-full relative" data-tutorial="graph">
-      {/* Top-left controls — two rows */}
+      {/* Top-left controls */}
       <div className="absolute top-3 left-3 sm:top-4 sm:left-4 z-10 flex flex-col gap-1.5 sm:gap-2">
+        {/* Focus mode banner */}
+        {focusedEpicId && onExitFocusedEpic && (
+          <div className="flex items-center gap-2 px-3 py-1.5 text-xs font-medium bg-emerald-50/90 backdrop-blur-sm rounded-lg border border-emerald-200 shadow-sm text-emerald-700">
+            <svg className="w-3.5 h-3.5 text-emerald-500 flex-shrink-0" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+              <path strokeLinecap="round" strokeLinejoin="round" d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5M16.5 20.25H18A2.25 2.25 0 0020.25 18v-1.5M7.5 20.25H6A2.25 2.25 0 013.75 18v-1.5" />
+            </svg>
+            <span className="truncate max-w-[180px]">
+              Focused: <span className="font-semibold">{nodes.find((n) => n.id === focusedEpicId)?.title || focusedEpicId}</span>
+            </span>
+            <button
+              onClick={onExitFocusedEpic}
+              className="ml-auto p-0.5 rounded hover:bg-emerald-200/50 transition-colors flex-shrink-0"
+              title="Show full graph"
+            >
+              <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor">
+                <path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+        )}
+
         {/* Row 1: Layout shape controls */}
         <div className="flex items-start gap-1.5 sm:gap-2">
           {/* Layout mode toggle */}

package/components/ContextMenu.tsx

@@ -13,6 +13,8 @@ interface ContextMenuProps {
   onUnclaimTask?: () => void;
   onCollapseEpic?: () => void;
   onUncollapseEpic?: () => void;
+  onFocusEpic?: () => void;
+  onExitFocusEpic?: () => void;
   onClose: () => void;
 }
 
@@ -26,6 +28,8 @@ export function ContextMenu({
   onUnclaimTask,
   onCollapseEpic,
   onUncollapseEpic,
+  onFocusEpic,
+  onExitFocusEpic,
   onClose,
 }: ContextMenuProps) {
   const menuRef = useRef<HTMLDivElement>(null);
@@ -119,7 +123,7 @@ export function ContextMenu({
         )}
         <button
           onClick={onAddComment}
-          className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onClaimTask || onUnclaimTask || onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
+          className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onClaimTask || onUnclaimTask || onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
         >
           <svg
             className="w-3.5 h-3.5 text-zinc-400"
@@ -139,7 +143,7 @@ export function ContextMenu({
         {onClaimTask && (
           <button
             onClick={onClaimTask}
-            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-zinc-400"
@@ -160,7 +164,7 @@ export function ContextMenu({
         {onUnclaimTask && (
           <button
             onClick={onUnclaimTask}
-            className={`w-full px-3 py-2.5 text-xs text-red-500 hover:bg-red-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic ? " border-b border-zinc-100" : ""}`}
+            className={`w-full px-3 py-2.5 text-xs text-red-500 hover:bg-red-50 flex items-center gap-2 transition-colors${onCollapseEpic || onUncollapseEpic || onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-red-400"
@@ -181,7 +185,7 @@ export function ContextMenu({
         {onCollapseEpic && (
           <button
             onClick={onCollapseEpic}
-            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-zinc-400"
@@ -202,7 +206,7 @@ export function ContextMenu({
         {onUncollapseEpic && (
           <button
             onClick={onUncollapseEpic}
-            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+            className={`w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors${onFocusEpic || onExitFocusEpic ? " border-b border-zinc-100" : ""}`}
           >
             <svg
               className="w-3.5 h-3.5 text-zinc-400"
@@ -220,6 +224,48 @@ export function ContextMenu({
             Uncollapse epic
           </button>
         )}
+        {onFocusEpic && (
+          <button
+            onClick={onFocusEpic}
+            className="w-full px-3 py-2.5 text-xs text-zinc-700 hover:bg-zinc-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-zinc-400"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M7.5 3.75H6A2.25 2.25 0 003.75 6v1.5M16.5 3.75H18A2.25 2.25 0 0120.25 6v1.5M16.5 20.25H18A2.25 2.25 0 0020.25 18v-1.5M7.5 20.25H6A2.25 2.25 0 013.75 18v-1.5"
+              />
+            </svg>
+            Focus on epic
+          </button>
+        )}
+        {onExitFocusEpic && (
+          <button
+            onClick={onExitFocusEpic}
+            className="w-full px-3 py-2.5 text-xs text-emerald-600 hover:bg-emerald-50 flex items-center gap-2 transition-colors"
+          >
+            <svg
+              className="w-3.5 h-3.5 text-emerald-500"
+              fill="none"
+              viewBox="0 0 24 24"
+              strokeWidth={1.5}
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                d="M3.75 3.75v4.5m0-4.5h4.5m-4.5 0L9 9M3.75 20.25v-4.5m0 4.5h4.5m-4.5 0L9 15M20.25 3.75h-4.5m4.5 0v4.5m0-4.5L15 9m5.25 11.25h-4.5m4.5 0v-4.5m0 4.5L15 15"
+              />
+            </svg>
+            Show full graph
+          </button>
+        )}
       </div>
     </div>
   );