Updated Plotly import pattern to use the Factor for bundled distribut…

…ion.

src/components/Anomalies/Anomalies.tsx

@@ -1,6 +1,5 @@
 import type { Annotations, ColorScale, Data, Layout } from "plotly.js";
 import { CSSProperties, ReactNode, useMemo } from "react";
-import Plot from "react-plotly.js";
 import {
   Divergent1Colorway,
   getColorFromScale,
@@ -16,6 +15,11 @@ import {
 import { colorbarDefaults } from "../../plotly/colorbar";
 import { FormatCategoryTickTextParams } from "../../utils";
 import { BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export type AnomaliesProps = BaseVisualProps &
   ScreenSizeHookProps & {

src/components/DesirabilityGauge/DesirabilityGauge.tsx

@@ -1,8 +1,12 @@
-import { useMemo, type CSSProperties, ReactNode } from "react";
-import Plot from "react-plotly.js";
+import { ReactNode, useMemo, type CSSProperties } from "react";
 import { getColorScheme } from "../../colors";
 import { useLayoutDefaults, useSemanticColors } from "../../hooks";
 import { BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export interface DesirabilityGaugeProps extends BaseVisualProps {
   value: number;

src/components/FeatureContributions/FeatureContributionsVerticalBarChart/FeatureContributionsVerticalBarChart.tsx

@@ -1,6 +1,5 @@
 import type { Config, Datum, Layout, PlotData } from "plotly.js";
 import { useMemo, type CSSProperties, type ReactNode } from "react";
-import Plot from "react-plotly.js";
 import { getColorScheme } from "../../../colors";
 import {
   useLayoutCategoryAxisDefaults,
@@ -12,6 +11,11 @@ import {
 import { FormatCategoryTickTextParams } from "../../../utils";
 import { plotDefaults } from "../../BaseVisual";
 import { FeatureContributionsBaseVisualProps } from "../FeatureContributions.types";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export type FeatureContributionsVerticalBarChartProps =
   FeatureContributionsBaseVisualProps &

src/components/FeatureCorrelations/FeatureCorrelations.tsx

@@ -1,5 +1,6 @@
+import type { Annotations, ColorScale, Data, Datum, Layout } from "plotly.js";
 import { type CSSProperties, type ReactNode, useMemo } from "react";
-import Plot from "react-plotly.js";
+import { FormatCategoryTickTextParams } from "../..";
 import {
   Divergent1Colorway,
   getColorFromScale,
@@ -13,10 +14,13 @@ import {
   useLayoutCategoryAxisDefaults,
   useLayoutDefaults,
 } from "../../hooks";
-import { type BaseVisualProps, plotDefaults } from "../BaseVisual";
-import type { Annotations, ColorScale, Data, Datum, Layout } from "plotly.js";
-import { FormatCategoryTickTextParams } from "../..";
 import { colorbarDefaults } from "../../plotly/colorbar";
+import { type BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export type FeatureCorrelationsProps = BaseVisualProps &
   ScreenSizeHookProps & {

src/components/InfluenceWeights/InfluenceWeights.tsx

@@ -1,19 +1,23 @@
+import type { Data, Layout, ScatterData } from "plotly.js";
 import { type CSSProperties, type ReactNode, useMemo } from "react";
-import Plot from "react-plotly.js";
+import { FormatCategoryTickTextParams, parseNA, roundTo } from "../..";
 import { getColorScheme } from "../../colors";
 import {
-  type ScreenSizeHookProps,
-  useLayoutDefaults,
   getCaseLabel,
   getDataMeta,
-  UseLayoutCategoryAxisDefaultsParams,
+  type ScreenSizeHookProps,
   useLayoutCategoryAxisDefaults,
+  UseLayoutCategoryAxisDefaultsParams,
+  useLayoutDefaults,
   useSemanticColors,
 } from "../../hooks";
-import { type BaseVisualProps, plotDefaults } from "../BaseVisual";
-import type { Data, Layout, ScatterData } from "plotly.js";
-import { FormatCategoryTickTextParams, parseNA, roundTo } from "../..";
 import { Case, IdFeaturesProps } from "../../types";
+import { type BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 type GetInfluenceDataGroups = (
   data: Partial<ScatterData>

src/components/InfluentialCases/InfluentialCases.tsx

@@ -1,7 +1,6 @@
 import { extent, range } from "d3-array";
 import type { Data, Layout, ScatterMarkerLine } from "plotly.js";
 import { CSSProperties, ReactNode, useMemo } from "react";
-import Plot from "react-plotly.js";
 import { ChartColors, NamedColor, getColorScheme } from "../../colors";
 import {
   getCaseLabel,
@@ -18,6 +17,11 @@ import {
   safeMin,
 } from "../../utils";
 import { BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export type InfluentialCasesProps = BaseVisualProps &
   IdFeaturesProps & {

src/components/SimilarityConviction/SimilarityConviction.tsx

@@ -1,6 +1,5 @@
 import type { Data, Layout } from "plotly.js";
 import { CSSProperties, ReactNode, useMemo } from "react";
-import Plot from "react-plotly.js";
 import { getColorScheme } from "../../colors";
 import {
   getCaseLabel,
@@ -10,6 +9,11 @@ import {
 import { IdFeaturesProps } from "../../types";
 import { parseNA } from "../../utils";
 import { BaseVisualProps, plotDefaults } from "../BaseVisual";
+// customizable method: use your own `Plotly` object as we're using a rebuild strict distribution
+import createPlotlyComponent from "react-plotly.js/factory";
+// @ts-expect-error
+import Plotly from "plotly.js-strict-dist";
+const Plot = createPlotlyComponent(Plotly);
 
 export type SimilarityConvictionCase = {
   similarity_conviction: number | null;