Compile and make compatible all the scattered code I had for empowering trails for dash meeting. Still much to do with ui, but basic functionaltiy is there. Two key things, 1) navigation for branching trails, and 2) ability to runSubroutines on tested trails.

9 files changed, 225 insertions, 6 deletions

diff --git a/src/client/util/BranchingTrailManager.tsx b/src/client/util/BranchingTrailManager.tsx
new file mode 100644
index 000000000..5a9dd7743
--- /dev/null
+++ b/src/client/util/BranchingTrailManager.tsx
@@ -0,0 +1,113 @@
+import * as React from 'react';
+import { action, observable, computed } from 'mobx';
+import { observer } from 'mobx-react';
+import { Doc } from '../../fields/Doc';
+import { PresBox } from '../views/nodes/trails';
+import { Id } from '../../fields/FieldSymbols';
+import { DocumentManager } from './DocumentManager';
+import { OverlayView } from '../views/OverlayView';
+import { compute } from 'googleapis/build/src/apis/compute';
+
+@observer
+export class BranchingTrailManager extends React.Component {
+    public static Instance: BranchingTrailManager;
+
+    constructor(props: any) {
+        super(props);
+        if (!BranchingTrailManager.Instance) {
+            BranchingTrailManager.Instance = this;
+        }
+    }
+
+    setupUi = () => {
+        OverlayView.Instance.addWindow(<BranchingTrailManager></BranchingTrailManager>, { x: 100, y: 150, width: 1000, title: 'Branching Trail' });
+    };
+
+    // stack of the history
+    @observable private slideHistoryStack: String[] = [];
+    @action setSlideHistoryStack = action((newArr: String[]) => {
+        this.slideHistoryStack = newArr;
+    });
+
+    @observable private containsSet: Set<String> = new Set<String>();
+
+    // prev pres to copmare with
+    @observable private prevPresId: String | null = null;
+    @action setPrevPres = action((newId: String | null) => {
+        this.prevPresId = newId;
+    });
+
+    // docId to Doc map
+    @observable private docIdToDocMap: Map<String, Doc> = new Map<String, Doc>();
+
+    observeDocumentChange = (targetDoc: Doc, pres: PresBox) => {
+        const presId = pres.props.Document[Id];
+        if (this.prevPresId === presId) {
+            return;
+        }
+
+        const targetDocId = targetDoc[Id];
+        this.docIdToDocMap.set(targetDocId, targetDoc);
+
+        if (this.prevPresId === null) {
+            this.setupUi();
+        }
+
+        if (this.prevPresId === null || this.prevPresId !== presId) {
+            this.setPrevPres(presId);
+            // REVERT THE SET
+            const stringified = [presId, targetDocId].toString();
+            if (this.containsSet.has([presId, targetDocId].toString())) {
+                // remove all the elements after the targetDocId
+                const newStack = this.slideHistoryStack.slice(0, this.slideHistoryStack.indexOf(stringified));
+                const removed = this.slideHistoryStack.slice(this.slideHistoryStack.indexOf(stringified));
+                this.setSlideHistoryStack(newStack);
+
+                removed.forEach(info => this.containsSet.delete(info.toString()));
+            } else {
+                this.setSlideHistoryStack([...this.slideHistoryStack, stringified]);
+                this.containsSet.add(stringified);
+            }
+        }
+    };
+
+    clickHandler = (e: React.PointerEventHandler<HTMLButtonElement>, targetDocId: string, removeIndex: number) => {
+        const targetDoc = this.docIdToDocMap.get(targetDocId);
+        if (!targetDoc) {
+            return;
+        }
+        const newStack = this.slideHistoryStack.slice(0, removeIndex);
+        const removed = this.slideHistoryStack.slice(removeIndex);
+        this.setSlideHistoryStack(newStack);
+
+        removed.forEach(info => this.containsSet.delete(info.toString()));
+        DocumentManager.Instance.showDocument(targetDoc, { willZoomCentered: true });
+        //PresBox.NavigateToTarget(targetDoc, targetDoc);
+    };
+
+    @computed get trailBreadcrumbs() {
+        return (
+            <div style={{ border: '.5rem solid green', padding: '5px', backgroundColor: 'white', minHeight: '50px' }}>
+                {this.slideHistoryStack.map((info, index) => {
+                    const [presId, targetDocId] = info.split(',');
+                    const doc = this.docIdToDocMap.get(targetDocId);
+                    if (!doc) {
+                        return <></>;
+                    }
+                    return (
+                        <span key={targetDocId}>
+                            <button key={index} onPointerDown={e => this.clickHandler(e, targetDocId, index)}>
+                                {presId.slice(0, 3) + ':' + doc.title}
+                            </button>
+                            -{'>'}
+                        </span>
+                    );
+                })}
+            </div>
+        );
+    }
+
+    render() {
+        return <div>{BranchingTrailManager.Instance.trailBreadcrumbs}</div>;
+    }
+}
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index ccf370662..9cf584bba 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -19,6 +19,7 @@ import { LinkAnchorBox } from '../views/nodes/LinkAnchorBox';
 import { PresBox } from '../views/nodes/trails';
 import { ScriptingGlobals } from './ScriptingGlobals';
 import { SelectionManager } from './SelectionManager';
