Update Download and TagMechanism Pages

-Fixed bug where the download will output wrong if there are no reactions in a mechanism -Updated buttons for Tag Mechanisms so you can add to a mechanism
NCAR · Apr 9, 2024 · a6f1bc5 · a6f1bc5
1 parent 59a88fd
commit a6f1bc5
Show file tree

Hide file tree

Showing 4 changed files with 92 additions and 29 deletions.
diff --git a/src/API/API_DeleteMethods.tsx b/src/API/API_DeleteMethods.tsx
@@ -56,13 +56,12 @@ export async function downloadOA(tag_mechanism_uuid?: string){
     if (!tag_mechanism_uuid) return "";
 
     try {
-        const response = await axios.get(`http://localhost:5134/api/OpenAtmos/JSON/${tag_mechanism_uuid}`,
-        {
+        const response = await axios.get(`http://localhost:5134/api/OpenAtmos/JSON/${tag_mechanism_uuid}`, {
+            responseType: 'text', 
             headers: {
                 'Content-Type': 'text/plain',
             },
-        }
-        );
+        });
         return response.data;
     } catch (error) {
         console.error(error);

diff --git a/src/API/API_GetMethods.tsx b/src/API/API_GetMethods.tsx
@@ -177,16 +177,13 @@ export async function getTagMechanisms(): Promise<TagMechanism[]> {
     }
 }
 
-export async function getTagMechanism(uuid?: string): Promise<TagMechanism[]> {
-    if (!uuid){
-        return [];
-    }
+export async function getTagMechanism(uuid?: string): Promise<TagMechanism> {
     try {
-        const response = await axios.get<TagMechanism[]>(`http://localhost:5134/api/TagMechanism/${uuid}`);
+        const response = await axios.get<TagMechanism>(`http://localhost:5134/api/TagMechanism/${uuid}`);
         return response.data;
     } catch (error) {
         console.error(error);
-        return [];
+        throw new Error('Failed to fetch TagMechanism');
     }
 }
 

diff --git a/src/webPages/familyMechanism.tsx b/src/webPages/familyMechanism.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useRef } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import ButtonSystemGrid from '../buttonSystem/ButtonSystemGrid';
 import { getMechanismsFromFamily, getTagMechanismsFromMechanism, getTagMechanism } from '../API/API_GetMethods';
 import { downloadOA } from '../API/API_DeleteMethods';
@@ -56,7 +56,7 @@ const FamilyMechanismPage = () => {
     const handleTagClose = () => setTagOpen(false);
     const handleSpeciesClick = () => navigate('/SpeciesPage');
     const handleReactionClick = () => navigate('/ReactionsPage');
-    const handleHistoryClick = () => navigate('/SpeciesPage');
+    const handleHistoryClick = () => console.log('History Not implemented');
 
     const handleDownlaodClick = async () => {
         const link = document.createElement("a");
@@ -79,14 +79,27 @@ const FamilyMechanismPage = () => {
     const { mechanismUuid, handleMechanismsClick } = useMechanismUuid();
     const { tagMechanismUuid, handleTagMechanismClick } = useTagMechanismUuid();
 
-    var listName = "Options for ";
-    if(tagMechanismUuid){
-        listName += getTagMechanism(tagMechanismUuid as string);
-    }
+    const [listName, setListName] = useState<string | null>(null);
+    useEffect(() => {
+        const fetchData = async () => {
+            let newName = "Options for ";
+            if(tagMechanismUuid){
+                try {
+                    const tagMechanism = await getTagMechanism(tagMechanismUuid as string);
+                    newName += tagMechanism.tag;
+                    setListName(newName);
+                } catch (error) {
+                    console.error(error);
+                    setListName(null);
+                }
+            }
+        };
+
+        fetchData();
+    }, [tagMechanismUuid]);
 
     const masterHandleTagMechanismClick = (uuid: string) => {
         handleTagMechanismClick(uuid);
-
         handleTagOpen();
     }  
 

diff --git a/src/webPages/mechanisms.tsx b/src/webPages/mechanisms.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { useNavigate } from 'react-router-dom';
 import ButtonSystemGrid from '../buttonSystem/ButtonSystemGrid';
+import { MechTagMechList } from '../API/API_Interfaces';
 import { getMechanisms, getTagMechanism, getTagMechanismsFromMechanism } from '../API/API_GetMethods';
 import { useMechanismUuid, useTagMechanismUuid} from '../buttonSystem/GlobalVariables';
 import { StyledHeader, StyledDetailBox } from '../buttonSystem/RenderButtonsStyling';
@@ -24,15 +25,16 @@ import IosShareSharpIcon from '@mui/icons-material/IosShareSharp';
 import TaskSharpIcon from '@mui/icons-material/TaskSharp';
 
 import "./mechanisms.css";
-import { createMechanism } from '../API/API_CreateMethods';
-import { useRef } from 'react';
+import { createMechTagMechList, createMechanism, createTagMechanism } from '../API/API_CreateMethods';
+import { useEffect, useRef, useState } from 'react';
 import { downloadOA } from '../API/API_DeleteMethods';
 
 
 const MechanismPage = () => {
     const navigate = useNavigate();
 
     const createMechanismRef = useRef("");
+    const createTagMechRef = useRef("");
 
     const [publishOpen, setPublishOpen] = React.useState(false);
     const [shareOpen, setShareOpen] = React.useState(false);
@@ -63,6 +65,29 @@ const MechanismPage = () => {
         setCreateMechanismOpen(false);
     }
 
+    const [createTagMechOpen, setCreateTagMechOpen] = React.useState(false);
+    const handleCreateTagMechOpen = () => setCreateTagMechOpen(true);
+    const handleCreateTagMechClose = () => setCreateTagMechOpen(false);
+
+    const handleCreateTagMechClick = async () => {
+        try {
+            const tag_mechanism_uuid = await createTagMechanism(createTagMechRef.current);
+
+            const mechTagMechList: MechTagMechList = {
+                uuid: '', 
+                tag_mechanism_uuid: tag_mechanism_uuid,
+                mechanism_uuid: mechanismUuid as string,
+                version: '1.0',
+                isDel: false, //Doesn't matter
+            };
+
+            await createMechTagMechList(mechTagMechList);
+            setCreateTagMechOpen(false);
+        } catch (error) {
+            console.error(error);
+        }
+    }
+
     const handleDownlaodClick = async () => {
         const link = document.createElement("a");
         const body = await downloadOA(tagMechanismUuid as string);
@@ -78,18 +103,30 @@ const MechanismPage = () => {
 
         window.URL.revokeObjectURL(blobUrl);
     };
-
-    var listName = "Options for ";
-    if(tagMechanismUuid){
-        listName += getTagMechanism(tagMechanismUuid as string);
-    }
 
-    const masterHandleTagMechanismClick = () => {
-        if(tagMechanismUuid){
-            handleTagMechanismClick(tagMechanismUuid);
-        }
+    const masterHandleTagMechanismClick = (uuid: string) => {
+        handleTagMechanismClick(uuid);
         handleTagOpen();
-    }  
+    } 
+
+    const [listName, setListName] = useState<string | null>(null);
+    useEffect(() => {
+        const fetchData = async () => {
+            let newName = "Options for ";
+            if(tagMechanismUuid){
+                try {
+                    const tagMechanism = await getTagMechanism(tagMechanismUuid as string);
+                    newName += tagMechanism.tag;
+                    setListName(newName);
+                } catch (error) {
+                    console.error(error);
+                    setListName(null);
+                }
+            }
+        };
+
+        fetchData();
+    }, [tagMechanismUuid]);
 
     const style = {
         position: 'absolute' as 'absolute',
@@ -118,6 +155,9 @@ const MechanismPage = () => {
                             <Button onClick = {handleCreateMechanismOpen}>
                                 Create Mechanism
                             </Button>
+                            <Button onClick = {handleCreateTagMechOpen}>
+                                Add Tag Mechanism to Mechanism
+                            </Button>
                         </ButtonGroup>
                         <ButtonGroup></ButtonGroup>
                     </Box>
@@ -184,6 +224,20 @@ const MechanismPage = () => {
                             </Button>
                         </Box>
                     </Modal>
+                    <Modal
+                        open={createTagMechOpen}
+                        onClose={handleCreateTagMechClose}
+                    >
+                        <Box sx={style}>
+                            Enter name for new Tag Mechanism below.
+                            <TextField id="textField" label="Tag" onChange={ e => createTagMechRef.current = e.target.value}>
+
+                            </TextField>
+                            <Button onClick={handleCreateTagMechClick}>
+                                Submit
+                            </Button>
+                        </Box>
+                    </Modal>
                     <Modal
                         open={tagOpen}
                         onClose={handleTagClose}