From bab186f740fdb9a4c28482f8c3a5dd5397001bba Mon Sep 17 00:00:00 2001 From: Lingyi Zhang Date: Tue, 3 Oct 2023 05:12:13 -0400 Subject: [PATCH 1/3] [Snyk] Security upgrade pydantic from 1.10.13 to 2.4.0 (#83) Co-authored-by: snyk-bot Co-authored-by: huong-li-nguyen --- .pre-commit-config.yaml | 2 +- ...yk_fix_45c953e9ecaac62cbefac81184742ed1.md | 40 +++++++++++++++++++ vizro-core/pyproject.toml | 2 +- vizro-core/snyk/requirements.txt | 2 +- 4 files changed, 43 insertions(+), 3 deletions(-) create mode 100644 vizro-core/changelog.d/20231002_182747_huong_li_nguyen_snyk_fix_45c953e9ecaac62cbefac81184742ed1.md diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml index 29287fb5f..1c266ab55 100644 --- a/.pre-commit-config.yaml +++ b/.pre-commit-config.yaml @@ -64,7 +64,7 @@ repos: - id: mypy files: ^vizro-core/src/ additional_dependencies: - - pydantic<2.0.0 + - pydantic>=1.10.13, <2 - repo: https://github.com/gitleaks/gitleaks rev: v8.16.4 diff --git a/vizro-core/changelog.d/20231002_182747_huong_li_nguyen_snyk_fix_45c953e9ecaac62cbefac81184742ed1.md b/vizro-core/changelog.d/20231002_182747_huong_li_nguyen_snyk_fix_45c953e9ecaac62cbefac81184742ed1.md new file mode 100644 index 000000000..e8053167c --- /dev/null +++ b/vizro-core/changelog.d/20231002_182747_huong_li_nguyen_snyk_fix_45c953e9ecaac62cbefac81184742ed1.md @@ -0,0 +1,40 @@ + + + + + + + + +### Security + +- Update pydantic requirement to `pydantic>=1.10.13, <2` due to medium Snyk vulnerability ([#83](https://github.com/mckinsey/vizro/pull/83)) diff --git a/vizro-core/pyproject.toml b/vizro-core/pyproject.toml index 8f32c3692..7e1a1d929 100644 --- a/vizro-core/pyproject.toml +++ b/vizro-core/pyproject.toml @@ -21,7 +21,7 @@ dependencies = [ # 2.11 needed for https://dash.plotly.com/dash-in-jupyter "dash_bootstrap_components", "pandas", - "pydantic<2.0.0", # must be synced with pre-commit mypy hook + "pydantic>=1.10.13, <2", # must be synced with pre-commit mypy hook "dash_daq", "ipython>=8.10.0", # not directly required, pinned by Snyk to avoid a vulnerability: https://app.snyk.io/vuln/SNYK-PYTHON-IPYTHON-3318382 "numpy>=1.22.2", # not directly required, pinned by Snyk to avoid a vulnerability: https://security.snyk.io/vuln/SNYK-PYTHON-NUMPY-2321970 diff --git a/vizro-core/snyk/requirements.txt b/vizro-core/snyk/requirements.txt index 98598233f..982b9abd0 100644 --- a/vizro-core/snyk/requirements.txt +++ b/vizro-core/snyk/requirements.txt @@ -1,7 +1,7 @@ dash>=2.11 dash_bootstrap_components pandas -pydantic<2.0.0 +pydantic>=1.10.13, <2 dash_daq ipython>=8.10.0 numpy>=1.22.2 From 23c3697cee1c7702e3c10df7623fe641a969bedb Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Tue, 3 Oct 2023 13:25:12 +0200 Subject: [PATCH 2/3] Make horizontal rulers visible (#91) --- CODEOWNERS | 3 +- ...910_huong_li_nguyen_make_rulers_visible.md | 41 +++++++++++++++++++ .../vizro/models/_navigation/_accordion.py | 2 +- vizro-core/src/vizro/models/_page.py | 7 +--- vizro-core/src/vizro/static/css/layout.css | 2 +- .../unit/vizro/models/_navigation/conftest.py | 4 +- 6 files changed, 49 insertions(+), 10 deletions(-) create mode 100644 vizro-core/changelog.d/20231003_115910_huong_li_nguyen_make_rulers_visible.md diff --git a/CODEOWNERS b/CODEOWNERS index 8c5f3b8f0..3cb0f8e8d 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -1 +1,2 @@ -* @huong-li-nguyen @maxschulz-COL +* @antonymilne @huong-li-nguyen @maxschulz-COL +vizro-core/docs/ @Joseph-Perkins diff --git a/vizro-core/changelog.d/20231003_115910_huong_li_nguyen_make_rulers_visible.md b/vizro-core/changelog.d/20231003_115910_huong_li_nguyen_make_rulers_visible.md new file mode 100644 index 000000000..021706e52 --- /dev/null +++ b/vizro-core/changelog.d/20231003_115910_huong_li_nguyen_make_rulers_visible.md @@ -0,0 +1,41 @@ + + + + + + + +### Fixed + +- Fix bug of horizontal rulers not being visible in `Card` ([#91](https://github.com/mckinsey/vizro/pull/91)) + + diff --git a/vizro-core/src/vizro/models/_navigation/_accordion.py b/vizro-core/src/vizro/models/_navigation/_accordion.py index 256069d4a..bbca9cce2 100644 --- a/vizro-core/src/vizro/models/_navigation/_accordion.py +++ b/vizro-core/src/vizro/models/_navigation/_accordion.py @@ -67,7 +67,7 @@ def _get_accordion_container(self, accordion_items, accordion_buttons): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id=f"{self.id}_outer", diff --git a/vizro-core/src/vizro/models/_page.py b/vizro-core/src/vizro/models/_page.py index 5906a26f9..192a4f0b8 100644 --- a/vizro-core/src/vizro/models/_page.py +++ b/vizro-core/src/vizro/models/_page.py @@ -160,9 +160,8 @@ def _create_theme_switch(): @staticmethod def _create_control_panel(controls_content): - keyline = html.Div(className="keyline") control_panel = html.Div( - children=[*controls_content, keyline], + children=[*controls_content, html.Hr()], className="control_panel", ) return control_panel if controls_content else None @@ -202,9 +201,7 @@ def _arrange_containers(page_title, theme_switch, nav_panel, control_panel, comp """ _, dashboard = next(model_manager._items_with_type(Dashboard)) dashboard_title = ( - html.Div( - children=[html.H2(dashboard.title), html.Div(className="keyline")], className="dashboard_title_outer" - ) + html.Div(children=[html.H2(dashboard.title), html.Hr()], className="dashboard_title_outer") if dashboard.title else None ) diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 334a96349..4edf9f029 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -87,7 +87,7 @@ width: 336px; } -.keyline { +hr { border-bottom: 1px solid var(--border-subtle-alpha-01); width: 100%; } diff --git a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py index f0869309e..754fe8eff 100644 --- a/vizro-core/tests/unit/vizro/models/_navigation/conftest.py +++ b/vizro-core/tests/unit/vizro/models/_navigation/conftest.py @@ -49,7 +49,7 @@ def accordion_from_page_as_list(): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id="accordion_list_outer", @@ -82,7 +82,7 @@ def accordion_from_pages_as_dict(): persistence=True, persistence_type="session", ), - html.Div(className="keyline"), + html.Hr(), ], className="nav_panel", id="accordion_dict_outer", From 6a14255406b8d064e87b9bb770f45157d57d5b6c Mon Sep 17 00:00:00 2001 From: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Date: Tue, 3 Oct 2023 21:11:00 +0200 Subject: [PATCH 3/3] Add comparison table to `Why Vizro` docs page (#90) Signed-off-by: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> Co-authored-by: joseph_perkins Co-authored-by: Antony Milne <49395058+antonymilne@users.noreply.github.com> --- README.md | 2 +- vizro-core/README.md | 2 +- ...g_li_nguyen_end_to_end_use_case_example.md | 41 +++++++++++++++++++ .../docs/pages/explanation/why_vizro.md | 39 ++++++++++++++++++ vizro-core/docs/stylesheets/extra.css | 5 +++ 5 files changed, 87 insertions(+), 2 deletions(-) create mode 100644 vizro-core/changelog.d/20231003_103941_huong_li_nguyen_end_to_end_use_case_example.md diff --git a/README.md b/README.md index bd40d433a..f14aae687 100644 --- a/README.md +++ b/README.md @@ -76,7 +76,7 @@ Configuration can be written in multiple formats including **Pydantic models**, Optional high-code extensions allow almost infinite customization in a modular way, combining the best of low-code and high-code - for flexible and scalable, Python enabled data visualization applications -(Visit the ["Why Vizro"](https://vizro.readthedocs.io/en/stable/pages/explanation/why_vizro/) section to see a more detailed explanation of Vizro use cases) +(Visit the ["Why Vizro"](https://vizro.readthedocs.io/en/latest/pages/explanation/why_vizro/) section to see a more detailed explanation of Vizro use cases)
diff --git a/vizro-core/README.md b/vizro-core/README.md index bd40d433a..f14aae687 100644 --- a/vizro-core/README.md +++ b/vizro-core/README.md @@ -76,7 +76,7 @@ Configuration can be written in multiple formats including **Pydantic models**, Optional high-code extensions allow almost infinite customization in a modular way, combining the best of low-code and high-code - for flexible and scalable, Python enabled data visualization applications -(Visit the ["Why Vizro"](https://vizro.readthedocs.io/en/stable/pages/explanation/why_vizro/) section to see a more detailed explanation of Vizro use cases) +(Visit the ["Why Vizro"](https://vizro.readthedocs.io/en/latest/pages/explanation/why_vizro/) section to see a more detailed explanation of Vizro use cases)
diff --git a/vizro-core/changelog.d/20231003_103941_huong_li_nguyen_end_to_end_use_case_example.md b/vizro-core/changelog.d/20231003_103941_huong_li_nguyen_end_to_end_use_case_example.md new file mode 100644 index 000000000..45c24150e --- /dev/null +++ b/vizro-core/changelog.d/20231003_103941_huong_li_nguyen_end_to_end_use_case_example.md @@ -0,0 +1,41 @@ + + + + +### Added + +- Add comparison table to `Why Vizro` docs page ([#90](https://github.com/mckinsey/vizro/pull/90)) + + + + + diff --git a/vizro-core/docs/pages/explanation/why_vizro.md b/vizro-core/docs/pages/explanation/why_vizro.md index c868f1a99..9becbda08 100644 --- a/vizro-core/docs/pages/explanation/why_vizro.md +++ b/vizro-core/docs/pages/explanation/why_vizro.md @@ -1,3 +1,9 @@ +--- +hide: + - navigation + - toc +--- + # Why Vizro In the context of comparison with other visualization packages or business intelligence tools, Vizro combines benefits of the speed and user-friendliness of low-code visual analytics tools with the flexibility and power of high-code tools - whilst providing inbuilt visual design, application architecture and coding standardization which also facilitates scaling and reusability. @@ -12,3 +18,36 @@ The simple and largely declarative configuration language follows a “grammar o Using configuration rather than a GUI to define the output facilitates collaboration during the creation process, and increases reusability and scalability in a Python setting. The largely tech-agnostic configuration driven assembly enables utilizing a range of tools, and an inbuilt validation layer provides meaningful feedback to users about configuration choices, thereby increasing flexibility and ease of use. + +## Python packages and business intelligence (BI) tools + +There are a number of Python packages and BI tools which provide support for visualization applications (such as Streamlit, Plotly/Dash, Tableau and PowerBI). + +Vizro is intended to support several niches between the benefits provided by those tools, rather than being in direct comparison with any single tool. Therefore, direct comparisons are often only partially suitable, given the many features offered across this landscape. + +However, in general, there are several areas of functionality where Vizro can be particularly useful, e.g., in providing a simple configuration to speed up the assembly of components, leveraging inbuilt visual design, application architecture, and coding standards, +along with the ability to scale easily across multiple developers and implementations: + +| Functionality | Benefits | In context of Python packages | In context of BI tools | +| :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| **Assembly system**
  • Configuration-driven assembly system of Vizro automatically builds user-friendly, higher-level dashboard concepts (e.g. a filter) from low-level individual components (e.g. a dropdown component plus a filtering function).
|
  • Removes the need for users to learn how to write the “glue code” which combines lower-level components.
  • Removes the time taken to write, test and optimise the “glue code” which combines lower-level components.
  • Reduces what can be 1000s of lines of code down to dozens of lines of configuration.
| Many Python packages still require a moderate understanding of the coding required to assemble higher-level dashboard concepts, which necessitates the creation of “glue code” to combine lower-level components.

Vizro primarily provides a configuration to simplify that assembly of components offered by existing packages (currently leveraging Plotly/Dash), and so occupies a slightly different niche from libraries offering primarily the lower-level components themselves. It also removes the requirement from users to implement certain code standards for the assembled code themselves, and therefore saves time on often time consuming things such as writing unit tests and ensuring linting coverage. | Many BI tools incorporate the assembly of higher-level concepts automatically from GUI (drop-and-drag) interfaces, and occupy a slightly different niche to the configuration driven assembly provided by Vizro. | +| **Inbuilt visual design decisions**
  • UX decisions such as placement of filters and orientation of charts in relation to other components on the screen.
  • Visual design decisions such as chart formatting and spacing between components.
  • Colors including text, backgrounds and chart contents.
|
  • Ensures visual consistency within applications, and across applications built by the same user.
  • Speeds up development by removing the need to spend time on visual design decisions.
  • Removes the need for advanced expertise in visual design.
  • Ensures basic color accessibility for most likely color combinations.
| Many Python packages provide inbuilt color choices, and visual design choices for certain components.

Vizro applies that to a wide range of component combinations and complex user flows, offering a wholistic and comprehensive approach to automatically enable beautiful visual design best practices, whilst allowing customisation and flexibility. | Many BI tools provide inbuilt color choices and visual design choices for certain components.

Vizro provides inbuilt visual design for components in addition to the ability to customise them in a flexible way where needed (for example through CSS), and provides automatic arrangement of components on the screen. | +| **Inbuilt application architecture decisions**
  • The architectural decisions required to connect components in advanced ways - such as combining connecting filters to charts with multi-screen navigation to allow drill-throughs between screens.
|
  • Ensures structural consistency within applications, and across applications built by the same user.
  • Speeds up development by removing the need to spend time on architectural decisions or development.
  • Removes need for advanced expertise in application architecture.
| Many Python packages provide inbuilt application architecture choices for certain functionalities.

Vizro applies that to a wide range of component combinations and complex user flows, offering a wholistic and comprehensive approach to the entire application architecture, whilst allowing customisation and flexibility where relevant. | Many BI tools apply proprietary application architecture by default.

Vizro enables the user to view and understand the application architecture by directly viewing the code. | +| **Declarative configuration, in multiple formats**
  • Configuration is declarative and can be written in Python or a configuration language such as YAML, JSON and TOML.
|
  • The range of formats enables flexibility in implementations (and can be extended in future).
  • Formats such as YAML support programmatic construction of dashboards (for example being dynamically generated from a Kedro pipeline).
  • The focus on editing configuration directly, rather than via GUI or drop-and-drag interfaces, allows for ease of collaboration.
| Many Python packages provide a mostly declarative configuration, with limited ability to leverage multiple formats such as Pydantic models and JSON.

Vizro simplifies this approach, and facilitates the extension of the assembly system to enable integration with other tools such as Kedro to programmatically and dynamically generate the relevant dashboard configurations in a streamlined way. | Many BI tools solely use a GUI and/or drag-and-drop interface for defining dashboards, and leverage proprietary configuration formats.

Vizro enables the user to view and understand the configuration by viewing it directly, in addition to being able to edit it directly. | +| **Mostly tech agnostic “grammar of dashboards”**
  • The configuration follows a “grammar of dashboards” which is mostly generic and tech agnostic (rather than being specific to any Python package or coding language).
|
  • Enables a more intuitive understanding of how to write the configuration.
  • Enables the configuration to apply to other Python packages or other coding languages in future. (NB: this would require an adjustment to the underlying assembly core code).
| Many Python packages provide an effective “grammar of charts” and Python specific declaration.

Vizro provides a “grammar of dashboards” with declaration which is largely tech agnostic and can be extended to non-Python languages. | Many BI tools utilise an implicit internal “grammar of dashboards” which is specific to the proprietary language(s) on with which they are built.

Vizro provides an explicit configuration grammar and allows users to leverage a mostly tech agnostic approach (which can be extended in future). | +| **Inbuilt validation**
  • The ability to leverage Pydantic models automatically provides meaningful feedback to users about configuration choices.
|
  • Increases ease of use by guiding users, providing early validation and clear feedback throughout the configuration process.
  • This validation feedback can also be utilised by processes which construct the configuration programmatically, such as via a Kedro pipeline.
| Many Python packages provide individual components or non-Pydantic based models.

Vizro provides the advantages of Pydantic based models for many elements of the configuration process, which leverages the validation and guidance inherent in that process to facilitate implementation by users. | Many BI tools have inbuilt guideline systems to ensure components are combined in a valid way, and provide feedback to the manual user to help guide through that process.

Vizro utilises a flexible system which can be extended to provide feedback to programmatic generation of configuration. | +| **Modularity**
  • The standardisation applied by Vizro (in terms of visual design, application architecture and coding standards) makes it possible to re-use configuration, charts, components and extensions such as custom actions, between implementations.
|
  • Speeds up development by allowing re-use of existing implementations.
  • Facilitates collaboration between users by allowing knowledge to be encoded in modular ways.
| Many Python packages provide modularity of components such as charts and controls.

Vizro supports modularity of groups of components (such as their implementation together as a dashboard screen), which can be easily transferred between implementations as configuration. | Many BI tools provide extensions and plugins which support modularity of visualizations.

Vizro supports modularity of groups of components (such as their implementation together as a dashboard screen), which can be easily transferred between implementations as configuration. | +| **Flexibility**
  • The ability to utilise the low-code approach of configuration with the high-code approach of custom functions provides flexibility in implementation for both less technical and more technical users.
|
  • The low-code configuration driven approach enables all users to create fairly flexible dashboards easily.
  • The high-code approach of using custom functions in a structured way provides more technical users with flexibility to extend functionality almost infinitely.
| Many Python packages provide some low-code and/or high-code approaches, which offer varying degrees of flexibility.

Vizro provides a wholistic combination of low-code and high-code approaches which support less technical and more technical users individually while allowing them much flexibility in implementation according to their technical level. | Many BI tools offer a no-code (or at least low-code) approach to creating charts and dashboards, along with varying forms of plugins to increase flexibility.

Vizro unlocks Python custom functions to be able to power this user driven flexibility in a technically advanced way, with a high degree of control and visibility over the code, whilst also supporting less technical users through low-code configuration. | +| **Scaling**
  • The consistency in visual design, application architecture and code standards, combined with the ease of collaboration between Python developers, allows scaling within and between projects by facilitating re-use, extension and programmatic updates of configurations.
|
  • Sections of configuration can be re-used and tailored easily, allowing implementations to scale across or between projects.
  • New joiners to a team can get up to speed quickly, allowing teams to scale in size.
  • Other teams can inherit configurations easily, allowing implementations to scale between teams.
  • Updates can be propagated to configurations from a central location, allowing adjustments and updates to scale easily across large implementations.
  • Inbuilt visual design decisions provide visual consistency.
  • Leveraging collaborative coding mechanisms such as Git enables almost any number of developers to collaborate effectively.
| Many Python packages benefit from the ability to propagate updates programmatically, while applying that to “glue code”.

Vizro makes it easy to scale by replicating the relatively small amount of configuration in 1 file between usages, rather than replicating a large amount of code across many files between usages.

Updating configuration programmatically from a central location is often easier than updating code. When sharing between users, it can be easier to inherit and understand configuration than the underlying code. The visual consistency makes it easier to scale within or between projects while maintaining visual coherence. | Many BI tools allow scaling through GUI drag-and-drop interfaces (having some functionality for duplication or propagating changes) for single users.

Vizro makes it easy to leverage tools such as Git to enable almost any number of users to collaborate effectively, therefore allowing the number of developers on a single project to scale easily.

Since updates can be propagated programmatically easily from a central location, it allows scaling across almost any number of related implementations which can be kept up to date and aligned without the need to manually adjust each implementation when updates are required. | +| **Python first**
  • Leveraging Pydantic and Plotly/Dash provides a Python first approach (whilst making use of a mostly tech agnostic configuration system).
  • (Since Plotly/Dash leverage React components, and allow them to be used as components, then JavaScript can also be used in a form that is effectively wrapped in Python).
|
  • This empowers a wider group of practitioners that are already close to data analytics, since they are more likely to have existing skills in Python than JavaScript.
  • This provides the advantage of leveraging existing Python work spaces such as notebooks and IDEs.
  • Facilitates multi-developer collaboration via tools such as Git.
| Python packages are already Python focussed.

Vizro is no different in this respect. By leveraging Plotly/Dash, Vizro is also able to benefit from the power and flexibility offered by JavaScript via React, whilst still presenting a format that is Python first to the user (by making use of the ability offered by Dash to effectively wrap those components into Python). | Many BI tools do not provide direct or full integration with Python.

Vizro provides a Python first approach which leverages the power and flexibility of Python, and the open source community supporting that wide ranging functionality. | +| **Open source**
  • The use of an open source licence, and the reliance on open source packages.
  • The provision of ongoing development and maintenance.
|
  • There is no licence fee required to utilise Vizro.
  • Ongoing development and maintenance increases the long term usability of the Vizro package, and viability of implementations.
| Many Python packages also use an open source licence, and provide ongoing development and maintenance.

Vizro is no different in this respect. | Many BI tools follow a licence fee model and/or charge for ongoing development and maintenance.

Vizro requires no licence fee, and provides ongoing development and support, which helps to remove some barriers to usage. | + +## Cases where alternatives to Vizro are potentially more suitable + +There are a number of cases where alternatives to Vizro may be more suitable, including where: + +- BI tools are already in use, and/or Python developers are not prevalent + +- Development teams already contain designers and JavaScript (or equivalent) engineers able and willing to build bespoke applications (though Vizro can sometimes still be used effectively to rapidly prototype potential solutions) + +- Python developers are already comfortable leveraging other Python packages without the desire to use an assembly system, or do not require inbuilt visual design, application architecture or coding standards, and/or the ability to scale easily across multiple implementations or users diff --git a/vizro-core/docs/stylesheets/extra.css b/vizro-core/docs/stylesheets/extra.css index 74fbd9762..17e3b3ae4 100644 --- a/vizro-core/docs/stylesheets/extra.css +++ b/vizro-core/docs/stylesheets/extra.css @@ -36,3 +36,8 @@ :root > * { --md-code-hl-color: #119bec3e; } + +.md-typeset th, +td:not([class]):not(:last-child) { + border-right: 1px solid lightgrey; +}