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 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

(limited to 'src/client/documents')

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',
+                    },
                 },
             ],
             [
-- 
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/documents')

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/documents')

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/documents')

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/documents')

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 e0641c3175bc7cf53dea924524e51f1eefa6a8b1 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Mon, 18 Mar 2024 13:39:34 -0400
Subject: the lack of pushing is astounding actually

---
 src/client/documents/DocumentTypes.ts              |   4 +-
 src/client/documents/Documents.ts                  |  47 ++++++
 .../views/collections/CollectionCardDeckView.tsx   | 164 +++++++++++++++++++++
 src/client/views/collections/CollectionView.tsx    |   5 +
 .../CollectionFreeFormLayoutEngines.tsx            |  34 +++++
 .../collectionFreeForm/CollectionFreeFormView.tsx  |   4 +-
 .../collections/collectionFreeForm/MarqueeView.tsx |  20 ++-
 7 files changed, 274 insertions(+), 4 deletions(-)
 create mode 100644 src/client/views/collections/CollectionCardDeckView.tsx

(limited to 'src/client/documents')

diff --git a/src/client/documents/DocumentTypes.ts b/src/client/documents/DocumentTypes.ts
index 1123bcac9..209b34f91 100644
--- a/src/client/documents/DocumentTypes.ts
+++ b/src/client/documents/DocumentTypes.ts
@@ -62,5 +62,7 @@ export enum CollectionViewType {
     Pile = 'pileup',
     StackedTimeline = 'stacked timeline',
     NoteTaking = 'notetaking',
-    Calendar = 'calendar'
+    Calendar = 'calendar',
+    Card = 'card'
+
 }
diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 17cb6fef8..d12c61fd7 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1219,6 +1219,15 @@ 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);
         }
@@ -1876,6 +1885,44 @@ export namespace DocUtils {
             return newCollection;
         }
     }
+
+    export function spreadCards(docList: Doc[], x: number = 0, y: number = 0, spreadAngle: number = 30, radius: number = 100, create: boolean = true) {
+        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; // Assuming 'd.rotation' sets the rotation, adjust accordingly
+                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/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
new file mode 100644
index 000000000..feb9e61cc
--- /dev/null
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -0,0 +1,164 @@
+import { action, computed, IReactionDisposer, makeObservable } from 'mobx';
+import { observer } from 'mobx-react';
+import * as React from 'react';
+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 { 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 { CollectionSubView } from './CollectionSubView';
+import { dropActionType } from '../../util/DragManager';
+
+@observer
+export class CollectionCardView extends CollectionSubView() {
+    _originalChrome: any = '';
+    _disposers: { [name: string]: IReactionDisposer } = {};
+
+    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;
+    }
+    componentWillUnmount() {
+        this.layoutDoc._chromeHidden = this._originalChrome; 
+        Object.values(this._disposers).forEach(disposer => disposer?.());
+    }
+
+    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;
+    };
+
+    @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;
+    };
+
+    @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';
+    }
+
+    // returns the contents of the cardSpread in a CollectionFreeFormView
+    @computed get contents() {
+        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>
+        );
+    }
+
+    // // 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
+    };
+
+    // onClick for toggling the pileup view
+    // @undoBatch
+    // onClick = (e: React.MouseEvent) => {
+    //     if (e.button === 0) {
+    //         SelectionManager.DeselectAll();
+    //         this.toggleStarburst();
+    //         e.stopPropagation();
+    //     }
+    // };
+
+    render() {
+        return (
+            <div className={`collectionPileView`} 
+            // onClick={this.onClick} 
+            onPointerDown={this.pointerDown} style={{ width: this._props.PanelWidth(), height: '100%' }}>
+                {this.contents}
+            </div>
+        );
+    }
+}
diff --git a/src/client/views/collections/CollectionView.tsx b/src/client/views/collections/CollectionView.tsx
index 18eb4dd1f..b7805bf3f 100644
--- a/src/client/views/collections/CollectionView.tsx
+++ b/src/client/views/collections/CollectionView.tsx
@@ -33,6 +33,8 @@ import { CollectionLinearView } from './collectionLinear';
 import { CollectionMulticolumnView } from './collectionMulticolumn/CollectionMulticolumnView';
 import { CollectionMultirowView } from './collectionMulticolumn/CollectionMultirowView';
 import { CollectionSchemaView } from './collectionSchema/CollectionSchemaView';
