refactor js templates

andrei-ng · andrei-ng · commit a5b470ec7108 · 2025-07-05T11:01:46.000+02:00
- add upload the pdf example result from the test to the ci for
   debugging

Signed-off-by: Andrei Gherghescu &lt;8067229+andrei-ng@users.noreply.github.com&gt;
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -129,6 +129,13 @@ jobs:
 
           cargo test --verbose --workspace --features plotly_ndarray,plotly_image,static_export_chromedriver --exclude plotly_kaleido
 
+      - name: Upload example.pdf artifact
+        uses: actions/upload-artifact@v4
+        with:
+          name: example-pdf-${{ matrix.os }}
+          path: ${{ github.workspace }}/plotly_static/example.pdf
+          retention-days: 30
+
   code-coverage:
     name: Code Coverage
     runs-on: ubuntu-latest
diff --git a/plotly_static/Cargo.toml b/plotly_static/Cargo.toml
@@ -16,6 +16,7 @@ exclude = ["target/*"]
 webdriver_download = []
 geckodriver = []
 chromedriver = []
+html2pdf_export_timeout = []
 
 [dependencies]
 log = "0.4"
diff --git a/plotly_static/src/lib.rs b/plotly_static/src/lib.rs
@@ -274,7 +274,7 @@ use serde_json::map::Map as JsonMap;
 use urlencoding::encode;
 use webdriver::WebDriver;
 
-use crate::template::{IMAGE_EXPORT_JS_SCRIPT, PDF_EXPORT_JS_SCRIPT};
+use crate::template::{image_export_js_script, pdf_export_js_script};
 
 #[cfg(all(feature = "chromedriver", not(target_os = "windows")))]
 fn chrome_default_caps() -> Vec<&'static str> {
@@ -969,7 +969,7 @@ impl StaticExporter {
                     plot.scale.into(),
                 ];
 
-                (PDF_EXPORT_JS_SCRIPT, args)
+                (pdf_export_js_script(), args)
             }
             _ => {
                 let args = vec![
@@ -980,11 +980,11 @@ impl StaticExporter {
                     plot.scale.into(),
                 ];
 
-                (IMAGE_EXPORT_JS_SCRIPT, args)
+                (image_export_js_script(), args)
             }
         };
 
-        let data = client.execute_async(js_script, args).await?;
+        let data = client.execute_async(&js_script, args).await?;
 
         // Don't close the client - keep it for reuse
         // client.close().await?;
@@ -1298,7 +1298,7 @@ mod tests {
         assert!(dst.exists());
         let metadata = std::fs::metadata(&dst).expect("Could not retrieve file metadata");
         let file_size = metadata.len();
-        assert!(file_size > 0,);
+        assert!(file_size > 600000,);
         // assert!(std::fs::remove_file(dst.as_path()).is_ok());
     }
 
diff --git a/plotly_static/src/template.rs b/plotly_static/src/template.rs
@@ -12,7 +12,8 @@ use rand::{
     rng,
 };
 
-pub(crate) const IMAGE_EXPORT_JS_SCRIPT: &str = r#"
+pub(crate) fn image_export_js_script() -> String {
+    r#"
     const plot = arguments[0];
     const format = arguments[1];
     const width = arguments[2];
@@ -33,9 +34,25 @@ pub(crate) const IMAGE_EXPORT_JS_SCRIPT: &str = r#"
         console.error('Plotly error:', err);
         callback('ERROR:' + err.toString());
     });
