From 982991ca69cd7f844680949ed160e678f89050fc Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 16 Apr 2024 00:44:43 -0400
Subject: correlation from gpt

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 25 ++++++++++++++++++++++++
 1 file changed, 25 insertions(+)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 60c5fdba2..24199a5e3 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -29,6 +29,7 @@ import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
 import { Checkbox } from '@mui/material';
 import { ContextMenu } from '../../ContextMenu';
+import { DragManager } from '../../../util/DragManager';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -417,6 +418,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     askGPT = action(async () => {
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
+        GPTPopup.Instance.createFilteredDoc = this.createFilteredDoc;
         GPTPopup.Instance.setDataJson("");
         GPTPopup.Instance.setMode(GPTPopupMode.DATA);
         let data = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
@@ -425,6 +427,29 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.generateDataAnalysis();
     });
 
+    createFilteredDoc = (axes?: any, type?: DataVizView) => {
+
+        const embedding = Doc.MakeEmbedding(this.Document!);
+        embedding._dataViz = DataVizView.HISTOGRAM;
+        embedding._dataViz_axes = new List<string>(axes);
+        embedding._dataViz_parentViz = this.Document;
+        embedding.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
+        embedding.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
+        embedding.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
+        this._props.addDocument?.(embedding);
+        embedding._dataViz_axes = new List<string>([this.axes[1]])
+        this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i))
+
+        console.log(embedding.x);
+        console.log(Number(embedding.x));
+        console.log(Number(embedding.x) + 100.0)
+        embedding.x = Number(embedding.x) + 100.0;
+        console.log(embedding.x);
+        // embedding.y = StrCast(Number(embedding.y) + 100);
+
+        return true;
+    };
+
     render() {
         const scale = this._props.NativeDimScaling?.() || 1;
         return !this.records.length ? (
-- 
cgit v1.2.3-70-g09d2


From b98f3cb1c0e356c318e4d629e8baa05648c153e2 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 16 Apr 2024 17:02:23 -0400
Subject: makes histogram on transfer to text

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 3 +--
 src/client/views/pdf/GPTPopup/GPTPopup.tsx       | 7 +++++--
 2 files changed, 6 insertions(+), 4 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 24199a5e3..19fde7273 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -437,7 +437,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         embedding.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
         embedding.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
         this._props.addDocument?.(embedding);
-        embedding._dataViz_axes = new List<string>([this.axes[1]])
+        embedding._dataViz_axes = new List<string>(axes)
         this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i))
 
         console.log(embedding.x);
@@ -445,7 +445,6 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         console.log(Number(embedding.x) + 100.0)
         embedding.x = Number(embedding.x) + 100.0;
         console.log(embedding.x);
-        // embedding.y = StrCast(Number(embedding.y) + 100);
 
         return true;
     };
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 50835a541..706b44aef 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -30,6 +30,7 @@ interface GPTPopupProps {}
 export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     static Instance: GPTPopup;
     @observable private chatMode: boolean = false;
+    private correlatedColumns: string[] = []
 
     @observable
     public visible: boolean = false;
@@ -173,7 +174,9 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             console.log(res)
             let json = JSON.parse(res! as string);
             const keys = Object.keys(json)
-            console.log(json[keys[0]], json[keys[1]])
+            this.correlatedColumns = []
+            this.correlatedColumns.push(json[keys[0]])
+            this.correlatedColumns.push(json[keys[1]])
             GPTPopup.Instance.setText(json[keys[2]] || 'Something went wrong.');
         } catch (err) {
             console.error(err);
@@ -199,7 +202,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             });
         }
 
-        this.createFilteredDoc();
+        this.createFilteredDoc(this.correlatedColumns);
     };
 
     /**
-- 
cgit v1.2.3-70-g09d2


From 17cca384290a98b28c4f4a4d6bc4cf5edaef4573 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 16 Apr 2024 17:43:06 -0400
Subject: visualize button

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 5 -----
 src/client/views/pdf/GPTPopup/GPTPopup.tsx       | 6 ++++++
 2 files changed, 6 insertions(+), 5 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 19fde7273..dbba9c7f3 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -439,12 +439,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         this._props.addDocument?.(embedding);
         embedding._dataViz_axes = new List<string>(axes)
         this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i))
-
-        console.log(embedding.x);
-        console.log(Number(embedding.x));
-        console.log(Number(embedding.x) + 100.0)
         embedding.x = Number(embedding.x) + 100.0;
-        console.log(embedding.x);
 
         return true;
     };
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 706b44aef..686ef9c28 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -201,7 +201,12 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                 link_relationship: 'GPT Summary',
             });
         }
+    };
 
+    /**
+     * Creates a histogram to show the correlation relationship that was found
+     */
+    private createVisualization = () => {
         this.createFilteredDoc(this.correlatedColumns);
     };
 
@@ -373,6 +378,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                         :(
                         <>
                             <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
+                            <Button tooltip="Create a graph to visualize the correlation results" text="Visualize" onClick={this.createVisualization} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
                             <Button tooltip="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
                         </>
                     ) : (
-- 
cgit v1.2.3-70-g09d2


From 2de4f0938dedf8a6b2d60886df5c59bce7c72f59 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 23 Apr 2024 17:26:23 -0400
Subject: ui for filtered visualization from ai

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 14 +++++++++++---
 src/client/views/pdf/GPTPopup/GPTPopup.tsx       |  8 ++++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index dbba9c7f3..a6de64d85 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -427,19 +427,27 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.generateDataAnalysis();
     });
 
+    /**
+     * creates a new dataviz document filter from this one
+     *      it appears to the right of this document, with the 
+     *      parameters passed in being used to create an initial display
+     */
     createFilteredDoc = (axes?: any, type?: DataVizView) => {
-
         const embedding = Doc.MakeEmbedding(this.Document!);
-        embedding._dataViz = DataVizView.HISTOGRAM;
+        embedding._layout_showSidebar = false;
+        embedding._dataViz = type? type : DataVizView.HISTOGRAM;
         embedding._dataViz_axes = new List<string>(axes);
         embedding._dataViz_parentViz = this.Document;
         embedding.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
         embedding.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
         embedding.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
+        embedding._layout_showSidebar = false;
+        embedding.width = NumCast(this.layoutDoc._width)- this.sidebarWidth();
+        embedding._layout_sidebarWidthPercent = "0%";
         this._props.addDocument?.(embedding);
         embedding._dataViz_axes = new List<string>(axes)
         this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i))
-        embedding.x = Number(embedding.x) + 100.0;
+        embedding.x = Number(embedding.x) + Number(this.Document.width);
 
         return true;
     };
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 686ef9c28..40946cd36 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -152,6 +152,10 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.setLoading(false);
     };
 
+    /**
+     * Completes an API call to generate a summary of 
+     * this.selectedText in the popup.
+     */
     generateSummary = async () => {
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setMode(GPTPopupMode.SUMMARY);
@@ -166,6 +170,10 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         GPTPopup.Instance.setLoading(false);
     }
 
