Merge branch 'alyssa-starter' of https://github.com/brown-dash/Dash-Web into alyssa-starter

1 files changed, 81 insertions, 109 deletions

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 461a65c27..9fb8bc4d6 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -1,41 +1,34 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { MathJax, MathJaxContext } from 'better-react-mathjax';
 import { Tooltip } from '@mui/material';
-import { action, computed, makeObservable, observable, reaction } from 'mobx';
+import axios from 'axios';
+import { IReactionDisposer, action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
+import ReactLoading from 'react-loading';
 import { returnFalse, returnNone, returnTrue, returnZero, setupMoveUpEvents } from '../../../ClientUtils';
 import { emptyFunction } from '../../../Utils';
 import { Doc, Opt } from '../../../fields/Doc';
 import { DocData } from '../../../fields/DocSymbols';
+import { Id } from '../../../fields/FieldSymbols';
 import { RichTextField } from '../../../fields/RichTextField';
 import { DocCast, NumCast, RTFCast, StrCast, toList } from '../../../fields/Types';
+import { nullAudio } from '../../../fields/URLField';
 import { GPTCallType, gptAPICall, gptImageLabel } from '../../apis/gpt/GPT';
-import '../pdf/GPTPopup/GPTPopup.scss';
-import { DocUtils } from '../../documents/DocUtils';
+import { DocUtils, FollowLinkScript } from '../../documents/DocUtils';
 import { CollectionViewType, DocumentType } from '../../documents/DocumentTypes';
 import { Docs } from '../../documents/Documents';
 import { DragManager } from '../../util/DragManager';
 import { dropActionType } from '../../util/DropActionTypes';
 import { undoable } from '../../util/UndoManager';
+import { ContextMenu } from '../ContextMenu';
 import { ViewBoxAnnotatableComponent } from '../DocComponent';
 import { PinDocView, PinProps } from '../PinFuncs';
 import { StyleProp } from '../StyleProp';
+import '../pdf/GPTPopup/GPTPopup.scss';
 import './ComparisonBox.scss';
 import { DocumentView } from './DocumentView';
 import { FieldView, FieldViewProps } from './FieldView';
 import { FormattedTextBox } from './formattedText/FormattedTextBox';
-import ReactLoading from 'react-loading';
-import { ContextMenu } from '../ContextMenu';
-import { ContextMenuProps } from '../ContextMenuItem';
-import { tickStep } from 'd3';
-import { CollectionCarouselView } from '../collections/CollectionCarouselView';
-import { FollowLinkScript } from '../../documents/DocUtils';
-import { schema } from '../nodes/formattedText/schema_rts';
-import { Id } from '../../../fields/FieldSymbols';
-import axios from 'axios';
-import ReactMarkdown from 'react-markdown';
-import { WebField, nullAudio } from '../../../fields/URLField';
 
 const API_URL = 'https://api.unsplash.com/search/photos';
 
@@ -44,7 +37,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     public static LayoutString(fieldKey: string) {
         return FieldView.LayoutString(ComparisonBox, fieldKey);
     }
+    private SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    private _closeRef = React.createRef<HTMLDivElement>();
     private _disposers: (DragManager.DragDropDisposer | undefined)[] = [undefined, undefined];
+    private _reactDisposer: IReactionDisposer | undefined;
     constructor(props: FieldViewProps) {
         super(props);
         makeObservable(this);
@@ -55,38 +51,19 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @observable private _outputValue = '';
     @observable private _loading = false;
     @observable private _isEmpty = false;
-    @observable private _audio: Doc = Docs.Create.TextDocument('');
-    @observable childActive = false;
-    @observable _yRelativeToTop: boolean = true;
-    @observable _animating = '';
-    @observable mathJaxConfig = {
-        loader: { load: ['input/asciimath'] },
-    };
+    @observable private _childActive = false;
+    @observable private _animating = '';
     @observable private _listening = false;
-    @observable transcriptElement = '';
-    @observable private frontSide = false;
-    SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    @observable private _frontSide = false;
     @observable recognition = new this.SpeechRecognition();
-    _closeRef = React.createRef<HTMLDivElement>();
 
-    get revealOp() {
-        return this.layoutDoc[`_${this._props.fieldKey}_revealOp`];
-    }
-    get clipHeightKey() {
-        return '_' + this._props.fieldKey + '_clipHeight';
-    }
-
-    get clipWidthKey() {
-        return '_' + this._props.fieldKey + '_clipWidth';
-    }
-
-    @computed get clipWidth() {
-        return NumCast(this.layoutDoc[this.clipWidthKey], 50);
-    }
-
-    @computed get clipHeight() {
-        return NumCast(this.layoutDoc[this.clipHeightKey], 200);
-    }
+    @computed get revealOpKey()   { return `_${this._props.fieldKey}_revealOp`; } // prettier-ignore
+    @computed get clipHeightKey() { return `_${this._props.fieldKey}_clipHeight`; } // prettier-ignore
+    @computed get clipWidthKey()  { return `_${this._props.fieldKey}_clipWidth`;  } // prettier-ignore
+    @computed get clipWidth()     { return NumCast(this.layoutDoc[this.clipWidthKey], 50); } // prettier-ignore
+    @computed get clipHeight()    { return NumCast(this.layoutDoc[this.clipHeightKey], 200);  } // prettier-ignore
+    @computed get revealOp()      { return StrCast(this.layoutDoc[this.revealOpKey]); } // prettier-ignore
+    set revealOp(value:string)    { this.layoutDoc[this.revealOpKey] = value; } // prettier-ignore
 
     @computed get overlayAlternateIcon() {
         return (
@@ -101,8 +78,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         })
                     }
                     style={{
-                        background: this.revealOp === 'hover' ? 'gray' : this.frontSide ? 'white' : 'black',
-                        color: this.revealOp === 'hover' ? 'black' : this.frontSide ? 'black' : 'white',
+                        background: this.revealOp === 'hover' ? 'gray' : this._frontSide ? 'white' : 'black',
+                        color: this.revealOp === 'hover' ? 'black' : this._frontSide ? 'black' : 'white',
                         display: 'inline-block',
                     }}>
                     <div key="alternate" className="formattedTextBox-flip">
@@ -117,27 +94,27 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return (
             <div>
                 <Tooltip
-                    title={this.frontSide ? <div className="dash-tooltip">Flip to front side to use GPT</div> : <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div>}>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={e => (!this.frontSide ? this.findImageTags() : null)}>
+                    title={this._frontSide ? <div className="dash-tooltip">Flip to front side to use GPT</div> : <div className="dash-tooltip">Ask GPT to create an answer on the back side of the flashcard based on your question on the front</div>}>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={() => (!this._frontSide ? this.findImageTags() : null)}>
                         <FontAwesomeIcon icon="lightbulb" size="xl" />
                     </div>
                 </Tooltip>
                 {DocCast(this.Document.embedContainer)?.type_collection === CollectionViewType.Carousel ? null : (
                     <div>
                         <Tooltip title={<div>Create a flashcard pile</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '74px', cursor: 'pointer' }} onPointerDown={e => this.createFlashcardPile([this.Document], false)}>
+                            <div style={{ position: 'absolute', bottom: '3px', right: '74px', cursor: 'pointer' }} onPointerDown={() => this.createFlashcardPile([this.Document], false)}>
                                 <FontAwesomeIcon icon="folder-plus" size="xl" />
                             </div>
                         </Tooltip>
                         <Tooltip title={<div className="dash-tooltip">Create new flashcard stack based on text</div>}>
-                            <div style={{ position: 'absolute', bottom: '3px', right: '104px', cursor: 'pointer' }} onClick={e => this.gptFlashcardPile()}>
+                            <div style={{ position: 'absolute', bottom: '3px', right: '104px', cursor: 'pointer' }} onClick={() => this.gptFlashcardPile()}>
                                 <FontAwesomeIcon icon="layer-group" size="xl" />
                             </div>
                         </Tooltip>
                     </div>
                 )}
                 <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
-                    <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={e => this.handleHover()}>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={() => this.handleHover()}>
                         <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
                     </div>
                 </Tooltip>
@@ -147,40 +124,37 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     @action handleHover = () => {
         if (this.revealOp === 'hover') {
-            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'flip';
+            this.revealOp = 'flip';
             this.Document.forceActive = false;
         } else {
-            this.layoutDoc[`_${this._props.fieldKey}_revealOp`] = 'hover';
+            this.revealOp = 'hover';
             this.Document.forceActive = true;
         }
     };
 
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this._inputValue = e.target.value;
-        console.log(this._inputValue);
     };
 
     @action activateContent = () => {
-        this.childActive = true;
+        this._childActive = true;
     };
 
     @action handleRenderClick = () => {
-        this.frontSide = !this.frontSide;
+        this._frontSide = !this._frontSide;
     };
 
     @action handleRenderGPTClick = async () => {
         const phonTrans = DocCast(this.Document.audio) ? DocCast(this.Document.audio).phoneticTranscription : undefined;
         if (phonTrans) {
             this._inputValue = StrCast(phonTrans);
-            console.log('INPUT:' + this._inputValue);
             this.askGPTPhonemes(this._inputValue);
         } else if (this._inputValue) this.askGPT(GPTCallType.QUIZ);
-        this.frontSide = false;
+        this._frontSide = false;
         this._outputValue = '';
     };
 
