Sharex plotly fig fix + export HTML

src/App.jsx

@@ -44,6 +44,7 @@
   const [copyFeedback, setCopyFeedback] = useState('');
   const ref = useRef(null);
   const [csvData, setCsvData] = useState(null);
+  const [htmlData, setHtmlData] = useState(null);
   const reactFlowWrapper = useRef(null);
   // const [nodes, setNodes, onNodesChange] = useNodesState(initialNodes);
   // const [edges, setEdges, onEdgesChange] = useEdgesState([]);
@@ -58,7 +59,7 @@
   }, []);
 
   const onDragStart = (event, nodeType) => {
     setType(nodeType);
     event.dataTransfer.setData('text/plain', nodeType);
     event.dataTransfer.effectAllowed = 'move';
   };
@@ -215,7 +216,7 @@
       setNodes((nds) => [...nds, newNode]);
       setNodeCounter((count) => count + 1);
     },
     [screenToFlowPosition, type, nodeCounter, fetchDefaultValues, setDefaultValues, setNodes, setNodeCounter],
   );
 
   // Function to save a graph to computer with "Save As" dialog
@@ -481,6 +482,39 @@
     }
   };
 
+  const downloadHtml = async () => {
+    const blob = new Blob([htmlData], { type: "text/html" });
+    const filename = `simulation_${new Date().toISOString().replace(/[:.]/g, "-")}.html`;
+
+    try {
+      if ("showSaveFilePicker" in window) {
+        const options = {
+          suggestedName: filename,
+          types: [{
+            description: "HTML File",
+            accept: { "text/html": [".html"] }
+          }]
+        };
+
+        const handle = await window.showSaveFilePicker(options);
+        const writable = await handle.createWritable();
+        await writable.write(blob);
+        await writable.close();
+      } else {
+        throw new Error("showSaveFilePicker not supported");
+      }
+    } catch (err) {
+      console.warn("Falling back to automatic download:", err);
+      const a = document.createElement("a");
+      a.href = URL.createObjectURL(blob);
+      a.download = filename;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(a.href);
+    }
+  };
+
 
 
   // Allows user to save to python script
@@ -581,6 +615,7 @@
         // Store results and switch to results tab
         setSimulationResults(result.plot);
         setCsvData(result.csv_data);
+        setHtmlData(result.html);
         setActiveTab('results');
         alert('Pathsim simulation completed successfully! Check the Results tab.');
       } else {
@@ -897,7 +932,7 @@
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
   }, [selectedEdge, selectedNode, copiedNode, duplicateNode, setCopyFeedback]);
 
   return (
     <div style={{ width: '100vw', height: '100vh', display: 'flex', flexDirection: 'column' }}>
@@ -1664,6 +1699,19 @@
             {simulationResults ? (
               <>
                 <div style={{ textAlign: 'right', padding: '0 20px 10px 20px' }}>
+                  <button
+                    style={{
+                      backgroundColor: '#78A083',
+                      color: 'white',
+                      border: 'none',
+                      borderRadius: 5,
+                      cursor: 'pointer',
+                      marginRight: '10px',
+                    }}
+                    onClick={downloadHtml}
+                  >
+                    Download HTML
+                  </button>
                   <button
                     style={{
                       backgroundColor: '#78A083',

src/backend.py

@@ -264,13 +264,18 @@ def run_pathsim():
         # extra work is needed since spectra and scopes don't share the same x axis
         csv_payload = make_csv_payload(scopes)
 
+        # Share x only if there are only scopes or only spectra
+        shared_x = len(scopes) * len(spectra) == 0
+        n_rows = len(scopes) + len(spectra)
+        absolute_vertical_spacing = 0.05
+        relative_vertical_spacing = absolute_vertical_spacing / n_rows
         fig = make_subplots(
-            rows=len(scopes) + len(spectra),
+            rows=n_rows,
             cols=1,
-            shared_xaxes=False,
+            shared_xaxes=shared_x,
             subplot_titles=[scope.label for scope in scopes]
             + [spec.label for spec in spectra],
-            vertical_spacing=0.2,
+            vertical_spacing=relative_vertical_spacing,
         )
 
         # make scope plots
@@ -302,16 +307,18 @@ def run_pathsim():
             fig.update_xaxes(title_text="Frequency", row=len(scopes) + i + 1, col=1)
 
         fig.update_layout(
-            height=400 * (len(scopes) + len(spectra)), hovermode="x unified"
+            height=500 * (len(scopes) + len(spectra)), hovermode="x unified"
         )
 
         # Convert plot to JSON
         plot_data = plotly_json.dumps(fig, cls=plotly.utils.PlotlyJSONEncoder)
+        plot_html = fig.to_html()
 
         return jsonify(
             {
                 "success": True,
                 "plot": plot_data,
+                "html": plot_html,
                 "csv_data": csv_payload,
                 "message": "Pathsim simulation completed successfully",
             }