feat: add FlowHeader and delete edge (#959)

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

### Type of change

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

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]);
+};