snehilvj / dash-mantine-components Goto Github PK
View Code? Open in Web Editor NEWPlotly Dash components based on Mantine React Components
Home Page: https://www.dash-mantine-components.com
License: MIT License
Plotly Dash components based on Mantine React Components
Home Page: https://www.dash-mantine-components.com
License: MIT License
Hi there,
Again, this is not really issue. Because you don't have a discussion section, I'll post my question here; hope that's okay?
My question: is there a way to change the colours in the progress bar after changing the theme, so that the colour looks more consistent with each of the dark/light background?
Allow me to explain:
In light mode, the progress bars now look like this:
In the dark mode:
Because of the dark background, it is far too gleaming.
The obvious solution is to use a callback to switch colours on the fly with a theme switch. As an example:
@callback(
Output(component_id="progress_bar", component_property="sections"),
Input(component_id="theme_switch", component_property="n_clicks"),
)
def on_switch():
"""blablabla"""
return ["""__some sections with new colors___"""]
The problem with this method is that none of the supported colours are appropriate for the dark mode (apart from dark and gray). I am thinking of something like a "darker indigo":
"dark", "gray", "red", "pink", "grape", "violet", "indigo", "blue", "cyan", "teal", "green", "lime", "yellow", "orange"
Is it possible to make the progress bar colour look more "darky" in dark themes? Perhaps by adjusting the transparency? Is this currently an option?
Great work!
Don
Is there a way to pass a custom control to Menu? Currently I get the '...' ActionItem, but would really like to use my own button as described in https://mantine.dev/core/menu/.
Great job, btw. Very helpful!
It appears that the SegmentedControl component is treating a value of 0 as falsey. For example:
dmc.SegmentedControl(id='test', data=[
{'label': '0 Outs', 'value': 0},
{'label': '1 Out', 'value': 1},
{'label': '2 Outs', 'value': 2}
], size='sm', color='green', value=0),
Yields the following:
Is there any supprt for color index as per https://mantine.dev/theming/colors/#colors-index-reference?
The following code seems to have no effect
dmc.Button( "Load data", variant="filled", color="green.9", fullWidth=True, n_clicks=0, ),
Ps. great library many thanks!!
Hello, I am trying to implement a Multiselect object in a modal but when I open the modal, none of the values show.
Is this a known issue or am I doing this wrong?
Here is my modal code. I tested it and it works in my main form, but not in a modal:
dbc.ModalBody(
id="value_picker_modal_body",
children=[
dmc.MultiSelect(
label="Select 3D-axis plot variables:",
id="selected-3d-attr",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
clearable=True,
),
],
style={"height": "60vh", "overflow": "scroll"},
)
The result is when I click in the dropdown on the modal window, nothing happens.
Is there a parameter I need to make it run in a modal window?
Thanks.
Inner Labels
import dash_mantine_components as dmc
dmc.Switch(
label="I agree to sell my privacy",
onLabel="ON",
offLabel="OFF"
)
Also the bullet is not positioned at center of slot, its is top aligned
Hi! Thanks for the awesome lib! Its really nice to finally have a date picker that can go back in time quickly. I even mentioned this in dcc
: plotly/dash-core-components#990
However, the date
/dates
properties of the date pickers appear to be read only. It would be great to add write properties to them so that in a callback, you can for example set a default date range. Example code:
from datetime import datetime, timedelta
from dash import Dash, html, Input, Output
import dash_mantine_components as dmc
# App
app = Dash(__name__)
server = app.server
app.layout = html.Div(
children=[
html.Button("Set dates", id="click"),
dmc.DateRangePicker(
id="date_range",
)
]
)
@app.callback(
Output("date_range", "dates"),
Input("click", "n_clicks"),
)
def set_initial_dates(click):
today = datetime.now()
end_date = today + timedelta(10)
return [today, end_date]
# Main
if __name__ == "__main__":
app.run_server(debug=True)
Hello! It would be verry useful with thousand separators in NumberInput components, with option on which separator to use (eg. "," or whitespace).
Hi,
I am trying to change the color variant of a Loader inside a filled Alert. The alert is the default solid dark blue and I want better contrast with the Loader inside it. I tried using color="blue.1" for a light blue, according to the docs, but I get the following error:
Invalid argument `color` passed into Loader.
Expected one of ["dark","gray","red","pink","grape","violet","indigo","blue","cyan","teal","green","lime","yellow","orange"].
Value provided: "blue.1"
The Alert call is
dmc.Alert(
children = "uploading stuff now...",
title = [
dmc.Group(
children = [
dmc.Loader(
color = "blue.1",
size = "xs",
variant = "oval",
style = {"display":"flex","align-items":"flex-end"}
),
html.Div("Uploading!")
],
direction = "row",
noWrap = True,
spacing = "md"
)
],
id = "status-alert",
color = "blue",
variant = "filled",
radius = "md",
withCloseButton = True,
)
Any suggestions?
Thanks!
Hi
A newbie to web development here. for newbies like me, this package is a god-send. I can't thank you enough for putting this together and doing such an amazing job at docs (which I am using to learn) as well!
Do you think we could have the below from mantine as well please?
https://mantine.dev/core/loading-overlay/
I am not very good at web development, but, if there is a straight forward way to migrate, I am happy to help and send a PR. if you do this one, I will make a note of steps and follow it through to migrate others - how does that sound?
thanks
Roh
Hey @snehilvj,
Very nice work on the components!
I came across mantine a few times since you first publish your post in the Dash Community, so I took a deeper look and I am 100% sold on the idea of having its components available in Dash.
As I mentioned in the post, I was working in Dash Chakra UI Components, which I ended up losing the enthusiasm around it after I switched jobs... So I would like to join forces with you and Emil to make dmc great for the community.
The question is what can I help you with? I imagine there are many components to implement and I can help with that. But I can also take the testing part that is in the TODO list as first issue, as I have done it for Chakra for unit (Jest) and integration (pytest) tests...
Let me know your thoughts.
When I set the children to a Tabs object to either None or [], I get a javascript exception:
"undefined is not an object (evaluating 'S[j].props')"
That happens when I write something line:
dmc.Tabs( id='some-id', children=[] )
or
dmc.Tabs( id='some-id', children=None )
For others running into this problem, my workaround when I shouldn't have any tabs is to create a Tab() and assign it a class_name where the style is 'display: none'.
So in my python code:
dmc.Tabs( id='some-id', children=dmc.Tab(label='', class_name='tab-hidden')) # Must have at least 1 tab or throws error
And in my css file:
.tab-hidden { display: none; }
It appears that the ActionIcon n_clicks prop is not triggering callbacks when assigned to the bullet prop of a TimelineItem component, for example:
dmc.Timeline(dmc.TimelineItem(
bullet=[
dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test')
],
title='Test'
))
Here is a sample callback, and you'll notice that it does not get triggered on click of the ActionIcon:
@app.callback(
Output('empty-div', 'children'),
[Input('test', 'n_clicks')])
def test_clicks(n):
print(n)
Fully reproducible example below:
import dash, flask
from dash import Dash, html, dcc, Input, Output, State, ALL, MATCH, ClientsideFunction
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
from dash_iconify import DashIconify
server = flask.Flask(__name__, static_folder='assets')
app = Dash(
__name__,
server=server,
update_title=None
)
app.title = 'Test'
app.config.suppress_callback_exceptions = True
app.layout = html.Div([
dmc.Timeline(dmc.TimelineItem(
bullet=[
dmc.ActionIcon(dmc.Avatar(src="https://avatars.githubusercontent.com/u/91216500?v=4", radius='xl', size=40), id='test')
],
title='Test'
)),
html.Div(id='empty-div')
])
@app.callback(
Output('empty-div', 'children'),
[Input('test', 'n_clicks')])
def test_clicks(n):
print(n)
if __name__ == '__main__':
app.run_server(port=8500)
If maxDropdownHeight property does what it says then it's clearly not functioning.
I would like the multiselect to occupy no more than the first line of values. I would be requiring few dropdowns that have hundreds of items to select and filter from. Is there any way I can fix the height of the dropdown to a specified number of pixels?
I wonder if someone has checked the kind of dropdown google datastudio provides.
It occupies no more than a single line.
Hello, it would be very helpful that the package supports Pagination component
https://mantine.dev/core/pagination/
Currently I have to use dash bootstrap Pagination as a workaround
Hi! I have a database with some information over the years. The user using the datePicker can select a day and if there is data then it can continue but if not an alert is generated. I would like it to make it easier for the user to select a date by highlighting the days with data with a green background (so when creating the component I would pass in a list of days and modify its appearance). I have seen this is possible in the original library Styles based on date by using the property dayStyle but I am not sure if this is possible in the python version since it does not appear in the documentation.
In React, the Mantine Table component is populated using html elements. In the current Dash Mantine Components (dmc) wrapper, the elements are constructed from (columns, rows) props as simple text elements. While this choice simplifies the syntax form a Dash perspective, it also reduces flexibility.
In my first project using dmc, for example, I needed table entries to act as links. I can think of two ways to implement it,
I guess both approaches could be implemented in one component. Alternatively, two table component could be created. Say, a Table
(or HtmlTable
?) component that takes html elements as children similar to the Mantine Table component, and a SimpleTable
(or Table
?) that renders the children based on (columns, rows) props. What do you think, @snehilvj ?
Hi there, thank you for your great work! This library is a very valuable extension to the dash ecosystem.
I have to report an issue with the DateRangePicker component. The picker popup does not render when inside an offcanvas sidebar from the dash bootstrap components. I have no idea about what the problem might be here. I drew up a minimal reproducible example
import dash
import dash_bootstrap_components as dbc
import dash_mantine_components as dmc
import flask
from dash import dcc, html
from dash.dependencies import Input, Output, State
server = flask.Flask("app")
server.secret_key = "LOREM IPSUM"
app = dash.Dash("app", server=server, external_stylesheets=[dbc.themes.BOOTSTRAP])
app.layout = dbc.Container(
dbc.Row(
dbc.Col(
[
html.H1("Issue with Offcanvas"),
# THIS ONE WORKS
dmc.DateRangePicker(id="picker_outside"),
dbc.Button("Open Offcanvas", id="toggle"),
dbc.Offcanvas(
[
html.Div(
[
html.H1("Offcanvas Content"),
# THIS ONE DOESN'T WORK
dmc.DateRangePicker(id="picker_inside"),
]
)
],
id="offcanvas",
is_open=False,
placement="end",
),
],
)
),
className="container",
)
@app.callback(
Output("offcanvas", "is_open"),
Input("toggle", "n_clicks"),
State("offcanvas", "is_open"),
)
def toggle_offcanvas(n, is_open):
if n:
return not is_open
return is_open
if __name__ == "__main__":
app.run_server(debug=True)
The DatePicker component appears to not hold the selected value after losing focus. It seems to select one day prior to the selected value. This issue can be replicated in the first example here by attempting to select February 3, 2022. After losing focus, the underneath text will show the correct selected value, however the display value in the DatePicker component will display February 2, 2022.
As a heavy user of the Dash Bootstrap Components library, these components are a great supplement, thank you for your work!
I had integrated mantine components like buttons, text input, accordion etc to my bootstrap based Dash APP. while selecting the DARK themes all component labels and text is unreadable. Is there a way to resolve this. is there an simple way to resolve this at least.
the label colours and text colours.
First I would like to say that these components are great!
I have the following:
dmc.MultiSelect(
label="My Dropdown",
id="my-dropdown",
value=[],
data=[
{"value": "parameter1", "label": "Parameter1"},
{"value": "parameter2", "label": "Parameter2"},
{"value": "attribute1", "label": "Attribute1"},
{"value": "attribute2", "label": "Attribute2"},
],
creatable=True,
)
I was expecting that with the creatable=True argument I would be able to add a new option to the dropdown.
Does MultiSelect component allow the user to add new options on the fly?
Thanks,
David
Hi! I'm new to mantine components for Dash in Python, and I'm trying to use the Select component to show different options with an icon in the left, as I previously did with the component Dropdown of dash components.
I have decided to use the Select component of dash-mantine in order to separate the select options by categories, the only problem is that, when I try to set the option's label to an Image component, it returns an error.
This is the code I've created. As it is shown, the label instead of only being a string, is a Div component that includes the image I want to show side by side the value of the option.
dmc.Select(
label="Select framework",
placeholder="Select one",
id="framework-select",
value="ng",
data=[
{
"value": "react",
"label": html.Div(
[
html.Img(
src="assets/tasks-list/Penguin.png",
height=20,
),
]
),
},
{
"value": "svelte",
"label": html.Div(
[
html.Img(
src="assets/tasks-list/Penguin.png",
height=20,
),
]
),
},
],
style={"width": 200, "marginBottom": 10},
),
dmc.Text(id="selected-value"),
This is how the Select component looks:
Although, when I click on the Select component an error is thrown in the inspector console. This is the error:
My question here is: is it possible to have an image side by side with the text value on the select component options?
Thanks in advance for any response 😉
Latest version in conda-forge repository is 0.9:
# Name Version Build Channel
dash-mantine-components 0.6.0 pyhd8ed1ab_0 conda-forge
dash-mantine-components 0.7.0 pyhd8ed1ab_0 conda-forge
dash-mantine-components 0.8.0 pyhd8ed1ab_0 conda-forge
dash-mantine-components 0.9.0 pyhd8ed1ab_0 conda-forge
Could you please update it?
Thanks in advance!
Hello,
Really appreciate your work on this awesome project!
I'm having issues selecting a single date with the daterangepicker. The first issue is with the UI as shown below. When trying to select a single date the first time, the selection simply disappears. However, the second time I select a single date, it stays.
The second issue is triggering a callback with a single date selection. Can this be done? I was hoping the callback value would be something along the lines of ["selected_start_date", maxDate], but a single selection does not appear to trigger the callback.
Thanks in advance for any help.
Hi, Really appreciate your work on this awesome project!
I have a small query, is it possible to update the dmc.Slider
value through callbacks. I have tried to change the value.
its value
prop changes but It is not reflecting on UI side.
Here's the small script. it prints the how the current value has changed for the slider after clicking the buttons. but it doesn't reflect on UI
from dash import Input, Output, State, no_update, ctx, Dash, no_update
import dash_mantine_components as dmc
app = Dash(__name__)
@app.callback(
Output("slider", "value"),
Input("prev", "n_clicks"),
Input("next", "n_clicks"),
State("slider", "value")
)
def changeValue(prev_, next_, current):
if not (prev_ or next_):
return no_update
print(ctx.triggered_id, "current", current)
if ctx.triggered_id == "prev":
return current - 1
if ctx.triggered_id == "next":
return current + 1
app.layout = dmc.Group(
[
dmc.ActionIcon("prev", id="prev", n_clicks=0),
dmc.Slider(id="slider", max=100, value=1, style={"width": "100px"}),
dmc.ActionIcon("next", id="next", n_clicks=0)
], style={
"marginTop": "66px"
}
)
app.run_server()
Thank you.
Hi! Thanks for this project that brings great components to the Dash ecosystem!
I would like to use dash-mantine-components for a Dash project in production where I prefer to use the unpkg CDN for delivering the JS sources of Dash components. However I noticed that the sources for dash-mantine-components are inexistent on unpkg.
Do you plan to publish your components to NPM to make them available on unpkg?
Thanks!
Hi there,
I switched my app to use Dash Mantine Components because of the beautiful components UI and flexibility. However, I miss the ability to debounce callbacks from input and dropdowns in dash core components. Debounce allows us to trigger callbacks on the input after losing focus or pressing Enter Key, instead of firing the callback for each letter typed in the input box.
It would be great if dmc.Button()
had an href
keyword argument, so that a button click can route to a URL
Hi
Thanks for putting this together and your help earlier with Loader. May I request for a loader component similar to the below. The one you helped with earlier, seems to work with a Button. I now have a requirement to show loader when, say, the page/tab loads. One option is to use Skeleton, however, I feel Loader looks better
https://dash.plotly.com/dash-core-components/loading
please do let me know if there is a way to achieve this and sorry if I missed anything
Thanks
Hi
I'm starting this thread as I need some help from the community in creating the documentation for the library.
I have started a project dmc-demo for this, and its deployed here. The latest version that's been released is 0.2.1, but before I move on with further releases, I'd like to work on the documentation, without which, people can obviously not use it properly.
I am already looking at the docs for official dash components and the docs for dash bootstrap components.
If anyone has any suggestions for the docs or some resources I can use, or some pointers for starting out, please do provide them.
Thanks
I've been experiencing this issue lately with dmc.RadioGroup.
Using the docs example :
dmc.RadioGroup( id="radiogroup", data=[ {"value": "react", "label": "React"}, {"value": "ng", "label": "Angular"}, {"value": "svelte", "label": "Svelte"}, {"value": "vue", "label": "Vue"}, ], value="react", label="Select your favorite framework/library", size="sm", )
This is how the output looks like:
I can't still click on the options but it doesn't display the same way as in the demo.
Hi,
I was going through Readme and none of the examples are present right now.
This is an amazing package @snehilvj. Thanks for creating it.
I would like to help with examples of things if you will allow me.
Thanks and Regards,
Karan
Hi there,
This is an underappreciated and underadvertised project! I'm so glad I came across this today. Excellent work! Please continue!
Cheers,
Don
Hello,
When upgrading from v0.5.0 to v0.6.0, the behavior of the accordion component appears to have changed. The first screenshot is when using v0.5.0:
This second screenshot is the exact same code but is using v0.6.0 of dmc:
I can do some more debugging on my end but first I wanted to check and see if anything was intentionally changed with the accordion component for this update.
Thanks in advance for any help!
When I want to select the same dates subsequently it's not working properly. The input field remains blank. It works when I click on the clear X symbol, but not when I select it.
Callback for blank value field is sadly also not triggered. Again, when I hit 'X' button, callback is triggered.
I'm including the video demonstration using docs daterangepicker as an example:
In the first part of the video you see broken behavior (without 'X' button), callback is not triggered. In the second part (with 'X' button), everything works as expected, callback in Dash is triggered.
The same unexpected behavior is also applied for allowSingleDateInRange=True
.
Otherwise, I really appreciate all of the effort you put into this project. It's great.
Thanks!
I noticed that dash bootstrap components have deprecated the className
keyword in favor of class_name
. Have you made any thoughts about which convention to follow, @snehilvj? If you end up choosing to follow that convention (i.e. to use class_name
), I guess it would be better to make the switch sooner than later.
I already saw the implementation. Is it possible to add it as a component for python. If I install the latest version, Slider is available but RangeSlider isn't.
Would be great. Thanks
Hello,
I’d like to make a submittable form.
In order to do so, the inputs will need to be able to have the name attribute optional. Up to you if defaults to id.
The button will need to be able to have the type attribute optional with default type as button.
In dcc(Dash core components), the Dropdown component has search_value parameter.
But in dmc,the MultiSelect component has no such parameter.
I can not get serach value in my callback directly.
I have recently come across this package and I must say I have been very impressed by it. I am still pretty new in this but I am not sure whether it is possible to do scrolling within a drawer if the content exceeds the screen size.
Thanks!
Congratulations on such an awesome development!
Any plans for supporting the RangeSlider component? It seems to be available in Mantine, so I hope it is not hard work.
Thank you in advance!
Trying to use a number input to update the slider component, but it's not possible.
Example of code:
app.layout = html.Div(
[
dmc.NumberInput(
id="input_number",
min=0,
max=100
),
dmc.Slider(
id="slider",
min=0,
max=100
)
],
)
@app.callback(
Output("slider", "value"),
Input("input_number", "value"),
)
def uptade_input_value(value):
return value
As suggested in forum,
Adding a dropdownClosed
prop will enable triggering callbacks after a user is done selecting all the desired values.
dmc.AccordionItem
needs style
and class_name
properties to allow for component-level styling.
Would also be very useful for dmc.AccordionItem
to have a boolean opened
property that indicates whether or not the item is opened.
import dash
app = dash.Dash(external_stylesheets=[dbc.themes.BOOTSTRAP])
import dash_mantine_components as dmc
from dash import Output, Input, html
# from dash_iconify import DashIconify
app.layout = dmc.NotificationsProvider(
[
html.Div(id="notifications-container"),
dmc.Button("Show Notification", id="notify"),
]
)
@app.callback(
Output("notifications-container", "children"),
Input("notify", "n_clicks"),
prevent_initial_call=True,
)
def n_clicks(n_clicks):
return dmc.Notification(
title="Hey there!",
id="simple-notify",
action="show",
message="Notifications in Dash, Awesome!",
# icon=[DashIconify(icon="ic:round-celebration")],
)
if __name__ == "__main__":
app.run_server(debug=True)
Please could you add this to anaconda and/or conda-forge sources? Thank you.
Hi, first of all thanks for porting this amazing library!
My dash application works perfectly when launched in debug mode, but when deactivating it the application will not load, in developer settings I can see it's due to:
The resource from “https://unpkg.com/[email protected]/dash_mantine_components/dash_mantine_components.min.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff)
When a Tooltip
is used with a disabled component, the tooltip doesn't disappear on hover end (unless the mouse is moved "out of the component" via the tooltip itself). As a result, the tooltip just "keeps hanging",
Here is a minimal example,
import dash
import dash_mantine_components as dmc
app = dash.Dash()
app.layout = dmc.Tooltip(dmc.Button("Click me", disabled=True), label="I am a tooltip")
if __name__ == '__main__':
app.run_server()
DMC is missing a debounce property similar to use-debounced-state
hook in mantineJS. This would be useful for situations where you need to check if input exist in firestore.
dmc.TextInput(
label="Project Name",
id=project_name,
style={"width": 200, "margin": "auto"},
placeholder="Potato Project",
required=True,
),
def does_project_exists(project_name):
"""Check if project exists in firestore.
Args:
project_name ( String ): Name of project
Returns:
_bool_: returns True if project exists
"""
doc_ref = firebase_init.db.collection("projects").document(project_name)
doc = doc_ref.get()
return doc.exists
@callback(
Output("project_name_input", "error"),
Input("project_name_input", "value"),
prevent_initial_update=True,
)
def update_project_name_error(project_name):
if project_name is None or project_name == "":
return "Don't leave me blank!"
elif does_project_exists(project_name):
return "Project already exists!"
else:
return False
With current textInput, Project Names like "supercalifragilisticexpialidocious" will have 34 reads in firebase which will make me broke. Since the callback will trigger everytime there's a key press.
Hello,
I have the following snippet of code:
import dash
from dash import html, Output, Input
import dash_mantine_components as dmc
app = dash.Dash(__name__)
code = dmc.Prism(
language="python",
children="""# Kadane's Algorithm
class Solution:
def maxSubArray(self, nums: List[int]) -> int:
curr, summ = nums[0], nums[0]
for n in nums[1:]:
curr = max(n, curr + n)
summ = max(summ, curr)
return summ""",
)
app.layout = html.Div(
[
code,
]
)
app.run_server(debug=True)
If I run it on my laptop (ubuntu 22.04), it works like a charm, but if I run it on a remote server (centos7), the copy-to-clipboard button does not work. In both cases, I access the app with firefox on my laptop (Version 103.0.2).
Dash is not returning any error, and I can see the button animated, but it does not go green and nothing is copied.
Any ideas what could go wrong?
In all cases:
dash 2.6.0
dmc 0.10.2
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.