@tetrascience-npm/tetrascience-react-ui 0.7.0-beta.107.1 → 0.7.0-beta.128.1

package/dist/components/charts/Chromatogram/plotBuilder.js

@@ -0,0 +1,216 @@
+import { CHART_COLORS as k } from "../../../utils/colors.js";
+import { getLoadedPlotly as T } from "../plotly-loader.js";
+import { createBoundaryMarkerTraces as I } from "./boundaryMarkers.js";
+import { CHROMATOGRAM_TRACE as y, CHROMATOGRAM_LAYOUT as h } from "./constants.js";
+import { buildHoverExtraContent as C, collectPeaksWithBoundaryData as w } from "./dataProcessing.js";
+import { createRegionOverlayTraces as A } from "./regionOverlays.js";
+import { CHART_FONT_FAMILY as m } from "../../../hooks/use-plotly-theme.js";
+function z(i) {
+  const {
+    processedSeries: e,
+    processedAnnotations: a,
+    allDetectedPeaks: n,
+    allPeaksForInteraction: s,
+    showMarkers: p,
+    markerSize: d,
+    xAxisTitle: f,
+    yAxisTitle: l,
+    boundaryMarkers: g
+  } = i, u = e.map((o, c) => {
+    const t = o.color || k[c % k.length], x = C(o.name, o.metadata), r = {
+      x: o.x,
+      y: o.y,
+      type: "scatter",
+      mode: p ? "lines+markers" : "lines",
+      name: o.name,
+      line: {
+        color: t,
+        width: y.BASE_LINE_WIDTH
+      },
+      hovertemplate: `%{x:.2f} ${f}<br>%{y:.2f} ${l}<extra>${x}</extra>`
+    };
+    return p && (r.marker = { size: d, color: t }), r;
+  });
+  if (g !== "none") {
+    const o = w(
+      n,
+      a,
+      e
+    );
+    o.length > 0 && u.push(...I(o));
+  }
+  if (a.forEach((o) => {
+    o.regionOverlay && e[0] && u.push(...A([o], 0, e[0]));
+  }), n.forEach(({ peaks: o, seriesIndex: c }) => {
+    o.some((t) => t.regionOverlay) && e[c] && u.push(...A(o, c, e[c]));
+  }), s.length > 0) {
+    const o = s.some((t) => t.peak.hoverText), c = {
+      x: s.map((t) => t.peak.x),
+      y: s.map((t) => t.peak.y),
+      type: "scatter",
+      mode: "markers",
+      marker: { size: 14, opacity: 0 },
+      showlegend: !1,
+      name: "",
+      customdata: s.map((t) => ({
+        id: t.peak.id,
+        peak: t.peak,
+        seriesIndex: t.seriesIndex,
+        seriesName: t.seriesName,
+        isAutoDetected: t.isAutoDetected
+      })),
+      ...o ? {
+        hovertemplate: s.map(
+          (t) => t.peak.hoverText ? `${t.peak.hoverText}<extra></extra>` : "<extra></extra>"
+        )
+      } : { hovertemplate: "<extra></extra>" }
+    };
+    u.push(c);
+  }
+  return u;
+}
+function L(i) {
+  const {
+    title: e,
+    titleFontSize: a,
+    titleTopMargin: n,
+    width: s,
+    height: p,
+    xAxisTitle: d,
+    yAxisTitle: f,
+    xRange: l,
+    yRange: g,
+    showLegend: u,
+    seriesCount: o,
+    showGridX: c,
+    showGridY: t,
+    showCrosshairs: x,
+    theme: r,
+    peakAnnotations: _
+  } = i;
+  return {
+    title: e ? {
+      text: e,
+      font: { size: a, family: m, color: r.textColor }
+    } : void 0,
+    width: s,
+    height: p,
+    margin: {
+      l: h.MARGIN_LEFT,
+      r: h.MARGIN_RIGHT,
+      b: h.MARGIN_BOTTOM,
+      t: e ? n ?? h.MARGIN_TOP_WITH_TITLE : h.MARGIN_TOP_NO_TITLE,
+      pad: h.MARGIN_PAD
+    },
+    paper_bgcolor: r.paperBg,
+    plot_bgcolor: r.plotBg,
+    font: { family: m },
+    hovermode: x ? "x" : "x unified",
+    dragmode: "zoom",
+    xaxis: {
+      title: {
+        text: d,
+        font: { size: 14, color: r.textSecondary, family: m },
+        standoff: 15
+      },
+      showgrid: c,
+      gridcolor: r.gridColor,
+      linecolor: r.lineColor,
+      linewidth: 1,
+      range: l,
+      autorange: !l,
+      zeroline: !1,
+      tickfont: { size: 12, color: r.textColor, family: m },
+      showspikes: x,
+      spikemode: "across",
+      spikesnap: "cursor",
+      spikecolor: r.spikeColor,
+      spikethickness: 1,
+      spikedash: "dot"
+    },
+    yaxis: {
+      title: {
+        text: f,
+        font: { size: 14, color: r.textSecondary, family: m },
+        standoff: 10
+      },
+      showgrid: t,
+      gridcolor: r.gridColor,
+      linecolor: r.lineColor,
+      linewidth: 1,
+      range: g,
+      autorange: !g,
+      zeroline: !1,
+      tickfont: { size: 12, color: r.textColor, family: m },
+      showspikes: x,
+      spikemode: "across",
+      spikesnap: "cursor",
+      spikecolor: r.spikeColor,
+      spikethickness: 1,
+      spikedash: "dot"
+    },
+    legend: {
+      x: 0.5,
+      y: -0.15,
+      xanchor: "center",
+      yanchor: "top",
+      orientation: "h",
+      font: { size: 12, color: r.textColor, family: m }
+    },
+    showlegend: u && o > 1,
+    annotations: _
+  };
+}
+function R(i) {
+  const { showExportButton: e, width: a, height: n } = i;
+  return {
+    responsive: !0,
+    displayModeBar: !0,
+    displaylogo: !1,
+    modeBarButtonsToRemove: [
+      "lasso2d",
+      "select2d",
+      ...e ? [] : ["toImage"]
+    ],
+    ...e && {
+      toImageButtonOptions: {
+        format: "png",
+        filename: "chromatogram",
+        width: a,
+        height: n
+      }
+    }
+  };
+}
+function b(i, e, a, n, s) {
+  return (p) => {
+    const d = p.points[0];
+    if (d && d.curveNumber < e) {
+      const l = d.curveNumber;
+      a.current !== l && (a.current !== null && T().restyle(i, { "line.width": y.BASE_LINE_WIDTH }, [a.current]), T().restyle(i, { "line.width": y.BASE_LINE_WIDTH * s }, [l]), a.current = l);
+    }
+    const f = p.points.find((l) => l.customdata != null);
+    f && n.current?.(f.customdata);
+  };
+}
+function D(i) {
+  return (e) => {
+    if (!i.current) return;
+    const a = e.points.find((n) => n.customdata != null);
+    a && i.current(a.customdata);
+  };
+}
+function G(i, e, a) {
+  return () => {
+    a.current?.(null), e.current !== null && (T().restyle(i, { "line.width": y.BASE_LINE_WIDTH }, [e.current]), e.current = null);
+  };
+}
+export {
+  R as buildConfig,
+  L as buildLayout,
+  z as buildTraceData,
+  D as createClickHandler,
+  b as createHoverHandler,
+  G as createUnhoverHandler
+};
+//# sourceMappingURL=plotBuilder.js.map

