From 14dabaabf69b5f27f39a8fcd75d27a08f50e16e9 Mon Sep 17 00:00:00 2001
From: dannyrb <danny.ri.brown@gmail.com>
Date: Thu, 7 May 2020 14:00:59 -0400
Subject: [PATCH] layout template and side panel defaults

Co-authored-by: James Petts <jamesapetts@gmail.com>
Co-authored-by: Erik Ziegler <erik.sweed@gmail.com>
---
 .../default/src/getLayoutTemplatesModule.js   | 280 ++++++++++++++++++
 extensions/default/src/getSidePanelModule.js  |  20 ++
 extensions/default/src/index.js               |   6 +
 3 files changed, 306 insertions(+)
 create mode 100644 extensions/default/src/getLayoutTemplatesModule.js
 create mode 100644 extensions/default/src/getSidePanelModule.js

diff --git a/extensions/default/src/getLayoutTemplatesModule.js b/extensions/default/src/getLayoutTemplatesModule.js
new file mode 100644
index 000000000..cfbc938de
--- /dev/null
+++ b/extensions/default/src/getLayoutTemplatesModule.js
@@ -0,0 +1,280 @@
+import React, { useState } from 'react';
+
+import { SidePanel, NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui';
+
+export default function() {
+  return [
+    // Layout Template Definition
+    {
+      name: 'myLayout',
+      component: viewerLayout,
+    },
+  ];
+}
+
+/*    {
+      id: 'org.ohif.defaults.viewerLayout',
+      props: {
+        leftPanelIds: ['org.ohif.defaults.seriesList'],
+        rightPanelIds: ['org.ohif.defaults.measure'],
+      },
+    },
+    */
+
+const Header = () => {
+  const [activeTool, setActiveTool] = useState('Zoom');
+  const dropdownContent = [
+    {
+      name: 'Soft tissue',
+      value: '400/40',
+    },
+    { name: 'Lung', value: '1500 / -600' },
+    { name: 'Liver', value: '150 / 90' },
+    { name: 'Bone', value: '2500 / 480' },
+    { name: 'Brain', value: '80 / 40' },
+  ];
+  const tools = [
+    {
+      id: 'Zoom',
+      label: 'Zoom',
+      icon: 'tool-zoom',
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Zoom' },
+      onClick: () => setActiveTool('Zoom'),
+    },
+    {
+      id: 'Wwwc',
+      label: 'Levels',
+      icon: 'tool-window-level',
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Wwwc' },
+      onClick: () => setActiveTool('Wwwc'),
+      dropdownContent: (
+        <div>
+          {dropdownContent.map((row, i) => (
+            <div
+              key={i}
+              className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
+            >
+              <div>
+                <span className="text-base text-white">{row.name}</span>
+                <span className="text-base text-primary-light ml-3">
+                  {row.value}
+                </span>
+              </div>
+              <span className="text-base text-primary-active ml-4">{i}</span>
+            </div>
+          ))}
+        </div>
+      ),
+    },
+    {
+      id: 'Pan',
+      label: 'Pan',
+      icon: 'tool-move',
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Pan' },
+      onClick: () => setActiveTool('Pan'),
+    },
+    {
+      id: 'Capture',
+      label: 'Capture',
+      icon: 'tool-capture',
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Capture' },
+      onClick: () => setActiveTool('Capture'),
+    },
+    {
+      id: 'Layout',
+      label: 'Layout',
+      icon: 'tool-layout',
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Layout' },
+      onClick: () => setActiveTool('Layout'),
+    },
+  ];
+  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">
+          <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
+        </div>
+        <div className="flex items-center">
+          <span className="mr-3 text-common-light 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>
+  );
+};
+
+const ViewportToolbar = () => {
+  const tools = [
+    {
+      id: 'Annotate',
+      label: 'Annotate',
+      icon: 'tool-annotate',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Annotate' },
+      onClick: () => console.log('Activate Annotate'),
+    },
+    {
+      id: 'Bidirectional',
+      label: 'Bidirectional',
+      icon: 'tool-bidirectional',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Bidirectional' },
+      onClick: () => console.log('Activate Bidirectional'),
+    },
+    {
+      id: 'Elipse',
+      label: 'Elipse',
+      icon: 'tool-elipse',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Elipse' },
+      onClick: () => console.log('Activate Elipse'),
+    },
+    {
+      id: 'Length',
+      label: 'Length',
+      icon: 'tool-length',
+      type: null,
+      commandName: 'setToolActive',
+      commandOptions: { toolName: 'Length' },
+      onClick: () => console.log('Activate Length'),
+    },
+  ];
+  return <Toolbar type="secondary" tools={tools} />;
+};
+
+function viewerLayout({ leftPanels, rightPanels, extensionManager }) {
+  const getPanelData = id => {
+    const entry = extensionManager.getModuleEntry(id);
+    return {
+      iconName: entry.iconName,
+      iconLabel: entry.iconLabel,
+      label: entry.label,
+      name: entry.name,
+      content: entry.component,
+    };
+  };
+
+  const leftPanelComponents = leftPanels.map(getPanelData);
+  const rightPanelComponents = rightPanels.map(getPanelData);
+
+  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={leftPanelComponents[0].name}
+          childComponents={leftPanelComponents}
+        />
+        <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={[
+                <Viewport
+                  viewportIndex={0}
+                  onSeriesChange={direction => alert(`Series ${direction}`)}
+                  studyData={{
+                    label: 'A',
+                    isTracked: true,
+                    isLocked: 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',
+                    },
+                  }}
+                >
+                  <div className="flex justify-center items-center h-full">
+                    CONTENT
+                  </div>
+                </Viewport>,
+                <Viewport
+                  viewportIndex={1}
+                  onSeriesChange={direction => alert(`Series ${direction}`)}
+                  studyData={{
+                    label: 'A',
+                    isTracked: false,
+                    isLocked: true,
+                    studyDate: '07-Sep-2010',
+                    currentSeries: 2,
+                    seriesDescription:
+                      'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+                    modality: 'SR',
+                    patientInformation: {
+                      patientName: 'Smith, Jane',
+                      patientSex: 'F',
+                      patientAge: '59',
+                      MRN: '10000001',
+                      thickness: '2.0mm',
+                      spacing: '1.25mm',
+                      scanner: 'Aquilion',
+                    },
+                  }}
+                >
+                  <div className="flex justify-center items-center h-full">
+                    CONTENT
+                  </div>
+                </Viewport>,
+              ]}
+              setActiveViewportIndex={setActiveViewportIndex}
+              activeViewportIndex={activeViewportIndex}
+            />*/}
+          </div>
+        </div>
+        <SidePanel
+          side="right"
+          defaultComponentOpen={rightPanelComponents[0].name}
+          childComponents={rightPanelComponents}
+        />
+      </div>
+    </div>
+  );
+}
diff --git a/extensions/default/src/getSidePanelModule.js b/extensions/default/src/getSidePanelModule.js
new file mode 100644
index 000000000..8c1eae334
--- /dev/null
+++ b/extensions/default/src/getSidePanelModule.js
@@ -0,0 +1,20 @@
+import React from 'react';
+
+function helloWorldComponent() {
+  return <div>{'Hello world'}</div>;
+}
+
+function getSidePanelModule() {
+  return [
+    {
+      name: 'org.ohif.defaults.seriesList',
+      component: helloWorldComponent,
+    },
+    {
+      name: 'org.ohif.defaults.measure',
+      component: helloWorldComponent,
+    },
+  ];
+}
+
+export default getSidePanelModule;
diff --git a/extensions/default/src/index.js b/extensions/default/src/index.js
index 13e977231..4543d51f2 100644
--- a/extensions/default/src/index.js
+++ b/extensions/default/src/index.js
@@ -1,9 +1,15 @@
+import getContextModule from './getContextModule.js';
 import getDataSourcesModule from './getDataSourcesModule.js';
+import getLayoutTemplatesModule from './getLayoutTemplatesModule.js';
+import getSidePanelModule from './getSidePanelModule.js';
 
 export default {
   /**
    * Only required property. Should be a unique value across all extensions.
    */
   id: 'org.ohif.default',
+  getContextModule,
   getDataSourcesModule,
+  getLayoutTemplatesModule,
+  getSidePanelModule,
 };