feat: implemented both vtk js and plotly.

Author: sridhar-mani

package.json

@@ -66,7 +66,12 @@
   },
   "peerDependencies": {
     "mathjs": "^11.12.0",
-    "@kitware/vtk.js": "^32.12.0"
+    "@kitware/vtk.js": "^32.12.0",
+    "plotly.js": "^2.35.3"
+  },
+  "peerDependenciesMeta": {
+    "@kitware/vtk.js": { "optional": true },
+    "plotly.js": { "optional": true }
   },
   "devDependencies": {
     "@kitware/vtk.js": "^32.12.0",

rollup.config.js

@@ -39,5 +39,5 @@ export default {
     }),
     terser(),
   ],
-  external: (id) => id === "@kitware/vtk.js" || id.startsWith("@kitware/vtk.js/"),
+  external: (id) => id === "@kitware/vtk.js" || id.startsWith("@kitware/vtk.js/") || id === "plotly.js",
 };

src/index.js

@@ -18,6 +18,6 @@ export {
   transformSolverOutputToVtkData,
   transformSolverOutputToVTP,
   transformSolverOutputToMLBuffers,
-} from "./visualization/vtkSolutionScript.js";
+} from "./visualization/vizSolutionScript.js";
 export { FEAScriptWorker } from "./workers/workerScript.js";
 export const printVersion = "0.2.0";

src/visualization/vtkSolutionScript.js src/visualization/vizSolutionScript.jssrc/visualization/vtkSolutionScript.js renamed to src/visualization/vizSolutionScript.js

