From 78f348cd1406cfaf3d0247973b826783ab3532b5 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Tue, 17 Sep 2024 21:05:17 -0400
Subject: from last

---
 src/client/views/FilterPanel.tsx | 170 ++++++++++++++++++---------------------
 1 file changed, 78 insertions(+), 92 deletions(-)

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

diff --git a/src/client/views/FilterPanel.tsx b/src/client/views/FilterPanel.tsx
index f3f447e22..8133a4d0d 100644
--- a/src/client/views/FilterPanel.tsx
+++ b/src/client/views/FilterPanel.tsx
@@ -1,34 +1,29 @@
 /* eslint-disable react/jsx-props-no-spreading */
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Tooltip } from '@mui/material';
 import { action, computed, makeObservable, observable, ObservableMap } from 'mobx';
-import { observer } from 'mobx-react';
+import { observer, useLocalObservable } from 'mobx-react';
 import * as React from 'react';
+import { useEffect, useRef } from 'react';
 import { Handles, Rail, Slider, Ticks, Tracks } from 'react-compound-slider';
 import { AiOutlineMinusSquare, AiOutlinePlusSquare } from 'react-icons/ai';
 import { CiCircleRemove } from 'react-icons/ci';
 import { Doc, DocListCast, Field, FieldType, LinkedTo, StrListCast } from '../../fields/Doc';
+import { DocData } from '../../fields/DocSymbols';
 import { Id } from '../../fields/FieldSymbols';
 import { List } from '../../fields/List';
 import { RichTextField } from '../../fields/RichTextField';
+import { DocCast, StrCast } from '../../fields/Types';
+import { Button, CurrentUserUtils } from '../util/CurrentUserUtils';
 import { SearchUtil } from '../util/SearchUtil';
 import { SnappingManager } from '../util/SnappingManager';
-import { undoable, undoBatch } from '../util/UndoManager';
+import { undoable } from '../util/UndoManager';
 import { FieldsDropdown } from './FieldsDropdown';
 import './FilterPanel.scss';
 import { DocumentView } from './nodes/DocumentView';
+import { ButtonType } from './nodes/FontIconBox/FontIconBox';
 import { Handle, Tick, TooltipRail, Track } from './nodes/SliderBox-components';
 import { ObservableReactComponent } from './ObservableReactComponent';
-import { Button } from '../util/CurrentUserUtils';
-import { ButtonType } from './nodes/FontIconBox/FontIconBox';
-import { DocCast } from '../../fields/Types';
-import { CurrentUserUtils } from '../util/CurrentUserUtils';
-import { StrCast } from '../../fields/Types';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { DocData } from '../../fields/DocSymbols';
-import { Tooltip } from '@mui/material';
-import { useLocalObservable } from 'mobx-react';
-import { useRef } from 'react';
-import { useEffect } from 'react';
-
 
 interface filterProps {
     Document: Doc;
@@ -37,8 +32,7 @@ interface filterProps {
 @observer
 export class FilterPanel extends ObservableReactComponent<filterProps> {
     @observable _selectedFacetHeaders = new Set<string>();
-    public static Instance: FilterPanel; 
-
+    public static Instance: FilterPanel;
 
     constructor(props: filterProps) {
         super(props);
@@ -227,7 +221,7 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
     };
 
     /**
-     * Allows users to add a filter hotkey to the properties panel. Will also update the multitoggle at the top menu and the 
+     * 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
      */
@@ -246,21 +240,20 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
             scripts: { onClick: '{ return handleTags(this.toolType, _readOnly_);}' },
         };
 
-        const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+        const currHotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
 
-        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey))
+        Doc.UserDoc().myFilterHotKeyTitles = new List<string>(currHotKeys.concat(hotKey));
 
-        Doc.UserDoc()[hotKey] = 'bolt'
+        Doc.UserDoc()[hotKey] = 'bolt';
 
         const newBtn = CurrentUserUtils.setupContextMenuBtn(newKey, filter);
         newBtn.isSystem = newBtn[DocData].isSystem = undefined;
 
-        const subDocs = DocListCast(filter.data)
-        const opts = subDocs[subDocs.length-1]
+        const subDocs = DocListCast(filter.data);
+        const opts = subDocs[subDocs.length - 1];
         Doc.AddDocToList(filter, 'data', newBtn, opts, true);
-    }
+    };
 
