From 3ab5b620e462a35d0dc23f67014fc5aa9ef4803c Mon Sep 17 00:00:00 2001
From: aidahosa1 <aisosa_idahosa@brown.edu>
Date: Thu, 22 Aug 2024 03:03:03 -0400
Subject: liberty

---
 src/client/views/FilterPanel.tsx | 352 +++++++++++++++++++--------------------
 1 file changed, 176 insertions(+), 176 deletions(-)

(limited to 'src/client/views/FilterPanel.tsx')

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index e5f9fdb51..17c5cb173 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -41,6 +41,7 @@ import { Tooltip } from '@mui/material';
 import { useLocalObservable } from 'mobx-react';
 import { useRef } from 'react';
 import { useEffect } from 'react';
+import { useState } from 'react';
 
 
 interface filterProps {
@@ -240,157 +241,74 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
         return nonNumbers / facetValues.length > 0.1 ? facetValues.sort() : facetValues.sort((n1: string, n2: string) => Number(n1) - Number(n2));
     };
 
-    addHotkey() {
+    addHotkey(hotKey: string) {
         const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
         const filter = DocCast(buttons.Filter);
         const filter2 = DocCast(filter);
         const but2 = Doc.UserDoc().myContextMenuBtns;
 
-        console.log(DocCast(filter).data);
-
-        //[idToDoc("0bec0963-95ac-4978-8606-8af4c7b9badd"),idToDoc("f740e910-bf83-4ee3-b13a-1e63c49dd254"),idToDoc("61db82b0-025a-4cb9-937b-97b1290e8f1a"),idToDoc("1046859f-34ac-4421-bc07-ee2f2cf812e2"),idToDoc("badaff47-3c3a-4b78-a7d6-f2cbc8e45ba0")]
-
-        // const newCol = Docs.Create.CarouselDocument(DocListCast(doc[Doc.LayoutFieldKey(doc)]), {
-        //     _width: 250,
-        //     _height: 200,
-        //     _layout_fitWidth: false,
-        //     _layout_autoHeight: true,
-        // });
-
-        // CurrentUserUtils.setupContextMenuButtons()
-
-        // const hm = Docs.Create.FontIconDocument()
-
-        // DocumentView.getDocumentView(filter2)?.ComponentView?.addDocument?.(hm)
-
-        // console.log(DocumentView.getDocumentView(filter2) + "hiiiii")
-
-        // DocumentView.getDocumentView(DocCast(buttons['Card']))?.ComponentView?.addDocument?.(hm)
-
-        //         const hi = CurrentUserUtils.contextMenuTools()
 
         const newKey: Button = {
-            title: 'Bob',
-            icon: 'cloud',
-            toolTip: "Click to toggle the cloud group's visibility",
+            title: hotKey,
+            icon: 'bolt',
+            toolTip: `Click to toggle the ${hotKey}'s group's visibility`,
             btnType: ButtonType.ToggleButton,
             expertMode: false,
-            toolType: 'cloud',
+            toolType: 'bolt',
             funcs: {},
             scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
         };
 
         //         const heyy = [...hi, newKey]
 
-        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(['hi hi', 'supppp'])
+        const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
-        Doc.UserDoc()['hi hi'] = 'heart'
-        Doc.UserDoc()['supppp'] = 'star'
+        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey))
 
-        //         CurrentUserUtils.setupContextMenuButtons(Doc.UserDoc());
+        Doc.UserDoc()[hotKey] = 'bolt'
+        // Doc.UserDoc()['supppp'] = 'star'
 
-        //         Doc.UserDoc().hi = Docs.Create.FontIconDocument(
-        //            { title: '',
-        //                 icon: 'map-pin',
 
-        //                 backgroundColor: '#ACCEF7',
-        //                 layout_hideAllLinks: true,
-        //                 _width: 15,
-        //                 _height: 15,
-        //                 _xPadding: 0,
-        //    }
-        //         )
+        const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
+        newBtn.isSystem = newBtn[DocData].isSystem = undefined;
 
-        //         // buttons['Filter']
+        const subDocs = DocListCast(filter.data)
+        const opts = subDocs[subDocs.length-1]
+        Doc.AddDocToList(filter, 'data', newBtn, opts, true);
 
-        // const reqdCtxtOpts: DocumentOptions = {
-        //     title: 'Filter',
-        //     undoIgnoreFields: new List<string>(['width', 'linearView_IsOpen']),
-        //     flexGap: 0,
-        //     childDragAction: dropActionType.embed,
-        //     childDontRegisterViews: true,
-        //     linearView_IsOpen: true,
-        //     ignoreClick: true,
-        //     linearView_Expandable: false,
-        //     _height: 35,
-        // };
-        const ctxtMenuBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
-        ctxtMenuBtn.isSystem = ctxtMenuBtn[DocData].isSystem = undefined;
-        Doc.AddDocToList(filter, 'data', ctxtMenuBtn);
-        // // // DocUtils.AssignOpts(buttons, reqdCtxtOpts, ctxtMenuBtns);
-
-        //  DocUtils.AssignOpts(DocCast(buttons['Filter']), reqdCtxtOpts, [ctxtMenuBtns]);
+        
 
