added recognizeFaces for face images

6 files changed, 55 insertions, 17 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index 0681a21cb..dc0c95121 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -497,7 +497,7 @@ pie title Minerals in my tap water
 
     static setupFaceCollection(doc: Doc, field: string) {
         return DocUtils.AssignDocField(doc, field, (opts) => Docs.Create.FaceCollectionDocument(opts), {
-            dontRegisterView: true, backgroundColor: "dimgray", ignoreClick: true, title: "Face Collection", isSystem: true, childDragAction: dropActionType.embed, 
+            dontRegisterView: true, ignoreClick: true, title: "Face Collection", isSystem: true, childDragAction: dropActionType.embed, 
             _lockedPosition: true, _type_collection: CollectionViewType.Schema  });
     }
 
diff --git a/src/client/util/SettingsManager.tsx b/src/client/util/SettingsManager.tsx
index 2d8763b63..fde8869e3 100644
--- a/src/client/util/SettingsManager.tsx
+++ b/src/client/util/SettingsManager.tsx
@@ -232,6 +232,17 @@ export class SettingsManager extends React.Component<object> {
                     color={SettingsManager.userColor}
                 />
                 <Toggle
+                    formLabel="Recognize Face Images"
+                    formLabelPlacement="right"
+                    toggleType={ToggleType.SWITCH}
+                    onClick={() => {
+                        Doc.UserDoc().recognizeFaceImages = !Doc.UserDoc().recognizeFaceImages;
+                    }}
+                    toggleStatus={BoolCast(Doc.UserDoc().recognizeFaceImages)}
+                    size={Size.XSMALL}
+                    color={SettingsManager.userColor}
+                />
+                <Toggle
                     formLabel="Show Full Toolbar"
                     formLabelPlacement="right"
                     toggleType={ToggleType.SWITCH}
diff --git a/src/client/views/StyleProvider.tsx b/src/client/views/StyleProvider.tsx
index e48994586..76cb119ab 100644
--- a/src/client/views/StyleProvider.tsx
+++ b/src/client/views/StyleProvider.tsx
@@ -236,6 +236,8 @@ export function DefaultStyleProvider(doc: Opt<Doc>, props: Opt<FieldViewProps &
                 case DocumentType.MAP:
                 case DocumentType.SCREENSHOT:
                 case DocumentType.VID:         docColor = docColor || (Colors.LIGHT_GRAY); break;
+                case DocumentType.UFACE:       docColor = docColor || "dimgray";break;
+                case DocumentType.FACECOLLECTION: docColor = docColor || Colors.DARK_GRAY;break;
                 case DocumentType.COL:
                     docColor = docColor || (doc && Doc.IsSystem(doc)
                             ? SnappingManager.userBackgroundColor
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
index 00297a97d..a72efc948 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.scss
@@ -5,6 +5,7 @@
     top: 0;
     position: absolute;
     width: 100%;
+    height: 100%;
 
     h1 {
         color: white;
@@ -25,10 +26,8 @@
     .face-document-top {
         position: relative;
         top: 0;
-        margin: auto;
         width: 100%;
         left: 0;
-        height: 60px;
     }
 
     .face-document-image-container {
@@ -89,3 +88,11 @@
         // }
     }
 }
+
+.faceCollectionBox {
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    position: absolute;
+}
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index 33fc3c210..7820af8aa 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -43,6 +43,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     private _dropDisposer?: DragManager.DragDropDisposer;
     private _oldWheel: HTMLElement | null = null;
+    private _disposers: { [key: string]: IReactionDisposer } = {};
+    private _lastHeight = 0;
 
     constructor(props: FieldViewProps) {
         super(props);
@@ -50,13 +52,17 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
     @observable _headerRef: HTMLDivElement | null = null;
     @observable _listRef: HTMLDivElement | null = null;
-    _disposers: { [key: string]: IReactionDisposer } = {};
-    _lastHeight = 0;
-    observer = new ResizeObserver(() => this._props.setHeight?.((this.props.Document._face_showImages ? 20 : 0) + (!this._headerRef ? 0 : DivHeight(this._headerRef)) + (!this._listRef ? 0 : DivHeight(this._listRef))));
+    observer = new ResizeObserver(a => {
+        this._props.setHeight?.(
+            (this.props.Document._face_showImages ? 20 : 0) + //
+                (!this._headerRef ? 0 : DivHeight(this._headerRef)) +
+                (!this._listRef ? 0 : DivHeight(this._listRef))
+        );
+    });
 
     componentDidMount(): void {
         this._disposers.refList = reaction(
-            () => ({ refList: [this._headerRef, this._listRef], autoHeight: this.layoutDoc._layout_autoHeight && !DocumentView.LightboxContains(this.DocumentView?.()) }),
+            () => ({ refList: [this._headerRef, this._listRef], autoHeight: this.layoutDoc._layout_autoHeight }),
             ({ refList, autoHeight }) => {
                 this.observer.disconnect();
                 if (autoHeight) refList.filter(r => r).forEach(r => this.observer.observe(r!));
@@ -66,7 +72,8 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
     }
 
     componentWillUnmount(): void {
-        //this._disposers?.();
+        this.observer.disconnect();
+        Object.keys(this._disposers).forEach(key => this._disposers[key]());
     }
     protected createDropTarget = (ele: HTMLDivElement) => {
         this._dropDisposer?.();
@@ -213,17 +220,27 @@ 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));
 
+    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);
+    };
     render() {
         return !Doc.ActiveDashboard ? null : (
-            <CollectionStackingView
-                {...this._props} //
-                Document={Doc.ActiveDashboard}
-                fieldKey="myUniqueFaces"
-                moveDocument={this.moveDocument}
-                isContentActive={returnTrue}
-                isAnyChildContentActive={returnTrue}
-                childHideDecorations={true}
-            />
+            <div className="faceCollectionBox">
+                <div className="documentButtonMenu">
+                    <div className="documentExplanation" onClick={action(() => (Doc.UserDoc().recognizeFaceImages = !Doc.UserDoc().recognizeFaceImages))}>{`Face Recgognition is ${Doc.UserDoc().recognizeFaceImages ? 'on' : 'off'}`}</div>
+                </div>
+                <CollectionStackingView
+                    {...this._props} //
+                    styleProvider={this.stackingStyleProvider}
+                    Document={Doc.ActiveDashboard}
+                    fieldKey="myUniqueFaces"
+                    moveDocument={this.moveDocument}
+                    isContentActive={returnTrue}
+                    isAnyChildContentActive={returnTrue}
+                    childHideDecorations={true}
+                />
+            </div>
         );
     }
 }
diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index f613f78ce..7c8043219 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -230,6 +230,7 @@ export class FaceRecognitionHandler {
      * @param imgDoc The document being analyzed.
      */
     private classifyFacesInImage = async (imgDoc: Doc) => {
+        if (!Doc.UserDoc().recognizeFaceImages) return;
         const activeDashboard = Doc.ActiveDashboard;
         if (!this._apiModelReady || !activeDashboard) {
             this._pendingAPIModelReadyDocs.push(imgDoc);