merged with master + cleanup of carousel code

7 files changed, 278 insertions, 312 deletions

diff --git a/src/client/views/collections/CollectionCarousel3DView.tsx b/src/client/views/collections/CollectionCarousel3DView.tsx
index c799eb3c8..54cc02825 100644
--- a/src/client/views/collections/CollectionCarousel3DView.tsx
+++ b/src/client/views/collections/CollectionCarousel3DView.tsx
@@ -78,6 +78,7 @@ export class CollectionCarousel3DView extends CollectionSubView() {
                 NativeWidth={returnZero}
                 NativeHeight={returnZero}
                 fitWidth={undefined}
+                containerViewPath={this.childContainerViewPath}
                 onDoubleClickScript={this.onChildDoubleClick}
                 renderDepth={this._props.renderDepth + 1}
                 LayoutTemplate={this._props.childLayoutTemplate}
diff --git a/src/client/views/collections/CollectionCarouselView.scss b/src/client/views/collections/CollectionCarouselView.scss
index b402a7a32..c40f471d6 100644
--- a/src/client/views/collections/CollectionCarouselView.scss
+++ b/src/client/views/collections/CollectionCarouselView.scss
@@ -23,6 +23,21 @@
     }
 }
 
+.collectionCarouselView-addFlashcards {
+    justify-content: center;
+    align-items: center;
+    height: 100%;
+    z-index: -1;
+    pointer-events: none;
+}
+.collectionCarouselView-recentlyMissed {
+    color: red;
+    z-index: 999;
+    position: relative;
+    left: 10px;
+    top: 10px;
+    pointer-events: none;
+}
 .carouselView-back,
 .carouselView-fwd,
 .carouselView-star,
@@ -68,41 +83,52 @@
     right: 52%;
 }
 .carouselView-quiz {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 5px;
-    right: 8px;
+    flex-direction: column;
+    height: 20px;
+    align-items: center;
+    margin: auto;
     &:hover {
         color: white;
     }
 }
 
 .carouselView-practice {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 22px;
-    right: 8px;
+    flex-direction: column;
+    height: 20px;
+    align-items: center;
+    margin: auto;
     &:hover {
         color: white;
     }
 }
 .carouselView-starFilter {
-    position: absolute;
+    position: relative;
     display: flex;
-    top: 40px;
-    right: 7px;
+    height: 20px;
+    align-items: center;
     &:hover {
         color: white;
     }
 }
 