package/dist/components/charts/Chromatogram/plotBuilder.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"plotBuilder.js","sources":["../../../../src/components/charts/Chromatogram/plotBuilder.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\nimport { getLoadedPlotly } from \"../plotly-loader\";\n\nimport { createBoundaryMarkerTraces } from \"./boundaryMarkers\";\nimport { CHROMATOGRAM_LAYOUT, CHROMATOGRAM_TRACE } from \"./constants\";\nimport { buildHoverExtraContent, collectPeaksWithBoundaryData } from \"./dataProcessing\";\nimport { createRegionOverlayTraces } from \"./regionOverlays\";\n\nimport type { ChromatogramSeries, PeakAnnotation, BoundaryMarkerStyle, PeakSelectEvent } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY, type PlotlyThemeColors } from \"@/hooks/use-plotly-theme\";\n\ntype PeakForInteraction = {\n  peak: PeakAnnotation & { id: string };\n  seriesIndex: number;\n  seriesName: string;\n  isAutoDetected: boolean;\n};\n\ntype BuildTraceDataParams = {\n  processedSeries: ChromatogramSeries[];\n  processedAnnotations: PeakAnnotation[];\n  allDetectedPeaks: { peaks: PeakAnnotation[]; seriesIndex: number }[];\n  allPeaksForInteraction: PeakForInteraction[];\n  showMarkers: boolean;\n  markerSize: number;\n  xAxisTitle: string;\n  yAxisTitle: string;\n  boundaryMarkers: BoundaryMarkerStyle;\n};\n\ntype BuildLayoutParams = {\n  title?: string;\n  titleFontSize: number;\n  titleTopMargin?: number;\n  width: number;\n  height: number;\n  xAxisTitle: string;\n  yAxisTitle: string;\n  xRange?: [number, number];\n  yRange?: [number, number];\n  showLegend: boolean;\n  seriesCount: number;\n  showGridX: boolean;\n  showGridY: boolean;\n  showCrosshairs: boolean;\n  theme: PlotlyThemeColors;\n  peakAnnotations: Partial<Plotly.Annotations>[];\n};\n\ntype BuildConfigParams = {\n  showExportButton: boolean;\n  width: number;\n  height: number;\n};\n\nexport type { PeakForInteraction, BuildTraceDataParams, BuildLayoutParams, BuildConfigParams };\n\nexport function buildTraceData(params: BuildTraceDataParams): Plotly.Data[] {\n  const {\n    processedSeries,\n    processedAnnotations,\n    allDetectedPeaks,\n    allPeaksForInteraction,\n    showMarkers,\n    markerSize,\n    xAxisTitle,\n    yAxisTitle,\n    boundaryMarkers,\n  } = params;\n\n  const plotData: Plotly.Data[] = processedSeries.map((s, index) => {\n    const traceColor = s.color || CHART_COLORS[index % CHART_COLORS.length];\n    const extraContent = buildHoverExtraContent(s.name, s.metadata);\n\n    const trace: Plotly.Data = {\n      x: s.x,\n      y: s.y,\n      type: \"scatter\" as const,\n      mode: showMarkers ? (\"lines+markers\" as const) : (\"lines\" as const),\n      name: s.name,\n      line: {\n        color: traceColor,\n        width: CHROMATOGRAM_TRACE.BASE_LINE_WIDTH,\n      },\n      hovertemplate: `%{x:.2f} ${xAxisTitle}<br>%{y:.2f} ${yAxisTitle}<extra>${extraContent}</extra>`,\n    };\n    if (showMarkers) {\n      trace.marker = { size: markerSize, color: traceColor };\n    }\n    return trace;\n  });\n\n  if (boundaryMarkers !== \"none\") {\n    const peaksWithData = collectPeaksWithBoundaryData(\n      allDetectedPeaks,\n      processedAnnotations,\n      processedSeries\n    );\n    if (peaksWithData.length > 0) {\n      plotData.push(...createBoundaryMarkerTraces(peaksWithData));\n    }\n  }\n\n  processedAnnotations.forEach((ann) => {\n    if (ann.regionOverlay && processedSeries[0]) {\n      plotData.push(...createRegionOverlayTraces([ann], 0, processedSeries[0]));\n    }\n  });\n  allDetectedPeaks.forEach(({ peaks, seriesIndex }) => {\n    if (peaks.some((p) => p.regionOverlay) && processedSeries[seriesIndex]) {\n      plotData.push(...createRegionOverlayTraces(peaks, seriesIndex, processedSeries[seriesIndex]));\n    }\n  });\n\n  if (allPeaksForInteraction.length > 0) {\n    const anyHoverText = allPeaksForInteraction.some((p) => p.peak.hoverText);\n    const hitAreaTrace: Plotly.Data = {\n      x: allPeaksForInteraction.map((p) => p.peak.x),\n      y: allPeaksForInteraction.map((p) => p.peak.y),\n      type: \"scatter\" as const,\n      mode: \"markers\" as const,\n      marker: { size: 14, opacity: 0 },\n      showlegend: false,\n      name: \"\",\n      customdata: allPeaksForInteraction.map((p) => ({\n        id: p.peak.id,\n        peak: p.peak,\n        seriesIndex: p.seriesIndex,\n        seriesName: p.seriesName,\n        isAutoDetected: p.isAutoDetected,\n      })) as unknown as Plotly.Datum[],\n      ...(anyHoverText\n        ? {\n            hovertemplate: allPeaksForInteraction.map((p) =>\n              p.peak.hoverText ? `${p.peak.hoverText}<extra></extra>` : \"<extra></extra>\"\n            ),\n          }\n        : { hovertemplate: \"<extra></extra>\" }),\n    };\n    plotData.push(hitAreaTrace);\n  }\n\n  return plotData;\n}\n\nexport function buildLayout(params: BuildLayoutParams): Partial<Plotly.Layout> {\n  const {\n    title,\n    titleFontSize,\n    titleTopMargin,\n    width,\n    height,\n    xAxisTitle,\n    yAxisTitle,\n    xRange,\n    yRange,\n    showLegend,\n    seriesCount,\n    showGridX,\n    showGridY,\n    showCrosshairs,\n    theme,\n    peakAnnotations,\n  } = params;\n\n  return {\n    title: title\n      ? {\n          text: title,\n          font: { size: titleFontSize, family: CHART_FONT_FAMILY, color: theme.textColor },\n        }\n      : undefined,\n    width,\n    height,\n    margin: {\n      l: CHROMATOGRAM_LAYOUT.MARGIN_LEFT,\n      r: CHROMATOGRAM_LAYOUT.MARGIN_RIGHT,\n      b: CHROMATOGRAM_LAYOUT.MARGIN_BOTTOM,\n      t: title\n        ? (titleTopMargin ?? CHROMATOGRAM_LAYOUT.MARGIN_TOP_WITH_TITLE)\n        : CHROMATOGRAM_LAYOUT.MARGIN_TOP_NO_TITLE,\n      pad: CHROMATOGRAM_LAYOUT.MARGIN_PAD,\n    },\n    paper_bgcolor: theme.paperBg,\n    plot_bgcolor: theme.plotBg,\n    font: { family: CHART_FONT_FAMILY },\n    hovermode: showCrosshairs ? (\"x\" as const) : (\"x unified\" as const),\n    dragmode: \"zoom\" as const,\n    xaxis: {\n      title: {\n        text: xAxisTitle,\n        font: { size: 14, color: theme.textSecondary, family: CHART_FONT_FAMILY },\n        standoff: 15,\n      },\n      showgrid: showGridX,\n      gridcolor: theme.gridColor,\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      range: xRange,\n      autorange: !xRange,\n      zeroline: false,\n      tickfont: { size: 12, color: theme.textColor, family: CHART_FONT_FAMILY },\n      showspikes: showCrosshairs,\n      spikemode: \"across\" as const,\n      spikesnap: \"cursor\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 1,\n      spikedash: \"dot\" as const,\n    },\n    yaxis: {\n      title: {\n        text: yAxisTitle,\n        font: { size: 14, color: theme.textSecondary, family: CHART_FONT_FAMILY },\n        standoff: 10,\n      },\n      showgrid: showGridY,\n      gridcolor: theme.gridColor,\n      linecolor: theme.lineColor,\n      linewidth: 1,\n      range: yRange,\n      autorange: !yRange,\n      zeroline: false,\n      tickfont: { size: 12, color: theme.textColor, family: CHART_FONT_FAMILY },\n      showspikes: showCrosshairs,\n      spikemode: \"across\" as const,\n      spikesnap: \"cursor\" as const,\n      spikecolor: theme.spikeColor,\n      spikethickness: 1,\n      spikedash: \"dot\" as const,\n    },\n    legend: {\n      x: 0.5,\n      y: -0.15,\n      xanchor: \"center\" as const,\n      yanchor: \"top\" as const,\n      orientation: \"h\" as const,\n      font: { size: 12, color: theme.textColor, family: CHART_FONT_FAMILY },\n    },\n    showlegend: showLegend && seriesCount > 1,\n    annotations: peakAnnotations,\n  };\n}\n\nexport function buildConfig(params: BuildConfigParams): Partial<Plotly.Config> {\n  const { showExportButton, width, height } = params;\n  return {\n    responsive: true,\n    displayModeBar: true,\n    displaylogo: false,\n    modeBarButtonsToRemove: [\n      \"lasso2d\",\n      \"select2d\",\n      ...(showExportButton ? [] : ([\"toImage\"] as Plotly.ModeBarDefaultButtons[])),\n    ] as Plotly.ModeBarDefaultButtons[],\n    ...(showExportButton && {\n      toImageButtonOptions: {\n        format: \"png\",\n        filename: \"chromatogram\",\n        width,\n        height,\n      },\n    }),\n  };\n}\n\ntype MutableRef<T> = { current: T };\n\nexport function createHoverHandler(\n  domElement: HTMLElement,\n  processedSeriesLength: number,\n  thickenedSeriesRef: MutableRef<number | null>,\n  onPeakHoverRef: MutableRef<((event: PeakSelectEvent | null) => void) | undefined>,\n  hoverLineWidthMultiplier: number\n): (eventData: Plotly.PlotHoverEvent) => void {\n  return (eventData) => {\n    const pt = eventData.points[0];\n    if (pt && pt.curveNumber < processedSeriesLength) {\n      const targetIdx = pt.curveNumber;\n      if (thickenedSeriesRef.current !== targetIdx) {\n        // Hover events can only fire once the plot is drawn, so the\n        // lazily-loaded Plotly module is guaranteed to be available here.\n        if (thickenedSeriesRef.current !== null) {\n          getLoadedPlotly().restyle(domElement, { \"line.width\": CHROMATOGRAM_TRACE.BASE_LINE_WIDTH } as Plotly.Data, [thickenedSeriesRef.current]);\n        }\n        getLoadedPlotly().restyle(domElement, { \"line.width\": CHROMATOGRAM_TRACE.BASE_LINE_WIDTH * hoverLineWidthMultiplier } as Plotly.Data, [targetIdx]);\n        thickenedSeriesRef.current = targetIdx;\n      }\n    }\n    const peakPoint = eventData.points.find((p) => p.customdata != null);\n    if (peakPoint) {\n      onPeakHoverRef.current?.(peakPoint.customdata as unknown as PeakSelectEvent);\n    }\n  };\n}\n\nexport function createClickHandler(\n  onPeakClickRef: MutableRef<((event: PeakSelectEvent) => void) | undefined>\n): (eventData: Plotly.PlotMouseEvent) => void {\n  return (eventData) => {\n    if (!onPeakClickRef.current) return;\n    const peakPoint = eventData.points.find((p) => p.customdata != null);\n    if (!peakPoint) return;\n    onPeakClickRef.current(peakPoint.customdata as unknown as PeakSelectEvent);\n  };\n}\n\nexport function createUnhoverHandler(\n  domElement: HTMLElement,\n  thickenedSeriesRef: MutableRef<number | null>,\n  onPeakHoverRef: MutableRef<((event: PeakSelectEvent | null) => void) | undefined>\n): () => void {\n  return () => {\n    onPeakHoverRef.current?.(null);\n    if (thickenedSeriesRef.current !== null) {\n      // Unhover events can only fire once the plot is drawn, so the\n      // lazily-loaded Plotly module is guaranteed to be available here.\n      getLoadedPlotly().restyle(domElement, { \"line.width\": CHROMATOGRAM_TRACE.BASE_LINE_WIDTH } as Plotly.Data, [thickenedSeriesRef.current]);\n      thickenedSeriesRef.current = null;\n    }\n  };\n}\n"],"names":["buildTraceData","params","processedSeries","processedAnnotations","allDetectedPeaks","allPeaksForInteraction","showMarkers","markerSize","xAxisTitle","yAxisTitle","boundaryMarkers","plotData","s","index","traceColor","CHART_COLORS","extraContent","buildHoverExtraContent","trace","CHROMATOGRAM_TRACE","peaksWithData","collectPeaksWithBoundaryData","createBoundaryMarkerTraces","ann","createRegionOverlayTraces","peaks","seriesIndex","p","anyHoverText","hitAreaTrace","buildLayout","title","titleFontSize","titleTopMargin","width","height","xRange","yRange","showLegend","seriesCount","showGridX","showGridY","showCrosshairs","theme","peakAnnotations","CHART_FONT_FAMILY","CHROMATOGRAM_LAYOUT","buildConfig","showExportButton","createHoverHandler","domElement","processedSeriesLength","thickenedSeriesRef","onPeakHoverRef","hoverLineWidthMultiplier","eventData","pt","targetIdx","getLoadedPlotly","peakPoint","createClickHandler","onPeakClickRef","createUnhoverHandler"],"mappings":";;;;;;;AA2DO,SAASA,EAAeC,GAA6C;AAC1E,QAAM;AAAA,IACJ,iBAAAC;AAAA,IACA,sBAAAC;AAAA,IACA,kBAAAC;AAAA,IACA,wBAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,YAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACET,GAEEU,IAA0BT,EAAgB,IAAI,CAACU,GAAGC,MAAU;AAChE,UAAMC,IAAaF,EAAE,SAASG,EAAaF,IAAQE,EAAa,MAAM,GAChEC,IAAeC,EAAuBL,EAAE,MAAMA,EAAE,QAAQ,GAExDM,IAAqB;AAAA,MACzB,GAAGN,EAAE;AAAA,MACL,GAAGA,EAAE;AAAA,MACL,MAAM;AAAA,MACN,MAAMN,IAAe,kBAA6B;AAAA,MAClD,MAAMM,EAAE;AAAA,MACR,MAAM;AAAA,QACJ,OAAOE;AAAA,QACP,OAAOK,EAAmB;AAAA,MAAA;AAAA,MAE5B,eAAe,YAAYX,CAAU,gBAAgBC,CAAU,UAAUO,CAAY;AAAA,IAAA;AAEvF,WAAIV,MACFY,EAAM,SAAS,EAAE,MAAMX,GAAY,OAAOO,EAAA,IAErCI;AAAA,EACT,CAAC;AAED,MAAIR,MAAoB,QAAQ;AAC9B,UAAMU,IAAgBC;AAAA,MACpBjB;AAAA,MACAD;AAAA,MACAD;AAAA,IAAA;AAEF,IAAIkB,EAAc,SAAS,KACzBT,EAAS,KAAK,GAAGW,EAA2BF,CAAa,CAAC;AAAA,EAE9D;AAaA,MAXAjB,EAAqB,QAAQ,CAACoB,MAAQ;AACpC,IAAIA,EAAI,iBAAiBrB,EAAgB,CAAC,KACxCS,EAAS,KAAK,GAAGa,EAA0B,CAACD,CAAG,GAAG,GAAGrB,EAAgB,CAAC,CAAC,CAAC;AAAA,EAE5E,CAAC,GACDE,EAAiB,QAAQ,CAAC,EAAE,OAAAqB,GAAO,aAAAC,QAAkB;AACnD,IAAID,EAAM,KAAK,CAACE,MAAMA,EAAE,aAAa,KAAKzB,EAAgBwB,CAAW,KACnEf,EAAS,KAAK,GAAGa,EAA0BC,GAAOC,GAAaxB,EAAgBwB,CAAW,CAAC,CAAC;AAAA,EAEhG,CAAC,GAEGrB,EAAuB,SAAS,GAAG;AACrC,UAAMuB,IAAevB,EAAuB,KAAK,CAACsB,MAAMA,EAAE,KAAK,SAAS,GAClEE,IAA4B;AAAA,MAChC,GAAGxB,EAAuB,IAAI,CAACsB,MAAMA,EAAE,KAAK,CAAC;AAAA,MAC7C,GAAGtB,EAAuB,IAAI,CAACsB,MAAMA,EAAE,KAAK,CAAC;AAAA,MAC7C,MAAM;AAAA,MACN,MAAM;AAAA,MACN,QAAQ,EAAE,MAAM,IAAI,SAAS,EAAA;AAAA,MAC7B,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,YAAYtB,EAAuB,IAAI,CAACsB,OAAO;AAAA,QAC7C,IAAIA,EAAE,KAAK;AAAA,QACX,MAAMA,EAAE;AAAA,QACR,aAAaA,EAAE;AAAA,QACf,YAAYA,EAAE;AAAA,QACd,gBAAgBA,EAAE;AAAA,MAAA,EAClB;AAAA,MACF,GAAIC,IACA;AAAA,QACE,eAAevB,EAAuB;AAAA,UAAI,CAACsB,MACzCA,EAAE,KAAK,YAAY,GAAGA,EAAE,KAAK,SAAS,oBAAoB;AAAA,QAAA;AAAA,MAC5D,IAEF,EAAE,eAAe,kBAAA;AAAA,IAAkB;AAEzC,IAAAhB,EAAS,KAAKkB,CAAY;AAAA,EAC5B;AAEA,SAAOlB;AACT;AAEO,SAASmB,EAAY7B,GAAmD;AAC7E,QAAM;AAAA,IACJ,OAAA8B;AAAA,IACA,eAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,QAAAC;AAAA,IACA,YAAA3B;AAAA,IACA,YAAAC;AAAA,IACA,QAAA2B;AAAA,IACA,QAAAC;AAAA,IACA,YAAAC;AAAA,IACA,aAAAC;AAAA,IACA,WAAAC;AAAA,IACA,WAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,OAAAC;AAAA,IACA,iBAAAC;AAAA,EAAA,IACE3C;AAEJ,SAAO;AAAA,IACL,OAAO8B,IACH;AAAA,MACE,MAAMA;AAAA,MACN,MAAM,EAAE,MAAMC,GAAe,QAAQa,GAAmB,OAAOF,EAAM,UAAA;AAAA,IAAU,IAEjF;AAAA,IACJ,OAAAT;AAAA,IACA,QAAAC;AAAA,IACA,QAAQ;AAAA,MACN,GAAGW,EAAoB;AAAA,MACvB,GAAGA,EAAoB;AAAA,MACvB,GAAGA,EAAoB;AAAA,MACvB,GAAGf,IACEE,KAAkBa,EAAoB,wBACvCA,EAAoB;AAAA,MACxB,KAAKA,EAAoB;AAAA,IAAA;AAAA,IAE3B,eAAeH,EAAM;AAAA,IACrB,cAAcA,EAAM;AAAA,IACpB,MAAM,EAAE,QAAQE,EAAA;AAAA,IAChB,WAAWH,IAAkB,MAAiB;AAAA,IAC9C,UAAU;AAAA,IACV,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAMlC;AAAA,QACN,MAAM,EAAE,MAAM,IAAI,OAAOmC,EAAM,eAAe,QAAQE,EAAA;AAAA,QACtD,UAAU;AAAA,MAAA;AAAA,MAEZ,UAAUL;AAAA,MACV,WAAWG,EAAM;AAAA,MACjB,WAAWA,EAAM;AAAA,MACjB,WAAW;AAAA,MACX,OAAOP;AAAA,MACP,WAAW,CAACA;AAAA,MACZ,UAAU;AAAA,MACV,UAAU,EAAE,MAAM,IAAI,OAAOO,EAAM,WAAW,QAAQE,EAAA;AAAA,MACtD,YAAYH;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAYC,EAAM;AAAA,MAClB,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA;AAAA,IAEb,OAAO;AAAA,MACL,OAAO;AAAA,QACL,MAAMlC;AAAA,QACN,MAAM,EAAE,MAAM,IAAI,OAAOkC,EAAM,eAAe,QAAQE,EAAA;AAAA,QACtD,UAAU;AAAA,MAAA;AAAA,MAEZ,UAAUJ;AAAA,MACV,WAAWE,EAAM;AAAA,MACjB,WAAWA,EAAM;AAAA,MACjB,WAAW;AAAA,MACX,OAAON;AAAA,MACP,WAAW,CAACA;AAAA,MACZ,UAAU;AAAA,MACV,UAAU,EAAE,MAAM,IAAI,OAAOM,EAAM,WAAW,QAAQE,EAAA;AAAA,MACtD,YAAYH;AAAA,MACZ,WAAW;AAAA,MACX,WAAW;AAAA,MACX,YAAYC,EAAM;AAAA,MAClB,gBAAgB;AAAA,MAChB,WAAW;AAAA,IAAA;AAAA,IAEb,QAAQ;AAAA,MACN,GAAG;AAAA,MACH,GAAG;AAAA,MACH,SAAS;AAAA,MACT,SAAS;AAAA,MACT,aAAa;AAAA,MACb,MAAM,EAAE,MAAM,IAAI,OAAOA,EAAM,WAAW,QAAQE,EAAA;AAAA,IAAkB;AAAA,IAEtE,YAAYP,KAAcC,IAAc;AAAA,IACxC,aAAaK;AAAA,EAAA;AAEjB;AAEO,SAASG,EAAY9C,GAAmD;AAC7E,QAAM,EAAE,kBAAA+C,GAAkB,OAAAd,GAAO,QAAAC,EAAA,IAAWlC;AAC5C,SAAO;AAAA,IACL,YAAY;AAAA,IACZ,gBAAgB;AAAA,IAChB,aAAa;AAAA,IACb,wBAAwB;AAAA,MACtB;AAAA,MACA;AAAA,MACA,GAAI+C,IAAmB,CAAA,IAAM,CAAC,SAAS;AAAA,IAAA;AAAA,IAEzC,GAAIA,KAAoB;AAAA,MACtB,sBAAsB;AAAA,QACpB,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,OAAAd;AAAA,QACA,QAAAC;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;AAIO,SAASc,EACdC,GACAC,GACAC,GACAC,GACAC,GAC4C;AAC5C,SAAO,CAACC,MAAc;AACpB,UAAMC,IAAKD,EAAU,OAAO,CAAC;AAC7B,QAAIC,KAAMA,EAAG,cAAcL,GAAuB;AAChD,YAAMM,IAAYD,EAAG;AACrB,MAAIJ,EAAmB,YAAYK,MAG7BL,EAAmB,YAAY,QACjCM,IAAkB,QAAQR,GAAY,EAAE,cAAc/B,EAAmB,mBAAkC,CAACiC,EAAmB,OAAO,CAAC,GAEzIM,IAAkB,QAAQR,GAAY,EAAE,cAAc/B,EAAmB,kBAAkBmC,EAAA,GAA2C,CAACG,CAAS,CAAC,GACjJL,EAAmB,UAAUK;AAAA,IAEjC;AACA,UAAME,IAAYJ,EAAU,OAAO,KAAK,CAAC5B,MAAMA,EAAE,cAAc,IAAI;AACnE,IAAIgC,KACFN,EAAe,UAAUM,EAAU,UAAwC;AAAA,EAE/E;AACF;AAEO,SAASC,EACdC,GAC4C;AAC5C,SAAO,CAACN,MAAc;AACpB,QAAI,CAACM,EAAe,QAAS;AAC7B,UAAMF,IAAYJ,EAAU,OAAO,KAAK,CAAC5B,MAAMA,EAAE,cAAc,IAAI;AACnE,IAAKgC,KACLE,EAAe,QAAQF,EAAU,UAAwC;AAAA,EAC3E;AACF;AAEO,SAASG,EACdZ,GACAE,GACAC,GACY;AACZ,SAAO,MAAM;AACX,IAAAA,EAAe,UAAU,IAAI,GACzBD,EAAmB,YAAY,SAGjCM,IAAkB,QAAQR,GAAY,EAAE,cAAc/B,EAAmB,mBAAkC,CAACiC,EAAmB,OAAO,CAAC,GACvIA,EAAmB,UAAU;AAAA,EAEjC;AACF;"}