-        // newCol && dv.ComponentView?.addDocument?.(newCol);
+        // console.log(filter[DocData].data + 'ok')
+        // // console.log(filter[DocData][0] + 'help')
+        // console.log(filter[DocData] + 'good grief')
 
-        // console.log(but2 + "omgg")
+        // console.log(DocCast(DocCast(filter.data))[0])
+        // this.removeHotKey()
 
-        // doc.cardSort_activeIcons = new List<string>(list.includes(icon) ? list.filter(d => d !== icon) : [...list, icon]);
+        // console.log(DocCast(filter.data) + 'HI')
+        // console.log(DocListCast(filter.data) + 'WOOOOO')
+        // console.log(DocCast(filter.data)[0] + 'hm :(')
 
-        // Doc.UserDoc().myContextMenuBtns = new List<Doc>([...buttons, newKey as Doc])
     }
 
+    
+
     hotKeyButtons() {
         const selected = DocumentView.SelectedDocs().lastElement();
 
-        function isAttrFiltered(attr: string) {
-            if (selected && selected._childFilters != undefined && selected.type === DocumentType.COL) {
-                return StrListCast(selected._childFilters).some(filter => filter.includes(attr));
-            } else {
-                return false;
-            }
-            // return selected._childFilters ? StrListCast(selected._childFilters).some(filter => filter.includes(attr)) : false;
-        }
+        // console.log(StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + "hiii")
 
         const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
 
-        console.log(hotKeys + 'hiihihi');
-
-        const hi = ['star', 'heart', 'bolt'];
-
-        
-
-
-        //selecting a button should make t so that the the icon on the top filter panel becomes said icon
-
+        // hotKeys.forEach(l => console.log(l + "render"))
+    
+        // Selecting a button should make it so that the icon on the top filter panel becomes said icon
         const buttons = hotKeys.map((hotKey, i) => (
-            // <div key={i} className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` }
-            
-            // onClick={undoable((e: React.MouseEvent) => {
-
-            //     // if (e.target === e.currentTarget){
-            //         isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-            //     // }
-            // }, hotKey)}
-
-            // // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}}
-            
-            
-            // >
-                {/* <Toggle
-                    toggleStatus={isAttrFiltered(hotKey)}
-                    tooltip={'toggle filter'}
-                    text={hotKey}
-                    color={SettingsManager.userColor}
-                    icon={<FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any}/>}
-                    iconPlacement="left"
-                    align="flex-start"
-                    fillWidth
-                    toggleType={ToggleType.BUTTON}
-                    onClick={undoable(() => {
-                        isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-                    }, hotKey)}
-                /> */}
-                <>
-
-                    <Tooltip key={i} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
-                        <HotKeyIconButton hotKey = {hotKey} />
-
-                    </Tooltip>
-
-                   </> 
+            <Tooltip key={hotKey} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
+                <HotKeyIconButton hotKey={hotKey} selected = {selected}/>
+            </Tooltip>
         ));
-
+    
         return buttons;
     }
 
@@ -465,7 +383,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
                 <div>
                     <div className="filterBox-select">
                         <div style={{ width: '100%' }}>
-                            <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo, 'Star', 'Heart', 'Bolt', 'Cloud']} />
+                            <FieldsDropdown Document={this.Document} selectFunc={this.addHotkey} showPlaceholder placeholder="add a hotkey" addedFields={['acl_Guest', LinkedTo]} />
                         </div>
                     </div>
                 </div>
@@ -590,28 +508,87 @@ interface HotKeyButtonProps {
 const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected}) => {
     const state = useLocalObservable(() => ({
         isActive: false,
+        isEditing: false,
+        myHotKey: hotKey,
+
         toggleActive() {
             this.isActive = !this.isActive;
         },
         deactivate() {
             this.isActive = false;
+        },
+        startEditing() {
+            this.isEditing = true;
+        },
+        stopEditing() {
+            this.isEditing = false;
+        },
+        setHotKey(newHotKey: string) {
+            this.myHotKey = newHotKey;
         }
     }));
 
     const panelRef = useRef<HTMLDivElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
 
     const handleClick = () => {
         state.toggleActive();
-
-        console.log(state.isActive + "hmmm")
+        // console.log(state.isActive + "hmmm")
     };
 
+    const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+
+    const myHotKeyDoc = () => {
+        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+        const filter = DocCast(buttons.Filter);
+        const hotKeyDocs = DocListCast(filter.data)
+        return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0]
+
+    }
+
+    const removeHotKey = () => {
+        const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+        const filter = DocCast(buttons.Filter);
+
+        Doc.RemoveDocFromList(filter, 'data', myHotKeyDoc());
+
+
+
+
+
+        // console.log((DocListCast(filter.data)[0].title) + "emmanuel")
+
+
+        // console.log(DocCast(filter.data) + 'HI')
+        // console.log(DocCast(filter.data)[0] + 'hm :(')
+
+    }
     const handleClickOutside = (event: MouseEvent) => {
         if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
             state.deactivate();
+            if (state.isEditing) {
+                state.stopEditing();
+
+                updateFromInput()
+
+
+
+                // Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k));
+                // Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey])
+
+            }
         }
     };
 
