Complete rehydration.

platform/core/package.json

@@ -44,6 +44,7 @@
     "isomorphic-base64": "^1.0.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.merge": "^4.6.1",
+    "moment": "^2.24.0",
     "mousetrap": "^1.6.3",
     "validate.js": "^0.12.0"
   }

platform/core/src/DICOMSR/dataExchange.js

@@ -43,45 +43,6 @@ const retrieveMeasurements = server => {
   return retrieveMeasurementFromSR(latestSeries, studies, serverUrl);
 };
 
-/**
- *  Function to be registered into MeasurementAPI to store measurements into DICOM Structured Reports
- *
- * @param {Object} measurementData - OHIF measurementData object
- * @param {Object} filter
- * @param {serverType} server
- * @returns {Object} With message to be displayed on success
- */
-const storeMeasurementsOld = async (measurementData, filter, server) => {
-  log.info('[DICOMSR] storeMeasurements');
-
-  if (!server || server.type !== 'dicomWeb') {
-    log.error('[DICOMSR] DicomWeb server is required!');
-    return Promise.reject({});
-  }
-
-  const serverUrl = server.wadoRoot;
-  const firstMeasurementKey = Object.keys(measurementData)[0];
-  const firstMeasurement = measurementData[firstMeasurementKey][0];
-  const StudyInstanceUID =
-    firstMeasurement && firstMeasurement.StudyInstanceUID;
-
-  try {
-    await stowSRFromMeasurements(measurementData, serverUrl);
-    if (StudyInstanceUID) {
-      studies.deleteStudyMetadataPromise(StudyInstanceUID);
-    }
-
-    return {
-      message: 'Measurements saved successfully',
-    };
-  } catch (error) {
-    log.error(
-      `[DICOMSR] Error while saving the measurements: ${error.message}`
-    );
-    throw new Error('Error while saving the measurements.');
-  }
-};
-
 /**
  *
  * @param {object[]} measurementData An array of measurements from the measurements service
@@ -119,7 +80,7 @@ const generateReport = measurementData => {
  * that you wish to serialize.
  * @param {object} dataSource The dataSource that you wish to use to persist the data.
  */
