fix: DH-18653: migrate to plotly >= 6.0.0 (#1179)

Fixes #946 

1. Bump plotly.py to 6.0.0
2. Bump plotly.js to 3.0.0
3. Deprecate any mapbox reference
4. Remove `alignmentgroup` and `offsetgroup` in tests where they now do
not need to be set
5. Generally replaced NULL_INT and NULL_DOUBLE with a binary data form
plotly is now converting those values to in tests
6. Replaced all `title=<str>` with `title_text=<str>` as the former is
deprecated
7. Fixed some minor inconsistencies
8. Added a few e2e tests where I could to make sure migration did not
break the charts. Those images were generated on main originally.

Author: jnumainville

package-lock.json

@@ -27,7 +27,6 @@
     "update-dh-packages": "node ../../../../tools/update-dh-packages.mjs"
   },
   "devDependencies": {
-    "@types/plotly.js": "^2.12.18",
     "@types/react": "^17.0.2",
     "react": "^17.0.2",
     "typescript": "^4.5.4"

plugins/auth-keycloak/src/js/package.json

@@ -27,7 +27,7 @@ packages=find_namespace:
 install_requires =
     deephaven-core>=0.37.6
     deephaven-plugin>=0.6.0
-    plotly>=5.15.0,<6.0.0
+    plotly>=6.0.0,<7.0.0
     deephaven-plugin-utilities>=0.0.2
     typing_extensions;python_version<'3.11'
     jpy

plugins/plotly-express/setup.cfg

@@ -43,6 +43,9 @@
     line_mapbox,
     density_heatmap,
     indicator,
+    scatter_map,
+    density_map,
+    line_map,
 )
 
 from .data import data_generators

plugins/plotly-express/src/deephaven/plot/express/__init__.py

@@ -6,7 +6,7 @@
 from pandas import DataFrame
 import plotly.graph_objects as go
 from plotly.graph_objects import Figure
-from plotly.validators.heatmap import ColorscaleValidator
+from plotly.validator_cache import ValidatorCache
 
 # attach a prefix to the number format so that we can identify it as the GWT Java NumberFormat syntax
 # https://www.gwtproject.org/javadoc/latest/com/google/gwt/i18n/client/NumberFormat.html
