feat: display the debugging results of each operator in a pop-up window #918 (#1445)

### What problem does this PR solve?

feat: display the debugging results of each operator in a pop-up window
#918
### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/pages/flow/canvas/node/categorize-node.tsx

@@ -14,65 +14,67 @@ import OperatorIcon from '../../operator-icon';
 import CategorizeHandle from './categorize-handle';
 import NodeDropdown from './dropdown';
 import styles from './index.less';
+import NodePopover from './popover';
 
 export function CategorizeNode({ id, data, selected }: NodeProps<NodeData>) {
   const categoryData = get(data, 'form.category_description') ?? {};
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
   return (
-    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
-      style={{
-        backgroundColor: style.backgroundColor,
-        color: style.color,
-      }}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable
-        className={styles.handle}
-        id={'b'}
-      ></Handle>
-      <Handle
-        type="target"
-        position={Position.Bottom}
-        isConnectable
-        className={styles.handle}
-        id={'c'}
-      ></Handle>
-      {Object.keys(categoryData).map((x, idx) => {
-        console.info(categoryData, id, data);
-        return (
-          <CategorizeHandle
-            top={CategorizeAnchorPointPositions[idx].top}
-            right={CategorizeAnchorPointPositions[idx].right}
-            key={idx}
-            text={x}
-            idx={idx}
-          ></CategorizeHandle>
-        );
-      })}
-      <Flex vertical align="center" justify="center" gap={6}>
-        <OperatorIcon
-          name={data.label as Operator}
-          fontSize={24}
-        ></OperatorIcon>
-        <span className={styles.type}>{t(lowerFirst(data.label))}</span>
-        <NodeDropdown id={id}></NodeDropdown>
-      </Flex>
-      <section className={styles.bottomBox}>
-        <div className={styles.nodeName}>{data.name}</div>
+    <NodePopover nodeId={id}>
+      <section
+        className={classNames(styles.ragNode, {
+          [styles.selectedNode]: selected,
+        })}
+        style={{
+          backgroundColor: style.backgroundColor,
+          color: style.color,
+        }}
+      >
+        <Handle
+          type="target"
+          position={Position.Left}
+          isConnectable
+          className={styles.handle}
+          id={'a'}
+        ></Handle>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable
+          className={styles.handle}
+          id={'b'}
+        ></Handle>
+        <Handle
+          type="target"
+          position={Position.Bottom}
+          isConnectable
+          className={styles.handle}
+          id={'c'}
+        ></Handle>
+        {Object.keys(categoryData).map((x, idx) => {
+          return (
+            <CategorizeHandle
+              top={CategorizeAnchorPointPositions[idx].top}
+              right={CategorizeAnchorPointPositions[idx].right}
+              key={idx}
+              text={x}
+              idx={idx}
+            ></CategorizeHandle>
+          );
+        })}
+        <Flex vertical align="center" justify="center" gap={6}>
+          <OperatorIcon
+            name={data.label as Operator}
+            fontSize={24}
+          ></OperatorIcon>
+          <span className={styles.type}>{t(lowerFirst(data.label))}</span>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Flex>
+        <section className={styles.bottomBox}>
+          <div className={styles.nodeName}>{data.name}</div>
+        </section>
       </section>
-    </section>
+    </NodePopover>
   );
 }

web/src/pages/flow/canvas/node/index.tsx

@@ -9,6 +9,7 @@ import { NodeData } from '../../interface';
 import OperatorIcon from '../../operator-icon';
 import NodeDropdown from './dropdown';
 import styles from './index.less';
