@elevasis/ui 1.3.1 → 1.3.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/api/index.js +1 -1
- package/dist/auth/guards/AdminGuard.d.ts +32 -0
- package/dist/auth/guards/AdminGuard.d.ts.map +1 -0
- package/dist/auth/guards/ProtectedRoute.d.ts +60 -0
- package/dist/auth/guards/ProtectedRoute.d.ts.map +1 -0
- package/dist/auth/guards/__tests__/AdminGuard.test.d.ts +12 -0
- package/dist/auth/guards/__tests__/AdminGuard.test.d.ts.map +1 -0
- package/dist/auth/guards/__tests__/ProtectedRoute.test.d.ts +14 -0
- package/dist/auth/guards/__tests__/ProtectedRoute.test.d.ts.map +1 -0
- package/dist/auth/index.d.ts +14 -174
- package/dist/auth/index.d.ts.map +1 -0
- package/dist/auth/index.js +1 -1
- package/dist/{chunk-A3MCANC6.js → chunk-6IX5JZEH.js} +110 -50
- package/dist/chunk-GIFAF5ZS.js +313 -0
- package/dist/chunk-JQLT6HBI.js +850 -0
- package/dist/chunk-LFYO3MDC.js +58 -0
- package/dist/{chunk-72HOBFMP.js → chunk-LTQAAIGE.js} +3 -3
- package/dist/{chunk-JBFFCZI4.js → chunk-U34YGJQB.js} +1 -93
- package/dist/components/index.d.ts +1 -1353
- package/dist/components/index.js +1 -20
- package/dist/components/navigation/index.d.ts +2 -32
- package/dist/components/navigation/index.js +1 -29
- package/dist/execution/index.d.ts +63 -231
- package/dist/execution/index.js +1 -4
- package/dist/graph/index.css +0 -1
- package/dist/graph/index.d.ts +4 -203
- package/dist/graph/index.js +1 -1
- package/dist/hooks/command-queue/index.d.ts +7 -0
- package/dist/hooks/command-queue/index.d.ts.map +1 -0
- package/dist/hooks/command-queue/useCommandQueue.d.ts +33 -0
- package/dist/hooks/command-queue/useCommandQueue.d.ts.map +1 -0
- package/dist/hooks/command-queue/useCommandQueueTotals.d.ts +17 -0
- package/dist/hooks/command-queue/useCommandQueueTotals.d.ts.map +1 -0
- package/dist/hooks/command-queue/useDeleteTask.d.ts +5 -0
- package/dist/hooks/command-queue/useDeleteTask.d.ts.map +1 -0
- package/dist/hooks/command-queue/usePatchTask.d.ts +6 -0
- package/dist/hooks/command-queue/usePatchTask.d.ts.map +1 -0
- package/dist/hooks/command-queue/useSubmitAction.d.ts +29 -0
- package/dist/hooks/command-queue/useSubmitAction.d.ts.map +1 -0
- package/dist/hooks/executions/index.d.ts +16 -0
- package/dist/hooks/executions/index.d.ts.map +1 -0
- package/dist/hooks/executions/useBulkDeleteExecutions.d.ts +15 -0
- package/dist/hooks/executions/useBulkDeleteExecutions.d.ts.map +1 -0
- package/dist/hooks/executions/useCancelExecution.d.ts +20 -0
- package/dist/hooks/executions/useCancelExecution.d.ts.map +1 -0
- package/dist/hooks/executions/useDeleteExecution.d.ts +13 -0
- package/dist/hooks/executions/useDeleteExecution.d.ts.map +1 -0
- package/dist/hooks/executions/useExecuteAsync.d.ts +21 -0
- package/dist/hooks/executions/useExecuteAsync.d.ts.map +1 -0
- package/dist/hooks/executions/useExecution.d.ts +10 -0
- package/dist/hooks/executions/useExecution.d.ts.map +1 -0
- package/dist/hooks/executions/useExecutions.d.ts +16 -0
- package/dist/hooks/executions/useExecutions.d.ts.map +1 -0
- package/dist/hooks/executions/useResourceDefinition.d.ts +9 -0
- package/dist/hooks/executions/useResourceDefinition.d.ts.map +1 -0
- package/dist/hooks/executions/useResources.d.ts +15 -0
- package/dist/hooks/executions/useResources.d.ts.map +1 -0
- package/dist/hooks/executions/useRetryExecution.d.ts +16 -0
- package/dist/hooks/executions/useRetryExecution.d.ts.map +1 -0
- package/dist/hooks/feature-access/createUseFeatureAccess.d.ts +44 -0
- package/dist/hooks/feature-access/createUseFeatureAccess.d.ts.map +1 -0
- package/dist/hooks/feature-access/index.d.ts +2 -0
- package/dist/hooks/feature-access/index.d.ts.map +1 -0
- package/dist/hooks/index.d.ts +11 -4554
- package/dist/hooks/index.d.ts.map +1 -0
- package/dist/hooks/index.js +2 -4
- package/dist/hooks/monitoring/index.d.ts +9 -0
- package/dist/hooks/monitoring/index.d.ts.map +1 -0
- package/dist/hooks/monitoring/useActivities.d.ts +52 -0
- package/dist/hooks/monitoring/useActivities.d.ts.map +1 -0
- package/dist/hooks/monitoring/useCostSummary.d.ts +7 -0
- package/dist/hooks/monitoring/useCostSummary.d.ts.map +1 -0
- package/dist/hooks/monitoring/useExecutionHealth.d.ts +10 -0
- package/dist/hooks/monitoring/useExecutionHealth.d.ts.map +1 -0
- package/dist/hooks/monitoring/useExecutionLogs.d.ts +56 -0
- package/dist/hooks/monitoring/useExecutionLogs.d.ts.map +1 -0
- package/dist/hooks/monitoring/useNotifications.d.ts +11 -0
- package/dist/hooks/monitoring/useNotifications.d.ts.map +1 -0
- package/dist/hooks/notifications/index.d.ts +8 -0
- package/dist/hooks/notifications/index.d.ts.map +1 -0
- package/dist/hooks/notifications/useMarkAllAsRead.d.ts +2 -0
- package/dist/hooks/notifications/useMarkAllAsRead.d.ts.map +1 -0
- package/dist/hooks/notifications/useMarkAsRead.d.ts +2 -0
- package/dist/hooks/notifications/useMarkAsRead.d.ts.map +1 -0
- package/dist/hooks/notifications/useNotificationCount.d.ts +8 -0
- package/dist/hooks/notifications/useNotificationCount.d.ts.map +1 -0
- package/dist/hooks/observability/index.d.ts +19 -0
- package/dist/hooks/observability/index.d.ts.map +1 -0
- package/dist/hooks/observability/useBusinessImpact.d.ts +9 -0
- package/dist/hooks/observability/useBusinessImpact.d.ts.map +1 -0
- package/dist/hooks/observability/useCostBreakdown.d.ts +10 -0
- package/dist/hooks/observability/useCostBreakdown.d.ts.map +1 -0
- package/dist/hooks/observability/useCostByModel.d.ts +3 -0
- package/dist/hooks/observability/useCostByModel.d.ts.map +1 -0
- package/dist/hooks/observability/useCostTrends.d.ts +3 -0
- package/dist/hooks/observability/useCostTrends.d.ts.map +1 -0
- package/dist/hooks/observability/useDashboardMetrics.d.ts +3 -0
- package/dist/hooks/observability/useDashboardMetrics.d.ts.map +1 -0
- package/dist/hooks/observability/useErrorAnalysis.d.ts +7 -0
- package/dist/hooks/observability/useErrorAnalysis.d.ts.map +1 -0
- package/dist/hooks/observability/useErrorDetails.d.ts +20 -0
- package/dist/hooks/observability/useErrorDetails.d.ts.map +1 -0
- package/dist/hooks/observability/useErrorDistribution.d.ts +12 -0
- package/dist/hooks/observability/useErrorDistribution.d.ts.map +1 -0
- package/dist/hooks/observability/useErrorTrends.d.ts +12 -0
- package/dist/hooks/observability/useErrorTrends.d.ts.map +1 -0
- package/dist/hooks/observability/useResolveError.d.ts +17 -0
- package/dist/hooks/observability/useResolveError.d.ts.map +1 -0
- package/dist/hooks/observability/useTopFailingResources.d.ts +13 -0
- package/dist/hooks/observability/useTopFailingResources.d.ts.map +1 -0
- package/dist/hooks/published.d.ts +19 -4279
- package/dist/hooks/published.d.ts.map +1 -0
- package/dist/hooks/published.js +367 -4
- package/dist/hooks/scheduling/index.d.ts +5 -0
- package/dist/hooks/scheduling/index.d.ts.map +1 -0
- package/dist/hooks/scheduling/useSchedules.d.ts +185 -0
- package/dist/hooks/scheduling/useSchedules.d.ts.map +1 -0
- package/dist/hooks/sessions/index.d.ts +8 -0
- package/dist/hooks/sessions/index.d.ts.map +1 -0
- package/dist/hooks/sessions/useSessionExecutions.d.ts +13 -0
- package/dist/hooks/sessions/useSessionExecutions.d.ts.map +1 -0
- package/dist/hooks/sessions/useSessionMessages.d.ts +7 -0
- package/dist/hooks/sessions/useSessionMessages.d.ts.map +1 -0
- package/dist/hooks/sessions/useSessions.d.ts +26 -0
- package/dist/hooks/sessions/useSessions.d.ts.map +1 -0
- package/dist/index.css +0 -118
- package/dist/index.d.ts +15 -7889
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +1119 -24
- package/dist/initialization/InitializationProvider.d.ts +48 -0
- package/dist/initialization/InitializationProvider.d.ts.map +1 -0
- package/dist/initialization/hooks/useAppInitialization.d.ts +32 -0
- package/dist/initialization/hooks/useAppInitialization.d.ts.map +1 -0
- package/dist/initialization/index.d.ts +22 -2361
- package/dist/initialization/index.d.ts.map +1 -0
- package/dist/initialization/index.js +1 -1
- package/dist/organization/context/OrganizationProvider.d.ts +20 -0
- package/dist/organization/context/OrganizationProvider.d.ts.map +1 -0
- package/dist/organization/hooks/useOrgInitialization.d.ts +56 -0
- package/dist/organization/hooks/useOrgInitialization.d.ts.map +1 -0
- package/dist/organization/index.d.ts +21 -283
- package/dist/organization/index.d.ts.map +1 -0
- package/dist/organization/index.js +3 -3
- package/dist/profile/context/ProfileProvider.d.ts +27 -0
- package/dist/profile/context/ProfileProvider.d.ts.map +1 -0
- package/dist/profile/hooks/useUserProfile.d.ts +31 -0
- package/dist/profile/hooks/useUserProfile.d.ts.map +1 -0
- package/dist/profile/index.d.ts +14 -2290
- package/dist/profile/index.d.ts.map +1 -0
- package/dist/provider/CoreAuthKitInner.d.ts +12 -0
- package/dist/provider/CoreAuthKitInner.d.ts.map +1 -0
- package/dist/provider/ElevasisCoreProvider.d.ts +39 -0
- package/dist/provider/ElevasisCoreProvider.d.ts.map +1 -0
- package/dist/provider/ElevasisServiceContext.d.ts +31 -0
- package/dist/provider/ElevasisServiceContext.d.ts.map +1 -0
- package/dist/provider/__tests__/CoreAuthKitInner.test.d.ts +2 -0
- package/dist/provider/__tests__/CoreAuthKitInner.test.d.ts.map +1 -0
- package/dist/provider/__tests__/ElevasisCoreProvider.test.d.ts +2 -0
- package/dist/provider/__tests__/ElevasisCoreProvider.test.d.ts.map +1 -0
- package/dist/provider/index.d.ts +7 -372
- package/dist/provider/index.d.ts.map +1 -0
- package/dist/provider/index.js +3 -12
- package/dist/provider/published.d.ts +9 -263
- package/dist/provider/published.d.ts.map +1 -0
- package/dist/provider/published.js +5 -5
- package/dist/provider/types.d.ts +143 -0
- package/dist/provider/types.d.ts.map +1 -0
- package/dist/provider/types.js +1 -0
- package/dist/sdk-barrel.d.ts +20 -0
- package/dist/sdk-barrel.d.ts.map +1 -0
- package/dist/supabase/index.d.ts +0 -255
- package/dist/theme/cssVariables.d.ts +12 -0
- package/dist/theme/cssVariables.d.ts.map +1 -0
- package/dist/theme/cssVariables.js +93 -0
- package/dist/theme/index.d.ts +4 -0
- package/dist/theme/index.d.ts.map +1 -0
- package/dist/theme/index.js +1 -0
- package/dist/theme/presets/__tests__/getPreset.test.d.ts +2 -0
- package/dist/theme/presets/__tests__/getPreset.test.d.ts.map +1 -0
- package/dist/theme/presets/abyss.d.ts +3 -0
- package/dist/theme/presets/abyss.d.ts.map +1 -0
- package/dist/theme/presets/abyss.js +54 -0
- package/dist/theme/presets/aurora.d.ts +8 -0
- package/dist/theme/presets/aurora.d.ts.map +1 -0
- package/dist/theme/presets/aurora.js +59 -0
- package/dist/theme/presets/canopy.d.ts +3 -0
- package/dist/theme/presets/canopy.d.ts.map +1 -0
- package/dist/theme/presets/canopy.js +58 -0
- package/dist/theme/presets/cyber-flux.d.ts +8 -0
- package/dist/theme/presets/cyber-flux.d.ts.map +1 -0
- package/dist/theme/presets/cyber-flux.js +66 -0
- package/dist/theme/presets/cyber-strike.d.ts +9 -0
- package/dist/theme/presets/cyber-strike.d.ts.map +1 -0
- package/dist/theme/presets/cyber-strike.js +62 -0
- package/dist/theme/presets/cyber-void.d.ts +8 -0
- package/dist/theme/presets/cyber-void.d.ts.map +1 -0
- package/dist/theme/presets/cyber-void.js +62 -0
- package/dist/theme/presets/cyber-volt.d.ts +8 -0
- package/dist/theme/presets/cyber-volt.d.ts.map +1 -0
- package/dist/theme/presets/cyber-volt.js +66 -0
- package/dist/theme/presets/default.d.ts +4 -0
- package/dist/theme/presets/default.d.ts.map +1 -0
- package/dist/theme/presets/ember.d.ts +8 -0
- package/dist/theme/presets/ember.d.ts.map +1 -0
- package/dist/theme/presets/ember.js +63 -0
- package/dist/theme/presets/honey.d.ts +3 -0
- package/dist/theme/presets/honey.d.ts.map +1 -0
- package/dist/theme/presets/honey.js +62 -0
- package/dist/theme/presets/index.d.ts +6 -0
- package/dist/theme/presets/index.d.ts.map +1 -0
- package/dist/theme/presets/index.js +39 -0
- package/dist/theme/presets/midnight.d.ts +8 -0
- package/dist/theme/presets/midnight.d.ts.map +1 -0
- package/dist/theme/presets/midnight.js +68 -0
- package/dist/theme/presets/obsidian.d.ts +3 -0
- package/dist/theme/presets/obsidian.d.ts.map +1 -0
- package/dist/theme/presets/obsidian.js +56 -0
- package/dist/theme/presets/regal.d.ts +8 -0
- package/dist/theme/presets/regal.d.ts.map +1 -0
- package/dist/theme/presets/regal.js +63 -0
- package/dist/theme/presets/rose-gold.d.ts +8 -0
- package/dist/theme/presets/rose-gold.d.ts.map +1 -0
- package/dist/theme/presets/rose-gold.js +63 -0
- package/dist/theme/presets/slate.d.ts +3 -0
- package/dist/theme/presets/slate.d.ts.map +1 -0
- package/dist/theme/presets/slate.js +56 -0
- package/dist/theme/presets/tactical.d.ts +8 -0
- package/dist/theme/presets/tactical.d.ts.map +1 -0
- package/dist/theme/presets/tactical.js +57 -0
- package/dist/theme/presets/types.d.ts +26 -0
- package/dist/theme/presets/types.d.ts.map +1 -0
- package/dist/theme/presets/types.js +1 -0
- package/dist/utils/index.d.ts +1 -22
- package/dist/utils/index.js +1 -1
- package/package.json +4 -52
- package/dist/chunk-3KMDHCAR.js +0 -52
- package/dist/chunk-6BJOYF6E.js +0 -8
- package/dist/chunk-BLO4SISK.js +0 -113
- package/dist/chunk-HUWJXLLF.js +0 -681
- package/dist/chunk-JVAZHVNV.js +0 -110
- package/dist/chunk-JYSYHVLU.js +0 -379
- package/dist/chunk-NE36BUGQ.js +0 -146
- package/dist/chunk-O3PY6B6E.js +0 -749
- package/dist/chunk-OXVOHOP3.js +0 -661
- package/dist/chunk-PSLKGOBZ.js +0 -58
- package/dist/chunk-RJCA5672.js +0 -1664
- package/dist/chunk-TMFCNFLW.js +0 -107
- package/dist/chunk-TN3PU2WK.js +0 -748
- package/dist/chunk-TZPAA4RC.js +0 -1461
- package/dist/chunk-W7ZBF5AA.js +0 -1
- package/dist/chunk-YZ6GTZXL.js +0 -48
- package/dist/components/command-queue/index.css +0 -53
- package/dist/components/command-queue/index.d.ts +0 -204
- package/dist/components/command-queue/index.js +0 -12
- package/dist/components/forms/index.d.ts +0 -56
- package/dist/components/forms/index.js +0 -2
- package/dist/components/index.css +0 -443
- package/dist/components/monitoring/index.d.ts +0 -66
- package/dist/components/monitoring/index.js +0 -2
- package/dist/components/notifications/index.d.ts +0 -52
- package/dist/components/notifications/index.js +0 -5
- package/dist/components/resource-definition/index.css +0 -388
- package/dist/components/resource-definition/index.d.ts +0 -301
- package/dist/components/resource-definition/index.js +0 -3
- package/dist/display/index.css +0 -53
- package/dist/display/index.d.ts +0 -606
- package/dist/display/index.js +0 -7
- package/dist/execution/index.css +0 -388
- package/dist/provider/index.css +0 -61
- package/dist/{chunk-TYV5NJV2.js → chunk-BUZONXAW.js} +0 -0
- package/dist/{chunk-UMXDDEAG.js → chunk-SFF5MJEI.js} +1 -1
- /package/dist/{chunk-NXHL23JW.js → chunk-XXDDMASA.js} +0 -0
package/dist/chunk-HUWJXLLF.js
DELETED
|
@@ -1,681 +0,0 @@
|
|
|
1
|
-
import { memo, useMemo, useState, useCallback, useEffect } from 'react';
|
|
2
|
-
import { Paper, useComputedColorScheme, Box, Card, Group, Text, ActionIcon } from '@mantine/core';
|
|
3
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { Position, Handle, getSmoothStepPath, BaseEdge as BaseEdge$1, EdgeLabelRenderer, Panel, useReactFlow, Controls } from '@xyflow/react';
|
|
5
|
-
import { IconFocus2 } from '@tabler/icons-react';
|
|
6
|
-
|
|
7
|
-
// src/graph/Graph.module.css
|
|
8
|
-
var Graph_default = {};
|
|
9
|
-
|
|
10
|
-
// src/graph/constants.ts
|
|
11
|
-
var GRAPH_CONSTANTS = {
|
|
12
|
-
NODE_WIDTH: 220,
|
|
13
|
-
NODE_HEIGHT: 140,
|
|
14
|
-
HANDLE_SIZE: 12,
|
|
15
|
-
MIN_ZOOM: 0.2,
|
|
16
|
-
MAX_ZOOM: 1.5,
|
|
17
|
-
RANK_SEP: 140,
|
|
18
|
-
NODE_SEP: 60
|
|
19
|
-
};
|
|
20
|
-
var DOMAIN_COLORS = {
|
|
21
|
-
primary: "var(--color-primary)",
|
|
22
|
-
agent: "#8b5cf6",
|
|
23
|
-
workflow: "#3b82f6",
|
|
24
|
-
trigger: "#f97316",
|
|
25
|
-
integration: "#14b8a6",
|
|
26
|
-
approval: "#f59e0b"
|
|
27
|
-
};
|
|
28
|
-
function fill(color, isDark) {
|
|
29
|
-
return isDark ? `color-mix(in srgb, ${color} 80%, black)` : `color-mix(in srgb, ${color} 60%, white)`;
|
|
30
|
-
}
|
|
31
|
-
function glow(color) {
|
|
32
|
-
return `color-mix(in srgb, ${color} 40%, transparent)`;
|
|
33
|
-
}
|
|
34
|
-
function useGraphTheme() {
|
|
35
|
-
const isDark = useComputedColorScheme("dark") === "dark";
|
|
36
|
-
return useMemo(
|
|
37
|
-
() => ({
|
|
38
|
-
primary: fill(DOMAIN_COLORS.primary, isDark),
|
|
39
|
-
primaryGlow: glow(DOMAIN_COLORS.primary),
|
|
40
|
-
agent: fill(DOMAIN_COLORS.agent, isDark),
|
|
41
|
-
workflow: fill(DOMAIN_COLORS.workflow, isDark),
|
|
42
|
-
trigger: fill(DOMAIN_COLORS.trigger, isDark),
|
|
43
|
-
integration: fill(DOMAIN_COLORS.integration, isDark),
|
|
44
|
-
approval: fill(DOMAIN_COLORS.approval, isDark),
|
|
45
|
-
agentGlow: glow(DOMAIN_COLORS.agent),
|
|
46
|
-
workflowGlow: glow(DOMAIN_COLORS.workflow),
|
|
47
|
-
triggerGlow: glow(DOMAIN_COLORS.trigger),
|
|
48
|
-
integrationGlow: glow(DOMAIN_COLORS.integration),
|
|
49
|
-
approvalGlow: glow(DOMAIN_COLORS.approval),
|
|
50
|
-
edgeTriggers: fill(DOMAIN_COLORS.workflow, isDark),
|
|
51
|
-
edgeUses: fill(DOMAIN_COLORS.integration, isDark),
|
|
52
|
-
edgeApproval: fill(DOMAIN_COLORS.approval, isDark),
|
|
53
|
-
edgeTriggersGlow: glow(DOMAIN_COLORS.workflow),
|
|
54
|
-
edgeUsesGlow: glow(DOMAIN_COLORS.integration),
|
|
55
|
-
edgeApprovalGlow: glow(DOMAIN_COLORS.approval)
|
|
56
|
-
}),
|
|
57
|
-
[isDark]
|
|
58
|
-
);
|
|
59
|
-
}
|
|
60
|
-
function useConnectionHighlight(nodes, edges) {
|
|
61
|
-
const [hoveredNodeId, setHoveredNodeId] = useState(null);
|
|
62
|
-
const adjacencyMap = useMemo(() => {
|
|
63
|
-
const map = /* @__PURE__ */ new Map();
|
|
64
|
-
for (const node of nodes) {
|
|
65
|
-
map.set(node.id, { connectedNodes: /* @__PURE__ */ new Set(), connectedEdges: /* @__PURE__ */ new Set() });
|
|
66
|
-
}
|
|
67
|
-
for (const edge of edges) {
|
|
68
|
-
const sourceData = map.get(edge.source);
|
|
69
|
-
const targetData = map.get(edge.target);
|
|
70
|
-
if (sourceData) {
|
|
71
|
-
sourceData.connectedNodes.add(edge.target);
|
|
72
|
-
sourceData.connectedEdges.add(edge.id);
|
|
73
|
-
}
|
|
74
|
-
if (targetData) {
|
|
75
|
-
targetData.connectedNodes.add(edge.source);
|
|
76
|
-
targetData.connectedEdges.add(edge.id);
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
return map;
|
|
80
|
-
}, [nodes, edges]);
|
|
81
|
-
const { highlightedNodeIds, highlightedEdgeIds } = useMemo(() => {
|
|
82
|
-
if (!hoveredNodeId) {
|
|
83
|
-
return {
|
|
84
|
-
highlightedNodeIds: /* @__PURE__ */ new Set(),
|
|
85
|
-
highlightedEdgeIds: /* @__PURE__ */ new Set()
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
const nodeData = adjacencyMap.get(hoveredNodeId);
|
|
89
|
-
if (!nodeData) {
|
|
90
|
-
return {
|
|
91
|
-
highlightedNodeIds: /* @__PURE__ */ new Set(),
|
|
92
|
-
highlightedEdgeIds: /* @__PURE__ */ new Set()
|
|
93
|
-
};
|
|
94
|
-
}
|
|
95
|
-
const highlightedNodes = /* @__PURE__ */ new Set([hoveredNodeId, ...Array.from(nodeData.connectedNodes)]);
|
|
96
|
-
return {
|
|
97
|
-
highlightedNodeIds: highlightedNodes,
|
|
98
|
-
highlightedEdgeIds: nodeData.connectedEdges
|
|
99
|
-
};
|
|
100
|
-
}, [hoveredNodeId, adjacencyMap]);
|
|
101
|
-
const onNodeMouseEnter = useCallback((nodeId) => {
|
|
102
|
-
setHoveredNodeId(nodeId);
|
|
103
|
-
}, []);
|
|
104
|
-
const onNodeMouseLeave = useCallback(() => {
|
|
105
|
-
setHoveredNodeId(null);
|
|
106
|
-
}, []);
|
|
107
|
-
const getNodeClassName = useCallback(
|
|
108
|
-
(nodeId) => {
|
|
109
|
-
if (!hoveredNodeId) return "";
|
|
110
|
-
if (highlightedNodeIds.has(nodeId)) return "nodeHighlighted";
|
|
111
|
-
return "nodeDimmed";
|
|
112
|
-
},
|
|
113
|
-
[hoveredNodeId, highlightedNodeIds]
|
|
114
|
-
);
|
|
115
|
-
const getEdgeClassName = useCallback(
|
|
116
|
-
(edgeId) => {
|
|
117
|
-
if (!hoveredNodeId) return "";
|
|
118
|
-
if (highlightedEdgeIds.has(edgeId)) return "edgeHighlighted";
|
|
119
|
-
return "edgeDimmed";
|
|
120
|
-
},
|
|
121
|
-
[hoveredNodeId, highlightedEdgeIds]
|
|
122
|
-
);
|
|
123
|
-
return {
|
|
124
|
-
hoveredNodeId,
|
|
125
|
-
highlightedNodeIds,
|
|
126
|
-
highlightedEdgeIds,
|
|
127
|
-
onNodeMouseEnter,
|
|
128
|
-
onNodeMouseLeave,
|
|
129
|
-
getNodeClassName,
|
|
130
|
-
getEdgeClassName
|
|
131
|
-
};
|
|
132
|
-
}
|
|
133
|
-
function useGraphHighlighting(layoutNodes, layoutEdges) {
|
|
134
|
-
const {
|
|
135
|
-
hoveredNodeId,
|
|
136
|
-
highlightedNodeIds,
|
|
137
|
-
highlightedEdgeIds,
|
|
138
|
-
onNodeMouseEnter,
|
|
139
|
-
onNodeMouseLeave
|
|
140
|
-
} = useConnectionHighlight(layoutNodes, layoutEdges);
|
|
141
|
-
const nodes = useMemo(() => {
|
|
142
|
-
return layoutNodes.map((node) => ({
|
|
143
|
-
...node,
|
|
144
|
-
className: hoveredNodeId ? highlightedNodeIds.has(node.id) ? Graph_default.nodeHighlighted : Graph_default.nodeDimmed : ""
|
|
145
|
-
}));
|
|
146
|
-
}, [layoutNodes, hoveredNodeId, highlightedNodeIds]);
|
|
147
|
-
const edges = useMemo(() => {
|
|
148
|
-
return layoutEdges.map((edge) => {
|
|
149
|
-
const isDimmed = hoveredNodeId ? !highlightedEdgeIds.has(edge.id) : false;
|
|
150
|
-
return {
|
|
151
|
-
...edge,
|
|
152
|
-
className: hoveredNodeId ? highlightedEdgeIds.has(edge.id) ? Graph_default.edgeHighlighted : Graph_default.edgeDimmed : "",
|
|
153
|
-
data: {
|
|
154
|
-
...edge.data,
|
|
155
|
-
dimmed: isDimmed
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
});
|
|
159
|
-
}, [layoutEdges, hoveredNodeId, highlightedEdgeIds]);
|
|
160
|
-
const handleNodeMouseEnter = useCallback(
|
|
161
|
-
(_event, node) => onNodeMouseEnter(node.id),
|
|
162
|
-
[onNodeMouseEnter]
|
|
163
|
-
);
|
|
164
|
-
const handleNodeMouseLeave = useCallback(() => {
|
|
165
|
-
onNodeMouseLeave();
|
|
166
|
-
}, [onNodeMouseLeave]);
|
|
167
|
-
return {
|
|
168
|
-
nodes,
|
|
169
|
-
edges,
|
|
170
|
-
handleNodeMouseEnter,
|
|
171
|
-
handleNodeMouseLeave
|
|
172
|
-
};
|
|
173
|
-
}
|
|
174
|
-
function useDirectedChainHighlighting(layoutNodes, layoutEdges, options = {}) {
|
|
175
|
-
const { selectedNodeId } = options;
|
|
176
|
-
const [hoveredNodeId, setHoveredNodeId] = useState(null);
|
|
177
|
-
const reachabilityMap = useMemo(() => {
|
|
178
|
-
const map = /* @__PURE__ */ new Map();
|
|
179
|
-
const forwardAdj = /* @__PURE__ */ new Map();
|
|
180
|
-
const backwardAdj = /* @__PURE__ */ new Map();
|
|
181
|
-
for (const node of layoutNodes) {
|
|
182
|
-
forwardAdj.set(node.id, { nodes: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set() });
|
|
183
|
-
backwardAdj.set(node.id, { nodes: /* @__PURE__ */ new Set(), edges: /* @__PURE__ */ new Set() });
|
|
184
|
-
}
|
|
185
|
-
for (const edge of layoutEdges) {
|
|
186
|
-
const sourceForward = forwardAdj.get(edge.source);
|
|
187
|
-
if (sourceForward) {
|
|
188
|
-
sourceForward.nodes.add(edge.target);
|
|
189
|
-
sourceForward.edges.add(edge.id);
|
|
190
|
-
}
|
|
191
|
-
const targetBackward = backwardAdj.get(edge.target);
|
|
192
|
-
if (targetBackward) {
|
|
193
|
-
targetBackward.nodes.add(edge.source);
|
|
194
|
-
targetBackward.edges.add(edge.id);
|
|
195
|
-
}
|
|
196
|
-
}
|
|
197
|
-
const traverse = (startId, adjacency) => {
|
|
198
|
-
const reachableNodes = /* @__PURE__ */ new Set();
|
|
199
|
-
const reachableEdges = /* @__PURE__ */ new Set();
|
|
200
|
-
const queue = [startId];
|
|
201
|
-
while (queue.length > 0) {
|
|
202
|
-
const currentId = queue.shift();
|
|
203
|
-
if (reachableNodes.has(currentId)) continue;
|
|
204
|
-
reachableNodes.add(currentId);
|
|
205
|
-
const adj = adjacency.get(currentId);
|
|
206
|
-
if (adj) {
|
|
207
|
-
Array.from(adj.edges).forEach((edgeId) => {
|
|
208
|
-
reachableEdges.add(edgeId);
|
|
209
|
-
});
|
|
210
|
-
Array.from(adj.nodes).forEach((neighborId) => {
|
|
211
|
-
if (!reachableNodes.has(neighborId)) {
|
|
212
|
-
queue.push(neighborId);
|
|
213
|
-
}
|
|
214
|
-
});
|
|
215
|
-
}
|
|
216
|
-
}
|
|
217
|
-
return { nodes: reachableNodes, edges: reachableEdges };
|
|
218
|
-
};
|
|
219
|
-
for (const node of layoutNodes) {
|
|
220
|
-
const successors = traverse(node.id, forwardAdj);
|
|
221
|
-
const predecessors = traverse(node.id, backwardAdj);
|
|
222
|
-
const allNodes = /* @__PURE__ */ new Set([node.id]);
|
|
223
|
-
Array.from(successors.nodes).forEach((id) => allNodes.add(id));
|
|
224
|
-
Array.from(predecessors.nodes).forEach((id) => allNodes.add(id));
|
|
225
|
-
const allEdges = /* @__PURE__ */ new Set();
|
|
226
|
-
Array.from(successors.edges).forEach((id) => allEdges.add(id));
|
|
227
|
-
Array.from(predecessors.edges).forEach((id) => allEdges.add(id));
|
|
228
|
-
map.set(node.id, { nodeIds: allNodes, edgeIds: allEdges });
|
|
229
|
-
}
|
|
230
|
-
return map;
|
|
231
|
-
}, [layoutNodes, layoutEdges]);
|
|
232
|
-
const { highlightedNodeIds, highlightedEdgeIds, hasHighlight } = useMemo(() => {
|
|
233
|
-
const nodeIds = /* @__PURE__ */ new Set();
|
|
234
|
-
const edgeIds = /* @__PURE__ */ new Set();
|
|
235
|
-
if (selectedNodeId) {
|
|
236
|
-
const selectedReachability = reachabilityMap.get(selectedNodeId);
|
|
237
|
-
if (selectedReachability) {
|
|
238
|
-
selectedReachability.nodeIds.forEach((id) => nodeIds.add(id));
|
|
239
|
-
selectedReachability.edgeIds.forEach((id) => edgeIds.add(id));
|
|
240
|
-
}
|
|
241
|
-
}
|
|
242
|
-
if (hoveredNodeId) {
|
|
243
|
-
const hoveredReachability = reachabilityMap.get(hoveredNodeId);
|
|
244
|
-
if (hoveredReachability) {
|
|
245
|
-
hoveredReachability.nodeIds.forEach((id) => nodeIds.add(id));
|
|
246
|
-
hoveredReachability.edgeIds.forEach((id) => edgeIds.add(id));
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
return {
|
|
250
|
-
highlightedNodeIds: nodeIds,
|
|
251
|
-
highlightedEdgeIds: edgeIds,
|
|
252
|
-
hasHighlight: nodeIds.size > 0
|
|
253
|
-
};
|
|
254
|
-
}, [selectedNodeId, hoveredNodeId, reachabilityMap]);
|
|
255
|
-
const nodes = useMemo(() => {
|
|
256
|
-
return layoutNodes.map((node) => {
|
|
257
|
-
const isHighlighted = hasHighlight ? highlightedNodeIds.has(node.id) : false;
|
|
258
|
-
const isDimmed = hasHighlight ? !highlightedNodeIds.has(node.id) : false;
|
|
259
|
-
return {
|
|
260
|
-
...node,
|
|
261
|
-
className: isDimmed ? Graph_default.nodeDimmed : "",
|
|
262
|
-
data: {
|
|
263
|
-
...node.data,
|
|
264
|
-
highlighted: isHighlighted
|
|
265
|
-
}
|
|
266
|
-
};
|
|
267
|
-
});
|
|
268
|
-
}, [layoutNodes, hasHighlight, highlightedNodeIds]);
|
|
269
|
-
const edges = useMemo(() => {
|
|
270
|
-
return layoutEdges.map((edge) => {
|
|
271
|
-
const isDimmed = hasHighlight ? !highlightedEdgeIds.has(edge.id) : false;
|
|
272
|
-
return {
|
|
273
|
-
...edge,
|
|
274
|
-
className: hasHighlight ? highlightedEdgeIds.has(edge.id) ? Graph_default.edgeHighlighted : Graph_default.edgeDimmed : "",
|
|
275
|
-
data: {
|
|
276
|
-
...edge.data,
|
|
277
|
-
dimmed: isDimmed
|
|
278
|
-
}
|
|
279
|
-
};
|
|
280
|
-
});
|
|
281
|
-
}, [layoutEdges, hasHighlight, highlightedEdgeIds]);
|
|
282
|
-
const handleNodeMouseEnter = useCallback(
|
|
283
|
-
(_event, node) => setHoveredNodeId(node.id),
|
|
284
|
-
[]
|
|
285
|
-
);
|
|
286
|
-
const handleNodeMouseLeave = useCallback(() => {
|
|
287
|
-
setHoveredNodeId(null);
|
|
288
|
-
}, []);
|
|
289
|
-
return {
|
|
290
|
-
nodes,
|
|
291
|
-
edges,
|
|
292
|
-
hoveredNodeId,
|
|
293
|
-
handleNodeMouseEnter,
|
|
294
|
-
handleNodeMouseLeave
|
|
295
|
-
};
|
|
296
|
-
}
|
|
297
|
-
function useNodeSelection(selectedId, onSelect) {
|
|
298
|
-
const handleNodeClick = useCallback(
|
|
299
|
-
(event, node) => {
|
|
300
|
-
event.stopPropagation();
|
|
301
|
-
const nodeId = node.id;
|
|
302
|
-
if (selectedId === nodeId) {
|
|
303
|
-
onSelect(null);
|
|
304
|
-
} else {
|
|
305
|
-
onSelect(nodeId);
|
|
306
|
-
}
|
|
307
|
-
},
|
|
308
|
-
[selectedId, onSelect]
|
|
309
|
-
);
|
|
310
|
-
const handlePaneClick = useCallback(() => {
|
|
311
|
-
if (selectedId !== null) {
|
|
312
|
-
onSelect(null);
|
|
313
|
-
}
|
|
314
|
-
}, [selectedId, onSelect]);
|
|
315
|
-
const handleContainerClick = useCallback(
|
|
316
|
-
(event) => {
|
|
317
|
-
if (event.target === event.currentTarget) {
|
|
318
|
-
onSelect(null);
|
|
319
|
-
}
|
|
320
|
-
},
|
|
321
|
-
[onSelect]
|
|
322
|
-
);
|
|
323
|
-
return {
|
|
324
|
-
handleNodeClick,
|
|
325
|
-
handlePaneClick,
|
|
326
|
-
handleContainerClick
|
|
327
|
-
};
|
|
328
|
-
}
|
|
329
|
-
function useFitViewTrigger(data, nodes) {
|
|
330
|
-
const [fitViewTrigger, setFitViewTrigger] = useState(0);
|
|
331
|
-
useEffect(() => {
|
|
332
|
-
if (data) {
|
|
333
|
-
setFitViewTrigger((prev) => prev + 1);
|
|
334
|
-
}
|
|
335
|
-
}, [data]);
|
|
336
|
-
useEffect(() => {
|
|
337
|
-
if (nodes.length > 0) {
|
|
338
|
-
setFitViewTrigger((prev) => prev + 1);
|
|
339
|
-
}
|
|
340
|
-
}, [nodes]);
|
|
341
|
-
return fitViewTrigger;
|
|
342
|
-
}
|
|
343
|
-
function getGraphBackgroundStyles(isDark) {
|
|
344
|
-
const pct = isDark ? 5 : 3;
|
|
345
|
-
const glowPct = isDark ? 8 : 5;
|
|
346
|
-
const mix = (percent) => `color-mix(in srgb, var(--color-primary) ${percent}%, transparent)`;
|
|
347
|
-
return {
|
|
348
|
-
backgroundImage: `
|
|
349
|
-
linear-gradient(${mix(pct)} 1px, transparent 1px),
|
|
350
|
-
linear-gradient(90deg, ${mix(pct)} 1px, transparent 1px),
|
|
351
|
-
radial-gradient(ellipse at 50% 50%, ${mix(glowPct)} 0%, transparent 70%)
|
|
352
|
-
`,
|
|
353
|
-
backgroundColor: "var(--color-background)",
|
|
354
|
-
backgroundSize: "40px 40px, 40px 40px, 100% 100%"
|
|
355
|
-
};
|
|
356
|
-
}
|
|
357
|
-
function useGraphBackgroundStyles() {
|
|
358
|
-
const isDark = useComputedColorScheme("dark") === "dark";
|
|
359
|
-
return useMemo(() => getGraphBackgroundStyles(isDark), [isDark]);
|
|
360
|
-
}
|
|
361
|
-
function GraphContainer({ children, height = 600 }) {
|
|
362
|
-
const backgroundStyles = useGraphBackgroundStyles();
|
|
363
|
-
return /* @__PURE__ */ jsx(
|
|
364
|
-
Box,
|
|
365
|
-
{
|
|
366
|
-
style: {
|
|
367
|
-
width: "100%",
|
|
368
|
-
height,
|
|
369
|
-
border: "1px solid var(--color-border)",
|
|
370
|
-
borderRadius: "var(--mantine-radius-md)",
|
|
371
|
-
overflow: "hidden",
|
|
372
|
-
position: "relative",
|
|
373
|
-
...backgroundStyles
|
|
374
|
-
},
|
|
375
|
-
children
|
|
376
|
-
}
|
|
377
|
-
);
|
|
378
|
-
}
|
|
379
|
-
function GraphBackground() {
|
|
380
|
-
return null;
|
|
381
|
-
}
|
|
382
|
-
function LegendDot({ color }) {
|
|
383
|
-
return /* @__PURE__ */ jsx(
|
|
384
|
-
Box,
|
|
385
|
-
{
|
|
386
|
-
style: {
|
|
387
|
-
width: 10,
|
|
388
|
-
height: 10,
|
|
389
|
-
borderRadius: "50%",
|
|
390
|
-
backgroundColor: `var(--mantine-color-${color}-5)`
|
|
391
|
-
}
|
|
392
|
-
}
|
|
393
|
-
);
|
|
394
|
-
}
|
|
395
|
-
function LegendLine({ color }) {
|
|
396
|
-
return /* @__PURE__ */ jsx(
|
|
397
|
-
Box,
|
|
398
|
-
{
|
|
399
|
-
style: {
|
|
400
|
-
width: 20,
|
|
401
|
-
height: 3,
|
|
402
|
-
borderRadius: 2,
|
|
403
|
-
background: `linear-gradient(90deg, var(--mantine-color-${color}-5), var(--mantine-color-${color}-6))`
|
|
404
|
-
}
|
|
405
|
-
}
|
|
406
|
-
);
|
|
407
|
-
}
|
|
408
|
-
function GraphLegend({ title = "Legend", items, position = "bottom-right" }) {
|
|
409
|
-
const margins = {
|
|
410
|
-
marginBottom: position.includes("bottom") ? 12 : void 0,
|
|
411
|
-
marginTop: position.includes("top") ? 12 : void 0,
|
|
412
|
-
marginRight: position.includes("right") ? 60 : 12,
|
|
413
|
-
marginLeft: position.includes("left") ? 12 : void 0
|
|
414
|
-
};
|
|
415
|
-
return /* @__PURE__ */ jsx(Panel, { position, style: margins, children: /* @__PURE__ */ jsx(
|
|
416
|
-
Card,
|
|
417
|
-
{
|
|
418
|
-
p: "xs",
|
|
419
|
-
className: Graph_default.legend,
|
|
420
|
-
style: {
|
|
421
|
-
backgroundColor: "var(--glass-background)"
|
|
422
|
-
},
|
|
423
|
-
children: /* @__PURE__ */ jsxs(Group, { children: [
|
|
424
|
-
/* @__PURE__ */ jsx(
|
|
425
|
-
Text,
|
|
426
|
-
{
|
|
427
|
-
size: "xs",
|
|
428
|
-
fw: 600,
|
|
429
|
-
style: {
|
|
430
|
-
letterSpacing: "0.5px",
|
|
431
|
-
textTransform: "uppercase",
|
|
432
|
-
fontFamily: "var(--mantine-font-family-headings)"
|
|
433
|
-
},
|
|
434
|
-
children: title
|
|
435
|
-
}
|
|
436
|
-
),
|
|
437
|
-
items.map((item) => /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
|
|
438
|
-
item.type === "line" ? /* @__PURE__ */ jsx(LegendLine, { color: item.color }) : /* @__PURE__ */ jsx(LegendDot, { color: item.color }),
|
|
439
|
-
/* @__PURE__ */ jsx(Text, { size: "xs", children: item.label })
|
|
440
|
-
] }, item.label))
|
|
441
|
-
] })
|
|
442
|
-
}
|
|
443
|
-
) });
|
|
444
|
-
}
|
|
445
|
-
function GraphFitViewButton({
|
|
446
|
-
padding = 0.2,
|
|
447
|
-
variant = "reactflow",
|
|
448
|
-
duration = 300
|
|
449
|
-
}) {
|
|
450
|
-
const { fitView } = useReactFlow();
|
|
451
|
-
const handleFitView = () => {
|
|
452
|
-
fitView({ padding, duration });
|
|
453
|
-
};
|
|
454
|
-
if (variant === "mantine") {
|
|
455
|
-
return /* @__PURE__ */ jsx(
|
|
456
|
-
ActionIcon,
|
|
457
|
-
{
|
|
458
|
-
onClick: handleFitView,
|
|
459
|
-
variant: "default",
|
|
460
|
-
size: "lg",
|
|
461
|
-
title: "Fit view",
|
|
462
|
-
style: {
|
|
463
|
-
position: "absolute",
|
|
464
|
-
bottom: 12,
|
|
465
|
-
right: 12,
|
|
466
|
-
zIndex: 5,
|
|
467
|
-
background: "var(--color-surface)",
|
|
468
|
-
border: "1px solid var(--color-border)"
|
|
469
|
-
},
|
|
470
|
-
children: /* @__PURE__ */ jsx(IconFocus2, { size: 18 })
|
|
471
|
-
}
|
|
472
|
-
);
|
|
473
|
-
}
|
|
474
|
-
return /* @__PURE__ */ jsx(Controls, { position: "bottom-right", showZoom: false, showFitView: false, showInteractive: false, children: /* @__PURE__ */ jsx(
|
|
475
|
-
"button",
|
|
476
|
-
{
|
|
477
|
-
className: "react-flow__controls-button react-flow__controls-fitview",
|
|
478
|
-
onClick: handleFitView,
|
|
479
|
-
title: "Fit view",
|
|
480
|
-
children: /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx("path", { d: "M8 3H5C3.89 3 3 3.89 3 5V8H5V5H8V3M19 3H16V5H19V8H21V5C21 3.89 20.11 3 19 3M19 19H16V21H19C20.11 21 21 20.11 21 19V16H19V19M5 19H8V21H5C3.89 21 3 20.11 3 19V16H5V19Z" }) })
|
|
481
|
-
}
|
|
482
|
-
) });
|
|
483
|
-
}
|
|
484
|
-
function GraphFitViewHandler({
|
|
485
|
-
trigger,
|
|
486
|
-
padding = 0.15,
|
|
487
|
-
duration = 300,
|
|
488
|
-
delay = 250
|
|
489
|
-
}) {
|
|
490
|
-
const { fitView } = useReactFlow();
|
|
491
|
-
useEffect(() => {
|
|
492
|
-
if (trigger && trigger > 0) {
|
|
493
|
-
const timeout = setTimeout(() => {
|
|
494
|
-
fitView({ padding, duration });
|
|
495
|
-
}, delay);
|
|
496
|
-
return () => clearTimeout(timeout);
|
|
497
|
-
}
|
|
498
|
-
return void 0;
|
|
499
|
-
}, [trigger, fitView, padding, duration, delay]);
|
|
500
|
-
return null;
|
|
501
|
-
}
|
|
502
|
-
var colorClassMap = {
|
|
503
|
-
violet: Graph_default.nodeAgent,
|
|
504
|
-
blue: Graph_default.nodeWorkflow,
|
|
505
|
-
orange: Graph_default.nodeTrigger,
|
|
506
|
-
teal: Graph_default.nodeIntegration,
|
|
507
|
-
gray: Graph_default.nodeExternal,
|
|
508
|
-
yellow: Graph_default.nodeHuman
|
|
509
|
-
};
|
|
510
|
-
var BaseNode = memo(function BaseNode2({
|
|
511
|
-
children,
|
|
512
|
-
color,
|
|
513
|
-
selected = false,
|
|
514
|
-
highlighted = false,
|
|
515
|
-
width = 220,
|
|
516
|
-
className = "",
|
|
517
|
-
handleDirection = "horizontal",
|
|
518
|
-
showSourceHandle = true,
|
|
519
|
-
showTargetHandle = true
|
|
520
|
-
}) {
|
|
521
|
-
const typeClass = colorClassMap[color] || Graph_default.nodeAgent;
|
|
522
|
-
const highlightClass = highlighted ? Graph_default.nodeHighlighted : "";
|
|
523
|
-
const targetPosition = handleDirection === "horizontal" ? Position.Left : Position.Top;
|
|
524
|
-
const sourcePosition = handleDirection === "horizontal" ? Position.Right : Position.Bottom;
|
|
525
|
-
return /* @__PURE__ */ jsxs("div", { className: `${Graph_default.node} ${typeClass} ${highlightClass} ${className}`, children: [
|
|
526
|
-
showTargetHandle && /* @__PURE__ */ jsx(Handle, { type: "target", position: targetPosition, style: { opacity: 0, pointerEvents: "none" } }),
|
|
527
|
-
showSourceHandle && /* @__PURE__ */ jsx(Handle, { type: "source", position: sourcePosition, style: { opacity: 0, pointerEvents: "none" } }),
|
|
528
|
-
/* @__PURE__ */ jsx(
|
|
529
|
-
Paper,
|
|
530
|
-
{
|
|
531
|
-
p: "sm",
|
|
532
|
-
className: `${Graph_default.nodeCard} ${selected ? Graph_default.nodeCardSelected : ""}`,
|
|
533
|
-
style: {
|
|
534
|
-
width,
|
|
535
|
-
border: `1px solid ${selected ? `var(--mantine-color-${color}-5)` : "var(--color-border)"}`,
|
|
536
|
-
backgroundColor: "var(--color-surface)",
|
|
537
|
-
cursor: "pointer",
|
|
538
|
-
boxShadow: selected ? `0 0 15px var(--mantine-color-${color}-5), 0 4px 12px rgba(0,0,0,0.1)` : "0 2px 8px rgba(0,0,0,0.08)"
|
|
539
|
-
},
|
|
540
|
-
children
|
|
541
|
-
}
|
|
542
|
-
)
|
|
543
|
-
] });
|
|
544
|
-
});
|
|
545
|
-
var BaseEdge = memo(function BaseEdge2({
|
|
546
|
-
id,
|
|
547
|
-
sourceX,
|
|
548
|
-
sourceY,
|
|
549
|
-
targetX,
|
|
550
|
-
targetY,
|
|
551
|
-
sourcePosition,
|
|
552
|
-
targetPosition,
|
|
553
|
-
color,
|
|
554
|
-
glowColor,
|
|
555
|
-
label,
|
|
556
|
-
selected,
|
|
557
|
-
animated = true,
|
|
558
|
-
dimmed = false,
|
|
559
|
-
edgeIndex = 0,
|
|
560
|
-
totalEdges = 1
|
|
561
|
-
}) {
|
|
562
|
-
const edgeSpacing = 10;
|
|
563
|
-
const baseOffset = 15;
|
|
564
|
-
const offsetAmount = totalEdges > 1 ? (edgeIndex - (totalEdges - 1) / 2) * edgeSpacing : 0;
|
|
565
|
-
const [edgePath, labelX, labelY] = getSmoothStepPath({
|
|
566
|
-
sourceX,
|
|
567
|
-
sourceY: sourceY + offsetAmount,
|
|
568
|
-
sourcePosition,
|
|
569
|
-
targetX,
|
|
570
|
-
targetY: targetY + offsetAmount,
|
|
571
|
-
targetPosition,
|
|
572
|
-
borderRadius: 8,
|
|
573
|
-
offset: baseOffset + Math.abs(offsetAmount)
|
|
574
|
-
// Stagger the turn points horizontally
|
|
575
|
-
});
|
|
576
|
-
const edgeOpacity = dimmed ? 0.25 : 1;
|
|
577
|
-
return /* @__PURE__ */ jsxs("g", { style: { opacity: edgeOpacity }, children: [
|
|
578
|
-
/* @__PURE__ */ jsx(
|
|
579
|
-
"path",
|
|
580
|
-
{
|
|
581
|
-
d: edgePath,
|
|
582
|
-
fill: "none",
|
|
583
|
-
stroke: color,
|
|
584
|
-
strokeWidth: selected ? 8 : 6,
|
|
585
|
-
strokeOpacity: 0.2,
|
|
586
|
-
style: { filter: "blur(4px)" }
|
|
587
|
-
}
|
|
588
|
-
),
|
|
589
|
-
animated && !dimmed && /* @__PURE__ */ jsx(
|
|
590
|
-
"path",
|
|
591
|
-
{
|
|
592
|
-
d: edgePath,
|
|
593
|
-
fill: "none",
|
|
594
|
-
stroke: color,
|
|
595
|
-
strokeWidth: selected ? 4 : 3,
|
|
596
|
-
strokeOpacity: 0.3,
|
|
597
|
-
strokeDasharray: "12 6",
|
|
598
|
-
className: Graph_default.edgeAnimated,
|
|
599
|
-
style: { filter: `drop-shadow(0 0 3px ${glowColor})` }
|
|
600
|
-
}
|
|
601
|
-
),
|
|
602
|
-
/* @__PURE__ */ jsx(
|
|
603
|
-
BaseEdge$1,
|
|
604
|
-
{
|
|
605
|
-
id,
|
|
606
|
-
path: edgePath,
|
|
607
|
-
style: {
|
|
608
|
-
stroke: color,
|
|
609
|
-
strokeWidth: selected ? 3 : 2,
|
|
610
|
-
filter: dimmed ? "none" : selected ? `drop-shadow(0 0 6px ${glowColor})` : `drop-shadow(0 0 2px ${glowColor})`
|
|
611
|
-
}
|
|
612
|
-
}
|
|
613
|
-
),
|
|
614
|
-
animated && !dimmed && /* @__PURE__ */ jsx(
|
|
615
|
-
"path",
|
|
616
|
-
{
|
|
617
|
-
d: edgePath,
|
|
618
|
-
fill: "none",
|
|
619
|
-
stroke: "white",
|
|
620
|
-
strokeWidth: 2,
|
|
621
|
-
strokeOpacity: 0.6,
|
|
622
|
-
strokeDasharray: "4 20",
|
|
623
|
-
className: Graph_default.edgeAnimated,
|
|
624
|
-
style: { filter: "drop-shadow(0 0 2px white)" }
|
|
625
|
-
}
|
|
626
|
-
),
|
|
627
|
-
label && /* @__PURE__ */ jsx(EdgeLabelRenderer, { children: /* @__PURE__ */ jsx(
|
|
628
|
-
"div",
|
|
629
|
-
{
|
|
630
|
-
className: `${Graph_default.edgeLabel} ${dimmed ? Graph_default.edgeLabelDimmed : ""}`,
|
|
631
|
-
style: {
|
|
632
|
-
position: "absolute",
|
|
633
|
-
transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
|
|
634
|
-
pointerEvents: "all",
|
|
635
|
-
fontSize: 10,
|
|
636
|
-
fontWeight: 600,
|
|
637
|
-
textTransform: "uppercase",
|
|
638
|
-
letterSpacing: "0.5px",
|
|
639
|
-
padding: "3px 8px",
|
|
640
|
-
borderRadius: 6,
|
|
641
|
-
background: `linear-gradient(135deg, ${color}, ${color}dd)`,
|
|
642
|
-
color: "var(--color-text)",
|
|
643
|
-
boxShadow: "0 2px 8px rgba(0,0,0,0.2)",
|
|
644
|
-
opacity: dimmed ? 0.25 : 1
|
|
645
|
-
},
|
|
646
|
-
children: label
|
|
647
|
-
}
|
|
648
|
-
) })
|
|
649
|
-
] });
|
|
650
|
-
});
|
|
651
|
-
function GlowingHandle({ type, position, color: _color, id }) {
|
|
652
|
-
return /* @__PURE__ */ jsx(
|
|
653
|
-
Handle,
|
|
654
|
-
{
|
|
655
|
-
type,
|
|
656
|
-
position,
|
|
657
|
-
id,
|
|
658
|
-
className: Graph_default.handle,
|
|
659
|
-
style: {
|
|
660
|
-
background: "transparent",
|
|
661
|
-
border: "none",
|
|
662
|
-
width: 1,
|
|
663
|
-
height: 1,
|
|
664
|
-
opacity: 0
|
|
665
|
-
}
|
|
666
|
-
}
|
|
667
|
-
);
|
|
668
|
-
}
|
|
669
|
-
|
|
670
|
-
// src/graph/utils/calculateGraphHeight.ts
|
|
671
|
-
function calculateGraphHeight({
|
|
672
|
-
itemCount,
|
|
673
|
-
minHeight = 300,
|
|
674
|
-
maxHeight = 500,
|
|
675
|
-
heightPerItem = 80
|
|
676
|
-
}) {
|
|
677
|
-
const calculated = minHeight + itemCount * heightPerItem;
|
|
678
|
-
return Math.min(calculated, maxHeight);
|
|
679
|
-
}
|
|
680
|
-
|
|
681
|
-
export { BaseEdge, BaseNode, GRAPH_CONSTANTS, GlowingHandle, GraphBackground, GraphContainer, GraphFitViewButton, GraphFitViewHandler, GraphLegend, Graph_default, calculateGraphHeight, getGraphBackgroundStyles, useConnectionHighlight, useDirectedChainHighlighting, useFitViewTrigger, useGraphBackgroundStyles, useGraphHighlighting, useGraphTheme, useNodeSelection };
|