larvitar 1.5.14 → 2.0.2

package/imaging/types.d.ts

@@ -0,0 +1,200 @@
+import { vec2 } from "cornerstone-core";
+import { DataSet } from "dicom-parser";
+import { DEFAULT_VIEWPORT } from "./imageStore";
+import { NrrdSeries } from "./loaders/nrrdLoader";
+import { MetaDataTypes } from "./MetaDataTypes";
+import { MetaDataReadable } from "./MetaDataReadable";
+
+// TODO-ts: differentiate each single metadata @szanchi
+/*export type MetadataValue =
+  | string
+  | number
+  | string[]
+  | number[]
+  | boolean
+  | null
+  | Array
+  | undefined; // null or undefined is only for nrrd*/
+
+export type MetaData = MetaDataTypes & MetaDataReadable;
+export interface Image extends cornerstone.Image {
+  render?: Function;
+  decodeTimeInMS?: number;
+  loadTimeInMS?: number;
+  webWorkerTimeInMS?: number;
+  metadata: MetaData;
+  data?: DataSet;
+  floatPixelData?: Float32Array;
+}
+
+export type Instance = {
+  metadata: MetaData;
+  pixelData?: TypedArray | null;
+  dataSet?: DataSet | null;
+  file?: File | null;
+  instanceId?: string;
+  frame?: number;
+};
+
+export type ReslicedInstance = {
+  metadata: MetaData;
+  instanceId?: string;
+  permuteTable?: [number, number, number];
+};
+
+export type StagedProtocol = {
+  numberOfStages: number; // Number of stages
+  numberOfViews: number; // Number of views in stage
+  stageName?: string; // Name of the stage
+  stageNumber?: number; // Number of the stage
+  viewName?: string; // Name of the view
+  viewNumber?: number; // Number of the view
+};
+
+export type Series = {
+  imageIds: string[];
+  instances: { [key: string]: Instance };
+  seriesDescription?: string;
+  anonymized?: boolean;
+  bytes: number;
+  seriesUID: string;
+  currentImageIdIndex: number;
+  numberOfImages?: number;
+  isMultiframe: boolean;
+  color?: boolean;
+  dataSet: DataSet | null;
+  metadata?: MetaData;
+  frameDelay?: number;
+  frameTime?: number;
+  rWaveTimeVector?: number[];
+  instanceUIDs: { [key: string]: string };
+  is4D: boolean;
+  waveform: boolean;
+  ecgData?: number[];
+  traceData?: Partial<Plotly.PlotData>[];
+  isPDF: boolean;
+  stagedProtocol?: StagedProtocol;
+  modality: string;
+  numberOfFrames: number;
+  numberOfSlices: number;
+  numberOfTemporalPositions: number;
+  studyUID: string;
+  larvitarSeriesInstanceUID: string;
+  elements?: { [key: string]: any } | null;
+  layer: Layer;
+  orientation?: "axial" | "coronal" | "sagittal"; // this is needed for legacy reslice
+};
+
+export interface Layer extends cornerstone.EnabledElementLayer {
+  id: string;
+}
+
+export interface Viewport extends cornerstone.Viewport {
+  newImageIdIndex: number;
+  displayedArea: {
+    brhc: {
+      x: number;
+      y: number;
+    };
+  };
+}
+
+export type Contours = {
+  [key: string]: {
+    [key: string]: Array<{
+      x?: number;
+      y?: number;
+      lines: vec2[][];
+    }>;
+  };
+};
+
+export type Header = {
+  volume: Volume;
+  [imageId: string]: Instance.metadata;
+};
+
+export type Volume = {
+  imageIds: string[];
+  seriesId: string;
+  rows: number;
+  cols: number;
+  slope: number;
+  repr: string;
+  intercept: number;
+  imagePosition: [number, number];
+  numberOfSlices: number;
+  imageOrientation: [number, number, number];
+  pixelSpacing: [number, number];
+  sliceThickness: number;
+  phase?: string;
+  study_description?: string;
+  series_description?: string;
+  acquisition_date?: string;
+};
+
+export type LarvitarManager = {
+  [key: string]: NrrdSeries | Series;
+} | null;
+
+export type ImageFrame = {
+  pixelData?: Uint8ClampedArray | Uint16Array | Int16Array | Uint8Array;
+  bitsAllocated: number;
+  rows: number;
+  columns: number;
+  photometricInterpretation: string;
+  samplesPerPixel: number;
+  smallestPixelValue: number;
+  largestPixelValue: number;
+  imageData?: ImageData;
+  pixelRepresentation: number;
+};
+
+export type ImageTracker = {
+  [key: string]: string;
+} | null;
+
+// the result of readFile
+export type ImageObject = {
+  file: File;
+  instanceUID: string;
+  metadata: MetaData;
+  dataSet: DataSet;
+};
+
+export type CachingResponse = {
+  seriesId: string;
+  loading: number;
+  series: Partial<Series>;
+};
+
+export interface CustomDataSet extends DataSet {
+  repr?: string;
+}
+
+type Orientation = "axial" | "coronal" | "sagittal";
+
+type TypedArray =
+  | Float64Array
+  | Uint8Array
+  | Int8Array
+  | Uint16Array
+  | Int16Array
+  | Int32Array
+  | Uint32Array
+  | Float32Array;
+
+type StoreViewport = typeof DEFAULT_VIEWPORT;
+
+type StoreViewportOptions = {
+  numberOfSlices?: number;
+  sliceNumber?: number;
+  wc?: number;
+  ww?: number;
+  defaultWC?: number;
+  defaultWW?: number;
+  scale?: number;
+  colormap?: string;
+  tr_x?: number;
+  tr_y?: number;
+};

