Edges don't render when nodes are farther away
vordimous opened this issue · comments
Screen.Recording.2024-04-26.at.11.16.59.AM.mov
The edges between nodes don't render unless the nodes are close enough to each other. Any idea why or if there is a setting I am not using?
This error is thrown in the console:
react-dom.development.js:798 Error: <path> attribute d: Expected number, "M479 1 327.5,L499 1 327.5,L 5…".
Dagre Graph object:
{
"_isDirected": true,
"_isMultigraph": false,
"_isCompound": true,
"_label": {
"rankdir": "LR",
},
"_nodes": {
"node-north_tcp_server": {
"width": 450,
"height": 100
},
"node-north_http_server": {
"width": 450,
"height": 100
},
"node-north_wss_tls_server": {
"width": 450,
"height": 100
},
"node-north_mqtt_server": {
"width": 450,
"height": 100
},
"node-north_mqtts_tls_server": {
"width": 450,
"height": 100
},
"node-north_ws_server": {
"width": 450,
"height": 100
},
"node-north_mqtt_kafka_mapping": {
"width": 450,
"height": 100
},
"node-north_kafka_cache_client": {
"width": 450,
"height": 100
},
"node-south_kafka_cache_server": {
"width": 450,
"height": 100
},
"node-south_kafka_client": {
"width": 450,
"height": 100
},
"node-south_tcp_client": {
"width": 450,
"height": 100
}
},
"_in": {
"node-north_tcp_server": {},
"node-bindings-group": {},
"node-north_http_server": {
"node-north_tcp_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_http_server"
},
"node-north_wss_tls_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_wss_tls_server",
"w": "node-north_http_server"
}
},
"node-north_wss_tls_server": {
"node-north_tcp_server\\u0001node-north_wss_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_wss_tls_server"
}
},
"node-north_mqtt_server": {
"node-north_tcp_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtt_server"
},
"node-north_mqtts_tls_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_mqtts_tls_server",
"w": "node-north_mqtt_server"
},
"node-north_ws_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_ws_server",
"w": "node-north_mqtt_server"
}
},
"node-north_mqtts_tls_server": {
"node-north_tcp_server\\u0001node-north_mqtts_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtts_tls_server"
}
},
"node-north_ws_server": {
"node-north_http_server\\u0001node-north_ws_server\\u0001\\u0000": {
"v": "node-north_http_server",
"w": "node-north_ws_server"
}
},
"node-north_mqtt_kafka_mapping": {
"node-north_mqtt_server\\u0001node-north_mqtt_kafka_mapping\\u0001\\u0000": {
"v": "node-north_mqtt_server",
"w": "node-north_mqtt_kafka_mapping"
}
},
"node-north_kafka_cache_client": {
"node-north_mqtt_kafka_mapping\\u0001node-north_kafka_cache_client\\u0001\\u0000": {
"v": "node-north_mqtt_kafka_mapping",
"w": "node-north_kafka_cache_client"
}
},
"node-south_kafka_cache_server": {
"node-north_kafka_cache_client\\u0001node-south_kafka_cache_server\\u0001\\u0000": {
"v": "node-north_kafka_cache_client",
"w": "node-south_kafka_cache_server"
}
},
"node-south_kafka_client": {
"node-south_kafka_cache_server\\u0001node-south_kafka_client\\u0001\\u0000": {
"v": "node-south_kafka_cache_server",
"w": "node-south_kafka_client"
}
},
"node-south_tcp_client": {
"node-south_kafka_client\\u0001node-south_tcp_client\\u0001\\u0000": {
"v": "node-south_kafka_client",
"w": "node-south_tcp_client"
}
}
},
"_preds": {
"node-north_tcp_server": {},
"node-bindings-group": {},
"node-north_http_server": {
"node-north_tcp_server": 1,
"node-north_wss_tls_server": 1
},
"node-north_wss_tls_server": {
"node-north_tcp_server": 1
},
"node-north_mqtt_server": {
"node-north_tcp_server": 1,
"node-north_mqtts_tls_server": 1,
"node-north_ws_server": 1
},
"node-north_mqtts_tls_server": {
"node-north_tcp_server": 1
},
"node-north_ws_server": {
"node-north_http_server": 1
},
"node-north_mqtt_kafka_mapping": {
"node-north_mqtt_server": 1
},
"node-north_kafka_cache_client": {
"node-north_mqtt_kafka_mapping": 1
},
"node-south_kafka_cache_server": {
"node-north_kafka_cache_client": 1
},
"node-south_kafka_client": {
"node-south_kafka_cache_server": 1
},
"node-south_tcp_client": {
"node-south_kafka_client": 1
}
},
"_out": {
"node-north_tcp_server": {
"node-north_tcp_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_http_server"
},
"node-north_tcp_server\\u0001node-north_wss_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_wss_tls_server"
},
"node-north_tcp_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtt_server"
},
"node-north_tcp_server\\u0001node-north_mqtts_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtts_tls_server"
}
},
"node-bindings-group": {},
"node-north_http_server": {
"node-north_http_server\\u0001node-north_ws_server\\u0001\\u0000": {
"v": "node-north_http_server",
"w": "node-north_ws_server"
}
},
"node-north_wss_tls_server": {
"node-north_wss_tls_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_wss_tls_server",
"w": "node-north_http_server"
}
},
"node-north_mqtt_server": {
"node-north_mqtt_server\\u0001node-north_mqtt_kafka_mapping\\u0001\\u0000": {
"v": "node-north_mqtt_server",
"w": "node-north_mqtt_kafka_mapping"
}
},
"node-north_mqtts_tls_server": {
"node-north_mqtts_tls_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_mqtts_tls_server",
"w": "node-north_mqtt_server"
}
},
"node-north_ws_server": {
"node-north_ws_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_ws_server",
"w": "node-north_mqtt_server"
}
},
"node-north_mqtt_kafka_mapping": {
"node-north_mqtt_kafka_mapping\\u0001node-north_kafka_cache_client\\u0001\\u0000": {
"v": "node-north_mqtt_kafka_mapping",
"w": "node-north_kafka_cache_client"
}
},
"node-north_kafka_cache_client": {
"node-north_kafka_cache_client\\u0001node-south_kafka_cache_server\\u0001\\u0000": {
"v": "node-north_kafka_cache_client",
"w": "node-south_kafka_cache_server"
}
},
"node-south_kafka_cache_server": {
"node-south_kafka_cache_server\\u0001node-south_kafka_client\\u0001\\u0000": {
"v": "node-south_kafka_cache_server",
"w": "node-south_kafka_client"
}
},
"node-south_kafka_client": {
"node-south_kafka_client\\u0001node-south_tcp_client\\u0001\\u0000": {
"v": "node-south_kafka_client",
"w": "node-south_tcp_client"
}
},
"node-south_tcp_client": {}
},
"_sucs": {
"node-north_tcp_server": {
"node-north_http_server": 1,
"node-north_wss_tls_server": 1,
"node-north_mqtt_server": 1,
"node-north_mqtts_tls_server": 1
},
"node-bindings-group": {},
"node-north_http_server": {
"node-north_ws_server": 1
},
"node-north_wss_tls_server": {
"node-north_http_server": 1
},
"node-north_mqtt_server": {
"node-north_mqtt_kafka_mapping": 1
},
"node-north_mqtts_tls_server": {
"node-north_mqtt_server": 1
},
"node-north_ws_server": {
"node-north_mqtt_server": 1
},
"node-north_mqtt_kafka_mapping": {
"node-north_kafka_cache_client": 1
},
"node-north_kafka_cache_client": {
"node-south_kafka_cache_server": 1
},
"node-south_kafka_cache_server": {
"node-south_kafka_client": 1
},
"node-south_kafka_client": {
"node-south_tcp_client": 1
},
"node-south_tcp_client": {}
},
"_edgeObjs": {
"node-north_tcp_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_http_server"
},
"node-north_wss_tls_server\\u0001node-north_http_server\\u0001\\u0000": {
"v": "node-north_wss_tls_server",
"w": "node-north_http_server"
},
"node-north_tcp_server\\u0001node-north_wss_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_wss_tls_server"
},
"node-north_tcp_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtt_server"
},
"node-north_mqtts_tls_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_mqtts_tls_server",
"w": "node-north_mqtt_server"
},
"node-north_ws_server\\u0001node-north_mqtt_server\\u0001\\u0000": {
"v": "node-north_ws_server",
"w": "node-north_mqtt_server"
},
"node-north_tcp_server\\u0001node-north_mqtts_tls_server\\u0001\\u0000": {
"v": "node-north_tcp_server",
"w": "node-north_mqtts_tls_server"
},
"node-north_http_server\\u0001node-north_ws_server\\u0001\\u0000": {
"v": "node-north_http_server",
"w": "node-north_ws_server"
},
"node-north_mqtt_server\\u0001node-north_mqtt_kafka_mapping\\u0001\\u0000": {
"v": "node-north_mqtt_server",
"w": "node-north_mqtt_kafka_mapping"
},
"node-north_mqtt_kafka_mapping\\u0001node-north_kafka_cache_client\\u0001\\u0000": {
"v": "node-north_mqtt_kafka_mapping",
"w": "node-north_kafka_cache_client"
},
"node-north_kafka_cache_client\\u0001node-south_kafka_cache_server\\u0001\\u0000": {
"v": "node-north_kafka_cache_client",
"w": "node-south_kafka_cache_server"
},
"node-south_kafka_cache_server\\u0001node-south_kafka_client\\u0001\\u0000": {
"v": "node-south_kafka_cache_server",
"w": "node-south_kafka_client"
},
"node-south_kafka_client\\u0001node-south_tcp_client\\u0001\\u0000": {
"v": "node-south_kafka_client",
"w": "node-south_tcp_client"
}
},
"_edgeLabels": {
"node-north_tcp_server\\u0001node-north_http_server\\u0001\\u0000": {},
"node-north_wss_tls_server\\u0001node-north_http_server\\u0001\\u0000": {},
"node-north_tcp_server\\u0001node-north_wss_tls_server\\u0001\\u0000": {},
"node-north_tcp_server\\u0001node-north_mqtt_server\\u0001\\u0000": {},
"node-north_mqtts_tls_server\\u0001node-north_mqtt_server\\u0001\\u0000": {},
"node-north_ws_server\\u0001node-north_mqtt_server\\u0001\\u0000": {},
"node-north_tcp_server\\u0001node-north_mqtts_tls_server\\u0001\\u0000": {},
"node-north_http_server\\u0001node-north_ws_server\\u0001\\u0000": {},
"node-north_mqtt_server\\u0001node-north_mqtt_kafka_mapping\\u0001\\u0000": {},
"node-north_mqtt_kafka_mapping\\u0001node-north_kafka_cache_client\\u0001\\u0000": {},
"node-north_kafka_cache_client\\u0001node-south_kafka_cache_server\\u0001\\u0000": {},
"node-south_kafka_cache_server\\u0001node-south_kafka_client\\u0001\\u0000": {},
"node-south_kafka_client\\u0001node-south_tcp_client\\u0001\\u0000": {}
},
"_nodeCount": 12,
"_edgeCount": 13,
"_parent": {
"node-north_tcp_server": "node-bindings-group",
"node-bindings-group": "\\u0000",
"node-north_http_server": "node-bindings-group",
"node-north_wss_tls_server": "node-bindings-group",
"node-north_mqtt_server": "node-bindings-group",
"node-north_mqtts_tls_server": "node-bindings-group",
"node-north_ws_server": "node-bindings-group",
"node-north_mqtt_kafka_mapping": "node-bindings-group",
"node-north_kafka_cache_client": "node-bindings-group",
"node-south_kafka_cache_server": "node-bindings-group",
"node-south_kafka_client": "node-bindings-group",
"node-south_tcp_client": "node-bindings-group"
},
"_children": {
"\\u0000": {
"node-bindings-group": true
},
"node-north_tcp_server": {},
"node-bindings-group": {
"node-north_tcp_server": true,
"node-north_http_server": true,
"node-north_wss_tls_server": true,
"node-north_mqtt_server": true,
"node-north_mqtts_tls_server": true,
"node-north_ws_server": true,
"node-north_mqtt_kafka_mapping": true,
"node-north_kafka_cache_client": true,
"node-south_kafka_cache_server": true,
"node-south_kafka_client": true,
"node-south_tcp_client": true
},
"node-north_http_server": {},
"node-north_wss_tls_server": {},
"node-north_mqtt_server": {},
"node-north_mqtts_tls_server": {},
"node-north_ws_server": {},
"node-north_mqtt_kafka_mapping": {},
"node-north_kafka_cache_client": {},
"node-south_kafka_cache_server": {},
"node-south_kafka_client": {},
"node-south_tcp_client": {}
}
}
I had the same problem with reactflow.
I had the same problem with reactflow.
@HiChen404 do you think it is a reactflow specific issue? My next plan is to change rendering libraries but want to avoid that work if possible.
I had the same problem with reactflow.
@HiChen404 do you think it is a reactflow specific issue? My next plan is to change rendering libraries but want to avoid that work if possible.
I found that when I set onlyRenderVisibleElements = true, the above problem occurs.
Maybe you can try disabling this option first?
https://reactflow.dev/api-reference/react-flow#only-render-visible-elements
@HiChen404 Thank you for the suggestion. That property didn't change anything for me but it did point me in the right direction.
I did find some code in a CustomEdge class that was doing bad math and building impossible edges.