add drag and drop based on @btel's work #2720

wolfv · 2020-01-10T17:25:19Z

No description provided.

packages/controls/src/widget_dragdrop.ts

pbugnion · 2020-01-11T09:59:55Z

I thought this was great, thank you! I added a comment inline.

ipywidgets/widgets/widget_dragdrop.py

packages/controls/src/widget_dragdrop.ts

SylvainCorlay · 2020-01-16T17:53:10Z

This looks good to me :)

martinRenou

LGTM!

jtpio · 2020-01-17T17:32:47Z

docs/source/examples/Drag and Drop.ipynb

+   "cell_type": "markdown",
+   "metadata": {},
+   "source": [
+    "`DraggableLabel` is a label that can be dragged and dropped to other fields."


It looks like DraggableLabel can be removed from the example notebook?

Never mind that, I thought it was initially imported from ipywidgets (https://github.com/jupyter-widgets/ipywidgets/pull/2363/files for reference).

Indeed, the initial implementation had a DraggableLabel, but we removed it in favor of the more general DraggableBox.

packages/controls/src/widget_dragdrop.ts

jtpio · 2020-01-17T18:32:17Z

Really neat:

SylvainCorlay · 2020-01-18T12:11:20Z

I am in favor of merging this. Leaving it open for a little bit more so that @wolfv gets to fix the small inline comments.

jtpio · 2020-01-18T12:25:44Z

@wolfv the fix for JupyterLab: wolfv#1

jtpio · 2020-01-20T08:57:21Z

packages/controls/src/widget_dragdrop.ts

+
+        this.pWidget.addClass('jupyter-widgets');
+        this.pWidget.addClass('widget-container');
+        this.pWidget.addClass('widget-draggable-box');


Is this class needed? It doesn't seem to be used.

I think I just tried to follow conventions:

ipywidgets/packages/controls/src/widget_box.ts

Lines 83 to 85 in 7cb20cd

this.pWidget.addClass('jupyter-widgets');

this.pWidget.addClass('widget-container');

this.pWidget.addClass('widget-box');

someone who wants to style the drag drop widgets might want to add CSS to this?
On the other hand, the two leaf classes should probably add another class as well.

someone who wants to style the drag drop widgets might want to add CSS to this?

That could indeed be useful.

For the case of the widget_box, there is actually some default css:

ipywidgets/packages/controls/css/widgets-base.css

Lines 98 to 103 in 7cb20cd

.widget-box {

box-sizing: border-box;

display: flex;

margin: 0;

overflow: auto;

}

jtpio · 2020-01-20T10:05:56Z

@wolfv a quick pass on the example notebook here, let me know what you think: wolfv#3

jtpio · 2020-01-20T10:53:33Z

Maybe we'll want to look into adding the dragenter and dragleave events in a separate PR? It could be useful to give visual feedback of what and where widgets can be dropped:

wolfv · 2020-01-20T13:19:10Z

One thing that I am afraid of with these additional events is that depending on the latency, things might get out of order on slow connections ...

E.g. if we had a drag_start event and allow to modify drag_data, we somehow need to guarantee that the new drag_data is set before the widget is dropped etc.

jtpio · 2020-01-20T13:24:02Z

Yes it sounds like there could be some race conditions indeed.

If we want to still be able to add a visual feedback, an alternative could be to keep these events on the frontend and provide a way to customize the hover effect (for example by setting hover_style).

wolfv · 2020-01-21T07:58:32Z

Agree, adding a CSS class on hover would be nice! I was thinking to keep this PR minimal to make sure it gets in, then we can build on top :)

btel · 2020-01-21T11:00:43Z

LGTM. Thanks for updating to code and adding awesome examples @wolfv @jtpio !

jtpio · 2020-01-23T12:07:54Z

Another iteration on the example notebook, to add a "Dashboard Builder" section using the AppLayout widget:

cc @wolfv: it's in wolfv#4

wolfv · 2020-01-23T12:20:44Z

Impressive!

Alexboiboi · 2020-01-31T00:36:53Z

This looks so promising, can't wait to use it in my projects ;)

btel · 2020-02-02T00:07:59Z

That's insane! Thanks @jtpio. I didn't even know that you can create a window with a widget view. It's only a step away from an interactive builder for voila dashboards ;-)

wolfv · 2020-04-01T17:14:05Z

I rebased & regenerated the spec :)