package/dist/components/charts/Chromatogram/regionOverlays.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("../../../utils/colors.cjs"),h=3.5;function u(s,i,o){const l=o.color??c.CHART_COLORS[i%c.CHART_COLORS.length],n=[];for(const e of s){if(!e.regionOverlay)continue;const t=e._computed?.startIndex,r=e._computed?.endIndex;if(t===void 0||r===void 0)continue;const a=e.color??l,d=e.regionOverlayWidth??h,v=e.hoverText?{hovertemplate:`${e.hoverText}<extra></extra>`}:{hoverinfo:"skip"};n.push({x:o.x.slice(t,r+1),y:o.y.slice(t,r+1),type:"scatter",mode:"lines",line:{color:a,width:d},showlegend:!1,name:"",...v})}return n}exports.createRegionOverlayTraces=u;
+//# sourceMappingURL=regionOverlays.cjs.map

package/dist/components/charts/Chromatogram/regionOverlays.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"regionOverlays.cjs","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    const hoverProps = peak.hoverText\n      ? { hovertemplate: `${peak.hoverText}<extra></extra>` }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":"6HAKMA,EAA+B,IAQ9B,SAASC,EACdC,EACAC,EACAC,EACe,CACf,MAAMC,EAAcD,EAAO,OAASE,EAAAA,aAAaH,EAAcG,EAAAA,aAAa,MAAM,EAC5EC,EAAwB,CAAA,EAE9B,UAAWC,KAAQN,EAAO,CACxB,GAAI,CAACM,EAAK,cAAe,SACzB,MAAMC,EAAWD,EAAK,WAAW,WAC3BE,EAASF,EAAK,WAAW,SAC/B,GAAIC,IAAa,QAAaC,IAAW,OAAW,SAEpD,MAAMC,EAAQH,EAAK,OAASH,EACtBO,EAAYJ,EAAK,oBAAsBR,EACvCa,EAAaL,EAAK,UACpB,CAAE,cAAe,GAAGA,EAAK,SAAS,iBAAA,EAClC,CAAE,UAAW,MAAA,EAEjBD,EAAO,KAAK,CACV,EAAGH,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,EAAGN,EAAO,EAAE,MAAMK,EAAUC,EAAS,CAAC,EACtC,KAAM,UACN,KAAM,QACN,KAAM,CAAE,MAAAC,EAAO,MAAOC,CAAA,EACtB,WAAY,GACZ,KAAM,GACN,GAAGC,CAAA,CACJ,CACH,CAEA,OAAON,CACT"}

