From 3b740e1c1ac74e7aac45c136ec9df1b37e2dbc16 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Tue, 23 Jul 2019 16:32:43 -0400
Subject: pretty ui for changing section fitler and added base for colletion
 chromes

---
 .../views/collections/CollectionViewChromes.tsx    | 152 +++++++++++++++++++++
 1 file changed, 152 insertions(+)
 create mode 100644 src/client/views/collections/CollectionViewChromes.tsx

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
new file mode 100644
index 000000000..ca1480ff2
--- /dev/null
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -0,0 +1,152 @@
+import * as React from "react";
+import { CollectionView } from "./CollectionView";
+import "./CollectionViewChromes.scss";
+import { CollectionViewType } from "./CollectionBaseView";
+import { undoBatch } from "../../util/UndoManager";
+import { action, observable, runInAction, computed } from "mobx";
+import { observer } from "mobx-react";
+import { Doc, DocListCast } from "../../../new_fields/Doc";
+import { DocLike } from "../MetadataEntryMenu";
+const higflyout = require("@hig/flyout");
+export const Flyout = higflyout.default;
+import * as Autosuggest from 'react-autosuggest';
+import { EditableView } from "../EditableView";
+import { StrCast } from "../../../new_fields/Types";
+
+interface CollectionViewChromeProps {
+    CollectionView: CollectionView;
+}
+
+class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps> {
+    @undoBatch
+    viewChanged = (e: React.ChangeEvent) => {
+        //@ts-ignore
+        switch (e.target.selectedOptions[0].value) {
+            case "freeform":
+                this.props.CollectionView.props.Document.viewType = CollectionViewType.Freeform;
+                break;
+            case "schema":
+                this.props.CollectionView.props.Document.viewType = CollectionViewType.Schema;
+                break;
+            case "treeview":
+                this.props.CollectionView.props.Document.viewType = CollectionViewType.Tree;
+                break;
+            case "stacking":
+                this.props.CollectionView.props.Document.viewType = CollectionViewType.Stacking;
+                break;
+            case "masonry":
+                this.props.CollectionView.props.Document.viewType = CollectionViewType.Masonry;
+                break;
+            default:
+                break;
+        }
+    }
+
+    render() {
+        return (
+            <div className="collectionViewBaseChrome">
+                <select onChange={this.viewChanged}>
+                    <option value="freeform" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Freeform}>Freeform View</option>
+                    <option value="schema" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Schema}>Schema View</option>
+                    <option value="treeview" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Tree}>Tree View</option>
+                    <option value="stacking" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Stacking}>Stacking View</option>
+                    <option value="masonry" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Masonry}>Masonry View</option>
+                </select>
+            </div>
+        )
+    }
+}
+
+@observer
+export class CollectionStackingViewChrome extends React.Component<CollectionViewChromeProps> {
+    @observable private _currentKey: string = "";
+    @observable private suggestions: string[] = [];
+
+    @computed get sectionFilter() { return StrCast(this.props.CollectionView.props.Document.sectionFilter); }
+
+    getKeySuggestions = async (value: string): Promise<string[]> => {
+        value = value.toLowerCase();
+        let docs: Doc | Doc[] | Promise<Doc> | Promise<Doc[]> | (() => DocLike)
+            = () => DocListCast(this.props.CollectionView.props.Document[this.props.CollectionView.props.fieldExt ? this.props.CollectionView.props.fieldExt : this.props.CollectionView.props.fieldKey]);
+        if (typeof docs === "function") {
+            docs = docs();
+        }
+        docs = await docs;
+        if (docs instanceof Doc) {
+            return Object.keys(docs).filter(key => key.toLowerCase().startsWith(value));
+        } else {
+            const keys = new Set<string>();
+            docs.forEach(doc => Doc.allKeys(doc).forEach(key => keys.add(key)));
+            return Array.from(keys).filter(key => key.toLowerCase().startsWith(value));
+        }
+    }
+
+    @action
+    onKeyChange = (e: React.ChangeEvent, { newValue }: { newValue: string }) => {
+        this._currentKey = newValue;
+    }
+
+    getSuggestionValue = (suggestion: string) => suggestion;
+
+    renderSuggestion = (suggestion: string) => {
+        return <p>{suggestion}</p>;
+    }
+
+    onSuggestionFetch = async ({ value }: { value: string }) => {
+        const sugg = await this.getKeySuggestions(value);
+        runInAction(() => {
+            this.suggestions = sugg;
+        });
+    }
+
+    @action
+    onSuggestionClear = () => {
+        this.suggestions = [];
+    }
+
+    setValue = (value: string) => {
+        this.props.CollectionView.props.Document.sectionFilter = value;
+        return true;
+    }
+
+    @action resetValue = () => { this._currentKey = this.sectionFilter; }
+
+    render() {
+        return (
+            <div className="collectionStackingViewChrome">
+                <CollectionViewBaseChrome CollectionView={this.props.CollectionView} />
+                <div className="collectionStackingViewChrome-sectionFilter-cont">
+                    <div className="collectionStackingViewChrome-sectionFilter-label">
+                        Group items by:
+                    </div>
+                    <div className="collectionStackingViewChrome-sectionFilter">
+                        <EditableView
+                            GetValue={() => this.sectionFilter}
+                            autosuggestProps={
+                                {
+                                    resetValue: this.resetValue,
+                                    value: this._currentKey,
+                                    onChange: this.onKeyChange,
+                                    autosuggestProps: {
+                                        inputProps:
+                                        {
+                                            value: this._currentKey,
+                                            onChange: this.onKeyChange
+                                        },
+                                        getSuggestionValue: this.getSuggestionValue,
+                                        suggestions: this.suggestions,
+                                        alwaysRenderSuggestions: true,
+                                        renderSuggestion: this.renderSuggestion,
+                                        onSuggestionsFetchRequested: this.onSuggestionFetch,
+                                        onSuggestionsClearRequested: this.onSuggestionClear
+                                    }
+                                }}
+                            SetValue={this.setValue}
+                            contents={this.sectionFilter ? this.sectionFilter : "N/A"}
+                        />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 0ebcadb80a89e7fe4f8f2a8a47570b19fd2f8711 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Tue, 23 Jul 2019 17:05:07 -0400
Subject: i need a breakkk

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

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index ca1480ff2..52fee26bf 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -109,7 +109,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
         return true;
     }
 
-    @action resetValue = () => { this._currentKey = this.sectionFilter; }
+    @action resetValue = () => { this._currentKey = this.sectionFilter; };
 
     render() {
         return (
-- 
cgit v1.2.3-70-g09d2


From 828fdd80ab8af26f6e2ef521e05a71e7e500bf8c Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Wed, 24 Jul 2019 17:18:15 -0400
Subject: view specsss

---
 package.json                                       |   1 +
 src/client/views/EditableView.tsx                  |   2 +-
 src/client/views/MainView.tsx                      |   4 +-
 .../views/collections/CollectionStackingView.tsx   |   9 +-
 .../CollectionStackingViewFieldColumn.tsx          |  44 +++-
 src/client/views/collections/CollectionSubView.tsx |  15 +-
 .../views/collections/CollectionViewChromes.scss   | 113 ++++++++-
 .../views/collections/CollectionViewChromes.tsx    | 261 ++++++++++++++++-----
 src/client/views/collections/KeyRestrictionRow.tsx |  45 ++++
 9 files changed, 428 insertions(+), 66 deletions(-)
 create mode 100644 src/client/views/collections/KeyRestrictionRow.tsx

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/package.json b/package.json
index 4a15cbb2f..37052fde3 100644
--- a/package.json
+++ b/package.json
@@ -136,6 +136,7 @@
         "image-size": "^0.7.4",
         "imagesloaded": "^4.1.4",
         "jquery-awesome-cursor": "^0.3.1",
+        "js-datepicker": "^4.6.6",
         "jsonwebtoken": "^8.5.0",
         "jsx-to-string": "^1.4.0",
         "lodash": "^4.17.11",
diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index a5bb40243..bd00d47b9 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -116,7 +116,7 @@ export class EditableView extends React.Component<EditableProps> {
             return (
                 <div className={`editableView-container-editing${this.props.oneLine ? "-oneLine" : ""}`}
                     style={{ display: this.props.display, height: "auto", maxHeight: `${this.props.height}` }}
-                    onClick={this.onClick} >
+                    onClick={this.onClick}>
                     <span style={{ fontStyle: this.props.fontStyle }}>{this.props.contents}</span>
                 </div>
             );
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 94a4835a1..69602deed 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -1,5 +1,5 @@
 import { IconName, library } from '@fortawesome/fontawesome-svg-core';
-import { faArrowDown, faCloudUploadAlt, faArrowUp, faClone, faCheck, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faPortrait, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt, faCat } from '@fortawesome/free-solid-svg-icons';
+import { faArrowDown, faCaretUp, faLongArrowAltRight, faCloudUploadAlt, faArrowUp, faClone, faCheck, faCommentAlt, faCut, faExclamation, faFilePdf, faFilm, faFont, faGlobeAsia, faPortrait, faMusic, faObjectGroup, faPenNib, faRedoAlt, faTable, faThumbtack, faTree, faUndoAlt, faCat } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, configure, observable, runInAction, reaction, trace } from 'mobx';
 import { observer } from 'mobx-react';
@@ -127,7 +127,9 @@ export class MainView extends React.Component {
         library.add(faCut);
         library.add(faCommentAlt);
         library.add(faThumbtack);
+        library.add(faLongArrowAltRight);
         library.add(faCheck);
+        library.add(faCaretUp);
         library.add(faArrowDown);
         library.add(faArrowUp);
         library.add(faCloudUploadAlt);
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index e4e6f92e3..a78a47ffb 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -249,6 +249,13 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         return false;
     }
 
+    sortFunc = (a: [SchemaHeaderField, Doc[]], b: [SchemaHeaderField, Doc[]]): 1 | -1 => {
+        let descending = BoolCast(this.props.Document.stackingHeadersSortDescending);
+        let firstEntry = descending ? b : a;
+        let secondEntry = descending ? a : b;
+        return firstEntry[0].heading > secondEntry[0].heading ? 1 : -1;
+    }
+
     render() {
         let headings = Array.from(this.Sections.keys());
         let editableViewProps = {
@@ -264,7 +271,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                     ["width > height", this.filteredChildren.filter(f => f[WidthSym]() >= 1 + f[HeightSym]())],
                     ["width = height", this.filteredChildren.filter(f => Math.abs(f[WidthSym]() - f[HeightSym]()) < 1)],
                     ["height > width", this.filteredChildren.filter(f => f[WidthSym]() + 1 <= f[HeightSym]())]]. */}
-                {this.props.Document.sectionFilter ? Array.from(this.Sections.entries()).sort((a, b) => a[0].toString() > b[0].toString() ? 1 : -1).
+                {this.props.Document.sectionFilter ? Array.from(this.Sections.entries()).sort(this.sortFunc).
                     map(section => this.section(section[0], section[1] as Doc[])) :
                     this.section(undefined, this.filteredChildren)}
                 {this.props.Document.sectionFilter ?
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index fe24c63c7..582adc418 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -16,6 +16,8 @@ import "./CollectionStackingView.scss";
 import { Docs } from "../../documents/Documents";
 import { SchemaHeaderField } from "../../../new_fields/SchemaHeaderField";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ScriptField } from "../../../new_fields/ScriptField";
+import { CompileScript } from "../../util/Scripting";
 
 
 interface CSVFieldColumnProps {
@@ -35,6 +37,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
 
     private _dropRef: HTMLDivElement | null = null;
     private dropDisposer?: DragManager.DragDropDisposer;
+    private _headerRef: React.RefObject<HTMLDivElement> = React.createRef();
 
     @observable _heading = this.props.headingObject ? this.props.headingObject.heading : this.props.heading;
 
@@ -182,6 +185,43 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         }
     }
 
+    startDrag = (e: PointerEvent) => {
+        let alias = Doc.MakeAlias(this.props.parent.props.Document);
+        let key = StrCast(this.props.parent.props.Document.sectionFilter);
+        let value = this.getValue(this._heading);
+        value = typeof value === "string" ? `"${value}"` : value;
+        let script = `return doc.${key} === ${value}`;
+        let compiled = CompileScript(script, { params: { doc: Doc.name } });
+        if (compiled.compiled) {
+            let scriptField = new ScriptField(compiled);
+            alias.viewSpecScript = scriptField;
+            let dragData = new DragManager.DocumentDragData([alias], [alias.proto]);
+            DragManager.StartDocumentDrag([this._headerRef.current!], dragData, e.clientX, e.clientY);
+        }
+
+        e.stopPropagation();
+        document.removeEventListener("pointermove", this.startDrag);
+        document.removeEventListener("pointerup", this.pointerUp);
+    }
+
+    pointerUp = (e: PointerEvent) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", this.startDrag);
+        document.removeEventListener("pointerup", this.pointerUp);
+    }
+
+    headerDown = (e: React.PointerEvent<HTMLDivElement>) => {
+        e.stopPropagation();
+        e.preventDefault();
+
+        document.removeEventListener("pointermove", this.startDrag);
+        document.addEventListener("pointermove", this.startDrag);
+        document.removeEventListener("pointerup", this.pointerUp);
+        document.addEventListener("pointerup", this.pointerUp);
+    }
+
     render() {
         let cols = this.props.cols();
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
@@ -199,11 +239,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             oneLine: true
         }
         let headingView = this.props.headingObject ?
-            <div key={heading} className="collectionStackingView-sectionHeader"
+            <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
                 style={{ width: (style.columnWidth) / (uniqueHeadings.length + 1) }}>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
-                <div className="collectionStackingView-sectionHeader-subCont"
+                <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
                     title={evContents === `No ${key} value` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                     style={{
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 2ddefb3c0..24c8adb35 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -21,6 +21,8 @@ import { CollectionView } from "./CollectionView";
 import React = require("react");
 import { MainView } from "../MainView";
 import { Utils } from "../../../Utils";
+import { ScriptField } from "../../../new_fields/ScriptField";
+import { CompileScript } from "../../util/Scripting";
 
 export interface CollectionViewProps extends FieldViewProps {
     addDocument: (document: Doc, allowDuplicates?: boolean) => boolean;
@@ -54,7 +56,18 @@ export function CollectionSubView<T>(schemaCtor: (doc: Doc) => T) {
             let self = this;
             //TODO tfs: This might not be what we want?
             //This linter error can't be fixed because of how js arguments work, so don't switch this to filter(FieldValue)
-            return DocListCast(this.extensionDoc[this.props.fieldExt ? this.props.fieldExt : this.props.fieldKey]);
+            let docs = DocListCast(this.extensionDoc[this.props.fieldExt ? this.props.fieldExt : this.props.fieldKey]);
+            let viewSpecScript = Cast(this.props.Document.viewSpecScript, ScriptField);
+            if (viewSpecScript) {
+                let script = viewSpecScript.script;
+                docs = docs.filter(d => {
+                    let res = script.run({ doc: d });
+                    if (res.success) {
+                        return res.result;
+                    }
+                });
+            }
+            return docs;
         }
         get childDocList() {
             //TODO tfs: This might not be what we want?
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index e5cb1b546..3103cd309 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -1,12 +1,120 @@
 @import "../globalCssVariables";
+@import '~js-datepicker/dist/datepicker.min.css';
+
+.collectionViewBaseChrome {
+    display: flex;
+
+    .collectionViewBaseChrome-viewPicker {
+        font-size: 75%;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+        background: rgb(238, 238, 238);
+        color: grey;
+        outline-color: black;
+        border: none;
+        padding: 12px 10px 11px 10px;
+    }
+
+    .collectionViewBaseChrome-viewPicker:active {
+        outline-color: black;
+    }
+
+    .collectionViewBaseChrome-collapse {
+        margin-right: 10px;
+        transition: all .5s;
+    }
+
+    .collectionViewBaseChrome-viewSpecs {
+        margin-left: 10px;
+        display: grid;
+
+        .collectionViewBaseChrome-viewSpecsInput {
+            padding: 12px 10px 11px 10px;
+            border: 0px;
+            color: grey;
+            text-align: center;
+            text-transform: uppercase;
+            letter-spacing: 2px;
+            outline-color: black;
+            font-size: 75%;
+            background: rgb(238, 238, 238);
+            height: 100%;
+            width: 150px;
+        }
+
+        .collectionViewBaseChrome-viewSpecsMenu {
+            overflow: hidden;
+            transition: height .5s, display .5s;
+            position: absolute;
+            top: 60px;
+            z-index: 100;
+            display: flex;
+            flex-direction: column;
+            background: rgb(238, 238, 238);
+            box-shadow: grey 2px 2px 4px;
+
+            .qs-datepicker {
+                left: unset;
+                right: 0;
+            }
+
+            .collectionViewBaseChrome-viewSpecsMenu-row {
+                display: grid;
+                grid-template-columns: 150px 200px 150px;
+                margin-top: 10px;
+                margin-right: 10px;
+
+                .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
+                .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
+                .collectionViewBaseChrome-viewSpecsMenu-rowRight {
+                    font-size: 75%;
+                    letter-spacing: 2px;
+                    color: grey;
+                    margin-left: 10px;
+                    padding: 5px;
+                    border: none;
+                    outline-color: black;
+                }
+            }
+
+            .collectionViewBaseChrome-viewSpecsMenu-lastRow {
+                display: grid;
+                grid-template-columns: 1fr 1fr;
+                grid-gap: 10px;
+                margin: 10px;
+            }
+        }
+    }
+}
 
 .collectionStackingViewChrome {
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns: 1fr auto;
     padding-bottom: 10px;
     border-bottom: .5px solid lightgrey;
     margin: 10px;
 
+    .collectionStackingViewChrome-cont {
+        display: flex;
+        justify-content: space-between;
+    }
+
+    .collectionStackingViewChrome-sort {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        .collectionStackingViewChrome-sortIcon {
+            transition: transform .5s;
+            margin-left: 10px;
+        }
+    }
+
+    button:hover {
+        transform: scale(1);
+    }
+
+
     .collectionStackingViewChrome-sectionFilter-cont {
         justify-self: right;
         display: flex;
@@ -21,10 +129,9 @@
 
         .collectionStackingViewChrome-sectionFilter {
             color: white;
-            width: fit-content;
+            width: 100px;
             text-align: center;
             background: rgb(238, 238, 238);
-            height: 37px;
 
             .editable-view-input,
             input,
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 52fee26bf..2edac384d 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -3,55 +3,189 @@ import { CollectionView } from "./CollectionView";
 import "./CollectionViewChromes.scss";
 import { CollectionViewType } from "./CollectionBaseView";
 import { undoBatch } from "../../util/UndoManager";
-import { action, observable, runInAction, computed } from "mobx";
+import { action, observable, runInAction, computed, IObservable, IObservableValue } from "mobx";
 import { observer } from "mobx-react";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
 import { DocLike } from "../MetadataEntryMenu";
-const higflyout = require("@hig/flyout");
-export const Flyout = higflyout.default;
 import * as Autosuggest from 'react-autosuggest';
 import { EditableView } from "../EditableView";
-import { StrCast } from "../../../new_fields/Types";
+import { StrCast, NumCast, BoolCast, Cast } from "../../../new_fields/Types";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Utils } from "../../../Utils";
+import KeyRestrictionRow from "./KeyRestrictionRow";
+import { CompileScript } from "../../util/Scripting";
+import { ScriptField } from "../../../new_fields/ScriptField";
+const datepicker = require('js-datepicker');
 
 interface CollectionViewChromeProps {
     CollectionView: CollectionView;
 }
 
+let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
+
+@observer
 class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps> {
+    @observable private _viewSpecsOpen: boolean = false;
+    @observable private _dateWithinValue: string = "";
+    @observable private _dateValue: Date = new Date();
+    @observable private _keyRestrictions: [JSX.Element, string][] = [];
+    @computed private get filterValue() { return Cast(this.props.CollectionView.props.Document.viewSpecScript, ScriptField); }
+
+    private _picker: any;
+    private _datePickerElGuid = Utils.GenerateGuid();
+
+    componentDidMount = () => {
+        this._picker = datepicker("#" + this._datePickerElGuid, {
+            disabler: (date: Date) => date > new Date(),
+            onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date),
+            dateSelected: new Date()
+        });
+
+        runInAction(() => {
+            this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]);
+            this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={false} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]);
+        });
+    }
+
     @undoBatch
     viewChanged = (e: React.ChangeEvent) => {
         //@ts-ignore
-        switch (e.target.selectedOptions[0].value) {
-            case "freeform":
-                this.props.CollectionView.props.Document.viewType = CollectionViewType.Freeform;
-                break;
-            case "schema":
-                this.props.CollectionView.props.Document.viewType = CollectionViewType.Schema;
-                break;
-            case "treeview":
-                this.props.CollectionView.props.Document.viewType = CollectionViewType.Tree;
-                break;
-            case "stacking":
-                this.props.CollectionView.props.Document.viewType = CollectionViewType.Stacking;
-                break;
-            case "masonry":
-                this.props.CollectionView.props.Document.viewType = CollectionViewType.Masonry;
-                break;
-            default:
-                break;
+        this.props.CollectionView.props.Document.viewType = parseInt(e.target.selectedOptions[0].value);
+    }
+
+    @action
+    openViewSpecs = (e: React.SyntheticEvent) => {
+        this._viewSpecsOpen = true;
+
+        //@ts-ignore
+        if (!e.target.classList[0].startsWith("qs")) {
+            this.closeDatePicker();
+        }
+
+        e.stopPropagation();
+        document.removeEventListener("pointerdown", this.closeViewSpecs);
+        document.addEventListener("pointerdown", this.closeViewSpecs);
+    }
+
+    @action closeViewSpecs = () => { this._viewSpecsOpen = false; document.removeEventListener("pointerdown", this.closeViewSpecs); };
+
+    @action
+    openDatePicker = (e: React.PointerEvent) => {
+        this.openViewSpecs(e);
+        if (this._picker) {
+            this._picker.alwaysShow = true;
+            this._picker.show();
+            // TODO: calendar is offset when zoomed in/out
+            // this._picker.calendar.style.position = "absolute";
+            // let transform = this.props.CollectionView.props.ScreenToLocalTransform();
+            // let x = parseInt(this._picker.calendar.style.left) / transform.Scale;
+            // let y = parseInt(this._picker.calendar.style.top) / transform.Scale;
+            // this._picker.calendar.style.left = x;
+            // this._picker.calendar.style.top = y;
+
+            e.stopPropagation();
         }
     }
 
+    @action
+    addKeyRestriction = (e: React.MouseEvent) => {
+        let index = this._keyRestrictions.length;
+        this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[index][1] = value)} />, ""]);
+
+        this.openViewSpecs(e);
+    }
+
+    @action
+    applyFilter = (e: React.MouseEvent) => {
+        this.openViewSpecs(e);
+
+        let keyRestrictionScript = `${this._keyRestrictions.map(i => i[1])
+            .reduce((acc: string, value: string, i: number) => value ? `${acc} && ${value}` : acc)}`;
+        let yearOffset = this._dateWithinValue[1] === 'y' ? 1 : 0;
+        let monthOffset = this._dateWithinValue[1] === 'm' ? parseInt(this._dateWithinValue[0]) : 0;
+        let weekOffset = this._dateWithinValue[1] === 'w' ? parseInt(this._dateWithinValue[0]) : 0;
+        let dayOffset = (this._dateWithinValue[1] === 'd' ? parseInt(this._dateWithinValue[0]) : 0) + weekOffset * 7;
+        let lowerBound = new Date(this._dateValue.getFullYear() - yearOffset, this._dateValue.getMonth() - monthOffset, this._dateValue.getDate() - dayOffset);
+        let upperBound = new Date(this._dateValue.getFullYear() + yearOffset, this._dateValue.getMonth() + monthOffset, this._dateValue.getDate() + dayOffset + 1);
+        let dateRestrictionScript = `((doc.creationDate as any).date >= ${lowerBound.valueOf()} && (doc.creationDate as any).date <= ${upperBound.valueOf()})`;
+        let fullScript = `return ${dateRestrictionScript} && ${keyRestrictionScript}`;
+        let compiled = CompileScript(fullScript, { params: { doc: Doc.name } });
+        if (compiled.compiled) {
+            this.props.CollectionView.props.Document.viewSpecScript = new ScriptField(compiled);
+        }
+    }
+
+    @action
+    closeDatePicker = () => {
+        if (this._picker) {
+            this._picker.alwaysShow = false;
+            this._picker.hide();
+        }
+        document.removeEventListener("pointerdown", this.closeDatePicker);
+    }
+
     render() {
         return (
             <div className="collectionViewBaseChrome">
-                <select onChange={this.viewChanged}>
-                    <option value="freeform" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Freeform}>Freeform View</option>
-                    <option value="schema" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Schema}>Schema View</option>
-                    <option value="treeview" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Tree}>Tree View</option>
-                    <option value="stacking" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Stacking}>Stacking View</option>
-                    <option value="masonry" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Masonry}>Masonry View</option>
+                <button className="collectionViewBaseChrome-collapse" title="Collapse collection chrome">
+                    <FontAwesomeIcon icon="caret-up" size="2x" />
+                </button>
+                <select
+                    className="collectionViewBaseChrome-viewPicker"
+                    onPointerDown={stopPropagation}
+                    onChange={this.viewChanged}
+                    value={NumCast(this.props.CollectionView.props.Document.viewType)}>
+                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
+                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
+                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
+                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
+                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
                 </select>
