cleaned up labelBox

3 files changed, 40 insertions, 46 deletions

diff --git a/package-lock.json b/package-lock.json
index 5a41a8637..f928cd291 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13537,19 +13537,6 @@
                 "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
             }
         },
-        "node_modules/browndash-components/node_modules/npm/node_modules/node-gyp/node_modules/readable-stream": {
-            "version": "3.6.2",
-            "inBundle": true,
-            "license": "MIT",
-            "dependencies": {
-                "inherits": "^2.0.3",
-                "string_decoder": "^1.1.1",
-                "util-deprecate": "^1.0.1"
-            },
-            "engines": {
-                "node": ">= 6"
-            }
-        },
         "node_modules/browndash-components/node_modules/npm/node_modules/node-gyp/node_modules/signal-exit": {
             "version": "3.0.7",
             "inBundle": true,
@@ -13995,6 +13982,19 @@
                 "node": "^14.17.0 || ^16.13.0 || >=18.0.0"
             }
         },
+        "node_modules/browndash-components/node_modules/npm/node_modules/readable-stream": {
+            "version": "3.6.2",
+            "inBundle": true,
+            "license": "MIT",
+            "dependencies": {
+                "inherits": "^2.0.3",
+                "string_decoder": "^1.1.1",
+                "util-deprecate": "^1.0.1"
+            },
+            "engines": {
+                "node": ">= 6"
+            }
+        },
         "node_modules/browndash-components/node_modules/npm/node_modules/retry": {
             "version": "0.12.0",
             "inBundle": true,
diff --git a/src/client/views/collections/CollectionStackedTimeline.tsx b/src/client/views/collections/CollectionStackedTimeline.tsx
index fac885300..b03f0cffa 100644
--- a/src/client/views/collections/CollectionStackedTimeline.tsx
+++ b/src/client/views/collections/CollectionStackedTimeline.tsx
@@ -850,7 +850,7 @@ class StackedTimelineAnchor extends ObservableReactComponent<StackedTimelineAnch
                     styleProvider={this._props.styleProvider}
                     renderDepth={this._props.renderDepth + 1}
                     LayoutTemplate={undefined}
-                    LayoutTemplateString={LabelBox.LayoutStringWithTitle('data', this.computeTitle())}
+                    LayoutTemplateString={LabelBox.LayoutString('data')}
                     isDocumentActive={this._props.isDocumentActive}
                     PanelWidth={width}
                     PanelHeight={height}
diff --git a/src/client/views/nodes/LabelBox.tsx b/src/client/views/nodes/LabelBox.tsx
index 088cd15be..d33d12603 100644
--- a/src/client/views/nodes/LabelBox.tsx
+++ b/src/client/views/nodes/LabelBox.tsx
@@ -19,12 +19,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(LabelBox, fieldKey);
     }
-    public static LayoutStringWithTitle(fieldStr: string, label?: string) {
-        return !label ? LabelBox.LayoutString(fieldStr) : `<LabelBox fieldKey={'${fieldStr}'} label={'${label}'} {...props} />`; // e.g., "<ImageBox {...props} fieldKey={"data} />"
-    }
     private dropDisposer?: DragManager.DragDropDisposer;
     private _timeout: NodeJS.Timeout | undefined;
-    _divRef: HTMLDivElement|null = null;
+    _divRef: HTMLDivElement | null = null;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -53,8 +50,7 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this._timeout && clearTimeout(this._timeout);
     }
 
-    specificContextMenu = (): void => {
-    };
+    specificContextMenu = (): void => {};
 
     drop = (/* e: Event, de: DragManager.DropEvent */) => {
         return false;
@@ -73,15 +69,16 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return anchor;
     };
 
-    fitTextToBox = (r: HTMLElement | null | undefined): {
-            minFontSize: number,
-            maxFontSize: number,
-            multiLine: boolean,
-            alignHoriz: boolean,
-            alignVert: boolean,
-            detectMultiLine: boolean,
-        } => 
-    {
+    fitTextToBox = (
+        r: HTMLElement | null | undefined
+    ): {
+        minFontSize: number;
+        maxFontSize: number;
+        multiLine: boolean;
+        alignHoriz: boolean;
+        alignVert: boolean;
+        detectMultiLine: boolean;
+    } => {
         this._timeout && clearTimeout(this._timeout);
         const textfitParams = {
             minFontSize: NumCast(this.layoutDoc._label_minFontSize, 1),
@@ -105,14 +102,9 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     render() {
         trace();
         const boxParams = this.fitTextToBox(undefined); // this causes mobx to trigger re-render when data changes
-        const label = this.Title.startsWith("#") ? null : this.Title;
+        const label = this.Title.startsWith('#') ? null : this.Title;
         return (
-            <div
-                key={label?.length}
-                className="labelBox-outerDiv"
-                ref={this.createDropTarget}
-                onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
+            <div key={label?.length} className="labelBox-outerDiv" ref={this.createDropTarget} onContextMenu={this.specificContextMenu} style={{ boxShadow: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BoxShadow) as string }}>
                 <div
                     className="labelBox-mainButton"
                     style={{
@@ -130,31 +122,33 @@ export class LabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         height: this._props.PanelHeight(),
                         whiteSpace: 'multiLine' in boxParams && boxParams.multiLine ? 'pre-wrap' : 'pre',
                     }}>
-                    <div style={{ 
-                            width: this._props.PanelWidth()- 2*NumCast(this.layoutDoc._xPadding), 
-                            height: this._props.PanelHeight()-2*NumCast(this.layoutDoc._yPadding),
-                            outline: 'unset !important'
-                        }} 
+                    <div
+                        style={{
+                            width: this._props.PanelWidth() - 2 * NumCast(this.layoutDoc._xPadding),
+                            height: this._props.PanelHeight() - 2 * NumCast(this.layoutDoc._yPadding),
+                            outline: 'unset !important',
+                        }}
                         onKeyDown={action(e => {
                             e.stopPropagation();
                         })}
                         onKeyUp={action(e => {
                             e.stopPropagation();
                             if (e.key === 'Enter') {
-                                this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? "";
+                                this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
                                 setTimeout(() => this._props.select(false));
                             }
                         })}
                         onBlur={() => {
-                            this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? "";
+                            this.dataDoc[this.fieldKey] = this._divRef?.innerText ?? '';
                         }}
-                        contentEditable={this._props.onClickScript?.() ? false: true}
-                        ref={r => {this._divRef = r;
+                        contentEditable={this._props.onClickScript?.() ? false : true}
+                        ref={r => {
+                            this._divRef = r;
                             this.fitTextToBox(r);
                             if (this._props.isSelected() && this._divRef) {
                                 const range = document.createRange();
                                 range.setStart(this._divRef, this._divRef.childNodes.length);
-                                range.setEnd(this._divRef, this._divRef.childNodes.length)
+                                range.setEnd(this._divRef, this._divRef.childNodes.length);
                                 const sel = window.getSelection();
                                 sel?.removeAllRanges();
                                 sel?.addRange(range);