From 134e455483f8b35aea897f22210cf2e3f2402b91 Mon Sep 17 00:00:00 2001
From: waynelwz <100347187+waynelwz@users.noreply.github.com>
Date: Tue, 6 Dec 2022 14:30:22 +0800
Subject: [PATCH] optimize(console): dataset layout & fullscreen (#1585)

* optimize: dataset layout & fullscreen

* chore: tsconfig

* fix: eslint error

* chore: revert code

* update: use list as default

* fix: eslint error
---
 .../src/form/WidgetPreviewModal.tsx           | 15 +---
 .../Viewer/ImageGrayscaleViewer.tsx           |  2 +
 console/src/components/Viewer/ZoomWrapper.tsx |  3 +-
 .../DatasetVersionOverviewFilePreview.tsx     | 80 +++++++++++--------
 .../Dataset/DatasetVersionOverviewFiles.tsx   | 22 +++--
 console/tsconfig.base.json                    |  7 +-
 6 files changed, 69 insertions(+), 60 deletions(-)

diff --git a/console/packages/starwhale-core/src/form/WidgetPreviewModal.tsx b/console/packages/starwhale-core/src/form/WidgetPreviewModal.tsx
index 85820c0664..76ffa8112b 100644
--- a/console/packages/starwhale-core/src/form/WidgetPreviewModal.tsx
+++ b/console/packages/starwhale-core/src/form/WidgetPreviewModal.tsx
@@ -101,20 +101,7 @@ export default function WidgetPreviewModal({
                     )}
                 </div>
             </ModalBody>
-            <ModalFooter>
-                <div style={{ display: 'flex' }}>
-                    <div style={{ flexGrow: 1 }} />
-                    <Button
-                        size='compact'
-                        kind='secondary'
-                        onClick={() => {
-                            setisPanelModalOpen(false)
-                        }}
-                    >
-                        Cancel
-                    </Button>
-                </div>
-            </ModalFooter>
+            <ModalFooter></ModalFooter>
         </Modal>
     )
 }
