Comments (8)
I'm happy to help any time it fits with your development plan. :-)
from vizro.
Thanks for all the answers @AnnMarieW! That's very nice to know about the dbc.Accordion
also 👌
I had a good chat with @Joseph-Perkins about all this yesterday. What you say makes a lot of sense and we're keen to go ahead with enabling the functionality, but I'd just like to give a bit more thought about how exactly we handle it in a way that plays nicely with our existing plans to enable a dashboard logo. So please hold off on the PR just for now and I will get back to you very soon if that's ok! 🙏
Very happy to discuss Vizro design questions and anything else more generally - let me send you a message on the plotly forums and we can figure out the best way to be in touch.
from vizro.
Hi @AnnMarieW, thanks very much for the suggestion and the offer to raise a PR 🙏 It's been on my list for a while to check what other things we could set on dash.register_page
in case we were missing any nice tricks like this, so I love the idea!
I do have a few hesitations about adding this feature right away though:
- we haven't yet enabled functionality to insert a dashboard-level logo (it's on our backlog though), and I'd like to make sure that however we handle that would be consistent with page-level image information. Related, #70 is our first foray into using navbar icons and we have opted to use Google material icons for that, so I'm not sure what the current thinking is on logos
- a page-level
description
makes a lot of sense to me outside of meta tags anyway - I wonder if we could also use the information as part of the page content and/or homepage navigation cards themselves. I'm not sure whether this has been considered before or if we have designs for it though - having page-level
description
andimage
feels quite advanced when we don't currently enable app-level options for these (related to question 1 below...)
So let me check with our project manager @Joseph-Perkins where things stand on the above and get back to you!
A couple of questions for you if you don't mind!
- customising these meta tags is very nice, and I really like the
_infer_image
functionality that automates discovery of this sort of thing. However, it feels quite advanced to be able to set these things on a per-page basis when (as far I can tell) there's no equivalent way to achieve the more basic requirement of specifying the information at a global app-level. You can entermeta_tags
in theDash
instantiation, but it's all manual rather than looking forlogo.png
etc. automatically. Why is this functionality is specific to Dash pages in the first place? Of course since we always use Dash pages, we could achieve app-level tags by exposingDashboard.description
and then using the samedescription
for every page in ourdash.register_page
call. But I'm wondering if there's a good reason that you shouldn't easily be able to provide an app-leveldescription
etc. already in pure Dash? - something I nearly changed before and then decided again for reasons that I can't now remember... I was going to set the page title to something like
title = f"{dashboard.title}: {page.title}" if dashboard.title else page.title
so that instead of the page name beingHomepage
it would beMy dashboard name: Homepage
etc. Does this sound like a good idea to you?
from vizro.
Hi @antonymilne and thanks for your response.
The icons, logos, images and descriptions used in the layout may not be ideal for the meta tags. The dash.page_registry
allows for arbitrary data to be added, so it's possible to include that page level data there. However it's best to keep keywords description
, image
and image_url
reserved for the meta tags because Dash Pages automatically uses that data to create the meta tags. Also, Pages will use certain image files from the assets folder for the meta tags, so that feature should either be included in the Vizro docs or disabled so there are no surprises.
Related to #70 -- in the next release of Dash Bootstrap Components, you will be able to put icons (or any Dash component) in the Accordion title. This means you won't need the limitation of including icons only in the navbar
. 🎉 see dbc PR # 988
Having unique meta tags for every page is an advanced (and very cool!) feature, however you can use the same image and description for every page if you like. Simply include an image file named "logo" or "app" in the assets folder. To add the same description to every page, you can loop through the dash.page_registry
and add it to each page with the keyword "description".
There is no good reason why app.description
and app.image
is not included in Dash without using Pages. That's a great feature request! Feel free to open an issue in the Dash repo.
Re the title = f"{dashboard.title}: {page.title}"
I like it! That's a very nice default.
I have some other general Vizro design questions, but they aren't "issues". Is it OK to ask them here, or do you prefer some other channel?
from vizro.
I've thought about this all some more and here's what I think we should do 🙂
- add the field
description: Optional[str]
to thePage
model - no need for
image
orimage_url
fields inPage
- the way for users to enable these would be for them to put include an image of the right name (assets/<page.id>.<extension>
) so it gets picked up automatically - add some appropriate image
assets/app.<extension>
to our examples so that the whole thing gets a nice image when shared (will talk with @Joseph-Perkins to figure out what this image would be) - add documentation on all the above and (can just point to Dash documentation where useful, but would be nice to outline the most likely scenarios people want to achieve e.g. just one
app.png
image vs. individual page-level images) - no new fields in
Dashboard
for now at least
So if you'd like to raise a PR then please go for it @AnnMarieW! I'll be more than happy to support, answer questions, help with tests, review, etc. - whatever you like. No need to put all of it in one PR if you'd prefer to do the docs separately or just leave that to someone else and make only the code changes - completely up to you.
If you'd like to understand more context around why I suggest the above, I can definitely explain more - it's all to do with the architecture of Vizro and what level the interface should be. This currently isn't spelt out very clearly anywhere other than my head so I appreciate it might be a bit mysterious without further explanation 😅
Known limitations that are all deliberate and could potentially be relaxed in future if there's demand for it, but not now:
description
cannot be a function, just astr
image
andimage_url
cannot be specified manually, just picked up automatically- similarly for path to a logo that's used in the page
Known limitation that I would like to lift, but not a big problem: images are only picked up if they're at the root of the assets
folder. This conflicts with our current suggested structure that images live inside assets/images
. Possible solutions:
- modify
dash._page._infer_image
to look recursively through the assets folder (@AnnMarieW can hopefully comment on whether this would be a desired solution or not) - we roll our own
_infer_image
function in Vizro that does the same but looks recursively - we revise our suggested structure to put all images in the root of
assets
- we just live with the slight inconsistency that page images must live in the root of
assets
while we put others inside a subfolder - this will be the situation to begin with at least, and it's not a terrible problem
Near future changes:
- @antonymilne to modify
page.title
as suggested above unless he can remember why he didn't do this before... - @nadijagraca will add functionality to include a logo in the layout itself. This should follow exactly the same logic as
dash._page._infer_image
but only look for a file calledlogo
. No need for alogo
field inDashboard
- consider how/whether to handle the case that only some of the pages have a
description
. Should we have adescription
field inDashboard
which is the default forPage.description
? Or should all page descriptions that aren't filled in just take the homepage description? Or should we rely on a Dash implementation of app-level description (either through feature request or through supplyingmeta_tags
argument toDash
)?
In fact, I just realised we'll need a function like dash._page._infer_image
to put the logo into our layout anyway. So regardless of the above "Known limitation that I would like to lift", we'll need to roll our own anyway unless that function is made public in Dash.
Not so near future changes:
- we enable automatic generation of a navigation homepage that looks a bit like the one on https://vizro.mckinsey.com/ using the
page.description
, image, etc. (This was on the backlog already) - we make something clever to automatically take screenshots of the different dashboard pages so that users don't need to do that manually themselves at all. In addition to the navigation homepage and meta tags, this might also be used e.g. in a tooltip when hovering over navigation? I have some ideas on how to achieve this and it sounds like a fun little project, but not super easy or high priority
from vizro.
I'd be delighted to do the PR for both the code changes and the docs. 🙂
modify dash._page._infer_image to look recursively through the assets folder
This would be the ideal solution, but I'm concerned that it would be considered a breaking change. I'll check with Plotly and if they approve, I could do a PR in Dash. Otherwise, I could add it to Vizro if you like.
we make something clever to automatically take screenshots of the different dashboard pages so that users don't need to do that manually themselves at all
I have a utility that takes a snapshot of each page using Selenium. If that's what you have in mind, I can share that with you when you're ready for a fun little project.
There is now a feature request in Dash for app level description and image to make it easier to create Meta Tags.
from vizro.
I'd be delighted to do the PR for both the code changes and the docs. 🙂
Amazing, thank you! Our contributing guidelines is pretty thorough but may be slightly out of date in places. I'm not sure anyone external has tried following it in detail before, so I'll be very interested in any feedback you have on any aspect the contribution process.
One thing that's not mentioned there that will be useful if you're modifying docs: hatch run docs:serve
will do a hot-reloading build of the rendered docs. Other than that, hatch run lint
is the main command you'll find you need to pass CI.
modify dash._page._infer_image to look recursively through the assets folder
This would be the ideal solution, but I'm concerned that it would be considered a breaking change. I'll check with Plotly and if they approve, I could do a PR in Dash. Otherwise, I could add it to Vizro if you like.
Cool, let me know what they say. Though I realised that we'll need to write our own version of _infer_image
anyway to find the logo automatically to put in the layout, and it's a small and simple function that's easy for us to copy over. So to be honest it's probably not worth making the change on the Dash side on second thoughts, since they would also need to make the function public API which probably doesn't make sense just for our benefit. So no pressure to try and change anything on the Dash side - I'd only ask about adding it there if you think it would be a general enhancement beyond just Vizro's needs.
I have a utility that takes a snapshot of each page using Selenium. If that's what you have in mind, I can share that with you when you're ready for a fun little project.
Yeah, that's the sort of thing I had in mind! We have something similar for running QA tests though I don't know the details of it.
Ideally I think we'd take a screenshot of just the main content of the page (so not including the navigation), maybe doing something like this? I'm not very familiar with Selenium but my impression is that it might be a bit too heavyweight/awkward for general users to setup (installing chromedriver doesn't seem trivial for a start, but it's very possible that I just don't know what I'm doing). Some possible alternatives (never used any of them) might be:
There is now a feature request in Dash for app level description and image to make it easier to create Meta Tags.
Nice! Let me leave a comment there.
from vizro.
I opened an issue in Dash for the recursive search for the image files. While it may not be considered a breaking change, I'm not sure if this should be added to Pages.
There are several options that could work well with Vizro. Specifying the image to use for the meta tags in the dash.page_registry
would probably be the easiest solution.
from vizro.
Related Issues (20)
- Create an example dashboard for novice/intermediate/advanced users HOT 3
- Restyle the documentation landing page HOT 4
- Add documentation about the demo example and clean up `examples`
- Revise the graphics used in README for `vizro-ai` and `vizro-core` so they render better in PyPI
- CSS of AG Grid `floatingFilter` option buggy HOT 1
- AgGrid doesn't work with `persistence` props HOT 2
- Add a tabbed navigation to move between `vizro-core` and `vizro-ai` docs HOT 1
- Can I add an icon to a button HOT 2
- Check all links in docs and make them more accessible HOT 15
- Enabling in-depth user interaction through input widgets HOT 7
- typo in explore-components/#22-add-further-components HOT 1
- False negative on hatch run test inside container environment HOT 3
- Custom AG Grid function overwrites pandas.DataFrame provided as input with an empty pandas.DataFrame HOT 2
- __call__ function within models/_components/graphy.py passing parent function kwargs unintentionally HOT 11
- Minor typo in "Explore Vizro" tutorial HOT 1
- Contribution guidelines link leads to `404` HOT 1
- Relationship analysis chart in demo has no flexibility in Y axis HOT 10
- Multiple Series Line Chart Updates HOT 2
- Consider adding a file uploader widget HOT 2
- New features available for dcc.Loading HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vizro.