Adding drag_value to Slider #888

almarklein · 2020-12-01T21:41:37Z

closes #107, replaces #884

This is an attempt to add a drag_value property to the Slider, such that different callbacks can be applied to the slider being dragged, and the slider being released, as proposed in #107.

Disclaimer: I am not yet familiar with the codebase of this repo, so I just tried to update the new property where the value property was updated.

Todo:

The value is initially undefined, and I'm not sure how to initialize it to the same value as value.
Also implement this for RangeSlider.
update the docstring for updatemode to incorporate the new prop.
RangeSlicer should be updated to use the same approach as Slicer.
Tests.
More docs.

Script to test this:

import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output, State


app = dash.Dash(__name__, update_title=None)

app.layout = html.Div(
    [
        #dcc.Slider(id='slider', min=100, max=200, value=150),
        dcc.RangeSlider(id='slider', min=100, max=200, value=(133, 166)),
        html.Br(),
        html.Div(id='drag_value', children="drag_value:"),
        html.Div(id='value', children="value:"),
    ]
)

counts = {"drag_value": 0, "value": 0}

@app.callback(
    Output("drag_value", "children"),
    [Input("slider", "drag_value")],
)
def show_slider_drag_value(v):
    counts["drag_value"] += 1
    return f"drag_value: {v}  ({counts['drag_value']})"


@app.callback(
    Output("value", "children"),
    [Input("slider", "value")],
)
def show_slider_value(v):
    counts["value"] += 1
    return f"value: {v}  ({counts['value']})"


if __name__ == "__main__":
    app.run_server(debug=True)

src/components/Slider.react.js

Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>

alexcjohnson · 2020-12-08T23:01:36Z

@almarklein this PR is looking good! Seems like mainly it just needs a test or two added to test_sliders.py. That may be a bit tricky to get right, but seems like the test app would have a callback on both value and drag_value, then the test would require ActionChains like what we have for click_at_coord_fractions and presumably using click_and_hold then move_by_offset, then waiting for the right results to appear (and not appear) on the page, finally release and waiting for the other result to appear on the page.

…nts into drag_value2

src/fragments/Slider.react.js

almarklein · 2020-12-11T13:35:35Z

I refactored the code for the Slider a bit based on your suggestions. Using slider.value as an output now also updates slider.drag_value. This works fine locally (both in an example, and when running the test), but so far I have can't get CI working. Could you have a look at the current changes in fragments/Slider.react.js, and see if I am possibly missing something?

I have not updated the RangeSlider yet, not added a test for it, let's first get the slider working ...

almarklein · 2020-12-11T13:37:10Z

BTW, with assert dash_dcc.find_element("#out-drag-value").text == "You have dragged 5" I got to see the actual value: "You have dragged None".

Marc-Andre-Rivet · 2020-12-11T18:38:50Z

@alexcjohnson @almarklein I think the problem here is that the branch is out-of-date 1.13.0 https://github.com/almarklein/dash-core-components/blob/drag_value2/package.json#L3 and the current version is 1.14.1. Updating the branch will probably fix the tests.

You can see in the Run Integration Tests step of test-37 that the installed version of DCC is 1.14.1

Name: dash-core-components
Version: 1.14.1
Summary: Core component suite for Dash
Home-page: UNKNOWN
Author: Chris Parmer <chris@plotly.com>
Author-email: chris@plotly.com
License: MIT
Location: /home/circleci/project/venv/lib/python3.7/site-packages
Requires: 
Required-by: dash

alexcjohnson · 2020-12-11T19:39:47Z

Ah, so perhaps installing dash caused it to go fetch the published dcc 1.14.1 rather than use the source in this branch, because it listed a lower version number? I'm still confused by this, because even in the build-dash step on your merge commit I see it downloading a published version of dcc

Collecting dash-core-components==1.14.1 (from dash==1.18.1)
  Downloading https://files.pythonhosted.org/packages/0f/ab/5ffeeed41117383d02485f5b9204dcfaa074bfbb3ff2559afac7b904ad5c/dash_core_components-1.14.1.tar.gz (3.5MB)

So how do I know we're not using that version (other than that the test passes? Is there some way we could definitively check at the beginning of the test that the version of this repo that we're running is precisely the intended commit? Or set this up in a more robust way so this issue can't recur?

Marc-Andre-Rivet · 2020-12-11T20:18:57Z

@alexcjohnson Not sure about that. It's that way because we use the tarball from the previous build step -- in other repos we simply do pip install -e . and so the error would be more obvious.

almarklein · 2020-12-11T20:37:01Z

Wow, thanks @Marc-Andre-Rivet !

Marc-Andre-Rivet · 2020-12-11T20:55:59Z

