From 8437c22e6489518eff99d05490f64d4adbad1118 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 17 Mar 2025 15:08:40 -0400
Subject: runtime warnings cleanup

---
 .../DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx   | 162 ++++++++-------------
 1 file changed, 58 insertions(+), 104 deletions(-)

(limited to 'src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx')

diff --git a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
index 3253cefb9..e3854e0e4 100644
--- a/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
+++ b/src/client/views/nodes/DataVizBox/DocCreatorMenu/DocCreatorMenu.tsx
@@ -878,7 +878,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 ) : (
                                     this._suggestedTemplates.map(template => (
                                         <div
-                                            key={template.toString()}
+                                            key={template.title}
                                             className="docCreatorMenu-preview-window"
                                             style={{
                                                 border: this._selectedTemplate === template ? `solid 3px ${Colors.MEDIUM_BLUE}` : '',
@@ -1237,82 +1237,56 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     get dashboardContents() {
-        const sizes: string[] = ['tiny', 'small', 'medium', 'large', 'huge'];
-
-        const fieldPanel = (field: Col, id: number) => {
-            return (
-                <div className="field-panel" key={id}>
-                    <div className="top-bar">
-                        <span className="field-title">{`${field.title} Field`}</span>
-                        <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
-                            <FontAwesomeIcon icon="minus" />
-                        </button>
-                    </div>
-                    <div className="opts-bar">
-                        <div className="opt-box">
-                            <div className="top-bar"> Title </div>
-                            <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
-                        </div>
-                        <div className="opt-box">
-                            <div className="top-bar"> Type </div>
-                            <div className="content">
-                                <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
-                                <div className="bubbles">
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.TEXT);
-                                        }}
-                                    />
-                                    <div className="text">Text</div>
-                                    <input
-                                        className="bubble"
-                                        type="radio"
-                                        name="type"
-                                        onClick={() => {
-                                            this.setColType(field, TemplateFieldType.VISUAL);
-                                        }}
-                                    />
-                                    <div className="text">File</div>
-                                </div>
-                            </div>
-                        </div>
+        const fieldPanel = (field: Col, id: number) => (
+            <div className="field-panel" key={id}>
+                <div className="top-bar">
+                    <span className="field-title">{`${field.title} Field`}</span>
+                    <button className="docCreatorMenu-menu-button section-reveal-options no-margin" onPointerDown={e => this.setUpButtonClick(e, () => this.removeField(field))} style={{ position: 'absolute', right: '0px' }}>
+                        <FontAwesomeIcon icon="minus" />
+                    </button>
+                </div>
+                <div className="opts-bar">
+                    <div className="opt-box">
+                        <div className="top-bar"> Title </div>
+                        <textarea className="content" style={{ width: '100%', height: 'calc(100% - 20px)' }} value={field.title} placeholder={'Enter title'} onChange={e => this.setColTitle(field, e.target.value)} />
                     </div>
-                    <div className="sizes-box">
-                        <div className="top-bar"> Valid Sizes </div>
+                    <div className="opt-box">
+                        <div className="top-bar"> Type </div>
                         <div className="content">
+                            <span className="type-display">{field.type === TemplateFieldType.TEXT ? 'Text Field' : field.type === TemplateFieldType.VISUAL ? 'File Field' : ''}</span>
                             <div className="bubbles">
-                                {sizes.map(size => (
-                                    <>
-                                        <input
-                                            className="bubble"
-                                            type="checkbox"
-                                            name="type"
-                                            checked={field.sizes.includes(size as TemplateFieldSize)}
-                                            onChange={e => {
-                                                this.modifyColSizes(field, size as TemplateFieldSize, e.target.checked);
-                                            }}
-                                        />
-                                        <div className="text">{size}</div>
-                                    </>
-                                ))}
+                                <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.TEXT)} />
+                                <div className="text">Text</div>
+                                <input className="bubble" type="radio" name="type" onClick={() => this.setColType(field, TemplateFieldType.VISUAL)} />
+                                <div className="text">File</div>
                             </div>
                         </div>
                     </div>
-                    <div className="desc-box">
-                        <div className="top-bar"> Prompt </div>
-                        <textarea
-                            className="content"
-                            onChange={e => this.setColDesc(field, e.target.value)}
-                            defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
-                            placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
-                        />
+                </div>
+                <div className="sizes-box">
+                    <div className="top-bar"> Valid Sizes </div>
+                    <div className="content">
+                        <div className="bubbles">
+                            {Object.values(TemplateFieldSize).map(size => (
+                                <div key={field + size}>
+                                    <input className="bubble" type="checkbox" name="type" checked={field.sizes.includes(size)} onChange={e => this.modifyColSizes(field, size, e.target.checked)} />
+                                    <div className="text">{size}</div>
+                                </div>
+                            ))}
+                        </div>
                     </div>
                 </div>
-            );
-        };
+                <div className="desc-box">
+                    <div className="top-bar"> Prompt </div>
+                    <textarea
+                        className="content"
+                        onChange={e => this.setColDesc(field, e.target.value)}
+                        defaultValue={field.desc === this._dataViz?.GPTSummary?.get(field.title)?.desc ? '' : field.desc}
+                        placeholder={this._dataViz?.GPTSummary?.get(field.title)?.desc ?? 'Add a description/prompt to help with template generation.'}
+                    />
+                </div>
+            </div>
+        );
 
         return (
             <div className="docCreatorMenu-dashboard-view">
@@ -1331,15 +1305,11 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
 
     get renderSelectedViewType() {
         switch (this._menuContent) {
-            case 'templates':
-                return this.templatesPreviewContents;
-            case 'options':
-                return this.optionsMenuContents;
-            case 'dashboard':
-                return this.dashboardContents;
-            default:
-                return undefined;
-        }
+            case 'templates': return this.templatesPreviewContents;
+            case 'options':   return this.optionsMenuContents;
+            case 'dashboard': return this.dashboardContents;
+        } // prettier-ignore
+        return undefined;
     }
 
     get resizePanes() {
@@ -1360,30 +1330,16 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
     }
 
     render() {
-        const topButton = (icon: string, opt: string, func: () => void, tag: string) => {
-            return (
-                <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
-                    <div
-                        className="top-button-content"
-                        onPointerDown={e =>
-                            this.setUpButtonClick(e, () =>
-                                runInAction(() => {
-                                    func();
-                                })
-                            )
-                        }>
-                        <FontAwesomeIcon icon={icon as IconProp} />
-                    </div>
+        const topButton = (icon: string, opt: string, func: () => void, tag: string) => (
+            <div className={`top-button-container ${tag} ${opt === this._menuContent ? 'selected' : ''}`}>
+                <div className="top-button-content" onPointerDown={e => this.setUpButtonClick(e, action(func))}>
+                    <FontAwesomeIcon icon={icon as IconProp} />
                 </div>
-            );
-        };
+            </div>
+        );
 
-        const onPreviewSelected = () => {
-            this._menuContent = 'templates';
-        };
-        const onSavedSelected = () => {
-            this._menuContent = 'dashboard';
-        };
+        const onPreviewSelected = () => (this._menuContent = 'templates');
+        const onSavedSelected = () => (this._menuContent = 'dashboard');
         const onOptionsSelected = () => {
             this._menuContent = 'options';
             if (!this._layout.columns) this._layout.columns = Math.ceil(Math.sqrt(this.docsToRender.length));
@@ -1420,9 +1376,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                         return true;
                                     },
                                     emptyFunction,
-                                    undoable(clickEv => {
-                                        clickEv.stopPropagation();
-                                    }, 'drag menu')
+                                    undoable(clickEv => clickEv.stopPropagation(), 'drag menu')
                                 )
                             }>
                             <div className="docCreatorMenu-top-buttons-container">
@@ -1431,7 +1385,7 @@ export class DocCreatorMenu extends ObservableReactComponent<DocCreateMenuProps>
                                 {topButton('bars', 'saved', onSavedSelected, 'right')}
                             </div>
                             <button className="docCreatorMenu-menu-button close-menu" onPointerDown={e => this.setUpButtonClick(e, this.closeMenu)}>
-                                <FontAwesomeIcon icon={'minus'} />
+                                <FontAwesomeIcon icon="minus" />
                             </button>
                         </div>
                         {this.renderSelectedViewType}
-- 
cgit v1.2.3-70-g09d2