OHIF-208 (#1842)

* Set measurement as active

* Add basic dialog component

* Update styles and prop types

* Jump to image

* Update dialog

* Format date

* Update summary to use primary modalities

* delete empty studySummary page

* add missing PropTypes import

* fix for accidental sync'd viewports

* CR Updates

* CR Update avoid cache of measurements

* Use get measurement

* Add comment to edit function

* Remove request and merge modalities from series

* Update dependency: react-cornerstone-viewport@2.3.9

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.8 → 2.3.9
  * @ohif/extension-dicom-sr: 2.3.8 → 2.3.9

* Update extensions/measurement-tracking/src/panels/PanelMeasurementTableTracking/index.js

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

* Add debugs

* remove console.debug

* Update frameindex to imageindex

* Use new rcv debounced function

* Fix hovering

* Update dialog text

* Dismiss dialogs on esc

* Update dependency: react-cornerstone-viewport@3.0.0

react-cornerstone-viewport
  * @ohif/extension-cornerstone: 2.3.9 → 3.0.0
  * @ohif/extension-dicom-sr: 2.3.9 → 3.0.0

* OHIF-237

* remove console.debug

* Remove dead code brought in from rebase

* EmptyViewport should not display a message

* Remove more dead code from rebase

* fix variable naming

* remove unused hook

* bump yarn lock

* formatting

* Add arrow dialog

* Filter based on trackedSeries

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>

platform/ui/src/components/Dialog/Body.js

@@ -0,0 +1,25 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography } from '..';
+
+const Body = ({ text, className }) => {
+  const theme = 'bg-primary-dark';
+  return (
+    <div className={classNames('relative flex-auto', theme, className)}>
+      <div className="p-6">
+        <Typography variant="body" className="my-4 leading-relaxed">
+          {text}
+        </Typography>
+      </div>
+    </div>
+  );
+};
+
+Body.propTypes = {
+  text: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default Body;

platform/ui/src/components/Dialog/Dialog.jsx

@@ -1,12 +1,83 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 
-const Dialog = ({ children }) => {
-  return <div className="absolute top-0 left-0">{children}</div>;
+import Footer from './Footer';
+import Body from './Body';
+import Header from './Header';
+
+const Dialog = ({
+  title,
+  text,
+  onClose,
+  noCloseButton,
+  actions,
+  onSubmit,
+  header: HeaderComponent,
+  body: BodyComponent,
+  footer: FooterComponent,
+  value: defaultValue
+}) => {
+  const [value, setValue] = useState(defaultValue);
+
+  const theme = 'bg-secondary-light';
+  const flex = 'flex flex-col';
+  const border = 'border-0 rounded-lg shadow-lg';
+  const outline = 'outline-none focus:outline-none';
+  const position = 'relative';
+  const width = 'w-full';
+
+  return (
+    <div
+      className={classNames(theme, flex, border, outline, position, width)}
+    >
+      <HeaderComponent
+        title={title}
+        noCloseButton={noCloseButton}
+        onClose={onClose}
+        value={value}
+        setValue={setValue}
+      />
+      <BodyComponent
+        text={text}
+        value={value}
+        setValue={setValue}
+      />
+      <FooterComponent
+        actions={actions}
+        onSubmit={onSubmit}
+        value={value}
+        setValue={setValue}
+      />
+    </div>
+  );
 };
 
 Dialog.propTypes = {
-  children: PropTypes.node,
+  title: PropTypes.string,
+  text: PropTypes.string,
+  onClose: PropTypes.func,
+  noCloseButton: PropTypes.bool,
+  header: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  body: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  footer: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  onSubmit: PropTypes.func.isRequired,
+  value: PropTypes.object,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Dialog.defaultProps = {
+  header: Header,
+  footer: Footer,
+  body: Body,
+  value: {}
 };
 
 export default Dialog;

platform/ui/src/components/Dialog/Footer.js

@@ -0,0 +1,57 @@
+import React, { useEffect } from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Button } from '..';
+
+const Footer = ({ actions, className, onSubmit, value }) => {
+  const flex = 'flex items-center justify-end';
+  const border = 'border-t-2 border-solid border-black rounded-b';
+  const spacing = 'p-6';
+  const theme = 'bg-primary-dark';
+
+  return (
+    <div className={classNames(flex, border, spacing, theme, className)}>
+      {actions.map((action, index) => {
+        const isFirst = index === 0;
+        const isPrimary = action.type === 'primary';
+
+        const onClickHandler = event => onSubmit({ action, value, event });
+
+        return (
+          <Button
+            key={index}
+            className={classNames({ 'ml-2': !isFirst })}
+            color={isPrimary ? 'primary' : undefined}
+            onClick={onClickHandler}
+            style={{ transition: 'all .15s ease', height: 34 }}
+          >
+            {action.text}
+          </Button>
+        );
+      })}
+    </div>
+  );
+};
+
+const noop = () => { };
+
+Footer.propTypes = {
+  className: PropTypes.string,
+  onSubmit: PropTypes.func.isRequired,
+  actions: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+      value: PropTypes.any,
+      type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
+    })
+  ).isRequired,
+};
+
+Footer.defaultProps = {
+  onSubmit: noop,
+  actions: []
+};
+
+export default Footer;

