Initialize boundary elements as arrays and update plotSolution to support mesh type parameter for better visualization

nikoscham · nikoscham · commit fdb3e1d12bc4 · 2025-05-07T09:17:37.000+03:00
diff --git a/src/readers/gmshReaderScript.js b/src/readers/gmshReaderScript.js
@@ -21,7 +21,7 @@ const importGmshQuadTri = async (file) => {
       quadElements: [],
       triangleElements: [],
     },
-    boundaryElements: [],
+    boundaryElements: [], // Will be initialized as array of arrays below
     boundaryConditions: [],
     gmshV: 0,
     ascii: false,
@@ -32,6 +32,11 @@ const importGmshQuadTri = async (file) => {
     elementTypes: {},
   };
 
+  // Initialize boundaryElements as an array of 4 empty arrays (one for each side)
+  for (let i = 0; i < 4; i++) {
+    result.boundaryElements[i] = [];
+  }
+
   let content = await file.text();
   let lines = content
     .split("\n")
@@ -273,6 +278,7 @@ const importGmshQuadTri = async (file) => {
 function processBoundaryElements(elements, boundaryElements, numNodes, elementType) {
   const edgeCount = {};
 
+  // Count occurrences of each edge
   for (let i = 0; i < elements.length; i++) {
     const element = elements[i];
 
@@ -286,6 +292,7 @@ function processBoundaryElements(elements, boundaryElements, numNodes, elementTy
     }
   }
 
+  // Process boundary edges
   for (let i = 0; i < elements.length; i++) {
     const element = elements[i];
 
@@ -295,12 +302,21 @@ function processBoundaryElements(elements, boundaryElements, numNodes, elementTy
 
       const edgeKey = node1 < node2 ? `${node1}-${node2}` : `${node2}-${node1}`;
 
-      if (edgeCount[edgeKey] === 1) {
-        boundaryElements.push({
-          elementIndex: i,
-          localEdgeIndex: j,
-          elementType: elementType,
-        });
+      if (edgeCount[edgeKey] === 1) { // Boundary edge
+        // Map local edge index to side index (0: bottom, 1: left, 2: top, 3: right)
+        let sideIndex;
+        
+        if (elementType === "quad") {
+          // For quadrilateral elements
+          // Gmsh format: 0 → bottom, 1 → right, 2 → top, 3 → left
+          // Adjusted to match the FEAScript format: 0 → bottom, 1 → left, 2 → top, 3 → right
+          const sideMap = [0, 3, 2, 1];
+          sideIndex = sideMap[j];
+        } else if (elementType === "triangle") {
+          // For triangular elements
+        }
+
+        boundaryElements[sideIndex].push([i, j]);
       }
     }
   }
diff --git a/src/visualization/plotSolutionScript.js b/src/visualization/plotSolutionScript.js
@@ -16,7 +16,7 @@
  * @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
- * @param {boolean} showMesh - Flag to indicate if the mesh would be rendered
+ * @param {string} [meshType="structured"] - Type of mesh: "structured" or "unstructured"
  */
 export function plotSolution(
   solutionVector,
@@ -25,7 +25,7 @@ export function plotSolution(
   meshDimension,
   plotType,
   plotDivId,
-  showMesh = false // Only applicable for rectangular domains when using generateMeshFromGeometry
+  meshType = "structured"
 ) {
   const { nodesXCoordinates, nodesYCoordinates } = nodesCoordinates;
 
@@ -65,92 +65,98 @@ export function plotSolution(
 
     Plotly.newPlot(plotDivId, [lineData], layout, { responsive: true });
   } else if (meshDimension === "2D" && plotType === "contour") {
-    // Calculate the number of nodes along the x-axis and y-axis
-    const numNodesX = new Set(nodesXCoordinates).size;
-    const numNodesY = new Set(nodesYCoordinates).size;
-
-    // Reshape the nodesXCoordinates and nodesYCoordinates arrays to match the grid dimensions
-    let reshapedXCoordinates = math.reshape(Array.from(nodesXCoordinates), [numNodesX, numNodesY]);
-    let reshapedYCoordinates = math.reshape(Array.from(nodesYCoordinates), [numNodesX, numNodesY]);
-
-    // Reshape the solution array to match the grid dimensions
-    let reshapedSolution = math.reshape(Array.from(solutionVector), [numNodesX, numNodesY]);
-
-    // Transpose the reshapedSolution array to get column-wise data
-    let transposedSolution = math.transpose(reshapedSolution);
-
-    // Create an array for x-coordinates used in the contour plot
-    let reshapedXForPlot = [];
-    for (let i = 0; i < numNodesX * numNodesY; i += numNodesY) {
-      let xValue = nodesXCoordinates[i];
-      reshapedXForPlot.push(xValue);
-    }
-
-    // Create the data structure for the contour plot
-    let contourData = {
-      z: transposedSolution,
-      type: "contour",
-      contours: {
-        coloring: "heatmap",
-      },
-      x: reshapedXForPlot,
-      y: reshapedYCoordinates[0],
-    };
-
-    // Create mesh lines for the computational grid if showMesh is true
-    let meshData = [];
-    if (showMesh) {
-      let meshLinesX = [];
-      let meshLinesY = [];
-
-      // Horizontal mesh lines
-      for (let i = 0; i < numNodesY; i++) {
-        meshLinesX.push(...reshapedXCoordinates.map((row) => row[i]), null);
-        meshLinesY.push(...reshapedYCoordinates.map((row) => row[i]), null);
-      }
-
-      // Vertical mesh lines
-      for (let i = 0; i < numNodesX; i++) {
-        meshLinesX.push(...reshapedXCoordinates[i], null);
-        meshLinesY.push(...reshapedYCoordinates[i], null);
-      }
-
-      // Create the data structure for the mesh lines
-      meshData = {
-        x: meshLinesX,
-        y: meshLinesY,
-        mode: "lines",
-        type: "scatter",
-        line: {
-          color: "palegoldenrod",
-          width: 1,
-        },
-        showlegend: false,
-      };
-    }
-
-    // Set a fixed maximum window size for the plot
+    // Use the user-provided mesh type
+    const isStructured = meshType === "structured";
+    
+    // For auto-detection (if needed)
+    const uniqueXCoords = new Set(nodesXCoordinates).size;
+    const uniqueYCoords = new Set(nodesYCoordinates).size;
+    
+    // Extract scalar values from solution vector
+    let zValues = Array.isArray(solutionVector[0]) 
+      ? solutionVector.map(val => val[0]) 
+      : solutionVector;
+    
+    // Common sizing parameters for both plot types
     let maxWindowWidth = Math.min(window.innerWidth, 700);
-    let maxPlotWidth = Math.max(...reshapedXForPlot);
-    let maxPlotHeight = Math.max(...reshapedYCoordinates[0]);
-    let zoomFactor = maxWindowWidth / maxPlotWidth;
-    let plotWidth = zoomFactor * maxPlotWidth;
-    let plotHeight = zoomFactor * maxPlotHeight;
-
-    // Set the layout for the contour plot
+    let maxX = Math.max(...nodesXCoordinates);
+    let maxY = Math.max(...nodesYCoordinates);
+    let aspectRatio = maxY / maxX;
+    let plotWidth = Math.min(maxWindowWidth, 600);
+    let plotHeight = plotWidth * aspectRatio * 0.8; // Slightly reduce height for better appearance
+    
+    // Common layout properties
     let layout = {
-      title: `${plotType} plot${showMesh ? " with mesh" : ""} - ${solverConfig}`,
+      title: `${plotType} plot (${meshType}) - ${solverConfig}`,
       width: plotWidth,
       height: plotHeight,
       xaxis: { title: "x" },
       yaxis: { title: "y" },
+      margin: { l: 50, r: 50, t: 50, b: 50 },
+      hovermode: 'closest'
     };
+    
+    if (isStructured) {
+      // Calculate the number of nodes along the x-axis and y-axis
+      const numNodesX = uniqueXCoords;
+      const numNodesY = uniqueYCoords;
+
+      // Reshape the nodesXCoordinates and nodesYCoordinates arrays to match the grid dimensions
+      let reshapedXCoordinates = math.reshape(Array.from(nodesXCoordinates), [numNodesX, numNodesY]);
+      let reshapedYCoordinates = math.reshape(Array.from(nodesYCoordinates), [numNodesX, numNodesY]);
+
+      // Reshape the solution array to match the grid dimensions
+      let reshapedSolution = math.reshape(Array.from(solutionVector), [numNodesX, numNodesY]);
+
+      // Transpose the reshapedSolution array to get column-wise data
+      let transposedSolution = math.transpose(reshapedSolution);
+
+      // Create an array for x-coordinates used in the contour plot
+      let reshapedXForPlot = [];
+      for (let i = 0; i < numNodesX * numNodesY; i += numNodesY) {
+        let xValue = nodesXCoordinates[i];
+        reshapedXForPlot.push(xValue);
+      }
+
+      // Create the data structure for the contour plot
+      let contourData = {
+        z: transposedSolution,
+        type: "contour",
+        contours: {
+          coloring: "heatmap",
+          showlabels: true
+        },
+        //colorscale: 'Viridis',
+        colorbar: {
+          title: 'Solution'
+        },
+        x: reshapedXForPlot,
+        y: reshapedYCoordinates[0],
+        name: 'Solution Field'
+      };
 
-    // Create the plot using Plotly
-    let plotData = [contourData];
-    if (showMesh) {
-      plotData.push(meshData);
+      // Create the plot using Plotly
+      Plotly.newPlot(plotDivId, [contourData], layout, { responsive: true });
+    } else {
+      // Create an interpolated contour plot for the unstructured mesh
+      let contourData = {
+        x: nodesXCoordinates,
+        y: nodesYCoordinates,
+        z: zValues,
+        type: 'contour',
+        contours: {
+          coloring: 'heatmap',
+          showlabels: true
+        },
+        //colorscale: 'Viridis',
+        colorbar: {
+          title: 'Solution'
+        },
+        name: 'Solution Field'
+      };
+      
+      // Create the plot using only the contour fill
+      Plotly.newPlot(plotDivId, [contourData], layout, { responsive: true });
     }
-    Plotly.newPlot(plotDivId, plotData, layout, { responsive: true });
   }
 }
