Style graph nodes by type (#449)

* added styling of graph nodes by type * removed unused css file * added style by type to documentation
foambubble · Jan 14, 2021 · e0bcb6b · e0bcb6b
1 parent cd92468
commit e0bcb6b
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 44 deletions.
diff --git a/docs/assets/images/style-node-by-type.png b/docs/assets/images/style-node-by-type.png
diff --git a/docs/features/graph-visualisation.md b/docs/features/graph-visualisation.md
@@ -22,13 +22,41 @@ A sample configuration object is provided below:
 "node": {
     "note": "#277da1",
     "placeholder": "#545454",
-    "unknown": "#f94144"
 }
 ```
 
+### Style nodes by type
+It is possible to customize the style of a node based on the `type` property in the YAML frontmatter of the corresponding document.
+
+For example the following `backlinking.md` note:
+
+```
+---
+type: feature
+---
+# Backlinking
+
+...
+```
+
+And the following `settings.json`:
+```json
+"foam.graph.style": {
+    "node": {
+        "feature": "red",
+    }
+}
+```
+
+Will result in the following graph:
+
+![Style node by type](../assets/images/style-node-by-type.png)
+
 ### Markdown Links
 Another extension that provides a great graph visualisation is [Markdown Links](https://marketplace.visualstudio.com/items?itemName=tchayen.markdown-links).
 The extension doesn't use the Foam model, so discrepancies might arise, but it's a great visualisation extension nonetheless!
 
 - Use the `Markdown Links: Show Graph` command to see the graph
 ![Demo of graph visualiser](../assets/images/foam-navigation-demo.gif)
+
+
diff --git a/packages/foam-vscode/src/features/dataviz.ts b/packages/foam-vscode/src/features/dataviz.ts
@@ -76,7 +76,7 @@ function generateGraphData(foam: Foam) {
     const links = foam.notes.getForwardLinks(n.uri);
     graph.nodes[n.uri.path] = {
       id: n.uri.path,
-      type: 'note',
+      type: n.properties.type ?? 'note',
       uri: n.uri,
       title: cutTitle(n.title),
     };

diff --git a/packages/foam-vscode/static/graphs/default/graph.css b/packages/foam-vscode/static/graphs/default/graph.css
diff --git a/packages/foam-vscode/static/graphs/default/graph.js b/packages/foam-vscode/static/graphs/default/graph.js
@@ -8,7 +8,6 @@ const styleFallback = {
   node: {
     note: '#277da1',
     placeholder: '#545454',
-    unknown: '#f94144',
   },
 };
 
@@ -28,6 +27,21 @@ const labelAlpha = d3
   .range([0, 1])
   .clamp(true);
 
+const defaultStyle = {
+  background: getStyle(`--vscode-panel-background`) ?? styleFallback.background,
+  fontSize:
+    parseInt(getStyle(`--vscode-font-size`) ?? styleFallback.fontSize) - 2,
+  highlightedForeground:
+    getStyle('--vscode-list-highlightForeground') ??
+    styleFallback.highlightedForeground,
+  node: {
+    note: getStyle('--vscode-editor-foreground') ?? styleFallback.node.note,
+    placeholder:
+      getStyle('--vscode-list-deemphasizedForeground') ??
+      styleFallback.node.placeholder,
+  },
+};
+
 let model = {
   selectedNodes: new Set(),
   hoverNode: null,
@@ -42,23 +56,7 @@ let model = {
    * It tries to be set using VSCode values,
    * in the case it fails, use the fallback style values.
    */
-  style: {
-    background:
-      getStyle(`--vscode-panel-background`) ?? styleFallback.background,
-    fontSize:
-      parseInt(getStyle(`--vscode-font-size`) ?? styleFallback.fontSize) - 2,
-    highlightedForeground:
-      getStyle('--vscode-list-highlightForeground') ??
-      styleFallback.highlightedForeground,
-    node: {
-      note: getStyle('--vscode-editor-foreground') ?? styleFallback.node.note,
-      placeholder:
-        getStyle('--vscode-list-deemphasizedForeground') ??
-        styleFallback.node.placeholder,
-      unknown:
-        getStyle('--vscode-editor-foreground') ?? styleFallback.node.unknown,
-    },
-  },
+  style: defaultStyle,
 };
 const graph = ForceGraph();
 
@@ -142,30 +140,11 @@ const Actions = {
       return;
     }
     model.style = {
-      background:
-        newStyle.background ??
-        getStyle(`--vscode-panel-background`) ??
-        styleFallback.background,
-      fontSize:
-        newStyle.fontSize ??
-        parseInt(getStyle(`--vscode-font-size`) ?? styleFallback.fontSize) - 2,
-      highlightedForeground:
-        newStyle.highlightedForeground ??
-        getStyle('--vscode-list-highlightForeground') ??
-        styleFallback.highlightedForeground,
+      ...defaultStyle,
+      ...newStyle,
       node: {
-        note:
-          newStyle.node?.note ??
-          getStyle('--vscode-editor-foreground') ??
-          styleFallback.node.note,
-        placeholder:
-          newStyle.node?.placeholder ??
-          getStyle('--vscode-list-deemphasizedForeground') ??
-          styleFallback.node.placeholder,
-        unknown:
-          newStyle.node?.unknown ??
-          getStyle('--vscode-editor-foreground') ??
-          styleFallback.node.unknow,
+        ...defaultStyle.node,
+        ...newStyle.node,
       },
     };
     graph.backgroundColor(model.style.background);
@@ -244,7 +223,7 @@ function augmentGraphInfo(data) {
 function getNodeColor(nodeId, model) {
   const info = model.nodeInfo[nodeId];
   const style = model.style;
-  const typeFill = style.node[info.type || 'unknown'];
+  const typeFill = style.node[info.type ?? 'note'] ?? style.node['note'];
   switch (getNodeState(nodeId, model)) {
     case 'regular':
       return { fill: typeFill, border: typeFill };