Merge pull request #1072 from great-expectations/aylr/walkthrough-rev…

…ision walkthrough revision
great-expectations · Feb 13, 2020 · 5e18475 · 5e18475
2 parents ae651a0 + 9d8f4b2
commit 5e18475
Show file tree

Hide file tree

Showing 46 changed files with 74 additions and 168 deletions.
diff --git a/great_expectations/render/view/static/images/0_values_not_null_html_en.jpg b/great_expectations/render/view/static/images/0_values_not_null_html_en.jpg
diff --git a/great_expectations/render/view/static/images/10_suite_toc.jpeg b/great_expectations/render/view/static/images/10_suite_toc.jpeg
diff --git a/...t_expectations/render/view/static/images/11_home_validation_results_failed.jpeg b/...t_expectations/render/view/static/images/11_home_validation_results_failed.jpeg
diff --git a/great_expectations/render/view/static/images/12_validation_overview.png b/great_expectations/render/view/static/images/12_validation_overview.png
diff --git a/great_expectations/render/view/static/images/13_validation_passed.jpeg b/great_expectations/render/view/static/images/13_validation_passed.jpeg
diff --git a/great_expectations/render/view/static/images/14_validation_failed.jpeg b/great_expectations/render/view/static/images/14_validation_failed.jpeg
diff --git a/...ectations/render/view/static/images/15_validation_failed_unexpected_values.jpeg b/...ectations/render/view/static/images/15_validation_failed_unexpected_values.jpeg
diff --git a/...ations/render/view/static/images/16_validation_failed_unexpected_values (1).gif b/...ations/render/view/static/images/16_validation_failed_unexpected_values (1).gif
diff --git a/great_expectations/render/view/static/images/1_values_not_null_html_de.jpg b/great_expectations/render/view/static/images/1_values_not_null_html_de.jpg
diff --git a/great_expectations/render/view/static/images/2_values_not_null_json.jpg b/great_expectations/render/view/static/images/2_values_not_null_json.jpg
diff --git a/...ctations/render/view/static/images/3_values_not_null_validation_result_json.jpg b/...ctations/render/view/static/images/3_values_not_null_validation_result_json.jpg
diff --git a/...tions/render/view/static/images/4_values_not_null_validation_result_html_en.jpg b/...tions/render/view/static/images/4_values_not_null_validation_result_html_en.jpg
diff --git a/great_expectations/render/view/static/images/5_home.png b/great_expectations/render/view/static/images/5_home.png
diff --git a/great_expectations/render/view/static/images/6_home_tables.jpeg b/great_expectations/render/view/static/images/6_home_tables.jpeg
diff --git a/great_expectations/render/view/static/images/7_home_suites.jpeg b/great_expectations/render/view/static/images/7_home_suites.jpeg
diff --git a/...expectations/render/view/static/images/8_home_validation_results_succeeded.jpeg b/...expectations/render/view/static/images/8_home_validation_results_succeeded.jpeg
diff --git a/great_expectations/render/view/static/images/9_suite_overview.png b/great_expectations/render/view/static/images/9_suite_overview.png
diff --git a/..._expectations/render/view/static/images/validation_failed_unexpected_values.gif b/..._expectations/render/view/static/images/validation_failed_unexpected_values.gif
diff --git a/great_expectations/render/view/static/images/values_not_null_html_en.jpg b/great_expectations/render/view/static/images/values_not_null_html_en.jpg
diff --git a/great_expectations/render/view/static/images/values_not_null_json.jpg b/great_expectations/render/view/static/images/values_not_null_json.jpg
diff --git a/...tations/render/view/static/images/values_not_null_validation_result_html_en.jpg b/...tations/render/view/static/images/values_not_null_validation_result_html_en.jpg
diff --git a/...pectations/render/view/static/images/values_not_null_validation_result_json.jpg b/...pectations/render/view/static/images/values_not_null_validation_result_json.jpg
diff --git a/great_expectations/render/view/templates/carousel_modal.j2 b/great_expectations/render/view/templates/carousel_modal.j2
@@ -10,28 +10,44 @@
   {% set static_images_dir = "./static/images/" -%}
 {% endif %}
 <style type="text/css">
