Skip to content

Commit

Permalink
add output view of prediction pg
Browse files Browse the repository at this point in the history
  • Loading branch information
@crysg
crysg committed Jan 30, 2025
1 parent a3ff4e9 commit ffeb43b
Show file tree
Hide file tree
Showing 4 changed files with 76 additions and 58 deletions.
13 changes: 7 additions & 6 deletions resources/js/Components/BigDangerAlert.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,17 @@ import React from 'react';
import {
XCircleIcon,
} from '@heroicons/react/24/solid';
import classNames from 'classnames';

export default function BigDangerAlert({ mainMsg, msgDict, excludeValue, className }) {
if (mainMsg == undefined || mainMsg == "") {
return null;
}

return (<div className={className}>
<div className="flex w-full rounded-lg border-l-[6px] border-red bg-red-50 px-7 py-8 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.08)] md:p-9">
return (
<div className={classNames(className,
"flex w-full rounded-lg border-l-[6px] border-red bg-red-50 px-7 py-8 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.08)] md:p-9",
)}>
<div className="mr-5 flex h-[34px] w-full max-w-[34px] items-center justify-center rounded-lg bg-red">
<svg
width="18"
Expand All @@ -35,7 +38,7 @@ export default function BigDangerAlert({ mainMsg, msgDict, excludeValue, classNa
</defs>
</svg>
</div>
<div className="w-full">
<div className="flex w-full flex-col h-fit">
<h5 className="mb-3 text-lg font-semibold text-red-900">
{mainMsg}
</h5>
Expand All @@ -49,8 +52,6 @@ export default function BigDangerAlert({ mainMsg, msgDict, excludeValue, classNa
) : (<></>)}
</ul>
</div>
</div>

</div>);
</div>);
}

14 changes: 7 additions & 7 deletions resources/js/Components/BigSuccessAlert.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,15 @@ import React from 'react';
import {
CheckCircleIcon,
} from '@heroicons/react/24/solid';
import classNames from 'classnames';

export default function SuccessAlert({ mainMsg, msgDetails, className }) {
if (mainMsg == undefined || mainMsg == "") {
return null;
}
return (<div className={className}>
<div className="border-green bg-[#DAF8E6] flex w-full rounded-lg border-l-[6px] px-7 py-8 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.08)] md:p-9">
return (<div className={classNames(className,
"border-green bg-[#DAF8E6] w-full flex rounded-lg border-l-[6px] px-7 py-8 shadow-[0px_2px_10px_0px_rgba(0,0,0,0.08)] md:p-9",
)}>
<div className="bg-green mr-5 flex h-[34px] w-full max-w-[34px] items-center justify-center rounded-lg">
<svg
width="18"
Expand All @@ -34,15 +36,13 @@ export default function SuccessAlert({ mainMsg, msgDetails, className }) {
</defs>
</svg>
</div>
<div className="w-full">
<h5 className="mb-3 text-lg font-semibold text-[#004434]">
<div className="flex flex-col h-fit">
<h5 className="flex text-lg font-semibold text-[#004434]">
{mainMsg}
</h5>
<p className="text-base leading-relaxed text-gray-800">
<p className="flex text-base leading-relaxed text-gray-800">
{msgDetails}
</p>
</div>
</div>

</div>);
}
5 changes: 0 additions & 5 deletions resources/js/Pages/Dashboard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,6 @@ export default function Dashboard() {
DEBUGGING USE: view components:
<BigDangerAlert mainMsg="hello"></BigDangerAlert>
<BigSuccessAlert mainMsg="hello" msgDetails="hellohello"></BigSuccessAlert>
<SuccessAlert className="flex" errDict={[]} mainMsg="Submission can be uploaded!"></SuccessAlert>
<DangerAlert className="flex" errDict={{name:"key", val:"value"}} mainMsg="There were errors with your submission:"></DangerAlert>
<HeaderLabel className="flex" iconObj={<PlusCircleIcon aria-hidden="true" className="size-6 shrink-0" />} majorTitle="Actions" minorTitle="Upload Data"></HeaderLabel>

<ProgressBar className="flex" progressMsg="Validation in progress..." amt="50"></ProgressBar>
</div>
</div>
</AppLayout>
Expand Down
102 changes: 62 additions & 40 deletions resources/js/Pages/RunInference.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,58 +7,80 @@ import {
PlusCircleIcon,
} from '@heroicons/react/24/outline';
import { Link } from '@inertiajs/react';
import BigSuccessAlert from '@/Components/BigSuccessAlert';
import BigDangerAlert from '@/Components/BigDangerAlert';

export default function RunInference() {
const [currentStep, setCurrentStep] = useState(1);
const [triggeredRun, setTriggeredRun] = useState(false);
const [result, setResult] = useState("");
const steps = [
{ label: 'Start Prediction', step: 1 }
];

const triggerInference = () => {
document.getElementById("result_area").innerHTML = "Creating inference run...";
setTriggeredRun(true);
setResult("");
// ADD DATABRICKS WEBHOOK CALL HERE
}


const renderResults = (result) => {
let msg = "Prediction initiated!";
if (result !== "") {
msg = "[ERROR] Prediction request failed with: " + result;
return (<div className="flex px-36"><BigDangerAlert mainMsg={msg}></BigDangerAlert></div>)
}
return (
<div className="flex px-36"><BigSuccessAlert mainMsg={msg} msgDetails="You will get an email notifying you of the new dashboard results, once they're ready."></BigSuccessAlert></div>)
}

const renderPredictionParamInputs = (currentStep) => {
return (
<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>
)
}
// The title in AppLayout needs to match the nav bar label.
return (
<AppLayout
title="Start Prediction"
renderHeader={() => (
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Run Inference
</h2>
)}
>
<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>
<AppLayout
title="Start Prediction"
renderHeader={() => (
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Run Inference
</h2>
)}
>
<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>
{(triggeredRun) ? (renderResults(result)) : (renderPredictionParamInputs(currentStep))}
</div>
</AppLayout>
);
}

0 comments on commit ffeb43b

Please sign in to comment.