package/dist/components/charts/Chromatogram/regionOverlays.js

@@ -0,0 +1,26 @@
+import { CHART_COLORS as c } from "../../../utils/colors.js";
+const x = 3.5;
+function v(i, s, o) {
+  const l = o.color ?? c[s % c.length], r = [];
+  for (const e of i) {
+    if (!e.regionOverlay) continue;
+    const t = e._computed?.startIndex, n = e._computed?.endIndex;
+    if (t === void 0 || n === void 0) continue;
+    const a = e.color ?? l, d = e.regionOverlayWidth ?? x, h = e.hoverText ? { hovertemplate: `${e.hoverText}<extra></extra>` } : { hoverinfo: "skip" };
+    r.push({
+      x: o.x.slice(t, n + 1),
+      y: o.y.slice(t, n + 1),
+      type: "scatter",
+      mode: "lines",
+      line: { color: a, width: d },
+      showlegend: !1,
+      name: "",
+      ...h
+    });
+  }
+  return r;
+}
+export {
+  v as createRegionOverlayTraces
+};
+//# sourceMappingURL=regionOverlays.js.map

package/dist/components/charts/Chromatogram/regionOverlays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"regionOverlays.js","sources":["../../../../src/components/charts/Chromatogram/regionOverlays.ts"],"sourcesContent":["import { CHART_COLORS } from \"../../../utils/colors\";\n\nimport type { PeakAnnotation, ChromatogramSeries } from \"./types\";\nimport type Plotly from \"plotly.js-dist\";\n\nconst DEFAULT_REGION_OVERLAY_WIDTH = 3.5;\n\n/**\n * Build one scatter trace per peak that has regionOverlay:true, slicing the\n * underlying series data between the peak's startIndex and endIndex.\n * Traces are pushed BEFORE the invisible hit-area trace so peak click/hover\n * still resolves to the hit-area marker, not the overlay.\n */\nexport function createRegionOverlayTraces(\n  peaks: PeakAnnotation[],\n  seriesIndex: number,\n  series: ChromatogramSeries\n): Plotly.Data[] {\n  const seriesColor = series.color ?? CHART_COLORS[seriesIndex % CHART_COLORS.length];\n  const traces: Plotly.Data[] = [];\n\n  for (const peak of peaks) {\n    if (!peak.regionOverlay) continue;\n    const startIdx = peak._computed?.startIndex;\n    const endIdx = peak._computed?.endIndex;\n    if (startIdx === undefined || endIdx === undefined) continue;\n\n    const color = peak.color ?? seriesColor;\n    const lineWidth = peak.regionOverlayWidth ?? DEFAULT_REGION_OVERLAY_WIDTH;\n    const hoverProps = peak.hoverText\n      ? { hovertemplate: `${peak.hoverText}<extra></extra>` }\n      : { hoverinfo: \"skip\" as const };\n\n    traces.push({\n      x: series.x.slice(startIdx, endIdx + 1),\n      y: series.y.slice(startIdx, endIdx + 1),\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      line: { color, width: lineWidth },\n      showlegend: false,\n      name: \"\",\n      ...hoverProps,\n    });\n  }\n\n  return traces;\n}\n"],"names":["DEFAULT_REGION_OVERLAY_WIDTH","createRegionOverlayTraces","peaks","seriesIndex","series","seriesColor","CHART_COLORS","traces","peak","startIdx","endIdx","color","lineWidth","hoverProps"],"mappings":";AAKA,MAAMA,IAA+B;AAQ9B,SAASC,EACdC,GACAC,GACAC,GACe;AACf,QAAMC,IAAcD,EAAO,SAASE,EAAaH,IAAcG,EAAa,MAAM,GAC5EC,IAAwB,CAAA;AAE9B,aAAWC,KAAQN,GAAO;AACxB,QAAI,CAACM,EAAK,cAAe;AACzB,UAAMC,IAAWD,EAAK,WAAW,YAC3BE,IAASF,EAAK,WAAW;AAC/B,QAAIC,MAAa,UAAaC,MAAW,OAAW;AAEpD,UAAMC,IAAQH,EAAK,SAASH,GACtBO,IAAYJ,EAAK,sBAAsBR,GACvCa,IAAaL,EAAK,YACpB,EAAE,eAAe,GAAGA,EAAK,SAAS,kBAAA,IAClC,EAAE,WAAW,OAAA;AAEjB,IAAAD,EAAO,KAAK;AAAA,MACV,GAAGH,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,GAAGN,EAAO,EAAE,MAAMK,GAAUC,IAAS,CAAC;AAAA,MACtC,MAAM;AAAA,MACN,MAAM;AAAA,MACN,MAAM,EAAE,OAAAC,GAAO,OAAOC,EAAA;AAAA,MACtB,YAAY;AAAA,MACZ,MAAM;AAAA,MACN,GAAGC;AAAA,IAAA,CACJ;AAAA,EACH;AAEA,SAAON;AACT;"}

