aboutsummaryrefslogtreecommitdiff
path: root/src/client/views/FilterPanel.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/views/FilterPanel.tsx')
-rw-r--r--src/client/views/FilterPanel.tsx371
1 files changed, 187 insertions, 184 deletions
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 127708ca3..1a923a995 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -15,11 +15,12 @@ import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai';
import { CiCircleRemove } from 'react-icons/ci';
import { Slider, Rail, Handles, Tracks, Ticks } from 'react-compound-slider';
import { TooltipRail, Handle, Tick, Track } from './nodes/SliderBox-components';
+import { DocumentOptions } from '../documents/Documents';
-//slight bug when you don't click on background canvas before creating filter and the you click on the canvas
+//slight bug when you don't click on background canvas before creating filter and the you click on the canvas
- //use to -- & determine amount of sigfinict digits -- make all sections blue evn when collapsed
- // transform switch to x and y not x coordinate and y coordinate
+//use to -- & determine amount of sigfinict digits -- make all sections blue evn when collapsed
+// transform switch to x and y not x coordinate and y coordinate
interface filterProps {
rootDoc: Doc;
@@ -51,6 +52,7 @@ export class FilterPanel extends React.Component<filterProps> {
if (targetDoc) {
SearchBox.foreachRecursiveDoc([this.targetDoc], (depth, doc) => allDocs.add(doc));
}
+ console.log('this is all Docs' + Array.from(allDocs));
return Array.from(allDocs);
}
@@ -66,12 +68,17 @@ export class FilterPanel extends React.Component<filterProps> {
.filter(key => key[0])
.filter(key => key.indexOf('modificationDate') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
.sort();
+
+ // console.log('THIS IS HERE ' + Doc.UserDoc().color + 'space ' + Doc.UserDoc().color);
noviceFields.forEach(key => sortedKeys.splice(sortedKeys.indexOf(key), 1));
+
+ console.log('this is novice fields ' + noviceFields + 'and this is sorted Keys ' + sortedKeys);
+
return [...noviceFields, ...sortedKeys];
}
@computed get rangeFilters() {
- return StrListCast(this.targetDoc?._childFiltersByRanges).filter((filter, i) => !( i % 3) )
+ return StrListCast(this.targetDoc?._childFiltersByRanges).filter((filter, i) => !(i % 3));
}
/**
@@ -85,25 +92,24 @@ export class FilterPanel extends React.Component<filterProps> {
@computed get mapActiveFiltersToFacets() {
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] ))
- return filters
+ this.activeFilters.map(filter => filters.set(filter.split(Doc.FilterSep)[1], filter.split(Doc.FilterSep)[0]));
+ return filters;
}
- //
+ //
// 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
+ // this set may overlap the selectedFilters
// if the components reloads, these will still exist and be shown
// ["#tags", "width", "height"]
//
@computed get activeFacetHeaders() {
- const activeHeaders = new Array()
- this.activeFilters.map(filter => activeHeaders.push(filter.split(Doc.FilterSep)[0]) )
+ const activeHeaders = new Array();
+ this.activeFilters.map(filter => activeHeaders.push(filter.split(Doc.FilterSep)[0]));
-
return activeHeaders;
}
/**
@@ -123,7 +129,7 @@ export class FilterPanel extends React.Component<filterProps> {
newarray = [];
subDocs.forEach(t => {
const facetVal = t[facetKey];
- // console.log("facetVal " + facetVal)
+ // console.log("facetVal " + facetVal)
if (facetVal instanceof RichTextField || typeof facetVal === 'string') rtFields++;
facetVal !== undefined && valueSet.add(Field.toString(facetVal as Field));
(facetVal === true || facetVal == false) && valueSet.add(Field.toString(!facetVal));
@@ -137,12 +143,10 @@ export class FilterPanel extends React.Component<filterProps> {
}
// }
// });
-
+
return { strings: Array.from(valueSet.keys()), rtFields };
}
-
-
public removeFilter = (filterName: string) => {
Doc.setDocFilter(this.targetDoc, filterName, undefined, 'remove');
Doc.setDocRangeFilter(this.targetDoc, filterName, undefined);
@@ -152,97 +156,85 @@ export class FilterPanel extends React.Component<filterProps> {
@observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
@observable _collapseReturnKeys = new Array();
-
// this computed function gets the active filters and maps them to their headers
//
// 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]})
+ // "width" => {"rangs", domain:[1978,1992]})
//
- @computed get activeRenderedFacetInfos(){
-
+ @computed get activeRenderedFacetInfos() {
return new Set(
- Array.from(new Set(Array.from(this._selectedFacetHeaders).concat(this.activeFacetHeaders))).map(
- facetHeader => {
-
- 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' ){
- return {facetHeader: facetHeader, renderType: 'text'}
-
- } else if (facetHeader !== 'tags' && nonNumbers / facetValues.strings.length < 0.1){
-
- 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)));
- const ranged = Doc.readDocRangeFilter(this.targetDoc, facetHeader); // not the filter range, but the zooomed in range on the filter
- return {facetHeader: facetHeader, renderType: 'range', domain: [extendedMinVal, extendedMaxVal], range: ranged ? ranged: [extendedMinVal, extendedMaxVal]}
-
- } else{
- return {facetHeader: facetHeader, renderType: 'checkbox'}
+ Array.from(new Set(Array.from(this._selectedFacetHeaders).concat(this.activeFacetHeaders))).map(facetHeader => {
+ 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') {
+ return { facetHeader: facetHeader, renderType: 'text' };
+ } else if (facetHeader !== 'tags' && nonNumbers / facetValues.strings.length < 0.1) {
+ 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)));
+ const ranged = Doc.readDocRangeFilter(this.targetDoc, facetHeader); // not the filter range, but the zooomed in range on the filter
+ return { facetHeader: facetHeader, renderType: 'range', domain: [extendedMinVal, extendedMaxVal], range: ranged ? ranged : [extendedMinVal, extendedMaxVal] };
+ } else {
+ return { facetHeader: facetHeader, renderType: 'checkbox' };
}
- ))
+ })
+ );
}
@observable _selectedFacetHeaders = new Set<string>();
/**
- * user clicks on a filter facet because they want to see it.
+ * 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) => { // just when someone chooses a facet
+ facetClick = (facetHeader: string) => {
+ // just when someone chooses a facet
this._selectedFacetHeaders.add(facetHeader);
- return
+ return;
};
-
@action
- sortingCurrentFacetValues = (facetHeader:string) => {
- this._collapseReturnKeys.splice(0)
+ sortingCurrentFacetValues = (facetHeader: string) => {
+ this._collapseReturnKeys.splice(0);
Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => {
- if ( renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader) {
- this._collapseReturnKeys.push(renderInfo.range)
-
- }
- })
-
- 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>)
- }
-
-
+ if (renderInfo.renderType === 'range' && renderInfo.facetHeader === facetHeader) {
+ this._collapseReturnKeys.push(renderInfo.range);
+ }
+ });
+
+ 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));
@@ -267,9 +259,15 @@ export class FilterPanel extends React.Component<filterProps> {
return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
};
-
render() {
+ // console.log('this is frist one today ' + this._allFacets);
+ this._allFacets.forEach(element => console.log(element));
const options = this._allFacets.filter(facet => this.activeFacetHeaders.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
+ // console.log('HEELLLLLL ' + DocumentOptions);
+
+ const freeformOptions: DocumentOptions = {};
+
+ console.log('wht is this ' + freeformOptions.author);
return (
<div className="filterBox-treeView">
@@ -290,50 +288,57 @@ export class FilterPanel extends React.Component<filterProps> {
</div>
<div className="filterBox-tree" key="tree">
- {Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => ( // iterato over activeFacetRenderInfos ==> renderInfo which you can renderInfo.facetHeader
- <div>
- <div className = "filterBox-facetHeader">
- <div className = "filterBox-facetHeader-Header"> </div>
- {renderInfo.facetHeader.charAt(0).toUpperCase() + renderInfo.facetHeader.slice(1)}
-
- <div className = "filterBox-facetHeader-collapse"
- onClick = {action((e) => {
- const collapseBoolValue = this._chosenFacetsCollapse.get(renderInfo.facetHeader)
- this._chosenFacetsCollapse.set(renderInfo.facetHeader, !collapseBoolValue )})}>
- {this._chosenFacetsCollapse.get(renderInfo.facetHeader) ? <AiOutlinePlusSquare/> : <AiOutlineMinusSquare/> }
-
- </div>
-
- <div className='filterBox-facetHeader-remove'
- onClick = {action((e) => {
-
- for (var key of this.facetValues(renderInfo.facetHeader)){
- if (this.mapActiveFiltersToFacets.get(key)){
- Doc.setDocFilter(this.targetDoc, renderInfo.facetHeader, key, 'remove')
- }}
- this._selectedFacetHeaders.delete(renderInfo.facetHeader)
- this._chosenFacetsCollapse.delete(renderInfo.facetHeader)
-
- if (renderInfo.domain){
- Doc.setDocRangeFilter(this.targetDoc, renderInfo.facetHeader, renderInfo.domain, 'remove')
- }})} >
-
- <CiCircleRemove/> </div>
+ {Array.from(this.activeRenderedFacetInfos.keys()).map(
+ (
+ renderInfo // iterato over activeFacetRenderInfos ==> renderInfo which you can renderInfo.facetHeader
+ ) => (
+ <div>
+ <div className="filterBox-facetHeader">
+ <div className="filterBox-facetHeader-Header"> </div>
+ {renderInfo.facetHeader.charAt(0).toUpperCase() + renderInfo.facetHeader.slice(1)}
+
+ <div
+ className="filterBox-facetHeader-collapse"
+ onClick={action(e => {
+ const collapseBoolValue = this._chosenFacetsCollapse.get(renderInfo.facetHeader);
+ this._chosenFacetsCollapse.set(renderInfo.facetHeader, !collapseBoolValue);
+ })}>
+ {this._chosenFacetsCollapse.get(renderInfo.facetHeader) ? <AiOutlinePlusSquare /> : <AiOutlineMinusSquare />}
+ </div>
+
+ <div
+ className="filterBox-facetHeader-remove"
+ onClick={action(e => {
+ for (var key of this.facetValues(renderInfo.facetHeader)) {
+ if (this.mapActiveFiltersToFacets.get(key)) {
+ Doc.setDocFilter(this.targetDoc, renderInfo.facetHeader, key, 'remove');
+ }
+ }
+ this._selectedFacetHeaders.delete(renderInfo.facetHeader);
+ this._chosenFacetsCollapse.delete(renderInfo.facetHeader);
+
+ if (renderInfo.domain) {
+ Doc.setDocRangeFilter(this.targetDoc, renderInfo.facetHeader, renderInfo.domain, 'remove');
+ }
+ })}>
+ <CiCircleRemove />{' '}
+ </div>
+ </div>
+
+ {this._chosenFacetsCollapse.get(renderInfo.facetHeader)
+ ? this.sortingCurrentFacetValues(renderInfo.facetHeader)
+ : this.displayFacetValueFilterUIs(renderInfo.renderType, renderInfo.facetHeader, renderInfo.domain, renderInfo.range)}
+ {/* */}
</div>
-
- { this._chosenFacetsCollapse.get(renderInfo.facetHeader) ?
- this.sortingCurrentFacetValues(renderInfo.facetHeader)
- : this.displayFacetValueFilterUIs(renderInfo.renderType, renderInfo.facetHeader, renderInfo.domain, renderInfo.range ) }
- {/* */}
- </div>
- ))}
+ )
+ )}
</div>
</div>
);
}
- private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string, renderInfoDomain?: number[] | undefined, renderInfoRange?: number[] ): React.ReactNode {
- switch (type /* renderInfo.type */ ) {
+ private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string, renderInfoDomain?: number[] | undefined, renderInfoRange?: number[]): React.ReactNode {
+ switch (type /* renderInfo.type */) {
case 'text': // if (this.chosenFacets.get(facetHeader) === 'text')
return (
<input
@@ -353,82 +358,80 @@ export class FilterPanel extends React.Component<filterProps> {
<div>
<input
style={{ width: 20, marginLeft: 20 }}
- checked={
- StrListCast(this.targetDoc._childFilters)
- .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
- ?.split(Doc.FilterSep)[2] === 'check'
+ checked={
+ 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')}
+ onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')}
/>
{facetValue}
</div>
);
- })
-
- case 'range':
- const domain = renderInfoDomain;
- if (domain){
- return(
- <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>
- )}
- </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>
-
- )
- }
+ });
+
+ case 'range':
+ const domain = renderInfoDomain;
+ if (domain) {
+ return (
+ <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>
+ )}
+ </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>
+ );
+ }
-
-
- // 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
-
- ;
+ // 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
}
}
}
-
-
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 13:05:44 +0000