From 88c66f9601bc5394a33e53da239d222edbeb97e9 Mon Sep 17 00:00:00 2001
From: Dylan Socolobsky <dylan.socolobsky@lambdaclass.com>
Date: Fri, 6 Dec 2024 16:59:31 -0300
Subject: [PATCH] Generate and show .png as preview instead of .svg

---
 .github/workflows/flamegraph_reporter.yaml |  3 +++
 pages/index.html                           | 11 +++++------
 pages/style.css                            |  2 --
 3 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/.github/workflows/flamegraph_reporter.yaml b/.github/workflows/flamegraph_reporter.yaml
index 8bd85b7dc1..99169f0417 100644
--- a/.github/workflows/flamegraph_reporter.yaml
+++ b/.github/workflows/flamegraph_reporter.yaml
@@ -181,6 +181,9 @@ jobs:
       - name: Update static page locally with new data
         shell: bash
         run: |
+          sudo apt install -y librsvg2-bin
+          rsvg-convert -w 1024 -h 1024 flamegraph_ethrex.svg -o pages/flamegraph_ethrex.png
+          rsvg-convert -w 1024 -h 1024 flamegraph_reth.svg -o pages/flamegraph_reth.png
           cp -r flamegraph_ethrex.svg pages/
           cp -r flamegraph_reth.svg pages/
           sed -i "s/{{LAST_UPDATE}}/$(date +'%Y-%m-%dT%H:%M:%S')/g" pages/index.html
diff --git a/pages/index.html b/pages/index.html
index 3301a14f14..09eb11d621 100644
--- a/pages/index.html
+++ b/pages/index.html
@@ -25,20 +25,19 @@ <h1>Ethrex Flamegraph Comparison</h1>
         <div class="col-header">
             <h2>Ethrex</h2>
             <a href="flamegraph_ethrex.svg/flamegraph_ethrex.svg"
-               download="flamegraph_ethrex.svg/flamegraph_ethrex.svg">Download</a>
+               download="flamegraph_ethrex.svg/flamegraph_ethrex.svg">Download interactive SVG</a>
         </div>
         <p class="time-elapsed">Time elapsed: {{ETHREX_TIME}}</p>
-        <object id="svg1" data="flamegraph_ethrex.svg/flamegraph_ethrex.svg" type="image/svg+xml" width=100%
-                height=90%"></object>
+        <img src="flamegraph_ethrex.png/flamegraph_ethrex.png">
     </div>
     <div class="column">
         <div class="col-header">
             <h2>Reth</h2>
-            <a href="flamegraph_reth.svg/flamegraph_reth.svg" download="flamegraph_reth.svg/flamegraph_reth.svg">Download</a>
+            <a href="flamegraph_reth.svg/flamegraph_reth.svg" download="flamegraph_reth.svg/flamegraph_reth.svg">Download
+                interactive SVG</a>
         </div>
         <p class="time-elapsed">Time elapsed: {{RETH_TIME}}</p>
-        <object id="svg2" data="flamegraph_reth.svg/flamegraph_reth.svg" type="image/svg+xml" width=100%
-                height=90%></object>
+        <img src="flamegraph_reth.png/flamegraph_reth.png">
     </div>
 </main>
 
diff --git a/pages/style.css b/pages/style.css
index 91dba15aaa..83085aaa11 100644
--- a/pages/style.css
+++ b/pages/style.css
@@ -48,8 +48,6 @@ h1 {
 img {
     width: 80%;
     height: auto;
-    max-width: 200px;
-    max-height: 150px;
 }
 
 h2 {