more cardView cleanup

16 files changed, 105 insertions, 233 deletions

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>
         );
     }
 }