@insync-stageplayer/plotly-chart 0.5.35-beta.1 → 0.5.35

package/lib/PlotlyGraph/PlotlyPlayback.js

@@ -1,48 +1,28 @@
-import React, { useCallback, useEffect, useState, useRef } from "react";
-import Plot from "react-plotly.js";
-import PropTypes from "prop-types";
-import { withResizeDetector } from "react-resize-detector";
-import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
-const normalizeRange = 1000;
-const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
-    let convertedDate = new Date(+inputMicroseconds / 1000);
-    return adjustWithLocalTimeZone(convertedDate);
-};
-const adjustWithLocalTimeZone = (date) => {
-    let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
-    return adjustedDate;
-};
-const convertDateToMicroseconds = (inputDate) => {
-    const convertIntoDate = new Date(inputDate);
-    return (convertIntoDate.getTime() * 1000 -
-        convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
-};
-const getMicroSecondStartAndLength = (originalFromDate, originalStopDate, totalTime) => {
-    const start = convertDateToMicroseconds(originalFromDate);
-    const end = convertDateToMicroseconds(originalStopDate);
-    let sLength = end - start;
-    const length = sLength + (totalTime % 1000) === totalTime ? totalTime : sLength;
-    return [start, length];
-};
-const convertMicrosecondsToDate = (inputTime) => {
-    const date = new Date(inputTime / 1000 - 3600 * 1000);
-    const pad = function (num) {
-        return (num < 10 ? "0" : "") + num;
-    };
-    return (date.getFullYear() +
-        "-" +
-        pad(date.getMonth() + 1) +
-        "-" +
-        pad(date.getDate()) +
-        " " +
-        pad(date.getHours()) +
-        ":" +
-        pad(date.getMinutes()) +
-        ":" +
-        pad(date.getSeconds()) +
-        "." +
-        pad(date.getMilliseconds()));
-};
+import React, { useCallback, useEffect, useState } from "react";
+import Plot from "react-plotly.js";
+import PropTypes from "prop-types";
+import { withResizeDetector } from "react-resize-detector";
+import { useTheme as useSelectedTheme, styled, } from "@insync-stageplayer/ui-components";
+const convertMicrosecondstoDateFormat = (inputMicroseconds) => {
+    let convertedDate = new Date(+inputMicroseconds / 1000);
+    return adjustWithLocalTimeZone(convertedDate);
+};
+const adjustWithLocalTimeZone = (date) => {
+    let adjustedDate = new Date(date.getTime() + date.getTimezoneOffset() * 60 * 1000);
+    return adjustedDate;
+};
+const convertDateToMicroseconds = (inputDate) => {
+    const convertIntoDate = new Date(inputDate);
+    return (convertIntoDate.getTime() * 1000 -
+        convertIntoDate.getTimezoneOffset() * 60 * 1000 * 1000);
+};
+const getMicroSecondStartAndLength = (originalFromDate, originalStopDate, totalTime) => {
+    const start = convertDateToMicroseconds(originalFromDate);
+    const end = convertDateToMicroseconds(originalStopDate);
+    let sLength = end - start;
+    const length = sLength + (totalTime % 1000) === totalTime ? totalTime : sLength;
+    return [start, length];
+};
 const StyledPlotly = styled(Plot) `
   rect.nsewdrag.cursor-ew-resize {
     cursor: zoom-in;
@@ -55,483 +35,287 @@ const StyledPlotly = styled(Plot) `
     cursor: grab;
     pointer-events: none !important;
   }
