Fix/refactor into more components

src/App.css

@@ -30,34 +30,6 @@
   margin-top: 36px;
 }
 
-.status-container {
-  display: flex;
-  flex-direction: row;
-  gap: 30px;
-  border: 1px solid #D3D3D3;
-  padding: 10px;
-  border-radius: 10px;
-  padding-left: 20px;
-}
-
-.status-row {
-  display: flex;
-  flex-direction: row;
-  gap: 20px;
-  align-items: stretch;
-}
-
-.status-bar {
-  flex: 1;
-  display: flex;
-  align-items: center;
-}
-
-.download-button {
-  height: auto;
-  min-height: 48px;
-}
-
 .footer {
   height: 128px;
   background-color: #ffffff;

src/App.tsx

@@ -1,22 +1,16 @@
 import { useState } from "react";
 import { v4 as uuidv4 } from 'uuid';
-import { Layout, Typography, Button } from "antd";
-import "./App.css";
+import { Layout, Typography } from "antd";
 import { getResultPath, getDocById, getJobStatus, addRecipe } from "./utils/firebase";
 import { getFirebaseRecipe, jsonToString } from "./utils/recipeLoader";
-import {
-    getSubmitPackingUrl,
-    JOB_STATUS,
-} from "./constants/aws";
-import {
-    FIRESTORE_COLLECTIONS,
-    FIRESTORE_FIELDS,
-} from "./constants/firebase";
+import { getSubmitPackingUrl, JOB_STATUS } from "./constants/aws";
+import { FIRESTORE_COLLECTIONS, FIRESTORE_FIELDS } from "./constants/firebase";
 import { SIMULARIUM_EMBED_URL } from "./constants/urls";
-import { downloadOutputs } from "./utils/aws";
 import PackingInput from "./components/PackingInput";
 import Viewer from "./components/Viewer";
 import ErrorLogs from "./components/ErrorLogs";
+import StatusBar from "./components/StatusBar";
+import "./App.css";
 
 const { Header, Content, Footer } = Layout;
 const { Link } = Typography;
@@ -27,7 +21,6 @@ function App() {
     const [jobLogs, setJobLogs] = useState<string>("");
     const [resultUrl, setResultUrl] = useState<string>("");
     const [runTime, setRunTime] = useState<number>(0);
-    const [isDownloading, setIsDownloading] = useState<boolean>(false);
 
     let start = 0;
 
@@ -63,7 +56,7 @@ function App() {
             const recipeJson = recipeToFirebase(recipeString, firebaseRecipe, recipeId);
             try {
                 await addRecipe(recipeId, recipeJson);
-            } catch(e) {
+            } catch (e) {
                 setJobStatus(JOB_STATUS.FAILED);
                 setJobLogs(String(e));
                 return;
@@ -121,16 +114,9 @@ function App() {
         const logStr: string = await getDocById(FIRESTORE_COLLECTIONS.JOB_STATUS, id);
         setJobLogs(logStr);
     };
-    const jobSucceeded = jobStatus == JOB_STATUS.DONE;
     const showLogs = jobStatus == JOB_STATUS.FAILED;
     const submitEnabled = (jobStatus == "" || jobStatus == JOB_STATUS.DONE || jobStatus == JOB_STATUS.FAILED);
 
-    const downloadResults = async (jobId: string) => {
-        setIsDownloading(true);
-        await downloadOutputs(jobId);
-        setIsDownloading(false);
-    }
-
     return (
         <div className="app-container">
             <Header className="header" style={{ justifyContent: "space-between" }}>
@@ -139,25 +125,7 @@ function App() {
             </Header>
             <Content className="content-container">
                 <PackingInput startPacking={startPacking} submitEnabled={submitEnabled} />
-                {jobStatus && (
-                    <div className="status-row">
-                        <div className="status-container status-bar">
-                            <div><b>Status</b> {jobStatus}</div>
-                            {jobSucceeded && runTime > 0 && (<div><b>Run time</b> {runTime} sec</div>)}
-                        </div>
-                        {jobSucceeded && (
-                            <Button 
-                                onClick={() => downloadResults(jobId)} 
-                                loading={isDownloading}
-                                color="primary"
-                                variant="filled"
-                                className="download-button"
-                            >
-                                Download Packing Result
-                            </Button>
-                        )}
-                    </div>
-                )}
+                {jobStatus && <StatusBar jobStatus={jobStatus} runTime={runTime} jobId={jobId} />}
                 {showLogs && <ErrorLogs errorLogs={jobLogs} getLogs={getLogs} />}
             </Content>
             {resultUrl && <Viewer resultUrl={resultUrl} />}

src/components/GradientInput/index.tsx

@@ -10,7 +10,7 @@ interface GradientStrength {
     default: number;
     min: number;
     max: number;
-}
+};
 
 interface GradientInputProps {
     displayName: string;
@@ -19,11 +19,10 @@ interface GradientInputProps {
     defaultValue: string;
     changeHandler: (changes: Dictionary<string | number>) => void;
     getCurrentValue: (path: string) => string | number | undefined;
-}
+};
 
 const GradientInput = (props: GradientInputProps): JSX.Element => {
     const { displayName, description, gradientOptions, defaultValue, changeHandler, getCurrentValue } = props;
-    const [displayGradientStrength, setDisplayGradientStrength] = useState<boolean>(true);
     const initialOption = gradientOptions.find(option => option.value === defaultValue);
     const initialGradientStrength: GradientStrength | undefined = initialOption && initialOption.strength_path ? {
         displayName: initialOption.strength_display_name || initialOption.display_name + " Strength",
@@ -34,7 +33,7 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
         max: initialOption.strength_max || 0.99,
     } : undefined;
     const [gradientStrengthData, setGradientStrengthData] = useState<GradientStrength | undefined>(initialGradientStrength);
-    const [sliderValue, setSliderValue] = useState<number>(initialGradientStrength ? initialGradientStrength.default : 0);
+    const [sliderValue, setSliderValue] = useState<number>(initialGradientStrength?.default || 0);
 
     const gradientSelected = (value: string) => {
         const selectedOption = gradientOptions.find(option => option.value === value);
@@ -49,7 +48,6 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
 
         // Display relevant strength slider if applicable
         if (selectedOption.strength_path) {
-            setDisplayGradientStrength(true);
             const currVal = getCurrentValue(selectedOption.strength_path) as number | undefined || selectedOption.strength_default || 0.01;
             const strengthData: GradientStrength = {
                 displayName: selectedOption.strength_display_name || selectedOption.display_name + " Strength",
@@ -62,10 +60,8 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
             setGradientStrengthData(strengthData);
             setSliderValue(strengthData.default);
         } else {
-            setDisplayGradientStrength(false);
             setGradientStrengthData(undefined);
         }
-
     }
 
     const handleStrengthChange = (value: number | null, path: string) => {
@@ -74,16 +70,17 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
         setSliderValue(roundedValue);
         changeHandler({[path]: Number((1 - roundedValue).toFixed(2))});
     };
-    
+
     const selectOptions = gradientOptions.map((option) => ({
         label: option.display_name,
         value: option.value,
     }));
+
     return (
         <div>
             <div className="input-switch">
                 <div className="input-label">
-                    <strong>{displayName} </strong>
+                    <strong>{displayName}</strong>
                     <small>{description}</small>
                 </div>
                 <Select
@@ -93,13 +90,14 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
                     style={{ width: 200, margin: '0 16px' }}
                 />
             </div>
-            {displayGradientStrength && gradientStrengthData && (
+            {gradientStrengthData && (
                 <div className="input-switch">
                     <div className="input-label">
                         <strong>{gradientStrengthData.displayName}</strong>
                         <small>{gradientStrengthData.description}</small>
                     </div>
                     <Slider
+                        id={gradientStrengthData.displayName}
                         min={gradientStrengthData.min}
                         max={gradientStrengthData.max}
                         onChange={(value) => handleStrengthChange(value, gradientStrengthData.path)}
@@ -108,6 +106,7 @@ const GradientInput = (props: GradientInputProps): JSX.Element => {
                         style={{ width: 100 }}
                     />
                     <InputNumber
+                        id={gradientStrengthData.displayName + " Input"}
                         min={gradientStrengthData.min}
                         max={gradientStrengthData.max}
                         value={sliderValue}

src/components/InputSwitch/index.tsx

@@ -1,8 +1,8 @@
 import { useState } from "react";
 import { Input, InputNumber, Select, Slider } from 'antd';
+import { Dictionary, GradientOption } from "../../types";
 import GradientInput from "../GradientInput";
 import "./style.css";
-import { Dictionary, GradientOption } from "../../types";
 
 interface InputSwitchProps {
     displayName: string;

src/components/JSONViewer/index.tsx

@@ -1,17 +1,18 @@
 import { Collapse, Input } from "antd";
+import { useState } from "react";
 import "./style.css";
 
 interface JSONViewerProps {
     title: string;
     content: string;
-    isVisible: boolean;
-    isEditable?: boolean;
-    onToggle: () => void;
-    onChange?: (value: string) => void;
+    isEditable: boolean;
+    onChange: (value: string) => void;
 }
 
 const JSONViewer = (props: JSONViewerProps): JSX.Element => {
-    const { title, content, isVisible, isEditable = false, onToggle, onChange } = props;
+    const { title, content, isEditable, onChange } = props;
+    const [viewContent, setViewContent] = useState<boolean>(true);
+
     if (!content) {
         return (<></>)
     }
@@ -22,7 +23,7 @@ const JSONViewer = (props: JSONViewerProps): JSX.Element => {
         children: isEditable ? (
             <Input.TextArea 
                 value={content} 
-                onChange={(e) => onChange?.(e.target.value)}
+                onChange={(e) => onChange(e.target.value)}
                 rows={14}
             />
         ) : (
@@ -34,8 +35,8 @@ const JSONViewer = (props: JSONViewerProps): JSX.Element => {
         <div className={`${title.toLowerCase()}-box`}>
             <Collapse 
                 items={items}
-                activeKey={isVisible ? ["1"] : []}
-                onChange={() => onToggle()}
+                activeKey={viewContent ? ["1"] : []}
+                onChange={() => setViewContent(!viewContent)}
             />
         </div>
     );

src/components/JSONViewer/style.css

@@ -1,5 +1,5 @@
 .recipe-box {
-  width: 100%;
+  width: 48%;
   margin-top: 10px;
 }
 

src/components/PackingInput/index.tsx

@@ -1,11 +1,10 @@
 import { useEffect, useState } from "react";
 import { Dictionary, EditableField, PackingInputs } from "../../types";
 import { getPackingInputsDict } from "../../utils/firebase";
-import { Button } from "antd";
 import { getFirebaseRecipe, jsonToString } from "../../utils/recipeLoader";
 import Dropdown from "../Dropdown";
 import JSONViewer from "../JSONViewer";
-import InputSwitch from "../InputSwitch";
+import RecipeForm from "../RecipeForm";
 import "./style.css";
 
 
@@ -20,7 +19,6 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
     const [selectedConfigId, setSelectedConfigId] = useState("");
     const [inputOptions, setInputOptions] = useState<Dictionary<PackingInputs>>({});
     const [recipeStr, setRecipeStr] = useState<string>("");
-    const [viewRecipe, setViewRecipe] = useState<boolean>(true);
     const [fieldsToDisplay, setFieldsToDisplay] = useState<EditableField[] | undefined>(undefined);
 
     useEffect(() => {
@@ -50,10 +48,6 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
         startPacking(selectedRecipeId, selectedConfigId, recipeStr);
     };
 
-    const toggleRecipe = () => {
-        setViewRecipe(!viewRecipe);
-    }
-
     const handleFormChange = (changes: Dictionary<string | number>) => {
         const recipeObj = JSON.parse(recipeStr);
         for (const [id, value] of Object.entries(changes)) {
@@ -105,51 +99,20 @@ const PackingInput = (props: PackingInputProps): JSX.Element => {
                 />
             </div>
             <div className="recipe-content">
-                <div className="recipe-json">
-                    <JSONViewer
-                        title="Recipe"
-                        content={recipeStr}
-                        isVisible={viewRecipe}
-                        isEditable={fieldsToDisplay === undefined}
-                        onToggle={toggleRecipe}
-                        onChange={setRecipeStr}
-                    />
-                </div>
-                <div className="recipe-form">
-                    {fieldsToDisplay && (
-                        <div className="input-container">
-                            <h3>Options</h3>
-                            {fieldsToDisplay.map((field) => (
-                                <InputSwitch
-                                    key={field.id}
-                                    displayName={field.name}
-                                    inputType={field.input_type}
-                                    dataType={field.data_type}
-                                    description={field.description}
-                                    defaultValue={field.default}
-                                    min={field.min}
-                                    max={field.max}
-                                    options={field.options}
-                                    id={field.path}
-                                    gradientOptions={field.gradient_options}
-                                    changeHandler={handleFormChange}
-                                    getCurrentValue={getCurrentValue}
-                                />
-                            ))}
-                        </div>
-                    )}
-                    {selectedRecipeId && (
-                        <Button
-                            onClick={runPacking}
-                            color="primary"
-                            variant="filled"
-                            disabled={!submitEnabled}
-                            style={{ width: '100%' }}
-                        >
-                            Pack!
-                        </Button>
-                    )}
-                </div>
+                <JSONViewer
+                    title="Recipe"
+                    content={recipeStr}
+                    isEditable={fieldsToDisplay === undefined}
+                    onChange={setRecipeStr}
+                />
+                <RecipeForm
+                    submitEnabled={submitEnabled}
+                    recipeId={selectedRecipeId}
+                    fieldsToDisplay={fieldsToDisplay}
+                    submitPacking={runPacking}
+                    changeHandler={handleFormChange}
+                    getCurrentValue={getCurrentValue}
+                />
             </div>
         </div>
     );

src/components/PackingInput/style.css

@@ -1,18 +1,3 @@
-.recipe-json {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 48%;
-}
-
-.recipe-form {
-  width: 48%;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  text-align: left;
-}
-
 .recipe-select {
   display: flex;
   white-space: nowrap;