feat: Viewport Action Bar

platform/ui/index.js

@@ -47,6 +47,7 @@ export {
   ThumbnailSR,
   ThumbnailList,
   Typography,
+  ViewportActionBar,
   ViewportGrid,
 } from './src/components';
 

platform/ui/src/assets/icons/lock.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M18 10v-4c0-3.313-2.687-6-6-6s-6 2.687-6 6v4h-3v14h18v-14h-3zm-10 0v-4c0-2.206 1.794-4 4-4s4 1.794 4 4v4h-8z"/></svg>

platform/ui/src/assets/icons/profile.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" viewBox="0 0 24 24"><path fill="currentColor" d="M12 0c-5.083 0-8.465 4.949-3.733 13.678 1.596 2.945-1.725 3.641-5.09 4.418-3.073.709-3.187 2.235-3.177 4.904l.004 1h23.99l.004-.969c.012-2.688-.093-4.223-3.177-4.935-3.438-.794-6.639-1.49-5.09-4.418 4.719-8.912 1.251-13.678-3.731-13.678m0 1c1.89 0 3.39.764 4.225 2.15 1.354 2.251.866 5.824-1.377 10.06-.577 1.092-.673 2.078-.283 2.932.937 2.049 4.758 2.632 6.032 2.928 2.303.534 2.412 1.313 2.401 3.93h-21.998c-.01-2.615.09-3.396 2.401-3.93 1.157-.266 5.138-.919 6.049-2.94.387-.858.284-1.843-.304-2.929-2.231-4.115-2.744-7.764-1.405-10.012.84-1.412 2.353-2.189 4.259-2.189"/></svg>

platform/ui/src/assets/styles/styles.css

@@ -45,6 +45,24 @@
   transform: translateY(-50%);
 }
 
