Refactor solution plotting: rename plot div ID for clarity and update plotSolution function to accept dynamic div ID for rendering

nikoscham · nikoscham · commit b1c4b6b8b84e · 2024-11-17T22:00:01.000+02:00
diff --git a/examples/solidHeatTransferScript/exampleSolidHeatTransfer01/FEAScriptExampleSolidHeatTransfer01.html b/examples/solidHeatTransferScript/exampleSolidHeatTransfer01/FEAScriptExampleSolidHeatTransfer01.html
@@ -57,7 +57,7 @@
   <!-- Webpage text -->
   <body>
     <h1>Heat Conduction in a Two-Dimensional Fin</h1>
-    <div id="plot"></div>
+    <div id="solutionPlot"></div>
 
     <p>
       The mesh configuration and boundary conditions can be adjusted by editing
@@ -146,7 +146,8 @@ <h1>Heat Conduction in a Two-Dimensional Fin</h1>
           nodesCoordinates,
           solverConfig,
           meshConfig.meshDimension,
-          "contour"
+          "contour",
+          "solutionPlot"
         );
       });
     </script>
diff --git a/src/visualization/plotSolutionScript.js b/src/visualization/plotSolutionScript.js
@@ -15,19 +15,21 @@
  * @param {string} solverConfig - Parameter specifying the type of solver
  * @param {string} meshDimension - The dimension of the solution
  * @param {string} plotType - The type of plot
+ * @param {string} plotDivId - The id of the div where the plot will be rendered
  */
 export function plotSolution(
   solutionVector,
   nodesCoordinates,
   solverConfig,
   meshDimension,
-  plotType
+  plotType,
+  plotDivId
 ) {
   const { nodesXCoordinates, nodesYCoordinates } = nodesCoordinates;
 
   // Check if the device is in vertical position
   if (window.innerHeight > window.innerWidth) {
-    document.getElementById("plot").innerHTML =
+    document.getElementById(plotDivId).innerHTML =
       "Cannot draw the results. Please turn your phone to horizontal position to see the results.";
     return;
   }
@@ -94,6 +96,6 @@ export function plotSolution(
     };
 
     // Create the contour plot using Plotly
-    Plotly.newPlot("plot", data, layout);
+    Plotly.newPlot(plotDivId, data, layout);
   }
 }