+import NodePopover from './popover';
 
 export function RagNode({
   id,
@@ -18,53 +19,54 @@ export function RagNode({
 }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
-  return (
-    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
-      style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
-    >
-      <Handle
-        id="c"
-        type="source"
-        position={Position.Left}
-        isConnectable={isConnectable}
-        className={styles.handle}
-      ></Handle>
-      <Handle type="source" position={Position.Top} id="d" isConnectable />
-      <Handle
-        type="source"
-        position={Position.Right}
-        isConnectable={isConnectable}
-        className={styles.handle}
-        id="b"
-      ></Handle>
-      <Handle type="source" position={Position.Bottom} id="a" isConnectable />
-      <Flex
-        vertical
-        align="center"
-        justify={'center'}
-        gap={data.label === Operator.RewriteQuestion ? 0 : 6}
-      >
-        <OperatorIcon
-          name={data.label as Operator}
-          fontSize={style['iconFontSize'] ?? 24}
-        ></OperatorIcon>
-        <span
-          className={styles.type}
-          style={{ fontSize: style.fontSize ?? 14 }}
-        >
-          {data.label === Operator.RewriteQuestion
-            ? t(lowerFirst('Rewrite'))
-            : t(lowerFirst(data.label))}
-        </span>
-        <NodeDropdown id={id}></NodeDropdown>
-      </Flex>
 
-      <section className={styles.bottomBox}>
-        <div className={styles.nodeName}>{data.name}</div>
+  return (
+    <NodePopover nodeId={id}>
+      <section
+        className={classNames(styles.ragNode, {
+          [styles.selectedNode]: selected,
+        })}
+        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+      >
+        <Handle
+          id="c"
+          type="source"
+          position={Position.Left}
+          isConnectable={isConnectable}
+          className={styles.handle}
+        ></Handle>
+        <Handle type="source" position={Position.Top} id="d" isConnectable />
+        <Handle
+          type="source"
+          position={Position.Right}
+          isConnectable={isConnectable}
+          className={styles.handle}
+          id="b"
+        ></Handle>
+        <Handle type="source" position={Position.Bottom} id="a" isConnectable />
+        <Flex
+          vertical
+          align="center"
+          justify={'center'}
+          gap={data.label === Operator.RewriteQuestion ? 0 : 6}
+        >
+          <OperatorIcon
+            name={data.label as Operator}
+            fontSize={style['iconFontSize'] ?? 24}
+          ></OperatorIcon>
+          <span
+            className={styles.type}
+            style={{ fontSize: style.fontSize ?? 14 }}
+          >
+            {t(lowerFirst(data.label))}
+          </span>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Flex>
+
+        <section className={styles.bottomBox}>
+          <div className={styles.nodeName}>{data.name}</div>
+        </section>
       </section>
-    </section>
+    </NodePopover>
   );
 }

web/src/pages/flow/canvas/node/popover.tsx

@@ -0,0 +1,47 @@
+import { useFetchFlow } from '@/hooks/flow-hooks';
+import { Popover } from 'antd';
+import get from 'lodash/get';
+import React, { useMemo } from 'react';
+import JsonView from 'react18-json-view';
+import 'react18-json-view/src/style.css';
+import { Operator } from '../../constant';
+import { useReplaceIdWithText } from '../../hooks';
+
+interface IProps extends React.PropsWithChildren {
+  nodeId: string;
+}
+
+const NodePopover = ({ children, nodeId }: IProps) => {
+  const { data } = useFetchFlow();
+  const component = useMemo(() => {
+    return get(data, ['dsl', 'components', nodeId], {});
+  }, [nodeId, data]);
+
+  const output = get(component, ['obj', 'params', 'output'], {});
+  const componentName = get(component, ['obj', 'component_name'], '');
+  const replacedOutput = useReplaceIdWithText(output);
+
+  const content =
+    componentName !== Operator.Answer ? (
+      <div
+        onClick={(e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        }}
+      >
+        <JsonView
+          src={replacedOutput}
+          displaySize={30}
+          style={{ maxWidth: 300, maxHeight: 500 }}
+        />
+      </div>
+    ) : undefined;
+
+  return (
+    <Popover content={content} placement="right" destroyTooltipOnHide>
+      {children}
+    </Popover>
+  );
+};
+
+export default NodePopover;

web/src/pages/flow/canvas/node/relevant-node.tsx

@@ -11,56 +11,59 @@ import NodeDropdown from './dropdown';
 
 import CategorizeHandle from './categorize-handle';
 import styles from './index.less';
+import NodePopover from './popover';
 
 export function RelevantNode({ id, data, selected }: NodeProps<NodeData>) {
   const style = operatorMap[data.label as Operator];
   const { t } = useTranslate('flow');
   return (
-    <section
-      className={classNames(styles.ragNode, {
-        [styles.selectedNode]: selected,
-      })}
-      style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
-    >
-      <Handle
-        type="target"
-        position={Position.Left}
-        isConnectable
-        className={styles.handle}
-        id={'a'}
-      ></Handle>
-      <Handle
-        type="target"
-        position={Position.Top}
-        isConnectable
-        className={styles.handle}
-        id={'b'}
-      ></Handle>
-      <Handle
-        type="target"
-        position={Position.Bottom}
-        isConnectable
-        className={styles.handle}
-        id={'c'}
-      ></Handle>
-      <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
-      <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
-      <Flex vertical align="center" justify="center">
-        <OperatorIcon
-          name={data.label as Operator}
-          fontSize={style.iconFontSize}
-        ></OperatorIcon>
-        <span
-          className={styles.type}
-          style={{ fontSize: style.fontSize ?? 14 }}
-        >
-          {t(lowerFirst(data.label))}
-        </span>
-        <NodeDropdown id={id}></NodeDropdown>
-      </Flex>
-      <section className={styles.bottomBox}>
-        <div className={styles.nodeName}>{data.name}</div>
+    <NodePopover nodeId={id}>
+      <section
+        className={classNames(styles.ragNode, {
+          [styles.selectedNode]: selected,
+        })}
+        style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
+      >
+        <Handle
+          type="target"
+          position={Position.Left}
+          isConnectable
+          className={styles.handle}
+          id={'a'}
+        ></Handle>
+        <Handle
+          type="target"
+          position={Position.Top}
+          isConnectable
+          className={styles.handle}
+          id={'b'}
+        ></Handle>
+        <Handle
+          type="target"
+          position={Position.Bottom}
+          isConnectable
+          className={styles.handle}
+          id={'c'}
+        ></Handle>
+        <CategorizeHandle top={20} right={6} text={'yes'}></CategorizeHandle>
+        <CategorizeHandle top={80} right={6} text={'no'}></CategorizeHandle>
+        <Flex vertical align="center" justify="center">
+          <OperatorIcon
+            name={data.label as Operator}
+            fontSize={style.iconFontSize}
+          ></OperatorIcon>
+          <span
+            className={styles.type}
+            style={{ fontSize: style.fontSize ?? 14 }}
+          >
+            {t(lowerFirst(data.label))}
+          </span>
+          <NodeDropdown id={id}></NodeDropdown>
+        </Flex>
+        <section className={styles.bottomBox}>
+          <div className={styles.nodeName}>{data.name}</div>
+        </section>
       </section>
-    </section>
+    </NodePopover>
   );
 }