feat: adjust graph visualization parameters and add distinct colors for tag/attachment nodes

This commit is contained in:
Bruno Charest 2025-10-04 09:34:04 -04:00
parent e75fcd60cd
commit 8c5394ed64
7 changed files with 44 additions and 26 deletions

View File

@ -474,10 +474,10 @@ function ensureGraphStorage() {
nodeSizeMultiplier: 1,
lineSizeMultiplier: 1,
'collapse-forces': false,
centerStrength: 0.5,
repelStrength: 10,
linkStrength: 1,
linkDistance: 250,
centerStrength: 0.3,
repelStrength: 17,
linkStrength: 0.5,
linkDistance: 200,
scale: 1,
close: false
};

View File

@ -70,10 +70,10 @@ export const DEFAULT_GRAPH_CONFIG: GraphConfig = {
lineSizeMultiplier: 1,
'collapse-forces': false,
centerStrength: 0.5,
repelStrength: 10,
linkStrength: 1,
linkDistance: 250,
centerStrength: 0.3,
repelStrength: 17,
linkStrength: 0.5,
linkDistance: 200,
scale: 1,
close: false

View File

@ -7,7 +7,7 @@ import { computed, Signal } from '@angular/core';
import { GraphData, GraphNode, GraphLink, GraphNodeWithVisuals, GroupLegendItem } from './graph-data.types';
import { GraphConfig, GraphColorGroup, colorToCss } from './graph-settings.types';
import { parseGroupQuery, nodeMatchesQuery } from './group-query.parser';
import { DEFAULT_NODE_COLOR } from './graph.utils';
import { DEFAULT_NODE_COLOR, DEFAULT_TAG_COLOR, DEFAULT_ATTACHMENT_COLOR } from './graph.utils';
/**
* Apply text search filter to nodes
@ -177,7 +177,14 @@ function applyColorGroups(
nodes.forEach(node => degrees.set(node.id, 0));
return nodes.map(node => {
// Set default color based on node type
let color = DEFAULT_NODE_COLOR;
if (isTagNode(node)) {
color = DEFAULT_TAG_COLOR;
} else if (isAttachmentNode(node)) {
color = DEFAULT_ATTACHMENT_COLOR;
}
let groupIndex: number | undefined = undefined;
// Find first matching group (first match wins)

View File

@ -26,6 +26,16 @@ export const DEFAULT_GROUP_COLORS = [
*/
export const DEFAULT_NODE_COLOR = '#3B82F6'; // blue-500
/**
* Default tag node color (matching Obsidian's green tags)
*/
export const DEFAULT_TAG_COLOR = '#98C379'; // green
/**
* Default attachment node color
*/
export const DEFAULT_ATTACHMENT_COLOR = '#D19A66'; // orange
/**
* Get a pastel color by index (cycles through palette)
*/

View File

@ -13,10 +13,10 @@
"nodeSizeMultiplier": 0.25,
"lineSizeMultiplier": 1.45,
"collapse-forces": false,
"centerStrength": 0.58,
"repelStrength": 4.5,
"linkStrength": 0.41,
"linkDistance": 20,
"centerStrength": 0.3,
"repelStrength": 17,
"linkStrength": 0.5,
"linkDistance": 200,
"scale": 1.4019828977761002,
"close": false
}

View File

@ -13,10 +13,10 @@
"nodeSizeMultiplier": 0.25,
"lineSizeMultiplier": 1.45,
"collapse-forces": false,
"centerStrength": 0.58,
"repelStrength": 4.5,
"linkStrength": 0.41,
"linkDistance": 20,
"centerStrength": 0.3,
"repelStrength": 17,
"linkStrength": 0.5,
"linkDistance": 200,
"scale": 1.4019828977761002,
"close": false
}

View File

@ -4,17 +4,17 @@
"type": "split",
"children": [
{
"id": "eb0bc9d810b8eb9f",
"id": "22c2ec9062224eb0",
"type": "tabs",
"children": [
{
"id": "17cca9c5f5a7401d",
"id": "9ad6b7932a502fb2",
"type": "leaf",
"state": {
"type": "graph",
"type": "empty",
"state": {},
"icon": "lucide-git-fork",
"title": "Graph view"
"icon": "lucide-file",
"title": "New tab"
}
}
]
@ -49,7 +49,7 @@
"state": {
"type": "search",
"state": {
"query": "p",
"query": "content:test",
"matchingCase": false,
"explainSearch": false,
"collapseAll": false,
@ -70,11 +70,12 @@
"title": "Bookmarks"
}
}
]
],
"currentTab": 1
}
],
"direction": "horizontal",
"width": 205.5
"width": 394.5
},
"right": {
"id": "3932036feebc690d",
@ -172,7 +173,7 @@
"bases:Create new base": false
}
},
"active": "17cca9c5f5a7401d",
"active": "6be1f25c351d6c9f",
"lastOpenFiles": [
"test.md",
"HOME.md",