4 files changed, 42 insertions, 14 deletions
diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index c903f29ee..34d06ea23 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -156,7 +156,7 @@
     right: 0;
     top: 0;
     z-index: 1;
-    background-color: #9f9f9f;
+  //  background-color:  #9f9f9f;
 
     .filterBox-tree {
         z-index: 0;
@@ -182,6 +182,7 @@
     }
 
     .filterBox-tree {
+        padding-top: 8px;
         display: inline-block;
         width: 100%;
         margin-bottom: 10px;
@@ -189,3 +190,23 @@
         overflow: auto;
     }
 }
+
+
+
+.filterBox-facetHeader{
+     display: flex;
+     align-items: center;
+   // float:right;
+
+   .filterBox-facetHeader-collapse{
+    float: right;
+                justify-items: right;
+                align-items: flex-end;
+                margin-left: auto;
+                margin-right: 9px;
+    }
+
+}
+
+
+
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index a5c18cd8b..b10fafb57 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,15 @@ 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">
+                    {/* <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 +185,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>
                     ))}
diff --git a/src/client/views/PropertiesButtons.scss b/src/client/views/PropertiesButtons.scss
index dd4f67106..b801b3abf 100644
--- a/src/client/views/PropertiesButtons.scss
+++ b/src/client/views/PropertiesButtons.scss
@@ -128,14 +128,6 @@ $linkGap : 3px;
     }
 }
 
-// .propertiesButtons-iconAndText{
-//     height: 28px;
-//     width: 220px;//29px;
-//     display: flex;
-//     align-items: center;
-//     background-color: white;
-// }
-
 .propertiesButtons-label {
     text-transform: uppercase;
     margin-left: 8px;
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index 387397e9d..7a9820a35 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -60,7 +60,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
 
         return !targetDoc ? null : (
             <Tooltip title={<div className={`dash-tooltip`}>{tooltip(targetDoc?.[property])} </div>} placement="top">
-                <div className="propertiesButtons-iconAndText">
+              
                     <div
                         className={`propertiesButtons-linkButton-empty toggle-${StrCast(targetDoc[property]).includes(':hover') ? 'hover' : targetDoc[property] ? 'on' : 'off'}`}
                         onPointerDown={e => e.stopPropagation()}
@@ -74,7 +74,7 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                         <div className="propertiesButtons-label"> {label(targetDoc?.[property])}</div>
                         {/* <FontAwesomeIcon className="documentdecorations-icon" size="lg" icon={icon(BoolCast(targetDoc?.[property])) as any} /> */}
                     </div>
-                </div>
+                
             </Tooltip>
         );
     };