From 50d7783136cbe7db1e54bc9f35db30a6b42495b6 Mon Sep 17 00:00:00 2001 From: yuxz Date: Mon, 8 Sep 2025 17:05:42 +0800 Subject: [PATCH] fix: improve graph rendering logic --- hyperdb/templates/hypergraph_viewer.html | 65 +++++++++--------------- 1 file changed, 24 insertions(+), 41 deletions(-) diff --git a/hyperdb/templates/hypergraph_viewer.html b/hyperdb/templates/hypergraph_viewer.html index c2e6edb..2a4c0d8 100644 --- a/hyperdb/templates/hypergraph_viewer.html +++ b/hyperdb/templates/hypergraph_viewer.html @@ -8,30 +8,16 @@ - + - +
@@ -288,7 +274,7 @@ }, }, layout: { - type: "force", + type: hyperData.nodes.length > 100 ? "force-atlas2" : "force", clustering: visualizationMode === "graph" ? false : true, preventOverlap: true, nodeClusterBy: @@ -303,15 +289,12 @@ useEffect(() => { if (!graphDataFormatted || !containerRef.current) return; - // 销毁之前的图形实例 - if (graphRef.current) { - console.log(graphRef.current); + // 销毁之前的图形实例并清空画布 + if (graphRef.current && !graphRef.current.destroyed) { graphRef.current.clear(); - graphRef.current.options.plugins = []; - graphRef.current.destroy(); - // graphRef.current.stopLayout && graphRef.current.stopLayout(); // 停止布局 - // graphRef.current.destroy && graphRef.current.destroy(); - // graphRef.current = null; + if (containerRef.current) { + containerRef.current.innerHTML = ""; + } } const graph = new Graph({ @@ -361,18 +344,18 @@ return () => { window.removeEventListener("resize", handleResize); - if (graphRef.current) { - // graphRef.current.clear(); - // graphRef.current.stopLayout && graphRef.current.stopLayout(); // 停止布局 - graphRef.current.destroy && graphRef.current.destroy(); - graphRef.current = null; + if (graphRef.current && !graphRef.current.destroyed) { + graphRef.current.clear(); + } + if (containerRef.current) { + containerRef.current.innerHTML = ""; } }; }, [graphDataFormatted, visualizationMode]); return (
-
+

Hypergraph-DB

@@ -473,7 +456,7 @@

)}

-
+
{filteredVertices.length === 0 ? (
{searchTerm @@ -534,7 +517,7 @@

-
+

{visualizationMode === "hyper" ? "Hypergraph" : "Graph"}{" "} @@ -610,7 +593,7 @@

{!loading && (
)}