RFC: Consider adding note colouring to graphView

[tychota]

Motivation

When organizing note, we can have semantic kind of node.

Eg some note about "Book", some about "Thought", etc...

Allowing the user to see the colors make it easier to find the information on the graph

(You can see in the previous image that foam on vscode already support node coloring since https://github.com/foambubble/foam/pull/438.)

{
  "foam.graph.style": {
    "node": {
      "concept": "#3b82f6",
      "technology": "#8b5cf6",
      "kaizen discovery report": "#f43f5e",
      "tag": "#14b8a6"
    }
  }
 }

User explanation

• user would provide an optional type property in .md file

---
title: CPU Bound
type: concept
tags:
  - Concept
---

• user would provide an optional customGraphStyle in config

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-primer-wiki",
      options: {
+       "customGraphStyle": {"concept: "#3b82f6"}
      },
    },
  ]
}

Technical explanation

• gatsby-theme-primer-wiki uses note-graph
• note-graph support coloring since https://github.com/hikerpig/note-graph/pull/22/files
• it is documented on https://note-graph-hikerpig.vercel.app/?path=/docs/example--styling-different-node-types

The above example code is:

() => {
  const localNotes: Note[] = CONCEPT_DATA.map((o, i) => ({
    ...o,
    type: ['JS Lib', 'Visualization'].includes(o.title) ? 'tag' : 'note',
  }))

  const noteGraphNote = localNotes.find((o) => o.title === 'Note Graph')
  noteGraphNote.nodeStyle = {
    regular: '#E94780',
  }
  const graphModel = new NoteGraphModel(localNotes)

  const tagStyle: NodeStyle = {
    regular: '#64BB00',
    lessened: 'rgba(101, 189, 0, 0.6)',
    highlighted: 'green',
  }

  const localStyle = {
    node: {
      /** Set different style for nodes with `tag` type */
      tag: tagStyle,
    },
  }
  return (
    <div>
      <GraphView
        graphModel={graphModel}
        style={localStyle}
        onGraphViewInit={(view) => {
          if (noteGraphNote) {
            view.setSelectedNodes([noteGraphNote.id])
          }
        }}
      ></GraphView>
    </div>
  )
}

• we should modify https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/src/components/graph-view.js (to add the localStyle that come from the config) and https://github.com/theowenyoung/gatsby-theme-primer-wiki/blob/main/theme/src/use-note-graph-data.js (to extract the type from frontmatter)

Why not do this

• initial work => I would like to contribute that it is easier for you to review external code (some open source project found it harder to review code that doing themself)
• maintenance work => it should be rather separated from rest of the code so it should impact codebase too much

Unresolved question

• Should we support dark theme in config, eg

module.exports = {
  plugins: [
    {
      resolve: "gatsby-theme-primer-wiki",
      options: {
+       "customGraphStyle": {"concept: {"dark": "#5eead4", "light": "#0f766e"}}
      },
    },
  ]
}

• Maybe type conflict with other property so we may pick another name (eg "graphType" and map over the node to rename it just for the graph)

• Would you prefer a contribution (later this week) or would you prefer to do it yourself ?

[tychota]

Hi @theowenyoung, have you been able to look at the RFC yet ? Let me know if you are interested.