✨ feat: 可视化新增“精简”模式

Author: ligeaaa

frontend/src/App.test.tsx

@@ -194,11 +194,67 @@ beforeEach(() => {
               domain: "graph.example.com",
               title: "Graph Example",
               icon_url: null,
+              incoming_count: 2,
+              outgoing_count: 1,
+            },
+            {
+              id: 2,
+              url: "https://two.example.com/",
+              domain: "two.example.com",
+              title: "Two Example",
+              icon_url: null,
+              incoming_count: 1,
+              outgoing_count: 1,
+            },
+            {
+              id: 3,
+              url: "https://three.example.com/",
+              domain: "three.example.com",
+              title: "Three Example",
+              icon_url: null,
+              incoming_count: 1,
+              outgoing_count: 1,
+            },
+            {
+              id: 4,
+              url: "https://leaf.example.com/",
+              domain: "leaf.example.com",
+              title: "Leaf Example",
+              icon_url: null,
               incoming_count: 0,
-              outgoing_count: 0,
+              outgoing_count: 1,
+            },
+          ],
+          edges: [
+            {
+              id: "edge-1-2",
+              from_blog_id: 1,
+              to_blog_id: 2,
+              link_text: null,
+              link_url_raw: "https://two.example.com/",
+            },
+            {
+              id: "edge-2-3",
+              from_blog_id: 2,
+              to_blog_id: 3,
+              link_text: null,
+              link_url_raw: "https://three.example.com/",
+            },
+            {
+              id: "edge-3-1",
+              from_blog_id: 3,
+              to_blog_id: 1,
+              link_text: null,
+              link_url_raw: "https://graph.example.com/",
+            },
+            {
+              id: "edge-1-4",
+              from_blog_id: 1,
+              to_blog_id: 4,
+              link_text: null,
+              link_url_raw: "https://leaf.example.com/",
             },
           ],