+                <div className="collectionViewBaseChrome-viewSpecs">
+                    <input className="collectionViewBaseChrome-viewSpecsInput"
+                        placeholder="Filter Documents"
+                        value={this.filterValue ? this.filterValue.script.originalScript : ""}
+                        onPointerDown={this.openViewSpecs} />
+                    <div className="collectionViewBaseChrome-viewSpecsMenu"
+                        onPointerDown={this.openViewSpecs}
+                        style={{
+                            height: this._viewSpecsOpen ? "fit-content" : "0px",
+                            overflow: this._viewSpecsOpen ? "initial" : "hidden"
+                        }}>
+                        {this._keyRestrictions.map(i => i[0])}
+                        <div className="collectionViewBaseChrome-viewSpecsMenu-row">
+                            <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
+                                CREATED WITHIN:
+                            </div>
+                            <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
+                                style={{ textTransform: "uppercase", textAlign: "center" }}
+                                value={this._dateWithinValue}
+                                onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
+                                <option value="1d">1 day of</option>
+                                <option value="3d">3 days of</option>
+                                <option value="1w">1 week of</option>
+                                <option value="2w">2 weeks of</option>
+                                <option value="1m">1 month of</option>
+                                <option value="2m">2 months of</option>
+                                <option value="6m">6 months of</option>
+                                <option value="1y">1 year of</option>
+                            </select>
+                            <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
+                                id={this._datePickerElGuid}
+                                value={this._dateValue.toLocaleDateString()}
+                                onPointerDown={this.openDatePicker}
+                                placeholder="Value" />
+                        </div>
+                        <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
+                            <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
+                                ADD KEY RESTRICTION
+                            </button>
+                            <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
+                                APPLY FILTER
+                            </button>
+                        </div>
+                    </div>
+                </div>
             </div>
         )
     }
