From 85514fd225c518443dfd549542cb2c16b83550a2 Mon Sep 17 00:00:00 2001
From: Abe <abegong@gmail.com>
Date: Mon, 1 Jul 2019 15:23:40 -0700
Subject: [PATCH] Add popover to Number of observations

---
 .../render/renderer/other_section_renderer.py |  15 ++-
 .../render/view/templates/component.j2        |  17 ++-
 .../render/view/templates/page.j2             |   9 +-
 tests/render/fixtures/html_snapshot.html      | 107 +++++++++---------
 tests/render/test_default_jinja_view.py       |  12 +-
 5 files changed, 95 insertions(+), 65 deletions(-)

diff --git a/great_expectations/render/renderer/other_section_renderer.py b/great_expectations/render/renderer/other_section_renderer.py
index b87018d0e0b6..b0a35f4fd20a 100644
--- a/great_expectations/render/renderer/other_section_renderer.py
+++ b/great_expectations/render/renderer/other_section_renderer.py
@@ -54,7 +54,20 @@ def _render_dataset_info(cls, evrs, content_blocks):
         )
         if row_count_evr != None:
             table_rows.append([
-                "Number of observations",
+                {
+                    "template": "Number of observations",
+                    "params": {},
+                    "styling": {
+                        "attributes": {
+                            "data-toggle": "popover",
+                            "data-trigger": "hover",
+                            "data-placement": "top",
+                            "data-content": "expect_table_row_count_to_be_between",
+                            "container": "body",
+                        }
+
+                    }
+                },
                 row_count_evr["result"]["observed_value"]
             ])
 
diff --git a/great_expectations/render/view/templates/component.j2 b/great_expectations/render/view/templates/component.j2
index 05a4c4df117f..25345864f9df 100644
--- a/great_expectations/render/view/templates/component.j2
+++ b/great_expectations/render/view/templates/component.j2
@@ -1,3 +1,8 @@
+{%- if section_loop is defined -%}
+    {%- set section_id = "section-"~section_loop.index -%}
+{%- else -%}
+    {%- set section_id = None -%}
+{%- endif -%}
 {% if content_block_loop is defined -%}
     {%- if section_loop is defined -%}
         {%- set content_block_id = "section-"~section_loop.index~"-content-block-"~content_block_loop.index -%}
@@ -26,7 +31,7 @@
 {% endif -%}
 <div id="{{content_block_id}}" {{ content_block | render_styling_from_string_template }}>
     {% if "header" in content_block and content_block["content_block_type"] != "header" -%}
-    <h4 id="{{content_block_id}}-header" {{ content_block_header_styling | replace("{{content_block_id}}", content_block_id) }}>
+    <h4 id="{{content_block_id}}-header" {{ content_block_header_styling | replace("{{section_id}}", section_id) | replace("{{content_block_id}}", content_block_id) }}>
         {{ content_block["header"] | render_string_template }}
     </h4>
     {% endif -%}
@@ -64,12 +69,18 @@
             vegaEmbed('#{{content_block_id}}-body', vlSpec, {actions: false}).then(result=>console.log(result)).catch(console.warn);
         </script>
     {%- elif content_block["content_block_type"] == "table" -%}
-        <table id="{{content_block_id}}-body" {{ content_block_body_styling }}>
+        <table id="{{content_block_id}}-body" {{ content_block_body_styling | replace("{{section_id}}", section_id) | replace("{{content_block_id}}", content_block_id) }}>
         {% for row in content_block["table_rows"] -%}
             <tr>
             {% set rowloop = loop -%}
             {% for cell in row -%}
-                <td id="{{content_block_id}}-cell-{{ rowloop.index }}-{{ loop.index }}">{{ cell | render_string_template }}</td>
+                {% if cell is mapping and "styling" in cell -%}
+                    {% set cell_styling = cell["styling"] | render_styling | replace("{{section_id}}", section_id) | replace("{{content_block_id}}", content_block_id) -%}
+                {% else -%}
+                    {% set cell_styling = "" -%}
+                {% endif -%}
+
+                <td id="{{content_block_id}}-cell-{{ rowloop.index }}-{{ loop.index }}" {{ cell_styling }}>{{ cell | render_string_template }}</td>
             {%- endfor -%}
             </tr>
         {%- endfor -%}
