From 5193d53598b7c23b49a20de9c05fbaeb4833da19 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Wed, 21 Feb 2024 17:45:56 -0500
Subject: replace button icon with circle instead of bolt

---
 src/client/util/CurrentUserUtils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 714e33d25..d61a40ffa 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -281,7 +281,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a map",             title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc,        clickFactory: DocCast(doc.emptyMap)},
             { toolTip: "Tap or drag to create a screen grabber",  title: "Grab", icon: "photo-video",   dragFactory: doc.emptyScreengrab as Doc, clickFactory: DocCast(doc.emptyScreengrab), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a WebCam recorder", title: "WebCam", icon: "photo-video", dragFactory: doc.emptyWebCam as Doc,     clickFactory: DocCast(doc.emptyWebCam),     openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
-            { toolTip: "Tap or drag to create a button",          title: "Button", icon: "bolt",        dragFactory: doc.emptyButton as Doc,     clickFactory: DocCast(doc.emptyButton)},
+            { toolTip: "Tap or drag to create a button",          title: "Button", icon: "circle",        dragFactory: doc.emptyButton as Doc,     clickFactory: DocCast(doc.emptyButton)},
             { toolTip: "Tap or drag to create a scripting box",   title: "Script", icon: "terminal",    dragFactory: doc.emptyScript as Doc,     clickFactory: DocCast(doc.emptyScript),                                             funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a data viz node",   title: "DataViz", icon: "chart-bar",  dragFactory: doc.emptyDataViz as Doc,    clickFactory: DocCast(doc.emptyDataViz)},
             { toolTip: "Tap or drag to create a bullet slide",    title: "PPT Slide", icon: "file",     dragFactory: doc.emptySlide as Doc,      clickFactory: DocCast(doc.emptySlide),      openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
-- 
cgit v1.2.3-70-g09d2


From 73f709846365cb266c8489678d5c6713c0c43158 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Tue, 5 Mar 2024 17:23:33 -0500
Subject: difference between flashcard and comparison node

---
 src/client/documents/Documents.ts                  | 12 ++++++-
 src/client/util/CurrentUserUtils.ts                |  3 +-
 src/client/views/nodes/ComparisonBox.tsx           | 38 ++++++++++++----------
 src/client/views/nodes/DocumentView.tsx            |  3 ++
 .../views/nodes/formattedText/FormattedTextBox.tsx |  2 --
 5 files changed, 37 insertions(+), 21 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2d2f5fe4a..f334e958a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -265,6 +265,7 @@ export class DocumentOptions {
     _layout_fitContentsToBox?: BOOLt = new BoolInfo('whether a freeformview should zoom/scale to create a shrinkwrapped view of its content');
     _layout_fieldKey?: STRt = new StrInfo('the field key containing the current layout definition', false);
     _layout_enableAltContentUI?: BOOLt = new BoolInfo('whether to show alternate content button');
+    _layout_isFlashcard?: BOOLt = new BoolInfo('whether comparison node should be displayed as a flashcard');
     _layout_showTitle?: string; // field name to display in header (:hover is an optional suffix)
     _layout_showSidebar?: BOOLt = new BoolInfo('whether an annotationsidebar should be displayed for text docuemnts');
     _layout_showCaption?: string; // which field to display in the caption area.  leave empty to have no caption
@@ -728,7 +729,16 @@ export namespace Docs {
                 {
                     data: '',
                     layout: { view: ComparisonBox, dataField: defaultDataKey },
-                    options: { backgroundColor: 'gray', dropAction: 'move', waitForDoubleClickToClick: 'always', layout_reflowHorizontal: true, layout_reflowVertical: true, layout_nativeDimEditable: true, systemIcon: 'BsLayoutSplit' },
+                    options: {
+                        _layout_isFlashcard: false,
+                        backgroundColor: 'gray',
+                        dropAction: 'move',
+                        waitForDoubleClickToClick: 'always',
+                        layout_reflowHorizontal: true,
+                        layout_reflowVertical: true,
+                        layout_nativeDimEditable: true,
+                        systemIcon: 'BsLayoutSplit',
+                    },
                 },
             ],
             [
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 714e33d25..95e7841bf 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -241,7 +241,8 @@ export class CurrentUserUtils {
                           creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
-            {key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
+            {key: "Flashcard", creator: Docs.Create.ComparisonDocument,                    opts: { _layout_isFlashcard: true, _width: 300, _height: 300 }},
+            //{key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
             {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts),      opts: { _width: 300, _height: 300, }},
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 116dc48a6..bdf92038f 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -206,24 +206,28 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             );
         };
 
-        return (
-            <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
-                {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
-                <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
-                    {displayBox(`${this.fieldKey}_1`, 0, 0)}
-                </div>
+        if (this.Document._layout_isFlashcard) {
+            return <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>{displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}</div>;
+        } else {
+            return (
+                <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
+                    {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
+                    <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
+                        {displayBox(`${this.fieldKey}_1`, 0, 0)}
+                    </div>
 
-                <div
-                    className="slide-bar"
-                    style={{
-                        left: `calc(${this.clipWidth + '%'} - 0.5px)`,
-                        cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
-                    }}
-                    onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
-                >
-                    <div className="slide-handle" />
+                    <div
+                        className="slide-bar"
+                        style={{
+                            left: `calc(${this.clipWidth + '%'} - 0.5px)`,
+                            cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
+                        }}
+                        onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
+                    >
+                        <div className="slide-handle" />
+                    </div>
                 </div>
-            </div>
-        );
+            );
+        }
     }
 }
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index ed5d31664..7e86125e5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -569,6 +569,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.Document), icon: 'external-link-alt' });
             }
             appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'eye' });
+
+            // if(this.layoutDoc.)
+            appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'eye' });
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
             !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' });
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 0193cdbfc..61d6094b9 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -931,8 +931,6 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
                 event: () => (this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usepath === 'alternate' || usepath === undefined ? 'alternate:hover' : undefined),
                 icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
             });
-            // if (usepath === undefined || usepath === 'alternate') usepath = 'alternate: hover'
-            // if (usepath === 'alternate:hover') usepath = undefined;
         }
 
         !Doc.noviceMode && appearanceItems.push({ description: 'Show Highlights...', noexpand: true, subitems: highlighting, icon: 'hand-point-right' });
-- 
cgit v1.2.3-70-g09d2


From ed5a7755eba7563c01bc3cc40840d0ebb6cd8826 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Wed, 6 Mar 2024 19:46:09 -0500
Subject: add diagram document

---
 package-lock.json                               | 684 +++++++++++++++++++++++-
 package.json                                    |   1 +
 src/.DS_Store                                   | Bin 10244 -> 10244 bytes
 src/client/documents/DocumentTypes.ts           |   1 +
 src/client/documents/Documents.ts               |  12 +-
 src/client/util/CurrentUserUtils.ts             |   7 +-
 src/client/views/nodes/DiagramBox.tsx           |  86 +++
 src/client/views/nodes/DocumentContentsView.tsx |   2 +
 8 files changed, 788 insertions(+), 5 deletions(-)
 create mode 100644 src/client/views/nodes/DiagramBox.tsx

(limited to 'src/client/util')

diff --git a/package-lock.json b/package-lock.json
index 1f1c994c3..4cc6d8d2a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -128,6 +128,7 @@
                 "mathquill": "^0.10.1-a",
                 "md5-file": "^5.0.0",
                 "memorystream": "^0.3.1",
+                "mermaid": "^10.8.0",
                 "mobile-detect": "^1.4.5",
                 "mobx": "^6.12.0",
                 "mobx-react": "^9.1.0",
@@ -2224,6 +2225,11 @@
                 "node": ">=6.9.0"
             }
         },
+        "node_modules/@braintree/sanitize-url": {
+            "version": "6.0.4",
+            "resolved": "https://registry.npmjs.org/@braintree/sanitize-url/-/sanitize-url-6.0.4.tgz",
+            "integrity": "sha512-s3jaWicZd0pkP0jf5ysyHUI/RE7MHos6qlToFcGWXVp+ykHOy77OUMrfbgJ9it2C5bow7OIQwYYaHjk9XlBQ2A=="
+        },
         "node_modules/@bundled-es-modules/pdfjs-dist": {
             "version": "3.6.172-alpha.1",
             "resolved": "https://registry.npmjs.org/@bundled-es-modules/pdfjs-dist/-/pdfjs-dist-3.6.172-alpha.1.tgz",
@@ -8784,8 +8790,7 @@
         "node_modules/@types/d3-scale-chromatic": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz",
-            "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==",
-            "dev": true
+            "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw=="
         },
         "node_modules/@types/d3-selection": {
             "version": "3.0.10",
@@ -14803,6 +14808,14 @@
                 "node": ">= 0.10"
             }
         },
+        "node_modules/cose-base": {
+            "version": "1.0.3",
+            "resolved": "https://registry.npmjs.org/cose-base/-/cose-base-1.0.3.tgz",
+            "integrity": "sha512-s9whTXInMSgAp/NVXVNuVxVKzGH2qck3aQlVHxDCdAEPgtMKwc4Wq6/QKhgdEdgbLSi9rBTAcPoRa6JpiG4ksg==",
+            "dependencies": {
+                "layout-base": "^1.0.0"
+            }
+        },
         "node_modules/cosmiconfig": {
             "version": "7.1.0",
             "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
@@ -15107,6 +15120,29 @@
             "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
             "integrity": "sha512-GAj5FOq0Hd+RsCGVJxZuKaIDXDf3h6GQoNEjFgbLLI/trgtavwUbSnZ5pVfg27DVCaWjIohryS0JFwIJyT2cMg=="
         },
+        "node_modules/cytoscape": {
+            "version": "3.28.1",
+            "resolved": "https://registry.npmjs.org/cytoscape/-/cytoscape-3.28.1.tgz",
+            "integrity": "sha512-xyItz4O/4zp9/239wCcH8ZcFuuZooEeF8KHRmzjDfGdXsj3OG9MFSMA0pJE0uX3uCN/ygof6hHf4L7lst+JaDg==",
+            "dependencies": {
+                "heap": "^0.2.6",
+                "lodash": "^4.17.21"
+            },
+            "engines": {
+                "node": ">=0.10"
+            }
+        },
+        "node_modules/cytoscape-cose-bilkent": {
+            "version": "4.1.0",
+            "resolved": "https://registry.npmjs.org/cytoscape-cose-bilkent/-/cytoscape-cose-bilkent-4.1.0.tgz",
+            "integrity": "sha512-wgQlVIUJF13Quxiv5e1gstZ08rnZj2XaLHGoFMYXz7SkNfCDOOteKBE6SYRfA9WxxI/iBc3ajfDoc6hb/MRAHQ==",
+            "dependencies": {
+                "cose-base": "^1.0.0"
+            },
+            "peerDependencies": {
+                "cytoscape": "^3.2.0"
+            }
+        },
         "node_modules/D": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/D/-/D-1.0.0.tgz",
@@ -15387,6 +15423,41 @@
                 "node": ">=12"
             }
         },
+        "node_modules/d3-sankey": {
+            "version": "0.12.3",
+            "resolved": "https://registry.npmjs.org/d3-sankey/-/d3-sankey-0.12.3.tgz",
+            "integrity": "sha512-nQhsBRmM19Ax5xEIPLMY9ZmJ/cDvd1BG3UVvt5h3WRxKg5zGRbvnteTyWAbzeSvlh3tW7ZEmq4VwR5mB3tutmQ==",
+            "dependencies": {
+                "d3-array": "1 - 2",
+                "d3-shape": "^1.2.0"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/d3-array": {
+            "version": "2.12.1",
+            "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz",
+            "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==",
+            "dependencies": {
+                "internmap": "^1.0.0"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/d3-path": {
+            "version": "1.0.9",
+            "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+            "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+        },
+        "node_modules/d3-sankey/node_modules/d3-shape": {
+            "version": "1.3.7",
+            "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz",
+            "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==",
+            "dependencies": {
+                "d3-path": "1"
+            }
+        },
+        "node_modules/d3-sankey/node_modules/internmap": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz",
+            "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw=="
+        },
         "node_modules/d3-scale": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
@@ -15512,6 +15583,15 @@
                 "node": ">=12"
             }
         },
+        "node_modules/dagre-d3-es": {
+            "version": "7.0.10",
+            "resolved": "https://registry.npmjs.org/dagre-d3-es/-/dagre-d3-es-7.0.10.tgz",
+            "integrity": "sha512-qTCQmEhcynucuaZgY5/+ti3X/rnszKZhEQH/ZdWdtP1tA/y3VoHJzcVrO9pjjJCNpigfscAtoUB5ONcd2wNn0A==",
+            "dependencies": {
+                "d3": "^7.8.2",
+                "lodash-es": "^4.17.21"
+            }
+        },
         "node_modules/damerau-levenshtein": {
             "version": "1.0.8",
             "resolved": "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz",
@@ -15566,6 +15646,11 @@
                 "url": "https://opencollective.com/date-fns"
             }
         },
+        "node_modules/dayjs": {
+            "version": "1.11.10",
+            "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
+            "integrity": "sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ=="
+        },
         "node_modules/debug": {
             "version": "4.3.4",
             "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -15928,7 +16013,6 @@
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/diff/-/diff-5.0.0.tgz",
             "integrity": "sha512-/VTCrvm5Z0JGty/BWHljh+BAiw3IK+2j87NGMu8Nwc/f48WoDAC395uomO9ZD117ZOBaHmkX1oyLvkVM/aIT3w==",
-            "dev": true,
             "engines": {
                 "node": ">=0.3.1"
             }
@@ -16031,6 +16115,11 @@
                 "url": "https://github.com/fb55/domhandler?sponsor=1"
             }
         },
+        "node_modules/dompurify": {
+            "version": "3.0.9",
+            "resolved": "https://registry.npmjs.org/dompurify/-/dompurify-3.0.9.tgz",
+            "integrity": "sha512-uyb4NDIvQ3hRn6NiC+SIFaP4mJ/MdXlvtunaqK9Bn6dD3RuB/1S/gasEjDHD8eiaqdSael2vBv+hOs7Y+jhYOQ=="
+        },
         "node_modules/domutils": {
             "version": "3.1.0",
             "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz",
@@ -16116,6 +16205,11 @@
             "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.670.tgz",
             "integrity": "sha512-hcijYOWjOtjKrKPtNA6tuLlA/bTLO3heFG8pQA6mLpq7dRydSWicXova5lyxDzp1iVJaYhK7J2OQlGE52KYn7A=="
         },
+        "node_modules/elkjs": {
+            "version": "0.9.2",
+            "resolved": "https://registry.npmjs.org/elkjs/-/elkjs-0.9.2.tgz",
+            "integrity": "sha512-2Y/RaA1pdgSHpY0YG4TYuYCD2wh97CRvu22eLG3Kz0pgQ/6KbIFTxsTnDc4MH/6hFlg2L/9qXrDMG0nMjP63iw=="
+        },
         "node_modules/emoji-regex": {
             "version": "9.2.2",
             "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-9.2.2.tgz",
@@ -19980,6 +20074,11 @@
                 "he": "bin/he"
             }
         },
+        "node_modules/heap": {
+            "version": "0.2.7",
+            "resolved": "https://registry.npmjs.org/heap/-/heap-0.2.7.tgz",
+            "integrity": "sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg=="
+        },
         "node_modules/hexoid": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/hexoid/-/hexoid-1.0.0.tgz",
@@ -22098,6 +22197,11 @@
                 "json-buffer": "3.0.1"
             }
         },
+        "node_modules/khroma": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/khroma/-/khroma-2.1.0.tgz",
+            "integrity": "sha512-Ls993zuzfayK269Svk9hzpeGUKob/sIgZzyHYdjQoAdQetRKpOLj+k/QQQ/6Qi0Yz65mlROrfd+Ev+1+7dz9Kw=="
+        },
         "node_modules/kind-of": {
             "version": "6.0.3",
             "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
@@ -22114,6 +22218,14 @@
                 "graceful-fs": "^4.1.9"
             }
         },
+        "node_modules/kleur": {
+            "version": "4.1.5",
+            "resolved": "https://registry.npmjs.org/kleur/-/kleur-4.1.5.tgz",
+            "integrity": "sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/kruptein": {
             "version": "3.0.6",
             "resolved": "https://registry.npmjs.org/kruptein/-/kruptein-3.0.6.tgz",
@@ -22204,6 +22316,11 @@
                 "shell-quote": "^1.8.1"
             }
         },
+        "node_modules/layout-base": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/layout-base/-/layout-base-1.0.2.tgz",
+            "integrity": "sha512-8h2oVEZNktL4BH2JCOI90iD1yXwL6iNW7KcCKT2QZgQJR2vbqDsldCTPRU9NifTCqHZci57XvQQ15YTu+sTYPg=="
+        },
         "node_modules/lazystream": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.1.tgz",
@@ -23033,6 +23150,513 @@
             "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
             "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w=="
         },
+        "node_modules/mermaid": {
+            "version": "10.8.0",
+            "resolved": "https://registry.npmjs.org/mermaid/-/mermaid-10.8.0.tgz",
+            "integrity": "sha512-9CzfSreRjdDJxX796+jW4zjEq0DVw5xVF0nWsqff8OTbrt+ml0TZ5PyYUjjUZJa2NYxYJZZXewEquxGiM8qZEA==",
+            "dependencies": {
+                "@braintree/sanitize-url": "^6.0.1",
+                "@types/d3-scale": "^4.0.3",
+                "@types/d3-scale-chromatic": "^3.0.0",
+                "cytoscape": "^3.28.1",
+                "cytoscape-cose-bilkent": "^4.1.0",
+                "d3": "^7.4.0",
+                "d3-sankey": "^0.12.3",
+                "dagre-d3-es": "7.0.10",
+                "dayjs": "^1.11.7",
+                "dompurify": "^3.0.5",
+                "elkjs": "^0.9.0",
+                "khroma": "^2.0.0",
+                "lodash-es": "^4.17.21",
+                "mdast-util-from-markdown": "^1.3.0",
+                "non-layered-tidy-tree-layout": "^2.0.2",
+                "stylis": "^4.1.3",
+                "ts-dedent": "^2.2.0",
+                "uuid": "^9.0.0",
+                "web-worker": "^1.2.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/@types/mdast": {
+            "version": "3.0.15",
+            "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz",
+            "integrity": "sha512-LnwD+mUEfxWMa1QpDraczIn6k0Ee3SMicuYSSzS6ZYl2gKS09EClnJYGd8Du6rfc5r/GZEk5o1mRb8TaTj03sQ==",
+            "dependencies": {
+                "@types/unist": "^2"
+            }
+        },
+        "node_modules/mermaid/node_modules/@types/unist": {
+            "version": "2.0.10",
+            "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",
+            "integrity": "sha512-IfYcSBWE3hLpBg8+X2SEa8LVkJdJEkT2Ese2aaLs3ptGdVtABxndrMaxuFlQ1qdFf9Q5rDvDpxI3WwgvKFAsQA=="
+        },
+        "node_modules/mermaid/node_modules/mdast-util-from-markdown": {
+            "version": "1.3.1",
+            "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-1.3.1.tgz",
+            "integrity": "sha512-4xTO/M8c82qBcnQc1tgpNtubGUW/Y1tBQ1B0i5CtSoelOLKFYlElIr3bvgREYYO5iRqbMY1YuqZng0GVOI8Qww==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0",
+                "@types/unist": "^2.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "mdast-util-to-string": "^3.1.0",
+                "micromark": "^3.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-decode-string": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "unist-util-stringify-position": "^3.0.0",
+                "uvu": "^0.5.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mermaid/node_modules/mdast-util-to-string": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-3.2.0.tgz",
+            "integrity": "sha512-V4Zn/ncyN1QNSqSBxTrMOLpjr+IKdHl2v3KVLoWmDPscP4r9GcCi71gjgvUV1SFSKh92AjAG4peFuBl2/YgCJg==",
+            "dependencies": {
+                "@types/mdast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark": {
+            "version": "3.2.0",
+            "resolved": "https://registry.npmjs.org/micromark/-/micromark-3.2.0.tgz",
+            "integrity": "sha512-uD66tJj54JLYq0De10AhWycZWGQNUvDI55xPgk2sQM5kn1JYlhbCMTtEeT27+vAhW2FBQxLlOmS3pmA7/2z4aA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "@types/debug": "^4.0.0",
+                "debug": "^4.0.0",
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-core-commonmark": "^1.0.1",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-combine-extensions": "^1.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-sanitize-uri": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-core-commonmark": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-1.1.0.tgz",
+            "integrity": "sha512-BgHO1aRbolh2hcrzL2d1La37V0Aoz73ymF8rAcKnohLy93titmv62E0gP8Hrx9PKcKrqCZ1BbLGbP3bEhoXYlw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-factory-destination": "^1.0.0",
+                "micromark-factory-label": "^1.0.0",
+                "micromark-factory-space": "^1.0.0",
+                "micromark-factory-title": "^1.0.0",
+                "micromark-factory-whitespace": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-classify-character": "^1.0.0",
+                "micromark-util-html-tag-name": "^1.0.0",
+                "micromark-util-normalize-identifier": "^1.0.0",
+                "micromark-util-resolve-all": "^1.0.0",
+                "micromark-util-subtokenize": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.1",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-factory-destination": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-1.1.0.tgz",
+            "integrity": "sha512-XaNDROBgx9SgSChd69pjiGKbV+nfHGDPVYFs5dOoDd7ZnMAE+Cuu91BCpsY8RT2NP9vo/B8pds2VQNCLiu0zhg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-factory-label": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-1.1.0.tgz",
+            "integrity": "sha512-OLtyez4vZo/1NjxGhcpDSbHQ+m0IIGnT8BoPamh+7jVlzLJBH98zzuCoUeMxvM6WsNeh8wx8cKvqLiPHEACn0w==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-factory-space": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-1.1.0.tgz",
+            "integrity": "sha512-cRzEj7c0OL4Mw2v6nwzttyOZe8XY/Z8G0rzmWQZTBi/jjwyw/U4uqKtUORXQrR5bAZZnbTI/feRV/R7hc4jQYQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-factory-title": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-1.1.0.tgz",
+            "integrity": "sha512-J7n9R3vMmgjDOCY8NPw55jiyaQnH5kBdV2/UXCtZIpnHH3P6nHUKaH7XXEYuWwx/xUJcawa8plLBEjMPU24HzQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-factory-whitespace": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-1.1.0.tgz",
+            "integrity": "sha512-v2WlmiymVSp5oMg+1Q0N1Lxmt6pMhIHD457whWM7/GUlEks1hI9xj5w3zbc4uuMKXGisksZk8DzP2UyGbGqNsQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-factory-space": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-character": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-1.2.0.tgz",
+            "integrity": "sha512-lXraTwcX3yH/vMDaFWCQJP1uIszLVebzUa3ZHdrgxr7KEU/9mL4mVgCpGbyhvNLNlauROiNUq7WN5u7ndbY6xg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-chunked": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-1.1.0.tgz",
+            "integrity": "sha512-Ye01HXpkZPNcV6FiyoW2fGZDUw4Yc7vT0E9Sad83+bEDiCJ1uXu0S3mr8WLpsz3HaG3x2q0HM6CTuPdcZcluFQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-classify-character": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-1.1.0.tgz",
+            "integrity": "sha512-SL0wLxtKSnklKSUplok1WQFoGhUdWYKggKUiqhX+Swala+BtptGCu5iPRc+xvzJ4PXE/hwM3FNXsfEVgoZsWbw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-combine-extensions": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-1.1.0.tgz",
+            "integrity": "sha512-Q20sp4mfNf9yEqDL50WwuWZHUrCO4fEyeDCnMGmG5Pr0Cz15Uo7KBs6jq+dq0EgX4DPwwrh9m0X+zPV1ypFvUA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-decode-numeric-character-reference": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-1.1.0.tgz",
+            "integrity": "sha512-m9V0ExGv0jB1OT21mrWcuf4QhP46pH1KkfWy9ZEezqHKAxkj4mPCy3nIH1rkbdMlChLHX531eOrymlwyZIf2iw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-decode-string": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-1.1.0.tgz",
+            "integrity": "sha512-YphLGCK8gM1tG1bd54azwyrQRjCFcmgj2S2GoJDNnh4vYtnL38JS8M4gpxzOPNyHdNEpheyWXCTnnTDY3N+NVQ==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "decode-named-character-reference": "^1.0.0",
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-decode-numeric-character-reference": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-encode": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-1.1.0.tgz",
+            "integrity": "sha512-EuEzTWSTAj9PA5GOAs992GzNh2dGQO52UvAbtSOMvXTxv3Criqb6IOzJUBCmEqrrXSblJIJBbFFv6zPxpreiJw==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/mermaid/node_modules/micromark-util-html-tag-name": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-1.2.0.tgz",
+            "integrity": "sha512-VTQzcuQgFUD7yYztuQFKXT49KghjtETQ+Wv/zUjGSGBioZnkA4P1XXZPT1FHeJA6RwRXSF47yvJ1tsJdoxwO+Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/mermaid/node_modules/micromark-util-normalize-identifier": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-1.1.0.tgz",
+            "integrity": "sha512-N+w5vhqrBihhjdpM8+5Xsxy71QWqGn7HYNUvch71iV2PM7+E3uWGox1Qp90loa1ephtCxG2ftRV/Conitc6P2Q==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-resolve-all": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-1.1.0.tgz",
+            "integrity": "sha512-b/G6BTMSg+bX+xVCshPTPyAu2tmA0E4X98NSR7eIbeC6ycCqCeE7wjfDIgzEbkzdEVJXRtOG4FbEm/uGbCRouA==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-types": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-sanitize-uri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-1.2.0.tgz",
+            "integrity": "sha512-QO4GXv0XZfWey4pYFndLUKEAktKkG5kZTdUNaTAkzbuJxn2tNBOr+QtxR2XpWaMhbImT2dPzyLrPXLlPhph34A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-character": "^1.0.0",
+                "micromark-util-encode": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-subtokenize": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-1.1.0.tgz",
+            "integrity": "sha512-kUQHyzRoxvZO2PuLzMt2P/dwVsTiivCK8icYTeR+3WgbuPqfHgPPy7nFKbeqRivBvn/3N3GBiNC+JRTMSxEC7A==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ],
+            "dependencies": {
+                "micromark-util-chunked": "^1.0.0",
+                "micromark-util-symbol": "^1.0.0",
+                "micromark-util-types": "^1.0.0",
+                "uvu": "^0.5.0"
+            }
+        },
+        "node_modules/mermaid/node_modules/micromark-util-symbol": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-1.1.0.tgz",
+            "integrity": "sha512-uEjpEYY6KMs1g7QfJ2eX1SQEV+ZT4rUD3UcF6l57acZvLNK7PBZL+ty82Z1qhK1/yXIY4bdx04FKMgR0g4IAag==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/mermaid/node_modules/micromark-util-types": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-1.1.0.tgz",
+            "integrity": "sha512-ukRBgie8TIAcacscVHSiddHjO4k/q3pnedmzMQ4iwDcK0FtFCohKOlFbaOL/mPgfnPsL3C1ZyxJa4sbWrBl3jg==",
+            "funding": [
+                {
+                    "type": "GitHub Sponsors",
+                    "url": "https://github.com/sponsors/unifiedjs"
+                },
+                {
+                    "type": "OpenCollective",
+                    "url": "https://opencollective.com/unified"
+                }
+            ]
+        },
+        "node_modules/mermaid/node_modules/unist-util-stringify-position": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-3.0.3.tgz",
+            "integrity": "sha512-k5GzIBZ/QatR8N5X2y+drfpWG8IDBzdnVj6OInRNWm1oXrzydiaAT2OQiA8DPRRZyAKb9b6I2a6PxYklZD0gKg==",
+            "dependencies": {
+                "@types/unist": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/methods": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
@@ -24060,6 +24684,14 @@
             "resolved": "https://registry.npmjs.org/mr-parser/-/mr-parser-0.2.1.tgz",
             "integrity": "sha512-hug+mpbSSKnH13rFqy3zm+XiG+QTStiDAgMTHK355TIstQE0qBkBtSJsa5YHP94AuarVX9b/4dcebdTRZ9YiEw=="
         },
+        "node_modules/mri": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/mri/-/mri-1.2.0.tgz",
+            "integrity": "sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==",
+            "engines": {
+                "node": ">=4"
+            }
+        },
         "node_modules/ms": {
             "version": "2.1.2",
             "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -24405,6 +25037,11 @@
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
+        "node_modules/non-layered-tidy-tree-layout": {
+            "version": "2.0.2",
+            "resolved": "https://registry.npmjs.org/non-layered-tidy-tree-layout/-/non-layered-tidy-tree-layout-2.0.2.tgz",
+            "integrity": "sha512-gkXMxRzUH+PB0ax9dUN0yYF0S25BqeAYqhgMaLUFmpXLEk7Fcu8f4emJuOAY0V8kjDICxROIKsTAKsV/v355xw=="
+        },
         "node_modules/nopt": {
             "version": "5.0.0",
             "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
@@ -29955,6 +30592,17 @@
             "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
             "dev": true
         },
+        "node_modules/sade": {
+            "version": "1.8.1",
+            "resolved": "https://registry.npmjs.org/sade/-/sade-1.8.1.tgz",
+            "integrity": "sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==",
+            "dependencies": {
+                "mri": "^1.1.0"
+            },
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/safe-array-concat": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/safe-array-concat/-/safe-array-concat-1.1.0.tgz",
@@ -31878,6 +32526,14 @@
             "resolved": "https://registry.npmjs.org/tryit/-/tryit-1.0.3.tgz",
             "integrity": "sha512-6C5h3CE+0qjGp+YKYTs74xR0k/Nw/ePtl/Lp6CCf44hqBQ66qnH1sDFR5mV/Gc48EsrHLB53lCFSffQCkka3kg=="
         },
+        "node_modules/ts-dedent": {
+            "version": "2.2.0",
+            "resolved": "https://registry.npmjs.org/ts-dedent/-/ts-dedent-2.2.0.tgz",
+            "integrity": "sha512-q5W7tVM71e2xjHZTlgfTDoPF/SmqKG5hddq9SzR49CH2hayqRKJtQ4mtRlSxKaJlR/+9rEM+mnBHf7I2/BQcpQ==",
+            "engines": {
+                "node": ">=6.10"
+            }
+        },
         "node_modules/ts-loader": {
             "version": "9.5.1",
             "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.5.1.tgz",
@@ -33044,6 +33700,23 @@
                 "uuid": "dist/bin/uuid"
             }
         },
+        "node_modules/uvu": {
+            "version": "0.5.6",
+            "resolved": "https://registry.npmjs.org/uvu/-/uvu-0.5.6.tgz",
+            "integrity": "sha512-+g8ENReyr8YsOc6fv/NVJs2vFdHBnBNdfE49rshrTzDWOlUx4Gq7KOS2GD8eqhy2j+Ejq29+SbKH8yjkAqXqoA==",
+            "dependencies": {
+                "dequal": "^2.0.0",
+                "diff": "^5.0.0",
+                "kleur": "^4.0.3",
+                "sade": "^1.7.3"
+            },
+            "bin": {
+                "uvu": "bin.js"
+            },
+            "engines": {
+                "node": ">=8"
+            }
+        },
         "node_modules/v8-compile-cache": {
             "version": "2.4.0",
             "resolved": "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.4.0.tgz",
@@ -33240,6 +33913,11 @@
                 "node": ">= 8"
             }
         },
+        "node_modules/web-worker": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
+            "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
+        },
         "node_modules/webidl-conversions": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-7.0.0.tgz",
diff --git a/package.json b/package.json
index b27d50d54..cbe32d9ca 100644
--- a/package.json
+++ b/package.json
@@ -211,6 +211,7 @@
         "mathquill": "^0.10.1-a",
         "md5-file": "^5.0.0",
         "memorystream": "^0.3.1",
+        "mermaid": "^10.8.0",
         "mobile-detect": "^1.4.5",
         "mobx": "^6.12.0",
         "mobx-react": "^9.1.0",
diff --git a/src/.DS_Store b/src/.DS_Store
index bb607fbc3..e1d584ba0 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 1123bcac9..570d2e9c8 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -12,6 +12,7 @@ export enum DocumentType {
     REC = 'recording',
     PDF = 'pdf',
     INK = 'ink',
+    DIAGRAM='diagram',
     SCREENSHOT = 'screenshot',
     FONTICON = 'fonticonbox',
     SEARCH = 'search', // search query
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2d2f5fe4a..ade5e718c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -55,6 +55,7 @@ import { TaskCompletionBox } from '../views/nodes/TaskCompletedBox';
 import { PresBox } from '../views/nodes/trails/PresBox';
 import { PresElementBox } from '../views/nodes/trails/PresElementBox';
 import { VideoBox } from '../views/nodes/VideoBox';
+import { DiagramBox } from '../views/nodes/DiagramBox';
 import { WebBox } from '../views/nodes/WebBox';
 import { SearchBox } from '../views/search/SearchBox';
 import { CollectionViewType, DocumentType } from './DocumentTypes';
@@ -658,6 +659,13 @@ export namespace Docs {
                     },
                 },
             ],
+            [
+                DocumentType.DIAGRAM,
+                {
+                    layout: { view: DiagramBox, dataField: defaultDataKey },
+                    options: { _height: 300, _layout_fitWidth: true, layout_nativeDimEditable: true, layout_reflowVertical: true, waitForDoubleClickToClick: 'always', systemIcon: 'BsGlobe' },
+                },
+            ],
             [
                 DocumentType.BUTTON,
                 {
@@ -1025,7 +1033,9 @@ export namespace Docs {
         export function ComparisonDocument(options: DocumentOptions = { title: 'Comparison Box' }) {
             return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), undefined, options);
         }
-
+        export function DiagramDocument(options: DocumentOptions = { title: 'bruh box' }) {
+            return InstanceFromProto(Prototypes.get(DocumentType.DIAGRAM), undefined, options);
+        }
         export function AudioDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
             return InstanceFromProto(Prototypes.get(DocumentType.AUDIO), new AudioField(url), options, undefined, undefined, undefined, overwriteDoc);
         }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index d61a40ffa..8275ec6b8 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -248,6 +248,7 @@ export class CurrentUserUtils {
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
             {key: "Webpage",    creator: opts => Docs.Create.WebDocument("",opts),          opts: { _width: 400, _height: 512, _nativeWidth: 850, data_useCors: true, }},
             {key: "Comparison", creator: Docs.Create.ComparisonDocument,                    opts: { _width: 300, _height: 300 }},
+            {key: "Diagram",   creator: Docs.Create.DiagramDocument,                    opts: { _width: 300, _height: 300 }},
             {key: "Audio",      creator: opts => Docs.Create.AudioDocument(nullAudio, opts),opts: { _width: 200, _height: 100, }},
             {key: "Map",        creator: opts => Docs.Create.MapDocument([], opts),         opts: { _width: 800, _height: 600, _layout_fitWidth: true, }},
             {key: "Screengrab", creator: Docs.Create.ScreenshotDocument,                    opts: { _width: 400, _height: 200 }},
@@ -266,7 +267,10 @@ export class CurrentUserUtils {
                                                                                             }, funcs: {title: 'this.text?.Text'}},
             ];
 
-        emptyThings.forEach(thing => DocUtils.AssignDocField(doc, "empty"+thing.key, (opts) => thing.creator(opts), {...standardOps(thing.key), ...thing.opts}, undefined, thing.scripts, thing.funcs));
+        emptyThings.forEach(
+            thing =>{ DocUtils.AssignDocField(doc, "empty"+thing.key, (opts) => thing.creator(opts), {...standardOps(thing.key), ...thing.opts}, undefined, thing.scripts, thing.funcs);
+            console.log(thing.key)
+        });
         
         return [
             { toolTip: "Tap or drag to create a note",            title: "Note", icon: "sticky-note",   dragFactory: doc.emptyNote as Doc,       clickFactory: DocCast(doc.emptyNote)},
@@ -277,6 +281,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a collection",      title: "Col", icon: "folder",         dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)},
             { toolTip: "Tap or drag to create a webpage",         title: "Web", icon: "globe-asia",     dragFactory: doc.emptyWebpage as Doc,    clickFactory: DocCast(doc.emptyWebpage)},
             { toolTip: "Tap or drag to create a comparison box",  title: "Compare", icon: "columns",    dragFactory: doc.emptyComparison as Doc, clickFactory: DocCast(doc.emptyComparison)},
+            { toolTip: "Tap or drag to create a diagram",      title: "Diagram", icon: "circle",        dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)},
             { toolTip: "Tap or drag to create an audio recorder", title: "Audio", icon: "microphone",   dragFactory: doc.emptyAudio as Doc,      clickFactory: DocCast(doc.emptyAudio),      openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a map",             title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc,        clickFactory: DocCast(doc.emptyMap)},
             { toolTip: "Tap or drag to create a screen grabber",  title: "Grab", icon: "photo-video",   dragFactory: doc.emptyScreengrab as Doc, clickFactory: DocCast(doc.emptyScreengrab), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
new file mode 100644
index 000000000..e2af0b670
--- /dev/null
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -0,0 +1,86 @@
+import { action, computed, makeObservable, observable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
+import { Doc, Opt } from '../../../fields/Doc';
+import { DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { Docs } from '../../documents/Documents';
+import { DragManager } from '../../util/DragManager';
+import { undoBatch } from '../../util/UndoManager';
+import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
+import { StyleProp } from '../StyleProvider';
+import './ComparisonBox.scss';
+import { FieldView, FieldViewProps } from './FieldView';
+import { PinProps, PresBox } from './trails';
+import mermaid from 'mermaid';
+
+interface MermaidProps {
+    chart: String; 
+  }
+
+class Mermaid extends React.Component<MermaidProps> {
+    componentDidMount() {
+      mermaid.contentLoaded();
+    }
+    render() {
+      return <div className="mermaid">{this.props.chart}</div>;
+    }
+  }
+
+@observer
+export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
+    
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(DiagramBox, fieldKey);
+    }
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        mermaid.initialize({ startOnLoad: true });
+    }
+
+    @observable _animating = '';
+
+    @computed get clipWidth() {
+        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
+    }
+    get clipWidthKey() {
+        return '_' + this._props.fieldKey + '_clipWidth';
+    }
+ 
+    componentDidMount() {
+        this._props.setContentViewBox?.(this);
+    }
+    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
+        const anchor = Docs.Create.ConfigDocument({
+            title: 'CompareAnchor:' + this.Document.title,
+            // set presentation timing properties for restoring view
+            presentation_transition: 1000,
+            annotationOn: this.Document,
+        });
+        if (anchor) {
+            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
+            /* addAsAnnotation &&*/ this.addDocument(anchor);
+            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document);
+            return anchor;
+        }
+        return this.Document;
+    };
+    docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
+        if (property === StyleProp.PointerEvents) return 'none';
+        return this._props.styleProvider?.(doc, props, property);
+    };
+    _closeRef = React.createRef<HTMLDivElement>();
+    render() {
+        return (
+            <div>
+                <Mermaid chart={`
+                    graph LR;
+                    A-->B;
+                    B-->C;
+                    B-->D[hi];  
+                    `}/>
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 07e179246..040c8364d 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -23,6 +23,7 @@ import { DashWebRTCVideo } from '../webcam/DashWebRTCVideo';
 import { YoutubeBox } from './../../apis/youtube/YoutubeBox';
 import { AudioBox } from './AudioBox';
 import { ComparisonBox } from './ComparisonBox';
+import { DiagramBox } from './DiagramBox';
 import { DataVizBox } from './DataVizBox/DataVizBox';
 import './DocumentView.scss';
 import { EquationBox } from './EquationBox';
@@ -263,6 +264,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
                     DataVizBox,
                     HTMLtag,
                     ComparisonBox,
+                    DiagramBox,
                     LoadingBox,
                     PhysicsSimulationBox,
                     SchemaRowBox,
-- 
cgit v1.2.3-70-g09d2


From ec89fe170a810c0a83b9347ec9f024e0ff9c2568 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Sun, 10 Mar 2024 13:10:43 -0400
Subject: test

---
 src/client/documents/Documents.ts     |  1 +
 src/client/util/CurrentUserUtils.ts   |  5 +-
 src/client/views/nodes/DiagramBox.tsx | 88 ++++++++++++++++-------------------
 3 files changed, 45 insertions(+), 49 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index ade5e718c..a6e229ba7 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -252,6 +252,7 @@ export class DocumentOptions {
     layout_hideLinkButton?: BOOLt = new BoolInfo('whether the blue link counter button should be hidden');
     layout_hideDecorationTitle?: BOOLt = new BoolInfo('whether to suppress the document decortations title when selected');
     _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
+    layout_diagramEditor?: STRt = new StrInfo("specify the JSX string for a diagram editor view")
     layout_borderRounding?: string;
     _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false);
     _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 8275ec6b8..0279ca2c4 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -31,6 +31,7 @@ import { ScriptingGlobals } from "./ScriptingGlobals";
 import { ColorScheme } from "./SettingsManager";
 import { SnappingManager } from "./SnappingManager";
 import { UndoManager } from "./UndoManager";
+import { CollectionView } from "../views/collections/CollectionView";
 
 interface Button {
     // DocumentOptions fields a button can set
@@ -248,7 +249,7 @@ export class CurrentUserUtils {
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
             {key: "Webpage",    creator: opts => Docs.Create.WebDocument("",opts),          opts: { _width: 400, _height: 512, _nativeWidth: 850, data_useCors: true, }},
             {key: "Comparison", creator: Docs.Create.ComparisonDocument,                    opts: { _width: 300, _height: 300 }},
-            {key: "Diagram",   creator: Docs.Create.DiagramDocument,                    opts: { _width: 300, _height: 300 }},
+            {key: "Diagram",    creator: Docs.Create.DiagramDocument,                       opts: { _width: 300, _height: 300, _type_collection: CollectionViewType.Freeform, layout_diagramEditor: CollectionView.LayoutString("data") }, scripts: { onPaint: `toggleDetail(documentView, "diagramEditor","")`}},
             {key: "Audio",      creator: opts => Docs.Create.AudioDocument(nullAudio, opts),opts: { _width: 200, _height: 100, }},
             {key: "Map",        creator: opts => Docs.Create.MapDocument([], opts),         opts: { _width: 800, _height: 600, _layout_fitWidth: true, }},
             {key: "Screengrab", creator: Docs.Create.ScreenshotDocument,                    opts: { _width: 400, _height: 200 }},
@@ -281,7 +282,7 @@ export class CurrentUserUtils {
             { toolTip: "Tap or drag to create a collection",      title: "Col", icon: "folder",         dragFactory: doc.emptyCollection as Doc, clickFactory: DocCast(doc.emptyTab)},
             { toolTip: "Tap or drag to create a webpage",         title: "Web", icon: "globe-asia",     dragFactory: doc.emptyWebpage as Doc,    clickFactory: DocCast(doc.emptyWebpage)},
             { toolTip: "Tap or drag to create a comparison box",  title: "Compare", icon: "columns",    dragFactory: doc.emptyComparison as Doc, clickFactory: DocCast(doc.emptyComparison)},
-            { toolTip: "Tap or drag to create a diagram",      title: "Diagram", icon: "circle",        dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)},
+            { toolTip: "Tap or drag to create a diagram",      title: "Diagram", icon: "tree",        dragFactory: doc.emptyDiagram as Doc, clickFactory: DocCast(doc.emptyDiagram)},
             { toolTip: "Tap or drag to create an audio recorder", title: "Audio", icon: "microphone",   dragFactory: doc.emptyAudio as Doc,      clickFactory: DocCast(doc.emptyAudio),      openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a map",             title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc,        clickFactory: DocCast(doc.emptyMap)},
             { toolTip: "Tap or drag to create a screen grabber",  title: "Grab", icon: "photo-video",   dragFactory: doc.emptyScreengrab as Doc, clickFactory: DocCast(doc.emptyScreengrab), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index e2af0b670..376dff15d 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,85 +1,79 @@
-import { action, computed, makeObservable, observable } from 'mobx';
+import { makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, setupMoveUpEvents } from '../../../Utils';
-import { Doc, Opt } from '../../../fields/Doc';
-import { DocCast, NumCast, StrCast } from '../../../fields/Types';
-import { Docs } from '../../documents/Documents';
-import { DragManager } from '../../util/DragManager';
-import { undoBatch } from '../../util/UndoManager';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
 import './ComparisonBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
 import mermaid from 'mermaid';
+import { Doc, DocListCast } from '../../../fields/Doc';
+import { List } from '../../../fields/List';
 
 interface MermaidProps {
-    chart: String; 
-  }
+    chart: String;
+}
 
 class Mermaid extends React.Component<MermaidProps> {
     componentDidMount() {
-      mermaid.contentLoaded();
+        mermaid.contentLoaded();
     }
     render() {
-      return <div className="mermaid">{this.props.chart}</div>;
+        return <pre className="mermaid">{this.props.chart}</pre>;
     }
-  }
+}
 
 @observer
 export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
-    
+    @observable chartContent: string = '';
+
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(DiagramBox, fieldKey);
     }
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
-        mermaid.initialize({ startOnLoad: true });
+        //this.createMermaidCode();
+        this.chartContent = 'graph LR;A-->B;B-->C; B-->D[hello];';
     }
 
-    @observable _animating = '';
-
-    @computed get clipWidth() {
-        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
-    }
-    get clipWidthKey() {
-        return '_' + this._props.fieldKey + '_clipWidth';
-    }
- 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
+        mermaid.initialize({ startOnLoad: true });
     }
-    getAnchor = (addAsAnnotation: boolean, pinProps?: PinProps) => {
-        const anchor = Docs.Create.ConfigDocument({
-            title: 'CompareAnchor:' + this.Document.title,
-            // set presentation timing properties for restoring view
-            presentation_transition: 1000,
-            annotationOn: this.Document,
-        });
-        if (anchor) {
-            if (!addAsAnnotation) anchor.backgroundColor = 'transparent';
-            /* addAsAnnotation &&*/ this.addDocument(anchor);
-            PresBox.pinDocView(anchor, { pinDocLayout: pinProps?.pinDocLayout, pinData: { ...(pinProps?.pinData ?? {}), clippable: true } }, this.Document);
-            return anchor;
+    createMermaidCode = (): void => {
+        if (this.Document.data instanceof List) {
+            let docArray: Doc[] = DocListCast(this.Document.data);
+            let mermaidCode = 'graph LR;';
+            docArray.map(doc => {
+                if (doc.title == 'rectangle') {
+                    DocListCast(this.Document.data).map(lineDoc => {
+                        if ((lineDoc.title == 'stroke' || lineDoc.title == 'line') && typeof lineDoc.x === 'number' && typeof doc.x === 'number' && typeof doc.width === 'number'&& typeof doc.height === 'number'&& typeof doc.y === 'number'&& typeof lineDoc.y === 'number') {
+                            if (lineDoc.x < doc.x + doc.width + (doc.width + doc.x) * 0.1 && lineDoc.x > doc.x&&lineDoc.y>doc.y&&lineDoc.y<doc.y+doc.height) {
+                                DocListCast(this.Document.data).map(doc2 => {
+                                    if (doc2.title == 'rectangle' && typeof lineDoc.x === 'number' && typeof lineDoc.width === 'number' && typeof doc2.x === 'number' && typeof doc2.width === 'number'&& typeof doc2.y === 'number'&& typeof doc2.height === 'number'&& typeof lineDoc.y === 'number') {
+                                        if (lineDoc.x + lineDoc.width > doc2.x - (doc2.x - doc2.width) * 0.1 && lineDoc.x + lineDoc.width < doc2.x + doc2.width &&lineDoc.y>doc2.y&&lineDoc.y<doc2.y+doc2.height&& typeof doc.x === 'number' && typeof doc.width === 'number') {
+                                            mermaidCode += doc.title + Math.floor(doc.x).toString() + '-->' + doc2.title + Math.floor(doc2.x).toString() + ';';
+                                            const indexToRemove = docArray.findIndex(doc => doc === lineDoc);
+                                            if (indexToRemove !== -1) {
+                                                docArray.splice(indexToRemove, 1);
+                                            }
+                                        }
+                                    }
+                                });
+                            }
+                        }
+                    });
+                }
+                this.chartContent = mermaidCode;
+            });
         }
-        return this.Document;
-    };
-    docStyleProvider = (doc: Opt<Doc>, props: Opt<FieldViewProps>, property: string): any => {
-        if (property === StyleProp.PointerEvents) return 'none';
-        return this._props.styleProvider?.(doc, props, property);
     };
-    _closeRef = React.createRef<HTMLDivElement>();
     render() {
+        console.log(this.chartContent)
         return (
             <div>
-                <Mermaid chart={`
-                    graph LR;
-                    A-->B;
-                    B-->C;
-                    B-->D[hi];  
-                    `}/>
+                <Mermaid chart={this.chartContent} />
             </div>
         );
     }
-- 
cgit v1.2.3-70-g09d2


From 2ca4e70cd030fb9199d149060adf1b1d7c07857c Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Tue, 12 Mar 2024 16:40:40 -0400
Subject: fix

---
 src/client/documents/Documents.ts      | 1 +
 src/client/util/CurrentUserUtils.ts    | 2 ++
 src/client/views/nodes/DiagramBox.scss | 3 +++
 src/client/views/nodes/DiagramBox.tsx  | 2 +-
 4 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/client/views/nodes/DiagramBox.scss

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2f177b62a..96f4e4597 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -276,6 +276,7 @@ export class DocumentOptions {
     layout_hideDecorationTitle?: BOOLt = new BoolInfo('whether to suppress the document decortations title when selected');
     _layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     layout_diagramEditor?: STRt = new StrInfo("specify the JSX string for a diagram editor view")
+    layout_hideContextMenu?: BOOLt = new BoolInfo('whether the context menu can be shown');
     layout_borderRounding?: string;
     _layout_modificationDate?: DATEt = new DateInfo('last modification date of doc layout', false);
     _layout_nativeDimEditable?: BOOLt = new BoolInfo('native dimensions can be modified using document decoration reizers', false);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index a41fd8796..18b37ffd1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -33,6 +33,8 @@ import { ColorScheme } from "./SettingsManager";
 import { SnappingManager } from "./SnappingManager";
 import { UndoManager } from "./UndoManager";
 import { CollectionView } from "../views/collections/CollectionView";
+import { LabelBox } from "../views/nodes/LabelBox";
+import { ImageBox } from "../views/nodes/ImageBox";
 
 interface Button {
     // DocumentOptions fields a button can set
diff --git a/src/client/views/nodes/DiagramBox.scss b/src/client/views/nodes/DiagramBox.scss
new file mode 100644
index 000000000..50d9a6573
--- /dev/null
+++ b/src/client/views/nodes/DiagramBox.scss
@@ -0,0 +1,3 @@
+.mermaid{
+    width:100%;
+}
\ No newline at end of file
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 9ff2d27d2..e162360f8 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -3,7 +3,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
-import './ComparisonBox.scss';
+import './DiagramBox.scss';
 import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
 import mermaid from 'mermaid';
-- 
cgit v1.2.3-70-g09d2


From e95d25eb8159bb7c753fa27e74e9baa8d3bffea6 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Sat, 30 Mar 2024 00:06:27 -0400
Subject: working on making flashcards from pdf with ai

---
 src/.DS_Store                                      | Bin 10244 -> 10244 bytes
 src/client/apis/gpt/GPT.ts                         |   8 +-
 src/client/documents/Documents.ts                  |   4 +-
 src/client/util/CurrentUserUtils.ts                |   5 +-
 .../views/collections/CollectionCarouselView.scss  |  18 +-
 .../views/collections/CollectionCarouselView.tsx   |  76 +++++++++
 src/client/views/collections/CollectionView.tsx    |   9 +
 src/client/views/nodes/ComparisonBox.tsx           | 181 ++++++++++++++++-----
 src/client/views/pdf/AnchorMenu.tsx                |  23 +++
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         |  39 ++++-
 src/client/views/pdf/PDFViewer.tsx                 |   4 +
 11 files changed, 315 insertions(+), 52 deletions(-)

(limited to 'src/client/util')

diff --git a/src/.DS_Store b/src/.DS_Store
index f8d745dbf..f1f08fbb5 100644
Binary files a/src/.DS_Store and b/src/.DS_Store differ
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index cea862330..968b45273 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -4,6 +4,7 @@ enum GPTCallType {
     SUMMARY = 'summary',
     COMPLETION = 'completion',
     EDIT = 'edit',
+    FLASHCARD = 'flashcard',
 }
 
 type GPTCallOpts = {
@@ -14,9 +15,10 @@ type GPTCallOpts = {
 };
 
 const callTypeMap: { [type: string]: GPTCallOpts } = {
-    summary: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
-    edit: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
-    completion: { model: 'text-davinci-003', maxTokens: 256, temp: 0.5, prompt: '' },
+    summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
+    edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
+    flashcard: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Make flashcards out of this text with questions on the front and answers on the back: ' },
+    completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' },
 };
 
 /**
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 2d2d13519..bf3d14560 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1054,8 +1054,8 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.SCREENSHOT), '', options);
         }
 
-        export function ComparisonDocument(options: DocumentOptions = { title: 'Comparison Box' }) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), undefined, options);
+        export function ComparisonDocument(text: string, options: DocumentOptions = { title: 'Comparison Box' }) {
+            return InstanceFromProto(Prototypes.get(DocumentType.COMPARISON), text, options);
         }
 
         export function AudioDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 958240f94..ab0315ba1 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -341,14 +341,15 @@ pie title Minerals in my tap water
                           creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
-            {key: "Flashcard", creator: Docs.Create.ComparisonDocument,                    opts: { _layout_isFlashcard: true, _width: 300, _height: 300 }},
+            {key: "Flashcard",       creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
+            // {key: "Flashcard",  creator: Docs.Create.ComparisonDocument("", opts),           opts: { _layout_isFlashcard: true, _width: 300, _height: 300 }},
             //{key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
             {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts),      opts: { _width: 300, _height: 300, }},
             {key: "Collection", creator: opts => Docs.Create.FreeformDocument([], opts),    opts: { _width: 150, _height: 100, _layout_fitWidth: true }},
             {key: "Webpage",    creator: opts => Docs.Create.WebDocument("",opts),          opts: { _width: 400, _height: 512, _nativeWidth: 850, data_useCors: true, }},
-            {key: "Comparison", creator: Docs.Create.ComparisonDocument,                    opts: { _width: 300, _height: 300 }},
+            {key: "Comparison", creator: opts => Docs.Create.ComparisonDocument("",opts),            opts: { _width: 300, _height: 300 }},
             {key: "Audio",      creator: opts => Docs.Create.AudioDocument(nullAudio, opts),opts: { _width: 200, _height: 100, }},
             {key: "Map",        creator: opts => Docs.Create.MapDocument([], opts),         opts: { _width: 800, _height: 600, _layout_fitWidth: true, }},
             {key: "Screengrab", creator: Docs.Create.ScreenshotDocument,                    opts: { _width: 400, _height: 200 }},
diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index 130b31325..f115bb40a 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -13,7 +13,10 @@
     }
 }
 .carouselView-back,
-.carouselView-fwd {
+.carouselView-fwd,
+.carouselView-star,
+.carouselView-remove,
+.carouselView-check {
     position: absolute;
     display: flex;
     top: 42.5%;
@@ -34,6 +37,19 @@
 .carouselView-back {
     left: 20;
 }
+.carouselView-star {
+    top: 0;
+    right: 20;
+}
+.carouselView-remove {
+    top: 80%;
+    left: 52%;
+}
+.carouselView-check {
+    top: 80%;
+    right: 52%;
+}
+
 .carouselView-back:hover,
 .carouselView-fwd:hover {
     background: lightgray;
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index dae16bafb..7f5176123 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -36,11 +36,67 @@ export class CollectionCarouselView extends CollectionSubView() {
     advance = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
+        var startInd = this.layoutDoc._carousel_index;
+
+        // if the star filter is selected
+        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
+            // go to a new index that is starred, skip the ones that aren't
+            while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
+                startInd = (startInd + 1) % this.childLayoutPairs.length;
+            }
+            this.layoutDoc._carousel_index = startInd;
+        }
+
+        // if the practice filter is selected
+        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+            // go to a new index that is missed, skip the ones that are correct
+            while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
+                startInd = (startInd + 1) % this.childLayoutPairs.length;
+            }
+            this.layoutDoc._carousel_index = startInd;
+        }
     };
     goback = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+
+        var startInd = this.layoutDoc._carousel_index;
+
+        // if the star filter is selected
+        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
+            // go to a new index that is starred, skip the ones that aren't
+            while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
+                startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+            }
+            this.layoutDoc._carousel_index = startInd;
+        }
+
+        // if the practice filter is selected
+        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+            // go to a new index that is missed, skip the ones that are correct
+            while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
+                startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+            }
+            this.layoutDoc._carousel_index = startInd;
+        }
+    };
+
+    star = (e: React.MouseEvent) => {
+        e.stopPropagation();
+        // stars the document when the button is pressed
+        const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
+        if (curDoc.layout[`${this.fieldKey}_star`] == undefined) curDoc.layout[`${this.fieldKey}_star`] = true;
+        else curDoc.layout[`${this.fieldKey}_star`] = !curDoc.layout[`${this.fieldKey}_star`];
+    };
+
+    missed = (e: React.MouseEvent, val: string) => {
+        e.stopPropagation();
+        const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
+        curDoc.layout[`${this.fieldKey}_missed`] = val;
+        this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
+        this.advance;
     };
+
     captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
         // first look for properties on the document in the carousel, then fallback to properties on the container
         const childValue = doc?.['caption-' + property] ? this._props.styleProvider?.(doc, captionProps, property) : undefined;
@@ -106,6 +162,15 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div key="fwd" className="carouselView-fwd" onClick={this.advance}>
                     <FontAwesomeIcon icon={'chevron-right'} size={'2x'} />
                 </div>
+                <div key="star" className="carouselView-star" onClick={this.star}>
+                    <FontAwesomeIcon icon={'star'} color={this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_star`] ? 'yellow' : 'gray'} size={'1x'} />
+                </div>
+                <div key="remove" className="carouselView-remove" onClick={e => this.missed(e, 'missed')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+                    <FontAwesomeIcon icon={'xmark'} color={'red'} size={'1x'} />
+                </div>
+                <div key="check" className="carouselView-check" onClick={e => this.missed(e, 'correct')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+                    <FontAwesomeIcon icon={'check'} color={'green'} size={'1x'} />
+                </div>
             </>
         );
     }
@@ -120,6 +185,17 @@ export class CollectionCarouselView extends CollectionSubView() {
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
                 {this.content}
+                <p
+                    style={{
+                        color: 'red',
+                        zIndex: '999',
+                        position: 'relative',
+                        left: '10px',
+                        top: '10px',
+                        visibility: this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_missed`] == 'missed' ? 'visible' : 'hidden',
+                    }}>
+                    Recently missed!
+                </p>
                 {this.Document._chromeHidden ? null : this.buttons}
             </div>
         );
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 18eb4dd1f..168176edf 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -176,6 +176,15 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
                     return newRendition;
                 });
 
+            const revealOptions = cm.findByDescription('Filter Flashcards');
+            const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
+            revealItems.push({ description: 'All', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'all'), icon: 'eye-slash' });
+            revealItems.push({ description: 'Star', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'star'), icon: 'hand-point-up' });
+            revealItems.push({ description: 'Practice Mode', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'practice'), icon: 'rotate' });
+
+            //revealItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' });
+            !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+
             const options = cm.findByDescription('Options...');
             const optionItems = options && 'subitems' in options ? options.subitems : [];
             !Doc.noviceMode ? optionItems.splice(0, 0, { description: `${this.Document.forceActive ? 'Select' : 'Force'} Contents Active`, event: () => (this.Document.forceActive = !this.Document.forceActive), icon: 'project-diagram' }) : null;
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 81f624b20..ce862cd22 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -4,13 +4,14 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { emptyFunction, returnFalse, returnNone, returnZero, setupMoveUpEvents } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
-import { DocCast, NumCast, StrCast } from '../../../fields/Types';
+import { DocCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
 import { DocUtils, Docs } from '../../documents/Documents';
 import { DragManager, dropActionType } from '../../util/DragManager';
 import { undoBatch } from '../../util/UndoManager';
 import { SnappingManager } from '../../util/SnappingManager';
 import { ViewBoxAnnotatableComponent, ViewBoxInterface } from '../DocComponent';
 import { StyleProp } from '../StyleProvider';
+import { Tooltip } from '@mui/material';
 import { CSSTransition } from 'react-transition-group';
 import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
@@ -18,6 +19,8 @@ import { FieldView, FieldViewProps } from './FieldView';
 import { PinProps, PresBox } from './trails';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { RichTextField } from '../../../fields/RichTextField';
+import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
+import { DocData } from '../../../fields/DocSymbols';
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
@@ -88,7 +91,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     if (this._isAnyChildContentActive) return;
                     this._animating = 'all 200ms';
                     // on click, animate slider movement to the targetWidth
-                    this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth();
+                    // this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth();
+                    this.layoutDoc[this.clipHeightKey] = (targetWidth * 100) / this._props.PanelHeight();
 
                     setTimeout(
                         action(() => (this._animating = '')),
@@ -128,7 +132,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     clearDoc = (fieldKey: string) => {
         delete this.dataDoc[fieldKey];
         this.dataDoc[fieldKey] = 'empty';
-        // this.dataDoc[this.fieldKey + '_1'] = 'empty';
     };
     // clearDoc = (fieldKey: string) => delete this.dataDoc[fieldKey];
 
@@ -182,47 +185,72 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : undefined;
     };
+    hoverFlip = (side: string | undefined) => {
+        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
+    };
 
     @computed get overlayAlternateIcon() {
         const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
         return (
-            <div
-                className="formattedTextBox-alternateButton"
-                onPointerDown={e =>
-                    setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => {
-                        console.log(this.layoutDoc[`_${this._props.fieldKey}_revealOp`]);
-                        if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'flip') {
-                            this.flipFlashcard();
-                        }
-                    })
-                }
-                style={{
-                    //display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none',
-                    background: usepath === 'alternate' ? 'white' : 'black',
-                    color: usepath === 'alternate' ? 'black' : 'white',
-                }}>
-                <FontAwesomeIcon icon="turn-up" size="sm" />
-            </div>
+            <Tooltip title={<div className="dash-tooltip">flip</div>}>
+                <div
+                    className="formattedTextBox-alternateButton"
+                    onPointerDown={e =>
+                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => {
+                            console.log(this.layoutDoc[`_${this._props.fieldKey}_revealOp`]);
+                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'flip') {
+                                this.flipFlashcard();
+                            }
+                        })
+                    }
+                    style={{
+                        //display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none',
+                        background: usepath === 'alternate' ? 'white' : 'black',
+                        color: usepath === 'alternate' ? 'black' : 'white',
+                    }}>
+                    <FontAwesomeIcon icon="turn-up" size="sm" />
+                </div>
+            </Tooltip>
         );
     }
 
     render() {
         const clearButton = (which: string) => {
             return (
-                <div
-                    ref={this._closeRef}
-                    className={`clear-button ${which}`}
-                    onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
-                >
-                    <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
-                </div>
+                <Tooltip title={<div className="dash-tooltip">remove</div>}>
+                    <div
+                        ref={this._closeRef}
+                        className={`clear-button ${which}`}
+                        onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
+                    >
+                        <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
+                    </div>
+                </Tooltip>
             );
         };
         const displayDoc = (which: string) => {
             const whichDoc = DocCast(this.dataDoc[which]);
             const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc);
             // if there is no Doc in the first comparison slot, but the comparison box's fieldKey slot has a RichTextField, then render a text box to show the contents of the document's field key slot
-            const layoutTemplateString = !targetDoc && which.endsWith('1') && this.Document[this.fieldKey] instanceof RichTextField ? FormattedTextBox.LayoutString(this.fieldKey) : undefined;
+            //const layoutTemplateString = !targetDoc && which.endsWith('1') && this.Document[this.fieldKey] instanceof RichTextField ? FormattedTextBox.LayoutString(this.fieldKey) : undefined;
+            const subjectText = RTFCast(this.Document[this.fieldKey])?.Text;
+            const layoutTemplateString = !targetDoc
+                ? which.endsWith('0') && subjectText !== undefined
+                    ? FormattedTextBox.LayoutString(this.fieldKey)
+                    : which.endsWith('1') && (this.Document[which] instanceof RichTextField || typeof this.Document[which] === 'string')
+                      ? FormattedTextBox.LayoutString(which)
+                      : undefined
+                : undefined;
+
+            if (which.endsWith('1') && !layoutTemplateString && targetDoc) {
+                const queryText = RTFCast(this.Document[this.fieldKey + '_1'])?.Text;
+                console.log('QUER' + queryText);
+                if (queryText?.includes('--TEXT--') && subjectText) {
+                    this.Document[DocData][this.fieldKey + '_1'] = '';
+                    gptAPICall(queryText?.replace('--TEXT--', subjectText), GPTCallType.COMPLETION).then(value => (this.Document[DocData][this.fieldKey + '_1'] = value.trim()));
+                }
+            }
+
             return targetDoc || layoutTemplateString ? (
                 <>
                     <DocumentView
@@ -234,7 +262,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         moveDocument={which.endsWith('1') ? this.moveDoc1 : this.moveDoc2}
                         removeDocument={which.endsWith('1') ? this.remDoc1 : this.remDoc2}
                         NativeWidth={() => NumCast(this.layoutDoc.width, 200)}
-                        NativeHeight={() => NumCast(this.layoutDoc.height, 200)}
+                        NativeHeight={(): number => {
+                            return NumCast(this.layoutDoc.height, 200);
+                        }}
                         isContentActive={emptyFunction}
                         isDocumentActive={returnFalse}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
@@ -251,6 +281,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             );
         };
         const displayBox = (which: string, index: number, cover: number) => {
+            // if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hide/reveal') this.layoutDoc[this.clipHeightKey] = 100;
+            // else this.layoutDoc.height = 300;
             return (
                 <div className={`${index === 0 ? 'before' : 'after'}Box-cont`} key={which} style={{ width: this._props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}>
                     {displayDoc(which)}
@@ -258,26 +290,89 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             );
         };
 
+        const displayBoxReveal = (which: string, which2: string, index: number, cover: number) => {
+            return (
+                <div style={{ display: 'flex', flexDirection: 'column' }}>
+                    <div
+                        className={`beforeBox-cont`}
+                        key={which}
+                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
+                        onPointerDown={e => this.registerSliding(e, cover)}
+                        ref={ele => this.createDropTarget(ele, which, 0)}>
+                        {displayDoc(which)}
+                    </div>
+                    <div
+                        className={`afterBox-cont`}
+                        key={which2}
+                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
+                        onPointerDown={e => this.registerSliding(e, cover)}
+                        ref={ele => this.createDropTarget(ele, which2, 1)}>
+                        {displayDoc(which2)}
+                    </div>
+                </div>
+            );
+        };
+
         if (this.Document._layout_isFlashcard) {
             const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
 
-            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) this.dataDoc[this.fieldKey + '_0'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
+            // add text box when first created
+            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) {
+                console.log('TEXT HERE' + this.dataDoc.data);
+                const newDoc = Docs.Create.TextDocument(StrCast(this.dataDoc.data));
+                this.addDoc(newDoc, this.fieldKey + '_0');
+            }
+            // if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) this.dataDoc[this.fieldKey + '_0'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
             if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] == 'empty')) this.dataDoc[this.fieldKey + '_1'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
 
-            return (
-                <div
-                    className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
-                    onMouseEnter={() => {
-                        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = 'alternate';
-                    }}
-                    onMouseLeave={() => {
-                        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined;
-                    }}>
-                    {displayBox(`${this.fieldKey}_${side}`, side, this._props.PanelWidth() - 3)}
+            if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hide/reveal') {
+                {
+                    return (
+                        <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
+                            {displayBox(`${this.fieldKey}_0`, side, this._props.PanelHeight() - 3)}
+                            {displayBox(`${this.fieldKey}_1`, 1, this._props.PanelHeight() - 3)}
+                        </div>
+                    );
+                    // return (
+                    //     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */} style={{ display: 'flex', flexDirection: 'column' }}>
+                    //         {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelHeight() - 3)}
+                    //         <div className="clip-div" style={{ height: this.clipHeight + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
+                    //             {displayBox(`${this.fieldKey}_1`, 0, 0)}
+                    //         </div>
+                    //     </div>
+                    // );
+                    // return (
+                    //     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
+                    //         {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelHeight() / 2)}
+                    //         {displayBox(`${this.fieldKey}_${side === 0 ? 0 : 1}`, 1, this._props.PanelHeight() / 2)}
 
-                    {this.overlayAlternateIcon}
-                </div>
-            );
+                    //     </div>
+                    // );
+                }
+            } else {
+                return (
+                    <div
+                        className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
+                        // style={{ display: 'flex', flexDirection: 'column' }}
+                        // style={{ position: 'absolute', top: '0px' }}
+                        onMouseEnter={() => {
+                            this.hoverFlip('alternate');
+                        }}
+                        onMouseLeave={() => {
+                            this.hoverFlip(undefined);
+                        }}>
+                        {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
+                        {/* {displayBoxReveal(`${this.fieldKey}_${side}`, side, this._props.PanelWidth() - 3)}
+                        {displayBoxReveal(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side === 0 ? 1 : 0, this._props.PanelWidth() - 3)} */}
+                        {/* <div>{displayBoxReveal(`${this.fieldKey}_${side}`, side, this._props.PanelWidth() - 3)}</div> */}
+                        {/* <div style={{ display: this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hide/reveal' ? 'block' : 'none' }} className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`}>
+                            {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side === 0 ? 1 : 0, this._props.PanelWidth() - 3)}
+                        </div> */}
+
+                        {this.overlayAlternateIcon}
+                    </div>
+                );
+            }
         } else {
             return (
                 <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index d0688c338..844c1e36d 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -6,6 +6,7 @@ import * as React from 'react';
 import { ColorResult } from 'react-color';
 import { Utils, returnFalse, setupMoveUpEvents, unimplementedFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
+import { DocUtils, Docs } from '../../documents/Documents';
 import { GPTCallType, gptAPICall } from '../../apis/gpt/GPT';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { SelectionManager } from '../../util/SelectionManager';
@@ -87,6 +88,22 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         GPTPopup.Instance.setLoading(false);
     };
 
+    gptFlashcards = async (e: React.PointerEvent) => {
+        // move this logic to gptpopup, need to implement generate again
+        // GPTPopup.Instance.setVisible(true);
+        // GPTPopup.Instance.setMode(GPTPopupMode.FLASHCARD);
+        // GPTPopup.Instance.setLoading(true);
+
+        try {
+            const res = await gptAPICall(this.selectedText, GPTCallType.FLASHCARD);
+            GPTPopup.Instance.setText(res || 'Something went wrong.');
+            GPTPopup.Instance.transferToFlashcard();
+        } catch (err) {
+            console.error(err);
+        }
+        GPTPopup.Instance.setLoading(false);
+    };
+
     pointerDown = (e: React.PointerEvent) => {
         setupMoveUpEvents(
             this,
@@ -176,6 +193,12 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             color={SettingsManager.userColor}
                         />
                     )}
+                    <IconButton
+                        tooltip="Create flashcards" //
+                        onPointerDown={this.gptFlashcards}
+                        icon={<FontAwesomeIcon icon="id-card" size="lg" />}
+                        color={SettingsManager.userColor}
+                    />
                     {AnchorMenu.Instance.OnAudio === unimplementedFunction ? null : (
                         <IconButton
                             tooltip="Click to Record Annotation" //
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index da8a88803..dbcdd4e3a 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -15,11 +15,14 @@ import { DocUtils, Docs } from '../../../documents/Documents';
 import { ObservableReactComponent } from '../../ObservableReactComponent';
 import { AnchorMenu } from '../AnchorMenu';
 import './GPTPopup.scss';
+import { ComparisonBox } from '../../nodes/ComparisonBox';
+import { DashColor, emptyFunction, lightOrDark, returnFalse } from '../../../../Utils';
 
 export enum GPTPopupMode {
     SUMMARY,
     EDIT,
     IMAGE,
+    FLASHCARD,
 }
 
 interface GPTPopupProps {}
@@ -149,6 +152,22 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
+    transferToFlashcard = () => {
+        const senArr = this.text.split('.');
+        for (var i = 0; i < senArr.length; i += 2) {
+            console.log('SEN: ' + senArr[i]);
+            const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
+            newDoc.text = senArr[i];
+            this.addDoc(newDoc, this.sidebarId);
+            const anchor = AnchorMenu.Instance?.GetAnchor(undefined, false);
+            if (anchor) {
+                DocUtils.MakeLink(newDoc, anchor, {
+                    link_relationship: 'GPT Summary',
+                });
+            }
+        }
+    };
+
     /**
      * Transfers the image urls to actual image docs
      */
@@ -213,6 +232,23 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         );
     };
 
+    flashcardBox = () => {
+        // const textArr = this.text.split(".");
+        // textArr.forEach(function(sentence) {
+        //     console.log(sentence);
+
+        // });
+        // const newDoc = Docs.Create.ComparisonDocument();
+        // this.addToCollection?.(newDoc);
+        // // const newDoc = Docs.Create.ComparisonDocument();
+        // DocUtils.copyDragFactory(Doc.UserDoc().emptyFlashcard as Doc);
+        // // this.addToCollection?.(newDoc);
+        // // return newDoc;
+        // <ComparisonBox/>
+        const newDoc = Docs.Create.TextDocument('Hello there');
+        this.addDoc?.(newDoc);
+    };
+
     data = () => {
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
@@ -268,6 +304,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                         <>
                             <IconButton tooltip="Generate Again" onClick={this.callSummaryApi} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} />
                             <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
+                            {/* <Button tooltip="Transfer to flashcard" text="flashcard" onClick={this.transferToFlashcard} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} /> */}
                         </>
                     ) : (
                         <div className="summarizing">
@@ -308,7 +345,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     render() {
         return (
             <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
-                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : <></>}
+                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode == GPTPopupMode.FLASHCARD ? this.summaryBox() : <></>}
             </div>
         );
     }
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index 0d4cfda88..7d8529a1c 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -20,11 +20,13 @@ import { MarqueeAnnotator } from '../MarqueeAnnotator';
 import { FocusViewOptions, FieldViewProps } from '../nodes/FieldView';
 import { LinkInfo } from '../nodes/LinkDocPreview';
 import { PDFBox } from '../nodes/PDFBox';
+import { ComparisonBox } from '../nodes/ComparisonBox';
 import { ObservableReactComponent } from '../ObservableReactComponent';
 import { StyleProp } from '../StyleProvider';
 import { AnchorMenu } from './AnchorMenu';
 import { Annotation } from './Annotation';
 import { GPTPopup } from './GPTPopup/GPTPopup';
+import { Docs } from '../../documents/Documents';
 import './PDFViewer.scss';
 const _global = (window /* browser */ || global) /* node */ as any;
 
@@ -415,6 +417,8 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
         // Changing which document to add the annotation to (the currently selected PDF)
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this._props.sidebarAddDoc;
+        // const newDoc = Docs.Create.ComparisonDocument({ _layout_isFlashcard: true, _width: 300, _height: 300 });
+        // this.props.addDocument?.(newDoc);
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2


From d3383640a8007a15e0deb47715e203508c4fd64a Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Tue, 19 Mar 2024 16:21:34 -0400
Subject: working on implementing card logic

---
 src/client/documents/Documents.ts                  |  16 +-
 src/client/util/CurrentUserUtils.ts                |   2 +-
 .../views/collections/CollectionCardDeckView.scss  |   0
 .../views/collections/CollectionCardDeckView.tsx   | 281 +++++++++++----------
 src/client/views/collections/CollectionMenu.tsx    |   4 +
 .../CollectionFreeFormLayoutEngines.tsx            |  61 ++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   6 +-
 7 files changed, 198 insertions(+), 172 deletions(-)
 create mode 100644 src/client/views/collections/CollectionCardDeckView.scss

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index d12c61fd7..c453fd793 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1219,14 +1219,7 @@ export namespace Docs {
             );
         }
 
-        export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
-            return InstanceFromProto(
-                Prototypes.get(DocumentType.COL),
-                new List(documents),
-                { backgroundColor: 'transparent', dropAction: dropActionType.move, _forceActive: true, _freeform_noZoom: true, _freeform_noAutoPan: true, ...options, _type_collection: CollectionViewType.Card },
-                id
-            );
-        }
+        
 
         export function LinearDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Linear }, id);
@@ -1244,6 +1237,10 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Carousel3D });
         }
 
+        export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
+            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card});
+        }
+
         export function SchemaDocument(schemaHeaders: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { schemaHeaders: new List(schemaHeaders), ...options, _type_collection: CollectionViewType.Schema });
         }
@@ -1887,6 +1884,7 @@ export namespace DocUtils {
     }
 
     export function spreadCards(docList: Doc[], x: number = 0, y: number = 0, spreadAngle: number = 30, radius: number = 100, create: boolean = true) {
+        console.log('spread cards');
         const totalCards = docList.length;
         const halfSpreadAngle = spreadAngle * 0.5;
         const angleStep = spreadAngle / (totalCards - 1);
@@ -1897,7 +1895,7 @@ export namespace DocUtils {
                 const angle = (-halfSpreadAngle + angleStep * i) * (Math.PI / 180); // Convert degrees to radians
                 d.x = x + Math.cos(angle) * radius;
                 d.y = y + Math.sin(angle) * radius;
-                d.rotation = angle; // Assuming 'd.rotation' sets the rotation, adjust accordingly
+                d.rotation = angle; 
                 d._timecodeToShow = undefined;
             });
         });
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 11f6c82ec..15c3ddad6 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -796,7 +796,7 @@ pie title Minerals in my tap water
                     CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Multicolumn,
                     CollectionViewType.Multirow, CollectionViewType.Time, CollectionViewType.Carousel,
                     CollectionViewType.Carousel3D, CollectionViewType.Linear, CollectionViewType.Map,
-                    CollectionViewType.Grid, CollectionViewType.NoteTaking]),
+                    CollectionViewType.Grid, CollectionViewType.NoteTaking, CollectionViewType.Card]),
               title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script:  'setView(value, _readOnly_)'}},
             { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                             width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Header",  icon: "heading",       toolTip: "Doc Titlebar Color",   btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'} },
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index feb9e61cc..e35f7b421 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -1,164 +1,185 @@
-import { action, computed, IReactionDisposer, makeObservable } from 'mobx';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { computed, makeObservable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import { Utils, emptyFunction, returnFalse, returnZero } from '../../../Utils';
 import { Doc, DocListCast } from '../../../fields/Doc';
-import { ScriptField } from '../../../fields/ScriptField';
-import { NumCast, StrCast } from '../../../fields/Types';
-import { emptyFunction, returnFalse, setupMoveUpEvents } from '../../../Utils';
-import { DocUtils } from '../../documents/Documents';
+import { Id } from '../../../fields/FieldSymbols';
+import { DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
-import { undoBatch, UndoManager } from '../../util/UndoManager';
-import { OpenWhere } from '../nodes/DocumentView';
-import { computePassLayout, computeStarburstLayout, computeCardDeckLayout } from './collectionFreeForm';
-import { CollectionFreeFormView } from './collectionFreeForm/CollectionFreeFormView';
-import './CollectionPileView.scss';
+import { StyleProp } from '../StyleProvider';
+import { DocumentView } from '../nodes/DocumentView';
+import { FocusViewOptions } from '../nodes/FieldView';
+import './CollectionCarousel3DView.scss';
 import { CollectionSubView } from './CollectionSubView';
-import { dropActionType } from '../../util/DragManager';
-
+const { default: { CAROUSEL3D_CENTER_SCALE, CAROUSEL3D_SIDE_SCALE, CAROUSEL3D_TOP } } = require('../global/globalCssVariables.module.scss'); // prettier-ignore
 @observer
 export class CollectionCardView extends CollectionSubView() {
-    _originalChrome: any = '';
-    _disposers: { [name: string]: IReactionDisposer } = {};
-
+    @computed get scrollSpeed() {
+        return this.layoutDoc._autoScrollSpeed ? NumCast(this.layoutDoc._autoScrollSpeed) : 1000; //default scroll speed
+    }
     constructor(props: any) {
         super(props);
         makeObservable(this);
     }
 
-    componentDidMount() {
-        if (this.layoutEngine() !== computePassLayout.name && this.layoutEngine() !== computeCardDeckLayout.name) {
-            this.Document._freeform_cardEngine = computePassLayout.name;
-        }
-        this._originalChrome = this.layoutDoc._chromeHidden;
-        this.layoutDoc._chromeHidden = true;
-    }
+    private _dropDisposer?: DragManager.DragDropDisposer;
+
     componentWillUnmount() {
-        this.layoutDoc._chromeHidden = this._originalChrome; 
-        Object.values(this._disposers).forEach(disposer => disposer?.());
+        this._dropDisposer?.();
     }
 
-    layoutEngine = () => StrCast(this.Document._freeform_cardEngine);
-
-    @undoBatch
-    addCardDoc = (doc: Doc | Doc[]) => {
-        (doc instanceof Doc ? [doc] : doc).map(d => DocUtils.iconify(d));
-        return this._props.addDocument?.(doc) || false;
+    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
+        this._dropDisposer?.();
+        if (ele) {
+            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
+        }
     };
 
-    @undoBatch
-    removeCardDoc = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDoc: (doc: Doc | Doc[]) => boolean) => {
-        (doc instanceof Doc ? [doc] : doc).forEach(d => Doc.deiconifyView(d));
-        const ret = this._props.moveDocument?.(doc, targetCollection, addDoc) || false;
-        if (ret && !DocListCast(this.dataDoc[this.fieldKey ?? 'data']).length) this.DocumentView?.()._props.removeDocument?.(this.Document);
-        return ret;
+    centerScale = Number(CAROUSEL3D_CENTER_SCALE);
+    panelWidth = () => this._props.PanelWidth() / 3;
+    panelHeight = () => this._props.PanelHeight() * Number(CAROUSEL3D_SIDE_SCALE);
+    onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
+    isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
+    isChildContentActive = () => (this.isContentActive() ? true : false);
+    childScreenToLocal = () =>
+        this._props // document's left is the panel shifted by the doc's index * panelWidth/#docs.  But it scales by centerScale around its center, so it's left moves left by the distance of the left from the center (panelwidth/2) * the scale delta (centerScale-1)
+            .ScreenToLocalTransform() // the top behaves the same way ecept it's shifted by the 'top' amount specified for the panel in css and then by the scale factor.
+            .translate(-this.panelWidth() + ((this.centerScale - 1) * this.panelWidth()) / 2, -((Number(CAROUSEL3D_TOP) / 100) * this._props.PanelHeight()) + ((this.centerScale - 1) * this.panelHeight()) / 2)
+            .scale(1 / this.centerScale);
+
+    focus = (anchor: Doc, options: FocusViewOptions) => {
+        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
+        if (anchor.type !== DocumentType.CONFIG && !docs.includes(anchor)) return;
+        options.didMove = true;
+        const target = DocCast(anchor.annotationOn) ?? anchor;
+        const index = docs.indexOf(target);
+        index !== -1 && (this.layoutDoc._carousel_index = index); //if index is not -1, then assign index to this.layoutDoc._carousel_index
+        return undefined;
     };
 
-    @computed get toggleIcon() {
-        return ScriptField.MakeScript('documentView.iconify()', { documentView: 'any' });
-    }
-    @computed get contentEvents() {
-        const isCard = this.layoutEngine() === computeCardDeckLayout.name;
-        return this._props.isContentActive() && isCard ? undefined : 'none';
+    
+    @computed get content() {
+        const currentIndex = NumCast(this.layoutDoc._carousel_index);
+        const displayDoc = (childPair: { layout: Doc; data: Doc }) => {
+            return (
+                <DocumentView
+                    {...this._props}
+                    Document={childPair.layout}
+                    TemplateDataDocument={childPair.data}
+                    //suppressSetHeight={true}
+                    NativeWidth={returnZero}
+                    NativeHeight={returnZero}
+                    layout_fitWidth={undefined}
+                    onDoubleClickScript={this.onChildDoubleClick}
+                    renderDepth={this._props.renderDepth + 1}
+                    LayoutTemplate={this._props.childLayoutTemplate}
+                    LayoutTemplateString={this._props.childLayoutString}
+                    focus={this.focus}
+                    ScreenToLocalTransform={this.childScreenToLocal} //makes sure the box wrapper thing is in the right spot 
+                    isContentActive={this.isChildContentActive}
+                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                    PanelWidth={this.panelWidth}
+                    PanelHeight={this.panelHeight}
+                />
+            );
+        };
+
+        return this.childLayoutPairs.map((childPair, index) => {
+            return (
+                <div key={childPair.layout[Id]} className={`collectionCarousel3DView-item${index === currentIndex ? '-active' : ''} ${index}`} style={{ width: this.panelWidth() }}>
+                    {displayDoc(childPair)}
+                </div>
+            );
+        });
     }
 
-    // returns the contents of the cardSpread in a CollectionFreeFormView
-    @computed get contents() {
+    changeSlide = (direction: number) => {
+        SelectionManager.DeselectAll();
+        this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + direction + this.childLayoutPairs.length) % this.childLayoutPairs.length;
+    };
+
+    onArrowClick = (direction: number) => {
+        this.changeSlide(direction);
+        !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = direction === 1 ? 'fwd' : 'back'); // while autoscroll is on, keep the other autoscroll button hidden
+        !this.layoutDoc.autoScrollOn && this.fadeScrollButton(); // keep pause button visible while autoscroll is on
+    };
+
+    interval?: number;
+    startAutoScroll = (direction: number) => {
+        this.interval = window.setInterval(() => {
+            this.changeSlide(direction);
+        }, this.scrollSpeed);
+    };
+
+    stopAutoScroll = () => {
+        window.clearInterval(this.interval);
+        this.interval = undefined;
+        this.fadeScrollButton();
+    };
+
+    toggleAutoScroll = (direction: number) => {
+        this.layoutDoc.autoScrollOn = this.layoutDoc.autoScrollOn ? false : true;
+        this.layoutDoc.autoScrollOn ? this.startAutoScroll(direction) : this.stopAutoScroll();
+    };
+
+    fadeScrollButton = () => {
+        window.setTimeout(() => {
+            !this.layoutDoc.autoScrollOn && (this.layoutDoc.showScrollButton = 'none'); //fade away after 1.5s if it's not clicked.
+        }, 1500);
+    };
+
+    @computed get buttons() {
         return (
-            <div className="collectionPileView-innards" style={{ pointerEvents: this.contentEvents }}>
-                <CollectionFreeFormView
-                    {...this._props} //
-                    layoutEngine={this.layoutEngine}
-                    addDocument={this.addCardDoc}
-                    moveDocument={this.removeCardDoc}
-                    // pile children never have their contents active, but will be document active whenever the entire pile is.
-                    childContentsActive={returnFalse}
-                    childDocumentsActive={this._props.isDocumentActive}
-                    childDragAction={dropActionType.move}
-                    childClickScript={this.toggleIcon}
-                />
+            <div className="arrow-buttons">
+                <div title="click to go back" key="back" className="carousel3DView-back" onClick={e => this.onArrowClick(-1)} />
+                <div title="click to advance" key="fwd" className="carousel3DView-fwd" onClick={e => this.onArrowClick(1)} />
+                {/* {this.autoScrollButton} */}
             </div>
         );
     }
 
-    // // toggles the pileup between starburst to compact
-    // toggleStarburst = action(() => {
-    //     this.layoutDoc._freeform_scale = undefined;
-    //     if (this.layoutEngine() === computeStarburstLayout.name) {
-    //         if (NumCast(this.layoutDoc._width) !== NumCast(this.Document._starburstDiameter, 500)) {
-    //             this.Document._starburstDiameter = NumCast(this.layoutDoc._width);
-    //         }
-    //         const defaultSize = 110;
-    //         this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - NumCast(this.layoutDoc._freeform_pileWidth, defaultSize) / 2;
-    //         this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - NumCast(this.layoutDoc._freeform_pileHeight, defaultSize) / 2;
-    //         this.layoutDoc._width = NumCast(this.layoutDoc._freeform_pileWidth, defaultSize);
-    //         this.layoutDoc._height = NumCast(this.layoutDoc._freeform_pileHeight, defaultSize);
-    //         DocUtils.pileup(this.childDocs, undefined, undefined, NumCast(this.layoutDoc._width) / 2, false);
-    //         this.layoutDoc._freeform_panX = 0;
-    //         this.layoutDoc._freeform_panY = -10;
-    //         this.Document._freeform_pileEngine = computePassLayout.name;
-    //     } else {
-    //         const defaultSize = NumCast(this.Document._starburstDiameter, 400);
-    //         this.Document.x = NumCast(this.Document.x) + NumCast(this.layoutDoc._width) / 2 - defaultSize / 2;
-    //         this.Document.y = NumCast(this.Document.y) + NumCast(this.layoutDoc._height) / 2 - defaultSize / 2;
-    //         this.layoutDoc._freeform_pileWidth = NumCast(this.layoutDoc._width);
-    //         this.layoutDoc._freeform_pileHeight = NumCast(this.layoutDoc._height);
-    //         this.layoutDoc._freeform_panX = this.layoutDoc._freeform_panY = 0;
-    //         this.layoutDoc._width = this.layoutDoc._height = defaultSize;
-    //         this.layoutDoc.background;
-    //         this.Document._freeform_pileEngine = computeStarburstLayout.name;
-    //     }
-    // });
-
-    // for dragging documents out of the pileup view
-    _undoBatch: UndoManager.Batch | undefined;
-    pointerDown = (e: React.PointerEvent) => {
-        let dist = 0;
-        setupMoveUpEvents(
-            this,
-            e,
-            (e: PointerEvent, down: number[], delta: number[]) => {
-                if (this.layoutEngine() === 'pass' && this.childDocs.length && e.shiftKey) {
-                    dist += Math.sqrt(delta[0] * delta[0] + delta[1] * delta[1]);
-                    if (dist > 100) {
-                        if (!this._undoBatch) {
-                            this._undoBatch = UndoManager.StartBatch('layout pile');
-                        }
-                        const doc = this.childDocs[0];
-                        doc.x = e.clientX;
-                        doc.y = e.clientY;
-                        this._props.addDocTab(doc, OpenWhere.inParentFromScreen) && (this._props.removeDocument?.(doc) || false);
-                        dist = 0;
-                    }
-                }
-                return false;
-            },
-            () => {
-                this._undoBatch?.end();
-                this._undoBatch = undefined;
-            },
-            emptyFunction,
-            e.shiftKey && this.layoutEngine() === computePassLayout.name,
-            this.layoutEngine() === computePassLayout.name && e.shiftKey
-        ); // this sets _doubleTap
-    };
+    @computed get autoScrollButton() {
+        const whichButton = this.layoutDoc.showScrollButton;
+        return (
+            <>
+                <div className={`carousel3DView-back-scroll${whichButton === 'back' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(-1)}>
+                    {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-left'} size={'1x'} />}
+                </div>
+                <div className={`carousel3DView-fwd-scroll${whichButton === 'fwd' ? '' : '-hidden'}`} style={{ background: `${StrCast(this.Document.backgroundColor)}` }} onClick={() => this.toggleAutoScroll(1)}>
+                    {this.layoutDoc.autoScrollOn ? <FontAwesomeIcon icon={'pause'} size={'1x'} /> : <FontAwesomeIcon icon={'angle-double-right'} size={'1x'} />}
+                </div>
+            </>
+        );
+    }
 
-    // onClick for toggling the pileup view
-    // @undoBatch
-    // onClick = (e: React.MouseEvent) => {
-    //     if (e.button === 0) {
-    //         SelectionManager.DeselectAll();
-    //         this.toggleStarburst();
-    //         e.stopPropagation();
-    //     }
-    // };
+    @computed get dots() {
+        return this.childLayoutPairs.map((_child, index) => <div key={Utils.GenerateGuid()} className={`dot${index === NumCast(this.layoutDoc._carousel_index) ? '-active' : ''}`} onClick={() => (this.layoutDoc._carousel_index = index)} />);
+    }
+    @computed get translateX() {
+        const index = NumCast(this.layoutDoc._carousel_index);
+        return this.panelWidth() * (1 - index);
+    }
 
     render() {
         return (
-            <div className={`collectionPileView`} 
-            // onClick={this.onClick} 
-            onPointerDown={this.pointerDown} style={{ width: this._props.PanelWidth(), height: '100%' }}>
-                {this.contents}
+            <div
+                className="collectionCarousel3DView-outer"
+                ref={this.createDashEventsTarget}
+                style={{
+                    background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor),
+                    color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
+                }}>
+                <div className="carousel-wrapper" style={{ transform: `translateX(${this.translateX}px)` }}>
+                    {this.content}
+                </div>
+                {this.buttons}
+                <div className="dot-bar">{this.dots}</div>
             </div>
         );
     }
+
+
 }
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 8729ef549..9d135eb3b 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -319,6 +319,10 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                 return this._freeform_commands;
             case CollectionViewType.Carousel3D:
                 return this._freeform_commands;
+            case CollectionViewType.Card:
+                return this._freeform_commands;
+            
+            
         }
     }
     private _commandRef = React.createRef<HTMLInputElement>();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index e972f44f1..b3ae382e3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -126,39 +126,40 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
 }
 
-export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
-    const docMap = new Map<string, PoolData>();
-    const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread
-    const startX = -(spreadWidth / 2); // Starting X position
-    const fanAngle = 5; // Angle in degrees for fanning out cards
-    const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order
+// export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
+//     console.log('hi');
+//     const docMap = new Map<string, PoolData>();
+//     const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread
+//     const startX = -(spreadWidth / 2); // Starting X position
+//     const fanAngle = 5; // Angle in degrees for fanning out cards
+//     const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order
 
-    childPairs.forEach(({ layout, data }, i) => {
-        const aspect = NumCast(layout._height) / NumCast(layout._width);
-        const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1);
-        const posX = startX + (spreadWidth / childPairs.length) * i;
-        const posY = 0; // Adjust if you want to change the vertical alignment
-        const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect
+//     childPairs.forEach(({ layout, data }, i) => {
+//         const aspect = NumCast(layout._height) / NumCast(layout._width);
+//         const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1);
+//         const posX = startX + (spreadWidth / childPairs.length) * i;
+//         const posY = 0; // Adjust if you want to change the vertical alignment
+//         const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect
 
-        docMap.set(layout[Id], {
-            x: posX,
-            y: posY,
-            width: docSize,
-            height: docSize * aspect,
-            zIndex: baseZIndex + i, // Increment Z-index for each card to stack them correctly
-            rotation: rotation, // Optional: Add this if you want to rotate elements for a fanned effect
-            pair: { layout, data },
-            replica: '',
-            color: 'white',
-            backgroundColor: 'white',
-            transition: 'all 0.3s',
-        });
-    });
+//         docMap.set(layout[Id], {
+//             x: posX,
+//             y: posY,
+//             width: docSize,
+//             height: docSize * aspect,
+//             zIndex: baseZIndex + i,
+//             rotation: rotation,
+//             pair: { layout, data },
+//             replica: '',
+//             color: 'white',
+//             backgroundColor: 'white',
+//             transition: 'all 0.3s',
+//         });
+//     });
 
-    // This is a placeholder for the divider object and may need to be adjusted based on actual usage
-    const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined };
-    return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
-}
+//     // This is a placeholder for the divider object and may need to be adjusted based on actual usage
+//     const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined };
+//     return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
+// }
 
 export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
     const docMap = new Map<string, PoolData>();
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index f9fe306fa..10b849dab 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -49,7 +49,9 @@ import { CollectionSubView } from '../CollectionSubView';
 import { TreeViewType } from '../CollectionTreeView';
 import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid';
 import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI';
-import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult, computeCardDeckLayout } from './CollectionFreeFormLayoutEngines';
+import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult,
+    //  computeCardDeckLayout 
+    } from './CollectionFreeFormLayoutEngines';
 import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents';
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
@@ -1383,7 +1385,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case computeTimelineLayout.name:  return { newPool, computedElementData: this.doEngineLayout(newPool, computeTimelineLayout) };
             case computePivotLayout.name:     return { newPool, computedElementData: this.doEngineLayout(newPool, computePivotLayout) };
             case computeStarburstLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeStarburstLayout) };
-            case computeCardDeckLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeCardDeckLayout) };
+            // case computeCardDeckLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeCardDeckLayout) };
 
         }
         return { newPool, computedElementData: this.doFreeformLayout(newPool) };
-- 
cgit v1.2.3-70-g09d2


From ba58b46b55527c23cd23b34c2ca13be945c4bf4e Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Sun, 7 Apr 2024 13:35:40 -0400
Subject: radius erase changes

---
 src/client/util/CurrentUserUtils.ts                |  10 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 165 ++++++++++-----------
 src/fields/InkField.ts                             |   3 +
 3 files changed, 94 insertions(+), 84 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 714e33d25..96edce177 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -650,7 +650,15 @@ export class CurrentUserUtils {
         return [
             { title: "Pen",    toolTip: "Pen (Ctrl+P)",                     btnType: ButtonType.ToggleButton, icon: "pen-nib",    toolType: "pen",                            scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }},
             { title: "Write",  toolTip: "Write (Ctrl+Shift+P)",             btnType: ButtonType.ToggleButton, icon: "pen",        toolType: "write",                          scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }},
-            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.ToggleButton, icon: "eraser",     toolType: "eraser",                         scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }},
+            // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50,       btnType: ButtonType.DropdownList, icon: "eraser",     toolType: "eraser", ignoreClick: true,      scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" },
+            //     btnList: new List<string>(["Stroke Erase", "Segment Erase", "Radius Erase"]) },
+            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                toolType:"eraser",                          scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'},
+              subMenu: [
+                    { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",     toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "minus",      toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle",     toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    // { title: "Width",  toolTip: "Eraser Width",                     btnType: ButtonType.NumberSliderButton,               toolType:"strokeWidth",  ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
+            ]},
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",     toolType:GestureUtils.Gestures.Circle,      scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Line",   toolTip: "Line (double tap to lock mode)",   btnType: ButtonType.ToggleButton, icon: "minus",      toolType:GestureUtils.Gestures.Line,        scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 18b75d8ff..da4c53d66 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -610,10 +610,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 // group freeforms don't pan when dragged -- instead let the event go through to allow the group itself to drag
                 // prettier-ignore
                 switch (Doc.ActiveTool) {
-                    case InkTool.Highlighter: break;
-                    case InkTool.Write: break;
-                    case InkTool.Pen: break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views
-                    case InkTool.Eraser:
+                    case InkTool.Highlighter:
+                        break;
+                    case InkTool.Write:
+                        break;
+                    case InkTool.Pen:
+                        break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views
+                    case InkTool.StrokeEraser:
+                        this._batch = UndoManager.StartBatch('collectionErase');
+                        setupMoveUpEvents(this, e, this.onEraserMove, this.onEraserUp, emptyFunction);
+                        break;
+                    case InkTool.SegmentEraser:
+                        this._batch = UndoManager.StartBatch('collectionErase');
+                        setupMoveUpEvents(this, e, this.onEraserMove, this.onEraserUp, emptyFunction);
+                        break;
+                    case InkTool.RadiusEraser:
                         this._batch = UndoManager.StartBatch('collectionErase');
                         setupMoveUpEvents(this, e, this.onEraserMove, this.onEraserUp, emptyFunction);
                         break;
@@ -738,28 +749,19 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 SetActiveInkWidth(StrCast(intersect.inkView.Document.stroke_width?.toString()) || '1');
                 SetActiveInkColor(StrCast(intersect.inkView.Document.color?.toString()) || 'black');
                 // create a new curve by appending all curves of the current segment together in order to render a single new stroke.
-                if (!e.shiftKey) {
+                if (Doc.ActiveTool !== InkTool.StrokeEraser) {
                     this._eraserLock++;
-                    const segments = this.segmentInkStroke(intersect.inkView, intersect.t); // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
-                    // we delete the original ink stroke, then create new strokes for each of the remaining segments
-                    // we do this through the hack of calling the stroke Gesture code as if the strokes had just be drawn by hand
-                    // [[(0,0), (3,7), (9,4), (4,5)],[(4,5), (13,17), (19,14), (14,15)],       [(23,19),(...}]]
-                    // [[(0,0), (3,7), (9,4), (4,5), (13,17), (19,14), (14,15)],       [(23,19),(...}]]
-                    // segments.map(segment => segment.map(pt => pt))
-                    // segments[0][3].x === segments[1][0].x
-
-                    //   3 == "3"   true
-                    //   3 === "3" falsen   !==
-
-                    // for (var i = 0; i < segments.length; i ++) {
-                    //     if (segments[i][0].points.lastElement().x === segments[i+1][0].points.lastElement().x && segments[i][0].points.lastElement().y === segments[i+1][0].points.lastElement().y) {
-                    //         segments[i][0].points.pop();
-                    //         segments[i][0].points = segments[i][0].points.concat(segments[i+1][0].points);
-                    //         segments.splice(i+1, 1);
-                    //     }
-                    //     i++;
+                    var segments;
+                    if (Doc.ActiveTool === InkTool.SegmentEraser) {
+                        segments = this.segmentErase(intersect.inkView, intersect.t); // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
+                    } else if (Doc.ActiveTool === InkTool.RadiusEraser) {
+                        console.log("RADIUS");
+                        segments = this.radiusErase(intersect.inkView, intersect.t);
+                    }
+                        // } else if (Doc.ActiveTool === InkTool.RadiusEraser) {
+                    //     segments = undefined;
                     // }
-                    segments.forEach(segment =>
+                    segments?.forEach(segment =>
                         this.forceStrokeGesture(
                             e,
                             GestureUtils.Gestures.Stroke,
@@ -837,6 +839,42 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             );
     };
 
+    @action
+    radiusErase = (ink: DocumentView, eraseT: number): Segment[] => {
+        const segments: Segment[] = [];
+        var segment1: Segment = [];
+        var segment2: Segment = [];
+        const eraseWidth = ActiveInkWidth() / 100;
+        const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData();
+        for (var i = 0; i < inkData.length - 3; i += 4) {
+            const currCurveT = Math.floor(i/4);
+            const inkSegment: Bezier = InkField.Segment(inkData, i);
+            if (eraseT >= currCurveT && eraseT < currCurveT+1) {
+                if (eraseT - eraseWidth > currCurveT && eraseT + eraseWidth < currCurveT + 1) {
+                    segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth));
+                    segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1));
+                } else if (eraseT - eraseWidth < currCurveT) {
+                    segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1));
+                } else if (eraseT + eraseWidth > currCurveT + 1) {
+                    segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth));
+                }
+            } else if (eraseT > currCurveT + 1) {
+                segment1.push(inkSegment);
+            } else {
+                segment2.push(inkSegment);
+            }
+        }
+
+        // push 1 or both segments if they are not empty
+        if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
+            segments.push(segment1);
+        }
+        if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) {
+            segments.push(segment2);
+        }
+        return segments;
+    }
+
     /**
      * Erases ink strokes by segments. Locates intersections of the current ink stroke with all other ink strokes (including itself),
      * then erases the segment that was intersected by the eraser. This is done by creating either 1 or two resulting segments
@@ -846,7 +884,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * @returns The ink stroke represented as a list of segments, excluding the segment in which the eraser intersection occurred.
      */
     @action
-    segmentInkStroke = (ink: DocumentView, excludeT: number): Segment[] => {
+    segmentErase = (ink: DocumentView, excludeT: number): Segment[] => {
 
         const segments: Segment[] = [];
         var segment1: Segment = [];
@@ -873,8 +911,17 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         var isClosedCurve = false;
         if (intersections[0] === 0) {
             isClosedCurve = true;
-            intersections = intersections.slice(1, intersections.length ); // take the 0 intersection out
-            segmentIndexes = segmentIndexes.slice(1, segmentIndexes.length); // same for indexes
+
+            // now reduce intersections list to the actual intersections because closed curves have additional ones with itself
+            const indices = intersections
+                .map((value, index) => value > 0.0001 && value < Math.floor(inkData.length / 4) ? index : -1)
+                .filter(index => index !== -1);
+
+            // Filter intersections and segmentIndexes based on validIndices
+            intersections = indices.map(index => intersections[index]);
+            segmentIndexes = indices.map(index => segmentIndexes[index]);
+            // intersections = intersections.slice(1, intersections.length ); // take the 0 intersection out
+            // segmentIndexes = segmentIndexes.slice(1, segmentIndexes.length); // same for indexes
         }
 
         if (intersections.length) {
@@ -938,13 +985,16 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         }
                     }
                 } else { // case where right end is erased
-                    if (currCurveT === splitSegment1) {
-                        segment1.push(inkSegment.split(0, intersections[closestTs[0]] - currCurveT));
-                        hasSplit = true;
-                    } else if (isClosedCurve && currCurveT === segmentIndexes[1]) {
+                    if (currCurveT === segmentIndexes[0] && isClosedCurve) {
                         segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
+                        hasSplit = true;
+                    } else if (currCurveT === splitSegment1) {
+                        segment1.push(inkSegment.split(0, intersections[closestTs[0]] - currCurveT));
+                        hasSplit = false; // although this is not technically true, we set to false so the segments after don't get added
+                    // } else if (isClosedCurve && currCurveT === segmentIndexes[1]) {
+                    //     segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
                     } else {
-                        if (!hasSplit && !isClosedCurve) {
+                        if ((isClosedCurve && hasSplit) || (!isClosedCurve && !hasSplit)) {
                             segment1.push(inkSegment);
                         }
                     }
@@ -961,57 +1011,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         }
 
         return segments;
-
-
-        // const segments: Segment[] = [];
-        // var segment1: Segment = [];
-        // var segment2: Segment = [];
-        // var startSegmentT = 0;
-        // var hasSplit = false;
-        // const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData();
-        // // This iterates through all segments of the curve and splits them where they intersect another curve.
-        // // if 'excludeT' is specified, then any segment containing excludeT will be skipped (ie, deleted)
-        // for (var i = 0; i < inkData.length - 3; i += 4) {
-        //     const inkSegment = InkField.Segment(inkData, i);
-        //     // Getting all t-value intersections of the current curve with all other curves.
-        //     const tVals = this.getInkIntersections(i, ink, inkSegment).sort();
-        //     if (tVals.length) {
-        //         tVals.forEach((t, index) => {
-        //             const docCurveTVal = t + Math.floor(i / 4);
-        //             if (excludeT < startSegmentT || excludeT > docCurveTVal) {
-        //                 const localStartTVal = startSegmentT - Math.floor(i / 4);
-        //                 if (!hasSplit) {
-        //                     t !== (localStartTVal < 0 ? 0 : localStartTVal) && segment1.push(inkSegment.split(localStartTVal < 0 ? 0 : localStartTVal, t));
-        //                 } else {
-        //                     t !== (localStartTVal < 0 ? 0 : localStartTVal) && segment2.push(inkSegment.split(localStartTVal < 0 ? 0 : localStartTVal, t));
-        //                 }
-        //                 // if (segment.length && (Math.abs(segment[0].points[0].x - segment[0].points.lastElement().x) > 0.5 || Math.abs(segment[0].points[0].y - segment[0].points.lastElement().y) > 0.5)) segments.push(segment);
-        //             }
-        //             // start a new segment from the intersection t value
-        //             if (tVals.length - 1 === index) {
-        //                 const split = inkSegment.split(t).right;
-        //                 if (!hasSplit) {
-        //                     if (split && (Math.abs(split.points[0].x - split.points.lastElement().x) > 0.5 || Math.abs(split.points[0].y - split.points.lastElement().y) > 0.5)) segment1.push(split);
-        //                 } else {
-        //                     if (split && (Math.abs(split.points[0].x - split.points.lastElement().x) > 0.5 || Math.abs(split.points[0].y - split.points.lastElement().y) > 0.5)) segment2.push(split);
-        //                 }
-        //             }
-        //             startSegmentT = docCurveTVal;
-        //         });
-        //     } else {
-        //         if (!hasSplit) {
-        //             segment1.push(inkSegment);
-        //         } else {
-        //             segment2.push(inkSegment);
-        //         }
-        //     }
-        // }
-        // if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
-        //     segments.push(segment1);
-        // }
-        // if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) {
-        //     segments.push(segment2);
-        // }
     };
 
     /**
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index b3e01229a..9c8c5df2c 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -11,6 +11,9 @@ export enum InkTool {
     Pen = 'pen',
     Highlighter = 'highlighter',
     Eraser = 'eraser',
+    StrokeEraser = 'strokeeraser',
+    SegmentEraser = 'segmenteraser',
+    RadiusEraser = 'radiuseraser',
     Stamp = 'stamp',
     Write = 'write',
     PresentationPin = 'presentationpin',
-- 
cgit v1.2.3-70-g09d2


From 0c33bc8033c9877abbe6e4074a687559bc4948d0 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Tue, 23 Apr 2024 15:16:06 -0400
Subject: erase multiple segments bug

---
 package-lock.json                                  |   3 +-
 src/client/documents/Documents.ts                  |   4 +-
 src/client/util/CurrentUserUtils.ts                |   7 +-
 src/client/views/InkingStroke.tsx                  | 110 +++++++++++---
 src/client/views/MainView.tsx                      |   3 +
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 167 ++++++++++++++-------
 src/client/views/global/globalScripts.ts           |  19 ++-
 7 files changed, 228 insertions(+), 85 deletions(-)

(limited to 'src/client/util')

diff --git a/package-lock.json b/package-lock.json
index 9be0d6cb9..eda529cad 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -32074,7 +32074,8 @@
         "node_modules/text-table": {
             "version": "0.2.0",
             "resolved": "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz",
-            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw=="
+            "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
+            "dev": true
         },
         "node_modules/textarea-caret": {
             "version": "3.1.0",
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index b160379df..61a58caaa 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -26,7 +26,7 @@ import { ScriptingGlobals } from '../util/ScriptingGlobals';
 import { UndoManager, undoable } from '../util/UndoManager';
 import { ContextMenu } from '../views/ContextMenu';
 import { ContextMenuProps } from '../views/ContextMenuItem';
-import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, InkingStroke } from '../views/InkingStroke';
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveEraserWidth, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveEraserWidth, ActiveIsInkMask, InkingStroke } from '../views/InkingStroke';
 import { CollectionDockingView } from '../views/collections/CollectionDockingView';
 import { CollectionView } from '../views/collections/CollectionView';
 import { DimUnit } from '../views/collections/collectionMulticolumn/CollectionMulticolumnView';
@@ -1123,6 +1123,7 @@ export namespace Docs {
             points: PointData[],
             options: DocumentOptions = {},
             strokeWidth = ActiveInkWidth(),
+            eraserWidth = ActiveEraserWidth(),
             color = ActiveInkColor(),
             stroke_bezier = ActiveInkBezierApprox(),
             fillColor = ActiveFillColor(),
@@ -1138,6 +1139,7 @@ export namespace Docs {
             I.fillColor = fillColor;
             I.stroke = new InkField(points);
             I.stroke_width = strokeWidth;
+            I.eraser_width = eraserWidth;
             I.stroke_bezier = stroke_bezier;
             I.stroke_startMarker = arrowStart;
             I.stroke_endMarker = arrowEnd;
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 031b79b25..59fc30635 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -34,6 +34,7 @@ import { SnappingManager } from "./SnappingManager";
 import { UndoManager } from "./UndoManager";
 import { LabelBox } from "../views/nodes/LabelBox";
 import { ImageBox } from "../views/nodes/ImageBox";
+import { PiEraser } from "react-icons/pi";
 
 interface Button {
     // DocumentOptions fields a button can set
@@ -756,9 +757,8 @@ pie title Minerals in my tap water
             { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                toolType:"eraser",                          scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'},
               subMenu: [
                     { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",     toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "minus",      toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle",     toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    // { title: "Width",  toolTip: "Eraser Width",                     btnType: ButtonType.NumberSliderButton,               toolType:"strokeWidth",  ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
+                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmarks-lines",      toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle-xmark",     toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
             ]},
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",     toolType:GestureUtils.Gestures.Circle,      scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
@@ -766,6 +766,7 @@ pie title Minerals in my tap water
             { title: "Mask",   toolTip: "Mask",                             btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask",                        scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } },
             { title: "Labels", toolTip: "Lab els",                          btnType: ButtonType.ToggleButton, icon: "text-width", toolType: "labels",                         scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, },
             { title: "Width",  toolTip: "Stroke width",                     btnType: ButtonType.NumberSliderButton,               toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
+            { title: "Eraser Width",  toolTip: "Eraser Width",              btnType: ButtonType.NumberSliderButton,               toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
             { title: "Ink",    toolTip: "Stroke color",                     btnType: ButtonType.ColorButton,  icon: "pen",        toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'} },
         ];
     }
diff --git a/src/client/views/InkingStroke.tsx b/src/client/views/InkingStroke.tsx
index 1c24a4903..1ae96edfd 100644
--- a/src/client/views/InkingStroke.tsx
+++ b/src/client/views/InkingStroke.tsx
@@ -45,6 +45,7 @@ import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 import { PinProps, PresBox } from './nodes/trails';
 import { StyleProp } from './StyleProvider';
 const { INK_MASK_SIZE } = require('./global/globalCssVariables.module.scss'); // prettier-ignore
+
 @observer
 export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
     static readonly MaskDim = INK_MASK_SIZE; // choose a really big number to make sure mask fits over container (which in theory can be arbitrarily big)
@@ -330,31 +331,86 @@ export class InkingStroke extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
     };
 
-    splitByEraser = (inkCoords: {X: number; Y: number}, radius: number) => {
-        // const ptsXscale = (NumCast(radius) - NumCast(radius)) / (oldXrange.max - oldXrange.min || 1) || 1;
-        // const ptsYscale = (NumCast(doc._height) - NumCast(doc.stroke_width)) / (oldYrange.max - oldYrange.min || 1) || 1;
-        // const newPoints = func(this.DocumentView?.(), ink, ptsXscale, ptsYscale, NumCast(radius));
-        const controlPointDistance = 0.552284749831 * radius; // (4/3) * tan(pi / 8) * radius
-        const points: { X: number; Y: number }[] = [
-            { X: inkCoords.X + radius, Y: inkCoords.Y }, // right point
-            { X: inkCoords.X + radius, Y: inkCoords.Y - controlPointDistance }, // right's top ctrl point
-            { X: inkCoords.X + controlPointDistance, Y: inkCoords.Y - radius }, // top's right ctrl point
-            { X: inkCoords.X, Y: inkCoords.Y - radius }, // top
-            { X: inkCoords.X, Y: inkCoords.Y - radius }, // top again
-            { X: inkCoords.X - controlPointDistance, Y: inkCoords.Y - radius }, // top's left ctrl point
-            { X: inkCoords.X - radius, Y: inkCoords.Y - controlPointDistance }, // left's top ctrl point
-            { X: inkCoords.X - radius, Y: inkCoords.Y }, // left
-            { X: inkCoords.X - radius, Y: inkCoords.Y }, // left again
-            { X: inkCoords.X - radius, Y: inkCoords.Y + controlPointDistance }, // left's bottom ctrl point
-            { X: inkCoords.X - controlPointDistance, Y: inkCoords.Y + radius }, // bottom's left ctrl point
-            { X: inkCoords.X, Y: inkCoords.Y + radius }, // bottom
-            { X: inkCoords.X, Y: inkCoords.Y + radius }, // bottom again
-            { X: inkCoords.X + controlPointDistance, Y: inkCoords.Y + radius }, // bottom's right ctrl point
-            { X: inkCoords.X + radius, Y: inkCoords.Y + controlPointDistance }, // right's bottom ctrl point
-            { X: inkCoords.X + radius, Y: inkCoords.Y }, // right again
-        ];
+    coordWithSlope = (distance: number, slope: number) =>  {
+        return Math.sqrt((distance * distance) / (1 + slope * slope))
+    }
+    
+
+    splitByEraser = (startInkCoords: {X: number; Y: number}, inkCoords: {X: number; Y: number}) => {
+
+        const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii
+        console.log("radius", radius);
+        const ctrlPtDist = 0.552284749831 * radius; // (4/3) * tan(pi / 8) * radius
+
+        var perpSlope = (inkCoords.Y - startInkCoords.Y) / (inkCoords.X - startInkCoords.X);
+        if (perpSlope > 500) {
+            perpSlope = 500; // avoid ridiculously high/infinity slopes
+        } else if (perpSlope < -500) {
+            perpSlope = -500
+        } else if (perpSlope === 0) {
+            perpSlope = 0.002
+        }
+        const slope = - 1 / perpSlope
+        console.log("slope", slope);
+        var points: { X: number; Y: number }[]  = []
+        if (startInkCoords.X > inkCoords.X) {
+             points = [
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                // { X: startInkCoords.X + this.coordWithSlope(ctrlPtDist, slope), Y: startInkCoords.Y + slope * this.coordWithSlope(ctrlPtDist, slope)},
+
+                { X: inkCoords.X + this.coordWithSlope(radius, slope) + this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope) - this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                // { X: inkCoords.X - this.coordWithSlope(radius, perpSlope) + this.coordWithSlope(ctrlPtDist, slope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) },
+                // { X: inkCoords.X - this.coordWithSlope(radius, perpSlope) - this.coordWithSlope(ctrlPtDist, slope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                { X: inkCoords.X - this.coordWithSlope(radius, slope) - this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope) + this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                // { X: startInkCoords.X - this.coordWithSlope(ctrlPtDist, slope), Y: startInkCoords.Y - slope * this.coordWithSlope(ctrlPtDist, slope) },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+            ];
+        } else {
+            points = [
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                // { X: startInkCoords.X + this.coordWithSlope(ctrlPtDist, slope), Y: startInkCoords.Y + slope * this.coordWithSlope(ctrlPtDist, slope)},
+
+                { X: inkCoords.X + this.coordWithSlope(radius, slope) - this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, slope) + this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y + slope * this.coordWithSlope(radius, slope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                // { X: inkCoords.X - this.coordWithSlope(radius, perpSlope) + this.coordWithSlope(ctrlPtDist, slope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y + perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y + perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y + perpSlope * this.coordWithSlope(radius, perpSlope) },
+                { X: inkCoords.X + this.coordWithSlope(radius, perpSlope), Y: inkCoords.Y + perpSlope * this.coordWithSlope(radius, perpSlope) },
+                // { X: inkCoords.X - this.coordWithSlope(radius, perpSlope) - this.coordWithSlope(ctrlPtDist, slope), Y: inkCoords.Y - perpSlope * this.coordWithSlope(radius, perpSlope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                { X: inkCoords.X - this.coordWithSlope(radius, slope) + this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) + perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) },
+                { X: inkCoords.X - this.coordWithSlope(radius, slope) - this.coordWithSlope(ctrlPtDist, perpSlope), Y: inkCoords.Y - slope * this.coordWithSlope(radius, slope) - perpSlope * this.coordWithSlope(ctrlPtDist, perpSlope) },
+
+                // { X: startInkCoords.X - this.coordWithSlope(ctrlPtDist, slope), Y: startInkCoords.Y - slope * this.coordWithSlope(ctrlPtDist, slope) },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+                { X: startInkCoords.X, Y: startInkCoords.Y },
+            ];
+        }
+
         const eraserCircle = new InkField(points);
-        return points;
+        return eraserCircle;
     }
 
     _subContentView: ViewBoxInterface | undefined;
@@ -533,6 +589,9 @@ export function SetActiveArrowScale(value: number) {
 export function SetActiveDash(dash: string): void {
     !isNaN(parseInt(dash)) && ActiveInkPen() && (ActiveInkPen().activeDash = dash);
 }
+export function SetEraserWidth(radius: string): void {
+    !isNaN(parseInt(radius)) && ActiveInkPen() && (ActiveInkPen().eraserWidth = radius);
+}
 export function ActiveInkPen(): Doc {
     return Doc.UserDoc();
 }
@@ -566,3 +625,6 @@ export function ActiveInkWidth(): number {
 export function ActiveInkBezierApprox(): string {
     return StrCast(ActiveInkPen()?.activeInkBezier);
 }
+export function ActiveEraserWidth(): number {
+    return Number(ActiveInkPen()?.eraserWidth);
+}
\ No newline at end of file
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 58b8d255a..56db0c488 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -358,6 +358,9 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faCut,
                 fa.faEllipsisV,
                 fa.faEraser,
+                fa.faDeleteLeft,
+                fa.faXmarksLines,
+                fa.faCircleXmark,
                 fa.faExclamation,
                 fa.faFileAlt,
                 fa.faFileAudio,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 60f7662ff..78dae87c3 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -749,10 +749,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     const segments =
                         Doc.ActiveTool === InkTool.SegmentEraser
                             ? this.segmentErase(intersect.inkView, intersect.t) // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
-                            : this.radiusErase(intersect.inkView, intersect.t, currPoint);
-                    // } else if (Doc.ActiveTool === InkTool.RadiusEraser) {
-                    //     segments = undefined;
-                    // }
+                            : this.radiusErase(intersect.inkView, { X: down[0], Y: down[1] }, currPoint);
                     segments?.forEach(segment =>
                         this.forceStrokeGesture(
                             e,
@@ -763,7 +760,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     setTimeout(() => this._eraserLock--);
                 }
                 // Lower ink opacity to give the user a visual indicator of deletion.
-                intersect.inkView.layoutDoc.opacity = 0.0;
+                intersect.inkView.layoutDoc.opacity = 0.2;
                 intersect.inkView.layoutDoc.dontIntersect = true;
             }
         });
@@ -831,63 +828,86 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     @action
-    radiusErase = (ink: DocumentView, eraseT: number, screenEraserPt: { X: number; Y: number }): Segment[] => {
+    radiusErase = (ink: DocumentView, startPt: { X: number; Y: number }, screenEraserPt: { X: number; Y: number }): Segment[] => {
         const segments: Segment[] = [];
+        const startInkCoords = ink.ComponentView?.ptFromScreen?.(startPt);
         const inkCoords = ink.ComponentView?.ptFromScreen?.(screenEraserPt); // coordinates in ink space
         if (!inkCoords) return [];
 
-        var segment1: Segment = [];
-        var segment2: Segment = [];
-        const eraseRadius = ActiveInkWidth() / 2;
+        var eraseSegment: Segment = []; // for eraser visualization
         const inkStroke = ink?.ComponentView as InkingStroke;
-        const { inkData } = inkStroke.inkScaledData();
-
-        const eraserInkData = inkStroke.splitByEraser(inkCoords, eraseRadius);
 
-        const tVals: number[] = []; // should be the tvals of the intersections
+        const eraserStroke: InkData = inkStroke.splitByEraser(startInkCoords, inkCoords).inkData;
+        const strokeToTVals: Map<InkingStroke, number[]> = new Map<InkingStroke, number[]>();
+        for (var i = 0; i < eraserStroke.length - 3; i +=4) {
+            eraseSegment.push(InkField.Segment(eraserStroke, i)); // for eraser visualization
+            this.getOtherInkIntersections(i, eraserStroke, strokeToTVals);
+        }
+        strokeToTVals.forEach((tVals, inkStroke) => {
+            var segment1: Segment = [];
+            var segment2: Segment = [];
+            const { inkData } = inkStroke.inkScaledData();
+            tVals.sort();
+            console.log('TVALS', inkStroke, tVals);
 
-        for (var i = 0; i < eraserInkData.length - 3; i += 4) {
-            const eraserBezier: Bezier = InkField.Segment(eraserInkData, i);
-            segment1.push(eraserBezier);
-            for (var j = 0; j < inkData.length; j += 4) {
-                const inkSegment: Bezier = InkField.Segment(inkData, i);
-                // this.bintersects(inkSegment, eraserBezier).forEach((val: string | number, i: number) => {
-                //     // Converting the Bezier.js Split type to a t-value number.
-                //     const t = +val.toString().split('/')[0];
-                //     if (i % 2 === 0 && !tVals.includes(t)) tVals.push(t); // bcz: Hack!  don't know why but intersection points are doubled from bezier.js (but not identical).
-                // });
+            var hasSplit = false;
+            var continueErasing = false;
+            
+            // below is curve splitting logic
+            if (tVals.length) {
+                for (var i = 0; i < inkData.length - 3; i += 4) {
+                    const inkSegment: Bezier = InkField.Segment(inkData, i);
+                    const currCurveT = Math.floor(i / 4);
+
+                    if (tVals.length === 2) {
+                        if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) {
+                            segment1.push(inkSegment.split(0, tVals[0] - currCurveT));
+                            continueErasing = true;
+                            if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) {
+                                segment2.push(inkSegment.split(tVals[1] - currCurveT, 1));
+                                continueErasing = false;
+                                hasSplit = true;
+                            }
+                        } else if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) {
+                            segment2.push(inkSegment.split(tVals[1] - currCurveT, 1));
+                            continueErasing = false;
+                            hasSplit = true;
+                        } else if (!continueErasing) {
+                            if (hasSplit) {
+                                segment2.push(inkSegment);
+                            } else {
+                                segment1.push(inkSegment);
+                            }
+                        }
+                    } else if (tVals.length === 1) {
+                        if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) {
+                            if (tVals[0] < Math.floor(inkData.length / 4) - tVals[0]) {
+                                // if it's on the first end
+                                segment1.push(inkSegment.split(tVals[0] - currCurveT, 1));
+                                hasSplit = true;
+                            } else {
+                                segment1.push(inkSegment.split(0, tVals[0] - currCurveT));
+                                hasSplit = true;
+                            }
+                        } else {
+                            if (tVals[0] < Math.floor(inkData.length / 4) - tVals[0] && hasSplit) {
+                                segment1.push(inkSegment);
+                            } else if (tVals[0] >= Math.floor(inkData.length / 4) - tVals[0] && !hasSplit) {
+                                segment1.push(inkSegment);
+                            }
+                        }
+                    }
+                }
             }
-        }
-        // segment1.push(eraserBezier);
-
-        // for (var i = 0; i < inkData.length - 3; i += 4) {
-        //     const currCurveT = Math.floor(i/4);
-        //     const inkSegment: Bezier = InkField.Segment(inkData, i);
-        //     if (tVals[0] >= currCurveT && tVals[0] < currCurveT+1) {
-        //         tVals.shift()
-        //         i -= 4;
-        //         if (eraseT - eraseWidth > currCurveT && eraseT + eraseWidth < currCurveT + 1) {
-        //             segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth));
-        //             segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1));
-        //         } else if (eraseT - eraseWidth < currCurveT) {
-        //             segment2.push(inkSegment.split(eraseT - currCurveT + eraseWidth, 1));
-        //         } else if (eraseT + eraseWidth > currCurveT + 1) {
-        //             segment1.push(inkSegment.split(0, eraseT - currCurveT - eraseWidth));
-        //         }
-        //     } else if (eraseT > currCurveT + 1) {
-        //         segment1.push(inkSegment);
-        //     } else {
-        //         segment2.push(inkSegment);
-        //     }
-        // }
+            if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
+                segments.push(segment1);
+            }
+            if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) {
+                segments.push(segment2);
+            }
+        });
 
-        // push 1 or both segments if they are not empty
-        if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
-            segments.push(segment1);
-        }
-        if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) {
-            segments.push(segment2);
-        }
+        segments.push(eraseSegment); // for eraser visualization
         return segments;
     };
 
@@ -1114,6 +1134,47 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return tVals;
     };
 
+    /**
+     * For radius erase, a function to find an eraser's intersections with all ink strokes on the freeform canvas.
+     * @param i the index of the eraser's segment
+     * @param points the eraser's ink data points
+     * @param strokeToTVals Map of InkingStroke to the tVals of its intersections with the eraser
+     * @returns 
+     */
+    getOtherInkIntersections = (i: number, points: InkData, strokeToTVals: Map<InkingStroke, number[]>): Map<InkingStroke, number[]> => {
+        // const tVals: [InkingStroke, number[]] = [];
+        // Iterating through all ink strokes in the current freeform collection.
+        this.childDocs
+            .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect)
+            .forEach(doc => {
+                // InkingStroke of other ink strokes
+                const otherInk = DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.())?.ComponentView as InkingStroke;
+                // ink Data of other ink strokes
+                const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] };
+                for (var j = 0; j < otherInkData.length - 3; j += 4) {
+                    const curve: Bezier = InkField.Segment(points, i); // eraser curve
+                    const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve
+                    this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => {
+                        // Converting the Bezier.js Split type to a t-value number.
+                        const t = +val.toString().split('/')[0];
+                        if (k % 2 === 0) {
+                            // here, add to the map
+                            const inkList = strokeToTVals.get(otherInk);
+                            if (inkList !== undefined) {
+                                const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01);
+                                if (!inList) {
+                                    inkList.push(t + Math.floor(j/4));
+                                }
+                            } else {
+                                strokeToTVals.set(otherInk, [t + Math.floor(j/4)]);
+                            }
+                        }
+                    });
+                }
+            });
+        return strokeToTVals;
+    };
+
     @action
     zoom = (pointX: number, pointY: number, deltaY: number): void => {
         if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return;
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 2a5732708..279d3c24c 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -12,7 +12,7 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
 import { UndoManager, undoable } from '../../util/UndoManager';
 import { GestureOverlay } from '../GestureOverlay';
-import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask } from '../InkingStroke';
+import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, ActiveEraserWidth, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask, SetEraserWidth } from '../InkingStroke';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 // import { InkTranscription } from '../InkTranscription';
 import { DocData } from '../../../fields/DocSymbols';
@@ -338,11 +338,19 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean,
 
 ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');
 
+// ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) {
+//     setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value))
+//     InkingStroke.setEraserRadius(NumCast(value));
+// })
+
 // toggle: Set overlay status of selected document
-ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', value: any, checkResult?: boolean) {
+ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) {
     const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc();
+    if (option === 'eraserWidth') {
+        console.log('eraserWidth', value)
+    }
     // prettier-ignore
-    const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
+    const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
         ['inkMask', {
             checkResult: () => ((selected?._layout_isSvg ? BoolCast(selected[DocData].stroke_isInkMask) : ActiveIsInkMask())),
             setInk: (doc: Doc) => (doc[DocData].stroke_isInkMask = !doc.stroke_isInkMask),
@@ -368,6 +376,11 @@ ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fil
             setInk: (doc: Doc) => (doc[DocData].color = String(value)),
             setMode: () => { SetActiveInkColor(StrCast(value)); selected?.type === DocumentType.INK &&  setActiveTool(GestureOverlay.Instance.InkShape ?? InkTool.Pen, true, false);},
         }],
+        [ 'eraserWidth', {
+            checkResult: () => (selected?._layout_isSvg ? NumCast(selected[DocData].eraser_width) : ActiveEraserWidth()),
+            setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value)),
+            setMode: () => { SetEraserWidth(value.toString());},
+        }]
     ]);
 
     if (checkResult) {
-- 
cgit v1.2.3-70-g09d2


From af67724dc3a1390cd0c2aded4aeda69f948a0f66 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 26 Apr 2024 01:32:57 -0400
Subject: fixed eraser buttons so that you can switch to the previous eraser,
 then click again to choose a different eraser

---
 package-lock.json                                  | 11 +++++-----
 package.json                                       |  2 +-
 src/client/util/CurrentUserUtils.ts                | 10 ++++-----
 src/client/views/GlobalKeyHandler.ts               |  2 +-
 src/client/views/global/globalScripts.ts           | 25 ++++++++++++++++++++--
 src/client/views/nodes/FontIconBox/FontIconBox.tsx | 17 +++++++++------
 src/fields/InkField.ts                             |  1 -
 7 files changed, 45 insertions(+), 23 deletions(-)

(limited to 'src/client/util')

diff --git a/package-lock.json b/package-lock.json
index eda529cad..cf4317fb2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -63,7 +63,7 @@
                 "body-parser": "^1.20.2",
                 "bootstrap": "^5.3.2",
                 "brotli": "^1.3.3",
-                "browndash-components": "^0.1.36",
+                "browndash-components": "^0.1.44",
                 "browser-assert": "^1.2.1",
                 "bson": "^6.2.0",
                 "canvas": "^2.11.2",
@@ -10868,9 +10868,9 @@
             }
         },
         "node_modules/browndash-components": {
-            "version": "0.1.36",
-            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.1.36.tgz",
-            "integrity": "sha512-++Xxn67r9ETz7pQr9dE09dMgPJ6rltEzwYWifpI98AQct4RmEBfiPp5eLG94+143XllxZy++KBf9YJ8AYpTEkQ==",
+            "version": "0.1.44",
+            "resolved": "https://registry.npmjs.org/browndash-components/-/browndash-components-0.1.44.tgz",
+            "integrity": "sha512-+QYEHDqd3iauijdKiVA0jXGFkOMEKn+qb7Y2iG+VK0xAh8Fho3rAUoSMv6snfg+kMc1oMGhACzJa5XauTtvguQ==",
             "dependencies": {
                 "@emotion/react": "^11.11.1",
                 "@emotion/styled": "^11.11.0",
@@ -10880,8 +10880,7 @@
                 "npm": "^9.8.1",
                 "react-color": "^2.19.3",
                 "react-icons": "^4.3.1",
-                "react-measure": "^2.5.2",
-                "styled-components": "^6.0.3"
+                "react-measure": "^2.5.2"
             }
         },
         "node_modules/browndash-components/node_modules/npm": {
diff --git a/package.json b/package.json
index a29f39444..56fdb2920 100644
--- a/package.json
+++ b/package.json
@@ -146,7 +146,7 @@
         "body-parser": "^1.20.2",
         "bootstrap": "^5.3.2",
         "brotli": "^1.3.3",
-        "browndash-components": "^0.1.36",
+        "browndash-components": "^0.1.44",
         "browser-assert": "^1.2.1",
         "bson": "^6.2.0",
         "canvas": "^2.11.2",
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 59fc30635..ed81862c2 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -752,13 +752,11 @@ pie title Minerals in my tap water
         return [
             { title: "Pen",    toolTip: "Pen (Ctrl+P)",                     btnType: ButtonType.ToggleButton, icon: "pen-nib",    toolType: "pen",                            scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }},
             { title: "Write",  toolTip: "Write (Ctrl+Shift+P)",             btnType: ButtonType.ToggleButton, icon: "pen",        toolType: "write",                          scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }},
-            // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50,       btnType: ButtonType.DropdownList, icon: "eraser",     toolType: "eraser", ignoreClick: true,      scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" },
-            //     btnList: new List<string>(["Stroke Erase", "Segment Erase", "Radius Erase"]) },
-            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                toolType:"eraser",                          scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'},
+            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                                                            scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {toolType:"activeEraserTool()"},
               subMenu: [
-                    { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",     toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmarks-lines",      toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle-xmark",     toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",      toolType:InkTool.StrokeEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmarks-lines",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkTool.RadiusEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
             ]},
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",     toolType:GestureUtils.Gestures.Circle,      scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
diff --git a/src/client/views/GlobalKeyHandler.ts b/src/client/views/GlobalKeyHandler.ts
index 2f64ea28c..3349fb5dc 100644
--- a/src/client/views/GlobalKeyHandler.ts
+++ b/src/client/views/GlobalKeyHandler.ts
@@ -273,7 +273,7 @@ export class KeyManager {
                 }
                 break;
             case 'e':
-                Doc.ActiveTool = Doc.ActiveTool === InkTool.Eraser ? InkTool.None : InkTool.Eraser;
+                Doc.ActiveTool = [InkTool.StrokeEraser, InkTool.SegmentEraser, InkTool.RadiusEraser].includes(Doc.ActiveTool) ? InkTool.None : InkTool.StrokeEraser;
                 break;
             case 'p':
                 Doc.ActiveTool = Doc.ActiveTool === InkTool.Pen ? InkTool.None : InkTool.Pen;
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 279d3c24c..d565a530b 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -12,7 +12,21 @@ import { ScriptingGlobals } from '../../util/ScriptingGlobals';
 import { SelectionManager } from '../../util/SelectionManager';
 import { UndoManager, undoable } from '../../util/UndoManager';
 import { GestureOverlay } from '../GestureOverlay';
-import { ActiveFillColor, ActiveInkColor, ActiveInkHideTextLabels, ActiveInkWidth, ActiveIsInkMask, ActiveEraserWidth, InkingStroke, SetActiveFillColor, SetActiveInkColor, SetActiveInkHideTextLabels, SetActiveInkWidth, SetActiveIsInkMask, SetEraserWidth } from '../InkingStroke';
+import {
+    ActiveFillColor,
+    ActiveInkColor,
+    ActiveInkHideTextLabels,
+    ActiveInkWidth,
+    ActiveIsInkMask,
+    ActiveEraserWidth,
+    InkingStroke,
+    SetActiveFillColor,
+    SetActiveInkColor,
+    SetActiveInkHideTextLabels,
+    SetActiveInkWidth,
+    SetActiveIsInkMask,
+    SetEraserWidth,
+} from '../InkingStroke';
 import { CollectionFreeFormView } from '../collections/collectionFreeForm';
 // import { InkTranscription } from '../InkTranscription';
 import { DocData } from '../../../fields/DocSymbols';
@@ -323,6 +337,9 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean,
                 GestureOverlay.Instance.InkShape = tool as GestureUtils.Gestures;
             }
         } else if (tool) {
+            if ([InkTool.StrokeEraser, InkTool.RadiusEraser, InkTool.SegmentEraser].includes(tool as any)) {
+                Doc.UserDoc().activeEraserTool = tool;
+            }
             // pen or eraser
             if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
                 Doc.ActiveTool = InkTool.None;
@@ -338,6 +355,10 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean,
 
 ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');
 
+ScriptingGlobals.add(function activeEraserTool() {
+    return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser);
+}, 'returns the current eraser tool');
+
 // ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) {
 //     setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value))
 //     InkingStroke.setEraserRadius(NumCast(value));
@@ -347,7 +368,7 @@ ScriptingGlobals.add(setActiveTool, 'sets the active ink tool mode');
 ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) {
     const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc();
     if (option === 'eraserWidth') {
-        console.log('eraserWidth', value)
+        console.log('eraserWidth', value);
     }
     // prettier-ignore
     const map: Map<'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', { checkResult: () => any; setInk: (doc: Doc) => void; setMode: () => void }> = new Map([
diff --git a/src/client/views/nodes/FontIconBox/FontIconBox.tsx b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
index 57ae92359..754c6a68c 100644
--- a/src/client/views/nodes/FontIconBox/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox/FontIconBox.tsx
@@ -6,7 +6,7 @@ import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Doc, DocListCast, StrListCast } from '../../../../fields/Doc';
 import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../../fields/Types';
-import { emptyFunction, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
+import { emptyFunction, returnFalse, returnTrue, setupMoveUpEvents, Utils } from '../../../../Utils';
 import { CollectionViewType, DocumentType } from '../../../documents/DocumentTypes';
 import { SelectionManager } from '../../../util/SelectionManager';
 import { SettingsManager } from '../../../util/SettingsManager';
@@ -20,6 +20,7 @@ import { OpenWhere } from '../DocumentView';
 import { FieldView, FieldViewProps } from '../FieldView';
 import './FontIconBox.scss';
 import TrailsIcon from './TrailsIcon';
+import { InkTool } from '../../../../fields/InkField';
 
 export enum ButtonType {
     TextButton = 'textBtn',
@@ -274,24 +275,28 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
         // Determine the type of toggle button
         const tooltip: string = StrCast(this.Document.toolTip);
 
-        const script = ScriptCast(this.Document.onClick);
-        const toggleStatus = script ? script.script.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result : false;
+        const script = ScriptCast(this.Document.onClick).script;
+        const toggleStatus = script?.run({ this: this.Document, self: this.Document, value: undefined, _readOnly_: true }).result;
         // Colors
         const color = this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color);
         const items = DocListCast(this.dataDoc.data);
+        const multiDoc = this.Document;
         return (
             <MultiToggle
                 tooltip={`Toggle ${tooltip}`}
                 type={Type.PRIM}
                 color={color}
-                background={SettingsManager.userBackgroundColor}
+                onPointerDown={e => script && !toggleStatus && setupMoveUpEvents(this, e, returnFalse, emptyFunction, e => script.run({ this: multiDoc, value: undefined, _readOnly_: false }))}
+                isToggle={script ? true : false}
+                toggleStatus={toggleStatus}
+                //background={SettingsManager.userBackgroundColor}
                 label={this.label}
                 items={DocListCast(this.dataDoc.data).map(item => ({
                     icon: <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={StrCast(item.icon) as any} color={color} />,
                     tooltip: StrCast(item.toolTip),
                     val: StrCast(item.toolType),
                 }))}
-                selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType)}
+                selectedVal={StrCast(items.find(itemDoc => ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: undefined, _readOnly_: true }).result)?.toolType ?? StrCast(multiDoc.toolType))}
                 setSelectedVal={(val: string | number) => {
                     const itemDoc = items.find(item => item.toolType === val);
                     itemDoc && ScriptCast(itemDoc.onClick).script.run({ this: itemDoc, self: itemDoc, value: val, _readOnly_: false });
@@ -322,7 +327,7 @@ export class FontIconBox extends ViewBoxBaseComponent<ButtonProps>() {
                 toggleStatus={toggleStatus}
                 text={buttonText}
                 color={color}
-                //background={SettingsManager.userBackgroundColor}
+                // background={SettingsManager.userBackgroundColor}
                 icon={this.Icon(color)!}
                 label={this.label}
                 onPointerDown={e =>
diff --git a/src/fields/InkField.ts b/src/fields/InkField.ts
index 9c8c5df2c..1c01a5d7c 100644
--- a/src/fields/InkField.ts
+++ b/src/fields/InkField.ts
@@ -10,7 +10,6 @@ export enum InkTool {
     None = 'none',
     Pen = 'pen',
     Highlighter = 'highlighter',
-    Eraser = 'eraser',
     StrokeEraser = 'strokeeraser',
     SegmentEraser = 'segmenteraser',
     RadiusEraser = 'radiuseraser',
-- 
cgit v1.2.3-70-g09d2


From 82f8c4bac5c9d8a6aef4b42936bd1839fcb8939e Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Sat, 27 Apr 2024 17:53:25 -0400
Subject: pull

---
 src/client/util/CurrentUserUtils.ts                |  5 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 95 +++++++++++++++++-----
 src/client/views/global/globalScripts.ts           |  5 +-
 3 files changed, 80 insertions(+), 25 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 59fc30635..d5b571141 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -752,21 +752,20 @@ pie title Minerals in my tap water
         return [
             { title: "Pen",    toolTip: "Pen (Ctrl+P)",                     btnType: ButtonType.ToggleButton, icon: "pen-nib",    toolType: "pen",                            scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }},
             { title: "Write",  toolTip: "Write (Ctrl+Shift+P)",             btnType: ButtonType.ToggleButton, icon: "pen",        toolType: "write",                          scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }},
-            // { title: "Eraser", toolTip: "Eraser (Ctrl+E)", width: 50,       btnType: ButtonType.DropdownList, icon: "eraser",     toolType: "eraser", ignoreClick: true,      scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" },
-            //     btnList: new List<string>(["Stroke Erase", "Segment Erase", "Radius Erase"]) },
             { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                toolType:"eraser",                          scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'},
               subMenu: [
                     { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",     toolType:"strokeeraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
                     { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmarks-lines",      toolType:"segmenteraser",ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
                     { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle-xmark",     toolType:"radiuseraser", ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
             ]},
+            // { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.ToggleButton, icon: "eraser",     toolType:"eraser",                          scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+            { title: "Eraser Width",  toolTip: "Eraser Width",              btnType: ButtonType.NumberSliderButton,               toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",     toolType:GestureUtils.Gestures.Circle,      scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Line",   toolTip: "Line (double tap to lock mode)",   btnType: ButtonType.ToggleButton, icon: "minus",      toolType:GestureUtils.Gestures.Line,        scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Mask",   toolTip: "Mask",                             btnType: ButtonType.ToggleButton, icon: "user-circle",toolType: "inkMask",                        scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, funcs: {hidden:"IsNoviceMode()" } },
             { title: "Labels", toolTip: "Lab els",                          btnType: ButtonType.ToggleButton, icon: "text-width", toolType: "labels",                         scripts: {onClick:'{ return setInkProperty(this.toolType, value, _readOnly_);}'}, },
             { title: "Width",  toolTip: "Stroke width",                     btnType: ButtonType.NumberSliderButton,               toolType: "strokeWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
-            { title: "Eraser Width",  toolTip: "Eraser Width",              btnType: ButtonType.NumberSliderButton,               toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1},
             { title: "Ink",    toolTip: "Stroke color",                     btnType: ButtonType.ColorButton,  icon: "pen",        toolType: "strokeColor", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'} },
         ];
     }
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 9df9c5492..eedee0b18 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -787,6 +787,55 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return false;
     };
 
+    createEraserOutline = (startInkCoordsIn: { X: number; Y: number }, endInkCoordsIn: { X: number; Y: number }) => {
+        const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii
+        const c = 0.551915024494; // circle tangent length to side ratio
+        const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y };
+        const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2);
+        const direction = { x: (movement.x / moveLen) * radius, y: (movement.y / moveLen) * radius };
+        const normal    = { x: -direction.y, y: direction.x }; // prettier-ignore
+
+        const startCoords = { X: startInkCoordsIn.X - direction.x, Y: startInkCoordsIn.Y - direction.y };
+        const endCoords = { X: endInkCoordsIn.X + direction.x, Y: endInkCoordsIn.Y + direction.y };
+        return new InkField([
+            // left bot arc
+            { X: startCoords.X,                                            Y: startCoords.Y }, // prettier-ignore
+            { X: startCoords.X + normal.x * c,                             Y: startCoords.Y + normal.y * c }, // prettier-ignore
+            { X: startCoords.X + direction.x + normal.x - direction.x * c, Y: startCoords.Y + direction.y + normal.y - direction.y * c },
+            { X: startCoords.X + direction.x + normal.x,                   Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore
+
+            // bot
+            { X: startCoords.X + direction.x + normal.x,                   Y: startCoords.Y + direction.y + normal.y }, // prettier-ignore
+            { X: startCoords.X + direction.x + normal.x + direction.x * c, Y: startCoords.Y + direction.y + normal.y + direction.y * c },
+            { X: endCoords.X - direction.x + normal.x - direction.x * c,   Y: endCoords.Y - direction.y + normal.y - direction.y * c }, // prettier-ignore
+            { X: endCoords.X - direction.x + normal.x,                     Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore
+
+            // right bot arc
+            { X: endCoords.X - direction.x + normal.x,                    Y: endCoords.Y - direction.y + normal.y }, // prettier-ignore
+            { X: endCoords.X - direction.x + normal.x + direction.x * c,  Y: endCoords.Y - direction.y + normal.y + direction.y * c}, // prettier-ignore
+            { X: endCoords.X + normal.x * c,                              Y: endCoords.Y + normal.y * c }, // prettier-ignore
+            { X: endCoords.X,                                             Y: endCoords.Y  }, // prettier-ignore
+
+            // right top arc
+            { X: endCoords.X,                                             Y: endCoords.Y  }, // prettier-ignore
+            { X: endCoords.X - normal.x * c,                              Y: endCoords.Y - normal.y * c }, // prettier-ignore
+            { X: endCoords.X - direction.x - normal.x + direction.x * c,  Y: endCoords.Y - direction.y - normal.y + direction.y * c}, // prettier-ignore
+            { X: endCoords.X - direction.x - normal.x,                    Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore
+
+            // top
+            { X: endCoords.X - direction.x - normal.x,                     Y: endCoords.Y - direction.y - normal.y }, // prettier-ignore
+            { X: endCoords.X - direction.x - normal.x - direction.x * c,   Y: endCoords.Y - direction.y - normal.y - direction.y * c}, // prettier-ignore
+            { X: startCoords.X + direction.x - normal.x + direction.x * c, Y: startCoords.Y + direction.y - normal.y + direction.y * c },
+            { X: startCoords.X + direction.x - normal.x,                   Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore
+
+            // left top arc
+            { X: startCoords.X + direction.x - normal.x,                   Y: startCoords.Y + direction.y - normal.y }, // prettier-ignore
+            { X: startCoords.X + direction.x - normal.x - direction.x * c, Y: startCoords.Y + direction.y - normal.y - direction.y * c }, // prettier-ignore
+            { X: startCoords.X - normal.x * c,                             Y: startCoords.Y - normal.y * c }, // prettier-ignore
+            { X: startCoords.X,                                            Y: startCoords.Y }, // prettier-ignore
+        ]);
+    };
+
     /**
      * Determines if the Eraser tool has intersected with an ink stroke in the current freeform collection.
      * @returns an array of tuples containing the intersected ink DocumentView and the t-value where it was intersected
@@ -1163,30 +1212,34 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * @returns
      */
     getOtherInkIntersections = (otherInkDocView: DocumentView, i: number, points: InkData, strokeToTVals: Map<InkingStroke, number[]>): Map<InkingStroke, number[]> => {
-        // InkingStroke of other ink strokes
-        const otherInk = otherInkDocView.ComponentView as InkingStroke;
-        // ink Data of other ink strokes
-        const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] };
-        for (var j = 0; j < otherInkData.length - 3; j += 4) {
-            const curve: Bezier = InkField.Segment(points, i); // eraser curve
-            const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve
-            this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => {
-                // Converting the Bezier.js Split type to a t-value number.
-                const t = +val.toString().split('/')[0];
-                if (k % 2 === 0) {
-                    // here, add to the map
-                    const inkList = strokeToTVals.get(otherInk);
-                    if (inkList !== undefined) {
-                        const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01);
-                        if (!inList) {
-                            inkList.push(t + Math.floor(j / 4));
+        this.childDocs
+            .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect)
+            .forEach(doc => {
+                // InkingStroke of other ink strokes
+                const otherInk = otherInkDocView.ComponentView as InkingStroke;
+                // ink Data of other ink strokes
+                const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] };
+                for (var j = 0; j < otherInkData.length - 3; j += 4) {
+                    const curve: Bezier = InkField.Segment(points, i); // eraser curve
+                    const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve
+                    this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => {
+                        // Converting the Bezier.js Split type to a t-value number.
+                        const t = +val.toString().split('/')[0];
+                        if (k % 2 === 0) {
+                            // here, add to the map
+                            const inkList = strokeToTVals.get(otherInk);
+                            if (inkList !== undefined) {
+                                const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01);
+                                if (!inList) {
+                                    inkList.push(t + Math.floor(j / 4));
+                                }
+                            } else {
+                                strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]);
+                            }
                         }
-                    } else {
-                        strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]);
-                    }
+                    });
                 }
             });
-        }
         return strokeToTVals;
     };
 
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 279d3c24c..86bd684be 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -324,7 +324,10 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean,
             }
         } else if (tool) {
             // pen or eraser
-            if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
+            if (Doc.ActiveTool === tool && tool === InkTool.Eraser) {
+                Doc.ActiveTool = InkTool.SegmentEraser;
+                console.log("erase click twice")
+            } else if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
                 Doc.ActiveTool = InkTool.None;
             } else {
                 Doc.ActiveTool = tool as any;
-- 
cgit v1.2.3-70-g09d2


From 8ca77556c3a9caba66faf37fbf259762c2084c0b Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Tue, 7 May 2024 17:28:21 -0400
Subject: hm

---
 src/client/documents/Documents.ts                  |  6 +++
 src/client/util/CurrentUserUtils.ts                | 10 +++++
 src/client/views/MainView.tsx                      |  2 +
 .../views/collections/CollectionCardDeckView.tsx   | 42 ++++++++++++-----
 src/client/views/global/globalScripts.ts           | 52 +++++++++++++++++++++-
 5 files changed, 100 insertions(+), 12 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index c453fd793..b4aa1c90c 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -495,6 +495,12 @@ export class DocumentOptions {
     hoverBackgroundColor?: string; // background color of a label when hovered
     userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)');
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
+
+    card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
+    card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
+    card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
+
+
 }
 
 export const DocOptions = new DocumentOptions();
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 15c3ddad6..cb10f0658 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -719,6 +719,14 @@ pie title Minerals in my tap water
             { title: "Center",    icon: "align-center",        toolTip: "Center Align Stack",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"center",     funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
         ]
     }
+    static cardTools(): Button[] {
+        return [
+            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
+        ]
+    }
     static viewTools(): Button[] {
         return [
             { title: "Snap",      icon: "th",                  toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
@@ -727,6 +735,7 @@ pie title Minerals in my tap water
             { title: "Clusters",  icon: "braille",             toolTip: "Show Doc Clusters",   btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"clusters",   funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
             { title: "Cards",     icon: "brain",               toolTip: "Flashcards",          btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"flashcards", funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
             { title: "Arrange",   icon:"arrow-down-short-wide",toolTip:"Toggle Auto Arrange",  btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"arrange",    funcs: {hidden: 'IsNoviceMode()'}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
+
         ]
     }
     static textTools():Button[] {
@@ -811,6 +820,7 @@ pie title Minerals in my tap water
             { title: "Doc",     icon: "Doc",           toolTip: "Freeform Doc tools",   subMenu: CurrentUserUtils.freeTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode, true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: CurrentUserUtils.stackTools(),  expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Card",    icon: "Sort",          toolTip: "Card sort",            subMenu: CurrentUserUtils.cardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: CurrentUserUtils.videoTools(),  expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Schema",  icon: "Schema",linearBtnWidth:58,toolTip: "Schema functions",subMenu: CurrentUserUtils.schemaTools(),expertMode: false,toolType:CollectionViewType.Schema,funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Schema is selected
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 56d28ee5d..e6ae57911 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -526,6 +526,8 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faZ,
                 fa.faArrowsUpToLine,
                 fa.faArrowsDownToLine,
+                fa.faPalette,
+                fa.faHourglassHalf
             ]
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index d0a796218..ab7aac267 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -159,14 +159,18 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     @computed get sortedDocsType() {
-        // This field is set to 'type' to sort documents by their type
-        // const typeField = 'type';
-
-        // Whether to sort in descending order
+        
         const desc = BoolCast(this.layoutDoc.sortDesc);
 
+        let sorted = []
+
+        for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
+            sorted[i] = this.childLayoutPairs[i]
+        }
+
+
         // Copy and sort documents by type
-        const docs = this.childLayoutPairs.sort((docA, docB) => {
+        const docs = sorted.sort((docA, docB) => {
             const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
             const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
 
@@ -177,10 +181,15 @@ export class CollectionCardView extends CollectionSubView() {
             if (desc) out *= -1; // Reverse the sort order if descending is true
             return out;
         });
+        
 
         return { docs };
     }
 
+    
+
+   
+
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
     @computed get contentSorted() {
@@ -213,9 +222,10 @@ export class CollectionCardView extends CollectionSubView() {
         // Map sorted documents to their rendered components
         return sortedDocs.map((childPair, index) => {
             // const childPair = { layout: doc, data: doc }; 
-            const isSelected = this.isSelected(index);
             const isHovered = this.hoveredNodeIndex === index;
-            const inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
+            const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
+            const isSelected = SelectionManager.IsSelected(childPair.layout);
+
 
 
 
@@ -234,7 +244,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
+                            translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
                             translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
@@ -250,7 +260,7 @@ export class CollectionCardView extends CollectionSubView() {
         // const currentIndex = NumCast(this.layoutDoc._carousel_index);
         const amCards = this.inactiveDocs().length;
         console.log(amCards + "lol")
-        const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
+        // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
 
         // const myInactives =
         const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
@@ -328,6 +338,18 @@ export class CollectionCardView extends CollectionSubView() {
         return 0;
     }
 
+    @computed get renderCardsSort(){
+        if (BoolCast(this._props.Document.card_sort_type) == true){
+            return this.contentSorted
+        }
+
+        else{
+            return this.content
+        }
+    }
+
+    
+
     render() {
         return (
             <div
@@ -345,7 +367,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.contentSorted}
+                    {this.renderCardsSort}
                 </div>
 
                 {/* <Card  className={`custom-modal-position step-${step}`}>
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 3fdc9a488..ffb1d751d 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -102,10 +102,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce', checkResult?: boolean, persist?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -135,6 +135,19 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
             checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false),
             setDoc: (doc:Doc,dv:DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
         }],
+        ['time', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time,
+        }],
+        ['docType', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type,
+        }],
+        ['color', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color,
+        }],
+
    ]);
 
     if (checkResult) {
@@ -145,6 +158,39 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
     setTimeout(() => batch.end(), 100);
 });
 
+// ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
+//     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
+//     const selected = SelectionManager.Docs.lastElement();
+//     // prettier-ignore
+//     const map: Map<'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+//         ['time', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time",
+//         }],
+//         ['docType', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type",
+//         }],
+//         ['color', {
+//             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+//             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color",
+//         }],
+//         // ['custom', {
+//         //     checkResult: () => RichTextMenu.Instance.textAlign,
+//         //     setDoc: () => value && editorView?.state ? RichTextMenu.Instance.align(editorView, editorView.dispatch, value):(Doc.UserDoc().textAlign = value),
+//         // }]
+//         // ,
+//     ]);
+
+//     if (checkResult) {
+//         return map.get(attr)?.checkResult(selected);
+//     }
+
+//     console.log('hey')
+//     SelectionManager.Views.map(dv => map.get(attr)?.setDoc(dv.layoutDoc, dv));
+//     console.log('success')
+// });
+
 ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highlight' | 'fontSize' | 'alignment', value: any, checkResult?: boolean) {
     const editorView = RichTextMenu.Instance?.TextView?.EditorView;
     const selected = SelectionManager.Docs.lastElement();
@@ -182,6 +228,8 @@ ScriptingGlobals.add(function setFontAttr(attr: 'font' | 'fontColor' | 'highligh
     map.get(attr)?.setDoc?.();
 });
 
+
+
 type attrname = 'noAutoLink' | 'dictation' | 'bold' | 'italics' | 'elide' | 'underline' | 'left' | 'center' | 'right' | 'vcent' | 'bullet' | 'decimal';
 type attrfuncs = [attrname, { checkResult: () => boolean; toggle: () => any }];
 
-- 
cgit v1.2.3-70-g09d2


From 4a01680bd22a0652dbdd0da5c3a7167ca8117440 Mon Sep 17 00:00:00 2001
From: eleanor-park <eleanor_park@brown.edu>
Date: Wed, 8 May 2024 22:22:29 -0400
Subject: close curve and bounding box fixes

---
 src/client/util/CurrentUserUtils.ts                |  10 +-
 src/client/views/MainView.tsx                      |   1 +
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 347 ++++++++++++---------
 src/client/views/global/globalScripts.ts           |  10 +-
 4 files changed, 214 insertions(+), 154 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b1673ff1c..3ee1b42aa 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -752,13 +752,13 @@ pie title Minerals in my tap water
         return [
             { title: "Pen",    toolTip: "Pen (Ctrl+P)",                     btnType: ButtonType.ToggleButton, icon: "pen-nib",    toolType: "pen",                            scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }},
             { title: "Write",  toolTip: "Write (Ctrl+Shift+P)",             btnType: ButtonType.ToggleButton, icon: "pen",        toolType: "write",                          scripts: {onClick:'{ return setActiveTool(this.toolType, false, _readOnly_);}' }, funcs: {hidden:"IsNoviceMode()" }},
-            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                toolType:"eraser",                          scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'},
+            { title: "Eraser", toolTip: "Eraser (Ctrl+E)",                  btnType: ButtonType.MultiToggleButton,                                                            scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'}, funcs: {toolType:"activeEraserTool()"},
               subMenu: [
                     { title: "Stroke",   toolTip: "Stroke Erase",           btnType: ButtonType.ToggleButton, icon: "eraser",      toolType:InkTool.StrokeEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmarks-lines",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
+                    { title: "Segment",  toolTip: "Segment Erase",          btnType: ButtonType.ToggleButton, icon: "xmark",toolType:InkTool.SegmentEraser,ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
                     { title: "Radius",   toolTip: "Radius Erase",           btnType: ButtonType.ToggleButton, icon: "circle-xmark",toolType:InkTool.RadiusEraser, ignoreClick: true, scripts: {onClick: '{ return setActiveTool(this.toolType, false, _readOnly_);}'} },
-            ]},  
-            { title: "Eraser Width",  toolTip: "Eraser Width",              btnType: ButtonType.NumberSliderButton,               toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1, funcs: {hidden:"isRadiusEraser()" }},
+            ]},
+            { title: "Eraser Width",  toolTip: "Eraser Width",              btnType: ButtonType.NumberSliderButton,               toolType: "eraserWidth", ignoreClick: true, scripts: {script: '{ return setInkProperty(this.toolType, value, _readOnly_);}'}, numBtnMin: 1, funcs: {hidden:"NotRadiusEraser()"}},
             { title: "Circle", toolTip: "Circle (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "circle",     toolType:GestureUtils.Gestures.Circle,      scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Square", toolTip: "Square (double tap to lock mode)", btnType: ButtonType.ToggleButton, icon: "square",     toolType:GestureUtils.Gestures.Rectangle,   scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
             { title: "Line",   toolTip: "Line (double tap to lock mode)",   btnType: ButtonType.ToggleButton, icon: "minus",      toolType:GestureUtils.Gestures.Line,        scripts: {onClick:`{ return setActiveTool(this.toolType, false, _readOnly_);}`, onDoubleClick:`{ return setActiveTool(this.toolType, true, _readOnly_);}`} },
@@ -1119,7 +1119,7 @@ pie title Minerals in my tap water
 ScriptingGlobals.add(function MySharedDocs() { return Doc.MySharedDocs; }, "document containing all shared Docs");
 ScriptingGlobals.add(function IsExploreMode() { return SnappingManager.ExploreMode; }, "is Dash in exploration mode");
 ScriptingGlobals.add(function IsNoviceMode() { return Doc.noviceMode; }, "is Dash in novice mode");
-ScriptingGlobals.add(function isRadiusEraser() { return !(Doc.ActiveTool === InkTool.RadiusEraser); }, "is the eraser selected");
+ScriptingGlobals.add(function NotRadiusEraser() { return Doc.ActiveTool !== InkTool.RadiusEraser; }, "is the active tool anything but the radius eraser");
 ScriptingGlobals.add(function toggleComicMode() { Doc.UserDoc().renderStyle = Doc.UserDoc().renderStyle === "comic" ? undefined : "comic"; }, "switches between comic and normal document rendering");
 ScriptingGlobals.add(function importDocument() { return CurrentUserUtils.importDocument(); }, "imports files from device directly into the import sidebar");
 ScriptingGlobals.add(function setInkToolDefaults() { Doc.ActiveTool = InkTool.None; });
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 56db0c488..d0b3221b4 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -361,6 +361,7 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faDeleteLeft,
                 fa.faXmarksLines,
                 fa.faCircleXmark,
+                fa.faXmark,
                 fa.faExclamation,
                 fa.faFileAlt,
                 fa.faFileAudio,
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index eedee0b18..2e174be30 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -1,5 +1,7 @@
+import { inside } from '@turf/turf';
 import { Bezier } from 'bezier-js';
 import { Colors } from 'browndash-components';
+import { validationResult } from 'express-validator';
 import { action, computed, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import { computedFn } from 'mobx-utils';
@@ -35,7 +37,7 @@ import { Timeline } from '../../animationtimeline/Timeline';
 import { ContextMenu } from '../../ContextMenu';
 import { GestureOverlay } from '../../GestureOverlay';
 import { CtrlKey } from '../../GlobalKeyHandler';
-import { ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke';
+import { ActiveEraserWidth, ActiveInkWidth, InkingStroke, SetActiveInkColor, SetActiveInkWidth } from '../../InkingStroke';
 import { LightboxView } from '../../LightboxView';
 import { CollectionFreeFormDocumentView } from '../../nodes/CollectionFreeFormDocumentView';
 import { SchemaCSVPopUp } from '../../nodes/DataVizBox/SchemaCSVPopUp';
@@ -618,11 +620,15 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         break; // the GestureOverlay handles ink stroke input -- either as gestures, or drying as ink strokes that are added to document views
                     case InkTool.StrokeEraser:
                     case InkTool.SegmentEraser:
-                    case InkTool.RadiusEraser:
                         this._batch = UndoManager.StartBatch('collectionErase');
                         this._eraserPts.length = 0;
                         setupMoveUpEvents(this, e, this.onEraserMove, this.onEraserUp, emptyFunction);
                         break;
+                    case InkTool.RadiusEraser:
+                        this._batch = UndoManager.StartBatch('collectionErase');
+                        this._eraserPts.length = 0;
+                        setupMoveUpEvents(this, e, this.onRadiusEraserMove, this.onEraserUp, emptyFunction);
+                        break;
                     case InkTool.None:
                         if (!(this._props.layoutEngine?.() || StrCast(this.layoutDoc._layoutEngine))) {
                             this._hitCluster = this.pickCluster(this.screenToFreeformContentsXf.transformPoint(e.clientX, e.clientY));
@@ -734,7 +740,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
      * Erases strokes by intersecting them with an invisible "eraser stroke".
      *  By default this iterates through all intersected ink strokes, determines their segmentation, draws back the non-intersected segments,
      * and deletes the original stroke.
-     *  However, if Shift is held, then no segmentation is done -- instead any intersected stroke is deleted in its entirety.
      */
     @action
     onEraserMove = (e: PointerEvent, down: number[], delta: number[]) => {
@@ -750,10 +755,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                 // create a new curve by appending all curves of the current segment together in order to render a single new stroke.
                 if (Doc.ActiveTool !== InkTool.StrokeEraser) {
                     this._eraserLock++;
-                    const segments =
-                        Doc.ActiveTool === InkTool.SegmentEraser
-                            ? this.segmentErase(intersect.inkView, intersect.t) // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
-                            : this.radiusErase(intersect.inkView, { X: this._eraserPts[0][0], Y: this._eraserPts[0][1] }, currPoint);
+                    const segments = this.segmentErase(intersect.inkView, intersect.t); // intersect.t is where the eraser intersected the ink stroke - want to remove the segment that starts at the intersection just before this t value and goes to the one just after it
                     segments?.forEach(segment =>
                         this.forceStrokeGesture(
                             e,
@@ -764,12 +766,44 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     setTimeout(() => this._eraserLock--);
                 }
                 // Lower ink opacity to give the user a visual indicator of deletion.
-                intersect.inkView.layoutDoc.opacity = 0.2;
+                intersect.inkView.layoutDoc.opacity = 0;
                 intersect.inkView.layoutDoc.dontIntersect = true;
             }
         });
         return false;
     };
+
+    @action
+    onRadiusEraserMove = (e: PointerEvent, down: number[], delta: number[]) => {
+        const currPoint = { X: e.clientX, Y: e.clientY };
+        this._eraserPts.push([currPoint.X, currPoint.Y]);
+        this._eraserPts = this._eraserPts.slice(Math.max(0, this._eraserPts.length - 5));
+        if (this._eraserLock) return false; // bcz: should be fixed by putting it on a queue to be processed after the last eraser movement is processed.
+        const strokeMap: Map<DocumentView, number[]> = this.getRadiusEraserIntersections({ X: currPoint.X - delta[0], Y: currPoint.Y - delta[1] }, currPoint);
+        strokeMap.forEach((intersects, stroke) => {
+            if (!this._deleteList.includes(stroke)) {
+                this._deleteList.push(stroke);
+                SetActiveInkWidth(StrCast(stroke.Document.stroke_width?.toString()) || '1');
+                SetActiveInkColor(StrCast(stroke.Document.color?.toString()) || 'black');
+                this._eraserLock++;
+                // create a new curve by appending all curves of the current segment together in order to render a single new stroke.
+                const segments = this.radiusErase(stroke, intersects.sort());
+                segments?.forEach(segment =>
+                    this.forceStrokeGesture(
+                        e,
+                        GestureUtils.Gestures.Stroke,
+                        segment.reduce((data, curve) => [...data, ...curve.points.map(p => stroke.ComponentView?.ptToScreen?.({ X: p.x, Y: p.y }) ?? { X: 0, Y: 0 })], [] as PointData[])
+                    )
+                );
+                setTimeout(() => this._eraserLock--);
+            }
+            // Lower ink opacity to give the user a visual indicator of deletion.
+            stroke.layoutDoc.opacity = 0;
+            stroke.layoutDoc.dontIntersect = true;
+        });
+        return false;
+    };
+
     forceStrokeGesture = (e: PointerEvent, gesture: GestureUtils.Gestures, points: InkData, text?: any) => {
         this.onGesture(e, new GestureUtils.GestureEvent(gesture, points, GestureOverlay.getBounds(points), text));
     };
@@ -788,7 +822,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     };
 
     createEraserOutline = (startInkCoordsIn: { X: number; Y: number }, endInkCoordsIn: { X: number; Y: number }) => {
-        const radius = ActiveEraserWidth() / 2 + 3; // reduce values to avoid extreme radii
+        const radius = ActiveEraserWidth() + 3; // add 3 to avoid eraser being too thin
         const c = 0.551915024494; // circle tangent length to side ratio
         const movement = { x: endInkCoordsIn.X - startInkCoordsIn.X, y: endInkCoordsIn.Y - startInkCoordsIn.Y };
         const moveLen = Math.sqrt(movement.x ** 2 + movement.y ** 2);
@@ -836,6 +870,39 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         ]);
     };
 
+    /**
+     * Ray-tracing algorithm to determine whether a point is inside the eraser outline
+     * @param eraserOutline 
+     * @param point 
+     * @returns 
+     */
+    insideEraserOutline = (eraserOutline: InkData, point: { X: number; Y: number }) => {
+        var isInside = false;
+        if (!isNaN(eraserOutline[0].X) && !isNaN(eraserOutline[0].Y)) {
+            var minX = eraserOutline[0].X, maxX = eraserOutline[0].X;
+            var minY = eraserOutline[0].Y, maxY = eraserOutline[0].Y;
+            for (var i = 1; i < eraserOutline.length; i++) {
+                const currPoint: {X: number, Y: number} = eraserOutline[i];
+                minX = Math.min(currPoint.X, minX);
+                maxX = Math.max(currPoint.X, maxX);
+                minY = Math.min(currPoint.Y, minY);
+                maxY = Math.max(currPoint.Y, maxY);
+            }
+
+            if (point.X < minX || point.X > maxX || point.Y < minY || point.Y > maxY) {
+                return false;
+            }
+
+            for (var i = 0, j = eraserOutline.length - 1; i < eraserOutline.length; j = i, i++) {
+                if ((eraserOutline[i].Y > point.Y) != (eraserOutline[j].Y > point.Y) &&
+                    point.X < (eraserOutline[j].X - eraserOutline[i].X) * (point.Y - eraserOutline[i].Y) / (eraserOutline[j].Y - eraserOutline[i].Y) + eraserOutline[i].X ) {
+                    isInside = !isInside;
+                }
+            }
+        }
+        return isInside;
+    };
+
     /**
      * Determines if the Eraser tool has intersected with an ink stroke in the current freeform collection.
      * @returns an array of tuples containing the intersected ink DocumentView and the t-value where it was intersected
@@ -880,94 +947,141 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             );
     };
 
+    getRadiusEraserIntersections = (lastPoint: { X: number; Y: number }, currPoint: { X: number; Y: number }) => {
+        const eraserRadius = ActiveEraserWidth() + 3;
+        const eraserMin = { X: Math.min(lastPoint.X, currPoint.X) - eraserRadius, Y: Math.min(lastPoint.Y, currPoint.Y) - eraserRadius };
+        const eraserMax = { X: Math.max(lastPoint.X, currPoint.X) + eraserRadius, Y: Math.max(lastPoint.Y, currPoint.Y) + eraserRadius};
+        const strokeToTVals = new Map<DocumentView, number[]>();
+        const intersectingStrokes = this.childDocs
+            .map(doc => DocumentManager.Instance.getDocumentView(doc, this.DocumentView?.()))
+            .filter(inkView => inkView?.ComponentView instanceof InkingStroke) // filter to all inking strokes
+            .map(inkView => ({ inkViewBounds: inkView!.getBounds, inkStroke: inkView!.ComponentView as InkingStroke, inkView: inkView! }))
+            .filter(
+                ({ inkViewBounds }) =>
+                    inkViewBounds && // bounding box of eraser segment and ink stroke overlap
+                    eraserMin.X <= inkViewBounds.right &&
+                    eraserMin.Y <= inkViewBounds.bottom &&
+                    eraserMax.X >= inkViewBounds.left &&
+                    eraserMax.Y >= inkViewBounds.top
+            );
+        console.log("itersectnig strokes", intersectingStrokes);
+        intersectingStrokes.forEach(({ inkStroke, inkView }) => {
+            const { inkData } = inkStroke.inkScaledData();
+            const prevPointInkSpace = inkStroke.ptFromScreen(lastPoint);
+            const currPointInkSpace = inkStroke.ptFromScreen(currPoint);
+            const eraserInkData = this.createEraserOutline(prevPointInkSpace, currPointInkSpace).inkData;
+            // add the ends of the stroke in as "intersections"
+            if (this.insideEraserOutline(eraserInkData, inkData[0])) {
+                strokeToTVals.set(inkView, [0]);
+            }
+            if (this.insideEraserOutline(eraserInkData, inkData[inkData.length - 1])) {
+                const inkList = strokeToTVals.get(inkView);
+                if (inkList !== undefined) {
+                    inkList.push(Math.floor(inkData.length / 4) + 1);
+                } else {
+                    strokeToTVals.set(inkView, [Math.floor(inkData.length / 4) + 1]);
+                }
+            }
+            for (var i = 0; i < inkData.length - 3; i += 4) {
+                // iterate over each segment of bezier curve
+                for (var j = 0; j < eraserInkData.length - 3; j += 4) {
+                    const intersectCurve: Bezier = InkField.Segment(inkData, i); // other curve
+                    const eraserCurve: Bezier = InkField.Segment(eraserInkData, j); // eraser curve
+                    this.bintersects(intersectCurve, eraserCurve).forEach((val: string | number, k: number) => {
+                        // Converting the Bezier.js Split type to a t-value number.
+                        const t = +val.toString().split('/')[0];
+                        if (k % 2 === 0) {
+                            // here, add to the map
+                            const inkList = strokeToTVals.get(inkView);
+                            if (inkList !== undefined) {
+                                const tValOffset = ActiveEraserWidth() / 1030; // to prevent tVals from being added when too close, but scaled by eraser width
+                                const inList = inkList.some(val => Math.abs(val - (t + Math.floor(i / 4))) <= tValOffset);
+                                if (!inList) {
+                                    inkList.push(t + Math.floor(i / 4));
+                                }
+                            } else {
+                                strokeToTVals.set(inkView, [t + Math.floor(i / 4)]);
+                            }
+                        }
+                    });
+                }
+            }
+        });
+        console.log("strokeToTVals", strokeToTVals);
+        return strokeToTVals;
+    };
+
+    /**
+     * Splits the passed in ink stroke at the intersection t values. Generally operates in pairs of t values, where
+     * the first t value is the start of the erased portion and the following t value is the end.
+     * @param ink the ink stroke DocumentView to split
+     * @param tVals all the t values to split the ink stroke at
+     * @returns a list of the new segments with the erased part removed
+     */
     @action
-    radiusErase = (ink: DocumentView, startPt: { X: number; Y: number }, screenEraserPt: { X: number; Y: number }): Segment[] => {
+    radiusErase = (ink: DocumentView, tVals: number[]): Segment[] => {
         const segments: Segment[] = [];
-        const startInkCoords = ink.ComponentView?.ptFromScreen?.(startPt);
-        const inkCoords = ink.ComponentView?.ptFromScreen?.(screenEraserPt); // coordinates in ink space
-        if (!inkCoords || !startInkCoords) return [];
-
-        var eraseSegment: Segment = []; // for eraser visualization
         const inkStroke = ink?.ComponentView as InkingStroke;
-
-        const eraserStroke: InkData = inkStroke.splitByEraser(startInkCoords, inkCoords).inkData;
-        const strokeToTVals: Map<InkingStroke, number[]> = new Map<InkingStroke, number[]>();
-        for (var i = 0; i < eraserStroke.length - 3; i += 4) {
-            eraseSegment.push(InkField.Segment(eraserStroke, i)); // for eraser visualization
-            this.getOtherInkIntersections(ink, i, eraserStroke, strokeToTVals);
+        const { inkData } = inkStroke.inkScaledData();
+        var currSegment: Segment = [];
+        if (tVals.length % 2 !== 0) { // should always have even tVals
+            for (var i = 0; i < inkData.length - 3; i +=4) {
+                currSegment.push(InkField.Segment(inkData, i));
+            }
+            if (currSegment.length > 0) {
+                segments.push(currSegment);
+                return segments;
+            }
         }
-        strokeToTVals.forEach((tVals, inkStroke) => {
-            var segment1: Segment = [];
-            var segment2: Segment = [];
-            const { inkData } = inkStroke.inkScaledData();
-            tVals.sort();
-            console.log('TVALS', inkStroke, tVals);
 
-            var hasSplit = false;
-            var continueErasing = false;
-
-            // below is curve splitting logic
-            if (tVals.length) {
-                for (var i = 0; i < inkData.length - 3; i += 4) {
-                    const inkSegment: Bezier = InkField.Segment(inkData, i);
-                    const currCurveT = Math.floor(i / 4);
+        var continueErasing = false;
+        var firstSegment: Segment = [];
+        // early return if nothing to split on
+        if (tVals.length === 0 || (tVals.length === 1 && tVals[0] === 0)) {
+            return segments;
+        }
 
-                    if (tVals.length === 2) {
-                        if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) {
-                            segment1.push(inkSegment.split(0, tVals[0] - currCurveT));
+        for (var i = 0; i < inkData.length - 3; i += 4) {
+            const currCurveT = Math.floor(i/4);
+            const inkBezier: Bezier = InkField.Segment(inkData, i);
+            const segmentTs = tVals.filter(t => t >= currCurveT && t < currCurveT + 1);
+
+            if (segmentTs.length > 0) {
+                for (var j = 0; j < segmentTs.length; j++) {
+                    // if the first end of the segment is within the eraser
+                    if (segmentTs[j] === 0 ) {
+                        continueErasing = true;
+                    } else if (segmentTs[j] === Math.floor(inkData.length / 4) + 1) {
+                        break;
+                    }else {
+                        if (!continueErasing) {
+                            currSegment.push(inkBezier.split(0, segmentTs[j] - currCurveT));
                             continueErasing = true;
-                            if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) {
-                                segment2.push(inkSegment.split(tVals[1] - currCurveT, 1));
-                                continueErasing = false;
-                                hasSplit = true;
-                            }
-                        } else if (tVals[1] > currCurveT && tVals[1] < currCurveT + 1) {
-                            segment2.push(inkSegment.split(tVals[1] - currCurveT, 1));
-                            continueErasing = false;
-                            hasSplit = true;
-                        } else if (!continueErasing) {
-                            if (hasSplit) {
-                                segment2.push(inkSegment);
-                            } else {
-                                segment1.push(inkSegment);
-                            }
-                        }
-                    } else if (tVals.length === 1) {
-                        if (tVals[0] > currCurveT && tVals[0] < currCurveT + 1) {
-                            // this heuristic for determine which segment to keep is not quite right even though it will work most of the time.
-                            // We should really store the eraser intersection normal in getOtherInkIntersections,
-                            // and then test its dot product with the tangent of the stroke at the intersection point.
-                            // if the dot product is positive, then erase the first part of the stroke, otherwise the second.
-                            const leftDist = Utils.ptDistance({ x: inkCoords.X, y: inkCoords.Y }, inkSegment.points.lastElement());
-                            const rightDist = Utils.ptDistance({ x: inkCoords.X, y: inkCoords.Y }, inkSegment.points[0]);
-                            const splits = inkSegment.split(tVals[0] - currCurveT);
-                            if (leftDist < rightDist) {
-                                // if it's on the first end
-                                segment1.push(splits.left);
-                                hasSplit = true;
-                            } else {
-                                segment1.push(splits.right);
-                                hasSplit = true;
-                            }
                         } else {
-                            if (tVals[0] < Math.floor(inkData.length / 4) - tVals[0] && hasSplit) {
-                                segment1.push(inkSegment);
-                            } else if (tVals[0] >= Math.floor(inkData.length / 4) - tVals[0] && !hasSplit) {
-                                segment1.push(inkSegment);
+                            continueErasing = false;
+                            if (currSegment.length > 0) {
+                                segments.push(currSegment);
+                                if (firstSegment.length === 0) {
+                                    firstSegment = currSegment;
+                                }
+                                currSegment = [];
                             }
+                            currSegment.push(inkBezier.split(segmentTs[j] - currCurveT, 1));
                         }
                     }
                 }
+            } else {
+                if (!continueErasing) { // push the bezier piece if not in the eraser circle
+                    currSegment.push(inkBezier);
+                }
             }
-            if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
-                segments.push(segment1);
-            }
-            if (segment2.length && (Math.abs(segment2[0].points[0].x - segment2[0].points.lastElement().x) > 0.5 || Math.abs(segment2[0].points[0].y - segment2[0].points.lastElement().y) > 0.5)) {
-                segments.push(segment2);
+        }
+        if (currSegment.length > 0) {
+            if (InkingStroke.IsClosed(inkData)) {
+                currSegment = currSegment.concat(firstSegment);
             }
-        });
-
-        segments.push(eraseSegment); // for eraser visualization
+            segments.push(currSegment);
+        }
         return segments;
     };
 
@@ -993,7 +1107,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             const inkSegment: Bezier = InkField.Segment(inkData, i);
             var currIntersects = this.getInkIntersections(i, ink, inkSegment).sort();
             // get current segments intersections (if any) and add the curve index
-            currIntersects = currIntersects.map(tVal => tVal + Math.floor(i / 4));
+            currIntersects = currIntersects.filter(tVal => tVal > 0 && tVal < 1).map(tVal => tVal + Math.floor(i / 4));
             if (currIntersects.length) {
                 intersections = [...intersections, ...currIntersects];
                 for (var j = 0; j < currIntersects.length; j++) {
@@ -1002,19 +1116,9 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         }
 
-        // for closed curve bookkeeping
         var isClosedCurve = false;
-        if (intersections[0] === 0) {
+        if (InkingStroke.IsClosed(inkData)) {
             isClosedCurve = true;
-
-            // now reduce intersections list to the actual intersections because closed curves have additional ones with itself
-            const indices = intersections.map((value, index) => (value > 0.0001 && value < Math.floor(inkData.length / 4) ? index : -1)).filter(index => index !== -1);
-
-            // Filter intersections and segmentIndexes based on validIndices
-            intersections = indices.map(index => intersections[index]);
-            segmentIndexes = indices.map(index => segmentIndexes[index]);
-            // intersections = intersections.slice(1, intersections.length ); // take the 0 intersection out
-            // segmentIndexes = segmentIndexes.slice(1, segmentIndexes.length); // same for indexes
         }
 
         if (intersections.length) {
@@ -1068,7 +1172,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         }
                     }
                 } else if (splitSegment1 === -1) {
-                    // case where left end is erased
+                    // case where first end is erased
                     if (currCurveT === splitSegment2) {
                         segment2.push(inkSegment.split(intersections[closestTs[1]] - currCurveT, 1));
                         hasSplit = true;
@@ -1081,15 +1185,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                         }
                     }
                 } else {
-                    // case where right end is erased
+                    // case where last end is erased
                     if (currCurveT === segmentIndexes[0] && isClosedCurve) {
                         segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
                         hasSplit = true;
                     } else if (currCurveT === splitSegment1) {
                         segment1.push(inkSegment.split(0, intersections[closestTs[0]] - currCurveT));
-                        hasSplit = false; // although this is not technically true, we set to false so the segments after don't get added
-                        // } else if (isClosedCurve && currCurveT === segmentIndexes[1]) {
-                        //     segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
+                        hasSplit = true; 
                     } else {
                         if ((isClosedCurve && hasSplit) || (!isClosedCurve && !hasSplit)) {
                             segment1.push(inkSegment);
@@ -1099,6 +1201,11 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             }
         }
 
+        if (isClosedCurve && segment1.length > 0 && segment2.length > 0) {
+            segment2 = segment2.concat(segment1);
+            segment1 = [];
+        }
+
         // push 1 or both segments if they are not empty
         if (segment1.length && (Math.abs(segment1[0].points[0].x - segment1[0].points.lastElement().x) > 0.5 || Math.abs(segment1[0].points[0].y - segment1[0].points.lastElement().y) > 0.5)) {
             segments.push(segment1);
@@ -1203,46 +1310,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         return tVals;
     };
 
-    /**
-     * For radius erase, a function to find an eraser's intersections with a single ink stroke
-     * @param otherInkDocVIew the ink document that is being erased
-     * @param i the index of the eraser's segment
-     * @param points the eraser's ink data points
-     * @param strokeToTVals Map of InkingStroke to the tVals of its intersections with the eraser
-     * @returns
-     */
-    getOtherInkIntersections = (otherInkDocView: DocumentView, i: number, points: InkData, strokeToTVals: Map<InkingStroke, number[]>): Map<InkingStroke, number[]> => {
-        this.childDocs
-            .filter(doc => doc.type === DocumentType.INK && !doc.dontIntersect)
-            .forEach(doc => {
-                // InkingStroke of other ink strokes
-                const otherInk = otherInkDocView.ComponentView as InkingStroke;
-                // ink Data of other ink strokes
-                const { inkData: otherInkData } = otherInk?.inkScaledData() ?? { inkData: [] };
-                for (var j = 0; j < otherInkData.length - 3; j += 4) {
-                    const curve: Bezier = InkField.Segment(points, i); // eraser curve
-                    const otherCurve: Bezier = InkField.Segment(otherInkData, j); // other curve
-                    this.bintersects(otherCurve, curve).forEach((val: string | number, k: number) => {
-                        // Converting the Bezier.js Split type to a t-value number.
-                        const t = +val.toString().split('/')[0];
-                        if (k % 2 === 0) {
-                            // here, add to the map
-                            const inkList = strokeToTVals.get(otherInk);
-                            if (inkList !== undefined) {
-                                const inList = inkList.some(val => Math.abs(val - (t + Math.floor(j / 4))) <= 0.01);
-                                if (!inList) {
-                                    inkList.push(t + Math.floor(j / 4));
-                                }
-                            } else {
-                                strokeToTVals.set(otherInk, [t + Math.floor(j / 4)]);
-                            }
-                        }
-                    });
-                }
-            });
-        return strokeToTVals;
-    };
-
     @action
     zoom = (pointX: number, pointY: number, deltaY: number): void => {
         if (this.Document.isGroup || this.Document[(this._props.viewField ?? '_') + 'freeform_noZoom']) return;
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 5c5f8de03..19741e2e0 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -341,10 +341,7 @@ function setActiveTool(tool: InkTool | GestureUtils.Gestures, keepPrim: boolean,
                 Doc.UserDoc().activeEraserTool = tool;
             }
             // pen or eraser
-            if (Doc.ActiveTool === tool && tool === InkTool.Eraser) {
-                Doc.ActiveTool = InkTool.SegmentEraser;
-                console.log("erase click twice")
-            } else if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
+            if (Doc.ActiveTool === tool && !GestureOverlay.Instance.InkShape && !keepPrim) {
                 Doc.ActiveTool = InkTool.None;
             } else {
                 Doc.ActiveTool = tool as any;
@@ -362,11 +359,6 @@ ScriptingGlobals.add(function activeEraserTool() {
     return StrCast(Doc.UserDoc().activeEraserTool, InkTool.StrokeEraser);
 }, 'returns the current eraser tool');
 
-// ScriptingGlobals.add(function setEraserProperty(option: 'eraseWidth', value: any, checkResult?: boolean) {
-//     setInk: (doc: Doc) => (doc[DocData].eraserWidth = NumCast(value))
-//     InkingStroke.setEraserRadius(NumCast(value));
-// })
-
 // toggle: Set overlay status of selected document
 ScriptingGlobals.add(function setInkProperty(option: 'inkMask' | 'labels' | 'fillColor' | 'strokeWidth' | 'strokeColor' | 'eraserWidth', value: any, checkResult?: boolean) {
     const selected = SelectionManager.Docs.lastElement() ?? Doc.UserDoc();
-- 
cgit v1.2.3-70-g09d2


From 4b4d77f99bd55e6de0593c3acd1cf5798ae038bf Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 10 May 2024 14:05:01 -0400
Subject: added an always option for OpenWhere lightbox.  cleaned up/fixed
 making collections capable of being a lightbox.

---
 src/client/util/DocumentManager.ts                       |  4 ++--
 src/client/util/RTFMarkup.tsx                            |  8 ++++----
 src/client/views/DocumentDecorations.tsx                 | 16 ++++++++--------
 src/client/views/LightboxView.tsx                        |  2 +-
 src/client/views/PropertiesView.tsx                      |  3 ++-
 src/client/views/collections/CollectionDockingView.tsx   |  2 +-
 src/client/views/collections/TabDocView.tsx              | 10 +---------
 src/client/views/collections/TreeView.tsx                |  2 +-
 .../collectionFreeForm/CollectionFreeFormView.tsx        | 11 ++++++-----
 src/client/views/nodes/DocumentView.tsx                  | 16 ++++------------
 src/client/views/nodes/OpenWhere.ts                      |  2 ++
 11 files changed, 32 insertions(+), 44 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 97051207b..09a8194ca 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -264,11 +264,11 @@ export class DocumentManager {
                 (!DocumentView.LightboxDoc() && docContextPath.some(doc => DocumentView.activateTabView(doc))) || DocumentViewInternal.addDocTabFunc(docContextPath[0], options.openLocation ?? OpenWhere.addRight);
                 this.AddViewRenderedCb(docContextPath[0], dv => res(dv));
             }));
-        if (options.openLocation === OpenWhere.lightbox) {
+        if (options.openLocation?.includes(OpenWhere.lightbox)) {
             // even if we found the document view, if the target is a lightbox, we try to open it in the lightbox to preserve lightbox semantics (eg, there's only one active doc in the lightbox)
             const target = DocCast(targetDoc.annotationOn, targetDoc);
             const contextView = this.getDocumentView(DocCast(target.embedContainer));
-            if (contextView?.ComponentView?.addDocTab?.(target, OpenWhere.lightbox)) {
+            if (contextView?.ComponentView?.addDocTab?.(target, options.openLocation)) {
                 await new Promise<void>(waitres => {
                     setTimeout(() => waitres());
                 });
diff --git a/src/client/util/RTFMarkup.tsx b/src/client/util/RTFMarkup.tsx
index 248fda7e3..a07ad2047 100644
--- a/src/client/util/RTFMarkup.tsx
+++ b/src/client/util/RTFMarkup.tsx
@@ -26,10 +26,6 @@ export class RTFMarkup extends React.Component<{}> {
     @computed get cheatSheet() {
         return (
             <div style={{ background: SnappingManager.userBackgroundColor, color: SnappingManager.userColor, textAlign: 'initial', height: '100%' }}>
-                <p>
-                    <b style={{ fontSize: 'larger' }}>(@wiki:phrase)</b>
-                    {` display wikipedia page for entered text (terminate with carriage return)`}
-                </p>
                 <p>
                     <b style={{ fontSize: 'larger' }}>(( any text ))</b>
                     {` submit text to Chat GPT to have results appended afterward`}
@@ -106,6 +102,10 @@ export class RTFMarkup extends React.Component<{}> {
                     <b style={{ fontSize: 'larger' }}>{`%h `}</b>
                     {`  start a block of text that begins with a hanging indent`}
                 </p>
+                <p>
+                    <b style={{ fontSize: 'larger' }}>@(wiki:phrase)</b>
+                    {` display wikipedia page for entered text (terminate with carriage return)`}
+                </p>
                 <p>
                     <b style={{ fontSize: 'larger' }}>{`@(doctitle) `}</b>
                     {`  hyperlink to document specified by it’s title`}
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index fd44909c0..93c3e3338 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -32,7 +32,7 @@ import { Colors } from './global/globalEnums';
 import { CollectionFreeFormDocumentView } from './nodes/CollectionFreeFormDocumentView';
 import { DocumentView } from './nodes/DocumentView';
 import { ImageBox } from './nodes/ImageBox';
-import { OpenWhereMod } from './nodes/OpenWhere';
+import { OpenWhere, OpenWhereMod } from './nodes/OpenWhere';
 import { FormattedTextBox } from './nodes/formattedText/FormattedTextBox';
 
 interface DocumentDecorationsProps {
@@ -255,28 +255,28 @@ export class DocumentDecorations extends ObservableReactComponent<DocumentDecora
         e.stopPropagation();
     };
     onMaximizeClick = (e: any): void => {
-        const selectedDocs = DocumentView.SelectedDocs();
-        if (selectedDocs.length) {
+        const selView = DocumentView.Selected()[0];
+        if (selView) {
             if (e.ctrlKey) {
                 // open an embedding in a new tab with Ctrl Key
-                CollectionDockingView.AddSplit(Doc.BestEmbedding(selectedDocs[0]), OpenWhereMod.right);
+                CollectionDockingView.AddSplit(Doc.BestEmbedding(selView.Document), OpenWhereMod.right);
             } else if (e.shiftKey) {
                 // open centered in a new workspace with Shift Key
-                const embedding = Doc.MakeEmbedding(selectedDocs[0]);
+                const embedding = Doc.MakeEmbedding(selView.Document);
                 embedding.embedContainer = undefined;
                 embedding.x = -NumCast(embedding._width) / 2;
                 embedding.y = -NumCast(embedding._height) / 2;
                 CollectionDockingView.AddSplit(Docs.Create.FreeformDocument([embedding], { title: 'Tab for ' + embedding.title }), OpenWhereMod.right);
             } else if (e.altKey) {
                 // open same document in new tab
-                CollectionDockingView.ToggleSplit(selectedDocs[0], OpenWhereMod.right);
+                CollectionDockingView.ToggleSplit(selView.Document, OpenWhereMod.right);
             } else {
-                let openDoc = selectedDocs[0];
+                let openDoc = selView.Document;
                 if (openDoc.layout_fieldKey === 'layout_icon') {
                     openDoc = Doc.GetEmbeddings(openDoc).find(embedding => !embedding.embedContainer) ?? Doc.MakeEmbedding(openDoc);
                     Doc.deiconifyView(openDoc);
                 }
-                DocumentView.SetLightboxDoc(openDoc, undefined, selectedDocs.slice(1));
+                selView._props.addDocTab(openDoc, OpenWhere.lightboxAlways);
             }
         }
         DocumentView.DeselectAll();
diff --git a/src/client/views/LightboxView.tsx b/src/client/views/LightboxView.tsx
index 269f4fa83..7198c7f05 100644
--- a/src/client/views/LightboxView.tsx
+++ b/src/client/views/LightboxView.tsx
@@ -341,5 +341,5 @@ export class LightboxTourBtn extends React.Component<LightboxTourBtnProps> {
 
 // eslint-disable-next-line prefer-arrow-callback
 ScriptingGlobals.add(function deiconifyViewToLightbox(documentView: DocumentView) {
-    LightboxView.Instance.AddDocTab(documentView.Document, OpenWhere.lightbox, 'layout'); // , 0);
+    LightboxView.Instance.AddDocTab(documentView.Document, OpenWhere.lightboxAlways, 'layout'); // , 0);
 });
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index b03c1a64e..e4ca3daeb 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1471,7 +1471,8 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                                 <option value={OpenWhere.addRight}>Opening in new right pane</option>
                                 <option value={OpenWhere.replaceLeft}>Replacing left tab</option>
                                 <option value={OpenWhere.replaceRight}>Replacing right tab</option>
-                                <option value={OpenWhere.lightbox}>Opening in lightbox</option>
+                                <option value={OpenWhere.lightboxAlways}>Opening in lightbox always</option>
+                                <option value={OpenWhere.lightbox}>Opening in lightbox if not visible</option>
                                 <option value={OpenWhere.add}>Opening in new tab</option>
                                 <option value={OpenWhere.replace}>Replacing current tab</option>
                                 <option value={OpenWhere.inParent}>Opening in same collection</option>
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index 8fb2b30f1..a723dc69d 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -634,7 +634,7 @@ export class CollectionDockingView extends CollectionSubView() {
 ScriptingGlobals.add(
     // eslint-disable-next-line prefer-arrow-callback
     function openInLightbox(doc: any) {
-        CollectionDockingView.Instance?._props.addDocTab(doc, OpenWhere.lightbox);
+        CollectionDockingView.Instance?._props.addDocTab(doc, OpenWhere.lightboxAlways);
     },
     'opens up document in a lightbox',
     '(doc: any)'
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index afd584154..46f61290e 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -549,15 +549,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         // prettier-ignore
         switch (whereFields[0]) {
             case undefined:
-            case OpenWhere.lightbox:   if (this.layoutDoc?._isLightbox) {
-                                            const lightboxView = !docs[0].annotationOn && DocCast(docs[0].embedContainer) ? DocumentView.getFirstDocumentView(DocCast(docs[0].embedContainer)) : undefined;
-                                            const data = lightboxView?.dataDoc[Doc.LayoutFieldKey(lightboxView.Document)];
-                                            if (lightboxView && (!data || data instanceof List)) {
-                                                lightboxView.layoutDoc[Doc.LayoutFieldKey(lightboxView.Document)] = new List<Doc>(docs);
-                                                return true;
-                                            }
-                                       }
-                                       return LightboxView.Instance.AddDocTab(docs[0], OpenWhere.lightbox);
+            case OpenWhere.lightbox:   return LightboxView.Instance.AddDocTab(docs[0], location);
             case OpenWhere.close:      return CollectionDockingView.CloseSplit(docs[0], whereMods);
             case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(docs[0], whereMods, this.stack, panelName, undefined, keyValue);
             case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(docs[0], whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue);
diff --git a/src/client/views/collections/TreeView.tsx b/src/client/views/collections/TreeView.tsx
index 3a187171a..bc12d1c28 100644
--- a/src/client/views/collections/TreeView.tsx
+++ b/src/client/views/collections/TreeView.tsx
@@ -231,7 +231,7 @@ export class TreeView extends ObservableReactComponent<TreeViewProps> {
         } else {
             // choose an appropriate embedding or make one. --- choose the first embedding that (1) user owns,  (2) has no context field ... otherwise make a new embedding
             const bestEmbedding = docView.Document.author === ClientUtils.CurrentUserEmail() && !Doc.IsDataProto(docView.Document) ? docView.Document : Doc.BestEmbedding(docView.Document);
-            this._props.addDocTab(bestEmbedding, OpenWhere.lightbox);
+            this._props.addDocTab(bestEmbedding, OpenWhere.lightboxAlways);
         }
     };
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index dbd9fb11f..92e29e94a 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -42,7 +42,7 @@ import { DocumentView } from '../../nodes/DocumentView';
 import { FieldViewProps } from '../../nodes/FieldView';
 import { FocusViewOptions } from '../../nodes/FocusViewOptions';
 import { FormattedTextBox } from '../../nodes/formattedText/FormattedTextBox';
-import { OpenWhere } from '../../nodes/OpenWhere';
+import { OpenWhere, OpenWhereMod } from '../../nodes/OpenWhere';
 import { PinDocView, PinProps } from '../../PinFuncs';
 import { StyleProp } from '../../StyleProp';
 import { CollectionSubView } from '../CollectionSubView';
@@ -1066,9 +1066,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             />
         );
     }
-    addDocTab = action((docsIn: Doc | Doc[], where: OpenWhere) => {
+    addDocTab = action((docsIn: Doc | Doc[], location: OpenWhere) => {
         const docs = toList(docsIn);
-        if (this._props.isAnnotationOverlay) return this._props.addDocTab(docs, where);
+        if (this._props.isAnnotationOverlay) return this._props.addDocTab(docs, location);
+        const where = location.split(':')[0];
         switch (where) {
             case OpenWhere.inParent:
                 return this._props.addDocument?.(docs) || false;
@@ -1095,13 +1096,13 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     }
                     if (firstDoc === this.Document || this.childDocList?.includes(firstDoc) || this.childLayoutPairs.map(pair => pair.layout)?.includes(firstDoc)) {
                         if (firstDoc.hidden) firstDoc.hidden = false;
-                        return true;
+                        if (!location.includes(OpenWhereMod.always)) return true;
                     }
                 }
                 break;
             default:
         }
-        return this._props.addDocTab(docs, where);
+        return this._props.addDocTab(docs, location);
     });
 
     getCalculatedPositions(pair: { layout: Doc; data?: Doc }): PoolData {
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 3e154aead..14feca0b5 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -151,12 +151,9 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
 
     @computed get disableClickScriptFunc() {
         const onScriptDisable = this._props.onClickScriptDisable ?? this._componentView?.onClickScriptDisable?.() ?? this.layoutDoc.onClickScriptDisable;
-        return (
-            // eslint-disable-next-line no-use-before-define
-            DocumentView.LongPress ||
-            onScriptDisable === 'always' ||
-            (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.()))
-        ); // prettier-ignore
+        return (DocumentView.LongPress ||
+                onScriptDisable === 'always' ||
+                (onScriptDisable !== 'never' && (this.rootSelected() || this._componentView?.isAnyChildContentActive?.()))); // prettier-ignore
     }
     @computed get _rootSelected() {
         return this._props.isSelected() || BoolCast(this._props.TemplateDataDocument && this._props.rootSelected?.());
@@ -321,7 +318,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 if (this.onDoubleClickHandler?.script) {
                     UndoManager.RunInBatch(() => this.onDoubleClickHandler.script.run(scriptProps, console.log).result?.select && this._props.select(false), 'on double click: ' + this.Document.title);
                 } else if (!Doc.IsSystem(this.Document) && defaultDblclick !== 'ignore') {
-                    UndoManager.RunInBatch(() => this._props.addDocTab(this.Document, OpenWhere.lightbox), 'double tap');
+                    UndoManager.RunInBatch(() => this._props.addDocTab(this.Document, OpenWhere.lightboxAlways), 'double tap');
                     DocumentView.DeselectAll();
                     Doc.UnBrushDoc(this.Document);
                 } else {
@@ -334,12 +331,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 let clickFunc: undefined | (() => any);
                 if (!this.disableClickScriptFunc && this.onClickHandler?.script) {
                     clickFunc = undoable(() => {
-                        // use this view's add doc func to override method for following links to undisplayed documents.
-                        // e.g., if this document is part of a labeled 'lightbox' container, then documents will be shown in this container of in the global lightbox
-                        const oldFunc = DocumentViewInternal.addDocTabFunc;
-                        DocumentViewInternal.addDocTabFunc = this._props.addDocTab;
                         this.onClickHandler?.script.run(scriptProps, console.log).result?.select && this._props.select(false);
-                        DocumentViewInternal.addDocTabFunc = oldFunc;
                     }, 'click ' + this.Document.title);
                 } else {
                     // onDragStart implies a button doc that we don't want to select when clicking. RootDocument & isTemplateForField implies we're clicking on part of a template instance and we want to select the whole template, not the part
diff --git a/src/client/views/nodes/OpenWhere.ts b/src/client/views/nodes/OpenWhere.ts
index e2a5f1f2a..f7101b103 100644
--- a/src/client/views/nodes/OpenWhere.ts
+++ b/src/client/views/nodes/OpenWhere.ts
@@ -5,9 +5,11 @@ export enum OpenWhereMod {
     top = 'top',
     bottom = 'bottom',
     keyvalue = 'keyValue',
+    always = 'always', // forces the open location (lightbox) instead of using an existing open view (see DocumentDecorations)
 }
 export enum OpenWhere {
     lightbox = 'lightbox',
+    lightboxAlways = 'lightbox:always',
     add = 'add',
     addLeft = 'add:left',
     addRight = 'add:right',
-- 
cgit v1.2.3-70-g09d2


From 4429a0565888d9118e37f1e58dec300220831661 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Sat, 11 May 2024 22:30:39 -0400
Subject: transformations are being unbelieveably silly rn

---
 src/client/documents/Documents.ts                  |   7 +-
 src/client/util/CurrentUserUtils.ts                |   8 +-
 .../views/collections/CollectionCardDeckView.scss  |  31 +-
 .../views/collections/CollectionCardDeckView.tsx   | 417 ++++++++++++++-------
 src/client/views/global/globalScripts.ts           |  15 +-
 5 files changed, 316 insertions(+), 162 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1c57c5d63..77cc5f51e 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -499,9 +499,10 @@ export class DocumentOptions {
     userBackgroundColor?: STRt = new StrInfo('background color associated with a Dash user (seen in header fields of shared documents)');
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 
-    card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
-    card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
-    card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
+    cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
+    // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
+    // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
+    // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
 
 
 }
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 88fcf098b..767d6c635 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -713,9 +713,11 @@ pie title Minerals in my tap water
     }
     static cardTools(): Button[] {
         return [
-            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ClickButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
 
         ]
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index ff9c0a569..aafc3b556 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -2,26 +2,43 @@
 
 .collectionCardView-outer {
     height: 100%;
+    width: 100%;
     position: relative;
     background-color: white;
     overflow: hidden;
 }
 
 .card-wrapper {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */
+    // width: 100%;
+
     position: absolute;
     align-items: center;
+    justify-items: center;
+    justify-content: center;
+
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
-.card-row{
-    display: flex;
-    position: absolute;
-    align-items: center;
-    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+// .card-wrapper::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping */
+// }
 
+// .card-wrapper > .card-item:nth-child(10n)::after {
+//     content: "";
+//     width: 100%; /* Forces wrapping after every 10th item */
+// }
 
-}
+// .card-row{
+//     display: flex;
+//     position: absolute;
+//     align-items: center;
+//     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+
+
+// }
 
 .card-item-active,
 .card-item {
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index ab7aac267..bda72b2d6 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
 import { Doc, DocListCast, Field } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast, StrCast, BoolCast } from '../../../fields/Types';
+import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { StyleProp } from '../StyleProvider';
@@ -12,7 +12,10 @@ import { DocumentView } from '../nodes/DocumentView';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
 import { Transform } from '../../util/Transform';
+import { LinkManager } from '../../util/LinkManager';
 // import Card from 'react-bootstrap/Card';
+import { DocumentType } from '../../documents/DocumentTypes';
+import { forEach } from 'lodash';
 
 
 @observer
@@ -21,6 +24,10 @@ export class CollectionCardView extends CollectionSubView() {
 
     @observable hoveredNodeIndex = -1;
 
+    @computed get myChildLayoutPairs(){
+        return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK)
+    }
+
     @action
     setHoveredNodeIndex = (index: number) => {
         if (!this.isSelected(index)) {
@@ -38,10 +45,10 @@ export class CollectionCardView extends CollectionSubView() {
     @action
     setSelectedNodeIndex = (index: number) => {
         const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-        console.log('goodnight');
+        // console.log('goodnight');
 
         if (SelectionManager.IsSelected(docs[index])) {
-            console.log('good mornings');
+            // console.log('good mornings');
             this.setSelectedNodeIndex(index);
         }
     };
@@ -53,12 +60,11 @@ export class CollectionCardView extends CollectionSubView() {
     };
 
     inactiveDocs = () => {
-        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-
+        const docs = this.myChildLayoutPairs;
+        return docs.filter(d => !SelectionManager.IsSelected(d.layout));
+    };
 
 
-        return docs.filter(d => !SelectionManager.IsSelected(d));
-    };
 
     middleIndex = Math.floor(this.inactiveDocs().length / 2);
 
@@ -81,12 +87,21 @@ export class CollectionCardView extends CollectionSubView() {
         }
     };
 
+
+
     childDocumentWidth = 600; // target width of a Doc...
     /**
      * how much to scale down the contents of the view so that everything will fit
      */
     @computed get fitContentScale() {
-        return (this.childDocumentWidth * this.childLayoutPairs.length) / this._props.PanelWidth();
+        if (this.myChildLayoutPairs.length< this.maxRowCount){
+            length = this.myChildLayoutPairs.length
+        }
+
+        else{
+            length = this.maxRowCount
+        }
+        return (this.childDocumentWidth * length) / this._props.PanelWidth();
     }
     panelWidth = () => this.childDocumentWidth;
     panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width);
@@ -95,7 +110,7 @@ export class CollectionCardView extends CollectionSubView() {
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
     rotate = (amCards: number, index: number) => {
-        console.log(amCards + "wtf")
+        // console.log(amCards + "wtf")
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
         const stepMag = Math.abs(-30 + (amCards / 2 - 1) * (30 / ((amCards - (amCards % 2)) / 2)));
 
@@ -113,31 +128,39 @@ export class CollectionCardView extends CollectionSubView() {
         return possRotate;
     };
 
-    translateY = (amCards: number, index: number) => {
+    translateY = (amCards: number, index: number, realIndex: number) => {
         const evenOdd = amCards % 2;
         const apex = (amCards - evenOdd) / 2;
         const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
+        let rowOffset = 0
 
-        console.log('steo' + stepMag);
+        if (realIndex > this.maxRowCount -1){
+            // 11 - 1 = 10
+            rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount)
+        }
+
+        
+
+        // console.log('steo' + stepMag);
 
         if (evenOdd == 1 || index < apex - 1) {
-            console.log('hi' + index);
-            return Math.abs(stepMag * (apex - index));
+            // console.log('hi' + index);
+            return Math.abs(stepMag * (apex - index)) - rowOffset;
         } else {
             if (index == apex || index == apex - 1) {
-                return 0;
+                return 0 - rowOffset;
             }
 
-            return Math.abs(stepMag * (apex - index - 1));
+            return Math.abs(stepMag * (apex - index - 1)) - rowOffset;
         }
     };
 
-    translateOverFlowY = (amCards: number, index: number) => {
-        if (amCards > 8 && index > amCards / 2) {
-            return 100;
-        }
-        return 0;
-    };
+    // translateOverFlowY = (amCards: number, index: number) => {
+    //     if (amCards > 8 && index > amCards / 2) {
+    //         return 100;
+    //     }
+    //     return 0;
+    // };
 
     translateSelected = (index: number): number => {
         if (this.isSelected(index)) {
@@ -161,78 +184,190 @@ export class CollectionCardView extends CollectionSubView() {
     @computed get sortedDocsType() {
         
         const desc = BoolCast(this.layoutDoc.sortDesc);
-
         let sorted = []
+        let docs = []
 
-        for (let i=0; i< this.childLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
-            sorted[i] = this.childLayoutPairs[i]
+        for (let i=0; i< this.myChildLayoutPairs.length; i++){ //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
+            sorted[i] = this.myChildLayoutPairs[i]
         }
 
+        switch(this._props.Document.cardSort){
+            case "type":
+                 // Copy and sort documents by type 
+                return this.sort(sorted, "type", desc)
+            case "color":
+                return this.sort(sorted, "color", desc)
+            case "links":
+                console.log("hi")
+
+                   let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
+
+                   console.log(links)
+                   
+                   // }
 
-        // Copy and sort documents by type
-        const docs = sorted.sort((docA, docB) => {
-            const typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
-            const typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
+            default:
+                docs =  this.myChildLayoutPairs
+                return {docs}
+
+
+                
+        }
+    }
+
+    
+    
+
+    hexToHsv = (hex: string): [number, number, number] => {
+        if (!hex) return [0, 0, 0]; // Default to black if hex is not defined
+        const r = parseInt(hex.slice(1, 3), 16) / 255;
+        const g = parseInt(hex.slice(3, 5), 16) / 255;
+        const b = parseInt(hex.slice(5, 7), 16) / 255;
+        const max = Math.max(r, g, b), min = Math.min(r, g, b);
+        const d = max - min;
+        let h: number;
+        const s = (max === 0 ? 0 : d / max);
+        const v = max;
+
+        switch (max) {
+            case min: h = 0; break;
+            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
+            case g: h = (b - r) / d + 2; break;
+            case b: h = (r - g) / d + 4; break;
+            default: h = 0; break;
+        }
+        h /= 6;
+        return [h, s, v];
+    };
+
+    
+
+    sort = (docs: {layout: Doc;  data: Doc; }[], sortType: string, isDesc: boolean) => {
+
+        docs.sort((docA, docB) => {
+            let typeA;
+            let typeB             
+
+            switch(sortType) {
+                case "color":
+                    typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string
+                    typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
+                    break
+
+                default:
+                    typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
+                    typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
+                    break
+            }
+            
 
             // Perform a basic string comparison if types are strings
             let out = 0;
             if (typeA < typeB) out = -1;
             if (typeA > typeB) out = 1;
-            if (desc) out *= -1; // Reverse the sort order if descending is true
+            if (isDesc) out *= -1; // Reverse the sort order if descending is true
             return out;
-        });
-        
+            });
 
-        return { docs };
+        return {docs}
     }
 
     
 
+    // @computed get cards(){
+
+
+    // }
+
+    
+    displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
+        return (
+            <DocumentView
+                {...this._props}
+                ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
+                Document={childPair.layout}
+                TemplateDataDocument={childPair.data}
+                // onClickScript={this.toggleIcon}
+                //suppressSetHeight={true}
+                NativeWidth={returnZero}
+                NativeHeight={returnZero}
+                layout_fitWidth={returnFalse}
+                onDoubleClickScript={this.onChildDoubleClick}
+                renderDepth={this._props.renderDepth + 1}
+                LayoutTemplate={this._props.childLayoutTemplate}
+                LayoutTemplateString={this._props.childLayoutString}
+                // focus={this.focus}
+                ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
+                isContentActive={this.isChildContentActive}
+                isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
+                PanelWidth={this.panelWidth}
+                PanelHeight={this.panelHeight(childPair.layout)}
+            />
+        );
+    };
    
 
     @observable docRefs = new ObservableMap<Doc, DocumentView>();
 
+    @observable maxRowCount = 10;
+
+    overflowAmCardsCalc(index: number) {
+        if (this.inactiveDocs().length < this.maxRowCount){
+            return this.inactiveDocs().length
+        }
+        // 13 - 3 = 10 
+        const totalCards = this.inactiveDocs().length
+        // if 9 or less
+        if ( index < ((totalCards - (totalCards % 10)))){
+            return this.maxRowCount
+        }
+        //(3)
+        return totalCards % 10
+
+    }
+
+    overflowIndexCalc(realIndex: number) {
+        if (realIndex < 10){
+            return realIndex
+        }
+
+        return realIndex % 10
+
+    }
+
+    translateOverflowX(realIndex: number, calcRowCards: number){
+        if (realIndex < this.maxRowCount){
+            return 0
+        }
+
+        return (10 - calcRowCards) * (this.panelWidth()/2)
+
+
+
+
+    }
+
     @computed get contentSorted() {
         const sortedDocs = this.sortedDocsType.docs; 
-        const amCards = this.inactiveDocs().length; 
-
-        const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
-            return (
-                <DocumentView
-                    {...this._props}
-                    ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-                    Document={childPair.layout}
-                    TemplateDataDocument={childPair.data}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    layout_fitWidth={returnFalse}
-                    onDoubleClickScript={this.onChildDoubleClick}
-                    renderDepth={this._props.renderDepth + 1}
-                    LayoutTemplate={this._props.childLayoutTemplate}
-                    LayoutTemplateString={this._props.childLayoutString}
-                    ScreenToLocalTransform={screenToLocalTransform}
-                    isContentActive={this.isChildContentActive}
-                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                    PanelWidth={this.panelWidth}
-                    PanelHeight={this.panelHeight(childPair.layout)}
-                />
-            );
-        };
+        // const amCards = this.inactiveDocs().length; 
 
         // Map sorted documents to their rendered components
         return sortedDocs.map((childPair, index) => {
             // const childPair = { layout: doc, data: doc }; 
-            const isHovered = this.hoveredNodeIndex === index;
-            const inactiveIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
-            const isSelected = SelectionManager.IsSelected(childPair.layout);
 
 
+            const isHovered = this.hoveredNodeIndex === index;
+            const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
+            const calcRowIndex = this.overflowIndexCalc(realIndex)
+
+            const amCards = this.overflowAmCardsCalc(realIndex)
 
+            const isSelected = SelectionManager.IsSelected(childPair.layout);
 
             const childScreenToLocal = () => {
                 const dref = this.docRefs.get(childPair.layout);
                 const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0);
             };
 
             return (
@@ -243,111 +378,105 @@ export class CollectionCardView extends CollectionSubView() {
                         width: this.panelWidth(),
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
-                            rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(inactiveIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+                            rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
+                            translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px)
+                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
                     }}
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-                    {displayDoc(childPair, childScreenToLocal)}
+                    {this.displayDoc(childPair, childScreenToLocal)}
+
+                    {/* <circle r="45" cx="50" cy="50" fill="red" /> */}
+
                 </div>
             );
         });
     }
 
-    @computed get content() {
-        // const currentIndex = NumCast(this.layoutDoc._carousel_index);
-        const amCards = this.inactiveDocs().length;
-        console.log(amCards + "lol")
-        // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
-
-        // const myInactives =
-        const displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
-            return (
-                <DocumentView
-                    {...this._props}
-                    ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-                    Document={childPair.layout}
-                    TemplateDataDocument={childPair.data}
-                    // onClickScript={this.toggleIcon}
-                    //suppressSetHeight={true}
-                    NativeWidth={returnZero}
-                    NativeHeight={returnZero}
-                    layout_fitWidth={returnFalse}
-                    onDoubleClickScript={this.onChildDoubleClick}
-                    renderDepth={this._props.renderDepth + 1}
-                    LayoutTemplate={this._props.childLayoutTemplate}
-                    LayoutTemplateString={this._props.childLayoutString}
-                    // focus={this.focus}
-                    ScreenToLocalTransform={screenToLocalTransform} //makes sure the box wrapper thing is in the right spot
-                    isContentActive={this.isChildContentActive}
-                    isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
-                    PanelWidth={this.panelWidth}
-                    PanelHeight={this.panelHeight(childPair.layout)}
-                />
-            );
-        };
+    
 
-        return this.childLayoutPairs.map((childPair, index) => {
-            const isSelected = this.isSelected(index);
-            const isHovered = this.hoveredNodeIndex === index;
-            const isOverflow = amCards > 8 && index > amCards / 2;
-            // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
-            const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
-            // const yOffset = this.verticalOffset(index);
+    // @computed get content() {
+    //     // const currentIndex = NumCast(this.layoutDoc._carousel_index);
+    //     const amCards = this.inactiveDocs().length;
+    //     console.log(amCards + "lol")
+    //     // const sortedDocs = this.sortedDocsType.docs; // Retrieve sorted documents
 
-            const childScreenToLocal = () => {
-                const dref = this.docRefs.get(childPair.layout);
-                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-                // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
-                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
-            };
+    //     // const myInactives =
+        
 
-            return (
-                <div
-                    key={childPair.layout[Id]}
-                    className={`card-item${isSelected ? '-active' : ''}`}
-                    style={{
-                        width: this.panelWidth(),
-                        height: this.panelHeight(childPair.layout)(),
-                        transform: `
-                            rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
-                            translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
-                            scale(${isSelected ? 1.25 : 1})
+    //     return this.myChildLayoutPairs.map((childPair, index) => {
+    //         const isSelected = this.isSelected(index);
+    //         const isHovered = this.hoveredNodeIndex === index;
+    //         const isOverflow = amCards > 8 && index > amCards / 2;
+    //         // const  inactiveIndex = this.sortedDocsType.docs.indexOf(childPair);
+    //         const inactiveIndex = this.inactiveDocs().indexOf(childPair.layout);
+    //         // const yOffset = this.verticalOffset(index);
+
+    //         const childScreenToLocal = () => {
+    //             const dref = this.docRefs.get(childPair.layout);
+    //             const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
+    //             // the document view may center its contents and if so, will prepend that onto the screenToLocalTansform.  so we have to subtract that off
+    //             return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, inactiveIndex) : 0);
+    //         };
+
+    //         return (
+    //             <div
+    //                 key={childPair.layout[Id]}
+    //                 className={`card-item${isSelected ? '-active' : ''}`}
+    //                 style={{
+    //                     width: this.panelWidth(),
+    //                     height: this.panelHeight(childPair.layout)(),
+    //                     transform: `
+    //                         rotate(${!isSelected ? this.rotate(amCards, inactiveIndex) : 0}deg) 
+    //                         translateY(${isHovered ? this.translateHover(index) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, inactiveIndex)}px)
+    //                         translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : 0}px)
+    //                         scale(${isSelected ? 1.25 : 1})
                             
-                            `, //scale has to be applied last or selected offset gets messed up
-                    }}
-                    // onClick={() => this.setSelectedNodeIndex(index)}
+    //                         `, //scale has to be applied last or selected offset gets messed up
+    //                 }}
+    //                 // onClick={() => this.setSelectedNodeIndex(index)}
 
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-                    {/* {this.lol(childPair.data, index)} */}
+    //                 onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+    //                 {/* {this.lol(childPair.data, index)} */}
 
-                    {displayDoc(childPair, childScreenToLocal)}
-                </div>
-            );
-        });
-    }
+    //                 {this.displayDoc(childPair, childScreenToLocal)}
+    //             </div>
+    //         );
+    //     });
+    // }
 
     @computed get translateWrapperX() {
-        if (this.inactiveDocs().length != this.childLayoutPairs.length) {
-            return this.panelWidth() / 2;
-        }
 
-        return 0;
-    }
+        let translate = 0
 
-    @computed get renderCardsSort(){
-        if (BoolCast(this._props.Document.card_sort_type) == true){
-            return this.contentSorted
+        if (this.inactiveDocs().length != this.myChildLayoutPairs.length) {
+            translate += this.panelWidth() / 2;
         }
 
-        else{
-            return this.content
-        }
+        console.log("in" + this.inactiveDocs().length)
+        console.log("max" + this.maxRowCount)
+
+        // if (this.inactiveDocs().length > this.maxRowCount){
+        //     translate += ((this.inactiveDocs().length % this.maxRowCount) * this.panelWidth()) / 2
+        //     console.log("trans" + (this.inactiveDocs().length % this.maxRowCount) / 2 )
+        // }
+
+
+
+        return translate;
     }
 
+    // @computed get renderCardsSort(){
+    //     if (StrCast(this._props.Document.cardSort) == "type"){
+    //         return this.contentSorted
+    //     }
+
+    //     else{
+    //         return this.content
+    //     }
+    // }
+
     
 
     render() {
@@ -367,7 +496,7 @@ export class CollectionCardView extends CollectionSubView() {
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.renderCardsSort}
+                    {this.contentSorted}
                 </div>
 
                 {/* <Card  className={`custom-modal-position step-${step}`}>
@@ -386,4 +515,4 @@ export class CollectionCardView extends CollectionSubView() {
             </div>
         );
     }
-}
+}
\ No newline at end of file
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 0c6095346..526315802 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -105,10 +105,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', checkResult?: boolean, persist?: boolean) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -140,15 +140,20 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
         }],
         ['time', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_time = !doc.card_sort_time,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", 
         }],
         ['docType', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_type = !doc.card_sort_type,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type",
         }],
         ['color', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.card_sort_color = !doc.card_sort_color,
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color",
+        }],
+
+        ['links', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links",
         }],
 
    ]);
-- 
cgit v1.2.3-70-g09d2


From 13b4aa868ac664399bfd320902f3ddee57072392 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Mon, 13 May 2024 09:21:29 -0400
Subject: create technically working

---
 src/client/documents/Documents.ts                  |   1 +
 src/client/util/CurrentUserUtils.ts                |  18 +++-
 src/client/util/SelectionManager.ts                |   1 +
 src/client/views/MainView.tsx                      |   3 +-
 .../views/collections/CollectionCardDeckView.scss  |  27 ++++-
 .../views/collections/CollectionCardDeckView.tsx   | 111 ++++++++++++++++++---
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   2 +-
 src/client/views/global/globalScripts.ts           |  21 +++-
 8 files changed, 163 insertions(+), 21 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 77cc5f51e..df69e215a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -500,6 +500,7 @@ export class DocumentOptions {
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 
     cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
+    customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created');
     // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
     // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
     // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 767d6c635..59560dd78 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -9,7 +9,7 @@ import { PrefetchProxy } from "../../fields/Proxy";
 import { RichTextField } from "../../fields/RichTextField";
 import { listSpec } from "../../fields/Schema";
 import { ScriptField } from "../../fields/ScriptField";
-import { Cast, DateCast, DocCast, StrCast } from "../../fields/Types";
+import { Cast, DateCast, DocCast, StrCast, NumCast } from "../../fields/Types";
 import { WebField, nullAudio } from "../../fields/URLField";
 import { SetCachedGroups, SharingPermissions } from "../../fields/util";
 import { GestureUtils } from "../../pen-gestures/GestureUtils";
@@ -34,6 +34,9 @@ import { SnappingManager } from "./SnappingManager";
 import { UndoManager } from "./UndoManager";
 import { LabelBox } from "../views/nodes/LabelBox";
 import { ImageBox } from "../views/nodes/ImageBox";
+import { CollectionFreeFormView } from "../views/collections/collectionFreeForm";
+import { CollectionCardView } from "../views/collections/CollectionCardDeckView";
+import { SelectionManager } from "./SelectionManager";
 
 interface Button {
     // DocumentOptions fields a button can set
@@ -712,12 +715,23 @@ pie title Minerals in my tap water
         ]
     }
     static cardTools(): Button[] {
+       
+
+    //     if (view != undefined){
+    //         for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){
+    //             customs.push(   
+    //                 { title: "Custom " + i,   icon:"robot", toolTip:"Custom sort option " + i,  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}
+    //             )
+
+    //         }
+    // }
         return [
             { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-
+            { title: "Create",   icon:"plus", toolTip:"Create new custom groupings!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            // ...customs
 
         ]
     }
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index 36b926053..d507e35ad 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -68,6 +68,7 @@ export class SelectionManager {
     public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected);
     public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore
     public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore
+    
     public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore
 }
 
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index abdb5abef..a5882dcf3 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -526,7 +526,8 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faArrowsUpToLine,
                 fa.faArrowsDownToLine,
                 fa.faPalette,
-                fa.faHourglassHalf
+                fa.faHourglassHalf,
+                fa.faRobot
             ]
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index aafc3b556..222a1d226 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -10,7 +10,7 @@
 
 .card-wrapper {
     display: grid;
-    grid-template-columns: repeat(10, 1fr); /* Creates 10 columns, adjust number as needed */
+    grid-template-columns: repeat(10, 1fr);
     // width: 100%;
 
     position: absolute;
@@ -21,6 +21,31 @@
     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }
 
+.card-button-container {
+    display: flex;         
+    padding: 3px;
+    // width: 300px;        
+    background-color: rgb(218, 218, 218); /* Background color of the container */
+    border-radius: 50px;    /* Rounds the corners of the container */
+    transform: translateY(-50px); 
+    // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
+    align-items: center;    /* Centers buttons vertically */
+    justify-content: start;/* Centers buttons horizontally */
+}
+
+button {
+    width: 35px;
+    height: 35px;
+    border-radius: 50%;
+    background-color: $dark-gray;
+    // border-color: $medium-blue;
+    margin: 5px;    // transform: translateY(-50px); 
+}
+
+// button:hover {
+//     transform: translateY(-50px); 
+// }
+
 // .card-wrapper::after {
 //     content: "";
 //     width: 100%; /* Forces wrapping */
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index bda72b2d6..bf26ad4b5 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -37,7 +37,7 @@ export class CollectionCardView extends CollectionSubView() {
 
     translateHover = (index: number): number => {
         if (this.hoveredNodeIndex == index && !this.isSelected(index)) {
-            return -50 * this.fitContentScale;
+            return -50;
         }
         return 0;
     };
@@ -109,6 +109,10 @@ export class CollectionCardView extends CollectionSubView() {
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
+
+
+    
+
     rotate = (amCards: number, index: number) => {
         // console.log(amCards + "wtf")
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
@@ -163,7 +167,7 @@ export class CollectionCardView extends CollectionSubView() {
     // };
 
     translateSelected = (index: number): number => {
-        if (this.isSelected(index)) {
+        // if (this.isSelected(index)) {
             const middleOfPanel = this._props.PanelWidth() / 2;
             const scaledNodeWidth = this.panelWidth() * 1.25;
 
@@ -173,12 +177,12 @@ export class CollectionCardView extends CollectionSubView() {
             const scaledNodeCenter = nodeLeftEdge + scaledNodeWidth / 2;
 
             // Calculate the translation needed to align the scaled node's center with the panel's center
-            const translation = middleOfPanel - scaledNodeCenter;
+            const translation = middleOfPanel - scaledNodeCenter - scaledNodeWidth - (scaledNodeWidth /4);
 
             return translation;
-        }
+        // }
 
-        return 0;
+        // return 0;
     };
 
     @computed get sortedDocsType() {
@@ -197,15 +201,20 @@ export class CollectionCardView extends CollectionSubView() {
                 return this.sort(sorted, "type", desc)
             case "color":
                 return this.sort(sorted, "color", desc)
-            case "links":
-                console.log("hi")
+            // case "links":
+            //     console.log("hi")
 
-                   let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
+                //    let links = LinkManager.Instance.getAllRelatedLinks(this.myChildLayoutPairs[0].layout)
 
-                   console.log(links)
+                //    console.log(links)
                    
                    // }
 
+            case "custom":
+                console.log("hiiiii")
+                return this.sort(sorted, "custom", desc)
+            
+
             default:
                 docs =  this.myChildLayoutPairs
                 return {docs}
@@ -254,6 +263,14 @@ export class CollectionCardView extends CollectionSubView() {
                     typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
                     break
 
+                case "custom":
+                    typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? ''
+                    // console.log(typeA + "A")
+                    typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? ''
+                    // console.log(typeB + 'b')
+                    break
+
+
                 default:
                     typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
                     typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
@@ -341,10 +358,24 @@ export class CollectionCardView extends CollectionSubView() {
         }
 
         return (10 - calcRowCards) * (this.panelWidth()/2)
+    }
 
+   
+    calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) {
 
+        let trans = 0;
+        if (isHovered) {
+            trans += this.translateHover(realIndex);
+        }
+        
+        trans += this.translateY(amCards, calcRowIndex, realIndex);
+        
 
+        if (isSelected) {
+            trans = 50 * this.fitContentScale;
+        }
 
+        return trans
     }
 
     @computed get contentSorted() {
@@ -357,6 +388,7 @@ export class CollectionCardView extends CollectionSubView() {
 
 
             const isHovered = this.hoveredNodeIndex === index;
+            const childPairIndex = this.myChildLayoutPairs.indexOf(childPair)
             const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
             const calcRowIndex = this.overflowIndexCalc(realIndex)
 
@@ -379,21 +411,72 @@ export class CollectionCardView extends CollectionSubView() {
                         height: this.panelHeight(childPair.layout)(),
                         transform: `
                             rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
-                            translateY(${isHovered ? this.translateHover(realIndex) : isSelected ? 50 * this.fitContentScale : this.translateY(amCards, calcRowIndex, realIndex)}px)
-                            translateX(${isSelected ? (this._props.PanelWidth() / 2) * this.fitContentScale - this.childDocumentWidth : this.translateOverflowX(realIndex, amCards)}px)
+                            translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px)
+                            translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px)
                             scale(${isSelected ? 1.25 : 1})
                         `,
                     }}
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+                    onMouseEnter={() => this.setHoveredNodeIndex(index)}
+                    
+                    >
                     {this.displayDoc(childPair, childScreenToLocal)}
 
-                    {/* <circle r="45" cx="50" cy="50" fill="red" /> */}
+                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''}
 
                 </div>
             );
         });
     }
 
+    @observable amGroups = 0
+    @observable customGroupDictionary = new Map<
+       number, number>();
+
+
+    @action toggleButton(childPairIndex: number, buttonID: number) {
+    
+        this.customGroupDictionary.set(childPairIndex, buttonID);
+    }
+
+    renderButtons (childPairIndex: number) {
+        const buttons = []; // Array to hold the button elements
+
+        let amButtons = 4
+
+        if (this.amGroups > 4){
+            amButtons = this.amGroups
+        }
+
+        let activeButtonIndex = this.customGroupDictionary.get(childPairIndex)
+
+        for (let i = 0; i < amButtons; i++) {
+            const isActive = activeButtonIndex == i
+      
+            buttons.push(
+                <button key={i}
+                    style = {{backgroundColor: `${isActive ?  "#4476f7" : "#323232"}`}}
+                    onClick={() => this.toggleButton(childPairIndex, i)} >
+                </button>); 
+        }
+
+        const totalWidth = amButtons * 35 + (amButtons * 2* 5) + 6;
+        return (
+            <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
+                {buttons}
+            </div>
+        );  
+    }
+
+
+    
+
+
+
+
+
+
+
+
     
 
     // @computed get content() {
@@ -450,7 +533,7 @@ export class CollectionCardView extends CollectionSubView() {
 
         let translate = 0
 
-        if (this.inactiveDocs().length != this.myChildLayoutPairs.length) {
+        if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) {
             translate += this.panelWidth() / 2;
         }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 2d05b5490..11193f496 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -2010,4 +2010,4 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
             SchemaCSVPopUp.Instance.setVisible(true);
         }
     });
-});
+});
\ No newline at end of file
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 526315802..9056917fe 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -105,10 +105,12 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', checkResult?: boolean, persist?: boolean) {
+
+
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', checkResult?: boolean, persist?: boolean, customNumber?: number) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -156,6 +158,21 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links",
         }],
 
+        ['custom', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom",
+        }],
+
+        //in an ideal world lol
+
+
+        // ['create', {
+        //     checkResult: (doc:Doc) => NumCast(doc?.customSortCount),
+        //     setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1,
+        // }],
+
+       
+
    ]);
 
     if (checkResult) {
-- 
cgit v1.2.3-70-g09d2


From 3c5b2353cb20843e968e51fdff58cc92f101ed51 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Tue, 14 May 2024 02:14:58 -0400
Subject: getting close to done

---
 src/client/documents/Documents.ts                  |  3 +-
 src/client/util/CurrentUserUtils.ts                |  6 ++-
 src/client/views/MainView.tsx                      |  4 +-
 .../views/collections/CollectionCardDeckView.scss  |  2 +-
 .../views/collections/CollectionCardDeckView.tsx   | 63 +++++++++++++++++-----
 .../CollectionFreeFormLayoutEngines.tsx            | 26 ++++-----
 .../collections/collectionFreeForm/MarqueeView.tsx |  4 +-
 src/client/views/global/globalScripts.ts           | 35 +++++++-----
 8 files changed, 94 insertions(+), 49 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index df69e215a..57f91399a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -500,7 +500,8 @@ export class DocumentOptions {
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 
     cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
-    customSortCount?: NUMt = new NumInfo('number of custom sorts the user has created');
+    customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created');
+    customHashMap?: List<string>
     // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
     // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
     // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 59560dd78..abc728cd3 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -730,7 +730,11 @@ pie title Minerals in my tap water
             { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"plus", toolTip:"Create new custom groupings!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Create",   icon:"robot", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
+
             // ...customs
 
         ]
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index a5882dcf3..f1296e46a 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -527,7 +527,9 @@ export class MainView extends ObservableReactComponent<{}> {
                 fa.faArrowsDownToLine,
                 fa.faPalette,
                 fa.faHourglassHalf,
-                fa.faRobot
+                fa.faRobot,
+                fa.faSatellite,
+                fa.faStar
             ]
         );
     }
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index 09d6f70ea..babc604b5 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -68,7 +68,7 @@ button {
 .card-item-active,
 .card-item {
     position: relative;
-    transition: transform 0.3s ease-in-out;
+    transition: transform 0.5s ease-in-out;
 }
 
 .card-item-active {
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 996c5711b..fc183b72b 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -2,7 +2,7 @@ import { ObservableMap, action, computed, makeObservable, observable } from 'mob
 import { observer } from 'mobx-react';
 import * as React from 'react';
 import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
-import { Doc, DocListCast, Field } from '../../../fields/Doc';
+import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
 import { NumCast, ScriptCast, StrCast, BoolCast, DocCast } from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
@@ -17,6 +17,7 @@ import { LinkManager } from '../../util/LinkManager';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { forEach } from 'lodash';
 import { SnappingManager } from '../../util/SnappingManager';
+import { List } from '../../../fields/List';
 
 @observer
 export class CollectionCardView extends CollectionSubView() {
@@ -70,11 +71,49 @@ export class CollectionCardView extends CollectionSubView() {
         super(props);
         makeObservable(this);
         // this.rotationDegree(7);
+
+        if (this._props.Document.customHashMap != undefined){
+            this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap))
+        }
+    }
+
+    @observable customGroupDictionary: Map<number, number>[] = [new Map<number, number>(), new Map<number, number>(), new Map<number, number>()];
+
+    @computed get mapToField(): List<string> {
+        const resultList = new List<string>(); // Creating a new ListImpl instance for strings
+
+        this.customGroupDictionary.forEach(map => {
+            // Convert each map to a single string with entries formatted as "key:value"
+            const mapString = Array.from(map.entries())
+                                   .map(([key, value]) => `${key}:${value}`)
+                                   .join(','); // Join all key-value pairs with commas
+            resultList.push(mapString); // Add the formatted string of the current map to the list
+        });
+
+        return resultList;
+    }
+
+    getCustoms = (stringFrom: string[]): Map<number, number>[] => {
+        return stringFrom.map(s => {
+            // Create a new Map object for each string.
+            const map = new Map<number, number>();
+            // Split the string by commas to get key-value pairs, then process each pair.
+            s.split(',').forEach(pair => {
+                const [key, value] = pair.split(':');
+                map.set(Number(key), Number(value));
+            });
+            return map;
+        });
     }
 
+
+
+
+
     private _dropDisposer?: DragManager.DragDropDisposer;
 
     componentWillUnmount() {
+        console.log("hey hey hey")
         this._dropDisposer?.();
     }
 
@@ -253,9 +292,11 @@ export class CollectionCardView extends CollectionSubView() {
                     break;
 
                 case 'custom':
-                    typeA = this.customGroupDictionary.get(docs.indexOf(docA)) ?? '';
+
+                console.log(this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)])
+                    typeA = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docA)) ?? '9999';
                     // console.log(typeA + "A")
-                    typeB = this.customGroupDictionary.get(docs.indexOf(docB)) ?? '';
+                    typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999';
                     // console.log(typeB + 'b')
                     break;
 
@@ -397,7 +438,7 @@ export class CollectionCardView extends CollectionSubView() {
                                 SnappingManager.SetIsResizing(undefined);
                                 this._forceChildXf = !this._forceChildXf;
                             }),
-                            400
+                            700
                         );
                     }}
                     style={{
@@ -419,11 +460,13 @@ export class CollectionCardView extends CollectionSubView() {
         });
     }
 
-    @observable amGroups = 0;
-    @observable customGroupDictionary = new Map<number, number>();
+   
+    
+    
 
     @action toggleButton(childPairIndex: number, buttonID: number) {
-        this.customGroupDictionary.set(childPairIndex, buttonID);
+        this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID);
+        this._props.Document.customHashMap = this.mapToField
     }
 
     renderButtons(childPairIndex: number) {
@@ -431,11 +474,7 @@ export class CollectionCardView extends CollectionSubView() {
 
         let amButtons = 4;
 
-        if (this.amGroups > 4) {
-            amButtons = this.amGroups;
-        }
-
-        let activeButtonIndex = this.customGroupDictionary.get(childPairIndex);
+        let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex);
 
         for (let i = 0; i < amButtons; i++) {
             const isActive = activeButtonIndex == i;
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index becad63f6..22005eb23 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -126,27 +126,20 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
 }
 
 // export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
-//     console.log('hi');
 //     const docMap = new Map<string, PoolData>();
-//     const spreadWidth = Math.min(panelDim[0], childPairs.length * 50); // Total width of the spread
-//     const startX = -(spreadWidth / 2); // Starting X position
-//     const fanAngle = 5; // Angle in degrees for fanning out cards
-//     const baseZIndex = 1000; // Base Z-index to ensure cards are stacked in order
+//     const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)];
+//     const burstScale = NumCast(pivotDoc._starburstDocScale, 1);
 
 //     childPairs.forEach(({ layout, data }, i) => {
 //         const aspect = NumCast(layout._height) / NumCast(layout._width);
-//         const docSize = Math.min(400, NumCast(layout._width)) * NumCast(pivotDoc._starburstDocScale, 1);
-//         const posX = startX + (spreadWidth / childPairs.length) * i;
-//         const posY = 0; // Adjust if you want to change the vertical alignment
-//         const rotation = (i - (childPairs.length / 2)) * fanAngle; // Calculate rotation for fanning effect
-
+//         const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale;
+//         const deg = (i / childPairs.length) * Math.PI * 2;
 //         docMap.set(layout[Id], {
-//             x: posX,
-//             y: posY,
+//             x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)),
+//             y: Math.min(burstDiam[1] / 2 - docSize * aspect, Math.max(-burstDiam[1] / 2, (Math.sin(deg) * burstDiam[1]) / 2 - (docSize / 2) * aspect)),
 //             width: docSize,
 //             height: docSize * aspect,
-//             zIndex: baseZIndex + i,
-//             rotation: rotation,
+//             zIndex: NumCast(layout.zIndex),
 //             pair: { layout, data },
 //             replica: '',
 //             color: 'white',
@@ -154,9 +147,8 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
 //             transition: 'all 0.3s',
 //         });
 //     });
-
-//     const divider = { type: 'div', color: 'transparent', x: -panelDim[0] / 2, y: -panelDim[1] / 2, width: 15, height: 15, payload: undefined };
-//     return normalizeResults(panelDim, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
+//     const divider = { type: 'div', color: 'transparent', x: -burstDiam[0] / 2, y: -burstDiam[1] / 2, width: 15, height: 15, payload: undefined };
+//     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
 // }
 
 export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 98684ae98..7e7a5c2c6 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -533,7 +533,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             this.delete(e, e.key === 'h');
             e.stopPropagation();
         }
-        if ('ctsSpga'.indexOf(e.key) !== -1) {
+        if ('ctsSpgac'.indexOf(e.key) !== -1) {
 
             this._commandExecuted = true;
             e.stopPropagation();
@@ -543,7 +543,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             if (e.key === 'c' || e.key === 't') this.collection(e);
             if (e.key === 's' || e.key === 'S') this.summary(e);
             if (e.key === 'p') this.pileup(e)
-            // if (e.key === 'a') this.spreadCards(e);
+            // if (e.key === 'c') this.spreadCards(e);
 
             this.cleanupInteractions(false);
         }
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 9056917fe..30602ea0b 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -107,10 +107,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
 
 
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', checkResult?: boolean, persist?: boolean, customNumber?: number) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', checkResult?: boolean, persist?: boolean, customNumber?: number) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom' | 'create', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -158,21 +158,28 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
             setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links",
         }],
 
-        ['custom', {
+        ['custom1', {
             checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "custom",
-        }],
-
-        //in an ideal world lol
-
-
-        // ['create', {
-        //     checkResult: (doc:Doc) => NumCast(doc?.customSortCount),
-        //     setDoc: (doc:Doc,dv:DocumentView) => doc.customSortCount = NumCast(doc.customSortCount) + 1,
-        // }],
+            setDoc: (doc, dv) => {
+                doc.cardSort = "custom";
+                doc.customSortNumber = 0;
+            }
+        }],        
 
-       
+        ['custom2', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc, dv) => {
+                doc.cardSort = "custom";
+                doc.customSortNumber = 1;
+                console.log(doc.customSortNumber + " numberrrrrrrr")
+            }        }],
 
+        ['custom3', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc, dv) => {
+                doc.cardSort = "custom";
+                doc.customSortNumber = 2;
+            }        }],
    ]);
 
     if (checkResult) {
-- 
cgit v1.2.3-70-g09d2


From df7532553db3df270fcbd25a46e7a349a82bd712 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Thu, 16 May 2024 12:52:14 -0400
Subject: pdfs being weird

---
 src/client/apis/gpt/GPT.ts                         | 35 +++++------
 src/client/util/CurrentUserUtils.ts                |  4 +-
 .../views/collections/CollectionCardDeckView.tsx   | 70 ++++++++++++++++++++--
 src/client/views/global/globalScripts.ts           |  8 ++-
 src/client/views/nodes/PDFBox.tsx                  |  1 +
 5 files changed, 92 insertions(+), 26 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 30194f9f8..1f50ad0b8 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -5,7 +5,8 @@ enum GPTCallType {
     SUMMARY = 'summary',
     COMPLETION = 'completion',
     EDIT = 'edit',
-    DATA = 'data',
+    // MERMAID='mermaid'
+    SORT = 'sort'
 }
 
 type GPTCallOpts = {
@@ -15,45 +16,40 @@ type GPTCallOpts = {
     prompt: string;
 };
 
-/**
- * Replace completions (deprecated) with chat
- */
-
 const callTypeMap: { [type: string]: GPTCallOpts } = {
-    // newest model: gpt-4
-    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." },
+    summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
+    edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
+    completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' },
+    sort:{model:'gpt-4-turbo',maxTokens:2048,temp:0,prompt:"I'm going to give you a list of strings. Sort them into lists by shared content. The format of should be: '[string1, string2], [string 3, string4][string5, string6]' where the actual numbers of strings in each category / total categorys is arbritray and up to your interpretation"}
 };
 
-/**
+
+/**`
  * Calls the OpenAI API.
  *
  * @param inputText Text to process
  * @returns AI Output
  */
-const gptAPICall = async (inputText: string, callType: GPTCallType, prompt?: any) => {
+const gptAPICall = async (inputText: string, callType: GPTCallType) => {
     if (callType === GPTCallType.SUMMARY) inputText += '.';
     const opts: GPTCallOpts = callTypeMap[callType];
     try {
         const configuration: ClientOptions = {
-            apiKey: process.env.OPENAI_KEY,
+            apiKey: "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",
             dangerouslyAllowBrowser: true,
         };
         const openai = new OpenAI(configuration);
 
-        let usePrompt = prompt ? opts.prompt + prompt : opts.prompt;
         let messages: ChatCompletionMessageParam[] = [
-            { role: 'system', content: usePrompt },
+            { role: 'system', content: opts.prompt },
             { role: 'user', content: inputText },
         ];
 
         const response = await openai.chat.completions.create({
             model: opts.model,
-            max_tokens: opts.maxTokens,
+            messages: messages,
             temperature: opts.temp,
-            messages,
+            max_tokens: opts.maxTokens,
         });
         const content = response.choices[0].message.content;
         return content;
@@ -76,11 +72,12 @@ const gptImageCall = async (prompt: string, n?: number) => {
             n: n ?? 1,
             size: '1024x1024',
         });
-        return response.data.map(data => data.url);
+        return response.data.map((data: any) => data.url);
+        // return response.data.data[0].url;
     } catch (err) {
         console.error(err);
         return;
     }
 };
 
-export { gptAPICall, gptImageCall, GPTCallType };
+export { gptAPICall, gptImageCall, GPTCallType };
\ No newline at end of file
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index abc728cd3..e18c22bac 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -730,9 +730,11 @@ pie title Minerals in my tap water
             { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"robot", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Create",   icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"chat",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+
 
 
             // ...customs
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 7af6eb614..561b9f806 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
 import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast } from '../../../fields/Types';
+import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast, Cast} from '../../../fields/Types';
 import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
 import { StyleProp } from '../StyleProvider';
@@ -18,6 +18,9 @@ import { DocumentType } from '../../documents/DocumentTypes';
 import { forEach } from 'lodash';
 import { SnappingManager } from '../../util/SnappingManager';
 import { List } from '../../../fields/List';
+import { gptAPICall } from '../../apis/gpt/GPT';
+import { GPTCallType } from '../../apis/gpt/GPT';
+import { ImageField } from '../../../fields/URLField';
 
 @observer
 export class CollectionCardView extends CollectionSubView() {
@@ -249,6 +252,11 @@ export class CollectionCardView extends CollectionSubView() {
                 // console.log('hiiiii');
                 return this.sort(sorted, 'custom', desc);
 
+            case 'chat':
+                this.smartSort()
+                docs = this.myChildLayoutPairs;
+                return {docs}
+
             default:
                 docs = this.myChildLayoutPairs;
                 return { docs };
@@ -306,7 +314,7 @@ export class CollectionCardView extends CollectionSubView() {
                     // console.log(typeA + "A")
                     typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999';
                     // console.log(typeB + 'b')
-                    break;
+                    break;                    
 
                 default:
                     typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
@@ -468,6 +476,8 @@ export class CollectionCardView extends CollectionSubView() {
         });
     }
 
+    
+
    
     
     
@@ -476,10 +486,62 @@ export class CollectionCardView extends CollectionSubView() {
         this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID);
         this._props.Document.customHashMap = this.mapToField
 
-        // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']));
-        // console.log(queryText)
+        // Cast(selected.Document.data, WebField, null)?.url?.href)
+
+        // StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href)
+
+
+
+        // const
+        const imgurlperchance = Cast(this.childDocs[1].data, ImageField, null)?.url;
+
+        console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
+        console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
+
+
+        // const queryText = (RTFCast(this.myChildLayoutPairs[0].layout.text)).Text;
+        // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text;
+
+        console.log(imgurlperchance ?? "sad")
     }
 
+    childPairStringList () {
+        let string = ""
+        for (let i=0; i < this.myChildLayoutPairs.length; i++){
+            string += StrCast((RTFCast(this.myChildLayoutPairs[i].layout.text)).Text) + ", "
+        }
+        return string
+    }
+
+    @observable isLoading = false
+
+    @action async smartSort() {
+        this.isLoading = true;
+        console.log("loading")
+        let prompt= ""
+
+        if (this.childPairStringList() == ""){
+            console.log("no child pairs :(")
+        }
+
+        else{
+            console.log(this.childPairStringList() + "og list")
+            prompt =  "Sort this list of strings by shared content " + this.childPairStringList()
+        }
+        
+
+        let res = await gptAPICall(prompt, GPTCallType.SORT);
+        this.isLoading = false;
+        if (res == 'Error connecting with API.') {
+            // If GPT call failed
+            console.error('GPT call failed');
+        } else if (res != null) {
+            // If GPT call succeeded, set htmlCode;;; TODO: check if valid html
+           console.log(res)
+        }
+        this.isLoading = false;
+    };
+
     renderButtons(childPairIndex: number) {
         const buttons = []; // Array to hold the button elements
 
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 30602ea0b..14f83beb6 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -107,10 +107,10 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
 
 
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', checkResult?: boolean, persist?: boolean, customNumber?: number) {
+ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', checkResult?: boolean, persist?: boolean, customNumber?: number) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
         ['grid', {
             checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
             setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
@@ -180,6 +180,10 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
                 doc.cardSort = "custom";
                 doc.customSortNumber = 2;
             }        }],
+        ['chat', {
+            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
+            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "chat",
+        }],
    ]);
 
     if (checkResult) {
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 1274220b6..90d6133e4 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -33,6 +33,7 @@ import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView';
 import { ImageBox } from './ImageBox';
 import './PDFBox.scss';
 import { PinProps, PresBox } from './trails';
+import { Networking } from '../../Network';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
-- 
cgit v1.2.3-70-g09d2


From 69e286b504c2f1bbef7d489dc675b9e54ef8d983 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Thu, 16 May 2024 19:52:13 -0400
Subject: refactor/cleanup of pres animations.  changed effects to start
 halfway through a zoom transition.

---
 src/client/apis/gpt/customization.ts            |  18 +-
 src/client/documents/Documents.ts               |   1 +
 src/client/util/DocumentManager.ts              |   6 +-
 src/client/views/PinFuncs.ts                    |   2 +-
 src/client/views/PropertiesView.tsx             |   2 +-
 src/client/views/animationtimeline/Timeline.tsx |   2 +-
 src/client/views/nodes/DocumentView.tsx         |  18 +-
 src/client/views/nodes/trails/PresBox.tsx       |  50 +--
 src/client/views/nodes/trails/PresEnums.ts      |   2 +-
 src/client/views/nodes/trails/SlideEffect.scss  |   2 +-
 src/client/views/nodes/trails/SlideEffect.tsx   | 402 +++++-------------------
 src/client/views/nodes/trails/SpringUtils.ts    |   2 +-
 12 files changed, 134 insertions(+), 373 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/apis/gpt/customization.ts b/src/client/apis/gpt/customization.ts
index 61b666bd3..2262886a2 100644
--- a/src/client/apis/gpt/customization.ts
+++ b/src/client/apis/gpt/customization.ts
@@ -25,13 +25,13 @@ export const addCustomizationProperty = (type: CustomizationType, name: string,
 // includes most fields but is not yet fully comprehensive
 export const gptSlideProperties = [
     'title',
+    'config_zoom',
     'presentation_transition',
-    'presEaseFunc',
+    'presentation_easeFunc',
     'presentation_effect',
     'presentation_effectDirection',
-    'presEffectTiming',
-    'config_zoom',
-    'presPlayAudio',
+    'presentation_effectTiming',
+    'presentation_playAudio',
     'presentation_zoomText',
     'presentation_hideBefore',
     'presentation_hide',
@@ -43,20 +43,20 @@ export const gptSlideProperties = [
 const setupPresSlideCustomization = () => {
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'title', 'is the title/name of the slide.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_transition', 'is a number in milliseconds for how long it should take to transition/move to a slide.');
-    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presEaseFunc', 'is the easing function for the movement to the slide.', ['Ease', 'Ease In', 'Ease Out', 'Ease Out', 'Ease In Out', 'Linear']);
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_easeFunc', 'is the easing function for the movement to the slide.', ['Ease', 'Ease In', 'Ease Out', 'Ease Out', 'Ease In Out', 'Linear']);
 
-    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Zoom', 'Fade in', 'Bounce', 'Flip', 'Rotate', 'Roll']);
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effect', 'is an effect applied to the slide when we transition to it.', ['None', 'Expand', 'Fade in', 'Bounce', 'Flip', 'Rotate', 'Roll']);
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_effectDirection', 'is what direction the effect is applied.', ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']);
     addCustomizationProperty(
         CustomizationType.PRES_TRAIL_SLIDE,
-        'presEffectTiming',
+        'presentation_effectTiming',
         "is a json object of the format: {type: string, stiffness: number, damping: number, mass: number}. Type is always “custom”. Controls the spring-based timing of the presentation effect animation. Stiffness, damping, and mass control the physics-based properties of spring animations. This is used to create a more natural looking timing, bouncy effects, etc. Use spring physics to adjust these parameters to match the user's description of how they want to animate the effect."
     );
 
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'config_zoom', 'is a number from 0 to 1.0 indicating the percentage we should zoom into the slide.');
 
     // boolean values
-    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presPlayAudio', 'is a boolean value indicating if we should play audio when we go to the slide.');
+    addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_playAudio', 'is a boolean value indicating if we should play audio when we go to the slide.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_zoomText', 'is a boolean value indicating if we should zoom into text selections when we go to the slide.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_hideBefore', 'is a boolean value indicating if we should hide the slide before going to it.');
     addCustomizationProperty(CustomizationType.PRES_TRAIL_SLIDE, 'presentation_hide', 'is a boolean value indicating if we should hide the slide during the presentation.');
@@ -82,7 +82,7 @@ export const getSlideTransitionSuggestions = async (inputText: string) => {
      */
 
     const prompt =
-        "I want to generate four distinct types of slide effect animations. Return a json of the form {effect: string, direction: string, stiffness: number, damping: number, mass: number}[] with four elements.  Effect is the type of animation; its only possible values are ['Zoom', 'Fade in', 'Bounce', 'Flip', 'Rotate', 'Roll']. Direction is the direction that the animation starts from; its only possible values are ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']. Stiffness, damping, and mass control the physics-based properties of spring animations. This is used to create a more natural-looking timing, bouncy effects, etc. Use spring physics to adjust these parameters to animate the effect.";
+        "I want to generate four distinct types of slide effect animations. Return a json of the form {effect: string, direction: string, stiffness: number, damping: number, mass: number}[] with four elements.  Effect is the type of animation; its only possible values are ['Expand', 'Fade in', 'Bounce', 'Flip', 'Rotate', 'Roll']. Direction is the direction that the animation starts from; its only possible values are ['Enter from left', 'Enter from right', 'Enter from bottom', 'Enter from Top', 'Enter from center']. Stiffness, damping, and mass control the physics-based properties of spring animations. This is used to create a more natural-looking timing, bouncy effects, etc. Use spring physics to adjust these parameters to animate the effect.";
 
     const customInput = inputText ?? 'Make them as contrasting as possible with different effects and timings ranging from gentle to energetic.';
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 1c18c0d84..24dd5cf37 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -343,6 +343,7 @@ export class DocumentOptions {
     config_map?: STRt = new StrInfo('text location of map', false);
     config_panX?: NUMt = new NumInfo('panX saved as a view spec', false);
     config_panY?: NUMt = new NumInfo('panY saved as a view spec', false);
+    config_zoom?: NUMt = new NumInfo('zoom saved as a view spec', false);
     config_viewScale?: NUMt = new NumInfo('viewScale saved as a view Spec', false);
     presentation_transition?: NUMt = new NumInfo('the time taken for the transition TO a document', false);
     presentation_duration?: NUMt = new NumInfo('the duration of the slide in presentation view', false);
diff --git a/src/client/util/DocumentManager.ts b/src/client/util/DocumentManager.ts
index 09a8194ca..8ad6ddf47 100644
--- a/src/client/util/DocumentManager.ts
+++ b/src/client/util/DocumentManager.ts
@@ -338,11 +338,13 @@ export class DocumentManager {
             // viewSpec !== docView.Document &&
             docView.ComponentView?.focus?.(viewSpec, options);
             PresBox.restoreTargetDocView(docView, viewSpec, options.zoomTime ?? 500);
-            Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect);
+            // if there's an options.effect, it will be handled from linkFollowHighlight.  We delay the start of
+            // the highlight so that the target document can be somewhat centered so that the effect/highlight will be seen
+            // bcz: should this delay be an options parameter?
+            setTimeout(() => Doc.linkFollowHighlight(viewSpec ? [docView.Document, viewSpec] : docView.Document, undefined, options.effect), (options.zoomTime ?? 0) * 0.5);
             if (options.playMedia) docView.ComponentView?.playFrom?.(NumCast(docView.Document._layout_currentTimecode));
             if (options.playAudio) DocumentManager.playAudioAnno(docView.Document);
             if (options.toggleTarget && (!options.didMove || docView.Document.hidden)) docView.Document.hidden = !docView.Document.hidden;
-            if (options.effect) docView.Document[Animation] = options.effect;
 
             if (options.zoomTextSelections && Doc.IsUnhighlightTimerSet() && contextView && targetDoc.text_html) {
                 // if the docView is a text anchor, the contextView is the PDF/Web/Text doc
diff --git a/src/client/views/PinFuncs.ts b/src/client/views/PinFuncs.ts
index 3d998ecaf..430455644 100644
--- a/src/client/views/PinFuncs.ts
+++ b/src/client/views/PinFuncs.ts
@@ -54,7 +54,7 @@ export function PinDocView(pinDocIn: Doc, pinProps: PinProps, targetDoc: Doc) {
         pinDoc.config_width = NumCast(targetDoc.width);
         pinDoc.config_height = NumCast(targetDoc.height);
     }
-    if (pinProps.pinAudioPlay) pinDoc.presPlayAudio = true;
+    if (pinProps.pinAudioPlay) pinDoc.presentation_playAudio = true;
     if (pinProps.pinData) {
         pinDoc.config_pinData =
             pinProps.pinData.scrollable ||
diff --git a/src/client/views/PropertiesView.tsx b/src/client/views/PropertiesView.tsx
index df4ed98ac..024db82a4 100644
--- a/src/client/views/PropertiesView.tsx
+++ b/src/client/views/PropertiesView.tsx
@@ -1487,7 +1487,7 @@ export class PropertiesView extends ObservableReactComponent<PropertiesViewProps
                                 onChange={e => this.changeAnimationBehavior(e.currentTarget.value)}
                                 value={StrCast(this.sourceAnchor?.followLinkAnimEffect, 'default')}>
                                 <option value="default">Default</option>
-                                {[PresEffect.None, PresEffect.Zoom, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
+                                {[PresEffect.None, PresEffect.Expand, PresEffect.Lightspeed, PresEffect.Fade, PresEffect.Flip, PresEffect.Rotate, PresEffect.Bounce, PresEffect.Roll].map(effect => (
                                     <option key={effect.toString()} value={effect.toString()}>
                                         {effect.toString()}
                                     </option>
diff --git a/src/client/views/animationtimeline/Timeline.tsx b/src/client/views/animationtimeline/Timeline.tsx
index c4d35330b..d9ff21035 100644
--- a/src/client/views/animationtimeline/Timeline.tsx
+++ b/src/client/views/animationtimeline/Timeline.tsx
@@ -547,7 +547,7 @@ export class Timeline extends ObservableReactComponent<FieldViewProps> {
                         <div key="timeline_info" className="info-container" onPointerDown={this.onPanDown} ref={this._infoContainer} onWheel={this.onWheelZoom}>
                             {this.drawTicks()}
                             <div key="timeline_scrubber" className="scrubber" style={{ transform: `translate(${this._currentBarX}px)` }}>
-                                <div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown}></div>
+                                <div key="timeline_scrubberhead" className="scrubberhead" onPointerDown={this.onScrubberDown} />
                             </div>
                             <div key="timeline_trackbox" className="trackbox" ref={this._trackbox} style={{ width: `${this._totalLength}px` }}>
                                 {[...this.children, this._props.Document].map(doc => (
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 6f9e14c1b..c59cd0ee4 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -934,7 +934,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                     borderRadius: this.borderRounding,
                     pointerEvents: this._pointerEvents === 'visiblePainted' ? 'none' : this._pointerEvents, // visible painted means that the underlying doc contents are irregular and will process their own pointer events (otherwise, the contents are expected to fill the entire doc view box so we can handle pointer events here)
                 }}>
-                {this._componentView?.isUnstyledView?.() ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
+                {this._componentView?.isUnstyledView?.() || this.Document.type === DocumentType.CONFIG ? renderDoc : DocumentViewInternal.AnimationEffect(renderDoc, this.Document[Animation], this.Document)}
                 {borderPath?.jsx}
             </div>
         );
@@ -958,7 +958,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             duration: Cast(presEffectDoc?.presentation_transition, 'number', Cast(presEffectDoc?.followLinkTransitionTime, 'number', null)),
         };
 
-        const timing = StrCast(presEffectDoc?.presEffectTiming);
+        const timing = StrCast(presEffectDoc?.presentation_effectTiming);
         let timingConfig: SpringSettings | undefined;
         if (timing) {
             timingConfig = JSON.parse(timing);
@@ -976,13 +976,13 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         }
 
         switch (StrCast(presEffectDoc?.presentation_effect, StrCast(presEffectDoc?.followLinkAnimEffect))) {
-            case PresEffect.Zoom:       return <SpringAnimation doc={root} dir={dir} presEffect={PresEffect.Zoom} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SpringAnimation>
-            // case PresEffect.Fade:        return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
+            case PresEffect.Expand:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Expand} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+            case PresEffect.Flip:       return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Flip}   springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+            case PresEffect.Rotate:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Rotate} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+            case PresEffect.Bounce:     return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Bounce} springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+            case PresEffect.Roll:       return <SpringAnimation doc={root} startOpacity={0} dir={dir} presEffect={PresEffect.Roll}   springSettings={timingConfig}>{renderDoc}</SpringAnimation>
+            // case PresEffect.Fade:    return <SlideEffect doc={root} dir={dir} presEffect={PresEffect.Fade} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SlideEffect>
             case PresEffect.Fade:       return <Fade {...effectProps}>{renderDoc}</Fade>
-            case PresEffect.Flip:       return <SpringAnimation doc={root} dir={dir} presEffect={PresEffect.Flip} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SpringAnimation>
-            case PresEffect.Rotate:     return <SpringAnimation doc={root} dir={dir} presEffect={PresEffect.Rotate} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SpringAnimation>
-            case PresEffect.Bounce:     return <SpringAnimation doc={root} dir={dir} presEffect={PresEffect.Bounce} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SpringAnimation>
-            case PresEffect.Roll:       return <SpringAnimation doc={root} dir={dir} presEffect={PresEffect.Roll} tension={timingConfig.stiffness} friction={timingConfig.damping} mass={timingConfig.mass}>{renderDoc}</SpringAnimation>
             // keep as preset, doesn't really make sense with spring config
             case PresEffect.Lightspeed: return <JackInTheBox {...effectProps}>{renderDoc}</JackInTheBox>;
             case PresEffect.None:       
@@ -1416,7 +1416,7 @@ export class DocumentView extends DocComponent<DocumentViewProps>() {
                         <div className="webBox-textHighlight">
                             <ObserverJsxParser autoCloseVoidElements key={42} onError={(e: any) => console.log('PARSE error', e)} renderInWrapper={false} jsx={StrCast(this._htmlOverlayText)} />
                         </div>,
-                        { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Zoom } as any as Doc,
+                        { ...(this._htmlOverlayEffect ?? {}), presentation_effect: effect ?? PresEffect.Expand } as any as Doc,
                         this.Document
                     )}
                 </div>
diff --git a/src/client/views/nodes/trails/PresBox.tsx b/src/client/views/nodes/trails/PresBox.tsx
index 69d03ac2e..101f28ae7 100644
--- a/src/client/views/nodes/trails/PresBox.tsx
+++ b/src/client/views/nodes/trails/PresBox.tsx
@@ -185,7 +185,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @computed
     get currCPoints() {
-        const strPoints = this.activeItem.presEaseFunc ? StrCast(this.activeItem.presEaseFunc) : 'ease';
+        const strPoints = this.activeItem.presentation_easeFunc ? StrCast(this.activeItem.presentation_easeFunc) : 'ease';
         return EaseFuncToPoints(strPoints);
     }
 
@@ -858,9 +858,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
             effect: activeItem,
             noSelect: true,
             openLocation: targetDoc.type === DocumentType.PRES ? ((OpenWhere.replace + ':' + PresBox.PanelName) as OpenWhere) : OpenWhere.addLeft,
-            easeFunc: StrCast(activeItem.presEaseFunc, 'ease') as any,
+            easeFunc: StrCast(activeItem.presentation_easeFunc, 'ease') as any,
             zoomTextSelections: BoolCast(activeItem.presentation_zoomText),
-            playAudio: BoolCast(activeItem.presPlayAudio),
+            playAudio: BoolCast(activeItem.presentation_playAudio),
             playMedia: activeItem.presentation_mediaStart === 'auto',
         };
         if (activeItem.presentation_openInLightbox) {
@@ -1575,16 +1575,16 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     updateEaseFunc = (activeItem: Doc) => {
-        activeItem.presEaseFunc = activeItem.presEaseFunc === 'linear' ? 'ease' : 'linear';
+        activeItem.presentation_easeFunc = activeItem.presentation_easeFunc === 'linear' ? 'ease' : 'linear';
         this.selectedArray.forEach(doc => {
-            doc.presEaseFunc = activeItem.presEaseFunc;
+            doc.presentation_easeFunc = activeItem.presentation_easeFunc;
         });
     };
 
     setEaseFunc = (activeItem: Doc, easeFunc: string) => {
-        activeItem.presEaseFunc = easeFunc;
+        activeItem.presentation_easeFunc = easeFunc;
         this.selectedArray.forEach(doc => {
-            doc.presEaseFunc = activeItem.presEaseFunc;
+            doc.presentation_easeFunc = activeItem.presentation_easeFunc;
         });
     };
 
@@ -1602,9 +1602,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     @undoBatch
     updateEffectTiming = (activeItem: Doc, timing: SpringSettings) => {
-        activeItem.presEffectTiming = JSON.stringify(timing);
+        activeItem.presentation_effectTiming = JSON.stringify(timing);
         this.selectedArray.forEach(doc => {
-            doc.presEffectTiming = activeItem.presEffectTiming;
+            doc.presentation_effectTiming = activeItem.presentation_effectTiming;
         });
     };
 
@@ -1829,7 +1829,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
     @computed get transitionDropdown() {
         const { activeItem } = this;
         // Retrieving spring timing properties
-        const timing = StrCast(activeItem.presEffectTiming);
+        const timing = StrCast(activeItem.presentation_effectTiming);
         let timingConfig: SpringSettings | undefined;
         if (timing) {
             timingConfig = JSON.parse(timing);
@@ -1847,8 +1847,8 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
         if (activeItem && this.targetDoc) {
             const transitionSpeed = activeItem.presentation_transition ? NumCast(activeItem.presentation_transition) / 1000 : 0.5;
             const zoom = NumCast(activeItem.config_zoom, 1) * 100;
-            const effect = StrCast(activeItem.presentation_effect) ? StrCast(activeItem.presentation_effect) : PresEffect.None;
-            const direction = StrCast(activeItem.presentation_effectDirection);
+            const effect = StrCast(activeItem.presentation_effect) ? (StrCast(activeItem.presentation_effect) as any as PresEffect) : PresEffect.None;
+            const direction = StrCast(activeItem.presentation_effectDirection) as PresEffectDirection;
 
             return (
                 <>
@@ -1876,7 +1876,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 />
                                 <IconButton
                                     type={Type.TERT}
-                                    color={this.isRecording ? '#2bcaff' : StrCast(Doc.UserDoc().userVariantColor)}
+                                    color={this.isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
                                     tooltip="Record"
                                     icon={<BiMicrophone size="16px" />}
                                     onClick={() => {
@@ -1894,7 +1894,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 type={Type.TERT}
                                 icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                color={SnappingManager.userVariantColor}
                                 onClick={() => {
                                     this.stopDictation();
                                     this.customizeWithGPT(this.chatInput);
@@ -1919,7 +1919,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                         >
                             Movement
                             <Dropdown
-                                color={StrCast(Doc.UserDoc().userColor)}
+                                color={SnappingManager.userColor}
                                 formLabel="Movement"
                                 closeOnSelect
                                 items={movementItems}
@@ -1951,11 +1951,11 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             </div>
                             {/* Easing function */}
                             <Dropdown
-                                color={StrCast(Doc.UserDoc().userColor)}
+                                color={SnappingManager.userColor}
                                 formLabel="Easing Function"
                                 closeOnSelect
                                 items={easeItems}
-                                selectedVal={this.activeItem.presEaseFunc ? (StrCast(this.activeItem.presEaseFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presEaseFunc)) : 'ease'}
+                                selectedVal={this.activeItem.presentation_easeFunc ? (StrCast(this.activeItem.presentation_easeFunc).startsWith('cubic') ? 'custom' : StrCast(this.activeItem.presentation_easeFunc)) : 'ease'}
                                 setSelectedVal={val => {
                                     if (typeof val === 'string') {
                                         if (val !== 'custom') {
@@ -2017,7 +2017,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 type={Type.TERT}
                                 icon={this.isLoading ? <ReactLoading type="spin" color="#ffffff" width={20} height={20} /> : <AiOutlineSend />}
                                 iconPlacement="right"
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                color={SnappingManager.userVariantColor}
                                 onClick={this.customizeAnimations}
                             />
                         </div>
@@ -2053,7 +2053,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                                     mass: elem.mass,
                                                 });
                                             }}>
-                                            <SlideEffect dir={elem.direction as PresEffectDirection} presEffect={elem.effect as PresEffect} tension={elem.stiffness} friction={elem.damping} mass={elem.mass} infinite>
+                                            <SlideEffect dir={elem.direction} presEffect={elem.effect} springSettings={elem} infinite>
                                                 <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[i] }} />
                                             </SlideEffect>
                                         </div>
@@ -2062,7 +2062,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             </div>
                             {/* Effect dropdown */}
                             <Dropdown
-                                color={StrCast(Doc.UserDoc().userColor)}
+                                color={SnappingManager.userColor}
                                 formLabel="Slide Effect"
                                 closeOnSelect
                                 items={effectItems}
@@ -2126,7 +2126,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             {effect !== PresEffect.Lightspeed && (
                                 <>
                                     <Dropdown
-                                        color={StrCast(Doc.UserDoc().userColor)}
+                                        color={SnappingManager.userColor}
                                         formLabel="Effect Timing"
                                         closeOnSelect
                                         items={effectTimings}
@@ -2208,7 +2208,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                             Preview Effect
                                             <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>
+                                                    <SlideEffect dir={direction} presEffect={effect} springSettings={timingConfig} infinite>
                                                         <div className="presBox-effect-demo-box" style={{ backgroundColor: springPreviewColors[0] }} />
                                                     </SlideEffect>
                                                 </div>
@@ -2224,9 +2224,9 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             <Toggle
                                 formLabel="Play Audio Annotation"
                                 toggleType={ToggleType.SWITCH}
-                                toggleStatus={BoolCast(activeItem.presPlayAudio)}
+                                toggleStatus={BoolCast(activeItem.presentation_playAudio)}
                                 onClick={() => {
-                                    activeItem.presPlayAudio = !BoolCast(activeItem.presPlayAudio);
+                                    activeItem.presentation_playAudio = !BoolCast(activeItem.presentation_playAudio);
                                 }}
                                 color={SnappingManager.userColor}
                             />
@@ -2239,7 +2239,7 @@ export class PresBox extends ViewBoxBaseComponent<FieldViewProps>() {
                                 }}
                                 color={SnappingManager.userColor}
                             />
-                            <Button text="Apply to all" type={Type.TERT} color={StrCast(Doc.UserDoc().userVariantColor)} onClick={() => this.applyTo(this.childDocs)} />
+                            <Button text="Apply to all" type={Type.TERT} color={SnappingManager.userVariantColor} onClick={() => this.applyTo(this.childDocs)} />
                         </div>
                     </div>
                 </>
diff --git a/src/client/views/nodes/trails/PresEnums.ts b/src/client/views/nodes/trails/PresEnums.ts
index 564829d54..67cad9c5d 100644
--- a/src/client/views/nodes/trails/PresEnums.ts
+++ b/src/client/views/nodes/trails/PresEnums.ts
@@ -7,7 +7,7 @@ export enum PresMovement {
 }
 
 export enum PresEffect {
-    Zoom = 'Zoom',
+    Expand = 'Expand',
     Lightspeed = 'Lightspeed',
     Fade = 'Fade in',
     Flip = 'Flip',
diff --git a/src/client/views/nodes/trails/SlideEffect.scss b/src/client/views/nodes/trails/SlideEffect.scss
index cc851354e..aa2e5bbd9 100644
--- a/src/client/views/nodes/trails/SlideEffect.scss
+++ b/src/client/views/nodes/trails/SlideEffect.scss
@@ -8,7 +8,7 @@
 .flip-side {
     position: absolute;
     will-change: transform, opacity;
-    backface-visibility: hidden;
+    // backface-visibility: hidden;
 }
 
 .flip-front {
diff --git a/src/client/views/nodes/trails/SlideEffect.tsx b/src/client/views/nodes/trails/SlideEffect.tsx
index 03cd88f45..00039e3cb 100644
--- a/src/client/views/nodes/trails/SlideEffect.tsx
+++ b/src/client/views/nodes/trails/SlideEffect.tsx
@@ -5,358 +5,116 @@ import { Doc } from '../../../../fields/Doc';
 import { NumCast } from '../../../../fields/Types';
 import { PresEffect, PresEffectDirection } from './PresEnums';
 import './SlideEffect.scss';
+import { emptyFunction } from '../../../../Utils';
 
 interface SlideEffectProps {
-    // pass in doc to extract width, height, bg
-    doc?: Doc;
+    doc?: Doc; // pass in doc to extract width, height, bg
     dir: PresEffectDirection;
     presEffect: PresEffect;
-    // stiffness (figma) = tension (react-spring)
-    tension: number;
-    // damping (figma) = friction (react-spring)
-    friction: number;
-    mass: number;
+    springSettings: {
+        stiffness: number;
+        damping: number;
+        mass: number;
+    };
     children: React.ReactNode;
     infinite?: boolean;
+    startOpacity?: number; // set to zero to linearly fade in while animating
 }
 
 const DEFAULT_WIDTH = 40;
 const PREVIEW_OFFSET = 60;
 const ACTUAL_OFFSET = 200;
-const infiniteOptions = {
-    loop: true,
-    delay: 500,
-};
 
 /**
  * This component wraps around the doc to create an effect animation, and also wraps the preview animations
  * for the effects as well.
  */
-export default function SpringAnimation({ doc, dir, friction, tension, mass, presEffect, children, infinite }: SlideEffectProps) {
-    const [springs, api] = useSpring(
-        () => ({
-            from: {
-                x: 0,
-                y: 0,
-                opacity: 0,
-                scale: 1,
-            },
-            config: {
-                tension,
-                friction,
-                mass,
-            },
-            onStart: () => {},
-            onRest: () => {},
-        }),
-        [tension, friction, mass]
-    );
-    const [ref, inView] = useInView({
-        once: true,
-    });
-
-    const zoomConfig = {
-        from: {
-            scale: 0,
-            x: 0,
-            y: 0,
-            opacity: 1,
-        },
-        to: {
-            scale: 1,
-            x: 0,
-            y: 0,
-            opacity: 1,
-            config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
-            },
-        },
+export default function SpringAnimation({ doc, dir, springSettings, presEffect, children, infinite, startOpacity }: SlideEffectProps) {
+    const expandConfig = {
+        to: { scale: 1, x: 0, y: 0 },
+        from: { scale: 0, x: 0, y: 0 },
     };
-
     const fadeConfig = {
-        from: {
-            opacity: 0,
-            scale: 1,
-            x: 0,
-            y: 0,
-        },
-        to: {
-            opacity: 1,
-            scale: 1,
-            x: 0,
-            y: 0,
-            config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
-            },
-        },
+        to: { x: 0, y: 0 },
+        from: { x: 0, y: 0 },
     };
-
     const rotateConfig = {
-        from: {
-            x: 0,
-        },
-        to: {
-            x: 360,
-            config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
-            },
-        },
+        to: { x: 360, y: 0 },
+        from: { x: 0, y: 0 },
     };
-
-    const getBounceConfigFrom = () => {
-        switch (dir) {
-            case PresEffectDirection.Left:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: infinite ? -PREVIEW_OFFSET : -ACTUAL_OFFSET,
-                        y: 0,
-                    },
-                };
-            case PresEffectDirection.Right:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: infinite ? PREVIEW_OFFSET : ACTUAL_OFFSET,
-                        y: 0,
-                    },
-                };
-            case PresEffectDirection.Top:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: 0,
-                        y: infinite ? -PREVIEW_OFFSET : -ACTUAL_OFFSET,
-                    },
-                };
-            case PresEffectDirection.Bottom:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: 0,
-                        y: infinite ? PREVIEW_OFFSET : ACTUAL_OFFSET,
-                    },
-                };
-            default:
-                // no movement for center
-                return {
-                    from: {
-                        opacity: 0,
-                        x: 0,
-                        y: 0,
-                    },
-                };
-        }
-    };
-
-    const bounceConfig = {
-        ...getBounceConfigFrom(),
-        to: [
-            {
-                opacity: 1,
-                x: 0,
-                y: 0,
-                config: {
-                    tension: tension,
-                    friction: friction,
-                    mass: mass,
-                },
-            },
-        ],
-    };
-
     const flipConfig = {
-        from: {
-            x: 0,
-        },
-        to: {
-            x: 180,
-            config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
-            },
-        },
+        to: { x: 180, y: 0 },
+        from: { x: 0, y: 0 },
     };
-
-    // only left and right for now
-    const getRollConfigFrom = () => {
-        switch (dir) {
-            case PresEffectDirection.Left:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: -100,
-                        y: -120,
-                    },
-                };
-            case PresEffectDirection.Right:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: 100,
-                        y: 120,
-                    },
-                };
-            case PresEffectDirection.Top:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: -100,
-                        y: -120,
-                    },
-                };
-            case PresEffectDirection.Bottom:
-                return {
-                    from: {
-                        opacity: 0,
-                        x: -100,
-                        y: -120,
-                    },
-                };
-            default:
-                // no movement for center
-                return {
-                    from: {
-                        opacity: 0,
-                        x: 0,
-                        y: 0,
-                    },
-                };
-        }
+    const bounceConfig = {
+        to: { x: 0, y: 0 },
+        from: (() => {
+            const offset = infinite ? PREVIEW_OFFSET : ACTUAL_OFFSET;
+            switch (dir) {
+                case PresEffectDirection.Left:  return { x: -offset, y:       0, };
+                case PresEffectDirection.Right: return { x:  offset, y:       0, };
+                case PresEffectDirection.Top:   return { x:       0, y: -offset, };
+                case PresEffectDirection.Bottom:return { x:       0, y:  offset, };
+                default:                        return { x:       0, y:       0, }; // no movement for center
+            }})(), // prettier-ignore
     };
-
     const rollConfig = {
-        ...getRollConfigFrom(),
-        to: {
-            opacity: 1,
-            x: 0,
-            y: 0,
-            config: {
-                tension: tension,
-                friction: friction,
-                mass: mass,
-            },
-        },
+        to: { x: 0, y: 0 },
+        from: (() => {
+            switch (dir) {
+                case PresEffectDirection.Left:   return { x: -100, y: -120, };
+                case PresEffectDirection.Right:  return { x:  100, y:  120, };
+                case PresEffectDirection.Top:    return { x: -100, y: -120, };
+                case PresEffectDirection.Bottom: return { x: -100, y: -120, };
+                default:                         return { x:    0, y:    0, };  // no movement for center
+            }})(), // prettier-ignore
     };
 
-    // Switch animation depending on slide effect
-    const startAnimation = () => {
-        api.stop();
-        let config: any = zoomConfig;
+    // prettier-ignore
+    const effectConfig = (() => {
         switch (presEffect) {
-            case PresEffect.Bounce:
-                config = bounceConfig;
-                break;
-            case PresEffect.Zoom:
-                config = zoomConfig;
-                break;
-            case PresEffect.Rotate:
-                config = rotateConfig;
-                break;
-            case PresEffect.Fade:
-                config = fadeConfig;
-                break;
-            case PresEffect.Flip:
-                config = flipConfig;
-                break;
-            case PresEffect.Roll:
-                config = rollConfig;
-                break;
-            case PresEffect.Lightspeed:
-                break;
-            default:
-                break;
-        }
-
-        if (infinite) {
-            config = { ...config, ...infiniteOptions };
-        }
+            case PresEffect.Fade:       return fadeConfig;
+            case PresEffect.Bounce:     return bounceConfig;
+            case PresEffect.Rotate:     return rotateConfig;
+            case PresEffect.Flip:       return flipConfig;
+            case PresEffect.Roll:       return rollConfig;
+            case PresEffect.Lightspeed: return { from: {}, to: {} };
+            case PresEffect.Expand:     
+            default:                    return expandConfig;
+        } // prettier-ignore
+    })();
 
-        api.start(config);
-    };
-
-    const getRenderDoc = () => {
-        switch (presEffect) {
-            case PresEffect.Rotate:
-                return (
-                    <animated.div ref={ref} style={{ transform: to(springs.x, val => `rotate(${val}deg)`) }}>
-                        {children}
-                    </animated.div>
-                );
-            case PresEffect.Flip:
-                return (
-                    // Pass in doc dimensions
-                    <div className="flip-container" ref={ref}>
-                        {dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? (
-                            <>
-                                <animated.div
-                                    className="flip-side flip-back"
-                                    style={{
-                                        transform: to(springs.x, val => `perspective(600px) rotateX(${val}deg)`),
-                                        width: doc ? NumCast(doc.width) : DEFAULT_WIDTH,
-                                        height: doc ? NumCast(doc.height) : DEFAULT_WIDTH,
-                                        backgroundColor: infinite ? '#a825ff' : 'rgb(223, 223, 223);',
-                                    }}
-                                />
-                                <animated.div
-                                    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>
-                            </>
-                        ) : (
-                            <>
-                                <animated.div
-                                    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"
-                                    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>
-                            </>
-                        )}
-                    </div>
-                );
-            case PresEffect.Roll:
-                return (
-                    <animated.div ref={ref} style={{ opacity: springs.opacity, transform: to([springs.x, springs.y], (val, val2) => `translate3d(${val}%, 0, 0) rotate3d(0, 0, 1, ${val2}deg)`) }}>
-                        {children}
-                    </animated.div>
-                );
-            default:
-                return (
-                    <animated.div
-                        ref={ref}
-                        style={{
-                            ...springs,
-                        }}>
-                        {children}
-                    </animated.div>
-                );
-        }
-    };
-
-    useEffect(() => {
-        if (infinite || !inView) return;
-        setTimeout(() => {
-            startAnimation();
-        }, 100);
-    }, [inView]);
+    const [springs, api] = useSpring(
+        () => ({
+            to: { ...effectConfig.to, opacity: 1 },
+            from: { ...effectConfig.from, opacity: startOpacity ?? 1 },
+            config: { tension: springSettings.stiffness, friction: springSettings.damping, mass: springSettings.mass },
+            onStart: emptyFunction,
+            onRest: emptyFunction,
+        }),
+        [springSettings]
+    );
 
+    const [ref, inView] = useInView({
+        once: true,
+    });
     useEffect(() => {
-        if (infinite) {
-            startAnimation();
+        if (inView) {
+            api.start({ loop: infinite, delay: infinite ? 500 : 0 });
         }
-    }, [presEffect, tension, friction, mass]);
-
-    return <div>{getRenderDoc()}</div>;
+    }, [inView]);
+    const animatedDiv = (style: any) => (
+        <animated.div ref={ref} style={{ ...style, opacity: to(springs.opacity, val => `${val}`) }}>
+            {children}
+        </animated.div>
+    );
+    const [width, height] = [NumCast(doc?.width, DEFAULT_WIDTH), NumCast(doc?.height, DEFAULT_WIDTH)];
+    const flipAxis = dir === PresEffectDirection.Bottom || dir === PresEffectDirection.Top ? 'X' : 'Y';
+    const [rotateX, rotateY] = flipAxis === 'X' ? ['180deg', undefined] : [undefined, '180deg'];
+    switch (presEffect) {
+        case PresEffect.Flip:  return animatedDiv({ transform: to(springs.x, val => `perspective(600px) rotate${flipAxis}(${val}deg)`), width, height, rotateX, rotateY })
+        case PresEffect.Rotate:return animatedDiv({ transform: to(springs.x, val => `rotate(${val}deg)`) });
+        case PresEffect.Roll:  return animatedDiv({ transform: to([springs.x, springs.y], (val, val2) => `translate3d(${val}%, 0, 0) rotate3d(0, 0, 1, ${val2}deg)`) });
+        default:               return animatedDiv(springs);
+    } // prettier-ignore
 }
diff --git a/src/client/views/nodes/trails/SpringUtils.ts b/src/client/views/nodes/trails/SpringUtils.ts
index bfb22c46a..73e1e14f1 100644
--- a/src/client/views/nodes/trails/SpringUtils.ts
+++ b/src/client/views/nodes/trails/SpringUtils.ts
@@ -80,7 +80,7 @@ export const effectItems = Object.values(PresEffect)
 export const presEffectDefaultTimings: {
     [key: string]: SpringSettings;
 } = {
-    Zoom: { type: SpringType.GENTLE, stiffness: 100, damping: 15, mass: 1 },
+    Expand: { type: SpringType.GENTLE, stiffness: 100, damping: 15, mass: 1 },
     Bounce: {
         type: SpringType.BOUNCY,
         stiffness: 600,
-- 
cgit v1.2.3-70-g09d2


From 38a382a03675d6a50ec7de75f05025efd093f570 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 17 May 2024 10:39:25 -0400
Subject: manually added ChatBox from aj-starter

---
 package-lock.json                                  | 359 ++++++++++++
 package.json                                       |   7 +
 src/client/documents/DocumentTypes.ts              |   1 +
 src/client/documents/Documents.ts                  |   9 +
 src/client/util/CurrentUserUtils.ts                |   2 +
 src/client/views/Main.tsx                          |   2 +
 src/client/views/nodes/ChatBox/ChatBox.scss        | 228 ++++++++
 src/client/views/nodes/ChatBox/ChatBox.tsx         | 609 +++++++++++++++++++++
 .../views/nodes/ChatBox/MessageComponent.tsx       | 116 ++++
 src/client/views/nodes/ChatBox/types.ts            |  23 +
 src/client/views/nodes/DocumentContentsView.tsx    |   2 +-
 src/fields/Types.ts                                |   5 +-
 src/server/ApiManagers/AssistantManager.ts         | 131 +++++
 src/server/index.ts                                |  10 +-
 14 files changed, 1498 insertions(+), 6 deletions(-)
 create mode 100644 src/client/views/nodes/ChatBox/ChatBox.scss
 create mode 100644 src/client/views/nodes/ChatBox/ChatBox.tsx
 create mode 100644 src/client/views/nodes/ChatBox/MessageComponent.tsx
 create mode 100644 src/client/views/nodes/ChatBox/types.ts
 create mode 100644 src/server/ApiManagers/AssistantManager.ts

(limited to 'src/client/util')

diff --git a/package-lock.json b/package-lock.json
index 60198132c..35ffc712c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,6 +60,7 @@
                 "babel": "^6.23.0",
                 "babel-loader": "^9.1.3",
                 "bcrypt-nodejs": "0.0.3",
+                "better-react-mathjax": "^2.0.3",
                 "bezier-curve": "^1.0.0",
                 "bezier-js": "^6.1.4",
                 "bingmaps-react": "^1.2.10",
@@ -86,6 +87,7 @@
                 "csstype": "^3.1.3",
                 "csv-parser": "^3.0.0",
                 "csv-stringify": "^6.4.4",
+                "csvtojson": "^2.0.10",
                 "D": "^1.0.0",
                 "d3": "^7.8.5",
                 "depcheck": "^1.4.7",
@@ -107,6 +109,7 @@
                 "fluent-ffmpeg": "^2.1.2",
                 "forever-agent": "^0.6.1",
                 "fork-ts-checker-webpack-plugin": "^9.0.2",
+                "form-data": "^4.0.0",
                 "formidable": "3.5.1",
                 "function-plot": "^1.23.3",
                 "golden-layout": "^2.6.0",
@@ -133,6 +136,7 @@
                 "jszip": "^3.10.1",
                 "lodash": "^4.17.21",
                 "mapbox-gl": "^3.0.1",
+                "markdown-it": "^14.1.0",
                 "mathquill": "^0.10.1-a",
                 "md5-file": "^5.0.0",
                 "memorystream": "^0.3.1",
@@ -182,6 +186,7 @@
                 "react-grid-layout": "^1.4.4",
                 "react-icons": "^5.0.1",
                 "react-jsx-parser": "^1.29.0",
+                "react-latex-next": "^3.0.0",
                 "react-loading": "^2.0.3",
                 "react-map-gl": "^7.1.6",
                 "react-markdown": "^9.0.1",
@@ -193,8 +198,10 @@
                 "react-xarrows": "^2.0.2",
                 "readline": "^1.3.0",
                 "recharts": "^2.10.3",
+                "rehype-katex": "^7.0.0",
                 "rehype-raw": "^7.0.0",
                 "remark-gfm": "^4.0.0",
+                "remark-math": "^6.0.0",
                 "request": "^2.88.2",
                 "request-promise": "^4.2.6",
                 "reveal.js": "^5.0.2",
@@ -9347,6 +9354,11 @@
             "integrity": "sha512-dRLjCWHYg4oaA77cxO64oO+7JwCwnIzkZPdrrC71jQmQtlhM556pwKo5bUzqvZndkVbeFLIIi+9TC40JNF5hNQ==",
             "dev": true
         },
+        "node_modules/@types/katex": {
+            "version": "0.16.7",
+            "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.7.tgz",
+            "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
+        },
         "node_modules/@types/keygrip": {
             "version": "1.0.6",
             "resolved": "https://registry.npmjs.org/@types/keygrip/-/keygrip-1.0.6.tgz",
@@ -11251,6 +11263,17 @@
             "resolved": "https://registry.npmjs.org/before-after-hook/-/before-after-hook-3.0.2.tgz",
             "integrity": "sha512-Nik3Sc0ncrMK4UUdXQmAnRtzmNQTAAXmXIopizwZ1W1t8QmfJj+zL4OA2I7XPTPW5z5TDqv4hRo/JzouDJnX3A=="
         },
+        "node_modules/better-react-mathjax": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/better-react-mathjax/-/better-react-mathjax-2.0.3.tgz",
+            "integrity": "sha512-wfifT8GFOKb1TWm2+E50I6DJpLZ5kLbch283Lu043EJtwSv0XvZDjr4YfR4d2MjAhqP6SH4VjjrKgbX8R00oCQ==",
+            "dependencies": {
+                "mathjax-full": "^3.2.2"
+            },
+            "peerDependencies": {
+                "react": ">=16.8"
+            }
+        },
         "node_modules/bezier-curve": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/bezier-curve/-/bezier-curve-1.0.0.tgz",
@@ -15907,6 +15930,33 @@
             "resolved": "https://registry.npmjs.org/csv-stringify/-/csv-stringify-6.4.6.tgz",
             "integrity": "sha512-h2V2XZ3uOTLilF5dPIptgUfN/o2ia/80Ie0Lly18LAnw5s8Eb7kt8rfxSUy24AztJZas9f6DPZpVlzDUtFt/ag=="
         },
+        "node_modules/csvtojson": {
+            "version": "2.0.10",
+            "resolved": "https://registry.npmjs.org/csvtojson/-/csvtojson-2.0.10.tgz",
+            "integrity": "sha512-lUWFxGKyhraKCW8Qghz6Z0f2l/PqB1W3AO0HKJzGIQ5JRSlR651ekJDiGJbBT4sRNNv5ddnSGVEnsxP9XRCVpQ==",
+            "dependencies": {
+                "bluebird": "^3.5.1",
+                "lodash": "^4.17.3",
+                "strip-bom": "^2.0.0"
+            },
+            "bin": {
+                "csvtojson": "bin/csvtojson"
+            },
+            "engines": {
+                "node": ">=4.0.0"
+            }
+        },
+        "node_modules/csvtojson/node_modules/strip-bom": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/strip-bom/-/strip-bom-2.0.0.tgz",
+            "integrity": "sha512-kwrX1y7czp1E69n2ajbG65mIo9dqvJ+8aBQXOGVxqwvNbsXdFM6Lq37dLAY3mknUwru8CfcCbfOLL/gMo+fi3g==",
+            "dependencies": {
+                "is-utf8": "^0.2.0"
+            },
+            "engines": {
+                "node": ">=0.10.0"
+            }
+        },
         "node_modules/custom-event": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/custom-event/-/custom-event-1.0.1.tgz",
@@ -18913,6 +18963,14 @@
                 "node": ">=8"
             }
         },
+        "node_modules/esm": {
+            "version": "3.2.25",
+            "resolved": "https://registry.npmjs.org/esm/-/esm-3.2.25.tgz",
+            "integrity": "sha512-U1suiZ2oDVWv4zPO56S0NcR5QriEahGtdN2OR6FiOG4WJvcjBVFB0qI4+eKoWFH483PKGuLuu6V8Z4T5g63UVA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/espree": {
             "version": "9.6.1",
             "resolved": "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz",
@@ -20825,6 +20883,52 @@
                 "node": ">= 0.4"
             }
         },
+        "node_modules/hast-util-from-dom": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.0.tgz",
+            "integrity": "sha512-d6235voAp/XR3Hh5uy7aGLbM3S4KamdW0WEgOaU1YoewnuYw4HXb5eRtv9g65m/RFGEfUY1Mw4UqCc5Y8L4Stg==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "hastscript": "^8.0.0",
+                "web-namespaces": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-from-html": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.1.tgz",
+            "integrity": "sha512-RXQBLMl9kjKVNkJTIO6bZyb2n+cUH8LFaSSzo82jiLT6Tfc+Pt7VQCS+/h3YwG4jaNE2TA2sdJisGWR+aJrp0g==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "devlop": "^1.1.0",
+                "hast-util-from-parse5": "^8.0.0",
+                "parse5": "^7.0.0",
+                "vfile": "^6.0.0",
+                "vfile-message": "^4.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
+        "node_modules/hast-util-from-html-isomorphic": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+            "integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "hast-util-from-dom": "^5.0.0",
+                "hast-util-from-html": "^2.0.0",
+                "unist-util-remove-position": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/hast-util-from-parse5": {
             "version": "8.0.1",
             "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
@@ -20844,6 +20948,18 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/hast-util-is-element": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+            "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+            "dependencies": {
+                "@types/hast": "^3.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/hast-util-parse-selector": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
@@ -20924,6 +21040,21 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/hast-util-to-text": {
+            "version": "4.0.2",
+            "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+            "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/unist": "^3.0.0",
+                "hast-util-is-element": "^3.0.0",
+                "unist-util-find-after": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/hast-util-whitespace": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -22592,6 +22723,11 @@
                 "url": "https://github.com/sponsors/sindresorhus"
             }
         },
+        "node_modules/is-utf8": {
+            "version": "0.2.1",
+            "resolved": "https://registry.npmjs.org/is-utf8/-/is-utf8-0.2.1.tgz",
+            "integrity": "sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q=="
+        },
         "node_modules/is-weakmap": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/is-weakmap/-/is-weakmap-2.0.2.tgz",
@@ -23214,6 +23350,29 @@
                 "node": ">=12.0.0"
             }
         },
+        "node_modules/katex": {
+            "version": "0.16.10",
+            "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
+            "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
+            "funding": [
+                "https://opencollective.com/katex",
+                "https://github.com/sponsors/katex"
+            ],
+            "dependencies": {
+                "commander": "^8.3.0"
+            },
+            "bin": {
+                "katex": "cli.js"
+            }
+        },
+        "node_modules/katex/node_modules/commander": {
+            "version": "8.3.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+            "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+            "engines": {
+                "node": ">= 12"
+            }
+        },
         "node_modules/kdbush": {
             "version": "4.0.2",
             "resolved": "https://registry.npmjs.org/kdbush/-/kdbush-4.0.2.tgz",
@@ -23429,6 +23588,14 @@
             "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
             "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
         },
+        "node_modules/linkify-it": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-5.0.0.tgz",
+            "integrity": "sha512-5aHCbzQRADcdP+ATqnDuhhJ/MRIqDkZX5pyjFHRRysS8vZ5AbqGEoFIb6pYHPZ+L/OC2Lc+xT8uHVVR5CAK/wQ==",
+            "dependencies": {
+                "uc.micro": "^2.0.0"
+            }
+        },
         "node_modules/load-bmfont": {
             "version": "1.4.1",
             "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.1.tgz",
@@ -23796,6 +23963,27 @@
                 "vt-pbf": "^3.1.3"
             }
         },
+        "node_modules/markdown-it": {
+            "version": "14.1.0",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-14.1.0.tgz",
+            "integrity": "sha512-a54IwgWPaeBCAAsv13YgmALOF1elABB08FxO9i+r4VFk5Vl4pKokRPeX8u5TCgSsPi6ec1otfLjdOpVcgbpshg==",
+            "dependencies": {
+                "argparse": "^2.0.1",
+                "entities": "^4.4.0",
+                "linkify-it": "^5.0.0",
+                "mdurl": "^2.0.0",
+                "punycode.js": "^2.3.1",
+                "uc.micro": "^2.1.0"
+            },
+            "bin": {
+                "markdown-it": "bin/markdown-it.mjs"
+            }
+        },
+        "node_modules/markdown-it/node_modules/argparse": {
+            "version": "2.0.1",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+            "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="
+        },
         "node_modules/markdown-table": {
             "version": "3.0.3",
             "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.3.tgz",
@@ -23819,6 +24007,17 @@
                 "mr-parser": "^0.2.1"
             }
         },
+        "node_modules/mathjax-full": {
+            "version": "3.2.2",
+            "resolved": "https://registry.npmjs.org/mathjax-full/-/mathjax-full-3.2.2.tgz",
+            "integrity": "sha512-+LfG9Fik+OuI8SLwsiR02IVdjcnRCy5MufYLi0C3TdMT56L/pjB0alMVGgoWJF8pN9Rc7FESycZB9BMNWIid5w==",
+            "dependencies": {
+                "esm": "^3.2.25",
+                "mhchemparser": "^4.1.0",
+                "mj-context-menu": "^0.6.1",
+                "speech-rule-engine": "^4.0.6"
+            }
+        },
         "node_modules/mathquill": {
             "version": "0.10.1-a",
             "resolved": "https://registry.npmjs.org/mathquill/-/mathquill-0.10.1-a.tgz",
@@ -23987,6 +24186,24 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdast-util-math": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+            "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/mdast": "^4.0.0",
+                "devlop": "^1.0.0",
+                "longest-streak": "^3.0.0",
+                "mdast-util-from-markdown": "^2.0.0",
+                "mdast-util-to-markdown": "^2.1.0",
+                "unist-util-remove-position": "^5.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/mdast-util-mdx-expression": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.0.tgz",
@@ -24109,6 +24326,11 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/mdurl": {
+            "version": "2.0.0",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-2.0.0.tgz",
+            "integrity": "sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w=="
+        },
         "node_modules/media-typer": {
             "version": "0.3.0",
             "resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
@@ -24172,6 +24394,11 @@
                 "node": ">= 0.6"
             }
         },
+        "node_modules/mhchemparser": {
+            "version": "4.2.1",
+            "resolved": "https://registry.npmjs.org/mhchemparser/-/mhchemparser-4.2.1.tgz",
+            "integrity": "sha512-kYmyrCirqJf3zZ9t/0wGgRZ4/ZJw//VwaRVGA75C4nhE60vtnIzhl9J9ndkX/h6hxSN7pjg/cE0VxbnNM+bnDQ=="
+        },
         "node_modules/micromark": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
@@ -24353,6 +24580,24 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/micromark-extension-math": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.0.0.tgz",
+            "integrity": "sha512-iJ2Q28vBoEovLN5o3GO12CpqorQRYDPT+p4zW50tGwTfJB+iv/VnB6Ini+gqa24K97DwptMBBIvVX6Bjk49oyQ==",
+            "dependencies": {
+                "@types/katex": "^0.16.0",
+                "devlop": "^1.0.0",
+                "katex": "^0.16.0",
+                "micromark-factory-space": "^2.0.0",
+                "micromark-util-character": "^2.0.0",
+                "micromark-util-symbol": "^2.0.0",
+                "micromark-util-types": "^2.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/micromark-factory-destination": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
@@ -24840,6 +25085,11 @@
             "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
             "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
         },
+        "node_modules/mj-context-menu": {
+            "version": "0.6.1",
+            "resolved": "https://registry.npmjs.org/mj-context-menu/-/mj-context-menu-0.6.1.tgz",
+            "integrity": "sha512-7NO5s6n10TIV96d4g2uDpG7ZDpIhMh0QNfGdJw/W47JswFcosz457wqz/b5sAKvl12sxINGFCn80NZHKwxQEXA=="
+        },
         "node_modules/mkdirp": {
             "version": "1.0.4",
             "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
@@ -29576,6 +29826,14 @@
                 "node": ">=6"
             }
         },
+        "node_modules/punycode.js": {
+            "version": "2.3.1",
+            "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
+            "integrity": "sha512-uxFIHU0YlHYhDQtV4R9J6a52SLx28BCjT+4ieh7IGbgwVJWO+km431c4yRlREUAsAmt/uMjQUyQHNEPf0M39CA==",
+            "engines": {
+                "node": ">=6"
+            }
+        },
         "node_modules/q": {
             "version": "1.5.1",
             "resolved": "https://registry.npmjs.org/q/-/q-1.5.1.tgz",
@@ -30099,6 +30357,22 @@
                 "@types/react": "^17"
             }
         },
+        "node_modules/react-latex-next": {
+            "version": "3.0.0",
+            "resolved": "https://registry.npmjs.org/react-latex-next/-/react-latex-next-3.0.0.tgz",
+            "integrity": "sha512-x70f1b1G7TronVigsRgKHKYYVUNfZk/3bciFyYX1lYLQH2y3/TXku3+5Vap8MDbJhtopePSYBsYWS6jhzIdz+g==",
+            "dependencies": {
+                "katex": "^0.16.0"
+            },
+            "engines": {
+                "node": ">=12",
+                "npm": ">=5"
+            },
+            "peerDependencies": {
+                "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0",
+                "react-dom": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+            }
+        },
         "node_modules/react-loading": {
             "version": "2.0.3",
             "resolved": "https://registry.npmjs.org/react-loading/-/react-loading-2.0.3.tgz",
@@ -30622,6 +30896,24 @@
                 "jsesc": "bin/jsesc"
             }
         },
+        "node_modules/rehype-katex": {
+            "version": "7.0.0",
+            "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.0.tgz",
+            "integrity": "sha512-h8FPkGE00r2XKU+/acgqwWUlyzve1IiOKwsEkg4pDL3k48PiE0Pt+/uLtVHDVkN1yA4iurZN6UES8ivHVEQV6Q==",
+            "dependencies": {
+                "@types/hast": "^3.0.0",
+                "@types/katex": "^0.16.0",
+                "hast-util-from-html-isomorphic": "^2.0.0",
+                "hast-util-to-text": "^4.0.0",
+                "katex": "^0.16.0",
+                "unist-util-visit-parents": "^6.0.0",
+                "vfile": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/rehype-raw": {
             "version": "7.0.0",
             "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
@@ -30661,6 +30953,21 @@
                 "url": "https://opencollective.com/unified"
             }
         },
+        "node_modules/remark-math": {
+            "version": "6.0.0",
+            "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+            "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+            "dependencies": {
+                "@types/mdast": "^4.0.0",
+                "mdast-util-math": "^3.0.0",
+                "micromark-extension-math": "^3.0.0",
+                "unified": "^11.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/remark-parse": {
             "version": "11.0.0",
             "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -32129,6 +32436,27 @@
                 "node": ">= 6"
             }
         },
+        "node_modules/speech-rule-engine": {
+            "version": "4.0.7",
+            "resolved": "https://registry.npmjs.org/speech-rule-engine/-/speech-rule-engine-4.0.7.tgz",
+            "integrity": "sha512-sJrL3/wHzNwJRLBdf6CjJWIlxC04iYKkyXvYSVsWVOiC2DSkHmxsqOhEeMsBA9XK+CHuNcsdkbFDnoUfAsmp9g==",
+            "dependencies": {
+                "commander": "9.2.0",
+                "wicked-good-xpath": "1.3.0",
+                "xmldom-sre": "0.1.31"
+            },
+            "bin": {
+                "sre": "bin/sre"
+            }
+        },
+        "node_modules/speech-rule-engine/node_modules/commander": {
+            "version": "9.2.0",
+            "resolved": "https://registry.npmjs.org/commander/-/commander-9.2.0.tgz",
+            "integrity": "sha512-e2i4wANQiSXgnrBlIatyHtP1odfUp0BbV5Y5nEGbxtIrStkEOAAzCUirvLBNXHLr7kwLvJl6V+4V3XV9x7Wd9w==",
+            "engines": {
+                "node": "^12.20.0 || >=14"
+            }
+        },
         "node_modules/splaytree": {
             "version": "3.1.2",
             "resolved": "https://registry.npmjs.org/splaytree/-/splaytree-3.1.2.tgz",
@@ -34036,6 +34364,11 @@
             "resolved": "https://registry.npmjs.org/typical/-/typical-2.6.1.tgz",
             "integrity": "sha512-ofhi8kjIje6npGozTip9Fr8iecmYfEbS06i0JnIg+rh51KakryWF4+jX8lLKZVhy6N+ID45WYSFCxPOdTWCzNg=="
         },
+        "node_modules/uc.micro": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-2.1.0.tgz",
+            "integrity": "sha512-ARDJmphmdvUk6Glw7y9DQ2bFkKBHwQHLi2lsaH6PPmz/Ka9sFOBsBluozhDltWmnv9u/cF6Rt87znRTPV+yp/A=="
+        },
         "node_modules/uid-safe": {
             "version": "2.1.5",
             "resolved": "https://registry.npmjs.org/uid-safe/-/uid-safe-2.1.5.tgz",
@@ -34164,6 +34497,19 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/unist-util-find-after": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+            "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+            "dependencies": {
+                "@types/unist": "^3.0.0",
+                "unist-util-is": "^6.0.0"
+            },
+            "funding": {
+                "type": "opencollective",
+                "url": "https://opencollective.com/unified"
+            }
+        },
         "node_modules/unist-util-is": {
             "version": "6.0.0",
             "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
@@ -35165,6 +35511,11 @@
                 "url": "https://github.com/sponsors/ljharb"
             }
         },
+        "node_modules/wicked-good-xpath": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/wicked-good-xpath/-/wicked-good-xpath-1.3.0.tgz",
+            "integrity": "sha512-Gd9+TUn5nXdwj/hFsPVx5cuHHiF5Bwuc30jZ4+ronF1qHK5O7HD0sgmXWSEgwKquT3ClLoKPVbO6qGwVwLzvAw=="
+        },
         "node_modules/wide-align": {
             "version": "1.1.5",
             "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
@@ -35481,6 +35832,14 @@
             "integrity": "sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==",
             "dev": true
         },
+        "node_modules/xmldom-sre": {
+            "version": "0.1.31",
+            "resolved": "https://registry.npmjs.org/xmldom-sre/-/xmldom-sre-0.1.31.tgz",
+            "integrity": "sha512-f9s+fUkX04BxQf+7mMWAp5zk61pciie+fFLC9hX9UVvCeJQfNHRHXpeo5MPcR0EUf57PYLdt+ZO4f3Ipk2oZUw==",
+            "engines": {
+                "node": ">=0.1"
+            }
+        },
         "node_modules/xmlhttprequest-ssl": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz",
diff --git a/package.json b/package.json
index 833bebf44..aa0874714 100644
--- a/package.json
+++ b/package.json
@@ -145,6 +145,7 @@
         "babel": "^6.23.0",
         "babel-loader": "^9.1.3",
         "bcrypt-nodejs": "0.0.3",
+        "better-react-mathjax": "^2.0.3",
         "bezier-curve": "^1.0.0",
         "bezier-js": "^6.1.4",
         "bingmaps-react": "^1.2.10",
@@ -171,6 +172,7 @@
         "csstype": "^3.1.3",
         "csv-parser": "^3.0.0",
         "csv-stringify": "^6.4.4",
+        "csvtojson": "^2.0.10",
         "D": "^1.0.0",
         "d3": "^7.8.5",
         "depcheck": "^1.4.7",
@@ -192,6 +194,7 @@
         "fluent-ffmpeg": "^2.1.2",
         "forever-agent": "^0.6.1",
         "fork-ts-checker-webpack-plugin": "^9.0.2",
+        "form-data": "^4.0.0",
         "formidable": "3.5.1",
         "function-plot": "^1.23.3",
         "golden-layout": "^2.6.0",
@@ -218,6 +221,7 @@
         "jszip": "^3.10.1",
         "lodash": "^4.17.21",
         "mapbox-gl": "^3.0.1",
+        "markdown-it": "^14.1.0",
         "mathquill": "^0.10.1-a",
         "md5-file": "^5.0.0",
         "memorystream": "^0.3.1",
@@ -267,6 +271,7 @@
         "react-grid-layout": "^1.4.4",
         "react-icons": "^5.0.1",
         "react-jsx-parser": "^1.29.0",
+        "react-latex-next": "^3.0.0",
         "react-loading": "^2.0.3",
         "react-map-gl": "^7.1.6",
         "react-markdown": "^9.0.1",
@@ -278,8 +283,10 @@
         "react-xarrows": "^2.0.2",
         "readline": "^1.3.0",
         "recharts": "^2.10.3",
+        "rehype-katex": "^7.0.0",
         "rehype-raw": "^7.0.0",
         "remark-gfm": "^4.0.0",
+        "remark-math": "^6.0.0",
         "request": "^2.88.2",
         "request-promise": "^4.2.6",
         "reveal.js": "^5.0.2",
diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index b4ad9c17d..0520dc375 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -20,6 +20,7 @@ export enum DocumentType {
     WEBCAM = 'webcam', // webcam
     CONFIG = 'config', // configuration document intended to specify a view layout configuration, but not be directly rendered (e.g., for saving the page# of a PDF, or view transform of a collection)
     SCRIPTING = 'script', // script editor
+    CHAT = 'chat', // chat with GPT about files
     EQUATION = 'equation', // equation editor
     FUNCPLOT = 'funcplot', // function plotter
     MAP = 'map',
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 24dd5cf37..ef1c709f0 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -180,6 +180,12 @@ export class DocumentOptions {
 
     date_range?: STRt = new StrInfo('date range for calendar', false);
 
+    chat?: STRt = new StrInfo('fields related to chatBox', false);
+    chat_history?: STRt = new StrInfo('chat history for chatbox', false);
+    chat_thread_id?: STRt = new StrInfo('thread id for chatbox', false);
+    chat_assistant_id?: STRt = new StrInfo('assistant id for chatbox', false);
+    chat_vector_store_id?: STRt = new StrInfo('assistant id for chatbox', false);
+
     wikiData?: STRt = new StrInfo('WikiData ID related to map location');
     description?: STRt = new StrInfo('description of document');
     _timecodeToShow?: NUMt = new NumInfo('media timecode when document should appear (e.g., when an annotation shows up as a video plays)', false);
@@ -735,6 +741,9 @@ export namespace Docs {
             return InstanceFromProto(Prototypes.get(DocumentType.SCRIPTING), script || undefined, { ...options, layout: fieldKey ? `<ScriptingBox {...props} fieldKey={'${fieldKey}'}/>` /* ScriptingBox.LayoutString(fieldKey) */ : undefined });
         }
 
+        export function ChatDocument(options?: DocumentOptions) {
+            return InstanceFromProto(Prototypes.get(DocumentType.CHAT), undefined, { ...(options || {}) });
+        }
         // eslint-disable-next-line default-param-last
         export function VideoDocument(url: string, options: DocumentOptions = {}, overwriteDoc?: Doc) {
             return InstanceFromProto(Prototypes.get(DocumentType.VID), new VideoField(url), options, undefined, undefined, undefined, overwriteDoc);
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ffc1304bf..09250d29d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -368,6 +368,7 @@ pie title Minerals in my tap water
             {key: "Button",     creator: Docs.Create.ButtonDocument,                        opts: { _width: 150, _height: 50, _xPadding: 10, _yPadding: 10, title_custom: true,  waitForDoubleClickToClick: 'never'}, scripts: {onClick: FollowLinkScript()?.script.originalScript ?? ""}},
             {key: "Script",     creator: opts => Docs.Create.ScriptingDocument(null, opts), opts: { _width: 200, _height: 250, }},
             {key: "DataViz",    creator: opts => Docs.Create.DataVizDocument("/users/rz/Downloads/addresses.csv", opts),   opts: { _width: 300, _height: 300 }},
+            {key: "Chat",       creator: Docs.Create.ChatDocument,          opts: { _width: 300, _height: 300, }},
             {key: "Header",     creator: headerTemplate,                                    opts: { _width: 300, _height: 120, _header_pointerEvents: "all", _header_height: 50, _header_fontSize: 9,_layout_autoHeightMargins: 50, _layout_autoHeight: true, treeView_HideUnrendered: true}},
             {key: "ViewSlide",  creator: slideView,                                         opts: { _width: 400, _height: 300, _xMargin: 3, _yMargin: 3,}},
             {key: "Trail",      creator: Docs.Create.PresDocument,                          opts: { _width: 400, _height: 30, _type_collection: CollectionViewType.Stacking, dropAction: dropActionType.embed, treeView_HideTitle: true, _layout_fitWidth:true, layout_boxShadow: "0 0" }},
@@ -397,6 +398,7 @@ pie title Minerals in my tap water
             { toolTip: "Tap or drag to create a comparison box",  title: "Compare", icon: "columns",    dragFactory: doc.emptyComparison as Doc, clickFactory: DocCast(doc.emptyComparison)},
             { toolTip: "Tap or drag to create an audio recorder", title: "Audio", icon: "microphone",   dragFactory: doc.emptyAudio as Doc,      clickFactory: DocCast(doc.emptyAudio),      openFactoryLocation: OpenWhere.overlay},
             { toolTip: "Tap or drag to create a map",             title: "Map", icon: "map-marker-alt", dragFactory: doc.emptyMap as Doc,        clickFactory: DocCast(doc.emptyMap)},
+            { toolTip: "Tap or drag to create a chat assistant",  title: "Assistant Chat", icon: "book",dragFactory: doc.emptyChat as Doc,       clickFactory: DocCast(doc.emptyChat)},
             { toolTip: "Tap or drag to create a screen grabber",  title: "Grab", icon: "photo-video",   dragFactory: doc.emptyScreengrab as Doc, clickFactory: DocCast(doc.emptyScreengrab), openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a WebCam recorder", title: "WebCam", icon: "photo-video", dragFactory: doc.emptyWebCam as Doc,     clickFactory: DocCast(doc.emptyWebCam),     openFactoryLocation: OpenWhere.overlay, funcs: { hidden: "IsNoviceMode()"}},
             { toolTip: "Tap or drag to create a button",          title: "Button", icon: "circle",      dragFactory: doc.emptyButton as Doc,     clickFactory: DocCast(doc.emptyButton)},
diff --git a/src/client/views/Main.tsx b/src/client/views/Main.tsx
index 8968acbbb..149de59b2 100644
--- a/src/client/views/Main.tsx
+++ b/src/client/views/Main.tsx
@@ -28,6 +28,7 @@ import { SchemaRowBox } from './collections/collectionSchema/SchemaRowBox';
 import './global/globalScripts';
 import { AudioBox } from './nodes/AudioBox';
 import { ComparisonBox } from './nodes/ComparisonBox';
+import { ChatBox } from './nodes/ChatBox/ChatBox';
 import { DataVizBox } from './nodes/DataVizBox/DataVizBox';
 import { DocumentContentsView, HTMLtag } from './nodes/DocumentContentsView';
 import { EquationBox } from './nodes/EquationBox';
@@ -136,6 +137,7 @@ FieldLoader.ServerLoadStatus = { requested: 0, retrieved: 0, message: 'cache' };
             MapBox,
             ScreenshotBox,
             DataVizBox,
+            ChatBox,
             HTMLtag,
             ComparisonBox,
             LoadingBox,
diff --git a/src/client/views/nodes/ChatBox/ChatBox.scss b/src/client/views/nodes/ChatBox/ChatBox.scss
new file mode 100644
index 000000000..f1ad3d074
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/ChatBox.scss
@@ -0,0 +1,228 @@
+$background-color: #f8f9fa;
+$text-color: #333;
+$input-background: #fff;
+$button-color: #007bff;
+$button-hover-color: darken($button-color, 10%);
+$shadow-color: rgba(0, 0, 0, 0.075);
+$border-radius: 8px;
+
+.chatBox {
+    display: flex;
+    flex-direction: column;
+    width: 100%; /* Adjust the width as needed, could be in percentage */
+    height: 100%; /* Adjust the height as needed, could be in percentage */
+    background-color: $background-color;
+    font-family: 'Helvetica Neue', Arial, sans-serif;
+    //margin: 20px auto;
+    //overflow: hidden;
+
+    .scroll-box {
+        flex-grow: 1;
+        overflow-y: scroll;
+        overflow-x: hidden;
+        height: 100%;
+        padding: 10px;
+        display: flex;
+        flex-direction: column-reverse;
+    
+        &::-webkit-scrollbar {
+          width: 8px;
+        }
+        &::-webkit-scrollbar-thumb {
+          background-color: darken($background-color, 10%);
+          border-radius: $border-radius;
+        }
+    
+
+        .chat-content {
+            display: flex;
+            flex-direction: column;
+        }
+
+        .messages {
+            display: flex;
+            flex-direction: column;
+            .message {
+                padding: 10px;
+                margin-bottom: 10px;
+                border-radius: $border-radius;
+                background-color: lighten($background-color, 5%);
+                box-shadow: 0 2px 5px $shadow-color;
+                //display: flex;
+                align-items: center;
+                max-width: 70%;
+                word-break: break-word;
+                .message-footer { // Assuming this is the container for the toggle button
+                    //max-width: 70%;
+                    
+            
+                    .toggle-logs-button {
+                        margin-top: 10px; // Padding on sides to align with the text above
+                        width: 95%;
+                        //display: block; // Ensures the button extends the full width of its container
+                        text-align: center; // Centers the text inside the button
+                        //padding: 8px 0; // Adequate padding for touch targets
+                        background-color: $button-color;
+                        color: #fff;
+                        border: none;
+                        border-radius: $border-radius;
+                        cursor: pointer;
+                        //transition: background-color 0.3s;
+                        //margin-top: 10px; // Adds space above the button
+                        box-shadow: 0 2px 4px $shadow-color; // Consistent shadow with other elements
+                        &:hover {
+                            background-color: $button-hover-color;
+                        }
+                    }
+                    .tool-logs {
+                        width: 100%;
+                        background-color: $input-background;
+                        color: $text-color;
+                        margin-top: 5px;
+                        //padding: 10px;
+                        //border-radius: $border-radius;
+                        //box-shadow: inset 0 2px 4px $shadow-color;
+                        //transition: opacity 1s ease-in-out;
+                        font-family: monospace;
+                        overflow-x: auto;
+                        max-height: 150px; // Ensuring it does not grow too large
+                        overflow-y: auto;
+                    }
+                    
+                }   
+                
+                .custom-link {
+                    color: lightblue;
+                    text-decoration: underline;
+                    cursor: pointer;
+                  }
+                &.user {
+                align-self: flex-end;
+                background-color: $button-color;
+                color: #fff;
+                }
+        
+                &.chatbot {
+                align-self: flex-start;
+                background-color: $input-background;
+                color: $text-color;
+                }
+        
+                span {
+                flex-grow: 1;
+                padding-right: 10px;
+                }
+        
+                img {
+                max-width: 50px;
+                max-height: 50px;
+                border-radius: 50%;
+                }
+            }
+        }
+        padding-bottom: 0;
+    }
+
+    .chat-form {
+        display: flex;
+        flex-grow: 1;
+        //height: 50px;
+        bottom: 0;
+        width: 100%;
+        padding: 10px;
+        background-color: $input-background;
+        box-shadow: inset 0 -1px 2px $shadow-color;
+        
+        input[type="text"] {
+            flex-grow: 1;
+            border: 1px solid darken($input-background, 10%);
+            border-radius: $border-radius;
+            padding: 8px 12px;
+            margin-right: 10px;
+        }
+
+        button {
+            padding: 8px 16px;
+      background-color: $button-color;
+      color: #fff;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: $button-hover-color;
+      }
+        }
+        margin-bottom: 0;
+    }
+}
+
+.initializing-overlay {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba($background-color, 0.95);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1.5em;
+    color: $text-color;
+    z-index: 10; // Ensure it's above all other content (may be better solution)
+
+    &::before {
+        content: 'Initializing...';
+        font-weight: bold;
+    }
+}
+
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background-color: rgba(0, 0, 0, 0.4);
+
+    .modal-content {
+        background-color: $input-background;
+        color: $text-color;
+        padding: 20px;
+        border-radius: $border-radius;
+        box-shadow: 0 2px 10px $shadow-color;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        width: auto;
+        min-width: 300px;
+
+        h4 {
+            margin-bottom: 15px;
+        }
+
+        p {
+            margin-bottom: 20px;
+        }
+
+        button {
+            padding: 10px 20px;
+            background-color: $button-color;
+            color: #fff;
+            border: none;
+            border-radius: $border-radius;
+            cursor: pointer;
+            margin: 5px;
+            transition: background-color 0.3s;
+
+            &:hover {
+                background-color: $button-hover-color;
+            }
+        }
+    }
+}
diff --git a/src/client/views/nodes/ChatBox/ChatBox.tsx b/src/client/views/nodes/ChatBox/ChatBox.tsx
new file mode 100644
index 000000000..880c332ac
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/ChatBox.tsx
@@ -0,0 +1,609 @@
+import { MathJaxContext } from 'better-react-mathjax';
+import { action, makeObservable, observable, observe, reaction, runInAction } from 'mobx';
+import { observer } from 'mobx-react';
+import OpenAI, { ClientOptions } from 'openai';
+import { ImageFile, Message } from 'openai/resources/beta/threads/messages';
+import { RunStep } from 'openai/resources/beta/threads/runs/steps';
+import * as React from 'react';
+import { Doc } from '../../../../fields/Doc';
+import { Id } from '../../../../fields/FieldSymbols';
+import { CsvCast, DocCast, PDFCast, StrCast } from '../../../../fields/Types';
+import { CsvField } from '../../../../fields/URLField';
+import { Networking } from '../../../Network';
+import { DocUtils } from '../../../documents/DocUtils';
+import { DocumentType } from '../../../documents/DocumentTypes';
+import { Docs } from '../../../documents/Documents';
+import { DocumentManager } from '../../../util/DocumentManager';
+import { LinkManager } from '../../../util/LinkManager';
+import { ViewBoxAnnotatableComponent } from '../../DocComponent';
+import { FieldView, FieldViewProps } from '../FieldView';
+import './ChatBox.scss';
+import MessageComponent from './MessageComponent';
+import { ANNOTATION_LINK_TYPE, ASSISTANT_ROLE, AssistantMessage, DOWNLOAD_TYPE } from './types';
+
+@observer
+export class ChatBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
+    @observable modalStatus = false;
+    @observable currentFile = { url: '' };
+    @observable history: AssistantMessage[] = [];
+    @observable.deep current_message: AssistantMessage | undefined = undefined;
+
+    @observable isLoading: boolean = false;
+    @observable isInitializing: boolean = true;
+    @observable expandedLogIndex: number | null = null;
+    @observable linked_docs_to_add: Doc[] = [];
+
+    private openai: OpenAI;
+    private interim_history: string = '';
+    private assistantID: string = '';
+    private threadID: string = '';
+    private _oldWheel: any;
+    private vectorStoreID: string = '';
+    private mathJaxConfig: any;
+    private linkedCsvIDs: string[] = [];
+
+    public static LayoutString(fieldKey: string) {
+        return FieldView.LayoutString(ChatBox, fieldKey);
+    }
+    constructor(props: FieldViewProps) {
+        super(props);
+        makeObservable(this);
+        this.openai = this.initializeOpenAI();
+        this.history = [];
+        this.threadID = StrCast(this.dataDoc.thread_id);
+        this.assistantID = StrCast(this.dataDoc.assistant_id);
+        this.vectorStoreID = StrCast(this.dataDoc.vector_store_id);
+        this.openai = this.initializeOpenAI();
+        if (this.assistantID === '' || this.threadID === '' || this.vectorStoreID === '') {
+            this.createAssistant();
+        } else {
+            this.retrieveCsvUrls();
+            this.isInitializing = false;
+        }
+        this.mathJaxConfig = {
+            loader: { load: ['input/asciimath'] },
+            tex: {
+                inlineMath: [
+                    ['$', '$'],
+                    ['\\(', '\\)'],
+                ],
+                displayMath: [
+                    ['$$', '$$'],
+                    ['[', ']'],
+                ],
+            },
+        };
+        reaction(
+            () => this.history.map((msg: AssistantMessage) => ({ role: msg.role, text: msg.text, image: msg.image, tool_logs: msg.tool_logs, links: msg.links })),
+            serializableHistory => {
+                this.dataDoc.data = JSON.stringify(serializableHistory);
+            }
+        );
+    }
+
+    toggleToolLogs = (index: number) => {
+        this.expandedLogIndex = this.expandedLogIndex === index ? null : index;
+    };
+
+    retrieveCsvUrls() {
+        const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
+            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+            .map(d => DocCast(d?.annotationOn, d))
+            .filter(d => d);
+
+        linkedDocs.forEach(doc => {
+            const aiFieldId = StrCast(doc[this.Document[Id] + '_ai_field_id']);
+            if (CsvCast(doc.data)) {
+                this.linkedCsvIDs.push(StrCast(aiFieldId));
+                console.log(this.linkedCsvIDs);
+            }
+        });
+    }
+
+    initializeOpenAI() {
+        const configuration: ClientOptions = {
+            apiKey: process.env.OPENAI_KEY,
+            dangerouslyAllowBrowser: true,
+        };
+        return new OpenAI(configuration);
+    }
+
+    onPassiveWheel = (e: WheelEvent) => {
+        if (this._props.isContentActive()) {
+            e.stopPropagation();
+        }
+    };
+
+    createLink = (linkInfo: string, startIndex: number, endIndex: number, linkType: ANNOTATION_LINK_TYPE, annotationIndex: number = 0) => {
+        const text = this.interim_history;
+        const subString = this.current_message?.text.substring(startIndex, endIndex) ?? '';
+        if (!text) return;
+        const textToDisplay = `${annotationIndex}`;
+        let fileInfo = linkInfo;
+        const fileName = subString.split('/')[subString.split('/').length - 1];
+        if (linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE) {
+            fileInfo = linkInfo + '!!!' + fileName;
+        }
+
+        const formattedLink = `[${textToDisplay}](${fileInfo}~~~${linkType})`;
+        console.log(formattedLink);
+        const newText = text.replace(subString, formattedLink);
+        runInAction(() => {
+            this.interim_history = newText;
+            console.log(newText);
+            this.current_message?.links?.push({
+                start: startIndex,
+                end: endIndex,
+                url: linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE ? fileName : linkInfo,
+                id: linkType === ANNOTATION_LINK_TYPE.DOWNLOAD_FILE ? linkInfo : undefined,
+                link_type: linkType,
+            });
+        });
+    };
+
+    @action
+    createAssistant = async () => {
+        this.isInitializing = true;
+        try {
+            const vectorStore = await this.openai.beta.vectorStores.create({
+                name: 'Vector Store for Assistant',
+            });
+            const assistant = await this.openai.beta.assistants.create({
+                name: 'Document Analyser Assistant',
+                instructions: `
+                You will analyse documents with which you are provided. You will answer questions and provide insights based on the information in the documents.
+                For writing math formulas:
+                You have a MathJax render environment.
+                - Write all in-line equations within a single dollar sign, $, to render them as TeX (this means any time you want to use a dollar sign to represent a dollar sign itself, you must escape it with a backslash: "$");
+                - Use a double dollar sign, $$, to render equations on a new line;
+                Example: $$x^2 + 3x$$ is output for "x² + 3x" to appear as TeX.`,
+                model: 'gpt-4-turbo',
+                tools: [{ type: 'file_search' }, { type: 'code_interpreter' }],
+                tool_resources: {
+                    file_search: {
+                        vector_store_ids: [vectorStore.id],
+                    },
+                    code_interpreter: {
+                        file_ids: this.linkedCsvIDs,
+                    },
+                },
+            });
+            const thread = await this.openai.beta.threads.create();
+
+            runInAction(() => {
+                this.dataDoc.assistant_id = assistant.id;
+                this.dataDoc.thread_id = thread.id;
+                this.dataDoc.vector_store_id = vectorStore.id;
+                this.assistantID = assistant.id;
+                this.threadID = thread.id;
+                this.vectorStoreID = vectorStore.id;
+                this.isInitializing = false;
+            });
+        } catch (error) {
+            console.error('Initialization failed:', error);
+            this.isInitializing = false;
+        }
+    };
+
+    @action
+    runAssistant = async (inputText: string) => {
+        // Ensure an assistant and thread are created
+        if (!this.assistantID || !this.threadID || !this.vectorStoreID) {
+            await this.createAssistant();
+            console.log('Assistant and thread created:', this.assistantID, this.threadID);
+        }
+        let currentText: string = '';
+        let currentToolCallMessage: string = '';
+
+        // Send the user's input to the assistant
+        await this.openai.beta.threads.messages.create(this.threadID, {
+            role: 'user',
+            content: inputText,
+        });
+
+        // Listen to the streaming responses
+        const stream = this.openai.beta.threads.runs
+            .stream(this.threadID, {
+                assistant_id: this.assistantID,
+            })
+            .on('runStepCreated', (runStep: RunStep) => {
+                currentText = '';
+                runInAction(() => {
+                    this.current_message = { role: ASSISTANT_ROLE.ASSISTANT, text: currentText, tool_logs: '', links: [] };
+                });
+                this.isLoading = true;
+            })
+            .on('toolCallDelta', (toolCallDelta, snapshot) => {
+                this.isLoading = false;
+                if (toolCallDelta.type === 'code_interpreter') {
+                    if (toolCallDelta.code_interpreter?.input) {
+                        currentToolCallMessage += toolCallDelta.code_interpreter.input;
+                        runInAction(() => {
+                            if (this.current_message) {
+                                this.current_message.tool_logs = currentToolCallMessage;
+                            }
+                        });
+                    }
+                    if (toolCallDelta.code_interpreter?.outputs) {
+                        currentToolCallMessage += '\n Code interpreter output:';
+                        toolCallDelta.code_interpreter.outputs.forEach(output => {
+                            if (output.type === 'logs') {
+                                runInAction(() => {
+                                    if (this.current_message) {
+                                        this.current_message.tool_logs += '\n|' + output.logs;
+                                    }
+                                });
+                            }
+                        });
+                    }
+                }
+            })
+            .on('textDelta', (textDelta, snapshot) => {
+                this.isLoading = false;
+                currentText += textDelta.value;
+                runInAction(() => {
+                    if (this.current_message) {
+                        // this.current_message = {...this.current_message, text: current_text};
+                        this.current_message.text = currentText;
+                    }
+                });
+            })
+            .on('messageDone', async event => {
+                console.log(event);
+                const textItem = event.content.find(item => item.type === 'text');
+                if (textItem && textItem.type === 'text') {
+                    const { text } = textItem;
+                    console.log(text.value);
+                    try {
+                        runInAction(() => {
+                            this.interim_history = text.value;
+                        });
+                    } catch (e) {
+                        console.error('Error parsing JSON response:', e);
+                    }
+
+                    const { annotations } = text;
+                    console.log('Annotations: ' + annotations);
+                    let index = 0;
+                    annotations.forEach(async annotation => {
+                        console.log(' ' + annotation);
+                        console.log(' ' + annotation.text);
+                        if (annotation.type === 'file_path') {
+                            const { file_path: filePath } = annotation;
+                            const fileToDownload = filePath.file_id;
+                            console.log(fileToDownload);
+                            if (filePath) {
+                                console.log(filePath);
+                                console.log(fileToDownload);
+                                this.createLink(fileToDownload, annotation.start_index, annotation.end_index, ANNOTATION_LINK_TYPE.DOWNLOAD_FILE);
+                            }
+                        } else {
+                            const { file_citation: fileCitation } = annotation;
+                            if (fileCitation) {
+                                const citedFile = await this.openai.files.retrieve(fileCitation.file_id);
+                                const citationUrl = citedFile.filename;
+                                this.createLink(citationUrl, annotation.start_index, annotation.end_index, ANNOTATION_LINK_TYPE.DASH_DOC, index);
+                                index++;
+                            }
+                        }
+                    });
+                    runInAction(() => {
+                        if (this.current_message) {
+                            console.log('current message: ' + this.current_message.text);
+                            this.current_message.text = this.interim_history;
+                            this.history.push({ ...this.current_message });
+                            this.current_message = undefined;
+                        }
+                    });
+                }
+            })
+            .on('toolCallDone', toolCall => {
+                runInAction(() => {
+                    if (this.current_message && currentToolCallMessage) {
+                        this.current_message.tool_logs = currentToolCallMessage;
+                    }
+                });
+            })
+            .on('imageFileDone', (content: ImageFile, snapshot: Message) => {
+                console.log('Image file done:', content);
+            })
+            .on('end', () => {
+                console.log('Streaming done');
+            });
+    };
+
+    @action
+    goToLinkedDoc = async (link: string) => {
+        const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
+            .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+            .map(d => DocCast(d?.annotationOn, d))
+            .filter(d => d);
+
+        const linkedDoc = linkedDocs.find(doc => {
+            const docUrl = CsvCast(doc.data, PDFCast(doc.data)).url.pathname.replace('/files/pdfs/', '').replace('/files/csvs/', '');
+            console.log('URL: ' + docUrl + ' Citation URL: ' + link);
+            return link === docUrl;
+        });
+
+        if (linkedDoc) {
+            await DocumentManager.Instance.showDocument(DocCast(linkedDoc), { willZoomCentered: true }, () => {});
+        }
+    };
+
+    @action
+    askGPT = async (event: React.FormEvent<HTMLFormElement>): Promise<void> => {
+        event.preventDefault();
+
+        const textInput = event.currentTarget.elements.namedItem('messageInput') as HTMLInputElement;
+        const trimmedText = textInput.value.trim();
+
+        if (!this.assistantID || !this.threadID) {
+            try {
+                await this.createAssistant();
+            } catch (err) {
+                console.error('Error:', err);
+            }
+        }
+
+        if (trimmedText) {
+            try {
+                textInput.value = '';
+                runInAction(() => {
+                    this.history.push({ role: ASSISTANT_ROLE.USER, text: trimmedText });
+                });
+                await this.runAssistant(trimmedText);
+                this.dataDoc.data = this.history.toString();
+            } catch (err) {
+                console.error('Error:', err);
+            }
+        }
+    };
+
+    @action
+    uploadLinks = async (linkedDocs: Doc[]) => {
+        if (this.isInitializing) {
+            console.log('Initialization in progress, upload aborted.');
+            return;
+        }
+        const urls = linkedDocs.map(doc => CsvCast(doc.data, PDFCast(doc.data)).url.pathname);
+        const csvUrls = urls.filter(url => url.endsWith('.csv'));
+        console.log(this.assistantID, this.threadID, urls);
+
+        const { openai_file_ids: openaiFileIds } = await Networking.PostToServer('/uploadPDFToVectorStore', { urls, threadID: this.threadID, assistantID: this.assistantID, vector_store_id: this.vectorStoreID });
+
+        linkedDocs.forEach((doc, i) => {
+            doc[this.Document[Id] + '_ai_field_id'] = openaiFileIds[i];
+            console.log('AI Field ID: ' + openaiFileIds[i]);
+        });
+
+        if (csvUrls.length > 0) {
+            for (let i = 0; i < csvUrls.length; i++) {
+                this.linkedCsvIDs.push(openaiFileIds[urls.indexOf(csvUrls[i])]);
+            }
+            console.log('linked csvs:' + this.linkedCsvIDs);
+            await this.openai.beta.assistants.update(this.assistantID, {
+                tools: [{ type: 'file_search' }, { type: 'code_interpreter' }],
+                tool_resources: {
+                    file_search: {
+                        vector_store_ids: [this.vectorStoreID],
+                    },
+                    code_interpreter: {
+                        file_ids: this.linkedCsvIDs,
+                    },
+                },
+            });
+        }
+    };
+
+    downloadToComputer = (url: string, fileName: string) => {
+        fetch(url, { method: 'get', mode: 'no-cors', referrerPolicy: 'no-referrer' })
+            .then(res => res.blob())
+            .then(res => {
+                const aElement = document.createElement('a');
+                aElement.setAttribute('download', fileName);
+                const href = URL.createObjectURL(res);
+                aElement.href = href;
+                aElement.setAttribute('target', '_blank');
+                aElement.click();
+                URL.revokeObjectURL(href);
+            });
+    };
+
+    createDocumentInDash = async (url: string) => {
+        const fileSuffix = url.substring(url.lastIndexOf('.') + 1);
+        console.log(fileSuffix);
+        let doc: Doc | null = null;
+        switch (fileSuffix) {
+            case 'pdf':
+                doc = DocCast(await DocUtils.DocumentFromType('pdf', url, {}));
+                break;
+            case 'csv':
+                doc = DocCast(await DocUtils.DocumentFromType('csv', url, {}));
+                break;
+            case 'png':
+            case 'jpg':
+            case 'jpeg':
+                doc = DocCast(await DocUtils.DocumentFromType('image', url, {}));
+                break;
+            default:
+                console.error('Unsupported file type:', fileSuffix);
+                break;
+        }
+        if (doc) {
+            doc && this._props.addDocument?.(doc);
+            await DocumentManager.Instance.showDocument(doc, { willZoomCentered: true }, () => {});
+        }
+    };
+
+    downloadFile = async (fileInfo: string, downloadType: DOWNLOAD_TYPE) => {
+        try {
+            console.log(fileInfo);
+            const [fileId, fileName] = fileInfo.split(/!!!/);
+            const { file_path: filePath } = await Networking.PostToServer('/downloadFileFromOpenAI', { file_id: fileId, file_name: fileName });
+            const fileLink = CsvCast(new CsvField(filePath)).url.href;
+            if (downloadType === DOWNLOAD_TYPE.DASH) {
+                this.createDocumentInDash(fileLink);
+            } else {
+                this.downloadToComputer(fileLink, fileName);
+            }
+        } catch (error) {
+            console.error('Error downloading file:', error);
+        }
+    };
+
+    handleDownloadToDevice = () => {
+        this.downloadFile(this.currentFile.url, DOWNLOAD_TYPE.DEVICE);
+        this.modalStatus = false; // Close the modal after the action
+        this.currentFile = { url: '' }; // Reset the current file
+    };
+
+    handleAddToDash = () => {
+        // Assuming `downloadFile` is a method that handles adding to Dash
+        this.downloadFile(this.currentFile.url, DOWNLOAD_TYPE.DASH);
+        this.modalStatus = false; // Close the modal after the action
+        this.currentFile = { url: '' }; // Reset the current file
+    };
+
+    renderModal = () => {
+        if (!this.modalStatus) return null;
+
+        return (
+            <div className="modal">
+                <div className="modal-content">
+                    <h4>File Actions</h4>
+                    <p>Choose an action for the file:</p>
+                    <button type="button" onClick={this.handleDownloadToDevice}>
+                        Download to Device
+                    </button>
+                    <button type="button" onClick={this.handleAddToDash}>
+                        Add to Dash
+                    </button>
+                    <button
+                        type="button"
+                        onClick={() => {
+                            this.modalStatus = false;
+                        }}>
+                        Cancel
+                    </button>
+                </div>
+            </div>
+        );
+    };
+    @action
+    showModal = () => {
+        this.modalStatus = true;
+    };
+
+    @action
+    setCurrentFile = (file: { url: string }) => {
+        this.currentFile = file;
+    };
+
+    componentDidMount() {
+        this._props.setContentViewBox?.(this);
+        if (this.dataDoc.data) {
+            try {
+                const storedHistory = JSON.parse(StrCast(this.dataDoc.data));
+                runInAction(() => {
+                    this.history = storedHistory.map((msg: AssistantMessage) => ({
+                        role: msg.role,
+                        text: msg.text,
+                        quote: msg.quote,
+                        tool_logs: msg.tool_logs,
+                        image: msg.image,
+                    }));
+                });
+            } catch (e) {
+                console.error('Failed to parse history from dataDoc:', e);
+            }
+        }
+        reaction(
+            () => {
+                const linkedDocs = LinkManager.Instance.getAllRelatedLinks(this.Document)
+                    .map(d => DocCast(LinkManager.getOppositeAnchor(d, this.Document)))
+                    .map(d => DocCast(d?.annotationOn, d))
+                    .filter(d => d);
+                return linkedDocs;
+            },
+
+            linked => this.linked_docs_to_add.push(...linked.filter(linkedDoc => !this.linked_docs_to_add.includes(linkedDoc)))
+        );
+
+        observe(
+            // right now this skips during initialization which is necessary because it would be blank
+            // However, it will upload the same link twice when it is
+            this.linked_docs_to_add,
+            change => {
+                // observe pushes/splices on a user link DB 'data' field (should only happen for local changes)
+                switch (change.type as any) {
+                    case 'splice':
+                        if ((change as any).addedCount > 0) {
+                            // maybe check here if its already in the urls datadoc array so doesn't add twice
+                            console.log((change as any).added as Doc[]);
+                            this.uploadLinks((change as any).added as Doc[]);
+                        }
+                        // (change as any).removed.forEach((link: any) => remLinkFromDoc(toRealField(link)));
+                        break;
+                    case 'update': // let oldValue = change.oldValue;
+                    default:
+                }
+            },
+            true
+        );
+    }
+
+    render() {
+        return (
+            <MathJaxContext config={this.mathJaxConfig}>
+                <div className="chatBox">
+                    {this.isInitializing && <div className="initializing-overlay">Initializing...</div>}
+                    {this.renderModal()}
+                    <div
+                        className="scroll-box chat-content"
+                        ref={r => {
+                            this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
+                            this._oldWheel = r;
+                            r?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
+                        }}>
+                        <div className="messages">
+                            {this.history.map((message, index) => (
+                                <MessageComponent
+                                    key={index}
+                                    message={message}
+                                    toggleToolLogs={this.toggleToolLogs}
+                                    expandedLogIndex={this.expandedLogIndex}
+                                    index={index}
+                                    showModal={this.showModal}
+                                    goToLinkedDoc={this.goToLinkedDoc}
+                                    setCurrentFile={this.setCurrentFile}
+                                />
+                            ))}
+                            {!this.current_message ? null : (
+                                <MessageComponent
+                                    key={this.history.length}
+                                    message={this.current_message}
+                                    toggleToolLogs={this.toggleToolLogs}
+                                    expandedLogIndex={this.expandedLogIndex}
+                                    index={this.history.length}
+                                    showModal={this.showModal}
+                                    goToLinkedDoc={this.goToLinkedDoc}
+                                    setCurrentFile={this.setCurrentFile}
+                                    isCurrent
+                                />
+                            )}
+                        </div>
+                    </div>
+                    <form onSubmit={this.askGPT} className="chat-form">
+                        <input type="text" name="messageInput" autoComplete="off" placeholder="Type a message..." />
+                        <button type="submit">Send</button>
+                    </form>
+                </div>
+            </MathJaxContext>
+        );
+    }
+}
+
+Docs.Prototypes.TemplateMap.set(DocumentType.CHAT, {
+    layout: { view: ChatBox, dataField: 'data' },
+    options: { acl: '', chat: '', chat_history: '', chat_thread_id: '', chat_assistant_id: '', chat_vector_store_id: '' },
+});
diff --git a/src/client/views/nodes/ChatBox/MessageComponent.tsx b/src/client/views/nodes/ChatBox/MessageComponent.tsx
new file mode 100644
index 000000000..fced0b4d5
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/MessageComponent.tsx
@@ -0,0 +1,116 @@
+/* eslint-disable react/require-default-props */
+import React from 'react';
+import { observer } from 'mobx-react';
+import { MathJax, MathJaxContext } from 'better-react-mathjax';
+import ReactMarkdown from 'react-markdown';
+import { TbCircle0Filled, TbCircle1Filled, TbCircle2Filled, TbCircle3Filled, TbCircle4Filled, TbCircle5Filled, TbCircle6Filled, TbCircle7Filled, TbCircle8Filled, TbCircle9Filled } from 'react-icons/tb';
+import { AssistantMessage } from './types';
+
+interface MessageComponentProps {
+    message: AssistantMessage;
+    toggleToolLogs: (index: number) => void;
+    expandedLogIndex: number | null;
+    index: number;
+    showModal: () => void;
+    goToLinkedDoc: (url: string) => void;
+    setCurrentFile: (file: { url: string }) => void;
+    isCurrent?: boolean;
+}
+
+const MessageComponent: React.FC<MessageComponentProps> = function ({ message, toggleToolLogs, expandedLogIndex, goToLinkedDoc, index, showModal, setCurrentFile, isCurrent = false }) {
+    // const messageClass = `${message.role} ${isCurrent ? 'current-message' : ''}`;
+
+    const LinkRenderer = ({ href, children }: { href: string; children: React.ReactNode }) => {
+        // console.log(href + " " + children)
+        const regex = /([a-zA-Z0-9_.!-]+)~~~(citation|file_path)/;
+        const matches = href.match(regex);
+        // console.log(href)
+        // console.log(matches)
+        const url = matches ? matches[1] : href;
+        const linkType = matches ? matches[2] : null;
+        if (linkType === 'citation') {
+            switch (children) {
+                case '0':
+                    children = <TbCircle0Filled />;
+                    break;
+                case '1':
+                    children = <TbCircle1Filled />;
+                    break;
+                case '2':
+                    children = <TbCircle2Filled />;
+                    break;
+                case '3':
+                    children = <TbCircle3Filled />;
+                    break;
+                case '4':
+                    children = <TbCircle4Filled />;
+                    break;
+                case '5':
+                    children = <TbCircle5Filled />;
+                    break;
+                case '6':
+                    children = <TbCircle6Filled />;
+                    break;
+                case '7':
+                    children = <TbCircle7Filled />;
+                    break;
+                case '8':
+                    children = <TbCircle8Filled />;
+                    break;
+                case '9':
+                    children = <TbCircle9Filled />;
+                    break;
+                default:
+                    break;
+            }
+        }
+        // console.log(linkType)
+        const style = {
+            color: 'lightblue',
+            verticalAlign: linkType === 'citation' ? 'super' : 'baseline',
+            fontSize: linkType === 'citation' ? 'smaller' : 'inherit',
+        };
+
+        return (
+            <a
+                href="#"
+                onClick={e => {
+                    e.preventDefault();
+                    if (linkType === 'citation') {
+                        goToLinkedDoc(url);
+                    } else if (linkType === 'file_path') {
+                        showModal();
+                        setCurrentFile({ url });
+                    }
+                }}
+                style={style}>
+                {children}
+            </a>
+        );
+    };
+
+    return (
+        <div className={`message ${message.role}`}>
+            <MathJaxContext>
+                <MathJax dynamic hideUntilTypeset="every">
+                    <ReactMarkdown components={{ a: LinkRenderer }}>{message.text ? message.text : ''}</ReactMarkdown>
+                </MathJax>
+            </MathJaxContext>
+            {message.image && <img src={message.image} alt="" />}
+            <div className="message-footer">
+                {message.tool_logs && (
+                    <button className="toggle-logs-button" onClick={() => toggleToolLogs(index)}>
+                        {expandedLogIndex === index ? 'Hide Code Interpreter Logs' : 'Show Code Interpreter Logs'}
+                    </button>
+                )}
+                {expandedLogIndex === index && (
+                    <div className="tool-logs">
+                        <pre>{message.tool_logs}</pre>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default observer(MessageComponent);
diff --git a/src/client/views/nodes/ChatBox/types.ts b/src/client/views/nodes/ChatBox/types.ts
new file mode 100644
index 000000000..8212a7050
--- /dev/null
+++ b/src/client/views/nodes/ChatBox/types.ts
@@ -0,0 +1,23 @@
+export enum ASSISTANT_ROLE {
+    USER = 'User',
+    ASSISTANT = 'Assistant',
+}
+
+export enum ANNOTATION_LINK_TYPE {
+    DASH_DOC = 'citation',
+    DOWNLOAD_FILE = 'file_path',
+}
+
+export enum DOWNLOAD_TYPE {
+    DASH = 'dash',
+    DEVICE = 'device',
+}
+
+export interface AssistantMessage {
+    role: ASSISTANT_ROLE;
+    text: string;
+    quote?: string;
+    image?: string;
+    tool_logs?: string;
+    links?: { start: number; end: number; url: string; id?: string; link_type: ANNOTATION_LINK_TYPE }[];
+}
diff --git a/src/client/views/nodes/DocumentContentsView.tsx b/src/client/views/nodes/DocumentContentsView.tsx
index 18529a429..192c7875e 100644
--- a/src/client/views/nodes/DocumentContentsView.tsx
+++ b/src/client/views/nodes/DocumentContentsView.tsx
@@ -79,7 +79,7 @@ export class DocumentContentsView extends ObservableReactComponent<DocumentConte
      * Set of all available rendering componets for Docs (e.g., ImageBox, CollectionFreeFormView, etc)
      */
     private static Components: { [key: string]: any };
-    public static Init(defaultLayoutString: string, components:{ [key: string]: any}) {
+    public static Init(defaultLayoutString: string, components: { [key: string]: any }) {
         DocumentContentsView.DefaultLayoutString = defaultLayoutString;
         DocumentContentsView.Components = components;
     }
diff --git a/src/fields/Types.ts b/src/fields/Types.ts
index 26196d15d..ef79f72e4 100644
--- a/src/fields/Types.ts
+++ b/src/fields/Types.ts
@@ -5,7 +5,7 @@ import { ProxyField } from './Proxy';
 import { RefField } from './RefField';
 import { RichTextField } from './RichTextField';
 import { ScriptField } from './ScriptField';
-import { CsvField, ImageField, WebField } from './URLField';
+import { CsvField, ImageField, PdfField, WebField } from './URLField';
 
 // eslint-disable-next-line no-use-before-define
 export type ToConstructor<T extends FieldType> = T extends string ? 'string' : T extends number ? 'number' : T extends boolean ? 'boolean' : T extends List<infer U> ? ListSpec<U> : new (...args: any[]) => T;
@@ -122,6 +122,9 @@ export function CsvCast(field: FieldResult, defaultVal: CsvField | null = null)
 export function WebCast(field: FieldResult, defaultVal: WebField | null = null) {
     return Cast(field, WebField, defaultVal);
 }
+export function PDFCast(field: FieldResult, defaultVal: PdfField | null = null) {
+    return Cast(field, PdfField, defaultVal);
+}
 export function ImageCast(field: FieldResult, defaultVal: ImageField | null = null) {
     return Cast(field, ImageField, defaultVal);
 }
diff --git a/src/server/ApiManagers/AssistantManager.ts b/src/server/ApiManagers/AssistantManager.ts
new file mode 100644
index 000000000..82e48167a
--- /dev/null
+++ b/src/server/ApiManagers/AssistantManager.ts
@@ -0,0 +1,131 @@
+import * as fs from 'fs';
+import { createReadStream, writeFile } from 'fs';
+import OpenAI from 'openai';
+import * as path from 'path';
+import { promisify } from 'util';
+import * as uuid from 'uuid';
+import { filesDirectory, publicDirectory } from '..';
+import { Method } from '../RouteManager';
+import ApiManager, { Registration } from './ApiManager';
+
+export enum Directory {
+    parsed_files = 'parsed_files',
+    images = 'images',
+    videos = 'videos',
+    pdfs = 'pdfs',
+    text = 'text',
+    pdf_thumbnails = 'pdf_thumbnails',
+    audio = 'audio',
+    csv = 'csv',
+}
+
+export function serverPathToFile(directory: Directory, filename: string) {
+    return path.normalize(`${filesDirectory}/${directory}/${filename}`);
+}
+
+export function pathToDirectory(directory: Directory) {
+    return path.normalize(`${filesDirectory}/${directory}`);
+}
+
+export function clientPathToFile(directory: Directory, filename: string) {
+    return `/files/${directory}/${filename}`;
+}
+
+const writeFileAsync = promisify(writeFile);
+const readFileAsync = promisify(fs.readFile);
+
+export default class AssistantManager extends ApiManager {
+    protected initialize(register: Registration): void {
+        const openai = new OpenAI({ apiKey: process.env.OPENAI_KEY, dangerouslyAllowBrowser: true });
+
+        register({
+            method: Method.POST,
+            subscription: '/uploadPDFToVectorStore',
+            secureHandler: async ({ req, res }) => {
+                const { urls, threadID, assistantID, vector_store_id } = req.body;
+
+                const csvFilesIds: string[] = [];
+                const otherFileIds: string[] = [];
+                const allFileIds: string[] = [];
+
+                const fileProcesses = urls.map(async (source: string) => {
+                    const fullPath = path.join(publicDirectory, source);
+                    const fileData = await openai.files.create({ file: createReadStream(fullPath), purpose: 'assistants' });
+                    allFileIds.push(fileData.id);
+                    if (source.endsWith('.csv')) {
+                        console.log(source);
+                        csvFilesIds.push(fileData.id);
+                    } else {
+                        openai.beta.vectorStores.files.create(vector_store_id, { file_id: fileData.id });
+                        otherFileIds.push(fileData.id);
+                    }
+                });
+                try {
+                    await Promise.all(fileProcesses).then(() => {
+                        res.send({ vector_store_id: vector_store_id, openai_file_ids: allFileIds });
+                    });
+                } catch (error) {
+                    res.status(500).send({ error: 'Failed to process files' + error });
+                }
+            },
+        });
+
+        register({
+            method: Method.POST,
+            subscription: '/downloadFileFromOpenAI',
+            secureHandler: async ({ req, res }) => {
+                const { file_id, file_name } = req.body;
+                //let files_directory: string;
+                let files_directory = '/files/openAIFiles/';
+                switch (file_name.split('.').pop()) {
+                    case 'pdf':
+                        files_directory = '/files/pdfs/';
+                        break;
+                    case 'csv':
+                        files_directory = '/files/csv/';
+                        break;
+                    case 'png':
+                    case 'jpg':
+                    case 'jpeg':
+                        files_directory = '/files/images/';
+                        break;
+                    default:
+                        break;
+                }
+
+                const directory = path.join(publicDirectory, files_directory);
+
+                if (!fs.existsSync(directory)) {
+                    fs.mkdirSync(directory);
+                }
+                const file = await openai.files.content(file_id);
+                const new_file_name = `${uuid.v4()}-${file_name}`;
+                const file_path = path.join(directory, new_file_name);
+                const file_array_buffer = await file.arrayBuffer();
+                const bufferView = new Uint8Array(file_array_buffer);
+                try {
+                    const written_file = await writeFileAsync(file_path, bufferView);
+                    console.log(written_file);
+                    console.log(file_path);
+                    console.log(file_array_buffer);
+                    console.log(bufferView);
+                    const file_object = new File([bufferView], file_name);
+                    //DashUploadUtils.upload(file_object, 'openAIFiles');
+                    res.send({ file_path: path.join(files_directory, new_file_name) });
+                    /* res.send( {
+                        source: "file",
+                        result: {
+                                  accessPaths: {
+                                      agnostic: {client: path.join('/files/openAIFiles/', `${uuid.v4()}-${file_name}`)}
+                                  },
+                                  rawText: "",
+                                  duration: 0,
+                              },
+                    } ); */
+                } catch (error) {
+                    res.status(500).send({ error: 'Failed to write file' + error });
+                }
+            },
+        });
+    }
+}
diff --git a/src/server/index.ts b/src/server/index.ts
index 1bbf8a105..3151c2975 100644
--- a/src/server/index.ts
+++ b/src/server/index.ts
@@ -3,7 +3,7 @@ import * as dotenv from 'dotenv';
 import * as mobileDetect from 'mobile-detect';
 import * as path from 'path';
 import { logExecution } from './ActionUtilities';
-import { AdminPrivileges, resolvedPorts } from './SocketData';
+import AssistantManager from './ApiManagers/AssistantManager';
 import DataVizManager from './ApiManagers/DataVizManager';
 import DeleteManager from './ApiManagers/DeleteManager';
 import DownloadManager from './ApiManagers/DownloadManager';
@@ -13,16 +13,17 @@ import SessionManager from './ApiManagers/SessionManager';
 import UploadManager from './ApiManagers/UploadManager';
 import UserManager from './ApiManagers/UserManager';
 import UtilManager from './ApiManagers/UtilManager';
-import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
-import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils';
 import { DashSessionAgent } from './DashSession/DashSessionAgent';
 import { AppliedSessionAgent } from './DashSession/Session/agents/applied_session_agent';
 import { DashStats } from './DashStats';
 import { DashUploadUtils } from './DashUploadUtils';
-import { Database } from './database';
 import { Logger } from './ProcessFactory';
 import RouteManager, { Method, PublicHandler } from './RouteManager';
 import RouteSubscriber from './RouteSubscriber';
+import { AdminPrivileges, resolvedPorts } from './SocketData';
+import { GoogleCredentialsLoader, SSL } from './apis/google/CredentialsLoader';
+import { GoogleApiServerUtils } from './apis/google/GoogleApiServerUtils';
+import { Database } from './database';
 import initializeServer from './server_Initialization';
 // import GooglePhotosManager from './ApiManagers/GooglePhotosManager';
 
@@ -72,6 +73,7 @@ function routeSetter({ addSupervisedRoute, logRegistrationOutcome }: RouteManage
         new UtilManager(),
         new GeneralGoogleManager(),
         /* new GooglePhotosManager(), */ new DataVizManager(),
+        new AssistantManager(),
     ];
 
     // initialize API Managers
-- 
cgit v1.2.3-70-g09d2


From 5ff0bef5d3c4825aa7210a26c98aae3b24f4a835 Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Fri, 17 May 2024 13:18:40 -0400
Subject: chatcards, quizcards, and ai flashcards

---
 src/client/apis/gpt/GPT.ts                         |  36 ++++--
 src/client/util/CurrentUserUtils.ts                |   2 -
 .../views/collections/CollectionCarouselView.tsx   |  79 ++++++++++--
 src/client/views/collections/CollectionView.tsx    |  15 ++-
 src/client/views/nodes/ComparisonBox.scss          | 143 +++++++++++++++++++++
 src/client/views/nodes/ComparisonBox.tsx           | 109 +++++++++++-----
 src/client/views/nodes/DocumentView.tsx            |  24 +++-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   5 +-
 src/client/views/pdf/AnchorMenu.tsx                |  27 ++--
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         |  45 -------
 src/client/views/pdf/PDFViewer.tsx                 |   4 +-
 11 files changed, 367 insertions(+), 122 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 2757fc830..6600ddab2 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -1,10 +1,13 @@
 import { ClientOptions, OpenAI } from 'openai';
+import { ChatCompletionMessageParam } from 'openai/resources';
 
 enum GPTCallType {
     SUMMARY = 'summary',
     COMPLETION = 'completion',
     EDIT = 'edit',
+    CHATCARD = 'chatcard',
     FLASHCARD = 'flashcard',
+    QUIZ = 'quiz',
 }
 
 type GPTCallOpts = {
@@ -15,10 +18,17 @@ type GPTCallOpts = {
 };
 
 const callTypeMap: { [type: string]: GPTCallOpts } = {
-    summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
-    edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
-    flashcard: { model: 'gpt-3.5-turbo-instruct', maxTokens: 512, temp: 0.5, prompt: 'Make flashcards out of this text with questions and answers: ' },
-    completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' },
+    summary: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
+    edit: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
+    flashcard: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Make flashcards out of this text with each question and answer labeled. Do not label each flashcard and do not include asterisks: ' },
+    completion: { model: 'gpt-4-turbo', maxTokens: 256, temp: 0.5, prompt: '' },
+    chatcard: { model: 'gpt-4-turbo', maxTokens: 512, temp: 0.5, prompt: 'Answer the following question as a short flashcard response. Do not include a label.' },
+    quiz: {
+        model: 'gpt-4-turbo',
+        maxTokens: 1024,
+        temp: 0,
+        prompt: 'List unique differences between the content of the UserAnswer and Rubric. Before each difference, label it and provide any additional information the UserAnswer missed and explain it in second person without separating it into UserAnswer and Rubric content and additional information. If there are no differences, say correct',
+    },
 };
 
 /**
@@ -28,7 +38,8 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
  * @returns AI Output
  */
 const gptAPICall = async (inputText: string, callType: GPTCallType) => {
-    if (callType === GPTCallType.SUMMARY || callType == GPTCallType.FLASHCARD) inputText += '.';
+    if (!inputText) return 'Please provide a response.';
+    if (callType === GPTCallType.SUMMARY || callType == GPTCallType.FLASHCARD || GPTCallType.QUIZ) inputText += '.';
     const opts: GPTCallOpts = callTypeMap[callType];
     try {
         const configuration: ClientOptions = {
@@ -36,13 +47,20 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
             dangerouslyAllowBrowser: true,
         };
         const openai = new OpenAI(configuration);
-        const response = await openai.completions.create({
+
+        let messages: ChatCompletionMessageParam[] = [
+            { role: 'system', content: opts.prompt },
+            { role: 'user', content: inputText },
+        ];
+
+        const response = await openai.chat.completions.create({
             model: opts.model,
-            max_tokens: opts.maxTokens,
+            messages: messages,
             temperature: opts.temp,
-            prompt: `${opts.prompt}${inputText}`,
+            max_tokens: opts.maxTokens,
         });
-        return response.choices[0].text;
+
+        return response.choices[0].message.content;
     } catch (err) {
         console.log(err);
         return 'Error connecting with API.';
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index ab0315ba1..b6ba3f187 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -342,8 +342,6 @@ pie title Minerals in my tap water
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
             {key: "Flashcard",       creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
-            // {key: "Flashcard",  creator: Docs.Create.ComparisonDocument("", opts),           opts: { _layout_isFlashcard: true, _width: 300, _height: 300 }},
-            //{key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
             {key: "Simulation", creator: opts => Docs.Create.SimulationDocument(opts),      opts: { _width: 300, _height: 300, }},
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index 7f5176123..d45b0822b 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -33,29 +33,53 @@ export class CollectionCarouselView extends CollectionSubView() {
         }
     };
 
+    /**
+     * Goes to the next flashcard in the stack and filters
+     * based on the the currently selected option.
+     */
     advance = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
         var startInd = this.layoutDoc._carousel_index;
 
         // if the star filter is selected
-        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
-            // go to a new index that is starred, skip the ones that aren't
+        if (this.layoutDoc[`filterOp`] == 'star') {
+            // go to a flashcard that is starred, skip the ones that aren't
             while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
                 startInd = (startInd + 1) % this.childLayoutPairs.length;
             }
             this.layoutDoc._carousel_index = startInd;
+            // if there aren't any starred, show all cards
+            if (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`]) {
+                this.layoutDoc[`filterOp`] = 'all';
+            }
         }
 
         // if the practice filter is selected
-        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+        if (this.layoutDoc[`filterOp`] == 'practice') {
             // go to a new index that is missed, skip the ones that are correct
             while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd + 1) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
                 startInd = (startInd + 1) % this.childLayoutPairs.length;
             }
             this.layoutDoc._carousel_index = startInd;
+
+            // if the user has gone through all of the cards and gotten them all correct, show all cards and exit practice mode
+            if (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct') {
+                this.layoutDoc[`filterOp`] = 'all';
+
+                // set all the cards to missed
+                for (var i = 0; i < this.childLayoutPairs.length; i++) {
+                    const curDoc = this.childLayoutPairs?.[NumCast(i)];
+                    curDoc.layout[`${this.fieldKey}_missed`] = undefined;
+                }
+            }
         }
     };
+
+    /**
+     * Goes to the previous flashcard in the stack and filters
+     * based on the the currently selected option.
+     */
     goback = (e: React.MouseEvent) => {
         e.stopPropagation();
         this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
@@ -63,38 +87,58 @@ export class CollectionCarouselView extends CollectionSubView() {
         var startInd = this.layoutDoc._carousel_index;
 
         // if the star filter is selected
-        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'star') {
+        if (this.layoutDoc[`filterOp`] == 'star') {
             // go to a new index that is starred, skip the ones that aren't
             while (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`] && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
                 startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
             }
             this.layoutDoc._carousel_index = startInd;
+            // if there aren't any starred, show all cards
+            if (!this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_star`]) {
+                this.layoutDoc[`filterOp`] = 'all';
+            }
         }
 
         // if the practice filter is selected
-        if (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice') {
+        if (this.layoutDoc[`filterOp`] == 'practice') {
             // go to a new index that is missed, skip the ones that are correct
             while (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct' && (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length != this.layoutDoc._carousel_index) {
                 startInd = (startInd - 1 + this.childLayoutPairs.length) % this.childLayoutPairs.length;
             }
+
             this.layoutDoc._carousel_index = startInd;
+
+            // See all flashcards when finish going through practice mode and set all of the flashcards back to
+            if (this.childLayoutPairs?.[NumCast(startInd)].layout[`${this.fieldKey}_missed`] == 'correct') {
+                this.layoutDoc[`filterOp`] = 'all';
+
+                for (var i = 0; i < this.childLayoutPairs.length; i++) {
+                    const curDoc = this.childLayoutPairs?.[NumCast(i)];
+                    curDoc.layout[`${this.fieldKey}_missed`] = undefined;
+                }
+            }
         }
     };
 
+    /*
+     * Stars the document when the star button is pressed.
+     */
     star = (e: React.MouseEvent) => {
         e.stopPropagation();
-        // stars the document when the button is pressed
         const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
+        if (!curDoc) return;
         if (curDoc.layout[`${this.fieldKey}_star`] == undefined) curDoc.layout[`${this.fieldKey}_star`] = true;
         else curDoc.layout[`${this.fieldKey}_star`] = !curDoc.layout[`${this.fieldKey}_star`];
     };
 
+    /*
+     * Sets a flashcard to either missed or correct depending on if they got the question right in practice mode.
+     */
     missed = (e: React.MouseEvent, val: string) => {
         e.stopPropagation();
         const curDoc = this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)];
         curDoc.layout[`${this.fieldKey}_missed`] = val;
-        this.layoutDoc._carousel_index = (NumCast(this.layoutDoc._carousel_index) + 1) % this.childLayoutPairs.length;
-        this.advance;
+        this.advance(e);
     };
 
     captionStyleProvider = (doc: Doc | undefined, captionProps: Opt<FieldViewProps>, property: string): any => {
@@ -154,6 +198,7 @@ export class CollectionCarouselView extends CollectionSubView() {
         );
     }
     @computed get buttons() {
+        if (!this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)]) return;
         return (
             <>
                 <div key="back" className="carouselView-back" onClick={this.goback}>
@@ -165,10 +210,10 @@ export class CollectionCarouselView extends CollectionSubView() {
                 <div key="star" className="carouselView-star" onClick={this.star}>
                     <FontAwesomeIcon icon={'star'} color={this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_star`] ? 'yellow' : 'gray'} size={'1x'} />
                 </div>
-                <div key="remove" className="carouselView-remove" onClick={e => this.missed(e, 'missed')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+                <div key="remove" className="carouselView-remove" onClick={e => this.missed(e, 'missed')} style={{ visibility: this.layoutDoc[`filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
                     <FontAwesomeIcon icon={'xmark'} color={'red'} size={'1x'} />
                 </div>
-                <div key="check" className="carouselView-check" onClick={e => this.missed(e, 'correct')} style={{ visibility: this.layoutDoc[`_${this._props.fieldKey}_filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
+                <div key="check" className="carouselView-check" onClick={e => this.missed(e, 'correct')} style={{ visibility: this.layoutDoc[`filterOp`] == 'practice' ? 'visible' : 'hidden' }}>
                     <FontAwesomeIcon icon={'check'} color={'green'} size={'1x'} />
                 </div>
             </>
@@ -185,6 +230,18 @@ export class CollectionCarouselView extends CollectionSubView() {
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color),
                 }}>
                 {this.content}
+                {/* Displays a message to the user to add more flashcards if they are in practice mode and no flashcards are there. */}
+                <p
+                    style={{
+                        display: !this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc[`filterOp`] == 'practice' ? 'flex' : 'none',
+                        justifyContent: 'center',
+                        alignItems: 'center',
+                        height: '100%',
+                        zIndex: '-1',
+                    }}>
+                    Add flashcards!
+                </p>
+                {/* Displays a message to the user that a flashcard was recently missed if they had previously gotten it wrong. */}
                 <p
                     style={{
                         color: 'red',
@@ -192,7 +249,7 @@ export class CollectionCarouselView extends CollectionSubView() {
                         position: 'relative',
                         left: '10px',
                         top: '10px',
-                        visibility: this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_missed`] == 'missed' ? 'visible' : 'hidden',
+                        display: this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)] ? (this.childLayoutPairs?.[NumCast(this.layoutDoc._carousel_index)].layout[`${this.fieldKey}_missed`] == 'missed' ? 'block' : 'none') : 'none',
                     }}>
                     Recently missed!
                 </p>
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 168176edf..2f0f2a773 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -80,6 +80,7 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
         super(props);
         makeObservable(this);
         this._annotationKeySuffix = returnEmptyString;
+        this.layoutDoc[`filterOp`] = 'all';
     }
 
     componentDidMount() {
@@ -176,14 +177,18 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
                     return newRendition;
                 });
 
+            // creates menu option for flashcard filters
             const revealOptions = cm.findByDescription('Filter Flashcards');
             const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-            revealItems.push({ description: 'All', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'all'), icon: 'eye-slash' });
-            revealItems.push({ description: 'Star', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'star'), icon: 'hand-point-up' });
-            revealItems.push({ description: 'Practice Mode', event: () => (this.layoutDoc[`_${this._props.fieldKey}_filterOp`] = 'practice'), icon: 'rotate' });
+            revealItems.push({ description: 'All', event: () => (this.layoutDoc[`filterOp`] = 'all'), icon: 'layer-group' });
+            revealItems.push({ description: 'Star', event: () => (this.layoutDoc[`filterOp`] = 'star'), icon: 'star' });
+            revealItems.push({ description: 'Practice Mode', event: () => (this.layoutDoc[`filterOp`] = 'practice'), icon: 'check' });
+            revealItems.push({ description: 'Quiz Cards', event: () => (this.layoutDoc[`filterOp`] = 'quiz'), icon: 'pencil' });
 
-            //revealItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' });
-            !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+            // only show the filter options if it is a collection of type Carousel view
+            if (this.Document?._type_collection === CollectionViewType.Carousel) {
+                !revealOptions && cm.addItem({ description: 'Filter Flashcards', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
+            }
 
             const options = cm.findByDescription('Options...');
             const optionItems = options && 'subitems' in options ? options.subitems : [];
diff --git a/src/client/views/nodes/ComparisonBox.scss b/src/client/views/nodes/ComparisonBox.scss
index 39c864b2b..093b9c004 100644
--- a/src/client/views/nodes/ComparisonBox.scss
+++ b/src/client/views/nodes/ComparisonBox.scss
@@ -1,4 +1,5 @@
 .comparisonBox-interactive,
+.quiz-card,
 .comparisonBox {
     border-radius: inherit;
     width: 100%;
@@ -7,6 +8,40 @@
     z-index: 0;
     pointer-events: none;
     display: flex;
+    p {
+        color: rgb(0, 0, 0);
+        -webkit-text-stroke-color: black;
+        -webkit-text-stroke-width: 0.2px;
+    }
+
+    .input-box {
+        position: relative;
+        padding: 10px;
+        width: 100%;
+        height: 100%;
+        display: flex;
+    }
+
+    .submit-button {
+        position: relative;
+        padding-bottom: 10px;
+        padding-left: 5px;
+        padding-right: 5px;
+        width: 100%;
+        height: 15%;
+        display: flex;
+
+        button {
+            flex: 1;
+            position: relative;
+        }
+    }
+    textarea {
+        flex: 1;
+        padding: 10px;
+        position: relative;
+        resize: none;
+    }
 
     .clip-div {
         position: absolute;
@@ -95,4 +130,112 @@
             display: flex;
         }
     }
+    // .input-box {
+    //     position: relative;
+    //     padding: 10px;
+    // }
+    // input[type='text'] {
+    //     flex: 1;
+    //     position: relative;
+    //     margin-right: 10px;
+    //     width: 100px;
+    // }
+}
+
+// .quiz-card {
+//     position: relative;
+
+//     input[type='text'] {
+//         flex: 1;
+//         position: relative;
+//         margin-right: 10px;
+//         width: 100px;
+//     }
+// }
+.QuizCard {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .QuizCard-wrapper {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        .QuizCardBox {
+            /* existing code */
+
+            .DIYNodeBox-iframe {
+                height: 100%;
+                width: 100%;
+                border: none;
+            }
+        }
+
+        .search-bar {
+            display: flex;
+            justify-content: left;
+            align-items: left;
+            width: 100%;
+            padding: 10px;
+
+            input[type='text'] {
+                flex: 1;
+                margin-right: 10px;
+            }
+
+            button {
+                padding: 5px 10px;
+            }
+        }
+
+        .content {
+            flex: 1;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            width: 100%;
+            height: 100%;
+            .diagramBox {
+                flex: 1;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                width: 100%;
+                height: 100%;
+                svg {
+                    flex: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    width: 100%;
+                    height: 100%;
+                }
+            }
+        }
+
+        .loading-circle {
+            position: relative;
+            width: 50px;
+            height: 50px;
+            border-radius: 50%;
+            border: 3px solid #ccc;
+            border-top-color: #333;
+            animation: spin 1s infinite linear;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    }
 }
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 19fccce8a..9fd4d696a 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -2,7 +2,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { emptyFunction, returnFalse, returnNone, returnZero, setupMoveUpEvents } from '../../../Utils';
+import { emptyFunction, returnFalse, returnNone, returnZero, setupMoveUpEvents, unimplementedFunction } from '../../../Utils';
 import { Doc, Opt, DocListCast } from '../../../fields/Doc';
 import { DocCast, NumCast, RTFCast, StrCast } from '../../../fields/Types';
 import { DocUtils, Docs } from '../../documents/Documents';
@@ -34,6 +34,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         makeObservable(this);
     }
 
+    @observable inputValue = '';
+    @observable outputValue = '';
+    @observable loading = false;
+    @observable errorMessage = '';
+    @observable outputMessage = '';
+
+    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+        this.inputValue = e.target.value;
+        console.log(this.inputValue);
+    };
+
     @observable _animating = '';
 
     @computed get clipWidth() {
@@ -160,7 +171,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             e => {
                 const de = new DragManager.DocumentDragData([DocCast(this.dataDoc[which])], dropActionType.move);
                 de.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-                    //this.clearDoc(which);
                     return addDocument(doc);
                 };
                 de.canEmbed = true;
@@ -181,15 +191,24 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     remDoc2 = (doc: Doc | Doc[]) => (doc instanceof Doc ? [doc] : doc).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_2'), true);
     _closeRef = React.createRef<HTMLDivElement>();
 
+    /**
+     * Flips a flashcard to the alternate side for the user to view.
+     */
     flipFlashcard = () => {
         const usePath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
-
         this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usePath === undefined ? 'alternate' : undefined;
     };
+
+    /**
+     * Changes the view option to hover for a flashcard.
+     */
     hoverFlip = (side: string | undefined) => {
         if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
     };
 
+    /**
+     * Creates the button used to flip the flashcards.
+     */
     @computed get overlayAlternateIcon() {
         const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
         return (
@@ -203,21 +222,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                 this.flipFlashcard();
                                 console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
                                 console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
-
-                                //const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text;
-                                // DocCast(this.dataDoc[this.fieldKey + '_1'])[DocData].text = 'hello';
-                                // const mes = gptAPICall(queryText, GPTCallType.COMPLETION).trim();
-                                // const res = await gptAPICall(queryText, GPTCallType.COMPLETION)
-                                // console.log(res);
-                                //.then(value => (DocCast(this.dataDoc[this.fieldKey + '_1']).text = value.trim()));
-                                if (usepath !== 'alternate') {
-                                    this.askGPT();
-                                }
                             }
                         })
                     }
                     style={{
-                        //display: this._props.isContentActive() && !SnappingManager.IsDragging ? 'flex' : 'none',
                         background: usepath === 'alternate' ? 'white' : 'black',
                         color: usepath === 'alternate' ? 'black' : 'white',
                     }}>
@@ -227,15 +235,34 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
     }
 
+    @action handleRenderGPTClick = () => {
+        // Call the GPT model and get the output
+        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = 'alternate';
+        this.outputValue = '';
+        if (this.inputValue) this.askGPT();
+    };
+
+    @action handleRenderClick = () => {
+        // Call the GPT model and get the output
+        this.layoutDoc[`_${this._props.fieldKey}_usePath`] = undefined;
+    };
+
+    /**
+     * Calls the GPT model to create QuizCards. Evaluates how similar the user's response is to the alternate
+     * side of the flashcard.
+     */
     askGPT = async (): Promise<string | undefined> => {
-        const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text;
+        const questionText = 'Question: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
+        const rubricText = ' Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
+        const queryText = questionText + ' UserAnswer: ' + this.inputValue + '. ' + rubricText;
+
         try {
-            let res = await gptAPICall(StrCast(queryText), GPTCallType.COMPLETION);
+            let res = await gptAPICall(queryText, GPTCallType.QUIZ);
             if (!res) {
                 console.error('GPT call failed');
                 return;
             }
-            DocCast(this.dataDoc[this.fieldKey + '_0'])[DocData].text = res;
+            this.outputValue = res;
             console.log(res);
         } catch (err) {
             console.error('GPT call failed');
@@ -292,8 +319,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             );
         };
         const displayBox = (which: string, index: number, cover: number) => {
-            // if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hide/reveal') this.layoutDoc[this.clipHeightKey] = 100;
-            // else this.layoutDoc.height = 300;
             return (
                 <div className={`${index === 0 ? 'before' : 'after'}Box-cont`} key={which} style={{ width: this._props.PanelWidth() }} onPointerDown={e => this.registerSliding(e, cover)} ref={ele => this.createDropTarget(ele, which, index)}>
                     {displayDoc(which)}
@@ -326,36 +351,54 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
         if (this.Document._layout_isFlashcard) {
             const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
-            // add text box when first created
 
+            // add text box to each side when comparison box is first created
             if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
+                // if there is text from the pdf ai cards, put the question on the front side.
                 newDoc[DocData].text = dataSplit[1];
                 this.addDoc(newDoc, this.fieldKey + '_0');
             }
             if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] == 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
-                newDoc[DocData].text = 'placeholder...';
+                // if there is text from the pdf ai cards, put the answer on the alternate side.
+                newDoc[DocData].text = dataSplit[0];
                 this.addDoc(newDoc, this.fieldKey + '_1');
             }
 
-            if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hide/reveal') {
-                {
-                    return (
-                        <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
-                            {displayBox(`${this.fieldKey}_0`, side, this._props.PanelHeight() - 3)}
-                            {displayBox(`${this.fieldKey}_1`, 1, this._props.PanelHeight() - 3)}
+            // render the QuizCards
+            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer)[`filterOp`] == 'quiz') {
+                return (
+                    <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
+                        <p style={{ color: 'white', padding: 10 }}>{StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)}</p>
+                        {/* {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)} */}
+                        <div className={'input-box'}>
+                            {
+                                <textarea
+                                    value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
+                                    onChange={this.handleInputChange}
+                                    readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
+                                />
+                            }
                         </div>
-                    );
-                }
-            } else {
+                        <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
+                            <button onClick={this.handleRenderGPTClick}>Submit</button>
+                        </div>
+                        <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
+                            <button onClick={this.handleRenderClick}>Edit Your Response</button>
+                        </div>
+                    </div>
+                );
+            }
+
+            // render a normal flashcard when not a QuizCard
+            else {
                 return (
                     <div
                         className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
-                        // style={{ display: 'flex', flexDirection: 'column' }}
-                        // style={{ position: 'absolute', top: '0px' }}
+                        style={{ display: 'flex', flexDirection: 'column' }}
                         onMouseEnter={() => {
                             this.hoverFlip('alternate');
                         }}
@@ -363,12 +406,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             this.hoverFlip(undefined);
                         }}>
                         {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
-
                         {this.overlayAlternateIcon}
                     </div>
                 );
             }
         } else {
+            // render a comparison box that compares items side by side
             return (
                 <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
                     {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index 26e5ec622..e1b501c5a 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -48,6 +48,9 @@ import { LinkAnchorBox } from './LinkAnchorBox';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
 import { PresEffect, PresEffectDirection } from './trails';
 import { FieldsDropdown } from '../FieldsDropdown';
+import { RTFCast } from '../../../fields/Types';
+import { gptAPICall, GPTCallType } from '../../apis/gpt/GPT';
+
 interface Window {
     MediaRecorder: MediaRecorder;
 }
@@ -517,6 +520,21 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
         input.click();
     };
 
+    askGPT = async (): Promise<string | undefined> => {
+        const queryText = RTFCast(DocCast(this.dataDoc[this.props.fieldKey + '_1']).text)?.Text;
+        try {
+            let res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
+            if (!res) {
+                console.error('GPT call failed');
+                return;
+            }
+            DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
+            console.log(res);
+        } catch (err) {
+            console.error('GPT call failed');
+        }
+    };
+
     onContextMenu = (e?: React.MouseEvent, pageX?: number, pageY?: number) => {
         if (e && this.layoutDoc.layout_hideContextMenu && Doc.noviceMode) {
             e.preventDefault();
@@ -569,17 +587,19 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
                 appearanceItems.splice(0, 0, { description: 'Open in Lightbox', event: () => LightboxView.Instance.SetLightboxDoc(this.Document), icon: 'external-link-alt' });
             }
             appearanceItems.push({ description: 'Pin', event: () => this._props.pinToPres(this.Document, {}), icon: 'eye' });
+            if (this.Document._layout_isFlashcard) {
+                appearanceItems.push({ description: 'Create ChatCard', event: () => this.askGPT(), icon: 'id-card' });
+            }
 
             !Doc.noviceMode && templateDoc && appearanceItems.push({ description: 'Open Template   ', event: () => this._props.addDocTab(templateDoc, OpenWhere.addRight), icon: 'eye' });
             !appearance && appearanceItems.length && cm.addItem({ description: 'Appearance...', subitems: appearanceItems, icon: 'compass' });
 
+            // creates menu for the user to select how to reveal the flashcards
             if (this.Document._layout_isFlashcard) {
                 const revealOptions = cm.findByDescription('Reveal Options');
                 const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
                 revealItems.push({ description: 'Hover', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'), icon: 'hand-point-up' });
                 revealItems.push({ description: 'Flip', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'), icon: 'rotate' });
-                revealItems.push({ description: 'Hide & Reveal', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hide/reveal'), icon: 'eye-slash' });
-                //revealItems.push({ description: 'Bring to Front', event: () => SelectionManager.Views.forEach(dv => dv._props.bringToFront?.(dv.Document, false)), icon: 'arrow-up' });
                 !revealOptions && cm.addItem({ description: 'Reveal Options', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
             }
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 4fce72cdc..3192ac537 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -178,6 +178,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
     @observable
     private gptRes: string = '';
 
+    public makeAIFlashcards: () => void = unimplementedFunction;
+    public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
+
     public static PasteOnLoad: ClipboardEvent | undefined;
     private static SelectOnLoad: Doc | undefined;
     public static SetSelectOnLoad(doc: Doc) {
@@ -959,7 +962,7 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FieldViewProps
         const options = cm.findByDescription('Options...');
         const optionItems = options && 'subitems' in options ? options.subitems : [];
         optionItems.push({ description: `Generate Dall-E Image`, event: () => this.generateImage(), icon: 'star' });
-        optionItems.push({ description: `Ask GPT-3`, event: () => this.askGPT(), icon: 'lightbulb' });
+        optionItems.push({ description: `Ask GPT-3`, event: () => this.makeAIFlashcards(), icon: 'lightbulb' });
         this._props.renderDepth &&
             optionItems.push({
                 description: !this.Document._createDocOnCR ? 'Create New Doc on Carriage Return' : 'Allow Carriage Returns',
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index 7cb6a20f4..a0c3cf487 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -76,7 +76,6 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * @param e pointer down event
      */
     gptSummarize = async (e: React.PointerEvent) => {
-        // move this logic to gptpopup, need to implement generate again
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setMode(GPTPopupMode.SUMMARY);
         GPTPopup.Instance.setLoading(true);
@@ -90,24 +89,28 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         GPTPopup.Instance.setLoading(false);
     };
 
+    /**
+     * Invokes the API with the selected text and stores it in the selected text.
+     * @param e pointer down event
+     */
     gptFlashcards = async (e: React.PointerEvent) => {
-        // move this logic to gptpopup, need to implement generate again
-        // GPTPopup.Instance.setVisible(true);
-        // GPTPopup.Instance.setMode(GPTPopupMode.FLASHCARD);
-        // GPTPopup.Instance.setLoading(true);
-
+        const queryText = this.selectedText;
         try {
-            const res = await gptAPICall(this.selectedText, GPTCallType.FLASHCARD);
-
+            const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
+            console.log(res);
             GPTPopup.Instance.setText(res || 'Something went wrong.');
-            this.transferToFlashcard(res);
+            this.transferToFlashcard(res || 'Something went wrong');
         } catch (err) {
             console.error(err);
         }
         GPTPopup.Instance.setLoading(false);
     };
 
+    /*
+     * Transfers the flashcard text generated by GPT on flashcards and creates a collection out them.
+     */
     transferToFlashcard = (text: string) => {
+        // put each question generated by GPT on the front of the flashcard
         const senArr = text.split('Question');
         const collectionArr: Doc[] = [];
         for (var i = 1; i < senArr.length; i++) {
@@ -116,10 +119,11 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
             newDoc.text = senArr[i];
             collectionArr.push(newDoc);
         }
+        // create a new carousel collection of these flashcards
         const newCol = Docs.Create.CarouselDocument(collectionArr, {
-            _width: 200,
+            _width: 250,
             _height: 200,
-            _layout_fitWidth: true,
+            _layout_fitWidth: false,
             _layout_autoHeight: true,
         });
 
@@ -215,6 +219,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                             color={SettingsManager.userColor}
                         />
                     )}
+                    {/* Adds a create flashcards option to the anchor menu, which calls the gptFlashcard method. */}
                     <IconButton
                         tooltip="Create flashcards" //
                         onPointerDown={this.gptFlashcards}
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 32c1721ec..0b741c85e 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -144,15 +144,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             _layout_autoHeight: true,
         });
         this.addDoc(newDoc, this.sidebarId);
-        // const arr = [newDoc];
-        // const newCol = Docs.Create.CarouselDocument(arr, {
-        //     _width: 200,
-        //     _height: 200,
-        //     _layout_fitWidth: true,
-        //     _layout_autoHeight: true,
-        // });
-        // this.addDoc(newDoc, this.sidebarId);
-        // this.addDoc(newCol, this.sidebarId);
         const anchor = AnchorMenu.Instance?.GetAnchor(undefined, false);
         if (anchor) {
             DocUtils.MakeLink(newDoc, anchor, {
@@ -161,25 +152,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         }
     };
 
-    // transferToFlashcard = () => {
-    //     const senArr = this.text.split('Question');
-    //     const collectionArr: Doc[] = [];
-    //     for (var i = 1; i < senArr.length; i++) {
-    //         console.log('Arr ' + i + ': ' + senArr[i]);
-    //         const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
-    //         newDoc.text = senArr[i];
-    //         collectionArr.push(newDoc);
-    //     }
-    //     const newCol = Docs.Create.CarouselDocument(collectionArr, {
-    //         _width: 200,
-    //         _height: 200,
-    //         _layout_fitWidth: true,
-    //         _layout_autoHeight: true,
-    //     });
-    //     this.addDoc(newCol, this.sidebarId);
-    //     this.addToCollection?.(newCol);
-    // };
-
     /**
      * Transfers the image urls to actual image docs
      */
@@ -244,23 +216,6 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         );
     };
 
-    flashcardBox = () => {
-        // const textArr = this.text.split(".");
-        // textArr.forEach(function(sentence) {
-        //     console.log(sentence);
-
-        // });
-        // const newDoc = Docs.Create.ComparisonDocument();
-        // this.addToCollection?.(newDoc);
-        // // const newDoc = Docs.Create.ComparisonDocument();
-        // DocUtils.copyDragFactory(Doc.UserDoc().emptyFlashcard as Doc);
-        // // this.addToCollection?.(newDoc);
-        // // return newDoc;
-        // <ComparisonBox/>
-        const newDoc = Docs.Create.TextDocument('Hello there');
-        this.addDoc?.(newDoc);
-    };
-
     data = () => {
         return (
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
diff --git a/src/client/views/pdf/PDFViewer.tsx b/src/client/views/pdf/PDFViewer.tsx
index cecaf17ff..fe1ed8159 100644
--- a/src/client/views/pdf/PDFViewer.tsx
+++ b/src/client/views/pdf/PDFViewer.tsx
@@ -414,12 +414,10 @@ export class PDFViewer extends ObservableReactComponent<IViewerProps> {
             AnchorMenu.Instance.jumpTo(e.clientX, e.clientY);
         }
 
-        // Changing which document to add the annotation to (the currently selected PDF)
         GPTPopup.Instance.setSidebarId('data_sidebar');
         GPTPopup.Instance.addDoc = this._props.sidebarAddDoc;
+        // allows for creating collection
         AnchorMenu.Instance.addToCollection = this._props.DocumentView?.()._props.addDocument;
-        // const newDoc = Docs.Create.ComparisonDocument({ _layout_isFlashcard: true, _width: 300, _height: 300 });
-        // this.props.addDocument?.(newDoc);
     };
 
     @action
-- 
cgit v1.2.3-70-g09d2


From 6c7615110dcf8334196bbfddfd89b684e4ceee4f Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Fri, 17 May 2024 21:30:02 -0400
Subject: GOD IS GOOD

---
 src/client/apis/gpt/GPT.ts                         |   2 +-
 src/client/documents/Documents.ts                  |   2 +
 src/client/util/CurrentUserUtils.ts                |  29 ++-
 .../views/collections/CollectionCardDeckView.tsx   | 231 +++++++++++++--------
 src/client/views/global/globalScripts.ts           | 153 ++++++++++----
 src/client/views/pdf/GPTPopup/GPTPopup.scss        |   6 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         | 102 +++++----
 7 files changed, 343 insertions(+), 182 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 9a24c808c..398f8ae39 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -20,7 +20,7 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
     edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
     completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' },
-    sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~"},
+    sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok."},
     describe:{model:'gpt-4-vision-preview',maxTokens:2048,temp:0,prompt:"Describe these images in 3-5 words"},
 
 
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 57f91399a..eded2b485 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -502,6 +502,8 @@ export class DocumentOptions {
     cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
     customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created');
     customHashMap?: List<string>
+    visibleGroupNumbers?: List<number>
+
     // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
     // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
     // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index e18c22bac..251771e8e 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -729,18 +729,34 @@ pie title Minerals in my tap water
             { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
             { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Links",   icon:"link", toolTip:"Sort by its links",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"links",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Create",   icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"chat",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Smart Sort",   icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"chat",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+        ]
+    }
 
+    static customCardTools(): Button[] {
+            return [
+                { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+                { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+                { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+                { title: "Custom 1",    icon: "Custom 1",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(0)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 2",    icon: "Custom 2",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(1)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 3",    icon: "Custom 3",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(2)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
 
+            ]
+        }
 
-            // ...customs
+    static cardGroupTools(icon: string): Button[] {
+        return [
+            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"4",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
 
         ]
     }
+
+    
+
     static viewTools(): Button[] {
         return [
             { title: "Snap",      icon: "th",                  toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
@@ -842,6 +858,7 @@ pie title Minerals in my tap water
             { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: CurrentUserUtils.stackTools(),  expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Card",    icon: "Sort",          toolTip: "Card sort",            subMenu: CurrentUserUtils.cardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "CustomCard",    icon: "Create",        toolTip: "Create custom groupings!",     subMenu: CurrentUserUtils.customCardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: CurrentUserUtils.videoTools(),  expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected
             { title: "Image",   icon: "Image",         toolTip: "Image functions",      subMenu: CurrentUserUtils.imageTools(),  expertMode: false, toolType:DocumentType.IMG,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index e96fbc161..42c82ca74 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -24,6 +24,7 @@ import { ImageField, PdfField, URLField } from '../../../fields/URLField';
 import { GPTPopup } from '../pdf/GPTPopup/GPTPopup';
 import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import { reaction } from 'mobx';
+import { NumListCast } from '../../../fields/Doc';
 @observer
 export class CollectionCardView extends CollectionSubView() {
 
@@ -32,8 +33,42 @@ export class CollectionCardView extends CollectionSubView() {
     // documents themselves
 
     @observable hoveredNodeIndex = -1;
+    //index to group
+    @observable customGroupDictionary: Map<number, number>[] = [new Map<number, number>(), new Map<number, number>(), new Map<number, number>()];
+
 
     @computed get myChildLayoutPairs() {
+        let activeGroups = NumListCast(this._props.Document.visibleGroupNumbers);
+        let currCustom = NumCast(this._props.Document.customSortNumber);
+
+        // console.log("Active Groups:", activeGroups);
+
+        for (let i=0; i< activeGroups.length; i++){
+            console.log("Active Groups" + activeGroups[i])
+        }
+        // console.log("Current Custom Sort Number:", currCustom);
+
+        if (activeGroups.length <= 0) {
+            return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK);
+        }
+
+        if (StrCast(this._props.Document.cardSort).includes("custom")) {
+            return this.childLayoutPairs.filter((l, index) => {
+                if (l.layout.type === DocumentType.LINK) {
+                    return false;
+                }
+
+                // Get the group number for the current index from the customGroupDictionary
+                const groupNumber = this.customGroupDictionary[currCustom].get(index);
+
+                // console.log(`Index: ${index}, Group Number: ${groupNumber}`);
+
+                // Check if the group number is in the active groups
+                return groupNumber !== undefined && activeGroups.includes(groupNumber);
+            });
+        }
+
+        // Default return for non-custom cardSort or other cases, filtering out links
         return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK);
     }
 
@@ -90,6 +125,9 @@ export class CollectionCardView extends CollectionSubView() {
         if (this._props.Document.customHashMap != undefined){
             this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap))
         }
+        // this._props.Document.visibleGroupNumbers = new List<number>([1,2,3,4])
+
+
 
         reaction(
             () => this._props.Document.cardSort,
@@ -101,7 +139,6 @@ export class CollectionCardView extends CollectionSubView() {
         );
     }
 
-    @observable customGroupDictionary: Map<number, number>[] = [new Map<number, number>(), new Map<number, number>(), new Map<number, number>()];
 
     @computed get mapToField(): List<string> {
         const resultList = new List<string>(); 
@@ -272,7 +309,8 @@ export class CollectionCardView extends CollectionSubView() {
             case 'custom':
                 return this.sort(sorted, 'custom', desc);
             case 'chat':
-                return { docs: this.sortedDocs || this.myChildLayoutPairs}; // Use the sorted docs from the observable
+                return this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc));            
+                
             default:
                 docs = this.myChildLayoutPairs;
                 return { docs };
@@ -458,7 +496,8 @@ export class CollectionCardView extends CollectionSubView() {
             // const childPair = { layout: doc, data: doc };
 
             const isHovered = this.hoveredNodeIndex === index;
-            const childPairIndex = this.myChildLayoutPairs.indexOf(childPair);
+            // const childPairIndex = this.myChildLayoutPairs.indexOf(childPair);
+            const childPairIndex  = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK).indexOf(childPair)
             const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
             const calcRowIndex = this.overflowIndexCalc(realIndex);
 
@@ -501,6 +540,8 @@ export class CollectionCardView extends CollectionSubView() {
                     {this.displayDoc(childPair, childScreenToLocal)}
 
                     {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''}
+                    {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''}
+
                 </div>
             );
         });
@@ -512,38 +553,23 @@ export class CollectionCardView extends CollectionSubView() {
     
     
 
-    @action toggleButton(childPairIndex: number, buttonID: number) {
-        this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID);
-        this._props.Document.customHashMap = this.mapToField
-
-        // Cast(selected.Document.data, WebField, null)?.url?.href)
-
-        //note richtext
-
-        // StrCast(selected.Document.data, Cast(selected.Document.data, WebField, null)?.url?.href)
-
-
-
-        // const
-        const imgurlperchance = Cast(this.childDocs[1].data, ImageField, null)?.url.href;
-        const perchance = this.imageUrlToBase64(imgurlperchance)
-        // const imgurlperchance = Cast(this.childDocs[1].data, PdfField, null)?.url.;
-
-
-        // console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
-        // console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
-
-        // const perchance = StrCast(this.childDocs[0].text);
-
-
-
-        // const pdf = (StrCast(this.myChildLayoutPairs[0].layout.text)); //pdf
-        const queryText = this.myChildLayoutPairs[0].layout.type; //everything else
-
-        // const queryText = RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text;
-
-        console.log(queryText ?? "sad")
+    @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc?: Doc) {
+        if (!isChat) {
+            this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].set(childPairIndex, buttonID);
+            this._props.Document.customHashMap = this.mapToField;
+        }
+    
+        if (isChat && doc) {
+            this.gptGroups.set(doc, buttonID);
+        }
+    
+        // console.log(`Toggled button for childPairIndex: ${childPairIndex}, buttonID: ${buttonID}, isChat: ${isChat}`);
+        // console.log(`Updated customGroupDictionary:`, this.customGroupDictionary);
+        if (isChat && doc) {
+            console.log(`Updated gptGroups for doc ${doc}:`, this.gptGroups.get(doc));
+        }
     }
+    
 
     async childPairStringList(): Promise<string> {
         let string = "";
@@ -598,20 +624,25 @@ export class CollectionCardView extends CollectionSubView() {
     textToDoc = new Map<string, Doc>()
     gptProccessedImages = new Set<Doc>()
 
-    @action async getImageDesc(image: Doc){
-            let href = (image['data'] as URLField).url.href;
-            let hrefParts = href.split('.');
-            let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
-            try {
-                let hrefBase64 = await this.imageUrlToBase64(hrefComplete);
-                let response = await gptImageLabel(hrefBase64);
-                this.textToDoc.set(response.trim(), image);
-                this.gptProccessedImages.add(image);
-                console.log(response);
-                return response; // Return the response from gptImageLabel
-            } catch (error) {
-                console.log("bad things have happened");
-            }
+    @action async getImageDesc(image: Doc) {
+        if (this.gptProccessedImages.has(image)) {
+            // Return the already processed description
+            return Array.from(this.textToDoc.keys()).find(key => this.textToDoc.get(key) === image) || '';
+        }
+    
+        let href = (image['data'] as URLField).url.href;
+        let hrefParts = href.split('.');
+        let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
+        try {
+            let hrefBase64 = await this.imageUrlToBase64(hrefComplete);
+            let response = await gptImageLabel(hrefBase64);
+            this.textToDoc.set(response.trim(), image);
+            this.gptProccessedImages.add(image);
+            console.log(response);
+            return response; // Return the response from gptImageLabel
+        } catch (error) {
+            console.log("bad things have happened");
+        }
     }
 
    
@@ -620,41 +651,43 @@ export class CollectionCardView extends CollectionSubView() {
     //a map from the text to the Doc (for everything)
     
 
-    @action async smartSort() {
-        this.isLoading = true;
-        console.log("loading");
+    // @action async smartSort() {
+    //     this.isLoading = true;
+    //     console.log("loading");
         
-        // Store the result of childPairStringList in a variable
-        const childPairStrings = await this.childPairStringList();
+    //     // Store the result of childPairStringList in a variable
+    //     const childPairStrings = await this.childPairStringList();
         
-        if (childPairStrings === "") {
-            console.log("no child pairs :(");
-        } else {
-            console.log(childPairStrings + " og list");
-            let prompt = childPairStrings;
+    //     if (childPairStrings === "") {
+    //         console.log("no child pairs :(");
+    //     } else {
+    //         console.log(childPairStrings + " og list");
+    //         let prompt = childPairStrings;
         
-            let res = await gptAPICall(prompt, GPTCallType.SORT);
-            this.isLoading = false;
-            if (res == 'Error connecting with API.') {
-                // If GPT call failed
-                console.error('GPT call failed');
-            } else if (res != null) {
-                console.log(res);
-                this.processGptOutput(res);
-                // Update the observable with the sorted documents
-                this.sortedDocs = this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)).docs;
-            }
-            this.isLoading = false;
-        }
-    }
+    //         let res = await gptAPICall(prompt, GPTCallType.SORT);
+    //         this.isLoading = false;
+    //         if (res == 'Error connecting with API.') {
+    //             // If GPT call failed
+    //             console.error('GPT call failed');
+    //         } else if (res != null) {
+    //             console.log(res);
+    //             this.processGptOutput(res);
+    //             // Update the observable with the sorted documents
+    //             this.sortedDocs = this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc)).docs;
+    //         }
+    //         this.isLoading = false;
+    //     }
+    // }
 
-    gptGroups = new Map<Doc, number>
+    gptGroups = new ObservableMap<Doc, number>
+    @observable amGPTGroups = 0
 
      // Method to convert the GPT-produced string into a map
     processGptOutput(gptOutput: string) {
 
         // Split the string into individual list items
         const listItems = gptOutput.split('======').filter(item => item.trim() !== '');
+        this.amGPTGroups = listItems.length
 
         listItems.forEach((item, index) => {
             // Split the item by '~~~~~~' to get all descriptors
@@ -678,14 +711,15 @@ export class CollectionCardView extends CollectionSubView() {
     @observable isChatPopupOpen = false;
 
     @action openChatPopup = async () => {
-    this.isChatPopupOpen = true;
-    GPTPopup.Instance.setVisible(true);
-    GPTPopup.Instance.setMode(GPTPopupMode.SORT);
-    
-    // Await the promise to get the string result
-    const sortDesc = await this.childPairStringList();
-    GPTPopup.Instance.setSortDesc(sortDesc);
-    GPTPopup.Instance.onSortComplete = this.handleGptSortResult;
+        this.isChatPopupOpen = true;
+        GPTPopup.Instance.setVisible(true);
+        GPTPopup.Instance.setMode(GPTPopupMode.SORT);
+        
+        // Await the promise to get the string result
+        const sortDesc = await this.childPairStringList();
+        GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded
+        GPTPopup.Instance.setSortDesc(sortDesc);
+        GPTPopup.Instance.onSortComplete = this.handleGptSortResult;
 };
     @action handleGptSortResult = (sortResult: string) => {
         this.processGptOutput(sortResult);
@@ -696,19 +730,34 @@ export class CollectionCardView extends CollectionSubView() {
 
     
 
-    renderButtons(childPairIndex: number) {
+    renderButtons(childPairIndex: number, doc?: Doc, isChat = false) {
         const buttons = []; // Array to hold the button elements
-
-        let amButtons = 4;
-
-        let activeButtonIndex = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(childPairIndex);
-
+        const groupNumber = NumCast(this._props.Document.customSortNumber);
+    
+        let amButtons = 4; // Adjusted to your context
+        let activeButtonIndex = this.customGroupDictionary[groupNumber].get(childPairIndex);
+    
+        if (isChat && doc) {
+            if (this.amGPTGroups > 4){
+                amButtons = this.amGPTGroups;
+            }
+            activeButtonIndex = this.gptGroups.get(doc);
+        }
+    
+        console.log("childPairIndex:", childPairIndex, "activeButtonIndex:", activeButtonIndex, "groupNumber:", groupNumber);
+    
         for (let i = 0; i < amButtons; i++) {
-            const isActive = activeButtonIndex == i;
-
-            buttons.push(<button key={i} style={{ backgroundColor: `${isActive ? '#4476f7' : '#323232'}` }} onClick={() => this.toggleButton(childPairIndex, i)}></button>);
+            const isActive = activeButtonIndex === i;
+            console.log(`Rendering button ${i} for childPairIndex ${childPairIndex} isActive: ${isActive}`);
+            buttons.push(
+                <button
+                    key={i}
+                    style={{ backgroundColor: isActive ? '#4476f7' : '#323232' }}
+                    onClick={() => this.toggleButton(childPairIndex, i, isChat, doc)}
+                ></button>
+            );
         }
-
+    
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
         return (
             <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 14f83beb6..496d7482c 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -22,7 +22,8 @@ import { VideoBox } from '../nodes/VideoBox';
 import { WebBox } from '../nodes/WebBox';
 import { RichTextMenu } from '../nodes/formattedText/RichTextMenu';
 import { ImageBox } from '../nodes/ImageBox';
-
+import { NumListCast } from '../../../fields/Doc';
+import { List } from '../../../fields/List';
 ScriptingGlobals.add(function IsNoneSelected() {
     return SelectionManager.Views.length <= 0;
 }, 'are no document selected');
@@ -107,84 +108,146 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
 
 
 
-ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', checkResult?: boolean, persist?: boolean, customNumber?: number) {
+ScriptingGlobals.add(function showFreeform(
+    attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4',
+    checkResult?: boolean,
+    persist?: boolean,
+    isDoubleClick?: boolean
+) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' |'grid' | 'snaplines' | 'clusters' | 'arrange'| 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3'| 'chat', { waitForRender?: boolean, checkResult: (doc:Doc) => any; setDoc: (doc:Doc, dv:DocumentView) => void;}> = new Map([
+    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', 
+    { 
+        waitForRender?: boolean; 
+        checkResult: (doc: Doc) => any; 
+        setDoc: (doc: Doc, dv: DocumentView) => void; 
+    }> = new Map([
         ['grid', {
-            checkResult: (doc:Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
-            setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
+            checkResult: (doc: Doc) => BoolCast(doc?._freeform_backgroundGrid, false),
+            setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_backgroundGrid = !doc._freeform_backgroundGrid,
         }],
         ['snaplines', {
-            checkResult: (doc:Doc) => BoolCast(doc?._freeform_snapLines, false),
-            setDoc: (doc:Doc, dv:DocumentView) => doc._freeform_snapLines = !doc._freeform_snapLines,
+            checkResult: (doc: Doc) => BoolCast(doc?._freeform_snapLines, false),
+            setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_snapLines = !doc._freeform_snapLines,
         }],
         ['viewAll', {
-            checkResult: (doc:Doc) => BoolCast(doc?._freeform_fitContentsToBox, false),
-            setDoc: (doc:Doc,dv:DocumentView) => {
+            checkResult: (doc: Doc) => BoolCast(doc?._freeform_fitContentsToBox, false),
+            setDoc: (doc: Doc, dv: DocumentView) => {
                 if (persist) doc._freeform_fitContentsToBox = !doc._freeform_fitContentsToBox;
                 else if (doc._freeform_fitContentsToBox) doc._freeform_fitContentsToBox = undefined;
                 else (dv.ComponentView as CollectionFreeFormView)?.fitContentOnce();
             },
         }],
         ['center', {
-            checkResult: (doc:Doc) => BoolCast(doc?._stacking_alignCenter, false),
-            setDoc: (doc:Doc,dv:DocumentView) => doc._stacking_alignCenter = !doc._stacking_alignCenter,
+            checkResult: (doc: Doc) => BoolCast(doc?._stacking_alignCenter, false),
+            setDoc: (doc: Doc, dv: DocumentView) => doc._stacking_alignCenter = !doc._stacking_alignCenter,
         }],
         ['clusters', {
-            waitForRender: true, // flags that undo batch should terminate after a re-render giving the script the chance to fire
-            checkResult: (doc:Doc) => BoolCast(doc?._freeform_useClusters, false),
-            setDoc: (doc:Doc,dv:DocumentView) => doc._freeform_useClusters = !doc._freeform_useClusters,
+            waitForRender: true,
+            checkResult: (doc: Doc) => BoolCast(doc?._freeform_useClusters, false),
+            setDoc: (doc: Doc, dv: DocumentView) => doc._freeform_useClusters = !doc._freeform_useClusters,
         }],
         ['flashcards', {
-            checkResult: (doc:Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false),
-            setDoc: (doc:Doc,dv:DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
+            checkResult: (doc: Doc) => BoolCast(Doc.UserDoc().defaultToFlashcards, false),
+            setDoc: (doc: Doc, dv: DocumentView) => Doc.UserDoc().defaultToFlashcards = !Doc.UserDoc().defaultToFlashcards,
         }],
         ['time', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "time", 
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "time",
+            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "time",
         }],
         ['docType', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "type",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "type",
+            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "type",
         }],
         ['color', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "color",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "color",
+            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "color",
         }],
-
         ['links', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "links",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links",
+            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links",
         }],
-
         ['custom1', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc, dv) => {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 0,
+            setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
                 doc.customSortNumber = 0;
+                doc.visibleGroupNumbers = new List<number>();
             }
-        }],        
-
+        }],
         ['custom2', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc, dv) => {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 1,
+            setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
                 doc.customSortNumber = 1;
-                console.log(doc.customSortNumber + " numberrrrrrrr")
-            }        }],
-
+                doc.visibleGroupNumbers = new List<number>();
+            }
+        }],
         ['custom3', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc, dv) => {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 2,
+            setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
                 doc.customSortNumber = 2;
-            }        }],
+                doc.visibleGroupNumbers = new List<number>();
+            }
+        }],
         ['chat', {
-            checkResult: (doc:Doc) => StrCast(doc?.cardSort),
-            setDoc: (doc:Doc,dv:DocumentView) => doc.cardSort = "chat",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "chat",
+            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "chat",
+        }],
+        ['1', {
+            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(0),
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                let list = NumListCast(doc.visibleGroupNumbers);
+                if (list.includes(0)) {
+                    let newList = new List<number>(list.filter(d => d !== 0));
+                    doc.visibleGroupNumbers = newList;
+                } else {
+                    list.push(0);
+                    doc.visibleGroupNumbers = new List<number>(list);
+                }
+            }
         }],
-   ]);
+        ['2', {
+            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(1),
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                let list = NumListCast(doc.visibleGroupNumbers);
+                if (list.includes(1)) {
+                    let newList = new List<number>(list.filter(d => d !== 1));
+                    doc.visibleGroupNumbers = newList;
+                } else {
+                    list.push(1);
+                    doc.visibleGroupNumbers = new List<number>(list);
+                }
+            }
+        }],
+        ['3', {
+            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(2),
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                let list = NumListCast(doc.visibleGroupNumbers);
+                if (list.includes(2)) {
+                    let newList = new List<number>(list.filter(d => d !== 2));
+                    doc.visibleGroupNumbers = newList;
+                } else {
+                    list.push(2);
+                    doc.visibleGroupNumbers = new List<number>(list);
+                }
+            }
+        }],
+        ['4', {
+            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(3),
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                let list = NumListCast(doc.visibleGroupNumbers);
+                if (list.includes(3)) {
+                    let newList = new List<number>(list.filter(d => d !== 3));
+                    doc.visibleGroupNumbers = newList;
+                } else {
+                    list.push(3);
+                    doc.visibleGroupNumbers = new List<number>(list);
+                }
+            }
+        }],
+    ]);
 
     if (checkResult) {
         return map.get(attr)?.checkResult(selected);
@@ -194,6 +257,14 @@ ScriptingGlobals.add(function showFreeform(attr: 'flashcards' | 'center' | 'grid
     setTimeout(() => batch.end(), 100);
 });
 
+
+ScriptingGlobals.add(function isThatCardGroup(n: number){
+    const canvas = SelectionManager.Docs.lastElement();
+    return canvas.customSortNumber == n
+
+
+})
+
 // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
 //     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
 //     const selected = SelectionManager.Docs.lastElement();
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.scss b/src/client/views/pdf/GPTPopup/GPTPopup.scss
index 4425cf158..551c8e5af 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.scss
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.scss
@@ -55,10 +55,10 @@ $highlightedText: #82e0ff;
         overflow-y: auto;
     }
 
-    .btns-wrapper {
+    .btns-wrapper-gpt {
         height: 50px;
         display: flex;
-        justify-content: space-between;
+        justify-content: center;
         align-items: center;
         transform: translateY(30px);
 
@@ -76,6 +76,8 @@ $highlightedText: #82e0ff;
             display: flex;
             align-items: center;
         }
+
+        
     }
 
     button {
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index faf66af85..d94be1860 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -154,6 +154,13 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     }
 
     @observable onSortComplete?: (sortResult: string) => void;
+    @observable cardsDoneLoading = false;
+
+    @action setCardsDoneLoading(done: boolean) {
+        console.log(done + "HI HIHI")
+        this.cardsDoneLoading = done;
+    }
+
 
 
 
@@ -169,12 +176,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.setSortDone(false);
 
         try {
-            const res = await gptAPICall(this.sortPrompt + this.sortDesc, GPTCallType.SORT);
+
+            const res = await gptAPICall(this.sortDesc, GPTCallType.SORT);
             this.setSortText(res || 'Something went wrong :(');
 
             // Trigger the callback with the result
             if (this.onSortComplete) {
                 this.onSortComplete(res || 'Something went wrong :(');
+                console.log(res)
             }
         } catch (err) {
             console.error(err);
@@ -313,52 +322,63 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                 {this.heading("SORTING")}
                 {this.loading ? (
                     <div className="content-wrapper">
-                        <div className="loading-spinner">
-                            <ReactLoading type="spin" color="#000" height={30} width={30} />
-                            <span>Loading...</span>
-                        </div>
-                    </div>
-                ) : !this.sortDone && (
-                    <div className="btns-wrapper">
-                        <input
-                            defaultValue=""
-                            autoComplete="off"
-                            onChange={this.setSortPrompt}
-                            onKeyDown={e => {
-                                if (e.key === 'Enter') {
-                                    this.generateSort();
-                                }
-                                e.stopPropagation();
-                            }}
-                            type="text"
-                            placeholder="Enter sorting instructions..."
-                            id="search-input"
-                            className="searchBox-input"
-                            style={{ width: "100%" }}
-                        />
+                    <div className="loading-spinner">
+                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                        <span>Loading...</span>
                     </div>
-                )}
+                </div>
+                ) : (
+                    <>
+                        {!this.cardsDoneLoading ? (
+                            <div className="content-wrapper">
+                                <div className="loading-spinner">
+                                    <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                                    <span>Reading Cards...</span>
+                                </div>
+                            </div>
+                        ) : (
+                            !this.sortDone && (
+                                <div className="btns-wrapper-gpt">
+                                    <Button
+                                        tooltip="Have ChatGPT sort your cards for you!"
+                                        text="Sort!"
+                                        onClick={this.generateSort}
+                                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                                        type={Type.TERT}
+                                        style={{
+                                            width: '90%', // Almost as wide as the container
+                                            textAlign: 'center',
+                                            color: '#ffffff', // White text
+                                            fontSize: '16px' // Adjust font size as needed
+                                        }}
+                                    />
+                                </div>
+                            )
+                        )}
     
-                {this.sortDone && (
-                    <div>
-                        <div className="content-wrapper">
-
-                        <p>{this.text== "Something went wrong :(" ? "Something went wrong :(" : "Sorting done! Feel free to move things around / regenerate :) !"}</p>
-                       
-
-                            <IconButton
-                                tooltip="Generate Again"
-                                onClick={() => this.setSortDone(false)}
-                                icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                                color={StrCast(Doc.UserDoc().userVariantColor)}
-                            />
-
-                    </div>  
-                    </div>
+                        {this.sortDone && (
+                            <div>
+                                <div className="content-wrapper">
+                                    <p>
+                                        {this.text === "Something went wrong :(" ? 
+                                        "Something went wrong :(" : 
+                                        "Sorting done! Feel free to move things around / regenerate :) !"}
+                                    </p>
+                                    <IconButton
+                                        tooltip="Generate Again"
+                                        onClick={() => this.setSortDone(false)}
+                                        icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
+                                        color={StrCast(Doc.UserDoc().userVariantColor)}
+                                    />
+                                </div>
+                            </div>
+                        )}
+                    </>
                 )}
             </div>
         </>
     );
+
     
     
 
-- 
cgit v1.2.3-70-g09d2


From 68b00ed7e782fd237cdcdcb30f55814874854187 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Sat, 18 May 2024 02:49:43 -0400
Subject: perchance time to pull

---
 src/client/util/CurrentUserUtils.ts                |  6 +++---
 .../views/collections/CollectionCardDeckView.tsx   | 23 ++++++++++++++++++----
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         |  4 +++-
 3 files changed, 25 insertions(+), 8 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 251771e8e..009a07314 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -738,9 +738,9 @@ pie title Minerals in my tap water
                 { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
                 { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
                 { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-                { title: "Custom 1",    icon: "Custom 1",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(0)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 2",    icon: "Custom 2",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(1)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 3",    icon: "Custom 3",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!isThatCardGroup(2)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 1",    icon: "Custom 1",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 2",    icon: "Custom 2",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 3",    icon: "Custom 3",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
 
             ]
         }
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 8a63fc6d9..2ca03a40d 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -26,6 +26,7 @@ import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import { reaction } from 'mobx';
 import { NumListCast } from '../../../fields/Doc';
 import { undoBatch } from '../../util/UndoManager';
+import { CalendarContainer } from 'react-datepicker';
 @observer
 export class CollectionCardView extends CollectionSubView() {
 
@@ -52,7 +53,7 @@ export class CollectionCardView extends CollectionSubView() {
                     return false;
                 }
                 // Get the group number for the current index from the customGroupDictionary
-                const groupNumber = this.customGroupDictionary[currCustom].get(index);
+                const groupNumber = this.getButtonGroup(currCustom, l.layout)
                 // Check if the group number is in the active groups
                 return groupNumber !== undefined && activeGroups.includes(groupNumber);
             });
@@ -319,8 +320,8 @@ export class CollectionCardView extends CollectionSubView() {
                     break;
 
                 case 'custom':
-                    typeA = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docA)) ?? '9999';
-                    typeB = this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)].get(docs.indexOf(docB)) ?? '9999';
+                    typeA = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docA.layout) ?? '9999'
+                    typeB = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docB.layout) ?? '9999'
                     break;   
                     
                 case 'gpt':
@@ -411,6 +412,7 @@ export class CollectionCardView extends CollectionSubView() {
      * @returns 
      */
     translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) {
+        
         if (realIndex < this.maxRowCount) {
             return 0;
         }
@@ -683,7 +685,7 @@ export class CollectionCardView extends CollectionSubView() {
         const groupNumber = NumCast(this._props.Document.customSortNumber);
     
         let amButtons = 4;
-        let activeButtonIndex = this.customGroupDictionary[groupNumber].get(childPairIndex);
+        let activeButtonIndex = this.getButtonGroup(groupNumber, doc)
     
         if (isChat && doc) {
             if (this.amGPTGroups > 4){
@@ -711,6 +713,19 @@ export class CollectionCardView extends CollectionSubView() {
         );
     }
 
+    getButtonGroup(groupNumber: number, doc: Doc) {
+        switch (groupNumber){
+            case 0:
+                return NumCast(doc.custom1Group)
+            case 1:
+                return NumCast(doc.custom2Group)
+            case 2:
+                return NumCast(doc.custom3Group)
+            default:
+                break
+        }
+    }
+
 
     @computed get translateWrapperX() {
         let translate = 0;
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 3d138fa7d..4fb757d8a 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -156,7 +156,9 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
-
+    /**
+     * Sorts cards in the CollectionCardDeckView
+     */
     generateSort = async () => {
         this.setLoading(true);
         this.setSortDone(false);
-- 
cgit v1.2.3-70-g09d2


From 184d078644806668a213aa7fd4ed242bb24a2932 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Sat, 18 May 2024 03:20:57 -0400
Subject: done fr perchance

---
 src/client/util/CurrentUserUtils.ts                     | 10 +++++-----
 src/client/views/collections/CollectionCardDeckView.tsx | 15 +++++++++++----
 2 files changed, 16 insertions(+), 9 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 009a07314..89f1375bc 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -738,9 +738,9 @@ pie title Minerals in my tap water
                 { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
                 { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
                 { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-                { title: "Custom 1",    icon: "Custom 1",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 2",    icon: "Custom 2",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 3",    icon: "Custom 3",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 1",    icon: "Custom",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 2",    icon: "Custom",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+                { title: "Custom 3",    icon: "Custom",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
 
             ]
         }
@@ -841,8 +841,8 @@ pie title Minerals in my tap water
             { btnList: new List<string>([CollectionViewType.Freeform, CollectionViewType.Schema, CollectionViewType.Tree,
                     CollectionViewType.Stacking, CollectionViewType.Masonry, CollectionViewType.Multicolumn,
                     CollectionViewType.Multirow, CollectionViewType.Time, CollectionViewType.Carousel,
-                    CollectionViewType.Carousel3D, CollectionViewType.Linear, CollectionViewType.Map,
-                    CollectionViewType.Grid, CollectionViewType.NoteTaking, CollectionViewType.Card]),
+                    CollectionViewType.Carousel3D, CollectionViewType.Card, CollectionViewType.Linear, CollectionViewType.Map,
+                    CollectionViewType.Grid, CollectionViewType.NoteTaking, ]),
               title: "Perspective",                    toolTip: "View",                 btnType: ButtonType.DropdownList,                                                                                                                                    ignoreClick: true, width: 100, scripts: { script:  'setView(value, _readOnly_)'}},
             { title: "Pin",     icon: "map-pin",       toolTip: "Pin View to Trail",    btnType: ButtonType.ClickButton,         expertMode: false,                                                                                                                             width: 30,  scripts: { onClick: 'pinWithView(altKey)'}, funcs: {hidden: "IsNoneSelected()"}},
             { title: "Header",  icon: "heading",       toolTip: "Doc Titlebar Color",   btnType: ButtonType.ColorButton,         expertMode: false,                                                                                                          ignoreClick: true,             scripts: { script:  'return setHeaderColor(value, _readOnly_)'} },
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 2ca03a40d..f2da61844 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -325,8 +325,8 @@ export class CollectionCardView extends CollectionSubView() {
                     break;   
                     
                 case 'gpt':
-                    typeA = this.gptGroups.get(docA.layout) ?? '9999';
-                    typeB = this.gptGroups.get(docB.layout) ?? '9999';
+                    typeA = this.getButtonGroup(99999, docA.layout, true) ?? '9999';
+                    typeB = this.getButtonGroup(99999, docB.layout, true) ?? '9999';
                     break;  
 
                 default:
@@ -648,6 +648,7 @@ export class CollectionCardView extends CollectionSubView() {
                     const doc = this.textToDoc.get(part);
                     if (doc) {
                         this.gptGroups.set(doc, index);
+                        doc.chatGroup = index
                     }
                 }
             });
@@ -691,7 +692,7 @@ export class CollectionCardView extends CollectionSubView() {
             if (this.amGPTGroups > 4){
                 amButtons = this.amGPTGroups;
             }
-            activeButtonIndex = this.gptGroups.get(doc);
+            activeButtonIndex = this.getButtonGroup(9999, doc, true);
         }
     
         for (let i = 0; i < amButtons; i++) {
@@ -713,7 +714,11 @@ export class CollectionCardView extends CollectionSubView() {
         );
     }
 
-    getButtonGroup(groupNumber: number, doc: Doc) {
+    getButtonGroup(groupNumber: number, doc: Doc, isChat?: boolean) {
+        if (isChat){
+            return NumCast(doc.chatGroup)
+        }
+        
         switch (groupNumber){
             case 0:
                 return NumCast(doc.custom1Group)
@@ -724,6 +729,8 @@ export class CollectionCardView extends CollectionSubView() {
             default:
                 break
         }
+
+        
     }
 
 
-- 
cgit v1.2.3-70-g09d2


From 38d2d361aa723917b5721e2635933d2d8b9f483a Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 18 May 2024 22:57:22 -0400
Subject: updated cardDeckView code

---
 src/client/util/CurrentUserUtils.ts                |  59 +-
 .../views/collections/CollectionCardDeckView.scss  |  25 +-
 .../views/collections/CollectionCardDeckView.tsx   | 859 ++++++++-------------
 src/client/views/global/globalScripts.ts           | 105 +--
 4 files changed, 373 insertions(+), 675 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 89f1375bc..f2a7f953d 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -715,48 +715,35 @@ pie title Minerals in my tap water
         ]
     }
     static cardTools(): Button[] {
-       
-
-    //     if (view != undefined){
-    //         for (let i=0; i< NumCast(view.layoutDoc.customSortCount); i++){
-    //             customs.push(   
-    //                 { title: "Custom " + i,   icon:"robot", toolTip:"Custom sort option " + i,  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}
-    //             )
-
-    //         }
-    // }
         return [
-            { title: "Time",   icon:"hourglass-half", toolTip:"Sort by most recent document creation",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Type",   icon:"eye", toolTip:"Sort by document type",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Color",   icon:"palette", toolTip:"Sort by document color",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "Smart Sort",   icon:"robot", toolTip:"Have ChatGPT sort your text-based nodes !",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"chat",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Time",      icon:"hourglass-half", toolTip:"Sort by most recent document creation",      btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"time",   funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Type",      icon:"eye",            toolTip:"Sort by document type",                      btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"docType",funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Color",     icon:"palette",        toolTip:"Sort by document color",                     btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"color",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+         ]
+    }
+    static labelTools(): Button[] {
+        return [
+            { title: "AI",    icon:"robot",     toolTip:"Add AI labels",           btnType: ButtonType.ToggleButton,          expertMode: false, toolType:"chat",                  funcs: {hidden:`showFreeform ("chat", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "AIs",   icon:"AI Sort",   toolTip:"Filter AI labels",        subMenu: this.cardGroupTools("chat"),      expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("chat", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} },
+            { title: "Like",  icon:"heart",     toolTip:"Add Like labels",         btnType: ButtonType.ToggleButton,          expertMode: false, toolType:"like",                  funcs: {hidden:`showFreeform ("like", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Likes", icon:"Likes",     toolTip:"Filter likes", width: 10, subMenu: this.cardGroupTools("heart"),     expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("like", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} },
+            { title: "Star",  icon:"star",      toolTip:"Add Star labels",         btnType: ButtonType.ToggleButton,          expertMode: false, toolType:"star",                  funcs: {hidden:`showFreeform ("star", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Stars", icon:"Stars",     toolTip:"Filter stars", width: 80, subMenu: this.cardGroupTools("star"),      expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("star", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, 
+            { title: "Idea",  icon:"satellite", toolTip:"Add Idea labels",         btnType: ButtonType.ToggleButton,          expertMode: false, toolType:"idea",                  funcs: {hidden:`showFreeform ("idea", true)`},scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "Ideas", icon:"Ideas",     toolTip:"Filter ideas", width: 80, subMenu: this.cardGroupTools("satellite"), expertMode: false, toolType:CollectionViewType.Card, funcs: {hidden:`!showFreeform("idea", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} },
         ]
     }
-
-    static customCardTools(): Button[] {
-            return [
-                { title: "Create",   icon:"heart", toolTip:"Create your first custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-                { title: "Create",   icon:"star", toolTip:"Create your second custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-                { title: "Create",   icon:"satellite", toolTip:"Create your third custom grouping!",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"custom3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-                { title: "Custom 1",    icon: "Custom",    width: 10,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("heart"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom1", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 2",    icon: "Custom",     width: 80,    toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("star"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom2", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-                { title: "Custom 3",    icon: "Custom",      width: 80,   toolTip: "Set visibilty!",     subMenu: CurrentUserUtils.cardGroupTools("satellite"),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!showFreeform("custom3", true)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-
-            ]
-        }
-
     static cardGroupTools(icon: string): Button[] {
         return [
-            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"1",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"2",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"3",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-            { title: "",   icon:icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"4",    funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
-
+            { title: "1", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"1", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "2", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"2", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "3", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"3", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "4", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"4", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "5", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"5", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "6", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"6", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
+            { title: "7", icon, toolTip:"Click to toggle visibility",  btnType: ButtonType.ToggleButton,  expertMode: false, toolType:"7", funcs: {hidden:`!cardHasLabel(this.toolType)`}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}},
         ]
     }
-
-    
-
     static viewTools(): Button[] {
         return [
             { title: "Snap",      icon: "th",                  toolTip: "Show Snap Lines",     btnType: ButtonType.ToggleButton, ignoreClick: true, expertMode: false, toolType:"snaplines",  funcs: {}, scripts: { onClick: '{ return showFreeform(this.toolType, _readOnly_);}'}}, // Only when floating document is selected in freeform
@@ -858,7 +845,7 @@ pie title Minerals in my tap water
             { title: "View",    icon: "View",          toolTip: "View tools",           subMenu: CurrentUserUtils.viewTools(),   expertMode: false, toolType:CollectionViewType.Freeform, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Stack",   icon: "View",          toolTip: "Stacking tools",       subMenu: CurrentUserUtils.stackTools(),  expertMode: false, toolType:CollectionViewType.Stacking, funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Card",    icon: "Sort",          toolTip: "Card sort",            subMenu: CurrentUserUtils.cardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
-            { title: "CustomCard",    icon: "Create",        toolTip: "Create custom groupings!",     subMenu: CurrentUserUtils.customCardTools(),   expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
+            { title: "Label",   icon: "Label",         toolTip: "Assign card labels",   subMenu: CurrentUserUtils.labelTools(),  expertMode: false, toolType:CollectionViewType.Card,     funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Always available
             { title: "Web",     icon: "Web",           toolTip: "Web functions",        subMenu: CurrentUserUtils.webTools(),    expertMode: false, toolType:DocumentType.WEB,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when Web is selected
             { title: "Video",   icon: "Video",         toolTip: "Video functions",      subMenu: CurrentUserUtils.videoTools(),  expertMode: false, toolType:DocumentType.VID,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when video is selected
             { title: "Image",   icon: "Image",         toolTip: "Image functions",      subMenu: CurrentUserUtils.imageTools(),  expertMode: false, toolType:DocumentType.IMG,            funcs: {hidden: `!SelectionManager_selectedDocType(this.toolType, this.expertMode)`, linearView_IsOpen: `SelectionManager_selectedDocType(this.toolType, this.expertMode)`} }, // Only when image is selected
diff --git a/src/client/views/collections/CollectionCardDeckView.scss b/src/client/views/collections/CollectionCardDeckView.scss
index babc604b5..a089b248d 100644
--- a/src/client/views/collections/CollectionCardDeckView.scss
+++ b/src/client/views/collections/CollectionCardDeckView.scss
@@ -12,6 +12,7 @@
     display: grid;
     grid-template-columns: repeat(10, 1fr);
     // width: 100%;
+    transform-origin: top left;
 
     position: absolute;
     align-items: center;
@@ -22,15 +23,15 @@
 }
 
 .card-button-container {
-    display: flex;         
+    display: flex;
     padding: 3px;
-    // width: 300px;        
+    // width: 300px;
     background-color: rgb(218, 218, 218); /* Background color of the container */
-    border-radius: 50px;    /* Rounds the corners of the container */
-    transform: translateY(-50px); 
+    border-radius: 50px; /* Rounds the corners of the container */
+    transform: translateY(75px);
     // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
-    align-items: center;    /* Centers buttons vertically */
-    justify-content: start;/* Centers buttons horizontally */
+    align-items: center; /* Centers buttons vertically */
+    justify-content: start; /* Centers buttons horizontally */
 }
 
 button {
@@ -39,11 +40,11 @@ button {
     border-radius: 50%;
     background-color: $dark-gray;
     // border-color: $medium-blue;
-    margin: 5px;    // transform: translateY(-50px); 
+    margin: 5px; // transform: translateY(-50px);
 }
 
 // button:hover {
-//     transform: translateY(-50px); 
+//     transform: translateY(-50px);
 // }
 
 // .card-wrapper::after {
@@ -62,13 +63,19 @@ button {
 //     align-items: center;
 //     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 
-
 // }
 
+.card-item-inactive,
 .card-item-active,
 .card-item {
     position: relative;
     transition: transform 0.5s ease-in-out;
+    display: flex;
+    flex-direction: column;
+}
+
+.card-item-inactive {
+    opacity: 0.5;
 }
 
 .card-item-active {
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index b2a94c3c6..9e5668ffa 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -1,182 +1,173 @@
-import { ObservableMap, action, computed, makeObservable, observable } from 'mobx';
+import { IReactionDisposer, ObservableMap, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { Utils, returnFalse, returnTrue, returnZero } from '../../../Utils';
-import { Doc, DocListCast, Field, StrListCast } from '../../../fields/Doc';
+import { DashColor, Utils, numberRange, returnFalse, returnZero } from '../../../Utils';
+import { Doc, NumListCast } from '../../../fields/Doc';
+import { DocData } from '../../../fields/DocSymbols';
 import { Id } from '../../../fields/FieldSymbols';
-import { NumCast, ScriptCast, StrCast, BoolCast, DocCast, RTFCast, Cast} from '../../../fields/Types';
+import { BoolCast, Cast, DateCast, NumCast, RTFCast, ScriptCast, StrCast } from '../../../fields/Types';
+import { URLField } from '../../../fields/URLField';
+import { gptImageLabel } from '../../apis/gpt/GPT';
+import { DocumentType } from '../../documents/DocumentTypes';
 import { DragManager } from '../../util/DragManager';
 import { SelectionManager } from '../../util/SelectionManager';
+import { SnappingManager } from '../../util/SnappingManager';
+import { Transform } from '../../util/Transform';
+import { undoable } from '../../util/UndoManager';
 import { StyleProp } from '../StyleProvider';
 import { DocumentView } from '../nodes/DocumentView';
+import { GPTPopup, GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
 import './CollectionCardDeckView.scss';
 import { CollectionSubView } from './CollectionSubView';
-import { Transform } from '../../util/Transform';
-import { LinkManager } from '../../util/LinkManager';
-// import Card from 'react-bootstrap/Card';
-import { DocumentType } from '../../documents/DocumentTypes';
-import { forEach } from 'lodash';
-import { SnappingManager } from '../../util/SnappingManager';
-import { List } from '../../../fields/List';
-import { gptAPICall, gptImageLabel } from '../../apis/gpt/GPT';
-import { GPTCallType } from '../../apis/gpt/GPT';
-import { ImageField, PdfField, URLField } from '../../../fields/URLField';
-import { GPTPopup } from '../pdf/GPTPopup/GPTPopup';
-import { GPTPopupMode } from '../pdf/GPTPopup/GPTPopup';
-import { reaction } from 'mobx';
-import { NumListCast } from '../../../fields/Doc';
-import { undoBatch } from '../../util/UndoManager';
-import { CalendarContainer } from 'react-datepicker';
+
+enum cardSortings {
+    Time = 'time',
+    Type = 'type',
+    Color = 'color',
+    Custom = 'custom',
+    None = '',
+}
 @observer
 export class CollectionCardView extends CollectionSubView() {
+    private _dropDisposer?: DragManager.DragDropDisposer;
+    private _childDocumentWidth = 600; // target width of a Doc...
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _textToDoc = new Map<string, Doc>();
 
-    @observable hoveredNodeIndex = -1;
-
-    //key is the index in the child pair list, value is the id# for the group its in
-    @observable customGroupDictionary: Map<number, number>[] = [new Map<number, number>(), new Map<number, number>(), new Map<number, number>()];
-
-    /**
-     * The child documents to be rendered-- either all of them except the Links or the docs in the currently active 
-     * custom group
-     */
-    @computed get myChildLayoutPairs() {
-        let activeGroups = NumListCast(this._props.Document.visibleGroupNumbers);
-        let currCustom = NumCast(this._props.Document.customSortNumber);
-
-        if (activeGroups.length <= 0) {
-            return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK);
-        }
-
-        if (StrCast(this._props.Document.cardSort).includes("custom")) {
-            return this.childLayoutPairs.filter((l, index) => {
-                if (l.layout.type === DocumentType.LINK) {
-                    return false;
-                }
-                // Get the group number for the current index from the customGroupDictionary
-                const groupNumber = this.getButtonGroup(currCustom, l.layout)
-                // Check if the group number is in the active groups
-                return groupNumber !== undefined && activeGroups.includes(groupNumber);
-            });
-        }
+    @observable _forceChildXf = false;
+    @observable _isLoading = false;
+    @observable _hoveredNodeIndex = -1;
+    @observable _docRefs = new ObservableMap<Doc, DocumentView>();
+    @observable _maxRowCount = 10;
 
-        // Default return for non-custom cardSort or other cases, filtering out links
-        return this.childLayoutPairs.filter(l => l.layout.type != DocumentType.LINK);
+    static getButtonGroup(groupFieldKey: 'chat' | 'star' | 'idea' | 'like', doc: Doc): number | undefined {
+        return Cast(doc[groupFieldKey], 'number', null);
     }
 
+    static imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
+        try {
+            const response = await fetch(imageUrl);
+            const blob = await response.blob();
 
-    @action
-    setHoveredNodeIndex = (index: number) => {
-        if (!this.isSelected(index)) {
-            this.hoveredNodeIndex = index;
-        }
-    };
-    /**
-     * Translates the hovered node to the center of the screen
-     * @param index 
-     * @returns 
-     */
-    translateHover = (index: number): number => {
-        if (this.hoveredNodeIndex == index && !this.isSelected(index)) {
-            return -50;
+            return new Promise((resolve, reject) => {
+                const reader = new FileReader();
+                reader.readAsDataURL(blob);
+                reader.onloadend = () => resolve(reader.result as string);
+                reader.onerror = error => reject(error);
+            });
+        } catch (error) {
+            console.error('Error:', error);
+            throw error;
         }
-        return 0;
     };
 
-    @action
-    setSelectedNodeIndex = (index: number) => {
-        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-        if (SelectionManager.IsSelected(docs[index])) {
-            this.setSelectedNodeIndex(index);
+    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
+        this._dropDisposer?.();
+        if (ele) {
+            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
         }
     };
 
-    isSelected = (index: number): boolean => {
-        const docs = DocListCast(this.Document[this.fieldKey ?? Doc.LayoutFieldKey(this.Document)]);
-        return SelectionManager.IsSelected(docs[index]);
-    };
-
-    /**
-     * Returns all the documents except the one that's currently selected
-     */
-    inactiveDocs = () => {
-        const docs = this.myChildLayoutPairs;    
-        return docs.filter(d => !SelectionManager.IsSelected(d.layout));   
-    };
-
-    middleIndex = Math.floor(this.inactiveDocs().length / 2);
-
     constructor(props: any) {
         super(props);
         makeObservable(this);
-        const pairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK);
+    }
 
-        //gets the values from the last time the view was loaded and puts them into their respective places in the hashmaps(s)
-        for (let i=0; i< pairs.length; i++){
-            if (pairs[i].layout.custom1Group != undefined){
-                this.customGroupDictionary[0].set(i, NumCast(pairs[i].layout.custom1Group))
-            }
+    componentDidMount(): void {
+        this._disposers.sort = reaction(
+            () => ({ cardSort: this.cardSort, field: this.customSortField }),
+            ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false))
+        );
+    }
 
-            if (pairs[i].layout.custom2Group != undefined){
-                this.customGroupDictionary[1].set(i, NumCast(pairs[i].layout.custom2Group))
-            }
+    componentWillUnmount() {
+        Object.keys(this._disposers).forEach(key => this._disposers[key]?.());
+        this._dropDisposer?.();
+    }
 
-            if (pairs[i].layout.custom3Group != undefined){
-                this.customGroupDictionary[2].set(i, NumCast(pairs[i].layout.custom3Group))
-            }
+    @computed get customSortField() {
+        return StrCast(this.Document.customSortField) as any as 'chat' | 'star' | 'idea' | 'like';
+    }
 
-            if (pairs[i].layout.chatGroup != undefined){
-                this.gptGroups.set(pairs[i].layout, NumCast(pairs[i].layout.chatGroup))
-                this.amGPTGroups = NumCast(this._props.Document.chatAmGroups)
+    @computed get cardSort() {
+        return StrCast(this.Document.cardSort) as any as cardSortings;
+    }
+    /**
+     * how much to scale down the contents of the view so that everything will fit
+     */
+    @computed get fitContentScale() {
+        const length = Math.min(this.childDocsWithoutLinks.length, this._maxRowCount);
+        return (this._childDocumentWidth * length) / this._props.PanelWidth();
+    }
 
-            }
+    @computed get translateWrapperX() {
+        let translate = 0;
+
+        if (this.inactiveDocs().length !== this.childDocsWithoutLinks.length && this.inactiveDocs().length < 10) {
+            translate += this.panelWidth() / 2;
         }
-        reaction(
-            () => this._props.Document.cardSort,
-            (cardSort) => {
-                if (cardSort === 'chat') {
-                    this.openChatPopup();
-                }
-            }
-        );
+        return translate;
     }
 
-    private _dropDisposer?: DragManager.DragDropDisposer;
+    /**
+     * The child documents to be rendered-- either all of them except the Links or the docs in the currently active
+     * custom group
+     */
+    @computed get childDocsWithoutLinks() {
+        const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK);
+        const activeGroups = NumListCast(this.Document.visibleGroupNumbers);
+
+        if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) {
+            return regularDocs.filter(doc => {
+                // Get the group number for the current index
+                const groupNumber = CollectionCardView.getButtonGroup(this.customSortField, doc);
+                // Check if the group number is in the active groups
+                return groupNumber !== undefined && activeGroups.includes(groupNumber);
+            });
+        }
 
-    componentWillUnmount() {
-        this._dropDisposer?.();
+        // Default return for non-custom cardSort or other cases, filtering out links
+        return regularDocs;
     }
 
-    protected createDashEventsTarget = (ele: HTMLDivElement | null) => {
-        this._dropDisposer?.();
-        if (ele) {
-            this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.layoutDoc);
+    /**
+     * Determines the order in which the cards will be rendered depending on the current sort type
+     */
+    @computed get sortedDocs() {
+        return this.sort(this.childDocsWithoutLinks, this.cardSort, BoolCast(this.layoutDoc.sortDesc));
+    }
+
+    @action
+    setHoveredNodeIndex = (index: number) => {
+        if (!SelectionManager.IsSelected(this.childDocs[index])) {
+            this._hoveredNodeIndex = index;
         }
     };
+    /**
+     * Translates the hovered node to the center of the screen
+     * @param index
+     * @returns
+     */
+    translateHover = (index: number) => (this._hoveredNodeIndex === index && !SelectionManager.IsSelected(this.childDocs[index]) ? -50 : 0);
+
+    isSelected = (index: number) => SelectionManager.IsSelected(this.childDocs[index]);
 
-    childDocumentWidth = 600; // target width of a Doc...
     /**
-     * how much to scale down the contents of the view so that everything will fit
+     * Returns all the documents except the one that's currently selected
      */
-    @computed get fitContentScale() {
-        if (this.myChildLayoutPairs.length < this.maxRowCount) {
-            length = this.myChildLayoutPairs.length;
-        } else {
-            length = this.maxRowCount;
-        }
-        return (this.childDocumentWidth * length) / this._props.PanelWidth();
-    }
+    inactiveDocs = () => this.childDocsWithoutLinks.filter(d => !SelectionManager.IsSelected(d));
 
-    panelWidth = () => this.childDocumentWidth;
-    panelHeight = (layout: Doc) => () => (2 * (this.panelWidth() * NumCast(layout._height))) / NumCast(layout._width);
+    panelWidth = () => this._childDocumentWidth;
+    panelHeight = (layout: Doc) => () => (this.panelWidth() * NumCast(layout._height)) / NumCast(layout._width);
     onChildDoubleClick = () => ScriptCast(this.layoutDoc.onChildDoubleClick);
     isContentActive = () => this._props.isSelected() || this._props.isContentActive() || this._props.isAnyChildContentActive();
     isChildContentActive = () => (this.isContentActive() ? true : false);
 
     /**
      * Returns the degree to rotate a card dependind on the amount of cards in their row and their index in said row
-     * @param amCards 
-     * @param index 
-     * @returns 
+     * @param amCards
+     * @param index
+     * @returns
      */
     rotate = (amCards: number, index: number) => {
         const possRotate = -30 + index * (30 / ((amCards - (amCards % 2)) / 2));
@@ -184,7 +175,8 @@ export class CollectionCardView extends CollectionSubView() {
 
         if (amCards % 2 == 0 && possRotate == 0) {
             return possRotate + Math.abs(-30 + (index - 1) * (30 / (amCards / 2)));
-        } else if (amCards % 2 == 0 && index > (amCards + 1) / 2) {
+        }
+        if (amCards % 2 == 0 && index > (amCards + 1) / 2) {
             return possRotate + stepMag;
         }
 
@@ -197,26 +189,25 @@ export class CollectionCardView extends CollectionSubView() {
         const evenOdd = amCards % 2;
         const apex = (amCards - evenOdd) / 2;
         const stepMag = 200 / ((amCards - evenOdd) / 2) + Math.abs((apex - index) * 25);
-        let rowOffset = 0;
 
-        if (realIndex > this.maxRowCount - 1) {
-            rowOffset = 400 * ((realIndex - (realIndex % this.maxRowCount)) / this.maxRowCount);
+        let rowOffset = 0;
+        if (realIndex > this._maxRowCount - 1) {
+            rowOffset = 400 * ((realIndex - (realIndex % this._maxRowCount)) / this._maxRowCount);
         }
         if (evenOdd == 1 || index < apex - 1) {
             return Math.abs(stepMag * (apex - index)) - rowOffset;
-        } else {
-            if (index == apex || index == apex - 1) {
-                return 0 - rowOffset;
-            }
-
-            return Math.abs(stepMag * (apex - index - 1)) - rowOffset;
         }
+        if (index == apex || index == apex - 1) {
+            return 0 - rowOffset;
+        }
+
+        return Math.abs(stepMag * (apex - index - 1)) - rowOffset;
     };
 
     /**
      * Translates the selected node to the middle fo the screen
-     * @param index 
-     * @returns 
+     * @param index
+     * @returns
      */
     translateSelected = (index: number): number => {
         // if (this.isSelected(index)) {
@@ -234,126 +225,46 @@ export class CollectionCardView extends CollectionSubView() {
         return translation;
     };
 
-    /**
-     * Determines the order in which the cards will be rendered depending on the current sort type
-     */
-    @computed get sortedDocsType() {
-        const desc = BoolCast(this.layoutDoc.sortDesc);
-        let sorted = [];
-        let docs = [];
-    
-        for (let i = 0; i < this.myChildLayoutPairs.length; i++) {
-            //copying everything in childlayout pairs to sorted so that i can use the sort function without altering the original list
-            sorted[i] = this.myChildLayoutPairs[i];
-        }
-    
-        switch (this._props.Document.cardSort) {
-            case 'type':
-                // Copy and sort documents by type
-                return this.sort(sorted, 'type', desc);
-            case 'color':
-                return this.sort(sorted, 'color', desc);
-            case 'custom':
-                return this.sort(sorted, 'custom', desc);
-            case 'chat':
-                return this.sort(this.myChildLayoutPairs, 'gpt', BoolCast(this.layoutDoc.sortDesc));            
-                
-            default:
-                docs = this.myChildLayoutPairs;
-                return { docs };
-        }
-    }
-     /**
-      * Converts a hex # to its hsv color value
-      * @param hex 
-      * @returns 
-      */
-    hexToHsv = (hex: string): [number, number, number] => {
-        if (!hex) return [0, 0, 0]; // Default to black if hex is not defined
-        const r = parseInt(hex.slice(1, 3), 16) / 255;
-        const g = parseInt(hex.slice(3, 5), 16) / 255;
-        const b = parseInt(hex.slice(5, 7), 16) / 255;
-        const max = Math.max(r, g, b),
-            min = Math.min(r, g, b);
-        const d = max - min;
-        let h: number;
-        const s = max === 0 ? 0 : d / max;
-        const v = max;
-
-        switch (max) {
-            case min:
-                h = 0;
-                break;
-            case r:
-                h = (g - b) / d + (g < b ? 6 : 0);
-                break;
-            case g:
-                h = (b - r) / d + 2;
-                break;
-            case b:
-                h = (r - g) / d + 4;
-                break;
-            default:
-                h = 0;
-                break;
-        }
-        h /= 6;
-        return [h, s, v];
-    };
     /**
      * Called in the sortedDocsType method. Compares the cards' value in regards to the desired sort type-- earlier cards are move to the
      * front, latter cards to the back
-     * @param docs 
-     * @param sortType 
-     * @param isDesc 
-     * @returns 
+     * @param docs
+     * @param sortType
+     * @param isDesc
+     * @returns
      */
-    sort = (docs: { layout: Doc; data: Doc }[], sortType: string, isDesc: boolean) => {
+    sort = (docs: Doc[], sortType: cardSortings, isDesc: boolean) => {
+        if (sortType === cardSortings.None) return docs;
         docs.sort((docA, docB) => {
-            let typeA;
-            let typeB;
-
-            switch (sortType) {
-                case 'color':
-                    typeA = this.hexToHsv(StrCast(docA.layout.backgroundColor)) ?? ''; // If docA.type is undefined, use an empty string
-                    typeB = this.hexToHsv(StrCast(docB.layout.backgroundColor)) ?? ''; // If docB.type is undefined, use an empty string
-                    break;
-
-                case 'custom':
-                    typeA = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docA.layout) ?? '9999'
-                    typeB = this.getButtonGroup(NumCast(this._props.Document.customSortNumber), docB.layout) ?? '9999'
-                    break;   
-                    
-                case 'gpt':
-                    typeA = this.getButtonGroup(99999, docA.layout, true) ?? '9999';
-                    typeB = this.getButtonGroup(99999, docB.layout, true) ?? '9999';
-                    break;  
-
-                default:
-                    typeA = docA.layout.type ?? ''; // If docA.type is undefined, use an empty string
-                    typeB = docB.layout.type ?? ''; // If docB.type is undefined, use an empty string
-                    break;
-            }
-
-            // Perform a basic string comparison if types are strings
-            let out = 0;
-            if (typeA < typeB) out = -1;
-            if (typeA > typeB) out = 1;
-            if (isDesc) out *= -1; // Reverse the sort order if descending is true
-            return out;
+            const [typeA, typeB] = (() => {
+                switch (sortType) {
+                    case cardSortings.Time: 
+                                return   [DateCast(docA.author_date)?.date ?? Date.now(),
+                                          DateCast(docB.author_date)?.date ?? Date.now()];
+                    case cardSortings.Color: 
+                                  return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string
+                                          DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string
+                    case cardSortings.Custom:
+                                  return [CollectionCardView.getButtonGroup(this.customSortField, docA)??0,
+                                          CollectionCardView.getButtonGroup(this.customSortField, docB)??0];
+                    default:      return [StrCast(docA.type), // If docA.type is undefined, use an empty string
+                                          StrCast(docB.type)]; // If docB.type is undefined, use an empty string
+                    } // prettier-ignore
+            })();
+
+            const out = typeA < typeB ? -1 : typeA > typeB ? 1 : 0;
+            return isDesc ? -out : out; // Reverse the sort order if descending is true
         });
 
-        return { docs };
+        return docs;
     };
 
-
-    displayDoc = (childPair: { layout: Doc; data: Doc }, screenToLocalTransform: () => Transform) => {
+    displayDoc = (doc: Doc, screenToLocalTransform: () => Transform) => {
         return (
             <DocumentView
                 {...this._props}
-                ref={action((r: DocumentView) => r?.ContentDiv && this.docRefs.set(childPair.layout, r))}
-                Document={childPair.layout}
-                TemplateDataDocument={childPair.data}
+                ref={action((r: DocumentView) => r?.ContentDiv && this._docRefs.set(doc, r))}
+                Document={doc}
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
                 layout_fitWidth={returnFalse}
@@ -365,382 +276,219 @@ export class CollectionCardView extends CollectionSubView() {
                 isContentActive={this.isChildContentActive}
                 isDocumentActive={this._props.childDocumentsActive?.() || this.Document._childDocumentsActive ? this._props.isDocumentActive : this.isContentActive}
                 PanelWidth={this.panelWidth}
-                PanelHeight={this.panelHeight(childPair.layout)}
+                PanelHeight={this.panelHeight(doc)}
             />
         );
     };
 
-    @observable docRefs = new ObservableMap<Doc, DocumentView>();
-
-    @observable maxRowCount = 10;
-
     /**
      * Determines how many cards are in the row of a card at a specific index
-     * @param index 
-     * @returns 
+     * @param index
+     * @returns
      */
-    overflowAmCardsCalc(index: number) {
-        if (this.inactiveDocs().length < this.maxRowCount) {
+    overflowAmCardsCalc = (index: number) => {
+        if (this.inactiveDocs().length < this._maxRowCount) {
             return this.inactiveDocs().length;
         }
         // 13 - 3 = 10
         const totalCards = this.inactiveDocs().length;
         // if 9 or less
         if (index < totalCards - (totalCards % 10)) {
-            return this.maxRowCount;
+            return this._maxRowCount;
         }
         //(3)
         return totalCards % 10;
-    }
+    };
     /**
      * Determines the index a card is in in a row
-     * @param realIndex 
-     * @returns 
+     * @param realIndex
+     * @returns
      */
-    overflowIndexCalc(realIndex: number) {
-        if (realIndex < 10) {
-            return realIndex;
-        }
-
-        return realIndex % 10;
-    }
+    overflowIndexCalc = (realIndex: number) => realIndex % 10;
     /**
      * Translates the cards in the second rows and beyond over to the right
-     * @param realIndex 
-     * @param calcIndex 
-     * @param calcRowCards 
-     * @returns 
+     * @param realIndex
+     * @param calcIndex
+     * @param calcRowCards
+     * @returns
      */
-    translateOverflowX(realIndex: number, calcIndex: number, calcRowCards: number) {
-        
-        if (realIndex < this.maxRowCount) {
-            return 0;
-        }
+    translateOverflowX = (realIndex: number, calcRowCards: number) => (realIndex < this._maxRowCount ? 0 : (10 - calcRowCards) * (this.panelWidth() / 2));
 
-        return (10 - calcRowCards) * (this.panelWidth() / 2);
-    }
     /**
      * Determines how far to translate a card in the y direction depending on its index, whether or not its being hovered, or if it's selected
-     * @param isHovered 
-     * @param isSelected 
-     * @param realIndex 
-     * @param amCards 
-     * @param calcRowIndex 
-     * @returns 
+     * @param isHovered
+     * @param isSelected
+     * @param realIndex
+     * @param amCards
+     * @param calcRowIndex
+     * @returns
      */
-    calculateTranslateY(isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) {
-        let trans = 0;
-        if (isHovered) {
-            trans += this.translateHover(realIndex);
-        }
-
-        trans += this.translateY(amCards, calcRowIndex, realIndex);
-        if (isSelected) {
-            trans = 50 * this.fitContentScale;
-        }
-        return trans;
-    }
-
-    @observable _forceChildXf = false;
+    calculateTranslateY = (isHovered: boolean, isSelected: boolean, realIndex: number, amCards: number, calcRowIndex: number) => {
+        if (isSelected) return 50 * this.fitContentScale;
+        const trans = isHovered ? this.translateHover(realIndex) : 0;
+        return trans + this.translateY(amCards, calcRowIndex, realIndex);
+    };
 
     /**
-     * Actually renders all the cards
+     * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt
+     * @param childPairIndex
+     * @param buttonID
+     * @param doc
      */
-    @computed get contentSorted() {
-        const sortedDocs = this.sortedDocsType.docs;
-        // Map sorted documents to their rendered components
-        return sortedDocs.map((childPair, index) => {
-
-            const isHovered = this.hoveredNodeIndex === index;
-            const childPairIndex  = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK).indexOf(childPair)
-            const realIndex = this.sortedDocsType.docs.filter(d => !SelectionManager.IsSelected(d.layout)).indexOf(childPair);
-            const calcRowIndex = this.overflowIndexCalc(realIndex);
-
-            const amCards = this.overflowAmCardsCalc(realIndex);
-
-            const isSelected = SelectionManager.IsSelected(childPair.layout);
-
-            const childScreenToLocal = () => {
-                this._forceChildXf;
-                const dref = this.docRefs.get(childPair.layout);
-                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
-                return new Transform(-translateX + (dref?.centeringX || 0) * scale, -translateY + (dref?.centeringY || 0) * scale, 1).scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0);
-            };
-
-            return (
-                <div
-                    key={childPair.layout[Id]}
-                    className={`card-item${isSelected ? '-active' : ''}`}
-                    onPointerUp={e => {
-                        SnappingManager.SetIsResizing(this.Document);
-                        setTimeout(
-                            action(() => {
-                                SnappingManager.SetIsResizing(undefined);
-                                this._forceChildXf = !this._forceChildXf;
-                            }),
-                            700
-                        );
-                    }}
-                    style={{
-                        width: this.panelWidth(),
-                        height: this.panelHeight(childPair.layout)(),
-                        transform: `
-                        translateY(${this.calculateTranslateY(isHovered, isSelected, realIndex, amCards, calcRowIndex)}px)
-                        translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, calcRowIndex, amCards)}px)
-                        rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
-                        scale(${isSelected ? 1.25 : 1})
-                        `,
-                    }}
-                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
-                    {this.displayDoc(childPair, childScreenToLocal)}
-
-                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex, childPair.layout, false) : ''}
-                    {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''}
-
-                </div>
-            );
-        });
-    }
+    toggleButton = undoable((buttonID: number, doc: Doc) => this.customSortField && (doc[this.customSortField] = buttonID), 'toggle custom button');
 
     /**
-     * Toggles the buttons between on and off when creating custom sort groupings/changing those created by gpt 
-     * @param childPairIndex 
-     * @param buttonID 
-     * @param isChat 
-     * @param doc 
-     */
-  
-    @undoBatch
-    @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc: Doc) {
-        if (!isChat) {
-            const sortNumber = NumCast(this._props.Document.customSortNumber)
-            this.customGroupDictionary[sortNumber].set(childPairIndex, buttonID)
-            switch (sortNumber){
-                case 0:
-                    doc.custom1Group = buttonID
-                    break
-                case 1:
-                    doc.custom2Group = buttonID
-                    break
-                case 2:
-                    doc.custom3Group = buttonID
-                    break
-                default:
-                    break
-            }
-        }
-    
-        if (isChat && doc) {
-            this.gptGroups.set(doc, buttonID);
-            doc.chatGroup = buttonID
-        }
-    }
-    
-    /**
-     * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words. 
+     * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words.
      * Image documents are converted to bse64 and gpt generates a description for them. all other documents use their title. This string is
-     * inputted into the gpt prompt to sort everything together 
-     * @returns 
+     * inputted into the gpt prompt to sort everything together
+     * @returns
      */
-    async childPairStringList(): Promise<string> {
-        let string = "";
-        for (let i = 0; i < this.childDocs.length; i++) {
-            switch (this.childDocs[i].type) {
-                case DocumentType.IMG:
-                    string += `======${await this.getImageDesc(this.childDocs[i])}======`;
-                    break;
-    
-                case DocumentType.PDF:
-                    let pdfText = StrCast(this.childDocs[i].text);
-                    let words = pdfText.split(/\s+/);
-                    let first50Words = words.slice(0, 50);
-                    string += `======${first50Words.join(' ')}======`;
-    
-                    this.textToDoc.set(first50Words.join(' ').trim(), this.childDocs[i]);
-                    break;
-    
-                case DocumentType.RTF:
-                    let rtfText = StrCast((RTFCast(this.childDocs[i].text)).Text);
-                    string += `======${StrCast((RTFCast(this.childDocs[i].text)).Text)}======`;
-                    this.textToDoc.set(rtfText.trim(), this.childDocs[i]);
-                    break;
-    
-                default:
-                    string += `======${StrCast(this.childDocs[i].title)}======`;
-                    this.textToDoc.set(StrCast(this.childDocs[i].title).trim(), this.childDocs[i]);
-            }
-        }
-        return string;
-    }
-
-    @observable isLoading = false
-    
-   
-    imageUrlToBase64 = async (imageUrl: string): Promise<string> => {
-        try {
-            const response = await fetch(imageUrl);
-            const blob = await response.blob();
-    
-            return new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.readAsDataURL(blob); 
-                reader.onloadend = () => resolve(reader.result as string); 
-                reader.onerror = error => reject(error); 
-            });
-        } catch (error) {
-            console.error('Error:', error);
-            throw error; 
-        }
+    childPairStringList = () => {
+        const docToText = (doc: Doc) => {
+            switch (doc.type) {
+                case DocumentType.PDF:  const words = StrCast(doc.text).split(/\s+/);
+                                        return words.slice(0, 50).join(' '); // first 50 words of pdf text
+                case DocumentType.IMG:  return this.getImageDesc(doc);
+                case DocumentType.RTF:  return StrCast(RTFCast(doc.text).Text);
+                default:                return StrCast(doc.title);
+            } // prettier-ignore
+        };
+        const docTextPromises = this.childDocsWithoutLinks.map(async doc => {
+            const docText = (await docToText(doc)) ?? '';
+            this._textToDoc.set(docText.trim(), doc);
+            return `======${docText.replace(/\n/g, ' ').trim()}======`;
+        });
+        return Promise.all<string>(docTextPromises);
     };
 
-    textToDoc = new Map<string, Doc>()
-    gptProccessedImages = new Set<Doc>()
-
     /**
      * Calls the gpt API to generate descriptions for the images in the view
-     * @param image 
-     * @returns 
+     * @param image
+     * @returns
      */
-    @action async getImageDesc(image: Doc) {
-        if (this.gptProccessedImages.has(image)) {
-            // Return the already processed description
-            return Array.from(this.textToDoc.keys()).find(key => this.textToDoc.get(key) === image) || '';
-        }
-    
-        let href = (image['data'] as URLField).url.href;
-        let hrefParts = href.split('.');
-        let hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
+    getImageDesc = async (image: Doc) => {
+        if (StrCast(image.description)) return StrCast(image.description); // Return existing description
+        const href = (image.data as URLField).url.href;
+        const hrefParts = href.split('.');
+        const hrefComplete = `${hrefParts[0]}_o.${hrefParts[1]}`;
         try {
-            let hrefBase64 = await this.imageUrlToBase64(hrefComplete);
-            let response = await gptImageLabel(hrefBase64);
-            this.textToDoc.set(response.trim(), image);
-            this.gptProccessedImages.add(image);
-            console.log(response);
+            const hrefBase64 = await CollectionCardView.imageUrlToBase64(hrefComplete);
+            const response = await gptImageLabel(hrefBase64);
+            image[DocData].description = response.trim();
             return response; // Return the response from gptImageLabel
         } catch (error) {
-            console.log("bad things have happened");
+            console.log('bad things have happened');
         }
-    }
+        return '';
+    };
 
-    //child doc to its group determind by gpt
-    gptGroups = new ObservableMap<Doc, number>
-    @observable amGPTGroups = 0
-    
     /**
      * Converts the gpt output into a hashmap that can be used for sorting. lists are seperated by ==== while elements within the list are seperated by ~~~~~~
-     * @param gptOutput 
+     * @param gptOutput
      */
-    processGptOutput(gptOutput: string) {
-
+    processGptOutput = (gptOutput: string) => {
         // Split the string into individual list items
         const listItems = gptOutput.split('======').filter(item => item.trim() !== '');
-        this.amGPTGroups = listItems.length
-        this._props.Document.chatAmGroups = this.amGPTGroups
-
         listItems.forEach((item, index) => {
             // Split the item by '~~~~~~' to get all descriptors
             const parts = item.split('~~~~~~').map(part => part.trim());
 
             parts.forEach(part => {
-                console.log(part + "part")
                 // Find the corresponding Doc in the textToDoc map
-                if (this.textToDoc.has(part)) {
-                    const doc = this.textToDoc.get(part);
-                    if (doc) {
-                        this.gptGroups.set(doc, index);
-                        doc.chatGroup = index
-                    }
+                const doc = this._textToDoc.get(part);
+                if (doc) {
+                    doc.chat = index;
                 }
             });
         });
-    }
-
-    @observable isChatPopupOpen = false;
+    };
     /**
-     * Opens up the chat popup and starts the process for smart sorting. 
+     * Opens up the chat popup and starts the process for smart sorting.
      */
-    @action openChatPopup = async () => {
-        this.isChatPopupOpen = true;
+    openChatPopup = async () => {
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setMode(GPTPopupMode.SORT);
-        
-        // Await the promise to get the string result
-        const sortDesc = await this.childPairStringList();
+        const sortDesc = await this.childPairStringList(); // Await the promise to get the string result
         GPTPopup.Instance.setCardsDoneLoading(true); // Set dataDoneLoading to true after data is loaded
-        GPTPopup.Instance.setSortDesc(sortDesc);
-        GPTPopup.Instance.onSortComplete = this.handleGptSortResult;
-};
-    @action handleGptSortResult = (sortResult: string) => {
-        this.processGptOutput(sortResult);
+        GPTPopup.Instance.setSortDesc(sortDesc.join());
+        GPTPopup.Instance.onSortComplete = (sortResult: string) => this.processGptOutput(sortResult);
     };
 
     /**
-     * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups 
-     * @param childPairIndex 
-     * @param doc 
-     * @param isChat 
-     * @returns 
+     * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
+     * @param childPairIndex
+     * @param doc
+     * @returns
      */
-    renderButtons(childPairIndex: number, doc: Doc, isChat = false) {
-        const buttons = [];
-        const groupNumber = NumCast(this._props.Document.customSortNumber);
-    
-        let amButtons = 4;
-        let activeButtonIndex = this.getButtonGroup(groupNumber, doc)
-    
-        if (isChat && doc) {
-            if (this.amGPTGroups > 4){
-                amButtons = this.amGPTGroups;
-            }
-            activeButtonIndex = this.getButtonGroup(9999, doc, true);
-        }
-    
-        for (let i = 0; i < amButtons; i++) {
-            const isActive = activeButtonIndex === i;
-            buttons.push(
-                <button
-                    key={i}
-                    style={{ backgroundColor: isActive ? '#4476f7' : '#323232' }}
-                    onClick={() => this.toggleButton(childPairIndex, i, isChat, doc)}
-                ></button>
-            );
-        }
-    
+    renderButtons = (doc: Doc, cardSort: cardSortings) => {
+        if (cardSort !== cardSortings.Custom) return '';
+        const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.customSortField && set.add(NumCast(doc[this.customSortField])), new Set<number>()).size ?? 0);
+        const activeButtonIndex = CollectionCardView.getButtonGroup(this.customSortField, doc);
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
         return (
             <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
-                {buttons}
+                {numberRange(amButtons).map(i => (
+                    <button
+                        key={i}
+                        type="button"
+                        style={{ backgroundColor: activeButtonIndex === i ? '#4476f7' : '#323232' }} //
+                        onClick={() => this.toggleButton(i, doc)}
+                    />
+                ))}
             </div>
         );
-    }
-
-    getButtonGroup(groupNumber: number, doc: Doc, isChat?: boolean) {
-        if (isChat){
-            return NumCast(doc.chatGroup)
-        }
-        switch (groupNumber){
-            case 0:
-                return NumCast(doc.custom1Group)
-            case 1:
-                return NumCast(doc.custom2Group)
-            case 2:
-                return NumCast(doc.custom3Group)
-            default:
-                break
-        }
-
-        
-    }
-
+    };
+    /**
+     * Actually renders all the cards
+     */
+    renderCards = () => {
+        const anySelected = this.childDocs.some(doc => SelectionManager.IsSelected(doc));
+        // Map sorted documents to their rendered components
+        return this.sortedDocs.map((doc, index) => {
+            const realIndex = this.sortedDocs.filter(sortDoc => !SelectionManager.IsSelected(sortDoc)).indexOf(doc);
+            const calcRowIndex = this.overflowIndexCalc(realIndex);
+            const amCards = this.overflowAmCardsCalc(realIndex);
+            const isSelected = SelectionManager.IsSelected(doc);
 
-    @computed get translateWrapperX() {
-        let translate = 0;
+            const childScreenToLocal = () => {
+                this._forceChildXf;
+                const dref = this._docRefs.get(doc);
+                const { translateX, translateY, scale } = Utils.GetScreenTransform(dref?.ContentDiv);
+                return new Transform(-translateX + (dref?.centeringX || 0) * scale, 
+                                     -translateY + (dref?.centeringY || 0) * scale, 1)
+                          .scale(1 / scale).rotate(!isSelected ? -this.rotate(amCards, calcRowIndex) : 0); // prettier-ignore
+            };
 
-        if (this.inactiveDocs().length != this.myChildLayoutPairs.length && this.inactiveDocs().length < 10) {
-            translate += this.panelWidth() / 2;
-        }
-        return translate;
-    }
+            return (
+                <div
+                    key={doc[Id]}
+                    className={`card-item${isSelected ? '-active' : anySelected ? '-inactive' : ''}`}
+                    onPointerUp={() => {
+                        // this turns off documentDecorations during a transition, then turns them back on afterward.
+                        SnappingManager.SetIsResizing(this.Document);
+                        setTimeout(
+                            action(() => {
+                                SnappingManager.SetIsResizing(undefined);
+                                this._forceChildXf = !this._forceChildXf;
+                            }),
+                            700
+                        );
+                    }}
+                    style={{
+                        width: this.panelWidth(),
+                        height: 'max-content', // this.panelHeight(childPair.layout)(),
+                        transform: `translateY(${this.calculateTranslateY(this._hoveredNodeIndex === index, isSelected, realIndex, amCards, calcRowIndex)}px)
+                                    translateX(${isSelected ? this.translateSelected(calcRowIndex) : this.translateOverflowX(realIndex, amCards)}px)
+                                    rotate(${!isSelected ? this.rotate(amCards, calcRowIndex) : 0}deg)
+                                    scale(${isSelected ? 1.25 : 1})`,
+                    }}
+                    onMouseEnter={() => this.setHoveredNodeIndex(index)}>
+                    {this.displayDoc(doc, childScreenToLocal)}
+                    {this.renderButtons(doc, this.cardSort)}
+                </div>
+            );
+        });
+    };
     render() {
         return (
             <div
@@ -754,11 +502,10 @@ export class CollectionCardView extends CollectionSubView() {
                     className="card-wrapper"
                     style={{
                         transform: ` scale(${1 / this.fitContentScale}) translateX(${this.translateWrapperX}px)`,
-                        transformOrigin: 'top left',
                         height: `${100 * this.fitContentScale}%`,
                     }}
                     onMouseLeave={() => this.setHoveredNodeIndex(-1)}>
-                    {this.contentSorted}
+                    {this.renderCards()}
                 </div>
             </div>
         );
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 496d7482c..35a3a2e31 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -1,7 +1,7 @@
 import { Colors } from 'browndash-components';
 import { action, runInAction } from 'mobx';
 import { aggregateBounds } from '../../../Utils';
-import { Doc, Opt } from '../../../fields/Doc';
+import { Doc, DocListCast, Opt } from '../../../fields/Doc';
 import { InkTool } from '../../../fields/InkField';
 import { BoolCast, Cast, NumCast, StrCast } from '../../../fields/Types';
 import { WebField } from '../../../fields/URLField';
@@ -106,17 +106,15 @@ ScriptingGlobals.add(function toggleOverlay(checkResult?: boolean) {
     selected ? selected.CollectionFreeFormDocumentView?.float() : console.log('[FontIconBox.tsx] toggleOverlay failed');
 });
 
-
-
 ScriptingGlobals.add(function showFreeform(
-    attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4',
+    attr: 'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4',
     checkResult?: boolean,
     persist?: boolean,
     isDoubleClick?: boolean
 ) {
     const selected = SelectionManager.Docs.lastElement();
     // prettier-ignore
-    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'custom1' | 'custom2' | 'custom3' | 'chat' | '1' | '2' | '3' | '4', 
+    const map: Map<'flashcards' | 'center' | 'grid' | 'snaplines' | 'clusters' | 'arrange' | 'viewAll' | 'fitOnce' | 'time' | 'docType' | 'color' | 'links' | 'like' | 'star' | 'idea' | 'chat' | '1' | '2' | '3' | '4', 
     { 
         waitForRender?: boolean; 
         checkResult: (doc: Doc) => any; 
@@ -167,87 +165,48 @@ ScriptingGlobals.add(function showFreeform(
             checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "links",
             setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links",
         }],
-        ['custom1', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 0,
+        ['like', {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "like",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortNumber = 0;
+                doc.customSortField = "like";
                 doc.visibleGroupNumbers = new List<number>();
             }
         }],
-        ['custom2', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 1,
+        ['star', {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "star",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortNumber = 1;
+                doc.customSortField = "star";
                 doc.visibleGroupNumbers = new List<number>();
             }
         }],
-        ['custom3', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && NumCast(doc?.customSortNumber) === 2,
+        ['idea', {
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "idea",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortNumber = 2;
+                doc.customSortField = "idea";
                 doc.visibleGroupNumbers = new List<number>();
             }
         }],
         ['chat', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "chat",
-            setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "chat",
-        }],
-        ['1', {
-            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(0),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                let list = NumListCast(doc.visibleGroupNumbers);
-                if (list.includes(0)) {
-                    let newList = new List<number>(list.filter(d => d !== 0));
-                    doc.visibleGroupNumbers = newList;
-                } else {
-                    list.push(0);
-                    doc.visibleGroupNumbers = new List<number>(list);
-                }
-            }
-        }],
-        ['2', {
-            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(1),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                let list = NumListCast(doc.visibleGroupNumbers);
-                if (list.includes(1)) {
-                    let newList = new List<number>(list.filter(d => d !== 1));
-                    doc.visibleGroupNumbers = newList;
-                } else {
-                    list.push(1);
-                    doc.visibleGroupNumbers = new List<number>(list);
-                }
-            }
-        }],
-        ['3', {
-            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(2),
-            setDoc: (doc: Doc, dv: DocumentView) => {
-                let list = NumListCast(doc.visibleGroupNumbers);
-                if (list.includes(2)) {
-                    let newList = new List<number>(list.filter(d => d !== 2));
-                    doc.visibleGroupNumbers = newList;
-                } else {
-                    list.push(2);
-                    doc.visibleGroupNumbers = new List<number>(list);
-                }
-            }
-        }],
-        ['4', {
-            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(3),
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom"  && StrCast(doc?.customSortField) === "chat",
             setDoc: (doc: Doc, dv: DocumentView) => {
-                let list = NumListCast(doc.visibleGroupNumbers);
-                if (list.includes(3)) {
-                    let newList = new List<number>(list.filter(d => d !== 3));
-                    doc.visibleGroupNumbers = newList;
-                } else {
-                    list.push(3);
-                    doc.visibleGroupNumbers = new List<number>(list);
-                }
-            }
+                doc.cardSort = "custom";
+                doc.customSortField = "chat";
+                doc.visibleGroupNumbers = new List<number>();
+            },
         }],
     ]);
+    for (let i = 0; i < 8; i++) {
+        map.set((i + 1 + '') as any, {
+            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(i),
+            setDoc: (doc: Doc, dv: DocumentView) => {
+                const list = NumListCast(doc.visibleGroupNumbers);
+                doc.visibleGroupNumbers = new List<number>(list.includes(i) ? list.filter(d => d !== i) : [...list, i]);
+            },
+        });
+    }
 
     if (checkResult) {
         return map.get(attr)?.checkResult(selected);
@@ -257,13 +216,11 @@ ScriptingGlobals.add(function showFreeform(
     setTimeout(() => batch.end(), 100);
 });
 
-
-ScriptingGlobals.add(function isThatCardGroup(n: number){
-    const canvas = SelectionManager.Docs.lastElement();
-    return canvas.customSortNumber == n
-
-
-})
+ScriptingGlobals.add(function cardHasLabel(label: string) {
+    const selected = SelectionManager.Docs.lastElement();
+    const labelNum = Number(label) - 1;
+    return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.customSortField)] == labelNum));
+}, '');
 
 // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
 //     // const editorView = RichTextMenu.Instance?.TextView?.EditorView;
-- 
cgit v1.2.3-70-g09d2


From 9badfc489f00afd10489f0dde0a3b9e21817feb5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 18 May 2024 23:15:49 -0400
Subject: more cardView cleanup

---
 src/Utils.ts                                       |   1 -
 src/client/apis/gpt/GPT.ts                         |  22 ++--
 src/client/documents/Documents.ts                  |  65 +----------
 src/client/util/SelectionManager.ts                |   1 -
 src/client/views/DocComponent.tsx                  |   2 +-
 .../views/collections/CollectionCardDeckView.tsx   |  20 ++--
 src/client/views/collections/CollectionMenu.tsx    |   2 -
 src/client/views/collections/CollectionView.tsx    |   2 -
 .../CollectionFreeFormLayoutEngines.tsx            |  26 -----
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   8 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |  19 +---
 .../collectionSchema/CollectionSchemaView.tsx      |   2 +-
 src/client/views/global/globalScripts.ts           |  32 +++---
 src/client/views/nodes/PDFBox.tsx                  |   3 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   7 +-
 src/client/views/pdf/GPTPopup/GPTPopup.tsx         | 126 +++++++++------------
 16 files changed, 105 insertions(+), 233 deletions(-)

(limited to 'src/client/util')

diff --git a/src/Utils.ts b/src/Utils.ts
index fb72a5836..291d7c799 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -179,7 +179,6 @@ export namespace Utils {
     export function toRGBAstr(col: { r: number; g: number; b: number; a?: number }) {
         return 'rgba(' + col.r + ',' + col.g + ',' + col.b + (col.a !== undefined ? ',' + col.a : '') + ')';
     }
-    
 
     export function HSLtoRGB(h: number, s: number, l: number) {
         // Must be fractions of 1
diff --git a/src/client/apis/gpt/GPT.ts b/src/client/apis/gpt/GPT.ts
index 398f8ae39..3b3b3b9a0 100644
--- a/src/client/apis/gpt/GPT.ts
+++ b/src/client/apis/gpt/GPT.ts
@@ -6,7 +6,7 @@ enum GPTCallType {
     COMPLETION = 'completion',
     EDIT = 'edit',
     SORT = 'sort',
-    DESCRIBE = 'describe'
+    DESCRIBE = 'describe',
 }
 
 type GPTCallOpts = {
@@ -20,13 +20,15 @@ const callTypeMap: { [type: string]: GPTCallOpts } = {
     summary: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Summarize this text in simpler terms: ' },
     edit: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: 'Reword this: ' },
     completion: { model: 'gpt-3.5-turbo-instruct', maxTokens: 256, temp: 0.5, prompt: '' },
-    sort:{model:'gpt-4o',maxTokens:2048,temp:0.5,prompt:"I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok."},
-    describe:{model:'gpt-4-vision-preview',maxTokens:2048,temp:0,prompt:"Describe these images in 3-5 words"},
-
-
+    sort: {
+        model: 'gpt-4o',
+        maxTokens: 2048,
+        temp: 0.5,
+        prompt: "I'm going to give you a list of descriptions. Each one is seperated by ====== on either side. They will vary in length, so make sure to only seperate when you see ======. Sort them into lists by shared content. MAKE SURE EACH DESCRIPTOR IS IN ONLY ONE LIST. Generate only the list with each list seperated by ====== with the elements seperated by ~~~~~~. Try to do around 4 groups, but a little more or less is ok.",
+    },
+    describe: { model: 'gpt-4-vision-preview', maxTokens: 2048, temp: 0, prompt: 'Describe these images in 3-5 words' },
 };
 
-
 /**`
  * Calls the OpenAI API.
  *
@@ -39,7 +41,7 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
     const opts: GPTCallOpts = callTypeMap[callType];
     try {
         const configuration: ClientOptions = {
-            apiKey: "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",
+            apiKey: process.env.OPENAI_KEY,
             dangerouslyAllowBrowser: true,
         };
         const openai = new OpenAI(configuration);
@@ -63,11 +65,10 @@ const gptAPICall = async (inputText: string, callType: GPTCallType) => {
     }
 };
 
-
 const gptImageLabel = async (imgUrl: string): Promise<string> => {
     try {
         const configuration: ClientOptions = {
-            apiKey: "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",
+            apiKey: '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',
             dangerouslyAllowBrowser: true,
         };
 
@@ -100,7 +101,6 @@ const gptImageLabel = async (imgUrl: string): Promise<string> => {
     }
 };
 
-
 const gptImageCall = async (prompt: string, n?: number) => {
     try {
         const configuration: ClientOptions = {
@@ -122,4 +122,4 @@ const gptImageCall = async (prompt: string, n?: number) => {
     }
 };
 
-export { gptAPICall, gptImageCall, gptImageLabel, GPTCallType };
\ No newline at end of file
+export { gptAPICall, gptImageCall, gptImageLabel, GPTCallType };
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 80774f4ad..903bd907a 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -500,27 +500,8 @@ export class DocumentOptions {
     userColor?: STRt = new StrInfo('color associated with a Dash user (seen in header fields of shared documents)');
 
     cardSort?: STRt = new StrInfo('way cards are sorted in deck view');
-    customSortNumber?: NUMt = new NumInfo('number of custom sorts the user has created');
-    // customGroup1?: List<Doc>
-    // customGroup2?: List<Doc>
-    // customGroup3?: List<Doc>
-    visibleGroupNumbers?: List<number>
-    custom1Group?: NUMt = new NumInfo('Which group a card is in for the 1st custom grouping');
-    custom2Group?: NUMt = new NumInfo('Which group a card is in for the 2nd custom grouping');
-    custom3Group?: NUMt = new NumInfo('Which group a card is in for the 3rd custom grouping');
-    chatGroup?: NUMt = new NumInfo("Which group a card is in for the chat's grouping");
-    chatAmGroups?: NUMt = new NumInfo("Number of cards created by chat sort");
-
-
-
-
-
-
-    // card_sort_time?: BOOLt = new BoolInfo('whether sorting cards in deck view by time');
-    // card_sort_type?: BOOLt = new BoolInfo('whether sorting cards in deck view by type');
-    // card_sort_color?: BOOLt = new BoolInfo('whether sorting cards in deck view by color');
-
-
+    cardSort_customField?: STRt = new StrInfo('field key used for sorting cards');
+    cardSort_visibleSortGroups?: List<number>; // which sorting values are being filtered (shown)
 }
 
 export const DocOptions = new DocumentOptions();
@@ -1239,8 +1220,6 @@ export namespace Docs {
             );
         }
 
-        
-
         export function LinearDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Linear }, id);
         }
@@ -1258,7 +1237,7 @@ export namespace Docs {
         }
 
         export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions, id?: string) {
-            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card});
+            return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card });
         }
 
         export function SchemaDocument(schemaHeaders: SchemaHeaderField[], documents: Array<Doc>, options: DocumentOptions) {
@@ -1911,44 +1890,6 @@ export namespace DocUtils {
         }
     }
 
-    export function spreadCards(docList: Doc[], x: number = 0, y: number = 0, spreadAngle: number = 30, radius: number = 100, create: boolean = true) {
-        console.log('spread cards');
-        const totalCards = docList.length;
-        const halfSpreadAngle = spreadAngle * 0.5;
-        const angleStep = spreadAngle / (totalCards - 1);
-        
-        runInAction(() => {
-            docList.forEach((d, i) => {
-                DocUtils.iconify(d);
-                const angle = (-halfSpreadAngle + angleStep * i) * (Math.PI / 180); // Convert degrees to radians
-                d.x = x + Math.cos(angle) * radius;
-                d.y = y + Math.sin(angle) * radius;
-                d.rotation = angle; 
-                d._timecodeToShow = undefined;
-            });
-        });
-
-        if (create) {
-            const newCollection = Docs.Create.CardDeckDocument(docList, { 
-                title: 'card-spread', 
-                _freeform_noZoom: true, 
-                x: x - radius, 
-                y: y - radius, 
-                _width: radius * 2, 
-                _height: radius * 2, 
-                dragWhenActive: true, 
-                _layout_fitWidth: false 
-            });
-            // Adjust position based on the collection's dimensions if needed
-            newCollection.x = NumCast(newCollection.x) + NumCast(newCollection._width) / 2 - radius;
-            newCollection.y = NumCast(newCollection.y) + NumCast(newCollection._height) / 2 - radius;
-            newCollection._width = newCollection._height = radius * 2;
-            return newCollection;
-        }
-    }
-
-
-
     export function makeIntoPortal(doc: Doc, layoutDoc: Doc, allLinks: Doc[]) {
         const portalLink = allLinks.find(d => d.link_anchor_1 === doc && d.link_relationship === 'portal to:portal from');
         if (!portalLink) {
diff --git a/src/client/util/SelectionManager.ts b/src/client/util/SelectionManager.ts
index d507e35ad..36b926053 100644
--- a/src/client/util/SelectionManager.ts
+++ b/src/client/util/SelectionManager.ts
@@ -68,7 +68,6 @@ export class SelectionManager {
     public static IsSelected = (doc?: Doc) => Array.from(doc?.[DocViews] ?? []).some(dv => dv?.IsSelected);
     public static get Views() { return this.Instance.SelectedViews; } // prettier-ignore
     public static get SelectedSchemaDoc() { return this.Instance.SelectedSchemaDocument; } // prettier-ignore
-    
     public static get Docs() { return this.Instance.SelectedViews.map(dv => dv.Document).filter(doc => doc?._type_collection !== CollectionViewType.Docking); } // prettier-ignore
 }
 
diff --git a/src/client/views/DocComponent.tsx b/src/client/views/DocComponent.tsx
index ef4257937..de4df1830 100644
--- a/src/client/views/DocComponent.tsx
+++ b/src/client/views/DocComponent.tsx
@@ -35,7 +35,7 @@ export interface ViewBoxInterface {
     addDocument?: (doc: Doc | Doc[], annotationKey?: string) => boolean; // add a document (used only by collections)
     removeDocument?: (doc: Doc | Doc[], annotationKey?: string, leavePushpin?: boolean, dontAddToRemoved?: boolean) => boolean; // add a document (used only by collections)
     select?: (ctrlKey: boolean, shiftKey: boolean) => void;
-    focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt<number>; 
+    focus?: (textAnchor: Doc, options: FocusViewOptions) => Opt<number>;
     viewTransition?: () => Opt<string>; // duration of a view transition animation
     isAnyChildContentActive?: () => boolean; // is any child content of the document active
     onClickScriptDisable?: () => 'never' | 'always'; // disable click scripts : never, always, or undefined = only when selected
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 9e5668ffa..5f8ddd5c1 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -75,7 +75,7 @@ export class CollectionCardView extends CollectionSubView() {
 
     componentDidMount(): void {
         this._disposers.sort = reaction(
-            () => ({ cardSort: this.cardSort, field: this.customSortField }),
+            () => ({ cardSort: this.cardSort, field: this.cardSort_customField }),
             ({ cardSort, field }) => (cardSort === cardSortings.Custom && field === 'chat' ? this.openChatPopup() : GPTPopup.Instance.setVisible(false))
         );
     }
@@ -85,8 +85,8 @@ export class CollectionCardView extends CollectionSubView() {
         this._dropDisposer?.();
     }
 
-    @computed get customSortField() {
-        return StrCast(this.Document.customSortField) as any as 'chat' | 'star' | 'idea' | 'like';
+    @computed get cardSort_customField() {
+        return StrCast(this.Document.cardSort_customField) as any as 'chat' | 'star' | 'idea' | 'like';
     }
 
     @computed get cardSort() {
@@ -115,12 +115,12 @@ export class CollectionCardView extends CollectionSubView() {
      */
     @computed get childDocsWithoutLinks() {
         const regularDocs = this.childDocs.filter(l => l.type !== DocumentType.LINK);
-        const activeGroups = NumListCast(this.Document.visibleGroupNumbers);
+        const activeGroups = NumListCast(this.Document.cardSort_visibleSortGroups);
 
         if (activeGroups.length > 0 && this.cardSort === cardSortings.Custom) {
             return regularDocs.filter(doc => {
                 // Get the group number for the current index
-                const groupNumber = CollectionCardView.getButtonGroup(this.customSortField, doc);
+                const groupNumber = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
                 // Check if the group number is in the active groups
                 return groupNumber !== undefined && activeGroups.includes(groupNumber);
             });
@@ -245,8 +245,8 @@ export class CollectionCardView extends CollectionSubView() {
                                   return [DashColor(StrCast(docA.backgroundColor)).hsv().toString(), // If docA.type is undefined, use an empty string
                                           DashColor(StrCast(docB.backgroundColor)).hsv().toString()]; // If docB.type is undefined, use an empty string
                     case cardSortings.Custom:
-                                  return [CollectionCardView.getButtonGroup(this.customSortField, docA)??0,
-                                          CollectionCardView.getButtonGroup(this.customSortField, docB)??0];
+                                  return [CollectionCardView.getButtonGroup(this.cardSort_customField, docA)??0,
+                                          CollectionCardView.getButtonGroup(this.cardSort_customField, docB)??0];
                     default:      return [StrCast(docA.type), // If docA.type is undefined, use an empty string
                                           StrCast(docB.type)]; // If docB.type is undefined, use an empty string
                     } // prettier-ignore
@@ -335,7 +335,7 @@ export class CollectionCardView extends CollectionSubView() {
      * @param buttonID
      * @param doc
      */
-    toggleButton = undoable((buttonID: number, doc: Doc) => this.customSortField && (doc[this.customSortField] = buttonID), 'toggle custom button');
+    toggleButton = undoable((buttonID: number, doc: Doc) => this.cardSort_customField && (doc[this.cardSort_customField] = buttonID), 'toggle custom button');
 
     /**
      * A list of the text content of all the child docs. RTF documents will have just their text and pdf documents will have the first 50 words.
@@ -422,8 +422,8 @@ export class CollectionCardView extends CollectionSubView() {
      */
     renderButtons = (doc: Doc, cardSort: cardSortings) => {
         if (cardSort !== cardSortings.Custom) return '';
-        const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.customSortField && set.add(NumCast(doc[this.customSortField])), new Set<number>()).size ?? 0);
-        const activeButtonIndex = CollectionCardView.getButtonGroup(this.customSortField, doc);
+        const amButtons = Math.max(4, this.childDocs?.reduce((set, doc) => this.cardSort_customField && set.add(NumCast(doc[this.cardSort_customField])), new Set<number>()).size ?? 0);
+        const activeButtonIndex = CollectionCardView.getButtonGroup(this.cardSort_customField, doc);
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
         return (
             <div className="card-button-container" style={{ width: `${totalWidth}px` }}>
diff --git a/src/client/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 81d9f4eea..94896f277 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -321,8 +321,6 @@ export class CollectionViewBaseChrome extends React.Component<CollectionViewMenu
                 return this._freeform_commands;
             case CollectionViewType.Card:
                 return this._freeform_commands;
-            
-            
         }
     }
     private _commandRef = React.createRef<HTMLInputElement>();
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index b7805bf3f..97a0b7bef 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -137,8 +137,6 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
             case CollectionViewType.Time:         return <CollectionTimeView        key="collview" {...props} />;
             case CollectionViewType.Grid:         return <CollectionGridView        key="collview" {...props} />;
             case CollectionViewType.Card:         return <CollectionCardView        key="collview" {...props} />;
-
-
         }
     };
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
index 22005eb23..c83c26509 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -125,32 +125,6 @@ export function computeStarburstLayout(poolData: Map<string, PoolData>, pivotDoc
     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
 }
 
-// export function computeCardDeckLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
-//     const docMap = new Map<string, PoolData>();
-//     const burstDiam = [NumCast(pivotDoc._width), NumCast(pivotDoc._height)];
-//     const burstScale = NumCast(pivotDoc._starburstDocScale, 1);
-
-//     childPairs.forEach(({ layout, data }, i) => {
-//         const aspect = NumCast(layout._height) / NumCast(layout._width);
-//         const docSize = Math.min(Math.min(400, NumCast(layout._width)), Math.min(400, NumCast(layout._width)) / aspect) * burstScale;
-//         const deg = (i / childPairs.length) * Math.PI * 2;
-//         docMap.set(layout[Id], {
-//             x: Math.min(burstDiam[0] / 2 - docSize, Math.max(-burstDiam[0] / 2, (Math.cos(deg) * burstDiam[0]) / 2 - docSize / 2)),
-//             y: Math.min(burstDiam[1] / 2 - docSize * aspect, Math.max(-burstDiam[1] / 2, (Math.sin(deg) * burstDiam[1]) / 2 - (docSize / 2) * aspect)),
-//             width: docSize,
-//             height: docSize * aspect,
-//             zIndex: NumCast(layout.zIndex),
-//             pair: { layout, data },
-//             replica: '',
-//             color: 'white',
-//             backgroundColor: 'white',
-//             transition: 'all 0.3s',
-//         });
-//     });
-//     const divider = { type: 'div', color: 'transparent', x: -burstDiam[0] / 2, y: -burstDiam[1] / 2, width: 15, height: 15, payload: undefined };
-//     return normalizeResults(burstDiam, 12, docMap, poolData, viewDefsToJSX, [], 0, [divider]);
-// }
-
 export function computePivotLayout(poolData: Map<string, PoolData>, pivotDoc: Doc, childPairs: { layout: Doc; data?: Doc }[], panelDim: number[], viewDefsToJSX: (views: ViewDefBounds[]) => ViewDefResult[], engineProps: any) {
     const docMap = new Map<string, PoolData>();
     const fieldKey = 'data';
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 11193f496..079a5d977 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -49,9 +49,7 @@ import { CollectionSubView } from '../CollectionSubView';
 import { TreeViewType } from '../CollectionTreeView';
 import { CollectionFreeFormBackgroundGrid } from './CollectionFreeFormBackgroundGrid';
 import { CollectionFreeFormInfoUI } from './CollectionFreeFormInfoUI';
-import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult,
-    //  computeCardDeckLayout 
-    } from './CollectionFreeFormLayoutEngines';
+import { computePassLayout, computePivotLayout, computeStarburstLayout, computeTimelineLayout, PoolData, ViewDefBounds, ViewDefResult } from './CollectionFreeFormLayoutEngines';
 import { CollectionFreeFormPannableContents } from './CollectionFreeFormPannableContents';
 import { CollectionFreeFormRemoteCursors } from './CollectionFreeFormRemoteCursors';
 import './CollectionFreeFormView.scss';
@@ -1385,8 +1383,6 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             case computeTimelineLayout.name:  return { newPool, computedElementData: this.doEngineLayout(newPool, computeTimelineLayout) };
             case computePivotLayout.name:     return { newPool, computedElementData: this.doEngineLayout(newPool, computePivotLayout) };
             case computeStarburstLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeStarburstLayout) };
-            // case computeCardDeckLayout.name: return { newPool, computedElementData: this.doEngineLayout(newPool, computeCardDeckLayout) };
-
         }
         return { newPool, computedElementData: this.doFreeformLayout(newPool) };
     }
@@ -2010,4 +2006,4 @@ ScriptingGlobals.add(function datavizFromSchema(doc: Doc) {
             SchemaCSVPopUp.Instance.setVisible(true);
         }
     });
-});
\ No newline at end of file
+});
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index e44c37873..25a31fd6e 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -385,18 +385,6 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
         this.hideMarquee();
     });
 
-    // @undoBatch
-    // spreadCards = action((e: KeyboardEvent | React.PointerEvent | undefined) => {
-    //     const selected = this.marqueeSelect(false);
-    //     SelectionManager.DeselectAll();
-    //     selected.forEach(d => this._props.removeDocument?.(d));
-    //     const newCollection = DocUtils.spreadCards(selected, this.Bounds.left + this.Bounds.width / 2, this.Bounds.top + this.Bounds.height / 2)!;
-    //     this._props.addDocument?.(newCollection);
-    //     this._props.selectDocuments([newCollection]);
-    //     MarqueeOptionsMenu.Instance.fadeOut(true);
-    //     this.hideMarquee();
-    // });
-
     /**
      * This triggers the TabDocView.PinDoc method which is the universal method
      * used to pin documents to the currently active presentation trail.
@@ -522,7 +510,6 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
     @action
     marqueeCommand = (e: KeyboardEvent) => {
-
         if (this._commandExecuted || (e as any).propagationIsStopped) {
             return;
         }
@@ -533,8 +520,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             this.delete(e, e.key === 'h');
             e.stopPropagation();
         }
-        if ('ctsSpgac'.indexOf(e.key) !== -1) {
-
+        if ('ctsSpg'.indexOf(e.key) !== -1) {
             this._commandExecuted = true;
             e.stopPropagation();
             e.preventDefault();
@@ -542,8 +528,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             if (e.key === 'g') this.collection(e, true);
             if (e.key === 'c' || e.key === 't') this.collection(e);
             if (e.key === 's' || e.key === 'S') this.summary(e);
-            if (e.key === 'p') this.pileup(e)
-            // if (e.key === 'c') this.spreadCards(e);
+            if (e.key === 'p') this.pileup(e);
 
             this.cleanupInteractions(false);
         }
diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index 731ea1235..6a956f2ac 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -51,7 +51,7 @@ export const FInfotoColType: { [key: string]: ColumnType } = {
     enumeration: ColumnType.Enumeration,
 };
 
-const  defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', 'text'];
+const defaultColumnKeys: string[] = ['title', 'type', 'author', 'author_date', 'text'];
 
 @observer
 export class CollectionSchemaView extends CollectionSubView() {
diff --git a/src/client/views/global/globalScripts.ts b/src/client/views/global/globalScripts.ts
index 35a3a2e31..d5f6921a2 100644
--- a/src/client/views/global/globalScripts.ts
+++ b/src/client/views/global/globalScripts.ts
@@ -166,44 +166,44 @@ ScriptingGlobals.add(function showFreeform(
             setDoc: (doc: Doc, dv: DocumentView) => doc.cardSort = "links",
         }],
         ['like', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "like",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "like",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortField = "like";
-                doc.visibleGroupNumbers = new List<number>();
+                doc.cardSort_customField = "like";
+                doc.cardSort_visibleSortGroups = new List<number>();
             }
         }],
         ['star', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "star",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "star",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortField = "star";
-                doc.visibleGroupNumbers = new List<number>();
+                doc.cardSort_customField = "star";
+                doc.cardSort_visibleSortGroups = new List<number>();
             }
         }],
         ['idea', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.customSortField) === "idea",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom" && StrCast(doc?.cardSort_customField) === "idea",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortField = "idea";
-                doc.visibleGroupNumbers = new List<number>();
+                doc.cardSort_customField = "idea";
+                doc.cardSort_visibleSortGroups = new List<number>();
             }
         }],
         ['chat', {
-            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom"  && StrCast(doc?.customSortField) === "chat",
+            checkResult: (doc: Doc) => StrCast(doc?.cardSort) === "custom"  && StrCast(doc?.cardSort_customField) === "chat",
             setDoc: (doc: Doc, dv: DocumentView) => {
                 doc.cardSort = "custom";
-                doc.customSortField = "chat";
-                doc.visibleGroupNumbers = new List<number>();
+                doc.cardSort_customField = "chat";
+                doc.cardSort_visibleSortGroups = new List<number>();
             },
         }],
     ]);
     for (let i = 0; i < 8; i++) {
         map.set((i + 1 + '') as any, {
-            checkResult: (doc: Doc) => NumListCast(doc?.visibleGroupNumbers).includes(i),
+            checkResult: (doc: Doc) => NumListCast(doc?.cardSort_visibleSortGroups).includes(i),
             setDoc: (doc: Doc, dv: DocumentView) => {
-                const list = NumListCast(doc.visibleGroupNumbers);
-                doc.visibleGroupNumbers = new List<number>(list.includes(i) ? list.filter(d => d !== i) : [...list, i]);
+                const list = NumListCast(doc.cardSort_visibleSortGroups);
+                doc.cardSort_visibleSortGroups = new List<number>(list.includes(i) ? list.filter(d => d !== i) : [...list, i]);
             },
         });
     }
@@ -219,7 +219,7 @@ ScriptingGlobals.add(function showFreeform(
 ScriptingGlobals.add(function cardHasLabel(label: string) {
     const selected = SelectionManager.Docs.lastElement();
     const labelNum = Number(label) - 1;
-    return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.customSortField)] == labelNum));
+    return labelNum < 4 || (selected && DocListCast(selected[Doc.LayoutFieldKey(selected)]).some(doc => doc[StrCast(selected.cardSort_customField)] == labelNum));
 }, '');
 
 // ScriptingGlobals.add(function setCardSortAttr(attr: 'time' | 'docType' | 'color', value: any, checkResult?: boolean) {
diff --git a/src/client/views/nodes/PDFBox.tsx b/src/client/views/nodes/PDFBox.tsx
index 90d6133e4..3e0270aa3 100644
--- a/src/client/views/nodes/PDFBox.tsx
+++ b/src/client/views/nodes/PDFBox.tsx
@@ -29,11 +29,10 @@ import { CreateImage } from '../nodes/WebBoxRenderer';
 import { PDFViewer } from '../pdf/PDFViewer';
 import { SidebarAnnos } from '../SidebarAnnos';
 import { DocumentView, OpenWhere } from './DocumentView';
-import { FocusViewOptions, FieldView, FieldViewProps } from './FieldView';
+import { FieldView, FieldViewProps, FocusViewOptions } from './FieldView';
 import { ImageBox } from './ImageBox';
 import './PDFBox.scss';
 import { PinProps, PresBox } from './trails';
-import { Networking } from '../../Network';
 
 @observer
 export class PDFBox extends ViewBoxAnnotatableComponent<FieldViewProps>() implements ViewBoxInterface {
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index f856d9637..43010b2ed 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -972,8 +972,11 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
                 event: () => (this.layoutDoc._layout_autoHeight = !this.layoutDoc._layout_autoHeight),
                 icon: this.Document._layout_autoHeight ? 'lock' : 'unlock',
             });
-        optionItems.push({ description: `show markdown options`, event: RTFMarkup.Instance.open, icon: <BsMarkdownFill /> });
-        !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'sliders' });
+        !options && cm.addItem({ description: 'Options...', subitems: optionItems, icon: 'eye' });
+        const help = cm.findByDescription('Help...');
+        const helpItems = help && 'subitems' in help ? help.subitems : [];
+        helpItems.push({ description: `show markdown options`, event: RTFMarkup.Instance.open, icon: <BsMarkdownFill /> });
+        !help && cm.addItem({ description: 'Help...', subitems: helpItems, icon: 'eye' });
         this._downX = this._downY = Number.NaN;
     };
 
diff --git a/src/client/views/pdf/GPTPopup/GPTPopup.tsx b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
index 4fb757d8a..0ba62d60e 100644
--- a/src/client/views/pdf/GPTPopup/GPTPopup.tsx
+++ b/src/client/views/pdf/GPTPopup/GPTPopup.tsx
@@ -21,7 +21,7 @@ export enum GPTPopupMode {
     EDIT,
     IMAGE,
     DATA,
-    SORT
+    SORT,
 }
 
 interface GPTPopupProps {}
@@ -60,7 +60,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     public dataChatPrompt: string | null = null;
     @action
     public setDataJson = (text: string) => {
-        if (text=="") this.dataChatPrompt = "";
+        if (text == '') this.dataChatPrompt = '';
         this.dataJson = text;
     };
 
@@ -95,21 +95,18 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     private done: boolean = false;
     @action
     public setDone = (done: boolean) => {
-        console.log("HIIIIIIIII")
         this.done = done;
         this.chatMode = false;
     };
 
     @observable
-    private sortDone: boolean = false // this is so redundant but the og done variable was causing weird unknown problems and im just a girl
+    private sortDone: boolean = false; // this is so redundant but the og done variable was causing weird unknown problems and im just a girl
 
     @action
     public setSortDone = (done: boolean) => {
-        console.log("HIIIIIIIII")
         this.sortDone = done;
     };
 
-
     // change what can be a ref into a ref
     @observable
     private sidebarId: string = '';
@@ -133,26 +130,20 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     };
 
     @observable
-    public sortDesc: string = ''
+    public sortDesc: string = '';
 
-    @action public setSortDesc = (t:string) => {
-        this.sortDesc = t
-    }
+    @action public setSortDesc = (t: string) => {
+        this.sortDesc = t;
+    };
 
     @observable onSortComplete?: (sortResult: string) => void;
     @observable cardsDoneLoading = false;
 
     @action setCardsDoneLoading(done: boolean) {
-        console.log(done + "HI HIHI")
+        console.log(done + 'HI HIHI');
         this.cardsDoneLoading = done;
     }
 
-
-
-
-
-
-
     public addDoc: (doc: Doc | Doc[], sidebarKey?: string | undefined) => boolean = () => false;
     public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
 
@@ -164,12 +155,11 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
         this.setSortDone(false);
 
         try {
-
             const res = await gptAPICall(this.sortDesc, GPTCallType.SORT);
             // Trigger the callback with the result
             if (this.onSortComplete) {
                 this.onSortComplete(res || 'Something went wrong :(');
-                console.log(res)
+                console.log(res);
             }
         } catch (err) {
             console.error(err);
@@ -177,9 +167,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
 
         this.setLoading(false);
         this.setSortDone(true);
-    }
-
-
+    };
 
     /**
      * Generates a Dalle image and uploads it to the server.
@@ -219,7 +207,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             console.error(err);
         }
         GPTPopup.Instance.setLoading(false);
-    }
+    };
 
     generateDataAnalysis = async () => {
         GPTPopup.Instance.setVisible(true);
@@ -231,7 +219,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             console.error(err);
         }
         GPTPopup.Instance.setLoading(false);
-    }
+    };
 
     /**
      * Transfers the summarization text to a sidebar annotation text document.
@@ -282,7 +270,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
      */
     private chatWithAI = () => {
         this.chatMode = true;
-    }
+    };
     dataPromptChanged = action((e: React.ChangeEvent<HTMLInputElement>) => {
         this.dataChatPrompt = e.target.value;
     });
@@ -304,14 +292,14 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     sortBox = () => (
         <>
             <div>
-                {this.heading("SORTING")}
+                {this.heading('SORTING')}
                 {this.loading ? (
                     <div className="content-wrapper">
-                    <div className="loading-spinner">
-                        <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
-                        <span>Loading...</span>
+                        <div className="loading-spinner">
+                            <ReactLoading type="spin" color={StrCast(Doc.UserDoc().userVariantColor)} height={30} width={30} />
+                            <span>Loading...</span>
+                        </div>
                     </div>
-                </div>
                 ) : (
                     <>
                         {!this.cardsDoneLoading ? (
@@ -334,27 +322,18 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                                             width: '90%', // Almost as wide as the container
                                             textAlign: 'center',
                                             color: '#ffffff', // White text
-                                            fontSize: '16px' // Adjust font size as needed
+                                            fontSize: '16px', // Adjust font size as needed
                                         }}
                                     />
                                 </div>
                             )
                         )}
-    
+
                         {this.sortDone && (
                             <div>
                                 <div className="content-wrapper">
-                                    <p>
-                                        {this.text === "Something went wrong :(" ? 
-                                        "Something went wrong :(" : 
-                                        "Sorting done! Feel free to move things around / regenerate :) !"}
-                                    </p>
-                                    <IconButton
-                                        tooltip="Generate Again"
-                                        onClick={() => this.setSortDone(false)}
-                                        icon={<FontAwesomeIcon icon="redo-alt" size="lg" />}
-                                        color={StrCast(Doc.UserDoc().userVariantColor)}
-                                    />
+                                    <p>{this.text === 'Something went wrong :(' ? 'Something went wrong :(' : 'Sorting done! Feel free to move things around / regenerate :) !'}</p>
+                                    <IconButton tooltip="Generate Again" onClick={() => this.setSortDone(false)} icon={<FontAwesomeIcon icon="redo-alt" size="lg" />} color={StrCast(Doc.UserDoc().userVariantColor)} />
                                 </div>
                             </div>
                         )}
@@ -364,21 +343,17 @@ 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="Chat with AI" text="Chat with AI" onClick={this.chatWithAI} color={StrCast(Doc.UserDoc().userVariantColor)} type={Type.TERT} />
-// </>
-// ) : (
-// <div className="summarizing">
-//     <span>Sorting</span>
-//     <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
-//     <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)}  type={Type.TERT}/>
-// </div>
-// )}
+    //     <>
+    //     <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} 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} />
+    // </>
+    // ) : (
+    // <div className="summarizing">
+    //     <span>Sorting</span>
+    //     <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
+    //     <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)}  type={Type.TERT}/>
+    // </div>
+    // )}
 
     imageBox = () => {
         return (
@@ -457,7 +432,7 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     dataAnalysisBox = () => (
         <>
             <div>
-                {this.heading("ANALYSIS")}
+                {this.heading('ANALYSIS')}
                 <div className="content-wrapper">
                     {!this.loading &&
                         (!this.done ? (
@@ -479,8 +454,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
             </div>
             {!this.loading && (
                 <div className="btns-wrapper">
-                    {this.done? 
-                        this.chatMode?(
+                    {this.done ? (
+                        this.chatMode ? (
                             <input
                                 defaultValue=""
                                 autoComplete="off"
@@ -493,19 +468,26 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
                                 placeholder="Ask GPT a question about the data..."
                                 id="search-input"
                                 className="searchBox-input"
-                                style={{width: "100%"}}
+                                style={{ width: '100%' }}
                             />
-                            )
-                        :(
-                        <>
-                            <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} 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} />
-                        </>
+                        ) : (
+                            <>
+                                <Button tooltip="Transfer to text" text="Transfer To Text" onClick={this.transferToText} 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} />
+                            </>
+                        )
                     ) : (
                         <div className="summarizing">
                             <span>Summarizing</span>
                             <ReactLoading type="bubbles" color="#bcbcbc" width={20} height={20} />
-                            <Button text="Stop Animation" onClick={() => {this.setDone(true);}} color={StrCast(Doc.UserDoc().userVariantColor)}  type={Type.TERT}/>
+                            <Button
+                                text="Stop Animation"
+                                onClick={() => {
+                                    this.setDone(true);
+                                }}
+                                color={StrCast(Doc.UserDoc().userVariantColor)}
+                                type={Type.TERT}
+                            />
                         </div>
                     )}
                 </div>
@@ -533,10 +515,8 @@ export class GPTPopup extends ObservableReactComponent<GPTPopupProps> {
     render() {
         return (
             <div className="summary-box" style={{ display: this.visible ? 'flex' : 'none' }}>
-                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() :
-                this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() :
-                this.mode === GPTPopupMode.IMAGE ? this.imageBox() :
-                this.mode === GPTPopupMode.SORT ? this.sortBox() : <></>}            </div>
+                {this.mode === GPTPopupMode.SUMMARY ? this.summaryBox() : this.mode === GPTPopupMode.DATA ? this.dataAnalysisBox() : this.mode === GPTPopupMode.IMAGE ? this.imageBox() : this.mode === GPTPopupMode.SORT ? this.sortBox() : <></>}{' '}
+            </div>
         );
     }
 }
-- 
cgit v1.2.3-70-g09d2


From bb11e8c07f86b1ba0148f1e406a070c14e9abc7c Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 20 May 2024 15:59:52 -0400
Subject: lint cleanup and some flashcard fixes

---
 src/client/apis/gpt/setup.ts                       |   1 +
 src/client/util/CurrentUserUtils.ts                |   3 +-
 src/client/views/nodes/ComparisonBox.tsx           | 162 +++++++++------------
 src/client/views/nodes/DocumentView.tsx            |   6 +-
 .../views/nodes/formattedText/FormattedTextBox.tsx |   4 +-
 src/client/views/pdf/AnchorMenu.tsx                |  10 +-
 6 files changed, 80 insertions(+), 106 deletions(-)

(limited to 'src/client/util')

diff --git a/src/client/apis/gpt/setup.ts b/src/client/apis/gpt/setup.ts
index 831c97eaa..7084f38bf 100644
--- a/src/client/apis/gpt/setup.ts
+++ b/src/client/apis/gpt/setup.ts
@@ -5,6 +5,7 @@ export enum GPTCallType {
     SUMMARY = 'summary',
     COMPLETION = 'completion',
     EDIT = 'edit',
+    FLASHCARD = 'flashcard',
 }
 
 export type GPTCallOpts = {
diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index b9c4d8b5f..e095bc659 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -354,8 +354,7 @@ pie title Minerals in my tap water
                           creator:(opts:DocumentOptions)=> any // how to create the empty thing if it doesn't exist
               }[] = [
             {key: "Note",       creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true }},
-            {key: "Flashcard", creator: opts => Docs.Create.ComparisonDocument("", opts), opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
-            // {key: "Flashcard",  creator: opts => Docs.Create.TextDocument("", opts),        opts: { _width: 200, _layout_autoHeight: true, _layout_enableAltContentUI: true}},
+            {key: "Flashcard",  creator: opts => Docs.Create.ComparisonDocument("", opts),  opts: { _layout_isFlashcard: true, _width: 300, _height: 300}},
             {key: "Image",      creator: opts => Docs.Create.ImageDocument("", opts),       opts: { _width: 400, _height:400 }},
             {key: "Equation",   creator: opts => Docs.Create.EquationDocument("",opts),     opts: { _width: 300, _height: 35, }},
             {key: "Noteboard",  creator: opts => Docs.Create.NoteTakingDocument([], opts),  opts: { _width: 250, _height: 200, _layout_fitWidth: true}},
diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 84d14d4ef..5dd3cc9b0 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -170,9 +170,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             e,
             moveEv => {
                 const de = new DragManager.DocumentDragData([DocCast(this.dataDoc[which])], dropActionType.move);
-                de.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => {
-                    return addDocument(doc);
-                };
+                de.moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => addDocument(doc);
                 de.canEmbed = true;
                 DragManager.StartDocumentDrag([this._closeRef.current!], de, moveEv.clientX, moveEv.clientY);
                 return true;
@@ -235,7 +233,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * Changes the view option to hover for a flashcard.
      */
     hoverFlip = (side: string | undefined) => {
-        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
+        if (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'hover') this.layoutDoc[`_${this._props.fieldKey}_usePath`] = side;
     };
 
     /**
@@ -248,12 +246,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 <div
                     className="formattedTextBox-alternateButton"
                     onPointerDown={e =>
-                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, e => {
+                        setupMoveUpEvents(e.target, e, returnFalse, emptyFunction, () => {
                             console.log(this.layoutDoc[`_${this._props.fieldKey}_revealOp`]);
-                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] == 'flip') {
+                            if (!this.layoutDoc[`_${this._props.fieldKey}_revealOp`] || this.layoutDoc[`_${this._props.fieldKey}_revealOp`] === 'flip') {
                                 this.flipFlashcard();
-                                console.log('Print Front of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
-                                console.log('Print Back of cards: ' + RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
+                                console.log('Print Front of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text ?? ''));
+                                console.log('Print Back of cards: ' + (RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text ?? ''));
                             }
                         })
                     }
@@ -289,7 +287,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         const queryText = questionText + ' UserAnswer: ' + this.inputValue + '. ' + rubricText;
 
         try {
-            let res = await gptAPICall(queryText, GPTCallType.QUIZ);
+            const res = await gptAPICall(queryText, GPTCallType.QUIZ);
             if (!res) {
                 console.error('GPT call failed');
                 return;
@@ -302,19 +300,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     };
 
     render() {
-        const clearButton = (which: string) => {
-            return (
-                <Tooltip title={<div className="dash-tooltip">remove</div>}>
-                    <div
-                        ref={this._closeRef}
-                        className={`clear-button ${which}`}
-                        onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
-                    >
-                        <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
-                    </div>
-                </Tooltip>
-            );
-        };
+        const clearButton = (which: string) => (
+            <Tooltip title={<div className="dash-tooltip">remove</div>}>
+                <div
+                    ref={this._closeRef}
+                    className={`clear-button ${which}`}
+                    onPointerDown={e => this.closeDown(e, which)} // prevent triggering slider movement in registerSliding
+                >
+                    <FontAwesomeIcon className={`clear-button ${which}`} icon="times" size="sm" />
+                </div>
+            </Tooltip>
+        );
         const displayDoc = (whichSlot: string) => {
             const whichDoc = DocCast(this.dataDoc[whichSlot]);
             const targetDoc = DocCast(whichDoc?.annotationOn, whichDoc);
@@ -334,9 +330,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         moveDocument={whichSlot.endsWith('1') ? this.moveDoc1 : this.moveDoc2}
                         removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2}
                         NativeWidth={() => NumCast(this.layoutDoc.width, 200)}
-                        NativeHeight={(): number => {
-                            return NumCast(this.layoutDoc.height, 200);
-                        }}
+                        NativeHeight={(): number => NumCast(this.layoutDoc.height, 200)}
                         isContentActive={emptyFunction}
                         isDocumentActive={returnFalse}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
@@ -358,112 +352,90 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             </div>
         );
 
-        const displayBoxReveal = (which: string, which2: string, index: number, cover: number) => {
-            return (
-                <div style={{ display: 'flex', flexDirection: 'column' }}>
-                    <div
-                        className={`beforeBox-cont`}
-                        key={which}
-                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
-                        onPointerDown={e => this.registerSliding(e, cover)}
-                        ref={ele => this.createDropTarget(ele, which, 0)}>
-                        {displayDoc(which)}
-                    </div>
-                    <div
-                        className={`afterBox-cont`}
-                        key={which2}
-                        style={{ width: this._props.PanelWidth(), height: NumCast(this.layoutDoc.height, 200) / 2 }}
-                        onPointerDown={e => this.registerSliding(e, cover)}
-                        ref={ele => this.createDropTarget(ele, which2, 1)}>
-                        {displayDoc(which2)}
-                    </div>
-                </div>
-            );
-        };
-
         if (this.Document._layout_isFlashcard) {
             const side = this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 1 : 0;
 
             // add text box to each side when comparison box is first created
-            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] == 'empty')) {
+            if (!(this.dataDoc[this.fieldKey + '_0'] || this.dataDoc[this.fieldKey + '_0'] === 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[1]);
                 // if there is text from the pdf ai cards, put the question on the front side.
+                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[1];
                 this.addDoc(newDoc, this.fieldKey + '_0');
             }
-            if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] == 'empty')) {
+            if (!(this.dataDoc[this.fieldKey + '_1'] || this.dataDoc[this.fieldKey + '_1'] === 'empty')) {
                 const dataSplit = StrCast(this.dataDoc.data).split('Answer');
                 const newDoc = Docs.Create.TextDocument(dataSplit[0]);
                 // if there is text from the pdf ai cards, put the answer on the alternate side.
+                // eslint-disable-next-line prefer-destructuring
                 newDoc[DocData].text = dataSplit[0];
                 this.addDoc(newDoc, this.fieldKey + '_1');
             }
 
             // render the QuizCards
-            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer)[`filterOp`] == 'quiz') {
+            if (DocCast(this.Document.embedContainer) && DocCast(this.Document.embedContainer).filterOp === 'quiz') {
                 return (
                     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
                         <p style={{ color: 'white', padding: 10 }}>{StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)}</p>
                         {/* {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text)} */}
-                        <div className={'input-box'}>
-                            {
-                                <textarea
-                                    value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
-                                    onChange={this.handleInputChange}
-                                    readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
-                                />
-                            }
+                        <div className="input-box">
+                            <textarea
+                                value={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this.outputValue : this.inputValue}
+                                onChange={this.handleInputChange}
+                                readOnly={this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate'}
+                            />
                         </div>
                         <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'none' : 'flex' }}>
-                            <button onClick={this.handleRenderGPTClick}>Submit</button>
+                            <button type="button" onClick={this.handleRenderGPTClick}>
+                                Submit
+                            </button>
                         </div>
                         <div className="submit-button" style={{ display: this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? 'flex' : 'none' }}>
-                            <button onClick={this.handleRenderClick}>Edit Your Response</button>
+                            <button type="button" onClick={this.handleRenderClick}>
+                                Edit Your Response
+                            </button>
                         </div>
                     </div>
                 );
             }
 
             // render a normal flashcard when not a QuizCard
-            else {
-                return (
-                    <div
-                        className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
-                        style={{ display: 'flex', flexDirection: 'column' }}
-                        onMouseEnter={() => {
-                            this.hoverFlip('alternate');
-                        }}
-                        onMouseLeave={() => {
-                            this.hoverFlip(undefined);
-                        }}>
-                        {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
-                        {this.overlayAlternateIcon}
-                    </div>
-                );
-            }
-        } else {
-            // render a comparison box that compares items side by side
             return (
-                <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
-                    {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
-                    <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
-                        {displayBox(`${this.fieldKey}_1`, 0, 0)}
-                    </div>
-
-                    <div
-                        className="slide-bar"
-                        style={{
-                            left: `calc(${this.clipWidth + '%'} - 0.5px)`,
-                            cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
-                        }}
-                        onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
-                    >
-                        <div className="slide-handle" />
-                    </div>
+                <div
+                    className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
+                    style={{ display: 'flex', flexDirection: 'column' }}
+                    onMouseEnter={() => {
+                        this.hoverFlip('alternate');
+                    }}
+                    onMouseLeave={() => {
+                        this.hoverFlip(undefined);
+                    }}>
+                    {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
+                    {this.overlayAlternateIcon}
                 </div>
             );
         }
+        // render a comparison box that compares items side by side
+        return (
+            <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}` /* change className to easily disable/enable pointer events in CSS */}>
+                {displayBox(`${this.fieldKey}_2`, 1, this._props.PanelWidth() - 3)}
+                <div className="clip-div" style={{ width: this.clipWidth + '%', transition: this._animating, background: StrCast(this.layoutDoc._backgroundColor, 'gray') }}>
+                    {displayBox(`${this.fieldKey}_1`, 0, 0)}
+                </div>
+
+                <div
+                    className="slide-bar"
+                    style={{
+                        left: `calc(${this.clipWidth + '%'} - 0.5px)`,
+                        cursor: this.clipWidth < 5 ? 'e-resize' : this.clipWidth / 100 > (this._props.PanelWidth() - 5) / this._props.PanelWidth() ? 'w-resize' : undefined,
+                    }}
+                    onPointerDown={e => !this._isAnyChildContentActive && this.registerSliding(e, this._props.PanelWidth() / 2)} /* if clicked, return slide-bar to center */
+                >
+                    <div className="slide-handle" />
+                </div>
+            </div>
+        );
     }
 }
 
diff --git a/src/client/views/nodes/DocumentView.tsx b/src/client/views/nodes/DocumentView.tsx
index fca6cda81..7a1f94948 100644
--- a/src/client/views/nodes/DocumentView.tsx
+++ b/src/client/views/nodes/DocumentView.tsx
@@ -504,7 +504,7 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
     askGPT = async (): Promise<string | undefined> => {
         const queryText = RTFCast(DocCast(this.dataDoc[this.props.fieldKey + '_1']).text)?.Text;
         try {
-            let res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
+            const res = await gptAPICall('Question: ' + StrCast(queryText), GPTCallType.CHATCARD);
             if (!res) {
                 console.error('GPT call failed');
                 return;
@@ -585,8 +585,8 @@ export class DocumentViewInternal extends DocComponent<FieldViewProps & Document
             if (this.Document._layout_isFlashcard) {
                 const revealOptions = cm.findByDescription('Reveal Options');
                 const revealItems: ContextMenuProps[] = revealOptions && 'subitems' in revealOptions ? revealOptions.subitems : [];
-                revealItems.push({ description: 'Hover', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'), icon: 'hand-point-up' });
-                revealItems.push({ description: 'Flip', event: () => (this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'), icon: 'rotate' });
+                revealItems.push({ description: 'Hover', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover'; }, icon: 'hand-point-up' }); // prettier-ignore
+                revealItems.push({ description: 'Flip', event: () => { this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip'; }, icon: 'rotate' }); // prettier-ignore
                 !revealOptions && cm.addItem({ description: 'Reveal Options', addDivider: false, noexpand: true, subitems: revealItems, icon: 'layer-group' });
             }
 
diff --git a/src/client/views/nodes/formattedText/FormattedTextBox.tsx b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
index 9ccd95f24..9f2a9b8e1 100644
--- a/src/client/views/nodes/formattedText/FormattedTextBox.tsx
+++ b/src/client/views/nodes/formattedText/FormattedTextBox.tsx
@@ -925,7 +925,9 @@ export class FormattedTextBox extends ViewBoxAnnotatableComponent<FormattedTextB
             const usepath = this.layoutDoc[`_${this._props.fieldKey}_usePath`];
             appearanceItems.push({
                 description: (this.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate:hover' ? 'no hover' : 'hover') + ' to show alt content',
-                event: () => (this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usepath === 'alternate' || usepath === undefined ? 'alternate:hover' : undefined),
+                event: () => {
+                    this.layoutDoc[`_${this._props.fieldKey}_usePath`] = usepath === 'alternate' || usepath === undefined ? 'alternate:hover' : undefined;
+                },
                 icon: !this.Document._layout_enableAltContentUI ? 'eye-slash' : 'eye',
             });
         }
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index b7247a034..745e809db 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -78,13 +78,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Invokes the API with the selected text and stores it in the summarized text.
      * @param e pointer down event
      */
-    gptSummarize = async (e: React.PointerEvent) => {
+    gptSummarize = async () => {
         GPTPopup.Instance.setVisible(true);
         GPTPopup.Instance.setMode(GPTPopupMode.SUMMARY);
         GPTPopup.Instance.setLoading(true);
 
         try {
-            const res = await gptAPICall(this.selectedText, GPTCallType.SUMMARY);
+            const res = await gptAPICall(this._selectedText, GPTCallType.SUMMARY);
             GPTPopup.Instance.setText(res || 'Something went wrong.');
         } catch (err) {
             console.error(err);
@@ -100,8 +100,8 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
      * Invokes the API with the selected text and stores it in the selected text.
      * @param e pointer down event
      */
-    gptFlashcards = async (e: React.PointerEvent) => {
-        const queryText = this.selectedText;
+    gptFlashcards = async () => {
+        const queryText = this._selectedText;
         try {
             const res = await gptAPICall(queryText, GPTCallType.FLASHCARD);
             console.log(res);
@@ -120,7 +120,7 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
         // put each question generated by GPT on the front of the flashcard
         const senArr = text.split('Question');
         const collectionArr: Doc[] = [];
-        for (var i = 1; i < senArr.length; i++) {
+        for (let i = 1; i < senArr.length; i++) {
             console.log('Arr ' + i + ': ' + senArr[i]);
             const newDoc = Docs.Create.ComparisonDocument(senArr[i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
             newDoc.text = senArr[i];
-- 
cgit v1.2.3-70-g09d2