Improve Graph layout

Some minor styling.
This commit is contained in:
Tuan Cao 2022-04-15 15:07:36 +07:00
parent 047caf1695
commit fed481d2a9

View File

@ -1,78 +1,63 @@
import React, {useEffect, useRef, useState} from 'react';
// import cytoscape from 'cytoscape';
// import cola from 'cytoscape-cola';
import CytoscapeComponent from "react-cytoscapejs";
const layout = {
name: "breadthfirst",
fit: true,
circle: true,
directed: true,
padding: 50,
spacingFactor: 1.5,
animate: true,
// animationDuration: 300,
avoidOverlap: false,
nodeDimensionsIncludeLabels: true
name: 'circle',
fit: true, // whether to fit the viewport to the graph
padding: 32, // the padding on fit
boundingBox: undefined, // constrain layout bounds; { x1, y1, x2, y2 } or { x1, y1, w, h }
avoidOverlap: true, // prevents node overlap, may overflow boundingBox and radius if not enough space
nodeDimensionsIncludeLabels: false, // Excludes the label when calculating node bounding boxes for the layout algorithm
spacingFactor: 0.9, // Applies a multiplicative factor (>0) to expand or compress the overall area that the nodes take up
radius: 150, // the radius of the circle
startAngle: -2 / 4 * Math.PI, // where nodes start in radians
//sweep: undefined, // how many radians should be between the first and last node (defaults to full circle)
clockwise: true, // whether the layout should go clockwise (true) or counterclockwise/anticlockwise (false)
sort: undefined, // a sorting function to order the nodes; e.g. function(a, b){ return a.data('weight') - b.data('weight') }
animate: false, // whether to transition the node positions
animationDuration: 500, // duration of animation in ms if enabled
animationEasing: undefined, // easing of animation if enabled
//animateFilter: function ( node, i ){ return true; }, // a function that determines whether the node should be animated. All nodes animated by default on animate enabled. Non-animated nodes are positioned immediately when the layout starts
ready: undefined, // callback on layoutready
stop: undefined, // callback on layoutstop
transform: function (node, position) {
return position;
} // transform a given node position. Useful for changing flow direction in discrete layouts
};
const styleSheet = [
{
selector: "node",
style: {
backgroundColor: "#4a56a6",
width: 10,
height: 10,
label: "data(label)",
// "width": "mapData(score, 0, 0.006769776522008331, 20, 60)",
// "height": "mapData(score, 0, 0.006769776522008331, 20, 60)",
// "text-valign": "center",
// "text-halign": "center",
"overlay-padding": "6px",
"z-index": "10",
//text props
"text-outline-color": "#4a56a6",
"text-outline-width": "1px",
color: "red",
fontSize: 20
}
},
{
selector: "node:selected",
style: {
"border-width": "6px",
"border-color": "#AAD8FF",
"border-opacity": "0.5",
"background-color": "#77828C",
width: 50,
height: 50,
//text props
"text-outline-color": "#77828C",
"text-outline-width": 1
}
},
{
selector: "node[type='device']",
style: {
shape: "square"
}
},
{
selector: "edge",
style: {
width: 3,
// "line-color": "#6774cb",
"line-color": "#AAD8FF",
"target-arrow-color": "#6774cb",
"target-arrow-shape": "triangle",
"curve-style": "bezier"
}
const styleSheet = [{
selector: "node",
style: {
"background-color": "#666",
"font-size": "10px",
"width": "20px",
"height": "20px"
//"label": el => el.data("id") === current ? "" : el.data('title') ? el.data("title").slice(0,16) : el.data("id")
}
];
}, {
selector: "label",
style: {"font-size": "12px"},
},
{
selector: 'edge',
style: {
'width': 2,
"height": 200,
'line-color': '#9a9a9a',
'target-arrow-color': '#ccc',
// 'target-arrow-shape': 'triangle',
'curve-style': 'bezier'
}
}];
function Graph({graph}) {
const [width, setWith] = useState("100%");
const [width, setWith] = useState("400px");
const [height, setHeight] = useState("400px");
const [graphData, setGraphData] = useState({
nodes: graph.nodes,
@ -94,7 +79,7 @@ function Graph({graph}) {
<CytoscapeComponent
elements={CytoscapeComponent.normalizeElements(graphData)}
// pan={{ x: 200, y: 200 }}
style={{ width: width, height: height }}
style={{width: width, height: height}}
zoomingEnabled={true}
maxZoom={2}
minZoom={0.5}