Merge pull request #64 from iynewz/issue-56

[Issue 56] add IP param to metric type

client/src/components/grid/Table.tsx

@@ -46,6 +46,7 @@ const useStyles = makeStyles(theme => ({
   },
   table: {
     minWidth: 750,
+    minHeight: 57,
   },
   tableCell: {
     background: theme.palette.common.white,
@@ -135,17 +136,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 +173,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 +331,6 @@ const EnhancedTable: FC<TableType> = props => {
             </TableBody>
           )}
         </Table>
-
         {isLoading && <LoadingTable count={loadingRowCount} />}
       </Box>
     </TableContainer>

client/src/plugins/search/SearchParams.tsx

@@ -39,6 +39,7 @@ const SearchParams: FC<SearchParamsProps> = ({
   indexParams,
   searchParamsForm,
   handleFormChange,
+  handleMetricTypeChange,
   embeddingType,
   metricType,
   topK,
@@ -264,11 +265,9 @@ const SearchParams: FC<SearchParamsProps> = ({
         wrapperClass={classes.selector}
         variant="filled"
         onChange={(e: { target: { value: unknown } }) => {
-          // not selectable now, so not set onChange event
+          const metricType = e.target.value as string;
+          handleMetricTypeChange(metricType);
         }}
-        // not selectable now
-        // readOnly can't avoid all events, so we use disabled instead
-        disabled={true}
       />
       <div className={classes.inlineInputWrapper}>
         {/* dynamic params, now every type only has one param except metric type */}

client/src/plugins/search/Types.ts

@@ -21,6 +21,7 @@ export interface SearchParamsProps {
   };
   topK: number;
   handleFormChange: (form: { [key in string]: number }) => void;
+  handleMetricTypeChange: (type: string) => void;
   wrapperClass?: string;
   setParamsDisabled: (isDisabled: boolean) => void;
 }

client/src/plugins/search/VectorSearch.tsx

@@ -162,7 +162,6 @@ const VectorSearch = () => {
         selectedFieldDimension: dim,
       };
     }
-
     return {
       metricType: '',
       indexType: '',
@@ -172,6 +171,8 @@ const VectorSearch = () => {
       selectedFieldDimension: 0,
     };
   }, [selectedField, fieldOptions]);
+  const [selectedMetricType, setSelectedMetricType] =
+    useState<string>(metricType);
 
   /**
    * vector value validation
@@ -299,7 +300,7 @@ const VectorSearch = () => {
       params: JSON.stringify(searchParam),
       anns_field: selectedField,
       topk: topK,
-      metric_type: metricType,
+      metric_type: selectedMetricType,
       round_decimal: searchParam.round_decimal,
     };
 
@@ -422,7 +423,7 @@ const VectorSearch = () => {
           <Typography className="text">{searchTrans('thirdTip')}</Typography>
           <SearchParams
             wrapperClass={classes.paramsWrapper}
-            metricType={metricType!}
+            metricType={selectedMetricType}
             embeddingType={
               embeddingType as
                 | DataTypeEnum.BinaryVector
@@ -432,6 +433,7 @@ const VectorSearch = () => {
             indexParams={indexParams!}
             searchParamsForm={searchParam}
             handleFormChange={setSearchParam}
+            handleMetricTypeChange={setSelectedMetricType}
             topK={topK}
             setParamsDisabled={setParamDisabled}
           />