Integrating React Flow in the Feed Details Panel

package.json

@@ -48,6 +48,7 @@
     "react-router": "^6.4.0",
     "react-router-dom": "^6.4.0",
     "react-scripts": "^5.0.1",
+    "reactflow": "^11.7.0",
     "redux-saga": "^1.1.3",
     "rusha": "^0.8.14",
     "sass": "^1.54.9",

src/api/models/file-viewer.model.ts

@@ -4,6 +4,7 @@ import { ImTree } from "react-icons/im";
 import { TfiFlickr } from "react-icons/tfi";
 import { FaTerminal, FaFileImage, FaBrain } from "react-icons/fa";
 import { MdEditNote } from "react-icons/md";
+import { CgListTree } from "react-icons/cg";
 
 export interface IFileBlob {
   blob?: Blob;
@@ -58,4 +59,5 @@ export const iconMap: any = {
   terminal: FaTerminal,
   brain: FaBrain,
   note: MdEditNote,
+  flow: CgListTree,
 };

src/components/common/fetch/index.tsx

@@ -1,4 +1,3 @@
-import React from "react";
 import { Cookies } from "react-cookie";
 
 const useCookieToken = () => {

src/components/feed/FeedDetails/index.tsx

@@ -38,12 +38,16 @@ const FeedDetails = () => {
 
   const preview =
     drawerState["preview"].currentlyActive === "preview" ? true : false;
+  const graph = drawerState["graph"].currentlyActive === "graph" ? true : false;
 
   const NodeIcon = iconMap["node"];
   const PreviewIcon = iconMap["preview"];
   const BrainIcon = iconMap["brain"];
   const NoteIcon = iconMap["note"];
   const TerminalIcon = iconMap["terminal"];
+  const FlowIcon = iconMap["flow"];
+  const GraphIcon = iconMap["graph"];
+
   const buttonStyle = getButtonStyle(false);
 
   const items = (
@@ -60,7 +64,7 @@ const FeedDetails = () => {
           button={
             <ButtonContainer
               title="Graph"
-              Icon={iconMap["graph"]}
+              Icon={graph ? iconMap["graph"] : iconMap["flow"]}
               action="graph"
               dispatch={dispatch}
               drawerState={drawerState}
@@ -199,6 +203,32 @@ const FeedDetails = () => {
             />
           }
         />
+
+        <DrawerActionsToolbar
+          button={
+            <ButtonWithTooltip
+              //@ts-ignore
+              style={buttonStyle}
+              position="bottom"
+              content={graph ? "Flow" : "Graph"}
+              variant="primary"
+              onClick={() => {
+                if (graph) {
+                  dispatch(setDrawerCurrentlyActive("graph", "flow"));
+                } else {
+                  dispatch(setDrawerCurrentlyActive("graph", "graph"));
+                }
+              }}
+              icon={
+                graph ? (
+                  <FlowIcon style={iconStyle} />
+                ) : (
+                  <GraphIcon style={iconStyle} />
+                )
+              }
+            />
+          }
+        />
       </div>
     </React.Fragment>
   );

src/components/feed/NodeDetails/NodeDetails.tsx

@@ -370,5 +370,4 @@ const RenderButtonGridItem = ({ children }: { children: ReactNode }) => {
       {children}
     </GridItem>
   );
-  4;
 };

src/components/feed/ReactFlow/ReactFlowContainer.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import ReactFlow, {
+  Controls,
+  ControlButton,
+  Background,
+  useNodesState,
+  useEdgesState,
+} from "reactflow";
+import { useTypedSelector } from "../../../store/hooks";
+import { getPluginInstanceGraph } from "./utils";
+
+const ReactFlowContainer = () => {
+  const pluginInstances = useTypedSelector(
+    (state) => state.instance.pluginInstances
+  );
+  const { data: instances } = pluginInstances;
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+
+  React.useEffect(() => {
+    if (instances) {
+      const { g_nodes, g_edges } = getPluginInstanceGraph(instances);
+      setNodes(g_nodes);
+      setEdges(g_edges);
+    }
+  }, [instances, setEdges, setNodes]);
+
+  return (
+    <ReactFlow
+      nodes={nodes}
+      edges={edges}
+      onNodesChange={onNodesChange}
+      onEdgesChange={onEdgesChange}
+    >
+      <CustomControls />
+      <Background color="#333" variant="dots" />
+    </ReactFlow>
+  );
+};
+
+export default ReactFlowContainer;
+
+function CustomControls() {
+  return (
+    <Controls position="top-left">
+      <ControlButton
+        onClick={() => console.log("another action")}
+        title="action"
+      >
+        <div>S</div>
+      </ControlButton>
+      <ControlButton
+        onClick={() => console.log("another action")}
+        title="another action"
+      >
+        <div>ID</div>
+      </ControlButton>
+      <ControlButton
+        onClick={() => console.log("another action")}
+        title="another action"
+        area
+        shape="rect"
+        coords="0,0,82,126"
+        href="sun.htm"
+        alt="Sun"
+      >
+        <div>Map</div>
+      </ControlButton>
+      <script></script>
+    </Controls>
+  );
+}

src/components/feed/ReactFlow/utils/index.ts

@@ -0,0 +1,66 @@
+import { PluginInstance } from "@fnndsc/chrisapi";
+
+export function getPluginInstanceGraph(instances: PluginInstance[]) {
+  const depthMap = new Map();
+  const linkCountMap = new Map();
+  const g_nodes = [];
+  const g_edges = [];
+  let x = 0;
+  let y = 0;
+
+  for (const node of instances) {
+    const id = node.data.id;
+    const pid = node.data.previous_id ? node.data.previous_id : -1;
+
+    if (depthMap.has(pid)) depthMap.set(id, depthMap.get(pid) + 1);
+    else depthMap.set(id, 0);
+
+    if (linkCountMap.has(pid)) linkCountMap.set(pid, linkCountMap.get(pid) + 1);
+    else linkCountMap.set(pid, 1);
+  }
+
+  for (const node of instances) {
+    const id = node.data.id;
+    const pid = node.data.previous_id ? node.data.previous_id : -1;
+
+    const nodeStartTime = Date.parse(node.data.start_date);
+    const nodeEndTime = Date.parse(node.data.end_date);
+
+    // get nodes from https://cube.chrisproject.org/api/v1/plugins/instances/9452/parameters/
+
+    let title = node.data.plugin_name;
+    if (!title || title.length === 0) title = "unset title";
+
+    g_nodes.push({
+      id: `${id}`,
+      type: "default",
+      position: { x: x, y: y },
+      dragHandle: ".chris-plugin-instance-node-header",
+      data: {
+        title: title,
+        options: [],
+        files: [],
+        status: node.data.status,
+        id: id,
+        time_start_ms: nodeStartTime,
+        time_end_ms: nodeEndTime - nodeStartTime,
+        thumb_url: "./uv.png",
+        depth: depthMap.get(id),
+        parent_link_count: linkCountMap.get(pid),
+        link_count: linkCountMap.get(id),
+      },
+    });
+
+    x += 300;
+    y += 100;
+
+    if (pid !== undefined) {
+      g_edges.push({
+        id: `e${pid}-${id}`,
+        source: `${pid}`,
+        target: `${id}`,
+      });
+    }
+  }
+  return { g_nodes, g_edges };
+}

src/pages/Feeds/components/FeedView.tsx

@@ -48,6 +48,10 @@ const NodeDetails = React.lazy(
   () => import("../../../components/feed/NodeDetails/NodeDetails")
 );
 
+const ReactFlowContainer = React.lazy(
+  () => import("../../../components/feed/ReactFlow/ReactFlowContainer")
+);
+
 export const FeedView: React.FC = () => {
   const params = useParams();
   const dispatch = useDispatch();
@@ -195,6 +199,29 @@ export const FeedView: React.FC = () => {
     </ErrorBoundary>
   );
 
+  const flowTree = (
+    <ErrorBoundary
+      fallback={
+        <div>
+          <LoadingErrorAlert
+            error={{
+              message: "Error found in constructing a tree",
+            }}
+          />
+        </div>
+      }
+    >
+      {" "}
+      <React.Suspense
+        fallback={
+          <SpinContainer title="Fetching Resources to construct the graph" />
+        }
+      >
+        <ReactFlowContainer />
+      </React.Suspense>
+    </ErrorBoundary>
+  );
+
   const nodePanel = (
     <ErrorBoundary
       fallback={
@@ -250,7 +277,12 @@ export const FeedView: React.FC = () => {
           maximized={drawerState["graph"].maximized}
         />
         <DrawerContentBody>
-          {drawerState["graph"].open && feedTree}
+          {drawerState["graph"].open &&
+            drawerState["graph"].currentlyActive === "graph" &&
+            feedTree}
+          {drawerState["graph"].open &&
+            drawerState["graph"].currentlyActive === "flow" &&
+            flowTree}
         </DrawerContentBody>
       </DrawerContent>
     </Drawer>

src/store/drawer/reducer.ts

@@ -27,6 +27,11 @@ const initialState: IDrawerState = {
     maximized: false,
     currentlyActive: "preview",
   },
+  flow: {
+    open: false,
+    maximized: false,
+    currentlyActive: "flow",
+  },
 };
 
 const reducer: Reducer<IDrawerState> = (state = initialState, action) => {

src/types/index.d.ts

@@ -24,3 +24,4 @@ declare module "typesafe-actions";
 declare module "chris-utility";
 declare module "rusha";
 declare module "antd";
+declare module "reactflow";