1 files changed, 66 insertions, 9 deletions

diff --git a/src/client/views/nodes/IconTagBox.tsx b/src/client/views/nodes/IconTagBox.tsx
index 73360b684..cdf2075cb 100644
--- a/src/client/views/nodes/IconTagBox.tsx
+++ b/src/client/views/nodes/IconTagBox.tsx
@@ -16,6 +16,15 @@ import { BoolCast } from "../../../fields/Types";
 import { DocCast } from "../../../fields/Types";
 import './IconTagBox.scss';
 import { AclAdmin, AclAugment, AclEdit, DocData } from '../../../fields/DocSymbols';
+import { StrListCast } from "../../../fields/Doc";
+import { StrCast } from "../../../fields/Types";
+import { DocListCast } from "../../../fields/Doc";
+import { List } from "../../../fields/List";
+import { action } from "mobx";
+import { DragManager } from "../../util/DragManager";
+import { setupMoveUpEvents } from "../../../ClientUtils";
+import { returnFalse } from "../../../ClientUtils";
+import { emptyFunction } from "../../../Utils";
 
 
 export interface IconTagProps {
@@ -61,6 +70,53 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
         this._props.doc[DocData].tagHeight = 36*this.currentScale;
     }
 
+    // createCollection = () => {
+    //     // Get the documents that contain the keyword.
+    //     const selected = DocListCast(this.getKeywordCollectionDocs()!);
+    //     const newEmbeddings = selected.map(doc => Doc.MakeEmbedding(doc));
+
+    //     // Create a new collection and set up configurations.
+    //     const newCollection = ((doc: Doc) => {
+    //         const docData = doc[DocData];
+    //         docData.data = new List<Doc>(newEmbeddings);
+    //         docData.title = this._props.keyword;
+    //         doc._freeform_panX = doc._freeform_panY = 0;
+    //         return doc;
+    //     })(Doc.MakeCopy(Doc.UserDoc().emptyCollection as Doc, true));
+    //     newEmbeddings.forEach(embed => (embed.embedContainer = newCollection));
+    //     newCollection._width = 900;
+    //     newCollection._height = 900;
+    //     newCollection.layout_fitWidth = true;
+
+    //     // Add the collection to the keyword document's list of associated smart collections.
+    //     this._props.keywordDoc.collections = new List<Doc>([...DocListCast(this._props.keywordDoc.collections), newCollection]);
+    //     newCollection[DocData].data_labels = new List<string>([this._props.keyword]);
+    //     newCollection[DocData][`${this._props.keyword}`] = true;
+    //     newCollection[DocData].showLabels = true;
+    //     return newCollection;
+    // };
+
+    // @action
+    // handleDragStart = (e: React.PointerEvent) => {
+    //     if (this._props.isEditing) {
+    //         const clone = this.ref.current?.cloneNode(true) as HTMLElement;
+    //         if (!clone) return;
+
+    //         setupMoveUpEvents(
+    //             this,
+    //             e,
+    //             () => {
+    //                 const dragData = new DragManager.DocumentDragData([this.createCollection()]);
+    //                 DragManager.StartDocumentDrag([this.ref.current!], dragData, e.clientX, e.clientY, {});
+    //                 return true;
+    //             },
+    //             returnFalse,
+    //             emptyFunction
+    //         );
+    //         e.preventDefault();
+    //     }
+    // };
+
     /**
      * Renders the buttons to customize sorting depending on which group the card belongs to and the amount of total groups
      * @param doc
@@ -70,7 +126,10 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
     renderButtons = (doc: Doc): JSX.Element | null => {
         // if (cardSort !== cardSortings.Custom) return null;
 
-        const amButtons = 4
+        const amButtons = StrListCast(Doc.UserDoc().myFilterHotKeyTitles).length
+
+        const keys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+
 
         // const amButtons = Math.max(
         //     4,
@@ -86,11 +145,9 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
 
         const totalWidth = amButtons * 35 + amButtons * 2 * 5 + 6;
 
-        const iconMap: { [key: number]: any } = {
-            0: 'star',
-            1: 'heart',
-            2: 'cloud',
-            3: 'bolt'
+        const iconMap =  (buttonID: number)  => {
+            return StrCast(Doc.UserDoc()[keys[buttonID]])
+
         };
 
 
@@ -108,9 +165,9 @@ export class IconTagBox extends ObservableReactComponent<IconTagProps> {
             }}
             >           
                 {numberRange(amButtons).map(i => (
-                    <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap[i]} group</div>}>
-                        <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap[i] )}>
-                            {this.getButtonIcon(doc, iconMap[i])}
+                    <Tooltip key={i} title={<div className="dash-tooltip">Click to add/remove this card from the {iconMap(i)} group</div>}>
+                        <button key = {i} type="button" onClick={() => this.toggleButton(doc, iconMap(i) )}>
+                            {this.getButtonIcon(doc, iconMap(i))}
                         </button>
                     </Tooltip>
                 ))}