Merge pull request #175 from Tumao727/feature/loaded-search

Add vector search on overview page

client/src/components/menu/NavMenu.tsx

@@ -1,4 +1,4 @@
-import { useState, FC } from 'react';
+import { useState, FC, useEffect } from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
@@ -97,6 +97,12 @@ const NavMenu: FC<NavMenuType> = props => {
     }));
   };
 
+  useEffect(() => {
+    if (defaultActive) {
+      setActive(defaultActive);
+    }
+  }, [defaultActive]);
+
   const NestList = (props: { data: NavMenuItem[]; className?: string }) => {
     const { className, data } = props;
     return (

client/src/i18n/cn/button.ts

@@ -15,6 +15,7 @@ const btnTrans = {
   next: 'Next',
   previous: 'Previous',
   done: 'Done',
+  vectorSearch: 'Vector search',
 };
 
 export default btnTrans;

client/src/i18n/en/button.ts

@@ -15,6 +15,7 @@ const btnTrans = {
   next: 'Next',
   previous: 'Previous',
   done: 'Done',
+  vectorSearch: 'Vector search',
 };
 
 export default btnTrans;

client/src/pages/overview/collectionCard/CollectionCard.tsx

@@ -12,6 +12,8 @@ import Status from '../../../components/status/Status';
 import CustomToolTip from '../../../components/customToolTip/CustomToolTip';
 import { CollectionCardProps } from './Types';
 import { useTranslation } from 'react-i18next';
+import CustomIconButton from '../../../components/customButton/CustomIconButton';
+import { useHistory } from 'react-router-dom';
 
 const useStyles = makeStyles((theme: Theme) => ({
   wrapper: {
@@ -46,8 +48,22 @@ const useStyles = makeStyles((theme: Theme) => ({
     marginBottom: theme.spacing(2),
   },
   release: {
-    marginLeft: 0,
+    fontSize: '16px',
+
+    '& path': {
+      fill: theme.palette.primary.main,
+    },
+  },
+  search: {
+    fontSize: '16px',
     marginRight: theme.spacing(0.5),
+
+    '& path': {
+      fill: '#fff',
+    },
+  },
+  btn: {
+    marginRight: theme.spacing(1),
   },
 }));
 
@@ -58,9 +74,13 @@ const CollectionCard: FC<CollectionCardProps> = ({
 }) => {
   const classes = useStyles();
   const { _name: name, _status: status, _rowCount: rowCount } = data;
+  const history = useHistory();
+  // icons
   const RightArrowIcon = icons.rightArrow;
   const InfoIcon = icons.info;
   const ReleaseIcon = icons.release;
+  const VectorSearchIcon = icons.navSearch;
+  // i18n
   const { t: collectionTrans } = useTranslation('collection');
   const { t: btnTrans } = useTranslation('btn');
 
@@ -68,6 +88,10 @@ const CollectionCard: FC<CollectionCardProps> = ({
     handleRelease(data);
   };
 
+  const onVectorSearchClick = () => {
+    history.push({ pathname: '/search', search: `?collectionName=${name}` });
+  };
+
   return (
     <div className={`card-wrapper ${classes.wrapper} ${wrapperClass}`}>
       <div>
@@ -89,10 +113,17 @@ const CollectionCard: FC<CollectionCardProps> = ({
         <Typography className={classes.rowCount}>{rowCount}</Typography>
       </div>
       <Divider classes={{ root: classes.divider }} />
-      <CustomButton variant="contained" onClick={onReleaseClick}>
-        <ReleaseIcon classes={{ root: `${classes.icon} ${classes.release}` }} />
-        {btnTrans('release')}
+      <CustomButton
+        variant="contained"
+        className={classes.btn}
+        onClick={onVectorSearchClick}
+      >
+        <VectorSearchIcon classes={{ root: classes.search }} />
+        {btnTrans('vectorSearch')}
       </CustomButton>
+      <CustomIconButton onClick={onReleaseClick}>
+        <ReleaseIcon classes={{ root: classes.release }} />
+      </CustomIconButton>
     </div>
   );
 };

client/src/pages/seach/VectorSearch.tsx

@@ -31,9 +31,14 @@ import {
 import { ColDefinitionsType } from '../../components/grid/Types';
 import Filter from '../../components/advancedSearch';
 import { Field } from '../../components/advancedSearch/Types';
+import { useLocation } from 'react-router-dom';
+import { parseLocationSearch } from '../../utils/Format';
 
 const VectorSearch = () => {
   useNavigationHook(ALL_ROUTER_TYPES.SEARCH);
+  const location = useLocation();
+
+  // i18n
   const { t: searchTrans } = useTranslation('search');
   const { t: btnTrans } = useTranslation('btn');
   const classes = getVectorSearchStyles();
@@ -185,6 +190,18 @@ const VectorSearch = () => {
     }
   }, [selectedCollection, collections, fetchFieldsWithIndex]);
 
+  // set default collection value if is from overview page
+  useEffect(() => {
+    if (location.search && collections.length > 0) {
+      const { collectionName } = parseLocationSearch(location.search);
+      // collection name validation
+      const isNameValid = collections
+        .map(c => c._name)
+        .includes(collectionName);
+      isNameValid && setSelectedCollection(collectionName);
+    }
+  }, [location, collections]);
+
   // icons
   const VectorSearchIcon = icons.vectorSearch;
   const ResetIcon = icons.refresh;