Add graph visualization via reagraph

rsconcept/frontend/package.json

@@ -21,7 +21,8 @@
     "react-router-dom": "^6.14.2",
     "react-select": "^5.7.4",
     "react-tabs": "^6.0.2",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "reagraph": "^4.11.1"
   },
   "devDependencies": {
     "@types/node": "^20.4.5",

rsconcept/frontend/src/pages/RSFormPage/EditorTermGraph.tsx

@@ -1,18 +1,53 @@
-import PrettyJson from '../../components/Common/PrettyJSON';
+import { useMemo } from 'react';
+import { darkTheme, GraphCanvas, GraphEdge, GraphNode, lightTheme } from 'reagraph';
+
 import { useRSForm } from '../../context/RSFormContext';
-import { GraphNode } from '../../utils/Graph';
+import { useConceptTheme } from '../../context/ThemeContext';
+import { resources } from '../../utils/constants';
 
 function EditorTermGraph() {
   const { schema } = useRSForm();
+  const { darkMode } = useConceptTheme();
 
-  const data: GraphNode[] = [];
-  schema?.graph.visitDFS(node => data.push(node));
+  const nodes: GraphNode[] = useMemo(() => {
+    return schema?.items.map(cst => { 
+      return {
+        id: String(cst.id),
+        label: (cst.term.resolved || cst.term.raw) ? `${cst.alias}: ${cst.term.resolved || cst.term.raw}` : cst.alias
+      }}
+    ) ?? [];
+  }, [schema?.items]);
+
+  const edges = useMemo(() => {
+    const result: GraphEdge[] = [];
+    let edgeID = 1;
+    schema?.graph.nodes.forEach(source => {
+      source.adjacent.forEach(target => {
+        result.push({
+          id: String(edgeID),
+          source: String(source.id),
+          target: String(target)
+        });
+        edgeID += 1;
+      });
+    });
+    return result;
+  }, [schema?.graph]);
 
   return (
-    <div>
-      <PrettyJson data={data} />
+    <div className='flex-wrap w-full h-full overflow-auto'>
+      <div className='relative border w-[1240px] h-[800px] 2xl:w-[1880px] 2xl:h-[800px]'>
+      <GraphCanvas
+        nodes={nodes}
+        edges={edges}
+        draggable
+        theme={darkMode ? darkTheme : lightTheme}
+        labelFontUrl={resources.graph_font}
+      />
+      </div>
     </div>
   );
 }
 
+
 export default EditorTermGraph;

rsconcept/frontend/src/utils/constants.ts

@@ -22,4 +22,8 @@ export const urls = {
   full_course: 'https://www.youtube.com/playlist?list=PLGe_JiAwpqu1C70ruQmCm_OWTWU3KJwDo'
 };
 
+export const resources = {
+  graph_font: 'https://ey2pz3.csb.app/NotoSansSC-Regular.ttf'
+}
+
 export const config = process.env.NODE_ENV === 'production' ? prod : dev;

rsconcept/frontend/src/utils/models.ts

@@ -295,9 +295,9 @@ export function LoadRSFormData(schema: IRSFormData): IRSForm {
     result.graph.addNode(cst.id);
     const dependencies = extractGlobals(cst.definition.formal);
     dependencies.forEach(value => {
-      const destination = schema.items.find(cst => cst.alias === value)
-      if (destination) {
-        result.graph.addEdge(cst.id, destination.id);
+      const source = schema.items.find(cst => cst.alias === value)
+      if (source) {
+        result.graph.addEdge(source.id, cst.id);
       }
     });
   });