optimize: dag/eva layout/table render

console/package.json

@@ -60,7 +60,7 @@
     "plyr-react": "^5.1.0",
     "pretty-bytes": "^5.6.0",
     "qs": "^6.10.1",
-    "rc-field-form": "^1.21.1",
+    "rc-field-form": "^1.27.1",
     "rc-image": "^5.2.5",
     "react": "^17.0.2",
     "react-code-blocks": "^0.0.9-0",

console/src/api/WithAuth.tsx

@@ -25,6 +25,7 @@ export default function WithAuth({
     children: React.ReactElement | any
 }) {
     let isPrivileged = false
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const { currentUser } = useCurrentUser()
     if (!currentUser) return <Empty />
     if (isWrongKey(id)) return <Empty str='wrong key' />

console/src/assets/fonts/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 3410006 */
-  src: url('iconfont.woff2?t=1663575449431') format('woff2'),
-       url('iconfont.woff?t=1663575449431') format('woff'),
-       url('iconfont.ttf?t=1663575449431') format('truetype');
+  src: url('iconfont.woff2?t=1664178541024') format('woff2'),
+       url('iconfont.woff?t=1664178541024') format('woff'),
+       url('iconfont.ttf?t=1664178541024') format('truetype');
 }
 
 .iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-setting2:before {
+  content: "\e64e";
+}
+
 .icon-token:before {
   content: "\e64d";
 }

console/src/components/DAG/DAG.tsx

@@ -126,10 +126,11 @@ export default function DAG({ nodes = [], edges = [] }: any) {
         <div
             className='flowContainer'
             style={{
-                width: '100%',
-                display: 'grid',
-                gridTemplateColumns: 'repeat(auto-fit, minmax(500px, 1fr))',
-                gridGap: '16px',
+                position: 'absolute',
+                top: 0,
+                bottom: 0,
+                left: 0,
+                right: 0,
             }}
         >
             <TransformWrapper wheel={{ disabled: true }} limitToBounds={false} maxScale={1.2} minScale={0.8}>
@@ -148,9 +149,9 @@ export default function DAG({ nodes = [], edges = [] }: any) {
                         </div>
                         <TransformComponent>
                             <Canvas
-                                // fit={true}
+                                fit
                                 ref={ref}
-                                maxHeight={300}
+                                maxHeight={1000}
                                 nodes={$nodes}
                                 edges={$edges}
                                 direction='RIGHT'
@@ -212,8 +213,8 @@ export default function DAG({ nodes = [], edges = [] }: any) {
                                                         </div>
                                                     </Link>
                                                     {/* <div className='flow-card'>
-                                                        <div className='flow-title'>{data?.type}</div>
-                                                    </div> */}
+                                                            <div className='flow-title'>{data?.type}</div>
+                                                        </div> */}
                                                 </foreignObject>
                                             )
                                         }}

console/src/components/Form/form.tsx

