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, nodeSizeMultiplier: 1,
lineSizeMultiplier: 1, lineSizeMultiplier: 1,
'collapse-forces': false, 'collapse-forces': false,
centerStrength: 0.5, centerStrength: 0.3,
repelStrength: 10, repelStrength: 17,
linkStrength: 1, linkStrength: 0.5,
linkDistance: 250, linkDistance: 200,
scale: 1, scale: 1,
close: false close: false
}; };

View File

@ -70,10 +70,10 @@ export const DEFAULT_GRAPH_CONFIG: GraphConfig = {
lineSizeMultiplier: 1, lineSizeMultiplier: 1,
'collapse-forces': false, 'collapse-forces': false,
centerStrength: 0.5, centerStrength: 0.3,
repelStrength: 10, repelStrength: 17,
linkStrength: 1, linkStrength: 0.5,
linkDistance: 250, linkDistance: 200,
scale: 1, scale: 1,
close: false 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 { GraphData, GraphNode, GraphLink, GraphNodeWithVisuals, GroupLegendItem } from './graph-data.types';
import { GraphConfig, GraphColorGroup, colorToCss } from './graph-settings.types'; import { GraphConfig, GraphColorGroup, colorToCss } from './graph-settings.types';
import { parseGroupQuery, nodeMatchesQuery } from './group-query.parser'; 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 * Apply text search filter to nodes
@ -177,7 +177,14 @@ function applyColorGroups(
nodes.forEach(node => degrees.set(node.id, 0)); nodes.forEach(node => degrees.set(node.id, 0));
return nodes.map(node => { return nodes.map(node => {
// Set default color based on node type
let color = DEFAULT_NODE_COLOR; 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; let groupIndex: number | undefined = undefined;
// Find first matching group (first match wins) // 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 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) * Get a pastel color by index (cycles through palette)
*/ */

View File

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

View File

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

View File

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