Merge branch 'feat/v2-main' of github.com:OHIF/Viewers into feat/ohif-151

platform/core/package.json

@@ -31,7 +31,7 @@
   },
   "peerDependencies": {
     "cornerstone-core": "^2.3.0",
-    "cornerstone-tools": "^4.12.0",
+    "cornerstone-tools": "4.16.0",
     "cornerstone-wado-image-loader": "^3.1.2",
     "dicom-parser": "^1.8.3"
   },

platform/core/src/services/MeasurementService/MeasurementService.js

@@ -40,6 +40,10 @@ const MEASUREMENT_SCHEMA_KEYS = [
   'type',
   'unit',
   'area', // TODO: Add concept names instead (descriptor)
+  'length',
+  'shortestDiameter',
+  'longestDiameter',
+  'text', // NOTE: There is nothing like this in SR.
   'points',
   'source',
 ];
@@ -53,6 +57,7 @@ const EVENTS = {
 const VALUE_TYPES = {
   POLYLINE: 'value_type::polyline',
   POINT: 'value_type::point',
+  BIDIRECTIONAL: 'value_type::shortAxisLongAxis', // TODO -> Discuss with Danny. => just using SCOORD values isn't enough here.
   ELLIPSE: 'value_type::ellipse',
   MULTIPOINT: 'value_type::multipoint',
   CIRCLE: 'value_type::circle',

platform/core/src/services/ToolBarService/ToolBarService.js

@@ -156,6 +156,9 @@ export default class ToolBarService {
       if (btn.props.clickHandler) {
         btn.clickHandler(evt, btn, btnSection);
       }
+      if (props && props.onClick) {
+        props.onClick(evt, btn, btnSection, props);
+      }
     };
 
     return {

platform/ui/index.js

@@ -32,6 +32,8 @@ export {
   DateRange,
   Dialog,
   EmptyStudies,
+  ExpandableToolbarButton,
+  ListMenu,
   Icon,
   IconButton,
   Input,

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.css

@@ -0,0 +1,16 @@
+.ExpandableToolbarButton:hover .ExpandableToolbarButton__arrow:after {
+  content: "";
+  position: absolute;
+  bottom: -10px;
+  border-width: 10px 10px 0;
+  border-style: solid;
+  border-color:#5acce6 transparent;
+}
+
+.ExpandableToolbarButton .ExpandableToolbarButton__content {
+  display: none;
+}
+
+.ExpandableToolbarButton:hover .ExpandableToolbarButton__content {
+  display: block;
+}

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.jsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+import { IconButton, Icon } from '@ohif/ui';
+
+import './ExpandableToolbarButton.css';
+
+const ExpandableToolbarButton = ({
+  type,
+  id,
+  isActive,
+  onClick,
+  icon,
+  className,
+  content: Content,
+  contentProps
+}) => {
+  const classes = {
+    type: {
+      primary: isActive
+        ? 'text-black'
+        : 'text-common-bright hover:bg-primary-dark hover:text-primary-light',
+      secondary: isActive
+        ? 'text-black'
+        : 'text-white hover:bg-secondary-dark focus:bg-secondary-dark',
+    },
+  };
+
+  const onChildClickHandler = (...args) => {
+    onClick(...args);
+
+    if (contentProps.onClick) {
+      contentProps.onClick(...args);
+    }
+  };
+
+  const onClickHandler = (...args) => {
+    onClick(...args);
+  };
+
+  return (
+    <div key={id} className="ExpandableToolbarButton">
+      <IconButton
+        variant={isActive ? 'contained' : 'text'}
+        className={classnames(
+          'mx-1',
+          classes.type[type],
+          isActive && 'ExpandableToolbarButton__arrow'
+        )}
+        onClick={onClickHandler}
+        key={id}
+      >
+        <Icon name={icon} />
+      </IconButton>
+      <div className="absolute z-10 pt-4">
+        <div className={classnames("ExpandableToolbarButton__content w-48", className)}>
+          <Content {...contentProps} onClick={onChildClickHandler} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const noop = () => { };
+
+ExpandableToolbarButton.defaultProps = {
+  isActive: false,
+  type: 'primary',
+  content: null,
+  onClick: noop,
+};
+
+ExpandableToolbarButton.propTypes = {
+  /* Influences background/hover styling */
+  type: PropTypes.oneOf(['primary', 'secondary']),
+  id: PropTypes.string.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  icon: PropTypes.string.isRequired,
+  /** Expandable toolbar button content can be replaced for a customized content by passing a node to this value. */
+  content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  contentProps: PropTypes.object,
+};
+
+export default ExpandableToolbarButton;

platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.mdx

@@ -0,0 +1,58 @@
+---
+name: Expandable Toolbar Button
+menu: General
+route: components/expandableToolbarButton
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
+
+# Toolbar Button
+
+Expandable Toolbar Buttons are used to populate the Toolbar.
+
+## Import
+
+```javascript
+import { ExpandableToolbarButton, ListMenu } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    const props = {
+      content: ListMenu,
+      contentProps: {
+        options: [
+          { value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
+          { value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
+          { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
+          { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
+          { value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
+        ],
+        renderer: ({ title, subtitle, isActive, index }) => (
+          <>
+            <div>
+              <span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
+                {title}
+              </span>
+              <span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
+                {subtitle}
+              </span>
+            </div>
+            <span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
+          </>
+        )
+      }
+    };
+    return (
+      <div className="py-10 flex justify-center">
+        <ExpandableToolbarButton {...props} />
+      </div>
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={ToolbarButton} />

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

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

platform/ui/src/components/IconButton/IconButton.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 const baseClasses =
-  'text-center items-center justify-center outline-none transition duration-300 ease-in-out font-bold focus:outline-none';
+  'text-center items-center justify-center outline-none font-bold focus:outline-none';
 
 const roundedClasses = {
   none: '',
@@ -113,7 +113,7 @@ const IconButton = ({
 };
 
 IconButton.defaultProps = {
-  onClick: () => {},
+  onClick: () => { },
   color: 'default',
   disabled: false,
   fullWidth: false,

platform/ui/src/components/ListMenu/ListMenu.jsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import classnames from 'classnames';
+import PropTypes from 'prop-types';
+
+const ListMenu = ({ options = [], renderer, onClick }) => {
+  const [selectedIndex, setSelectedIndex] = useState(null);
+
+  const ListItem = (props) => {
+    const flex = 'flex flex-row justify-between items-center';
+    const theme = 'bg-indigo-dark';
+    const hover = 'hover:bg-primary-dark';
+    const spacing = 'p-3 h-8';
+
+    return (
+      <div
+        className={classnames(
+          flex,
+          theme,
+          spacing,
+          'cursor-pointer',
+          !props.isActive && hover,
+          props.isActive && 'bg-primary-light',
+        )}
+        onClick={props.onClick}
+      >
+        {renderer && renderer(props)}
+      </div>
+    );
+  };
+
+  return (
+    <div className="flex flex-col rounded-md bg-secondary-dark pt-2 pb-2">
+      {options.map((option, index) => {
+        const onClickHandler = () => {
+          setSelectedIndex(index);
+          onClick({ ...option, index });
+        };
+
+        return (
+          <ListItem
+            key={`ListItem${index}`}
+            {...option}
+            index={index}
+            isActive={selectedIndex === index}
+            onClick={onClickHandler}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+const noop = () => { };
+
+ListMenu.propTypes = {
+  options: PropTypes.array.isRequired,
+  renderer: PropTypes.func.isRequired,
+  onClick: PropTypes.func
+};
+
+ListMenu.defaultProps = {
+  onClick: noop
+};
+
+export default ListMenu;

platform/ui/src/components/ListMenu/ListMenu.mdx

@@ -0,0 +1,52 @@
+---
+name: List Menu
+menu: General
+route: components/listMenu
+---
+
+import { useState } from 'react';
+import { Playground, Props } from 'docz';
+import { ListMenu } from '@ohif/ui';
+
+# List Menu
+
+List Menus are used to populate expandable Toolbar.
+
+## Import
+
+```javascript
+import { ListMenu } from '@ohif/ui';
+```
+
+<Playground>
+  {() => {
+    return (
+      <ToolbarButton options={[
+        { value: 'windowLevelPreset1', title: 'Soft tissue', subtitle: '400 / 40' },
+        { value: 'windowLevelPreset2', title: 'Lung', subtitle: '1500 / -600' },
+        { value: 'windowLevelPreset3', title: 'Liver', subtitle: '150 / 90' },
+        { value: 'windowLevelPreset4', title: 'Bone', subtitle: '80 / 40' },
+        { value: 'windowLevelPreset5', title: 'Brain', subtitle: '2500 / 480' },
+      ]}
+      renderer={
+        ({ title, subtitle, isActive, index }) => (
+          <>
+            <div>
+              <span className={classnames(isActive ? "text-black" : "text-white", "mr-2 text-base")}>
+                {title}
+              </span>
+              <span className={classnames(isActive ? "text-black" : "text-aqua-pale", "font-thin text-sm")}>
+                {subtitle}
+              </span>
+            </div>
+            <span className={classnames(isActive ? "text-black" : "text-primary-active", "text-sm")}>{index + 1}</span>
+          </>
+        )}
+      />
+    );
+  }}
+</Playground>
+
+## Properties
+
+<Props of={ToolbarButton} />

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

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

platform/ui/src/components/MeasurementTable/MeasurementTable.jsx

@@ -14,7 +14,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
       </div>
       <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
         {!!data.length &&
-          data.map((measurementItem) => {
+          data.map(measurementItem => {
             const { id, label, displayText, isActive } = measurementItem;
             return (
               <div
@@ -45,9 +45,11 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                   <span className="text-base text-primary-light mb-1">
                     {label}
                   </span>
-                  <span className="pl-2 border-l border-primary-light text-base text-white">
-                    {displayText}
-                  </span>
+                  {displayText.map(line => (
+                    <span className="pl-2 border-l border-primary-light text-base text-white">
+                      {line}
+                    </span>
+                  ))}
                   <Icon
                     className={classnames(
                       'text-white w-4 absolute cursor-pointer transition duration-300',
@@ -61,7 +63,7 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
                       right: 4,
                       transform: isActive ? '' : 'translateX(100%)',
                     }}
-                    onClick={(e) => {
+                    onClick={e => {
                       // stopPropagation needed to avoid disable the current active item
                       e.stopPropagation();
                       onEdit(id);
@@ -108,7 +110,7 @@ MeasurementTable.propTypes = {
     PropTypes.shape({
       id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
       label: PropTypes.string,
-      displayText: PropTypes.string,
+      displayText: PropTypes.arrayOf(PropTypes.string),
       isActive: PropTypes.bool,
     })
   ),

platform/ui/src/components/Select/Select.jsx

@@ -76,7 +76,7 @@ const Select = ({
       options={options}
       value={selectedOptions}
       onChange={(selectedOptions, { action }) => {
-        const newSelection = selectedOptions.reduce(
+        const newSelection = !selectedOptions.length ? selectedOptions : selectedOptions.reduce(
           (acc, curr) => acc.concat([curr.value]),
           []
         );

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

@@ -24,7 +24,7 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ content, isSticky, position, tight, children }) => {
+const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
   const [isActive, setIsActive] = useState(false);
 
   const handleMouseOver = () => {
@@ -39,7 +39,7 @@ const Tooltip = ({ content, isSticky, position, tight, children }) => {
     }
   };
 
-  const isOpen = isSticky || isActive;
+  const isOpen = (isSticky || isActive) && !isDisabled;
 
   return (
     <div
@@ -84,10 +84,12 @@ Tooltip.defaultProps = {
   tight: false,
   isSticky: false,
   position: 'bottom',
+  isDisabled: false
 };
 
 Tooltip.propTypes = {
-  // Allow null
+/** prevents tooltip from rendering despite hover/active/sticky */
+  isDisabled: PropTypes.bool,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   position: PropTypes.oneOf([
     'bottom',

platform/ui/src/components/index.js

@@ -39,6 +39,8 @@ import ThumbnailNoImage from './ThumbnailNoImage';
 import ThumbnailTracked from './ThumbnailTracked';
 import ThumbnailList from './ThumbnailList';
 import ToolbarButton from './ToolbarButton';
+import ExpandableToolbarButton from './ExpandableToolbarButton';
+import ListMenu from './ListMenu';
 import Tooltip from './Tooltip';
 import Typography from './Typography';
 import Viewport from './Viewport';
@@ -52,6 +54,8 @@ export {
   DateRange,
   Dialog,
   EmptyStudies,
+  ExpandableToolbarButton,
+  ListMenu,
   Icon,
   IconButton,
   Input,

platform/ui/tailwind.config.js

@@ -16,6 +16,13 @@ module.exports = {
       initial: 'initial',
       inherit: 'inherit',
 
+      indigo: {
+        dark: '#0b1a42'
+      },
+      aqua: {
+        pale: '#7bb2ce'
+      },
+
       primary: {
         light: '#5acce6',
         main: '#0944b3',

platform/viewer/package.json

@@ -67,7 +67,7 @@
     "classnames": "^2.2.6",
     "core-js": "^3.2.1",
     "cornerstone-math": "^0.1.8",
-    "cornerstone-tools": "4.15.1",
+    "cornerstone-tools": "4.16.0",
     "cornerstone-wado-image-loader": "^3.1.2",
     "dcmjs": "^0.12.2",
     "dicom-parser": "^1.8.3",

platform/viewer/public/config/netlify.js

@@ -19,7 +19,9 @@ window.config = {
         imageRendering: 'wadors',
         thumbnailRendering: 'wadors',
         enableStudyLazyLoad: true,
+        supportsFuzzyMatching: true,
       },
     },
   ],
+  defaultDataSourceName: 'dicomweb',
 };