Merge branch 'master' into dataviz-ai-sarah

9 files changed, 95 insertions, 130 deletions

diff --git a/src/.DS_Store b/src/.DS_Store
index 21ad8bd73..f8d745dbf 100644
--- a/src/.DS_Store
+++ b/src/.DS_Store
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 7407fa2b3..a38a330da 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -248,6 +248,11 @@ export class DocumentManager {
         Doc.RemoveDocFromList(Doc.MyRecentlyClosed, undefined, targetDoc);
         const docContextPath = DocumentManager.GetContextPath(targetDoc, true);
         if (docContextPath.some(doc => doc.hidden)) options.toggleTarget = false;
+        const tabView = Array.from(TabDocView._allTabs).find(view => view._document === docContextPath[0]);
+        if (!tabView?._activated && tabView?._document) {
+            options.toggleTarget = false;
+            TabDocView.Activate(tabView?._document);
+        }
         let rootContextView =
             docContextPath.length &&
             (await new Promise<DocumentView>(res => {
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 31ca86f0f..68de62d93 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -421,7 +421,6 @@ export class CollectionDockingView extends CollectionSubView() {
                     if (map?.DashDoc && DocumentManager.Instance.getFirstDocumentView(map.DashDoc)) {
                         SelectionManager.SelectView(DocumentManager.Instance.getFirstDocumentView(map.DashDoc), false);
                     }
-                    if (!className.includes('lm_close')) DocServer.UPDATE_SERVER_CACHE();
                 }
             }
         }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index a69030019..50a9feff8 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -37,7 +37,7 @@ import { GestureOverlay } from '../../GestureOverlay';
 import { CtrlKey } from '../../GlobalKeyHandler';
 import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke';
 import { LightboxView } from '../../LightboxView';
-import { CollectionFreeFormDocumentView, CollectionFreeFormDocumentViewWrapper } from '../../nodes/CollectionFreeFormDocumentView';
+import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
 import { DocumentView, OpenWhere } from '../../nodes/DocumentView';
 import { FieldViewProps, FocusViewOptions } from '../../nodes/FieldView';
@@ -1181,7 +1181,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         const childLayout = entry.pair.layout;
         const childData = entry.pair.data;
         return (
-            <CollectionFreeFormDocumentViewWrapper
+            <CollectionFreeFormDocumentView
                 {...OmitKeys(entry, ['replica', 'pair']).omit}
                 key={childLayout[Id] + (entry.replica || '')}
                 Document={childLayout}
@@ -1962,8 +1962,8 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
         for (let i = 0; i < children.length; i++) {
             let eachRow = [];
             for (let j = 0; j < keys.length; j++) {
-                var cell = children[i][keys[j]];
-                if (cell && (cell as string)) cell = cell.toString().replace(/\,/g, '');
+                var cell = children[i][keys[j]]?.toString();
+                if (cell) cell = cell.toString().replace(/\,/g, '');
                 eachRow.push(cell);
             }
             csvRows.push(eachRow);
diff --git a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
index a0a64ab59..2800ea200 100644
--- a/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
+++ b/src/client/views/nodes/CollectionFreeFormDocumentView.tsx
@@ -1,4 +1,4 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { OmitKeys, numberRange } from '../../../Utils';
@@ -12,14 +12,16 @@ import { DocumentManager } from '../../util/DocumentManager';
 import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
 import { DocComponent } from '../DocComponent';
-import { ObservableReactComponent } from '../ObservableReactComponent';
 import { StyleProp } from '../StyleProvider';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm/CollectionFreeFormView';
 import './CollectionFreeFormDocumentView.scss';
 import { DocumentView, DocumentViewProps, OpenWhere } from './DocumentView';
 import { FieldViewProps } from './FieldView';
 
-export interface CollectionFreeFormDocumentViewWrapperProps extends DocumentViewProps {
+/// Ugh, typescript has no run-time way of iterating through the keys of an interface.  so we need
+/// manaully keep this list of keys in synch wih the fields of the freeFormProps interface
+const freeFormPropsKeys = ['x', 'y', 'z', 'zIndex', 'rotation', 'opacity', 'backgroundColor', 'color', 'highlight', 'width', 'height', 'autoDim', 'transition'];
+interface freeFormProps {
     x: number;
     y: number;
     z: number;
@@ -33,102 +35,17 @@ export interface CollectionFreeFormDocumentViewWrapperProps extends DocumentView
     opacity?: number;
     highlight?: boolean;
     transition?: string;
-    RenderCutoffProvider: (doc: Doc) => boolean;
-    CollectionFreeFormView: CollectionFreeFormView;
-}
-@observer
-export class CollectionFreeFormDocumentViewWrapper extends ObservableReactComponent<CollectionFreeFormDocumentViewWrapperProps> {
-    constructor(props: CollectionFreeFormDocumentViewWrapperProps) {
-        super(props);
-        makeObservable(this);
-    }
-    @observable X = this.props.x;
-    @observable Y = this.props.y;
-    @observable Z = this.props.z;
-    @observable ZIndex = this.props.zIndex;
-    @observable Rotation = this.props.rotation;
-    @observable Opacity = this.props.opacity;
-    @observable BackgroundColor = this.props.backgroundColor;
-    @observable Color = this.props.color;
-    @observable Highlight = this.props.highlight;
-    @observable Width = this.props.width;
-    @observable Height = this.props.height;
-    @observable AutoDim = this.props.autoDim;
-    @observable Transition = this.props.transition;
-    CollectionFreeFormView = this.props.CollectionFreeFormView; // needed for type checking
-    RenderCutoffProvider = this.props.RenderCutoffProvider; // needed for type checking
-
-    get Document() {
-        return this._props.Document;
-    }
-    @computed get WrapperKeys() {
-        return Object.keys(this).filter(key => key.startsWith('w_')).map(key => key.replace('w_', ''))
-                  .map(key => ({upper:key, lower:key[0].toLowerCase() + key.substring(1)})); // prettier-ignore
-    }
-
-    // wrapper functions around prop fields that have been converted to observables to keep 'props' from ever changing.
-    // this way, downstream code only invalidates when it uses a specific prop, not when any prop changes
-    w_X = ()               => this.X; // prettier-ignore
-    w_Y = ()               => this.Y; // prettier-ignore
-    w_Z = ()               => this.Z; // prettier-ignore
-    w_ZIndex = ()          => this.ZIndex ?? NumCast(this.Document.zIndex); // prettier-ignore
-    w_Rotation = ()        => this.Rotation ?? NumCast(this.Document._rotation); // prettier-ignore
-    w_Opacity = ()         => this.Opacity; // prettier-ignore
-    w_BackgroundColor = () => this.BackgroundColor ?? Cast(this.Document._backgroundColor, 'string', null); // prettier-ignore
-    w_Color = ()           => this.Color ?? Cast(this.Document._color, 'string', null); // prettier-ignore
-    w_Highlight = ()       => this.Highlight; // prettier-ignore
-    w_Width = ()           => this.Width; // prettier-ignore
-    w_Height = ()          => this.Height; // prettier-ignore
-    w_AutoDim = ()         => this.AutoDim; // prettier-ignore
-    w_Transition = ()      => this.Transition; // prettier-ignore
-
-    PanelWidth = ()        => this._props.autoDim ? this._props.PanelWidth?.() : this.Width; // prettier-ignore
-    PanelHeight = ()       => this._props.autoDim ? this._props.PanelHeight?.() : this.Height; // prettier-ignore
-
-    componentDidUpdate(prevProps: Readonly<React.PropsWithChildren<CollectionFreeFormDocumentViewWrapperProps & { fieldKey: string }>>) {
-        super.componentDidUpdate(prevProps);
-        this.WrapperKeys.forEach(action(keys => ((this as any)[keys.upper] = (this.props as any)[keys.lower])));
-    }
-    render() {
-        const layoutProps = this.WrapperKeys.reduce((val, keys) => [(val['w_' + keys.upper] = (this as any)['w_' + keys.upper]), val][1], {} as { [key: string]: Function });
-        return (
-            <CollectionFreeFormDocumentView
-                {...OmitKeys(this._props, this.WrapperKeys.map(keys => keys.lower) ).omit} // prettier-ignore
-                {...layoutProps}
-                PanelWidth={this.PanelWidth}
-                PanelHeight={this.PanelHeight}
-            />
-        );
-    }
 }
 export interface CollectionFreeFormDocumentViewProps extends DocumentViewProps {
-    w_X: () => number;
-    w_Y: () => number;
-    w_Z: () => number;
-    w_ZIndex?: () => number;
-    w_Rotation?: () => number;
-    w_Color: () => string;
-    w_BackgroundColor: () => string;
-    w_Opacity: () => number | undefined;
-    w_Highlight: () => boolean | undefined;
-    w_Transition: () => string | undefined;
-    w_Width: () => number;
-    w_Height: () => number;
-    PanelWidth: () => number;
-    PanelHeight: () => number;
     RenderCutoffProvider: (doc: Doc) => boolean;
     CollectionFreeFormView: CollectionFreeFormView;
 }
-
 @observer
-export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps>() {
-    constructor(props: CollectionFreeFormDocumentViewProps) {
-        super(props);
-        makeObservable(this);
-    }
+export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeFormDocumentViewProps & freeFormProps>() {
     get displayName() { // this makes mobx trace() statements more descriptive
         return 'CollectionFreeFormDocumentView(' + this.Document.title + ')';
     } // prettier-ignore
+    public static CollectionFreeFormDocViewClassName = 'collectionFreeFormDocumentView-container';
     public static animFields: { key: string; val?: number }[] = [
         { key: 'x' },
         { key: 'y' },
@@ -145,16 +62,53 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
     public static animStringFields = ['backgroundColor', 'color', 'fillColor']; // fields that are configured to be animatable using animation frames
     public static animDataFields = (doc: Doc) => (Doc.LayoutFieldKey(doc) ? [Doc.LayoutFieldKey(doc)] : []); // fields that are configured to be animatable using animation frames
 
-    get CollectionFreeFormView() {
-        return this._props.CollectionFreeFormView;
+    constructor(props: CollectionFreeFormDocumentViewProps & freeFormProps) {
+        super(props);
+        makeObservable(this);
+    }
+
+    get WrapperKeys() {
+        // each of these keys is set by the CollectionView and passed via props. however, if any one of these props changes
+        // (or any other prop), then it's as if they all change.
+        // Anything that accesses these props will then invalidate unncessarily.
+        // To avoid this, we copy these prop values into local observables.  Now when 'props' changes, nothing invalidates.
+        // Instead, we copy each values into its observable which ohnly triggers invalidations if the new value is different
+        // than the old value, and then only things that access that observable will invalidate.
+        return freeFormPropsKeys
+                  .map(key => ({upper:key[0].toUpperCase() + key.substring(1), lower:key})); // prettier-ignore
+    }
+    @observable X = this.props.x;
+    @observable Y = this.props.y;
+    @observable Z = this.props.z;
+    @observable ZIndex = this.props.zIndex;
+    @observable Rotation = this.props.rotation;
+    @observable Opacity = this.props.opacity;
+    @observable BackgroundColor = this.props.backgroundColor;
+    @observable Color = this.props.color;
+    @observable Highlight = this.props.highlight;
+    @observable Width = this.props.width;
+    @observable Height = this.props.height;
+    @observable AutoDim = this.props.autoDim;
+    @observable Transition = this.props.transition;
+
+    componentDidUpdate(prevProps: Readonly<React.PropsWithChildren<CollectionFreeFormDocumentViewProps & freeFormProps>>) {
+        super.componentDidUpdate(prevProps);
+        this.WrapperKeys.forEach(action(keys => ((this as any)[keys.upper] = (this.props as any)[keys.lower])));
     }
 
+    CollectionFreeFormView = this.props.CollectionFreeFormView; // needed for type checking
+    // this way, downstream code only invalidates when it uses a specific prop, not when any prop changes
+    DataTransition = ()  => this._props.transition; // prettier-ignore
+    RenderCutoffProvider = this.props.RenderCutoffProvider; // needed for type checking
+    PanelWidth = ()        => this._props.autoDim ? this._props.PanelWidth?.() : this.Width; // prettier-ignore
+    PanelHeight = ()       => this._props.autoDim ? this._props.PanelHeight?.() : this.Height; // prettier-ignore
+
     styleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => {
         if (doc === this.layoutDoc) {
             switch (property) {
-                case StyleProp.Opacity:         return this._props.w_Opacity(); // only change the opacity for this specific document, not its children
-                case StyleProp.BackgroundColor: return this._props.w_BackgroundColor();
-                case StyleProp.Color:           return this._props.w_Color();
+                case StyleProp.Opacity:         return this.Opacity; // only change the opacity for this specific document, not its children
+                case StyleProp.BackgroundColor: return this.BackgroundColor;
+                case StyleProp.Color:           return this.Color;
             } // prettier-ignore
         }
         return this._props.styleProvider?.(doc, props, property);
@@ -253,14 +207,14 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
 
     nudge = (x: number, y: number) => {
         const [locX, locY] = this._props.ScreenToLocalTransform().transformDirection(x, y);
-        this.Document.x = this._props.w_X() + locX;
-        this.Document.y = this._props.w_Y() + locY;
+        this.Document.x = this.X + locX;
+        this.Document.y = this.Y + locY;
     };
     screenToLocalTransform = () =>
         this._props
             .ScreenToLocalTransform()
-            .translate(-this._props.w_X(), -this._props.w_Y())
-            .rotateDeg(-(this._props.w_Rotation?.() || 0));
+            .translate(-this.X, -this.Y)
+            .rotateDeg(-(this.Rotation || 0));
     returnThis = () => this;
 
     /// this indicates whether the doc view is activated because of its relationshop to a group
@@ -273,27 +227,26 @@ export class CollectionFreeFormDocumentView extends DocComponent<CollectionFreeF
         const isGroup = this.dataDoc.isGroup && (!this.layoutDoc.backgroundColor || this.layoutDoc.backgroundColor === 'transparent');
         return isGroup ? (this._props.isDocumentActive?.() ? 'group' : this._props.isGroupActive?.() ? 'child' : 'inactive') : this._props.isGroupActive?.() ? 'child' : undefined;
     };
-    public static CollectionFreeFormDocViewClassName = 'collectionFreeFormDocumentView-container';
     render() {
         TraceMobx();
-        const passOnProps = OmitKeys(this._props, Object.keys(this._props).filter(key => key.startsWith('w_'))).omit; // prettier-ignore
+
         return (
             <div
                 className={CollectionFreeFormDocumentView.CollectionFreeFormDocViewClassName}
                 style={{
-                    width: this._props.PanelWidth(),
-                    height: this._props.PanelHeight(),
-                    transform: `translate(${this._props.w_X()}px, ${this._props.w_Y()}px) rotate(${NumCast(this._props.w_Rotation?.())}deg)`,
-                    transition: this._props.w_Transition?.() || StrCast(this.Document.dataTransition),
-                    zIndex: this._props.w_ZIndex?.(),
-                    display: this._props.w_Width?.() ? undefined : 'none',
+                    width: this.PanelWidth(),
+                    height: this.PanelHeight(),
+                    transform: `translate(${this.X}px, ${this.Y}px) rotate(${NumCast(this.Rotation)}deg)`,
+                    transition: this.Transition || StrCast(this.Document.dataTransition),
+                    zIndex: this.ZIndex,
+                    display: this.Width ? undefined : 'none',
                 }}>
-                {this._props.RenderCutoffProvider(this.Document) ? (
-                    <div style={{ position: 'absolute', width: this._props.PanelWidth(), height: this._props.PanelHeight(), background: 'lightGreen' }} />
+                {this.RenderCutoffProvider(this.Document) ? (
+                    <div style={{ position: 'absolute', width: this.PanelWidth(), height: this.PanelHeight(), background: 'lightGreen' }} />
                 ) : (
                     <DocumentView
-                        {...passOnProps}
-                        DataTransition={this._props.w_Transition}
+                        {...OmitKeys(this._props,this.WrapperKeys.map(val => val.lower)).omit} // prettier-ignore
+                        DataTransition={this.DataTransition}
                         CollectionFreeFormDocumentView={this.returnThis}
                         styleProvider={this.styleProvider}
                         ScreenToLocalTransform={this.screenToLocalTransform}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 73c13b5dd..d131f72d5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -1500,8 +1500,8 @@ ScriptingGlobals.add(function updateTagsCollection(collection: Doc) {
     let created = false;
     const matchedDocs = matchedTags
         .filter(tagDoc => !Doc.AreProtosEqual(collection, tagDoc))
-        .map(tagDoc => {
-            let embedding = collectionDocs.find(doc => Doc.AreProtosEqual(tagDoc, doc));
+        .reduce((aset, tagDoc) => {
+            let embedding = Array.from(aset).find(doc => Doc.AreProtosEqual(tagDoc, doc)) ?? collectionDocs.find(doc => Doc.AreProtosEqual(tagDoc, doc));
             if (!embedding) {
                 embedding = Doc.MakeEmbedding(tagDoc);
                 embedding.x = wid;
@@ -1510,9 +1510,11 @@ ScriptingGlobals.add(function updateTagsCollection(collection: Doc) {
                 wid += NumCast(tagDoc._width);
                 created = true;
             }
-            return embedding;
-        });
+            Doc.SetContainer(embedding, collection);
+            aset.add(embedding);
+            return aset;
+        }, new Set<Doc>());
 
-    created && (collection[DocData].data = new List<Doc>(matchedDocs));
+    created && (collection[DocData].data = new List<Doc>(Array.from(matchedDocs)));
     return true;
 });
diff --git a/src/client/views/nodes/formattedText/DashFieldView.tsx b/src/client/views/nodes/formattedText/DashFieldView.tsx
index ec0b76aa8..b49e7dcf0 100644
--- a/src/client/views/nodes/formattedText/DashFieldView.tsx
+++ b/src/client/views/nodes/formattedText/DashFieldView.tsx
@@ -210,11 +210,13 @@ export class DashFieldViewInternal extends ObservableReactComponent<IDashFieldVi
                     </span>
                 )}
                 {this._props.fieldKey.startsWith('#') ? null : this.fieldValueContent}
-                <select onChange={this.selectVal} style={{ height: '10px', width: '15px', fontSize: '12px', background: 'transparent' }}>
-                    {this.values.map(val => (
-                        <option value={val.value}>{val.label}</option>
-                    ))}
-                </select>
+                {!this.values.length ? null : (
+                    <select onChange={this.selectVal} style={{ height: '10px', width: '15px', fontSize: '12px', background: 'transparent' }}>
+                        {this.values.map(val => (
+                            <option value={val.value}>{val.label}</option>
+                        ))}
+                    </select>
+                )}
             </div>
         );
     }
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 8d5b0218d..a1e4bfacc 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -2039,7 +2039,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     }
     render() {
         TraceMobx();
-        const scale = (this._props.NativeDimScaling?.() || 1) * NumCast(this.layoutDoc._freeform_scale, 1);
+        const scale = this._props.NativeDimScaling?.() || 1; // * NumCast(this.layoutDoc._freeform_scale, 1);
         const rounded = StrCast(this.layoutDoc.layout_borderRounding) === '100%' ? '-rounded' : '';
         setTimeout(() => !this._props.isContentActive() && FormattedTextBoxComment.textBox === this && FormattedTextBoxComment.Hide);
         const paddingX = NumCast(this.layoutDoc._xMargin, this._props.xPadding || 0);
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index 0b664beaa..9f153e86d 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -88,9 +88,11 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      * (Note: There is no longer a need to press enter to submit a search. Any update to the input
      * causes a search to be submitted automatically.)
      */
+    _timeout: any = undefined;
     onInputChange = action((e: React.ChangeEvent<HTMLInputElement>) => {
         this._searchString = e.target.value;
-        this.submitSearch();
+        this._timeout && clearTimeout(this._timeout);
+        this._timeout = setTimeout(() => this.submitSearch(), 300);
     });
 
     /**
@@ -334,6 +336,8 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      * brushes and highlights. All search matches are cleared as well.
      */
     resetSearch = action(() => {
+        this._timeout && clearTimeout(this._timeout);
+        this._timeout = undefined;
         this._results.forEach((_, doc) => {
             DocumentManager.Instance.getFirstDocumentView(doc)?.ComponentView?.search?.('', undefined, true);
             Doc.UnBrushDoc(doc);
@@ -436,10 +440,10 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                         </select>
                     )}
                     <input
-                        defaultValue={''}
+                        defaultValue=""
                         autoComplete="off"
                         onChange={this.onInputChange}
-                        onKeyPress={e => {
+                        onKeyDown={e => {
                             e.key === 'Enter' ? this.submitSearch() : null;
                             e.stopPropagation();
                         }}