Where can I find an overview of the syntax of the Neo4j GRASS language?

Question

Neo4j's browser allows the graphs it shows to be styled using a CSS-like style file in the GRASS language (GRaph Style Sheet). However, I have not been able to find the syntax of this language. Is there any and if so, where can it be found?

Answer 1

As far as I know, it's not really documented, but I will share what I know because I don't think there is that much to cover.

First, you can download your Neo4j .grass file by using the browser command :style (You will need to copy the result to a text file, and make the extension .grass to re-import it)

Next, it is important to note that the .grass file is actually CSS, but Neo4j seems to prefer a JSON format. (Both formats are valid .grass contents)

The results should look something like this

{
    "node": {
        "diameter": "100px",
        "color": "#FFD86E",
        "border-color": "#EDBA39",
        "border-width": "2px",
        "text-color-internal": "#604A0E",
        "font-size": "16px"
    },
    "relationship": {
        "color": "#68BDF6",
        "shaft-width": "13px",
        "font-size": "14px",
        "padding": "3px",
        "text-color-external": "#000000",
        "text-color-internal": "#FFFFFF",
        "caption": "<type>"
    },
    "node.MyFirstLabel": {
        "color": "#68BDF6",
        "border-color": "#5CA8DB",
        "text-color-internal": "#FFFFFF"
    },
    "node.MySecondLabel": {
        "color": "#6DCE9E",
        "border-color": "#60B58B",
        "text-color-internal": "#FFFFFF"            
    },
    "relationship.IS_RELATED_TO": {
        "color": "#A5ABB6",
        "shaft-width": "1px",
        "font-size": "8px",
        "padding": "3px",
        "text-color-external": "#000000",
        "text-color-internal": "#FFFFFF"
    },
    /*This is a comment, the rest is added by hand*/
    "node.EXPERIMENTAL": {
        "color": "#DE9BF9",
        "border-color": "#BF85D6",
        "text-color-internal": "#FFFFFF",
        /*You can use {<prop_name>} for dynamic values. can be mixed with literals*/
        "caption": "Hello, my name is {name}",
        /*You can't use <>, the HTML will eat it, so use the HTML escaped version for the string literal <id>*/
        /* <id> and <type> will actually use the internal value for nodes and relationships respectively */
        "defaultCaption": "&lt;id&gt;"
    }
}

Note, if a node has 2 styled labels, only the first (closest to top) style is applied. If a node doesn't have a label that is in the GRASS, "node" is used as the default (same for relationships). I believe most CSS styles are supported, but you can always try it. If it's not supported, it will just be ignored.

So I'll try to cover the non standard properties

• caption: The text that is displayed (usually bound to a property)
• defaultCaption: caption to use if caption isn't set (as far as I can tell)
• diameter: nodes only. Circle size
• shaft-width: relationships only. Size
• color: Circle color (in standard css, this is text color)
• text-color-internal: Text color

(This is a community wiki, please update with any other details about GRASS files)

For the most part, it will probably be easier to just experiment for minor changes until official docs are released. If you want to go down the rabbit hole, the grass parser is open source. Just know that until official docs are released, behavior is subject to change.

Answer 2

There is some information about browser styling for Neo4j GRASS in this manual page. Also you can download the latest Neo4j browser source code and see what's in there. I found the same information as in the manual, in this file:

neo4j-browser-master\docs\modules\ROOT\pages\operations\browser-styling.adoc