+import { BranchingTrailManager } from './BranchingTrailManager';
 const { Howl } = require('howler');
 
 export class DocumentManager {
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 6b18caed0..1aeb93d42 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -15,6 +15,7 @@ import { TrackMovements } from '../util/TrackMovements';
 import { CollectionView } from './collections/CollectionView';
 import { MainView } from './MainView';
 import * as dotenv from 'dotenv'; // see https://github.com/motdotla/dotenv#how-do-i-use-dotenv-with-import
+import { BranchingTrailManager } from '../util/BranchingTrailManager';
 dotenv.config();
 
 AssignAllExtensions();
@@ -48,6 +49,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0 }; // bcz: not sure
         new LinkManager();
         new TrackMovements();
         new ReplayMovements();
+        new BranchingTrailManager();
         root.render(<MainView />);
     }, 0);
 })();
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 60459cf30..1fc5ee1d7 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -63,6 +63,7 @@ import { PreviewCursor } from './PreviewCursor';
 import { PropertiesView } from './PropertiesView';
 import { DashboardStyleProvider, DefaultStyleProvider } from './StyleProvider';
 import { TopBar } from './topbar/TopBar';
+import { BranchingTrailManager } from '../util/BranchingTrailManager';
 const _global = (window /* browser */ || global) /* node */ as any;
 
 @observer
diff --git a/src/client/views/collections/TreeView.scss b/src/client/views/collections/TreeView.scss
index 7eab03e1d..cb6432687 100644
--- a/src/client/views/collections/TreeView.scss
+++ b/src/client/views/collections/TreeView.scss
@@ -25,10 +25,11 @@
         width: 100%;
         height: 100%;
         position: absolute;
+        left: 10px;
 
         .treeView-expandIcon {
-            display: none;
-            left: -10px;
+            // display: none;
+            left: -8px;
             position: absolute;
         }
 
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 75e76019e..153c2c71a 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -227,6 +227,37 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
     };
 
