dtoro/zui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: performance 1

Browse Source
This commit is contained in:
authentik Default Admin
2026-03-12 18:01:27 +01:00
parent 4bd2f1b458
commit 923bf4bff0
18 changed files with 404 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
frontend/src/components/graph/AnimatedEdge.tsx
View File

@@ -1,18 +1,17 @@
import React, { useContext, useMemo } from 'react'
import React, { useContext, useMemo, memo } from 'react'
import {
BaseEdge,
getBezierPath,
type EdgeProps,
} from '@xyflow/react'
import FlowContext from '@/lib/graph/flowContext'
import { ConnectionPathContext } from '@/lib/graph/flowContext'
import { getConnectionStatus, CONNECTION_STATUS_CLASS } from '@/lib/graph/connectionStatus'
import { getConnectionLabelForTarget } from '@/lib/graph/nodeRegistry'
const EDGE_STROKE_WIDTH = 2
const DOT_MARKER_R = 1.5
const EMPTY_PATH_NODE_IDS = new Set<string>()
export function AnimatedEdge({
function AnimatedEdgeInner({
id,
source,
sourceX,
@@ -25,9 +24,9 @@ export function AnimatedEdge({
label: labelProp,
interactionWidth,
target,
data,
}: EdgeProps) {
const ctx = useContext(FlowContext)
const nodes = ctx?.nodes ?? []
const ctx = useContext(ConnectionPathContext)
const pathNodeIds = ctx?.connectionPathNodeIds ?? EMPTY_PATH_NODE_IDS
const pausedSegmentNodeIds = ctx?.connectionPathPausedSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
const activeSegmentNodeIds = ctx?.connectionPathActiveSegmentNodeIds ?? EMPTY_PATH_NODE_IDS
@@ -35,12 +34,8 @@ export function AnimatedEdge({
() => new Set(ctx?.connectionPathErrorNodeIds ?? []),
[ctx?.connectionPathErrorNodeIds]
)
const targetNode = useMemo(() => nodes.find((n: any) => n.id === target), [nodes, target])
const derivedLabel = useMemo(
() => (targetNode?.type != null ? getConnectionLabelForTarget(targetNode.type) : undefined),
[targetNode?.type]
)
const label = labelProp ?? derivedLabel
const label = labelProp ?? (data as { connectionLabel?: string } | undefined)?.connectionLabel
const connectionStatus = useMemo(
() =>
@@ -146,3 +141,23 @@ export function AnimatedEdge({
</>
)
}
function edgePropsAreEqual(prev: EdgeProps, next: EdgeProps): boolean {
return (
prev.id === next.id &&
prev.source === next.source &&
prev.target === next.target &&
prev.sourceX === next.sourceX &&
prev.sourceY === next.sourceY &&
prev.targetX === next.targetX &&
prev.targetY === next.targetY &&
prev.sourcePosition === next.sourcePosition &&
prev.targetPosition === next.targetPosition &&
prev.style === next.style &&
prev.label === next.label &&
(prev.data as { connectionLabel?: string } | undefined)?.connectionLabel ===
(next.data as { connectionLabel?: string } | undefined)?.connectionLabel
)
}
export const AnimatedEdge = memo(AnimatedEdgeInner, edgePropsAreEqual)