[Bug] Fix title disappearance when scrolling dash_data_table

vizro-core/changelog.d/20240626_161742_petar_pejovic_fix_title_misalignment.md

@@ -0,0 +1,47 @@
+<!--
+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
+
+- A bullet item for the Changed 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))
+
+-->
+<!--
+### 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 title disappearance when scrolling dash_data_table. ([#548](https://github.com/mckinsey/vizro/pull/548))
+
+<!--
+### 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))
+
+-->

vizro-core/examples/_dev/app.py

@@ -1,70 +1,122 @@
 """Dev app to try things out."""
 
-import pandas as pd
 import vizro.models as vm
+import vizro.plotly.express as px
 from vizro import Vizro
-from vizro.figures import kpi_card, kpi_card_reference
+from vizro.tables import dash_ag_grid, dash_data_table
 
-df_kpi = pd.DataFrame(
-    {"Actual": [100, 200, 700], "Reference": [100, 300, 500], "Reference Zero": [0, 0, 0], "Category": ["A", "B", "C"]}
+df = px.data.iris()
+
+"""
+Figures legend:
+
+G - vm.Graph
+
+A - vm.AgGrid
+Ap - vm.AgGrid with pagination=True
+
+T - vm.Table
+Tp - vm.Table with pagination=True
+
+================================================================
+
+Combinations to test:
+
+1.
+G, G
+G, G
+
+2.
+G, A
+A, G
+
+3.
+G, T
+T, G
+
+4.
+G, Ap,
+Ap, G
+
+5.
+G, Tp
+Tp, G
+"""
+
+
+page_1 = vm.Page(
+    title="Title misalignment: G, G / G, G",
+    layout=vm.Layout(grid=[[0, 1], [2, 3]]),
+    components=[
+        vm.Graph(figure=px.scatter(df, title="Title Graph 1", x="sepal_width", y="sepal_length", color="species")),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 2", x="sepal_width", y="sepal_length", color="species")),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 3", x="sepal_width", y="sepal_length", color="species")),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 4", x="sepal_width", y="sepal_length", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species"),
+    ],
+)
+
+page_2 = vm.Page(
+    title="Title misalignment: G, A / A, G",
+    layout=vm.Layout(grid=[[0, 1], [2, 3]]),
+    components=[
+        vm.Graph(figure=px.scatter(df, title="Title Graph 1", x="sepal_width", y="sepal_length", color="species")),
+        vm.AgGrid(figure=dash_ag_grid(df), title="Title AgGrid 1"),
+        vm.AgGrid(figure=dash_ag_grid(df), title="Title AgGrid 2"),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 2", x="sepal_width", y="sepal_length", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species"),
+    ],
+)
+
+page_3 = vm.Page(
+    title="Title misalignment: G, T / T, G",
+    layout=vm.Layout(grid=[[0, 1], [2, 3]]),
+    components=[
+        vm.Graph(figure=px.scatter(df, title="Title Graph 1", x="sepal_width", y="sepal_length", color="species")),
+        vm.Table(figure=dash_data_table(df), title="Title Table 1"),
+        vm.Table(figure=dash_data_table(df), title="Title Table 2"),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 2", x="sepal_width", y="sepal_length", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species"),
+    ],
 )
 
-example_cards = [
-    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with value"),
-    kpi_card(data_frame=df_kpi, value_column="Actual", title="KPI with aggregation", agg_func="median"),
-    kpi_card(
-        data_frame=df_kpi,
-        value_column="Actual",
-        title="KPI with formatting",
-        value_format="${value:.2f}",
-    ),
-    kpi_card(
-        data_frame=df_kpi,
-        value_column="Actual",
-        title="KPI with icon",
-        icon="shopping_cart",
-    ),
-]
-
-example_reference_cards = [
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        title="Delta Positive",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference",
-        agg_func="median",
-        title="Delta Negative",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Actual",
-        title="Delta Zero",
-        value_format="{value:.2f}$",
-        reference_format="{delta:+.2f}$ vs. last year ({reference:.2f}$)",
-    ),
-    kpi_card_reference(
-        data_frame=df_kpi,
-        value_column="Actual",
-        reference_column="Reference Zero",
-        title="Reference Zero",
-        icon="shopping_cart",
-    ),
-]
-
-page = vm.Page(
-    title="KPI Indicators",
-    layout=vm.Layout(grid=[[0, 1, 2, 3], [4, 5, 6, 7], [-1, -1, -1, -1], [-1, -1, -1, -1]]),
-    components=[vm.Figure(figure=figure) for figure in example_cards + example_reference_cards],
-    controls=[vm.Filter(column="Category")],
+page_4 = vm.Page(
+    title="Title misalignment: G, Ap / Ap, G",
+    layout=vm.Layout(grid=[[0, 1], [2, 3]]),
+    components=[
+        vm.Graph(figure=px.scatter(df, title="Title Graph 1", x="sepal_width", y="sepal_length", color="species")),
+        vm.AgGrid(figure=dash_ag_grid(df, dashGridOptions={"pagination": True}), title="Title AgGrid 1"),
+        vm.AgGrid(figure=dash_ag_grid(df, dashGridOptions={"pagination": True}), title="Title AgGrid 2"),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 2", x="sepal_width", y="sepal_length", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species"),
+    ],
 )
 
