feat: added grid of collections when sorting

2 files changed, 20 insertions, 3 deletions

diff --git a/src/client/views/KeywordBox.tsx b/src/client/views/KeywordBox.tsx
index 8c69f446d..d94f011f4 100644
--- a/src/client/views/KeywordBox.tsx
+++ b/src/client/views/KeywordBox.tsx
@@ -39,6 +39,7 @@ export class KeywordItem extends ObservableReactComponent<KeywordItemProps> {
     removeLabel = () => {
         if (this._props.doc[DocData].data_labels) {
             this._props.doc[DocData].data_labels = (this._props.doc[DocData].data_labels as List<string>).filter(label => label !== this._props.label) as List<string>;
+            this._props.doc![DocData][`${this._props.label}`] = false;
         }
     };
 
@@ -103,6 +104,7 @@ export class KeywordBox extends ObservableReactComponent<KeywordBoxProps> {
             }
 
             (this._props.doc![DocData].data_labels! as List<string>).push(this._currentInput.trim());
+            this._props.doc![DocData][`${this._currentInput}`] = true;
             this._currentInput = ''; // Clear the input box
         }
     };
diff --git a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
index 197681f62..07e3acb1d 100644
--- a/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
+++ b/src/client/views/collections/collectionFreeForm/MarqueeView.tsx
@@ -461,17 +461,32 @@ export class MarqueeView extends ObservableReactComponent<SubCollectionViewProps
 
         // Create new collections associated with each label and get the embeddings for the labels.
         let x_offset = 0;
+        let y_offset = 0;
+        let row_count = 0;
         for (const label of labelGroups) {
             const newCollection = this.getCollection([], undefined, false);
+            newCollection._width = 900;
+            newCollection._height = 900;
+            newCollection._x = this.Bounds.left;
+            newCollection._y = this.Bounds.top;
             newCollection._freeform_panX = this.Bounds.left + this.Bounds.width / 2;
             newCollection._freeform_panY = this.Bounds.top + this.Bounds.height / 2;
-            console.log(newCollection._x);
+            newCollection._x = (newCollection._x as number) + x_offset;
+            newCollection._y = (newCollection._y as number) + y_offset;
+            x_offset += (newCollection._width as number) + 40;
+            row_count += 1;
+            if (row_count == 3) {
+                y_offset += (newCollection._height as number) + 40;
+                x_offset = 0;
+                row_count = 0;
+            }
             labelToCollection.set(label, newCollection);
             this._props.addDocument?.(newCollection);
-            //newCollection._x = (newCollection._x as number) + x_offset;
-            //x_offset += newCollection._width as number;
+            console.log('added collection!');
         }
 
+        console.log(labelToCollection);
+
         for (const doc of selectedImages) {
             if (doc[DocData].data_label) {
                 Doc.AddDocToList(labelToCollection.get(doc[DocData].data_label as string)!, undefined, doc);