Refactor frontend API calls to use batched metadata and caching

components/hooks/ProblemProvider/Problem.js

@@ -1,53 +1,49 @@
-import { requestProblems, requestInfo } from "../../redux";
+import { requestAllProblems, requestAllInfo } from "../../redux";
 import React, { useEffect, useState } from "react";
 
 // For initial startup defaults
 const DEFAULT_PROBLEM_NAME = "SAT3";
 
 export function useProblem(url) {
   const state = {};
-  [state.problemInfoMap] = useProblemInfoMap(url);
-  [state.problemNameMap] = useProblemNameMap(state.problemInfoMap);
   [state.problemType, state.setProblemType] = useState("NPC");
+  [state.problemInfoMap] = useProblemInfoMap(url, state.problemType);
+  [state.problemNameMap] = useProblemNameMap(state.problemInfoMap);
   [state.problemName, state.setProblemName] = useProblemName(state.problemNameMap);
-  [state.problemInstance, state.setProblemInstance] = useState("{{1,2,3},{1,2},GENERIC}"); // Careful about changing this value, the application boot up sequence is dependent on having a default value.
+  [state.problemInstance, state.setProblemInstance] = useState("{{1,2,3},{1,2},GENERIC}");
   return state;
 }
 
-export function useProblemInfo(url, problemName) {
+export function useProblemInfo(url, problemName, problemType = "NPC") {
   const [problemInfo, setProblemInfo] = useState({});
 
   useEffect(() => {
     if(!problemName) return;
     (async () => {
-      setProblemInfo(problemName ? (await requestInfo(url, problemName)) ?? {} : {});
+      const allInfo = (await requestAllInfo(url, problemType)) ?? {};
+      setProblemInfo(allInfo[problemName] ?? {});
     })();
-  }, [problemName]);
+  }, [url, problemName, problemType]);
 
   return problemInfo; // There should be no reason to set the problem information
 }
 
-function useProblemInfoMap(url) {
+function useProblemInfoMap(url, problemType) {
   const [problemInfoMap, setProblemInfoMap] = useState(new Map());
-
   useEffect(() => {
     (async () => {
-      const problems = (await requestProblems(url)) ?? [];
-      setProblemInfoMap(await requestProblemInfoMap(url, problems));
-    })();
-  }, []);
-
-  async function requestProblemInfoMap(url, problems) {
-    let map = new Map();
-    for (const problem of problems) {
-      const info = await requestInfo(url, problem);
-      if (info) {
-        map.set(problem, info);
+      const problems = (await requestAllProblems(url, problemType)) ?? [];
+      const allInfo = (await requestAllInfo(url, problemType)) ?? {};
+      let map = new Map();
+      for (const problem of problems) {
+        const info = allInfo[problem];
+        if (info) {
+          map.set(problem, info);
+        }
       }
-    }
-    return map;
-  }
-
+      setProblemInfoMap(map);
+    })();
+  }, [url, problemType]);
   return [problemInfoMap, setProblemInfoMap];
 }
 
@@ -73,7 +69,7 @@ function useProblemNameMap(problemInfoMap) {
   const [problemNameMap, setProblemNameMap] = useState(new Map());
 
   useEffect(() => {
-    setProblemNameMap(new Map([...problemInfoMap].map(([name, info]) => [name, info.problemName])));
+    setProblemNameMap(new Map([...problemInfoMap].map(([name, info]) => [name, info?.problemName || name])));
   }, [problemInfoMap]);
 
   return [problemNameMap, setProblemNameMap];

components/hooks/ProblemProvider/Reducer.js

@@ -1,5 +1,5 @@
 import { useGenericInfo } from "../ProblemProvider";
-import { requestReductionOptions, requestReductionInfo, requestReductions, requestReducedInstanceFromPath, requestInfo } from "../../redux";
+import { requestReductionOptions, requestReductionInfo, requestReductions, requestReducedInstanceFromPath, requestAllInfo } from "../../redux";
 import React, { useEffect, useState, useRef } from "react";
 
 // For initial startup defaults
@@ -26,9 +26,10 @@ export function useReducer(url, problemName, problemType, problemInstance) {
     state.chosenReductionType
   );
   [state.reductionVisualization, state.setReductionVisualization] = useReductionVisualization(
-    url,
-    state.chosenReduceTo
-  );
+  url,
+  state.chosenReduceTo,
+  problemType
+);
   return state;
 }
 
