othmane/ohif-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update Viewer example to use updated components

Browse Source
This commit is contained in:
dannyrb 2020-05-14 22:24:50 -04:00 committed by James A. Petts
parent 50d0144e78
commit 66e3aea773
1 changed files with 111 additions and 134 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

245
platform/ui/src/views/Viewer/Viewer.mdx
View File

@ -17,9 +17,11 @@ import {
IconButton, IconButton,
StudyBrowser, StudyBrowser,
ViewportActionBar, ViewportActionBar,
ViewportGrid,
Notification, Notification,
DragAndDropProvider,
Viewport, Viewport,
ViewportGrid,
ViewportPane,
} from '@ohif/ui'; } from '@ohif/ui';
import Header from './components/Header'; import Header from './components/Header';
@ -50,141 +52,116 @@ import { tabs } from './studyBrowserMockData';
onEdit: (id) => alert(`Edit: ${id}`), onEdit: (id) => alert(`Edit: ${id}`),
}; };
return ( return (
<div> <DragAndDropProvider>
<Header /> <div>
<div <Header />
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full" <div
style={{ height: 'calc(100vh - 57px' }} className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
> style={{ height: 'calc(100vh - 57px' }}
<SidePanel >
side="left" <SidePanel
defaultComponentOpen='studies' side="left"
childComponents={{ defaultComponentOpen='studies'
iconName: 'group-layers', childComponents={{
iconLabel: 'Studies', iconName: 'group-layers',
label: 'Studies', iconLabel: 'Studies',
name: 'studies', label: 'Studies',
content: ( name: 'studies',
<StudyBrowser tabs={tabs} /> content: (
) <StudyBrowser tabs={tabs} />
}} )
/> }}
<div className="flex flex-col flex-1 h-full pb-2"> />
<div className="flex flex-2 w-100 border-b border-transparent h-12"> {/* TOOLBAR + GRID */}
<ViewportToolbar /> <div className="flex flex-col flex-1 h-full pb-2">
</div> <div className="flex flex-2 w-100 border-b border-transparent h-12">
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center"> <ViewportToolbar />
<ViewportGrid </div>
rows={1} {/* VIEWPORT GRID CONTAINER */}
cols={2} <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
viewportContents={[ <ViewportGrid numRows={1} numCols={2}>
<Viewport {[0, 1].map(viewportIndex => (
viewportIndex={0} <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
onSeriesChange={(direction) => alert(`Series ${direction}`)} <Viewport
studyData={{ viewportIndex={viewportIndex}
label: 'A', onSeriesChange={(direction) => alert(`Series ${direction}`)}
isTracked: true, studyData={{
isLocked: false, label: 'A',
studyDate: '07-Sep-2011', isTracked: true,
currentSeries: 1, isLocked: false,
seriesDescription: studyDate: '07-Sep-2011',
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ', currentSeries: 1,
modality: 'CT', seriesDescription:
patientInformation: { 'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
patientName: 'Smith, Jane', modality: 'CT',
patientSex: 'F', patientInformation: {
patientAge: '59', patientName: 'Smith, Jane',
MRN: '10000001', patientSex: 'F',
thickness: '5.0mm', patientAge: '59',
spacing: '1.25mm', MRN: '10000001',
scanner: 'Aquilion', thickness: '5.0mm',
}, spacing: '1.25mm',
}} scanner: 'Aquilion',
> },
<div className="flex justify-center items-center h-full"> }}
CONTENT
</div>
</Viewport>,
<Viewport
viewportIndex={1}
onSeriesChange={(direction) => alert(`Series ${direction}`)}
studyData={{
label: 'A',
isTracked: false,
isLocked: true,
studyDate: '07-Sep-2010',
currentSeries: 2,
seriesDescription:
'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
modality: 'SR',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
thickness: '2.0mm',
spacing: '1.25mm',
scanner: 'Aquilion',
},
}}
>
<div className="flex justify-center items-center h-full">
CONTENT
</div>
</Viewport>,
]}
setActiveViewportIndex={setActiveViewportIndex}
activeViewportIndex={activeViewportIndex}
/>
</div>
</div>
<SidePanel
side="right"
defaultComponentOpen="measurements"
childComponents={{
iconName: 'list-bullets',
iconLabel: 'Measure',
label: 'Measurements',
name: 'measurements',
content: (
<MeasurementsPanel
descriptionData={descriptionData}
measurementTableData={measurementTableData}
actionButtons={
<React.Fragment>
<ButtonGroup onClick={() => alert('Export')}>
<Button
className="text-white border-primary-main bg-black text-base py-2 px-2"
size="initial"
color="inherit"
>
Export
</Button>
<IconButton
className="bg-black border-primary-main px-2 text-white px-2"
color="inherit"
size="initial"
>
<Icon name="arrow-down" />
</IconButton>
</ButtonGroup>
<Button
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
variant="outlined"
size="initial"
color="inherit"
onClick={() => alert('Create Report')}
> >
Create Report <div className="flex justify-center items-center h-full">
</Button> CONTENT
</React.Fragment> </div>
} </Viewport>
/> </ViewportPane>)
) )}
}} </ViewportGrid>
/> </div>
</div>
<SidePanel
side="right"
defaultComponentOpen="measurements"
childComponents={{
iconName: 'list-bullets',
iconLabel: 'Measure',
label: 'Measurements',
name: 'measurements',
content: (
<MeasurementsPanel
descriptionData={descriptionData}
measurementTableData={measurementTableData}
actionButtons={
<React.Fragment>
<ButtonGroup onClick={() => alert('Export')}>
<Button
className="text-white border-primary-main bg-black text-base py-2 px-2"
size="initial"
color="inherit"
>
Export
</Button>
<IconButton
className="bg-black border-primary-main px-2 text-white px-2"
color="inherit"
size="initial"
>
<Icon name="arrow-down" />
</IconButton>
</ButtonGroup>
<Button
className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
variant="outlined"
size="initial"
color="inherit"
onClick={() => alert('Create Report')}
>
Create Report
</Button>
</React.Fragment>
}
/>
)
}}
/>
</div>
</div> </div>
</div> </DragAndDropProvider>
); );
}} }}
</Playground> </Playground>