larvitar 0.18.2 → 1.2.0

package/imaging/tools/{tools.interaction.js → interaction.js}

@@ -1,12 +1,19 @@
-import { DEFAULT_MOUSE_KEYS } from "./tools.default";
-import { setToolActive } from "./tools.main";
-import { isElement } from "../image_utils";
-import { larvitar_store } from "../image_store";
-import { updateViewportData } from "../image_rendering";
+/** @module imaging/tools/interaction
+ *  @desc  This file provides functionalities for
+ *         tools interactions
+ */
 
+// external libraries
 import { throttle } from "lodash";
 import * as keyCodes from "keycode-js";
 
+// internal libraries
+import { DEFAULT_MOUSE_KEYS } from "./default";
+import { setToolActive } from "./main";
+import { isElement } from "../imageUtils";
+import { larvitar_store } from "../imageStore";
+import { updateViewportData } from "../imageRendering";
+
 /**
  * TOOLS INTERACTIONS TODOS:
  * - enable touch controls
@@ -21,7 +28,7 @@ import * as keyCodes from "keycode-js";
  * - "restore previous active tool" instead of passed "default" tool
  * - manage left button (an idea could be to cycle over object keys for both buttons)
  * - possibility to change modifier keys
- * @param {Object} config - see tools.default
+ * @param {Object} config - see tools/default
  * @param {Array} viewports - The hmtl element ids to be used for tool activation.
  */
 

package/imaging/tools/{tools.io.js → io.js}

@@ -1,9 +1,16 @@
+/** @module imaging/tools/io
+ *  @desc  This file provides functionalities for
+ *         tools input/output
+ */
+
+// external libraries
 import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools";
 import { each, map, assign, invert } from "lodash";
 import { unparse } from "papaparse";
 
-import { setToolEnabled } from "../image_tools";
+// internal libraries
+import { setToolEnabled } from "../imageTools";
 
 // DEV
 // import { saved_state_2 } from "./cstools_state_example.js";
@@ -13,7 +20,7 @@ import { setToolEnabled } from "../image_tools";
  * Load annotation from json object
  * @param {Object} jsonData - The previously saved tools state
  */
