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

feat: Viewport component and API definition

Browse Source
This commit is contained in:
Rodrigo Antinarelli 2020-04-21 21:23:36 -03:00 committed by James A. Petts
parent 08ebfd5865
commit 5f9535a74b
6 changed files with 83 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
platform/ui/index.js
View File

@ -52,6 +52,7 @@ export {
ToolbarButton,
Tooltip,
Typography,
Viewport,
ViewportActionBar,
ViewportGrid,
} from './src/components';

38
platform/ui/src/components/Viewport/Viewport.jsx Normal file
View File

@ -0,0 +1,38 @@
import React from 'react';
import { ViewportActionBar, Notification, Button } from '@ohif/ui';
const Viewport = ({
viewportIndex,
onSeriesChange,
studyData,
isTracked,
studyDate,
modality,
currentSeries,
patientInformation,
activeViewportIndex,
children,
}) => {
return (
<div className="flex flex-col h-full">
<ViewportActionBar isTracked modality={modality} />
{/* TODO: NOTIFICATION API DEFINITION - OHIF-112 */}
<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>
);
};
export default Viewport;

0
platform/ui/src/components/Viewport/Viewport.mdx Normal file
View File

2
platform/ui/src/components/Viewport/index.js Normal file
View File

@ -0,0 +1,2 @@
import Viewport from './Viewport';
export default Viewport;

2
platform/ui/src/components/index.js
View File

@ -38,6 +38,7 @@ import Toolbar from './Toolbar';
import ToolbarButton from './ToolbarButton';
import Tooltip from './Tooltip';
import Typography from './Typography';
import Viewport from './Viewport';
import ViewportActionBar from './ViewportActionBar';
import ViewportGrid from './ViewportGrid';
@ -82,6 +83,7 @@ export {
ToolbarButton,
Tooltip,
Typography,
Viewport,
ViewportActionBar,
ViewportGrid,
};

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

@ -19,6 +19,7 @@ import {
ViewportActionBar,
ViewportGrid,
Notification,
Viewport,
} from '@ohif/ui';
import Header from './components/Header';
@ -77,25 +78,45 @@ import { tabs } from './studyBrowserMockData';
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>,
<Viewport
viewportIndex={0}
onSeriesChange={() => {}}
studyData={{
isTracked: false,
studyDate: '07-Sep-2010',
currentSeries: 1,
modality: 'CT',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
thickness: '5.0mm',
spacing: '1.25mm',
scanner: 'Aquilion',
},
}}
isTracked={false}
activeViewportIndex={activeViewportIndex}
/>,
<Viewport
viewportIndex={1}
onSeriesChange={() => {}}
studyData={{
isTracked: false,
studyDate: '07-Sep-2010',
currentSeries: 1,
modality: 'CT',
patientInformation: {
patientName: 'Smith, Jane',
patientSex: 'F',
patientAge: '59',
MRN: '10000001',
},
}}
isTracked={false}
activeViewportIndex={activeViewportIndex}
/>,
]}
setActiveViewportIndex={setActiveViewportIndex}
activeViewportIndex={activeViewportIndex}