star-whale · jialeicui · Oct 9, 2022 · Oct 9, 2022
diff --git a/console/package.json b/console/package.json
@@ -98,7 +98,7 @@
     "styletron-react": "^6.0.1",
     "ts-auto-mock": "^3.5.0",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
-    "typescript": "^4.6.4",
+    "typescript": "4.6.4",
     "uuid": "^8.3.2",
     "vite": "^3.0.4",
     "vite-plugin-multi-pages": "^0.0.8",
@@ -222,4 +222,4 @@
     "framer-motion": "4.1.17",
     "react-virtualized": "git+https://git@github.com/remorses/react-virtualized-fixed-import.git#9.22.3"
   }
-}
+}
diff --git a/console/src/components/Checkbox/Checkbox.tsx b/console/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,43 @@
+import React from 'react'
+import { Checkbox as BaseCheckbox, CheckboxProps } from 'baseui/checkbox'
+import { mergeOverrides } from '@/utils/baseui'
+import { expandBorder, expandBorderRadius } from '@/utils'
+
+export interface ICheckBoxProps extends CheckboxProps {
+    size?: number
+}
+
+/* eslint-disable react/jsx-props-no-spreading */
+export default function Checkbox({ size = 16, children, ...props }: ICheckBoxProps) {
+    const overrides = mergeOverrides(
+        {
+            Root: {
+                style: {
+                    alignItems: 'center',
+                },
+            },
+            Checkmark: {
+                style: ({ $checked }: any) => {
+                    return {
+                        'width': `${size}px`,
+                        'height': `${size}px`,
+                        'backgroundSize': '80%',
+                        'backgroundPosition': 'center',
+                        ...expandBorder($checked ? '0px' : '1px', 'solid', '#CFD7E6'),
+                        ...expandBorderRadius('2px'),
+                        ':hover': {
+                            ...expandBorder('', '', '#799EE8'),
+                        },
+                    }
+                },
+            },
+        },
+        props.overrides
+    )
+
+    return (
+        <BaseCheckbox {...props} overrides={overrides}>
+            {children}
+        </BaseCheckbox>
+    )
+}
diff --git a/console/src/components/Checkbox/FormCheckbox.tsx b/console/src/components/Checkbox/FormCheckbox.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import { CheckboxProps } from 'baseui/checkbox'
+import Checkbox from './Checkbox'
+
+export interface ICheckBoxProps extends Omit<CheckboxProps, 'value' | 'onChange'> {
+    value?: boolean
+    onChange?: (checked: boolean) => void
+}
+
+/* eslint-disable react/jsx-props-no-spreading */
+export default function FormCheckbox({ value, onChange, children, ...props }: ICheckBoxProps) {
+    return (
+        <Checkbox {...props} checked={value} onChange={() => onChange?.(!value)}>
+            {children}
+        </Checkbox>
+    )
+}
diff --git a/console/src/components/Checkbox/index.tsx b/console/src/components/Checkbox/index.tsx
@@ -1,16 +1,3 @@
-import React from 'react'
-import { Checkbox as BaseCheckbox, CheckboxProps } from 'baseui/checkbox'
-
-export interface ICheckBoxProps extends Omit<CheckboxProps, 'value' | 'onChange'> {
-    value?: boolean
-    onChange?: (checked: boolean) => void
-}
-
-/* eslint-disable react/jsx-props-no-spreading */
-export default function Checkbox({ value, onChange, children, ...props }: ICheckBoxProps) {
-    return (
-        <BaseCheckbox {...props} checked={value} onChange={() => onChange?.(!value)}>
-            {children}
-        </BaseCheckbox>
-    )
-}
+export { default } from './Checkbox'
+export { default as FormCheckbox } from './FormCheckbox'
+export * from './Checkbox'
diff --git a/console/src/components/Form/item.tsx b/console/src/components/Form/item.tsx
@@ -7,9 +7,10 @@ export interface IFormItemProps extends FieldProps {
     label?: React.ReactNode
     required?: boolean
     style?: React.CSSProperties
+    positive?: ''
 }
 
