filter - slider works (w/o UI and collapse)

3 files changed, 99 insertions, 170 deletions

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 78e7904b8..b18b01325 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -231,6 +231,28 @@
     
 }
 
+// .sliderBox-outerDiv {
+//     width: 30%;// width: calc(100% - 14px);   // 14px accounts for handles that are at the max value of the slider that would extend outside the box
+//     height: 40; // height: 100%;
+//     border-radius: inherit;
+//     display: flex;
+//     flex-direction: column;
+//     position: relative;
+//     // background-color: yellow;
+//     .slider-tracks {
+//         top: 7px;
+//         position: relative;
+//     }
+//     .slider-ticks {
+//         position: relative;
+//     }
+//     .slider-handles {
+//         top: 7px;
+//         position: relative;
+//     }
+// }
+
+
 
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index b7718c6a3..54f5122b4 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -83,7 +83,6 @@ export class FilterPanel extends React.Component<filterProps> {
         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
     }
 
@@ -99,22 +98,11 @@ export class FilterPanel extends React.Component<filterProps> {
 
     @computed get activeFacetHeaders() {
         const activeHeaders = new Array()
-
         this.activeFilters.map(filter => activeHeaders.push(filter.split(Doc.FilterSep)[0]) )
 
     
         return activeHeaders;
     }
-
-
-    // @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
      */
@@ -210,27 +198,6 @@ export class FilterPanel extends React.Component<filterProps> {
             ))
     }
 
-    // @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 ..
-    //                 // }))
-
-    //     // console.log("chosen collpase " + this._chosenFacetsCollapse)
-    //     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>();
 
     /**
@@ -240,105 +207,40 @@ export class FilterPanel extends React.Component<filterProps> {
      * 
      *   // this._selectedFacets.add(facetHeader);  .. add to Set() not array
      */
+
     @action
     facetClick = (facetHeader: string) => { // just when someone chooses a facet
 
         this._selectedFacetHeaders.add(facetHeader);
 
          return
-
-
-        // if (!this.targetDoc) return;
-        // const allCollectionDocs = this.targetDocChildren;
-        // const facetValues = this.gatherFieldValues(this.targetDocChildren, facetHeader);
-
-        // let nonNumbers = 0;
-        // let minVal = Number.MAX_VALUE,
-        //     maxVal = -Number.MAX_VALUE;
-        // facetValues.strings.map(val => {
-        //     const num = val ? Number(val) : Number.NaN;
-        //     if (Number.isNaN(num)) {
-        //         val && nonNumbers++;
-        //     } else {
-        //         minVal = Math.min(num, minVal);
-        //         maxVal = Math.max(num, maxVal);
-        //     }
-        // });
-        // if (facetHeader === 'text' || (facetValues.rtFields / allCollectionDocs.length > 0.1 && facetValues.strings.length > 20)) {
-        //     // 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); // 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)));
-        //     // 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, [extendedMinVal, extendedMaxVal] )
-
-
-        //     // newFacet = Docs.Create.SliderDocument({
-        //     //     title: facetHeader,
-        //     //     system: true,
-        //     //     target: targetDoc,
-        //     //     _fitWidth: true,
-        //     //     _height: 40,
-        //     //     _stayInCollection: true,
-        //     //     treeViewExpandedView: 'layout',
-        //     //     _treeViewOpen: true,
-        //     //     _forceActive: true,
-        //     //     _overflow: 'visible',
-        //     // });
-        //     // const newFacetField = Doc.LayoutFieldKey(newFacet);
-        //     // const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
-        //     // Doc.GetProto(newFacet).type = DocumentType.COL; // forces item to show an open/close button instead ofa checkbox
-        //     // 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];
-        //     // newFacet[newFacetField + '-max'] = ranged === undefined ? extendedMaxVal : ranged[1];
-        //     // Doc.GetProto(newFacet)[newFacetField + '-minThumb'] = extendedMinVal;
-        //     // Doc.GetProto(newFacet)[newFacetField + '-maxThumb'] = extendedMaxVal;
-        //     // const scriptText = `setDocRangeFilter(this?.target, "${facetHeader}", range)`;
-        //     // newFacet.onThumbChanged = ScriptField.MakeScript(scriptText, { this: Doc.name, range: 'number' });
-        //     // newFacet.data = ComputedField.MakeFunction(`readNumFacetData(self.target, self, "${FilterBox.targetDocChildKey}", "${facetHeader}")`);
-       
-
-        // } else {
-        //     // this._chosenFacets.set(facetHeader, 'checkbox');
-        // }
-        // this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
   
     @action
     sortingCurrentFacetValues = (facetHeader:string) => {
-
+        console.log("in function to begin with")
         this._collapseReturnKeys.splice(0)
 
-        for (var key of this.facetValues(facetHeader)){ // all  filters currently set
-           // console.log("key : " + key  )
-           if (this.mapActiveFiltersToFacets.get(key)){ // work with the current filter selected
-            //    console.log("WEREEE HERHEHHHHEHHHHEEE")
-                this._collapseReturnKeys.push(key) 
-         }
-    }
+         console.log("this si sfacetValies " + this.facetValues(facetHeader))
 
-        return (<div className = " filterbox-collpasedAndActive">
-          
-            {this._collapseReturnKeys.join(',  ') }
-            {/* .toString()} */}
-        </div>)
-        
+        //if range then display range values
+
+        // if(Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => (renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader ))){
+        //     console.log("JOE MAMA")
+        // }
         
+        for (var key of this.facetValues(facetHeader)){ 
+           if (this.mapActiveFiltersToFacets.get(key)){ 
+                this._collapseReturnKeys.push(key) 
+         }}
+        return (
+            <div className = " filterbox-collpasedAndActive">  
+                {this._collapseReturnKeys.join(',  ') }
+            </div>)
     }
     
     
-
-
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
@@ -365,7 +267,6 @@ 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 }));
         const options = this._allFacets.filter(facet => this.activeFacetHeaders.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
 
         return (
@@ -410,19 +311,20 @@ export class FilterPanel extends React.Component<filterProps> {
                                             if (this.mapActiveFiltersToFacets.get(key)){
                                                 Doc.setDocFilter(this.targetDoc, renderInfo.facetHeader, key, 'remove')
                                         }}
-
-                                        if (renderInfo.facetHeader)
-
                                         this._selectedFacetHeaders.delete(renderInfo.facetHeader)
-
-                                        // this.activeFacets.delete(renderInfo.facetHeader)
-                                       // this._chosenFacets.delete(facetHeader)
                                         this._chosenFacetsCollapse.delete(renderInfo.facetHeader)
+                                        Doc.setDocRangeFilter(this.targetDoc, renderInfo.facetHeader, renderInfo.domain, 'remove')
+
+
 
                                         console.log("this is activeFilters " + this.activeFilters)
                                         console.log("this is activeFacetHeaders " + this.activeFacetHeaders)
                                         console.log("thsi is activeRenderedFacetInfos " + this.activeRenderedFacetInfos)
                                         console.log("thsi is selected facet Headers " + this._selectedFacetHeaders )
+                                        console.log("THIS IS THE ONE ADDED "+ this.targetDoc?._childFiltersByRanges)
+
+
+
 
                                         })}  >
                                             