+    @undoBatch
+    @action
+    recurToggle = (childList: Doc[]) => {
+        if (childList.length > 0) {
+            childList.forEach(child => {
+                console.log(child);
+                child.runProcess = !!!child.runProcess;
+                child.toggleChildrenRun?.();
+            });
+        }
+    };
+
+    @undoBatch
+    @action
+    getRunningChildren = (childList: Doc[]) => {
+        if (childList.length === 0) {
+            return [];
+        }
+
+        const runningChildren = [];
+        childList.forEach(child => {
+            if (child.runProcess && child.getChildrenToRun) {
+                if (child.runProcess) {
+                    runningChildren.push(child);
+                }
+                runningChildren.push(...(child.getChildrenToRun?.() ?? []));
+            }
+        });
+        return runningChildren;
+    };
+
     constructor(props: any) {
         super(props);
         if (!TreeView._openLevelScript) {
@@ -235,6 +266,18 @@ export class TreeView extends React.Component<TreeViewProps> {
         }
         this._openScript = Doc.IsSystem(this.props.document) ? undefined : () => TreeView._openLevelScript!;
         this._editTitleScript = Doc.IsSystem(this.props.document) ? () => TreeView._openLevelScript! : () => TreeView._openTitleScript!;
+
+        // set for child processing highligting
+        // this.dataDoc.testing = 'testing';
+        this.dataDoc.hasChildren = this.childDocs.length > 0;
+        // this.dataDoc.children = this.childDocs;
+        this.dataDoc.toggleChildrenRun = () => {
+            this.recurToggle(this.childDocs);
+        };
+
+        this.dataDoc.getChildrenToRun = () => {
+            return this.getRunningChildren(this.childDocs);
+        };
     }
 
     _treeEle: any;
@@ -696,7 +739,11 @@ export class TreeView extends React.Component<TreeViewProps> {
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
                         <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}>
-                            <FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />
+                            <FontAwesomeIcon
+                                size="sm"
+                                style={{ display: this.childDocs?.length >= 1 ? 'block' : 'none' }}
+                                icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'}
+                            />
                         </div>
                         {this.onCheckedClick ? null : typeof iconType === 'string' ? <FontAwesomeIcon icon={iconType as IconProp} /> : iconType}
                     </div>
@@ -899,7 +946,7 @@ export class TreeView extends React.Component<TreeViewProps> {
                 })}
                 Document={this.doc}
                 fitWidth={returnTrue}
-                DataDoc={undefined}
+                DataDoc={this.dataDoc}
                 scriptContext={this}
                 hideDecorationTitle={this.props.treeView.outlineMode}
                 hideResizeHandles={this.props.treeView.outlineMode}
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 3589a9065..2836a39fb 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -35,6 +35,7 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { ScriptingBox } from '../ScriptingBox';
 import './PresBox.scss';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
+import { BranchingTrailManager } from '../../../util/BranchingTrailManager';
 const { Howl } = require('howler');
 
 export interface pinDataTypes {
@@ -278,6 +279,19 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             return listItems.filter(doc => !doc.unrendered);
         }
     };
+
+    // go to documents chain
+    runSubroutines = (childrenToRun: Doc[], normallyNextSlide: Doc) => {
+        console.log(childrenToRun, normallyNextSlide, 'runSUBFUNC');
+        if (childrenToRun[0] === normallyNextSlide) {
+            return;
+        }
+
+        childrenToRun.forEach(child => {
+            DocumentManager.Instance.showDocument(child, {});
+        });
+    };
+
     // Called when the user activates 'next' - to move to the next part of the pres. trail
     @action
     next = () => {
@@ -314,6 +328,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             // Case 1: No more frames in current doc and next slide is defined, therefore move to next slide
             const slides = DocListCast(this.rootDoc[StrCast(this.presFieldKey, 'data')]);
             const curLast = this.selectedArray.size ? Math.max(...Array.from(this.selectedArray).map(d => slides.indexOf(DocCast(d)))) : this.itemIndex;
+
+            // before moving onto next slide, run the subroutines :)
+            const currentDoc = this.childDocs[this.itemIndex];
+            this.runSubroutines(currentDoc.getChildrenToRun?.(), this.childDocs[this.itemIndex + 1]);
+
             this.nextSlide(curLast + 1 === this.childDocs.length ? (this.layoutDoc.presLoop ? 0 : curLast) : curLast + 1);
             progressiveReveal(true); // shows first progressive document, but without a transition effect
         } else {
@@ -684,6 +703,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     navigateToActiveItem = (afterNav?: () => void) => {
         const activeItem: Doc = this.activeItem;
         const targetDoc: Doc = this.targetDoc;
+        BranchingTrailManager.Instance.observeDocumentChange(targetDoc, this);
         const finished = () => {
             afterNav?.();
             console.log('Finish Slide Nav: ' + targetDoc.title);
diff --git a/src/client/views/nodes/trails/PresElementBox.scss b/src/client/views/nodes/trails/PresElementBox.scss
index 4f95f0c1f..9ac2b5a94 100644
--- a/src/client/views/nodes/trails/PresElementBox.scss
+++ b/src/client/views/nodes/trails/PresElementBox.scss
@@ -4,6 +4,10 @@ $light-background: #ececec;
 $slide-background: #d5dce2;
 $slide-active: #5b9fdd;
 
+.testingv2 {
+    background-color: red;
+}
+
 .presItem-container {
     cursor: grab;
     display: flex;
diff --git a/src/client/views/nodes/trails/PresElementBox.tsx b/src/client/views/nodes/trails/PresElementBox.tsx
index 92696240b..96f6a514b 100644
--- a/src/client/views/nodes/trails/PresElementBox.tsx
+++ b/src/client/views/nodes/trails/PresElementBox.tsx
@@ -180,7 +180,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 e.stopPropagation();
                 e.preventDefault();
                 this.presBoxView?.modifierSelect(this.rootDoc, this._itemRef.current!, this._dragRef.current!, e.shiftKey || e.ctrlKey || e.metaKey, e.ctrlKey || e.metaKey, e.shiftKey);
-                this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
+                // this.presBoxView?.activeItem && this.showRecording(this.presBoxView?.activeItem);
             });
         }
     };
