aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/client/views/FilterPanel.scss13
-rw-r--r--src/client/views/FilterPanel.tsx80
-rw-r--r--src/client/views/PropertiesView.scss11
-rw-r--r--src/client/views/PropertiesView.tsx5
4 files changed, 91 insertions, 18 deletions
diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 4f0460659..bb68afed3 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;
@@ -199,11 +199,14 @@
// 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;
}
}
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 68d29942b..4f4e39218 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -17,6 +17,7 @@ import { CiCircleRemove } from 'react-icons/ci';
interface filterProps {
rootDoc: Doc;
}
+
@observer
export class FilterPanel extends React.Component<filterProps> {
public static LayoutString(fieldKey: string) {
@@ -108,12 +109,18 @@ export class FilterPanel extends React.Component<filterProps> {
};
@observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
+ @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
+ @observable _removeBoolean = false;
+ // @observable _currentFilters: string[] ; -- instatitae array to store the currently selected filters (Ex: #food ). remove these filters when removing
+
@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'))));
return facets;
}
+
/**
* Responds to clicking the check box in the flyout menu
*/
@@ -141,6 +148,7 @@ export class FilterPanel extends React.Component<filterProps> {
} else {
this._chosenFacets.set(facetHeader, 'checkbox');
}
+ this._chosenFacetsCollapse.set(facetHeader, false)
};
facetValues = (facetHeader: string) => {
@@ -167,10 +175,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));
};
+ // change css and make the currently selected filters appear at the top
+
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)
+
return (
<div className="filterBox-treeView">
<div className="filterBox-select">
@@ -197,14 +206,41 @@ export class FilterPanel extends React.Component<filterProps> {
{facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
<div className = "filterBox-facetHeader-collapse">
- <AiOutlineMinusSquare/>
- {/* <CiCircleRemove/> */}
+ <div onClick = {action((e) => {
+ const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
+ this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
+ <AiOutlineMinusSquare/></div>
+
+ <div onClick = {action((e) => {
+
+ // delete this.activeFacets[facetHeader];
+ // StrListCast(this.targetDoc._childFilters).find(filter => filter.split(Doc.FilterSep)[2] = 'remove')
+ // .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
+ // ?.split(Doc.FilterSep)[2] === 'check'
+ // console.log("why cant i get this "+ console.log( StrListCast(this.targetDoc._childFilters)
+ // .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader)))
+ this.activeFacets.delete(facetHeader)
+ this._chosenFacets.delete(facetHeader)
+ this._chosenFacetsCollapse.delete(facetHeader)
+ // this._removeBoolean = true
+ // setTimeout(() => {this._removeBoolean = false}, 1000 )
+ // console.log("TRYING SOMETHING NEW " + e.target.checked)
+
+ // check if the current values are apart of the this.facetValues(facetHeader).map(fval ...
+
+ // SET UP BOOLEAN AND IF IT IS TRUE MEANS ITS CLICKED AND THEN ALL BOXES SHOULD BE UNCHECKED
+ }
+ )
+ }
+ // onChange = {undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, 'check'), 'set filter')}
+ >
+ <CiCircleRemove/> </div>
</div>
</div>
-
- {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
+ { this._chosenFacetsCollapse.get(facetHeader) ? null : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+ {/* */}
</div>
))}
</div>
@@ -227,19 +263,41 @@ export class FilterPanel extends React.Component<filterProps> {
/>
);
case 'checkbox':
+ // console.log("checking")
+
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={ this._removeBoolean ? false :
+ 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')}
+ // onClick={undoable (e =>
+ // e.target.checked ? this._currentFilters.push(fval) : , 'set filter'
+ // ) }
+ onClick = {action((e) => {
+ console.log("im here")
+ console.log( StrListCast(this.targetDoc._childFilters)
+ .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
+ // ?.split(Doc.FilterSep)[2] === 'check'
+ )
+ StrListCast(this.targetDoc._childFilters).find(filter => console.log(" rahhhhhh1 " + filter.split(Doc.FilterSep)[1] === facetValue))
+ StrListCast(this.targetDoc._childFilters).find(filter => console.log(" rahhhhhh2 " + filter.split(Doc.FilterSep)[2]) )
+ }
+
+ // console.log("this is an experiment " + StrListCast(this.targetDoc._childFilters)
+
+ )
+ // undoable (e => console.log(" this is an experiment " + e.target.checked), 'set filter')
+
+ }
/>
{facetValue}
</div>
diff --git a/src/client/views/PropertiesView.scss b/src/client/views/PropertiesView.scss
index 060b506e3..23bf31b95 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 a6a99b3cc..3ad60865d 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -584,7 +584,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}
@@ -1733,7 +1734,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>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-07 04:59:07 +0000