added tutorial tool, still need to integrate with metadatatool

1 files changed, 9 insertions, 13 deletions

diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index c3047e5fb..4e7e19548 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -5,7 +5,6 @@ import { computedFn } from 'mobx-utils';
 import * as React from 'react';
 import { returnEmptyFilter, returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents, smoothScrollHorizontal, StopEvent } from '../../../ClientUtils';
 import { Doc, Opt, returnEmptyDoclist } from '../../../fields/Doc';
-import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
@@ -187,13 +186,12 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
     @computed get rangeClick() {
         // prettier-ignore
         return ScriptField.MakeFunction('stackedTimeline.clickAnchor(this, clientX)',
-            { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: 'string' /* should be CollectionStackedTimeline */ }
-        )!;
+            { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: this as unknown as string })!; // NOTE: scripts can't serialize a run-time React component as captured variable BUT this script will not be serialized so we can "stuff" anything we want in the capture variable
     }
     @computed get rangePlay() {
         // prettier-ignore
         return ScriptField.MakeFunction('stackedTimeline.playOnClick(this, clientX)', 
-            { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: 'string'  /* should be CollectionStackedTimeline */})!;
+            { stackedTimeline: 'any', clientX: 'number' }, { stackedTimeline: this as unknown as string })!; // NOTE: scripts can't serialize a run-time React component as captured variable BUT this script will not be serialized so we can "stuff" anything we want in the capture variable
     }
     rangeClickScript = () => this.rangeClick;
     rangePlayScript = () => this.rangePlay;
@@ -268,13 +266,13 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
             setupMoveUpEvents(
                 this,
                 e,
-                action(() => {
+                action(movEv => {
                     if (!wasSelecting) {
                         this._markerStart = this._markerEnd = this.toTimeline(clientX - rect.x, rect.width);
                         wasSelecting = true;
                         this._timelineWrapper && (this._timelineWrapper.style.cursor = 'ew-resize');
                     }
-                    this._markerEnd = this.toTimeline(e.clientX - rect.x, rect.width);
+                    this._markerEnd = this.toTimeline(movEv.clientX - rect.x, rect.width);
                     return false;
                 }),
                 action((upEvent, movement, isClick) => {
@@ -433,11 +431,11 @@ export class CollectionStackedTimeline extends CollectionSubView<CollectionStack
                 _isTimelineLabel: true,
                 layout_borderRounding: anchorEndTime === undefined ? '100%' : undefined,
             });
-        anchor[DocData][startTag] = anchorStartTime;
-        anchor[DocData][endTag] = anchorEndTime;
+        anchor['$' + startTag] = anchorStartTime;
+        anchor['$' + endTag] = anchorEndTime;
         if (addAsAnnotation) {
             if (Cast(dataDoc[fieldKey], listSpec(Doc), null)) {
-                Cast(dataDoc[fieldKey], listSpec(Doc), []).push(anchor);
+                Cast(dataDoc[fieldKey], listSpec(Doc), [])!.push(anchor);
             } else {
                 dataDoc[fieldKey] = new List<Doc>([anchor]);
             }
@@ -805,9 +803,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
     };
 
     resetTitle = () => {
-        this._props.mark[DocData].title = ComputedField.MakeFunction(
-            `["${this._props.endTag}"] ? "#" + formatToTime(this["${this._props.startTag}"]) + "-" + formatToTime(this["${this._props.endTag}"]) : "#" + formatToTime(this["${this._props.startTag}"]`
-        );
+        this._props.mark.$title = ComputedField.MakeFunction(`["${this._props.endTag}"] ? "#" + formatToTime(this["${this._props.startTag}"]) + "-" + formatToTime(this["${this._props.endTag}"]) : "#" + formatToTime(this["${this._props.startTag}"]`);
     };
     // context menu
     contextMenuItems = () => {
@@ -844,7 +840,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
                     styleProvider={this._props.styleProvider}
                     renderDepth={this._props.renderDepth + 1}
                     LayoutTemplate={undefined}
-                    LayoutTemplateString={LabelBox.LayoutString('data')}
+                    LayoutTemplateString={LabelBox.LayoutString('title')}
                     isDocumentActive={this._props.isDocumentActive}
                     PanelWidth={width}
                     PanelHeight={height}