@@ -66,7 +67,7 @@ function useReducedInstance(url, problemInstance, chosenReduceTo, chosenReductio
   return [reducedInstance, setReducedInstance];
 }
 
-function useReductionVisualization(url, chosenReduceTo) {
+function useReductionVisualization(url, chosenReduceTo, problemType) {
   const [reductionVisualization, setReductionVisualization] = useState("");
 
   useEffect(() => {
@@ -76,10 +77,11 @@ function useReductionVisualization(url, chosenReduceTo) {
     }
 
     (async () => {
-      const info = await requestInfo(url, chosenReduceTo);
-      setReductionVisualization(info?.defaultVisualization.visualizationType ?? "");
+      const allInfo = (await requestAllInfo(url, problemType)) ?? {};
+      const info = allInfo[chosenReduceTo];
+      setReductionVisualization(info?.defaultVisualization?.visualizationType ?? "");
     })();
-  }, [url, chosenReduceTo]);
+  }, [url, chosenReduceTo, problemType]);
 
   return [reductionVisualization, setReductionVisualization];
 }

components/hooks/ProblemProvider/Solver.js

@@ -1,14 +1,14 @@
 import { useGenericInfo } from "../ProblemProvider";
-import { requestInfo, requestSolvers } from "../../redux";
+import { requestAllSolvers, requestAllInfo } from "../../redux";
 import React, { useEffect, useState, useRef } from "react";
 
 export function useSolver(url, problemName, problemType, problemNameMap, problemInfoMap, problemInstance) {
   const state = {};
   /// Maps each problem name to its default solver name.
-  [state.defaultSolverMap] = useDefaultSolverMap(url, problemInfoMap);
+  [state.defaultSolverMap] = useDefaultSolverMap(url, problemInfoMap, problemType);
   [state.solverOptions] = useSolverOptions(url, problemName, problemType);
   [state.chosenSolver, state.setChosenSolver] = useChosenSolver(problemName, state.defaultSolverMap);
-  [state.solverNameMap] = useSolverNameMap(url, problemNameMap);
+  [state.solverNameMap] = useSolverNameMap(url, problemNameMap, problemType);
   [state.solvedInstance, state.setSolvedInstance] = useSolvedInstance(problemInstance, state.chosenSolver);
   return state;
 }
@@ -33,74 +33,76 @@ function useSolvedInstance(problemInstance, chosenSolver) {
   return [solvedInstance, setSolvedInstance];
 }
 
-function useSolverNameMap(url, problemNameMap) {
+function useSolverNameMap(url, problemNameMap, problemType) {
   const [solverNameMap, setSolverNameMap] = useState(new Map());
 
   useEffect(() => {
     const problems = Array.from(problemNameMap.keys());
-    requestSolverNameMap(url, problems).then((solverMap) => {
-      setSolverNameMap(solverMap);
-    });
-  }, [problemNameMap]);
-
-  //The following the functions are used to set the solver names
-  async function requestSolverNameMap(url, problems) {
+    (async () => {
+    const allSolvers = (await requestAllSolvers(url, problemType)) ?? {};
+    const allInfo = (await requestAllInfo(url, problemType)) ?? {};
     let map = new Map();
+
     for (const problem of problems) {
-      const solvers = (await requestSolvers(url, problem)) ?? [];
+      const solvers = allSolvers[problem] ?? [];
       for (const s of solvers) {
-        let solver = s.split(" ")[0];
-        const info = await requestInfo(url, solver);
-        if (info) {
-          map.set(s, info.solverName);
-        }
+        const solver = s.split(" ")[0];
+        const info = allInfo[solver];
+        map.set(s, info?.solverName || s);
       }
     }
-    return map;
-  }
+    setSolverNameMap(map);
+  })();
+}, [url, problemNameMap, problemType]);
+
 
   return [solverNameMap, setSolverNameMap];
 }
 
