Merge branch 'api-439-use-es-for-text-queries' into 'master'

Api 439 use es for text queries

See merge request genesys-pgr/genesys-ui!292

locales/en/translations.json

@@ -41,6 +41,7 @@
       "ge": "{{what}} ≥",
       "lt": "{{what}} <",
       "gt": "{{what}} >",
+      "_text": "Full-text",
       "accessions": {
         "crop": "Crop",
         "crops": "Crops",
@@ -374,6 +375,9 @@
         }
       },
       "f": {
+        "_text": "Full-text query",
+        "_textPlaceholder": "\"IRGC 1000\"",
+        "_textHint": "Note: A full-text search query does not result in a 100% match. Double quotes may be used to specify a phrase (\"IRGC 100\"). Use | as OR operator (IRGC | TMp), asterix to match a prefix (IRGC*) and parentheses for grouping. For more information click the ? icon above.",
         "crop": "Crop",
         "filtersTitle": "Filter accessions",
         "seqNumber": "Sequential number",

src/accessions/translations.json

@@ -11,6 +11,9 @@
       }
     },
     "f": {
+      "_text": "Full-text query",
+      "_textPlaceholder": "\"IRGC 1000\"",
+      "_textHint": "Note: A full-text search query does not result in a 100% match. Double quotes may be used to specify a phrase (\"IRGC 100\"). Use | as OR operator (IRGC | TMp), asterix to match a prefix (IRGC*) and parentheses for grouping. For more information click the ? icon above.",
       "crop": "Crop",
       "filtersTitle": "Filter accessions",
       "seqNumber": "Sequential number",

src/accessions/ui/c/Filters.tsx

@@ -16,6 +16,7 @@ import Accession from 'model/accession/Accession';
 import DateFilter from 'ui/common/filter/DateFilter';
 import BooleanFilter from 'ui/common/filter/BooleanFilter';
 import { autocomplete } from 'accessions/actions/public';
+import TextFilter from 'ui/common/filter/TextFilter';
 
 const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode, autocomplete, terms, crops, t, ...other}) => {
   // console.log('AccessionFilters', initialValues);
@@ -29,6 +30,11 @@ const AccessionFilters = ({handleSubmit, initialValues, initialize, filterCode,
         />
       </CollapsibleComponentSearch>
       <CollapsibleComponentSearch title={ t('common:f.textSearch') }>
+        <TextFilter name="_text"
+          label={ t('accessions.public.f._text') }
+          placeholder={ t('accessions.public.f._textPlaceholder') }
+          hint={ t('accessions.public.f._textHint') }
+        />
         <AutocompleteFilter
           filterCode={ filterCode }
           autocomplete={ autocomplete }

src/crop/ui/c/CropCard.tsx

@@ -101,7 +101,7 @@ const CropCard = ({crop, classes, compact = false, edit = false, t, ...other}: {
   }
 
   const gridSizes: IGridSizes = { xs: 12, sm: 6, md: 4, lg: 3, xl: 2, ...other };
-  console.log(`CropCard sizes:`, gridSizes, other);
+  // console.log(`CropCard sizes:`, gridSizes, other);
 
   return compact ? (
     <Grid item { ...gridSizes } >

src/model/accession/AccessionFilter.ts

@@ -10,6 +10,7 @@ import AccessionGeoFilter from './AccessionGeoFilter';
 * Defined in Swagger as '#/definitions/AccessionFilter'
 */
 class AccessionFilter {
+  public _text?: string;
   public accessionNumber?: StringFilter;
   public aliases?: StringFilter;
   public active?: boolean;

src/translations.json

@@ -41,6 +41,7 @@
       "ge": "{{what}} ≥",
       "lt": "{{what}} <",
       "gt": "{{what}} >",
+      "_text": "Full-text",
       "accessions": {
         "crop": "Crop",
         "crops": "Crops",

src/ui/common/filter/AutocompleteFilter.tsx

@@ -165,7 +165,10 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
 
   private maybeAdd = (...newValues: string[]) => {
     const values = [ ...this.state.values ];
-    const excludedValues = [ ...this.state.excludedValues ];
+    const excludedValues = [ ];
+    if (this.state.excludedValues) {
+      excludedValues.push(...this.state.excludedValues);
+    }
 
     newValues.forEach((text) => {
       if (text && text.length > 0) {

src/ui/common/filter/TextFilter.tsx

@@ -2,12 +2,15 @@ import * as React from 'react';
 import {translate} from 'react-i18next';
 import { Field } from 'redux-form';
 
+import FormControl from 'ui/common/forms/FormControl';
 import TextField from '@material-ui/core/TextField';
+import { FormHelperText } from '@material-ui/core';
 
 interface ITextFilterInternal extends React.ClassAttributes<any> {
     input: any;
     label: string;
     placeholder?: string;
+    hint?: any;
     t: any;
 }
 
@@ -37,9 +40,9 @@ class TextFilterInternal extends React.Component<ITextFilterInternal, any> {
     }
 
     public render() {
-        const { label, placeholder, t } = this.props;
+        const { label, placeholder, t, hint } = this.props;
         return (
-            <div>
+            <FormControl fullWidth>
               <TextField
                   className="full-width"
                   label={ label }
@@ -47,7 +50,10 @@ class TextFilterInternal extends React.Component<ITextFilterInternal, any> {
                   placeholder={ t(placeholder) }
                   onChange={ this.handleChange }
               />
-            </div>
+              { hint && <FormHelperText>
+                <span>{ hint }</span>
+              </FormHelperText> }
+            </FormControl>
         );
     }
 }

src/ui/layout/sidebar/SidebarWrapper.tsx

@@ -76,7 +76,7 @@ const styles = (theme) => ({
       }
     },
     sidebar: {
-        whiteSpace: 'nowrap' as 'nowrap',
+        // whiteSpace: 'nowrap' as 'nowrap',
         minWidth: '360px',
         'html[dir="rtl"] &' : {
             minWidth: '420px',

src/ui/pages/welcome/index.tsx

 import * as React from 'react';
-import {connect} from 'react-redux';
-import {bindActionCreators} from 'redux';
-import {withStyles} from '@material-ui/core/styles';
+import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
+import { withStyles } from '@material-ui/core/styles';
 import { translate } from 'react-i18next';
 
 // import { navigateTo } from 'actions/navigation';
@@ -26,6 +26,7 @@ import ActivityPostCard from 'cms/ui/c/ActivityPostCard';
 import PageTitle from 'ui/common/PageTitle';
 import SectionHeader from 'ui/common/heading/SectionHeader';
 import Card, { CardContent } from 'ui/common/Card';
+import { applyFilters } from 'accessions/actions/public';
 
 const styles = (theme) => ({
     /* tslint:disable */
@@ -36,20 +37,31 @@ const styles = (theme) => ({
       },
     },
     backgroundImageWrapper:{
-        marginTop:'-25%',
+        display: 'flex',
+        alignItems: 'center' as 'center',
+        justifyContent: 'center' as 'center',
+        width: '100%',
+        zIndex: -1,
     },
     backgroundImage: {
-        top: '-50%',
-        display: 'block' as 'block',
-        marginBottom: '-100%',
+        backgroundImage: 'url(/images/entrypage.jpg)',
+        backgroundRepeat: 'no-repeat' as 'no-repeat',
+        backgroundSize: 'cover' as 'cover',
+        position: 'absolute' as 'absolute',
+        width: '100vw',
+        '& > img': {
+            width: '100vw',
+        },
         [theme.breakpoints.down('sm')]: {
-            minWidth: '1000px',
-            width:'110%',
-            marginTop:'0px',
+            width: 'initial',
+            '& > img': {
+                width: 'initial',
+            },
         },
     },
     background: {
         overflow: 'hidden' as 'hidden',
+        position: 'relative' as 'relative',
     },
     searchBox: {
         textAlign: 'center' as 'center',
@@ -252,6 +264,7 @@ interface IWelcomeProps {
     crops: any;
     lastNews: ActivityPost[];
     loadLastNews: () => ActivityPost[];
+    applyFilters: (AccessionFilter) => any;
 }
 
 class WelcomePage extends React.Component<IWelcomeProps, any> {
@@ -292,10 +305,11 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
 
         const onSubmitSearch = (e) => {
           const { query } = this.state;
+          const { applyFilters } = this.props;
           // const { navigateTo, t } = this.props;
           e.preventDefault();
           if (query && query.length > 0) {
-            // navigateTo(`/datasets/suggest`, { q: query });
+            applyFilters({ _text: query });
           } else {
             this.setState({
               ...this.state,
@@ -311,12 +325,14 @@ class WelcomePage extends React.Component<IWelcomeProps, any> {
                     <Markdown source={ t('common.tagline') } />
                 </div>
                 <Grid container spacing={ 0 } className={ classes.background }>
-                    <div  className={ classes.backgroundImageWrapper }>
-                        <img className={ classes.backgroundImage } srcSet="
-                            images/entrypage1x.jpg 1000w,
-                            images/entrypage2x.jpg 2000w,
-                            images/entrypage4x.jpg 4000w "
-                        />
+                    <div className={ classes.backgroundImageWrapper }>
+                        <picture className={ classes.backgroundImage }>
+                          <source key="1" srcSet="images/entrypage.jpg" media="(max-width: 500px)"/>
+                          <source key="2" srcSet="images/entrypage1x.jpg" media="(max-width: 1000px)"/>
+                          <source key="3" srcSet="images/entrypage2x.jpg" media="(max-width: 2000px)"/>
+                          <source key="4" srcSet="images/entrypage4x.jpg" media="(min-width: 2001px)"/>
+                          <img src="images/entrypage.jpg"/>
+                        </picture>
                     </div>
                     <Grid item xs={ 12 }>
                         <div className={ classes.searchBox }>
@@ -452,6 +468,7 @@ const mapStateToProps = (state) => ({
 
 const mapDispatchToProps = (dispatch) => bindActionCreators({
     loadLastNews,
+    applyFilters,
     // navigateTo,
 }, dispatch);