@@ -62,6 +196,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
     @observable private _currentKey: string = "";
     @observable private suggestions: string[] = [];
 
+    @computed private get descending() { return BoolCast(this.props.CollectionView.props.Document.stackingHeadersSortDescending); }
     @computed get sectionFilter() { return StrCast(this.props.CollectionView.props.Document.sectionFilter); }
 
     getKeySuggestions = async (value: string): Promise<string[]> => {
@@ -109,41 +244,53 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
         return true;
     }
 
+    @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; }
     @action resetValue = () => { this._currentKey = this.sectionFilter; };
 
     render() {
         return (
             <div className="collectionStackingViewChrome">
                 <CollectionViewBaseChrome CollectionView={this.props.CollectionView} />
-                <div className="collectionStackingViewChrome-sectionFilter-cont">
-                    <div className="collectionStackingViewChrome-sectionFilter-label">
-                        Group items by:
-                    </div>
-                    <div className="collectionStackingViewChrome-sectionFilter">
-                        <EditableView
-                            GetValue={() => this.sectionFilter}
-                            autosuggestProps={
-                                {
-                                    resetValue: this.resetValue,
-                                    value: this._currentKey,
-                                    onChange: this.onKeyChange,
-                                    autosuggestProps: {
-                                        inputProps:
-                                        {
-                                            value: this._currentKey,
-                                            onChange: this.onKeyChange
-                                        },
-                                        getSuggestionValue: this.getSuggestionValue,
-                                        suggestions: this.suggestions,
-                                        alwaysRenderSuggestions: true,
-                                        renderSuggestion: this.renderSuggestion,
-                                        onSuggestionsFetchRequested: this.onSuggestionFetch,
-                                        onSuggestionsClearRequested: this.onSuggestionClear
-                                    }
-                                }}
-                            SetValue={this.setValue}
-                            contents={this.sectionFilter ? this.sectionFilter : "N/A"}
-                        />
+                <div className="collectionStackingViewChrome-cont">
+                    <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
+                        <div className="collectionStackingViewChrome-sortLabel">
+                            Sort
+                        </div>
+                        <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                            <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
+                        </div>
+                    </button>
+                    <div className="collectionStackingViewChrome-sectionFilter-cont">
+                        <div className="collectionStackingViewChrome-sectionFilter-label">
+                            Group items by:
+                        </div>
+                        <div className="collectionStackingViewChrome-sectionFilter">
+                            <EditableView
+                                GetValue={() => this.sectionFilter}
+                                autosuggestProps={
+                                    {
+                                        resetValue: this.resetValue,
+                                        value: this._currentKey,
+                                        onChange: this.onKeyChange,
+                                        autosuggestProps: {
+                                            inputProps:
+                                            {
+                                                value: this._currentKey,
+                                                onChange: this.onKeyChange
+                                            },
+                                            getSuggestionValue: this.getSuggestionValue,
+                                            suggestions: this.suggestions,
+                                            alwaysRenderSuggestions: true,
+                                            renderSuggestion: this.renderSuggestion,
+                                            onSuggestionsFetchRequested: this.onSuggestionFetch,
+                                            onSuggestionsClearRequested: this.onSuggestionClear
+                                        }
+                                    }}
+                                oneLine
+                                SetValue={this.setValue}
+                                contents={this.sectionFilter ? this.sectionFilter : "N/A"}
+                            />
+                        </div>
                     </div>
                 </div>
             </div>
diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx
new file mode 100644
index 000000000..8051a8359
--- /dev/null
+++ b/src/client/views/collections/KeyRestrictionRow.tsx
@@ -0,0 +1,45 @@
+import * as React from "react";
+import { observable, runInAction } from "mobx";
+import { observer } from "mobx-react";
+import { PastelSchemaPalette } from "../../../new_fields/SchemaHeaderField";
+
+interface IKeyRestrictionProps {
+    contains: boolean;
+    script: (value: string) => void;
+}
+
+@observer
+export default class KeyRestrictionRow extends React.Component<IKeyRestrictionProps> {
+    @observable private _key = "";
+    @observable private _value = "";
+    @observable private _contains = this.props.contains;
+
+    render() {
+        if (this._key && this._value) {
+            let parsedValue: string | number = `"${this._value}"`;
+            let parsed = parseInt(this._value);
+            if (!isNaN(parsed)) {
+                parsedValue = parsed;
+            }
+            let scriptText = `(doc.${this._key} ${this._contains ? "===" : "!=="} ${parsedValue})`;
+            this.props.script(scriptText);
+        }
+        return (
+            <div className="collectionViewBaseChrome-viewSpecsMenu-row">
+                <input className="collectionViewBaseChrome-viewSpecsMenu-rowLeft"
+                    value={this._key}
+                    onChange={(e) => runInAction(() => this._key = e.target.value)}
+                    placeholder="KEY" />
+                <button className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
+                    style={{ background: PastelSchemaPalette.get(this._contains ? "green" : "red") }}
+                    onClick={() => runInAction(() => this._contains = !this._contains)}>
+                    {this._contains ? "CONTAINS" : "DOES NOT CONTAIN"}
+                </button>
+                <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
+                    value={this._value}
+                    onChange={(e) => runInAction(() => this._value = e.target.value)}
+                    placeholder="VALUE" />
+            </div>
+        )
+    }
+}
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From ede0719d96cc2551490398caf3e1f41fe7992931 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Wed, 24 Jul 2019 22:27:37 -0400
Subject: view specs almost entirely done, refactored some chrome impl

---
 .../views/collections/CollectionStackingView.scss  |   1 +
 .../views/collections/CollectionStackingView.tsx   |   6 +-
 src/client/views/collections/CollectionSubView.tsx |   1 +
 src/client/views/collections/CollectionView.tsx    |  42 ++--
 .../views/collections/CollectionViewChromes.scss   | 156 +++++++--------
 .../views/collections/CollectionViewChromes.tsx    | 214 ++++++++++++---------
 6 files changed, 227 insertions(+), 193 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index e0ced8af4..f43340967 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -7,6 +7,7 @@
     display: flex;
     overflow-y: auto;
     flex-wrap: wrap;
+    transition: top .5s;
 
     .collectionStackingView-docView-container {
         width: 45%;
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index a78a47ffb..31ec80d76 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -8,7 +8,7 @@ import { BoolCast, NumCast, Cast, StrCast, FieldValue } from "../../../new_field
 import { emptyFunction, Utils } from "../../../Utils";
 import { CollectionSchemaPreview } from "./CollectionSchemaView";
 import "./CollectionStackingView.scss";
-import { CollectionSubView } from "./CollectionSubView";
+import { CollectionSubView, SubCollectionViewProps } from "./CollectionSubView";
 import { undoBatch } from "../../util/UndoManager";
 import { DragManager } from "../../util/DragManager";
 import { DocumentType } from "../../documents/Documents";
@@ -19,6 +19,7 @@ import { listSpec } from "../../../new_fields/Schema";
 import { SchemaHeaderField } from "../../../new_fields/SchemaHeaderField";
 import { List } from "../../../new_fields/List";
 import { EditableView } from "../EditableView";
+import { CollectionViewProps } from "./CollectionBaseView";
 
 let valuesCreated = 1;
 
@@ -32,6 +33,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _columnStart: number = 0;
     @observable private cursor: CursorProperty = "grab";
     get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
+    get chromeCollapsed() { return this.props.chromeCollapsed; }
     @computed get xMargin() { return NumCast(this.props.Document.xMargin, 2 * this.gridGap); }
     @computed get yMargin() { return NumCast(this.props.Document.yMargin, 2 * this.gridGap); }
     @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); }
@@ -265,7 +267,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         }
         // let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
