cleanup of faces and tags

3 files changed, 19 insertions, 7 deletions

diff --git a/src/client/views/TagsView.tsx b/src/client/views/TagsView.tsx
index 394162f46..82c85ddf0 100644
--- a/src/client/views/TagsView.tsx
+++ b/src/client/views/TagsView.tsx
@@ -252,6 +252,10 @@ export class TagsView extends ObservableReactComponent<TagViewProps> {
         return this._isEditing && DocumentView.SelectedDocs().includes(this._props.View.Document);
     }
 
+    /**
+     * Shows or hides the editing UI for adding/removing Doc tags
+     * @param editing
+     */
     @action
     setToEditing = (editing = true) => {
         this._isEditing = editing;
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 7820af8aa..662436ddc 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -42,7 +42,6 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
         return FieldView.LayoutString(UniqueFaceBox, fieldKey);
     }
     private _dropDisposer?: DragManager.DragDropDisposer;
-    private _oldWheel: HTMLElement | null = null;
     private _disposers: { [key: string]: IReactionDisposer } = {};
     private _lastHeight = 0;
 
@@ -50,8 +49,10 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
         super(props);
         makeObservable(this);
     }
+
     @observable _headerRef: HTMLDivElement | null = null;
     @observable _listRef: HTMLDivElement | null = null;
+
     observer = new ResizeObserver(a => {
         this._props.setHeight?.(
             (this.props.Document._face_showImages ? 20 : 0) + //
@@ -75,6 +76,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
         this.observer.disconnect();
         Object.keys(this._disposers).forEach(key => this._disposers[key]());
     }
+
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._dropDisposer?.();
         ele && (this._dropDisposer = DragManager.MakeDropTarget(ele, this.onInternalDrop.bind(this), this.Document));
@@ -111,7 +113,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     /**
-     * Toggles whether a Face Document displays its associated docs.
+     * Toggles whether a Face Document displays its associated docs.  This saves and restores the last height of the Doc since
+     * toggling the associated Documentss overwrites the Doc height.
      */
     onDisplayClick() {
         this.Document._face_showImages && (this._lastHeight = NumCast(this.Document.height));
@@ -134,6 +137,9 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
         FaceRecognitionHandler.UniqueFaceRemoveFaceImage(imgDoc, this.Document);
     }, 'remove doc from face');
 
+    /**
+     * This stops scroll wheel events when they are used to scroll the face collection.
+     */
     onPassiveWheel = (e: WheelEvent) => e.stopPropagation();
 
     render() {
@@ -161,9 +167,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             pointerEvents: this._props.isContentActive() ? undefined : 'none',
                         }}
                         ref={action((ele: HTMLDivElement | null) => {
+                            this._listRef?.removeEventListener('wheel', this.onPassiveWheel);
                             this._listRef = ele;
-                            this._oldWheel?.removeEventListener('wheel', this.onPassiveWheel);
-                            this._oldWheel = ele;
                             // prevent wheel events from passively propagating up through containers and prevents containers from preventDefault which would block scrolling
                             ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
                         })}>
@@ -220,6 +225,10 @@ export class FaceCollectionBox extends ViewBoxBaseComponent<FieldViewProps>() {
 
     moveDocument = (doc: Doc | Doc[], targetCollection: Doc | undefined, addDocument: (doc: Doc | Doc[]) => boolean): boolean => !!(this._props.removeDocument?.(doc) && addDocument?.(doc));
 
+    /**
+     * this changes style provider requests that target the dashboard to requests that target the face collection box which is what's actually being rendered.
+     * This is needed, for instance, to get the default background color from the face collection, not the dashboard.
+     */
     stackingStyleProvider = (doc: Doc | undefined, props: Opt<FieldViewProps>, property: string) => {
         if (doc === Doc.ActiveDashboard) return this._props.styleProvider?.(this.Document, this._props, property);
         return this._props.styleProvider?.(doc, this._props, property);
diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index e35f860ab..8513ec94d 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -5,11 +5,10 @@ import { DocData } from '../../../fields/DocSymbols';
 import { List } from '../../../fields/List';
 import { listSpec } from '../../../fields/Schema';
 import { Cast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
-import { DocumentType } from '../../documents/DocumentTypes';
-import { DocumentManager } from '../../util/DocumentManager';
 import { ImageField } from '../../../fields/URLField';
-import { UniqueFaceBox } from '../collections/collectionFreeForm/FaceCollectionBox';
+import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
+import { DocumentManager } from '../../util/DocumentManager';
 
 /**
  * A singleton class that handles face recognition and manages face Doc collections for each face found.