[Feat] Enable header and footer inside Graph, Table and AgGrid

[huong-li-nguyen]

Description

• Add warning if figure.title is used instead of graph.title
• Enable header and footer in Graph, Table and AgGrid
• Enable title in Graph
• Some quick design updates to dash_data_table to look more similar to dash_ag_grid
• Update margin_b in dashboard overwrites

TO DO:

• Update existing unit tests
• Unit test for warning
• Unit tests for header / footer / title
• Update dev example
• Docs

@l0uden

• Ask Alexey to create a screenshot test
• Update screenshot tests -> https://github.com/mckinsey/vizro-qa/pull/111 - @l0uden to approve

Screenshot

Notice

• I acknowledge and agree that, by checking this box and clicking "Submit Pull Request":

  • I submit this contribution under the Apache 2.0 license and represent that I am entitled to do so on behalf of myself, my employer, or relevant third parties, as applicable.
  • I certify that (a) this contribution is my original creation and / or (b) to the extent it is not my original creation, I am authorized to submit this contribution on behalf of the original creator(s) or their licensees.
  • I certify that the use of this contribution as authorized by the Apache 2.0 license does not violate the intellectual property rights of anyone else.
  • I have not referenced individuals, products or companies in any commits, directly or indirectly.
  • I have not added data or restricted code in any commits, directly or indirectly.

[huong-li-nguyen]

@l0uden - could you create new screenshot tests based on this branch? :) You can take this config:

import vizro.models as vm
import vizro.plotly.express as px
from vizro import Vizro

df = px.data.iris()

HEADER = """
Each point in the scatter plot represents one of the 150 iris flowers, with colors indicating their types. The Setosa
type is easily identifiable by its short and wide sepals.

However, there is still overlap between the Versicolor and Virginica types when considering only sepal width and length.
"""

FOOTER = """SOURCE: **Plotly Iris, 2024**"""

page = vm.Page(
    title="Styling Header/Footer - Graph",
    components=[
        vm.Graph(
            figure=px.scatter(df, x="sepal_width", y="sepal_length", color="species"),
            title="Relationships between Sepal Width and Sepal Length",
            header=HEADER,
            footer=FOOTER,
        ),
    ],
)


dashboard = vm.Dashboard(pages=[page])

if __name__ == "__main__":
    Vizro().build(dashboard).run(debug=True)

[maxschulz-COL]

Love this change, really nice to look at! Have a few comments, but approving pending the implementation of those :)

[maxschulz-COL]

Suggested change

	warnings.warn(
	"Using `fig.layout.title` in your Plotly chart may cause misalignment with other "
	"component titles on the screen. To ensure consistent alignment, consider using "
	"`Graph.title` instead."
	)
	warnings.warn(
	"""Using the `title` argument in your Plotly chart function may cause misalignment with other component titles on the screen. To ensure consistent alignment, consider using add a title via the `vm.Graph` model
	instead: `vm.Graph(title=<foo>, ...).""")

I would align the warning with the actual pre-condition, not only because that is safer to use, but also because it is probably easier to understand.

Would further use triple quotes to make this easier to read.

Lastly, why did we opt for the argument check vs the actual fig.layout.title check? It was not to build the figure right? I think that was a good choice!

[huong-li-nguyen]

I like that!

For context:

[huong-li-nguyen]

Using the triple quotes actually makes it a bit more difficult to read (as an output), because the formatting seems off then 🤔

Triple quotes

Single quotes

Took me forever to figure out why the unit tests were failing with this change 😄 But if you use parentheses, you have to change the syntax of match statement: pytest-dev/pytest#10595

[maxschulz-COL]

Ah weird, did you properly dedent? (either manually, by putting the text to the very left), or by using

from textwrap import dedent
print(dedent("""
	Text for which you want to remove
    leading whitespace when printed
    """))

Very nice tool :P

Not too important, but makes long strings in code really a lot easier to read (and edit after!)

[petar-qb]

I really like this initiative 😍.

This also makes initial page loading much prettier as the title is introduced for the Graph component as well (and will be even more prettier when we introduce some shinning div boxes for dynamic components - similar like it's done for dash documentation).

[petar-qb]

Just a reminder to update the requirements.txt for all py.cafe examples:
vizro==0.1.21 -> vizro==0.1.22

[petar-qb]

Should we also consider updating Vizro version on some other examples across the hugging face, py.cafe and similar?

[maxschulz-COL]

This is something done at release, not part of this PR.

[petar-qb]

I added a reminder note in the release process page for this case.

[huong-li-nguyen]

Ah @petar-qb - I understood what you meant now. We do not need to update the requirements.txt for all py.cafe examples, because these should run fine with the previous versions, especially as they do not use any of the new features. Some of the requirements.txt in some pycafe examples we've just updated because I needed to leverage certain features from there.

What we update is our mkdocs.yml such that our pycafe examples in the docs run on the newest version. I think that's what @maxschulz-COL also referred to, there was already a step in the release process :)

[huong-li-nguyen]

@maxschulz-COL @petar-qb - do you guys want to take a final look? :)

@stichbury - If you have some time to take a look at the docs here, that would also be great! 🙇‍♀️

[stichbury]

LGTM, only a couple of very minor comments 🌟

[petar-qb]

Amazing work! This looks really good to me now. 🎖️

[maxschulz-COL]

@maxschulz-COL @petar-qb - do you guys want to take a final look? :)

@stichbury - If you have some time to take a look at the docs here, that would also be great! 🙇‍♀️

Too late to the party, but look great 😍