platform/ui/src/components/Dialog/Header.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import { Typography, Icon } from '..';
+
+const CloseButton = ({ onClick }) => {
+  const theme = 'bg-transparent fill-primary-active';
+  const outline = 'outline-none focus:outline-none';
+  const flex = 'flex h-full';
+
+  return (
+    <button className={classNames(flex, theme, 'border-0')} onClick={onClick}>
+      <Icon name="close" className={classNames(theme, outline, 'h-3 w-3')} />
+    </button>
+  );
+};
+
+CloseButton.propTypes = {
+  onClick: PropTypes.func,
+};
+
+const Header = ({ title, noCloseButton, onClose }) => {
+  const theme = 'bg-secondary-main';
+  const flex = 'flex items-center justify-between';
+  const border = 'border-b-2 border-solid border-black rounded-t';
+  const spacing = 'p-4';
+
+  return (
+    <div className={classNames(theme, flex, border, spacing)}>
+      <Typography variant="h6" className="text-primary-active">
+        {title}
+      </Typography>
+      {!noCloseButton && <CloseButton onClick={onClose} />}
+    </div>
+  );
+};
+
+Header.propTypes = {
+  className: PropTypes.string,
+  title: PropTypes.string,
+  noCloseButton: PropTypes.bool,
+  onClose: PropTypes.func,
+};
+
+Header.defaultProps = {
+  noCloseButton: false
+};
+
+export default Header;

platform/ui/src/components/Input/Input.jsx

