Pull in master

platform/ui/src/components/LayoutSelector/LayoutSelector.jsx

@@ -0,0 +1,80 @@
+// // SEE:
+// // https://github.com/OHIF/Viewers/blob/b58aa4575ab72fe3f493cc5a4261b4f8256516ab/platform/viewer/src/appExtensions/MeasurementsPanel/index.js#L18-L49
+// import React from 'react';
+// import { useViewportGrid } from '@ohif/ui';
+
+// function getCommandsModule({ servicesManager }) {
+//   const { UIDialogService } = servicesManager.services;
+
+//   const definitions = {
+//     toggleLayoutSelectionDialog: {
+//       commandFn: () => {
+//         if (!UIDialogService) {
+//           window.alert(
+//             'Unable to show dialog; no UI Dialog Service available.'
+//           );
+//           return;
+//         }
+
+//         // TODO: use SimpleDialog component
+//         // TODO: update position on window resize
+//         // TODO: Expand service API to check if dialog w/ ID is already open
+//         // TODO: Import and call `useViewportGrid`
+//         UIDialogService.dismiss({ id: 'layoutSelection' });
+//         UIDialogService.create({
+//           id: 'layoutSelection',
+//           centralize: true,
+//           isDraggable: false,
+//           showOverlay: true,
+//           content: Test,
+//         });
+//       },
+//       storeContexts: [],
+//       options: {},
+//       context: 'VIEWER',
+//     },
+//   };
+
+//   return {
+//     definitions,
+//     defaultContext: 'VIEWER',
+//   };
+// }
+
+// function Test() {
+//   const [
+//     { numCols, numRows, activeViewportIndex, viewports },
+//     dispatch,
+//   ] = useViewportGrid();
+
+//   return (
+//     <div
+//       onClick={() => {
+//         dispatch({
+//           type: 'SET_LAYOUT',
+//           payload: {
+//             numCols: 2,
+//             numRows: 2,
+//           },
+//         });
+//       }}
+//       style={{ color: 'white' }}
+//     >
+//       Hello World!
+//     </div>
+//   );
+// }
+
+// export default getCommandsModule;
+
+import React from 'react';
+
+function LayoutSelector() {
+  return (
+    <>
+      <div>LAYOUT SELECTOR PLACEHOLDER!</div>
+    </>
+  );
+}
+
+export default LayoutSelector;

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

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

platform/ui/src/components/Toolbar/Toolbar.jsx

@@ -1,89 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-
-import { ToolbarButton, IconButton, Icon, Tooltip } from '@ohif/ui';
-
-const classes = {
-  type: {
-    primary: '',
-    secondary: 'w-full items-center bg-primary-dark px-3',
-  },
-};
-
-const Toolbar = ({ activeTool, tools, moreTools, type }) => {
-  return (
-    <div className={classnames('flex', classes.type[type])}>
-      {tools.map((tool) => {
-        const { id, onClick, icon, label, dropdownContent } = tool;
-        const isActive = activeTool === tool.id;
-        return (
-          <div className="relative flex justify-center" key={tool.id}>
-            <ToolbarButton
-              id={id}
-              isActive={isActive}
-              onClick={onClick}
-              icon={icon}
-              label={label}
-              dropdownContent={dropdownContent}
-              type={type}
-            />
-          </div>
-        );
-      })}
-      {!!moreTools.length && (
-        <>
-          <span className="w-1 border-l h-8 self-center mx-2 border-common-dark" />
-          <Tooltip position="bottom" content="More tools">
-            <IconButton
-              className={classnames(
-                'mx-1 text-common-bright hover:bg-primary-dark hover:text-primary-light'
-              )}
-              color="inherit"
-            >
-              <Icon name="tool-more-menu" />
-            </IconButton>
-          </Tooltip>
-        </>
-      )}
-    </div>
-  );
-};
-
-Toolbar.defaultProps = {
-  activeTool: '',
-  moreTools: [],
-  type: 'primary',
-};
-
-Toolbar.propTypes = {
-  type: PropTypes.oneOf(['primary', 'secondary']),
-  activeTool: PropTypes.string,
-  tools: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string,
-      icon: PropTypes.string,
-      commandName: PropTypes.string,
-      commandOptions: PropTypes.shape({
-        toolName: PropTypes.string,
-      }),
-      onClick: PropTypes.func,
-      dropdownContent: PropTypes.node,
-    })
-  ).isRequired,
-  moreTools: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      label: PropTypes.string,
-      icon: PropTypes.string,
-      commandName: PropTypes.string,
-      commandOptions: PropTypes.shape({
-        toolName: PropTypes.string,
-      }),
-      onClick: PropTypes.func,
-    })
-  ),
-};
-
-export default Toolbar;

