Add option to submit input within URL so output is generated directly through load of URL

ui/src/App.tsx

@@ -21,6 +21,7 @@ const App = () => (
                     <Suspense fallback={<div>Loading...</div>}>
                         <Routes>
                             <Route path="/" element={<Home />} />
+                            <Route path="/:q" element={<Home/>} />
                             <Route path="/about-us" element={<AboutUs />} />
                             <Route path="/faq" element={<FAQ />} />
                             <Route path="/tutorial" element={<Tutorial />} />
@@ -32,4 +33,4 @@ const App = () => (
     </QueryClientProvider>
 );
 
-export default App;
+export default App;

ui/src/atoms/atoms.ts

@@ -25,6 +25,8 @@ export const structureWasUploadedAtom = atom<boolean>(false);
 
 export const uploadedFileNameAtom = atom<string>('');
 
+export const inputValueAtom = atom<string>('');
+
 export const oxidationDataAtom = atom<OxidationStatesAPI | null>(null);
 
 export const graphSliderPositionAtom = atom<number>(50);

ui/src/features/input-submission/input-hooks/use-inputs.tsx

@@ -1,4 +1,4 @@
-import { dataViewerStateAtom, structureWasUploadedAtom, uploadedFileNameAtom } from '@/atoms/atoms';
+import { dataViewerStateAtom, structureWasUploadedAtom, uploadedFileNameAtom, inputValueAtom } from '@/atoms/atoms';
 import useTable from '../../data-table/table-hooks/use-table';
 import { useAtom } from 'jotai';
 import { LoadingState } from '@/features/data-table/table-models/data-viewer-model';
@@ -10,6 +10,8 @@ const useInputs = () => {
     const [, setDataViewerState] = useAtom(dataViewerStateAtom);
     const [structureWasUploaded, setStructureWasUploaded] = useAtom(structureWasUploadedAtom);
 
+    const [inputvalue] = useAtom(inputValueAtom);
+
     const handleFileUpload = (
         event: React.ChangeEvent<HTMLInputElement>,
         setInputText: Dispatch<SetStateAction<string>>
@@ -61,6 +63,7 @@ const useInputs = () => {
         handleSubmitClick,
         handleEnterClick,
         structureWasUploaded,
+        inputvalue,
         uploadedFileName
     };
 };

ui/src/features/input-submission/input-section/input-section.test.tsx

@@ -6,7 +6,7 @@ import useInputs from '../input-hooks/use-inputs';
 test('chemical composition input renders', () => {
     const {
         result: {
-            current: { handleFileUpload, handleSubmitClick, handleEnterClick }
+            current: { handleFileUpload, handleSubmitClick, handleEnterClick, inputvalue }
         }
     } = renderHook(useInputs);
 
@@ -15,6 +15,7 @@ test('chemical composition input renders', () => {
             handleFileUpload={handleFileUpload}
             handleSubmitClick={handleSubmitClick}
             handleEnterClick={handleEnterClick}
+            inputvalue={inputvalue}
         />
     );
     const chemCompositionInputElem = screen.getByTestId('input-section-chemical-composition');
@@ -24,7 +25,7 @@ test('chemical composition input renders', () => {
 test('submit button is disabled when chemical composition input box is empty', () => {
     const {
         result: {
-            current: { handleFileUpload, handleSubmitClick, handleEnterClick }
+            current: { handleFileUpload, handleSubmitClick, handleEnterClick, inputvalue }
         }
     } = renderHook(useInputs);
 
@@ -33,6 +34,7 @@ test('submit button is disabled when chemical composition input box is empty', (
             handleFileUpload={handleFileUpload}
             handleSubmitClick={handleSubmitClick}
             handleEnterClick={handleEnterClick}
+            inputvalue={inputvalue}
         />
     );
 
@@ -46,7 +48,7 @@ test('submit button is disabled when chemical composition input box is empty', (
 test('submit button should be enabled when chemcial composition input is filled', async () => {
     const {
         result: {
-            current: { handleFileUpload, handleSubmitClick, handleEnterClick }
+            current: { handleFileUpload, handleSubmitClick, handleEnterClick, inputvalue }
         }
     } = renderHook(useInputs);
 
@@ -55,6 +57,7 @@ test('submit button should be enabled when chemcial composition input is filled'
             handleFileUpload={handleFileUpload}
             handleSubmitClick={handleSubmitClick}
             handleEnterClick={handleEnterClick}
+            inputvalue={inputvalue}
         />
     );
 
@@ -71,7 +74,7 @@ test('submit button should be enabled when chemcial composition input is filled'
 test('onSubmit function should be called with string in checmical composition input whe submit button is clicked', async () => {
     const {
         result: {
-            current: { handleFileUpload, handleEnterClick }
+            current: { handleFileUpload, handleEnterClick, inputvalue }
         }
     } = renderHook(useInputs);
 
@@ -81,6 +84,7 @@ test('onSubmit function should be called with string in checmical composition in
             handleFileUpload={handleFileUpload}
             handleSubmitClick={handleSubmitClick}
             handleEnterClick={handleEnterClick}
+            inputvalue={inputvalue}
         />
     );
 

ui/src/features/input-submission/input-section/input-section.tsx

@@ -1,7 +1,7 @@
 import { TextField, Button, Typography } from '@mui/material';
 import styles from './input-section.module.css';
 import UploadIcon from '@mui/icons-material/Upload';
-import React, { Dispatch, SetStateAction, useState } from 'react';
+import React, { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 const PLACEHOLDER_TEXT = 'ex. LiMn2O4';
 const LABEL_TEXT = 'Chemical Composition';
@@ -15,12 +15,20 @@
     handleEnterClick: (event: React.KeyboardEvent<HTMLInputElement>, inputText: string) => void;
 }
 
-const InputSection = ({ handleFileUpload, handleSubmitClick, handleEnterClick }: InputSectionProps) => {
-    const [inputText, setInputText] = useState('');
-
+const InputSection = ({ handleFileUpload, handleSubmitClick, handleEnterClick, inputvalue }: InputSectionProps & { inputvalue: string }) => {
+
+    const [inputText, setInputText] = useState(inputvalue||'');
+    if(inputText == null){
+        setInputText('')
+    }
     const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setInputText(event.target.value);
     };
+    useEffect(() => {
+        if(inputText != ''){
+        handleSubmitClick(inputText);
+        }
+    },[])
     return (
         <div className={styles.container}>
             <TextField
@@ -71,4 +79,4 @@
     );
 };
 
-export default InputSection;
+export default InputSection;

ui/src/pages/Home/Home.tsx

@@ -6,11 +6,17 @@ import GetStarted from '@/components/GetStarted/GetStarted';
 import InputSection from '@/features/input-submission/input-section/input-section';
 import DataViewer from '@/components/DataViewer/DataViewer';
 import PageWrapper from '@/components/PageWrapper/PageWrapper';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import useInputs from '@/features/input-submission/input-hooks/use-inputs';
+import { useLocation } from 'react-router-dom';
+
 
 function Home() {
-    const { handleFileUpload, handleSubmitClick, handleEnterClick } = useInputs();
+    const { handleFileUpload, handleSubmitClick, handleEnterClick} = useInputs();
+    const location = useLocation();
+    const param = new URLSearchParams(location.search);
+    const qparam = param.get('q');
+    const [inputText] = useState<string>(qparam||'');
 
     useEffect(() => {
         document.title = 'Oxidation State Analyzer';
@@ -42,12 +48,14 @@ function Home() {
                         handleFileUpload={handleFileUpload}
                         handleSubmitClick={handleSubmitClick}
                         handleEnterClick={handleEnterClick}
+                        inputvalue={inputText}
                     />
                 </Grid>
             </Grid>
             <DataViewer />
         </PageWrapper>
+
     );
 }
 
-export default Home;
+export default Home;