diff --git a/great_expectations/render/view/templates/page.j2 b/great_expectations/render/view/templates/page.j2
index a15cb4555077..ad6b8ad94ed2 100644
--- a/great_expectations/render/view/templates/page.j2
+++ b/great_expectations/render/view/templates/page.j2
@@ -13,7 +13,7 @@
         position: relative;
       }
       .container {
-        margin-top: 50px;
+        padding-top: 50px;
       }
       .sticky {
         position: -webkit-sticky;
@@ -50,6 +50,9 @@
         transition: .3s transform ease-in-out;
       }
 
+      .popover {
+        max-width: 100%;
+      }
     </style>
 
     <script src="https://cdn.jsdelivr.net/npm/vega@5.3.5/build/vega.js"></script>
@@ -78,8 +81,8 @@
       </div>
     </div>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <script>
       $(function () {
         $('[data-toggle="popover"]').popover()
diff --git a/tests/render/fixtures/html_snapshot.html b/tests/render/fixtures/html_snapshot.html
index 2827f6964774..5a525ac4b9e6 100644
--- a/tests/render/fixtures/html_snapshot.html
+++ b/tests/render/fixtures/html_snapshot.html
@@ -13,7 +13,7 @@
         position: relative;
       }
       .container {
-        margin-top: 50px;
+        padding-top: 50px;
       }
       .sticky {
         position: -webkit-sticky;
@@ -50,6 +50,9 @@
         transition: .3s transform ease-in-out;
       }
 
+      .popover {
+        max-width: 100%;
+      }
     </style>
 
     <script src="https://cdn.jsdelivr.net/npm/vega@5.3.5/build/vega.js"></script>
@@ -117,12 +120,12 @@ <h4 id="section-1-content-block-2-header" >
     </h4>
     <table id="section-1-content-block-2-body" class="table table-sm" >
         <tr>
-            <td id="section-1-content-block-2-cell-1-1">Number of variables</td><td id="section-1-content-block-2-cell-1-2">12</td></tr><tr>
-            <td id="section-1-content-block-2-cell-2-1">Number of observations</td><td id="section-1-content-block-2-cell-2-2">891</td></tr><tr>
-            <td id="section-1-content-block-2-cell-3-1">Missing cells</td><td id="section-1-content-block-2-cell-3-2">866 (8.1%)</td></tr><tr>
-            <td id="section-1-content-block-2-cell-4-1">Duplicate rows</td><td id="section-1-content-block-2-cell-4-2">0 (0.0%)</td></tr><tr>
-            <td id="section-1-content-block-2-cell-5-1">Total size in memory</td><td id="section-1-content-block-2-cell-5-2">83.6 KiB</td></tr><tr>
-            <td id="section-1-content-block-2-cell-6-1">Average record size in memory</td><td id="section-1-content-block-2-cell-6-2">96.1 B</td></tr></table>
+            <td id="section-1-content-block-2-cell-1-1" >Number of variables</td><td id="section-1-content-block-2-cell-1-2" >12</td></tr><tr>
+            <td id="section-1-content-block-2-cell-2-1" >Number of observations</td><td id="section-1-content-block-2-cell-2-2" >891</td></tr><tr>
+            <td id="section-1-content-block-2-cell-3-1" >Missing cells</td><td id="section-1-content-block-2-cell-3-2" >866 (8.1%)</td></tr><tr>
+            <td id="section-1-content-block-2-cell-4-1" >Duplicate rows</td><td id="section-1-content-block-2-cell-4-2" >0 (0.0%)</td></tr><tr>
+            <td id="section-1-content-block-2-cell-5-1" >Total size in memory</td><td id="section-1-content-block-2-cell-5-2" >83.6 KiB</td></tr><tr>
+            <td id="section-1-content-block-2-cell-6-1" >Average record size in memory</td><td id="section-1-content-block-2-cell-6-2" >96.1 B</td></tr></table>
 </div>
         
 <div id="section-1-content-block-3" class="col-6 table-responsive" style="margin-top:20px;" >
@@ -131,14 +134,14 @@ <h4 id="section-1-content-block-3-header" >
     </h4>
     <table id="section-1-content-block-3-body" class="table table-sm" >
         <tr>
-            <td id="section-1-content-block-3-cell-1-1">Numeric</td><td id="section-1-content-block-3-cell-1-2">5</td></tr><tr>
-            <td id="section-1-content-block-3-cell-2-1">Categorical</td><td id="section-1-content-block-3-cell-2-2">5</td></tr><tr>
-            <td id="section-1-content-block-3-cell-3-1">Boolean</td><td id="section-1-content-block-3-cell-3-2">1</td></tr><tr>
-            <td id="section-1-content-block-3-cell-4-1">Date</td><td id="section-1-content-block-3-cell-4-2">0</td></tr><tr>
-            <td id="section-1-content-block-3-cell-5-1">URL</td><td id="section-1-content-block-3-cell-5-2">0</td></tr><tr>
-            <td id="section-1-content-block-3-cell-6-1">Text (Unique)</td><td id="section-1-content-block-3-cell-6-2">1</td></tr><tr>
-            <td id="section-1-content-block-3-cell-7-1">Rejected</td><td id="section-1-content-block-3-cell-7-2">0</td></tr><tr>
-            <td id="section-1-content-block-3-cell-8-1">Unsupported</td><td id="section-1-content-block-3-cell-8-2">0</td></tr></table>
+            <td id="section-1-content-block-3-cell-1-1" >Numeric</td><td id="section-1-content-block-3-cell-1-2" >5</td></tr><tr>
+            <td id="section-1-content-block-3-cell-2-1" >Categorical</td><td id="section-1-content-block-3-cell-2-2" >5</td></tr><tr>
+            <td id="section-1-content-block-3-cell-3-1" >Boolean</td><td id="section-1-content-block-3-cell-3-2" >1</td></tr><tr>
+            <td id="section-1-content-block-3-cell-4-1" >Date</td><td id="section-1-content-block-3-cell-4-2" >0</td></tr><tr>
+            <td id="section-1-content-block-3-cell-5-1" >URL</td><td id="section-1-content-block-3-cell-5-2" >0</td></tr><tr>
+            <td id="section-1-content-block-3-cell-6-1" >Text (Unique)</td><td id="section-1-content-block-3-cell-6-2" >1</td></tr><tr>
+            <td id="section-1-content-block-3-cell-7-1" >Rejected</td><td id="section-1-content-block-3-cell-7-2" >0</td></tr><tr>
+            <td id="section-1-content-block-3-cell-8-1" >Unsupported</td><td id="section-1-content-block-3-cell-8-2" >0</td></tr></table>
 </div>
         
 <div id="section-1-content-block-4" class="col-12" style="margin-top:20px;" >
@@ -147,12 +150,12 @@ <h4 id="section-1-content-block-4-header" >
     </h4>
     <table id="section-1-content-block-4-body" class="table table-sm" >
         <tr>
-            <td id="section-1-content-block-4-cell-1-1"><span class="badge badge-primary" >Age</span> has 177 (19.9%) missing values</td><td id="section-1-content-block-4-cell-1-2"><span class="badge badge-warning" >Missing</span></td></tr><tr>
-            <td id="section-1-content-block-4-cell-2-1"><span class="badge badge-primary" >Cabin</span> has a high cardinality: 148 distinct values</td><td id="section-1-content-block-4-cell-2-2"><span class="badge badge-warning" >Warning</span></td></tr><tr>
-            <td id="section-1-content-block-4-cell-3-1"><span class="badge badge-primary" >Cabin</span> has 687 (77.1%) missing values</td><td id="section-1-content-block-4-cell-3-2"><span class="badge badge-warning" >Missing</span></td></tr><tr>
-            <td id="section-1-content-block-4-cell-4-1"><span class="badge badge-primary" >Fare</span> has 15 (< 0.1%) zeros</td><td id="section-1-content-block-4-cell-4-2"><span class="badge badge-warning" >Zeros</span></td></tr><tr>
-            <td id="section-1-content-block-4-cell-5-1"><span class="badge badge-primary" >Parch</span> has 678 (< 76.1%) zeros</td><td id="section-1-content-block-4-cell-5-2"><span class="badge badge-warning" >Zeros</span></td></tr><tr>
-            <td id="section-1-content-block-4-cell-6-1"><span class="badge badge-primary" >SibSp</span> has 608 (< 68.2%) zeros</td><td id="section-1-content-block-4-cell-6-2"><span class="badge badge-warning" >Zeros</span></td></tr></table>
+            <td id="section-1-content-block-4-cell-1-1" ><span class="badge badge-primary" >Age</span> has 177 (19.9%) missing values</td><td id="section-1-content-block-4-cell-1-2" ><span class="badge badge-warning" >Missing</span></td></tr><tr>
+            <td id="section-1-content-block-4-cell-2-1" ><span class="badge badge-primary" >Cabin</span> has a high cardinality: 148 distinct values</td><td id="section-1-content-block-4-cell-2-2" ><span class="badge badge-warning" >Warning</span></td></tr><tr>
+            <td id="section-1-content-block-4-cell-3-1" ><span class="badge badge-primary" >Cabin</span> has 687 (77.1%) missing values</td><td id="section-1-content-block-4-cell-3-2" ><span class="badge badge-warning" >Missing</span></td></tr><tr>
+            <td id="section-1-content-block-4-cell-4-1" ><span class="badge badge-primary" >Fare</span> has 15 (< 0.1%) zeros</td><td id="section-1-content-block-4-cell-4-2" ><span class="badge badge-warning" >Zeros</span></td></tr><tr>
+            <td id="section-1-content-block-4-cell-5-1" ><span class="badge badge-primary" >Parch</span> has 678 (< 76.1%) zeros</td><td id="section-1-content-block-4-cell-5-2" ><span class="badge badge-warning" >Zeros</span></td></tr><tr>
+            <td id="section-1-content-block-4-cell-6-1" ><span class="badge badge-primary" >SibSp</span> has 608 (< 68.2%) zeros</td><td id="section-1-content-block-4-cell-6-2" ><span class="badge badge-warning" >Zeros</span></td></tr></table>
 </div>
         
 <div id="section-1-content-block-5" class="col-12" style="margin-top:20px;" >
@@ -161,11 +164,11 @@ <h4 id="section-1-content-block-5-header" >
     </h4>
     <table id="section-1-content-block-5-body" >
         <tr>
-            <td id="section-1-content-block-5-cell-1-1">expect_column_to_exist</td><td id="section-1-content-block-5-cell-1-2">6</td></tr><tr>
-            <td id="section-1-content-block-5-cell-2-1">expect_column_mean_to_be_between</td><td id="section-1-content-block-5-cell-2-2">1</td></tr><tr>
-            <td id="section-1-content-block-5-cell-3-1">expect_column_values_to_be_between</td><td id="section-1-content-block-5-cell-3-2">1</td></tr><tr>
-            <td id="section-1-content-block-5-cell-4-1">expect_column_values_to_match_regex</td><td id="section-1-content-block-5-cell-4-2">1</td></tr><tr>
-            <td id="section-1-content-block-5-cell-5-1">expect_column_values_to_be_in_set</td><td id="section-1-content-block-5-cell-5-2">1</td></tr></table>
+            <td id="section-1-content-block-5-cell-1-1" >expect_column_to_exist</td><td id="section-1-content-block-5-cell-1-2" >6</td></tr><tr>
+            <td id="section-1-content-block-5-cell-2-1" >expect_column_mean_to_be_between</td><td id="section-1-content-block-5-cell-2-2" >1</td></tr><tr>
+            <td id="section-1-content-block-5-cell-3-1" >expect_column_values_to_be_between</td><td id="section-1-content-block-5-cell-3-2" >1</td></tr><tr>
+            <td id="section-1-content-block-5-cell-4-1" >expect_column_values_to_match_regex</td><td id="section-1-content-block-5-cell-4-2" >1</td></tr><tr>
+            <td id="section-1-content-block-5-cell-5-1" >expect_column_values_to_be_in_set</td><td id="section-1-content-block-5-cell-5-2" >1</td></tr></table>
 </div>
         
     </div>
@@ -186,10 +189,10 @@ <h4 id="section-2-content-block-2-header" >
     </h4>
     <table id="section-2-content-block-2-body" >
         <tr>
-            <td id="section-2-content-block-2-cell-1-1">Mean</td><td id="section-2-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-2-content-block-2-cell-2-1">Minimum</td><td id="section-2-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-2-content-block-2-cell-3-1">Maximum</td><td id="section-2-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-2-content-block-2-cell-4-1">Zeros (%)</td><td id="section-2-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-2-content-block-2-cell-1-1" >Mean</td><td id="section-2-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-2-content-block-2-cell-2-1" >Minimum</td><td id="section-2-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-2-content-block-2-cell-3-1" >Maximum</td><td id="section-2-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-2-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-2-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-2-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -221,10 +224,10 @@ <h4 id="section-3-content-block-2-header" >
     </h4>
     <table id="section-3-content-block-2-body" >
         <tr>
-            <td id="section-3-content-block-2-cell-1-1">Mean</td><td id="section-3-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-3-content-block-2-cell-2-1">Minimum</td><td id="section-3-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-3-content-block-2-cell-3-1">Maximum</td><td id="section-3-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-3-content-block-2-cell-4-1">Zeros (%)</td><td id="section-3-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-3-content-block-2-cell-1-1" >Mean</td><td id="section-3-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-3-content-block-2-cell-2-1" >Minimum</td><td id="section-3-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-3-content-block-2-cell-3-1" >Maximum</td><td id="section-3-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-3-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-3-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-3-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -256,10 +259,10 @@ <h4 id="section-4-content-block-2-header" >
     </h4>
     <table id="section-4-content-block-2-body" >
         <tr>
-            <td id="section-4-content-block-2-cell-1-1">Mean</td><td id="section-4-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-4-content-block-2-cell-2-1">Minimum</td><td id="section-4-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-4-content-block-2-cell-3-1">Maximum</td><td id="section-4-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-4-content-block-2-cell-4-1">Zeros (%)</td><td id="section-4-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-4-content-block-2-cell-1-1" >Mean</td><td id="section-4-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-4-content-block-2-cell-2-1" >Minimum</td><td id="section-4-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-4-content-block-2-cell-3-1" >Maximum</td><td id="section-4-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-4-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-4-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-4-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -292,10 +295,10 @@ <h4 id="section-5-content-block-2-header" >
     </h4>
     <table id="section-5-content-block-2-body" >
         <tr>
-            <td id="section-5-content-block-2-cell-1-1">Mean</td><td id="section-5-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-5-content-block-2-cell-2-1">Minimum</td><td id="section-5-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-5-content-block-2-cell-3-1">Maximum</td><td id="section-5-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-5-content-block-2-cell-4-1">Zeros (%)</td><td id="section-5-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-5-content-block-2-cell-1-1" >Mean</td><td id="section-5-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-5-content-block-2-cell-2-1" >Minimum</td><td id="section-5-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-5-content-block-2-cell-3-1" >Maximum</td><td id="section-5-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-5-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-5-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-5-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -326,10 +329,10 @@ <h4 id="section-6-content-block-2-header" >
     </h4>
     <table id="section-6-content-block-2-body" >
         <tr>
-            <td id="section-6-content-block-2-cell-1-1">Mean</td><td id="section-6-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-6-content-block-2-cell-2-1">Minimum</td><td id="section-6-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-6-content-block-2-cell-3-1">Maximum</td><td id="section-6-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-6-content-block-2-cell-4-1">Zeros (%)</td><td id="section-6-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-6-content-block-2-cell-1-1" >Mean</td><td id="section-6-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-6-content-block-2-cell-2-1" >Minimum</td><td id="section-6-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-6-content-block-2-cell-3-1" >Maximum</td><td id="section-6-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-6-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-6-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-6-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -360,10 +363,10 @@ <h4 id="section-7-content-block-2-header" >
     </h4>
     <table id="section-7-content-block-2-body" >
         <tr>
-            <td id="section-7-content-block-2-cell-1-1">Mean</td><td id="section-7-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-7-content-block-2-cell-2-1">Minimum</td><td id="section-7-content-block-2-cell-2-2">1</td></tr><tr>
-            <td id="section-7-content-block-2-cell-3-1">Maximum</td><td id="section-7-content-block-2-cell-3-2">891</td></tr><tr>
-            <td id="section-7-content-block-2-cell-4-1">Zeros (%)</td><td id="section-7-content-block-2-cell-4-2">0.0%</td></tr></table>
+            <td id="section-7-content-block-2-cell-1-1" >Mean</td><td id="section-7-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-7-content-block-2-cell-2-1" >Minimum</td><td id="section-7-content-block-2-cell-2-2" >1</td></tr><tr>
+            <td id="section-7-content-block-2-cell-3-1" >Maximum</td><td id="section-7-content-block-2-cell-3-2" >891</td></tr><tr>
+            <td id="section-7-content-block-2-cell-4-1" >Zeros (%)</td><td id="section-7-content-block-2-cell-4-2" >0.0%</td></tr></table>
 </div>
         
 <div id="section-7-content-block-3" class="col-12" style="margin-top:20px;" >
@@ -384,8 +387,8 @@ <h4 id="section-7-content-block-3-header" data-toggle="collapse" href="#section-
       </div>
     </div>
     <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.15.0/umd/popper.min.js"></script>
+    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
     <script>
       $(function () {
         $('[data-toggle="popover"]').popover()
diff --git a/tests/render/test_default_jinja_view.py b/tests/render/test_default_jinja_view.py
index 200897792742..af0f4729ca8c 100644
--- a/tests/render/test_default_jinja_view.py
+++ b/tests/render/test_default_jinja_view.py
@@ -111,8 +111,8 @@ def test_render_section_page():
     </h4>
     <table id="content-block-2-body" class="table table-sm" >
         <tr>
-            <td id="content-block-2-cell-1-1">Number of variables</td><td id="content-block-2-cell-1-2">12</td></tr><tr>
-            <td id="content-block-2-cell-2-1">Number of observations</td><td id="content-block-2-cell-2-2">891</td></tr></table>
+            <td id="content-block-2-cell-1-1" >Number of variables</td><td id="content-block-2-cell-1-2" >12</td></tr><tr>
+            <td id="content-block-2-cell-2-1" >Number of observations</td><td id="content-block-2-cell-2-2" >891</td></tr></table>
 </div>
         
     </div>
@@ -248,8 +248,8 @@ def test_rendering_components_with_styling():
     </h5>
     <table id="section-1-content-block-2-body" class="body_foo" body="baz" style="body:bar;" >
         <tr>
-            <td id="section-1-content-block-2-cell-1-1">Mean</td><td id="section-1-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-1-content-block-2-cell-2-1">Minimum</td><td id="section-1-content-block-2-cell-2-2">1</td></tr></table>
+            <td id="section-1-content-block-2-cell-1-1" >Mean</td><td id="section-1-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-1-content-block-2-cell-2-1" >Minimum</td><td id="section-1-content-block-2-cell-2-2" >1</td></tr></table>
 </div>"""
 
 
@@ -304,8 +304,8 @@ def test_render_table_component():
     </h4>
     <table id="section-1-content-block-2-body" >
         <tr>
-            <td id="section-1-content-block-2-cell-1-1">Mean</td><td id="section-1-content-block-2-cell-1-2">446</td></tr><tr>
-            <td id="section-1-content-block-2-cell-2-1">Minimum</td><td id="section-1-content-block-2-cell-2-2">1</td></tr></table>
+            <td id="section-1-content-block-2-cell-1-1" >Mean</td><td id="section-1-content-block-2-cell-1-2" >446</td></tr><tr>
+            <td id="section-1-content-block-2-cell-2-1" >Minimum</td><td id="section-1-content-block-2-cell-2-2" >1</td></tr></table>
 </div>"""
 
 # TODO: Add tests for the remaining component types