Added appearance panel in graph webview (#1555)

packages/foam-vscode/package.json

@@ -724,6 +724,7 @@
           "default": false,
           "description": "Whether to open the graph on startup."
         }
+
       }
     },
     "keybindings": [

packages/foam-vscode/src/features/panels/dataviz.ts

@@ -11,12 +11,14 @@ export default async function activate(
 ) {
   let panel: vscode.WebviewPanel | undefined = undefined;
   vscode.workspace.onDidChangeConfiguration(event => {
-    if (event.affectsConfiguration('foam.graph.style')) {
-      const style = getGraphStyle();
-      panel.webview.postMessage({
-        type: 'didUpdateStyle',
-        payload: style,
-      });
+    if (panel) {
+      if (event.affectsConfiguration('foam.graph.style')) {
+        const style = getGraphStyle();
+        panel.webview.postMessage({
+          type: 'didUpdateStyle',
+          payload: style,
+        });
+      }
     }
   });
 

packages/foam-vscode/static/dataviz/graph.js

@@ -1,9 +1,25 @@
 const CONTAINER_ID = 'graph';
 
+let nodeFontSizeController = null;
 const initGUI = () => {
   const gui = new dat.gui.GUI();
   const nodeTypeFilterFolder = gui.addFolder('Filter by type');
   const nodeTypeFilterControllers = new Map();
+  const appearanceFolder = gui.addFolder('Appearance');
+
+  appearanceFolder
+    .add(model, 'textFade', 0, 5)
+    .step(0.1)
+    .name('Text Fade')
+    .onFinishChange(v => {
+      const invertedValue = 5 - v;
+      getNodeLabelOpacity.domain([invertedValue, invertedValue + 0.8]);
+    });
+
+  nodeFontSizeController = appearanceFolder
+    .add(model, 'nodeFontSizeMultiplier', 0.5, 3)
+    .step(0.1)
+    .name('Node Font Size');
   const forcesFolder = gui.addFolder('Forces');
 
   forcesFolder
@@ -136,6 +152,8 @@ let model = {
     note: true,
     tag: true,
   },
+  textFade: 1.2,
+  nodeFontSizeMultiplier: 1,
   forces: {
     collide: 2,
     repel: 30,
@@ -301,7 +319,7 @@ function initDataviz(channel) {
       }
       const size = getNodeSize(info.neighbors.length);
       const { fill, border } = getNodeColor(node.id, model);
-      const fontSize = model.style.fontSize / globalScale;
+      const fontSize = (model.style.fontSize * model.nodeFontSizeMultiplier) / globalScale;
       const nodeState = getNodeState(node.id, model);
       const textColor = fill.copy({
         opacity:
@@ -668,6 +686,15 @@ try {
         const style = message.payload;
         Actions.updateStyle(style);
         break;
+      case 'didUpdateNodeFontSizeMultiplier':
+        const multiplier = message.payload;
+        if (typeof multiplier === 'number') {
+          model.nodeFontSizeMultiplier = multiplier;
+          if (nodeFontSizeController) {
+            nodeFontSizeController.updateDisplay();
+          }
+        }
+        break;
     }
   });
 } catch {