colored obsidian graph

#post #site

11 Signposts

5 Saplings

5 Chests

4 Seedlings

2 Trees

1 Withered

1 Stone

Graph Node and Link Coloring by Folder Update

Overview

Updated the digital garden's graph visualization to color both nodes and links based on their folder location, providing better visual organization and navigation of content areas. Implemented a shared color configuration system for consistency across build-time and runtime processes.

Problem Solved

Previously, all nodes and links in the graph were colored with the same theme color, making it difficult to visually distinguish between different content areas (Maps, Swamp, Updates, and root-level notes). Additionally, there was no centralized color management system.

Changes Made

1. Fixed Group Detection Logic (src/helpers/linkUtils.js)

Before:

let group = "none";
if (parts.length >= 3) {
  group = parts[parts.length - 2];
}

After:

let group = "root";
if (parts.length >= 2) {
  group = parts[0]; // First folder is the group (Maps, Swamp, Updates, etc.)
}

Why: The original logic was looking for files nested 3+ levels deep, but our folder structure is only 2 levels deep (/notes/Maps/Career.md). This meant all nodes were getting group: "none" instead of their actual folder names.

2. Created Shared Color Configuration (src/helpers/folderColors.js)

Added a centralized color configuration file that both build-time and runtime processes can use:

const folderColors = {
    'Maps': '#8A784E',      // Brown
    'Swamp': '#4CAF50',     // Green  
    'Updates': '#9C27B0',   // Purple
    'root': '#648DB3',      // Blue for root-level notes
    'default': '#666666'    // Fallback gray color
};

function getFolderColor(folderName) {
    if (!folderName || folderName === '' || folderName === 'root') {
        return folderColors['root'];
    }
    return folderColors[folderName] || folderColors['default'];
}

module.exports = { folderColors, getFolderColor };

3. Enhanced Node Data with Pre-calculated Colors (src/helpers/linkUtils.js)

Added color information to node data during build time:

const { folderColors, getFolderColor } = require('./folderColors');

nodes[v.url] = {
    // ...existing properties...
    group,
    color: getFolderColor(group), // Add color based on folder
    // ...existing properties...
};

4. Updated Node and Link Rendering (src/site/_includes/components/graphScript.njk)

Modified both node and link rendering to use folder-based colors:

Node Coloring:

.nodeCanvasObject((node, ctx) => {
    // ...existing code...
    const nodeColor = node.color || getCssVar("--graph-main");
    
    // Apply folder color to node fill and stroke
    ctx.fillStyle = nodeColor;
    ctx.strokeStyle = nodeColor;
    // ...existing code...
})

Link Coloring:

.linkColor((link) => {
    const sourceNodeColor = link.source.color || getCssVar("--graph-main");
    
    if (hoverNode == null) {
        return sourceNodeColor;
    }
    if (link.source.id == hoverNode.id || link.target.id == hoverNode.id) {
        return sourceNodeColor;
    } else {
        return mutedColor;
    }
})

Color Scheme

Benefits

1. Visual Organization: Easy to identify content areas at a glance in both nodes and links
2. Better Navigation: Users can quickly locate different types of content and their connections
3. Semantic Meaning: Colors reflect the purpose of each content area
4. Link Flow Visualization: Links are colored by their source folder, showing content flow between areas
5. Centralized Color Management: Single source of truth for all colors
6. Build-time Optimization: Colors are pre-calculated and included in graph data
7. Maintains Functionality: All existing graph features (hover, zoom, click) work unchanged

Technical Notes

• Colors are applied to both nodes and links in local and full graph views
• Links inherit the color of their source node's folder
• Hover states maintain folder colors for highlighted elements, muted color for others
• Current page indicator (outline ring) uses the folder color
• Colors are pre-calculated at build time and stored in node data
• Falls back to theme color for any unmapped folders or missing node colors
• Compatible with existing graph depth and fullscreen controls

Files Modified

1. src/helpers/folderColors.js - New: Centralized color configuration
2. src/helpers/linkUtils.js - Fixed group detection logic and added color property to nodes
3. src/site/_includes/components/graphScript.njk - Updated node and link rendering to use folder colors

Architecture

Build Time (Node.js)

• folderColors.js provides color functions
• linkUtils.js calculates and stores color in each node's data
• Graph JSON includes pre-calculated colors

Runtime (Browser)

• graphScript.njk uses pre-calculated node.color values
• Links inherit source node colors
• Fallback to CSS theme colors when needed

Future Enhancements

• Could add color legend to graph interface
• Color scheme could be made configurable via CSS variables
• Additional folders can be easily added to the color mapping
• Could implement color intensity based on note maturity or importance
• Could add color-based filtering or grouping controls