diff options
| author | eleanor-park <eleanor_park@brown.edu> | 2024-10-01 18:45:03 -0400 |
|---|---|---|
| committer | eleanor-park <eleanor_park@brown.edu> | 2024-10-01 18:45:03 -0400 |
| commit | 5d859cab5fa714860723fa252498c407d5909cdc (patch) | |
| tree | a8366cbcacdbb18fb24204e8b89187db49a26785 /src/client/views/nodes/DiagramBox.tsx | |
| parent | 06ab521c759e44a26be58fdf7ffc8d790e551236 (diff) | |
| parent | 39dc004c0f8e4bcc21ca0c2ecb0b665037f3d1ad (diff) | |
Merge branch 'eleanor-gptdraw' of https://github.com/brown-dash/Dash-Web into eleanor-gptdraw
Diffstat (limited to 'src/client/views/nodes/DiagramBox.tsx')
| -rw-r--r-- | src/client/views/nodes/DiagramBox.tsx | 19 |
1 files changed, 15 insertions, 4 deletions
diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx index 36deb2d8d..d6c9bb013 100644 --- a/src/client/views/nodes/DiagramBox.tsx +++ b/src/client/views/nodes/DiagramBox.tsx @@ -18,7 +18,9 @@ import { InkingStroke } from '../InkingStroke'; import './DiagramBox.scss'; import { FieldView, FieldViewProps } from './FieldView'; import { FormattedTextBox } from './formattedText/FormattedTextBox'; - +/** + * this is a class for the diagram box doc type that can be found in the tools section of the side bar + */ @observer export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { public static LayoutString(fieldKey: string) { @@ -59,14 +61,21 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { { fireImmediately: true } ); } + /** + * helper method for renderMermaidAsync + * @param str string containing the mermaid code + * @returns + */ renderMermaid = (str: string) => { try { return mermaid.render('graph' + Date.now(), str); - } catch (error) { + } catch { return { svg: '', bindFunctions: undefined }; } }; - + /** + * will update the div containing the mermaid diagram to render the new mermaidCode + */ renderMermaidAsync = async (mermaidCode: string, dashDiv: HTMLDivElement) => { try { const { svg, bindFunctions } = await this.renderMermaid(mermaidCode); @@ -97,7 +106,9 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() { res ); }, 'set mermaid code'); - + /** + * will generate mermaid code with GPT based on what the user requested + */ generateMermaidCode = action(() => { this._generating = true; const prompt = 'Write this in mermaid code and only give me the mermaid code: ' + this._inputValue; |