+.carouselView-practiceModes {
+    width: 100%;
+    height: 40px;
+    display: flex;
+    flex-direction: column;
+}
 .carouselView-menu {
     position: absolute;
+    flex-direction: column;
+    align-items: center;
     display: flex;
     top: 2px;
     right: 2px;
     width: 30;
-    height: 60;
     border-radius: 5px;
     color: rgba(255, 255, 255, 0.5);
     background: rgba(0, 0, 0, 0.1);
diff --git a/src/client/views/collections/CollectionCarouselView.tsx b/src/client/views/collections/CollectionCarouselView.tsx
index a1c59d238..d9a99f47f 100644
--- a/src/client/views/collections/CollectionCarouselView.tsx
+++ b/src/client/views/collections/CollectionCarouselView.tsx
@@ -1,11 +1,10 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@mui/material';
-import { action, computed, makeObservable, observable, trace } from 'mobx';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { StopEvent, returnFalse, returnOne, returnTrue, returnZero } from '../../../ClientUtils';
-import { emptyFunction } from '../../../Utils';
+import { StopEvent, returnOne, returnZero } from '../../../ClientUtils';
 import { Doc, Opt } from '../../../fields/Doc';
 import { BoolCast, DocCast, NumCast, ScriptCast, StrCast } from '../../../fields/Types';
 import { DocumentType } from '../../documents/DocumentTypes';
@@ -19,15 +18,12 @@ import './CollectionCarouselView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
 
 enum cardMode {
-    // PRACTICE = 'practice',
     STAR = 'star',
-    // QUIZ = 'quiz',
     ALL = 'all',
 }
 enum practiceMode {
     PRACTICE = 'practice',
     QUIZ = 'quiz',
-    NORMAL = 'normal',
 }
 enum practiceVal {
     MISSED = 'missed',
@@ -36,24 +32,20 @@ enum practiceVal {
 @observer
 export class CollectionCarouselView extends CollectionSubView() {
     private _dropDisposer?: DragManager.DragDropDisposer;
-    @observable private _practiceMessage: string | undefined;
-    @observable private _filterMessage: string | undefined;
     get practiceField() { return this.fieldKey + "_practice"; } // prettier-ignore
-    get sideField() { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore
+    get sideField()     { return "_" + this.fieldKey + "_usePath"; } // prettier-ignore
     get starField()     { return "star"; } // prettier-ignore
 
+    _fadeTimer: NodeJS.Timeout | undefined;
+
     constructor(props: SubCollectionViewProps) {
         super(props);
         makeObservable(this);
-        // this.setModes();
-        this.layoutDoc.filterOp = cardMode.ALL;
-        Doc.setDocFilter(this.Document, 'star', undefined, 'match');
-        this.layoutDoc.practiceMode = practiceMode.NORMAL;
-        this.layoutDoc._carousel_index = 0;
-        this.carouselItems.forEach(item => { item.layout[this.practiceField] = undefined}); //prettier-ignore
-        console.log(this.carouselItems.length);
     }
 
+    @observable _last_index = this.carouselIndex;
+    @observable _last_opacity = 1;
+
     componentWillUnmount() {
         this._dropDisposer?.();
     }
@@ -65,65 +57,42 @@ export class CollectionCarouselView extends CollectionSubView() {
         }
     };
 
-    @computed get carouselItems() {
-        this.childLayoutPairs.map(pair => {
-            pair.layout.embedContainer = this.Document;
-        });
-        return this.childLayoutPairs.filter(pair => pair.layout.type !== DocumentType.LINK);
+    @computed get practiceMode() {
+        return this.childDocs.some(doc => doc._layout_isFlashcard) ? StrCast(this.layoutDoc.practiceMode) : '';
     }
-    @computed get marginX() {
-        return NumCast(this.layoutDoc.caption_xMargin, 50);
+    @computed get practiceMessage() {
+        const cardCount = this.carouselItems.length;
+        if (this.practiceMode) {
+            if (!Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
+                return 'Finished! Click here to view all flashcards.';
+            }
+        }
+        return '';
     }
 
-    @action setPracticeMessage = (mes: string | undefined) => {
-        this._practiceMessage = mes;
-    };
-    @action setFilterMessage = (mes: string | undefined) => {
-        this._filterMessage = mes;
-    };
-
-    setModes = () => {
-        this.layoutDoc.filterOp = cardMode.ALL;
-        Doc.setDocFilter(this.Document, 'data_star', undefined, 'match');
-        this.layoutDoc.practiceMode = practiceMode.NORMAL;
-        this.layoutDoc._carousel_index = 0;
-    };
-
-    move = (dir: number) => {
-        const moveToCardWithField = (match: (doc: Doc) => boolean): boolean => {
-            let startInd = (NumCast(this.layoutDoc._carousel_index) + dir) % this.carouselItems.length;
-            while (!match(this.carouselItems?.[startInd].layout) && (startInd + this.carouselItems.length) % this.carouselItems.length !== this.layoutDoc._carousel_index) {
-                startInd = (startInd + dir + this.carouselItems.length) % this.carouselItems.length;
+    @computed get filterMessage() {
+        const cardCount = this.carouselItems.length;
+        if (!this.practiceMessage) {
+            if (Doc.hasDocFilter(this.layoutDoc, 'star') && !cardCount) {
+                return 'No starred items. Click here to view all flash cards.';
             }
-            if (match(this.carouselItems?.[startInd].layout)) {
-                this.layoutDoc._carousel_index = startInd;
-                return true;
+            if (this.practiceMode) {
+                if (!cardCount) return 'No flashcards to show! Click here to leave practice mode';
             }
-            return match(this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout);
-        };
-
-        switch (this.layoutDoc.practiceMode && this.layoutDoc.filterOp) {
-            case practiceMode.PRACTICE && cardMode.ALL:
-                if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT)) {
-                    this._practiceMessage = 'Finished! Unselect practice mode to view all flashcards.';
-                    this.carouselItems.forEach(item => { item.layout[this.practiceField] = undefined}); //prettier-ignore
-                }
-                break;
-            case !practiceMode.PRACTICE && cardMode.STAR:
-                if (!moveToCardWithField((doc: Doc) => !!doc[this.starField])) {
-                    this._filterMessage = 'No starred items. Unselect this view to see all flashcards and star them.';
-                }
-                break;
-            case practiceMode.PRACTICE && cardMode.STAR:
-                if (!moveToCardWithField((doc: Doc) => doc[this.practiceField] !== practiceVal.CORRECT && doc[this.starField] === true)) {
-                    this._filterMessage = 'No flashcards to show! Unselect mode to view all flashcards.';
-                    this._practiceMessage = undefined;
-                }
-                break;
-            default:
-                moveToCardWithField(returnTrue);
         }
-    };
+        return '';
+    }
+    @computed get marginX()       { return NumCast(this.layoutDoc.caption_xMargin, 50); } // prettier-ignore
+    @computed get carouselIndex() { return NumCast(this.layoutDoc._carousel_index) % this.carouselItems.length; } // prettier-ignore
+    @computed get carouselItems() { return this.childDocs
+        .filter(doc => doc.type !== DocumentType.LINK)
+        .filter(doc => !this.practiceMode || (BoolCast(doc?._layout_isFlashcard) && doc[this.practiceField] !== practiceVal.CORRECT))// show only cards that aren't marked as correct
+    } // prettier-ignore
+
+    move = action((dir: number) => {
+        this._last_index = this.carouselIndex;
+        this.layoutDoc._carousel_index = this.carouselItems.length ? (this.carouselIndex + dir + this.carouselItems.length) % this.carouselItems.length : 0;
+    });
 
     /**
      * Goes to the next Doc in the stack subject to the currently selected filter option.
@@ -146,10 +115,8 @@ export class CollectionCarouselView extends CollectionSubView() {
      */
     star = (e: React.MouseEvent) => {
         e.stopPropagation();
-        const curDoc = this.carouselItems[NumCast(this.layoutDoc._carousel_index)];
-        curDoc.layout[this.starField] = curDoc.layout[this.starField] ? undefined : true;
-        // if (!curDoc.layout[this.starField]) this.move(1);
-        // this.layoutDoc._carousel_index = undefined;
+        const curDoc = this.carouselItems[this.carouselIndex];
+        curDoc && (curDoc[this.starField] = curDoc[this.starField] ? undefined : true);
     };
 
     /*
@@ -157,8 +124,8 @@ export class CollectionCarouselView extends CollectionSubView() {
      */
     setPracticeVal = (e: React.MouseEvent, val: string) => {
         e.stopPropagation();
-        const curDoc = this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)];
-        curDoc.layout[this.practiceField] = val;
+        const curDoc = this.carouselItems[this.carouselIndex];
+        curDoc && (curDoc[this.practiceField] = val);
         this.advance(e);
     };
 
@@ -172,71 +139,92 @@ export class CollectionCarouselView extends CollectionSubView() {
     onContentClick = () => ScriptCast(this.layoutDoc.onChildClick);
     captionWidth = () => this._props.PanelWidth() - 2 * this.marginX;
 
-    setPracticeMode = (mode: practiceMode) => {
+    setPracticeMode = (mode: practiceMode | undefined) => {
         this.layoutDoc.practiceMode = mode;
-        this.carouselItems?.map(doc => (doc.layout[this.practiceField] = undefined));
-        switch (mode) {
-            case practiceMode.QUIZ:
-                this.carouselItems?.map(doc => (doc.layout[this.sideField] = undefined));
-                break;
-            case practiceMode.NORMAL:
-                this.setPracticeMessage(undefined);
-                break;
-        }
+        this.carouselItems?.map(doc => (doc[this.practiceField] = undefined));
+        if (mode === practiceMode.QUIZ) this.carouselItems?.map(doc => (doc[this.sideField] = undefined));
     };
 
-    setFilterMode = (mode: cardMode) => {
-        this.layoutDoc.filterOp = mode;
-        switch (mode) {
-            case cardMode.STAR:
-                // Doc.setDocFilter(this.Document, 'data_star', true, 'match');
-                this.move(1);
-                break;
-            default:
-                this.setFilterMessage(undefined); // prettier-ignore
-            // Doc.setDocFilter(this.Document, 'data_star', true, 'remove');
-        }
-    };
     contentScreentToLocalXf = () => this._props.ScreenToLocalTransform().translate(-NumCast(this.layoutDoc.xMargin), -NumCast(this.layoutDoc.yMargin));
 
     contentPanelWidth = () => this._props.PanelWidth() - 2 * NumCast(this.layoutDoc.xMargin);
+
+    isChildContentActive = () =>
+        this._props.isContentActive?.() === false
+            ? false
+            : this._props.isDocumentActive?.() && (this._props.childDocumentsActive?.() || BoolCast(this.Document.childDocumentsActive))
+              ? true
+              : this._props.childDocumentsActive?.() === false || this.Document.childDocumentsActive === false
+                ? false
+                : undefined;
+
+    renderDoc = (doc: Doc, showCaptions: boolean, overlayFunc?: (r: DocumentView | null) => void) => {
+        return (
+            <DocumentView
+                {...this._props}
+                ref={overlayFunc}
+                Document={doc}
+                NativeWidth={returnZero}
+                NativeHeight={returnZero}
+                fitWidth={undefined}
+                containerViewPath={this.childContainerViewPath}
+                setContentViewBox={undefined}
+                onDoubleClickScript={this.onContentDoubleClick}
+                onClickScript={this.onContentClick}
+                isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
+                isContentActive={this.isChildContentActive}
+                hideCaptions={showCaptions}
+                renderDepth={this._props.renderDepth + 1}
+                LayoutTemplate={this._props.childLayoutTemplate}
+                LayoutTemplateString={this._props.childLayoutString}
+                TemplateDataDocument={DocCast(Doc.Layout(doc).resolvedDataDoc)}
+                childFilters={this.childDocFilters}
+                hideDecorations={BoolCast(this.layoutDoc.layout_hideDecorations)}
+                addDocument={this._props.addDocument}
+                ScreenToLocalTransform={this.contentScreentToLocalXf}
+                PanelWidth={this.contentPanelWidth}
+                PanelHeight={this.contentPanelHeight}
+            />
+        );
+    };
+    /**
+     * Display an overlay of the previous card that crossfades to the next card
+     */
+    @computed get overlay() {
+        const fadeTime = 500;
+        const lastDoc = this.carouselItems?.[this._last_index];
+        return !lastDoc || this.carouselIndex === this._last_index ? null : (
+            <div className="collectionCarouselView-image" style={{ opacity: this._last_opacity, position: 'absolute', top: 0, left: 0, transition: `opacity ${fadeTime}ms` }}>
+                {this.renderDoc(
+                    lastDoc,
+                    false, // hide captions if the carousel is configured to show the captions
+                    action((r: DocumentView | null) => {
+                        if (r) {
+                            this._fadeTimer && clearTimeout(this._fadeTimer);
+                            this._last_opacity = 0;
+                            this._fadeTimer = setTimeout(
+                                action(() => {
+                                    this._last_index = -1;
+                                    this._last_opacity = 1;
+                                }),
+                                fadeTime
+                            );
+                        }
+                    })
+                )}
+            </div>
+        );
+    }
     @computed get content() {
-        trace();
-        if (this.layoutDoc._carousel_index === this.carouselItems.length && this.layoutDoc._carousel_index !== 0) {
-            this.move(1);
-        }
-        const index = NumCast(this.layoutDoc._carousel_index);
+        const index = this.carouselIndex;
         const curDoc = this.carouselItems?.[index];
         const captionProps = { ...this._props, NativeScaling: returnOne, PanelWidth: this.captionWidth, fieldKey: 'caption', setHeight: undefined, setContentView: undefined };
         const carouselShowsCaptions = StrCast(this.layoutDoc._layout_showCaption);
-
-        return !(curDoc?.layout instanceof Doc) ? null : (
+        return !curDoc ? null : (
             <>
-                <div className="collectionCarouselView-image" style={{ padding: `${NumCast(this.layoutDoc.yMargin)}px ${NumCast(this.layoutDoc.xMargin)}px ${NumCast(this.layoutDoc.yMargin)}px ${NumCast(this.layoutDoc.xMargin)}px` }}>
-                    <DocumentView
-                        {...this._props}
-                        NativeWidth={returnZero}
-                        NativeHeight={returnZero}
-                        fitWidth={undefined}
-                        setContentViewBox={undefined}
-                        childFilters={this.childDocFilters}
-                        containerViewPath={this._props.docViewPath}
-                        onDoubleClickScript={this.onContentDoubleClick}
-                        onClickScript={this.onContentClick}
-                        hideDecorations={BoolCast(this.layoutDoc.layout_hideDecorations)}
-                        isDocumentActive={this._props.childDocumentsActive?.() ? this._props.isDocumentActive : this._props.isContentActive}
-                        isContentActive={(this._props.childContentsActive ?? this._props.isContentActive() === false) ? returnFalse : emptyFunction}
-                        addDocument={this._props.addDocument}
-                        hideCaptions={!!carouselShowsCaptions} // hide captions if the carousel is configured to show the captions
-                        renderDepth={this._props.renderDepth + 1}
-                        LayoutTemplate={this._props.childLayoutTemplate}
-                        LayoutTemplateString={this._props.childLayoutString}
-                        Document={curDoc.layout}
-                        TemplateDataDocument={DocCast(curDoc.layout.resolvedDataDoc)}
-                        ScreenToLocalTransform={this.contentScreentToLocalXf}
-                        PanelWidth={this.contentPanelWidth}
-                        PanelHeight={this.contentPanelHeight}
-                    />
+                <div className="collectionCarouselView-image" key="image">
+                    {this.renderDoc(curDoc, !!carouselShowsCaptions)}
+                    {this.overlay}
                 </div>
                 {!carouselShowsCaptions ? null : (
                     <div
@@ -249,17 +237,13 @@ export class CollectionCarouselView extends CollectionSubView() {
                             marginLeft: this.marginX,
                             width: `calc(100% - ${this.marginX * 2}px)`,
                         }}>
-                        <FormattedTextBox key={index} {...captionProps} fieldKey={carouselShowsCaptions} styleProvider={this.captionStyleProvider} Document={curDoc.layout} TemplateDataDocument={undefined} />
+                        <FormattedTextBox key={index} xPadding={10} yPadding={10} {...captionProps} fieldKey={carouselShowsCaptions} styleProvider={this.captionStyleProvider} Document={curDoc} TemplateDataDocument={undefined} />
                     </div>
                 )}
             </>
         );
     }
 
-    containsDifTypes = (): boolean => {
-        return this.carouselItems.filter(doc => !doc.layout._layout_isFlashcard).length !== 0;
-    };
-
     addFlashcard() {
         const newDoc = Docs.Create.ComparisonDocument('', { _layout_isFlashcard: true, _width: 300, _height: 300 });
         this.addDocument?.(newDoc);
@@ -275,30 +259,28 @@ export class CollectionCarouselView extends CollectionSubView() {
     }
 
     @computed get buttons() {
-        if (!this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)]) return null;
+        if (!this.carouselItems?.[this.carouselIndex]) return null;
         return (
             <>
+                <div>
+                    <Tooltip title="star">
+                        <div key="star" className="carouselView-star" onClick={this.star}>
+                            <FontAwesomeIcon icon="star" color={this.carouselItems[this.carouselIndex]?.[this.starField] ? 'yellow' : 'gray'} size="1x" />
+                        </div>
+                    </Tooltip>
+                    {/* <Tooltip title="add new flashcard to pile">
+                        <div key="add" className="carouselView-add" onClick={this.addFlashcard}>
+                            <FontAwesomeIcon icon="plus" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
+                        </div>
+                    </Tooltip> */}
+                </div>
                 <div key="back" className="carouselView-back" onClick={this.goback}>
                     <FontAwesomeIcon icon="chevron-left" size="2x" />
                 </div>
                 <div key="fwd" className="carouselView-fwd" onClick={this.advance}>
                     <FontAwesomeIcon icon="chevron-right" size="2x" />
                 </div>
-                {!this.containsDifTypes() ? (
-                    <div>
-                        <Tooltip title="star">
-                            <div key="star" className="carouselView-star" onClick={this.star}>
-                                <FontAwesomeIcon icon="star" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
-                            </div>
-                        </Tooltip>
-                        {/* <Tooltip title="add new flashcard to pile">
-                            <div key="add" className="carouselView-add" onClick={this.addFlashcard}>
-                                <FontAwesomeIcon icon="plus" color={this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.starField] ? 'yellow' : 'gray'} size="1x" />
-                            </div>
-                        </Tooltip> */}
-                    </div>
-                ) : null}
-                {this.layoutDoc.practiceMode === practiceMode.PRACTICE ? (
+                {this.practiceMode ? (
                     <div>
                         <Tooltip title="Incorrect. View again later.">
                             <div key="remove" className="carouselView-remove" onClick={e => this.setPracticeVal(e, practiceVal.MISSED)}>
@@ -316,33 +298,31 @@ export class CollectionCarouselView extends CollectionSubView() {
         );
     }
 
-    togglePracticeMode = (mode: practiceMode) => {
-        if (mode === this.layoutDoc.practiceMode) {
-            this.setPracticeMode(practiceMode.NORMAL);
-            // this.setPracticeMessage("undefined");
-        } else this.setPracticeMode(mode);
-    };
-    toggleFilterMode = () => { this.layoutDoc.filterOp === cardMode.STAR ? this.setFilterMode(cardMode.ALL) : this.setFilterMode(cardMode.STAR)}; //prettier-ignore
+    togglePracticeMode = (mode: practiceMode) => this.setPracticeMode(mode === this.layoutDoc.practiceMode ? undefined : mode);
+    toggleFilterMode = () => Doc.setDocFilter(this.Document, 'star', true, 'match', true);
     setColor = (mode: practiceMode | cardMode, which: string) => { return which === mode ? 'white' : 'light gray'}; //prettier-ignore
 
     @computed get menu() {
+        const curDoc = this.carouselItems?.[this.carouselIndex];
         return (
             <div className="carouselView-menu">
-                <Tooltip title="Practice flashcards using GPT">
-                    <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
-                        <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.layoutDoc.practiceMode))} size="1x" />
-                    </div>
-                </Tooltip>
-                <Tooltip title={this.layoutDoc.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
-                    <div key="back" className="carouselView-practice" onClick={e => this.togglePracticeMode(practiceMode.PRACTICE)}>
-                        <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.layoutDoc.practiceMode))} size="1x" />
-                    </div>
-                </Tooltip>
-                <Tooltip title={this.layoutDoc.filterOp === cardMode.STAR ? 'Show all cards' : 'Show only starred cards'}>
+                <Tooltip title={Doc.hasDocFilter(this.Document, 'star') ? 'Show all cards' : 'Show only starred cards'}>
                     <div key="back" className="carouselView-starFilter" onClick={e => this.toggleFilterMode()}>
-                        <FontAwesomeIcon icon="filter" color={this.setColor(cardMode.STAR, StrCast(this.layoutDoc.filterOp))} size="1x" />
+                        <FontAwesomeIcon icon="filter" color={Doc.hasDocFilter(this.Document, 'star') ? 'white' : 'lightgray'} size="1x" />
                     </div>
                 </Tooltip>
+                <div className="carouselView-practiceModes" style={{ display: BoolCast(curDoc?._layout_isFlashcard) ? undefined : 'none' }}>
+                    <Tooltip title="Practice flashcards using GPT">
+                        <div key="back" className="carouselView-quiz" onClick={e => this.togglePracticeMode(practiceMode.QUIZ)}>
+                            <FontAwesomeIcon icon="file-pen" color={this.setColor(practiceMode.QUIZ, StrCast(this.layoutDoc.practiceMode))} size="1x" />
+                        </div>
+                    </Tooltip>
+                    <Tooltip title={this.layoutDoc.practiceMode === practiceMode.PRACTICE ? 'Exit practice mode' : 'Practice flashcards manually'}>
+                        <div key="back" className="carouselView-practice" onClick={e => this.togglePracticeMode(practiceMode.PRACTICE)}>
+                            <FontAwesomeIcon icon="check" color={this.setColor(practiceMode.PRACTICE, StrCast(this.layoutDoc.practiceMode))} size="1x" />
+                        </div>
+                    </Tooltip>
+                </div>
             </div>
         );
     }
@@ -356,36 +336,25 @@ export class CollectionCarouselView extends CollectionSubView() {
                     background: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.BackgroundColor) as string,
                     color: this._props.styleProvider?.(this.layoutDoc, this._props, StyleProp.Color) as string,
                 }}>
-                {!this._practiceMessage && !this._filterMessage ? (
+                {!this.practiceMessage && !this.filterMessage ? (
                     this.content
                 ) : (
-                    <p className="message">
-                        {this._filterMessage}
-                        {'\n'}
-                        {this._practiceMessage}
+                    <p
+                        className="message"
+                        onClick={e => {
+                            if (this.filterMessage) {
+                                this.layoutDoc.practiceMode = undefined;
+                                Doc.setDocFilter(this.layoutDoc, 'star', undefined, 'remove');
+                            }
+                            this.childDocs.forEach(item => {
+                                item[this.practiceField] = undefined;
+                            });
+                        }}>
+                        {this.filterMessage || this.practiceMessage}
                     </p>
                 )}
-                {!this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)] && this.layoutDoc.practiceMode === practiceMode.PRACTICE ? <p className="message">Add flashcards </p> : null}
-                <p
-                    className="missed-message"
-                    style={{
-                        color: 'red',
-                        fontWeight: 'bold',
-                        zIndex: '999',
-                        position: 'relative',
-                        left: '10px',
-                        top: '10px',
-                        width: '10px',
-                        display: this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)]
-                            ? this.carouselItems?.[NumCast(this.layoutDoc._carousel_index)].layout[this.practiceField] === practiceVal.MISSED && this.layoutDoc.practiceMode === practiceMode.PRACTICE && !this._practiceMessage
-                                ? 'block'
-                                : 'none'
-                            : 'none',
-                    }}>
-                    Recently missed!
-                </p>
-                {!this.containsDifTypes() && this.carouselItems.length !== 0 ? this.menu : null}
-                {this.Document._chromeHidden || (!this._filterMessage && !this._practiceMessage) ? this.buttons : null}
+                {!this.Document._chromeHidden ? this.menu : null}
+                {!this.Document._chromeHidden ? this.buttons : null}
             </div>
         );
     }