+    /**
+     * Completes an API call to generate an analysis of 
+     * this.dataJson in the popup.
+     */
     generateDataAnalysis = async () => {
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setLoading(true);
-- 
cgit v1.2.3-70-g09d2


From 81325ec64a24a98e3677b208a56dd048669fae72 Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 23 Apr 2024 23:05:24 -0400
Subject: filter one histogram bar onto child dataviz doc at a time

---
 src/client/views/nodes/DataVizBox/DataVizBox.scss  |  4 ++++
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 23 ++++++++++++++++++----
 .../views/nodes/DataVizBox/components/Chart.scss   |  3 +--
 .../nodes/DataVizBox/components/Histogram.tsx      | 12 +++++++++++
 4 files changed, 36 insertions(+), 6 deletions(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.scss b/src/client/views/nodes/DataVizBox/DataVizBox.scss
index e9a346fbe..a4f9dba73 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.scss
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.scss
@@ -32,6 +32,10 @@
     .liveSchema-checkBox {
         margin-bottom: -35px;
     }
+    .filterData-checkBox {
+        margin-left: 10px;
+        margin-bottom: -10px;
+    }
     
     .displaySchemaLive {
         margin-bottom: 20px;
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index a6de64d85..f316c6e0f 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -347,7 +347,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
             axes: this.axes,
             titleCol: this.titleCol,
             //width: this.SidebarShown? this._props.PanelWidth()*.9/1.2: this._props.PanelWidth() * 0.9,
-            height: (this._props.PanelHeight() / scale - 32) /* height of 'change view' button */ * 0.9,
+            height: (this._props.PanelHeight() / scale - 55) /* height of 'change view' button */ * 0.8,
             width: ((this._props.PanelWidth() - this.sidebarWidth()) / scale) * 0.9,
             margin: { top: 10, right: 25, bottom: 75, left: 45 },
         };
@@ -401,11 +401,20 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
     };
 
+    // represents whether or not a data viz box created from a schema table displays live updates to the canvas
     @action
     changeLiveSchemaCheckbox = () => {
         this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive
     }
 
+    // represents whether or not clicking on a peice of data in the visualization 
+    //      (i.e. a data point in a linechart, a bar on a histogram, or a slice of a pie chart)
+    //      filters the data onto a new data viz doc created off of this one
+    @action
+    changeFilteringCheckbox = () => {
+        this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection
+    }
+
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
         const options = cm.findByDescription('Options...');
@@ -481,11 +490,17 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                 {(this.layoutDoc && this.layoutDoc.dataViz_asSchema)?(
                     <div className={'displaySchemaLive'}>
                         <div className={'liveSchema-checkBox'} style={{ width: this._props.width }}>
-                        <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
-                        Display Live Updates to Canvas
+                            <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
+                            Display Live Updates to Canvas
+                        </div>
                     </div>
-                </div>
                 ) : null}
+                {this.layoutDoc._dataViz != DataVizView.TABLE?(
+                    <div className={'filterData-checkBox'}>
+                        <Checkbox color="primary" onChange={this.changeFilteringCheckbox} checked={this.layoutDoc.dataViz_filterSelection as boolean} />
+                        Select data to filter
+                    </div>)
+                : null }
 
                 {this.renderVizView}
 
diff --git a/src/client/views/nodes/DataVizBox/components/Chart.scss b/src/client/views/nodes/DataVizBox/components/Chart.scss
index cf0007cfd..47cad9649 100644
--- a/src/client/views/nodes/DataVizBox/components/Chart.scss
+++ b/src/client/views/nodes/DataVizBox/components/Chart.scss
@@ -15,8 +15,7 @@
         font-size: larger;
         display: flex;
         flex-direction: row;
-        margin-top: -20px;
-        margin-bottom: -20px;
+        margin-top: -35px;
     }
     .asHistogram-checkBox {
         align-items: left;
diff --git a/src/client/views/nodes/DataVizBox/components/Histogram.tsx b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
index 6672603f3..ff0262c15 100644
--- a/src/client/views/nodes/DataVizBox/components/Histogram.tsx
+++ b/src/client/views/nodes/DataVizBox/components/Histogram.tsx
@@ -164,6 +164,18 @@ export class Histogram extends ObservableReactComponent<HistogramProps> {
                     sameAsCurrent = this._currSelected ? showSelected[xAxisTitle] == this._currSelected![xAxisTitle] && showSelected[yAxisTitle] == this._currSelected![yAxisTitle] : false;
                     this._currSelected = sameAsCurrent ? undefined : showSelected;
                     this.selectedData = sameAsCurrent ? undefined : d;
+
+                    // for filtering child dataviz docs
+                    const selectedRows = Cast(this._props.layoutDoc.dataViz_selectedRows, listSpec('number'), null);
+                    this._tableDataIds.forEach(rowID => {
+                        let match = true;
+                        Object.keys(showSelected).map(key => {
+                            if(key!='frequency' && this._props.records[rowID][key]!=showSelected[key]){
+                                match = false;
+                            }
+                        })
+                        if (match && !selectedRows?.includes(rowID)) selectedRows?.push(rowID);
+                    })
                 } else this.hoverOverData = d;
                 return true;
             }
-- 
cgit v1.2.3-70-g09d2


From 297f84678f8efb79ed2dc56693520b1e5a00da2e Mon Sep 17 00:00:00 2001
From: srichman333 <sarah_n_richman@brown.edu>
Date: Tue, 7 May 2024 18:18:43 -0400
Subject: default ai visualization as linechart

---
 src/client/views/nodes/DataVizBox/DataVizBox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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

diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index f316c6e0f..01258a996 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -444,7 +444,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     createFilteredDoc = (axes?: any, type?: DataVizView) => {
         const embedding = Doc.MakeEmbedding(this.Document!);
         embedding._layout_showSidebar = false;
-        embedding._dataViz = type? type : DataVizView.HISTOGRAM;
+        embedding._dataViz = type? type : DataVizView.LINECHART;
         embedding._dataViz_axes = new List<string>(axes);
         embedding._dataViz_parentViz = this.Document;
         embedding.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
-- 
cgit v1.2.3-70-g09d2


From 87bca251d87b5a95da06b2212400ce9427152193 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 14 May 2024 13:46:44 -0400
Subject: cleaning up dataviz code

---
 src/client/apis/gpt/GPT.ts                         |  9 ++--
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   | 49 ++++++++++------------
 .../views/nodes/DataVizBox/components/TableBox.tsx |  5 +--
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         |  5 +--
 4 files changed, 33 insertions(+), 35 deletions(-)

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

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 8747a00a6..9deae7cff 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -24,9 +24,12 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     summary: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: 'Summarize the text given in simpler terms.' },
     edit: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: 'Reword the text.' },
     completion: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful assistant. Answer the user's prompt." },
-    // data: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please keep your response short and to the point." },
-    data: { model: 'gpt-3.5-turbo', maxTokens: 256, temp: 0.5, prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please only return a JSON with a correlation column 1 propert, a correlation column 2 property, and an analysis property. " },
-
+    data: {
+        model: 'gpt-3.5-turbo',
+        maxTokens: 256,
+        temp: 0.5,
+        prompt: "You are a helpful resarch assistant. Analyze the user's data to find meaningful patterns and/or correlation. Please only return a JSON with a correlation column 1 propert, a correlation column 2 property, and an analysis property. ",
+    },
 };
 
 /**
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index 01258a996..3f16220a5 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -1,4 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Checkbox } from '@mui/material';
 import { Colors, Toggle, ToggleType, Type } from 'browndash-components';
 import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -14,22 +15,20 @@ import { TraceMobx } from '../../../../fields/util';
 import { DocUtils, Docs } from '../../../documents/Documents';
 import { DocumentManager } from '../../../util/DocumentManager';
 import { UndoManager, undoable } from '../../../util/UndoManager';
+import { ContextMenu } from '../../ContextMenu';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../../DocComponent';
 import { MarqueeAnnotator } from '../../MarqueeAnnotator';
 import { SidebarAnnos } from '../../SidebarAnnos';
 import { AnchorMenu } from '../../pdf/AnchorMenu';
 import { GPTPopup, GPTPopupMode } from '../../pdf/GPTPopup/GPTPopup';
 import { DocumentView } from '../DocumentView';
-import { FocusViewOptions, FieldView, FieldViewProps } from '../FieldView';
+import { FieldView, FieldViewProps, FocusViewOptions } from '../FieldView';
 import { PinProps } from '../trails';
 import './DataVizBox.scss';
 import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
-import { Checkbox } from '@mui/material';
-import { ContextMenu } from '../../ContextMenu';
-import { DragManager } from '../../../util/DragManager';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -404,16 +403,16 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
     // represents whether or not a data viz box created from a schema table displays live updates to the canvas
     @action
     changeLiveSchemaCheckbox = () => {
-        this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive
-    }
+        this.layoutDoc.dataViz_schemaLive = !this.layoutDoc.dataViz_schemaLive;
+    };
 
-    // represents whether or not clicking on a peice of data in the visualization 
+    // represents whether or not clicking on a peice of data in the visualization
     //      (i.e. a data point in a linechart, a bar on a histogram, or a slice of a pie chart)
     //      filters the data onto a new data viz doc created off of this one
     @action
     changeFilteringCheckbox = () => {
-        this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection
-    }
+        this.layoutDoc.dataViz_filterSelection = !this.layoutDoc.dataViz_filterSelection;
+    };
 
     specificContextMenu = (e: React.MouseEvent): void => {
         const cm = ContextMenu.Instance;
@@ -421,41 +420,39 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Analyze with AI`, event: () => this.askGPT(), icon: 'lightbulb' });
         !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
-    }
-
+    };
 
     askGPT = action(async () => {
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this.sidebarAddDocument;
         GPTPopup.Instance.createFilteredDoc = this.createFilteredDoc;
-        GPTPopup.Instance.setDataJson("");
+        GPTPopup.Instance.setDataJson('');
         GPTPopup.Instance.setMode(GPTPopupMode.DATA);
-        let data = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
-        let input = JSON.stringify(data);
-        GPTPopup.Instance.setDataJson(input);
+        const data = DataVizBox.dataset.get(CsvCast(this.dataDoc[this.fieldKey]).url.href);
+        GPTPopup.Instance.setDataJson(JSON.stringify(data));
         GPTPopup.Instance.generateDataAnalysis();
     });
 
     /**
      * creates a new dataviz document filter from this one
-     *      it appears to the right of this document, with the 
+     *      it appears to the right of this document, with the
      *      parameters passed in being used to create an initial display
      */
