Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Interactive slicer example #48

Merged
merged 6 commits into from
Dec 17, 2020
Merged

Interactive slicer example #48

merged 6 commits into from
Dec 17, 2020

Conversation

surchs
Copy link
Contributor

@surchs surchs commented Dec 15, 2020

small example that shows how to link three slicers to an interactive table-like element that both displays the current slicer positions and allows user input to change them.

image

verbose labeling

- uses input fields to both display and change slider position
- uses three viewers for volume
also unhide the sliders
@almarklein
Copy link
Collaborator

Nice! Looking good, and nicely commented so its easy to follow along. Could you also add a docstring at the top to briefly explain the purpose of the example?

CI is stuck on formatting. Run black . to auto-format the code, and flake8 . to check for any linting errors. You may need to pip install -U black flake8 first. This repo uses the latest version of Black, but Plotly projects are pinned to an older version. I could do the black-ing if you want.

@surchs
Copy link
Contributor Author

surchs commented Dec 16, 2020

ok, I added a short comment at the start. The file was already run through black before, I removed some unused imports now. I am not sure why the CI is failing, but there were some larger CI issues recently (e.g. plotly/dash-html-components#170)
edit: apparently it is black failing. So I'll recheck again
edit2:
Still confused, this is my black output on the current file:

➜ black set_slicer_position_interactively.py 
All done! ✨ 🍰 ✨
1 file left unchanged.
(black) 

@almarklein
Copy link
Collaborator

Probably a different version of black. It's annoying :/

@surchs
Copy link
Contributor Author

surchs commented Dec 16, 2020

One thing I just thought of while implementing this in my own app: why do we even need the secondary slider here? can't we just listen directly for the "drag_value" event from the "builtin" slider? That should also break the circularity, no?

@almarklein
Copy link
Collaborator

Yeah, either listening to slicer.slider.drag_value or slicer.state.data should do the trick. The latter may be better, since drag_value is not released yet.

I thought that the extra slider was a deliberate thing to show that it can be done :P

@surchs
Copy link
Contributor Author

surchs commented Dec 16, 2020

Ah, good point. Yeah let's say that was the intention :). I think it does serve that purpose (to see the difference between drag and mouse-up).

@almarklein
Copy link
Collaborator

Yeah, but perhaps still better to remove it, since users won't be able to run the example otherwise, until a new dcc is released (and the users upgrade).

@almarklein
Copy link
Collaborator

I just ran black on the code. Let's merge this as-is. We can always remove the sliders later if needed. This example is really nice!

@almarklein almarklein merged commit 75e2f8b into main Dec 17, 2020
@almarklein almarklein deleted the interactive_slicer_example branch December 17, 2020 10:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants