AgentGraph / frontend /src /lib /graph-config-factory.ts
wu981526092's picture
feat: optimize graph visualization sizes for better UI layout
cc3c5e9
import {
GraphVisualizationConfig,
GraphVisualizationType,
} from "@/types/graph-visualization";
// Default base configuration
const DEFAULT_CONFIG: GraphVisualizationConfig = {
type: GraphVisualizationType.FORCE_DIRECTED,
width: 650,
height: 450,
// Node defaults
nodeRadius: 10,
nodeMinRadius: 5,
nodeMaxRadius: 30,
showNodeLabels: true,
nodeLabelFontSize: 12,
// Link defaults
linkDistance: 100,
linkWidth: 2,
linkOpacity: 0.6,
showLinkLabels: false,
linkLabelFontSize: 10,
showDirectionalArrows: false,
useCurvedLinks: false,
// Force simulation defaults
chargeStrength: -300,
centerForce: 0.05,
collisionRadius: 20,
alphaTarget: 0,
alphaDecay: 0.028,
// Interaction defaults
enableZoom: true,
enablePan: true,
enableDrag: true,
enableSelection: true,
enableSearch: true,
// Layout defaults
layoutType: "force",
animationDuration: 500,
// UI defaults
showToolbar: true,
showSidebar: true,
showStats: true,
theme: "light",
};
// Knowledge Graph specific configuration
export function createKnowledgeGraphConfig(
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
return {
...DEFAULT_CONFIG,
type: GraphVisualizationType.KNOWLEDGE_GRAPH,
nodeRadius: 15,
linkDistance: 120,
chargeStrength: -400,
showNodeLabels: true,
showLinkLabels: true,
showDirectionalArrows: true,
useCurvedLinks: true,
enableZoom: true,
enablePan: true,
enableDrag: true,
enableSelection: true,
enableSearch: true,
layoutType: "force",
animationDuration: 750,
collisionRadius: 25,
nodeColorScheme: [
"#ff6b6b", // Red for Person
"#4ecdc4", // Teal for Organization
"#45b7d1", // Blue for Location
"#96ceb4", // Green for Event
"#feca57", // Yellow for Concept
"#ff9ff3", // Pink for Product
"#54a0ff", // Light Blue for Entity
"#5f27cd", // Purple for Abstract
],
linkColorScheme: [
"#6b7280", // Default gray
"#ff9800", // Orange for dependencies
"#4caf50", // Green for creates
"#2196f3", // Blue for uses
"#9c27b0", // Purple for inputs
"#e91e63", // Pink for outputs
],
...overrides,
};
}
// Temporal Graph specific configuration
export function createTemporalGraphConfig(
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
return {
...DEFAULT_CONFIG,
type: GraphVisualizationType.TEMPORAL_GRAPH,
nodeRadius: 50,
nodeMinRadius: 40,
nodeMaxRadius: 100,
nodeLabelFontSize: 18,
linkDistance: 200,
chargeStrength: -600,
collisionRadius: 80,
showNodeLabels: true,
showLinkLabels: true,
showDirectionalArrows: true,
useCurvedLinks: true,
enableZoom: true,
enablePan: true,
enableDrag: true,
enableSelection: true,
enableSearch: true,
layoutType: "force",
animationDuration: 500,
nodeColorScheme: [
"#3b82f6", // Blue for Agent
"#10b981", // Green for Task
"#f59e0b", // Amber for Input
"#ef4444", // Red for Output
"#8b5cf6", // Purple for Human
],
linkColorScheme: [
"#6b7280", // Gray default
"#3b82f6", // Blue for selected
],
...overrides,
};
}
// Simple Graph specific configuration
export function createSimpleGraphConfig(
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
return {
...DEFAULT_CONFIG,
type: GraphVisualizationType.SIMPLE_GRAPH,
nodeRadius: 20,
linkDistance: 80,
chargeStrength: -200,
showNodeLabels: true,
showLinkLabels: true,
showDirectionalArrows: false,
useCurvedLinks: false,
enableZoom: false,
enablePan: false,
enableDrag: false,
enableSelection: false,
enableSearch: false,
layoutType: "grid",
animationDuration: 0,
showToolbar: false,
showSidebar: false,
showStats: false,
nodeColorScheme: [
"#3b82f6", // Blue for person
"#10b981", // Green for organization
"#f59e0b", // Amber for location
"#8b5cf6", // Purple for concept
"#ef4444", // Red for event
"#6b7280", // Gray default
],
...overrides,
};
}
// Force Directed Graph configuration
export function createForceDirectedConfig(
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
return {
...DEFAULT_CONFIG,
type: GraphVisualizationType.FORCE_DIRECTED,
nodeRadius: 12,
linkDistance: 120,
chargeStrength: -400,
showNodeLabels: true,
showLinkLabels: false,
showDirectionalArrows: true,
useCurvedLinks: true,
enableZoom: true,
enablePan: true,
enableDrag: true,
enableSelection: true,
enableSearch: true,
layoutType: "force",
animationDuration: 750,
collisionRadius: 25,
...overrides,
};
}
// Hierarchical Graph configuration
export function createHierarchicalConfig(
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
return {
...DEFAULT_CONFIG,
type: GraphVisualizationType.HIERARCHICAL,
nodeRadius: 10,
linkDistance: 80,
chargeStrength: -200,
showNodeLabels: true,
showLinkLabels: false,
showDirectionalArrows: true,
useCurvedLinks: false,
enableZoom: true,
enablePan: true,
enableDrag: false, // Disable drag to maintain hierarchy
enableSelection: true,
enableSearch: true,
layoutType: "hierarchical",
animationDuration: 300,
...overrides,
};
}
// Factory function to get configuration by type
export function createGraphConfig(
type: GraphVisualizationType,
overrides: Partial<GraphVisualizationConfig> = {}
): GraphVisualizationConfig {
switch (type) {
case GraphVisualizationType.KNOWLEDGE_GRAPH:
return createKnowledgeGraphConfig(overrides);
case GraphVisualizationType.TEMPORAL_GRAPH:
return createTemporalGraphConfig(overrides);
case GraphVisualizationType.SIMPLE_GRAPH:
return createSimpleGraphConfig(overrides);
case GraphVisualizationType.FORCE_DIRECTED:
return createForceDirectedConfig(overrides);
case GraphVisualizationType.HIERARCHICAL:
return createHierarchicalConfig(overrides);
default:
return { ...DEFAULT_CONFIG, type, ...overrides };
}
}
// Utility function to merge configurations
export function mergeGraphConfigs(
base: GraphVisualizationConfig,
override: Partial<GraphVisualizationConfig>
): GraphVisualizationConfig {
return {
...base,
...override,
// Merge arrays properly
nodeColorScheme: override.nodeColorScheme || base.nodeColorScheme,
linkColorScheme: override.linkColorScheme || base.linkColorScheme,
};
}
// Responsive configuration helpers
export function createResponsiveConfig(
baseConfig: GraphVisualizationConfig,
containerWidth: number,
containerHeight: number
): GraphVisualizationConfig {
const isMobile = containerWidth < 768;
const isTablet = containerWidth >= 768 && containerWidth < 1024;
let responsiveOverrides: Partial<GraphVisualizationConfig> = {
width: containerWidth,
height: containerHeight,
};
if (isMobile) {
responsiveOverrides = {
...responsiveOverrides,
nodeRadius: Math.max(6, (baseConfig.nodeRadius || 10) * 0.8),
nodeLabelFontSize: Math.max(
8,
(baseConfig.nodeLabelFontSize || 12) * 0.8
),
linkLabelFontSize: Math.max(
6,
(baseConfig.linkLabelFontSize || 10) * 0.8
),
showLinkLabels: false, // Hide link labels on mobile
showSidebar: false, // Hide sidebar on mobile
linkDistance: (baseConfig.linkDistance || 100) * 0.8,
};
} else if (isTablet) {
responsiveOverrides = {
...responsiveOverrides,
nodeRadius: Math.max(8, (baseConfig.nodeRadius || 10) * 0.9),
nodeLabelFontSize: Math.max(
10,
(baseConfig.nodeLabelFontSize || 12) * 0.9
),
linkDistance: (baseConfig.linkDistance || 100) * 0.9,
};
}
return mergeGraphConfigs(baseConfig, responsiveOverrides);
}