chore(console): multi optimizations of ui and interactive

console/src/components/Button/Button.tsx

@@ -4,20 +4,12 @@ import { mergeOverrides } from '@/utils/baseui'
 import { useStyletron } from 'baseui'
 
 export interface IButtonProps extends ButtonProps {
-    as?: 'link' | 'button' | 'transparent'
+    as?: 'link' | 'button' | 'transparent' | withIcon
     kind?: KIND[keyof KIND]
     isFull?: boolean
     className?: string
 }
 
-// const useStyles = createUseStyles({
-// baseButton: {
-//     style: {
-//         borderRadius: theme.borders.radius100,
-//     }
-// }
-// })
-
 /* eslint-disable react/jsx-props-no-spreading */
 export default function Button({
     isFull = false,
@@ -106,6 +98,31 @@ export default function Button({
             },
             props.overrides
         )
+    } else if (as === 'withIcon') {
+        overrides = mergeOverrides(
+            {
+                BaseButton: {
+                    style: {
+                        'borderTopLeftRadius': theme.borders.radius200,
+                        'borderTopRightRadius': theme.borders.radius200,
+                        'borderBottomLeftRadius': theme.borders.radius200,
+                        'borderBottomRightRadius': theme.borders.radius200,
+                        'width': isFull ? '100%' : 'auto',
+                        'backgroundColor': '#F4F5F7',
+                        'color': 'rgba(2,16,43,0.60)',
+                        ':hover': {
+                            backgroundColor: '#F0F4FF',
+                            color: '#5181E0',
+                        },
+                        ':active': {
+                            backgroundColor: '#F0F4FF',
+                            color: '#1C4CAD',
+                        },
+                    },
+                },
+            },
+            props.overrides
+        )
     }
 
     return (

console/src/components/Input/Input.tsx

@@ -32,7 +32,7 @@ export default function Input({ size = 'compact', ...props }: IInputProps) {
         overrides.MaskToggleShowIcon = () => <IconFont type='eye' kind='gray' />
         overrides.MaskToggleHideIcon = () => <IconFont type='eye_off' kind='gray' />
         overrides.MaskToggleButton = {
-            props: { tabindex: -1 },
+            props: { tabIndex: -1 },
         }
     }
 

console/src/components/data-table/config-manage-columns.tsx

@@ -244,7 +244,7 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                     onClick={() => setIsOpen(!isOpen)}
                     shape={SHAPE.pill}
                     size={SIZE.compact}
-                    as='link'
+                    as='withIcon'
                     startEnhancer={() => (
                         <IconFont
                             type='setting'

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

@@ -84,12 +84,16 @@ function ConfigViews(props: PropsT) {
                 onChange={(params) => {
                     const id = params.option?.id as string
                     if (id === ALLRUNS) {
-                        store.onCurrentViewColumnsChange(
-                            props.columns.map((v) => v.key),
-                            [],
-                            []
-                        )
-                        store.onCurrentViewFiltersChange([])
+                        useStore.setState({
+                            currentView: {
+                                filters: [],
+                                selectedIds: props.columns.map((v) => v.key),
+                                pinnedIds: [],
+                                sortedIds: [],
+                                sortBy: '',
+                                id: ALLRUNS,
+                            },
+                        })
                         return
                     }
 

console/src/components/data-table/filter-operate-menu.tsx

@@ -351,19 +351,6 @@ function FilterOperateMenu(props: PropsT) {
                                             borderRight: 0,
                                         },
                                     },
-                                    // Action: {
-                                    //     style: {
-                                    //         background: 'rgba(2,16,43,0.20)',
-                                    //         borderRadius: '50%',
-                                    //         color: '#fff',
-                                    //     },
-                                    // },
-                                    // ActionIcon: {
-                                    //     style: {
-                                    //         width: 8,
-                                    //         height: 8,
-                                    //     },
-                                    // },
                                 }}
                                 onActionClick={handleSelectNone}
                             >

console/src/domain/dataset/schemas/dataset.tsx

@@ -1,6 +1,6 @@
 import { IResourceSchema } from '@/domain/base/schemas/resource'
 import { IUserSchema } from '@user/schemas/user'
-import { IDatasetVersionSchema } from './datasetVersion'
+import { IDatasetFileSchema, IDatasetVersionSchema } from './datasetVersion'
 
 export interface IDatasetSchema extends IResourceSchema {
     name: string
@@ -19,11 +19,6 @@ export interface IDatasetDetailSchema {
     indexTable?: string
 }
 
-export interface IDatasetFileSchema {
-    name: string
-    size: string
-}
-
 export interface IUpdateDatasetSchema {
     description?: string
 }

console/src/domain/dataset/schemas/datasetVersion.tsx

@@ -1,15 +1,26 @@
 import { IResourceSchema } from '@/domain/base/schemas/resource'
 import { IUserSchema } from '@user/schemas/user'
 
+export interface IDatasetFileSchema {
+    name: string
+    size: string
+}
 export interface IDatasetVersionSchema extends IResourceSchema {
     name: string
     tag: string
     meta: string
     owner?: IUserSchema
 }
 
-export interface IDatasetVersionDetailSchema extends IDatasetVersionSchema {
-    datasetName?: string
+export interface IDatasetVersionDetailSchema {
+    id?: string
+    name?: string
+    createdTime?: number
+    versionMeta?: string
+    versionName?: string
+    versionTag?: string
+    files?: Array<IDatasetFileSchema>
+    indexTable?: string
 }
 
 export interface IUpdateDatasetVersionSchema {

console/src/pages/Dataset/DatasetOverviewLayout.tsx

@@ -14,6 +14,9 @@ import _ from 'lodash'
 import Button from '@/components/Button'
 import IconFont from '@/components/IconFont'
 import { Panel } from 'baseui/accordion'
+import { useDatasetVersion } from '@/domain/dataset/hooks/useDatasetVersion'
+import qs from 'qs'
+import { usePage } from '@/hooks/usePage'
 
 export interface IDatasetLayoutProps {
     children: React.ReactNode
@@ -28,7 +31,8 @@ export default function DatasetOverviewLayout({ children }: IDatasetLayoutProps)
     const datasetInfo = useFetchDataset(projectId, datasetId)
     const datasetVersionInfo = useFetchDatasetVersion(projectId, datasetId, datasetVersionId)
     const { dataset, setDataset } = useDataset()
-
+    const { setDatasetVersion } = useDatasetVersion()
+    const [page] = usePage()
     const { setDatasetLoading } = useDatasetLoading()
     const history = useHistory()
     const [t] = useTranslation()
@@ -45,21 +49,10 @@ export default function DatasetOverviewLayout({ children }: IDatasetLayoutProps)
     }, [dataset?.versionName, datasetInfo, setDataset, setDatasetLoading])
 
     useEffect(() => {
-        setDatasetLoading(datasetVersionInfo.isLoading)
-        if (datasetVersionInfo.isSuccess) {
-            if (datasetVersionInfo.data) {
-                setDataset(datasetVersionInfo.data)
-            }
-        } else if (datasetVersionInfo.isLoading) {
-            setDataset(undefined)
+        if (datasetVersionInfo.data) {
+            setDatasetVersion(datasetVersionInfo.data)
         }
-    }, [
-        datasetVersionInfo.data,
-        datasetVersionInfo.isLoading,
-        datasetVersionInfo.isSuccess,
-        setDataset,
-        setDatasetLoading,
-    ])
+    }, [datasetVersionInfo.data, setDatasetVersion])
 
     const breadcrumbItems: INavItem[] = useMemo(() => {
         const items = [
@@ -184,19 +177,25 @@ export default function DatasetOverviewLayout({ children }: IDatasetLayoutProps)
                                     value={datasetVersionId}
                                     onChange={(v) =>
                                         history.push(
-                                            `/projects/${projectId}/datasets/${datasetId}/versions/${v}/${activeItemId}`
+                                            `/projects/${projectId}/datasets/${datasetId}/versions/${v}/${activeItemId}?${qs.stringify(
+                                                page
+                                            )}`
                                         )
                                     }
                                 />
                             </div>
-                            <Button
-                                size='compact'
-                                kind='secondary'
-                                startEnhancer={() => <IconFont type='runtime' />}
-                                onClick={() => history.push(`/projects/${projectId}/datasets/${datasetId}/versions`)}
-                            >
-                                {t('History')}
-                            </Button>
+                            {datasetVersionId && (
+                                <Button
+                                    size='compact'
+                                    as='withIcon'
+                                    startEnhancer={() => <IconFont type='runtime' />}
+                                    onClick={() =>
+                                        history.push(`/projects/${projectId}/datasets/${datasetId}/versions`)
+                                    }
+                                >
+                                    {t('History')}
+                                </Button>
+                            )}
                         </div>
                         {datasetVersionId && <BaseNavTabs navItems={navItems} />}
                         <div style={{ paddingTop: '12px', flex: '1', display: 'flex', flexDirection: 'column' }}>

console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx

@@ -1,5 +1,4 @@
 import React from 'react'
-import { useDataset } from '@dataset/hooks/useDataset'
 import { useQueryDatasetList } from '@/domain/datastore/hooks/useFetchDatastore'
 import { useHistory, useParams } from 'react-router-dom'
 import { TableBuilder, TableBuilderColumn } from 'baseui/table-semantic'
@@ -16,6 +15,7 @@ import IconFont from '@/components/IconFont/index'
 import { createUseStyles } from 'react-jss'
 import qs from 'qs'
 import { DatasetObject } from '@/domain/dataset/sdk'
+import { useDatasetVersion } from '@/domain/dataset/hooks/useDatasetVersion'
 import DatasetVersionFilePreview from './DatasetVersionOverviewFilePreview'
 
 const useCardStyles = createUseStyles({
@@ -139,10 +139,10 @@ export default function DatasetVersionFiles() {
         fileId: string
     }>()
     const [page, setPage] = usePage()
-    const { dataset: datasetVersion } = useDataset()
     const { token } = useAuth()
     const history = useHistory()
     const styles = useCardStyles()
+    const { datasetVersion } = useDatasetVersion()
 
     const tables = useQueryDatasetList(datasetVersion?.indexTable, page, true)
 
@@ -323,11 +323,13 @@ export default function DatasetVersionFiles() {
                     value={layoutKey}
                     onChange={(key) => {
                         setLayoutKey(key)
+                        const newSize = key === '1' ? PAGE_TABLE_SIZE : PAGE_CARD_SIZE
+
                         history.push(
                             `/projects/${projectId}/datasets/${datasetId}/versions/${datasetVersionId}/files/?${qs.stringify(
                                 {
-                                    ...page,
-                                    pageSize: key === '1' ? PAGE_TABLE_SIZE : PAGE_CARD_SIZE,
+                                    pageNum: Math.floor((page.pageSize * page.pageNum) / newSize),
+                                    pageSize: newSize,
                                 }
                             )}`
                         )

console/src/pages/Evaluation/EvaluationResults.tsx

@@ -14,7 +14,7 @@ const PlotlyVisualizer = React.lazy(
     () => import(/* webpackChunkName: "PlotlyVisualizer" */ '../../components/Indicator/PlotlyVisualizer')
 )
 
-const PAGE_TABLE_SIZE = 10
+const PAGE_TABLE_SIZE = 100
 
 function ConfusionMatrix({ fetch }: any) {
     const { labels, binarylabel } = useParseConfusionMatrix(fetch?.data)
@@ -65,7 +65,7 @@ function EvaluationViewer({ table }: { table: string }) {
         return info.data?.columnTypes ?? {}
     }, [info])
     const columns = React.useMemo(() => {
-        return Object.keys(columnTypes) ?? []
+        return Object.keys(columnTypes).sort((a) => (a === 'id' ? -1 : 1)) ?? []
     }, [columnTypes])
     const data = React.useMemo(() => {
         if (!info.data) return []

console/src/pages/Project/Overview.tsx

@@ -12,7 +12,7 @@ import { useHistory } from 'react-router-dom'
 import { IProjectSchema } from '@/domain/project/schemas/project'
 import { createUseStyles } from 'react-jss'
 import { useFetchProjectMembers } from '@/domain/project/hooks/useFetchProjectMembers'
-import Button from '@/components/Button/Button'
+import Button from '@/components/Button'
 import { useQuery } from 'react-query'
 import Avatar from '@/components/Avatar'
 import WithAuth from '@/api/WithAuth'
@@ -90,7 +90,7 @@ const ProjectCard = ({ project, onEdit }: IProjectCardProps) => {
                         <Button
                             onClick={() => onEdit?.()}
                             size='compact'
-                            kind='secondary'
+                            as='withIcon'
                             startEnhancer={() => <IconFont type='edit' size={13} />}
                         >
                             {t('Edit')}
@@ -128,7 +128,7 @@ const ProjectCard = ({ project, onEdit }: IProjectCardProps) => {
                         <Button
                             onClick={() => history.push(`/projects/${project.id}/members`)}
                             size='compact'
-                            kind='secondary'
+                            as='withIcon'
                             startEnhancer={() => <IconFont type='a-managemember' size={13} />}
                         >
                             {t('Manage Member')}

console/src/theme/index.ts

@@ -68,6 +68,12 @@ const overrides = {
             buttonPrimaryFill: customPrimaryColors.primary,
             buttonPrimaryHover: customPrimaryColors.primaryHover,
             buttonPrimaryActive: customPrimaryColors.primaryPressed,
+            buttonSecondaryFill: '#F4F5F7',
+            buttonSecondaryText: 'rgba(2,16,43,0.60)',
+            buttonSecondarySelectedText: '#1C4CAD',
+            buttonSecondarySelectedFill: '#1C4CAD',
+            buttonSecondaryHover: '#F0F4FF',
+            buttonSecondaryActive: '#F0F4FF;',
             borderSelected: customPrimaryColors.primary,
             tickFillSelected: customPrimaryColors.primary,
             tickFillSelectedHover: customPrimaryColors.primary,