+import { CollectionCardView } from './CollectionCardDeckView';
+
 export interface CollectionViewProps extends React.PropsWithChildren<FieldViewProps> {
     isAnnotationOverlay?: boolean; // is the collection an annotation overlay (eg an overlay on an image/video/etc)
     isAnnotationOverlayScrollable?: boolean; // whether the annotation overlay can be vertically scrolled (just for tree views, currently)
@@ -134,6 +136,9 @@ export class CollectionView extends ViewBoxAnnotatableComponent<CollectionViewPr
             case CollectionViewType.Masonry:      return <CollectionStackingView    key="collview" {...props} />;
             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 b8c0967c1..e972f44f1 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLayoutEngines.tsx
@@ -126,6 +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
+
+    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',
+        });
+    });
+
+    // 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>();
     const fieldKey = 'data';
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 1fd453e96..f9fe306fa 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -49,7 +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 } 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,6 +1383,8 @@ 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) };
     }
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index b913e05ad..d0ac5f6db 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -383,6 +383,18 @@ 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.
@@ -508,6 +520,7 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
     @action
     marqueeCommand = (e: KeyboardEvent) => {
+
         if (this._commandExecuted || (e as any).propagationIsStopped) {
             return;
         }
@@ -518,7 +531,8 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
             this.delete(e, e.key === 'h');
             e.stopPropagation();
         }
-        if ('ctsSpg'.indexOf(e.key) !== -1) {
+        if ('ctsSpga'.indexOf(e.key) !== -1) {
+
             this._commandExecuted = true;
             e.stopPropagation();
             e.preventDefault();
@@ -526,7 +540,9 @@ 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 === 'p') this.pileup(e)
+            if (e.key === 'a') this.spreadCards(e);
+
             this.cleanupInteractions(false);
         }
         if (e.key === 'r' || e.key === ' ') {
-- 
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/documents')

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 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/documents')

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 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/documents')

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 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/documents')

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/documents')

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/documents')

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 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/documents')

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/documents')

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 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/documents')

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 0b32642fc9c2d33810252cd90e45b8b505ef49b2 Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Sat, 18 May 2024 00:16:31 -0400
Subject: done :)

---
 src/client/documents/Documents.ts                  |  14 +-
 .../views/collections/CollectionCardDeckView.tsx   | 188 +++++++++++----------
 2 files changed, 112 insertions(+), 90 deletions(-)

