What is the variable that defines color of the nodes in neovis.js

[sucheta]

Hi,

Here is the code of neovis.js which i use in my code to display the neo4j output.
However, I want to implement something with the colors. That is why i want to know what defines / what variable defines the colors that the nodes in neovis.js display in its javascript counterpart.

Link to neovis.js

github.com

neo4j-contrib/neovis.js/blob/master/src/neovis.js

'use strict';

import * as neo4j from '../vendor/neo4j-javascript-driver/lib/browser/neo4j-web.js';
import * as vis from '../vendor/vis/dist/vis-network.min.js';
import '../vendor/vis/dist/vis-network.min.css';
import { defaults } from './defaults';
import { EventController, CompletionEvent } from './events';

export default class NeoVis {

    /**
     *
     * @constructor
     * @param {object} config - configures the visualization and Neo4j server connection
     *  {
     *    container:
     *    server_url:
     *    server_password?:
     *    server_username?:
     *    labels:

This file has been truncated. show original

[MuddyBootsCode]

That's a good question. I haven't made much use of neovis but have you tried maybe changing the colors in your neo4j desktop and seeing if you get a change in your neovis representation? That's the first thing that pops into my head.

[shan]

For every label that you define under label, there is a community property where you can define a property used for coloring nodes. For example, assume there is a node label User, every user has a gender property, and your goal is to color every gender differently:

config = {
    ...
    labels: {
    ...
        "User": {
            "community": "gender"
            ....
        }
...
}

this does what I described above. I am not sure how you can control what colors are specifically used but that should be doable too.

[duane_nickull]

I have dived into this question quite deeply.  Here is the use case:

I have a graph that has may nodes. The nodes are colored by node type but users can use my custom JS controls to resize the graph. Users can refocus the graph on any single node (I read out the properties and set that node as the starting node in my cypher) and they can also resize the graph by altering the depth of the graph from a new center node.  The issue is that when it first renders, the center node is perhaps yellow, but when they start on a new node, the colors change (ie - the node types do not display deterministic colors based on the node type).

The desired behavior is that the nodes will always display a consistent color based on the "type" of node, regardless of the starting node in any graph query.

I have found A list of colors inside the master neovis.js file. I found it in a minified version so you will need to search for a substring from this blob:

this.defaultGroups=[{border:"#2B7CE9",background:"#97C2FC",highlight:{border:"#2B7CE9",background:"#D2E5FF"},hover:{border:"#2B7CE9",background:"#D2E5FF"}},{border:"#FFA500",background:"#FFFF00",highlight:{border:"#FFA500",background:"#FFFFA3"},hover:{border:"#FFA500",background:"#FFFFA3"}},{border:"#FA0A10",background:"#FB7E81",highlight:{border:"#FA0A10",background:"#FFAFB1"},hover:{border:"#FA0A10",background:"#FFAFB1"}},{border:"#41A906",background:"#7BE141",highlight:{border:"#41A906",background:"#A1EC76"},hover:{border:"#41A906",background:"#A1EC76"}},{border:"#E129F0",background:"#EB7DF4",highlight:{border:"#E129F0",background:"#F0B3F5"},hover:{border:"#E129F0",background:"#F0B3F5"}},{border:"#7C29F0",background:"#AD85E4",highlight:{border:"#7C29F0",background:"#D3BDF0"},hover:{border:"#7C29F0",background:"#D3BDF0"}},{border:"#C37F00",background:"#FFA807",highlight:{border:"#C37F00",background:"#FFCA66"},hover:{border:"#C37F00",background:"#FFCA66"}},{border:"#4220FB",background:"#6E6EFD",highlight:{border:"#4220FB",background:"#9B9BFD"},hover:{border:"#4220FB",background:"#9B9BFD"}},{border:"#FD5A77",background:"#FFC0CB",highlight:{border:"#FD5A77",background:"#FFD1D9"},hover:{border:"#FD5A77",background:"#FFD1D9"}},{border:"#4AD63A",background:"#C2FABC",highlight:{border:"#4AD63A",background:"#E6FFE3"},hover:{border:"#4AD63A",background:"#E6FFE3"}},{border:"#990000",background:"#EE0000",highlight:{border:"#BB0000",background:"#FF3333"},hover:{border:"#BB0000",background:"#FF3333"}},{border:"#FF6000",background:"#FF6000",highlight:{border:"#FF6000",background:"#FF6000"},hover:{border:"#FF6000",background:"#FF6000"}},{border:"#97C2FC",background:"#2B7CE9",highlight:{border:"#D2E5FF",background:"#2B7CE9"},hover:{border:"#D2E5FF",background:"#2B7CE9"}},{border:"#399605",background:"#255C03",highlight:{border:"#399605",background:"#255C03"},hover:{border:"#399605",background:"#255C03"}},{border:"#B70054",background:"#FF007E",highlight:{border:"#B70054",background:"#FF007E"},hover:{border:"#B70054",background:"#FF007E"}},{border:"#AD85E4",background:"#7C29F0",highlight:{border:"#D3BDF0",background:"#7C29F0"},hover:{border:"#D3BDF0",background:"#7C29F0"}},{border:"#4557FA",background:"#000EA1",highlight:{border:"#6E6EFD",background:"#000EA1"},hover:{border:"#6E6EFD",background:"#000EA1"}},{border:"#FFC0CB",background:"#FD5A77",highlight:{border:"#FFD1D9",background:"#FD5A77"},hover:{border:"#FFD1D9",background:"#FD5A77"}},{border:"#C2FABC",background:"#74D66A",highlight:{border:"#E6FFE3",background:"#74D66A"},hover:{border:"#E6FFE3",background:"#74D66A"}},{border:"#EE0000",background:"#990000",highlight:{border:"#FF3333",background:"#BB0000"},hover:{border:"#FF3333",background:"#BB0000"}}]

[duane_nickull]

To answer your question, I believe the colors are dynamically and nondeterministically assigned based on node type.