feat(console): grid table search with IN by multi status, fix view switch problems

console/packages/starwhale-core/src/datastore/constants.ts

@@ -23,7 +23,7 @@ export enum OPERATOR {
     LESS = 'LESS',
     LESS_EQUAL = 'LESS_EQUAL',
     NOT = 'NOT',
-    // IN = 'IN',
+    IN = 'IN',
     // NOT_IN = 'NOT_IN',
     // CONTAINS = 'CONTAINS',
     // NOT_CONTAINS = 'NOT_CONTAINS',

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

@@ -2,6 +2,7 @@ import { IListQuerySchema } from '../../server/schemas/list'
 import { QueryTableRequest, ScanTableRequest, TableQueryFilterDesc, TableQueryOperandDesc } from '../schemas/datastore'
 import { OPERATOR, DataTypes } from '../constants'
 import { DatastorePageT } from '../types'
+import _ from 'lodash'
 
 export type TableQueryParamsT = {
     tableName?: string
@@ -15,8 +16,14 @@ export type TableQueryParamsT = {
 
 export type TableScanParamsT = ScanTableRequest
 
-function getFilter(columnName: string, value: string, operator: OPERATOR, type: DataTypes): TableQueryOperandDesc {
-    let queryType
+function getFilter(
+    columnName: string,
+    value: string,
+    operator: OPERATOR,
+    type: DataTypes
+): TableQueryOperandDesc | undefined {
+    let queryType = ''
+
     switch (type) {
         case DataTypes.FLOAT16:
         case DataTypes.FLOAT32:
@@ -40,11 +47,47 @@ function getFilter(columnName: string, value: string, operator: OPERATOR, type:
             break
     }
     const operands = [{ columnName }]
-    operands.push({ [queryType]: value } as any)
+
+    // operator that only render by frontend, like IN
+    if (operator === OPERATOR.IN) {
+        // eslint-disable-next-line no-param-reassign
+        operator = OPERATOR.EQUAL
+        // @ts-ignore
+        // eslint-disable-next-line no-param-reassign
+        value = Array.isArray(value) ? value : (value as string).split(',')
+    }
+
+    // single value
+    if (!Array.isArray(value)) {
+        operands.push({ [queryType]: value } as any)
+        return {
+            filter: {
+                operator: operator as string,
+                operands,
+            },
+        }
+    }
+    if (value.length === 0) return undefined
+    // multiple value but only one, use single value
+    if (value.length === 1) {
+        operands.push({ [queryType]: value[0] } as any)
+        return {
+            filter: {
+                operator: operator as string,
+                operands,
+            },
+        }
+    }
+    // multiple value
     return {
         filter: {
-            operator: operator as string,
-            operands,
+            operator: 'OR',
+            operands: value.map((v) => ({
+                filter: {
+                    operands: [{ columnName }, { [queryType]: v } as any],
+                    operator: operator as string,
+                },
+            })),
         },
     }
 }
@@ -67,7 +110,7 @@ function FilterToQuery(
             }
             return item
         })
-        .filter((item: any) => item.value && item.op && item.property)
+        .filter((item: any) => !_.isEmpty(item.value) && item.op && item.property)
         .map((item: any) => {
             return getFilter(item?.property, item.value, item.op, item?.type as DataTypes)
         })
@@ -80,7 +123,7 @@ function FilterToQuery(
 
     return {
         operator: 'AND',
-        operands: filters,
+        operands: filters as any,
     }
 }
 

console/packages/starwhale-core/src/editor/index.tsx

@@ -2,55 +2,15 @@
 import React, { useEffect, useMemo } from 'react'
 import log from 'loglevel'
 import EditorContextProvider from '../context/EditorContextProvider'
-import { registerWidgets } from '../widget/WidgetFactoryRegister'
 import WidgetFactory from '../widget/WidgetFactory'
 import { createCustomStore } from '../store/store'
 import WidgetRenderTree from '../widget/WidgetRenderTree'
 import { EventBusSrv } from '../events/events'
 import { WidgetTreeNode } from '../types'
 
-// export const registerRemoteWidgets = async () => {
-//     // @FIXME store module meta from backend
-//     // meta was defined by system not user
-//     const start = performance.now()
-
-//     // must be remote component that packaged
-//     const modules = [
-//         { type: 'ui:dndList', url: '../widgets/DNDListWidget/index.tsx' },
-//         { type: 'ui:section', url: '../widgets/SectionWidget/index.tsx' },
-//         { type: 'ui:panel:table', url: '../widgets/PanelTableWidget/index.tsx' },
-//         { type: 'ui:panel:rocauc', url: '../widgets/PanelRocAucWidget/index.tsx' },
-//         { type: 'ui:panel:heatmap', url: '../widgets/PanelHeatmapWidget/index.tsx' },
-//     ].filter((v) => !(v.type in WidgetFactory.widgetTypes))
-
-//     /* @vite-ignore */
-//     for await (const module of modules.map(async (m) => import(m.url))) {
-//         const widget = module.default as WidgetPlugin
-//         registerWidget(widget, widget.defaults)
-//     }
-
-//     console.log('Widget registration took: ', performance.now() - start, 'ms')
-// }
-// log.enableAll()
-
 export function withEditorRegister(EditorApp: React.FC) {
-    registerWidgets()
-
     return function EditorLoader(props: any) {
-        // const [registred, setRegistred] = React.useState(false)
-        useEffect(() => {
-            /*
-            import('http://127.0.0.1:8080/widget.js').then((module) => {
-                // setRegistred(true)
-                console.log(module)
-            })
-            */
-        }, [])
-        // if (!registred) {
-        //     return <BusyPlaceholder type='spinner' />
-        // }
         log.debug('WidgetFactory', WidgetFactory.widgetMap)
-
         return <EditorApp {...props} />
     }
 }

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

@@ -20,6 +20,14 @@ class WidgetPlugin<
         this.renderer = renderer
         this.defaults = config
     }
+
+    getType() {
+        return this.defaults?.type
+    }
+
+    getConfig() {
+        return this.defaults
+    }
 }
 
 export default WidgetPlugin

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

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 import _ from 'lodash'
 import { ErrorBoundary } from '@starwhale/ui'
-import { useWidget } from './WidgetFactoryRegister'
+import { useWidget } from './hooks/useWidget'
 import { WidgetRendererProps } from '../types'
 
 const DEBUG = false

console/packages/starwhale-core/src/widget/WidgetFactoryRegister.tsx → console/packages/starwhale-core/src/widget/hooks/useWidget.tsx

@@ -4,14 +4,21 @@ import SectionWidget from '@starwhale/widgets/SectionWidget'
 import PanelTableWidget from '@starwhale/widgets/PanelTableWidget'
 import PanelRocAucWidget from '@starwhale/widgets/PanelRocAucWidget'
 import PanelHeatmapWidget from '@starwhale/widgets/PanelConfusionMatrixWidget'
-import { WidgetConfig } from '../types'
-import WidgetFactory from './WidgetFactory'
-import WidgetPlugin from './WidgetPlugin'
+import WidgetFactory from '../WidgetFactory'
+import WidgetPlugin from '../WidgetPlugin'
+
+const modules = [DNDListWidget, SectionWidget, PanelTableWidget, PanelRocAucWidget, PanelHeatmapWidget]
 
 export function useWidget(widgetType: string) {
     const [widget, setWidget] = useState<WidgetPlugin | undefined>(WidgetFactory.widgetMap.get(widgetType))
 
     useEffect(() => {
+        if (!WidgetFactory.widgetMap.has(widgetType)) {
+            modules.forEach((w: WidgetPlugin<any>) => {
+                if (w.getType() === widgetType) WidgetFactory.register(w.getType(), w)
+            })
+        }
+
         const temp = WidgetFactory.widgetMap.get(widgetType)
 
         if (temp && temp !== widget) {
@@ -31,24 +38,3 @@ export function useWidget(widgetType: string) {
         setWidget,
     }
 }
-
-export const registerWidget = (Widget: any, config: WidgetConfig) => {
-    if (!config?.type) {
-        // eslint-disable-next-line no-console
-        console.log('Widget registration missing type', config)
-        return
-    }
-
-    WidgetFactory.register(config.type, Widget)
-}
-
-const modules = [DNDListWidget, SectionWidget, PanelTableWidget, PanelRocAucWidget, PanelHeatmapWidget]
-export const registerWidgets = () => {
-    const start = performance.now()
-    modules.forEach((widget) => {
-        if (widget.defaults.type in WidgetFactory.widgetTypes) return
-        registerWidget(widget, widget.defaults)
-    })
-    // eslint-disable-next-line no-console
-    console.log('Widget registration took: ', performance.now() - start, 'ms')
-}

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

@@ -1,5 +1,5 @@
 export { default as BaseWidget } from './BaseWidget'
-export * from './WidgetFactoryRegister'
+export * from './hooks/useWidget'
 
 export { default as WidgetFactory } from './WidgetFactory'
 export * from './WidgetFactory'

console/packages/starwhale-ui/src/DynamicSelector/Selector.tsx

@@ -34,6 +34,8 @@ export function SelectorItemByTree({ value, onChange, search, inputRef, info, $m
     )
 }
 
+const empty: any = []
+
 export function DynamicSelector<T = any>({
     onChange,
     startEnhancer,
@@ -57,6 +59,9 @@ export function DynamicSelector<T = any>({
         if (rest.value && rest.value !== values) {
             setValues(rest.value)
         }
+        if (!rest.value) {
+            setValues(empty)
+        }
     }, [rest.value, values])
 
     useClickAway(ref, (e) => {
@@ -196,83 +201,3 @@ export function DynamicSelector<T = any>({
 }
 
 export default DynamicSelector
-
-// const treeData = [
-//     {
-//         id: '1',
-//         label: 'Fruit',
-//         isExpanded: true,
-//         info: { label: 'Fruit' },
-//         children: [
-//             {
-//                 id: '2',
-//                 label: 'Apple',
-//                 isExpanded: true,
-//                 children: [],
-//             },
-
-//             {
-//                 id: '3',
-//                 label: 'Test',
-//                 isExpanded: true,
-//                 children: [],
-//             },
-
-//             {
-//                 id: '4',
-//                 label: 'Test2',
-//                 isExpanded: true,
-//                 children: [],
-//             },
-
-//             {
-//                 id: '5',
-//                 label: 'Test2',
-//                 isExpanded: true,
-//                 children: [],
-//             },
-
-//             {
-//                 id: '6',
-//                 label: 'Test2',
-//                 isExpanded: true,
-//                 children: [],
-//             },
-//         ],
-//     },
-// ]
-
-// export default (props: DynamicSelectorPropsT<any>) => {
-//     const options = [
-//         {
-//             id: 'tree',
-//             info: {
-//                 data: treeData,
-//             },
-//             multiple: false,
-//             getData: (info: any, id: string) => findTreeNode(info.data, id),
-//             getDataToLabel: (data: any) => data?.label,
-//             getDataToValue: (data: any) => data?.id,
-//             render: SelectorItemByTree as React.FC<any>,
-//         },
-//     ]
-//     const options2 = [
-//         {
-//             id: 'tree',
-//             info: {
-//                 data: treeData,
-//             },
-//             multiple: true,
-//             getData: (info: any, id: string) => findTreeNode(info.data, id),
-//             getDataToLabel: (data: any) => data?.label,
-//             getDataToValue: (data: any) => data?.id,
-//             render: SelectorItemByTree as React.FC<any>,
-//         },
-//     ]
-//     return (
-//         <>
-//             <DynamicSelector {...props} options={options} />
-//             <DynamicSelector options={options2} />
-//         </>
-//     )
-// }

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

@@ -16,6 +16,7 @@ const useStyles = createUseStyles({
         display: 'flex',
         flexDirection: 'column',
         flex: 1,
+        minWidth: 0,
     },
     header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' },
     headerTitle: {

console/packages/starwhale-ui/src/GridTable/components/Query/ConfigSimpleQuery.tsx

@@ -16,14 +16,24 @@ function ConfigSimpleQuery({ columns, onChange, value }: PropsT) {
 
     const [form] = useForm()
 
+    const columnsWithFilter = React.useMemo(() => {
+        return columns?.filter((column) => column.filterable)
+    }, [columns])
+
     useEffect(() => {
         const tmp = _.fromPairs(
             value.map((query) => {
                 return [query.property, query.value]
             })
         )
+        const prev = form.getFieldsValue()
+        Object.keys(prev).forEach((key) => {
+            if (!(key in tmp)) {
+                tmp[key] = undefined
+            }
+        })
+        form.setFieldsValue({ ...tmp })
         setValues(tmp)
-        form.setFieldsValue(tmp)
     }, [value, form])
 
     const handleValuesChange = React.useCallback(
@@ -33,18 +43,14 @@ function ConfigSimpleQuery({ columns, onChange, value }: PropsT) {
                     .filter((v) => !!v)
                     .map(([key, v]) => ({
                         value: v,
-                        op: 'EQUAL',
+                        op: Array.isArray(v) ? 'IN' : 'EQUAL',
                         property: key,
                     }))
             )
         },
         [onChange]
     )
 
-    const columnsWithFilter = React.useMemo(() => {
-        return columns?.filter((column) => column.filterable)
-    }, [columns])
-
     const Filters = React.useMemo(() => {
         return columnsWithFilter?.map((column) => {
             return (