Chore/kill yalc with fire (#629)

* init * more shifting * Move @babel dependencies up to workspace root * Begin updating dependent libraries to use sync'd webpack builds w/ watches * Commit changes before a long weekend * Split packages into platform and extensions * Consolidate how/where we specify file/module type entrypoints * Make it possible to pass in extensions as App props * Resolve viewer's modules * Target for UMD bundle * Add Webpack Stylus loader * Provide WebPack build options for microscopy, vtk, and ui * Better entrypoint for extensions * Push changes up to switch PCs * Fix ESM symlink build for Viewers * Shift docs to root * Specify additional lerna config props * Begin providing basic readme info * Rename example extension folder * Shift links to bottom of doc * First attempt at a netlify deploy preview * Attempt to fix deploy preview build * push workspace enabled to initial command; remove second yarn install; use npx to call gitbook cli commands * Try to use global gitbook-cli * Export node_modules path * More agressive with modifying PATH * Follow deploy log output advice * try again to set bin path * Try swapping bash with a new shell * Try bash -l instead of exec bash * Annd let's try again * and again * We may have figured it out johnny, boy * We need to pull cornerstone-wado-image-loader files from hoisted node_modules * Attempt to fix ticks/escapes * Change copy syntax; try running tests on viewers from root for circleci * Lower version to match circleci image * Try alternative jest-canvas-mock location and version file syntax * Run version command instead of calling node directly * Try alternative jest transform * Set path and enable workspaces * Add codecov flags * Use cpx so our copying finishes? * Get all platform unit tests to run * Run and report individually and in parallel * Try once relying on codecov yaml to split w/ flags * Add projects to split by flags * Generate separate reports * Trigger codecov after everything has finished running; these may not support flags * Use recommended flags from issue comments for codecov * Fix typo * Remove clear flag * Shift back to calling codecov from root * Generate example for codecov issue * Try fixing paths * Simplify * Try using codecov orb * Bump circleci version * Upload core and viewer * Use full string paths * Remove individual codecov calls * Fix dir * Combine files before upload * Escape anchors * tryfix syntax * Escape string literal * Combine lines to reduce path * long paths * Use home alias * Fix filename * Try to see the contents of our cat'd file * Also upload `core` * Try running with aliased folder * Fix path; split PR and Merge unit tests into separate jobs * Set default threshold * Fix typo * Changing to scoped package names * Adding note * Catch more updates * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.0 - @ohif/extension-dicom-html@0.0.4-alpha.0 - @ohif/extension-dicom-microscopy@0.0.9-alpha.0 - @ohif/extension-dicom-pdf@0.0.8-alpha.0 - @ohif/extension-vtk@0.1.4-alpha.0 - @ohif/core@0.11.1-alpha.0 - @ohif/i18n@0.2.3-alpha.0 - @ohif/ui@0.2.18-alpha.0 - @ohif/viewer@0.0.22-alpha.0 * Clean up primary readme * Support for dev and dev:* commands * Shift build command; satisfy default PWA build * Remove old scripts * Clean up UI to set webpack scripts * Tidy up project links * Clean duplicate code in UI project * Update UI project's docs * Clean up ui and i18n config * Reduce duplicate code in `@ohif/core` * Fix @ohif/ui versions * bump @ohif/core versions * Redux testkit dep * Remove unused/duplicate config files for projects/packages * ohif-core --> @ohif/core * Safer publish command * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.1 - @ohif/extension-dicom-html@0.0.4-alpha.1 - @ohif/extension-dicom-microscopy@0.0.9-alpha.1 - @ohif/extension-dicom-pdf@0.0.8-alpha.1 - @ohif/extension-vtk@0.1.4-alpha.1 - @ohif/core@0.11.1-alpha.1 - @ohif/i18n@0.2.3-alpha.1 - @ohif/ui@0.2.18-alpha.1 - @ohif/viewer@0.0.22-alpha.1 * test version bump * Add global prettier config * chore(release): publish %s [skip ci] - @ohif/viewer@0.0.22-alpha.2 * test lerna publish * Update package.jsons * Fix build scripts * catch changes * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.2 - @ohif/extension-dicom-html@0.0.4-alpha.2 - @ohif/extension-dicom-microscopy@0.0.9-alpha.2 - @ohif/extension-dicom-pdf@0.0.8-alpha.2 - @ohif/extension-vtk@0.1.4-alpha.2 - @ohif/core@0.11.1-alpha.2 - @ohif/i18n@0.2.3-alpha.2 - @ohif/ui@0.2.18-alpha.2 - @ohif/viewer@0.0.22-alpha.3 * fix eslint issues caused by eslint 6 and our react-app config * Publish with canary tag * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.3 - @ohif/extension-dicom-html@0.0.4-alpha.3 - @ohif/extension-dicom-microscopy@0.0.9-alpha.3 - @ohif/extension-dicom-pdf@0.0.8-alpha.3 - @ohif/extension-vtk@0.1.4-alpha.3 - @ohif/core@0.11.1-alpha.3 - @ohif/i18n@0.2.3-alpha.3 - @ohif/ui@0.2.18-alpha.3 - @ohif/viewer@0.0.22-alpha.4 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.4 - @ohif/extension-dicom-html@0.0.4-alpha.4 - @ohif/extension-dicom-microscopy@0.0.9-alpha.4 - @ohif/extension-dicom-pdf@0.0.8-alpha.4 - @ohif/extension-vtk@0.1.4-alpha.4 - @ohif/core@0.11.1-alpha.4 - @ohif/i18n@0.2.3-alpha.4 - @ohif/ui@0.2.18-alpha.4 - @ohif/viewer@0.0.22-alpha.5 * Simplify build * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.5 - @ohif/extension-dicom-html@0.0.4-alpha.5 - @ohif/extension-dicom-microscopy@0.0.9-alpha.5 - @ohif/extension-dicom-pdf@0.0.8-alpha.5 - @ohif/extension-vtk@0.1.4-alpha.5 - @ohif/core@0.11.1-alpha.5 - @ohif/i18n@0.2.3-alpha.5 - @ohif/ui@0.2.18-alpha.5 - @ohif/viewer@0.0.22-alpha.6 * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.6 - @ohif/extension-dicom-html@0.0.4-alpha.6 - @ohif/extension-dicom-microscopy@0.0.9-alpha.6 - @ohif/extension-dicom-pdf@0.0.8-alpha.6 - @ohif/extension-vtk@0.1.4-alpha.6 - @ohif/core@0.11.1-alpha.6 - @ohif/i18n@0.2.3-alpha.6 - @ohif/ui@0.2.18-alpha.6 - @ohif/viewer@0.0.22-alpha.7 * Split version and publish * chore(release): publish %s [skip ci] - @ohif/extension-cornerstone@0.0.39-alpha.7 - @ohif/extension-dicom-html@0.0.4-alpha.7 - @ohif/extension-dicom-microscopy@0.0.9-alpha.7 - @ohif/extension-dicom-pdf@0.0.8-alpha.7 - @ohif/extension-vtk@0.1.4-alpha.7 - @ohif/core@0.11.1-alpha.7 - @ohif/i18n@0.2.3-alpha.7 - @ohif/ui@0.2.18-alpha.7 - @ohif/viewer@0.0.22-alpha.8 * Try simplify netlify build * react-viewerbase --> @ohif/ui * add test for stylus loader * Try new way to specify publish path * Use an output folder that won't be ignored * Try move command * fiddle with paths * Dig for some information * Make sure we're in root for our commands * Remove discovery * Setup script-tag example * Fix typo * Move config folder * Update cornerstone extension to use shared/root webpack configs * capture changes * Update extension webpack configs * Don't check in docz output * Fix babel runtime resolution issue * Simplify ui build steps * Push in progress * Shift directories * Get viewer dev path to work * Fix viewer commonjs build * Fix build pwa config for viewers * Make sure our package specific command can be called from root * Update notes * Fix imports and misc. merge notes * Bump wado-image-loader version * Switch up commands to remove webworkers copy * Fix CI config * Fix more broken package references * Add react-dropzone * Persist so e2e test can use * Fix lockfile * Use cypress orb to simplify CI * Fix config * Try again * Install yarn latest for orb * Install yarn a different way * Wait on correct port * Run tests in viewer project * Fix cypress config * Make Cypress happier - use default location * Simplify e2e testing * Capture UI changes since fork * Catch core up * Grab latest deps after merge * Fix broken import * Make sure cornerstone-wado-image-loader resolves to 3+ * Note regarding orbs * Fix refresh on 404 routes * Fix odd error for cornerstone-wado-image-loader * Different target for UMD * Simplify dev script * Try to get fancy with netlify output * Let's do it again * Try to fix measurementTools issue * See if we can get our lerna magic to work on merge to monorepo branch
2019-08-13 15:36:46 -04:00
1 parent cac911f08e
commit 08ff214ea6
@@ -0,0 +1,99 @@
+import CornerstoneViewport from 'react-cornerstone-viewport';
+import OHIF from '@ohif/core';
+import { connect } from 'react-redux';
+import throttle from 'lodash.throttle';
+
+const { setViewportActive, setViewportSpecificData } = OHIF.redux.actions;
+const {
+  onAdded,
+  onRemoved,
+  onModified,
+} = OHIF.measurements.MeasurementHandlers;
+
+// TODO: Transition to enums for the action names so that we can ensure they stay up to date
+// everywhere they're used.
+const MEASUREMENT_ACTION_MAP = {
+  added: onAdded,
+  removed: onRemoved,
+  modified: throttle(event => {
+    return onModified(event);
+  }, 300),
+};
+
+const mapStateToProps = (state, ownProps) => {
+  let dataFromStore;
+
+  if (state.extensions && state.extensions.cornerstone) {
+    dataFromStore = state.extensions.cornerstone;
+  }
+
+  // TODO: This should be extension configuration
+  // ...dataFromStore -->
+  // availableTools,
+  // onNewImage,
+  // onRightClick,
+  // onTouchPress,
+  // onTouchStart,
+  // onMouseClick,
+
+  // If this is the active viewport, enable prefetching.
+  const { viewportIndex } = ownProps; //.viewportData;
+  const isActive = viewportIndex === state.viewports.activeViewportIndex;
+  const viewportSpecificData =
+    state.viewports.viewportSpecificData[viewportIndex] || {};
+
+  return {
+    layout: state.viewports.layout,
+    isActive,
+    // TODO: Need a cleaner and more versatile way.
+    // Currently justing using escape hatch + commands
+    // activeTool: activeButton && activeButton.command,
+    ...dataFromStore,
+    enableStackPrefetch: isActive,
+    //stack: viewportSpecificData.stack,
+    cineToolData: viewportSpecificData.cine,
+    viewport: viewportSpecificData.viewport,
+  };
+};
+
+const mapDispatchToProps = (dispatch, ownProps) => {
+  const { viewportIndex } = ownProps;
+
+  return {
+    setViewportActive: () => {
+      dispatch(setViewportActive(viewportIndex));
+    },
+
+    setViewportSpecificData: data => {
+      dispatch(setViewportSpecificData(viewportIndex, data));
+    },
+
+    /**
+     * Our component "enables" the underlying dom element on "componentDidMount"
+     * It listens for that event, and then emits the enabledElement. We can grab
+     * a reference to it here, to make playing with cornerstone's native methods
+     * easier.
+     */
+    onElementEnabled: event => {
+      const enabledElement = event.detail.element;
+      dispatch(
+        setViewportSpecificData(viewportIndex, {
+          // TODO: Hack to make sure our plugin info is available from the outset
+          plugin: 'cornerstone',
+          dom: enabledElement,
+        })
+      );
+    },
+
+    onMeasurementsChanged: (event, action) => {
+      return MEASUREMENT_ACTION_MAP[action](event);
+    },
+  };
+};
+
+const ConnectedCornerstoneViewport = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(CornerstoneViewport);
+
+export default ConnectedCornerstoneViewport;
@@ -0,0 +1,277 @@
+import React, { Component } from "react";
+
+import ConnectedCornerstoneViewport from "./ConnectedCornerstoneViewport";
+import OHIF from "@ohif/core";
+import PropTypes from "prop-types";
+import cornerstone from "cornerstone-core";
+import handleSegmentationStorage from "./handleSegmentationStorage.js";
+
+const { StackManager } = OHIF.utils;
+
+// Metadata configuration
+const metadataProvider = new OHIF.cornerstone.MetadataProvider();
+
+cornerstone.metaData.addProvider(
+  metadataProvider.provider.bind(metadataProvider)
+);
+
+StackManager.setMetadataProvider(metadataProvider);
+
+const SOP_CLASSES = {
+  SEGMENTATION_STORAGE: "1.2.840.10008.5.1.4.1.1.66.4"
+};
+
+const specialCaseHandlers = {};
+specialCaseHandlers[
+  SOP_CLASSES.SEGMENTATION_STORAGE
+] = handleSegmentationStorage;
+
+class OHIFCornerstoneViewport extends Component {
+  state = {
+    viewportData: null
+  };
+
+  static defaultProps = {
+    customProps: {}
+  };
+
+  static propTypes = {
+    studies: PropTypes.object,
+    displaySet: PropTypes.object,
+    viewportIndex: PropTypes.number,
+    children: PropTypes.node,
+    customProps: PropTypes.object
+  };
+
+  static id = "OHIFCornerstoneViewport";
+
+  static init() {
+    console.log("OHIFCornerstoneViewport init()");
+  }
+
+  static destroy() {
+    console.log("OHIFCornerstoneViewport destroy()");
+    StackManager.clearStacks();
+  }
+
+  /**
+   * Obtain the CornerstoneTools Stack for the specified display set.
+   *
+   * @param {Object[]} studies
+   * @param {String} studyInstanceUid
+   * @param {String} displaySetInstanceUid
+   * @param {String} [sopInstanceUid]
+   * @param {Number} [frameIndex=1]
+   * @return {Object} CornerstoneTools Stack
+   */
+  static getCornerstoneStack(
+    studies,
+    studyInstanceUid,
+    displaySetInstanceUid,
+    sopInstanceUid,
+    frameIndex = 0
+  ) {
+    if (!studies || !studies.length) {
+      throw new Error("Studies not provided.");
+    }
+
+    if (!studyInstanceUid) {
+      throw new Error("StudyInstanceUID not provided.");
+    }
+
+    if (!displaySetInstanceUid) {
+      throw new Error("StudyInstanceUID not provided.");
+    }
+
+    // Create shortcut to displaySet
+    const study = studies.find(
+      study => study.studyInstanceUid === studyInstanceUid
+    );
+
+    if (!study) {
+      throw new Error("Study not found.");
+    }
+
+    const displaySet = study.displaySets.find(set => {
+      return set.displaySetInstanceUid === displaySetInstanceUid;
+    });
+
+    if (!displaySet) {
+      throw new Error("Display Set not found.");
+    }
+
+    // Get stack from Stack Manager
+    const storedStack = StackManager.findOrCreateStack(study, displaySet);
+
+    // Clone the stack here so we don't mutate it
+    const stack = Object.assign({}, storedStack);
+    stack.currentImageIdIndex = frameIndex;
+
+    if (sopInstanceUid) {
+      const index = stack.imageIds.findIndex(imageId => {
+        const sopCommonModule = cornerstone.metaData.get(
+          "sopCommonModule",
+          imageId
+        );
+        if (!sopCommonModule) {
+          return;
+        }
+
+        return sopCommonModule.sopInstanceUID === sopInstanceUid;
+      });
+
+      if (index > -1) {
+        stack.currentImageIdIndex = index;
+      } else {
+        console.warn(
+          "SOPInstanceUID provided was not found in specified DisplaySet"
+        );
+      }
+    }
+
+    return stack;
+  }
+
+  static getViewportData = (
+    studies,
+    studyInstanceUid,
+    displaySetInstanceUid,
+    sopInstanceUid,
+    frameIndex
+  ) => {
+    return OHIFCornerstoneViewport.getCornerstoneStack(
+      studies,
+      studyInstanceUid,
+      displaySetInstanceUid,
+      sopInstanceUid,
+      frameIndex
+    );
+  };
+
+  getViewportData = async (
+    studies,
+    studyInstanceUid,
+    displaySetInstanceUid,
+    sopClassUid,
+    sopInstanceUid,
+    frameIndex
+  ) => {
+    let viewportData;
+
+    switch (sopClassUid) {
+      case SOP_CLASSES.SEGMENTATION_STORAGE:
+        const specialCaseHandler =
+          specialCaseHandlers[SOP_CLASSES.SEGMENTATION_STORAGE];
+
+        viewportData = await specialCaseHandler(
+          studies,
+          studyInstanceUid,
+          displaySetInstanceUid,
+          sopInstanceUid,
+          frameIndex
+        );
+        break;
+      default:
+        const stack = OHIFCornerstoneViewport.getViewportData(
+          studies,
+          studyInstanceUid,
+          displaySetInstanceUid,
+          sopInstanceUid,
+          frameIndex
+        );
+
+        viewportData = {
+          studyInstanceUid,
+          displaySetInstanceUid,
+          stack
+        };
+
+        break;
+    }
+
+    return viewportData;
+  };
+
+  setStateFromProps() {
+    const { studies, displaySet } = this.props.viewportData;
+    const {
+      studyInstanceUid,
+      displaySetInstanceUid,
+      sopClassUids,
+      sopInstanceUid,
+      frameIndex
+    } = displaySet;
+
+    if (!studyInstanceUid || !displaySetInstanceUid) {
+      return;
+    }
+
+    if (sopClassUids && sopClassUids.length > 1) {
+      console.warn(
+        "More than one SOPClassUid in the same series is not yet supported."
+      );
+    }
+
+    const sopClassUid = sopClassUids && sopClassUids[0];
+
+    this.getViewportData(
+      studies,
+      studyInstanceUid,
+      displaySetInstanceUid,
+      sopClassUid,
+      sopInstanceUid,
+      frameIndex
+    ).then(viewportData => {
+      this.setState({
+        viewportData
+      });
+    });
+  }
+
+  componentDidMount() {
+    this.setStateFromProps();
+  }
+
+  componentDidUpdate(prevProps) {
+    const { studies, displaySet } = this.props.viewportData;
+    const prevDisplaySet = prevProps.viewportData.displaySet;
+
+    if (
+      displaySet.displaySetInstanceUid !==
+        prevDisplaySet.displaySetInstanceUid ||
+      displaySet.sopInstanceUid !== prevDisplaySet.sopInstanceUid ||
+      displaySet.frameIndex !== prevDisplaySet.frameIndex
+    ) {
+      this.setStateFromProps();
+    }
+  }
+
+  render() {
+    let childrenWithProps = null;
+
+    // TODO: Does it make more sense to use Context?
+    if (this.props.children && this.props.children.length) {
+      childrenWithProps = this.props.children.map((child, index) => {
+        return React.cloneElement(child, {
+          viewportIndex: this.props.viewportIndex,
+          key: index
+        });
+      });
+    }
+
+    return (
+      <>
+        {this.state.viewportData && (
+          <ConnectedCornerstoneViewport
+            viewportData={this.state.viewportData}
+            viewportIndex={this.props.viewportIndex}
+            {...this.props.customProps}
+          />
+        )}
+        {childrenWithProps}
+      </>
+    );
+  }
+}
+
+export default OHIFCornerstoneViewport;
@@ -0,0 +1,261 @@
+import cornerstone from 'cornerstone-core';
+import cornerstoneTools from 'cornerstone-tools';
+import OHIF from '@ohif/core';
+const scroll = cornerstoneTools.import('util/scroll');
+
+const actions = {
+  rotateViewport: ({ viewports, rotation }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    if (enabledElement) {
+      let viewport = cornerstone.getViewport(enabledElement);
+      viewport.rotation += rotation;
+      cornerstone.setViewport(enabledElement, viewport);
+    }
+  },
+  flipViewportHorizontal: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    if (enabledElement) {
+      let viewport = cornerstone.getViewport(enabledElement);
+      viewport.hflip = !viewport.hflip;
+      cornerstone.setViewport(enabledElement, viewport);
+    }
+  },
+  flipViewportVertical: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    if (enabledElement) {
+      let viewport = cornerstone.getViewport(enabledElement);
+      viewport.vflip = !viewport.vflip;
+      cornerstone.setViewport(enabledElement, viewport);
+    }
+  },
+  scaleViewport: ({ viewports, direction }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+    const step = direction * 0.15;
+
+    if (enabledElement) {
+      if (step) {
+        let viewport = cornerstone.getViewport(enabledElement);
+        viewport.scale += step;
+        cornerstone.setViewport(enabledElement, viewport);
+      } else {
+        cornerstone.fitToWindow(enabledElement);
+      }
+    }
+  },
+  resetViewport: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    if (enabledElement) {
+      cornerstone.reset(enabledElement);
+    }
+  },
+  invertViewport: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    if (enabledElement) {
+      let viewport = cornerstone.getViewport(enabledElement);
+      viewport.invert = !viewport.invert;
+      cornerstone.setViewport(enabledElement, viewport);
+    }
+  },
+  // TODO: this is receiving `evt` from `ToolbarRow`. We could use it to have
+  //       better mouseButtonMask sets.
+  setToolActive: ({ toolName }) => {
+    if (!toolName) {
+      console.warn('No toolname provided to setToolActive command');
+    }
+    cornerstoneTools.setToolActive(toolName, { mouseButtonMask: 1 });
+  },
+  updateViewportDisplaySet: ({ direction }) => {
+    // TODO
+    console.warn('updateDisplaySet: ', direction);
+  },
+  clearAnnotations: ({ viewports }) => {
+    const element = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+    if (!element) {
+      return;
+    }
+
+    const enabledElement = cornerstone.getEnabledElement(element);
+    if (!enabledElement || !enabledElement.image) {
+      return;
+    }
+
+    const {
+      toolState,
+    } = cornerstoneTools.globalImageIdSpecificToolStateManager;
+    if (
+      !toolState ||
+      toolState.hasOwnProperty(enabledElement.image.imageId) === false
+    ) {
+      return;
+    }
+
+    const imageIdToolState = toolState[enabledElement.image.imageId];
+
+    const measurementsToRemove = [];
+
+    Object.keys(imageIdToolState).forEach(toolType => {
+      const { data } = imageIdToolState[toolType];
+
+      data.forEach(measurementData => {
+        const { _id, lesionNamingNumber, measurementNumber } = measurementData;
+        if (!_id) {
+          return;
+        }
+
+        measurementsToRemove.push({
+          toolType,
+          _id,
+          lesionNamingNumber,
+          measurementNumber,
+        });
+      });
+    });
+
+    measurementsToRemove.forEach(measurementData => {
+      OHIF.measurements.MeasurementHandlers.onRemoved({
+        detail: {
+          toolType: measurementData.toolType,
+          measurementData,
+        },
+      });
+    });
+  },
+  nextImage: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    scroll(enabledElement, 1);
+  },
+  previousImage: ({ viewports }) => {
+    const enabledElement = _getActiveViewportEnabledElement(
+      viewports.viewportSpecificData,
+      viewports.activeViewportIndex
+    );
+
+    scroll(enabledElement, -1);
+  },
+};
+
+const definitions = {
+  rotateViewportCW: {
+    commandFn: actions.rotateViewport,
+    storeContexts: ['viewports'],
+    options: { rotation: 90 },
+  },
+  rotateViewportCCW: {
+    commandFn: actions.rotateViewport,
+    storeContexts: ['viewports'],
+    options: { rotation: -90 },
+  },
+  invertViewport: {
+    commandFn: actions.invertViewport,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  flipViewportVertical: {
+    commandFn: actions.flipViewportVertical,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  flipViewportHorizontal: {
+    commandFn: actions.flipViewportHorizontal,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  scaleUpViewport: {
+    commandFn: actions.scaleViewport,
+    storeContexts: ['viewports'],
+    options: { direction: 1 },
+  },
+  scaleDownViewport: {
+    commandFn: actions.scaleViewport,
+    storeContexts: ['viewports'],
+    options: { direction: -1 },
+  },
+  fitViewportToWindow: {
+    commandFn: actions.scaleViewport,
+    storeContexts: ['viewports'],
+    options: { direction: 0 },
+  },
+  resetViewport: {
+    commandFn: actions.resetViewport,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  clearAnnotations: {
+    commandFn: actions.clearAnnotations,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  nextImage: {
+    commandFn: actions.nextImage,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  previousImage: {
+    commandFn: actions.previousImage,
+    storeContexts: ['viewports'],
+    options: {},
+  },
+  // TODO: First/Last image
+  // Next/Previous series/DisplaySet
+  nextViewportDisplaySet: {
+    commandFn: actions.updateViewportDisplaySet,
+    storeContexts: [],
+    options: { direction: 1 },
+  },
+  previousViewportDisplaySet: {
+    commandFn: actions.updateViewportDisplaySet,
+    storeContexts: [],
+    options: { direction: -1 },
+  },
+  // TOOLS
+  setToolActive: {
+    commandFn: actions.setToolActive,
+    storeContexts: [],
+    options: {},
+  },
+};
+
+/**
+ * Grabs `dom` reference for the enabledElement of
+ * the active viewport
+ */
+function _getActiveViewportEnabledElement(viewports, activeIndex) {
+  const activeViewport = viewports[activeIndex] || {};
+  return activeViewport.dom;
+}
+
+export default {
+  actions,
+  definitions,
+  defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE',
+};
@@ -0,0 +1,130 @@
+import * as dcmjs from "dcmjs";
+
+import OHIF from "@ohif/core";
+import cornerstone from "cornerstone-core";
+import cornerstoneTools from "cornerstone-tools";
+
+const { StackManager } = OHIF.utils;
+
+function getDisplaySet(studies, studyInstanceUid, displaySetInstanceUid) {
+  const study = studies.find(
+    study => study.studyInstanceUid === studyInstanceUid
+  );
+
+  const displaySet = study.displaySets.find(set => {
+    return set.displaySetInstanceUid === displaySetInstanceUid;
+  });
+
+  return displaySet;
+}
+
+function getDisplaySetsBySeries(studies, studyInstanceUid, seriesInstanceUid) {
+  const study = studies.find(
+    study => study.studyInstanceUid === studyInstanceUid
+  );
+
+  return study.displaySets.filter(set => {
+    return set.seriesInstanceUid === seriesInstanceUid;
+  });
+}
+
+function parseSeg(arrayBuffer, imageIds) {
+  return dcmjs.adapters.Cornerstone.Segmentation.generateToolState(
+    imageIds,
+    arrayBuffer,
+    cornerstone.metaData
+  );
+}
+
+function addSegMetadataToCornerstoneToolState(
+  segMetadata,
+  toolState,
+  displaySetInstanceUid
+) {
+  cornerstoneTools.globalImageIdSpecificToolStateManager.restoreToolState(
+    toolState
+  );
+
+  const brushModule = cornerstoneTools.store.modules.brush;
+
+  for (let i = 0; i < segMetadata.length; i++) {
+    brushModule.setters.metadata(displaySetInstanceUid, i, segMetadata[i]);
+  }
+}
+
+function retrieveDicomData(wadoUri) {
+  // TODO: Authorization header depends on the server. If we ever have multiple servers
+  // we will need to figure out how / when to pass this information in.
+  return fetch(wadoUri, {
+    headers: OHIF.DICOMWeb.getAuthorizationHeader()
+  }).then(response => response.arrayBuffer());
+}
+
+async function handleSegmentationStorage(
+  studies,
+  studyInstanceUid,
+  displaySetInstanceUid
+) {
+  const study = studies.find(
+    study => study.studyInstanceUid === studyInstanceUid
+  );
+  const displaySet = getDisplaySet(
+    studies,
+    studyInstanceUid,
+    displaySetInstanceUid
+  );
+  const segWadoUri = displaySet.images[0].getData().wadouri;
+  const arrayBuffer = await retrieveDicomData(segWadoUri);
+  const dicomData = dcmjs.data.DicomMessage.readFile(arrayBuffer);
+  const dataset = dcmjs.data.DicomMetaDictionary.naturalizeDataset(
+    dicomData.dict
+  );
+
+  dataset._meta = dcmjs.data.DicomMetaDictionary.namifyDataset(dicomData.meta);
+
+  const seriesInstanceUid = dataset.ReferencedSeriesSequence.SeriesInstanceUID;
+  const displaySets = getDisplaySetsBySeries(
+    studies,
+    studyInstanceUid,
+    seriesInstanceUid
+  );
+
+  if (displaySets.length > 1) {
+    console.warn(
+      "More than one display set with the same seriesInstanceUid. This is not supported yet..."
+    );
+  }
+
+  const referenceDisplaySet = displaySets[0];
+  const imageIds = referenceDisplaySet.images.map(image => image.getImageId());
+  const results = parseSeg(arrayBuffer, imageIds);
+
+  if (!results) {
+    throw new Error("Fractional segmentations are not supported");
+  }
+
+  const { segMetadata, toolState } = results;
+
+  segMetadata.seriesInstanceUid = seriesInstanceUid;
+
+  addSegMetadataToCornerstoneToolState(
+    segMetadata,
+    toolState,
+    displaySetInstanceUid
+  );
+
+  const cachedStack = StackManager.findOrCreateStack(
+    study,
+    referenceDisplaySet
+  );
+  const stack = Object.assign({}, cachedStack);
+  stack.currentImageIdIndex = 0;
+
+  return {
+    studyInstanceUid,
+    displaySetInstanceUid,
+    stack
+  };
+}
+
+export default handleSegmentationStorage;
@@ -0,0 +1,23 @@
+import OHIFCornerstoneViewport from './OHIFCornerstoneViewport.js';
+import commandsModule from './commandsModule.js';
+import toolbarModule from './toolbarModule.js';
+
+/**
+ *
+ */
+export default {
+  /**
+   * Only required property. Should be a unique value across all extensions.
+   */
+  id: 'cornerstone',
+
+  getViewportModule() {
+    return OHIFCornerstoneViewport;
+  },
+  getToolbarModule() {
+    return toolbarModule;
+  },
+  getCommandsModule() {
+    return commandsModule;
+  },
+};
@@ -0,0 +1,198 @@
+// TODO: A way to add Icons that don't already exist?
+// - Register them and add
+// - Include SVG Source/Inline?
+// - By URL, or own component?
+
+// TODO: `ohif-core` toolbar builder?
+
+// What KINDS of toolbar buttons do we have...
+// - One's that dispatch commands
+// - One's that set tool's active
+// - More custom, like CINE
+//    - Built in for one's like this, or custom components?
+
+// Visible?
+// Disabled?
+// Based on contexts or misc. criteria?
+//  -- ACTIVE_ROUTE::VIEWER
+//  -- ACTIVE_VIEWPORT::CORNERSTONE
+// setToolActive commands should receive the button event that triggered
+// so we can do the "bind to this button" magic
+
+const TOOLBAR_BUTTON_TYPES = {
+  COMMAND: 'command',
+  SET_TOOL_ACTIVE: 'setToolActive',
+  BUILT_IN: 'builtIn',
+};
+
+const definitions = [
+  {
+    id: 'StackScroll',
+    label: 'Stack Scroll',
+    icon: 'bars',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'StackScroll' },
+  },
+  {
+    id: 'Zoom',
+    label: 'Zoom',
+    icon: 'search-plus',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Zoom' },
+  },
+  {
+    id: 'Wwwc',
+    label: 'Levels',
+    icon: 'level',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Wwwc' },
+  },
+  {
+    id: 'Pan',
+    label: 'Pan',
+    icon: 'arrows',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Pan' },
+  },
+  {
+    id: 'Length',
+    label: 'Length',
+    icon: 'measure-temp',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Length' },
+  },
+  {
+    id: 'Angle',
+    label: 'Angle',
+    icon: 'angle-left',
+    //
+    type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+    commandName: 'setToolActive',
+    commandOptions: { toolName: 'Angle' },
+  },
+  {
+    id: 'Reset',
+    label: 'Reset',
+    icon: 'reset',
+    //
+    type: TOOLBAR_BUTTON_TYPES.COMMAND,
+    commandName: 'resetViewport',
+  },
+  {
+    id: 'Cine',
+    label: 'CINE',
+    icon: 'youtube',
+    //
+    type: TOOLBAR_BUTTON_TYPES.BUILT_IN,
+    options: {
+      behavior: 'CINE',
+    },
+  },
+  {
+    id: 'More',
+    label: 'More',
+    icon: 'ellipse-circle',
+    buttons: [
+      {
+        id: 'Magnify',
+        label: 'Magnify',
+        icon: 'circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'Magnify' },
+      },
+      {
+        id: 'WwwcRegion',
+        label: 'ROI Window',
+        icon: 'stop',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'WwwcRegion' },
+      },
+      {
+        id: 'DragProbe',
+        label: 'Probe',
+        icon: 'dot-circle',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'DragProbe' },
+      },
+      {
+        id: 'EllipticalRoi',
+        label: 'Ellipse',
+        icon: 'circle-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'EllipticalRoi' },
+      },
+      {
+        id: 'RectangleRoi',
+        label: 'Rectangle',
+        icon: 'square-o',
+        //
+        type: TOOLBAR_BUTTON_TYPES.SET_TOOL_ACTIVE,
+        commandName: 'setToolActive',
+        commandOptions: { toolName: 'RectangleRoi' },
+      },
+      {
+        id: 'Invert',
+        label: 'Invert',
+        icon: 'adjust',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'invertViewport',
+      },
+      {
+        id: 'RotateRight',
+        label: 'Rotate Right',
+        icon: 'rotate-right',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'rotateViewportCW',
+      },
+      {
+        id: 'FlipH',
+        label: 'Flip H',
+        icon: 'ellipse-h',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportHorizontal',
+      },
+      {
+        id: 'FlipV',
+        label: 'Flip V',
+        icon: 'ellipse-v',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'flipViewportVertical',
+      },
+      {
+        id: 'Clear',
+        label: 'Clear',
+        icon: 'trash',
+        //
+        type: TOOLBAR_BUTTON_TYPES.COMMAND,
+        commandName: 'clearAnnotations',
+      },
+    ],
+  },
+];
+
+export default {
+  definitions,
+  defaultContext: 'ACTIVE_VIEWPORT::CORNERSTONE',
+};