Feat: Add suffix field to all operators #9869 (#10195)

### What problem does this PR solve?

Feat: Add suffix field to all operators #9869

### Type of change


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

web/src/pages/data-flow/constant.tsx

@@ -381,7 +381,24 @@ export const initialSplitterValues = {
   delimiters: [{ value: '\n' }],
 };
 
-export const initialHierarchicalMergerValues = { outputs: {} };
+export enum Hierarchy {
+  H1 = '1',
+  H2 = '2',
+  H3 = '3',
+  H4 = '4',
+  H5 = '5',
+}
+
+export const initialHierarchicalMergerValues = {
+  outputs: {},
+  hierarchy: Hierarchy.H3,
+  levels: [
+    { expressions: [{ expression: '^#[^#]' }] },
+    { expressions: [{ expression: '^##[^#]' }] },
+    { expressions: [{ expression: '^###[^#]' }] },
+    { expressions: [{ expression: '^####[^#]' }] },
+  ],
+};
 
 export const CategorizeAnchorPointPositions = [
   { top: 1, right: 34 },
@@ -463,8 +480,36 @@ export enum FileType {
   Image = 'image',
   Email = 'email',
   TextMarkdown = 'text&markdown',
-  Docx = 'docx',
+  Docx = 'word',
   PowerPoint = 'ppt',
   Video = 'video',
   Audio = 'audio',
 }
+
+export const FileTypeSuffixMap = {
+  [FileType.PDF]: ['pdf'],
+  [FileType.Spreadsheet]: ['xls', 'xlsx', 'csv'],
+  [FileType.Image]: ['jpg', 'jpeg', 'png', 'gif'],
+  [FileType.Email]: ['eml', 'msg'],
+  [FileType.TextMarkdown]: ['md', 'markdown', 'mdx', 'txt'],
+  [FileType.Docx]: ['doc', 'docx'],
+  [FileType.PowerPoint]: ['pptx'],
+  [FileType.Video]: [],
+  [FileType.Audio]: [
+    'da',
+    'wave',
+    'wav',
+    'mp3',
+    'aac',
+    'flac',
+    'ogg',
+    'aiff',
+    'au',
+    'midi',
+    'wma',
+    'realaudio',
+    'vqf',
+    'oggvorbis',
+    'ape',
+  ],
+};

web/src/pages/data-flow/form/hierarchical-merger-form/index.tsx

@@ -10,7 +10,7 @@ import { memo } from 'react';
 import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { z } from 'zod';
-import { initialHierarchicalMergerValues } from '../../constant';
+import { Hierarchy, initialHierarchicalMergerValues } from '../../constant';
 import { useFormValues } from '../../hooks/use-form-values';
 import { useWatchFormChange } from '../../hooks/use-watch-form-change';
 import { INextOperatorForm } from '../../interface';
@@ -20,14 +20,6 @@ import { Output } from '../components/output';
 
 const outputList = buildOutputList(initialHierarchicalMergerValues.outputs);
 
-enum Hierarchy {
-  H1 = '1',
-  H2 = '2',
-  H3 = '3',
-  H4 = '4',
-  H5 = '5',
-}
-
 const HierarchyOptions = [
   { label: 'H1', value: Hierarchy.H1 },
   { label: 'H2', value: Hierarchy.H2 },
@@ -37,7 +29,7 @@ const HierarchyOptions = [
 ];
 
 export const FormSchema = z.object({
-  hierarchy: z.number(),
+  hierarchy: z.string(),
   levels: z.array(
     z.object({
       expressions: z.array(

web/src/pages/data-flow/log-sheet/dataflow-timeline.tsx

@@ -1,3 +1,84 @@
+import {
+  Timeline,
+  TimelineContent,
+  TimelineDate,
+  TimelineHeader,
+  TimelineIndicator,
+  TimelineItem,
+  TimelineSeparator,
+  TimelineTitle,
+} from '@/components/originui/timeline';
+import { Aperture } from 'lucide-react';
+
+const items = [
+  {
+    id: 1,
+    date: '15 minutes ago',
+    title: 'Hannah Kandell',
+    action: 'opened a new issue',
+    description:
+      "I'm having trouble with the new component library. It's not rendering properly.",
+    image: '/avatar-40-01.jpg',
+  },
+  {
+    id: 2,
+    date: '10 minutes ago',
+    title: 'Chris Tompson',
+    action: 'commented on',
+    description:
+      "Hey Hannah, I'm having trouble with the new component library. It's not rendering properly.",
+    image: '/avatar-40-02.jpg',
+  },
+  {
+    id: 3,
+    date: '5 minutes ago',
+    title: 'Emma Davis',
+    action: 'assigned you to',
+    description:
+      'The new component library is not rendering properly. Can you take a look?',
+    image: '/avatar-40-03.jpg',
+  },
+  {
+    id: 4,
+    date: '2 minutes ago',
+    title: 'Alex Morgan',
+    action: 'closed the issue',
+    description: 'The issue has been fixed. Please review the changes.',
+    image: '/avatar-40-05.jpg',
+  },
+];
+
 export function DataflowTimeline() {
-  return <div>xx</div>;
+  return (
+    <Timeline>
+      {items.map((item) => (
+        <TimelineItem
+          key={item.id}
+          step={item.id}
+          className="group-data-[orientation=vertical]/timeline:ms-10 group-data-[orientation=vertical]/timeline:not-last:pb-8"
+        >
+          <TimelineHeader>
+            <TimelineSeparator className="group-data-[orientation=vertical]/timeline:-left-7 group-data-[orientation=vertical]/timeline:h-[calc(100%-1.5rem-0.25rem)] group-data-[orientation=vertical]/timeline:translate-y-7" />
+            <TimelineTitle className="">
+              {/* {item.title}
+              <span className="text-muted-foreground text-sm font-normal">
+                {item.action}
+              </span> */}
+              <TimelineContent className="text-foreground mt-2 rounded-lg border px-4 py-3">
+                {item.description}
+                <TimelineDate className="mt-1 mb-0">{item.date}</TimelineDate>
+              </TimelineContent>
+            </TimelineTitle>
+            <TimelineIndicator className="bg-primary/10 group-data-completed/timeline-item:bg-primary group-data-completed/timeline-item:text-primary-foreground flex size-6 items-center justify-center border-none group-data-[orientation=vertical]/timeline:-left-7">
+              <Aperture className="size-6 rounded-full" />
+            </TimelineIndicator>
+          </TimelineHeader>
+          {/* <TimelineContent className="text-foreground mt-2 rounded-lg border px-4 py-3">
+            {item.description}
+            <TimelineDate className="mt-1 mb-0">{item.date}</TimelineDate>
+          </TimelineContent> */}
+        </TimelineItem>
+      ))}
+    </Timeline>
+  );
 }

web/src/pages/data-flow/log-sheet/index.tsx

@@ -8,6 +8,7 @@ import { IModalProps } from '@/interfaces/common';
 import { cn } from '@/lib/utils';
 import { NotebookText } from 'lucide-react';
 import 'react18-json-view/src/style.css';
+import { DataflowTimeline } from './dataflow-timeline';
 
 type LogSheetProps = IModalProps<any>;
 
@@ -18,7 +19,7 @@ export function LogSheet({ hideModal }: LogSheetProps) {
         <SheetHeader>
           <SheetTitle className="flex items-center gap-1">
             <NotebookText className="size-4" />
-            Log
+            <DataflowTimeline></DataflowTimeline>
           </SheetTitle>
         </SheetHeader>
         <section className="max-h-[82vh] overflow-auto mt-6"></section>

web/src/pages/data-flow/utils.ts

@@ -22,6 +22,7 @@ import isObject from 'lodash/isObject';
 import {
   CategorizeAnchorPointPositions,
   FileType,
+  FileTypeSuffixMap,
   NoDebugOperatorsList,
   NodeHandleId,
   Operator,
@@ -102,8 +103,11 @@ function transformParserParams(params: ParserFormSchemaType) {
     Record<string, ParserFormSchemaType['setups'][0]>
   >((pre, cur) => {
     if (cur.fileFormat) {
-      let filteredSetup: Partial<ParserFormSchemaType['setups'][0]> = {
+      let filteredSetup: Partial<
+        ParserFormSchemaType['setups'][0] & { suffix: string[] }
+      > = {
         output_format: cur.output_format,
+        suffix: FileTypeSuffixMap[cur.fileFormat as FileType],
       };
 
       switch (cur.fileFormat) {