-          edges: [],
           meta: {
             strategy: "degree",
             limit: 200,
@@ -349,6 +405,8 @@ test("lets visualization users choose a graph size with a blog-count slider", as
   expect(screen.queryByText(/显示实际下载大小/)).not.toBeInTheDocument();
   expect(screen.queryByText("该功能仍不成熟！")).not.toBeInTheDocument();
   expect(screen.queryByText("数据统计")).not.toBeInTheDocument();
+  expect(screen.getByRole("button", { name: "精简" })).toHaveAttribute("aria-pressed", "true");
+  expect(screen.getByRole("button", { name: "全" })).toHaveAttribute("aria-pressed", "false");
 
   fireEvent.change(slider, { target: { value: "20" } });
   expect(slider).toHaveValue("20");
@@ -362,9 +420,13 @@ test("lets visualization users choose a graph size with a blog-count slider", as
     expect.stringContaining("/api/graph/views/core?strategy=seed&limit=20"),
     expect.anything(),
   );
+  expect(forceGraphProps.at(-1)!.graphData.nodes.map((node: { id: string }) => node.id)).toEqual(["1", "2", "3"]);
+  expect(forceGraphProps.at(-1)!.graphData.links).toHaveLength(3);
   expect(screen.getByRole("progressbar")).toHaveAttribute("aria-valuenow", "12");
-  expect(screen.getByText("预计需要 120 ticks")).toBeInTheDocument();
-  expect(screen.getByText("预估所需渲染时间：约 2 秒")).toBeInTheDocument();
+  await waitFor(() => {
+    expect(screen.getByText("预计需要 126 ticks")).toBeInTheDocument();
+  });
+  expect(screen.getByText("预估所需渲染时间：约 3 秒")).toBeInTheDocument();
   act(() => {
     forceGraphProps.at(-1)!.onEngineTick();
     forceGraphProps.at(-1)!.onEngineTick();
@@ -382,6 +444,23 @@ test("lets visualization users choose a graph size with a blog-count slider", as
   expect(screen.queryByRole("button", { name: /搜索博客/i })).not.toBeInTheDocument();
 });
 
+test("lets visualization users load the full graph without compact filtering", async () => {
+  window.history.replaceState({}, "", "/visualization");
+
+  render(<App />);
+
+  const fullButton = await screen.findByRole("button", { name: "全" });
+  fireEvent.click(fullButton);
+  expect(fullButton).toHaveAttribute("aria-pressed", "true");
+
+  fireEvent.click(screen.getByRole("button", { name: "确认" }));
+
+  await waitFor(() => {
+    expect(forceGraphProps.at(-1)!.graphData.nodes).toHaveLength(4);
+  });
+  expect(forceGraphProps.at(-1)!.graphData.links).toHaveLength(4);
+});
+
 test("ignores stale cached visualization graph data and reloads sampled sizes online", async () => {
   window.history.replaceState({}, "", "/visualization");
   window.localStorage.setItem(

frontend/src/pages/VisualizationPage.tsx

@@ -11,6 +11,7 @@ import type { BlogDetail, GraphData, GraphNode } from "../types/graph";
 
 const DEFAULT_GRAPH_LIMIT = 200;
 const ESTIMATED_RENDER_TICKS_PER_SECOND = 60;
+type GraphDisplayMode = "compact" | "full";
 
 /**
  * Format a force-layout tick estimate as an approximate render duration.
@@ -23,6 +24,39 @@ function formatEstimatedRenderTime(ticks: number): string {
   return `约 ${seconds} 秒`;
 }
 
+/**
+ * Keep only graph nodes connected to at least two distinct other nodes.
+ *
+ * @param graph Raw graph returned by the backend.
+ * @returns Compact graph with filtered nodes and only edges between kept nodes.
+ */
+export function compactGraphData(graph: GraphData): GraphData {
+  const neighborIdsByNodeId = new Map<number, Set<number>>();
+  for (const node of graph.nodes) {
+    neighborIdsByNodeId.set(node.id, new Set());
+  }
+
+  for (const edge of graph.edges) {
+    if (!neighborIdsByNodeId.has(edge.source) || !neighborIdsByNodeId.has(edge.target) || edge.source === edge.target) {
+      continue;
+    }
+    neighborIdsByNodeId.get(edge.source)?.add(edge.target);
+    neighborIdsByNodeId.get(edge.target)?.add(edge.source);
+  }
+
+  const keptNodeIds = new Set(
+    Array.from(neighborIdsByNodeId.entries())
+      .filter(([, neighborIds]) => neighborIds.size >= 2)
+      .map(([nodeId]) => nodeId),
+  );
+
+  return {
+    ...graph,
+    nodes: graph.nodes.filter((node) => keptNodeIds.has(node.id)),
+    edges: graph.edges.filter((edge) => keptNodeIds.has(edge.source) && keptNodeIds.has(edge.target)),
+  };
+}
+
 /**
  * Render the dedicated graph exploration route.
  *
@@ -42,7 +76,12 @@ export function VisualizationPage() {
   const [maxGraphLimit, setMaxGraphLimit] = useState(0);
   const [pendingLimit, setPendingLimit] = useState(DEFAULT_GRAPH_LIMIT);
   const [selectedLimit, setSelectedLimit] = useState<number | null>(null);
+  const [graphDisplayMode, setGraphDisplayMode] = useState<GraphDisplayMode>("compact");
   const [highlightNodeId, setHighlightNodeId] = useState<number | undefined>();
+  const visibleGraphData = useMemo(
+    () => (graphDisplayMode === "compact" ? compactGraphData(graphData) : graphData),
+    [graphData, graphDisplayMode],
+  );
   const shouldShowProgressOverlay = isLoading || isRendering;
   const progressPercent = useMemo(() => {
     const loadingFloor = isLoading ? 0.08 : 0;
@@ -100,6 +139,7 @@ export function VisualizationPage() {
    * @returns Promise resolved after benchmark graph state updates.
    */
   async function loadBenchmarkGraph() {
+    setGraphDisplayMode("full");
     setSelectedLimit(100);
     setPendingLimit(100);
     setMaxGraphLimit(100);
@@ -167,7 +207,7 @@ export function VisualizationPage() {
    */
   async function openBlog(blogId: number, options: { loadNeighborhood: boolean }) {
     if (isBenchmarkMode) {
-      const node = graphData.nodes.find((item) => item.id === blogId);
+      const node = visibleGraphData.nodes.find((item) => item.id === blogId);
       if (!node) {
         return;
       }
@@ -223,7 +263,7 @@ export function VisualizationPage() {
 
       <div className="relative min-h-0 flex-1">
         <GraphVisualization
-          data={graphData}
+          data={visibleGraphData}
           onNodeClick={handleNodeClick}
           highlightNodeId={highlightNodeId}
           useNodeIcons={!isBenchmarkMode}
@@ -261,6 +301,28 @@ export function VisualizationPage() {
                       <div className="text-sm text-slate-500">节点数量</div>
                       <div className="text-3xl font-semibold tabular-nums text-slate-950">{pendingLimit}</div>
                     </div>
+                    <div className="mt-5 grid grid-cols-2 overflow-hidden rounded-lg border border-slate-200 bg-slate-50 p-1">
+                      <button
+                        type="button"
+                        onClick={() => setGraphDisplayMode("compact")}
+                        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                          graphDisplayMode === "compact" ? "bg-slate-950 text-white shadow-sm" : "text-slate-600 hover:bg-white"
+                        }`}
+                        aria-pressed={graphDisplayMode === "compact"}
+                      >
+                        精简
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setGraphDisplayMode("full")}
+                        className={`rounded-md px-3 py-2 text-sm font-medium transition-colors ${
+                          graphDisplayMode === "full" ? "bg-slate-950 text-white shadow-sm" : "text-slate-600 hover:bg-white"
+                        }`}
+                        aria-pressed={graphDisplayMode === "full"}
+                      >
+                        全
+                      </button>
+                    </div>
                     <input
                       type="range"
                       min={0}