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

53
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,6 +52,7 @@ import { tabs } from './studyBrowserMockData';
onEdit: (id) => alert(`Edit: ${id}`), onEdit: (id) => alert(`Edit: ${id}`),
}; };
return ( return (
<DragAndDropProvider>
<div> <div>
<Header /> <Header />
<div <div
@ -69,17 +72,18 @@ import { tabs } from './studyBrowserMockData';
) )
}} }}
/> />
{/* TOOLBAR + GRID */}
<div className="flex flex-col flex-1 h-full pb-2"> <div className="flex flex-col flex-1 h-full pb-2">
<div className="flex flex-2 w-100 border-b border-transparent h-12"> <div className="flex flex-2 w-100 border-b border-transparent h-12">
<ViewportToolbar /> <ViewportToolbar />
</div> </div>
{/* VIEWPORT GRID CONTAINER */}
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center"> <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
<ViewportGrid <ViewportGrid numRows={1} numCols={2}>
rows={1} {[0, 1].map(viewportIndex => (
cols={2} <ViewportPane key={viewportIndex} className="m-1" isActive={false} onDrop={() => {}}>
viewportContents={[
<Viewport <Viewport
viewportIndex={0} viewportIndex={viewportIndex}
onSeriesChange={(direction) => alert(`Series ${direction}`)} onSeriesChange={(direction) => alert(`Series ${direction}`)}
studyData={{ studyData={{
label: 'A', label: 'A',
@ -104,38 +108,10 @@ import { tabs } from './studyBrowserMockData';
<div className="flex justify-center items-center h-full"> <div className="flex justify-center items-center h-full">
CONTENT CONTENT
</div> </div>
</Viewport>, </Viewport>
<Viewport </ViewportPane>)
viewportIndex={1} )}
onSeriesChange={(direction) => alert(`Series ${direction}`)} </ViewportGrid>
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>
</div> </div>
<SidePanel <SidePanel
@ -185,6 +161,7 @@ import { tabs } from './studyBrowserMockData';
/> />
</div> </div>
</div> </div>
</DragAndDropProvider>
); );
}} }}
</Playground> </Playground>