foambubble · meestahp · Nov 24, 2025 · Nov 27, 2025 · Nov 27, 2025 · Nov 27, 2025
diff --git a/packages/foam-vscode/package.json b/packages/foam-vscode/package.json
@@ -724,6 +724,7 @@
           "default": false,
           "description": "Whether to open the graph on startup."
         }
+
       }
     },
     "keybindings": [

diff --git a/packages/foam-vscode/src/features/panels/dataviz.ts b/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,
+        });
+      }
     }
   });
 

diff --git a/packages/foam-vscode/static/dataviz/graph.css b/packages/foam-vscode/static/dataviz/graph.css
@@ -2,14 +2,6 @@ body {
   overflow: hidden;
 }
 
-.dg .c {
-  width: 10%;
-}
-
-.dg .property-name {
-  width: 90%;
-}
-
 .vscode-light .dg.main.taller-than-window .close-button {
 border-top: 1px solid #ddd;
 }

diff --git a/packages/foam-vscode/static/dataviz/graph.js b/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');
 
   return {
     /**
@@ -91,6 +107,8 @@ let model = {
     note: true,
     tag: true,
   },
+  textFade: 1.2,
+  nodeFontSizeMultiplier: 1,
 };
 
 const graph = ForceGraph();
@@ -216,7 +234,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:
@@ -577,6 +595,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 {
-Original file line number
+Diff line change
@@ Expand Up / @@ -724,6 +724,7 @@ @@
               "default": false,
               "description": "Whether to open the graph on startup."
             }
           }
         },
         "keybindings": [
@@ Expand Down @@