Fix/update branch cherry pick (#2039)

* Update all the icons

* Turn off global tool sync; watch as the world burns

* Shift a bunch of things around so we can start tracking/setting per element

* ToolBarService to initiate one of three different calls; callback passed to all button types

* SplitButton and Toolbar Button to use new `onInteraction` prop and new toolbar state

* Changes to toolbar button interface and config

* Fix broken layout selector

* Update SR viewport to activate tools in viewport component

* Duplicate activation logic in measurement tracking extension

* Add alternative/dashed variants for SR Viewport

* pass through "setToolActive" commands for other viewport types

* fix small overlay bugs (no wwwc or scale info)

* Show SpacingBetweenSlices instead of PixelSpacing in patient information dialog

* Fix prop-types

* Update tracked viewport to have alternative tracked styling

* alt styling for SR viewports

* Update to support isLocked + isRehydratable

* fix broken logic

* fix broken logic

* switch icon style

* fix icon styles

* hover and click to start flow

* expedited workflow when data is not dirty (just after SR hydration)

* fix: setting elliptical roi tool

* fix arrow annotate dialog

* fix: do not show learn more button for now

* remove dead code

* simpler cache invalidation

* simpler cache invalidation part 2

* Fix for unable to spand study cards on separate pages

extensions/cornerstone/src/CornerstoneViewportDownloadForm.js

@@ -13,7 +13,9 @@ const DEFAULT_SIZE = 512;
 const MAX_TEXTURE_SIZE = 10000;
 
 const CornerstoneViewportDownloadForm = ({ onClose, activeViewportIndex }) => {
-  const activeEnabledElement = getEnabledElement(activeViewportIndex);
+  const { enabledElement: activeEnabledElement } = getEnabledElement(
+    activeViewportIndex
+  );
 
   const enableViewport = viewportElement => {
     if (viewportElement) {

extensions/cornerstone/src/OHIFCornerstoneViewport.js

@@ -1,8 +1,11 @@
 import React, { Component } from 'react';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF from '@ohif/core';
+import csTools from 'cornerstone-tools';
 import PropTypes from 'prop-types';
 import debounce from 'lodash.debounce';
+import getTools from './utils/getTools.js';
+import setActiveAndPassiveToolsForElement from './utils/setActiveAndPassiveToolsForElement';
 
 import { setEnabledElement } from './state';
 
@@ -23,6 +26,7 @@ class OHIFCornerstoneViewport extends Component {
     dataSource: PropTypes.object,
     children: PropTypes.node,
     customProps: PropTypes.object,
+    ToolBarService: PropTypes.object,
   };
 
   static name = 'OHIFCornerstoneViewport';
@@ -131,7 +135,7 @@ class OHIFCornerstoneViewport extends Component {
 
     if (
       displaySet.displaySetInstanceUID !==
-      prevDisplaySet.displaySetInstanceUID ||
+        prevDisplaySet.displaySetInstanceUID ||
       displaySet.SOPInstanceUID !== prevDisplaySet.SOPInstanceUID ||
       displaySet.imageIndex !== prevDisplaySet.imageIndex
     ) {
@@ -203,7 +207,14 @@ class OHIFCornerstoneViewport extends Component {
           // Need to expose viewportGrid as a "UI Service"
           onElementEnabled={evt => {
             const enabledElement = evt.detail.element;
+            const tools = getTools();
+            const toolAlias = ToolBarService.state.primaryToolId;
+
             setEnabledElement(viewportIndex, enabledElement);
+            setActiveAndPassiveToolsForElement(enabledElement, tools);
+            csTools.setToolActiveForElement(enabledElement, toolAlias, {
+              mouseButtonMask: 1,
+            });
           }}
           // Sync resize throttle w/ sidepanel animation duration to prevent
           // seizure inducing strobe blinking effect

extensions/cornerstone/src/callInputDialog.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Input, Dialog } from '@ohif/ui';
+
+/**
+ *
+ * @param {*} data
+ * @param {*} data.text
+ * @param {*} data.label
+ * @param {*} event
+ * @param {*} callback
+ * @param {*} isArrowAnnotateInputDialog
+ */
+function callInputDialog(
+  UIDialogService,
+  data,
+  callback,
+  isArrowAnnotateInputDialog = true
+) {
+  const dialogId = 'enter-annotation';
+  const label = data
+    ? isArrowAnnotateInputDialog
+      ? data.text
+      : data.label
+    : '';
+
+  const onSubmitHandler = ({ action, value }) => {
+    switch (action.id) {
+      case 'save':
+        callback(value.label, action.id);
+        break;
+      case 'cancel':
+        callback('', action.id);
+        break;
+    }
+    UIDialogService.dismiss({ id: dialogId });
+  };
+
+  if (UIDialogService) {
+    UIDialogService.create({
+      id: dialogId,
+      centralize: true,
+      isDraggable: false,
+      showOverlay: true,
+      content: Dialog,
+      contentProps: {
+        title: 'Enter your annotation',
+        value: { label },
+        noCloseButton: true,
+        onClose: () => UIDialogService.dismiss({ id: dialogId }),
+        actions: [
+          { id: 'cancel', text: 'Cancel', type: 'secondary' },
+          { id: 'save', text: 'Save', type: 'primary' },
+        ],
+        onSubmit: onSubmitHandler,
+        body: ({ value, setValue }) => {
+          return (
+            <div className="p-4 bg-primary-dark">
+              <Input
+                autoFocus
+                className="mt-2 bg-black border-primary-main"
+                type="text"
+                containerClassName="mr-2"
+                value={value.label}
+                onChange={event => {
+                  event.persist();
+                  setValue(value => ({ ...value, label: event.target.value }));
+                }}
+                onKeyPress={event => {
+                  if (event.key === 'Enter') {
+                    onSubmitHandler({ value, action: { id: 'save' } });
+                  }
+                }}
+              />
+            </div>
+          );
+        },
+      },
+    });
+  }
+}
+
+export default callInputDialog;

extensions/cornerstone/src/commandsModule.js

@@ -10,12 +10,13 @@ const scroll = cornerstoneTools.import('util/scroll');
 const { studyMetadataManager } = OHIF.utils;
 const { setViewportSpecificData } = OHIF.redux.actions;
 
-const commandsModule = ({ servicesManager }) => {
+const commandsModule = ({ servicesManager, commandsManager }) => {
   const { ViewportGridService } = servicesManager.services;
 
   function _getActiveViewportsEnabledElement() {
     const { activeViewportIndex } = ViewportGridService.getState();
-    return getEnabledElement(activeViewportIndex);
+    const { element } = getEnabledElement(activeViewportIndex) || {};
+    return element;
   }
 
   const actions = {
@@ -98,7 +99,38 @@ const commandsModule = ({ servicesManager }) => {
       if (!toolName) {
         console.warn('No toolname provided to setToolActive command');
       }
-      cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
+
+      // Find total number of tool indexes
+      const { viewports } = ViewportGridService.getState();
+      for (let i = 0; i < viewports.length; i++) {
+        const viewport = viewports[i];
+        const hasDisplaySet = viewport.displaySetInstanceUID !== undefined;
+
+        if (!hasDisplaySet) {
+          continue;
+        }
+
+        const viewportInfo = getEnabledElement(i);
+        const hasCornerstoneContext =
+          viewportInfo.context == 'ACTIVE_VIEWPORT::CORNERSTONE';
+
+        if (hasCornerstoneContext) {
+          cornerstoneTools.setToolActiveForElement(
+            viewportInfo.enabledElement,
+            toolName,
+            { mouseButtonMask: 1 }
+          );
+        } else {
+          commandsManager.runCommand(
+            'setToolActive',
+            {
+              element: viewportInfo.element,
+              toolName,
+            },
+            viewportInfo.context
+          );
+        }
+      }
     },
     clearAnnotations: () => {
       const element = _getActiveViewportsEnabledElement();
@@ -106,7 +138,7 @@ const commandsModule = ({ servicesManager }) => {
         return;
       }
 
-      const enabledElement = cornerstone.getEnabledElement(element);
+      const { enabledElement } = cornerstone.getEnabledElement(element) || {};
       if (!enabledElement || !enabledElement.image) {
         return;
       }

extensions/cornerstone/src/index.js

@@ -33,13 +33,19 @@ export default {
   preRegistration({ servicesManager, commandsManager, configuration = {} }) {
     init({ servicesManager, commandsManager, configuration });
   },
-  getViewportModule({ commandsManager }) {
+  getViewportModule({ servicesManager, commandsManager }) {
     const ExtendedOHIFCornerstoneViewport = props => {
       const onNewImageHandler = jumpData => {
         commandsManager.runCommand('jumpToImage', jumpData);
       };
+      const { ToolBarService } = servicesManager;
+
       return (
-        <OHIFCornerstoneViewport {...props} onNewImage={onNewImageHandler} />
+        <OHIFCornerstoneViewport
+          {...props}
+          ToolBarService={ToolBarService}
+          onNewImage={onNewImageHandler}
+        />
       );
     };
 
@@ -47,8 +53,8 @@ export default {
       { name: 'cornerstone', component: ExtendedOHIFCornerstoneViewport },
     ];
   },
-  getCommandsModule({ servicesManager }) {
+  getCommandsModule({ servicesManager, commandsManager }) {
-    return commandsModule({ servicesManager });
+    return commandsModule({ servicesManager, commandsManager });
   },
 };
 

extensions/cornerstone/src/init.js

@@ -1,19 +1,19 @@
-import React from 'react';
 import OHIF from '@ohif/core';
-import { Input, Dialog, ContextMenuMeasurements } from '@ohif/ui';
+import { ContextMenuMeasurements } from '@ohif/ui';
 import cs from 'cornerstone-core';
 import csTools from 'cornerstone-tools';
 import merge from 'lodash.merge';
+import getTools, { toolsGroupedByType } from './utils/getTools.js';
 import initCornerstoneTools from './initCornerstoneTools.js';
 import './initWADOImageLoader.js';
 import getCornerstoneMeasurementById from './utils/getCornerstoneMeasurementById';
 import measurementServiceMappingsFactory from './utils/measurementServiceMappings/measurementServiceMappingsFactory';
 import { setEnabledElement } from './state';
+import callInputDialog from './callInputDialog.js';
 
 // TODO -> Global "context menu open state", or lots of expensive searches on drag?
 
 let CONTEXT_MENU_OPEN = false;
-
 const { globalImageIdSpecificToolStateManager } = csTools;
 
 const TOOL_TYPES_WITH_CONTEXT_MENU = [
@@ -30,6 +30,24 @@ const TOOL_TYPES_WITH_CONTEXT_MENU = [
 const _refreshViewports = () =>
   cs.getEnabledElements().forEach(({ element }) => cs.updateImage(element));
 
+/* Add extension tools configuration here. */
+const _createInternalToolsConfig = UIDialogService => {
+  return {
+    ArrowAnnotate: {
+      configuration: {
+        getTextCallback: (callback, eventDetails) =>
+          callInputDialog(UIDialogService, null, callback),
+        changeTextCallback: (data, eventDetails, callback) =>
+          callInputDialog(UIDialogService, data, callback),
+        allowEmptyLabel: true,
+      },
+    },
+    DragProbe: {
+      defaultStrategy: 'minimal',
+    },
+  };
+};
+
 /**
  *
  * @param {Object} servicesManager
@@ -45,7 +63,11 @@ export default function init({
     UIDialogService,
     MeasurementService,
     DisplaySetService,
+    ToolBarService,
   } = servicesManager.services;
+  const tools = getTools();
+
+  console.log(servicesManager.services);
 
   /* Measurement Service */
   const measurementServiceSource = _connectToolsToMeasurementService(
@@ -112,6 +134,7 @@ export default function init({
           );
 
           callInputDialog(
+            UIDialogService,
             measurement,
             (label, actionId) => {
               if (actionId === 'cancel') {
@@ -180,8 +203,18 @@ export default function init({
     }
   };
 
-  function elementEnabledHandler(evt) {
+  // TODO: This is the handler for ALL ENABLED ELEMENT EVENTS
+  // ... Activation logic should take place per element, not for all (diff behavior per ext)
+  function elementEnabledHandler(tools, evt) {
     const element = evt.detail.element;
+
+    _addConfiguredToolsForElement(
+      UIDialogService,
+      element,
+      tools,
+      configuration
+    );
+
     element.addEventListener(csTools.EVENTS.TOUCH_PRESS, onTouchPress);
     element.addEventListener(
       csTools.EVENTS.MOUSE_CLICK,
@@ -200,85 +233,6 @@ export default function init({
     element.removeEventListener(cs.EVENTS.NEW_IMAGE, cancelContextMenuIfOpen);
   }
 
-  /**
-   *
-   * @param {*} data
-   * @param {*} event
-   * @param {*} callback
-   * @param {*} isArrowAnnotateInputDialog
-   */
-  const callInputDialog = (
-    data,
-    callback,
-    isArrowAnnotateInputDialog = true
-  ) => {
-    const dialogId = 'enter-annotation';
-    const label = data
-      ? isArrowAnnotateInputDialog
-        ? data.text
-        : data.label
-      : '';
-
-    const onSubmitHandler = ({ action, value }) => {
-      switch (action.id) {
-        case 'save':
-          callback(value.label, action.id);
-          break;
-        case 'cancel':
-          callback('', action.id);
-          break;
-      }
-      UIDialogService.dismiss({ id: dialogId });
-    };
-
-    if (UIDialogService) {
-      UIDialogService.create({
-        id: dialogId,
-        centralize: true,
-        isDraggable: false,
-        showOverlay: true,
-        content: Dialog,
-        contentProps: {
-          title: 'Enter your annotation',
-          value: { label },
-          noCloseButton: true,
-          onClose: () => UIDialogService.dismiss({ id: dialogId }),
-          actions: [
-            { id: 'cancel', text: 'Cancel', type: 'secondary' },
-            { id: 'save', text: 'Save', type: 'primary' },
-          ],
-          onSubmit: onSubmitHandler,
-          body: ({ value, setValue }) => {
-            const onChangeHandler = event => {
-              event.persist();
-              setValue(value => ({ ...value, label: event.target.value }));
-            };
-
-            const onKeyPressHandler = event => {
-              if (event.key === 'Enter') {
-                onSubmitHandler({ value, action: { id: 'save' } });
-              }
-            };
-
-            return (
-              <div className="p-4 bg-primary-dark">
-                <Input
-                  autoFocus
-                  className="mt-2 bg-black border-primary-main"
-                  type="text"
-                  containerClassName="mr-2"
-                  value={value.label}
-                  onChange={onChangeHandler}
-                  onKeyPress={onKeyPressHandler}
-                />
-              </div>
-            );
-          },
-        },
-      });
-    }
-  };
-
   const { csToolsConfig } = configuration;
   const metadataProvider = OHIF.cornerstone.metadataProvider;
 
@@ -286,7 +240,7 @@ export default function init({
 
   // ~~
   const defaultCsToolsConfig = csToolsConfig || {
-    globalToolSyncEnabled: true,
+    globalToolSyncEnabled: false, // hold on to your pants!
     showSVGCursors: false,
     autoResizeViewports: false,
   };
@@ -298,10 +252,10 @@ export default function init({
   // THIS
   // is a way for extensions that "depend" on this extension to notify it of
   // new cornerstone enabled elements so it's commands continue to work.
-  const handleOhifCornerstoneEnabledElementEvent = function (evt) {
+  const handleOhifCornerstoneEnabledElementEvent = function(evt) {
-    const { viewportIndex, enabledElement } = evt.detail;
+    const { context, viewportIndex, enabledElement } = evt.detail;
 
-    setEnabledElement(viewportIndex, enabledElement);
+    setEnabledElement(viewportIndex, enabledElement, context);
   };
 
   document.addEventListener(
@@ -309,120 +263,10 @@ export default function init({
     handleOhifCornerstoneEnabledElementEvent
   );
 
-  const toolsGroupedByType = {
+  cs.events.addEventListener(
-    touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
+    cs.EVENTS.ELEMENT_ENABLED,
-    annotations: [
+    elementEnabledHandler.bind(null, tools)
-      csTools.ArrowAnnotateTool,
-      csTools.BidirectionalTool,
-      csTools.LengthTool,
-      csTools.AngleTool,
-      csTools.FreehandRoiTool,
-      csTools.EllipticalRoiTool,
-      csTools.DragProbeTool,
-      csTools.RectangleRoiTool,
-    ],
-    other: [
-      csTools.PanTool,
-      csTools.ZoomTool,
-      csTools.WwwcTool,
-      csTools.WwwcRegionTool,
-      csTools.MagnifyTool,
-      csTools.StackScrollTool,
-      csTools.StackScrollMouseWheelTool,
-      csTools.OverlayTool,
-    ],
-  };
-
-  let tools = [];
-  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
-    tools.push(...toolsGroupedByType[toolsGroup])
   );
-
-  /* Add extension tools configuration here. */
-  const internalToolsConfig = {
-    ArrowAnnotate: {
-      configuration: {
-        getTextCallback: (callback, eventDetails) =>
-          callInputDialog(null, callback),
-        changeTextCallback: (data, eventDetails, callback) =>
-          callInputDialog(data, callback),
-        allowEmptyLabel: true,
-      },
-    },
-    DragProbe: {
-      defaultStrategy: 'minimal',
-    },
-  };
-
-  /* Abstract tools configuration using extension configuration. */
-  const parseToolProps = (props, tool) => {
-    const { annotations } = toolsGroupedByType;
-    // An alternative approach would be to remove the `drawHandlesOnHover` config
-    // from the supported configuration properties in `cornerstone-tools`
-    const toolsWithHideableHandles = annotations.filter(
-      tool => !['RectangleRoiTool', 'EllipticalRoiTool'].includes(tool.name)
-    );
-
-    let parsedProps = { ...props };
-
-    /**
-     * drawHandles - Never/Always show handles
-     * drawHandlesOnHover - Only show handles on handle hover (pointNearHandle)
-     * hideHandlesIfMoving - Hides the handles whilst you are moving them, for better visibility.
-     *
-     * Does not apply to tools where handles aren't placed in predictable
-     * locations.
-     */
-    if (
-      configuration.hideHandles !== false &&
-      toolsWithHideableHandles.includes(tool)
-    ) {
-      if (props.configuration) {
-        parsedProps.configuration.drawHandlesOnHover = true;
-        parsedProps.configuration.hideHandlesIfMoving = true;
-      } else {
-        parsedProps.configuration = {
-          drawHandlesOnHover: true,
-          hideHandlesIfMoving: true,
-        };
-      }
-    }
-
-    return parsedProps;
-  };
-
-  /* Add tools with its custom props through extension configuration. */
-  tools.forEach(tool => {
-    const toolName = new tool().name;
-    const externalToolsConfig = configuration.tools || {};
-    const externalToolProps = externalToolsConfig[toolName] || {};
-    const internalToolProps = internalToolsConfig[toolName] || {};
-    const props = merge(
-      internalToolProps,
-      parseToolProps(externalToolProps, tool)
-    );
-    csTools.addTool(tool, props);
-  });
-
-  // TODO -> We need a better way to do this with maybe global tool state setting all tools passive.
-  const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
-  tools.forEach(tool => {
-    if (tool.prototype instanceof BaseAnnotationTool) {
-      // BaseAnnotationTool would likely come from csTools lib exports
-      const toolName = new tool().name;
-      csTools.setToolPassive(toolName); // there may be a better place to determine name; may not be on uninstantiated class
-    }
-  });
-
-  csTools.setToolActive('Pan', { mouseButtonMask: 4 });
-  csTools.setToolActive('Zoom', { mouseButtonMask: 2 });
-  csTools.setToolActive('Wwwc', { mouseButtonMask: 1 });
-  csTools.setToolActive('StackScrollMouseWheel', {}); // TODO: Empty options should not be required
-  csTools.setToolActive('PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
-  csTools.setToolActive('ZoomTouchPinch', {});
-  csTools.setToolEnabled('Overlay', {});
-
-  cs.events.addEventListener(cs.EVENTS.ELEMENT_ENABLED, elementEnabledHandler);
   cs.events.addEventListener(
     cs.EVENTS.ELEMENT_DISABLED,
     elementDisabledHandler
@@ -646,3 +490,63 @@ const _getDefaultPosition = event => ({
   x: (event && event.currentPoints.client.x) || 0,
   y: (event && event.currentPoints.client.y) || 0,
 });
+
+/**
+ * @private
+ */
+function _addConfiguredToolsForElement(
+  UIDialogService,
+  element,
+  tools,
+  configuration
+) {
+  const internalToolsConfig = _createInternalToolsConfig(UIDialogService);
+  /* Add tools with its custom props through extension configuration. */
+  tools.forEach(tool => {
+    const toolName = new tool().name;
+    const externalToolsConfig = configuration.tools || {};
+    const externalToolProps = externalToolsConfig[toolName] || {};
+    const internalToolProps = internalToolsConfig[toolName] || {};
+    const props = merge(
+      internalToolProps,
+      _parseToolProps(configuration, externalToolProps, tool)
+    );
+    csTools.addToolForElement(element, tool, props);
+  });
+}
+/* Abstract tools configuration using extension configuration. */
+function _parseToolProps(configuration, props, tool) {
+  const { annotations } = toolsGroupedByType;
+  // An alternative approach would be to remove the `drawHandlesOnHover` config
+  // from the supported configuration properties in `cornerstone-tools`
+  const toolsWithHideableHandles = annotations.filter(
+    tool => !['RectangleRoiTool', 'EllipticalRoiTool'].includes(tool.name)
+  );
+
+  let parsedProps = { ...props };
+
+  /**
+   * drawHandles - Never/Always show handles
+   * drawHandlesOnHover - Only show handles on handle hover (pointNearHandle)
+   * hideHandlesIfMoving - Hides the handles whilst you are moving them, for better visibility.
+   *
+   * Does not apply to tools where handles aren't placed in predictable
+   * locations.
+   */
+  if (
+    configuration.hideHandles !== false &&
+    toolsWithHideableHandles.includes(tool)
+  ) {
+    if (props.configuration) {
+      parsedProps.configuration.drawHandlesOnHover = true;
+      parsedProps.configuration.hideHandlesIfMoving = true;
+    } else {
+      parsedProps.configuration = {
+        drawHandlesOnHover: true,
+        hideHandlesIfMoving: true,
+      };
+    }
+  }
+
+  return parsedProps;
+}

extensions/cornerstone/src/state.js

@@ -1,4 +1,6 @@
 const state = {
+  // The `defaultContext` of an extension's commandsModule
+  DEFAULT_CONTEXT: 'ACTIVE_VIEWPORT::CORNERSTONE',
   enabledElements: {},
 };
 
@@ -7,14 +9,22 @@ const state = {
  * @param {HTMLElement} dom Active viewport element.
  * @return void
  */
-const setEnabledElement = (viewportIndex, element) =>
+const setEnabledElement = (viewportIndex, element, context) => {
-  (state.enabledElements[viewportIndex] = element);
+  const targetContext = context || DEFAULT_CONTEXT;
+
+  state.enabledElements[viewportIndex] = {
+    element,
+    context: targetContext,
+  };
+};
 
 /**
- * Grabs the enabled element `dom` reference of an active viewport.
+ * Grabs the enabled element `dom` reference of an adective viewport.
  *
  * @return {HTMLElement} Active viewport element.
  */
-const getEnabledElement = viewportIndex => state.enabledElements[viewportIndex];
+const getEnabledElement = viewportIndex => {
+  return state.enabledElements[viewportIndex];
+};
 
 export { setEnabledElement, getEnabledElement };

extensions/cornerstone/src/utils/getTools.js

@@ -0,0 +1,36 @@
+import csTools from 'cornerstone-tools';
+
+const toolsGroupedByType = {
+  touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
+  annotations: [
+    csTools.ArrowAnnotateTool,
+    csTools.BidirectionalTool,
+    csTools.LengthTool,
+    csTools.AngleTool,
+    csTools.FreehandRoiTool,
+    csTools.EllipticalRoiTool,
+    csTools.DragProbeTool,
+    csTools.RectangleRoiTool,
+  ],
+  other: [
+    csTools.PanTool,
+    csTools.ZoomTool,
+    csTools.WwwcTool,
+    csTools.WwwcRegionTool,
+    csTools.MagnifyTool,
+    csTools.StackScrollTool,
+    csTools.StackScrollMouseWheelTool,
+    csTools.OverlayTool,
+  ],
+};
+
+export default function getTools() {
+  const tools = [];
+  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
+    tools.push(...toolsGroupedByType[toolsGroup])
+  );
+
+  return tools;
+}
+
+export { toolsGroupedByType };

extensions/cornerstone/src/utils/setActiveAndPassiveToolsForElement.js

@@ -0,0 +1,21 @@
+import csTools from 'cornerstone-tools';
+
+export default function _setActiveAndPassiveToolsForElement(element, tools) {
+  const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
+
+  tools.forEach(tool => {
+    if (tool.prototype instanceof BaseAnnotationTool) {
+      // BaseAnnotationTool would likely come from csTools lib exports
+      const toolName = new tool().name;
+      csTools.setToolPassiveForElement(element, toolName); // there may be a better place to determine name; may not be on uninstantiated class
+    }
+  });
+
+  csTools.setToolActiveForElement(element, 'Pan', { mouseButtonMask: 4 });
+  csTools.setToolActiveForElement(element, 'Zoom', { mouseButtonMask: 2 });
+  csTools.setToolActiveForElement(element, 'Wwwc', { mouseButtonMask: 1 });
+  csTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {}); // TODO: Empty options should not be required
+  csTools.setToolActiveForElement(element, 'PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
+  csTools.setToolActiveForElement(element, 'ZoomTouchPinch', {});
+  csTools.setToolEnabledForElement(element, 'Overlay', {});
+}

extensions/default/src/Toolbar/ToolbarLayoutSelector.jsx

@@ -29,8 +29,7 @@ function LayoutSelector() {
     };
   }, []);
 
-  const onClickHandler = () => setIsOpen(!isOpen);
+  const onInteractionHandler = () => setIsOpen(!isOpen);
-
   const DropdownContent = isOpen ? OHIFLayoutSelector : null;
 
   return (
@@ -38,7 +37,7 @@ function LayoutSelector() {
       id="Layout"
       label="Grid Layout"
       icon="tool-layout"
-      onClick={onClickHandler}
+      onInteraction={onInteractionHandler}
       dropdownContent={
         DropdownContent !== null && (
           <DropdownContent

extensions/default/src/Toolbar/ToolbarSplitButton.jsx

@@ -0,0 +1,3 @@
+import { SplitButton } from '@ohif/ui';
+
+export default SplitButton;

extensions/default/src/ViewerLayout/index.jsx

@@ -1,141 +1,69 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import { SidePanel, ErrorBoundary, UserPreferences, AboutModal, Header, useModal } from '@ohif/ui';
+import {
+  SidePanel,
+  ErrorBoundary,
+  UserPreferences,
+  AboutModal,
+  Header,
+  useModal,
+} from '@ohif/ui';
 
-import NestedMenu from './ToolbarButtonNestedMenu.jsx';
+function Toolbar({ servicesManager }) {
-
-// TODO: Having ToolbarPrimary and ToolbarSecondary is ugly, but
-// these are going to be unified shortly so this is good enough for now.
-function ToolbarPrimary({ servicesManager }) {
   const { ToolBarService } = servicesManager.services;
-  const defaultTool = {
+  const [toolbarButtons, setToolbarButtons] = useState([]);
-    icon: 'tool-more-menu',
+  const [buttonState, setButtonState] = useState({
-    label: 'More',
+    primaryToolId: '',
-    isActive: false,
+    toggles: {},
-  };
+    groups: {},
-  const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
+  });
-  const [activeTool, setActiveTool] = useState(defaultTool);
-
-  const setActiveToolHandler = (tool, isNested) => {
-    setActiveTool(isNested ? tool : defaultTool);
-  };
-
-  const onPrimaryClickHandler = (evt, btn) => {
-    if (
-      btn.props &&
-      btn.props.commands &&
-      evt.value &&
-      btn.props.commands[evt.value]
-    ) {
-      const { commandName, commandOptions } = btn.props.commands[evt.value];
-      commandsManager.runCommand(commandName, commandOptions);
-    }
-  };
 
+  // Could track buttons and state separately...?
   useEffect(() => {
-    const { unsubscribe } = ToolBarService.subscribe(
+    const { unsubscribe: unsub1 } = ToolBarService.subscribe(
       ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => {
+      () => setToolbarButtons(ToolBarService.getButtonSection('primary'))
-        console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
+    );
-        const updatedToolbars = {
+    const { unsubscribe: unsub2 } = ToolBarService.subscribe(
-          primary: ToolBarService.getButtonSection('primary', {
+      ToolBarService.EVENTS.TOOL_BAR_STATE_MODIFIED,
-            onClick: onPrimaryClickHandler,
+      () => setButtonState({ ...ToolBarService.state })
-            setActiveTool: setActiveToolHandler,
-          }),
-          secondary: ToolBarService.getButtonSection('secondary', {
-            setActiveTool: setActiveToolHandler,
-          }),
-        };
-        setToolbars(updatedToolbars);
-      }
     );
 
-    return unsubscribe;
+    return () => {
+      unsub1();
+      unsub2();
+    };
   }, [ToolBarService]);
 
-  return <>
+  return (
-    {toolbars.primary.map((toolDef, index) => {
+    <>
-      const isNested = Array.isArray(toolDef);
+      {toolbarButtons.map((toolDef, index) => {
-      if (!isNested) {
         const { id, Component, componentProps } = toolDef;
-        return <Component key={id} id={id} {...componentProps} />;
+        // TODO: ...
-      } else {
+
+        // isActive if:
+        // - id is primary?
+        // - id is in list of "toggled on"?
+
+        // Also need... to filter list for splitButton, and set primary based on most recently clicked
+        // Also need to kill the radioGroup button's magic logic
+        // Everything should be reactive off these props, so commands can inform ToolbarService
+
+        // These can... Trigger toolbar events based on updates?
+        // Then sync using useEffect, or simply modify the state here?
         return (
-          <NestedMenu
+          <Component
-            key={index}
+            key={id}
-            isActive={activeTool.isActive}
+            id={id}
-            icon={activeTool.icon}
+            {...componentProps}
-            label={activeTool.label}
+            bState={buttonState}
-          >
+            onInteraction={args => ToolBarService.recordInteraction(args)}
-            <div className="flex">
+          />
-              {toolDef.map(x => {
-                const { id, Component, componentProps } = x;
-                return (
-                  <Component key={id} id={id} {...componentProps} />
-                );
-              })}
-            </div>
-          </NestedMenu>
         );
-      }
+      })}
-    })}
+    </>
-  </>
+  );
-}
-
-function ToolbarSecondary({ servicesManager }) {
-  const { ToolBarService } = servicesManager.services;
-  const defaultTool = {
-    icon: 'tool-more-menu',
-    label: 'More',
-    isActive: false,
-  };
-  const [toolbars, setToolbars] = useState({ primary: [], secondary: [] });
-  const [nestedActiveTool, setNestedActiveTool] = useState(defaultTool);
-
-  const setActiveToolHandler = (tool, isNested) => {
-    setNestedActiveTool(isNested ? tool : defaultTool);
-  };
-
-  const onPrimaryClickHandler = (evt, btn) => {
-    if (
-      btn.props &&
-      btn.props.commands &&
-      evt.item && evt.item.value &&
-      btn.props.commands[evt.item.value]
-    ) {
-      const { commandName, commandOptions } = btn.props.commands[evt.item.value];
-      commandsManager.runCommand(commandName, commandOptions);
-    }
-  };
-
-  useEffect(() => {
-    const { unsubscribe } = ToolBarService.subscribe(
-      ToolBarService.EVENTS.TOOL_BAR_MODIFIED,
-      () => {
-        console.warn('~~~ TOOL BAR MODIFIED EVENT CAUGHT');
-        const updatedToolbars = {
-          primary: ToolBarService.getButtonSection('primary', {
-            onClick: onPrimaryClickHandler,
-            setActiveTool: setActiveToolHandler,
-          }),
-          secondary: ToolBarService.getButtonSection('secondary', {
-            setActiveTool: setActiveToolHandler,
-          }),
-        };
-        setToolbars(updatedToolbars);
-      }
-    );
-
-    return unsubscribe;
-  }, [ToolBarService]);
-
-  return <>
-    {toolbars.secondary.map(toolDef => {
-      const { id, Component, componentProps } = toolDef;
-      return <Component key={id} id={id} {...componentProps} />;
-    })}
-  </>
 }
 
 function ViewerLayout({
@@ -158,25 +86,28 @@ function ViewerLayout({
     {
       title: t('Header:About'),
       icon: 'info',
-      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
+      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' }),
     },
     {
       title: t('Header:Preferences'),
       icon: 'settings',
-      onClick: () => show({
+      onClick: () =>
-        title: t('UserPreferencesModal:User Preferences'),
+        show({
-        content: UserPreferences,
+          title: t('UserPreferencesModal:User Preferences'),
-        contentProps: {
+          content: UserPreferences,
-          hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
+          contentProps: {
-          hotkeyDefinitions,
+            hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(
-          onCancel: hide,
+              hotkeyDefaults
-          onSubmit: ({ hotkeyDefinitions }) => {
+            ),
-            hotkeysManager.setHotkeys(hotkeyDefinitions);
+            hotkeyDefinitions,
-            hide();
+            onCancel: hide,
+            onSubmit: ({ hotkeyDefinitions }) => {
+              hotkeysManager.setHotkeys(hotkeyDefinitions);
+              hide();
+            },
+            onReset: () => hotkeysManager.restoreDefaultBindings(),
           },
-          onReset: () => hotkeysManager.restoreDefaultBindings()
+        }),
-        }
-      })
     },
   ];
 
@@ -226,7 +157,7 @@ function ViewerLayout({
       <Header menuOptions={menuOptions}>
         <ErrorBoundary context="Primary Toolbar">
           <div className="relative flex justify-center">
-            <ToolbarPrimary servicesManager={servicesManager} />
+            <Toolbar servicesManager={servicesManager} />
           </div>
         </ErrorBoundary>
       </Header>
@@ -246,13 +177,6 @@ function ViewerLayout({
         )}
         {/* TOOLBAR + GRID */}
         <div className="flex flex-col flex-1 h-full">
-          <div className="flex h-12 border-b border-transparent flex-2 w-100">
-            <ErrorBoundary context="Secondary Toolbar">
-              <div className="flex items-center w-full px-3 bg-primary-dark">
-                <ToolbarSecondary servicesManager={servicesManager} />
-              </div>
-            </ErrorBoundary>
-          </div>
           <div className="flex items-center justify-center flex-1 h-full pt-1 pb-2 overflow-hidden bg-black">
             <ErrorBoundary context="Grid">
               <ViewportGridComp

extensions/default/src/getToolbarModule.js

@@ -1,6 +1,7 @@
 import { ToolbarButton } from '@ohif/ui';
 import ToolbarDivider from './Toolbar/ToolbarDivider.jsx';
 import ToolbarLayoutSelector from './Toolbar/ToolbarLayoutSelector.jsx';
+import ToolbarSplitButton from './Toolbar/ToolbarSplitButton.jsx';
 
 export default function getToolbarModule({ commandsManager, servicesManager }) {
   const toolbarService = servicesManager.services.ToolBarService;
@@ -9,65 +10,27 @@ export default function getToolbarModule({ commandsManager, servicesManager }) {
     {
       name: 'ohif.divider',
       defaultComponent: ToolbarDivider,
-      clickHandler: () => { },
+      clickHandler: () => {},
     },
     {
       name: 'ohif.action',
       defaultComponent: ToolbarButton,
-      requiredConfig: [],
+      clickHandler: () => {},
-      optionalConfig: [],
-      requiredProps: [],
-      optionalProps: [],
-      clickHandler: (evt, btn, btnSectionName) => {
-        const { props } = btn;
-        commandsManager.runCommand(props.commandName, props.commandOptions);
-      },
     },
     {
       name: 'ohif.radioGroup',
       defaultComponent: ToolbarButton,
-      requiredConfig: ['groupName'],
+      clickHandler: () => {},
-      optionalConfig: [],
+    },
-      requiredProps: [],
+    {
-      optionalProps: [],
+      name: 'ohif.splitButton',
-      clickHandler: (evt, clickedBtn, btnSectionName, metadata, viewerProps) => {
+      defaultComponent: ToolbarSplitButton,
-        const { props } = clickedBtn;
+      clickHandler: () => {},
-        const allButtons = toolbarService.getButtons();
-
-        // Set all buttons in same group to inactive
-        Object.keys(allButtons).forEach(btnName => {
-          const btn = allButtons[btnName];
-          const isRadioGroupBtn =
-            btn.config &&
-            btn.config.groupName &&
-            btn.type === 'ohif.radioGroup';
-
-          if (
-            isRadioGroupBtn &&
-            clickedBtn.config.groupName === btn.config.groupName
-          ) {
-            btn.props.isActive = false;
-
-            if (viewerProps.setActiveTool) {
-              viewerProps.setActiveTool(props, metadata.isNested);
-            }
-          }
-        });
-
-        // Set our clicked button to active
-        allButtons[clickedBtn.id].props.isActive = true;
-
-        // Run button logic/command
-        commandsManager.runCommand(props.commandName, props.commandOptions);
-
-        // Set buttons & trigger notification
-        toolbarService.setButtons(allButtons);
-      },
     },
     {
       name: 'ohif.layoutSelector',
       defaultComponent: ToolbarLayoutSelector,
-      clickHandler: (evt, clickedBtn, btnSectionName) => { },
+      clickHandler: (evt, clickedBtn, btnSectionName) => {},
     },
     {
       name: 'ohif.toggle',

extensions/dicom-sr/src/OHIFCornerstoneSRViewport.js

@@ -4,6 +4,7 @@ import cornerstoneTools from 'cornerstone-tools';
 import cornerstone from 'cornerstone-core';
 import CornerstoneViewport from 'react-cornerstone-viewport';
 import OHIF, { DicomMetadataStore, utils } from '@ohif/core';
+import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import {
   Notification,
   ViewportActionBar,
@@ -32,7 +33,11 @@ function OHIFCornerstoneSRViewport({
   servicesManager,
   extensionManager,
 }) {
-  const { DisplaySetService, MeasurementService } = servicesManager.services;
+  const {
+    DisplaySetService,
+    MeasurementService,
+    ToolBarService,
+  } = servicesManager.services;
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [measurementSelected, setMeasurementSelected] = useState(0);
@@ -45,15 +50,19 @@ function OHIFCornerstoneSRViewport({
 
   useEffect(() => {
     const onDisplaySetsRemovedSubscription = DisplaySetService.subscribe(
-      DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED, ({ displaySetInstanceUIDs }) => {
+      DisplaySetService.EVENTS.DISPLAY_SETS_REMOVED,
+      ({ displaySetInstanceUIDs }) => {
         const activeViewport = viewports[activeViewportIndex];
-        if (displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)) {
+        if (
+          displaySetInstanceUIDs.includes(activeViewport.displaySetInstanceUID)
+        ) {
           viewportGridService.setDisplaysetForViewport({
             viewportIndex: activeViewportIndex,
             displaySetInstanceUID: undefined,
           });
         }
-      });
+      }
+    );
 
     return () => {
       onDisplaySetsRemovedSubscription.unsubscribe();
@@ -64,6 +73,8 @@ function OHIFCornerstoneSRViewport({
   let trackedMeasurements;
   let sendTrackedMeasurementsEvent;
 
+  // TODO: this is a hook that fails if we register/de-register
+  //
   if (
     extensionManager.registeredExtensionIds.includes(
       MEASUREMENT_TRACKING_EXTENSION_ID
@@ -81,25 +92,89 @@ function OHIFCornerstoneSRViewport({
     ] = useTrackedMeasurements();
   }
 
+  // Locked if tracking any series
+  let isLocked = trackedMeasurements?.context?.trackedSeries?.length > 0;
+  useEffect(() => {
+    isLocked = trackedMeasurements?.context?.trackedSeries?.length > 0;
+  }, [trackedMeasurements]);
+
+  function _getToolAlias() {
+    const primaryToolId = ToolBarService.state.primaryToolId;
+    let toolAlias = primaryToolId;
+
+    switch (primaryToolId) {
+      case 'Length':
+        toolAlias = 'SRLength';
+        break;
+      case 'Bidirectional':
+        toolAlias = 'SRBidirectional';
+        break;
+      case 'ArrowAnnotate':
+        toolAlias = 'SRArrowAnnotate';
+        break;
+      case 'EllipticalRoi':
+        toolAlias = 'SREllipticalRoi';
+        break;
+    }
+
+    return toolAlias;
+  }
+
   const onElementEnabled = evt => {
     const eventData = evt.detail;
     const targetElement = eventData.element;
+    const toolAlias = _getToolAlias(); // These are 1:1 for built-in only
 
-    // TODO -> This will only be temporary until we set a tool on, and isn't very customizable.
+    // ~~ MAGIC
-    // Need to discuss how to deal with tools in general in the redesign, since we
+    cornerstoneTools.addToolForElement(targetElement, DICOMSRDisplayTool);
-    // Previously just had Tool mode state global across the entire viewer.
-    const globalTools = cornerstoneTools.store.state.globalTools;
-    const globalToolNames = Object.keys(globalTools);
-
-    globalToolNames.forEach(globalToolName => {
-      cornerstoneTools.setToolDisabledForElement(targetElement, globalToolName);
-    });
-
     cornerstoneTools.setToolEnabledForElement(
       targetElement,
       TOOL_NAMES.DICOM_SR_DISPLAY_TOOL
     );
 
+    // ~~ Variants
+    cornerstoneTools.addToolForElement(
+      targetElement,
+      cornerstoneTools.LengthTool,
+      {
+        name: 'SRLength',
+        configuration: {
+          renderDashed: true,
+        },
+      }
+    );
+    cornerstoneTools.addToolForElement(
+      targetElement,
+      cornerstoneTools.ArrowAnnotateTool,
+      {
+        name: 'SRArrowAnnotate',
+        configuration: {
+          renderDashed: true,
+        },
+      }
+    );
+    cornerstoneTools.addToolForElement(
+      targetElement,
+      cornerstoneTools.BidirectionalTool,
+      {
+        name: 'SRBidirectional',
+        configuration: {
+          renderDashed: true,
+        },
+      }
+    );
+    cornerstoneTools.addToolForElement(
+      targetElement,
+      cornerstoneTools.EllipticalRoiTool,
+      {
+        name: 'SREllipticalRoi',
+        configuration: {
+          renderDashed: true,
+        },
+      }
+    );
+
+    // ~~ Business as usual
     cornerstoneTools.setToolActiveForElement(targetElement, 'PanMultiTouch', {
       pointers: 2,
     });
@@ -109,7 +184,9 @@ function OHIFCornerstoneSRViewport({
       {}
     );
 
-    cornerstoneTools.setToolActiveForElement(targetElement, 'Wwwc', {
+    // TODO: Add always dashed tool alternative aliases
+    // TODO: or same name... alternative config?
+    cornerstoneTools.setToolActiveForElement(targetElement, toolAlias, {
       mouseButtonMask: 1,
     });
     cornerstoneTools.setToolActiveForElement(targetElement, 'Pan', {
@@ -131,6 +208,7 @@ function OHIFCornerstoneSRViewport({
       'ohif-cornerstone-enabled-element-event',
       {
         detail: {
+          context: 'ACTIVE_VIEWPORT::STRUCTURED_REPORT',
           enabledElement: targetElement,
           viewportIndex,
         },
@@ -262,7 +340,7 @@ function OHIFCornerstoneSRViewport({
     StudyDate,
     SeriesDescription,
     SeriesInstanceUID,
-    PixelSpacing,
+    SpacingBetweenSlices,
     SeriesNumber,
     displaySetInstanceUID,
   } = activeDisplaySetData;
@@ -298,11 +376,19 @@ function OHIFCornerstoneSRViewport({
           evt.stopPropagation();
           evt.preventDefault();
         }}
+        onPillClick={() => {
+          sendTrackedMeasurementsEvent('PROMPT_HYDRATE_SR', {
+            displaySetInstanceUID: displaySet.displaySetInstanceUID,
+            viewportIndex,
+          });
+        }}
         onSeriesChange={onMeasurementChange}
         studyData={{
           label,
+          useAltStyling: true,
           isTracked: false,
-          isLocked: displaySet.isLocked,
+          isLocked,
+          isRehydratable: displaySet.isRehydratable,
           isHydrated,
           studyDate: formatDate(StudyDate),
           currentSeries: SeriesNumber,
@@ -317,10 +403,8 @@ function OHIFCornerstoneSRViewport({
             MRN: PatientID || '',
             thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
             spacing:
-              PixelSpacing && PixelSpacing.length
+              SpacingBetweenSlices !== undefined
-                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
-                    2
-                  )}mm`
                 : '',
             scanner: ManufacturerModelName || '',
           },
@@ -458,7 +542,7 @@ async function _getViewportAndActiveDisplaySetData(
     SeriesInstanceUID: image0.SeriesInstanceUID,
     SeriesNumber: image0.SeriesNumber,
     ManufacturerModelName: image0.ManufacturerModelName,
-    PixelSpacing: image0.PixelSpacing,
+    SpacingBetweenSlices: image0.SpacingBetweenSlices,
     displaySetInstanceUID,
   };
 

extensions/dicom-sr/src/getSopClassHandlerModule.js

@@ -122,7 +122,9 @@ function _load(displaySet, servicesManager, extensionManager) {
   );
 
   displaySet.isHydrated = false;
-  displaySet.isLocked = isRehydratable(displaySet, mappings) ? false : true;
+  displaySet.isRehydratable = isRehydratable(displaySet, mappings)
+    ? true
+    : false;
   displaySet.isLoaded = true;
 
   // Check currently added displaySets and add measurements if the sources exist.

extensions/dicom-sr/src/index.js

@@ -60,6 +60,52 @@ export default {
 
     return [{ name: 'dicom-sr', component: ExtendedOHIFCornerstoneSRViewport }];
   },
+  getCommandsModule({ servicesManager }) {
+    return {
+      definitions: {
+        setToolActive: {
+          commandFn: ({ toolName, element }) => {
+            if (!toolName) {
+              console.warn('No toolname provided to setToolActive command');
+            }
+
+            console.warn('DICOM SR VIEWPORT SETTOOLACTIVE');
+
+            // Set same tool or alt tool
+            const toolAlias = _getToolAlias(toolName);
+
+            cornerstoneTools.setToolActiveForElement(element, toolAlias, {
+              mouseButtonMask: 1,
+            });
+          },
+          storeContexts: [],
+          options: {},
+        },
+      },
+      defaultContext: 'ACTIVE_VIEWPORT::STRUCTURED_REPORT',
+    };
+  },
   getSopClassHandlerModule,
   onModeEnter,
 };
+
+function _getToolAlias(toolName) {
+  let toolAlias = toolName;
+
+  switch (toolName) {
+    case 'Length':
+      toolAlias = 'SRLength';
+      break;
+    case 'Bidirectional':
+      toolAlias = 'SRBidirectional';
+      break;
+    case 'ArrowAnnotate':
+      toolAlias = 'SRArrowAnnotate';
+      break;
+    case 'EllipticalRoi':
+      toolAlias = 'SREllipticalRoi';
+      break;
+  }
+
+  return toolAlias;
+}

extensions/dicom-sr/src/init.js

@@ -1,5 +1,4 @@
 import cornerstoneTools from 'cornerstone-tools';
-import DICOMSRDisplayTool from './tools/DICOMSRDisplayTool';
 import dicomSRModule from './tools/modules/dicomSRModule';
 import id from './id';
 
@@ -20,6 +19,4 @@ export default function init({ configuration = {} }) {
   TOOL_NAMES.DICOM_SR_DISPLAY_TOOL = conifg.TOOL_NAMES.DICOM_SR_DISPLAY_TOOL;
 
   cornerstoneTools.register('module', id, dicomSRModule);
-  cornerstoneTools.addTool(DICOMSRDisplayTool);
-  cornerstoneTools.setToolEnabled(TOOL_NAMES.DICOM_SR_DISPLAY_TOOL);
 }

extensions/measurement-tracking/src/_shared/getTools.js

@@ -0,0 +1,36 @@
+import csTools from 'cornerstone-tools';
+
+const toolsGroupedByType = {
+  touch: [csTools.PanMultiTouchTool, csTools.ZoomTouchPinchTool],
+  annotations: [
+    csTools.ArrowAnnotateTool,
+    csTools.BidirectionalTool,
+    csTools.LengthTool,
+    csTools.AngleTool,
+    csTools.FreehandRoiTool,
+    csTools.EllipticalRoiTool,
+    csTools.DragProbeTool,
+    csTools.RectangleRoiTool,
+  ],
+  other: [
+    csTools.PanTool,
+    csTools.ZoomTool,
+    csTools.WwwcTool,
+    csTools.WwwcRegionTool,
+    csTools.MagnifyTool,
+    csTools.StackScrollTool,
+    csTools.StackScrollMouseWheelTool,
+    csTools.OverlayTool,
+  ],
+};
+
+export default function getTools() {
+  const tools = [];
+  Object.keys(toolsGroupedByType).forEach(toolsGroup =>
+    tools.push(...toolsGroupedByType[toolsGroup])
+  );
+
+  return tools;
+}
+
+export { toolsGroupedByType };

extensions/measurement-tracking/src/_shared/setActiveAndPassiveToolsForElement.js

@@ -0,0 +1,21 @@
+import csTools from 'cornerstone-tools';
+
+export default function _setActiveAndPassiveToolsForElement(element, tools) {
+  const BaseAnnotationTool = csTools.importInternal('base/BaseAnnotationTool');
+
+  tools.forEach(tool => {
+    if (tool.prototype instanceof BaseAnnotationTool) {
+      // BaseAnnotationTool would likely come from csTools lib exports
+      const toolName = new tool().name;
+      csTools.setToolPassiveForElement(element, toolName); // there may be a better place to determine name; may not be on uninstantiated class
+    }
+  });
+
+  csTools.setToolActiveForElement(element, 'Pan', { mouseButtonMask: 4 });
+  csTools.setToolActiveForElement(element, 'Zoom', { mouseButtonMask: 2 });
+  csTools.setToolActiveForElement(element, 'Wwwc', { mouseButtonMask: 1 });
+  csTools.setToolActiveForElement(element, 'StackScrollMouseWheel', {}); // TODO: Empty options should not be required
+  csTools.setToolActiveForElement(element, 'PanMultiTouch', { pointers: 2 }); // TODO: Better error if no options
+  csTools.setToolActiveForElement(element, 'ZoomTouchPinch', {});
+  csTools.setToolEnabledForElement(element, 'Overlay', {});
+}

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/TrackedMeasurementsContext.jsx

@@ -141,7 +141,7 @@ function TrackedMeasurementsContextProvider(
       if (
         displaySet.SOPClassHandlerId ===
           'org.ohif.dicom-sr.sopClassHandlerModule.dicom-sr' &&
-        !displaySet.isLocked
+        displaySet.isRehydratable === true
       ) {
         console.log('sending event...', trackedMeasurements);
         sendTrackedMeasurementsEvent('PROMPT_HYDRATE_SR', {

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/measurementTrackingMachine.js

@@ -21,6 +21,8 @@ const machineConfiguration = {
     prevTrackedStudy: '',
     prevTrackedSeries: [],
     prevIgnoredSeries: [],
+    //
+    isDirty: false,
   },
   states: {
     off: {
@@ -33,7 +35,7 @@ const machineConfiguration = {
         SET_TRACKED_SERIES: [
           {
             target: 'tracking',
-            actions: ['setTrackedStudyAndMultipleSeries'],
+            actions: ['setTrackedStudyAndMultipleSeries', 'setIsDirtyToClean'],
           },
         ],
         PROMPT_HYDRATE_SR: 'promptHydrateStructuredReport',
@@ -90,6 +92,16 @@ const machineConfiguration = {
           },
         ],
         SAVE_REPORT: 'promptSaveReport',
+        SET_DIRTY: [
+          {
+            target: 'tracking',
+            actions: ['setIsDirty'],
+            cond: 'shouldSetDirty',
+          },
+          {
+            target: 'tracking',
+          },
+        ],
       },
     },
     promptTrackNewSeries: {
@@ -98,7 +110,7 @@ const machineConfiguration = {
         onDone: [
           {
             target: 'tracking',
-            actions: ['addTrackedSeries'],
+            actions: ['addTrackedSeries', 'setIsDirty'],
             cond: 'shouldAddSeries',
           },
           {
@@ -106,6 +118,7 @@ const machineConfiguration = {
             actions: [
               'discardPreviouslyTrackedMeasurements',
               'setTrackedStudyAndSeries',
+              'setIsDirty',
             ],
             cond: 'shouldSetStudyAndSeries',
           },
@@ -131,6 +144,7 @@ const machineConfiguration = {
             actions: [
               'discardPreviouslyTrackedMeasurements',
               'setTrackedStudyAndSeries',
+              'setIsDirty',
             ],
             cond: 'shouldSetStudyAndSeries',
           },
@@ -197,6 +211,7 @@ const machineConfiguration = {
             actions: [
               'setTrackedStudyAndMultipleSeries',
               'showSeriesInActiveViewport',
+              'setIsDirtyToClean',
             ],
             cond: 'shouldHydrateStructuredReport',
           },
@@ -274,6 +289,15 @@ const defaultOptions = {
         ignoredSeries: [],
       };
     }),
+    setIsDirtyToClean: assign((ctx, evt) => ({
+      isDirty: false,
+    })),
+    setIsDirty: assign((ctx, evt) => {
+      debugger;
+      return {
+        isDirty: true,
+      };
+    }),
     ignoreSeries: assign((ctx, evt) => ({
       prevIgnoredSeries: [...ctx.ignoredSeries],
       ignoredSeries: [...ctx.ignoredSeries, evt.data.SeriesInstanceUID],
@@ -292,6 +316,13 @@ const defaultOptions = {
     })),
   },
   guards: {
+    shouldSetDirty: (ctx, evt) => {
+      debugger;
+      return (
+        evt.SeriesInstanceUID === undefined ||
+        ctx.trackedSeries.includes(evt.SeriesInstanceUID)
+      );
+    },
     shouldKillMachine: (ctx, evt) =>
       evt.data && evt.data.userResponse === RESPONSE.NO_NEVER,
     shouldAddSeries: (ctx, evt) =>

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewSeries.js

@@ -17,11 +17,13 @@ function promptUser({ servicesManager, extensionManager }, ctx, evt) {
       viewportIndex
     );
 
-    if (promptResult === RESPONSE.CREATE_REPORT) {
+    if (ctx.isDirty && promptResult === RESPONSE.CREATE_REPORT) {
       promptResult = await _askSaveDiscardOrCancel(
         UIViewportDialogService,
         viewportIndex
       );
+    } else {
+      promptResult = RESPONSE.SET_STUDY_AND_SERIES;
     }
 
     resolve({

extensions/measurement-tracking/src/contexts/TrackedMeasurementsContext/promptTrackNewStudy.js

@@ -17,11 +17,13 @@ function promptUser({ servicesManager, extensionManager }, ctx, evt) {
       viewportIndex
     );
 
-    if (promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
+    if (ctx.isDirty && promptResult === RESPONSE.SET_STUDY_AND_SERIES) {
       promptResult = await _askSaveDiscardOrCancel(
         UIViewportDialogService,
         viewportIndex
       );
+    } else {
+      promptResult = RESPONSE.SET_STUDY_AND_SERIES;
     }
 
     resolve({

extensions/measurement-tracking/src/index.js

@@ -10,4 +10,25 @@ export default {
   getContextModule,
   getPanelModule,
   getViewportModule,
+  getCommandsModule({ servicesManager }) {
+    return {
+      definitions: {
+        setToolActive: {
+          commandFn: ({ toolName, element }) => {
+            if (!toolName) {
+              console.warn('No toolname provided to setToolActive command');
+            }
+
+            // Set same tool or alt tool
+            cornerstoneTools.setToolActiveForElement(element, toolName, {
+              mouseButtonMask: 1,
+            });
+          },
+          storeContexts: [],
+          options: {},
+        },
+      },
+      defaultContext: 'ACTIVE_VIEWPORT::TRACKED',
+    };
+  },
 };

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

@@ -361,8 +361,11 @@ function _getOneBasedImageIdIndex(displaySets, SOPInstanceUID) {
 
 /**
  *
- * @param {*} points
+ * @param {*} measurement
  * @param {*} pixelSpacing
+ * @param {*} seriesNumber
+ * @param {*} instanceNumber
+ * @param {*} types
  */
 function _getDisplayText(
   measurement,

extensions/measurement-tracking/src/panels/PanelStudyBrowserTracking/PanelStudyBrowserTracking.jsx

@@ -1,7 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { utils } from '@ohif/core';
-import { StudyBrowser, useImageViewer, useViewportGrid, Dialog } from '@ohif/ui';
+import {
+  StudyBrowser,
+  useImageViewer,
+  useViewportGrid,
+  Dialog,
+} from '@ohif/ui';
 import { useTrackedMeasurements } from '../../getContextModule';
 
 const { formatDate } = utils;
@@ -63,6 +68,7 @@ function PanelStudyBrowserTracking({
           referenceStudyUID: StudyInstanceUID,
         } = measurement;
 
+        sendTrackedMeasurementsEvent('SET_DIRTY', { SeriesInstanceUID });
         sendTrackedMeasurementsEvent('TRACK_SERIES', {
           viewportIndex: activeViewportIndex,
           StudyInstanceUID,
@@ -238,10 +244,10 @@ function PanelStudyBrowserTracking({
     );
     const updatedExpandedStudyInstanceUIDs = shouldCollapseStudy
       ? [
-        ...expandedStudyInstanceUIDs.filter(
+          ...expandedStudyInstanceUIDs.filter(
-          stdyUid => stdyUid !== StudyInstanceUID
+            stdyUid => stdyUid !== StudyInstanceUID
-        ),
+          ),
-      ]
+        ]
       : [...expandedStudyInstanceUIDs, StudyInstanceUID];
 
     setExpandedStudyInstanceUIDs(updatedExpandedStudyInstanceUIDs);
@@ -315,7 +321,7 @@ function PanelStudyBrowserTracking({
           SeriesInstanceUID: displaySet.SeriesInstanceUID,
         });
       }}
-      onClickThumbnail={() => { }}
+      onClickThumbnail={() => {}}
       onDoubleClickThumbnail={onDoubleClickThumbnailHandler}
       activeDisplaySetInstanceUID={activeDisplaySetInstanceUID}
     />
@@ -385,11 +391,11 @@ function _mapDisplaySets(
     const viewportIdentificator = isSingleViewport
       ? []
       : viewports.reduce((acc, viewportData, index) => {
-        if (viewportData.displaySetInstanceUID === ds.displaySetInstanceUID) {
+          if (viewportData.displaySetInstanceUID === ds.displaySetInstanceUID) {
-          acc.push(_viewportLabels[index]);
+            acc.push(_viewportLabels[index]);
-        }
+          }
-        return acc;
+          return acc;
-      }, []);
+        }, []);
 
     const array =
       componentType === 'thumbnailTracked'
@@ -430,7 +436,7 @@ function _mapDisplaySets(
             contentProps: {
               title: 'Reject Report',
               body: () => (
-                <div className="p-4 bg-primary-dark text-white">
+                <div className="p-4 text-white bg-primary-dark">
                   <p>This is a destructive action.</p>
                   <p>Are you sure you want to continue?</p>
                 </div>
@@ -444,7 +450,10 @@ function _mapDisplaySets(
                 switch (action.id) {
                   case 'save':
                     try {
-                      await dataSource.reject.series(ds.StudyInstanceUID, ds.SeriesInstanceUID);
+                      await dataSource.reject.series(
+                        ds.StudyInstanceUID,
+                        ds.SeriesInstanceUID
+                      );
                       DisplaySetService.deleteDisplaySet(displaySetInstanceUID);
                       UIDialogService.dismiss({ id: 'ds-reject-sr' });
                       UINotificationService.show({
@@ -525,9 +534,11 @@ function _createStudyBrowserTabs(
     const displaySetsForStudy = displaySets.filter(
       ds => ds.StudyInstanceUID === study.studyInstanceUid
     );
-    
+
-   // Sort them
+    // Sort them
-   const sortedDisplaySetsForStudy = utils.sortBySeriesDate(displaySetsForStudy);
+    const sortedDisplaySetsForStudy = utils.sortBySeriesDate(
+      displaySetsForStudy
+    );
 
     /* Sort by series number, then by series date
       displaySetsForStudy.sort((a, b) => {
@@ -541,7 +552,7 @@ function _createStudyBrowserTabs(
         return seriesDateA - seriesDateB;
       });
     */
-    
+
     // Map the study to it's tab/view representation
     const tabStudy = Object.assign({}, study, {
       displaySets: displaySetsForStudy,

extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.js

@@ -16,6 +16,8 @@ import { useTrackedMeasurements } from './../getContextModule';
 import ViewportOverlay from './ViewportOverlay';
 import ViewportLoadingIndicator from './ViewportLoadingIndicator';
 import setCornerstoneMeasurementActive from '../_shared/setCornerstoneMeasurementActive';
+import setActiveAndPassiveToolsForElement from '../_shared/setActiveAndPassiveToolsForElement';
+import getTools from '../_shared/getTools';
 
 const scrollToIndex = cornerstoneTools.importInternal('util/scrollToIndex');
 const { formatDate } = utils;
@@ -44,7 +46,7 @@ function TrackedCornerstoneViewport({
   displaySet,
   viewportIndex,
   servicesManager,
-  commandsManager
+  commandsManager,
 }) {
   const {
     ToolBarService,
@@ -52,7 +54,10 @@ function TrackedCornerstoneViewport({
     MeasurementService,
   } = servicesManager.services;
   const [trackedMeasurements] = useTrackedMeasurements();
-  const [{ activeViewportIndex, viewports }, viewportGridService] = useViewportGrid();
+  const [
+    { activeViewportIndex, viewports },
+    viewportGridService,
+  ] = useViewportGrid();
   const [{ isCineEnabled, cines }, cineService] = useCine();
   const [viewportDialogState, viewportDialogApi] = useViewportDialog();
   const [viewportData, setViewportData] = useState(null);
@@ -126,9 +131,17 @@ function TrackedCornerstoneViewport({
   const onElementEnabled = evt => {
     const eventData = evt.detail;
     const targetElement = eventData.element;
+    const tools = getTools();
+    const toolAlias = ToolBarService.state.primaryToolId;
 
+    // Activate appropriate tool bindings for element
+    setActiveAndPassiveToolsForElement(targetElement, tools);
+    cornerstoneTools.setToolActiveForElement(targetElement, toolAlias, {
+      mouseButtonMask: 1,
+    });
+
+    // Set dashed, based on tracking, for this viewport
     const allTools = cornerstoneTools.store.state.tools;
-
     const toolsForElement = allTools.filter(
       tool => tool.element === targetElement
     );
@@ -154,6 +167,7 @@ function TrackedCornerstoneViewport({
       }
     });
 
+    // Update image after setting tool config
     const enabledElement = cornerstone.getEnabledElement(targetElement);
 
     if (enabledElement.image) {
@@ -166,6 +180,7 @@ function TrackedCornerstoneViewport({
       'ohif-cornerstone-enabled-element-event',
       {
         detail: {
+          context: 'ACTIVE_VIEWPORT::TRACKED',
           enabledElement: targetElement,
           viewportIndex,
         },
@@ -256,7 +271,7 @@ function TrackedCornerstoneViewport({
     PatientSex,
     PatientAge,
     SliceThickness,
-    PixelSpacing,
+    SpacingBetweenSlices,
     ManufacturerModelName,
   } = displaySet.images[0];
 
@@ -300,8 +315,8 @@ function TrackedCornerstoneViewport({
   }
 
   const cine = cines[viewportIndex];
-  const isPlaying = cine && cine.isPlaying || false;
+  const isPlaying = (cine && cine.isPlaying) || false;
-  const frameRate = cine && cine.frameRate || 24;
+  const frameRate = (cine && cine.frameRate) || 24;
 
   return (
     <>
@@ -315,6 +330,7 @@ function TrackedCornerstoneViewport({
           label,
           isTracked,
           isLocked: false,
+          isRehydratable: false,
           studyDate: formatDate(SeriesDate), // TODO: This is series date. Is that ok?
           currentSeries: SeriesNumber,
           seriesDescription: SeriesDescription,
@@ -328,10 +344,8 @@ function TrackedCornerstoneViewport({
             MRN: PatientID || '',
             thickness: SliceThickness ? `${SliceThickness.toFixed(2)}mm` : '',
             spacing:
-              PixelSpacing && PixelSpacing.length
+              SpacingBetweenSlices !== undefined
-                ? `${PixelSpacing[0].toFixed(2)}mm x ${PixelSpacing[1].toFixed(
+                ? `${SpacingBetweenSlices.toFixed(2)}mm`
-                  2
-                )}mm`
                 : '',
             scanner: ManufacturerModelName || '',
           },
@@ -341,8 +355,10 @@ function TrackedCornerstoneViewport({
         cineProps={{
           isPlaying,
           onClose: () => commandsManager.runCommand('toggleCine'),
-          onPlayPauseChange: isPlaying => cineService.setCine({ id: activeViewportIndex, isPlaying }),
+          onPlayPauseChange: isPlaying =>
-          onFrameRateChange: frameRate => cineService.setCine({ id: activeViewportIndex, frameRate }),
+            cineService.setCine({ id: activeViewportIndex, isPlaying }),
+          onFrameRateChange: frameRate =>
+            cineService.setCine({ id: activeViewportIndex, frameRate }),
         }}
       />
       {/* TODO: Viewport interface to accept stack or layers of content like this? */}

modes/longitudinal/src/index.js

@@ -39,34 +39,14 @@ export default function mode({ modeConfiguration }) {
           ToolBarService.init(extensionManager);
           ToolBarService.addButtons(toolbarButtons);
           ToolBarService.createButtonSection('primary', [
+            'MeasurementTools',
             'Zoom',
-            'Wwwc',
+            'WindowLevel',
             'Pan',
             'Capture',
             'Layout',
-            'Divider',
+            'MoreTools',
-            [
-              'ResetView',
-              'RotateClockwise',
-              'FlipHorizontally',
-              'StackScroll',
-              'Magnify',
-              'Invert',
-              'Cine',
-              'Angle',
-              'Probe',
-              'RectangleRoi',
-            ],
           ]);
-          ToolBarService.createButtonSection('secondary', [
-            'Annotate',
-            'Bidirectional',
-            'Ellipse',
-            'Length',
-            'Clear',
-          ]);
-
-          // Could import layout selector here from org.ohif.default (when it exists!)
         },
         layoutTemplate: ({ routeProps }) => {
           return {

modes/longitudinal/src/toolbarButtons.js

@@ -1,93 +1,149 @@
 // TODO: torn, can either bake this here; or have to create a whole new button type
 // Only ways that you can pass in a custom React component for render :l
-import { ExpandableToolbarButton, ListMenu, WindowLevelMenuItem } from '@ohif/ui';
+import {
+  // ExpandableToolbarButton,
+  // ListMenu,
+  WindowLevelMenuItem,
+} from '@ohif/ui';
 import { defaults } from '@ohif/core';
 
 const { windowLevelPresets } = defaults;
+/**
+ *
+ * @param {*} type - 'tool' | 'action' | 'toggle'
+ * @param {*} id
+ * @param {*} icon
+ * @param {*} label
+ */
+function _createButton(type, id, icon, label, commandName, commandOptions) {
+  return {
+    id,
+    icon,
+    label,
+    type,
+    commandName,
+    commandOptions,
+  };
+}
+
+const _createActionButton = _createButton.bind(null, 'action');
+const _createToggleButton = _createButton.bind(null, 'toggle');
+const _createToolButton = _createButton.bind(null, 'tool');
+
+/**
+ *
+ * @param {*} preset - preset number (from above import)
+ * @param {*} title
+ * @param {*} subtitle
+ */
+function _createWwwcPreset(preset, title, subtitle) {
+  return {
+    id: preset,
+    title,
+    subtitle,
+    type: 'action',
+    commandName: 'setWindowLevel',
+    commandOptions: windowLevelPresets[preset],
+  };
+}
 
 export default [
-  // Divider
+  // Measurement
   {
-    id: 'Divider',
+    id: 'MeasurementTools',
-    type: 'ohif.divider',
+    type: 'ohif.splitButton',
+    props: {
+      groupId: 'MeasurementTools',
+      isRadio: true, // ?
+      // Switch?
+      primary: _createToolButton('Length', 'tool-length', 'Length', undefined, {
+        toolName: 'Length',
+      }),
+      secondary: {
+        icon: 'chevron-down',
+        label: '',
+        isActive: true,
+        tooltip: 'More Measure Tools',
+      },
+      items: [
+        _createToolButton('Length', 'tool-length', 'Length', undefined, {
+          toolName: 'Length',
+        }),
+        _createToolButton(
+          'Bidirectional',
+          'tool-bidirectional',
+          'Bidirectional',
+          undefined,
+          { toolName: 'Bidirectional' }
+        ),
+        _createToolButton(
+          'ArrowAnnotate',
+          'tool-annotate',
+          'Annotation',
+          undefined,
+          { toolName: 'ArrowAnnotate' }
+        ),
+        _createToolButton(
+          'EllipticalRoi',
+          'tool-elipse',
+          'Ellipse',
+          undefined,
+          {
+            toolName: 'EllipticalRoi',
+          }
+        ),
+      ],
+    },
   },
-  // ~~ Primary
+  // Zoom..
   {
     id: 'Zoom',
     type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
     props: {
-      isActive: false,
+      type: 'tool',
       icon: 'tool-zoom',
       label: 'Zoom',
-      commandName: 'setToolActive',
       commandOptions: { toolName: 'Zoom' },
-      type: 'primary',
     },
   },
+  // Window Level + Presets...
   {
-    id: 'Wwwc',
+    id: 'WindowLevel',
-    type: 'ohif.radioGroup',
+    type: 'ohif.splitButton',
-    config: {
-      groupName: 'primaryTool',
-    },
-    component: ExpandableToolbarButton,
     props: {
-      isActive: true,
+      primary: _createToolButton(
-      icon: 'tool-window-level',
+        'Wwwc',
-      commandName: 'setToolActive',
+        'tool-window-level',
-      commandOptions: { toolName: 'Wwwc' },
+        'Window Level',
-      commands: {
+        undefined,
-        1: {
+        { toolName: 'Wwwc' }
-          commandName: 'setWindowLevel',
+      ),
-          commandOptions: windowLevelPresets[1],
+      secondary: {
-        },
+        icon: 'chevron-down',
-        2: {
+        label: '',
-          commandName: 'setWindowLevel',
+        isActive: true,
-          commandOptions: windowLevelPresets[2],
+        tooltip: 'More Measure Tools',
-        },
-        3: {
-          commandName: 'setWindowLevel',
-          commandOptions: windowLevelPresets[3],
-        },
-        4: {
-          commandName: 'setWindowLevel',
-          commandOptions: windowLevelPresets[4],
-        },
-        5: {
-          commandName: 'setWindowLevel',
-          commandOptions: windowLevelPresets[5],
-        }
       },
-      type: 'primary',
+      isAction: true, // ?
-      content: ListMenu,
+      renderer: WindowLevelMenuItem,
-      contentProps: {
+      items: [
-        items: [
+        _createWwwcPreset(1, 'Soft tissue', '400 / 40'),
-          { value: 1, title: 'Soft tissue', subtitle: '400 / 40' },
+        _createWwwcPreset(2, 'Lung', '1500 / -600'),
-          { value: 2, title: 'Lung', subtitle: '1500 / -600' },
+        _createWwwcPreset(3, 'Liver', '150 / 90'),
-          { value: 3, title: 'Liver', subtitle: '150 / 90' },
+        _createWwwcPreset(4, 'Bone', '80 / 40'),
-          { value: 4, title: 'Bone', subtitle: '80 / 40' },
+        _createWwwcPreset(5, 'Brain', '2500 / 480'),
-          { value: 5, title: 'Brain', subtitle: '2500 / 480' },
+      ],
-        ],
-        renderer: WindowLevelMenuItem
-      }
     },
   },
+  // Pan...
   {
     id: 'Pan',
     type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
     props: {
-      isActive: false,
+      type: 'tool',
       icon: 'tool-move',
       label: 'Pan',
-      commandName: 'setToolActive',
       commandOptions: { toolName: 'Pan' },
-      type: 'primary',
     },
   },
   {
@@ -96,219 +152,83 @@ export default [
     props: {
       icon: 'tool-capture',
       label: 'Capture',
+      type: 'action',
       commandName: 'showDownloadViewportModal',
-      type: 'primary',
     },
   },
   {
     id: 'Layout',
     type: 'ohif.layoutSelector',
   },
-  // ~~ Primary: NESTED
+  // More...
   {
-    id: 'ResetView',
+    id: 'MoreTools',
-    type: 'ohif.action',
+    type: 'ohif.splitButton',
     props: {
-      icon: 'old-reset',
+      isRadio: true, // ?
-      label: 'Reset View',
+      groupId: 'MoreTools',
-      commandName: 'resetViewport',
+      primary: _createActionButton(
-      type: 'primary',
+        'reset',
-    },
+        'tool-reset',
-  },
+        'Reset View',
-  {
+        'resetViewport'
-    id: 'RotateClockwise',
+      ),
-    type: 'ohif.action',
+      secondary: {
-    props: {
+        icon: 'chevron-down',
-      icon: 'old-rotate-right',
+        label: '',
-      label: 'Rotate Right',
+        isActive: true,
-      commandName: 'rotateViewportCW',
+        tooltip: 'More Measure Tools',
-      type: 'primary',
+      },
-    },
+      items: [
-  },
+        _createActionButton(
-  {
+          'reset',
-    id: 'FlipHorizontally',
+          'tool-reset',
-    type: 'ohif.action',
+          'Reset View',
-    props: {
+          'resetViewport'
-      icon: 'old-ellipse-h',
+        ),
-      label: 'Flip Horizontally',
+        _createActionButton(
-      commandName: 'flipViewportHorizontal',
+          'rotate-right',
-      type: 'primary',
+          'tool-rotate-right',
-    },
+          'Rotate Right',
-  },
+          'rotateViewportCW'
-  {
+        ),
-    id: 'StackScroll',
+        _createActionButton(
-    type: 'ohif.radioGroup',
+          'flip-horizontal',
-    config: {
+          'tool-flip-horizontal',
-      groupName: 'primaryTool',
+          'Flip Horizontally',
-    },
+          'flipViewportHorizontal'
-    props: {
+        ),
-      isActive: false,
+        _createToolButton(
-      icon: 'old-bars',
+          'StackScroll',
-      label: 'Stack Scroll',
+          'tool-stack-scroll',
-      commandName: 'setToolActive',
+          'Stack Scroll',
-      commandOptions: { toolName: 'StackScroll' },
+          undefined,
-      type: 'primary',
+          { toolName: 'StackScroll' }
-    },
+        ),
-  },
+        _createToolButton('Magnify', 'tool-magnify', 'Magnify', undefined, {
-  {
+          toolName: 'Magnify',
-    id: 'Magnify',
+        }),
-    type: 'ohif.radioGroup',
+        _createActionButton(
-    config: {
+          'invert',
-      groupName: 'primaryTool',
+          'tool-invert',
-    },
+          'Invert',
-    props: {
+          'invertViewport'
-      isActive: false,
+        ),
-      icon: 'old-circle',
+        _createToggleButton('cine', 'tool-cine', 'Cine', 'toggleCine'),
-      label: 'Magnify',
+        _createToolButton('Angle', 'tool-angle', 'Angle', undefined, {
-      commandName: 'setToolActive',
+          toolName: 'Angle',
-      commandOptions: { toolName: 'Magnify' },
+        }),
-      type: 'primary',
+        _createToolButton('DragProbe', 'tool-probe', 'Probe', undefined, {
-    },
+          toolName: 'DragProbe',
-  },
+        }),
-  {
+        _createToolButton(
-    id: 'Invert',
+          'Rectangle',
-    type: 'ohif.action',
+          'tool-rectangle',
-    props: {
+          'Rectangle',
-      icon: 'old-invert',
+          undefined,
-      label: 'Invert',
+          { toolName: 'RectangleRoi' }
-      commandName: 'invertViewport',
+        ),
-      type: 'primary',
+      ],
-    },
-  },
-  {
-    id: 'Cine',
-    type: 'ohif.toggle',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'old-youtube',
-      label: 'Cine',
-      commandName: 'toggleCine',
-      type: 'primary',
-    },
-  },
-  // TODO: 2D MPR: We had said this was off the table?
-  {
-    id: 'Angle',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'old-angle-left',
-      label: 'Angle',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Angle' },
-      type: 'primary',
-    },
-  },
-  {
-    id: 'Probe',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'old-dot-circle',
-      label: 'Probe',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'DragProbe' },
-      type: 'primary',
-    },
-  },
-  {
-    id: 'RectangleRoi',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'old-circle-o',
-      label: 'Rectangle',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'RectangleRoi' },
-      type: 'primary',
-    },
-  },
-  // ~~ Secondary
-  {
-    id: 'Annotate',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'tool-annotate',
-      label: 'Annotate',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'ArrowAnnotate' },
-      type: 'secondary',
-    },
-  },
-  {
-    id: 'Bidirectional',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'tool-bidirectional',
-      label: 'Bidirectional',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Bidirectional' },
-      type: 'secondary',
-    },
-  },
-  {
-    id: 'Ellipse',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'tool-elipse',
-      label: 'Ellipse',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'EllipticalRoi' },
-      type: 'secondary',
-    },
-  },
-  {
-    id: 'Length',
-    type: 'ohif.radioGroup',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'tool-length',
-      label: 'Length',
-      commandName: 'setToolActive',
-      commandOptions: { toolName: 'Length' },
-      type: 'secondary',
-    },
-  },
-  {
-    id: 'Clear',
-    type: 'ohif.action',
-    config: {
-      groupName: 'primaryTool',
-    },
-    props: {
-      isActive: false,
-      icon: 'old-trash',
-      label: 'Clear',
-      commandName: 'clearMeasurements',
-      commandOptions: {},
-      type: 'secondary',
     },
   },
 ];

modes/segmentation/src/toolbarButtons.js

@@ -72,7 +72,7 @@ export default [
     id: 'ResetView',
     type: 'ohif.action',
     props: {
-      icon: 'old-reset',
+      icon: 'tool-reset',
       label: 'Reset View',
       commandName: 'resetViewport',
       type: 'primary',
@@ -82,7 +82,7 @@ export default [
     id: 'RotateClockwise',
     type: 'ohif.action',
     props: {
-      icon: 'old-rotate-right',
+      icon: 'tool-rotate-right',
       label: 'Rotate Right',
       commandName: 'rotateViewportCW',
       type: 'primary',
@@ -92,7 +92,7 @@ export default [
     id: 'FlipHorizontally',
     type: 'ohif.action',
     props: {
-      icon: 'old-ellipse-h',
+      icon: 'tool-flip-horizontal',
       label: 'Flip Horizontally',
       commandName: 'flipViewportHorizontal',
       type: 'primary',
@@ -106,7 +106,7 @@ export default [
     },
     props: {
       isActive: false,
-      icon: 'old-bars',
+      icon: 'tool-stack-scroll',
       label: 'Stack Scroll',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'StackScroll' },
@@ -121,7 +121,7 @@ export default [
     },
     props: {
       isActive: false,
-      icon: 'old-circle',
+      icon: 'tool-magnify',
       label: 'Magnify',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Magnify' },
@@ -132,7 +132,7 @@ export default [
     id: 'Invert',
     type: 'ohif.action',
     props: {
-      icon: 'old-invert',
+      icon: 'tool-invert',
       label: 'Invert',
       commandName: 'invertViewport',
       type: 'primary',
@@ -143,7 +143,7 @@ export default [
     id: 'Cine',
     type: 'ohif.action',
     props: {
-      icon: 'old-youtube',
+      icon: 'tool-cine',
       label: 'Cine',
       commandName: '',
       type: 'primary',
@@ -158,7 +158,7 @@ export default [
     },
     props: {
       isActive: false,
-      icon: 'old-angle-left',
+      icon: 'tool-angle',
       label: 'Angle',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Angle' },
@@ -173,7 +173,7 @@ export default [
     },
     props: {
       isActive: false,
-      icon: 'old-dot-circle',
+      icon: 'tool-probe',
       label: 'Probe',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'Probe' },
@@ -188,7 +188,7 @@ export default [
     },
     props: {
       isActive: false,
-      icon: 'old-circle-o',
+      icon: 'tool-rectangle',
       label: 'Rectangle',
       commandName: 'setToolActive',
       commandOptions: { toolName: 'RectangleRoi' },

platform/core/src/classes/CommandsManager.js

@@ -5,7 +5,6 @@ import log from '../log.js';
  *
  * @typedef {Object} CommandDefinition
  * @property {Function} commandFn - Command to call
- * @property {Array} storeContexts - Array of string of modules required from store
  * @property {Object} options - Object of params to pass action
  */
 
@@ -161,19 +160,10 @@ export class CommandsManager {
       return;
     }
 
-    const { commandFn, storeContexts = [] } = definition;
+    const { commandFn } = definition;
-    const definitionOptions = definition.options;
+    const commandParams = Object.assign(
-
-    let commandParams = {};
-    const appState = this._getAppState();
-    storeContexts.forEach(context => {
-      commandParams[context] = appState[context];
-    });
-
-    commandParams = Object.assign(
       {},
-      commandParams, // Required store contexts
+      definition.options, // "Command configuration"
-      definitionOptions, // "Command configuration"
       options // "Time of call" info
     );
 

platform/core/src/services/ServicesManager.js

@@ -1,7 +1,8 @@
 import log from './../log.js';
 
 export default class ServicesManager {
-  constructor() {
+  constructor(commandsManager) {
+    this._commandsManager = commandsManager;
     this.services = {};
     this.registeredServiceNames = [];
   }
@@ -35,6 +36,7 @@ export default class ServicesManager {
     if (service.create) {
       this.services[service.name] = service.create({
         configuration,
+        commandsManager: this._commandsManager,
       });
     } else {
       log.warn(`Service create factory function not defined. Exiting early.`);

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

@@ -3,10 +3,13 @@ import pubSubServiceInterface from '../_shared/pubSubServiceInterface';
 
 const EVENTS = {
   TOOL_BAR_MODIFIED: 'event::toolBarService:toolBarModified',
+  TOOL_BAR_STATE_MODIFIED: 'event::toolBarService:toolBarStateModified',
 };
 
 export default class ToolBarService {
-  constructor() {
+  constructor(commandsManager) {
+    this._commandsManager = commandsManager;
+    //
     this.EVENTS = EVENTS;
     this.listeners = {};
     this.buttons = {};
@@ -17,6 +20,18 @@ export default class ToolBarService {
        */
     };
 
+    // TODO: Do we need to track per context? Or do we allow for a mixed
+    // definition that adapts based on context?
+    this.state = {
+      primaryToolId: 'Wwwc',
+      toggles: {
+        /* id: true/false */
+      },
+      groups: {
+        /* track most recent click per group...? */
+      },
+    };
+
     Object.assign(this, pubSubServiceInterface);
   }
 
@@ -24,17 +39,59 @@ export default class ToolBarService {
     this.extensionManager = extensionManager;
   }
 
+  /**
+   *
+   * @param {*} interaction
+   */
+  recordInteraction(interaction) {
+    const commandsManager = this._commandsManager;
+    const { groupId, itemId, interactionType } = interaction;
+
+    switch (interactionType) {
+      case 'action': {
+        break;
+      }
+      case 'tool': {
+        this.state.primaryToolId = itemId;
+        // TODO: Force run this for all contexts? Even inactive?
+        // or... They'll just detect primaryToolId when they spin up and apply...
+        commandsManager.runCommand('setToolActive', interaction.commandOptions);
+        break;
+      }
+      case 'toggle': {
+        this.state.toggles[itemId] =
+          this.state.toggles[itemId] === undefined
+            ? true
+            : !this.state.toggles[itemId];
+        break;
+      }
+    }
+
+    // Run command if there's one associated
+    //
+    // NOTE: Should probably just do this for tools as well?
+    // But would be nice if we could enforce at least the command name?
+    if (interaction.commandName) {
+      commandsManager.runCommand(
+        interaction.commandName,
+        interaction.commandOptions
+      );
+    }
+
+    // Track last touched id for each group
+    if (groupId) {
+      this.state.groups[groupId] = itemId;
+    }
+
+    this._broadcastChange(this.EVENTS.TOOL_BAR_STATE_MODIFIED, {});
+  }
+
   getButtons() {
     return this.buttons;
   }
 
   getActiveTools() {
-    return Object.keys(this.buttons).filter(key => {
+    return [this.state.primaryToolId, ...Object.keys(this.state.toggles)];
-      const button = this.buttons[key];
-      if (button && button.props && button.props.isActive) {
-        return button;
-      }
-    });
   }
 
   setButton(id, button) {
@@ -43,7 +100,7 @@ export default class ToolBarService {
       this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
         buttons: this.buttons,
         button: this.buttons[id],
-        buttonSections: this.buttonSections
+        buttonSections: this.buttonSections,
       });
     }
   }
@@ -52,7 +109,7 @@ export default class ToolBarService {
     this.buttons = buttons;
     this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {
       buttons: this.buttons,
-      buttonSections: this.buttonSections
+      buttonSections: this.buttonSections,
     });
   }
 
@@ -84,41 +141,27 @@ export default class ToolBarService {
     this._broadcastChange(this.EVENTS.TOOL_BAR_MODIFIED, {});
   }
 
+  /**
+   *
+   * Finds a button section by it's name, then maps the list of string name
+   * identifiers to schema/values that can be used to render the buttons.
+   *
+   * @param {string} key
+   * @param {*} props
+   */
   getButtonSection(key, props) {
     const buttonSectionIds = this.buttonSections[key];
     const buttonsInSection = [];
 
-    if (!buttonSectionIds) {
+    if (buttonSectionIds && buttonSectionIds.length !== 0) {
-      return buttonsInSection;
+      buttonSectionIds.forEach(btnId => {
-    }
-
-    buttonSectionIds.forEach(btnIdOrArray => {
-      const isNested = Array.isArray(btnIdOrArray);
-
-      if (isNested) {
-        const btnIds = btnIdOrArray;
-        const nestedButtons = [];
-
-        btnIds.forEach(nestedBtnId => {
-          const nestedBtn = this.buttons[nestedBtnId];
-          const metadata = { isNested: true };
-          const mappedNestedBtn = this._mapButtonToDisplay(nestedBtn, key, metadata, props);
-
-          nestedButtons.push(mappedNestedBtn);
-        });
-
-        if (nestedButtons.length) {
-          buttonsInSection.push(nestedButtons);
-        }
-      } else {
-        const btnId = btnIdOrArray;
         const btn = this.buttons[btnId];
-        const metadata = { isNested: false };
+        const metadata = {};
         const mappedBtn = this._mapButtonToDisplay(btn, key, metadata, props);
 
         buttonsInSection.push(mappedBtn);
-      }
+      });
-    });
+    }
 
     return buttonsInSection;
   }
@@ -159,6 +202,8 @@ export default class ToolBarService {
    *
    * @param {*} btn
    * @param {*} btnSection
+   * @param {*} metadata
+   * @param {*} props - Props set by the Viewer layer
    */
   _mapButtonToDisplay(btn, btnSection, metadata, props) {
     const { id, type, component } = btn;
@@ -168,25 +213,10 @@ export default class ToolBarService {
       return;
     }
 
-    const onClick = evt => {
-      if (buttonType.clickHandler) {
-        buttonType.clickHandler(evt, btn, btnSection, metadata, props);
-      }
-      if (btn.props.onClick) {
-        btn.onClick(evt, btn, btnSection);
-      }
-      if (btn.props.clickHandler) {
-        btn.clickHandler(evt, btn, btnSection);
-      }
-      if (props && props.onClick) {
-        props.onClick(evt, btn, btnSection, props);
-      }
-    };
-
     return {
       id,
       Component: component || buttonType.defaultComponent,
-      componentProps: Object.assign({}, btn.props, { onClick }), //
+      componentProps: Object.assign({}, btn.props, props),
     };
   }
 }

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

@@ -2,7 +2,7 @@ import ToolBarService from './ToolBarService';
 
 export default {
   name: 'ToolBarService',
-  create: ({ configuration = {} }) => {
+  create: ({ configuration = {}, commandsManager }) => {
-    return new ToolBarService();
+    return new ToolBarService(commandsManager);
   },
 };

platform/ui/src/assets/icons/arrow-left.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <g fill-rule="evenodd">
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
+        <path fill="currentcolor" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
+    </g>
+</svg>

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

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 13 13">
+    <g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g stroke="currentColor">
+            <path stroke-width="1.5" d="M0.5 3L0.5 0" transform="translate(0 1) translate(6 3)"/>
+            <path d="M0.5 4.5L0.5 4.5" transform="translate(0 1) translate(6 3)"/>
+            <path stroke-width="1.5" d="M.489 5.25c-.065.002-.127.03-.172.078-.044.048-.068.112-.065.177.005.135.115.243.25.245h.009c.065-.002.127-.03.171-.078.045-.048.068-.112.066-.177-.004-.134-.112-.241-.246-.245" transform="translate(0 1) translate(6 3)"/>
+        </g>
+    </g>
+</svg>

platform/ui/src/assets/icons/old-angle-left.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 256 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Angle Left</title>
-  <path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/>
-</svg>

platform/ui/src/assets/icons/old-bars.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 1792 1792"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Bars</title>
-  <path d="M1664 1344v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45zm0-512v128q0 26-19 45t-45 19h-1408q-26 0-45-19t-19-45v-128q0-26 19-45t45-19h1408q26 0 45 19t19 45z" />
-</svg>

platform/ui/src/assets/icons/old-circle-o.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 448 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Square Outline</title>
-  <path d="M400 32H48C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V80c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h340c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6z" />
-</svg>

platform/ui/src/assets/icons/old-circle.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Circle</title>
-  <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z" />
-</svg>

platform/ui/src/assets/icons/old-dot-circle.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 512 512"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Dot Circle</title>
-  <path d="M256 56c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m0-48C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 168c-44.183 0-80 35.817-80 80s35.817 80 80 80 80-35.817 80-80-35.817-80-80-80z"/>
-</svg>

platform/ui/src/assets/icons/old-ellipse-h.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 22 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Ellipse Horizontal</title>
-  <path d="M6 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM14 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5zM22 11.5v3c0 0.828-0.672 1.5-1.5 1.5h-3c-0.828 0-1.5-0.672-1.5-1.5v-3c0-0.828 0.672-1.5 1.5-1.5h3c0.828 0 1.5 0.672 1.5 1.5z" />
-</svg>

platform/ui/src/assets/icons/old-invert.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Adjust</title>
-  <path d="M12 22.5v-17c-4.688 0-8.5 3.813-8.5 8.5s3.813 8.5 8.5 8.5zM24 14c0 6.625-5.375 12-12 12s-12-5.375-12-12 5.375-12 12-12 12 5.375 12 12z" />
-</svg>

platform/ui/src/assets/icons/old-reset.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Reset</title>
-  <path d="M24 14c0 6.609-5.391 12-12 12-3.578 0-6.953-1.578-9.234-4.328-0.156-0.203-0.141-0.5 0.031-0.672l2.141-2.156c0.109-0.094 0.25-0.141 0.391-0.141 0.141 0.016 0.281 0.078 0.359 0.187 1.531 1.984 3.828 3.109 6.312 3.109 4.406 0 8-3.594 8-8s-3.594-8-8-8c-2.047 0-3.984 0.781-5.437 2.141l2.141 2.156c0.297 0.281 0.375 0.719 0.219 1.078-0.156 0.375-0.516 0.625-0.922 0.625h-7c-0.547 0-1-0.453-1-1v-7c0-0.406 0.25-0.766 0.625-0.922 0.359-0.156 0.797-0.078 1.078 0.219l2.031 2.016c2.203-2.078 5.187-3.313 8.266-3.313 6.609 0 12 5.391 12 12z" />
-</svg>

platform/ui/src/assets/icons/old-rotate-right.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 24 24"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">Rotate Right</title>
-  <path d="M16.875 15.469c0.563-0.75 0.891-1.594 1.031-2.484h2.016c-0.188 1.406-0.703 2.719-1.594 3.891zM12.984 17.906c0.891-0.141 1.734-0.469 2.484-1.031l1.453 1.453c-1.172 0.891-2.531 1.406-3.938 1.594v-2.016zM19.922 11.016h-2.016c-0.141-0.891-0.469-1.734-1.031-2.484l1.453-1.406c0.891 1.172 1.406 2.484 1.594 3.891zM15.563 5.531l-4.547 4.453v-3.891c-2.859 0.469-5.016 2.953-5.016 5.906s2.156 5.438 5.016 5.906v2.016c-3.938-0.469-7.031-3.844-7.031-7.922s3.094-7.453 7.031-7.922v-3.094z" />
-</svg>

platform/ui/src/assets/icons/old-youtube.svg

@@ -1,9 +0,0 @@
-<svg
-  xmlns="http://www.w3.org/2000/svg"
-  viewBox="0 0 28 28"
-  aria-labelledby="title"
-  fill="currentColor"
->
-  <title id="title">YouTube Logo</title>
-  <path d="M11.109 17.625l7.562-3.906-7.562-3.953v7.859zM14 4.156c5.891 0 9.797 0.281 9.797 0.281 0.547 0.063 1.75 0.063 2.812 1.188 0 0 0.859 0.844 1.109 2.781 0.297 2.266 0.281 4.531 0.281 4.531v2.125s0.016 2.266-0.281 4.531c-0.25 1.922-1.109 2.781-1.109 2.781-1.062 1.109-2.266 1.109-2.812 1.172 0 0-3.906 0.297-9.797 0.297v0c-7.281-0.063-9.516-0.281-9.516-0.281-0.625-0.109-2.031-0.078-3.094-1.188 0 0-0.859-0.859-1.109-2.781-0.297-2.266-0.281-4.531-0.281-4.531v-2.125s-0.016-2.266 0.281-4.531c0.25-1.937 1.109-2.781 1.109-2.781 1.062-1.125 2.266-1.125 2.812-1.188 0 0 3.906-0.281 9.797-0.281v0z" />
-</svg>

platform/ui/src/assets/icons/tool-angle.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 17">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+        <path d="M2.5 14.5L20.688 14.438" transform="translate(1 1)"/>
+        <path d="M1 13.378L13.065 1.313" transform="translate(1 1) rotate(-10 7.033 7.345)"/>
+        <path stroke-dasharray="1 2.7" d="M16.194 11.65c.903-3.897-.636-6.269-4.62-7.115" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-annotate.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
         <path d="M8.593 20.252L0 20.252 0 11.659M0 20.252L19.642.61" transform="translate(1 1)"/>
     </g>
 </svg>

platform/ui/src/assets/icons/tool-bidirectional.svg

@@ -1,12 +1,9 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 27 27">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor">
-        <g stroke-linecap="square" stroke-linejoin="round" stroke-width="2">
+        <g stroke-linecap="round" stroke-linejoin="round">
-            <path d="M0.067 14.79L14 1" transform="translate(5 4)"/>
+            <path stroke-width="1.5" d="M19.729-.336c.448 0 .895.171 1.237.513h0l1.819 1.817c.314.314.483.717.51 1.127.027.433-.106.873-.398 1.226h0l-18.8 18.81c-.37.37-.854.554-1.338.554-.485 0-.97-.185-1.339-.554h0L-.196 21.54c-.37-.37-.554-.854-.554-1.339 0-.484.185-.968.554-1.338h0L18.492.177c.341-.342.79-.513 1.237-.513z" transform="translate(2 2)"/>
-            <path d="M2.16 3.908L11.899 12.138" transform="translate(5 4) rotate(4.465 7.03 8.023)"/>
+            <path d="M4.145 18.914L5.716 20.477M6.569 16.49L8.143 18.05M8.993 14.066L10.565 15.627M11.417 11.642L12.992 13.201M13.841 9.217L15.407 10.787M16.135 6.923L17.7 8.494M18.559 4.499L20.125 6.069" transform="translate(2 2)"/>
         </g>
-        <rect width="5" height="5" x="3" y="3" stroke-width="1.5" rx="2.5"/>
+        <path stroke-width="1.5" d="M9.873 5.904L6.089 2.121c-.39-.39-1.024-.39-1.414 0L2.907 3.889c-.39.39-.39 1.023 0 1.414l3.784 3.783h0M14 16.382l3.783 3.783c.391.39 1.024.39 1.415 0l1.767-1.767c.39-.39.39-1.024 0-1.415L17.182 13.2h0" transform="translate(2 2)"/>
-        <rect width="5" height="5" x="16" y="16" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
-        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
     </g>
 </svg>

platform/ui/src/assets/icons/tool-capture.svg

@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 18">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1.139)">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
         <path d="M5.983 2.556c.406-.022.795-.173 1.109-.432L8.944.432c.314-.26.703-.41 1.11-.432h2.903c.403.023.788.175 1.099.432l1.852 1.692c.314.259.703.41 1.11.432h3.426c1.099.112 1.93 1.045 1.917 2.149v8.712c0 1.058-.858 1.916-1.917 1.916H2.556c-1.059 0-1.917-.858-1.917-1.916V4.705c-.013-1.104.818-2.037 1.917-2.15h3.427z"/>
         <circle cx="11.5" cy="7.986" r="3.514"/>
         <path d="M19.167 5.43c.176 0 .32.144.32.32 0 .176-.144.32-.32.32-.177 0-.32-.144-.32-.32 0-.176.143-.32.32-.32"/>

platform/ui/src/assets/icons/tool-cine.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
+        <circle cx="11" cy="10.999" r="10.542" stroke-linecap="round" stroke-linejoin="round"/>
+        <path fill="currentColor" d="M8.542 8.724l5.762 2.306-5.762 2.88V8.725z"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-elipse.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 25">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="2" transform="translate(1 1)">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
-        <path stroke-linecap="round" stroke-linejoin="round" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19.833 14.625L19.833 22.958M24 18.792L15.667 18.792"/>
-        <ellipse cx="10.5" cy="7" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
+        <ellipse cx="10.5" cy="7" stroke-width="1.5" rx="6.5" ry="10" transform="rotate(89 10.5 7)"/>
     </g>
 </svg>

platform/ui/src/assets/icons/tool-flip-horizontal.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-width="1.5">
+        <path d="M6.632 3.316H2c-1.105 0-2 .895-2 2v9.263c0 1.105.895 2 2 2h4.632" transform="translate(1 1)"/>
+        <path stroke-dasharray="1 3.1" d="M14.368 3.316H19c1.105 0 2 .895 2 2v9.263c0 1.105-.895 2-2 2h-4.632 0" transform="translate(1 1)"/>
+        <path d="M10.5 0.553L10.5 19.342" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-invert.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+        <rect width="20" height="18" stroke="currentColor" stroke-width="1.5" rx="2"/>
+        <path fill="currentColor" d="M10 18H2c-1.105 0-2-.895-2-2V2C0 .895.895 0 2 0h8v3C6.686 3 4 5.686 4 9c0 3.238 2.566 5.878 5.775 5.996L10 15v3zM10 3c3.314 0 6 2.686 6 6s-2.686 6-6 6z"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-length.svg

@@ -1,7 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26">
-    <g fill="none" fill-rule="evenodd" stroke="currentColor" transform="translate(1 1)">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" transform="translate(1 1)">
-        <path stroke-linecap="square" stroke-linejoin="round" stroke-width="2" d="M5 18.79L19.436 4.353"/>
+        <rect width="24.749" height="7.779" x="-.375" y="8.111" stroke-width="1.5" rx="1" transform="rotate(-45.001 12 12)"/>
-        <rect width="5" height="5" x="19" stroke-width="1.5" rx="2.5"/>
+        <path d="M5.617 12.884L7.632 14.868M8.185 10.315L10.685 12.815M10.622 7.879L12.372 9.629M13.058 5.442L15.558 7.942M15.612 2.888L17.627 4.874M3.063 15.438L5.563 17.938"/>
-        <rect width="5" height="5" y="19" stroke-width="1.5" rx="2.5"/>
     </g>
 </svg>

platform/ui/src/assets/icons/tool-magnify.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
+        <circle cx="8.75" cy="8.749" r="8.333"/>
+        <path d="M19.583 19.582L14.643 14.642M4.583 8.749L12.917 8.749M8.75 4.582L8.75 12.916"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-move.svg

@@ -1,8 +1,8 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-    <g fill="currentColor" fill-rule="evenodd"  stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
-        <path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1.5)"/>
+        <path d="M9.882 18.529L9.882 0M18.529 9.882L1.235 9.882M7.412 2.468L9.88 0 12.364 2.484" transform="translate(1 1)"/>
-        <path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1.5) rotate(-180 9.888 18.536)"/>
+        <path d="M7.412 19.762L9.88 17.294 12.364 19.778" transform="translate(1 1) rotate(-180 9.888 18.536)"/>
-        <path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1.5) rotate(-90 1.242 9.888)"/>
+        <path d="M-1.234 11.114L1.234 8.646 3.718 11.13" transform="translate(1 1) rotate(-90 1.242 9.888)"/>
-        <path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1.5) rotate(90 18.536 9.888)"/>
+        <path d="M16.06 11.114L18.528 8.646 21.012 11.13" transform="translate(1 1) rotate(90 18.536 9.888)"/>
     </g>
 </svg>

platform/ui/src/assets/icons/tool-probe.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" transform="translate(1 1)">
+        <path d="M10 0L10 3.333M10 16.667L10 20M0 10L3.333 10M16.667 10L20 10"/>
+        <circle cx="10" cy="10" r="6.667"/>
+        <path d="M10 9.583c.23 0 .417.187.417.417 0 .23-.187.417-.417.417-.23 0-.417-.187-.417-.417 0-.23.187-.417.417-.417"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-rectangle.svg

@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 20">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round">
+        <g stroke-linejoin="round" stroke-width="2">
+            <path d="M3.788 0L3.788 7.576M7.576 3.788L0 3.788" transform="translate(1 1) translate(11.818 10)"/>
+        </g>
+        <path stroke-width="1.5" d="M8.03 13.788H2c-1.105 0-2-.896-2-2V2C0 .895.895 0 2 0h13.892c1.105 0 2 .895 2 2v4.506h0" transform="translate(1 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-reset.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 21">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+        <path d="M12.308 6.923L19.231 6.923 19.231 0" transform="translate(0 1)"/>
+        <path d="M18.705 6.923C17.303 2.956 13.397.44 9.205.802 5.015 1.165 1.598 4.315.9 8.464c-.7 4.148 1.495 8.245 5.335 9.962 3.841 1.716 8.357.619 10.981-2.67" transform="translate(0 1)"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-rotate-right.svg

@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 21 23">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
+        <rect width="14.444" height="11.111" x="5.556" y="10" fill="currentColor" rx="2"/>
+        <g stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
+            <path d="M8.889 3.333H4.444C1.99 3.333 0 5.323 0 7.778v4.444"/>
+            <path d="M5.556 0L8.889 3.333 5.556 6.667"/>
+        </g>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-stack-scroll.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-width="1.5" transform="translate(1 1)">
+        <rect width="14.286" height="14.286" y="5.714" rx="2"/>
+        <path stroke-linecap="round" d="M3.01 2.857h11.98c1.105 0 2 .896 2 2v12.286h0"/>
+        <path stroke-linecap="round" d="M5.714 0h11.982c1.104 0 2 .895 2 2v12.286h0"/>
+    </g>
+</svg>

platform/ui/src/assets/icons/tool-window-level.svg

@@ -1,5 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 23">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
-    <g fill="none" fill-rule="evenodd" transform="translate(1 1.5)">
+    <g fill="none" fill-rule="evenodd" transform="translate(1 1)">
         <circle cx="10" cy="10" r="10" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
         <path fill="currentColor" d="M17.484 3.367C19.049 5.132 20 7.455 20 10c0 5.523-4.477 10-10 10-2.545 0-4.868-.95-6.633-2.516z"/>
     </g>

platform/ui/src/assets/icons/tool-zoom.svg

@@ -1,3 +1,6 @@
-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-1 0 136 136.21852" >
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 23 22">
-  <path fill="currentColor" d="M 93.148438 80.832031 C 109.5 57.742188 104.03125 25.769531 80.941406 9.421875 C 57.851562 -6.925781 25.878906 -1.460938 9.53125 21.632812 C -6.816406 44.722656 -1.351562 76.691406 21.742188 93.039062 C 38.222656 104.707031 60.011719 105.605469 77.394531 95.339844 L 115.164062 132.882812 C 119.242188 137.175781 126.027344 137.347656 130.320312 133.269531 C 134.613281 129.195312 134.785156 122.410156 130.710938 118.117188 C 130.582031 117.980469 130.457031 117.855469 130.320312 117.726562 Z M 51.308594 84.332031 C 33.0625 84.335938 18.269531 69.554688 18.257812 51.308594 C 18.253906 33.0625 33.035156 18.269531 51.285156 18.261719 C 69.507812 18.253906 84.292969 33.011719 84.328125 51.234375 C 84.359375 69.484375 69.585938 84.300781 51.332031 84.332031 C 51.324219 84.332031 51.320312 84.332031 51.308594 84.332031 Z M 51.308594 84.332031 " style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" />
+    <g fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" transform="translate(1 1)">
+        <ellipse cx="8.558" cy="8.091" rx="7.814" ry="7.636"/>
+        <path d="M14.419 13.818L20.279 19.545"/>
+    </g>
 </svg>

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

@@ -2,6 +2,7 @@ import React from 'react';
 // Icons
 
 import arrowDown from './../../assets/icons/arrow-down.svg';
+import arrowLeft from './../../assets/icons/arrow-left.svg';
 import calendar from './../../assets/icons/calendar.svg';
 import cancel from './../../assets/icons/cancel.svg';
 import clipboard from './../../assets/icons/clipboard.svg';
@@ -13,6 +14,7 @@ import chevronLeft from './../../assets/icons/chevron-left.svg';
 import chevronRight from './../../assets/icons/chevron-right.svg';
 import eyeVisible from './../../assets/icons/eye-visible.svg';
 import eyeHidden from './../../assets/icons/eye-hidden.svg';
+import exclamation from './../../assets/icons/exclamation.svg';
 import externalLink from './../../assets/icons/external-link.svg';
 import groupLayers from './../../assets/icons/group-layers.svg';
 import info from './../../assets/icons/info.svg';
@@ -47,18 +49,18 @@ import toolAnnotate from './../../assets/icons/tool-annotate.svg';
 import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
 import toolElipse from './../../assets/icons/tool-elipse.svg';
 import toolLength from './../../assets/icons/tool-length.svg';
+import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
+import toolMagnify from './../../assets/icons/tool-magnify.svg';
+import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
+import toolInvert from './../../assets/icons/tool-invert.svg';
+import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
+import toolCine from './../../assets/icons/tool-cine.svg';
+import toolProbe from './../../assets/icons/tool-probe.svg';
+import toolAngle from './../../assets/icons/tool-angle.svg';
+import toolReset from './../../assets/icons/tool-reset.svg';
+import toolRectangle from './../../assets/icons/tool-rectangle.svg';
 
 /** Old OHIF */
-import oldBars from './../../assets/icons/old-bars.svg';
-import oldCircle from './../../assets/icons/old-circle.svg';
-import oldEllipseH from './../../assets/icons/old-ellipse-h.svg';
-import oldInvert from './../../assets/icons/old-invert.svg';
-import oldRotateRight from './../../assets/icons/old-rotate-right.svg';
-import oldYoutube from './../../assets/icons/old-youtube.svg';
-import oldDotCircle from './../../assets/icons/old-dot-circle.svg';
-import oldAngleLeft from './../../assets/icons/old-angle-left.svg';
-import oldReset from './../../assets/icons/old-reset.svg';
-import oldCircleO from './../../assets/icons/old-circle-o.svg';
 import oldTrash from './../../assets/icons/old-trash.svg';
 import oldPlay from './../../assets/icons/old-play.svg';
 import oldStop from './../../assets/icons/old-stop.svg';
@@ -80,6 +82,7 @@ const ICONS = {
   'group-layers': groupLayers,
   info: info,
   'info-link': infoLink,
+  'arrow-left': arrowLeft,
   'launch-arrow': launchArrow,
   'launch-info': launchInfo,
   link: link,
@@ -87,6 +90,7 @@ const ICONS = {
   lock: lock,
   'logo-ohif-small': logoOhifSmall,
   magnifier: magnifier,
+  exclamation: exclamation,
   'notificationwarning-diamond': notificationwarningDiamond,
   pencil: pencil,
   profile: profile,
@@ -110,18 +114,18 @@ const ICONS = {
   'tool-bidirectional': toolBidirectional,
   'tool-elipse': toolElipse,
   'tool-length': toolLength,
+  'tool-stack-scroll': toolStackScroll,
+  'tool-magnify': toolMagnify,
+  'tool-flip-horizontal': toolFlipHorizontal,
+  'tool-invert': toolInvert,
+  'tool-rotate-right': toolRotateRight,
+  'tool-cine': toolCine,
+  'tool-probe': toolProbe,
+  'tool-angle': toolAngle,
+  'tool-reset': toolReset,
+  'tool-rectangle': toolRectangle,
 
   /** Old OHIF */
-  'old-bars': oldBars,
-  'old-circle': oldCircle,
-  'old-ellipse-h': oldEllipseH,
-  'old-invert': oldInvert,
-  'old-rotate-right': oldRotateRight,
-  'old-youtube': oldYoutube,
-  'old-dot-circle': oldDotCircle,
-  'old-angle-left': oldAngleLeft,
-  'old-reset': oldReset,
-  'old-circle-o': oldCircleO,
   'old-trash': oldTrash,
   'old-play': oldPlay,
   'old-stop': oldStop,

platform/ui/src/components/SplitButton/SplitButton.jsx

@@ -6,117 +6,210 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import { Icon, Tooltip, ListMenu } from '@ohif/ui';
 
 const baseClasses = {
-  Button: 'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
+  Button:
-  Primary: 'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
+    'h-12 flex items-center rounded-md border-transparent border-2 cursor-pointer',
-  Secondary: 'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
+  Primary:
+    'h-full flex flex-1 items-center rounded-md rounded-tr-none rounded-br-none',
+  Secondary:
+    'h-full flex items-center justify-center rounded-tr-md rounded-br-md w-4',
   PrimaryIcon: 'w-5 h-5',
   SecondaryIcon: 'w-4 h-full stroke-1',
   Separator: 'border-l pt-2 pb-2',
-  Content: 'absolute z-10 top-0 mt-16'
+  Content: 'absolute z-10 top-0 mt-16',
 };
 
 const classes = {
-  Button: ({ isExpanded, primary }) => classNames(
+  Button: ({ isExpanded, primary }) =>
-    baseClasses.Button,
+    classNames(
-    !isExpanded && !primary.isActive && 'hover:bg-primary-dark hover:border-primary-dark'
+      baseClasses.Button,
-  ),
+      !isExpanded &&
+        !primary.isActive &&
+        'hover:bg-primary-dark hover:border-primary-dark'
+    ),
   Interface: 'h-full flex flex-row items-center',
-  Primary: ({ primary, isExpanded }) => classNames(
+  Primary: ({ primary, isExpanded }) =>
-    baseClasses.Primary,
+    classNames(
-    primary.isActive && !isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md' :
+      baseClasses.Primary,
-      isExpanded ? 'bg-primary-dark' : 'bg-secondary-dark hover:bg-primary-dark'
+      primary.isActive && !isExpanded
-  ),
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
-  Secondary: ({ isExpanded, primary }) => classNames(
+        : isExpanded
-    baseClasses.Secondary,
+        ? 'bg-primary-dark'
-    isExpanded ? 'bg-primary-light rounded-tr-md rounded-br-md'
+        : 'bg-secondary-dark hover:bg-primary-dark'
-      : primary.isActive ? 'bg-secondary-dark' : 'hover:bg-primary-dark bg-secondary-dark'
+    ),
-  ),
+  Secondary: ({ isExpanded, primary }) =>
-  PrimaryIcon: ({ primary, isExpanded }) => classNames(
+    classNames(
-    baseClasses.PrimaryIcon,
+      baseClasses.Secondary,
-    primary.isActive && !isExpanded ? 'text-primary-dark' : 'text-common-bright'
+      isExpanded
-  ),
+        ? 'bg-primary-light rounded-tr-md rounded-br-md'
-  SecondaryIcon: ({ isExpanded }) => classNames(
+        : primary.isActive
-    baseClasses.SecondaryIcon,
+        ? 'bg-secondary-dark'
-    isExpanded ? 'text-primary-dark' : 'text-primary-active hover:text-common-bright'
+        : 'hover:bg-primary-dark bg-secondary-dark'
-  ),
+    ),
-  Separator: ({ primary, isExpanded, isHovering }) => classNames(
+  PrimaryIcon: ({ primary, isExpanded }) =>
-    baseClasses.Separator,
+    classNames(
-    isHovering || isExpanded || primary.isActive ? 'border-transparent' : 'border-primary-active'
+      baseClasses.PrimaryIcon,
-  ),
+      primary.isActive && !isExpanded
-  Content: ({ isExpanded }) => classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden')
+        ? 'text-primary-dark'
+        : 'text-common-bright'
+    ),
+  SecondaryIcon: ({ isExpanded }) =>
+    classNames(
+      baseClasses.SecondaryIcon,
+      isExpanded
+        ? 'text-primary-dark'
+        : 'text-primary-active hover:text-common-bright'
+    ),
+  Separator: ({ primary, isExpanded, isHovering }) =>
+    classNames(
+      baseClasses.Separator,
+      isHovering || isExpanded || primary.isActive
+        ? 'border-transparent'
+        : 'border-primary-active'
+    ),
+  Content: ({ isExpanded }) =>
+    classNames(baseClasses.Content, isExpanded ? 'block' : 'hidden'),
 };
 
 const SplitButton = ({
   isRadio,
   isAction,
+  //
+  bState,
+  //
+  groupId,
   primary: _primary,
   secondary,
-  onClick,
   items: _items,
   renderer,
+  onInteraction,
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
   /* Bubbles up individual item clicks */
-  const getSplitButtonItems = items => items.map((item, index) => ({
+  const getSplitButtonItems = items =>
-    ...item,
+    items.map((item, index) => ({
-    index,
+      ...item,
-    onClick: () => {
+      index,
-      if (item.onClick) item.onClick({ ...item, index });
+      onClick: () => {
-      onClick({ item, index });
+        onInteraction({
+          groupId,
+          //
+          itemId: item.id,
+          interactionType: item.type,
+          // splitButtonId? (so we can track group?)
+          // info to fire item's command/event?
+          commandName: item.commandName,
+          commandOptions: item.commandOptions,
+        });
 
-      setState(state => ({
+        setState(state => ({
-        ...state,
+          ...state,
-        primary: !isAction ? { ...item, index } : state.primary,
+          primary: !isAction ? { ...item, index } : state.primary,
-        isExpanded: false,
+          isExpanded: false,
-        items: getSplitButtonItems(_items).filter(item => isRadio && !isAction ? item.index !== index : true)
+          items: getSplitButtonItems(_items).filter(item =>
-      }));
+            isRadio && !isAction ? item.index !== index : true
-    }
+          ),
-  }));
+        }));
+      },
+    }));
 
   const [state, setState] = useState({
     primary: _primary,
-    items: getSplitButtonItems(_items),
+    items: getSplitButtonItems(_items).filter(item =>
+      isRadio && !isAction ? item.id !== _primary.id : true
+    ),
     isHovering: false,
-    isExpanded: false
+    isExpanded: false,
   });
 
-  const onSecondaryClickHandler = () => setState(state => ({ ...state, isExpanded: !state.isExpanded }));
+  const onSecondaryClickHandler = () =>
-  const onMouseEnterHandler = () => setState(state => ({ ...state, isHovering: true }));
+    setState(state => ({ ...state, isExpanded: !state.isExpanded }));
-  const onMouseLeaveHandler = () => setState(state => ({ ...state, isHovering: false }));
+  const onMouseEnterHandler = () =>
-  const outsideClickHandler = () => setState(state => ({ ...state, isExpanded: false }));
+    setState(state => ({ ...state, isHovering: true }));
+  const onMouseLeaveHandler = () =>
+    setState(state => ({ ...state, isHovering: false }));
+  const outsideClickHandler = () =>
+    setState(state => ({ ...state, isExpanded: false }));
   const onPrimaryClickHandler = () => {
-    const primary = { ...state.primary, isActive: !state.primary.isActive };
+    onInteraction({
-    state.primary.onClick(primary);
+      groupId,
-    setState(state => ({ ...state, isExpanded: false, primary }));
+      itemId: state.primary.id,
+      interactionType: state.primary.type,
+      // splitButtonId? (so we can track group?)
+      // info to fire item's command/event?
+      //
+      commandName: state.primary.commandName,
+      commandOptions: state.primary.commandOptions,
+    });
   };
 
+  const isPrimaryActive =
+    (state.primary.type === 'tool' && primaryToolId === state.primary.id) ||
+    (state.primary.type === 'toggle' && toggles[state.primary.id] === true);
+
   return (
     <OutsideClickHandler onOutsideClick={outsideClickHandler}>
-      <div name='SplitButton' className="relative">
+      <div name="SplitButton" className="relative">
         <div
-          className={classes.Button({ ...state })}
+          className={classes.Button({
+            ...state,
+            primary: { isActive: isPrimaryActive },
+          })}
           onMouseEnter={onMouseEnterHandler}
           onMouseLeave={onMouseLeaveHandler}
         >
           <div className={classes.Interface}>
-            <div onClick={onPrimaryClickHandler} className={classes.Primary({ ...state })}>
+            <div
-              <Tooltip isDisabled={!state.primary.tooltip} content={state.primary.tooltip}>
+              onClick={onPrimaryClickHandler}
-                <div className='p-3 flex items-center justify-center h-full w-full'>
+              className={classes.Primary({
-                  <Icon name={state.primary.icon} className={classes.PrimaryIcon({ ...state })} />
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            >
+              <Tooltip
+                isDisabled={!state.primary.tooltip}
+                content={state.primary.tooltip}
+              >
+                <div className="flex items-center justify-center w-full h-full p-3">
+                  <Icon
+                    name={state.primary.icon}
+                    className={classes.PrimaryIcon({
+                      ...state,
+                      primary: { isActive: isPrimaryActive },
+                    })}
+                  />
                 </div>
               </Tooltip>
             </div>
-            <div className={classes.Separator({ ...state })}></div>
+            <div
-            <div className={classes.Secondary({ ...state })} onClick={onSecondaryClickHandler}>
+              className={classes.Separator({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+            ></div>
+            <div
+              className={classes.Secondary({
+                ...state,
+                primary: { isActive: isPrimaryActive },
+              })}
+              onClick={onSecondaryClickHandler}
+            >
               <Tooltip
                 isDisabled={state.isExpanded || !secondary.tooltip}
                 content={secondary.tooltip}
                 className="h-full"
               >
-                <Icon name={secondary.icon} className={classes.SecondaryIcon({ ...state })} />
+                <Icon
+                  name={secondary.icon}
+                  className={classes.SecondaryIcon({
+                    ...state,
+                    primary: { isActive: isPrimaryActive },
+                  })}
+                />
               </Tooltip>
             </div>
           </div>
         </div>
+        {/* EXPANDED LIST OF OPTIONS */}
         <div className={classes.Content({ ...state })}>
           <ListMenu items={state.items} renderer={renderer} />
         </div>
@@ -126,21 +219,20 @@ const SplitButton = ({
 };
 
 const DefaultListItemRenderer = ({ icon, label, isActive }) => (
-  <div className={classNames(
+  <div
-    'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
+    className={classNames(
-    isActive && 'bg-primary-dark'
+      'flex flex-row items-center p-3 h-8 w-full hover:bg-primary-dark',
-  )}
+      isActive && 'bg-primary-dark'
+    )}
   >
-    <span className='text-common-bright mr-4 text-base'>
+    <span className="mr-4 text-base text-common-bright">
-      <Icon name={icon} className='w-5 h-5 text-common-bright' />
+      <Icon name={icon} className="w-5 h-5 text-common-bright" />
     </span>
-    <span className='text-common-bright text-base mr-5'>
+    <span className="mr-5 text-base text-common-bright">{label}</span>
-      {label}
+  </div>
-    </span>
-  </div >
 );
 
-const noop = () => { };
+const noop = () => {};
 
 SplitButton.defaultProps = {
   isRadio: false,
@@ -148,47 +240,45 @@ SplitButton.defaultProps = {
   primary: {
     label: null,
     tooltip: null,
-    isActive: true,
-    onClick: noop
   },
   secondary: {
     icon: 'chevron-down',
     label: null,
     isActive: true,
-    tooltip: 'More Measure Tools'
+    tooltip: 'More Measure Tools',
   },
   items: [],
   renderer: DefaultListItemRenderer,
-  onClick: noop
 };
 
 SplitButton.propTypes = {
   primary: PropTypes.shape({
-    id: PropTypes.string,
+    id: PropTypes.string.isRequired,
     icon: PropTypes.string,
     label: PropTypes.string,
+    type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
     tooltip: PropTypes.string,
-    isActive: PropTypes.bool,
   }),
   secondary: PropTypes.shape({
     id: PropTypes.string,
     icon: PropTypes.string,
     label: PropTypes.string,
     tooltip: PropTypes.string,
-    isActive: PropTypes.bool
+    isActive: PropTypes.bool,
   }),
-  onClick: PropTypes.func,
   renderer: PropTypes.func,
   items: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.string.isRequired,
       icon: PropTypes.string,
       label: PropTypes.string,
+      type: PropTypes.oneOf(['tool', 'action', 'toggle']).isRequired,
       tooltip: PropTypes.string,
-      onClick: PropTypes.func,
       isActive: PropTypes.bool,
     })
-  )
+  ),
+  /** Callback function to inform ToolbarService of important events */
+  onInteraction: PropTypes.func.isRequired,
 };
 
 export default SplitButton;

platform/ui/src/components/StudyListFilter/StudyListFilter.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 
 import { Button, Icon, Typography, InputGroup } from '../../components';
-import { useModal } from '../../contextProviders';
 
 const StudyListFilter = ({
   filtersMeta,
@@ -21,42 +20,17 @@ const StudyListFilter = ({
     });
   };
   const isSortingEnable = numOfStudies > 0 && numOfStudies <= 100;
-  const { show } = useModal();
-
-  const showLearnMoreContent = () => {
-    const modalContent = () => <div>Search Instructions</div>;
-
-    show({
-      content: modalContent,
-      title: 'Learn More',
-    });
-  };
 
   return (
     <React.Fragment>
       <div>
         <div className="bg-primary-dark">
-          <div className="container m-auto relative flex flex-col pt-5">
+          <div className="container relative flex flex-col pt-5 m-auto">
-            <div className="flex flex-row justify-between mb-5 px-12">
+            <div className="flex flex-row justify-between px-12 mb-5">
               <div className="flex flex-row">
-                <Typography variant="h4" className="text-primary-light mr-6">
+                <Typography variant="h4" className="mr-6 text-primary-light">
                   Study list
                 </Typography>
-                <div className="flex flex-row items-end">
-                  <Button
-                    variant="text"
-                    size="small"
-                    color="inherit"
-                    className="text-primary-active"
-                    startIcon={<Icon name="info-link" className="w-2" />}
-                    onClick={showLearnMoreContent}
-                  >
-                    <span className="flex flex-col flex-1">
-                      <span>Learn more</span>
-                      <span className="opacity-50 pt-1 border-b border-primary-active"></span>
-                    </span>
-                  </Button>
-                </div>
               </div>
               <div className="flex flex-row">
                 {isFiltering && (
@@ -64,7 +38,7 @@ const StudyListFilter = ({
                     rounded="full"
                     variant="outlined"
                     color="primary"
-                    className="text-primary-active border-primary-active mx-8"
+                    className="mx-8 text-primary-active border-primary-active"
                     startIcon={<Icon name="cancel" />}
                     onClick={clearFilters}
                   >
@@ -76,7 +50,7 @@ const StudyListFilter = ({
                 </Typography>
                 <Typography
                   variant="h6"
-                  className="text-common-light self-end pb-1"
+                  className="self-end pb-1 text-common-light"
                 >
                   Studies
                 </Typography>
@@ -89,7 +63,7 @@ const StudyListFilter = ({
         className="sticky z-10 border-b-4 border-black"
         style={{ top: '57px' }}
       >
-        <div className="bg-primary-dark pt-3 pb-3 ">
+        <div className="pt-3 pb-3 bg-primary-dark ">
           <InputGroup
             inputMeta={filtersMeta}
             values={filterValues}
@@ -101,7 +75,7 @@ const StudyListFilter = ({
         </div>
         {numOfStudies > 100 && (
           <div className="container m-auto">
-            <div className="bg-primary-main text-center text-base py-1 rounded-b">
+            <div className="py-1 text-base text-center rounded-b bg-primary-main">
               <p className="text-white">
                 Filter list to 100 studies or less to enable sorting
               </p>

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

@@ -7,12 +7,19 @@ import { IconButton, Icon, Tooltip } from '../';
 const ToolbarButton = ({
   type,
   id,
-  isActive,
-  onClick,
   icon,
   label,
+  commandName,
+  commandOptions,
+  onInteraction,
   dropdownContent,
+  //
+  isActive: _isActive,
+  bState = {},
+  //
 }) => {
+  const { primaryToolId, toggles, groups } = bState;
+  const isActive = _isActive || (type === 'tool' && id === primaryToolId);
   const classes = {
     type: {
       primary: isActive
@@ -23,7 +30,6 @@ const ToolbarButton = ({
         : 'text-white hover:bg-secondary-dark hover:text-white focus:bg-secondary-dark focus:text-white',
     },
   };
-
   const shouldShowDropdown = !!isActive && !!dropdownContent;
 
   return (
@@ -36,7 +42,14 @@ const ToolbarButton = ({
         <IconButton
           variant={isActive ? 'contained' : 'text'}
           className={classnames('mx-1', classes.type[type])}
-          onClick={onClick}
+          onClick={() => {
+            onInteraction({
+              itemId: id,
+              interactionType: type,
+              commandName: commandName,
+              commandOptions: commandOptions,
+            });
+          }}
           key={id}
         >
           <Icon name={icon} />
@@ -49,15 +62,15 @@ const ToolbarButton = ({
 ToolbarButton.defaultProps = {
   dropdownContent: null,
   isActive: false,
-  type: 'primary',
+  type: 'action',
 };
 
 ToolbarButton.propTypes = {
   /* Influences background/hover styling */
-  type: PropTypes.oneOf(['primary', 'secondary']),
+  type: PropTypes.oneOf(['action', 'toggle', 'tool']),
   id: PropTypes.string.isRequired,
   isActive: PropTypes.bool,
-  onClick: PropTypes.func.isRequired,
+  onInteraction: PropTypes.func.isRequired,
   icon: PropTypes.string.isRequired,
   label: PropTypes.string.isRequired,
   /** Tooltip content can be replaced for a customized content by passing a node to this value. */

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

@@ -24,7 +24,14 @@ const arrowPositionStyle = {
   },
 };
 
-const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) => {
+const Tooltip = ({
+  content,
+  isSticky,
+  position,
+  tight,
+  children,
+  isDisabled,
+}) => {
   const [isActive, setIsActive] = useState(false);
 
   const handleMouseOver = () => {
@@ -43,7 +50,7 @@ const Tooltip = ({ content, isSticky, position, tight, children, isDisabled }) =
 
   return (
     <div
-      className="relative h-full"
+      className="relative"
       onMouseOver={handleMouseOver}
       onFocus={handleMouseOver}
       onMouseOut={handleMouseOut}
@@ -84,7 +91,7 @@ Tooltip.defaultProps = {
   tight: false,
   isSticky: false,
   position: 'bottom',
-  isDisabled: false
+  isDisabled: false,
 };
 
 Tooltip.propTypes = {

platform/ui/src/components/Viewport/Viewport.jsx

@@ -52,7 +52,9 @@ Viewport.propTypes = {
   studyData: PropTypes.shape({
     label: PropTypes.string.isRequired,
     isTracked: PropTypes.bool.isRequired,
+    /* Specific to SR Viewports only... */
     isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
     studyDate: PropTypes.string.isRequired,
     currentSeries: PropTypes.number.isRequired,
     seriesDescription: PropTypes.string.isRequired,

platform/ui/src/components/Viewport/Viewport.mdx

@@ -28,6 +28,7 @@ import { Viewport } from '@ohif/ui';
         label: 'A',
         isTracked: true,
         isLocked: false,
+        isRehydratable: false,
         studyDate: '07-Sep-2011',
         currentSeries: 1,
         seriesDescription:

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

@@ -19,6 +19,8 @@ const ViewportActionBar = ({
   showPatientInfo: patientInfoVisibility,
   onSeriesChange,
   onDoubleClick,
+  //
+  onPillClick,
 }) => {
   const [showPatientInfo, setShowPatientInfo] = useState(patientInfoVisibility);
 
@@ -33,6 +35,8 @@ const ViewportActionBar = ({
     label,
     isTracked,
     isLocked,
+    isRehydratable,
+    useAltStyling,
     modality,
     studyDate,
     currentSeries,
@@ -52,7 +56,6 @@ const ViewportActionBar = ({
 
   const onPatientInfoClick = () => setShowPatientInfo(!showPatientInfo);
   const closePatientInfo = () => setShowPatientInfo(false);
-
   const showPatientInfoRef = useRef(null);
   const clickOutsideListener = useOnClickOutside(
     showPatientInfoRef,
@@ -71,30 +74,121 @@ const ViewportActionBar = ({
 
   const renderIconStatus = () => {
     if (modality === 'SR') {
-      const TooltipMessage = isLocked
+      // 1 - Incompatible
-        ? () => (
+      // 2 - Locked
-          <div>
+      // 3 - Rehydratable / Open
-            This SR is locked. <br />
+      const state =
-              Measurements cannot be duplicated.
+        isRehydratable && !isLocked ? 3 : isRehydratable && isLocked ? 2 : 1;
-          </div>
+      let ToolTipMessage = null;
-        )
+      let StatusIcon = null;
-        : () => <div>This SR is unlocked.</div>;
+
+      switch (state) {
+        case 1:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+                backgroundColor: '#98e5c1',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="exclamation"
+                style={{ color: '#000', width: '12px', height: '12px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is not compatible
+              <br />
+              with this application.
+            </div>
+          );
+          break;
+        case 2:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-black rounded-full"
+              style={{
+                width: '18px',
+                height: '18px',
+              }}
+            >
+              <Icon
+                name="lock"
+                style={{ color: '#05D97C', width: '8px', height: '11px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => (
+            <div>
+              This structured report is currently read-only
+              <br />
+              because you are tracking measurements in
+              <br />
+              another viewport.
+            </div>
+          );
+          break;
+        case 3:
+          StatusIcon = () => (
+            <div
+              className="flex items-center justify-center -mr-1 bg-white rounded-full group-hover:bg-customblue-200"
+              style={{
+                width: '18px',
+                height: '18px',
+                border: 'solid 1.5px #000000',
+              }}
+            >
+              <Icon
+                name="arrow-left"
+                style={{ color: '#000', width: '14px', height: '14px' }}
+              />
+            </div>
+          );
+
+          ToolTipMessage = () => <div>Click to restore measurements.</div>;
+      }
+
+      const StatusPill = () => (
+        <div
+          className={classnames(
+            'group relative flex items-center justify-center px-2 rounded-full cursor-default bg-customgreen-100',
+            {
+              'hover:bg-customblue-100': state === 3,
+              'cursor-pointer': state === 3,
+            }
+          )}
+          style={{
+            height: '24px',
+            width: '55px',
+          }}
+          onClick={() => {
+            if (state === 3) {
+              onPillClick?.();
+            }
+          }}
+        >
+          <span className="pr-1 text-lg font-bold leading-none text-black">
+            SR
+          </span>
+          <StatusIcon />
+        </div>
+      );
+
       return (
         <>
-          <Tooltip content={<TooltipMessage />} position="bottom-left">
+          {ToolTipMessage && (
-            <div className="relative flex p-1 border rounded cursor-default border-primary-light">
+            <Tooltip content={<ToolTipMessage />} position="bottom-left">
-              <span className="text-sm font-bold leading-none text-primary-light">
+              <StatusPill />
-                SR
+            </Tooltip>
-              </span>
+          )}
-              {isLocked && (
+          {!ToolTipMessage && <StatusPill />}
-                <Icon
-                  name="lock"
-                  className="absolute w-3 text-white"
-                  style={{ top: -6, right: -6 }}
-                />
-              )}
-            </div>
-          </Tooltip>
         </>
       );
     }
@@ -119,13 +213,13 @@ const ViewportActionBar = ({
                       can be viewed <br /> in the measurement panel
                     </>
                   ) : (
-                      <>
+                    <>
-                        Measurements for
+                      Measurements for
                       <span className="font-bold text-white"> untracked </span>
                       series <br /> will not be shown in the <br /> measurements
                       panel
                     </>
-                    )}
+                  )}
                 </span>
               </div>
             </div>
@@ -137,15 +231,26 @@ const ViewportActionBar = ({
     );
   };
 
+  const borderColor = useAltStyling ? '#365A6A' : '#1D205A';
+  const backgroundColor = useAltStyling
+    ? '#031923'
+    : isTracked
+    ? '#020424'
+    : null;
+
   return (
     <div
-      className="flex flex-wrap items-center p-2 border-b select-none border-primary-light -mt-2"
+      className="flex flex-wrap items-center p-2 -mt-2 border-b select-none"
+      style={{
+        borderColor: borderColor,
+        backgroundColor: backgroundColor,
+      }}
       onDoubleClick={onDoubleClick}
     >
-      <div className="flex flex-grow min-w-48 flex-1 mt-2">
+      <div className="flex flex-1 flex-grow mt-2 min-w-48">
         <div className="flex items-center">
+          <span className="mr-2 text-white text-large">{label}</span>
           {renderIconStatus()}
-          <span className="ml-2 text-white text-large">{label}</span>
         </div>
         <div className="flex flex-col justify-start ml-4">
           <div className="flex">
@@ -173,14 +278,14 @@ const ViewportActionBar = ({
           <ButtonGroup>
             <Button
               size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
               onClick={() => onSeriesChange('left')}
             >
               <Icon name="chevron-left" className="w-4 text-white" />
             </Button>
             <Button
               size="initial"
-              className="px-2 py-1"
+              className="px-2 py-1 bg-black"
               onClick={() => onSeriesChange('right')}
             >
               <Icon name="chevron-right" className="w-4 text-white" />
@@ -189,11 +294,11 @@ const ViewportActionBar = ({
         </div>
       )}
       {showCine && !showNavArrows && (
-        <div className="mt-2 min-w-48 max-w-48 mr-auto">
+        <div className="mt-2 mr-auto min-w-48 max-w-48">
           <CinePlayer {...cineProps} />
         </div>
       )}
-      <div className="flex h-8 ml-4 mr-2 mt-2" onClick={onPatientInfoClick}>
+      <div className="flex h-8 mt-2 ml-4 mr-2" onClick={onPatientInfoClick}>
         <PatientInfo
           showPatientInfoRef={showPatientInfoRef}
           isOpen={showPatientInfo}
@@ -217,9 +322,12 @@ ViewportActionBar.propTypes = {
   cineProps: PropTypes.object,
   showPatientInfo: PropTypes.bool,
   studyData: PropTypes.shape({
+    //
+    useAltStyling: PropTypes.bool,
+    //
     label: PropTypes.string.isRequired,
     isTracked: PropTypes.bool.isRequired,
-    isLocked: PropTypes.bool.isRequired,
+    isRehydratable: PropTypes.bool.isRequired,
     studyDate: PropTypes.string.isRequired,
     currentSeries: PropTypes.number.isRequired,
     seriesDescription: PropTypes.string.isRequired,

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

@@ -22,11 +22,12 @@ import { ViewportActionBar } from '@ohif/ui';
 <Playground>
   <div className="p-4 h-64">
     <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
       studyData={{
         label: 'A',
         isTracked: true,
         isLocked: false,
+        isRehydratable: false,
         studyDate: '07-Sep-2010',
         currentSeries: 1,
         seriesDescription:
@@ -45,42 +46,42 @@ import { ViewportActionBar } from '@ohif/ui';
     />
   </div>
 </Playground>
-
 <Playground>
   <div className="p-4 h-64">
     <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
-      studyData={{
-        label: 'A',
-        isTracked: false,
-        isLocked: true,
-        studyDate: '07-Sep-2010',
-        currentSeries: 1,
-        seriesDescription:
-          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
-        modality: 'CT',
-        patientInformation: {
-          patientName: 'Smith, Jane',
-          patientSex: 'F',
-          patientAge: '59',
-          MRN: '10000001',
-          thickness: '2.0mm',
-          spacing: '1.25mm',
-          scanner: 'Aquilion',
-        },
-      }}
-    />
-  </div>
-</Playground>
-
-<Playground>
-  <div className="p-4 h-64">
-    <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
       studyData={{
         label: 'A',
         isTracked: false,
         isLocked: false,
+        isRehydratable: true,
+        studyDate: '07-Sep-2010',
+        currentSeries: 1,
+        seriesDescription:
+          'Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit Series description lorem ipsum dolor sit ',
+        modality: 'CT',
+        patientInformation: {
+          patientName: 'Smith, Jane',
+          patientSex: 'F',
+          patientAge: '59',
+          MRN: '10000001',
+          thickness: '2.0mm',
+          spacing: '1.25mm',
+          scanner: 'Aquilion',
+        },
+      }}
+    />
+  </div>
+</Playground>
+<Playground>
+  <div className="p-4 h-64">
+    <ViewportActionBar
+      onSeriesChange={direction => alert(`Series ${direction}`)}
+      studyData={{
+        label: 'A',
+        isTracked: false,
+        isLocked: false,
+        isRehydratable: false,
         studyDate: '07-Sep-2010',
         currentSeries: 1,
         seriesDescription:
@@ -99,15 +100,15 @@ import { ViewportActionBar } from '@ohif/ui';
     />
   </div>
 </Playground>
-
 <Playground>
   <div className="p-4 h-64">
     <ViewportActionBar
-      onSeriesChange={(direction) => alert(`Series ${direction}`)}
+      onSeriesChange={direction => alert(`Series ${direction}`)}
       studyData={{
         label: 'A',
         isTracked: false,
-        isLocked: true,
+        isLocked: false,
+        isRehydratable: true,
         studyDate: '07-Sep-2010',
         currentSeries: 1,
         seriesDescription:

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

@@ -88,6 +88,7 @@ import { tabs } from './studyBrowserMockData';
                         label: 'A',
                         isTracked: true,
                         isLocked: false,
+                        isRehydratable: false,
                         studyDate: '07-Sep-2011',
                         currentSeries: 1,
                         seriesDescription:

platform/ui/tailwind.config.js

@@ -46,6 +46,15 @@ module.exports = {
         active: '#2c3074',
       },
 
+      customgreen: {
+        100: '#05D97C',
+      },
+
+      customblue: {
+        100: '#c4fdff',
+        200: '#38daff',
+      },
+
       gray: {
         100: '#f7fafc',
         200: '#edf2f7',

platform/viewer/src/appInit.js

@@ -12,7 +12,7 @@ import {
   ToolBarService,
   ViewportGridService,
   HangingProtocolService,
-  CineService
+  CineService,
   // utils,
   // redux as reduxOHIF,
 } from '@ohif/core';
@@ -33,13 +33,17 @@ 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', 'DEFAULT', 'ACTIVE_VIEWPORT::CORNERSTONE'],
+    getActiveContexts: () => [
+      'VIEWER',
+      'DEFAULT',
+      'ACTIVE_VIEWPORT::CORNERSTONE',
+    ],
   };
 
-  const servicesManager = new ServicesManager();
   const commandsManager = new CommandsManager(commandsManagerConfig);
+  const servicesManager = new ServicesManager(commandsManager);
   const hotkeysManager = new HotkeysManager(commandsManager, servicesManager);
   const extensionManager = new ExtensionManager({
     commandsManager,
@@ -58,7 +62,7 @@ function appInit(appConfigOrFunc, defaultExtensions) {
     ToolBarService,
     ViewportGridService,
     HangingProtocolService,
-    CineService
+    CineService,
   ]);
 
   /**

platform/viewer/src/routes/DataSourceWrapper.jsx

@@ -6,9 +6,6 @@ import { MODULE_TYPES } from '@ohif/core';
 import { useAppConfig } from '@state';
 import { extensionManager } from '../App.jsx';
 
-let cacheMap = {};
-let total = {};
-
 /**
  * Uses route properties to determine the data source that should be passed
  * to the child layout template. In some instances, initiates requests and
@@ -48,64 +45,56 @@ function DataSourceWrapper(props) {
   // But only for LayoutTemplate type of 'list'?
   // Or no data fetching here, and just hand down my source
   const STUDIES_LIMIT = 101;
-  const [data, setData] = useState({ studies: [], total: 0 });
+  const [data, setData] = useState({
+    studies: [],
+    total: 0,
+    resultsPerPage: 25,
+    pageNumber: 1,
+  });
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
+    const queryFilterValues = _getQueryFilterValues(
+      history.location.search,
+      STUDIES_LIMIT
+    );
+
     // 204: no content
     async function getData() {
       setIsLoading(true);
 
-      const limit = STUDIES_LIMIT - 1;
+      const studies = await dataSource.query.studies.search(queryFilterValues);
-      const queryFilterValues = _getQueryFilterValues(history.location.search);
-      const { resultsPerPage = 25, pageNumber = 1 } = queryFilterValues;
-      const reachedLimits = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
-      const cacheKey = `${pageNumber}-${resultsPerPage}`;
-
-      const getFromCache = async ({ cacheKey, pageNumber, resultsPerPage, limit, options }) => {
-        const pagesAmount = limit / resultsPerPage;
-        const pageToRequest = parseInt((resultsPerPage * pageNumber) / STUDIES_LIMIT);
-
-        let length = 0;
-        if (!cacheMap[cacheKey]) {
-          length = pageToRequest > 0 ? (pageToRequest * STUDIES_LIMIT) : 1;
-          const studiesPromise = dataSource.query.studies.search(options);
-
-          for (let pageNum = 0; pageNum < pagesAmount; pageNum++) {
-            const currentPageNumber = (pageNum + 1) + (pageToRequest * pagesAmount);
-            cacheMap[`${currentPageNumber}-${resultsPerPage}`] = studiesPromise.then(function (results) {
-              const slicedResult = results.slice((pageNum * resultsPerPage), ((pageNum + 1) * resultsPerPage));
-              length += slicedResult.length;
-              return slicedResult;
-            });
-          }
-        }
-
-        const cache = await cacheMap[cacheKey];
-        return { cache, length, index: pageToRequest };
-      };
-
-      const { cache: studies, index, length } = await getFromCache({
-        cacheKey,
-        pageNumber,
-        resultsPerPage,
-        limit,
-        options: { ...queryFilterValues, ...{ offset: reachedLimits * limit } }
-      });
-
-      const totalKey = `${resultsPerPage}-${index}`;
-      total[totalKey] = total[totalKey] ? total[totalKey] + length : length;
-      const totals = Object.keys(total).map(key => total[key]);
-      const biggestIndex = totals.indexOf(Math.max(...totals));
-      const biggestKey = Object.keys(total)[biggestIndex];
-      const biggestTotal = total[biggestKey];
 
       setIsLoading(false);
-      setData({ studies, total: biggestTotal });
+      setData({
+        studies,
+        total: studies.length,
+        resultsPerPage: queryFilterValues.resultsPerPage,
+        pageNumber: queryFilterValues.pageNumber,
+      });
     }
 
     try {
-      getData();
+      // Cache invalidation :thinking:
+      // - Anytime change is not just next/previous page
+      // - And we didn't cross a result offset range
+      const isFirstLoad = data.studies.length === 0;
+      const isSamePage = data.pageNumber === queryFilterValues.pageNumber;
+      const previousOffset =
+        Math.floor((data.pageNumber * data.resultsPerPage) / STUDIES_LIMIT) *
+        (STUDIES_LIMIT - 1);
+      const newOffset =
+        Math.floor(
+          (queryFilterValues.pageNumber * queryFilterValues.resultsPerPage) /
+            STUDIES_LIMIT
+        ) *
+        (STUDIES_LIMIT - 1);
+      const isDataInvalid =
+        isFirstLoad || isSamePage || newOffset !== previousOffset;
+
+      if (isDataInvalid) {
+        getData();
+      }
     } catch (ex) {
       console.warn(ex);
     }
@@ -138,25 +127,32 @@ export default DataSourceWrapper;
  * Need generic that can be shared? Isn't this what qs is for?
  * @param {*} query
  */
-function _getQueryFilterValues(query) {
+function _getQueryFilterValues(query, queryLimit) {
   query = new URLSearchParams(query);
 
+  const pageNumber = _tryParseInt(query.get('pageNumber'), 1);
+  const resultsPerPage = _tryParseInt(query.get('resultsPerPage'), 25);
+
   const queryFilterValues = {
     // DCM
     patientId: query.get('mrn'),
     patientName: query.get('patientName'),
     studyDescription: query.get('description'),
-    modalitiesInStudy: query.get('modalities') && query.get('modalities').split(','),
+    modalitiesInStudy:
+      query.get('modalities') && query.get('modalities').split(','),
     accessionNumber: query.get('accession'),
     //
     startDate: query.get('startDate'),
     endDate: query.get('endDate'),
     page: _tryParseInt(query.get('page'), undefined),
-    pageNumber: _tryParseInt(query.get('pageNumber'), undefined),
+    pageNumber,
-    resultsPerPage: _tryParseInt(query.get('resultsPerPage'), undefined),
+    resultsPerPage,
     // Rarely supported server-side
     sortBy: query.get('sortBy'),
     sortDirection: query.get('sortDirection'),
+    // Offset...
+    offset:
+      Math.floor((pageNumber * resultsPerPage) / queryLimit) * (queryLimit - 1),
   };
 
   // patientName: good

platform/viewer/src/routes/WorkList/WorkList.jsx

@@ -24,7 +24,7 @@ import {
   Header,
   useModal,
   AboutModal,
-  UserPreferences
+  UserPreferences,
 } from '@ohif/ui';
 
 const seriesInStudiesMap = new Map();
@@ -33,7 +33,14 @@ const seriesInStudiesMap = new Map();
  * TODO:
  * - debounce `setFilterValues` (150ms?)
  */
-function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingData, dataSource, hotkeysManager }) {
+function WorkList({
+  history,
+  data: studies,
+  dataTotal: studiesTotal,
+  isLoadingData,
+  dataSource,
+  hotkeysManager,
+}) {
   const { hotkeyDefinitions, hotkeyDefaults } = hotkeysManager;
   const { show, hide } = useModal();
   const { t } = useTranslation();
@@ -94,7 +101,6 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
   const [expandedRows, setExpandedRows] = useState([]);
   const [studiesWithSeriesData, setStudiesWithSeriesData] = useState([]);
   const numOfStudies = studiesTotal;
-  const totalPages = Math.floor(numOfStudies / resultsPerPage) + 1;
 
   const setFilterValues = val => {
     if (filterValues.pageNumber === val.pageNumber) {
@@ -105,7 +111,15 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
   };
 
   const onPageNumberChange = newPageNumber => {
-    if (newPageNumber > totalPages) {
+    debugger;
+    const oldPageNumber = filterValues.pageNumber;
+    const rollingPageNumberMod = Math.floor(101 / filterValues.resultsPerPage);
+    const rollingPageNumber = oldPageNumber % rollingPageNumberMod;
+    const isNextPage = newPageNumber > oldPageNumber;
+    const hasNextPage =
+      Math.max(rollingPageNumber, 1) * resultsPerPage < numOfStudies;
+
+    if (isNextPage && !hasNextPage) {
       return;
     }
 
@@ -170,9 +184,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
   // Query for series information
   useEffect(() => {
     const fetchSeries = async studyInstanceUid => {
+      debugger;
       try {
         const series = await dataSource.query.series.search(studyInstanceUid);
-        seriesInStudiesMap.set(studyInstanceUid, utils.sortBySeriesDate(series));
+        seriesInStudiesMap.set(
+          studyInstanceUid,
+          utils.sortBySeriesDate(series)
+        );
         setStudiesWithSeriesData([...studiesWithSeriesData, studyInstanceUid]);
       } catch (ex) {
         // TODO: UI Notification Service
@@ -199,6 +217,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
     return !isEqual(filterValues, defaultFilterValues);
   };
 
+  const rollingPageNumberMod = Math.floor(101 / resultsPerPage);
+  const rollingPageNumber = (pageNumber - 1) % rollingPageNumberMod;
+  const offset = resultsPerPage * rollingPageNumber;
+  const offsetAndTake = offset + resultsPerPage;
   const tableDataSource = sortedStudies.map((study, key) => {
     const rowKey = key + 1;
     const isExpanded = expandedRows.some(k => k === rowKey);
@@ -229,8 +251,8 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
           content: patientName ? (
             <TooltipClipboard>{patientName}</TooltipClipboard>
           ) : (
-              <span className="text-gray-700">(Empty)</span>
+            <span className="text-gray-700">(Empty)</span>
-            ),
+          ),
           gridCol: 4,
         },
         {
@@ -294,13 +316,13 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
           seriesTableDataSource={
             seriesInStudiesMap.has(studyInstanceUid)
               ? seriesInStudiesMap.get(studyInstanceUid).map(s => {
-                return {
+                  return {
-                  description: s.description || '(empty)',
+                    description: s.description || '(empty)',
-                  seriesNumber: s.seriesNumber || '',
+                    seriesNumber: s.seriesNumber || '',
-                  modality: s.modality || '',
+                    modality: s.modality || '',
-                  instances: s.numSeriesInstances || '',
+                    instances: s.numSeriesInstances || '',
-                };
+                  };
-              })
+                })
               : []
           }
         >
@@ -317,7 +339,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
               <Link
                 key={i}
                 to={`${mode.id}?StudyInstanceUIDs=${studyInstanceUid}`}
-              // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
+                // to={`${mode.id}/dicomweb?StudyInstanceUIDs=${studyInstanceUid}`}
               >
                 <Button
                   rounded="full"
@@ -325,7 +347,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
                   disabled={false}
                   endIcon={<Icon name="launch-arrow" />} // launch-arrow | launch-info
                   className={classnames('font-bold', { 'ml-2': !isFirst })}
-                  onClick={() => { }}
+                  onClick={() => {}}
                 >
                   {mode.displayName}
                 </Button>
@@ -348,25 +370,28 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
     {
       title: t('Header:About'),
       icon: 'info',
-      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' })
+      onClick: () => show({ content: AboutModal, title: 'About OHIF Viewer' }),
     },
     {
       title: t('Header:Preferences'),
       icon: 'settings',
-      onClick: () => show({
+      onClick: () =>
-        title: t('UserPreferencesModal:User Preferences'),
+        show({
-        content: UserPreferences,
+          title: t('UserPreferencesModal:User Preferences'),
-        contentProps: {
+          content: UserPreferences,
-          hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(hotkeyDefaults),
+          contentProps: {
-          hotkeyDefinitions,
+            hotkeyDefaults: hotkeysManager.getValidHotkeyDefinitions(
-          onCancel: hide,
+              hotkeyDefaults
-          onSubmit: ({ hotkeyDefinitions }) => {
+            ),
-            hotkeysManager.setHotkeys(hotkeyDefinitions);
+            hotkeyDefinitions,
-            hide();
+            onCancel: hide,
+            onSubmit: ({ hotkeyDefinitions }) => {
+              hotkeysManager.setHotkeys(hotkeyDefinitions);
+              hide();
+            },
+            onReset: () => hotkeysManager.restoreDefaultBindings(),
           },
-          onReset: () => hotkeysManager.restoreDefaultBindings()
+        }),
-        }
-      })
     },
   ];
 
@@ -378,7 +403,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
     >
       <Header isSticky menuOptions={menuOptions} isReturnEnabled={false} />
       <StudyListFilter
-        numOfStudies={numOfStudies}
+        numOfStudies={pageNumber * resultsPerPage > 100 ? 101 : numOfStudies}
         filtersMeta={filtersMeta}
         filterValues={{ ...filterValues, ...defaultSortValues }}
         onChange={setFilterValues}
@@ -388,7 +413,7 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
       {hasStudies ? (
         <>
           <StudyListTable
-            tableDataSource={tableDataSource}
+            tableDataSource={tableDataSource.slice(offset, offsetAndTake)}
             numOfStudies={numOfStudies}
             filtersMeta={filtersMeta}
           />
@@ -400,10 +425,10 @@ function WorkList({ history, data: studies, dataTotal: studiesTotal, isLoadingDa
           />
         </>
       ) : (
-          <div className="flex flex-col items-center justify-center pt-48">
+        <div className="flex flex-col items-center justify-center pt-48">
-            <EmptyStudies isLoading={isLoadingData} />
+          <EmptyStudies isLoading={isLoadingData} />
-          </div>
+        </div>
-        )}
+      )}
     </div>
   );
 }