@alexcjohnson I think we could simply pip uninstall dash-core-components -y before installing the local build and see it 💥 if misaligned.

almarklein · 2020-12-11T23:09:08Z

🎆 Ready from my end.

almarklein · 2020-12-12T18:54:35Z

About documentation, I think we'd need to add an example to the docs at the dash-docs repo, right?

tests/integration/sliders/test_sliders.py

…s on drag

alexcjohnson

Fantastic! 💃

Yes, the final step will be to add an example in dash-docs.

almarklein added 3 commits December 1, 2020 22:39

First stab at adding drag_value to Slider

d1505e8

Make an initial fire of drag_value with the value of 'value'

704a844

update updatemode docs

e74b519

almarklein requested review from alexcjohnson and Marc-Andre-Rivet as code owners December 1, 2020 21:41

almarklein mentioned this pull request Dec 1, 2020

Adding drag_value to Slider #884

Closed

4 tasks

almarklein added 2 commits December 2, 2020 12:17

Implement drag_value for RangeSlider

cbd7d22

lint

04dfd98

alexcjohnson reviewed Dec 2, 2020

View reviewed changes

src/components/Slider.react.js Outdated Show resolved Hide resolved

Update src/components/Slider.react.js

c7adc18

Co-authored-by: Alex Johnson <johnson.alex.c@gmail.com>

almarklein added 2 commits December 10, 2020 12:34

add tests for slider

f67f75c

Merge branch 'drag_value2' of github.com:almarklein/dash-core-compone…

fa6379f

…nts into drag_value2

almarklein requested a review from rpkyle as a code owner December 10, 2020 11:36

almarklein added 10 commits December 10, 2020 12:47

lint and add missing import

4763f78

black?

966f227

fix test, hopefully

4d0a3e2

fix test

a0740c2

fix test

7ddd835

fix test?

b9c72c4

fix?

0799af5

use exact same code as other example. Im running out of ideas

1be148f

bring test down to minimum

b3ccc08

also include output for value

24600cf

alexcjohnson reviewed Dec 10, 2020

View reviewed changes

src/fragments/Slider.react.js Outdated Show resolved Hide resolved

almarklein added 3 commits December 11, 2020 13:27

refactor slicer implementation a bit

82c8763

change test and tweak code

4c19122

maybe only the initialization fails?

773c881

Merge branch 'dev' into drag_value2

65a1ba0

update rangeslider and add a test for it

1322548

alexcjohnson reviewed Dec 14, 2020

View reviewed changes

tests/integration/sliders/test_sliders.py Show resolved Hide resolved

alexcjohnson reviewed Dec 14, 2020

View reviewed changes

tests/integration/sliders/test_sliders.py Show resolved Hide resolved

verify that value only changes on mouseup while drag_value change…

6c9bcda

…s on drag

alexcjohnson approved these changes Dec 14, 2020

View reviewed changes

alexcjohnson merged commit 7477eeb into plotly:dev Dec 14, 2020

almarklein deleted the drag_value2 branch December 14, 2020 12:57

harryturr mentioned this pull request Jan 18, 2021

Update CHANGELOG #915

Merged

dependabot bot mentioned this pull request Mar 12, 2021

Bump dash from 0.39.0 to 1.19.0 mstoelzle/solving-occlusion#28

Merged

alexcjohnson mentioned this pull request Feb 7, 2022

[Feature Request]Ability to have 'mouseup' and 'drag' for slider plotly/dash#1912

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adding drag_value to Slider #888

Adding drag_value to Slider #888

almarklein commented Dec 1, 2020 •

edited

Loading

alexcjohnson commented Dec 8, 2020 •

edited

Loading

almarklein commented Dec 11, 2020

almarklein commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

alexcjohnson commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

almarklein commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

almarklein commented Dec 11, 2020 •

edited

Loading

almarklein commented Dec 12, 2020

alexcjohnson left a comment

Adding drag_value to Slider #888

Adding drag_value to Slider #888

Conversation

almarklein commented Dec 1, 2020 • edited Loading

alexcjohnson commented Dec 8, 2020 • edited Loading

almarklein commented Dec 11, 2020

almarklein commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

alexcjohnson commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

almarklein commented Dec 11, 2020

Marc-Andre-Rivet commented Dec 11, 2020

almarklein commented Dec 11, 2020 • edited Loading

almarklein commented Dec 12, 2020

alexcjohnson left a comment

Choose a reason for hiding this comment

almarklein commented Dec 1, 2020 •

edited

Loading

alexcjohnson commented Dec 8, 2020 •

edited

Loading

almarklein commented Dec 11, 2020 •

edited

Loading