feat(create_report): add tabs for correlation and missing

Put Correlations and Missing Values figures into tabs.:
sfu-db · Mar 11, 2021 · 6dc568b · 6dc568b
1 parent ee28f42
commit 6dc568b
Show file tree

Hide file tree

Showing 5 changed files with 115 additions and 40 deletions.
diff --git a/dataprep/eda/create_report/formatter.py b/dataprep/eda/create_report/formatter.py
@@ -8,7 +8,6 @@
 import dask.dataframe as dd
 import pandas as pd
 from bokeh.embed import components
-from bokeh.models import Title
 from bokeh.plotting import Figure
 
 from ..configs import Config
@@ -117,8 +116,6 @@ def format_basic(df: dd.DataFrame, cfg: Config) -> Dict[str, Any]:
 
     # results dictionary
     res: Dict[str, Any] = {}
-    # figure list
-    figs: List[Figure] = []
     # overview
     if cfg.overview.enable:
         data["ov"].pop("ks_tests")
@@ -150,16 +147,17 @@ def format_basic(df: dd.DataFrame, cfg: Config) -> Dict[str, Any]:
                 )
                 stats = stats_viz_dt(data[col]["stats"])
             rndrd = render(itmdt, cfg)["layout"]
+            figs_var: List[Figure] = []
             for tab in rndrd:
                 try:
                     fig = tab.children[0]
                 except AttributeError:
                     fig = tab
                 # fig.title = Title(text=tab.title, align="center")
-                figs.append(fig)
+                figs_var.append(fig)
             res["variables"][col] = {
                 "tabledata": stats,
-                "plots": components(figs),
+                "plots": components(figs_var),
                 "col_type": itmdt.visual_type.replace("_column", ""),
             }
     else:
@@ -193,13 +191,16 @@ def format_basic(df: dd.DataFrame, cfg: Config) -> Dict[str, Any]:
                 visual_type="correlation_heatmaps",
             )
             rndrd = render_correlation(itmdt, cfg)
-            figs.clear()
+            res["correlation_names"] = []
+            figs_corr: List[Figure] = []
             for tab in rndrd.tabs:
                 fig = tab.child
                 fig.sizing_mode = "stretch_width"
-                fig.title = Title(text=tab.title, align="center", text_font_size="20px")
-                figs.append(fig)
-            res["correlations"] = components(figs)
+                # fig.title = Title(text=tab.title, align="center", text_font_size="20px")
+                figs_corr.append(fig)
+                res["correlation_names"].append(tab.title)
+            res["correlations"] = components(figs_corr)
+
     else:
         res["has_interaction"], res["has_correlation"] = False, False
 
@@ -209,16 +210,17 @@ def format_basic(df: dd.DataFrame, cfg: Config) -> Dict[str, Any]:
         itmdt = completions["miss"](data["miss"])
 
         rndrd = render_missing(itmdt, cfg)
-        figs.clear()
+        figs_missing: List[Figure] = []
         for fig in rndrd["layout"]:
             fig.sizing_mode = "stretch_width"
-            fig.title = Title(
-                text=rndrd["meta"][rndrd["layout"].index(fig)],
-                align="center",
-                text_font_size="20px",
-            )
-            figs.append(fig)
-        res["missing"] = components(figs)
+            # fig.title = Title(
+            #     text=rndrd["meta"][rndrd["layout"].index(fig)],
+            #     align="center",
+            #     text_font_size="20px",
+            # )
+            figs_missing.append(fig)
+        res["missing"] = components(figs_missing)
+        res["missing_tabs"] = ["Bar Chart", "Spectrum", "Heat Map", "Dendogram"]
 
     return res
 

diff --git a/dataprep/eda/create_report/templates/correlation.html b/dataprep/eda/create_report/templates/correlation.html
@@ -1,13 +1,20 @@
 <div class="correlation-container">
-  {% for div in context.components.correlations[1] %}
-  {% if div.error %}
-  {% with error_message = div.error %}
-  {% include 'error.html' %}
-  {% endwith %}
-  {% else %}
   <div class="corr-plot">
-    {{ div }}
+    <div class="report-tab">
+      <button class="corr-tablinks active" onclick="openTab(event, '{{context.components.correlation_names[0]}}')" >{{context.components.correlation_names[0]}}</button>
+      <button class="corr-tablinks" onclick="openTab(event, '{{context.components.correlation_names[1]}}')">{{context.components.correlation_names[1]}}</button>
+      <button class="corr-tablinks" onclick="openTab(event, '{{context.components.correlation_names[2]}}')">{{context.components.correlation_names[2]}}</button>
+    </div>
+
+    <div id={{context.components.correlation_names[0]}} class="corr-tabcontent">
+      {{ context.components.correlations[1][0]}}
+    </div>
+    <div id={{context.components.correlation_names[1]}} style="display:none" class="corr-tabcontent">
+      {{ context.components.correlations[1][1]}}
+    </div>
+    <div id={{context.components.correlation_names[2]}} style="display:none" class="corr-tabcontent">
+      {{ context.components.correlations[1][2]}}
+    </div>
+
   </div>
-  {% endif %}
-  {% endfor %}
 </div>
diff --git a/dataprep/eda/create_report/templates/missing.html b/dataprep/eda/create_report/templates/missing.html
@@ -1,13 +1,24 @@
 <div class="missing-container">
-    {% for div in context.components.missing[1] %}
-    {% if div.error %}
-    {% with error_message = div.error %}
-    {% include 'error.html' %}
-    {% endwith %}
-    {% else %}
-    <div class="miss-plot">
-        {{ div }}
-    </div>
-    {% endif %}
-    {% endfor %}
+  <div class="miss-plot">
+    <div class="report-tab">
+      <button class="missing-tablinks active" onclick="openTab(event, '{{context.components.missing_tabs[0]}}')" >{{context.components.missing_tabs[0]}}</button>
+      <button class="missing-tablinks" onclick="openTab(event, '{{context.components.missing_tabs[1]}}')">{{context.components.missing_tabs[1]}}</button>
+      <button class="missing-tablinks" onclick="openTab(event, '{{context.components.missing_tabs[2]}}')">{{context.components.missing_tabs[2]}}</button>
+      <button class="missing-tablinks" onclick="openTab(event, '{{context.components.missing_tabs[3]}}')">{{context.components.missing_tabs[3]}}</button>
+    </div>
+
+    <div id="{{context.components.missing_tabs[0]}}" class="missing-tabcontent">
+      {{ context.components.missing[1][0]}}
+    </div>
+    <div id="{{context.components.missing_tabs[1]}}" style="display:none" class="missing-tabcontent">
+      {{ context.components.missing[1][1]}}
+    </div>
+    <div id="{{context.components.missing_tabs[2]}}" style="display:none" class="missing-tabcontent">
+      {{ context.components.missing[1][2]}}
+    </div>
+    <div id="{{context.components.missing_tabs[3]}}" style="display:none" class="missing-tabcontent">
+      {{ context.components.missing[1][3]}}
+    </div>
+
+  </div>
 </div>
diff --git a/dataprep/eda/create_report/templates/scripts.html b/dataprep/eda/create_report/templates/scripts.html
@@ -90,4 +90,24 @@
             subContent.style.display = (displayStyle === 'none') ? 'block' : 'none';
         }
     }
+
+    function openTab(evt, tabName) {
+      var i, tabcontent, tablinks;
+
+      tabcontent = document.getElementsByClassName(evt.currentTarget.parentElement.nextElementSibling.className);
+      for (i = 0; i < tabcontent.length; i++) {
+        tabcontent[i].style.display = "none";
+      }
+
+      tablinks = document.getElementsByClassName(evt.currentTarget.className);
+      for (i = 0; i < tablinks.length; i++) {
+        tablinks[i].className = tablinks[i].className.replace(" active", "");
+      }
+
+      document.getElementById(tabName).style.display = "block";
+      evt.currentTarget.className += " active";
+    }
+
+
+
 </script>
diff --git a/dataprep/eda/create_report/templates/styles.html b/dataprep/eda/create_report/templates/styles.html
@@ -349,9 +349,6 @@
 
     .missing-container {
         margin: 20px;
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
     }
 
     .miss-plot {
@@ -376,6 +373,43 @@
         font-family: monospace !important;
         margin: unset !important;
     }
+    .report-tab {
+      overflow: hidden;
+      border: 1px solid #ccc;
+      background-color: #f1f1f1;
+    }
+
+    .report-tab button {
+      background-color: inherit;
+      float: none;
+      border: none;
+      outline: none;
+      cursor: pointer;
+      padding: 14px 16px;
+      transition: 0.3s;
+      border-bottom: 2px solid #9edae5;
+      border-bottom-style: inset;
+    }
+
+    .report-tab button:hover {
+      background-color: #ddd;
+    }
+
+    .report-tab button.active {
+      background-color: #ccc;
+    }
+
+    .corr-tabcontent {
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-top: none;
+    }
+    .missing-tabcontent {
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-top: none;
+    }
+
 
     @media screen and (max-width: 1320px) {
         h1.tb-title {
@@ -504,4 +538,5 @@
             font-size: 18px;
         }
     }
+
 </style>