Provide tags as graph CSS classes/attributes to allow coloring of graph nodes

[dardan]

Within Obsidian I work a lot with tags, to differentiate between different types of notes.
0.9.0 graph view already allows us to use different colors for tag nodes and attachment nodes.
But what would be really amazing in my opinion is, if we could assign different colors to note-nodes according to their tags (in graph view).

I don’t know how complicated (or even possible) the CSS -> WebGL conversion would be, but I could imagine the following methods:

a) Make tags accessible through a tag attribute. The tags attribute would contain a whitespace separated list of all tags on this node.
This would allow styling the nodes similar to the Tag Pills (Common CSS hacks) by using something like:

.graph-view.color-fill[tag~=idea] {
  color: blue;
}

This would also allow other fancy tricks as described in HTML attribute selectors.

b) Make tags available as classes so that we can access them like:

.graph-view.color-fill.idea {
  color: blue;
}

or maybe:

.graph-view.color-fill.tag-idea {
  color: blue;
}

I saw a bunch of other threads talking about similar ideas (coloring/highlighting graph nodes).
But exposing them for CSS would be the most flexible option.

[dardan]

This would also (partly) solve this feature request to some extent and address this comment.

[Emile]

I would also love this! I used this a lot in Neo4J Bloom and it’s so pretty and useful

[CKHarwood]

This would also also make it easier to use notes as tags on other notes, instead of making pages for all tags as requested here. (I promise that sentence is coherent in context. Cf. the discussion on that request.)

Another approach would be to support this through YAML metadata on a note.

[rasulkireev]

This would be super cool. Allowing for additional layer of usefulness to the graph.

One thing I’m wondering is if a note has multiple tags, what will happen then? Colors mix, or one of the colors takes over?

[Emile]

I’ve implemented graph styling, including coloring by tags, in the Neo4j Graph View Plugin:

[dardan]

According to the CSS specification id multiple rules (with same specificity) apply to the same element. The last rule inside the css file is applied.

Cascade and inheritance - Learn web development | MDN

So if we got

.graph-view.color-fill[tag~=idea] {
    color: blue;
}
.graph-view.color-fill[tag~=todo] {
    color: red;
}

And the node is tagged with #todo and #idea the node would show red (because this rule is later in the css file).

Altough mixed colours would be pretty amazing but you could do that with a third css rule manually:

.graph-view.color-fill[tag~=todo].color-fill[tag~=idea] {
    color: purple;
}

Which should have higher specificity if I understand it correctly.

[andavargas]

I want this too! Is there a way to change the color of the nodes in graph view?

[han_tani]

I would love to use this - mainly some notes function as hubs within my graph and it would be nice to highlight them

[lefthegelian]

I also would like to have this feature. However, I would already be very happy if could cluster tags under a certain class and exclude or include them in my search.

The way my Obsidian vault is set up is that I have different classes of tags and which have different colors. I have type tags that are grey and which tell me that a note is literature note or concept note or an author note. I have discipline tags which are red and tell me within which disciplines a note falls for example history, economics or philosophy. These are colored red. I also have status tags which tell me the status of certain note, those are purple. And finally I have keyword tags which are the standard color.

I don’t know if there is already a way to cluster tags in these way, without manually having to type every tag which falls under the cluster. I would be nice if you could you add a tag once to a certain cluster when you start using it and then never have to worry about it.

[dardan]

I just realized that V0.11.0 adds the possibility to define groups via queries and assign a color to them .

This basically solves my request. BUT the problem is that groups are cleared in new local graphs (in the global graph they persist).

It would be great if we could define default groups for all newly opened local graphs or an option so that the groups persist when the local graph is closed and opened again.

[Abhuva]

Not sure if it might be better to open this as a new feature-request so it doesnt get lost. Anyway - now that we have the color-groups for graphs i would like to request predefined groups that i can switch between.

Why? I love the coloring to easy spot different things in the graph, depending on what i am after i use completely different search-phrases for the colors.

I.e. : i color all my MOCs, the status of notes (seed, fleeting, permanent etc…) and can get an idea of the overall “health” and state of my pkm
Then i filter only atomic notes and links between and color them to see what overall Themes they fit in - here i can see what Themes are bad linked (lots of orphans) or if there are themes often intersecting …

This goes on… To do it right now, i have to setup the coloring each time i change what i want to look at.

Goal: I would like to be able to define color-groups (maybe elsewhere, in a file or in another menu), name the whole group and just tell the graph to use a certain pre-defined “color-group” then.