@@ -74,29 +74,43 @@ export function createContourLineOptions(options = {}) {
 
 export async function plotSolution(model, result, plotType, plotDivId, renderOptions = {}) {
   console.time("plottingTime");
-
-  const meshDimension = model.meshConfig.meshDimension;
-  const meshData = prepareMesh(model.meshConfig);
-  const vtkData = await transformSolverOutputToVtkData(model, result, meshData, {
-    mode: meshDimension === "1D" && plotType === "line" ? "line" : "surface",
-  });
-
-  await renderVtkScene(vtkData, plotDivId, model.solverConfig, plotType, renderOptions);
+  const backend = renderOptions.backend ?? "vtk";
+
+  if (backend === "plotly") {
+    await renderPlotlyScene(model, result, plotType, plotDivId, false, renderOptions);
+  } else {
+    const meshDimension = model.meshConfig.meshDimension;
+    const meshData = prepareMesh(model.meshConfig);
+    const vtkData = await transformSolverOutputToVtkData(model, result, meshData, {
+      mode: meshDimension === "1D" && plotType === "line" ? "line" : "surface",
+    });
+    await renderVtkScene(vtkData, plotDivId, model.solverConfig, plotType, renderOptions);
+  }
   console.timeEnd("plottingTime");
 }
 
 export async function plotInterpolatedSolution(model, result, plotType, plotDivId, renderOptions = {}) {
   console.time("plottingTime");
-
-  if (model.meshConfig.meshDimension !== "2D" || plotType !== "contour") {
-    await plotSolution(model, result, plotType, plotDivId, renderOptions);
-    console.timeEnd("plottingTime");
-    return;
+  const backend = renderOptions.backend ?? "vtk";
+
+  if (backend === "plotly") {
+    if (model.meshConfig.meshDimension === "2D" && plotType === "contour") {
+      const meshData = prepareMesh(model.meshConfig);
+      const grid = await buildInterpolatedGridValues(model, result, meshData);
+      await renderPlotlyScene(model, result, plotType, plotDivId, true, renderOptions, grid);
+    } else {
+      await renderPlotlyScene(model, result, plotType, plotDivId, false, renderOptions);
+    }
+  } else {
+    if (model.meshConfig.meshDimension !== "2D" || plotType !== "contour") {
+      await plotSolution(model, result, plotType, plotDivId, renderOptions);
+      console.timeEnd("plottingTime");
+      return;
+    }
+    const meshData = prepareMesh(model.meshConfig);
+    const interpolatedVtkData = await buildInterpolatedVtkData(model, result, meshData);
+    await renderVtkScene(interpolatedVtkData, plotDivId, model.solverConfig, `${plotType}-interpolated`, renderOptions);
   }
-
-  const meshData = prepareMesh(model.meshConfig);
-  const interpolatedVtkData = await buildInterpolatedVtkData(model, result, meshData);
-  await renderVtkScene(interpolatedVtkData, plotDivId, model.solverConfig, `${plotType}-interpolated`, renderOptions);
   console.timeEnd("plottingTime");
 }
 
@@ -274,6 +288,90 @@ async function addContourLinesToRenderer(renderer, vtkData, scalarRange, contour
   renderer.addActor(contourActor);
 }
 
+async function renderPlotlyScene(model, result, plotType, plotDivId, interpolated, renderOptions = {}, prebuiltGrid = null) {
+  if (typeof document === "undefined") {
+    errorLog("Plotly visualization requires a browser environment");
+    return;
+  }
+  const { default: Plotly } = await import("plotly.js");
+  const { nodesXCoordinates, nodesYCoordinates } = result.nodesCoordinates;
+  const meshDimension = model.meshConfig.meshDimension;
+  const plotWidth = typeof window !== "undefined" ? Math.min(window.innerWidth, 600) : 600;
+  const colorScale = renderOptions.colorScale ?? {};
+  const plotlyColorscale = colorScale.reverse ? "RdBu" : "RdBu_r";
+  const scalarBarTitle = colorScale.scalarBarTitle ?? "Solution";
+
+  let traces, layout;
+
+  if (meshDimension === "1D") {
+    const scalars = extractScalarSolution(result.solutionVector, nodesXCoordinates.length);
+    traces = [{
+      x: Array.from(nodesXCoordinates),
+      y: Array.from(scalars),
+      mode: "lines",
+      type: "scatter",
+      line: { color: "royalblue" },
+    }];
+    layout = {
+      title: `${plotType} plot - ${model.solverConfig}`,
+      xaxis: { title: "x" },
+      yaxis: { title: "Solution" },
+      width: plotWidth,
+    };
+  } else if (interpolated && prebuiltGrid) {
+    const { visNodesX, visNodesY, visSolution, insideMask, minX, minY, deltaX, deltaY, lengthX, lengthY } = prebuiltGrid;
+    const xVals = Array.from({ length: visNodesX }, (_, i) => minX + i * deltaX);
+    const yVals = Array.from({ length: visNodesY }, (_, i) => minY + i * deltaY);
+    // Plotly contour expects z[iy][ix]
+    const zGrid = Array.from({ length: visNodesY }, (_, iy) =>
+      Array.from({ length: visNodesX }, (_, ix) => {
+        const idx = ix * visNodesY + iy;
+        return insideMask[idx] ? visSolution[idx] : null;
+      })
+    );
+    const showContourLines = renderOptions.contourLines?.enabled ?? true;
+    traces = [{
+      x: xVals,
+      y: yVals,
+      z: zGrid,
+      type: "contour",
+      colorscale: plotlyColorscale,
+      colorbar: { title: scalarBarTitle },
+      contours: { coloring: showContourLines ? "fill" : "heatmap", showlines: showContourLines },
+      ncontours: renderOptions.contourLines?.numberOfContours ?? 12,
+    }];
+    layout = {
+      title: `${plotType} plot (interpolated) - ${model.solverConfig}`,
+      xaxis: { title: "x", scaleanchor: "y", scaleratio: 1 },
+      yaxis: { title: "y" },
+      width: plotWidth,
+      height: plotWidth * (lengthY / lengthX),
+    };
+  } else {
+    const scalars = extractScalarSolution(result.solutionVector, nodesXCoordinates.length);
+    traces = [{
+      x: Array.from(nodesXCoordinates),
+      y: nodesYCoordinates ? Array.from(nodesYCoordinates) : undefined,
+      mode: "markers",
+      type: "scatter",
+      marker: {
+        color: Array.from(scalars),
+        colorscale: plotlyColorscale,
+        showscale: true,
+        colorbar: { title: scalarBarTitle },
+      },
+    }];
+    layout = {
+      title: `${plotType} plot - ${model.solverConfig}`,
+      xaxis: { title: "x", scaleanchor: "y", scaleratio: 1 },
+      yaxis: { title: "y" },
+      width: plotWidth,
+    };
+  }
+
+  await Plotly.newPlot(plotDivId, traces, layout, { responsive: true });
+}
+
 function reverseColorMapPreset(preset, reverse) {
   if (!reverse || !preset?.RGBPoints?.length) return preset;
   const rgb = preset.RGBPoints;
@@ -450,7 +548,7 @@ function buildVTPString(vtkData) {
   ].join("\n");
 }
 
-async function buildInterpolatedVtkData(model, result, meshData) {
+async function buildInterpolatedGridValues(model, result, meshData) {
   const { nodesXCoordinates, nodesYCoordinates } = result.nodesCoordinates;
   const basisFunctions = new BasisFunctions({
     meshDimension: model.meshConfig.meshDimension,
@@ -553,6 +651,18 @@ async function buildInterpolatedVtkData(model, result, meshData) {
     }
   }
 
+  return {
+    visNodesX, visNodesY,
+    minX, minY, deltaX, deltaY, lengthX, lengthY,
+    visNodeXCoordinates, visNodeYCoordinates,
+    visSolution, insideMask,
+  };
+}
+
+async function buildInterpolatedVtkData(model, result, meshData) {
+  const grid = await buildInterpolatedGridValues(model, result, meshData);
+  const { visNodesX, visNodesY, minX, minY, deltaX, deltaY, visNodeXCoordinates, visNodeYCoordinates, visSolution, insideMask } = grid;
+
   const points = buildPointsArray(visNodeXCoordinates, visNodeYCoordinates);
   const cells = buildStructuredGridCells(visNodesX, visNodesY, insideMask);
   const polyData = await buildPolyData(points, visSolution, cells, "surface");