Merge pull request #1066 from PintoGideon/bug-fixes

Bug fixes
FNNDSC · Feb 16, 2024 · 97e51dd · 97e51dd
2 parents 5088bde + 102923d
commit 97e51dd
Show file tree

Hide file tree

Showing 10 changed files with 115 additions and 91 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -24,10 +24,10 @@
     "print-version": "./print_version.sh"
   },
   "dependencies": {
-    "@cornerstonejs/core": "^1.58.5",
+    "@cornerstonejs/core": "^1.61.1",
     "@cornerstonejs/dicom-image-loader": "^1.57.0",
-    "@cornerstonejs/streaming-image-volume-loader": "^1.58.5",
-    "@cornerstonejs/tools": "^1.58.5",
+    "@cornerstonejs/streaming-image-volume-loader": "^1.61.1",
+    "@cornerstonejs/tools": "^1.61.1",
     "@fnndsc/chrisapi": "^1.15.0",
     "@heroicons/react": "^2.1.1",
     "@niivue/niivue": "^0.38.8",

diff --git a/src/components/FeedDetails/feed-details.css b/src/components/FeedDetails/feed-details.css
@@ -23,5 +23,5 @@
 .ant-badge-dot {
   width: 8px !important;
   height: 8px !important;
-  minwidth: 8px !important;
+  min-width: 8px !important;
 }
diff --git a/src/components/FeedOutputBrowser/FeedOutputBrowser.tsx b/src/components/FeedOutputBrowser/FeedOutputBrowser.tsx
@@ -110,10 +110,9 @@ const SidebarTree = (props: {
   const [tree, setTreeData] = React.useState<DataNode[]>();
   React.useEffect(() => {
     const pluginSidebarTree = getFeedTree(plugins);
-
     //@ts-ignore
     setTreeData(pluginSidebarTree);
-  }, [plugins, selected]);
+  }, [plugins]);
 
   //@ts-ignore
   return (

diff --git a/src/components/FeedTree/FeedTree.tsx b/src/components/FeedTree/FeedTree.tsx
@@ -150,12 +150,16 @@ const FeedTree = (props: AllProps) => {
         const newLinksToAdd: any[] = [];
 
         if (tsIds) {
-          links.forEach((link) => {
+          for (const link of links) {
+            // Extract target and source IDs from the link
             const targetId = link.target.data.id;
-            const sourceId = link.target.data.id;
+            const sourceId = link.target.data.id; // Corrected to use link.target.data.id
 
+            // Check if targetId and sourceId exist and if at least one of them is in 'tsIds'
             if (targetId && sourceId && (tsIds[targetId] || tsIds[sourceId])) {
-              // tsPlugin found
+              // 'tsPlugin' found
+
+              // Determine the topological link based on 'tsIds'
               let topologicalLink: any;
 
               if (tsIds[targetId]) {
@@ -164,35 +168,41 @@ const FeedTree = (props: AllProps) => {
                 topologicalLink = link.source;
               }
 
+              // Get the parents from 'tsIds'
               const parents = tsIds[topologicalLink.data.id];
-              const dict: any = {};
-              links &&
-                links.forEach((link) => {
-                  for (let i = 0; i < parents.length; i++) {
-                    if (
-                      link.source.data.id === parents[i] &&
-                      !dict[link.source.data.id]
-                    ) {
-                      dict[link.source.data.id] = link.source;
-                    } else if (
-                      link.target.data.id === parents[i] &&
-                      !dict[link.target.data.id]
-                    ) {
-                      dict[link.target.data.id] = link.target;
-                    }
-                  }
 
-                  return dict;
-                });
+              // Create a dictionary to store unique source and target nodes
+              const dict: { [key: string]: any } = {};
+
+              // Iterate over all links to find nodes related to parents
+              for (const innerLink of links) {
+                for (let i = 0; i < parents.length; i++) {
+                  // Check if the source ID matches any parent and it is not already in the dictionary
+                  if (
+                    innerLink.source.data.id === parents[i] &&
+                    !dict[innerLink.source.data.id]
+                  ) {
+                    dict[innerLink.source.data.id] = innerLink.source;
+                  }
+                  // Check if the target ID matches any parent and it is not already in the dictionary
+                  else if (
+                    innerLink.target.data.id === parents[i] &&
+                    !dict[innerLink.target.data.id]
+                  ) {
+                    dict[innerLink.target.data.id] = innerLink.target;
+                  }
+                }
+              }
 
+              // Add new links to the array based on the dictionary
               for (const i in dict) {
                 newLinksToAdd.push({
                   source: dict[i],
                   target: topologicalLink,
                 });
               }
             }
-          });
+          }
         }
 
         newLinks = [...links, ...newLinksToAdd];
@@ -212,7 +222,7 @@ const FeedTree = (props: AllProps) => {
 
   React.useEffect(() => {
     //@ts-ignore
-    if (size && size.width) {
+    if (size?.width) {
       //@ts-ignore
       dispatch(setTranslate({ x: size.width / 2, y: 90 }));
     }
@@ -294,7 +304,7 @@ const FeedTree = (props: AllProps) => {
         };
       });
     }
-  }, [props.data, props.tsIds, generateTree]);
+  }, [props.data, generateTree]);
 
   const handleChange = (feature: string, data?: any) => {
     if (feature === "scale_enabled") {
@@ -439,8 +449,8 @@ const FeedTree = (props: AllProps) => {
           className={`${svgClassName}`}
           width="100%"
           height="100%"
-          tabIndex={0}
         >
+          <title>Feed Tree</title>
           <TransitionGroupWrapper
             component="g"
             className={graphClassName}
@@ -450,7 +460,7 @@ const FeedTree = (props: AllProps) => {
               return (
                 <Link
                   orientation={orientation}
-                  key={"link" + i}
+                  key={`link${i}`}
                   linkData={linkData}
                   isDarkTheme={isDarkTheme}
                 />
@@ -460,7 +470,7 @@ const FeedTree = (props: AllProps) => {
             {nodes?.map(({ data, x, y, parent }, i) => {
               return (
                 <NodeWrapper
-                  key={`node + ${i}`}
+                  key={`node + ${data.id}`}
                   data={data}
                   position={{ x, y }}
                   parent={parent}

diff --git a/src/components/FeedTree/Link.tsx b/src/components/FeedTree/Link.tsx
@@ -75,11 +75,10 @@ class Link extends React.Component<LinkProps, LinkState> {
             source: [sourceX, sourceY],
             target: [targetX, targetY],
           });
-    } else {
-      return orientation === "horizontal"
-        ? `M${sourceY} ${sourceX} L${targetY} ${targetX}`
-        : `M${sourceX} ${sourceY} L${targetX} ${targetY}`;
     }
+    return orientation === "horizontal"
+      ? `M${sourceY} ${sourceX} L${targetY} ${targetX}`
+      : `M${sourceX} ${sourceY} L${targetX} ${targetY}`;
   };
 
   render() {

diff --git a/src/components/Preview/FileDetailView.tsx b/src/components/Preview/FileDetailView.tsx
@@ -8,6 +8,7 @@ import {
   Toolbar,
   ToolbarItem,
 } from "@patternfly/react-core";
+import { Alert } from "antd";
 import { useQuery } from "@tanstack/react-query";
 import { ErrorBoundary } from "react-error-boundary";
 import ZoomIcon from "@patternfly/react-icons/dist/esm/icons/search-plus-icon";
@@ -20,7 +21,6 @@ import {
   LightBulbIcon,
   MagnifyingGlassCircleIcon,
 } from "@heroicons/react/24/solid";
-
 import { useTypedSelector } from "../../store/hooks";
 import type { FeedFile } from "@fnndsc/chrisapi";
 import { getFileExtension } from "../../api/model";
@@ -41,13 +41,16 @@ interface AllProps {
 }
 
 export interface ActionState {
-  [key: string]: boolean;
+  [key: string]: boolean | string;
 }
 
 const FileDetailView = (props: AllProps) => {
   const [tagInfo, setTagInfo] = React.useState<any>();
-  const [actionState, setActionState] = React.useState<ActionState>({});
-  const [error, setError] = React.useState(false);
+  const [actionState, setActionState] = React.useState<ActionState>({
+    Zoom: false,
+    previouslyActive: "",
+  });
+  const [error, setError] = React.useState("");
   const drawerState = useTypedSelector((state) => state.drawers);
 
   const handleKeyboardEvents = (event: any) => {
@@ -94,6 +97,7 @@ const FileDetailView = (props: AllProps) => {
           setTagInfo(merged);
         }
       } catch (error) {
+        setError("Failed to parse the file for dicom tags");
         return {
           blob: undefined,
           file: undefined,
@@ -110,6 +114,7 @@ const FileDetailView = (props: AllProps) => {
   const { selectedFile, preview } = props;
 
   const fetchData = async (selectedFile: FeedFile) => {
+    setError("");
     const fileName = selectedFile.data.fname;
     const fileType = getFileExtension(fileName);
 
@@ -121,9 +126,8 @@ const FileDetailView = (props: AllProps) => {
         fileType,
       };
     } catch (error: any) {
-      const errorMessage = error.response || error.message;
-      setError(errorMessage);
-      return {};
+      setError("Failed to fetch the data for preview");
+      throw error;
     }
   };
 
@@ -145,25 +149,31 @@ const FileDetailView = (props: AllProps) => {
     }
   }
 
-  const handleEvents = (action: string) => {
+  const handleEvents = (action: string, previouslyActive: string) => {
     if (action === "TagInfo" && data) {
       displayTagInfo(data.blob);
     }
     const currentAction = actionState[action];
     setActionState({
       [action]: !currentAction,
+      previouslyActive,
     });
   };
 
-  const handleModalToggle = (actionName: string, value: boolean) => {
+  const handleModalToggle = (
+    actionName: string,
+    value: boolean,
+    previouslyActive: string,
+  ) => {
     setActionState({
       [actionName]: value,
+      previouslyActive,
     });
   };
 
   const previewType = preview === "large" ? "large-preview" : "small-preview";
 
-  const errorComponent = (error?: any) => (
+  const errorComponent = (error?: string) => (
     <span>
       <Label
         icon={<InfoIcon className="pf-v5-svg" />}
@@ -199,7 +209,7 @@ const FileDetailView = (props: AllProps) => {
               <SpinContainer title="Please wait as the file is being fetched..." />
             )}
 
-            {error && <span style={{ color: "red" }}>{error}</span>}
+            {error && <Alert closable type="error" description={error} />}
 
             {data && (
               <ViewerDisplay
@@ -210,10 +220,15 @@ const FileDetailView = (props: AllProps) => {
               />
             )}
           </div>
+
           <TagInfoModal
-            handleModalToggle={handleModalToggle}
-            isModalOpen={actionState.TagInfo}
+            handleModalToggle={(actionState, toolState) => {
+              const previouslyActive = Object.keys(actionState)[0];
+              handleModalToggle(actionState, toolState, previouslyActive);
+            }}
+            isModalOpen={actionState.TagInfo as boolean}
             output={tagInfo}
+            parsingError={error}
           />
         </ErrorBoundary>
       </React.Suspense>
@@ -280,7 +295,7 @@ export const DicomHeader = ({
   actionState,
 }: {
   viewerName: string;
-  handleEvents: (action: string) => void;
+  handleEvents: (action: string, previouslyActive: string) => void;
   fullScreen: boolean;
   actionState: ActionState;
 }) => {
@@ -313,8 +328,9 @@ export const DicomHeader = ({
               }
               icon={action.icon}
               onClick={(ev) => {
+                const previouslyActive = Object.keys(actionState)[0];
                 ev.preventDefault();
-                handleEvents(action.name);
+                handleEvents(action.name, previouslyActive);
               }}
             />
           </Tooltip>