fix: automatically update the page when scrolling

src/pages/llmodels/components/instance-item.tsx

@@ -221,7 +221,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="cyan"
                           style={{
-                            opacity: 0.75
+                            opacity: 0.75,
+                            borderRadius: 12
                           }}
                         >
                           <InfoCircleOutlined className="m-r-5" />
@@ -241,7 +242,8 @@ const InstanceItem: React.FC<InstanceItemProps> = ({
                         <Tag
                           color="processing"
                           style={{
-                            opacity: 0.75
+                            opacity: 0.75,
+                            borderRadius: 12
                           }}
                         >
                           <InfoCircleOutlined className="m-r-5" />

src/pages/llmodels/components/table-list.tsx

@@ -30,7 +30,7 @@ import { Access, useAccess, useIntl, useNavigate } from '@umijs/max';
 import { Button, Dropdown, Input, Space, Tag, message } from 'antd';
 import dayjs from 'dayjs';
 import _ from 'lodash';
-import { memo, useCallback, useRef, useState } from 'react';
+import { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { useHotkeys } from 'react-hotkeys-hook';
 import {
   MODELS_API,
@@ -66,6 +66,7 @@ interface ModelsProps {
     perPage: number;
     query?: string;
   };
+  deleteIds?: number[];
   gpuDeviceList: GPUDeviceItem[];
   workerList: WorkerListItem[];
   dataSource: ListItem[];
@@ -111,6 +112,7 @@ const Models: React.FC<ModelsProps> = ({
   handleDeleteSuccess,
   onViewLogs,
   onCancelViewLogs,
+  deleteIds,
   dataSource,
   gpuDeviceList,
   workerList,
@@ -211,6 +213,12 @@ const Models: React.FC<ModelsProps> = ({
     }
   );
 
+  useEffect(() => {
+    if (deleteIds?.length) {
+      rowSelection.removeSelectedKey(deleteIds);
+    }
+  }, [deleteIds]);
+
   const sourceOptions = [
     {
       label: 'Hugging Face',

src/pages/llmodels/components/view-logs-modal.tsx

@@ -35,6 +35,7 @@ const ViewCodeModal: React.FC<ViewModalProps> = (props) => {
 
   const updateHandler = (list: any) => {
     const data = list?.find((item: any) => item.data?.id === props.id);
+    // state in InstanceRealLogStatus will not enable scorll load, because it is in the trasisition state
     if (data) {
       setEnableScorllLoad(
         () => !InstanceRealLogStatus.includes(data?.data?.state)

src/pages/llmodels/index.tsx

@@ -19,10 +19,12 @@ const Models: React.FC = () => {
   const [modelInstances, setModelInstances] = useState<any[]>([]);
   const [dataSource, setDataSource] = useState<{
     dataList: ListItem[];
+    deletedIds: number[];
     loading: boolean;
     total: number;
   }>({
     dataList: [],
+    deletedIds: [],
     loading: false,
     total: 0
   });
@@ -39,18 +41,20 @@ const Models: React.FC = () => {
     search: ''
   });
 
-  const { updateChunkedList, cacheDataListRef } = useUpdateChunkedList({
-    dataList: dataSource.dataList,
-    setDataList(list) {
-      setDataSource((pre) => {
-        return {
-          total: pre.total,
-          loading: false,
-          dataList: list
-        };
-      });
-    }
-  });
+  const { updateChunkedList, cacheDataListRef, deletedIdsRef } =
+    useUpdateChunkedList({
+      dataList: dataSource.dataList,
+      setDataList(list, opts?: any) {
+        setDataSource((pre) => {
+          return {
+            total: pre.total,
+            loading: false,
+            dataList: list,
+            deletedIds: opts?.deletedIds || []
+          };
+        });
+      }
+    });
 
   const getWorkerList = async () => {
     try {
@@ -79,21 +83,23 @@ const Models: React.FC = () => {
       setDataSource({
         dataList: res.items || [],
         loading: false,
-        total: res.pagination.total
+        total: res.pagination.total,
+        deletedIds: []
       });
     } catch (error) {
       if (!isPageHidden.current) {
         setDataSource({
           dataList: [],
           loading: false,
-          total: dataSource.total
+          total: dataSource.total,
+          deletedIds: []
         });
       }
       console.log('error+++', error);
     } finally {
       setFirstLoad(false);
     }
-  }, [queryParams, firstLoad]);
+  }, [queryParams]);
 
   const handlePageChange = useCallback(
     (page: number, pageSize: number | undefined) => {
@@ -110,6 +116,8 @@ const Models: React.FC = () => {
     _.each(list, (data: any) => {
       updateChunkedList(data);
     });
+
+    console.log('deletedIdsRef=======', deletedIdsRef.current);
   };
 
   const updateInstanceHandler = (list: any) => {
@@ -143,22 +151,10 @@ const Models: React.FC = () => {
     }
   }, []);
 
-  const handleSearch = useCallback(
-    (e: any) => {
-      fetchData();
-    },
-    [fetchData]
-  );
-
-  const handleNameChange = useCallback(
-    (e: any) => {
-      setQueryParams({
-        ...queryParams,
-        search: e.target.value
-      });
-    },
-    [queryParams]
-  );
+  const getList = async () => {
+    await fetchData();
+    await createModelsChunkRequest();
+  };
 
   const handleOnViewLogs = useCallback(() => {
     isPageHidden.current = true;
@@ -178,8 +174,24 @@ const Models: React.FC = () => {
     }, 100);
   }, [fetchData, createModelsChunkRequest, createModelsInstanceChunkRequest]);
 
+  const handleSearch = useCallback(
+    async (e: any) => {
+      await fetchData();
+    },
+    [fetchData]
+  );
+
+  const debounceUpdateFilter = _.debounce((e: any) => {
+    setQueryParams({
+      ...queryParams,
+      search: e.target.value
+    });
+  }, 350);
+
+  const handleNameChange = useCallback(debounceUpdateFilter, [queryParams]);
+
   useEffect(() => {
-    fetchData();
+    getList();
     return () => {
       axiosToken?.cancel?.();
     };
@@ -187,6 +199,7 @@ const Models: React.FC = () => {
 
   useEffect(() => {
     getWorkerList();
+    createModelsInstanceChunkRequest();
 
     return () => {
       chunkRequedtRef.current?.current?.cancel?.();
@@ -195,15 +208,6 @@ const Models: React.FC = () => {
     };
   }, []);
 
-  useEffect(() => {
-    if (!firstLoad) {
-      setTimeout(() => {
-        createModelsChunkRequest();
-        createModelsInstanceChunkRequest();
-      }, 100);
-    }
-  }, [firstLoad]);
-
   useEffect(() => {
     const handleVisibilityChange = async () => {
       if (document.visibilityState === 'visible') {
@@ -245,6 +249,7 @@ const Models: React.FC = () => {
         queryParams={queryParams}
         loading={dataSource.loading}
         total={dataSource.total}
+        deleteIds={dataSource.deletedIds}
         gpuDeviceList={gpuDeviceList}
         workerList={workerList}
       ></TableList>