add IP param

client/src/components/grid/LoadingTable.tsx

@@ -24,6 +24,7 @@ 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

@@ -320,7 +320,7 @@ const EnhancedTable: FC<TableType> = props => {
             </TableBody>
           )}
         </Table>
-
+        {/* TODO(wenyi): loadingRowCount wrong here*/}
         {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,10 @@ 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;
+          console.log('metricType', metricType);
+          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

@@ -52,6 +52,7 @@ 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[]>([]);
@@ -302,7 +303,7 @@ const VectorSearch = () => {
       params: JSON.stringify(searchParam),
       anns_field: selectedField,
       topk: topK,
-      metric_type: metricType,
+      metric_type: selectedMetricType || metricType,
       round_decimal: searchParam.round_decimal,
     };
 
@@ -425,7 +426,7 @@ const VectorSearch = () => {
           <Typography className="text">{searchTrans('thirdTip')}</Typography>
           <SearchParams
             wrapperClass={classes.paramsWrapper}
-            metricType={metricType!}
+            metricType={selectedMetricType || metricType!}
             embeddingType={
               embeddingType as
                 | DataTypeEnum.BinaryVector
@@ -435,6 +436,7 @@ const VectorSearch = () => {
             indexParams={indexParams!}
             searchParamsForm={searchParam}
             handleFormChange={setSearchParam}
+            handleMetricTypeChange={setSelectedMetricType}
             topK={topK}
             setParamsDisabled={setParamDisabled}
           />