Merge branch 'main' of https://github.com/mckinsey/vizro into refacto…

…r/optimise_app_rendering_time
mckinsey · Sep 25, 2023 · bbca92a · bbca92a
2 parents 34c9d8f + db052c6
commit bbca92a
Show file tree

Hide file tree

Showing 60 changed files with 299 additions and 91 deletions.
diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
@@ -3,6 +3,9 @@
 
 blank_issues_enabled: false
 contact_links:
-  - name: "(maintainers only) Blank issue"
+  - name: "Blank issue (maintainers only)"
     url: https://github.com/mckinsey/vizro/issues/new
     about: For maintainers only.
+  - name: Documentation
+    url: https://vizro.readthedocs.io
+    about: To learn more about how Vizro works
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -8,10 +8,19 @@
 - [ ] I have not added data or restricted code in any commits, directly or indirectly
 - [ ] I have updated the docstring of any public function/class/model changed
 - [ ] I have added the PR number to the change description in the changelog fragment, e.g. `Enable feature XXX ([#1](https://github.com/mckinsey/vizro/pull/1))` (if applicable)
+- [ ] I have added tests to cover my changes (if applicable)
 
 ## Types of changes
 
 - [ ] Docs/refactoring (non-breaking change which improves codebase)
 - [ ] Bug fix (non-breaking change which fixes an issue)
 - [ ] New feature (non-breaking change which adds functionality)
 - [ ] Breaking change (fix or feature that would cause existing functionality to change)
