Clean up typing, memoization in plotly components

flatironinstitute · Jan 31, 2025 · d80481b · d80481b
1 parent ccdaaac
commit d80481b
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 31 deletions.
diff --git a/gui/package.json b/gui/package.json
@@ -45,6 +45,7 @@
     "@testing-library/dom": "^10.1.0",
     "@testing-library/react": "^16.0.0",
     "@types/node": "^20.12.11",
+    "@types/plotly.js": "^2.35.2",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@types/react-plotly.js": "^2.6.3",

diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/Histogram.tsx
@@ -13,27 +13,29 @@ const Histogram: FunctionComponent<HistogramProps> = ({
   variableName,
 }) => {
   const data = useMemo(
-    () =>
-      ({
+    () => [
+      {
         x: histData,
         type: "histogram",
         nbinsx: Math.ceil(1.5 * Math.sqrt(histData.length)),
         marker: { color: "#505060" },
         histnorm: "probability",
-      }) as const,
+      } as const,
+    ],
     [histData],
   );
-  return (
-    <LazyPlotlyPlot
-      data={[data]}
-      layout={{
-        title: { text: title, font: { size: 12 } },
-        xaxis: { title: variableName },
-        yaxis: { title: "Count" },
-        margin: { r: 0 },
-      }}
-    />
+
+  const layout = useMemo(
+    () => ({
+      title: { text: title, font: { size: 12 } },
+      xaxis: { title: { text: variableName } },
+      yaxis: { title: { text: "Count" } },
+      margin: { r: 0 },
+    }),
+    [title, variableName],
   );
+
+  return <LazyPlotlyPlot data={data} layout={layout} />;
 };
 
 export default Histogram;
diff --git a/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx b/gui/src/app/areas/ControlArea/SamplingArea/ResultsArea/SamplerOutputArea/TracePlot.tsx
@@ -18,41 +18,43 @@ const TracePlot: FunctionComponent<TracePlotProps> = ({
   const plotSequences = useMemo(() => {
     const uniqueChainIds = Array.from(new Set(drawChainIds)).sort();
     return uniqueChainIds.map(
-      (chainId, ii) => {
+      (chainId) => {
         return {
           label: `Chain ${chainId}`,
           data: draws[columnIndex].filter(
             (_, i) => drawChainIds[i] === chainId,
           ),
-          color: chainColorForIndex(ii),
         };
       },
       [draws, columnIndex],
     );
   }, [draws, columnIndex, drawChainIds]);
 
-  const data: any[] = useMemo(
+  const data = useMemo(
     () =>
-      plotSequences.map((ps) => ({
-        x: [...new Array(ps.data.length).keys()].map((i) => i + 1),
-        y: ps.data,
-        type: "scatter",
-        mode: "lines+markers",
-        marker: { color: ps.color },
-      })),
+      plotSequences.map(
+        (ps) =>
+          ({
+            x: [...new Array(ps.data.length).keys()].map((i) => i + 1),
+            y: ps.data,
+            type: "scatter",
+            mode: "lines+markers",
+          }) as const,
+      ),
     [plotSequences],
   );
   const layout = useMemo(
     () => ({
-      title: "",
-      yaxis: { title: variableName },
-      xaxis: { title: "draw" },
+      title: { text: "" },
+      yaxis: { title: { text: variableName } },
+      xaxis: { title: { text: "draw" } },
       margin: {
         t: 30,
         b: 40,
         r: 0,
       },
       showlegend: false,
+      colorway: chainColorList,
     }),
     [variableName],
   );
@@ -164,8 +166,4 @@ const chainColorList: string[] = [
   "#06f6c9",
 ];
 
-const chainColorForIndex = (i: number) => {
-  return chainColorList[i % chainColorList.length];
-};
-
 export default TracePlot;
diff --git a/gui/yarn.lock b/gui/yarn.lock
@@ -1170,7 +1170,7 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/plotly.js@*":
+"@types/plotly.js@*", "@types/plotly.js@^2.35.2":
   version "2.35.2"
   resolved "https://registry.yarnpkg.com/@types/plotly.js/-/plotly.js-2.35.2.tgz#c771a7bf56b398730f8c799879895de4294289c0"
   integrity sha512-tn0Kp7F6VWiu96jknCvR/PcdIGIATeIK+Z5WXH3bEvG6CRwUNfhy34yBhfPYmTea7mMQxXvTZKGMm6/Y4wxESg==