From fa9d28832d8776546ebea585c3464a258f01221b Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 3 Jul 2024 16:29:47 +0100 Subject: [PATCH 01/14] Chunk of admonitions changes --- vizro-core/docs/pages/examples/examples.md | 6 +-- .../explanation/documentation-style-guide.md | 14 +++--- .../pages/tutorials/explore-components.md | 4 +- vizro-core/docs/pages/user-guides/actions.md | 13 +++--- vizro-core/docs/pages/user-guides/assets.md | 6 +-- .../docs/pages/user-guides/card-button.md | 16 +++---- .../docs/pages/user-guides/container.md | 4 +- .../docs/pages/user-guides/custom-charts.md | 4 +- .../pages/user-guides/custom-components.md | 45 +++++++++---------- .../docs/pages/user-guides/dashboard.md | 2 +- vizro-core/docs/pages/user-guides/graph.md | 2 +- vizro-core/docs/pages/user-guides/install.md | 12 ++--- vizro-core/docs/pages/user-guides/layouts.md | 4 +- .../docs/pages/user-guides/parameters.md | 3 +- vizro-core/docs/pages/user-guides/run.md | 18 +++----- .../docs/pages/user-guides/selectors.md | 4 +- vizro-core/docs/pages/user-guides/table.md | 6 +-- 17 files changed, 71 insertions(+), 92 deletions(-) diff --git a/vizro-core/docs/pages/examples/examples.md b/vizro-core/docs/pages/examples/examples.md index 3c79f50da..9f3f4fa6e 100644 --- a/vizro-core/docs/pages/examples/examples.md +++ b/vizro-core/docs/pages/examples/examples.md @@ -15,16 +15,14 @@ The dashboard launches with a home page that offers four other pages: You can find the code for each of the charts, for each page of the dashboard, in the `examples` folder of the `vizro-core` package, within [Vizro's GitHub repository](https://github.com/mckinsey/vizro). The code is available as a [`.py` file](https://github.com/mckinsey/vizro/blob/main/vizro-core/examples/demo/app.py) or as a [Jupyter Notebook](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/demo/jupyter_version). -!!! info +!!! note If you have any problems running the example code, please [raise an issue](https://github.com/mckinsey/vizro/issues) on the Vizro repository. ## Vizro features The [`examples/features` folder](https://github.com/mckinsey/vizro/tree/main/vizro-core/examples/features) of the `vizro-core` package within [Vizro's GitHub repository](https://github.com/mckinsey/vizro) contains an example that illustrates Vizro's features. The code is available as a Python script, plus there is an alternative `yaml_version` that offers the same example as the pydantic model but via YAML configuration. -!!! info "Ways to configure a dashboard" - - In most cases, the pydantic model should be your preferred method of dashboard configuration, but you can also [define a dashboard with YAML, JSON, or as a Python dictionary](../user-guides/dashboard.md). +The pydantic model should be your preferred method of dashboard configuration, but you can also [define a dashboard with YAML, JSON, or as a Python dictionary](../user-guides/dashboard.md). ## Examples from Vizro users diff --git a/vizro-core/docs/pages/explanation/documentation-style-guide.md b/vizro-core/docs/pages/explanation/documentation-style-guide.md index e13120529..9c397754e 100644 --- a/vizro-core/docs/pages/explanation/documentation-style-guide.md +++ b/vizro-core/docs/pages/explanation/documentation-style-guide.md @@ -33,17 +33,21 @@ Avoid referring to data using terms like "dataset" or "connector". Prefer to use ## Call out boxes -Keep the amount of text, and the number and variety of callouts used, to a minimum. There is a [broad set available](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types) for use in the Vizro docs, but we prefer to limit usage mostly to the following: +Keep the amount of text, and the number and variety of callouts used, to a minimum. There is a [broad set available](https://squidfunk.github.io/mkdocs-material/reference/admonitions/#supported-types) for use in the Vizro docs, but we limit usage to notes, warnings, details and examples: -!!!note "note" +!!! note "note" For notable information. -!!!warning "warning" +!!! warning "warning" To indicate a potential gotcha. -!!!example "example" +??? details "See more details" + + A side note (used sparingly) + +!!! example "example" For example code. @@ -52,7 +56,7 @@ Callout boxes can be made collapsible: if you use them, add them to the page so ???+ note "Limit the use of collapsible callouts to secondary information only" - Don't use expanded-on-load collapsibles. If the callout contains important information and needs to be shown as expanded on page load, it should simply be non-collapsible. + Don't use expanded-on-load collapsibles like this one. If the callout contains important information and needs to be shown as expanded on page load, it should simply be non-collapsible. ## Capitalization * Only capitalize proper nouns such as the names of technology products, other tools and services. diff --git a/vizro-core/docs/pages/tutorials/explore-components.md b/vizro-core/docs/pages/tutorials/explore-components.md index cce9ddb05..0b3416404 100644 --- a/vizro-core/docs/pages/tutorials/explore-components.md +++ b/vizro-core/docs/pages/tutorials/explore-components.md @@ -55,7 +55,7 @@ The code below shows the steps necessary to add a box plot to the page: [FirstPage1]: ../../assets/tutorials/dashboard/dashboard21.png -!!! tip "To see the dashboard in action" +!!! note "To see the dashboard in action" Paste the above code into a Notebook cell, run the Notebook, and evaluate it. @@ -155,7 +155,7 @@ The code below adds two components to the page: As you explore the dashboard, you may notice that the current layout could be further enhanced. The charts may appear cramped, while the text component has ample unused space. The next section explains how to configure the layout and arrange the components. -!!! tip "An introduction to Vizro-AI" +!!! note "An introduction to Vizro-AI" In the example above, the code to create the line graph was generated using [Vizro-AI](https://vizro.readthedocs.io/en/latest/pages/tutorials/first-dashboard/). Vizro-AI enables you to use English, or other languages, to create interactive charts with [Plotly](https://plotly.com/python/) by simplifying the process through use of a large language model. In essence, Vizro-AI generates code from natural language instructions so that you can add it into a Vizro dashboard, such as in the example above. diff --git a/vizro-core/docs/pages/user-guides/actions.md b/vizro-core/docs/pages/user-guides/actions.md index 7afde85c1..93abc8bf0 100644 --- a/vizro-core/docs/pages/user-guides/actions.md +++ b/vizro-core/docs/pages/user-guides/actions.md @@ -5,20 +5,17 @@ Many components of a dashboard (for example, [`Graph`][vizro.models.Graph] or [` By combining the [`Action`][vizro.models.Action] model with an action function, you can create complex dashboard interactions triggered by various events. -There are already a few action functions you can reuse. +There are already a few action functions you can reuse: -???+ info "Overview of currently available pre-defined action functions" - - - [`export_data`][vizro.actions.export_data] - - [`filter_interaction`][vizro.actions.filter_interaction] +- [`export_data`][vizro.actions.export_data] +- [`filter_interaction`][vizro.actions.filter_interaction] ## Pre-defined actions To attach an action to a component, you must enter the [`Action`][vizro.models.Action] model into the component's `action` argument. You can then add a desired pre-defined action function into the `function` argument of the [`Action`][vizro.models.Action]. -??? note "Note on `Trigger`" - Currently each component has one pre-defined trigger property. A trigger property is an attribute of the component that triggers a configured action (for example, for the `Button` it is `n_click`). +Currently each component has one pre-defined trigger property. A trigger property is an attribute of the component that triggers a configured action (for example, for the `Button` it is `n_click`). The below sections are guides on how to use pre-defined action functions. @@ -128,7 +125,7 @@ Graph(figure=px.scatter(..., custom_data=["continent"])) Selecting a data point with a corresponding value of "Africa" in the continent column will result in filtering the data of target charts to show only entries with "Africa" in the continent column. The same applies when providing multiple columns in `custom_data`. -!!! tip +!!! note - You can reset your chart interaction filters by refreshing the page - You can create a "self-interaction" by providing the source chart id as its own `target` diff --git a/vizro-core/docs/pages/user-guides/assets.md b/vizro-core/docs/pages/user-guides/assets.md index 0b4c82b67..451a1e7e8 100644 --- a/vizro-core/docs/pages/user-guides/assets.md +++ b/vizro-core/docs/pages/user-guides/assets.md @@ -264,12 +264,12 @@ It's essential to understand the relationship between the targeted CSS class or [CardCSS]: ../../assets/user_guides/assets/css_change_card.png -??? note "Order of serving CSS files" +## Order of serving CSS files - CSS properties will be applied with the last served file taking precedence. The order of serving is: +CSS properties will be applied with the last served file taking precedence. The order of serving is: 1. Dash built-in stylesheets 2. Vizro built-in stylesheets 3. User assets folder stylesheets - Within each of these categories, individual files are served in alphanumeric order. +Within each of these categories, individual files are served in alphanumeric order. diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index 0f7d306f7..c20aac56b 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -324,21 +324,19 @@ and give an attribute selector to select images with that matching URL hash. [CardImageStyled]: ../../assets/user_guides/components/card_image_styled.png -???+ tip +Use the following pre-defined URL hashes in your image path to apply Vizro's default styling. - Use the following pre-defined URL hashes in your image path to apply Vizro's default styling. - - To float the image next to the text: +* To float the image next to the text: - floating-left: `![](my_image.png#floating-left)` - floating-right: `![](my_image.png#floating-right)` - floating-center: `![](my_image.png#floating-center)` - To apply the default icon styling: +* To apply the default icon styling: - icon-top: `![](my_image.png#icon-top)` -??? example "Card with floating image" +!!! example "Card with floating image" === "app.py" ```py import vizro.models as vm @@ -402,7 +400,7 @@ and give an attribute selector to select images with that matching URL hash. [CardImageFloating]: ../../assets/user_guides/components/card_image_floating.png -??? example "Card with icon" +!!! example "Card with icon" === "app.py" ```py import vizro.models as vm @@ -462,7 +460,7 @@ img[src*="#my-image"] { } ``` -??? example "Responsive icon" +!!! example "Responsive icon" ![responsive icon](../../assets/user_guides/components/responsive_icon.gif) ### Create a navigation card @@ -561,7 +559,7 @@ To create a navigation card: If you now click on the card area, you should automatically be redirected to the relevant `href`. -???+ note +!!! note When using the [`Card`][vizro.models.Card], keep the following in mind: diff --git a/vizro-core/docs/pages/user-guides/container.md b/vizro-core/docs/pages/user-guides/container.md index 8d7266268..88fbdf2fb 100755 --- a/vizro-core/docs/pages/user-guides/container.md +++ b/vizro-core/docs/pages/user-guides/container.md @@ -8,9 +8,9 @@ A [`Container`][vizro.models.Container] complements the idea of a [`Page`][vizro While there is currently no clear difference in rendering, extra functionality will be added to the `Container` soon (including controls specific to that container), enhancing the ability to manage related components. -??? note "Displaying multiple containers inside Tabs" +!!! note "Displaying multiple containers inside Tabs" - An alternative way for displaying multiple containers on one page is to place them inside [Tabs](tabs.md). + An alternative way to display multiple containers on one page is to place them inside [Tabs](tabs.md). [`Tabs`][vizro.models.Tabs] organize and separate groups of related content in a dashboard, letting users switch between different sections or views. They are a way of putting multiple containers into the same screen space, and letting the user switch between them. diff --git a/vizro-core/docs/pages/user-guides/custom-charts.md b/vizro-core/docs/pages/user-guides/custom-charts.md index e5c7eebca..e4bee2ab0 100644 --- a/vizro-core/docs/pages/user-guides/custom-charts.md +++ b/vizro-core/docs/pages/user-guides/custom-charts.md @@ -34,9 +34,7 @@ Building on the above, there are several routes one can take. The following exam To alter the data in the `data_frame` argument, consider using a [Filter](filters.md) or [parametrized data loading](data.md/#parametrize-data-loading) and [dynamic data](data.md/#dynamic-data). The `data_frame` argument input to a custom chart contains the data **after** filters and parameters have been applied. -!!! tip - - Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any additional configuration. We will showcase both possibilities in the following examples. In particular the `Parameters` in combination with custom charts can be highly versatile in achieving custom functionality. +Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any extra configuration. We will showcase both possibilities in the following examples. In particular the `Parameters` in combination with custom charts can be highly versatile in achieving custom functionality. ## Enhanced `plotly.express` chart with reference line diff --git a/vizro-core/docs/pages/user-guides/custom-components.md b/vizro-core/docs/pages/user-guides/custom-components.md index 94997230c..5c352e44d 100644 --- a/vizro-core/docs/pages/user-guides/custom-components.md +++ b/vizro-core/docs/pages/user-guides/custom-components.md @@ -29,13 +29,13 @@ or if you would like to use extra `args` or `kwargs` of those components, then t ## Extend an existing component -??? info "When to choose this strategy" - You may want to use this strategy to: - - extend an existing component (for example, to add a button to [`Card`][vizro.models.Card]) - - change configurations we have set by default (for example, to set `allowCross=False` in [`RangeSlider`][vizro.models.RangeSlider]) - - change any fields of any models (for example, to change the title field from `Optional` to have a default) +You may want to use this strategy to: + +- extend an existing component (for example, to add a button to [`Card`][vizro.models.Card]) +- change configurations we have set by default (for example, to set `allowCross=False` in [`RangeSlider`][vizro.models.RangeSlider]) +- change any fields of any models (for example, to change the title field from `Optional` to have a default) You can extend an existing component by sub-classing the component you want to alter. Remember that when sub-classing a component @@ -149,30 +149,28 @@ vm.Parameter.add_type("selector", TooltipNonCrossRangeSlider) ## Create a new component -??? info "When to choose this strategy" - - You may want to use this strategy to: +You may want to use this strategy to: - - create a new component that does not exist in our library yet - - make extensive changes to an existing component +- create a new component that does not exist in our library yet +- make extensive changes to an existing component You can create an entirely new component by sub-classing our [VizroBaseModel][vizro.models.VizroBaseModel]. Note that using `VizroBaseModel` is mandatory if you want the new component to work in the Vizro framework. The aim of the example is to create a [`Jumbotron`](https://dash-bootstrap-components.opensource.faculty.ai/docs/components/jumbotron/), a component that currently does not exist in Vizro's existing component range. It is a lightweight container to call attention to featured content or information. -???note "Note on `build` and `pre_build` methods" - Note that when creating new components, you will need to define a `build` method like in the below example if it is a visual component that is rendered on the page. Examples of components with a `build` method are: +### The `build` and `pre_build` methods - - `selector` type: [`Checklist`][vizro.models.Checklist], [`Dropdown`][vizro.models.Dropdown], [`RadioItems`][vizro.models.RadioItems]. - - `component` type: [`Graph`][vizro.models.Graph], [`Card`][vizro.models.Card]. +When creating new components, you will need to define a `build` method like in the below example if it is a visual component that is rendered on the page. Examples of components with a `build` method are: - For components that only create other components, you do not need to define a `build` method, for example, for [`Filter`][vizro.models.Filter] and [`Parameter`][vizro.models.Parameter]. +- `selector` type: [`Checklist`][vizro.models.Checklist], [`Dropdown`][vizro.models.Dropdown], [`RadioItems`][vizro.models.RadioItems]. +- `component` type: [`Graph`][vizro.models.Graph], [`Card`][vizro.models.Card]. - If you would like to have access to other components, you may want to define a `pre_build` method. This method is automatically run for all models and makes them internally consistent. Notable existing models - with `pre_build` methods are [`Filter`][vizro.models.Filter] and [`Parameter`][vizro.models.Parameter]. +For components that only create other components, you do not need to define a `build` method, for example, for [`Filter`][vizro.models.Filter] and [`Parameter`][vizro.models.Parameter]. -In this case, the general steps translate for this example into: +If you would like to have access to other components, you may want to define a `pre_build` method. This method is automatically run for all models and makes them internally consistent. Notable existing models with `pre_build` methods are [`Filter`][vizro.models.Filter] and [`Parameter`][vizro.models.Parameter]. + +### General steps 1. Create new component, by sub-classing [VizroBaseModel][vizro.models.VizroBaseModel]: ```py @@ -485,11 +483,10 @@ As mentioned above, custom components can trigger action. To enable the custom c [CustomComponent4]: ../../assets/user_guides/custom_components/customcomponent_4.gif -???+ warning +### Security warning + +Note that users of this package are responsible for the content of any custom-created component, function or integration they write. You should be cautious about leaking any sensitive information and potential security threats. - Please note that users of this package are responsible for the content of any custom-created component, - function or integration they write - especially with regard to leaking any sensitive information or exposing to - any security threat during implementation. +By default, all Dash components in Vizro that persist client-side data set [`persistence_type="session"` to use `window.SessionStorage`](https://dash.plotly.com/persistence), which is cleared upon closing the browser. - By default, all Dash components in Vizro that persist client-side data set [`persistence_type="session"` to use `window.SessionStorage`](https://dash.plotly.com/persistence), which is cleared upon closing the browser. - Be careful when using any custom components that persist data beyond this scope: it is your responsibility to ensure compliance with any legal requirements affecting jurisdictions in which your app operates. +Be careful when using any custom components that persist data beyond this scope: it is your responsibility to ensure compliance with any legal requirements affecting jurisdictions in which your app operates. diff --git a/vizro-core/docs/pages/user-guides/dashboard.md b/vizro-core/docs/pages/user-guides/dashboard.md index f44ce2862..95f7fa0b5 100644 --- a/vizro-core/docs/pages/user-guides/dashboard.md +++ b/vizro-core/docs/pages/user-guides/dashboard.md @@ -143,7 +143,7 @@ To create a dashboard: [Dashboard]: ../../assets/user_guides/dashboard/dashboard.png -???+ note "Extra `.py` files for `yaml` and `json` required" +!!! note "Extra `.py` files for `yaml` and `json` required" Note that in the `yaml` and `json` example an extra `.py` is required to register the data and parse the yaml/json configuration. diff --git a/vizro-core/docs/pages/user-guides/graph.md b/vizro-core/docs/pages/user-guides/graph.md index ce2a529ea..cf06a52ec 100755 --- a/vizro-core/docs/pages/user-guides/graph.md +++ b/vizro-core/docs/pages/user-guides/graph.md @@ -75,7 +75,7 @@ To add a [`Graph`][vizro.models.Graph] to your page, do the following: In the Python example we directly inserted the pandas DataFrame `df` into `figure=px.scatter_matrix(df, ...)`. This is [one way to supply data to a chart](data.md#supply-directly). For the YAML version, we [refer to the data source by name](data.md#reference-by-name) as `data_frame: iris`. For a full explanation of the different methods you can use to send data to your dashboard, see [our guide to using data in Vizro](data.md). -??? info "Vizro automatically sets the plotly default template" +!!! info "Vizro automatically sets the plotly default template" When importing Vizro, we automatically set the `plotly` [default template](https://plotly.com/python/templates/#specifying-a-default-themes) to a custom designed template. In case you would like to set the default back, simply run diff --git a/vizro-core/docs/pages/user-guides/install.md b/vizro-core/docs/pages/user-guides/install.md index f23786c7d..89571ada7 100644 --- a/vizro-core/docs/pages/user-guides/install.md +++ b/vizro-core/docs/pages/user-guides/install.md @@ -15,13 +15,11 @@ pip install vizro **Virtual environment**: You should create a virtual environment for each Vizro project you work on to isolate its Python dependencies from those of other projects. See the following references to learn more about [Python virtual environments](https://realpython.com/python-virtual-environments-a-primer/), [Conda virtual environments](https://docs.conda.io/projects/conda/en/latest/user-guide/getting-started.html#starting-conda) or [watch an explainer video about them](https://youtu.be/YKfAwIItO7M). -!!! tip "Prefer to use Vizro without opening a terminal window?" +If you are a beginner or coding novice, you may prefer to avoid using a terminal to work with Vizro. Skip to the ["Use Vizro inside Anaconda" section](#use-vizro-inside-anaconda-navigator) below. - If you are a beginner or coding novice, you may prefer to avoid using a terminal to work with Vizro. Skip to the ["Use Vizro inside Anaconda" section](#use-vizro-inside-anaconda-navigator) below. - -??? information "How to create a virtual environment for your Vizro project" +??? note "How to create a virtual environment for your Vizro project" The simplest way to create a virtual environment in Python is `venv`, which is included in the Python standard library. Create a directory for your project and navigate to it. For example: @@ -82,12 +80,10 @@ You should see a return output of the form `x.y.z`. ## Upgrade +Check the [release notes](https://github.com/mckinsey/vizro/blob/main/vizro-core/CHANGELOG.md) for any notable breaking changes before migrating an existing project. + To change the version of Vizro installed: ```bash pip install -U vizro ``` - -!!! tip Check the Vizro release notes - - To upgrade safely, check the [release notes](https://github.com/mckinsey/vizro/blob/main/vizro-core/CHANGELOG.md) for any notable breaking changes before migrating an existing project. diff --git a/vizro-core/docs/pages/user-guides/layouts.md b/vizro-core/docs/pages/user-guides/layouts.md index 340d7a130..a73608045 100644 --- a/vizro-core/docs/pages/user-guides/layouts.md +++ b/vizro-core/docs/pages/user-guides/layouts.md @@ -135,9 +135,7 @@ This defines a single row that occupies the entire width and height, divided int ## Grid - advanced example -!!! tip "When to use Containers" - - If you want to divide the grid into subgrids with finer control over these, you can use [`Containers`](container.md). See our section on [when to use `Containers` vs. `Page.layout`](container.md#when-to-use-containers) for more information. +If you want to divide the grid into subgrids with finer control over these, you can use [`Containers`](container.md). See our section on [when to use `Containers` vs. `Page.layout`](container.md#when-to-use-containers) for more information. The `Layout` provides full control over the arrangement of top-level components within a page, allowing arbitrarily granular control of the grid by creating larger grids. diff --git a/vizro-core/docs/pages/user-guides/parameters.md b/vizro-core/docs/pages/user-guides/parameters.md index f93e27758..81e69e873 100644 --- a/vizro-core/docs/pages/user-guides/parameters.md +++ b/vizro-core/docs/pages/user-guides/parameters.md @@ -77,8 +77,7 @@ Unlike for the [`Filter`][vizro.models.Filter] model, you also have to configure [Parameter]: ../../assets/user_guides/control/control4.png -!!! tip - If you would like to pass `None` as a parameter and make a parameter optional, you can specify the string `"NONE"` in the `options` or `value` field. +If you would like to pass `None` as a parameter and make a parameter optional, you can specify the string `"NONE"` in the `options` or `value` field. ## Nested parameters diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index a80387b35..f8a45fbf1 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -40,18 +40,15 @@ INFO:werkzeug:WARNING: This is a development server. Do not use it in a producti As per the above warning message, which is [further explained in the Flask documentation](https://flask.palletsprojects.com/en/3.0.x/deploying/), the Flask development server is intended for use only during local development and **should not** be used when deploying to production. Instead, you should instead use a production-ready solution such as [gunicorn](#gunicorn). -??? info "Automatic reloading and debugging" +### Automatic reloading and debugging +You can set up the front-end to automatically refresh whenever dashboard configuration updates are made, as described in the ["Code Reloading and Hot Reloading" section of the Dash Dev Tools documentation](https://dash.plotly.com/devtools#code-reloading-&-hot-reloading). - You can set up the front-end to automatically refresh whenever dashboard configuration updates are made, as described in the - ["Code Reloading and Hot Reloading" section of the Dash Dev Tools documentation](https://dash.plotly.com/devtools#code-reloading-&-hot-reloading). - This is turned off by default in Vizro apps but can be enabled by using `debug=True` in the `run()` method: +This is turned off by default in Vizro apps but can be enabled by using `debug=True` in the `run()` method: `Vizro().build(dashboard).run(debug=True)` - `Vizro().build(dashboard).run(debug=True)` +Setting `debug=True` enables [Dash Dev Tools](https://dash.plotly.com/devtools). In addition to hot reloading, this enables several other features that are useful during development, such as detailed in-app error reporting. - Setting `debug=True` enables [Dash Dev Tools](https://dash.plotly.com/devtools). In addition to hot reloading, this enables several other features that are useful during development, such as detailed in-app error reporting. - - In addition, some errors generated at run time can also be viewed via the browser console (for example in `Chrome` see `View > Developer > Developer Tools > Console`). +In addition, some errors generated at run time can also be viewed via the browser console (for example in `Chrome` see `View > Developer > Developer Tools > Console`). ## Jupyter @@ -80,10 +77,9 @@ The dashboard application can be launched in a Jupyter environment in `inline`, - you can specify `jupyter_mode="external"` and a link will be displayed to direct you to the localhost where the dashboard is running. - you can use tab mode by `jupyter_mode="tab"` to automatically open the app in a new browser -??? info "Reloading and debugging" +### Reloading and debugging - When working in a Jupyter Notebook, only some of the [Dash Dev Tools](https://dash.plotly.com/devtools) functionality is enabled by using `run(debug=True)`. - In particular, code reloading and hot reloading do not work from a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. +Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. ## Gunicorn diff --git a/vizro-core/docs/pages/user-guides/selectors.md b/vizro-core/docs/pages/user-guides/selectors.md index 9e1dcb14c..b0eac7de7 100644 --- a/vizro-core/docs/pages/user-guides/selectors.md +++ b/vizro-core/docs/pages/user-guides/selectors.md @@ -72,9 +72,7 @@ indicating that [pandas.api.types.is_numeric_dtype()](https://pandas.pydata.org/ To use temporal [`Filter`][vizro.models.Filter] selectors, the filtered column must be of `datetime` format, indicating that [pandas.api.types.is_datetime64_any_dtype()](https://pandas.pydata.org/docs/reference/api/pandas.api.types.is_datetime64_any_dtype.html) must return `True` for the filtered column. -!!! tip - - `pd.DataFrame` column types can be changed to `datetime` using [pandas.to_datetime()](https://pandas.pydata.org/docs/reference/api/pandas.to_datetime.html) or +`pd.DataFrame` column types can be changed to `datetime` using [pandas.to_datetime()](https://pandas.pydata.org/docs/reference/api/pandas.to_datetime.html) or ### Example of default Filter selectors diff --git a/vizro-core/docs/pages/user-guides/table.md b/vizro-core/docs/pages/user-guides/table.md index d848277a9..48b068a34 100755 --- a/vizro-core/docs/pages/user-guides/table.md +++ b/vizro-core/docs/pages/user-guides/table.md @@ -137,7 +137,7 @@ columnDefs = [{"field": "", "cellDataType": "euro"}] In the example below we select and format some columns of the gapminder data. -??? example "AG Grid with formatted columns" +!!! example "AG Grid with formatted columns" === "app.py" ```py @@ -213,7 +213,7 @@ As mentioned above, all [parameters of the Dash AG Grid](https://dash.plotly.com an example of a styled AG Grid where some conditional formatting is applied, and where the columns are editable, but not filterable or resizable. There are more ways to alter the grid beyond this showcase. AG Grid, like any other Vizro component, can be customized using custom CSS. You can find information in the [guide to overwriting CSS properties](./assets.md#overwrite-css-properties-in-selective-components). -??? example "Styled and modified Dash AG Grid" +!!! example "Styled and modified Dash AG Grid" === "app.py" ```py @@ -401,7 +401,7 @@ setting some defaults for some arguments to help with styling. As mentioned above, all [parameters of the Dash DataTable](https://dash.plotly.com/datatable/reference) can be entered as keyword arguments. Below you can find an example of a styled table where some conditional formatting is applied. There are many more ways to alter the table beyond this showcase. -??? example "Styled Dash DataTable" +!!! example "Styled Dash DataTable" === "app.py" ```py From a1d0deab7077162e5620b10e1314414d8cb25883 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 3 Jul 2024 16:50:54 +0100 Subject: [PATCH 02/14] Few more rationalisations --- .../docs/pages/user-guides/card-button.md | 7 +------ .../docs/pages/user-guides/container.md | 4 +--- vizro-core/docs/pages/user-guides/graph.md | 20 +++++++++---------- vizro-core/docs/pages/user-guides/pages.md | 14 +++---------- 4 files changed, 15 insertions(+), 30 deletions(-) diff --git a/vizro-core/docs/pages/user-guides/card-button.md b/vizro-core/docs/pages/user-guides/card-button.md index c20aac56b..b43893ed4 100755 --- a/vizro-core/docs/pages/user-guides/card-button.md +++ b/vizro-core/docs/pages/user-guides/card-button.md @@ -465,12 +465,7 @@ img[src*="#my-image"] { ### Create a navigation card -!!! note - - This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation - card. To configure the navigation panel on the left hand side of the screen, refer to the - [guide on navigation](navigation.md). - +This section describes how to use the [`Card`][vizro.models.Card] component to create a navigation card. To configure the navigation panel on the left hand side of the screen, refer to the [guide on navigation](navigation.md). A navigation card enables you to navigate to a different page via a click on the card area. diff --git a/vizro-core/docs/pages/user-guides/container.md b/vizro-core/docs/pages/user-guides/container.md index 88fbdf2fb..ff89bcb3c 100755 --- a/vizro-core/docs/pages/user-guides/container.md +++ b/vizro-core/docs/pages/user-guides/container.md @@ -154,9 +154,7 @@ To add a [`Container`][vizro.models.Container] to your page, do the following: [Container]: ../../assets/user_guides/components/containers.png -!!! note - - Note that an almost identical layout can also be achieved using solely the [`Page.layout`](layouts.md) by configuring the `Page.layout` as `vm.Layout(grid = [[0, 1], [2, 2]])`. +Note that an almost identical layout can also be achieved using solely the [`Page.layout`](layouts.md) by configuring the `Page.layout` as `vm.Layout(grid = [[0, 1], [2, 2]])`. ## Nested containers Containers can be nested, providing a hierarchical structure for organizing components. diff --git a/vizro-core/docs/pages/user-guides/graph.md b/vizro-core/docs/pages/user-guides/graph.md index cf06a52ec..e25ec20d3 100755 --- a/vizro-core/docs/pages/user-guides/graph.md +++ b/vizro-core/docs/pages/user-guides/graph.md @@ -75,13 +75,13 @@ To add a [`Graph`][vizro.models.Graph] to your page, do the following: In the Python example we directly inserted the pandas DataFrame `df` into `figure=px.scatter_matrix(df, ...)`. This is [one way to supply data to a chart](data.md#supply-directly). For the YAML version, we [refer to the data source by name](data.md#reference-by-name) as `data_frame: iris`. For a full explanation of the different methods you can use to send data to your dashboard, see [our guide to using data in Vizro](data.md). -!!! info "Vizro automatically sets the plotly default template" - - When importing Vizro, we automatically set the `plotly` [default template](https://plotly.com/python/templates/#specifying-a-default-themes) to - a custom designed template. In case you would like to set the default back, simply run - ```py - import plotly.io as pio - pio.templates.default = "plotly" - ``` - or enter your desired template into any `plotly.express` chart as `template="plotly"` on a case-by-case basis. - Note that we do not recommend the above steps for use in dashboards, as other templates will look out-of-sync with overall dashboard design. +## Plotly default template + +When importing Vizro, we automatically set the `plotly` [default template](https://plotly.com/python/templates/#specifying-a-default-themes) to a custom designed template. If you want to reset the default, run the following: + +```py +import plotly.io as pio +pio.templates.default = "plotly" +``` + +Alternatively, enter your desired template into any `plotly.express` chart as `template="plotly"` on a case-by-case basis. Note that we do not recommend the above steps for use in dashboards, as other templates will look out-of-sync with our overall dashboard design. diff --git a/vizro-core/docs/pages/user-guides/pages.md b/vizro-core/docs/pages/user-guides/pages.md index 695f6945d..3f9971d48 100644 --- a/vizro-core/docs/pages/user-guides/pages.md +++ b/vizro-core/docs/pages/user-guides/pages.md @@ -9,16 +9,13 @@ The [`Dashboard`][vizro.models.Dashboard] model accepts the `pages` argument, wh A [`Page`][vizro.models.Page] is split up into four main containers: -1. The **navigation container** where you can customize your `navigation` (see [Dashboard](dashboard.md) and [Navigation](navigation.md) for more information) +1. The **navigation container** where you can customize your `navigation` (see [Dashboard](dashboard.md) and [Navigation](navigation.md) for more information). Note that the navigation container needs to be configured via the Dashboard. 2. The **control container** where you can add your `controls` (see [Filters](filters.md) or [Parameters](parameters.md)) to interact with the dashboard 3. The **page header** that contains the page title and the theme toggle switch button 4. The **component container** where you can add your [components](components.md) to visualize your data ![Page Container](../../assets/user_guides/pages/page_containers.png) -!!! note - Note that the navigation container needs to be configured via the Dashboard. - To create and add a page to your dashboard, do the following steps: 1. Set a `title` for your [`Page`][vizro.models.Page] @@ -88,14 +85,9 @@ To create and add a page to your dashboard, do the following steps: [Page]: ../../assets/user_guides/pages/page_sunburst.png -!!! note - - Note that an accordion page selector is automatically added to your dashboard in the top-left of the control container. - This accordion allows navigating through the different pages. - - The accordion page selector will not be added if your dashboard consists of only one page. +An accordion page selector is automatically added to your dashboard in the top-left of the control container for through the different pages. It will not be added if your dashboard consists of only one page. - You can additionally navigate through the different pages by going directly to the relevant page URL (more details in next section). +You can additionally navigate through the different pages by going directly to the relevant page URL (more details in next section). ## Customize the page URL From f099eb51a3fe400554940dbfbc1989f5d98744df Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 3 Jul 2024 16:55:47 +0100 Subject: [PATCH 03/14] Update install.md --- vizro-ai/docs/pages/user-guides/install.md | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/vizro-ai/docs/pages/user-guides/install.md b/vizro-ai/docs/pages/user-guides/install.md index 53dc7e923..6b1053524 100644 --- a/vizro-ai/docs/pages/user-guides/install.md +++ b/vizro-ai/docs/pages/user-guides/install.md @@ -39,9 +39,7 @@ Use of Vizro-AI requires the use of a large language model. At present, we only To use OpenAI with Vizro-AI you need an API key, which you can get by [creating an OpenAI account if you don't already have one](https://platform.openai.com/account/api-keys). -!!! note - - We recommend that you consult the [third-party API key section of the disclaimer documentation](../explanation/disclaimer.md) documentation. +We recommend that you consult the [third-party API key section of the disclaimer documentation](../explanation/disclaimer.md) documentation. There are two common ways to set up the API key in a development environment. @@ -125,12 +123,10 @@ You should see a return output of the form `x.y.z`. ## Upgrade +Check the [release notes](https://github.com/mckinsey/vizro/blob/main/vizro-ai/CHANGELOG.md) for any notable breaking changes before migrating an existing project. + To change the version of Vizro-AI installed: ```bash pip install -U vizro_ai ``` - -!!! tip Check the Vizro-AI release notes - - To upgrade safely, check the [release notes](https://github.com/mckinsey/vizro/blob/main/vizro-ai/CHANGELOG.md) for any notable breaking changes before migrating an existing project. From 1f24d527286f9727a85cedf0fe77a28987b1a3df Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Wed, 3 Jul 2024 17:15:32 +0100 Subject: [PATCH 04/14] changelogs --- ...3_171515_jo_stichbury_admonition_review.md | 48 +++++++++++++++++++ ...3_171525_jo_stichbury_admonition_review.md | 48 +++++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 vizro-ai/changelog.d/20240703_171515_jo_stichbury_admonition_review.md create mode 100644 vizro-core/changelog.d/20240703_171525_jo_stichbury_admonition_review.md diff --git a/vizro-ai/changelog.d/20240703_171515_jo_stichbury_admonition_review.md b/vizro-ai/changelog.d/20240703_171515_jo_stichbury_admonition_review.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-ai/changelog.d/20240703_171515_jo_stichbury_admonition_review.md @@ -0,0 +1,48 @@ + + + + + + + + + diff --git a/vizro-core/changelog.d/20240703_171525_jo_stichbury_admonition_review.md b/vizro-core/changelog.d/20240703_171525_jo_stichbury_admonition_review.md new file mode 100644 index 000000000..f1f65e73c --- /dev/null +++ b/vizro-core/changelog.d/20240703_171525_jo_stichbury_admonition_review.md @@ -0,0 +1,48 @@ + + + + + + + + + From 207a7b87d89a7cc598b0c8b630a7a328686dc021 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 14:43:49 +0100 Subject: [PATCH 05/14] Update vizro-core/docs/pages/user-guides/assets.md Co-authored-by: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> --- vizro-core/docs/pages/user-guides/assets.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/vizro-core/docs/pages/user-guides/assets.md b/vizro-core/docs/pages/user-guides/assets.md index 451a1e7e8..c56778833 100644 --- a/vizro-core/docs/pages/user-guides/assets.md +++ b/vizro-core/docs/pages/user-guides/assets.md @@ -268,8 +268,8 @@ It's essential to understand the relationship between the targeted CSS class or CSS properties will be applied with the last served file taking precedence. The order of serving is: - 1. Dash built-in stylesheets - 2. Vizro built-in stylesheets - 3. User assets folder stylesheets +1. Dash built-in stylesheets +2. Vizro built-in stylesheets +3. User assets folder stylesheets Within each of these categories, individual files are served in alphanumeric order. From 1cf35dc28d3fb1553b565749c2fa7931a882bac1 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 14:44:03 +0100 Subject: [PATCH 06/14] Update vizro-core/docs/pages/user-guides/custom-charts.md Co-authored-by: Li Nguyen <90609403+huong-li-nguyen@users.noreply.github.com> --- vizro-core/docs/pages/user-guides/custom-charts.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/custom-charts.md b/vizro-core/docs/pages/user-guides/custom-charts.md index e4bee2ab0..b93ebb359 100644 --- a/vizro-core/docs/pages/user-guides/custom-charts.md +++ b/vizro-core/docs/pages/user-guides/custom-charts.md @@ -34,7 +34,7 @@ Building on the above, there are several routes one can take. The following exam To alter the data in the `data_frame` argument, consider using a [Filter](filters.md) or [parametrized data loading](data.md/#parametrize-data-loading) and [dynamic data](data.md/#dynamic-data). The `data_frame` argument input to a custom chart contains the data **after** filters and parameters have been applied. -Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any extra configuration. We will showcase both possibilities in the following examples. In particular the `Parameters` in combination with custom charts can be highly versatile in achieving custom functionality. +Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any extra configuration. We will showcase both possibilities in the following examples. ## Enhanced `plotly.express` chart with reference line From 523588749318c847e21b3cec4722628acf1dec6c Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 14:54:38 +0100 Subject: [PATCH 07/14] Update actions.md --- vizro-core/docs/pages/user-guides/actions.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/actions.md b/vizro-core/docs/pages/user-guides/actions.md index 93abc8bf0..7b21a207c 100644 --- a/vizro-core/docs/pages/user-guides/actions.md +++ b/vizro-core/docs/pages/user-guides/actions.md @@ -15,7 +15,9 @@ There are already a few action functions you can reuse: To attach an action to a component, you must enter the [`Action`][vizro.models.Action] model into the component's `action` argument. You can then add a desired pre-defined action function into the `function` argument of the [`Action`][vizro.models.Action]. -Currently each component has one pre-defined trigger property. A trigger property is an attribute of the component that triggers a configured action (for example, for the `Button` it is `n_click`). +??? note "Note on `Trigger`" + + Currently each component has one pre-defined trigger property. A trigger property is an attribute of the component that triggers a configured action (for example, for the `Button` it is `n_click`). The below sections are guides on how to use pre-defined action functions. From 8b1f8bcd1d252d4c48c296c64a247765815607ef Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Mon, 8 Jul 2024 13:55:01 +0000 Subject: [PATCH 08/14] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/docs/pages/user-guides/actions.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/actions.md b/vizro-core/docs/pages/user-guides/actions.md index 7b21a207c..00514c1fc 100644 --- a/vizro-core/docs/pages/user-guides/actions.md +++ b/vizro-core/docs/pages/user-guides/actions.md @@ -16,7 +16,7 @@ To attach an action to a component, you must enter the [`Action`][vizro.models.A add a desired pre-defined action function into the `function` argument of the [`Action`][vizro.models.Action]. ??? note "Note on `Trigger`" - + Currently each component has one pre-defined trigger property. A trigger property is an attribute of the component that triggers a configured action (for example, for the `Button` it is `n_click`). The below sections are guides on how to use pre-defined action functions. From 4a3c16a5efcc62dc3fae14b72302260a5a3892ba Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 15:13:05 +0100 Subject: [PATCH 09/14] Update run.md --- vizro-core/docs/pages/user-guides/run.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index f8a45fbf1..9f72de2ab 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -77,9 +77,9 @@ The dashboard application can be launched in a Jupyter environment in `inline`, - you can specify `jupyter_mode="external"` and a link will be displayed to direct you to the localhost where the dashboard is running. - you can use tab mode by `jupyter_mode="tab"` to automatically open the app in a new browser -### Reloading and debugging +??? note "Reloading and debugging" -Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. + Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. ## Gunicorn From a3448d156d54bd3e5dded236dd395672388cbf25 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 15:13:54 +0100 Subject: [PATCH 10/14] Update run.md --- vizro-core/docs/pages/user-guides/run.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index 9f72de2ab..c734aa925 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -77,7 +77,7 @@ The dashboard application can be launched in a Jupyter environment in `inline`, - you can specify `jupyter_mode="external"` and a link will be displayed to direct you to the localhost where the dashboard is running. - you can use tab mode by `jupyter_mode="tab"` to automatically open the app in a new browser -??? note "Reloading and debugging" +!!! note "Reloading and debugging" Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. From d8791cfe86e1347a5910f0af7a5e50ef239a4229 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Mon, 8 Jul 2024 15:15:42 +0100 Subject: [PATCH 11/14] Update custom-charts.md --- vizro-core/docs/pages/user-guides/custom-charts.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/custom-charts.md b/vizro-core/docs/pages/user-guides/custom-charts.md index b93ebb359..971a54725 100644 --- a/vizro-core/docs/pages/user-guides/custom-charts.md +++ b/vizro-core/docs/pages/user-guides/custom-charts.md @@ -34,7 +34,8 @@ Building on the above, there are several routes one can take. The following exam To alter the data in the `data_frame` argument, consider using a [Filter](filters.md) or [parametrized data loading](data.md/#parametrize-data-loading) and [dynamic data](data.md/#dynamic-data). The `data_frame` argument input to a custom chart contains the data **after** filters and parameters have been applied. -Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any extra configuration. We will showcase both possibilities in the following examples. +!!! note + Custom charts can be targeted by [Filters](filters.md) or [Parameters](parameters.md) without any extra configuration. We will showcase both possibilities in the following examples. ## Enhanced `plotly.express` chart with reference line From 37efb869a51d61045d70a7190776323ca65f2183 Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Tue, 9 Jul 2024 12:25:33 +0100 Subject: [PATCH 12/14] Update run.md --- vizro-core/docs/pages/user-guides/run.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index c734aa925..541553424 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -79,7 +79,10 @@ The dashboard application can be launched in a Jupyter environment in `inline`, !!! note "Reloading and debugging" - Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, you must restart the entire Jupyter kernel to reload the dashboard and reflect changes in the dashboard configuration. + Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, there are two methods to reload the dashboard: + + * Restart the Jupyter kernel and re-run your notebook. + * Add a cell containing `from vizro import Vizro; Vizro._reset()` to the top of your notebook and re-rerun it. There is no need to restart the Jupyter kernel. ## Gunicorn From 8d860766b9a271ed7acc0123a23cbbb5ba36fc31 Mon Sep 17 00:00:00 2001 From: "pre-commit-ci[bot]" <66853113+pre-commit-ci[bot]@users.noreply.github.com> Date: Tue, 9 Jul 2024 11:26:07 +0000 Subject: [PATCH 13/14] [pre-commit.ci] auto fixes from pre-commit.com hooks for more information, see https://pre-commit.ci --- vizro-core/docs/pages/user-guides/run.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index 541553424..99ba85465 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -80,7 +80,7 @@ The dashboard application can be launched in a Jupyter environment in `inline`, !!! note "Reloading and debugging" Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, there are two methods to reload the dashboard: - + * Restart the Jupyter kernel and re-run your notebook. * Add a cell containing `from vizro import Vizro; Vizro._reset()` to the top of your notebook and re-rerun it. There is no need to restart the Jupyter kernel. From fa121301082985d5c0f822d8cfb0d76583fef96a Mon Sep 17 00:00:00 2001 From: Jo Stichbury Date: Tue, 9 Jul 2024 12:37:40 +0100 Subject: [PATCH 14/14] Update run.md --- vizro-core/docs/pages/user-guides/run.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/vizro-core/docs/pages/user-guides/run.md b/vizro-core/docs/pages/user-guides/run.md index 99ba85465..11f2236c1 100644 --- a/vizro-core/docs/pages/user-guides/run.md +++ b/vizro-core/docs/pages/user-guides/run.md @@ -82,7 +82,7 @@ The dashboard application can be launched in a Jupyter environment in `inline`, Code reloading and hot reloading do not work within a Jupyter Notebook. Instead, there are two methods to reload the dashboard: * Restart the Jupyter kernel and re-run your notebook. - * Add a cell containing `from vizro import Vizro; Vizro._reset()` to the top of your notebook and re-rerun it. There is no need to restart the Jupyter kernel. + * Add a cell containing `from vizro import Vizro; Vizro._reset()` to the top of your notebook and re-run it. With this method, there is no need to restart the Jupyter kernel. ## Gunicorn