Merge branch 'master' into data-visualization-sarah

1 files changed, 19 insertions, 3 deletions

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index a5c18cd8b..68d29942b 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -11,6 +11,8 @@ import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
 import { SearchBox } from './search/SearchBox';
 import { undoable } from '../util/UndoManager';
+import { AiOutlineMinusSquare } from 'react-icons/ai';
+import { CiCircleRemove } from 'react-icons/ci';
 
 interface filterProps {
     rootDoc: Doc;
@@ -167,13 +169,16 @@ export class FilterPanel extends React.Component<filterProps> {
 
     render() {
         const options = this._allFacets.filter(facet => this.currentFacets.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
+        console.log("this is option " + options)
+        console.log("this is alll facets " + this._allFacets)
         return (
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
                     <div style={{ width: '100%' }}>
                         <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
                     </div>
-                    <div className="filterBox-select-bool">
+                    {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
+                    {/* <div className="filterBox-select-bool"> 
                         <select className="filterBox-selection" onChange={action(e => this.targetDoc && (this.targetDoc._childFilters_boolean = (e.target as any).value))} defaultValue={StrCast(this.targetDoc?.childFilters_boolean)}>
                             {['AND', 'OR'].map(bool => (
                                 <option value={bool} key={bool}>
@@ -181,13 +186,24 @@ export class FilterPanel extends React.Component<filterProps> {
                                 </option>
                             ))}
                         </select>
-                    </div>{' '}
+                    </div>{' '} */}
                 </div>
 
                 <div className="filterBox-tree" key="tree">
                     {Array.from(this.activeFacets.keys()).map(facetHeader => (
                         <div>
-                            {facetHeader}
+                            <div className  = "filterBox-facetHeader">
+                                <div className = "filterBox-facetHeader-Header"> </div>
+                                {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
+                                
+                                <div className = "filterBox-facetHeader-collapse"> 
+                                 <AiOutlineMinusSquare/>
+                                 {/* <CiCircleRemove/> */}
+                                  </div>
+                               
+                            </div>
+                           
+
                             {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
                         </div>
                     ))}