revised as requested

client/src/components/grid/LoadingTable.tsx

@@ -24,7 +24,6 @@ const getStyles = makeStyles((theme: Theme) => ({
 const LoadingTable = (props: { wrapperClass?: string; count: number }) => {
   const { wrapperClass = '', count } = props;
   const classes = getStyles();
-  //TODO(wenyi): There is a bug here, count is always -1, so returns Error: Invalid array length
   const rows = Array(count).fill(1);
 
   return (

client/src/components/grid/Table.tsx

@@ -135,17 +135,22 @@ const EnhancedTable: FC<TableType> = props => {
   const classes = useStyles({ tableCellMaxWidth });
   const [loadingRowCount, setLoadingRowCount] = useState<number>(0);
 
-  const containerRef = useRef(null);
+  const containerRef = useRef<HTMLDivElement | null>(null);
 
   const { t: commonTrans } = useTranslation();
   const copyTrans = commonTrans('copy');
 
   useEffect(() => {
-    const height: number = (containerRef.current as any)!.offsetHeight;
+    // if the type of containerRef is null, set height 57px.
+    let height: number = containerRef.current?.offsetHeight || 57;
+    // table header is 57px. If offsetHeight is smaller than 57px (this might happen when users resize the screen), the count will be negative and will cause an error.
+    if (height < 57) {
+      height = 57;
+    }
     // table header 57px, loading row 40px
-    const count = Math.floor((height - 57) / 40);
+    let count = Math.floor((height - 57) / 40);
     setLoadingRowCount(count);
-  }, []);
+  }, [containerRef]);
 
   useEffect(() => {
     if (setPageSize) {
@@ -167,7 +172,12 @@ const EnhancedTable: FC<TableType> = props => {
   }, [setPageSize]);
 
   return (
-    <TableContainer ref={containerRef} className={classes.root}>
+    <TableContainer
+      ref={el => {
+        containerRef.current = el;
+      }}
+      className={classes.root}
+    >
       <Box height="100%" className={classes.box}>
         <Table
           stickyHeader
@@ -320,7 +330,6 @@ const EnhancedTable: FC<TableType> = props => {
             </TableBody>
           )}
         </Table>
-        {/* TODO(wenyi): loadingRowCount wrong here*/}
         {isLoading && <LoadingTable count={loadingRowCount} />}
       </Box>
     </TableContainer>

client/src/plugins/search/SearchParams.tsx

@@ -266,7 +266,6 @@ const SearchParams: FC<SearchParamsProps> = ({
         variant="filled"
         onChange={(e: { target: { value: unknown } }) => {
           const metricType = e.target.value as string;
-          console.log('metricType', metricType);
           handleMetricTypeChange(metricType);
         }}
       />

client/src/plugins/search/VectorSearch.tsx

@@ -52,7 +52,6 @@ const VectorSearch = () => {
   const [tableLoading, setTableLoading] = useState<boolean>(false);
   const [collections, setCollections] = useState<CollectionData[]>([]);
   const [selectedCollection, setSelectedCollection] = useState<string>('');
-  const [selectedMetricType, setSelectedMetricType] = useState<string>('');
   const [fieldOptions, setFieldOptions] = useState<FieldOption[]>([]);
   // fields for advanced filter
   const [filterFields, setFilterFields] = useState<Field[]>([]);
@@ -166,7 +165,6 @@ const VectorSearch = () => {
         selectedFieldDimension: dim,
       };
     }
-
     return {
       metricType: '',
       indexType: '',
@@ -176,6 +174,8 @@ const VectorSearch = () => {
       selectedFieldDimension: 0,
     };
   }, [selectedField, fieldOptions]);
+  const [selectedMetricType, setSelectedMetricType] =
+    useState<string>(metricType);
 
   /**
    * vector value validation
@@ -303,7 +303,7 @@ const VectorSearch = () => {
       params: JSON.stringify(searchParam),
       anns_field: selectedField,
       topk: topK,
-      metric_type: selectedMetricType || metricType,
+      metric_type: selectedMetricType,
       round_decimal: searchParam.round_decimal,
     };
 
@@ -426,7 +426,7 @@ const VectorSearch = () => {
           <Typography className="text">{searchTrans('thirdTip')}</Typography>
           <SearchParams
             wrapperClass={classes.paramsWrapper}
-            metricType={selectedMetricType || metricType!}
+            metricType={selectedMetricType}
             embeddingType={
               embeddingType as
                 | DataTypeEnum.BinaryVector