Add theming for plotly figures (#165)

tests/test_table_plotter.py

@@ -2,6 +2,7 @@
 import dash
 
 from webviz_config.common_cache import CACHE
+from webviz_config.themes import default_theme
 from webviz_config.plugins import _table_plotter
 
 
@@ -10,7 +11,7 @@ def test_table_plotter(dash_duo):
     app = dash.Dash(__name__)
     app.config.suppress_callback_exceptions = True
     CACHE.init_app(app.server)
-
+    app.webviz_settings = {"theme": default_theme}
     csv_file = "./tests/data/example_data.csv"
     page = _table_plotter.TablePlotter(app, csv_file)
     app.layout = page.layout
@@ -53,7 +54,7 @@ def test_table_plotter_filter(dash_duo):
     app = dash.Dash(__name__)
     app.config.suppress_callback_exceptions = True
     CACHE.init_app(app.server)
-
+    app.webviz_settings = {"theme": default_theme}
     csv_file = "./tests/data/example_data.csv"
     page = _table_plotter.TablePlotter(app, csv_file, filter_cols=["Well"])
     app.layout = page.layout
@@ -98,7 +99,7 @@ def test_initialized_table_plotter(dash_duo):
     app.scripts.config.serve_locally = True
     app.config.suppress_callback_exceptions = True
     CACHE.init_app(app.server)
-
+    app.webviz_settings = {"theme": default_theme}
     csv_file = "./tests/data/example_data.csv"
     plot_options = dict(
         x="Well",

webviz_config/_theme_class.py

@@ -1,3 +1,6 @@
+import copy
+
+
 class WebvizConfigTheme:
     """Webviz config themes are all instances of this class. The only mandatory
     property is the theme name set at initialization.
@@ -41,7 +44,7 @@ def __init__(self, theme_name):
 
         self._external_stylesheets = []
         self._assets = []
-        self._plotly_layout = {}
+        self._plotly_theme = {}
 
     def adjust_csp(self, dictionary, append=True):
         """If the default CSP settings needs to be changed, this function can
@@ -69,13 +72,13 @@ def feature_policy(self):
         return self._feature_policy
 
     @property
-    def plotly_layout(self):
-        return self._plotly_layout
+    def plotly_theme(self):
+        return copy.deepcopy(self._plotly_theme)
 
-    @plotly_layout.setter
-    def plotly_layout(self, plotly_layout):
+    @plotly_theme.setter
+    def plotly_theme(self, plotly_theme):
         """Layout object of Plotly graph objects."""
-        self._plotly_layout = plotly_layout
+        self._plotly_theme = plotly_theme
 
     @property
     def external_stylesheets(self):

webviz_config/_write_script.py

@@ -22,7 +22,7 @@ def write_script(args, build_directory, template_filename, output_filename):
     configuration["csp"] = theme.csp
     configuration["feature_policy"] = theme.feature_policy
     configuration["external_stylesheets"] = theme.external_stylesheets
-    configuration["plotly_layout"] = theme.plotly_layout
+    configuration["theme"] = args.theme
 
     configuration["author"] = getpass.getuser()
     configuration["current_date"] = datetime.date.today().strftime("%Y-%m-%d")

webviz_config/plugins/_table_plotter.py

@@ -15,6 +15,7 @@
 from ..common_cache import CACHE
 
 
+# pylint: disable=too-many-instance-attributes
 class TablePlotter(WebvizPluginABC):
     """### TablePlotter
 
@@ -51,6 +52,7 @@ def __init__(
         )
         self.selector_row = f"selector-row{uuid4()}"
         self.plot_option_id = f"plot-option{uuid4()}"
+        self.plotly_theme = app.webviz_settings["theme"].plotly_theme
         self.set_callbacks(app)
 
     def set_filters(self, filter_cols):
@@ -380,7 +382,7 @@ def _update_output(*args):
                 else:
                     div_style.append(self.style_options_div_hidden)
 
-            return (plotfunc(data, **plotargs), *div_style)
+            return (plotfunc(data, template=self.plotly_theme, **plotargs), *div_style)
 
 
 @CACHE.memoize(timeout=CACHE.TIMEOUT)

webviz_config/templates/copy_data_template.py.jinja2

@@ -7,6 +7,7 @@ from pathlib import Path, PosixPath
 import dash
 
 import webviz_config
+from webviz_config.themes import installed_themes
 from webviz_config.webviz_store import WEBVIZ_STORAGE
 from webviz_config.webviz_assets import WEBVIZ_ASSETS
 from webviz_config.common_cache import CACHE
@@ -27,7 +28,7 @@ app.webviz_settings = {
     "shared_settings": webviz_config.SHARED_SETTINGS_SUBSCRIPTIONS.transformed_settings(
         {{ shared_settings }}, {{ config_folder }}, False
     ),
-    "plotly_layout": {{ plotly_layout }},
+    "theme": installed_themes["{{ theme }}"],
 }
 
 CACHE.init_app(app.server)

webviz_config/templates/webviz_template.py.jinja2

@@ -16,6 +16,7 @@ import dash_core_components as dcc
 import dash_html_components as html
 from flask_talisman import Talisman
 import webviz_config
+from webviz_config.themes import installed_themes
 from webviz_config.common_cache import CACHE
 from webviz_config.webviz_store import WEBVIZ_STORAGE
 from webviz_config.webviz_assets import WEBVIZ_ASSETS
@@ -63,7 +64,7 @@ app.webviz_settings = {
         {{ shared_settings }}, {{ config_folder }}, {{ portable }}
     ),
     "portable": {{ portable }},
-    "plotly_layout": {{ plotly_layout }},
+    "theme": installed_themes["{{ theme }}"],
 }
 
 CACHE.init_app(server)

webviz_config/themes/_default_theme.py

@@ -1,6 +1,8 @@
 import os
 import glob
 
+from plotly.io import templates
+
 from webviz_config import WebvizConfigTheme
 
 default_theme = WebvizConfigTheme(theme_name="default")  # pylint: disable=invalid-name
@@ -9,17 +11,4 @@
     os.path.join(os.path.dirname(os.path.abspath(__file__)), "default_assets", "*")
 )
 
-default_theme.plotly_layout = {
-    "paper_bgcolor": "rgba(90, 90, 90)",
-    "plot_bgcolor": "rgba(90, 90, 90)",
-    "colorway": [
-        "#14213d",
-        "#3a2d58",
-        "#69356a",
-        "#9a3a6f",
-        "#c84367",
-        "#ea5954",
-        "#fe7c37",
-        "#ffa600",
-    ],
-}
+default_theme.plotly_theme = templates["plotly"].to_plotly_json()