support bdata in ploty customdata and dataItem (#781)

* work on a fix for bdata in customdata / x with new plotly version

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* update rtd build

* fix custom data

* do not convert to list

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* remove logging statement

* remove comments

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>

.readthedocs.yaml

@@ -1,20 +1,23 @@
+# .readthedocs.yaml
+# Read the Docs configuration file
+# See https://docs.readthedocs.io/en/stable/config-file/v2.html for details
+
 version: 2
 
+submodules:
+  include: all
+
+# Set the version of Python and other tools you might need
 build:
-  os: "ubuntu-22.04"
+  os: ubuntu-22.04
   tools:
-    python: "3.12"
+    python: "3.11"
   jobs:
-    post_create_environment:
-      # Install poetry
-      # https://python-poetry.org/docs/#installing-manually
-      - pip install poetry
     post_install:
-      # Install dependencies with 'docs' dependency group
-      # https://python-poetry.org/docs/managing-dependencies/#dependency-groups
-      # VIRTUAL_ENV needs to be set manually for now.
-      # See https://github.com/readthedocs/readthedocs.org/pull/11152/
-      - VIRTUAL_ENV=$READTHEDOCS_VIRTUALENV_PATH poetry install --with docs
+      # see https://github.com/astral-sh/uv/issues/10074
+      - pip install uv
+      - UV_PROJECT_ENVIRONMENT=$READTHEDOCS_VIRTUALENV_PATH uv sync --all-extras --link-mode=copy --group=docs
 
+# Build documentation in the docs/ directory with Sphinx
 sphinx:
-  configuration: docs/source/conf.py
+   configuration: docs/source/conf.py

app/src/components/plotting.tsx

@@ -4,6 +4,7 @@ import { Button, Card, Form } from "react-bootstrap";
 import { FaLock, FaLockOpen } from "react-icons/fa";
 import { IoDuplicate } from "react-icons/io5";
 import Plot from "react-plotly.js";
+import { decodeTypedArraySpec } from "plotly.js/src/lib/array.js";
 import { Rnd, type RndResizeCallback } from "react-rnd";
 import * as znsocket from "znsocket";
 import { client } from "../socket";
@@ -194,31 +195,51 @@ const PlotsCard2 = ({
 		if (rawPlotData && plotType === "plotly") {
 			const markerList: [number, number, string][] = [];
 
-			// Add markers at the matching step in the data
-			rawPlotData.forEach((dataItem) => {
-				if (dataItem.customdata) {
-					dataItem.customdata.forEach((customdata, index) => {
-						// Check if customdata[0] matches the step
+			// Function to convert fields containing bdata and dtype
+			const convertToArray = (data: any) => {
+				if (
+					data &&
+					typeof data === "object" &&
+					"bdata" in data &&
+					"dtype" in data
+				) {
+					return decodeTypedArraySpec(data);
+				}
+				return data;
+			};
+
+			// Process each data item
+			const updatedPlotData = rawPlotData.map((dataItem) => {
+				const convertedItem = {
+					...dataItem,
+					x: convertToArray(dataItem.x),
+					y: convertToArray(dataItem.y),
+					customdata: dataItem.customdata
+						? convertToArray(dataItem.customdata)
+						: dataItem.customdata,
+				};
+
+				if (convertedItem.customdata) {
+					convertedItem.customdata.forEach((customdata, index) => {
 						if (customdata[0] === step) {
-							const xPosition = dataItem.x[index];
-							const yPosition = dataItem.y[index];
-							// check if dataItem.line.color is available
+							let xPosition = convertedItem.x[index];
+							let yPosition = convertedItem.y[index];
+
 							let color = "red";
-							if (dataItem.line) {
-								if (dataItem.line.color) {
-									color = dataItem.line.color;
-								}
+							if (convertedItem.line?.color) {
+								color = convertedItem.line.color;
 							}
+
 							markerList.push([xPosition, yPosition, color]);
 						}
 					});
 				}
-			});
 
-			const plotDataCopy = JSON.parse(JSON.stringify(rawPlotData));
+				return convertedItem;
+			});
 
-			// Add the markers to the data array
-			plotDataCopy.push({
+			// Add marker data
+			updatedPlotData.push({
 				type: "scatter",
 				mode: "markers",
 				name: "Step",
@@ -235,9 +256,10 @@ const PlotsCard2 = ({
 					},
 				},
 			});
-			setPlotData(plotDataCopy);
+
+			setPlotData(updatedPlotData);
 		}
-	}, [rawPlotData, step, plotType]); // does this self-trigger? If so use raw
+	}, [rawPlotData, step, plotType]);
 
 	const handleSelectChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
 		setSelectedOption(event.target.value);