pivot view/time view working

1 files changed, 31 insertions, 30 deletions

diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index c92ffdeea..f999067d3 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -1,6 +1,6 @@
 import { faEdit } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { action, computed, IReactionDisposer, observable } from "mobx";
+import { action, computed, IReactionDisposer, observable, trace } from "mobx";
 import { observer } from "mobx-react";
 import { Set } from "typescript-collections";
 import { Doc, DocListCast } from "../../../new_fields/Doc";
@@ -22,8 +22,10 @@ import { RichTextField } from "../../../new_fields/RichTextField";
 
 @observer
 export class CollectionTimeView extends CollectionSubView(doc => doc) {
+    _changing = false;
+    @observable _layoutEngine = "pivot";
+
     componentDidMount() {
-        this.props.Document._freeformLayoutEngine = "timeline";
         const childDetailed = this.props.Document.childDetailed; // bcz: needs to be here to make sure the childDetailed layout template has been loaded when the first item is clicked;
         if (!this.props.Document._facetCollection) {
             const facetCollection = Docs.Create.TreeDocument([], { title: "facetFilters", _yMargin: 0, treeViewHideTitle: true });
@@ -190,14 +192,14 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) {
         document.removeEventListener("pointermove", this.onMidUp);
     }
 
+    layoutEngine = () => this._layoutEngine;
     @computed get contents() {
         return <div className="collectionTimeView-innards" key="timeline" style={{ width: this.bodyPanelWidth() }}>
-            <CollectionFreeFormView  {...this.props} ScreenToLocalTransform={this.getTransform} PanelWidth={this.bodyPanelWidth} />
+            <CollectionFreeFormView  {...this.props} layoutEngine={this.layoutEngine} ScreenToLocalTransform={this.getTransform} PanelWidth={this.bodyPanelWidth} />
         </div>;
     }
-
-    _changing = false;
-    render() {
+    @computed get filterView() {
+        trace();
         const facetCollection = Cast(this.props.Document?._facetCollection, Doc, null);
         const flyout = (
             <div className="collectionTimeView-flyout" style={{ width: `${this._facetWidth}` }}>
@@ -208,6 +210,22 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) {
                 </label>)}
             </div>
         );
+        return <div className="collectionTimeView-treeView" style={{ width: `${this._facetWidth}px`, overflow: this._facetWidth < 15 ? "hidden" : undefined }}>
+            <div className="collectionTimeView-addFacet" style={{ width: `${this._facetWidth}px` }} onPointerDown={e => e.stopPropagation()}>
+                <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
+                    <div className="collectionTimeView-button">
+                        <span className="collectionTimeView-span">Facet Filters</span>
+                        <FontAwesomeIcon icon={faEdit} size={"lg"} />
+                    </div>
+                </Flyout>
+            </div>
+            <div className="collectionTimeView-tree" key="tree">
+                <CollectionTreeView {...this.props} Document={facetCollection} />
+            </div>
+        </div>;
+    }
+
+    render() {
         const newEditableViewProps = {
             GetValue: () => "",
             SetValue: (value: any) => {
@@ -230,23 +248,18 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) {
                 nonNumbers++;
             }
         });
-        const doTimeline = nonNumbers / this.childDocs.length < 0.1;
-        if (doTimeline !== (this.props.Document._freeformLayoutEngine === "timeline")) {
+        const doTimeline = nonNumbers / this.childDocs.length < 0.1 && this.props.PanelWidth() / this.props.PanelHeight() > 6;
+        if (doTimeline !== (this._layoutEngine === "timeline")) {
             if (!this._changing) {
                 this._changing = true;
-                setTimeout(() => {
-                    if (nonNumbers / this.childDocs.length > 0.1) {
-                        this.childDocs.map(child => child.isMinimized = false);
-                        this.props.Document._freeformLayoutEngine = "pivot";
-                    } else {
-                        this.props.Document._freeformLayoutEngine = "timeline";
-                    }
+                setTimeout(action(() => {
+                    this._layoutEngine = doTimeline ? "timeline" : "pivot";
                     this._changing = false;
-                }, 0);
+                }), 0);
             }
-            return (null);
         }
 
+        const facetCollection = Cast(this.props.Document?._facetCollection, Doc, null);
         return !facetCollection ? (null) :
             <div className={"collectionTimeView" + (doTimeline ? "" : "-pivot")} style={{ height: `calc(100%  - ${this.props.Document._chromeStatus === "enabled" ? 51 : 0}px)` }}>
                 <div className={"pivotKeyEntry"}>
@@ -257,19 +270,7 @@ export class CollectionTimeView extends CollectionSubView(doc => doc) {
                         <span title="library View Dragger" style={{ width: "5px", position: "absolute", top: "0" }} />
                     </div>
                 }
-                <div className="collectionTimeView-treeView" style={{ width: `${this._facetWidth}px`, overflow: this._facetWidth < 15 ? "hidden" : undefined }}>
-                    <div className="collectionTimeView-addFacet" style={{ width: `${this._facetWidth}px` }} onPointerDown={e => e.stopPropagation()}>
-                        <Flyout anchorPoint={anchorPoints.LEFT_TOP} content={flyout}>
-                            <div className="collectionTimeView-button">
-                                <span className="collectionTimeView-span">Facet Filters</span>
-                                <FontAwesomeIcon icon={faEdit} size={"lg"} />
-                            </div>
-                        </Flyout>
-                    </div>
-                    <div className="collectionTimeView-tree" key="tree">
-                        <CollectionTreeView {...this.props} Document={facetCollection} />
-                    </div>
-                </div>
+                {this.filterView}
                 {this.contents}
                 {!this.props.isSelected() || !doTimeline ? (null) : <>
                     <div className="collectionTimeView-thumb-min collectionTimeView-thumb" key="min" onPointerDown={this.onMinDown} />