-div.walkthrough-card img {
-   padding: 0 40px;
+div.card-footer .container {
+    padding-top: 0;
+}
+div.walkthrough-card {
+    height: 100%;
  }
+div.modal-body {
+    height: 700px
+}
+div.image-sizer {
+    max-height: 400px;
+    width: 100%;
+    padding: 0 40px;
+    overflow: hidden;
+    margin-bottom: 1em;
+}
+.code-snippet {
+    margin: 0 40px 1em 40px;
+}
 </style>
 
 <div class="modal fade ge-walkthrough-modal" tabindex="-1" role="dialog" aria-labelledby="ge-walkthrough-modal-title"
      aria-hidden="true">
   <div class="modal-dialog modal-dialog-centered modal-lg">
     <div class="modal-content">
       <div class="modal-header">
-        <h5 class="modal-title" id="ge-walkthrough-modal-title">Great Expectations Walkthrough</h5>
+        <h6 class="modal-title" id="ge-walkthrough-modal-title">Great Expectations Walkthrough</h6>
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
       <div class="modal-body">
         <div class="card walkthrough-card bg-dark text-white walkthrough-1">
-        <div class="card-header">How to work with Great Expectations</div>
-        <img src="{{ static_images_dir + "iterative-dev-loop.png" }}" class="card-img-top" alt="...">
-
+        <div class="card-header"><h3>How to work with Great Expectations</h3></div>
             <div class="card-body">
-{#                  <h5 class="card-title">How to work with Great Expectations</h5>#}
+              <div class="image-sizer">
+                  <img src="{{ static_images_dir + "iterative-dev-loop.png" }}" class="img-fluid rounded-sm">
+              </div>
                   <p>Welcome! The best way to work with Great Expectations is in this iterative dev loop.</p>
             </div>
             <div class="card-footer walkthrough-links">
@@ -56,11 +72,19 @@ div.walkthrough-card img {
 
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-2">
-                <div class="card-header">What are Expectations?</div>
-                <img src="{{ static_images_dir + "values_not_null_html_en.jpg" }}" class="card-img-top" alt="...">
-                <!--<img src="../static/images/values_not_null_html_en.jpg" }}" class="card-img-top" alt="...">-->
+                <div class="card-header"><h3>What are Expectations?</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">What are Expectations?</h5>#}
+                    <pre class="code-snippet bg-light rounded-sm"><code>
+        expect_column_to_exist
+        expect_table_row_count_to_be_between
+        expect_column_values_to_be_unique
+        expect_column_values_to_not_be_null
+        expect_column_values_to_be_between
+        expect_column_values_to_match_regex
+        expect_column_mean_to_be_between
+        expect_column_kl_divergence_to_be_less_than
+        ... and many more
+                    </code></pre>
                   <p>An expectation is a falsifiable, verifiable statement about data.</p>
                   <p>Expectations provide a language to talk about data characteristics and data quality - humans to humans, humans to machines and machines to machines.</p>
                   <p>Expectations are both data tests and docs!</p>
@@ -87,11 +111,16 @@ div.walkthrough-card img {
 
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-3">
-                <div class="card-header">An expectation can be presented in a machine-friendly JSON</div>
-                <img src="{{ static_images_dir + "values_not_null_json.jpg" }}" class="card-img-top" alt="...">
-                <!--<img src="../static/images/values_not_null_json.jpg" }}" class="card-img-top" alt="...">-->
+                <div class="card-header"><h3>An expectation can be presented in a machine-friendly JSON</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">An expectation can be presented in a machine-friendly JSON</h5>#}
+                    <pre class="code-snippet bg-light rounded-sm"><code>
+    {
+      "expectation_type": "expect_column_values_to_not_be_null",
+      "kwargs": {
+        "column": "user_id"
+      }
+    }
+                    </code></pre>
                   <p>A machine can test if a dataset conforms to the expectation.</p>
                 </div>
                 <div class="card-footer walkthrough-links">
