Coloring the central node red and other nodes blue in Neo4j visualization

Question

I'm working on a Neo4j visualization using the NeoVis library, and I'm trying to achieve a specific node coloring behavior. I want the central node to be colored red, while all other nodes should be colored blue. However, my current implementation doesn't seem to be working as expected.

have already tried changing the renderNode function to implement the desired node coloring. However, it doesn't seem to be working as intended. All nodes end up having the same background color instead of the central node being red and others being blue.

Could someone please help me identify the issue and suggest a solution? I would greatly appreciate any guidance or insights into this problem.

Here's the relevant code snippet:

function drawNeo4jViz(pageNumber, documentTitle, container_id) {
    console.log('Draw a chart!')

    var serverUrl;

    if (window.location.hostname === '***') {
        serverUrl = "***"
    } else if (window.location.hostname === '***') {
        serverUrl = "***"
    } else if (window.location.hostname === 'localhost') {
        serverUrl = "bolt://localhost:7687";
    } else {
        // Default case
        serverUrl = "bolt://localhost:7687";
    }

    var config = {
        containerId: container_id,
        neo4j: {
            serverUrl: serverUrl,
            serverUser: "***",
            serverPassword: "***",
        },
        labels: {
            Node: {
                label: "name",
                group: "layer",
                style: {
                    'text-overflow': 'ellipsis',
                    'overflow': 'hidden',
                    'white-space': 'nowrap',
                    'max-width': '100px' // Adjust the value as needed
                }
            },
        },
        relationships: {
            'LINKS_TO': {
                [NeoVis.NEOVIS_ADVANCED_CONFIG]: {
                    static: {
                        label: "Links to",
                        color: "#34ff8b"
                    }
                },
            },
        },
        layout: {
            hierarchical: false, // or true if hierarchical layout is desired
            avoidOverlap: true // Enable avoidOverlap
        },
        initialCypher: `MATCH (n:Node)
        WHERE n.full_document_title STARTS WITH '${documentTitle}'
        AND n.full_document_title ENDS WITH 'Page: ${pageNumber}'
        OPTIONAL MATCH (n)-[r:LINKS_TO]->(m:Node)
        RETURN n, r, m`
    };

    console.log('Neo4j config set')
    var viz = new NeoVis.default(config);

    // Override the node display name
    viz.renderNode = function (node, container) {
        var name = node.properties['name'];
        var title = node.properties['full_document_title'];
        var label = this._options.labels[node.labels[0]].label;
        var group = this._options.labels[node.labels[0]].group;
        var size = this._options.labels[node.labels[0]].size;

        var wrapper = document.createElement('div');
        wrapper.classList.add('node');

        var labelElement = document.createElement('div');
        labelElement.classList.add('label');
        labelElement.innerText = name;

        var titleElement = document.createElement('div');
        titleElement.classList.add('title');
        titleElement.innerText = title;

        wrapper.appendChild(labelElement);
        wrapper.appendChild(titleElement);
        container.appendChild(wrapper);

        // Highlight the matched node in red
        if (node.properties['full_document_title'].endsWith('Page: ' + pageNumber)) {
            wrapper.style.backgroundColor = 'red';
        } else {
            wrapper.style.backgroundColor = 'blue';
        }
        
    };

    console.log('Neo4j vis render')
    viz.render();
    console.log(viz);
}

Answer 1

The variable pageNumber is not given to the inner function, therefore it's undefined, and your check for inner nodes won't work.