-    
     /**
      * Renders the newly formed hotkey icon buttons
      * @returns the buttons to be rendered
@@ -268,16 +261,16 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
     hotKeyButtons = () => {
         const selected = DocumentView.SelectedDocs().lastElement();
         const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles);
-    
+
         // Selecting a button should make it so that the icon on the top filter panel becomes said icon
         const buttons = hotKeys.map((hotKey, i) => (
             <Tooltip key={hotKey} title={<div className="dash-tooltip">Click to customize this hotkey's icon</div>}>
-                <HotKeyIconButton hotKey={hotKey} selected = {selected}/>
+                <HotKeyIconButton hotKey={hotKey} selected={selected} />
             </Tooltip>
         ));
-    
+
         return buttons;
-    }
+    };
 
     // @observable iconPanelMap: Map<string, number> = new Map();
 
@@ -465,18 +458,16 @@ export class FilterPanel extends ObservableReactComponent<filterProps> {
     }
 }
 
-
-
 interface HotKeyButtonProps {
     hotKey: string;
-    selected?: Doc
+    selected?: Doc;
 }
 
 /**
- * Renders the buttons that correspond to each icon tag in the properties view. Allows users to change the icon, 
- * title, and delete. 
+ * 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 HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, selected }) => {
     const state = useLocalObservable(() => ({
         isActive: false,
         isEditing: false,
@@ -496,7 +487,7 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
         },
         setHotKey(newHotKey: string) {
             this.myHotKey = newHotKey;
-        }
+        },
     }));
 
     const panelRef = useRef<HTMLDivElement>(null);
@@ -506,31 +497,29 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
         state.toggleActive();
     };
 
-    const hotKeys = StrListCast(Doc.UserDoc().myFilterHotKeyTitles)
+    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 
+     * @returns
      */
     const myHotKeyDoc = () => {
-        const hotKeyDocs = DocListCast(filter.data)
-        return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0]
-
-    }
+        const hotKeyDocs = DocListCast(filter.data);
+        return hotKeyDocs.filter(k => StrCast(k.title) === hotKey)[0];
+    };
 
     /**
-     * Removes a hotkey from list 
+     * Removes a hotkey from list
      */
     const removeHotKey = () => {
         Doc.RemoveDocFromList(filter, 'data', myHotKeyDoc());
-
-    }
+    };
 
     /**
      * Deselects if the user clicks outside the button
-     * @param event 
+     * @param event
      */
     const handleClickOutside = (event: MouseEvent) => {
         if (panelRef.current && !panelRef.current.contains(event.target as Node)) {
@@ -538,24 +527,23 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
             if (state.isEditing) {
                 state.stopEditing();
 
-                updateFromInput()
+                updateFromInput();
             }
         }
     };
 
     /**
-     * Updates the list of hotkeys based on the users input. replaces the old title with the new one and then assigns this new 
+     * 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])
-        Doc.UserDoc()[hotKey] = ''
-        myDoc.title = state.myHotKey
-        myDoc.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`     
-    }, '')
-
+    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]);
+        Doc.UserDoc()[hotKey] = '';
+        myDoc.title = state.myHotKey;
+        myDoc.toolTip = `Click to toggle the ${state.myHotKey}'s group's visibility`;
+    }, '');
 
     useEffect(() => {
         document.addEventListener('mousedown', handleClickOutside);
@@ -564,18 +552,21 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
         };
     }, []);
 
-    const iconOpts = ['star', 'heart', 'bolt', 'satellite', 'palette', 'robot', 'lightbulb', 'highlighter', 'book', 'chalkboard' ];
+    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={undoable((e: React.MouseEvent) => {
-            e.stopPropagation;
-            Doc.UserDoc()[hotKey] = icon;
-            myHotKeyDoc().icon = icon 
-            }, '')} className='icon-panel-button'>
-            <FontAwesomeIcon icon={icon as any} color = {SnappingManager.userColor}/>
+        <button
+            key={i}
+            onClick={undoable((e: React.MouseEvent) => {
+                e.stopPropagation;
+                Doc.UserDoc()[hotKey] = icon;
+                myHotKeyDoc().icon = icon;
+            }, '')}
+            className="icon-panel-button">
+            <FontAwesomeIcon icon={icon as any} color={SnappingManager.userColor} />
         </button>
     ));
 
@@ -584,62 +575,57 @@ const HotKeyIconButton: React.FC<HotKeyButtonProps> = observer(({ hotKey, select
      */
 
     return (
-        <div className={`filterHotKey-button`} 
-            onClick={(e) => {
+        <div
+            className={`filterHotKey-button`}
+            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'
+                        className="hotKey-icon"
                         onClick={(e: React.MouseEvent) => {
-                            e.stopPropagation(); 
+                            e.stopPropagation();
                             handleClick();
-                        }}
-                    >
-                        <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor}/>
+                        }}>
+                        <FontAwesomeIcon icon={Doc.UserDoc()[hotKey] as any} size="2xl" color={SnappingManager.userColor} />
                     </button>
                 </Tooltip>
-                {state.isActive && (
-                    <div className="icon-panel">
-                        {iconPanel}
-                    </div>
-                )}
+                {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)}
+                    onChange={e => state.setHotKey(e.target.value)}
                     onBlur={() => {
                         state.stopEditing();
-                        updateFromInput()
+                        updateFromInput();
                     }}
-                    onKeyDown={(e) => {
+                    onKeyDown={e => {
                         if (e.key === 'Enter') {
                             state.stopEditing();
-                            updateFromInput()
-
+                            updateFromInput();
                         }
                     }}
-                    className='hotkey-title-input'
+                    className="hotkey-title-input"
                 />
             ) : (
-                <p className='hotkey-title'>{hotKey.toUpperCase()}</p>
+                <p className="hotkey-title">{hotKey.toUpperCase()}</p>
             )}
-            <button className='hotKey-close' onClick={(e: React.MouseEvent) => { 
-                e.stopPropagation(); 
-                Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey)); 
-                removeHotKey()
-
-            }}>
-                <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor}/>
+            <button
+                className="hotKey-close"
+                onClick={(e: React.MouseEvent) => {
+                    e.stopPropagation();
+                    Doc.UserDoc().myFilterHotKeyTitles = new List<string>(hotKeys.filter(k => k !== hotKey));
+                    removeHotKey();
+                }}>
+                <FontAwesomeIcon icon={'x' as any} color={SnappingManager.userColor} />
             </button>
         </div>
     );
-})
\ No newline at end of file
+});
-- 
cgit v1.2.3-70-g09d2

