inex
/
index.community
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

nicer graph sizes

This commit is contained in:
Tao Bror Bojlén 2019-07-19 17:59:07 +03:00
parent dcd63c71f2
commit 500cc5b758
No known key found for this signature in database
GPG Key ID: C6EC7AAB905F9E6F
1 changed files with 10 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/Cytoscape.tsx
View File

@ -25,23 +25,7 @@ class Cytoscape extends React.Component<ICytoscapeProps> {
this.cy = cytoscape({
autoungrabify: true,
container: container as any,
elements: {
...this.props.elements,
edges: this.props.elements.edges.map(e => ({
...e,
data: {
...e.data,
weight: Math.min(Math.max(e.data.weight * 10, 0.5), 5)
}
})),
nodes: this.props.elements.nodes.map(n => ({
...n,
data: {
...n.data,
size: Math.min(Math.max(n.data.size * 20, 1), 100)
}
}))
},
elements: this.props.elements,
hideEdgesOnViewport: true,
hideLabelsOnViewport: true,
layout: {
@ -60,9 +44,13 @@ class Cytoscape extends React.Component<ICytoscapeProps> {
.selector("node")
.style({
"background-color": DEFAULT_NODE_COLOR,
height: "data(size)",
// The size from the backend is log_10(userCount), which from 10 <= userCount <= 1,000,000 gives us the range
// 1-6. We map this to the range of sizes we want.
// TODO: I should probably check that that the backend is actually using log_10 and not log_e, but it look
// quite good as it is, so...
height: "mapData(size, 1, 6, 20, 200)",
label: "data(id)",
width: "data(size)"
width: "mapData(size, 1, 6, 20, 200)"
})
.selector("node:selected")
.style({
@ -72,12 +60,12 @@ class Cytoscape extends React.Component<ICytoscapeProps> {
.style({
"curve-style": "haystack", // fast edges
"line-color": DEFAULT_NODE_COLOR,
width: "data(weight)"
width: "mapData(weight, 0, 0.5, 0.5, 20)"
})
.selector("node[label]")
.style({
color: "black",
"font-size": "mapData(size, 1, 100, 6, 50)",
"font-size": "mapData(size, 4, 6, 20, 50)",
"min-zoomed-font-size": 16,
"text-background-color": DEFAULT_NODE_COLOR,
"text-background-opacity": 0.5,
@ -97,7 +85,7 @@ class Cytoscape extends React.Component<ICytoscapeProps> {
this.cy.on("click", e => {
// Clicking on the background should also deselect
const target = e.target;
if (!target.isNode()) {
if (!target) {
this.props.onInstanceDeselect();
}
});