jtpio · 2020-04-01T17:19:19Z

Thanks @wolfv!

The docs failure seems relevant and related to #2746 (new in master since the last rebase).

wolfv · 2020-04-01T17:29:52Z

Tried to fix it :)

jtpio · 2020-04-01T17:33:25Z

Looks good 👍

vidartf · 2020-04-06T09:55:16Z

ipywidgets/widgets/widget_dragdrop.py

+
+        if data.get('application/vnd.jupyter.widget-view+json'):
+            widget_mime = json.loads(data['application/vnd.jupyter.widget-view+json'])
+            data['widget'] = widget_serialization['from_json']('IPY_MODEL_' + widget_mime['model_id'])


I'm thinking about this. Why is this method exposed as an API method? If the user is meant to use it from the kernel side, should we not handle the deserialization of the widget reference before calling this? This way, any kernel use could simply pass a widget reference as widget, and not have to worry about the model_id.

maij · 2020-07-13T00:15:23Z

This is a really nice addition! Is the on_drop callback extensible to handle more than widgets in the future, e.g. dragging an out-of-browser file into a widget?

giswqs · 2020-12-13T15:47:37Z

When will this drag and drop functionality be available? I can't wait to try this out.

aditya-giri · 2020-12-27T06:24:05Z

Any ETA on this? This would be very useful for me.

epifanio · 2021-06-01T18:20:16Z

Any ETA on this? This would be very useful for me.

Wondering about the same. such a feature would be very useful for building dynamic dashboards.

gregfreeman · 2023-07-15T21:58:09Z

I rebased this PR and fixed some minor issues. gf_drag_drop. I think this is a really cool feature. Shall I create another PR?

wolfv · 2023-07-16T11:02:55Z

yes, please! :)

pbugnion reviewed Jan 11, 2020

View reviewed changes

packages/controls/src/widget_dragdrop.ts Outdated Show resolved Hide resolved

SylvainCorlay reviewed Jan 11, 2020

View reviewed changes

ipywidgets/widgets/widget_dragdrop.py Show resolved Hide resolved

wolfv force-pushed the new_drag_drop branch from 0ff65f5 to 68d2128 Compare January 11, 2020 11:11

SylvainCorlay reviewed Jan 16, 2020

View reviewed changes

ipywidgets/widgets/widget_dragdrop.py Outdated Show resolved Hide resolved

SylvainCorlay reviewed Jan 16, 2020

View reviewed changes

packages/controls/src/widget_dragdrop.ts Outdated Show resolved Hide resolved

jasongrout added this to the 8.0 milestone Jan 17, 2020

martinRenou approved these changes Jan 17, 2020

View reviewed changes

jtpio reviewed Jan 17, 2020

View reviewed changes

packages/controls/src/widget_dragdrop.ts Outdated Show resolved Hide resolved

jtpio reviewed Jan 20, 2020

View reviewed changes

jasongrout assigned jtpio Mar 30, 2020

btel and others added 4 commits April 1, 2020 19:11

add drag and drop based on @btel's work

985520f

fix linter issues

fa5a9d8

fix up spec

e39bc44

finalize PR

711a177

SylvainCorlay and others added 7 commits April 1, 2020 19:12

Drop backbone

409462f

Add jquery import to widget_dragdrop.ts

d3321ff

remove unused code

d97dbe0

Fix drag and drop widget docstring

a343d15

Update Drag and Drop example notebook

0fac96c

Add Dashboard Builder section in DnD notebook

8ab3a4c

regenerate spec

57b64dc

wolfv force-pushed the new_drag_drop branch from d39e5ae to 57b64dc Compare April 1, 2020 17:13

fix set_title

d52e9aa

vidartf requested changes Apr 6, 2020

View reviewed changes