-function useDefaultSolverMap(url, problemInfoMap) {
+function useDefaultSolverMap(url, problemInfoMap, problemType) {
   const [defaultSolverMap, setDefaultSolverMap] = useState(new Map());
 
-  useEffect(() => {
-    const problems = [...problemInfoMap.keys()];
-    const defaultSolverNames = [...problemInfoMap.values()].map((info) => info.defaultSolver.solverName);
-    requestDefaultSolverFileMap(url, problems, defaultSolverNames).then((defaultSolverFileNames) => {
-      setDefaultSolverMap(defaultSolverFileNames);
-    });
-  }, [problemInfoMap]);
-
-  //The requestDefaultSolverFileMap sets the solver names by the file name
-  async function requestDefaultSolverFileMap(url, problems, defaultSolverNames) {
+useEffect(() => {
+  const problems = [...problemInfoMap.keys()];
+  const defaultSolverNames = [...problemInfoMap.values()]
+    .map((info) => info?.defaultSolver?.solverName)
+    .filter(Boolean);
+
+  (async () => {
+    const allSolvers = (await requestAllSolvers(url, problemType)) ?? {};
+    const allInfo = (await requestAllInfo(url, problemType)) ?? {};
     let map = new Map();
     for (const problem of problems) {
-      const solvers = (await requestSolvers(url, problem)) ?? [];
+      const solvers = allSolvers[problem] ?? [];
       for (const s of solvers) {
-        let solver = s.split(" ")[0];
-        const info = await requestInfo(url, solver);
+        const solver = s.split(" ")[0];
+        const info = allInfo[solver];
         if (info && defaultSolverNames.includes(info.solverName)) {
           map.set(problem, s);
         }
       }
     }
-    return map;
-  }
+    setDefaultSolverMap(map);
+  })();
+}, [url, problemInfoMap, problemType]);
+
 
   return [defaultSolverMap, setDefaultSolverMap];
 }
 
 function useSolverOptions(url, problemName, problemType) {
   const [solverOptions, setSolverOptions] = useState([]);
-
+  
   useEffect(() => {
     (async () => {
-      setSolverOptions(problemName && problemType ? (await requestSolvers(url, problemName, problemType)) ?? [] : []);
+      if (!problemName || !problemType) {
+        setSolverOptions([]);
+        return;
+      }
+      const allSolvers = (await requestAllSolvers(url, problemType)) ?? {};
+      setSolverOptions(allSolvers[problemName] ?? []);
     })();
-  }, [problemName, problemType]);
-
+  }, [url, problemName, problemType]);
   return [solverOptions, setSolverOptions];
 }
 

components/hooks/ProblemProvider/Verifier.js

@@ -1,46 +1,45 @@
 import { useGenericInfo } from "../ProblemProvider";
-import { requestInfo, requestVerifiers } from "../../redux";
+import { requestAllVerifiers, requestAllInfo } from "../../redux";
 import React, { useEffect, useState, useRef } from "react";
-
 export function useVerifier(url, problemName, problemType, problemNameMap, problemInfoMap) {
   const state = {};
-  [state.defaultVerifierMap] = useDefaultVerifierMap(url, problemInfoMap);
+  [state.defaultVerifierMap] = useDefaultVerifierMap(url, problemInfoMap, problemType);
   [state.verifierOptions] = useVerifierOptions(url, problemName, problemType);
   [state.chosenVerifier, state.setChosenVerifier] = useChosenVerifier(problemName, state.defaultVerifierMap);
-  [state.verifierNameMap] = useVerifierNameMap(url, problemNameMap);
+  [state.verifierNameMap] = useVerifierNameMap(url, problemNameMap, problemType);
   return state;
 }
 
 export function useVerifierInfo(url, verifier) {
   return useGenericInfo(url, verifier);
 }
 
