dblclick event

[alpimarc]

Hi, I like and use both vis.js and the dcc. So your package is welcome to me. However, I don't find how to add a double click event to the network (I'd like to open specific url on dblclick on a node). Is it possible? Thanks

[jimmybow]

you can see visdcc.Run_js add event example code : https://github.com/jimmybow/visdcc#add-event-and-callback-

You need to add your double click Event listener to your node target, and just put window.open(yourt_url) in the listener function.

[alpimarc]

Thanks a lot. I'll test it.

[alpimarc]

I tried it but I don't see how to get access to the Network or the Nodes from the javascript or the Run_js. I'm not used to react. Could you please give me another hint please?

[jimmybow]

you're right ... , user define event listener don't work because you can't access the nodes target directly. you can try selection prop. of visdcc.Network to get the selected node event, double click is not supported currently. the example code is as following:

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

app = dash.Dash()

app.layout = html.Div([
      visdcc.Network(id = 'net',
                     selection = {'nodes':[], 'edges':[]},
                     options = dict(height= '600px', width= '100%')),
      html.Div(id = 'nodes'),
      html.Div(id = 'edges'),
      visdcc.Run_js(id = 'javascript')
])

@app.callback(
    Output('nodes', 'children'),
    [Input('net', 'selection')])
def myfun(x): 
    s = 'Selected nodes : '
    if len(x['nodes']) > 0 : s += str(x['nodes'][0])
    return s

@app.callback(
    Output('edges', 'children'),
    [Input('net', 'selection')])
def myfun(x): 
    s = 'Selected edges : '
    if len(x['edges']) > 0 : s = [s] + [html.Div(i) for i in x['edges']]
    return s

@app.callback(
    Output('javascript', 'run'),
    [Input('net', 'selection')])
def myfun(x): 
    if len(x['nodes']) > 0 :
        return "window.open('https://yahoo.com/')"
    return ""

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

[jimmybow]

I add a new feature on visdcc.Network you can try to use this.net in javascript to get the instance of vis.Network and add your own javascript event. see the new v0.0.50 example code