filters - bobs comments for future changes

1 files changed, 86 insertions, 29 deletions

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index d6638df46..ce6e2b1f3 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -65,13 +65,35 @@ export class FilterPanel extends React.Component<filterProps> {
         return [...noviceFields, ...sortedKeys];
     }
 
+    @computed get rangeFilters() {
+        return StrListCast(this.targetDoc?._childFiltersByRanges).filter((filter, i) => !( i % 3) )
+    }
+
     /**
-     * The current attributes selected to filter based on
+     * activeFilters( ) -- all filters that currently have a filter set on them in this document (ranges, and others)
+     * ["#tags::bob::check", "tags::joe::check", "width", "height"]
      */
     @computed get activeFilters() {
-        return StrListCast(this.targetDoc?._childFilters);
+        return StrListCast(this.targetDoc?._childFilters).concat(this.rangeFilters);
     }
 
+    // 
+    // activeFacetHeaders() - just the facet names, not the rest of the filter
+    //
+    // this wants to return all the filter facets that have an existing filter set on them in order to show them in the rendered panel
+    // this set may overlap the selectedFilters 
+    // if the components reloads, these will still exist and be shown
+
+    // ["#tags", "width", "height"]
+    //
+    @computed get currentActiveFilterz(){   // this.existingFilters
+        const filters = new Map<string, string>();
+        //this.targetDoc.docFilters
+        this.activeFilters.map(filter => filters.set(filter.split(Doc.FilterSep)[1] ,filter.split(Doc.FilterSep)[0] ))
+        console.log("what is wrong with filters " +filters )
+         return filters
+    }
+    
     /**
      * @returns a string array of the current attributes
      */
@@ -114,36 +136,55 @@ export class FilterPanel extends React.Component<filterProps> {
         Doc.setDocRangeFilter(this.targetDoc, filterName, undefined);
     };
 
-    @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
+    // @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
     @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
     @observable _collapseReturnKeys = new Array();
 
 
     // this computed function gets the active filters and maps them to their headers
 
