mirror of
https://github.com/infiniflow/ragflow.git
synced 2025-12-08 20:42:30 +08:00
a6039cf563
### What problem does this PR solve? Fix: Optimized the timeline component and parser editing features #9869 - Introduced the TimelineNodeType type, restructured the timeline node structure, and supported dynamic node generation - Enhanced the FormatPreserveEditor component to support editing and line wrapping of JSON-formatted content - Added a rerun function and loading state to the parser and splitter components - Adjusted the timeline style and interaction logic to enhance the user experience - Improved the modal component and added a destroy method to support more flexible control - Optimized the chunk result display and operation logic, supporting batch deletion and selection ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
134 lines
3.2 KiB
TypeScript
134 lines
3.2 KiB
TypeScript
import { CustomTimeline, TimelineNode } from '@/components/originui/timeline';
|
|
import {
|
|
Blocks,
|
|
File,
|
|
FilePlay,
|
|
FileStack,
|
|
Heading,
|
|
ListPlus,
|
|
} from 'lucide-react';
|
|
import { useMemo } from 'react';
|
|
import { TimelineNodeType } from '../../constant';
|
|
import { IPipelineFileLogDetail } from '../../interface';
|
|
|
|
export type ITimelineNodeObj = {
|
|
title: string;
|
|
icon: JSX.Element;
|
|
clickable?: boolean;
|
|
type: TimelineNodeType;
|
|
};
|
|
|
|
export const TimelineNodeObj = {
|
|
[TimelineNodeType.begin]: {
|
|
title: 'File',
|
|
icon: <File size={13} />,
|
|
clickable: false,
|
|
},
|
|
[TimelineNodeType.parser]: {
|
|
title: 'Parser',
|
|
icon: <FilePlay size={13} />,
|
|
},
|
|
[TimelineNodeType.contextGenerator]: {
|
|
title: 'Context Generator',
|
|
icon: <FileStack size={13} />,
|
|
},
|
|
[TimelineNodeType.titleSplitter]: {
|
|
title: 'Title Splitter',
|
|
icon: <Heading size={13} />,
|
|
},
|
|
[TimelineNodeType.characterSplitter]: {
|
|
title: 'Title Splitter',
|
|
icon: <Heading size={13} />,
|
|
},
|
|
[TimelineNodeType.splitter]: {
|
|
title: 'Character Splitter',
|
|
icon: <Blocks size={13} />,
|
|
},
|
|
[TimelineNodeType.tokenizer]: {
|
|
title: 'Tokenizer',
|
|
icon: <ListPlus size={13} />,
|
|
clickable: false,
|
|
},
|
|
};
|
|
// export const TimelineNodeArr = [
|
|
// {
|
|
// id: 1,
|
|
// title: 'File',
|
|
// icon: <PlayIcon size={13} />,
|
|
// clickable: false,
|
|
// type: TimelineNodeType.begin,
|
|
// },
|
|
// {
|
|
// id: 2,
|
|
// title: 'Context Generator',
|
|
// icon: <PlayIcon size={13} />,
|
|
// type: TimelineNodeType.contextGenerator,
|
|
// },
|
|
// {
|
|
// id: 3,
|
|
// title: 'Title Splitter',
|
|
// icon: <PlayIcon size={13} />,
|
|
// type: TimelineNodeType.titleSplitter,
|
|
// },
|
|
// {
|
|
// id: 4,
|
|
// title: 'Character Splitter',
|
|
// icon: <PlayIcon size={13} />,
|
|
// type: TimelineNodeType.characterSplitter,
|
|
// },
|
|
// {
|
|
// id: 5,
|
|
// title: 'Tokenizer',
|
|
// icon: <CheckLine size={13} />,
|
|
// clickable: false,
|
|
// type: TimelineNodeType.tokenizer,
|
|
// },
|
|
// ]
|
|
export interface TimelineDataFlowProps {
|
|
activeId: number | string;
|
|
activeFunc: (id: number | string, step: TimelineNode) => void;
|
|
data: IPipelineFileLogDetail;
|
|
timelineNodes: TimelineNode[];
|
|
}
|
|
const TimelineDataFlow = ({
|
|
activeFunc,
|
|
activeId,
|
|
data,
|
|
timelineNodes,
|
|
}: TimelineDataFlowProps) => {
|
|
// const [timelineNodeArr,setTimelineNodeArr] = useState<ITimelineNodeObj & {id: number | string}>()
|
|
|
|
const activeStep = useMemo(() => {
|
|
const index = timelineNodes.findIndex((node) => node.id === activeId);
|
|
return index > -1 ? index + 1 : 0;
|
|
}, [activeId, timelineNodes]);
|
|
const handleStepChange = (step: number, id: string | number) => {
|
|
activeFunc?.(
|
|
id,
|
|
timelineNodes.find((node) => node.id === activeStep) as TimelineNode,
|
|
);
|
|
};
|
|
|
|
return (
|
|
<div className="">
|
|
<div>
|
|
<CustomTimeline
|
|
nodes={timelineNodes as TimelineNode[]}
|
|
activeStep={activeStep}
|
|
onStepChange={handleStepChange}
|
|
orientation="horizontal"
|
|
lineStyle="solid"
|
|
nodeSize={24}
|
|
activeStyle={{
|
|
nodeSize: 30,
|
|
iconColor: 'var(--accent-primary)',
|
|
textColor: 'var(--accent-primary)',
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TimelineDataFlow;
|