adding inf run page

datakind · Jan 30, 2025 · a3ff4e9 · a3ff4e9
1 parent 746e713
commit a3ff4e9
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 26 deletions.
diff --git a/resources/js/Components/Steppers.jsx b/resources/js/Components/Steppers.jsx
@@ -1,15 +1,16 @@
 import React from 'react';
+import classNames from 'classnames';
 
-const Steppers = ({ currentStep }) => {
-    const steps = [
-        { label: 'Upload data', step: 1 },
-        { label: 'Data validation', step: 2 },
-        { label: 'Save', step: 3 },
-    ];
 
+// Pass in the steps and styling so this can be used for multiple pages.
+const Steppers = ({ currentStep, stepsDict, className }) => {
+
+if (stepsDict == undefined ) {
+    return;
+}
     return (
-        <div className="flex justify-center pt-32 pb-24">
-            {steps.map((step, index) => (
+        <div className={classNames(className,"flex justify-center")}>
+            {stepsDict.map((step, index) => (
                 <div key={step.step} className="flex flex-col items-center mx-12 relative">
                     <div
                         className={`rounded-full w-8 h-8 flex items-center justify-center border-2 
@@ -20,7 +21,7 @@ const Steppers = ({ currentStep }) => {
                     <span className="text-base font-medium text-semibold text-center mt-2 text-black">
                         {step.label}
                     </span>
-                    {index < steps.length - 1 && (
+                    {index < stepsDict.length - 1 && (
                         <div className="h-[2px] w-20 absolute top-1/2 -translate-y-1/2 left-[calc(50%+6rem)] -translate-x-1/2 bg-gray-300"></div>
                     )}
                 </div>

diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
@@ -29,6 +29,12 @@ export default function FileUpload() {
     const [validationResults, setValidationResults] = useState({});
     const [progress, setProgress] = useState(0);
 
+    const steps = [
+        { label: 'Upload data', step: 1 },
+        { label: 'Data validation', step: 2 },
+        { label: 'Save', step: 3 },
+    ];
+
     // Progress as a percentage.
     const renderProcessingBar = (progress) => {
         return (<ProgressBar className="flex" progressMsg="Validation in progress..." amt={progress}></ProgressBar>)
@@ -319,7 +325,7 @@ const renderUpload = (files, fileStatus) => {
         >
     <div className="w-full flex flex-col" id="main_area">
     <HeaderLabel className="pl-12" iconObj={<PlusCircleIcon aria-hidden="true" className="size-6 shrink-0" />} majorTitle="Actions" minorTitle="Upload Data"></HeaderLabel>
-        <Steppers currentStep={currentStep} />
+        <Steppers currentStep={currentStep} stepsDict={steps} className="pt-32 pb-12" />
 
 {(currentStep == 1) ? 
 (renderUpload(files, fileStatus)) :

diff --git a/resources/js/Pages/RunInference.jsx b/resources/js/Pages/RunInference.jsx
@@ -1,9 +1,18 @@
 import React, { useState, ChangeEvent, useEffect } from 'react';
 import AppLayout from '@/Layouts/AppLayout';
 import axios from 'axios';
+import Steppers from '@/Components/Steppers';
+import HeaderLabel from '@/Components/HeaderLabel';
+import {
+  PlusCircleIcon,
+} from '@heroicons/react/24/outline';
+import { Link } from '@inertiajs/react';
 
-// Skeleton for the inference run trigger.
 export default function RunInference() {
+    const [currentStep, setCurrentStep] = useState(1);
+    const steps = [
+        { label: 'Start Prediction', step: 1 }
+    ];
 
     const triggerInference = () => {
         document.getElementById("result_area").innerHTML = "Creating inference run...";
@@ -19,22 +28,37 @@ export default function RunInference() {
                 </h2>
             )}
         >
-            <div className="py-12">
-                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
-                    <div id="info_area">
-                    Triggers an inference run for the one sample model we have.
-                    </div>
-                    <button id="button_content"
-                        onClick={triggerInference}
-                        className="bg-gray-200 text-gray-700 py-2 px-3 rounded-lg mb-4"
-                    >
-                        Run Inference
-                    </button>
-                    <div id="result_area">
-                    </div>
-                    </div>
+           <div className="w-full flex flex-col" id="main_area">
+    <HeaderLabel className="pl-12" iconObj={<PlusCircleIcon aria-hidden="true" className="size-6 shrink-0" />} majorTitle="Actions" minorTitle="Start Prediction"></HeaderLabel>
+        <Steppers currentStep={currentStep} stepsDict={steps} className="pt-32 pb-12" />
+                <div className="flex flex-col items-center justify-center w-full">
+        <div className="flex">For the most up-to-date SST predictions we recommend starting a new prediction for each semester.</div>
+    <div className="flex pb-6">Select the model and batch that you would like to run a prediction on.</div>
+    <div className="flex py-3 font-bold">Step 1: Please select an existing batch or import new data.</div>
+<div className="flex flex-row gap-x-6 w-full justify-center">
+        <select className="flex bg-white border border-gray-200 text-gray-700 py-2 px-6 mb-4 w-1/4 rounded-lg focus:outline-none focus:border-gray-500" id="batch-id">
+          <option>Batch 1</option>
+          <option>Batch 2</option>
+        </select>
+        <span className="text-black font-bold flex">or</span>
+        <Link
+            href={route('file-upload')}
+            as="button"
+            className="flex border border-[#f79222] text-[#f79222] bg-white font-semibold py-2 px-6 mb-4 rounded-lg">
+             Upload Data
+        </Link>
+</div>
+    <div className="flex py-3 font-bold">Step 2: Please select a model.</div>
+    <select className="flex bg-white border border-gray-200 text-gray-700 w-1/2 py-2 px-6 mb-4 rounded-lg focus:outline-none focus:border-gray-500" id="model-id">
+          <option>Model 1</option>
+          <option>Model 2</option>
+    </select>
+<div className="flex w-full justify-end items-end pr-48 pt-12">
+        <button id="button_content" onClick={triggerInference}  
+        className="px-6 bg-[#f79222] text-white font-semibold py-2 px-3 rounded-lg mb-4">Generate Predictions</button>
+    </div>
             </div>
-
+</div>
         </AppLayout>
     );
 }