diff --git a/src/client/views/collections/CollectionDockingView.tsx b/src/client/views/collections/CollectionDockingView.tsx
index e0aa79c7b..028133a6e 100644
--- a/src/client/views/collections/CollectionDockingView.tsx
+++ b/src/client/views/collections/CollectionDockingView.tsx
@@ -31,6 +31,7 @@ import { ScriptingRepl } from '../ScriptingRepl';
 import { UndoStack } from '../UndoStack';
 import './CollectionDockingView.scss';
 import { CollectionSubView, SubCollectionViewProps } from './CollectionSubView';
+import { TabHTMLElement } from './TabDocView';
 
 @observer
 export class CollectionDockingView extends CollectionSubView() {
@@ -544,7 +545,7 @@ export class CollectionDockingView extends CollectionSubView() {
     tabCreated = (tab: { contentItem: { element: HTMLElement[] } }) => {
         this.tabMap.add(tab);
         // InitTab is added to the tab's HTMLElement in TabDocView
-        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as unknown as { InitTab?: (tab: object) => void };
+        const tabdocviewContent = tab.contentItem.element[0]?.firstChild?.firstChild as unknown as TabHTMLElement;
         tabdocviewContent?.InitTab?.(tab); // have to explicitly initialize tabs that reuse contents from previous tabs (ie, when dragging a tab around a new tab is created for the old content)
     };
 
diff --git a/src/client/views/collections/TabDocView.tsx b/src/client/views/collections/TabDocView.tsx
index 31b6be927..f56ea9d76 100644
--- a/src/client/views/collections/TabDocView.tsx
+++ b/src/client/views/collections/TabDocView.tsx
@@ -57,6 +57,7 @@ interface TabMiniThumbProps {
     miniLeft: () => number;
 }
 
+export type TabHTMLElement = HTMLDivElement & { InitTab?: (tab: object) => void };
 @observer
 class TabMiniThumb extends React.Component<TabMiniThumbProps> {
     render() {
@@ -193,8 +194,9 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
             .filter(tv => tv._document)
             .map(tv => tv._document!);
     }
-    _mainCont: HTMLDivElement | null = null;
+    _mainCont: TabHTMLElement | null = null;
     _tabReaction: IReactionDisposer | undefined;
+    _lastSelection = 0; // time when view was last selected - used to re-select views that get invalidated when selected
 
     /**
      * Adds a document to the presentation view
@@ -273,19 +275,24 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         setTimeout(batch.end, 500); // need to wait until dockingview (goldenlayout) updates all its structurs
     }
 
+    // Flag indicating that when a tab is activated, it should not select it's document.
+    // this is used by the link properties menu when it wants to display the link target without selecting the target (which would make the link property window go away since it would no longer be selected)
+    public static DontSelectOnActivate = 'dontSelectOnActivate';
+
+    public static IsSelected = (doc?: Doc) => {
+        return DocumentView.getViews(doc).some(dv => dv?.IsSelected);
+    };
+
     static Activate = (tabDoc: Doc) => {
         const tab = Array.from(CollectionDockingView.Instance?.tabMap ?? []).find(findTab => findTab.DashDoc === tabDoc && !findTab.contentItem.config.props.keyValue);
         tab?.header.parent.setActiveContentItem(tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
         return tab !== undefined;
     };
-    // static ActivateTabView(doc: Doc) {
-    //     const tabView = Array.from(TabDocView._allTabs).find(view => view._document === doc);
-    //     if (!tabView?._activated && tabView?._document) {
-    //         TabDocView.Activate(tabView?._document);
-    //         return tabView;
-    //     }
-    //     return undefined;
-    // }
+
+    get stack()           { return this._props.glContainer.parent.parent; } // prettier-ignore
+    get tab()             { return this._props.glContainer.tab;  } // prettier-ignore
+    get view()            { return this._view;  } // prettier-ignore
+
     constructor(props: TabDocViewProps) {
         super(props);
         makeObservable(this);
@@ -299,37 +306,13 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     @observable _hovering = false;
     @observable _isActive: boolean = false;
     @observable _isAnyChildContentActive = false;
-    public static IsSelected = (doc?: Doc) => {
-        if (DocumentView.getViews(doc).some(dv => dv?.IsSelected)) {
-            return true;
-        }
-        return false;
-    };
-    @computed get _isUserActivated() {
-        return TabDocView.IsSelected(this._document) || this._isAnyChildContentActive;
-    }
-    get _isContentActive() {
-        return this._isUserActivated || this._hovering;
-    }
     @observable _document: Doc | undefined = undefined;
     @observable _view: DocumentView | undefined = undefined;
+    @observable _forceInvalidateScreenToLocal = 0; // screentolocal is computed outside of react using a dom resize ovbserver.  this hack allows the resize observer to trigger a react update
 
-    @computed get layoutDoc() {
-        return this._document && Doc.Layout(this._document);
-    }
-
-    get stack() {
-        return this._props.glContainer.parent.parent;
-    }
-    get tab() {
-        return this._props.glContainer.tab;
-    }
-    get view() {
-        return this._view;
-    }
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    _lastTab: any;
-    _lastView: DocumentView | undefined;
+    @computed get layoutDoc() { return this._document && Doc.Layout(this._document); } // prettier-ignore
+    @computed get isUserActivated() {  return TabDocView.IsSelected(this._document) || this._isAnyChildContentActive; } // prettier-ignore
+    @computed get isContentActive() { return this.isUserActivated || this._hovering; } // prettier-ignore
 
     @action
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -413,7 +396,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                             color === variant
                                 ? DashColor(color)
                                       .fade(
-                                          this._isUserActivated
+                                          this.isUserActivated
                                               ? 0
                                               : this._hovering
                                                 ? 0.25
@@ -522,19 +505,14 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         this._props.glContainer.layoutManager.off('activeContentItemChanged', this.onActiveContentItemChanged);
     }
 
-    // Flag indicating that when a tab is activated, it should not select it's document.
-    // this is used by the link properties menu when it wants to display the link target without selecting the target (which would make the link property window go away since it would no longer be selected)
-    public static DontSelectOnActivate = 'dontSelectOnActivate';
-
-    @action.bound
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    private onActiveContentItemChanged(contentItem: any) {
+    onActiveContentItemChanged = action((contentItem: any) => {
         if (!contentItem || (this.stack === contentItem.parent && ((contentItem?.tab === this.tab && !this._isActive) || (contentItem?.tab !== this.tab && this._isActive)))) {
             this._activated = this._isActive = !contentItem || contentItem?.tab === this.tab;
             if (!this._view && this.tab?.contentItem?.config?.props?.panelName !== TabDocView.DontSelectOnActivate) setTimeout(() => DocumentView.SelectView(this._view, false));
             !this._isActive && this._document && Doc.UnBrushDoc(this._document); // bcz: bad -- trying to simulate a pointer leave event when a new tab is opened up on top of an existing one.
         }
-    }
+    });
 
     // adds a tab to the layout based on the locaiton parameter which can be:
     //  close[:{left,right,top,bottom}]  - e.g., "close" will close the tab, "close:left" will close the left tab,
@@ -551,7 +529,6 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         const whereMods = whereFields.length > 1 ? (whereFields[1] as OpenWhereMod) : OpenWhereMod.none;
         const panelName = whereFields.length > 1 ? whereFields.lastElement() : '';
         if (docs[0]?.dockingConfig && !keyValue) return DashboardView.openDashboard(docs[0]);
-        // prettier-ignore
         switch (whereFields[0]) {
             case undefined:
             case OpenWhere.lightbox:   return LightboxView.Instance.AddDocTab(docs[0], location);
@@ -559,7 +536,7 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
             case OpenWhere.replace:    return CollectionDockingView.ReplaceTab(docs[0], whereMods, this.stack, panelName, undefined, keyValue);
             case OpenWhere.toggle:     return CollectionDockingView.ToggleSplit(docs[0], whereMods, this.stack, TabDocView.DontSelectOnActivate, keyValue);
             case OpenWhere.add:default:return CollectionDockingView.AddSplit(docs[0], whereMods, this.stack, undefined, keyValue);
-        }
+        } // prettier-ignore
     };
     remDocTab = (doc: Doc | Doc[]) => {
         if (doc === this._document) {
@@ -571,8 +548,6 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     };
 
     getCurrentFrame = () => NumCast(Cast(PresBox.Instance.activeItem.presentation_targetDoc, Doc, null)._currentFrame);
-
-    @action
     focusFunc = () => {
         if (!this.tab.header.parent._activeContentItem || this.tab.header.parent._activeContentItem !== this.tab.contentItem) {
             this.tab.header.parent.setActiveContentItem(this.tab.contentItem); // glr: Panning does not work when this is set - (this line is for trying to make a tab that is not topmost become topmost)
@@ -580,7 +555,6 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
         return undefined;
     };
     active = () => this._isActive;
-    @observable _forceInvalidateScreenToLocal = 0;
     ScreenToLocalTransform = () => {
         this._forceInvalidateScreenToLocal;
         const { translateX, translateY } = ClientUtils.GetScreenTransform(this._mainCont?.children?.[0] as HTMLElement);
@@ -594,47 +568,44 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
     whenChildContentActiveChanges = (isActive: boolean) => {
         this._isAnyChildContentActive = isActive;
     };
-    isContentActive = () => this._isContentActive;
+    isContentActiveFunc = () => this.isContentActive;
     waitForDoubleClick = () => (SnappingManager.ExploreMode ? 'never' : undefined);
-    @computed get docView() {
-        return !this._activated || !this._document ? null : (
-            <>
-                <DocumentView
-                    key={this._document[Id]}
-                    ref={action((r: DocumentView) => {
-                        this._lastView && DocumentView.removeView(this._lastView);
-                        this._view = r;
-                        this._lastView = this._view;
-                    })}
-                    renderDepth={0}
-                    LayoutTemplateString={this._props.keyValue ? KeyValueBox.LayoutString() : undefined}
-                    hideTitle={this._props.keyValue}
-                    Document={this._document}
-                    TemplateDataDocument={!Doc.AreProtosEqual(this._document[DocData], this._document) ? this._document[DocData] : undefined}
-                    waitForDoubleClickToClick={this.waitForDoubleClick}
-                    isContentActive={this.isContentActive}
-                    isDocumentActive={returnFalse}
-                    PanelWidth={this.PanelWidth}
-                    PanelHeight={this.PanelHeight}
-                    styleProvider={DefaultStyleProvider}
-                    childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter}
-                    childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter}
-                    searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
-                    addDocument={undefined}
-                    removeDocument={this.remDocTab}
-                    addDocTab={this.addDocTab}
-                    suppressSetHeight={!!this._document._layout_fitWidth}
-                    ScreenToLocalTransform={this.ScreenToLocalTransform}
-                    dontCenter="y"
-                    whenChildContentsActiveChanged={this.whenChildContentActiveChanges}
-                    focus={this.focusFunc}
-                    containerViewPath={returnEmptyDocViewList}
-                    pinToPres={TabDocView.PinDoc}
-                />
-                {this.disableMinimap() ? null : <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} document={this._document} tabView={this.tabView} />}
-            </>
-        );
-    }
+    renderDocView = (doc: Doc) => (
+        <DocumentView
+            key={doc[Id]}
+            ref={action((r: DocumentView) => {
+                const now = Date.now();
+                this._lastSelection = this._view?.IsSelected ? now : this._lastSelection;
+                if (this._view) DocumentView.removeView(this._view);
+                this._view = r;
+                if (this._view && now - this._lastSelection < 1000) this._view.select(false);
+            })}
+            renderDepth={0}
+            LayoutTemplateString={this._props.keyValue ? KeyValueBox.LayoutString() : undefined}
+            hideTitle={this._props.keyValue}
+            Document={doc}
+            TemplateDataDocument={!Doc.AreProtosEqual(doc[DocData], doc) ? doc[DocData] : undefined}
+            waitForDoubleClickToClick={this.waitForDoubleClick}
+            isContentActive={this.isContentActiveFunc}
+            isDocumentActive={returnFalse}
+            PanelWidth={this.PanelWidth}
+            PanelHeight={this.PanelHeight}
+            styleProvider={DefaultStyleProvider}
+            childFilters={CollectionDockingView.Instance?.childDocFilters ?? returnEmptyFilter}
+            childFiltersByRanges={CollectionDockingView.Instance?.childDocRangeFilters ?? returnEmptyFilter}
+            searchFilterDocs={CollectionDockingView.Instance?.searchFilterDocs ?? returnEmptyDoclist}
+            addDocument={undefined}
+            removeDocument={this.remDocTab}
+            addDocTab={this.addDocTab}
+            suppressSetHeight={!!doc._layout_fitWidth}
+            ScreenToLocalTransform={this.ScreenToLocalTransform}
+            dontCenter="y"
+            whenChildContentsActiveChanged={this.whenChildContentActiveChanges}
+            focus={this.focusFunc}
+            containerViewPath={returnEmptyDocViewList}
+            pinToPres={TabDocView.PinDoc}
+        />
+    );
 
     render() {
         return (
@@ -647,23 +618,21 @@ export class TabDocView extends ObservableReactComponent<TabDocViewProps> {
                 onPointerLeave={action(() => { this._hovering = false; })} // prettier-ignore
                 onDragOver={action(() =>     { this._hovering = true; })} // prettier-ignore
                 onDragLeave={action(() =>    { this._hovering = false; })} // prettier-ignore
-                ref={ref => {
+                ref={(ref: TabHTMLElement) => {
+                    // "add" an InitTab function to this div to call from tabCreated in CollectionDockingView when div is reused
                     this._mainCont = ref;
                     if (this._mainCont) {
-                        if (this._lastTab) {
-                            this._view && DocumentView.removeView(this._view);
-                        }
-                        this._lastTab = this.tab;
-                        (this._mainCont as { InitTab?: (tab: object) => void }).InitTab = (tab: object) => this.init(tab, this._document);
-                        DocServer.GetRefField(this._props.documentId).then(
-                            action(doc => {
-                                doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document);
-                            })
-                        );
-                        ref && new ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(ref);
+                        this._mainCont.InitTab = (tab: object) => this.init(tab, this._document);
+                        DocServer.GetRefField(this._props.documentId).then(action(doc => {
+                            doc instanceof Doc && (this._document = doc) && this.tab && this.init(this.tab, this._document);
+                        })); // prettier-ignore
+                        new ResizeObserver(action(() => this._forceInvalidateScreenToLocal++)).observe(this._mainCont);
                     }
                 }}>
-                {this.docView}
+                {!this._activated || !this._document ? null : this.renderDocView(this._document)}
+                {this.disableMinimap() || !this._document ? null : (
+                    <TabMinimapView key="minimap" addDocTab={this.addDocTab} PanelHeight={this.PanelHeight} PanelWidth={this.PanelWidth} background={this.miniMapColor} document={this._document} tabView={this.tabView} />
+                )}
             </div>
         );
     }
diff --git a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
index f9f6c81ab..534f67927 100644
--- a/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/FaceCollectionBox.tsx
@@ -179,7 +179,7 @@ export class UniqueFaceBox extends ViewBoxBaseComponent<FieldViewProps>() {
                             ele?.addEventListener('wheel', this.onPassiveWheel, { passive: false });
                         })}>
                         {FaceRecognitionHandler.UniqueFaceImages(this.Document).map((doc, i) => {
-                            const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)]).url.href.split('.');
+                            const [name, type] = ImageCast(doc[Doc.LayoutFieldKey(doc)])?.url.href.split('.') ?? ['-missing-', '.png'];
                             return (
                                 <div
                                     className="image-wrapper"
diff --git a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
index 94ec59ecb..753685b97 100644
--- a/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
+++ b/src/client/views/collections/collectionFreeForm/ImageLabelBox.tsx
@@ -139,9 +139,9 @@ export class ImageLabelBox extends ViewBoxBaseComponent<FieldViewProps>() {
     toggleDisplayInformation = () => {
         this._displayImageInformation = !this._displayImageInformation;
         if (this._displayImageInformation) {
-            this._selectedImages.forEach(doc => (doc[DocData].showTags = true));
+            this._selectedImages.forEach(doc => (doc._layout_showTags = true));
         } else {
-            this._selectedImages.forEach(doc => (doc[DocData].showTags = false));
+            this._selectedImages.forEach(doc => (doc._layout_showTags = false));
         }
     };