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