Update app.py

app.py

@@ -146,6 +146,7 @@ ui.card(
     {"style": "width: 870px;"},
     ui.head_content(
         ui.tags.script(src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.5/d3.min.js"),
+        ui.tags.script(src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"),
         ui.tags.script("""
         async function downloadSVG() {
             const content = document.getElementById('capture-section');
@@ -207,17 +208,65 @@ ui.card(
             document.body.removeChild(link);
             URL.revokeObjectURL(url);
         }
+
+        async function downloadPNG() {
+            const content = document.getElementById('capture-section');
+            
+            try {
+                // Create a wrapper div with margins
+                const wrapper = document.createElement('div');
+                wrapper.style.padding = '20px';
+                wrapper.style.backgroundColor = 'white';
+                
+                // Clone the content
+                const clonedContent = content.cloneNode(true);
+                wrapper.appendChild(clonedContent);
+                
+                // Add wrapper to document temporarily
+                document.body.appendChild(wrapper);
+                
+                const canvas = await html2canvas(wrapper, {
+                    backgroundColor: 'white',
+                    scale: 2,
+                    useCORS: true,
+                    logging: false,
+                    width: content.offsetWidth + 40,  // Add padding width
+                    height: content.offsetHeight + 40  // Add padding height
+                });
+                
+                // Remove temporary wrapper
+                document.body.removeChild(wrapper);
+                
+                // Convert canvas to blob
+                canvas.toBlob(function(blob) {
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = 'plot_and_table.png';
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(url);
+                }, 'image/png');
+            } catch (error) {
+                console.error('Error generating PNG:', error);
+            }
+        }
         
-        $(document).on('click', '#capture_btn', function() {
+        $(document).on('click', '#capture_svg_btn', function() {
             downloadSVG();
         });
+
+        $(document).on('click', '#capture_png_btn', function() {
+            downloadPNG();
+        });
         """)
     ),
     ui.output_text("status"),
     ui.div(
         {
             "id": "capture-section",
-            "style": "background-color: white; padding: 0; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px;"  # Added margin-right
+            "style": "background-color: white; padding: 0; margin-left: 20px; margin-right: 20px; margin-top: 20px; margin-bottom: 20px;"
         },
         # Plot section with relative positioning for brush
         ui.div(
@@ -228,12 +277,14 @@ ui.card(
         ui.div(
             {"style": "margin-top: 20px;"},
             ui.row(ui.tags.b("Pitches in Selection"), ui.output_table("in_brush")),
-            
-
         ),
         ui.div({"style": "height: 20px;"}) 
     ),
-    ui.input_action_button("capture_btn", "Save as SVG", class_="btn-primary"),
+    ui.div(
+        {"style": "display: flex; gap: 10px;"},
+        ui.input_action_button("capture_svg_btn", "Save as SVG", class_="btn-primary"),
+        ui.input_action_button("capture_png_btn", "Save as PNG", class_="btn-success"),
+    ),
 )
             #     ),
             # )