Added a node graph to the feed view which combines the file view and file preview into the nodes themselves

.env

@@ -1,7 +1,7 @@
 BROWSER="chrome"
 
 # Set CHRIS_UI_URL to the url of the running CUBE API
-REACT_APP_CHRIS_UI_URL="http://localhost:8000/api/v1/"
+REACT_APP_CHRIS_UI_URL="https://cube.chrisproject.org/api/v1/"
 REACT_APP_CHRIS_UI_USERS_URL="${REACT_APP_CHRIS_UI_URL}users/"
 REACT_APP_CHRIS_UI_AUTH_URL="${REACT_APP_CHRIS_UI_URL}auth-token/"
 REACT_APP_ALPHA_FEATURES='production'

package.json

@@ -36,6 +36,7 @@
     "react": "^18.2.0",
     "react-bootstrap-typeahead": "^6.0.0",
     "react-cookie": "^4.1.1",
+    "react-d3-tree": "^3.5.2",
     "react-dom": "^18.2.0",
     "react-dropzone": "^11.5.1",
     "react-error-boundary": "^3.1.4",

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/detailedView/displays/XtkViewer/XtkViewer.tsx

@@ -41,10 +41,14 @@ function getPrimaryFileMode(file: FeedFile): ViewerMode | undefined {
 }
 
 const XtkViewer = () => {
-  const selectedFile = useTypedSelector((state) => state.explorer.selectedFile);
+  const selected = useTypedSelector((state) => state.instance.selectedPlugin);
+  const selectedFilePayload = useTypedSelector(
+    (state) => state.explorer.selectedFile
+  );
+  const selectedFile = selectedFilePayload && selectedFilePayload[selected?.data.id];
   const selectedFileType = getFileType(selectedFile);
   const { pluginFiles } = useTypedSelector((state) => state.resource);
-  const selected = useTypedSelector((state) => state.instance.selectedPlugin);
+
   const pluginFilesPayload = selected && pluginFiles[selected.data.id];
   const directoryFiles = pluginFilesPayload ? pluginFilesPayload.files : [];
   const crvFiles = directoryFiles.filter((file) => {

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/FeedOutputBrowser/FeedOutputBrowser.scss

@@ -49,18 +49,16 @@
     }
   }
 
-  .pf-c-drawer__content{
+  .pf-c-drawer__content {
     background-color: #18181b;
   }
 
-
   .pf-c-table tr > * {
     color: white;
   }
 
-  .pf-c-table{
+  .pf-c-table {
     background-color: #18181b;
-
   }
 
   &__table {
@@ -94,6 +92,9 @@
       display: flex;
       justify-content: flex-end;
     }
+    &--smallcrumb {
+      font-size: 1em;
+    }
 
     @include media-query($pf-global--breakpoint--xl) {
       display: flex;
@@ -118,7 +119,6 @@
     svg {
       margin-right: 0.25em;
     }
-
   }
 
   .header-panel__buttons {

src/components/feed/FeedOutputBrowser/FeedOutputBrowser.tsx

@@ -17,6 +17,7 @@ import { useFeedBrowser } from "./useFeedBrowser";
 import { SpinContainer } from "../../common/loading/LoadingContent";
 import { DrawerActionButton } from "../../common/button";
 import "./FeedOutputBrowser.scss";
+import { useTypedSelector } from "../../../store/hooks";
 
 const FileBrowser = React.lazy(() => import("./FileBrowser"));
 const { DirectoryTree } = Tree;
@@ -29,9 +30,9 @@ export interface FeedOutputBrowserProps {
 const FeedOutputBrowser: React.FC<FeedOutputBrowserProps> = ({
   handlePluginSelect,
 }) => {
+  const selected = useTypedSelector((state) => state.instance.selectedPlugin);
   const {
     plugins,
-    selected,
     pluginFilesPayload,
     statusTitle,
     handleFileClick,
@@ -40,7 +41,7 @@ const FeedOutputBrowser: React.FC<FeedOutputBrowserProps> = ({
     sidebarStatus,
     filesStatus,
     previewStatus,
-  } = useFeedBrowser();
+  } = useFeedBrowser(selected);
 
   const panelContent = (
     <DrawerPanelContent
@@ -94,6 +95,7 @@ const FeedOutputBrowser: React.FC<FeedOutputBrowserProps> = ({
                 handleFileClick={handleFileClick}
                 pluginFilesPayload={pluginFilesPayload}
                 filesLoading={filesLoading}
+                usedInsideFeedOutputBrowser={true}
               />
             ) : statusTitle && statusTitle ? (
               <FetchFilesLoader title="Fetching Files" />

src/components/feed/FeedOutputBrowser/FileBrowser.tsx

@@ -46,9 +46,17 @@ const getFileName = (name: any) => {
 };
 
 const FileBrowser = (props: FileBrowserProps) => {
-  const { pluginFilesPayload, handleFileClick, selected, filesLoading } = props;
+  const {
+    pluginFilesPayload,
+    handleFileClick,
+    selected,
+    filesLoading,
+    usedInsideFeedOutputBrowser,
+  } = props;
 
-  const selectedFile = useTypedSelector((state) => state.explorer.selectedFile);
+  const selectedFilePayload = useTypedSelector(
+    (state) => state.explorer.selectedFile
+  );
   const drawerState = useTypedSelector((state) => state.drawers);
   const dispatch = useDispatch();
 
@@ -69,7 +77,8 @@ const FileBrowser = (props: FileBrowserProps) => {
   const generateTableRow = (item: string | FeedFile) => {
     let type, icon, fsize, fileName;
     type = "UNKNOWN FORMAT";
-    const isPreviewing = selectedFile === item;
+    const isPreviewing =
+      selectedFilePayload && selectedFilePayload[selected.data.id] === item;
 
     if (typeof item === "string") {
       type = "dir";
@@ -147,7 +156,9 @@ const FileBrowser = (props: FileBrowserProps) => {
 
     return (
       <BreadcrumbItem
-        className="file-browser__header--crumb"
+        className={`file-browser__header--crumb ${
+          !usedInsideFeedOutputBrowser && `file-browser__header--smallcrumb`
+        }`}
         showDivider={true}
         key={index}
         onClick={onClick}
@@ -194,8 +205,11 @@ const FileBrowser = (props: FileBrowserProps) => {
       />
       <DrawerPanelBody className="file-browser__drawerbody">
         {drawerState["preview"].currentlyActive === "preview" &&
-          selectedFile && (
-            <FileDetailView selectedFile={selectedFile} preview="large" />
+          selectedFilePayload && (
+            <FileDetailView
+              selectedFile={selectedFilePayload[selected.data.id]}
+              preview="large"
+            />
           )}
         {drawerState["preview"].currentlyActive === "xtk" && <XtkViewer />}
       </DrawerPanelBody>
@@ -206,24 +220,31 @@ const FileBrowser = (props: FileBrowserProps) => {
     <Grid hasGutter className="file-browser">
       <Drawer position="right" isInline isExpanded={true}>
         <DrawerContent
-          panelContent={drawerState.preview.open ? previewPanel : null}
+          panelContent={
+            drawerState.preview.open && usedInsideFeedOutputBrowser
+              ? previewPanel
+              : null
+          }
           className="file-browser__firstGrid"
         >
-          <DrawerActionButton
-            background="inherit"
-            content="Files"
-            handleClose={() => {
-              handleClose("files", dispatch);
-            }}
-            handleMaximize={() => {
-              handleMaximize("files", dispatch);
-            }}
-            handleMinimize={() => {
-              handleMinimize("files", dispatch);
-            }}
-            maximized={drawerState["files"].maximized}
-          />
-          {drawerState.files.open && (
+          {usedInsideFeedOutputBrowser && (
+            <DrawerActionButton
+              background="inherit"
+              content="Files"
+              handleClose={() => {
+                handleClose("files", dispatch);
+              }}
+              handleMaximize={() => {
+                handleMaximize("files", dispatch);
+              }}
+              handleMinimize={() => {
+                handleMinimize("files", dispatch);
+              }}
+              maximized={drawerState["files"].maximized}
+            />
+          )}
+
+          {(drawerState.files.open || !usedInsideFeedOutputBrowser) && (
             <DrawerContentBody>
               <div className="file-browser__header">
                 <div className="file-browser__header--breadcrumbContainer">
@@ -262,8 +283,9 @@ const FileBrowser = (props: FileBrowserProps) => {
                         handleFileClick(`${path}/${item}`);
                       } else {
                         toggleAnimation();
-                        dispatch(setSelectedFile(item));
+                        dispatch(setSelectedFile(item, selected));
                         !drawerState["preview"].open &&
+                          usedInsideFeedOutputBrowser &&
                           dispatch(setFilePreviewPanel());
                       }
                     }}

src/components/feed/FeedOutputBrowser/types/index.ts

@@ -11,6 +11,7 @@ export interface FileBrowserProps {
   handleFileClick: (path: string) => void;
   selected: PluginInstance;
   filesLoading: boolean;
+  usedInsideFeedOutputBrowser: boolean;
 }
 
 export interface FileBrowserState {

src/components/feed/FeedOutputBrowser/useFeedBrowser.tsx

@@ -11,6 +11,7 @@ import {
   handleMaximize,
   handleMinimize,
 } from "../../common/button";
+import { PluginInstance } from "@fnndsc/chrisapi";
 
 const status = ["finishedSuccessfully", "finishedWithError", "cancelled"];
 
@@ -24,7 +25,7 @@ const getInitialDownloadState = () => {
   };
 };
 
-export const useFeedBrowser = () => {
+export const useFeedBrowser = (selected?: PluginInstance) => {
   const dispatch = useDispatch();
   const drawerState = useTypedSelector((state) => state.drawers);
   const [download, setDownload] = React.useState(getInitialDownloadState);
@@ -35,7 +36,12 @@ export const useFeedBrowser = () => {
   const { pluginFiles, loading: filesLoading } = useTypedSelector(
     (state) => state.resource
   );
-  const selected = useTypedSelector((state) => state.instance.selectedPlugin);
+
+  const fileLoadingPerInstance =
+    selected && filesLoading[selected.data.id]
+      ? filesLoading[selected.data.id]
+      : false;
+
   const { data: plugins } = pluginInstances;
 
   const pluginFilesPayload = selected && pluginFiles[selected.data.id];
@@ -162,7 +168,7 @@ export const useFeedBrowser = () => {
   return {
     handleFileClick,
     downloadAllClick,
-    filesLoading,
+    filesLoading: fileLoadingPerInstance,
     plugins,
     statusTitle,
     download,

src/components/feed/NodeDetails/NodeDetails.tsx

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

src/components/feed/Preview/FileDetailView.tsx

@@ -25,7 +25,7 @@ import {
   IFileBlob,
   fileViewerMap,
 } from "../../../api/models/file-viewer.model";
-import { SpinContainer } from "../../common/loading/LoadingContent";
+
 import {
   ButtonContainer,
   TagInfoModal,
@@ -134,45 +134,36 @@ const FileDetailView = (props: AllProps) => {
 
   return (
     <Fragment>
-      <React.Suspense
+      <ErrorBoundary
         fallback={
-          <SpinContainer title="Please wait as the preview is being fetched" />
+          <span>
+            <Label icon={<AiFillInfoCircle />} color="red" href="#filled">
+              <Text component="p">
+                Oh snap ! Looks like there was an error. Please refresh the
+                browser or try again.
+              </Text>
+            </Label>
+          </span>
         }
       >
-        <ErrorBoundary
-          fallback={
-            <span>
-              <Label icon={<AiFillInfoCircle />} color="red" href="#filled">
-                <Text component="p">
-                  Oh snap ! Looks like there was an error. Please refresh the
-                  browser or try again.
-                </Text>
-              </Label>
-            </span>
-          }
-        >
-          <div className={previewType}>
-            {previewType === "large-preview" && (
-              <DicomHeader
-                viewerName={viewerName}
-                handleEvents={handleEvents}
-              />
-            )}
+        <div className={previewType}>
+          {previewType === "large-preview" && (
+            <DicomHeader viewerName={viewerName} handleEvents={handleEvents} />
+          )}
 
-            <ViewerDisplay
-              preview={preview}
-              viewerName={viewerName}
-              fileItem={fileState}
-              actionState={actionState}
-            />
-          </div>
-          <TagInfoModal
-            handleModalToggle={handleModalToggle}
-            isModalOpen={actionState["TagInfo"]}
-            output={tagInfo}
+          <ViewerDisplay
+            preview={preview}
+            viewerName={viewerName}
+            fileItem={fileState}
+            actionState={actionState}
           />
-        </ErrorBoundary>
-      </React.Suspense>
+        </div>
+        <TagInfoModal
+          handleModalToggle={handleModalToggle}
+          isModalOpen={actionState["TagInfo"]}
+          output={tagInfo}
+        />
+      </ErrorBoundary>
     </Fragment>
   );
 };

src/components/feed/ReactFlow/ChRISNode.css

@@ -0,0 +1,249 @@
+.chris-plugin-instance-node {
+	border-radius: 5px;
+	color: white;
+
+	font-family: sans-serif;
+	position: relative;
+
+	max-width: 300px;
+
+	/* min-width: 200px; */
+	/* overflow: hidden; */
+}
+
+.chris-plugin-instance-node-thumb {
+	width: 100%;
+	max-width: 200px;
+	aspect-ratio: 1/1;
+
+	/* unclear why this is needed */
+    margin-bottom: -4px;
+
+	pointer-events: none;
+}
+
+.chris-plugin-instance-node-header {
+	background-color: rgb(0, 102, 204);
+	padding: 3px 10px;
+
+	font-size: 12px;
+
+	position: relative;
+
+	display: flex;
+	justify-content: space-between;
+}
+
+.chris-plugin-instance-node-header-closed-top {
+	border-top-left-radius: 5px;
+	border-top-right-radius: 5px;
+}
+
+.chris-plugin-instance-node-header-closed-bottom {
+	border-bottom-left-radius: 5px;
+	border-bottom-right-radius: 5px;
+}
+
+.chris-plugin-instance-node-header:hover {
+	cursor: pointer !important;
+}
+
+.chris-plugin-instance-node-header-title {
+	margin: 0;
+}
+
+.chris-plugin-instance-hide-body-button {
+	background: none;
+	outline: none;
+	border: none;
+	color: white;
+	margin: auto 0 auto 10px;
+    vertical-align: middle;
+}
+
+.chris-plugin-instance-hide-body-button:hover {
+	cursor: pointer;
+}
+
+.chris-plugin-instance-node-body {
+	display: flex;
+	flex-direction: column;
+	padding: 7px 10px 7px 10px;
+
+	background: linear-gradient(140deg, rgba(0, 102, 204, .63) 0%, rgba(95, 101, 128, .66) 100%);
+	/* backdrop-filter: blur(1px); */
+	backface-visibility: hidden;
+	border-radius: 0 0 5px 5px;
+}
+
+.hide-body .chris-plugin-instance-node-header {
+	border-radius: 5px;;
+}
+
+.hide-body .chris-plugin-instance-node-body {
+	display: none;
+	width: 200px;
+}
+
+.react-flow__node-plugininst .react-flow__handle {
+	width: 6px;
+	height: 10px;
+	border-radius: 2px;
+	background-color: #778899;
+}
+
+.chris-plugin-instance-node-id {
+	font-size: 10px;
+	margin: 0;
+	text-align: right;
+}
+
+/*
+
+	Status effects
+
+*/
+
+.chris-plugin-instance-node[status="finishedSuccessfully"] {
+	/* box-shadow: 0px 0px 5px 0px green; */
+}
+
+.chris-plugin-instance-node[status="finishedSuccessfully"]:after {
+	content: "Finished";
+	position: absolute;
+	bottom: -1.4em;
+	right: 0;
+	color: black;
+
+	font-size: 12px;
+}
+
+.chris-plugin-instance-node[status="finishedWithError"] .chris-plugin-instance-node-header{
+	background-color: rgb(255, 44, 44);
+}
+
+.chris-plugin-instance-node[status="finishedWithError"]:after {
+	content: "Error";
+	position: absolute;
+	bottom: -1.4em;
+	right: 0;
+	color: black;
+
+	font-size: 12px;
+}
+
+.chris-plugin-instance-node[status="cancelled"] .chris-plugin-instance-node-header{
+	background-color: rgb(137, 137, 141);
+}
+
+.chris-plugin-instance-node[status="cancelled"]:after {
+	content: "Cancelled";
+	position: absolute;
+	bottom: -1.4em;
+	right: 0;
+	color: black;
+
+	font-size: 12px;
+}
+
+/*
+
+	Replay system
+
+*/
+
+.working.chris-plugin-instance-node {
+	box-shadow: 0px 0px 10px 5px #333;
+}
+
+/*
+
+	Yesh Styles
+
+*/
+
+.chris-plugin-instance-node-inline-input {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	padding-bottom: 2px;
+}
+
+.chris-plugin-instance-node-input-label {
+	font-size: 12px;
+}
+
+.chris-plugin-instance-node-inline-input > * {
+	margin: auto 0;
+	font-size: 12px;
+}
+
+/* edit here  */
+
+/* .chris-plugin-instance-node-input {
+	background: rgba(255, 255, 255, .2);
+	border: none;
+	border-bottom: 1px solid rgba(255, 255, 255, .3);
+
+	color: white;
+	margin-left: 5px;
+} */
+
+.chris-plugin-instance-node-input[type="text"] {
+	background: none;
+	font-size: 1em;
+	line-height: 1.5em;
+	border-radius: 5px;
+	box-shadow: inset 1px 1px 2px rgba(0, 0, 0, 0.24), inset -1px -1px 3px rgba(255, 255, 255, 0.54);
+	caret-color: black;
+	width: 100%;
+	border: none;
+	outline: none;
+  }
+
+  .chris-plugin-instance-node-input-label {
+	margin-bottom: 4px;
+	display: block;
+	width: 100%;
+	padding: 0;
+	border: none;
+	outline: none;
+	box-sizing: border-box;
+	color: black;
+	font-family: Verdana;
+  }
+
+  .chris-plugin-instance-node-input-label::nth-of-type(2) {
+	margin-top: 12px;
+  }
+
+  .chris-plugin-instance-node-input::placeholder {
+	color: black;
+  }
+
+  .chris-plugin-instance-node-input[type="checkbox"][value="true"] {
+	height: 25px;
+	width: 25px;
+	accent-color: green;
+  }
+  .chris-plugin-instance-node-input[type="checkbox"][value="false"] {
+	height: 25px;
+	width: 25px;
+	accent-color: red;
+  }
+
+  .chris-plugin-instance-node-input[type="number"] {
+	background: #b3dbf8;
+	height: 30px;
+	font-size: 10px;
+	border-radius: 10px;
+	box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px white;
+	caret-color: black;
+	width: 30%;
+	border: none;
+	outline: none;
+  }
+
+  /* trial */
+
+

src/components/feed/ReactFlow/NodeTree.css

@@ -0,0 +1,109 @@
+.cs410f23-node-tree {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+
+	fill: white;
+	color: white;
+	stroke-width: 1;
+}
+
+.rd3t-link {
+	stroke: var(--pf-global--palette--black-500) !important;
+	marker-end: url("#end-arrow");
+}
+
+.rd3t-node {
+	color: white;
+	fill: white;
+}
+
+:root {
+	--cs410f23-node-width: 200px;
+	--cs410f23-node-height: 350px;
+	--cs410f23-header-height: 30px;
+
+	--cs410f23-size: calc(var(--cs410f23-header-height) / 3);
+	--cs410f23-hsize: calc(var(--cs410f23-size) / 2);
+}
+
+.cs410f23-wrap {
+	overflow: visible;
+}
+
+.cs410f23-wrap p {
+	margin: 0;
+}
+
+.cs410f23-node {
+	min-width: var(--cs410f23-node-width);
+	min-height: var(--cs410f23-node-height);
+
+	border-radius: 5x;
+	font-family: sans-serif;
+	overflow: visible;
+}
+
+.cs410f23-header {
+	min-height: var(--cs410f23-header-height);
+
+	background-color: #004080;
+
+	display: flex;
+	justify-content: center;
+	flex-direction: column;
+
+	padding: 0 10px;
+	position: relative;
+}
+
+.cs410f23-body {
+	background: rgb(51, 51, 51);
+	margin: 0;
+
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+}
+
+.cs410f23-fileview {
+	max-height: 200px;
+	overflow-y: auto;
+
+	padding: 5px 5px;
+}
+
+.cs410f23-fileview-row {
+	overflow-x: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+
+	line-height: 24px;
+	padding-left: 5px;
+}
+
+.cs410f23-fileview-row-icon {
+	margin-right: 5px;
+	font-size: 18px;
+}
+
+.cs410f23-fileview-row-icon > * {
+	vertical-align: middle;
+}
+
+.cs410f23-fileview-row-selected {
+	background:rgb(100, 100, 100);
+	border-left: 2px solid white;
+	padding-left: 3px;
+}
+
+.cs410f23-preview {
+	width: 200px;
+	height: 200px;
+
+	overflow: hidden;
+
+	display: flex;
+	justify-content: flex-end;
+	flex-direction: column;
+}

src/components/feed/ReactFlow/ReactFlowContainer.tsx

@@ -0,0 +1,256 @@
+import React, { SyntheticEvent, useEffect, useState } from "react";
+import { useTypedSelector } from "../../../store/hooks";
+import { getPluginInstanceGraph } from "./utils";
+import Tree, { CustomNodeElementProps, Orientation, TreeLinkDatum, TreeNodeDatum, TreeProps } from 'react-d3-tree';
+import { NodeFileRef, NodeTree } from "./utils/NodeData";
+import { HierarchyPointNode } from "d3-hierarchy";
+import FileBrowser from "../FeedOutputBrowser/FileBrowser";
+import { useFeedBrowser } from "../FeedOutputBrowser/useFeedBrowser";
+import "./NodeTree.css";
+
+import FileDetailView from "../Preview/FileDetailView";
+import { FileBrowserProps } from "../FeedOutputBrowser/types";
+import { TbFile, TbFolder, TbJpg, TbJson, TbMarkdown, TbPng } from "react-icons/tb";
+import { setFilePreviewPanel } from "../../../store/drawer/actions";
+import { setSelectedFile } from "../../../store/explorer/actions";
+import { useDispatch } from "react-redux";
+import { FeedFile, PluginInstance } from "@fnndsc/chrisapi";
+
+function IwFileIcon({ ext } : { ext: string} )
+{
+	if (ext === "png") return (<TbPng />);
+	if (ext === "jpg") return (<TbJpg />);
+	if (ext === "md") return (<TbMarkdown />);
+	if (ext === "json") return (<TbJson />);
+	//if (ext === "dcm") return (<TbFile />);
+
+	return (<TbFile />);
+}
+
+function IwFileBrowser(props: FileBrowserProps)
+{
+	const {files, folders} = props.pluginFilesPayload;
+	const [selected, setSelected] = useState("");
+	const [currentFolder, setCurrentFolder] = useState(props.pluginFilesPayload.path);
+	const dispatch = useDispatch();
+
+	const [depth, setDepth] = useState(0);
+
+	function clickRowFile(file: FeedFile)
+	{
+		setSelected(file.data.fname);
+		dispatch(setSelectedFile(file, props.selected));
+	}
+
+	function clickRowFolder(folder: string, direction: number)
+	{
+		props.handleFileClick(folder);
+		setCurrentFolder(folder);
+		setDepth(depth + direction); // keep track of depth
+	}
+
+	function setDefaultSelected()
+	{
+		if (selected !== "")
+			return;
+
+		if (files.length == 0)
+			return;
+
+		// todo: find the first or middle file that is an image
+
+		const defaultFile = files.at(files.length / 2)!;
+		clickRowFile(defaultFile);
+	}
+
+	useEffect(setDefaultSelected, [selected]);
+
+	// Are we in a subfolder?
+
+	const inSubfolder = depth > 0;
+	const upFolderDir = currentFolder.substring(0, currentFolder.lastIndexOf('/'));
+
+	let upFolderButton = <></>;
+
+	if (inSubfolder)
+		upFolderButton = (
+			<div className="cs410f23-fileview-row" onClick={() => { clickRowFolder(upFolderDir, -1); } }>
+				<span className="cs410f23-fileview-row-icon"><TbFolder /></span>
+				<span>..</span>
+			</div>
+		);
+
+	return (
+
+		<div>
+			{upFolderButton}
+			{folders.map((folder) =>
+			{
+				const name = `${currentFolder}/${folder}`;
+				const shortName = name.substring(name.lastIndexOf('/') + 1);
+				const ext = name.substring(name.lastIndexOf('.') + 1);
+				const isSelected = name == selected;
+				const rowClass = `cs410f23-fileview-row ${isSelected ? "cs410f23-fileview-row-selected" : ""}`;
+
+				return (
+					<div key={name} className={rowClass} onClick={() => { clickRowFolder(name, 1); } }>
+						<span className="cs410f23-fileview-row-icon"><TbFolder /></span>
+						<span>{shortName}</span>
+					</div>
+				);
+			})}
+
+			{files.map((file) =>
+			{
+				const name = file.data.fname;
+				const shortName = name.substring(name.lastIndexOf('/') + 1);
+				const ext = name.substring(name.lastIndexOf('.') + 1);
+				const isSelected = name == selected;
+				const rowClass = `cs410f23-fileview-row ${isSelected ? "cs410f23-fileview-row-selected" : ""}`;
+
+				return (
+					<div key={name} className={rowClass} onClick={() => { clickRowFile(file); } }>
+						<span className="cs410f23-fileview-row-icon"><IwFileIcon ext={ext} /></span>
+						<span>{shortName}</span>
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+function CustomNode({ element, onMouseOver, onMouseOut }: { element: CustomNodeElementProps, onMouseOver: () => any, onMouseOut: () => any}) 
+{
+	const data = (element.nodeDatum as unknown as NodeTree).data;
+	const selectedTest = data.node;
+
+	const fileBrowserProps = useFeedBrowser(data.node);
+	const selectedFilePayload = useTypedSelector( (state) => state.explorer.selectedFile );
+	const { pluginFilesPayload, handleFileClick, filesLoading } = fileBrowserProps;
+
+	return (
+		<foreignObject
+			className="cs410f23-wrap"
+			width={200}
+			height={300}
+			x={-100}
+			y={-150}
+		>
+			<div className="cs410f23-node" 
+				onMouseOver={onMouseOver}
+				onMouseOut={onMouseOut}
+			>
+				<div className="cs410f23-preview">
+					{selectedFilePayload && selectedTest && (
+						<FileDetailView
+							selectedFile={selectedFilePayload[selectedTest.data.id]}
+							preview="small"
+						/>
+					)}
+				</div>
+
+				<div className="cs410f23-header">
+					<p>{data.title}</p>
+					<div className="iw-controls">
+						<span><i className="bi bi-image iw-button-preview"></i></span>
+						<span><i className="bi bi-folder iw-button-body"></i></span>
+					</div>
+				</div>
+
+				<div className="cs410f23-body">
+					<div className="cs410f23-fileview">
+						{pluginFilesPayload && selectedTest ? (
+							<IwFileBrowser
+								//@ts-ignore
+								selected={selectedTest}
+								handleFileClick={handleFileClick}
+								pluginFilesPayload={pluginFilesPayload}
+								filesLoading={filesLoading}
+								usedInsideFeedOutputBrowser={false}
+							/>
+						) : (
+							<div>Files are not available yet </div>
+						)}
+					</div>
+					<div className="cs410f23-status"></div>
+				</div>
+			</div>
+		</foreignObject>
+	);
+}
+
+const gNodeWidth = 200;
+
+function straightPathFunc(link: TreeLinkDatum): string {
+	const { source, target } = link;
+
+	const sourceX = source.y + gNodeWidth / 2;
+	const sourceY = source.x + 65;
+	const targetX = target.y - gNodeWidth / 2 - 2;
+	const targetY = target.x + 65;
+
+	// calculate the x and y coordinates of the handle points
+	const sourceHandleX = sourceX + 100;
+	const sourceHandleY = sourceY;
+	const targetHandleX = targetX - 100;
+	const targetHandleY = targetY;
+
+	// construct the path using the handle points and node points
+	const path = `M${sourceX},${sourceY} C${sourceHandleX},${sourceHandleY} ${targetHandleX},${targetHandleY} ${targetX},${targetY}`;
+
+	return path;
+}
+
+function ReactFlowContainer() {
+	const pluginInstances = useTypedSelector(
+		(state) => state.instance.pluginInstances
+	);
+
+	const { data: instances } = pluginInstances;
+	const [nodes, setNodes] = useState(new NodeTree());
+	const [allowMove, setAllowMove] = useState(false);
+
+	useEffect(() => {
+		if (instances) {
+			const getData = async () => {
+				const nodeTree = await getPluginInstanceGraph(instances);
+				nodeTree && setNodes(nodeTree);
+			};
+
+			getData();
+		}
+
+	}, []);
+
+	const disableMovingChart = () => setAllowMove(false);
+	const enableMovingChart = () => setAllowMove(true);
+
+	return (
+		<div className="cs410f23-node-tree">
+
+			<svg style={{height: 0}}>
+				<defs>
+					<marker id="end-arrow" viewBox="0 -5 10 10" refX="6" markerWidth="6" markerHeight="6" orient="auto"><path d="M0,-5L10,0L0,5" fill="#8a8d90"></path><path d="M0,-5L10,0L0,5" fill="#8a8d90"></path></marker>
+				</defs>
+			</svg>
+
+			<Tree
+				data={nodes}
+				draggable={allowMove}
+				zoomable={allowMove}
+				collapsible={false}
+				renderCustomNodeElement={(element: CustomNodeElementProps) => {
+					return <CustomNode 
+								element={element}
+								onMouseOver={disableMovingChart}
+								onMouseOut={enableMovingChart} 
+							/>;
+				}}
+				pathFunc={straightPathFunc}
+				nodeSize={{ x: 300, y: 400 }}
+			/>
+		</div>
+	);
+}
+
+export default ReactFlowContainer;

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

@@ -0,0 +1,48 @@
+import { PluginInstance } from "@fnndsc/chrisapi";
+import { RawNodeDatum } from "react-d3-tree";
+
+export class NodeFileRef {
+  name: string;
+  fullname: string;
+
+  constructor() {
+    this.name = "";
+    this.fullname = "";
+  }
+}
+
+export class NodeData {
+  title: string;
+  node: PluginInstance | undefined;
+  status: string;
+  id: number;
+  pid: number;
+  time_start_ms: number;
+  time_end_ms: number;
+  thumb_url: string;
+
+  constructor() {
+    this.title = "";
+    this.node = undefined;
+    this.status = "";
+    this.id = 0;
+    this.pid = 0;
+    this.time_start_ms = 0;
+    this.time_end_ms = 0;
+    this.thumb_url = "";
+  }
+}
+
+export class NodeTree implements RawNodeDatum {
+  name: string;
+  data: NodeData;
+  children: NodeTree[];
+
+  constructor() {
+    this.name = "";
+    this.data = new NodeData();
+    this.children = [];
+  }
+}
+
+export default NodeData;

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

@@ -0,0 +1,68 @@
+import { PluginInstance } from "@fnndsc/chrisapi";
+import NodeData, { NodeFileRef, NodeTree } from "./NodeData";
+
+// Return a list of plugin information in the format that d3-tree wants
+//
+//	{ id: 0, data: {...}, children: {...} }
+//
+export async function getPluginInstanceGraph(instances: PluginInstance[]) {
+  // Put each instance into a map
+
+  const nodeMap = new Map<number, NodeData[]>();
+
+  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);
+
+    let title = node.data.title;//plugin_name;
+    if (!title || title.length === 0) title = "unset title";
+
+    const data: NodeData = {
+      title: title,
+      node: node,
+      status: node.data.status,
+      id: id,
+      pid: pid,
+      time_start_ms: nodeStartTime,
+      time_end_ms: nodeEndTime - nodeStartTime,
+      thumb_url: "./uv.png",
+    };
+
+    if (nodeMap.has(pid)) nodeMap.get(pid)?.push(data);
+    else nodeMap.set(pid, [data]);
+  }
+
+  // convert the map into a json tree
+
+  function recurseTree(node: NodeData): NodeTree {
+    const out = new NodeTree();
+    out.data = node;
+    out.children = [];
+
+    if (!nodeMap.has(node.id)) return out;
+
+    const children = nodeMap.get(node.id); // get nodes with this as parent
+    const nodes = [];
+
+    if (children && children.length > 0) {
+      for (const c of children) {
+        const r = recurseTree(c);
+        nodes.push(r);
+      }
+    }
+
+    out.children = nodes;
+
+    return out;
+  }
+
+  const rootNodeArray = nodeMap.get(-1);
+  if (rootNodeArray !== undefined && rootNodeArray.length > 0) {
+    const nodeRoot = rootNodeArray[0];
+    const nodeTree: NodeTree = recurseTree(nodeRoot);
+    return nodeTree;
+  } else return undefined;
+}

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/store/explorer/actions.ts

@@ -1,9 +1,15 @@
 import { action } from "typesafe-actions";
 import { ExplorerActionTypes } from "./types";
-import { FeedFile } from "@fnndsc/chrisapi";
+import { FeedFile, PluginInstance } from "@fnndsc/chrisapi";
 
-export const setSelectedFile = (selectedFile: FeedFile) =>
-  action(ExplorerActionTypes.SET_SELECTED_FILE, selectedFile);
+export const setSelectedFile = (
+  selectedFile: FeedFile,
+  selectedPlugin: PluginInstance
+) =>
+  action(ExplorerActionTypes.SET_SELECTED_FILE, {
+    selectedFile,
+    selectedPlugin,
+  });
 
 export const clearSelectedFile = () =>
   action(ExplorerActionTypes.CLEAR_SELECTED_FILE);

src/store/explorer/reducer.ts

@@ -1,18 +1,20 @@
 import { Reducer } from "redux";
 import { ExplorerActionTypes, IExplorerState } from "./types";
 
-
 const initialState: IExplorerState = {
   selectedFile: undefined,
 };
 
 const reducer: Reducer<IExplorerState> = (state = initialState, action) => {
   switch (action.type) {
     case ExplorerActionTypes.SET_SELECTED_FILE: {
-      const selectedFile = action.payload;
+      const { selectedFile, selectedPlugin } = action.payload;
       return {
         ...state,
-        selectedFile,
+        selectedFile: {
+          ...state.selectedFile,
+          [selectedPlugin.data.id]: selectedFile,
+        },
       };
     }
 

src/store/explorer/types.ts

@@ -65,7 +65,9 @@ export type CheckInfo = {
 
 // Description state for main user items[] and item
 export interface IExplorerState {
-  selectedFile?: FeedFile;
+  selectedFile?: {
+    [id: string]: FeedFile;
+  };
 }
 
 export const ExplorerActionTypes = keyMirror({

src/store/resources/reducer.ts

@@ -1,19 +1,19 @@
-import { Reducer } from 'redux'
-import { IResourceState, ResourceTypes } from './types'
-import { getStatusLabels } from './utils'
+import { Reducer } from "redux";
+import { IResourceState, ResourceTypes } from "./types";
+import { getStatusLabels } from "./utils";
 
 export const initialState: IResourceState = {
   pluginInstanceStatus: {},
   pluginInstanceResource: {},
   pluginFiles: {},
-  url: '',
-  loading: false,
-}
+  url: "",
+  loading: {},
+};
 
 const reducer: Reducer<IResourceState> = (state = initialState, action) => {
   switch (action.type) {
     case ResourceTypes.GET_PLUGIN_STATUS_SUCCESS: {
-      const { selected, status } = action.payload
+      const { selected, status } = action.payload;
 
       return {
         ...state,
@@ -23,29 +23,27 @@ const reducer: Reducer<IResourceState> = (state = initialState, action) => {
             status,
           },
         },
-      }
+      };
     }
 
     case ResourceTypes.GET_PLUGIN_FILES_REQUEST: {
       return {
         ...state,
-        loading: true,
-      }
+        loading: {
+          ...state.loading,
+          [action.payload.id]: true,
+        },
+      };
     }
 
     case ResourceTypes.GET_PLUGIN_INSTANCE_RESOURCE_SUCCESS: {
-      const {
-        id,
-        pluginStatus,
-        pluginLog,
-        pluginDetails,
-        previousStatus,
-      } = action.payload
+      const { id, pluginStatus, pluginLog, pluginDetails, previousStatus } =
+        action.payload;
       const pluginStatusLabels = getStatusLabels(
         pluginStatus,
         pluginDetails,
-        previousStatus,
-      )
+        previousStatus
+      );
 
       return {
         ...state,
@@ -56,16 +54,20 @@ const reducer: Reducer<IResourceState> = (state = initialState, action) => {
             pluginLog,
           },
         },
-      }
+      };
     }
 
     case ResourceTypes.GET_PLUGIN_FILES_SUCCESS: {
-      const { id, files, folders, path } = action.payload
+      const { id, files, folders, path } = action.payload;
 
       return {
         ...state,
-        loading: false,
+        loading: {
+          ...state.loading,
+          [id]: false,
+        },
         pluginFiles: {
+          ...state.pluginFiles,
           [id]: {
             files,
             folders,
@@ -77,36 +79,39 @@ const reducer: Reducer<IResourceState> = (state = initialState, action) => {
     }
 
     case ResourceTypes.GET_PLUGIN_FILES_ERROR: {
-      const { id, error } = action.payload
+      const { id, error } = action.payload;
       return {
         ...state,
-        loading: false,
+        loading: {
+          ...state.loading,
+          [id]: false,
+        },
         pluginFiles: {
           ...state.pluginFiles,
           [id]: {
             files: [],
             error,
           },
         },
-      }
+      };
     }
 
     case ResourceTypes.RESET_ACTIVE_RESOURCES: {
       return {
         ...initialState,
-      }
+      };
     }
 
     case ResourceTypes.SET_CURRENT_URL: {
       return {
         ...state,
         url: action.payload,
-      }
+      };
     }
 
     default:
-      return state
+      return state;
   }
-}
+};
 
-export { reducer as resourceReducer }
+export { reducer as resourceReducer };

src/store/resources/types.ts

@@ -4,90 +4,92 @@
  *  Author:          ChRIS UI
  *  Notes:           Work in progres ...
  */
-import keyMirror from 'keymirror'
-import { PluginInstance, FeedFile } from '@fnndsc/chrisapi'
+import keyMirror from "keymirror";
+import { PluginInstance, FeedFile } from "@fnndsc/chrisapi";
 
 type Return = {
-  status: boolean
-  job_status: string
-}
+  status: boolean;
+  job_status: string;
+};
 
 type Submit = {
-  status: boolean
-}
+  status: boolean;
+};
 
 export interface PluginStatusLabels {
-  pushPath: { [key: string]: boolean }
+  pushPath: { [key: string]: boolean };
   compute: {
-    return: Return
-    status: boolean
-    submit: Submit
-  }
-  swiftPut: { [key: string]: boolean }
-  pullPath: { [key: string]: boolean }
+    return: Return;
+    status: boolean;
+    submit: Submit;
+  };
+  swiftPut: { [key: string]: boolean };
+  pullPath: { [key: string]: boolean };
 }
 
 export interface PluginInstanceStatusPayload {
   [id: string]: {
-    status: string
-  }
+    status: string;
+  };
 }
 
 export interface PluginStatus {
-  id: number
-  title: string
-  status: boolean
-  isCurrentStep: boolean
-  error: boolean
-  icon: any
+  id: number;
+  title: string;
+  status: boolean;
+  isCurrentStep: boolean;
+  error: boolean;
+  icon: any;
 }
 
 export interface Logs {
   [key: string]: {
-    logs: string
-  }
+    logs: string;
+  };
 }
 
 export interface ResourcePayload {
-  pluginStatus?: PluginStatus[]
-  pluginLog?: Logs
+  pluginStatus?: PluginStatus[];
+  pluginLog?: Logs;
 }
 
 export interface FilesPayload {
   [id: string]: {
-    files: FeedFile[]
-    folders: string[]
-    error: any
-    path: string
-  }
+    files: FeedFile[];
+    folders: string[];
+    error: any;
+    path: string;
+  };
 }
 
 export interface PluginInstanceResourcePayload {
-  [id: string]: ResourcePayload
+  [id: string]: ResourcePayload;
 }
 
 export interface PluginInstanceObj {
-  selected: PluginInstance
-  pluginInstances: PluginInstance[]
+  selected: PluginInstance;
+  pluginInstances: PluginInstance[];
 }
 
 export interface NodeDetailsProps {
-  selected?: PluginInstance
-  pluginInstanceResource?: ResourcePayload
-  text?: string
+  selected?: PluginInstance;
+  pluginInstanceResource?: ResourcePayload;
+  text?: string;
 }
 
 export interface DestroyActiveResources {
-  data?: PluginInstance[]
-  selectedPlugin?: PluginInstance
+  data?: PluginInstance[];
+  selectedPlugin?: PluginInstance;
 }
 
 export interface IResourceState {
-  pluginInstanceStatus: PluginInstanceStatusPayload
-  pluginInstanceResource: PluginInstanceResourcePayload
-  pluginFiles: FilesPayload
-  url: string
-  loading: boolean
+  pluginInstanceStatus: PluginInstanceStatusPayload;
+  pluginInstanceResource: PluginInstanceResourcePayload;
+  pluginFiles: FilesPayload;
+  url: string;
+  loading: {
+    [id: string]: boolean;
+  };
 }
 
 export const ResourceTypes = keyMirror({
@@ -102,4 +104,4 @@ export const ResourceTypes = keyMirror({
   GET_PLUGIN_FILES_ERROR: null,
   RESET_ACTIVE_RESOURCES: null,
   SET_CURRENT_URL: null,
-})
+});

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";