optimize(console): grid with extensive columns resulting in prolonged…

… response times (#3114)

console/package.json

@@ -156,7 +156,8 @@
     "xterm-addon-fit": "^0.5.0",
     "xterm-addon-web-links": "^0.4.0",
     "yarn": "^1.22.19",
-    "zustand": "v4.3.8"
+    "zustand": "v4.3.8",
+    "zustand-computed": "^1.3.7"
   },
   "scripts": {
     "typecheck": "tsc --noEmit -p ./tsconfig.json",

console/packages/starwhale-core/src/datastore/hooks/useDatastoreQueryParams.tsx

@@ -65,8 +65,8 @@ export function getQuery({ options, tableName }: TableQueryParamsT) {
         start,
         limit,
         rawResult: true,
-        ignoreNonExistingTable: true,
         encodeWithType: true,
+        ignoreNonExistingTable: true,
     }
     if (revision) {
         raw.revision = revision

console/packages/starwhale-core/src/store/StoreUpdater/index.tsx

@@ -50,24 +50,16 @@ const StoreUpdater = ({
     initialState,
     onInit,
 }: StoreUpdaterProps) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    // const { reset } = useStore(selector, shallow)
     const store = useStoreApi()
 
-    // useEffect(() => {
-    //     return () => {
-    //         // reset()
-    //     }
-    // }, [reset])
-
     useDirectStoreUpdater('editable', editable, store.setState)
     useDirectStoreUpdater('panelGroup', panelGroup, store.setState)
     useDirectStoreUpdater('onStateChange', onStateChange, store.setState)
     // positive: for eval
     useDirectStoreUpdater('onEvalSectionDelete', onEvalSectionDelete, store.setState)
     useDirectStoreUpdater('onSave', onSave, store.setState)
     useDirectStoreUpdater('initialState', initialState, store.setState)
-    //
+    // init
     useDirectStoreUpdater('onInit', onInit, store.setState)
 
     return null

console/packages/starwhale-ui/src/GridDatastoreTable/components/Preview.tsx

@@ -319,10 +319,10 @@ function TabControl({
                 <div className={styles.annotation}>
                     <LabelMedium>Annotation Type</LabelMedium>
                     <div className={styles.annotationTypes}>
-                        {Array.from(annotationTypes).map((type: any) => {
+                        {Array.from(annotationTypes).map((type: any, index) => {
                             return (
                                 <Checkbox
-                                    key={type}
+                                    key={index}
                                     checked={!hiddenTypes.has(type)}
                                     onChange={(e) => {
                                         const { checked } = e.target

console/packages/starwhale-ui/src/GridDatastoreTable/hooks/useDatastoreColumns.tsx

@@ -55,7 +55,6 @@ export function useDatastoreColumns(
                 name,
             })
         })
-
         return arr.sort(sortColumn)
     }, [columnTypes])
 
@@ -104,6 +103,7 @@ export function useDatastoreColumns(
                         renderCell: RenderMixedCell as any,
                         mapDataToValue: (record: Record<string, RecordSchemaT>): RecordAttr => {
                             return RecordAttr.decode(record, name)
+                            // return record
                         },
                         // search bar
                         getFilters,

console/packages/starwhale-ui/src/GridTable/GridTable.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef } from 'react'
+import React, { useRef } from 'react'
 import { Skeleton } from 'baseui/skeleton'
 import { areEqual } from 'react-window'
 import { useStyletron } from 'baseui'
@@ -84,7 +84,6 @@ const selector = (state: IGridState) => ({
 function GridTable({
     isLoading,
     columns,
-    rows,
     rowActions,
     compareable = false,
     selectable = false,
@@ -108,13 +107,6 @@ function GridTable({
     const styles = useStyles({ theme })
     const { onRemove, onIncludedRowsChange, onRowHighlightChange, getId } = useStore(selector)
     const store = useStoreApi()
-    // @FIXME inline set move to  store updater ?
-    useDirectStoreUpdater(
-        'getColumns',
-        useCallback(() => columns, [columns]),
-        store.setState
-    )
-    useDirectStoreUpdater('rows', rows, store.setState)
     useDirectStoreUpdater('wrapperRef', wrapperRef, store.setState)
 
     const {

console/packages/starwhale-ui/src/GridTable/components/ConfigViews/ConfigViews.tsx

@@ -14,7 +14,6 @@ import { useStore, useStoreApi } from '../../hooks/useStore'
 import { themedUseStyletron } from '@starwhale/ui/theme/styletron'
 import Button from '../../../Button'
 import { shallow } from 'zustand/shallow'
-import useGrid from '../../hooks/useGrid'
 
 const ALLRUNS = 'all'
 
@@ -23,16 +22,16 @@ const selector = (s: ITableState) => ({
     views: s.views,
     viewEditing: s.viewEditing,
     viewModelShow: s.viewModelShow,
+    originalColumns: s.originalColumns,
 })
 
 function ConfigViews() {
     const store = useStoreApi()
-    const { currentView, views, viewModelShow, viewEditing } = useStore(selector, shallow)
+    const { currentView, views, viewModelShow, viewEditing, originalColumns } = useStore(selector, shallow)
     const { onShowViewModel, onCurrentViewIdChange, checkDuplicateViewName, onViewUpdate, setViews } = store.getState()
     const [t] = useTranslation()
     const [isManageViewOpen, setIsManageViewOpen] = React.useState(false)
     const [selectId, setSelectId] = React.useState(currentView?.id ?? '')
-    const { originalColumns } = useGrid()
 
     useEffect(() => {
         if (currentView) {

console/packages/starwhale-ui/src/GridTable/hooks/useGrid.ts

@@ -1,8 +1,6 @@
 import useGridQueryText from './useGridQueryText'
 import useGridSave from './useGridSave'
 import useGridSelection from './useGridSelection'
-import useGridSort from './useGridSort'
-import useGirdData from './useGridData'
 import useGridQuery from './useGridQuery'
 import { IGridState } from '../types'
 import { useStore } from './useStore'
@@ -13,14 +11,17 @@ import useGridCellPreview from './useGridCellPreview'
 
 const selector = (s: IGridState) => ({
     initStore: s.initStore,
+    originalColumns: s.originalColumns,
+    rows: s.compute?.rows ?? [],
+    sortIndex: s.compute?.sortIndex,
+    sortDirection: s.currentView.sortDirection,
+    columns: s.compute?.columns ?? [],
 })
 
 function useGrid() {
-    const { initStore } = useStore(selector, shallow)
-    const { rows, originalColumns } = useGirdData()
-    const { ids, isAllRuns, columns, currentView } = useGridCurrentView(originalColumns)
+    const { initStore, originalColumns, rows, columns, sortIndex, sortDirection } = useStore(selector, shallow)
+    const { ids, isAllRuns, currentView } = useGridCurrentView()
     const { onSave, onSaveAs, changed } = useGridSave()
-    const { sortIndex, sortDirection } = useGridSort()
     const { textQuery, setTextQuery } = useGridQueryText()
     const {
         selectedRowIds,

console/packages/starwhale-ui/src/GridTable/hooks/useGridConfigColumns.tsx

@@ -2,31 +2,30 @@ import React from 'react'
 import { useStore } from './useStore'
 import { shallow } from 'zustand/shallow'
 import { IGridState } from '../types'
-import useGirdData from './useGridData'
 import { ExtraPropsT, ConfigColumns, StatefulConfigColumns } from '../components/ConfigColumns'
 import useGridCurrentView from './useGridCurrentView'
 
 const selector = (state: IGridState) => ({
     onCurrentViewColumnsChange: state.onCurrentViewColumnsChange,
+    columns: state.columns,
 })
 
 function useGridConfigColumns() {
-    const { onCurrentViewColumnsChange } = useStore(selector, shallow)
-    const { originalColumns } = useGirdData()
-    const { currentView } = useGridCurrentView(originalColumns)
+    const { onCurrentViewColumnsChange, columns } = useStore(selector, shallow)
+    const { currentView } = useGridCurrentView()
 
     const renderStatefulConfigColumns = React.useCallback(
         (props?: ExtraPropsT) => {
             return (
                 <StatefulConfigColumns
                     {...props}
                     view={currentView}
-                    columns={originalColumns}
+                    columns={columns}
                     onColumnsChange={onCurrentViewColumnsChange}
                 />
             )
         },
-        [currentView, onCurrentViewColumnsChange, originalColumns]
+        [currentView, onCurrentViewColumnsChange, columns]
     )
 
     const renderConfigColumns = React.useCallback(
@@ -36,12 +35,12 @@ function useGridConfigColumns() {
                     {...props}
                     // @ts-ignore
                     view={currentView}
-                    columns={originalColumns}
+                    columns={columns}
                     onColumnsChange={onCurrentViewColumnsChange}
                 />
             )
         },
-        [currentView, onCurrentViewColumnsChange, originalColumns]
+        [currentView, onCurrentViewColumnsChange, columns]
     )
 
     return {

console/packages/starwhale-ui/src/GridTable/hooks/useGridCurrentView.tsx

@@ -1,16 +1,16 @@
-import _ from 'lodash'
 import React from 'react'
-import { ColumnT, ConfigT } from '../../base/data-table/types'
+import { ConfigT } from '../../base/data-table/types'
 import { useStore } from '@starwhale/ui/GridTable/hooks/useStore'
 import { ITableState } from '../store'
 
 const selector = (state: ITableState) => ({
     currentView: state.currentView,
     views: state.views,
+    columns: state.columns ?? [],
 })
 
-function useGridCurrentView(columns: ColumnT[]) {
-    const { currentView: view } = useStore(selector)
+function useGridCurrentView() {
+    const { currentView: view, columns } = useStore(selector)
 
     const columnIds = React.useMemo(() => {
         return columns.map((c) => c.key)
@@ -27,20 +27,6 @@ function useGridCurrentView(columns: ColumnT[]) {
         return ids
     }, [view, columnIds])
 
-    const $columns = React.useMemo(() => {
-        const { pinnedIds = [] }: ConfigT = view
-        const columnsMap = _.keyBy(columns, (c) => c.key) as Record<string, ColumnT>
-        return $ids
-            .filter((id: any) => id in columnsMap)
-            .map((id: any) => {
-                const _pin = columnsMap[id].pin ?? undefined
-                return {
-                    ...columnsMap[id],
-                    pin: pinnedIds.includes(id) ? 'LEFT' : _pin,
-                }
-            }) as ColumnT[]
-    }, [view, columns, $ids])
-
     const $view = React.useMemo(() => {
         return {
             ...view,
@@ -54,7 +40,6 @@ function useGridCurrentView(columns: ColumnT[]) {
 
     return {
         ids: $ids,
-        columns: $columns,
         currentView: $view,
         isAllRuns,
     }

console/packages/starwhale-ui/src/GridTable/hooks/useGridQuery.tsx

@@ -3,40 +3,35 @@ import { useStore } from './useStore'
 import { ConfigQuery, ConfigQueryInline, ExtraPropsT } from '../components/Query'
 import { shallow } from 'zustand/shallow'
 import { IGridState } from '../types'
-import useGirdData from './useGridData'
 import ConfigSimpleQuery from '../components/Query/ConfigSimpleQuery'
 import Button from '@starwhale/ui/Button'
 import useTranslation from '@/hooks/useTranslation'
-import { useTrace } from '@starwhale/core'
 
 const non: any = []
 const selector = (state: IGridState) => ({
     queries: state.currentView?.queries || non,
     onCurrentViewQueriesChange: state.onCurrentViewQueriesChange,
+    columns: state.columns,
 })
 
 function useGridQuery() {
-    const trace = useTrace('grid-table-user-grid-query')
-    const { queries, onCurrentViewQueriesChange: onChange } = useStore(selector, shallow)
-    const { originalColumns } = useGirdData()
+    const { queries, onCurrentViewQueriesChange: onChange, columns } = useStore(selector, shallow)
     const [isSimpleQuery, setIsSimpleQuery] = React.useState(true)
     const [t] = useTranslation()
 
     const hasFilter = React.useMemo(() => {
-        return originalColumns?.find((column) => column.filterable)
-    }, [originalColumns])
+        return columns?.find((column) => column.filterable)
+    }, [columns])
 
     const renderConfigQuery = React.useCallback(() => {
-        trace({ queries })
-
         return (
             <>
                 <div className='flex justify-between items-center gap-20px'>
                     <div className='flex flex-1'>
                         {isSimpleQuery ? (
-                            <ConfigSimpleQuery columns={originalColumns} value={queries} onChange={onChange} />
+                            <ConfigSimpleQuery columns={columns} value={queries} onChange={onChange} />
                         ) : (
-                            <ConfigQuery value={queries} onChange={onChange} columns={originalColumns} />
+                            <ConfigQuery value={queries} onChange={onChange} columns={columns} />
                         )}
                     </div>
                     {hasFilter && (
@@ -47,13 +42,13 @@ function useGridQuery() {
                 </div>
             </>
         )
-    }, [trace, originalColumns, queries, onChange, isSimpleQuery, hasFilter, t])
+    }, [columns, queries, onChange, isSimpleQuery, hasFilter, t])
 
     const renderConfigQueryInline = React.useCallback(
         (props: ExtraPropsT) => {
-            return <ConfigQueryInline {...props} value={queries} onChange={onChange} columns={originalColumns} />
+            return <ConfigQueryInline {...props} value={queries} onChange={onChange} columns={columns} />
         },
-        [originalColumns, queries, onChange]
+        [columns, queries, onChange]
     )
 
     return {

console/packages/starwhale-ui/src/GridTable/hooks/useGridSelection.ts

@@ -1,6 +1,5 @@
 import React from 'react'
 import { ITableState } from '../store'
-import useGridData from './useGridData'
 import { shallow } from 'zustand/shallow'
 import { useStore } from './useStore'
 
@@ -9,11 +8,11 @@ const selector = (state: ITableState) => ({
     onSelectMany: state.onSelectMany,
     onSelectNone: state.onSelectNone,
     onSelectOne: state.onSelectOne,
+    rows: state.compute?.rows,
 })
 
 function useGridSelection() {
-    const { rows } = useGridData()
-    const { rowSelectedIds, onSelectMany, onSelectNone, onSelectOne } = useStore(selector, shallow)
+    const { rows, rowSelectedIds, onSelectMany, onSelectNone, onSelectOne } = useStore(selector, shallow)
 
     const selectedRowIds = React.useMemo(() => {
         if (rowSelectedIds) {