From 91e465c9ba542b637e66c7091c444a44fdbe4f0c Mon Sep 17 00:00:00 2001 From: alyssaf16 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() { @@ -46,8 +47,6 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() @observable private _isEmpty = false; @observable _yRelativeToTop: boolean = true; - public addToCollection: ((doc: Doc | Doc[], annotationKey?: string | undefined) => boolean) | undefined; - @action handleInputChange = (e: React.ChangeEvent) => { this._inputValue = e.target.value; console.log(this._inputValue); @@ -248,6 +247,41 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() _closeRef = React.createRef(); + 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()
Ask GPT to create an answer on the back side of the flashcard based on your question on the front
) }> -
(!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}> +
(!this.layoutDoc[`_${this._props.fieldKey}_usePath`] ? this.askGPT(GPTCallType.CHATCARD) : null)}>
- Create a flashcard pile
}> -
{ - // 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; - }}> - + {DocCast(this.Document.embedContainer).type_collection === 'carousel' ? null : ( +
+ Create a flashcard pile
}> +
this.createFlashcardPile([this.Document], false)}> + +
+ + Create new flashcard stack based on text
}> +
this.gptFlashcardPile()}> + +
+ - + )} Hover to reveal}>
this.handleHover()}> - +
{/* Remove this side of the flashcard}> @@ -425,6 +451,12 @@ export class ComparisonBox extends ViewBoxAnnotatableComponent() 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() // 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() return (

{text}

-

Return to all flashcards and add text to both sides.

+

Return to all flashcards and add text to both sides.