package/dist/components/charts/Electropherogram/Electropherogram.cjs

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),n=require("react"),$=require("../ChartTooltip/ChartTooltip.cjs"),E=require("../plotly-loader.cjs"),w=require("../../../hooks/use-plotly-theme.cjs"),b=require("../../../utils/colors.cjs");;/* empty css                        */const D=75,I=1.05,V=e=>{if(e.base!==void 0)return e.base;const a={A:e.peakA,T:e.peakT,G:e.peakG,C:e.peakC},m=Object.values(a);if(m.every(c=>c===m[0]))return"";let h="",f=0;return Object.entries(a).forEach(([c,g])=>{g>f&&(h=c,f=g)}),h},z=({data:e=[],width:a=900,height:m=600,positionInterval:y=10,colorA:h=b.CHART_COLORS[0],colorT:f=b.CHART_COLORS[2],colorG:c=b.CHART_COLORS[3],colorC:g=b.CHART_COLORS[1]})=>{const d=n.useRef(null),T=w.usePlotlyTheme(),{bindTooltip:O,tooltipElement:H}=$.useChartTooltip({xLabel:"Position",yLabel:"Intensity"}),s=n.useMemo(()=>e.map(t=>t.position),[e]),F=n.useMemo(()=>e.map(t=>V(t)),[e]),M=n.useMemo(()=>e.map(t=>t.peakA),[e]),P=n.useMemo(()=>e.map(t=>t.peakT),[e]),v=n.useMemo(()=>e.map(t=>t.peakG),[e]),C=n.useMemo(()=>e.map(t=>t.peakC),[e]),R=n.useMemo(()=>({x:s,y:M,type:"scatter",mode:"lines",hoverinfo:"none",name:"A",line:{color:h,width:2,shape:"spline"}}),[s,M,h]),j=n.useMemo(()=>({x:s,y:P,type:"scatter",mode:"lines",hoverinfo:"none",name:"T",line:{color:f,width:2,shape:"spline"}}),[s,P,f]),A=n.useMemo(()=>({x:s,y:v,type:"scatter",mode:"lines",hoverinfo:"none",name:"G",line:{color:c,width:2,shape:"spline"}}),[s,v,c]),_=n.useMemo(()=>({x:s,y:C,type:"scatter",mode:"lines",hoverinfo:"none",name:"C",line:{color:g,width:2,shape:"spline"}}),[s,C,g]),L=n.useMemo(()=>Math.max(...M,...P,...v,...C),[M,P,v,C]);if(n.useEffect(()=>{if(!d.current||e.length===0)return;const t=[R,j,A,_],k={width:a,height:m-D,margin:{l:0,r:0,b:20,t:10,pad:0},paper_bgcolor:T.paperBg,plot_bgcolor:T.plotBg,font:{family:w.CHART_FONT_FAMILY},showlegend:!1,xaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[Math.min(...s),Math.max(...s)],fixedrange:!0},yaxis:{showgrid:!1,zeroline:!1,showticklabels:!1,showline:!1,range:[0,L*I],fixedrange:!0}},i={responsive:!0,displayModeBar:!1,displaylogo:!1,fillFrame:!0};let p=!1,u=null;return E.loadPlotly().then(r=>{p||!d.current||(r.newPlot(d.current,t,k,i),O(d.current),u=d.current)}),()=>{p=!0,u&&E.getLoadedPlotly().purge(u)}},[e,a,m,R,j,A,_,L,s,T,O]),e.length===0)return l.jsx("div",{className:"chart-container",children:"No data available"});const G=()=>{const t=()=>{const i=Math.min(...s),p=Math.max(...s),u=a;return l.jsx("div",{className:"sequence-letters-container",children:F.map((r,x)=>{const o=s[x],q=r==="A"?h:r==="T"?f:r==="G"?c:r==="C"?g:T.textColor,N=p-i||1,B=(o-i)/N*u;return l.jsx("span",{className:"sequence-letter",style:{left:`${B}px`,color:q},children:r},`base-${x}`)})})},k=()=>{const i=Math.min(...s),p=Math.max(...s),u=a,r=Math.ceil(i/y)*y,x=[];for(let o=r;o<=p;o+=y)x.push({position:o,label:o.toString()});return l.jsx("div",{className:"position-numbers-container",children:x.map(o=>{const q=p-i||1,S=(o.position-i)/q*u;return l.jsx("span",{className:"position-number",style:{left:`${S}px`},children:o.label},`pos-${o.position}`)})})};return l.jsxs("div",{className:"sequence-header",children:[t(),k()]})};return l.jsxs("div",{className:"electropherogram-container relative",style:{width:a,height:m},children:[G(),l.jsx("div",{className:"electropherogram-chart",children:l.jsx("div",{ref:d,style:{width:"100%",height:"100%"}})}),H]})};exports.Electropherogram=z;
+//# sourceMappingURL=Electropherogram.cjs.map