-export const loadAnnotations = function(jsonData) {
+export const loadAnnotations = function (jsonData) {
   // DEV
   // if (!jsonData) {
   //   jsonData = saved_state_2;
@@ -52,8 +59,9 @@ export const loadAnnotations = function(jsonData) {
  * @param {bool} download - True to download json
  * @param {string} filename - The json file name, @default state.json
  */
-export const saveAnnotations = function(toDownload, filename = "state.json") {
-  let currentToolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
+export const saveAnnotations = function (toDownload, filename = "state.json") {
+  let currentToolState =
+    cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
   if (toDownload) {
     // Convert JSON Array to string.
     var json_string = JSON.stringify(currentToolState);
@@ -67,11 +75,12 @@ export const saveAnnotations = function(toDownload, filename = "state.json") {
  * Save annotation from current stack, download as csv file
  * containing only useful informations for user
  */
-export const exportAnnotations = function(
+export const exportAnnotations = function (
   fileManager,
   filename = "annotations.csv"
 ) {
-  let currentToolState = cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
+  let currentToolState =
+    cornerstoneTools.globalImageIdSpecificToolStateManager.saveToolState();
   let csvdata = generateCSV(fileManager, currentToolState);
   let csvstring = unparse(csvdata);
   download(csvstring, filename);

package/imaging/tools/{tools.main.js → main.js}

@@ -1,34 +1,36 @@
+/** @module imaging/tools/main
+ *  @desc  This file provides functionalities
+ *         for initializing tools and stacks
+ */
+
 // external libraries
 import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools/dist/cornerstoneTools.js";
 import cornerstoneMath from "cornerstone-math";
-
+import Hammer from "hammerjs";
 import { each, extend } from "lodash";
 
-import {
-  saveAnnotations,
-  loadAnnotations,
-  exportAnnotations
-} from "./tools.io";
+// internal libraries
+import { saveAnnotations, loadAnnotations, exportAnnotations } from "./io";
 import {
   DEFAULT_TOOLS,
   DEFAULT_STYLE,
   DEFAULT_SETTINGS,
   dvTools
-} from "./tools.default";
-import { larvitar_store } from "../image_store";
+} from "./default";
+import { larvitar_store } from "../imageStore";
 
 /**
  * Initialize cornerstone tools with default configuration (extended with custom configuration)
  * @function initializeCSTools
- * @param {Object} settings - the settings object (see tools.default.js)
- * @param {Object} settings - the style object (see tools.default.js)
+ * @param {Object} settings - the settings object (see tools/default.js)
+ * @param {Object} settings - the style object (see tools/default.js)
  * @example larvitar.initializeCSTools({showSVGCursors:false}, {color: "0000FF"});
  */
 const initializeCSTools = function (settings, style) {
   cornerstoneTools.external.cornerstone = cornerstone;
   cornerstoneTools.external.cornerstoneMath = cornerstoneMath;
-  // cornerstoneTools.external.Hammer = Hammer;
+  cornerstoneTools.external.Hammer = Hammer;
   extend(DEFAULT_SETTINGS, settings);
 
   // hack to fix warning on init() - but breaks labelmap 0 auto generation
@@ -136,7 +138,7 @@ const addTool = function (toolName, customConfig, targetElementId) {
 };
 
 /**
- * Add all default tools, as listed in tools.default.js
+ * Add all default tools, as listed in tools/default.js
  * @function addDefaultTools
  */
 export const addDefaultTools = function (elementId) {
@@ -199,7 +201,7 @@ function tryUpdateImage(element) {
  * Set Tool "active" on all elements (ie, rendered and manipulable) & refresh cornerstone elements
  * @function setToolActive
  * @param {String} toolName - The tool name.
- * @param {Object} options - The custom options. @default from tools.default.js
+ * @param {Object} options - The custom options. @default from tools/default.js
  * @param {Array} viewports - The hmtl element id to be used for tool initialization.
  * @param {Boolean} doNotSetInStore - Flag to avoid setting in store (useful on tools initialization eg in addDefaultTools). NOTE: This is just a hack, we must rework tools/ui sync.
  */
@@ -326,7 +328,7 @@ const setToolPassive = function (toolName, viewports) {
 /**
  * Set cornerstone tools custom configuration (extend default configuration)
  * @function setToolsStyle
- * @param {Object} style - the style object (see tools.defaults.js)
+ * @param {Object} style - the style object (see tools/defaults.js)
  */
 const setToolsStyle = function (style) {
   extend(DEFAULT_STYLE, style);

package/imaging/tools/polygonSegmentationMixin.js

@@ -1,5 +1,10 @@
-import cornerstoneTools from "cornerstone-tools";
+/** @module imaging/tools/polygonSegmentationMixin
+ *  @desc  This file ovverides `freehandSegmentationMixin`'s
+ *         `renderToolData` method
+ */
 
+// external libraries
+import cornerstoneTools from "cornerstone-tools";
 const external = cornerstoneTools.external;
 const draw = cornerstoneTools.importInternal("drawing/draw");
 const drawJoinedLines = cornerstoneTools.importInternal(
@@ -147,9 +152,8 @@ function _applyStrategy(evt) {
   const points = this.handles.points;
   const { element } = evt.detail;
 
-  const { labelmap2D, labelmap3D, currentImageIdIndex } = getters.labelmap2D(
-    element
-  );
+  const { labelmap2D, labelmap3D, currentImageIdIndex } =
+    getters.labelmap2D(element);
 
   const pixelData = labelmap2D.pixelData;
   const previousPixeldata = pixelData.slice();

package/imaging/tools/{tools.segmentation.js → segmentation.js}

@@ -1,33 +1,23 @@
+/** @module imaging/tools/segmentation
+ *  @desc  This file provides functionalities
+ *         for handling masks and luts
+ */
+
 // external libraries
 import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools/dist/cornerstoneTools.js";
-// tools
-import { setToolActive, setToolDisabled } from "./tools.main";
-// utils
-import { cloneDeep, extend, values } from "lodash";
-
+import { cloneDeep, extend, values, sum } from "lodash";
 const segModule = cornerstoneTools.getModule("segmentation");
-const setters = segModule.setters;
-const getters = segModule.getters;
+const { getters, setters } = segModule;
 
-/**
- * THIS MODULE IS A WIP
- */
+// internal libraries
+import { setToolActive, setToolDisabled } from "./main";
+import { isElement } from "../imageUtils";
 
-// DEV
-window.segModule = segModule;
-window.cornerstone = cornerstone;
-window.cornerstoneTools = cornerstoneTools;
-
-/**
- * NOTES ON CS TOOLS SEGMENTATION MODULE
- * The value in the mask (binary) define which color will be used from the LUT map
- * The different masks are 'labelmap', while different values in the same mask are 'segments'
- * Segments get the color from the lutmap (up to 2^16 segments) and can be shown/hidden one by one
- * > setters.toggleSegmentVisibility(htmlelement,segmentvalue,labelmapid)
- * > setters.colorForSegmentIndexOfColorLUT(colorLutIndex, segmentValue, colorRGBAarray)
- * Labelmaps are linked to a colormap and can be active / inactive
- * */
+// custom code
+import { setLabelmap3DForElement } from "./setLabelMap3D";
+// override function
+setters.labelmap3DForElement = setLabelmap3DForElement;
 
 // General segmentation cs tools module configuration
 const config = {
@@ -145,53 +135,153 @@ function generateUniformLUT(hex_color, opacity) {
   return lut;
 }
 
+/**
+ * Set color for label
+ * @param {Number} labelId
+ * @param {String} color in hex format
+ */
+export function setLabelColor(labelId, color) {
+  let volumeId = 0; // TODO MULTIVOLUME
+  let rgb = hexToRgb(color);
+  let rgba = [...rgb, 128];
+  setters.colorForSegmentIndexOfColorLUT(volumeId, labelId, rgba);
+  // force render ? depends on image visualization (render all ?)
+}
+
+/**
+ * Get color from label
+ * @param {Number} labelId
+ * @returns {String} Color in hex format
+ */
+export function getLabelColor(labelId) {
+  let volumeId = 0; // TODO MULTIVOLUME
+  let rgba = getters.colorForSegmentIndexColorLUT(volumeId, labelId);
+  return rgbToHex(rgba);
+}
+
 /**
  * A function to group all settings to load before masks
- * TODO add a param to override config
+ * @param {Object} customConfig - Object containing override values for segmentation module config
  */
-export function initSegmentationModule() {
+export function initSegmentationModule(customConfig) {
   // set configuration
   segModule.configuration = cloneDeep(config);
+  extend(segModule.configuration, customConfig);
 }
 
 /**
  * Add segmentation mask to segmentation module
- * @param {Number} labelId - The label index (must be unique)
+ * @param {Object} maskProps - The mask properties (labelId, color and opacity)
  * @param {TypedArray} - The mask data array
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
+ * @returns {Promise} - Return a promise which will resolve when segmentation mask is added
  */
-export function addSegmentationMask(props, data, elementId, cb) {
-  let element = document.getElementById(elementId);
-  setters.labelmap3DForElement(element, data.buffer, props.labelId);
-  // if user set a color property, use that color for all segments on the labelmap
-  let lut = props.color
-    ? generateUniformLUT(props.color, props.opacity)
-    : generateLUT(props.opacity);
-  setters.colorLUT(props.labelId, lut);
-  // bind labelmap to colorLUT
-  let labelmap3d = getters.labelmap3D(element, props.labelId);
-  setters.colorLUTIndexForLabelmap3D(labelmap3d, props.labelId);
-  if (cb) {
-    cb();
+export function addSegmentationMask(props, data, elementId) {
+  let promise = new Promise(async resolve => {
+    let element = isElement(elementId)
+      ? elementId
+      : document.getElementById(elementId);
+    if (!element) {
+      console.error("invalid html element: " + elementId);
+      return;
+    }
+
+    const res = await setters.labelmap3DForElement(
+      element,
+      data.buffer,
+      props.labelId
+    );
+    // if user set a color property, use that color for all segments on the labelmap
+    let lut = props.color
+      ? generateUniformLUT(props.color, props.opacity)
+      : generateLUT(props.opacity);
+    setters.colorLUT(props.labelId, lut);
+    // bind labelmap to colorLUT
+    let labelmap3d = getters.labelmap3D(element, props.labelId);
+    setters.colorLUTIndexForLabelmap3D(labelmap3d, props.labelId);
+    resolve();
+  });
+  return promise;
+}
+
+/**
+ * Set a new mask slice into the labelmap buffer
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
+ * @param {Number} sliceIndex - the index of the new mask slice
+ * @param {ArrayBuffer} pixelData - the pixelData array
+ */
+export function loadMaskSlice(elementId, sliceIndex, pixelData) {
+  // optimization: if pixelData contains no labels, return
+  if (sum(pixelData) === 0) {
+    return;
+  }
+
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
   }
+  let volumeId = 0; // TODO for multivolume
+  // get labelmap buffer
+  let labelmaps2D = getters.labelmap3D(element, volumeId).labelmaps2D;
+
+  // add if not alresdy present
+  if (!labelmaps2D[sliceIndex]) {
+    labelmaps2D[sliceIndex] = {};
+  }
+
+  labelmaps2D[sliceIndex].pixelData = pixelData;
+  setters.updateSegmentsOnLabelmap2D(labelmaps2D[sliceIndex]);
+  cornerstone.updateImage(element);
 }
 
 /**
  * Activate a specific labelmap through its labelId
  * @param {Number} labelId - The labelmap id to activate
- * @param {String} elementId - The target html element id
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
 export function setActiveLabelmap(labelId, elementId) {
-  let element = document.getElementById(elementId);
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
   setters.activeLabelmapIndex(element, labelId);
 }
 
+/**
+ * Get active labelmap for target element
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
+ * @returns {Object} The active labelmap object that contains the buffer
+ */
+export function getActiveLabelmapBuffer(elementId) {
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
+  return getters.activeLabelmapBuffer(element);
+}
+
 /**
  * Activate a specific segment through its index
  * @param {Number} segmentIndex - The segment index to activate
- * @param {String} elementId - The target html element id
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
 export function setActiveSegment(segmentIndex, elementId) {
-  let element = document.getElementById(elementId);
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
   setters.activeSegmentIndex(element, segmentIndex);
 }
 
@@ -213,6 +303,24 @@ export function setInactiveLabelOpacity(opacity) {
   forceRender();
 }
 
+/**
+ * Toggle mask visibility
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
+ * @param {Number} labelId - The id of the mask label
+ */
+export function toggleVisibility(elementId, labelId) {
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
+  let volumeId = 0; // TODO MULTIVOLUME
+  setters.toggleSegmentVisibility(element, labelId, volumeId);
+  cornerstone.updateImage(element);
+}
+
 /**
  * Toggle between 'contours mode' and 'filled mode'
  * @param {Bool} toggle - Contour mode enabled if true
@@ -236,9 +344,7 @@ export function toggleContourMode(toggle) {
 
 /**
  * Set mask appearance props
- * @param {String} tag - The mask tag
- * @param {Integer} mode - [0=filled, 1=contour, 2=hidden]
- * @param {Float} alpha - Opacity value (if mode=0), between 0 and 1
+ * @param {Object} maskProps - The mask appearance props (labelId, visualization [0=filled, 1=contour, 2=hidden], opacity (if mode=0), between 0 and 1)
  */
 export function setMaskProps(props) {
   // Lut index and segment values are hardcoded because they will depend on design choices:
@@ -299,6 +405,7 @@ export function clearSegmentationState() {
 /**
  * Enable brushing
  * @param {Number} dimension - The initial brush radius
+ * @param {Array} thresholds - The threshold values (min and max)
  */
 export function enableBrushTool(dimension, thresholds) {
   segModule.configuration.radius = dimension;
@@ -324,35 +431,41 @@ export function setBrushProps(props) {
   forceRender();
 }
 
-/**
- * Retrieve the buffer that represents the current active mask
- */
-export function getActiveLabelmapBuffer() {
-  let element = document.getElementById("axial");
-  let object = segModule.getters.activeLabelmapBuffer(element);
-  return object.buffer;
-}
-
 /**
  * Undo last brush operation (stroke)
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
 export function undoLastStroke(elementId) {
-  let element = document.getElementById(elementId);
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
   let activeLabelMapIndex = segModule.getters.activeLabelmapIndex(element);
   setters.undo(element, activeLabelMapIndex);
 }
 
 /**
  * Redo last brush operation (stroke)
+ * @param {String} elementId - The target html element Id or its DOM HTMLElement
  */
 export function redoLastStroke(elementId) {
-  let element = document.getElementById(elementId);
+  let element = isElement(elementId)
+    ? elementId
+    : document.getElementById(elementId);
+  if (!element) {
+    console.error("invalid html element: " + elementId);
+    return;
+  }
   let activeLabelMapIndex = segModule.getters.activeLabelmapIndex(element);
   setters.redo(element, activeLabelMapIndex);
 }
 
 /**
  * Delete mask from state
+ * @param {Number} labelId - The labelmap id to activate
  */
 export function deleteMask(labelId) {
   let masks = values(segModule.state.series)[0].labelmaps3D;

package/imaging/tools/segmentations.md

@@ -0,0 +1,38 @@
+# Introduction
+
+This guide explains the key concepts of Larvitar **segmentation masks management**, based on cornerstone tools's **segmentation module**.
+
+# Definitions
+
+- _segmentation mask_ or just _mask_: the set of pixels that belongs to a specific structure
+- _volume_: a buffer containing one or more segmentations
+- _label_: the value inside a volume that identifies a specific segmentation
+
+# CS tools
+
+## Segmentation module structure
+
+In cs tools world, the different volumes are defined _labelmaps_, while the different labels in a volume are _segments_. Labelmaps can support up to 2^16 segments.
+The values in the volume (ie, labels) define which color will be used from the LUT map: in fact, segments get the color from the lutmap and can be shown/hidden one by one.
+Each labelmaps can be linked to a different colormap and has a active / inactive property that affects the rendering style (see configuration).
+
+> setters.toggleSegmentVisibility(htmlelement,segmentvalue,labelmapid)  
+> setters.colorForSegmentIndexOfColorLUT(colorLutIndex, segmentValue, colorRGBAarray)
+
+## Configuration
+
+TODO
+
+# Larvitar segmentation management
+
+TODO
+
+# Larvitar segmentation API
+
+TODO
+
+# Customization
+
+Some function in larvitar overrides the default behaviour of cornerstone tools, here is a list of them:
+
+- `setters.labelmap3DForElement` is overridden to have a non-blocking behaviour, the custom code is in ./setLabelMap3D.js, same as original code in cs tools repo.