1 files changed, 6 insertions, 51 deletions

diff --git a/src/client/views/collections/CollectionTimeView.tsx b/src/client/views/collections/CollectionTimeView.tsx
index 38f6aa3e7..37452ddfb 100644
--- a/src/client/views/collections/CollectionTimeView.tsx
+++ b/src/client/views/collections/CollectionTimeView.tsx
@@ -1,12 +1,10 @@
-import { toUpper } from 'lodash';
 import { action, computed, makeObservable, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnEmptyString, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils';
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents } from '../../../Utils';
 import { Doc, Opt, StrListCast } from '../../../fields/Doc';
 import { List } from '../../../fields/List';
 import { ObjectField } from '../../../fields/ObjectField';
-import { RichTextField } from '../../../fields/RichTextField';
 import { listSpec } from '../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../fields/ScriptField';
 import { Cast, NumCast, StrCast } from '../../../fields/Types';
@@ -15,7 +13,7 @@ import { DocumentManager } from '../../util/DocumentManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
-import { EditableView } from '../EditableView';
+import { FieldsDropdown } from '../FieldsDropdown';
 import { DocumentView } from '../nodes/DocumentView';
 import { FocusViewOptions } from '../nodes/FieldView';
 import { PresBox } from '../nodes/trails';
@@ -51,7 +49,7 @@ export class CollectionTimeView extends CollectionSubView() {
     }
 
     getAnchor = (addAsAnnotation: boolean) => {
-        const anchor = Docs.Create.HTMLMarkerDocument([], {
+        const anchor = Docs.Create.ConfigDocument({
             title: ComputedField.MakeFunction(`"${this.pivotField}"])`) as any,
             annotationOn: this.Document,
         });
@@ -192,51 +190,6 @@ export class CollectionTimeView extends CollectionSubView() {
 
         ContextMenu.Instance.addItem({ description: 'Options...', subitems: layoutItems, icon: 'eye' });
     };
-    @computed get _allFacets() {
-        const facets = new Set<string>();
-        this.childDocs.forEach(child => Object.keys(Doc.GetProto(child)).forEach(key => facets.add(key)));
-        Doc.AreProtosEqual(this.dataDoc, this.Document) && this.childDocs.forEach(child => Object.keys(child).forEach(key => facets.add(key)));
-        return Array.from(facets);
-    }
-    menuCallback = (x: number, y: number) => {
-        ContextMenu.Instance.clearItems();
-        const keySet: Set<string> = new Set(['tags']);
-
-        this.childLayoutPairs.map(pair =>
-            this._allFacets
-                .filter(fieldKey => pair.layout[fieldKey] instanceof RichTextField || typeof pair.layout[fieldKey] === 'number' || typeof pair.layout[fieldKey] === 'boolean' || typeof pair.layout[fieldKey] === 'string')
-                .filter(fieldKey => fieldKey[0] !== '_' && (fieldKey === 'tags' || fieldKey[0] === toUpper(fieldKey)[0]))
-                .map(fieldKey => keySet.add(fieldKey))
-        );
-
-        const docItems: ContextMenuProps[] = Array.from(keySet).map(fieldKey => 
-                     ({ description: ':' + fieldKey, event: () => (this.layoutDoc._pivotField = fieldKey), icon: 'compress-arrows-alt' })); // prettier-ignore
-        docItems.push({ description: ':default', event: () => (this.layoutDoc._pivotField = undefined), icon: 'compress-arrows-alt' });
-        ContextMenu.Instance.addItem({ description: 'Pivot Fields ...', subitems: docItems, icon: 'eye' });
-        ContextMenu.Instance.displayMenu(x, y, ':');
-    };
-
-    @computed get pivotKeyUI() {
-        return (
-            <div className={'pivotKeyEntry'}>
-                <EditableView
-                    GetValue={returnEmptyString}
-                    SetValue={(value: any) => {
-                        if (value?.length) {
-                            this.layoutDoc._pivotField = value;
-                            return true;
-                        }
-                        return false;
-                    }}
-                    background={'#f1efeb'} // this._props.headingObject ? this._props.headingObject.color : "#f1efeb";
-                    contents={':' + StrCast(this.layoutDoc._pivotField)}
-                    showMenuOnLoad={true}
-                    display={'inline'}
-                    menuCallback={this.menuCallback}
-                />
-            </div>
-        );
-    }
 
     render() {
         let nonNumbers = 0;
@@ -263,7 +216,6 @@ export class CollectionTimeView extends CollectionSubView() {
 
         return (
             <div className={'collectionTimeView' + (doTimeline ? '' : '-pivot')} onContextMenu={this.specificMenu} style={{ width: this._props.PanelWidth(), height: '100%' }}>
-                {this.pivotKeyUI}
                 {this.contents}
                 {!this._props.isSelected() || !doTimeline ? null : (
                     <>
@@ -272,6 +224,9 @@ export class CollectionTimeView extends CollectionSubView() {
                         <div className="collectionTimeView-thumb-mid collectionTimeView-thumb" key="max" onPointerDown={this.onMidDown} />
                     </>
                 )}
+                <div style={{ right: 0, top: 0, position: 'absolute' }}>
+                    <FieldsDropdown Document={this.Document} selectFunc={fieldKey => (this.layoutDoc._pivotField = fieldKey)} placeholder={StrCast(this.layoutDoc._pivotField)} />
+                </div>
             </div>
         );
     }