variable inspect panel layout

web/app/components/workflow/operator/index.tsx

@@ -2,7 +2,8 @@ import { memo, useEffect, useMemo, useRef } from 'react'
 import { MiniMap } from 'reactflow'
 import UndoRedo from '../header/undo-redo'
 import ZoomInOut from './zoom-in-out'
-import Trigger from '../variable-inspect/trigger'
+import VariableTrigger from '../variable-inspect/trigger'
+import VariableInspectPanel from '../variable-inspect'
 import { useStore } from '../store'
 
 export type OperatorProps = {
@@ -50,7 +51,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
     >
       <div className='flex justify-between px-1 pb-2'>
         <UndoRedo handleUndo={handleUndo} handleRedo={handleRedo} />
-        <Trigger />
+        <VariableTrigger />
         <div className='relative'>
           <MiniMap
             pannable
@@ -66,6 +67,7 @@ const Operator = ({ handleUndo, handleRedo }: OperatorProps) => {
           <ZoomInOut />
         </div>
       </div>
+      <VariableInspectPanel />
     </div>
   )
 }

web/app/components/workflow/panel/index.tsx

@@ -80,7 +80,7 @@ const Panel: FC = () => {
     <div
       ref={rightPanelRef}
       tabIndex={-1}
-      className={cn('absolute bottom-2 right-0 top-14 z-10 flex outline-none')}
+      className={cn('absolute bottom-1 right-0 top-14 z-10 flex outline-none')}
       key={`${isRestoring}`}
     >
       {

web/app/components/workflow/store/workflow/layout-slice.ts

@@ -14,8 +14,10 @@ export type LayoutSliceShape = {
   setOtherPanelWidth: (width: number) => void
   bottomPanelWidth: number // min-width = 400px; default-width = auto || 480px;
   setBottomPanelWidth: (width: number) => void
-  bottomPanelHeight: number // min-height = 120px; max-height = 480px; default-height = 320px;
+  bottomPanelHeight: number
   setBottomPanelHeight: (height: number) => void
+  variableInspectPanelHeight: number // min-height = 120px; default-height = 320px;
+  setVariableInspectPanelHeight: (height: number) => void
 }
 
 export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
@@ -31,6 +33,8 @@ export const createLayoutSlice: StateCreator<LayoutSliceShape> = set => ({
   setOtherPanelWidth: width => set(() => ({ otherPanelWidth: width })),
   bottomPanelWidth: 480,
   setBottomPanelWidth: width => set(() => ({ bottomPanelWidth: width })),
-  bottomPanelHeight: 320,
+  bottomPanelHeight: 324,
   setBottomPanelHeight: height => set(() => ({ bottomPanelHeight: height })),
+  variableInspectPanelHeight: localStorage.getItem('workflow-variable-inpsect-panel-height') ? Number.parseFloat(localStorage.getItem('workflow-variable-inpsect-panel-height')!) : 320,
+  setVariableInspectPanelHeight: height => set(() => ({ variableInspectPanelHeight: height })),
 })

web/app/components/workflow/store/workflow/panel-slice.ts

@@ -15,6 +15,8 @@ export type PanelSliceShape = {
     left: number
   }
   setPanelMenu: (panelMenu: PanelSliceShape['panelMenu']) => void
+  showVariableInspectPanel: boolean
+  setShowVariableInspectPanel: (showVariableInspectPanel: boolean) => void
 }
 
 export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
@@ -29,4 +31,6 @@ export const createPanelSlice: StateCreator<PanelSliceShape> = set => ({
   setShowDebugAndPreviewPanel: showDebugAndPreviewPanel => set(() => ({ showDebugAndPreviewPanel })),
   panelMenu: undefined,
   setPanelMenu: panelMenu => set(() => ({ panelMenu })),
+  showVariableInspectPanel: true,
+  setShowVariableInspectPanel: showVariableInspectPanel => set(() => ({ showVariableInspectPanel })),
 })

web/app/components/workflow/variable-inspect/index.tsx

@@ -0,0 +1,60 @@
+import type { FC } from 'react'
+import {
+  useCallback,
+  useMemo,
+} from 'react'
+import { debounce } from 'lodash-es'
+import { useStore } from '../store'
+import { useResizePanel } from '../nodes/_base/hooks/use-resize-panel'
+import Panel from './panel'
+import cn from '@/utils/classnames'
+
+const VariableInspectPanel: FC = () => {
+  const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
+  const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight)
+  const variableInspectPanelHeight = useStore(s => s.variableInspectPanelHeight)
+  const setVariableInspectPanelHeight = useStore(s => s.setVariableInspectPanelHeight)
+
+  const maxHeight = useMemo(() => {
+      if (!workflowCanvasHeight)
+        return 480
+      return workflowCanvasHeight - 60
+    }, [workflowCanvasHeight])
+
+  const handleResize = useCallback((width: number) => {
+    setVariableInspectPanelHeight(width)
+    }, [setVariableInspectPanelHeight])
+
+  const {
+    triggerRef,
+    containerRef,
+  } = useResizePanel({
+    direction: 'vertical',
+    triggerDirection: 'top',
+    minHeight: 120,
+    maxHeight,
+    onResize: debounce(handleResize),
+  })
+
+  if (!showVariableInspectPanel)
+    return null
+
+  return (
+    <div className={cn('relative pb-1')}>
+      <div
+        ref={triggerRef}
+        className='absolute -top-1 left-0 flex h-1 w-full cursor-row-resize resize-y items-center justify-center'>
+        <div className='h-0.5 w-10 rounded-sm bg-state-base-handle hover:w-full hover:bg-state-accent-solid active:w-full active:bg-state-accent-solid'></div>
+      </div>
+      <div
+        ref={containerRef}
+        className={cn('overflow-hidden rounded-2xl border-[0.5px] border-components-panel-border bg-components-panel-bg shadow-xl')}
+        style={{ height: `${variableInspectPanelHeight}px` }}
+      >
+        <Panel />
+      </div>
+    </div>
+  )
+}
+
+export default VariableInspectPanel

