feature: create general Alert component, update set institution alerts

app/Helpers/InstitutionHelper.php

@@ -59,8 +59,10 @@ public static function GetInstitution(Request $request)
         if ($inst !== '') {
             $full = self::fetchInstitutionById($request, $inst);
             session(['institution' => $full ?? ['inst_id' => $inst]]);
+
             return [$inst, ''];
         }
+
         return ['', ''];
     }
 

app/Http/Middleware/RequireInstitution.php

@@ -62,7 +62,7 @@ public function handle(Request $request, Closure $next): Response
             }
         }
 
-        [$inst, $instErr] = InstitutionHelper::GetInstitution($request);
+        [$inst] = InstitutionHelper::GetInstitution($request);
         if ($inst !== null && $inst !== '') {
             $institution = session('institution');
             if (is_array($institution) && ! empty($institution['inst_id'] ?? '')) {
@@ -74,11 +74,10 @@ public function handle(Request $request, Closure $next): Response
             return $next($request);
         }
 
-        $message = InstitutionHelper::SET_INST_REQUIRED_MESSAGE;
         if ($request->expectsJson()) {
-            return response()->json(['error' => $message], 401);
+            return response()->json(['error' => 'Institution required.'], 401);
         }
 
-        return redirect()->route('set-inst', ['message' => $message]);
+        return redirect()->route('set-inst');
     }
 }

resources/js/Components/Alert.jsx

@@ -0,0 +1,97 @@
+import React from 'react';
+import classNames from 'classnames';
+import {
+  CheckCircleIcon,
+  ExclamationTriangleIcon,
+  InformationCircleIcon,
+  XCircleIcon,
+} from '@heroicons/react/24/solid';
+
+const VARIANTS = {
+  danger: {
+    Icon: XCircleIcon,
+    border: 'border-red',
+    surface: 'bg-red-50',
+    iconWrap: 'bg-red',
+    title: 'text-red-900',
+    item: 'text-red-800',
+  },
+  warning: {
+    Icon: ExclamationTriangleIcon,
+    border: 'border-amber-500',
+    surface: 'bg-amber-50',
+    iconWrap: 'bg-amber-500',
+    title: 'text-amber-900',
+    item: 'text-amber-800',
+  },
+  info: {
+    Icon: InformationCircleIcon,
+    border: 'border-sky-500',
+    surface: 'bg-sky-50',
+    iconWrap: 'bg-sky-500',
+    title: 'text-sky-900',
+    item: 'text-sky-800',
+  },
+  success: {
+    Icon: CheckCircleIcon,
+    border: 'border-green-600',
+    surface: 'bg-green-50',
+    iconWrap: 'bg-green-600',
+    title: 'text-green-900',
+    item: 'text-green-800',
+  },
+};
+
+export default function Alert({
+  variant = 'info',
+  mainMsg,
+  msgDict,
+  excludeValue,
+  className,
+}) {
+  if (mainMsg == undefined || mainMsg == '') {
+    return null;
+  }
+
+  const v = VARIANTS[variant] ?? VARIANTS.info;
+  const Icon = v.Icon;
+
+  return (
+    <div
+      className={classNames(
+        className,
+        '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',
+        v.border,
+        v.surface,
+      )}
+    >
+      <div
+        className={classNames(
+          'mr-5 flex h-[34px] w-full max-w-[34px] items-center justify-center rounded-lg',
+          v.iconWrap,
+        )}
+      >
+        <Icon className="size-[18px] text-white" aria-hidden />
+      </div>
+      <div className="flex h-fit w-full flex-col">
+        <h5 className={classNames('mb-3 text-lg font-semibold', v.title)}>
+          {mainMsg}
+        </h5>
+        <ul className="list-inside list-disc">
+          {msgDict !== undefined && Object.keys(msgDict).length !== 0
+            ? Object.entries(msgDict).map(([k, val]) =>
+                val !== excludeValue ? (
+                  <li
+                    className={classNames('text-base leading-relaxed', v.item)}
+                    key={k}
+                  >
+                    <span className="font-semibold">{k}:</span> {val}
+                  </li>
+                ) : null,
+              )
+            : null}
+        </ul>
+      </div>
+    </div>
+  );
+}

resources/js/Pages/Dashboard.jsx

@@ -1,17 +1,11 @@
 import axios from 'axios';
 import React, { useEffect, useState } from 'react';
 import { Chart } from 'react-google-charts';
-
 import Spinner from '@/Components/Spinner';
 import AppLayout from '@/Layouts/AppLayout';
 import ModelRunHistory from '@/Components/ModelRunHistory';
-import HeaderLabel from '@/Components/HeaderLabel';
-import ErrorAlert from '@/Components/ErrorAlert';
-import classNames from 'classnames';
+import Alert from '@/Components/Alert';
 import { formatModelName } from '@/utils/stringUtils';