-            <div className="collectionStackingView"
+            <div className="collectionStackingView" style={{ top: this.chromeCollapsed ? 0 : 100 }}
                 ref={this.createRef} onDrop={this.onDrop.bind(this)} onWheel={(e: React.WheelEvent) => e.stopPropagation()} >
                 {/* {sectionFilter as boolean ? [
                     ["width > height", this.filteredChildren.filter(f => f[WidthSym]() >= 1 + f[HeightSym]())],
diff --git a/src/client/views/collections/CollectionSubView.tsx b/src/client/views/collections/CollectionSubView.tsx
index 24c8adb35..98447e824 100644
--- a/src/client/views/collections/CollectionSubView.tsx
+++ b/src/client/views/collections/CollectionSubView.tsx
@@ -30,6 +30,7 @@ export interface CollectionViewProps extends FieldViewProps {
     moveDocument: (document: Doc, targetCollection: Doc, addDocument: (document: Doc) => boolean) => boolean;
     PanelWidth: () => number;
     PanelHeight: () => number;
+    chromeCollapsed: boolean;
 }
 
 export interface SubCollectionViewProps extends CollectionViewProps {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index ba9780c24..e2f652908 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -17,7 +17,8 @@ import { CollectionStackingView } from './CollectionStackingView';
 import { CollectionTreeView } from "./CollectionTreeView";
 import { StrCast, PromiseValue } from '../../../new_fields/Types';
 import { DocumentType } from '../../documents/Documents';
-import { CollectionStackingViewChrome } from './CollectionViewChromes';
+import { CollectionStackingViewChrome, CollectionViewBaseChrome } from './CollectionViewChromes';
+import { observable } from 'mobx';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -32,40 +33,39 @@ library.add(faImage);
 
 @observer
 export class CollectionView extends React.Component<FieldViewProps> {
+    @observable private _collapsed = false;
+
     public static LayoutString(fieldStr: string = "data", fieldExt: string = "") { return FieldView.LayoutString(CollectionView, fieldStr, fieldExt); }
 
     private SubViewHelper = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
         let props = { ...this.props, ...renderProps };
         switch (this.isAnnotationOverlay ? CollectionViewType.Freeform : type) {
-            case CollectionViewType.Schema: return (<CollectionSchemaView key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Docking: return (<CollectionDockingView key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Tree: return (<CollectionTreeView key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView key="collview" {...props} CollectionView={this} />); }
-            case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView key="collview" {...props} CollectionView={this} />); }
+            case CollectionViewType.Schema: return (<CollectionSchemaView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+            case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+            case CollectionViewType.Tree: return (<CollectionTreeView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+            case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
+            case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
             case CollectionViewType.Freeform:
             default:
-                return (<CollectionFreeFormView key="collview" {...props} CollectionView={this} />);
+                return (<CollectionFreeFormView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
         }
         return (null);
     }
 
-    private Chrome = (type: CollectionViewType) => {
-        if (this.isAnnotationOverlay || this.props.Document === CurrentUserUtils.UserDocument.sidebar) {
-            return (null);
-        }
-
-        switch (type) {
-            case CollectionViewType.Stacking: return (<CollectionStackingViewChrome key="collchrome" CollectionView={this} />);
-            default:
-                return null;
-        }
+    private collapse = (value: boolean) => {
+        this._collapsed = value;
     }
 
     private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
-        return [
-            this.Chrome(type),
-            this.SubViewHelper(type, renderProps)
-        ]
+        if (this.isAnnotationOverlay || this.props.Document === CurrentUserUtils.UserDocument.sidebar) {
+            return [(null), this.SubViewHelper(type, renderProps)];
+        }
+        else {
+            return [
+                (<CollectionViewBaseChrome CollectionView={this} type={type} collapse={this.collapse} />),
+                this.SubViewHelper(type, renderProps)
+            ];
+        }
     }
 
     get isAnnotationOverlay() { return this.props.fieldExt ? true : false; }
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 3103cd309..d37228bde 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -1,98 +1,104 @@
 @import "../globalCssVariables";
 @import '~js-datepicker/dist/datepicker.min.css';
 
-.collectionViewBaseChrome {
-    display: flex;
-
-    .collectionViewBaseChrome-viewPicker {
-        font-size: 75%;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        background: rgb(238, 238, 238);
-        color: grey;
-        outline-color: black;
-        border: none;
-        padding: 12px 10px 11px 10px;
-    }
-
-    .collectionViewBaseChrome-viewPicker:active {
-        outline-color: black;
-    }
-
-    .collectionViewBaseChrome-collapse {
-        margin-right: 10px;
-        transition: all .5s;
-    }
+.collectionViewChrome {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    padding-bottom: 10px;
+    border-bottom: .5px solid lightgrey;
+    margin: 10px;
+    position: relative;
+    z-index: 9001;
+    transition: top .5s;
 
-    .collectionViewBaseChrome-viewSpecs {
-        margin-left: 10px;
-        display: grid;
+    .collectionViewBaseChrome {
+        display: flex;
 
-        .collectionViewBaseChrome-viewSpecsInput {
-            padding: 12px 10px 11px 10px;
-            border: 0px;
-            color: grey;
-            text-align: center;
+        .collectionViewBaseChrome-viewPicker {
+            font-size: 75%;
             text-transform: uppercase;
             letter-spacing: 2px;
-            outline-color: black;
-            font-size: 75%;
             background: rgb(238, 238, 238);
-            height: 100%;
-            width: 150px;
+            color: grey;
+            outline-color: black;
+            border: none;
+            padding: 12px 10px 11px 10px;
+            margin-left: 50px;
         }
 
-        .collectionViewBaseChrome-viewSpecsMenu {
-            overflow: hidden;
-            transition: height .5s, display .5s;
+        .collectionViewBaseChrome-viewPicker:active {
+            outline-color: black;
+        }
+
+        .collectionViewBaseChrome-collapse {
+            transition: all .5s;
             position: absolute;
-            top: 60px;
-            z-index: 100;
-            display: flex;
-            flex-direction: column;
-            background: rgb(238, 238, 238);
-            box-shadow: grey 2px 2px 4px;
+            width: 40px;
+        }
+
+        .collectionViewBaseChrome-viewSpecs {
+            margin-left: 10px;
+            display: grid;
 
-            .qs-datepicker {
-                left: unset;
-                right: 0;
+            .collectionViewBaseChrome-viewSpecsInput {
+                padding: 12px 10px 11px 10px;
+                border: 0px;
+                color: grey;
+                text-align: center;
+                text-transform: uppercase;
+                letter-spacing: 2px;
+                outline-color: black;
+                font-size: 75%;
+                background: rgb(238, 238, 238);
+                height: 100%;
+                width: 150px;
             }
 
-            .collectionViewBaseChrome-viewSpecsMenu-row {
-                display: grid;
-                grid-template-columns: 150px 200px 150px;
-                margin-top: 10px;
-                margin-right: 10px;
-
-                .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
-                .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
-                .collectionViewBaseChrome-viewSpecsMenu-rowRight {
-                    font-size: 75%;
-                    letter-spacing: 2px;
-                    color: grey;
-                    margin-left: 10px;
-                    padding: 5px;
-                    border: none;
-                    outline-color: black;
+            .collectionViewBaseChrome-viewSpecsMenu {
+                overflow: hidden;
+                transition: height .5s, display .5s;
+                position: absolute;
+                top: 60px;
+                z-index: 100;
+                display: flex;
+                flex-direction: column;
+                background: rgb(238, 238, 238);
+                box-shadow: grey 2px 2px 4px;
+
+                .qs-datepicker {
+                    left: unset;
+                    right: 0;
+                }
+
+                .collectionViewBaseChrome-viewSpecsMenu-row {
+                    display: grid;
+                    grid-template-columns: 150px 200px 150px;
+                    margin-top: 10px;
+                    margin-right: 10px;
+
+                    .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
+                    .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
+                    .collectionViewBaseChrome-viewSpecsMenu-rowRight {
+                        font-size: 75%;
+                        letter-spacing: 2px;
+                        color: grey;
+                        margin-left: 10px;
+                        padding: 5px;
+                        border: none;
+                        outline-color: black;
+                    }
                 }
-            }
 
-            .collectionViewBaseChrome-viewSpecsMenu-lastRow {
-                display: grid;
-                grid-template-columns: 1fr 1fr;
-                grid-gap: 10px;
-                margin: 10px;
+                .collectionViewBaseChrome-viewSpecsMenu-lastRow {
+                    display: grid;
+                    grid-template-columns: 1fr 1fr;
+                    grid-gap: 10px;
+                    margin: 10px;
+                }
             }
         }
     }
-}
 
-.collectionStackingViewChrome {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    padding-bottom: 10px;
-    border-bottom: .5px solid lightgrey;
-    margin: 10px;
 
     .collectionStackingViewChrome-cont {
         display: flex;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 2edac384d..24d13d5cb 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -19,16 +19,19 @@ const datepicker = require('js-datepicker');
 
 interface CollectionViewChromeProps {
     CollectionView: CollectionView;
+    type: CollectionViewType;
+    collapse?: (value: boolean) => any;
 }
 
 let stopPropagation = (e: React.SyntheticEvent) => e.stopPropagation();
 
 @observer
-class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps> {
+export class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps> {
     @observable private _viewSpecsOpen: boolean = false;
     @observable private _dateWithinValue: string = "";
     @observable private _dateValue: Date = new Date();
     @observable private _keyRestrictions: [JSX.Element, string][] = [];
+    @observable private _collapsed: boolean = false;
     @computed private get filterValue() { return Cast(this.props.CollectionView.props.Document.viewSpecScript, ScriptField); }
 
     private _picker: any;
@@ -124,68 +127,92 @@ class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps
         document.removeEventListener("pointerdown", this.closeDatePicker);
     }
 
+    @action
+    toggleCollapse = () => {
+        this._collapsed = !this._collapsed;
+        this.props.collapse(this._collapsed);
+    }
+
+    subChrome = () => {
+
+        switch (this.props.type) {
+            case CollectionViewType.Stacking: return (
+                <CollectionStackingViewChrome
+                    key="collchrome"
+                    CollectionView={this.props.CollectionView}
+                    type={this.props.type} />);
+            default:
+                return null;
+        }
+    }
+
     render() {
         return (
-            <div className="collectionViewBaseChrome">
-                <button className="collectionViewBaseChrome-collapse" title="Collapse collection chrome">
-                    <FontAwesomeIcon icon="caret-up" size="2x" />
-                </button>
-                <select
-                    className="collectionViewBaseChrome-viewPicker"
-                    onPointerDown={stopPropagation}
-                    onChange={this.viewChanged}
-                    value={NumCast(this.props.CollectionView.props.Document.viewType)}>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
-                    <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
-                </select>
-                <div className="collectionViewBaseChrome-viewSpecs">
-                    <input className="collectionViewBaseChrome-viewSpecsInput"
-                        placeholder="Filter Documents"
-                        value={this.filterValue ? this.filterValue.script.originalScript : ""}
-                        onPointerDown={this.openViewSpecs} />
-                    <div className="collectionViewBaseChrome-viewSpecsMenu"
-                        onPointerDown={this.openViewSpecs}
-                        style={{
-                            height: this._viewSpecsOpen ? "fit-content" : "0px",
-                            overflow: this._viewSpecsOpen ? "initial" : "hidden"
-                        }}>
-                        {this._keyRestrictions.map(i => i[0])}
-                        <div className="collectionViewBaseChrome-viewSpecsMenu-row">
-                            <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
-                                CREATED WITHIN:
+            <div className="collectionViewChrome" style={{ top: this._collapsed ? -100 : 0 }}>
+                <div className="collectionViewBaseChrome">
+                    <button className="collectionViewBaseChrome-collapse"
+                        style={{ top: this._collapsed ? 80 : 0, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }}
+                        title="Collapse collection chrome" onClick={this.toggleCollapse}>
+                        <FontAwesomeIcon icon="caret-up" size="2x" />
+                    </button>
+                    <select
+                        className="collectionViewBaseChrome-viewPicker"
+                        onPointerDown={stopPropagation}
+                        onChange={this.viewChanged}
+                        value={NumCast(this.props.CollectionView.props.Document.viewType)}>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
+                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
+                    </select>
+                    <div className="collectionViewBaseChrome-viewSpecs">
+                        <input className="collectionViewBaseChrome-viewSpecsInput"
+                            placeholder="Filter Documents"
+                            value={this.filterValue ? this.filterValue.script.originalScript : ""}
+                            onPointerDown={this.openViewSpecs} />
+                        <div className="collectionViewBaseChrome-viewSpecsMenu"
+                            onPointerDown={this.openViewSpecs}
+                            style={{
+                                height: this._viewSpecsOpen ? "fit-content" : "0px",
+                                overflow: this._viewSpecsOpen ? "initial" : "hidden"
+                            }}>
+                            {this._keyRestrictions.map(i => i[0])}
+                            <div className="collectionViewBaseChrome-viewSpecsMenu-row">
+                                <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
+                                    CREATED WITHIN:
                             </div>
-                            <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
-                                style={{ textTransform: "uppercase", textAlign: "center" }}
-                                value={this._dateWithinValue}
-                                onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
-                                <option value="1d">1 day of</option>
-                                <option value="3d">3 days of</option>
-                                <option value="1w">1 week of</option>
-                                <option value="2w">2 weeks of</option>
-                                <option value="1m">1 month of</option>
-                                <option value="2m">2 months of</option>
-                                <option value="6m">6 months of</option>
-                                <option value="1y">1 year of</option>
-                            </select>
-                            <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
-                                id={this._datePickerElGuid}
-                                value={this._dateValue.toLocaleDateString()}
-                                onPointerDown={this.openDatePicker}
-                                placeholder="Value" />
-                        </div>
-                        <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
-                            <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
-                                ADD KEY RESTRICTION
+                                <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
+                                    style={{ textTransform: "uppercase", textAlign: "center" }}
+                                    value={this._dateWithinValue}
+                                    onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
+                                    <option value="1d">1 day of</option>
+                                    <option value="3d">3 days of</option>
+                                    <option value="1w">1 week of</option>
+                                    <option value="2w">2 weeks of</option>
+                                    <option value="1m">1 month of</option>
+                                    <option value="2m">2 months of</option>
+                                    <option value="6m">6 months of</option>
+                                    <option value="1y">1 year of</option>
+                                </select>
+                                <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
+                                    id={this._datePickerElGuid}
+                                    value={this._dateValue.toLocaleDateString()}
+                                    onPointerDown={this.openDatePicker}
+                                    placeholder="Value" />
+                            </div>
+                            <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
+                                <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
+                                    ADD KEY RESTRICTION
                             </button>
-                            <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
-                                APPLY FILTER
+                                <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
+                                    APPLY FILTER
                             </button>
+                            </div>
                         </div>
                     </div>
                 </div>
+                {this.subChrome()}
             </div>
         )
     }
@@ -249,48 +276,45 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
 
     render() {
         return (
-            <div className="collectionStackingViewChrome">
-                <CollectionViewBaseChrome CollectionView={this.props.CollectionView} />
-                <div className="collectionStackingViewChrome-cont">
-                    <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
-                        <div className="collectionStackingViewChrome-sortLabel">
-                            Sort
-                        </div>
-                        <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
-                            <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
+            <div className="collectionStackingViewChrome-cont">
+                <button className="collectionStackingViewChrome-sort" onClick={this.toggleSort}>
+                    <div className="collectionStackingViewChrome-sortLabel">
+                        Sort
                         </div>
-                    </button>
-                    <div className="collectionStackingViewChrome-sectionFilter-cont">
-                        <div className="collectionStackingViewChrome-sectionFilter-label">
-                            Group items by:
-                        </div>
-                        <div className="collectionStackingViewChrome-sectionFilter">
-                            <EditableView
-                                GetValue={() => this.sectionFilter}
-                                autosuggestProps={
-                                    {
-                                        resetValue: this.resetValue,
-                                        value: this._currentKey,
-                                        onChange: this.onKeyChange,
-                                        autosuggestProps: {
-                                            inputProps:
-                                            {
-                                                value: this._currentKey,
-                                                onChange: this.onKeyChange
-                                            },
-                                            getSuggestionValue: this.getSuggestionValue,
-                                            suggestions: this.suggestions,
-                                            alwaysRenderSuggestions: true,
-                                            renderSuggestion: this.renderSuggestion,
-                                            onSuggestionsFetchRequested: this.onSuggestionFetch,
-                                            onSuggestionsClearRequested: this.onSuggestionClear
-                                        }
-                                    }}
-                                oneLine
-                                SetValue={this.setValue}
-                                contents={this.sectionFilter ? this.sectionFilter : "N/A"}
-                            />
+                    <div className="collectionStackingViewChrome-sortIcon" style={{ transform: `rotate(${this.descending ? "180" : "0"}deg)` }}>
+                        <FontAwesomeIcon icon="caret-up" size="2x" color="white" />
+                    </div>
+                </button>
+                <div className="collectionStackingViewChrome-sectionFilter-cont">
+                    <div className="collectionStackingViewChrome-sectionFilter-label">
+                        Group items by:
                         </div>
+                    <div className="collectionStackingViewChrome-sectionFilter">
+                        <EditableView
+                            GetValue={() => this.sectionFilter}
+                            autosuggestProps={
+                                {
+                                    resetValue: this.resetValue,
+                                    value: this._currentKey,
+                                    onChange: this.onKeyChange,
+                                    autosuggestProps: {
+                                        inputProps:
+                                        {
+                                            value: this._currentKey,
+                                            onChange: this.onKeyChange
+                                        },
+                                        getSuggestionValue: this.getSuggestionValue,
+                                        suggestions: this.suggestions,
+                                        alwaysRenderSuggestions: true,
+                                        renderSuggestion: this.renderSuggestion,
+                                        onSuggestionsFetchRequested: this.onSuggestionFetch,
+                                        onSuggestionsClearRequested: this.onSuggestionClear
+                                    }
+                                }}
+                            oneLine
+                            SetValue={this.setValue}
+                            contents={this.sectionFilter ? this.sectionFilter : "N/A"}
+                        />
                     </div>
                 </div>
             </div>
-- 
cgit v1.2.3-70-g09d2


From f8f3ee8df596758ca6f5f7e735fb1296a676f5b6 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Wed, 24 Jul 2019 22:31:45 -0400
Subject: merge

---
 .../views/collections/CollectionSchemaMovableTableHOC.tsx | 15 ++++++++++-----
 src/client/views/collections/CollectionSchemaView.scss    |  9 +++++++++
 src/client/views/collections/CollectionViewChromes.tsx    |  6 +++---
 3 files changed, 22 insertions(+), 8 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
index 6d388bb40..290958cd0 100644
--- a/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
+++ b/src/client/views/collections/CollectionSchemaMovableTableHOC.tsx
@@ -8,7 +8,11 @@ import { SelectionManager } from "../../util/SelectionManager";
 import { Cast, FieldValue, StrCast } from "../../../new_fields/Types";
 import { ContextMenu } from "../ContextMenu";
 import { action } from "mobx";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+library.add(faGripVertical);
 
 export interface MovableColumnProps {
     columnRenderer: TableCellRenderer;
@@ -198,11 +202,12 @@ export class MovableRow extends React.Component<MovableRowProps> {
         return (
             <div className={className} ref={this.createRowDropTarget} onContextMenu={this.onRowContextMenu}>
                 <div className="collectionSchema-row-wrapper" ref={this._header} onPointerEnter={this.onPointerEnter} onPointerLeave={this.onPointerLeave}>
-                    <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
-                        <ReactTableDefaults.TrComponent>
-                            {children}
-                        </ReactTableDefaults.TrComponent>
-                    </div>
+                    <ReactTableDefaults.TrComponent>
+                        <div className="row-dragger" ref={reference} onPointerDown={onItemDown}>
+                            <FontAwesomeIcon icon={"grip-vertical"} size="sm" />
+                        </div>
+                        {children}
+                    </ReactTableDefaults.TrComponent>
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 3bc1bc060..22d8a5cb6 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -70,6 +70,9 @@
     }
 
     .rt-thead {
+        width: calc(100% - 30px);
+        margin-left: 30px;
+
         &.-header {
             // background: $intermediate-color;
             // color: $light-color;
@@ -77,6 +80,8 @@
             height: 30px;
             // border: 1px solid $intermediate-color;
             box-shadow: none;
+            // width: calc(100% - 30px);
+            // margin-right: -30px;
         }
 
         .rt-resizable-header {
@@ -298,6 +303,10 @@ button.add-column {
 
     .row-dragger {
         // height: $MAX_ROW_HEIGHT;
+        width: 30px;
+        height: 100%;
+        padding: 10px;
+        color: gray;
     }
 
     .collectionSchema-row-wrapper {
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 52fee26bf..03676fe86 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -53,7 +53,7 @@ class CollectionViewBaseChrome extends React.Component<CollectionViewChromeProps
                     <option value="masonry" selected={this.props.CollectionView.props.Document.viewType === CollectionViewType.Masonry}>Masonry View</option>
                 </select>
             </div>
-        )
+        );
     }
 }
 
@@ -147,6 +147,6 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
                     </div>
                 </div>
             </div>
-        )
+        );
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2


From db560a8c43f77b9342e55a48dd96f695813b32ef Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Thu, 25 Jul 2019 12:53:09 -0400
Subject: oof a lot of stuff here

---
 .../views/collections/CollectionSchemaView.scss    |   1 +
 .../views/collections/CollectionSchemaView.tsx     |   2 +
 .../views/collections/CollectionStackingView.tsx   |   5 +-
 .../views/collections/CollectionTreeView.scss      |  27 ++-
 .../views/collections/CollectionTreeView.tsx       |   2 +
 src/client/views/collections/CollectionView.tsx    |  18 +-
 .../views/collections/CollectionViewChromes.scss   | 258 +++++++++++----------
 .../views/collections/CollectionViewChromes.tsx    | 137 ++++++-----
 .../authentication/models/current_user_utils.ts    |   4 +
 9 files changed, 251 insertions(+), 203 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionSchemaView.scss b/src/client/views/collections/CollectionSchemaView.scss
index 186e006f3..1e6d1fe99 100644
--- a/src/client/views/collections/CollectionSchemaView.scss
+++ b/src/client/views/collections/CollectionSchemaView.scss
@@ -12,6 +12,7 @@
     width: 100%;
     height: 100%;
     overflow: hidden;
+    transition: top 0.5s;
 
     .collectionSchemaView-cellContents {
         height: $MAX_ROW_HEIGHT;
diff --git a/src/client/views/collections/CollectionSchemaView.tsx b/src/client/views/collections/CollectionSchemaView.tsx
index 2cf50e551..bdcedea10 100644
--- a/src/client/views/collections/CollectionSchemaView.tsx
+++ b/src/client/views/collections/CollectionSchemaView.tsx
@@ -69,6 +69,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     @observable _newKeyName: string = "";
     @observable previewScript: string = "";
 
+    @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
     @computed get previewWidth() { return () => NumCast(this.props.Document.schemaPreviewWidth); }
     @computed get previewHeight() { return () => this.props.PanelHeight() - 2 * this.borderWidth; }
     @computed get tableWidth() { return this.props.PanelWidth() - 2 * this.borderWidth - this.DIVIDER_WIDTH - this.previewWidth(); }
@@ -390,6 +391,7 @@ export class CollectionSchemaView extends CollectionSubView(doc => doc) {
     render() {
         return (
             <div className="collectionSchemaView-container" onPointerDown={this.onPointerDown} onWheel={this.onWheel}
+                style={{ top: this.chromeCollapsed ? 0 : "unset" }}
                 onDrop={(e: React.DragEvent) => this.onDrop(e, {})} onContextMenu={this.onContextMenu} ref={this.createTarget}>
                 {this.reactTable}
                 {this.dividerDragger}
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index 31ec80d76..b5c0fb3d6 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -21,8 +21,6 @@ import { List } from "../../../new_fields/List";
 import { EditableView } from "../EditableView";
 import { CollectionViewProps } from "./CollectionBaseView";
 
-let valuesCreated = 1;
-
 @observer
 export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _masonryGridRef: HTMLDivElement | null = null;
@@ -33,7 +31,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
     _columnStart: number = 0;
     @observable private cursor: CursorProperty = "grab";
     get sectionHeaders() { return Cast(this.props.Document.sectionHeaders, listSpec(SchemaHeaderField)); }
-    get chromeCollapsed() { return this.props.chromeCollapsed; }
+    @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
     @computed get xMargin() { return NumCast(this.props.Document.xMargin, 2 * this.gridGap); }
     @computed get yMargin() { return NumCast(this.props.Document.yMargin, 2 * this.gridGap); }
     @computed get gridGap() { return NumCast(this.props.Document.gridGap, 10); }
@@ -84,7 +82,6 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
             () => StrCast(this.props.Document.sectionFilter),
             () => {
                 this.props.Document.sectionHeaders = new List();
-                valuesCreated = 1;
             }
         )
     }
diff --git a/src/client/views/collections/CollectionTreeView.scss b/src/client/views/collections/CollectionTreeView.scss
index 5205f4313..db3652ff6 100644
--- a/src/client/views/collections/CollectionTreeView.scss
+++ b/src/client/views/collections/CollectionTreeView.scss
@@ -31,6 +31,7 @@
         margin-top: 4px;
         transform: scale(1.3, 1.3);
     }
+
     .editableView-container {
         font-weight: bold;
     }
@@ -43,18 +44,20 @@
         display: inline;
     }
 
-    .editableView-input, .editableView-container-editing {
+    .editableView-input,
+    .editableView-container-editing {
         display: block;
         text-overflow: ellipsis;
         font-size: 24px;
         white-space: nowrap;
     }
 }
+
 .collectionTreeView-keyHeader {
     font-style: italic;
     font-size: 8pt;
     margin-left: 3px;
-    display:none;
+    display: none;
     background: lightgray;
 }
 
@@ -72,28 +75,31 @@
     // width:100%;//width: max-content;
 
 }
+
 .treeViewItem-openRight {
     display: none;
 }
 
 .treeViewItem-border {
-    display:inherit;
+    display: inherit;
     border-left: dashed 1px #00000042;
 }
 
 .treeViewItem-header:hover {
     .collectionTreeView-keyHeader {
-        display:inherit;
+        display: inherit;
     }
+
     .treeViewItem-openRight {
         display: inline-block;
-        height:13px;
-        margin-top:2px;
+        height: 13px;
+        margin-top: 2px;
         margin-left: 5px;
+
         // display: inline;
         svg {
-            display:block;
-            padding:0px;
+            display: block;
+            padding: 0px;
             margin: 0px;
         }
     }
@@ -101,14 +107,17 @@
 
 .treeViewItem-header {
     border: transparent 1px solid;
-    display:flex;
+    display: flex;
 }
+
 .treeViewItem-header-above {
     border-top: black 1px solid;
 }
+
 .treeViewItem-header-below {
     border-bottom: black 1px solid;
 }
+
 .treeViewItem-header-inside {
     border: black 1px solid;
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index d05cc375e..cbf32c667 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -456,6 +456,8 @@ export class CollectionTreeView extends CollectionSubView(Document) {
     private treedropDisposer?: DragManager.DragDropDisposer;
     private _mainEle?: HTMLDivElement;
 
+    @computed get chromeCollapsed() { return this.props.chromeCollapsed; }
+
     protected createTreeDropTarget = (ele: HTMLDivElement) => {
         this.treedropDisposer && this.treedropDisposer();
         if (this._mainEle = ele) {
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index e2f652908..1c6dd661d 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -18,7 +18,7 @@ import { CollectionTreeView } from "./CollectionTreeView";
 import { StrCast, PromiseValue } from '../../../new_fields/Types';
 import { DocumentType } from '../../documents/Documents';
 import { CollectionStackingViewChrome, CollectionViewBaseChrome } from './CollectionViewChromes';
-import { observable } from 'mobx';
+import { observable, action, runInAction } from 'mobx';
 export const COLLECTION_BORDER_WIDTH = 2;
 
 library.add(faTh);
@@ -37,11 +37,20 @@ export class CollectionView extends React.Component<FieldViewProps> {
 
     public static LayoutString(fieldStr: string = "data", fieldExt: string = "") { return FieldView.LayoutString(CollectionView, fieldStr, fieldExt); }
 
+    componentDidMount = () => {
+        // chrome status is one of disabled, collapsed, or visible. this determines initial state from document
+        let chromeStatus = this.props.Document.chromeStatus;
+        if (chromeStatus && (chromeStatus === "disabled" || chromeStatus === "collapsed")) {
+            runInAction(() => this._collapsed = true);
+        }
+    }
+
     private SubViewHelper = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
         let props = { ...this.props, ...renderProps };
         switch (this.isAnnotationOverlay ? CollectionViewType.Freeform : type) {
             case CollectionViewType.Schema: return (<CollectionSchemaView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
-            case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
+            // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip
+            case CollectionViewType.Docking: return (<CollectionDockingView chromeCollapsed={true} key="collview" {...props} CollectionView={this} />);
             case CollectionViewType.Tree: return (<CollectionTreeView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />);
             case CollectionViewType.Stacking: { this.props.Document.singleColumn = true; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
             case CollectionViewType.Masonry: { this.props.Document.singleColumn = false; return (<CollectionStackingView chromeCollapsed={this._collapsed} key="collview" {...props} CollectionView={this} />); }
@@ -52,12 +61,15 @@ export class CollectionView extends React.Component<FieldViewProps> {
         return (null);
     }
 
+    @action
     private collapse = (value: boolean) => {
         this._collapsed = value;
+        this.props.Document.chromeStatus = value ? "collapsed" : "visible";
     }
 
     private SubView = (type: CollectionViewType, renderProps: CollectionRenderProps) => {
-        if (this.isAnnotationOverlay || this.props.Document === CurrentUserUtils.UserDocument.sidebar) {
+        // currently cant think of a reason for collection docking view to have a chrome. mind may change if we ever have nested docking views -syip
+        if (this.isAnnotationOverlay || this.props.Document.chromeStatus === "disabled" || type === CollectionViewType.Docking) {
             return [(null), this.SubViewHelper(type, renderProps)];
         }
         else {
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index d37228bde..0faca0607 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -1,167 +1,171 @@
 @import "../globalCssVariables";
 @import '~js-datepicker/dist/datepicker.min.css';
 
-.collectionViewChrome {
-    display: grid;
-    grid-template-columns: 1fr auto;
-    padding-bottom: 10px;
-    border-bottom: .5px solid lightgrey;
-    margin: 10px;
+.collectionViewChrome-cont {
     position: relative;
     z-index: 9001;
     transition: top .5s;
+    background: rgb(238, 238, 238);
+    padding: 10px;
 
-    .collectionViewBaseChrome {
-        display: flex;
+    .collectionViewChrome {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        padding-bottom: 10px;
+        border-bottom: .5px solid lightgrey;
 
-        .collectionViewBaseChrome-viewPicker {
-            font-size: 75%;
-            text-transform: uppercase;
-            letter-spacing: 2px;
-            background: rgb(238, 238, 238);
-            color: grey;
-            outline-color: black;
-            border: none;
-            padding: 12px 10px 11px 10px;
-            margin-left: 50px;
-        }
-
-        .collectionViewBaseChrome-viewPicker:active {
-            outline-color: black;
-        }
-
-        .collectionViewBaseChrome-collapse {
-            transition: all .5s;
-            position: absolute;
-            width: 40px;
-        }
-
-        .collectionViewBaseChrome-viewSpecs {
-            margin-left: 10px;
-            display: grid;
+        .collectionViewBaseChrome {
+            display: flex;
 
-            .collectionViewBaseChrome-viewSpecsInput {
-                padding: 12px 10px 11px 10px;
-                border: 0px;
-                color: grey;
-                text-align: center;
+            .collectionViewBaseChrome-viewPicker {
+                font-size: 75%;
                 text-transform: uppercase;
                 letter-spacing: 2px;
-                outline-color: black;
-                font-size: 75%;
                 background: rgb(238, 238, 238);
-                height: 100%;
-                width: 150px;
+                color: grey;
+                outline-color: black;
+                border: none;
+                padding: 12px 10px 11px 10px;
+                margin-left: 50px;
+            }
+
+            .collectionViewBaseChrome-viewPicker:active {
+                outline-color: black;
             }
 
-            .collectionViewBaseChrome-viewSpecsMenu {
-                overflow: hidden;
-                transition: height .5s, display .5s;
+            .collectionViewBaseChrome-collapse {
+                transition: all .5s;
                 position: absolute;
-                top: 60px;
-                z-index: 100;
-                display: flex;
-                flex-direction: column;
-                background: rgb(238, 238, 238);
-                box-shadow: grey 2px 2px 4px;
+                width: 40px;
+            }
 
-                .qs-datepicker {
-                    left: unset;
-                    right: 0;
+            .collectionViewBaseChrome-viewSpecs {
+                margin-left: 10px;
+                display: grid;
+
+                .collectionViewBaseChrome-viewSpecsInput {
+                    padding: 12px 10px 11px 10px;
+                    border: 0px;
+                    color: grey;
+                    text-align: center;
+                    text-transform: uppercase;
+                    letter-spacing: 2px;
+                    outline-color: black;
+                    font-size: 75%;
+                    background: rgb(238, 238, 238);
+                    height: 100%;
+                    width: 150px;
                 }
 
-                .collectionViewBaseChrome-viewSpecsMenu-row {
-                    display: grid;
-                    grid-template-columns: 150px 200px 150px;
-                    margin-top: 10px;
-                    margin-right: 10px;
-
-                    .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
-                    .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
-                    .collectionViewBaseChrome-viewSpecsMenu-rowRight {
-                        font-size: 75%;
-                        letter-spacing: 2px;
-                        color: grey;
-                        margin-left: 10px;
-                        padding: 5px;
-                        border: none;
-                        outline-color: black;
+                .collectionViewBaseChrome-viewSpecsMenu {
+                    overflow: hidden;
+                    transition: height .5s, display .5s;
+                    position: absolute;
+                    top: 60px;
+                    z-index: 100;
+                    display: flex;
+                    flex-direction: column;
+                    background: rgb(238, 238, 238);
+                    box-shadow: grey 2px 2px 4px;
+
+                    .qs-datepicker {
+                        left: unset;
+                        right: 0;
                     }
-                }
 
-                .collectionViewBaseChrome-viewSpecsMenu-lastRow {
-                    display: grid;
-                    grid-template-columns: 1fr 1fr;
-                    grid-gap: 10px;
-                    margin: 10px;
+                    .collectionViewBaseChrome-viewSpecsMenu-row {
+                        display: grid;
+                        grid-template-columns: 150px 200px 150px;
+                        margin-top: 10px;
+                        margin-right: 10px;
+
+                        .collectionViewBaseChrome-viewSpecsMenu-rowLeft,
+                        .collectionViewBaseChrome-viewSpecsMenu-rowMiddle,
+                        .collectionViewBaseChrome-viewSpecsMenu-rowRight {
+                            font-size: 75%;
+                            letter-spacing: 2px;
+                            color: grey;
+                            margin-left: 10px;
+                            padding: 5px;
+                            border: none;
+                            outline-color: black;
+                        }
+                    }
+
+                    .collectionViewBaseChrome-viewSpecsMenu-lastRow {
+                        display: grid;
+                        grid-template-columns: 1fr 1fr;
+                        grid-gap: 10px;
+                        margin: 10px;
+                    }
                 }
             }
         }
-    }
 
 
-    .collectionStackingViewChrome-cont {
-        display: flex;
-        justify-content: space-between;
-    }
+        .collectionStackingViewChrome-cont {
+            display: flex;
+            justify-content: space-between;
+        }
 
-    .collectionStackingViewChrome-sort {
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
+        .collectionStackingViewChrome-sort {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
 
-        .collectionStackingViewChrome-sortIcon {
-            transition: transform .5s;
-            margin-left: 10px;
+            .collectionStackingViewChrome-sortIcon {
+                transition: transform .5s;
+                margin-left: 10px;
+            }
         }
-    }
-
-    button:hover {
-        transform: scale(1);
-    }
 
+        button:hover {
+            transform: scale(1);
+        }
 
-    .collectionStackingViewChrome-sectionFilter-cont {
-        justify-self: right;
-        display: flex;
-        font-size: 75%;
-        text-transform: uppercase;
-        letter-spacing: 2px;
 
-        .collectionStackingViewChrome-sectionFilter-label {
-            vertical-align: center;
-            padding: 10px;
-        }
+        .collectionStackingViewChrome-sectionFilter-cont {
+            justify-self: right;
+            display: flex;
+            font-size: 75%;
+            text-transform: uppercase;
+            letter-spacing: 2px;
 
-        .collectionStackingViewChrome-sectionFilter {
-            color: white;
-            width: 100px;
-            text-align: center;
-            background: rgb(238, 238, 238);
+            .collectionStackingViewChrome-sectionFilter-label {
+                vertical-align: center;
+                padding: 10px;
+            }
 
-            .editable-view-input,
-            input,
-            .editableView-container-editing-oneLine,
-            .editableView-container-editing {
-                padding: 12px 10px 11px 10px;
-                border: 0px;
-                color: grey;
+            .collectionStackingViewChrome-sectionFilter {
+                color: white;
+                width: 100px;
                 text-align: center;
-                text-transform: uppercase;
-                letter-spacing: 2px;
-                outline-color: black;
-                height: 100%;
-            }
+                background: rgb(238, 238, 238);
 
-            .react-autosuggest__container {
-                margin: 0;
-                color: grey;
-                padding: 0px;
+                .editable-view-input,
+                input,
+                .editableView-container-editing-oneLine,
+                .editableView-container-editing {
+                    padding: 12px 10px 11px 10px;
+                    border: 0px;
+                    color: grey;
+                    text-align: center;
+                    text-transform: uppercase;
+                    letter-spacing: 2px;
+                    outline-color: black;
+                    height: 100%;
+                }
+
+                .react-autosuggest__container {
+                    margin: 0;
+                    color: grey;
+                    padding: 0px;
+                }
             }
         }
-    }
 
-    .collectionStackingViewChrome-sectionFilter:hover {
-        cursor: text;
+        .collectionStackingViewChrome-sectionFilter:hover {
+            cursor: text;
+        }
     }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 24d13d5cb..4129781f7 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -47,6 +47,20 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
         runInAction(() => {
             this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]);
             this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={false} script={(value: string) => runInAction(() => this._keyRestrictions[1][1] = value)} />, ""]);
+
+            // chrome status is one of disabled, collapsed, or visible. this determines initial state from document
+            let chromeStatus = this.props.CollectionView.props.Document.chromeStatus;
+            if (chromeStatus) {
+                if (chromeStatus === "disabled") {
+                    throw new Error("how did you get here, if chrome status is 'disabled' on a collection, a chrome shouldn't even be instantiated!");
+                }
+                else if (chromeStatus === "collapsed") {
+                    this._collapsed = true;
+                    if (this.props.collapse) {
+                        this.props.collapse(true);
+                    }
+                }
+            }
         });
     }
 
@@ -130,11 +144,12 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
     @action
     toggleCollapse = () => {
         this._collapsed = !this._collapsed;
-        this.props.collapse(this._collapsed);
+        if (this.props.collapse) {
+            this.props.collapse(this._collapsed);
+        }
     }
 
     subChrome = () => {
-
         switch (this.props.type) {
             case CollectionViewType.Stacking: return (
                 <CollectionStackingViewChrome
@@ -148,71 +163,73 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
 
     render() {
         return (
-            <div className="collectionViewChrome" style={{ top: this._collapsed ? -100 : 0 }}>
-                <div className="collectionViewBaseChrome">
-                    <button className="collectionViewBaseChrome-collapse"
-                        style={{ top: this._collapsed ? 80 : 0, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }}
-                        title="Collapse collection chrome" onClick={this.toggleCollapse}>
-                        <FontAwesomeIcon icon="caret-up" size="2x" />
-                    </button>
-                    <select
-                        className="collectionViewBaseChrome-viewPicker"
-                        onPointerDown={stopPropagation}
-                        onChange={this.viewChanged}
-                        value={NumCast(this.props.CollectionView.props.Document.viewType)}>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
-                        <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
-                    </select>
-                    <div className="collectionViewBaseChrome-viewSpecs">
-                        <input className="collectionViewBaseChrome-viewSpecsInput"
-                            placeholder="Filter Documents"
-                            value={this.filterValue ? this.filterValue.script.originalScript : ""}
-                            onPointerDown={this.openViewSpecs} />
-                        <div className="collectionViewBaseChrome-viewSpecsMenu"
-                            onPointerDown={this.openViewSpecs}
-                            style={{
-                                height: this._viewSpecsOpen ? "fit-content" : "0px",
-                                overflow: this._viewSpecsOpen ? "initial" : "hidden"
-                            }}>
-                            {this._keyRestrictions.map(i => i[0])}
-                            <div className="collectionViewBaseChrome-viewSpecsMenu-row">
-                                <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
-                                    CREATED WITHIN:
-                            </div>
-                                <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
-                                    style={{ textTransform: "uppercase", textAlign: "center" }}
-                                    value={this._dateWithinValue}
-                                    onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
-                                    <option value="1d">1 day of</option>
-                                    <option value="3d">3 days of</option>
-                                    <option value="1w">1 week of</option>
-                                    <option value="2w">2 weeks of</option>
-                                    <option value="1m">1 month of</option>
-                                    <option value="2m">2 months of</option>
-                                    <option value="6m">6 months of</option>
-                                    <option value="1y">1 year of</option>
-                                </select>
-                                <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
-                                    id={this._datePickerElGuid}
-                                    value={this._dateValue.toLocaleDateString()}
-                                    onPointerDown={this.openDatePicker}
-                                    placeholder="Value" />
+            <div className="collectionViewChrome-cont" style={{ top: this._collapsed ? -100 : 0 }}>
+                <div className="collectionViewChrome">
+                    <div className="collectionViewBaseChrome">
+                        <button className="collectionViewBaseChrome-collapse"
+                            style={{ top: this._collapsed ? 90 : 10, transform: `rotate(${this._collapsed ? 180 : 0}deg)` }}
+                            title="Collapse collection chrome" onClick={this.toggleCollapse}>
+                            <FontAwesomeIcon icon="caret-up" size="2x" />
+                        </button>
+                        <select
+                            className="collectionViewBaseChrome-viewPicker"
+                            onPointerDown={stopPropagation}
+                            onChange={this.viewChanged}
+                            value={NumCast(this.props.CollectionView.props.Document.viewType)}>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="1">Freeform View</option>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
+                        </select>
+                        <div className="collectionViewBaseChrome-viewSpecs">
+                            <input className="collectionViewBaseChrome-viewSpecsInput"
+                                placeholder="Filter Documents"
+                                value={this.filterValue ? this.filterValue.script.originalScript : ""}
+                                onPointerDown={this.openViewSpecs} />
+                            <div className="collectionViewBaseChrome-viewSpecsMenu"
+                                onPointerDown={this.openViewSpecs}
+                                style={{
+                                    height: this._viewSpecsOpen ? "fit-content" : "0px",
+                                    overflow: this._viewSpecsOpen ? "initial" : "hidden"
+                                }}>
+                                {this._keyRestrictions.map(i => i[0])}
+                                <div className="collectionViewBaseChrome-viewSpecsMenu-row">
+                                    <div className="collectionViewBaseChrome-viewSpecsMenu-rowLeft">
+                                        CREATED WITHIN:
                             </div>
-                            <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
-                                <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
-                                    ADD KEY RESTRICTION
+                                    <select className="collectionViewBaseChrome-viewSpecsMenu-rowMiddle"
+                                        style={{ textTransform: "uppercase", textAlign: "center" }}
+                                        value={this._dateWithinValue}
+                                        onChange={(e) => runInAction(() => this._dateWithinValue = e.target.value)}>
+                                        <option value="1d">1 day of</option>
+                                        <option value="3d">3 days of</option>
+                                        <option value="1w">1 week of</option>
+                                        <option value="2w">2 weeks of</option>
+                                        <option value="1m">1 month of</option>
+                                        <option value="2m">2 months of</option>
+                                        <option value="6m">6 months of</option>
+                                        <option value="1y">1 year of</option>
+                                    </select>
+                                    <input className="collectionViewBaseChrome-viewSpecsMenu-rowRight"
+                                        id={this._datePickerElGuid}
+                                        value={this._dateValue.toLocaleDateString()}
+                                        onPointerDown={this.openDatePicker}
+                                        placeholder="Value" />
+                                </div>
+                                <div className="collectionViewBaseChrome-viewSpecsMenu-lastRow">
+                                    <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.addKeyRestriction}>
+                                        ADD KEY RESTRICTION
                             </button>
-                                <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
-                                    APPLY FILTER
+                                    <button className="collectonViewBaseChrome-viewSpecsMenu-lastRowButton" onClick={this.applyFilter}>
+                                        APPLY FILTER
                             </button>
+                                </div>
                             </div>
                         </div>
                     </div>
+                    {this.subChrome()}
                 </div>
-                {this.subChrome()}
             </div>
         )
     }
diff --git a/src/server/authentication/models/current_user_utils.ts b/src/server/authentication/models/current_user_utils.ts
index 1c52a3f11..41eb1aa0c 100644
--- a/src/server/authentication/models/current_user_utils.ts
+++ b/src/server/authentication/models/current_user_utils.ts
@@ -50,6 +50,7 @@ export class CurrentUserUtils {
         if (doc.workspaces === undefined) {
             const workspaces = Docs.Create.TreeDocument([], { title: "Workspaces", height: 100 });
             workspaces.excludeFromLibrary = true;
+            workspaces.chromeStatus = "disabled";
             workspaces.workspaceLibrary = true;
             workspaces.boxShadow = "0 0";
             doc.workspaces = workspaces;
@@ -57,6 +58,7 @@ export class CurrentUserUtils {
         if (doc.recentlyClosed === undefined) {
             const recentlyClosed = Docs.Create.TreeDocument([], { title: "Recently Closed", height: 75 });
             recentlyClosed.excludeFromLibrary = true;
+            recentlyClosed.chromeStatus = "disabled";
             recentlyClosed.boxShadow = "0 0";
             doc.recentlyClosed = recentlyClosed;
         }
@@ -65,11 +67,13 @@ export class CurrentUserUtils {
             sidebar.excludeFromLibrary = true;
             sidebar.gridGap = 5;
             sidebar.xMargin = 5;
+            sidebar.chromeStatus = "disabled";
             sidebar.yMargin = 5;
             Doc.GetProto(sidebar).backgroundColor = "#aca3a6";
             sidebar.boxShadow = "1 1 3";
             doc.sidebar = sidebar;
         }
+        doc.chromeStatus = "disabled";
         StrCast(doc.title).indexOf("@") !== -1 && (doc.title = StrCast(doc.title).split("@")[0] + "'s Library");
 
     }
-- 
cgit v1.2.3-70-g09d2


From 0baefb4e0b133df60f42d894733113c961740af3 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Thu, 25 Jul 2019 19:30:44 -0400
Subject: almost done

---
 .../views/collections/CollectionStackingView.scss  | 42 ++++++++++++----------
 .../views/collections/CollectionStackingView.tsx   |  8 ++---
 .../CollectionStackingViewFieldColumn.tsx          | 26 ++++++++------
 .../views/collections/CollectionViewChromes.scss   |  5 +--
 .../views/collections/CollectionViewChromes.tsx    |  6 ++--
 5 files changed, 48 insertions(+), 39 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionStackingView.scss b/src/client/views/collections/CollectionStackingView.scss
index f43340967..9dbe4ccb8 100644
--- a/src/client/views/collections/CollectionStackingView.scss
+++ b/src/client/views/collections/CollectionStackingView.scss
@@ -96,7 +96,6 @@
             outline: none;
             border: 0px;
             color: $light-color;
-            text-transform: uppercase;
             letter-spacing: 2px;
             font-size: 75%;
             transition: transform 0.2s;
@@ -118,9 +117,7 @@
                 padding: 12px 10px 11px 10px;
                 border: 0px;
                 color: grey;
-                // font-size: 75%;
                 text-align: center;
-                text-transform: uppercase;
                 letter-spacing: 2px;
                 outline-color: black;
             }
@@ -142,15 +139,6 @@
         width: 90%;
         color: lightgrey;
         overflow: ellipses;
-    }
-
-    .collectionStackingView-addGroupButton {
-        background: rgb(238, 238, 238);
-        font-size: 75%;
-        text-align: center;
-        text-transform: uppercase;
-        letter-spacing: 2px;
-        height: fit-content;
 
         .editableView-container-editing-oneLine,
         .editableView-container-editing {
@@ -165,14 +153,32 @@
         }
 
         .editableView-input {
-            padding: 12px 10px 11px 10px;
-            border: 0px;
-            color: grey;
-            // font-size: 75%;
-            text-align: center;
-            text-transform: uppercase;
+            outline-color: black;
             letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
+        }
+    }
+
+    .collectionStackingView-addDocumentButton {
+        font-size: 75%;
+        letter-spacing: 2px;
+
+        .editableView-input {
             outline-color: black;
+            letter-spacing: 2px;
+            color: grey;
+            border: 0px;
+            padding: 12px 10px 11px 10px;
         }
     }
+
+    .collectionStackingView-addGroupButton {
+        background: rgb(238, 238, 238);
+        font-size: 75%;
+        text-align: center;
+        letter-spacing: 2px;
+        height: fit-content;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/collections/CollectionStackingView.tsx b/src/client/views/collections/CollectionStackingView.tsx
index b5c0fb3d6..7c93201fe 100644
--- a/src/client/views/collections/CollectionStackingView.tsx
+++ b/src/client/views/collections/CollectionStackingView.tsx
@@ -47,7 +47,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let fields = new Map<SchemaHeaderField, Doc[]>(sectionHeaders.map(sh => [sh, []]));
         if (sectionFilter) {
             this.filteredChildren.map(d => {
-                let sectionValue = (d[sectionFilter] ? d[sectionFilter] : `No ${sectionFilter} value`) as object;
+                let sectionValue = (d[sectionFilter] ? d[sectionFilter] : `NO ${sectionFilter.toUpperCase()} VALUE`) as object;
                 // the next five lines ensures that floating point rounding errors don't create more than one section -syip
                 let parsed = parseInt(sectionValue.toString());
                 let castedSectionValue: any = sectionValue;
@@ -56,12 +56,12 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
                 }
 
                 // look for if header exists already
-                let existingHeader = sectionHeaders!.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `No ${sectionFilter} value`));
+                let existingHeader = sectionHeaders!.find(sh => sh.heading === (castedSectionValue ? castedSectionValue.toString() : `NO ${sectionFilter.toUpperCase()} VALUE`));
                 if (existingHeader) {
                     fields.get(existingHeader)!.push(d);
                 }
                 else {
-                    let newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `No ${sectionFilter} value`);
+                    let newSchemaHeader = new SchemaHeaderField(castedSectionValue ? castedSectionValue.toString() : `NO ${sectionFilter.toUpperCase()} VALUE`);
                     fields.set(newSchemaHeader, [d]);
                     sectionHeaders!.push(newSchemaHeader);
                 }
@@ -260,7 +260,7 @@ export class CollectionStackingView extends CollectionSubView(doc => doc) {
         let editableViewProps = {
             GetValue: () => "",
             SetValue: this.addGroup,
-            contents: "+ Add a Group"
+            contents: "+ ADD A GROUP"
         }
         // let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
         return (
diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 582adc418..ea2a302ff 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -18,6 +18,7 @@ import { SchemaHeaderField } from "../../../new_fields/SchemaHeaderField";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { ScriptField } from "../../../new_fields/ScriptField";
 import { CompileScript } from "../../util/Scripting";
+import { RichTextField } from "../../../new_fields/RichTextField";
 
 
 interface CSVFieldColumnProps {
@@ -168,11 +169,11 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
     }
 
     @action
-    addDocument = () => {
+    addDocument = (value: string, shiftDown?: boolean) => {
         let key = StrCast(this.props.parent.props.Document.sectionFilter);
-        let newDoc = Docs.Create.TextDocument({ height: 18, title: "new text document" });
+        let newDoc = Docs.Create.TextDocument({ height: 18, width: 200, title: value });
         newDoc[key] = this.getValue(this.props.heading);
-        this.props.parent.props.addDocument(newDoc);
+        return this.props.parent.props.addDocument(newDoc);
     }
 
     @action
@@ -231,29 +232,34 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
         let style = this.props.parent;
         let singleColumn = style.singleColumn;
         let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
-        let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `No ${key} value`;
-        let editableViewProps = {
+        let evContents = heading ? heading : this.props.type && this.props.type === "number" ? "0" : `NO ${key.toUpperCase()} VALUE`;
+        let headerEditableViewProps = {
             GetValue: () => evContents,
             SetValue: this.headingChanged,
             contents: evContents,
             oneLine: true
         }
+        let newEditableViewProps = {
+            GetValue: () => "",
+            SetValue: this.addDocument,
+            contents: "+ NEW"
+        }
         let headingView = this.props.headingObject ?
             <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
                 style={{ width: (style.columnWidth) / (uniqueHeadings.length + 1) }}>
                 {/* the default bucket (no key value) has a tooltip that describes what it is.
                     Further, it does not have a color and cannot be deleted. */}
                 <div className="collectionStackingView-sectionHeader-subCont" onPointerDown={this.headerDown}