-    createFilteredDoc = (axes?: any, type?: DataVizView) => {
+    createFilteredDoc = (axes?: any) => {
         const embedding = Doc.MakeEmbedding(this.Document!);
         embedding._layout_showSidebar = false;
-        embedding._dataViz = type? type : DataVizView.LINECHART;
+        embedding._dataViz = DataVizView.LINECHART;
         embedding._dataViz_axes = new List<string>(axes);
         embedding._dataViz_parentViz = this.Document;
         embedding.histogramBarColors = Field.Copy(this.layoutDoc.histogramBarColors);
         embedding.defaultHistogramColor = this.layoutDoc.defaultHistogramColor;
         embedding.pieSliceColors = Field.Copy(this.layoutDoc.pieSliceColors);
         embedding._layout_showSidebar = false;
-        embedding.width = NumCast(this.layoutDoc._width)- this.sidebarWidth();
-        embedding._layout_sidebarWidthPercent = "0%";
+        embedding.width = NumCast(this.layoutDoc._width) - this.sidebarWidth();
+        embedding._layout_sidebarWidthPercent = '0%';
         this._props.addDocument?.(embedding);
-        embedding._dataViz_axes = new List<string>(axes)
-        this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i))
+        embedding._dataViz_axes = new List<string>(axes);
+        this.layoutDoc.dataViz_selectedRows = new List<number>(this.records.map((rec, i) => i));
         embedding.x = Number(embedding.x) + Number(this.Document.width);
 
         return true;
@@ -487,7 +484,7 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                     <Toggle text={'PIE CHART'} toggleType={ToggleType.BUTTON} type={Type.SEC} color={'black'} onClick={e => (this.layoutDoc._dataViz = DataVizView.PIECHART)} toggleStatus={this.layoutDoc._dataViz == -DataVizView.PIECHART} />
                 </div>
 
-                {(this.layoutDoc && this.layoutDoc.dataViz_asSchema)?(
+                {this.layoutDoc && this.layoutDoc.dataViz_asSchema ? (
                     <div className={'displaySchemaLive'}>
                         <div className={'liveSchema-checkBox'} style={{ width: this._props.width }}>
                             <Checkbox color="primary" onChange={this.changeLiveSchemaCheckbox} checked={this.layoutDoc.dataViz_schemaLive as boolean} />
@@ -495,12 +492,12 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() im
                         </div>
                     </div>
                 ) : null}
-                {this.layoutDoc._dataViz != DataVizView.TABLE?(
+                {this.layoutDoc._dataViz != DataVizView.TABLE ? (
                     <div className={'filterData-checkBox'}>
                         <Checkbox color="primary" onChange={this.changeFilteringCheckbox} checked={this.layoutDoc.dataViz_filterSelection as boolean} />
                         Select data to filter
-                    </div>)
-                : null }
+                    </div>
+                ) : null}
 
                 {this.renderVizView}
 
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index 7ad5a0e6b..fa48d66d8 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -1,5 +1,5 @@
 import { Button, Type } from 'browndash-components';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Utils, emptyFunction, setupMoveUpEvents } from '../../../../../Utils';
@@ -53,13 +53,12 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         makeObservable(this);
     }
 
