From 928dc9f7b07774dd6386207b243de7d014886a19 Mon Sep 17 00:00:00 2001 From: Gustavo Lelis Date: Tue, 21 Apr 2020 15:12:46 -0300 Subject: [PATCH] Updating mockData --- .../components/StudyBrowser/StudyBrowser.jsx | 136 ++++++++++++------ .../src/components/StudyBrowser/mockData.js | 56 -------- .../ui/src/components/Thumbnail/Thumbnail.jsx | 12 +- .../ui/src/components/Thumbnail/Thumbnail.mdx | 6 +- .../ThumbnailList/ThumbnailList.jsx | 100 +++++++------ .../ThumbnailTracked/ThumbnailTracked.jsx | 18 +-- .../ThumbnailTracked/ThumbnailTracked.mdx | 8 +- platform/ui/src/views/Viewer/Viewer.mdx | 4 +- .../src/views/Viewer/studyBrowserMockData.js | 77 ++++++++++ 9 files changed, 249 insertions(+), 168 deletions(-) delete mode 100644 platform/ui/src/components/StudyBrowser/mockData.js create mode 100644 platform/ui/src/views/Viewer/studyBrowserMockData.js diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.jsx index 23d3ab0ec..760a89b3f 100644 --- 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 ( + + { + setStudyActive(isActive ? null : studyInstanceUid); + }} + /> + {isActive && thumbnails && ( + + )} + + ); + } + ); + }; + return (
@@ -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 ( ); })}
- {studyGroup[studyGroupSelected].map( - ({ - studyInstanceUid, - studyDate, - studyDescription, - instances, - modalities, - trackedSeries, - thumbnails, - }) => { - const isActive = studyActive === studyInstanceUid; - return ( - - { - setStudyActive(isActive ? null : studyInstanceUid); - }} - /> - {isActive && thumbnails && ( - - )} - - ); - } - )} + {getTabContent()}
); }; +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; diff --git a/platform/ui/src/components/StudyBrowser/mockData.js b/platform/ui/src/components/StudyBrowser/mockData.js deleted file mode 100644 index 337912300..000000000 --- a/platform/ui/src/components/StudyBrowser/mockData.js +++ /dev/null @@ -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 }; diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.jsx b/platform/ui/src/components/Thumbnail/Thumbnail.jsx index 4f76ead8d..50780aa29 100644 --- 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}
- {instanceNumber} + {numInstances}
-
{seriesDescription}
+
{description}
); }; @@ -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, }; diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.mdx b/platform/ui/src/components/Thumbnail/Thumbnail.mdx index dc658e29d..22298637d 100644 --- 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';
alert('Thumbnail was clicked!')} + isActive={false} />
diff --git a/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx b/platform/ui/src/components/ThumbnailList/ThumbnailList.jsx index 10ebc2df8..375ecbd91 100644 --- 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 (
{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 ( - {}} - /> - ); - } else { - return ( - { - setThumbnailActive( - thumbnailActive === displaySetInstanceUid - ? null - : displaySetInstanceUid - ); - }} - /> - ); + switch (componentType) { + case 'thumbnail': + return ( + {}} + /> + ); + case 'thumbnailNoImage': + return ( + {}} + /> + ); + case 'thumbnailTracked': + return ( + {}} + /> + ); + 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, }) ), }; diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.jsx index 921180d08..e979c3aab 100644 --- 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 = ({ @@ -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; diff --git a/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx b/platform/ui/src/components/ThumbnailTracked/ThumbnailTracked.mdx index cbb408d7b..43da65367 100644 --- 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';
alert('Thumbnail was clicked!')} - isTracked={true} viewportIdentificator="A" + isTracked={true} + isActive={false} />
diff --git a/platform/ui/src/views/Viewer/Viewer.mdx b/platform/ui/src/views/Viewer/Viewer.mdx index ac86f8f8e..2ab180950 100644 --- 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 @@ -60,7 +62,7 @@ import ViewportToolbar from './components/ViewportToolBar'; componentLabel="Studies" defaultIsOpen={true} > - +
diff --git a/platform/ui/src/views/Viewer/studyBrowserMockData.js b/platform/ui/src/views/Viewer/studyBrowserMockData.js new file mode 100644 index 000000000..f0cc392bd --- /dev/null +++ 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 };