Merge pull request #51 from ProvideQ/feat/problem-graph

Problem Graph

package.json

@@ -10,11 +10,7 @@
     "format": "prettier --write .",
     "test": "jest"
   },
-  "resolutions": {
-    "d3-interpolate": "2.0.1"
-  },
   "dependencies": {
-    "@antv/g6": "^4.7.16",
     "@chakra-ui/react": "^2.3.1",
     "@emotion/react": "11",
     "@emotion/styled": "11",
@@ -26,7 +22,8 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",
     "react-multi-select-component": "^4.3.4",
-    "react-simple-code-editor": "^0.13.0"
+    "react-simple-code-editor": "^0.13.0",
+    "reactflow": "^11.10.3"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "^5.16.5",

src/api/ToolboxAPI.ts

@@ -1,66 +1,111 @@
-import { MetaSolverSetting } from "./data-model/MetaSolverSettings";
-import { ProblemSolver } from "./data-model/ProblemSolver";
-import { Solution } from "./data-model/Solution";
-import { SolutionStatus } from "./data-model/SolutionStatus";
-import { SolveRequest } from "./data-model/SolveRequest";
-import { SubRoutineDefinition } from "./data-model/SubRoutineDefinition";
+import { getInvalidProblemDto, ProblemDto } from "./data-model/ProblemDto";
+import { ProblemSolverInfo } from "./data-model/ProblemSolverInfo";
+import { ProblemState } from "./data-model/ProblemState";
+import { SubRoutineDefinitionDto } from "./data-model/SubRoutineDefinitionDto";
 
 /**
  * Getter for the base url of the toolbox API.
  */
 export const baseUrl = () => process.env.NEXT_PUBLIC_API_BASE_URL;
 
+export async function fetchProblem<T>(
+  problemTypeId: string,
+  problemId: string
+): Promise<ProblemDto<T>> {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}/${problemId}`, {
+    method: "GET",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  })
+    .then((response) => response.json())
+    .then((json) => {
+      const data = json as ProblemDto<T>;
+
+      // Explicitly set solverId to undefined if it is null
+      if (data.solverId === null) {
+        data.solverId = undefined;
+      }
+
+      return data;
+    })
+    .catch((reason) => {
+      return {
+        ...getInvalidProblemDto(),
+        error: `${reason}`,
+      };
+    });
+}
+
 export async function postProblem<T>(
-  problemType: string,
-  solveRequest: SolveRequest<T>
-): Promise<Solution> {
-  return fetch(`${baseUrl()}/solve/${problemType}`, {
+  problemTypeId: string,
+  problemRequest: ProblemDto<T>
+): Promise<ProblemDto<T>> {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
     },
-    body: JSON.stringify(solveRequest),
+    body: JSON.stringify(problemRequest),
+  })
+    .then((response) => response.json())
+    .then((json) => json as ProblemDto<T>)
+    .catch((reason) => {
+      return {
+        ...problemRequest,
+        error: `${reason}`,
+      };
+    });
+}
+
+export async function patchProblem<T>(
+  problemTypeId: string,
+  problemId: string,
+  updateParameters: { input?: any; solverId?: string; state?: ProblemState }
+): Promise<ProblemDto<T>> {
+  let url = `${baseUrl()}/problems/${problemTypeId}/${problemId}`;
+  console.log(url);
+  return fetch(url, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(updateParameters),
   })
     .then((response) => response.json())
-    .then((json) => json as Solution)
+    .then((json) => json as ProblemDto<T>)
     .catch((reason) => {
       return {
-        id: -1,
-        status: SolutionStatus.INVALID,
-        solverName: "",
-        executionMilliseconds: 0,
-        solutionData: "",
-        debugData: "",
-        metaData: "",
+        ...getInvalidProblemDto(),
         error: `${reason}`,
       };
     });
 }
 
 export async function fetchSolvers(
-  problemType: string
-): Promise<ProblemSolver[]> {
-  return fetch(`${baseUrl()}/solvers/${problemType}`, {
+  problemTypeId: string
+): Promise<ProblemSolverInfo[]> {
+  return fetch(`${baseUrl()}/solvers/${problemTypeId}`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
     },
   })
-    .then((response) => response.json())
-    .then((json) => json as ProblemSolver[])
+    .then(async (response) => response.json())
+    .then((json) => json as ProblemSolverInfo[])
     .catch((reason) => {
       console.error(reason);
-      alert(`Could not retrieve solvers of type ${problemType}.`);
+      alert(`Could not retrieve solvers of type ${problemTypeId}.`);
       return [];
     });
 }
 
 export async function fetchSubRoutines(
-  problemType: string,
+  problemTypeId: string,
   solverId: string
-): Promise<SubRoutineDefinition[]> {
+): Promise<SubRoutineDefinitionDto[]> {
   return fetch(
-    `${baseUrl()}/sub-routines/${problemType}?${new URLSearchParams({
+    `${baseUrl()}/sub-routines/${problemTypeId}?${new URLSearchParams({
       id: solverId,
     })}`,
     {
@@ -78,18 +123,18 @@ export async function fetchSubRoutines(
     });
 }
 
-export async function fetchMetaSolverSettings(
-  problemType: string
-): Promise<MetaSolverSetting[]> {
-  return fetch(`${baseUrl()}/meta-solver/settings/${problemType}`, {
-    method: "GET",
-    headers: {
-      "Content-Type": "application/json",
-    },
-  })
-    .then((response) => response.json())
-    .catch((reason) => {
-      console.log(reason);
-      return [];
-    });
-}
+// export async function fetchMetaSolverSettings(
+//   problemTypeId: string
+// ): Promise<MetaSolverSetting[]> {
+//   return fetch(`${baseUrl()}/meta-solver/settings/${problemTypeId}`, {
+//     method: "GET",
+//     headers: {
+//       "Content-Type": "application/json",
+//     },
+//   })
+//     .then((response) => response.json())
+//     .catch((reason) => {
+//       console.log(reason);
+//       return [];
+//     });
+// }

src/api/data-model/ProblemDto.ts

@@ -0,0 +1,34 @@
+import { ProblemState } from "./ProblemState";
+import { getInvalidSolutionObject, SolutionObject } from "./SolutionObject";
+import { SubRoutineReferenceDto } from "./SubRoutineReferenceDto";
+
+export interface ProblemDto<T> {
+  id: string;
+  typeId: string;
+  input: T;
+  solution: SolutionObject;
+  state: ProblemState;
+  solverId?: string;
+  subProblems: SubRoutineReferenceDto[];
+  error: string;
+}
+
+export function getInvalidProblemDto<T>(): ProblemDto<T> {
+  return {
+    error: "",
+    id: "",
+    input: {} as T,
+    solution: getInvalidSolutionObject(),
+    solverId: "",
+    state: ProblemState.READY_TO_SOLVE,
+    subProblems: [],
+    typeId: "",
+  };
+}
+
+export function canProblemSolverBeUpdated(problem: ProblemDto<any>): boolean {
+  return (
+    problem.state === ProblemState.NEEDS_CONFIGURATION ||
+    problem.state === ProblemState.READY_TO_SOLVE
+  );
+}

src/api/data-model/ProblemSolverInfo.ts

@@ -0,0 +1,4 @@
+export interface ProblemSolverInfo {
+  id: string;
+  name: string;
+}

src/api/data-model/ProblemState.ts

@@ -0,0 +1,6 @@
+export enum ProblemState {
+  NEEDS_CONFIGURATION = "NEEDS_CONFIGURATION",
+  READY_TO_SOLVE = "READY_TO_SOLVE",
+  SOLVING = "SOLVING",
+  SOLVED = "SOLVED",
+}

src/api/data-model/SolutionObject.ts

@@ -0,0 +1,26 @@
+import { SolutionStatus } from "./SolutionStatus";
+
+export interface SolutionObject {
+  /**
+   * UUID of the solution.
+   */
+  id: string;
+  status: SolutionStatus;
+  metaData: string;
+  solutionData: any;
+  debugData: string;
+  solverName: string;
+  executionMilliseconds: number;
+}
+
+export function getInvalidSolutionObject(): SolutionObject {
+  return {
+    id: "",
+    status: SolutionStatus.INVALID,
+    metaData: "",
+    solutionData: undefined,
+    debugData: "",
+    solverName: "",
+    executionMilliseconds: -1,
+  };
+}

src/api/data-model/SolutionStatus.ts

@@ -1,5 +1,6 @@
 export enum SolutionStatus {
-  INVALID,
-  COMPUTING,
-  SOLVED,
+  INVALID = "INVALID",
+  COMPUTING = "COMPUTING",
+  SOLVED = "SOLVED",
+  ERROR = "ERROR",
 }

src/api/data-model/SubRoutineDefinition.ts → src/api/data-model/SubRoutineDefinitionDto.ts

@@ -2,12 +2,12 @@
  * A sub-routine definition describes which problem type needs to be solved by a
  * sub-routine and why it needs to be solved.
  */
-export interface SubRoutineDefinition {
+export interface SubRoutineDefinitionDto {
   /**
    * Identifies the type of problem that needs to be solved with the described
    * sub-routine.
    */
-  type: string;
+  typeId: string;
   /**
    * Describes why this sub-routine is required to solve a bigger problem.
    */

src/api/data-model/SubRoutineReferenceDto.ts

@@ -0,0 +1,6 @@
+import { SubRoutineDefinitionDto } from "./SubRoutineDefinitionDto";
+
+export interface SubRoutineReferenceDto {
+  subRoutine: SubRoutineDefinitionDto;
+  subProblemIds: string[];
+}

src/components/landing-page/ProblemChooser.tsx

@@ -16,7 +16,7 @@ export const ProblemChooser = (props: GridProps) => (
       <ProblemCard
         href="solve/MaxCut"
         new={false}
-        tags={["QAOA", "simulated"]}
+        tags={["QAOA"]}
         problemName="MaxCut"
         description="For a given undirected, weighted graph, this algorithm finds a cut that is a maximum in some way or another."
       />
@@ -25,7 +25,7 @@ export const ProblemChooser = (props: GridProps) => (
       <ProblemCard
         href="solve/FeatureModelAnomaly"
         new={false}
-        tags={["sub-routines"]}
+        tags={["sub-routines", "SAT"]}
         problemName="Feature Model Anomaly"
         description="Check whether a given feature model in the UVL format is void or if it has dead features."
       />
@@ -34,10 +34,28 @@ export const ProblemChooser = (props: GridProps) => (
       <ProblemCard
         href="solve/QUBO"
         new={true}
-        tags={["QAOA"]}
+        tags={["QAOA", "Annealing"]}
         problemName="QUBO"
         description="For a quadratic term with binary decision variables, find the variable assignment minimizing the term."
       />
     </GridItem>
+    <GridItem>
+      <ProblemCard
+        href="solve/VehicleRouting"
+        new={true}
+        tags={["sub-routines", "QUBO", "Clustering"]}
+        problemName="Vehicle Routing"
+        description="What is the optimal set of routes for a fleet of vehicles to traverse in order to deliver to a given set of customers?"
+      />
+    </GridItem>
+    <GridItem>
+      <ProblemCard
+        href="solve/TSP"
+        new={true}
+        tags={["sub-routines", "qubo"]}
+        problemName="Traveling Salesperson Problem"
+        description="Given a list of cities and the distances between them, find the shortest possible route that visits each city exactly once and returns to the origin city."
+      />
+    </GridItem>
   </Grid>
 );