rerendering results in websocket consumption #312

wvullhorst · 2022-12-03T20:36:34Z

I started a small project with neovis.js today. Everything works fine at first look but now I observe a problem:
Rendering my graph the first and second time works fine. After that every new rendering doubles the websocket connections in "pending" state. When the number reaches 32, exceptions are printed to the console.
Depending on my strategy to update the graph (when selecting a node) the websocket consumption differs.

I use the movie database example for my tests. The render method looks like this:

function render(config) {
    viz = new NeoVis.default(config);
    viz.renderWithCypher(cypherQuery());
    viz.registerOnEvent("completed", (e) => {
        viz.network.on("click", (e) => {
            if(e.nodes[0]) {
                currentId = e.nodes[0];
                viz.reload();
            }
        });
    });
}

Screenshots of my tests:

Initial state after page load

Node selected and refresh done

Same node selected again and refresh done

Here comes the full source code:

<!doctype html>
<html>
<head>
    <title>Neo4J Graph Explorer</title>
    <style type="text/css">
        html, body {
            font: 16pt arial;
        }

        #viz {
            width: 900px;
            height: 700px;
            border: 1px solid lightgray;
            font: 10pt arial;
        }
    </style>
    <script src="https://rawgit.com/neo4j-contrib/neovis.js/master/dist/neovis.js"></script>
    <script type="text/javascript">
        const relations = "<-[r:ACTED_IN*1..3]->";
        const CFG = {
            server: {
                url: "bolt://syn1:7687",
                user: "neo4j",
                password: "************",
            },
            query: {
                initial: "MATCH (m:Movie { title: \"The Matrix Reloaded\" })" + relations + "(a) RETURN *",
                byId: (id) => "MATCH (a) " + relations + "(b) WHERE ID(a)=" + id + " RETURN *"
            },
            render: {
                node: {
                    active: { color: '#d00', size: 15 },
                    inactive: { color: '#55a', size: 10 },
                    fontSize: 14
                },
                link: {
                    color: '#888'
                }
            }
        }
        let viz;
        let currentId;
        function draw() {
            const config = {
                containerId: "viz",
                neo4j: {
                    serverUrl: CFG.server.url,
                    serverUser: CFG.server.user,
                    serverPassword: CFG.server.password,
                },
                visConfig: {
                    nodes: {
                        shape: 'dot',
                        size: CFG.render.node.inactive.size,
                        font: { size: CFG.render.node.fontSize },
                        color: CFG.render.node.inactive.color
                    },
                    edges: {
                        arrows: {
                            to: {enabled: true},
                        },
                        color: CFG.render.link.color,
                    },
                    physics: {
                        solver: 'forceAtlas2Based'
                    }
                },
                labels: {
                    Movie: {
                        label: "title",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: { color: nodeColor, size: nodeSize, physics: nodePhysics }
                        },
                    },
                    Person: {
                        label: "name",
                        [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                            function: { color: nodeColor, size: nodeSize, physics: nodePhysics }
                        },
                    }
                },
            };
            render(config);
        }
        function nodeColor(node) {
            if(node.identity === currentId) return CFG.render.node.active.color;
            return CFG.render.node.inactive.color;
        }
        function nodeSize(node) {
            if(node.identity === currentId) return CFG.render.node.active.size;
            return CFG.render.node.inactive.size;
        }
        function nodePhysics(node) {
            if(node.identity === currentId) return false;
            return true;
        }
        function cypherQuery() {
            if(currentId) return CFG.query.byId(currentId);
            return CFG.query.initial;
        }
        function render(config) {
            viz = new NeoVis.default(config);
            viz.renderWithCypher(cypherQuery());
            viz.registerOnEvent("completed", (e) => {
                viz.network.on("click", (e) => {
                    if(e.nodes[0]) {
                        currentId = e.nodes[0];
                        viz.reload();
                    }
                });
            });
        }
    </script>
</head>
<body onload="draw()">
    <div id="viz"></div>
</body>
</html>

additional info (latest results)

