[Bug] Fix flickering scroll bar and increase lower bound for plotly (…

…#984)
mckinsey · Feb 4, 2025 · f8db2d9 · f8db2d9
1 parent ec2170f
commit f8db2d9
Show file tree

Hide file tree

Showing 12 changed files with 101 additions and 34 deletions.
diff --git a/vizro-core/changelog.d/20250203_130654_huong_li_nguyen_check_templates_plotly6.md b/vizro-core/changelog.d/20250203_130654_huong_li_nguyen_check_templates_plotly6.md
@@ -0,0 +1,48 @@
+<!--
+A new scriv changelog fragment.
+
+Uncomment the section that is right (remove the HTML comment wrapper).
+-->
+
+<!--
+### Highlights ✨
+
+- A bullet item for the Highlights ✨ category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Removed
+
+- A bullet item for the Removed category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+<!--
+### Added
+
+- A bullet item for the Added category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Changed
+
+- Increase lower bound for `plotly` to `plotly>=5.24.0`. ([#984](https://github.com/mckinsey/vizro/pull/984))
+
+
+<!--
+### Deprecated
+
+- A bullet item for the Deprecated category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
+
+### Fixed
+
+- Fix flickering scroll bars when using new Plotly map figures with `plotly==6.0.0`. ([#984](https://github.com/mckinsey/vizro/pull/984))
+
+
+<!--
+### Security
+
+- A bullet item for the Security category with a link to the relevant PR at the end of your entry, e.g. Enable feature XXX. ([#1](https://github.com/mckinsey/vizro/pull/1))
+
+-->
diff --git a/vizro-core/examples/scratch_dev/app.py b/vizro-core/examples/scratch_dev/app.py
@@ -3,27 +3,42 @@
 import vizro.models as vm
 import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.actions import export_data
 
-df = px.data.iris()
 
+carshare = px.data.carshare()
 
-# Create a layout with five rows and four columns. The KPI card is positioned in the first cell, while the remaining cells are empty.
-page = vm.Page(
-    title="Page 1",
+page_one = vm.Page(
+    title="Scatter map",
     components=[
-        vm.Graph(figure=px.bar(df, x="sepal_width", y="sepal_length")),
-        vm.Button(
-            text="Export data",
-            actions=[
-                vm.Action(function=export_data()),
-                vm.Action(function=export_data()),
-            ],
+        vm.Graph(
+            figure=px.scatter_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+                color="peak_hour",
+                size="car_hours",
+                color_continuous_scale=px.colors.cyclical.IceFire,
+                size_max=15,
+                zoom=10,
+            )
         ),
     ],
 )
 
-dashboard = vm.Dashboard(pages=[page])
+page_four = vm.Page(
+    title="Density map",
+    components=[
+        vm.Graph(
+            figure=px.density_map(
+                carshare,
+                lat="centroid_lat",
+                lon="centroid_lon",
+            )
+        ),
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page_one, page_four])
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()
diff --git a/vizro-core/examples/visual-vocabulary/requirements.in b/vizro-core/examples/visual-vocabulary/requirements.in
@@ -2,6 +2,6 @@
 autoflake==2.3.1
 black==24.4.2
 isort==5.13.2
-plotly==5.24.1
+plotly==6.0.0
 vizro==0.1.28
 gunicorn
diff --git a/vizro-core/examples/visual-vocabulary/requirements.txt b/vizro-core/examples/visual-vocabulary/requirements.txt
@@ -50,9 +50,7 @@ gunicorn==23.0.0
 idna==3.10
     # via requests
 importlib-metadata==8.5.0
-    # via
-    #   dash
-    #   flask
+    # via dash
 isort==5.13.2
     # via -r requirements.in
 itsdangerous==2.2.0
@@ -65,6 +63,8 @@ markupsafe==3.0.2
     #   werkzeug
 mypy-extensions==1.0.0
     # via black
+narwhals==1.25.0
+    # via plotly
 nest-asyncio==1.6.0
     # via dash
 numpy==2.0.2
@@ -80,7 +80,7 @@ pathspec==0.12.1
     # via black
 platformdirs==4.2.2
     # via black
-plotly==5.24.1
+plotly==6.0.0
     # via
     #   -r requirements.in
     #   dash
@@ -105,15 +105,8 @@ six==1.16.0
     # via
     #   python-dateutil
     #   retrying
-tenacity==9.0.0
-    # via plotly
-tomli==2.1.0
-    # via
-    #   autoflake
-    #   black
 typing-extensions==4.12.2
     # via
-    #   black
     #   dash
     #   pydantic
     #   pydantic-core

diff --git a/vizro-core/hatch.toml b/vizro-core/hatch.toml
@@ -106,7 +106,7 @@ dependencies = [
   "autoflake==2.3.1",
   "black==24.4.2",
   "isort==5.13.2",
-  "plotly==5.24.1"  # to leverage new MapLibre features in visual-vocabulary
+  "plotly==6.0.0"  # to leverage new MapLibre features in visual-vocabulary
 ]
 installer = "uv"
 scripts = {example = "cd examples/{args:scratch_dev}; python app.py"}
@@ -121,7 +121,7 @@ VIZRO_LOG_LEVEL = "DEBUG"
 extra-dependencies = [
   "pydantic==2.9.0",
   "dash==2.18.0",
-  "plotly==5.12.0",
+  "plotly==5.24.0",
   "pandas==2.0.0",
   "numpy==1.23.0"  # Need numpy<2 to work with pandas==2.0.0. See https://stackoverflow.com/questions/78634235/.
 ]

diff --git a/vizro-core/pyproject.toml b/vizro-core/pyproject.toml
@@ -19,7 +19,7 @@ dependencies = [
   "dash_bootstrap_components",
   "dash-ag-grid>=31.0.0",
   "pandas>=2",
-  "plotly>=5.12.0",
+  "plotly>=5.24.0",
   "pydantic>=2.9.0",  # must be synced with pre-commit mypy hook manually
   "dash_mantine_components~=0.15.1",
   "flask_caching>=2",

diff --git a/vizro-core/src/vizro/_themes/generate_plotly_templates.py b/vizro-core/src/vizro/_themes/generate_plotly_templates.py
@@ -94,6 +94,7 @@ def generate_json_template(extracted_values: dict[str, str]) -> go.layout.Templa
         yaxis_linecolor=AXIS_COLOR,
         yaxis_gridcolor=GRID_COLOR,
         annotationdefaults_font_color=FONT_COLOR_PRIMARY,
+        map_style="carto-darkmatter",
     )
     template.data.bar = [go.Bar(marker_line_color=BG_COLOR)]
     template.data.waterfall = [

diff --git a/vizro-core/src/vizro/_themes/vizro_dark.json b/vizro-core/src/vizro/_themes/vizro_dark.json
@@ -225,6 +225,9 @@
         "gridcolor": "rgba(255, 255, 255, 0.1019607843)",
         "linecolor": "rgba(255, 255, 255, 0.3019607843)"
       }
+    },
+    "map": {
+      "style": "carto-darkmatter"
     }
   },
   "data": {

diff --git a/vizro-core/src/vizro/_themes/vizro_light.json b/vizro-core/src/vizro/_themes/vizro_light.json
@@ -225,6 +225,9 @@
         "gridcolor": "rgba(20, 23, 33, 0.1019607843)",
         "linecolor": "rgba(20, 23, 33, 0.3019607843)"
       }
+    },
+    "map": {
+      "style": "carto-darkmatter"
     }
   },
   "data": {

diff --git a/vizro-core/src/vizro/static/css/tiles.css b/vizro-core/src/vizro/static/css/tiles.css
@@ -18,3 +18,13 @@
 .figure-footer a {
   font-size: inherit;
 }
+
+/* Improve footnote of plotly maps */
+.maplibregl-ctrl {
+  display: flex;
+}
+
+/* Fixes flickering scroll-bar when using new plotly maps: https://github.com/mckinsey/vizro/pull/984 */
+.js-plotly-plot {
+  overflow: hidden;
+}
diff --git a/vizro-core/tests/integration/test_examples.py b/vizro-core/tests/integration/test_examples.py
@@ -42,8 +42,6 @@ def dashboard(request, monkeypatch):
 # Ignore as it doesn't affect the test run
 @pytest.mark.filterwarnings("ignore::pytest.PytestUnhandledThreadExceptionWarning")
 @pytest.mark.filterwarnings("ignore:unclosed file:ResourceWarning")
-# Ignore for lower bounds because of plotly==5.12.0
-@pytest.mark.filterwarnings("ignore:The behavior of DatetimeProperties.to_pydatetime is deprecated:FutureWarning")
 # The `features` examples do add_type, which ideally we would clean up afterwards to restore vizro.models to
 # its previous state. Since we don't currently do this, `hatch run test` fails.
 # This is difficult to fix fully by un-importing vizro.models though, since we use `import vizro.models as vm` - see

diff --git a/vizro-core/tests/unit/vizro/models/_components/test_graph.py b/vizro-core/tests/unit/vizro/models/_components/test_graph.py
@@ -98,10 +98,6 @@ def test_getitem_unknown_args(self, standard_px_chart):
         with pytest.raises(KeyError):
             graph["unknown_args"]
 
-    # Ignore for lower bounds because of plotly==5.12.0
-    @pytest.mark.filterwarnings(
-        "ignore:.*The behavior of DatetimeProperties.to_pydatetime is deprecated.*:FutureWarning"
-    )
     @pytest.mark.parametrize(
         "title, margin_t",
         [(None, None), ("Graph with title", 64), ("Graph with title..<br> and subtitle", 64)],