From bdce5830e41a4375eeae199503c7d8b44db282ae Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 11:50:01 -0600 Subject: [PATCH 01/47] altered error throwing for getPropertyBySpeciesAndMechanism to be handled properly --- frontend/src/API/API_GetMethods.tsx | 4 +--- .../components/RenderSpeciesReactionTable.tsx | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/frontend/src/API/API_GetMethods.tsx b/frontend/src/API/API_GetMethods.tsx index e9830f85..21e222d9 100644 --- a/frontend/src/API/API_GetMethods.tsx +++ b/frontend/src/API/API_GetMethods.tsx @@ -292,9 +292,7 @@ export async function getPropertyBySpeciesAndMechanism( `Error fetching property by species ${species} and mechanism ${mechanism}: ${error.message}`, error, ); - throw new Error( - "Failed to fetch property by species and mechanism. Please try again later.", - ); + throw error; } } diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 7a8d6bed..416c3028 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -217,9 +217,9 @@ const RenderSpeciesReactionTable: React.FC = ({ flex: 1, renderCell: (params) => ( - {params.row.property.tolerance === 0 + {params.row.property?.tolerance === 0 ? "" - : (params.row.property.tolerance ?? "")} + : (params.row.property?.tolerance ?? "")} ), }, @@ -229,9 +229,9 @@ const RenderSpeciesReactionTable: React.FC = ({ flex: 1, renderCell: (params) => ( - {params.row.property.weight === 0 + {params.row.property?.weight === 0 ? "" - : (params.row.property.weight ?? "")} + : (params.row.property?.weight ?? "")} ), }, @@ -241,9 +241,9 @@ const RenderSpeciesReactionTable: React.FC = ({ flex: 1, renderCell: (params) => ( - {params.row.property.concentration === 0 + {params.row.property?.concentration === 0 ? "" - : (params.row.property.concentration ?? "")} + : (params.row.property?.concentration ?? "")} ), }, @@ -253,9 +253,9 @@ const RenderSpeciesReactionTable: React.FC = ({ flex: 1, renderCell: (params) => ( - {params.row.property.diffusion === 0 + {params.row.property?.diffusion === 0 ? "" - : (params.row.property.diffusion ?? "")} + : (params.row.property?.diffusion ?? "")} ), }, @@ -293,6 +293,7 @@ const RenderSpeciesReactionTable: React.FC = ({ selectedMechanismID!, ); } catch (error) { + // if no property found, create one if (isAxiosError(error) && error.response?.status === 404) { const propertyData: Property = { speciesId: speciesItem.id!, @@ -300,6 +301,7 @@ const RenderSpeciesReactionTable: React.FC = ({ }; const createdProperty = await createProperty(propertyData); fetchedProperty = createdProperty; + console.log("Missing Property handled successfully"); } else { //('Error fetching property:', error); } From c623afa1b38db1a0a72445d9d6127d05b1ec98d4 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 11:58:45 -0600 Subject: [PATCH 02/47] made delete buttons more obvious for species and reactions --- .../src/components/RenderSpeciesReactionTable.tsx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 416c3028..ebc59111 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -260,9 +260,9 @@ const RenderSpeciesReactionTable: React.FC = ({ ), }, { - field: "actions", + field: "delete", type: "actions", - headerName: "Actions", + headerName: "Delete", headerClassName: "roleDataHeader", flex: 1, cellClassName: "actions", @@ -272,7 +272,7 @@ const RenderSpeciesReactionTable: React.FC = ({ icon={} label="Delete" onClick={handleSpeciesDeleteClick(id)} - color="inherit" + style={{ color: "red" }} />, ]; }, @@ -342,9 +342,9 @@ const RenderSpeciesReactionTable: React.FC = ({ ), }, { - field: "actions", + field: "delete", type: "actions", - headerName: "Actions", + headerName: "Delete", headerClassName: "reactionDataHeader", flex: 1, cellClassName: "actions", @@ -354,7 +354,7 @@ const RenderSpeciesReactionTable: React.FC = ({ icon={} label="Delete" onClick={handleReactionDeleteClick(id)} - color="inherit" + style={{ color: "red" }} />, ]; }, From 53615ce6ec3d863c385a2245f9f388b17f2cbad3 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 12:03:43 -0600 Subject: [PATCH 03/47] removed part of datagrid suggesting it was possible to select multiple rows --- frontend/src/components/RenderSpeciesReactionTable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index ebc59111..e7da42e0 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -470,6 +470,7 @@ const RenderSpeciesReactionTable: React.FC = ({ columns={createSpeciesColumns()} getRowId={(row: Species) => row.id ?? 0} onRowClick={handleSpeciesCellClick} + hideFooterSelectedRowCount={true} autoPageSize pagination style={{ height: "100%" }} @@ -506,6 +507,7 @@ const RenderSpeciesReactionTable: React.FC = ({ } }} onRowClick={handleReactionCellClick} + hideFooterSelectedRowCount={true} autoPageSize pagination style={{ height: "100%" }} From b91d49c41f25eb5f5711791633e5abd434fec014 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 14:07:51 -0600 Subject: [PATCH 04/47] added code preventing the adding of a family with an empty name --- frontend/src/components/Modals.tsx | 58 +++++++++++++++++++++++------- 1 file changed, 45 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 04b3d830..1920643a 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -39,6 +39,7 @@ import { Typography, Select, MenuItem, + Alert, } from "@mui/material"; import { updateProperty, @@ -46,6 +47,9 @@ import { updateSpecies, } from "../API/API_UpdateMethods"; +import Snackbar from '@mui/material/Snackbar'; + + const style = { position: "absolute" as const, top: "50%", @@ -188,37 +192,65 @@ export const CreateFamilyModal: React.FC = ({ setCreatedFamilyBool, }) => { const createFamilyRef = useRef(""); + const [showCreateFamilyAlert, setShowCreateFamilyAlert] = useState(false); const handleCreateFamilyClick = async () => { - try { - const newFamily: Family = { - name: createFamilyRef.current, - description: "", - createdBy: "", - }; - await createFamily(newFamily); - createFamilyRef.current = ""; - onClose(); - setCreatedFamilyBool(true); - } catch (error) { - console.error(error); + // dont allow for a family with no name + if (createFamilyRef.current === ""){ + setShowCreateFamilyAlert(true); + } + else{ + + try { + const newFamily: Family = { + name: createFamilyRef.current, + description: "", + createdBy: "", + }; + await createFamily(newFamily); + createFamilyRef.current = ""; + onClose(); + setCreatedFamilyBool(true); + } catch (error) { + console.error(error); + } } }; + const handleAlertClose = () => { + setShowCreateFamilyAlert(false) + } + return ( +
Enter Name for Family below. (createFamilyRef.current = e.target.value)} fullWidth margin="normal" /> - + + + + + + + + Name must not be empty! + + +
); }; From 4f63192bfc6c01810fa14d47e1cb6e9b4bf1f26e Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 20:19:47 -0600 Subject: [PATCH 05/47] update family name working, but not visible until refresh --- frontend/src/components/Modals.tsx | 81 ++++++++++++++++++++ frontend/src/components/RenderFamilyTree.tsx | 28 ++++++- frontend/src/pages/family.tsx | 4 + 3 files changed, 112 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 1920643a..40304c24 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -42,6 +42,7 @@ import { Alert, } from "@mui/material"; import { + updateFamily, updateProperty, updateReaction, updateSpecies, @@ -83,6 +84,12 @@ interface CreateFamilyModalProps { setCreatedFamilyBool: React.Dispatch>; } +interface UpdateFamilyModalProps { + open: boolean; + onClose: () => void; + selectedFamily: Family | null; +} + interface CreateMechanismModalProps { open: boolean; onClose: () => void; @@ -254,6 +261,80 @@ export const CreateFamilyModal: React.FC = ({ ); }; +export const UpdateFamilyModal: React.FC = ({ + open, + onClose, + selectedFamily, +}) => { + console.log(selectedFamily?.name); + const [familyName, setFamilyName] = useState(selectedFamily?.name || "") + const [showUpdateFamilyAlert, setShowUpdateFamilyAlert] = useState(false); + + useEffect(() => { + setFamilyName(selectedFamily?.name || ""); // Update familyName when selectedFamily changes + }, [selectedFamily]); + + + const handleUpdateFamilyClick = async () => { + // dont allow for a family with no name + if (familyName === ""){ + setShowUpdateFamilyAlert(true); + } + else{ + + try { + const newFamily: Family = { + id: selectedFamily?.id!, + name: familyName!, + description: selectedFamily?.description!, + createdBy: selectedFamily?.createdBy!, + }; + await updateFamily(newFamily); + onClose(); + } catch (error) { + console.error(error); + } + } + }; + + const handleAlertClose = () => { + setShowUpdateFamilyAlert(false) + } + + return ( +
+ + + Enter Name for Family below. + (setFamilyName(e.target.value))} + fullWidth + margin="normal" + /> + + + + + + + + + + Name must not be empty! + + +
+ ); +}; + export const CreateMechanismModal: React.FC = ({ open, onClose, diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index 35354be6..57b52efc 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -14,12 +14,13 @@ import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView"; import { TreeItem } from "@mui/x-tree-view/TreeItem"; import IconButton from "@mui/material/IconButton"; -import { Add, GetApp, Delete } from "@mui/icons-material"; +import { Add, GetApp, Delete, Edit } from "@mui/icons-material"; import CircularProgress from "@mui/material/CircularProgress"; import Popover from "@mui/material/Popover"; import Button from "@mui/material/Button"; +import { UpdateFamilyModal } from "./Modals"; const treeItemStyle = { fontSize: "1.2rem", @@ -54,11 +55,13 @@ const treeViewContainerStyle = { }; interface RenderFamilyTreeProps { + setSelectedFamily: React.Dispatch>; setSelectedFamilyId: React.Dispatch>; setSelectedMechanismId: React.Dispatch>; setSelectedMechanismName: React.Dispatch>; handleCreateFamilyOpen: () => void; handleCreateMechanismOpen: () => void; + selectedFamily: Family | null; selectedFamilyId: string | null; createdFamilyBool: boolean; setCreatedFamilyBool: React.Dispatch>; @@ -67,6 +70,8 @@ interface RenderFamilyTreeProps { } const RenderFamilyTree: React.FC = ({ + selectedFamily, + setSelectedFamily, setSelectedFamilyId, setSelectedMechanismId, setSelectedMechanismName, @@ -87,6 +92,9 @@ const RenderFamilyTree: React.FC = ({ const [loading, setLoading] = useState(true); const [deleteBool, setDeleteBool] = useState(false); + const [updatefamilyOpen, setUpdateFamilyOpen] = useState(false); + const handleUpdateFamilyOpen = () => setUpdateFamilyOpen(true); + const handleUpdateFamilyClose = () => setUpdateFamilyOpen(false); const ref = useRef(null); @@ -228,6 +236,18 @@ const RenderFamilyTree: React.FC = ({ width: 80, }} > + { + + setSelectedFamily(family); + handleUpdateFamilyOpen(); + console.log(selectedFamily); + }} + aria-label="delete" + edge="start" + > + + { handleFamilyDelete(family.id!); @@ -360,6 +380,12 @@ const RenderFamilyTree: React.FC = ({ )} + + ); }; diff --git a/frontend/src/pages/family.tsx b/frontend/src/pages/family.tsx index e2248b13..14ebbd4e 100644 --- a/frontend/src/pages/family.tsx +++ b/frontend/src/pages/family.tsx @@ -9,8 +9,10 @@ import { StyledDetailBox } from "./familyStyling"; import { Header, Footer } from "../components/HeaderFooter"; import "../styles/family.css"; +import { Family } from "../API/API_Interfaces"; const FamilyPage = () => { + const [selectedFamily, setSelectedFamily] = useState(null); const [selectedFamilyId, setSelectedFamilyId] = useState(null); const [selectedMechanismId, setSelectedMechanismId] = useState( null, @@ -39,6 +41,8 @@ const FamilyPage = () => {
Date: Wed, 27 Nov 2024 20:28:45 -0600 Subject: [PATCH 06/47] family name change now visible without reload --- frontend/src/components/Modals.tsx | 3 +++ frontend/src/components/RenderFamilyTree.tsx | 9 +++++++++ 2 files changed, 12 insertions(+) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 40304c24..271f1e13 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -88,6 +88,7 @@ interface UpdateFamilyModalProps { open: boolean; onClose: () => void; selectedFamily: Family | null; + onFamilyUpdated: (updatedFamily: Family) => void; } interface CreateMechanismModalProps { @@ -265,6 +266,7 @@ export const UpdateFamilyModal: React.FC = ({ open, onClose, selectedFamily, + onFamilyUpdated }) => { console.log(selectedFamily?.name); const [familyName, setFamilyName] = useState(selectedFamily?.name || "") @@ -290,6 +292,7 @@ export const UpdateFamilyModal: React.FC = ({ createdBy: selectedFamily?.createdBy!, }; await updateFamily(newFamily); + onFamilyUpdated(newFamily); onClose(); } catch (error) { console.error(error); diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index 57b52efc..23aa154a 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -195,6 +195,14 @@ const RenderFamilyTree: React.FC = ({ setDeleteBool(true); }; + const handleFamilyUpdated = (updatedFamily: Family) => { + setFamilies((prevFamilies) => + prevFamilies.map((family) => + family.id === updatedFamily.id ? updatedFamily : family + ) + ); + }; + return (
{loading ? ( @@ -385,6 +393,7 @@ const RenderFamilyTree: React.FC = ({ open={updatefamilyOpen} onClose={handleUpdateFamilyClose} selectedFamily={selectedFamily} + onFamilyUpdated={handleFamilyUpdated} />
); From e418012c95c4e175b154fb2b8678ab1c5588f226 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Wed, 27 Nov 2024 21:25:22 -0600 Subject: [PATCH 07/47] editing mechanism name functionality added --- frontend/src/components/Modals.tsx | 87 +++++++++++++++++++- frontend/src/components/RenderFamilyTree.tsx | 58 ++++++++++++- frontend/src/pages/family.tsx | 5 +- 3 files changed, 145 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 271f1e13..4a616206 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -43,6 +43,7 @@ import { } from "@mui/material"; import { updateFamily, + updateMechanism, updateProperty, updateReaction, updateSpecies, @@ -98,6 +99,13 @@ interface CreateMechanismModalProps { setCreatedMechanismBool: React.Dispatch>; } +interface UpdateMechanismModalProps { + open: boolean; + onClose: () => void; + selectedMechanism: Mechanism | null; + onMechanismUpdated: (updatedMechanism: Mechanism) => void; +} + interface CreateSpeciesModalProps { open: boolean; onClose: () => void; @@ -268,13 +276,12 @@ export const UpdateFamilyModal: React.FC = ({ selectedFamily, onFamilyUpdated }) => { - console.log(selectedFamily?.name); const [familyName, setFamilyName] = useState(selectedFamily?.name || "") const [showUpdateFamilyAlert, setShowUpdateFamilyAlert] = useState(false); useEffect(() => { setFamilyName(selectedFamily?.name || ""); // Update familyName when selectedFamily changes - }, [selectedFamily]); + }, [selectedFamily, open]); const handleUpdateFamilyClick = async () => { @@ -498,6 +505,82 @@ export const CreateMechanismModal: React.FC = ({ ); }; +export const UpdateMechanismModal: React.FC = ({ + open, + onClose, + selectedMechanism, + onMechanismUpdated +}) => { + const [mechanismName, setMechansimName] = useState(selectedMechanism?.name || "") + const [showUpdateMechanismAlert, setShowUpdateMechanismAlert] = useState(false); + + useEffect(() => { + setMechansimName(selectedMechanism?.name || ""); // Update familyName when selectedFamily changes + }, [selectedMechanism, open]); + + + const handleUpdateMechanismClick = async () => { + // dont allow for a family with no name + if (mechanismName === ""){ + setShowUpdateMechanismAlert(true); + } + else{ + + try { + const newMechanism: Mechanism = { + id: selectedMechanism?.id!, + family_id: selectedMechanism?.family_id!, + name: mechanismName!, + description: selectedMechanism?.description!, + created_by: selectedMechanism?.created_by!, + }; + await updateMechanism(newMechanism); + onMechanismUpdated(newMechanism); + onClose(); + } catch (error) { + console.error(error); + } + } + }; + + const handleAlertClose = () => { + setShowUpdateMechanismAlert(false) + } + + return ( +
+ + + Enter Name for Mechanism below. + (setMechansimName(e.target.value))} + fullWidth + margin="normal" + /> + + + + + + + + + + Name must not be empty! + + +
+ ); +}; + export const CreateSpeciesModal: React.FC = ({ open, onClose, diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index 23aa154a..f2513785 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -14,13 +14,13 @@ import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView"; import { TreeItem } from "@mui/x-tree-view/TreeItem"; import IconButton from "@mui/material/IconButton"; -import { Add, GetApp, Delete, Edit } from "@mui/icons-material"; +import { Add, GetApp, Delete, Edit, UpdateDisabled } from "@mui/icons-material"; import CircularProgress from "@mui/material/CircularProgress"; import Popover from "@mui/material/Popover"; import Button from "@mui/material/Button"; -import { UpdateFamilyModal } from "./Modals"; +import { UpdateFamilyModal, UpdateMechanismModal } from "./Modals"; const treeItemStyle = { fontSize: "1.2rem", @@ -56,12 +56,14 @@ const treeViewContainerStyle = { interface RenderFamilyTreeProps { setSelectedFamily: React.Dispatch>; + setSelectedMechanism: React.Dispatch>; setSelectedFamilyId: React.Dispatch>; setSelectedMechanismId: React.Dispatch>; setSelectedMechanismName: React.Dispatch>; handleCreateFamilyOpen: () => void; handleCreateMechanismOpen: () => void; selectedFamily: Family | null; + selectedMechanism: Mechanism | null; selectedFamilyId: string | null; createdFamilyBool: boolean; setCreatedFamilyBool: React.Dispatch>; @@ -70,6 +72,8 @@ interface RenderFamilyTreeProps { } const RenderFamilyTree: React.FC = ({ + selectedMechanism, + setSelectedMechanism, selectedFamily, setSelectedFamily, setSelectedFamilyId, @@ -92,7 +96,11 @@ const RenderFamilyTree: React.FC = ({ const [loading, setLoading] = useState(true); const [deleteBool, setDeleteBool] = useState(false); + // TODO: FIX THE CAPIALIZATION OF FAMILY HERE const [updatefamilyOpen, setUpdateFamilyOpen] = useState(false); + const [updateMechanismOpen, setUpdateMechanismOpen] = useState(false); + const handleUpdateMechanismOpen = () => setUpdateMechanismOpen(true); + const handleUpdateMechanismClose = () => setUpdateMechanismOpen(false); const handleUpdateFamilyOpen = () => setUpdateFamilyOpen(true); const handleUpdateFamilyClose = () => setUpdateFamilyOpen(false); @@ -203,6 +211,34 @@ const RenderFamilyTree: React.FC = ({ ); }; + const handleMechanismUpdated = (updatedMechanism: Mechanism) => { + setMechanismsMap((prevMechanismsMap) => { + const updatedMap = { ...prevMechanismsMap }; + + // find family with updated mechanism + for (const familyId in updatedMap) { + const mechanisms = updatedMap[familyId]; + const mechanismIndex = mechanisms.findIndex( + (mech) => mech.id === updatedMechanism.id + ); + + if (mechanismIndex !== -1) { + // update mechanism + const updatedMechanisms = [...mechanisms]; + updatedMechanisms[mechanismIndex] = updatedMechanism; + + updatedMap[familyId] = updatedMechanisms; + break; + } + } + + return updatedMap; + }); + }; + + + + return (
{loading ? ( @@ -312,6 +348,18 @@ const RenderFamilyTree: React.FC = ({ width: 80, }} > + { + + setSelectedMechanism(mechanism); + handleUpdateMechanismOpen(); + console.log(selectedMechanism); + }} + aria-label="delete" + edge="start"> + + + { handlePopOverClick(event, mechanism.id!); @@ -395,6 +443,12 @@ const RenderFamilyTree: React.FC = ({ selectedFamily={selectedFamily} onFamilyUpdated={handleFamilyUpdated} /> +
); }; diff --git a/frontend/src/pages/family.tsx b/frontend/src/pages/family.tsx index 14ebbd4e..b3fbf27e 100644 --- a/frontend/src/pages/family.tsx +++ b/frontend/src/pages/family.tsx @@ -9,9 +9,10 @@ import { StyledDetailBox } from "./familyStyling"; import { Header, Footer } from "../components/HeaderFooter"; import "../styles/family.css"; -import { Family } from "../API/API_Interfaces"; +import { Family, Mechanism } from "../API/API_Interfaces"; const FamilyPage = () => { + const [selectedMechanism, setSelectedMechanism] = useState(null); const [selectedFamily, setSelectedFamily] = useState(null); const [selectedFamilyId, setSelectedFamilyId] = useState(null); const [selectedMechanismId, setSelectedMechanismId] = useState( @@ -41,6 +42,8 @@ const FamilyPage = () => {
Date: Fri, 29 Nov 2024 12:04:13 -0600 Subject: [PATCH 08/47] deletion confirmation for mechanisms added' --- frontend/src/components/RenderFamilyTree.tsx | 50 ++++++++++++++++++-- 1 file changed, 45 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index f2513785..adac413b 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -21,6 +21,8 @@ import CircularProgress from "@mui/material/CircularProgress"; import Popover from "@mui/material/Popover"; import Button from "@mui/material/Button"; import { UpdateFamilyModal, UpdateMechanismModal } from "./Modals"; +import Dialog from "@mui/material/Dialog"; +import { DialogActions, DialogTitle } from "@mui/material"; const treeItemStyle = { fontSize: "1.2rem", @@ -104,6 +106,14 @@ const RenderFamilyTree: React.FC = ({ const handleUpdateFamilyOpen = () => setUpdateFamilyOpen(true); const handleUpdateFamilyClose = () => setUpdateFamilyOpen(false); + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const handleDeleteDialogOpen = () => setDeleteDialogOpen(true); + const handleDeleteDialogClose = () => setDeleteDialogOpen(false); + + + const [currentMechanismId, setCurrentMechanismId] = React.useState(null); + + const ref = useRef(null); /* Popover for Downloads */ @@ -193,14 +203,30 @@ const RenderFamilyTree: React.FC = ({ }); }; + // made to allow code reuse for deletion confirmation + const handleActionWithDialog = async ( + action: (id: string) => Promise, + id: string, + setBool?: React.Dispatch> + ) => { + await action(id); + if (setBool) { + setBool(true); + } + }; + + const handleFamilyDelete = async (familyId: string) => { await deleteFamily(familyId); setDeleteBool(true); }; - const handleMechanismDelete = async (mechanismId: string) => { - await deleteMechanism(mechanismId); - setDeleteBool(true); + const handleMechanismDelete = (mechanismId: string) => { + setCurrentMechanismId(mechanismId); + setDeleteDialogOpen(true); + + //await deleteMechanism(mechanismId); + //setDeleteBool(true); }; const handleFamilyUpdated = (updatedFamily: Family) => { @@ -287,7 +313,7 @@ const RenderFamilyTree: React.FC = ({ handleUpdateFamilyOpen(); console.log(selectedFamily); }} - aria-label="delete" + aria-label="edit" edge="start" > @@ -355,7 +381,7 @@ const RenderFamilyTree: React.FC = ({ handleUpdateMechanismOpen(); console.log(selectedMechanism); }} - aria-label="delete" + aria-label="edit" edge="start"> @@ -449,6 +475,20 @@ const RenderFamilyTree: React.FC = ({ selectedMechanism={selectedMechanism} onMechanismUpdated={handleMechanismUpdated} /> + + + {`Are you sure you want to delete this?`} + + + + + + +
); }; From f0f5e96da64d96e7cf944f067c71102ebbdfaee8 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Fri, 29 Nov 2024 15:41:08 -0600 Subject: [PATCH 09/47] family deletion now has confirmation --- frontend/src/components/RenderFamilyTree.tsx | 35 +++++++++++++++----- 1 file changed, 26 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index adac413b..068adada 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -110,8 +110,10 @@ const RenderFamilyTree: React.FC = ({ const handleDeleteDialogOpen = () => setDeleteDialogOpen(true); const handleDeleteDialogClose = () => setDeleteDialogOpen(false); + const [deleteType, setDeleteType] = useState(''); - const [currentMechanismId, setCurrentMechanismId] = React.useState(null); + // contains id of item that will be deleted by delete dialog + const [itemForDeletionID, setItemForDeletionID] = React.useState(null); const ref = useRef(null); @@ -204,29 +206,34 @@ const RenderFamilyTree: React.FC = ({ }; // made to allow code reuse for deletion confirmation + // attempts to close the dialog wit the onClose function const handleActionWithDialog = async ( action: (id: string) => Promise, id: string, + onClose: () => void, setBool?: React.Dispatch> + ) => { await action(id); if (setBool) { setBool(true); } + + onClose(); }; const handleFamilyDelete = async (familyId: string) => { - await deleteFamily(familyId); - setDeleteBool(true); + setDeleteType("Family"); + setItemForDeletionID(familyId); + setDeleteDialogOpen(true); }; const handleMechanismDelete = (mechanismId: string) => { - setCurrentMechanismId(mechanismId); + setDeleteType("Mechanism"); + setItemForDeletionID(mechanismId); setDeleteDialogOpen(true); - //await deleteMechanism(mechanismId); - //setDeleteBool(true); }; const handleFamilyUpdated = (updatedFamily: Family) => { @@ -484,9 +491,19 @@ const RenderFamilyTree: React.FC = ({ - + + {/* what we are deleting changes based on deleteType */} + {(deleteType === "Mechanism") && + + } + + {(deleteType === "Family") && + + }
From 54f75d1298a654f4f22c8c20ef38ccc65d63bdaa Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sat, 30 Nov 2024 16:56:08 -0600 Subject: [PATCH 10/47] trying to get deletion confirmation for species and reactions; commiting to save progress --- frontend/src/components/Modals.tsx | 44 +++++++++ frontend/src/components/RenderFamilyTree.tsx | 72 ++++++++------ .../components/RenderSpeciesReactionTable.tsx | 98 +++++++++++++------ frontend/src/pages/family.tsx | 28 ++++++ 4 files changed, 182 insertions(+), 60 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 4a616206..ff326d7a 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -163,6 +163,50 @@ interface CreateProductModalProps { setReactionUpdated: React.Dispatch>; } +interface HandleActionWithDialogOptions { + deleteType: string; + action: (id: T) => Promise; + id: T; + onClose: () => void; + setSpeciesRowData?: React.Dispatch>; + speciesRowData?: Species[]; + setReactionsRowData?: React.Dispatch>; + reactionsRowData?: Reaction[]; + setBool?: React.Dispatch>; +} + +export const handleActionWithDialog = async ( + options: HandleActionWithDialogOptions +): Promise => { + const { + deleteType, + action, + id, + onClose, + setSpeciesRowData, + speciesRowData, + setReactionsRowData, + reactionsRowData, + setBool, + } = options; + + await action(id); + + if (deleteType === "Species" && setSpeciesRowData && speciesRowData) { + setSpeciesRowData(speciesRowData.filter((speciesRow) => speciesRow.id !== id)); + } else if (deleteType === "Reaction" && setReactionsRowData && reactionsRowData) { + setReactionsRowData(reactionsRowData.filter((reactionRow) => reactionRow.id !== id)); + } + + if (setBool) { + setBool(true); + } + + onClose(); +}; + + + export const CreatePublishModal: React.FC = ({ open, onClose, diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index 068adada..ff181135 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -20,7 +20,7 @@ import CircularProgress from "@mui/material/CircularProgress"; import Popover from "@mui/material/Popover"; import Button from "@mui/material/Button"; -import { UpdateFamilyModal, UpdateMechanismModal } from "./Modals"; +import { handleActionWithDialog, UpdateFamilyModal, UpdateMechanismModal } from "./Modals"; import Dialog from "@mui/material/Dialog"; import { DialogActions, DialogTitle } from "@mui/material"; @@ -71,6 +71,15 @@ interface RenderFamilyTreeProps { setCreatedFamilyBool: React.Dispatch>; createdMechanismBool: boolean; setCreatedMechanismBool: React.Dispatch>; + + deleteDialogOpen: boolean; + setDeleteDialogOpen: React.Dispatch>; + deleteType: string; + setDeleteType: React.Dispatch>; + itemForDeletionID : string | null; + setItemForDeletionID: React.Dispatch>; + handleDeleteDialogOpen: () => void; + handleDeleteDialogClose: () => void; } const RenderFamilyTree: React.FC = ({ @@ -87,6 +96,15 @@ const RenderFamilyTree: React.FC = ({ setCreatedFamilyBool, createdMechanismBool, setCreatedMechanismBool, + + deleteDialogOpen, + setDeleteDialogOpen, + deleteType, + setDeleteType, + itemForDeletionID, + setItemForDeletionID, + handleDeleteDialogOpen, + handleDeleteDialogClose, }) => { const [expandedItems, setExpandedItems] = useState([]); @@ -98,22 +116,21 @@ const RenderFamilyTree: React.FC = ({ const [loading, setLoading] = useState(true); const [deleteBool, setDeleteBool] = useState(false); - // TODO: FIX THE CAPIALIZATION OF FAMILY HERE - const [updatefamilyOpen, setUpdateFamilyOpen] = useState(false); + const [updateFamilyOpen, setUpdateFamilyOpen] = useState(false); const [updateMechanismOpen, setUpdateMechanismOpen] = useState(false); const handleUpdateMechanismOpen = () => setUpdateMechanismOpen(true); const handleUpdateMechanismClose = () => setUpdateMechanismOpen(false); const handleUpdateFamilyOpen = () => setUpdateFamilyOpen(true); const handleUpdateFamilyClose = () => setUpdateFamilyOpen(false); - const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); - const handleDeleteDialogOpen = () => setDeleteDialogOpen(true); - const handleDeleteDialogClose = () => setDeleteDialogOpen(false); + // const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + // const handleDeleteDialogOpen = () => setDeleteDialogOpen(true); + // const handleDeleteDialogClose = () => setDeleteDialogOpen(false); - const [deleteType, setDeleteType] = useState(''); + // const [deleteType, setDeleteType] = useState(''); - // contains id of item that will be deleted by delete dialog - const [itemForDeletionID, setItemForDeletionID] = React.useState(null); + // // contains id of item that will be deleted by delete dialog + // const [itemForDeletionID, setItemForDeletionID] = React.useState(null); const ref = useRef(null); @@ -205,27 +222,13 @@ const RenderFamilyTree: React.FC = ({ }); }; - // made to allow code reuse for deletion confirmation - // attempts to close the dialog wit the onClose function - const handleActionWithDialog = async ( - action: (id: string) => Promise, - id: string, - onClose: () => void, - setBool?: React.Dispatch> - ) => { - await action(id); - if (setBool) { - setBool(true); - } - - onClose(); - }; - - const handleFamilyDelete = async (familyId: string) => { + const handleFamilyDelete = (familyId: string) => { setDeleteType("Family"); setItemForDeletionID(familyId); + console.log("Updated deleteType:", deleteType); + console.log("Updated itemForDeletionID:", itemForDeletionID); setDeleteDialogOpen(true); }; @@ -471,7 +474,7 @@ const RenderFamilyTree: React.FC = ({ )} = ({ + {/* what we are deleting changes based on deleteType */} {(deleteType === "Mechanism") && - } {(deleteType === "Family") && - } diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index e7da42e0..564b53b6 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -14,6 +14,7 @@ import { CreateReactionModal, UpdateReactionModal, UpdateSpeciesModal, + handleActionWithDialog, } from "./Modals"; import { DataGrid, @@ -26,11 +27,12 @@ import { GridActionsCellItem, GridRowId, } from "@mui/x-data-grid"; -import DeleteIcon from "@mui/icons-material/DeleteOutlined"; +import Dialog from "@mui/material/Dialog"; +import { DialogActions, DialogTitle } from "@mui/material" import IconButton from "@mui/material/IconButton"; -import { Add } from "@mui/icons-material"; -import { Typography, Box, Backdrop, CircularProgress } from "@mui/material"; +import { Add, Delete } from "@mui/icons-material"; +import { Typography, Box, Backdrop, CircularProgress, Button } from "@mui/material"; import Tabs from "@mui/material/Tabs"; import Tab from "@mui/material/Tab"; import { isAxiosError } from "axios"; @@ -46,12 +48,32 @@ interface Props { selectedFamilyID: string | null; selectedMechanismID: string | null; selectedMechanismName: string | null; + + deleteDialogOpen: boolean; + setDeleteDialogOpen: React.Dispatch>; + deleteType: string; + setDeleteType: React.Dispatch>; + itemForDeletionID : string | null; + setItemForDeletionID: React.Dispatch>; + handleDeleteDialogOpen: () => void; + handleDeleteDialogClose: () => void; } const RenderSpeciesReactionTable: React.FC = ({ selectedFamilyID, selectedMechanismID, selectedMechanismName, + + deleteDialogOpen, + setDeleteDialogOpen, + deleteType, + setDeleteType, + itemForDeletionID, + setItemForDeletionID, + handleDeleteDialogOpen, + handleDeleteDialogClose, + + }) => { const [createSpeciesOpen, setCreateSpeciesOpen] = React.useState(false); const handleCreateSpeciesOpen = () => setCreateSpeciesOpen(true); @@ -91,32 +113,16 @@ const RenderSpeciesReactionTable: React.FC = ({ const [speciesRowData, setSpeciesRowData] = useState([]); const [reactionsRowData, setReactionsRowData] = useState([]); - const handleSpeciesDeleteClick = (id: GridRowId) => async () => { - try { - await deleteSpecies(id as string); - // Remove the deleted user from the state - setSpeciesRowData( - speciesRowData.filter((speciesRow) => speciesRow.id !== id), - ); - alert("Species deleted successfully!"); - } catch (error) { - console.error("Error deleting species:", error); - alert("Failed to delete species: " + error); - } + const handleSpeciesDeleteClick = (id: GridRowId) => { + setDeleteType("Species"); + setItemForDeletionID(id as string); + setDeleteDialogOpen(true); }; - const handleReactionDeleteClick = (id: GridRowId) => async () => { - try { - await deleteReaction(id as string); - // Remove the deleted user from the state - setReactionsRowData( - reactionsRowData.filter((reactionRow) => reactionRow.id !== id), - ); - alert("Reaction deleted successfully!"); - } catch (error) { - console.error("Error deleting reaction:", error); - alert("Failed to delete reaction: " + error); - } + const handleReactionDeleteClick = (id: GridRowId) => { + setDeleteType("Reaction"); + setItemForDeletionID(id as string); + setDeleteDialogOpen(true); }; // Event needed as parameter to ensure correct value recieved in tabValue @@ -269,7 +275,7 @@ const RenderSpeciesReactionTable: React.FC = ({ getActions: ({ id }) => { return [ } + icon={} label="Delete" onClick={handleSpeciesDeleteClick(id)} style={{ color: "red" }} @@ -351,7 +357,7 @@ const RenderSpeciesReactionTable: React.FC = ({ getActions: ({ id }) => { return [ } + icon={} label="Delete" onClick={handleReactionDeleteClick(id)} style={{ color: "red" }} @@ -567,6 +573,40 @@ const RenderSpeciesReactionTable: React.FC = ({ reactionsCount={reactionsCount} selectedReaction={selectedReaction} /> + + + + {`Are you sure you want to delete this?`} + + + + + + {/* what we are deleting changes based on deleteType */} + {(deleteType === "Species") && + + } + + {(deleteType === "Reaction") && + + } + + ); }; diff --git a/frontend/src/pages/family.tsx b/frontend/src/pages/family.tsx index b3fbf27e..25d554a5 100644 --- a/frontend/src/pages/family.tsx +++ b/frontend/src/pages/family.tsx @@ -34,6 +34,16 @@ const FamilyPage = () => { const handleCreateMechanismOpen = () => setCreateMechanismOpen(true); const handleCreateMechanismClose = () => setCreateMechanismOpen(false); + + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const handleDeleteDialogOpen = () => setDeleteDialogOpen(true); + const handleDeleteDialogClose = () => setDeleteDialogOpen(false); + + const [deleteType, setDeleteType] = useState(''); + + // contains id of item that will be deleted by delete dialog + const [itemForDeletionID, setItemForDeletionID] = React.useState(null); + return (
@@ -56,6 +66,15 @@ const FamilyPage = () => { setCreatedFamilyBool={setCreatedFamilyBool} createdMechanismBool={createdMechanismBool} setCreatedMechanismBool={setCreatedMechanismBool} + + deleteDialogOpen={deleteDialogOpen} + setDeleteDialogOpen={setDeleteDialogOpen} + deleteType={deleteType} + setDeleteType={setDeleteType} + itemForDeletionID={itemForDeletionID} + setItemForDeletionID={setItemForDeletionID} + handleDeleteDialogOpen={handleDeleteDialogOpen} + handleDeleteDialogClose={handleDeleteDialogClose} />
@@ -68,6 +87,15 @@ const FamilyPage = () => { selectedFamilyID={selectedFamilyId} selectedMechanismID={selectedMechanismId} selectedMechanismName={selectedMechanismName} + + deleteDialogOpen={deleteDialogOpen} + setDeleteDialogOpen={setDeleteDialogOpen} + deleteType={deleteType} + setDeleteType={setDeleteType} + itemForDeletionID={itemForDeletionID} + setItemForDeletionID={setItemForDeletionID} + handleDeleteDialogOpen={handleDeleteDialogOpen} + handleDeleteDialogClose={handleDeleteDialogClose} /> From 797742ce4f74f642c8dcaa4a66a1780a91b7849d Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sat, 30 Nov 2024 17:02:14 -0600 Subject: [PATCH 11/47] famlies and mechanisms working, bug with species and reactions removal --- frontend/src/components/RenderFamilyTree.tsx | 5 +++++ frontend/src/components/RenderSpeciesReactionTable.tsx | 2 ++ frontend/src/pages/family.tsx | 2 ++ 3 files changed, 9 insertions(+) diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index ff181135..57a6236c 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -485,6 +485,10 @@ const RenderFamilyTree: React.FC = ({ selectedMechanism={selectedMechanism} onMechanismUpdated={handleMechanismUpdated} /> + + {/* this is to ensure this dialog only renders in the correct cases instead + of the one in RenderFamilyTree */} + { (deleteType === "Mechanism" || deleteType === "Family") && @@ -516,6 +520,7 @@ const RenderFamilyTree: React.FC = ({ } + } ); }; diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 564b53b6..d16e3a66 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -574,6 +574,7 @@ const RenderSpeciesReactionTable: React.FC = ({ selectedReaction={selectedReaction} /> + { (deleteType === "Species" || deleteType === "Reaction") && @@ -607,6 +608,7 @@ const RenderSpeciesReactionTable: React.FC = ({ } + } ); }; diff --git a/frontend/src/pages/family.tsx b/frontend/src/pages/family.tsx index 25d554a5..644d7465 100644 --- a/frontend/src/pages/family.tsx +++ b/frontend/src/pages/family.tsx @@ -111,6 +111,8 @@ const FamilyPage = () => { selectedFamilyId={selectedFamilyId} setCreatedMechanismBool={setCreatedMechanismBool} /> + +
); }; From 2dd6555f539b8be55b934d3e9de6d8c6ae78e295 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sat, 30 Nov 2024 17:12:18 -0600 Subject: [PATCH 12/47] all family page deletion confirmations now working --- frontend/src/components/RenderSpeciesReactionTable.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index d16e3a66..0ba4ecbe 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -277,7 +277,7 @@ const RenderSpeciesReactionTable: React.FC = ({ } label="Delete" - onClick={handleSpeciesDeleteClick(id)} + onClick={() => handleSpeciesDeleteClick(id)} style={{ color: "red" }} />, ]; @@ -359,7 +359,7 @@ const RenderSpeciesReactionTable: React.FC = ({ } label="Delete" - onClick={handleReactionDeleteClick(id)} + onClick={() => handleReactionDeleteClick(id)} style={{ color: "red" }} />, ]; @@ -573,8 +573,10 @@ const RenderSpeciesReactionTable: React.FC = ({ reactionsCount={reactionsCount} selectedReaction={selectedReaction} /> - + {/* this is to ensure this dialog only renders in the correct cases instead + of the one in RenderFamilyTree */} { (deleteType === "Species" || deleteType === "Reaction") && + From f8a4017c874a250e319d3ec5722e3e57e2a9daf0 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 10:05:15 -0600 Subject: [PATCH 13/47] species and reactions can no longer be added after mechanism is deleted --- frontend/src/components/Modals.tsx | 32 ++++++++++++++++++- frontend/src/components/RenderFamilyTree.tsx | 8 +++-- .../components/RenderSpeciesReactionTable.tsx | 1 - 3 files changed, 36 insertions(+), 5 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index ff326d7a..b158295c 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -168,10 +168,21 @@ interface HandleActionWithDialogOptions { action: (id: T) => Promise; id: T; onClose: () => void; + // only include if deleting species setSpeciesRowData?: React.Dispatch>; speciesRowData?: Species[]; + // only include if deleting a reaction setReactionsRowData?: React.Dispatch>; reactionsRowData?: Reaction[]; + // only include if deleting a mechanism + setSelectedMechanism?: React.Dispatch>; + setSelectedMechanismId?: React.Dispatch>; + setSelectedMechanismName?: React.Dispatch>; + + // only include if deleting a family + setSelectedFamily?: React.Dispatch>; + setSelectedFamilyId?: React.Dispatch>; + // only include if deleting family or mechanism setBool?: React.Dispatch>; } @@ -188,15 +199,34 @@ export const handleActionWithDialog = async ( setReactionsRowData, reactionsRowData, setBool, + + setSelectedMechanism, + setSelectedMechanismId, + setSelectedMechanismName, + + setSelectedFamily, + setSelectedFamilyId, } = options; await action(id); if (deleteType === "Species" && setSpeciesRowData && speciesRowData) { setSpeciesRowData(speciesRowData.filter((speciesRow) => speciesRow.id !== id)); - } else if (deleteType === "Reaction" && setReactionsRowData && reactionsRowData) { + } + else if (deleteType === "Reaction" && setReactionsRowData && reactionsRowData) { setReactionsRowData(reactionsRowData.filter((reactionRow) => reactionRow.id !== id)); } + else if (deleteType === "Mechanism" && setSelectedMechanism && setSelectedMechanismId + && setSelectedMechanismName){ + setSelectedMechanism(null); + setSelectedMechanismId(null); + setSelectedMechanismName(null); + } + + else if (deleteType === "Species" && setSelectedFamily && setSelectedFamilyId){ + setSelectedFamily(null); + setSelectedFamilyId(null); + } if (setBool) { setBool(true); diff --git a/frontend/src/components/RenderFamilyTree.tsx b/frontend/src/components/RenderFamilyTree.tsx index 57a6236c..b5e93021 100644 --- a/frontend/src/components/RenderFamilyTree.tsx +++ b/frontend/src/components/RenderFamilyTree.tsx @@ -14,7 +14,7 @@ import { SimpleTreeView } from "@mui/x-tree-view/SimpleTreeView"; import { TreeItem } from "@mui/x-tree-view/TreeItem"; import IconButton from "@mui/material/IconButton"; -import { Add, GetApp, Delete, Edit, UpdateDisabled } from "@mui/icons-material"; +import { Add, GetApp, Delete, Edit } from "@mui/icons-material"; import CircularProgress from "@mui/material/CircularProgress"; @@ -103,7 +103,6 @@ const RenderFamilyTree: React.FC = ({ setDeleteType, itemForDeletionID, setItemForDeletionID, - handleDeleteDialogOpen, handleDeleteDialogClose, }) => { const [expandedItems, setExpandedItems] = useState([]); @@ -505,7 +504,10 @@ const RenderFamilyTree: React.FC = ({ } diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 0ba4ecbe..64fc82b8 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -70,7 +70,6 @@ const RenderSpeciesReactionTable: React.FC = ({ setDeleteType, itemForDeletionID, setItemForDeletionID, - handleDeleteDialogOpen, handleDeleteDialogClose, From 973025022ce95803ad64a4e2f9db8dd0d0f9ffb7 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 10:09:24 -0600 Subject: [PATCH 14/47] species table reset after deleting --- frontend/src/components/RenderSpeciesReactionTable.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 64fc82b8..69d46864 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -186,6 +186,8 @@ const RenderSpeciesReactionTable: React.FC = ({ } } else { setSpecies([]); + setSpeciesRowData([]); + setReactionsRowData([]); } }; From a9f16fc889fe61d376d3c1af01945c065f1870c0 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 11:01:45 -0600 Subject: [PATCH 15/47] reactions now displayed correctly in add mechanism modal --- frontend/src/components/Modals.tsx | 56 +++++++++++++++++------------- 1 file changed, 32 insertions(+), 24 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index b158295c..50a291ac 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -436,6 +436,8 @@ export const CreateMechanismModal: React.FC = ({ }>({}); const createMechanismRef = useRef(""); + console.log("here"); + console.log(Object.entries(reactionEquations)); useEffect(() => { const fetchSpeciesReactions = async () => { @@ -445,6 +447,8 @@ export const CreateMechanismModal: React.FC = ({ setSpeciesList(species); const reactions = await getReactionsByFamilyId(selectedFamilyId); + console.log("reactions by family id"); + console.log(reactions); setReactionList(reactions); } } catch (error) { @@ -458,33 +462,36 @@ export const CreateMechanismModal: React.FC = ({ useEffect(() => { const fetchReactionEquations = async () => { const equations: { [key: string]: string } = {}; - try { - await Promise.all( - reactionList.map(async (reaction) => { - const reactants: ReactionSpeciesDto[] = - await getReactantsByReactionIdAsync(reaction.id!); - const products: ReactionSpeciesDto[] = - await getProductsByReactionIdAsync(reaction.id!); - const reactantNames = reactants - .map((r) => r.species_name) - .join(" + "); - const productNames = products - .map((p) => p.species_name) - .join(" + "); - equations[reaction.id!] = `${reactantNames} -> ${productNames}`; - }), - ); + reactionList.map((reactionItem) =>{ + if (reactionItem.description !== null) { + // make regex expression + let regex = + /^(Arrhenius|Branched|Emission|First-Order Loss|Photolysis|Surface \(Heterogeneous\)|Ternary Chemical Activation|Troe \(Fall-Off\)|Tunneling|N\/A)(?: Reaction \d+)?: (.+)$/i; + + let matches = reactionItem.description.match(regex); + + // console.log("heres the matches:"); + // console.log(matches); + // console.log("heres the description:"); + // console.log(reactionItem.description) + + if (matches) { + // Extract components from matches + const reaction = matches[2].trim(); + equations[reactionItem.id!] = reaction; + } else { + equations[reactionItem.id!] = ""; + console.error("Error, data in a reaction did not match the specified format!"); + } + } + setReactionEquations(equations); - } catch (error) { - console.error("Error fetching reaction equations:", error); - } + }); }; - if (reactionList.length > 0) { - fetchReactionEquations(); - } else { - setReactionEquations({}); - } + fetchReactionEquations(); + + }, [reactionList]); const handleCreateMechanismClick = async () => { @@ -519,6 +526,7 @@ export const CreateMechanismModal: React.FC = ({ setSelectedReactionIds([]); onClose(); setCreatedMechanismBool(true); + } catch (error) { console.error(error); } From 29193342330da4382050441134a2776b06d90467 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 11:10:13 -0600 Subject: [PATCH 16/47] clarified wording on add reaction modal --- frontend/src/components/Modals.tsx | 57 +++++++++++++++--------------- 1 file changed, 29 insertions(+), 28 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 50a291ac..297380bd 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -470,15 +470,13 @@ export const CreateMechanismModal: React.FC = ({ let matches = reactionItem.description.match(regex); - // console.log("heres the matches:"); - // console.log(matches); - // console.log("heres the description:"); - // console.log(reactionItem.description) if (matches) { // Extract components from matches const reaction = matches[2].trim(); - equations[reactionItem.id!] = reaction; + if (!(reactionItem.id! in equations)){ + equations[reactionItem.id!] = reaction; + } } else { equations[reactionItem.id!] = ""; console.error("Error, data in a reaction did not match the specified format!"); @@ -1119,31 +1117,34 @@ export const CreateReactionModal: React.FC = ({ useEffect(() => { const fetchReactionEquations = async () => { const equations: { [key: string]: string } = {}; - try { - await Promise.all( - reactionList.map(async (reaction) => { - const reactants = await getReactantsByReactionIdAsync(reaction.id!); - const products = await getProductsByReactionIdAsync(reaction.id!); - const reactantNames = reactants - .map((r: ReactionSpeciesDto) => r.species_name) - .join(" + "); - const productNames = products - .map((p: ReactionSpeciesDto) => p.species_name) - .join(" + "); - equations[reaction.id!] = `${reactantNames} -> ${productNames}`; - }), - ); + reactionList.map((reactionItem) =>{ + if (reactionItem.description !== null) { + // make regex expression + let regex = + /^(Arrhenius|Branched|Emission|First-Order Loss|Photolysis|Surface \(Heterogeneous\)|Ternary Chemical Activation|Troe \(Fall-Off\)|Tunneling|N\/A)(?: Reaction \d+)?: (.+)$/i; + + let matches = reactionItem.description.match(regex); + + + if (matches) { + // Extract components from matches + const reaction = matches[2].trim(); + if (!(reactionItem.id! in equations)){ + equations[reactionItem.id!] = reaction; + } + } else { + equations[reactionItem.id!] = ""; + console.error("Error, data in a reaction did not match the specified format!"); + } + } + setReactionEquations(equations); - } catch (error) { - console.error("Error fetching reaction equations:", error); - } + }); }; - if (reactionList.length > 0) { - fetchReactionEquations(); - } else { - setReactionEquations({}); - } + fetchReactionEquations(); + + }, [reactionList]); const handleCreateReactionClick = async () => { @@ -1260,7 +1261,7 @@ export const CreateReactionModal: React.FC = ({ {reactionList.length > 0 && ( <> - Or Pick Existing Reactions in Family (Multiple Selection) + Or Pick Reaction From Other Mechanism(s) In Family (Multiple Selection) Date: Sun, 1 Dec 2024 15:55:26 -0600 Subject: [PATCH 20/47] more ui changes to reactions --- frontend/src/API/API_UpdateMethods.tsx | 1 - frontend/src/components/Modals.tsx | 9 +++++++-- frontend/src/components/RenderFamilyTree.tsx | 1 + frontend/src/components/RenderSpeciesReactionTable.tsx | 6 +++++- frontend/src/pages/family.tsx | 1 + 5 files changed, 14 insertions(+), 4 deletions(-) diff --git a/frontend/src/API/API_UpdateMethods.tsx b/frontend/src/API/API_UpdateMethods.tsx index 277be9be..84da3b41 100644 --- a/frontend/src/API/API_UpdateMethods.tsx +++ b/frontend/src/API/API_UpdateMethods.tsx @@ -100,7 +100,6 @@ export async function updateUser(id: string, user: User) { "Content-Type": "application/json", }, }); - console.log("response in updateUser: ", response); return response.data as User; } catch (error: any) { console.error(`Error updating user ${id}: ${error.message}`, error); diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 43bd285d..27ce2118 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -129,6 +129,7 @@ interface CreateReactionModalProps { open: boolean; onClose: () => void; selectedFamilyId: string | null; + selectedFamily: Family | null; selectedMechanismId: string | null; selectedMechanismName: string | null; reactionsCount: number; @@ -139,6 +140,7 @@ interface UpdateReactionModalProps { open: boolean; onClose: () => void; selectedFamilyId: string | null; + selectedFamily: Family | null; selectedMechanismId: string | null; selectedMechanismName: string | null; reactionsCount: number; @@ -1089,6 +1091,7 @@ export const CreateReactionModal: React.FC = ({ open, onClose, selectedFamilyId, + selectedFamily, selectedMechanismId, selectedMechanismName, setReactionCreated, @@ -1104,6 +1107,7 @@ export const CreateReactionModal: React.FC = ({ const createReactionProductsRef = useRef(""); useEffect(() => { + console.log("hi:", selectedFamily); const fetchReactions = async () => { try { if (selectedFamilyId && selectedMechanismId) { @@ -1274,7 +1278,7 @@ export const CreateReactionModal: React.FC = ({ {reactionList.length > 0 && ( <> - Or Pick Reaction From Other Mechanism(s) In Family (Multiple Selection) + Or Pick Reaction From Other Mechanism(s) In Family "{selectedFamily?.name || ""}": (Multiple Selection) = ({ } sx={treeItemStyle} onClick={() => { + setSelectedFamily(family); setSelectedFamilyId(family.id!); setSelectedMechanismId(mechanism.id!); setSelectedMechanismName(mechanism.name!); diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 69d46864..388e29d3 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; -import { Species, Reaction, Property } from "../API/API_Interfaces"; +import { Species, Reaction, Property, Family } from "../API/API_Interfaces"; import { getReactionsByMechanismId, getSpeciesByMechanismId, @@ -46,6 +46,7 @@ const tabsHeaderStyle: React.CSSProperties = { interface Props { selectedFamilyID: string | null; + selectedFamily: Family | null; selectedMechanismID: string | null; selectedMechanismName: string | null; @@ -61,6 +62,7 @@ interface Props { const RenderSpeciesReactionTable: React.FC = ({ selectedFamilyID, + selectedFamily, selectedMechanismID, selectedMechanismName, @@ -549,6 +551,7 @@ const RenderSpeciesReactionTable: React.FC = ({ open={createReactionOpen} onClose={handleCreateReactionClose} selectedFamilyId={selectedFamilyID} + selectedFamily={selectedFamily} selectedMechanismId={selectedMechanismID} selectedMechanismName={selectedMechanismName} setReactionCreated={setReactionCreated} @@ -568,6 +571,7 @@ const RenderSpeciesReactionTable: React.FC = ({ open={editReactionOpen} onClose={handleEditReactionClose} selectedFamilyId={selectedFamilyID} + selectedFamily={selectedFamily} selectedMechanismId={selectedMechanismID} selectedMechanismName={selectedMechanismName} setReactionUpdated={setReactionUpdated} diff --git a/frontend/src/pages/family.tsx b/frontend/src/pages/family.tsx index 644d7465..9b51a533 100644 --- a/frontend/src/pages/family.tsx +++ b/frontend/src/pages/family.tsx @@ -84,6 +84,7 @@ const FamilyPage = () => {
Date: Sun, 1 Dec 2024 16:09:25 -0600 Subject: [PATCH 21/47] keep up to date with local --- frontend/src/components/Modals.tsx | 11 +++++------ frontend/src/pages/RoleManagement.tsx | 1 + 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 27ce2118..95ff8d2c 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -945,8 +945,7 @@ export const UpdateSpeciesModal: React.FC = ({ } }; - console.log("open status"); - console.log(open); + return ( = ({ await addReactionToMechanism(mechanismReaction); } + console.log("selected ids:", selectedReactionIds); for (const reactionId of selectedReactionIds) { const mechanismReaction: MechanismReaction = { mechanism_id: selectedMechanismId, @@ -1448,10 +1448,10 @@ export const UpdateReactionModal: React.FC = ({ // console.log("Modified:"); // console.log(reactionData); - + // @ts-ignore + // tslint:disable-next-line:no-unused-variable const updatedReaction = await updateReaction(reactionData); - console.log(updatedReaction); } setSelectedReactionType(""); @@ -1521,10 +1521,9 @@ export const UpdateReactionModal: React.FC = ({ {reactionList.length > 0 && ( <> - Or Pick Reaction From Other Mechanism(s) In Family "{selectedFamily?.name || ""}": (Multiple Selection) + Or Pick Reaction From Other Mechanism(s) In Family "{selectedFamily?.name || ""}": Date: Sun, 1 Dec 2024 11:50:15 -0600 Subject: [PATCH 40/47] role managment delete now requires confirmation, but some api errors --- frontend/src/API/API_UpdateMethods.tsx | 1 + frontend/src/components/Modals.tsx | 63 ++++++++++++++++---------- frontend/src/pages/RoleManagement.tsx | 56 +++++++++++++++++++---- 3 files changed, 85 insertions(+), 35 deletions(-) diff --git a/frontend/src/API/API_UpdateMethods.tsx b/frontend/src/API/API_UpdateMethods.tsx index 84da3b41..277be9be 100644 --- a/frontend/src/API/API_UpdateMethods.tsx +++ b/frontend/src/API/API_UpdateMethods.tsx @@ -100,6 +100,7 @@ export async function updateUser(id: string, user: User) { "Content-Type": "application/json", }, }); + console.log("response in updateUser: ", response); return response.data as User; } catch (error: any) { console.error(`Error updating user ${id}: ${error.message}`, error); diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 297380bd..c1b4dc24 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -19,6 +19,7 @@ import { Species, ReactionSpeciesDto, Property, + User, } from "../API/API_Interfaces"; import { createSpecies, @@ -174,6 +175,10 @@ interface HandleActionWithDialogOptions { // only include if deleting a reaction setReactionsRowData?: React.Dispatch>; reactionsRowData?: Reaction[]; + + // only include if deleting a user + setUsers?: React.Dispatch> + // only include if deleting a mechanism setSelectedMechanism?: React.Dispatch>; setSelectedMechanismId?: React.Dispatch>; @@ -194,6 +199,7 @@ export const handleActionWithDialog = async ( action, id, onClose, + setSpeciesRowData, speciesRowData, setReactionsRowData, @@ -206,32 +212,44 @@ export const handleActionWithDialog = async ( setSelectedFamily, setSelectedFamilyId, + + setUsers, } = options; + try { + await action(id); - await action(id); + if (deleteType === "Species" && setSpeciesRowData && speciesRowData) { + setSpeciesRowData(speciesRowData.filter((speciesRow) => speciesRow.id !== id)); + } - if (deleteType === "Species" && setSpeciesRowData && speciesRowData) { - setSpeciesRowData(speciesRowData.filter((speciesRow) => speciesRow.id !== id)); - } - else if (deleteType === "Reaction" && setReactionsRowData && reactionsRowData) { - setReactionsRowData(reactionsRowData.filter((reactionRow) => reactionRow.id !== id)); - } - else if (deleteType === "Mechanism" && setSelectedMechanism && setSelectedMechanismId - && setSelectedMechanismName){ - setSelectedMechanism(null); - setSelectedMechanismId(null); - setSelectedMechanismName(null); - } + else if (deleteType === "Reaction" && setReactionsRowData && reactionsRowData) { + setReactionsRowData(reactionsRowData.filter((reactionRow) => reactionRow.id !== id)); + } - else if (deleteType === "Species" && setSelectedFamily && setSelectedFamilyId){ - setSelectedFamily(null); - setSelectedFamilyId(null); - } + else if (deleteType === "Mechanism" && setSelectedMechanism && setSelectedMechanismId + && setSelectedMechanismName){ + setSelectedMechanism(null); + setSelectedMechanismId(null); + setSelectedMechanismName(null); + } - if (setBool) { - setBool(true); - } + else if (deleteType === "Species" && setSelectedFamily && setSelectedFamilyId){ + setSelectedFamily(null); + setSelectedFamilyId(null); + } + else if(deleteType === "User" && setUsers){ + setUsers((prevUsers) => prevUsers.filter((user) => user.id !== id)); + + } + + if (setBool) { + setBool(true); + } + + } catch(error) { + console.error("error in handleActionWithDialog: ", error) + } onClose(); }; @@ -436,8 +454,6 @@ export const CreateMechanismModal: React.FC = ({ }>({}); const createMechanismRef = useRef(""); - console.log("here"); - console.log(Object.entries(reactionEquations)); useEffect(() => { const fetchSpeciesReactions = async () => { @@ -447,8 +463,6 @@ export const CreateMechanismModal: React.FC = ({ setSpeciesList(species); const reactions = await getReactionsByFamilyId(selectedFamilyId); - console.log("reactions by family id"); - console.log(reactions); setReactionList(reactions); } } catch (error) { @@ -704,7 +718,6 @@ export const CreateSpeciesModal: React.FC = ({ diffusion: diffusion, }; const createdProperty = await createProperty(propertyData); - console.log(createdProperty); } } diff --git a/frontend/src/pages/RoleManagement.tsx b/frontend/src/pages/RoleManagement.tsx index 576b0a19..c9b6cf86 100644 --- a/frontend/src/pages/RoleManagement.tsx +++ b/frontend/src/pages/RoleManagement.tsx @@ -26,6 +26,11 @@ import { getUsers } from "../API/API_GetMethods"; import { User } from "../API/API_Interfaces"; import { updateUser } from "../API/API_UpdateMethods"; import { deleteUser } from "../API/API_DeleteMethods"; +import Dialog from "@mui/material/Dialog"; +import DialogTitle from "@mui/material/DialogTitle"; +import DialogActions from "@mui/material/DialogActions"; +import { Button } from "@mui/material"; +import { handleActionWithDialog } from "../components/Modals"; function RolesToolbar() { return ( @@ -40,6 +45,7 @@ function RolesToolbar() { ); } + const RoleManagement: React.FC = () => { const [users, setUsers] = useState([]); const [loading, setLoading] = useState(true); @@ -47,6 +53,14 @@ const RoleManagement: React.FC = () => { const [selectedRoles, setSelectedRoles] = useState<{ [key: string]: string }>( {}, ); + + const [deleteDialogOpen, setDeleteDialogOpen] = useState(false); + const handleDeleteDialogClose = () => setDeleteDialogOpen(false); + + const [deleteType, setDeleteType] = useState(''); + + // contains id of item that will be deleted by delete dialog + const [itemForDeletionID, setItemForDeletionID] = React.useState(null); // const [search, setSearch] = useState(""); // State for search input // const [roleFilter, setRoleFilter] = useState("all"); // State for role filter @@ -113,16 +127,10 @@ const RoleManagement: React.FC = () => { setRowModesModel({ ...rowModesModel, [id]: { mode: GridRowModes.View } }); }; - const handleDeleteClick = (id: GridRowId) => async () => { - try { - await deleteUser(id as string); - // Remove the deleted user from the state - setUsers((prevUsers) => prevUsers.filter((user) => user.id !== id)); - alert("User deleted successfully!"); - } catch (error) { - console.error("Error deleting user:", error); - alert("Failed to delete user: " + error); - } + const handleDeleteClick = (id: GridRowId) => () => { + setDeleteType("User"); + setItemForDeletionID(id as string); + setDeleteDialogOpen(true); }; const handleCancelClick = (id: GridRowId) => () => { @@ -135,11 +143,13 @@ const RoleManagement: React.FC = () => { // This function handles syncing edits with the database // Note: this does not handle syncing deleting from DB: see handleDeleteClick const processRowUpdate = async (updatedUser: GridRowModel) => { + console.log("Updating row:", updatedUser); try { const response = await updateUser( updatedUser.id as string, updatedUser as User, ); // Ensure updatedUser.id is a string + console.log("response: ", response); return response; } catch (error) { console.error("Error updating user: ", error); @@ -248,6 +258,32 @@ const RoleManagement: React.FC = () => {
+ + { (deleteType === "User") && + + + {`Are you sure you want to delete this?`} + + + + + + + {/* what we are deleting changes based on deleteType */} + {(deleteType === "User") && + + } + + + }
); }; From 13fb76421641bd511cb6227fedc6f685e4ac54dd Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 15:32:42 -0600 Subject: [PATCH 41/47] fixed role management --- frontend/src/pages/RoleManagement.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/frontend/src/pages/RoleManagement.tsx b/frontend/src/pages/RoleManagement.tsx index c9b6cf86..314e85ed 100644 --- a/frontend/src/pages/RoleManagement.tsx +++ b/frontend/src/pages/RoleManagement.tsx @@ -145,12 +145,13 @@ const RoleManagement: React.FC = () => { const processRowUpdate = async (updatedUser: GridRowModel) => { console.log("Updating row:", updatedUser); try { + // @ts-ignore const response = await updateUser( updatedUser.id as string, updatedUser as User, ); // Ensure updatedUser.id is a string - console.log("response: ", response); - return response; + // if no error, assume it is fine + return updatedUser; } catch (error) { console.error("Error updating user: ", error); throw error; From 323134a3f7d066185c37b79f6728eb6b5e79a2b7 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 15:40:15 -0600 Subject: [PATCH 42/47] fixed display for reaction update modal --- frontend/src/components/Modals.tsx | 49 ++++++++++++++++-------------- 1 file changed, 26 insertions(+), 23 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index c1b4dc24..43bd285d 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -1387,31 +1387,34 @@ export const UpdateReactionModal: React.FC = ({ useEffect(() => { const fetchReactionEquations = async () => { const equations: { [key: string]: string } = {}; - try { - await Promise.all( - reactionList.map(async (reaction) => { - const reactants = await getReactantsByReactionIdAsync(reaction.id!); - const products = await getProductsByReactionIdAsync(reaction.id!); - const reactantNames = reactants - .map((r: ReactionSpeciesDto) => r.species_name) - .join(" + "); - const productNames = products - .map((p: ReactionSpeciesDto) => p.species_name) - .join(" + "); - equations[reaction.id!] = `${reactantNames} -> ${productNames}`; - }), - ); + reactionList.map((reactionItem) =>{ + if (reactionItem.description !== null) { + // make regex expression + let regex = + /^(Arrhenius|Branched|Emission|First-Order Loss|Photolysis|Surface \(Heterogeneous\)|Ternary Chemical Activation|Troe \(Fall-Off\)|Tunneling|N\/A)(?: Reaction \d+)?: (.+)$/i; + + let matches = reactionItem.description.match(regex); + + + if (matches) { + // Extract components from matches + const reaction = matches[2].trim(); + if (!(reactionItem.id! in equations)){ + equations[reactionItem.id!] = reaction; + } + } else { + equations[reactionItem.id!] = ""; + console.error("Error, data in a reaction did not match the specified format!"); + } + } + setReactionEquations(equations); - } catch (error) { - console.error("Error fetching reaction equations:", error); - } + }); }; - if (reactionList.length > 0) { - fetchReactionEquations(); - } else { - setReactionEquations({}); - } + fetchReactionEquations(); + + }, [reactionList]); const handleCreateReactionClick = async () => { @@ -1513,7 +1516,7 @@ export const UpdateReactionModal: React.FC = ({ {reactionList.length > 0 && ( <> - Or Pick Existing Reactions in Family (Multiple Selection) + Or Pick Reaction From Other Mechanism(s) In Family (Multiple Selection) = ({ open, onClose, selectedFamilyId, + selectedFamily, selectedMechanismId, setReactionUpdated, reactionsCount, @@ -1516,7 +1521,7 @@ export const UpdateReactionModal: React.FC = ({ {reactionList.length > 0 && ( <> - Or Pick Reaction From Other Mechanism(s) In Family (Multiple Selection) + Or Pick Reaction From Other Mechanism(s) In Family "{selectedFamily?.name || ""}": (Multiple Selection) setSelectedReactionIds(e.target.value as string[]) diff --git a/frontend/src/pages/RoleManagement.tsx b/frontend/src/pages/RoleManagement.tsx index 314e85ed..ac4b10b1 100644 --- a/frontend/src/pages/RoleManagement.tsx +++ b/frontend/src/pages/RoleManagement.tsx @@ -146,6 +146,7 @@ const RoleManagement: React.FC = () => { console.log("Updating row:", updatedUser); try { // @ts-ignore + // tslint:disable-next-line:no-unused-variable const response = await updateUser( updatedUser.id as string, updatedUser as User, From d5952414bd6289d3bbaa66f19bf1fafbe2ff44f6 Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 16:16:13 -0600 Subject: [PATCH 45/47] removed unused variables --- frontend/src/components/Modals.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index 95ff8d2c..f2d8ffab 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -6,8 +6,6 @@ import { getReactionsByMechanismId, getSpeciesByFamilyId, getReactionsByFamilyId, - getReactantsByReactionIdAsync, - getProductsByReactionIdAsync, } from "../API/API_GetMethods"; import { Family, @@ -719,6 +717,8 @@ export const CreateSpeciesModal: React.FC = ({ concentration: concentration, diffusion: diffusion, }; + // @ts-ignore + // tslint:disable-next-line:no-unused-variable const createdProperty = await createProperty(propertyData); } } From 7d0426a5a1951f6b1f70980b1cc2c2610887fedd Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 16:17:23 -0600 Subject: [PATCH 46/47] forgot to remove one --- frontend/src/components/Modals.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/frontend/src/components/Modals.tsx b/frontend/src/components/Modals.tsx index f2d8ffab..f167645b 100644 --- a/frontend/src/components/Modals.tsx +++ b/frontend/src/components/Modals.tsx @@ -15,7 +15,6 @@ import { Reaction, ReactionSpecies, Species, - ReactionSpeciesDto, Property, User, } from "../API/API_Interfaces"; From d29892bc7b0761bf54cda63c58d7db7f69a0ca6e Mon Sep 17 00:00:00 2001 From: BrittExe Date: Sun, 1 Dec 2024 16:36:29 -0600 Subject: [PATCH 47/47] test change --- frontend/src/API/API_GetMethods.tsx | 4 +++- frontend/src/components/RenderSpeciesReactionTable.tsx | 5 ----- 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/frontend/src/API/API_GetMethods.tsx b/frontend/src/API/API_GetMethods.tsx index 21e222d9..e9830f85 100644 --- a/frontend/src/API/API_GetMethods.tsx +++ b/frontend/src/API/API_GetMethods.tsx @@ -292,7 +292,9 @@ export async function getPropertyBySpeciesAndMechanism( `Error fetching property by species ${species} and mechanism ${mechanism}: ${error.message}`, error, ); - throw error; + throw new Error( + "Failed to fetch property by species and mechanism. Please try again later.", + ); } } diff --git a/frontend/src/components/RenderSpeciesReactionTable.tsx b/frontend/src/components/RenderSpeciesReactionTable.tsx index 388e29d3..b4d11abb 100644 --- a/frontend/src/components/RenderSpeciesReactionTable.tsx +++ b/frontend/src/components/RenderSpeciesReactionTable.tsx @@ -35,7 +35,6 @@ import { Add, Delete } from "@mui/icons-material"; import { Typography, Box, Backdrop, CircularProgress, Button } from "@mui/material"; import Tabs from "@mui/material/Tabs"; import Tab from "@mui/material/Tab"; -import { isAxiosError } from "axios"; import { createProperty } from "../API/API_CreateMethods"; const tabsHeaderStyle: React.CSSProperties = { @@ -303,7 +302,6 @@ const RenderSpeciesReactionTable: React.FC = ({ ); } catch (error) { // if no property found, create one - if (isAxiosError(error) && error.response?.status === 404) { const propertyData: Property = { speciesId: speciesItem.id!, mechanismId: selectedMechanismID!, @@ -311,10 +309,7 @@ const RenderSpeciesReactionTable: React.FC = ({ const createdProperty = await createProperty(propertyData); fetchedProperty = createdProperty; console.log("Missing Property handled successfully"); - } else { - //('Error fetching property:', error); } - } // Log the fetched property for debugging //console.log('Fetched property for species', speciesItem.name, fetchedProperty);