Changing the event handler (see below) improves the behavior. Before, the number of websocket connection doubles at each node click, after the number only increases by 1 at each node click...

        function render(config) {
            viz = new NeoVis.default(config);
            viz.renderWithCypher(cypherQuery());
            viz.registerOnEvent("completed", (e) => {
                viz.network.on("click", (e) => {
                    if(e.nodes[0]) {
                        currentId = e.nodes[0];
                        render(config);
                    }
                });
            });
        }

thebestnom · 2022-12-03T22:03:40Z

That's wierd... There shouldn't be a new neo4j session, Im pretty sure chrome network panel has which line of code generated the websocket, I checked the code and I did close the session on render complete, which makes it really weird as you didn't use any cypher config...

thebestnom · 2022-12-03T22:20:09Z

Also checked I did close session when used, that's why the websocket still open?

wvullhorst · 2022-12-04T04:22:19Z

First connection:

  | n | @ | browser-channel.js:45
-- | -- | -- | --
  | (anonymous) | @ | browser-channel.js:215
  | t | @ | browser-channel.js:56
  | o | @ | connection-channel.js:93
  | e.createChannelConnection | @ | connection-channel.js:95
  | C._createChannelConnection | @ | connection-provider-pooled.js:109
  | e._createConnection | @ | connection-provider-pooled.js:133
  | (anonymous) | @ | pool.js:261
  | (anonymous) | @ | pool.js:51
  | (anonymous) | @ | pool.js:32
  | (anonymous) | @ | pool.js:26
  | r | @ | pool.js:22
  | t._acquire | @ | pool.js:208
  | t.acquire | @ | pool.js:106
  | e.acquireConnection | @ | connection-provider-direct.js:102
  | t.initializeConnection | @ | connection-holder.js:87
  | t._run | @ | session.js:161
  | t.run | @ | session.js:139
  | render | @ | neovis.ts:371
  | renderWithCypher | @ | neovis.ts:528
  | render | @ | vis.html:103
  | draw | @ | vis.html:83
  | onload | @ | vis.html:115

Subsequent connections using viz.reload():

  | n | @ | browser-channel.js:45
-- | -- | -- | --
  | (anonymous) | @ | browser-channel.js:215
  | t | @ | browser-channel.js:56
  | o | @ | connection-channel.js:93
  | e.createChannelConnection | @ | connection-channel.js:95
  | C._createChannelConnection | @ | connection-provider-pooled.js:109
  | e._createConnection | @ | connection-provider-pooled.js:133
  | (anonymous) | @ | pool.js:261
  | (anonymous) | @ | pool.js:51
  | (anonymous) | @ | pool.js:32
  | (anonymous) | @ | pool.js:26
  | r | @ | pool.js:22
  | t._acquire | @ | pool.js:208
  | t.acquire | @ | pool.js:106
  | e.acquireConnection | @ | connection-provider-direct.js:102
  | t.initializeConnection | @ | connection-holder.js:87
  | t._run | @ | session.js:161
  | t.run | @ | session.js:139
  | render | @ | neovis.ts:371
  | reload | @ | neovis.ts:509
  | (anonymous) | @ | vis.html:112
  | e.emit | @ | vis-network.js:1502
  | value | @ | vis-network.js:36352
  | value | @ | vis-network.js:35061
  | (anonymous) | @ | vis-network.js:33439
  | e.emit | @ | vis-network.js:7332
  | n.emit | @ | vis-network.js:6480
  | e.tryEmit | @ | vis-network.js:6266
  | e.recognize | @ | vis-network.js:6319
  | e.recognize | @ | vis-network.js:7169
  | fd | @ | vis-network.js:5362
  | e.handler | @ | vis-network.js:5585
  | domHandler | @ | vis-network.js:5437

Subsequent connections reinitializing viz (see additional info in original post)

  | n | @ | browser-channel.js:45