-    @computed get currentActiveFilterz(){ 
-        const filters = new Map<string, string>();
-        //this.targetDoc.docFilters
-        StrListCast(this.targetDoc?._childFilters).map(filter => filters.set(filter.split(Doc.FilterSep)[1] ,filter.split(Doc.FilterSep)[0] ))
-        console.log("what is wrong with filters " +filters )
-         return filters
-    }
-
-   //  let returnKeys = [];
+    //
+    // activeRenderedFacetInfos()
+    //    returns renderInfo for all user selected filters and for all existing filters set on the document
+    // Map("tags" => {"checkbox"},
+   //         "width" => {"rangs", domain:[1978,1992]})
+    //
+    @computed get activeFacets() {  // selectedFacetRenderInfo => []:{facetName, renderInfo}[]   renderInfo: { renderType: text|range|... ,   minVal?: , maxVal?; }
+
+        // return new Set(
+              // Array.from(new Set(Array.from(this.selectedFacetHeaders).concat(this.existingFacetHeaders)))
+               // .map(facetHeader => { --> getting exisitng filters and new filters that havent been selected but need to remove duplicates 
+                    // most of what facetClick did before ... 
+                    // minVal, maxvval...
+                    //  if (...)
+                    //      return {key: facet,  renderType: "text"}
+                    //  else if (... numbers) return {key:facet, renderrType: range, extendedMinVal, maxval
+                    //      return
+                    // return ..
+                    // }))
 
-    @computed get activeFacets() {
         // console.log("chosen collpase " + this._chosenFacetsCollapse)
-        const facets = new Map<string, 'text' | 'checkbox' | 'slider' | 'range'>(this._chosenFacets);
-        StrListCast(this.targetDoc?._childFilters).map(filter => facets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox'));
-        setTimeout(() => StrListCast(this.targetDoc?._childFilters).map(action(filter => this._chosenFacets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox'))));
+        const facets = new Map<string, 'text' | 'checkbox' | 'slider' | 'range'>();
+        this.activeFilters.map(filter => facets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox'));
+        // setTimeout(() => StrListCast(this.targetDoc?._childFilters).map(action(filter => this._chosenFacets.set(filter.split(Doc.FilterSep)[0], filter.split(Doc.FilterSep)[2] === 'match' ? 'text' : 'checkbox'))));
         return facets;
     }
 
+    @observable selectedFacetHeaders = new Set<string>();
+
     /**
-     * Responds to clicking the check box in the flyout menu
+     * user clicks on a filter facet because they want to see it.   
+     * this adds this chosen filter to a set of user selected filters called:  selectedFilters
+     * if this component reloads, then these filters will go away since they haven't been written to any Doc anywhere
+     * 
+     *   // this._selectedFacets.add(facetHeader);  .. add to Set() not array
      */
     @action
-    facetClick = (facetHeader: string) => {
+    facetClick = (facetHeader: string) => { // just when someone chooses a facet
+
+        // return;
+
+
         if (!this.targetDoc) return;
         const allCollectionDocs = this.targetDocChildren;
         const facetValues = this.gatherFieldValues(this.targetDocChildren, facetHeader);
@@ -161,18 +202,20 @@ export class FilterPanel extends React.Component<filterProps> {
             }
         });
         if (facetHeader === 'text' || (facetValues.rtFields / allCollectionDocs.length > 0.1 && facetValues.strings.length > 20)) {
-            this._chosenFacets.set(facetHeader, 'text');
+            // this._chosenFacets.set(facetHeader, 'text');
         } else if (facetHeader !== 'tags' && nonNumbers / facetValues.strings.length < 0.1) {
 
             console.log("in this IF STATEMENE ")
 
-            const ranged = Doc.readDocRangeFilter(this.targetDoc, facetHeader);
+            const ranged = Doc.readDocRangeFilter(this.targetDoc, facetHeader); // not the filter range, but the zooomed in range on the filter
             const extendedMinVal = minVal - Math.min(1, Math.floor(Math.abs(maxVal - minVal) * 0.1));
             const extendedMaxVal = Math.max(minVal + 1, maxVal + Math.min(1, Math.ceil(Math.abs(maxVal - minVal) * 0.05)));
-          //  newFacet[newFacetField + '-min'] = ranged === undefined ? extendedMinVal : ranged[0];
+            // this.targetDoc["year-min"] = 1978
+            // // facetHeader == year
+          //  this.targetDoc[newFacetField + '-min'] = ranged === undefined ? extendedMinVal : ranged[0];
           //  newFacet[newFacetField + '-max'] = ranged === undefined ? extendedMaxVal : ranged[1];
           //  const scriptText = `setDocRangeFilter(this?.target, "${facetHeader}", range)`;
-            Doc.setDocRangeFilter(this.targetDoc, facetHeader)
+            Doc.setDocRangeFilter(this.targetDoc, facetHeader, [extendedMinVal, extendedMaxVal] )
 
 
             // newFacet = Docs.Create.SliderDocument({
@@ -202,7 +245,7 @@ export class FilterPanel extends React.Component<filterProps> {
        
 
         } else {
-            this._chosenFacets.set(facetHeader, 'checkbox');
+            // this._chosenFacets.set(facetHeader, 'checkbox');
         }
         this._chosenFacetsCollapse.set(facetHeader, false)
     };
@@ -279,7 +322,7 @@ export class FilterPanel extends React.Component<filterProps> {
                 </div>
 
                 <div className="filterBox-tree" key="tree">
-                    {Array.from(this.activeFacets.keys()).map(facetHeader => (
+                    {Array.from(this.activeFacets.keys()).map(facetHeader => ( // iterato over activeFacetRenderInfos  ==> renderInfo  which you can renderInfo.facetHeader
                         <div>
                             <div className  = "filterBox-facetHeader">
                                 <div className = "filterBox-facetHeader-Header"> </div>
@@ -312,7 +355,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                         }}
 
                                         this.activeFacets.delete(facetHeader)
-                                        this._chosenFacets.delete(facetHeader)
+                                       // this._chosenFacets.delete(facetHeader)
                                         this._chosenFacetsCollapse.delete(facetHeader)
 
                                         })}  >
@@ -326,7 +369,7 @@ export class FilterPanel extends React.Component<filterProps> {
                             // <div className = 'filterbox-collpasedAndActive' style={{backgroundColor: 'yellow', fontSize: 50}} > {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
                             this.sortingCurrentFacetValues(facetHeader) 
                             // &&  this._collapseReturnKeys.splice(0)
-                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }  // pass renderInfo from iterator
                             {/*  */}
                         </div>
                     ))}
@@ -336,8 +379,9 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
-        switch (type) {
-            case 'text':
+        //  displayFacetValueFilterUIs(renderIinfo)
+        switch (type /* renderInfo.type */ ) {
+            case 'text': // if (this.chosenFacets.get(facetHeader) === 'text')
                 return (
                     <input
                         placeholder={
@@ -372,7 +416,20 @@ export class FilterPanel extends React.Component<filterProps> {
                             {facetValue}
                         </div>
                     );
-                });
+                })
+                // case 'range'
+                // return <Slider ...
+                //  return <slider domain={renderInfo.domain}> domain is number[] for min and max
+                //         onChange = { ...     Doc.setDocRangeFilter(this.targetDoc, facetHeader, [extendedMinVal, extendedMaxVal] ) }
+                //
+                //  OR
+
+                // return <div>
+                //     <slider domain={renderInfo.domain}> // domain is number[] for min and max
+                //     <dimain changing handles >
+                //  <?div
+                
+                ;
         }
     }
 }