feat: Support for local DICOM drag and drop (#2445)

* Added drag and drop from local and local data source

* fix: dicom SR drag and drop from local

platform/viewer/src/routes/Local/Local.jsx

@@ -0,0 +1,116 @@
+import React, { useEffect, useRef } from 'react'
+import classnames from 'classnames'
+import { MODULE_TYPES } from '@ohif/core'
+
+import PropTypes from 'prop-types'
+import Dropzone from 'react-dropzone'
+import filesToStudies from './filesToStudies'
+
+import { extensionManager } from '../../App.jsx'
+
+import { Icon, Button } from '@ohif/ui'
+
+const getLoadButton = (onDrop, text, isDir) => {
+  return (
+    <Dropzone onDrop={onDrop} noDrag>
+      {({ getRootProps, getInputProps }) => (
+        <div {...getRootProps()}>
+          <Button
+            rounded="full"
+            variant="contained" // outlined
+            disabled={false}
+            endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
+            className={classnames('font-bold', 'ml-2')}
+            onClick={() => { }}
+          >
+            {text}
+            {isDir ? (
+              <input
+                {...getInputProps()}
+                webkitdirectory="true"
+                mozdirectory="true"
+              />
+            ) : (
+              <input {...getInputProps()} />
+            )}
+          </Button>
+        </div>
+      )}
+    </Dropzone>)
+}
+
+function Local(props) {
+  const { history } = props
+  const dropzoneRef = useRef()
+
+  // Initializing the dicom local dataSource
+  const dataSourceModules = extensionManager.modules[MODULE_TYPES.DATA_SOURCE]
+  const localDataSources = dataSourceModules.reduce((acc, curr) => {
+    const mods = []
+    curr.module.forEach((mod) => {
+      if (mod.type === 'localApi') {
+        mods.push(mod)
+      }
+    })
+    return acc.concat(mods)
+  }, [])
+
+  const fistLocalDataSource = localDataSources[0]
+  const dataSource = fistLocalDataSource.createDataSource({})
+
+  const onDrop = async (acceptedFiles) => {
+    const studies = await filesToStudies(acceptedFiles, dataSource)
+    // Todo: navigate to work list and let user select a mode
+    history.push(`/viewer/dicomlocal?StudyInstanceUIDs=${studies[0]}`)
+  }
+
+  // Set body style
+  useEffect(() => {
+    document.body.classList.add('bg-black')
+    return () => {
+      document.body.classList.remove('bg-black')
+    }
+  }, [])
+
+  return (
+    <Dropzone ref={dropzoneRef} onDrop={onDrop} noClick>
+      {({ getRootProps, getInputProps }) => (
+        <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
+          <div className="h-screen w-screen flex justify-center items-center ">
+            <div className="py-8 px-8 mx-auto bg-secondary-dark shadow-md space-y-2 rounded-lg">
+              <img
+                className="block mx-auto h-10"
+                src="./customLogo.svg"
+                alt="OHIF"
+              />
+              <div className="text-center space-y-2 pt-4">
+                <div className="space-y-2">
+                  <p className="text-blue-300 text-base">
+                    Note: You data is not uploaded to any server, it will stay
+                    in your local browser application
+                  </p>
+                  <p className="text-xg text-primary-active font-semibold pt-8">
+                    Drag and Drop DICOM files here to load them in the Viewer
+                  </p>
+                  <p className="text-blue-300 text-lg">Or click to </p>
+                </div>
+              </div>
+              <div className="flex justify-around pt-4">
+                {getLoadButton(onDrop, 'Load files', false)}
+                {getLoadButton(onDrop, 'Load folders', true)}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </Dropzone>
+  )
+}
+
+Local.propTypes = {
+  history: PropTypes.shape({
+    push: PropTypes.func,
+  }).isRequired,
+};
+
+export default Local

platform/viewer/src/routes/Local/dicomFileLoader.js

@@ -0,0 +1,29 @@
+import dcmjs from 'dcmjs';
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
+import FileLoader from './fileLoader';
+
+
+const DICOMFileLoader = new (class extends FileLoader {
+  fileType = 'application/dicom';
+  loadFile(file, imageId) {
+    return cornerstoneWADOImageLoader.wadouri.loadFileRequest(imageId);
+  }
+
+  getDataset(image, imageId) {
+    const dicomData = dcmjs.data.DicomMessage.readFile(image);
+
+    const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
+      dicomData.dict
+    );
+
+    dataset.url = imageId
+
+    dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(
+      dicomData.meta
+    );
+
+    return dataset
+  }
+})();
+
+export default DICOMFileLoader;

platform/viewer/src/routes/Local/fileLoader.js

@@ -0,0 +1,6 @@
+export default class FileLoader {
+  fileType;
+  loadFile(file, imageId) { }
+  getDataset(image, imageId) { }
+  getStudies(dataset, imageId) { }
+}

platform/viewer/src/routes/Local/fileLoaderService.js

@@ -0,0 +1,40 @@
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
+import { DicomMetadataStore } from '@ohif/core';
+
+import FileLoader from './fileLoader';
+import PDFFileLoader from './pdfFileLoader';
+import DICOMFileLoader from './dicomFileLoader';
+
+class FileLoaderService extends FileLoader {
+  fileType;
+  loader;
+  constructor(file) {
+    super();
+    const fileType = file && file.type;
+    this.loader = this.getLoader(fileType);
+    this.fileType = this.loader.fileType;
+  }
+
+  addFile(file) {
+    return cornerstoneWADOImageLoader.wadouri.fileManager.add(file);
+  }
+
+  loadFile(file, imageId) {
+    return this.loader.loadFile(file, imageId);
+  }
+
+  getDataset(image, imageId) {
+    return this.loader.getDataset(image, imageId);
+  }
+
+  getLoader(fileType) {
+    if (fileType === 'application/pdf') {
+      return PDFFileLoader;
+    } else {
+      // Default to dicom loader
+      return DICOMFileLoader;
+    }
+  }
+}
+
+export default FileLoaderService;

platform/viewer/src/routes/Local/filesToStudies.js

@@ -0,0 +1,26 @@
+import FileLoaderService from './fileLoaderService';
+import { DicomMetadataStore } from '@ohif/core';
+
+const processFile = async file => {
+  try {
+    const fileLoaderService = new FileLoaderService(file);
+    const imageId = fileLoaderService.addFile(file);
+    const image = await fileLoaderService.loadFile(file, imageId);
+    const dicomJSONDataset = await fileLoaderService.getDataset(image, imageId);
+
+    DicomMetadataStore.addInstance(dicomJSONDataset);
+  } catch (error) {
+    console.log(
+      error.name,
+      ':Error when trying to load and process local files:',
+      error.message
+    );
+  }
+};
+
+export default async function filesToStudies(files) {
+  const processFilesPromises = files.map(processFile);
+  await Promise.all(processFilesPromises);
+
+  return DicomMetadataStore.getStudyInstanceUIDs();
+}

platform/viewer/src/routes/Local/index.js

@@ -0,0 +1 @@
+export { default } from './Local';

platform/viewer/src/routes/Local/pdfFileLoader.js

@@ -0,0 +1,17 @@
+import cornerstoneWADOImageLoader from 'cornerstone-wado-image-loader';
+import FileLoader from './fileLoader';
+
+const PDFFileLoader = new (class extends FileLoader {
+  fileType = 'application/pdf';
+  loadFile(file, imageId) {
+    return cornerstoneWADOImageLoader.wadouri.loadFileRequest(imageId);
+  }
+
+  getDataset(image, imageId) {
+    const dataset = {};
+    dataset.imageId = image.imageId || imageId;
+    return dataset;
+  }
+})();
+
+export default PDFFileLoader;