From cda9fb1e806b22287eb8e773aae3f5612a8b43d2 Mon Sep 17 00:00:00 2001
From: Noel Kwan <noelkwan1998@gmail.com>
Date: Mon, 16 Sep 2024 16:35:50 +0800
Subject: [PATCH] complete component refactor of ddl graph

---
 dashboard/components/DdlGraph.tsx | 45 ++++++++++++++++---------------
 dashboard/pages/ddl_graph.tsx     | 14 +++++-----
 2 files changed, 29 insertions(+), 30 deletions(-)

diff --git a/dashboard/components/DdlGraph.tsx b/dashboard/components/DdlGraph.tsx
index aab761f758ed0..2461dcee355f2 100644
--- a/dashboard/components/DdlGraph.tsx
+++ b/dashboard/components/DdlGraph.tsx
@@ -22,7 +22,8 @@ import {
   FragmentBoxPosition,
   Position,
   generateFragmentEdges,
-  layoutItem,
+  generateDdlEdges,
+  layoutItem, DdlBox, DdlBoxPosition
 } from "../lib/layout"
 import { PlanNodeDatum } from "../pages/fragment_graph"
 import { StreamNode } from "../proto/gen/stream_plan"
@@ -42,10 +43,10 @@ const fragmentDistanceX = nodeRadius * 2
 const fragmentDistanceY = nodeRadius * 2
 
 export default function DdlGraph({
-  fragmentDependency,
+  ddlDependency,
   backPressures,
 }: {
-  fragmentDependency: FragmentBox[] // This is just the layout info.
+  ddlDependency: DdlBox[] // This is just the layout info.
   backPressures?: Map<string, number> // relation_id -> relation_id: back pressure rate
 }) {
   const svgRef = useRef<SVGSVGElement>(null)
@@ -53,37 +54,37 @@ export default function DdlGraph({
   const { isOpen, onOpen, onClose } = useDisclosure()
   const [currentStreamNode, setCurrentStreamNode] = useState<PlanNodeDatum>()
 
-  const planNodeDependencyDagCallback = useCallback(() => {
-    const fragmentDependencyDag = cloneDeep(fragmentDependency)
+  const ddlDependencyDagCallback = useCallback(() => {
+    const ddlDependencyDag = cloneDeep(ddlDependency)
 
-    const layoutFragmentResult = new Map<string, any>()
-    const includedFragmentIds = new Set<string>()
-    for (const fragmentBox of fragmentDependencyDag) {
-      let fragmentId = fragmentBox.id;
+    const layoutDdlResult = new Map<string, any>()
+    const includedDdlIds = new Set<string>()
+    for (const ddlBox of ddlDependencyDag) {
+      let ddlId = ddlBox.id;
       let width = 100;
       let height = 100;
-      layoutFragmentResult.set(fragmentId, {
+      layoutDdlResult.set(ddlId, {
         width,
         height,
       })
-      includedFragmentIds.add(fragmentId)
+      includedDdlIds.add(ddlId)
     }
 
-    const fragmentLayout = layoutItem(
-      fragmentDependencyDag.map(({ width: _1, height: _2, id, ...data }) => {
+    const ddlLayout = layoutItem(
+      ddlDependencyDag.map(({ width: _1, height: _2, id, ...data }) => {
         return { width: 100, height: 100, id, ...data }
       }),
       fragmentDistanceX,
       fragmentDistanceY
     )
-    const fragmentLayoutPosition = new Map<string, Position>()
-    fragmentLayout.forEach(({ id, x, y }: FragmentBoxPosition) => {
-      fragmentLayoutPosition.set(id, { x, y })
+    const ddlLayoutPosition = new Map<string, Position>()
+    ddlLayout.forEach(({ id, x, y }: DdlBoxPosition) => {
+      ddlLayoutPosition.set(id, { x, y })
     })
 
-    const layoutResult: FragmentLayout[] = []
-    for (const [fragmentId, result] of layoutFragmentResult) {
-      const { x, y } = fragmentLayoutPosition.get(fragmentId)!
+    const layoutResult: DdlLayout[] = []
+    for (const [fragmentId, result] of layoutDdlResult) {
+      const { x, y } = ddlLayoutPosition.get(fragmentId)!
       layoutResult.push({ id: fragmentId, x, y, ...result })
     }
 
@@ -93,7 +94,7 @@ export default function DdlGraph({
       svgHeight = Math.max(svgHeight, y + height + 50)
       svgWidth = Math.max(svgWidth, x + width)
     })
-    const edges = generateFragmentEdges(fragmentLayout)
+    const edges = generateDdlEdges(ddlLayout)
 
     return {
       layoutResult,
@@ -101,14 +102,14 @@ export default function DdlGraph({
       svgHeight,
       edges,
     }
-  }, [fragmentDependency])
+  }, [ddlDependency])
 
   const {
     svgWidth,
     svgHeight,
     edges: fragmentEdgeLayout,
     layoutResult: fragmentLayout,
-  } = planNodeDependencyDagCallback()
+  } = ddlDependencyDagCallback()
 
   useEffect(() => {
     if (fragmentLayout) {
diff --git a/dashboard/pages/ddl_graph.tsx b/dashboard/pages/ddl_graph.tsx
index c68af059c38dd..eb109d8501536 100644
--- a/dashboard/pages/ddl_graph.tsx
+++ b/dashboard/pages/ddl_graph.tsx
@@ -110,10 +110,10 @@ const SampleDdlDependencyGraph: DdlBox[] = [
 ]
 
 const SampleDdlBackpressures: Map<string, number> = new Map([
-  ["1-2", 0.1],
-  ["1-3", 0.2],
-  ["2-4", 0.3],
-  ["3-4", 0.4],
+  ["1_2", 0.1],
+  ["1_3", 0.2],
+  ["2_4", 0.3],
+  ["3_4", 0.4],
 ])
 
 function buildPlanNodeDependency(
@@ -553,10 +553,8 @@ export default function Streaming() {
           <Text fontWeight="semibold">Fragment Graph</Text>
           {planNodeDependencies && fragmentDependency && (
             <DdlGraph
-              selectedFragmentId={selectedFragmentId?.toString()}
-              fragmentDependency={fragmentDependency}
-              planNodeDependencies={planNodeDependencies}
-              backPressures={backPressures}
+              ddlDependency={SampleDdlDependencyGraph}
+              backPressures={SampleDdlBackpressures}
             />
           )}
         </Box>