@@ -57,10 +57,10 @@ def draw_finance(
         data.append(
             go_func(
                 x=data_frame[x_f],
-                open=data_frame[open],
-                high=data_frame[high],
-                low=data_frame[low],
-                close=data_frame[close],
+                open=data_frame[o],
+                high=data_frame[h],
+                low=data_frame[l],
+                close=data_frame[c],
             )
         )
 
@@ -185,7 +185,7 @@ def draw_density_heatmap(
 
     range_color_list = range_color or [None, None]
 
-    colorscale_validator = ColorscaleValidator("colorscale", "draw_density_heatmap")
+    colorscale_validator = ValidatorCache.get_validator("heatmap", "colorscale")
 
     coloraxis_layout = dict(
         colorscale=colorscale_validator.validate_coerce(color_continuous_scale),
@@ -200,7 +200,7 @@ def draw_density_heatmap(
 
     heatmap.update_layout(
         coloraxis1=coloraxis_layout,
-        title=title,
+        title_text=title,
         template=template,
         xaxis_title=x,
         yaxis_title=y,
@@ -276,7 +276,7 @@ def draw_indicator(
         fig.update_traces(delta_reference=data_frame[reference][0])
 
     if layout_title:
-        fig.update_layout(title=layout_title)
+        fig.update_layout(title_text=layout_title)
 
     if title:
         # This is the title on the indicator trace. This is where it should go by default.

plugins/plotly-express/src/deephaven/plot/express/deephaven_figure/custom_draw.py

@@ -8,6 +8,15 @@
 from .pie import pie
 from ._layer import layer
 from .subplots import make_subplots
-from .maps import scatter_geo, scatter_mapbox, density_mapbox, line_geo, line_mapbox
+from .maps import (
+    scatter_geo,
+    scatter_mapbox,
+    density_mapbox,
+    line_geo,
+    line_mapbox,
+    scatter_map,
+    density_map,
+    line_map,
+)
 from .heatmap import density_heatmap
 from .indicator import indicator

plugins/plotly-express/src/deephaven/plot/express/plots/__init__.py

@@ -1,6 +1,7 @@
 from __future__ import annotations
 
 from typing import Callable
+import warnings
 
 from plotly import express as px
 
@@ -159,7 +160,55 @@ def scatter_geo(
     return process_args(args, {"scatter"}, px_func=px.scatter_geo)
 
 
-def scatter_mapbox(
+def scatter_mapbox(*args, **kwargs) -> DeephavenFigure:
+    """
+    c
+    """
+    warnings.warn(
+        "scatter_mapbox is deprecated and will be removed in a future release. Use scatter_map instead.",
+        DeprecationWarning,
+        stacklevel=2,
+    )
+
+    if "style_mapbox" in kwargs:
+        kwargs["map_style"] = kwargs.pop("style_mapbox")
+
+    return scatter_map(*args, **kwargs)
+
+
+def line_mapbox(*args, **kwargs) -> DeephavenFigure:
+    """
+    Deprecated function. Use line_map instead.
+    """
+    warnings.warn(
+        "line_mapbox is deprecated and will be removed in a future release. Use line_map instead.",
+        DeprecationWarning,
+        stacklevel=2,
+    )
+
+    if "style_mapbox" in kwargs:
+        kwargs["map_style"] = kwargs.pop("style_mapbox")
+
+    return line_map(*args, **kwargs)
+
+
+def density_mapbox(*args, **kwargs) -> DeephavenFigure:
+    """
+    Deprecated function. Use density_map instead.
+    """
+    warnings.warn(
+        "density_mapbox is deprecated and will be removed in a future release. Use density_map instead.",
+        DeprecationWarning,
+        stacklevel=2,
+    )
+
+    if "style_mapbox" in kwargs:
+        kwargs["map_style"] = kwargs.pop("style_mapbox")
+
+    return density_map(*args, **kwargs)
+
+
+def scatter_map(
     table: PartitionableTableLike,
     lat: str | None = None,
     lon: str | None = None,
@@ -191,13 +240,13 @@ def scatter_mapbox(
     opacity: float | None = None,
     zoom: float | None = None,
     center: dict[str, float] | None = None,
-    mapbox_style: str = "open-street-map",
+    map_style: str = "open-street-map",
     title: str | None = None,
     template: str | None = None,
     unsafe_update_figure: Callable = default_callback,
 ) -> DeephavenFigure:
     """
-    Create a scatter_mapbox plot
+    Create a scatter_map plot
 
     Args:
       table: A table to pull data from.
@@ -263,7 +312,7 @@ def scatter_mapbox(
       center: A dictionary of center coordinates.
         The keys should be 'lat' and 'lon' and the values should be floats
         that represent the lat and lon of the center of the map.
-      mapbox_style: The style of the map.
+      map_style: The style of the map.
         One of 'open-street-map', 'white-bg', 'carto-positron', 'carto-darkmatter',
         and 'stamen-terrain', 'stamen-toner', 'stamen-watercolor'
       title: The title of the chart
@@ -277,11 +326,11 @@ def scatter_mapbox(
         mappings.
 
     Returns:
-        DeephavenFigure: A DeephavenFigure that contains the scatter_mapbox figure
+        DeephavenFigure: A DeephavenFigure that contains the scatter_map figure
     """
     args = locals()
 
-    return process_args(args, {"scatter"}, px_func=px.scatter_mapbox)
+    return process_args(args, {"scatter"}, px_func=px.scatter_map)
 
 
 def line_geo(
@@ -441,7 +490,7 @@ def line_geo(
     return process_args(args, {"line"}, px_func=px.line_geo)
 
 
-def line_mapbox(
+def line_map(
     table: PartitionableTableLike,
     lat: str | None = None,
     lon: str | None = None,
@@ -468,14 +517,14 @@ def line_mapbox(
     width_sequence: list[int] | None = None,
     width_map: dict[str | tuple[str], str] | None = None,
     zoom: float | None = None,
-    mapbox_style: str = "open-street-map",
+    map_style: str = "open-street-map",
     center: dict[str, float] | None = None,
     title: str | None = None,
     template: str | None = None,
     unsafe_update_figure: Callable = default_callback,
 ) -> DeephavenFigure:
     """
-    Create a line_mapbox plot
+    Create a line_map plot
 
     Args:
       table: A table to pull data from.
@@ -550,7 +599,7 @@ def line_mapbox(
       center: A dictionary of center coordinates.
         The keys should be 'lat' and 'lon' and the values should be floats
         that represent the lat and lon of the center of the map.
-      mapbox_style: The style of the map.
+      map_style: The style of the map.
         One of 'open-street-map', 'white-bg', 'carto-positron', 'carto-darkmatter',
         and 'stamen-terrain', 'stamen-toner', 'stamen-watercolor'
       title: The title of the chart
@@ -564,15 +613,15 @@ def line_mapbox(
         mappings.
 
     Returns:
-        DeephavenFigure: A DeephavenFigure that contains the line_mapbox figure
+        DeephavenFigure: A DeephavenFigure that contains the line_map figure
 
     """
     args = locals()
 
-    return process_args(args, {"line"}, px_func=px.line_mapbox)
+    return process_args(args, {"line"}, px_func=px.line_map)
 
 
-def density_mapbox(
+def density_map(
     table: TableLike,
     lat: str | None = None,
     lon: str | None = None,
@@ -586,13 +635,13 @@ def density_mapbox(
     opacity: float | None = None,
     zoom: float | None = None,
     center: dict[str, float] | None = None,
-    mapbox_style: str = "open-street-map",
+    map_style: str = "open-street-map",
     title: str | None = None,
     template: str | None = None,
     unsafe_update_figure: Callable = default_callback,
 ) -> DeephavenFigure:
     """
-    Create a density_mapbox plot
+    Create a density_map plot
 
     Args:
       table: A table to pull data from.
@@ -611,7 +660,7 @@ def density_mapbox(
       center: A dictionary of center coordinates.
         The keys should be 'lat' and 'lon' and the values should be floats
         that represent the lat and lon of the center of the map.
-      mapbox_style: The style of the map.
+      map_style: The style of the map.
         One of 'open-street-map', 'white-bg', 'carto-positron', 'carto-darkmatter',
         and 'stamen-terrain', 'stamen-toner', 'stamen-watercolor'
       title: The title of the chart
@@ -625,8 +674,8 @@ def density_mapbox(
         mappings.
 
     Returns:
-        DeephavenFigure: A DeephavenFigure that contains the density_mapbox figure
+        DeephavenFigure: A DeephavenFigure that contains the density_map figure
     """
     args = locals()
 
-    return process_args(args, set(), px_func=px.density_mapbox)
+    return process_args(args, set(), px_func=px.density_map)

plugins/plotly-express/src/deephaven/plot/express/plots/maps.py

@@ -38,10 +38,10 @@
     "update-dh-packages": "node ../../../../tools/update-dh-packages.mjs"
   },
   "devDependencies": {
-    "@deephaven/jsapi-types": "1.0.0-dev0.38.0",
+    "@deephaven/jsapi-types": "^1.0.0-dev0.39.5",
     "@deephaven/test-utils": "0.105.0",
     "@types/deep-equal": "^1.0.1",
-    "@types/plotly.js": "^2.12.18",
+    "@types/plotly.js": "^3.0.0",
     "@types/plotly.js-dist-min": "^2.3.1",
     "@types/react": "^17.0.2",
     "@types/react-plotly.js": "^2.6.0",
@@ -54,22 +54,22 @@
     "react-dom": "^17.0.2"
   },
   "dependencies": {
-    "@deephaven/chart": "0.105.0",
-    "@deephaven/components": "0.105.0",
-    "@deephaven/dashboard": "0.105.0",
-    "@deephaven/dashboard-core-plugins": "0.105.0",
-    "@deephaven/icons": "0.105.0",
-    "@deephaven/jsapi-bootstrap": "0.105.0",
-    "@deephaven/jsapi-utils": "0.105.0",
-    "@deephaven/log": "0.105.0",
-    "@deephaven/plugin": "0.105.0",
-    "@deephaven/redux": "0.105.0",
-    "@deephaven/utils": "0.105.0",
+    "@deephaven/chart": "^1.2.0",
+    "@deephaven/components": "^1.2.0",
+    "@deephaven/dashboard": "^1.2.0",
+    "@deephaven/dashboard-core-plugins": "^1.2.0",
+    "@deephaven/icons": "^1.2.0",
+    "@deephaven/jsapi-bootstrap": "1.2.0",
+    "@deephaven/jsapi-utils": "1.1.1",
+    "@deephaven/log": "1.1.0",
+    "@deephaven/plugin": "^1.2.0",
+    "@deephaven/redux": "^1.2.0",
+    "@deephaven/utils": "^1.1.0",
     "deep-equal": "^2.2.1",
     "memoizee": "^0.4.17",
     "nanoid": "^5.0.7",
-    "plotly.js": "^2.29.1",
-    "plotly.js-dist-min": "^2.29.1",
+    "plotly.js": "^3.0.0",
+    "plotly.js-dist-min": "^3.0.0",
     "react-plotly.js": "^2.4.0",
     "react-redux": "^7.2.9"
   },

plugins/plotly-express/src/js/package.json

@@ -46,6 +46,7 @@ export function PlotlyExpressChart(
       containerRef={containerRef}
       model={model}
       settings={settings}
+      // @ts-expect-error https://github.com/DefinitelyTyped/DefinitelyTyped/discussions/72099
       Plotly={Plotly}
     />
   ) : null;