package/imaging/waveforms/ecg.ts

@@ -0,0 +1,191 @@
+/** @module waveforms/ecg
+ *  @desc This file provides utility functions for
+ *        rendering ecg waveforms using plotly.js
+ */
+
+// external libraries
+import Plotly, { Datum } from "plotly.js-dist-min";
+
+// internal libraries
+import { Series } from "../types";
+import { NrrdSeries } from "../loaders/nrrdLoader";
+import { updateImage } from "../imageRendering";
+import store from "../imageStore";
+import { getSeriesDataFromLarvitarManager } from "../loaders/commonLoader";
+import { updateStackToolState } from "../imageTools";
+
+/*
+ * This module provides the following functions to be exported:
+ * renderECG(data, divId, colorMarker, numberOfFrames, frameTime, frameId)
+ * syncECGFrame(traceData, seriesId, canvasId, numberOfFrames, divId)
+ * updateECGFrame(traceData, frameId, numberOfFrames, divId)
+ */
+
+const LAYOUT: Partial<Plotly.Layout> = {
+  xaxis: {
+    rangemode: "tozero",
+    showgrid: true,
+    gridcolor: "rgba(238,135,51,0.5)",
+    dtick: 1,
+    tickwidth: 2,
+    tickcolor: "#f5f5f5",
+    tickformat: ".2f",
+    tickfont: {
+      color: "#f5f5f5"
+    }
+  },
+  yaxis: {
+    rangemode: "nonnegative",
+    showgrid: true,
+    gridcolor: "rgba(238,135,51,0.5)",
+    dtick: 20,
+    tick0: 0,
+    tickwidth: 2,
+    tickcolor: "#f5f5f5",
+    tickfont: {
+      color: "#f5f5f5"
+    }
+  },
+  showlegend: false,
+  paper_bgcolor: "#000000",
+  plot_bgcolor: "#000000"
+};
+
+/**
+ * Render ECG waveform in a div
+ * @instance
+ * @function renderECG
+ * @param {number[]} data - ECG waveform data
+ * @param {string} divId - DivId to render waveform in
+ * @param {string} colorMarker - Color of the marker
+ * @param {number} numberOfframes - Number of frames in the image
+ * @param {number} frameTime - Time interval of each frame in the image
+ * @param {number} frameId - FrameId of the image to be rendered
+ * @returns {Object} traceData - Plotly trace data
+ */
+export const renderECG = function (
+  data: number[],
+  divId: string,
+  colorMarker: string,
+  numberOfFrames: number,
+  frameTime: number,
+  frameId: number = 0
+): Partial<Plotly.PlotData>[] {
+  // convert info using frameTime and numberOfFrames
+  const totalTime = (numberOfFrames - 1) * (frameTime * 1e-3);
+  const dotX: number = Math.floor((frameId * data.length) / numberOfFrames);
+  // build the trace data
+  const trace: Partial<Plotly.PlotData> = {
+    x: data.map((_, i) => (i * totalTime) / data.length),
+    y: data,
+    mode: "lines",
+    type: "scattergl",
+    line: {
+      width: 1.5,
+      shape: "linear"
+    }
+  };
+
+  // build the marker data
+  const marker: Partial<Plotly.PlotData> = {
+    x: [dotX],
+    y: [data[dotX]],
+    mode: "markers",
+    type: "scattergl",
+    marker: {
+      size: 12,
+      color: colorMarker,
+      symbol: "line-ns-open",
+      line: {
+        width: 3
+      }
+    }
+  };
+  // render data and update ranges
+  const traceData: Partial<Plotly.PlotData>[] = [trace, marker];
+  // fix the range of the x-axis
+  LAYOUT.xaxis!.range = [0, totalTime];
+  // fix the grid of x-axis using a line for each frame
+  LAYOUT.xaxis!.dtick = LAYOUT.xaxis!.dtick = totalTime / (numberOfFrames - 1);
+  Plotly.newPlot(divId, traceData, LAYOUT, {
+    responsive: true,
+    displayModeBar: false
+  });
+  return traceData;
+};
+
+/**
+ * Sync ECG waveform with rendered image on click
+ * @instance
+ * @function syncECGFrame
+ * @param {Object} traceData - Plotly trace data
+ * @param {string} seriesId - SeriesId of the image
+ * @param {string} canvasId - CanvasId of the image
+ * @param {number} numberOfFrames - Number of frames in the image
+ * @param {string} divId - DivId to render waveform in
+ */
+export const syncECGFrame = function (
+  traceData: Partial<Plotly.PlotData>[],
+  seriesId: string,
+  canvasId: string,
+  numberOfFrames: number,
+  divId: string
+) {
+  // document.getElementById('myDiv') return HTMLElement. This type doesn't
+  // contain method 'on' because this method is added within plotly-latest.min.js.
+  const domElement: any = document.getElementById(divId);
+  if (domElement) {
+    domElement.on("plotly_click", function (data: Plotly.PlotMouseEvent) {
+      traceData[1].x = [data.points[0].x];
+      traceData[1].y = [data.points[0].y];
+      Plotly.extendTraces(divId, {}, [0]);
+      const totalTime: number = (traceData[0].x as number[])[
+        (traceData[0].x as number[]).length - 1
+      ];
+      const frameId: number = Math.floor(
+        ((data.points[0].x as number) * numberOfFrames - 1) / totalTime
+      );
+      const series: Series | NrrdSeries | null =
+        getSeriesDataFromLarvitarManager(seriesId);
+      if (series) {
+        updateImage(series as Series, canvasId, frameId, false);
+        updateStackToolState(canvasId, frameId);
+      }
+    });
+  }
+
+  const canvasElement: any = document.getElementById(canvasId);
+  canvasElement.addEventListener("wheel", function (e: WheelEvent) {
+    const viewport = store.get(["viewports", canvasId]);
+    updateECGFrame(traceData, viewport.sliceId, numberOfFrames, divId);
+    updateStackToolState(canvasId, viewport.sliceId);
+  });
+};
+
+/**
+ * Sync ECG waveform with rendered image on click
+ * @instance
+ * @function updateECGFrame
+ * @param {Object} traceData - Plotly trace data
+ * @param {number} frameId - FrameId of the image
+ * @param {number} numberOfFrames - Number of frames in the image
+ * @param {string} divId - DivId to render waveform in
+ */
+export const updateECGFrame = function (
+  traceData: Partial<Plotly.PlotData>[],
+  frameId: number,
+  numberOfFrames: number,
+  divId: string
+) {
+  const totalTime: number = (traceData[0].x as number[])[
+    (traceData[0].x as number[]).length - 1
+  ];
+  const dotX: number = (frameId * totalTime) / (numberOfFrames - 1);
+  const index: number = (traceData[0].x as number[]).findIndex(
+    (x: number) => x >= dotX
+  );
+  const dotY: Datum | Datum[] = traceData[0].y![index];
+  traceData[1].x = [dotX];
+  traceData[1].y = Array.isArray(dotY) ? dotY : [dotY];
+  Plotly.extendTraces(divId, {}, [0]);
+};

