I saw this earthquake monitoring dashboard in the Share Your Apps thread. This is a great app! Thanks @yakim for sharing.
It has a really nice mobile-friendly UI using dash-mantine-components, a clean and well-structured project, and a good use of Dash Pages. I also noticed that it uses some relatively new Dash features, including allow_optional.
I thought it would make a good real-world example for anyone who hasn’t used allow_optional yet.
The feature is useful with multi-page apps when a callback references components that aren’t present on every page. Instead of having to make sure those components always exist, or add workarounds to handle missing components, you can use allow_optional=True.
More info in the Dash docs:
In the earthquake app, a callback updates the slider components based on the dropdown
Then the callback to update the rest of the page uses allow_optional=True, so the callback can accept inputs from either set of sliders even though only one set exists in the layout at a time.
I’m also curious about the app development. If you used AI coding tools, would you be open to sharing which model and any prompts that you found effective?
Typically, I see AI generated dash apps using old patterns and lots of custom CSS. This app has no CSS files in /assets and doesn’t use much inline CSS either. Instead, your app makes nice use of dash-mantine-components theme and features like the AppShell to make a collapsible sidebar, Style Props for a responsive font sizes (smaller fonts on small screens) SimpleGrid for the responsive card layout where all the columns are equal sizes, and Grid for columns of different widths. (just to name a few things)
Hi @AnnMarieW, thanks for the kind words!
For the app development, I simply used ChatGPT with fairly generic prompts to generate some of the boilerplate and initial structure. For the styling and UI details, I mostly did those myself. Fortunately, my familiarity with Dash Mantine Components helped a lot, and I’m also not a huge fan of writing CSS, so I tend to rely on the built-in components, theme, and styling props instead.
