larvitar 2.1.8 → 2.1.10

package/dist/larvitar.js

@@ -158687,6 +158687,7 @@ const storeViewportData = function (image, elementId, viewport, data) {
     (0, imageStore_1.set)(["isTimeserie", elementId, data.isTimeserie]);
     (0, imageStore_1.set)(["isPDF", elementId, false]);
     (0, imageStore_1.set)(["waveform", elementId, data.waveform]);
+    (0, imageStore_1.set)(["dsa", elementId, data.dsa]);
 };
 exports.storeViewportData = storeViewportData;
 /**
@@ -158856,6 +158857,7 @@ const getSeriesData = function (series, defaultProps) {
     data.isColor = series.color;
     data.isPDF = series.isPDF;
     data.waveform = series.waveform;
+    data.dsa = series.dsa ? true : false;
     if (instance) {
         data.rows = instance.metadata.x00280010;
         data.cols = instance.metadata.x00280011;
@@ -159028,6 +159030,7 @@ const DEFAULT_VIEWPORT = {
     isDSAEnabled: false,
     isPDF: false,
     waveform: false,
+    dsa: false,
     viewport: {
         scale: 0.0,
         rotation: 0.0,
@@ -159102,6 +159105,7 @@ const setValue = (store, data) => {
         case "isMultiframe":
         case "isPDF":
         case "waveform":
+        case "dsa":
         case "isTimeserie":
         case "isDSAEnabled":
         case "ready":
@@ -163226,6 +163230,633 @@ function revTidMask(metadataInfo, imageIds, index) {
 }
 
 
+/***/ }),
+
+/***/ 2775:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+//external imports
+const plotly_js_dist_min_1 = __importDefault(__webpack_require__(2479));
+const cornerstone_core_1 = __importDefault(__webpack_require__(7371));
+const cornerstone_tools_1 = __importDefault(__webpack_require__(4030));
+const getToolState = cornerstone_tools_1.default.getToolState;
+const toolColors = cornerstone_tools_1.default.toolColors;
+const draw = cornerstone_tools_1.default.importInternal("drawing/draw");
+const drawLine = cornerstone_tools_1.default.importInternal("drawing/drawLine");
+const setShadow = cornerstone_tools_1.default.importInternal("drawing/setShadow");
+const getNewContext = cornerstone_tools_1.default.importInternal("drawing/getNewContext");
+const drawHandles = cornerstone_tools_1.default.importInternal("drawing/drawHandles");
+const { lengthCursor } = cornerstone_tools_1.default.importInternal("tools/cursors");
+const throttle = cornerstone_tools_1.default.importInternal("util/throttle");
+const getModule = cornerstone_tools_1.default.getModule;
+const getPixelSpacing = cornerstone_tools_1.default.importInternal("util/getPixelSpacing");
+const lineSegDistance = cornerstone_tools_1.default.importInternal("util/lineSegDistance");
+const BaseAnnotationTool = cornerstone_tools_1.default.importInternal("base/BaseAnnotationTool");
+const default_1 = __webpack_require__(6694);
+// import cornerstoneTools from "cornerstone-tools";
+class LengthPlotTool extends BaseAnnotationTool {
+    constructor(props = {}) {
+        const defaultProps = {
+            name: "LengthPlot",
+            supportedInteractionTypes: ["Mouse"],
+            svgCursor: lengthCursor,
+            configuration: {
+                drawHandles: true,
+                drawHandlesOnHover: false,
+                hideHandlesIfMoving: false,
+                renderDashed: false,
+                digits: 2,
+                offset: 15
+            }
+        };
+        super(props, defaultProps);
+        this.name = "LengthPlot";
+        this.plotlydata = [];
+        this.measuring = false;
+        this.configuration = {
+            drawHandles: true,
+            drawHandlesOnHover: false,
+            hideHandlesIfMoving: false,
+            renderDashed: false,
+            digits: 2,
+            offset: 15
+        };
+        this.eventData;
+        this.datahandles;
+        this.abovehandles;
+        this.belowhandles;
+        this.plotlydata = [];
+        this.measuring = false;
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        this.throttledUpdateCachedStats = throttle(this.updateCachedStats, 110);
+    }
+    getRandomColor() {
+        const letters = "0123456789ABCDEF";
+        let color = "#";
+        for (let i = 0; i < 6; i++) {
+            color += letters[Math.floor(Math.random() * 16)];
+        }
+        return color;
+    }
+    handleMouseUp() {
+        this.measuring = false;
+        const eventData = this.eventData;
+        const handleData = (handles) => {
+            const points = this.getPointsAlongLine(handles.start, handles.end, getPixelSpacing(eventData.image).colPixelSpacing);
+            const pixelValues = this.getPixelValuesAlongLine(handles.start, points, getPixelSpacing(eventData.image).colPixelSpacing, eventData);
+            let color = "green";
+            return { points, pixelValues, color };
+        };
+        const aboveResults = handleData(this.abovehandles);
+        aboveResults.color = "red";
+        const belowResults = handleData(this.belowhandles);
+        belowResults.color = "blue";
+        const data = [handleData(this.datahandles), aboveResults, belowResults];
+        this.createPlot(...data);
+    }
+    createNewMeasurement(eventData) {
+        this.eventData = eventData;
+        clearToolData(eventData.element, this.name);
+        eventData.element.addEventListener("mouseup", () => this.handleMouseUp());
+        this.measuring = true;
+        const goodEventData = eventData && eventData.currentPoints && eventData.currentPoints.image;
+        if (!goodEventData) {
+            console.error(`required eventData not supplied to tool ${this.name}'s createNewMeasurement`);
+            return;
+        }
+        let color = "green";
+        const { x, y } = eventData.currentPoints.image;
+        return {
+            visible: true,
+            active: true,
+            color: color,
+            invalidated: true,
+            handles: {
+                start: {
+                    x,
+                    y,
+                    highlight: true,
+                    active: false
+                },
+                end: {
+                    x,
+                    y,
+                    highlight: true,
+                    active: true
+                },
+                textBox: {
+                    active: false,
+                    hasMoved: false,
+                    movesIndependently: false,
+                    drawnIndependently: true,
+                    allowedOutsideImage: true,
+                    hasBoundingBox: true
+                }
+            }
+        };
+    }
+    pointNearTool(element, data, coords) {
+        const hasStartAndEndHandles = data && data.handles && data.handles.start && data.handles.end;
+        const validParameters = hasStartAndEndHandles;
+        if (!validParameters) {
+            console.warn(`invalid parameters supplied to tool ${this.name}'s pointNearTool`);
+            return false;
+        }
+        if (data.visible === false) {
+            return false;
+        }
+        return (lineSegDistance(element, data.handles.start, data.handles.end, coords) <
+            25);
+    }
+    updateCachedStats(image, element, data) {
+        const { rowPixelSpacing, colPixelSpacing } = getPixelSpacing(image);
+        const dx = (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1);
+        const dy = (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1);
+        const length = Math.sqrt(dx * dx + dy * dy);
+        data.length = length;
+        data.invalidated = false;
+    }
+    renderToolData(evt) {
+        const eventData = evt.detail;
+        const { element } = eventData;
+        const { handleRadius, drawHandlesOnHover, hideHandlesIfMoving, renderDashed } = this.configuration;
+        const toolData = getToolState(evt.currentTarget, this.name);
+        if (!toolData) {
+            return;
+        }
+        const context = getNewContext(eventData.canvasContext.canvas);
+        const lineDash = getModule("globalConfiguration").configuration
+            .lineDash;
+        let start;
+        let end;
+        for (let i = 0; i < toolData.data.length; i++) {
+            const data = toolData.data[i];
+            if (data.visible === false) {
+                continue;
+            }
+            draw(context, (context) => {
+                setShadow(context, this.configuration);
+                const color = toolColors.getColorIfActive(data);
+                const lineOptions = { color };
+                if (renderDashed) {
+                    lineOptions.lineDash = lineDash;
+                }
+                start = data.handles.start;
+                end = data.handles.end;
+                data.handles.end.y = data.handles.start.y;
+                drawLine(context, element, data.handles.start, data.handles.end, lineOptions);
+                const offset = default_1.DEFAULT_TOOLS["LengthPlot"].offset === this.configuration.offset ||
+                    default_1.DEFAULT_TOOLS["LengthPlot"].offset === undefined
+                    ? this.configuration.offset
+                    : default_1.DEFAULT_TOOLS["LengthPlot"].offset; //offset customisable
+                //const offset = this.configuration.offset;
+                const aboveHandles = {
+                    start: { x: start.x, y: start.y - offset },
+                    end: { x: end.x, y: end.y - offset }
+                };
+                const belowHandles = {
+                    start: { x: start.x, y: start.y + offset },
+                    end: { x: end.x, y: end.y + offset }
+                };
+                const abovelineOptions = { color: "red" };
+                const belowlineOptions = { color: "blue" };
+                drawLine(context, element, aboveHandles.start, aboveHandles.end, abovelineOptions);
+                drawLine(context, element, belowHandles.start, belowHandles.end, belowlineOptions);
+                const handleOptions = {
+                    color,
+                    handleRadius,
+                    drawHandlesIfActive: drawHandlesOnHover,
+                    hideHandlesIfMoving
+                };
+                const abovehandleOptions = {
+                    color: abovelineOptions.color,
+                    handleRadius,
+                    drawHandlesIfActive: drawHandlesOnHover,
+                    hideHandlesIfMoving
+                };
+                const belowhandleOptions = {
+                    color: belowlineOptions.color,
+                    handleRadius,
+                    drawHandlesIfActive: drawHandlesOnHover,
+                    hideHandlesIfMoving
+                };
+                if (this.configuration.drawHandles) {
+                    drawHandles(context, eventData, data.handles, handleOptions);
+                    this.datahandles = data.handles;
+                    this.abovehandles = aboveHandles;
+                    this.belowhandles = belowHandles;
+                    drawHandles(context, eventData, aboveHandles, abovehandleOptions);
+                    drawHandles(context, eventData, belowHandles, belowhandleOptions);
+                }
+            });
+        }
+    }
+    getPointsAlongLine(startHandle, endHandle, colPixelSpacing) {
+        let points = [];
+        const addPoints = (start, end, step) => {
+            const startX = Math.floor(start.x) + 1;
+            const numPoints = Math.floor(end.x) - startX;
+            points = new Array(numPoints + 1);
+            for (let i = 0; i <= numPoints; i++) {
+                points[i] = (startX + i) * step;
+            }
+        };
+        if (endHandle.x > startHandle.x) {
+            addPoints(startHandle, endHandle, colPixelSpacing);
+        }
+        if (endHandle.x < startHandle.x) {
+            addPoints(endHandle, startHandle, colPixelSpacing);
+        }
+        return points;
+    }
+    getPixelValuesAlongLine(startHandle, points, colPixelSpacing, eventData) {
+        const pixelValues = new Array(points.length);
+        const yPoint = Math.floor(startHandle.y);
+        const addPixelValues = (xPoints, startIndex) => {
+            const pixelValuesBatch = cornerstone_core_1.default.getStoredPixels(eventData.element, xPoints[0], yPoint, xPoints.length, 1);
+            for (let i = 0; i < pixelValuesBatch.length; i++) {
+                pixelValues[startIndex + i] = pixelValuesBatch[i];
+            }
+        };
+        for (let i = 0; i < points.length; i++) {
+            const xPoint = Math.floor(points[i] / colPixelSpacing);
+            addPixelValues([xPoint], i);
+        }
+        return pixelValues;
+    }
+    createPlot(...dataSets) {
+        const traces = dataSets.map(({ points, pixelValues, color }) => ({
+            x: points,
+            y: pixelValues,
+            type: "lines",
+            line: {
+                color
+            }
+        }));
+        this.plotlydata = traces;
+        const allXValues = dataSets.flatMap(dataSet => dataSet.points);
+        const allYValues = dataSets.flatMap(dataSet => dataSet.pixelValues);
+        const layout = {
+            xaxis: {
+                range: [Math.min(...allXValues), Math.max(...allXValues)],
+                title: "position (mm)"
+            },
+            yaxis: {
+                range: [Math.min(...allYValues), Math.max(...allYValues)],
+                title: "GreyScaleValue (HU)"
+            },
+            title: "GreyScaleValues vs position",
+            responsive: true
+        };
+        const myPlotDiv = document.getElementById("myPlot");
+        plotly_js_dist_min_1.default.react(myPlotDiv, traces, layout);
+    }
+    clearPlotlyData() {
+        const myPlotDiv = document.getElementById("myPlot");
+        plotly_js_dist_min_1.default.purge(myPlotDiv);
+        this.plotlydata = [];
+    }
+}
+exports["default"] = LengthPlotTool;
+function clearToolData(element, toolName) {
+    const toolData = getToolState(element, toolName);
+    if (toolData && toolData.data && toolData.data.length > 0) {
+        toolData.data.forEach((data) => {
+            data.visible = false;
+        });
+    }
+}
+//to set custom offset do this: DEFAULT_TOOLS["LengthPlot"].offset=parseInt(document.getElementById("offset").value,10)
+//create plot in viewport in layeout doable like this:
+//const currentDiv = eventData.element //viewport element
+//const newDiv = document.createElement("div");
+//newDiv.id=currentDiv.id+"-Plotly"
+//newDiv.style="width: 100%; max-width: 600px; height: 500px;"
+//currentDiv.appendChild(newDiv);
+//offsetInput=document.createElement("input");
+// Set the attributes for the input element
+//offsetInput.type = "number";
+//offsetInput.classList.add("manualInput");
+//offsetInput.id = currentDiv.id+"-offset";
+//offsetInput.placeholder = "offset";
+//newDiv.appendChild(offsetInput);
+
+
+/***/ }),
+
+/***/ 893:
+/***/ (function(__unused_webpack_module, exports, __webpack_require__) {
+
+"use strict";
+
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", ({ value: true }));
+//external imports
+const plotly_js_dist_min_1 = __importDefault(__webpack_require__(2479));
+const cornerstone_core_1 = __importDefault(__webpack_require__(7371));
+const cornerstone_tools_1 = __importDefault(__webpack_require__(4030));
+const getToolState = cornerstone_tools_1.default.getToolState; //check
+const toolColors = cornerstone_tools_1.default.toolColors;
+const draw = cornerstone_tools_1.default.importInternal("drawing/draw");
+const drawLine = cornerstone_tools_1.default.importInternal("drawing/drawLine");
+const setShadow = cornerstone_tools_1.default.importInternal("drawing/setShadow");
+const getNewContext = cornerstone_tools_1.default.importInternal("drawing/getNewContext");
+const drawHandles = cornerstone_tools_1.default.importInternal("drawing/drawHandles");
+const { lengthCursor } = cornerstone_tools_1.default.importInternal("tools/cursors");
+const throttle = cornerstone_tools_1.default.importInternal("util/throttle");
+const getModule = cornerstone_tools_1.default.getModule;
+const getPixelSpacing = cornerstone_tools_1.default.importInternal("util/getPixelSpacing");
+const lineSegDistance = cornerstone_tools_1.default.importInternal("util/lineSegDistance");
+const BaseAnnotationTool = cornerstone_tools_1.default.importInternal("base/BaseAnnotationTool");
+/**
+ * @public
+ * @class LengthTool
+ * @memberof Tools.Annotation
+ * @classdesc Tool for measuring distances.
+ * @extends Tools.Base.BaseAnnotationTool
+ */
+class ManualLengthPlotTool extends BaseAnnotationTool {
+    constructor(props = {}) {
+        const defaultProps = {
+            name: "HorizontalTool",
+            supportedInteractionTypes: ["Mouse"],
+            svgCursor: lengthCursor,
+            configuration: {
+                drawHandles: true,
+                drawHandlesOnHover: false,
+                hideHandlesIfMoving: false,
+                renderDashed: false,
+                digits: 2
+            }
+        };
+        super(props, defaultProps);
+        this.name = "ManualLengthPlot";
+        this.plotlydata = [];
+        this.measuring = false;
+        this.lineNumber = null;
+        this.greenlineY = null;
+        this.newMeasurement = false;
+        this.configuration = {
+            drawHandles: true,
+            drawHandlesOnHover: false,
+            hideHandlesIfMoving: false,
+            renderDashed: false,
+            digits: 2
+        };
+        this.handleMouseUp = () => {
+            const eventData = this.eventData;
+            const { element } = eventData;
+            //const toolData: ToolData = getToolState(element, this.name);
+            const points = this.getPointsAlongLine(this.datahandles.start, this.datahandles.end, getPixelSpacing(eventData.image).colPixelSpacing);
+            const pixelValues = this.getPixelValuesAlongLine(this.datahandles.start, points, getPixelSpacing(eventData.image).colPixelSpacing, eventData);
+            // Plot the graph using the extracted points and pixel values
+            this.createPlot(points, pixelValues);
+        };
+        this.handleMouseUp = this.handleMouseUp.bind(this);
+        // Add event listeners to start and stop measurements
+        this.throttledUpdateCachedStats = throttle(this.updateCachedStats, 110);
+    }
+    getColor(y) {
+        let color = "red";
+        if (this.lineNumber === null || this.lineNumber === 3) {
+            color = "green";
+            this.greenlineY = y;
+            this.lineNumber = 1;
+        }
+        else if (y > this.greenlineY) {
+            color = this.color === "blue" ? "red" : "blue";
+            this.lineNumber = this.lineNumber + 1;
+        }
+        else if (y < this.greenlineY) {
+            color = this.color === "red" ? "blue" : "red";
+            this.lineNumber = this.lineNumber + 1;
+        }
+        return color;
+    }
+    clearCanvasAndPlot(eventData) {
+        // Clear the canvas
+        const { element } = eventData;
+        const toolData = getToolState(element, this.name);
+        if (toolData && toolData.data && toolData.data.length > 0) {
+            toolData.data.forEach((data) => {
+                data.visible = false;
+            });
+        }
+        // Clear the Plotly plot
+        const myPlotDiv = document.getElementById("myPlot");
+        plotly_js_dist_min_1.default.purge(myPlotDiv);
+        this.plotlydata = [];
+    }
+    createNewMeasurement(eventData) {
+        this.newMeasurement = true;
+        if (this.lineNumber === 3) {
+            this.clearCanvasAndPlot(eventData);
+        }
+        eventData.element.addEventListener("mouseup", () => this.handleMouseUp());
+        this.eventData = eventData;
+        const goodEventData = eventData && eventData.currentPoints && eventData.currentPoints.image;
+        if (!goodEventData) {
+            console.error(`required eventData not supplied to tool ${this.name}'s createNewMeasurement`);
+            return;
+        }
+        const { x, y } = eventData.currentPoints.image;
+        let color = this.getColor(y);
+        this.color = color;
+        return {
+            visible: true,
+            active: true,
+            color: color,
+            invalidated: true,
+            handles: {
+                start: {
+                    x,
+                    y,
+                    highlight: true,
+                    active: false
+                },
+                end: {
+                    x,
+                    y,
+                    highlight: true,
+                    active: true
+                },
+                textBox: {
+                    active: false,
+                    hasMoved: false,
+                    movesIndependently: false,
+                    drawnIndependently: true,
+                    allowedOutsideImage: true,
+                    hasBoundingBox: true
+                }
+            }
+        };
+    }
+    /**
+     *
+     *
+     * @param {*} element
+     * @param {*} data
+     * @param {*} coords
+     * @returns {Boolean}
+     */
+    pointNearTool(element, data, coords) {
+        const hasStartAndEndHandles = data && data.handles && data.handles.start && data.handles.end;
+        const validParameters = hasStartAndEndHandles;
+        if (!validParameters) {
+            console.warn(`invalid parameters supplied to tool ${this.name}'s pointNearTool`);
+            return false;
+        }
+        if (data.visible === false) {
+            return false;
+        }
+        return (lineSegDistance(element, data.handles.start, data.handles.end, coords) <
+            25);
+    }
+    updateCachedStats(image, element, data) {
+        const { rowPixelSpacing, colPixelSpacing } = getPixelSpacing(image);
+        // Set rowPixelSpacing and columnPixelSpacing to 1 if they are undefined (or zero)
+        const dx = (data.handles.end.x - data.handles.start.x) * (colPixelSpacing || 1);
+        const dy = (data.handles.end.y - data.handles.start.y) * (rowPixelSpacing || 1);
+        // Calculate the length, and create the text variable with the millimeters or pixels suffix
+        const length = Math.sqrt(dx * dx + dy * dy);
+        // Store the length inside the tool for outside access
+        data.length = length;
+        data.invalidated = false;
+    }
+    renderToolData(evt) {
+        const eventData = evt.detail;
+        const { image, element } = eventData;
+        const { handleRadius, drawHandlesOnHover, hideHandlesIfMoving, renderDashed } = this.configuration;
+        const toolData = getToolState(evt.currentTarget, this.name);
+        if (!toolData) {
+            return;
+        }
+        // We have tool data for this element - iterate over each one and draw it
+        const context = getNewContext(eventData.canvasContext.canvas);
+        const lineDash = getModule("globalConfiguration").configuration
+            .lineDash;
+        let start;
+        let end;
+        for (let i = 0; i < toolData.data.length; i++) {
+            const data = toolData.data[i];
+            if (data.visible === false) {
+                continue;
+            }
+            draw(context, (context) => {
+                // Configurable shadow
+                setShadow(context, this.configuration);
+                const color = toolColors.getColorIfActive(data);
+                if (data.active) {
+                    this.color = color;
+                    this.datahandles = data.handles;
+                }
+                const lineOptions = { color };
+                if (renderDashed) {
+                    lineOptions.lineDash = lineDash;
+                }
+                start = data.handles.start;
+                end = data.handles.end;
+                data.handles.end.y = data.handles.start.y;
+                // Draw the measurement line
+                drawLine(context, element, data.handles.start, data.handles.end, lineOptions);
+                // Draw the handles
+                const handleOptions = {
+                    color,
+                    handleRadius,
+                    drawHandlesIfActive: drawHandlesOnHover,
+                    hideHandlesIfMoving
+                };
+                if (this.configuration.drawHandles) {
+                    drawHandles(context, eventData, data.handles, handleOptions);
+                }
+                this.currentuuid = data.uuid;
+                // Update textbox stats
+                if (data.invalidated === true) {
+                    if (data.length) {
+                        this.throttledUpdateCachedStats(image, element, data);
+                    }
+                    else {
+                        this.updateCachedStats(image, element, data);
+                    }
+                }
+            });
+        }
+    }
+    getPointsAlongLine(startHandle, endHandle, colPixelSpacing) {
+        const points = [];
+        const numPoints = Math.floor(endHandle.x) - Math.floor(startHandle.x);
+        let x = Math.floor(startHandle.x) + 1;
+        points.push(x * colPixelSpacing);
+        for (let i = 0; i < numPoints; i++) {
+            x = x + 1;
+            points.push(x * colPixelSpacing); //from pixels to mm
+        }
+        return points;
+    }
+    getPixelValuesAlongLine(startHandle, points, colPixelSpacing, eventData) {
+        const pixelValues = [];
+        const yPoint = Math.floor(startHandle.y); // Adjust this if needed
+        for (let i = 0; i < points.length; i++) {
+            const xPoint = Math.floor(points[i] / colPixelSpacing);
+            const pixelValue = cornerstone_core_1.default.getStoredPixels(eventData.element, xPoint, yPoint, 1, 1)[0];
+            // Use cornerstone to get pixel value at the specified location
+            //const pixelValue = cornerstone.getPixelValue(image, xPoint, yPoint);
+            pixelValues.push(pixelValue);
+        }
+        return pixelValues;
+    }
+    createPlot(points, pixelValues) {
+        // Create a new trace for each measurement
+        const trace = {
+            x: points,
+            y: pixelValues,
+            type: "lines",
+            line: {
+                color: this.color
+            }
+        };
+        // Add the trace to the existing data array
+        if (this.newMeasurement) {
+            this.plotlydata.push(trace);
+        }
+        else {
+            const indexOfExistentData = this.plotlydata.findIndex(obj => obj.line.color === this.color);
+            this.plotlydata[indexOfExistentData] = trace;
+        }
+        const data = [...this.plotlydata];
+        // Combine all traces into a single data array
+        // Adjust the axis range based on all data
+        const allXValues = data.flatMap(trace => trace.x);
+        const allYValues = data.flatMap(trace => trace.y);
+        const layout = {
+            xaxis: {
+                range: [Math.min(...allXValues), Math.max(...allXValues)],
+                title: "position (mm)"
+            },
+            yaxis: {
+                range: [Math.min(...allYValues), Math.max(...allYValues)],
+                title: "GreyScaleValue (HU)"
+            },
+            title: "GreyScaleValues vs position",
+            responsive: true
+        };
+        // Display using Plotly
+        const myPlotDiv = document.getElementById("myPlot");
+        plotly_js_dist_min_1.default.react(myPlotDiv, data, layout);
+        this.newMeasurement = false;
+    }
+}
+exports["default"] = ManualLengthPlotTool;
+
+
 /***/ }),
 
 /***/ 4585:
