wire up w/backend

datakind · Feb 25, 2025 · 60698fa · 60698fa
1 parent 3453c51
commit 60698fa
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 22 deletions.
diff --git a/app/Helpers/InstitutionHelper.php b/app/Helpers/InstitutionHelper.php
@@ -24,7 +24,7 @@ public static function checkSelfInst(Request $request) {
             'Cache-Control' => 'no-cache',
         ];
 
-        $resp = Http::withHeaders($headers)->get(env('BACKEND_URL').'/check_self');
+        $resp = Http::withHeaders($headers)->get(env('BACKEND_URL').'/check-self');
         if ($resp->getStatusCode() != 200 ) {
             $errMsg = json_decode($resp->getBody());
             if ($errMsg == null) {

diff --git a/resources/js/Layouts/AppLayout.jsx b/resources/js/Layouts/AppLayout.jsx
@@ -179,7 +179,6 @@ function dashboardNavHelper(item, modelData) {
     const fetchModels = async () => {
       try {
         const response = await axios.get('/models-api');
-        //let response = {"data":[{"name" : "model_a"},{"name" : "model_b"}]}; // testing
         let newNav = navAboveLine.map(item => dashboardNavHelper(item, response.data));
         setNavAboveLine(newNav);
       } catch (err) {

diff --git a/resources/js/Pages/Dashboard.jsx b/resources/js/Pages/Dashboard.jsx
@@ -171,7 +171,11 @@ export default function Dashboard({ modelname }) {
 
         }
       } catch (err) {
-        setError(err);
+        if (err.response != null && err.response.data != null && err.response.data.error != null) {          
+          setError(Error(err.response.data.error));
+        } else {
+          setError(err);
+        }
       } finally {
         setLoading(false);
       }
@@ -189,7 +193,11 @@ export default function Dashboard({ modelname }) {
         window.open(res.data, '_self');
       })
       .catch(err => {
-        setError(err);
+        if (err.response != null && err.response.data != null && err.response.data.error != null) {          
+          setError(Error(err.response.data.error));
+        } else {
+          setError(err);
+        }
       });
     }
 

diff --git a/resources/js/Pages/FileUpload.jsx b/resources/js/Pages/FileUpload.jsx
@@ -32,17 +32,18 @@ export default function FileUpload() {
   const [validationResults, setValidationResults] = useState({});
   const [batchName, setBatchName] = useState('');
   const [modelsList, setModelsList] = useState([]);
-  const [error, setError] = useState(null);
+  const [predictionResults, setPredictionResults] = useState(null);
+
 
   useEffect(() => {
     axios
       .get('/models-api')
       .then(res => {
         setModelsList(res.data);
-        console.log(JSON.stringify(res.data));
       })
       .catch(err => {
-        setError(JSON.stringify(err));
+        // TODO bubble out these errors
+        console.log("error with model fetch");
       });
   }, []);
 
@@ -61,8 +62,33 @@ export default function FileUpload() {
     );
   };
 
-  const renderBatchCreationResults = (batchCreationResult, startPrediction) => {
-    if (batchCreationResult == "") {
+  const renderPredictionResults = () => {
+    if (predictionResults == null) {
+      return <></>;
+    }
+    if (predictionResults["error"]) {
+      let msg = "[ERROR] Prediction trigger failed: " + predictionResults["error"];
+      return (
+        <div className="flex flex-col pr-24 pl-24">
+          <BigDangerAlert
+            mainMsg={msg}
+          ></BigDangerAlert>
+        </div>
+      );
+    }
+      return (
+      <div className="flex flex-col pr-24 pl-24 gap-y-24">
+        <BigSuccessAlert
+          mainMsg="Prediction initiated!"
+          msgDetails={"You will get an email notifying you of the new dashboard results, once they're ready. " + predictionResults["ok"]}
+        ></BigSuccessAlert>
+      </div>
+    );
+
+  };
+
+  const renderBatchCreationResults = (batchCreationResult, startPrediction) => {    
+  if (batchCreationResult == "") {
       return <></>;
     }
     if (batchCreationResult !== 'ok') {
@@ -83,23 +109,29 @@ export default function FileUpload() {
         </div>
       );
     }
-    return (
-      <div className="flex flex-col pr-24 pl-24">
+    if (!startPrediction) {
+      return (
+      <div className="flex flex-col pr-24 pl-24 gap-y-24">
         <BigSuccessAlert
           mainMsg="Batch creation successful!"
         ></BigSuccessAlert>
+        <div className="flex justify-end w-full items-end">
         <button
           id="button_content"
           onClick={() => setCurrentStep(4)}
           className={classNames(
             'opacity-100',
-            'px-6 bg-[#f79222] text-white font-semibold py-2 px-3 rounded-lg mb-4',
+            'px-6 bg-[#f79222] text-white font-semibold py-2 px-3 rounded-lg mb-4 justify-center flex',
           )}
         >
           Start Prediction
         </button>
+        </div>
       </div>
     );
+    }
+    setCurrentStep(4);
+    return <></>;
   };
 
   const renderValidationResults = validationResults => {
@@ -412,6 +444,7 @@ export default function FileUpload() {
       },
     })
       .then(res => {
+        setBatchName(batchConstructed);
         setBatchCreationResult("ok");
         setStartPrediction(startPred);
       })
@@ -571,9 +604,40 @@ export default function FileUpload() {
     );
   };
 
-  // TODO: This is an empty placeholder, it needs to be wired up with the backend.
-  const triggerPredictions = () => {
-    console.log("To Do: This needs to be wired up!");
+  const triggerPredictions = (event) => {
+    event.preventDefault();
+    // TODO: enable some way to indicate if it is pdp or not? is that required.
+    if (batchName == "") {
+      let res = {};
+      res["error"] = "No batch set.";
+      setPredictionResults(res);
+      return;
+    }
+    if (event.target.elements.model_name.value == "") {
+      let res = {};
+      res["error"] = "No model set.";
+      setPredictionResults(res);
+      return;
+    }
+    axios({
+      method: 'post',
+      url: '/run-inference/'+event.target.elements.model_name.value,
+      data: {
+        batch_name: batchName,
+        is_pdp: true,
+      },
+    }).then(res => {
+      let result = {};
+      result["ok"] = "Run ID: " + res.data.run_id;
+      setPredictionResults(result);
+      })
+      .catch(err => {
+      let res = {};
+      res["error"] = JSON.stringify(err);
+      setPredictionResults(res);
+
+      });
+      return;
   };
 
   const renderStartPrediction = () => {
@@ -681,7 +745,7 @@ export default function FileUpload() {
             : (currentStep === 3
               ? (batchCreationResult !== "" ? renderBatchCreationResults(batchCreationResult, startPrediction)
                 : renderSaveBatch())
-              : currentStep === 4 ? renderStartPrediction()
+              : currentStep === 4 ? ( predictionResults != null ? renderPredictionResults() : renderStartPrediction())
                 : null))}
       </div>
     </AppLayout>

diff --git a/resources/js/Pages/RunInference.jsx b/resources/js/Pages/RunInference.jsx
@@ -22,10 +22,13 @@ export default function RunInference() {
       .get('/models-api')
       .then(res => {
         setModelsList(res.data);
-        console.log(JSON.stringify(res.data));
       })
       .catch(err => {
-        setError(JSON.stringify(err));
+        if (err.response != null && err.response.data != null && err.response.data.error != null) {          
+          setError(Error(err.response.data.error));
+        } else {
+          setError(err);
+        }
       });
   }, []);
 
@@ -37,7 +40,11 @@ export default function RunInference() {
         console.log(JSON.stringify(res.data.batches));
       })
       .catch(err => {
-        setError(JSON.stringify(err));
+        if (err.response != null && err.response.data != null && err.response.data.error != null) {          
+          setError(Error(err.response.data.error));
+        } else {
+          setError(err);
+        }
       });
   }, []);
 
@@ -60,13 +67,15 @@ export default function RunInference() {
         is_pdp: true,
       },
     }).then(res => {
-      console.log("aaaaaaaaaaaaaaaaaaaaaaa1");
         setResult("Run ID: " + res.data.run_id);
         setTriggeredRun(true);
       })
       .catch(err => {
-      console.log("aaaaaaaaaaaaaaaaaaaaaaa2");
-        setError(JSON.stringify(err));
+      if (err.response != null && err.response.data != null && err.response.data.error != null) {          
+          setError(Error(err.response.data.error));
+        } else {
+          setError(err);
+        }
         setTriggeredRun(true);
       });
       return;