From 91e465c9ba542b637e66c7091c444a44fdbe4f0c Mon Sep 17 00:00:00 2001
From: alyssaf16 <alyssa_feinberg@brown.edu>
Date: Thu, 13 Jun 2024 14:37:37 -0400
Subject: create flashcard stack and ui fixes

---
 src/client/views/nodes/ComparisonBox.tsx | 90 ++++++++++++++++++++++----------
 1 file changed, 61 insertions(+), 29 deletions(-)

(limited to 'src/client/views/nodes/ComparisonBox.tsx')

diff --git a/src/client/views/nodes/ComparisonBox.tsx b/src/client/views/nodes/ComparisonBox.tsx
index 9eb5f6ca2..2fc297bec 100644
--- a/src/client/views/nodes/ComparisonBox.tsx
+++ b/src/client/views/nodes/ComparisonBox.tsx
@@ -28,6 +28,7 @@ import ReactLoading from 'react-loading';
 import { ContextMenu } from '../ContextMenu';
 import { ContextMenuProps } from '../ContextMenuItem';
 import { tickStep } from 'd3';
+import { CollectionCarouselView } from '../collections/CollectionCarouselView';
 
 @observer
 export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
@@ -46,8 +47,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
     @observable private _isEmpty = false;
     @observable _yRelativeToTop: boolean = true;
 
-    public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined;
-
     @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         this._inputValue = e.target.value;
         console.log(this._inputValue);
@@ -248,6 +247,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
 
     _closeRef = React.createRef<HTMLDivElement>();
 
+    createFlashcardPile(collectionArr: Doc[], gpt: boolean) {
+        const newCol = Docs.Create.CarouselDocument(collectionArr, {
+            _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250) + 50,
+            _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200) + 50,
+            _layout_fitWidth: false,
+            _layout_autoHeight: true,
+        });
+        newCol['x'] = this.layoutDoc['x'];
+        newCol['y'] = NumCast(this.layoutDoc['y']) + 50;
+        newCol.type_collection = 'carousel';
+        console.log(newCol.data);
+
+        if (gpt) {
+            this._props.DocumentView?.()._props.addDocument?.(newCol);
+            this._props.removeDocument?.(this.Document);
+        } else {
+            this._props.addDocument?.(newCol);
+            this._props.removeDocument?.(this.Document);
+            this.Document.embedContainer = newCol;
+        }
+    }
+
+    gptFlashcardPile = async () => {
+        var text = (await this.askGPT(GPTCallType.FLASHCARD)) || '';
+
+        var senArr = text.trim().split('Question: ');
+        var collectionArr: Doc[] = [];
+        for (let i = 1; i < senArr.length; i++) {
+            const newDoc = Docs.Create.ComparisonDocument(senArr[i].trim(), { _layout_isFlashcard: true, _width: 300, _height: 300 });
+            newDoc.text = senArr[i].trim();
+            collectionArr.push(newDoc);
+        }
+        this.createFlashcardPile(collectionArr, true);
+    };
+
     /**
      * Flips a flashcard to the alternate side for the user to view.
      */
