Respect external filter in metrics and graph

static/app.js

@@ -267,6 +267,10 @@
     if (!graphOverlay || !graphUiAvailable()) {
       return;
     }
+    const includeExternal = externalToggle ? !!externalToggle.checked : false;
+    if (graphUiAvailable() && typeof window.GraphUI.setIncludeExternal === "function") {
+      window.GraphUI.setIncludeExternal(includeExternal);
+    }
     lastFocusBeforeModal =
       document.activeElement instanceof HTMLElement ? document.activeElement : null;
     graphOverlay.classList.add("active");
@@ -282,7 +286,10 @@
         graphVideoField.value = videoId;
       }
       if (videoId) {
-        window.GraphUI.load(videoId, undefined, undefined, { updateInputs: true });
+        window.GraphUI.load(videoId, undefined, undefined, {
+          updateInputs: true,
+          includeExternal,
+        });
       }
       window.GraphUI.focusInput();
     });
@@ -1020,7 +1027,7 @@
     }
   }
 
-  function renderMetrics(data) {
+function renderMetrics(data) {
   if (!metricsContent) return;
   metricsContent.innerHTML = "";
   if (!data) return;
@@ -1058,7 +1065,8 @@ async function loadMetrics() {
     metricsStatus.textContent = "Loading metrics…";
   }
   try {
-    const res = await fetch("/api/metrics");
+    const includeExternal = externalToggle ? !!externalToggle.checked : false;
+    const res = await fetch(`/api/metrics?external=${includeExternal ? "1" : "0"}`);
     const data = await res.json();
     renderMetrics(data);
     metricsContainer.dataset.loaded = "1";
@@ -1325,6 +1333,11 @@ async function updateFrequencyChart(term, channels, year, queryMode, toggles = {
     } of ${payload.totalPages}`;
 
     (payload.items || []).forEach((item) => {
+      const isExternal = !!item.external_reference;
+      const hasTitle = typeof item.title === "string" && item.title.trim().length > 0;
+      if (isExternal && !hasTitle) {
+        return;
+      }
       const el = document.createElement("div");
       el.className = "item";
       const titleHtml =
@@ -1685,6 +1698,10 @@ async function updateFrequencyChart(term, channels, year, queryMode, toggles = {
       settings.external = !!externalToggle.checked;
       persistSettings();
       loadChannels().then(() => runSearch(0));
+      loadMetrics();
+      if (graphUiAvailable()) {
+        window.GraphUI.setIncludeExternal(settings.external);
+      }
     });
   }
   if (queryToggle) {

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;