-    @action
     componentDidMount() {
         // if the tableData changes (ie., when records are selected by the parent (input) visulization),
         // then we need to remove any selected rows that are no longer part of the visualized dataset.
         this._inputChangedDisposer = reaction(() => this._tableData.slice(), this.filterSelectedRowsDown, { fireImmediately: true });
         const selected = NumListCast(this._props.layoutDoc.dataViz_selectedRows);
-        if (selected.length > 0) this.hasRowsToFilter = true;
+        if (selected.length > 0) runInAction(() => (this.hasRowsToFilter = true));
         this.handleScroll();
     }
     componentWillUnmount() {
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 40946cd36..e90504aa5 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -1,5 +1,5 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, EditableText, IconButton, Size, Type } from 'browndash-components';
+import { Button, IconButton, Type } from 'browndash-components';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -15,7 +15,6 @@ import { DocUtils, Docs } from '../../../documents/Documents';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
-import { DataVizView } from '../../nodes/DataVizBox/DataVizBox';
 
 export enum GPTPopupMode {
     SUMMARY,
@@ -123,7 +122,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     };
 
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
-    public createFilteredDoc: (axes?: any, type?: DataVizView) => boolean = () => false;
+    public createFilteredDoc: (axes?: any) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
     /**
-- 
cgit v1.2.3-70-g09d2


From 78fa489cd6e93ba5952c509deabafa4a69b74fd6 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Wed, 15 May 2024 15:24:31 -0400
Subject: lint cleanup

---
 src/client/apis/gpt/customization.ts               |   2 +-
 src/client/views/PropertiesView.tsx                |  72 ++++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   5 +-
 src/client/views/nodes/DataVizBox/DataVizBox.tsx   |   6 +-
 .../nodes/DataVizBox/components/LineChart.tsx      |   2 +-
 .../views/nodes/DataVizBox/components/PieChart.tsx |   1 -
 .../views/nodes/DataVizBox/components/TableBox.tsx |   5 +-
 .../views/nodes/trails/CubicBezierEditor.tsx       |  87 ++++----
 src/client/views/nodes/trails/PresBox.tsx          | 226 ++++++++-------------
 src/client/views/nodes/trails/SlideEffect.tsx      |  17 +-
 10 files changed, 189 insertions(+), 234 deletions(-)

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

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 7da04918d..61b666bd3 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -103,7 +103,7 @@ export const getSlideTransitionSuggestions = async (inputText: string) => {
     }
 };
 
-export const gptTrailSlideCustomization = async (inputText: string, properties: any | any[], applyToWhole?: boolean) => {
+export const gptTrailSlideCustomization = async (inputText: string, properties: any | any[]) => {
     let prompt = prompts.trails.description;
 
     prompts.trails.features.forEach(feature => {
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index 24f50eb8b..df4ed98ac 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1044,32 +1044,30 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
     setFinalNumber = () => {
         this._sliderBatch?.end();
     };
-    getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => {
-        return (
-            <div key={label + (this.selectedDoc?.title ?? '')}>
-                <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
-                <Slider
-                    key={label}
-                    onPointerDown={() => {
-                        this._sliderBatch = UndoManager.StartBatch('slider ' + label);
-                    }}
-                    multithumb={false}
-                    color={this.color}
-                    size={Size.XSMALL}
-                    min={min}
-                    max={max}
-                    autorangeMinVal={autorangeMinVal}
-                    autorange={autorange}
-                    number={number}
-                    unit={unit}
-                    decimals={1}
-                    setFinalNumber={this.setFinalNumber}
-                    setNumber={setNumber}
-                    fillWidth
-                />
-            </div>
-        );
-    };
+    getNumber = (label: string, unit: string, min: number, max: number, number: number, setNumber: any, autorange?: number, autorangeMinVal?: number) => (
+        <div key={label + (this.selectedDoc?.title ?? '')}>
+            <NumberInput formLabel={label} formLabelPlacement="left" type={Type.SEC} unit={unit} fillWidth color={this.color} number={number} setNumber={setNumber} min={min} max={max} />
+            <Slider
+                key={label}
+                onPointerDown={() => {
+                    this._sliderBatch = UndoManager.StartBatch('slider ' + label);
+                }}
+                multithumb={false}
+                color={this.color}
+                size={Size.XSMALL}
+                min={min}
+                max={max}
+                autorangeMinVal={autorangeMinVal}
+                autorange={autorange}
+                number={number}
+                unit={unit}
+                decimals={1}
+                setFinalNumber={this.setFinalNumber}
+                setNumber={setNumber}
+                fillWidth
+            />
+        </div>
+    );
 
     setVal = (func: (doc: Doc, val: number) => void) => (val: number) => this.selectedDoc && !isNaN(val) && func(this.selectedDoc, val);
     @computed get transformEditor() {
@@ -1770,12 +1768,14 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         <div className="propertiesView-presentationTrails">
                             <div
                                 className="propertiesView-presentationTrails-title"
-                                onPointerDown={action(() => (this.openPresTransitions = !this.openPresTransitions))}
+                                onPointerDown={action(() => {
+                                    this.openPresTransitions = !this.openPresTransitions;
+                                })}
                                 style={{
                                     color: SnappingManager.userColor,
                                     backgroundColor: this.openPresTransitions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Transitions
+                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Transitions
                                 <div className="propertiesView-presentationTrails-title-icon">
                                     <FontAwesomeIcon icon={this.openPresTransitions ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
@@ -1787,12 +1787,14 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         <div className="propertiesView-presentationTrails">
                             <div
                                 className="propertiesView-presentationTrails-title"
-                                onPointerDown={action(() => (this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration))}
+                                onPointerDown={action(() => {
+                                    this.openPresVisibilityAndDuration = !this.openPresVisibilityAndDuration;
+                                })}
                                 style={{
                                     color: SnappingManager.userColor,
                                     backgroundColor: this.openPresVisibilityAndDuration ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Visibility
+                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Visibility
                                 <div className="propertiesView-presentationTrails-title-icon">
                                     <FontAwesomeIcon icon={this.openPresVisibilityAndDuration ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
@@ -1804,12 +1806,14 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         <div className="propertiesView-presentationTrails">
                             <div
                                 className="propertiesView-presentationTrails-title"
-                                onPointerDown={action(() => (this.openPresProgressivize = !this.openPresProgressivize))}
+                                onPointerDown={action(() => {
+                                    this.openPresProgressivize = !this.openPresProgressivize;
+                                })}
                                 style={{
                                     color: SnappingManager.userColor,
                                     backgroundColor: this.openPresProgressivize ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
                                 }}>
-                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon={'rocket'} /> &nbsp; Progressivize
+                                &nbsp; <FontAwesomeIcon style={{ alignSelf: 'center' }} icon="rocket" /> &nbsp; Progressivize
                                 <div className="propertiesView-presentationTrails-title-icon">
                                     <FontAwesomeIcon icon={this.openPresProgressivize ? 'caret-down' : 'caret-right'} size="lg" />
                                 </div>
@@ -1821,7 +1825,9 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                         <div className="propertiesView-presentationTrails">
                             <div
                                 className="propertiesView-presentationTrails-title"
-                                onPointerDown={action(() => (this.openSlideOptions = !this.openSlideOptions))}
+                                onPointerDown={action(() => {
+                                    this.openSlideOptions = !this.openSlideOptions;
+                                })}
                                 style={{
                                     color: SnappingManager.userColor,
                                     backgroundColor: this.openSlideOptions ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 069132ec3..53493a968 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -14,6 +14,7 @@ import { DocData, Height, Width } from '../../../../fields/DocSymbols';
 import { Id } from '../../../../fields/FieldSymbols';
 import { InkData, InkField, InkTool, Segment } from '../../../../fields/InkField';
 import { List } from '../../../../fields/List';
+import { RichTextField } from '../../../../fields/RichTextField';
 import { listSpec } from '../../../../fields/Schema';
 import { ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, ScriptCast, StrCast, toList } from '../../../../fields/Types';
@@ -53,10 +54,6 @@ import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannable
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
 import { MarqueeView } from './MarqueeView';
-import { PropertiesView } from '../../PropertiesView';
-import { ExtractColors } from '../../ExtractColors';
-import { extname } from 'path';
-import { RichTextField } from '../../../../fields/RichTextField';
 
 class CollectionFreeFormOverlayView extends React.Component<{ elements: () => ViewDefResult[] }> {
     render() {
diff --git a/src/client/views/nodes/DataVizBox/DataVizBox.tsx b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
index e91ed45c3..4d5f15a3e 100644
--- a/src/client/views/nodes/DataVizBox/DataVizBox.tsx
+++ b/src/client/views/nodes/DataVizBox/DataVizBox.tsx
@@ -14,6 +14,7 @@ import { Cast, CsvCast, DocCast, NumCast, StrCast } from '../../../../fields/Typ
 import { CsvField } from '../../../../fields/URLField';
 import { TraceMobx } from '../../../../fields/util';
 import { DocUtils } from '../../../documents/DocUtils';
+import { DocumentType } from '../../../documents/DocumentTypes';
 import { Docs } from '../../../documents/Documents';
 import { UndoManager, undoable } from '../../../util/UndoManager';
 import { ContextMenu } from '../../ContextMenu';
@@ -31,7 +32,6 @@ import { Histogram } from './components/Histogram';
 import { LineChart } from './components/LineChart';
 import { PieChart } from './components/PieChart';
 import { TableBox } from './components/TableBox';
-import { DocumentType } from '../../../documents/DocumentTypes';
 
 export enum DataVizView {
     TABLE = 'table',
@@ -127,8 +127,8 @@ export class DataVizBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
 
     @action // pinned / linked anchor doc includes selected rows, graph titles, and graph colors
     restoreView = (data: Doc) => {
-        const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
-        const changedAxes = data.config_dataVizAxes && this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
+        // const changedView = data.config_dataViz && this.dataVizView !== data.config_dataViz && (this.layoutDoc._dataViz = data.config_dataViz);
+        // const changedAxes = data.config_dataVizAxes && this.axes.join('') !== StrListCast(data.config_dataVizAxes).join('') && (this.layoutDoc._dataViz_axes = new List<string>(StrListCast(data.config_dataVizAxes)));
         this.layoutDoc.dataViz_selectedRows = Field.Copy(data.dataViz_selectedRows);
         this.layoutDoc.dataViz_histogram_barColors = Field.Copy(data.dataViz_histogram_barColors);
         this.layoutDoc.dataViz_histogram_defaultColor = data.dataViz_histogram_defaultColor;
diff --git a/src/client/views/nodes/DataVizBox/components/LineChart.tsx b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
index ffced14f8..d055d269c 100644
--- a/src/client/views/nodes/DataVizBox/components/LineChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/LineChart.tsx
@@ -1,6 +1,6 @@
 import { Button, EditableText, Size } from 'browndash-components';
 import * as d3 from 'd3';
-import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, NumListCast, StrListCast } from '../../../../../fields/Doc';
diff --git a/src/client/views/nodes/DataVizBox/components/PieChart.tsx b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
index d5410c1aa..19ea8e4fa 100644
--- a/src/client/views/nodes/DataVizBox/components/PieChart.tsx
+++ b/src/client/views/nodes/DataVizBox/components/PieChart.tsx
@@ -93,7 +93,6 @@ export class PieChart extends ObservableReactComponent<PieChartProps> {
         // restore selected slices
         const svg = this._piechartSvg;
         if (svg && this._pieChartData[0]) {
-            const key = Object.keys(this._pieChartData[0])[0];
             const selectedDataBars = StrListCast(this._props.layoutDoc.dataViz_pie_selectedData);
             svg.selectAll('path').attr('class', (d: any) => {
                 let selected = false;
diff --git a/src/client/views/nodes/DataVizBox/components/TableBox.tsx b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
index bcd8e54f2..a1deb1625 100644
--- a/src/client/views/nodes/DataVizBox/components/TableBox.tsx
+++ b/src/client/views/nodes/DataVizBox/components/TableBox.tsx
@@ -64,7 +64,10 @@ export class TableBox extends ObservableReactComponent<TableBoxProps> {
         // then we need to remove any selected rows that are no longer part of the visualized dataset.
         this._inputChangedDisposer = reaction(() => this._tableData.slice(), this.filterSelectedRowsDown, { fireImmediately: true });
         const selected = NumListCast(this._props.layoutDoc.dataViz_selectedRows);
-        if (selected.length > 0) runInAction(() => (this.hasRowsToFilter = true));
+        if (selected.length > 0)
+            runInAction(() => {
+                this.hasRowsToFilter = true;
+            });
         this.handleScroll();
     }
     componentWillUnmount() {
diff --git a/src/client/views/nodes/trails/CubicBezierEditor.tsx b/src/client/views/nodes/trails/CubicBezierEditor.tsx
index a5e21259a..e1ad1e6e5 100644
--- a/src/client/views/nodes/trails/CubicBezierEditor.tsx
+++ b/src/client/views/nodes/trails/CubicBezierEditor.tsx
@@ -3,7 +3,6 @@ import React, { useEffect, useState } from 'react';
 type Props = {
     setFunc: (newPoints: { p1: number[]; p2: number[] }) => void;
     currPoints: { p1: number[]; p2: number[] };
-    easeFunc: string;
 };
 
 const ANIMATION_DURATION = 750;
@@ -20,52 +19,50 @@ export const TIMING_DEFAULT_MAPPINGS = {
     'ease-in-out': 'cubic-bezier(0.42, 0, 0.58, 1.0)',
 };
 
+export function EaseFuncToPoints(func: string) {
+    let strPoints = func || 'ease';
+    if (!strPoints.startsWith('cubic')) {
+        switch (func) {
+            case 'linear':
+                strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
+                break;
+            case 'ease':
+                strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
+                break;
+            case 'ease-in':
+                strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
+                break;
+            case 'ease-out':
+                strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
+                break;
+            case 'ease-in-out':
+                strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
+                break;
+            default:
+                strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
+        }
+    }
+    const components = strPoints
+        .split('(')[1]
+        .split(')')[0]
+        .split(',')
+        .map(elem => parseFloat(elem));
+    return {
+        p1: [components[0], components[1]],
+        p2: [components[2], components[3]],
+    };
+}
+
 /**
  * Visual editor for a bezier curve with draggable control points.
  * */
 
