init

platform/ui/src/components/Viewport/Viewport.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import LegacyViewportActionBar from '../LegacyViewportActionBar';
+import Notification from '../Notification';
+
+interface StudyData {
+  label: string;
+  isTracked: boolean;
+  isLocked: boolean;
+  isRehydratable: boolean;
+  studyDate: string;
+  currentSeries: number;
+  seriesDescription: string;
+  modality: string;
+  patientInformation: {
+    patientName: string;
+    patientSex: string;
+    patientAge: string;
+    MRN: string;
+    thickness: string;
+    spacing: string;
+    scanner: string;
+  };
+}
+
+interface ViewportProps {
+  viewportId: string;
+  onArrowsClick: () => void;
+  studyData: StudyData;
+  children: React.ReactNode;
+}
+
+const Viewport: React.FC<ViewportProps> = ({ viewportId, onArrowsClick, studyData, children }) => {
+  return (
+    <div className="relative flex h-full flex-col">
+      <div className="absolute top-0 left-0 w-full">
+        <LegacyViewportActionBar
+          onArrowsClick={onArrowsClick}
+          studyData={studyData}
+        />
+
+        {/* TODO: NOTIFICATION API DEFINITION - OHIF-112 */}
+        <Notification
+          message="Track all measurement for this series?"
+          type="info"
+          actions={[
+            {
+              type: 'cancel',
+              text: 'No',
+              value: 0,
+            },
+            {
+              type: 'secondary',
+              text: 'No, do not ask again',
+              value: -1,
+            },
+            {
+              type: 'primary',
+              text: 'Yes',
+              value: 1,
+            },
+          ]}
+          onSubmit={value => {
+            if (typeof window !== 'undefined') {
+              window.alert(value);
+            }
+          }}
+        />
+      </div>
+
+      {/* STUDY IMAGE */}
+      <div
+        className="h-full w-full"
+        id={viewportId}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default Viewport;
+export type { ViewportProps, StudyData };

platform/ui/src/components/Viewport/__stories__/Viewport.stories.mdx

@@ -0,0 +1,73 @@
+import Viewport from '../Viewport';
+
+import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
+import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
+
+export const argTypes = {
+  component: Viewport,
+  title: 'Components/Viewport',
+};
+
+<Meta
+  title="Components/Viewport"
+  component={Viewport}
+/>
+
+export const ViewportTemplate = args => (
+  <div className="bg-primary-dark h-40">
+    <Viewport {...args} />
+  </div>
+);
+
+<Heading
+  title="Viewport"
+  componentRelativePath="Viewport/Viewport.tsx"
+/>
+
+- [Overview](#overview)
+- [Props](#props)
+- [Contribute](#contribute)
+
+## Overview
+
+Viewport is a component that renders the Viewport action bar.
+
+<Canvas>
+  <Story
+    name="Overview"
+    args={{
+      viewportIndex: 0,
+      onArrowsClick: direction => alert(`Annotation ${direction}`),
+      studyData: {
+        label: 'A',
+        isTracked: true,
+        isLocked: false,
+        isRehydratable: false,
+        studyDate: '07-Sep-2011',
+        currentSeries: 1,
+        seriesDescription:
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
+        patientInformation: {
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '5.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
+        },
+      },
+    }}
+  >
+    {ViewportTemplate.bind({})}
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of={Viewport} />
+
+## Contribute
+
+<Footer componentRelativePath="Viewport/__stories__/Viewport.stories.mdx" />

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

@@ -0,0 +1,5 @@
+import Viewport from './Viewport';
+import type { StudyData, ViewportProps } from './Viewport';
+
+export default Viewport;
+export type { StudyData, ViewportProps };