@@ -305,35 +339,27 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                             <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: '56px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
+                    <div style={{ position: 'absolute', bottom: '3px', right: '50px', cursor: 'pointer' }} onPointerDown={e => (!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
                         <FontAwesomeIcon icon="lightbulb" size="xl" />
                     </div>
                 </Tooltip>
-                <Tooltip title={<div>Create a flashcard pile</div>}>
-                    <div
-                        style={{ position: 'absolute', bottom: '3px', right: '80px', cursor: 'pointer' }}
-                        onPointerDown={e => {
-                            // this.displayLabelHandler(e.target.value, e.clientY);
-                            const collectionArr: Doc[] = [];
-                            collectionArr.push(this.Document);
-                            const newCol = Docs.Create.CarouselDocument(collectionArr, {
-                                _width: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 250) + 50,
-                                _height: NumCast(this.layoutDoc['_' + this._props.fieldKey + '_width'], 200) + 50,
-                                _layout_fitWidth: false,
-                                _layout_autoHeight: true,
-                            });
-                            newCol['x'] = this.layoutDoc['x'];
-                            newCol['y'] = NumCast(this.layoutDoc['y']) + 50;
-                            this._props.addDocument?.(newCol);
-                            this._props.removeDocument?.(this.Document);
-                            this.Document.embedContainer = newCol;
-                        }}>
-                        <FontAwesomeIcon icon="folder-plus" size="xl" />
+                {DocCast(this.Document.embedContainer).type_collection === '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)}>
+                                <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()}>
+                                <FontAwesomeIcon icon="layer-group" size="xl" />
+                            </div>
+                        </Tooltip>
                     </div>
-                </Tooltip>
+                )}
                 <Tooltip title={<div className="dash-tooltip">Hover to reveal</div>}>
                     <div style={{ position: 'absolute', bottom: '3px', right: '25px', cursor: 'pointer' }} onClick={e => this.handleHover()}>
-                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="layer-group" size="xl" />
+                        <FontAwesomeIcon color={this.revealOp === 'hover' ? 'blue' : 'black'} icon="hand-point-up" size="xl" />
                     </div>
                 </Tooltip>
                 {/* <Tooltip title={<div className="dash-tooltip">Remove this side of the flashcard</div>}>
@@ -425,6 +451,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
             if (callType == GPTCallType.QUIZ) this._outputValue = res;
             // DocCast(this.dataDoc[this.props.fieldKey + '_0'])[DocData].text = res;
             // this._outputValue = res;
+
+            if (callType === GPTCallType.FLASHCARD) {
+                // console.log(res);
+                this._loading = false;
+                return res;
+            }
             console.log(res);
         } catch (err) {
             console.error('GPT call failed');
@@ -520,7 +552,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 // DocCast(this.dataDoc[this.fieldKey + '_0'])[DocData].text = dataSplit[1];
                 // DocCast(this.dataDoc[this.fieldKey + '_0']).text = dataSplit[1];
                 // console.log('HI' + DocCast(this.dataDoc[this.fieldKey + '_0']).text);
-                console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text));
+                //console.log('HEREEE' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_0']).text)?.Text));
             }
 
             if (!this.dataDoc[this.fieldKey + '_1'] && !this._isEmpty) {
@@ -545,7 +577,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 return (
                     <div className={`comparisonBox${this._props.isContentActive() ? '-interactive' : ''}`} style={{ display: 'flex', flexDirection: 'column' }}>
                         <p style={{ color: 'white', padding: 10 }}>{text}</p>
-                        <p style={{ display: text === '' ? 'flex' : 'none', color: 'white', padding: 10 }}>Return to all flashcards and add text to both sides. </p>
+                        <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.layoutDoc[`_${this._props.fieldKey}_usePath`] === 'alternate' ? this._outputValue : this._inputValue}
@@ -574,7 +606,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                 );
             }
 
-            console.log('HEREEE2' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text));
+            //console.log('HEREEE2' + StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text));
             // render a normal flashcard when not a QuizCard
             return (
                 <div
@@ -589,7 +621,7 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent<FieldViewProps>()
                     }}
                     // onPointerUp={() => (this._isAnyChildContentActive = true)}
                 >
-                    {StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text) === '' && !this.childActive ? <p className="explain">Enter text in the flashcard. </p> : null}
+                    {!this.layoutDoc[`_${this._props.fieldKey}_usePath`] && StrCast(RTFCast(DocCast(this.dataDoc[this.fieldKey + '_1']).text)?.Text) === '' && !this.childActive ? <p className="explain">Enter text in the flashcard. </p> : null}
                     {displayBox(`${this.fieldKey}_${side === 0 ? 1 : 0}`, side, this._props.PanelWidth() - 3)}
                     {this._loading ? (
                         <div className="loading-spinner" style={{ position: 'absolute' }}>
-- 
cgit v1.2.3-70-g09d2

