[Idea] Color and icons on graph node

[neokeld]

Hello,
@tchayen Thanks a lot for this project ! I come from Foam (issue foambubble/foam#2).

I have some main Markdown documents that in the end are the main nodes of the graph. It can be a widely used idea or a definition.
I would like to highlight these nodes in the graph to quickly see how the graph is organised and where are the main nodes.

A feature i'd like to see is color / icons on graph node :
When my node is a main node, i want to highlight it (maybe clicking on the node and changing the color).

[tchayen]

Hi!

Before we start iterating on a potential solution, I want to clarify just in case that Markdown Links is a general purpose extension for visualising links between Markdown files and some too specific features might not work well for it. Of course I am willing to support Foam, but this is not the first priority.

Back to the topic:

I am not 100% sure what you mean by main nodes in the graph. Let's say we have two groups of connected nodes, so two graphs. How do we tell which node in a given subgraph is the main one?

There are several other similar potential improvements that come to my mind like using different colors for different subgraphs or highlighting edges coming out of the active node but I am not sure if this is what you mean and if this would really help.

[fmagin]

A very general solution could be to use markdown metadata (like YAML Front Matter) and allow markdown-links to be configured how to use it.
For example, a markdown file looks like this:

---
type: blogpost
tags: topic1, topic2
---
# A very interesting blogpost

* notes

now some optional markdown-links config could be setup so the value of blogpost in the type fields, means that the node should be rendered in a certain way. markdown-links then just supports some basic style options (e.g. color, size, shape of a node?) and some simple ruleset to decide it. E.g. the ruleset could look like

metadata.type == "blogpost": { "node": {"shape": "square" } }
metadata.tags contains "topic1" : {"node": {"color": "red"} }

the rule engine could simply iterate over the rules, and for each match update the values in the config dict (starting from some default). So the above blogpost (with an empty default config) would have to config: `{ "node": {"shape": "square" , "color": "red"} }

Any styling by markdown-links itself, could also be implemented that way, with information that is coming from some other namespace ( not 'metadata' or whatever the name would be).

[tchayen]

I like that direction. Adding some configuration options seems inevitable and this way looks right to me.

One thing to note is that people are reporting that readability of bigger graphs could be improved a lot and I am looking for a way to fix that. Because of that it IMO makes sense to wait with styling until we know what will change in the end.

[fmagin]

I have been thinking about this again, and in hindsight it seems overkill for markdown-links to deal with any of the decisions on how to style the nodes by implementing its own rule parsing.
I think the simpler option is to just add support for reading the YAML metadata and retrieving some basic options from there, e.g.:

markdown-links-style:
    color: "red" // or any HTML style color specification. Especially because VS Code supports changing them easily incl color preview
    size: 23 // some number to describe the size of the node. Maybe a float as a scaling factor from the default
    shape: "square" // depends on what kind of shapes can be supported, this might be harder and can be a later feature

Then users can either easily specify this manually and extension can opt to automatically add it to files depending on whatever they desire. I think that for the most part this will already be quite useful if you can just specify it manually.

[tchayen]

Yea, this way is not invasive and makes sense to me.

BTW, you mean adding this option in each file's metadata, right?

[fmagin]

Yes, for each file, to style the node that corresponds to this file. I think this fits best with your stated goal of a "general purpose extension for visualising links between Markdown files".

Do you have an estimate for how hard this would be to implement? I'd expect that at least the node coloring should be fairly easy if the graph layout/rendering library allows adding a property for a color to a node.

Another option might be to also support "themes" for the color. I am not sure how themes interact with your graph view currently, or how themes are specified in VS Code, but I remember from a syntax highlighting plugin that I just assigned categories to tokens and they got styled accordingly. It might be possible to work with that to achieve node styles that work with different themes, but that is probably not a major concern for most people.

[tchayen]

Ok, so everything about how graph looks like is decided basically by the HTML file containing the code to display it. We have recently introduced theming in a way that the file is selectable from predefined ones.

So achieving this would require a change in the parsing code so it would fetch that information if present in the file and then pass it along the node data. Then it would be u to the 'themes' to apply this information in rendering.

[fmagin]

Does this HTML File work with CSS? I really don't know much about Web Technology, but my vague memory is that CSS maps elements to styles. So in that sense, it sounds like it could be possible to write an arbitrary string like blogpost into the metadata field for color and then the CSS provides the mapping to the actual color, depending on the theme. Then e.g. Foam could just ship a custom CSS that fits their default theme. And users could create their owns however they want.