feat: Viewport component and API definition

platform/ui/index.js

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

platform/ui/src/components/Viewport/Viewport.jsx

@@ -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;

platform/ui/src/components/Viewport/index.js

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

platform/ui/src/components/index.js

@@ -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,
 };

platform/ui/src/views/Viewer/Viewer.mdx

@@ -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">
+                  <Viewport
-                    <ViewportActionBar isTracked modality="CT" />
+                    viewportIndex={0}
-                    <Notification
+                    onSeriesChange={() => {}}
-                      text="Track all measurement for this series?"
+                    studyData={{
-                      type="info"
+                      isTracked: false,
-                      actionButtons={
+                      studyDate: '07-Sep-2010',
-                        <div>
+                      currentSeries: 1,
-                          <Button>No</Button>
+                      modality: 'CT',
-                          <Button className="ml-2">No, do not ask again</Button>
+                      patientInformation: {
-                          <Button className="ml-2" color="primary">
+                        patientName: 'Smith, Jane',
-                            Yes
+                        patientSex: 'F',
-                          </Button>
+                        patientAge: '59',
-                        </div>
+                        MRN: '10000001',
-                      }
+                        thickness: '5.0mm',
-                    />
+                        spacing: '1.25mm',
-                  </div>,
+                        scanner: 'Aquilion',
-                  <div className="flex flex-col h-full">
+                      },
-                    <ViewportActionBar isTracked={false} modality="CT" />
+                    }}
-                  </div>,
+                    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}