From abb2a72d6b765a1e5d6a855c7952bbf2fe90db5b Mon Sep 17 00:00:00 2001
From: Noel Kwan <noelkwan1998@gmail.com>
Date: Thu, 19 Sep 2024 19:41:39 +0800
Subject: [PATCH] use relation deps api

---
 dashboard/README.md           |  2 +-
 dashboard/pages/ddl_graph.tsx | 37 ++++++++++++++++++++---------------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/dashboard/README.md b/dashboard/README.md
index e91b6ff332f80..724d21c964481 100644
--- a/dashboard/README.md
+++ b/dashboard/README.md
@@ -32,7 +32,7 @@ Start a RisingWave cluster, create some tables and materialized views for testin
 For example:
 
 ```bash
-./risedev d full
+./risedev d
 ./risedev slt  e2e_test/nexmark/create_sources.slt.part
 ./risedev psql -c 'CREATE TABLE dimension (v1 int);'
 ./risedev psql -c 'CREATE MATERIALIZED VIEW mv AS SELECT auction.* FROM dimension join auction on auction.id-auction.id = dimension.v1;'
diff --git a/dashboard/pages/ddl_graph.tsx b/dashboard/pages/ddl_graph.tsx
index 449201fbd0c41..e8c1485d44224 100644
--- a/dashboard/pages/ddl_graph.tsx
+++ b/dashboard/pages/ddl_graph.tsx
@@ -42,7 +42,7 @@ import {
   StreamingJob,
   getFragmentVertexToRelationMap,
   getSchemas,
-  getStreamingJobs,
+  getStreamingJobs, getRelationDependencies,
 } from "../lib/api/streaming"
 import { DdlBox } from "../lib/layout"
 import { BackPressureInfo } from "../proto/gen/monitor_service"
@@ -50,7 +50,7 @@ import { BackPressureInfo } from "../proto/gen/monitor_service"
 // Refresh interval (ms) for back pressure stats
 const INTERVAL_MS = 5000
 
-function buildDdlDependencyAsEdges(relations: StreamingJob[]): DdlBox[] {
+function buildDdlDependencyAsEdges(relations: StreamingJob[], relationDeps: Map<number, number[]>): DdlBox[] {
   // Filter out non-streaming relations, e.g. source, views.
   let relationIds = new Set<number>()
   for (const relation of relations) {
@@ -58,15 +58,17 @@ function buildDdlDependencyAsEdges(relations: StreamingJob[]): DdlBox[] {
   }
   const nodes: DdlBox[] = []
   for (const relation of relations) {
-    let parentIds = relation.dependentRelations
+    let parentIds = relationDeps.get(relation.id)
     nodes.push({
       id: relation.id.toString(),
       order: relation.id,
       width: 0,
       height: 0,
       parentIds: parentIds
-        .filter((x) => relationIds.has(x))
-        .map((x) => x.toString()),
+          ? parentIds
+              .filter((x) => relationIds.has(x))
+              .map((x) => x.toString())
+          : [],
       ddlName: relation.name,
       schemaName: relation.schemaName ? relation.schemaName : "",
     })
@@ -89,6 +91,7 @@ interface EmbeddedBackPressureInfo {
 
 export default function Streaming() {
   const { response: relationList } = useFetch(getStreamingJobs)
+  const { response: relationDeps } = useFetch(getRelationDependencies)
   const { response: fragmentVertexToRelationMap } = useFetch(
     getFragmentVertexToRelationMap
   )
@@ -106,20 +109,22 @@ export default function Streaming() {
 
   const ddlDependencyCallback = useCallback(() => {
     if (relationList) {
-      if (schemas) {
-        let relationListWithSchemaName = relationList.map((relation) => {
-          let schemaName = schemas.find(
-            (schema) => schema.id === relation.schemaId
-          )?.name
-          return { ...relation, schemaName }
-        })
-        const ddlDep = buildDdlDependencyAsEdges(relationListWithSchemaName)
-        return {
-          ddlDep,
+      if (relationDeps) {
+        if (schemas) {
+          let relationListWithSchemaName = relationList.map((relation) => {
+            let schemaName = schemas.find(
+                (schema) => schema.id === relation.schemaId
+            )?.name
+            return { ...relation, schemaName }
+          })
+          const ddlDep = buildDdlDependencyAsEdges(relationListWithSchemaName, relationDeps)
+          return {
+            ddlDep,
+          }
         }
       }
     }
-  }, [relationList, schemas])
+  }, [relationList, relationDeps, schemas])
 
   const ddlDependency = ddlDependencyCallback()?.ddlDep