Skip to content

Commit a3ff4e9

Browse files
crysgcrysg
committed
adding inf run page
1 parent 746e713 commit a3ff4e9

File tree

3 files changed

+57
-26
lines changed

3 files changed

+57
-26
lines changed

‎resources/js/Components/Steppers.jsx

Lines changed: 10 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,16 @@
11
import React from 'react';
2+
import classNames from 'classnames';
23

3-
const Steppers = ({ currentStep }) => {
4-
const steps = [
5-
{ label: 'Upload data', step: 1 },
6-
{ label: 'Data validation', step: 2 },
7-
{ label: 'Save', step: 3 },
8-
];
94

5+
// Pass in the steps and styling so this can be used for multiple pages.
6+
const Steppers = ({ currentStep, stepsDict, className }) => {
7+
8+
if (stepsDict == undefined ) {
9+
return;
10+
}
1011
return (
11-
<div className="flex justify-center pt-32 pb-24">
12-
{steps.map((step, index) => (
12+
<div className={classNames(className,"flex justify-center")}>
13+
{stepsDict.map((step, index) => (
1314
<div key={step.step} className="flex flex-col items-center mx-12 relative">
1415
<div
1516
className={`rounded-full w-8 h-8 flex items-center justify-center border-2
@@ -20,7 +21,7 @@ const Steppers = ({ currentStep }) => {
2021
<span className="text-base font-medium text-semibold text-center mt-2 text-black">
2122
{step.label}
2223
</span>
23-
{index < steps.length - 1 && (
24+
{index < stepsDict.length - 1 && (
2425
<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>
2526
)}
2627
</div>

‎resources/js/Pages/FileUpload.jsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,12 @@ export default function FileUpload() {
2929
const [validationResults, setValidationResults] = useState({});
3030
const [progress, setProgress] = useState(0);
3131

32+
const steps = [
33+
{ label: 'Upload data', step: 1 },
34+
{ label: 'Data validation', step: 2 },
35+
{ label: 'Save', step: 3 },
36+
];
37+
3238
// Progress as a percentage.
3339
const renderProcessingBar = (progress) => {
3440
return (<ProgressBar className="flex" progressMsg="Validation in progress..." amt={progress}></ProgressBar>)
@@ -319,7 +325,7 @@ const renderUpload = (files, fileStatus) => {
319325
>
320326
<div className="w-full flex flex-col" id="main_area">
321327
<HeaderLabel className="pl-12" iconObj={<PlusCircleIcon aria-hidden="true" className="size-6 shrink-0" />} majorTitle="Actions" minorTitle="Upload Data"></HeaderLabel>
322-
<Steppers currentStep={currentStep} />
328+
<Steppers currentStep={currentStep} stepsDict={steps} className="pt-32 pb-12" />
323329

324330
{(currentStep == 1) ?
325331
(renderUpload(files, fileStatus)) :

‎resources/js/Pages/RunInference.jsx

Lines changed: 40 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,18 @@
11
import React, { useState, ChangeEvent, useEffect } from 'react';
22
import AppLayout from '@/Layouts/AppLayout';
33
import axios from 'axios';
4+
import Steppers from '@/Components/Steppers';
5+
import HeaderLabel from '@/Components/HeaderLabel';
6+
import {
7+
PlusCircleIcon,
8+
} from '@heroicons/react/24/outline';
9+
import { Link } from '@inertiajs/react';
410

5-
// Skeleton for the inference run trigger.
611
export default function RunInference() {
12+
const [currentStep, setCurrentStep] = useState(1);
13+
const steps = [
14+
{ label: 'Start Prediction', step: 1 }
15+
];
716

817
const triggerInference = () => {
918
document.getElementById("result_area").innerHTML = "Creating inference run...";
@@ -19,22 +28,37 @@ export default function RunInference() {
1928
</h2>
2029
)}
2130
>
22-
<div className="py-12">
23-
<div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
24-
<div id="info_area">
25-
Triggers an inference run for the one sample model we have.
26-
</div>
27-
<button id="button_content"
28-
onClick={triggerInference}
29-
className="bg-gray-200 text-gray-700 py-2 px-3 rounded-lg mb-4"
30-
>
31-
Run Inference
32-
</button>
33-
<div id="result_area">
34-
</div>
35-
</div>
31+
<div className="w-full flex flex-col" id="main_area">
32+
<HeaderLabel className="pl-12" iconObj={<PlusCircleIcon aria-hidden="true" className="size-6 shrink-0" />} majorTitle="Actions" minorTitle="Start Prediction"></HeaderLabel>
33+
<Steppers currentStep={currentStep} stepsDict={steps} className="pt-32 pb-12" />
34+
<div className="flex flex-col items-center justify-center w-full">
35+
<div className="flex">For the most up-to-date SST predictions we recommend starting a new prediction for each semester.</div>
36+
<div className="flex pb-6">Select the model and batch that you would like to run a prediction on.</div>
37+
<div className="flex py-3 font-bold">Step 1: Please select an existing batch or import new data.</div>
38+
<div className="flex flex-row gap-x-6 w-full justify-center">
39+
<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">
40+
<option>Batch 1</option>
41+
<option>Batch 2</option>
42+
</select>
43+
<span className="text-black font-bold flex">or</span>
44+
<Link
45+
href={route('file-upload')}
46+
as="button"
47+
className="flex border border-[#f79222] text-[#f79222] bg-white font-semibold py-2 px-6 mb-4 rounded-lg">
48+
Upload Data
49+
</Link>
50+
</div>
51+
<div className="flex py-3 font-bold">Step 2: Please select a model.</div>
52+
<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">
53+
<option>Model 1</option>
54+
<option>Model 2</option>
55+
</select>
56+
<div className="flex w-full justify-end items-end pr-48 pt-12">
57+
<button id="button_content" onClick={triggerInference}
58+
className="px-6 bg-[#f79222] text-white font-semibold py-2 px-3 rounded-lg mb-4">Generate Predictions</button>
59+
</div>
3660
</div>
37-
61+
</div>
3862
</AppLayout>
3963
);
4064
}

0 commit comments

Comments
 (0)