-const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
+function CubicBezierEditor({ setFunc, currPoints }: Props) {
     const [animating, setAnimating] = useState(false);
     const [c1Down, setC1Down] = useState(false);
     const [c2Down, setC2Down] = useState(false);
 
-    const roundToHundredth = (num: number) => {
-        return Math.round(num * 100) / 100;
-    };
-
-    const convertToPoints = (func: string) => {
-        let strPoints = func ? func : 'ease';
-        if (!strPoints.startsWith('cubic')) {
-            switch (func) {
-                case 'linear':
-                    strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
-                    break;
-                case 'ease':
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-                    break;
-                case 'ease-in':
-                    strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
-                    break;
-                case 'ease-out':
-                    strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
-                    break;
-                case 'ease-in-out':
-                    strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
-                    break;
-                default:
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-            }
-        }
-        const components = strPoints
-            .split('(')[1]
-            .split(')')[0]
-            .split(',')
-            .map(elem => parseFloat(elem));
-        return {
-            p1: [components[0], components[1]],
-            p2: [components[2], components[3]],
-        };
-    };
+    const roundToHundredth = (num: number) => Math.round(num * 100) / 100;
 
     useEffect(() => {
         if (animating) {
@@ -76,7 +73,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
     }, [animating]);
 
     useEffect(() => {
-        if (!c1Down) return;
+        if (!c1Down) return undefined;
         window.addEventListener('pointerup', () => {
             setC1Down(false);
         });
@@ -99,7 +96,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
 
     // Sets up pointer events for moving the control points
     useEffect(() => {
-        if (!c2Down) return;
+        if (!c2Down) return undefined;
         window.addEventListener('pointerup', () => {
             setC2Down(false);
         });
@@ -163,7 +160,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC1Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC1Down(false);
                     }}
                 />
@@ -173,7 +170,7 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC2Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC2Down(false);
                     }}
                     x1={`${EDITOR_WIDTH + OFFSET}`}
@@ -193,13 +190,13 @@ const CubicBezierEditor = ({ setFunc, currPoints, easeFunc }: Props) => {
                         e.stopPropagation();
                         setC2Down(true);
                     }}
-                    onPointerUp={e => {
+                    onPointerUp={() => {
                         setC2Down(false);
                     }}
                 />
             </svg>
         </div>
     );
-};
+}
 
 export default CubicBezierEditor;
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index c718b5b3c..69d03ac2e 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -2,9 +2,16 @@
 /* eslint-disable jsx-a11y/click-events-have-key-events */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
+import Slider from '@mui/material/Slider';
+import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components';
 import { action, computed, IReactionDisposer, makeObservable, observable, ObservableSet, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { AiOutlineSend } from 'react-icons/ai';
+import { BiMicrophone } from 'react-icons/bi';
+import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp } from 'react-icons/fa';
+import ReactLoading from 'react-loading';
+import ReactTextareaAutosize from 'react-textarea-autosize';
 import { lightOrDark, returnFalse, returnOne, setupMoveUpEvents, StopEvent } from '../../../../ClientUtils';
 import { Doc, DocListCast, Field, FieldResult, FieldType, NumListCast, Opt, StrListCast } from '../../../../fields/Doc';
 import { Animation, DocData, TransitionTimer } from '../../../../fields/DocSymbols';
@@ -16,9 +23,11 @@ import { listSpec } from '../../../../fields/Schema';
 import { ComputedField, ScriptField } from '../../../../fields/ScriptField';
 import { BoolCast, Cast, DocCast, NumCast, StrCast, toList } from '../../../../fields/Types';
 import { emptyFunction, emptyPath, stringHash } from '../../../../Utils';
+import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
 import { DocServer } from '../../../DocServer';
 import { Docs } from '../../../documents/Documents';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
+import { DictationManager } from '../../../util/DictationManager';
 import { dropActionType } from '../../../util/DropActionTypes';
 import { ScriptingGlobals } from '../../../util/ScriptingGlobals';
 import { SerializationHelper } from '../../../util/SerializationHelper';
@@ -36,21 +45,12 @@ import { FieldView, FieldViewProps } from '../FieldView';
 import { FocusViewOptions } from '../FocusViewOptions';
 import { OpenWhere, OpenWhereMod } from '../OpenWhere';
 import { ScriptingBox } from '../ScriptingBox';