-function useDefaultVerifierMap(url, problemInfoMap) {
+function useDefaultVerifierMap(url, problemInfoMap, problemType) {
   const [defaultVerifierMap, setDefaultVerifierMap] = useState(new Map());
 
-  useEffect(() => {
-    const problems = [...problemInfoMap.keys()];
-    const defaultVerifierNames = [...problemInfoMap.values()].map((info) => info.defaultVerifier.verifierName);
-    requestDefaultVerifierFileMap(url, problems, defaultVerifierNames).then((defaultVerifierFileNames) => {
-      setDefaultVerifierMap(defaultVerifierFileNames);
-    });
-  }, [problemInfoMap]);
-
-  //The requestDefaultVerifierFileMap sets the verifier names by the file name
-  async function requestDefaultVerifierFileMap(url, problems, defaultVerifierNames) {
+useEffect(() => {
+  const problems = [...problemInfoMap.keys()];
+  const defaultVerifierNames = [...problemInfoMap.values()]
+    .map((info) => info?.defaultVerifier?.verifierName)
+    .filter(Boolean);
+
+  (async () => {
+    const allVerifiers = (await requestAllVerifiers(url, problemType)) ?? {};
+    const allInfo = (await requestAllInfo(url, problemType)) ?? {};
     let map = new Map();
     for (const problem of problems) {
-      const verifiers = (await requestVerifiers(url, problem)) ?? [];
+      const verifiers = allVerifiers[problem] ?? [];
       for (const v of verifiers) {
         const verifier = v.split(" ")[0];
-        const info = await requestInfo(url, verifier);
+        const info = allInfo[verifier];
         if (info && defaultVerifierNames.includes(info.verifierName)) {
           map.set(problem, v);
         }
       }
     }
-    return map;
-  }
+    setDefaultVerifierMap(map);
+  })();
+}, [url, problemInfoMap, problemType]);
 
   return [defaultVerifierMap, setDefaultVerifierMap];
 }
@@ -50,11 +49,14 @@ function useVerifierOptions(url, problemName, problemType) {
 
   useEffect(() => {
     (async () => {
-      setVerifierOptions(
-        problemName && problemType ? (await requestVerifiers(url, problemName, problemType)) ?? [] : []
-      );
+      if (!problemName || !problemType) {
+  setVerifierOptions([]);
+  return;
+}
+const allVerifiers = (await requestAllVerifiers(url, problemType)) ?? {};
+setVerifierOptions(allVerifiers[problemName] ?? []);
     })();
-  }, [problemName, problemType]);
+  }, [url, problemName, problemType]);
 
   return [verifierOptions, setVerifierOptions];
 }
@@ -85,30 +87,27 @@ function useChosenVerifier(problemName, defaultVerifierMap) {
   return [chosenVerifier, setChosenVerifier];
 }
 
-function useVerifierNameMap(url, problemNameMap) {
+function useVerifierNameMap(url, problemNameMap, problemType) {
   const [verifierNameMap, setVerifierNameMap] = useState(new Map());
 
-  useEffect(() => {
-    const problems = Array.from(problemNameMap.keys());
-    requestVerifierNameMap(url, problems).then((verifierMap) => {
-      setVerifierNameMap(verifierMap);
-    });
-  }, [problemNameMap]);
-
-  //The following the functions are used to set the verifier names
-  async function requestVerifierNameMap(url, problems) {
+useEffect(() => {
+  const problems = Array.from(problemNameMap.keys());
+
+  (async () => {
+    const allVerifiers = (await requestAllVerifiers(url, problemType)) ?? {};
+    const allInfo = (await requestAllInfo(url, problemType)) ?? {};
     let map = new Map();
+
     for (const problem of problems) {
-      const verifiers = (await requestVerifiers(url, problem)) ?? [];
+      const verifiers = allVerifiers[problem] ?? [];
       for (const verifier of verifiers) {
-        const info = await requestInfo(url, verifier);
-        if (info) {
-          map.set(verifier, info.verifierName);
-        }
+        const info = allInfo[verifier];
+        map.set(verifier, info?.verifierName || verifier);
       }
     }
-    return map;
-  }
+    setVerifierNameMap(map);
+  })();
+}, [url, problemNameMap, problemType]);
 
   return [verifierNameMap, setVerifierNameMap];
 }