web/app/components/workflow/variable-inspect/panel.tsx

@@ -0,0 +1,19 @@
+import type { FC } from 'react'
+
+// import {
+//   RiLoader2Line,
+//   RiStopCircleFill,
+// } from '@remixicon/react'
+import { useStore } from '../store'
+import cn from '@/utils/classnames'
+
+const Panel: FC = () => {
+  const workflowCanvasHeight = useStore(s => s.workflowCanvasHeight)
+
+  return (
+    <div className={cn('relative pb-1')}>
+    </div>
+  )
+}
+
+export default Panel

web/app/components/workflow/variable-inspect/trigger.tsx

@@ -1,22 +1,29 @@
 import type { FC } from 'react'
 import { RiLoader2Line, RiStopCircleFill } from '@remixicon/react'
 import Tooltip from '@/app/components/base/tooltip'
+import { useStore } from '../store'
 import cn from '@/utils/classnames'
 
 const VariableInspectTrigger: FC = () => {
+  const showVariableInspectPanel = useStore(s => s.showVariableInspectPanel)
+  const setShowVariableInspectPanel = useStore(s => s.setShowVariableInspectPanel)
+
+  if (showVariableInspectPanel)
+    return null
+
   return (
     <div className={cn('flex items-center gap-1')}>
       {/* view button */}
       <div
         className='system-2xs-semibold-uppercase flex h-5 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-tertiary shadow-lg backdrop-blur-sm hover:bg-background-default-hover'
-        // onClick={() => {}}
+        onClick={() => setShowVariableInspectPanel(true)}
       >
         Variable inspect
       </div>
       {/* caching button */}
       <div
         className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
-        // onClick={() => {}}
+        onClick={() => setShowVariableInspectPanel(true)}
       >
         <RiLoader2Line className='h-4 w-4' />
         <span className='text-text-accent'>Caching running status</span>
@@ -35,7 +42,7 @@ const VariableInspectTrigger: FC = () => {
       {/* finish button */}
       <div
         className='system-xs-medium flex h-6 cursor-pointer items-center gap-1 rounded-md border-[0.5px] border-effects-highlight bg-components-actionbar-bg px-2 text-text-accent shadow-lg backdrop-blur-sm hover:bg-components-actionbar-bg-accent'
-        // onClick={() => {}}
+        onClick={() => setShowVariableInspectPanel(true)}
       >
         View cached variables
       </div>