Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jul 9, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 12 additions & 3 deletions web/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions web/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"react-pdf-highlighter": "^6.1.0",
"react-string-replace": "^1.1.1",
"react-syntax-highlighter": "^15.5.0",
"react18-json-view": "^0.2.8",
"reactflow": "^11.11.2",
"recharts": "^2.12.4",
"remark-gfm": "^4.0.0",
Expand Down
108 changes: 55 additions & 53 deletions web/src/pages/flow/canvas/node/categorize-node.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
);
}
88 changes: 45 additions & 43 deletions web/src/pages/flow/canvas/node/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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}
<NodePopover nodeId={id}>
<section
className={classNames(styles.ragNode, {
[styles.selectedNode]: selected,
})}
style={pick(style, ['backgroundColor', 'width', 'height', 'color'])}
>
<OperatorIcon
name={data.label as Operator}
fontSize={style['iconFontSize'] ?? 24}
></OperatorIcon>
<span
className={styles.type}
style={{ fontSize: style.fontSize ?? 14 }}
<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}
>
{data.label === Operator.RewriteQuestion
? t(lowerFirst('Rewrite'))
: t(lowerFirst(data.label))}
</span>
<NodeDropdown id={id}></NodeDropdown>
</Flex>
<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 className={styles.bottomBox}>
<div className={styles.nodeName}>{data.name}</div>
</section>
</section>
</section>
</NodePopover>
);
}
47 changes: 47 additions & 0 deletions web/src/pages/flow/canvas/node/popover.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Loading