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