package/dist/components/charts/Electropherogram/Electropherogram.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Electropherogram.cjs","sources":["../../../../src/components/charts/Electropherogram/Electropherogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Electropherogram.scss\";\n\n/** Height offset for the plot area in pixels */\nconst PLOT_HEIGHT_OFFSET = 75;\n/** Scale factor for y-axis range to add padding above max value */\nconst Y_AXIS_PADDING_FACTOR = 1.05;\n\ninterface PeakData {\n  position: number;\n  base?: string;\n  peakA: number;\n  peakT: number;\n  peakG: number;\n  peakC: number;\n}\n\ninterface ElectropherogramProps {\n  data?: PeakData[];\n  width?: number;\n  height?: number;\n  positionInterval?: number;\n  colorA?: string;\n  colorT?: string;\n  colorG?: string;\n  colorC?: string;\n}\n\nconst determineBase = (item: PeakData): string => {\n  if (item.base !== undefined) return item.base;\n  const peakValues = {\n    A: item.peakA,\n    T: item.peakT,\n    G: item.peakG,\n    C: item.peakC,\n  };\n\n  const values = Object.values(peakValues);\n  const allEqual = values.every((val) => val === values[0]);\n\n  if (allEqual) {\n    return \"\";\n  }\n\n  let highestBase = \"\";\n  let highestValue = 0;\n\n  Object.entries(peakValues).forEach(([base, value]) => {\n    if (value > highestValue) {\n      highestBase = base;\n      highestValue = value;\n    }\n  });\n\n  return highestBase;\n};\n\nconst Electropherogram: React.FC<ElectropherogramProps> = ({\n  data = [],\n  width = 900,\n  height = 600,\n  positionInterval = 10,\n  colorA = CHART_COLORS[0], // blue\n  colorT = CHART_COLORS[2], // teal/green\n  colorG = CHART_COLORS[3], // red\n  colorC = CHART_COLORS[1], // orange\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: \"Position\",\n    yLabel: \"Intensity\",\n  });\n\n  const positions = useMemo(() => data.map((item) => item.position), [data]);\n  const sequence = useMemo(() => data.map((item) => determineBase(item)), [data]);\n  const peakA = useMemo(() => data.map((item) => item.peakA), [data]);\n  const peakT = useMemo(() => data.map((item) => item.peakT), [data]);\n  const peakG = useMemo(() => data.map((item) => item.peakG), [data]);\n  const peakC = useMemo(() => data.map((item) => item.peakC), [data]);\n\n  const aTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakA,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"A\",\n      line: { color: colorA, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakA, colorA],\n  );\n\n  const tTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakT,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"T\",\n      line: { color: colorT, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakT, colorT],\n  );\n\n  const gTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakG,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"G\",\n      line: { color: colorG, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakG, colorG],\n  );\n\n  const cTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakC,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"C\",\n      line: { color: colorC, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakC, colorC],\n  );\n\n  const maxValue = useMemo(\n    () => Math.max(...peakA, ...peakT, ...peakG, ...peakC),\n    [peakA, peakT, peakG, peakC],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || data.length === 0) return;\n\n    const plotData = [aTrace, tTrace, gTrace, cTrace];\n\n    const layout: Partial<Plotly.Layout> = {\n      width: width,\n      height: height - PLOT_HEIGHT_OFFSET,\n      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      xaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [Math.min(...positions), Math.max(...positions)],\n        fixedrange: true,\n      },\n      yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [0, maxValue * Y_AXIS_PADDING_FACTOR],\n        fixedrange: true,\n      },\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n      fillFrame: true,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [data, width, height, aTrace, tTrace, gTrace, cTrace, maxValue, positions, theme, bindTooltip]);\n\n  if (data.length === 0) {\n    return <div className=\"chart-container\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      return (\n        <div className=\"sequence-letters-container\">\n          {sequence.map((base, index) => {\n            const position = positions[index];\n            const color =\n              base === \"A\"\n                ? colorA\n                : base === \"T\"\n                ? colorT\n                : base === \"G\"\n                ? colorG\n                : base === \"C\"\n                ? colorC\n                : theme.textColor;\n\n            const span = maxPosition - minPosition || 1;\n            const percentage = (position - minPosition) / span;\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"sequence-letter\"\n                style={{\n                  left: `${leftPosition}px`,\n                  color,\n                }}\n              >\n                {base}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderPositionNumbers = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      const startPos =\n        Math.ceil(minPosition / positionInterval) * positionInterval;\n\n      const regularPositionLabels: Array<{ position: number; label: string }> =\n        [];\n\n      for (let pos = startPos; pos <= maxPosition; pos += positionInterval) {\n        regularPositionLabels.push({\n          position: pos,\n          label: pos.toString(),\n        });\n      }\n\n      return (\n        <div className=\"position-numbers-container\">\n          {regularPositionLabels.map((label) => {\n            const span = maxPosition - minPosition || 1;\n            const percentage = (label.position - minPosition) / span;\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"position-number\"\n                style={{\n                  left: `${leftPosition}px`,\n                }}\n              >\n                {label.label}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    return (\n      <div className=\"sequence-header\">\n        {renderSequenceLetters()}\n        {renderPositionNumbers()}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"electropherogram-container relative\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"electropherogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Electropherogram };\nexport type { PeakData, ElectropherogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Electropherogram","data","width","height","positionInterval","colorA","CHART_COLORS","colorT","colorG","colorC","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","positions","useMemo","sequence","peakA","peakT","peakG","peakC","aTrace","tTrace","gTrace","cTrace","maxValue","useEffect","plotData","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","renderSequence","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","span","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label","jsxs"],"mappings":"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"}

package/dist/components/charts/Electropherogram/Electropherogram.js

@@ -0,0 +1,180 @@
+import { jsx as m, jsxs as F } from "react/jsx-runtime";
+import { useRef as j, useMemo as o, useEffect as H } from "react";
+import { useChartTooltip as $ } from "../ChartTooltip/ChartTooltip.js";
+import { loadPlotly as D, getLoadedPlotly as I } from "../plotly-loader.js";
+import { usePlotlyTheme as V, CHART_FONT_FAMILY as z } from "../../../hooks/use-plotly-theme.js";
+import { CHART_COLORS as N } from "../../../utils/colors.js";
+/* empty css                      */
+const W = 75, Y = 1.05, X = (e) => {
+  if (e.base !== void 0) return e.base;
+  const l = {
+    A: e.peakA,
+    T: e.peakT,
+    G: e.peakG,
+    C: e.peakC
+  }, h = Object.values(l);
+  if (h.every((i) => i === h[0]))
+    return "";
+  let u = "", f = 0;
+  return Object.entries(l).forEach(([i, d]) => {
+    d > f && (u = i, f = d);
+  }), u;
+}, oe = ({
+  data: e = [],
+  width: l = 900,
+  height: h = 600,
+  positionInterval: x = 10,
+  colorA: u = N[0],
+  // blue
+  colorT: f = N[2],
+  // teal/green
+  colorG: i = N[3],
+  // red
+  colorC: d = N[1]
+  // orange
+}) => {
+  const g = j(null), T = V(), { bindTooltip: C, tooltipElement: G } = $({
+    xLabel: "Position",
+    yLabel: "Intensity"
+  }), n = o(() => e.map((t) => t.position), [e]), R = o(() => e.map((t) => X(t)), [e]), v = o(() => e.map((t) => t.peakA), [e]), P = o(() => e.map((t) => t.peakT), [e]), k = o(() => e.map((t) => t.peakG), [e]), b = o(() => e.map((t) => t.peakC), [e]), _ = o(
+    () => ({
+      x: n,
+      y: v,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "A",
+      line: { color: u, width: 2, shape: "spline" }
+    }),
+    [n, v, u]
+  ), q = o(
+    () => ({
+      x: n,
+      y: P,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "T",
+      line: { color: f, width: 2, shape: "spline" }
+    }),
+    [n, P, f]
+  ), w = o(
+    () => ({
+      x: n,
+      y: k,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "G",
+      line: { color: i, width: 2, shape: "spline" }
+    }),
+    [n, k, i]
+  ), E = o(
+    () => ({
+      x: n,
+      y: b,
+      type: "scatter",
+      mode: "lines",
+      hoverinfo: "none",
+      name: "C",
+      line: { color: d, width: 2, shape: "spline" }
+    }),
+    [n, b, d]
+  ), L = o(
+    () => Math.max(...v, ...P, ...k, ...b),
+    [v, P, k, b]
+  );
+  return H(() => {
+    if (!g.current || e.length === 0) return;
+    const t = [_, q, w, E], M = {
+      width: l,
+      height: h - W,
+      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },
+      paper_bgcolor: T.paperBg,
+      plot_bgcolor: T.plotBg,
+      font: {
+        family: z
+      },
+      showlegend: !1,
+      xaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [Math.min(...n), Math.max(...n)],
+        fixedrange: !0
+      },
+      yaxis: {
+        showgrid: !1,
+        zeroline: !1,
+        showticklabels: !1,
+        showline: !1,
+        range: [0, L * Y],
+        fixedrange: !0
+      }
+    }, a = {
+      responsive: !0,
+      displayModeBar: !1,
+      displaylogo: !1,
+      fillFrame: !0
+    };
+    let c = !1, p = null;
+    return D().then((r) => {
+      c || !g.current || (r.newPlot(g.current, t, M, a), C(g.current), p = g.current);
+    }), () => {
+      c = !0, p && I().purge(p);
+    };
+  }, [e, l, h, _, q, w, E, L, n, T, C]), e.length === 0 ? /* @__PURE__ */ m("div", { className: "chart-container", children: "No data available" }) : /* @__PURE__ */ F("div", { className: "electropherogram-container relative", style: { width: l, height: h }, children: [
+    (() => {
+      const t = () => {
+        const a = Math.min(...n), c = Math.max(...n), p = l;
+        return /* @__PURE__ */ m("div", { className: "sequence-letters-container", children: R.map((r, y) => {
+          const s = n[y], A = r === "A" ? u : r === "T" ? f : r === "G" ? i : r === "C" ? d : T.textColor, O = c - a || 1, B = (s - a) / O * p;
+          return /* @__PURE__ */ m(
+            "span",
+            {
+              className: "sequence-letter",
+              style: {
+                left: `${B}px`,
+                color: A
+              },
+              children: r
+            },
+            `base-${y}`
+          );
+        }) });
+      }, M = () => {
+        const a = Math.min(...n), c = Math.max(...n), p = l, r = Math.ceil(a / x) * x, y = [];
+        for (let s = r; s <= c; s += x)
+          y.push({
+            position: s,
+            label: s.toString()
+          });
+        return /* @__PURE__ */ m("div", { className: "position-numbers-container", children: y.map((s) => {
+          const A = c - a || 1, S = (s.position - a) / A * p;
+          return /* @__PURE__ */ m(
+            "span",
+            {
+              className: "position-number",
+              style: {
+                left: `${S}px`
+              },
+              children: s.label
+            },
+            `pos-${s.position}`
+          );
+        }) });
+      };
+      return /* @__PURE__ */ F("div", { className: "sequence-header", children: [
+        t(),
+        M()
+      ] });
+    })(),
+    /* @__PURE__ */ m("div", { className: "electropherogram-chart", children: /* @__PURE__ */ m("div", { ref: g, style: { width: "100%", height: "100%" } }) }),
+    G
+  ] });
+};
+export {
+  oe as Electropherogram
+};
+//# sourceMappingURL=Electropherogram.js.map

