fix theme fails if trace.marker.color isn't an array (#5144)

frontend-components/plotly/src/components/Chart.tsx

@@ -339,8 +339,8 @@ export default function Chart({
     if (changeTheme) {
       try {
         console.log("changeTheme", changeTheme);
-        const TRACES = plotData?.data.filter((trace) =>
-          trace?.name?.startsWith("Volume"),
+        const TRACES = plotData?.data.filter(
+          (trace) => trace?.name?.trim() === "Volume",
         );
         const darkmode = !darkMode;
 
@@ -375,7 +375,7 @@ export default function Chart({
         const volumeColors = darkmode ? volumeColorsDark : volumeColorsLight;
 
         TRACES.forEach((trace) => {
-          if (trace.type === "bar")
+          if (trace.type === "bar" && Array.isArray(trace.marker.color))
             trace.marker.color = trace.marker.color.map((color) => {
               return volumeColors[color] || color;
             });

frontend-components/plotly/src/components/ResizeHandler.tsx

@@ -17,31 +17,31 @@ export default async function ResizeHandler({
     .filter(
       (x) =>
         plotData.layout[x].showticklabels ||
-        plotData.layout[x].matches == undefined
+        plotData.layout[x].matches === undefined,
     );
 
-  const TRACES = plotData.data.filter((trace) =>
-    trace?.name?.startsWith("Volume")
+  const TRACES = plotData.data.filter(
+    (trace) => trace?.name?.trim() === "Volume",
   );
 
-  let layout_update: any = {};
-  let volume: any = volumeBars || { old_nticks: {} };
+  const layout_update: any = {};
+  const volume: any = volumeBars || { old_nticks: {} };
 
   const width = window.innerWidth;
   const height = window.innerHeight;
-  let tick_size =
+  const tick_size =
     height > 420 && width < 920 ? 8 : height > 420 && width < 500 ? 9 : 7;
 
   if (width < 750) {
     // We hide the modebar and set the number of ticks to 6
 
     TRACES.forEach((trace) => {
-      if (trace.type == "bar") {
+      if (trace.type === "bar") {
         trace.opacity = 1;
         trace.marker.line.width = 0.09;
-        if (volumeBars.yaxis == undefined) {
-          volume.yaxis = "yaxis" + trace.yaxis.replace("y", "");
-          layout_update[volume.yaxis + ".tickfont.size"] = tick_size;
+        if (volumeBars.yaxis === undefined) {
+          volume.yaxis = `yaxis${trace.yaxis.replace("y", "")}`;
+          layout_update[`${volume.yaxis}.tickfont.size`] = tick_size;
           volume.tickfont = plotData.layout[volume.yaxis].tickfont || {};
 
           plotData.layout.margin.l -= 40;
@@ -50,8 +50,8 @@ export default async function ResizeHandler({
     });
 
     XAXIS.forEach((x) => {
-      if (volumeBars.old_nticks?.[x] == undefined) {
-        layout_update[x + ".nticks"] = 6;
+      if (volumeBars.old_nticks?.[x] === undefined) {
+        layout_update[`${x}.nticks`] = 6;
         volume.old_nticks[x] = plotData.layout[x].nticks || 10;
       }
     });
@@ -63,21 +63,21 @@ export default async function ResizeHandler({
     await hideModebar(false);
     setMaximizePlot(false);
 
-    if (volumeBars.old_nticks != undefined) {
+    if (volumeBars.old_nticks !== undefined) {
       XAXIS.forEach((x) => {
-        if (volumeBars.old_nticks[x] != undefined) {
-          layout_update[x + ".nticks"] = volume.old_nticks[x];
+        if (volumeBars.old_nticks[x] !== undefined) {
+          layout_update[`${x}.nticks`] = volume.old_nticks[x];
           volume.old_nticks[x] = undefined;
         }
       });
     }
 
-    if (volumeBars.yaxis != undefined) {
+    if (volumeBars.yaxis !== undefined) {
       TRACES.forEach((trace) => {
-        if (trace.type == "bar") {
+        if (trace.type === "bar") {
           trace.opacity = 0.5;
           trace.marker.line.width = 0.2;
-          layout_update[volume.yaxis + ".tickfont.size"] =
+          layout_update[`${volume.yaxis}.tickfont.size`] =
             volume.tickfont.size + 3;
           plotData.layout.margin.l += 40;
           volume.yaxis = undefined;