-    @action
-    private onPointerMove = ({ movementX }: PointerEvent) => {
+    onPointerMove = ({ movementX }: PointerEvent) => {
         const width = movementX * this.ScreenToLocalBoxXf().Scale + (this.clipWidth / 100) * this._props.PanelWidth();
         if (width && width > 5 && width < this._props.PanelWidth()) {
             this.layoutDoc[this.clipWidthKey] = (width * 100) / this._props.PanelWidth();
@@ -190,12 +164,16 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     componentDidMount() {
         this._props.setContentViewBox?.(this);
-        reaction(
+        this._reactDisposer = reaction(
             () => this._props.isSelected(), // when this reaction should update
-            selected => !selected && (this.childActive = false) // what it should update to
+            selected => !selected && (this._childActive = false) // what it should update to
         );
     }
 
+    componentWillUnmount() {
+        this._reactDisposer?.();
+    }
+
     protected createDropTarget = (ele: HTMLDivElement | null, fieldKey: string, disposerId: number) => {
         this._disposers[disposerId]?.();
         if (ele) {
@@ -248,7 +226,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             this.dataDoc[which] = undefined;
             return true;
         }
-        console.log('FALSE');
         return false;
     };
 
@@ -278,7 +255,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     remDoc1 = (docs: Doc | Doc[]) => toList(docs).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_1'), true);
     remDoc2 = (docs: Doc | Doc[]) => toList(docs).reduce((res, doc) => res && this.remDoc(doc, this.fieldKey + '_2'), true);
 
-    private registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
+    registerSliding = (e: React.PointerEvent<HTMLDivElement>, targetWidth: number) => {
         if (e.button !== 2) {
             setupMoveUpEvents(
                 this,
@@ -287,7 +264,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 emptyFunction,
                 action((moveEv, doubleTap) => {
                     if (doubleTap) {
-                        this.childActive = true;
+                        this._childActive = true;
                         if (!this.dataDoc[this.fieldKey + '_1'] && !this.dataDoc[this.fieldKey]) this.dataDoc[this.fieldKey + '_1'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
                         if (!this.dataDoc[this.fieldKey + '_2'] && !this.dataDoc[this.fieldKey + '_alternate']) this.dataDoc[this.fieldKey + '_2'] = DocUtils.copyDragFactory(Doc.UserDoc().emptyNote as Doc);
                     }
@@ -295,7 +272,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 false,
                 undefined,
                 action(() => {
-                    if (this.childActive) return;
+                    if (this._childActive) return;
                     this._animating = 'all 200ms';
                     // on click, animate slider movement to the targetWidth
                     this.layoutDoc[this.clipWidthKey] = (targetWidth * 100) / this._props.PanelWidth();
@@ -315,8 +292,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * Set up speech to text tool.
      */
     setListening = () => {
-        const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
-        if (SpeechRecognition) {
+        if (this.SpeechRecognition) {
             this.recognition.continuous = true;
             this.recognition.interimResults = true;
             this.recognition.lang = 'en-US';
@@ -351,20 +327,20 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             case 'fr-FR': return 'French'; //prettier-ignore
             case 'it-IT': return 'Italian'; //prettier-ignore
             case 'zh-CH': return 'Mandarin Chinese'; //prettier-ignore
-            case 'ja': return 'Japanese'; //prettier-ignore
-            default: return 'Korean'; //prettier-ignore
+            case 'ja':    return 'Japanese'; //prettier-ignore
+            default:      return 'Korean'; //prettier-ignore
         }
     };
 
     openContextMenu = (x: number, y: number, evalu: boolean) => {
         ContextMenu.Instance.clearItems();
-        ContextMenu.Instance.addItem({ description: 'English', event: e => this.setLanguage('en-US', 0), icon: 'question' }); //prettier-ignore
-        ContextMenu.Instance.addItem({ description: 'Spanish', event: e => this.setLanguage('es-ES', 1 ), icon: 'question'}); //prettier-ignore
-        ContextMenu.Instance.addItem({ description: 'French', event: e => this.setLanguage('fr-FR', 2), icon: 'question' }); //prettier-ignore
-        ContextMenu.Instance.addItem({ description: 'Italian', event: e => this.setLanguage('it-IT', 3), icon: 'question' }); //prettier-ignore
-        if (!evalu) ContextMenu.Instance.addItem({ description: 'Mandarin Chinese', event: e => this.setLanguage('zh-CH', 4), icon: 'question' }); //prettier-ignore
-        ContextMenu.Instance.addItem({ description: 'Japanese', event: e => this.setLanguage('ja', 5), icon: 'question' }); //prettier-ignore
-        ContextMenu.Instance.addItem({ description: 'Korean', event: e => this.setLanguage('ko', 6), icon: 'question' }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'English', event: () => this.setLanguage('en-US', 0), icon: 'question' }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Spanish', event: () => this.setLanguage('es-ES', 1 ), icon: 'question'}); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'French', event: () => this.setLanguage('fr-FR', 2), icon: 'question' }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Italian', event: () => this.setLanguage('it-IT', 3), icon: 'question' }); //prettier-ignore
+        if (!evalu) ContextMenu.Instance.addItem({ description: 'Mandarin Chinese', event: () => this.setLanguage('zh-CH', 4), icon: 'question' }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Japanese', event: () => this.setLanguage('ja', 5), icon: 'question' }); //prettier-ignore
+        ContextMenu.Instance.addItem({ description: 'Korean', event: () => this.setLanguage('ko', 6), icon: 'question' }); //prettier-ignore
         ContextMenu.Instance.displayMenu(x, y);
     };
 
@@ -430,7 +406,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         newCol['x'] = this.layoutDoc['x'];
         newCol['y'] = NumCast(this.layoutDoc['y']) + 50;
         newCol.type_collection = 'carousel';
-        for (var i = 0; i < collectionArr.length; i++) {
+        for (let i = 0; i < collectionArr.length; i++) {
             DocCast(collectionArr[i])[DocData].embedContainer = newCol;
         }
 
@@ -448,10 +424,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * Transfers the content of flashcards into a flashcard pile.
      */
     gptFlashcardPile = async () => {
-        var text = await this.askGPT(GPTCallType.STACK);
-        var senArr = text?.split('Question: ');
-        var collectionArr: Doc[] = [];
-        for (let i = 1; i < senArr?.length!; i++) {
+        const text = await this.askGPT(GPTCallType.STACK);
+        const senArr = text?.split('Question: ') ?? [];
+        const collectionArr: Doc[] = [];
+        for (let i = 1; i < senArr.length; i++) {
             const newDoc = Docs.Create.ComparisonDocument(senArr![i], { _layout_isFlashcard: true, _width: 300, _height: 300 });
 
             if (StrCast(senArr![i]).includes('Keyword: ')) {
@@ -493,11 +469,10 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
      * Calls GPT for each flashcard type.
      */
     askGPT = async (callType: GPTCallType): Promise<string | undefined> => {
-        let questionText = 'Question: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
+        const questionText = 'Question: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text);
         const rubricText = ' Rubric: ' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text);
         const queryText = questionText + ' UserAnswer: ' + this._inputValue + '. ' + rubricText;
         this._loading = true;
-        const doc = DocCast(this.dataDoc[this.props.fieldKey + '_0']);
 
         if (callType == GPTCallType.CHATCARD) {
             if (StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text) === '') {
@@ -517,7 +492,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
             } else if (callType == GPTCallType.QUIZ) {
                 console.log(this._inputValue);
-                this.frontSide = true;
+                this._frontSide = true;
                 this._outputValue = res.replace(/UserAnswer/g, "user's answer").replace(/Rubric/g, 'rubric');
             } else if (callType === GPTCallType.FLASHCARD) {
                 this._loading = false;
@@ -526,7 +501,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             this._loading = false;
             return res;
         } catch (err) {
-            console.error('GPT call failed');
+            console.error('GPT call failed', err);
         }
         this._loading = false;
     };
@@ -538,7 +513,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         if (c?.length === 0) await this.askGPT(GPTCallType.CHATCARD);
         if (c) {
             this._loading = true;
-            for (let i of c) {
+            for (const i of c) {
                 console.log(i);
                 if (i.className !== 'ProseMirror-separator') await this.getImageDesc(i.src);
             }
@@ -664,17 +639,17 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
             DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = response;
         } catch (error) {
-            console.log('Error');
+            console.log('Error', error);
         }
     };
 
     @action
     flipFlashcard = () => {
-        this.frontSide = !this.frontSide;
+        this._frontSide = !this._frontSide;
     };
 
     hoverFlip = (side: boolean) => {
-        if (this.revealOp === 'hover') this.frontSide = side;
+        if (this.revealOp === 'hover') this._frontSide = side;
     };
 
     testForTextFields = (whichSlot: string) => {
@@ -703,6 +678,8 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         return layoutTemplateString;
     };
 
+    childActiveFunc = () => this._childActive;
+
     render() {
         const clearButton = (which: string) => (
             <Tooltip title={<div className="dash-tooltip">remove</div>}>
@@ -723,10 +700,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             return targetDoc || layoutString ? (
                 <>
                     <DocumentView
-                        // eslint-disable-next-line react/jsx-props-no-spreading
                         {...this._props}
                         showTags={undefined}
-                        fitWidth={undefined}
+                        fitWidth={undefined} // set to returnTrue to make images fill the comparisonBox-- should be a user option
                         ignoreUsePath={layoutString ? true : undefined}
                         renderDepth={this.props.renderDepth + 1}
                         LayoutTemplateString={layoutString}
@@ -734,15 +710,15 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         containerViewPath={this._props.docViewPath}
                         moveDocument={whichSlot.endsWith('1') ? this.moveDoc1 : this.moveDoc2}
                         removeDocument={whichSlot.endsWith('1') ? this.remDoc1 : this.remDoc2}
-                        NativeWidth={this.layoutWidth}
-                        NativeHeight={this.layoutHeight}
-                        isContentActive={() => this.childActive}
+                        NativeWidth={returnZero}
+                        NativeHeight={returnZero}
+                        isContentActive={this.childActiveFunc}
                         isDocumentActive={returnFalse}
                         dontSelect={returnTrue}
                         whenChildContentsActiveChanged={this.whenChildContentsActiveChanged}
-                        styleProvider={this.childActive ? this._props.styleProvider : this.docStyleProvider}
+                        styleProvider={this._childActive ? this._props.styleProvider : this.docStyleProvider}
                         hideLinkButton
-                        pointerEvents={this.childActive ? undefined : returnNone}
+                        pointerEvents={this._childActive ? undefined : returnNone}
                     />
                     {!this.Document._layout_isFlashcard ? clearButton(whichSlot) : null}
                 </>
@@ -759,7 +735,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 style={{ width: this._props.PanelWidth() }}
                 onPointerDown={e => {
                     this.registerSliding(e, cover);
-                    this.activateContent();
+                    this.Document._layout_isFlashcard && this.activateContent();
                 }}
                 ref={ele => this.createDropTarget(ele, which, index)}>
                 {!this._isEmpty ? displayDoc(which) : null}
@@ -767,7 +743,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
         );
 
         if (this.Document._layout_isFlashcard) {
-            const side = this.frontSide ? 1 : 0;
+            const side = this._frontSide ? 1 : 0;
 
             // add text box to each side when comparison box is first created
             if (!this.dataDoc[this.fieldKey + '_0'] && !this._isEmpty) {
@@ -790,14 +766,14 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                         <p style={{ display: text === '' ? 'flex' : 'none', color: 'white', marginLeft: '10px' }}>Return to all flashcards and add text to both sides. </p>
                         <div className="input-box">
                             <textarea
-                                value={this.frontSide ? this._outputValue : this._inputValue}
+                                value={this._frontSide ? this._outputValue : this._inputValue}
                                 onChange={this.handleInputChange}
                                 onScroll={e => {
                                     e.stopPropagation();
                                     e.preventDefault();
                                 }}
                                 placeholder={!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? 'Enter a response for GPT to evaluate.' : ''}
-                                readOnly={this.frontSide}></textarea>
+                                readOnly={this._frontSide}></textarea>
 
                             {this._loading ? (
                                 <div className="loading-spinner" style={{ position: 'absolute' }}>
@@ -829,7 +805,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                                     Evaluate Pronunciation
                                 </button>
 
-                                {!this.frontSide ? (
+                                {!this._frontSide ? (
                                     <button className="submit-buttonsubmit" type="button" onClick={this.handleRenderGPTClick} style={{ borderRadius: '2px', marginBottom: '3px', width: '100%' }}>
                                         Submit
                                     </button>
@@ -848,13 +824,9 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             return (
                 <div
                     className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} /* change className to easily disable/enable pointer events in CSS */
-                    style={{ display: 'flex', flexDirection: 'column', overflow: 'hidden' }}
-                    onMouseEnter={() => {
-                        this.hoverFlip(false);
-                    }}
-                    onMouseLeave={() => {
-                        this.hoverFlip(true);
-                    }}>
+                    style={{ display: 'flex', flexDirection: 'column' }}
+                    onMouseEnter={() => this.hoverFlip(true)}
+                    onMouseLeave={() => this.hoverFlip(false)}>
                     {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
                     {this._loading ? (
                         <div className="loading-spinner" style={{ position: 'absolute' }}>