done with comments-- pull request

1 files changed, 51 insertions, 94 deletions

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index e15285007..e73d9c2c9 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -11,7 +11,7 @@ import { List } from '../../fields/List';
 import { RichTextField } from '../../fields/RichTextField';
 import { SearchUtil } from '../util/SearchUtil';
 import { SnappingManager } from '../util/SnappingManager';
-import { undoable } from '../util/UndoManager';
+import { undoable, undoBatch } from '../util/UndoManager';
 import { FieldsDropdown } from './FieldsDropdown';
 import './FilterPanel.scss';
 import { DocumentView } from './nodes/DocumentView';
@@ -20,26 +20,14 @@ import { ObservableReactComponent } from './ObservableReactComponent';
 import { Button } from '../util/CurrentUserUtils';
 import { ButtonType } from './nodes/FontIconBox/FontIconBox';
 import { DocCast } from '../../fields/Types';
-// import { Docs } from '../../documents/Documents';
-import { Docs } from '../documents/Documents';
 import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { DocumentOptions } from '../documents/Documents';
-import { DocUtils } from '../documents/DocUtils';
-import { dropActionType } from '../util/DropActionTypes';
-import { Toggle } from 'browndash-components';
-import { SettingsManager } from '../util/SettingsManager';
 import { StrCast } from '../../fields/Types';
-import { ToggleType } from 'browndash-components';
-import { MultiToggle } from 'browndash-components';
-import { Type } from 'browndash-components';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { DocData } from '../../fields/DocSymbols';
-import { DocumentType } from '../documents/DocumentTypes';
 import { Tooltip } from '@mui/material';
 import { useLocalObservable } from 'mobx-react';
 import { useRef } from 'react';
 import { useEffect } from 'react';
-import { useState } from 'react';
 
 
 interface filterProps {
@@ -242,12 +230,14 @@ 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(hotKey: string) {
+    /**
+     * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the 
+     * icontags tht are displayed on the documents themselves
+     * @param hotKey tite of the new hotkey
+     */
+    addHotkey = (hotKey: string) => {
         const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
         const filter = DocCast(buttons.Filter);
-        const filter2 = DocCast(filter);
-        const but2 = Doc.UserDoc().myContextMenuBtns;
-
 
         const newKey: Button = {
             title: hotKey,
@@ -260,15 +250,11 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
             scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
         };
 
-        //         const heyy = [...hi, newKey]
-
         const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
 
         Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey))
 
         Doc.UserDoc()[hotKey] = 'bolt'
-        // Doc.UserDoc()['supppp'] = 'star'
-
 
         const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
         newBtn.isSystem = newBtn[DocData].isSystem = undefined;
@@ -276,32 +262,16 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
         const subDocs = DocListCast(filter.data)
         const opts = subDocs[subDocs.length-1]
         Doc.AddDocToList(filter, 'data', newBtn, opts, true);
-
-        
-
-        // console.log(filter[DocData].data + 'ok')
-        // // console.log(filter[DocData][0] + 'help')
-        // console.log(filter[DocData] + 'good grief')
-
-        // console.log(DocCast(DocCast(filter.data))[0])
-        // this.removeHotKey()
-
-        // console.log(DocCast(filter.data) + 'HI')
-        // console.log(DocListCast(filter.data) + 'WOOOOO')
-        // console.log(DocCast(filter.data)[0] + 'hm :(')
-
     }
 
     
-
-    hotKeyButtons() {
+    /**
+     * Renders the newly formed hotkey icon buttons
+     * @returns the buttons to be rendered
+     */
+    hotKeyButtons = () => {
         const selected = DocumentView.SelectedDocs().lastElement();
-
-        // console.log(StrListCast(Doc.UserDoc().myFilterHotKeyTitles) + "hiii")
-
         const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
-
-        // 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) => (
@@ -506,6 +476,10 @@ interface HotKeyButtonProps {
     selected?: Doc
 }
 
+/**
+ * Renders the buttons that correspond to each icon tag in the properties view. Allows users to change the icon, 
+ * title, and delete. 
+ */
 const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected}) => {
     const state = useLocalObservable(() => ({
         isActive: false,
@@ -534,36 +508,34 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
 
     const handleClick = () => {
         state.toggleActive();
-        // console.log(state.isActive + "hmmm")
     };
 
     const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+    const buttons = DocCast(Doc.UserDoc().myContextMenuBtns);
+    const filter = DocCast(buttons.Filter);
 
+    /**
+     * The doc of the button in the context menu that corresponds to the current hotkey
+     * @returns 
+     */
     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]
 
     }
 
+    /**
+     * Removes a hotkey from list 
+     */
     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 :(')
-
     }
+
+    /**
+     * Deselects if the user clicks outside the button
+     * @param event 
+     */
     const handleClickOutside = (event: MouseEvent) => {
         if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
             state.deactivate();
@@ -571,23 +543,22 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
                 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()
+    /**
+     * Updates the list of hotkeys based on the users input. replaces the old title with the new one and then assigns this new 
+     * hotkey with the current icon
+     */
+    const updateFromInput = undoable (() => {
+        const myDoc = 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`     
-    }
+        Doc.UserDoc()[hotKey] = ''
+        myDoc.title = state.myHotKey
+        myDoc.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`     
+    }, '')
 
 
     useEffect(() => {
@@ -599,31 +570,25 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
 
     const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ];
 
+    /**
+     * Panel of icons the user can choose from to represent their tag
+     */
     const iconPanel = iconOpts.map((icon, i) => (
-        <button key={i} onClick={(e: React.MouseEvent) => {
+        <button key={i} onClick={undoable((e: React.MouseEvent) => {
             e.stopPropagation;
             Doc.UserDoc()[hotKey] = icon;
-            const hi = myHotKeyDoc()
-            hi.icon = icon
-
-
-            
-            }} className='icon-panel-button'>
+            myHotKeyDoc().icon = icon 
+            }, '')} className='icon-panel-button'>
             <FontAwesomeIcon icon={icon as any} color = {SnappingManager.userColor}/>
         </button>
     ));
 
-    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;
-        }
-    }
-
+    /**
+     * Actually renders the buttons
+     */
 
     return (
-        <div className={`filterHotKey-button ${isAttrFiltered(hotKey) ? 'active' : ''}`} 
+        <div className={`filterHotKey-button`} 
             onClick={(e) => {
                 e.stopPropagation();
                 state.startEditing();
@@ -673,20 +638,12 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
             )}
             <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>
     );
-})
+})
\ No newline at end of file