+import CubicBezierEditor, { EaseFuncToPoints, TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor';
 import './PresBox.scss';
-import ReactLoading from 'react-loading';
 import { PresEffect, PresEffectDirection, PresMovement, PresStatus } from './PresEnums';
-import ReactTextareaAutosize from 'react-textarea-autosize';
-import { Button, Dropdown, DropdownType, IconButton, Toggle, ToggleType, Type } from 'browndash-components';
-import { BiMicrophone } from 'react-icons/bi';
-import { AiOutlineSend } from 'react-icons/ai';
-import { getSlideTransitionSuggestions, gptSlideProperties, gptTrailSlideCustomization } from '../../../apis/gpt/customization';
-import { DictationManager } from '../../../util/DictationManager';
-import CubicBezierEditor, { TIMING_DEFAULT_MAPPINGS } from './CubicBezierEditor';
-import Slider from '@mui/material/Slider';
-import { FaArrowDown, FaArrowLeft, FaArrowRight, FaArrowUp, FaCompressArrowsAlt } from 'react-icons/fa';
-import { effectTimings, SpringType, springMappings, effectItems, easeItems, movementItems, SpringSettings, presEffectDefaultTimings, AnimationSettings, springPreviewColors } from './SpringUtils';
 import SlideEffect from './SlideEffect';
-import { IoMdInformationCircleOutline } from 'react-icons/io';
+import { AnimationSettings, easeItems, effectItems, effectTimings, movementItems, presEffectDefaultTimings, springMappings, springPreviewColors, SpringSettings, SpringType } from './SpringUtils';
+
 @observer
 export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     public static LayoutString(fieldKey: string) {
@@ -161,9 +161,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.isLoading = isLoading;
     };
 
-    @action
-    public setChatActive = (active: boolean) => {};
-
     @action
     public setIsRecording = (isRecording: boolean) => {
         this.isRecording = isRecording;
@@ -188,37 +185,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @computed
     get currCPoints() {
-        let strPoints = this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease';
-        if (!strPoints.startsWith('cubic')) {
-            switch (StrCast(this.activeItem.presEaseFunc)) {
-                case 'linear':
-                    strPoints = 'cubic-bezier(0.0, 0.0, 1.0, 1.0)';
-                    break;
-                case 'ease':
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-                    break;
-                case 'ease-in':
-                    strPoints = 'cubic-bezier(0.42, 0, 1.0, 1.0)';
-                    break;
-                case 'ease-out':
-                    strPoints = 'cubic-bezier(0, 0, 0.58, 1.0)';
-                    break;
-                case 'ease-in-out':
-                    strPoints = 'cubic-bezier(0.42, 0, 0.58, 1.0)';
-                    break;
-                default:
-                    strPoints = 'cubic-bezier(0.25, 0.1, 0.25, 1.0)';
-            }
-        }
-        const components = strPoints
-            .split('(')[1]
-            .split(')')[0]
-            .split(',')
-            .map(elem => parseFloat(elem));
-        return {
-            p1: [components[0], components[1]],
-            p2: [components[2], components[3]],
-        };
+        const strPoints = this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease';
+        return EaseFuncToPoints(strPoints);
     }
 
     @computed
@@ -364,7 +332,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             }
         });
     };
-    stopDictation = (abort: boolean) => {
+    stopDictation = () => {
         this.setIsRecording(false);
         DictationManager.Controls.stop();
     };
@@ -375,7 +343,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     };
 
     @action
