dicom viewer

MetaCell · Oct 8, 2024 · 8c272c6 · 8c272c6
1 parent 694f8fb
commit 8c272c6
Show file tree

Hide file tree

Showing 9 changed files with 43 additions and 18 deletions.
diff --git a/examples/vite-redux-toolkit-react-app/package.json b/examples/vite-redux-toolkit-react-app/package.json
@@ -25,26 +25,24 @@
     "@metacell/geppetto-meta-ui": "^2.0.0",
     "@mui/icons-material": "^6.1.1",
     "@mui/material": "^6.1.1",
-    "@react-three/drei": "^9.114.2",
-    "@react-three/fiber": "^8.17.9",
     "@reduxjs/toolkit": "^2.2.7",
     "@types/react-redux": "^7.1.34",
     "ami.js": ">=0.32.0",
     "file-saver": "^2.0.5",
     "jszip": "^3.10.1",
+    "nifti-reader-js": "^0.6.8",
     "openseadragon": "^5.0.0",
     "react": "^18.3.1",
     "react-color": "^2.19.3",
     "react-dom": "^18.3.1",
     "react-redux": "^9.1.2",
-    "three": "^0.169.0",
-    "three-render-objects": "^1.29.5"
+    "three": "^0.118.0",
+    "three-render-objects": ">=1.13.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/three": "^0.169.0",
     "@vitejs/plugin-react": "^4.3.1",
     "eslint": "^9.9.0",
     "eslint-plugin-json": "^4.0.1",

diff --git a/examples/vite-redux-toolkit-react-app/public/assets/EX_SITU_2009_UCSD_T1_WEIGHTED.nii.gz b/examples/vite-redux-toolkit-react-app/public/assets/EX_SITU_2009_UCSD_T1_WEIGHTED.nii.gz
diff --git a/examples/vite-redux-toolkit-react-app/src/components/LeftSidebar.tsx b/examples/vite-redux-toolkit-react-app/src/components/LeftSidebar.tsx
@@ -8,8 +8,7 @@ import Drawer from "@mui/material/Drawer";
 import { Theme } from "@mui/material/styles";
 import {addWidget, deleteWidget} from "@metacell/geppetto-meta-client/common/layout/actions";
 import {
-  componentWidget,
-  threeDViewerWidget,
+  componentWidget, DicomViewerWidget,
 } from "../layoutManager/widgets.ts";
 import { useDispatch } from "react-redux";
 import { FormControlLabel, FormGroup } from "@mui/material";
@@ -23,7 +22,7 @@ const drawerWidth = 240;
 
 const viewers = {
   [ViewerType.default]: componentWidget(),
-  [ViewerType.ThreeD]: threeDViewerWidget(),
+  [ViewerType.dicomViewer]: DicomViewerWidget(),
 };
 
 interface LeftSidebarProps {

diff --git a/examples/vite-redux-toolkit-react-app/src/components/viewers/Dicom/DicomViewer.tsx b/examples/vite-redux-toolkit-react-app/src/components/viewers/Dicom/DicomViewer.tsx
@@ -0,0 +1,28 @@
+import React, { useState, useEffect } from 'react';
+import DicomViewer from '@metacell/geppetto-meta-ui/dicom-viewer/DicomViewer';
+import Loader from "@metacell/geppetto-meta-ui/loader/Loader";
+const DicomViewerExample: React.FC = () => {
+  const [ready, setReady] = useState<boolean>(true);
+
+  const onLoaded = () => {
+    setReady(true);
+  };
+
+  const data = '/assets/EX_SITU_2009_UCSD_T1_WEIGHTED.nii.gz';
+
+  return ready ? (
+    <DicomViewer
+      id="DicomViewer"
+      data={data}
+      onShiftClick="goToPoint"
+      onCtrlClick="toggleMode"
+      showDownloadButton={true}
+      onLoaded={onLoaded}
+      toolbarOptions={{ innerDivStyles: { backgroundColor: 'rgb(0,0,0,0)' } }}
+    />
+  ) : (
+    <Loader />
+  );
+};
+
+export default DicomViewerExample;
diff --git a/examples/vite-redux-toolkit-react-app/src/layoutManager/componentsMap.tsx b/examples/vite-redux-toolkit-react-app/src/layoutManager/componentsMap.tsx
@@ -1,9 +1,10 @@
 import MyComponent from '../components/MyComponent'
-import ThreeDViewer from "../components/viewers/ThreeD/ThreeDViewer.tsx";
+import DicomViewer from "../components/viewers/Dicom/DicomViewer.tsx";
+import DicomViewerExample from '@metacell/geppetto-meta-ui/dicom-viewer/DicomViewer';
 
 const componentMap = {
-  MyComponent,
-  ThreeDViewer,
+  'MyComponent': MyComponent,
+  'Dicom Viewer': DicomViewer
 }
 
 export default componentMap
diff --git a/examples/vite-redux-toolkit-react-app/src/layoutManager/widgets.ts b/examples/vite-redux-toolkit-react-app/src/layoutManager/widgets.ts
@@ -5,14 +5,14 @@ export const componentWidget = () => ({
   name: 'panel1',
   component: "MyComponent",
   panelName: 'leftPanel',
-  enableClose: true,
+  enableClose: false,
   status: WidgetStatus.ACTIVE
 });
 
-export const threeDViewerWidget = () => ({
-  id: '3D',
-  name: "3D Viewer",
-  component: 'ThreeDViewer',
+export const DicomViewerWidget = () => ({
+  id: 'Dicom Viewer',
+  name: "DicomViewer Viewer",
+  component: 'Dicom Viewer',
   panelName: "leftPanel",
   enableClose: false,
   status: WidgetStatus.ACTIVE

diff --git a/examples/vite-redux-toolkit-react-app/src/models/models.ts b/examples/vite-redux-toolkit-react-app/src/models/models.ts
@@ -1,6 +1,5 @@
 export enum ViewerType {
   default = "Default",
   ThreeD = "3D",
-  imageViewer= 'Image Viewer',
   dicomViewer= 'Dicom Viewer',
 }
diff --git a/examples/vite-redux-toolkit-react-app/src/redux/store.ts b/examples/vite-redux-toolkit-react-app/src/redux/store.ts
@@ -41,7 +41,6 @@ const getLayoutManagerAndStore = () => {
     preloadedState: Partial<RootState>;
     reducer: (state: RootState | undefined, action: Action) => RootState;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    middleware: (getDefaultMiddleware: ReturnType<ReturnType<any>>) => any;
   } = {
     reducer: rootReducer,
     middleware: middlewareEnhancer,

diff --git a/examples/vite-redux-toolkit-react-app/vite.config.ts b/examples/vite-redux-toolkit-react-app/vite.config.ts
@@ -7,4 +7,5 @@ export default defineConfig({
   optimizeDeps: {
     exclude: ['@metacell/geppetto-meta-core', '@metacell/geppetto-meta-client', '@metacell/geppetto-meta-ui']
   },
+  assetsInclude: ['**/*.nii.gz']
 })