Add buttons to download plots

PulmonomicsLab · Aug 1, 2023 · 59e758d · 59e758d
1 parent 2dee718
commit 59e758d
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 19 deletions.
diff --git a/heatmap.php b/heatmap.php
@@ -48,7 +48,15 @@
             <p>
                 <b><i>N.B. -</i></b> <b>1)</b> A cutoff of <i>log<sub>10</sub>(LDA score) &ge; 3</i>
                 was used to determine the differential markers. <b>2)</b> The normalized abundance
-                values in the heatmap are rounded off to 3 digits after the decimal point.
+                values in the heatmap are rounded off to 3 digits after the decimal point. <b>3)</b>
+                The data can be downloaded by clicking on the <i>"Download data"</i> button located
+                at the top of the page. <b>4)</b> The heatmap can be downloaded as a SVG image by
+                clicking on the <i>"Export as SVG"</i>
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
+                </svg>
+                button in the menubar located at the top
+                right corner of the plot.
             </p>
             </div><br/>
 
@@ -71,7 +79,7 @@ function getHeatmapData(queryType, bioproject, diseasePair, assayType, biome, is
                         if (this.readyState == 4 && this.status == 200) {
                             document.getElementById('display_text').innerHTML = '<h3>' + display + '</h3>';
                             document.getElementById('download_div').innerHTML = '<a href="' + file + '"><button type="button" style="margin:2px;">Download data</button></a>';
-                            plotHeatmap('plot_container', this.responseText, assayType, score);
+                            plotHeatmap('plot_container', this.responseText, diseasePair.replace(/_/g,"-"), assayType, biome, isolationSource.replace(/ /g,"_"), score);
                         }
                     };
                     xmlhttp.open('GET', file, true);

diff --git a/js/plot_heatmap.js b/js/plot_heatmap.js
@@ -19,7 +19,7 @@ function extractDataFromCSV(csv) {
     return [x, y, z];
 }
 
