From 4929d8b562c4f6300053cfd7d9583106df75b221 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 18 Jul 2023 16:06:29 -0400
Subject: continued fixing merge

---
 src/client/views/FilterPanel.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 68d29942b..5d1e5c08d 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -198,7 +198,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                 
                                 <div className = "filterBox-facetHeader-collapse"> 
                                  <AiOutlineMinusSquare/>
-                                 {/* <CiCircleRemove/> */}
+                                 <CiCircleRemove/>
                                   </div>
                                
                             </div>
-- 
cgit v1.2.3-70-g09d2


From a193bdcb4e3abbb41698ef1ed0f65ff8407c5bf4 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 19 Jul 2023 13:23:25 -0400
Subject: collapsing in filters works

---
 src/client/views/FilterPanel.tsx | 27 ++++++++++++++++++++++-----
 1 file changed, 22 insertions(+), 5 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 5d1e5c08d..1ab7ab54e 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -17,6 +17,12 @@ import { CiCircleRemove } from 'react-icons/ci';
 interface filterProps {
     rootDoc: Doc;
 }
+
+const handleCollapse = (currentHeader: string) => {
+    // this._chosenFacetsCollapse.set(currentHeader, true);
+    console.log("hi")
+}
+
 @observer
 export class FilterPanel extends React.Component<filterProps> {
     public static LayoutString(fieldKey: string) {
@@ -108,12 +114,16 @@ export class FilterPanel extends React.Component<filterProps> {
     };
 
     @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
+    @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
+
     @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 +151,7 @@ export class FilterPanel extends React.Component<filterProps> {
         } else {
             this._chosenFacets.set(facetHeader, 'checkbox');
         }
+        this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
     facetValues = (facetHeader: string) => {
@@ -167,10 +178,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));
     };
 
+    // need boolean that is true or false on click but individual to that specific header  
+
     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 +209,18 @@ export class FilterPanel extends React.Component<filterProps> {
                                 {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
                                 
                                 <div className = "filterBox-facetHeader-collapse"> 
-                                 <AiOutlineMinusSquare/>
+                                    <div onClick = {action((e) => { 
+                                        const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
+                                        this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
+                                             <AiOutlineMinusSquare/></div>
+                                
                                  <CiCircleRemove/>
                                   </div>
                                
                             </div>
                            
-
-                            {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
+                            { this._chosenFacetsCollapse.get(facetHeader) ? null : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                            {/*  */}
                         </div>
                     ))}
                 </div>
@@ -213,6 +229,7 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
+        console.log("opening a specific " + this.activeFacets.get(facetHeader))
         switch (type) {
             case 'text':
                 return (
-- 
cgit v1.2.3-70-g09d2


From e29a26a5095bbf8f05d327b1bbefc991967c6f2b Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 19 Jul 2023 15:58:19 -0400
Subject: filter - trying to work on removing

---
 src/client/views/FilterPanel.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 1ab7ab54e..12dbf691f 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -18,11 +18,6 @@ interface filterProps {
     rootDoc: Doc;
 }
 
-const handleCollapse = (currentHeader: string) => {
-    // this._chosenFacetsCollapse.set(currentHeader, true);
-    console.log("hi")
-}
-
 @observer
 export class FilterPanel extends React.Component<filterProps> {
     public static LayoutString(fieldKey: string) {
@@ -178,7 +173,7 @@ 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));
     };
 
-    // need boolean that is true or false on click but individual to that specific header  
+    // 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 }));
@@ -214,7 +209,10 @@ export class FilterPanel extends React.Component<filterProps> {
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
                                              <AiOutlineMinusSquare/></div>
                                 
-                                 <CiCircleRemove/>
+                                    <div onClick = 
+                                  {action((e) =>  this.activeFacets.delete(facetHeader))
+                                    } >
+                                             <CiCircleRemove/> </div> 
                                   </div>
                                
                             </div>
-- 
cgit v1.2.3-70-g09d2


From 054ca2c87ebd67f24ddf70e686f0188d6a4fa620 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 20 Jul 2023 11:58:23 -0400
Subject: filter - closing works w/o filters selected

---
 src/client/views/FilterPanel.tsx | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 12dbf691f..416843f14 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -209,9 +209,18 @@ export class FilterPanel extends React.Component<filterProps> {
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
                                              <AiOutlineMinusSquare/></div>
                                 
-                                    <div onClick = 
-                                  {action((e) =>  this.activeFacets.delete(facetHeader))
-                                    } >
+                                    <div onClick = {action((e) => { 
+                                     
+                                        // delete this.activeFacets[facetHeader];
+                                         this.activeFacets.delete(facetHeader)
+                                         this._chosenFacets.delete(facetHeader)
+                                         //console.log("TRYING SOMETHING NEW " + e.target.checked)
+                                         
+                                        }
+                                        )
+                                    }  
+                                    // onChange = {undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, 'check'), 'set filter')}
+                                     >
                                              <CiCircleRemove/> </div> 
                                   </div>
                                
@@ -227,7 +236,7 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
-        console.log("opening a specific " + this.activeFacets.get(facetHeader))
+        console.log("im here")
         switch (type) {
             case 'text':
                 return (
@@ -242,6 +251,7 @@ export class FilterPanel extends React.Component<filterProps> {
                     />
                 );
             case 'checkbox':
+                // console.log("checking")
                 return this.facetValues(facetHeader).map(fval => {
                     const facetValue = fval;
                     return (
@@ -255,6 +265,9 @@ export class FilterPanel extends React.Component<filterProps> {
                                 }
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')}
+                                onClick={undoable (e => 
+                                    console.log("boolean value with " + facetValue + ":" + e.target.checked), 'set filter'
+                                ) }
                             />
                             {facetValue}
                         </div>
-- 
cgit v1.2.3-70-g09d2


From f847b894e79a0914ea2864f07ece92ac90eab1de Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 20 Jul 2023 13:10:01 -0400
Subject: filter - still working on closing

---
 src/client/views/FilterPanel.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 416843f14..da00ae255 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -110,6 +110,7 @@ export class FilterPanel extends React.Component<filterProps> {
 
     @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
     @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
+    // @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)
@@ -214,7 +215,9 @@ export class FilterPanel extends React.Component<filterProps> {
                                         // delete this.activeFacets[facetHeader];
                                          this.activeFacets.delete(facetHeader)
                                          this._chosenFacets.delete(facetHeader)
-                                         //console.log("TRYING SOMETHING NEW " + e.target.checked)
+                                        //  console.log("TRYING SOMETHING NEW " + e.target.checked)
+                                        
+                                        // check if the current values are apart of the this.facetValues(facetHeader).map(fval ... 
                                          
                                         }
                                         )
@@ -236,7 +239,6 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
-        console.log("im here")
         switch (type) {
             case 'text':
                 return (
@@ -252,6 +254,7 @@ export class FilterPanel extends React.Component<filterProps> {
                 );
             case 'checkbox':
                 // console.log("checking")
+           
                 return this.facetValues(facetHeader).map(fval => {
                     const facetValue = fval;
                     return (
@@ -266,7 +269,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')}
                                 onClick={undoable (e => 
-                                    console.log("boolean value with " + facetValue + ":" + e.target.checked), 'set filter'
+                                    e.target.checked ? this._currentFilters.push(fval) :  , 'set filter'
                                 ) }
                             />
                             {facetValue}
-- 
cgit v1.2.3-70-g09d2


From 50cb7d0981a71c2eb45fbecfc2befad94d431eaa Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Fri, 21 Jul 2023 15:07:04 -0400
Subject: filter - stuck on cancelling out

need to remove filters and stop them from showing up.
---
 src/client/views/FilterPanel.tsx | 43 ++++++++++++++++++++++++++++++++--------
 1 file changed, 35 insertions(+), 8 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index da00ae255..4f4e39218 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -110,6 +110,7 @@ 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() {
@@ -213,12 +214,21 @@ export class FilterPanel extends React.Component<filterProps> {
                                     <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 
                                         }
                                         )
                                     }  
@@ -261,16 +271,33 @@ 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={ 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')}
-                                onClick={undoable (e => 
-                                    e.target.checked ? this._currentFilters.push(fval) :  , '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>
-- 
cgit v1.2.3-70-g09d2


From b3c0db8e2d6f29b6b09474b8252760e95f80de95 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Mon, 24 Jul 2023 14:46:05 -0400
Subject: filter- fixed removable and css (collapse bugs)

---
 src/client/views/FilterPanel.scss |   6 ++
 src/client/views/FilterPanel.tsx  | 112 +++++++++++++++++++-------------------
 src/fields/Doc.ts                 |   1 +
 3 files changed, 64 insertions(+), 55 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index bb68afed3..bb1e79d11 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -209,6 +209,12 @@
         font-size: 16;
     }
 
+    .filterBox-facetHeader-remove{
+        // margin-left: auto;
+        float: right;
+        font-size: 16;
+    }
+
 }
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 4f4e39218..c99967ef7 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -14,6 +14,8 @@ import { undoable } from '../util/UndoManager';
 import { AiOutlineMinusSquare } from 'react-icons/ai';
 import { CiCircleRemove } from 'react-icons/ci';
 
+//slight bug when you don't click on background canvas before creating filter and the you click on the canvas 
+
 interface filterProps {
     rootDoc: Doc;
 }
@@ -103,6 +105,8 @@ 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);
@@ -110,11 +114,10 @@ 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 
+    @observable _currentActiveFilters = new ObservableMap<string, string>();
 
     @computed get activeFacets() {
-        console.log("chosen collpase " + this._chosenFacetsCollapse)
+        // 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'))));
@@ -151,6 +154,25 @@ export class FilterPanel extends React.Component<filterProps> {
         this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
+    @action
+    sortingCurrentFacetValues = (facetHeader:string) => {
+        
+        let returnKeys = [];
+    
+        console.log("this is current filtes " + this._currentActiveFilters)
+        for (var key of this.facetValues(facetHeader)){
+            console.log("key : " + key  )
+            if (this._currentActiveFilters.get(key)){
+                console.log("pushing")
+              returnKeys.push(key) 
+        }}
+        console.log("this is return keys " + returnKeys)
+        return returnKeys.toString();
+    }
+    
+    
+
+
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
@@ -175,7 +197,6 @@ 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 }));
@@ -205,41 +226,37 @@ export class FilterPanel extends React.Component<filterProps> {
                                 <div className = "filterBox-facetHeader-Header"> </div>
                                 {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
                                 
-                                <div className = "filterBox-facetHeader-collapse"> 
-                                    <div onClick = {action((e) => { 
+                                {/* <div className = "filterBox-facetHeader-collapse">  */}
+                                    <div className = "filterBox-facetHeader-collapse"
+                                     onClick = {action((e) => { 
                                         const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
-                                             <AiOutlineMinusSquare/></div>
+
+                                             <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 className='filterBox-facetHeader-remove'
+                                     onClick = {action((e) => { 
+                                        for (var key of this.facetValues(facetHeader)){
+                                            if (this._currentActiveFilters.get(key)){
+                                                Doc.setDocFilter(this.targetDoc, facetHeader, key, 'remove')
+                                                this._currentActiveFilters.delete(facetHeader)
+                                        }}
+
+                                        this.activeFacets.delete(facetHeader)
+                                        this._chosenFacets.delete(facetHeader)
+                                        this._chosenFacetsCollapse.delete(facetHeader)
+
+                                        })}  >
+                                            
+                                    <CiCircleRemove/> </div> 
+                                  {/* </div> */}
+
                             </div>
                            
-                            { this._chosenFacetsCollapse.get(facetHeader) ? null : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                            { this._chosenFacetsCollapse.get(facetHeader) ? 
+                             this.sortingCurrentFacetValues(facetHeader) : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
                             {/*  */}
                         </div>
                     ))}
@@ -263,7 +280,6 @@ export class FilterPanel extends React.Component<filterProps> {
                     />
                 );
             case 'checkbox':
-                // console.log("checking")
            
                 return this.facetValues(facetHeader).map(fval => {
                     const facetValue = fval;
@@ -271,7 +287,7 @@ export class FilterPanel extends React.Component<filterProps> {
                         <div>
                             <input
                                 style={{ width: 20, marginLeft: 20 }}
-                                checked={ this._removeBoolean ? false : 
+                                checked={ 
                                         StrListCast(this.targetDoc._childFilters)
                                             .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
                                             ?.split(Doc.FilterSep)[2] === 'check'
@@ -279,25 +295,11 @@ export class FilterPanel extends React.Component<filterProps> {
                                 }
                                 type={type}
                                 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')
-                                   
-                                }
+                                onClick={undoable (e => 
+                                    e.target.checked ? this._currentActiveFilters.set(fval, facetHeader) : this._currentActiveFilters.delete(facetHeader) , 'set filter'
+                                ) }
+                                
+                              
                             />
                             {facetValue}
                         </div>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 5a8a6e4b6..770a72855 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1437,6 +1437,7 @@ export namespace Doc {
     // all documents with the specified value for the specified key are included/excluded
     // based on the modifiers :"check", "x", undefined
     export function setDocFilter(container: Opt<Doc>, key: string, value: any, modifiers: 'remove' | 'match' | 'check' | 'x' | 'exists' | 'unset', toggle?: boolean, fieldPrefix?: string, append: boolean = true) {
+       console.log("in setDocFilter: key "+ key + "value " + value)
         if (!container) return;
         const filterField = '_' + (fieldPrefix ? fieldPrefix + '_' : '') + 'childFilters';
         const childFilters = StrListCast(container[filterField]);
-- 
cgit v1.2.3-70-g09d2


From 14032744483a7fc83d552ccbe263cf9ec487fa25 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 25 Jul 2023 12:30:07 -0400
Subject: filters - collapsing works (w/o ui improvement)

---
 src/client/views/FilterPanel.scss |  7 +++++++
 src/client/views/FilterPanel.tsx  | 26 +++++++++++++++-----------
 2 files changed, 22 insertions(+), 11 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index bb1e79d11..d774983a7 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -215,6 +215,13 @@
         font-size: 16;
     }
 
+
+
+}
+.filterbox-collpasedAndActive{
+    left:100px;
+    background-color: pink;
+    font-size: 100px;
 }
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index c99967ef7..4cfc02ff7 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -115,6 +115,9 @@ export class FilterPanel extends React.Component<filterProps> {
     @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
     @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
     @observable _currentActiveFilters = new ObservableMap<string, string>();
+    @observable _collapseReturnKeys = new Array();
+
+    //  let returnKeys = [];
 
     @computed get activeFacets() {
         // console.log("chosen collpase " + this._chosenFacetsCollapse)
@@ -154,20 +157,16 @@ export class FilterPanel extends React.Component<filterProps> {
         this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
+  
     @action
     sortingCurrentFacetValues = (facetHeader:string) => {
-        
-        let returnKeys = [];
-    
-        console.log("this is current filtes " + this._currentActiveFilters)
+
         for (var key of this.facetValues(facetHeader)){
             console.log("key : " + key  )
             if (this._currentActiveFilters.get(key)){
-                console.log("pushing")
-              returnKeys.push(key) 
+                this._collapseReturnKeys.push(key) 
         }}
-        console.log("this is return keys " + returnKeys)
-        return returnKeys.toString();
+        return this._collapseReturnKeys.toString();
     }
     
     
@@ -241,7 +240,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                         for (var key of this.facetValues(facetHeader)){
                                             if (this._currentActiveFilters.get(key)){
                                                 Doc.setDocFilter(this.targetDoc, facetHeader, key, 'remove')
-                                                this._currentActiveFilters.delete(facetHeader)
+                                                this._currentActiveFilters.delete(key)
                                         }}
 
                                         this.activeFacets.delete(facetHeader)
@@ -256,7 +255,9 @@ export class FilterPanel extends React.Component<filterProps> {
                             </div>
                            
                             { this._chosenFacetsCollapse.get(facetHeader) ? 
-                             this.sortingCurrentFacetValues(facetHeader) : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                            <div className = 'filterbox-collpasedAndActive'> {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
+                            
+                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
                             {/*  */}
                         </div>
                     ))}
@@ -296,7 +297,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval,  e.target.checked ? 'check' : 'remove'), 'set filter')}
                                 onClick={undoable (e => 
-                                    e.target.checked ? this._currentActiveFilters.set(fval, facetHeader) : this._currentActiveFilters.delete(facetHeader) , 'set filter'
+                                    e.target.checked ? this._currentActiveFilters.set(fval, facetHeader) : this._currentActiveFilters.delete(fval) , 'set filter'
                                 ) }
                                 
                               
@@ -308,3 +309,6 @@ export class FilterPanel extends React.Component<filterProps> {
         }
     }
 }
+
+
+// NEED TO LEARN HOW TO RESET FILTERS WHEN WEBPAGE IS RELOADED
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From b84d3851d3baeeb0e2da5d4bd2fde9c911697d21 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 25 Jul 2023 15:05:46 -0400
Subject: filter - working w/ css (looking for recommendations)

---
 src/client/views/FilterPanel.scss | 13 ++++++++++---
 src/client/views/FilterPanel.tsx  | 16 +++++++++++++---
 2 files changed, 23 insertions(+), 6 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index d774983a7..7cf886e12 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -188,6 +188,8 @@
         margin-bottom: 10px;
         margin-left: 5px;
         overflow: auto;
+
+
     }
 }
 
@@ -218,11 +220,16 @@
 
 
 }
+
 .filterbox-collpasedAndActive{
-    left:100px;
-    background-color: pink;
-    font-size: 100px;
+    // 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 4cfc02ff7..b03e11f79 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -161,12 +161,21 @@ export class FilterPanel extends React.Component<filterProps> {
     @action
     sortingCurrentFacetValues = (facetHeader:string) => {
 
+        this._collapseReturnKeys.splice(0)
+
         for (var key of this.facetValues(facetHeader)){
             console.log("key : " + key  )
             if (this._currentActiveFilters.get(key)){
                 this._collapseReturnKeys.push(key) 
         }}
-        return this._collapseReturnKeys.toString();
+        // return "hello"
+
+        return (<div className = " filterbox-collpasedAndActive">
+          
+            {this._collapseReturnKeys.toString()}
+        </div>)
+        
+        
     }
     
     
@@ -255,8 +264,9 @@ export class FilterPanel extends React.Component<filterProps> {
                             </div>
                            
                             { this._chosenFacetsCollapse.get(facetHeader) ? 
-                            <div className = 'filterbox-collpasedAndActive'> {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
-                            
+                            // <div className = 'filterbox-collpasedAndActive' style={{backgroundColor: 'yellow', fontSize: 50}} > {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
+                            this.sortingCurrentFacetValues(facetHeader) 
+                            // &&  this._collapseReturnKeys.splice(0)
                              : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
                             {/*  */}
                         </div>
-- 
cgit v1.2.3-70-g09d2


From 43670f51a7dd627deeb3612f1066e51871235f2d Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 26 Jul 2023 15:35:59 -0400
Subject: filter - UI updates

---
 src/client/views/FilterPanel.scss | 1 +
 src/client/views/FilterPanel.tsx  | 7 ++++---
 2 files changed, 5 insertions(+), 3 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 7cf886e12..78e7904b8 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -215,6 +215,7 @@
         // margin-left: auto;
         float: right;
         font-size: 16;
+        font-weight:bold;
     }
 
 
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index b03e11f79..b14e73208 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -11,7 +11,7 @@ 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';
 
 //slight bug when you don't click on background canvas before creating filter and the you click on the canvas 
@@ -172,7 +172,8 @@ export class FilterPanel extends React.Component<filterProps> {
 
         return (<div className = " filterbox-collpasedAndActive">
           
-            {this._collapseReturnKeys.toString()}
+            {this._collapseReturnKeys.join(',  ') }
+            {/* .toString()} */}
         </div>)
         
         
@@ -240,7 +241,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                         const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
 
-                                             <AiOutlineMinusSquare/>
+                                        {this._chosenFacetsCollapse.get(facetHeader) ? <AiOutlinePlusSquare/> :  <AiOutlineMinusSquare/> }    
                                              
                                              </div>
                                 
-- 
cgit v1.2.3-70-g09d2


From 9447ee01d501b3db69358b5b1526e640f2c54531 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 27 Jul 2023 13:02:19 -0400
Subject: filter - commented out slider and narrowing

moving forward: need to change observable map to computed values
---
 src/client/documents/Documents.ts |  7 ++++++-
 src/client/views/FilterPanel.tsx  | 38 ++++++++++++++++++++++++++++++++++++++
 2 files changed, 44 insertions(+), 1 deletion(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5ef033e35..8cb4be72c 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.tsx b/src/client/views/FilterPanel.tsx
index b14e73208..ccd5253ff 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -117,6 +117,10 @@ export class FilterPanel extends React.Component<filterProps> {
     @observable _currentActiveFilters = new ObservableMap<string, string>();
     @observable _collapseReturnKeys = new Array();
 
+    // @computed get _currentActiveFilters(){
+    //     return StrListCast(this.targetDoc.docFilters).map()
+    // }
+
     //  let returnKeys = [];
 
     @computed get activeFacets() {
@@ -151,6 +155,40 @@ export class FilterPanel extends React.Component<filterProps> {
         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) {
+
+            // const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
+            // 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];
+            // const scriptText = `setDocRangeFilter(this?.target, "${facetHeader}", range)`;
+
+            // 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');
         }
-- 
cgit v1.2.3-70-g09d2


From af5377f0e5bc69488c1620ae72b960f2a0f5d8f9 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Mon, 31 Jul 2023 12:58:32 -0400
Subject: filters - fixed bug on reload

---
 package-lock.json                | 91 ++++++++++++++++++++++++++++++++++++++--
 src/client/views/FilterPanel.tsx | 47 +++++++++++++--------
 2 files changed, 118 insertions(+), 20 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/package-lock.json b/package-lock.json
index 082531ea0..e08568816 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6902,12 +6902,97 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
+                                "string-width-cjs": {
+                                    "version": "npm:string-width@4.2.3",
+                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                    "requires": {
+                                        "emoji-regex": "^8.0.0",
+                                        "is-fullwidth-code-point": "^3.0.0",
+                                        "strip-ansi": "^6.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
+                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
+                                },
+                                "strip-ansi-cjs": {
+                                    "version": "npm:strip-ansi@6.0.1",
+                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                    "requires": {
+                                        "ansi-regex": "^5.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        }
+                                    }
+                                },
+                                "wrap-ansi-cjs": {
+                                    "version": "npm:wrap-ansi@7.0.0",
+                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                                    "requires": {
+                                        "ansi-styles": "^4.0.0",
+                                        "string-width": "^4.1.0",
+                                        "strip-ansi": "^6.0.0"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "string-width": {
+                                            "version": "4.2.3",
+                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                            "requires": {
+                                                "emoji-regex": "^8.0.0",
+                                                "is-fullwidth-code-point": "^3.0.0",
+                                                "strip-ansi": "^6.0.1"
+                                            }
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
                                 }
                             }
                         },
@@ -8412,7 +8497,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width@4.2.3",
+                            "version": "npm:string-width-cjs@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8435,7 +8520,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi@6.0.1",
+                            "version": "npm:strip-ansi-cjs@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8594,7 +8679,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi@7.0.0",
+                            "version": "npm:wrap-ansi-cjs@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index ccd5253ff..f85052ff2 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -89,6 +89,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));
@@ -102,6 +103,7 @@ export class FilterPanel extends React.Component<filterProps> {
         }
         //     }
         // });
+       
         return { strings: Array.from(valueSet.keys()), rtFields };
     }
 
@@ -114,14 +116,20 @@ export class FilterPanel extends React.Component<filterProps> {
 
     @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
     @observable _chosenFacetsCollapse = new ObservableMap<string, boolean>();
-    @observable _currentActiveFilters = new ObservableMap<string, string>();
     @observable _collapseReturnKeys = new Array();
 
-    // @computed get _currentActiveFilters(){
-    //     return StrListCast(this.targetDoc.docFilters).map()
-    // }
 
-    //  let returnKeys = [];
+    // this computed function gets the active filters and maps them to their headers
+
+    @computed get currentActiveFilterz(){ 
+        const filters = new Map<string, string>();
+        //this.targetDoc.docFilters
+        StrListCast(this.targetDoc?._childFilters).map(filter => filters.set(filter.split(Doc.FilterSep)[1] ,filter.split(Doc.FilterSep)[0] ))
+        console.log("what is wrong with filters " +filters )
+         return filters
+    }
+
+   //  let returnKeys = [];
 
     @computed get activeFacets() {
         // console.log("chosen collpase " + this._chosenFacetsCollapse)
@@ -202,11 +210,11 @@ export class FilterPanel extends React.Component<filterProps> {
         this._collapseReturnKeys.splice(0)
 
         for (var key of this.facetValues(facetHeader)){
-            console.log("key : " + key  )
-            if (this._currentActiveFilters.get(key)){
+           // console.log("key : " + key  )
+            if (this.currentActiveFilterz.get(key)){
+            //    console.log("WEREEE HERHEHHHHEHHHHEEE")
                 this._collapseReturnKeys.push(key) 
         }}
-        // return "hello"
 
         return (<div className = " filterbox-collpasedAndActive">
           
@@ -273,12 +281,21 @@ export class FilterPanel extends React.Component<filterProps> {
                                 <div className = "filterBox-facetHeader-Header"> </div>
                                 {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
                                 
-                                {/* <div className = "filterBox-facetHeader-collapse">  */}
                                     <div className = "filterBox-facetHeader-collapse"
                                      onClick = {action((e) => { 
+
+                                        for (const [key, value] of this.currentActiveFilterz) {
+                                            
+                                              console.log("NEW KEY " + key  + "NEW VAL " + value);
+                                    
+                                            }
+                                        console.log("this is gather field values : " + this.gatherFieldValues(this.targetDocChildren, facetHeader))
+                                        console.log("this is current facets: " + this.currentFacets)
+
+                                        console.log("this is facet Header " + facetHeader + ". this is the get " + this.activeFacets.get(facetHeader))
                                         const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
                                         this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
-
+                                        
                                         {this._chosenFacetsCollapse.get(facetHeader) ? <AiOutlinePlusSquare/> :  <AiOutlineMinusSquare/> }    
                                              
                                              </div>
@@ -286,9 +303,8 @@ export class FilterPanel extends React.Component<filterProps> {
                                     <div className='filterBox-facetHeader-remove'
                                      onClick = {action((e) => { 
                                         for (var key of this.facetValues(facetHeader)){
-                                            if (this._currentActiveFilters.get(key)){
+                                            if (this.currentActiveFilterz.get(key)){
                                                 Doc.setDocFilter(this.targetDoc, facetHeader, key, 'remove')
-                                                this._currentActiveFilters.delete(key)
                                         }}
 
                                         this.activeFacets.delete(facetHeader)
@@ -332,6 +348,7 @@ export class FilterPanel extends React.Component<filterProps> {
             case 'checkbox':
            
                 return this.facetValues(facetHeader).map(fval => {
+                  
                     const facetValue = fval;
                     return (
                         <div>
@@ -345,10 +362,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                 }
                                 type={type}
                                 onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval,  e.target.checked ? 'check' : 'remove'), 'set filter')}
-                                onClick={undoable (e => 
-                                    e.target.checked ? this._currentActiveFilters.set(fval, facetHeader) : this._currentActiveFilters.delete(fval) , 'set filter'
-                                ) }
-                                
+          
                               
                             />
                             {facetValue}
@@ -360,4 +374,3 @@ export class FilterPanel extends React.Component<filterProps> {
 }
 
 
-// NEED TO LEARN HOW TO RESET FILTERS WHEN WEBPAGE IS RELOADED
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ae1c61907b6ffd0f9949d0d697bdc941eb28b7e2 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Mon, 31 Jul 2023 15:41:53 -0400
Subject: filters - working on range

---
 src/client/views/FilterPanel.tsx | 16 ++++++++++------
 src/fields/Doc.ts                |  4 ++++
 2 files changed, 14 insertions(+), 6 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index f85052ff2..d6638df46 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -164,12 +164,16 @@ export class FilterPanel extends React.Component<filterProps> {
             this._chosenFacets.set(facetHeader, 'text');
         } else if (facetHeader !== 'tags' && nonNumbers / facetValues.strings.length < 0.1) {
 
-            // const ranged = Doc.readDocRangeFilter(targetDoc, facetHeader);
-            // 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];
-            // const scriptText = `setDocRangeFilter(this?.target, "${facetHeader}", range)`;
+            console.log("in this IF STATEMENE ")
+
+            const ranged = Doc.readDocRangeFilter(this.targetDoc, facetHeader);
+            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];
+          //  const scriptText = `setDocRangeFilter(this?.target, "${facetHeader}", range)`;
+            Doc.setDocRangeFilter(this.targetDoc, facetHeader)
+
 
             // newFacet = Docs.Create.SliderDocument({
             //     title: facetHeader,
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 203f455db..578ee1caa 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1416,14 +1416,18 @@ export namespace Doc {
     }
     export function setDocRangeFilter(container: Opt<Doc>, key: string, range?: number[]) {
         if (!container) return;
+       
         const childFiltersByRanges = Cast(container._childFiltersByRanges, listSpec('string'), []);
+         console.log("hellllloooooooooooooooooooooooooo " + childFiltersByRanges.length)
         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());
-- 
cgit v1.2.3-70-g09d2


From fde0f815b3459d39b642d66c1c4466d9a9504979 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 1 Aug 2023 12:53:35 -0400
Subject: filters - bobs comments for future changes

---
 src/client/views/FilterPanel.tsx | 115 +++++++++++++++++++++++++++++----------
 1 file changed, 86 insertions(+), 29 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index d6638df46..ce6e2b1f3 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -65,13 +65,35 @@ 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);
     }
 
+    // 
+    // 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 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
      */
@@ -114,36 +136,55 @@ export class FilterPanel extends React.Component<filterProps> {
         Doc.setDocRangeFilter(this.targetDoc, filterName, undefined);
     };
 
-    @observable _chosenFacets = new ObservableMap<string, 'text' | 'checkbox' | 'slider' | 'range'>();
+    // @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
 
-    @computed get currentActiveFilterz(){ 
-        const filters = new Map<string, string>();
-        //this.targetDoc.docFilters
-        StrListCast(this.targetDoc?._childFilters).map(filter => filters.set(filter.split(Doc.FilterSep)[1] ,filter.split(Doc.FilterSep)[0] ))
-        console.log("what is wrong with filters " +filters )
-         return filters
-    }
-
-   //  let returnKeys = [];
+    //
+    // 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 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 ..
+                    // }))
 
-    @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'))));
+        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) => {
+    facetClick = (facetHeader: string) => { // just when someone chooses a facet
+
+        // return;
+
+
         if (!this.targetDoc) return;
         const allCollectionDocs = this.targetDocChildren;
         const facetValues = this.gatherFieldValues(this.targetDocChildren, facetHeader);
@@ -161,18 +202,20 @@ export class FilterPanel extends React.Component<filterProps> {
             }
         });
         if (facetHeader === 'text' || (facetValues.rtFields / allCollectionDocs.length > 0.1 && facetValues.strings.length > 20)) {
-            this._chosenFacets.set(facetHeader, 'text');
+            // 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);
+            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)));
-          //  newFacet[newFacetField + '-min'] = ranged === undefined ? extendedMinVal : ranged[0];
+            // 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)
+            Doc.setDocRangeFilter(this.targetDoc, facetHeader, [extendedMinVal, extendedMaxVal] )
 
 
             // newFacet = Docs.Create.SliderDocument({
@@ -202,7 +245,7 @@ export class FilterPanel extends React.Component<filterProps> {
        
 
         } else {
-            this._chosenFacets.set(facetHeader, 'checkbox');
+            // this._chosenFacets.set(facetHeader, 'checkbox');
         }
         this._chosenFacetsCollapse.set(facetHeader, false)
     };
@@ -279,7 +322,7 @@ export class FilterPanel extends React.Component<filterProps> {
                 </div>
 
                 <div className="filterBox-tree" key="tree">
-                    {Array.from(this.activeFacets.keys()).map(facetHeader => (
+                    {Array.from(this.activeFacets.keys()).map(facetHeader => ( // iterato over activeFacetRenderInfos  ==> renderInfo  which you can renderInfo.facetHeader
                         <div>
                             <div className  = "filterBox-facetHeader">
                                 <div className = "filterBox-facetHeader-Header"> </div>
@@ -312,7 +355,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                         }}
 
                                         this.activeFacets.delete(facetHeader)
-                                        this._chosenFacets.delete(facetHeader)
+                                       // this._chosenFacets.delete(facetHeader)
                                         this._chosenFacetsCollapse.delete(facetHeader)
 
                                         })}  >
@@ -326,7 +369,7 @@ export class FilterPanel extends React.Component<filterProps> {
                             // <div className = 'filterbox-collpasedAndActive' style={{backgroundColor: 'yellow', fontSize: 50}} > {this.sortingCurrentFacetValues(facetHeader)} </div> &&  this._collapseReturnKeys.splice(0)
                             this.sortingCurrentFacetValues(facetHeader) 
                             // &&  this._collapseReturnKeys.splice(0)
-                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }
+                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }  // pass renderInfo from iterator
                             {/*  */}
                         </div>
                     ))}
@@ -336,8 +379,9 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
-        switch (type) {
-            case 'text':
+        //  displayFacetValueFilterUIs(renderIinfo)
+        switch (type /* renderInfo.type */ ) {
+            case 'text': // if (this.chosenFacets.get(facetHeader) === 'text')
                 return (
                     <input
                         placeholder={
@@ -372,7 +416,20 @@ export class FilterPanel extends React.Component<filterProps> {
                             {facetValue}
                         </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
+                
+                ;
         }
     }
 }
-- 
cgit v1.2.3-70-g09d2


From d9f9eb5a89b14a3f9f6847ecd405c2142058b0d5 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Tue, 1 Aug 2023 16:04:46 -0400
Subject: filter - made bobs comments with basic slider implementation

---
 src/client/views/FilterPanel.tsx | 349 ++++++++++++++++++++++++++-------------
 src/fields/Doc.ts                |   4 +-
 2 files changed, 233 insertions(+), 120 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index ce6e2b1f3..b7718c6a3 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -13,6 +13,8 @@ import { SearchBox } from './search/SearchBox';
 import { undoable } from '../util/UndoManager';
 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 
 
@@ -77,6 +79,14 @@ export class FilterPanel extends React.Component<filterProps> {
         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
     //
@@ -86,20 +96,31 @@ export class FilterPanel extends React.Component<filterProps> {
 
     // ["#tags", "width", "height"]
     //
-    @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
+
+    @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>();
@@ -149,28 +170,68 @@ export class FilterPanel extends React.Component<filterProps> {
     // Map("tags" => {"checkbox"},
    //         "width" => {"rangs", domain:[1978,1992]})
     //
-    @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;
+
+    @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'}
+                    }
+                }
+            ))
     }
 
-    @observable selectedFacetHeaders = new Set<string>();
+    // @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>();
 
     /**
      * user clicks on a filter facet because they want to see it.   
@@ -182,72 +243,74 @@ export class FilterPanel extends React.Component<filterProps> {
     @action
     facetClick = (facetHeader: string) => { // just when someone chooses a facet
 
-        // return;
+        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}")`);
+        // 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)
+        // } else {
+        //     // this._chosenFacets.set(facetHeader, 'checkbox');
+        // }
+        // this._chosenFacetsCollapse.set(facetHeader, false)
     };
 
   
@@ -256,12 +319,13 @@ export class FilterPanel extends React.Component<filterProps> {
 
         this._collapseReturnKeys.splice(0)
 
-        for (var key of this.facetValues(facetHeader)){
+        for (var key of this.facetValues(facetHeader)){ // all  filters currently set
            // console.log("key : " + key  )
-            if (this.currentActiveFilterz.get(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">
           
@@ -301,7 +365,8 @@ 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.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">
@@ -322,41 +387,42 @@ export class FilterPanel extends React.Component<filterProps> {
                 </div>
 
                 <div className="filterBox-tree" key="tree">
-                    {Array.from(this.activeFacets.keys()).map(facetHeader => ( // iterato over activeFacetRenderInfos  ==> renderInfo  which you can renderInfo.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"
                                      onClick = {action((e) => { 
 
-                                        for (const [key, value] of this.currentActiveFilterz) {
-                                            
-                                              console.log("NEW KEY " + key  + "NEW VAL " + value);
-                                    
-                                            }
-                                        console.log("this is gather field values : " + this.gatherFieldValues(this.targetDocChildren, facetHeader))
-                                        console.log("this is current facets: " + this.currentFacets)
-
-                                        console.log("this is facet Header " + facetHeader + ". this is the get " + this.activeFacets.get(facetHeader))
-                                        const collapseBoolValue = this._chosenFacetsCollapse.get(facetHeader)
-                                        this._chosenFacetsCollapse.set(facetHeader, !collapseBoolValue )})}>
+                                       
+                                        const collapseBoolValue = this._chosenFacetsCollapse.get(renderInfo.facetHeader)
+                                        this._chosenFacetsCollapse.set(renderInfo.facetHeader, !collapseBoolValue )})}>
                                         
-                                        {this._chosenFacetsCollapse.get(facetHeader) ? <AiOutlinePlusSquare/> :  <AiOutlineMinusSquare/> }    
+                                        {this._chosenFacetsCollapse.get(renderInfo.facetHeader) ? <AiOutlinePlusSquare/> :  <AiOutlineMinusSquare/> }    
                                              
                                              </div>
                                 
                                     <div className='filterBox-facetHeader-remove'
                                      onClick = {action((e) => { 
-                                        for (var key of this.facetValues(facetHeader)){
-                                            if (this.currentActiveFilterz.get(key)){
-                                                Doc.setDocFilter(this.targetDoc, facetHeader, key, 'remove')
+                                        for (var key of this.facetValues(renderInfo.facetHeader)){
+                                            if (this.mapActiveFiltersToFacets.get(key)){
+                                                Doc.setDocFilter(this.targetDoc, renderInfo.facetHeader, key, 'remove')
                                         }}
 
-                                        this.activeFacets.delete(facetHeader)
+                                        if (renderInfo.facetHeader)
+
+                                        this._selectedFacetHeaders.delete(renderInfo.facetHeader)
+
+                                        // this.activeFacets.delete(renderInfo.facetHeader)
                                        // this._chosenFacets.delete(facetHeader)
-                                        this._chosenFacetsCollapse.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 )
 
                                         })}  >
                                             
@@ -365,11 +431,11 @@ export class FilterPanel extends React.Component<filterProps> {
 
                             </div>
                            
-                            { this._chosenFacetsCollapse.get(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(facetHeader) 
+                            this.sortingCurrentFacetValues(renderInfo.facetHeader) 
                             // &&  this._collapseReturnKeys.splice(0)
-                             : this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader) }  // pass renderInfo from iterator
+                             : this.displayFacetValueFilterUIs(renderInfo.renderType, renderInfo.facetHeader, renderInfo.domain, renderInfo.range ) } 
                             {/*  */}
                         </div>
                     ))}
@@ -378,7 +444,7 @@ export class FilterPanel extends React.Component<filterProps> {
         );
     }
 
-    private displayFacetValueFilterUIs(type: string | undefined, facetHeader: string): React.ReactNode {
+    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')
@@ -417,6 +483,55 @@ export class FilterPanel extends React.Component<filterProps> {
                         </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
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 578ee1caa..d07028ec2 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1414,11 +1414,10 @@ 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'), []);
-         console.log("hellllloooooooooooooooooooooooooo " + childFiltersByRanges.length)
         for (let i = 0; i < childFiltersByRanges.length; i += 3) {
             console.log("inside if statement")
             if (childFiltersByRanges[i] === key) {
@@ -1441,7 +1440,6 @@ export namespace Doc {
     // all documents with the specified value for the specified key are included/excluded
     // based on the modifiers :"check", "x", undefined
     export function setDocFilter(container: Opt<Doc>, key: string, value: any, modifiers: 'remove' | 'match' | 'check' | 'x' | 'exists' | 'unset', toggle?: boolean, fieldPrefix?: string, append: boolean = true) {
-       console.log("in setDocFilter: key "+ key + "value " + value)
         if (!container) return;
         const filterField = '_' + (fieldPrefix ? fieldPrefix + '_' : '') + 'childFilters';
         const childFilters = StrListCast(container[filterField]);
-- 
cgit v1.2.3-70-g09d2


From 8d85780411df77db6150b88f0d8272f495c7fdb1 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 2 Aug 2023 12:58:34 -0400
Subject: filter - slider works (w/o UI and collapse)

---
 src/client/views/FilterPanel.scss |  22 ++++
 src/client/views/FilterPanel.tsx  | 228 ++++++++++----------------------------
 src/fields/Doc.ts                 |  19 +++-
 3 files changed, 99 insertions(+), 170 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

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 = '::';
-- 
cgit v1.2.3-70-g09d2


From aa9f4b3ced3b4c6a1850cb9a0b3ea2f188998a55 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Wed, 2 Aug 2023 17:01:35 -0400
Subject: filters - sliders working (still fix UI & comments from meeting)

---
 src/client/views/FilterPanel.tsx | 33 ++++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 54f5122b4..8ecd60c7e 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -219,21 +219,40 @@ export class FilterPanel extends React.Component<filterProps> {
   
     @action
     sortingCurrentFacetValues = (facetHeader:string) => {
-        console.log("in function to begin with")
+        // console.log("in function to begin with")
         this._collapseReturnKeys.splice(0)
 
-         console.log("this si sfacetValies " + this.facetValues(facetHeader))
+        //  console.log("this si sfacetValies " + this.facetValues(facetHeader))
 
         //if range then display range values
 
+        //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 
+
+        Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => {
+            if (  renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader) {
+                console.log("THIS IS ONLY SHWOIGN UP ONCE ")
+                console.log("hope same thing "+ this.targetDoc?._childFiltersByRanges?.toString + " extra " + renderInfo.range)
+                this._collapseReturnKeys.push(renderInfo.range)
+                
+            }
+        
+           })
+
+         
+            for (var key of this.facetValues(facetHeader)){ 
+        // console.log("this is key "  + key)
+                if (this.mapActiveFiltersToFacets.get(key)){ 
+                
+                        this._collapseReturnKeys.push(key) 
+                }}
+        
+
         // 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(',  ') }
-- 
cgit v1.2.3-70-g09d2


From 93854ed0917346720ff519553f909cee3561ec7b Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 3 Aug 2023 12:31:03 -0400
Subject: filter - fixed bug

---
 src/client/views/FilterPanel.tsx | 44 +++++++++-------------------------------
 1 file changed, 10 insertions(+), 34 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 8ecd60c7e..54701b7f8 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -18,6 +18,9 @@ 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 
 
+   //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;
 }
@@ -219,40 +222,22 @@ export class FilterPanel extends React.Component<filterProps> {
   
     @action
     sortingCurrentFacetValues = (facetHeader:string) => {
-        // console.log("in function to begin with")
         this._collapseReturnKeys.splice(0)
 
-        //  console.log("this si sfacetValies " + this.facetValues(facetHeader))
-
-        //if range then display range values
-
-        //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 
-
         Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => {
             if (  renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader) {
                 console.log("THIS IS ONLY SHWOIGN UP ONCE ")
                 console.log("hope same thing "+ this.targetDoc?._childFiltersByRanges?.toString + " extra " + renderInfo.range)
                 this._collapseReturnKeys.push(renderInfo.range)
                 
-            }
-        
+            } 
            })
-
          
             for (var key of this.facetValues(facetHeader)){ 
-        // console.log("this is key "  + key)
                 if (this.mapActiveFiltersToFacets.get(key)){ 
-                
                         this._collapseReturnKeys.push(key) 
                 }}
         
-
-        // if(Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => (renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader ))){
-           
-        // }
-        
-        
         return (
             <div className = " filterbox-collpasedAndActive">  
                 {this._collapseReturnKeys.join(',  ') }
@@ -315,36 +300,27 @@ export class FilterPanel extends React.Component<filterProps> {
                                 
                                     <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) => { 
+                                     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)
-                                        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)
-
-
 
 
+                                        if (renderInfo.domain){
+                                            Doc.setDocRangeFilter(this.targetDoc, renderInfo.facetHeader, renderInfo.domain, 'remove')
+                                        }
+                                        
                                         })}  >
                                             
                                     <CiCircleRemove/> </div> 
-- 
cgit v1.2.3-70-g09d2


From 082a280ed989007d84c8619438889c64a6fedb14 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Fri, 4 Aug 2023 11:54:03 -0400
Subject: filters - starting to add filterable field

---
 src/client/documents/Documents.ts | 6 +++---
 src/client/views/FilterPanel.tsx  | 9 +--------
 src/client/views/MainView.scss    | 8 ++++----
 src/client/views/MainView.tsx     | 2 +-
 4 files changed, 9 insertions(+), 16 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5d7ca6f6d..5d8ae19fc 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -88,7 +88,7 @@ class BoolInfo extends FInfo {
 class NumInfo extends FInfo {
     fieldType? = 'number';
     values?: number[] = [];
-    constructor(d: string, readOnly?: boolean, values?: number[]) {
+    constructor(d: string, readOnly?: boolean, values?: number[], filterable?:boolean) {
         super(d, readOnly);
         this.values = values;
     }
@@ -104,7 +104,7 @@ class StrInfo extends FInfo {
 class DocInfo extends FInfo {
     fieldType? = 'Doc';
     values?: Doc[] = [];
-    constructor(d: string, values?: Doc[]) {
+    constructor(d: string, filterable?:boolean, values?: Doc[] ) {
         super(d, true);
         this.values = values;
     }
@@ -183,7 +183,7 @@ export class DocumentOptions {
     caption?: RichTextField;
     author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable
     author_date?: DATEt = new DateInfo('date the document was created', true);
-    annotationOn?: DOCt = new DocInfo('document annotated by this document');
+    annotationOn?: DOCt = new DocInfo('document annotated by this document', false);
     color?: STRt = new StrInfo('foreground color data doc');
     hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection');
     backgroundColor?: STRt = new StrInfo('background color for data doc');
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 54701b7f8..127708ca3 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -226,8 +226,6 @@ export class FilterPanel extends React.Component<filterProps> {
 
         Array.from(this.activeRenderedFacetInfos.keys()).map(renderInfo => {
             if (  renderInfo.renderType === "range" && renderInfo.facetHeader === facetHeader) {
-                console.log("THIS IS ONLY SHWOIGN UP ONCE ")
-                console.log("hope same thing "+ this.targetDoc?._childFiltersByRanges?.toString + " extra " + renderInfo.range)
                 this._collapseReturnKeys.push(renderInfo.range)
                 
             } 
@@ -316,16 +314,11 @@ export class FilterPanel extends React.Component<filterProps> {
                                         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> */}
-
                             </div>
                            
                             { this._chosenFacetsCollapse.get(renderInfo.facetHeader) ? 
diff --git a/src/client/views/MainView.scss b/src/client/views/MainView.scss
index b3faff442..8a7f5132b 100644
--- a/src/client/views/MainView.scss
+++ b/src/client/views/MainView.scss
@@ -194,11 +194,11 @@ h1,
         left: 0;
         position: absolute;
         z-index: 2;
-        background-color: linen; //$light-gray;
+     //   background-color: linen; //$light-gray;
 
-        .editable-title {
-            background-color: linen; //$light-gray;
-        }
+        // .editable-title {
+        //     background-color: linen; //$light-gray;
+        // }
     }
 }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index cbaa763f5..d9136dbd4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -813,7 +813,7 @@ export class MainView extends React.Component {
                         {this.dockingContent}
 
                         {this._hideUI ? null : (
-                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1, background: 'linen' }}>
+                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ right: this.propertiesWidth() - 1 }}>
                                 <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={this.colorScheme === ColorScheme.Dark ? Colors.WHITE : Colors.BLACK} size="sm" />
                             </div>
                         )}
-- 
cgit v1.2.3-70-g09d2


From 4c8eee9811abd072d2a6adfe24eaf04f980ccf21 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 9 Aug 2023 15:21:20 -0400
Subject: updated file system to include recentlyClosed, Shared, and Dashboards
 and fixed drag drop to make sense for the filesystem.   Fixed loading
 documents to happen in one batch by fixing UPDATE_CACHED_DOCS to save only
 documents accessible from current dashboard.

---
 src/Utils.ts                                       |   2 +-
 src/client/DocServer.ts                            |  60 +-
 src/client/documents/DocumentTypes.ts              |   4 -
 src/client/documents/Documents.ts                  |  12 +-
 src/client/util/CurrentUserUtils.ts                |  37 +-
 src/client/util/DocumentManager.ts                 |   5 +-
 src/client/util/DragManager.ts                     |   4 +-
 src/client/util/GroupManager.tsx                   |   5 +-
 src/client/util/GroupMemberView.tsx                |   3 +-
 src/client/util/LinkManager.ts                     |   4 +-
 src/client/util/ReplayMovements.ts                 |   1 -
 src/client/util/ServerStats.tsx                    |  26 +-
 src/client/util/SettingsManager.tsx                |  11 +-
 src/client/util/SharingManager.tsx                 |  11 +-
 src/client/util/reportManager/ReportManager.tsx    |   5 +-
 src/client/views/DashboardView.tsx                 |  83 +--
 src/client/views/DocComponent.tsx                  |   4 +-
 src/client/views/FilterPanel.tsx                   |  18 +-
 src/client/views/LightboxView.tsx                  |   4 +-
 src/client/views/Main.tsx                          |   5 +-
 src/client/views/MainView.tsx                      |  12 +-
 src/client/views/PropertiesButtons.tsx             |   1 -
 src/client/views/PropertiesDocContextSelector.tsx  |   1 -
 src/client/views/PropertiesSection.tsx             |  80 ++-
 src/client/views/PropertiesView.tsx                | 758 ++++++++++-----------
 src/client/views/StyleProvider.tsx                 |   8 +-
 src/client/views/UndoStack.tsx                     |  43 +-
 .../views/collections/CollectionDockingView.tsx    |   7 +-
 src/client/views/collections/CollectionMenu.tsx    |   2 +-
 .../views/collections/CollectionStackingView.tsx   |   1 -
 .../views/collections/CollectionTreeView.tsx       |   1 +
 src/client/views/collections/TabDocView.tsx        |   2 +-
 src/client/views/collections/TreeView.tsx          |   2 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |   1 -
 src/client/views/global/globalScripts.ts           |   1 -
 .../views/newlightbox/ExploreView/ExploreView.tsx  |   3 -
 .../components/Recommendation/Recommendation.tsx   |   1 -
 src/client/views/nodes/DataVizBox/utils/D3Utils.ts |   1 -
 src/client/views/nodes/DocumentView.tsx            |   3 +-
 src/client/views/nodes/LinkDocPreview.tsx          |   2 +-
 src/client/views/nodes/MapBox/MapBox.tsx           |   1 -
 src/client/views/nodes/ScreenshotBox.tsx           |   5 +-
 src/client/views/nodes/ScriptingBox.tsx            |   2 -
 .../views/nodes/formattedText/FormattedTextBox.tsx |  20 +-
 .../views/nodes/formattedText/RichTextRules.ts     |  26 +-
 src/client/views/pdf/AnchorMenu.tsx                |   5 +-
 src/client/views/search/SearchBox.tsx              |  78 ++-
 src/client/views/topbar/TopBar.tsx                 |  38 +-
 src/fields/Doc.ts                                  |  81 ++-
 src/fields/FieldLoader.tsx                         |   5 +-
 src/server/DashUploadUtils.ts                      |   3 +-
 51 files changed, 727 insertions(+), 771 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/Utils.ts b/src/Utils.ts
index 8b9fe2aab..7f83ab8f5 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -76,7 +76,7 @@ export namespace Utils {
             });
             return returnedUri;
         } catch (e) {
-            console.log('VideoBox :' + e);
+            console.log('ConvertDataURI :' + e);
         }
     }
 
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index ad5a73598..40979d631 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,16 +1,18 @@
 import { runInAction } from 'mobx';
 import * as rp from 'request-promise';
 import * as io from 'socket.io-client';
-import { Doc, Opt } from '../fields/Doc';
+import { Doc, DocListCast, Opt } from '../fields/Doc';
 import { UpdatingFromServer } from '../fields/DocSymbols';
 import { FieldLoader } from '../fields/FieldLoader';
 import { HandleUpdate, Id, Parent } from '../fields/FieldSymbols';
 import { ObjectField } from '../fields/ObjectField';
 import { RefField } from '../fields/RefField';
-import { StrCast } from '../fields/Types';
+import { DocCast, StrCast } from '../fields/Types';
 import MobileInkOverlay from '../mobile/MobileInkOverlay';
 import { emptyFunction, Utils } from '../Utils';
 import { GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, YoutubeQueryTypes } from './../server/Message';
+import { DocumentType } from './documents/DocumentTypes';
+import { LinkManager } from './util/LinkManager';
 import { SerializationHelper } from './util/SerializationHelper';
 import { GestureOverlay } from './views/GestureOverlay';
 
@@ -30,35 +32,44 @@ import { GestureOverlay } from './views/GestureOverlay';
 export namespace DocServer {
     let _cache: { [id: string]: RefField | Promise<Opt<RefField>> } = {};
 
-    export function QUERY_SERVER_CACHE(title: string) {
+    export function FindDocByTitle(title: string) {
         const foundDocId = Array.from(Object.keys(_cache))
             .filter(key => _cache[key] instanceof Doc)
             .find(key => (_cache[key] as Doc).title === title);
 
         return foundDocId ? (_cache[foundDocId] as Doc) : undefined;
     }
-    let lastCacheUpdate = 0;
-    export function UPDATE_SERVER_CACHE(print: boolean = false) {
-        if (print) {
-            const strings: string[] = [];
-            Array.from(Object.keys(_cache)).forEach(key => {
-                const doc = _cache[key];
-                if (doc instanceof Doc) strings.push(StrCast(doc.author) + ' ' + StrCast(doc.title) + ' ' + StrCast(Doc.GetT(doc, 'title', 'string', true)));
-            });
-            strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
-        }
-        const filtered = Array.from(Object.keys(_cache)).filter(key => {
-            const doc = _cache[key] as Doc;
-            return true;
-            if (!(StrCast(doc.author).includes('.edu') || StrCast(doc.author).includes('.com')) || doc.author === Doc.CurrentUserEmail) return true;
-            return false;
+    let cacheDocumentIds = ''; // ; separate string of all documents ids in the user's working set (cached on the server)
+    export let CacheNeedsUpdate = false;
+    export function UPDATE_SERVER_CACHE() {
+        const prototypes = Object.values(DocumentType)
+            .filter(type => type !== DocumentType.NONE)
+            .map(type => _cache[type + 'Proto'])
+            .filter(doc => doc instanceof Doc)
+            .map(doc => doc as Doc);
+        const references = new Set<Doc>(prototypes);
+        Doc.FindReferences(Doc.UserDoc(), references, undefined);
+        DocListCast(DocCast(Doc.UserDoc().myLinkDatabase).data).forEach(link => {
+            if (!references.has(DocCast(link.link_anchor_1)) && !references.has(DocCast(link.link_anchor_2))) {
+                Doc.RemoveDocFromList(DocCast(Doc.UserDoc().myLinkDatabase), 'data', link);
+            }
         });
-        if (filtered.length === lastCacheUpdate) return;
-        lastCacheUpdate = filtered.length;
+        LinkManager.userLinkDBs.forEach(linkDb => Doc.FindReferences(linkDb, references, undefined));
+        const filtered = Array.from(references);
+
+        const newCacheUpdate = filtered.map(doc => doc[Id]).join(';');
+        if (newCacheUpdate === cacheDocumentIds) return;
+        cacheDocumentIds = newCacheUpdate;
+
+        // print out cached docs
+        console.log('Set cached docs = ');
+        const is_filtered = filtered.filter(doc => !Doc.IsSystem(doc));
+        const strings = is_filtered.map(doc => StrCast(doc.title) + ' ' + (Doc.IsDataProto(doc) ? '(data)' : '(embedding)'));
+        strings.sort().forEach((str, i) => console.log(i.toString() + ' ' + str));
 
         rp.post(Utils.prepend('/setCacheDocumentIds'), {
             body: {
-                cacheDocumentIds: filtered.join(';'),
+                cacheDocumentIds,
             },
             json: true,
         });
@@ -353,7 +364,7 @@ export namespace DocServer {
         // i) which documents need to be fetched
         // ii) which are already in the process of being fetched
         // iii) which already exist in the cache
-        for (const id of ids) {
+        for (const id of ids.filter(id => id)) {
             const cached = _cache[id];
             if (cached === undefined) {
                 defaultPromises.push({
@@ -382,7 +393,7 @@ export namespace DocServer {
             // fields for the given ids. This returns a promise, which, when resolved, indicates that all the JSON serialized versions of
             // the fields have been returned from the server
             console.log('Requesting ' + requestedIds.length);
-            FieldLoader.active && runInAction(() => (FieldLoader.ServerLoadStatus.requested = requestedIds.length));
+            setTimeout(() => runInAction(() => (FieldLoader.ServerLoadStatus.requested = requestedIds.length)));
             const serializedFields = await Utils.EmitCallback(_socket, MessageStore.GetRefFields, requestedIds);
 
             // 3) when the serialized RefFields have been received, go head and begin deserializing them into objects.
@@ -392,7 +403,7 @@ export namespace DocServer {
             console.log('deserializing ' + serializedFields.length + ' fields');
             for (const field of serializedFields) {
                 processed++;
-                if (FieldLoader.active && processed % 150 === 0) {
+                if (processed % 150 === 0) {
                     runInAction(() => (FieldLoader.ServerLoadStatus.retrieved = processed));
                     await new Promise(res => setTimeout(res)); // force loading to yield to splash screen rendering to update progress
                 }
@@ -478,6 +489,7 @@ export namespace DocServer {
      * @param field the [RefField] to be serialized and sent to the server to be stored in the database
      */
     export function CreateField(field: RefField) {
+        CacheNeedsUpdate = true;
         _CreateField(field);
     }
 
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index b629d9b8c..1d0ddce40 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -14,13 +14,11 @@ export enum DocumentType {
     INK = 'ink',
     SCREENSHOT = 'screenshot',
     FONTICON = 'fonticonbox',
-    FILTER = 'filter',
     SEARCH = 'search', // search query
     LABEL = 'label', // simple text label
     BUTTON = 'button', // onClick button
     WEBCAM = 'webcam', // webcam
     CONFIG = 'config', // configuration document intended to specify a view layout configuration, but not be directly rendered (e.g., for saving the page# of a PDF, or view transform of a collection)
-    DATE = 'date', // calendar view of a date
     SCRIPTING = 'script', // script editor
     EQUATION = 'equation', // equation editor
     FUNCPLOT = 'funcplot', // function plotter
@@ -31,14 +29,12 @@ export enum DocumentType {
 
     // special purpose wrappers that either take no data or are compositions of lower level types
     LINK = 'link',
-    LINKANCHOR = 'linkanchor',
     IMPORT = 'import',
     SLIDER = 'slider',
     PRES = 'presentation',
     PRESELEMENT = 'preselement',
     COLOR = 'color',
     YOUTUBE = 'youtube',
-    SEARCHITEM = 'searchitem',
     COMPARISON = 'comparison',
     GROUP = 'group',
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 8eeceaa15..fccad80ee 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1,5 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { action, runInAction } from 'mobx';
+import { action, reaction, runInAction } from 'mobx';
 import { basename } from 'path';
 import { DateField } from '../../fields/DateField';
 import { Doc, DocListCast, Field, Opt, updateCachedAcls } from '../../fields/Doc';
@@ -744,6 +744,10 @@ export namespace Docs {
                 // an entry dedicated to the given DocumentType)
                 target && PrototypeMap.set(type, target);
             });
+            reaction(
+                () => (proto => StrCast(proto?.BROADCAST_MESSAGE))(DocServer.GetCachedRefField('rtfProto') as Doc),
+                msg => msg && alert(msg)
+            );
         }
 
         /**
@@ -887,8 +891,6 @@ export namespace Docs {
                 DocUtils.MakeLinkToActiveAudio(() => viewDoc);
             }
 
-            Doc.AddFileOrphan(dataDoc);
-
             updateCachedAcls(dataDoc);
             updateCachedAcls(viewDoc);
 
@@ -1150,9 +1152,6 @@ export namespace Docs {
         export function FontIconDocument(options?: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.FONTICON), undefined, { ...(options || {}) });
         }
-        export function FilterDocument(options?: DocumentOptions) {
-            return InstanceFromProto(Prototypes.get(DocumentType.FILTER), undefined, { ...(options || {}) });
-        }
 
         export function PresElementBoxDocument() {
             return Prototypes.get(DocumentType.PRESELEMENT);
@@ -1872,7 +1871,6 @@ export namespace DocUtils {
     export function copyDragFactory(dragFactory: Doc) {
         if (!dragFactory) return undefined;
         const ndoc = dragFactory.isTemplateDoc ? Doc.ApplyTemplate(dragFactory) : Doc.MakeCopy(dragFactory, true);
-        ndoc && Doc.AddFileOrphan(Doc.GetProto(ndoc));
         if (ndoc && dragFactory['dragFactory_count'] !== undefined) {
             dragFactory['dragFactory_count'] = NumCast(dragFactory['dragFactory_count']) + 1;
             Doc.SetInPlace(ndoc, 'title', ndoc.title + ' ' + NumCast(dragFactory['dragFactory_count']).toString(), true);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 21bcec6d1..e8262ff3b 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -152,7 +152,7 @@ export class CurrentUserUtils {
             { noteType: "Idea", backgroundColor: "pink", icon: "lightbulb" },
             { noteType: "Topic", backgroundColor: "lightblue", icon: "book-open" }];
         const reqdNoteList = reqdTempOpts.map(opts => {
-            const reqdOpts = {...opts, title: "text", width:200, layout_autoHeight: true, layout_fitWidth: true};
+            const reqdOpts = {...opts, isSystem:true, title: "text", width:200, layout_autoHeight: true, layout_fitWidth: true};
             const noteType = tempNotes ? DocListCast(tempNotes.data).find(doc => doc.noteType === opts.noteType): undefined;
             return DocUtils.AssignOpts(noteType, reqdOpts) ?? MakeTemplate(Docs.Create.TextDocument("",reqdOpts), true, opts.noteType??"Note");
         });
@@ -339,7 +339,7 @@ export class CurrentUserUtils {
     }
 
     /// returns descriptions needed to buttons for the left sidebar to open up panes displaying different collections of documents
-    static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}}[] {
+    static leftSidebarMenuBtnDescriptions(doc: Doc):{title:string, target:Doc, icon:string, toolTip: string, scripts:{[key:string]:any}, funcs?:{[key:string]:any}, hidden?: boolean}[] {
       const badgeValue = "((len) => len && len !== '0' ? len: undefined)(docList(self.target.data).filter(doc => !docList(self.target.viewed).includes(doc)).length.toString())"; 
       const getActiveDashTrails = "Doc.ActiveDashboard?.myTrails";
         return [
@@ -348,7 +348,7 @@ export class CurrentUserUtils {
             { title: "Files",           toolTip: "Files",           target: this.setupFilesystem(doc, "myFilesystem"),         ignoreClick: true, icon: "folder-open", },
             { title: "Tools",           toolTip: "Tools",           target: this.setupToolsBtnPanel(doc, "myTools"),           ignoreClick: true, icon: "wrench",      funcs: {hidden: "IsNoviceMode()"} },
             { title: "Imports",         toolTip: "Imports ⌘I",      target: this.setupImportSidebar(doc, "myImports"),         ignoreClick:false, icon: "upload",      },
-            { title: "Closed",          toolTip: "Recently Closed", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), ignoreClick: true, icon: "archive",     },
+            { title: "Closed",          toolTip: "Recently Closed", target: this.setupRecentlyClosed(doc, "myRecentlyClosed"), ignoreClick: true, icon: "archive",     hidden: true }, // this doc is hidden from the Sidebar, but it's still being used in MyFilesystem which ignores the hidden field
             { title: "Shared",          toolTip: "Shared Docs",     target: Doc.MySharedDocs,                                  ignoreClick: true, icon: "users",       funcs: {badgeValue: badgeValue}},
             { title: "Trails",          toolTip: "Trails ⌘R",       target: Doc.UserDoc(),                                     ignoreClick: true, icon: "pres-trail",  funcs: {target: getActiveDashTrails}},
             { title: "User Doc",        toolTip: "User Doc",        target: this.setupUserDocView(doc, "myUserDocView"),       ignoreClick: true, icon: "address-card",funcs: {hidden: "IsNoviceMode()"} },
@@ -357,17 +357,17 @@ export class CurrentUserUtils {
 
     /// the empty panel that is filled with whichever left menu button's panel has been selected
     static setupLeftSidebarPanel(doc: Doc, field="myLeftSidebarPanel") {
-        DocUtils.AssignDocField(doc, field, (opts) => Doc.assign(new Doc(), opts as any), {isSystem:true, undoIgnoreFields: new List<string>(['proto'])});
+        DocUtils.AssignDocField(doc, field, (opts) => Doc.assign(new Doc(), opts as any), {title:"leftSidebarPanel", isSystem:true, undoIgnoreFields: new List<string>(['proto'])});
     }
 
     /// Initializes the left sidebar menu buttons and the panels they open up
     static setupLeftSidebarMenu(doc: Doc, field="myLeftSidebarMenu") {
         this.setupLeftSidebarPanel(doc);
         const myLeftSidebarMenu = DocCast(doc[field]);
-        const menuBtns = CurrentUserUtils.leftSidebarMenuBtnDescriptions(doc).map(({ title, target, icon, toolTip, scripts, funcs }) => {
+        const menuBtns = CurrentUserUtils.leftSidebarMenuBtnDescriptions(doc).map(({ title, target, icon, toolTip, hidden, scripts, funcs }) => {
             const btnDoc = myLeftSidebarMenu ? DocListCast(myLeftSidebarMenu.data).find(doc => doc.title === title) : undefined;
             const reqdBtnOpts:DocumentOptions = {
-                title, icon, target, toolTip, btnType: ButtonType.MenuButton, isSystem: true, undoIgnoreFields: new List<string>(['height', 'data_columnHeaders']), dontRegisterView: true,
+                title, icon, target, toolTip, hidden, btnType: ButtonType.MenuButton, isSystem: true, undoIgnoreFields: new List<string>(['height', 'data_columnHeaders']), dontRegisterView: true,
                 _width: 60, _height: 60,  _dragOnlyWithinContainer: true, _layout_hideContextMenu: true,
             };
             return DocUtils.AssignScripts(DocUtils.AssignOpts(btnDoc, reqdBtnOpts) ?? Docs.Create.FontIconDocument(reqdBtnOpts), scripts, funcs);
@@ -495,7 +495,7 @@ export class CurrentUserUtils {
         const reqdOpts:DocumentOptions = {
             title: "My Dashboards", childHideLinkButton: true, treeViewFreezeChildren: "remove|add", treeViewHideTitle: true, layout_boxShadow: "0 0", childDontRegisterViews: true,
             dropAction: "same", treeViewType: TreeViewType.fileSystem, isFolder: true, isSystem: true,  treeViewTruncateTitleWidth: 350, ignoreClick: true, 
-            layout_headerButton: newDashboardButton, childDragAction: "embed",
+            layout_headerButton: newDashboardButton, childDragAction: "none",
             _layout_showTitle: "title", _height: 400, _gridGap: 5, _forceActive: true, _lockedPosition: true,
             contextMenuLabels:new List<string>(contextMenuLabels),
             contextMenuIcons:new List<string>(contextMenuIcons),
@@ -519,7 +519,6 @@ export class CurrentUserUtils {
     /// initializes the left sidebar File system pane
     static setupFilesystem(doc: Doc, field:string) {
         var myFilesystem = DocCast(doc[field]);
-        const myFileOrphans = DocUtils.AssignDocField(doc, "myFileOrphans", (opts) => Docs.Create.TreeDocument([], opts), { title: "Unfiled", undoIgnoreFields:new List<string>(['treeViewSortCriterion']), _dragOnlyWithinContainer: true, isSystem: true, isFolder: true });
         
         const newFolder = `TreeView_addNewFolder()`;
         const newFolderOpts: DocumentOptions = {
@@ -530,14 +529,15 @@ export class CurrentUserUtils {
         const newFolderButton = DocUtils.AssignScripts(DocUtils.AssignOpts(DocCast(myFilesystem?.layout_headerButton), newFolderOpts) ?? Docs.Create.FontIconDocument(newFolderOpts), newFolderScript);
         
         const reqdOpts:DocumentOptions = { _layout_showTitle: "title", _height: 100, _gridGap: 5, _forceActive: true, _lockedPosition: true, 
-            title: "My Documents", layout_headerButton: newFolderButton, treeViewHideTitle: true, dropAction: "proto", isSystem: true,
+            title: "My Documents", layout_headerButton: newFolderButton, treeViewHideTitle: true, dropAction: 'add', isSystem: true,
             isFolder: true, treeViewType: TreeViewType.fileSystem, childHideLinkButton: true, layout_boxShadow: "0 0", childDontRegisterViews: true, 
             treeViewTruncateTitleWidth: 350, ignoreClick: true, childDragAction: "embed",
             childContextMenuLabels: new List<string>(["Create new folder"]),
             childContextMenuIcons: new List<string>(["plus"]),
             layout_explainer: "This is your file manager where you can create folders to keep track of documents independently of your dashboard."
         };
-        myFilesystem = DocUtils.AssignDocField(doc, field, (opts, items) => Docs.Create.TreeDocument(items??[], opts), reqdOpts, [myFileOrphans]);
+        const fileFolders = new Set(DocListCast(DocCast(doc[field])?.data));
+        myFilesystem = DocUtils.AssignDocField(doc, field, (opts, items) => Docs.Create.TreeDocument(items??[], opts), reqdOpts, Array.from(fileFolders));
         const childContextMenuScripts = [newFolder];
         if (Cast(myFilesystem.childContextMenuScripts, listSpec(ScriptField), null)?.length !== childContextMenuScripts.length) {
             myFilesystem.childContextMenuScripts = new List<ScriptField>(childContextMenuScripts.map(script => ScriptField.MakeFunction(script)!));
@@ -547,8 +547,8 @@ export class CurrentUserUtils {
 
     /// initializes the panel displaying docs that have been recently closed
     static setupRecentlyClosed(doc: Doc, field:string) {
-        const reqdOpts:DocumentOptions = { _layout_showTitle: "title", _lockedPosition: true, _gridGap: 5, _forceActive: true, 
-            title: "My Recently Closed", childHideLinkButton: true, treeViewHideTitle: true, childDragAction: "embed", isSystem: true,
+        const reqdOpts:DocumentOptions = { _layout_showTitle: "title", _lockedPosition: true, _gridGap: 5, _forceActive: true, isFolder: true,
+            title: "My Recently Closed", childHideLinkButton: true, treeViewHideTitle: true, childDragAction: "move", isSystem: true,
             treeViewTruncateTitleWidth: 350, ignoreClick: true,  layout_boxShadow: "0 0", childDontRegisterViews: true, dropAction: "same",
             contextMenuLabels: new List<string>(["Empty recently closed"]),
             contextMenuIcons:new List<string>(["trash"]),
@@ -562,8 +562,6 @@ export class CurrentUserUtils {
             toolTip: "Empty recently closed",};
         DocUtils.AssignDocField(recentlyClosed, "layout_headerButton", (opts) => Docs.Create.FontIconDocument(opts), clearBtnsOpts, undefined, {onClick: clearAll("self.target")});
 
-        //if (recentlyClosed.layout_headerButton !== clearDocsButton) Doc.GetProto(recentlyClosed).layout_headerButton = clearDocsButton;
-        
         if (!Cast(recentlyClosed.contextMenuScripts, listSpec(ScriptField),null)?.find((script) => script.script.originalScript === clearAll("self"))) {
             recentlyClosed.contextMenuScripts = new List<ScriptField>([ScriptField.MakeScript(clearAll("self"))!])
         }
@@ -777,6 +775,7 @@ export class CurrentUserUtils {
             const linkDocs = new Doc(linkDatabaseId, true);
             linkDocs.title = "LINK DATABASE: " + Doc.CurrentUserEmail;
             linkDocs.author = Doc.CurrentUserEmail;
+            linkDocs.isSystem = true;
             linkDocs.data = new List<Doc>([]);
             linkDocs["acl-Guest"] = SharingPermissions.Augment;
             doc.myLinkDatabase = new PrefetchProxy(linkDocs);
@@ -877,11 +876,13 @@ export class CurrentUserUtils {
         this.setupDockedButtons(doc);  // the bottom bar of font icons
         this.setupLeftSidebarMenu(doc); // the left-side column of buttons that open their contents in a flyout panel on the left
         this.setupDocTemplates(doc); // sets up the template menu of templates
-        this.setupFieldInfos(doc); // sets up the collection of field info descriptions for each possible DocumentOption
+        //this.setupFieldInfos(doc); // sets up the collection of field info descriptions for each possible DocumentOption
         DocUtils.AssignDocField(doc, "globalScriptDatabase", (opts) =>  Docs.Prototypes.MainScriptDocument(), {});
-        DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "header bar", isSystem: true, childDocumentsActive:false, dropAction: 'move'}); // drop down panel at top of dashboard for stashing documents
+        DocUtils.AssignDocField(doc, "myHeaderBar", (opts) => Docs.Create.MulticolumnDocument([], opts), { title: "My Header Bar", isSystem: true, childDocumentsActive:false, dropAction: 'move'}); // drop down panel at top of dashboard for stashing documents
         
+        Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MyDashboards)
         Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MySharedDocs)
+        Doc.AddDocToList(Doc.MyFilesystem, undefined, Doc.MyRecentlyClosed)
 
         if (doc.activeDashboard instanceof Doc) {
             // undefined means ColorScheme.Light until all CSS is updated with values for each color scheme (e.g., see MainView.scss, DocumentDecorations.scss)
@@ -889,7 +890,7 @@ export class CurrentUserUtils {
         }
         new LinkManager();
 
-        setTimeout(DocServer.UPDATE_SERVER_CACHE, 2500);
+        DocServer.CacheNeedsUpdate && setTimeout(DocServer.UPDATE_SERVER_CACHE, 2500);
         setInterval(DocServer.UPDATE_SERVER_CACHE, 120000);
         return doc;
     }
@@ -923,11 +924,9 @@ export class CurrentUserUtils {
                 {
                     const ids = result.cacheDocumentIds.split(";");
                     const batch = 30000;
-                    FieldLoader.active = true;
                     for (let i = 0; i < ids.length; i = Math.min(ids.length, i+batch)) {
                         await DocServer.GetRefFields(ids.slice(i, i+batch));
                     }
-                    FieldLoader.active = false;
                 }
                 return result;
             } else {
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 8e4e0d8f3..42132c2d7 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -75,7 +75,7 @@ export class DocumentManager {
 
     @action
     public AddView = (view: DocumentView) => {
-        //console.log("MOUNT " + view.props.Document.title + "/" + view.props.LayoutTemplateString);
+        if (view.props.LayoutTemplateString?.includes(KeyValueBox.name)) return;
         if (view.props.LayoutTemplateString?.includes(LinkAnchorBox.name)) {
             const viewAnchorIndex = view.props.LayoutTemplateString.includes('link_anchor_2') ? 'link_anchor_2' : 'link_anchor_1';
             const link = view.rootDoc;
@@ -251,6 +251,7 @@ export class DocumentManager {
         options: DocFocusOptions, // options for how to navigate to target
         finished?: (changed: boolean) => void // func called after focusing on target with flag indicating whether anything needed to be done.
     ) => {
+        Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, targetDoc);
         const docContextPath = DocumentManager.GetContextPath(targetDoc, true);
         if (docContextPath.some(doc => doc.hidden)) options.toggleTarget = false;
         let rootContextView =
@@ -335,7 +336,7 @@ export function DocFocusOrOpen(doc: Doc, options: DocFocusOptions = { willZoomCe
         if (dv && (!containingDoc || dv.props.docViewPath().lastElement()?.Document === containingDoc)) {
             DocumentManager.Instance.showDocumentView(dv, options).then(() => dv && Doc.linkFollowHighlight(dv.rootDoc));
         } else {
-            const container = DocCast(containingDoc ?? doc.embedContainer ?? doc);
+            const container = DocCast(containingDoc ?? doc.embedContainer ?? Doc.BestEmbedding(doc));
             const showDoc = !Doc.IsSystem(container) ? container : doc;
             options.toggleTarget = undefined;
             DocumentManager.Instance.showDocument(showDoc, options, () => DocumentManager.Instance.showDocument(doc, { ...options, openLocation: undefined })).then(() => {
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 85101fcab..f4ff38515 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -15,7 +15,7 @@ import { SelectionManager } from './SelectionManager';
 import { SnappingManager } from './SnappingManager';
 import { UndoManager } from './UndoManager';
 
-export type dropActionType = 'embed' | 'copy' | 'move' | 'same' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove
+export type dropActionType = 'embed' | 'copy' | 'move' | 'add' | 'same' | 'proto' | 'none' | undefined; // undefined = move, "same" = move but don't call dropPropertiesToRemove
 
 /**
  * Initialize drag
@@ -213,6 +213,8 @@ export namespace DragManager {
                                 ? addAudioTag(ScriptCast(d.onDragStart).script.run({ this: d }).result)
                                 : docDragData.dropAction === 'embed'
                                 ? Doc.BestEmbedding(d)
+                                : docDragData.dropAction === 'add'
+                                ? d
                                 : docDragData.dropAction === 'proto'
                                 ? Doc.GetProto(d)
                                 : docDragData.dropAction === 'copy'
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index e406d89e7..f35844020 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -16,6 +16,7 @@ import { listSpec } from '../../fields/Schema';
 import { DateField } from '../../fields/DateField';
 import { Id } from '../../fields/FieldSymbols';
 import { Button, IconButton, Size, Type } from 'browndash-components';
+import { SettingsManager } from './SettingsManager';
 
 /**
  * Interface for options for the react-select component
@@ -281,7 +282,7 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+            <div className="group-create" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
@@ -366,7 +367,7 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+            <div className="group-interface" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 057f94f64..535d8ccc2 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -9,6 +9,7 @@ import { MainViewModal } from '../views/MainViewModal';
 import { GroupManager, UserOptions } from './GroupManager';
 import './GroupMemberView.scss';
 import { Button, IconButton, Size, Type } from 'browndash-components';
+import { SettingsManager } from './SettingsManager';
 
 interface GroupMemberViewProps {
     group: Doc;
@@ -28,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
         return !this.props.group ? null : (
-            <div className="editing-interface" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+            <div className="editing-interface" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
                 <div className="editing-header">
                     <input
                         className="group-title"
diff --git a/src/client/util/LinkManager.ts b/src/client/util/LinkManager.ts
index c7f092565..ef4b21b05 100644
--- a/src/client/util/LinkManager.ts
+++ b/src/client/util/LinkManager.ts
@@ -1,7 +1,8 @@
-import { action, observable, observe } from 'mobx';
+import { action, observable, observe, runInAction } from 'mobx';
 import { computedFn } from 'mobx-utils';
 import { Doc, DocListCast, DocListCastAsync, Field, Opt } from '../../fields/Doc';
 import { DirectLinks } from '../../fields/DocSymbols';
+import { FieldLoader } from '../../fields/FieldLoader';
 import { List } from '../../fields/List';
 import { ProxyField } from '../../fields/Proxy';
 import { Cast, DocCast, PromiseValue, StrCast } from '../../fields/Types';
@@ -132,6 +133,7 @@ export class LinkManager {
             },
             true
         );
+        runInAction(() => (FieldLoader.ServerLoadStatus.message = 'links'));
         LinkManager.addLinkDB(Doc.LinkDBDoc());
     }
 
diff --git a/src/client/util/ReplayMovements.ts b/src/client/util/ReplayMovements.ts
index cbc465d6a..d99630f82 100644
--- a/src/client/util/ReplayMovements.ts
+++ b/src/client/util/ReplayMovements.ts
@@ -187,7 +187,6 @@ export class ReplayMovements {
                 } else {
                     // tab wasn't open - open it and play the movement
                     const openedColFFView = this.openTab(movement.doc);
-                    console.log('openedColFFView', openedColFFView);
                     openedColFFView && this.zoomAndPan(movement, openedColFFView);
                 }
 
diff --git a/src/client/util/ServerStats.tsx b/src/client/util/ServerStats.tsx
index 6a6ec158e..3c7c35a7e 100644
--- a/src/client/util/ServerStats.tsx
+++ b/src/client/util/ServerStats.tsx
@@ -6,6 +6,7 @@ import './SharingManager.scss';
 import { PingManager } from './PingManager';
 import { StrCast } from '../../fields/Types';
 import { Doc } from '../../fields/Doc';
+import { SettingsManager } from './SettingsManager';
 
 @observer
 export class ServerStats extends React.Component<{}> {
@@ -42,21 +43,22 @@ export class ServerStats extends React.Component<{}> {
      */
     @computed get sharingInterface() {
         return (
-            <div style={{
-                display: "flex",
-                height: 300,
-                width: 400,
-                background: StrCast(Doc.UserDoc().userBackgroundColor),
-                opacity: 0.6}}>
-                    <div style={{width: 300,height: 100,margin: "auto",display: "flex",flexDirection: "column"}}>
-                        {PingManager.Instance.IsBeating ? 'The server connection is active' :
-                            'The server connection has been interrupted.NOTE: Any changes made will appear to persist but will be lost after a browser refreshes.'}
-                          
-                    <br/>
+            <div
+                style={{
+                    display: 'flex',
+                    height: 300,
+                    width: 400,
+                    background: SettingsManager.Instance?.userBackgroundColor,
+                    opacity: 0.6,
+                }}>
+                <div style={{ width: 300, height: 100, margin: 'auto', display: 'flex', flexDirection: 'column' }}>
+                    {PingManager.Instance.IsBeating ? 'The server connection is active' : 'The server connection has been interrupted.NOTE: Any changes made will appear to persist but will be lost after a browser refreshes.'}
+
+                    <br />
                     <span>Active users:{this._stats?.socketMap.length}</span>
                     {this._stats?.socketMap.map((user: any) => (
                         <p>{user.username}</p>
-                    ))}  
+                    ))}
                 </div>
             </div>
         );
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index b8e327968..573900825 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -1,10 +1,11 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { ColorState, SketchPicker } from 'react-color';
+import { BsGoogle } from 'react-icons/bs';
+import { FaFillDrip, FaPalette } from 'react-icons/fa';
 import { Doc } from '../../fields/Doc';
-import { Id } from '../../fields/FieldSymbols';
 import { BoolCast, Cast, StrCast } from '../../fields/Types';
 import { addStyleSheet, addStyleSheetRule, Utils } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
@@ -12,13 +13,9 @@ import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
 import { MainViewModal } from '../views/MainViewModal';
 import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
-import { DragManager } from './DragManager';
 import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
-import { Button, ColorPicker, Dropdown, DropdownType, EditableText, Group, NumberDropdown, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { BsGoogle } from 'react-icons/bs';
-import { FaFillDrip, FaPalette } from 'react-icons/fa';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -39,6 +36,7 @@ export enum freeformScrollMode {
 
 @observer
 export class SettingsManager extends React.Component<{}> {
+    static Version = 'v0.5';
     public static Instance: SettingsManager;
     static _settingsStyle = addStyleSheet();
     @observable public isOpen = false;
@@ -452,6 +450,7 @@ export class SettingsManager extends React.Component<{}> {
                     </div>
 
                     <div className="settings-user">
+                        <div style={{ color: 'black' }}>{SettingsManager.Version}</div>
                         <div className="settings-username" style={{ color: this.userBackgroundColor }}>
                             {Doc.CurrentUserEmail}
                         </div>
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index cadcb1f8a..6171c01d7 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -8,6 +8,7 @@ import Select from 'react-select';
 import * as RequestPromise from 'request-promise';
 import { Doc, DocListCast, DocListCastAsync, HierarchyMapping, ReverseHierarchyMap } from '../../fields/Doc';
 import { AclAdmin, AclPrivate, DocAcl, DocData } from '../../fields/DocSymbols';
+import { FieldLoader } from '../../fields/FieldLoader';
 import { Id } from '../../fields/FieldSymbols';
 import { StrCast } from '../../fields/Types';
 import { distributeAcls, GetEffectiveAcl, normalizeEmail, SharingPermissions, TraceMobx } from '../../fields/util';
@@ -23,6 +24,7 @@ import { GroupManager, UserOptions } from './GroupManager';
 import { GroupMemberView } from './GroupMemberView';
 import { LinkManager } from './LinkManager';
 import { SelectionManager } from './SelectionManager';
+import { SettingsManager } from './SettingsManager';
 import './SharingManager.scss';
 import { undoable } from './UndoManager';
 
@@ -136,6 +138,7 @@ export class SharingManager extends React.Component<{}> {
             this.populating = true;
             const userList = await RequestPromise.get(Utils.prepend('/getUsers'));
             const raw = (JSON.parse(userList) as User[]).filter(user => user.email !== 'guest' && user.email !== Doc.CurrentUserEmail);
+            runInAction(() => (FieldLoader.ServerLoadStatus.message = 'users'));
             const docs = await DocServer.GetRefFields(raw.reduce((list, user) => [...list, user.sharingDocumentId, user.linkDatabaseId], [] as string[]));
             raw.map(
                 action((newUser: User) => {
@@ -144,7 +147,7 @@ export class SharingManager extends React.Component<{}> {
                     if (sharingDoc instanceof Doc && linkDatabase instanceof Doc) {
                         if (!this.users.find(user => user.user.email === newUser.email)) {
                             this.users.push({ user: newUser, sharingDoc, linkDatabase, userColor: StrCast(sharingDoc.userColor) });
-                            LinkManager.addLinkDB(linkDatabase);
+                            //LinkManager.addLinkDB(linkDatabase);
                         }
                     }
                 })
@@ -525,10 +528,10 @@ export class SharingManager extends React.Component<{}> {
             const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
-                <div key={groupKey} className={'container'} style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
+                <div key={groupKey} className={'container'} style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
                     &nbsp;
-                    {group instanceof Doc ? <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={StrCast(Doc.UserDoc().userColor)} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> : null}
+                    {group instanceof Doc ? <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={SettingsManager.Instance.userColor} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> : null}
                     <div className={'edit-actions'}>
                         {admin || this.myDocAcls ? (
                             <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
@@ -550,7 +553,7 @@ export class SharingManager extends React.Component<{}> {
                 <div
                     className="sharing-contents"
                     style={{
-                        background: StrCast(Doc.UserDoc().userBackgroundColor),
+                        background: SettingsManager.Instance.userBackgroundColor,
                         color: StrCast(Doc.UserDoc().userColor),
                     }}>
                     <p className="share-title" style={{ color: StrCast(Doc.UserDoc().userColor) }}>
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index e684bd637..7aad0f2b1 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -19,6 +19,7 @@ import { BugType, FileData, Priority, ReportForm, ViewState, bugDropdownItems, d
 import { Filter, FormInput, FormTextArea, IssueCard, IssueView, Tag } from './ReportManagerComponents';
 import { StrCast } from '../../../fields/Types';
 import { MdRefresh } from 'react-icons/md';
+import { SettingsManager } from '../SettingsManager';
 const higflyout = require('@hig/flyout');
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -213,11 +214,11 @@ export class ReportManager extends React.Component<{}> {
      * @returns the component that dispays all issues
      */
     private viewIssuesComponent = () => {
-        const darkMode = isDarkMode(StrCast(Doc.UserDoc().userBackgroundColor));
+        const darkMode = isDarkMode(SettingsManager.Instance.userBackgroundColor);
         const colors = darkMode ? darkColors : lightColors;
 
         return (
-            <div className="view-issues" style={{ backgroundColor: StrCast(Doc.UserDoc().userBackgroundColor), color: colors.text }}>
+            <div className="view-issues" style={{ backgroundColor: SettingsManager.Instance.userBackgroundColor, color: colors.text }}>
                 <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
                     <div className="report-header">
                         <h2 style={{ color: colors.text }}>Open Issues</h2>
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index ae55c8ebf..21808d6e0 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -43,7 +43,7 @@ export class DashboardView extends React.Component {
     @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
 
     @observable private newDashboardName: string | undefined = undefined;
-    @observable private newDashboardColor: string | undefined = "#AFAFAF";
+    @observable private newDashboardColor: string | undefined = '#AFAFAF';
     @action abortCreateNewDashboard = () => {
         this.newDashboardName = undefined;
     };
@@ -100,30 +100,15 @@ export class DashboardView extends React.Component {
         const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
         const placeholder = `Dashboard ${dashboardCount}`;
         return (
-            <div className="new-dashboard"
-                style={{ 
+            <div
+                className="new-dashboard"
+                style={{
                     background: StrCast(Doc.UserDoc().userBackgroundColor),
-                    color: StrCast(Doc.UserDoc().userColor)
-                }}
-            >
+                    color: StrCast(Doc.UserDoc().userColor),
+                }}>
                 <div className="header">Create New Dashboard</div>
-                <EditableText 
-                    formLabel='Title'
-                    placeholder={placeholder}
-                    type={Type.SEC}
-                    color={StrCast(Doc.UserDoc().userColor)}
-                    setVal={val => this.setNewDashboardName(val as string)}
-                    fillWidth
-                />
-                <ColorPicker
-                    formLabel='Background'
-                    colorPickerType='github'
-                    type={Type.TERT}
-                    selectedColor={this.newDashboardColor}
-                    setSelectedColor={color => {
-                        this.setNewDashboardColor(color);
-                    }}
-                />
+                <EditableText formLabel="Title" placeholder={placeholder} type={Type.SEC} color={StrCast(Doc.UserDoc().userColor)} setVal={val => this.setNewDashboardName(val as string)} fillWidth />
+                <ColorPicker formLabel="Background" colorPickerType="github" type={Type.TERT} selectedColor={this.newDashboardColor} setSelectedColor={this.setNewDashboardColor} />
                 <div className="button-bar">
                     <Button text="Cancel" color={StrCast(Doc.UserDoc().userColor)} onClick={this.abortCreateNewDashboard} />
                     <Button type={Type.TERT} text="Create" color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.createNewDashboard(this.newDashboardName!, this.newDashboardColor)} />
@@ -165,21 +150,14 @@ export class DashboardView extends React.Component {
     };
 
     render() {
-        const color = StrCast(Doc.UserDoc().userColor)
-        const variant = StrCast(Doc.UserDoc().userVariantColor)
+        const color = StrCast(Doc.UserDoc().userColor);
+        const variant = StrCast(Doc.UserDoc().userVariantColor);
         return (
             <>
                 <div className="dashboard-view">
                     <div className="left-menu">
-                        <Button 
-                            text={'My Dashboards'}
-                            active={this.selectedDashboardGroup === DashboardGroup.MyDashboards}
-                            color={color}
-                            align={'flex-start'}
-                            onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}
-                            fillWidth
-                        />
-                        <Button 
+                        <Button text={'My Dashboards'} active={this.selectedDashboardGroup === DashboardGroup.MyDashboards} color={color} align={'flex-start'} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)} fillWidth />
+                        <Button
                             text={'Shared Dashboards' + ' (' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
                             active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards}
                             color={this.getDashboards(DashboardGroup.SharedDashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'green' : color}
@@ -196,11 +174,11 @@ export class DashboardView extends React.Component {
                                 .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key))
                                 .some(key => dashboard[DocAcl][key] !== AclPrivate);
                             return (
-                                <div 
-                                    className="dashboard-container" 
-                                    key={dashboard[Id]} 
+                                <div
+                                    className="dashboard-container"
+                                    key={dashboard[Id]}
                                     style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
-                                    onContextMenu={e => this.onContextMenu(dashboard, e)} 
+                                    onContextMenu={e => this.onContextMenu(dashboard, e)}
                                     onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
                                         src={
@@ -208,12 +186,7 @@ export class DashboardView extends React.Component {
                                         }
                                     />
                                     <div className="info">
-                                        <EditableText 
-                                            type={Type.PRIM}
-                                            color={color}
-                                            val={StrCast(dashboard.title)} 
-                                            setVal={val => (Doc.GetProto(dashboard).title = val)}
-                                        />
+                                        <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (Doc.GetProto(dashboard).title = val)} />
                                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
                                         <div
                                             className="more"
@@ -229,10 +202,13 @@ export class DashboardView extends React.Component {
                                             <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
                                         </div>
                                     </div>
-                                    <div className={`background`} style={{
-                                        background: StrCast(Doc.UserDoc().userColor),
-                                        filter: 'opacity(0.2)'
-                                    }}/>
+                                    <div
+                                        className={`background`}
+                                        style={{
+                                            background: StrCast(Doc.UserDoc().userColor),
+                                            filter: 'opacity(0.2)',
+                                        }}
+                                    />
                                     <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div>
                                 </div>
                             );
@@ -243,10 +219,13 @@ export class DashboardView extends React.Component {
                                 this.setNewDashboardName('');
                             }}>
                             +
-                            <div className={`background`} style={{
-                                background: StrCast(Doc.UserDoc().userColor),
-                                filter: 'opacity(0.2)'
-                            }}/>
+                            <div
+                                className={`background`}
+                                style={{
+                                    background: StrCast(Doc.UserDoc().userColor),
+                                    filter: 'opacity(0.2)',
+                                }}
+                            />
                         </div>
                     </div>
                 </div>
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index 8fe5c2e01..e076e69ca 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -3,7 +3,7 @@ import { DateField } from '../../fields/DateField';
 import { Doc, DocListCast, HierarchyMapping, Opt, ReverseHierarchyMap } from '../../fields/Doc';
 import { AclAdmin, AclAugment, AclEdit, AclPrivate, AclReadonly, DocAcl, DocData } from '../../fields/DocSymbols';
 import { List } from '../../fields/List';
-import { Cast, StrCast } from '../../fields/Types';
+import { Cast, DocCast, StrCast } from '../../fields/Types';
 import { distributeAcls, GetEffectiveAcl, inheritParentAcls, SharingPermissions } from '../../fields/util';
 import { returnFalse } from '../../Utils';
 import { DocUtils } from '../documents/Documents';
@@ -149,9 +149,9 @@ export function ViewBoxAnnotatableComponent<P extends ViewBoxAnnotatableProps>()
                 toRemove.forEach(doc => {
                     leavePushpin && DocUtils.LeavePushpin(doc, annotationKey ?? this.annotationKey);
                     Doc.RemoveDocFromList(targetDataDoc, annotationKey ?? this.annotationKey, doc);
+                    Doc.RemoveDocFromList(Doc.GetProto(doc), 'proto_embeddings', doc);
                     doc.embedContainer = undefined;
                     if (recent) {
-                        Doc.RemoveDocFromList(recent, 'data', doc);
                         doc.type !== DocumentType.LOADING && Doc.AddDocToList(recent, 'data', doc, undefined, true, true);
                     }
                 });
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 68d29942b..63bd01b19 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -169,8 +169,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 }));
-        console.log("this is option " + options)
-        console.log("this is alll facets " + this._allFacets)
         return (
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
@@ -192,17 +190,15 @@ export class FilterPanel extends React.Component<filterProps> {
                 <div className="filterBox-tree" key="tree">
                     {Array.from(this.activeFacets.keys()).map(facetHeader => (
                         <div>
-                            <div className  = "filterBox-facetHeader">
-                                <div className = "filterBox-facetHeader-Header"> </div>
+                            <div className="filterBox-facetHeader">
+                                <div className="filterBox-facetHeader-Header"> </div>
                                 {facetHeader.charAt(0).toUpperCase() + facetHeader.slice(1)}
-                                
-                                <div className = "filterBox-facetHeader-collapse"> 
-                                 <AiOutlineMinusSquare/>
-                                 {/* <CiCircleRemove/> */}
-                                  </div>
-                               
+
+                                <div className="filterBox-facetHeader-collapse">
+                                    <AiOutlineMinusSquare />
+                                    {/* <CiCircleRemove/> */}
+                                </div>
                             </div>
-                           
 
                             {this.displayFacetValueFilterUIs(this.activeFacets.get(facetHeader), facetHeader)}
                         </div>
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 286d39943..f79a30ad3 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -313,8 +313,10 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                     className="lightboxView-tabBtn"
                     title="open in tab"
                     onClick={e => {
+                        const lightdoc = LightboxView._docTarget || LightboxView._doc!;
                         e.stopPropagation();
-                        CollectionDockingView.AddSplit(LightboxView._docTarget || LightboxView._doc!, OpenWhereMod.none);
+                        Doc.RemoveDocFromList(Doc.MyRecentlyClosed, 'data', lightdoc);
+                        CollectionDockingView.AddSplit(lightdoc, OpenWhereMod.none);
                         SelectionManager.DeselectAll();
                         LightboxView.SetLightboxDoc(undefined);
                     }}>
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 2fa42d091..2a73d77ed 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -6,10 +6,7 @@ import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { AssignAllExtensions } from '../../extensions/General/Extensions';
 import { FieldLoader } from '../../fields/FieldLoader';
-import { DocServer } from '../DocServer';
-import { Docs } from '../documents/Documents';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { LinkManager } from '../util/LinkManager'; // this must come before importing Docs and CurrentUserUtils
 import { ReplayMovements } from '../util/ReplayMovements';
 import { TrackMovements } from '../util/TrackMovements';
 import { CollectionView } from './collections/CollectionView';
@@ -20,7 +17,7 @@ import './global/globalScripts';
 dotenv.config();
 
 AssignAllExtensions();
-FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure why this is needed to get the code loaded properly...
+FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' }; // bcz: not sure why this is needed to get the code loaded properly...
 
 (async () => {
     MainView.Live = window.location.search.includes('live');
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index cbaa763f5..dc236b603 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -4,7 +4,7 @@ import * as far from '@fortawesome/free-regular-svg-icons';
 import * as fa from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import 'browndash-components/dist/styles/global.min.css';
-import { action, computed, configure, observable, reaction, runInAction } from 'mobx';
+import { action, computed, configure, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import 'normalize.css';
 import * as React from 'react';
@@ -182,14 +182,6 @@ export class MainView extends React.Component {
                 'currentFrame',
             ]); // can play with these fields on someone else's
         }
-        DocServer.GetRefField('rtfProto').then(
-            proto =>
-                proto instanceof Doc &&
-                reaction(
-                    () => StrCast(proto.BROADCAST_MESSAGE),
-                    msg => msg && alert(msg)
-                )
-        );
 
         const tag = document.createElement('script');
         tag.src = 'https://www.youtube.com/iframe_api';
@@ -527,7 +519,7 @@ export class MainView extends React.Component {
     });
 
     initEventListeners = () => {
-        window.addEventListener('beforeunload', () => DocServer.UPDATE_SERVER_CACHE());
+        window.addEventListener('beforeunload', DocServer.UPDATE_SERVER_CACHE);
         window.addEventListener('drop', e => e.preventDefault(), false); // prevent default behavior of navigating to a new web page
         window.addEventListener('dragover', e => e.preventDefault(), false);
         // document.addEventListener("pointermove", action(e => SearchBox.Instance._undoBackground = UndoManager.batchCounter ? "#000000a8" : undefined));
diff --git a/src/client/views/PropertiesButtons.tsx b/src/client/views/PropertiesButtons.tsx
index b74eabcc3..8cae34d7d 100644
--- a/src/client/views/PropertiesButtons.tsx
+++ b/src/client/views/PropertiesButtons.tsx
@@ -375,7 +375,6 @@ export class PropertiesButtons extends React.Component<{}, {}> {
                 val: value[1],
             };
         });
-        console.log('click val: ', this.onClickVal);
         return !this.selectedDoc ? null : (
             <Dropdown
                 tooltip={'Choose onClick behavior'}
diff --git a/src/client/views/PropertiesDocContextSelector.tsx b/src/client/views/PropertiesDocContextSelector.tsx
index 395aa2b61..d157e7b1c 100644
--- a/src/client/views/PropertiesDocContextSelector.tsx
+++ b/src/client/views/PropertiesDocContextSelector.tsx
@@ -38,7 +38,6 @@ export class PropertiesDocContextSelector extends React.Component<PropertiesDocC
                 }, new Set<Doc>())
                 .keys()
         );
-        console.log('embeddings ' + embeddings.length);
 
         return doclayouts
             .filter(doc => !Doc.AreProtosEqual(doc, CollectionDockingView.Instance?.props.Document))
diff --git a/src/client/views/PropertiesSection.tsx b/src/client/views/PropertiesSection.tsx
index ec8043ffe..6fab0168b 100644
--- a/src/client/views/PropertiesSection.tsx
+++ b/src/client/views/PropertiesSection.tsx
@@ -1,19 +1,19 @@
 import React = require('react');
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { action, computed, observable } from "mobx"
-import { observer } from "mobx-react"
-import './PropertiesSection.scss'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { action, computed, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import './PropertiesSection.scss';
 import { Doc } from '../../fields/Doc';
 import { StrCast } from '../../fields/Types';
 
 export interface PropertiesSectionProps {
-    title: string, 
-    content?: JSX.Element | string | null, 
-    isOpen: boolean,
-    setIsOpen: (bool: boolean) => any 
-    inSection?: boolean,
-    setInSection?: (bool: boolean) => any
-    onDoubleClick?: () => void
+    title: string;
+    content?: JSX.Element | string | null;
+    isOpen: boolean;
+    setIsOpen: (bool: boolean) => any;
+    inSection?: boolean;
+    setInSection?: (bool: boolean) => any;
+    onDoubleClick?: () => void;
 }
 
 @observer
@@ -33,34 +33,32 @@ export class PropertiesSection extends React.Component<PropertiesSectionProps> {
     @observable isDouble: boolean = false;
 
     render() {
-        console.log(this.props.title, this.props.content)
-        if (this.props.content === undefined || this.props.content === null) return null
-        else return <div className="propertiesView-section" onPointerEnter={action(() => (this.props.setInSection && this.props.setInSection(true)))} onPointerLeave={action(() => (this.props.setInSection && this.props.setInSection(false)))}>
-        <div className="propertiesView-sectionTitle" 
-            onDoubleClick={action((e) => {
-                this.isDouble = true;
-                this.props.onDoubleClick && this.props.onDoubleClick()
-                console.log("open options")
-                this.props.setIsOpen(true)
-                setTimeout(() => this.isDouble = false, 300)
-            })}
-            onClick={action((e) => {
-                this.props.setIsOpen(!this.props.isOpen)
-            })} 
-            style={{ 
-                background: this.props.isOpen ?  this.variantColor : this.backgroundColor,
-                color: this.color
-            }}>
-            {this.props.title}
-            <div className="propertiesView-sectionTitle-icon">
-                <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg"  />
-            </div>
-        </div>
-        {!this.props.isOpen ? null :
-            <div className="propertiesView-content">
-                {this.props.content}
-            </div>
-        }
-    </div>
+        if (this.props.content === undefined || this.props.content === null) return null;
+        else
+            return (
+                <div className="propertiesView-section" onPointerEnter={action(() => this.props.setInSection && this.props.setInSection(true))} onPointerLeave={action(() => this.props.setInSection && this.props.setInSection(false))}>
+                    <div
+                        className="propertiesView-sectionTitle"
+                        onDoubleClick={action(e => {
+                            this.isDouble = true;
+                            this.props.onDoubleClick && this.props.onDoubleClick();
+                            this.props.setIsOpen(true);
+                            setTimeout(() => (this.isDouble = false), 300);
+                        })}
+                        onClick={action(e => {
+                            this.props.setIsOpen(!this.props.isOpen);
+                        })}
+                        style={{
+                            background: this.props.isOpen ? this.variantColor : this.backgroundColor,
+                            color: this.color,
+                        }}>
+                        {this.props.title}
+                        <div className="propertiesView-sectionTitle-icon">
+                            <FontAwesomeIcon icon={this.props.isOpen ? 'caret-down' : 'caret-right'} size="lg" />
+                        </div>
+                    </div>
+                    {!this.props.isOpen ? null : <div className="propertiesView-content">{this.props.content}</div>}
+                </div>
+            );
     }
-}
\ No newline at end of file
+}
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 27b9c3c7a..872f1c6ab 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -8,7 +8,7 @@ import { concat } from 'lodash';
 import { Lambda, action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import { ColorState, SketchPicker } from 'react-color';
-import * as Icons from "react-icons/bs"; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
+import * as Icons from 'react-icons/bs'; //{BsCollectionFill, BsFillFileEarmarkImageFill} from "react-icons/bs"
 import { GrCircleInformation } from 'react-icons/gr';
 import { Utils, emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents } from '../../Utils';
 import { Doc, DocListCast, Field, FieldResult, HierarchyMapping, NumListCast, Opt, ReverseHierarchyMap, StrListCast } from '../../fields/Doc';
@@ -51,7 +51,6 @@ interface PropertiesViewProps {
     addDocTab: (doc: Doc, where: OpenWhere) => boolean;
 }
 
-
 @observer
 export class PropertiesView extends React.Component<PropertiesViewProps> {
     private _widthUndo?: UndoManager.Batch;
@@ -191,7 +190,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             });
 
             rows.push(
-                <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: "white", textAlign: "center" }}>
+                <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: 'white', textAlign: 'center' }}>
                     <EditableView key="editableView" oneLine contents={'add key:value or #tags'} height={13} fontSize={10} GetValue={() => ''} SetValue={this.setKeyValue} />
                 </div>
             );
@@ -249,14 +248,12 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return !this.selectedDoc ? null : <PropertiesDocContextSelector DocView={this.selectedDocumentView} hideTitle={true} addDocTab={this.props.addDocTab} />;
     }
 
-    @computed get contextCount(){
-        console.log("in context count");
-        if (this.selectedDocumentView){ 
-            const target = (this.selectedDocumentView.props.Document)
-            const embeddings = DocListCast(target.proto_embeddings)
-            console.log(embeddings.length -1 );
-            return (embeddings.length - 1)
-        } else{
+    @computed get contextCount() {
+        if (this.selectedDocumentView) {
+            const target = this.selectedDocumentView.props.Document;
+            const embeddings = DocListCast(target.proto_embeddings);
+            return embeddings.length - 1;
+        } else {
             return 0;
         }
     }
@@ -266,13 +263,11 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return !selAnchor ? null : <PropertiesDocBacklinksSelector Document={selAnchor} hideTitle={true} addDocTab={this.props.addDocTab} />;
     }
 
-    @computed get linkCount(){
-        const selAnchor =  this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc;
+    @computed get linkCount() {
+        const selAnchor = this.selectedDocumentView?.anchorViewDoc ?? LinkManager.currentLinkAnchor ?? this.selectedDoc;
         var counter = 0;
 
-        LinkManager.Links(selAnchor).forEach((l, i) =>
-                counter ++
-            );
+        LinkManager.Links(selAnchor).forEach((l, i) => counter++);
 
         return counter;
     }
@@ -356,7 +351,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         return (
             <Tooltip title={<div className="dash-tooltip">Notify with message</div>}>
                 <div className="notify-button">
-                    <FontAwesomeIcon className="notify-button-icon" icon="bell"  size="sm" />
+                    <FontAwesomeIcon className="notify-button-icon" icon="bell" size="sm" />
                 </div>
             </Tooltip>
         );
@@ -367,16 +362,16 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
      */
     @computed get expansionIcon() {
         return (
-            <div className="expansion-button" >
-                <IconButton 
-                    icon={<FontAwesomeIcon icon={'ellipsis-h'} />} 
-                    size={Size.XSMALL} 
-                    color={StrCast(Doc.UserDoc().userColor)} 
+            <div className="expansion-button">
+                <IconButton
+                    icon={<FontAwesomeIcon icon={'ellipsis-h'} />}
+                    size={Size.XSMALL}
+                    color={StrCast(Doc.UserDoc().userColor)}
                     onClick={action(() => {
                         if (this.selectedDocumentView || this.selectedDoc) {
                             SharingManager.Instance.open(this.selectedDocumentView?.props.Document === this.selectedDoc ? this.selectedDocumentView : undefined, this.selectedDoc);
                         }
-                    })} 
+                    })}
                 />
             </div>
         );
@@ -418,7 +413,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             <div>
                 <div className={'propertiesView-shareDropDown'}>
                     <div className={`propertiesView-shareDropDown${permission}`}>
-                        <div >{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
+                        <div>{admin && permission !== 'Owner' ? this.getPermissionsSelect(name, permission, showGuestOptions) : concat(shareImage, ' ', permission)}</div>
                     </div>
                 </div>
             </div>
@@ -450,7 +445,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         const target = docs[0];
 
         const showAdmin = GetEffectiveAcl(target) == AclAdmin;
-        console.log(GetEffectiveAcl(target), Doc.GetProto(target)[`acl-${normalizeEmail(Doc.CurrentUserEmail)}`])
         const individualTableEntries = [];
         const usersAdded: string[] = []; // all shared users being added - organized by denormalized email
 
@@ -522,7 +516,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <div>
                     <br></br> Individuals with Access to this Document
                 </div>
-                <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                <div className="propertiesView-sharingTable" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                     {<div> {individualTableEntries}</div>}
                 </div>
                 {groupTableEntries.length > 0 ? (
@@ -530,7 +524,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         <div>
                             <br></br> Groups with Access to this Document
                         </div>
-                        <div className="propertiesView-sharingTable" style={{background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor)}}>
+                        <div className="propertiesView-sharingTable" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }}>
                             {<div> {groupTableEntries}</div>}
                         </div>
                     </div>
@@ -562,68 +556,43 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get editableTitle() {
-
         const titles = new Set<string>();
         const title = Array.from(titles.keys()).length > 1 ? '--multiple selected--' : StrCast(this.selectedDoc?.title);
         SelectionManager.Views().forEach(dv => titles.add(StrCast(dv.rootDoc.title)));
-        return (
-            <EditableText
-                val={title}
-                setVal={this.setTitle}
-                color={this.color}
-                type={Type.SEC}
-                formLabel={"Title"}
-                fillWidth
-            />
-        );
+        return <EditableText val={title} setVal={this.setTitle} color={this.color} type={Type.SEC} formLabel={'Title'} fillWidth />;
     }
 
     @computed get currentType() {
-        // console.log("current type " + this.selectedDoc?.type)
- 
-         const documentType = StrCast(this.selectedDoc?.type)
-         var currentType: string = documentType;
-         var capitalizedDocType = Utils.cleanDocumentType(currentType as DocumentType);
- 
-         return (
-             <div>
-                 <div className = "propertiesView-wordType">Type</div>  
-                 <div className= "currentType"> 
-                 <div className='currentType-icon'>
-                      {this.currentComponent}
-                 </div>
-                
-                   {capitalizedDocType} 
-                
-                 </div>
-                
-             </div>
-           
-         )
-     }
+        const documentType = StrCast(this.selectedDoc?.type);
+        var currentType: string = documentType;
+        var capitalizedDocType = Utils.cleanDocumentType(currentType as DocumentType);
 
-    @computed get currentComponent() {
+        return (
+            <div>
+                <div className="propertiesView-wordType">Type</div>
+                <div className="currentType">
+                    <div className="currentType-icon">{this.currentComponent}</div>
 
-        var iconName = StrCast(this.selectedDoc?.systemIcon)
+                    {capitalizedDocType}
+                </div>
+            </div>
+        );
+    }
 
-        // if (this.selectedDoc?.type === DocumentType.COL){
-        //     console.log("i did it!")
-        // }
-       
+    @computed get currentComponent() {
+        var iconName = StrCast(this.selectedDoc?.systemIcon);
 
-        if (iconName){
+        if (iconName) {
             const Icon = Icons[iconName as keyof typeof Icons];
             return <Icon />;
-        } else{
-          return <Icons.BsFillCollectionFill/>
-
+        } else {
+            return <Icons.BsFillCollectionFill />;
         }
     }
 
     @undoBatch
     @action
     setTitle = (value: string | number) => {
-        console.log(value)
         if (SelectionManager.Views().length > 1) {
             SelectionManager.Views().map(dv => Doc.SetInPlace(dv.rootDoc, 'title', value, true));
         } else if (this.dataDoc) {
@@ -687,7 +656,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                         className="inking-button-points"
                         style={{ backgroundColor: InkStrokeProperties.Instance._controlButton ? 'black' : '' }}
                         onPointerDown={action(() => (InkStrokeProperties.Instance._controlButton = !InkStrokeProperties.Instance._controlButton))}>
-                        <FontAwesomeIcon icon="bezier-curve"  size="lg" />
+                        <FontAwesomeIcon icon="bezier-curve" size="lg" />
                     </div>
                 </Tooltip>
             </div>
@@ -706,10 +675,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} onKeyPress={e => e.stopPropagation()} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
-                        <FontAwesomeIcon icon="caret-up"  size="sm" />
+                        <FontAwesomeIcon icon="caret-up" size="sm" />
                     </div>
                     <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}>
-                        <FontAwesomeIcon icon="caret-down"  size="sm" />
+                        <FontAwesomeIcon icon="caret-down" size="sm" />
                     </div>
                 </div>
             </div>
@@ -963,10 +932,10 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                 <input className="inputBox-input" type="text" value={value} onChange={e => setter(e.target.value)} />
                 <div className="inputBox-button">
                     <div className="inputBox-button-up" key="up2" onPointerDown={undoBatch(action(() => this.upDownButtons('up', key)))}>
-                        <FontAwesomeIcon icon="caret-up"  size="sm" />
+                        <FontAwesomeIcon icon="caret-up" size="sm" />
                     </div>
                     <div className="inputbox-Button-down" key="down2" onPointerDown={undoBatch(action(() => this.upDownButtons('down', key)))}>
-                        <FontAwesomeIcon icon="caret-down"  size="sm" />
+                        <FontAwesomeIcon icon="caret-down" size="sm" />
                     </div>
                 </div>
             </div>
@@ -983,7 +952,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         this.openSharing = false;
         this.openLayout = false;
         this.openFilters = false;
-    }
+    };
 
     @computed get widthAndDash() {
         return (
@@ -1065,64 +1034,45 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any) => {
-        return <div>
-            <NumberInput
-                formLabel={label}
-                formLabelPlacement={'left'}
-                type={Type.SEC}
-                unit={unit}
-                fillWidth
-                color={this.color}
-                number={number}
-                setNumber={setNumber} 
-                min={min}
-                max={max}            
-            />
-            <Slider 
-                multithumb={false}
-                color={this.color}
-                size={Size.XSMALL} 
-                min={min} 
-                max={max}
-                unit={unit} 
-                number={number}
-                setNumber={setNumber}
-                fillWidth
-            />
-        </div>
-    }
+        return (
+            <div>
+                <NumberInput formLabel={label} formLabelPlacement={'left'} type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
+                <Slider multithumb={false} color={this.color} size={Size.XSMALL} min={min} max={max} unit={unit} number={number} setNumber={setNumber} fillWidth />
+            </div>
+        );
+    };
 
     @computed get transformEditor() {
         return (
             <div className="transform-editor">
                 {this.isInk ? this.controlPointsButton : null}
                 {this.getNumber(
-                    "Height",
-                    " px",
+                    'Height',
+                    ' px',
                     0,
                     1000,
                     Number(this.shapeHgt),
                     undoable((val: string) => !isNaN(Number(val)) && (this.shapeHgt = val), 'set height')
                 )}
                 {this.getNumber(
-                    "Width",
-                    " px",
+                    'Width',
+                    ' px',
                     0,
                     1000,
                     Number(this.shapeWid),
                     undoable((val: string) => !isNaN(Number(val)) && (this.shapeWid = val), 'set width')
                 )}
                 {this.getNumber(
-                    "X Coordinate",
-                    " px",
+                    'X Coordinate',
+                    ' px',
                     -2000,
                     2000,
                     Number(this.shapeXps),
                     undoable((val: string) => !isNaN(Number(val)) && (this.shapeXps = val), 'set x coord')
                 )}
                 {this.getNumber(
-                    "Y Coordinate",
-                    " px",
+                    'Y Coordinate',
+                    ' px',
                     -2000,
                     2000,
                     Number(this.shapeYps),
@@ -1133,38 +1083,44 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     }
 
     @computed get optionsSubMenu() {
-        return <PropertiesSection
-            title="Options"
-            content={<PropertiesButtons />}
-            inSection={this.inOptions}
-            isOpen={this.openOptions}
-            setInSection={(bool) => this.inOptions = bool}
-            setIsOpen={(bool) => this.openOptions = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+        return (
+            <PropertiesSection
+                title="Options"
+                content={<PropertiesButtons />}
+                inSection={this.inOptions}
+                isOpen={this.openOptions}
+                setInSection={bool => (this.inOptions = bool)}
+                setIsOpen={bool => (this.openOptions = bool)}
+                onDoubleClick={() => this.onDoubleClick()}
+            />
+        );
     }
 
     @computed get sharingSubMenu() {
-        return <PropertiesSection
-            title="Sharing & Permissions"
-            content={<>
-            {/* <div className="propertiesView-buttonContainer"> */}
-                    <div className="propertiesView-acls-checkbox">
-                        Layout Permissions
-                        <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
-                    </div>
-                    {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
+        return (
+            <PropertiesSection
+                title="Sharing & Permissions"
+                content={
+                    <>
+                        {/* <div className="propertiesView-buttonContainer"> */}
+                        <div className="propertiesView-acls-checkbox">
+                            Layout Permissions
+                            <Checkbox color="primary" onChange={action(() => (this.layoutDocAcls = !this.layoutDocAcls))} checked={this.layoutDocAcls} />
+                        </div>
+                        {/* <Tooltip title={<><div className="dash-tooltip">{"Re-distribute sharing settings"}</div></>}>
                         <button onPointerDown={() => SharingManager.Instance.distributeOverCollection(this.selectedDoc!)}>
                             <FontAwesomeIcon icon="redo-alt"  size="1x" />
                         </button>
                     </Tooltip> */}
-                {/* </div> */}
-                {this.sharingTable}
-            </>}
-            isOpen={this.openSharing}
-            setIsOpen={(bool) => this.openSharing = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+                        {/* </div> */}
+                        {this.sharingTable}
+                    </>
+                }
+                isOpen={this.openSharing}
+                setIsOpen={bool => (this.openSharing = bool)}
+                onDoubleClick={() => this.onDoubleClick()}
+            />
+        );
     }
 
     /**
@@ -1192,15 +1148,19 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     };
 
     @computed get filtersSubMenu() {
-        return <PropertiesSection 
-            title="Filters"
-            content={<div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
-                <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
-            </div>}
-            isOpen={this.openFilters}
-            setIsOpen={(bool) => this.openFilters = bool}
-             onDoubleClick={() => this.onDoubleClick()}
-        />
+        return (
+            <PropertiesSection
+                title="Filters"
+                content={
+                    <div className="propertiesView-content filters" style={{ position: 'relative', height: 'auto' }}>
+                        <FilterPanel rootDoc={this.selectedDoc ?? Doc.ActiveDashboard!} />
+                    </div>
+                }
+                isOpen={this.openFilters}
+                setIsOpen={bool => (this.openFilters = bool)}
+                onDoubleClick={() => this.onDoubleClick()}
+            />
+        );
     }
 
     @computed get inkSubMenu() {
@@ -1208,68 +1168,42 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
 
         return (
             <>
-                <PropertiesSection
-                    title="Appearance"
-                    content={this.isInk ? this.appearanceEditor : null}
-                    isOpen={this.openAppearance}
-                    setIsOpen={(bool) => this.openAppearance = bool}
-                     onDoubleClick={() => this.onDoubleClick()}
-                />
-                <PropertiesSection
-                    title="Transform"
-                    content={this.transformEditor}
-                    isOpen={this.openTransform}
-                    setIsOpen={(bool) => this.openTransform = bool}
-                    onDoubleClick={() => this.onDoubleClick()}
-                />
+                <PropertiesSection title="Appearance" content={this.isInk ? this.appearanceEditor : null} isOpen={this.openAppearance} setIsOpen={bool => (this.openAppearance = bool)} onDoubleClick={() => this.onDoubleClick()} />
+                <PropertiesSection title="Transform" content={this.transformEditor} isOpen={this.openTransform} setIsOpen={bool => (this.openTransform = bool)} onDoubleClick={() => this.onDoubleClick()} />
             </>
         );
     }
 
     @computed get fieldsSubMenu() {
-        return <PropertiesSection
-            title="Fields & Tags"
-            content={<div className="propertiesView-content fields">{
-                Doc.noviceMode ? this.noviceFields : this.expandedField}
-            </div>}
-            isOpen={this.openFields}
-            setIsOpen={(bool) => this.openFields = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+        return (
+            <PropertiesSection
+                title="Fields & Tags"
+                content={<div className="propertiesView-content fields">{Doc.noviceMode ? this.noviceFields : this.expandedField}</div>}
+                isOpen={this.openFields}
+                setIsOpen={bool => (this.openFields = bool)}
+                onDoubleClick={() => this.onDoubleClick()}
+            />
+        );
     }
 
     @computed get contextsSubMenu() {
-        return <PropertiesSection
-            title="Other Contexts"
-            content={this.contextCount > 0 ? this.contexts : "There are no other contexts."}
-            isOpen={this.openContexts}
-            setIsOpen={(bool) => this.openContexts = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+        return (
+            <PropertiesSection
+                title="Other Contexts"
+                content={this.contextCount > 0 ? this.contexts : 'There are no other contexts.'}
+                isOpen={this.openContexts}
+                setIsOpen={bool => (this.openContexts = bool)}
+                onDoubleClick={() => this.onDoubleClick()}
+            />
+        );
     }
 
-
-
-
-
     @computed get linksSubMenu() {
-        return <PropertiesSection
-            title="Linked To"
-            content={this.linkCount > 0 ? this.links : "There are no current links." }
-            isOpen={this.openLinks}
-            setIsOpen={(bool) => this.openLinks = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+        return <PropertiesSection title="Linked To" content={this.linkCount > 0 ? this.links : 'There are no current links.'} isOpen={this.openLinks} setIsOpen={bool => (this.openLinks = bool)} onDoubleClick={() => this.onDoubleClick()} />;
     }
 
     @computed get layoutSubMenu() {
-        return <PropertiesSection
-            title="Layout"
-            content={this.layoutPreview}
-            isOpen={this.openLayout}
-            setIsOpen={(bool) => this.openLayout = bool}
-            onDoubleClick={() => this.onDoubleClick()}
-        />
+        return <PropertiesSection title="Layout" content={this.layoutPreview} isOpen={this.openLayout} setIsOpen={bool => (this.openLayout = bool)} onDoubleClick={() => this.onDoubleClick()} />;
     }
 
     @computed get description() {
@@ -1470,224 +1404,226 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
         if (scale > 1) scale = 1;
         this.sourceAnchor && (this.sourceAnchor.followLinkZoomScale = scale);
     };
-    
+
     @computed get linkProperties() {
         const zoom = Number((NumCast(this.sourceAnchor?.followLinkZoomScale, 1) * 100).toPrecision(3));
         const targZoom = this.sourceAnchor?.followLinkZoom;
         const indent = 30;
         const hasSelectedAnchor = LinkManager.Links(this.sourceAnchor).includes(LinkManager.currentLink!);
 
-        return <>
-        <div className="propertiesView-section" style={{ background: 'darkgray' }}>
-            <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
-                <p>Relationship</p>
-                {this.editRelationship}
-            </div>
-            <div className="propertiesView-input" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
-                <p>Description</p>
-                {this.editDescription}
-            </div>
-            <div className="propertiesView-input inline">
-                <p>Show link</p>
-                <button
-                    style={{ background: !LinkManager.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
-                    onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
-                    onClick={e => e.stopPropagation()}
-                    className="propertiesButton">
-                    <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                </button>
-            </div>
-            <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                <p>Auto-move anchors</p>
-                <button
-                    style={{ background: !LinkManager.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
-                    onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
-                    onClick={e => e.stopPropagation()}
-                    className="propertiesButton">
-                    <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                </button>
-            </div>
-            <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
-                <p>Display arrow</p>
-                <button
-                    style={{ background: !LinkManager.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
-                    onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
-                    onClick={e => e.stopPropagation()}
-                    className="propertiesButton">
-                    <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                </button>
-            </div>
-        </div>
-        {!hasSelectedAnchor ? null : (
-            <div className="propertiesView-section">
-                <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
-                    <p>Follow by</p>
-                    <select onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
-                        <option value={undefined}>Default</option>
-                        <option value={OpenWhere.addLeft}>Opening in new left pane</option>
-                        <option value={OpenWhere.addRight}>Opening in new right pane</option>
-                        <option value={OpenWhere.replaceLeft}>Replacing left tab</option>
-                        <option value={OpenWhere.replaceRight}>Replacing right tab</option>
-                        <option value={OpenWhere.lightbox}>Opening in lightbox</option>
-                        <option value={OpenWhere.add}>Opening in new tab</option>
-                        <option value={OpenWhere.replace}>Replacing current tab</option>
-                        <option value={OpenWhere.inParent}>Opening in same collection</option>
-                        {LinkManager.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
-                    </select>
-                </div>
-                <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
-                    <p>Animation</p>
-                    <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
-                        <option value="default">Default</option>
-                        {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
-                            <option key={effect.toString()} value={effect.toString()}>
-                                {effect.toString()}
-                            </option>
-                        ))}
-                    </select>
-                    <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, height: 36, gridColumn: 3, gridTemplateRows: '12px 12px 12px' }}>
-                        {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
-                        {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
-                        {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
-                        {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
-                        {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
+        return (
+            <>
+                <div className="propertiesView-section" style={{ background: 'darkgray' }}>
+                    <div className="propertiesView-input first" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
+                        <p>Relationship</p>
+                        {this.editRelationship}
+                    </div>
+                    <div className="propertiesView-input" style={{ display: 'grid', gridTemplateColumns: '84px auto' }}>
+                        <p>Description</p>
+                        {this.editDescription}
+                    </div>
+                    <div className="propertiesView-input inline">
+                        <p>Show link</p>
+                        <button
+                            style={{ background: !LinkManager.currentLink?.link_displayLine ? '' : '#4476f7', borderRadius: 3 }}
+                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayLine')}
+                            onClick={e => e.stopPropagation()}
+                            className="propertiesButton">
+                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                        </button>
+                    </div>
+                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
+                        <p>Auto-move anchors</p>
+                        <button
+                            style={{ background: !LinkManager.currentLink?.link_autoMoveAnchors ? '' : '#4476f7', borderRadius: 3 }}
+                            onPointerDown={e => this.toggleLinkProp(e, 'link_autoMoveAnchors')}
+                            onClick={e => e.stopPropagation()}
+                            className="propertiesButton">
+                            <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                        </button>
+                    </div>
+                    <div className="propertiesView-input inline" style={{ marginLeft: 10 }}>
+                        <p>Display arrow</p>
+                        <button
+                            style={{ background: !LinkManager.currentLink?.link_displayArrow ? '' : '#4476f7', borderRadius: 3 }}
+                            onPointerDown={e => this.toggleLinkProp(e, 'link_displayArrow')}
+                            onClick={e => e.stopPropagation()}
+                            className="propertiesButton">
+                            <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                        </button>
                     </div>
                 </div>
-                {PresBox.inputter(
-                    '0.1',
-                    '0.1',
-                    '10',
-                    NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000,
-                    true,
-                    (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)),
-                    indent
-                )}{' '}
-                <div
-                    className={'slider-headers'}
-                    style={{
-                        display: 'grid',
-                        justifyContent: 'space-between',
-                        width: `calc(100% - ${indent * 2}px)`,
-                        marginLeft: indent,
-                        marginRight: indent,
-                        gridTemplateColumns: 'auto auto',
-                        borderTop: 'solid',
-                    }}>
-                    <div className="slider-text">Fast</div>
-                    <div className="slider-text">Slow</div>
-                </div>{' '}
-                <div className="propertiesView-input inline">
-                    <p>Play Target Audio</p>
-                    <button
-                        style={{ background: !this.sourceAnchor?.followLinkAudio ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkAudio', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Zoom Text Selections</p>
-                    <button
-                        style={{ background: !this.sourceAnchor?.followLinkZoomText ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoomText', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Toggle Follow to Outer Context</p>
-                    <button
-                        style={{ background: !this.sourceAnchor?.followLinkToOuterContext ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToOuterContext', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faWindowMaximize as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Toggle Target (Show/Hide)</p>
-                    <button
-                        style={{ background: !this.sourceAnchor?.followLinkToggle ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToggle', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Ease Transitions</p>
-                    <button
-                        style={{ background: this.sourceAnchor?.followLinkEase === 'linear' ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkEase', this.sourceAnchor, 'ease', 'linear')}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Capture Offset to Target</p>
-                    <button
-                        style={{ background: this.sourceAnchor?.followLinkXoffset === undefined ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => {
-                            this.toggleAnchorProp(e, 'followLinkXoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.x) - NumCast(this.sourceAnchor?.x), undefined);
-                            this.toggleAnchorProp(e, 'followLinkYoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.y) - NumCast(this.sourceAnchor?.y), undefined);
-                        }}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline">
-                    <p>Center Target (no zoom)</p>
-                    <button
-                        style={{ background: this.sourceAnchor?.followLinkZoom ? '' : '#4476f7', borderRadius: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
-                    </button>
-                </div>
-                <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}>
-                    <p>Zoom %</p>
-                    <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
-                        <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} />
-                        <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
-                            <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
-                                <FontAwesomeIcon icon={'caret-up'} />
+                {!hasSelectedAnchor ? null : (
+                    <div className="propertiesView-section">
+                        <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 84px)' }}>
+                            <p>Follow by</p>
+                            <select onChange={e => this.changeFollowBehavior(e.currentTarget.value === 'Default' ? undefined : e.currentTarget.value)} value={Cast(this.sourceAnchor?.followLinkLocation, 'string', null)}>
+                                <option value={undefined}>Default</option>
+                                <option value={OpenWhere.addLeft}>Opening in new left pane</option>
+                                <option value={OpenWhere.addRight}>Opening in new right pane</option>
+                                <option value={OpenWhere.replaceLeft}>Replacing left tab</option>
+                                <option value={OpenWhere.replaceRight}>Replacing right tab</option>
+                                <option value={OpenWhere.lightbox}>Opening in lightbox</option>
+                                <option value={OpenWhere.add}>Opening in new tab</option>
+                                <option value={OpenWhere.replace}>Replacing current tab</option>
+                                <option value={OpenWhere.inParent}>Opening in same collection</option>
+                                {LinkManager.currentLink?.linksToAnnotation ? <option value="openExternal">Open in external page</option> : null}
+                            </select>
+                        </div>
+                        <div className="propertiesView-input inline first" style={{ display: 'grid', gridTemplateColumns: '84px calc(100% - 134px) 50px' }}>
+                            <p>Animation</p>
+                            <select style={{ width: '100%', gridColumn: 2 }} onChange={e => this.changeAnimationBehavior(e.currentTarget.value)} value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
+                                <option value="default">Default</option>
+                                {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
+                                    <option key={effect.toString()} value={effect.toString()}>
+                                        {effect.toString()}
+                                    </option>
+                                ))}
+                            </select>
+                            <div className="effectDirection" style={{ marginLeft: '10px', display: 'grid', width: 40, height: 36, gridColumn: 3, gridTemplateRows: '12px 12px 12px' }}>
+                                {this.animationDirection(PresEffectDirection.Left, 'angle-right', 1, 2, {})}
+                                {this.animationDirection(PresEffectDirection.Right, 'angle-left', 3, 2, {})}
+                                {this.animationDirection(PresEffectDirection.Top, 'angle-down', 2, 1, {})}
+                                {this.animationDirection(PresEffectDirection.Bottom, 'angle-up', 2, 3, {})}
+                                {this.animationDirection(PresEffectDirection.Center, '', 2, 2, { width: 10, height: 10, alignSelf: 'center' })}
                             </div>
-                            <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
-                                <FontAwesomeIcon icon={'caret-down'} />
+                        </div>
+                        {PresBox.inputter(
+                            '0.1',
+                            '0.1',
+                            '10',
+                            NumCast(this.sourceAnchor?.followLinkTransitionTime) / 1000,
+                            true,
+                            (val: string) => PresBox.SetTransitionTime(val, (timeInMS: number) => this.sourceAnchor && (this.sourceAnchor.followLinkTransitionTime = timeInMS)),
+                            indent
+                        )}{' '}
+                        <div
+                            className={'slider-headers'}
+                            style={{
+                                display: 'grid',
+                                justifyContent: 'space-between',
+                                width: `calc(100% - ${indent * 2}px)`,
+                                marginLeft: indent,
+                                marginRight: indent,
+                                gridTemplateColumns: 'auto auto',
+                                borderTop: 'solid',
+                            }}>
+                            <div className="slider-text">Fast</div>
+                            <div className="slider-text">Slow</div>
+                        </div>{' '}
+                        <div className="propertiesView-input inline">
+                            <p>Play Target Audio</p>
+                            <button
+                                style={{ background: !this.sourceAnchor?.followLinkAudio ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkAudio', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Zoom Text Selections</p>
+                            <button
+                                style={{ background: !this.sourceAnchor?.followLinkZoomText ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoomText', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Toggle Follow to Outer Context</p>
+                            <button
+                                style={{ background: !this.sourceAnchor?.followLinkToOuterContext ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToOuterContext', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faWindowMaximize as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Toggle Target (Show/Hide)</p>
+                            <button
+                                style={{ background: !this.sourceAnchor?.followLinkToggle ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkToggle', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Ease Transitions</p>
+                            <button
+                                style={{ background: this.sourceAnchor?.followLinkEase === 'linear' ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkEase', this.sourceAnchor, 'ease', 'linear')}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Capture Offset to Target</p>
+                            <button
+                                style={{ background: this.sourceAnchor?.followLinkXoffset === undefined ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => {
+                                    this.toggleAnchorProp(e, 'followLinkXoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.x) - NumCast(this.sourceAnchor?.x), undefined);
+                                    this.toggleAnchorProp(e, 'followLinkYoffset', this.sourceAnchor, NumCast(this.destinationAnchor?.y) - NumCast(this.sourceAnchor?.y), undefined);
+                                }}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline">
+                            <p>Center Target (no zoom)</p>
+                            <button
+                                style={{ background: this.sourceAnchor?.followLinkZoom ? '' : '#4476f7', borderRadius: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faAnchor as IconLookup} size="lg" />
+                            </button>
+                        </div>
+                        <div className="propertiesView-input inline" style={{ display: 'grid', gridTemplateColumns: '78px calc(100% - 108px) 50px' }}>
+                            <p>Zoom %</p>
+                            <div className="ribbon-property" style={{ display: !targZoom ? 'none' : 'inline-flex' }}>
+                                <input className="presBox-input" style={{ width: '100%' }} readOnly={true} type="number" value={zoom} />
+                                <div className="ribbon-propertyUpDown" style={{ display: 'flex', flexDirection: 'column' }}>
+                                    <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), 0.1))}>
+                                        <FontAwesomeIcon icon={'caret-up'} />
+                                    </div>
+                                    <div className="ribbon-propertyUpDownItem" onClick={undoBatch(() => this.setZoom(String(zoom), -0.1))}>
+                                        <FontAwesomeIcon icon={'caret-down'} />
+                                    </div>
+                                </div>
                             </div>
+                            <button
+                                style={{ background: !targZoom || this.sourceAnchor?.followLinkZoomScale === 0 ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }}
+                                onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
+                                onClick={e => e.stopPropagation()}
+                                className="propertiesButton">
+                                <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
+                            </button>
                         </div>
+                        {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)}
+                        <div
+                            className={'slider-headers'}
+                            style={{
+                                display: !targZoom ? 'none' : 'grid',
+                                justifyContent: 'space-between',
+                                width: `calc(100% - ${indent * 2}px)`,
+                                marginLeft: indent,
+                                marginRight: indent,
+                                gridTemplateColumns: 'auto auto',
+                                borderTop: 'solid',
+                            }}>
+                            <div className="slider-text">0%</div>
+                            <div className="slider-text">100%</div>
+                        </div>{' '}
                     </div>
-                    <button
-                        style={{ background: !targZoom || this.sourceAnchor?.followLinkZoomScale === 0 ? '' : '#4476f7', borderRadius: 3, gridColumn: 3 }}
-                        onPointerDown={e => this.toggleAnchorProp(e, 'followLinkZoom', this.sourceAnchor)}
-                        onClick={e => e.stopPropagation()}
-                        className="propertiesButton">
-                        <FontAwesomeIcon className="fa-icon" icon={faArrowRight as IconLookup} size="lg" />
-                    </button>
-                </div>
-                {!targZoom ? null : PresBox.inputter('0', '1', '100', zoom, true, this.setZoom, 30)}
-                <div
-                    className={'slider-headers'}
-                    style={{
-                        display: !targZoom ? 'none' : 'grid',
-                        justifyContent: 'space-between',
-                        width: `calc(100% - ${indent * 2}px)`,
-                        marginLeft: indent,
-                        marginRight: indent,
-                        gridTemplateColumns: 'auto auto',
-                        borderTop: 'solid',
-                    }}>
-                    <div className="slider-text">0%</div>
-                    <div className="slider-text">100%</div>
-                </div>{' '}
-            </div>
-        )}
-    </>
+                )}
+            </>
+        );
     }
 
     /**
@@ -1723,23 +1659,20 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             width: this.props.width,
                             minWidth: this.props.width,
                         }}>
-                        <div className = "propertiesView-propAndInfoGrouping">
+                        <div className="propertiesView-propAndInfoGrouping">
                             <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/')}>
-                                 <GrCircleInformation/> </div>
-
+                            <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/')}>
+                                <GrCircleInformation />{' '}
+                            </div>
                         </div>
 
-                        
                         <div className="propertiesView-name">{this.editableTitle}</div>
-                        <div className = "propertiesView-type"> {this.currentType} </div>
+                        <div className="propertiesView-type"> {this.currentType} </div>
                         {this.contextsSubMenu}
                         {this.linksSubMenu}
-                        {!this.selectedDoc || !LinkManager.currentLink || (!hasSelectedAnchor && this.selectedDoc !== LinkManager.currentLink) ? null : (
-                            this.linkProperties
-                        )}
+                        {!this.selectedDoc || !LinkManager.currentLink || (!hasSelectedAnchor && this.selectedDoc !== LinkManager.currentLink) ? null : this.linkProperties}
                         {this.inkSubMenu}
                         {this.optionsSubMenu}
                         {this.fieldsSubMenu}
@@ -1760,7 +1693,6 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             Presentation
                         </div>
                         <div className="propertiesView-name" style={{ borderBottom: 0 }}>
-                         
                             {this.editableTitle}
                             <div className="propertiesView-presSelected">
                                 <div className="propertiesView-selectedCount">{PresBox.Instance.selectedArray.size} selected</div>
@@ -1772,7 +1704,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Transitions
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg"  />
+                                        <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
                                 {this.openPresTransitions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.transitionDropdown}</div> : null}
@@ -1786,7 +1718,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibilty
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg"  />
+                                        <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
                                 {this.openPresVisibilityAndDuration ? <div className="propertiesView-presTrails-content">{PresBox.Instance.visibiltyDurationDropdown}</div> : null}
@@ -1797,7 +1729,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))} style={{ backgroundColor: this.openPresTransitions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg"  />
+                                        <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
                                 {this.openPresProgressivize ? <div className="propertiesView-presTrails-content">{PresBox.Instance.progressivizeDropdown}</div> : null}
@@ -1808,7 +1740,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                 <div className="propertiesView-presTrails-title" onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))} style={{ backgroundColor: this.openSlideOptions ? 'black' : '' }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> &nbsp; {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
                                     <div className="propertiesView-presTrails-title-icon">
-                                        <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg"  />
+                                        <FontAwesomeIcon icon={this.openSlideOptions ? 'caret-down' : 'caret-right'} size="lg" />
                                     </div>
                                 </div>
                                 {this.openSlideOptions ? <div className="propertiesView-presTrails-content">{PresBox.Instance.mediaOptionsDropdown}</div> : null}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index bbbad3690..94748e884 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -22,7 +22,7 @@ import { DocumentViewProps } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { SliderBox } from './nodes/SliderBox';
-import { BsArrowDown, BsArrowUp, BsArrowDownUp } from 'react-icons/bs'
+import { BsArrowDown, BsArrowUp, BsArrowDownUp } from 'react-icons/bs';
 import './StyleProvider.scss';
 import React = require('react');
 
@@ -161,7 +161,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ''
             );
         case StyleProp.Color:
-            if (MainView.Instance.LastButton === doc) return Doc.UserDoc().userBackgroundColor;
+            if (MainView.Instance.LastButton === doc) return SettingsManager.Instance.userBackgroundColor;
             if (Doc.IsSystem(doc!)) return StrCast(Doc.UserDoc().userColor)
             if (doc?.type === DocumentType.FONTICON) return Doc.UserDoc().userColor;
             const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
@@ -208,12 +208,10 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 case DocumentType.PRES:        docColor = docColor || (darkScheme() ? 'transparent' : 'transparent'); break;
                 case DocumentType.FONTICON:    docColor = boxBackground ? undefined : docColor || Colors.DARK_GRAY; break;
                 case DocumentType.RTF:         docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
-                case DocumentType.FILTER:      docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : 'rgba(105, 105, 105, 0.432)'); break;
                 case DocumentType.INK:         docColor = doc?.stroke_isInkMask ? 'rgba(0,0,0,0.7)' : undefined; break;
                 case DocumentType.EQUATION:    docColor = docColor || 'transparent'; break;
                 case DocumentType.LABEL:       docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
                 case DocumentType.BUTTON:      docColor = docColor || (darkScheme() ? Colors.DARK_GRAY : Colors.LIGHT_GRAY); break;
-                case DocumentType.LINKANCHOR:  docColor = isAnchor ? Colors.LIGHT_BLUE : 'transparent'; break;
                 case DocumentType.LINK:        docColor = (isAnchor ? docColor : '') || 'transparent'; break;
                 case DocumentType.IMG:
                 case DocumentType.WEB:
@@ -224,7 +222,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 case DocumentType.COL:
                     if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
                     docColor = docColor || (Doc.IsSystem(doc)
-                            ? StrCast(Doc.UserDoc().userBackgroundColor)
+                            ? SettingsManager.Instance.userBackgroundColor
                             : doc.annotationOn
                             ? '#00000010' // faint interior for collections on PDFs, images, etc
                             : doc?._isGroup
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index caf04cc1b..a551e5332 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -7,6 +7,7 @@ import { StrCast } from '../../fields/Types';
 import { Doc } from '../../fields/Doc';
 import { Popup, Type, isDark } from 'browndash-components';
 import { Colors } from './global/globalEnums';
+import { SettingsManager } from '../util/SettingsManager';
 
 interface UndoStackProps {
     width?: number;
@@ -18,35 +19,37 @@ export class UndoStack extends React.Component<UndoStackProps> {
     @observable static HideInline: boolean;
     @observable static Expand: boolean;
     render() {
-        const background = UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userBackgroundColor)
+        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.Instance.userBackgroundColor;
         return this.props.inline && UndoStack.HideInline ? null : (
             <div className="undoStack-outerContainer">
-                <Popup 
+                <Popup
                     text={'Undo/Redo Stack'}
                     color={UndoManager.batchCounter.get() ? 'yellow' : StrCast(Doc.UserDoc().userVariantColor)}
                     placement={`top-start`}
                     type={Type.TERT}
                     popup={
-                    <div className="undoStack-commandsContainer" ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })} 
-                        style={{ 
-                            background: background,
-                            color: isDark(background) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY
-                        }}>
-                        {UndoManager.undoStackNames.map((name, i) => (
-                            <div className="undoStack-resultContainer" key={i}>
-                                <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
-                            </div>
-                        ))}
-                        {Array.from(UndoManager.redoStackNames)
-                            .reverse()
-                            .map((name, i) => (
+                        <div
+                            className="undoStack-commandsContainer"
+                            ref={r => r?.scroll({ behavior: 'auto', top: r?.scrollHeight + 20 })}
+                            style={{
+                                background: background,
+                                color: isDark(background) ? Colors.LIGHT_GRAY : Colors.DARK_GRAY,
+                            }}>
+                            {UndoManager.undoStackNames.map((name, i) => (
                                 <div className="undoStack-resultContainer" key={i}>
-                                    <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
-                                        {name.replace(/[^\.]*\./, '')}
-                                    </div>
+                                    <div className="undoStack-commandString">{name.replace(/[^\.]*\./, '')}</div>
                                 </div>
-                        ))}
-                    </div>    
+                            ))}
+                            {Array.from(UndoManager.redoStackNames)
+                                .reverse()
+                                .map((name, i) => (
+                                    <div className="undoStack-resultContainer" key={i}>
+                                        <div className="undoStack-commandString" style={{ fontWeight: 'bold', color: 'red' }}>
+                                            {name.replace(/[^\.]*\./, '')}
+                                        </div>
+                                    </div>
+                                ))}
+                        </div>
                     }
                 />
             </div>
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 16982595d..0052c4196 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -164,7 +164,7 @@ export class CollectionDockingView extends CollectionSubView() {
     public static AddSplit(document: Doc, pullSide: OpenWhereMod, stack?: any, panelName?: string, keyValue?: boolean) {
         if (document?._type_collection === CollectionViewType.Docking && !keyValue) return DashboardView.openDashboard(document);
         if (!CollectionDockingView.Instance) return false;
-        const tab = Array.from(CollectionDockingView.Instance.tabMap).find(tab => tab.DashDoc === document && !keyValue);
+        const tab = Array.from(CollectionDockingView.Instance.tabMap).find(tab => tab.DashDoc === document && !tab.contentItem.config.props.keyValue && !keyValue);
         if (tab) {
             tab.header.parent.setActiveContentItem(tab.contentItem);
             return true;
@@ -466,7 +466,10 @@ export class CollectionDockingView extends CollectionSubView() {
         this._flush = this._flush ?? UndoManager.StartBatch('tab movement');
         if (tab.DashDoc && ![DocumentType.PRES].includes(tab.DashDoc?.type) && !tab.contentItem.config.props.keyValue) {
             Doc.AddDocToList(Doc.MyHeaderBar, 'data', tab.DashDoc);
-            Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true);
+            // if you close a tab that is not embedded somewhere else (an embedded Doc can be opened simultaneously in a tab), then add the tab to recently closed
+            if (tab.DashDoc.embedContainer === this.rootDoc) tab.DashDoc.embedContainer = undefined;
+            if (!tab.DashDoc.embedContainer) Doc.AddDocToList(Doc.MyRecentlyClosed, 'data', tab.DashDoc, undefined, true, true);
+            Doc.RemoveDocFromList(Doc.GetProto(tab.DashDoc), 'proto_embeddings', tab.DashDoc);
         }
         if (CollectionDockingView.Instance) {
             const dview = CollectionDockingView.Instance.props.Document;
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 5135cfb57..f65e8698f 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -181,7 +181,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
             <div
                 className="collectionMenu-container"
                 style={{
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    background: SettingsManager.Instance.userBackgroundColor,
                     // borderColor: StrCast(Doc.UserDoc().userColor)
                 }}>
                 {this.contMenuButtons}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a5c276125..056204ad3 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -669,7 +669,6 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
         if (menuDoc) {
             const width: number = NumCast(menuDoc._width, 30);
             const height: number = NumCast(menuDoc._height, 30);
-            console.log(menuDoc.title, width, height);
             return (
                 <div className="buttonMenu-docBtn" style={{ width: width, height: height }}>
                     <DocumentView
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 00137736d..ea3b5065f 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -150,6 +150,7 @@ export class CollectionTreeView extends CollectionSubView<Partial<collectionTree
                 console.log('WHAAAT');
             }
             dragData.dropAction = dropAction && !isAlreadyInTree() ? dropAction : sameTree ? 'same' : dragData.dropAction;
+            e.stopPropagation();
         }
     };
 
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 67b7b39dd..d787f5262 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -396,7 +396,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
         return NumCast(Cast(PresBox.Instance.activeItem.presentationTargetDoc, Doc, null)._currentFrame);
     };
     static Activate = (tabDoc: Doc) => {
-        const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(tab => tab.DashDoc === tabDoc);
+        const tab = Array.from(CollectionDockingView.Instance?.tabMap!).find(tab => tab.DashDoc === tabDoc && !tab.contentItem.config.props.keyValue);
         tab?.header.parent.setActiveContentItem(tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
         return tab !== undefined;
     };
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index fb23fc7f1..6e0ccd4be 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -127,7 +127,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             : this.props.treeView.fileSysMode
             ? this.doc.isFolder
                 ? this.fieldKey
-                : 'embeddings' // for displaying
+                : 'data' // file system folders display their contents (data).  used to be they displayed their embeddings but now its a tree structure and not a flat list
             : this.props.treeView.outlineMode || this.childDocs
             ? this.fieldKey
             : Doc.noviceMode
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 090cf356c..7c53bfdbe 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -377,7 +377,6 @@ export class MarqueeView extends React.Component<SubCollectionViewProps & Marque
             : ((doc: Doc) => {
                   Doc.GetProto(doc).data = new List<Doc>(selected);
                   Doc.GetProto(doc).title = makeGroup ? 'grouping' : 'nested freeform';
-                  !this.props.isAnnotationOverlay && Doc.AddFileOrphan(Doc.GetProto(doc));
                   doc._freeform_panX = doc._freeform_panY = 0;
                   return doc;
               })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true));
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 79842047b..256377758 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -197,7 +197,6 @@ ScriptingGlobals.add(function toggleCharStyle(charStyle: attrname, checkResult?:
 });
 
 export function checkInksToGroup() {
-    // console.log("getting here to inks group");
     if (Doc.ActiveTool === InkTool.Write) {
         CollectionFreeFormView.collectionsWithUnprocessedInk.forEach(ffView => {
             // TODO: nda - will probably want to go through ffView unprocessed docs and then see if any of the inksToGroup docs are in it and only use those
diff --git a/src/client/views/newlightbox/ExploreView/ExploreView.tsx b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
index 44a0bcd5f..a1d6375c4 100644
--- a/src/client/views/newlightbox/ExploreView/ExploreView.tsx
+++ b/src/client/views/newlightbox/ExploreView/ExploreView.tsx
@@ -12,14 +12,11 @@ export const ExploreView = (props: IExploreView) => {
         <div className={`exploreView-container`}>
             {recs &&
                 recs.map(rec => {
-                    console.log(rec.embedding, bounds);
                     const x_bound: number = Math.max(Math.abs(bounds.max_x), Math.abs(bounds.min_x));
                     const y_bound: number = Math.max(Math.abs(bounds.max_y), Math.abs(bounds.min_y));
-                    console.log(x_bound, y_bound);
                     if (rec.embedding) {
                         const x = (rec.embedding.x / x_bound) * 50;
                         const y = (rec.embedding.y / y_bound) * 50;
-                        console.log(x, y);
                         return (
                             <div className={`exploreView-doc`} onClick={() => {}} style={{ top: `calc(50% + ${y}%)`, left: `calc(50% + ${x}%)` }}>
                                 {rec.title}
diff --git a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
index b9d05c531..2c2f04b9f 100644
--- a/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
+++ b/src/client/views/newlightbox/components/Recommendation/Recommendation.tsx
@@ -22,7 +22,6 @@ export const Recommendation = (props: IRecommendation) => {
                         doc = docView.rootDoc;
                     }
                 } else if (data) {
-                    console.log(data, type);
                     switch (type) {
                         case 'YouTube':
                             console.log('create ', type, 'document');
diff --git a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
index e1ff6f8eb..10bfb0c64 100644
--- a/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
+++ b/src/client/views/nodes/DataVizBox/utils/D3Utils.ts
@@ -34,7 +34,6 @@ export const createLineGenerator = (xScale: d3.ScaleLinear<number, number, never
 };
 
 export const xAxisCreator = (g: d3.Selection<SVGGElement, unknown, null, undefined>, height: number, xScale: d3.ScaleLinear<number, number, never>) => {
-    console.log('x axis creator being called');
     g.attr('class', 'x-axis').attr('transform', `translate(0,${height})`).call(d3.axisBottom(xScale).tickSize(15));
 };
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 70d2f95ea..d379b2b52 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1,5 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { action, computed, IReactionDisposer, observable, reaction, runInAction, trace } from 'mobx';
+import { action, computed, IReactionDisposer, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
 import { Bounce, Fade, Flip, LightSpeed, Roll, Rotate, Zoom } from 'react-reveal';
@@ -47,7 +47,6 @@ import { DocumentLinksButton } from './DocumentLinksButton';
 import './DocumentView.scss';
 import { FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
-import { KeyValueBox } from './KeyValueBox';
 import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 86191de63..d69009415 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -4,7 +4,7 @@ import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import wiki from 'wikijs';
 import { Doc, DocCastAsync, Opt } from '../../../fields/Doc';
-import { Height, Width } from '../../../fields/DocSymbols';
+import { DirectLinks, Height, Width } from '../../../fields/DocSymbols';
 import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils';
 import { DocServer } from '../../DocServer';
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index de0b57fd7..4919ee94c 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -61,7 +61,6 @@ const script = document.createElement('script');
 script.defer = true;
 script.async = true;
 script.src = `https://maps.googleapis.com/maps/api/js?key=${apiKey}&libraries=places,drawing`;
-console.log(script.src);
 document.head.appendChild(script);
 
 /**
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 312b3c619..bbf56bdf9 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -224,7 +224,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             const aud_chunks: any = [];
             this._audioRec.ondataavailable = (e: any) => aud_chunks.push(e.data);
             this._audioRec.onstop = async (e: any) => {
-                const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({file})));
+                const [{ result }] = await Networking.UploadFilesToServer(aud_chunks.map((file: any) => ({ file })));
                 if (!(result instanceof Error)) {
                     this.dataDoc[this.props.fieldKey + '-audio'] = new AudioField(result.accessPaths.agnostic.client);
                 }
@@ -235,9 +235,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
             this._videoRec.onstart = () => (this.dataDoc[this.props.fieldKey + '-recordingStart'] = new DateField(new Date()));
             this._videoRec.ondataavailable = (e: any) => vid_chunks.push(e.data);
             this._videoRec.onstop = async (e: any) => {
-                console.log('screenshotbox: upload');
                 const file = new File(vid_chunks, `${this.rootDoc[Id]}.mkv`, { type: vid_chunks[0].type, lastModified: Date.now() });
-                const [{ result }] = await Networking.UploadFilesToServer({file});
+                const [{ result }] = await Networking.UploadFilesToServer({ file });
                 this.dataDoc[this.fieldKey + '_duration'] = (new Date().getTime() - this.recordingStart!) / 1000;
                 if (!(result instanceof Error)) {
                     // convert this screenshotBox into normal videoBox
diff --git a/src/client/views/nodes/ScriptingBox.tsx b/src/client/views/nodes/ScriptingBox.tsx
index 3ad3c911d..7c8a1849e 100644
--- a/src/client/views/nodes/ScriptingBox.tsx
+++ b/src/client/views/nodes/ScriptingBox.tsx
@@ -610,7 +610,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
                         ' ': {
                             dataProvider: (token: any) => this.handleToken(token),
                             component: (blob: any) => {
-                                console.log('Blob', blob);
                                 return this.renderFuncListElement(blob.entity);
                             },
                             output: (item: any, trigger: any) => {
@@ -621,7 +620,6 @@ export class ScriptingBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatable
                         '.': {
                             dataProvider: (token: any) => this.handleToken(token),
                             component: (blob: any) => {
-                                console.log('Blob', blob);
                                 return this.renderFuncListElement(blob.entity);
                             },
                             output: (item: any, trigger: any) => {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 895bb80f0..1dcc445e8 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -96,6 +96,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     private _scrollRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _editorView: Opt<EditorView>;
     public _applyingChange: string = '';
+    private _finishingLink = false;
     private _searchIndex = 0;
     private _lastTimedMark: Mark | undefined = undefined;
     private _cachedLinks: Doc[] = [];
@@ -245,7 +246,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         if (!pinProps && this._editorView?.state.selection.empty) return this.rootDoc;
         const anchor = Docs.Create.ConfigDocument({ title: StrCast(this.rootDoc.title), annotationOn: this.rootDoc });
         this.addDocument(anchor);
+        this._finishingLink = true;
         this.makeLinkAnchor(anchor, OpenWhere.addRight, undefined, 'Anchored Selection', false, addAsAnnotation);
+        this._finishingLink = false;
         PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), scrollable: true } }, this.rootDoc);
         return anchor;
     };
@@ -326,7 +329,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                     textChange && (dataDoc[this.fieldKey + '_modificationDate'] = new DateField(new Date(Date.now())));
                     if ((!prevData && !protoData) || newText || (!newText && !templateData)) {
                         // if no template, or there's text that didn't come from the layout template, write it to the document. (if this is driven by a template, then this overwrites the template text which is intended)
-                        if (this.props.isContentActive() && removeSelection(newJson) !== removeSelection(prevData?.Data)) {
+                        if ((this._finishingLink || this.props.isContentActive()) && removeSelection(newJson) !== removeSelection(prevData?.Data)) {
                             const numstring = NumCast(dataDoc[this.fieldKey], null);
                             dataDoc[this.fieldKey] = numstring !== undefined ? Number(newText) : new RichTextField(newJson, newText);
                             dataDoc[this.fieldKey + '_noTemplate'] = true; // mark the data field as being split from the template if it has been edited
@@ -457,8 +460,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         if (node.firstChild === null && !node.marks.find((m: Mark) => m.type.name === schema.marks.noAutoLinkAnchor.name) && node.marks.find((m: Mark) => m.type.name === schema.marks.splitter.name)) {
                             alink =
                                 alink ??
-                                (LinkManager.Links(this.Document).find(link => Doc.AreProtosEqual(Cast(link.link_anchor_1, Doc, null), this.rootDoc) && Doc.AreProtosEqual(Cast(link.link_anchor_2, Doc, null), target)) ||
-                                    DocUtils.MakeLink(this.props.Document, target, { link_relationship: LinkManager.AutoKeywords })!);
+                                (LinkManager.Links(this.rootDoc).find(
+                                    link =>
+                                        Doc.AreProtosEqual(Cast(link.link_anchor_1, Doc, null), this.rootDoc) && //
+                                        Doc.AreProtosEqual(Cast(link.link_anchor_2, Doc, null), target)
+                                ) ||
+                                    DocUtils.MakeLink(this.rootDoc, target, { link_relationship: LinkManager.AutoKeywords })!);
                             newAutoLinks.add(alink);
                             const allAnchors = [{ href: Doc.localServerPath(target), title: 'a link', anchorId: this.props.Document[Id] }];
                             allAnchors.push(...(node.marks.find((m: Mark) => m.type.name === schema.marks.autoLinkAnchor.name)?.attrs.allAnchors ?? []));
@@ -840,7 +847,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
         const appearance = cm.findByDescription('Appearance...');
         const appearanceItems = appearance && 'subitems' in appearance ? appearance.subitems : [];
-        appearanceItems.push({ description: 'Change Perspective...', noexpand: true, subitems: changeItems, icon: 'external-link-alt' });
+        appearanceItems.push({ description: 'Change Style...', noexpand: true, subitems: changeItems, icon: 'external-link-alt' });
         // this.rootDoc.isTemplateDoc && appearanceItems.push({ description: "Make Default Layout", event: async () => Doc.UserDoc().defaultTextLayout = new PrefetchProxy(this.rootDoc), icon: "eye" });
 
         !Doc.noviceMode &&
@@ -1996,12 +2003,12 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     cycleAlternateText = () => {
         if (this.layoutDoc._layout_enableAltContentUI) {
-            const usePath = this.rootDoc[`${this.props.fieldKey}_usePath`];
+            const usePath = this.rootDoc[`_${this.props.fieldKey}_usePath`];
             this.rootDoc[`_${this.props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : usePath === 'alternate' ? 'alternate:hover' : undefined;
         }
     };
     @computed get overlayAlternateIcon() {
-        const usePath = this.rootDoc[`${this.props.fieldKey}_usePath`];
+        const usePath = this.rootDoc[`_${this.props.fieldKey}_usePath`];
         return (
             <Tooltip
                 title={
@@ -2080,7 +2087,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         ? {}
                         : {
                               transform: `scale(${scale})`,
-                              transformOrigin: 'top left',
                               width: `${100 / scale}%`,
                               height: `${100 / scale}%`,
                           }),
diff --git a/src/client/views/nodes/formattedText/RichTextRules.ts b/src/client/views/nodes/formattedText/RichTextRules.ts
index ac1e7ce5d..8bafc2cef 100644
--- a/src/client/views/nodes/formattedText/RichTextRules.ts
+++ b/src/client/views/nodes/formattedText/RichTextRules.ts
@@ -243,13 +243,13 @@ export class RichTextRules {
 
             // create a text display of a metadata field on this or another document, or create a hyperlink portal to another document
             // [[<fieldKey> : <Doc>]]
-            // [[:Doc]] => hyperlink
+            // [[:docTitle]] => hyperlink
             // [[fieldKey]] => show field
             // [[fieldKey=value]] => show field and also set its value
-            // [[fieldKey:Doc]] => show field of doc
+            // [[fieldKey:docTitle]] => show field of doc
             new InputRule(new RegExp(/\[\[([a-zA-Z_\? \-0-9]*)(=[a-zA-Z_@\? /\-0-9]*)?(:[a-zA-Z_@:\.\? \-0-9]+)?\]\]$/), (state, match, start, end) => {
                 const fieldKey = match[1];
-                const docId = match[3]?.replace(':', '');
+                const docTitle = match[3]?.replace(':', '');
                 const value = match[2]?.substring(1);
                 const linkToDoc = (target: Doc) => {
                     const rstate = this.TextBox.EditorView?.state;
@@ -266,12 +266,12 @@ export class RichTextRules {
                     }
                 };
                 if (!fieldKey) {
-                    if (docId) {
-                        const target = DocServer.QUERY_SERVER_CACHE(docId);
-                        if (target) setTimeout(() => linkToDoc(target));
-                        else DocServer.GetRefField(docId).then(docx => linkToDoc((docx instanceof Doc && docx) || Docs.Create.FreeformDocument([], { title: docId + '(auto)', _width: 500, _height: 500 }, docId)));
-
-                        return state.tr.deleteRange(end - 1, end).deleteRange(start, start + 3);
+                    if (docTitle) {
+                        const target = DocServer.FindDocByTitle(docTitle);
+                        if (target) {
+                            setTimeout(() => linkToDoc(target));
+                            return state.tr.deleteRange(end - 1, end).deleteRange(start, start + 3);
+                        }
                     }
                     return state.tr;
                 }
@@ -279,8 +279,12 @@ export class RichTextRules {
                     const num = value.match(/^[0-9.]$/);
                     this.Document[DocData][fieldKey] = value === 'true' ? true : value === 'false' ? false : num ? Number(value) : value;
                 }
-                const fieldView = state.schema.nodes.dashField.create({ fieldKey, docId, hideKey: false });
-                return state.tr.setSelection(new TextSelection(state.doc.resolve(start), state.doc.resolve(end))).replaceSelectionWith(fieldView, true);
+                const target = DocServer.FindDocByTitle(docTitle);
+                if (target) {
+                    const fieldView = state.schema.nodes.dashField.create({ fieldKey, docId: target[Id], hideKey: false });
+                    return state.tr.setSelection(new TextSelection(state.doc.resolve(start), state.doc.resolve(end))).replaceSelectionWith(fieldView, true);
+                }
+                return state.tr;
             }),
 
             // create a text display of a metadata field on this or another document, or create a hyperlink portal to another document
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index b877cc36a..e35e011e2 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -17,6 +17,7 @@ import { EditorView } from 'prosemirror-view';
 import './AnchorMenu.scss';
 import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { StrCast } from '../../../fields/Types';
+import { DocumentType } from '../../documents/DocumentTypes';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
@@ -262,7 +263,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     colorPicker={this.highlightColor}
                     color={StrCast(Doc.UserDoc().userColor)}
                 />
-                <ColorPicker colorPickerType={'github'} selectedColor={this.highlightColor} setSelectedColor={color => this.changeHighlightColor(color)} size={Size.XSMALL} />
+                <ColorPicker selectedColor={this.highlightColor} setSelectedColor={this.changeHighlightColor} size={Size.XSMALL} />
             </Group>
         );
     }
@@ -287,7 +288,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
     canSummarize = (): boolean => {
         const docs = SelectionManager.Docs();
         if (docs.length > 0) {
-            return docs.some(doc => doc.type === 'pdf' || doc.type === 'web');
+            return docs.some(doc => doc.type === DocumentType.PDF || doc.type === DocumentType.WEB);
         }
         return false;
     };
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index e911bd283..a28561107 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -18,6 +18,7 @@ import './SearchBox.scss';
 import { fetchRecommendations } from '../newlightbox/utils';
 import { IRecommendation, Recommendation } from '../newlightbox/components';
 import { Colors } from '../global/globalEnums';
+import { SettingsManager } from '../../util/SettingsManager';
 
 const DAMPENING_FACTOR = 0.9;
 const MAX_ITERATIONS = 25;
@@ -218,7 +219,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     }
     @action
     static staticSearchCollection(rootDoc: Opt<Doc>, query: string) {
-        const blockedTypes = [DocumentType.PRESELEMENT, DocumentType.CONFIG, DocumentType.KVP, DocumentType.FILTER, DocumentType.SEARCH, DocumentType.SEARCHITEM, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
+        const blockedTypes = [DocumentType.PRESELEMENT, DocumentType.CONFIG, DocumentType.KVP, DocumentType.SEARCH, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
         const blockedKeys = [
             'x',
             'y',
@@ -398,22 +399,21 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
 
         if (query) {
             this.searchCollection(query);
-            const response = await fetchRecommendations('', query, [], true)
-            const recs = response.recommendations
-            const recommendations:IRecommendation[] = []
+            const response = await fetchRecommendations('', query, [], true);
+            const recs = response.recommendations;
+            const recommendations: IRecommendation[] = [];
             for (const key in recs) {
                 const title = recs[key].title;
-                console.log(title);
-                const url = recs[key].url
-                const type = recs[key].type
-                const text = recs[key].text
-                const transcript = recs[key].transcript
-                const previewUrl = recs[key].previewUrl
-                const embedding = recs[key].embedding
-                const distance = recs[key].distance
-                const source = recs[key].source
-                const related_concepts = recs[key].related_concepts
-                const docId = recs[key].doc_id
+                const url = recs[key].url;
+                const type = recs[key].type;
+                const text = recs[key].text;
+                const transcript = recs[key].transcript;
+                const previewUrl = recs[key].previewUrl;
+                const embedding = recs[key].embedding;
+                const distance = recs[key].distance;
+                const source = recs[key].source;
+                const related_concepts = recs[key].related_concepts;
+                const docId = recs[key].doc_id;
                 recommendations.push({
                     title: title,
                     data: url,
@@ -425,11 +425,11 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                     distance: Math.round(distance * 100) / 100,
                     source: source,
                     related_concepts: related_concepts,
-                    docId: docId
-                })
+                    docId: docId,
+                });
             }
-            const setRecommendations = action(() => this._recommendations = recommendations)
-            setRecommendations()
+            const setRecommendations = action(() => (this._recommendations = recommendations));
+            setRecommendations();
         }
     };
 
@@ -461,7 +461,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      */
     @computed
     public get selectOptions() {
-        const selectValues = ['all', 'rtf', 'image', 'pdf', 'web', 'video', 'audio', 'collection'];
+        const selectValues = ['all', DocumentType.RTF, DocumentType.IMG, DocumentType.PDF, DocumentType.WEB, DocumentType.VID, DocumentType.AUDIO, DocumentType.COL];
 
         return selectValues.map(value => (
             <option key={value} value={value}>
@@ -517,19 +517,19 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                             className={className}>
                             <div className="searchBox-result-title">{title as string}</div>
                             <div className="searchBox-result-type">{formattedType}</div>
-                            <div className="searchBox-result-keys">{result[1].join(', ')}</div>
+                            <div className="searchBox-result-keys" style={{ color: SettingsManager.Instance.userVariantColor }}>
+                                {result[1].join(', ')}
+                            </div>
                         </div>
                     </Tooltip>
                 );
             }
         });
 
-        const recommendationsJSX: JSX.Element[] = this._recommendations.map((props) => (
-            <Recommendation {...props}/>
-        ))
+        const recommendationsJSX: JSX.Element[] = this._recommendations.map(props => <Recommendation {...props} />);
 
         return (
-            <div className="searchBox-container" style={{pointerEvents: 'all', background: StrCast(Doc.UserDoc().userBackgroundColor)}}>
+            <div className="searchBox-container" style={{ pointerEvents: 'all', color: SettingsManager.Instance.userColor, background: SettingsManager.Instance.userBackgroundColor }}>
                 <div className="searchBox-bar">
                     {isLinkSearch ? null : (
                         <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
@@ -552,20 +552,24 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                         ref={this._inputRef}
                     />
                 </div>
-                {resultsJSX.length > 0 && <div className="searchBox-results-container">
-                    <div className="section-header" style={{background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}}>
-                        <div className="section-title">Results</div>
-                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                {resultsJSX.length > 0 && (
+                    <div className="searchBox-results-container">
+                        <div className="section-header" style={{ background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE) }}>
+                            <div className="section-title">Results</div>
+                            <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                        </div>
+                        <div className="searchBox-results-view">{resultsJSX}</div>
                     </div>
-                    <div className="searchBox-results-view">{resultsJSX}</div>
-                </div>}
-                {recommendationsJSX.length > 0 && <div className="searchBox-recommendations-container">
-                    <div className="section-header" style={{background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE)}}>
-                        <div className="section-title">Recommendations</div>
-                        <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                )}
+                {recommendationsJSX.length > 0 && (
+                    <div className="searchBox-recommendations-container">
+                        <div className="section-header" style={{ background: StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE) }}>
+                            <div className="section-title">Recommendations</div>
+                            <div className="section-subtitle">{`${validResults}` + ' result' + (validResults === 1 ? '' : 's')}</div>
+                        </div>
+                        <div className="searchBox-recommendations-view">{recommendationsJSX}</div>
                     </div>
-                    <div className="searchBox-recommendations-view">{recommendationsJSX}</div>
-                </div>}
+                )}
             </div>
         );
     }
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index cb8eda9de..8caba930d 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -35,10 +35,14 @@ export class TopBar extends React.Component {
         });
     };
 
-    @computed get color() { return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY); }
-    @computed get variantColor() { return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE); }
+    @computed get color() {
+        return StrCast(Doc.UserDoc().userColor, Colors.LIGHT_GRAY);
+    }
+    @computed get variantColor() {
+        return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE);
+    }
     @computed get backgroundColor() {
-        return PingManager.Instance.IsBeating ? StrCast(Doc.UserDoc().userBackgroundColor, Colors.DARK_GRAY) : Colors.MEDIUM_GRAY;
+        return PingManager.Instance.IsBeating ? SettingsManager.Instance.userBackgroundColor : Colors.MEDIUM_GRAY;
     }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
@@ -102,7 +106,7 @@ export class TopBar extends React.Component {
                     tooltip="Open Dashboards"
                     size={Size.SMALL}
                     color={this.color}
-                    style={{fontWeight: 700, fontSize: '1rem'}}
+                    style={{ fontWeight: 700, fontSize: '1rem' }}
                     onClick={(e: React.MouseEvent) => {
                         const dashView = Doc.ActiveDashboard && DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard);
                         ContextMenu.Instance.addItem({ description: 'Open Dashboard View', event: this.navigateToHome, icon: 'edit' });
@@ -134,7 +138,7 @@ export class TopBar extends React.Component {
     @computed get topbarRight() {
         return (
             <div className="topbar-right">
-                {Doc.ActiveDashboard ? 
+                {Doc.ActiveDashboard ? (
                     <Button
                         text={GetEffectiveAcl(Doc.ActiveDashboard) === AclAdmin ? 'Share' : 'View Original'}
                         type={Type.TERT}
@@ -143,15 +147,15 @@ export class TopBar extends React.Component {
                             SharingManager.Instance.open(undefined, Doc.ActiveDashboard);
                         }}
                     />
-                : null }
-                <IconButton tooltip={"Issue Reporter ⌘I"} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
-                <IconButton tooltip={"Documentation ⌘D"} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
-                <IconButton tooltip={"Settings ⌘⇧S"} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
+                ) : null}
+                <IconButton tooltip={'Issue Reporter ⌘I'} size={Size.SMALL} color={this.color} onClick={ReportManager.Instance.open} icon={<FaBug />} />
+                <IconButton tooltip={'Documentation ⌘D'} size={Size.SMALL} color={this.color} onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/', '_blank')} icon={<FontAwesomeIcon icon="question-circle" />} />
+                <IconButton tooltip={'Settings ⌘⇧S'} size={Size.SMALL} color={this.color} onClick={SettingsManager.Instance.open} icon={<FontAwesomeIcon icon="cog" />} />
                 <IconButton
                     size={Size.SMALL}
                     onClick={ServerStats.Instance.open}
                     type={Type.TERT}
-                    tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running'}
+                    tooltip={'Server is ' + (PingManager.Instance.IsBeating ? '' : 'NOT ') + 'running ' + SettingsManager.Version}
                     color={this.happyHeart ? Colors.LIGHT_BLUE : Colors.ERROR_RED}
                     icon={<FontAwesomeIcon icon={this.happyHeart ? 'heart' : 'heart-broken'} />}
                 />
@@ -163,12 +167,14 @@ export class TopBar extends React.Component {
     render() {
         return (
             //TODO:glr Add support for light / dark mode
-            <div style={{ 
-                pointerEvents: 'all',
-                color: this.color,
-                background: this.backgroundColor,
-                // borderColor: this.color
-            }} className="topbar-container">
+            <div
+                style={{
+                    pointerEvents: 'all',
+                    color: this.color,
+                    background: this.backgroundColor,
+                    // borderColor: this.color
+                }}
+                className="topbar-container">
                 <div className="topbar-inner-container">
                     {this.topbarLeft}
                     {this.topbarCenter}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 5a411a201..eb52cff88 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -238,22 +238,6 @@ export class Doc extends RefField {
     public static get MyFilesystem() {
         return DocCast(Doc.UserDoc().myFilesystem);
     }
-    public static get MyFileOrphans() {
-        return DocCast(Doc.UserDoc().myFileOrphans);
-    }
-    public static AddFileOrphan(doc: Doc) {
-        if (
-            doc &&
-            Doc.MyFileOrphans instanceof Doc &&
-            Doc.IsDataProto(doc) &&
-            !Doc.IsSystem(doc) &&
-            ![DocumentType.CONFIG, DocumentType.KVP, DocumentType.LINK, DocumentType.LINKANCHOR].includes(doc.type as any) &&
-            !doc.isFolder &&
-            !doc.annotationOn
-        ) {
-            Doc.AddDocToList(Doc.MyFileOrphans, undefined, doc);
-        }
-    }
     public static get MyTools() {
         return DocCast(Doc.UserDoc().myTools);
     }
@@ -388,7 +372,7 @@ export class Doc extends RefField {
             } else {
                 return Cast(layoutField, Doc, null);
             }
-            return Cast(self[renderFieldKey + '-layout[' + templateLayoutDoc[Id] + ']'], Doc, null) || templateLayoutDoc;
+            return Cast(self[renderFieldKey + '_layout[' + templateLayoutDoc[Id] + ']'], Doc, null) || templateLayoutDoc;
         }
         return undefined;
     }
@@ -701,7 +685,8 @@ export namespace Doc {
     }
 
     export function BestEmbedding(doc: Doc) {
-        const bestEmbedding = Doc.GetProto(doc) ? DocListCast(doc.proto_embeddings).find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail) : doc;
+        const bestEmbedding = Doc.GetProto(doc) ? [doc, ...DocListCast(doc.proto_embeddings)].find(doc => !doc.embedContainer && doc.author === Doc.CurrentUserEmail) : doc;
+        bestEmbedding && Doc.AddDocToList(Doc.GetProto(doc), 'protoEmbeddings', doc);
         return bestEmbedding ?? Doc.MakeEmbedding(doc);
     }
 
@@ -782,7 +767,6 @@ export namespace Doc {
         copy.cloneOf = doc;
         cloneMap.set(doc[Id], copy);
 
-        Doc.AddFileOrphan(copy);
         return copy;
     }
     export function repairClone(clone: Doc, cloneMap: Map<string, Doc>, visited: Set<Doc>) {
@@ -917,7 +901,7 @@ export namespace Doc {
         // If it doesn't find the expanded layout, then it makes a delegate of the template layout and
         // saves it on the data doc indexed by the template layout's id.
         //
-        const expandedLayoutFieldKey = templateField + '-layout[' + templateLayoutDoc[Id] + ']';
+        const expandedLayoutFieldKey = templateField + '_layout[' + templateLayoutDoc[Id] + ']';
         let expandedTemplateLayout = targetDoc?.[expandedLayoutFieldKey];
 
         if (templateLayoutDoc.resolvedDataDoc instanceof Promise) {
@@ -985,6 +969,59 @@ export namespace Doc {
         return overwrite;
     }
 
+    export function FindReferences(infield: Doc | List<any>, references: Set<Doc>, system: boolean | undefined) {
+        if (infield instanceof List<any>) {
+            infield.forEach(val => (val instanceof Doc || val instanceof List) && FindReferences(val, references, system));
+            return;
+        }
+        const doc = infield as Doc;
+        if (references.has(doc)) {
+            references.add(doc);
+            return;
+        }
+        const excludeLists = doc.title === 'My Recently Closed' || doc.title === 'My Header Bar' || doc.title === 'My Dashboards';
+        if (system !== undefined && ((system && !Doc.IsSystem(doc)) || (!system && Doc.IsSystem(doc)))) return;
+        references.add(doc);
+        Object.keys(doc).forEach(key => {
+            if (key === 'proto') {
+                if (doc.proto instanceof Doc) {
+                    Doc.FindReferences(doc.proto, references, system);
+                }
+            } else {
+                const cfield = ComputedField.WithoutComputed(() => FieldValue(doc[key]));
+                const field = key === 'author' ? Doc.CurrentUserEmail : ProxyField.WithoutProxy(() => doc[key]);
+                if (field instanceof RefField) {
+                    if (field instanceof Doc) {
+                        if (key === 'myLinkDatabase') {
+                            field instanceof Doc && references.add(field);
+                            // skip docs that have been closed and are scheduled for garbage collection
+                        } else {
+                            Doc.FindReferences(field, references, system);
+                        }
+                    }
+                } else if (cfield instanceof ComputedField) {
+                } else if (field instanceof ObjectField) {
+                    if (field instanceof Doc) {
+                        Doc.FindReferences(field, references, system);
+                    } else if (field instanceof List) {
+                        !excludeLists && Doc.FindReferences(field, references, system);
+                    } else if (field instanceof ProxyField) {
+                        if (key === 'myLinkDatabase') {
+                            field instanceof Doc && references.add(field);
+                            // skip docs that have been closed and are scheduled for garbage collection
+                        } else {
+                            Doc.FindReferences(field.value, references, system);
+                        }
+                    } else if (field instanceof PrefetchProxy) {
+                        Doc.FindReferences(field.value, references, system);
+                    }
+                } else if (field instanceof Promise) {
+                    debugger; //This shouldn't happend...
+                }
+            }
+        });
+    }
+
     export function MakeCopy(doc: Doc, copyProto: boolean = false, copyProtoId?: string, retitle = false): Doc {
         const copy = new Doc(copyProtoId, true);
         updateCachedAcls(copy);
@@ -1025,7 +1062,6 @@ export namespace Doc {
         if (retitle) {
             copy.title = incrementTitleCopy(StrCast(copy.title));
         }
-        Doc.AddFileOrphan(copy);
         return copy;
     }
 
@@ -1044,7 +1080,6 @@ export namespace Doc {
             if (!Doc.IsSystem(doc)) Doc.AddDocToList(doc[DocData], 'proto_embeddings', delegate);
             title && (delegate.title = title);
             delegate[Initializing] = false;
-            Doc.AddFileOrphan(delegate);
             return delegate;
         }
         return undefined;
@@ -1177,7 +1212,7 @@ export namespace Doc {
     // the document containing the view layout information - will be the Document itself unless the Document has
     // a layout field or 'layout' is given.
     export function Layout(doc: Doc, layout?: Doc): Doc {
-        const overrideLayout = layout && Cast(doc[`${StrCast(layout.isTemplateForField, 'data')}-layout[` + layout[Id] + ']'], Doc, null);
+        const overrideLayout = layout && Cast(doc[`${StrCast(layout.isTemplateForField, 'data')}_layout[` + layout[Id] + ']'], Doc, null);
         return overrideLayout || doc[DocLayout] || doc;
     }
     export function SetLayout(doc: Doc, layout: Doc | string) {
diff --git a/src/fields/FieldLoader.tsx b/src/fields/FieldLoader.tsx
index 2a7b936f7..a5a71833c 100644
--- a/src/fields/FieldLoader.tsx
+++ b/src/fields/FieldLoader.tsx
@@ -6,10 +6,9 @@ import './FieldLoader.scss';
 
 @observer
 export class FieldLoader extends React.Component {
-    @observable public static ServerLoadStatus = { requested: 0, retrieved: 0 };
-    public static active = false;
+    @observable public static ServerLoadStatus = { requested: 0, retrieved: 0, message: '' };
 
     render() {
-        return <div className="fieldLoader">{`Requested: ${FieldLoader.ServerLoadStatus.requested} ... ${FieldLoader.ServerLoadStatus.retrieved} `}</div>;
+        return <div className="fieldLoader">{`${FieldLoader.ServerLoadStatus.message} request: ${FieldLoader.ServerLoadStatus.requested} ... ${FieldLoader.ServerLoadStatus.retrieved} `}</div>;
     }
 }
diff --git a/src/server/DashUploadUtils.ts b/src/server/DashUploadUtils.ts
index 6764f2727..337bb812f 100644
--- a/src/server/DashUploadUtils.ts
+++ b/src/server/DashUploadUtils.ts
@@ -143,7 +143,6 @@ export namespace DashUploadUtils {
 
     export function uploadYoutube(videoId: string): Promise<Upload.FileResponse> {
         return new Promise<Upload.FileResponse<Upload.FileInformation>>((res, rej) => {
-            console.log('Uploading YouTube video: ' + videoId);
             const name = videoId;
             const path = name.replace(/^-/, '__') + '.mp4';
             const finalPath = serverPathToFile(Directory.videos, path);
@@ -523,7 +522,7 @@ export namespace DashUploadUtils {
             try {
                 const response = await axios.post(RESIZE_FUNCTION_URL, {
                     url: requestable,
-                    filename: resolved
+                    filename: resolved,
                 });
                 writtenFiles = response.data.writtenFiles;
             } catch (err) {
-- 
cgit v1.2.3-70-g09d2


From 1c5bb5390ab9f198acde7d48aaa7d7d536f432cd Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 10 Aug 2023 18:46:04 -0400
Subject: need to pull

---
 package-lock.json                            |  39 ---
 src/.DS_Store                                | Bin 10244 -> 10244 bytes
 src/client/documents/Documents.ts            |  11 +-
 src/client/util/.ClientUtils.ts.icloud       | Bin 0 -> 161 bytes
 src/client/util/.ReportManager.scss.icloud   | Bin 0 -> 168 bytes
 src/client/util/.ReportManager.tsx.icloud    | Bin 0 -> 167 bytes
 src/client/views/.Palette.scss.icloud        | Bin 0 -> 160 bytes
 src/client/views/DashboardView.tsx           |  78 +++---
 src/client/views/FilterPanel.tsx             | 371 ++++++++++++++-------------
 src/client/views/Palette.tsx                 |  69 +++++
 src/client/views/nodes/.QueryBox.scss.icloud | Bin 0 -> 160 bytes
 src/client/views/nodes/.QueryBox.tsx.icloud  | Bin 0 -> 160 bytes
 src/fields/.ListSpec.ts.icloud               | Bin 0 -> 158 bytes
 src/fields/IconField.ts                      |  26 ++
 src/fields/PresField.ts                      |   6 +
 src/mobile/MobileInterface.tsx               |   1 +
 src/server/stats/.userLoginStats.csv.icloud  | Bin 0 -> 168 bytes
 17 files changed, 329 insertions(+), 272 deletions(-)
 create mode 100644 src/client/util/.ClientUtils.ts.icloud
 create mode 100644 src/client/util/.ReportManager.scss.icloud
 create mode 100644 src/client/util/.ReportManager.tsx.icloud
 create mode 100644 src/client/views/.Palette.scss.icloud
 create mode 100644 src/client/views/Palette.tsx
 create mode 100644 src/client/views/nodes/.QueryBox.scss.icloud
 create mode 100644 src/client/views/nodes/.QueryBox.tsx.icloud
 create mode 100644 src/fields/.ListSpec.ts.icloud
 create mode 100644 src/fields/IconField.ts
 create mode 100644 src/fields/PresField.ts
 create mode 100644 src/server/stats/.userLoginStats.csv.icloud

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/package-lock.json b/package-lock.json
index e08568816..884a64a2f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10225,16 +10225,6 @@
             "integrity": "sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=",
             "dev": true
         },
-        "d": {
-            "version": "1.0.1",
-            "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
-            "integrity": "sha512-m62ShEObQ39CfralilEQRjH6oAMtNCV1xJyEx5LpRYUVN+EviphDgUc/F3hnYbADmkiNs67Y+3ylmlG7Lnu+FA==",
-            "dev": true,
-            "requires": {
-                "es5-ext": "^0.10.50",
-                "type": "^1.0.1"
-            }
-        },
         "d3": {
             "version": "7.8.4",
             "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.4.tgz",
@@ -11615,28 +11605,6 @@
                 "is-symbol": "^1.0.2"
             }
         },
-        "es5-ext": {
-            "version": "0.10.62",
-            "resolved": "https://registry.npmjs.org/es5-ext/-/es5-ext-0.10.62.tgz",
-            "integrity": "sha512-BHLqn0klhEpnOKSrzn/Xsz2UIW8j+cGmo9JLzr8BiUapV8hPL9+FliFqjwr9ngW7jWdnxv6eO+/LqyhJVqgrjA==",
-            "dev": true,
-            "requires": {
-                "es6-iterator": "^2.0.3",
-                "es6-symbol": "^3.1.3",
-                "next-tick": "^1.1.0"
-            }
-        },
-        "es6-iterator": {
-            "version": "2.0.3",
-            "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
-            "integrity": "sha512-zw4SRzoUkd+cl+ZoE15A9o1oQd920Bb0iOJMQkQhl3jNc03YqVjAhG7scf9C5KWRU/R13Orf588uCC6525o02g==",
-            "dev": true,
-            "requires": {
-                "d": "1",
-                "es5-ext": "^0.10.35",
-                "es6-symbol": "^3.1.1"
-            }
-        },
         "es6-promise": {
             "version": "3.2.1",
             "resolved": "https://registry.npmjs.org/es6-promise/-/es6-promise-3.2.1.tgz",
@@ -11648,7 +11616,6 @@
             "integrity": "sha512-NJ6Yn3FuDinBaBRWl/q5X/s4koRHBrgKAu+yGI6JCBeiu3qrcbJhwT2GeR/EXVfylRk8dpQVJoLEFhK+Mu31NA==",
             "dev": true,
             "requires": {
-                "d": "^1.0.1",
                 "ext": "^1.1.2"
             }
         },
@@ -27407,12 +27374,6 @@
             "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
             "integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q="
         },
-        "type": {
-            "version": "1.2.0",
-            "resolved": "https://registry.npmjs.org/type/-/type-1.2.0.tgz",
-            "integrity": "sha512-+5nt5AAniqsCnu2cEQQdpzCAh33kVx8n0VoFidKpB1dVVLAN/F+bgVOqOJqOnEnrhp222clB5p3vUlD+1QAnfg==",
-            "dev": true
-        },
         "type-check": {
             "version": "0.4.0",
             "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/src/.DS_Store b/src/.DS_Store
index 06389d6ae..946e85928 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 5d8ae19fc..533df5c11 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -74,6 +74,8 @@ export class FInfo {
     readOnly: boolean = false;
     fieldType?: string = '';
     values?: Field[];
+
+    filterable?: boolean = true;
     // format?: string; // format to display values (e.g, decimal places, $, etc)
     // parse?: ScriptField; // parse a value from a string
     constructor(d: string, readOnly?: boolean) {
@@ -88,7 +90,7 @@ class BoolInfo extends FInfo {
 class NumInfo extends FInfo {
     fieldType? = 'number';
     values?: number[] = [];
-    constructor(d: string, readOnly?: boolean, values?: number[], filterable?:boolean) {
+    constructor(d: string, readOnly?: boolean, values?: number[], filterable?: boolean) {
         super(d, readOnly);
         this.values = values;
     }
@@ -96,15 +98,16 @@ class NumInfo extends FInfo {
 class StrInfo extends FInfo {
     fieldType? = 'string';
     values?: string[] = [];
-    constructor(d: string, readOnly?: boolean, values?: string[], filterable?:boolean) {
+    constructor(d: string, filterable?: boolean, readOnly?: boolean, values?: string[]) {
         super(d, readOnly);
         this.values = values;
+        this.filterable = filterable;
     }
 }
 class DocInfo extends FInfo {
     fieldType? = 'Doc';
     values?: Doc[] = [];
-    constructor(d: string, filterable?:boolean, values?: Doc[] ) {
+    constructor(d: string, filterable?: boolean, values?: Doc[]) {
         super(d, true);
         this.values = values;
     }
@@ -184,7 +187,7 @@ export class DocumentOptions {
     author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable
     author_date?: DATEt = new DateInfo('date the document was created', true);
     annotationOn?: DOCt = new DocInfo('document annotated by this document', false);
-    color?: STRt = new StrInfo('foreground color data doc');
+    color?: STRt = new StrInfo('foreground color data doc', true);
     hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection');
     backgroundColor?: STRt = new StrInfo('background color for data doc');
     opacity?: NUMt = new NumInfo('document opacity');
diff --git a/src/client/util/.ClientUtils.ts.icloud b/src/client/util/.ClientUtils.ts.icloud
new file mode 100644
index 000000000..e5e477586
Binary files /dev/null and b/src/client/util/.ClientUtils.ts.icloud differ
diff --git a/src/client/util/.ReportManager.scss.icloud b/src/client/util/.ReportManager.scss.icloud
new file mode 100644
index 000000000..f5d34d292
Binary files /dev/null and b/src/client/util/.ReportManager.scss.icloud differ
diff --git a/src/client/util/.ReportManager.tsx.icloud b/src/client/util/.ReportManager.tsx.icloud
new file mode 100644
index 000000000..72924c53a
Binary files /dev/null and b/src/client/util/.ReportManager.tsx.icloud differ
diff --git a/src/client/views/.Palette.scss.icloud b/src/client/views/.Palette.scss.icloud
new file mode 100644
index 000000000..49a2ac2da
Binary files /dev/null and b/src/client/views/.Palette.scss.icloud differ
diff --git a/src/client/views/DashboardView.tsx b/src/client/views/DashboardView.tsx
index ae55c8ebf..d6c7b43d5 100644
--- a/src/client/views/DashboardView.tsx
+++ b/src/client/views/DashboardView.tsx
@@ -43,7 +43,7 @@ export class DashboardView extends React.Component {
     @observable private selectedDashboardGroup = DashboardGroup.MyDashboards;
 
     @observable private newDashboardName: string | undefined = undefined;
-    @observable private newDashboardColor: string | undefined = "#AFAFAF";
+    @observable private newDashboardColor: string | undefined = '#AFAFAF';
     @action abortCreateNewDashboard = () => {
         this.newDashboardName = undefined;
     };
@@ -100,24 +100,17 @@ export class DashboardView extends React.Component {
         const dashboardCount = DocListCast(Doc.MyDashboards.data).length + 1;
         const placeholder = `Dashboard ${dashboardCount}`;
         return (
-            <div className="new-dashboard"
-                style={{ 
+            <div
+                className="new-dashboard"
+                style={{
                     background: StrCast(Doc.UserDoc().userBackgroundColor),
-                    color: StrCast(Doc.UserDoc().userColor)
-                }}
-            >
+                    color: StrCast(Doc.UserDoc().userColor),
+                }}>
                 <div className="header">Create New Dashboard</div>
-                <EditableText 
-                    formLabel='Title'
-                    placeholder={placeholder}
-                    type={Type.SEC}
-                    color={StrCast(Doc.UserDoc().userColor)}
-                    setVal={val => this.setNewDashboardName(val as string)}
-                    fillWidth
-                />
+                <EditableText formLabel="Title" placeholder={placeholder} type={Type.SEC} color={StrCast(Doc.UserDoc().userColor)} setVal={val => this.setNewDashboardName(val as string)} fillWidth />
                 <ColorPicker
-                    formLabel='Background'
-                    colorPickerType='github'
+                    formLabel="Background"
+                    colorPickerType="github"
                     type={Type.TERT}
                     selectedColor={this.newDashboardColor}
                     setSelectedColor={color => {
@@ -165,21 +158,14 @@ export class DashboardView extends React.Component {
     };
 
     render() {
-        const color = StrCast(Doc.UserDoc().userColor)
-        const variant = StrCast(Doc.UserDoc().userVariantColor)
+        const color = StrCast(Doc.UserDoc().userColor);
+        const variant = StrCast(Doc.UserDoc().userVariantColor);
         return (
             <>
                 <div className="dashboard-view">
                     <div className="left-menu">
-                        <Button 
-                            text={'My Dashboards'}
-                            active={this.selectedDashboardGroup === DashboardGroup.MyDashboards}
-                            color={color}
-                            align={'flex-start'}
-                            onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)}
-                            fillWidth
-                        />
-                        <Button 
+                        <Button text={'My Dashboards'} active={this.selectedDashboardGroup === DashboardGroup.MyDashboards} color={color} align={'flex-start'} onClick={() => this.selectDashboardGroup(DashboardGroup.MyDashboards)} fillWidth />
+                        <Button
                             text={'Shared Dashboards' + ' (' + this.getDashboards(DashboardGroup.SharedDashboards).length + ')'}
                             active={this.selectedDashboardGroup === DashboardGroup.SharedDashboards}
                             color={this.getDashboards(DashboardGroup.SharedDashboards).some(dash => !DocListCast(Doc.MySharedDocs.viewed).includes(dash)) ? 'green' : color}
@@ -196,11 +182,11 @@ export class DashboardView extends React.Component {
                                 .filter(key => key !== `acl-${Doc.CurrentUserEmailNormalized}` && !['acl-Me', 'acl-Guest'].includes(key))
                                 .some(key => dashboard[DocAcl][key] !== AclPrivate);
                             return (
-                                <div 
-                                    className="dashboard-container" 
-                                    key={dashboard[Id]} 
+                                <div
+                                    className="dashboard-container"
+                                    key={dashboard[Id]}
                                     style={{ background: this.isUnviewedSharedDashboard(dashboard) && this.selectedDashboardGroup === DashboardGroup.SharedDashboards ? '#6CB982' : shared ? variant : '' }}
-                                    onContextMenu={e => this.onContextMenu(dashboard, e)} 
+                                    onContextMenu={e => this.onContextMenu(dashboard, e)}
                                     onClick={e => this.clickDashboard(e, dashboard)}>
                                     <img
                                         src={
@@ -208,12 +194,7 @@ export class DashboardView extends React.Component {
                                         }
                                     />
                                     <div className="info">
-                                        <EditableText 
-                                            type={Type.PRIM}
-                                            color={color}
-                                            val={StrCast(dashboard.title)} 
-                                            setVal={val => (Doc.GetProto(dashboard).title = val)}
-                                        />
+                                        <EditableText type={Type.PRIM} color={color} val={StrCast(dashboard.title)} setVal={val => (Doc.GetProto(dashboard).title = val)} />
                                         {this.selectedDashboardGroup === DashboardGroup.SharedDashboards && this.isUnviewedSharedDashboard(dashboard) ? <div>unviewed</div> : <div></div>}
                                         <div
                                             className="more"
@@ -229,10 +210,13 @@ export class DashboardView extends React.Component {
                                             <Button size={Size.SMALL} color={color} icon={<FontAwesomeIcon color={color} icon="bars" />} />
                                         </div>
                                     </div>
-                                    <div className={`background`} style={{
-                                        background: StrCast(Doc.UserDoc().userColor),
-                                        filter: 'opacity(0.2)'
-                                    }}/>
+                                    <div
+                                        className={`background`}
+                                        style={{
+                                            background: StrCast(Doc.UserDoc().userColor),
+                                            filter: 'opacity(0.2)',
+                                        }}
+                                    />
                                     <div className={'dashboard-status' + (shared ? '-shared' : '')}>{shared ? 'shared' : ''}</div>
                                 </div>
                             );
@@ -243,10 +227,13 @@ export class DashboardView extends React.Component {
                                 this.setNewDashboardName('');
                             }}>
                             +
-                            <div className={`background`} style={{
-                                background: StrCast(Doc.UserDoc().userColor),
-                                filter: 'opacity(0.2)'
-                            }}/>
+                            <div
+                                className={`background`}
+                                style={{
+                                    background: StrCast(Doc.UserDoc().userColor),
+                                    filter: 'opacity(0.2)',
+                                }}
+                            />
                         </div>
                     </div>
                 </div>
@@ -416,6 +403,7 @@ export class DashboardView extends React.Component {
             backgroundColor: background,
             title: `Untitled Tab 1`,
         };
+
         const title = name ? name : `Dashboard ${dashboardCount}`;
         const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
         const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: title }, id, 'row');
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
         }
     }
 }
-
-
diff --git a/src/client/views/Palette.tsx b/src/client/views/Palette.tsx
new file mode 100644
index 000000000..3ad28c418
--- /dev/null
+++ b/src/client/views/Palette.tsx
@@ -0,0 +1,69 @@
+import { IReactionDisposer, observable, reaction } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { Doc } from '../../fields/Doc';
+import { NumCast } from '../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnTrue, emptyPath } from '../../Utils';
+import { Transform } from '../util/Transform';
+import { DocumentView } from './nodes/DocumentView';
+import './Palette.scss';
+
+export interface PaletteProps {
+    x: number;
+    y: number;
+    thumb: number[];
+    thumbDoc: Doc;
+}
+
+@observer
+export default class Palette extends React.Component<PaletteProps> {
+    private _selectedDisposer?: IReactionDisposer;
+    @observable private _selectedIndex: number = 0;
+
+    componentDidMount = () => {
+        this._selectedDisposer = reaction(
+            () => NumCast(this.props.thumbDoc.selectedIndex),
+            i => (this._selectedIndex = i),
+            { fireImmediately: true }
+        );
+    };
+
+    componentWillUnmount = () => {
+        this._selectedDisposer?.();
+    };
+
+    render() {
+        return (
+            <div className="palette-container" style={{ transform: `translate(${this.props.x}px, ${this.props.y}px)` }}>
+                <div className="palette-thumb" style={{ transform: `translate(${this.props.thumb[0] - this.props.x}px, ${this.props.thumb[1] - this.props.y}px)` }}>
+                    <div className="palette-thumbContent" style={{ transform: `translate(-${this._selectedIndex * 50 + 10}px, 0px)` }}>
+                        <DocumentView
+                            Document={this.props.thumbDoc}
+                            DataDoc={undefined}
+                            addDocument={undefined}
+                            addDocTab={returnFalse}
+                            rootSelected={returnTrue}
+                            pinToPres={emptyFunction}
+                            removeDocument={undefined}
+                            ScreenToLocalTransform={Transform.Identity}
+                            PanelWidth={() => window.screen.width}
+                            PanelHeight={() => window.screen.height}
+                            renderDepth={0}
+                            isDocumentActive={returnTrue}
+                            isContentActive={emptyFunction}
+                            focus={emptyFunction}
+                            docViewPath={returnEmptyDoclist}
+                            styleProvider={returnEmptyString}
+                            whenChildContentsActiveChanged={emptyFunction}
+                            bringToFront={emptyFunction}
+                            docFilters={returnEmptyFilter}
+                            docRangeFilters={returnEmptyFilter}
+                            searchFilterDocs={returnEmptyDoclist}
+                        />
+                        <div className="palette-cover" style={{ transform: `translate(${Math.max(0, this._selectedIndex) * 50.75 + 23}px, 0px)` }}></div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/.QueryBox.scss.icloud b/src/client/views/nodes/.QueryBox.scss.icloud
new file mode 100644
index 000000000..26ba46a75
Binary files /dev/null and b/src/client/views/nodes/.QueryBox.scss.icloud differ
diff --git a/src/client/views/nodes/.QueryBox.tsx.icloud b/src/client/views/nodes/.QueryBox.tsx.icloud
new file mode 100644
index 000000000..5930b1e0e
Binary files /dev/null and b/src/client/views/nodes/.QueryBox.tsx.icloud differ
diff --git a/src/fields/.ListSpec.ts.icloud b/src/fields/.ListSpec.ts.icloud
new file mode 100644
index 000000000..2fbd1858e
Binary files /dev/null and b/src/fields/.ListSpec.ts.icloud differ
diff --git a/src/fields/IconField.ts b/src/fields/IconField.ts
new file mode 100644
index 000000000..76c4ddf1b
--- /dev/null
+++ b/src/fields/IconField.ts
@@ -0,0 +1,26 @@
+import { Deserializable } from "../client/util/SerializationHelper";
+import { serializable, primitive } from "serializr";
+import { ObjectField } from "./ObjectField";
+import { Copy, ToScriptString, ToString } from "./FieldSymbols";
+
+@Deserializable("icon")
+export class IconField extends ObjectField {
+    @serializable(primitive())
+    readonly icon: string;
+
+    constructor(icon: string) {
+        super();
+        this.icon = icon;
+    }
+
+    [Copy]() {
+        return new IconField(this.icon);
+    }
+
+    [ToScriptString]() {
+        return "invalid";
+    }
+    [ToString]() {
+        return "ICONfield";
+    }
+}
diff --git a/src/fields/PresField.ts b/src/fields/PresField.ts
new file mode 100644
index 000000000..f236a04fd
--- /dev/null
+++ b/src/fields/PresField.ts
@@ -0,0 +1,6 @@
+//insert code here
+import { ObjectField } from "./ObjectField";
+
+export abstract class PresField extends ObjectField {
+
+}
\ No newline at end of file
diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 584a7b432..c16a1c124 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -584,6 +584,7 @@ export class MobileInterface extends React.Component {
             y: 400,
             title: 'Collection ' + dashboardCount,
         };
+
         const freeformDoc = Doc.GuestTarget || Docs.Create.FreeformDocument([], freeformOptions);
         const dashboardDoc = Docs.Create.StandardCollectionDockingDocument([{ doc: freeformDoc, initialWidth: 600 }], { title: `Dashboard ${dashboardCount}` }, id, 'row');
 
diff --git a/src/server/stats/.userLoginStats.csv.icloud b/src/server/stats/.userLoginStats.csv.icloud
new file mode 100644
index 000000000..4a95297e8
Binary files /dev/null and b/src/server/stats/.userLoginStats.csv.icloud differ
-- 
cgit v1.2.3-70-g09d2


From 2fcad5e8bd1412487b4fcacefdc12a2df5707638 Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Thu, 24 Aug 2023 20:12:24 +0200
Subject: filter - trying to pull

---
 src/client/documents/Documents.ts      | 135 ++++++++++++++++++---------------
 src/client/util/.ClientUtils.ts.icloud | Bin 161 -> 0 bytes
 src/client/views/FilterPanel.tsx       |  30 ++++++--
 3 files changed, 99 insertions(+), 66 deletions(-)
 delete mode 100644 src/client/util/.ClientUtils.ts.icloud

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 533df5c11..1988c6328 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -86,13 +86,18 @@ export class FInfo {
 class BoolInfo extends FInfo {
     fieldType? = 'boolean';
     values?: boolean[] = [true, false];
+    constructor(d: string, filterable?: boolean) {
+        super(d);
+        this.filterable = filterable;
+    }
 }
 class NumInfo extends FInfo {
     fieldType? = 'number';
     values?: number[] = [];
-    constructor(d: string, readOnly?: boolean, values?: number[], filterable?: boolean) {
+    constructor(d: string, filterable?: boolean, readOnly?: boolean, values?: number[]) {
         super(d, readOnly);
         this.values = values;
+        this.filterable = filterable;
     }
 }
 class StrInfo extends FInfo {
@@ -110,27 +115,32 @@ class DocInfo extends FInfo {
     constructor(d: string, filterable?: boolean, values?: Doc[]) {
         super(d, true);
         this.values = values;
+        this.filterable = filterable;
     }
 }
 class DimInfo extends FInfo {
     fieldType? = 'enumeration';
     values? = [DimUnit.Pixel, DimUnit.Ratio];
     readOnly = false;
+    filterable = false;
 }
 class PEInfo extends FInfo {
     fieldType? = 'enumeration';
     values? = ['all', 'none'];
     readOnly = false;
+    filterable = false;
 }
 class DAInfo extends FInfo {
     fieldType? = 'enumeration';
     values? = ['embed', 'copy', 'move', 'same', 'proto', 'none'];
     readOnly = false;
+    filterable = false;
 }
 class CTypeInfo extends FInfo {
     fieldType? = 'enumeration';
     values? = Array.from(Object.keys(CollectionViewType));
     readOnly = false;
+    filterable = false;
 }
 class DTypeInfo extends FInfo {
     fieldType? = 'enumeration';
@@ -140,6 +150,7 @@ class DTypeInfo extends FInfo {
 class DateInfo extends FInfo {
     fieldType? = 'date';
     values?: DateField[] = [];
+    filterable = true;
 }
 class ListInfo extends FInfo {
     fieldType? = 'list';
@@ -158,23 +169,23 @@ type DATEt = DateInfo | number;
 type DTYPEt = DTypeInfo | string;
 export class DocumentOptions {
     // coordinate and dimensions depending on view
-    x?: NUMt = new NumInfo('x coordinate of document in a freeform view');
-    y?: NUMt = new NumInfo('y coordinage of document in a freeform view');
-    z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', false, [1, 0]);
-    _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height");
+    x?: NUMt = new NumInfo('x coordinate of document in a freeform view', false);
+    y?: NUMt = new NumInfo('y coordinage of document in a freeform view', false);
+    z?: NUMt = new NumInfo('whether document is in overlay (1) or not (0)', false, false, [1, 0]);
+    _dimMagnitude?: NUMt = new NumInfo("magnitude of collectionMulti{row,col} element's width or height", false);
     _dimUnit?: DIMt = new DimInfo("units of collectionMulti{row,col} element's width or height - 'px' or '*' for pixels or relative units");
-    lat?: NUMt = new NumInfo('latitude coordinate for map views');
-    lng?: NUMt = new NumInfo('longitude coordinate for map views');
-    _timecodeToShow?: NUMt = new NumInfo('the time that a document should be displayed (e.g., when an annotation shows up as a video plays)');
-    _timecodeToHide?: NUMt = new NumInfo('the time that a document should be hidden');
-    _width?: NUMt = new NumInfo('displayed width of a document');
-    _height?: NUMt = new NumInfo('displayed height of document');
-    data_nativeWidth?: NUMt = new NumInfo('native width of data field contents (e.g., the pixel width of an image)');
-    data_nativeHeight?: NUMt = new NumInfo('native height of data field contents (e.g., the pixel height of an image)');
-    linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)');
-    _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g., the pixel width of an image)');
-    _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)');
-    _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers');
+    lat?: NUMt = new NumInfo('latitude coordinate for map views', false);
+    lng?: NUMt = new NumInfo('longitude coordinate for map views', false);
+    _timecodeToShow?: NUMt = new NumInfo('the time that a document should be displayed (e.g., when an annotation shows up as a video plays)', false);
+    _timecodeToHide?: NUMt = new NumInfo('the time that a document should be hidden', false);
+    _width?: NUMt = new NumInfo('displayed width of a document', true);
+    _height?: NUMt = new NumInfo('displayed height of document', true);
+    data_nativeWidth?: NUMt = new NumInfo('native width of data field contents (e.g., the pixel width of an image)', false);
+    data_nativeHeight?: NUMt = new NumInfo('native height of data field contents (e.g., the pixel height of an image)', false);
+    linearBtnWidth?: NUMt = new NumInfo('unexpanded width of a linear menu button (button "width" changes when it expands)', false);
+    _nativeWidth?: NUMt = new NumInfo('native width of document contents (e.g.,  the pixel width of an image)', false);
+    _nativeHeight?: NUMt = new NumInfo('native height of document contents (e.g., the pixel height of an image)', false);
+    _nativeDimModifiable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
     _nativeHeightUnfrozen?: BOOLt = new BoolInfo('native height can be changed independent of width by dragging decoration resizers');
 
     'acl-Guest'?: string; // public permissions
@@ -182,29 +193,29 @@ export class DocumentOptions {
     type?: DTYPEt = new DTypeInfo('type of document', true);
     type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection
     _type_collection?: COLLt = new CTypeInfo('how collection is rendered'); // sub type of a collection
-    title?: STRt = new StrInfo('title of document');
+    title?: STRt = new StrInfo('title of document', true);
     caption?: RichTextField;
     author?: string; // STRt = new StrInfo('creator of document'); // bcz: don't change this. Otherwise, the userDoc's field Infos will have a FieldInfo assigned to its author field which will render it unreadable
     author_date?: DATEt = new DateInfo('date the document was created', true);
     annotationOn?: DOCt = new DocInfo('document annotated by this document', false);
-    color?: STRt = new StrInfo('foreground color data doc', true);
-    hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection');
-    backgroundColor?: STRt = new StrInfo('background color for data doc');
-    opacity?: NUMt = new NumInfo('document opacity');
-    viewTransitionTime?: NUMt = new NumInfo('transition duration for view parameters');
-    dontRegisterView?: BOOLt = new BoolInfo('are views of this document registered so that they can be found when following links, etc');
+    color?: STRt = new StrInfo('foreground color data doc', false);
+    hidden?: BOOLt = new BoolInfo('whether the document is not rendered by its collection', false);
+    backgroundColor?: STRt = new StrInfo('background color for data doc', false);
+    opacity?: NUMt = new NumInfo('document opacity', false);
+    viewTransitionTime?: NUMt = new NumInfo('transition duration for view parameters', false);
+    dontRegisterView?: BOOLt = new BoolInfo('are views of this document registered so that they can be found when following links, etc', false);
     _undoIgnoreFields?: List<string>; //'fields that should not be added to the undo stack (opacity for Undo/Redo/and sidebar) AND whether modifications to document are undoable (true for linearview menu buttons to prevent open/close from entering undo stack)'
     undoIgnoreFields?: List<string>; //'fields that should not be added to the undo stack (opacity for Undo/Redo/and sidebar) AND whether modifications to document are undoable (true for linearview menu buttons to prevent open/close from entering undo stack)'
-    _headerHeight?: NUMt = new NumInfo('height of document header used for displaying title');
-    _headerFontSize?: NUMt = new NumInfo('font size of header of custom notes');
+    _headerHeight?: NUMt = new NumInfo('height of document header used for displaying title', false);
+    _headerFontSize?: NUMt = new NumInfo('font size of header of custom notes', false);
     _headerPointerEvents?: PEVt = new PEInfo('types of events the header of a custom text document can consume');
     _lockedPosition?: BOOLt = new BoolInfo("lock the x,y coordinates of the document so that it can't be dragged");
     _lockedTransform?: BOOLt = new BoolInfo('lock the freeform_panx,freeform_pany and scale parameters of the document so that it be panned/zoomed');
 
     layout?: string | Doc; // default layout string or template document
-    layout_keyValue?: STRt = new StrInfo('layout definition for showing keyValue view of document');
-    layout_explainer?: STRt = new StrInfo('explanation displayed at top of a collection to describe its purpose');
-    layout_headerButton?: DOCt = new DocInfo('the (button) Doc to display at the top of a collection.');
+    layout_keyValue?: STRt = new StrInfo('layout definition for showing keyValue view of document', false);
+    layout_explainer?: STRt = new StrInfo('explanation displayed at top of a collection to describe its purpose', false);
+    layout_headerButton?: DOCt = new DocInfo('the (button) Doc to display at the top of a collection.', false);
     layout_disableBrushing?: BOOLt = new BoolInfo('whether to suppress border highlighting');
     layout_unrendered?: BOOLt = new BoolInfo('denotes an annotation that is not rendered with a DocumentView (e.g, rtf/pdf text selections and links to scroll locations in web/pdf)');
     layout_hideOpenButton?: BOOLt = new BoolInfo('whether to hide the open full screen button when selected');
@@ -216,33 +227,33 @@ export class DocumentOptions {
     layout_hideDecorationTitle?: BOOLt = new BoolInfo('whether to suppress the document decortations title when selected');
     layout_borderRounding?: string;
     layout_boxShadow?: string; // box-shadow css string OR "standard" to use dash standard box shadow
-    layout_maxAutoHeight?: NUMt = new NumInfo('maximum height for newly created (eg, from pasting) text documents');
+    layout_maxAutoHeight?: NUMt = new NumInfo('maximum height for newly created (eg, from pasting) text documents', false);
     _layout_autoHeight?: BOOLt = new BoolInfo('whether document automatically resizes vertically to display contents');
-    _layout_curPage?: NUMt = new NumInfo('current page of a PDF or other? paginated document');
-    _layout_currentTimecode?: NUMt = new NumInfo('the current timecode of a time-based document (e.g., current time of a video)  value is in seconds');
+    _layout_curPage?: NUMt = new NumInfo('current page of a PDF or other? paginated document', false);
+    _layout_currentTimecode?: NUMt = new NumInfo('the current timecode of a time-based document (e.g., current time of a video)  value is in seconds', false);
     _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     _layout_fitWidth?: BOOLt = new BoolInfo('whether document should scale its contents to fit its rendered width or not (e.g., for PDFviews)');
     _layout_fitContentsToBox?: BOOLt = new BoolInfo('whether a freeformview should zoom/scale to create a shrinkwrapped view of its content');
-    _layout_fieldKey?: STRt = new StrInfo('the field key containing the current layout definition');
+    _layout_fieldKey?: STRt = new StrInfo('the field key containing the current layout definition', false);
     _layout_enableAltContentUI?: BOOLt = new BoolInfo('whether to show alternate content button');
     _layout_showTitle?: string; // field name to display in header (:hover is an optional suffix)
     _layout_showSidebar?: BOOLt = new BoolInfo('whether an annotationsidebar should be displayed for text docuemnts');
     _layout_showCaption?: string; // which field to display in the caption area.  leave empty to have no caption
 
     _chromeHidden?: BOOLt = new BoolInfo('whether the editing chrome for a document is hidden');
-    _gridGap?: NUMt = new NumInfo('gap between items in masonry view');
-    _xMargin?: NUMt = new NumInfo('gap between left edge of document and start of masonry/stacking layouts');
-    _yMargin?: NUMt = new NumInfo('gap between top edge of dcoument and start of masonry/stacking layouts');
-    _xPadding?: NUMt = new NumInfo('x padding');
-    _yPadding?: NUMt = new NumInfo('y padding');
+    _gridGap?: NUMt = new NumInfo('gap between items in masonry view', false);
+    _xMargin?: NUMt = new NumInfo('gap between left edge of document and start of masonry/stacking layouts', false);
+    _yMargin?: NUMt = new NumInfo('gap between top edge of dcoument and start of masonry/stacking layouts', false);
+    _xPadding?: NUMt = new NumInfo('x padding', false);
+    _yPadding?: NUMt = new NumInfo('y padding', false);
     _singleLine?: boolean; // whether label box is restricted to one line of text
     _createDocOnCR?: boolean; // whether carriage returns and tabs create new text documents
-    _columnWidth?: NUMt = new NumInfo('width of table column');
+    _columnWidth?: NUMt = new NumInfo('width of table column', false);
     _columnsHideIfEmpty?: BOOLt = new BoolInfo('whether stacking view column headings should be hidden');
-    _caption_xMargin?: NUMt = new NumInfo('x margin of caption inside of a carousel collection', true);
-    _caption_yMargin?: NUMt = new NumInfo('y margin of caption inside of a carousel collection', true);
-    icon_nativeWidth?: NUMt = new NumInfo('native width of icon view', true);
-    icon_nativeHeight?: NUMt = new NumInfo('native height of icon view', true);
+    _caption_xMargin?: NUMt = new NumInfo('x margin of caption inside of a carousel collection', false, true);
+    _caption_yMargin?: NUMt = new NumInfo('y margin of caption inside of a carousel collection', false, true);
+    icon_nativeWidth?: NUMt = new NumInfo('native width of icon view', false, true);
+    icon_nativeHeight?: NUMt = new NumInfo('native height of icon view', false, true);
     _text_fontSize?: string;
     _text_fontFamily?: string;
     _text_fontWeight?: string;
@@ -250,11 +261,11 @@ export class DocumentOptions {
 
     infoWindowOpen?: BOOLt = new BoolInfo('whether info window corresponding to pin is open (on MapDocuments)');
     _carousel_index?: NUMt = new NumInfo('which item index the carousel viewer is showing');
-    _label_minFontSize?: NUMt = new NumInfo('minimum font size for labelBoxes');
-    _label_maxFontSize?: NUMt = new NumInfo('maximum font size for labelBoxes');
-    stroke_width?: NUMt = new NumInfo('width of an ink stroke');
-    icon_label?: STRt = new StrInfo('label to use for a fontIcon doc (otherwise, the title is used)');
-    mediaState?: STRt = new StrInfo('status of audio/video media document: "pendingRecording", "recording", "paused", "playing"');
+    _label_minFontSize?: NUMt = new NumInfo('minimum font size for labelBoxes', false);
+    _label_maxFontSize?: NUMt = new NumInfo('maximum font size for labelBoxes', false);
+    stroke_width?: NUMt = new NumInfo('width of an ink stroke', false);
+    icon_label?: STRt = new StrInfo('label to use for a fontIcon doc (otherwise, the title is used)', false);
+    mediaState?: STRt = new StrInfo('status of audio/video media document: "pendingRecording", "recording", "paused", "playing"', false);
     recording?: BOOLt = new BoolInfo('whether WebCam is recording or not');
     autoPlayAnchors?: BOOLt = new BoolInfo('whether to play audio/video when an anchor is clicked in a stackedTimeline.');
     dontPlayLinkOnSelect?: BOOLt = new BoolInfo('whether an audio/video should start playing when a link is followed to it.');
@@ -270,7 +281,7 @@ export class DocumentOptions {
     contextMenuIcons?: List<string>;
     childFilters_boolean?: string;
     childFilters?: List<string>;
-    childLimitHeight?: NUMt = new NumInfo('whether to limit the height of collection children.  0 - means  height can be no bigger than width');
+    childLimitHeight?: NUMt = new NumInfo('whether to limit the height of collection children.  0 - means  height can be no bigger than width', false);
     childLayoutTemplate?: Doc; // template for collection to use to render its children (see PresBox layout in tree view)
     childLayoutString?: string; // template string for collection to use to render its children
     childDocumentsActive?: BOOLt = new BoolInfo('whether child documents are active when parent is document active');
@@ -282,12 +293,12 @@ export class DocumentOptions {
     childContextMenuIcons?: List<string>;
     targetScriptKey?: string; // where to write a template script (used by collections with click templates which need to target onClick, onDoubleClick, etc)
 
-    lastFrame?: NUMt = new NumInfo('the last frame of a frame-based collection (e.g., progressive slide)');
-    activeFrame?: NUMt = new NumInfo('the active frame of a document in a frame base collection');
-    appearFrame?: NUMt = new NumInfo('the frame in which the document appears');
-    _currentFrame?: NUMt = new NumInfo('the current frame of a frame-based collection (e.g., progressive slide)');
+    lastFrame?: NUMt = new NumInfo('the last frame of a frame-based collection (e.g., progressive slide)', false);
+    activeFrame?: NUMt = new NumInfo('the active frame of a document in a frame base collection', false);
+    appearFrame?: NUMt = new NumInfo('the frame in which the document appears', false);
+    _currentFrame?: NUMt = new NumInfo('the current frame of a frame-based collection (e.g., progressive slide)', false);
 
-    isSystem?: BOOLt = new BoolInfo('is this a system created/owned doc', true);
+    isSystem?: BOOLt = new BoolInfo('is this a system created/owned doc', false);
     isBaseProto?: BOOLt = new BoolInfo('is doc a base level prototype for data documents as opposed to data documents which are prototypes for layout documents.  base protos are not cloned during a deep');
     isTemplateForField?: string; // the field key for which the containing document is a rendering template
     isTemplateDoc?: BOOLt = new BoolInfo('is the document a template for creating other documents');
@@ -296,21 +307,23 @@ export class DocumentOptions {
     _isTimelineLabel?: BOOLt = new BoolInfo('is document a timeline label');
     _isLightbox?: BOOLt = new BoolInfo('whether a collection acts as a lightbox by opening lightbox links by hiding all other documents in collection besides link target');
 
-    presPanX?: NUMt = new NumInfo('panX saved as a view spec');
-    presPanY?: NUMt = new NumInfo('panY saved as a view spec');
-    presViewScale?: NUMt = new NumInfo('viewScale saved as a view Spec');
-    presTransition?: NUMt = new NumInfo('the time taken for the transition TO a document');
-    presDuration?: NUMt = new NumInfo('the duration of the slide in presentation view');
+    presPanX?: NUMt = new NumInfo('panX saved as a view spec', false);
+    presPanY?: NUMt = new NumInfo('panY saved as a view spec', false);
+    presViewScale?: NUMt = new NumInfo('viewScale saved as a view Spec', false);
+    presTransition?: NUMt = new NumInfo('the time taken for the transition TO a document', false);
+    presDuration?: NUMt = new NumInfo('the duration of the slide in presentation view', false);
     presZoomText?: BOOLt = new BoolInfo('whether text anchors should shown in a larger box when following links to make them stand out');
 
     data?: any;
     data_useCors?: BOOLt = new BoolInfo('whether CORS protocol should be used for web page');
     columnHeaders?: List<SchemaHeaderField>; // headers for stacking views
     schemaHeaders?: List<SchemaHeaderField>; // headers for schema view
-    dockingConfig?: STRt = new StrInfo('configuration of golden layout windows (applies only if doc is rendered as a CollectionDockingView)');
+    dockingConfig?: STRt = new StrInfo('configuration of golden layout windows (applies only if doc is rendered as a CollectionDockingView)', false);
     icon?: string; // icon used by fonticonbox to render button
     noteType?: string;
 
+    // STOPPING HERE
+
     // freeform properties
     _freeform_backgroundGrid?: boolean;
     _freeform_scale?: NUMt = new NumInfo('how much a freeform view has been scaled (zoomed)');
@@ -380,7 +393,7 @@ export class DocumentOptions {
     cloneFieldFilter?: List<string>; // fields not to copy when the document is clonedclipboard?: Doc;
     dragWhenActive?: BOOLt = new BoolInfo('should document drag when it is active - e.g., pileView, group');
     dragAction?: DROPt = new DAInfo('how to drag document when it is active (e.g., tree, groups)');
-    dragFactory_count?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)', true);
+    dragFactory_count?: NUMt = new NumInfo('number of items created from a drag button (used for setting title with incrementing index)', false, true);
     dragFactory?: Doc; // document to create when dragging with a suitable onDragStart script
     clickFactory?: Doc; // document to create when clicking on a button with a suitable onClick script
     onDragStart?: ScriptField; //script to execute at start of drag operation --  e.g., when a "creator" button is dragged this script generates a different document to drop
diff --git a/src/client/util/.ClientUtils.ts.icloud b/src/client/util/.ClientUtils.ts.icloud
deleted file mode 100644
index e5e477586..000000000
Binary files a/src/client/util/.ClientUtils.ts.icloud and /dev/null differ
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 1a923a995..93f4cf818 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -15,7 +15,8 @@ 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';
+import { DocumentOptions, FInfo } from '../documents/Documents';
+import { string32 } from 'pdfjs-dist/types/src/shared/util';
 
 //slight bug when you don't click on background canvas before creating filter and the you click on the canvas
 
@@ -28,6 +29,8 @@ interface filterProps {
 
 @observer
 export class FilterPanel extends React.Component<filterProps> {
+    private _documentOptions: DocumentOptions = new DocumentOptions();
+
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(FilterPanel, fieldKey);
     }
@@ -262,12 +265,21 @@ export class FilterPanel extends React.Component<filterProps> {
     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 }));
+        // const options = Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => pair[1].filterable ).map(facet => value: facet, label: facet) //this._allFacets.filter(facet => this.activeFacetHeaders.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
         // console.log('HEELLLLLL ' + DocumentOptions);
 
-        const freeformOptions: DocumentOptions = {};
+        let filteredOptions: string[] = ['author', 'tags', 'text', 'acl-Guest'];
+
+        Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => {
+            if (pair[1].filterable) {
+                filteredOptions.push(pair[0]);
+                console.log('THIS IS FILTERABLE ALKDJFIIEII' + filteredOptions);
+            }
+        });
+
+        let options = filteredOptions.map(facet => ({ value: facet, label: facet }));
 
-        console.log('wht is this ' + freeformOptions.author);
+        //  Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => console.log('this is first piar ' + pair[0] + ' this is second piar ' + pair[1].filterable));
 
         return (
             <div className="filterBox-treeView">
@@ -373,13 +385,21 @@ export class FilterPanel extends React.Component<filterProps> {
 
             case 'range':
                 const domain = renderInfoDomain;
+                const range = renderInfoRange;
+
+                if (range) {
+                    console.log('this is info range ' + range[0] + ' , ' + range[1]);
+                }
+
                 if (domain) {
+                    console.log('this is info domain ' + domain[0] + ', ' + domain[1]);
+
                     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]}
+                                domain={[domain[0], domain[1]]} // -1000, 1000
                                 rootStyle={{ position: 'relative', width: '100%' }}
                                 onChange={values => Doc.setDocRangeFilter(this.targetDoc, facetHeader, values)}
                                 values={renderInfoRange!}>
-- 
cgit v1.2.3-70-g09d2


From 68ddebab45946697270c5f291ff9fdd044b6e83d Mon Sep 17 00:00:00 2001
From: eperelm2 <emily_perelman@brown.edu>
Date: Fri, 25 Aug 2023 17:25:22 +0200
Subject: filter - finishing up

---
 src/client/views/FilterPanel.scss | 8 ++++----
 src/client/views/FilterPanel.tsx  | 6 ++++--
 2 files changed, 8 insertions(+), 6 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.scss b/src/client/views/FilterPanel.scss
index 421bce6d6..d6d2956aa 100644
--- a/src/client/views/FilterPanel.scss
+++ b/src/client/views/FilterPanel.scss
@@ -223,10 +223,10 @@
     font-weight: bold;
 }
 
-// .sliderBox-outerDiv {
-//     display: flex;
-//     align-items: center;
-// }
+.sliderBox-outerDiv {
+    display: inline-block;
+    vertical-align: middle;
+}
 
 // .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
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index f1eeb6fa7..11c2fc86c 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -392,9 +392,11 @@ export class FilterPanel extends React.Component<filterProps> {
 
                     return (
                         <>
-                            <div className="sliderBox-outerDiv" style={{ width: '95%', height: 45 }}>
-                                {/* <Checkbox color="primary" onChange={action(() => console.log('on change'))} /> */}
+                            {/* <div className="sliderBox-outerDiv-checkBox" style={{ float: 'left' }}>
+                                <Checkbox color="primary" onChange={action(() => console.log('on change'))} />
+                            </div> */}
 
+                            <div className="sliderBox-outerDiv" style={{ width: '95%', height: 45, float: 'right' }}>
                                 <Slider
                                     mode={2}
                                     step={Math.min(1, 0.1 * (domain[1] - domain[0]))}
-- 
cgit v1.2.3-70-g09d2


From 9d6c7f8100de3a952d20ad41ab20872737cb909e Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 27 Aug 2023 20:25:55 -0400
Subject: lots of cleanup to streamline import orderings (ie packages should
 not mutually import each other directly or via a chain).  change
 raiseWhenDragged to be keepZWhenDragged and got rid of system wide default.

---
 src/Utils.ts                                       |   2 +-
 src/client/DocServer.ts                            |  15 ++-
 src/client/apis/youtube/YoutubeBox.tsx             |   6 +-
 src/client/documents/Documents.ts                  |  10 +-
 src/client/util/CurrentUserUtils.ts                |  11 +-
 src/client/util/DictationManager.ts                |   2 +-
 src/client/util/DocumentManager.ts                 |  22 +++-
 src/client/util/DragManager.ts                     |  21 +---
 src/client/util/DropConverter.ts                   |  14 +--
 src/client/util/GroupManager.tsx                   |   4 +-
 src/client/util/GroupMemberView.tsx                |   2 +-
 src/client/util/SearchUtil.ts                      | 104 ++++++++++++++-
 src/client/util/SettingsManager.tsx                |  89 ++++++-------
 src/client/util/SharingManager.tsx                 |  10 +-
 src/client/util/reportManager/ReportManager.tsx    |   4 +-
 src/client/views/ContextMenuItem.tsx               |   6 +-
 src/client/views/DocumentDecorations.tsx           |  11 +-
 src/client/views/EditableView.tsx                  |   1 -
 src/client/views/FilterPanel.tsx                   |  23 ++--
 src/client/views/LightboxView.tsx                  |  11 +-
 src/client/views/Main.tsx                          |   6 +-
 src/client/views/MainView.tsx                      |  38 +++---
 src/client/views/PropertiesView.tsx                |  20 +--
 src/client/views/SidebarAnnos.tsx                  |   4 +-
 src/client/views/StyleProvider.tsx                 |  15 ++-
 src/client/views/UndoStack.tsx                     |   2 +-
 .../views/collections/CollectionDockingView.tsx    |   4 +-
 src/client/views/collections/CollectionMenu.tsx    |   2 +-
 .../collections/CollectionStackedTimeline.tsx      |   4 +-
 src/client/views/collections/TabDocView.tsx        |  13 +-
 src/client/views/collections/TreeSort.ts           |   6 +
 src/client/views/collections/TreeView.tsx          |  11 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   4 +-
 src/client/views/linking/LinkPopup.tsx             |   3 +-
 .../views/newlightbox/ButtonMenu/ButtonMenu.tsx    |  19 ++-
 src/client/views/newlightbox/NewLightboxView.tsx   | 139 ++++++++++-----------
 src/client/views/nodes/DocumentView.tsx            |  16 ++-
 src/client/views/nodes/FontIconBox/FontIconBox.tsx |  17 +--
 src/client/views/nodes/LinkDocPreview.tsx          |   6 +-
 src/client/views/nodes/LoadingBox.tsx              |   6 +-
 src/client/views/nodes/ScreenshotBox.tsx           |   6 +-
 src/client/views/nodes/VideoBox.tsx                |   5 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  24 ++--
 .../views/nodes/generativeFill/GenerativeFill.tsx  |  33 +++--
 src/client/views/nodes/trails/PresBox.tsx          |   4 +-
 src/client/views/pdf/AnchorMenu.tsx                |  15 +--
 src/client/views/search/IconBar.tsx                |  28 +++--
 src/client/views/search/SearchBox.tsx              | 110 +---------------
 src/client/views/topbar/TopBar.tsx                 |  16 ++-
 src/client/views/webcam/DashWebRTCVideo.tsx        |   6 +-
 src/fields/Doc.ts                                  |  26 +++-
 src/fields/RichTextUtils.ts                        |  10 +-
 52 files changed, 492 insertions(+), 494 deletions(-)
 create mode 100644 src/client/views/collections/TreeSort.ts

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/Utils.ts b/src/Utils.ts
index 7f83ab8f5..9a94694a2 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -3,10 +3,10 @@ import v5 = require('uuid/v5');
 import { ColorState } from 'react-color';
 import * as rp from 'request-promise';
 import { Socket } from 'socket.io';
+import { DocumentType } from './client/documents/DocumentTypes';
 import { Colors } from './client/views/global/globalEnums';
 import { Message } from './server/Message';
 import Color = require('color');
-import { DocumentType } from './client/documents/DocumentTypes';
 
 export namespace Utils {
     export let CLICK_TIME = 300;
diff --git a/src/client/DocServer.ts b/src/client/DocServer.ts
index 53c7b857a..5fdea131b 100644
--- a/src/client/DocServer.ts
+++ b/src/client/DocServer.ts
@@ -1,6 +1,5 @@
 import { runInAction } from 'mobx';
 import * as rp from 'request-promise';
-import * as io from 'socket.io-client';
 import { Doc, DocListCast, Opt } from '../fields/Doc';
 import { UpdatingFromServer } from '../fields/DocSymbols';
 import { FieldLoader } from '../fields/FieldLoader';
@@ -8,13 +7,13 @@ import { HandleUpdate, Id, Parent } from '../fields/FieldSymbols';
 import { ObjectField } from '../fields/ObjectField';
 import { RefField } from '../fields/RefField';
 import { DocCast, StrCast } from '../fields/Types';
-import MobileInkOverlay from '../mobile/MobileInkOverlay';
+//import MobileInkOverlay from '../mobile/MobileInkOverlay';
 import { emptyFunction, Utils } from '../Utils';
 import { GestureContent, MessageStore, MobileDocumentUploadContent, MobileInkOverlayContent, UpdateMobileInkOverlayPositionContent, YoutubeQueryTypes } from './../server/Message';
 import { DocumentType } from './documents/DocumentTypes';
 import { LinkManager } from './util/LinkManager';
 import { SerializationHelper } from './util/SerializationHelper';
-import { GestureOverlay } from './views/GestureOverlay';
+//import { GestureOverlay } from './views/GestureOverlay';
 
 /**
  * This class encapsulates the transfer and cross-client synchronization of
@@ -189,17 +188,17 @@ export namespace DocServer {
 
         // mobile ink overlay socket events to communicate between mobile view and desktop view
         _socket.addEventListener('receiveGesturePoints', (content: GestureContent) => {
-            MobileInkOverlay.Instance.drawStroke(content);
+            //   MobileInkOverlay.Instance.drawStroke(content);
         });
         _socket.addEventListener('receiveOverlayTrigger', (content: MobileInkOverlayContent) => {
-            GestureOverlay.Instance.enableMobileInkOverlay(content);
-            MobileInkOverlay.Instance.initMobileInkOverlay(content);
+            //GestureOverlay.Instance.enableMobileInkOverlay(content);
+            //    MobileInkOverlay.Instance.initMobileInkOverlay(content);
         });
         _socket.addEventListener('receiveUpdateOverlayPosition', (content: UpdateMobileInkOverlayPositionContent) => {
-            MobileInkOverlay.Instance.updatePosition(content);
+            //   MobileInkOverlay.Instance.updatePosition(content);
         });
         _socket.addEventListener('receiveMobileDocumentUpload', (content: MobileDocumentUploadContent) => {
-            MobileInkOverlay.Instance.uploadDocument(content);
+            //   MobileInkOverlay.Instance.uploadDocument(content);
         });
     }
 
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index 05879a247..2da9927c0 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -6,7 +6,7 @@ import { Cast, NumCast, StrCast } from '../../../fields/Types';
 import { Utils } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { Docs } from '../../documents/Documents';
-import { DocumentDecorations } from '../../views/DocumentDecorations';
+import { DocumentView } from '../../views/nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../../views/nodes/FieldView';
 import '../../views/nodes/WebBox.scss';
 import './YoutubeBox.scss';
@@ -355,9 +355,9 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
             </div>
         );
 
-        const frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
+        const frozen = !this.props.isSelected() || DocumentView.Interacting;
 
-        const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentDecorations.Instance.Interacting ? '-interactive' : '');
+        const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentView.Interacting ? '-interactive' : '');
         return (
             <>
                 <div className={classname}>{content}</div>
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1186446e1..919958b24 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -19,7 +19,6 @@ import { aggregateBounds, OmitKeys, Utils } from '../../Utils';
 import { YoutubeBox } from '../apis/youtube/YoutubeBox';
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
-import { DocumentManager } from '../util/DocumentManager';
 import { DragManager, dropActionType } from '../util/DragManager';
 import { DirectoryImportBox } from '../util/Import & Export/DirectoryImportBox';
 import { FollowLinkScript } from '../util/LinkFollower';
@@ -34,12 +33,12 @@ import { ContextMenuProps } from '../views/ContextMenuItem';
 import { DFLT_IMAGE_NATIVE_DIM } from '../views/global/globalCssVariables.scss';
 import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke } from '../views/InkingStroke';
 import { AudioBox } from '../views/nodes/AudioBox';
-import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { ColorBox } from '../views/nodes/ColorBox';
 import { ComparisonBox } from '../views/nodes/ComparisonBox';
 import { DataVizBox } from '../views/nodes/DataVizBox/DataVizBox';
 import { EquationBox } from '../views/nodes/EquationBox';
 import { FieldViewProps } from '../views/nodes/FieldView';
+import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { FormattedTextBox } from '../views/nodes/formattedText/FormattedTextBox';
 import { FunctionPlotBox } from '../views/nodes/FunctionPlotBox';
 import { ImageBox } from '../views/nodes/ImageBox';
@@ -394,7 +393,7 @@ export class DocumentOptions {
     onPointerUp?: ScriptField;
     _forceActive?: BOOLt = new BoolInfo('flag to handle pointer events when not selected (or otherwise active)');
     _dragOnlyWithinContainer?: BOOLt = new BoolInfo('whether the document should remain in its collection when someone tries to drag and drop it elsewhere');
-    _raiseWhenDragged?: BOOLt = new BoolInfo('whether a document is brought to front when dragged.');
+    _keepZWhenDragged?: BOOLt = new BoolInfo('whether a document should keep its z-order when dragged.');
     childDragAction?: DROPt = new DAInfo('what should happen to the child documents when they are dragged from the collection');
     dropConverter?: ScriptField; // script to run when documents are dropped on this Document.
     dropAction?: DROPt = new DAInfo("what should happen to this document when it's dropped somewhere else");
@@ -1371,7 +1370,7 @@ export namespace DocUtils {
     export let ActiveRecordings: { props: FieldViewProps; getAnchor: (addAsAnnotation: boolean) => Doc }[] = [];
 
     export function MakeLinkToActiveAudio(getSourceDoc: () => Doc | undefined, broadcastEvent = true) {
-        broadcastEvent && runInAction(() => (DocumentManager.Instance.RecordingEvent = DocumentManager.Instance.RecordingEvent + 1));
+        broadcastEvent && runInAction(() => (Doc.RecordingEvent = Doc.RecordingEvent + 1));
         return DocUtils.ActiveRecordings.map(audio => {
             const sourceDoc = getSourceDoc();
             return sourceDoc && DocUtils.MakeLink(sourceDoc, audio.getAnchor(true) || audio.props.Document, { link_displayLine: false, link_relationship: 'recording annotation:linked recording', link_description: 'recording timeline' });
@@ -1380,7 +1379,6 @@ export namespace DocUtils {
 
     export function MakeLink(source: Doc, target: Doc, linkSettings: { link_relationship?: string; link_description?: string; link_displayLine?: boolean }, id?: string, showPopup?: number[]) {
         if (!linkSettings.link_relationship) linkSettings.link_relationship = target.type === DocumentType.RTF ? 'Commentary:Comments On' : 'link';
-        const sv = DocumentManager.Instance.getDocumentView(source);
         if (target.doc === Doc.UserDoc()) return undefined;
 
         const makeLink = action((linkDoc: Doc, showPopup?: number[]) => {
@@ -1840,8 +1838,6 @@ export namespace DocUtils {
             }
             if (overwriteDoc) {
                 Doc.removeCurrentlyLoading(overwriteDoc);
-                // loading doc icons are just labels. so any icon views of loading docs need to be replaced with the proper icon view.
-                DocumentManager.Instance.getAllDocumentViews(overwriteDoc).forEach(dv => StrCast(dv.rootDoc.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()));
             }
             generatedDocuments.push(doc);
         }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ea995e4af..d52e389d6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -18,7 +18,6 @@ import { CollectionViewType, DocumentType } from "../documents/DocumentTypes";
 import { TreeViewType } from "../views/collections/CollectionTreeView";
 import { DashboardView } from "../views/DashboardView";
 import { Colors } from "../views/global/globalEnums";
-import { MainView } from "../views/MainView";
 import { OpenWhere } from "../views/nodes/DocumentView";
 import { ButtonType } from "../views/nodes/FontIconBox/FontIconBox";
 import { ImportElementBox } from "../views/nodes/importBox/ImportElementBox";
@@ -621,9 +620,9 @@ export class CurrentUserUtils {
 
     static freeTools(): Button[] {
         return [
-            { title: "Bottom",  icon: "arrows-down-to-line",toolTip: "Make doc topmost",                                   btnType: ButtonType.ClickButton,  expertMode: false, funcs: {}, scripts: { onClick: 'sendToBack()'}}, // Only when floating document is selected in freeform
-            { title: "Top",     icon: "arrows-up-to-line",  toolTip: "Make doc bottommost",                                btnType: ButtonType.ClickButton,  expertMode: false, funcs: {}, scripts: { onClick: 'bringToFront()'}}, // Only when floating document is selected in freeform
-            { title: "Z order", icon: "z",                  toolTip: "Bring Forward on Drag (double click to set for all)",waitForDoubleClickToClick:true, btnType: ButtonType.ToggleButton, expertMode: false, funcs: {}, scripts: { onClick: 'toggleRaiseOnDrag(false, _readOnly_)', onDoubleClick:`{ return toggleRaiseOnDrag(true, _readOnly_)`}}, // Only when floating document is selected in freeform
+            { title: "Bottom",  icon: "arrows-down-to-line",toolTip: "Make doc topmost",     btnType: ButtonType.ClickButton,  expertMode: false, funcs: {}, scripts: { onClick: 'sendToBack()'}}, // Only when floating document is selected in freeform
+            { title: "Top",     icon: "arrows-up-to-line",  toolTip: "Make doc bottommost",  btnType: ButtonType.ClickButton,  expertMode: false, funcs: {}, scripts: { onClick: 'bringToFront()'}}, // Only when floating document is selected in freeform
+            { title: "Z order", icon: "z",                  toolTip: "Keep Z order on Drag", btnType: ButtonType.ToggleButton, expertMode: false, funcs: {}, scripts: { onClick: '{ return toggleRaiseOnDrag(_readOnly_);}'}}, // Only when floating document is selected in freeform
         ]
     }
     static viewTools(): Button[] {
@@ -841,7 +840,6 @@ export class CurrentUserUtils {
         doc.isSystem ?? (doc.isSystem = true);
         doc.title ?? (doc.title = Doc.CurrentUserEmail);
         Doc.noviceMode ?? (Doc.noviceMode = true);
-        doc._raiseWhenDragged ?? (doc._raiseWhenDragged = true);
         doc._showLabel ?? (doc._showLabel = true);
         doc.textAlign ?? (doc.textAlign = "left");
         doc.activeTool = InkTool.None;
@@ -996,8 +994,5 @@ export class CurrentUserUtils {
 ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs");
 ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode");
 ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering");
-ScriptingGlobals.add(function createNewPresentation() { return MainView.Instance.createNewPresentation(); }, "creates a new presentation when called");
-ScriptingGlobals.add(function openPresentation(pres:Doc) { return MainView.Instance.openPresentation(pres); }, "creates a new presentation when called");
-ScriptingGlobals.add(function createNewFolder() { return MainView.Instance.createNewFolder(); }, "creates a new folder in myFiles when called");
 ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar");
 ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; });
\ No newline at end of file
diff --git a/src/client/util/DictationManager.ts b/src/client/util/DictationManager.ts
index 717473aa1..0fd7e840c 100644
--- a/src/client/util/DictationManager.ts
+++ b/src/client/util/DictationManager.ts
@@ -11,7 +11,7 @@ import { Utils } from '../../Utils';
 import { Docs } from '../documents/Documents';
 import { DocumentType } from '../documents/DocumentTypes';
 import { DictationOverlay } from '../views/DictationOverlay';
-import { DocumentView, OpenWhere, OpenWhereMod } from '../views/nodes/DocumentView';
+import { DocumentView, OpenWhere } from '../views/nodes/DocumentView';
 import { SelectionManager } from './SelectionManager';
 import { UndoManager } from './UndoManager';
 
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 5b627c2f3..c2827dac7 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -1,4 +1,4 @@
-import { action, computed, observable, ObservableSet } from 'mobx';
+import { action, computed, observable, ObservableSet, observe, reaction } from 'mobx';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
 import { AclAdmin, AclEdit, Animation } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
@@ -23,7 +23,6 @@ export class DocumentManager {
     //global holds all of the nodes (regardless of which collection they're in)
     @observable _documentViews = new Set<DocumentView>();
     @observable public LinkAnchorBoxViews: DocumentView[] = [];
-    @observable public RecordingEvent = 0;
     @observable public LinkedDocumentViews: { a: DocumentView; b: DocumentView; l: Doc }[] = [];
     @computed public get DocumentViews() {
         return Array.from(this._documentViews).filter(view => !(view.ComponentView instanceof KeyValueBox) && (!LightboxView.LightboxDoc || LightboxView.IsLightboxDocView(view.docViewPath)));
@@ -41,7 +40,22 @@ export class DocumentManager {
     }
 
     //private constructor so no other class can create a nodemanager
-    private constructor() {}
+    private constructor() {
+        if (!Doc.CurrentlyLoading) Doc.CurrentlyLoading = [];
+        observe(Doc.CurrentlyLoading, change => {
+            // watch CurrentlyLoading-- when something is loaded, it's removed from the list and we have to update its icon if it were iconified since LoadingBox icons are different than the media they become
+            switch (change.type as any) {
+                case 'update':
+                    break;
+                case 'remove':
+                    // DocumentManager.Instance.getAllDocumentViews(change as any).forEach(dv => StrCast(dv.rootDoc.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify()));
+                    break;
+                case 'splice':
+                    (change as any).removed.forEach((doc: Doc) => DocumentManager.Instance.getAllDocumentViews(doc).forEach(dv => StrCast(dv.rootDoc.layout_fieldKey) === 'layout_icon' && dv.iconify(() => dv.iconify())));
+                    break;
+            }
+        });
+    }
 
     private _viewRenderedCbs: { doc: Doc; func: (dv: DocumentView) => any }[] = [];
     public AddViewRenderedCb = (doc: Opt<Doc>, func: (dv: DocumentView) => any) => {
@@ -310,7 +324,7 @@ export class DocumentManager {
         if (viewSpec && docView) {
             if (docView.ComponentView instanceof FormattedTextBox) docView.ComponentView?.focus(viewSpec, options);
             PresBox.restoreTargetDocView(docView, viewSpec, options.zoomTime ?? 500);
-            Doc.linkFollowHighlight(viewSpec ? [docView.rootDoc, viewSpec]: docView.rootDoc, undefined, options.effect);
+            Doc.linkFollowHighlight(viewSpec ? [docView.rootDoc, viewSpec] : docView.rootDoc, undefined, options.effect);
             if (options.playAudio) DocumentManager.playAudioAnno(docView.rootDoc);
             if (options.toggleTarget && (!options.didMove || docView.rootDoc.hidden)) docView.rootDoc.hidden = !docView.rootDoc.hidden;
             if (options.effect) docView.rootDoc[Animation] = options.effect;
diff --git a/src/client/util/DragManager.ts b/src/client/util/DragManager.ts
index 489c9df4a..05da5ebed 100644
--- a/src/client/util/DragManager.ts
+++ b/src/client/util/DragManager.ts
@@ -61,12 +61,6 @@ export namespace DragManager {
     export let StartWindowDrag: Opt<(e: { pageX: number; pageY: number }, dragDocs: Doc[], finishDrag?: (aborted: boolean) => void) => void>;
     export let CompleteWindowDrag: Opt<(aborted: boolean) => void>;
 
-    export function GetRaiseWhenDragged() {
-        return BoolCast(Doc.UserDoc()._raiseWhenDragged);
-    }
-    export function SetRaiseWhenDragged(val: boolean) {
-        Doc.UserDoc()._raiseWhenDragged = val;
-    }
     export function Root() {
         const root = document.getElementById('root');
         if (!root) {
@@ -605,18 +599,9 @@ export namespace DragManager {
     }
 }
 
-ScriptingGlobals.add(function toggleRaiseOnDrag(forAllDocs: boolean, readOnly?: boolean) {
+ScriptingGlobals.add(function toggleRaiseOnDrag(readOnly?: boolean) {
     if (readOnly) {
-        if (SelectionManager.Views().length)
-            return SelectionManager.Views().some(dv => dv.rootDoc.raiseWhenDragged)
-                ? Colors.MEDIUM_BLUE
-                : SelectionManager.Views().some(dv => dv.rootDoc.raiseWhenDragged === false)
-                ? 'transparent'
-                : DragManager.GetRaiseWhenDragged()
-                ? Colors.MEDIUM_BLUE_ALT
-                : Colors.LIGHT_BLUE;
-        return DragManager.GetRaiseWhenDragged() ? Colors.MEDIUM_BLUE_ALT : 'transparent';
+        return SelectionManager.Views().some(dv => dv.rootDoc.keepZWhenDragged);
     }
-    if (!forAllDocs) SelectionManager.Views().map(dv => (dv.rootDoc.raiseWhenDragged ? (dv.rootDoc.raiseWhenDragged = undefined) : dv.rootDoc.raiseWhenDragged === false ? (dv.rootDoc.raiseWhenDragged = true) : (dv.rootDoc.raiseWhenDragged = false)));
-    else DragManager.SetRaiseWhenDragged(!DragManager.GetRaiseWhenDragged());
+    SelectionManager.Views().map(dv => (dv.rootDoc.keepZWhenDragged = !dv.rootDoc.keepZWhenDragged));
 });
diff --git a/src/client/util/DropConverter.ts b/src/client/util/DropConverter.ts
index f235be192..dbdf580cd 100644
--- a/src/client/util/DropConverter.ts
+++ b/src/client/util/DropConverter.ts
@@ -1,15 +1,15 @@
-import { DragManager } from './DragManager';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { DocumentType } from '../documents/DocumentTypes';
 import { ObjectField } from '../../fields/ObjectField';
-import { StrCast, Cast } from '../../fields/Types';
-import { Docs } from '../documents/Documents';
-import { ScriptField, ComputedField } from '../../fields/ScriptField';
 import { RichTextField } from '../../fields/RichTextField';
-import { ImageField } from '../../fields/URLField';
-import { ScriptingGlobals } from './ScriptingGlobals';
 import { listSpec } from '../../fields/Schema';
+import { ScriptField } from '../../fields/ScriptField';
+import { Cast, StrCast } from '../../fields/Types';
+import { ImageField } from '../../fields/URLField';
+import { Docs } from '../documents/Documents';
+import { DocumentType } from '../documents/DocumentTypes';
 import { ButtonType } from '../views/nodes/FontIconBox/FontIconBox';
+import { DragManager } from './DragManager';
+import { ScriptingGlobals } from './ScriptingGlobals';
 
 export function MakeTemplate(doc: Doc, first: boolean = true, rename: Opt<string> = undefined, templateField: string = '') {
     if (templateField) Doc.GetProto(doc).title = templateField; /// the title determines which field is being templated
diff --git a/src/client/util/GroupManager.tsx b/src/client/util/GroupManager.tsx
index c79894032..8973306bf 100644
--- a/src/client/util/GroupManager.tsx
+++ b/src/client/util/GroupManager.tsx
@@ -282,7 +282,7 @@ export class GroupManager extends React.Component<{}> {
      */
     private get groupCreationModal() {
         const contents = (
-            <div className="group-create" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
+            <div className="group-create" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <div className="group-heading" style={{ marginBottom: 0 }}>
                     <p>
                         <b>New Group</b>
@@ -367,7 +367,7 @@ export class GroupManager extends React.Component<{}> {
         const groups = this.groupSort === 'ascending' ? this.allGroups.sort(sortGroups) : this.groupSort === 'descending' ? this.allGroups.sort(sortGroups).reverse() : this.allGroups;
 
         return (
-            <div className="group-interface" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
+            <div className="group-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 {this.groupCreationModal}
                 {this.currentGroup ? <GroupMemberView group={this.currentGroup} onCloseButtonClick={action(() => (this.currentGroup = undefined))} /> : null}
                 <div className="group-heading">
diff --git a/src/client/util/GroupMemberView.tsx b/src/client/util/GroupMemberView.tsx
index 535d8ccc2..7de0f336f 100644
--- a/src/client/util/GroupMemberView.tsx
+++ b/src/client/util/GroupMemberView.tsx
@@ -29,7 +29,7 @@ export class GroupMemberView extends React.Component<GroupMemberViewProps> {
         const hasEditAccess = GroupManager.Instance.hasEditAccess(this.props.group);
 
         return !this.props.group ? null : (
-            <div className="editing-interface" style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
+            <div className="editing-interface" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                 <div className="editing-header">
                     <input
                         className="group-title"
diff --git a/src/client/util/SearchUtil.ts b/src/client/util/SearchUtil.ts
index d154c48a4..64aa7ba9b 100644
--- a/src/client/util/SearchUtil.ts
+++ b/src/client/util/SearchUtil.ts
@@ -1,13 +1,115 @@
 import * as rp from 'request-promise';
 import { DocServer } from '../DocServer';
-import { Doc } from '../../fields/Doc';
+import { Doc, DocListCast, Field, Opt } from '../../fields/Doc';
 import { Id } from '../../fields/FieldSymbols';
 import { Utils } from '../../Utils';
 import { DocumentType } from '../documents/DocumentTypes';
+import { StrCast } from '../../fields/Types';
 
 export namespace SearchUtil {
     export type HighlightingResult = { [id: string]: { [key: string]: string[] } };
 
+    export function SearchCollection(rootDoc: Opt<Doc>, query: string) {
+        const blockedTypes = [DocumentType.PRESELEMENT, DocumentType.CONFIG, DocumentType.KVP, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
+        const blockedKeys = [
+            'x',
+            'y',
+            'proto',
+            'width',
+            'layout_autoHeight',
+            'acl-Override',
+            'acl-Guest',
+            'embedContainer',
+            'zIndex',
+            'height',
+            'text_scrollHeight',
+            'text_height',
+            'cloneFieldFilter',
+            'isDataDoc',
+            'text_annotations',
+            'dragFactory_count',
+            'text_noTemplate',
+            'proto_embeddings',
+            'isSystem',
+            'layout_fieldKey',
+            'isBaseProto',
+            'xMargin',
+            'yMargin',
+            'links',
+            'layout',
+            'layout_keyValue',
+            'layout_fitWidth',
+            'type_collection',
+            'title_custom',
+            'freeform_panX',
+            'freeform_panY',
+            'freeform_scale',
+        ];
+        query = query.toLowerCase();
+
+        const results = new Map<Doc, string[]>();
+        if (rootDoc) {
+            const docs = DocListCast(rootDoc[Doc.LayoutFieldKey(rootDoc)]);
+            const docIDs: String[] = [];
+            SearchUtil.foreachRecursiveDoc(docs, (depth: number, doc: Doc) => {
+                const dtype = StrCast(doc.type) as DocumentType;
+                if (dtype && !blockedTypes.includes(dtype) && !docIDs.includes(doc[Id]) && depth >= 0) {
+                    const hlights = new Set<string>();
+                    SearchUtil.documentKeys(doc).forEach(
+                        key =>
+                            Field.toString(doc[key] as Field)
+                                .toLowerCase()
+                                .includes(query) && hlights.add(key)
+                    );
+                    blockedKeys.forEach(key => hlights.delete(key));
+
+                    if (Array.from(hlights.keys()).length > 0) {
+                        results.set(doc, Array.from(hlights.keys()));
+                    }
+                }
+                docIDs.push(doc[Id]);
+            });
+        }
+        return results;
+    }
+    /**
+     * @param {Doc} doc - doc for which keys are returned
+     *
+     * This method returns a list of a document doc's keys.
+     */
+    export function documentKeys(doc: Doc) {
+        const keys: { [key: string]: boolean } = {};
+        Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false)));
+        return Array.from(Object.keys(keys));
+    }
+
+    /**
+     * @param {Doc[]} docs - docs to be searched through recursively
+     * @param {number, Doc => void} func - function to be called on each doc
+     *
+     * This method iterates through an array of docs and all docs within those docs, calling
+     * the function func on each doc.
+     */
+    export function foreachRecursiveDoc(docs: Doc[], func: (depth: number, doc: Doc) => void) {
+        let newarray: Doc[] = [];
+        var depth = 0;
+        const visited: Doc[] = [];
+        while (docs.length > 0) {
+            newarray = [];
+            docs.filter(d => d && !visited.includes(d)).forEach(d => {
+                visited.push(d);
+                const fieldKey = Doc.LayoutFieldKey(d);
+                const annos = !Field.toString(Doc.LayoutField(d) as Field).includes('CollectionView');
+                const data = d[annos ? fieldKey + '_annotations' : fieldKey];
+                data && newarray.push(...DocListCast(data));
+                const sidebar = d[fieldKey + '_sidebar'];
+                sidebar && newarray.push(...DocListCast(sidebar));
+                func(depth, d);
+            });
+            docs = newarray;
+            depth++;
+        }
+    }
     export interface IdSearchResult {
         ids: string[];
         lines: string[][];
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index bb370e1a4..720badd40 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -13,7 +13,6 @@ import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
 import { MainViewModal } from '../views/MainViewModal';
-import { FontIconBox } from '../views/nodes/FontIconBox/FontIconBox';
 import { GroupManager } from './GroupManager';
 import './SettingsManager.scss';
 import { undoBatch } from './UndoManager';
@@ -67,15 +66,15 @@ export class SettingsManager extends React.Component<{}> {
         }
     };
 
-    @computed get userColor() {
+    @computed public static get userColor() {
         return StrCast(Doc.UserDoc().userColor);
     }
 
-    @computed get userVariantColor() {
+    @computed public static get userVariantColor() {
         return StrCast(Doc.UserDoc().userVariantColor);
     }
 
-    @computed get userBackgroundColor() {
+    @computed public static get userBackgroundColor() {
         return StrCast(Doc.UserDoc().userBackgroundColor);
     }
 
@@ -150,35 +149,35 @@ export class SettingsManager extends React.Component<{}> {
                         val: scheme,
                     }))}
                     dropdownType={DropdownType.SELECT}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                     fillWidth
                 />
                 {userTheme === ColorScheme.Custom && (
                     <Group formLabel="Custom Theme">
                         <ColorPicker
                             tooltip={'User Color'} //
-                            color={this.userColor}
+                            color={SettingsManager.userColor}
                             type={Type.SEC}
                             icon={<FaFillDrip />}
-                            selectedColor={this.userColor}
+                            selectedColor={SettingsManager.userColor}
                             setSelectedColor={this.switchUserColor}
                             setFinalColor={this.switchUserColor}
                         />
                         <ColorPicker
                             tooltip={'User Background Color'}
-                            color={this.userColor}
+                            color={SettingsManager.userColor}
                             type={Type.SEC}
                             icon={<FaPalette />}
-                            selectedColor={this.userBackgroundColor}
+                            selectedColor={SettingsManager.userBackgroundColor}
                             setSelectedColor={this.switchUserBackgroundColor}
                             setFinalColor={this.switchUserBackgroundColor}
                         />
                         <ColorPicker
                             tooltip={'User Variant Color'}
-                            color={this.userColor}
+                            color={SettingsManager.userColor}
                             type={Type.SEC}
                             icon={<FaPalette />}
-                            selectedColor={this.userVariantColor}
+                            selectedColor={SettingsManager.userVariantColor}
                             setSelectedColor={this.switchUserVariantColor}
                             setFinalColor={this.switchUserVariantColor}
                         />
@@ -198,7 +197,7 @@ export class SettingsManager extends React.Component<{}> {
                     onClick={e => (Doc.UserDoc().layout_showTitle = Doc.UserDoc().layout_showTitle ? undefined : 'author_date')}
                     toggleStatus={Doc.UserDoc().layout_showTitle !== undefined}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Show Full Toolbar'}
@@ -207,25 +206,25 @@ export class SettingsManager extends React.Component<{}> {
                     onClick={e => (Doc.UserDoc()['documentLinksButton-fullMenu'] = !Doc.UserDoc()['documentLinksButton-fullMenu'])}
                     toggleStatus={BoolCast(Doc.UserDoc()['documentLinksButton-fullMenu'])}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Show Button Labels'}
                     formLabelPlacement={'right'}
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => FontIconBox.SetShowLabels(!FontIconBox.GetShowLabels())}
-                    toggleStatus={FontIconBox.GetShowLabels()}
+                    onClick={e => Doc.SetShowIconLabels(!Doc.GetShowIconLabels())}
+                    toggleStatus={Doc.GetShowIconLabels()}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Recognize Ink Gestures'}
                     formLabelPlacement={'right'}
                     toggleType={ToggleType.SWITCH}
-                    onClick={e => FontIconBox.SetRecognizeGestures(!FontIconBox.GetRecognizeGestures())}
-                    toggleStatus={FontIconBox.GetRecognizeGestures()}
+                    onClick={e => Doc.SetRecognizeGestures(!Doc.GetRecognizeGestures())}
+                    toggleStatus={Doc.GetRecognizeGestures()}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Hide Labels In Ink Shapes'}
@@ -234,7 +233,7 @@ export class SettingsManager extends React.Component<{}> {
                     onClick={e => (Doc.UserDoc().activeInkHideTextLabels = !Doc.UserDoc().activeInkHideTextLabels)}
                     toggleStatus={BoolCast(Doc.UserDoc().activeInkHideTextLabels)}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Open Ink Docs in Lightbox'}
@@ -243,7 +242,7 @@ export class SettingsManager extends React.Component<{}> {
                     onClick={e => (Doc.UserDoc().openInkInLightbox = !Doc.UserDoc().openInkInLightbox)}
                     toggleStatus={BoolCast(Doc.UserDoc().openInkInLightbox)}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
                 <Toggle
                     formLabel={'Show Link Lines'}
@@ -252,7 +251,7 @@ export class SettingsManager extends React.Component<{}> {
                     onClick={e => (Doc.UserDoc().showLinkLines = !Doc.UserDoc().showLinkLines)}
                     toggleStatus={BoolCast(Doc.UserDoc().showLinkLines)}
                     size={Size.XSMALL}
-                    color={this.userColor}
+                    color={SettingsManager.userColor}
                 />
             </div>
         );
@@ -284,7 +283,7 @@ export class SettingsManager extends React.Component<{}> {
                     <div className="tab-column-content">
                         {/* <NumberInput/> */}
                         <Group formLabel={'Default Font'}>
-                            <NumberDropdown color={this.userColor} numberDropdownType={'input'} min={0} max={50} step={2} type={Type.TERT} number={0} unit={'px'} setNumber={() => {}} />
+                            <NumberDropdown color={SettingsManager.userColor} numberDropdownType={'input'} min={0} max={50} step={2} type={Type.TERT} number={0} unit={'px'} setNumber={() => {}} />
                             <Dropdown
                                 items={fontFamilies.map(val => {
                                     return {
@@ -301,7 +300,7 @@ export class SettingsManager extends React.Component<{}> {
                                 setSelectedVal={val => {
                                     this.changeFontFamily(val as string);
                                 }}
-                                color={this.userColor}
+                                color={SettingsManager.userColor}
                                 fillWidth
                             />
                         </Group>
@@ -329,12 +328,12 @@ export class SettingsManager extends React.Component<{}> {
     @computed get passwordContent() {
         return (
             <div className="password-content">
-                <EditableText placeholder="Current password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
-                <EditableText placeholder="New password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
-                <EditableText placeholder="Confirm new password" type={Type.SEC} color={this.userColor} val={''} setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
+                <EditableText placeholder="Current password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'curr')} fillWidth password />
+                <EditableText placeholder="New password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'new')} fillWidth password />
+                <EditableText placeholder="Confirm new password" type={Type.SEC} color={SettingsManager.userColor} val={''} setVal={val => this.changeVal(val as string, 'conf')} fillWidth password />
                 {!this.passwordResultText ? null : <div className={`${this.passwordResultText.startsWith('Error') ? 'error' : 'success'}-text`}>{this.passwordResultText}</div>}
-                <Button type={Type.SEC} text={'Forgot Password'} color={this.userColor} />
-                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={this.userColor} />
+                <Button type={Type.SEC} text={'Forgot Password'} color={SettingsManager.userColor} />
+                <Button type={Type.TERT} text={'Submit'} onClick={this.changePassword} color={SettingsManager.userColor} />
             </div>
         );
     }
@@ -394,10 +393,10 @@ export class SettingsManager extends React.Component<{}> {
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
                             placement="bottom-start"
-                            color={this.userColor}
+                            color={SettingsManager.userColor}
                             fillWidth
                         />
-                        <Toggle formLabel={'Playground Mode'} toggleType={ToggleType.SWITCH} toggleStatus={this.playgroundMode} onClick={this.playgroundModeToggle} color={this.userColor} />
+                        <Toggle formLabel={'Playground Mode'} toggleType={ToggleType.SWITCH} toggleStatus={this.playgroundMode} onClick={this.playgroundModeToggle} color={SettingsManager.userColor} />
                     </div>
                     <div className="tab-column-title" style={{ marginTop: 20, marginBottom: 10 }}>
                         Freeform Navigation
@@ -422,15 +421,21 @@ export class SettingsManager extends React.Component<{}> {
                             dropdownType={DropdownType.SELECT}
                             type={Type.TERT}
                             placement="bottom-start"
-                            color={this.userColor}
+                            color={SettingsManager.userColor}
                         />
                     </div>
                 </div>
                 <div className="tab-column">
                     <div className="tab-column-title">Permissions</div>
                     <div className="tab-column-content">
-                        <Button text={'Manage Groups'} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={this.userColor} />
-                        <Toggle toggleType={ToggleType.SWITCH} formLabel={'Default access private'} color={this.userColor} toggleStatus={BoolCast(Doc.defaultAclPrivate)} onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))} />
+                        <Button text={'Manage Groups'} type={Type.TERT} onClick={() => GroupManager.Instance?.open()} color={SettingsManager.userColor} />
+                        <Toggle
+                            toggleType={ToggleType.SWITCH}
+                            formLabel={'Default access private'}
+                            color={SettingsManager.userColor}
+                            toggleStatus={BoolCast(Doc.defaultAclPrivate)}
+                            onClick={action(() => (Doc.defaultAclPrivate = !Doc.defaultAclPrivate))}
+                        />
                     </div>
                 </div>
             </div>
@@ -449,7 +454,7 @@ export class SettingsManager extends React.Component<{}> {
         ];
         return (
             <div className="settings-interface">
-                <div className="settings-panel" style={{ background: this.userColor }}>
+                <div className="settings-panel" style={{ background: SettingsManager.userColor }}>
                     <div className="settings-tabs">
                         {tabs.map(tab => {
                             const isActive = this.activeTab === tab.title;
@@ -457,8 +462,8 @@ export class SettingsManager extends React.Component<{}> {
                                 <div
                                     key={tab.title}
                                     style={{
-                                        background: isActive ? this.userBackgroundColor : this.userColor,
-                                        color: isActive ? this.userColor : this.userBackgroundColor,
+                                        background: isActive ? SettingsManager.userBackgroundColor : SettingsManager.userColor,
+                                        color: isActive ? SettingsManager.userColor : SettingsManager.userBackgroundColor,
                                     }}
                                     className={'tab-control ' + (isActive ? 'active' : 'inactive')}
                                     onClick={action(() => (this.activeTab = tab.title))}>
@@ -469,19 +474,19 @@ export class SettingsManager extends React.Component<{}> {
                     </div>
 
                     <div className="settings-user">
-                        <div style={{ color: this.userBackgroundColor }}>{DashVersion}</div>
-                        <div className="settings-username" style={{ color: this.userBackgroundColor }}>
+                        <div style={{ color: SettingsManager.userBackgroundColor }}>{DashVersion}</div>
+                        <div className="settings-username" style={{ color: SettingsManager.userBackgroundColor }}>
                             {Doc.CurrentUserEmail}
                         </div>
-                        <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={this.userVariantColor} onClick={() => window.location.assign(Utils.prepend('/logout'))} />
+                        <Button text={Doc.GuestDashboard ? 'Exit' : 'Log Out'} type={Type.TERT} color={SettingsManager.userVariantColor} onClick={() => window.location.assign(Utils.prepend('/logout'))} />
                     </div>
                 </div>
 
                 <div className="close-button">
-                    <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={this.userColor} />
+                    <Button icon={<FontAwesomeIcon icon={'times'} size={'lg'} />} onClick={this.close} color={SettingsManager.userColor} />
                 </div>
 
-                <div className="settings-content" style={{ color: this.userColor, background: this.userBackgroundColor }}>
+                <div className="settings-content" style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
                     {tabs.map(tab => (
                         <div key={tab.title} className={'tab-section ' + (this.activeTab === tab.title ? 'active' : 'inactive')}>
                             {tab.ele}
diff --git a/src/client/util/SharingManager.tsx b/src/client/util/SharingManager.tsx
index 81ddeb9e3..9a9097bf7 100644
--- a/src/client/util/SharingManager.tsx
+++ b/src/client/util/SharingManager.tsx
@@ -18,10 +18,10 @@ import { DictationOverlay } from '../views/DictationOverlay';
 import { MainViewModal } from '../views/MainViewModal';
 import { DocumentView } from '../views/nodes/DocumentView';
 import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
-import { SearchBox } from '../views/search/SearchBox';
 import { DocumentManager } from './DocumentManager';
 import { GroupManager, UserOptions } from './GroupManager';
 import { GroupMemberView } from './GroupMemberView';
+import { SearchUtil } from './SearchUtil';
 import { SelectionManager } from './SelectionManager';
 import { SettingsManager } from './SettingsManager';
 import './SharingManager.scss';
@@ -446,7 +446,7 @@ export class SharingManager extends React.Component<{}> {
 
         if (this.myDocAcls) {
             const newDocs: Doc[] = [];
-            SearchBox.foreachRecursiveDoc(docs, (depth, doc) => newDocs.push(doc));
+            SearchUtil.foreachRecursiveDoc(docs, (depth, doc) => newDocs.push(doc));
             docs = newDocs.filter(doc => GetEffectiveAcl(doc) === AclAdmin);
         }
 
@@ -527,10 +527,10 @@ export class SharingManager extends React.Component<{}> {
             const permissions = uniform ? StrCast(targetDoc?.[groupKey]) : '-multiple-';
 
             return !permissions ? null : (
-                <div key={groupKey} className={'container'} style={{ background: SettingsManager.Instance.userBackgroundColor, color: SettingsManager.Instance.userColor }}>
+                <div key={groupKey} className={'container'} style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }}>
                     <div className={'padding'}>{StrCast(group.title)}</div>
                     &nbsp;
-                    {group instanceof Doc ? <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={SettingsManager.Instance.userColor} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> : null}
+                    {group instanceof Doc ? <IconButton icon={<FontAwesomeIcon icon={'info-circle'} />} size={Size.XSMALL} color={SettingsManager.userColor} onClick={action(() => (GroupManager.Instance.currentGroup = group))} /> : null}
                     <div className={'edit-actions'}>
                         {admin || this.myDocAcls ? (
                             <select className={`permissions-dropdown-${permissions}`} value={permissions} onChange={e => this.setInternalGroupSharing(group, e.currentTarget.value)}>
@@ -552,7 +552,7 @@ export class SharingManager extends React.Component<{}> {
                 <div
                     className="sharing-contents"
                     style={{
-                        background: SettingsManager.Instance.userBackgroundColor,
+                        background: SettingsManager.userBackgroundColor,
                         color: StrCast(Doc.UserDoc().userColor),
                     }}>
                     <p className="share-title" style={{ color: StrCast(Doc.UserDoc().userColor) }}>
diff --git a/src/client/util/reportManager/ReportManager.tsx b/src/client/util/reportManager/ReportManager.tsx
index 3cd2d47a0..6a236face 100644
--- a/src/client/util/reportManager/ReportManager.tsx
+++ b/src/client/util/reportManager/ReportManager.tsx
@@ -211,11 +211,11 @@ export class ReportManager extends React.Component<{}> {
      * @returns the component that dispays all issues
      */
     private viewIssuesComponent = () => {
-        const darkMode = isDarkMode(SettingsManager.Instance.userBackgroundColor);
+        const darkMode = isDarkMode(SettingsManager.userBackgroundColor);
         const colors = darkMode ? darkColors : lightColors;
 
         return (
-            <div className="view-issues" style={{ backgroundColor: SettingsManager.Instance.userBackgroundColor, color: colors.text }}>
+            <div className="view-issues" style={{ backgroundColor: SettingsManager.userBackgroundColor, color: colors.text }}>
                 <div className="left" style={{ display: this.rightExpanded ? 'none' : 'flex' }}>
                     <div className="report-header">
                         <h2 style={{ color: colors.text }}>Open Issues</h2>
diff --git a/src/client/views/ContextMenuItem.tsx b/src/client/views/ContextMenuItem.tsx
index b53379435..c2cbca3e1 100644
--- a/src/client/views/ContextMenuItem.tsx
+++ b/src/client/views/ContextMenuItem.tsx
@@ -96,7 +96,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                     <div
                         className={`contextMenu-item-background`}
                         style={{
-                            background: SettingsManager.Instance.userColor,
+                            background: SettingsManager.userColor,
                         }}
                     />
                 </div>
@@ -112,7 +112,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                     style={{
                         marginLeft: window.innerHeight - this._overPosX - 50 > 0 ? '90%' : '20%',
                         marginTop,
-                        background: SettingsManager.Instance.userBackgroundColor,
+                        background: SettingsManager.userBackgroundColor,
                     }}>
                     {this._items.map(prop => (
                         <ContextMenuItem {...prop} key={prop.description} closeMenu={this.props.closeMenu} />
@@ -146,7 +146,7 @@ export class ContextMenuItem extends React.Component<ContextMenuProps & { select
                     <div
                         className={`contextMenu-item-background`}
                         style={{
-                            background: SettingsManager.Instance.userColor,
+                            background: SettingsManager.userColor,
                         }}
                     />
                     {submenu}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 90425f264..3018dad79 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -57,7 +57,6 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @observable private _editingTitle = false;
     @observable private _hidden = false;
     @observable public AddToSelection = false; // if Shift is pressed, then this should be set so that clicking on the selection background is ignored so overlapped documents can be added to the selection set.
-    @observable public Interacting = false;
     @observable public pushIcon: IconProp = 'arrow-alt-circle-up';
     @observable public pullIcon: IconProp = 'arrow-alt-circle-down';
     @observable public pullColor: string = 'white';
@@ -330,7 +329,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
      */
     @action
     onRadiusDown = (e: React.PointerEvent): void => {
-        this._isRounding = DocumentDecorations.Instance.Interacting = true;
+        this._isRounding = DocumentView.Interacting = true;
         this._resizeUndo = UndoManager.StartBatch('DocDecs set radius');
         // Call util move event function
         setupMoveUpEvents(
@@ -353,7 +352,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                 return false;
             }, // moveEvent
             action(e => {
-                DocumentDecorations.Instance.Interacting = this._isRounding = false;
+                DocumentView.Interacting = this._isRounding = false;
                 this._resizeUndo?.end();
             }), // upEvent
             e => {}, // clickEvent,
@@ -478,7 +477,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @action
     onPointerDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onPointerMove, this.onPointerUp, emptyFunction);
-        this.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
+        DocumentView.Interacting = true; // turns off pointer events on things like youtube videos and web pages so that dragging doesn't get "stuck" when cursor moves over them
         this._resizeHdlId = e.currentTarget.className;
         const bounds = e.currentTarget.getBoundingClientRect();
         this._offX = this._resizeHdlId.toLowerCase().includes('left') ? bounds.right - e.clientX : bounds.left - e.clientX;
@@ -688,7 +687,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
     @action
     onPointerUp = (e: PointerEvent): void => {
         this._resizeHdlId = '';
-        this.Interacting = false;
+        DocumentView.Interacting = false;
         this._resizeUndo?.end();
         SnappingManager.clearSnapLines();
 
@@ -895,7 +894,7 @@ export class DocumentDecorations extends React.Component<{ PanelWidth: number; P
                         height: bounds.b - bounds.y + this._resizeBorderWidth + 'px',
                         left: bounds.x - this._resizeBorderWidth / 2,
                         top: bounds.y - this._resizeBorderWidth / 2,
-                        pointerEvents: DocumentDecorations.Instance.AddToSelection || this.Interacting ? 'none' : 'all',
+                        pointerEvents: DocumentDecorations.Instance.AddToSelection || DocumentView.Interacting ? 'none' : 'all',
                         display: SelectionManager.Views().length <= 1 || hideDecorations ? 'none' : undefined,
                     }}
                     onPointerDown={this.onBackgroundDown}
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index d60617020..147921596 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -6,7 +6,6 @@ import { ObjectField } from '../../fields/ObjectField';
 import './EditableView.scss';
 import { DocumentIconContainer } from './nodes/DocumentIcon';
 import { OverlayView } from './OverlayView';
-import { EditableText } from 'browndash-components';
 
 export interface EditableProps {
     /**
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 11c2fc86c..b61ff35c7 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -1,23 +1,20 @@
 import React = require('react');
 import { action, computed, observable, ObservableMap } from 'mobx';
 import { observer } from 'mobx-react';
+import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider';
+import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai';
+import { CiCircleRemove } from 'react-icons/ci';
 import Select from 'react-select';
-import { Checkbox, Tooltip } from '@material-ui/core';
 import { Doc, DocListCast, Field, StrListCast } from '../../fields/Doc';
 import { RichTextField } from '../../fields/RichTextField';
-import { StrCast } from '../../fields/Types';
+import { DocumentOptions, FInfo } from '../documents/Documents';
 import { DocumentManager } from '../util/DocumentManager';
 import { UserOptions } from '../util/GroupManager';
+import { SearchUtil } from '../util/SearchUtil';
+import { undoable } from '../util/UndoManager';
 import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
-import { SearchBox } from './search/SearchBox';
-import { undoable } from '../util/UndoManager';
-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, FInfo } from '../documents/Documents';
-import { string32 } from 'pdfjs-dist/types/src/shared/util';
+import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 
 interface filterProps {
     rootDoc: Doc;
@@ -49,7 +46,7 @@ export class FilterPanel extends React.Component<filterProps> {
         const allDocs = new Set<Doc>();
         const targetDoc = this.targetDoc;
         if (targetDoc) {
-            SearchBox.foreachRecursiveDoc([this.targetDoc], (depth, doc) => allDocs.add(doc));
+            SearchUtil.foreachRecursiveDoc([this.targetDoc], (depth, doc) => allDocs.add(doc));
         }
         console.log('this is all Docs' + Array.from(allDocs));
         return Array.from(allDocs);
@@ -62,7 +59,7 @@ export class FilterPanel extends React.Component<filterProps> {
         const noviceFields = [...noviceReqFields, ...noviceLayoutFields];
 
         const keys = new Set<string>(noviceFields);
-        this.allDocs.forEach(doc => SearchBox.documentKeys(doc).filter(key => keys.add(key)));
+        this.allDocs.forEach(doc => SearchUtil.documentKeys(doc).filter(key => keys.add(key)));
         const sortedKeys = Array.from(keys.keys())
             .filter(key => key[0])
             .filter(key => key.indexOf('modificationDate') !== -1 || (key[0] === key[0].toUpperCase() && !key.startsWith('_')) || noviceFields.includes(key) || !Doc.noviceMode)
@@ -236,7 +233,7 @@ export class FilterPanel extends React.Component<filterProps> {
 
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
-        SearchBox.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
+        SearchUtil.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
         const set = new Set<string>([String.fromCharCode(127) + '--undefined--']);
         if (facetHeader === 'tags')
             allCollectionDocs.forEach(child =>
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index afb76b9ac..8f081b321 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -16,7 +16,6 @@ import { CollectionStackedTimeline } from './collections/CollectionStackedTimeli
 import { TabDocView } from './collections/TabDocView';
 import { GestureOverlay } from './GestureOverlay';
 import './LightboxView.scss';
-import { MainView } from './MainView';
 import { DocumentView, OpenWhere, OpenWhereMod } from './nodes/DocumentView';
 import { DefaultStyleProvider, wavyBorderPath } from './StyleProvider';
 
@@ -61,7 +60,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
             this._childFilters && (this._childFilters.length = 0);
             this._future = this._history = [];
             Doc.ActiveTool = InkTool.None;
-            MainView.Instance._exploreMode = false;
+            DocumentView.ExploreMode = false;
         } else {
             const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
@@ -270,7 +269,7 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                             addDocTab={this.addDocTab}
                             pinToPres={TabDocView.PinDoc}
                             bringToFront={emptyFunction}
-                            onBrowseClick={MainView.Instance.exploreMode}
+                            onBrowseClick={DocumentView.exploreMode}
                             focus={emptyFunction}
                         />
                     </GestureOverlay>
@@ -335,12 +334,12 @@ export class LightboxView extends React.Component<LightboxViewProps> {
                 <div
                     className="lightboxView-exploreBtn"
                     title="toggle explore mode to navigate among documents only"
-                    style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                    style={{ background: DocumentView.ExploreMode ? 'white' : undefined }}
                     onClick={action(e => {
                         e.stopPropagation();
-                        MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                        DocumentView.ExploreMode = !DocumentView.ExploreMode;
                     })}>
-                    <FontAwesomeIcon color={MainView.Instance._exploreMode ? 'black' : 'white'} icon={'globe-americas'} size="2x" />
+                    <FontAwesomeIcon color={DocumentView.ExploreMode ? 'black' : 'white'} icon={'globe-americas'} size="2x" />
                 </div>
             </div>
         );
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6dd1d53ee..a04309d0c 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -2,18 +2,18 @@
 //     (module as any).hot.accept();
 // }
 
+import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
 import * as React from 'react';
 import * as ReactDOM from 'react-dom/client';
 import { AssignAllExtensions } from '../../extensions/General/Extensions';
 import { FieldLoader } from '../../fields/FieldLoader';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
+import { PingManager } from '../util/PingManager';
 import { ReplayMovements } from '../util/ReplayMovements';
 import { TrackMovements } from '../util/TrackMovements';
 import { CollectionView } from './collections/CollectionView';
-import { MainView } from './MainView';
-import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
-import { PingManager } from '../util/PingManager';
 import './global/globalScripts';
+import { MainView } from './MainView';
 dotenv.config();
 
 AssignAllExtensions();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 6a743a5e6..dde04dcc0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -9,7 +9,6 @@ import { observer } from 'mobx-react';
 import 'normalize.css';
 import * as React from 'react';
 import { Doc, DocListCast, Opt } from '../../fields/Doc';
-import { ScriptField } from '../../fields/ScriptField';
 import { DocCast, StrCast } from '../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, returnZero, setupMoveUpEvents, Utils } from '../../Utils';
 import { GoogleAuthenticationManager } from '../apis/GoogleAuthenticationManager';
@@ -77,7 +76,6 @@ export class MainView extends React.Component {
     public static Live: boolean = false;
     private _docBtnRef = React.createRef<HTMLDivElement>();
 
-    @observable public LastButton: Opt<Doc>;
     @observable private _windowWidth: number = 0;
     @observable private _windowHeight: number = 0;
     @observable private _dashUIWidth: number = 0; // width of entire main dashboard region including left menu buttons and properties panel (but not including the dashboard selector button row)
@@ -529,7 +527,6 @@ export class MainView extends React.Component {
         window.addEventListener('beforeunload', DocServer.UPDATE_SERVER_CACHE);
         window.addEventListener('drop', e => e.preventDefault(), false); // prevent default behavior of navigating to a new web page
         window.addEventListener('dragover', e => e.preventDefault(), false);
-        // document.addEventListener("pointermove", action(e => SearchBox.Instance._undoBackground = UndoManager.batchCounter ? "#000000a8" : undefined));
         document.addEventListener('pointerdown', this.globalPointerDown, true);
         document.addEventListener('pointermove', this.globalPointerMove, true);
         document.addEventListener('pointerup', this.globalPointerClick, true);
@@ -572,11 +569,7 @@ export class MainView extends React.Component {
         Doc.AddDocToList(Doc.MyFilesystem, 'data', folder);
     };
 
-    @observable _exploreMode = false;
-    @computed get exploreMode() {
-        return () => (this._exploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined);
-    }
-    waitForDoubleClick = () => (this._exploreMode ? 'never' : undefined);
+    waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined);
     headerBarScreenXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.headerBarDocHeight(), 1);
     mainScreenToLocalXf = () => new Transform(-this.leftScreenOffsetOfMainDocView - this.leftMenuFlyoutWidth(), -this.topOfMainDocContent, 1);
     addHeaderDoc = (doc: Doc | Doc[], annotationKey?: string) => (doc instanceof Doc ? [doc] : doc).reduce((done, doc) => Doc.AddDocToList(this.headerBarDoc, 'data', doc), true);
@@ -747,7 +740,7 @@ export class MainView extends React.Component {
 
     @computed get leftMenuPanel() {
         return (
-            <div key="menu" className="mainView-leftMenuPanel" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), display: LightboxView.LightboxDoc ? 'none' : undefined }}>
+            <div key="menu" className="mainView-leftMenuPanel" style={{ background: SettingsManager.userBackgroundColor, display: LightboxView.LightboxDoc ? 'none' : undefined }}>
                 <DocumentView
                     Document={Doc.MyLeftSidebarMenu}
                     DataDoc={undefined}
@@ -804,16 +797,16 @@ export class MainView extends React.Component {
                     {this.flyout}
                     <div
                         className="mainView-libraryHandle"
-                        style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }}
+                        style={{ background: SettingsManager.userBackgroundColor, left: leftMenuFlyoutWidth - 10 /* ~half width of handle */, display: !this._leftMenuFlyoutWidth ? 'none' : undefined }}
                         onPointerDown={this.onFlyoutPointerDown}>
-                        <FontAwesomeIcon icon="chevron-left" color={StrCast(Doc.UserDoc().userColor)} style={{ opacity: '50%' }} size="sm" />
+                        <FontAwesomeIcon icon="chevron-left" color={SettingsManager.userColor} style={{ opacity: '50%' }} size="sm" />
                     </div>
                     <div className="mainView-innerContainer" style={{ width: `calc(100% - ${width}px)` }}>
                         {this.dockingContent}
 
                         {this._hideUI ? null : (
-                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), right: this.propertiesWidth() - 1 }}>
-                                <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={StrCast(Doc.UserDoc().userColor)} size="sm" />
+                            <div className="mainView-propertiesDragger" key="props" onPointerDown={this.onPropertiesPointerDown} style={{ background: SettingsManager.userBackgroundColor, right: this.propertiesWidth() - 1 }}>
+                                <FontAwesomeIcon icon={this.propertiesWidth() < 10 ? 'chevron-left' : 'chevron-right'} color={SettingsManager.userColor} size="sm" />
                             </div>
                         )}
                         <div className="properties-container" style={{ width: this.propertiesWidth() }}>
@@ -857,11 +850,11 @@ export class MainView extends React.Component {
         //setTimeout(action(() => (this._leftMenuFlyoutWidth += 0.5)));
 
         this._sidebarContent.proto = DocCast(button.target);
-        this.LastButton = button;
+        DocumentView.LastPressedSidebarBtn = button;
     });
 
     closeFlyout = action(() => {
-        this.LastButton = undefined;
+        DocumentView.LastPressedSidebarBtn = undefined;
         this._panelContent = 'none';
         this._sidebarContent.proto = undefined;
         this._leftMenuFlyoutWidth = 0;
@@ -879,7 +872,7 @@ export class MainView extends React.Component {
 
     @computed get docButtons() {
         return !Doc.MyDockedBtns ? null : (
-            <div className="mainView-docButtons" style={{ background: StrCast(Doc.UserDoc().userBackgroundColor), color: StrCast(Doc.UserDoc().userColor) }} ref={this._docBtnRef}>
+            <div className="mainView-docButtons" style={{ background: SettingsManager.userBackgroundColor, color: SettingsManager.userColor }} ref={this._docBtnRef}>
                 <CollectionLinearView
                     Document={Doc.MyDockedBtns}
                     DataDoc={undefined}
@@ -998,8 +991,8 @@ export class MainView extends React.Component {
             <div
                 className={`mainView-container ${this.colorScheme}`}
                 style={{
-                    color: StrCast(Doc.UserDoc().userColor),
-                    background: StrCast(Doc.UserDoc().userBackgroundColor),
+                    color: SettingsManager.userColor,
+                    background: SettingsManager.userBackgroundColor,
                 }}
                 onScroll={() => (ele => (ele.scrollTop = ele.scrollLeft = 0))(document.getElementById('root')!)}
                 ref={r => {
@@ -1068,3 +1061,12 @@ export class MainView extends React.Component {
 ScriptingGlobals.add(function selectMainMenu(doc: Doc, title: string) {
     MainView.Instance.selectMenu(doc);
 });
+ScriptingGlobals.add(function createNewPresentation() {
+    return MainView.Instance.createNewPresentation();
+}, 'creates a new presentation when called');
+ScriptingGlobals.add(function openPresentation(pres: Doc) {
+    return MainView.Instance.openPresentation(pres);
+}, 'creates a new presentation when called');
+ScriptingGlobals.add(function createNewFolder() {
+    return MainView.Instance.createNewFolder();
+}, 'creates a new folder in myFiles when called');
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 4fe6847c3..83bd1b860 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -188,7 +188,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
             });
 
             rows.push(
-                <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: SettingsManager.Instance.userBackgroundColor, textAlign: 'center' }}>
+                <div className="propertiesView-field" key="newKeyValue" style={{ marginTop: '3px', backgroundColor: SettingsManager.userBackgroundColor, textAlign: 'center' }}>
                     <EditableView key="editableView" oneLine contents={'add key:value or #tags'} height={13} fontSize={10} GetValue={() => ''} SetValue={this.setKeyValue} />
                 </div>
             );
@@ -1664,7 +1664,7 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                             <div className="propertiesView-title" style={{ width: this.props.width }}>
                                 Properties
                                 <div className="propertiesView-info" onClick={() => window.open('https://brown-dash.github.io/Dash-Documentation/properties')}>
-                                    <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.Instance.userColor} />
+                                    <IconButton icon={<FontAwesomeIcon icon="info-circle" />} color={SettingsManager.userColor} />
                                 </div>
                             </div>
                         </div>
@@ -1706,8 +1706,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     className="propertiesView-presentationTrails-title"
                                     onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))}
                                     style={{
-                                        color: SettingsManager.Instance.userColor,
-                                        backgroundColor: this.openPresTransitions ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                        color: SettingsManager.userColor,
+                                        backgroundColor: this.openPresTransitions ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                                     }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Transitions
                                     <div className="propertiesView-presentationTrails-title-icon">
@@ -1723,8 +1723,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     className="propertiesView-presentationTrails-title"
                                     onPointerDown={action(() => (this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration))}
                                     style={{
-                                        color: SettingsManager.Instance.userColor,
-                                        backgroundColor: this.openPresVisibilityAndDuration ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                        color: SettingsManager.userColor,
+                                        backgroundColor: this.openPresVisibilityAndDuration ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                                     }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibilty
                                     <div className="propertiesView-presentationTrails-title-icon">
@@ -1740,8 +1740,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     className="propertiesView-presentationTrails-title"
                                     onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))}
                                     style={{
-                                        color: SettingsManager.Instance.userColor,
-                                        backgroundColor: this.openPresProgressivize ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                        color: SettingsManager.userColor,
+                                        backgroundColor: this.openPresProgressivize ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                                     }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
                                     <div className="propertiesView-presentationTrails-title-icon">
@@ -1757,8 +1757,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
                                     className="propertiesView-presentationTrails-title"
                                     onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))}
                                     style={{
-                                        color: SettingsManager.Instance.userColor,
-                                        backgroundColor: this.openSlideOptions ? SettingsManager.Instance.userVariantColor : SettingsManager.Instance.userBackgroundColor,
+                                        color: SettingsManager.userColor,
+                                        backgroundColor: this.openSlideOptions ? SettingsManager.userVariantColor : SettingsManager.userBackgroundColor,
                                     }}>
                                     &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={type === DocumentType.AUDIO ? 'file-audio' : 'file-video'} /> &nbsp; {type === DocumentType.AUDIO ? 'Audio Options' : 'Video Options'}
                                     <div className="propertiesView-presentationTrails-title-icon">
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index c48a7241a..f3452c780 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -9,11 +9,11 @@ import { emptyFunction, returnAll, returnFalse, returnOne, returnTrue, returnZer
 import { Docs, DocUtils } from '../documents/Documents';
 import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { LinkManager } from '../util/LinkManager';
+import { SearchUtil } from '../util/SearchUtil';
 import { Transform } from '../util/Transform';
 import { CollectionStackingView } from './collections/CollectionStackingView';
 import { FieldViewProps } from './nodes/FieldView';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
-import { SearchBox } from './search/SearchBox';
 import './SidebarAnnos.scss';
 import { StyleProp } from './StyleProvider';
 import React = require('react');
@@ -43,7 +43,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     @computed get allMetadata() {
         const keys = new Map<string, FieldResult<Field>>();
         DocListCast(this.props.rootDoc[this.sidebarKey]).forEach(doc =>
-            SearchBox.documentKeys(doc)
+            SearchUtil.documentKeys(doc)
                 .filter(key => key[0] && key[0] !== '_' && key[0] === key[0].toUpperCase())
                 .map(key => keys.set(key, doc[key]))
         );
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 24a269927..12935400b 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -4,6 +4,7 @@ import { Tooltip } from '@material-ui/core';
 import { IconButton, Shadows, Size } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { extname } from 'path';
+import { BsArrowDown, BsArrowDownUp, BsArrowUp } from 'react-icons/bs';
 import { Doc, Opt, StrListCast } from '../../fields/Doc';
 import { BoolCast, Cast, DocCast, ImageCast, NumCast, StrCast } from '../../fields/Types';
 import { DashColor, lightOrDark, Utils } from '../../Utils';
@@ -14,15 +15,13 @@ import { LinkManager } from '../util/LinkManager';
 import { SelectionManager } from '../util/SelectionManager';
 import { ColorScheme, SettingsManager } from '../util/SettingsManager';
 import { undoBatch, UndoManager } from '../util/UndoManager';
-import { TreeSort } from './collections/TreeView';
+import { TreeSort } from './collections/TreeSort';
 import { Colors } from './global/globalEnums';
 import { InkingStroke } from './InkingStroke';
-import { MainView } from './MainView';
-import { DocumentViewProps } from './nodes/DocumentView';
+import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
 import { FieldViewProps } from './nodes/FieldView';
 import { KeyValueBox } from './nodes/KeyValueBox';
 import { SliderBox } from './nodes/SliderBox';
-import { BsArrowDown, BsArrowUp, BsArrowDownUp } from 'react-icons/bs';
 import './StyleProvider.scss';
 import React = require('react');
 
@@ -159,7 +158,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ''
             );
         case StyleProp.Color:
-            if (MainView.Instance.LastButton === doc) return SettingsManager.Instance.userBackgroundColor;
+            if (DocumentView.LastPressedSidebarBtn === doc) return SettingsManager.userBackgroundColor;
             if (Doc.IsSystem(doc!)) return StrCast(Doc.UserDoc().userColor)
             if (doc?.type === DocumentType.FONTICON) return Doc.UserDoc().userColor;
             const docColor: Opt<string> = StrCast(doc?.[fieldKey + 'color'], StrCast(doc?._color));
@@ -194,7 +193,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 ? 15
                 : 0;
         case StyleProp.BackgroundColor: {
-            if (MainView.Instance.LastButton === doc) return StrCast(Doc.UserDoc().userColor); // hack to indicate active menu panel item
+            if (DocumentView.LastPressedSidebarBtn === doc) return StrCast(Doc.UserDoc().userColor); // hack to indicate active menu panel item
             let docColor: Opt<string> = StrCast(doc?.[fieldKey + '_backgroundColor'], StrCast(doc?._backgroundColor, isCaption ? 'rgba(0,0,0,0.4)' : ''));
             // prettier-ignore
             switch (doc?.type) {
@@ -217,7 +216,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                 case DocumentType.COL:
                     if (StrCast(Doc.LayoutField(doc)).includes(SliderBox.name)) break;
                     docColor = docColor || (Doc.IsSystem(doc)
-                            ? SettingsManager.Instance.userBackgroundColor
+                            ? SettingsManager.userBackgroundColor
                             : doc.annotationOn
                             ? '#00000010' // faint interior for collections on PDFs, images, etc
                             : doc?._isGroup
@@ -264,7 +263,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
             const isInk = doc && StrCast(Doc.Layout(doc).layout).includes(InkingStroke.name) && !props?.LayoutTemplateString;
             if (StrCast(doc?.pointerEvents) && !props?.LayoutTemplateString?.includes(KeyValueBox.name)) return StrCast(doc!.pointerEvents); // honor pointerEvents field (set by lock button usually) if it's not a keyValue view of the Doc
             if (docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.() !== undefined) return docProps?.DocumentView?.().ComponentView?.overridePointerEvents?.();
-            if (MainView.Instance._exploreMode || doc?.layout_unrendered) return isInk ? 'visiblePainted' : 'all';
+            if (DocumentView.ExploreMode || doc?.layout_unrendered) return isInk ? 'visiblePainted' : 'all';
             if (props?.contentPointerEvents) return StrCast(props.contentPointerEvents);
             if (props?.pointerEvents?.() === 'none') return 'none';
             if (opacity() === 0) return 'none';
diff --git a/src/client/views/UndoStack.tsx b/src/client/views/UndoStack.tsx
index a551e5332..3fd64d1fd 100644
--- a/src/client/views/UndoStack.tsx
+++ b/src/client/views/UndoStack.tsx
@@ -19,7 +19,7 @@ export class UndoStack extends React.Component<UndoStackProps> {
     @observable static HideInline: boolean;
     @observable static Expand: boolean;
     render() {
-        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.Instance.userBackgroundColor;
+        const background = UndoManager.batchCounter.get() ? 'yellow' : SettingsManager.userBackgroundColor;
         return this.props.inline && UndoStack.HideInline ? null : (
             <div className="undoStack-outerContainer">
                 <Popup
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e15d57306..519b7c905 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -3,6 +3,7 @@ import { observer } from 'mobx-react';
 import * as ReactDOM from 'react-dom/client';
 import * as GoldenLayout from '../../../client/goldenLayout';
 import { Doc, DocListCast, Opt } from '../../../fields/Doc';
+import { AclAdmin, AclEdit } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { InkTool } from '../../../fields/InkField';
 import { List } from '../../../fields/List';
@@ -13,6 +14,7 @@ import { emptyFunction, incrementTitleCopy } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { Docs } from '../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
+import { DocumentManager } from '../../util/DocumentManager';
 import { DragManager } from '../../util/DragManager';
 import { InteractionUtils } from '../../util/InteractionUtils';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
@@ -28,8 +30,6 @@ import './CollectionDockingView.scss';
 import { CollectionFreeFormView } from './collectionFreeForm';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 import { TabDocView } from './TabDocView';
-import { DocumentManager } from '../../util/DocumentManager';
-import { AclAdmin, AclEdit } from '../../../fields/DocSymbols';
 import React = require('react');
 const _global = (window /* browser */ || global) /* node */ as any;
 
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index f65e8698f..5c9dd2058 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -181,7 +181,7 @@ export class CollectionMenu extends AntimodeMenu<CollectionMenuProps> {
             <div
                 className="collectionMenu-container"
                 style={{
-                    background: SettingsManager.Instance.userBackgroundColor,
+                    background: SettingsManager.userBackgroundColor,
                     // borderColor: StrCast(Doc.UserDoc().userColor)
                 }}>
                 {this.contMenuButtons}
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index de58e1fe7..d2be70577 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -2,12 +2,12 @@ import React = require('react');
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
-import { Doc, Opt, StrListCast } from '../../../fields/Doc';
+import { Doc, Opt } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
-import { Cast, NumCast, ScriptCast } from '../../../fields/Types';
+import { Cast, NumCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { emptyFunction, formatTime, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents, smoothScrollHorizontal, StopEvent } from '../../../Utils';
 import { Docs } from '../../documents/Documents';
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index f379d09ff..f6acafa95 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -1,6 +1,6 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { Popup, Type } from 'browndash-components';
 import { clamp } from 'lodash';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -10,7 +10,7 @@ import { DocData, Height, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { FieldId } from '../../../fields/RefField';
-import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { Cast, DocCast, NumCast, StrCast } from '../../../fields/Types';
 import { emptyFunction, lightOrDark, returnEmptyDoclist, returnFalse, returnTrue, setupMoveUpEvents, simulateMouseClick, Utils } from '../../../Utils';
 import { DocServer } from '../../DocServer';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
@@ -21,9 +21,8 @@ import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
 import { undoable, UndoManager } from '../../util/UndoManager';
 import { DashboardView } from '../DashboardView';
-import { Colors, Shadows } from '../global/globalEnums';
+import { Colors } from '../global/globalEnums';
 import { LightboxView } from '../LightboxView';
-import { MainView } from '../MainView';
 import { DocFocusOptions, DocumentView, DocumentViewProps, OpenWhere, OpenWhereMod } from '../nodes/DocumentView';
 import { DashFieldView } from '../nodes/formattedText/DashFieldView';
 import { KeyValueBox } from '../nodes/KeyValueBox';
@@ -34,7 +33,6 @@ import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormV
 import { CollectionView } from './CollectionView';
 import './TabDocView.scss';
 import React = require('react');
-import { Popup, Toggle, Type } from 'browndash-components';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 interface TabDocViewProps {
@@ -426,6 +424,7 @@ export class TabDocView extends React.Component<TabDocViewProps> {
     disableMinimap = () => !this._document || this._document.layout !== CollectionView.LayoutString(Doc.LayoutFieldKey(this._document)) || this._document?._type_collection !== CollectionViewType.Freeform;
     whenChildContentActiveChanges = (isActive: boolean) => (this._isAnyChildContentActive = isActive);
     isContentActive = () => this._isContentActive;
+    waitForDoubleClick = () => (DocumentView.ExploreMode ? 'never' : undefined);
     @computed get docView() {
         return !this._activated || !this._document ? null : (
             <>
@@ -441,8 +440,8 @@ export class TabDocView extends React.Component<TabDocViewProps> {
                     hideTitle={this.props.keyValue}
                     Document={this._document}
                     DataDoc={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined}
-                    onBrowseClick={MainView.Instance.exploreMode}
-                    waitForDoubleClickToClick={MainView.Instance.waitForDoubleClick}
+                    onBrowseClick={DocumentView.exploreMode}
+                    waitForDoubleClickToClick={this.waitForDoubleClick}
                     isContentActive={this.isContentActive}
                     isDocumentActive={returnFalse}
                     PanelWidth={this.PanelWidth}
diff --git a/src/client/views/collections/TreeSort.ts b/src/client/views/collections/TreeSort.ts
new file mode 100644
index 000000000..977acd030
--- /dev/null
+++ b/src/client/views/collections/TreeSort.ts
@@ -0,0 +1,6 @@
+export enum TreeSort {
+    AlphaUp = 'alphabetical from z',
+    AlphaDown = 'alphabetical from A',
+    Zindex = 'by Z index',
+    WhenAdded = 'when added',
+}
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 3402a8c8d..701150769 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -35,6 +35,7 @@ import { CollectionView } from './CollectionView';
 import './TreeView.scss';
 import React = require('react');
 import { IconButton, Size } from 'browndash-components';
+import { TreeSort } from './TreeSort';
 
 export interface TreeViewProps {
     treeView: CollectionTreeView;
@@ -77,12 +78,6 @@ const treeBulletWidth = function () {
     return Number(TREE_BULLET_WIDTH.replace('px', ''));
 };
 
-export enum TreeSort {
-    AlphaUp = 'alphabetical from z',
-    AlphaDown = 'alphabetical from A',
-    Zindex = 'by Z index',
-    WhenAdded = 'when added',
-}
 /**
  * Renders a treeView of a collection of documents
  *
@@ -578,7 +573,7 @@ export class TreeView extends React.Component<TreeViewProps> {
             return (
                 <div>
                     {!docs?.length || this.props.AddToMap /* hack to identify pres box trees */ ? null : (
-                        <div className='treeView-sorting'>
+                        <div className="treeView-sorting">
                             <IconButton
                                 color={sortings[sorting]?.color}
                                 size={Size.XSMALL}
@@ -602,7 +597,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                         style={{ cursor: 'inherit' }}
                         key={expandKey + 'more'}
                         title={`Sorted by : ${this.doc.treeView_SortCriterion}. click to cycle`}
-                        className='' //this.doc.treeView_HideTitle ? 'no-indent' : ''}
+                        className="" //this.doc.treeView_HideTitle ? 'no-indent' : ''}
                         onPointerDown={e => {
                             downX = e.clientX;
                             downY = e.clientY;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f5cc1eb53..16d6f1270 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -371,7 +371,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const nd = [Doc.NativeWidth(layoutDoc), Doc.NativeHeight(layoutDoc)];
             layoutDoc._width = NumCast(layoutDoc._width, 300);
             layoutDoc._height = NumCast(layoutDoc._height, nd[0] && nd[1] ? (nd[1] / nd[0]) * NumCast(layoutDoc._width) : 300);
-            (d._raiseWhenDragged === undefined ? DragManager.GetRaiseWhenDragged() : d._raiseWhenDragged) && (d.zIndex = zsorted.length + 1 + i); // bringToFront
+            !d._keepZWhenDragged && (d.zIndex = zsorted.length + 1 + i); // bringToFront
         }
 
         if (this.layoutDoc._autoArrange || de.metaKey) {
@@ -1267,7 +1267,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
     @computed get _pointerEvents() {
         const engine = this.props.layoutEngine?.() || StrCast(this.props.Document._layoutEngine);
-        const pointerEvents = DocumentDecorations.Instance.Interacting
+        const pointerEvents = DocumentView.Interacting
             ? 'none'
             : this.props.childPointerEvents ?? (this.props.viewDefDivClick || (engine === computePassLayout.name && !this.props.isSelected(true)) || this.isContentActive() === false ? 'none' : this.props.pointerEvents?.());
         return pointerEvents;
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 6895c0746..9a9a89732 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -3,15 +3,14 @@ import { observer } from 'mobx-react';
 import { EditorView } from 'prosemirror-view';
 import { Doc } from '../../../fields/Doc';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue } from '../../../Utils';
-import { DocUtils } from '../../documents/Documents';
 import { Transform } from '../../util/Transform';
 import { undoBatch } from '../../util/UndoManager';
+import { OpenWhere } from '../nodes/DocumentView';
 import { FormattedTextBox } from '../nodes/formattedText/FormattedTextBox';
 import { SearchBox } from '../search/SearchBox';
 import { DefaultStyleProvider } from '../StyleProvider';
 import './LinkPopup.scss';
 import React = require('react');
-import { OpenWhere } from '../nodes/DocumentView';
 
 interface LinkPopupProps {
     linkFrom?: () => Doc | undefined;
diff --git a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
index ff17e5c12..3a95e5f74 100644
--- a/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
+++ b/src/client/views/newlightbox/ButtonMenu/ButtonMenu.tsx
@@ -1,14 +1,13 @@
-import './ButtonMenu.scss';
+import { action } from 'mobx';
 import * as React from 'react';
-import { IButtonMenu } from './utils';
-import { NewLightboxView } from '../NewLightboxView';
-import { SelectionManager } from '../../../util/SelectionManager';
-import { CollectionDockingView } from '../../collections/CollectionDockingView';
-import { OpenWhereMod } from '../../nodes/DocumentView';
 import { Doc } from '../../../../fields/Doc';
 import { InkTool } from '../../../../fields/InkField';
-import { MainView } from '../../MainView';
-import { action } from 'mobx';
+import { SelectionManager } from '../../../util/SelectionManager';
+import { CollectionDockingView } from '../../collections/CollectionDockingView';
+import { DocumentView, OpenWhereMod } from '../../nodes/DocumentView';
+import { NewLightboxView } from '../NewLightboxView';
+import './ButtonMenu.scss';
+import { IButtonMenu } from './utils';
 
 export const ButtonMenu = (props: IButtonMenu) => {
     return (
@@ -40,10 +39,10 @@ export const ButtonMenu = (props: IButtonMenu) => {
             <div
                 className="newLightboxView-exploreBtn"
                 title="toggle explore mode to navigate among documents only"
-                style={{ background: MainView.Instance._exploreMode ? 'white' : undefined }}
+                style={{ background: DocumentView.ExploreMode ? 'white' : undefined }}
                 onClick={action(e => {
                     e.stopPropagation();
-                    MainView.Instance._exploreMode = !MainView.Instance._exploreMode;
+                    DocumentView.ExploreMode = !DocumentView.ExploreMode;
                 })}></div>
         </div>
     );
diff --git a/src/client/views/newlightbox/NewLightboxView.tsx b/src/client/views/newlightbox/NewLightboxView.tsx
index 3acbd1a32..ca90f6a0f 100644
--- a/src/client/views/newlightbox/NewLightboxView.tsx
+++ b/src/client/views/newlightbox/NewLightboxView.tsx
@@ -2,35 +2,32 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils';
-import { Doc, DocListCast, Opt, StrListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { InkTool } from '../../../fields/InkField';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
+import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnTrue } from '../../../Utils';
 import { DocUtils } from '../../documents/Documents';
 import { DocumentManager } from '../../util/DocumentManager';
 import { LinkManager } from '../../util/LinkManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { Transform } from '../../util/Transform';
-import { GestureOverlay } from '../GestureOverlay';
-import { MainView } from '../MainView';
-import { DefaultStyleProvider } from '../StyleProvider';
 import { CollectionStackedTimeline } from '../collections/CollectionStackedTimeline';
 import { TabDocView } from '../collections/TabDocView';
+import { GestureOverlay } from '../GestureOverlay';
+import { LightboxView } from '../LightboxView';
 import { DocumentView, OpenWhere } from '../nodes/DocumentView';
+import { DefaultStyleProvider } from '../StyleProvider';
+import { IRecommendation } from './components';
 import { ExploreView } from './ExploreView';
-import { IBounds, emptyBounds } from './ExploreView/utils';
+import { emptyBounds, IBounds } from './ExploreView/utils';
 import { NewLightboxHeader } from './Header';
 import './NewLightboxView.scss';
 import { RecommendationList } from './RecommendationList';
-import { IRecommendation } from './components';
-import { fetchKeywords, fetchRecommendations } from './utils';
-import { List } from '../../../fields/List';
-import { LightboxView } from '../LightboxView';
 
 enum LightboxStatus {
-    RECOMMENDATIONS = "recommendations",
-    ANNOTATIONS = "annotations",
-    NONE = "none"
+    RECOMMENDATIONS = 'recommendations',
+    ANNOTATIONS = 'annotations',
+    NONE = 'none',
 }
 
 interface LightboxViewProps {
@@ -63,30 +60,30 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
     @observable private static _docView: Opt<DocumentView>;
 
     // keywords
-    @observable private static _keywords: string[] = []
+    @observable private static _keywords: string[] = [];
     @action public static SetKeywords(kw: string[]) {
-        this._keywords = kw
+        this._keywords = kw;
     }
     @computed public static get Keywords() {
-        return this._keywords
+        return this._keywords;
     }
 
     // query
-    @observable private static _query: string = ''
+    @observable private static _query: string = '';
     @action public static SetQuery(query: string) {
-        this._query = query
+        this._query = query;
     }
     @computed public static get Query() {
-        return this._query
+        return this._query;
     }
 
     // keywords
-    @observable private static _recs: IRecommendation[] = []
+    @observable private static _recs: IRecommendation[] = [];
     @action public static SetRecs(recs: IRecommendation[]) {
-        this._recs = recs
+        this._recs = recs;
     }
     @computed public static get Recs() {
-        return this._recs
+        return this._recs;
     }
 
     // bounds
@@ -108,7 +105,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
     }
 
     // newLightbox sidebar status
-    @observable private static _sidebarStatus: Opt<string> = "";
+    @observable private static _sidebarStatus: Opt<string> = '';
     @action public static SetSidebarStatus(sidebarStatus: Opt<string>) {
         this._sidebarStatus = sidebarStatus;
     }
@@ -129,7 +126,7 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
             this._docFilters && (this._docFilters.length = 0);
             this._future = this._history = [];
             Doc.ActiveTool = InkTool.None;
-            MainView.Instance._exploreMode = false;
+            DocumentView.ExploreMode = false;
         } else {
             const l = DocUtils.MakeLinkToActiveAudio(() => doc).lastElement();
             l && (Cast(l.link_anchor_2, Doc, null).backgroundColor = 'lightgreen');
@@ -289,35 +286,38 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
 
     @computed
     get documentView() {
-        if (!LightboxView.LightboxDoc) return null
-        else return (<GestureOverlay isActive={true}>
-                            <DocumentView
-                                ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))}
-                                Document={LightboxView.LightboxDoc}
-                                DataDoc={undefined}
-                                PanelWidth={this.newLightboxWidth}
-                                PanelHeight={this.newLightboxHeight}
-                                LayoutTemplate={NewLightboxView.LightboxDocTemplate}
-                                isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
-                                isContentActive={returnTrue}
-                                styleProvider={DefaultStyleProvider}
-                                ScreenToLocalTransform={this.newLightboxScreenToLocal}
-                                renderDepth={0}
-                                rootSelected={returnTrue}
-                                docViewPath={returnEmptyDoclist}
-                                childFilters={this.docFilters}
-                                childFiltersByRanges={returnEmptyFilter}
-                                searchFilterDocs={returnEmptyDoclist}
-                                addDocument={undefined}
-                                removeDocument={undefined}
-                                whenChildContentsActiveChanged={emptyFunction}
-                                addDocTab={this.addDocTab}
-                                pinToPres={TabDocView.PinDoc}
-                                bringToFront={emptyFunction}
-                                onBrowseClick={MainView.Instance.exploreMode}
-                                focus={emptyFunction}
-                            />
-                        </GestureOverlay>)
+        if (!LightboxView.LightboxDoc) return null;
+        else
+            return (
+                <GestureOverlay isActive={true}>
+                    <DocumentView
+                        ref={action((r: DocumentView | null) => (NewLightboxView._docView = r !== null ? r : undefined))}
+                        Document={LightboxView.LightboxDoc}
+                        DataDoc={undefined}
+                        PanelWidth={this.newLightboxWidth}
+                        PanelHeight={this.newLightboxHeight}
+                        LayoutTemplate={NewLightboxView.LightboxDocTemplate}
+                        isDocumentActive={returnTrue} // without this being true, sidebar annotations need to be activated before text can be selected.
+                        isContentActive={returnTrue}
+                        styleProvider={DefaultStyleProvider}
+                        ScreenToLocalTransform={this.newLightboxScreenToLocal}
+                        renderDepth={0}
+                        rootSelected={returnTrue}
+                        docViewPath={returnEmptyDoclist}
+                        childFilters={this.docFilters}
+                        childFiltersByRanges={returnEmptyFilter}
+                        searchFilterDocs={returnEmptyDoclist}
+                        addDocument={undefined}
+                        removeDocument={undefined}
+                        whenChildContentsActiveChanged={emptyFunction}
+                        addDocTab={this.addDocTab}
+                        pinToPres={TabDocView.PinDoc}
+                        bringToFront={emptyFunction}
+                        onBrowseClick={DocumentView.exploreMode}
+                        focus={emptyFunction}
+                    />
+                </GestureOverlay>
+            );
     }
 
     future = () => NewLightboxView._future;
@@ -337,29 +337,28 @@ export class NewLightboxView extends React.Component<LightboxViewProps> {
                         NewLightboxView.SetNewLightboxDoc(undefined);
                     }
                 }}>
-                <div className={`app-document`} style={{gridTemplateColumns: `calc(100% - 400px) 400px`}}>
-                <div
-                    className="newLightboxView-contents"
-                    style={{
-                        top: 20,
-                        left: 20,
-                        width: this.newLightboxWidth(),
-                        height: this.newLightboxHeight() - 40,
-                    }}>
+                <div className={`app-document`} style={{ gridTemplateColumns: `calc(100% - 400px) 400px` }}>
+                    <div
+                        className="newLightboxView-contents"
+                        style={{
+                            top: 20,
+                            left: 20,
+                            width: this.newLightboxWidth(),
+                            height: this.newLightboxHeight() - 40,
+                        }}>
                         <NewLightboxHeader height={newLightboxHeaderHeight} width={this.newLightboxWidth()} />
-                        {!NewLightboxView._explore ? 
-                            <div className="newLightboxView-doc" style={{height: this.newLightboxHeight()}}>
+                        {!NewLightboxView._explore ? (
+                            <div className="newLightboxView-doc" style={{ height: this.newLightboxHeight() }}>
                                 {this.documentView}
                             </div>
-                        :
+                        ) : (
                             <div className={`explore`}>
-                                <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds}/>
+                                <ExploreView recs={NewLightboxView.Recs} bounds={NewLightboxView.Bounds} />
                             </div>
-                        }
-                </div>
-                    <RecommendationList keywords={NewLightboxView.Keywords}/>
+                        )}
+                    </div>
+                    <RecommendationList keywords={NewLightboxView.Keywords} />
                 </div>
-                
             </div>
         );
     }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index be1eb3901..74eee49e0 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -28,6 +28,7 @@ import { FollowLinkScript } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
+import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { Transform } from '../../util/Transform';
@@ -51,7 +52,6 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { PinProps, PresBox } from './trails/PresBox';
 import React = require('react');
-import { SettingsManager } from '../../util/SettingsManager';
 const { Howl } = require('howler');
 
 interface Window {
@@ -428,7 +428,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
         if (!this.Document.ignoreClick && this.pointerEvents !== 'none' && this.props.renderDepth >= 0 && Utils.isClick(e.clientX, e.clientY, this._downX, this._downY, this._downTime)) {
             let stopPropagate = true;
             let preventDefault = true;
-            (this.rootDoc._raiseWhenDragged === undefined ? DragManager.GetRaiseWhenDragged() : this.rootDoc._raiseWhenDragged) && this.props.bringToFront(this.rootDoc);
+            !this.rootDoc._keepZWhenDragged && this.props.bringToFront(this.rootDoc);
             if (this._doubleTap) {
                 const defaultDblclick = this.props.defaultDoubleClick?.() || this.Document.defaultDoubleClick;
                 if (this.onDoubleClickHandler?.script) {
@@ -744,8 +744,8 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
                     zorderItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, false)), icon: 'arrow-up' });
                     zorderItems.push({ description: 'Send to Back', event: () => SelectionManager.Views().forEach(dv => dv.props.bringToFront(dv.rootDoc, true)), icon: 'arrow-down' });
                     zorderItems.push({
-                        description: this.rootDoc._raiseWhenDragged !== false ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged',
-                        event: undoBatch(action(() => (this.rootDoc._raiseWhenDragged = this.rootDoc._raiseWhenDragged === undefined ? false : undefined))),
+                        description: !this.rootDoc._keepZDragged ? 'Keep ZIndex when dragged' : 'Allow ZIndex to change when dragged',
+                        event: undoBatch(action(() => (this.rootDoc._keepZWhenDragged = !this.rootDoc._keepZWhenDragged))),
                         icon: 'hand-point-up',
                     });
                     !zorders && cm.addItem({ description: 'Z Order...', addDivider: true, noexpand: true, subitems: zorderItems, icon: 'layer-group' });
@@ -1114,7 +1114,7 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
             </div>
         );
         const targetDoc = showTitle?.startsWith('_') ? this.layoutDoc : this.rootDoc;
-        const background = StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor, StrCast(Doc.SharingDoc().headingColor, SettingsManager.Instance.userVariantColor));
+        const background = StrCast(SharingManager.Instance.users.find(u => u.user.email === this.dataDoc.author)?.sharingDoc.headingColor, StrCast(Doc.SharingDoc().headingColor, SettingsManager.userVariantColor));
         const sidebarWidthPercent = +StrCast(this.layoutDoc.layout_sidebarWidthPercent).replace('%', '');
         const titleView = !showTitle ? null : (
             <div
@@ -1276,7 +1276,13 @@ export class DocumentViewInternal extends DocComponent<DocumentViewInternalProps
 @observer
 export class DocumentView extends React.Component<DocumentViewProps> {
     public static ROOT_DIV = 'documentView-effectsWrapper';
+    @observable public static Interacting = false;
     @observable public static LongPress = false;
+    @observable public static ExploreMode = false;
+    @observable public static LastPressedSidebarBtn: Opt<Doc>; // bcz: this is a hack to handle highlighting buttons in the leftpanel menu .. need to find a cleaner approach
+    @computed public static get exploreMode() {
+        return () => (DocumentView.ExploreMode ? ScriptField.MakeScript('CollectionBrowseClick(documentView, clientX, clientY)', { documentView: 'any', clientX: 'number', clientY: 'number' })! : undefined);
+    }
     @observable public docView: DocumentViewInternal | undefined | null;
     @observable public textHtmlOverlay: Opt<string>;
     @observable private _isHovering = false;
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 94650cc88..fc66d40db 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -67,19 +67,6 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         }
     };
 
-    static GetShowLabels() {
-        return BoolCast(Doc.UserDoc()._showLabel);
-    }
-    static SetShowLabels(show: boolean) {
-        Doc.UserDoc()._showLabel = show;
-    }
-    static GetRecognizeGestures() {
-        return BoolCast(Doc.UserDoc()._recognizeGestures);
-    }
-    static SetRecognizeGestures(show: boolean) {
-        Doc.UserDoc()._recognizeGestures = show;
-    }
-
     // Determining UI Specs
     @computed get label() {
         return StrCast(this.rootDoc.icon_label, StrCast(this.rootDoc.title));
@@ -139,7 +126,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         // Script for checking the outcome of the toggle
         const checkResult = Number(Number(numScript().result ?? 0).toPrecision(NumCast(this.dataDoc.numPrecision, 3)));
-        const label = !FontIconBox.GetShowLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
+        const label = !Doc.GetShowIconLabels() ? null : <div className="fontIconBox-label">{this.label}</div>;
 
         return (
             <NumberDropdown
@@ -174,7 +161,7 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     Doc.UnBrushAllDocs();
                 })}>
                 {this.Icon(color)}
-                {!this.label || !FontIconBox.GetShowLabels() ? null : (
+                {!this.label || !Doc.GetShowIconLabels() ? null : (
                     <div className="fontIconBox-label" style={{ color: color, backgroundColor: backgroundColor }}>
                         {' '}
                         {this.label}{' '}
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index d69009415..42c8ea6a4 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -4,7 +4,7 @@ import { action, computed, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import wiki from 'wikijs';
 import { Doc, DocCastAsync, Opt } from '../../../fields/Doc';
-import { DirectLinks, Height, Width } from '../../../fields/DocSymbols';
+import { Height, Width } from '../../../fields/DocSymbols';
 import { Cast, DocCast, NumCast, PromiseValue, StrCast } from '../../../fields/Types';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnEmptyString, returnFalse, returnNone, setupMoveUpEvents } from '../../../Utils';
 import { DocServer } from '../../DocServer';
@@ -13,9 +13,9 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
 import { LinkFollower } from '../../util/LinkFollower';
 import { LinkManager } from '../../util/LinkManager';
+import { SearchUtil } from '../../util/SearchUtil';
 import { SettingsManager } from '../../util/SettingsManager';
 import { Transform } from '../../util/Transform';
-import { SearchBox } from '../search/SearchBox';
 import { DocumentView, DocumentViewSharedProps, OpenWhere } from './DocumentView';
 import './LinkDocPreview.scss';
 import React = require('react');
@@ -174,7 +174,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
             LinkFollower.FollowLink(this._linkDoc, this._linkSrc, false);
         } else if (this.props.hrefs?.length) {
             const webDoc =
-                Array.from(SearchBox.staticSearchCollection(Doc.MyFilesystem, this.props.hrefs[0]).keys()).lastElement() ??
+                Array.from(SearchUtil.SearchCollection(Doc.MyFilesystem, this.props.hrefs[0]).keys()).lastElement() ??
                 Docs.Create.WebDocument(this.props.hrefs[0], { title: this.props.hrefs[0], _nativeWidth: 850, _width: 200, _height: 400, data_useCors: true });
             this.props.docProps?.addDocTab(webDoc, OpenWhere.lightbox);
         }
diff --git a/src/client/views/nodes/LoadingBox.tsx b/src/client/views/nodes/LoadingBox.tsx
index fcbd0128d..0b02626e9 100644
--- a/src/client/views/nodes/LoadingBox.tsx
+++ b/src/client/views/nodes/LoadingBox.tsx
@@ -1,14 +1,14 @@
-import { action, observable, runInAction } from 'mobx';
+import { observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import ReactLoading from 'react-loading';
 import { Doc } from '../../../fields/Doc';
+import { Id } from '../../../fields/FieldSymbols';
 import { StrCast } from '../../../fields/Types';
 import { Networking } from '../../Network';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { FieldView, FieldViewProps } from './FieldView';
 import './LoadingBox.scss';
-import { Id } from '../../../fields/FieldSymbols';
 
 /**
  * LoadingBox Class represents a placeholder doc for documents that are currently
@@ -44,7 +44,7 @@ export class LoadingBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             this.rootDoc.loadingError = 'Upload interrupted, please try again';
         } else {
             const updateFunc = async () => {
-                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads. 
+                const result = await Networking.QueryYoutubeProgress(StrCast(this.rootDoc[Id])); // We use the guid of the overwriteDoc to track file uploads.
                 runInAction(() => (this.progress = result.progress));
                 this._timer = setTimeout(updateFunc, 1000);
             };
diff --git a/src/client/views/nodes/ScreenshotBox.tsx b/src/client/views/nodes/ScreenshotBox.tsx
index 83a29f071..fa19caae1 100644
--- a/src/client/views/nodes/ScreenshotBox.tsx
+++ b/src/client/views/nodes/ScreenshotBox.tsx
@@ -314,7 +314,7 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                             </>
                         </CollectionFreeFormView>
                     </div>
-                    <div style={{ background: SettingsManager.Instance.userColor, position: 'relative', height: this.formattedPanelHeight() }}>
+                    <div style={{ background: SettingsManager.userColor, position: 'relative', height: this.formattedPanelHeight() }}>
                         {!(this.dataDoc[this.fieldKey + '_dictation'] instanceof Doc) ? null : (
                             <FormattedTextBox
                                 {...this.props}
@@ -336,8 +336,8 @@ export class ScreenshotBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatabl
                     </div>
                 </div>
                 {!this.props.isSelected() ? null : (
-                    <div className="screenshotBox-uiButtons" style={{ background: SettingsManager.Instance.userColor }}>
-                        <div className="screenshotBox-recorder" style={{ color: SettingsManager.Instance.userBackgroundColor, background: SettingsManager.Instance.userVariantColor }} key="snap" onPointerDown={this.toggleRecording}>
+                    <div className="screenshotBox-uiButtons" style={{ background: SettingsManager.userColor }}>
+                        <div className="screenshotBox-recorder" style={{ color: SettingsManager.userBackgroundColor, background: SettingsManager.userVariantColor }} key="snap" onPointerDown={this.toggleRecording}>
                             <FontAwesomeIcon icon="file" size="lg" />
                         </div>
                     </div>
diff --git a/src/client/views/nodes/VideoBox.tsx b/src/client/views/nodes/VideoBox.tsx
index 2177adeff..48716b867 100644
--- a/src/client/views/nodes/VideoBox.tsx
+++ b/src/client/views/nodes/VideoBox.tsx
@@ -26,11 +26,10 @@ import { CollectionStackedTimeline, TrimScope } from '../collections/CollectionS
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { ViewBoxAnnotatableComponent, ViewBoxAnnotatableProps } from '../DocComponent';
-import { DocumentDecorations } from '../DocumentDecorations';
 import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { AnchorMenu } from '../pdf/AnchorMenu';
 import { StyleProp } from '../StyleProvider';
-import { OpenWhere } from './DocumentView';
+import { DocumentView, OpenWhere } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { RecordingBox } from './RecordingBox';
 import { PinProps, PresBox } from './trails';
@@ -624,7 +623,7 @@ export class VideoBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
                 () => !this._playing && this.Seek(NumCast(this.layoutDoc._layout_currentTimecode))
             );
             this._disposers.youtubeReactionDisposer = reaction(
-                () => Doc.ActiveTool === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentDecorations.Instance.Interacting,
+                () => Doc.ActiveTool === InkTool.None && this.props.isSelected(true) && !SnappingManager.GetIsDragging() && !DocumentView.Interacting,
                 interactive => (iframe.style.pointerEvents = interactive ? 'all' : 'none'),
                 { fireImmediately: true }
             );
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 200d06a0b..bd969b527 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -11,9 +11,10 @@ import { keymap } from 'prosemirror-keymap';
 import { Fragment, Mark, Node, Slice } from 'prosemirror-model';
 import { EditorState, NodeSelection, Plugin, TextSelection, Transaction } from 'prosemirror-state';
 import { EditorView } from 'prosemirror-view';
+import { BsMarkdownFill } from 'react-icons/bs';
 import { DateField } from '../../../../fields/DateField';
-import { Doc, DocListCast, StrListCast, Field, Opt } from '../../../../fields/Doc';
-import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, Height, Width, ForceServerWrite, UpdatingFromServer } from '../../../../fields/DocSymbols';
+import { Doc, DocListCast, Field, Opt } from '../../../../fields/Doc';
+import { AclAdmin, AclAugment, AclEdit, AclSelfEdit, DocCss, ForceServerWrite, Height, UpdatingFromServer, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkTool } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
@@ -25,11 +26,10 @@ import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } fro
 import { GetEffectiveAcl, TraceMobx } from '../../../../fields/util';
 import { addStyleSheet, addStyleSheetRule, clearStyleSheetRules, emptyFunction, numberRange, returnFalse, returnZero, setupMoveUpEvents, smoothScroll, unimplementedFunction, Utils } from '../../../../Utils';
 import { GoogleApiClientUtils, Pulls, Pushes } from '../../../apis/google_docs/GoogleApiClientUtils';
-import { gptAPICall, GPTCallType, gptImageCall } from '../../../apis/gpt/GPT';
+import { gptAPICall, GPTCallType } from '../../../apis/gpt/GPT';
 import { DocServer } from '../../../DocServer';
 import { Docs, DocUtils } from '../../../documents/Documents';
-import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
-import { Networking } from '../../../Network';
+import { CollectionViewType } from '../../../documents/DocumentTypes';
 import { DictationManager } from '../../../util/DictationManager';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { DragManager } from '../../../util/DragManager';
@@ -49,6 +49,7 @@ import { DocumentButtonBar } from '../../DocumentButtonBar';
 import { Colors } from '../../global/globalEnums';
 import { LightboxView } from '../../LightboxView';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
+import { GPTPopup } from '../../pdf/GPTPopup/GPTPopup';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { StyleProp } from '../../StyleProvider';
 import { DocFocusOptions, DocumentView, DocumentViewInternal, OpenWhere } from '../DocumentView';
@@ -70,8 +71,6 @@ import { schema } from './schema_rts';
 import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
 import React = require('react');
-import { GPTPopup, GPTPopupMode } from '../../pdf/GPTPopup/GPTPopup';
-import { BsMarkdownFill } from 'react-icons/bs';
 const translateGoogleApi = require('translate-google-api');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
@@ -575,7 +574,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         draggedDoc._freeform_fitContentsToBox = true;
                         Doc.SetContainer(draggedDoc, this.rootDoc);
                         const view = this._editorView!;
-                        view.dispatch(view.state.tr.insert(view.posAtCoords({ left: de.x, top: de.y })!.pos, node));
+                        try {
+                            const pos = view.posAtCoords({ left: de.x, top: de.y })?.pos;
+                            pos && view.dispatch(view.state.tr.insert(pos, node));
+                            added = pos ? true : false; // pos will be null if you don't drop onto an actual text location
+                        } catch (e) {
+                            console.log('Drop failed', e);
+                            added = false;
+                        }
                     }
                 }
             } // otherwise, fall through to outer collection to handle drop
@@ -1119,7 +1125,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     componentDidMount() {
         !this.props.dontSelectOnLoad && this.props.setContentView?.(this); // this tells the DocumentView that this AudioBox is the "content" of the document.  this allows the DocumentView to indirectly call getAnchor() on the AudioBox when making a link.
         this._cachedLinks = LinkManager.Links(this.Document);
-        this._disposers.breakupDictation = reaction(() => DocumentManager.Instance.RecordingEvent, this.breakupDictation);
+        this._disposers.breakupDictation = reaction(() => Doc.RecordingEvent, this.breakupDictation);
         this._disposers.layout_autoHeight = reaction(
             () => this.layout_autoHeight,
             layout_autoHeight => layout_autoHeight && this.tryUpdateScrollHeight()
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
index 1400d0f6d..1ec6d6e3f 100644
--- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx
+++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx
@@ -1,26 +1,25 @@
-import './GenerativeFill.scss';
-import React = require('react');
-import { useEffect, useRef, useState } from 'react';
-import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
-import { BrushHandler } from './generativeFillUtils/BrushHandler';
-import { IconButton } from 'browndash-components';
 import { Checkbox, FormControlLabel, Slider, TextField } from '@mui/material';
-import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
-import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
-import { PointerHandler } from './generativeFillUtils/PointerHandler';
-import { IoMdUndo, IoMdRedo } from 'react-icons/io';
-import { MainView } from '../../MainView';
+import { IconButton } from 'browndash-components';
+import { useEffect, useRef, useState } from 'react';
+import { CgClose } from 'react-icons/cg';
+import { IoMdRedo, IoMdUndo } from 'react-icons/io';
 import { Doc, DocListCast } from '../../../../fields/Doc';
-import { Networking } from '../../../Network';
-import { Utils } from '../../../../Utils';
-import { DocUtils, Docs } from '../../../documents/Documents';
+import { List } from '../../../../fields/List';
 import { NumCast } from '../../../../fields/Types';
+import { Utils } from '../../../../Utils';
+import { Docs, DocUtils } from '../../../documents/Documents';
+import { Networking } from '../../../Network';
 import { CollectionDockingView } from '../../collections/CollectionDockingView';
 import { OpenWhereMod } from '../DocumentView';
-import Buttons from './GenerativeFillButtons';
-import { List } from '../../../../fields/List';
-import { CgClose } from 'react-icons/cg';
 import { ImageBox } from '../ImageBox';
+import './GenerativeFill.scss';
+import Buttons from './GenerativeFillButtons';
+import { BrushHandler } from './generativeFillUtils/BrushHandler';
+import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants';
+import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces';
+import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler';
+import { PointerHandler } from './generativeFillUtils/PointerHandler';
+import React = require('react');
 
 enum BrushStyle {
     ADD,
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 6ff22e929..f750392f5 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
 import { action, computed, IReactionDisposer, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
+import { Doc, DocListCast, FieldResult, Opt, StrListCast } from '../../../../fields/Doc';
 import { Animation } from '../../../../fields/DocSymbols';
 import { Copy, Id } from '../../../../fields/FieldSymbols';
 import { InkField } from '../../../../fields/InkField';
@@ -15,7 +15,7 @@ import { BoolCast, Cast, DocCast, NumCast, StrCast } from '../../../../fields/Ty
 import { AudioField } from '../../../../fields/URLField';
 import { emptyFunction, emptyPath, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../Utils';
 import { DocServer } from '../../../DocServer';
-import { Docs, DocUtils } from '../../../documents/Documents';
+import { Docs } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index b0924888a..6a8b06377 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -1,23 +1,20 @@
 import React = require('react');
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Tooltip } from '@material-ui/core';
+import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, IReactionDisposer, observable, ObservableMap, reaction } from 'mobx';
 import { observer } from 'mobx-react';
+import { EditorView } from 'prosemirror-view';
 import { ColorState } from 'react-color';
 import { Doc, Opt } from '../../../fields/Doc';
+import { StrCast } from '../../../fields/Types';
 import { returnFalse, setupMoveUpEvents, unimplementedFunction, Utils } from '../../../Utils';
+import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
+import { DocumentType } from '../../documents/DocumentTypes';
 import { SelectionManager } from '../../util/SelectionManager';
 import { AntimodeMenu, AntimodeMenuProps } from '../AntimodeMenu';
 import { LinkPopup } from '../linking/LinkPopup';
-import { ButtonDropdown } from '../nodes/formattedText/RichTextMenu';
-import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
-import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
-import { LightboxView } from '../LightboxView';
-import { EditorView } from 'prosemirror-view';
 import './AnchorMenu.scss';
-import { ColorPicker, Group, IconButton, Popup, Size, Toggle, ToggleType, Type } from 'browndash-components';
-import { StrCast } from '../../../fields/Types';
-import { DocumentType } from '../../documents/DocumentTypes';
+import { GPTPopup, GPTPopupMode } from './GPTPopup/GPTPopup';
 
 @observer
 export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
diff --git a/src/client/views/search/IconBar.tsx b/src/client/views/search/IconBar.tsx
index 6103b245c..540c1b5e1 100644
--- a/src/client/views/search/IconBar.tsx
+++ b/src/client/views/search/IconBar.tsx
@@ -1,17 +1,15 @@
 import { action, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { DocumentType } from "../../documents/DocumentTypes";
-// import "./SearchBox.scss";
-import "./IconBar.scss";
+import { DocumentType } from '../../documents/DocumentTypes';
+import './IconBar.scss';
 import { IconButton } from './IconButton';
-import "./IconButton.scss";
+import './IconButton.scss';
 
 export interface IconBarProps {
     setIcons: (icons: string[]) => void;
 }
 
-
 @observer
 export class IconBar extends React.Component<IconBarProps> {
     public _allIcons: string[] = [DocumentType.AUDIO, DocumentType.COL, DocumentType.IMG, DocumentType.LINK, DocumentType.PDF, DocumentType.RTF, DocumentType.VID, DocumentType.WEB, DocumentType.MAP];
@@ -32,7 +30,9 @@ export class IconBar extends React.Component<IconBarProps> {
     }
 
     @action.bound
-    getIcons(): string[] { return this._icons; }
+    getIcons(): string[] {
+        return this._icons;
+    }
 
     constructor(props: any) {
         super(props);
@@ -40,29 +40,33 @@ export class IconBar extends React.Component<IconBarProps> {
     }
 
     @action.bound
-    getList(): string[] { return this.getIcons(); }
+    getList(): string[] {
+        return this.getIcons();
+    }
 
     @action.bound
-    updateList(newList: string[]) { this.updateIcon(newList); }
+    updateList(newList: string[]) {
+        this.updateIcon(newList);
+    }
 
     @action.bound
     resetSelf = () => {
         this._resetClicked = true;
         this.updateList([]);
-    }
+    };
 
     @action.bound
     selectAll = () => {
         this._selectAllClicked = true;
         this.updateList(this._allIcons);
-    }
+    };
 
     render() {
         return (
             <div className="icon-bar">
-                {this._allIcons.map((type: string) =>
+                {this._allIcons.map((type: string) => (
                     <IconButton key={type.toString()} type={type} />
-                )}
+                ))}
             </div>
         );
     }
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 1ceea697a..6b6b0f2ff 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -19,6 +19,7 @@ import { fetchRecommendations } from '../newlightbox/utils';
 import { IRecommendation, Recommendation } from '../newlightbox/components';
 import { Colors } from '../global/globalEnums';
 import { SettingsManager } from '../../util/SettingsManager';
+import { SearchUtil } from '../../util/SearchUtil';
 
 const DAMPENING_FACTOR = 0.9;
 const MAX_ITERATIONS = 25;
@@ -128,34 +129,6 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
         }
     });
 
-    /**
-     * @param {Doc[]} docs - docs to be searched through recursively
-     * @param {number, Doc => void} func - function to be called on each doc
-     *
-     * This method iterates through an array of docs and all docs within those docs, calling
-     * the function func on each doc.
-     */
-    static foreachRecursiveDoc(docs: Doc[], func: (depth: number, doc: Doc) => void) {
-        let newarray: Doc[] = [];
-        var depth = 0;
-        const visited: Doc[] = [];
-        while (docs.length > 0) {
-            newarray = [];
-            docs.filter(d => d && !visited.includes(d)).forEach(d => {
-                visited.push(d);
-                const fieldKey = Doc.LayoutFieldKey(d);
-                const annos = !Field.toString(Doc.LayoutField(d) as Field).includes('CollectionView');
-                const data = d[annos ? fieldKey + '_annotations' : fieldKey];
-                data && newarray.push(...DocListCast(data));
-                const sidebar = d[fieldKey + '_sidebar'];
-                sidebar && newarray.push(...DocListCast(sidebar));
-                func(depth, d);
-            });
-            docs = newarray;
-            depth++;
-        }
-    }
-
     /**
      * @param {Doc[]} docs - docs to be searched through recursively
      * @param {number, Doc => void} func - function to be called on each doc
@@ -213,74 +186,10 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     @action
     searchCollection(query: string) {
         this._selectedResult = undefined;
-        this._results = SearchBox.staticSearchCollection(CollectionDockingView.Instance?.rootDoc, query);
+        this._results = SearchUtil.SearchCollection(CollectionDockingView.Instance?.rootDoc, query);
 
         this.computePageRanks();
     }
-    @action
-    static staticSearchCollection(rootDoc: Opt<Doc>, query: string) {
-        const blockedTypes = [DocumentType.PRESELEMENT, DocumentType.CONFIG, DocumentType.KVP, DocumentType.SEARCH, DocumentType.FONTICON, DocumentType.BUTTON, DocumentType.SCRIPTING];
-        const blockedKeys = [
-            'x',
-            'y',
-            'proto',
-            'width',
-            'layout_autoHeight',
-            'acl-Override',
-            'acl-Guest',
-            'embedContainer',
-            'zIndex',
-            'height',
-            'text_scrollHeight',
-            'text_height',
-            'cloneFieldFilter',
-            'isDataDoc',
-            'text_annotations',
-            'dragFactory_count',
-            'text_noTemplate',
-            'proto_embeddings',
-            'isSystem',
-            'layout_fieldKey',
-            'isBaseProto',
-            'xMargin',
-            'yMargin',
-            'links',
-            'layout',
-            'layout_keyValue',
-            'layout_fitWidth',
-            'type_collection',
-            'title_custom',
-            'freeform_panX',
-            'freeform_panY',
-            'freeform_scale',
-        ];
-        query = query.toLowerCase();
-
-        const results = new Map<Doc, string[]>();
-        if (rootDoc) {
-            const docs = DocListCast(rootDoc[Doc.LayoutFieldKey(rootDoc)]);
-            const docIDs: String[] = [];
-            SearchBox.foreachRecursiveDoc(docs, (depth: number, doc: Doc) => {
-                const dtype = StrCast(doc.type) as DocumentType;
-                if (dtype && !blockedTypes.includes(dtype) && !docIDs.includes(doc[Id]) && depth >= 0) {
-                    const hlights = new Set<string>();
-                    SearchBox.documentKeys(doc).forEach(
-                        key =>
-                            Field.toString(doc[key] as Field)
-                                .toLowerCase()
-                                .includes(query) && hlights.add(key)
-                    );
-                    blockedKeys.forEach(key => hlights.delete(key));
-
-                    if (Array.from(hlights.keys()).length > 0) {
-                        results.set(doc, Array.from(hlights.keys()));
-                    }
-                }
-                docIDs.push(doc[Id]);
-            });
-        }
-        return results;
-    }
 
     /**
      * This method initializes the page rank of every document to the reciprocal
@@ -373,17 +282,6 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
         }
     }
 
-    /**
-     * @param {Doc} doc - doc for which keys are returned
-     *
-     * This method returns a list of a document doc's keys.
-     */
-    static documentKeys(doc: Doc) {
-        const keys: { [key: string]: boolean } = {};
-        Doc.GetAllPrototypes(doc).map(proto => Object.keys(proto).forEach(key => (keys[key] = false)));
-        return Array.from(Object.keys(keys));
-    }
-
     /**
      * This method submits a search with the _searchString as its query and updates
      * the results array accordingly.
@@ -518,7 +416,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                             className={className}>
                             <div className="searchBox-result-title">{title as string}</div>
                             <div className="searchBox-result-type">{formattedType}</div>
-                            <div className="searchBox-result-keys" style={{ color: SettingsManager.Instance.userVariantColor }}>
+                            <div className="searchBox-result-keys" style={{ color: SettingsManager.userVariantColor }}>
                                 {result[1].join(', ')}
                             </div>
                         </div>
@@ -530,7 +428,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
         const recommendationsJSX: JSX.Element[] = this._recommendations.map(props => <Recommendation {...props} />);
 
         return (
-            <div className="searchBox-container" style={{ pointerEvents: 'all', color: SettingsManager.Instance.userColor, background: SettingsManager.Instance.userBackgroundColor }}>
+            <div className="searchBox-container" style={{ pointerEvents: 'all', color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}>
                 <div className="searchBox-bar">
                     {isLinkSearch ? null : (
                         <select name="type" id="searchBox-type" className="searchBox-type" onChange={this.onSelectChange}>
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index c194ede32..a2f9de9ab 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -1,13 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, IconButton, Size, Type, isDark } from 'browndash-components';
+import { Button, IconButton, isDark, Size, Type } from 'browndash-components';
 import { action, computed, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { FaBug, FaCamera, FaStamp } from 'react-icons/fa';
+import { FaBug, FaCamera } from 'react-icons/fa';
 import { Doc, DocListCast } from '../../../fields/Doc';
 import { AclAdmin, DashVersion } from '../../../fields/DocSymbols';
 import { StrCast } from '../../../fields/Types';
 import { GetEffectiveAcl } from '../../../fields/util';
+import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 import { DocumentManager } from '../../util/DocumentManager';
 import { PingManager } from '../../util/PingManager';
 import { ReportManager } from '../../util/reportManager/ReportManager';
@@ -15,13 +16,12 @@ import { ServerStats } from '../../util/ServerStats';
 import { SettingsManager } from '../../util/SettingsManager';
 import { SharingManager } from '../../util/SharingManager';
 import { UndoManager } from '../../util/UndoManager';
+import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { ContextMenu } from '../ContextMenu';
 import { DashboardView } from '../DashboardView';
-import { MainView } from '../MainView';
-import { CollectionDockingView } from '../collections/CollectionDockingView';
 import { Colors } from '../global/globalEnums';
+import { DocumentView } from '../nodes/DocumentView';
 import './TopBar.scss';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 
 /**
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
@@ -43,7 +43,7 @@ export class TopBar extends React.Component {
         return StrCast(Doc.UserDoc().userVariantColor, Colors.MEDIUM_BLUE);
     }
     @computed get backgroundColor() {
-        return PingManager.Instance.IsBeating ? SettingsManager.Instance.userBackgroundColor : Colors.MEDIUM_GRAY;
+        return PingManager.Instance.IsBeating ? SettingsManager.userBackgroundColor : Colors.MEDIUM_GRAY;
     }
 
     @observable happyHeart: boolean = PingManager.Instance.IsBeating;
@@ -76,9 +76,7 @@ export class TopBar extends React.Component {
                         <span style={{ color: isDark(this.backgroundColor) ? Colors.LIGHT_BLUE : Colors.MEDIUM_BLUE, fontWeight: 500 }}>dash</span>
                     </div>
                 )}
-                {Doc.ActiveDashboard && (
-                    <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (MainView.Instance._exploreMode = !MainView.Instance._exploreMode))} />
-                )}
+                {Doc.ActiveDashboard && <Button text="Explore" tooltip="Browsing mode for directly navigating to documents" size={Size.SMALL} color={this.color} onClick={action(() => (DocumentView.ExploreMode = !DocumentView.ExploreMode))} />}
             </div>
         );
     }
diff --git a/src/client/views/webcam/DashWebRTCVideo.tsx b/src/client/views/webcam/DashWebRTCVideo.tsx
index 02e44a793..524492226 100644
--- a/src/client/views/webcam/DashWebRTCVideo.tsx
+++ b/src/client/views/webcam/DashWebRTCVideo.tsx
@@ -6,8 +6,8 @@ import { observer } from 'mobx-react';
 import { Doc } from '../../../fields/Doc';
 import { InkTool } from '../../../fields/InkField';
 import '../../views/nodes/WebBox.scss';
-import { DocumentDecorations } from '../DocumentDecorations';
 import { CollectionFreeFormDocumentViewProps } from '../nodes/CollectionFreeFormDocumentView';
+import { DocumentView } from '../nodes/DocumentView';
 import { FieldView, FieldViewProps } from '../nodes/FieldView';
 import './DashWebRTCVideo.scss';
 import { hangup, initialize, refreshVideos } from './WebCamLogic';
@@ -71,8 +71,8 @@ export class DashWebRTCVideo extends React.Component<CollectionFreeFormDocumentV
             </div>
         );
 
-        const frozen = !this.props.isSelected() || DocumentDecorations.Instance.Interacting;
-        const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentDecorations.Instance.Interacting ? '-interactive' : '');
+        const frozen = !this.props.isSelected() || DocumentView.Interacting;
+        const classname = 'webBox-cont' + (this.props.isSelected() && Doc.ActiveTool === InkTool.None && !DocumentView.Interacting ? '-interactive' : '');
 
         return (
             <>
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 4ad38e7fc..f17e10d9e 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -47,7 +47,7 @@ import { FieldId, RefField } from './RefField';
 import { RichTextField } from './RichTextField';
 import { listSpec } from './Schema';
 import { ComputedField, ScriptField } from './ScriptField';
-import { Cast, DocCast, FieldValue, NumCast, StrCast, ToConstructor } from './Types';
+import { BoolCast, Cast, DocCast, FieldValue, NumCast, StrCast, ToConstructor } from './Types';
 import { AudioField, CsvField, ImageField, PdfField, VideoField, WebField } from './URLField';
 import { containedFieldChangedHandler, deleteProperty, GetEffectiveAcl, getField, getter, makeEditable, makeReadOnly, normalizeEmail, setter, SharingPermissions } from './util';
 import JSZip = require('jszip');
@@ -156,7 +156,26 @@ export function updateCachedAcls(doc: Doc) {
 @scriptingGlobal
 @Deserializable('Doc', updateCachedAcls, ['id'])
 export class Doc extends RefField {
-    @observable public static CurrentlyLoading: Doc[];
+    @observable public static RecordingEvent = 0;
+
+    // this isn't really used at the moment, but is intended to indicate whether ink stroke are passed through a gesture recognizer
+    static GetRecognizeGestures() {
+        return BoolCast(Doc.UserDoc()._recognizeGestures);
+    }
+    static SetRecognizeGestures(show: boolean) {
+        Doc.UserDoc()._recognizeGestures = show;
+    }
+
+    //
+    // This controls whether fontIconButtons will display labels under their icons or not
+    //
+    static GetShowIconLabels() {
+        return BoolCast(Doc.UserDoc()._showLabel);
+    }
+    static SetShowIconLabels(show: boolean) {
+        Doc.UserDoc()._showLabel = show;
+    }
+    @observable public static CurrentlyLoading: Doc[] = []; // this assignment doesn't work. the actual assignment happens in DocumentManager's constructor
     // removes from currently loading display
     @action
     public static removeCurrentlyLoading(doc: Doc) {
@@ -169,9 +188,6 @@ export class Doc extends RefField {
     // adds doc to currently loading display
     @action
     public static addCurrentlyLoading(doc: Doc) {
-        if (!Doc.CurrentlyLoading) {
-            Doc.CurrentlyLoading = [];
-        }
         if (Doc.CurrentlyLoading.indexOf(doc) === -1) {
             Doc.CurrentlyLoading.push(doc);
         }
diff --git a/src/fields/RichTextUtils.ts b/src/fields/RichTextUtils.ts
index 24cd078f2..5ecf25e08 100644
--- a/src/fields/RichTextUtils.ts
+++ b/src/fields/RichTextUtils.ts
@@ -2,20 +2,20 @@ import { AssertionError } from 'assert';
 import { docs_v1 } from 'googleapis';
 import { Fragment, Mark, Node } from 'prosemirror-model';
 import { sinkListItem } from 'prosemirror-schema-list';
-import { Utils, DashColor } from '../Utils';
-import { Docs, DocUtils } from '../client/documents/Documents';
-import { schema } from '../client/views/nodes/formattedText/schema_rts';
+import { EditorState, TextSelection, Transaction } from 'prosemirror-state';
+import { GoogleApiClientUtils } from '../client/apis/google_docs/GoogleApiClientUtils';
 import { GooglePhotos } from '../client/apis/google_docs/GooglePhotosClientUtils';
 import { DocServer } from '../client/DocServer';
+import { Docs, DocUtils } from '../client/documents/Documents';
 import { Networking } from '../client/Network';
 import { FormattedTextBox } from '../client/views/nodes/formattedText/FormattedTextBox';
+import { schema } from '../client/views/nodes/formattedText/schema_rts';
+import { DashColor, Utils } from '../Utils';
 import { Doc, Opt } from './Doc';
 import { Id } from './FieldSymbols';
 import { RichTextField } from './RichTextField';
 import { Cast, StrCast } from './Types';
 import Color = require('color');
-import { EditorState, TextSelection, Transaction } from 'prosemirror-state';
-import { GoogleApiClientUtils } from '../client/apis/google_docs/GoogleApiClientUtils';
 
 export namespace RichTextUtils {
     const delimiter = '\n';
-- 
cgit v1.2.3-70-g09d2


From ae9ec0179e556f44bb9404f319d326321e73cb1f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sun, 27 Aug 2023 22:15:27 -0400
Subject: fixed coloring of Select box in properties view for filters

---
 src/client/views/FilterPanel.tsx | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index b61ff35c7..0d4f4df5a 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -15,6 +15,7 @@ import { undoable } from '../util/UndoManager';
 import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
+import { SettingsManager } from '../util/SettingsManager';
 
 interface filterProps {
     rootDoc: Doc;
@@ -278,7 +279,41 @@ export class FilterPanel extends React.Component<filterProps> {
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
                     <div style={{ width: '100%' }}>
-                        <Select placeholder="Add a filter..." options={options} isMulti={false} onChange={val => this.facetClick((val as UserOptions).value)} onKeyDown={e => e.stopPropagation()} value={null} closeMenuOnSelect={true} />
+                        <Select
+                            styles={{
+                                control: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                placeholder: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                input: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: SettingsManager.userBackgroundColor,
+                                }),
+                                option: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    color: SettingsManager.userColor,
+                                    background: !state.isFocused ? SettingsManager.userBackgroundColor : SettingsManager.userVariantColor,
+                                }),
+                                menuList: (baseStyles, state) => ({
+                                    ...baseStyles,
+                                    backgroundColor: SettingsManager.userBackgroundColor,
+                                }),
+                            }}
+                            placeholder="Add a filter..."
+                            options={options}
+                            isMulti={false}
+                            onChange={val => this.facetClick((val as UserOptions).value)}
+                            onKeyDown={e => e.stopPropagation()}
+                            value={null}
+                            closeMenuOnSelect={true}
+                        />
                     </div>
                     {/* THE FOLLOWING CODE SHOULD BE DEVELOPER FOR BOOLEAN EXPRESSION (AND / OR) */}
                     {/* <div className="filterBox-select-bool"> 
-- 
cgit v1.2.3-70-g09d2


From cfef242e9b76ba9caca2fc1871af74af6775538f Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 12 Sep 2023 20:43:20 -0400
Subject: dropping link button on same collection makes a pushpin. fixed broken
 undo typing to crate doc in sidebar. fixed min/max scaling for cropped images
 and made annotationOverlays start to use it.   Fixed nested text boxes to
 stopPropagation on pointer down to enable editing of translations in sidebar.
 moved sidebar filters onto doc's filters.  Added metadata filters back to
 sidebar.  Added an -any- option to filtersPanel.  fixed schema view preview
 window,  added buttons and sliders.

---
 package-lock.json                                  | 119 ++++++++++++++++-----
 package.json                                       |   4 +-
 src/client/documents/Documents.ts                  |   7 +-
 src/client/util/CurrentUserUtils.ts                |  10 +-
 src/client/views/FilterPanel.tsx                   |  20 ++--
 src/client/views/PropertiesView.tsx                |   7 +-
 src/client/views/SidebarAnnos.tsx                  |  30 +++---
 src/client/views/StyleProvider.tsx                 |   2 +-
 .../views/collections/CollectionStackingView.tsx   |   2 +-
 .../CollectionStackingViewFieldColumn.tsx          |   6 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  |  44 +++++---
 .../collectionSchema/CollectionSchemaView.scss     |   8 +-
 .../collectionSchema/CollectionSchemaView.tsx      |   1 +
 .../collections/collectionSchema/SchemaRowBox.tsx  |   4 +-
 .../collectionSchema/SchemaTableCell.tsx           |  26 ++++-
 src/client/views/global/globalScripts.ts           |   8 +-
 .../views/nodes/CollectionFreeFormDocumentView.tsx |   1 -
 src/client/views/nodes/ImageBox.tsx                |  10 +-
 src/client/views/nodes/PDFBox.tsx                  |   4 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |  51 ++++++---
 src/fields/Doc.ts                                  |   1 +
 21 files changed, 255 insertions(+), 110 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/package-lock.json b/package-lock.json
index e0e54769a..fbfdf0136 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7244,12 +7244,97 @@
                                         "strip-ansi": "^7.0.1"
                                     }
                                 },
+                                "string-width-cjs": {
+                                    "version": "npm:string-width@4.2.3",
+                                    "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                    "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                    "requires": {
+                                        "emoji-regex": "^8.0.0",
+                                        "is-fullwidth-code-point": "^3.0.0",
+                                        "strip-ansi": "^6.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
+                                },
                                 "strip-ansi": {
                                     "version": "7.1.0",
                                     "bundled": true,
                                     "requires": {
                                         "ansi-regex": "^6.0.1"
                                     }
+                                },
+                                "strip-ansi-cjs": {
+                                    "version": "npm:strip-ansi@6.0.1",
+                                    "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                    "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                    "requires": {
+                                        "ansi-regex": "^5.0.1"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        }
+                                    }
+                                },
+                                "wrap-ansi-cjs": {
+                                    "version": "npm:wrap-ansi@7.0.0",
+                                    "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
+                                    "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
+                                    "requires": {
+                                        "ansi-styles": "^4.0.0",
+                                        "string-width": "^4.1.0",
+                                        "strip-ansi": "^6.0.0"
+                                    },
+                                    "dependencies": {
+                                        "ansi-regex": {
+                                            "version": "5.0.1",
+                                            "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+                                            "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
+                                        },
+                                        "emoji-regex": {
+                                            "version": "8.0.0",
+                                            "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz",
+                                            "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A=="
+                                        },
+                                        "string-width": {
+                                            "version": "4.2.3",
+                                            "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+                                            "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
+                                            "requires": {
+                                                "emoji-regex": "^8.0.0",
+                                                "is-fullwidth-code-point": "^3.0.0",
+                                                "strip-ansi": "^6.0.1"
+                                            }
+                                        },
+                                        "strip-ansi": {
+                                            "version": "6.0.1",
+                                            "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+                                            "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+                                            "requires": {
+                                                "ansi-regex": "^5.0.1"
+                                            }
+                                        }
+                                    }
                                 }
                             }
                         },
@@ -8754,7 +8839,7 @@
                             }
                         },
                         "string-width-cjs": {
-                            "version": "npm:string-width@4.2.3",
+                            "version": "npm:string-width-cjs@4.2.3",
                             "bundled": true,
                             "requires": {
                                 "emoji-regex": "^8.0.0",
@@ -8777,7 +8862,7 @@
                             }
                         },
                         "strip-ansi-cjs": {
-                            "version": "npm:strip-ansi@6.0.1",
+                            "version": "npm:strip-ansi-cjs@6.0.1",
                             "bundled": true,
                             "requires": {
                                 "ansi-regex": "^5.0.1"
@@ -8936,7 +9021,7 @@
                             }
                         },
                         "wrap-ansi-cjs": {
-                            "version": "npm:wrap-ansi@7.0.0",
+                            "version": "npm:wrap-ansi-cjs@7.0.0",
                             "bundled": true,
                             "requires": {
                                 "ansi-styles": "^4.0.0",
@@ -14742,6 +14827,11 @@
                 "node-forge": "^0.10.0"
             }
         },
+        "google-translate-api-browser": {
+            "version": "3.0.1",
+            "resolved": "https://registry.npmjs.org/google-translate-api-browser/-/google-translate-api-browser-3.0.1.tgz",
+            "integrity": "sha512-KTLodkyGBWMK9IW6QIeJ2zCuju4Z0CLpbkADKo+yLhbSTD4l+CXXpQ/xaynGVAzeBezzJG6qn8MLeqOq3SmW0A=="
+        },
         "googleapis": {
             "version": "40.0.1",
             "resolved": "https://registry.npmjs.org/googleapis/-/googleapis-40.0.1.tgz",
@@ -27327,29 +27417,6 @@
             "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
             "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
         },
-        "translate-google-api": {
-            "version": "1.0.4",
-            "resolved": "https://registry.npmjs.org/translate-google-api/-/translate-google-api-1.0.4.tgz",
-            "integrity": "sha512-KVXmo4+64/H1vIbnzf2zNiJ2JLeEB3jrEnNRP2EFNAGNqna/5bmw/Cps3pCHu0n3BzTOoWh9u6wFvrRYdzQ6Iw==",
-            "requires": {
-                "axios": "^0.20.0"
-            },
-            "dependencies": {
-                "axios": {
-                    "version": "0.20.0",
-                    "resolved": "https://registry.npmjs.org/axios/-/axios-0.20.0.tgz",
-                    "integrity": "sha512-ANA4rr2BDcmmAQLOKft2fufrtuvlqR+cXNNinUmvfeSNCOF98PZL+7M/v1zIdGo7OLjEA9J2gXJL+j4zGsl0bA==",
-                    "requires": {
-                        "follow-redirects": "^1.10.0"
-                    }
-                },
-                "follow-redirects": {
-                    "version": "1.15.2",
-                    "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
-                    "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA=="
-                }
-            }
-        },
         "traverse-chain": {
             "version": "0.1.0",
             "resolved": "https://registry.npmjs.org/traverse-chain/-/traverse-chain-0.1.0.tgz",
diff --git a/package.json b/package.json
index 67fdedeb2..d013ad74d 100644
--- a/package.json
+++ b/package.json
@@ -164,6 +164,7 @@
         "@types/three": "^0.126.2",
         "@types/web": "0.0.53",
         "@webscopeio/react-textarea-autocomplete": "^4.9.1",
+        "D": "^1.0.0",
         "adm-zip": "^0.4.16",
         "archiver": "^3.1.1",
         "array-batcher": "^1.2.3",
@@ -196,7 +197,6 @@
         "cors": "^2.8.5",
         "csv-parser": "^3.0.0",
         "csv-stringify": "^6.3.0",
-        "D": "^1.0.0",
         "d3": "^7.6.1",
         "depcheck": "^0.9.2",
         "equation-editor-react": "github:bobzel/equation-editor-react#useLocally",
@@ -219,6 +219,7 @@
         "golden-layout": "^1.5.9",
         "google-auth-library": "^4.2.4",
         "google-maps-react": "^2.0.6",
+        "google-translate-api-browser": "^3.0.1",
         "googleapis": "^40.0.0",
         "googlephotos": "^0.2.5",
         "got": "^12.0.1",
@@ -327,7 +328,6 @@
         "textarea-caret": "^3.1.0",
         "three": "^0.127.0",
         "tough-cookie": "^4.0.0",
-        "translate-google-api": "^1.0.4",
         "typescript-collections": "^1.3.3",
         "typescript-language-server": "^0.4.0",
         "url-loader": "^1.1.2",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index bb60cb329..85ee4ef59 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -145,7 +145,6 @@ class CTypeInfo extends FInfo {
 class DTypeInfo extends FInfo {
     fieldType? = 'enumeration';
     values? = Array.from(Object.keys(DocumentType));
-    readOnly = true;
 }
 class DateInfo extends FInfo {
     fieldType? = 'date';
@@ -338,11 +337,13 @@ export class DocumentOptions {
 
     // freeform properties
     _freeform_backgroundGrid?: BOOLt = new BoolInfo('whether background grid is shown on freeform collections');
+    _freeform_scale_min?: NUMt = new NumInfo('how far out a view can zoom (used by image/videoBoxes that are clipped');
+    _freeform_scale_max?: NUMt = new NumInfo('how far in a view can zoom (used by sidebar freeform views');
     _freeform_scale?: NUMt = new NumInfo('how much a freeform view has been scaled (zoomed)');
     _freeform_panX?: NUMt = new NumInfo('horizontal pan location of a freeform view');
     _freeform_panY?: NUMt = new NumInfo('vertical pan location of a freeform view');
     _freeform_noAutoPan?: BOOLt = new BoolInfo('disables autopanning when this item is dragged');
-    _freeform_noZoom?: BOOLt = new BoolInfo('disables zooming');
+    _freeform_noZoom?: BOOLt = new BoolInfo('disables zooming (used by Pile docs)');
 
     //BUTTONS
     buttonText?: string;
@@ -426,7 +427,7 @@ export class DocumentOptions {
     treeView_FreezeChildren?: STRt = new StrInfo('set (add, remove, add|remove) to disable adding, removing or both from collection');
 
     sidebar_color?: string; // background color of text sidebar
-    sidebar_collectionType?: string; // collection type of text sidebar
+    sidebar_type_collection?: string; // collection type of text sidebar
 
     data_dashboards?: List<any>; // list of dashboards used in shareddocs;
     text?: string;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8bedea562..527f251f9 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -627,6 +627,11 @@ export class CurrentUserUtils {
             { title: "Z order", icon: "z",                  toolTip: "Keep Z order on Drag", btnType: ButtonType.ToggleButton, expertMode: false, funcs: {}, scripts: { onClick: '{ return toggleRaiseOnDrag(_readOnly_);}'}}, // Only when floating document is selected in freeform
         ]
     }
+    static stackTools(): Button[] {
+        return [
+            { title: "Center",    icon: "align-center",        toolTip: "Center Align Stack",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center",     funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+        ]
+    }
     static viewTools(): Button[] {
         return [
             { title: "Snap",      icon: "th",                  toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(self.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
@@ -682,8 +687,8 @@ export class CurrentUserUtils {
 
     static schemaTools():Button[] {
         return [
-            {title: "Show preview", toolTip: "Show selection preview", btnType: ButtonType.ToggleButton, buttonText: "Show Preview", icon: "eye", scripts:{ onClick: '{ return toggleSchemaPreview(_readOnly_); }'} },
-            {title: "Single Lines", toolTip: "Single Line Rows",       btnType: ButtonType.ToggleButton, buttonText: "Single Line",  icon: "eye", scripts:{ onClick: '{ return toggleSingleLineSchema(_readOnly_); }'} },
+            {title: "Preview", toolTip: "Show selection preview", btnType: ButtonType.ToggleButton, icon: "portrait", scripts:{ onClick: '{ return toggleSchemaPreview(_readOnly_); }'} },
+            {title: "1 Line",toolTip: "Single Line Rows",       btnType: ButtonType.ToggleButton, icon: "eye", scripts:{ onClick: '{ return toggleSingleLineSchema(_readOnly_); }'} },
         ];
     }
 
@@ -713,6 +718,7 @@ export class CurrentUserUtils {
             { title: "Ink",     icon: "Ink",           toolTip: "Ink functions",        subMenu: CurrentUserUtils.inkTools(),    expertMode: false, toolType:DocumentType.INK,            funcs: {                                                                             linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`}, scripts: { onClick: 'setInkToolDefaults()'} }, // Always available
             { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: CurrentUserUtils.freeTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
             { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
+            { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: CurrentUserUtils.stackTools(),  expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Web is selected
             { title: "Schema",  icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(self.toolType, self.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(self.toolType, self.expertMode)`} }, // Only when Schema is selected
            ];
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 0d4f4df5a..a601706ce 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -235,7 +235,7 @@ export class FilterPanel extends React.Component<filterProps> {
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchUtil.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
-        const set = new Set<string>([String.fromCharCode(127) + '--undefined--']);
+        const set = new Set<string>([String.fromCharCode(127) + '--undefined--', Doc.FilterAny]);
         if (facetHeader === 'tags')
             allCollectionDocs.forEach(child =>
                 StrListCast(child[facetHeader])
@@ -257,24 +257,16 @@ export class FilterPanel extends React.Component<filterProps> {
     };
 
     render() {
-        // console.log('this is frist one today ' + this._allFacets);
-        this._allFacets.forEach(element => console.log(element));
-        // const options = Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => pair[1].filterable ).map(facet => value: facet, label: facet) //this._allFacets.filter(facet => this.activeFacetHeaders.indexOf(facet) === -1).map(facet => ({ value: facet, label: facet }));
-        // console.log('HEELLLLLL ' + DocumentOptions);
-
-        let filteredOptions: string[] = ['author', 'tags', 'text', 'acl-Guest'];
+        let filteredOptions: string[] = ['author', 'tags', 'text', 'acl-Guest', ...this._allFacets.filter(facet => facet[0] === facet.charAt(0).toUpperCase())];
 
         Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => {
             if (pair[1].filterable) {
                 filteredOptions.push(pair[0]);
-                console.log('THIS IS FILTERABLE ALKDJFIIEII' + filteredOptions);
             }
         });
 
         let options = filteredOptions.map(facet => ({ value: facet, label: facet }));
 
-        //  Object.entries(this._documentOptions).forEach((pair: [string, FInfo]) => console.log('this is first piar ' + pair[0] + ' this is second piar ' + pair[1].filterable));
-
         return (
             <div className="filterBox-treeView">
                 <div className="filterBox-select">
@@ -398,13 +390,13 @@ export class FilterPanel extends React.Component<filterProps> {
                         <div>
                             <input
                                 style={{ width: 20, marginLeft: 20 }}
-                                checked={
+                                checked={['check', 'exists'].includes(
                                     StrListCast(this.targetDoc._childFilters)
                                         .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader && filter.split(Doc.FilterSep)[1] == facetValue)
-                                        ?.split(Doc.FilterSep)[2] === 'check'
-                                }
+                                        ?.split(Doc.FilterSep)[2] ?? ''
+                                )}
                                 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 ? (fval === Doc.FilterAny ? 'exists' : 'check') : 'remove'), 'set filter')}
                             />
                             {facetValue}
                         </div>
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 699aafe80..21b6bfac5 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -18,7 +18,7 @@ import { ComputedField } from '../../fields/ScriptField';
 import { Cast, DocCast, NumCast, StrCast } from '../../fields/Types';
 import { GetEffectiveAcl, normalizeEmail, SharingPermissions } from '../../fields/util';
 import { emptyFunction, returnEmptyDoclist, returnEmptyFilter, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../Utils';
-import { DocumentType } from '../documents/DocumentTypes';
+import { CollectionViewType, DocumentType } from '../documents/DocumentTypes';
 import { DocumentManager } from '../util/DocumentManager';
 import { GroupManager } from '../util/GroupManager';
 import { LinkManager } from '../util/LinkManager';
@@ -122,6 +122,9 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get isInk() {
         return this.selectedDoc?.type === DocumentType.INK;
     }
+    @computed get isStack() {
+        return this.selectedDoc?.type_collection === CollectionViewType.Stacking;
+    }
 
     rtfWidth = () => (!this.selectedDoc ? 0 : Math.min(this.selectedDoc?.[Width](), this.props.width - 20));
     rtfHeight = () => (!this.selectedDoc ? 0 : this.rtfWidth() <= this.selectedDoc?.[Width]() ? Math.min(this.selectedDoc?.[Height](), this.MAX_EMBED_HEIGHT) : this.MAX_EMBED_HEIGHT);
@@ -1096,6 +1099,8 @@ export class PropertiesView extends React.Component<PropertiesViewProps> {
     @computed get transformEditor() {
         return (
             <div className="transform-editor">
+                {!this.isStack ? null : this.getNumber('Gap', ' px', 0, 200, NumCast(this.selectedDoc!.gridGap), (val: number) => !isNaN(val) && (this.selectedDoc!.gridGap = val))}
+                {!this.isStack ? null : this.getNumber('xMargin', ' px', 0, 500, NumCast(this.selectedDoc!.xMargin), (val: number) => !isNaN(val) && (this.selectedDoc!.xMargin = val))}
                 {this.isInk ? this.controlPointsButton : null}
                 {this.getNumber('Width', ' px', 0, Math.max(1000, this.shapeWid), this.shapeWid, (val: number) => !isNaN(val) && (this.shapeWid = val), 1000, 1)}
                 {this.getNumber('Height', ' px', 0, Math.max(1000, this.shapeHgt), this.shapeHgt, (val: number) => !isNaN(val) && (this.shapeHgt = val), 1000, 1)}
diff --git a/src/client/views/SidebarAnnos.tsx b/src/client/views/SidebarAnnos.tsx
index ff347d65f..1e1b8e0e6 100644
--- a/src/client/views/SidebarAnnos.tsx
+++ b/src/client/views/SidebarAnnos.tsx
@@ -62,12 +62,9 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
         DocListCast(this.props.rootDoc[this.sidebarKey]).forEach(doc => keys.add(StrCast(doc.author)));
         return Array.from(keys.keys()).sort();
     }
-    get filtersKey() {
-        return '_' + this.sidebarKey + '_childFilters';
-    }
 
     anchorMenuClick = (anchor: Doc, filterExlusions?: string[]) => {
-        const startup = StrListCast(this.props.rootDoc.childFilters)
+        const startup = this.childFilters()
             .map(filter => filter.split(':')[0])
             .join(' ');
         const target = Docs.Create.TextDocument(startup, {
@@ -151,8 +148,9 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     };
     makeDocUnfiltered = (doc: Doc) => {
         if (DocListCast(this.props.rootDoc[this.sidebarKey]).find(anno => Doc.AreProtosEqual(doc.layout_unrendered ? DocCast(doc.annotationOn) : doc, anno))) {
-            if (this.props.layoutDoc[this.filtersKey]) {
-                this.props.layoutDoc[this.filtersKey] = new List<string>();
+            if (this.childFilters()) {
+                // if any child filters exist, get rid of them
+                this.props.layoutDoc._childFilters = new List<string>();
             }
             return true;
         }
@@ -178,7 +176,7 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     addDocument = (doc: Doc | Doc[]) => this.props.sidebarAddDocument(doc, this.sidebarKey);
     moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean) => this.props.moveDocument(doc, targetCollection, addDocument, this.sidebarKey);
     removeDocument = (doc: Doc | Doc[]) => this.props.removeDocument(doc, this.sidebarKey);
-    childFilters = () => [...StrListCast(this.props.layoutDoc._childFilters), ...StrListCast(this.props.layoutDoc[this.filtersKey])];
+    childFilters = () => StrListCast(this.props.layoutDoc._childFilters);
     layout_showTitle = () => 'title';
     setHeightCallback = (height: number) => this.props.setHeight?.(height + this.filtersHeight());
     sortByLinkAnchorY = (a: Doc, b: Doc) => {
@@ -188,25 +186,25 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
     };
     render() {
         const renderTag = (tag: string) => {
-            const active = StrListCast(this.props.rootDoc[this.filtersKey]).includes(`tags::${tag}::check`);
+            const active = this.childFilters().includes(`tags${Doc.FilterSep}${tag}${Doc.FilterSep}check`);
             return (
-                <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'tags', tag, 'check', true, this.sidebarKey, e.shiftKey)}>
+                <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'tags', tag, 'check', true, undefined, e.shiftKey)}>
                     {tag}
                 </div>
             );
         };
         const renderMeta = (tag: string, dflt: FieldResult<Field>) => {
-            const active = StrListCast(this.props.rootDoc[this.filtersKey]).includes(`${tag}:${dflt}:exists`);
+            const active = this.childFilters().includes(`${tag}${Doc.FilterSep}${Doc.FilterAny}${Doc.FilterSep}exists`);
             return (
-                <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, tag, dflt, 'exists', true, this.sidebarKey, e.shiftKey)}>
+                <div key={tag} className={`sidebarAnnos-filterTag${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, tag, Doc.FilterAny, 'exists', true, undefined, e.shiftKey)}>
                     {tag}
                 </div>
             );
         };
         const renderUsers = (user: string) => {
-            const active = StrListCast(this.props.rootDoc[this.filtersKey]).includes(`author:${user}:check`);
+            const active = this.childFilters().includes(`author:${user}:check`);
             return (
-                <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'author', user, 'check', true, this.sidebarKey, e.shiftKey)}>
+                <div key={user} className={`sidebarAnnos-filterUser${active ? '-active' : ''}`} onClick={e => Doc.setDocFilter(this.props.rootDoc, 'author', user, 'check', true, undefined, e.shiftKey)}>
                     {user}
                 </div>
             );
@@ -224,11 +222,11 @@ export class SidebarAnnos extends React.Component<FieldViewProps & ExtraProps> {
                     height: '100%',
                 }}>
                 <div className="sidebarAnnos-tagList" style={{ height: this.filtersHeight() }} onWheel={e => e.stopPropagation()}>
-                    {this.allUsers.map(renderUsers)}
+                    {this.allUsers.length > 1 ? this.allUsers.map(renderUsers) : null}
                     {this.allHashtags.map(renderTag)}
-                    {/* {Array.from(this.allMetadata.keys())
+                    {Array.from(this.allMetadata.keys())
                         .sort()
-                        .map(key => renderMeta(key, this.allMetadata.get(key)))} */}
+                        .map(key => renderMeta(key, this.allMetadata.get(key)))}
                 </div>
 
                 <div style={{ width: '100%', height: `calc(100% - 38px)`, position: 'relative' }}>
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 85aa5ad83..0a14b93f7 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -317,7 +317,7 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                                 "this view inherits filters from one of its parents"}
                             color={SettingsManager.userColor}
                             background={showFilterIcon}
-                            items={[...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])].map(dv => ({
+                            items={[ DocumentManager.Instance.getDocumentView(Doc.ActiveDashboard)!, ...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])].map(dv => ({
                                 text: StrCast(dv.rootDoc.title),
                                 val: dv as any,
                                 style: {color:SettingsManager.userColor, background:SettingsManager.userBackgroundColor},
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 9ba4cb6cf..8c40567d3 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -138,7 +138,7 @@ export class CollectionStackingView extends CollectionSubView<Partial<collection
             // assuming we need to get rowSpan because we might be dealing with many columns. Grid gap makes sense if multiple columns
             const rowSpan = Math.ceil((height() + this.gridGap) / this.gridGap);
             // just getting the style
-            const style = this.isStackingView ? { width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
+            const style = this.isStackingView ? { margin: this.rootDoc._stacking_alignCenter ? 'auto' : undefined, width: width(), marginTop: i ? this.gridGap : 0, height: height() } : { gridRowEnd: `span ${rowSpan}` };
             // So we're choosing whether we're going to render a column or a masonry doc
             return (
                 <div className={`collectionStackingView-${this.isStackingView ? 'columnDoc' : 'masonryDoc'}`} key={d[Id]} style={style}>
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 3aadeffcd..3598d548a 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -361,7 +361,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                             //TODO: would be great if there was additional space beyond the frame, so that you can actually see your
                             // bottom note
                             //TODO: ok, so we are using a single column, and this is it!
-                            <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton" style={{ width: 'calc(100% - 25px)', maxWidth: this.props.columnWidth / this.props.numGroupColumns - 25, marginBottom: 10 }}>
+                            <div
+                                key={`${heading}-add-document`}
+                                onKeyDown={e => e.stopPropagation()}
+                                className="collectionStackingView-addDocumentButton"
+                                style={{ width: 'calc(100% - 25px)', maxWidth: this.props.columnWidth / this.props.numGroupColumns - 25, marginBottom: 10 }}>
                                 <EditableView
                                     GetValue={returnEmptyString}
                                     SetValue={this.addNewTextDoc}
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7768ca547..5f65aa563 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -52,6 +52,7 @@ import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCurso
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
 import React = require('react');
+import { FollowLinkScript } from '../../../util/LinkFollower';
 
 export type collectionFreeformViewProps = {
     NativeWidth?: () => number;
@@ -421,11 +422,27 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         if (linkDragData.linkDragView.props.docViewPath().includes(this.props.docViewPath().lastElement())) {
             let added = false;
             //  do nothing if link is dropped into any freeform view parent of dragged document
-            if (!linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.rootDoc) {
-                const source = Docs.Create.TextDocument('', { _width: 200, _height: 75, x: xp, y: yp, title: 'dropped annotation' });
-                added = this.props.addDocument?.(source) ? true : false;
-                de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
-            }
+            const source =
+                !linkDragData.dragDocument.embedContainer || linkDragData.dragDocument.embedContainer !== this.rootDoc
+                    ? Docs.Create.TextDocument('', { _width: 200, _height: 75, x: xp, y: yp, title: 'dropped annotation' })
+                    : Docs.Create.FontIconDocument({
+                          title: 'anchor',
+                          icon_label: '',
+                          followLinkToggle: true,
+                          icon: 'map-pin',
+                          x: xp,
+                          y: yp,
+                          backgroundColor: '#ACCEF7',
+                          layout_hideAllLinks: true,
+                          layout_hideLinkButton: true,
+                          _width: 15,
+                          _height: 15,
+                          _xPadding: 0,
+                          onClick: FollowLinkScript(),
+                      });
+            added = this.props.addDocument?.(source) ? true : false;
+            de.complete.linkDocument = DocUtils.MakeLink(linkDragData.linkSourceGetAnchor(), source, { link_relationship: 'annotated by:annotation of' }); // TODODO this is where in text links get passed
+
             e.stopPropagation();
             !added && e.preventDefault();
             return added;
@@ -1024,7 +1041,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
     @action
     zoom = (pointX: number, pointY: number, deltaY: number): void => {
-        if (this.Document._isGroup || this.Document._freeform_noZoom) return;
+        if (this.Document._isGroup || this.Document[this.scaleFieldKey + '_noZoom']) return;
         let deltaScale = deltaY > 0 ? 1 / 1.05 : 1.05;
         if (deltaScale < 0) deltaScale = -deltaScale;
         const [x, y] = this.getTransform().transformPoint(pointX, pointY);
@@ -1032,12 +1049,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         if (deltaScale * invTransform.Scale > 20) {
             deltaScale = 20 / invTransform.Scale;
         }
-        if (deltaScale < 1 && invTransform.Scale <= NumCast(this.rootDoc._freeform_scale_min, 1) && this.isAnnotationOverlay) {
+        if (deltaScale < 1 && invTransform.Scale <= NumCast(this.rootDoc[this.scaleFieldKey + '_min'])) {
             this.setPan(0, 0);
             return;
         }
-        if (deltaScale * invTransform.Scale < NumCast(this.rootDoc._freeform_scale_min, 1) && this.isAnnotationOverlay) {
-            deltaScale = NumCast(this.rootDoc._freeform_scale_min, 1) / invTransform.Scale;
+        if (deltaScale * invTransform.Scale > NumCast(this.rootDoc[this.scaleFieldKey + '_max'], Number.MAX_VALUE)) {
+            deltaScale = NumCast(this.rootDoc[this.scaleFieldKey + '_max'], 1) / invTransform.Scale;
+        }
+        if (deltaScale * invTransform.Scale < NumCast(this.rootDoc[this.scaleFieldKey + '_min'], this.isAnnotationOverlay ? 1 : 0)) {
+            deltaScale = NumCast(this.rootDoc[this.scaleFieldKey + '_min'], 1) / invTransform.Scale;
         }
 
         const localTransform = invTransform.scaleAbout(deltaScale, x, y);
@@ -1527,12 +1547,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 });
             });
 
-        if (this.props.isAnnotationOverlay && this.props.Document[this.scaleFieldKey]) {
-            // don't zoom out farther than 1-1 if it's a bounded item (image, video, pdf), otherwise don't allow zooming in closer than 1-1 if it's a text sidebar
-            if (this.props.viewField) this.props.Document[this.scaleFieldKey] = Math.min(1, this.zoomScaling());
-            else this.props.Document[this.scaleFieldKey] = Math.max(1, this.zoomScaling()); // NumCast(this.props.Document[this.scaleFieldKey]));
-        }
-
         this.Document._freeform_useClusters && !this._clusterSets.length && this.childDocs.length && this.updateClusters(true);
         return elements;
     }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
index 9f8ef763a..76bd392a5 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.scss
@@ -193,6 +193,12 @@
     flex-direction: row;
     height: 100%;
     overflow: auto;
+
+    .schemaSelectionCell {
+        align-self: center;
+        width: 100%;
+        display: flex;
+    }
 }
 
 .schema-header-row > .schema-column-header:nth-child(2) > .left {
@@ -205,7 +211,7 @@
     overflow-x: hidden;
     overflow-y: auto;
     padding: 5px;
-    display: inline-block;
+    display: inline-flex;
 }
 
 .schema-row {
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 5c7dcc1a4..d757d5349 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -836,6 +836,7 @@ export class CollectionSchemaView extends CollectionSubView() {
                 <div ref={this._menuTarget} style={{ background: 'red', top: 0, left: 0, position: 'absolute', zIndex: 10000 }}></div>
                 <div
                     className="schema-table"
+                    style={{ width: `calc(100% - ${this.previewWidth + 4}px)` }}
                     onWheel={e => this.props.isContentActive() && e.stopPropagation()}
                     ref={r => {
                         // prevent wheel events from passively propagating up through containers
diff --git a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
index 5b4fc34bb..4e418728f 100644
--- a/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaRowBox.tsx
@@ -16,7 +16,7 @@ import { CollectionSchemaView } from './CollectionSchemaView';
 import './CollectionSchemaView.scss';
 import { SchemaTableCell } from './SchemaTableCell';
 import { Transform } from '../../../util/Transform';
-import { IconButton } from 'browndash-components';
+import { IconButton, Size } from 'browndash-components';
 import { CgClose } from 'react-icons/cg';
 import { FaExternalLinkAlt } from 'react-icons/fa';
 import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../../Utils';
@@ -117,6 +117,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <IconButton
                         tooltip="close"
                         icon={<CgClose size={'16px'} />}
+                        size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
                                 this,
@@ -133,6 +134,7 @@ export class SchemaRowBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     <IconButton
                         tooltip="open preview"
                         icon={<FaExternalLinkAlt />}
+                        size={Size.XSMALL}
                         onPointerDown={e =>
                             setupMoveUpEvents(
                                 this,
diff --git a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
index 1c9c0de53..e18f27fb0 100644
--- a/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
+++ b/src/client/views/collections/collectionSchema/SchemaTableCell.tsx
@@ -325,10 +325,34 @@ export class SchemaEnumerationCell extends React.Component<SchemaTableCellProps>
         const { color, textDecoration, fieldProps, cursor, pointerEvents } = SchemaTableCell.renderProps(this.props);
         const options = this.props.options?.map(facet => ({ value: facet, label: facet }));
         return (
-            <div className="schemaSelectionCell" style={{ display: 'flex', color, textDecoration, cursor, pointerEvents }}>
+            <div className="schemaSelectionCell" style={{ color, textDecoration, cursor, pointerEvents }}>
                 <div style={{ width: '100%' }}>
                     <Select
                         styles={{
+                            container: base => ({
+                                ...base,
+                                height: 20,
+                            }),
+                            control: base => ({
+                                ...base,
+                                height: 20,
+                                minHeight: 20,
+                            }),
+                            placeholder: base => ({
+                                ...base,
+                                top: '40%',
+                            }),
+                            input: base => ({
+                                ...base,
+                                height: 20,
+                                minHeight: 20,
+                                margin: 0,
+                            }),
+                            indicatorsContainer: base => ({
+                                ...base,
+                                height: 20,
+                                transform: 'scale(0.75)',
+                            }),
                             menuPortal: base => ({
                                 ...base,
                                 left: 0,
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 9b9cc6d24..d8ed93bd7 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -85,10 +85,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.props.CollectionFreeFormDocumentView?.().float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'viewAllPersist', checkResult?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'viewAllPersist', checkResult?: boolean) {
     const selected = SelectionManager.Docs().lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'viewAllPersist', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'viewAllPersist', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc._freeform_backgroundGrid, false),
             setDoc: (doc:Doc) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -101,6 +101,10 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'grid' | 'snapli
             checkResult: (doc:Doc) => BoolCast(doc._freeform_fitContentsToBox, false),
             setDoc: (doc:Doc) => doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox,
         }],
+        ['center', {
+            checkResult: (doc:Doc) => BoolCast(doc._stacking_alignCenter, false),
+            setDoc: (doc:Doc) => doc._stacking_alignCenter = !doc._stacking_alignCenter,
+        }],
         ['viewAllPersist', {
             checkResult: (doc:Doc) => false,
             setDoc: (doc:Doc) => doc.fitContentOnce = true
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index 6710cee63..4a438f826 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -40,7 +40,6 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         { key: 'opacity', val: 1 },
         { key: '_currentFrame' },
         { key: 'freeform_scale', val: 1 },
-        { key: 'freeform_scale', val: 1 },
         { key: 'freeform_panX' },
         { key: 'freeform_panY' },
     ]; // fields that are configured to be animatable using animation frames
diff --git a/src/client/views/nodes/ImageBox.tsx b/src/client/views/nodes/ImageBox.tsx
index 9eaebfc8c..d2508e7cf 100644
--- a/src/client/views/nodes/ImageBox.tsx
+++ b/src/client/views/nodes/ImageBox.tsx
@@ -231,13 +231,13 @@ export class ImageBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProp
         croppingProto['data_nativeWidth'] = anchw;
         croppingProto['data_nativeHeight'] = anchh;
         croppingProto.freeform_scale = viewScale;
-        croppingProto.freeform_scaleMin = viewScale;
+        croppingProto.freeform_scale_min = viewScale;
         croppingProto.freeform_panX = anchx / viewScale;
         croppingProto.freeform_panY = anchy / viewScale;
-        croppingProto.freeform_panXMin = anchx / viewScale;
-        croppingProto.freeform_panXMax = anchw / viewScale;
-        croppingProto.freeform_panYMin = anchy / viewScale;
-        croppingProto.freeform_panYMax = anchh / viewScale;
+        croppingProto.freeform_panX_min = anchx / viewScale;
+        croppingProto.freeform_panX_max = anchw / viewScale;
+        croppingProto.freeform_panY_min = anchy / viewScale;
+        croppingProto.freeform_panY_max = anchh / viewScale;
         if (addCrop) {
             DocUtils.MakeLink(region, cropping, { link_relationship: 'cropped image' });
             cropping.x = NumCast(this.rootDoc.x) + this.rootDoc[Width]();
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 6f9d96a33..5cec8fc24 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -438,7 +438,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         return PDFBox.sidebarResizerWidth + nativeDiff * (this.props.NativeDimScaling?.() || 1);
     };
     @undoBatch
-    toggleSidebarType = () => (this.rootDoc.sidebar_collectionType = this.rootDoc.sidebar_collectionType === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform);
+    toggleSidebarType = () => (this.rootDoc[this.SidebarKey + '_type_collection'] = this.rootDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform ? CollectionViewType.Stacking : CollectionViewType.Freeform);
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
@@ -554,7 +554,7 @@ export class PDFBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
         };
         return (
             <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: '100%', right: 0, backgroundColor: `white` }}>
-                {renderComponent(StrCast(this.layoutDoc.sidebar_collectionType))}
+                {renderComponent(StrCast(this.layoutDoc[this.SidebarKey + '_type_collection']))}
             </div>
         );
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 42cc14f9c..7eab1ea4e 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -72,7 +72,9 @@ import { SummaryView } from './SummaryView';
 import applyDevTools = require('prosemirror-dev-tools');
 import React = require('react');
 import { media_state } from '../AudioBox';
-const translateGoogleApi = require('translate-google-api');
+import { setCORS } from 'google-translate-api-browser';
+// setting up cors-anywhere server address
+const translate = setCORS('http://cors-anywhere.herokuapp.com/');
 export const GoogleRef = 'googleDocId';
 type PullHandler = (exportState: Opt<GoogleApiClientUtils.Docs.ImportResult>, dataDoc: Doc) => void;
 
@@ -94,6 +96,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     static _userStyleSheet: any = addStyleSheet();
     static _hadSelection: boolean = false;
     private _sidebarRef = React.createRef<SidebarAnnos>();
+    private _sidebarTagRef = React.createRef<React.Component>();
     private _ref: React.RefObject<HTMLDivElement> = React.createRef();
     private _scrollRef: React.RefObject<HTMLDivElement> = React.createRef();
     private _editorView: Opt<EditorView>;
@@ -706,7 +709,10 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     toggleSidebar = (preview: boolean = false) => {
         const prevWidth = 1 - this.sidebarWidth() / Number(getComputedStyle(this._ref.current!).width.replace('px', ''));
         if (preview) this._showSidebar = true;
-        else this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? '50%' : '0%') !== '0%';
+        else {
+            this.layoutDoc[this.SidebarKey + '_freeform_scale_max'] = 1;
+            this.layoutDoc._layout_showSidebar = (this.layoutDoc._layout_sidebarWidthPercent = StrCast(this.layoutDoc._layout_sidebarWidthPercent, '0%') === '0%' ? '50%' : '0%') !== '0%';
+        }
 
         this.layoutDoc._width = !preview && this.SidebarShown ? NumCast(this.layoutDoc._width) * 2 : Math.max(20, NumCast(this.layoutDoc._width) * prevWidth);
     };
@@ -1580,7 +1586,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
     onPointerDown = (e: React.PointerEvent): void => {
         if ((e.nativeEvent as any).handledByInnerReactInstance) {
-            return e.stopPropagation();
+            return; //e.stopPropagation();
         } else (e.nativeEvent as any).handledByInnerReactInstance = true;
 
         if (this.Document.forceActive) e.stopPropagation();
@@ -1612,10 +1618,8 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         FormattedTextBoxComment.textBox = this;
         if (e.button === 0 && (this.props.rootSelected(true) || this.props.isSelected(true)) && !e.altKey && !e.ctrlKey && !e.metaKey) {
             if (e.clientX < this.ProseRef!.getBoundingClientRect().right) {
-                // stop propagation if not in sidebar
-                // bcz: Change. drag selecting requires that preventDefault is NOT called.  This used to happen in DocumentView,
-                //      but that's changed, so this shouldn't be needed.
-                //e.stopPropagation();  // if the text box is selected, then it consumes all down events
+                // stop propagation if not in sidebar, otherwise nested boxes will lose focus to outer boxes.
+                e.stopPropagation(); // if the text box's content is active, then it consumes all down events
                 document.addEventListener('pointerup', this.onSelectEnd);
             }
         }
@@ -1777,13 +1781,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
 
         const state = this._editorView!.state;
         const curText = state.doc.textBetween(0, state.doc.content.size, ' \n');
-        if (this.layoutDoc.sidebar_collectionType === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) {
+        if (this.layoutDoc[this.SidebarKey + '_type_collection'] === 'translation' && !this.fieldKey.includes('translation') && curText.endsWith(' ') && curText !== this._lastText) {
             try {
-                translateGoogleApi(curText, { from: 'en', to: 'es' }).then((result1: any) => {
+                translate(curText, { from: 'en', to: 'es' }).then((result1: any) => {
                     setTimeout(
                         () =>
-                            translateGoogleApi(result1[0], { from: 'es', to: 'en' }).then((result: any) => {
-                                this.dataDoc[this.fieldKey + '_translation'] = result1 + '\r\n\r\n' + result[0];
+                            translate(result1.text, { from: 'es', to: 'en' }).then((result: any) => {
+                                const tb = this._sidebarTagRef.current as FormattedTextBox;
+                                tb._editorView?.dispatch(tb._editorView!.state.tr.insertText(result1.text + '\r\n\r\n' + result.text));
                             }),
                         1000
                     );
@@ -1967,6 +1972,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 <div onPointerDown={e => setupMoveUpEvents(this, e, returnFalse, emptyFunction, () => SelectionManager.SelectView(this.props.DocumentView?.()!, false), true)}>
                     <ComponentTag
                         {...this.props}
+                        ref={this._sidebarTagRef as any}
                         setContentView={emptyFunction}
                         NativeWidth={returnZero}
                         NativeHeight={returnZero}
@@ -1989,14 +1995,14 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         fitContentsToBox={this.fitContentsToBox}
                         noSidebar={true}
                         treeViewHideTitle={true}
-                        fieldKey={this.layoutDoc.sidebar_collectionType === 'translation' ? `${this.fieldKey}_translation` : `${this.fieldKey}_sidebar`}
+                        fieldKey={this.layoutDoc[this.SidebarKey + '_type_collection'] === 'translation' ? `${this.fieldKey}_translation` : `${this.fieldKey}_sidebar`}
                     />
                 </div>
             );
         };
         return (
             <div className={'formattedTextBox-sidebar' + (Doc.ActiveTool !== InkTool.None ? '-inking' : '')} style={{ width: `${this.layout_sidebarWidthPercent}`, backgroundColor: `${this.sidebarColor}` }}>
-                {renderComponent(StrCast(this.layoutDoc.sidebar_collectionType))}
+                {renderComponent(StrCast(this.layoutDoc[this.SidebarKey + '_type_collection']))}
             </div>
         );
     }
@@ -2044,9 +2050,24 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     @observable _isHovering = false;
     onPassiveWheel = (e: WheelEvent) => {
+        if (e.clientX > this.ProseRef!.getBoundingClientRect().right) {
+            if (this.rootDoc[this.SidebarKey + '_type_collection'] === CollectionViewType.Freeform) {
+                // if the scrolled freeform is a child of the sidebar component, we need to let the event go through
+                // so react can let the freeform view handle it. We prevent default to stop any containing views from scrolling
+                e.preventDefault();
+            }
+            return;
+        }
+
         // if scrollTop is 0, then don't let wheel trigger scroll on any container (which it would since onScroll won't be triggered on this)
         if (this.props.isContentActive() && !this.props.allowScroll) {
-            if (!NumCast(this.layoutDoc._layout_scrollTop) && e.deltaY <= 0) e.preventDefault();
+            // prevent default if selected || child is active  but this doc isn't scrollable
+            if (
+                (this._scrollRef.current?.scrollHeight ?? 0) <= Math.ceil(Number(this.layoutDoc._height)) && //
+                (this.props.isSelected() || this.isAnyChildContentActive())
+            ) {
+                e.preventDefault();
+            }
             e.stopPropagation();
         }
     };
@@ -2120,7 +2141,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                         className="formattedTextBox-outer"
                         ref={this._scrollRef}
                         style={{
-                            width: this.props.dontSelectOnLoad ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
+                            width: this.props.dontSelectOnLoad || this.noSidebar ? '100%' : `calc(100% - ${this.layout_sidebarWidthPercent})`,
                             overflow: this.layoutDoc._createDocOnCR ? 'hidden' : this.layoutDoc._layout_autoHeight ? 'visible' : undefined,
                         }}
                         onScroll={this.onScroll}
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index dd3f11444..a8e2440ca 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1513,6 +1513,7 @@ export namespace Doc {
     }
 
     export const FilterSep = '::';
+    export const FilterAny = '--any--';
 
     // filters document in a container collection:
     // all documents with the specified value for the specified key are included/excluded
-- 
cgit v1.2.3-70-g09d2


From 5b6c52fe703757a5d6ad1fccab935fae297189bb Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 13 Sep 2023 12:58:48 -0400
Subject: fixed text filters to be removable, have the right colors, and update
 when selected doc changes.  updated filter dropdown to only show parents with
 filters. fixed colors of link doc preview.

---
 src/client/views/FilterPanel.tsx          | 22 +++++++++++++++-------
 src/client/views/StyleProvider.tsx        |  4 +++-
 src/client/views/nodes/LinkDocPreview.tsx |  4 ++--
 3 files changed, 20 insertions(+), 10 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index a601706ce..4af29c70e 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -16,6 +16,7 @@ import './FilterPanel.scss';
 import { FieldView } from './nodes/FieldView';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { SettingsManager } from '../util/SettingsManager';
+import { Id } from '../../fields/FieldSymbols';
 
 interface filterProps {
     rootDoc: Doc;
@@ -341,9 +342,13 @@ export class FilterPanel extends React.Component<filterProps> {
                                     <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 === 'text') {
+                                                Doc.setDocFilter(this.targetDoc, renderInfo.facetHeader, 'match', 'remove');
+                                            } else {
+                                                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);
@@ -370,15 +375,18 @@ export class FilterPanel extends React.Component<filterProps> {
     }
 
     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')
+        switch (type) {
+            case 'text':
                 return (
                     <input
-                        placeholder={
+                        key={this.targetDoc[Id]}
+                        placeholder={'enter text to match'}
+                        defaultValue={
                             StrListCast(this.targetDoc._childFilters)
                                 .find(filter => filter.split(Doc.FilterSep)[0] === facetHeader)
-                                ?.split(Doc.FilterSep)[1] ?? '-empty-'
+                                ?.split(Doc.FilterSep)[1]
                         }
+                        style={{ color: SettingsManager.userColor, background: SettingsManager.userBackgroundColor }}
                         onBlur={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')}
                         onKeyDown={e => e.key === 'Enter' && undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, e.currentTarget.value, !e.currentTarget.value ? 'remove' : 'match'), 'set text filter')(e)}
                     />
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index 775ccd067..96b2ddf70 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -318,7 +318,9 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<DocumentViewProps
                                 "this view inherits filters from one of its parents"}
                             color={SettingsManager.userColor}
                             background={showFilterIcon}
-                            items={[ ...(dashView ? [dashView]: []), ...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])].map(dv => ({
+                            items={[ ...(dashView ? [dashView]: []), ...(props?.docViewPath?.()??[]), ...(props?.DocumentView?[props?.DocumentView?.()]:[])]
+                                    .filter(dv => StrListCast(dv.rootDoc.childFilters).length || StrListCast(dv.rootDoc.childRangeFilters).length)
+                                    .map(dv => ({
                                 text: StrCast(dv.rootDoc.title),
                                 val: dv as any,
                                 style: {color:SettingsManager.userColor, background:SettingsManager.userBackgroundColor},
diff --git a/src/client/views/nodes/LinkDocPreview.tsx b/src/client/views/nodes/LinkDocPreview.tsx
index 0ee83bc08..198cbe851 100644
--- a/src/client/views/nodes/LinkDocPreview.tsx
+++ b/src/client/views/nodes/LinkDocPreview.tsx
@@ -204,7 +204,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
     };
     @computed get previewHeader() {
         return !this._linkDoc || !this._markerTargetDoc || !this._targetDoc || !this._linkSrc ? null : (
-            <div className="linkDocPreview-info">
+            <div className="linkDocPreview-info" style={{ background: SettingsManager.userBackgroundColor }}>
                 <div className="linkDocPreview-buttonBar" style={{ float: 'left' }}>
                     <Tooltip title={<div className="dash-tooltip">Edit Link</div>} placement="top">
                         <div className="linkDocPreview-button" onPointerDown={this.editLink}>
@@ -302,7 +302,7 @@ export class LinkDocPreview extends React.Component<LinkDocPreviewProps> {
                 className="linkDocPreview"
                 ref={this._linkDocRef}
                 onPointerDown={this.followLinkPointerDown}
-                style={{ left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
+                style={{ borderColor: SettingsManager.userColor, left: this.props.location[0], top: this.props.location[1], width: this.width() + borders, height: this.height() + borders + (this.props.showHeader ? 37 : 0) }}>
                 {this.docPreview}
             </div>
         );
-- 
cgit v1.2.3-70-g09d2


From 2b96f355ea7f4aa0e1fcf0dbee8ce6bf6e8f09d4 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 18 Sep 2023 14:27:05 -0400
Subject: revised how to do filtering by links.

---
 src/client/documents/Documents.ts        | 28 +++++++---------------------
 src/client/views/FilterPanel.tsx         | 15 +++++++--------
 src/client/views/InkTangentHandles.tsx   |  1 -
 src/client/views/nodes/MapBox/MapBox.tsx |  6 +++---
 src/fields/Doc.ts                        | 25 ++++++++++++++++++++-----
 5 files changed, 37 insertions(+), 38 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 055950e6f..254be67b9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -15,7 +15,7 @@ import { BoolCast, Cast, DocCast, FieldValue, NumCast, ScriptCast, StrCast } fro
 import { AudioField, CsvField, ImageField, PdfField, VideoField, WebField, YoutubeField } from '../../fields/URLField';
 import { inheritParentAcls, SharingPermissions } from '../../fields/util';
 import { Upload } from '../../server/SharedMediaTypes';
-import { aggregateBounds, OmitKeys, Utils } from '../../Utils';
+import { OmitKeys, Utils } from '../../Utils';
 import { YoutubeBox } from '../apis/youtube/YoutubeBox';
 import { DocServer } from '../DocServer';
 import { Networking } from '../Network';
@@ -1296,20 +1296,6 @@ export namespace DocUtils {
                   for (const facetKey of Object.keys(filterFacets).filter(fkey => fkey !== 'cookies' && fkey !== Utils.noDragsDocFilter.split(Doc.FilterSep)[0])) {
                       const facet = filterFacets[facetKey];
 
-                      let links = true;
-                      const linkedTo = filterFacets['-linkedTo'] && Array.from(Object.keys(filterFacets['-linkedTo']))?.[0];
-                      const linkedToField = filterFacets['-linkedTo']?.[linkedTo];
-                      const allLinks = linkedTo && linkedToField ? LinkManager.Instance.getAllRelatedLinks(d) : [];
-                      // prettier-ignore
-                      if (linkedTo) {
-                          if (allLinks.some(d => linkedTo === Field.toScriptString(DocCast(DocCast(d.link_anchor_1)?.[linkedToField]))) || //
-                           allLinks.some(d => linkedTo === Field.toScriptString(DocCast(DocCast(d.link_anchor_2)?.[linkedToField]))))
-                          {
-                              links = true;
-                          } 
-                          else links = false
-                      }
-
                       // facets that match some value in the field of the document (e.g. some text field)
                       const matches = Object.keys(facet).filter(value => value !== 'cookies' && facet[value] === 'match');
 
@@ -1319,16 +1305,16 @@ export namespace DocUtils {
                       // metadata facets that exist
                       const exists = Object.keys(facet).filter(value => facet[value] === 'exists');
 
-                      // metadata facets that exist
+                      // facets that unset metadata (a hack for making cookies work)
                       const unsets = Object.keys(facet).filter(value => facet[value] === 'unset');
 
-                      // facets that have an x next to them
+                      // facets that specify that a field must not match a specific value
                       const xs = Object.keys(facet).filter(value => facet[value] === 'x');
 
-                      if (!linkedTo && !unsets.length && !exists.length && !xs.length && !checks.length && !matches.length) return true;
+                      if (!unsets.length && !exists.length && !xs.length && !checks.length && !matches.length) return true;
                       const failsNotEqualFacets = !xs.length ? false : xs.some(value => Doc.matchFieldValue(d, facetKey, value));
                       const satisfiesCheckFacets = !checks.length ? true : checks.some(value => Doc.matchFieldValue(d, facetKey, value));
-                      const satisfiesExistsFacets = !exists.length ? true : exists.some(value => d[facetKey] !== undefined);
+                      const satisfiesExistsFacets = !exists.length ? true : exists.some(value => (facetKey !== '-linkedTo' ? d[facetKey] !== undefined : LinkManager.Instance.getAllRelatedLinks(d).length));
                       const satisfiesUnsetsFacets = !unsets.length ? true : unsets.some(value => d[facetKey] === undefined);
                       const satisfiesMatchFacets = !matches.length
                           ? true
@@ -1344,11 +1330,11 @@ export namespace DocUtils {
                             });
                       // if we're ORing them together, the default return is false, and we return true for a doc if it satisfies any one set of criteria
                       if (parentCollection?.childFilters_boolean === 'OR') {
-                          if (links && satisfiesUnsetsFacets && satisfiesExistsFacets && satisfiesCheckFacets && !failsNotEqualFacets && satisfiesMatchFacets) return true;
+                          if (satisfiesUnsetsFacets && satisfiesExistsFacets && satisfiesCheckFacets && !failsNotEqualFacets && satisfiesMatchFacets) return true;
                       }
                       // if we're ANDing them together, the default return is true, and we return false for a doc if it doesn't satisfy any set of criteria
                       else {
-                          if (!links || !satisfiesUnsetsFacets || !satisfiesExistsFacets || !satisfiesCheckFacets || failsNotEqualFacets || (matches.length && !satisfiesMatchFacets)) return false;
+                          if (!satisfiesUnsetsFacets || !satisfiesExistsFacets || !satisfiesCheckFacets || failsNotEqualFacets || (matches.length && !satisfiesMatchFacets)) return false;
                       }
                   }
                   return parentCollection?.childFilters_boolean === 'OR' ? false : true;
diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 4af29c70e..312dc3a70 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -56,7 +56,7 @@ export class FilterPanel extends React.Component<filterProps> {
 
     @computed get _allFacets() {
         // trace();
-        const noviceReqFields = ['author', 'tags', 'text', 'type'];
+        const noviceReqFields = ['author', 'tags', 'text', 'type', '-linkedTo'];
         const noviceLayoutFields: string[] = []; //["_layout_curPage"];
         const noviceFields = [...noviceReqFields, ...noviceLayoutFields];
 
@@ -118,7 +118,7 @@ export class FilterPanel extends React.Component<filterProps> {
     // }
 
     gatherFieldValues(childDocs: Doc[], facetKey: string) {
-        const valueSet = new Set<string>();
+        const valueSet = new Set<string>(StrListCast(this.props.rootDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]));
         let rtFields = 0;
         let subDocs = childDocs;
         if (subDocs.length > 0) {
@@ -127,7 +127,6 @@ 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));
@@ -182,14 +181,14 @@ export class FilterPanel extends React.Component<filterProps> {
                 });
 
                 if (facetHeader === 'text') {
-                    return { facetHeader: facetHeader, renderType: 'text' };
+                    return { 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] };
+                    return { facetHeader, renderType: 'range', domain: [extendedMinVal, extendedMaxVal], range: ranged ? ranged : [extendedMinVal, extendedMaxVal] };
                 } else {
-                    return { facetHeader: facetHeader, renderType: 'checkbox' };
+                    return { facetHeader, renderType: 'checkbox' };
                 }
             })
         );
@@ -236,7 +235,7 @@ export class FilterPanel extends React.Component<filterProps> {
     facetValues = (facetHeader: string) => {
         const allCollectionDocs = new Set<Doc>();
         SearchUtil.foreachRecursiveDoc(this.targetDocChildren, (depth: number, doc: Doc) => allCollectionDocs.add(doc));
-        const set = new Set<string>([String.fromCharCode(127) + '--undefined--', Doc.FilterAny]);
+        const set = new Set<string>([...StrListCast(this.props.rootDoc.childFilters).map(filter => filter.split(Doc.FilterSep)[1]), Doc.FilterNone, Doc.FilterAny]);
         if (facetHeader === 'tags')
             allCollectionDocs.forEach(child =>
                 StrListCast(child[facetHeader])
@@ -404,7 +403,7 @@ export class FilterPanel extends React.Component<filterProps> {
                                         ?.split(Doc.FilterSep)[2] ?? ''
                                 )}
                                 type={type}
-                                onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? (fval === Doc.FilterAny ? 'exists' : 'check') : 'remove'), 'set filter')}
+                                onChange={undoable(e => Doc.setDocFilter(this.targetDoc, facetHeader, fval, e.target.checked ? 'check' : 'remove'), 'set filter')}
                             />
                             {facetValue}
                         </div>
diff --git a/src/client/views/InkTangentHandles.tsx b/src/client/views/InkTangentHandles.tsx
index 71e0ff63c..65f6a6dfa 100644
--- a/src/client/views/InkTangentHandles.tsx
+++ b/src/client/views/InkTangentHandles.tsx
@@ -12,7 +12,6 @@ import { UndoManager } from '../util/UndoManager';
 import { Colors } from './global/globalEnums';
 import { InkingStroke } from './InkingStroke';
 import { InkStrokeProperties } from './InkStrokeProperties';
-import { DocumentView } from './nodes/DocumentView';
 export interface InkHandlesProps {
     inkDoc: Doc;
     inkView: InkingStroke;
diff --git a/src/client/views/nodes/MapBox/MapBox.tsx b/src/client/views/nodes/MapBox/MapBox.tsx
index 3e22c0d0e..d7469e530 100644
--- a/src/client/views/nodes/MapBox/MapBox.tsx
+++ b/src/client/views/nodes/MapBox/MapBox.tsx
@@ -350,7 +350,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             // Removes filter
             Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
             Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
-            Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toString(DocCast(this.selectedPin.mapPin)), 'removeAll');
+            Doc.setDocFilter(this.rootDoc, '-linkedTo', `mapPin=${Field.toScriptString(DocCast(this.selectedPin))}`, 'remove');
 
             const temp = this.selectedPin;
             if (!this._unmounting) {
@@ -382,7 +382,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
 
         // Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'match');
         // Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'match');
-        Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toScriptString(this.selectedPin), 'mapPin' as any);
+        Doc.setDocFilter(this.rootDoc, '-linkedTo', `mapPin=${Field.toScriptString(this.selectedPin)}`, 'check');
 
         this.recolorPin(this.selectedPin, 'green');
 
@@ -516,7 +516,7 @@ export class MapBox extends ViewBoxAnnotatableComponent<ViewBoxAnnotatableProps
             // Removes filter
             Doc.setDocFilter(this.rootDoc, 'latitude', this.selectedPin.latitude, 'remove');
             Doc.setDocFilter(this.rootDoc, 'longitude', this.selectedPin.longitude, 'remove');
-            Doc.setDocFilter(this.rootDoc, '-linkedTo', Field.toString(DocCast(this.selectedPin.mapPin)), 'removeAll');
+            Doc.setDocFilter(this.rootDoc, '-linkedTo', `mapPin=${Field.toString(DocCast(this.selectedPin.mapPin))}`, 'remove');
 
             this.removePushpin(this.selectedPin);
         }
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 5af49629d..78a03d782 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1463,18 +1463,32 @@ export namespace Doc {
             const isTransparent = (color: string) => color !== '' && DashColor(color).alpha() !== 1;
             return isTransparent(StrCast(doc[key]));
         }
+        if (key === '-linkedTo') {
+            // links are not a field value, so handled here.  value is an expression of form ([field=]idToDoc("..."))
+            const allLinks = LinkManager.Instance.getAllRelatedLinks(doc);
+            const matchLink = (value: string, anchor: Doc) => {
+                const linkedToExp = value?.split('=');
+                if (linkedToExp.length === 1) return Field.toScriptString(anchor) === value;
+                return Field.toScriptString(DocCast(anchor[linkedToExp[0]])) === linkedToExp[1];
+            };
+            // prettier-ignore
+            return  (value === Doc.FilterNone && !allLinks.length) || 
+                    (value === Doc.FilterAny && !!allLinks.length) ||
+                    (allLinks.some(link => matchLink(value,DocCast(link.link_anchor_1)) || 
+                                           matchLink(value,DocCast(link.link_anchor_2)) ));
+        }
         if (typeof value === 'string') {
             value = value.replace(`,${Utils.noRecursionHack}`, '');
         }
         const fieldVal = doc[key];
         if (Cast(fieldVal, listSpec('string'), []).length) {
-            const vals = Cast(fieldVal, listSpec('string'), []);
+            const vals = StrListCast(fieldVal);
             const docs = vals.some(v => (v as any) instanceof Doc);
             if (docs) return value === Field.toString(fieldVal as Field);
             return vals.some(v => v.includes(value)); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
         }
         const fieldStr = Field.toString(fieldVal as Field);
-        return fieldStr.includes(value) || (value === String.fromCharCode(127) + '--undefined--' && fieldVal === undefined); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
+        return fieldStr.includes(value) || (value === Doc.FilterAny && fieldVal !== undefined) || (value === Doc.FilterNone && fieldVal === undefined); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
     }
 
     export function deiconifyView(doc: Doc) {
@@ -1520,18 +1534,19 @@ export namespace Doc {
 
     export const FilterSep = '::';
     export const FilterAny = '--any--';
+    export const FilterNone = '--undefined--';
 
     // filters document in a container collection:
     // all documents with the specified value for the specified key are included/excluded
     // based on the modifiers :"check", "x", undefined
-    export function setDocFilter(container: Opt<Doc>, key: string, value: any, modifiers: 'removeAll' | 'remove' | 'match' | 'check' | 'x' | 'exists' | 'unset', toggle?: boolean, fieldPrefix?: string, append: boolean = true) {
+    export function setDocFilter(container: Opt<Doc>, key: string, value: any, modifiers: 'remove' | 'match' | 'check' | 'x' | 'exists' | 'unset', toggle?: boolean, fieldPrefix?: string, append: boolean = true) {
         if (!container) return;
         const filterField = '_' + (fieldPrefix ? fieldPrefix + '_' : '') + 'childFilters';
         const childFilters = StrListCast(container[filterField]);
         runInAction(() => {
             for (let i = 0; i < childFilters.length; i++) {
                 const fields = childFilters[i].split(FilterSep); // split key:value:modifier
-                if (fields[0] === key && (fields[1] === value.toString() || modifiers === 'match' || modifiers === 'removeAll' || (fields[2] === 'match' && modifiers === 'remove'))) {
+                if (fields[0] === key && (fields[1] === value.toString() || modifiers === 'match' || (fields[2] === 'match' && modifiers === 'remove'))) {
                     if (fields[2] === modifiers && modifiers && fields[1] === value.toString()) {
                         if (toggle) modifiers = 'remove';
                         else return;
@@ -1543,7 +1558,7 @@ export namespace Doc {
             }
             if (!childFilters.length && modifiers === 'match' && value === undefined) {
                 container[filterField] = undefined;
-            } else if (modifiers !== 'remove' && modifiers !== 'removeAll') {
+            } else if (modifiers !== 'remove') {
                 !append && (childFilters.length = 0);
                 childFilters.push(key + FilterSep + value + FilterSep + modifiers);
                 container[filterField] = new List<string>(childFilters);
-- 
cgit v1.2.3-70-g09d2


From 84aa8806a62e2e957e8281d7d492139e3d8225f2 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 18 Sep 2023 14:41:53 -0400
Subject: removed filter checkboxes for list values since they don't work. 
 fixed any/undefined filtering for tags or other list fields.

---
 src/client/views/FilterPanel.tsx | 8 ++++++--
 src/fields/Doc.ts                | 8 ++++++--
 2 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index 312dc3a70..69ceb0f65 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -17,6 +17,7 @@ import { FieldView } from './nodes/FieldView';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { SettingsManager } from '../util/SettingsManager';
 import { Id } from '../../fields/FieldSymbols';
+import { List } from '../../fields/List';
 
 interface filterProps {
     rootDoc: Doc;
@@ -245,8 +246,11 @@ export class FilterPanel extends React.Component<filterProps> {
         else
             allCollectionDocs.forEach(child => {
                 const fieldVal = child[facetHeader] as Field;
-                set.add(Field.toString(fieldVal));
-                (fieldVal === true || fieldVal === false) && set.add((!fieldVal).toString());
+                if (!(fieldVal instanceof List)) {
+                    // currently we have no good way of filtering based on a field that is a list
+                    set.add(Field.toString(fieldVal));
+                    (fieldVal === true || fieldVal === false) && set.add((!fieldVal).toString());
+                }
             });
         const facetValues = Array.from(set).filter(v => v);
 
diff --git a/src/fields/Doc.ts b/src/fields/Doc.ts
index 78a03d782..56b97e42f 100644
--- a/src/fields/Doc.ts
+++ b/src/fields/Doc.ts
@@ -1481,14 +1481,18 @@ export namespace Doc {
             value = value.replace(`,${Utils.noRecursionHack}`, '');
         }
         const fieldVal = doc[key];
+        // prettier-ignore
+        if ((value === Doc.FilterAny && fieldVal !== undefined) || 
+            (value === Doc.FilterNone && fieldVal === undefined)) {
+            return true;
+        }
         if (Cast(fieldVal, listSpec('string'), []).length) {
             const vals = StrListCast(fieldVal);
             const docs = vals.some(v => (v as any) instanceof Doc);
             if (docs) return value === Field.toString(fieldVal as Field);
             return vals.some(v => v.includes(value)); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
         }
-        const fieldStr = Field.toString(fieldVal as Field);
-        return fieldStr.includes(value) || (value === Doc.FilterAny && fieldVal !== undefined) || (value === Doc.FilterNone && fieldVal === undefined); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
+        return Field.toString(fieldVal as Field).includes(value); // bcz: arghh: Todo: comparison should be parameterized as exact, or substring
     }
 
     export function deiconifyView(doc: Doc) {
-- 
cgit v1.2.3-70-g09d2