package/{index.js → index.ts}

@@ -1,24 +1,45 @@
 import pkg from "./package.json";
-const VERSION = pkg.version;
-console.log(`LARVITAR v${VERSION}`);
+const VERSION: string = pkg.version;
+console.groupCollapsed(
+  `%cLARVITAR %cv${VERSION}`,
+  "color: #404888; background: #209A71; font-weight: 900;",
+  "color: #BED730; background: #209A71; font-weight: 900;"
+);
 
 import cornerstone from "cornerstone-core";
 import cornerstoneTools from "cornerstone-tools";
+import { parseDicom } from "dicom-parser";
+
 import { default as cornerstoneDICOMImageLoader } from "cornerstone-wado-image-loader";
 const segModule = cornerstoneTools.getModule("segmentation");
 
-import larvitarModule from "./modules/vuex/larvitar";
-
 import {
+  checkAndClearMemory,
   checkMemoryAllocation,
   getUsedMemory,
   getAvailableMemory
 } from "./imaging/monitors/memory";
 
-import { initLarvitarStore, larvitar_store } from "./imaging/imageStore";
+import {
+  getPerformanceMonitor,
+  activatePerformanceMonitor,
+  deactivatePerformanceMonitor
+} from "./imaging/monitors/performance";
+
+import store from "./imaging/imageStore";
+console.log(store);
+console.groupEnd();
 
 import { parseContours } from "./imaging/imageContours";
 