+    const updateFromInput = () => {
+        const hi = myHotKeyDoc()
+        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.map(k => k === hotKey ? state.myHotKey : k));
+        Doc.UserDoc()[state.myHotKey] = StrCast(Doc.UserDoc()[hotKey])
+        hi.title = state.myHotKey
+        hi.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`     
+    }
+
+
     useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside);
         return () => {
@@ -619,73 +596,96 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
         };
     }, []);
 
-    const iconOpts = ['star', 'heart', 'bolt'];
+    const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ];
 
     const iconPanel = iconOpts.map((icon, i) => (
-        <button key={i} onClick={() => Doc.UserDoc()[hotKey] = icon}>
-            <FontAwesomeIcon icon={icon as any} />
-        </button>
-    ));
+        <button key={i} onClick={(e: React.MouseEvent) => {
+            e.stopPropagation;
+            Doc.UserDoc()[hotKey] = icon;
+            const hi = myHotKeyDoc()
+            hi.icon = icon
 
-    const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
-    return (
-        <>
+            
+            }} className='icon-panel-button'>
+            <FontAwesomeIcon icon={icon as any} color = {SnappingManager.userColor}/>
+        </button>
+    ));
 
-        <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''} ` }
-                    
-                    onClick={undoable((e: React.MouseEvent) => {
+    function isAttrFiltered(attr: string) {
+        if (selected && selected._childFilters !== undefined && selected.type === DocumentType.COL) {
+            return StrListCast(selected._childFilters).some(filter => filter.includes(attr));
+        } else {
+            return false;
+        }
+    }
 
-                        // if (e.target === e.currentTarget){
-                            isAttrFiltered(hotKey) ? Doc.setDocFilter(selected, hotKey, true, 'remove') : Doc.setDocFilter(selected, hotKey, true, 'match');
-                        // }
-                    }, hotKey)}
 
-                    // style = {{backgroundColor: `${isAttrFiltered(hotKey) ? '#878484' : SettingsManager.userBackgroundColor}`}}
-                    
-                    
+    return (
+        <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''}`} 
+            onClick={(e) => {
+                e.stopPropagation();
+                state.startEditing();
+                setTimeout(() => inputRef.current?.focus(), 0);
+            }}
+        >
+            <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}>
+                <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
+                    <button
+                        type="button"
+                        className='hotKey-icon'
+                        onClick={(e: React.MouseEvent) => {
+                            e.stopPropagation(); 
+                            handleClick();
+                        }}
                     >
-        <div className={`hotKey-icon-button ${state.isActive ? 'active' : ''}`} ref={panelRef}>
-            <Tooltip title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
-                <button
-                    type="button"
-                    onClick={(e: React.MouseEvent) => {
-                        console.log('hiii')
-                        e.stopPropagation(); 
-                        handleClick();
-
+                        <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor}/>
+                    </button>
+                </Tooltip>
+                {state.isActive && (
+                    <div className="icon-panel">
+                        {iconPanel}
+                    </div>
+                )}
+            </div>
+            {state.isEditing ? (
+                <input
+                    ref={inputRef}
+                    type="text"
+                    value={state.myHotKey.toUpperCase()}
+                    onChange={(e) => state.setHotKey(e.target.value)}
+                    onBlur={() => {
+                        state.stopEditing();
+                        updateFromInput()
                     }}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') {
+                            state.stopEditing();
+                            updateFromInput()
 
-                >
-                    <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl"/>
-                </button>
-            </Tooltip>
-            {state.isActive && (
-                <div className="icon-panel" >
-                    {iconPanel}
-                </div>
+                        }
+                    }}
+                    className='hotkey-title-input'
+                />
+            ) : (
+                <p className='hotkey-title'>{hotKey.toUpperCase()}</p>
             )}
-
-            
-        </div>
-
-        <p>     {hotKey.toUpperCase()}    </p>
-
-
-        <button onClick={(e: React.MouseEvent) => { 
-            e.stopPropagation(); 
-            Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); 
-        }}>
-            <FontAwesomeIcon icon={'x' as any} />
-        </button>
-
+            <button className='hotKey-close' onClick={(e: React.MouseEvent) => { 
+                e.stopPropagation(); 
+                const hi = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+                // hi.forEach((str) => {
+                //     console.log(str + "before");
+                // });
+                Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); 
+                removeHotKey()
+
+                // hi.forEach((str) => {
+                //     console.log(str + "after");
+                // });
+
+            }}>
+                <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor}/>
+            </button>
         </div>
-
-
-        </>
-
-        
     );
-});
-
-
+})
-- 
cgit v1.2.3-70-g09d2

