1 files changed, 55 insertions, 10 deletions

diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 27f9ebc49..a3725be75 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -2,7 +2,7 @@ import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, IReactionDisposer, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
-import { Doc, DocListCast, Field, Opt, StrListCast } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, FieldResult, Opt, StrListCast } from '../../../fields/Doc';
 import { DocData, Height, Width } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
 import { List } from '../../../fields/List';
@@ -227,6 +227,39 @@ 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;
+                TreeView.ToggleChildrenRun.get(child)?.();
+            });
+        }
+    };
+
+    @undoBatch
+    @action
+    getRunningChildren = (childList: Doc[]) => {
+        if (childList.length === 0) {
+            return [];
+        }
+
+        const runningChildren: FieldResult[] = [];
+        childList.forEach(child => {
+            if (child.runProcess && TreeView.GetRunningChildren.get(child)) {
+                if (child.runProcess) {
+                    runningChildren.push(child);
+                }
+                runningChildren.push(...(TreeView.GetRunningChildren.get(child)?.() ?? []));
+            }
+        });
+        return runningChildren;
+    };
+
+    static GetRunningChildren = new Map<Doc, any>();
+    static ToggleChildrenRun = new Map<Doc, () => void>();
     constructor(props: any) {
         super(props);
         if (!TreeView._openLevelScript) {
@@ -235,6 +268,19 @@ 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';
+        console.log(this.doc, this.dataDoc, this.childDocs);
+        this.dataDoc.hasChildren = this.childDocs.length > 0;
+        // this.dataDoc.children = this.childDocs;
+        TreeView.ToggleChildrenRun.set(this.doc, () => {
+            this.recurToggle(this.childDocs);
+        });
+
+        TreeView.GetRunningChildren.set(this.doc, () => {
+            return this.getRunningChildren(this.childDocs);
+        });
     }
 
     _treeEle: any;
@@ -722,15 +768,14 @@ export class TreeView extends React.Component<TreeViewProps> {
                     )
                 ) : (
                     <div className="treeView-bulletIcons" style={{ color: Doc.IsSystem(DocCast(this.doc.proto)) ? 'red' : undefined }}>
-                        {this.onCheckedClick ? (
-                            <IconButton
-                                color={color}
-                                icon={<FontAwesomeIcon size="sm" icon={checked === 'check' ? 'check' : checked === 'x' ? 'times' : checked === 'unchecked' ? 'square' : !this.treeViewOpen ? 'caret-right' : 'caret-down'} />}
-                                size={Size.XSMALL}
+                        <div className={`treeView-${this.onCheckedClick ? 'checkIcon' : 'expandIcon'}`}>
+                            <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'}
                             />
-                        ) : (
-                            <IconButton color={color} icon={<FontAwesomeIcon icon={iconType as IconProp} />} size={Size.XSMALL} />
-                        )}
+                        </div>
+                        {this.onCheckedClick ? null : typeof iconType === 'string' ? <FontAwesomeIcon icon={iconType as IconProp} /> : iconType}
                     </div>
                 )}
             </div>
@@ -928,8 +973,8 @@ export class TreeView extends React.Component<TreeViewProps> {
                     }
                 })}
                 Document={this.doc}
+                DataDoc={undefined} // or this.dataDoc?
                 layout_fitWidth={returnTrue}
-                DataDoc={undefined}
                 scriptContext={this}
                 hideDecorationTitle={this.props.treeView.outlineMode}
                 hideResizeHandles={this.props.treeView.outlineMode}