chore(console): multi optimizations of ui and interactive (#1262)

* chore: multi optimizations of ui and interactive

* fix: all runs selector not work

* fix: dataset version selector not work

* feat: support text viewer

1. fix auth error when children empty

* fix: lint error

console/src/api/WithAuth.tsx

@@ -1,3 +1,4 @@
+import ErrorBoundary from '@/components/ErrorBoundary/ErrorBoundary'
 import { useProjectRole } from '@/domain/project/hooks/useProjectRole'
 import React from 'react'
 import { IPrivileges, Privileges, Role, RolePrivilege } from './const'
@@ -21,7 +22,7 @@ export default function WithAuth({
         return children(isPrivileged)
     }
     if (!isPrivileged) return <></>
-    return children
+    return <ErrorBoundary>{children ?? <></>}</ErrorBoundary>
 }
 
 export function WithCurrentAuth({ id, children }: { id: keyof IPrivileges; children: React.ReactElement | any }) {

console/src/api/const.ts

@@ -27,6 +27,8 @@ export const RolePrivilege: Record<Role, any> = {
     MAINTAINER: {
         ...Privileges,
         'member.update': false,
+        'member.delete': false,
+        'member.create': false,
     },
     GUEST: {
         'member.read': true,

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/Viewer/DatasetViewer.tsx

@@ -4,6 +4,7 @@ import { DatasetObject, MIMES, TYPES } from '@/domain/dataset/sdk'
 import ImageViewer from '@/components/Viewer/ImageViewer'
 import AudioViewer from './AudioViewer'
 import ImageGrayscaleViewer from './ImageGrayscaleViewer'
+import TextViewer from './TextViewer'
 
 export type IDatasetViewerProps = {
     data?: DatasetObject
@@ -53,7 +54,7 @@ export default function DatasetViewer({ data, isZoom = false, hiddenLabels = new
             case TYPES.AUDIO:
                 return <AudioViewer data={data} isZoom={isZoom} />
             case TYPES.TEXT:
-                return <p>{data?.data?.display_name}</p>
+                return <TextViewer data={data} isZoom={isZoom} />
             default:
                 return <Placeholder />
         }

console/src/components/Viewer/TextViewer.tsx

@@ -0,0 +1,54 @@
+import classNames from 'classnames'
+import React, { useEffect } from 'react'
+import { createUseStyles } from 'react-jss'
+import { StatefulTooltip } from 'baseui/tooltip'
+
+const useStyles = createUseStyles({
+    wrapper: {
+        display: 'flex',
+        placeItems: 'center',
+        textOverflow: 'hidden',
+    },
+    text: {
+        padding: '20px',
+    },
+})
+
+type IImageViewerProps = {
+    isZoom?: boolean
+    data: {
+        src: string
+    }
+}
+
+const utf8Decoder = new TextDecoder('utf-8')
+
+export default function TextViewer({ isZoom = false, data }: IImageViewerProps) {
+    const [text, setText] = React.useState('')
+    const styles = useStyles()
+
+    useEffect(() => {
+        if (!data.src) return
+        fetch(data.src)
+            .then((response) => response.arrayBuffer())
+            .then((buffer) => {
+                setText(utf8Decoder.decode(buffer))
+            })
+    }, [data, setText])
+
+    if (!isZoom) {
+        return (
+            <div className={classNames(styles.wrapper, 'fullsize')}>
+                <StatefulTooltip content={() => <p style={{ maxWidth: '300px' }}>{text ?? ''}</p>} placement='bottom'>
+                    <p className='text-ellipsis'>{text}</p>
+                </StatefulTooltip>
+            </div>
+        )
+    }
+
+    return (
+        <div className='fullsize' style={{ height: '100%' }}>
+            <p className={styles.text}>{text}</p>
+        </div>
+    )
+}

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' }}>