-dashboard = vm.Dashboard(pages=[page])
+
+page_5 = vm.Page(
+    title="Title misalignment: G, Tp / Tp, G",
+    layout=vm.Layout(grid=[[0, 1], [2, 3]]),
+    components=[
+        vm.Graph(figure=px.scatter(df, title="Title Graph 1", x="sepal_width", y="sepal_length", color="species")),
+        vm.Table(figure=dash_data_table(df, page_size=10), title="Title Table 1"),
+        vm.Table(figure=dash_data_table(df, page_size=10), title="Title Table 2"),
+        vm.Graph(figure=px.scatter(df, title="Title Graph 2", x="sepal_width", y="sepal_length", color="species")),
+    ],
+    controls=[
+        vm.Filter(column="species"),
+    ],
+)
+
+dashboard = vm.Dashboard(pages=[page_1, page_2, page_3, page_4, page_5])
+
 
 if __name__ == "__main__":
     Vizro().build(dashboard).run()

vizro-core/src/vizro/models/_components/table.py

@@ -104,16 +104,13 @@ def pre_build(self):
 
     def build(self):
         return dcc.Loading(
-            children=html.Div(
-                children=[
-                    html.H3(self.title) if self.title else None,
-                    # Please see vm.AgGrid build method as to why we are returning the call with the full data here
-                    # Most of the comments may not apply to the data table, but in order to be consistent, we are
-                    # handling the build method in the exact same way here
-                    html.Div(self.__call__(), id=self.id),
-                ],
-                className="table-container",
-            ),
+            children=[
+                html.H3(self.title) if self.title else None,
+                # Please see vm.AgGrid build method as to why we are returning the call with the full data here
+                # Most of the comments may not apply to the data table, but in order to be consistent, we are
+                # handling the build method in the exact same way here
+                html.Div(self.__call__(), id=self.id, className="table-container"),
+            ],
             color="grey",
             parent_className="loading-container",
             overlay_style={"visibility": "visible", "opacity": 0.3},

vizro-core/tests/unit/vizro/models/_components/test_table.py

@@ -117,13 +117,14 @@ def test_table_build_mandatory_only(self, standard_dash_table, gapminder):
         table.pre_build()
         table = table.build()
         expected_table = dcc.Loading(
-            html.Div(
-                [
-                    None,
-                    html.Div(dash_data_table(id="__input_text_table", data_frame=gapminder)(), id="text_table"),
-                ],
-                className="table-container",
-            ),
+            children=[
+                None,
+                html.Div(
+                    dash_data_table(id="__input_text_table", data_frame=gapminder)(),
+                    id="text_table",
+                    className="table-container",
+                ),
+            ],
             color="grey",
             parent_className="loading-container",
             overlay_style={"visibility": "visible", "opacity": 0.3},
@@ -132,18 +133,39 @@ def test_table_build_mandatory_only(self, standard_dash_table, gapminder):
         assert_component_equal(table, expected_table)
 
     def test_table_build_with_underlying_id(self, dash_data_table_with_id, filter_interaction_action, gapminder):
-        table = vm.Table(id="text_table", figure=dash_data_table_with_id, actions=[filter_interaction_action])
+        table = vm.Table(id="text_table", figure=dash_data_table_with_id)
         table.pre_build()
         table = table.build()
 
         expected_table = dcc.Loading(
-            html.Div(
-                [
-                    None,
-                    html.Div(dash_data_table(id="underlying_table_id", data_frame=gapminder)(), id="text_table"),
-                ],
-                className="table-container",
-            ),
+            children=[
+                None,
+                html.Div(
+                    dash_data_table(id="underlying_table_id", data_frame=gapminder)(),
+                    id="text_table",
+                    className="table-container",
+                ),
+            ],
+            color="grey",
+            parent_className="loading-container",
+            overlay_style={"visibility": "visible", "opacity": 0.3},
+        )
+
+        assert_component_equal(table, expected_table)
+
+    def test_table_build_with_title(self, standard_dash_table, gapminder):
+        table = vm.Table(id="text_table", title="Table Title", figure=standard_dash_table)
+        table.pre_build()
+        table = table.build()
+        expected_table = dcc.Loading(
+            children=[
+                html.H3("Table Title"),
+                html.Div(
+                    dash_data_table(id="__input_text_table", data_frame=gapminder)(),
+                    id="text_table",
+                    className="table-container",
+                ),
+            ],
             color="grey",
             parent_className="loading-container",
             overlay_style={"visibility": "visible", "opacity": 0.3},

vizro-core/tests/unit/vizro/tables/test_dash_table.py

@@ -80,13 +80,14 @@ def custom_dash_data_table(data_frame):
         expected_table_object.id = "__input_" + id
 
         expected_table = dcc.Loading(
-            html.Div(
-                [
-                    None,
-                    html.Div(expected_table_object, id=id),
-                ],
-                className="table-container",
-            ),
+            children=[
+                None,
+                html.Div(
+                    expected_table_object,
+                    id=id,
+                    className="table-container",
+                ),
+            ],
             color="grey",
             parent_className="loading-container",
             overlay_style={"visibility": "visible", "opacity": 0.3},
@@ -124,13 +125,10 @@ def custom_dash_data_table(data_frame):
         expected_table_object.id = "__input_" + id
 
         expected_table = dcc.Loading(
-            html.Div(
-                [
-                    None,
-                    html.Div(expected_table_object, id=id),
-                ],
-                className="table-container",
-            ),
+            children=[
+                None,
+                html.Div(expected_table_object, id=id, className="table-container"),
+            ],
             color="grey",
             parent_className="loading-container",
             overlay_style={"visibility": "visible", "opacity": 0.3},