feat: add FlowHeader and delete edge (infiniflow#959)

### What problem does this PR solve?
feat: add FlowHeader and delete edge infiniflow#918 

### Type of change

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

web/package.json

@@ -21,6 +21,7 @@
     "classnames": "^2.5.1",
     "dagre": "^0.8.5",
     "dayjs": "^1.11.10",
+    "elkjs": "^0.9.3",
     "eventsource-parser": "^1.1.2",
     "i18next": "^23.7.16",
     "i18next-browser-languagedetector": "^8.0.0",

web/src/locales/zh-traditional.ts

@@ -24,7 +24,7 @@ export default {
       copied: '複製成功',
       comingSoon: '即將推出',
       download: '下載',
-      close: '关闭',
+      close: '關閉',
       preview: '預覽',
     },
     login: {

web/src/pages/flow/canvas/context-menu/index.tsx

@@ -84,9 +84,6 @@ export const useHandleNodeContextMenu = (sideWidth: number) => {
       //     event.clientY >= pane.height - 200 ? pane.height - event.clientY : 0,
       // });
 
-      console.info('clientX:', event.clientX);
-      console.info('clientY:', event.clientY);
-
       setMenu({
         id: node.id,
         top: event.clientY - 72,

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

@@ -17,9 +17,13 @@ import 'reactflow/dist/style.css';
 import { NodeContextMenu, useHandleNodeContextMenu } from './context-menu';
 
 import FlowDrawer from '../flow-drawer';
-import { useHandleDrop, useShowDrawer } from '../hooks';
-import { initialEdges, initialNodes } from '../mock';
-import { getLayoutedElements } from '../utils';
+import {
+  useHandleDrop,
+  useHandleKeyUp,
+  useHandleSelectionChange,
+  useShowDrawer,
+} from '../hooks';
+import { dsl } from '../mock';
 import { TextUpdaterNode } from './node';
 
 const nodeTypes = { textUpdater: TextUpdaterNode };
@@ -29,13 +33,11 @@ interface IProps {
 }
 
 function FlowCanvas({ sideWidth }: IProps) {
-  const { nodes: layoutedNodes, edges: layoutedEdges } = getLayoutedElements(
-    initialNodes,
-    initialEdges,
-    'LR',
-  );
-  const [nodes, setNodes] = useState<Node[]>(layoutedNodes);
-  const [edges, setEdges] = useState<Edge[]>(layoutedEdges);
+  const [nodes, setNodes] = useState<Node[]>(dsl.graph.nodes);
+  const [edges, setEdges] = useState<Edge[]>(dsl.graph.edges);
+
+  const { selectedEdges, selectedNodes } = useHandleSelectionChange();
+
   const { ref, menu, onNodeContextMenu, onPaneClick } =
     useHandleNodeContextMenu(sideWidth);
   const { drawerVisible, hideDrawer, showDrawer } = useShowDrawer();
@@ -60,6 +62,8 @@ function FlowCanvas({ sideWidth }: IProps) {
 
   const { onDrop, onDragOver, setReactFlowInstance } = useHandleDrop(setNodes);
 
+  const { handleKeyUp } = useHandleKeyUp(selectedEdges, selectedNodes);
+
   useEffect(() => {
     console.info('nodes:', nodes);
     console.info('edges:', edges);
@@ -82,6 +86,7 @@ function FlowCanvas({ sideWidth }: IProps) {
         onDragOver={onDragOver}
         onNodeClick={onNodeClick}
         onInit={setReactFlowInstance}
+        onKeyUp={handleKeyUp}
       >
         <Background />
         <Controls />

web/src/pages/flow/elk-hooks.ts

@@ -0,0 +1,35 @@
+import { useCallback, useLayoutEffect } from 'react';
+import { getLayoutedElements } from './elk-utils';
+
+export const elkOptions = {
+  'elk.algorithm': 'layered',
+  'elk.layered.spacing.nodeNodeBetweenLayers': '100',
+  'elk.spacing.nodeNode': '80',
+};
+
+export const useLayoutGraph = (
+  initialNodes,
+  initialEdges,
+  setNodes,
+  setEdges,
+) => {
+  const onLayout = useCallback(({ direction, useInitialNodes = false }) => {
+    const opts = { 'elk.direction': direction, ...elkOptions };
+    const ns = initialNodes;
+    const es = initialEdges;
+
+    getLayoutedElements(ns, es, opts).then(
+      ({ nodes: layoutedNodes, edges: layoutedEdges }) => {
+        setNodes(layoutedNodes);
+        setEdges(layoutedEdges);
+
+        // window.requestAnimationFrame(() => fitView());
+      },
+    );
+  }, []);
+
+  // Calculate the initial layout on mount.
+  useLayoutEffect(() => {
+    onLayout({ direction: 'RIGHT', useInitialNodes: true });
+  }, [onLayout]);
+};

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

@@ -0,0 +1,42 @@
+import ELK from 'elkjs/lib/elk.bundled.js';
+import { Edge, Node } from 'reactflow';
+
+const elk = new ELK();
+
+export const getLayoutedElements = (
+  nodes: Node[],
+  edges: Edge[],
+  options = {},
+) => {
+  const isHorizontal = options?.['elk.direction'] === 'RIGHT';
+  const graph = {
+    id: 'root',
+    layoutOptions: options,
+    children: nodes.map((node) => ({
+      ...node,
+      // Adjust the target and source handle positions based on the layout
+      // direction.
+      targetPosition: isHorizontal ? 'left' : 'top',
+      sourcePosition: isHorizontal ? 'right' : 'bottom',
+
+      // Hardcode a width and height for elk to use when layouting.
+      width: 150,
+      height: 50,
+    })),
+    edges: edges,
+  };
+
+  return elk
+    .layout(graph)
+    .then((layoutedGraph) => ({
+      nodes: layoutedGraph.children.map((node) => ({
+        ...node,
+        // React Flow expects a position property on the node instead of `x`
+        // and `y` fields.
+        position: { x: node.x, y: node.y },
+      })),
+
+      edges: layoutedGraph.edges,
+    }))
+    .catch(console.error);
+};

web/src/pages/flow/header/index.less

@@ -0,0 +1,3 @@
+.flowHeader {
+  padding: 20px;
+}

web/src/pages/flow/header/index.tsx

@@ -0,0 +1,26 @@
+import { Button, Flex } from 'antd';
+
+import { useSaveGraph } from '../hooks';
+import styles from './index.less';
+
+const FlowHeader = () => {
+  const { saveGraph } = useSaveGraph();
+
+  return (
+    <Flex
+      align="center"
+      justify="end"
+      gap={'large'}
+      className={styles.flowHeader}
+    >
+      <Button>
+        <b>Debug</b>
+      </Button>
+      <Button type="primary" onClick={saveGraph}>
+        <b>Save</b>
+      </Button>
+    </Flex>
+  );
+};
+
+export default FlowHeader;

web/src/pages/flow/hooks.ts

@@ -1,6 +1,18 @@
 import { useSetModalState } from '@/hooks/commonHooks';
-import React, { Dispatch, SetStateAction, useCallback, useState } from 'react';
-import { Node, Position, ReactFlowInstance } from 'reactflow';
+import React, {
+  Dispatch,
+  KeyboardEventHandler,
+  SetStateAction,
+  useCallback,
+  useState,
+} from 'react';
+import {
+  Node,
+  Position,
+  ReactFlowInstance,
+  useOnSelectionChange,
+  useReactFlow,
+} from 'reactflow';
 import { v4 as uuidv4 } from 'uuid';
 
 export const useHandleDrag = () => {
@@ -75,3 +87,52 @@ export const useShowDrawer = () => {
     showDrawer,
   };
 };
+
+export const useHandleSelectionChange = () => {
+  const [selectedNodes, setSelectedNodes] = useState<string[]>([]);
+  const [selectedEdges, setSelectedEdges] = useState<string[]>([]);
+
+  useOnSelectionChange({
+    onChange: ({ nodes, edges }) => {
+      setSelectedNodes(nodes.map((node) => node.id));
+      setSelectedEdges(edges.map((edge) => edge.id));
+    },
+  });
+
+  return { selectedEdges, selectedNodes };
+};
+
+export const useDeleteEdge = (selectedEdges: string[]) => {
+  const { setEdges } = useReactFlow();
+
+  const deleteEdge = useCallback(() => {
+    setEdges((edges) =>
+      edges.filter((edge) => selectedEdges.every((x) => x !== edge.id)),
+    );
+  }, [setEdges, selectedEdges]);
+
+  return deleteEdge;
+};
+
+export const useHandleKeyUp = (
+  selectedEdges: string[],
+  selectedNodes: string[],
+) => {
+  const deleteEdge = useDeleteEdge(selectedEdges);
+  const handleKeyUp: KeyboardEventHandler = useCallback(
+    (e) => {
+      if (e.code === 'Delete') {
+        deleteEdge();
+      }
+    },
+    [deleteEdge],
+  );
+
+  return { handleKeyUp };
+};
+
+export const useSaveGraph = () => {
+  const saveGraph = useCallback(() => {}, []);
+
+  return { saveGraph };
+};

web/src/pages/flow/index.tsx

@@ -3,6 +3,7 @@ import { useState } from 'react';
 import { ReactFlowProvider } from 'reactflow';
 import FlowCanvas from './canvas';
 import Sider from './flow-sider';
+import FlowHeader from './header';
 
 const { Content } = Layout;
 
@@ -14,6 +15,7 @@ function RagFlow() {
       <ReactFlowProvider>
         <Sider setCollapsed={setCollapsed} collapsed={collapsed}></Sider>
         <Layout>
+          <FlowHeader></FlowHeader>
           <Content style={{ margin: '0 16px' }}>
             <FlowCanvas sideWidth={collapsed ? 0 : 200}></FlowCanvas>
           </Content>