feat: Multiple fixes and implementation changes to react-cornerstone-viewport

* Update props for new react-cornerstone-viewport implementation

* Create an preRegistration hook for the cornerstone extension to setup cornerstone tools (takes configuration)

* Isolate measurements panel logic

* reorder extension registration

* remove unused setupTools

* Restore CINE connection

* fix stack prefetcher toggling

* Cleanup OHIFCornerstoneViewport props

* updated yarn lock

* bust yarn.lock to get updated react-cornerstone-viewport

* fix review comment; us isActive to better show it's influence on prefetch

* refactor: remove pass through method

* review performance optimization

* review; comment out unused variable

* shift tool under correct comment

* Use alternative csTools config, if provided

* Note regarding config options

platform/viewer/src/App.js

@@ -15,7 +15,6 @@ import {
 } from './utils/index.js';
 
 import { I18nextProvider } from 'react-i18next';
-import initCornerstoneTools from './initCornerstoneTools.js';
 
 // ~~ EXTENSIONS
 import { GenericViewerCommands, MeasurementsPanel } from './appExtensions';
@@ -27,7 +26,6 @@ import { Provider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { getActiveContexts } from './store/layout/selectors.js';
 import i18n from '@ohif/i18n';
-import setupTools from './setupTools.js';
 import store from './store';
 
 // Contexts
@@ -36,11 +34,6 @@ import UserManagerContext from './context/UserManagerContext';
 import AppContext from './context/AppContext';
 
 // ~~~~ APP SETUP
-initCornerstoneTools({
-  globalToolSyncEnabled: true,
-  showSVGCursors: true,
-});
-
 const commandsManagerConfig = {
   getAppState: () => store.getState(),
   getActiveContexts: () => getActiveContexts(store.getState()),
@@ -49,9 +42,6 @@ const commandsManagerConfig = {
 const commandsManager = new CommandsManager(commandsManagerConfig);
 const hotkeysManager = new HotkeysManager(commandsManager);
 const extensionManager = new ExtensionManager({ commandsManager });
-
-// CornerstoneTools and labeling/measurements?
-setupTools(store);
 // ~~~~ END APP SETUP
 
 // TODO[react] Use a provider when the whole tree is React
@@ -175,8 +165,9 @@ class App extends Component {
 function _initExtensions(extensions, hotkeys) {
   const defaultExtensions = [
     GenericViewerCommands,
-    MeasurementsPanel,
     OHIFCornerstoneExtension,
+    // WARNING: MUST BE REGISTERED _AFTER_ OHIFCORNERSTONEEXTENSION
+    MeasurementsPanel,
   ];
   const mergedExtensions = defaultExtensions.concat(extensions);
   extensionManager.registerExtensions(mergedExtensions);

platform/viewer/src/appExtensions/MeasurementsPanel/ConnectedMeasurementTable.js

@@ -6,7 +6,7 @@ import cornerstone from 'cornerstone-core';
 
 //
 import jumpToRowItem from './jumpToRowItem.js';
-import getMeasurementLocationCallback from './../../lib/getMeasurementLocationCallback';
+import getMeasurementLocationCallback from './getMeasurementLocationCallback';
 
 const { setViewportSpecificData } = OHIF.redux.actions;
 const { MeasurementApi } = OHIF.measurements;

platform/viewer/src/appExtensions/MeasurementsPanel/actions.js

@@ -0,0 +1,21 @@
+const setLabellingFlowDataAction = labellingFlowData => ({
+  type: 'SET_LABELLING_FLOW_DATA',
+  labellingFlowData,
+});
+
+const resetLabellingAndContextMenuAction = state => ({
+  type: 'RESET_LABELLING_AND_CONTEXT_MENU',
+  state,
+});
+
+const setToolContextMenuDataAction = (viewportIndex, toolContextMenuData) => ({
+  type: 'SET_TOOL_CONTEXT_MENU_DATA',
+  viewportIndex,
+  toolContextMenuData,
+});
+
+export {
+  resetLabellingAndContextMenuAction,
+  setLabellingFlowDataAction,
+  setToolContextMenuDataAction,
+};

platform/viewer/src/appExtensions/MeasurementsPanel/getMeasurementLocationCallback.js

@@ -1,5 +1,5 @@
 import cornerstoneTools from 'cornerstone-tools';
-import updateTableWithNewMeasurementData from './updateTableWithNewMeasurementData';
+import updateTableWithNewMeasurementData from './updateTableWithNewMeasurementData.js';
 
 export default function getMeasurementLocationCallback(
   eventData,

platform/viewer/src/appExtensions/MeasurementsPanel/index.js

@@ -1,7 +1,15 @@
 import ConnectedMeasurementTable from './ConnectedMeasurementTable.js';
+import init from './init.js';
 
 export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
   id: 'measurements-table',
+
+  preRegistration(configuration = {}) {
+    init(configuration);
+  },
   getPanelModule() {
     return {
       menuOptions: [

platform/viewer/src/appExtensions/MeasurementsPanel/init.js

@@ -0,0 +1,188 @@
+import OHIF from '@ohif/core';
+import cornerstone from 'cornerstone-core';
+import csTools from 'cornerstone-tools';
+import {
+  getToolLabellingFlowCallback,
+  getOnRightClickCallback,
+  getOnTouchPressCallback,
+  getResetLabellingAndContextMenu,
+} from './labelingFlowCallbacks.js';
+import throttle from 'lodash.throttle';
+
+// TODO: This only works because we have a hard dependency on this extension
+// We need to decouple and make stuff like this possible w/o bundling this at
+// build time
+import store from './../../store';
+
+const {
+  onAdded,
+  onRemoved,
+  onModified,
+} = OHIF.measurements.MeasurementHandlers;
+
+const MEASUREMENT_ACTION_MAP = {
+  added: onAdded,
+  removed: onRemoved,
+  modified: throttle(event => {
+    return onModified(event);
+  }, 300),
+};
+
+/**
+ *
+ *
+ * @export
+ * @param {*} configuration
+ */
+export default function init(configuration) {
+  // If these tools were already added by a different extension, we want to replace
+  // them with the same tools that have an alternative configuration. By passing in
+  // our custom `getMeasurementLocationCallback`, we can...
+  const toolLabellingFlowCallback = getToolLabellingFlowCallback(store);
+
+  // Removes all tools from all enabled elements w/ provided name
+  // Not commonly used API, so :eyes: for unknown side-effects
+  csTools.removeTool('Bidirectional');
+  csTools.removeTool('Length');
+  csTools.removeTool('Angle');
+  csTools.removeTool('FreehandRoi');
+  csTools.removeTool('EllipticalRoi');
+  csTools.removeTool('CircleRoi');
+  csTools.removeTool('RectangleRoi');
+  csTools.removeTool('ArrowAnnotate');
+
+  // Re-add each tool w/ our custom configuration
+  csTools.addTool(csTools.BidirectionalTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.LengthTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.AngleTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.FreehandRoiTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.EllipticalRoiTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.CircleRoiTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.RectangleRoiTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+  csTools.addTool(csTools.ArrowAnnotateTool, {
+    configuration: {
+      getMeasurementLocationCallback: toolLabellingFlowCallback,
+    },
+  });
+
+  // TODO: MEASUREMENT_COMPLETED (not present in initial implementation)
+  const onMeasurementsChanged = (action, event) => {
+    return MEASUREMENT_ACTION_MAP[action](event);
+  };
+  const onMeasurementAdded = onMeasurementsChanged.bind(this, 'added');
+  const onMeasurementRemoved = onMeasurementsChanged.bind(this, 'removed');
+  const onMeasurementModified = onMeasurementsChanged.bind(this, 'modified');
+  const onLabelmapModified = onMeasurementsChanged.bind(
+    this,
+    'labelmapModified'
+  );
+  //
+  const onRightClick = getOnRightClickCallback(store);
+  const onTouchPress = getOnTouchPressCallback(store);
+  const onNewImage = getResetLabellingAndContextMenu(store);
+  const onMouseClick = getResetLabellingAndContextMenu(store);
+  const onTouchStart = getResetLabellingAndContextMenu(store);
+
+  // Because click gives us the native "mouse up", buttons will always be `0`
+  // Need to fallback to event.which;
+  const handleClick = cornerstoneMouseClickEvent => {
+    const mouseUpEvent = cornerstoneMouseClickEvent.detail.event;
+    const isRightClick = mouseUpEvent.which === 3;
+
+    if (isRightClick) {
+      onRightClick(cornerstoneMouseClickEvent);
+    } else {
+      onMouseClick(cornerstoneMouseClickEvent);
+    }
+  };
+
+  function elementEnabledHandler(evt) {
+    const element = evt.detail.element;
+
+    element.addEventListener(
+      csTools.EVENTS.MEASUREMENT_ADDED,
+      onMeasurementAdded
+    );
+    element.addEventListener(
+      csTools.EVENTS.MEASUREMENT_REMOVED,
+      onMeasurementRemoved
+    );
+    element.addEventListener(
+      csTools.EVENTS.MEASUREMENT_MODIFIED,
+      onMeasurementModified
+    );
+    element.addEventListener(
+      csTools.EVENTS.LABELMAP_MODIFIED,
+      onLabelmapModified
+    );
+    //
+    element.addEventListener(csTools.EVENTS.TOUCH_PRESS, onTouchPress);
+    element.addEventListener(csTools.EVENTS.MOUSE_CLICK, handleClick);
+    element.addEventListener(csTools.EVENTS.TOUCH_START, onTouchStart);
+    // TODO: This makes scrolling painfully slow
+    // element.addEventListener(cornerstone.EVENTS.NEW_IMAGE, onNewImage);
+  }
+
+  function elementDisabledHandler(evt) {
+    const element = evt.detail.element;
+
+    element.removeEventListener(
+      csTools.EVENTS.MEASUREMENT_ADDED,
+      onMeasurementAdded
+    );
+    element.removeEventListener(
+      csTools.EVENTS.MEASUREMENT_REMOVED,
+      onMeasurementRemoved
+    );
+    element.removeEventListener(
+      csTools.EVENTS.MEASUREMENT_MODIFIED,
+      onMeasurementModified
+    );
+    element.removeEventListener(
+      csTools.EVENTS.LABELMAP_MODIFIED,
+      onLabelmapModified
+    );
+    //
+    element.removeEventListener(csTools.EVENTS.TOUCH_PRESS, onTouchPress);
+    element.removeEventListener(csTools.EVENTS.MOUSE_CLICK, handleClick);
+    element.removeEventListener(csTools.EVENTS.TOUCH_START, onTouchStart);
+    // element.removeEventListener(cornerstone.EVENTS.NEW_IMAGE, onNewImage);
+  }
+
+  cornerstone.events.addEventListener(
+    cornerstone.EVENTS.ELEMENT_ENABLED,
+    elementEnabledHandler
+  );
+  cornerstone.events.addEventListener(
+    cornerstone.EVENTS.ELEMENT_DISABLED,
+    elementDisabledHandler
+  );
+}

platform/viewer/src/appExtensions/MeasurementsPanel/labelingFlowCallbacks.js

@@ -0,0 +1,144 @@
+import {
+  resetLabellingAndContextMenuAction,
+  setToolContextMenuDataAction,
+  setLabellingFlowDataAction,
+} from './actions.js';
+import updateTableWithNewMeasurementData from './updateTableWithNewMeasurementData.js';
+
+const VIEWPORT_INDEX = 0;
+
+function getOnRightClickCallback(store) {
+  const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
+    store.dispatch(resetLabellingAndContextMenuAction());
+    store.dispatch(
+      setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
+    );
+  };
+
+  const getOnCloseCallback = viewportIndex => {
+    return function onClose() {
+      const toolContextMenuData = {
+        visible: false,
+      };
+
+      store.dispatch(
+        setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
+      );
+    };
+  };
+
+  return function onRightClick(event) {
+    const eventData = event.detail;
+    const viewportIndex = VIEWPORT_INDEX; // parseInt(eventData.element.dataset.viewportIndex, 10);
+
+    const toolContextMenuData = {
+      eventData,
+      isTouchEvent: false,
+      onClose: getOnCloseCallback(viewportIndex),
+    };
+
+    // setToolContextMenuData(viewportIndex, toolContextMenuData);
+    setToolContextMenuData(0, toolContextMenuData);
+  };
+}
+
+function getOnTouchPressCallback(store) {
+  const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
+    store.dispatch(resetLabellingAndContextMenuAction());
+    store.dispatch(
+      setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
+    );
+  };
+
+  const getOnCloseCallback = viewportIndex => {
+    return function onClose() {
+      const toolContextMenuData = {
+        visible: false,
+      };
+
+      store.dispatch(
+        setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
+      );
+    };
+  };
+
+  return function onTouchPress(event) {
+    const eventData = event.detail;
+    const viewportIndex = parseInt(eventData.element.dataset.viewportIndex, 10);
+
+    const toolContextMenuData = {
+      eventData,
+      isTouchEvent: true,
+      onClose: getOnCloseCallback(viewportIndex),
+    };
+
+    setToolContextMenuData(viewportIndex, toolContextMenuData);
+  };
+}
+
+function getResetLabellingAndContextMenu(store) {
+  return function resetLabellingAndContextMenu() {
+    store.dispatch(resetLabellingAndContextMenuAction());
+  };
+}
+
+/**
+ *
+ *
+ * @param {*} store
+ * @returns
+ */
+function getToolLabellingFlowCallback(store) {
+  const setLabellingFlowData = labellingFlowData => {
+    store.dispatch(setLabellingFlowDataAction(labellingFlowData));
+  };
+
+  return function toolLabellingFlowCallback(
+    measurementData,
+    eventData,
+    doneCallback,
+    options = {}
+  ) {
+    const updateLabelling = ({ location, response, description }) => {
+      // Update the measurement data with the labelling parameters
+
+      if (location) {
+        measurementData.location = location;
+      }
+      if (description) {
+        measurementData.description = description;
+      }
+      if (response) {
+        measurementData.response = response;
+      }
+
+      updateTableWithNewMeasurementData(measurementData);
+    };
+
+    const labellingDoneCallback = () => {
+      setLabellingFlowData({ visible: false });
+    };
+
+    const labellingFlowData = {
+      visible: true,
+      eventData,
+      measurementData,
+      skipAddLabelButton: options.skipAddLabelButton,
+      editLocation: options.editLocation,
+      editDescription: options.editDescription,
+      editResponse: options.editResponse,
+      editDescriptionOnDialog: options.editDescriptionOnDialog,
+      labellingDoneCallback,
+      updateLabelling,
+    };
+
+    setLabellingFlowData(labellingFlowData);
+  };
+}
+
+export {
+  getToolLabellingFlowCallback,
+  getOnRightClickCallback,
+  getOnTouchPressCallback,
+  getResetLabellingAndContextMenu,
+};

platform/viewer/src/appExtensions/MeasurementsPanel/updateTableWithNewMeasurementData.js

@@ -1,11 +1,11 @@
-import OHIF from "@ohif/core";
-import cornerstone from "cornerstone-core";
+import OHIF from '@ohif/core';
+import cornerstone from 'cornerstone-core';
 
 export default function updateTableWithNewMeasurementData({
   toolType,
   measurementNumber,
   location,
-  description
+  description,
 }) {
   // Update all measurements by measurement number
   const measurementApi = OHIF.measurements.MeasurementApi.Instance;

platform/viewer/src/connectedComponents/ConnectedToolContextMenu.js

@@ -10,19 +10,9 @@ const mapStateToProps = (state, ownProps) => {
 
   const { viewportIndex } = ownProps;
   const toolContextMenuData = state.ui.contextMenu[viewportIndex];
-  let availableTools;
-
-  if (
-    state.extensions &&
-    state.extensions.cornerstone &&
-    state.extensions.cornerstone.availableTools
-  ) {
-    availableTools = state.extensions.cornerstone.availableTools;
-  }
 
   return {
     ...toolContextMenuData,
-    availableTools,
   };
 };
 

platform/viewer/src/connectedComponents/ToolContextMenu.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import cornerstone from 'cornerstone-core';
 import cornerstoneTools from 'cornerstone-tools';
-import getMeasurementLocationCallback from '../lib/getMeasurementLocationCallback';
+// This whole component should live in the Measurements Extension :thinking:
+import getMeasurementLocationCallback from '../appExtensions/MeasurementsPanel/getMeasurementLocationCallback';
 
 import './ToolContextMenu.css';
 
@@ -97,12 +98,11 @@ function getNearbyToolData(element, coords, toolTypes) {
   return pointNearTool ? nearbyTool : undefined;
 }
 
-function getDropdownItems(eventData, isTouchEvent = false, availableTools) {
+function getDropdownItems(eventData, isTouchEvent = false) {
   const nearbyToolData = getNearbyToolData(
     eventData.element,
     eventData.currentPoints.canvas,
-    toolTypes,
-    availableTools
+    toolTypes
   );
 
   // Annotate tools for touch events already have a press handle to edit it, has a better UX for deleting it
@@ -148,7 +148,6 @@ class ToolContextMenu extends Component {
     isTouchEvent: PropTypes.bool.isRequired,
     eventData: PropTypes.object,
     onClose: PropTypes.func,
-    availableTools: PropTypes.array,
     visible: PropTypes.bool.isRequired,
   };
 
@@ -168,12 +167,8 @@ class ToolContextMenu extends Component {
       return null;
     }
 
-    const { isTouchEvent, eventData, availableTools } = this.props;
-    const dropdownItems = getDropdownItems(
-      eventData,
-      isTouchEvent,
-      availableTools
-    );
+    const { isTouchEvent, eventData } = this.props;
+    const dropdownItems = getDropdownItems(eventData, isTouchEvent);
 
     // Skip if there is no dropdown item
     if (!dropdownItems.length) {

platform/viewer/src/initCornerstoneTools.js

@@ -1,27 +0,0 @@
-import Hammer from 'hammerjs';
-import cornerstone from 'cornerstone-core';
-import cornerstoneMath from 'cornerstone-math';
-import cornerstoneTools from 'cornerstone-tools';
-
-export default function(configuration = {}) {
-  // For debugging
-  window.cornerstoneTools = cornerstoneTools;
-
-  cornerstoneTools.external.cornerstone = cornerstone;
-  cornerstoneTools.external.Hammer = Hammer;
-  cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
-  cornerstoneTools.init(configuration);
-
-  // Set the tool font and font size
-  // context.font = "[style] [variant] [weight] [size]/[line height] [font family]";
-  const fontFamily =
-    'Roboto, OpenSans, HelveticaNeue-Light, Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif';
-  cornerstoneTools.textStyle.setFont(`16px ${fontFamily}`);
-
-  // Tool styles/colors
-  cornerstoneTools.toolStyle.setToolWidth(2);
-  cornerstoneTools.toolColors.setToolColor('rgb(255, 255, 0)');
-  cornerstoneTools.toolColors.setActiveColor('rgb(0, 255, 0)');
-
-  cornerstoneTools.store.state.touchProximity = 40;
-}

platform/viewer/src/setupTools.js

@@ -1,246 +0,0 @@
-import OHIF from '@ohif/core';
-import updateTableWithNewMeasurementData from './lib/updateTableWithNewMeasurementData';
-
-function getToolLabellingFlowCallback(store) {
-  const setLabellingFlowDataAction = labellingFlowData => ({
-    type: 'SET_LABELLING_FLOW_DATA',
-    labellingFlowData,
-  });
-
-  const setLabellingFlowData = labellingFlowData => {
-    store.dispatch(setLabellingFlowDataAction(labellingFlowData));
-  };
-
-  return function toolLabellingFlowCallback(
-    measurementData,
-    eventData,
-    doneCallback,
-    options = {}
-  ) {
-    const updateLabelling = ({ location, response, description }) => {
-      // Update the measurement data with the labelling parameters
-
-      if (location) {
-        measurementData.location = location;
-      }
-      if (description) {
-        measurementData.description = description;
-      }
-      if (response) {
-        measurementData.response = response;
-      }
-
-      updateTableWithNewMeasurementData(measurementData);
-    };
-
-    const labellingDoneCallback = () => {
-      setLabellingFlowData({ visible: false });
-    };
-
-    const labellingFlowData = {
-      visible: true,
-      eventData,
-      measurementData,
-      skipAddLabelButton: options.skipAddLabelButton,
-      editLocation: options.editLocation,
-      editDescription: options.editDescription,
-      editResponse: options.editResponse,
-      editDescriptionOnDialog: options.editDescriptionOnDialog,
-      labellingDoneCallback,
-      updateLabelling,
-    };
-
-    setLabellingFlowData(labellingFlowData);
-  };
-}
-
-const resetLabellingAndContextMenuAction = state => ({
-  type: 'RESET_LABELLING_AND_CONTEXT_MENU',
-  state,
-});
-
-const setToolContextMenuDataAction = (viewportIndex, toolContextMenuData) => ({
-  type: 'SET_TOOL_CONTEXT_MENU_DATA',
-  viewportIndex,
-  toolContextMenuData,
-});
-
-function getOnRightClickCallback(store) {
-  const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
-    store.dispatch(resetLabellingAndContextMenuAction());
-    store.dispatch(
-      setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
-    );
-  };
-
-  const getOnCloseCallback = viewportIndex => {
-    return function onClose() {
-      const toolContextMenuData = {
-        visible: false,
-      };
-
-      store.dispatch(
-        setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
-      );
-    };
-  };
-
-  return function onRightClick(event) {
-    const eventData = event.detail;
-    const viewportIndex = parseInt(eventData.element.dataset.viewportIndex, 10);
-
-    const toolContextMenuData = {
-      eventData,
-      isTouchEvent: false,
-      onClose: getOnCloseCallback(viewportIndex),
-    };
-
-    setToolContextMenuData(viewportIndex, toolContextMenuData);
-  };
-}
-
-function getOnTouchPressCallback(store) {
-  const setToolContextMenuData = (viewportIndex, toolContextMenuData) => {
-    store.dispatch(resetLabellingAndContextMenuAction());
-    store.dispatch(
-      setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
-    );
-  };
-
-  const getOnCloseCallback = viewportIndex => {
-    return function onClose() {
-      const toolContextMenuData = {
-        visible: false,
-      };
-
-      store.dispatch(
-        setToolContextMenuDataAction(viewportIndex, toolContextMenuData)
-      );
-    };
-  };
-
-  return function onTouchPress(event) {
-    const eventData = event.detail;
-    const viewportIndex = parseInt(eventData.element.dataset.viewportIndex, 10);
-
-    const toolContextMenuData = {
-      eventData,
-      isTouchEvent: true,
-      onClose: getOnCloseCallback(viewportIndex),
-    };
-
-    setToolContextMenuData(viewportIndex, toolContextMenuData);
-  };
-}
-
-function getResetLabellingAndContextMenu(store) {
-  return function resetLabellingAndContextMenu() {
-    store.dispatch(resetLabellingAndContextMenuAction());
-  };
-}
-
-export default function setupTools(store) {
-  const toolLabellingFlowCallback = getToolLabellingFlowCallback(store);
-  const availableTools = [
-    { name: 'Pan', mouseButtonMasks: [1, 4] },
-    { name: 'Zoom', mouseButtonMasks: [1, 2] },
-    { name: 'Wwwc', mouseButtonMasks: [1] },
-    { name: 'Magnify' },
-    { name: 'WwwcRegion' },
-    {
-      name: 'Bidirectional',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    {
-      name: 'Length',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    {
-      name: 'Angle',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    { name: 'StackScroll', mouseButtonMasks: [1] },
-    { name: 'Brush', mouseButtonMasks: [1] },
-    {
-      name: 'FreehandRoi',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    {
-      name: 'EllipticalRoi',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    {
-      name: 'CircleRoi',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    {
-      name: 'RectangleRoi',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-      mouseButtonMasks: [1],
-    },
-    { name: 'DragProbe' },
-    { name: 'PanMultiTouch' },
-    { name: 'ZoomTouchPinch' },
-    { name: 'StackScrollMouseWheel' },
-    { name: 'StackScrollMultiTouch' },
-    { name: 'Eraser' },
-    {
-      name: 'ArrowAnnotate',
-      props: {
-        configuration: {
-          getMeasurementLocationCallback: toolLabellingFlowCallback,
-        },
-      },
-    },
-  ];
-
-  const onRightClick = getOnRightClickCallback(store);
-  const onTouchPress = getOnTouchPressCallback(store);
-  const onNewImage = getResetLabellingAndContextMenu(store);
-  const onMouseClick = getResetLabellingAndContextMenu(store);
-  const onTouchStart = getResetLabellingAndContextMenu(store);
-  const toolAction = OHIF.redux.actions.setExtensionData('cornerstone', {
-    availableTools,
-    onNewImage,
-    onRightClick,
-    onTouchPress,
-    onTouchStart,
-    onMouseClick,
-  });
-
-  store.dispatch(toolAction);
-}