platform/ui/src/components/Toolbar/Toolbar.mdx

@@ -1,172 +0,0 @@
----
-name: Toolbar
-menu: Data Display
-route: components/toolbar
----
-
-import { useState } from 'react';
-import { Playground, Props } from 'docz';
-import classnames from 'classnames';
-import { Toolbar, Typography } from '@ohif/ui';
-
-# Toolbar
-
-A Toolbar is used to create a list of tools.
-
-## Import
-
-```javascript
-import { Toolbar } from '@ohif/ui';
-```
-
-<Playground>
-  {() => {
-    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'),
-      },
-    ];
-    const moreTools = [
-      {
-        id: 'Zoom 2',
-        label: 'Zoom',
-        icon: 'tool-zoom',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Zoom' },
-        onClick: () => setActiveTool('Zoom 2'),
-      },
-      {
-        id: 'Layout 2',
-        label: 'Layout',
-        icon: 'tool-layout',
-        commandName: 'setToolActive',
-        commandOptions: { toolName: 'Layout' },
-        onClick: () => setActiveTool('Layout 2'),
-      },
-    ];
-    const secondaryTools = [
-      {
-        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 (
-      <div className="py-10 px-4 flex flex-col justify-center">
-        <div className="mb-4">
-          <Typography className="mb-2">Primary Toolbar</Typography>
-          <Toolbar
-            moreTools={moreTools}
-            activeTool={activeTool}
-            tools={tools}
-          />
-        </div>
-        <div>
-          <Typography className="mb-2">Secondary Toolbar</Typography>
-          <Toolbar tools={secondaryTools} type="secondary" />
-        </div>
-      </div>
-    );
-  }}
-</Playground>
-
-## Properties
-
-<Props of={Toolbar} />

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

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

platform/ui/src/components/ToolbarButton/ToolbarButton.jsx