@@ -403,6 +403,19 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         }
     };
 
+    @undoBatch
+    @action
+    lfg = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        console.log('lfg called');
+        // TODO: fix this bug
+        const { toggleChildrenRun } = this.rootDoc;
+        toggleChildrenRun?.();
+
+        // call this.rootDoc.recurChildren() to get all the children
+        // if (iconClick) PresElementBox.showVideo = false;
+    };
+
     @computed
     get toolbarWidth(): number {
         const presBoxDocView = DocumentManager.Instance.getDocumentView(this.presBox);
@@ -418,6 +431,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
         const presColorBool: boolean = presBoxColor ? presBoxColor !== Colors.WHITE && presBoxColor !== 'transparent' : false;
         const targetDoc: Doc = this.targetDoc;
         const activeItem: Doc = this.rootDoc;
+        const hasChildren: boolean = Cast(this.rootDoc?.hasChildren, 'boolean') || false;
 
         const items: JSX.Element[] = [];
         items.push(
@@ -482,6 +496,22 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 </div>
             </Tooltip>
         );
+        if (!Doc.noviceMode && hasChildren) {
+            // TODO: replace with if treeveiw, has childrenDocs
+            items.push(
+                <Tooltip key="children" title={<div className="dash-tooltip">Run child processes (tree only)</div>}>
+                    <div
+                        className="slideButton"
+                        onClick={e => {
+                            e.stopPropagation();
+                            this.lfg(e);
+                        }}
+                        style={{ fontWeight: 700 }}>
+                        <FontAwesomeIcon icon={'circle-play'} onPointerDown={e => e.stopPropagation()} />
+                    </div>
+                </Tooltip>
+            );
+        }
         items.push(
             <Tooltip key="trash" title={<div className="dash-tooltip">Remove from presentation</div>}>
                 <div className={'slideButton'} onClick={this.removeItem}>
@@ -528,7 +558,7 @@ export class PresElementBox extends ViewBoxBaseComponent<FieldViewProps>() {
                 ) : (
                     <div
                         ref={this._dragRef}
-                        className={`presItem-slide ${isCurrent ? 'active' : ''}`}
+                        className={`presItem-slide ${isCurrent ? 'active' : ''}${this.rootDoc.runProcess ? ' testingv2' : ''}`}
                         style={{
                             display: 'infline-block',
                             backgroundColor: this.props.styleProvider?.(this.layoutDoc, this.props, StyleProp.BackgroundColor),