package/dist/components/charts/Electropherogram/Electropherogram.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Electropherogram.js","sources":["../../../../src/components/charts/Electropherogram/Electropherogram.tsx"],"sourcesContent":["import React, { useEffect, useRef, useMemo } from \"react\";\n\nimport { useChartTooltip } from \"../ChartTooltip\";\nimport { getLoadedPlotly, loadPlotly } from \"../plotly-loader\";\n\nimport type Plotly from \"plotly.js-dist\";\n\nimport { CHART_FONT_FAMILY, usePlotlyTheme } from \"@/hooks/use-plotly-theme\";\nimport { CHART_COLORS } from \"@/utils/colors\";\nimport \"./Electropherogram.scss\";\n\n/** Height offset for the plot area in pixels */\nconst PLOT_HEIGHT_OFFSET = 75;\n/** Scale factor for y-axis range to add padding above max value */\nconst Y_AXIS_PADDING_FACTOR = 1.05;\n\ninterface PeakData {\n  position: number;\n  base?: string;\n  peakA: number;\n  peakT: number;\n  peakG: number;\n  peakC: number;\n}\n\ninterface ElectropherogramProps {\n  data?: PeakData[];\n  width?: number;\n  height?: number;\n  positionInterval?: number;\n  colorA?: string;\n  colorT?: string;\n  colorG?: string;\n  colorC?: string;\n}\n\nconst determineBase = (item: PeakData): string => {\n  if (item.base !== undefined) return item.base;\n  const peakValues = {\n    A: item.peakA,\n    T: item.peakT,\n    G: item.peakG,\n    C: item.peakC,\n  };\n\n  const values = Object.values(peakValues);\n  const allEqual = values.every((val) => val === values[0]);\n\n  if (allEqual) {\n    return \"\";\n  }\n\n  let highestBase = \"\";\n  let highestValue = 0;\n\n  Object.entries(peakValues).forEach(([base, value]) => {\n    if (value > highestValue) {\n      highestBase = base;\n      highestValue = value;\n    }\n  });\n\n  return highestBase;\n};\n\nconst Electropherogram: React.FC<ElectropherogramProps> = ({\n  data = [],\n  width = 900,\n  height = 600,\n  positionInterval = 10,\n  colorA = CHART_COLORS[0], // blue\n  colorT = CHART_COLORS[2], // teal/green\n  colorG = CHART_COLORS[3], // red\n  colorC = CHART_COLORS[1], // orange\n}) => {\n  const plotRef = useRef<HTMLDivElement>(null);\n  const theme = usePlotlyTheme();\n  const { bindTooltip, tooltipElement } = useChartTooltip({\n    xLabel: \"Position\",\n    yLabel: \"Intensity\",\n  });\n\n  const positions = useMemo(() => data.map((item) => item.position), [data]);\n  const sequence = useMemo(() => data.map((item) => determineBase(item)), [data]);\n  const peakA = useMemo(() => data.map((item) => item.peakA), [data]);\n  const peakT = useMemo(() => data.map((item) => item.peakT), [data]);\n  const peakG = useMemo(() => data.map((item) => item.peakG), [data]);\n  const peakC = useMemo(() => data.map((item) => item.peakC), [data]);\n\n  const aTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakA,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"A\",\n      line: { color: colorA, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakA, colorA],\n  );\n\n  const tTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakT,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"T\",\n      line: { color: colorT, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakT, colorT],\n  );\n\n  const gTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakG,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"G\",\n      line: { color: colorG, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakG, colorG],\n  );\n\n  const cTrace = useMemo(\n    () => ({\n      x: positions,\n      y: peakC,\n      type: \"scatter\" as const,\n      mode: \"lines\" as const,\n      hoverinfo: \"none\" as const,\n      name: \"C\",\n      line: { color: colorC, width: 2, shape: \"spline\" as const },\n    }),\n    [positions, peakC, colorC],\n  );\n\n  const maxValue = useMemo(\n    () => Math.max(...peakA, ...peakT, ...peakG, ...peakC),\n    [peakA, peakT, peakG, peakC],\n  );\n\n  useEffect(() => {\n    if (!plotRef.current || data.length === 0) return;\n\n    const plotData = [aTrace, tTrace, gTrace, cTrace];\n\n    const layout: Partial<Plotly.Layout> = {\n      width: width,\n      height: height - PLOT_HEIGHT_OFFSET,\n      margin: { l: 0, r: 0, b: 20, t: 10, pad: 0 },\n      paper_bgcolor: theme.paperBg,\n      plot_bgcolor: theme.plotBg,\n      font: {\n        family: CHART_FONT_FAMILY,\n      },\n      showlegend: false,\n      xaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [Math.min(...positions), Math.max(...positions)],\n        fixedrange: true,\n      },\n      yaxis: {\n        showgrid: false,\n        zeroline: false,\n        showticklabels: false,\n        showline: false,\n        range: [0, maxValue * Y_AXIS_PADDING_FACTOR],\n        fixedrange: true,\n      },\n    };\n\n    const config = {\n      responsive: true,\n      displayModeBar: false,\n      displaylogo: false,\n      fillFrame: true,\n    };\n\n    // Plotly is loaded lazily so it stays out of the consumer's main chunk\n    // (SW-2007); the draw is skipped if the effect re-runs or unmounts first.\n    let cancelled = false;\n    let plotElement: HTMLDivElement | null = null;\n    void loadPlotly().then((plotly) => {\n      if (cancelled || !plotRef.current) return;\n      plotly.newPlot(plotRef.current, plotData, layout, config);\n      bindTooltip(plotRef.current);\n\n      // Capture ref value for cleanup\n      plotElement = plotRef.current;\n    });\n\n    return () => {\n      cancelled = true;\n      if (plotElement) {\n        getLoadedPlotly().purge(plotElement);\n      }\n    };\n  }, [data, width, height, aTrace, tTrace, gTrace, cTrace, maxValue, positions, theme, bindTooltip]);\n\n  if (data.length === 0) {\n    return <div className=\"chart-container\">No data available</div>;\n  }\n\n  const renderSequence = () => {\n    const renderSequenceLetters = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      return (\n        <div className=\"sequence-letters-container\">\n          {sequence.map((base, index) => {\n            const position = positions[index];\n            const color =\n              base === \"A\"\n                ? colorA\n                : base === \"T\"\n                ? colorT\n                : base === \"G\"\n                ? colorG\n                : base === \"C\"\n                ? colorC\n                : theme.textColor;\n\n            const span = maxPosition - minPosition || 1;\n            const percentage = (position - minPosition) / span;\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`base-${index}`}\n                className=\"sequence-letter\"\n                style={{\n                  left: `${leftPosition}px`,\n                  color,\n                }}\n              >\n                {base}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    const renderPositionNumbers = () => {\n      const minPosition = Math.min(...positions);\n      const maxPosition = Math.max(...positions);\n      const chartWidth = width;\n\n      const startPos =\n        Math.ceil(minPosition / positionInterval) * positionInterval;\n\n      const regularPositionLabels: Array<{ position: number; label: string }> =\n        [];\n\n      for (let pos = startPos; pos <= maxPosition; pos += positionInterval) {\n        regularPositionLabels.push({\n          position: pos,\n          label: pos.toString(),\n        });\n      }\n\n      return (\n        <div className=\"position-numbers-container\">\n          {regularPositionLabels.map((label) => {\n            const span = maxPosition - minPosition || 1;\n            const percentage = (label.position - minPosition) / span;\n            const leftPosition = percentage * chartWidth;\n\n            return (\n              <span\n                key={`pos-${label.position}`}\n                className=\"position-number\"\n                style={{\n                  left: `${leftPosition}px`,\n                }}\n              >\n                {label.label}\n              </span>\n            );\n          })}\n        </div>\n      );\n    };\n\n    return (\n      <div className=\"sequence-header\">\n        {renderSequenceLetters()}\n        {renderPositionNumbers()}\n      </div>\n    );\n  };\n\n  return (\n    <div className=\"electropherogram-container relative\" style={{ width, height }}>\n      {renderSequence()}\n      <div className=\"electropherogram-chart\">\n        <div ref={plotRef} style={{ width: \"100%\", height: \"100%\" }} />\n      </div>\n      {tooltipElement}\n    </div>\n  );\n};\n\nexport { Electropherogram };\nexport type { PeakData, ElectropherogramProps };\n"],"names":["PLOT_HEIGHT_OFFSET","Y_AXIS_PADDING_FACTOR","determineBase","item","peakValues","values","val","highestBase","highestValue","base","value","Electropherogram","data","width","height","positionInterval","colorA","CHART_COLORS","colorT","colorG","colorC","plotRef","useRef","theme","usePlotlyTheme","bindTooltip","tooltipElement","useChartTooltip","positions","useMemo","sequence","peakA","peakT","peakG","peakC","aTrace","tTrace","gTrace","cTrace","maxValue","useEffect","plotData","layout","CHART_FONT_FAMILY","config","cancelled","plotElement","loadPlotly","plotly","getLoadedPlotly","jsx","jsxs","renderSequenceLetters","minPosition","maxPosition","chartWidth","index","position","color","span","leftPosition","renderPositionNumbers","startPos","regularPositionLabels","pos","label"],"mappings":"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"}

