155 lines
4.9 KiB
Plaintext
155 lines
4.9 KiB
Plaintext
---
|
|
name: Viewer
|
|
menu: Views
|
|
route: examples/viewer
|
|
---
|
|
|
|
import { Playground, Props } from 'docz';
|
|
import {
|
|
NavBar,
|
|
SidePanel,
|
|
Svg,
|
|
MeasurementsPanel,
|
|
SegmentationTable,
|
|
ButtonGroup,
|
|
Button,
|
|
Icon,
|
|
IconButton,
|
|
StudyBrowser,
|
|
ViewportActionBar,
|
|
ViewportGrid,
|
|
Notification,
|
|
} from '@ohif/ui';
|
|
|
|
import Header from './components/Header';
|
|
import ViewportToolbar from './components/ViewportToolBar';
|
|
|
|
import { tabs } from './studyBrowserMockData';
|
|
|
|
# Viewer
|
|
|
|
<Playground>
|
|
{() => {
|
|
const [activeMeasurementItem, setActiveMeasurementItem] = useState(null);
|
|
const descriptionData = {
|
|
date: '07-Sep-2010',
|
|
modality: 'CT',
|
|
description: 'CHEST/ABD/PELVIS W CONTRAST',
|
|
};
|
|
const measurementTableData = {
|
|
title: 'Measurements',
|
|
amount: 10,
|
|
data: new Array(10).fill({}).map((el, i) => ({
|
|
id: i + 1,
|
|
label: 'Label short description',
|
|
displayText: '24.0 x 24.0 mm (S:4, I:22)',
|
|
isActive: activeMeasurementItem === i + 1,
|
|
})),
|
|
onClick: (id) => setActiveMeasurementItem((s) => (s === id ? null : id)),
|
|
onEdit: (id) => alert(`Edit: ${id}`),
|
|
};
|
|
return (
|
|
<div>
|
|
<Header />
|
|
<div
|
|
className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
|
|
style={{ height: 'calc(100vh - 57px' }}
|
|
>
|
|
<SidePanel
|
|
side="left"
|
|
defaultComponentOpen='studies'
|
|
childComponents={{
|
|
iconName: 'group-layers',
|
|
iconLabel: 'Studies',
|
|
label: 'Studies',
|
|
name: 'studies',
|
|
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">
|
|
<ViewportToolbar />
|
|
</div>
|
|
<div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center">
|
|
<ViewportGrid
|
|
rows={1}
|
|
cols={2}
|
|
viewportContents={[
|
|
<div className="flex flex-col h-full">
|
|
<ViewportActionBar isTracked modality="CT" />
|
|
<Notification
|
|
text="Track all measurement for this series?"
|
|
type="info"
|
|
actionButtons={
|
|
<div>
|
|
<Button>No</Button>
|
|
<Button className="ml-2">No, do not ask again</Button>
|
|
<Button className="ml-2" color="primary">
|
|
Yes
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>
|
|
</div>,
|
|
<div className="flex flex-col h-full">
|
|
<ViewportActionBar isTracked={false} modality="CT" />
|
|
</div>,
|
|
]}
|
|
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
|
|
</Button>
|
|
</React.Fragment>
|
|
}
|
|
/>
|
|
)
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}}
|
|
</Playground>
|