feat(gui): basic nested graph support

rapidstream-org · Jan 16, 2025 · 3a471fa · 3a471fa
1 parent 6b097e2
commit 3a471fa
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 30 deletions.
diff --git a/tapa-visualizer/js/graph.js b/tapa-visualizer/js/graph.js
@@ -88,21 +88,18 @@ const setupGraphButtons = (graph) => {
       }
     },
     combo: {
-      type: "rect",
+      // type: "rect",
       style: {
         labelText: combo => combo.id,
         labelFill: "gray",
-        labelFontSize: 9,
+        labelFontSize: 10,
         labelPlacement: "top",
+        strokeWidth: 2,
       }
     },
 
     layout: {
-      type: "d3-force",
-      nodeSize: 150,
-      collide: {
-        strength: 0.5,
-      },
+      type: "force",
     },
     behaviors: ["drag-canvas", "zoom-canvas", "drag-element"],
     transforms: ["process-parallel-edges"],

diff --git a/tapa-visualizer/js/praser.js b/tapa-visualizer/js/praser.js
@@ -20,33 +20,58 @@ export const getGraphData = (json) => {
     combos: [],
   };
 
-  /** @type {Map<string, Set<number>>} */
-  const nodes = new Map();
-
   for (const taskName in json.tasks) {
 
     const task = json.tasks[taskName];
 
-    // skip lower tasks
+    // Skip lower tasks
     if (task.level !== "upper") continue;
 
+    // Add upper task as combo
+    graphData.combos.push({
+      id: taskName,
+      data: task,
+      type: taskName === json.top ? "rect" : "circle"
+    });
+
+    // Add sub task as node
+    for (const subTaskName in task.tasks) {
+      const subTasks = task.tasks[subTaskName];
+      subTasks.forEach(
+        (subTask, i) => graphData.nodes.push({
+          id: `${subTaskName}/${i}`,
+          combo: taskName,
+          data: subTask
+        })
+      );
+    }
+
     /** fifo groups for fifos like fifo_x_xx[0], fifo_x_xx[1]...
      * @type {Map<string, Set<number> & {source: string, target: string}>} */
     const fifoGroups = new Map();
 
     for (const fifoName in task.fifos) {
-      const [source, sourceId] = task.fifos[fifoName].produced_by;
-      const [target, targetId] = task.fifos[fifoName].consumed_by;
-      // console.log(taskName, fifoName, source, target);
+      const fifo = task.fifos[fifoName];
+      if (!fifo.produced_by || !fifo.consumed_by) {
+        console.warn(
+          `Missing produced_by / consumed_by in ${taskName}'s ${fifoName}:`,
+          fifo,
+        );
+        continue;
+      }
+
+      const source = fifo.produced_by.join("/");
+      const target = fifo.consumed_by.join("/");
 
-      addToMappedSet(nodes, source, sourceId);
-      addToMappedSet(nodes, target, targetId);
+      // console.log(taskName, fifoName, source, target);
 
       /** Match fifo groups */
       const matchResult = fifoName.match(/^(.*)\[(\d+)\]$/);
       if (matchResult === null) {
         // Not fifo groups, add edge
-        graphData.edges.push({ source, target, id: fifoName });
+        graphData.edges.push(
+          { source, target, id: `${taskName}/${fifoName}`, data: fifo }
+        );
       } else {
         // add fifo group index
         const name = matchResult[1];
@@ -60,19 +85,26 @@ export const getGraphData = (json) => {
       const [name, source, target] = key.split("\n");
       const indexArr = [...indexs.values()].sort((a, b) => a - b);
       if (indexArr.some((index, i) => index !== i)) {
-        console.warn(`fifo group: indexes are not continuous at ${taskName}'s ${name}`);
+        console.warn(
+          `fifo group: indexes are not continuous at ${taskName}'s ${name}`
+        );
       }
       const idWithIndexRange = `${name}[${indexArr[0]}~${indexArr.at(-1)}]`;
-      graphData.edges.push({ source, target, id: idWithIndexRange });
+      graphData.edges.push(
+        { source, target, id: `${taskName}/${idWithIndexRange}` }
+      );
     })
 
   }
 
-  nodes.forEach(
-    (_ids, name) => graphData.nodes.push(
-      { id: name },
-    ),
-  );
+  graphData.combos.forEach(combo => {
+    if (combo.type === "circle") {
+      const node = graphData.nodes.find(
+        ({id}) => id.split("/")[0] === combo.id
+      );
+      if (node) graphData.edges.push({ source: combo.id, target: node.id });
+    }
+  })
 
   return graphData;
 

diff --git a/tapa-visualizer/types/global.d.ts b/tapa-visualizer/types/global.d.ts
@@ -9,32 +9,32 @@ type SubTask = {
 
 type FIFO = {
   /** [name, id] */
-  consumed_by: [string, number];
+  produced_by?: [string, number];
   /** [name, id] */
-  produced_by: [string, number];
-  depth: number;
+  consumed_by?: [string, number];
+  depth?: number;
 };
 
 type Port = {
   cat: string, name: string, type: string, width: number;
 };
 
 type LowerTask = {
+  level: "lower", target: string, vendor: string;
   /** HLS C++ code of this task. */
   code: string,
-  level: "lower", target: string, vendor: string;
 }
 
 type UpperTask = {
-  /** HLS C++ code of this task. */
-  code: string,
   level: "upper", target: string, vendor: string;
   /** A dict mapping child task names to json instance description objects. */
   tasks: Record<string, SubTask[]>;
   /** A dict mapping child fifo names to json FIFO description objects. */
   fifos: Record<string, FIFO>;
   /** A dict mapping port names to Port objects for the current task. */
   ports: Port[],
+  /** HLS C++ code of this task. */
+  code: string,
 }
 
 type GraphJSON = {