Suggested filters without applied filters for AutocompleteFilter

src/ui/common/filter/AutocompleteFilter.tsx

@@ -9,11 +9,12 @@ import LabelValue from 'model/LabelValue';
 import AccessionFilter from 'model/accession/AccessionFilter';
 import MaterialAutosuggest from 'ui/common/material-autosuggest';
 import { debounce } from 'debounce';
+import { AddCircle as Add, RemoveCircle as Remove, HighlightOff as Clear} from '@material-ui/icons';
 
 interface IStringListProps extends React.ClassAttributes<any> {
   input: any;
   notInput: any;
-  removeByIndex: (index: number, isNot: boolean) => void;
+  removeByValue: (index: number, isNot: boolean) => void;
 }
 
 class StringList extends React.Component<IStringListProps> {
@@ -84,19 +85,21 @@ class StringList extends React.Component<IStringListProps> {
   }
 
   public render() {
-    const {removeByIndex} = this.props;
+    const {removeByValue} = this.props;
     const {renderList} = this.state;
     return (
       <div>
         { renderList.map((renderItem, index) => (
-          <div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222' } } key={ renderItem.value }>
-            { renderItem.state ?
-              <span className="font-bold float-Left mr-5" onClick={ () => this.addToNotList(renderItem, index) }>+</span>
-              :
-              <span className="font-bold float-Left mr-5" onClick={ () => this.removeFromNotList(renderItem, index) }>-</span>
-            }
-            { renderItem.value }
-            <div className="font-bold float-right" onClick={ () => removeByIndex(index, !renderItem.state) }>X</div>
+          <div style={ { margin: '.2rem 0', padding: '.2rem 1rem', backgroundColor: '#e8e5e1', color: '#202222', display: 'flex', justifyContent: 'space-between', alignItems: 'center' } } key={ renderItem.value }>
+            <span style={ {display: 'flex', alignItems: 'center'} }>
+              { renderItem.state ?
+                <span className="font-bold float-left mr-5" onClick={ () => this.addToNotList(renderItem, index) }><Add style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '18px'} }/></span>
+                :
+                <span className="font-bold float-left mr-5" onClick={ () => this.removeFromNotList(renderItem, index) }><Remove style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '18px'} }/></span>
+              }
+              { renderItem.value }
+            </span>
+            <div className="font-bold float-right" onClick={ () => removeByValue(renderItem.value, !renderItem.state) }><Clear style={ {cursor: 'pointer', color: '#6f6f6f', fontSize: '20px'} }/></div>
           </div>
         )) }
       </div>
@@ -126,6 +129,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
     const values = _.get(props, `${props.names[1]}.input.value`);
 
     this.state = {
+      excludedValues: null,
       values,
       notValues,
       text: '',
@@ -139,6 +143,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
     const notValue = _.get(this.props, `${this.props.names[1]}.input.value`);
 
     this.setState({
+      excludedValues: null,
       values: [ ...value ],
       notValues: [ ...notValue ],
       text: '',
@@ -151,6 +156,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
     const notValue = _.get(nextProps, `${nextProps.names[1]}.input.value`);
 
     this.setState({
+      excludedValues: [...value, ...notValue],
       values: [ ...value ],
       notValues: [...notValue],
       text: '',
@@ -159,12 +165,16 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
 
   private maybeAdd = (...newValues: string[]) => {
     const values = [ ...this.state.values ];
+    const excludedValues = [ ...this.state.excludedValues ];
 
     newValues.forEach((text) => {
       if (text && text.length > 0) {
         if (values.indexOf(text) < 0) {
           values.push(text);
         }
+        if (excludedValues.indexOf(text) < 0) {
+          excludedValues.push(text);
+        }
       }
     });
 
@@ -172,13 +182,15 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
       this.setState({
         text: '',
         values,
+        excludedValues,
       });
     }
     return values;
   }
 
-  private maybeRemove = (...newValues: string[]) => {
-    const values = [ ...this.state.values ];
+  private maybeRemove = (isNot?: boolean, ...newValues: string[]) => {
+    const values = isNot ? [ ...this.state.notValues ] : [ ...this.state.values ];
+    const excludedValues = this.state.excludedValues;
 
     newValues.forEach((text) => {
       if (text && text.length > 0) {
@@ -186,21 +198,28 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
         if (index >= 0) {
           values.splice(index, 1);
         }
+        const indexExcluded: number = excludedValues.indexOf(text);
+        if (indexExcluded >= 0) {
+          excludedValues.splice(indexExcluded, 1);
+        }
       }
     });
 
-    if (!_.isEqual(values, this.state.values)) {
+    if (!_.isEqual(values, isNot ? this.state.notValues : this.state.values)) {
       this.setState({
         text: '',
-        values,
+        values: isNot ? this.state.values : values,
+        notValues: !isNot ? this.state.notValues : values,
+        excludedValues,
       });
     }
     return values;
   }
 
-  private removeByIndex = (index, isNot) => {
+  private removeByValue = (value, isNot) => {
     const { input } = _.get(this.props, this.props.names[isNot ? 1 : 0]);
-    const newValues = this.maybeRemove(this.state.values[index]);
+
+    const newValues = this.maybeRemove(isNot, value);
     input.onChange(newValues);
   }
 
@@ -231,7 +250,7 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
     const { placeholder, label, t, names, terms, classes } = this.props;
     const { input } = _.get(this.props, names[0]);
     const { input: notInput } = _.get(this.props, names[1]);
-    const { values, notValues } = this.state;
+    const {  values, notValues, excludedValues } = this.state;
 
     return (
       <div>
@@ -247,12 +266,12 @@ class AutocompleteFilterInternal extends React.Component<IAutocompleteFilterInte
             className="full-width"
            />
         { ((values && values.length > 0) || (notValues && notValues.length > 0)) &&
-          <StringList input={ input } notInput={ notInput } removeByIndex={ this.removeByIndex } />
+          <StringList input={ input } notInput={ notInput } removeByValue={ this.removeByValue } />
         }
         { terms &&
           <Properties>
             <h5 className="pl-10 pt-1rem mb-10">{ t('common:f.suggestedFilters') }</h5>
-            { terms && Array.from(terms).slice(0, 10).map(([key, value]) => (
+            { terms && Array.from(terms).slice(0, 10).filter(([key, value]) => !excludedValues || !excludedValues.includes(key)).map(([key, value]) => (
               <PropertiesItem key={ key } title={ key }  onClick={ () => input.onChange(this.maybeAdd(key)) } classes={ {...classes, propertiesRow: 'cursor-pointer'} }>
                   <span className="float-right">
                     <Number value={ value }/>