@@ -209,7 +209,7 @@ export function createForm<S extends {} = Store>({
                 return React.createElement(
                     FormControl,
                     {
-                        error: error?.toString(),
+                        error: error ? error.toString() : undefined,
                         label: renderLabel(),
                         caption,
                         children: childNode,

console/src/components/data-table/data-custom-table.tsx

@@ -511,10 +511,14 @@ function Headers({ width }: { width: number }) {
     const ctx = React.useContext(HeaderContext)
     const [resizeIndex, setResizeIndex] = React.useState(-1)
 
-    const $columns = ctx.columns.map((v, index) => ({
-        ...v,
-        index,
-    }))
+    const $columns = React.useMemo(
+        () =>
+            ctx.columns.map((v, index) => ({
+                ...v,
+                index,
+            })),
+        [ctx.columns]
+    )
 
     const store = ctx.useStore()
 
@@ -708,20 +712,15 @@ function LoadingOrEmptyMessage(props) {
         </div>
     )
 }
+const RENDERING = 0
+const LOADING = 1
+const EMPTY = 2
 // replaces the content of the virtualized window with contents. in this case,
 // we are prepending a table header row before the table rows (children to the fn).
 const InnerTableElement = React.forwardRef<{ children: React.ReactNode; style: Record<string, any> }, HTMLDivElement>(
     (props, ref) => {
         const ctx = React.useContext(HeaderContext)
 
-        // no need to render the cells until the columns have been measured
-        if (!ctx.widths.filter(Boolean).length) {
-            return null
-        }
-
-        const RENDERING = 0
-        const LOADING = 1
-        const EMPTY = 2
         let viewState = RENDERING
         if (ctx.loading) {
             viewState = LOADING
@@ -731,18 +730,29 @@ const InnerTableElement = React.forwardRef<{ children: React.ReactNode; style: R
 
         // const highlightedRow = ctx.rows[ctx.rowHighlightIndex]
 
-        // @ts-ignore
-        const $children = props.children.map((o) => {
-            return {
-                ...o,
-                props: {
-                    ...o.props,
-                    pinned: true,
-                },
-            }
-        })
+        const $children = React.useMemo(
+            () =>
+                // @ts-ignore
+                props.children.map((o) => {
+                    return {
+                        ...o,
+                        props: {
+                            ...o.props,
+                            pinned: true,
+                        },
+                    }
+                }),
+            [props.children]
+        )
+
+        const pinnedWidth = React.useMemo(
+            () => sum(ctx.columns.map((v, index) => (v.pin === 'LEFT' ? ctx.widths[index] : 0))),
+            [ctx.columns, ctx.widths]
+        )
 
-        const pinnedWidth = sum(ctx.columns.map((v, index) => (v.pin === 'LEFT' ? ctx.widths[index] : 0)))
+        if (!ctx.widths.filter(Boolean).length) {
+            return null
+        }
 
         return (
             <>
@@ -1189,7 +1199,6 @@ export function DataTable({
             <MeasureColumnWidths
                 columns={columns}
                 rows={rows}
-                widths={measuredWidths}
                 isSelectable={isSelectable}
                 onWidthsChange={handleWidthsChange}
             />

console/src/components/data-table/data-table.tsx

@@ -996,7 +996,6 @@ export function DataTable({
             <MeasureColumnWidths
                 columns={columns}
                 rows={rows}
-                widths={measuredWidths}
                 isSelectable={isSelectable}
                 onWidthsChange={handleWidthsChange}
             />

console/src/components/data-table/header-cell.tsx

@@ -54,21 +54,27 @@ const HeaderCell = React.forwardRef<HTMLDivElement, HeaderCellPropsT>((props, re
         }
     }
 
-    const COLUMN_OPTIONS = [
-        { label: props.isPin ? locale.datatable.columnUnPinColumn : locale.datatable.columnPinColumn, type: 'pin' },
-        { label: locale.datatable.columnSortAsc, type: 'sortAsc' },
-        { label: locale.datatable.columnSortDesc, type: 'sortDesc' },
-    ]
+    const COLUMN_OPTIONS = React.useMemo(
+        () => [
+            { label: props.isPin ? locale.datatable.columnUnPinColumn : locale.datatable.columnPinColumn, type: 'pin' },
+            { label: locale.datatable.columnSortAsc, type: 'sortAsc' },
+            { label: locale.datatable.columnSortDesc, type: 'sortDesc' },
+        ],
+        [props.isPin, locale]
+    )
 
-    const handleColumnOptionSelect = (option: any) => {
-        if (option.type === 'pin') {
-            props.onPin?.(props.index, !props.isPin)
-        } else if (option.type === 'sortAsc') {
-            props.onSort(props.index, SORT_DIRECTIONS.ASC)
-        } else if (option.type === 'sortDesc') {
-            props.onSort(props.index, SORT_DIRECTIONS.DESC)
-        }
-    }
+    const handleColumnOptionSelect = React.useCallback(
+        (option: any) => {
+            if (option.type === 'pin') {
+                props.onPin?.(props.index, !props.isPin)
+            } else if (option.type === 'sortAsc') {
+                props.onSort(props.index, SORT_DIRECTIONS.ASC)
+            } else if (option.type === 'sortDesc') {
+                props.onSort(props.index, SORT_DIRECTIONS.DESC)
+            }
+        },
+        [props.onPin, props.onSort, props.index, props.isPin]
+    )
 
     return (
         <div