diff --git a/src/renderer/src/KnowledgeGraphChart.tsx b/src/renderer/src/KnowledgeGraphChart.tsx index db76e81..2590306 100644 --- a/src/renderer/src/KnowledgeGraphChart.tsx +++ b/src/renderer/src/KnowledgeGraphChart.tsx @@ -176,19 +176,29 @@ function createPresentation( })) }, layout: { - type: 'circular', + type: 'd3-force', animate: false, - ordering: 'topology', - startAngle: -Math.PI / 2, - endAngle: Math.PI * 1.5, - clockwise: true, - divisions: 1, - angleRatio: 1, + centerStrength: 0.8, + linkDistance: dense ? 44 : 64, + edgeStrength: dense ? 0.28 : 0.4, + edgeIterations: 2, + nodeStrength: dense ? -45 : -70, + theta: 0.8, + preventOverlap: true, + collideStrength: 0.9, + collideIterations: 2, nodeSize: (datum: Record) => { const metadata = datum.data as G6NodeMetadata | undefined return metadata?.size ?? 24 }, - nodeSpacing: dense ? 20 : 28 + nodeSpacing: dense ? 10 : 14, + x: false, + y: false, + radialRadius: 0, + radialStrength: dense ? 0.055 : 0.04, + alphaMin: 0.015, + alphaDecay: 0.045, + velocityDecay: 0.42 }, node: { type: 'circle', @@ -474,6 +484,13 @@ export function KnowledgeGraphChart({ return } renderedRevisionRef.current = dataRevision + await graph.fitView( + { + when: 'always', + direction: 'both' + }, + false + ) appliedZoomRef.current = graph.getZoom() const states = Object.fromEntries( nodesRef.current.map((node) => [ diff --git a/src/renderer/src/KnowledgeWorkspace.test.tsx b/src/renderer/src/KnowledgeWorkspace.test.tsx index 2e52340..f6eb556 100644 --- a/src/renderer/src/KnowledgeWorkspace.test.tsx +++ b/src/renderer/src/KnowledgeWorkspace.test.tsx @@ -18,6 +18,7 @@ const g6Mock = vi.hoisted(() => { const graph = { destroy: vi.fn(), draw: vi.fn(async () => undefined), + fitView: vi.fn(async () => undefined), getElementPosition: vi.fn(() => [240, 320]), getZoom: vi.fn(() => 1), off: vi.fn((eventName: string) => handlers.delete(eventName)), @@ -472,9 +473,13 @@ describe('KnowledgeWorkspace', () => { }, layout: expect.objectContaining({ animate: false, - angleRatio: 1, - ordering: 'topology', - type: 'circular' + centerStrength: 0.8, + linkDistance: 64, + nodeStrength: -70, + preventOverlap: true, + radialRadius: 0, + radialStrength: 0.04, + type: 'd3-force' }), behaviors: expect.arrayContaining([ 'drag-canvas', @@ -500,6 +505,13 @@ describe('KnowledgeWorkspace', () => { }, false ) + expect(g6Mock.graph.fitView).toHaveBeenCalledWith( + { + when: 'always', + direction: 'both' + }, + false + ) const stableRenderCallCount = g6Mock.graph.render.mock.calls.length rerender() expect(g6Mock.graph.render).toHaveBeenCalledTimes(stableRenderCallCount) @@ -661,9 +673,13 @@ describe('KnowledgeWorkspace', () => { }), layout: expect.objectContaining({ animate: false, - nodeSpacing: 20, - ordering: 'topology', - type: 'circular' + linkDistance: 44, + nodeSpacing: 10, + nodeStrength: -45, + preventOverlap: true, + radialRadius: 0, + radialStrength: 0.055, + type: 'd3-force' }), behaviors: expect.arrayContaining([ expect.objectContaining({