+.tooltip.tooltip-top-right::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 15px;
+  height: 2px;
+  right: 5px;
+  top: -1px;
+}
+
+.tooltip.tooltip-top-left::before {
+  @apply bg-primary-dark absolute z-10;
+  content: '';
+  width: 15px;
+  height: 2px;
+  left: 5px;
+  top: -1px;
+}
+
 /* TOOLTIP WORKAROUND FOR ARROW */
 .showTooltipOnHover .tooltip {
   display: none;

platform/ui/src/components/Button/Button.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const baseClasses =
-  'min-w-md leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
+  'leading-none font-sans text-center justify-center items-center outline-none transition duration-300 ease-in-out focus:outline-none';
 
 const defaults = {
   variant: 'contained',
@@ -61,9 +61,9 @@ const variantClasses = {
 };
 
 const sizeClasses = {
-  small: 'py-2 px-2 text-sm',
-  medium: 'py-2 px-2 text-lg',
-  large: 'py-2 px-6 text-xl',
+  small: 'py-2 px-2 text-sm min-w-md',
+  medium: 'py-2 px-2 text-lg min-w-md',
+  large: 'py-2 px-6 text-xl min-w-md',
   initial: '',
 };
 

platform/ui/src/components/Icon/getIcon.jsx

@@ -17,10 +17,12 @@ import infoLink from './../../assets/icons/info-link.svg';
 import launchArrow from './../../assets/icons/launch-arrow.svg';
 import launchInfo from './../../assets/icons/launch-info.svg';
 import listBullets from './../../assets/icons/list-bullets.svg';
+import lock from './../../assets/icons/lock.svg';
 import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
 import magnifier from './../../assets/icons/magnifier.svg';
 import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
 import pencil from './../../assets/icons/pencil.svg';
+import profile from './../../assets/icons/profile.svg';
 import pushLeft from './../../assets/icons/push-left.svg';
 import pushRight from './../../assets/icons/push-right.svg';
 import settings from './../../assets/icons/settings.svg';
@@ -58,10 +60,12 @@ const ICONS = {
   'launch-arrow': launchArrow,
   'launch-info': launchInfo,
   'list-bullets': listBullets,
+  lock: lock,
   'logo-ohif-small': logoOhifSmall,
   magnifier: magnifier,
   'notificationwarning-diamond': notificationwarningDiamond,
   pencil: pencil,
+  profile: profile,
   'push-left': pushLeft,
   'push-right': pushRight,
   settings: settings,

platform/ui/src/components/Icon/icon.mdx

@@ -34,7 +34,7 @@ import { Icon } from '@ohif/ui';
         <React.Fragment key={i}>
           <div className="flex flex-col items-center w-48 py-4">
             <div className="flex items-center justify-center rounded border border-primary-light p-4 m-2 w-20 h-20">
-              <Icon name={name} className="text-primary-light" />
+              <Icon name={name} className="text-primary-light w-6" />
             </div>
             <div className="break-normal text-white">{name}</div>
           </div>

platform/ui/src/components/ViewportActionBar/ViewportActionBar.jsx

@@ -0,0 +1,194 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon, ButtonGroup, Button } from '@ohif/ui';
+
+const classes = {
+  infoHeader: 'text-base text-primary-light',
+  infoText: 'text-base text-white',
+  firstRow: 'flex flex-col',
+  row: 'flex flex-col ml-4',
+};
+
+const ViewportActionBar = ({ isTracked, isLocked, modality }) => {
+  const renderIconStatus = () => {
+    if (modality === 'SR') {
+      return (
+        <div className="flex p-1 border-primary-light border rounded relative">
+          <span className="leading-none text-sm font-bold text-primary-light">
+            SR
+          </span>
+          {isLocked && (
+            <Icon
+              name="lock"
+              className="w-3 text-white absolute"
+              style={{ top: -6, right: -6 }}
+            />
+          )}
+        </div>
+      );
+    }
+
+    return (
+      <div className="showTooltipOnHover relative">
+        <Icon
+          name={isTracked ? 'tracked' : 'dotted-circle'}
+          className="text-primary-light w-6"
+        />
+        {isTracked && (
+          <div
+            className={classnames(
+              'tooltip tooltip-top-left absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content'
+            )}
+          >
+            <div className="flex py-2">
+              <div className="flex pt-1">
+                <Icon name="info-link" className="w-4 text-primary-main" />
+              </div>
+              <div className="flex ml-4">
+                <span className="text-base text-common-light">
+                  Series is{' '}
+                  <span className="text-white font-bold">tracked</span> and can
+                  be viewed <br /> in the measurement panel
+                </span>
+              </div>
+            </div>
+            <svg
+              className="absolute text-primary-dark h-4 left-0 stroke-secondary-main"
+              style={{ top: -15 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
+        )}
+      </div>
+    );
+  };
+  return (
+    <div className="flex items-center m-2 pb-2 border-b border-primary-light">
+      <div className="flex flex-grow">
+        <div className="flex items-center">
+          {renderIconStatus()}
+          <span className="text-large text-white ml-2">A</span>
+        </div>
+        <div className="flex flex-col justify-start ml-4">
+          <div className="flex">
+            <span className="text-base text-white">07-Sep-2010</span>
+            <span className="border-l border-primary-light ml-2 pl-2 text-base text-primary-light">
+              S: 1
+            </span>
+          </div>
+          <div className="flex">
+            <span className="text-base text-primary-light">
+              Series description lorem ipsum dolor sit...
+            </span>
+          </div>
+        </div>
+      </div>
+      <div className="ml-2">
+        <ButtonGroup>
+          <Button size="initial" className="py-1 px-2">
+            <Icon name="chevron-left" className="text-white w-4" />
+          </Button>
+          <Button size="initial" className="py-1 px-2">
+            <Icon name="chevron-right" className="text-white w-4" />
+          </Button>
+        </ButtonGroup>
+      </div>
+      <div className="flex ml-4 mr-2">
+        <div className="showTooltipOnHover flex justify-end relative">
+          <div className="relative">
+            <Icon name="profile" className="text-white w-5" />
+            <Icon
+              name="info-link"
+              className="bg-black text-white w-5 absolute"
+              style={{ right: -7, bottom: -10 }}
+            />
+          </div>
+          <div
+            className={classnames(
+              'tooltip tooltip-top-right absolute bg-primary-dark border border-secondary-main text-white text-base rounded py-1 px-4 inset-x-auto top-full mt-2 w-max-content ml-1'
+            )}
+          >
+            <div className="flex py-2">
+              <div className="flex pt-1">
+                <Icon name="info-link" className="w-4 text-primary-main" />
+              </div>
+              <div className="flex flex-col ml-2">
+                <span className="text-base font-bold text-white">
+                  Smith, Jane
+                </span>
+                <div className="flex mt-4 pb-4 mb-4 border-b border-secondary-main">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>Sex</span>
+                    <span className={classnames(classes.infoText)}>F</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>Age</span>
+                    <span className={classnames(classes.infoText)}>59</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>MRN</span>
+                    <span className={classnames(classes.infoText)}>
+                      10000001
+                    </span>
+                  </div>
+                </div>
+                <div className="flex">
+                  <div className={classnames(classes.firstRow)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Thickness
+                    </span>
+                    <span className={classnames(classes.infoText)}>5.00mm</span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Spacing
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      1.25 mm
+                    </span>
+                  </div>
+                  <div className={classnames(classes.row)}>
+                    <span className={classnames(classes.infoHeader)}>
+                      Scanner
+                    </span>
+                    <span className={classnames(classes.infoText)}>
+                      Aquilion
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <svg
+              className="absolute text-primary-dark h-4 right-0 stroke-secondary-main"
+              style={{ top: -15 }}
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+            >
+              <path fill="currentColor" d="M24 22h-24l12-20z" />
+            </svg>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+ViewportActionBar.defaultProps = {
+  isLocked: false,
+};
+
+ViewportActionBar.propTypes = {
+  isTracked: PropTypes.bool.isRequired,
+  isLocked: PropTypes.bool,
+  modality: PropTypes.string.isRequired,
+};
+
+export default ViewportActionBar;

platform/ui/src/components/ViewportActionBar/ViewportActionBar.mdx

@@ -0,0 +1,48 @@
+---
+name: Viewport Action Bar
+menu: Data Display
+route: components/viewportActionBar
+---
+
+import { Playground, Props } from 'docz';
+import { ViewportActionBar } from '@ohif/ui';
+
+# Viewport Action Bar
+
+Used to display an Action Bar in the viewer.
+
+## Import
+
+```javascript
+import { ViewportActionBar } from '@ohif/ui';
+```
+
+## Basic usage
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={true} modality="CT" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} modality="CT" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} isLocked={false} modality="SR" />
+  </div>
+</Playground>
+
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar isTracked={false} isLocked={true} modality="SR" />
+  </div>
+</Playground>
+
+## Properties
+
+<Props of={ViewportActionBar} />

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

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

platform/ui/src/components/ViewportGrid/ViewportGrid.jsx

@@ -8,7 +8,7 @@ const ViewportGrid = ({ rows, cols, viewportContents }) => {
       <div
         key={index}
         className={classnames(
-          'border rounded-lg border-secondary-light hover:border-primary-light'
+          'border rounded-lg border-secondary-light hover:border-primary-light transition duration-300'
         )}
       >
         {viewportContent}

platform/ui/src/components/ViewportGrid/ViewportGrid.mdx

@@ -9,7 +9,7 @@ import { ViewportGrid } from '@ohif/ui';
 
 # ViewportGrid
 
-Used display viewports in the viewer page
+Used to display viewports in the viewer page.
 
 ## Import
 
@@ -25,8 +25,12 @@ import { ViewportGrid } from '@ohif/ui';
       rows={1}
       cols={2}
       viewportContents={[
-        <div className="flex items-center justify-center h-full text-white">Viewport1</div>,
-        <div className="flex items-center justify-center h-full text-white">Viewport2</div>
+        <div className="flex items-center justify-center h-full text-white">
+          Viewport1
+        </div>,
+        <div className="flex items-center justify-center h-full text-white">
+          Viewport2
+        </div>,
       ]}
     />
   </div>

platform/ui/src/components/index.js

@@ -33,6 +33,7 @@ import Thumbnail from './Thumbnail';
 import ThumbnailSR from './ThumbnailSR';
 import ThumbnailList from './ThumbnailList';
 import Typography from './Typography';
+import ViewportActionBar from './ViewportActionBar';
 import ViewportGrid from './ViewportGrid';
 
 export {
@@ -71,5 +72,6 @@ export {
   ThumbnailSR,
   ThumbnailList,
   Typography,
+  ViewportActionBar,
   ViewportGrid,
 };

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

@@ -5,32 +5,122 @@ route: examples/viewer
 ---
 
 import { Playground, Props } from 'docz';
-import { NavBar, SidePanel, Svg, StudyBrowser } from '@ohif/ui';
+import {
+  NavBar,
+  SidePanel,
+  Svg,
+  MeasurementTable,
+  SegmentationTable,
+  ButtonGroup,
+  Button,
+  Icon,
+  IconButton,
+  StudyBrowser,
+  ViewportActionBar,
+  ViewportGrid,
+} from '@ohif/ui';
 
 # Viewer
 
 <Playground>
-  <div>
-    <NavBar className="justify-start">
-      <div className="m-3">
-        <Svg name="logo-ohif" />
-      </div>
-    </NavBar>
-    <div
-      className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
-      style={{ height: 'calc(100vh - 57px' }}
-    >
-      <SidePanel
-        side="left"
-        iconName="group-layers"
-        iconLabel="Studies"
-        componentLabel="Studies"
-        defaultIsOpen={false}
-      >
-        <StudyBrowser />
-      </SidePanel>
-      <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-        CONTENT
+  {() => {
+    const measurementTableData = {
+      title: 'Measurements',
+      amount: 10,
+      data: new Array(10).fill(''),
+    };
+    const segmentationTableData = {
+      title: 'Segments',
+      amount: 12,
+      data: new Array(12).fill(''),
+    };
+    return (
+      <div>
+        <NavBar className="justify-start">
+          <div className="m-3">
+            <Svg name="logo-ohif" />
+          </div>
+        </NavBar>
+        <div
+          className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+          style={{ height: 'calc(100vh - 57px' }}
+        >
+          <SidePanel
+            side="left"
+            iconName="group-layers"
+            iconLabel="Studies"
+            componentLabel="Studies"
+            defaultIsOpen={false}
+          >
+            <StudyBrowser />
+          </SidePanel>
+          <div className="flex flex-1 h-100 overflow-hidden bg-black items-center justify-center text-white">
+            <ViewportGrid
+              rows={1}
+              cols={2}
+              viewportContents={[
+                <div className="flex flex-col h-full">
+                  <ViewportActionBar isTracked modality="CT" />
+                </div>,
+                <div className="flex flex-col h-full">
+                  <ViewportActionBar isTracked={false} modality="CT" />
+                </div>,
+              ]}
+            />
+          </div>
+          <SidePanel
+            side="right"
+            iconName="list-bullets"
+            iconLabel="Measure"
+            componentLabel="Measurements"
+            defaultIsOpen={false}
+          >
+            <div className="overflow-y-auto overflow-x-hidden invisible-scrollbar">
+              <div className="p-2">
+                <div className="leading-none">
+                  <span className="text-white text-base mr-2">07-Sep-2010</span>
+                  <span className="px-1 text-black bg-common-bright text-base rounded-sm font-bold">
+                    CT
+                  </span>
+                </div>
+                <div className="leading-none">
+                  <span className="text-base text-primary-light">
+                    CHEST/ABD/PELVIS W CONTRAST
+                  </span>
+                </div>
+              </div>
+              <MeasurementTable {...measurementTableData} />
+              <SegmentationTable {...segmentationTableData} />
+            </div>
+            <div className="p-4 flex justify-center">
+              <ButtonGroup onClick={() => alert('Export')}>
+                <Button
+                  className="text-white border-primary-main bg-black text-base py-2 px-2"
+                  size="initial"
+                  color="inherit"
+                >
+                  Export
+                </Button>
+                <IconButton
+                  className="bg-black border-primary-main px-2 text-white px-2"
+                  color="inherit"
+                  size="initial"
+                >
+                  <Icon name="arrow-down" />
+                </IconButton>
+              </ButtonGroup>
+              <Button
+                className="text-white border border-primary-main bg-black text-base py-2 px-2 ml-2"
+                variant="outlined"
+                size="initial"
+                color="inherit"
+                onClick={() => alert('Create Report')}
+              >
+                Create Report
+              </Button>
+            </div>
+          </SidePanel>
+        </div>
       </div>
     );
   }}