Spaces:
Sleeping
Sleeping
| 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); | |
| } | |