-`;
-export const PlotlyPlayback = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, totalTime, startPositionCurrentTimeIndicator, onRenderedWidth, onRenderedLeft, onRenderedTop, onRenderedHeight, onRenderedScrubbar, percentageHeight, }) => {
-    var _a;
-    const [plotData, setPlotData] = useState([]);
-    const [nowLine, setNowline] = useState((_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
-    const [layout, setLayout] = useState(null);
-    const selectedTheme = useSelectedTheme();
-    const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
-    const [yAxisLabelRight, setYAxisLabelRight] = useState("");
-    const [yAxisLabelLeftColor, setYAxisLabelLeftColor] = useState("");
-    const [yAxisLabelRightColor, setYAxisLabelRightColor] = useState("");
-    const plotlyRef = useRef();
-    const updateLayout = useCallback(() => {
-        // let plotlytimeindicator = [
-        const nowline_color = "rgba(255, 0, 0, 1)";
-        const annotations = [
-            {
-                xref: "paper",
-                yref: "paper",
-                x: nowLine,
-                xanchor: "right",
-                y: 1,
-                yanchor: "bottom",
-                text: "",
-                showarrow: displayArrow,
-                arrowhead: 0,
-                ax: 0,
-                ay: 4000,
-                arrowcolor: nowline_color,
-            },
-        ];
-        const shapes = [
-            {
-                type: "rect",
-                xref: "paper",
-                yref: "paper",
-                layer: "below",
-                x0: 0,
-                y0: 0,
-                x1: 1,
-                y1: -0.19,
-                fillcolor: selectedTheme.colors.scrubBarColor,
-                line: {
-                    color: selectedTheme.colors.scrubBarColor,
-                },
-            },
-        ];
-        const convertXRangeFrom = xScaleTickFormat.includes(":")
-            ? convertMicrosecondstoDateFormat(xRange.from > 0 || selectedTheme.name !== "noldus"
-                ? xRange.length === totalTime
-                    ? xRange.from
-                    : xRange.from + xRange.length > totalTime &&
-                        selectedTheme.name === "noldus"
-                        ? totalTime - xRange.length
-                        : xRange.from
-                : 0)
-            : xRange.from / 1e6;
-        const convertXRangeTo = xScaleTickFormat.includes(":")
-            ? convertMicrosecondstoDateFormat(xRange.from > 0 || selectedTheme.name !== "noldus"
-                ? xRange.length === totalTime
-                    ? xRange.length + xRange.from
-                    : xRange.from + xRange.length > totalTime &&
-                        selectedTheme.name === "noldus"
-                        ? totalTime
-                        : xRange.from + xRange.length
-                : xRange.length)
-            : (xRange.from + xRange.length) / 1e6;
-        const minY = yScaleRange[0].min;
-        const maxY = yScaleRange[0].max;
-        // only add y label when set, otherwise will give a lot of extra margin
-        const yAxisWithLabel = yAxisLabel && yAxisLabelLeft !== ""
-            ? {
-                title: yAxisLabelLeft,
-                automargin: "width",
-                titlefont: {
-                    color: yAxisLabelLeftColor,
-                },
-            }
-            : {
-                // a bit of margin for the y axis otherwise
-                anchor: "free",
-                shift: 5,
-            };
-        const sharedYaxis = Object.assign(Object.assign({}, yAxisWithLabel), { fixedrange: true, rangemode: "", showline: true, showticklabels: selectedTheme.name === "noldus" ? false : true, linewidth: 2, linecolor: selectedTheme.colors.accent, tickformat: null });
-        // Noldus doesn't need the precision, where MARIN wants it to be as precise as possible
-        // MARIN wants it's own normalization when working with different units (e.g kn and m)
-        const yAxis = selectedTheme.name === "noldus"
-            ? Object.assign(Object.assign({}, sharedYaxis), { hoverformat: ".2f" }) : Object.assign(Object.assign({}, sharedYaxis), { range: [minY, maxY], showline: shouldNormalize ? false : true, showticklabels: shouldNormalize ? false : true });
-        let defaultLayout = {
-            // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
-            hovermode: "x unified",
-            yaxis: yAxis,
-            xaxis: {
-                rangemode: "",
-                showline: true,
-                linewidth: 2,
-                linecolor: selectedTheme.colors.accent,
-                fixedrange: false,
-                range: [convertXRangeFrom, convertXRangeTo],
-                tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
-                // dtick: 5, // removing this allows for automatic per zoom level
-                ticks: "outside top",
-                ticklen: 15,
-                tickcolor: selectedTheme.colors.dtickColor,
-                ticklabelposition: "inside",
-                minor: {
-                    ticks: "inside top",
-                    ticklen: 9,
-                    tickmode: "auto",
-                    nticks: 10,
-                    tickcolor: selectedTheme.colors.dtickMinorColor,
-                },
-            },
-            showlegend: false,
-            autosize: true,
-            margin: { l: 25, r: 10, t: 20, b: 20 },
-            paper_bgcolor: selectedTheme.colors.background,
-            plot_bgcolor: selectedTheme.colors.background,
-            font: { color: selectedTheme.colors.foreground },
-        };
-        // only add y label when set, setting it empty otherwise will give extra margin
-        const yAxis2WithLabel = yAxisLabel && yAxisLabelRight !== ""
-            ? {
-                title: yAxisLabelRight,
-                titlefont: {
-                    color: yAxisLabelRightColor,
-                },
-            }
-            : {};
-        // Check if a second y-axis needs to be added
-        if (displaySecondYAxis && metadata.length == 2) {
-            const yAxis2 = Object.assign(Object.assign({}, yAxis2WithLabel), { fixedrange: true, range: [yScaleRange[1].min, yScaleRange[1].max], anchor: "x", overlaying: "y", side: "right", automargin: "width" });
-            defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
-        }
-        // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
-        // still scrubbing in plotly
-        if (!scrubbing) {
-            setLayout(Object.assign(Object.assign({}, defaultLayout), { shapes, annotations }));
-        }
-    }, [
-        selectedTheme,
-        xRange,
-        xScaleTickFormat,
-        yAxisLabel,
-        yAxisLabelLeft,
-        yAxisLabelRight,
-        displaySecondYAxis,
-        displayArrow,
-        scrubbing,
-        metadata,
-        nowLine,
-        totalTime,
-        yAxisLabelLeftColor,
-        yAxisLabelRightColor,
-    ]);
-    const onRelayout = (e) => {
-        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
-            let selection;
-            if (xScaleTickFormat.includes(":")) {
-                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
-                selection = {
-                    from: from,
-                    length: length,
-                };
-            }
-            else {
-                selection = {
-                    from: e["xaxis.range[0]"] * 1e6,
-                    length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
-                };
-            }
-            if (selectedTheme.name === "noldus") {
-                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
-                // fix if we go below zero time
-                if (selection.from < 0) {
-                    selection.from = 0; //  daniel fix 3 mar 2025
-                    sessionStorage.setItem("startSelection", 0);
-                    sessionStorage.setItem("endSelection", (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6); // no date format error?
-                }
-                // fix if we go over end time
-                // console.log("DANIEL 1 totaltime="+totalTime+" RE="+e["xaxis.range[1]"]+" NL="+(from+length));
-                if (from + length > totalTime) {
-                    var newenddate = convertMicrosecondsToDate(totalTime);
-                    var newstartdate = convertMicrosecondsToDate(totalTime - length);
-                    //console.log("DANIEL 3 out of range fix new start="+newstartdate+" new end="+newenddate+" len="+length);
-                    sessionStorage.setItem("endSelection", newenddate);
-                    sessionStorage.setItem("startSelection", newstartdate);
-                }
-            }
-            onStopSelect({ selection });
-        }
-    };
-    const onRelayouting = (e) => {
-        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
-            let seekTime;
-            if (xScaleTickFormat.includes(":")) {
-                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
-                if (startPositionCurrentTimeIndicator === "0") {
-                    if (selectedTheme.name === "noldus") {
-                        // noldus below zero fix
-                        if (from < 0) {
-                            // daniel fix 19feb2025
-                            sessionStorage.setItem("startSelection", convertMicrosecondsToDate(0));
-                            sessionStorage.setItem("endSelection", convertMicrosecondsToDate(length));
-                            onDrag(0);
-                        }
-                        else {
-                            sessionStorage.setItem("startSelection", convertMicrosecondsToDate(from));
-                            sessionStorage.setItem("endSelection", convertMicrosecondsToDate(from + length));
-                            onDrag(from);
-                        }
-                        // noldus out of end range fix
-                        if (from + length > totalTime) {
-                            sessionStorage.setItem("endSelection", convertMicrosecondsToDate(totalTime));
-                            sessionStorage.setItem("startSelection", convertMicrosecondsToDate(totalTime - length));
-                            //onDrag(totalTime-length);
-                        }
-                    }
-                }
-                else {
-                    const possibleSeekTime = length * nowLine + from;
-                    seekTime =
-                        possibleSeekTime > totalTime
-                            ? totalTime
-                            : possibleSeekTime < 0
-                                ? 0
-                                : possibleSeekTime;
-                    sessionStorage.setItem("startSelection", from); // is this correct for marin should not also be date format?
-                    sessionStorage.setItem("endSelection", length); // is this correct for marin should not also be date format, length wrong?
-                    onDrag(seekTime);
-                }
-            }
-            else {
-                // set on drag
-                if (startPositionCurrentTimeIndicator === "0") {
-                    seekTime = e["xaxis.range[0]"] * 1e6;
-                    sessionStorage.setItem("startSelection", e["xaxis.range[0]"] * 1e6);
-                    sessionStorage.setItem("endSelection", e["xaxis.range[1]"] * 1e6);
-                }
-                else {
-                    seekTime =
-                        ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
-                            e["xaxis.range[0]"]) *
-                            1e6;
-                    sessionStorage.setItem("startSelection", e["xaxis.range[0]"] * 1e6);
-                    sessionStorage.setItem("endSelection", e["xaxis.range[1]"] * 1e6);
-                }
-                onDrag(seekTime);
-            }
-        }
-    };
-    // MARIN data should be normalized if the unit of the different signals are not the same
-    const shouldNormalize = React.useMemo(() => {
-        const units = metadata.reduce((acc, curr) => {
-            if (acc.indexOf(curr.unit) < 0) {
-                return [...acc, curr.unit];
-            }
-            return acc;
-        }, []);
-        return displaySecondYAxis ? units.length > 2 : units.length > 1;
-    }, [metadata, displaySecondYAxis]);
-    // Getting the range for the y-axis
-    const yScaleRange = React.useMemo(() => {
-        if (!shouldNormalize && metadata) {
-            if (displaySecondYAxis && metadata.length == 2) {
-                return [
-                    { min: metadata[0].min, max: metadata[0].max },
-                    { min: metadata[1].min, max: metadata[1].max },
-                ];
-            }
-            else {
-                const min = metadata.reduce((acc, l) => Math.min(acc, l.min), Infinity);
-                const max = metadata.reduce((acc, l) => Math.max(acc, l.max), -Infinity);
-                return [{ min, max }];
-            }
-        }
-        return [{ min: 0, max: 1 }];
-    }, [shouldNormalize, metadata, displaySecondYAxis]);
-    useEffect(() => {
-        const plotDataArr = [];
-        data.forEach((signal, idx) => {
-            // For Noldus we need to filter out the x from the objects, MARIN directly returns a Plotly optimized format
-            const x = selectedTheme.name === "noldus"
-                ? signal.map((item) => {
-                    if (xScaleTickFormat.includes(":")) {
-                        const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
-                        return xDateFormatted;
-                    }
-                    else {
-                        const xValue = +item.x / 1e6;
-                        return xValue;
-                    }
-                })
-                : signal[0].map((item) => {
-                    if (xScaleTickFormat.includes(":")) {
-                        const xDateFormatted = convertMicrosecondstoDateFormat(+item);
-                        return xDateFormatted;
-                    }
-                    else {
-                        const xValue = +item / 1e6;
-                        return xValue;
-                    }
-                });
-            // For Noldus we need to filter out the y from the objects, MARIN directly returns a Plotly optimized format
-            const yVal = selectedTheme.name === "noldus"
-                ? signal.map((item) => {
-                    return item.y;
-                })
-                : signal[1];
-            const y = handleYValue(yVal, idx);
-            const sharedSignalData = {
-                x,
-                y,
-                type: "scattergl",
-                mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
-                    ? "lines"
-                    : "lines+markers",
-                name: metadata[idx].name,
-                marker: {
-                    color: metadata[idx].color,
-                    size: 5,
-                    line: {
-                        color: metadata[idx].color,
-                        width: 1,
-                    },
-                },
-            };
-            const signalData = getSignalData(sharedSignalData, yVal);
-            plotDataArr.push(signalData);
-        });
-        // Check if a second y-axis needs to be added
-        if (displaySecondYAxis && metadata.length == 2) {
-            plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
-        }
-        // Setting y-axis labels if needed and meeting the requirements
-        if (metadata.length == 1) {
-            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
-            setYAxisLabelLeftColor(yAxisLabel ? selectedTheme.colors.foreground : "");
-        }
-        else if (metadata.length == 2 && displaySecondYAxis) {
-            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
-            setYAxisLabelLeftColor(yAxisLabel ? metadata[0].color : "");
-            setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
-            setYAxisLabelRightColor(yAxisLabel ? metadata[1].color : "");
-        }
-        else {
-            setYAxisLabelLeft("");
-            setYAxisLabelRight("");
-            setYAxisLabelLeftColor("");
-            setYAxisLabelRightColor("");
-        }
-        setPlotData(plotDataArr);
-    }, [
-        data,
-        metadata,
-        xScaleTickFormat,
-        xRange.length,
-        yAxisLabel,
-        displaySecondYAxis,
-        selectedTheme.colors.foreground,
-        selectedTheme.name,
-    ]);
-    useEffect(() => {
-        updateLayout();
-    }, [updateLayout]);
-    useEffect(() => {
-        if (!scrubbing) {
-            setNowline(xRange.nowline);
-        }
-        sessionStorage.setItem("nl", xRange.nowline);
-    }, [scrubbing, xRange.nowline]);
-    const afterPlot = () => {
-        //console.log(plotlyRef.current);
-        //console.log(plotlyRef.current.el);
-        // TODO: get from plotlyRef instead of document
-        var layer = document.getElementsByClassName("axesclip")[0].firstChild;
-        const yAxisSignalLeft = layer.x.baseVal.value;
-        const yAxisSignalWidth = layer.width.baseVal.value;
-        const xAxisSignalTop = layer.y.baseVal.value;
-        const xAxisSignalHeight = layer.height.baseVal.value;
-        onRenderedLeft(yAxisSignalLeft);
-        onRenderedWidth(yAxisSignalWidth);
-        onRenderedTop(xAxisSignalTop);
-        onRenderedHeight(xAxisSignalHeight);
-        // TODO: get from plotlyRef instead of document
-        const scrubbar = document.getElementsByClassName("ewdrag")[0];
-        const scrubbarHeight = scrubbar.height.baseVal.value;
-        onRenderedScrubbar(scrubbarHeight);
-    };
-    const handleYValue = (yVal, idx) => {
-        // Noldus wants the Y data to be relative between 0 and 1
-        // MARIN data engineers always wants the data as it is
-        if (selectedTheme.name === "noldus" || shouldNormalize) {
-            const { min, max } = metadata[idx];
-            const range = max - min;
-            const y = yVal.map((value) => {
-                return (value - min) / range;
-            });
-            return y;
-        }
-        else {
-            return yVal;
-        }
-    };
-    const getSignalData = (sharedSignalData, yVal) => {
-        if (selectedTheme.name === "noldus") {
-            const noldusSignalData = {
-                hovertemplate: "%{customdata:.2f}",
-                customdata: yVal.map((point) => `${point}`), // Setting raw data for each point
-            };
-            return Object.assign(Object.assign({}, sharedSignalData), noldusSignalData);
-        }
-        else {
-            if (shouldNormalize) {
-                const marinSignalData = {
-                    hovertemplate: "%{customdata}",
-                    customdata: yVal.map((point) => `${point}`),
-                };
-                return Object.assign(Object.assign({}, sharedSignalData), marinSignalData);
-            }
-            else {
-                return sharedSignalData;
-            }
-        }
-    };
-    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: plotData, layout: layout, style: { width: "100%", height: percentageHeight + "%" }, config: {
-            displaylogo: false,
-            displayModeBar: false,
-            responsive: true,
-            doubleClick: false,
-            showTips: false,
-        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e), onAfterPlot: () => afterPlot(), ref: plotlyRef }));
-});
-PlotlyPlayback.defaultProps = {
-    xRange: null,
-    data: [],
-    metadata: [],
-    onStopSelect: () => { },
-    onDrag: () => { },
-    xScaleTickFormat: "SS",
-    scrubbing: false,
-    yAxisLabel: false,
-    displaySecondYAxis: false,
-    displayArrow: true,
-    selectedTheme: null,
-    totalTime: null,
-    startPositionCurrentTimeIndicator: "0.5",
-};
-const dataElement = PropTypes.shape({
-    x: PropTypes.number,
-    y: PropTypes.number,
-});
-const metadataElement = PropTypes.shape({
-    name: PropTypes.string,
-    color: PropTypes.string,
-});
-PlotlyPlayback.propTypes = {
-    xRange: PropTypes.shape({
-        from: PropTypes.number,
-        length: PropTypes.number,
-    }),
-    data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
-    metadata: PropTypes.arrayOf(metadataElement),
-    onStopSelect: PropTypes.func,
-    onDrag: PropTypes.func,
-    xScaleTickFormat: PropTypes.string,
-    scrubbing: PropTypes.bool,
-    yAxisLabel: PropTypes.bool,
-    displaySecondYAxis: PropTypes.bool,
-    displayArrow: PropTypes.bool,
-    selectedTheme: PropTypes.shape({
-        colors: PropTypes.shape({
-            background: PropTypes.string,
-        }),
-        name: PropTypes.string,
-    }),
-    totalTime: PropTypes.number,
-    startPositionCurrentTimeIndicator: PropTypes.string,
-};
+`;
+export const PlotlyPlayback = withResizeDetector(({ xRange, data, metadata, onStopSelect, onDrag, xScaleTickFormat, scrubbing, yAxisLabel, displaySecondYAxis, displayArrow, totalTime, }) => {
+    var _a;
+    const [plotData, setPlotData] = useState([]);
+    const [nowLine, setNowline] = useState((_a = sessionStorage.getItem("nl")) !== null && _a !== void 0 ? _a : 0);
+    const [layout, setLayout] = useState(null);
+    const selectedTheme = useSelectedTheme();
+    const [yAxisLabelLeft, setYAxisLabelLeft] = useState("");
+    const [yAxisLabelRight, setYAxisLabelRight] = useState("");
+    const updateLayout = useCallback(() => {
+        let annotations = [
+            {
+                xref: "paper",
+                yref: "paper",
+                x: nowLine,
+                xanchor: "right",
+                y: 1,
+                yanchor: "bottom",
+                text: "",
+                showarrow: displayArrow,
+                arrowhead: 0,
+                ax: 0,
+                ay: 1000,
+                arrowcolor: "red",
+            },
+        ];
+        const convertXRangeFrom = xScaleTickFormat.includes(":")
+            ? convertMicrosecondstoDateFormat(xRange.from > 0
+                ? xRange.length === totalTime
+                    ? 0
+                    : xRange.from + xRange.length > totalTime
+                        ? totalTime - xRange.length
+                        : xRange.from
+                : 0)
+            : xRange.from / 1e6;
+        const convertXRangeTo = xScaleTickFormat.includes(":")
+            ? convertMicrosecondstoDateFormat(xRange.from > 0
+                ? xRange.length === totalTime
+                    ? xRange.length
+                    : xRange.from + xRange.length > totalTime
+                        ? totalTime
+                        : xRange.from + xRange.length
+                : xRange.length)
+            : (xRange.from + xRange.length) / 1e6;
+        let defaultLayout = {
+            // this hovermode setting creates a hover-over legend for all the signals at the same time. It also adds a spike line
+            hovermode: "x unified",
+            yaxis: {
+                fixedrange: true,
+                rangemode: "",
+                hoverformat: ".2f",
+                range: selectedTheme.name === "noldus" ? [0, 1] : [],
+                title: yAxisLabelLeft,
+                showline: true,
+                showticklabels: false,
+                linewidth: 2,
+                linecolor: selectedTheme.colors.accent,
+                tickformat: null,
+            },
+            xaxis: {
+                rangemode: "",
+                showline: false,
+                linewidth: 2,
+                linecolor: selectedTheme.colors.accent,
+                fixedrange: false,
+                range: [convertXRangeFrom, convertXRangeTo],
+                tickformat: xScaleTickFormat.includes(":") ? "%H:%M:%S" : null,
+            },
+            showlegend: false,
+            autosize: true,
+            margin: { l: 25, r: 10, t: 20, b: 20 },
+            paper_bgcolor: selectedTheme.colors.background,
+            plot_bgcolor: selectedTheme.colors.background,
+            font: { color: selectedTheme.colors.foreground },
+        };
+        // Check if a second y-axis needs to be added
+        if (displaySecondYAxis && metadata.length == 2) {
+            const yAxis2 = {
+                fixedrange: true,
+                title: yAxisLabelRight,
+                anchor: "x",
+                overlaying: "y",
+                side: "right",
+            };
+            defaultLayout = Object.assign(Object.assign({}, defaultLayout), { yaxis2: yAxis2 });
+        }
+        // when scrubbing plotly is in charge, this to prevent the xRange to update and mess while
+        // still scrubbing in plotly
+        if (!scrubbing) {
+            setLayout(Object.assign(Object.assign({}, defaultLayout), { annotations }));
+        }
+    }, [
+        selectedTheme,
+        xRange,
+        xScaleTickFormat,
+        yAxisLabelLeft,
+        yAxisLabelRight,
+        displaySecondYAxis,
+        displayArrow,
+        scrubbing,
+        metadata,
+        nowLine,
+    ]);
+    const onRelayout = (e) => {
+        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
+            let selection;
+            if (xScaleTickFormat.includes(":")) {
+                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
+                selection = {
+                    from: from,
+                    length: length,
+                };
+            }
+            else {
+                selection = {
+                    from: e["xaxis.range[0]"] * 1e6,
+                    length: (e["xaxis.range[1]"] - e["xaxis.range[0]"]) * 1e6,
+                };
+            }
+            onStopSelect({ selection });
+        }
+    };
+    const onRelayouting = (e) => {
+        if (e["xaxis.range[0]"] && e["xaxis.range[1]"]) {
+            let seekTime;
+            if (xScaleTickFormat.includes(":")) {
+                const [from, length] = getMicroSecondStartAndLength(e["xaxis.range[0]"], e["xaxis.range[1]"], totalTime);
+                const possibleSeekTime = length * nowLine + from;
+                seekTime =
+                    possibleSeekTime > totalTime
+                        ? totalTime
+                        : possibleSeekTime < 0
+                            ? 0
+                            : possibleSeekTime;
+            }
+            else {
+                seekTime =
+                    ((e["xaxis.range[1]"] - e["xaxis.range[0]"]) / 2 +
+                        e["xaxis.range[0]"]) *
+                        1e6;
+            }
+            onDrag(seekTime);
+        }
+    };
+    useEffect(() => {
+        updateLayout();
+        const plotDataArr = [];
+        data.forEach((signal, idx) => {
+            const x = signal.map((item) => {
+                if (xScaleTickFormat.includes(":")) {
+                    const xDateFormatted = convertMicrosecondstoDateFormat(+item.x);
+                    return xDateFormatted;
+                }
+                else {
+                    const xDateFormatted = +item.x / 1e6;
+                    return xDateFormatted;
+                }
+            });
+            const yVal = signal.map((item) => {
+                return item.y;
+            });
+            const { min, max } = metadata[idx];
+            const range = max - min;
+            const y = yVal.map((value) => {
+                return (value - min) / range;
+            });
+            const signalData = {
+                x,
+                y,
+                hovertemplate: "%{customdata:.2f}",
+                customdata: yVal.map((point) => `${point}`),
+                type: "scattergl",
+                mode: metadata[idx].frequency * (xRange.length / 1000 / 1000) > 250
+                    ? "lines"
+                    : "lines+markers",
+                name: metadata[idx].name,
+                marker: {
+                    color: metadata[idx].color,
+                    size: 5,
+                    line: {
+                        color: metadata[idx].color,
+                        width: 1,
+                    },
+                },
+            };
+            plotDataArr.push(signalData);
+        });
+        // Check if a second y-axis needs to be added
+        if (displaySecondYAxis && metadata.length == 2) {
+            plotDataArr[1] = Object.assign(Object.assign({}, plotDataArr[1]), { yaxis: "y2" });
+        }
+        // Setting y-axis labels if needed and meeting the requirements
+        if (metadata.length == 1) {
+            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
+        }
+        else if (metadata.length == 2 && displaySecondYAxis) {
+            setYAxisLabelLeft(yAxisLabel ? metadata[0].name : "");
+            setYAxisLabelRight(yAxisLabel ? metadata[1].name : "");
+        }
+        else {
+            setYAxisLabelLeft("");
+            setYAxisLabelRight("");
+        }
+        setPlotData(plotDataArr);
+    }, [
+        data,
+        metadata,
+        updateLayout,
+        xScaleTickFormat,
+        xRange,
+        scrubbing,
+        yAxisLabel,
+        displaySecondYAxis,
+    ]);
+    useEffect(() => {
+        if (!scrubbing) {
+            if (xRange.from < 0) {
+                let d = (xRange.length / 2 + xRange.from) / xRange.length;
+                setNowline(d);
+            }
+            else {
+                if (xRange.length === totalTime) {
+                    setNowline(0.5 + xRange.from / totalTime);
+                }
+                else if (xRange.from + xRange.length > totalTime) {
+                    setNowline(0.5 + (xRange.from - (totalTime - xRange.length)) / xRange.length);
+                }
+                else {
+                    setNowline(0.5);
+                }
+            }
+        }
+        sessionStorage.setItem("nl", nowLine);
+    }, [plotData, xRange]);
+    return (React.createElement(StyledPlotly, { useResizeHandler: true, className: "plot-div", data: plotData, layout: layout, style: { width: "100%", height: "100%" }, config: {
+            displaylogo: false,
+            displayModeBar: false,
+            responsive: true,
+        }, onRelayout: (e) => onRelayout(e), onRelayouting: (e) => onRelayouting(e) }));
+});
+PlotlyPlayback.defaultProps = {
+    xRange: null,
+    data: [],
+    metadata: [],
+    onStopSelect: () => { },
+    onDrag: () => { },
+    xScaleTickFormat: "SS",
+    scrubbing: false,
+    yAxisLabel: false,
+    displaySecondYAxis: false,
+    displayArrow: true,
+    selectedTheme: null,
+    totalTime: null,
+};
+const dataElement = PropTypes.shape({
+    x: PropTypes.number,
+    y: PropTypes.number,
+});
+const metadataElement = PropTypes.shape({
+    name: PropTypes.string,
+    color: PropTypes.string,
+});
+PlotlyPlayback.propTypes = {
+    xRange: PropTypes.shape({
+        from: PropTypes.number,
+        length: PropTypes.number,
+    }),
+    data: PropTypes.arrayOf(PropTypes.arrayOf(dataElement), PropTypes.arrayOf(dataElement)),
+    metadata: PropTypes.arrayOf(metadataElement),
+    onStopSelect: PropTypes.func,
+    onDrag: PropTypes.func,
+    xScaleTickFormat: PropTypes.string,
+    scrubbing: PropTypes.bool,
+    yAxisLabel: PropTypes.bool,
+    displaySecondYAxis: PropTypes.bool,
+    displayArrow: PropTypes.bool,
+    selectedTheme: PropTypes.shape({
+        colors: PropTypes.shape({
+            background: PropTypes.string,
+        }),
+    }),
+    totalTime: PropTypes.number,
+};
 //# sourceMappingURL=PlotlyPlayback.js.map