-    customizeAnimations = async (input: string) => {
+    customizeAnimations = async () => {
         this.setIsLoading(true);
         try {
             const res = await getSlideTransitionSuggestions(this.animationChat);
@@ -396,19 +364,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.setIsRecording(false);
         this.setIsLoading(true);
 
-        let currSlideProperties: { [key: string]: any } = {};
-        for (const key of gptSlideProperties) {
+        const currSlideProperties: { [key: string]: any } = {};
+        gptSlideProperties.forEach(key => {
             if (this.activeItem[key]) {
                 currSlideProperties[key] = this.activeItem[key];
-            } else {
-                // default values
-                if (key === 'presentation_transition') {
-                    currSlideProperties[key] = 500;
-                } else if (key === 'config_zoom') {
-                    currSlideProperties[key] = 1.0;
-                }
             }
-        }
+            // default values
+            else if (key === 'presentation_transition') {
+                currSlideProperties[key] = 500;
+            } else if (key === 'config_zoom') {
+                currSlideProperties[key] = 1.0;
+            }
+        });
         console.log('current slide props ', currSlideProperties);
 
         try {
@@ -416,7 +383,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             if (typeof res === 'string') {
                 const resObj = JSON.parse(res);
                 console.log('Parsed GPT Result ', resObj);
-                for (let key in resObj) {
+                // eslint-disable-next-line no-restricted-syntax
+                for (const key in resObj) {
                     if (resObj[key]) {
                         console.log('typeof property', typeof resObj[key]);
                         this.activeItem[key] = resObj[key];
@@ -1612,10 +1580,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             doc.presEaseFunc = activeItem.presEaseFunc;
         });
     };
-    
+
     setEaseFunc = (activeItem: Doc, easeFunc: string) => {
         activeItem.presEaseFunc = easeFunc;
-        this.selectedArray.forEach(doc => (doc.presEaseFunc = activeItem.presEaseFunc));
+        this.selectedArray.forEach(doc => {
+            doc.presEaseFunc = activeItem.presEaseFunc;
+        });
     };
 
     @undoBatch
@@ -1633,7 +1603,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @undoBatch
     updateEffectTiming = (activeItem: Doc, timing: SpringSettings) => {
         activeItem.presEffectTiming = JSON.stringify(timing);
-        this.selectedArray.forEach(doc => (doc.presEffectTiming = activeItem.presEffectTiming));
+        this.selectedArray.forEach(doc => {
+            doc.presEffectTiming = activeItem.presEffectTiming;
+        });
     };
 
     static _sliderBatch: any;
@@ -1702,7 +1674,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     Hide before
                                 </div>
                             </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">{'Hide while presented'}</div>}>
+                            <Tooltip title={<div className="dash-tooltip">Hide while presented</div>}>
                                 <div
                                     className={`ribbon-toggle ${activeItem.presentation_hide ? 'active' : ''}`}
                                     style={{ border: `solid 1px ${SnappingManager.userColor}`, color: SnappingManager.userColor, background: activeItem.presentation_hide ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor }}
@@ -1710,7 +1682,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     Hide
                                 </div>
                             </Tooltip>
-                            <Tooltip title={<div className="dash-tooltip">{'Hide after presented'}</div>}>
+                            <Tooltip title={<div className="dash-tooltip">Hide after presented</div>}>
                                 <div
                                     className={`ribbon-toggle ${activeItem.presentation_hideAfter ? 'active' : ''}`}
                                     style={{ border: `solid 1px ${SnappingManager.userColor}`, color: SnappingManager.userColor, background: activeItem.presentation_hideAfter ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor }}
@@ -1719,7 +1691,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 </div>
                             </Tooltip>
 
-                            <Tooltip title={<div className="dash-tooltip">{'Open in lightbox view'}</div>}>
+                            <Tooltip title={<div className="dash-tooltip">Open in lightbox view</div>}>
                                 <div
                                     className="ribbon-toggle"
                                     style={{
@@ -1737,11 +1709,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 <div className="ribbon-doubleButton">
                                     <div className="presBox-subheading">Slide Duration</div>
                                     <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
-                                        <input className="presBox-input" type="number" readOnly={true} value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
+                                        <input className="presBox-input" type="number" readOnly value={duration} onKeyDown={e => e.stopPropagation()} onChange={e => this.updateDurationTime(e.target.value)} /> s
                                     </div>
                                 </div>
                                 {PresBox.inputter('0.1', '0.1', '20', duration, targetType !== DocumentType.AUDIO, this.updateDurationTime)}
-                                <div className={'slider-headers'} style={{ display: targetType === DocumentType.AUDIO ? 'none' : 'grid' }}>
+                                <div className="slider-headers" style={{ display: targetType === DocumentType.AUDIO ? 'none' : 'grid' }}>
                                     <div className="slider-text">Short</div>
                                     <div className="slider-text">Medium</div>
                                     <div className="slider-text">Long</div>
@@ -1784,12 +1756,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     // a progressivized slide doesn't have sub-slides, but rather iterates over the data list of the target being progressivized.
                                     // to avoid creating a new slide to correspond to each of the target's data list, we create a computedField to refernce the target's data list.
                                     let dataField = Doc.LayoutFieldKey(tagDoc);
-                                    if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField = dataField + '_annotations';
+                                    if (Cast(tagDoc[dataField], listSpec(Doc), null)?.filter(d => d instanceof Doc) === undefined) dataField += '_annotations';
 
                                     if (DocCast(activeItem.presentation_targetDoc).annotationOn) activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc.annotationOn?.["${dataField}"]`);
                                     else activeItem.data = ComputedField.MakeFunction(`this.presentation_targetDoc?.["${dataField}"]`);
                                 }}
-                                checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined ? true : false}
+                                checked={Cast(activeItem.presentation_indexed, 'number', null) !== undefined}
                             />
                         </div>
                         <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
@@ -1798,7 +1770,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 className="presBox-checkbox"
                                 style={{ margin: 10, border: `solid 1px ${SnappingManager.userColor}` }}
                                 type="checkbox"
-                                onChange={() => (activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1)}
+                                onChange={() => {
+                                    activeItem.presentation_indexedStart = activeItem.presentation_indexedStart ? 0 : 1;
+                                }}
                                 checked={!NumCast(activeItem.presentation_indexedStart)}
                             />
                         </div>
@@ -1808,7 +1782,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 className="presBox-checkbox"
                                 style={{ margin: 10, border: `solid 1px ${SnappingManager.userColor}` }}
                                 type="checkbox"
-                                onChange={() => (activeItem.presBulletExpand = !activeItem.presBulletExpand)}
+                                onChange={() => {
+                                    activeItem.presBulletExpand = !activeItem.presBulletExpand;
+                                }}
                                 checked={BoolCast(activeItem.presBulletExpand)}
                             />
                         </div>
@@ -1828,14 +1804,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     border: this._openBulletEffectDropdown ? `solid 2px ${SnappingManager.userVariantColor}` : `solid 1px ${SnappingManager.userColor}`,
                                 }}>
                                 {effect?.toString()}
-                                <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon={'angle-down'} />
+                                <FontAwesomeIcon className="presBox-dropdownIcon" style={{ gridColumn: 2, color: this._openBulletEffectDropdown ? Colors.MEDIUM_BLUE : 'black' }} icon="angle-down" />
                                 <div
-                                    className={'presBox-dropdownOptions'}
+                                    className="presBox-dropdownOptions"
                                     style={{ display: this._openBulletEffectDropdown ? 'grid' : 'none', color: SnappingManager.userColor, background: SnappingManager.userBackgroundColor }}
                                     onPointerDown={e => e.stopPropagation()}>
                                     {Object.values(PresEffect)
                                         .filter(v => isNaN(Number(v)))
-                                        .map(effect => bulletEffect(effect))}
+                                        .map(pEffect => bulletEffect(pEffect))}
                                 </div>
                             </div>
                         </div>
@@ -1847,14 +1823,13 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     @computed get gptDropdown() {
-        const activeItem = this.activeItem;
-        return <div></div>;
+        return <div />;
     }
 
     @computed get transitionDropdown() {
         const { activeItem } = this;
         // Retrieving spring timing properties
-        let timing = StrCast(activeItem.presEffectTiming);
+        const timing = StrCast(activeItem.presEffectTiming);
         let timingConfig: SpringSettings | undefined;
         if (timing) {
             timingConfig = JSON.parse(timing);
@@ -1869,32 +1844,6 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             };
         }
 
-        const presEffect = (effect: PresEffect) => (
-            <div
-                className={`presBox-dropdownOption ${activeItem.presentation_effect === effect || (effect === PresEffect.None && !activeItem.presentation_effect) ? 'active' : ''}`}
-                onPointerDown={StopEvent}
-                onClick={() => this.updateEffect(effect, false)}>
-                {effect}
-            </div>
-        );
-        const presMovement = (movement: PresMovement) => (
-            <div className={`presBox-dropdownOption ${activeItem.presentation_movement === movement ? 'active' : ''}`} onPointerDown={StopEvent} onClick={() => this.updateMovement(movement)}>
-                {movement}
-            </div>
-        );
-        const presDirection = (direction: PresEffectDirection, icon: string, gridColumn: number, gridRow: number, opts: object) => {
-            const color = activeItem.presentation_effectDirection === direction || (direction === PresEffectDirection.Center && !activeItem.presentation_effectDirection) ? SnappingManager.userVariantColor : SnappingManager.userColor;
-            return (
-                <Tooltip title={<div className="dash-tooltip">{direction}</div>}>
-                    <div
-                        style={{ ...opts, border: direction === PresEffectDirection.Center ? `solid 2px ${color}` : undefined, borderRadius: '100%', cursor: 'pointer', gridColumn, gridRow, justifySelf: 'center', color }}
-                        onClick={() => this.updateEffectDirection(direction)}>
-                        {icon ? <FontAwesomeIcon icon={icon as any} /> : null}
-                    </div>
-                </Tooltip>
-            );
-        };
-
         if (activeItem && this.targetDoc) {
             const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5;
             const zoom = NumCast(activeItem.config_zoom, 1) * 100;
@@ -1903,7 +1852,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
             return (
                 <>
-                    {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) using GPT*/}
+                    {/* This chatbox is for customizing the properties of trails, like transition time, movement type (zoom, pan) using GPT */}
                     <div className="presBox-gpt-chat">
                         <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                             Customize Slide Properties{' '}
@@ -1921,7 +1870,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         this.setChatInput(e.target.value);
                                     }}
                                     onKeyDown={e => {
-                                        this.stopDictation(true);
+                                        this.stopDictation();
                                         e.stopPropagation();
                                     }}
                                 />
@@ -1929,12 +1878,12 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                     type={Type.TERT}
                                     color={this.isRecording ? '#2bcaff' : StrCast(Doc.UserDoc().userVariantColor)}
                                     tooltip="Record"
-                                    icon={<BiMicrophone size={'16px'} />}
+                                    icon={<BiMicrophone size="16px" />}
                                     onClick={() => {
                                         if (!this.isRecording) {
                                             this.recordDictation();
                                         } else {
-                                            this.stopDictation(true);
+                                            this.stopDictation();
                                         }
                                     }}
                                 />
@@ -1943,11 +1892,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 style={{ alignSelf: 'flex-end' }}
                                 text="Send"
                                 type={Type.TERT}
-                                icon={this.isLoading ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <AiOutlineSend />}
+                                icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
                                 color={StrCast(Doc.UserDoc().userVariantColor)}
                                 onClick={() => {
-                                    this.stopDictation(true);
+                                    this.stopDictation();
                                     this.customizeWithGPT(this.chatInput);
                                 }}
                             />
@@ -1971,8 +1920,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             Movement
                             <Dropdown
                                 color={StrCast(Doc.UserDoc().userColor)}
-                                formLabel={'Movement'}
-                                closeOnSelect={true}
+                                formLabel="Movement"
+                                closeOnSelect
                                 items={movementItems}
                                 selectedVal={this.movementName(activeItem)}
                                 setSelectedVal={val => {
@@ -1984,18 +1933,18 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             <div className="ribbon-doubleButton" style={{ display: activeItem.presentation_movement === PresMovement.Zoom ? 'inline-flex' : 'none' }}>
                                 <div className="presBox-subheading">Zoom (% screen filled)</div>
                                 <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
-                                    <input className="presBox-input" readOnly={true} type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
+                                    <input className="presBox-input" readOnly type="number" value={zoom} onChange={e => this.updateZoom(e.target.value)} />%
                                 </div>
                             </div>
                             {PresBox.inputter('0', '1', '100', zoom, activeItem.presentation_movement === PresMovement.Zoom, this.updateZoom)}
                             <div className="ribbon-doubleButton" style={{ display: 'inline-flex' }}>
                                 <div className="presBox-subheading">Transition Time</div>
                                 <div className="ribbon-property" style={{ border: `solid 1px ${SnappingManager.userColor}` }}>
-                                    <input className="presBox-input" type="number" readOnly={true} value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
+                                    <input className="presBox-input" type="number" readOnly value={transitionSpeed} onKeyDown={e => e.stopPropagation()} onChange={action(e => this.updateTransitionTime(e.target.value))} /> s
                                 </div>
                             </div>
                             {PresBox.inputter('0.1', '0.1', '10', transitionSpeed, true, this.updateTransitionTime)}
-                            <div className={'slider-headers'}>
+                            <div className="slider-headers">
                                 <div className="slider-text">Fast</div>
                                 <div className="slider-text">Medium</div>
                                 <div className="slider-text">Slow</div>
@@ -2003,8 +1952,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {/* Easing function */}
                             <Dropdown
                                 color={StrCast(Doc.UserDoc().userColor)}
-                                formLabel={'Easing Function'}
-                                closeOnSelect={true}
+                                formLabel="Easing Function"
+                                closeOnSelect
                                 items={easeItems}
                                 selectedVal={this.activeItem.presEaseFunc ? (StrCast(this.activeItem.presEaseFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presEaseFunc)) : 'ease'}
                                 setSelectedVal={val => {
@@ -2040,7 +1989,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             <p className="presBox-submenu-label" style={{ alignSelf: 'flex-start' }}>
                                 Custom Timing Function
                             </p>
-                            <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} easeFunc={StrCast(this.activeItem.presEaseFunc)} />
+                            <CubicBezierEditor setFunc={this.setBezierControlPoints} currPoints={this.currCPoints} />
                         </div>
                     )}
 
@@ -2057,7 +2006,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                         this.setAnimationChat(e.target.value);
                                     }}
                                     onKeyDown={e => {
-                                        this.stopDictation(true);
+                                        this.stopDictation();
                                         e.stopPropagation();
                                     }}
                                 />
@@ -2066,12 +2015,10 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 style={{ alignSelf: 'flex-end' }}
                                 text="Send"
                                 type={Type.TERT}
-                                icon={this.isLoading ? <ReactLoading type="spin" color={'#ffffff'} width={20} height={20} /> : <AiOutlineSend />}
+                                icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
                                 color={StrCast(Doc.UserDoc().userVariantColor)}
-                                onClick={() => {
-                                    this.customizeAnimations(this.animationChat);
-                                }}
+                                onClick={this.customizeAnimations}
                             />
                         </div>
                     </div>
@@ -2093,6 +2040,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 <div className="presBox-effects">
                                     {this.generatedAnimations.map((elem, i) => (
                                         <div
+                                            // eslint-disable-next-line react/no-array-index-key
                                             key={i}
                                             className="presBox-effect-container"
                                             onClick={() => {
@@ -2106,7 +2054,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                 });
                                             }}>
                                             <SlideEffect dir={elem.direction as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
-                                                <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }}></div>
+                                                <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }} />
                                             </SlideEffect>
                                         </div>
                                     ))}
@@ -2115,8 +2063,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {/* Effect dropdown */}
                             <Dropdown
                                 color={StrCast(Doc.UserDoc().userColor)}
-                                formLabel={'Slide Effect'}
-                                closeOnSelect={true}
+                                formLabel="Slide Effect"
+                                closeOnSelect
                                 items={effectItems}
                                 selectedVal={effect?.toString()}
                                 setSelectedVal={val => {
@@ -2142,14 +2090,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             type={Type.TERT}
                                             color={activeItem.presentation_effectDirection === PresEffectDirection.Left ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
                                             tooltip="Left"
-                                            icon={<FaArrowRight size={'16px'} />}
+                                            icon={<FaArrowRight size="16px" />}
                                             onClick={() => this.updateEffectDirection(PresEffectDirection.Left)}
                                         />
                                         <IconButton
                                             type={Type.TERT}
                                             color={activeItem.presentation_effectDirection === PresEffectDirection.Right ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
                                             tooltip="Right"
-                                            icon={<FaArrowLeft size={'16px'} />}
+                                            icon={<FaArrowLeft size="16px" />}
                                             onClick={() => this.updateEffectDirection(PresEffectDirection.Right)}
                                         />
                                         {effect !== PresEffect.Roll && (
@@ -2158,14 +2106,14 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                     type={Type.TERT}
                                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Top ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
                                                     tooltip="Top"
-                                                    icon={<FaArrowDown size={'16px'} />}
+                                                    icon={<FaArrowDown size="16px" />}
                                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Top)}
                                                 />
                                                 <IconButton
                                                     type={Type.TERT}
                                                     color={activeItem.presentation_effectDirection === PresEffectDirection.Bottom ? SnappingManager.userVariantColor : SnappingManager.userBackgroundColor}
                                                     tooltip="Bottom"
-                                                    icon={<FaArrowUp size={'16px'} />}
+                                                    icon={<FaArrowUp size="16px" />}
                                                     onClick={() => this.updateEffectDirection(PresEffectDirection.Bottom)}
                                                 />
                                             </>
@@ -2179,8 +2127,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 <>
                                     <Dropdown
                                         color={StrCast(Doc.UserDoc().userColor)}
-                                        formLabel={'Effect Timing'}
-                                        closeOnSelect={true}
+                                        formLabel="Effect Timing"
+                                        closeOnSelect
                                         items={effectTimings}
                                         selectedVal={timingConfig.type}
                                         setSelectedVal={val => {
@@ -2261,7 +2209,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             <div className="presBox-option-block presBox-option-center">
                                                 <div className="presBox-effect-container">
                                                     <SlideEffect dir={direction as PresEffectDirection} presEffect={effect as PresEffect} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass} infinite>
-                                                        <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[0] }}></div>
+                                                        <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[0] }} />
                                                     </SlideEffect>
                                                 </div>
                                             </div>
@@ -2274,17 +2222,21 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         {/* Toggles */}
                         <div className="presBox-option-block">
                             <Toggle
-                                formLabel={'Play Audio Annotation'}
+                                formLabel="Play Audio Annotation"
                                 toggleType={ToggleType.SWITCH}
                                 toggleStatus={BoolCast(activeItem.presPlayAudio)}
-                                onClick={() => (activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio))}
+                                onClick={() => {
+                                    activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio);
+                                }}
                                 color={SnappingManager.userColor}
                             />
                             <Toggle
-                                formLabel={'Zoom Text Selections'}
+                                formLabel="Zoom Text Selections"
                                 toggleType={ToggleType.SWITCH}
                                 toggleStatus={BoolCast(activeItem.presentation_zoomText)}
-                                onClick={() => (activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText))}
+                                onClick={() => {
+                                    activeItem.presentation_zoomText = !BoolCast(activeItem.presentation_zoomText);
+                                }}
                                 color={SnappingManager.userColor}
                             />
                             <Button text="Apply to all" type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.applyTo(this.childDocs)} />
@@ -3148,7 +3100,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                     } */}
                 </div>
                 {/* presbox chatbox */}
-                {this.chatActive && <div className="presBox-chatbox"></div>}
+                {this.chatActive && <div className="presBox-chatbox" />}
             </div>
         );
     }
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index e0be86875..03cd88f45 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -1,9 +1,10 @@
-import { useSpring, animated, easings, to, useInView } from '@react-spring/web';
-import React, { useEffect, useState } from 'react';
-import { PresEffect, PresEffectDirection } from './PresEnums';
-import './SlideEffect.scss';
+/* eslint-disable react/require-default-props */
+import { animated, to, useInView, useSpring } from '@react-spring/web';
+import React, { useEffect } from 'react';
 import { Doc } from '../../../../fields/Doc';
 import { NumCast } from '../../../../fields/Types';
+import { PresEffect, PresEffectDirection } from './PresEnums';
+import './SlideEffect.scss';
 
 interface SlideEffectProps {
     // pass in doc to extract width, height, bg
@@ -296,7 +297,7 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
                         {dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? (
                             <>
                                 <animated.div
-                                    className={'flip-side flip-back'}
+                                    className="flip-side flip-back"
                                     style={{
                                         transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`),
                                         width: doc ? NumCast(doc.width) : DEFAULT_WIDTH,
@@ -305,7 +306,7 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
                                     }}
                                 />
                                 <animated.div
-                                    className={'flip-side flip-front'}
+                                    className="flip-side flip-front"
                                     style={{ transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`), rotateX: '180deg', width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }}>
                                     {children}
                                 </animated.div>
@@ -313,11 +314,11 @@ export default function SpringAnimation({ doc, dir, friction, tension, mass, pre
                         ) : (
                             <>
                                 <animated.div
-                                    className={'flip-side flip-back'}
+                                    className="flip-side flip-back"
                                     style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }}
                                 />
                                 <animated.div
-                                    className={'flip-side flip-front'}
+                                    className="flip-side flip-front"
                                     style={{ transform: to(springs.x, val => `perspective(600px) rotateY(${val}deg)`), rotateY: '180deg', width: doc ? NumCast(doc.width) : DEFAULT_WIDTH, height: doc ? NumCast(doc.height) : DEFAULT_WIDTH }}>
                                     {children}
                                 </animated.div>
-- 
cgit v1.2.3-70-g09d2