Merge branch 'filters' of https://github.com/browngraphicslab/Dash-Web into filters

7 files changed, 321 insertions, 39 deletions

diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index f301d6c51..d17b72639 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -44,6 +44,7 @@ import { KeyManager } from './GlobalKeyHandler';
 import { InkStrokeProperties } from './InkStrokeProperties';
 import { LinkMenu } from './linking/LinkMenu';
 import "./MainView.scss";
+import "./collections/TreeView.scss";
 import { AudioBox } from './nodes/AudioBox';
 import { DocumentLinksButton } from './nodes/DocumentLinksButton';
 import { DocumentView, DocumentViewProps } from './nodes/DocumentView';
@@ -58,7 +59,7 @@ import { PDFMenu } from './pdf/PDFMenu';
 import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { SearchBox } from './search/SearchBox';
-import { DefaultStyleProvider, StyleProp } from './StyleProvider';
+import { DefaultStyleProvider, DashboardStyleProvider, StyleProp } from './StyleProvider';
 import { FieldViewProps } from './nodes/FieldView';
 const _global = (window /* browser */ || global /* node */) as any;
 
@@ -164,7 +165,7 @@ export class MainView extends React.Component {
             fa.faWindowMinimize, fa.faWindowRestore, fa.faTextWidth, fa.faTextHeight, fa.faClosedCaptioning, fa.faInfoCircle, fa.faTag, fa.faSyncAlt, fa.faPhotoVideo,
             fa.faArrowAltCircleDown, fa.faArrowAltCircleUp, fa.faArrowAltCircleLeft, fa.faArrowAltCircleRight, fa.faStopCircle, fa.faCheckCircle, fa.faGripVertical,
             fa.faSortUp, fa.faSortDown, fa.faTable, fa.faTh, fa.faThList, fa.faProjectDiagram, fa.faSignature, fa.faColumns, fa.faChevronCircleUp, fa.faUpload, fa.faBorderAll,
-            fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines);
+            fa.faBraille, fa.faChalkboard, fa.faPencilAlt, fa.faEyeSlash, fa.faSmile, fa.faIndent, fa.faOutdent, fa.faChartBar, fa.faBan, fa.faPhoneSlash, fa.faGripLines, fa.faBookmark);
         this.initAuthenticationRouters();
     }
 