-
-import { ChartBarIcon, ArrowUpTrayIcon } from '@heroicons/react/24/outline';
-import Button from '@/Components/Landing/Button';
 import PageHeading from '@/Components/PageHeading';
 
 const histogramOptions = {
@@ -212,10 +206,11 @@ export default function Dashboard({ modelname }) {
             </div>
           ) : error != null &&
             !(error.message == 'NO_MODELS' || error.message == 'NO_RUNS') ? (
-            <ErrorAlert
+            <Alert
+              variant="danger"
               mainMsg={'Error: ' + error.message}
               className="ml-24 mr-24 flex h-fit"
-            ></ErrorAlert>
+            />
           ) : (
             <div
               className="flex w-full flex-col items-center"
@@ -229,7 +224,7 @@ export default function Dashboard({ modelname }) {
               </div>
 
               {error != null &&
-                (error.message == 'NO_MODELS' || error.message == 'NO_RUNS') ? (
+              (error.message == 'NO_MODELS' || error.message == 'NO_RUNS') ? (
                 <>
                   <div className="flex w-full flex-row justify-between pl-12 pr-12 pt-12">
                     <div className="flex flex-row items-center justify-center gap-x-2">
@@ -264,7 +259,10 @@ export default function Dashboard({ modelname }) {
                     </div>
                   )}
                   <div className="mx-auto w-full max-w-[1057px]">
-                    <ModelRunHistory runInfos={[]} modelName={modelInfo?.name || ''} />
+                    <ModelRunHistory
+                      runInfos={[]}
+                      modelName={modelInfo?.name || ''}
+                    />
                   </div>
                 </>
               ) : (
@@ -277,7 +275,7 @@ export default function Dashboard({ modelname }) {
                       <div className="flex">Run Time:</div>
                       <div className="flex">
                         {runDatesToJobDict == undefined ||
-                          Object.keys(runDatesToJobDict).length == 0 ? (
+                        Object.keys(runDatesToJobDict).length == 0 ? (
                           <select
                             className="px-30 flex items-center justify-center rounded-lg border border-gray-200 bg-white py-2 text-gray-700 focus:border-gray-500 focus:outline-none"
                             id="run_time"

resources/js/Pages/EdaDashboard.jsx

@@ -615,23 +615,14 @@ const raceByPellStatusOptions = data => {
 };
 
 export default function EdaDashboard({ batch_id: propBatchId }) {
-  // Get institution and set-inst message from Inertia shared props
-  const { institution, set_inst_required_message } = usePage().props;
+  const { institution } = usePage().props;
   const inst_id = institution?.inst_id;
-
   const [batchInfo, setBatchInfo] = useState(null);
   const [batchLoading, setBatchLoading] = useState(true);
   const [edaData, setEdaData] = useState(null);
   const [loading, setLoading] = useState(false); // Start false, will be set when batch_id is resolved
   const [error, setError] = useState(null);
 
-  useEffect(() => {
-    if (!inst_id) {
-      const msg = set_inst_required_message ?? 'Set an institution to proceed.';
-      router.visit(`/set-inst?message=${encodeURIComponent(msg)}`);
-    }
-  }, [inst_id, set_inst_required_message]);
-
   // Fetch batch info - either from propBatchId or get most recent
   useEffect(() => {
     const fetchBatchInfo = async () => {

resources/js/Pages/FileUpload.jsx

@@ -12,7 +12,7 @@ import DangerAlert from '@/Components/DangerAlert';
 import Steppers from '@/Components/Steppers';
 import classNames from 'classnames';
 import BigSuccessAlert from '@/Components/BigSuccessAlert';
-import ErrorAlert from '@/Components/ErrorAlert';
+import Alert from '@/Components/Alert';
 import Spinner from '@/Components/Spinner';
 
 /** Keep in sync with BACKEND_HTTP_VALIDATE_TIMEOUT_SECONDS (seconds) on the Laravel proxy. */
@@ -100,7 +100,7 @@ export default function FileUpload() {
         '[ERROR] Prediction trigger failed: ' + predictionResults['error'];
       return (
         <div className="flex flex-col pl-24 pr-24">
-          <ErrorAlert mainMsg={msg}></ErrorAlert>
+          <Alert variant="danger" mainMsg={msg} />
         </div>
       );
     }
@@ -125,7 +125,7 @@ export default function FileUpload() {
       let msg = '[ERROR] Batch creation failed: ' + batchCreationResult;
       return (
         <div className="flex flex-col pl-24 pr-24">
-          <ErrorAlert mainMsg={msg}></ErrorAlert>
+          <Alert variant="danger" mainMsg={msg} />
           <div className="flex w-full flex-row items-end justify-between pt-48">
             <Link
               href={route('file-upload')}
@@ -170,11 +170,12 @@ export default function FileUpload() {
     if (Object.values(validationResults).find(element => element !== 'ok')) {
       return (
         <div className="flex flex-col pl-24 pr-24">
-          <ErrorAlert
+          <Alert
+            variant="danger"
             mainMsg="[ERROR] The following files must be re-uploaded"
             msgDict={validationResults}
             excludeValue="ok"
-          ></ErrorAlert>
+          />
           <div className="flex w-full flex-row items-end justify-between pt-48">
             <Link
               href={route('file-upload')}

resources/js/Pages/RunInference.jsx

@@ -6,7 +6,7 @@ import HeaderLabel from '@/Components/HeaderLabel';
 import { PlusCircleIcon } from '@heroicons/react/24/outline';
 import { Link } from '@inertiajs/react';
 import BigSuccessAlert from '@/Components/BigSuccessAlert';
-import ErrorAlert from '@/Components/ErrorAlert';
+import Alert from '@/Components/Alert';
 
 export default function RunInference() {
   const [currentStep, setCurrentStep] = useState(1);
@@ -99,7 +99,7 @@ export default function RunInference() {
       msg = '[ERROR] Prediction request failed with: ' + error;
       return (
         <div className="flex px-36">
-          <ErrorAlert mainMsg={msg}></ErrorAlert>
+          <Alert variant="danger" mainMsg={msg} />
         </div>
       );
     }