From 6af692296d2f550e7ada6a84ff0c533a60eaeb92 Mon Sep 17 00:00:00 2001
From: heiheihei <1395202740@qq.com>
Date: Thu, 4 Sep 2025 19:58:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0Clusters=E7=BB=98=E5=88=B6?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/ModelStructure/common/GraphData.tsx   |  6 ++++-
 .../ModelVis/app/src/src-worker/render.ts     | 25 +++++++++++++++++++
 .../ModelVis/app/src/src-worker/worker.ts     |  4 ++-
 .../ModelVis/app/src/types/model.d.ts         |  8 ++++++
 4 files changed, 41 insertions(+), 2 deletions(-)

diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
index a9d1f4fc2..f42f28b03 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/ModelStructure/common/GraphData.tsx
@@ -59,7 +59,11 @@ const GraphData = () => {
       })
       if (!modelData || !nodesEdges || JSON.stringify(currentGraphData.nodes) !== JSON.stringify(nodesEdges.nodes)) {
         setModelData(cloneDeep(currentGraphData.model))
-        setNodesEdges({ nodes: cloneDeep(currentGraphData.nodes), edges: cloneDeep(currentGraphData.edges) });
+        setNodesEdges({ 
+          nodes: cloneDeep(currentGraphData.nodes), 
+          edges: cloneDeep(currentGraphData.edges), 
+          clusters: cloneDeep(currentGraphData.clusters),
+        });
       }
     }
   }, [currentGraph, JSON.stringify(subgraphs)]);
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
index 152ee2f24..f9ba8e498 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/render.ts
@@ -25,6 +25,7 @@ import opCategories, {
     type OperatorCategory
 } from "./op-category.ts"
 import {
+    Clusters,
     Ctx,
     DYN_HEIGHT,
     DYN_WIDTH,
@@ -70,6 +71,7 @@ const render = () => {
     if (DisplayFsg && MaxFsgs !== null) renderMaxFsgs()
 
     renderNodes(Nodes, sx, sy, ex, ey)
+    renderClusters()
     // When the zoom is too small, the edge is hard to see, so it is hidden
     // directly when the zoom is less than 0.3. In addition, the thumbnail
     // function is also very important.
@@ -182,6 +184,29 @@ const renderNodes = (
     setVisibleNodes(visibleNodes)
 }
 
+const renderCluster = (cluster: Clusters) => {
+    const { id, points } = cluster
+    const color = GraphTheme === "dark" ? "#f8f8f8" : "#333333"
+    Ctx.save()
+    Ctx.lineWidth = 1
+    Ctx.strokeStyle = color
+    Ctx.beginPath()
+    Ctx.moveTo(points[0].x, points[0].y)
+
+    for (let i = 1; i < points.length; i++)
+        Ctx.lineTo(points[i].x, points[i].y)
+    Ctx.lineTo(points[0].x, points[0].y)
+    Ctx.closePath()
+    Ctx.stroke()
+    Ctx.textAlign = "left"
+    Ctx.fillStyle = color
+    Ctx.fillText(id, points[0].x, points[0].y - 10)
+    Ctx.textAlign = "center"
+    Ctx.restore()
+
+}
+const renderClusters = () => Clusters.map(renderCluster)
+
 /**
  * The Dynamic OP Mark is a small rectangle with a blue background and white text
  * @desc
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
index da26d372b..f90697eb4 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/src-worker/worker.ts
@@ -36,6 +36,7 @@ let HighlightCanvas: OffscreenCanvas | null = null!
 export let HighlightCtx: OffscreenCanvasRenderingContext2D | null = null!
 export let Nodes: RenderNode[] | null = null!
 export let Edges: RenderEdge[] | null = null!
+export let Clusters: Clusters[] | null = null!
 export let VisibleNodes: RenderNode[] | null = null!
 export let VisibleEdges: RenderEdge[] | null = null!
 export let HighlightTarget: RenderNode | RenderEdge | null = null!
@@ -63,9 +64,10 @@ export const setVisibleNodes = (newVal: RenderNode[]) => (VisibleNodes = newVal)
 export const setVisibleEdges = (newVal: RenderEdge[]) => (VisibleEdges = newVal)
 
 const applyLayoutResul = (data: NodesEdges) => {
-    const { nodes, edges } = data
+    const { nodes, edges, clusters } = data
     Nodes = nodes
     Edges = edges
+    Clusters = clusters
 
     const dynamicNodes: RenderNode[] = []
     for (const node of Nodes) {
diff --git a/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts b/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
index 8d44134b0..33a01e385 100644
--- a/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
+++ b/plugins/mindstudio-insight-plugins/ModelVis/app/src/types/model.d.ts
@@ -88,10 +88,17 @@ type LayoutRet = {
     paths: string[]
 }
 
+type Clusters = {
+    id: string
+    opType:string
+    points:Array<{ x: number; y: number }>
+}
+
 type GraphData = {
     model: ModelData
     nodes: RenderNode[]
     edges: RenderEdge[]
+    clusters: Clusters[]
 }
 
 type Subgraphs = {
@@ -101,6 +108,7 @@ type Subgraphs = {
 type NodesEdges = {
     nodes: RenderNode[]
     edges: RenderEdge[]
+    clusters: Clusters[]
 }
 
 type NodeId = {
-- 
Gitee