update(console): add panel query api, optimize in view load status (#…

…1838)

* update: new all runs logic to show full columns

* update: make all runs with at least one column of

* feat: support panel api query, summary ui optimize

* fix: lint error

* fix: in viewport render not work

console/packages/starwhale-core/src/datastore/hooks/useFetchDatastore.ts

@@ -44,7 +44,7 @@ export function useQueryDatasetList(
         filter?: any[]
         query?: QueryTableRequest
     },
-    rawResult = false
+    enabled = true
 ) {
     const { start, limit, query } = React.useMemo(() => {
         const { pageNum = 1, pageSize = 10 } = options || {}
@@ -56,13 +56,16 @@ export function useQueryDatasetList(
         }
     }, [options])
 
-    const columnInfo = useQueryDatastore({
-        tableName,
-        start: 0,
-        limit: 0,
-        rawResult,
-        ignoreNonExistingTable: true,
-    })
+    const columnInfo = useQueryDatastore(
+        {
+            tableName,
+            start: 0,
+            limit: 0,
+            rawResult: true,
+            ignoreNonExistingTable: true,
+        },
+        enabled
+    )
 
     const recordQuery = useMemo(() => {
         const column = new ColumnFilterModel(columnInfo.data?.columnTypes ?? [])
@@ -72,29 +75,30 @@ export function useQueryDatasetList(
             tableName,
             start,
             limit,
-            rawResult,
+            rawResult: true,
             ignoreNonExistingTable: true,
         }
         return filter ? { ...raw, filter } : raw
-    }, [options?.filter, columnInfo.data?.columnTypes, limit, rawResult, start, tableName, query])
+    }, [options?.filter, columnInfo.data?.columnTypes, limit, start, tableName, query])
 
     const recordInfo = useQueryDatastore(recordQuery, columnInfo.isSuccess)
 
     React.useEffect(() => {
-        if (tableName) {
+        if (tableName && enabled) {
             columnInfo.refetch()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [tableName, start, limit])
+    }, [tableName, enabled])
 
     React.useEffect(() => {
-        if (recordQuery.tableName) {
+        if (recordQuery.tableName && columnInfo.isSuccess) {
             recordInfo.refetch()
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [recordQuery.tableName])
 
     return {
+        recordQuery,
         columnInfo,
         recordInfo,
     }

console/packages/starwhale-core/src/store/store.ts

@@ -8,6 +8,12 @@ import WidgetFactory from '../widget/WidgetFactory'
 import { getTreePath } from '../utils/path'
 import { WidgetConfig, WidgetStoreState } from '../types'
 
+function arrayOverride(objValue: any, srcValue: any) {
+    if (_.isArray(objValue)) {
+        return srcValue
+    }
+}
+
 export function createCustomStore(initState: Partial<WidgetStoreState> = {}) {
     console.log('store init')
     const name = 'widgets'
@@ -34,8 +40,8 @@ export function createCustomStore(initState: Partial<WidgetStoreState> = {}) {
                     onConfigChange: (paths: any, config: any) =>
                         set(
                             produce((state) => {
-                                const rawConfig = _.get(get(), paths) ?? {}
-                                _.set(state, paths, _.merge({}, rawConfig, config))
+                                const rawConfig = _.merge({}, _.get(get(), paths))
+                                _.set(state, paths, _.mergeWith(rawConfig, config, arrayOverride))
                                 // console.log('onConfigChange', state, paths, rawConfig, config)
                             })
                         ),
@@ -61,7 +67,8 @@ export function createCustomStore(initState: Partial<WidgetStoreState> = {}) {
                                     if (!state.defaults[type]) state.defaults[type] = defaults
                                 }
 
-                                state.widgets[id] = _.merge({}, state.widgets?.[id], widgets)
+                                const rawConfig = _.merge({}, state.widgets?.[id])
+                                state.widgets[id] = _.mergeWith(rawConfig, widgets, arrayOverride)
                             })
                         ),
                     onWidgetDelete: (id: string) =>

console/packages/starwhale-core/src/widget/withWidgetDynamicProps.tsx

@@ -1,12 +1,13 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { Subscription } from 'rxjs'
-import useSelector, { getWidget } from '../store/hooks/useSelector'
+import { getWidget } from '../store/hooks/useSelector'
 import { useEditorContext } from '../context/EditorContextProvider'
 import { WidgetRendererType } from '../types'
-import { useQueryDatastore } from '../datastore/hooks/useFetchDatastore'
+import { useQueryDatasetList } from '../datastore/hooks/useFetchDatastore'
 import { useIsInViewport } from '../utils'
 import { exportTable } from '../datastore'
 import { PanelDownloadEvent, PanelReloadEvent } from '../events'
+import { BusyPlaceholder } from '@starwhale/ui/BusyLoaderWrapper'
 
 function getParentPath(paths: any[]) {
     const curr = paths.slice()
@@ -23,7 +24,10 @@ export default function withWidgetDynamicProps(WrappedWidgetRender: WidgetRender
         const { id, path } = props
         const { store, eventBus } = useEditorContext()
         const api = store()
-        const overrides = useSelector(getWidget(id)) ?? {}
+        const widgetIdSelector = React.useMemo(() => getWidget(id) ?? {}, [id])
+        const overrides = store(widgetIdSelector)
+        const [loaded, setLoaded] = useState(false)
+        const myRef = useRef<HTMLElement>()
 
         const handleLayoutOrderChange = useCallback(
             (newList) => {
@@ -50,27 +54,38 @@ export default function withWidgetDynamicProps(WrappedWidgetRender: WidgetRender
 
         // @FIXME show datastore be fetch at here
         // @FIXME refrech setting
-        const tableName = overrides?.fieldConfig?.data?.tableName
+        const tableName = React.useMemo(() => overrides?.fieldConfig?.data?.tableName, [overrides])
+        const tableConfig = React.useMemo(() => overrides?.optionConfig?.currentView ?? {}, [overrides])
+        const tableOptions = React.useMemo(() => {
+            const sorts = tableConfig.sortBy
+                ? [
+                      {
+                          columnName: tableConfig.sortBy,
+                          descending: tableConfig.sortDirection === 'DESC',
+                      },
+                  ]
+                : []
 
-        const query = React.useMemo(
-            () => ({
-                tableName,
-                start: 0,
-                limit: 1000,
-                rawResult: true,
-                ignoreNonExistingTable: true,
-            }),
-            [tableName]
-        )
+            sorts.push({
+                columnName: 'id',
+                descending: true,
+            })
 
-        const myRef = useRef<HTMLElement>()
+            return {
+                pageNum: 1,
+                pageSize: 1000,
+                query: {
+                    orderBy: sorts,
+                },
+                filter: tableConfig.queries,
+            }
+        }, [tableConfig])
         const inViewport = useIsInViewport(myRef as any)
-        const info = useQueryDatastore(query, false)
-        const [loaded, setLoaded] = useState(false)
+        const { columnInfo, recordInfo: info, recordQuery: query } = useQueryDatasetList(tableName, tableOptions, false)
 
         useEffect(() => {
             if (tableName && inViewport && !loaded) {
-                info.refetch()
+                columnInfo.refetch()
                 setLoaded(true)
             }
             // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -100,6 +115,17 @@ export default function withWidgetDynamicProps(WrappedWidgetRender: WidgetRender
             return () => subscription.unsubscribe()
         }, [eventBus, id, info, query])
 
+        if (tableName && !info.isSuccess)
+            return (
+                <div ref={myRef as any} style={{ width: '100%', height: '100%' }}>
+                    <BusyPlaceholder style={{ minHeight: 'auto' }} />
+                </div>
+            )
+
+        // if (!inViewport) return <div ref={myRef as any} style={{ width: '100%', height: '100%' }} />
+
+        // if (tableName) console.log(id, tableName, columnInfo.isSuccess, info.isSuccess)
+
         return (
             <div ref={myRef as any} style={{ width: '100%', height: '100%' }}>
                 <WrappedWidgetRender

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

@@ -44,7 +44,7 @@ const useStyles = createUseStyles({
         '& .table-columns-pinned': {
             borderRight: '1px solid rgb(207, 215, 230)',
         },
-        '& .table-headers-pinned > div:last-child': {
+        '& .table-headers-pinned > div:last-child .header-cell': {
             borderRight: '1px solid rgb(207, 215, 230)',
         },
     },
@@ -66,6 +66,7 @@ function GridTable({
     queryinline = false,
     onSave,
     onChange = () => {},
+    storeRef,
 }: ITableProps) {
     const wrapperRef = useRef<HTMLDivElement>(null)
     const api = useTableContext()
@@ -93,7 +94,11 @@ function GridTable({
         return unsub
     }, [api, onChange])
 
-    // console.log('store', store)
+    React.useEffect(() => {
+        if (!storeRef) return
+        // eslint-disable-next-line no-param-reassign
+        storeRef.current = store
+    }, [storeRef, store])
 
     return (
         <>

console/packages/starwhale-ui/src/GridTable/types.ts

@@ -22,6 +22,7 @@ export interface ITableProps {
     id?: string
     data: any[]
     columns: any[]
+    storeRef?: React.MutableRefObject<ITableState | undefined>
 }
 
 export interface IPaginationProps {

console/packages/starwhale-ui/src/Search/FilterRenderer.tsx

@@ -76,7 +76,7 @@ export default function FilterRenderer({
     const $fieldOptions = React.useMemo(() => {
         return $columns
             .filter((tmp) => {
-                return tmp.label.match(value)
+                return tmp.label?.match(value)
             })
             .map((tmp) => {
                 return {

console/packages/starwhale-ui/src/base/data-table/inner-table-element.tsx

@@ -98,18 +98,20 @@ const InnerTableElement = React.forwardRef<
                     })
                 )}
             >
-                <div
-                    className='table-columns-pinned'
-                    // @ts-ignore
-                    style={{
-                        ...props.style,
-                        width: pinnedWidth,
-                        position: 'relative',
-                        overflow: 'hidden',
-                    }}
-                >
-                    {viewState === RENDERING && $children}
-                </div>
+                {$children.length > 0 && (
+                    <div
+                        className='table-columns-pinned'
+                        // @ts-ignore
+                        style={{
+                            ...props.style,
+                            width: pinnedWidth,
+                            position: 'relative',
+                            overflow: 'hidden',
+                        }}
+                    >
+                        {viewState === RENDERING && $children}
+                    </div>
+                )}
             </div>
 
             <div

console/packages/starwhale-ui/src/base/data-table/stateful-data-table.tsx

@@ -17,6 +17,7 @@ import { useConfigQuery } from './config-query'
 import Button from '../../Button'
 import classNames from 'classnames'
 import { themedUseStyletron } from '../../theme/styletron'
+import useCurrentView from './view/useCurrentView'
 
 export function QueryInput(props: any) {
     const [css, theme] = useStyletron()
@@ -74,24 +75,8 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
 
     const { useStore } = props
     const store = useStore()
-
-    const { columns } = props
-    // used by when view = all runs, panel table without config to show all columns
-    const isFullyLoaded = store.isInit
-    const { pinnedIds = [], ids = [] }: ConfigT = store.currentView || {}
-
-    const $columns = useMemo(() => {
-        const columnsMap = _.keyBy(columns, (c) => c.key) as Record<string, ColumnT>
-        const columnIds = isFullyLoaded ? ids : Array.from(new Set([...pinnedIds, ...columns.map((c) => c.key)]))
-        return columnIds
-            .filter((id: any) => id in columnsMap)
-            .map((id: any) => {
-                return {
-                    ...columnsMap[id],
-                    pin: pinnedIds.includes(id) ? 'LEFT' : undefined,
-                }
-            }) as ColumnT[]
-    }, [columns, columnable, pinnedIds, ids, isFullyLoaded])
+    const { columns: $columns, currentView, isAllRuns } = useCurrentView(useStore, { columns: props.columns })
+    const { renderConfigQuery } = useConfigQuery(useStore, { columns: props.columns, queryable })
 
     const $filters = React.useMemo(() => {
         return (
@@ -149,8 +134,6 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
         return [sortIndex, sortDirection]
     }, [store, $columns])
 
-    const { renderConfigQuery } = useConfigQuery(useStore, { columns, queryable })
-
     return (
         <StatefulContainer
             // @ts-ignore
@@ -215,7 +198,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
 
                                 {viewable && changed && !$rowSelectedIds.size && (
                                     <div>
-                                        {store.currentView?.id !== 'all' && (
+                                        {!isAllRuns && (
                                             <>
                                                 <Button onClick={() => handleSave(store.currentView)}>Save</Button>
                                                 &nbsp;&nbsp;
@@ -242,7 +225,7 @@ export function StatefulDataTable(props: StatefulDataTablePropsT) {
                                 {columnable && !$rowSelectedIds.size && (
                                     <div className='table-config-column flex-row-center'>
                                         <ConfigManageColumns
-                                            view={store.currentView}
+                                            view={currentView}
                                             columns={props.columns}
                                             onApply={handleApply}
                                         />