jasongrout modified the milestones: 8.0, 8.1 Feb 2, 2021

gregfreeman mentioned this pull request Jul 15, 2023

add drag and drop based on @btel's and @wolfv's work #3803

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

add drag and drop based on @btel's work #2720

add drag and drop based on @btel's work #2720

wolfv commented Jan 10, 2020

pbugnion commented Jan 11, 2020

SylvainCorlay commented Jan 16, 2020

martinRenou left a comment

jtpio Jan 17, 2020 •

edited

Loading

jtpio Jan 17, 2020 •

edited

Loading

wolfv Jan 17, 2020

jtpio commented Jan 17, 2020

SylvainCorlay commented Jan 18, 2020 •

edited

Loading

jtpio commented Jan 18, 2020

jtpio Jan 20, 2020

wolfv Jan 20, 2020

jtpio Jan 20, 2020

jtpio commented Jan 20, 2020

jtpio commented Jan 20, 2020

wolfv commented Jan 20, 2020

jtpio commented Jan 20, 2020

wolfv commented Jan 21, 2020

btel commented Jan 21, 2020

jtpio commented Jan 23, 2020

wolfv commented Jan 23, 2020

Alexboiboi commented Jan 31, 2020

btel commented Feb 2, 2020

wolfv commented Apr 1, 2020

jtpio commented Apr 1, 2020

wolfv commented Apr 1, 2020

jtpio commented Apr 1, 2020

vidartf Apr 6, 2020 •

edited

Loading

maij commented Jul 13, 2020

giswqs commented Dec 13, 2020

aditya-giri commented Dec 27, 2020

epifanio commented Jun 1, 2021

gregfreeman commented Jul 15, 2023

wolfv commented Jul 16, 2023

	this.pWidget.addClass('jupyter-widgets');
	this.pWidget.addClass('widget-container');
	this.pWidget.addClass('widget-box');

	.widget-box {
	box-sizing: border-box;
	display: flex;
	margin: 0;
	overflow: auto;
	}

add drag and drop based on @btel's work #2720

Are you sure you want to change the base?

add drag and drop based on @btel's work #2720

Conversation

wolfv commented Jan 10, 2020

pbugnion commented Jan 11, 2020

SylvainCorlay commented Jan 16, 2020

martinRenou left a comment

Choose a reason for hiding this comment

jtpio Jan 17, 2020 • edited Loading

Choose a reason for hiding this comment

jtpio Jan 17, 2020 • edited Loading

Choose a reason for hiding this comment

wolfv Jan 17, 2020

Choose a reason for hiding this comment

jtpio commented Jan 17, 2020

SylvainCorlay commented Jan 18, 2020 • edited Loading

jtpio commented Jan 18, 2020

jtpio Jan 20, 2020

Choose a reason for hiding this comment

wolfv Jan 20, 2020

Choose a reason for hiding this comment

jtpio Jan 20, 2020

Choose a reason for hiding this comment

jtpio commented Jan 20, 2020

jtpio commented Jan 20, 2020

wolfv commented Jan 20, 2020

jtpio commented Jan 20, 2020

wolfv commented Jan 21, 2020

btel commented Jan 21, 2020

jtpio commented Jan 23, 2020

wolfv commented Jan 23, 2020

Alexboiboi commented Jan 31, 2020

btel commented Feb 2, 2020

wolfv commented Apr 1, 2020

jtpio commented Apr 1, 2020

wolfv commented Apr 1, 2020

jtpio commented Apr 1, 2020

vidartf Apr 6, 2020 • edited Loading

Choose a reason for hiding this comment

maij commented Jul 13, 2020

giswqs commented Dec 13, 2020

aditya-giri commented Dec 27, 2020

epifanio commented Jun 1, 2021

gregfreeman commented Jul 15, 2023

wolfv commented Jul 16, 2023

jtpio Jan 17, 2020 •

edited

Loading

jtpio Jan 17, 2020 •

edited

Loading

SylvainCorlay commented Jan 18, 2020 •

edited

Loading

vidartf Apr 6, 2020 •

edited

Loading