+
+## Notice
+
+- [ ] I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":
+
+  - I submit this contribution under the [Apache 2.0 license](https://www.apache.org/licenses/LICENSE-2.0.txt) and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
+  - I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorised to submit this contribution on behalf of the original creator(s) or their licensees.
+  - I certify that the use of this contribution as authorised by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
diff --git a/SECURITY.md b/SECURITY.md
@@ -12,7 +12,9 @@ The latest version of Vizro is supported. We encourage you to update your Vizro
 
 **Please do not report security vulnerabilities through public GitHub issues to limit the potential impact on current users.**
 
-If you think you found a vulnerability, and even if you are not sure about it, please report it right away by sending an email to: vizro@mckinsey.com
+If you think you found a vulnerability, and even if you are not sure about it, please report it right away by sending an email to: vizro-security@mckinsey.com
+
+Note that this mail address is only monitored for security reports.
 
 Please try to be as explicit as possible to help us better understand the nature and scope of the possible issue by providing:
 

diff --git a/...e/changelog.d/20230920_155943_nadija_ratkusic_graca_accordion_arrow_demo_fix.md b/...e/changelog.d/20230920_155943_nadija_ratkusic_graca_accordion_arrow_demo_fix.md
@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+
+### Fixed
+
+- Fixed issue of accordion arrow not loading on deployed demo version ([#44](https://github.com/mckinsey/vizro/pull/44))
+
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->
diff --git a/...o-core/changelog.d/20230921_133956_nadija_ratkusic_graca_replace_screenshots.md b/...o-core/changelog.d/20230921_133956_nadija_ratkusic_graca_replace_screenshots.md
@@ -0,0 +1,41 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+-->
+
+### Changed
+
+- Replaced all screenshots in the docs to reflect new navigation designs ([#48](https://github.com/mckinsey/vizro/pull/48))
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category.
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->
diff --git a/vizro-core/changelog.d/20230922_152625_huong_li_nguyen_replace_mail.md b/vizro-core/changelog.d/20230922_152625_huong_li_nguyen_replace_mail.md
@@ -0,0 +1,42 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Removed
+
+- A bullet item for the Removed category.
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category.
+
+-->
+<!--
+### Changed
+
+- A bullet item for the Changed category.
+
+-->
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category.
+
+-->
+<!--
+### Fixed
+
+- A bullet item for the Fixed category.
+
+-->
+<!--
+### Security
+
+- A bullet item for the Security category.
+
+-->
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard1.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard1.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard2.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard2.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard21.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard21.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard22.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard22.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard23.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard23.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard24.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard24.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard3.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard3.png
diff --git a/vizro-core/docs/assets/tutorials/dashboard/dashboard4.png b/vizro-core/docs/assets/tutorials/dashboard/dashboard4.png
diff --git a/vizro-core/docs/assets/user_guides/actions/actions1.png b/vizro-core/docs/assets/user_guides/actions/actions1.png
diff --git a/vizro-core/docs/assets/user_guides/actions/actions2.png b/vizro-core/docs/assets/user_guides/actions/actions2.png
diff --git a/vizro-core/docs/assets/user_guides/actions/actions_chaining.png b/vizro-core/docs/assets/user_guides/actions/actions_chaining.png
diff --git a/vizro-core/docs/assets/user_guides/actions/actions_export.png b/vizro-core/docs/assets/user_guides/actions/actions_export.png
diff --git a/vizro-core/docs/assets/user_guides/actions/actions_filter_interaction.png b/vizro-core/docs/assets/user_guides/actions/actions_filter_interaction.png
diff --git a/vizro-core/docs/assets/user_guides/components/button.png b/vizro-core/docs/assets/user_guides/components/button.png
diff --git a/vizro-core/docs/assets/user_guides/components/card.png b/vizro-core/docs/assets/user_guides/components/card.png
diff --git a/vizro-core/docs/assets/user_guides/components/card_image_default.png b/vizro-core/docs/assets/user_guides/components/card_image_default.png
diff --git a/vizro-core/docs/assets/user_guides/components/card_image_floating.png b/vizro-core/docs/assets/user_guides/components/card_image_floating.png
diff --git a/vizro-core/docs/assets/user_guides/components/card_image_styled.png b/vizro-core/docs/assets/user_guides/components/card_image_styled.png
diff --git a/vizro-core/docs/assets/user_guides/components/card_text.png b/vizro-core/docs/assets/user_guides/components/card_text.png
diff --git a/vizro-core/docs/assets/user_guides/components/graph1.png b/vizro-core/docs/assets/user_guides/components/graph1.png
diff --git a/vizro-core/docs/assets/user_guides/components/nav_card.png b/vizro-core/docs/assets/user_guides/components/nav_card.png
diff --git a/vizro-core/docs/assets/user_guides/components/nav_card_icon.png b/vizro-core/docs/assets/user_guides/components/nav_card_icon.png
diff --git a/vizro-core/docs/assets/user_guides/control/control1.png b/vizro-core/docs/assets/user_guides/control/control1.png
diff --git a/vizro-core/docs/assets/user_guides/control/control2.png b/vizro-core/docs/assets/user_guides/control/control2.png
diff --git a/vizro-core/docs/assets/user_guides/control/control3.png b/vizro-core/docs/assets/user_guides/control/control3.png
diff --git a/vizro-core/docs/assets/user_guides/control/control4.png b/vizro-core/docs/assets/user_guides/control/control4.png
diff --git a/vizro-core/docs/assets/user_guides/control/control5.png b/vizro-core/docs/assets/user_guides/control/control5.png
diff --git a/vizro-core/docs/assets/user_guides/custom_charts/custom_chart_enhanced_scatter.png b/vizro-core/docs/assets/user_guides/custom_charts/custom_chart_enhanced_scatter.png
diff --git a/vizro-core/docs/assets/user_guides/custom_charts/custom_chart_waterfall.png b/vizro-core/docs/assets/user_guides/custom_charts/custom_chart_waterfall.png
diff --git a/vizro-core/docs/assets/user_guides/custom_components/customcomponent_1.png b/vizro-core/docs/assets/user_guides/custom_components/customcomponent_1.png
diff --git a/vizro-core/docs/assets/user_guides/custom_components/customcomponent_2.png b/vizro-core/docs/assets/user_guides/custom_components/customcomponent_2.png
diff --git a/vizro-core/docs/assets/user_guides/dashboard/dashboard.png b/vizro-core/docs/assets/user_guides/dashboard/dashboard.png
diff --git a/vizro-core/docs/assets/user_guides/data/data_pandas_dataframe.png b/vizro-core/docs/assets/user_guides/data/data_pandas_dataframe.png
diff --git a/vizro-core/docs/assets/user_guides/data/data_selected_from_source.png b/vizro-core/docs/assets/user_guides/data/data_selected_from_source.png
diff --git a/vizro-core/docs/assets/user_guides/layout/grid_scroll.png b/vizro-core/docs/assets/user_guides/layout/grid_scroll.png
diff --git a/vizro-core/docs/assets/user_guides/layout/layout_empty_spaces.png b/vizro-core/docs/assets/user_guides/layout/layout_empty_spaces.png
diff --git a/vizro-core/docs/assets/user_guides/navigation/default_navigation.png b/vizro-core/docs/assets/user_guides/navigation/default_navigation.png
diff --git a/vizro-core/docs/assets/user_guides/pages/page_containers.png b/vizro-core/docs/assets/user_guides/pages/page_containers.png
diff --git a/vizro-core/docs/assets/user_guides/pages/page_sunburst.png b/vizro-core/docs/assets/user_guides/pages/page_sunburst.png
diff --git a/vizro-core/docs/assets/user_guides/themes/dark.png b/vizro-core/docs/assets/user_guides/themes/dark.png
diff --git a/vizro-core/docs/assets/user_guides/themes/light.png b/vizro-core/docs/assets/user_guides/themes/light.png
diff --git a/vizro-core/docs/pages/user_guides/actions.md b/vizro-core/docs/pages/user_guides/actions.md
@@ -161,6 +161,7 @@ Graph(figure=px.scatter(..., custom_data=["continent"]))
                             ),
                         ),
                     ],
+                    controls=[vm.Filter(column='continent')]
                 ),
             ]
         )
