Fix the aspect ratio and size of the heatmap in Reports (#815)

* Fix the aspect ratio and size of the heatmap in Reports

* Update figures.py

Author: JulioAPeraza

nimare/reports/base.py

@@ -60,8 +60,9 @@
 ]
 
 IFRAME_SNIPPET = """\
-<iframe id="igraph" scrolling="no" style="border:none;" seamless="seamless" \
-src="./{0}" height="800" width="100%"></iframe>
+<div class="igraph-container">
+    <iframe class="igraph" src="./{0}"></iframe>
+</div>
 """
 
 PARAMETERS_DICT = {

nimare/reports/default.yml

@@ -49,6 +49,7 @@ sections:
   - bids: {value: preliminary, suffix: figure-legend}
   - bids: {value: preliminary, suffix: figure-interactive}
     title: Explorer
+    iframe: True
 - name: Meta-Analysis
   reportlets:
   - bids: {value: estimator, suffix: summary}
@@ -77,9 +78,7 @@ sections:
     subtitle: FocusCounter
     caption: *heatmap_text
     description: *focuscounter_text
-    iframe: True
   - bids: {value: diagnostics, diag: Jackknife, tab: counts, suffix: figure}
     subtitle: Jackknife
     caption: *heatmap_text
-    description: *jackknife_text
-    iframe: True
+    description: *jackknife_text

nimare/reports/figures.py

@@ -285,12 +285,12 @@ def plot_heatmap(contribution_table, out_filename):
     )
     new_df = pd.DataFrame(new_mat, columns=new_col_labels, index=new_row_labels)
 
-    fig = px.imshow(new_df, color_continuous_scale="Reds")
-    fig.update_layout(
-        autosize=False,
-        width=800,
-        height=800,
-    )
+    pxs_per_sqr = 50  # Number of pixels per square in the heatmap
+    plot2bar_space = 2  # Number of pixels between the heatmap and the barplot
+    width, height = (len(col_labels) + plot2bar_space) * pxs_per_sqr, len(row_labels) * pxs_per_sqr
+
+    fig = px.imshow(new_df, color_continuous_scale="Reds", aspect="auto")
+    fig.update_layout(autosize=False, width=width, height=height)
     fig.write_html(out_filename, full_html=True, include_plotlyjs=True)
 
 

nimare/reports/report.tpl

@@ -36,6 +36,23 @@ body {
     padding: 65px 10px 10px;
 }
 
+.igraph-container {
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  padding-top: 50%;
+}
+.igraph {
+  position: absolute;
+  border: none;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  width: 100%;
+  height: 100%;
+}
+
 .boiler-html {
     font-family: "Bitstream Charter", "Georgia", Times;
     margin: 20px 25px;