@@ -432,9 +334,7 @@ export class FilterPanel extends React.Component<filterProps> {
                             </div>
                            
                             { this._chosenFacetsCollapse.get(renderInfo.facetHeader) ? 
-                            // <div className = 'filterbox-collpasedAndActive' style={{backgroundColor: 'yellow', fontSize: 50}} > {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
                             this.sortingCurrentFacetValues(renderInfo.facetHeader) 
-                            // &&  this._collapseReturnKeys.splice(0)
                              : this.displayFacetValueFilterUIs(renderInfo.renderType, renderInfo.facetHeader, renderInfo.domain, renderInfo.range ) } 
                             {/*  */}
                         </div>
@@ -445,7 +345,6 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string, renderInfoDomain?: number[] | undefined, renderInfoRange?: number[] ): React.ReactNode {
-        //  displayFacetValueFilterUIs(renderIinfo)
         switch (type /* renderInfo.type */ ) {
             case 'text': // if (this.chosenFacets.get(facetHeader) === 'text')
                 return (
@@ -460,9 +359,7 @@ export class FilterPanel extends React.Component<filterProps> {
                     />
                 );
             case 'checkbox':
-           
                 return this.facetValues(facetHeader).map(fval => {
-                  
                     const facetValue = fval;
                     return (
                         <div>
@@ -472,12 +369,9 @@ export class FilterPanel extends React.Component<filterProps> {
                                         StrListCast(this.targetDoc._childFilters)
                                             .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
                                             ?.split(Doc.FilterSep)[2] === 'check'
-                                     
                                 }
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval,  e.target.checked ? 'check' : 'remove'), 'set filter')}
-          
-                              
                             />
                             {facetValue}
                         </div>
@@ -485,48 +379,48 @@ export class FilterPanel extends React.Component<filterProps> {
                 })
 
                 case 'range':
-                    console.log("in range")
-
                     const domain = renderInfoDomain;
-
                     if (domain){
                         return(
-                        <Slider mode={2} step={Math.min(1, 0.1 * (domain[1] - domain[0]))} domain={[-1000, 1000]} rootStyle={{ position: 'relative', width: '100%' }} 
-                        onChange={ values => Doc.setDocRangeFilter(this.targetDoc, facetHeader, values)} values={renderInfoRange!} >
-                            <Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
-                            <Handles>
-                                {({ handles, activeHandleID, getHandleProps }) => (
-                                    <div className="slider-handles">
-                                        {handles.map((handle, i) => {
-                                            // const value = i === 0 ? defaultValues[0] : defaultValues[1];
-                                            return (
-                                                <div >
-                                                    <Handle key={handle.id} handle={handle} domain={domain} isActive={handle.id === activeHandleID} getHandleProps={getHandleProps} />
+                            <div className = "sliderBox-outerDiv" style = {{width: "95%", height: 45 }}>
+                                <Slider mode={2} step={Math.min(1, 0.1 * (domain[1] - domain[0]))} domain={[-1000, 1000]} rootStyle={{ position: 'relative', width: '100%' }} 
+                                    onChange={ values => Doc.setDocRangeFilter(this.targetDoc, facetHeader, values)} values={renderInfoRange!} >
+                                        <Rail>{railProps => <TooltipRail {...railProps} />}</Rail>
+                                        <Handles>
+                                            {({ handles, activeHandleID, getHandleProps }) => (
+                                                <div className="slider-handles">
+                                                    {handles.map((handle, i) => {
+                                                        // const value = i === 0 ? defaultValues[0] : defaultValues[1];
+                                                        return (
+                                                            <div >
+                                                                <Handle key={handle.id} handle={handle} domain={domain} isActive={handle.id === activeHandleID} getHandleProps={getHandleProps} />
+                                                            </div>
+                                                        );
+                                                    })}
+                                                </div>
+                                            )}
+                                        </Handles>
+                                        <Tracks left={false} right={false}>
+                                            {({ tracks, getTrackProps }) => (
+                                                <div className="slider-tracks">
+                                                    {tracks.map(({ id, source, target }) => (
+                                                        <Track key={id} source={source} target={target} disabled={false} getTrackProps={getTrackProps} />
+                                                    ))}
                                                 </div>
-                                            );
-                                        })}
-                                    </div>
-                                )}
-                            </Handles>
-                            <Tracks left={false} right={false}>
-                                {({ tracks, getTrackProps }) => (
-                                    <div className="slider-tracks">
-                                        {tracks.map(({ id, source, target }) => (
-                                            <Track key={id} source={source} target={target} disabled={false} getTrackProps={getTrackProps} />
-                                        ))}
-                                    </div>
-                                )}
-                            </Tracks>
-                            <Ticks count={5}>
-                                {({ ticks }) => (
-                                    <div className="slider-ticks">
-                                        {ticks.map(tick => (
-                                            <Tick key={tick.id} tick={tick} count={ticks.length} format={(val: number) => val.toString()} />
-                                        ))}
-                                    </div>
-                                )}
-                            </Ticks>
-                    </Slider>
+                                            )}
+                                        </Tracks>
+                                        <Ticks count={5}>
+                                            {({ ticks }) => (
+                                                <div className="slider-ticks">
+                                                    {ticks.map(tick => (
+                                                        <Tick key={tick.id} tick={tick} count={ticks.length} format={(val: number) => val.toString()} />
+                                                    ))}
+                                                </div>
+                                            )}
+                                        </Ticks>
+                                </Slider>
+                            </div>
+                     
                     )
                     }
 
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index d07028ec2..84b1705bc 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1414,14 +1414,19 @@ export namespace Doc {
         prevLayout === 'icon' && (doc.deiconifyLayout = undefined);
         doc.layout_fieldKey = deiconify || 'layout';
     }
-    export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: readonly number[]) {
+    export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: readonly number[], modifiers?: 'remove') { //, modifiers: 'remove' | 'set'
         if (!container) return;
-       
+
         const childFiltersByRanges = Cast(container._childFiltersByRanges, listSpec('string'), []);
+
+ 
+       
+       
         for (let i = 0; i < childFiltersByRanges.length; i += 3) {
-            console.log("inside if statement")
             if (childFiltersByRanges[i] === key) {
+                console.log("this is key inside childfilters by range " + key)
                 childFiltersByRanges.splice(i, 3);
+                console.log("this is child filters by range " + childFiltersByRanges)
                 break;
             }
         }
@@ -1431,7 +1436,15 @@ export namespace Doc {
             childFiltersByRanges.push(range[0].toString());
             childFiltersByRanges.push(range[1].toString());
             container._childFiltersByRanges = new List<string>(childFiltersByRanges);
+            console.log("this is child filters by range "+ childFiltersByRanges[0] + "," + childFiltersByRanges[1]  + "," + childFiltersByRanges[2])
+            console.log("this is new list " + container._childFiltersByRange)
+        }
+
+        if (modifiers){
+            childFiltersByRanges.splice(0,3)
+            container._childFiltersByRanges = new List<string>(childFiltersByRanges);
         }
+        console.log("this is child filters by range END"+ childFiltersByRanges[0] + "," + childFiltersByRanges[1]  + "," + childFiltersByRanges[2])
     }
 
     export const FilterSep = '::';