@@ -198,6 +199,9 @@ Graph(figure=px.scatter(..., custom_data=["continent"]))
                 x: gdpPercap
                 y: lifeExp
                 size: pop
+              controls:
+                - column: continent
+                  type: filter
             title: Filter interaction
         ```
     === "Result"

diff --git a/vizro-core/docs/pages/user_guides/components.md b/vizro-core/docs/pages/user_guides/components.md
@@ -38,6 +38,7 @@ currently available charts of the open source library [`plotly.express`](https:/
                     ),
                 ),
             ],
+            controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
         )
 
         dashboard = vm.Dashboard(pages=[page])
@@ -57,6 +58,12 @@ currently available charts of the open source library [`plotly.express`](https:/
               dimensions: ["sepal_length", "sepal_width", "petal_length", "petal_width"]
             id: my_chart
             type: graph
+          controls:
+            - column: continent
+              type: filter
+            - selector:
+                title: Species
+                type: dropdown
           title: My first page
         ```
     === "Result"
@@ -654,9 +661,9 @@ If you use the image URL hash `icon-top`, the image will be styled according to
           title: Filters and parameters
         ```
     === "Result"
-           [![NavCard]][NavCard]
+           [![NavCardIcon]][NavCardIcon]
 
-       [NavCard]: ../../assets/user_guides/components/nav_card_icon.png
+       [NavCardIcon]: ../../assets/user_guides/components/nav_card_icon.png
 
 Note that in the above example the first [`Card`][vizro.models.Card] navigates to an existing [`Page`][vizro.models.Page]
 in the app with `path = filters-and-parameters` and the second one to an external link.
@@ -706,9 +713,7 @@ In the below example we show how to configure a button to export the filtered da
                     actions=[vm.Action(function=export_data(targets=["scatter_chart"]))],
                 ),
             ],
-            controls=[
-                vm.Filter(column="species")
-            ],
+            controls=[vm.Filter(column="species", selector=vm.Dropdown(title="Species"))],
         )
 
         dashboard = vm.Dashboard(pages=[page])
@@ -741,6 +746,7 @@ In the below example we show how to configure a button to export the filtered da
             controls:
               - column: species
                 selector:
+                  title: Species
                   type: dropdown
                 type: filter
             layout:
@@ -753,6 +759,6 @@ In the below example we show how to configure a button to export the filtered da
             title: My first page
         ```
     === "Result"
-        [![Card]][Card]
+        [![Button]][Button]
 
-    [Card]: ../../assets/user_guides/components/button.png
+    [Button]: ../../assets/user_guides/components/button.png
diff --git a/vizro-core/docs/pages/user_guides/custom_components.md b/vizro-core/docs/pages/user_guides/custom_components.md
@@ -224,9 +224,9 @@ vm.Parameter.add_type("selector", TooltipNonCrossRangeSlider)
         # TBD
         ```
     === "Result"
-        [![Graph]][Graph]
+        [![CustomComponent1]][CustomComponent1]
 
-    [Graph]: ../../assets/user_guides/custom_components/customcomponent_1.png
+    [CustomComponent1]: ../../assets/user_guides/custom_components/customcomponent_1.png
 
 
 ## Entirely new component
@@ -346,6 +346,6 @@ vm.Page.add_new_type("components", Jumbotron)
         # TBD
         ```
     === "Result"
