update(console): table list content same with viewport to avoid scrol…

…l be blocking, add useCached hook (#2494)

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

@@ -4,53 +4,7 @@ import { RecordListSchemaT, RecordSchemaT } from '../types'
 import { SwType } from '../model'
 import _ from 'lodash'
 import { DataTypes } from '../constants'
-
-class LRUCache<Key, Value> {
-    private maxSize: number
-
-    private cache: Map<Key, Value>
-
-    private accessedKeys: Set<Key>
-
-    constructor(maxSize: number) {
-        this.maxSize = maxSize
-        this.cache = new Map<Key, Value>()
-        this.accessedKeys = new Set<Key>()
-    }
-
-    has(key: Key): boolean {
-        return this.cache.has(key)
-    }
-
-    get(key: Key): Value | undefined {
-        if (this.cache.has(key)) {
-            // Move the key to the front of the accessedKeys set
-            this.accessedKeys.delete(key)
-            this.accessedKeys.add(key)
-            return this.cache.get(key)
-        }
-        return undefined
-    }
-
-    put(key: Key, value: Value) {
-        if (this.cache.has(key)) {
-            // Move the key to the front of the accessedKeys set
-            this.accessedKeys.delete(key)
-            this.accessedKeys.add(key)
-            this.cache.set(key, value)
-        } else {
-            if (this.cache.size >= this.maxSize) {
-                // Remove the least recently used key from the cache and accessedKeys set
-                const lruKey = this.accessedKeys.values().next().value
-                this.accessedKeys.delete(lruKey)
-                this.cache.delete(lruKey)
-            }
-            // Add the new key to the front of the accessedKeys set
-            this.accessedKeys.add(key)
-            this.cache.set(key, value)
-        }
-    }
-}
+import { LRUCache } from '../utils'
 
 export function useDatastoreWithSchema(records: RecordListSchemaT, columnTypes: ColumnSchemaDesc[]) {
     const getSchema = React.useCallback(

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

@@ -110,3 +110,50 @@ export const isSearchColumns = (v: string) => {
 
     return true
 }
+
+export class LRUCache<Key, Value> {
+    private maxSize: number
+
+    private cache: Map<Key, Value>
+
+    private accessedKeys: Set<Key>
+
+    constructor(maxSize: number) {
+        this.maxSize = maxSize
+        this.cache = new Map<Key, Value>()
+        this.accessedKeys = new Set<Key>()
+    }
+
+    has(key: Key): boolean {
+        return this.cache.has(key)
+    }
+
+    get(key: Key): Value | undefined {
+        if (this.cache.has(key)) {
+            // Move the key to the front of the accessedKeys set
+            this.accessedKeys.delete(key)
+            this.accessedKeys.add(key)
+            return this.cache.get(key)
+        }
+        return undefined
+    }
+
+    put(key: Key, value: Value) {
+        if (this.cache.has(key)) {
+            // Move the key to the front of the accessedKeys set
+            this.accessedKeys.delete(key)
+            this.accessedKeys.add(key)
+            this.cache.set(key, value)
+        } else {
+            if (this.cache.size >= this.maxSize) {
+                // Remove the least recently used key from the cache and accessedKeys set
+                const lruKey = this.accessedKeys.values().next().value
+                this.accessedKeys.delete(lruKey)
+                this.cache.delete(lruKey)
+            }
+            // Add the new key to the front of the accessedKeys set
+            this.accessedKeys.add(key)
+            this.cache.set(key, value)
+        }
+    }
+}

console/packages/starwhale-core/src/utils/useCachedMap.tsx

@@ -0,0 +1,51 @@
+import React from 'react'
+import { useLocalStorage } from 'react-use'
+
+const defaultMap = {}
+const defaultKeys: any[] = []
+
+function useCachedMap(storeKey = 'cache', maxCacheSize = 100) {
+    const [cachedMap, setCachedMap] = useLocalStorage<Record<string, DOMRect>>(`cache-${storeKey}`, defaultMap)
+    const [cachedKeys, setCachedKeys] = useLocalStorage<string[]>(`cache-keys-${storeKey}`, defaultKeys)
+
+    const has = React.useCallback(
+        (key: string) => {
+            return cachedMap?.[key] !== undefined
+        },
+        [cachedMap]
+    )
+    const get = React.useCallback(
+        (key: string) => {
+            return cachedMap?.[key]
+        },
+        [cachedMap]
+    )
+    const put = React.useCallback(
+        (key: string, value: DOMRect) => {
+            if (!cachedMap || !cachedKeys) return
+
+            cachedMap[key] = value
+            if (cachedKeys.length > maxCacheSize) {
+                const first = cachedKeys.shift()
+                if (first) delete cachedMap[first]
+            } else {
+                cachedKeys.push(key)
+            }
+
+            setCachedMap({ ...cachedMap })
+            setCachedKeys([...cachedKeys])
+        },
+        [cachedMap, cachedKeys, maxCacheSize, setCachedMap, setCachedKeys]
+    )
+
+    return React.useMemo(() => {
+        return {
+            has,
+            get,
+            put,
+        }
+    }, [has, get, put])
+}
+
+export { useCachedMap }
+export default useCachedMap

console/src/components/Card/index.module.scss

@@ -7,18 +7,21 @@
     font-variant: tabular-nums;
     line-height: 1.5715;
     list-style: none;
-    -webkit-font-feature-settings: "tnum","tnum";
-    font-feature-settings: "tnum","tnum";
+    -webkit-font-feature-settings: 'tnum', 'tnum';
+    font-feature-settings: 'tnum', 'tnum';
     position: relative;
     border-radius: 2px;
-    -webkit-transition: transform 270ms cubic-bezier(0.1, 0.9, 0.2, 1),opacity 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0.05s,-webkit-transform 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
-    transition: transform 270ms cubic-bezier(0.1, 0.9, 0.2, 1),opacity 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0.05s,-webkit-transform 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
-    transform: translate3d(0,48px,0);
+    -webkit-transition: transform 270ms cubic-bezier(0.1, 0.9, 0.2, 1),
+        opacity 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0.05s, -webkit-transform 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
+    transition: transform 270ms cubic-bezier(0.1, 0.9, 0.2, 1), opacity 300ms cubic-bezier(0.1, 0.9, 0.2, 1) 0.05s,
+        -webkit-transform 300ms cubic-bezier(0.1, 0.9, 0.2, 1);
+    transform: translate3d(0, 48px, 0);
     transition-delay: 0.4s;
     margin-bottom: 10px;
     display: flex;
     border-radius: 8px;
     flex-direction: column;
+    overflow: hidden;
 
     .card {
         box-shadow: none;
@@ -29,7 +32,7 @@
     .card:nth-child(#{$i}) {
         transition-delay: 0.05s * ($i - 1);
     }
-  }
+}
 
 .cardHeadWrapper {
     // padding: 0 18px;
@@ -62,6 +65,7 @@
     flex: 1;
     display: flex;
     flex-direction: column;
+    overflow: auto;
 }
 
 .cardHeadTail {

console/src/components/Table/index.tsx

@@ -96,7 +96,7 @@ export default function Table({ isLoading, columns, data, overrides, paginationP
                     style={{
                         display: 'flex',
                         alignItems: 'center',
-                        marginTop: 20,
+                        marginTop: 5,
                     }}
                 >
                     <div

console/src/pages/BaseLayout.tsx

@@ -31,6 +31,7 @@ const useMainStyles = createUseStyles({
         display: 'flex',
         flexDirection: 'column',
         flexGrow: 1,
+        overflow: 'auto',
     },
 })
 

console/src/pages/Evaluation/EvaluationListCard.tsx

@@ -116,7 +116,11 @@ export default function EvaluationListCard() {
                 return CustomColumn<RecordAttr, any>({
                     ...column,
                     renderCell: ({ value }) => {
-                        return <span title={value.toString()}>{formatTimestampDateTime(value.value)}</span>
+                        return (
+                            <span className='line-clamp line-clamp-2' title={value.toString()}>
+                                {formatTimestampDateTime(value.value)}
+                            </span>
+                        )
                     },
                 })
             }