-export const FormItem = ({ label: label_, required, style, children, ...restProps }: IFormItemProps) => {
+export const FormItem = ({ label: label_, required, style, children, positive, ...restProps }: IFormItemProps) => {
     let label = label_
     if (required) {
         label = <span>{label} *</span>

diff --git a/console/src/components/Viewer/ImageViewer.tsx b/console/src/components/Viewer/ImageViewer.tsx
@@ -93,8 +93,6 @@ export function COCOBBoxOverlay({ cocos = [] }: { cocos: IImageViewerProps['coco
         canvas.height = height
 
         cocos.map((c) => drawBox(canvas, c.bbox, c.id))
-
-        // drawSegmentWithCOCOMask(canvas, imgDatas)
     }, [canvasRef, cocos])
 
     if (cocos.length === 0) {

diff --git a/console/src/components/Viewer/TextViewer.tsx b/console/src/components/Viewer/TextViewer.tsx
@@ -40,7 +40,9 @@ export default function TextViewer({ isZoom = false, data }: IImageViewerProps)
         return (
             <div className={classNames(styles.wrapper, 'fullsize')}>
                 <StatefulTooltip content={() => <p style={{ maxWidth: '300px' }}>{text ?? ''}</p>} placement='bottom'>
-                    <p className='text-ellipsis'>{text}</p>
+                    <p className='text-ellipsis' style={{ lineHeight: '1.5' }}>
+                        {text}
+                    </p>
                 </StatefulTooltip>
             </div>
         )

diff --git a/console/src/components/Viewer/ZoomWrapper.tsx b/console/src/components/Viewer/ZoomWrapper.tsx
@@ -8,11 +8,9 @@ export default function ZoomWrapper({ children, isTools }: any) {
             wheel={{ disabled: false }}
             centerOnInit
             centerZoomedOut
-            limitToBounds={false}
+            limitToBounds
             maxScale={10}
             minScale={0.5}
-            // initialPositionX={200}
-            // initialPositionY={100}
         >
             {({ zoomIn, zoomOut, resetTransform, centerView }) => (
                 <>

diff --git a/console/src/components/data-table/column.tsx b/console/src/components/data-table/column.tsx
@@ -2,12 +2,11 @@
 
 import * as React from 'react'
 
-import { Checkbox } from 'baseui/checkbox'
 import { useStyletron } from 'baseui'
-
 import type { ColumnT } from './types.js'
 import _ from 'lodash'
 import cn from 'classnames'
+import Checkbox from '@/components/Checkbox'
 
 function Column<ValueT, FilterParamsT>(options: ColumnT<ValueT, FilterParamsT>): ColumnT<ValueT, FilterParamsT> {
     return {
@@ -72,7 +71,7 @@ function Column<ValueT, FilterParamsT>(options: ColumnT<ValueT, FilterParamsT>):
                                 //@ts-ignore
                                 checked={props.isSelected}
                                 overrides={{
-                                    Checkmark: { style: { marginTop: null, marginBottom: null } },
+                                    Checkmark: { style: { marginTop: 0, marginBottom: 0 } },
                                 }}
                             />
                         </span>

diff --git a/console/src/components/data-table/config-manage-columns.tsx b/console/src/components/data-table/config-manage-columns.tsx
@@ -4,7 +4,6 @@ import { Search } from 'baseui/icon'
 import { useStyletron } from 'baseui'
 import { useHover } from 'react-use'
 import { Drawer } from 'baseui/drawer'
-import { Checkbox } from 'baseui/checkbox'
 import { LabelSmall } from 'baseui/typography'
 import Button from '@/components/Button'
 import Input from '@/components/Input'
@@ -13,10 +12,11 @@ import { AiOutlinePushpin } from 'react-icons/ai'
 import { RiDeleteBin6Line } from 'react-icons/ri'
 import { useDrawer } from '@/hooks/useDrawer'
 import IconFont from '@/components/IconFont'
+import { expandBorderRadius } from '@/utils'
 import { DnDContainer } from '../DnD/DnDContainer'
 import { matchesQuery } from './text-search'
 import type { ColumnT, ConfigT } from './types'
-// import { LocaleContext } from './locales'
+import Checkbox from '../Checkbox'
 
 type PropsT = {
     isInline?: boolean
@@ -108,7 +108,7 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                                                 'paddingRight': '7px',
                                                 'color': pined ? 'rgba(2,16,43,0.80)' : 'rgba(2,16,43,0.20)',
                                                 ':hover': {
-                                                    background: 'transparent',
+                                                    backgroundColor: 'transparent',
                                                     color: pined ? '#02102B' : 'rgba(2,16,43,0.50)',
                                                 },
                                             },
@@ -212,11 +212,11 @@ const ConfigManageColumns = React.forwardRef<{ getConfig: () => any }, PropsT>((
                             },
                             DrawerContainer: {
                                 style: {
-                                    borderRadius: '0',
                                     boxSizing: 'border-box',
                                     padding: '0px 0 10px',
                                     boxShadow: '0 4px 14px 0 rgba(0, 0, 0, 0.3)',
                                     margin: 0,
+                                    ...expandBorderRadius('0'),
                                 },
                             },
                             DrawerBody: {

diff --git a/console/src/components/data-table/filter-operate-menu.tsx b/console/src/components/data-table/filter-operate-menu.tsx
@@ -4,14 +4,15 @@ import Button from '@/components/Button'
 import { Popover, PLACEMENT } from 'baseui/popover'
 import { useStyletron } from 'baseui'
 import { FiFilter } from 'react-icons/fi'
-import { Checkbox } from 'baseui/checkbox'
 import { Tag } from 'baseui/tag'
 import { MdAddCircle, MdRemoveCircle } from 'react-icons/md'
+import { expandBorder } from '@/utils'
 import FilterOperateSelector, { FilterOperateSelectorValueT } from './filter-operate-selector'
 import useEventCallback from '../../hooks/useEventCallback'
 import type { ColumnT } from './types'
 import { LocaleContext } from './locales'
 import FilterShell from './filter-shell'
+import Checkbox from '../Checkbox'
 
 // type CategoricalColumnT = ColumnT<string, FilterParametersT>
 
@@ -62,7 +63,7 @@ export const CategoricalFilter = React.forwardRef<
         (e) => {
             const $categories = categories.map((v) => ({
                 ...v,
-                disable: !e.target.checked,
+                disable: !e.target?.checked,
             }))
             setCategories([...$categories])
         },
@@ -120,20 +121,6 @@ export const CategoricalFilter = React.forwardRef<
                 <Checkbox
                     checked={selectedCategories.length > 0 && selectedCategories.length === categories.length}
                     onChange={handleSelectAll}
-                    overrides={{
-                        Root: {
-                            style: {
-                                alignItems: 'center',
-                            },
-                        },
-                        Checkmark: {
-                            style: {
-                                width: '16px',
-                                height: '16px',
-                            },
-                        },
-                        // Label: { component: HighlightCheckboxLabel, props: { query } },
-                    }}
                 />
                 Filter ({selectedCategories.length})
             </div>
@@ -148,24 +135,7 @@ export const CategoricalFilter = React.forwardRef<
                 {Boolean(categories.length) &&
                     categories.map((category, i) => (
                         <div className={checkboxStyles} key={i}>
-                            <Checkbox
-                                checked={!category.disable}
-                                onChange={() => handleSelectOne(i)}
-                                overrides={{
-                                    Root: {
-                                        style: {
-                                            alignItems: 'center',
-                                        },
-                                    },
-                                    Checkmark: {
-                                        style: {
-                                            width: '16px',
-                                            height: '16px',
-                                        },
-                                    },
-                                    // Label: { component: HighlightCheckboxLabel, props: { query } },
-                                }}
-                            />
+                            <Checkbox checked={!category.disable} onChange={() => handleSelectOne(i)} />
                             <FilterOperateSelector
                                 // @ts-ignore
                                 columns={props.columns}
@@ -318,11 +288,8 @@ function FilterOperateMenu(props: PropsT) {
                     overrides={{
                         BaseButton: {
                             style: {
-                                background: '',
-                                borderTop: '1px solid #CFD7E6',
-                                borderBottom: '1px solid #CFD7E6',
-                                borderLeft: '1px solid #CFD7E6',
-                                borderRight: '1px solid #CFD7E6',
+                                ...expandBorder('1px', 'solid', '#CFD7E6'),
+                                backgroundColor: 'transparent',
                                 paddingTop: '6px',
                                 paddingBottom: '6px',
                                 lineHeight: '20px',
@@ -338,17 +305,14 @@ function FilterOperateMenu(props: PropsT) {
                                 overrides={{
                                     Root: {
                                         style: {
-                                            marginTop: 0,
-                                            marginBottom: 0,
-                                            marginLeft: 0,
-                                            marginRight: 0,
+                                            marginTop: '0px',
+                                            marginBottom: '0px',
+                                            marginLeft: '0px',
+                                            marginRight: '0px',
                                             height: '20px',
-                                            background: ' #EEF1F6',
+                                            backgroundColor: ' #EEF1F6',
                                             color: '#2B65D9',
-                                            borderTop: 0,
-                                            borderBottom: 0,
-                                            borderLeft: 0,
-                                            borderRight: 0,
+                                            ...expandBorder('0px'),
                                         },
                                     },
                                 }}

diff --git a/console/src/components/data-table/header-cell.tsx b/console/src/components/data-table/header-cell.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react'
 
-import { Checkbox } from 'baseui/checkbox'
 import { useStyletron } from 'baseui'
 import { ChevronDown, ChevronUp } from 'baseui/icon'
 import { isFocusVisible } from '@/utils/focusVisible'
@@ -12,6 +11,7 @@ import { SortDirectionsT } from './types'
 import { SORT_DIRECTIONS } from './constants'
 import Button from '../Button'
 import { LocaleContext } from './locales'
+import Checkbox from '../Checkbox'
 
 type HeaderCellPropsT = {
     index: number

diff --git a/console/src/domain/dataset/components/DatasetSelector.tsx b/console/src/domain/dataset/components/DatasetSelector.tsx
@@ -47,6 +47,7 @@ export default function DatasetSelector({ projectId, value, onChange, overrides,
             overrides={overrides}
             isLoading={datasetsInfo.isFetching}
             options={options}
+            clearable={false}
             onChange={(params) => {
                 if (!params.option) {
                     return

diff --git a/console/src/domain/dataset/components/DatasetVersionSelector.tsx b/console/src/domain/dataset/components/DatasetVersionSelector.tsx
@@ -78,6 +78,7 @@ export default function DatasetVersionSelector({
             overrides={overrides}
             isLoading={datasetVersionsInfo.isFetching}
             options={options}
+            clearable={false}
             onChange={(params) => {
                 if (!params.option) {
                     return

diff --git a/console/src/domain/model/components/ModelSelector.tsx b/console/src/domain/model/components/ModelSelector.tsx
@@ -45,6 +45,7 @@ export default function ModelSelector({ projectId, value, onChange, overrides, d
             size={SIZE.compact}
             disabled={disabled}
             overrides={overrides}
+            clearable={false}
             isLoading={modelsInfo.isFetching}
             options={options}
             onChange={(params) => {

diff --git a/console/src/domain/model/components/ModelVersionSelector.tsx b/console/src/domain/model/components/ModelVersionSelector.tsx
@@ -110,6 +110,7 @@ const ModelVersionSelector = React.forwardRef<IDataSelectorRef<any>, IModelVersi
                 overrides={overrides}
                 isLoading={isFetching}
                 options={options}
+                clearable={false}
                 onChange={(params) => handelChange?.(params.option?.id as string)}
                 onInputChange={(e) => handleSearchInputChange((e.target as HTMLInputElement).value)}
                 value={

diff --git a/console/src/domain/runtime/components/RuntimeSelector.tsx b/console/src/domain/runtime/components/RuntimeSelector.tsx
@@ -50,6 +50,7 @@ export default function RuntimeSelector({ projectId, value, onChange, overrides,
             overrides={overrides}
             isLoading={runtimesInfo.isFetching}
             options={options}
+            clearable={false}
             onChange={(params) => {
                 if (!params.option) {
                     return

diff --git a/console/src/domain/runtime/components/RuntimeVersionSelector.tsx b/console/src/domain/runtime/components/RuntimeVersionSelector.tsx
@@ -78,6 +78,7 @@ export default function RuntimeVersionSelector({
             overrides={overrides}
             isLoading={runtimeVersionsInfo.isFetching}
             options={options}
+            clearable={false}
             onChange={(params) => {
                 if (!params.option) {
                     return

diff --git a/console/src/domain/setting/components/DeviceSelector.tsx b/console/src/domain/setting/components/DeviceSelector.tsx
@@ -46,6 +46,7 @@ export default function DeviceSelector({ value, onChange, overrides, disabled }:
             overrides={overrides}
             isLoading={devicesInfo.isFetching}
             options={options}
+            clearable={false}
             onChange={(params) => {
                 if (!params.option) {
                     return