From 80e620b85f9d2d6c591dc84ddeb2b245c7b7a32b Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Tue, 19 Dec 2023 16:49:12 +0100 Subject: [PATCH 1/3] initial poc for enabling tiles titles --- .../src/vizro/models/_components/graph.py | 34 +++++++++++++++---- 1 file changed, 28 insertions(+), 6 deletions(-) diff --git a/vizro-core/src/vizro/models/_components/graph.py b/vizro-core/src/vizro/models/_components/graph.py index 40200dd52..8e985919a 100644 --- a/vizro-core/src/vizro/models/_components/graph.py +++ b/vizro-core/src/vizro/models/_components/graph.py @@ -1,7 +1,7 @@ import logging from typing import List, Literal -from dash import ctx, dcc +from dash import ctx, dcc, html from dash.exceptions import MissingCallbackContextException from plotly import graph_objects as go @@ -34,6 +34,7 @@ class Graph(VizroBaseModel): type: Literal["graph"] = "graph" figure: CapturedCallable = Field(..., import_path=px) actions: List[Action] = [] + _title: str = PrivateAttr() # Component properties for actions and interactions _output_property: str = PrivateAttr("figure") @@ -70,14 +71,25 @@ def __getitem__(self, arg_name: str): return self.type return self.figure[arg_name] + + def _set_title(self): + if "title" in self.figure._CapturedCallable__bound_arguments: + graph_title = self.figure._CapturedCallable__bound_arguments["title"] + self._title = graph_title + else: + self._title = None + @_log_call + def pre_build(self): + self._set_title() + self.figure._CapturedCallable__bound_arguments["title"] = "" + @_log_call def build(self): # The empty figure here is just a placeholder designed to be replaced by the actual figure when the filters # etc. are applied. It only appears on the screen for a brief instant, but we need to make sure it's # transparent and has no axes so it doesn't draw anything on the screen which would flicker away when the # graph callback is executed to make the dcc.Loading icon appear. - return dcc.Loading( - dcc.Graph( + graph = dcc.Graph( id=self.id, figure=go.Figure( layout={ @@ -93,10 +105,20 @@ def build(self): "responsive": True, }, className="chart_container", - ), - color="grey", - parent_className="loading-container", + ) + + graph_div = html.Div( + children=[ + html.P(self._title) if self._title else html.P(hidden=True), + dcc.Loading( + graph, + color="grey", + parent_className="loading-container", + ) + ], + style={"height": "96%"} ) + return graph_div @staticmethod def _update_theme(fig: go.Figure, theme_selector: bool): From e98b4a3ef64d429417fa1a2d9d59985c7c0be6ed Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Wed, 20 Dec 2023 13:44:10 +0100 Subject: [PATCH 2/3] adding css for tile title --- .../src/vizro/models/_components/graph.py | 17 +++++++---------- vizro-core/src/vizro/static/css/layout.css | 5 +++++ 2 files changed, 12 insertions(+), 10 deletions(-) diff --git a/vizro-core/src/vizro/models/_components/graph.py b/vizro-core/src/vizro/models/_components/graph.py index 8e985919a..5e64a21f1 100644 --- a/vizro-core/src/vizro/models/_components/graph.py +++ b/vizro-core/src/vizro/models/_components/graph.py @@ -71,17 +71,14 @@ def __getitem__(self, arg_name: str): return self.type return self.figure[arg_name] - - def _set_title(self): - if "title" in self.figure._CapturedCallable__bound_arguments: - graph_title = self.figure._CapturedCallable__bound_arguments["title"] - self._title = graph_title - else: - self._title = None @_log_call def pre_build(self): - self._set_title() - self.figure._CapturedCallable__bound_arguments["title"] = "" + try: + self._title = self.figure._CapturedCallable__bound_arguments["title"] + self.figure._CapturedCallable__bound_arguments["title"] = None + except KeyError: + self._title = None + @_log_call def build(self): @@ -109,7 +106,7 @@ def build(self): graph_div = html.Div( children=[ - html.P(self._title) if self._title else html.P(hidden=True), + html.P(self._title, className="tile-title"), dcc.Loading( graph, color="grey", diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 5558cd2f5..76c26cf66 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -156,3 +156,8 @@ div.dashboard_container .custom-tooltip { text-wrap: wrap; white-space: pre-wrap; } + +.tile-title { + font-size: 16px; + color: var(--text-primary); +} \ No newline at end of file From a97939b6d8e2a2164ef300caf65b115545d96c47 Mon Sep 17 00:00:00 2001 From: nadijagraca Date: Wed, 20 Dec 2023 14:34:15 +0100 Subject: [PATCH 3/3] adding styling to tile title --- .../src/vizro/models/_components/graph.py | 40 +++++++++---------- vizro-core/src/vizro/static/css/layout.css | 8 +++- 2 files changed, 25 insertions(+), 23 deletions(-) diff --git a/vizro-core/src/vizro/models/_components/graph.py b/vizro-core/src/vizro/models/_components/graph.py index 5e64a21f1..0638eed3e 100644 --- a/vizro-core/src/vizro/models/_components/graph.py +++ b/vizro-core/src/vizro/models/_components/graph.py @@ -79,41 +79,39 @@ def pre_build(self): except KeyError: self._title = None - @_log_call def build(self): # The empty figure here is just a placeholder designed to be replaced by the actual figure when the filters # etc. are applied. It only appears on the screen for a brief instant, but we need to make sure it's # transparent and has no axes so it doesn't draw anything on the screen which would flicker away when the # graph callback is executed to make the dcc.Loading icon appear. - graph = dcc.Graph( - id=self.id, - figure=go.Figure( - layout={ - "paper_bgcolor": "rgba(0,0,0,0)", - "plot_bgcolor": "rgba(0,0,0,0)", - "xaxis": {"visible": False}, - "yaxis": {"visible": False}, - } - ), - config={ - "autosizable": True, - "frameMargins": 0, - "responsive": True, - }, - className="chart_container", - ) graph_div = html.Div( children=[ html.P(self._title, className="tile-title"), dcc.Loading( - graph, + dcc.Graph( + id=self.id, + figure=go.Figure( + layout={ + "paper_bgcolor": "rgba(0,0,0,0)", + "plot_bgcolor": "rgba(0,0,0,0)", + "xaxis": {"visible": False}, + "yaxis": {"visible": False}, + } + ), + config={ + "autosizable": True, + "frameMargins": 0, + "responsive": True, + }, + className="chart_container", + ), color="grey", parent_className="loading-container", - ) + ), ], - style={"height": "96%"} + style={"height": "96%"}, # inline style to be removed ) return graph_div diff --git a/vizro-core/src/vizro/static/css/layout.css b/vizro-core/src/vizro/static/css/layout.css index 76c26cf66..36aa6f8f1 100644 --- a/vizro-core/src/vizro/static/css/layout.css +++ b/vizro-core/src/vizro/static/css/layout.css @@ -158,6 +158,10 @@ div.dashboard_container .custom-tooltip { } .tile-title { - font-size: 16px; + font-size: 20px; color: var(--text-primary); -} \ No newline at end of file + opacity: 0.85; + font-weight: normal; + white-space: pre; + padding-left: 80px; +}