-- | -- | -- | --
  | (anonymous) | @ | browser-channel.js:215
  | t | @ | browser-channel.js:56
  | o | @ | connection-channel.js:93
  | e.createChannelConnection | @ | connection-channel.js:95
  | C._createChannelConnection | @ | connection-provider-pooled.js:109
  | e._createConnection | @ | connection-provider-pooled.js:133
  | (anonymous) | @ | pool.js:261
  | (anonymous) | @ | pool.js:51
  | (anonymous) | @ | pool.js:32
  | (anonymous) | @ | pool.js:26
  | r | @ | pool.js:22
  | t._acquire | @ | pool.js:208
  | t.acquire | @ | pool.js:106
  | e.acquireConnection | @ | connection-provider-direct.js:102
  | t.initializeConnection | @ | connection-holder.js:87
  | t._run | @ | session.js:161
  | t.run | @ | session.js:139
  | render | @ | neovis.ts:371
  | renderWithCypher | @ | neovis.ts:528
  | render | @ | vis.html:103
  | (anonymous) | @ | vis.html:108
  | e.emit | @ | vis-network.js:1502
  | value | @ | vis-network.js:36352
  | value | @ | vis-network.js:35061
  | (anonymous) | @ | vis-network.js:33439
  | e.emit | @ | vis-network.js:7332
  | n.emit | @ | vis-network.js:6480
  | e.tryEmit | @ | vis-network.js:6266
  | e.recognize | @ | vis-network.js:6319
  | e.recognize | @ | vis-network.js:7169
  | fd | @ | vis-network.js:5362
  | e.handler | @ | vis-network.js:5585
  | domHandler | @ | vis-network.js:5437

thebestnom · 2022-12-07T23:12:16Z

This is really wierd, it looks like driver bug as I do close this session onComplete, Ill test that out later this week

thebestnom · 2022-12-07T23:25:19Z

Also for just changing color I would not suggest reloading the entire network, you can get the id from viz.nodes.get and change the data there

wvullhorst · 2022-12-08T05:30:37Z

Also for just changing color I would not suggest reloading the entire network, you can get the id from viz.nodes.get and change the data there

When you select a node, a new cypher query is executed with the selected node being the "the root of the query" (see viz.renderWithCypher(cypherQuery()))

thebestnom · 2022-12-08T07:30:29Z

In the second one, yes, in the original you only called reload 😅 anyway Ill test why the session doesn't close even though I call close probably tomorrow

mdopp · 2023-09-18T22:15:27Z

this one is almost a year old...but maybe this helps, as it seams to fit into the same area (possible the same root cause)

With every reload() an extra "clickNode" event is created. What I mean: First time you create viz, everything is fine. I registerOnEvent for "clickNode", user clicks, and the function is called.
If you now do a reload, the clickNode is fired twice. Another reload: three times clickNode. (just print it to the console and have a look).

That said: Something like this could cause internnaly to create multiple requests to the server, hence the websocket is spammed.

Just as an idea.

thebestnom · 2023-09-19T10:25:55Z

@mdopp that's a bug 😅 but it shouldn't affect the websocket as the event doesn't add any session to the neo4j

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

rerendering results in websocket consumption #312

rerendering results in websocket consumption #312

wvullhorst commented Dec 3, 2022 •

edited by thebestnom

thebestnom commented Dec 3, 2022

thebestnom commented Dec 3, 2022

wvullhorst commented Dec 4, 2022 •

edited

thebestnom commented Dec 7, 2022

thebestnom commented Dec 7, 2022

wvullhorst commented Dec 8, 2022

thebestnom commented Dec 8, 2022

mdopp commented Sep 18, 2023

thebestnom commented Sep 19, 2023

rerendering results in websocket consumption #312

rerendering results in websocket consumption #312

Comments

wvullhorst commented Dec 3, 2022 • edited by thebestnom

thebestnom commented Dec 3, 2022

thebestnom commented Dec 3, 2022

wvullhorst commented Dec 4, 2022 • edited

thebestnom commented Dec 7, 2022

thebestnom commented Dec 7, 2022

wvullhorst commented Dec 8, 2022

thebestnom commented Dec 8, 2022

mdopp commented Sep 18, 2023

thebestnom commented Sep 19, 2023

wvullhorst commented Dec 3, 2022 •

edited by thebestnom

wvullhorst commented Dec 4, 2022 •

edited