Start adding StudyBrowser

extensions/default/src/getPanelModule.js

@@ -1,34 +1,128 @@
 import React from 'react';
-import {
+import { StudyBrowser } from '@ohif/ui';
-  HelloWorldContext,
-  AnotherHelloWorldContext,
-} from './getContextModule';
 
 import { useViewModel, displaySetManager } from '@ohif/core';
 
-function helloWorldComponent({}) {
+function displaySetsToStudyPanelInfo(displaySets) {
+  console.log(displaySets);
+
+  const studies = {};
+  displaySets.forEach(displaySet => {
+    // TODO
+    displaySet.componentType = 'thumbnailTracked';
+    displaySet.viewportIdentificator = 'A';
+    displaySet.isTracked = true;
+    displaySet.seriesNumber = displaySet.SeriesNumber;
+    displaySet.numInstances = displaySet.numImageFrames;
+    displaySet.description = displaySet.SeriesDescription;
+
+    if (!Object.keys(studies).includes(displaySet.StudyInstanceUID)) {
+      studies[displaySet.StudyInstanceUID] = {
+        date: displaySet.StudyDate,
+        description: 'TEST',
+        modalities: 'TEST---TEST',
+        date: '01-Jan-1999',
+        displaySets: [],
+      };
+    }
+
+    studies[displaySet.StudyInstanceUID].displaySets.push(displaySet);
+    studies[displaySet.StudyInstanceUID].numInstances +=
+      displaySet.numImageFrames;
+  });
+
+  const allStudies = Object.keys(studies).map(StudyInstanceUID => {
+    const study = studies[StudyInstanceUID];
+    return {
+      studyInstanceUid: StudyInstanceUID,
+      ...study,
+    };
+  });
+
+  const primary = allStudies.find(study => {
+    return true; // TODO: check study.StudyInstanceUID matches queryparam?
+  });
+
+  console.log(primary);
+
+  const recentStudies = allStudies.filter(study => {
+    return true; // TODO: check study.date
+  });
+
+  /*const primary = {
+    studyInstanceUid: '1',
+    date: '07-Sept-2010',
+    description: 'CHEST/ABD/PELVIS W/CONTRAST',
+    numInstances: 902,
+    modalities: 'CT,SR',
+    displaySets: [
+      {
+        displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+        description: 'Multiple line image series description lorem sit',
+        seriesNumber: 1,
+        numInstances: 68,
+        componentType: 'thumbnailTracked',
+        viewportIdentificator: 'A',
+        isTracked: true,
+      },
+    ],
+  };*/
+
+  const tabs = [
+    {
+      name: 'primary',
+      label: 'Primary',
+      studies: [primary],
+    },
+    {
+      name: 'recent',
+      label: 'Recent',
+      studies: recentStudies,
+    },
+    {
+      name: 'all',
+      label: 'All',
+      studies: allStudies,
+    },
+  ];
+
+  return tabs;
+}
+
+function StudyBrowserPanel({}) {
   const viewModel = useViewModel();
 
   console.log(viewModel);
 
-  viewModel.displaySetInstanceUids.forEach(uid => {
+  const displaySets = viewModel.displaySetInstanceUids.map(
-    console.log(displaySetManager.getDisplaySetByUID(uid));
+    displaySetManager.getDisplaySetByUID
-  });
-
-  debugger;
-
-  return (
-    <HelloWorldContext.Consumer>
-      {value => (
-        <div>
-          <h2 style={{ color: 'white' }}>
-            {'Hello world. Context value:'}
-            {JSON.stringify(value)}
-          </h2>
-        </div>
-      )}
-    </HelloWorldContext.Consumer>
   );
+
+  let tabs;
+
+  if (displaySets.length) {
+    tabs = displaySetsToStudyPanelInfo(displaySets);
+  } else {
+    tabs = [
+      {
+        name: 'primary',
+        label: 'Primary',
+        studies: [],
+      },
+      {
+        name: 'recent',
+        label: 'Recent',
+        studies: [],
+      },
+      {
+        name: 'all',
+        label: 'All',
+        studies: [],
+      },
+    ];
+  }
+
+  return <StudyBrowser tabs={tabs} />;
 }
 
 function getPanelModule() {
@@ -38,14 +132,14 @@ function getPanelModule() {
       iconName: 'group-layers',
       iconLabel: 'Studies',
       label: 'Studies',
-      component: helloWorldComponent,
+      component: StudyBrowserPanel,
     },
     {
       name: 'measure',
       iconName: 'list-bullets',
       iconLabel: 'Measure',
       label: 'Measurements',
-      component: helloWorldComponent,
+      component: StudyBrowserPanel,
     },
   ];
 }

extensions/default/src/getSopClassHandlerModule.js

@@ -24,7 +24,7 @@ const makeDisplaySet = instances => {
     FrameRate: instance.FrameTime,
     Modality: instance.Modality,
     isMultiFrame: isMultiFrame(instance),
-    mumImageFrames: instances.length,
+    numImageFrames: instances.length,
     SOPClassHandlerId: `${id}.sopClassHandlerModule.${sopClassHandlerName}`,
   });
 

platform/core/src/displaySetManager.js

@@ -33,17 +33,17 @@ class DisplaySetManager {
     return addedDisplaySetUids;
   }
 
-  getDisplaySetsForSeries(SeriesInstanceUID) {
+  getDisplaySetsForSeries = SeriesInstanceUID => {
     return this.displaySets.filter(
       displaySet => displaySet.SeriesInstanceUID === SeriesInstanceUID
     );
-  }
+  };
 
-  getDisplaySetByUID(displaySetInstanceUid) {
+  getDisplaySetByUID = displaySetInstanceUid => {
     return this.displaySets.find(
       displaySet => displaySet.displaySetInstanceUid === displaySetInstanceUid
     );
-  }
+  };
 
   makeDisplaySets = instances => {
     if (!instances || !instances.length) {