-        [![Graph]][Graph]
+        [![CustomComponent2]][CustomComponent2]
 
-    [Graph]: ../../assets/user_guides/custom_components/customcomponent_2.png
+    [CustomComponent2]: ../../assets/user_guides/custom_components/customcomponent_2.png
diff --git a/vizro-core/docs/pages/user_guides/data.md b/vizro-core/docs/pages/user_guides/data.md
@@ -77,6 +77,7 @@ Vizro, you need:
             components=[
                 vm.Graph(id="scatter_chart", figure=px.scatter("iris", x="sepal_length", y="petal_width", color="species")),
             ],
+            controls=[vm.Filter(column="species")],
         )
 
         dashboard = vm.Dashboard(pages=[page])
@@ -96,6 +97,9 @@ Vizro, you need:
                 color: species
               id: scatter_chart
               type: graph
+            controls:
+              - column: species
+                type: filter
             title: My first page
         ```
     === "Result"
@@ -140,6 +144,7 @@ that accepts different SQL queries as arguments.
             components=[
                 vm.Graph(id="scatter_chart", figure=px.scatter("species_setosa", x="sepal_length", y="petal_width", color="species")),
             ],
+            controls=[vm.Filter(column="species")],
         )
 
         dashboard = vm.Dashboard(pages=[page])
@@ -169,6 +174,7 @@ that accepts different SQL queries as arguments.
             components=[
                 vm.Graph(id="scatter_chart", figure=px.scatter("species_setosa", x="sepal_length", y="petal_width", color="species")),
             ],
+            controls=[vm.Filter(column="species")],
         )
 
         dashboard = vm.Dashboard(pages=[page])

diff --git a/vizro-core/docs/pages/user_guides/navigation.md b/vizro-core/docs/pages/user_guides/navigation.md
@@ -18,13 +18,19 @@ By default, a navigation panel with an accordion item per page and a default tit
         iris = px.data.iris()
 
         page_1 = vm.Page(
-            title="My first page",
-            components=[
-                vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
-            ],
-        )
+                    title="My first page",
+                    components=[
+                        vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
+                    ],
+                )
+        page_2 = vm.Page(
+                    title="My second page",
+                    components=[
+                        vm.Graph(id="line_chart", figure=px.line(iris, x="sepal_length", y="petal_width", color="species")),
+                    ],
+                )
 
-        dashboard = vm.Dashboard(pages=[page_1])
+        dashboard = vm.Dashboard(pages=[page_1, page_2])
 
         Vizro().build(dashboard).run()
         ```
@@ -44,11 +50,20 @@ By default, a navigation panel with an accordion item per page and a default tit
                 type: graph
             title: My first page
         - components:
+             - figure:
+                  _target_: line
+                  data_frame: iris
+                  x: sepal_length
+                  y: petal_width
+                  color: species
+                id: line_chart
+                type: graph
+            title: My second page
         ```
     === "Result"
-        [![Dashboard]][Dashboard]
+        [![DefaultNavigation]][DefaultNavigation]
 
-    [Dashboard]: ../../assets/user_guides/navigation/default_navigation.png
+    [DefaultNavigation]: ../../assets/user_guides/navigation/default_navigation.png
 
 ## Customizing your navigation panel
 
@@ -83,10 +98,10 @@ If you want to deviate from the default title `SELECT PAGE` and instead provide
         iris = px.data.iris()
 
         page_1 = vm.Page(
-            title="My first page",
-            components=[
-                vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
-            ],
+                    title="My first page",
+                    components=[
+                        vm.Graph(id="scatter_chart", figure=px.scatter(iris, x="sepal_length", y="petal_width", color="species")),
+                    ],
         )
         page_2 = vm.Page(
                     title="My second page",
@@ -136,6 +151,6 @@ If you want to deviate from the default title `SELECT PAGE` and instead provide
                 - My second page
         ```
     === "Result"
-        [![Dashboard]][Dashboard]
+        [![CustomNavigation]][CustomNavigation]
 
-    [Dashboard]: ../../assets/user_guides/navigation/custom_navigation.png
+    [CustomNavigation]: ../../assets/user_guides/navigation/custom_navigation.png