init

platform/ui/src/views/Viewer/Viewer.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import { LegacySidePanel, StudyBrowser } from '../../components';
+import { DragAndDropProvider } from '../../contextProviders';
+
+import Header from './components/Header';
+
+const Viewer = () => {
+  return (
+    <DragAndDropProvider>
+      <div>
+        <Header />
+        <div
+          className="flex w-full flex-1 flex-row flex-nowrap items-stretch overflow-hidden"
+          style={{ height: 'calc(100vh - 52px' }}
+        >
+          <LegacySidePanel
+            side="left"
+            iconName="group-layers"
+            iconLabel="Studies"
+            componentLabel="Studies"
+            defaultIsOpen={true}
+          >
+            <StudyBrowser />
+          </LegacySidePanel>
+          <div className="h-100 bg-primary-main flex flex-1 items-center justify-center overflow-hidden text-white">
+            {/* <ViewportToolbar /> */}
+            <div>CONTENT</div>
+          </div>
+          <LegacySidePanel
+            side="right"
+            iconName="list-bullets"
+            iconLabel="Measure"
+            componentLabel="Measurements"
+            defaultIsOpen={false}
+          >
+            <div className="flex justify-center p-2 text-white">panel placeholder</div>
+          </LegacySidePanel>
+        </div>
+      </div>
+    </DragAndDropProvider>
+  );
+};
+
+export default Viewer;

platform/ui/src/views/Viewer/components/Header.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { NavBar, Svg, Icon, IconButton } from '../../../components';
+
+const Header = () => {
+  return (
+    <NavBar className="justify-between border-b-4 border-black">
+      <div className="flex flex-1 justify-between">
+        <div className="flex items-center">
+          <div className="mr-3 inline-flex items-center">
+            <Icon
+              name="chevron-left"
+              className="text-primary-active w-8 cursor-pointer"
+              onClick={() => alert('Navigate to previous page')}
+            />
+            <a
+              href="#"
+              className="ml-4"
+            >
+              <Svg name="logo-ohif" />
+            </a>
+          </div>
+        </div>
+        <div className="flex items-center"></div>
+        <div className="flex items-center">
+          <span className="text-common-light mr-3 text-lg">FOR INVESTIGATIONAL USE ONLY</span>
+          <IconButton
+            variant="text"
+            color="inherit"
+            className="text-primary-active"
+            onClick={() => {}}
+          >
+            <React.Fragment>
+              <Icon name="settings" /> <Icon name="chevron-down" />
+            </React.Fragment>
+          </IconButton>
+        </div>
+      </div>
+    </NavBar>
+  );
+};
+
+export default Header;

platform/ui/src/views/Viewer/index.js

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

platform/ui/src/views/Viewer/studyBrowserMockData.js

@@ -0,0 +1,75 @@
+const studyWithSR = {
+  studyInstanceUid: '1',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT,SR',
+  displaySets: [
+    {
+      displaySetInstanceUID: 'f69f6asdasd48c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+      isTracked: true,
+    },
+    {
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4asdasdaf-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+    {
+      displaySetInstanceUID: 'f69f648c-223e-dasdasdb7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+    {
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4afas-b8906asd641a66e',
+      description: 'Multiple line description lorem ipsum dolor sit amet',
+      modality: 'SR',
+      componentType: 'thumbnailNoImage',
+      seriesDate: '07-Sept-2010',
+    },
+  ],
+};
+
+const studySimple = {
+  studyInstanceUid: '2',
+  date: '07-Sept-2010',
+  description: 'CHEST/ABD/PELVIS W/CONTRAST',
+  numInstances: 902,
+  modalities: 'CT',
+  displaySets: [
+    {
+      displaySetInstanceUID: 'f69f648c-223e-db7f-c4af-b8906641a66e',
+      description: 'Multiple line image series description lorem sit',
+      seriesNumber: 1,
+      numInstances: 68,
+      componentType: 'thumbnailTracked',
+    },
+  ],
+};
+
+const tabs = [
+  {
+    name: 'primary',
+    label: 'Primary',
+    studies: [studySimple],
+  },
+  {
+    name: 'recent',
+    label: 'Recent',
+    studies: [studyWithSR, studySimple],
+  },
+  {
+    name: 'all',
+    label: 'All',
+    studies: [studySimple, studyWithSR],
+  },
+];
+
+export { tabs };