Updating mockData

2020-04-21 15:12:46 -03:00 · 2020-04-21 15:12:46 -03:00 · 928dc9f7b0
commit 928dc9f7b0
parent 19aec45797
9 changed files with 249 additions and 168 deletions
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx
@ -1,23 +1,60 @@
 import React, { useState } from 'react';
+import PropTypes from 'prop-types';
 import classnames from 'classnames';

 import { ButtonGroup, Button, StudyItem, ThumbnailList } from '@ohif/ui';

-import { studyWithSR, studySimple } from './mockData';
-const studyGroupTypes = ['Primary', 'Recent', 'All'];
-const studyGroup = {
-  Primary: [studySimple],
-  Recent: [studyWithSR, studySimple],
-  All: [studySimple, studyWithSR],
-};
-
 const buttonClasses = 'text-white text-base border-none bg-black p-2 min-w-18';
 const activeButtonClasses = 'bg-primary-main';

-const StudyBrowser = () => {
-  const [studyGroupSelected, setStudyGroupSelected] = useState('Recent');
+const getInitialActiveTab = (tabs) => {
+  return tabs && tabs[0] && tabs[0].name;
+};
+
+const StudyBrowser = ({ tabs }) => {
+  const [tabActive, setTabActive] = useState(getInitialActiveTab(tabs));
  const [studyActive, setStudyActive] = useState(null);

+  const getTabContent = () => {
+    const tabData = tabs.find((tab) => tab.name === tabActive);
+
+    if (!tabData || !tabData.studies || !Array.isArray(tabData.studies)) {
+      return;
+    }
+
+    return tabData.studies.map(
+      ({
+        studyInstanceUid,
+        studyDate,
+        studyDescription,
+        instances,
+        modalities,
+        trackedSeries,
+        thumbnails,
+      }) => {
+        const isActive = studyActive === studyInstanceUid;
+        return (
+          <React.Fragment key={studyInstanceUid}>
+            <StudyItem
+              studyDate={studyDate}
+              studyDescription={studyDescription}
+              instances={instances}
+              modalities={modalities}
+              trackedSeries={trackedSeries}
+              isActive={isActive}
+              onClick={() => {
+                setStudyActive(isActive ? null : studyInstanceUid);
+              }}
+            />
+            {isActive && thumbnails && (
+              <ThumbnailList thumbnails={thumbnails} />
+            )}
+          </React.Fragment>
+        );
+      }
+    );
+  };
+
  return (
    <React.Fragment>
      <div className="flex flex-row items-center justify-center border-b w-100 h-16 border-secondary-light p-4 bg-primary-dark">
@ -26,62 +63,69 @@ const StudyBrowser = () => {
          color="inherit"
          className="border border-secondary-light rounded-md"
        >
-          {studyGroupTypes.map((studyGroup) => {
-            const isActive = studyGroupSelected === studyGroup;
+          {tabs.map((tab) => {
+            const { name, label } = tab;
+            const isActive = tabActive === name;
            return (
              <Button
-                key={studyGroup}
+                key={name}
                className={classnames(
                  buttonClasses,
                  isActive && activeButtonClasses
                )}
                size="initial"
                onClick={() => {
-                  setStudyGroupSelected(studyGroup);
+                  setTabActive(name);
                  setStudyActive(null);
                }}
              >
-                {studyGroup}
+                {label}
              </Button>
            );
          })}
        </ButtonGroup>
      </div>
      <div className="flex flex-col flex-1 overflow-auto invisible-scrollbar">
-        {studyGroup[studyGroupSelected].map(
-          ({
-            studyInstanceUid,
-            studyDate,
-            studyDescription,
-            instances,
-            modalities,
-            trackedSeries,
-            thumbnails,
-          }) => {
-            const isActive = studyActive === studyInstanceUid;
-            return (
-              <React.Fragment key={studyInstanceUid}>
-                <StudyItem
-                  studyDate={studyDate}
-                  studyDescription={studyDescription}
-                  instances={instances}
-                  modalities={modalities}
-                  trackedSeries={trackedSeries}
-                  isActive={isActive}
-                  onClick={() => {
-                    setStudyActive(isActive ? null : studyInstanceUid);
-                  }}
-                />
-                {isActive && thumbnails && (
-                  <ThumbnailList thumbnails={thumbnails} />
-                )}
-              </React.Fragment>
-            );
-          }
-        )}
+        {getTabContent()}
      </div>
    </React.Fragment>
  );
 };

+StudyBrowser.propTypes = {
+  tabs: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired,
+      studies: PropTypes.arrayOf(
+        PropTypes.shape({
+          studyInstanceUid: PropTypes.string.isRequired,
+          date: PropTypes.string,
+          numInstances: PropTypes.number,
+          modality: PropTypes.string,
+          description: PropTypes.string,
+          displaySets: PropTypes.arrayOf(
+            PropTypes.shape({
+              displaySetInstanceUid: PropTypes.string.isRequired,
+              imageSrc: PropTypes.string,
+              imageAltText: PropTypes.string,
+              seriesDate: PropTypes.string,
+              seriesNumber: PropTypes.number,
+              numInstances: PropTypes.number,
+              description: PropTypes.string,
+              componentType: PropTypes.oneOf([
+                'thumbnail',
+                'thumbnailTracked',
+                'thumbnailNoImage',
+              ]).isRequired,
+              isTracked: PropTypes.bool,
+              viewportIdentificator: PropTypes.string,
+            })
+          ),
+        })
+      ).isRequired,
+    })
+  ),
+};
+
 export default StudyBrowser;
--- a/platform/ui/src/components/StudyBrowser/mockData.js
+++ b/platform/ui/src/components/StudyBrowser/mockData.js
@ -1,56 +0,0 @@
-const studyWithSR = {
-  studyInstanceUid: '1',
-  studyDate: '07-Sept-2010',
-  studyDescription: 'CHEST/ABD/PELVIS W/CONTRAST',
-  instances: 902,
-  modalities: 'CT,SR',
-  trackedSeries: 1,
-  thumbnails: [
-    {
-      displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
-      seriesDescription: 'Multiple line image series description lorem sit',
-      seriesNumber: 1,
-      instanceNumber: 68,
-      viewportIdentificator: 'A',
-      isTracked: true,
-    },
-    {
-      displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
-      seriesDescription: 'Multiple line image series description lorem sit',
-      seriesNumber: 1,
-      instanceNumber: 68,
-      viewportIdentificator: 'B',
-    },
-    {
-      displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
-      seriesDescription: 'Multiple line image series description lorem sit',
-      seriesNumber: 1,
-      instanceNumber: 68,
-    },
-    {
-      displaySetInstanceUid: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
-      seriesDescription: 'Multiple line description lorem ipsum dolor sit amet',
-      modality: 'SR',
-      seriesDate: '07-Sept-2010',
-    },
-  ],
-};
-
-const studySimple = {
-  studyInstanceUid: '2',
-  studyDate: '07-Sept-2010',
-  studyDescription: 'CHEST/ABD/PELVIS W/CONTRAST',
-  instances: 902,
-  modalities: 'CT',
-  trackedSeries: 0,
-  thumbnails: [
-    {
-      displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
-      seriesDescription: 'Multiple line image series description lorem sit',
-      seriesNumber: 1,
-      instanceNumber: 68,
-    },
-  ],
-};
-
-export { studyWithSR, studySimple };
--- a/platform/ui/src/components/Thumbnail/Thumbnail.jsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.jsx
@ -8,9 +8,9 @@ const Thumbnail = ({
  className,
  imageSrc,
  imageAltText,
-  seriesDescription,
+  description,
  seriesNumber,
-  instanceNumber,
+  numInstances,
  isActive,
  onClick,
 }) => {
@ -45,10 +45,10 @@ const Thumbnail = ({
          {seriesNumber}
        </div>
        <div className="flex flex-row items-center flex-1">
-          <Icon name="group-layers" className="w-3 mr-2" /> {instanceNumber}
+          <Icon name="group-layers" className="w-3 mr-2" /> {numInstances}
        </div>
      </div>
-      <div className="text-white text-base">{seriesDescription}</div>
+      <div className="text-white text-base">{description}</div>
    </div>
  );
 };
@ -57,9 +57,9 @@ Thumbnail.propTypes = {
  className: PropTypes.string,
  imageSrc: PropTypes.string,
  imageAltText: PropTypes.string,
-  seriesDescription: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
  seriesNumber: PropTypes.number.isRequired,
-  instanceNumber: PropTypes.number.isRequired,
+  numInstances: PropTypes.number.isRequired,
  isActive: PropTypes.bool.isRequired,
  onClick: PropTypes.func.isRequired,
 };
--- a/platform/ui/src/components/Thumbnail/Thumbnail.mdx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.mdx
@ -25,11 +25,11 @@ import { Thumbnail } from '@ohif/ui';
    <div className="w-56">
      <Thumbnail
        imageAltText="DisplaySet thumbnail image"
-        seriesDescription="Multiple line image series description lorem sit"
+        description="Multiple line image series description lorem sit"
        seriesNumber={4}
-        instanceNumber={902}
-        isActive={false}
+        numInstances={902}
        onClick={() => alert('Thumbnail was clicked!')}
+        isActive={false}
      />
    </div>
  </div>
--- a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
+++ b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx
@ -1,56 +1,61 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';

-import { Thumbnail, ThumbnailSR } from '@ohif/ui';
+import { Thumbnail, ThumbnailNoImage, ThumbnailTracked } from '@ohif/ui';

 const ThumbnailList = ({ thumbnails }) => {
-  const [thumbnailActive, setThumbnailActive] = useState(null);
-
  return (
    <div className="bg-black py-3">
      {thumbnails.map(
        ({
          displaySetInstanceUid,
-          seriesDescription,
+          description,
          seriesNumber,
-          instanceNumber,
+          numInstances,
          modality,
+          componentType,
          seriesDate,
          viewportIdentificator,
          isTracked,
+          isActive,
        }) => {
-          const isSR = modality && modality.toLowerCase() === 'sr';
-          const isActive = thumbnailActive === displaySetInstanceUid;
-
-          if (isSR) {
-            return (
-              <ThumbnailSR
-                key={displaySetInstanceUid}
-                modality={modality}
-                seriesDate={seriesDate}
-                seriesDescription={seriesDescription}
-                onClick={() => {}}
-              />
-            );
-          } else {
-            return (
-              <Thumbnail
-                key={displaySetInstanceUid}
-                seriesDescription={seriesDescription}
-                seriesNumber={seriesNumber}
-                instanceNumber={instanceNumber}
-                viewportIdentificator={viewportIdentificator}
-                isTracked={isTracked}
-                isActive={isActive}
-                onClick={() => {
-                  setThumbnailActive(
-                    thumbnailActive === displaySetInstanceUid
-                      ? null
-                      : displaySetInstanceUid
-                  );
-                }}
-              />
-            );
+          switch (componentType) {
+            case 'thumbnail':
+              return (
+                <Thumbnail
+                  key={displaySetInstanceUid}
+                  description={description}
+                  seriesNumber={seriesNumber}
+                  numInstances={numInstances}
+                  isActive={isActive}
+                  onClick={() => {}}
+                />
+              );
+            case 'thumbnailNoImage':
+              return (
+                <ThumbnailNoImage
+                  key={displaySetInstanceUid}
+                  modality={modality}
+                  seriesDate={seriesDate}
+                  description={description}
+                  onClick={() => {}}
+                />
+              );
+            case 'thumbnailTracked':
+              return (
+                <ThumbnailTracked
+                  key={displaySetInstanceUid}
+                  description={description}
+                  seriesNumber={seriesNumber}
+                  numInstances={numInstances}
+                  viewportIdentificator={viewportIdentificator}
+                  isTracked={isTracked}
+                  isActive={isActive}
+                  onClick={() => {}}
+                />
+              );
+            default:
+              return <></>;
          }
        }
      )}
@ -61,12 +66,21 @@ const ThumbnailList = ({ thumbnails }) => {
 ThumbnailList.propTypes = {
  thumbnails: PropTypes.arrayOf(
    PropTypes.shape({
-      displaySetInstanceUid: PropTypes.string,
-      seriesDescription: PropTypes.string,
-      seriesNumber: PropTypes.number,
-      instanceNumber: PropTypes.number,
-      modality: PropTypes.string,
+      displaySetInstanceUid: PropTypes.string.isRequired,
+      imageSrc: PropTypes.string,
+      imageAltText: PropTypes.string,
      seriesDate: PropTypes.string,
+      seriesNumber: PropTypes.number,
+      numInstances: PropTypes.number,
+      description: PropTypes.string,
+      componentType: PropTypes.oneOf([
+        'thumbnail',
+        'thumbnailTracked',
+        'thumbnailNoImage',
+      ]).isRequired,
+      viewportIdentificator: PropTypes.string,
+      isTracked: PropTypes.bool,
+      isActive: PropTypes.bool,
    })
  ),
 };
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
+++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx
@ -8,13 +8,13 @@ const ThumbnailTracked = ({
  className,
  imageSrc,
  imageAltText,
-  seriesDescription,
+  description,
  seriesNumber,
-  instanceNumber,
-  isActive,
+  numInstances,
  onClick,
  viewportIdentificator,
  isTracked,
+  isActive,
 }) => {
  const trackedIcon = isTracked ? 'circled-checkmark' : 'dotted-circle';

@ -85,9 +85,9 @@ const ThumbnailTracked = ({
      <Thumbnail
        imageSrc={imageSrc}
        imageAltText={imageAltText}
-        seriesDescription={seriesDescription}
+        description={description}
        seriesNumber={seriesNumber}
-        instanceNumber={instanceNumber}
+        numInstances={numInstances}
        isActive={isActive}
        onClick={onClick}
      />
@ -99,13 +99,13 @@ ThumbnailTracked.propTypes = {
  className: PropTypes.string,
  imageSrc: PropTypes.string,
  imageAltText: PropTypes.string,
-  seriesDescription: PropTypes.string.isRequired,
+  description: PropTypes.string.isRequired,
  seriesNumber: PropTypes.number.isRequired,
-  instanceNumber: PropTypes.number.isRequired,
-  isActive: PropTypes.bool.isRequired,
+  numInstances: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired,
-  isTracked: PropTypes.bool,
  viewportIdentificator: PropTypes.string,
+  isTracked: PropTypes.bool,
+  isActive: PropTypes.bool.isRequired,
 };

 export default ThumbnailTracked;
--- a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx
+++ b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx
@ -22,13 +22,13 @@ import { ThumbnailTracked } from '@ohif/ui';
    <div className="w-64">
      <ThumbnailTracked
        imageAltText="DisplaySet thumbnail image"
-        seriesDescription="Multiple line image series description lorem sit"
+        description="Multiple line image series description lorem sit"
        seriesNumber={4}
-        instanceNumber={902}
-        isActive={false}
+        numInstances={902}
        onClick={() => alert('Thumbnail was clicked!')}
-        isTracked={true}
        viewportIdentificator="A"
+        isTracked={true}
+        isActive={false}
      />
    </div>
  </div>
--- a/platform/ui/src/views/Viewer/Viewer.mdx
+++ b/platform/ui/src/views/Viewer/Viewer.mdx
@ -24,6 +24,8 @@ import {
 import Header from './components/Header';
 import ViewportToolbar from './components/ViewportToolBar';

+import { tabs } from './studyBrowserMockData';
+
 # Viewer

 <Playground>
@ -60,7 +62,7 @@ import ViewportToolbar from './components/ViewportToolBar';
            componentLabel="Studies"
            defaultIsOpen={true}
          >
-            <StudyBrowser />
+            <StudyBrowser tabs={tabs} />
          </SidePanel>
          <div className="flex flex-col flex-1 h-100">
            <div className="flex flex-2 w-100 border-b border-transparent h-12">
--- a/platform/ui/src/views/Viewer/studyBrowserMockData.js
+++ b/platform/ui/src/views/Viewer/studyBrowserMockData.js
@ -0,0 +1,77 @@
+const studyWithSR = {
+  studyInstanceUid: '1',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT,SR',
+  thumbnails: [
+    {
+      displaySetInstanceUid: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+      viewportIdentificator: 'A',
+      isTracked: true,
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+      viewportIdentificator: 'B',
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
+      description: 'Multiple line description lorem ipsum dolor sit amet',
+      modality: 'SR',
+      componentType: 'thumbnailNoImage',
+      seriesDate: '07-Sept-2010',
+    },
+  ],
+};
+
+const studySimple = {
+  studyInstanceUid: '2',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT',
+  displaySets: [
+    {
+      displaySetInstanceUid: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+  ],
+};
+
+const tabs = [
+  {
+    name: 'primary',
+    label: 'Primary',
+    studies: [studySimple],
+  },
+  {
+    name: 'recent',
+    label: 'Recent',
+    studies: [studyWithSR, studySimple],
+  },
+  {
+    name: 'all',
+    label: 'All',
+    studies: [studySimple, studyWithSR],
+  },
+];
+
+export { tabs };