-                    title={evContents === `No ${key} value` ?
+                    title={evContents === `NO ${key.toUpperCase()} VALUE` ?
                         `Documents that don't have a ${key} value will go here. This column cannot be removed.` : ""}
                     style={{
                         width: "100%",
-                        background: this.props.headingObject && evContents !== `No ${key} value` ?
+                        background: this.props.headingObject && evContents !== `NO ${key.toUpperCase()} VALUE` ?
                             this.props.headingObject.color : "lightgrey",
                         color: "grey"
                     }}>
-                    <EditableView {...editableViewProps} />
-                    {evContents === `No ${key} value` ?
+                    <EditableView {...headerEditableViewProps} />
+                    {evContents === `NO ${key.toUpperCase()} VALUE` ?
                         (null) :
                         <button className="collectionStackingView-sectionDelete" onClick={this.deleteColumn}>
                             <FontAwesomeIcon icon="trash" />
@@ -282,7 +288,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
                 </div>
                 <div key={`${heading}-add-document`} className="collectionStackingView-addDocumentButton"
                     style={{ width: style.columnWidth / (uniqueHeadings.length + 1) }}>
-                    <button style={{ width: "100%" }} onClick={this.addDocument}>+ New</button>
+                    <EditableView {...newEditableViewProps} />
                 </div>
             </div>
         );
diff --git a/src/client/views/collections/CollectionViewChromes.scss b/src/client/views/collections/CollectionViewChromes.scss
index 0faca0607..6525f3b07 100644
--- a/src/client/views/collections/CollectionViewChromes.scss
+++ b/src/client/views/collections/CollectionViewChromes.scss
@@ -5,7 +5,7 @@
     position: relative;
     z-index: 9001;
     transition: top .5s;
-    background: rgb(238, 238, 238);
+    background: lightslategray;
     padding: 10px;
 
     .collectionViewChrome {
@@ -48,7 +48,6 @@
                     border: 0px;
                     color: grey;
                     text-align: center;
-                    text-transform: uppercase;
                     letter-spacing: 2px;
                     outline-color: black;
                     font-size: 75%;
@@ -128,7 +127,6 @@
             justify-self: right;
             display: flex;
             font-size: 75%;
-            text-transform: uppercase;
             letter-spacing: 2px;
 
             .collectionStackingViewChrome-sectionFilter-label {
@@ -150,7 +148,6 @@
                     border: 0px;
                     color: grey;
                     text-align: center;
-                    text-transform: uppercase;
                     letter-spacing: 2px;
                     outline-color: black;
                     height: 100%;
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 4129781f7..78ceaad86 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -180,11 +180,11 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
                             <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="2">Schema View</option>
                             <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="4">Tree View</option>
                             <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="5">Stacking View</option>
-                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View></option>
+                            <option className="collectionViewBaseChrome-viewOption" onPointerDown={stopPropagation} value="6">Masonry View</option>
                         </select>
                         <div className="collectionViewBaseChrome-viewSpecs">
                             <input className="collectionViewBaseChrome-viewSpecsInput"
-                                placeholder="Filter Documents"
+                                placeholder="FILTER DOCUMENTS"
                                 value={this.filterValue ? this.filterValue.script.originalScript : ""}
                                 onPointerDown={this.openViewSpecs} />
                             <div className="collectionViewBaseChrome-viewSpecsMenu"
@@ -304,7 +304,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
                 </button>
                 <div className="collectionStackingViewChrome-sectionFilter-cont">
                     <div className="collectionStackingViewChrome-sectionFilter-label">
-                        Group items by:
+                        GROUP ITEMS BY:
                         </div>
                     <div className="collectionStackingViewChrome-sectionFilter">
                         <EditableView
-- 
cgit v1.2.3-70-g09d2


From a53d76d28750b03744727f2646313bccb120dbcb Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Fri, 26 Jul 2019 19:13:39 -0400
Subject: moved schema toolbar into collection chrome

---
 .../views/collections/CollectionViewChromes.tsx     | 21 ++++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index 1ad9e47ce..de1d01ef0 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -16,6 +16,7 @@ import KeyRestrictionRow from "./KeyRestrictionRow";
 import { CompileScript } from "../../util/Scripting";
 import { ScriptField } from "../../../new_fields/ScriptField";
 import { CollectionSchemaView } from "./CollectionSchemaView";
+import { COLLECTION_BORDER_WIDTH } from "../globalCssVariables.scss";
 const datepicker = require('js-datepicker');
 
 interface CollectionViewChromeProps {
@@ -346,16 +347,26 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
     }
 }
 
-interface SchemaChromeProps extends CollectionViewChromeProps {
-    toolbar: JSX.Element;
-}
 
 @observer
-export class CollectionSchemaViewChrome extends React.Component<SchemaChromeProps> {
+export class CollectionSchemaViewChrome extends React.Component<CollectionViewChromeProps> {
+
+    togglePreview = () => {
+        let dividerWidth = 4;
+        let borderWidth = Number(COLLECTION_BORDER_WIDTH);
+        let panelWidth = this.props.CollectionView.props.PanelWidth();
+        let previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth);
+        let tableWidth = panelWidth - 2 * borderWidth - dividerWidth - previewWidth;
+        this.props.CollectionView.props.Document.schemaPreviewWidth = previewWidth === 0 ? Math.min(tableWidth / 3, 200) : 0;
+
+    }
+
+
     render() {
+        let previewWidth = NumCast(this.props.CollectionView.props.Document.schemaPreviewWidth);
         return (
             <div className="collectionStackingViewChrome-cont">
-                {this.props.toolbar}
+                <div id="preview-schema-checkbox-div"><input type="checkbox" key={"Show Preview"} checked={previewWidth !== 0} onChange={this.togglePreview} />Show Preview</div>
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 73fcf938eb817ae9b4dfdcefd5f04502079c153e Mon Sep 17 00:00:00 2001
From: Tyler Schicke <tyler_schicke@brown.edu>
Date: Sat, 27 Jul 2019 18:38:09 -0400
Subject: Fixed linter errors

---
 src/client/views/collections/CollectionStackingViewFieldColumn.tsx | 6 +++---
 src/client/views/collections/CollectionViewChromes.tsx             | 2 +-
 src/client/views/collections/KeyRestrictionRow.tsx                 | 2 +-
 3 files changed, 5 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
index 1a5d203f9..cf6079196 100644
--- a/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
+++ b/src/client/views/collections/CollectionStackingViewFieldColumn.tsx
@@ -74,7 +74,7 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             let layoutDoc = Doc.expandTemplateLayout(d, parent.props.DataDoc);
             let headings = this.props.headings();
             let uniqueHeadings = headings.map((i, idx) => headings.indexOf(i) === idx);
-            let pair = Doc.GetLayoutDataDocPair(parent.props.Document, parent.props.DataDoc, parent.props.fieldKey, d)
+            let pair = Doc.GetLayoutDataDocPair(parent.props.Document, parent.props.DataDoc, parent.props.fieldKey, d);
             let width = () => (d.nativeWidth && !BoolCast(d.ignoreAspect) ? Math.min(pair.layout[WidthSym](), parent.columnWidth) : parent.columnWidth) / (uniqueHeadings.length + 1);
             let height = () => parent.getDocHeight(pair.layout);
             if (parent.singleColumn) {
@@ -243,12 +243,12 @@ export class CollectionStackingViewFieldColumn extends React.Component<CSVFieldC
             SetValue: this.headingChanged,
             contents: evContents,
             oneLine: true
-        }
+        };
         let newEditableViewProps = {
             GetValue: () => "",
             SetValue: this.addDocument,
             contents: "+ NEW"
-        }
+        };
         let headingView = this.props.headingObject ?
             <div key={heading} className="collectionStackingView-sectionHeader" ref={this._headerRef}
                 style={{ width: (style.columnWidth) / (uniqueHeadings.length + 1) }}>
diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index de1d01ef0..bf643347f 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -296,7 +296,7 @@ export class CollectionStackingViewChrome extends React.Component<CollectionView
         return true;
     }
 
-    @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; }
+    @action toggleSort = () => { this.props.CollectionView.props.Document.stackingHeadersSortDescending = !this.props.CollectionView.props.Document.stackingHeadersSortDescending; };
     @action resetValue = () => { this._currentKey = this.sectionFilter; };
 
     render() {
diff --git a/src/client/views/collections/KeyRestrictionRow.tsx b/src/client/views/collections/KeyRestrictionRow.tsx
index 8051a8359..f292557b5 100644
--- a/src/client/views/collections/KeyRestrictionRow.tsx
+++ b/src/client/views/collections/KeyRestrictionRow.tsx
@@ -40,6 +40,6 @@ export default class KeyRestrictionRow extends React.Component<IKeyRestrictionPr
                     onChange={(e) => runInAction(() => this._value = e.target.value)}
                     placeholder="VALUE" />
             </div>
-        )
+        );
     }
 }