@@ -163858,12 +164489,13 @@ exports.registerExternalTool = exports.setDefaultToolsProps = exports.getDefault
  */
 const lodash_1 = __webpack_require__(6486);
 const thresholdsBrushTool_1 = __importDefault(__webpack_require__(7073));
-// import Slice4DScrollMouseWheelTool from "./custom/4dSliceScrollTool";
 const polylineScissorsTool_1 = __importDefault(__webpack_require__(8990));
 const rectangleRoiOverlayTool_1 = __importDefault(__webpack_require__(1828));
 const ellipticalRoiOverlayTool_1 = __importDefault(__webpack_require__(3211));
 const BorderMagnifyTool_1 = __importDefault(__webpack_require__(7819));
 const customMouseWheelScrollTool_1 = __importDefault(__webpack_require__(4585));
+const LengthPlotTool_1 = __importDefault(__webpack_require__(2775));
+const ManualLengthPlotTool_1 = __importDefault(__webpack_require__(893));
 /**
  * These tools are added with `addDefaultTools()`
  */
@@ -164069,6 +164701,42 @@ const DEFAULT_TOOLS = {
         cleanable: true,
         class: "LengthTool"
     },
+    LengthPlot: {
+        name: "LengthPlot",
+        viewports: "all",
+        configuration: {
+            drawHandles: true,
+            drawHandlesOnHover: false,
+            hideHandlesIfMoving: false,
+            renderDashed: false,
+            digits: 2,
+            offset: 15
+        },
+        options: {
+            mouseButtonMask: 1,
+            supportedInteractionTypes: ["Mouse"]
+        },
+        cleanable: true,
+        class: "LengthPlotTool"
+    },
+    ManualLengthPlot: {
+        name: "ManualLengthPlot",
+        viewports: "all",
+        configuration: {
+            drawHandles: true,
+            drawHandlesOnHover: false,
+            hideHandlesIfMoving: false,
+            renderDashed: false,
+            digits: 2,
+            offset: 15
+        },
+        options: {
+            mouseButtonMask: 1,
+            supportedInteractionTypes: ["Mouse"]
+        },
+        cleanable: true,
+        class: "ManualLengthPlotTool"
+    },
     Angle: {
         name: "Angle",
         viewports: "all",
@@ -164299,7 +164967,9 @@ const dvTools = {
     RectangleRoiOverlayTool: rectangleRoiOverlayTool_1.default,
     EllipticalRoiOverlayTool: ellipticalRoiOverlayTool_1.default,
     BorderMagnifyTool: BorderMagnifyTool_1.default,
-    CustomMouseWheelScrollTool: customMouseWheelScrollTool_1.default
+    CustomMouseWheelScrollTool: customMouseWheelScrollTool_1.default,
+    LengthPlotTool: LengthPlotTool_1.default,
+    ManualLengthPlotTool: ManualLengthPlotTool_1.default
 };
 exports.dvTools = dvTools;
 /**
@@ -166848,7 +167518,7 @@ module.exports = JSON.parse('{"x00000000":{"tag":"x00000000","vr":"UL","vm":"1",
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"larvitar","keywords":["DICOM","imaging","medical","cornerstone"],"version":"2.1.8","description":"typescript library for parsing, loading, rendering and interacting with DICOM images","repository":{"url":"https://github.com/dvisionlab/Larvitar.git","type":"git"},"main":"dist/larvitar.js","types":"dist/index.d.ts","files":["dist","imaging/**/*.d.ts"],"scripts":{"coverage":"typescript-coverage-report","generate-docs":"node_modules/.bin/jsdoc -c jsdoc.json","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)","Laura Borghesi Re <laura.borghesi@dvisionlab.com> (https://www.dvisionlab.com)"],"license":"MIT","dependencies":{"@rollup/plugin-commonjs":"^17.1.0","cornerstone-core":"^2.6.1","cornerstone-file-image-loader":"^0.3.0","cornerstone-tools":"^6.0.7","cornerstone-wado-image-loader":"^4.13.2","cornerstone-web-image-loader":"^2.1.1","crypto-js":"^4.1.1","dicom-character-set":"^1.0.3","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","pdfjs-dist":"^3.8.162","plotly.js-dist-min":"^2.27.1","uuid":"^8.3.2"},"devDependencies":{"@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/pdfjs-dist":"^2.10.378","@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","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"}}');
+module.exports = JSON.parse('{"name":"larvitar","keywords":["DICOM","imaging","medical","cornerstone"],"version":"2.1.10","description":"typescript library for parsing, loading, rendering and interacting with DICOM images","repository":{"url":"https://github.com/dvisionlab/Larvitar.git","type":"git"},"main":"dist/larvitar.js","types":"dist/index.d.ts","files":["dist","imaging/**/*.d.ts"],"scripts":{"coverage":"typescript-coverage-report","generate-docs":"node_modules/.bin/jsdoc -c jsdoc.json","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)","Laura Borghesi Re <laura.borghesi@dvisionlab.com> (https://www.dvisionlab.com)"],"license":"MIT","dependencies":{"@rollup/plugin-commonjs":"^17.1.0","cornerstone-core":"^2.6.1","cornerstone-file-image-loader":"^0.3.0","cornerstone-tools":"^6.0.7","cornerstone-wado-image-loader":"^4.13.2","cornerstone-web-image-loader":"^2.1.1","crypto-js":"^4.1.1","dicom-character-set":"^1.0.3","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","pdfjs-dist":"^3.8.162","plotly.js-dist-min":"^2.27.1","uuid":"^8.3.2"},"devDependencies":{"@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/pdfjs-dist":"^2.10.378","@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","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"}}');
 
 /***/ })