@@ -28,6 +28,7 @@ const ToolbarButton = ({
   return (
     <div key={id}>
       <Tooltip
+        isSticky={shouldShowDropdown}
         content={shouldShowDropdown ? dropdownContent : label}
         tight={shouldShowDropdown}
       >
@@ -51,6 +52,7 @@ ToolbarButton.defaultProps = {
 };
 
 ToolbarButton.propTypes = {
+  /* Influences background/hover styling */
   type: PropTypes.oneOf(['primary', 'secondary']),
   id: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
@@ -58,7 +60,7 @@ ToolbarButton.propTypes = {
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */
-  dropdownContent: PropTypes.node,
+  dropdownContent: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 };
 
 export default ToolbarButton;

platform/ui/src/components/Tooltip/Tooltip.jsx

@@ -24,7 +24,7 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ position, content, tight, children }) => {
+const Tooltip = ({ content, isSticky, position, tight, children }) => {
   const [isActive, setIsActive] = useState(false);
 
   const handleMouseOver = () => {
@@ -39,6 +39,8 @@ const Tooltip = ({ position, content, tight, children }) => {
     }
   };
 
+  const isOpen = isSticky || isActive;
+
   return (
     <div
       className="relative "
@@ -51,8 +53,8 @@ const Tooltip = ({ position, content, tight, children }) => {
       {children}
       <div
         className={classnames(`tooltip tooltip-${position}`, {
-          block: isActive,
-          hidden: !isActive,
+          block: isOpen,
+          hidden: !isOpen,
         })}
       >
         <div
@@ -63,9 +65,9 @@ const Tooltip = ({ position, content, tight, children }) => {
             }
           )}
         >
-          {content}
+          {typeof content === 'function' ? content() : content}
           <svg
-            className="absolute text-primary-dark h-4 stroke-secondary-main"
+            className="absolute h-4 text-primary-dark stroke-secondary-main"
             style={arrowPositionStyle[position]}
             xmlns="http://www.w3.org/2000/svg"
             viewBox="0 0 24 24"
@@ -80,11 +82,12 @@ const Tooltip = ({ position, content, tight, children }) => {
 
 Tooltip.defaultProps = {
   tight: false,
+  isSticky: false,
   position: 'bottom',
 };
 
 Tooltip.propTypes = {
-  tight: PropTypes.bool,
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
   position: PropTypes.oneOf([
     'bottom',
     'bottom-left',
@@ -92,8 +95,9 @@ Tooltip.propTypes = {
     'left',
     'right',
   ]),
+  isSticky: PropTypes.bool,
+  tight: PropTypes.bool,
   children: PropTypes.node.isRequired,
-  content: PropTypes.node.isRequired,
 };
 
 export default Tooltip;

platform/ui/src/components/Tooltip/tooltip.css

@@ -1,10 +1,10 @@
 .tooltip {
-  @apply z-10 absolute;
+  @apply absolute z-10;
 }
 
 /* TOOLTIP WORKAROUND FOR ARROW UP */
 .tooltip.tooltip-bottom .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 14px;
   height: 1px;
@@ -44,7 +44,7 @@
 }
 
 .tooltip.tooltip-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -54,7 +54,7 @@
 }
 
 .tooltip.tooltip-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 2px;
   height: 15px;
@@ -64,7 +64,7 @@
 }
 
 .tooltip.tooltip-bottom-right .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
@@ -73,19 +73,10 @@
 }
 
 .tooltip.tooltip-bottom-left .tooltip-box::before {
-  @apply bg-primary-dark absolute z-10;
+  @apply absolute z-10 bg-primary-dark;
   content: '';
   width: 15px;
   height: 2px;
   left: 5px;
   top: -1px;
 }
-
-/* TODO: REMOVE BELOW CLASS "showTooltipOnHover" AFTER TOOLTIP REPLACEMENT */
-.showTooltipOnHover .tooltip {
-  display: none;
-}
-
-.showTooltipOnHover:hover .tooltip {
-  display: block;
-}

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

@@ -184,7 +184,7 @@ const ViewportActionBar = ({ studyData, onSeriesChange }) => {
             </div>
           }
         >
-          <div className="relative flex justify-end showTooltipOnHover">
+          <div className="relative flex justify-end">
             <div className="relative">
               <Icon name="profile" className="w-5 text-white" />
               <Icon

platform/ui/src/components/index.js

@@ -12,6 +12,7 @@ import InputLabelWrapper from './InputLabelWrapper';
 import InputMultiSelect from './InputMultiSelect';
 import InputText from './InputText';
 import Label from './Label';
+import LayoutSelector from './LayoutSelector';
 import MeasurementTable from './MeasurementTable';
 import Modal from './Modal';
 import NavBar from './NavBar';
@@ -37,7 +38,6 @@ import Thumbnail from './Thumbnail';
 import ThumbnailNoImage from './ThumbnailNoImage';
 import ThumbnailTracked from './ThumbnailTracked';
 import ThumbnailList from './ThumbnailList';
-import Toolbar from './Toolbar';
 import ToolbarButton from './ToolbarButton';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
@@ -61,6 +61,7 @@ export {
   InputMultiSelect,
   InputText,
   Label,
+  LayoutSelector,
   MeasurementTable,
   Modal,
   NavBar,
@@ -87,7 +88,6 @@ export {
   ThumbnailNoImage,
   ThumbnailTracked,
   ThumbnailList,
-  Toolbar,
   ToolbarButton,
   Tooltip,
   Typography,

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

@@ -1,14 +1,7 @@
 import React from 'react';
-import {
-  SidePanel,
-  StudyBrowser,
-  DragAndDropProvider,
-  ViewportGrid,
-  ViewportPane,
-} from '@ohif/ui';
+import { SidePanel, StudyBrowser, DragAndDropProvider } from '@ohif/ui';
 
 import Header from './components/Header';
-import ViewportToolbar from './components/ViewportToolBar';
 
 const Viewer = () => {
   return (
@@ -16,7 +9,7 @@ const Viewer = () => {
       <div>
         <Header />
         <div
-          className="flex flex-row flex-no-wrap flex-1 items-stretch overflow-hidden w-full"
+          className="flex flex-row flex-no-wrap items-stretch flex-1 w-full overflow-hidden"
           style={{ height: 'calc(100vh - 57px' }}
         >
           <SidePanel
@@ -28,8 +21,8 @@ const Viewer = () => {
           >
             <StudyBrowser />
           </SidePanel>
-          <div className="flex flex-1 h-100 overflow-hidden bg-primary-main items-center justify-center text-white">
-            <ViewportToolbar />
+          <div className="flex items-center justify-center flex-1 overflow-hidden text-white h-100 bg-primary-main">
+            {/* <ViewportToolbar /> */}
             <div>CONTENT</div>
           </div>
           <SidePanel
@@ -39,7 +32,7 @@ const Viewer = () => {
             componentLabel="Measurements"
             defaultIsOpen={false}
           >
-            <div className="flex justify-center text-white p-2">
+            <div className="flex justify-center p-2 text-white">
               panel placeholder
             </div>
           </SidePanel>

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

@@ -25,7 +25,6 @@ import {
 } from '@ohif/ui';
 
 import Header from './components/Header';
-import ViewportToolbar from './components/ViewportToolBar';
 
 import { tabs } from './studyBrowserMockData';
 
@@ -76,7 +75,7 @@ import { tabs } from './studyBrowserMockData';
           {/* TOOLBAR + GRID */}
           <div className="flex flex-col flex-1 h-full">
             <div className="flex flex-2 w-100 border-b border-transparent h-12">
-              <ViewportToolbar />
+              {/* <ViewportToolbar /> Secondary Toolbar */}
             </div>
             {/* VIEWPORT GRID CONTAINER */}
             <div className="flex flex-1 h-full overflow-hidden bg-black items-center justify-center pb-2 pt-1">

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

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { NavBar, Svg, Icon, IconButton, Toolbar } from '@ohif/ui';
+import { NavBar, Svg, Icon, IconButton } from '@ohif/ui';
 
 const Header = () => {
   const [activeTool, setActiveTool] = useState('Zoom');
@@ -34,15 +34,15 @@ const Header = () => {
           {dropdownContent.map((row, i) => (
             <div
               key={i}
-              className="flex justify-between py-2 px-3 hover:bg-secondary-dark cursor-pointer"
+              className="flex justify-between px-3 py-2 cursor-pointer hover:bg-secondary-dark"
             >
               <div>
                 <span className="text-base text-white">{row.name}</span>
-                <span className="text-base text-primary-light ml-3">
+                <span className="ml-3 text-base text-primary-light">
                   {row.value}
                 </span>
               </div>
-              <span className="text-base text-primary-active ml-4">{i}</span>
+              <span className="ml-4 text-base text-primary-active">{i}</span>
             </div>
           ))}
         </div>
@@ -75,12 +75,12 @@ const Header = () => {
   ];
   return (
     <NavBar className="justify-between border-b-4 border-black">
-      <div className="flex flex-1 justify-between">
+      <div className="flex justify-between flex-1">
         <div className="flex items-center">
-          <div className="mr-3 inline-flex items-center">
+          <div className="inline-flex items-center mr-3">
             <Icon
               name="chevron-left"
-              className="text-primary-active w-8 cursor-pointer"
+              className="w-8 cursor-pointer text-primary-active"
               onClick={() => alert('Navigate to previous page')}
             />
             <a href="#" className="ml-4">
@@ -89,10 +89,10 @@ const Header = () => {
           </div>
         </div>
         <div className="flex items-center">
-          <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} />
+          {/* <Toolbar tools={tools} activeTool={activeTool} moreTools={tools} /> */}
         </div>
         <div className="flex items-center">
-          <span className="mr-3 text-common-light text-lg">
+          <span className="mr-3 text-lg text-common-light">
             FOR INVESTIGATIONAL USE ONLY
           </span>
           <IconButton

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

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import { Toolbar } from '@ohif/ui';
-
-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} />;
-};
-
-export default ViewportToolbar;