diff --git a/src/components/KnowledgeGraph.astro b/src/components/KnowledgeGraph.astro index c1cad62..81fb162 100644 --- a/src/components/KnowledgeGraph.astro +++ b/src/components/KnowledgeGraph.astro @@ -26,10 +26,12 @@ export interface GraphData { interface Props { graphData: GraphData; height?: string; // e.g., '500px' + width?: string; // e.g., '100%' initialFilter?: string; // Optional initial filter + isMinimal?: boolean; // For smaller/simpler graphs inline in posts } -const { graphData, height = "50vh", initialFilter = "all" } = Astro.props; +const { graphData, height = "400px", width = "100%", initialFilter = "all", isMinimal = false } = Astro.props; // Generate colors based on node types const nodeTypeColors = { @@ -71,60 +73,159 @@ const nodeTypeCounts = { tag: graphData.nodes.filter(node => node.type === 'tag').length, category: graphData.nodes.filter(node => node.type === 'category').length }; + +// Determine layout settings based on minimal mode +const layoutSettings = isMinimal ? { + name: 'cose', + idealEdgeLength: 60, + nodeOverlap: 20, + refresh: 20, + fit: true, + padding: 20, + randomize: false, + componentSpacing: 60, + nodeRepulsion: 800000, + edgeElasticity: 150, + nestingFactor: 7, + gravity: 25, + numIter: 1500, + initialTemp: 200, + coolingFactor: 0.95, + minTemp: 1.0, + animate: true, + animationDuration: 800 +} : { + name: 'cose', + idealEdgeLength: 75, + nodeOverlap: 30, + refresh: 20, + fit: true, + padding: 30, + randomize: false, + componentSpacing: 60, + nodeRepulsion: 1000000, + edgeElasticity: 150, + nestingFactor: 7, + gravity: 30, + numIter: 2000, + initialTemp: 250, + coolingFactor: 0.95, + minTemp: 1.0, + animate: true, + animationDuration: 800 +}; + +// Default physics settings +const defaultPhysics = { + nodeRepulsion: 9000, + edgeElasticity: 50, + gravity: 10, + linkDistance: 100, + nodeSize: 1.0, + linkThickness: 1.0 +}; --- -