Added a link to this in the documentation as well! Great work.
1 Like
nice work, @RenaudLN . Thank you for this.
For people wondering how to use this component, would they have to download dmc-transferlist-aio or could they just git clone the repo?
At this stage I don’t intend to turn this into a package. I would advise people who want to use it to copy the transferlist_aio.py file into their project to use it. This would also allow to do add new things to it (e.g. contents of the left list could be populated from a database when searching).
1 Like
Hello, DMC is a great package and I’d love to upgrade to 0.14.x
After some setbacks a few weeks ago I just tried again, and I’m now on dash_mantine_components==0.14.3
I ported my AppShell login to dmc.AppShellHeader & dmc.AppShellMain and wrapped app.layout in a dmc.MantineProvider. But when the app runs I get this error:
r.useId is not a function
(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: r.useId is not a function
at t.useRandomClassName (http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_3m1715250691.js:2:1544322)
at http://localhost:8050/_dash-component-suites/dash_mantine_components/dash_mantine_components.v0_14_3m1715250691.js:2:1536246
at renderWithHooks (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:14938:20)
at updateForwardRef (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:16951:22)
at beginWork (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:18780:18)
at HTMLUnknownElement.callCallback (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:182:16)
at Object.invokeGuardedCallbackDev (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:231:18)
at invokeGuardedCallback (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:286:33)
at beginWork$1 (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:23338:9)
at performUnitOfWork (http://localhost:8050/_dash-component-suites/dash/deps/react-dom@16.v2_17_0m1715250706.14.0.js:22289:14)
I’ve tried every subrelease of 0.14 so far and always get this. The app works fine with 0.12.x
Thanks for any suggestions
Make sure you set the react version to 18, check out DMC’s docs, it describes this step.
Here is a complete minimal example which can be used as an app frame to get started with dmc 0.14
It shows how to:
-
Set the React 18 version (currently required with Dash<=2.17, but will not be necessary with future Dash version.
-
Load the stylesheets required for certain components (dates, code highlighting, charts, carousel, notification and progress)
-
Uses Appshell with a header, hooter, navbar aside and main content. The navbar and aside are responsive and are hidden on small screens.
-
Wrap the app.layout in the
MantineProvider
import dash_mantine_components as dmc
from dash import Dash, _dash_renderer, dcc, callback, Input, Output, State
_dash_renderer._set_react_version("18.2.0")
header = dmc.Group(
[
dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
dmc.Text(["Header"], size="xl", fw=700),
],
justify="flex-start",
)
navbar = dcc.Loading(
dmc.ScrollArea(
[
dmc.Text("Your Sidebar content", fw=700),
],
offsetScrollbars=True,
type="scroll",
style={"height": "100%"},
),
)
page_content = dmc.Text("Your page content")
stylesheets = [
"https://unpkg.com/@mantine/dates@7/styles.css",
"https://unpkg.com/@mantine/code-highlight@7/styles.css",
"https://unpkg.com/@mantine/charts@7/styles.css",
"https://unpkg.com/@mantine/carousel@7/styles.css",
"https://unpkg.com/@mantine/notifications@7/styles.css",
"https://unpkg.com/@mantine/nprogress@7/styles.css",
]
app = Dash(external_stylesheets=stylesheets)
app_shell = dmc.AppShell(
[
dmc.AppShellHeader(header, px=25),
dmc.AppShellNavbar(navbar, p=24),
dmc.AppShellAside("Aside", withBorder=False),
dmc.AppShellMain(page_content),
],
header={"height": 70},
padding="xl",
navbar={
"width": 375,
"breakpoint": "md",
"collapsed": {"mobile": True},
},
aside={
"width": 300,
"breakpoint": "xl",
"collapsed": {"desktop": False, "mobile": True},
},
id="app-shell",
)
app.layout = dmc.MantineProvider([app_shell])
@callback(
Output("app-shell", "navbar"),
Input("burger-button", "opened"),
State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
navbar["collapsed"] = {"mobile": not opened}
return navbar
if __name__ == "__main__":
app.run_server(debug=True)
3 Likes
Here’s a minimal example of a responsive app with a theme switch component - similar to the dmc docs
import dash_mantine_components as dmc
from dash_iconify import DashIconify
from dash import Dash, _dash_renderer, dcc, callback, Input, Output, State
_dash_renderer._set_react_version("18.2.0")
theme_toggle = dmc.ActionIcon(
[
dmc.Paper(DashIconify(icon="radix-icons:sun", width=25), darkHidden=True),
dmc.Paper(DashIconify(icon="radix-icons:moon", width=25), lightHidden=True),
],
variant="transparent",
color="yellow",
id="color-scheme-toggle",
size="lg",
ms="auto",
)
header = dmc.Group(
[
dmc.Burger(id="burger-button", opened=False, hiddenFrom="md"),
dmc.Text(["Header"], size="xl", fw=700),
theme_toggle
],
justify="flex-start",
)
navbar = dcc.Loading(
dmc.ScrollArea(
[
dmc.Text("Your Sidebar content", fw=700),
],
offsetScrollbars=True,
type="scroll",
style={"height": "100%"},
),
)
page_content = [dmc.Text("Your page content"), dmc.Loader(color="red", size="md", variant="oval")]
stylesheets = [
"https://unpkg.com/@mantine/dates@7/styles.css",
"https://unpkg.com/@mantine/code-highlight@7/styles.css",
"https://unpkg.com/@mantine/charts@7/styles.css",
"https://unpkg.com/@mantine/carousel@7/styles.css",
"https://unpkg.com/@mantine/notifications@7/styles.css",
"https://unpkg.com/@mantine/nprogress@7/styles.css",
]
app = Dash(external_stylesheets=stylesheets)
app_shell = dmc.AppShell(
[
dmc.AppShellHeader(header, px=25),
dmc.AppShellNavbar(navbar, p=24),
dmc.AppShellAside("Aside", withBorder=False),
dmc.AppShellMain(page_content),
dmc.AppShellFooter("Footer")
],
header={"height": 70},
padding="xl",
navbar={
"width": 375,
"breakpoint": "md",
"collapsed": {"mobile": True},
},
aside={
"width": 300,
"breakpoint": "xl",
"collapsed": {"desktop": False, "mobile": True},
},
id="app-shell",
)
app.layout = dmc.MantineProvider(
[
dcc.Store(id="theme-store", storage_type="local", data="light"),
app_shell
],
id="mantine-provider",
forceColorScheme="light",
)
@callback(
Output("app-shell", "navbar"),
Input("burger-button", "opened"),
State("app-shell", "navbar"),
)
def navbar_is_open(opened, navbar):
navbar["collapsed"] = {"mobile": not opened}
return navbar
@callback(
Output("mantine-provider", "forceColorScheme"),
Input("color-scheme-toggle", "n_clicks"),
State("mantine-provider", "forceColorScheme"),
prevent_initial_call=True,
)
def switch_theme(_, theme):
return "dark" if theme == "light" else "light"
if __name__ == "__main__":
app.run_server(debug=True)
1 Like
Thank you very much for this example. I can now see where the bits mentioned in the migration guide go (react version, stylesheets etc).
I am using your app.py (the second version with the theme switcher) as a starting point to migrate my existing multi-page app. I replaced your page_content with dash’s page_container:
from dash import ..., ..., page_container
...
dmc.AppShellMain(page_container),
...
And I’m going from there. Thanks
1 Like
How can I use dmc 0.14 in django plotly dash changing the version of react
Django Plotly Dash depends on dash>=2.0,<2.10
Dash Mantine Components==0.14 depends on dash[dev]>=2.5.1 and is using react version 18.2.0
Not sure what errors you are facing but their is a fair noticeable deference between the dependencies of both and with Dash Mantine Components being dependent on Django Plotly Dash in this situation I could understand it not working.
What I would do is consider using an older version of Dash Mantine Components and see if you can get one of those to work, then you could fork from dmc and start from that point forward.
Alternatively you could create a separate hosted Django and Dash application, I then have an api focused on hitting the get , push and post requests from Django endpoints on the hosted api. This in turn allows the developer to not be dependent on Django Plotly Dash, create separate containers to host both a Django and Dash application instead, witch in turn allows Plotly to be up to date and not dependent on Django outside the API endpoints you use to communicate between the two frameworks.
2 Likes
Hi,
I’m having issues with the autoreload of my app since I’ve upgraded to 0.14.1. When I make changes on the app, it sees that I’ve made a change but stays stuck on the reloading phase.
I need to restart my app in order to see the changes.
Does anybody had the same issue?
Thanks
Hi @snehilvj !
I’ve just seen there is a version upgrade available, from 0.14.3 to 0.14.4.
What’s new?! =)
Thanks!
2 Likes
Hi @snehilvj !
Is there a way to capture when the user clicks inside a dmc.MultiSelect component and the dropdown is shown?
To answer this question I tried first to look at all properties of the dmc.Multiselect and found the “dropdownOpened” prop, which controls the dropdown opened state, BUT this seems not to work as expected. What I mean is that putting “dropdownOpened” at the Input of a callback doesn’t trigger the callback when the user dropdown is opened (meaning that the user clicked inside the dmc.MultiSelect). See the example below.
Then I tried to refers to the Mantine docs to find any alternative, but at this topic they state that “You can control dropdown opened state with dropdownOpened prop. Additionally, you can use onDropdownClose and onDropdownOpen to listen to dropdown opened state changes.”, so I guess that “dropdownOpened” is the correct way to go, but it’s not working…
Would you kindly know what I’m missing or what would be another approach?
Thank you!
# Imports.
import dash
from dash import Dash, Input, Output
import dash_mantine_components as dmc
# Runs the code from this script.
if __name__ == '__main__':
# Sets the correct react version for latets dmc version.
dash._dash_renderer._set_react_version('18.2.0')
# Instantiate the app.
app = Dash(__name__)
# Defines the layout.
app.layout = dmc.MantineProvider(
children=[
dmc.Container(
children=[
dmc.MultiSelect(
id='multiselect',
data=['John', 'Jane']
),
dmc.Text(
id='debug_text',
children='No callback fired...'
)
]
)
]
)
# Create the callback.
@app.callback(
output=dict(
debug_txt=Output('debug_text', 'children')
),
inputs=dict(
dropdown_state=Input('multiselect', 'dropdownOpened')
),
prevent_initial_call=True
)
def callback_function(dropdown_state):
return dict(
debug_txt='Callback fired!'
)
# Run the app localy.
app.run_server(debug=True, port=8050)
Hello,
-
absolutely amazing package. Have been running and maintaining a multi page dash application since 2022. I use dozens of your components and hope to use many more
-
I like the recharts graphs a lot, but currently still feel the plotly core graphs especially the graph.objects offers more flexibility (combining area with line traces and also bars and lines) do you have plans of adding more chart components/options to allow for those?
-
I struggle often to do the custom css in the assets style.css file and it doesn’t often have any effect. I do use a dbc theme, is it possible that thing just swallows up all the other formatting?
Hi @Drxdre
-
Glad you are using dash-mantine-components in your projects!
-
The recharts are really nice for simple charts. They are styled with the Mantine theme and automatically update when switching between light and dark themes. However, it’s best to stick with Plotly if you have large data sets or need all the features and chart types. It’s likely more features will be added to the dmc charts, but it will follow the lead of the upstream Mantine library. You can refer to the Mantine Chart docs for more details.
-
If you use a Bootstrap theme, then it will style the Dash Bootstrap Components and the Dash HTML components. It will not style the Dash Mantine Components. You can learn more about styling in the dmc docs Styles API section, plus there is even more information in the Mantine Docs. Feel free to open a new topic for specific style questions you may have.
2 Likes