better search page (#142)

client/src/i18n/cn/button.ts

@@ -21,7 +21,8 @@ const btnTrans = {
   query: 'Query',
   importSampleData: 'Import Sample data',
   loading: 'Loading...',
-  importing: 'Importing...'
+  importing: 'Importing...',
+  example: 'Example',
 };
 
 export default btnTrans;

client/src/i18n/cn/search.ts

@@ -1,5 +1,5 @@
 const searchTrans = {
-  firstTip: '1. Enter vector value {{dimensionTip}}',
+  firstTip: '1. Enter search vector {{dimensionTip}}',
   secondTip: '2. Choose collection and field',
   thirdTip: '3. Set search parameters',
   vectorPlaceholder: 'Please input your vector value here, e.g. [1, 2, 3, 4]',

client/src/i18n/en/button.ts

@@ -21,7 +21,8 @@ const btnTrans = {
   query: 'Query',
   importSampleData: 'Import Sample data',
   loading: 'Loading...',
-  importing: 'Importing...'
+  importing: 'Importing...',
+  example: 'Example',
 };
 
 export default btnTrans;

client/src/i18n/en/search.ts

@@ -1,6 +1,6 @@
 const searchTrans = {
-  firstTip: '1. Enter vector value {{dimensionTip}}',
-  secondTip: '2. Choose collection and field',
+  firstTip: '2. Enter search vector {{dimensionTip}}',
+  secondTip: '1. Choose collection and field',
   thirdTip: '3. Set search parameters',
   vectorPlaceholder: 'Please input your vector value here, e.g. [1, 2, 3, 4]',
   collection: 'Choose Collection',

client/src/pages/search/SearchParams.tsx

@@ -20,13 +20,12 @@ import { SearchParamInputConfig, SearchParamsProps } from './Types';
 const getStyles = makeStyles((theme: Theme) => ({
   selector: {
     width: '100%',
-    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   input: {
-    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   inlineInput: {
-    marginTop: theme.spacing(2),
     width: '48%',
   },
   inlineInputWrapper: {

client/src/pages/search/Styles.ts

@@ -8,9 +8,8 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     '& .field': {
       display: 'flex',
       flexDirection: 'column',
-      flexBasis: '33%',
-
-      padding: theme.spacing(2, 3, 4),
+      width: 250,
+      padding: theme.spacing(2),
       backgroundColor: '#fff',
       borderRadius: theme.spacing(0.5),
       boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
@@ -18,17 +17,16 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
       '& .textarea': {
         border: `1px solid ${theme.palette.attuGrey.main}`,
         borderRadius: theme.spacing(0.5),
-        padding: theme.spacing(1),
-        paddingBottom: '18px',
-        marginTop: theme.spacing(2),
+        padding: theme.spacing(0, 1),
+        marginBottom: theme.spacing(0.5),
       },
 
       // reset default style
       '& .textfield': {
-        padding: 0,
         fontSize: '14px',
         lineHeight: '20px',
         fontWeight: 400,
+        height: '128px',
 
         '&::before': {
           borderBottom: 'none',
@@ -61,6 +59,7 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
 
     '& .field-second': {
       flexGrow: 1,
+      flexBasis: '50%',
       margin: theme.spacing(0, 1),
     },
 
@@ -68,16 +67,25 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     // if still set padding-bottom, the whole form space will be stretched
     '& .field-params': {
       paddingBottom: 0,
+      width: 390,
     },
 
     '& .text': {
       color: theme.palette.attuGrey.dark,
       fontWeight: 500,
+      marginBottom: theme.spacing(1),
+      height: theme.spacing(4),
+      '& button': {
+        marginLeft: '8px',
+        position: 'relative',
+        top: -5,
+        verticalAlign: 'top',
+      },
     },
   },
   selector: {
     width: '100%',
-    marginTop: theme.spacing(2),
+    marginBottom: theme.spacing(2),
   },
   paramsWrapper: {
     display: 'flex',
@@ -123,7 +131,6 @@ export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
     color: theme.palette.attuGrey.dark,
   },
   error: {
-    marginTop: theme.spacing(1),
     color: theme.palette.error.main,
   },
 }));

client/src/pages/search/VectorSearch.tsx

@@ -1,4 +1,4 @@
-import { TextField, Typography } from '@material-ui/core';
+import { TextField, Typography, Button } from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { useNavigationHook } from '../../hooks/Navigation';
 import { ALL_ROUTER_TYPES } from '../../router/Types';
@@ -33,7 +33,7 @@ import Filter from '../../components/advancedSearch';
 import { Field } from '../../components/advancedSearch/Types';
 import { useLocation } from 'react-router-dom';
 import { parseLocationSearch } from '../../utils/Format';
-import { cloneObj } from '../../utils/Common';
+import { cloneObj, generateVector } from '../../utils/Common';
 import { CustomDatePicker } from '../../components/customDatePicker/CustomDatePicker';
 import { useTimeTravelHook } from '../../hooks/TimeTravel';
 
@@ -135,8 +135,10 @@ const VectorSearch = () => {
           }))
       : [];
   }, [searchResult, primaryKeyField]);
+
+  const [selectedMetricType, setSelectedMetricType] = useState<string>('');
+
   const {
-    metricType,
     indexType,
     indexParams,
     fieldType,
@@ -154,6 +156,8 @@ const VectorSearch = () => {
         index?._metricType || DEFAULT_METRIC_VALUE_MAP[embeddingType];
       const indexParams = index?._indexParameterPairs || [];
       const dim = selectedFieldInfo?.dimension || 0;
+      setSelectedMetricType(metric);
+
       return {
         metricType: metric,
         indexType: index?._indexType || getDefaultIndexType(embeddingType),
@@ -163,8 +167,8 @@ const VectorSearch = () => {
         selectedFieldDimension: dim,
       };
     }
+
     return {
-      metricType: '',
       indexType: '',
       indexParams: [],
       fieldType: 0,
@@ -172,8 +176,6 @@ const VectorSearch = () => {
       selectedFieldDimension: 0,
     };
   }, [selectedField, fieldOptions]);
-  const [selectedMetricType, setSelectedMetricType] =
-    useState<string>(metricType);
 
   /**
    * vector value validation
@@ -341,15 +343,55 @@ const VectorSearch = () => {
     setVectors(value);
   };
 
+  const fillWithExampleVector = (selectedFieldDimension: number) => {
+    const v = generateVector(selectedFieldDimension);
+    setVectors(`[${v}]`);
+  };
+
   return (
     <section className="page-wrapper">
       {/* form section */}
       <form className={classes.form}>
+        {/* collection and field selectors */}
+        <fieldset className="field">
+          <Typography className="text">{searchTrans('secondTip')}</Typography>
+          <CustomSelector
+            options={collectionOptions}
+            wrapperClass={classes.selector}
+            variant="filled"
+            label={searchTrans(
+              collectionOptions.length === 0 ? 'noCollection' : 'collection'
+            )}
+            disabled={collectionOptions.length === 0}
+            value={selectedCollection}
+            onChange={(e: { target: { value: unknown } }) => {
+              const collection = e.target.value;
+
+              setSelectedCollection(collection as string);
+              // every time selected collection changed, reset field
+              setSelectedField('');
+              setSearchResult([]);
+            }}
+          />
+          <CustomSelector
+            options={fieldOptions}
+            // readOnly can't avoid all events, so we use disabled instead
+            disabled={selectedCollection === ''}
+            wrapperClass={classes.selector}
+            variant="filled"
+            label={searchTrans('field')}
+            value={selectedField}
+            onChange={(e: { target: { value: unknown } }) => {
+              const field = e.target.value;
+              setSelectedField(field as string);
+            }}
+          />
+        </fieldset>
         {/**
          * vector value textarea
          * use field-params class because it also has error msg if invalid
          */}
-        <fieldset className="field field-params">
+        <fieldset className="field field-params field-second">
           <Typography className="text">
             {searchTrans('firstTip', {
               dimensionTip:
@@ -357,7 +399,23 @@ const VectorSearch = () => {
                   ? `(dimension: ${selectedFieldDimension})`
                   : '',
             })}
+            {selectedFieldDimension !== 0 ? (
+              <Button
+                variant="outlined"
+                size="small"
+                onClick={() => {
+                  const dim =
+                    fieldType === DataTypeEnum.BinaryVector
+                      ? selectedFieldDimension / 8
+                      : selectedFieldDimension;
+                  fillWithExampleVector(dim);
+                }}
+              >
+                {btnTrans('example')}
+              </Button>
+            ) : null}
           </Typography>
+
           <TextField
             className="textarea"
             InputProps={{
@@ -386,41 +444,7 @@ const VectorSearch = () => {
             </Typography>
           )}
         </fieldset>
-        {/* collection and field selectors */}
-        <fieldset className="field field-second">
-          <Typography className="text">{searchTrans('secondTip')}</Typography>
-          <CustomSelector
-            options={collectionOptions}
-            wrapperClass={classes.selector}
-            variant="filled"
-            label={searchTrans(
-              collectionOptions.length === 0 ? 'noCollection' : 'collection'
-            )}
-            disabled={collectionOptions.length === 0}
-            value={selectedCollection}
-            onChange={(e: { target: { value: unknown } }) => {
-              const collection = e.target.value;
 
-              setSelectedCollection(collection as string);
-              // every time selected collection changed, reset field
-              setSelectedField('');
-              setSearchResult([]);
-            }}
-          />
-          <CustomSelector
-            options={fieldOptions}
-            // readOnly can't avoid all events, so we use disabled instead
-            disabled={selectedCollection === ''}
-            wrapperClass={classes.selector}
-            variant="filled"
-            label={searchTrans('field')}
-            value={selectedField}
-            onChange={(e: { target: { value: unknown } }) => {
-              const field = e.target.value;
-              setSelectedField(field as string);
-            }}
-          />
-        </fieldset>
         {/* search params selectors */}
         <fieldset className="field field-params">
           <Typography className="text">{searchTrans('thirdTip')}</Typography>