From 1585ae672a6e01886fe029de87fe56992d04e0e0 Mon Sep 17 00:00:00 2001
From: Zachary Zhang <zacharyzhang7@gmail.com>
Date: Wed, 4 Sep 2024 23:05:38 -0400
Subject: code changes and comments

---
 src/client/views/nodes/DiagramBox.tsx | 145 ++++------------------------------
 1 file changed, 16 insertions(+), 129 deletions(-)

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

diff --git a/src/client/views/nodes/DiagramBox.tsx b/src/client/views/nodes/DiagramBox.tsx
index 79cf39152..0d755fdbe 100644
--- a/src/client/views/nodes/DiagramBox.tsx
+++ b/src/client/views/nodes/DiagramBox.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable prettier/prettier */
-/* eslint-disable jsx-a11y/control-has-associated-label */
 import mermaid from 'mermaid';
 import { action, computed, makeObservable, observable, reaction } from 'mobx';
 import { observer } from 'mobx-react';
@@ -20,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) {
@@ -37,23 +37,12 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
         super(props);
         makeObservable(this);
     }
-    @observable renderDiv: React.ReactNode;
-    @observable inputValue = '';
-    @observable createInputValue = '';
-    @observable loading = false;
-    @observable errorMessage = '';
-    @observable mermaidCode = '';
-    @observable isExampleMenuOpen = false;
+
     @observable _showCode = false;
     @observable _inputValue = '';
     @observable _generating = false;
     @observable _errorMessage = '';
 
-    @action handleInputChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        this.inputValue = e.target.value;
-        console.log(e.target.value);
-    };
-
     @computed get mermaidcode() {
         return Cast(this.Document[DocData].text, RichTextField, null)?.Text ?? '';
     }
@@ -74,14 +63,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);
@@ -112,7 +108,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;
@@ -212,117 +210,6 @@ export class DiagramBox extends ViewBoxAnnotatableComponent<FieldViewProps>() {
             </div>
         );
     }
-    exampleButton = () => {
-        if (this.isExampleMenuOpen) {
-            this.isExampleMenuOpen = false;
-        } else {
-            this.isExampleMenuOpen = true;
-        }
-    };
-    flowButton = () => {
-        this.createInputValue = `flowchart TD
-        A[Christmas] -->|Get money| B(Go shopping)
-        B --> C{Let me think}
-        C -->|One| D[Laptop]
-        C -->|Two| E[iPhone]
-        C -->|Three| F[fa:fa-car Car]`;
-    };
-    pieButton = () => {
-        this.createInputValue = `pie title Pets adopted by volunteers
-        "Dogs" : 386
-        "Cats" : 85
-        "Rats" : 15`;
-    };
-    timelineButton = () => {
-        this.createInputValue = `gantt
-        title A Gantt Diagram
-        dateFormat  YYYY-MM-DD
-        section Section
-        A task           :a1, 2014-01-01, 30d
-        Another task     :after a1  , 20d
-        section Another
-        Task in sec      :2014-01-12  , 12d
-        another task      : 24d`;
-    };
-    classButton = () => {
-        this.createInputValue = `classDiagram
-        Animal <|-- Duck
-        Animal <|-- Fish
-        Animal <|-- Zebra
-        Animal : +int age
-        Animal : +String gender
-        Animal: +isMammal()
-        Animal: +mate()
-        class Duck{
-            +String beakColor
-            +swim()
-            +quack()
-        }
-        class Fish{
-            -int sizeInFeet
-            -canEat()
-        }
-        class Zebra{
-            +bool is_wild
-            +run()
-        }`;
-    };
-    mindmapButton = () => {
-        this.createInputValue = `mindmap
-        root((mindmap))
-            Origins
-            Long history
-            ::icon(fa fa-book)
-            Popularisation
-                British popular psychology author Tony Buzan
-            Research
-            On effectivness<br/>and features
-            On Automatic creation
-                Uses
-                    Creative techniques
-                    Strategic planning
-                    Argument mapping
-            Tools
-            Pen and paper
-            Mermaid`;
-    };
-    handleInputChangeEditor = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-        if (typeof e.target.value === 'string') {
-            this.createInputValue = e.target.value;
-        }
-    };
-    removeWhitespace(str: string): string {
-        return str.replace(/\s+/g, '');
-    }
-    autoResize(element: HTMLTextAreaElement): void {
-        element.style.height = '5px';
-        element.style.height = element.scrollHeight + 'px';
-    }
-    timeline = `gantt
-    title College Timeline
-    dateFormat  YYYY-MM-DD
-    section Semester 1
-    Orientation           :done,    des1, 2023-08-01, 2023-08-03
-    Classes Start         :active,  des2, 2023-08-04, 2023-12-15
-    Midterm Exams         :         des3, 2023-10-15, 2023-10-20
-    End of Semester       :         des4, 2023-12-16, 2023-12-20
-    section Semester 2
-    Classes Start         :         des5, 2024-01-10, 2024-05-15
-    Spring Break          :         des6, 2024-03-15, 2024-03-22
-    Midterm Exams         :         des7, 2024-03-25, 2024-03-30
-    Final Exams           :         des8, 2024-05-10, 2024-05-15
-    section Summer Break
-    Internship            :         des9, 2024-06-01, 2024-08-31
-    section Semester 3
-    Classes Start         :         des10, 2024-09-01, 2025-12-15
-    Midterm Exams         :         des11, 2024-11-15, 2024-11-20
-    End of Semester       :         des12, 2025-12-16, 2025-12-20
-    section Semester 4
-    Classes Start         :         des13, 2025-01-10, 2025-05-15
-    Spring Break          :         des14, 2025-03-15, 2025-03-22
-    Midterm Exams         :         des15, 2025-03-25, 2025-03-30
-    Final Exams           :         des16, 2025-05-10, 2025-05-15
-    Graduation            :         des17, 2025-05-20, 2025-05-21`;
 }
 
 Docs.Prototypes.TemplateMap.set(DocumentType.DIAGRAM, {
-- 
cgit v1.2.3-70-g09d2

