aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/FilterPanel.scss22
-rw-r--r--src/client/views/FilterPanel.tsx228
-rw-r--r--src/fields/Doc.ts19
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 = '::';
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 03:02:12 +0000