diff --git a/console/src/components/Viewer/ImageGrayscaleViewer.tsx b/console/src/components/Viewer/ImageGrayscaleViewer.tsx
index fe2e70b3a6..d64b4a4e0e 100644
--- a/console/src/components/Viewer/ImageGrayscaleViewer.tsx
+++ b/console/src/components/Viewer/ImageGrayscaleViewer.tsx
@@ -39,6 +39,8 @@ export default function ImageGrayscaleViewer({ isZoom = false, data }: IImageVie
         <div className='dataset-viewer image-grayscale fullsize'>
             <ZoomWrapper>
                 <canvas
+                    width={500}
+                    height={500}
                     ref={canvasRef}
                     style={{
                         zIndex: 1,
diff --git a/console/src/components/Viewer/ZoomWrapper.tsx b/console/src/components/Viewer/ZoomWrapper.tsx
index ddce28aedf..c4511fe304 100644
--- a/console/src/components/Viewer/ZoomWrapper.tsx
+++ b/console/src/components/Viewer/ZoomWrapper.tsx
@@ -1,6 +1,6 @@
+import Button from '@starwhale/ui/Button'
 import React from 'react'
 import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
-import { Button } from '@/components/Button'
 
 export default function ZoomWrapper({ children, isTools }: any) {
     return (
@@ -12,6 +12,7 @@ export default function ZoomWrapper({ children, isTools }: any) {
             maxScale={10}
             minScale={0.5}
         >
+            {/* eslint-disable-next-line @typescript-eslint/no-unused-vars */}
             {({ zoomIn, zoomOut, resetTransform, centerView }) => (
                 <>
                     {isTools && (
diff --git a/console/src/pages/Dataset/DatasetVersionOverviewFilePreview.tsx b/console/src/pages/Dataset/DatasetVersionOverviewFilePreview.tsx
index c28ab7a3e5..fafc13d610 100644
--- a/console/src/pages/Dataset/DatasetVersionOverviewFilePreview.tsx
+++ b/console/src/pages/Dataset/DatasetVersionOverviewFilePreview.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import Button from '@/components/Button'
 import DatasetViewer from '@/components/Viewer/DatasetViewer'
 import { Tabs, Tab } from 'baseui/tabs'
+import { Modal, ModalBody, ModalFooter, ModalHeader } from 'baseui/modal'
 import { createUseStyles } from 'react-jss'
-import useTranslation from '../../hooks/useTranslation'
 import IconFont from '../../components/IconFont/index'
 import { DatasetObject } from '../../domain/dataset/sdk'
 import { RAW_COLORS } from '../../components/Viewer/utils'
@@ -40,6 +40,9 @@ const useStyles = createUseStyles({
         position: 'relative',
         display: 'flex',
         flexDirection: 'column',
+        marginTop: 0,
+        marginBottom: 0,
+        border: '1px solid #CFD7E6',
     },
     layoutFullscreen: {
         position: 'fixed',
@@ -50,13 +53,6 @@ const useStyles = createUseStyles({
         top: 0,
         zIndex: 20,
     },
-    exitFullscreen: {
-        height: '56px',
-        paddingLeft: '24px',
-        display: 'flex',
-        alignItems: 'center',
-        borderBottom: '1px solid #E2E7F0',
-    },
     wrapper: {
         minHeight: '500px',
         height: '100%',
@@ -122,7 +118,6 @@ export default function DatasetVersionFilePreview({
     }, [datasets, fileId])
 
     const styles = useStyles()
-    const [t] = useTranslation()
     const [activeKey, setActiveKey] = React.useState('0')
     const [hiddenLabels, setHiddenLabels] = React.useState<Set<number>>(new Set())
 
@@ -139,6 +134,7 @@ export default function DatasetVersionFilePreview({
                 />
             )
         }
+        if (!data?.summary || Object.keys(data?.summary).length === 0) return undefined
 
         // eslint-disable-next-line @typescript-eslint/no-use-before-define
         return <Summary data={data?.summary ?? {}} />
@@ -147,33 +143,49 @@ export default function DatasetVersionFilePreview({
     if (!isFullscreen) return <></>
 
     return (
-        <div className={isFullscreen ? styles.layoutFullscreen : styles.layoutNormal}>
-            {isFullscreen && (
-                <div className={styles.exitFullscreen}>
-                    <Button
-                        as='link'
-                        startEnhancer={() => <IconFont type='close' />}
-                        onClick={() => setIsFullscreen(false)}
-                    >
-                        {t('Exit Fullscreen')}
-                    </Button>
-                </div>
-            )}
-            <div className={styles.wrapper}>
-                <div className={styles.panel}>{Panel}</div>
-                <div className={styles.card}>
-                    <div
-                        role='button'
-                        tabIndex={0}
-                        className={styles.cardFullscreen}
-                        onClick={() => setIsFullscreen((v: boolean) => !v)}
-                    >
-                        <IconFont type='fullscreen' />
+        <Modal
+            isOpen={isFullscreen}
+            onClose={() => setIsFullscreen(false)}
+            closeable
+            animate
+            autoFocus
+            overrides={{
+                Dialog: {
+                    style: {
+                        width: '90vw',
+                        maxWidth: '1200px',
+                        maxHeight: '640px',
+                        display: 'flex',
+                        flexDirection: 'column',
+                    },
+                },
+            }}
+        >
+            <ModalHeader />
+            <ModalBody
+                style={{ display: 'flex', gap: '30px', flex: 1, overflow: 'auto' }}
+                className={styles.layoutNormal}
+            >
+                <div className={styles.wrapper}>
+                    {Panel && <div className={styles.panel}>{Panel}</div>}
+                    <div className={styles.card}>
+                        {!isFullscreen && (
+                            <div
+                                role='button'
+                                tabIndex={0}
+                                className={styles.cardFullscreen}
+                                onClick={() => setIsFullscreen((v: boolean) => !v)}
+                            >
+                                <IconFont type='fullscreen' />
+                            </div>
+                        )}
+
+                        <DatasetViewer data={data} isZoom hiddenLabels={hiddenLabels} />
                     </div>
-                    <DatasetViewer data={data} isZoom hiddenLabels={hiddenLabels} />
                 </div>
-            </div>
-        </div>
+            </ModalBody>
+            <ModalFooter />
+        </Modal>
     )
 }
 
diff --git a/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx b/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx
index 9e176ccef3..0dd32af02d 100644
--- a/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx
+++ b/console/src/pages/Dataset/DatasetVersionOverviewFiles.tsx
@@ -92,8 +92,8 @@ const PAGE_TABLE_SIZE = 10
 const PAGE_CARD_SIZE = 50
 
 enum LAYOUT {
-    GRID = '0',
-    LIST = '1',
+    GRID = '1',
+    LIST = '0',
 }
 
 function LayoutControl({ value, onChange = () => {} }: { value: string; onChange: (str: string) => void }) {
@@ -141,8 +141,8 @@ function LayoutControl({ value, onChange = () => {} }: { value: string; onChange
                 }}
                 activeKey={value}
             >
-                <Tab title={<IconFont type='grid' />} />
-                <Tab title={<IconFont type='view' />} />
+                <Tab title={<IconFont type='grid' />} key={LAYOUT.GRID} />
+                <Tab title={<IconFont type='view' />} key={LAYOUT.LIST} />
             </Tabs>
         </div>
     )
@@ -156,7 +156,7 @@ export default function DatasetVersionFiles() {
     }>()
     // @FIXME layoutParam missing when build
     const layoutParam = useSearchParam('layout') as string
-    const [layoutKey, setLayoutKey] = React.useState(layoutParam ?? '1')
+    const [layoutKey, setLayoutKey] = React.useState(layoutParam ?? '0')
     const [page, setPage] = usePage()
     const { token } = useAuth()
     const history = useHistory()
@@ -172,6 +172,10 @@ export default function DatasetVersionFiles() {
         }
     }, [page, layoutKey])
 
+    React.useEffect(() => {
+        setLayoutKey(layoutParam ?? '0')
+    }, [layoutParam])
+
     const tables = useQueryDatasetList(datasetVersion?.indexTable, $page, true)
 
     const rowCount = React.useMemo(() => {
@@ -206,7 +210,6 @@ export default function DatasetVersionFiles() {
     )
 
     const Records = React.useMemo(() => {
-        // if (fileId || !tables.data) return <></>
         const { summary = {} } = datasets?.[0] ?? {}
 
         const rowAction = [
@@ -237,7 +240,10 @@ export default function DatasetVersionFiles() {
 
                     switch (row.type) {
                         case TYPES.IMAGE:
-                            wrapperStyle = { minHeight: '90px', maxWidth: '100px' }
+                            wrapperStyle = {
+                                minHeight: '90px',
+                                maxWidth: layoutKey === LAYOUT.GRID ? undefined : '100px',
+                            }
                             break
                         case TYPES.AUDIO:
                             wrapperStyle = { minHeight: '90px' }
@@ -296,7 +302,7 @@ export default function DatasetVersionFiles() {
                     style={{
                         display: 'grid',
                         gap: '9px',
-                        gridTemplateColumns: 'repeat(auto-fit, minmax(161px, 200px))',
+                        gridTemplateColumns: 'repeat(auto-fit, minmax(161px, 1fr))',
                         placeItems: 'center',
                     }}
                 >
diff --git a/console/tsconfig.base.json b/console/tsconfig.base.json
index eac3ac0489..5296b026af 100644
--- a/console/tsconfig.base.json
+++ b/console/tsconfig.base.json
@@ -37,8 +37,9 @@
     "src/stories",
     "**/iconfont.js",
     "baseui/helpers/overrides",
-    "node_modules/baseui/helpers/**",
-    "node_modules/baseui/helpers/overrides.js",
-    "**/__generated__/**"
+    "**/node_modules/**",
+    "**/__generated__/**",
+    "**/build/**"
+
   ]
 }