[Share] Visdcc - a dash core components for vis.js network

Dash Python
41

Thanks @jimmybow! That was an easy fix!!!

42

First, thanks so much for your work on visdcc.

I posted a question about a problem I’m running into on a new thread in this forum, but I’ll post a link here in case it might help other users. If you have the time, would you mind taking a look?

43

Hi again,

I’m creating a relatively large network and it takes a while for the code to load. I saw that vis.js supports loading bars via stabilization events as in the example here: Vis Network | Example Applications | Loading Bar (stabilizationProgress, stabilizationIterationsDone events from the associated CodePen)

I’m not a great JavaScript programmer, but it would seem that in order to do this, we could use your Run_js module if we had access to the vis.js network variable. Is this correct? Could you give me some indications of how to implement a loading bar via visdcc?

1 Like
44

Woooaw! This is really an great component for interactive network visualization in Python and Dash.
But few examples/Demos. It would be a nice help to have demos reproduced from Vis.js examples (eg: Loading Bar, World Cup Network, …).

45

@jimmybow I’ve been wrestling with specifying starting coordinates as well as fixed coordinates for some nodes in my physics-based, non-hierarchical graphs. No matter what I try, these inputs seem to be ignored. Do you have suggestions for what I might be overlooking? Thanks for any help!

nodes = [{
    "id": row[1]["num_id"],
    "mass": (max_mass - 1)*(max_count - row[1]["Close Counts"])/max_count + 1,
} for row in node_df.iterrows()]

nodes2 = []
for node in nodes:
    if node["id"] == selected_device_id:
        node["fixed"] = dict(x=0, y=0)
        node["x"] = 0
        node["y"] = 0

    elif node["id"] not in device_id_ls:
        node["fixed"] = False
        node["x"] = max_edge_len
        node["y"] = max_edge_len

    nodes2.append(node)
nodes = nodes2

edges = [{
    "id": str(selected_device_id) + "-" + str(row[1]["name"]),
    "from": selected_device_id,
    "to": row[1]["num_id"],
    "length": (max_edge_len - 1)*(max_count - row[1]["Close Counts"])/max_count + 1
} for row in edge_df.iterrows()]
46

Hi!
I have been using dash cytoscape to visualize and interact with a rather complex network graph. Seems like visdcc could be a more flexible alternative. However, I wonder whether it would be possible to expand/collapse nodes on click/tap?

48

you can see this decision tree example :slightly_smiling_face: GitHub - jimmybow/tree_vis: Dash app with decision tree.

49

HI ALL,
I add a new feature on visdcc.Network to free javascript function of vis.js
you can use this.net in javascript to get the instance of vis.Network :slightly_smiling_face:

@app.callback(
    Output('net', 'run'),
    [Input('node', 'value')])
def myfun(x):
    if x == '': return ""
    else: 
        javascript = "this.net.fit({{'nodes':[{}], 'animation': true}})".format(x)
        print(javascript)
        return javascript

see the new v0.0.50 example code

50

see the new v0.0.50 example code

51

For the Point 2,
try to use new v0.0.50 feature to call vis.js API
example code