Merge pull request #143 from TRI-AMDD/pradeepUI

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

ui/.eslintrc.cjs

@@ -19,6 +19,7 @@ module.exports = {
   },
   plugins: ['react-refresh', 'prettier'],
   rules: {
+    "prettier/prettier": "error",
     'react-refresh/only-export-components': [
       'warn',
       { allowConstantExport: true },

ui/.prettierrc

@@ -0,0 +1,6 @@
+{
+  "printWidth": 120,
+  "singleQuote": true,
+  "tabWidth": 4,
+  "trailingComma": "none"
+}

ui/package.json

@@ -8,6 +8,7 @@
     "build": "tsc --noEmit && vite build",
     "build-stage": "tsc --noEmit && vite build --mode staging",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives",
+    "lint-fix": "eslint --fix src --ext ts,tsx .",
     "test": "vitest",
     "coverage": "vitest run --coverage",
     "preview": "vite preview",

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 />} />

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/components/DataViewer/Graph/ElectronicChemicalPotentialInput/ElectronicChemicalPotentialInput.tsx

@@ -42,7 +42,7 @@ const ElectronicChemicalPotentialInput = ({ onChange, value }: ECPInputProps) =>
 
     return (
         <TextField
-            id='ecp-input'
+            id="ecp-input"
             inputRef={inputRef}
             variant="filled"
             className={styles.textFieldContainer}

ui/src/components/DataViewer/Graph/GraphHeaders/GraphHeaders.tsx

@@ -22,8 +22,8 @@ const GraphHeaders = () => {
                     <Tooltip
                         title={
                             <span>
-                                The ICSD-derived reduction <br /> potential ranges at which <br /> each oxidation state is
-                                likely <br /> to be observed
+                                The ICSD-derived reduction <br /> potential ranges at which <br /> each oxidation state
+                                is likely <br /> to be observed
                             </span>
                         }
                     >

ui/src/components/PageWrapper/PageWrapper.tsx

@@ -11,9 +11,7 @@ const PageWrapper = ({ children }: PageWrapperProps) => {
     return (
         <div className={styles.App}>
             <Header />
-            <Container maxWidth="lg">
-                {children}
-            </Container>
+            <Container maxWidth="lg">{children}</Container>
             <Footer />
         </div>
     );

ui/src/custom.d.ts

@@ -4,4 +4,3 @@ declare module '*.svg' {
     const src: string;
     export default src;
 }
-

ui/src/features/export-graph/export-graph-button.tsx

@@ -11,7 +11,6 @@ import { InitalExportGraphSettingsState } from '@/models/ExportGraphModel';
 import { BAR_HEIGHT, renderExportGraph } from './render-export-graph';
 import keyImage from '@/Assets/Images/graphKey.svg';
 
-
 function fileSaveAs(uri: string, filename: string) {
     const link = document.createElement('a');
 

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,24 @@ interface InputSectionProps {
     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

ui/src/main.tsx

@@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-)
+    <React.StrictMode>
+        <App />
+    </React.StrictMode>
+);

ui/src/pages/Home/Home.tsx

@@ -6,11 +6,16 @@ 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 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,6 +47,7 @@ function Home() {
                         handleFileUpload={handleFileUpload}
                         handleSubmitClick={handleSubmitClick}
                         handleEnterClick={handleEnterClick}
+                        inputvalue={inputText}
                     />
                 </Grid>
             </Grid>