Custom draggable Div widget

[Suicoleiro]

Dear all,

Bokeh is a really cool and powerful library for interactive data visualization and I’m using it on a daily basis. I’m now at a point where I would like to explore creating custom extensions that get my work even more productive. One of the topics is around new data coming in and starting with exploratory data analysis.

Previously, I used the JMP SAS Tool for data analysis and visualization, typically starting with a chart builder helping in familiarzing with the data set. Inspired by this, I’m imagining creating something like:

• data stored as Bokeh CDS
• variables of the CDS as draggable elements (likely Divs) categorized into groups (e.g. numeric, categorical, datetime)
• drop zones for x-/y-axis values, x-/y-groups, color-variable, size-variable etc.

I know, we can achieve this today by simply using existing widgets such as Dropdowns, MultiChoice, CheckboxButtonGroup, etc. However, I really would like to try working on a customized DragDropDiv Widget for both, faster EDA but also getting familar with Bokeh custom extension.

Since I’m not yet familiar with writing the typescript part of the extension, it would be really nice if someone could help me with the first steps, e.g. reproducing a relative simple drag and drop as described in https://www.w3schools.com/html/html5_draganddrop.asp

My very first questions would be

• Does my assumption sound reasonable to create the custom model by extending the existing Div or would I need to start at a lower level?

export class DragDropDiv extends Div {
  properties: DragDropDiv.Props
  __view_type__: DragDropDivView

• How to extend a Div and add properties such as draggable=Bool(default=False) or ondragstart="drag(event)"

Any help highly appreciated!

Here a rough mockup how I envision to use draggable Divs connected to Bokeh CDS

Thanks very much!