-const storeMeasurements = async (measurementData, dataSource) => {
+const storeMeasurements = async (measurementData, dataSource, onSuccess) => {
   // TODO -> Eventually use the measurements directly and not the dcmjs adapter,
   // But it is good enough for now whilst we only have cornerstone as a datasource.
   log.info('[DICOMSR] storeMeasurements');
@@ -136,7 +97,11 @@ const storeMeasurements = async (measurementData, dataSource) => {
     await dataSource.store.dicom(naturalizedReport);
 
     if (StudyInstanceUID) {
-      studies.deleteStudyMetadataPromise(StudyInstanceUID);
+      dataSource.deleteStudyMetadataPromise(StudyInstanceUID);
+    }
+
+    if (onSuccess) {
+      onSuccess(naturalizedReport);
     }
 
     return {

platform/core/src/DataSources/IWebApiDataSource.js

@@ -17,6 +17,7 @@ function create({
   retrieve,
   store,
   retrieveSeriesMetadata,
+  deleteStudyMetadataPromise,
   getImageIdsForDisplaySet,
 }) {
   const defaultQuery = {
@@ -59,6 +60,7 @@ function create({
     store: store || defaultStore,
     getImageIdsForDisplaySet,
     retrieveSeriesMetadata,
+    deleteStudyMetadataPromise,
   };
 }
 

platform/core/src/classes/HotkeysManager.js

@@ -1,3 +1,4 @@
+import objectHash from 'object-hash';
 import hotkeys from './../utils/hotkeys';
 import log from './../log.js';
 
@@ -6,6 +7,7 @@ import log from './../log.js';
  *
  * @typedef {Object} HotkeyDefinition
  * @property {String} commandName - Command to call
+ * @property {Object} commandOptions - Command options
  * @property {String} label - Display name for hotkey
  * @property {String[]} keys - Keys to bind; Follows Mousetrap.js binding syntax
  */
@@ -18,7 +20,7 @@ export class HotkeysManager {
 
     if (!commandsManager) {
       log.warn(
-        'HotkeysManager instantiated without a commandsManager. Hotkeys will be unable to find and run commands.'
+        '[hotkeys] HotkeysManager instantiated without a commandsManager. Hotkeys will be unable to find and run commands.'
       );
     }
 
@@ -141,28 +143,30 @@ export class HotkeysManager {
    * When a hotkey combination is triggered, the command name and active contexts
    * are used to locate the correct command to call.
    *
-   * @param {HotkeyDefinition} commandName
+   * @param {HotkeyDefinition} command
    * @param {String} extension
    * @returns {undefined}
    */
-  registerHotkeys({ commandName, keys, label } = {}, extension) {
+  registerHotkeys({ commandName, commandOptions = {}, keys, label } = {}, extension) {
     if (!commandName) {
-      log.warn(`No command was defined for hotkey "${keys}"`);
+      log.warn(`[hotkeys] No command was defined for hotkey "${keys}"`);
       return;
     }
 
-    const previouslyRegisteredDefinition = this.hotkeyDefinitions[commandName];
+    const commandHash = objectHash({ commandName, commandOptions });
+    const options = Object.keys(commandOptions).length ? JSON.stringify(commandOptions) : 'no';
+    const previouslyRegisteredDefinition = this.hotkeyDefinitions[commandHash];
 
     if (previouslyRegisteredDefinition) {
       const previouslyRegisteredKeys = previouslyRegisteredDefinition.keys;
       this._unbindHotkeys(commandName, previouslyRegisteredKeys);
-      log.info(`Unbinding ${commandName} from ${previouslyRegisteredKeys}`);
+      log.info(`[hotkeys] Unbinding ${commandName} with ${options} options from ${previouslyRegisteredKeys}`);
     }
 
     // Set definition & bind
-    this.hotkeyDefinitions[commandName] = { keys, label };
-    this._bindHotkeys(commandName, keys);
-    log.info(`Binding ${commandName} to ${keys}`);
+    this.hotkeyDefinitions[commandHash] = { keys, label };
+    this._bindHotkeys(commandName, commandOptions, keys);
+    log.info(`[hotkeys] Binding ${commandName} with ${options} options to ${keys}`);
   }
 
   /**
@@ -191,7 +195,7 @@ export class HotkeysManager {
    * @param {string[]} keys - One or more key combinations that should trigger command
    * @returns {undefined}
    */
-  _bindHotkeys(commandName, keys) {
+  _bindHotkeys(commandName, commandOptions = {}, keys) {
     const isKeyDefined = keys === '' || keys === undefined;
     if (isKeyDefined) {
       return;
@@ -203,7 +207,7 @@ export class HotkeysManager {
     hotkeys.bind(combinedKeys, evt => {
       evt.preventDefault();
       evt.stopPropagation();
-      this._commandsManager.runCommand(commandName, { evt });
+      this._commandsManager.runCommand(commandName, { evt, ...commandOptions });
     });
   }
 

platform/core/src/defaults/hotkeyBindings.js

@@ -0,0 +1,103 @@
+import windowLevelPresets from "./windowLevelPresets";
+
+/*
+ * Supported Keys: https://craig.is/killing/mice
+ */
+export default [
+  /** Global */
+  {
+    commandName: 'incrementActiveViewport',
+    label: 'Next Viewport',
+    keys: ['right'],
+  },
+  {
+    commandName: 'decrementActiveViewport',
+    label: 'Previous Viewport',
+    keys: ['left'],
+  },
+  /** Viewport */
+  { commandName: 'rotateViewportCW', label: 'Rotate Right', keys: ['r'] },
+  { commandName: 'rotateViewportCCW', label: 'Rotate Left', keys: ['l'] },
+  { commandName: 'invertViewport', label: 'Invert', keys: ['i'] },
+  {
+    commandName: 'flipViewportVertical',
+    label: 'Flip Horizontally',
+    keys: ['h'],
+  },
+  {
+    commandName: 'flipViewportHorizontal',
+    label: 'Flip Vertically',
+    keys: ['v'],
+  },
+  { commandName: 'scaleUpViewport', label: 'Zoom In', keys: ['+'] },
+  { commandName: 'scaleDownViewport', label: 'Zoom Out', keys: ['-'] },
+  { commandName: 'fitViewportToWindow', label: 'Zoom to Fit', keys: ['='] },
+  { commandName: 'resetViewport', label: 'Reset', keys: ['space'] },
+  { commandName: 'nextImage', label: 'Next Image', keys: ['down'] },
+  { commandName: 'previousImage', label: 'Previous Image', keys: ['up'] },
+  {
+    commandName: 'previousViewportDisplaySet',
+    label: 'Previous Series',
+    keys: ['pagedown'],
+  },
+  {
+    commandName: 'nextViewportDisplaySet',
+    label: 'Next Series',
+    keys: ['pageup'],
+  },
+  /** Window level presets */
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[1],
+    label: 'W/L Preset 1',
+    keys: ['1'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[2],
+    label: 'W/L Preset 2',
+    keys: ['2'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[3],
+    label: 'W/L Preset 3',
+    keys: ['3'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[4],
+    label: 'W/L Preset 4',
+    keys: ['4'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[5],
+    label: 'W/L Preset 5',
+    keys: ['5'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[6],
+    label: 'W/L Preset 6',
+    keys: ['6'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[7],
+    label: 'W/L Preset 7',
+    keys: ['7'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[8],
+    label: 'W/L Preset 8',
+    keys: ['8'],
+  },
+  {
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[9],
+    label: 'W/L Preset 9',
+    keys: ['9'],
+  },
+];

platform/core/src/defaults/index.js

@@ -0,0 +1,4 @@
+import hotkeyBindings from './hotkeyBindings';
+import windowLevelPresets from './windowLevelPresets';
+export { hotkeyBindings, windowLevelPresets };
+export default { hotkeyBindings, windowLevelPresets };

platform/core/src/defaults/windowLevelPresets.js

@@ -0,0 +1,12 @@
+export default {
+  1: { description: 'Soft tissue', window: '400', level: '40' },
+  2: { description: 'Lung', window: '1500', level: '-600' },
+  3: { description: 'Liver', window: '150', level: '90' },
+  4: { description: 'Bone', window: '2500', level: '480' },
+  5: { description: 'Brain', window: '80', level: '40' },
+  6: { description: 'Trest', window: '1', level: '1' },
+  7: { description: '', window: '', level: '' },
+  8: { description: '', window: '', level: '' },
+  9: { description: '', window: '', level: '' },
+  10: { description: '', window: '', level: '' },
+};

platform/core/src/index.js

@@ -20,7 +20,8 @@ import studies from './studies/';
 import ui from './ui';
 import user from './user.js';
 import { ViewModelProvider, useViewModel } from './ViewModelContext';
-import utils, { hotkeys } from './utils/';
+import utils from './utils/';
+import defaults from './defaults';
 
 import {
   UIDialogService,
@@ -37,6 +38,11 @@ import {
 
 import IWebApiDataSource from './DataSources/IWebApiDataSource';
 
+const hotkeys = {
+  ...utils.hotkeys,
+  defaults: { hotkeyBindings: defaults.hotkeyBindings }
+};
+
 const OHIF = {
   MODULE_TYPES,
   //
@@ -45,6 +51,7 @@ const OHIF = {
   HotkeysManager,
   ServicesManager,
   //
+  defaults,
   utils,
   hotkeys,
   studies,
@@ -88,6 +95,7 @@ export {
   HotkeysManager,
   ServicesManager,
   //
+  defaults,
   utils,
   hotkeys,
   studies,

platform/core/src/index.test.js

@@ -15,6 +15,7 @@ describe('Top level exports', () => {
       'UIDialogService',
       'MeasurementService',
       //
+      'defaults',
       'utils',
       'hotkeys',
       'studies',

platform/core/src/redux/reducers/preferences.js

@@ -1,16 +1,7 @@
+import { windowLevelPresets } from '../../defaults';
+
 const defaultState = {
-  windowLevelData: {
-    1: { description: 'Soft tissue', window: '550', level: '40' },
-    2: { description: 'Lung', window: '150', level: '-600' },
-    3: { description: 'Liver', window: '150', level: '90' },
-    4: { description: 'Bone', window: '2500', level: '480' },
-    5: { description: 'Brain', window: '80', level: '40' },
-    6: { description: 'Trest', window: '1', level: '1' },
-    7: { description: '', window: '', level: '' },
-    8: { description: '', window: '', level: '' },
-    9: { description: '', window: '', level: '' },
-    10: { description: '', window: '', level: '' },
-  },
+  windowLevelData: windowLevelPresets,
   generalPreferences: {
     // language: 'en-US'
   },

platform/core/src/services/DicomMetadataStore/DicomMetadataStore.js

@@ -72,16 +72,16 @@ const BaseImplementation = {
       study = _model.studies[_model.studies.length - 1];
     }
 
-    // TODO: Worth identifying why this is being called many times with series
-    // that are already "added"?
-    const didAddSeries = study.addSeries(instances);
+    study.addSeries(instances);
 
-    if (didAddSeries) {
-      this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
-        StudyInstanceUID,
-        SeriesInstanceUID,
-      });
-    }
+    // Broadcast an event even if we used cached data.
+    // This is because the mode needs to listen to instances that are added to build up its active displaySets.
+    // It will see there are cached displaySets and end early if this Series has already been fired in this
+    // Mode session for some reason.
+    this._broadcastEvent(EVENTS.INSTANCES_ADDED, {
+      StudyInstanceUID,
+      SeriesInstanceUID,
+    });
   },
   addStudy(study) {
     const { StudyInstanceUID } = study;

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

@@ -27,6 +27,15 @@ export default class ToolBarService {
     return this.buttons;
   }
 
+  getActiveTools() {
+    return Object.keys(this.buttons).filter(key => {
+      const button = this.buttons[key];
+      if (button && button.props && button.props.isActive) {
+        return button;
+      }
+    });
+  }
+
   setButtons(buttons) {
     this.buttons = buttons;
     this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});

platform/core/src/services/UIViewportDialogService/index.js

@@ -26,13 +26,21 @@ const serviceImplementation = {
  *
  * @param {ViewportDialogProps} props { content, contentProps, viewportIndex }
  */
-function _show({ viewportIndex, type, message, actions, onSubmit }) {
+function _show({
+  viewportIndex,
+  type,
+  message,
+  actions,
+  onSubmit,
+  onOutsideClick,
+}) {
   return serviceImplementation._show({
     viewportIndex,
     type,
     message,
     actions,
     onSubmit,
+    onOutsideClick,
   });
 }
 

platform/core/src/utils/formatDate.js

@@ -0,0 +1,12 @@
+import moment from 'moment';
+
+/**
+ * Format date
+ *
+ * @param {string} date Date to be formatted
+ * @param {string} format Desired date format
+ * @returns {string} Formatted date
+ */
+export default (date, format = 'DD-MMM-YYYY') => {
+  return moment(date).format(format);
+};

platform/core/src/utils/index.js

@@ -15,6 +15,7 @@ import makeCancelable from './makeCancelable';
 import hotkeys from './hotkeys';
 import Queue from './Queue';
 import isDicomUid from './isDicomUid';
+import formatDate from './formatDate';
 import formatPN from './formatPN';
 import resolveObjectPath from './resolveObjectPath';
 import * as hierarchicalListUtils from './hierarchicalListUtils';
@@ -27,6 +28,7 @@ const utils = {
   addServers,
   sortBy,
   writeScript,
+  formatDate,
   formatPN,
   b64toBlob,
   StackManager,
@@ -50,6 +52,7 @@ export {
   absoluteUrl,
   addServers,
   sortBy,
+  formatDate,
   writeScript,
   b64toBlob,
   StackManager,

platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.jsx

@@ -21,13 +21,21 @@ const InputLabelWrapper = ({
   className,
   children,
 }) => {
+  const onClickHandler = e => {
+    if (!isSortable) {
+      return;
+    }
+
+    onLabelClick(e);
+  };
+
   return (
     <label className={classnames(baseLabelClassName, className)}>
       <span
         role="button"
         className={spanClassName}
-        onClick={onLabelClick}
-        onKeyDown={onLabelClick}
+        onClick={onClickHandler}
+        onKeyDown={onClickHandler}
         tabIndex="0"
       >
         {label}

platform/ui/src/components/Notification/Notification.jsx

@@ -1,16 +1,35 @@
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import classnames from 'classnames';
 import PropTypes from 'prop-types';
 import { Button, Icon } from '@ohif/ui';
 
-const Notification = ({ type, message, actions, onSubmit }) => {
+const Notification = ({ type, message, actions, onSubmit, onOutsideClick }) => {
+  const notificationRef = useRef(null);
+
+  useEffect(() => {
+    const notificationElement = notificationRef.current;
+    const handleClick = function(event) {
+      const isClickInside = notificationElement.contains(event.target);
+
+      if (!isClickInside) {
+        onOutsideClick();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleClick);
+    };
+  }, [onOutsideClick]);
+
   const iconsByType = {
     error: {
       icon: 'info',
       color: 'text-red-700',
     },
     warning: {
-      icon: 'info',
+      icon: 'notificationwarning-diamond',
       color: 'text-yellow-500',
     },
     info: {
@@ -35,7 +54,10 @@ const Notification = ({ type, message, actions, onSubmit }) => {
   const { icon, color } = getIconData();
 
   return (
-    <div className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright">
+    <div
+      ref={notificationRef}
+      className="flex flex-col p-2 mx-2 mt-2 rounded bg-common-bright"
+    >
       <div className="flex flex-grow">
         <Icon name={icon} className={classnames('w-5', color)} />
         <span className="ml-2 text-base text-black">{message}</span>
@@ -65,6 +87,7 @@ const Notification = ({ type, message, actions, onSubmit }) => {
 
 Notification.defaultProps = {
   type: 'info',
+  onOutsideClick: () => {},
 };
 
 Notification.propTypes = {
@@ -78,6 +101,8 @@ Notification.propTypes = {
     })
   ).isRequired,
   onSubmit: PropTypes.func.isRequired,
+  /** Can be used as a callback to dismiss the notification for clicks that occur outside of it */
+  onOutsideClick: PropTypes.func,
 };
 
 export default Notification;

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

@@ -250,7 +250,7 @@ function PatientInfo({
                     Thickness
                   </span>
                   <span className={classnames(classes.infoText)}>
-                    {thickness}
+                    {thickness ? thickness : 'N/A'}
                   </span>
                 </div>
                 <div className={classnames(classes.row)}>

platform/ui/src/components/ViewportPane/ViewportPane.jsx

@@ -14,6 +14,7 @@ function ViewportPane({
   onInteraction,
   acceptDropsFor,
 }) {
+  let dropElement = null;
   const [{ isHovered, isHighlighted }, drop] = useDrop({
     accept: acceptDropsFor,
     // TODO: pass in as prop?
@@ -22,7 +23,7 @@ function ViewportPane({
       const isOver = monitor.isOver();
 
       if (canDrop && isOver && onDrop) {
-        onInteraction();
+        onInteractionHandler();
         onDrop(droppedItem);
       }
     },
@@ -33,16 +34,32 @@ function ViewportPane({
     }),
   });
 
+  const focus = () => {
+    if (dropElement) {
+      dropElement.focus();
+    }
+  };
+
+  const onInteractionHandler = () => {
+    onInteraction();
+    focus();
+  };
+
+  const refHandler = element => {
+    drop(element);
+    dropElement = element;
+  };
+
   return (
     <div
-      ref={drop}
-      // onInteraction...
+      ref={refHandler}
+      // onInteractionHandler...
       // https://reactjs.org/docs/events.html#mouse-events
       // https://stackoverflow.com/questions/8378243/catch-scrolling-event-on-overflowhidden-element
-      onMouseDown={onInteraction}
-      onClick={onInteraction}
-      onScroll={onInteraction}
-      onWheel={onInteraction}
+      onMouseDown={onInteractionHandler}
+      onClick={onInteractionHandler}
+      onScroll={onInteractionHandler}
+      onWheel={onInteractionHandler}
       className={classnames(
         'flex flex-col',
         'rounded-lg hover:border-primary-light transition duration-300 outline-none overflow-hidden',
@@ -73,7 +90,7 @@ ViewportPane.propTypes = {
   onInteraction: PropTypes.func.isRequired,
 };
 
-const noop = () => {};
+const noop = () => { };
 
 ViewportPane.defaultProps = {
   onInteraction: noop,

platform/ui/src/contextProviders/ViewportDialogProvider.jsx

@@ -18,6 +18,9 @@ const DEFAULT_STATE = {
   onSubmit: () => {
     console.log('btn value?');
   },
+  onOutsideClick: () => {
+    console.warn('default: onOutsideClick')
+  },
   onDismiss: () => {
     console.log('dismiss? -1');
   },

platform/ui/tailwind.config.js

@@ -328,6 +328,8 @@ module.exports = {
       '0': '0',
       auto: 'auto',
       full: '100%',
+      viewport: '0.5rem',
+      'viewport-scrollbar': '1.3rem'
     },
     letterSpacing: {
       tighter: '-0.05em',

platform/viewer/src/App.jsx

@@ -30,7 +30,7 @@ const Router = JSON.parse(process.env.USE_HASH_ROUTER)
   ? HashRouter
   : BrowserRouter;
 
-let commandsManager, extensionManager, servicesManager;
+let commandsManager, extensionManager, servicesManager, hotkeysManager;
 
 function App({ config, defaultExtensions }) {
   const init = appInit(config, defaultExtensions);
@@ -39,17 +39,19 @@ function App({ config, defaultExtensions }) {
   commandsManager = init.commandsManager;
   extensionManager = init.extensionManager;
   servicesManager = init.servicesManager;
+  hotkeysManager = init.hotkeysManager;
 
   // Set appConfig
   const appConfigState = init.appConfig;
   const { routerBasename, modes, dataSources } = appConfigState;
   // Use config to create routes
-  const appRoutes = createRoutes(
+  const appRoutes = createRoutes({
     modes,
     dataSources,
     extensionManager,
-    servicesManager
-  );
+    servicesManager,
+    hotkeysManager
+  });
   const {
     UIDialogService,
     UIModalService,

platform/viewer/src/appInit.js

@@ -2,7 +2,7 @@ import {
   CommandsManager,
   ExtensionManager,
   ServicesManager,
-  // HotkeysManager,
+  HotkeysManager,
   UINotificationService,
   UIModalService,
   UIDialogService,
@@ -31,13 +31,14 @@ function appInit(appConfigOrFunc, defaultExtensions) {
   // TODO: Wire this up to Rodrigo's basic Context "ContextService"
   const commandsManagerConfig = {
     /** Used by commands to inject `viewports` from "redux" */
-    getAppState: () => {},
+    getAppState: () => { },
     /** Used by commands to determine active context */
     getActiveContexts: () => ['VIEWER', 'ACTIVE_VIEWPORT::CORNERSTONE'],
   };
-  const commandsManager = new CommandsManager(commandsManagerConfig);
+
   const servicesManager = new ServicesManager();
-  // const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
+  const commandsManager = new CommandsManager(commandsManagerConfig);
+  const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
   const extensionManager = new ExtensionManager({
     commandsManager,
     servicesManager,
@@ -64,7 +65,6 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     appConfig.dataSources
   );
 
-  // TODO: Init global hotkeys, or the hotkeys manager?
   // TODO: We no longer use `utils.addServer`
   // TODO: We no longer init webWorkers at app level
   // TODO: We no longer init the user Manager
@@ -80,6 +80,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     commandsManager,
     extensionManager,
     servicesManager,
+    hotkeysManager
   };
 }
 

platform/viewer/src/components/ViewportGrid.jsx

@@ -115,15 +115,17 @@ function ViewerViewportGrid(props) {
         viewportComponents
       );
 
+      const onInterationHandler = () => {
+        setActiveViewportIndex(viewportIndex);
+      };
+
       viewportPanes[i] = (
         <ViewportPane
           key={viewportIndex}
           className="m-1"
           acceptDropsFor="displayset"
           onDrop={onDropHandler.bind(null, viewportIndex)}
-          onInteraction={() => {
-            setActiveViewportIndex(viewportIndex);
-          }}
+          onInteraction={onInterationHandler}
           isActive={activeViewportIndex === viewportIndex}
         >
           <ViewportComponent

platform/viewer/src/customHooks/useQuery.js

@@ -6,6 +6,6 @@ import { useLocation } from 'react-router-dom';
  *
  * @name useQuery
  */
-export default function() {
+export default function () {
   return new URLSearchParams(useLocation().search);
 }

platform/viewer/src/routes/Mode/Mode.jsx

@@ -15,6 +15,7 @@ export default function ModeRoute({
   dataSourceName,
   extensionManager,
   servicesManager,
+  hotkeysManager
 }) {
   // Parse route params/querystring
   const query = useQuery();
@@ -26,7 +27,7 @@ export default function ModeRoute({
       ? StudyInstanceUIDs
       : [StudyInstanceUIDs];
 
-  const { extensions, sopClassHandlers } = mode;
+  const { extensions, sopClassHandlers, hotkeys } = mode;
 
   if (dataSourceName === undefined) {
     dataSourceName = extensionManager.defaultDataSourceName;
@@ -74,6 +75,22 @@ export default function ModeRoute({
     return ViewportGrid({ ...props, dataSource });
   }
 
+  useEffect(() => {
+    if (!hotkeys) {
+      console.warn('[hotkeys] No bindings defined for hotkeys hook!');
+      return;
+    }
+
+    console.debug('[hotkeys] Setting up hotkeys...');
+    hotkeysManager.setDefaultHotKeys(hotkeys);
+    hotkeysManager.setHotkeys(hotkeys);
+
+    return () => {
+      console.debug('[hotkeys] Removing hotkeys...');
+      hotkeysManager.destroy();
+    };
+  }, []);
+
   useEffect(() => {
     route.init({ servicesManager, extensionManager });
   }, [
@@ -83,6 +100,7 @@ export default function ModeRoute({
     route,
     servicesManager,
     extensionManager,
+    hotkeysManager
   ]);
 
   // This queries for series, but... What does it do with them?

platform/viewer/src/routes/WorkList/filtersMeta.js

@@ -53,7 +53,7 @@ const filtersMeta = [
     name: 'instances',
     displayName: 'Instances',
     inputType: 'None',
-    isSortable: true,
+    isSortable: false,
     gridCol: 2,
   },
 ];

platform/viewer/src/routes/buildModeRoutes.js

@@ -22,12 +22,13 @@ import { ViewModelProvider } from '@ohif/core';
 
   /:modeId/:modeRoute/?queryParameters=example
  */
-export default function buildModeRoutes(
+export default function buildModeRoutes({
   modes,
   dataSources,
   extensionManager,
-  servicesManager
-) {
+  servicesManager,
+  hotkeysManager
+}) {
   const routes = [];
 
   // const dataSources = Object.keys(extensionManager.dataSourceMap).map(a =>
@@ -58,6 +59,7 @@ export default function buildModeRoutes(
             dataSourceName={dataSourceName}
             extensionManager={extensionManager}
             servicesManager={servicesManager}
+            hotkeysManager={hotkeysManager}
           />
         </ViewModelProvider>
       );
@@ -83,6 +85,7 @@ export default function buildModeRoutes(
           dataSourceName={defaultDataSourceName}
           extensionManager={extensionManager}
           servicesManager={servicesManager}
+          hotkeysManager={hotkeysManager}
         />
       </ViewModelProvider>
     );

platform/viewer/src/routes/index.js

@@ -21,19 +21,25 @@ const bakedInRoutes = [
   { component: NotFound },
 ];
 
-const createRoutes = (
+const createRoutes = ({
   modes,
   dataSources,
   extensionManager,
-  servicesManager
-) => {
-  const routes =
-    buildModeRoutes(modes, dataSources, extensionManager, servicesManager) ||
-    [];
+  servicesManager,
+  hotkeysManager
+}) => {
+  const routes = buildModeRoutes({
+    modes,
+    dataSources,
+    extensionManager,
+    servicesManager,
+    hotkeysManager
+  }) || [];
+
   const allRoutes = [...routes, ...bakedInRoutes];
 
   console.log(
-    'Creating Routes: ',
+    'Creating Routes:',
     modes,
     dataSources,
     routes,