package/dist/components/charts/Histogram/Histogram.cjs

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),D=require("plotly.js-dist"),c=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),Y=require("../../../hooks/use-element-size.cjs"),$=require("../../../hooks/use-plotly-theme.cjs"),E=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((o,u)=>o+u,0)/r.length,Q=(r,l)=>{const u=r.map(i=>Math.pow(i-l,2)).reduce((i,h)=>i+h,0)/r.length;return Math.sqrt(u)},Z=(r,l,o,u,i=100)=>{const h=[],x=[],p=(u-o)/(i-1);for(let n=0;n<i;n++){const e=o+n*p;h.push(e);const M=J*Math.pow((e-r)/l,2),j=1/(l*Math.sqrt(2*Math.PI))*Math.exp(M);x.push(j)}return{x:h,y:x}},tt=(r,l,o)=>{const u=Math.ceil((o.end-o.start)/o.size),i=Array(u).fill(0);l.forEach(n=>{if(n>=o.start&&n<=o.end){const e=Math.floor((n-o.start)/o.size);i[e]++}});const h=Math.max(...i),x=Math.max(...r),p=h/x;return r.map(n=>n*p)},et=({dataSeries:r,width:l,height:o,title:u="Histogram",xTitle:i="X Axis",yTitle:h="Frequency",bargap:x=.2,showDistributionLine:p=!1})=>{const n=c.useRef(null),e=$.usePlotlyTheme(),{bindTooltip:M,tooltipElement:j}=U.useChartTooltip({xLabel:i,yLabel:h}),[T,L]=Y.useElementSize(),f=l??L.width,g=o??L.height,I=f>0&&g>0,W=l===void 0,N=o===void 0,b=c.useRef({width:f,height:g});b.current={width:f,height:g};const R=c.useRef(!1),C=c.useRef({width:0,height:0}),q=c.useMemo(()=>Array.isArray(r)?r:[r],[r]),P=c.useMemo(()=>q.length>1?"stack":void 0,[q.length]),z=G.CHART_COLORS,y=c.useMemo(()=>q.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?p:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[q,p,z]),k=e.gridColor,S=c.useMemo(()=>y.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:e.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[y,e]),A=c.useMemo(()=>y.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),v=Math.min(...t.x),a=Math.max(...t.x),w=a-v,F=v-w*.1,O=a+w*.1,V=t.xbins||{start:F,end:O,size:w/10},H=Z(m,d,F,O,100),X=tt(H.y,t.x,V);return{type:"scatter",x:H.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[y]),B=c.useMemo(()=>[...S,...A],[S,A]);c.useEffect(()=>{if(!n.current||!I)return;const t={width:b.current.width,height:b.current.height,font:{family:"Inter, sans-serif"},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:i,font:{size:16,color:e.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:k,tickcolor:e.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:e.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:e.textSecondary,family:"Inter, sans-serif",weight:400},standoff:20},gridcolor:k,tickcolor:e.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:e.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:P,bargap:x,paper_bgcolor:e.paperBg,plot_bgcolor:e.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};D.newPlot(n.current,B,t,m),M(n.current);const d=n.current;return R.current=!0,C.current={...b.current},()=>{d&&(D.purge(d),R.current=!1)}},[I,i,h,x,B,P,k,e,M]),c.useEffect(()=>{const t=n.current;!t||!R.current||f<=0||g<=0||C.current.width===f&&C.current.height===g||(C.current={width:f,height:g},D.relayout(t,{width:f,height:g}).catch(()=>{}))},[f,g]);const _=({series:t})=>{const m=t.map((a,w)=>s.jsx(c.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:a.color}}),a.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},a.name)),d=[],v=6;for(let a=0;a<m.length;a+=v)d.push(s.jsx("div",{className:"legend-row",children:m.slice(a,a+v)},a));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:E.cn("histogram-container relative",W&&"w-full",N&&"h-full"),style:l===void 0?void 0:{width:l},children:[s.jsxs("div",{className:E.cn("chart-container",N&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:T,className:E.cn(N&&"min-h-0 flex-1"),children:s.jsx("div",{ref:n,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(_,{series:y})]}),j]})};exports.Histogram=et;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),l=require("react"),U=require("../ChartTooltip/ChartTooltip.cjs"),k=require("../plotly-loader.cjs"),$=require("../../../hooks/use-element-size.cjs"),R=require("../../../hooks/use-plotly-theme.cjs"),D=require("../../../lib/utils.cjs"),G=require("../../../utils/colors.cjs");;/* empty css                 */const J=-.5,K=r=>r.reduce((n,u)=>n+u,0)/r.length,Q=(r,a)=>{const u=r.map(c=>Math.pow(c-a,2)).reduce((c,h)=>c+h,0)/r.length;return Math.sqrt(u)},Z=(r,a,n,u,c=100)=>{const h=[],p=[],y=(u-n)/(c-1);for(let e=0;e<c;e++){const o=n+e*y;h.push(o);const M=J*Math.pow((o-r)/a,2),q=1/(a*Math.sqrt(2*Math.PI))*Math.exp(M);p.push(q)}return{x:h,y:p}},tt=(r,a,n)=>{const u=Math.ceil((n.end-n.start)/n.size),c=Array(u).fill(0);a.forEach(e=>{if(e>=n.start&&e<=n.end){const o=Math.floor((e-n.start)/n.size);c[o]++}});const h=Math.max(...c),p=Math.max(...r),y=h/p;return r.map(e=>e*y)},et=({dataSeries:r,width:a,height:n,title:u="Histogram",xTitle:c="X Axis",yTitle:h="Frequency",bargap:p=.2,showDistributionLine:y=!1})=>{const e=l.useRef(null),o=R.usePlotlyTheme(),{bindTooltip:M,tooltipElement:q}=U.useChartTooltip({xLabel:c,yLabel:h}),[B,F]=$.useElementSize(),g=a??F.width,x=n??F.height,T=g>0&&x>0,W=a===void 0,L=n===void 0,b=l.useRef({width:g,height:x});b.current={width:g,height:x};const j=l.useRef(!1),C=l.useRef({width:0,height:0}),N=l.useMemo(()=>Array.isArray(r)?r:[r],[r]),_=l.useMemo(()=>N.length>1?"stack":void 0,[N.length]),z=G.CHART_COLORS,v=l.useMemo(()=>N.map((t,m)=>{const d=typeof t.showDistributionLine>"u"?y:t.showDistributionLine;return{...t,color:t.color||z[m%z.length],opacity:d?.5:t.opacity||1,showDistributionLine:d,lineWidth:t.lineWidth||3}}),[N,y,z]),A=o.gridColor,E=l.useMemo(()=>v.map(t=>({type:"histogram",x:t.x,name:t.name,marker:{color:t.color,line:{color:o.paperBg,width:1},opacity:t.opacity},autobinx:t.autobinx,xbins:t.xbins,hoverinfo:"none"})),[v,o]),P=l.useMemo(()=>v.filter(t=>t.showDistributionLine).map(t=>{const m=K(t.x),d=Q(t.x,m),f=Math.min(...t.x),i=Math.max(...t.x),w=i-f,H=f-w*.1,I=i+w*.1,V=t.xbins||{start:H,end:I,size:w/10},S=Z(m,d,H,I,100),X=tt(S.y,t.x,V);return{type:"scatter",x:S.x,y:X,mode:"lines",name:`${t.name} Distribution`,line:{color:t.color,width:t.lineWidth},hoverinfo:"none"}}),[v]),O=l.useMemo(()=>[...E,...P],[E,P]);l.useEffect(()=>{if(!e.current||!T)return;const t={width:b.current.width,height:b.current.height,font:{family:R.CHART_FONT_FAMILY},showlegend:!1,margin:{l:90,r:40,b:80,t:40},xaxis:{title:{text:c,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,automargin:!0},yaxis:{title:{text:h,font:{size:16,color:o.textSecondary,family:R.CHART_FONT_FAMILY,weight:400},standoff:20},gridcolor:A,tickcolor:o.tickColor,ticklen:8,tickwidth:1,ticks:"outside",linecolor:o.lineColor,linewidth:1,zeroline:!1,rangemode:"tozero",automargin:!0},barmode:_,bargap:p,paper_bgcolor:o.paperBg,plot_bgcolor:o.plotBg},m={responsive:!1,displayModeBar:!1,displaylogo:!1};let d=!1,f=null;return k.loadPlotly().then(i=>{d||!e.current||(i.newPlot(e.current,O,t,m),M(e.current),f=e.current,j.current=!0,C.current={...b.current})}),()=>{d=!0,f&&(k.getLoadedPlotly().purge(f),j.current=!1)}},[T,c,h,p,O,_,A,o,M]),l.useEffect(()=>{const t=e.current;!t||!j.current||g<=0||x<=0||C.current.width===g&&C.current.height===x||(C.current={width:g,height:x},k.getLoadedPlotly().relayout(t,{width:g,height:x}).catch(()=>{}))},[g,x]);const Y=({series:t})=>{const m=t.map((i,w)=>s.jsx(l.Fragment,{children:s.jsxs("div",{className:"legend-item",children:[s.jsx("span",{className:"color-box",style:{background:i.color}}),i.name,w<t.length-1&&s.jsx("span",{className:"divider"})]})},i.name)),d=[],f=6;for(let i=0;i<m.length;i+=f)d.push(s.jsx("div",{className:"legend-row",children:m.slice(i,i+f)},i));return s.jsx("div",{className:"legend-container",children:d})};return s.jsxs("div",{className:D.cn("histogram-container relative",W&&"w-full",L&&"h-full"),style:a===void 0?void 0:{width:a},children:[s.jsxs("div",{className:D.cn("chart-container",L&&"flex h-full flex-col"),children:[u&&s.jsx("div",{className:"title-container",children:s.jsx("h2",{className:"title",children:u})}),s.jsx("div",{ref:B,className:D.cn(L&&"min-h-0 flex-1"),children:s.jsx("div",{ref:e,style:{width:"100%",height:"100%",margin:"0"}})}),s.jsx(Y,{series:v})]}),q]})};exports.Histogram=et;
 //# sourceMappingURL=Histogram.cjs.map