New component Visgraph

Hello everyone,
I tested the agraph component (@chris_klose) for graph visualization but it isn’t suitable to our need. So I wrote a new component based on vis network.
It has been published here: streamlit-visgraph

Key functionalities:

2 Likes

hey @tbhuy,

looks fab :raised_hands:t3:. also @napoles3d did something with PyVis in a more static way, if I recall correctly.
May I ask what you missed with agraph? Tbh, I am also a big fan of PyVis as it has this funny bouncing options + the picture upload was a must for me.

Frankly speaking, I think this component could be more pythonic in a way that it would take parameters instead of long unreadable json.

Besides that, could you pass python functions to the component, convert it to javascript and pass it along and return a value of that function? This was something I missed with agraph and hardly found a way to solve.

Few more thoughts:

  • A Demo App would be great!
  • A Sidebar (right side with modification options would be insane - I never found the time)
  • Few more examples (e.g. how to open a node link)
  • Could you expand/collapse a node with streamlit visgraph?

Anyways, great work!

Best regards
Chris

2 Likes

+1

… and support for receiving graph events please? :upside_down_face:

2 Likes

Cool!

Feel free to add it to the Streamlit Components - Community Tracker so we don"t lose track of it :slight_smile:

Have a nice day
Fanilo :balloon:

@chris_klose I discovered PyVis too late, when all had been done. I tried to implement python classes as you did but I had to deal with complex nested json objects, will try again. Now there are only some basic functions required for my project.
And to open a node link, just double-click on it.

Hey @tbhuy nice to have a new tool for graph visualization in Streamlit. Thanks for the mention @chris_klose!

1 Like

@tbhuy Hi, after install this package , I run the code in github, it reported one error:

ModuleNotFoundError: No module named ‘streamlit_visgraph’
image

can you help me to fix it? Thank you.

import streamlit
from streamlit_visgraph import visgraph
nodes = [
          { 'id': 1, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/1.png" },
          { 'id': 2, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/2.png" },
          { 'id': 3, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/3.png" },
          {
            'id': 4,
            'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
            'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/4.png",
            'label': "pictures by this guy!",
          },
          { 'id': 5, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/5.png" },
          { 'id': 6, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/6.png" },
          { 'id': 7, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/7.png" },
          { 'id': 8, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/8.png" },
          { 'id': 9, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/9.png" },
          { 'id': 10, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/10.png" },
          { 'id': 11, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/11.png" },
          { 'id': 12, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/12.png" },
          { 'id': 13, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/13.png" },
          { 'id': 14, 'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/', 'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/14.png" },
          {
            'id': 15,
            'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
            'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missing.png",
            'brokenImage': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missingBrokenImage.png",
            'label': "no image load",
          },
          {
            'id': 16,
            'shape': "circularImage", 'title':"Double click to open <br/> <img width='200' height='200' src='https://www.pngall.com/wp-content/uploads/11/World-Wide-Web-Address-PNG.png'/>", 'url':'https://www.google.com/',
            'image': "https://visjs.github.io/vis-network/examples/network/img/indonesia/anotherMissing.png",
            'brokenImage': "https://visjs.github.io/vis-network/examples/network/img/indonesia/missingBrokenImage.png",
            'label': "no image load",
          },
        ];

edges = [
          { 'from': 1, 'to': 2 },
          { 'from': 2, 'to': 3 },
          { 'from': 2, 'to': 4 },
          { 'from': 4, 'to': 5 },
          { 'from': 4, 'to': 10 },
          { 'from': 4, 'to': 6 },
          { 'from': 6, 'to': 7 },
          { 'from': 7, 'to': 8 },
          { 'from': 8, 'to': 9 },
          { 'from': 8, 'to': 10 },
          { 'from': 10, 'to': 11 },
          { 'from': 11, 'to': 12 },
          { 'from': 12, 'to': 13 },
          { 'from': 13, 'to': 14 },
          { 'from': 9, 'to': 16 },
        ];
        
options = {
          'width': '1400px',
          'height':'800px',
          'nodes': {
            'borderWidth': 4,
            'size': 20,
            'color': {
              'border': "#222222",
              'background': "#666666",
            },
            'font': { 'color': "#eeeeee" },
          },
          'edges': {
            'color': "lightgray",
          },
        };    

             
k=visgraph.visgraph(nodes=nodes, edges=edges, options=options)