added tutorial tool, still need to integrate with metadatatool

2 files changed, 30 insertions, 36 deletions

diff --git a/src/client/views/search/FaceRecognitionHandler.tsx b/src/client/views/search/FaceRecognitionHandler.tsx
index 6f70e96ab..3ad5bc844 100644
--- a/src/client/views/search/FaceRecognitionHandler.tsx
+++ b/src/client/views/search/FaceRecognitionHandler.tsx
@@ -4,7 +4,7 @@ import { Doc, DocListCast } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
 import { List } from '../../../fields/List';
 import { ComputedField } from '../../../fields/ScriptField';
-import { DocCast, ImageCast, NumCast, StrCast } from '../../../fields/Types';
+import { DocCast, ImageCast, ImageCastToNameType, NumCast, StrCast } from '../../../fields/Types';
 import { ImageField } from '../../../fields/URLField';
 import { DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
@@ -43,7 +43,7 @@ export class FaceRecognitionHandler {
      * Loads an image
      */
     private static loadImage = (imgUrl: ImageField): Promise<HTMLImageElement> => {
-        const [name, type] = imgUrl.url.href.split('.');
+        const [name, type] = ImageCastToNameType(imgUrl);
         const imageURL = `${name}_o.${type}`;
 
         return new Promise((resolve, reject) => {
@@ -60,13 +60,13 @@ export class FaceRecognitionHandler {
      * @param imgDoc image with faces
      * @returns faceDoc array
      */
-    public static ImageDocFaceAnnos = (imgDoc: Doc) => DocListCast(imgDoc[`${Doc.LayoutFieldKey(imgDoc)}_annotations`]).filter(doc => doc.face);
+    public static ImageDocFaceAnnos = (imgDoc: Doc) => DocListCast(imgDoc[`${Doc.LayoutDataKey(imgDoc)}_annotations`]).filter(doc => doc.face);
 
     /**
      * returns a list of all face collection Docs on the current dashboard
      * @returns face collection Doc list
      */
-    public static UniqueFaces = () => DocListCast(Doc.ActiveDashboard?.[DocData].myUniqueFaces);
+    public static UniqueFaces = () => DocListCast(Doc.ActiveDashboard?.$myUniqueFaces);
 
     /**
      * Find a unique face from its name
@@ -87,22 +87,22 @@ export class FaceRecognitionHandler {
      * @param faceDoc unique face Doc
      * @returns label string
      */
-    public static UniqueFaceLabel = (faceDoc: Doc) => StrCast(faceDoc[DocData].face);
+    public static UniqueFaceLabel = (faceDoc: Doc) => StrCast(faceDoc.$face);
 
-    public static SetUniqueFaceLabel = (faceDoc: Doc, value: string) => (faceDoc[DocData].face = value);
+    public static SetUniqueFaceLabel = (faceDoc: Doc, value: string) => (faceDoc.$face = value);
     /**
      * Returns all the face descriptors associated with a unique face Doc
      * @param faceDoc unique face Doc
      * @returns face descriptors
      */
-    public static UniqueFaceDescriptors = (faceDoc: Doc) => DocListCast(faceDoc[DocData].face_annos).map(face => face.faceDescriptor as List<number>);
+    public static UniqueFaceDescriptors = (faceDoc: Doc) => DocListCast(faceDoc.$face_annos).map(face => face.faceDescriptor as List<number>);
 
     /**
      * Returns a list of all face image Docs associated with a unique face Doc
      * @param faceDoc unique face Doc
      * @returns image Docs
      */
-    public static UniqueFaceImages = (faceDoc: Doc) => DocListCast(faceDoc[DocData].face_annos).map(face => DocCast(face.annotationOn, face));
+    public static UniqueFaceImages = (faceDoc: Doc) => DocListCast(faceDoc.$face_annos).map(face => DocCast(face.annotationOn, face));
 
     /**
      * Adds a face image to a unique face Doc, adds the unique face Doc to the images list of reognized faces,
@@ -145,8 +145,8 @@ export class FaceRecognitionHandler {
      * @returns a unique face Doc
      */
     private createUniqueFaceDoc = (dashboard: Doc) => {
-        const faceDocNum = NumCast(dashboard[DocData].myUniqueFaces_count) + 1;
-        dashboard[DocData].myUniqueFaces_count = faceDocNum; // TODO: improve to a better name
+        const faceDocNum = NumCast(dashboard.$myUniqueFaces_count) + 1;
+        dashboard.$myUniqueFaces_count = faceDocNum; // TODO: improve to a better name
 
         const uniqueFaceDoc = Docs.Create.UniqeFaceDocument({
             title: ComputedField.MakeFunction('this.face', undefined, undefined, 'this.face = value') as unknown as string,
@@ -160,10 +160,9 @@ export class FaceRecognitionHandler {
             _width: 400,
             _height: 100,
         });
-        const uface = uniqueFaceDoc[DocData];
-        uface.face = `Face${faceDocNum}`;
-        uface.face_annos = new List<Doc>();
-        Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection);
+        uniqueFaceDoc.$face = `Face${faceDocNum}`;
+        uniqueFaceDoc.$face_annos = new List<Doc>();
+        Doc.MyFaceCollection && Doc.SetContainer(uniqueFaceDoc, Doc.MyFaceCollection);
 
         Doc.ActiveDashboard && Doc.AddDocToList(Doc.ActiveDashboard[DocData], 'myUniqueFaces', uniqueFaceDoc);
         return uniqueFaceDoc;
@@ -208,10 +207,10 @@ export class FaceRecognitionHandler {
         } else if (imgDoc.type === DocumentType.LOADING && !imgDoc.loadingError) {
             setTimeout(() => this.classifyFacesInImage(imgDoc), 1000);
         } else {
-            const imgUrl = ImageCast(imgDoc[Doc.LayoutFieldKey(imgDoc)]);
-            if (imgUrl && !DocListCast(Doc.MyFaceCollection.examinedFaceDocs).includes(imgDoc[DocData])) {
+            const imgUrl = ImageCast(imgDoc[Doc.LayoutDataKey(imgDoc)]);
+            if (imgUrl && !DocListCast(Doc.MyFaceCollection?.examinedFaceDocs).includes(imgDoc[DocData])) {
                 // only examine Docs that have an image and that haven't already been examined.
-                Doc.AddDocToList(Doc.MyFaceCollection, 'examinedFaceDocs', imgDoc[DocData]);
+                Doc.MyFaceCollection && Doc.AddDocToList(Doc.MyFaceCollection, 'examinedFaceDocs', imgDoc[DocData]);
                 FaceRecognitionHandler.loadImage(imgUrl).then(
                     // load image and analyze faces
                     img => faceapi
@@ -241,7 +240,7 @@ export class FaceRecognitionHandler {
                                     annos.push(faceAnno);
                                 });
 
-                                imgDoc[DocData].data_annotations = new List<Doc>(annos);
+                                imgDoc.$data_annotations = new List<Doc>(annos);
                                 imgDoc._layout_showTags = annos.length > 0;
                                 return imgDocFaceDescriptions;
                             })
diff --git a/src/client/views/search/SearchBox.tsx b/src/client/views/search/SearchBox.tsx
index ae0838dd5..ad0f56cb9 100644
--- a/src/client/views/search/SearchBox.tsx
+++ b/src/client/views/search/SearchBox.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
-/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { Tooltip } from '@mui/material';
 import { action, computed, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
@@ -29,7 +27,7 @@ const MAX_ITERATIONS = 25;
 const ERROR = 0.03;
 
 export interface SearchBoxItemProps {
-    Document: Doc;
+    Doc: Doc;
     searchString: string;
     isLinkSearch: boolean;
     matchedKeys: string[];
@@ -52,9 +50,7 @@ export class SearchBoxItem extends ObservableReactComponent<SearchBoxItemProps>
      * This method selects a doc by either jumping to it (centering/zooming in on it)
      * or opening it in a new tab.
      */
-    selectElement = async (doc: Doc, finishFunc: () => void) => {
-        await DocumentView.showDocument(doc, { willZoomCentered: true }, finishFunc);
-    };
+    selectElement = (doc: Doc, finishFunc: () => void) => DocumentView.showDocument(doc, { willPan: true }, finishFunc);
 
     /**
      * @param {Doc} doc - doc of the search result that has been clicked on
@@ -68,7 +64,7 @@ export class SearchBoxItem extends ObservableReactComponent<SearchBoxItemProps>
     });
 
     componentWillUnmount(): void {
-        const doc = this._props.Document;
+        const doc = this._props.Doc;
         DocumentView.getFirstDocumentView(doc)?.ComponentView?.search?.('', undefined, true);
     }
 
@@ -83,23 +79,23 @@ export class SearchBoxItem extends ObservableReactComponent<SearchBoxItemProps>
 
     render() {
         // eslint-disable-next-line no-use-before-define
-        const formattedType = SearchBox.formatType(StrCast(this._props.Document.type), StrCast(this._props.Document.type_collection));
-        const { title } = this._props.Document;
+        const formattedType = SearchBox.formatType(StrCast(this._props.Doc.type), StrCast(this._props.Doc.type_collection));
+        const { title } = this._props.Doc;
 
         return (
             <Tooltip placement="right" title={<div className="dash-tooltip">{title as string}</div>}>
                 <div
                     onClick={
                         this._props.isLinkSearch
-                            ? () => this.makeLink(this._props.Document)
+                            ? () => this.makeLink(this._props.Doc)
                             : e => {
-                                  this.onResultClick(this._props.Document);
+                                  this.onResultClick(this._props.Doc);
                                   e.stopPropagation();
                               }
                     }
                     style={{
                         fontWeight: Doc.Links(this._props.linkFrom).find(
-                            link => Doc.AreProtosEqual(Doc.getOppositeAnchor(link, this._props.linkFrom!), this._props.Document) || Doc.AreProtosEqual(DocCast(Doc.getOppositeAnchor(link, this._props.linkFrom!)?.annotationOn), this._props.Document)
+                            link => Doc.AreProtosEqual(Doc.getOppositeAnchor(link, this._props.linkFrom!), this._props.Doc) || Doc.AreProtosEqual(DocCast(Doc.getOppositeAnchor(link, this._props.linkFrom!)?.annotationOn), this._props.Doc)
                         )
                             ? 'bold'
                             : '',
@@ -183,7 +179,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      * (Note: There is no longer a need to press enter to submit a search. Any update to the input
      * causes a search to be submitted automatically.)
      */
-    _timeout: any = undefined;
+    _timeout: NodeJS.Timeout | undefined = undefined;
     onInputChange = action((e: React.ChangeEvent<HTMLInputElement>) => {
         this._searchString = e.target.value;
         this._timeout && clearTimeout(this._timeout);
@@ -222,7 +218,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                     .filter(d => d)
                     // eslint-disable-next-line no-loop-func
                     .map(async d => {
-                        const fieldKey = Doc.LayoutFieldKey(d);
+                        const fieldKey = Doc.LayoutDataKey(d);
                         const annos = !Field.toString(Doc.LayoutField(d) as FieldType).includes('CollectionView');
                         const data = d[annos ? fieldKey + '_annotations' : fieldKey];
                         const dataDocs = await DocListCastAsync(data);
@@ -242,7 +238,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
      * which the first letter is capitalized. This is used when displaying the type on the
      * right side of each search result.
      */
-    static formatType(type: string, colType: string): String {
+    static formatType(type: string, colType: string): string {
         switch (type) {
             case DocumentType.PDF : return 'PDF';
             case DocumentType.IMG : return 'Img';
@@ -437,7 +433,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
     render() {
         const isLinkSearch: boolean = this._props.linkSearch;
         const sortedResults = Array.from(this._results.entries()).sort((a, b) => (this._pageRanks.get(b[0]) ?? 0) - (this._pageRanks.get(a[0]) ?? 0)); // sorted by page rank
-        const resultsJSX = [] as any[];
+        const resultsJSX = [] as JSX.Element[];
         const linkFrom = this._props.linkFrom?.();
 
         let validResults = 0;
@@ -453,7 +449,7 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
                 resultsJSX.push(
                     <SearchBoxItem
                         key={Document[Id]}
-                        Document={Document}
+                        Doc={Document}
                         selectItem={action((doc: Doc) => {
                             this._selectedResult = doc;
                         })}
@@ -469,7 +465,6 @@ export class SearchBox extends ViewBoxBaseComponent<SearchBoxProps>() {
             }
         });
 
-        // eslint-disable-next-line react/jsx-props-no-spreading
         const recommendationsJSX: JSX.Element[] = []; // this._recommendations.map(props => <Recommendation {...props} />);
 
         return (