(limited to 'src/client/documents')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index eded2b485..80774f4ad 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -501,8 +501,20 @@ 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>
+    // 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');
diff --git a/src/client/views/collections/CollectionCardDeckView.tsx b/src/client/views/collections/CollectionCardDeckView.tsx
index 42c82ca74..c719c9e19 100644
--- a/src/client/views/collections/CollectionCardDeckView.tsx
+++ b/src/client/views/collections/CollectionCardDeckView.tsx
@@ -33,7 +33,8 @@ export class CollectionCardView extends CollectionSubView() {
     // documents themselves
 
     @observable hoveredNodeIndex = -1;
-    //index to group
+
+    //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>()];
 
 
@@ -43,9 +44,9 @@ export class CollectionCardView extends CollectionSubView() {
 
         // console.log("Active Groups:", activeGroups);
 
-        for (let i=0; i< activeGroups.length; i++){
-            console.log("Active Groups" + activeGroups[i])
-        }
+        // 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) {
@@ -121,10 +122,32 @@ export class CollectionCardView extends CollectionSubView() {
         super(props);
         makeObservable(this);
         // this.rotationDegree(7);
+        const pairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK);
+
 
-        if (this._props.Document.customHashMap != undefined){
-            this.customGroupDictionary = this.getCustoms(StrListCast(this._props.Document.customHashMap))
+        for (let i=0; i< pairs.length; i++){
+            if (pairs[i].layout.custom1Group != undefined){
+                this.customGroupDictionary[0].set(i, NumCast(pairs[i].layout.custom1Group))
+            }
+
+            if (pairs[i].layout.custom2Group != undefined){
+                this.customGroupDictionary[1].set(i, NumCast(pairs[i].layout.custom2Group))
+            }
+
+            if (pairs[i].layout.custom3Group != undefined){
+                this.customGroupDictionary[2].set(i, NumCast(pairs[i].layout.custom3Group))
+            }
+
+            if (pairs[i].layout.chatGroup != undefined){
+                this.gptGroups.set(pairs[i].layout, NumCast(pairs[i].layout.chatGroup))
+                this.amGPTGroups = NumCast(this._props.Document.chatAmGroups)
+
+            }
         }
+
+        // if (this._props.Document.customHashMap != undefined){
+        //     this.customGroupDictionary = this.convertListsToArrayOfMaps(DocListCast(this._props.Document.customGroup1),DocListCast(this._props.Document.customGroup2), DocListCast(this._props.Document.customGroup3))
+        // }
         // this._props.Document.visibleGroupNumbers = new List<number>([1,2,3,4])
 
 
@@ -139,32 +162,52 @@ export class CollectionCardView extends CollectionSubView() {
         );
     }
 
+    //converts the customGroupDictionary into a Lists of Docs
+    mapToField(groupNumber: number) {
+        const groupList = new List<Doc>();
+    
+        const pairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK);
+        console.log(groupNumber+ "group#")
+    
+        this.customGroupDictionary[groupNumber].forEach((group, index) => {
+            const doc = pairs[index].layout;
+            groupList.push(doc);
+        });
+    
+        this._props.Document[`group${groupNumber}`] = groupList;
+    }
 
-    @computed get mapToField(): List<string> {
-        const resultList = new List<string>(); 
-
-        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
+    // This function converts three Lists of Docs back into an array of maps
+    convertListsToArrayOfMaps = (group0: Doc[], group1: Doc[], group2: Doc[]): Map<number, number>[] => {
+        const mapsArray: Map<number, number>[] = [
+            new Map<number, number>(),
+            new Map<number, number>(),
+            new Map<number, number>()
+        ];
+        const layoutPairs = this.childLayoutPairs.filter(d => d.layout.type != DocumentType.LINK)
+
+        group0.forEach((doc, index) => {
+            const docIndex = layoutPairs.findIndex(pair => pair.layout === doc);
+            if (docIndex !== -1) {
+                mapsArray[0].set(docIndex, 0);
+            }
         });
 
-        return resultList;
-    }
+        group1.forEach((doc, index) => {
+            const docIndex = layoutPairs.findIndex(pair => pair.layout === doc);
+            if (docIndex !== -1) {
+                mapsArray[1].set(docIndex, 1);
+            }
+        });
 
-    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;
+        group2.forEach((doc, index) => {
+            const docIndex = layoutPairs.findIndex(pair => pair.layout === doc);
+            if (docIndex !== -1) {
+                mapsArray[2].set(docIndex, 2);
+            }
         });
+
+        return mapsArray;
     }
 
 
@@ -278,17 +321,6 @@ export class CollectionCardView extends CollectionSubView() {
 
 
     @computed get sortedDocsType() {
-        // if (this._props.Document.cardSort === 'chat'){
-        //     this.openChatPopup()
-        //     const textDesc = await this.childPairStringList();
-        //     GPTPopup.Instance.setSortDesc(textDesc)
-        // }
-
-        // if (this._props.Document.cardSort === 'chat' && this.sortedDocs.length === 0) {
-
-        //     this.smartSort(); // Trigger the sorting if it hasn't been done yet
-        //     return { docs: [] }; // Return an empty array or a loading state
-        // }
 
     
         const desc = BoolCast(this.layoutDoc.sortDesc);
@@ -374,9 +406,9 @@ export class CollectionCardView extends CollectionSubView() {
 
                 // console.log(this.customGroupDictionary[NumCast(this._props.Document.customSortNumber)])
                     typeA = this.gptGroups.get(docA.layout) ?? '9999';
-                    console.log(typeA + "typea")
+                    // console.log(typeA + "typea")
                     typeB = this.gptGroups.get(docB.layout) ?? '9999';
-                    console.log(typeB + "typeB")
+                    // console.log(typeB + "typeB")
 
 
                     // console.log(typeA + "A")
@@ -539,35 +571,45 @@ export class CollectionCardView extends CollectionSubView() {
                     onMouseEnter={() => this.setHoveredNodeIndex(index)}>
                     {this.displayDoc(childPair, childScreenToLocal)}
 
-                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex) : ''}
+                    {this._props.Document.cardSort == 'custom' ? this.renderButtons(childPairIndex, childPair.layout, false) : ''}
                     {this._props.Document.cardSort == 'chat' ? this.renderButtons(childPairIndex, childPair.layout, true) : ''}
 
                 </div>
             );
         });
     }