@@ -115,12 +144,24 @@ div.walkthrough-card img {
                 </div>
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-4">
-                <div class="card-header">Validation produces a validation result object</div>
-                <img src="{{ static_images_dir + "values_not_null_validation_result_json.jpg" }}" class="card-img-top" alt="...">
-                <!--<img src="../static/images/values_not_null_validation_result_json.jpg" }}" class="card-img-top" alt="...">-->
+                <div class="card-header"><h3>Validation produces a validation result object</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">Validation produces a validation result object</h5>#}
-                  <p>Here's an example JSON (not from your data). This object has rich context about the test failure.</p>
+                     <pre class="code-snippet bg-light rounded-sm"><code>
+    {
+      "success": false,
+      "result": {
+        "element_count": 253405,
+        "unexpected_count": 7602,
+        "unexpected_percent": 2.999
+      },
+      "expectation_config": {
+        "expectation_type": "expect_column_values_to_not_be_null",
+        "kwargs": {
+          "column": "user_id"
+        }
+    }
+                    </code></pre>
+                  <p>Here's an example Validation Result (not from your data) in JSON format. This object has rich context about the test failure.</p>
                 </div>
                 <div class="card-footer walkthrough-links">
                   <div class="container">
@@ -143,11 +184,11 @@ div.walkthrough-card img {
                 </div>
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-5">
-                <div class="card-header">Validation results save you time.</div>
-                <img src="{{ static_images_dir + "validation_failed_unexpected_values.gif" }}" class="card-img-top" alt="...">
-                <!--<img src="../static/images/validation_failed_unexpected_values.gif" }}" class="card-img-top" alt="...">-->
+                <div class="card-header"><h3>Validation results save you time.</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">Validation results save you time.</h5>#}
+                  <div class="image-sizer">
+                      <img src="{{ static_images_dir + "validation_failed_unexpected_values.gif" }}" class="img-fluid rounded-sm">
+                  </div>
                   <p>This is an example of what a single failed Expectation looks like in Data Docs. Note the failure includes unexpected values from your data. This helps you debug pipeines faster.</p>
                 </div>
                 <div class="card-footer walkthrough-links">
