Can't draw with InteractiveCharts

[jartigag]

Hi, I'm trying the library just like I've seen on https://calmcode.io/human-learn/draw.html, but with my own data.
This is what I got:

from hulearn.experimental.interactive import InteractiveCharts
clf = InteractiveCharts(df_labeled, labels="cluster")

BokehJS 2.2.1 successfully loaded

clf.add_chart(x='dst_ip',y='avg_duration')

The graph appears, data is colored as expected and I can interact with it (zoom and so), but I can't draw the areas.

I'm using Python 3.7.3, IPython 7.14.0 and Jupyter 5.7.8

[koaning]

Just to check;

• are you sure that you are double-clicking to start a drawing?
• are you sure that you've clicked the color you'd like to draw first?

Also, what platform are you on? Windows? Mac? What browser?

The bokeh documentation has a small section here that explains the controls in more detail. Have copied the main points here:

The supported actions include:

- Add patch or multi-line: Double tap to add the first vertex, then use tap to
 add each subsequent vertex, to finalize the draw action double tap to insert 
the final vertex or press the <<esc> key.

- Move patch or ulti-line: Tap and drag an existing patch/multi-line, the point 
will be dropped once you let go of the mouse button.

- Delete patch or multi-line: Tap a patch/multi-line to select it then press 
<<backspace>> key while the mouse is within the plot area.

[jartigag]

I'm on Linux (Debian 10). I've tried on Firefox and Chrome, and I can't draw lines on neither of the two. I've also tried deactivating the ad blocker, just in case.

I can drag the graph and a box is shown when I zoom over an area, but doesn't react when I double-click...

Looking at the console in the browser, seems to be loaded correctly, though:

Bokeh: injecting script tag for BokehJS library:  https://cdn.bokeh.org/bokeh/release/bokeh-2.2.1.min.js main.min.js:240:15
Bokeh: injecting script tag for BokehJS library:  https://cdn.bokeh.org/bokeh/release/bokeh-widgets-2.2.1.min.js main.min.js:240:15
Bokeh: injecting script tag for BokehJS library:  https://cdn.bokeh.org/bokeh/release/bokeh-tables-2.2.1.min.js main.min.js:240:15
Bokeh: all BokehJS libraries/stylesheets loaded main.min.js:206:17
Bokeh: BokehJS plotting callback run at 
Date Sat Oct 10 2020 10:56:08 GMT+0200 (hora de verano de Europa central)
main.min.js:292:15
[bokeh] setting log level to: 'info' bokeh-2.2.1.min.js:188:1389
Bokeh: all callbacks have finished main.min.js:184:13
Bokeh: BokehJS plotting callback run at 
Date Sat Oct 10 2020 10:56:13 GMT+0200 (hora de verano de Europa central)
8daf1e29-5b47-42b2-bcda-cdefdbc979c9:160:15
Bokeh: all callbacks have finished 8daf1e29-5b47-42b2-bcda-cdefdbc979c9:32:13
[bokeh] Websocket connection 0 is now open bokeh-2.2.1.min.js:575:3556
[bokeh] document idle at 382 ms bokeh-2.2.1.min.js:166:1258
Bokeh items were rendered successfully bokeh-2.2.1.min.js:164:976

There's no logs there when I interact with the graph.

[jartigag]

I'm sorry! I've just restarted Jupyter and tried running the cell again and it works. There's only a bit of lag. Surely I didn't double-click for the first time, I tried to draw lines instead of the area or I was too impatient when I tried it 😅
Sorry again!

[koaning]

No worries. There's definately a learning curve there.

One question; could the video be improved to make this one point more clear? I can make another video for the docs too if you think that helps. If you hit your head here, others are bound to also appreciate extra guidance.

[jartigag]

Mmm maybe a visual indicator on the mouse when clicking / double-clicking would help.

I think I expected a faster response when drawing because there's no lag when drawing on the video, but I understand the demo is better this way.