+  
 
-    
-
-   
-    
-    
-
-    @action toggleButton(childPairIndex: number, buttonID: number, isChat = false, doc?: Doc) {
+    @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;
+            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
+            }
+            // this.mapToField(buttonID);
         }
     
         if (isChat && doc) {
             this.gptGroups.set(doc, buttonID);
+            doc.chatGroup = 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));
-        }
+        // if (isChat && doc) {
+        //     // console.log(`Updated gptGroups for doc ${doc}:`, this.gptGroups.get(doc));
+        // }
     }
     
 
@@ -645,39 +687,6 @@ export class CollectionCardView extends CollectionSubView() {
         }
     }
 
-   
-
-    //a set of all the images that have already been given desc
-    //a map from the text to the Doc (for everything)
-    
-
-    // @action async smartSort() {
-    //     this.isLoading = true;
-    //     console.log("loading");
-        
-    //     // 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;
-        
-    //         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 ObservableMap<Doc, number>
     @observable amGPTGroups = 0
@@ -688,6 +697,7 @@ export class CollectionCardView extends CollectionSubView() {
         // 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
@@ -730,7 +740,7 @@ export class CollectionCardView extends CollectionSubView() {
 
     
 
-    renderButtons(childPairIndex: number, doc?: Doc, isChat = false) {
+    renderButtons(childPairIndex: number, doc: Doc, isChat = false) {
         const buttons = []; // Array to hold the button elements
         const groupNumber = NumCast(this._props.Document.customSortNumber);
     
@@ -744,11 +754,11 @@ export class CollectionCardView extends CollectionSubView() {
             activeButtonIndex = this.gptGroups.get(doc);
         }
     
-        console.log("childPairIndex:", childPairIndex, "activeButtonIndex:", activeButtonIndex, "groupNumber:", groupNumber);
+        // console.log("childPairIndex:", childPairIndex, "activeButtonIndex:", activeButtonIndex, "groupNumber:", groupNumber);
     
         for (let i = 0; i < amButtons; i++) {
             const isActive = activeButtonIndex === i;
-            console.log(`Rendering button ${i} for childPairIndex ${childPairIndex} isActive: ${isActive}`);
+            // console.log(`Rendering button ${i} for childPairIndex ${childPairIndex} isActive: ${isActive}`);
             buttons.push(
                 <button
                     key={i}
-- 
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/documents')

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 a3784cd3ab990d8016b1168eb0cbf7e9a2f22301 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Sat, 18 May 2024 23:27:45 -0400
Subject: from last

---
 src/client/documents/Documents.ts                               | 1 -
 src/client/views/collections/CollectionMenu.tsx                 | 2 --
 src/client/views/collections/collectionFreeForm/MarqueeView.tsx | 1 -
 3 files changed, 4 deletions(-)

(limited to 'src/client/documents')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 903bd907a..16a4725f9 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -1889,7 +1889,6 @@ export namespace DocUtils {
             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/views/collections/CollectionMenu.tsx b/src/client/views/collections/CollectionMenu.tsx
index 94896f277..4f25f69ef 100644
--- a/src/client/views/collections/CollectionMenu.tsx
+++ b/src/client/views/collections/CollectionMenu.tsx
@@ -319,8 +319,6 @@ 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/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 25a31fd6e..6eca91e9d 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -529,7 +529,6 @@ 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);
-
             this.cleanupInteractions(false);
         }
         if (e.key === 'r' || e.key === ' ') {
-- 
cgit v1.2.3-70-g09d2


From a7f5bd1c2438f95252f5515d7226b491dfb5183b Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Fri, 24 May 2024 11:27:56 -0400
Subject: lint fixes

---
 src/client/documents/Documents.ts                  | 20 +------
 .../collectionFreeForm/CollectionFreeFormView.tsx  | 66 +++++++++++-----------
 2 files changed, 34 insertions(+), 52 deletions(-)

(limited to 'src/client/documents')

diff --git a/src/client/documents/Documents.ts b/src/client/documents/Documents.ts
index 640fb251d..a67e6b4f6 100644
--- a/src/client/documents/Documents.ts
+++ b/src/client/documents/Documents.ts
@@ -5,22 +5,7 @@ import { reaction } from 'mobx';
 import { basename } from 'path';
 import { ClientUtils, OmitKeys } from '../../ClientUtils';
 import { DateField } from '../../fields/DateField';
-import {
-    ActiveArrowEnd,
-    ActiveArrowStart,
-    ActiveDash,
-    ActiveFillColor,
-    ActiveInkBezierApprox,
-    ActiveInkColor,
-    ActiveEraserWidth,
-    ActiveInkWidth,
-    ActiveIsInkMask,
-    CreateLinkToActiveAudio,
-    Doc,
-    FieldType,
-    Opt,
-    updateCachedAcls,
-} from '../../fields/Doc';
+import { ActiveArrowEnd, ActiveArrowStart, ActiveDash, ActiveFillColor, ActiveInkBezierApprox, ActiveInkColor, ActiveInkWidth, ActiveIsInkMask, CreateLinkToActiveAudio, Doc, FieldType, Opt, updateCachedAcls } from '../../fields/Doc';
 import { Initializing } from '../../fields/DocSymbols';
 import { HtmlField } from '../../fields/HtmlField';
 import { InkField } from '../../fields/InkField';
@@ -852,7 +837,6 @@ export namespace Docs {
             points: PointData[],
             options: DocumentOptions = {},
             strokeWidth = ActiveInkWidth(),
-            eraserWidth = ActiveEraserWidth(),
             color = ActiveInkColor(),
             strokeBezier = ActiveInkBezierApprox(),
             fillColor = ActiveFillColor(),
@@ -963,7 +947,7 @@ 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) {
+        export function CardDeckDocument(documents: Array<Doc>, options: DocumentOptions) {
             return InstanceFromProto(Prototypes.get(DocumentType.COL), new List(documents), { ...options, _type_collection: CollectionViewType.Card });
         }
 
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index be96b914c..b6e1fca77 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -894,7 +894,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                             const inkList = strokeToTVals.get(inkView);
                             if (inkList !== undefined) {
                                 const tValOffset = ActiveEraserWidth() / 1050; // 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);
+                                const inList = inkList.some(ival => Math.abs(ival - (t + Math.floor(i / 4))) <= tValOffset);
                                 if (!inList) {
                                     inkList.push(t + Math.floor(i / 4));
                                 }
@@ -1007,7 +1007,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
         let segment2: Segment = [];
         const { inkData } = (ink?.ComponentView as InkingStroke).inkScaledData();
         let intersections: number[] = []; // list of the ink stroke's intersections
-        let segmentIndexes: number[] = []; // list of indexes of the curve's segment where each intersection occured
+        const segmentIndexes: number[] = []; // list of indexes of the curve's segment where each intersection occured
 
         // loops through each segment and adds intersections to the list
         for (let i = 0; i < inkData.length - 3; i += 4) {
@@ -1034,7 +1034,7 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
 
         if (intersections.length) {
             // this is the indexes of the closest intersection(s)
-            let closestTs = this.getClosestTs(intersections, excludeT, 0, intersections.length - 1);
+            const closestTs = this.getClosestTs(intersections, excludeT, 0, intersections.length - 1);
 
             // find the segments that need to be split
             let splitSegment1 = -1; // stays -1 if left end is deleted
@@ -1095,23 +1095,22 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     } else if (hasSplit && !continueErasing) {
                         segment2.push(inkSegment);
                     }
-                } else {
-                    // case where last end is erased
-                    if (currCurveT === segmentIndexes[0] && isClosedCurve) {
-                        if (isClosedCurve && currCurveT === segmentIndexes.lastElement()) {
-                            segment1.push(inkSegment.split(intersections[0] - currCurveT, intersections.lastElement() - currCurveT));
-                            continueErasing = true;
-                        } else {
-                            segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
-                        }
-                        hasSplit = true;
-                    } else if (currCurveT === splitSegment1) {
-                        segment1.push(inkSegment.split(0, intersections[closestTs[0]] - currCurveT));
-                        hasSplit = true;
+                }
+                // case where last end is erased
+                else if (currCurveT === segmentIndexes[0] && isClosedCurve) {
+                    if (isClosedCurve && currCurveT === segmentIndexes.lastElement()) {
+                        segment1.push(inkSegment.split(intersections[0] - currCurveT, intersections.lastElement() - currCurveT));
                         continueErasing = true;
-                    } else if ((isClosedCurve && hasSplit && !continueErasing) || (!isClosedCurve && !hasSplit)) {
-                        segment1.push(inkSegment);
+                    } else {
+                        segment1.push(inkSegment.split(intersections[0] - currCurveT, 1));
                     }
+                    hasSplit = true;
+                } else if (currCurveT === splitSegment1) {
+                    segment1.push(inkSegment.split(0, intersections[closestTs[0]] - currCurveT));
+                    hasSplit = true;
+                    continueErasing = true;
+                } else if ((isClosedCurve && hasSplit && !continueErasing) || (!isClosedCurve && !hasSplit)) {
+                    segment1.push(inkSegment);
                 }
             }
         }
@@ -1144,22 +1143,21 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
     getClosestTs = (tVals: number[], excludeT: number, startIndex: number, endIndex: number): number[] => {
         if (tVals[startIndex] >= excludeT) {
             return [-1, startIndex];
-        } else if (tVals[endIndex] < excludeT) {
+        }
+        if (tVals[endIndex] < excludeT) {
             return [endIndex, -1];
-        } else {
-            const mid = Math.floor((startIndex + endIndex) / 2);
-            if (excludeT >= tVals[mid]) {
-                if (mid + 1 <= endIndex && tVals[mid + 1] > excludeT) {
-                    return [mid, mid + 1];
-                } else {
-                    return this.getClosestTs(tVals, excludeT, mid + 1, endIndex);
-                }
-            } else if (mid - 1 >= startIndex && tVals[mid - 1] < excludeT) {
-                return [mid - 1, mid];
-            } else {
-                return this.getClosestTs(tVals, excludeT, startIndex, mid - 1);
+        }
+        const mid = Math.floor((startIndex + endIndex) / 2);
+        if (excludeT >= tVals[mid]) {
+            if (mid + 1 <= endIndex && tVals[mid + 1] > excludeT) {
+                return [mid, mid + 1];
             }
+            return this.getClosestTs(tVals, excludeT, mid + 1, endIndex);
+        }
+        if (mid - 1 >= startIndex && tVals[mid - 1] < excludeT) {
+            return [mid - 1, mid];
         }
+        return this.getClosestTs(tVals, excludeT, startIndex, mid - 1);
     };
 
     // for some reason bezier.js doesn't handle the case of intersecting a linear curve, so we wrap the intersection
@@ -1212,10 +1210,10 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
                     if (apt.d !== undefined && apt.d < 1 && apt.t !== undefined && !tVals.includes(apt.t)) {
                         tVals.push(apt.t);
                     }
-                    this.bintersects(curve, otherCurve).forEach((val: string | number, i: number) => {
+                    this.bintersects(curve, otherCurve).forEach((val: string | number, ival: 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).
+                        if (ival % 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).
                     });
                     if (bpt.d !== undefined && bpt.d < 1 && bpt.t !== undefined && !tVals.includes(bpt.t)) {
                         tVals.push(bpt.t);
@@ -1775,8 +1773,8 @@ export class CollectionFreeFormView extends CollectionSubView<Partial<collection
             ({ code, first }) => {
                 if (!code.includes('dashDiv')) {
                     const script = CompileScript(code, { params: { docView: 'any' }, typecheck: false, editable: true });
-                    // eslint-disable-next-line no-eval
                     if (script.compiled) script.run({ this: this.DocumentView?.() });
+                    // eslint-disable-next-line no-eval
                 } else code && !first && eval?.(code);
             },
             { fireImmediately: true }
-- 
cgit v1.2.3-70-g09d2