@@ -342,7 +343,7 @@ export class MainView extends React.Component {
                         PanelHeight={this.getContentsHeight}
                         renderDepth={0}
                         focus={emptyFunction}
-                        styleProvider={this._sidebarContent.proto === Doc.UserDoc().myDashboards ? this.DashboardStyleProvider : DefaultStyleProvider}
+                        styleProvider={this._sidebarContent.title === "My Dashboards" ? DashboardStyleProvider : DefaultStyleProvider}
                         parentActive={returnTrue}
                         whenActiveChanged={emptyFunction}
                         bringToFront={emptyFunction}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index e1600f748..98ac1da37 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -15,6 +15,7 @@ import { MainView } from './MainView';
 import { DocumentViewProps } from "./nodes/DocumentView";
 import { FieldViewProps } from './nodes/FieldView';
 import "./StyleProvider.scss";
+import "./collections/TreeView.scss";
 import React = require("react");
 import Color = require('color');
 
@@ -23,6 +24,7 @@ export enum StyleLayers {
 }
 
 export enum StyleProp {
+    TreeViewIcon = "treeViewIcon",
     DocContents = "docContents",          // when specified, the JSX returned will replace the normal rendering of the document view
     Opacity = "opacity",                  // opacity of the document view
     Hidden = "hidden",                    // whether the document view should not be isplayed
@@ -64,11 +66,14 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
     const selected = property.includes(":selected");
     const isCaption = property.includes(":caption");
     const isAnchor = property.includes(":anchor");
+    const isFooter = property.includes(":footer");
+
     const isBackground = () => StrListCast(doc?.layers).includes(StyleLayers.Background);
     const backgroundCol = () => props?.styleProvider?.(doc, props, StyleProp.BackgroundColor);
     const opacity = () => props?.styleProvider?.(doc, props, StyleProp.Opacity);
 
     switch (property.split(":")[0]) {
+        case StyleProp.TreeViewIcon: return doc && Doc.toIcon(doc);
         case StyleProp.DocContents: return undefined;
         case StyleProp.WidgetColor: return darkScheme() ? "lightgrey" : "dimgrey";
         case StyleProp.Opacity: return Cast(doc?._opacity, "number", Cast(doc?.opacity, "number", null));
@@ -154,6 +159,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
             if (doc?.type !== DocumentType.INK && layer === true) return "all";
             return undefined;
         case StyleProp.Decorations:
+            // if (isFooter)
+
             if (props?.ContainingCollectionDoc?._viewType === CollectionViewType.Freeform) {
                 return doc && (isBackground() || selected) && (props?.renderDepth || 0) > 0 &&
                     ((doc.type === DocumentType.COL && doc._viewType !== CollectionViewType.Pile) || [DocumentType.RTF, DocumentType.IMG, DocumentType.INK].includes(doc.type as DocumentType)) ?
@@ -165,6 +172,45 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps |
     }
 }
 
+
+function toggleHidden(e: React.MouseEvent, doc: Doc) {
+    UndoManager.RunInBatch(() => runInAction(() => {
+        e.stopPropagation();
+        doc.hidden = doc.hidden ? undefined : true;
+    }), "toggleHidden");
+}
+
+function toggleLock(e: React.MouseEvent, doc: Doc) {
+    UndoManager.RunInBatch(() => runInAction(() => {
+        e.stopPropagation();
+        doc.lockedPosition = doc.lockedPosition ? undefined : true;
+    }), "toggleHidden");
+}
+
+/**
+ * add lock and hide button decorations for the "Dashboards" flyout TreeView
+ */
+export function DashboardStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps | DocumentViewProps>, property: string) {
+    switch (property.split(":")[0]) {
+        case StyleProp.Decorations:
+            if (doc) {
+                const hidden = doc.hidden;
+                const locked = doc.lockedPosition;
+                return doc._viewType === CollectionViewType.Docking || (Doc.IsSystem(doc) && Doc.UserDoc().noviceMode) ? (null) :
+                    <>
+                        <div className={`styleProvider-treeView-hide${hidden ? "-active" : ""}`} onClick={(e) => toggleHidden(e, doc)}>
+                            <FontAwesomeIcon icon={hidden ? "eye-slash" : "eye"} size="sm" />
+                        </div>
+                        <div className={`styleProvider-treeView-lock${locked ? "-active" : ""}`} onClick={(e) => toggleLock(e, doc)}>
+                            <FontAwesomeIcon icon={locked ? "lock" : "unlock"} size="sm" />
+                        </div>
+                    </>;
+            }
+        default: return DefaultStyleProvider(doc, props, property);
+
+    }
+}
+
 //
 // a preliminary semantic-"layering/grouping" mechanism for determining interactive properties of documents
 //  currently, the provider tests whether the docuemnt's layer field matches the activeLayer field of the tab.
diff --git a/src/client/views/collections/CollectionTreeView.tsx b/src/client/views/collections/CollectionTreeView.tsx
index 564939270..d1e0a0f02 100644
--- a/src/client/views/collections/CollectionTreeView.tsx
+++ b/src/client/views/collections/CollectionTreeView.tsx
@@ -212,7 +212,7 @@ export class CollectionTreeView extends CollectionSubView<Document, Partial<coll
     render() {
         TraceMobx();
         if (!(this.doc instanceof Doc)) return (null);
-        const background = this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
+        const background = this.props.treeViewHideTitle && this.props.treeViewHideHeaderFields ? "#D3D3D3" : this.props.styleProvider?.(this.doc, this.props, StyleProp.BackgroundColor);
         const paddingX = `${NumCast(this.doc._xPadding, 15)}px`;
         const paddingTop = `${NumCast(this.doc._yPadding, 20)}px`;
         const pointerEvents = !this.props.active() && !SnappingManager.GetIsDragging() && !this._isChildActive ? "none" : undefined;
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 067675038..2f74a49bb 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -8,6 +8,7 @@
     width: 100%;
     overflow: hidden;
 }
+
 .treeView-container,
 .treeView-container-active {
     .bullet-outline {
@@ -20,21 +21,26 @@
 
     .treeView-bulletIcons {
         width: 15px;
+
         .treeView-expandIcon {
             display: none;
             left: -10px;
             position: absolute;
         }
+
         .treeView-checkIcon {
-            left: -10px;
+            left: 3.5px;
+            top: 2px;
             position: absolute;
         }
+
         &:hover {
             .treeView-expandIcon {
                 display: unset;
             }
         }
     }
+
     .bullet {
         position: relative;
         width: $TREE_BULLET_WIDTH;
@@ -45,9 +51,11 @@
         border-radius: 4px;
     }
 }
+
 .treeView-container-active {
     z-index: 100;
     position: relative;
+
     .formattedTextbox-sidebar {
         background-color: #ffff001f !important;
         height: 500px !important;
@@ -70,7 +78,8 @@
     display: flex;
     overflow: hidden;
 }
-.treeView-border{
+
+.treeView-border {
     border-left: dashed 1px #00000042;
 }
 
@@ -78,15 +87,20 @@
 .treeView-header {
     border: transparent 1px solid;
     display: flex;
+
     //align-items: center;
     ::-webkit-scrollbar {
-            display: none;
+        display: none;
     }
+
     .formattedTextBox-cont {
-        .formattedTextbox-sidebar, .formattedTextbox-sidebar-inking {
+
+        .formattedTextbox-sidebar,
+        .formattedTextbox-sidebar-inking {
             overflow: visible !important;
             border-left: unset;
         }
+
         overflow: visible !important;
     }
 
@@ -104,12 +118,18 @@
         margin-left: 0.25rem;
         opacity: 0.75;
 
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide, .styleProvider-treeView-lock-active, .styleProvider-treeView-hide-active {
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide,
+        .styleProvider-treeView-lock-active,
+        .styleProvider-treeView-hide-active {
             margin-left: 0.25rem;
-            margin-right: 0.25rem; 
+            margin-right: 0.25rem;
         }
-    
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide {
             display: none;
         }
     }
@@ -134,7 +154,10 @@
     }
 
     .right-buttons-container {
-        >svg, .styleProvider-treeView-lock, .styleProvider-treeView-hide {
+
+        >svg,
+        .styleProvider-treeView-lock,
+        .styleProvider-treeView-hide {
             display: inherit;
         }
     }
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index a61a9e43c..501fe372e 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -443,6 +443,12 @@ export class TreeView extends React.Component<TreeViewProps> {
     @computed get renderBullet() {
         TraceMobx();
         const iconType = Doc.toIcon(this.doc);
+
+        //const iconType = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.TreeViewIcon);
+
+
+        // const footerDecoration = this.titleStyleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decoration + ":footer");
+
         const checked = this.onCheckedClick ? (this.doc.treeViewChecked ?? "unchecked") : undefined;
         return <div className={`bullet${this.outlineMode ? "-outline" : ""}`} key={"bullet"}
             title={this.childDocs?.length ? `click to see ${this.childDocs?.length} items` : "view fields"}
@@ -467,7 +473,6 @@ export class TreeView extends React.Component<TreeViewProps> {
             }
         </div>;
     }
-
     @computed get showTitleEditorControl() { return ["*", this._uniqueId, this.props.treeView._uniqueId].includes(Doc.GetT(this.doc, "editTitle", "string", true) || ""); }
     @computed get headerElements() {
         return (Doc.IsSystem(this.doc) && Doc.UserDoc().noviceMode) || this.props.treeViewHideHeaderFields() ? (null) :
@@ -588,7 +593,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 {view}
             </div >
             <div className={"right-buttons-container"}>
-                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations + (Doc.IsSystem(this.props.containingCollection) ? ":afterHeader" : ""))} {/* hide and lock buttons */}
+                {this.props.styleProvider?.(this.doc, this.props.treeView.props, StyleProp.Decorations)} {/* hide and lock buttons */}
                 {this.headerElements}
             </div>
         </>;
diff --git a/src/client/views/nodes/FilterBox.scss b/src/client/views/nodes/FilterBox.scss
index d32cc0d2b..d19fc07d3 100644
--- a/src/client/views/nodes/FilterBox.scss
+++ b/src/client/views/nodes/FilterBox.scss
@@ -1,17 +1,144 @@
-
-
 .filterBox-flyout {
-    width: 400px;
     display: block;
     text-align: left;
+    font-weight: 200;
+
     .filterBox-flyout-facet {
-            background-color: lightgray;
-            text-align: left;
-            display: inline-block;
-            position: relative;
-            width: 100%;
+        background-color: white;
+        text-align: left;
+        display: inline-block;
+        position: relative;
+        width: 100%;
+
+        .filterBox-flyout-facet-check {
+            margin-right: 6px;
+        }
+    }
+}
+
+
+.filter-bookmark {
+    //display: flex;
+
+    .filter-bookmark-icon {
+        float: right;
+        margin-right: 10px;
+        margin-top: 7px;
+    }
+}
+
+.filterBox-bottom {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+}
+
+
+.filterBox-saveBookmark {
+    width: 105px;
+    background-color: #f5f5f5;
+    border-radius: 6px;
+    padding: 5px;
+    margin: 5px;
+    display: flex;
+    font-size: 17px;
+
+    &:hover {
+        background-color: white;
+    }
+
+    .filterBox-saveBookmark-icon {
+        margin-right: 10px;
+        margin-top: 4px;
+        margin-left: 10px;
+    }
+
+}
+
+.filterBox-title {
+
+    justify-content: center;
+    text-align: center;
+    padding-bottom: 13px;
+    font-size: 20px;
+    font-weight: bold;
+
+    .filterBox-span {
+        margin-right: 15px;
+    }
+
+}
+
+.filterBox-select-scope,
+.filterBox-select-bool,
+.filterBox-addWrapper,
+.filterBox-select-matched,
+.filterBox-saveWrapper {
+    font-size: 12px;
+    justify-content: center;
+    justify-items: center;
+    padding-bottom: 10px;
+    display: flex;
+}
+
+.filterBox-addWrapper {
+    font-size: 15px;
+    width: 100%;
+}
+
+.filterBox-saveWrapper {
+    width: 100%;
+}
+
+// .filterBox-top {
+//     padding-bottom: 20px;
+//     border-bottom: 2px solid black;
+//     position: fixed;
+//     top: 0;
+//     width: 100%;
+// }
+
+.filterBox-select-scope {
+    padding-bottom: 20px;
+    border-bottom: 2px solid black;
+}
+
+.filterBox-select-text {
+    margin-right: 8px;
+    margin-left: 8px;
+}
+
+.filterBox-select-box {
+    margin-right: 2px;
+    font-size: 30px;
+    border: 0;
+    background: transparent;
+}
+
+.filterBox-selection {
+    border-radius: 6px;
+    border: none;
+    background-color: #f5f5f5;
+    padding: 2px;
+
+    &:hover {
+        background-color: white;
     }
 }
+
+.filterBox-addFilter {
+    width: 100px;
+    background-color: #f5f5f5;
+    border-radius: 6px;
+    padding: 5px;
+    margin: 5px;
+    display: flex;
+
+    &:hover {
+        background-color: white;
+    }
+}
+
 .filterBox-treeView {
     display: flex;
     flex-direction: column;
@@ -22,22 +149,18 @@
     top: 0;
     border-left: solid 1px;
     z-index: 1;
+    background-color: #D3D3D3;
 
     .filterBox-addfacet {
         display: inline-block;
         width: 200px;
         height: 30px;
-        background: darkGray;
         text-align: left;
 
         .filterBox-addFacetButton {
             display: flex;
             margin: auto;
             cursor: pointer;
-
-            .filterBox-span {
-                margin-right: 15px;
-            }
         }
 
         >div,
@@ -50,6 +173,7 @@
     .filterBox-tree {
         display: inline-block;
         width: 100%;
-        height: calc(100% - 30px);
+        margin-bottom: 10px;
+        //height: calc(100% - 30px);
     }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/FilterBox.tsx b/src/client/views/nodes/FilterBox.tsx
index 36df21b2d..29fd84492 100644
--- a/src/client/views/nodes/FilterBox.tsx
+++ b/src/client/views/nodes/FilterBox.tsx
@@ -1,6 +1,6 @@
 import React = require("react");
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { computed } from "mobx";
+import { action, computed } from "mobx";
 import { observer } from "mobx-react";
 import { DataSym, Doc, DocListCast, Field, Opt } from "../../../fields/Doc";
 import { documentSchema } from "../../../fields/documentSchemas";
@@ -20,6 +20,8 @@ import { FieldView, FieldViewProps } from './FieldView';
 import './FilterBox.scss';
 import { Scripting } from "../../util/Scripting";
 import { values } from "lodash";
+import { tokenToString } from "typescript";
+import { SelectionManager } from "../../util/SelectionManager";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
@@ -31,6 +33,11 @@ const FilterBoxDocument = makeInterface(documentSchema);
 export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDocument>(FilterBoxDocument) {
     public static LayoutString(fieldKey: string) { return FieldView.LayoutString(FilterBox, fieldKey); }
 
+    public _filterBoolean = "AND";
+    public _filterScope = "Current Dashboard";
+    public _filterSelected = false;
+    public _filterMatch = "matched";
+
     @computed get allDocs() {
         const allDocs = new Set<Doc>();
         if (CollectionDockingView.Instance) {
@@ -159,25 +166,76 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
         return script ? () => script : undefined;
     }
 
+    @action
+    changeBool = (e: any) => {
+        this._filterBoolean = e.currentTarget.value;
+        console.log(this._filterBoolean);
+    }
+
+    @action
+    changeScope = (e: any) => {
+        this._filterScope = e.currentTarget.value;
+        console.log(this._filterScope);
+    }
+
+    @action
+    changeMatch = (e: any) => {
+        this._filterMatch = e.currentTarget.value;
+        console.log(this._filterMatch);
+    }
+
+
+    @action
+    changeSelected = (e: any) => {
+        if (this._filterSelected) {
+            this._filterSelected = false;
+            SelectionManager.DeselectAll();
+        } else {
+            this._filterSelected = true;
+            // helper method to select specified docs
+        }
+        console.log(this._filterSelected);
+    }
+
     render() {
         const facetCollection = this.props.Document;
-        const flyout = <div className="filterBox-flyout" style={{ width: `100%`, height: this.props.PanelHeight() - 30 }} onWheel={e => e.stopPropagation()}>
+        const flyout = <div className="filterBox-flyout" style={{ width: `100%` }} onWheel={e => e.stopPropagation()}>
             {this._allFacets.map(facet => <label className="filterBox-flyout-facet" key={`${facet}`} onClick={e => this.facetClick(facet)}>
-                <input type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey]).some(d => d.title === facet)} />
+                <input className="filterBox-flyout-facet-check" type="checkbox" onChange={e => { }} checked={DocListCast(this.props.Document[this.props.fieldKey]).some(d => d.title === facet)} />
                 <span className="checkmark" />
                 {facet}
             </label>)}
         </div>;
 
         return this.props.dontRegisterView ? (null) : <div className="filterBox-treeView" style={{ width: "100%" }}>
-            <div className="filterBox-addFacet" style={{ width: "100%" }} onPointerDown={e => e.stopPropagation()}>
-                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
-                    <div className="filterBox-addFacetButton">
-                        <FontAwesomeIcon icon={"edit"} size={"lg"} />
-                        <span className="filterBox-span">Choose Facets</span>
-                    </div>
-                </Flyout>
+
+            {/* <div className="filterBox-top"> */}
+            <div className="filter-bookmark">
+                <FontAwesomeIcon className="filter-bookmark-icon" icon={"bookmark"} size={"lg"} />
+            </div>
+
+            <div className="filterBox-title">
+                <span className="filterBox-span">Choose Filters</span>
+            </div>
+
+            <div className="filterBox-select-bool">
+                <select className="filterBox-selection" onChange={e => this.changeBool(e)}>
+                    <option value="AND" key="AND">AND</option>
+                    <option value="OR" key="OR">OR</option>
+                </select>
+                <div className="filterBox-select-text">specified filters</div>
+            </div>
+
+            <div className="filterBox-select-scope">
+                <div className="filterBox-select-text">Scope: </div>
+                <select className="filterBox-selection" onChange={e => this.changeScope(e)}>
+                    <option value="Current Dashboard" key="Current Dashboard">Current Dashboard</option>
+                    <option value="Current Tab" key="Current Tab">Current Tab</option>
+                    <option value="Current Collection" key="Current Collection">Current Collection</option>
+                </select>
             </div>
+            {/* </div> */}
+
             <div className="filterBox-tree" key="tree">
                 <CollectionTreeView
                     Document={facetCollection}
@@ -214,6 +272,31 @@ export class FilterBox extends ViewBoxBaseComponent<FieldViewProps, FilterBoxDoc
                     removeDocument={returnFalse}
                     addDocument={returnFalse} />
             </div>
+            <Flyout className="filterBox-flyout" anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
+                <div className="filterBox-addWrapper">
+                    <div className="filterBox-addFilter"> + add a filter</div>
+                </div>
+            </Flyout>
+
+            <div className="filterBox-bottom">
+                <div className="filterBox-select-matched">
+                    <input className="filterBox-select-box" type="checkbox"
+                        onChange={e => this.changeSelected(e)} />
+                    <div className="filterBox-select-text">select</div>
+                    <select className="filterBox-selection" onChange={e => this.changeMatch(e)}>
+                        <option value="matched" key="matched">matched</option>
+                        <option value="unmatched" key="unmatched">unmatched</option>
+                    </select>
+                    <div className="filterBox-select-text">documents</div>
+                </div>
+
+                <div className="filterBox-saveWrapper">
+                    <div className="filterBox-saveBookmark">
+                        <FontAwesomeIcon className="filterBox-saveBookmark-icon" icon={"bookmark"} size={"sm"} />
+                        <div>SAVE</div>
+                    </div>
+                </div>
+            </div>
         </div>;
     }
 }