feat: dicom mvp

Author: PintoGideon

src/components/NewLibrary/components/FileCard.tsx

@@ -319,14 +319,7 @@ export const SubFileCard: React.FC<SubFileCardProps> = ({
         isOpen={preview}
         onClose={() => setIsPreview(false)}
       >
-        <FileDetailView
-          selectedFile={file}
-          preview="large"
-          list={list}
-          fetchMore={fetchMore}
-          handlePagination={handlePagination}
-          filesLoading={filesLoading}
-        />
+        <FileDetailView selectedFile={file} preview="large" />
       </Modal>
     </>
   );

src/components/NewLibrary/components/LibraryTable.tsx

@@ -346,15 +346,7 @@ const LibraryTable: React.FC<TableProps> = ({
         placement="right"
       >
         {selectedFile && (
-          <FileDetailView
-            gallery={true}
-            selectedFile={selectedFile}
-            preview="large"
-            list={data.files}
-            fetchMore={fetchMore}
-            handlePagination={handlePagination}
-            filesLoading={filesLoading}
-          />
+          <FileDetailView selectedFile={selectedFile} preview="large" />
         )}
       </Drawer>
       <Table

src/components/Preview/FileDetailView.tsx

@@ -1,346 +1,47 @@
-import type { FileBrowserFolderFile, PACSFile } from "@fnndsc/chrisapi";
-import {
-  Button,
-  Label,
-  Text,
-  Toolbar,
-  ToolbarItem,
-  Tooltip,
-} from "@patternfly/react-core";
-import ResetIcon from "@patternfly/react-icons/dist/esm/icons/history-icon";
-import { useMutation } from "@tanstack/react-query";
-import * as dcmjs from "dcmjs";
-import React, {
-  Fragment,
-  useCallback,
-  useEffect,
-  useState,
-  type ReactElement,
-} from "react";
+import React from "react";
 import { ErrorBoundary } from "react-error-boundary";
-import {
-  type IFileBlob,
-  fileViewerMap,
-  getFileExtension,
-} from "../../api/model";
-import { useAppSelector } from "../../store/hooks";
+import { Label, Text } from "@patternfly/react-core";
 import { SpinContainer } from "../Common";
-import {
-  AddIcon,
-  BrightnessIcon,
-  InfoIcon,
-  PauseIcon,
-  PlayIcon,
-  RotateIcon,
-  RulerIcon,
-  SearchIcon,
-  ZoomIcon,
-} from "../Icons"; // Import PlayIcon
-import { TagInfoModal } from "./HelperComponent";
-
-const ViewerDisplay = React.lazy(() => import("./displays/ViewerDisplay"));
+import type { FileBrowserFolderFile, PACSFile } from "@fnndsc/chrisapi";
+import { getFileExtension, fileViewerMap } from "../../api/model";
+import ViewerDisplay from "./displays/ViewerDisplay";
 
 interface AllProps {
   selectedFile?: FileBrowserFolderFile | PACSFile;
-  isDicom?: boolean;
   preview: "large" | "small";
   handleNext?: () => void;
   handlePrevious?: () => void;
-  gallery?: boolean;
-  // These props enable pagination and fetch on scroll
-  list?: IFileBlob[];
-  fetchMore?: boolean;
-  handlePagination?: () => void;
-  filesLoading?: boolean;
-}
-
-export interface ActionState {
-  [key: string]: boolean | string;
 }
 
-const FileDetailView = (props: AllProps) => {
-  const [tagInfo, setTagInfo] = useState<any>();
-  const [actionState, setActionState] = useState<ActionState>({
-    Zoom: false,
-    previouslyActive: "",
-  });
-  const [parsingError, setParsingError] = useState<string>("");
-  const drawerState = useAppSelector((state) => state.drawers);
-
-  const handleKeyboardEvents = useCallback(
-    (event: any) => {
-      switch (event.keyCode) {
-        case 39: {
-          event.preventDefault();
-          props.handleNext?.();
-          break;
-        }
-
-        case 37: {
-          event.preventDefault();
-          props.handlePrevious?.();
-          break;
-        }
-
-        default:
-          break;
-      }
-    },
-    [props],
-  );
-
-  useEffect(() => {
-    window.addEventListener("keydown", handleKeyboardEvents);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyboardEvents);
-    };
-  }, [handleKeyboardEvents]);
-
-  const displayTagInfo = useCallback(async () => {
-    try {
-      const blob = await selectedFile?.getFileBlob();
-      if (!blob) {
-        setParsingError("Failed to retrieve the file blob");
-        return;
-      }
-
-      const arrayBuffer = await blob.arrayBuffer();
-      const dicomData = dcmjs.data.DicomMessage.readFile(arrayBuffer);
-      const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
-        dicomData.dict,
-      );
-      // Sort the dataset keys alphabetically
-      const sortedDataset = Object.keys(dataset)
-        .sort()
-        .reduce((sortedObj: any, key) => {
-          sortedObj[key] = dataset[key];
-          return sortedObj;
-        }, {});
-
-      setTagInfo(sortedDataset);
-    } catch (error) {
-      console.error("Error parsing DICOM file:", error);
-      setParsingError("Failed to parse the file for DICOM tags");
-    }
-  }, []);
-
-  const mutation = useMutation({
-    mutationFn: displayTagInfo,
-    onError: (error: any) => {
-      setParsingError(error.message);
-    },
-  });
-
-  const { selectedFile, preview, fetchMore, handlePagination, filesLoading } =
-    props;
+export default function FileDetailView(props: AllProps) {
+  const { selectedFile, preview } = props;
   let viewerName = "";
-  const fileType = getFileExtension(selectedFile?.data.fname);
-  if (fileType) {
-    if (!fileViewerMap[fileType]) {
-      viewerName = "CatchallDisplay";
-    } else {
+  if (selectedFile) {
+    const fileType = getFileExtension(selectedFile.data?.fname);
+    if (fileType && fileViewerMap[fileType]) {
       viewerName = fileViewerMap[fileType];
+    } else {
+      viewerName = "CatchallDisplay";
     }
   }
 
-  const handleEvents = (action: string, previouslyActive: string) => {
-    if (action === "TagInfo" && selectedFile) {
-      mutation.mutate();
-    }
-    const currentAction = actionState[action];
-    setActionState({
-      [action]: !currentAction,
-      previouslyActive,
-    });
-  };
-
-  const handleModalToggle = (
-    actionName: string,
-    value: boolean,
-    previouslyActive: string,
-  ) => {
-    setActionState({
-      [actionName]: value,
-      previouslyActive,
-    });
-  };
-
-  const previewType = preview === "large" ? "large-preview" : "small-preview";
-
-  const errorComponent = (error?: string) => (
-    <span>
-      <Label
-        icon={<InfoIcon className="pf-v5-svg" />}
-        color="red"
-        href="#filled"
-      >
-        <Text component="p">
-          {error
-            ? error
-            : "Oh snap! Looks like there was an error. Please refresh the browser or try again."}
-        </Text>
-      </Label>
-    </span>
+  const errorComponent = (err?: string) => (
+    <Label color="red">
+      <Text>{err ?? "Error. Refresh or try again."}</Text>
+    </Label>
   );
 
-  const fullScreen = drawerState.preview.maximized === true;
-
   return (
-    <Fragment>
-      <React.Suspense fallback={<SpinContainer title="" />}>
-        <ErrorBoundary fallback={errorComponent()}>
-          <div className={previewType}>
-            {previewType === "large-preview" && (
-              <DicomHeader
-                viewerName={viewerName}
-                handleEvents={handleEvents}
-                fullScreen={fullScreen}
-                actionState={actionState}
-              />
-            )}
-
-            {selectedFile && (
-              <ViewerDisplay
-                preview={preview}
-                viewerName={viewerName}
-                actionState={actionState}
-                selectedFile={selectedFile}
-                // Optional for dicom scrolling
-                list={props.list}
-                fetchMore={fetchMore}
-                handlePagination={handlePagination}
-                filesLoading={filesLoading}
-              />
-            )}
-          </div>
-
-          <TagInfoModal
-            isDrawer={true}
-            handleModalToggle={(actionState, toolState) => {
-              const previouslyActive = Object.keys(actionState)[0];
-              handleModalToggle(actionState, toolState, previouslyActive);
-            }}
-            isModalOpen={actionState.TagInfo as boolean}
-            output={tagInfo}
-            parsingError={parsingError}
+    <React.Suspense fallback={<SpinContainer title="Loading..." />}>
+      <ErrorBoundary fallback={errorComponent()}>
+        {selectedFile && (
+          <ViewerDisplay
+            preview={preview}
+            viewerName={viewerName}
+            selectedFile={selectedFile}
           />
-        </ErrorBoundary>
-      </React.Suspense>
-    </Fragment>
+        )}
+      </ErrorBoundary>
+    </React.Suspense>
   );
-};
-
-export default FileDetailView;
-
-const actions = [
-  {
-    name: "Zoom",
-    icon: <ZoomIcon />,
-  },
-  {
-    name: "Pan",
-    icon: <SearchIcon />,
-  },
-  {
-    name: "Magnify",
-    icon: (
-      // We could be using a better icon here.
-      <AddIcon />
-    ),
-  },
-  {
-    name: "PlanarRotate",
-    icon: <RotateIcon />,
-  },
-  {
-    name: "WindowLevel",
-    icon: <BrightnessIcon />,
-  },
-  {
-    name: "Reset",
-    icon: <ResetIcon />,
-  },
-  {
-    name: "Length",
-    icon: <RulerIcon />,
-  },
-  {
-    name: "TagInfo",
-    icon: <InfoIcon />,
-  },
-  {
-    name: "Play",
-    icon: <PlayIcon />, // Add Play icon
-  },
-];
-
-const getViewerSpecificActions: {
-  [key: string]: { name: string; icon: ReactElement }[];
-} = {
-  DcmDisplay: actions,
-  NiftiDisplay: actions,
-  ImageDisplay: actions,
-};
-
-export const DicomHeader = ({
-  handleEvents,
-  viewerName,
-  fullScreen,
-  actionState,
-}: {
-  viewerName: string;
-  handleEvents: (action: string, previouslyActive: string) => void;
-  fullScreen: boolean;
-  actionState: ActionState;
-}) => {
-  const specificActions = getViewerSpecificActions[viewerName];
-
-  const appLauncherItems =
-    specificActions &&
-    specificActions.length > 0 &&
-    specificActions.map((action) => {
-      const spacer: {
-        xl?: "spacerLg";
-        lg?: "spacerLg";
-        md?: "spacerMd";
-        sm?: "spacerSm";
-      } = {
-        xl: "spacerLg",
-        lg: "spacerLg",
-        md: "spacerMd",
-        sm: "spacerSm",
-      };
-
-      // Dynamically set the icon for Play/Pause button
-      let icon = action.icon;
-      if (action.name === "Play") {
-        icon = actionState.Play ? <PauseIcon /> : <PlayIcon />;
-      }
-
-      return (
-        <ToolbarItem spacer={spacer} key={action.name}>
-          <Tooltip content={<span>{action.name}</span>}>
-            <Button
-              className={`${
-                fullScreen ? "large-button" : "small-button"
-              } button-style`}
-              variant={
-                actionState[action.name] === true ? "primary" : "control"
-              }
-              size="sm"
-              icon={icon}
-              onClick={(ev) => {
-                const previouslyActive = Object.keys(actionState)[0];
-                ev.preventDefault();
-                handleEvents(action.name, previouslyActive);
-              }}
-              aria-label={action.name}
-            />
-          </Tooltip>
-        </ToolbarItem>
-      );
-    });
-
-  return <Toolbar className="centered-container">{appLauncherItems}</Toolbar>;
-};
+}

src/components/Preview/HelperComponent.tsx

@@ -85,7 +85,7 @@ export const TagInfoModal = ({
         placement="right"
         onClose={() => handleModalToggle("TagInfo", !isModalOpen)}
         open={isModalOpen}
-        width={720} // You can adjust this value as needed
+        width={720}
       >
         {content}
       </Drawer>

src/components/Preview/displays/DcmDisplay.tsx

@@ -1,7 +1,5 @@
 import type { FileBrowserFolderFile, PACSFile } from "@fnndsc/chrisapi";
 import type * as React from "react";
-import type { IFileBlob } from "../../../api/model";
-import type { ActionState } from "../FileDetailView";
 import {
   CatchallDisplay,
   DcmDisplay,
@@ -29,14 +27,9 @@ const components = {
 };
 
 interface ViewerDisplayProps {
+  selectedFile: FileBrowserFolderFile | PACSFile;
   viewerName: string;
   preview?: string;
-  actionState: ActionState;
-  selectedFile: FileBrowserFolderFile | PACSFile;
-  list?: IFileBlob[];
-  fetchMore?: boolean;
-  handlePagination?: () => void;
-  filesLoading?: boolean;
 }
 
 const ViewerDisplay: React.FC<ViewerDisplayProps> = (

src/components/Preview/displays/ViewerDisplay.tsx

@@ -142,7 +142,7 @@ export const handleEvents = (
   const activeTool = Object.keys(actionState)[0];
   const previousTool = actionState.previouslyActive as string;
   const id = toolGroup?.id;
-  if (activeTool === "TagInfo" || activeTool === "Play") return;
+
   if (id) {
     toolGroup?.setToolPassive(previousTool);
     if (activeTool === "Reset") {
@@ -239,8 +239,11 @@ export const displayDicomImage = async (
       viewport,
       renderingEngine,
     };
-  } catch (e) {
-    throw new Error(e as string);
+  } catch (e: unknown) {
+    if (e instanceof Error) {
+      throw new Error(e.message);
+    }
+    throw new Error("Failed to render");
   }
 };