Respect external filter in metrics and graph

static/graph.js

@@ -135,6 +135,8 @@
   let currentMaxNodes = sanitizeMaxNodes(maxNodesInput.value);
   let currentSimulation = null;
   let currentFullGraph = false;
+  let currentIncludeExternal = true;
+  let previousMaxNodesValue = maxNodesInput ? maxNodesInput.value : "200";
   let previousMaxNodesValue = maxNodesInput ? maxNodesInput.value : "200";
 
   function setStatus(message, isError = false) {
@@ -187,7 +189,13 @@
     }
   }
 
-  async function fetchGraph(videoId, depth, maxNodes, fullGraphMode = false) {
+  async function fetchGraph(
+    videoId,
+    depth,
+    maxNodes,
+    fullGraphMode = false,
+    includeExternal = true
+  ) {
     const params = new URLSearchParams();
     if (videoId) {
       params.set("video_id", videoId);
@@ -199,6 +207,7 @@
       params.set("depth", String(depth));
       params.set("max_nodes", String(maxNodes));
     }
+    params.set("external", includeExternal ? "1" : "0");
     const response = await fetch(`/api/graph?${params.toString()}`);
     if (!response.ok) {
       const errorPayload = await response.json().catch(() => ({}));
@@ -366,7 +375,10 @@
       })
       .on("contextmenu", (event, d) => {
         event.preventDefault();
-        loadGraph(d.id, currentDepth, currentMaxNodes, { updateInputs: true });
+        loadGraph(d.id, currentDepth, currentMaxNodes, {
+          updateInputs: true,
+          includeExternal: currentIncludeExternal,
+        });
       });
 
     nodeSelection
@@ -449,11 +461,14 @@
     videoId,
     depth,
     maxNodes,
-    { updateInputs = false, fullGraph } = {}
+    { updateInputs = false, fullGraph, includeExternal } = {}
   ) {
     const wantsFull = isFullGraphMode(
       typeof fullGraph === "boolean" ? fullGraph : undefined
     );
+    const includeFlag =
+      typeof includeExternal === "boolean" ? includeExternal : currentIncludeExternal;
+    currentIncludeExternal = includeFlag;
     const sanitizedId = sanitizeId(videoId);
     if (!wantsFull && !sanitizedId) {
       setStatus("Please enter a video ID.", true);
@@ -477,7 +492,8 @@
         sanitizedId,
         safeDepth,
         safeMaxNodes,
-        wantsFull
+        wantsFull,
+        includeFlag
       );
       if (!data.nodes || data.nodes.length === 0) {
         setStatus("No nodes returned for this video.", true);
@@ -503,7 +519,8 @@
         safeDepth,
         safeMaxNodes,
         getLabelSize(),
-        wantsFull
+        wantsFull,
+        includeFlag
       );
     } catch (err) {
       console.error(err);
@@ -520,6 +537,7 @@
     await loadGraph(videoInput.value, depthInput.value, maxNodesInput.value, {
       updateInputs: true,
       fullGraph: isFullGraphMode(),
+      includeExternal: currentIncludeExternal,
     });
   }
 
@@ -631,7 +649,14 @@
     }
   }
 
-  function updateUrlState(videoId, depth, maxNodes, labelSize, fullGraphMode) {
+  function updateUrlState(
+    videoId,
+    depth,
+    maxNodes,
+    labelSize,
+    fullGraphMode,
+    includeExternal
+  ) {
     if (isEmbedded) {
       return;
     }
@@ -650,6 +675,11 @@
       next.searchParams.delete("full_graph");
       next.searchParams.set("max_nodes", String(maxNodes));
     }
+    if (!includeExternal) {
+      next.searchParams.set("external", "0");
+    } else {
+      next.searchParams.delete("external");
+    }
     if (labelSize && labelSize !== "normal") {
       next.searchParams.set("label_size", labelSize);
     } else {
@@ -671,6 +701,11 @@
     const fullGraphParam = params.get("full_graph");
     const viewFull =
       fullGraphParam && ["1", "true", "yes"].includes(fullGraphParam.toLowerCase());
+    const externalParam = params.get("external");
+    const includeExternal =
+      !externalParam ||
+      !["0", "false", "no"].includes(externalParam.toLowerCase());
+    currentIncludeExternal = includeExternal;
     if (videoId) {
       videoInput.value = videoId;
     }
@@ -691,6 +726,7 @@
     loadGraph(videoId, depth, maxNodes, {
       updateInputs: false,
       fullGraph: viewFull,
+      includeExternal,
     });
   }
 
@@ -713,7 +749,8 @@
       currentDepth,
       currentMaxNodes,
       size,
-      currentFullGraph
+      currentFullGraph,
+      currentIncludeExternal
     );
   });
   initFromQuery();
@@ -736,9 +773,20 @@
         typeof explicitFull === "boolean"
           ? explicitFull
           : isFullGraphMode();
+      const explicitInclude =
+        typeof options.includeExternal === "boolean"
+          ? options.includeExternal
+          : undefined;
+      if (typeof explicitInclude === "boolean") {
+        currentIncludeExternal = explicitInclude;
+      }
       return loadGraph(videoId, targetDepth, targetMax, {
         updateInputs: options.updateInputs !== false,
         fullGraph: fullFlag,
+        includeExternal:
+          typeof explicitInclude === "boolean"
+            ? explicitInclude
+            : currentIncludeExternal,
       });
     },
     setLabelSize(size) {
@@ -778,8 +826,13 @@
         nodes: currentGraphData ? currentGraphData.nodes.slice() : [],
         links: currentGraphData ? currentGraphData.links.slice() : [],
         fullGraph: currentFullGraph,
+        includeExternal: currentIncludeExternal,
       };
     },
+    setIncludeExternal(value) {
+      if (typeof value !== "boolean") return;
+      currentIncludeExternal = value;
+    },
     isEmbedded,
   });
   GraphUI.ready = true;