-"#;
+"#
+    .to_string()
+}
+
+pub(crate) fn pdf_export_js_script() -> String {
+    let timeout_ms = if cfg!(feature = "html2pdf_export_timeout") {
+        500
+    } else {
+        250
+    };
 
-pub(crate) const PDF_EXPORT_JS_SCRIPT: &str = r##"
+    let foreign_object_rendering = if cfg!(feature = "chromedriver") {
+        "true"
+    } else {
+        "false"
+    };
+
+    format!(
+        r##"
     const plot = arguments[0];
     const format = arguments[1];
     const width = arguments[2];
@@ -50,45 +67,42 @@ pub(crate) const PDF_EXPORT_JS_SCRIPT: &str = r##"
     const graph_div = document.getElementById('plotly-html-element');
 
     // Check if html2pdf is available
-    if (typeof html2pdf === 'undefined') {
+    if (typeof html2pdf === 'undefined') {{
         console.error('html2pdf library not available');
         callback('ERROR:html2pdf library not loaded');
         return;
-    }
-
-    console.log('html2pdf library is available');
+    }}
 
-    let tempDiv = null;
-    let mmWidth, mmHeight;
+  let tempDiv = null;
 
-    Plotly.newPlot(graph_div, plot).then(function() {
-        console.log('Plotly plot created successfully');
+    const cleanup = () => {{
+        if (tempDiv) {{
+            document.body.removeChild(tempDiv);
+        }}
+    }};
 
-        // Force PNG format for PDF export to test if SVG is the issue
-        return Plotly.toImage(graph_div, {
-        format: 'png',
+    Plotly.newPlot(graph_div, plot).then(function() {{
+        return Plotly.toImage(graph_div, {{
+        format: format,
         width: width,
         height: height,
-        });
-    }).then(function(dataUrl) {
+        }});
+    }}).then(function(dataUrl) {{
         console.log('Plotly image generated successfully');
         console.log('SVG data URL length:', dataUrl.length);
         console.log('SVG data URL preview:', dataUrl.substring(0, 200) + '...');
-
-        // Convert px to mm: 1px = 0.264583 mm
-        mmWidth = width * 0.264583;
-        mmHeight = height * 0.264583;
-
-        console.log('PDF dimensions (mm):', mmWidth, 'x', mmHeight);
+        console.log('PDF dimensions (px):', width, 'x', height);
 
         // Create a temporary div for the image
         tempDiv = document.createElement('div');
         tempDiv.style.width = width + 'px';
         tempDiv.style.height = height + 'px';
         tempDiv.style.background = 'white';
         tempDiv.style.position = 'fixed';
-        tempDiv.style.left = '0px';
         tempDiv.style.top = '0px';
+        tempDiv.style.left = '0px';
+        tempDiv.style.margin = '0px';
+        tempDiv.style.padding = '0px';
         tempDiv.style.overflow = 'hidden';
         tempDiv.style.boxSizing = 'border-box';
         tempDiv.style.zIndex = '9999';
@@ -105,35 +119,30 @@ pub(crate) const PDF_EXPORT_JS_SCRIPT: &str = r##"
         img.style.objectFit = 'contain';
         img.style.maxWidth = '100%';
         img.style.maxHeight = '100%';
+        img.style.verticalAlign = 'top';
+        img.style.boxSizing = 'border-box';
         tempDiv.appendChild(img);
 
         // Wait for the image to load
-        return new Promise(function(resolve) {
-            img.onload = function() {
+        return new Promise(function(resolve) {{
+            img.onload = function() {{
                 console.log('SVG image loaded successfully');
                 // Additional delay to ensure image is fully rendered
-                setTimeout(function() {
-                    console.log('SVG rendering delay completed');
-                    resolve();
-                }, 500);
-            };
-            img.onerror = function() {
-                console.error('Failed to load SVG image');
-                if (tempDiv) {
-                    document.body.removeChild(tempDiv);
-                }
+                // Brief delay to ensure image is fully rendered
+                setTimeout(resolve, {timeout_ms});
+            }};
+            img.onerror = function() {{
+                cleanup();
                 callback('ERROR:Failed to load SVG image');
-            };
-        });
-    }).then(function() {
+            }};
+        }});
+    }}).then(function() {{
         console.log('Starting PDF generation...');
-
-        // Generate PDF with more robust configuration
-        return html2pdf().from(tempDiv).set({
+        return html2pdf().from(tempDiv).set({{
             margin: 0,
             filename: 'plotly-plot.pdf',
-            image: { type: 'jpeg', quality: 1},
-            html2canvas: {
+            image: {{ type: 'jpeg', quality: 1}},
+            html2canvas: {{
                 scale: scale,
                 backgroundColor: '#fff',
                 useCORS: true,
@@ -143,31 +152,27 @@ pub(crate) const PDF_EXPORT_JS_SCRIPT: &str = r##"
                 height: height,
                 imageTimeout: 15000,
                 removeContainer: true,
-                foreignObjectRendering: true
-            },
-            jsPDF: {
-                unit: 'mm',
-                format: [mmWidth, mmHeight],
-                orientation: mmWidth > mmHeight ? 'landscape' : 'portrait',
+                foreignObjectRendering: {foreign_object_rendering},
+                scrollY: 0,
+                scrollX: 0
+            }},
+            jsPDF: {{
+                unit: 'px',
+                format: [width, height],
+                orientation: width > height ? 'landscape' : 'portrait',
                 compress: true
-            }
-        }).toPdf().output('datauristring');
-    }).then(function(dataUri) {
-        console.log('PDF generation completed successfully');
-            // Clean up
-        if (tempDiv) {
-            document.body.removeChild(tempDiv);
-        }
+            }}
+        }}).toPdf().output('datauristring');
+    }}).then(function(dataUri) {{
+        cleanup();
             callback(dataUri);
-        }).catch(function(err) {
-        console.error('PDF generation error:', err);
-        // Clean up if tempDiv exists
-        if (tempDiv) {
-            document.body.removeChild(tempDiv);
-        }
+    }}).catch(function(err) {{
+        cleanup();
         callback('ERROR:' + err.toString());
-    });
-"##;
+    }});
+"##
+    )
+}
 
 pub(crate) fn get_html_body(offline: bool) -> String {
     let offline_js = offline_js_sources();
