update vectorsearch page style

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>

client/src/i18n/en/button.ts

@@ -22,7 +22,7 @@ const btnTrans = {
   importSampleData: 'Import Sample data',
   loading: 'Loading...',
   importing: 'Importing...',
-  example: 'Example',
+  example: 'Generate random vector',
   rename: 'Rename',
 };
 

client/src/pages/search/Styles.ts

@@ -1,63 +1,64 @@
 import { makeStyles, Theme } from '@material-ui/core';
 
 export const getVectorSearchStyles = makeStyles((theme: Theme) => ({
+  pageContainer: {
+    display: 'flex',
+    flexDirection: 'column',
+  },
   form: {
     display: 'flex',
-    justifyContent: 'space-between',
+    flexDirection: 'row',
+    gap: theme.spacing(0),
 
-    '& .field': {
-      display: 'flex',
-      flexDirection: 'column',
-      width: 250,
-      padding: theme.spacing(2),
-      backgroundColor: '#fff',
+    '& textarea': {
+      border: `1px solid ${theme.palette.attuGrey.main}`,
       borderRadius: theme.spacing(0.5),
-      boxShadow: '3px 3px 10px rgba(0, 0, 0, 0.05)',
-
-      '& .textarea': {
-        border: `1px solid ${theme.palette.attuGrey.main}`,
-        borderRadius: theme.spacing(0.5),
-        padding: theme.spacing(0.5, 1),
-        marginBottom: theme.spacing(1),
-        overflow: 'scroll',
-        height: '120px',
-      },
-    },
-
-    '& .field-second': {
-      flexGrow: 1,
-      flexBasis: '50%',
-      margin: theme.spacing(0, 1),
-    },
-
-    // Textfield component has more bottom space to show error msg when validation
-    // if still set padding-bottom, the whole form space will be stretched
-    '& .field-params': {
-      paddingBottom: 0,
-      width: 390,
+      padding: theme.spacing(0.5, 1),
+      marginTop: theme.spacing(0),
+      overflow: 'scroll',
+      height: '130px',
+      maxWidth: '100%',
+      width: '100%',
+      display: 'block',
+      boxSizing: 'border-box',
     },
-
     '& .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',
-      },
+      marginBottom: theme.spacing(2),
+    },
+    height: '210px',
+    overflow: 'hidden',
+  },
+  s1: {
+    '& .MuiSelect-root': {
+      minWidth: '240px',
     },
   },
+  s2: {
+    minWidth: '600px',
+    position: 'relative',
+  },
+  s3: {
+    minWidth: '260px',
+  },
   selector: {
-    width: '100%',
+    display: 'block',
     marginBottom: theme.spacing(2),
   },
+  exampleBtn: {
+    right: theme.spacing(2),
+    top: theme.spacing(1.5),
+    position: 'absolute',
+  },
   paramsWrapper: {
     display: 'flex',
     flexDirection: 'column',
   },
+
+  resultsWrapper: {
+    display: 'flex',
+    flexDirection: 'column',
+    flexGrow: 1,
+  },
   toolbar: {
     display: 'flex',
     justifyContent: 'space-between',

client/src/pages/search/VectorSearch.tsx

@@ -1,5 +1,11 @@
 import { useCallback, useEffect, useMemo, useState, useContext } from 'react';
-import { Typography, Button } from '@material-ui/core';
+import {
+  Typography,
+  Button,
+  Card,
+  CardContent,
+  CardActionArea,
+} from '@material-ui/core';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { ALL_ROUTER_TYPES } from '@/router/Types';
@@ -371,11 +377,9 @@ const VectorSearch = () => {
   };
 
   return (
-    <section className="page-wrapper">
-      {/* form section */}
-      <form className={classes.form}>
-        {/* collection and field selectors */}
-        <fieldset className="field">
+    <section className={`page-wrapper ${classes.pageContainer}`}>
+      <Card className={classes.form}>
+        <CardContent className={classes.s1}>
           <Typography className="text">{searchTrans('secondTip')}</Typography>
           <CustomSelector
             options={collectionOptions}
@@ -408,12 +412,9 @@ const VectorSearch = () => {
               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 field-second">
+        </CardContent>
+
+        <CardContent className={classes.s2}>
           <Typography className="text">
             {searchTrans('firstTip', {
               dimensionTip:
@@ -423,6 +424,7 @@ const VectorSearch = () => {
             })}
             {selectedFieldDimension !== 0 ? (
               <Button
+                className={classes.exampleBtn}
                 variant="outlined"
                 size="small"
                 onClick={() => {
@@ -457,10 +459,9 @@ const VectorSearch = () => {
               })}
             </Typography>
           )}
-        </fieldset>
+        </CardContent>
 
-        {/* search params selectors */}
-        <fieldset className="field field-params">
+        <CardContent className={classes.s3}>
           <Typography className="text">{searchTrans('thirdTip')}</Typography>
           <SearchParams
             wrapperClass={classes.paramsWrapper}
@@ -478,97 +479,95 @@ const VectorSearch = () => {
             topK={topK}
             setParamsDisabled={setParamDisabled}
           />
-        </fieldset>
-      </form>
-
-      {/**
-       * search toolbar section
-       * including topK selector, advanced filter, search and reset btn
-       */}
-      <section className={classes.toolbar}>
-        <div className="left">
-          <Typography variant="h5" className="text">
-            {`${searchTrans('result')}: `}
-          </Typography>
-          {/* topK selector */}
-          <SimpleMenu
-            label={searchTrans('topK', { number: topK })}
-            menuItems={TOP_K_OPTIONS.map(item => ({
-              label: item.toString(),
-              callback: () => {
-                setTopK(item);
-                if (!searchDisabled) {
-                  handleSearch(item);
-                }
-              },
-              wrapperClass: classes.menuItem,
-            }))}
-            buttonProps={{
-              className: classes.menuLabel,
-              endIcon: <ArrowIcon />,
-            }}
-            menuItemWidth="108px"
-          />
-
-          <Filter
-            title="Advanced Filter"
-            fields={filterFields}
-            filterDisabled={selectedField === '' || selectedCollection === ''}
-            onSubmit={handleAdvancedFilterChange}
+        </CardContent>
+      </Card>
+
+      <section className={classes.resultsWrapper}>
+        <section className={classes.toolbar}>
+          <div className="left">
+            <Typography variant="h5" className="text">
+              {`${searchTrans('result')}: `}
+            </Typography>
+            {/* topK selector */}
+            <SimpleMenu
+              label={searchTrans('topK', { number: topK })}
+              menuItems={TOP_K_OPTIONS.map(item => ({
+                label: item.toString(),
+                callback: () => {
+                  setTopK(item);
+                  if (!searchDisabled) {
+                    handleSearch(item);
+                  }
+                },
+                wrapperClass: classes.menuItem,
+              }))}
+              buttonProps={{
+                className: classes.menuLabel,
+                endIcon: <ArrowIcon />,
+              }}
+              menuItemWidth="108px"
+            />
+
+            <Filter
+              title="Advanced Filter"
+              fields={filterFields}
+              filterDisabled={selectedField === '' || selectedCollection === ''}
+              onSubmit={handleAdvancedFilterChange}
+            />
+            <CustomDatePicker
+              label={timeTravelInfo.label}
+              onChange={handleDateTimeChange}
+              date={timeTravel}
+              setDate={setTimeTravel}
+            />
+          </div>
+          <div className="right">
+            <CustomButton className="btn" onClick={handleReset}>
+              <ResetIcon classes={{ root: 'icon' }} />
+              {btnTrans('reset')}
+            </CustomButton>
+            <CustomButton
+              variant="contained"
+              disabled={searchDisabled}
+              onClick={() => handleSearch(topK)}
+            >
+              {btnTrans('search')}
+            </CustomButton>
+          </div>
+        </section>
+
+        {/* search result table section */}
+        {(searchResult && searchResult.length > 0) || tableLoading ? (
+          <AttuGrid
+            toolbarConfigs={[]}
+            colDefinitions={colDefinitions}
+            rows={result}
+            rowCount={total}
+            primaryKey="rank"
+            page={currentPage}
+            onPageChange={handlePageChange}
+            rowsPerPage={pageSize}
+            setRowsPerPage={handlePageSize}
+            openCheckBox={false}
+            isLoading={tableLoading}
+            orderBy={orderBy}
+            order={order}
+            labelDisplayedRows={getLabelDisplayedRows(`(${latency} ms)`)}
+            handleSort={handleGridSort}
+            tableCellMaxWidth="100%"
           />
-          <CustomDatePicker
-            label={timeTravelInfo.label}
-            onChange={handleDateTimeChange}
-            date={timeTravel}
-            setDate={setTimeTravel}
+        ) : (
+          <EmptyCard
+            wrapperClass={`page-empty-card`}
+            icon={<VectorSearchIcon />}
+            text={
+              searchResult !== null
+                ? searchTrans('empty')
+                : searchTrans('startTip')
+            }
           />
-        </div>
-        <div className="right">
-          <CustomButton className="btn" onClick={handleReset}>
-            <ResetIcon classes={{ root: 'icon' }} />
-            {btnTrans('reset')}
-          </CustomButton>
-          <CustomButton
-            variant="contained"
-            disabled={searchDisabled}
-            onClick={() => handleSearch(topK)}
-          >
-            {btnTrans('search')}
-          </CustomButton>
-        </div>
+        )}
       </section>
-
-      {/* search result table section */}
-      {(searchResult && searchResult.length > 0) || tableLoading ? (
-        <AttuGrid
-          toolbarConfigs={[]}
-          colDefinitions={colDefinitions}
-          rows={result}
-          rowCount={total}
-          primaryKey="rank"
-          page={currentPage}
-          onPageChange={handlePageChange}
-          rowsPerPage={pageSize}
-          setRowsPerPage={handlePageSize}
-          openCheckBox={false}
-          isLoading={tableLoading}
-          orderBy={orderBy}
-          order={order}
-          labelDisplayedRows={getLabelDisplayedRows(`(${latency} ms)`)}
-          handleSort={handleGridSort}
-          tableCellMaxWidth="100%"
-        />
-      ) : (
-        <EmptyCard
-          wrapperClass={`page-empty-card`}
-          icon={<VectorSearchIcon />}
-          text={
-            searchResult !== null
-              ? searchTrans('empty')
-              : searchTrans('startTip')
-          }
-        />
-      )}
     </section>
   );
 };