aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/documents/Documents.ts7
-rw-r--r--src/client/views/FilterPanel.scss34
-rw-r--r--src/client/views/FilterPanel.tsx414
-rw-r--r--src/client/views/PropertiesView.scss11
-rw-r--r--src/client/views/PropertiesView.tsx5
-rw-r--r--src/fields/Doc.ts5
6 files changed, 411 insertions, 65 deletions
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8eeceaa15..5d7ca6f6d 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -96,7 +96,7 @@ class NumInfo extends FInfo {
class StrInfo extends FInfo {
fieldType? = 'string';
values?: string[] = [];
- constructor(d: string, readOnly?: boolean, values?: string[]) {
+ constructor(d: string, readOnly?: boolean, values?: string[], filterable?:boolean) {
super(d, readOnly);
this.values = values;
}
@@ -138,9 +138,14 @@ class DateInfo extends FInfo {
fieldType? = 'date';
values?: DateField[] = [];
}
+class ListInfo extends FInfo {
+ fieldType? = 'list';
+ values?: List<any>[] = [];
+}
type BOOLt = BoolInfo | boolean;
type NUMt = NumInfo | number;
type STRt = StrInfo | string;
+type LISTt = ListInfo | List<any>;
type DOCt = DocInfo | Doc;
type DIMt = DimInfo | typeof DimUnit.Pixel | typeof DimUnit.Ratio;
type PEVt = PEInfo | 'none' | 'all';
diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 4f0460659..78e7904b8 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -135,7 +135,7 @@
.filterBox-addFilter {
width: 120px;
- background-color: #e9e9e9;
+ backgroundcolor: #e9e9e9;
border-radius: 12px;
padding: 5px;
margin: 5px;
@@ -188,6 +188,8 @@
margin-bottom: 10px;
margin-left: 5px;
overflow: auto;
+
+
}
}
@@ -199,14 +201,36 @@
// float:right;
.filterBox-facetHeader-collapse{
- float: right;
- justify-items: right;
- align-items: flex-end;
+ // float: right;
+ // justify-items: right;
+ // align-items: flex-end;
margin-left: auto;
- margin-right: 9px;
+ // margin-right: 9px;
+
+ float: right;
+ font-size: 16;
+ }
+
+ .filterBox-facetHeader-remove{
+ // margin-left: auto;
+ float: right;
+ font-size: 16;
+ font-weight:bold;
}
+
+
}
+.filterbox-collpasedAndActive{
+ // left:100px;
+ text-indent: 18px;
+ // background-color: pink;
+ font-size: 12px;
+ font-weight: bold;
+
+}
+
+
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 68d29942b..b7718c6a3 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -11,12 +11,17 @@ 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 { 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';
+
+//slight bug when you don't click on background canvas before creating filter and the you click on the canvas
interface filterProps {
rootDoc: Doc;
}
+
@observer
export class FilterPanel extends React.Component<filterProps> {
public static LayoutString(fieldKey: string) {
@@ -62,19 +67,60 @@ 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);
+ }
+
+ @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] ))
+ console.log("what is wrong with filters " +filters )
+ 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
+ // 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]) )
+
+
+ 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
*/
- @computed get currentFacets() {
- return this.activeFilters.map(filter => filter.split(Doc.FilterSep)[0]);
- }
+ // @computed get currentFacets() {
+ // return this.activeFilters.map(filter => filter.split(Doc.FilterSep)[0]);
+ // }
gatherFieldValues(childDocs: Doc[], facetKey: string) {
const valueSet = new Set<string>();
@@ -86,6 +132,7 @@ export class FilterPanel extends React.Component<filterProps> {
newarray = [];
subDocs.forEach(t => {
const facetVal = t[facetKey];
+ // 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));
@@ -99,50 +146,199 @@ 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);
};
- @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
- @computed get activeFacets() {
- 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'))));
- return facets;
+ // @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
+
+ //
+ // 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 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'}
+ }
+ }
+ ))
}
+
+ // @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>();
+
/**
- * 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) => {
- if (!this.targetDoc) return;
- const allCollectionDocs = this.targetDocChildren;
- const facetValues = this.gatherFieldValues(this.targetDocChildren, facetHeader);
+ facetClick = (facetHeader: string) => { // just when someone chooses a facet
- 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) {
- } else {
- this._chosenFacets.set(facetHeader, 'checkbox');
- }
+ 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) => {
+
+ 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)
+ }
+ }
+
+ return (<div className = " filterbox-collpasedAndActive">
+
+ {this._collapseReturnKeys.join(', ') }
+ {/* .toString()} */}
+ </div>)
+
+
+ }
+
+
+
+
facetValues = (facetHeader: string) => {
const allCollectionDocs = new Set<Doc>();
SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
@@ -167,10 +363,11 @@ 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() {
- 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)
+ // 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 (
<div className="filterBox-treeView">
<div className="filterBox-select">
@@ -190,21 +387,56 @@ export class FilterPanel extends React.Component<filterProps> {
</div>
<div className="filterBox-tree" key="tree">
- {Array.from(this.activeFacets.keys()).map(facetHeader => (
+ {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>
- {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
+ {renderInfo.facetHeader.charAt(0).toUpperCase() + renderInfo.facetHeader.slice(1)}
- <div className = "filterBox-facetHeader-collapse">
- <AiOutlineMinusSquare/>
- {/* <CiCircleRemove/> */}
- </div>
-
+ <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')
+ }}
+
+ if (renderInfo.facetHeader)
+
+ this._selectedFacetHeaders.delete(renderInfo.facetHeader)
+
+ // this.activeFacets.delete(renderInfo.facetHeader)
+ // this._chosenFacets.delete(facetHeader)
+ this._chosenFacetsCollapse.delete(renderInfo.facetHeader)
+
+ 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 )
+
+ })} >
+
+ <CiCircleRemove/> </div>
+ {/* </div> */}
+
</div>
-
- {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
+ { 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>
))}
</div>
@@ -212,9 +444,10 @@ export class FilterPanel extends React.Component<filterProps> {
);
}
- private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
- switch (type) {
- case 'text':
+ 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 (
<input
placeholder={
@@ -227,24 +460,93 @@ export class FilterPanel extends React.Component<filterProps> {
/>
);
case 'checkbox':
+
return this.facetValues(facetHeader).map(fval => {
+
const facetValue = fval;
return (
<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':
+ 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>
+ );
+ })}
+ </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>
+ )
+ }
+
+
+
+ // 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
+
+ ;
}
}
}
+
+
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index b79486167..f7dc1dc68 100644
--- a/src/client/views/PropertiesView.scss
+++ b/src/client/views/PropertiesView.scss
@@ -26,6 +26,17 @@
padding: 5px 10px;
}
+ .propertiesView-propAndInfoGrouping{
+ display: flex;
+ }
+
+ .propertiesView-info{
+ margin-top: 20;
+ margin-right: 10;
+ float: right;
+ font-size: 20;
+ }
+
.propertiesView-sharing {
//border-bottom: 1px solid black;
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 27b9c3c7a..35ca5dea4 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -587,7 +587,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
return (
<div>
- <div className = "propertiesView-wordType">Type</div>
+ Type
+ {/* <div className = "propertiesView-wordType">Type</div> */}
<div className= "currentType">
<div className='currentType-icon'>
{this.currentComponent}
@@ -1727,7 +1728,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
<div className="propertiesView-title" style={{ width: this.props.width }}>
Properties
</div>
- <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}>
+ <div className = "propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation//properties/')}>
<GrCircleInformation/> </div>
</div>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index ad557e079..d07028ec2 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1414,16 +1414,19 @@ export namespace Doc {
prevLayout === 'icon' && (doc.deiconifyLayout = undefined);
doc.layout_fieldKey = deiconify || 'layout';
}
- export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: number[]) {
+ export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: readonly number[]) {
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) {
childFiltersByRanges.splice(i, 3);
break;
}
}
if (range !== undefined) {
+ console.log("in doc.ts in set range filter")
childFiltersByRanges.push(key);
childFiltersByRanges.push(range[0].toString());
childFiltersByRanges.push(range[1].toString());
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 05:25:58 +0000