@@ -171,11 +212,12 @@ div.walkthrough-card img {
                 </div>
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-6">
-                <div class="card-header">Great Expectations provides a large library of expectations.</div>
-                <img src="{{ static_images_dir + "glossary_scroller.gif" }}" class="card-img-top" alt="...">
+                <div class="card-header"><h3>Great Expectations provides a large library of expectations.</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">Great Expectations provides a large library of expectations.</h5>#}
-                  <p><a href="http://docs.greatexpectations.io/en/latest/reference/expectation_glossary.html">Built in expectations</a> allow you to express how you understand your data, and you can add custom
+                  <div class="image-sizer">
+                      <img src="{{ static_images_dir + "glossary_scroller.gif" }}" class="img-fluid rounded-sm">
+                  </div>
+                  <p><a href="http://docs.greatexpectations.io/en/latest/reference/expectation_glossary.html">Nearly 50 built in expectations</a> allow you to express how you understand your data, and you can add custom
                   expectations if you need a new one.
                   </p>
                 </div>
@@ -200,11 +242,10 @@ div.walkthrough-card img {
                 </div>
 
                 <div class="card walkthrough-card bg-dark text-white walkthrough-7">
-                <div class="card-header">Now explore and edit the sample suite!</div>
+                <div class="card-header"><h3>Now explore and edit the sample suite!</h3></div>
                 <div class="card-body">
-{#                  <h5 class="card-title">Now explore the sample suite!</h5>#}
                   <p>This sample suite shows you a few examples of expectations.</p>
-                  <p>Note this is not a production suite and was autogenerated using only a small snippet of your data.</p>
+                  <p>Note this is <strong>not a production suite</strong> and was generated using only a small sample of your data.</p>
                   <p>When you are ready, press the <strong>How to Edit</strong> button to kick off the iterative dev loop.</p>
                 </div>
                 <div class="card-footer walkthrough-links">
@@ -220,7 +261,7 @@ div.walkthrough-card img {
                         </div>
                       </div>
                       <div class="col-sm">
-                        <button type="button" class="btn btn-primary" data-dismiss="modal" aria-label="Close">
+                        <button type="button" class="btn btn-primary float-right" data-dismiss="modal" aria-label="Close">
                           <span aria-hidden="true">Done</span>
                         </button>
                       </div>

diff --git a/great_expectations/render/view/templates/edit_expectations_instructions_modal.j2 b/great_expectations/render/view/templates/edit_expectations_instructions_modal.j2
@@ -30,7 +30,7 @@ $(function() {
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-      <div class="modal-body">
+      <div class="modal-body" style="height: 350px">
         <p>Expectations are best <strong>edited interactively in Jupyter notebooks</strong>.</p>
         <p>To automatically generate a notebook that does this run:</p>
         <div class="input-group mb-3">

diff --git a/scratch/data-docs-walkthrough.md b/scratch/data-docs-walkthrough.md
diff --git a/scratch/data-docs-walkthrough/home.png b/scratch/data-docs-walkthrough/home.png
diff --git a/scratch/data-docs-walkthrough/home_suites.jpeg b/scratch/data-docs-walkthrough/home_suites.jpeg
diff --git a/scratch/data-docs-walkthrough/home_tables.jpeg b/scratch/data-docs-walkthrough/home_tables.jpeg
diff --git a/scratch/data-docs-walkthrough/home_validation_results_failed.jpeg b/scratch/data-docs-walkthrough/home_validation_results_failed.jpeg
diff --git a/scratch/data-docs-walkthrough/home_validation_results_succeeded.jpeg b/scratch/data-docs-walkthrough/home_validation_results_succeeded.jpeg
diff --git a/scratch/data-docs-walkthrough/suite_overview.png b/scratch/data-docs-walkthrough/suite_overview.png
diff --git a/scratch/data-docs-walkthrough/suite_toc.jpeg b/scratch/data-docs-walkthrough/suite_toc.jpeg
diff --git a/scratch/data-docs-walkthrough/validation_failed.jpeg b/scratch/data-docs-walkthrough/validation_failed.jpeg
diff --git a/scratch/data-docs-walkthrough/validation_failed_unexpected_values.gif b/scratch/data-docs-walkthrough/validation_failed_unexpected_values.gif
diff --git a/scratch/data-docs-walkthrough/validation_failed_unexpected_values.jpeg b/scratch/data-docs-walkthrough/validation_failed_unexpected_values.jpeg
diff --git a/scratch/data-docs-walkthrough/validation_overview.png b/scratch/data-docs-walkthrough/validation_overview.png
diff --git a/scratch/data-docs-walkthrough/validation_passed.jpeg b/scratch/data-docs-walkthrough/validation_passed.jpeg
diff --git a/scratch/data-docs-walkthrough/validation_unexpected_values.mov b/scratch/data-docs-walkthrough/validation_unexpected_values.mov
diff --git a/scratch/data-docs-walkthrough/values_not_null_html_de.jpg b/scratch/data-docs-walkthrough/values_not_null_html_de.jpg
diff --git a/scratch/data-docs-walkthrough/values_not_null_html_en.jpg b/scratch/data-docs-walkthrough/values_not_null_html_en.jpg
diff --git a/scratch/data-docs-walkthrough/values_not_null_json.jpg b/scratch/data-docs-walkthrough/values_not_null_json.jpg
diff --git a/scratch/data-docs-walkthrough/values_not_null_validation_result_html_en.jpg b/scratch/data-docs-walkthrough/values_not_null_validation_result_html_en.jpg
diff --git a/scratch/data-docs-walkthrough/values_not_null_validation_result_json.jpg b/scratch/data-docs-walkthrough/values_not_null_validation_result_json.jpg
diff --git a/tests/cli/test_init_pandas.py b/tests/cli/test_init_pandas.py
@@ -107,35 +107,13 @@ def test_cli_init_on_new_project(caplog, tmp_path_factory):
                             HKGrotesk-SemiBold.otf
                             HKGrotesk-SemiBoldItalic.otf
                     images/
-                        0_values_not_null_html_en.jpg
-                        10_suite_toc.jpeg
-                        11_home_validation_results_failed.jpeg
-                        12_validation_overview.png
-                        13_validation_passed.jpeg
-                        14_validation_failed.jpeg
-                        15_validation_failed_unexpected_values.jpeg
-                        16_validation_failed_unexpected_values (1).gif
-                        1_values_not_null_html_de.jpg
-                        2_values_not_null_json.jpg
-                        3_values_not_null_validation_result_json.jpg
-                        4_values_not_null_validation_result_html_en.jpg
-                        5_home.png
-                        6_home_tables.jpeg
-                        7_home_suites.jpeg
-                        8_home_validation_results_succeeded.jpeg
-                        9_suite_overview.png
                         favicon.ico
                         glossary_scroller.gif
                         iterative-dev-loop.png
                         logo-long-vector.svg
                         logo-long.png
                         short-logo-vector.svg
                         short-logo.png
-                        validation_failed_unexpected_values.gif
-                        values_not_null_html_en.jpg
-                        values_not_null_json.jpg
-                        values_not_null_validation_result_html_en.jpg
-                        values_not_null_validation_result_json.jpg
                     styles/
                         data_docs_custom_styles_template.css
                         data_docs_default_styles.css

diff --git a/tests/cli/test_init_sqlite.py b/tests/cli/test_init_sqlite.py
@@ -141,35 +141,13 @@ def test_cli_init_on_new_project(caplog, tmp_path_factory, titanic_sqlite_db_fil
                             HKGrotesk-SemiBold.otf
                             HKGrotesk-SemiBoldItalic.otf
                     images/
-                        0_values_not_null_html_en.jpg
-                        10_suite_toc.jpeg
-                        11_home_validation_results_failed.jpeg
-                        12_validation_overview.png
-                        13_validation_passed.jpeg
-                        14_validation_failed.jpeg
-                        15_validation_failed_unexpected_values.jpeg
-                        16_validation_failed_unexpected_values (1).gif
-                        1_values_not_null_html_de.jpg
-                        2_values_not_null_json.jpg
-                        3_values_not_null_validation_result_json.jpg
-                        4_values_not_null_validation_result_html_en.jpg
-                        5_home.png
-                        6_home_tables.jpeg
-                        7_home_suites.jpeg
-                        8_home_validation_results_succeeded.jpeg
-                        9_suite_overview.png
                         favicon.ico
                         glossary_scroller.gif
                         iterative-dev-loop.png
                         logo-long-vector.svg
                         logo-long.png
                         short-logo-vector.svg
                         short-logo.png
-                        validation_failed_unexpected_values.gif
-                        values_not_null_html_en.jpg
-                        values_not_null_json.jpg
-                        values_not_null_validation_result_html_en.jpg
-                        values_not_null_validation_result_json.jpg
                     styles/
                         data_docs_custom_styles_template.css
                         data_docs_default_styles.css

diff --git a/tests/data_context/test_data_context.py b/tests/data_context/test_data_context.py
@@ -393,35 +393,13 @@ def test_render_full_static_site_from_empty_project(tmp_path_factory, filesystem
                     HKGrotesk-SemiBold.otf
                     HKGrotesk-SemiBoldItalic.otf
             images/
-                0_values_not_null_html_en.jpg
-                10_suite_toc.jpeg
-                11_home_validation_results_failed.jpeg
-                12_validation_overview.png
-                13_validation_passed.jpeg
-                14_validation_failed.jpeg
-                15_validation_failed_unexpected_values.jpeg
-                16_validation_failed_unexpected_values (1).gif
-                1_values_not_null_html_de.jpg
-                2_values_not_null_json.jpg
-                3_values_not_null_validation_result_json.jpg
-                4_values_not_null_validation_result_html_en.jpg
-                5_home.png
-                6_home_tables.jpeg
-                7_home_suites.jpeg
-                8_home_validation_results_succeeded.jpeg
-                9_suite_overview.png
                 favicon.ico
                 glossary_scroller.gif
                 iterative-dev-loop.png
                 logo-long-vector.svg
                 logo-long.png
                 short-logo-vector.svg
                 short-logo.png
-                validation_failed_unexpected_values.gif
-                values_not_null_html_en.jpg
-                values_not_null_json.jpg
-                values_not_null_validation_result_html_en.jpg
-                values_not_null_validation_result_json.jpg
             styles/
                 data_docs_custom_styles_template.css
                 data_docs_default_styles.css