Steps To Implement
- You need to already create the vite vanilla JS custom component in part 2 or this series
- From the
templatefolder - Add the @antv/g9 library
cd vite_vanilla_component/frontend
npm i @antv/g6
- insert the code below just after
import { Streamlit } from 'streamlit-component-lib'on or near the top of themain.jsfile
import G6 from '@antv/g6';
const gdata = {
nodes: [
{ id: 'node1', x: 50, y: 350, label: 'A', },
{ id: 'node2', x: 250, y: 150, label: 'B', },
{ id: 'node3', x: 450, y: 350, label: 'C', },
],
edges: [],
};
for (let i = 0; i < 10; i++) {
gdata.edges.push({ source: 'node1', target: 'node2', label: `${i}th edge of A-B`, });
}
for (let i = 0; i < 5; i++) {
gdata.edges.push({ source: 'node2', target: 'node3', label: `${i}th edge of B-C`, });
}
const container = document.body.appendChild(document.createElement("div"))
container.setAttribute('id', 'container');
G6.Util.processParallelEdges(gdata.edges);
const width = document.getElementById('container').scrollWidth;
const height = document.getElementById('container').scrollHeight || 500;
console.log(width, height)
const graph = new G6.Graph({
container: 'container',
width,
height,
// translate the graph to align the canvas's center, support by v3.5.1
fitCenter: true,
// the edges are linked to the center of source and target ndoes
linkCenter: true,
defaultNode: {
type: 'circle',
size: [40],
color: '#5B8FF9',
style: { fill: '#9EC9FF', lineWidth: 3, },
labelCfg: {
style: { fill: '#000', fontSize: 14, },
},
},
defaultEdge: {
type: 'quadratic',
labelCfg: { autoRotate: true, },
},
modes: {
default: ['drag-canvas', 'drag-node'],
},
nodeStateStyles: {
hover: { fillOpacity: 0.8, },
selected: { lineWidth: 5, },
},
});
graph.data(gdata);
graph.render();
Running
The steps to run are the same as in previous article (right click and open new tab).
You should see the following when navigating to the component url:
Further Improvements
The following are improvements that can be done once the code is added:
- Allow end-user to pass in g6 config, nodes and edges from python code
- Add graph event listeners to record last clicked node
- Modify the button to send last clicked node information back
Top comments (0)