+import { parseECG } from "./imaging/parsers/ecg";
+
+import {
+  renderECG,
+  syncECGFrame,
+  updateECGFrame
+} from "./imaging/waveforms/ecg";
+
 import {
   getImagePresets,
   setImagePreset,
@@ -31,7 +52,6 @@ import {
   getMaxPixelValue,
   getPixelRepresentation,
   getTypedArrayFromDataType,
-  getPixelTypedArray,
   getSortedStack,
   randomId,
   getMeanValue,
@@ -133,8 +153,10 @@ import {
 
 import {
   DEFAULT_TOOLS,
+  dvTools,
   getDefaultToolsByType,
-  setDefaultToolsProps
+  setDefaultToolsProps,
+  registerExternalTool
 } from "./imaging/tools/default";
 
 import {
@@ -164,7 +186,8 @@ import {
   resetLarvitarManager,
   removeSeriesFromLarvitarManager,
   getSeriesDataFromLarvitarManager,
-  getImageFrame
+  getImageFrame,
+  getSopInstanceUIDFromLarvitarManager
 } from "./imaging/loaders/commonLoader";
 
 import {
@@ -176,7 +199,11 @@ import {
   getNrrdSerieDimensions
 } from "./imaging/loaders/nrrdLoader";
 
-import { getDicomImageId, cacheImages } from "./imaging/loaders/dicomLoader";
+import {
+  getDicomImageId,
+  cacheImage,
+  cacheImages
+} from "./imaging/loaders/dicomLoader";
 
 import { loadReslicedImage } from "./imaging/loaders/resliceLoader";
 
@@ -216,17 +243,26 @@ export {
   // global cornerstone variables
   cornerstone,
   cornerstoneTools,
+  parseDicom,
   segModule,
   cornerstoneDICOMImageLoader,
-  // vuex module
-  larvitarModule,
   // memory module
+  checkAndClearMemory,
   checkMemoryAllocation,
   getUsedMemory,
   getAvailableMemory,
+  // performance module
+  getPerformanceMonitor,
+  activatePerformanceMonitor,
+  deactivatePerformanceMonitor,
   // larvitarStore
-  initLarvitarStore,
-  larvitar_store,
+  store,
+  // parsers
+  parseECG,
+  syncECGFrame,
+  updateECGFrame,
+  // waveforms
+  renderECG,
   // imagePresets
   getImagePresets,
   setImagePreset,
@@ -237,7 +273,6 @@ export {
   getMaxPixelValue,
   getPixelRepresentation,
   getTypedArrayFromDataType,
-  getPixelTypedArray,
   getSortedStack,
   randomId,
   getMeanValue,
@@ -310,6 +345,7 @@ export {
   removeSeriesFromLarvitarManager,
   getSeriesDataFromLarvitarManager,
   getImageFrame,
+  getSopInstanceUIDFromLarvitarManager,
   // loaders/nrrdLoader
   buildNrrdImage,
   getNrrdImageId,
@@ -321,6 +357,7 @@ export {
   loadReslicedImage,
   // loaders/dicomLoader
   getDicomImageId,
+  cacheImage,
   cacheImages,
   // loaders/multiframeLoader
   loadMultiFrameImage,
@@ -364,8 +401,10 @@ export {
   exportAnnotations,
   // tools/default
   DEFAULT_TOOLS,
+  dvTools,
   getDefaultToolsByType,
   setDefaultToolsProps,
+  registerExternalTool,
   // tools/io
   saveAnnotations,
   loadAnnotations,

package/jsdoc.json

@@ -3,7 +3,7 @@
     "allowUnknownTags": true
   },
   "source": {
-    "include": ["imaging/", "./README.md"]
+    "include": ["dist/", "./README.md"]
   },
   "plugins": ["plugins/markdown"],
   "opts": {

package/package.json

@@ -6,22 +6,26 @@
     "medical",
     "cornerstone"
   ],
-  "version": "1.5.14",
-  "description": "javascript library for parsing, loading, rendering and interacting with DICOM images",
+  "version": "2.0.2",
+  "description": "typescript library for parsing, loading, rendering and interacting with DICOM images",
   "repository": {
     "url": "https://github.com/dvisionlab/Larvitar.git",
     "type": "git"
   },
+  "main": "index.ts",
   "scripts": {
+    "coverage": "typescript-coverage-report",
     "generate-docs": "node_modules/.bin/jsdoc -c jsdoc.json",
-    "build-lib": "rollup -c",
-    "dev-lib": "rollup -c -w"
+    "build": "webpack --config ./bundler/webpack.prod.js && cp ./dist/larvitar.js ./docs/examples/larvitar.js",
+    "dev": "webpack --progress --config ./bundler/webpack.dev.js && cp ./dist/larvitar.js ./docs/examples/larvitar.js",
+    "dev-wip": "webpack serve --config ./bundler/webpack.dev-wip.js"
   },
   "author": "Simone Manini <simone.manini@dvisionlab.com> (https://www.dvisionlab.com)",
   "contributors": [
     "Mattia Ronzoni <mattia.ronzoni@dvisionlab.com> (https://www.dvisionlab.com)",
     "Sara Zanchi <sara.zanchi@dvisionlab.com> (https://www.dvisionlab.com)",
-    "Ale Re <ale.re@dvisionlab.com> (https://www.dvisionlab.com)"
+    "Ale Re <ale.re@dvisionlab.com> (https://www.dvisionlab.com)",
+    "Laura Borghesi Re <laura.borghesi@dvisionlab.com> (https://www.dvisionlab.com)"
   ],
   "license": "MIT",
   "dependencies": {
@@ -36,22 +40,39 @@
     "dicom-parser": "^1.8.13",
     "docdash": "^1.2.0",
     "hammerjs": "^2.0.8",
+    "jpeg-lossless-decoder-js": "^2.0.7",
     "keycode-js": "^3.1.0",
     "lodash": "^4.17.15",
     "pako": "^1.0.10",
     "papaparse": "^5.3.0",
+    "plotly.js-dist-min": "^2.27.1",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^11.2.0",
+    "@babel/core": "^7.21.8",
+    "@types/cornerstone-core": "^2.3.0",
+    "@types/crypto-js": "^4.1.1",
+    "@types/hammerjs": "^2.0.41",
+    "@types/lodash": "^4.14.192",
+    "@types/papaparse": "^5.3.7",
+    "@types/plotly.js": "^2.12.30",
+    "@types/plotly.js-dist-min": "^2.3.4",
+    "@types/uuid": "^9.0.1",
+    "babel-loader": "^9.1.2",
+    "clean-webpack-plugin": "^4.0.0",
+    "copy-webpack-plugin": "^11.0.0",
     "fs": "^0.0.1-security",
+    "html-loader": "^4.2.0",
+    "html-webpack-plugin": "^5.5.0",
+    "ip": "^1.1.8",
     "jsdoc": "^3.6.4",
-    "rollup": "^2.39.0",
-    "rollup-plugin-node-resolve": "^5.2.0"
-  },
-  "common": "dist/larvitar.cjs.js",
-  "module": "dist/larvitar.js",
-  "browser": "dist/larvitar.js",
-  "type": "module"
+    "portfinder-sync": "^0.0.2",
+    "ts-loader": "^9.4.2",
+    "typescript": "^5.0.2",
+    "typescript-coverage-report": "^0.7.0",
+    "webpack": "^5.76.3",
+    "webpack-bundle-analyzer": "^4.8.0",
+    "webpack-cli": "^5.0.1",
+    "webpack-dev-server": "^4.13.1"
+  }
 }