+
+
+ Enter Name for Family below.
+ createFamilyRef.current = e.target.value}/>
+
+
+
+
+
+ );
+}
+
+export const CreateTagMechanismModal: React.FC
+
+
+ Enter Tag for Tag Mechanism
+ createTagMechanismRef.current = e.target.value} />
+
+ Select species (Multiple Selection)
+
+
+ Select reactions (Multiple Selection)
+
+
+
+
+
+
+ );
+}
+
+export const CreateSpeciesModal: React.FC
+ Enter Name for New Species
+ (createSpeciesRef.current = e.target.value)} />
+ {(family?.super_tag_mechanism_uuid !== selectedTagMechanism && speciesList.length > 0) && (
+ <>
+ Or Pick Existing Species in Family (Multiple Selection)
+
+
+ )}
+ {(family?.super_tag_mechanism_uuid !== selectedTagMechanism && speciesList.length === 0) && (
+ Contains all Family's Species
+ )}
+
+
+ Properties of Species: "{selectedSpecies?.type}"
+
+
+
+
+
+ Name
+ Value
+ Units
+
+ {propertyTypes.map(propertyType => {
+ return (
+
+ {propertyType.name}
+ handleFieldChange(propertyType.uuid, e.target.value)}
+ />
+ {propertyType.units}
+
+ );
+ })}
+
+
+
+
+
+ );
+}
+
+const CreateReactantModal: React.FC"{selectedReaction?.type}"
+{updatedReactionString}
+
+
+
+
+
+
+
+
+ Reactants
+
+
+
+
+
+
+
+
+
+
+ Products
+
+
+
+ Properties
+ + + + +
+
+
+ Select a species from the list below.
+
+
+ Input a quantity for species
+ createReactantQuantityRef.current = e.target.value}/>
+
+
+
+
+
+ );
+}
+
+const CreateProductModal: React.FC
+
+
+ Select a species from the list below.
+
+
+ Input a quantity for species
+ createProductQuantityRef.current = e.target.value}/>
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/frontend/src/webPages/Components/NavDropDown.tsx b/frontend/src/webPages/Components/NavDropDown.tsx
new file mode 100644
index 0000000..0e2bd28
--- /dev/null
+++ b/frontend/src/webPages/Components/NavDropDown.tsx
@@ -0,0 +1,39 @@
+import { useNavigate } from 'react-router-dom';
+
+import Box from '@mui/material/Box';
+import List from '@mui/material/List';
+import ListItem from '@mui/material/ListItem';
+import ListItemText from '@mui/material/ListItemText';
+import ListItemButton from '@mui/material/ListItemButton';
+
+const NavDropDown = () => {
+ const navigate = useNavigate();
+
+ const goHome = () => navigate('/LoggedIn');
+ const goFamily = () => navigate('/FamilyPage');
+ const goLogOut = () => navigate('/');
+
+ return (
+ -
+
+ {loading ? (
+
+ {tagMechanism.tag}
+
}
+ sx={treeItemStyle}
+ onClick={() => setSelectedTagMechanism(tagMechanism.uuid)}
+ />
+ ))}
+
+ ))}
+
+
+
+
+ )}
+
+ );
+}
+
+export default RenderFamilyTree;
diff --git a/frontend/src/webPages/Components/RenderSpeciesReactionTable.tsx b/frontend/src/webPages/Components/RenderSpeciesReactionTable.tsx
new file mode 100644
index 0000000..65c34d0
--- /dev/null
+++ b/frontend/src/webPages/Components/RenderSpeciesReactionTable.tsx
@@ -0,0 +1,307 @@
+import React, { Children, ReactNode, useEffect, useState } from 'react';
+
+import { Species, Reaction, PropertyType, PropertyVersion} from '../../API/API_Interfaces';
+import { getSpeciesFromTagMechanism, getReactionsFromTagMechanism, getPropertyTypesFromValidation, getPropertiesFromParent } from '../../API/API_GetMethods';
+
+import { CreateReactionModal, CreateSpeciesModal, ReactionPropertiesModal, SpeciesPropertiesModal } from './Modals';
+
+import { DataGrid, GridRowParams, GridColDef, GridToolbar, GridToolbarContainer, GridToolbarColumnsButton, GridToolbarFilterButton, GridToolbarDensitySelector, GridToolbarExport } from '@mui/x-data-grid';
+
+import IconButton from '@mui/material/IconButton';
+import { Add, ChildCare } from '@mui/icons-material';
+import { Typography } from '@mui/material';
+import Tabs from '@mui/material/Tabs';
+import Tab from '@mui/material/Tab';
+
+const tabsHeaderStyle: React.CSSProperties = {
+ backgroundColor: '#f0f0f0',
+ padding: '10px',
+ borderBottom: '1px solid #ccc',
+
+};
+
+
+interface Props {
+ selectedFamily: string | null;
+ selectedTagMechanism: string | null;
+}
+
+
+const RenderSpeciesReactionTable: React.FC
+
+
+
+ Families
+
+
+ {families.map((family) => (
+
+ {family.name}
+
+ }
+ sx={treeItemStyle}
+ onClick={() => {
+ setSelectedFamily(family.uuid);
+ setSelectedTagMechanism(family.super_tag_mechanism_uuid);
+ }}
+ >
+
+ {
+ ref.current = family.super_tag_mechanism_uuid;
+ handlePopOverClick(obj);
+ }}
+ aria-label="download"
+ style={{ color: 'green' }}
+ edge= 'end'
+ >
+
+ {
+ handleFamilyDelete(family.uuid);
+ }}
+ aria-label="delete"
+ style={{ color: 'red' }}
+ edge= 'start'
+ >
+
+
+
+
+
+
+
+
+
+
+
+ {tagMechanismsMap[family.uuid]?.map((tagMechanism) => (
+ Tag Mechanisms
+
+ {
+ ref.current = tagMechanism.uuid;
+ handlePopOverClick(obj);
+ }}
+ aria-label="download"
+ style={{ color: 'green' }}
+ >
+
+ {
+ handleTagMechanismDelete(tagMechanism.uuid);
+ }}
+ aria-label="delete"
+ style={{ color: 'red' }}
+ edge= 'start'
+ >
+
+
+
+
+
+
+
+
+ );
+}
+
+export default RenderSpeciesReactionTable;
\ No newline at end of file
diff --git a/frontend/src/webPages/Family/family.css b/frontend/src/webPages/Family/family.css
new file mode 100644
index 0000000..6db9fcd
--- /dev/null
+++ b/frontend/src/webPages/Family/family.css
@@ -0,0 +1,40 @@
+.layoutFam {
+ height: 100vh;
+ width: 100vw;
+
+ display: grid;
+ grid-template-areas:
+ "header header header"
+ "familyMenu speciesReactions speciesReactions"
+ "footer footer footer";
+ grid-template-rows: auto 1fr auto; /* auto for headers, 1fr for middle */
+ grid-template-columns: 1fr 2fr; /* 1/3 and 2/3 for the middle sections */
+ /* gap: 8px; */
+ background-color: #C3D7EE;
+}
+
+
+
+.headerBar { grid-area: header;}
+.familiesMenu { grid-area: familyMenu;}
+.speciesReactions {grid-area: speciesReactions;}
+.footerBar { grid-area: footer;}
+
+
+.modal-visible {
+ position: absolute;
+ animation: slideIn 2.5s cubic-bezier(0,-0.01,.01,1) infinite;
+}
+
+.modal-hidden {
+ display: none;
+}
+
+@keyframes slideIn {
+ from {
+ left: -10%;
+ }
+ to {
+ left: 0%;
+ }
+}
\ No newline at end of file
diff --git a/frontend/src/webPages/Family/family.tsx b/frontend/src/webPages/Family/family.tsx
new file mode 100644
index 0000000..52184f6
--- /dev/null
+++ b/frontend/src/webPages/Family/family.tsx
@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+
+import RenderFamilyTree from '../Components/RenderFamilyTree';
+import RenderSpeciesReactionTable from '../Components/RenderSpeciesReactionTable';
+import { CreateFamilyModal, CreateTagMechanismModal } from '../Components/Modals';
+
+import { StyledDetailBox } from './familyStyling';
+
+import { Header, Footer } from '../Components/HeaderFooter';
+
+import "./family.css";
+
+const FamilyPage = () => {
+
+ const [selectedFamily, setSelectedFamily] = useState
+
+
+
+
+
+ {currentTab === 0 &&
+
+
+ row.uuid}
+ onRowClick={handleSpeciesCellClick}
+ autoPageSize
+ pagination
+ style={{ height: '100%' }}
+ slots={{
+ toolbar: () =>
+ }
+ {currentTab === 1 &&
+
+ row.uuid}
+ onRowClick={handleReactionCellClick}
+ autoPageSize
+ pagination
+ style={{ height: '100%' }}
+ slots={{
+ toolbar: () =>
+ }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Chemistry Cafe
+
+
+
+
+
+
+ A collaborative tool to share, edit, manage, and export chemical mechanisms across the scientific community
+ and into MusicBox Interactive.
+ +
+
+
+ + +
+
+
+ + {profile ? ( +
+
+ +
+ + {profile ? ( +
+
+ 
+
+
+
+
+
+
+
+
+ ) : (
+
+ )}
+ User Logged in
+Name: {profile.name}
+Email Address: {profile.email}
++
+
+ } sx={{width: '50%'}}>
+ Continue as Guest
+
+
+
+
+
+
+
+
+
+
+ About
+
+ The Chemistry Cafe tool was made possible by the collaboration between NCAR and Texas A&M through the
+ CSCE Capstone program.
+
+
+
+ Credits
+
+
+ Paul Cyr, Brandon Longuet, Brian Nguyen
Spring 2024 Capstone Team
+ Kyle Shores
Spring 2024 Capstone Sponsor Representative +
+
+
+
+
+ Spring 2024 Capstone Team
+ Kyle Shores
Spring 2024 Capstone Sponsor Representative +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default App;
diff --git a/frontend/src/webPages/Settings/settings.css b/frontend/src/webPages/Settings/settings.css
new file mode 100644
index 0000000..302b045
--- /dev/null
+++ b/frontend/src/webPages/Settings/settings.css
@@ -0,0 +1,41 @@
+.layoutSettings {
+ height: 100vh;
+ width: 100vw;
+
+ display: grid;
+ grid:
+ "L1Settings M1 R1" 1fr
+ "L2 M2 R2" 1fr
+ "L3 M3Settings R3" 1fr
+ "L4 M4 R4" 1fr
+ "L5 M5 R5" 1fr
+ "L6 M6 R6" 1fr
+ "L7 M7 R7" 1fr
+ "L8 M8 R8" 1fr
+ "L9Settings M9 R9" 1fr
+ / 1fr 1fr 1fr;
+ gap: 8px;
+ background-color: #C3D7EE;
+ }
+
+
+
+ .L1Settings { grid-area: L1Settings; grid-column: span 3;}
+ .M1 { grid-area: M1; }
+ .R1 { grid-area: R1; }
+ .L2 { grid-area: L2; }
+ .M2 { grid-area: M2; }
+ .R2 { grid-area: R2; }
+ .L3 { grid-area: L3; }
+ .M3Settings { grid-area: M3Settings; }
+ .R3 { grid-area: R3; }
+ .L4 { grid-area: L4; }
+ .M4 { grid-area: M4; }
+ .R4 { grid-area: R4; }
+ .L5 { grid-area: L5; }
+ .M5 { grid-area: M5; }
+ .R5 { grid-area: R5; }
+ .L9Settings { grid-area: L9Settings; grid-column: span 3;}
+
+
+
\ No newline at end of file
diff --git a/frontend/src/webPages/Settings/settings.tsx b/frontend/src/webPages/Settings/settings.tsx
new file mode 100644
index 0000000..3c63989
--- /dev/null
+++ b/frontend/src/webPages/Settings/settings.tsx
@@ -0,0 +1,42 @@
+import { useNavigate } from 'react-router-dom';
+import Button from "@mui/material/Button";
+import ButtonGroup from '@mui/material/ButtonGroup';
+import { Header, Footer } from '../Components/HeaderFooter';
+
+import "./settings.css"
+
+ const Settings = () => {
+ const navigate = useNavigate();
+ const handleClick = () => navigate('/LoggedIn');
+
+ const style = {
+ height: '75px',
+ width: '500px',
+ };
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+