\ No newline at end of file
-- 
cgit v1.2.3-70-g09d2


From 31fafa54bd85cb292a5facd12d7c8f0ed13d1ea9 Mon Sep 17 00:00:00 2001
From: yipstanley <stanley_yip@brown.edu>
Date: Sat, 27 Jul 2019 19:24:54 -0400
Subject: small timeout thing

---
 src/client/views/collections/CollectionViewChromes.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

(limited to 'src/client/views/collections/CollectionViewChromes.tsx')

diff --git a/src/client/views/collections/CollectionViewChromes.tsx b/src/client/views/collections/CollectionViewChromes.tsx
index bf643347f..044d5336a 100644
--- a/src/client/views/collections/CollectionViewChromes.tsx
+++ b/src/client/views/collections/CollectionViewChromes.tsx
@@ -40,11 +40,11 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewChro
     private _datePickerElGuid = Utils.GenerateGuid();
 
     componentDidMount = () => {
-        this._picker = datepicker("#" + this._datePickerElGuid, {
+        setTimeout(() => this._picker = datepicker("#" + this._datePickerElGuid, {
             disabler: (date: Date) => date > new Date(),
             onSelect: (instance: any, date: Date) => runInAction(() => this._dateValue = date),
             dateSelected: new Date()
-        });
+        }), 1000);
 
         runInAction(() => {
             this._keyRestrictions.push([<KeyRestrictionRow key={Utils.GenerateGuid()} contains={true} script={(value: string) => runInAction(() => this._keyRestrictions[0][1] = value)} />, ""]);
-- 
cgit v1.2.3-70-g09d2

