From 8ee643e88deb4b4aeabf66c1fc57706d874624c4 Mon Sep 17 00:00:00 2001 From: zhsama Date: Thu, 15 Jan 2026 15:55:55 +0800 Subject: [PATCH] fix: fix variable inspect panel width in subgraphs --- .../components/sub-graph-children.tsx | 35 +++++++++++++++++-- .../sub-graph/components/sub-graph-main.tsx | 21 ++++++++++- web/app/components/sub-graph/index.tsx | 3 ++ web/app/components/workflow/index.tsx | 2 +- .../components/workflow/operator/index.tsx | 10 ++++-- 5 files changed, 64 insertions(+), 7 deletions(-) diff --git a/web/app/components/sub-graph/components/sub-graph-children.tsx b/web/app/components/sub-graph/components/sub-graph-children.tsx index b17472ff7d..749a571efb 100644 --- a/web/app/components/sub-graph/components/sub-graph-children.tsx +++ b/web/app/components/sub-graph/components/sub-graph-children.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react' import type { MentionConfig } from '@/app/components/workflow/nodes/_base/types' import type { NodeOutPutVar } from '@/app/components/workflow/types' -import { memo, useMemo } from 'react' +import { memo, useEffect, useMemo, useRef } from 'react' import { useStore as useReactFlowStore } from 'reactflow' import { useShallow } from 'zustand/react/shallow' import { useIsChatMode, useWorkflowVariables } from '@/app/components/workflow/hooks' @@ -26,6 +26,37 @@ const SubGraphChildren: FC = ({ const { getNodeAvailableVars } = useWorkflowVariables() const isChatMode = useIsChatMode() const nodePanelWidth = useStore(s => s.nodePanelWidth) + const setRightPanelWidth = useStore(s => s.setRightPanelWidth) + const panelRef = useRef(null) + + useEffect(() => { + const element = panelRef.current + if (!element) + return + + const updateWidth = (width: number) => { + if (width > 0) + setRightPanelWidth(width) + } + + const resizeObserver = new ResizeObserver((entries) => { + for (const entry of entries) { + if (entry.borderBoxSize?.length) + updateWidth(entry.borderBoxSize[0].inlineSize) + else if (entry.contentRect.width > 0) + updateWidth(entry.contentRect.width) + else + updateWidth(element.getBoundingClientRect().width) + } + }) + + resizeObserver.observe(element) + updateWidth(element.getBoundingClientRect().width) + + return () => { + resizeObserver.disconnect() + } + }, [setRightPanelWidth]) const selectedNode = useReactFlowStore(useShallow((s) => { return s.getNodes().find(node => node.data.selected) @@ -66,7 +97,7 @@ const SubGraphChildren: FC = ({ return (
-
+
{nodePanel || (
void onSave?: (nodes: Node[], edges: Edge[]) => void @@ -25,12 +30,23 @@ const SubGraphMain: FC = ({ viewport, agentName, extractorNodeId, + configsMap, mentionConfig, onMentionConfigChange, onSave, }) => { const reactFlowStore = useStoreApi() const availableNodesMetaData = useAvailableNodesMetaData() + const flowType = configsMap?.flowType ?? FlowType.appFlow + const flowId = configsMap?.flowId ?? '' + const { fetchInspectVars } = useSetWorkflowVarsWithValue({ + flowType, + flowId, + }) + const inspectVarsCrud = useInspectVarsCrudCommon({ + flowType, + flowId, + }) const handleSyncSubGraphDraft = useCallback(() => { const { getNodes, edges } = reactFlowStore.getState() @@ -40,11 +56,14 @@ const SubGraphMain: FC = ({ const hooksStore = useMemo(() => ({ interactionMode: 'subgraph', availableNodesMetaData, + configsMap, + fetchInspectVars, + ...inspectVarsCrud, doSyncWorkflowDraft: async () => { handleSyncSubGraphDraft() }, syncWorkflowDraftWhenPageClose: handleSyncSubGraphDraft, - }), [availableNodesMetaData, handleSyncSubGraphDraft]) + }), [availableNodesMetaData, configsMap, fetchInspectVars, handleSyncSubGraphDraft, inspectVarsCrud]) return ( = (props) => { const setParentAvailableVars = useStore(state => state.setParentAvailableVars) const setParentAvailableNodes = useStore(state => state.setParentAvailableNodes) + const configsMap = useHooksStore(state => state.configsMap) useEffect(() => { setParentAvailableVars?.(parentAvailableVars || []) @@ -187,6 +189,7 @@ const SubGraphContent: FC = (props) => { viewport={defaultViewport} agentName={agentName} extractorNodeId={`${toolNodeId}_ext_${paramKey}`} + configsMap={configsMap} mentionConfig={mentionConfig} onMentionConfigChange={onMentionConfigChange} onSave={onSave} diff --git a/web/app/components/workflow/index.tsx b/web/app/components/workflow/index.tsx index 1a2a42bcde..f0846f2996 100644 --- a/web/app/components/workflow/index.tsx +++ b/web/app/components/workflow/index.tsx @@ -419,7 +419,7 @@ export const Workflow: FC = memo(({ > {!isSubGraph && }
- {!isSubGraph && } + {!isSubGraph && } {!isSubGraph && } {!isSubGraph && } diff --git a/web/app/components/workflow/operator/index.tsx b/web/app/components/workflow/operator/index.tsx index 519eb1fdb7..a52d7fc409 100644 --- a/web/app/components/workflow/operator/index.tsx +++ b/web/app/components/workflow/operator/index.tsx @@ -2,6 +2,7 @@ import type { Node } from 'reactflow' import { memo, useCallback, useEffect, useMemo, useRef } from 'react' import { MiniMap } from 'reactflow' import UndoRedo from '../header/undo-redo' +import { useHooksStore } from '../hooks-store' import { useStore } from '../store' import VariableInspectPanel from '../variable-inspect' import VariableTrigger from '../variable-inspect/trigger' @@ -14,16 +15,19 @@ export type OperatorProps = { const Operator = ({ handleUndo, handleRedo }: OperatorProps) => { const bottomPanelRef = useRef(null) + const interactionMode = useHooksStore(s => s.interactionMode) const workflowCanvasWidth = useStore(s => s.workflowCanvasWidth) const rightPanelWidth = useStore(s => s.rightPanelWidth) + const nodePanelWidth = useStore(s => s.nodePanelWidth) const setBottomPanelWidth = useStore(s => s.setBottomPanelWidth) const setBottomPanelHeight = useStore(s => s.setBottomPanelHeight) const bottomPanelWidth = useMemo(() => { - if (!workflowCanvasWidth || !rightPanelWidth) + const panelWidth = rightPanelWidth || nodePanelWidth + if (!workflowCanvasWidth || !panelWidth) return 'auto' - return Math.max((workflowCanvasWidth - rightPanelWidth), 400) - }, [workflowCanvasWidth, rightPanelWidth]) + return Math.max((workflowCanvasWidth - panelWidth), 400) + }, [interactionMode, nodePanelWidth, rightPanelWidth, workflowCanvasWidth]) const getMiniMapNodeClassName = useCallback((node: Node) => { return node.data?.selected