@@ -21,6 +21,8 @@ const Input = ({
   value,
   onChange,
   onFocus,
+  autoFocus,
+  onKeyPress,
   ...otherProps
 }) => {
   return (
@@ -32,10 +34,12 @@ const Input = ({
           baseInputClasses,
           transparentClasses[transparent]
         )}
+        autoFocus
         type={type}
         value={value}
         onChange={onChange}
         onFocus={onFocus}
+        onKeyPress={onKeyPress}
         {...otherProps}
       />
     </div>
@@ -52,6 +56,8 @@ Input.propTypes = {
   value: PropTypes.any,
   onChange: PropTypes.func,
   onFocus: PropTypes.func,
+  autoFocus: PropTypes.bool,
+  onKeyPress: PropTypes.func,
 };
 
 export default Input;

platform/ui/src/components/MeasurementTable/MeasurementItem.js

@@ -0,0 +1,87 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { Icon } from '@ohif/ui';
+
+const MeasurementItem = ({ id, index, label, displayText, isActive, onClick, onEdit }) => {
+  const [isHovering, setIsHovering] = useState(false);
+
+  const onEditHandler = event => {
+    event.stopPropagation();
+    onEdit({ id, isActive, event });
+  };
+
+  const onClickHandler = event => onClick({ id, isActive, event });
+
+  const onMouseEnter = () => setIsHovering(true);
+  const onMouseLeave = () => setIsHovering(false);
+
+  return (
+    <div
+      className={classnames(
+        'group flex cursor-pointer bg-black border outline-none border-transparent transition duration-300',
+        {
+          'rounded overflow-hidden border-primary-light': isActive,
+        }
+      )}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onClick={onClickHandler}
+      onKeyDown={onClickHandler}
+      role="button"
+      tabIndex="0"
+    >
+      <div
+        className={classnames(
+          'text-center w-6 py-1 text-base transition duration-300',
+          {
+            'bg-primary-light text-black': isActive,
+            'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
+          }
+        )}
+      >
+        {index}
+      </div>
+      <div className="px-2 py-1 flex flex-1 flex-col relative">
+        <span className="text-base text-primary-light mb-1">
+          {label}
+        </span>
+        {displayText.map(line => (
+          <span key={line} 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',
+            { 'invisible opacity-0 mr-2': !isActive && !isHovering },
+            { 'visible opacity-1': !isActive && isHovering }
+          )}
+          name="pencil"
+          style={{
+            top: 4,
+            right: 4,
+            transform: isActive || isHovering ? '' : 'translateX(100%)',
+          }}
+          onClick={onEditHandler}
+        />
+      </div>
+    </div>
+  );
+};
+
+MeasurementItem.propTypes = {
+  id: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
+  index: PropTypes.number.isRequired,
+  label: PropTypes.string,
+  displayText: PropTypes.array.isRequired,
+  isActive: PropTypes.bool,
+  onClick: PropTypes.func,
+  onEdit: PropTypes.func
+};
+
+MeasurementItem.defaultProps = {
+  isActive: false,
+};
+
+export default MeasurementItem;

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { Icon } from '@ohif/ui';
+
+import MeasurementItem from './MeasurementItem';
 
 const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
   return (
@@ -13,66 +14,18 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
         <span className="text-base font-bold text-white">{amount}</span>
       </div>
       <div className="overflow-y-auto overflow-x-hidden ohif-scrollbar max-h-112">
-        {!!data.length &&
-          data.map(measurementItem => {
-            const { id, label, displayText, isActive } = measurementItem;
-            return (
-              <div
-                key={id}
-                className={classnames(
-                  'group flex cursor-default bg-black border border-transparent transition duration-300 ',
-                  {
-                    'rounded overflow-hidden border-primary-light': isActive,
-                  }
-                )}
-                onClick={() => onClick(measurementItem.id)}
-                onKeyDown={() => onClick(measurementItem.id)}
-                role="button"
-                tabIndex="0"
-              >
-                <div
-                  className={classnames(
-                    'text-center w-6 py-1 text-base transition duration-300',
-                    {
-                      'bg-primary-light text-black': isActive,
-                      'bg-primary-dark text-primary-light group-hover:bg-secondary-main': !isActive,
-                    }
-                  )}
-                >
-                  {id}
-                </div>
-                <div className="px-2 py-1 flex flex-1 flex-col relative">
-                  <span className="text-base text-primary-light mb-1">
-                    {label}
-                  </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',
-                      {
-                        'invisible opacity-0 mr-2': !isActive,
-                      }
-                    )}
-                    name="pencil"
-                    style={{
-                      top: 4,
-                      right: 4,
-                      transform: isActive ? '' : 'translateX(100%)',
-                    }}
-                    onClick={e => {
-                      // stopPropagation needed to avoid disable the current active item
-                      e.stopPropagation();
-                      onEdit(id);
-                    }}
-                  />
-                </div>
-              </div>
-            );
-          })}
+        {data.length && data.map((measurementItem, index) => (
+          <MeasurementItem
+            key={measurementItem.id}
+            id={measurementItem.id}
+            index={index + 1}
+            label={measurementItem.label}
+            isActive={measurementItem.isActive}
+            displayText={measurementItem.displayText}
+            onClick={onClick}
+            onEdit={onEdit}
+          />
+        ))}
         {!data.length && (
           <div
             className={classnames(
@@ -99,8 +52,8 @@ const MeasurementTable = ({ data, title, amount, onClick, onEdit }) => {
 MeasurementTable.defaultProps = {
   amount: null,
   data: [],
-  onClick: () => {},
-  onEdit: () => {},
+  onClick: () => { },
+  onEdit: () => { },
 };
 
 MeasurementTable.propTypes = {

platform/ui/src/contextProviders/DialogProvider.jsx

@@ -4,6 +4,7 @@ import React, {
   useContext,
   useCallback,
   useEffect,
+  useRef
 } from 'react';
 
 import PropTypes from 'prop-types';
@@ -251,12 +252,18 @@ const DialogProvider = ({ children, service }) => {
     });
   };
 
+  const onKeyDownHandler = event => {
+    if (event.key === "Escape") {
+      dismissAll();
+    }
+  };
+
   const validCallback = callback => callback && typeof callback === 'function';
 
   return (
     <DialogContext.Provider value={{ create, dismiss, dismissAll, isEmpty }}>
       {!isEmpty() &&
-        <div className='w-full h-full absolute'>
+        <div className='w-full h-full absolute' onKeyDown={onKeyDownHandler}>
           {renderDialogs()}
         </div>
       }

platform/ui/src/contextProviders/ViewportGridProvider.jsx

@@ -27,10 +27,10 @@ export function ViewportGridProvider({ children, service }) {
         return { ...state, ...{ activeViewportIndex: action.payload } };
       }
       case 'SET_DISPLAYSET_FOR_VIEWPORT': {
-        const { viewportIndex, displaySetInstanceUID } = action.payload;
+        const { viewportIndex, displaySetInstanceUID, imageIndex } = action.payload;
         const viewports = state.viewports.slice();
 
-        viewports[viewportIndex] = { displaySetInstanceUID };
+        viewports[viewportIndex] = { displaySetInstanceUID, imageIndex };
 
         return { ...state, ...{ viewports } };
       }
@@ -69,12 +69,13 @@ export function ViewportGridProvider({ children, service }) {
     [dispatch]
   );
   const setDisplaysetForViewport = useCallback(
-    ({ viewportIndex, displaySetInstanceUID }) =>
+    ({ viewportIndex, displaySetInstanceUID, imageIndex }) =>
       dispatch({
         type: 'SET_DISPLAYSET_FOR_VIEWPORT',
         payload: {
           viewportIndex,
           displaySetInstanceUID,
+          imageIndex
         },
       }),
     [dispatch]