[Demo] Add banner to visual vocabulary dashboard

[nadijagraca]

Description

Add banner to visual vocabulary dashboard

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.

[github-actions]

View the example dashboards of the current commit live on PyCafe ☕ 🚀

Updated on: 2024-11-13 10:57:15 UTC
Commit: b9af599

Link: vizro-core/examples/dev/

Link: vizro-core/examples/scratch_dev

Link: vizro-core/examples/visual-vocabulary/

Link: vizro-ai/examples/dashboard_ui/

[huong-li-nguyen]

Please don't merge yet. I'm trying out different designs and will push later :)

[petar-qb]

I really like how the banner looks even for "window" screens! 🎨

Have you pushed the latest version of the banner implementation to all of our hugging-face apps and do we have any other apps where we should do the same?

[antonymilne]

Love it, this looks really really nice! ⭐ 💯

[antonymilne]

😱 A rounded border?!

[antonymilne]

And one other thing I noticed. Do we really want the banner to block out the whole horizontal space rather than just floating on top of the underlying content?

[huong-li-nguyen]

Yes 😄 I didn't like the border as is and for the banner we can make an exception 👍

It's not the banner that blocks the whole horizontal space. The banner floats already just on top of the underlying content. That horizontal space has always been there and is part of our initial layout design. It's coming from the right-side container and its padding :)

[maxschulz-COL]

My 5 cents :) : given this looks nice and is very non-intrusive, is it time to rethink whether this should be added permanenty to all apps? (similar to streamlit)

[antonymilne]

My 5 cents :) : given this looks nice and is very non-intrusive, is it time to rethink whether this should be added permanenty to all apps? (similar to streamlit)

IMO yes. My questions would be:

• should we have an option to turn it off (Dashboard.watermark = False)?
• should we save it for vizro 0.2.0 on the grounds that it's a somewhat disruptive/unexpected change? If we have an option to turn it off then I think probably not worth delaying.

[maxschulz-COL]

• should we have an option to turn it off (Dashboard.watermark = False)?

Not an easy question to answer given where we will move, hence answer to next question

• should we save it for vizro 0.2.0 on the grounds that it's a somewhat disruptive/unexpected change? If we have an option to turn it off then I think probably not worth delaying.

Generally would have said no because FE design changes are no breaking changes, and I think we should adhere to that, but given that the above question is actually more far reaching we should think about it a bit more, thus waiting for 0.2.0 is probably not a bad idea

@Joseph-Perkins FYI

[huong-li-nguyen]

I discussed this with @Joseph-Perkins already and for now, we will only have it in our public demos. There are several design and UX considerations we would need to discuss first, which we can discuss offline 👍