-function makePlot(div_id, assayType, heatmapData) {
+function makePlot(div_id, disease_pair, assayType, biome, isolation_scource, heatmapData) {
     var graphDiv = document.getElementById(div_id);
     var minHeight = 400;
     var computedHeight = (30*heatmapData[1].length + 100);
@@ -50,10 +50,14 @@ function makePlot(div_id, assayType, heatmapData) {
         height: ((computedHeight < minHeight) ? minHeight : computedHeight),
         bargap: 10,
         margin: {
-            t: 10,
+            t: 30,
             l: 220,
             b: 140
         },
+        modebar: {
+            color: '#262626',
+            activecolor: '#262626'
+        },
         hoverlabel: {
             font: {size: 16}
         },
@@ -85,13 +89,36 @@ function makePlot(div_id, assayType, heatmapData) {
         }
     };
 
-    Plotly.plot(graphDiv, data, layout, {showSendToCloud:false});
+    var config = {
+        showSendToCloud: false,
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['toggleSpikelines', 'zoom2d'],
+        modeBarButtonsToAdd: [{
+            name: 'Export as SVG',
+            icon: {
+                width: 600,
+                height: 600,
+                path: 'M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'
+            },
+            click: function(img) {
+                Plotly.downloadImage(
+                    img,
+                    {
+                        filename: 'heatmap_plot_' + disease_pair + '_' + assayType + '_' + biome + '_' + isolation_scource,
+                        format: 'svg'
+                    }
+                );
+            }
+        }]
+    }
+
+    Plotly.plot(graphDiv, data, layout, config);
 }
 
-function plotHeatmap(div_id, response, assayType, score) {
+function plotHeatmap(div_id, response, disease_pair, assayType, biome, isolation_scource, score) {
     var csv = $.csv.toArrays(response);
     var data = extractDataFromCSV(csv);
 
-    makePlot(div_id, assayType, data);
+    makePlot(div_id, disease_pair, assayType, biome, isolation_scource, data);
 }
 
diff --git a/js/plot_lda.js b/js/plot_lda.js
@@ -14,7 +14,7 @@ function getDataMap(csv) {
     return dataMap;
 }
 
-function makePlot(div_id, dataMap, assayType) {
+function makePlot(div_id, dataMap, disease_pair, assayType, biome, isolation_scource) {
     var graphDiv = document.getElementById(div_id);
 
     var data = [];
@@ -40,6 +40,10 @@ function makePlot(div_id, dataMap, assayType) {
         paper_bgcolor: '#fff0f5',//'#ffe6cc',//'#e6e6e6',
         height: 800,
         bargap: 0.2,
+        modebar: {
+            color: '#262626',
+            activecolor: '#262626'
+        },
         hoverlabel: {
             bgcolor: 'white',
             font: {size: 18, color: 'black'}
@@ -48,7 +52,7 @@ function makePlot(div_id, dataMap, assayType) {
             font: {color: 'black'}
         },
         margin: {
-            t: 10
+            t: 30
         },
         xaxis: {
             visible : true,
@@ -90,10 +94,33 @@ function makePlot(div_id, dataMap, assayType) {
         }
     };
 
-    Plotly.plot(graphDiv, data, layout, {showSendToCloud:false});
+    var config = {
+        showSendToCloud: false,
+        displayModeBar: true,
+        modeBarButtonsToRemove: ['toggleSpikelines', 'zoom2d', 'select2d', 'lasso2d'],
+        modeBarButtonsToAdd: [{
+            name: 'Export as SVG',
+            icon: {
+                width: 600,
+                height: 600,
+                path: 'M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z'
+            },
+            click: function(img) {
+                Plotly.downloadImage(
+                    img,
+                    {
+                        filename: 'lda_plot_' + disease_pair + '_' + assayType + '_' + biome + '_' + isolation_scource,
+                        format: 'svg'
+                    }
+                );
+            }
+        }]
+    }
+
+    Plotly.plot(graphDiv, data, layout, config);
 }
 
-function plotLDA(div_id, response, assayType, score) {
+function plotLDA(div_id, response, disease_pair, assayType, biome, isolation_scource, score) {
     var csv = $.csv.toArrays(response);
     var dataMap = getDataMap(csv);
 
@@ -102,6 +129,6 @@ function plotLDA(div_id, response, assayType, score) {
 //         msg += x + ' => ' + JSON.stringify(dataMap.get(x)) + '<br/>';
 //     document.getElementById(div_id).innerHTML = msg;
 
-    makePlot(div_id, dataMap, assayType);
+    makePlot(div_id, dataMap, disease_pair, assayType, biome, isolation_scource);
 }
 
diff --git a/lda.php b/lda.php
@@ -46,12 +46,18 @@
             <div id="download_div" style="width:100%; text-align:center; margin-bottom:20px;"></div>
             <div style="width:100%" id="plot_container">
             <p>
-                <b><i>N.B.</i></b> - <b>1)</b> To view all the differential markers, please hover on the bars of the plot or download the data
-                using the "Download data" button. <b>2)</b> A cutoff of <i>log<sub>10</sub>(LDA score) &ge; 2</i> was used
-                to determine the differential markers. <b>3)</b> All differential markers in the LDA plot were found to be
-                statistically significant. <b>4)</b> The statistical significance cutoff used was: <i>p-value &lt; 0.01</i>
-                (Kruskal-Wallis test). <b>5)</b> To check the p-values for each differential marker, please download the
-                data using the "Download data" button. <b>6)</b> The downloaded data shows Kruskal-Wallis <i>p</i>-value.
+                <b><i>N.B.</i></b> - <b>1)</b> To view all the differential markers, please hover on the bars of the plot
+                or download the data using the <i>"Download data"</i> button. located at the top of the page <b>2)</b> A
+                cutoff of <i>log<sub>10</sub> (LDA score) &ge; 2</i> was used to determine the differential markers.
+                <b>3)</b> All differential markers in the LDA plot were found to be statistically significant. <b>4)</b>
+                The statistical significance cutoff used was: <i>p-value &lt; 0.01</i> (Kruskal-Wallis test). <b>5)</b>
+                To check the p-values for each differential marker, please download the data using the "Download data"
+                button. <b>6)</b> The downloaded data shows Kruskal-Wallis <i>p</i>-value. <b>7)</b> The LDA plot can be
+                downloaded as a SVG image by clicking on the <i>"Export as SVG"</i>
+                <svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512">
+                    <path d="M288 32c0-17.7-14.3-32-32-32s-32 14.3-32 32V274.7l-73.4-73.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l128 128c12.5 12.5 32.8 12.5 45.3 0l128-128c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L288 274.7V32zM64 352c-35.3 0-64 28.7-64 64v32c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V416c0-35.3-28.7-64-64-64H346.5l-45.3 45.3c-25 25-65.5 25-90.5 0L165.5 352H64zm368 56a24 24 0 1 1 0 48 24 24 0 1 1 0-48z"/>
+                </svg>
+                button in the menubar located at the top right corner of the plot.
             </p>
             </div>
 
@@ -74,7 +80,7 @@ function getLDAData(queryType, bioproject, diseasePair, assayType, biome, isolat
                         if (this.readyState == 4 && this.status == 200) {
                             document.getElementById('display_text').innerHTML = '<h3>' + display + '</h3>';
                             document.getElementById('download_div').innerHTML = '<a href="' + file + '"><button type="button" style="margin:2px;">Download data</button></a>';
-                            plotLDA('plot_container', this.responseText, assayType, score);
+                            plotLDA('plot_container', this.responseText, diseasePair.replace(/_/g,"-"), assayType, biome, isolationSource.replace(/ /g,"_"), score);
                         }
                     };
                     xmlhttp.open('GET', file, true);