diff --git a/.prettierrc.json b/.prettierrc.json
index 0967ef4..55c1943 100644
--- a/.prettierrc.json
+++ b/.prettierrc.json
@@ -1 +1,3 @@
-{}
+{
+  "plugins": ["prettier-plugin-organize-imports"]
+}
diff --git a/__tests__/converter/dimacs/DimacsLogicalExpression.spec.ts b/__tests__/converter/dimacs/DimacsLogicalExpression.spec.ts
index d4d2506..0382853 100644
--- a/__tests__/converter/dimacs/DimacsLogicalExpression.spec.ts
+++ b/__tests__/converter/dimacs/DimacsLogicalExpression.spec.ts
@@ -1,8 +1,7 @@
 import each from "jest-each";
-import { regexBlank } from "../../../src/converter/dimacs/Syntax/CommonSyntax";
 import { DimacsParser } from "../../../src/converter/dimacs/DimacsParser";
+import { regexBlank } from "../../../src/converter/dimacs/Syntax/CommonSyntax";
 import { regexComment } from "../../../src/converter/dimacs/Syntax/DimacsSyntax";
-import { LogicalExpressionParser } from "../../../src/converter/dimacs/LogicalExpressionParser";
 import { regexNOT } from "../../../src/converter/dimacs/Syntax/LogicalExpressionSyntax";
 
 function isEquivalentLogicalExpression(f1: string, f2: string) {
@@ -19,36 +18,6 @@ function isEquivalentDimacs(f1: string, f2: string) {
 
 describe("Parsing", () => {
   let dimacsParser = new DimacsParser();
-  let logicalExpressionParser = new LogicalExpressionParser();
-
-  each([
-    [
-      "((1 or 2 or not 3) and (!4 and (not 5 and 6)) and 3 and (7 or 2))",
-      "c First comment\nc Some Comment\nc 1 => 1\np sat 7\n*(+( 1  2  -3 )*( -4 *( -5  6 )) 3 +( 7  2 ))",
-    ],
-    [
-      "(1 or (2 and 3) or (((1 and 4) or 5) and 6))",
-      "p sat 6\n+(1 *(2  3)*(+(*(1  4) 5) 6))",
-    ],
-    [
-      "(((1 and not 2 and 3 and 4) or 3) and 5)",
-      "c Sample DIMACS .sat file\np sat 5\n*(+(*(1  -2  3  4) 3) 5)",
-    ],
-    ["((1 and not 2) or 3)", "p sat 3\n+(*(1 -2) 3)"],
-    ["((1 and 2) or not 3)", "p sat 3\n+(*(1 2) -3)"],
-  ]).test(
-    "parsing bi-directional",
-    (logicalExpression: string, dimacs: string) => {
-      isEquivalentDimacs(
-        logicalExpressionParser.parseDimacs(logicalExpression),
-        dimacs
-      );
-      isEquivalentLogicalExpression(
-        dimacsParser.parseLogicalExpression(dimacs),
-        logicalExpression
-      );
-    }
-  );
 
   each([
     [
diff --git a/package.json b/package.json
index ee530d9..a2403e2 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "provideq",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -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",
@@ -40,6 +37,7 @@
     "jest": "^29.1.1",
     "jest-environment-jsdom": "^29.1.1",
     "prettier": "2.8.8",
+    "prettier-plugin-organize-imports": "^3.2.4",
     "typescript": "4.8.2"
   }
 }
diff --git a/src/api/ToolboxAPI.ts b/src/api/ToolboxAPI.ts
index d0703f0..d9a392c 100644
--- a/src/api/ToolboxAPI.ts
+++ b/src/api/ToolboxAPI.ts
@@ -1,68 +1,115 @@
-import { MetaSolverSetting } from "./data-model/MetaSolverSettings";
-import { SubRoutineDefinition } from "./data-model/SubRoutineDefinition";
-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 { getInvalidProblemDto, ProblemDto } from "./data-model/ProblemDto";
+import { ProblemSolverInfo } from "./data-model/ProblemSolverInfo";
+import { ProblemState } from "./data-model/ProblemState";
+import { SolverSetting } from "./data-model/SolverSettings";
+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 Solution)
+    .then((json) => json as ProblemDto<T>)
     .catch((reason) => {
       return {
-        id: -1,
-        status: SolutionStatus.INVALID,
-        solverName: "",
-        executionMilliseconds: 0,
-        solutionData: "",
-        debugData: "",
-        metaData: "",
+        ...problemRequest,
+        error: `${reason}`,
+      };
+    });
+}
+
+export async function patchProblem<T>(
+  problemTypeId: string,
+  problemId: string,
+  updateParameters: {
+    input?: any;
+    solverId?: string;
+    state?: ProblemState;
+    solverSettings?: SolverSetting[];
+  }
+): Promise<ProblemDto<T>> {
+  return fetch(`${baseUrl()}/problems/${problemTypeId}/${problemId}`, {
+    method: "PATCH",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(updateParameters),
+  })
+    .then((response) => response.json())
+    .then((json) => json as ProblemDto<T>)
+    .catch((reason) => {
+      return {
+        ...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({
-      id: solverId,
-    })}`,
+    `${baseUrl()}/solvers/${problemTypeId}/${solverId}/sub-routines`,
     {
       method: "GET",
       headers: {
@@ -78,10 +125,11 @@ export async function fetchSubRoutines(
     });
 }
 
-export async function fetchMetaSolverSettings(
-  problemType: string
-): Promise<MetaSolverSetting[]> {
-  return fetch(`${baseUrl()}/meta-solver/settings/${problemType}`, {
+export async function fetchSolverSettings(
+  problemTypeId: string,
+  solverId: string
+): Promise<[]> {
+  return fetch(`${baseUrl()}/solvers/${problemTypeId}/${solverId}/settings`, {
     method: "GET",
     headers: {
       "Content-Type": "application/json",
@@ -89,7 +137,8 @@ export async function fetchMetaSolverSettings(
   })
     .then((response) => response.json())
     .catch((reason) => {
-      console.log(reason);
+      console.error(reason);
+      alert(`Could not retrieve subroutines of solver ${solverId}.`);
       return [];
     });
 }
diff --git a/src/api/data-model/MetaSolverSettings.ts b/src/api/data-model/MetaSolverSettings.ts
deleted file mode 100644
index f2471a9..0000000
--- a/src/api/data-model/MetaSolverSettings.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export enum MetaSolverSettingType {
-  RANGE = "RANGE",
-  CHECKBOX = "CHECKBOX",
-  TEXT = "TEXT",
-  SELECT = "SELECT",
-}
-
-export interface MetaSolverSetting {
-  name: string;
-  type: MetaSolverSettingType;
-}
-
-export interface RangeSetting extends MetaSolverSetting {
-  min: number;
-  max: number;
-  value: number;
-}
-
-export interface CheckboxSetting extends MetaSolverSetting {
-  state: boolean;
-}
-
-export interface TextSetting extends MetaSolverSetting {
-  text: string;
-}
-
-export interface SelectSetting extends MetaSolverSetting {
-  options: string[];
-  selectedOption: string;
-}
diff --git a/src/api/data-model/ProblemDto.ts b/src/api/data-model/ProblemDto.ts
new file mode 100644
index 0000000..5af02f8
--- /dev/null
+++ b/src/api/data-model/ProblemDto.ts
@@ -0,0 +1,37 @@
+import { ProblemState } from "./ProblemState";
+import { getInvalidSolutionObject, SolutionObject } from "./SolutionObject";
+import { SolverSetting } from "./SolverSettings";
+import { SubRoutineReferenceDto } from "./SubRoutineReferenceDto";
+
+export interface ProblemDto<T> {
+  id: string;
+  typeId: string;
+  input: T;
+  solution: SolutionObject;
+  state: ProblemState;
+  solverId?: string;
+  solverSettings: SolverSetting[];
+  subProblems: SubRoutineReferenceDto[];
+  error: string;
+}
+
+export function getInvalidProblemDto<T>(): ProblemDto<T> {
+  return {
+    error: "",
+    id: "",
+    input: {} as T,
+    solution: getInvalidSolutionObject(),
+    solverId: "",
+    solverSettings: [],
+    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
+  );
+}
diff --git a/src/api/data-model/ProblemSolver.ts b/src/api/data-model/ProblemSolver.ts
deleted file mode 100644
index c682924..0000000
--- a/src/api/data-model/ProblemSolver.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface ProblemSolver {
-  id: string;
-  name: string;
-}
diff --git a/src/api/data-model/ProblemSolverInfo.ts b/src/api/data-model/ProblemSolverInfo.ts
new file mode 100644
index 0000000..dc83213
--- /dev/null
+++ b/src/api/data-model/ProblemSolverInfo.ts
@@ -0,0 +1,4 @@
+export interface ProblemSolverInfo {
+  id: string;
+  name: string;
+}
diff --git a/src/api/data-model/ProblemState.ts b/src/api/data-model/ProblemState.ts
new file mode 100644
index 0000000..2f98e7f
--- /dev/null
+++ b/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",
+}
diff --git a/src/api/data-model/Solution.ts b/src/api/data-model/Solution.ts
deleted file mode 100644
index ad9c508..0000000
--- a/src/api/data-model/Solution.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { SolutionStatus } from "./SolutionStatus";
-
-export interface Solution {
-  id: number;
-  status: SolutionStatus;
-  solverName: string;
-  executionMilliseconds: number;
-  solutionData: any;
-  metaData: string;
-  debugData: string;
-  error: string;
-}
diff --git a/src/api/data-model/SolutionObject.ts b/src/api/data-model/SolutionObject.ts
new file mode 100644
index 0000000..197ce88
--- /dev/null
+++ b/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,
+  };
+}
diff --git a/src/api/data-model/SolutionStatus.ts b/src/api/data-model/SolutionStatus.ts
index 8f65e4f..70bdb66 100644
--- a/src/api/data-model/SolutionStatus.ts
+++ b/src/api/data-model/SolutionStatus.ts
@@ -1,5 +1,6 @@
 export enum SolutionStatus {
-  INVALID,
-  COMPUTING,
-  SOLVED,
+  INVALID = "INVALID",
+  COMPUTING = "COMPUTING",
+  SOLVED = "SOLVED",
+  ERROR = "ERROR",
 }
diff --git a/src/api/data-model/SolveRequest.ts b/src/api/data-model/SolveRequest.ts
deleted file mode 100644
index be08e54..0000000
--- a/src/api/data-model/SolveRequest.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { MetaSolverSetting } from "./MetaSolverSettings";
-
-export interface SolverChoice {
-  /**
-   * If no solver id is provided, the toolbox choose the solver itself via meta solver strategy
-   */
-  requestedSolverId?: string;
-  /**
-   * If no solver id is provided, the toolbox choose the solver itself via meta solver strategy
-   */
-  requestedMetaSolverSettings?: MetaSolverSetting[];
-  /**
-   * Map from problem type to SubSolveRequest to allow explicitly requested solvers for a subroutine
-   */
-  requestedSubSolveRequests: SolveMap;
-}
-
-export interface SolveRequest<T> extends SolverChoice {
-  requestContent: T;
-}
-
-/**
- * A SolveMap contains `SolverChoice` data for each problem type used in
- * sub-routines of a request.
- */
-export type SolveMap = {
-  [problemTypeId: string]: SolverChoice;
-};
diff --git a/src/api/data-model/SolverSettings.ts b/src/api/data-model/SolverSettings.ts
new file mode 100644
index 0000000..f8bd877
--- /dev/null
+++ b/src/api/data-model/SolverSettings.ts
@@ -0,0 +1,33 @@
+export enum SolverSettingType {
+  INTEGER = "INTEGER",
+  DOUBLE = "DOUBLE",
+  CHECKBOX = "CHECKBOX",
+  TEXT = "TEXT",
+  SELECT = "SELECT",
+}
+
+export interface SolverSetting {
+  name: string;
+  description: string;
+  type: SolverSettingType;
+  required: boolean;
+}
+
+export interface RangeSetting extends SolverSetting {
+  min: number;
+  max: number;
+  value: number;
+}
+
+export interface CheckboxSetting extends SolverSetting {
+  state: boolean;
+}
+
+export interface TextSetting extends SolverSetting {
+  text: string;
+}
+
+export interface SelectSetting extends SolverSetting {
+  options: string[];
+  selectedOption: string;
+}
diff --git a/src/api/data-model/SubRoutineDefinition.ts b/src/api/data-model/SubRoutineDefinitionDto.ts
similarity index 85%
rename from src/api/data-model/SubRoutineDefinition.ts
rename to src/api/data-model/SubRoutineDefinitionDto.ts
index 8afafbc..109fbde 100644
--- a/src/api/data-model/SubRoutineDefinition.ts
+++ b/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.
    */
diff --git a/src/api/data-model/SubRoutineReferenceDto.ts b/src/api/data-model/SubRoutineReferenceDto.ts
new file mode 100644
index 0000000..c6f2b16
--- /dev/null
+++ b/src/api/data-model/SubRoutineReferenceDto.ts
@@ -0,0 +1,6 @@
+import { SubRoutineDefinitionDto } from "./SubRoutineDefinitionDto";
+
+export interface SubRoutineReferenceDto {
+  subRoutine: SubRoutineDefinitionDto;
+  subProblemIds: string[];
+}
diff --git a/src/components/demonstrators/Demonstrator.tsx b/src/components/demonstrators/Demonstrator.tsx
new file mode 100644
index 0000000..4e704fc
--- /dev/null
+++ b/src/components/demonstrators/Demonstrator.tsx
@@ -0,0 +1,126 @@
+import {
+  Button,
+  FormControl,
+  FormLabel,
+  HStack,
+  Spinner,
+  Text,
+  Tooltip,
+  VStack,
+} from "@chakra-ui/react";
+import { useEffect, useState } from "react";
+import { getInvalidProblemDto } from "../../api/data-model/ProblemDto";
+import { ProblemState } from "../../api/data-model/ProblemState";
+import { SolverSetting } from "../../api/data-model/SolverSettings";
+import { fetchSolverSettings, postProblem } from "../../api/ToolboxAPI";
+import { settingComponentMap } from "../solvers/settings/SettingsView";
+
+export interface DemonstratorProps {
+  demonstratorId: string;
+  onSolved: (solution: string) => void;
+}
+
+enum DemonstratorState {
+  IDLE,
+  SOLVING,
+  SOLVED,
+}
+
+function getHumanReadableState(state: DemonstratorState) {
+  switch (state) {
+    case DemonstratorState.IDLE:
+      return "Go";
+    case DemonstratorState.SOLVING:
+      return (
+        <HStack gap="1rem">
+          <Text>Running</Text>
+          <Spinner speed="1s" width="10px" height="10px" thickness="1px" />
+        </HStack>
+      );
+    case DemonstratorState.SOLVED:
+      return "Run again";
+  }
+}
+
+const demonstratorTypeId = "demonstrator";
+
+export const Demonstrator = (props: DemonstratorProps) => {
+  const [settings, setSettings] = useState<SolverSetting[]>([]);
+  const [state, setState] = useState<DemonstratorState>(DemonstratorState.IDLE);
+  const [error, setError] = useState<string>("");
+
+  useEffect(() => {
+    fetchSolverSettings(demonstratorTypeId, props.demonstratorId).then(
+      setSettings
+    );
+  }, [props.demonstratorId]);
+
+  function updateSetting(newSetting: SolverSetting) {
+    const index = settings.findIndex(
+      (setting) => setting.name === newSetting.name
+    );
+    if (index !== -1) {
+      settings.splice(index, 1, newSetting);
+    }
+
+    setSettings([...settings]);
+  }
+
+  return (
+    <VStack spacing={5}>
+      {settings.map((setting) => {
+        const SettingComponent = settingComponentMap[setting.type];
+        return (
+          <FormControl
+            key={setting.name}
+            id={setting.name}
+            isRequired={setting.required}
+          >
+            <Tooltip label={setting.description}>
+              <FormLabel>{setting.name}</FormLabel>
+            </Tooltip>
+            <SettingComponent setting={setting} updateSetting={updateSetting} />
+          </FormControl>
+        );
+      })}
+
+      <Button
+        bg="kitGreen"
+        width="100%"
+        _hover={{
+          bg:
+            state === DemonstratorState.SOLVING ? "kitGreen" : "kitGreenAlpha",
+        }}
+        textColor="white"
+        onClick={() => {
+          if (state === DemonstratorState.SOLVING) return;
+
+          setState(DemonstratorState.SOLVING);
+          postProblem(demonstratorTypeId, {
+            ...getInvalidProblemDto(),
+            input: "",
+            solverId: props.demonstratorId,
+            state: ProblemState.SOLVING,
+            solverSettings: settings,
+          }).then((problemDto) => {
+            setState(DemonstratorState.SOLVED);
+            if (problemDto.error) {
+              setError(problemDto.error);
+              props.onSolved("");
+            } else if (problemDto.solution?.debugData) {
+              setError(problemDto.solution.debugData);
+              props.onSolved("");
+            } else {
+              setError("");
+              props.onSolved(problemDto.solution.solutionData);
+            }
+          });
+        }}
+      >
+        {getHumanReadableState(state)}
+      </Button>
+
+      {error && <Text color="red">{error}</Text>}
+    </VStack>
+  );
+};
diff --git a/src/components/landing-page/Card.tsx b/src/components/landing-page/Card.tsx
new file mode 100644
index 0000000..14d3229
--- /dev/null
+++ b/src/components/landing-page/Card.tsx
@@ -0,0 +1,65 @@
+import { Badge, Box, LinkBox, LinkOverlay } from "@chakra-ui/react";
+import NextLink from "next/link";
+
+export interface CardProps {
+  href: string;
+  new?: boolean;
+  tags?: string[];
+  title: string;
+  description: string;
+}
+
+export const Card = (props: CardProps & { refer: string }) => {
+  return (
+    <LinkBox maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
+      <Box p="6">
+        <Box display="flex" alignItems="baseline">
+          {props.new && (
+            <Badge borderRadius="full" px="2" colorScheme="blue" mr="2">
+              New!
+            </Badge>
+          )}
+          <Box
+            color="gray.500"
+            fontWeight="semibold"
+            letterSpacing="wide"
+            fontSize="xs"
+            textTransform="uppercase"
+          >
+            {props.tags &&
+              props.tags.map((tag) => (
+                <Badge
+                  key={tag}
+                  borderRadius="full"
+                  px="2"
+                  colorScheme="teal"
+                  mr="2"
+                >
+                  {tag}
+                </Badge>
+              ))}
+          </Box>
+        </Box>
+
+        <Box
+          mt="2"
+          mb="1"
+          fontWeight="semibold"
+          as="h4"
+          lineHeight="tight"
+          noOfLines={1}
+        >
+          <NextLink href={props.href} passHref>
+            <LinkOverlay>{props.title}</LinkOverlay>
+          </NextLink>
+        </Box>
+
+        <Box>{props.description}</Box>
+
+        <Box fontWeight="semibold" mt="4">
+          {props.refer} &rarr;
+        </Box>
+      </Box>
+    </LinkBox>
+  );
+};
diff --git a/src/components/landing-page/DemonstratorCard.tsx b/src/components/landing-page/DemonstratorCard.tsx
new file mode 100644
index 0000000..ecbbac7
--- /dev/null
+++ b/src/components/landing-page/DemonstratorCard.tsx
@@ -0,0 +1,5 @@
+import { Card, CardProps } from "./Card";
+
+export const DemonstratorCard = (props: CardProps) => {
+  return <Card {...props} refer="Demonstrate" />;
+};
diff --git a/src/components/landing-page/DemonstratorChooser.tsx b/src/components/landing-page/DemonstratorChooser.tsx
new file mode 100644
index 0000000..ede48b3
--- /dev/null
+++ b/src/components/landing-page/DemonstratorChooser.tsx
@@ -0,0 +1,15 @@
+import { Grid, GridItem, GridProps } from "@chakra-ui/react";
+import { DemonstratorCard } from "./DemonstratorCard";
+
+export const DemonstratorChooser = (props: GridProps) => (
+  <Grid templateColumns="repeat(2, 1fr)" gap={6} {...props}>
+    <GridItem>
+      <DemonstratorCard
+        new={true}
+        href="demonstrate/MixedIntegerProgramming"
+        title="Mixed Integer Programming"
+        description="The MIP problem is a mathematical optimization problem where some or all of the variables are restricted to be integers."
+      />
+    </GridItem>
+  </Grid>
+);
diff --git a/src/components/landing-page/ProblemCard.tsx b/src/components/landing-page/ProblemCard.tsx
index e280c07..d262a75 100644
--- a/src/components/landing-page/ProblemCard.tsx
+++ b/src/components/landing-page/ProblemCard.tsx
@@ -1,64 +1,5 @@
-import { LinkBox, LinkOverlay, Box, Image, Badge } from "@chakra-ui/react";
-import NextLink from "next/link";
+import { Card, CardProps } from "./Card";
 
-interface ProblemCardProps {
-  href: string;
-  new: boolean;
-  tags: string[];
-  problemName: string;
-  description: string;
-}
-
-export const ProblemCard = (props: ProblemCardProps) => {
-  return (
-    <LinkBox maxW="sm" borderWidth="1px" borderRadius="lg" overflow="hidden">
-      <Box p="6">
-        <Box display="flex" alignItems="baseline">
-          {props.new && (
-            <Badge borderRadius="full" px="2" colorScheme="blue" mr="2">
-              New
-            </Badge>
-          )}
-          <Box
-            color="gray.500"
-            fontWeight="semibold"
-            letterSpacing="wide"
-            fontSize="xs"
-            textTransform="uppercase"
-          >
-            {props.tags.map((tag) => (
-              <Badge
-                key={tag}
-                borderRadius="full"
-                px="2"
-                colorScheme="teal"
-                mr="2"
-              >
-                {tag}
-              </Badge>
-            ))}
-          </Box>
-        </Box>
-
-        <Box
-          mt="2"
-          mb="1"
-          fontWeight="semibold"
-          as="h4"
-          lineHeight="tight"
-          noOfLines={1}
-        >
-          <NextLink href={props.href} passHref>
-            <LinkOverlay>{props.problemName}</LinkOverlay>
-          </NextLink>
-        </Box>
-
-        <Box>{props.description}</Box>
-
-        <Box fontWeight="semibold" mt="4">
-          Solve this problem &rarr;
-        </Box>
-      </Box>
-    </LinkBox>
-  );
+export const ProblemCard = (props: CardProps) => {
+  return <Card {...props} refer="Solve this problem" />;
 };
diff --git a/src/components/landing-page/ProblemChooser.tsx b/src/components/landing-page/ProblemChooser.tsx
index bd1bde4..5c58733 100644
--- a/src/components/landing-page/ProblemChooser.tsx
+++ b/src/components/landing-page/ProblemChooser.tsx
@@ -6,28 +6,61 @@ export const ProblemChooser = (props: GridProps) => (
     <GridItem>
       <ProblemCard
         href="solve/SAT"
-        new={false}
         tags={["simulated"]}
-        problemName="SAT"
+        title="SAT"
         description="For a given Boolean formula, this algorithm checks if there exists an interpretation that satisfies it."
       />
     </GridItem>
     <GridItem>
       <ProblemCard
         href="solve/MaxCut"
-        new={false}
-        tags={["QAOA", "simulated"]}
-        problemName="MaxCut"
+        tags={["QAOA"]}
+        title="MaxCut"
         description="For a given undirected, weighted graph, this algorithm finds a cut that is a maximum in some way or another."
       />
     </GridItem>
     <GridItem>
       <ProblemCard
         href="solve/FeatureModelAnomaly"
-        new={false}
-        tags={["sub-routines"]}
-        problemName="Feature Model Anomaly"
-        description="For a given feature model, check for Void Feature Model, Dead Features, False-Optional Features, Redundant Constraints.."
+        tags={["sub-routines", "SAT"]}
+        title="Feature Model Anomaly"
+        description="Check whether a given feature model in the UVL format is void or if it has dead features."
+      />
+    </GridItem>
+    <GridItem>
+      <ProblemCard
+        href="solve/QUBO"
+        new={true}
+        tags={["QAOA", "Annealing"]}
+        title="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"]}
+        title="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"]}
+        title="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>
+    <GridItem>
+      <ProblemCard
+        href="solve/Knapsack"
+        new={true}
+        tags={["QAOA"]}
+        title={"Knapsack"}
+        description="Given a list of items with weights and values, find a subset of items with the highest total value up to a certain weight limit."
       />
     </GridItem>
   </Grid>
diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx
index 2b2e31c..60113c1 100644
--- a/src/components/layout/Layout.tsx
+++ b/src/components/layout/Layout.tsx
@@ -1,9 +1,9 @@
-import { ReactElement, ReactNode } from "react";
+import { Spacer } from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { Container } from "../Container";
 import { Hero } from "../landing-page/Hero";
 import { Main } from "../Main";
-import { Container } from "../Container";
 import { Footer } from "./Footer";
-import { Spacer } from "@chakra-ui/react";
 
 export const Layout = (props: { children: ReactNode }) => (
   <Container minHeight="100vh">
diff --git a/src/components/solvers/EditorControls.tsx b/src/components/solvers/EditorControls.tsx
index f643079..c7d8994 100644
--- a/src/components/solvers/EditorControls.tsx
+++ b/src/components/solvers/EditorControls.tsx
@@ -5,9 +5,15 @@ import {
   Text,
   Tooltip,
 } from "@chakra-ui/react";
-import { TbDownload, TbHelp, TbUpload } from "react-icons/tb";
-import { chooseFile } from "./FileInput";
+import {
+  TbDownload,
+  TbHelp,
+  TbRepeat,
+  TbTrash,
+  TbUpload,
+} from "react-icons/tb";
 import { baseUrl } from "../../api/ToolboxAPI";
+import { chooseFile } from "./FileInput";
 
 export interface EditorControlsProps {
   /**
@@ -25,9 +31,9 @@ export interface EditorControlsProps {
    */
   editorContent: string;
   /**
-   * Contents of uploaded problem files will be sent to this handler.
+   * Function to set the contents of the editor that these controls relate to.
    */
-  onUpload: (uploadContent: string) => void;
+  setEditorContent: (newContent: string) => void;
 
   /**
    * Link to the documentation for the problem type that is being edited.
@@ -74,7 +80,7 @@ export const EditorControls = (props: EditorControlsProps) => {
   return (
     <HStack justifyContent={"space-between"} width="100%">
       {props.errorText ? (
-        <Text backgroundColor="tomato">{props.errorText}</Text>
+        <Text textColor="tomato">{props.errorText}</Text>
       ) : (
         <Text as="i">{props.idleText}</Text>
       )}
@@ -90,7 +96,26 @@ export const EditorControls = (props: EditorControlsProps) => {
           <IconButton
             aria-label="Upload"
             icon={<TbUpload />}
-            onClick={() => upload(props.onUpload)}
+            onClick={() => upload(props.setEditorContent)}
+          />
+        </Tooltip>
+        <Tooltip label="Reset the problem">
+          <IconButton
+            aria-label="Reset"
+            icon={<TbTrash />}
+            onClick={() => props.setEditorContent("")}
+          />
+        </Tooltip>
+        <Tooltip label="Restart the problem">
+          <IconButton
+            aria-label="Restart"
+            icon={<TbRepeat />}
+            onClick={() => {
+              props.setEditorContent("");
+              setTimeout(() => {
+                props.setEditorContent(props.editorContent);
+              });
+            }}
           />
         </Tooltip>
         <Tooltip label="Open the documentation">
diff --git a/src/components/solvers/FileInput.tsx b/src/components/solvers/FileInput.tsx
index 15b8b87..92b7ce4 100644
--- a/src/components/solvers/FileInput.tsx
+++ b/src/components/solvers/FileInput.tsx
@@ -1,5 +1,3 @@
-import React from "react";
-
 export async function chooseFile(
   multiple?: boolean,
   accept?: string
diff --git a/src/components/solvers/Graph/GMLGraphView.tsx b/src/components/solvers/Graph/GMLGraphView.tsx
new file mode 100644
index 0000000..55a10eb
--- /dev/null
+++ b/src/components/solvers/Graph/GMLGraphView.tsx
@@ -0,0 +1,100 @@
+import { useEffect } from "react";
+import {
+  Controls,
+  Edge,
+  Node,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { parseGML } from "../../../converter/graph/gml/GmlParser";
+
+export const GMLGraphView = (props: { gml: string }) => {
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node[]>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge[]>([]);
+
+  useEffect(() => {
+    let { nodes, edges } = gmlToReactFlow(props.gml);
+    setEdges(edges);
+    setNodes(nodes);
+
+    function gmlToReactFlow(gml: string): { nodes: Node[]; edges: Edge[] } {
+      if (gml == null || gml == "") return { nodes: [], edges: [] };
+
+      let graph: any;
+      try {
+        graph = parseGML(gml);
+      } catch (e) {
+        return { nodes: [], edges: [] };
+      }
+
+      function getNodeType(node: any): string {
+        let input = false;
+        let output = false;
+        for (let edge of graph.edges) {
+          if (edge.source == node.id) {
+            input = true;
+          }
+          if (edge.target == node.id) {
+            output = true;
+          }
+        }
+
+        if (input && output) {
+          return "default";
+        } else if (input) {
+          return "input";
+        } else if (output) {
+          return "output";
+        } else {
+          return "default";
+        }
+      }
+
+      let nodes: Node[] = graph.nodes.map((node: any, i: number) => {
+        let n: Node = {
+          id: node.id,
+          data: { label: node.label },
+          type: getNodeType(node),
+          position: {
+            x: 0,
+            y: i * 100,
+          },
+        };
+        return n;
+      });
+
+      let edges: Edge[] = graph.edges.map((edge: any, i: number) => {
+        let e: Edge = {
+          id: i.toString(),
+          source: edge.source,
+          target: edge.target,
+          label: edge.label,
+        };
+        return e;
+      });
+
+      return { nodes, edges };
+    }
+  }, [props.gml, setEdges, setNodes]);
+
+  return (
+    <div
+      style={{
+        width: "50vw",
+        height: "50vh",
+      }}
+    >
+      <ReactFlow
+        nodes={nodes}
+        edges={edges}
+        onNodesChange={onNodesChange}
+        onEdgesChange={onEdgesChange}
+        fitView
+      >
+        <Controls />
+      </ReactFlow>
+    </div>
+  );
+};
diff --git a/src/components/solvers/Graph/GraphArea.tsx b/src/components/solvers/Graph/GraphArea.tsx
deleted file mode 100644
index 63adbae..0000000
--- a/src/components/solvers/Graph/GraphArea.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Box, Center, Container, Select, Spacer } from "@chakra-ui/react";
-import React, { useEffect, useRef, useState } from "react";
-import G6, { Graph, GraphData } from "@antv/g6";
-
-interface GraphAreaProps {
-  graphData: GraphData;
-
-  graphHeight: number;
-  graphWidth: number;
-}
-
-export const GraphArea = (props: GraphAreaProps) => {
-  const graphTypes = [
-    "random",
-    "force",
-    "circular",
-    "radial",
-    "mds",
-    "dagre",
-    "concentric",
-    "grid",
-  ];
-
-  const graphRef = useRef<HTMLDivElement>(null);
-  const [graph, setGraph] = useState<Graph | null>(null);
-  const [graphDirected, setGraphDirected] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (!graph && graphRef.current && graphRef.current.children.length == 0) {
-      setGraph(
-        new G6.Graph({
-          container: graphRef.current,
-          width: 500,
-          height: 500,
-          modes: {
-            default: ["drag-canvas", "zoom-canvas", "drag-node"],
-          },
-          defaultEdge: {
-            style: {
-              startArrow: true,
-              endArrow: true,
-            },
-          },
-        })
-      );
-    }
-
-    if (graph && props.graphData) {
-      graph.data(props.graphData);
-      graph.render();
-      updateGraphDirected(props.graphData.directed == "1" ?? false);
-    }
-
-    function updateGraphDirected(directed: boolean) {
-      if (!graph || graphDirected == directed) return;
-      setGraphDirected(directed);
-
-      if (directed) {
-        for (let edge of graph.getEdges()) {
-          graph.update(edge, {
-            style: {
-              startArrow: false,
-              endArrow: true,
-            },
-          });
-        }
-      } else {
-        for (let edge of graph.getEdges()) {
-          graph.update(edge, {
-            style: {
-              startArrow: true,
-              endArrow: true,
-            },
-          });
-        }
-      }
-    }
-  }, [graph, graphDirected, props.graphData]);
-
-  return (
-    <Container
-      border="1px"
-      borderColor="#AAAAAA"
-      borderRadius="10px"
-      padding={5}
-    >
-      <Select
-        placeholder="Select graph layout"
-        onChange={(e) => graph?.updateLayout({ type: e.target.value })}
-      >
-        {graphTypes.map((type) => (
-          <option key={type}>{type}</option>
-        ))}
-      </Select>
-
-      <Spacer h={2} />
-
-      <Center>
-        <Box
-          ref={graphRef}
-          borderWidth="3px"
-          borderRadius="lg"
-          width={props.graphWidth}
-          height={props.graphHeight}
-        />
-      </Center>
-    </Container>
-  );
-};
diff --git a/src/components/solvers/Graph/ProblemDetails.tsx b/src/components/solvers/Graph/ProblemDetails.tsx
new file mode 100644
index 0000000..0a206c7
--- /dev/null
+++ b/src/components/solvers/Graph/ProblemDetails.tsx
@@ -0,0 +1,103 @@
+import {
+  Accordion,
+  AccordionButton,
+  AccordionIcon,
+  AccordionItem,
+  AccordionPanel,
+  Box,
+  Text,
+  Textarea,
+  VStack,
+} from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { ProblemDto } from "../../../api/data-model/ProblemDto";
+import { ProblemState } from "../../../api/data-model/ProblemState";
+import { SettingsView } from "../settings/SettingsView";
+import { SolutionView } from "../SolutionView";
+import { useGraphUpdates } from "./ProblemGraphView";
+import { useSolvers } from "./SolverProvider";
+
+function getHumanReadableState(state: ProblemState) {
+  switch (state) {
+    case ProblemState.NEEDS_CONFIGURATION:
+      return "Needs Configuration";
+    case ProblemState.READY_TO_SOLVE:
+      return "Ready to Solve";
+    case ProblemState.SOLVING:
+      return "Solving";
+    case ProblemState.SOLVED:
+      return "Solved";
+  }
+}
+
+function getAccordionItem(label: string, content: ReactNode) {
+  return (
+    <AccordionItem key={label}>
+      <h2>
+        <AccordionButton>
+          <Box as="span" flex="1" textAlign="left">
+            {label}
+          </Box>
+          <AccordionIcon />
+        </AccordionButton>
+      </h2>
+      <AccordionPanel pb="4">{content}</AccordionPanel>
+    </AccordionItem>
+  );
+}
+
+export const ProblemDetails = (props: { problemDto: ProblemDto<any> }) => {
+  const { solvers, getSolvers } = useSolvers();
+  const { updateProblem } = useGraphUpdates();
+
+  // Update solvers in case they are not loaded yet
+  if (!solvers[props.problemDto.typeId]) getSolvers(props.problemDto.typeId);
+
+  const solver = solvers[props.problemDto.typeId]?.find(
+    (s) => s.id === props.problemDto.solverId
+  );
+
+  return (
+    <VStack gap="20px" align="start">
+      <Textarea readOnly resize="vertical" value={props.problemDto.input} />
+      <Text>
+        <b>Status:</b> {getHumanReadableState(props.problemDto.state)}
+      </Text>
+      <Text>
+        <b>Solver:</b> {solver?.name ?? "-"}
+      </Text>
+      {solver && (
+        <VStack width="100%" align="stretch">
+          <Text fontWeight="bold">Solver Settings:</Text>
+          <SettingsView
+            problemDto={props.problemDto}
+            settingsChanged={(settings) => {
+              updateProblem(props.problemDto.id);
+            }}
+          />
+        </VStack>
+      )}
+      {props.problemDto.subProblems.length === 0 ? (
+        <b>No subroutines</b>
+      ) : (
+        <VStack width="100%" align="stretch">
+          <Text fontWeight="bold">Sub Routines:</Text>
+          <Accordion>
+            {props.problemDto.subProblems.map((subProblem) =>
+              getAccordionItem(
+                subProblem.subRoutine.typeId,
+                subProblem.subRoutine.description
+              )
+            )}
+          </Accordion>
+        </VStack>
+      )}
+      {props.problemDto.solution !== null && (
+        <VStack width="100%" align="stretch">
+          <Text fontWeight="bold">Solution:</Text>
+          <SolutionView solution={props.problemDto.solution} />
+        </VStack>
+      )}
+    </VStack>
+  );
+};
diff --git a/src/components/solvers/Graph/ProblemGraphView.tsx b/src/components/solvers/Graph/ProblemGraphView.tsx
new file mode 100644
index 0000000..370dea3
--- /dev/null
+++ b/src/components/solvers/Graph/ProblemGraphView.tsx
@@ -0,0 +1,645 @@
+import { Flex, VStack } from "@chakra-ui/react";
+import type { XYPosition } from "@reactflow/core/dist/esm/types";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from "react";
+import {
+  Controls,
+  Edge,
+  Node,
+  NodeTypes,
+  ReactFlow,
+  ReactFlowInstance,
+  useEdgesState,
+  useNodesState,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import { ProblemDto } from "../../../api/data-model/ProblemDto";
+import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
+import { ProblemState } from "../../../api/data-model/ProblemState";
+import { SubRoutineDefinitionDto } from "../../../api/data-model/SubRoutineDefinitionDto";
+import { SubRoutineReferenceDto } from "../../../api/data-model/SubRoutineReferenceDto";
+import { fetchProblem, patchProblem } from "../../../api/ToolboxAPI";
+import { SolutionView } from "../SolutionView";
+import { LevelInfo, ProblemNode, ProblemNodeData } from "./ProblemNode";
+import { SolverNode } from "./SolverNode";
+import { useSolvers } from "./SolverProvider";
+
+interface ProblemEdgeData {
+  sourceProblemDto: ProblemDto<any>;
+}
+
+export interface ProblemGraphViewProps {
+  problemTypeId: string;
+  problemId: string;
+}
+
+export interface ProblemNodeIdentifier {
+  subRoutineDefinitionDto: SubRoutineDefinitionDto;
+  solverId?: string;
+}
+
+/**
+ * Nodes are identified recursively through their parent node and the sub-routine definition.
+ * Each node can represent either one problem or a collection of problems,
+ * but they share the same sub-routine definition and recursive context.
+ * @param identifier Identifier for the problem node
+ * @param parentNode
+ */
+function getNodeId(
+  identifier: ProblemNodeIdentifier,
+  parentNode: Node
+): string {
+  return (
+    parentNode.id +
+    "|" +
+    identifier.subRoutineDefinitionDto.typeId +
+    "-" +
+    identifier.subRoutineDefinitionDto.description +
+    "-" +
+    identifier.solverId
+  );
+}
+
+function getParentNodeId(nodeId: string): string {
+  return nodeId.substring(0, nodeId.lastIndexOf("|"));
+}
+
+function getChildNodes(
+  nodes: Node[],
+  parentNode: Node,
+  typeId?: string
+): Node[] {
+  return nodes.filter((n) => {
+    if (n.type !== "problemNode") return false;
+    if (!n.id.startsWith(parentNode.id)) return false;
+
+    const subString = n.id.substring(parentNode.id.length + 1);
+    return (
+      subString.indexOf("|") === -1 &&
+      (typeId == undefined || subString.startsWith(typeId))
+    );
+  });
+}
+
+/**
+ * Edge identifiers are determined by the source and target node identifiers.
+ * @param to The target sub-routine definition
+ * @param fromId The source node
+ */
+function getEdgeId(to: ProblemNodeIdentifier, fromId: Node): string {
+  return fromId + "->" + getNodeId(to, fromId);
+}
+
+function getNodePosition(data: ProblemNodeData): XYPosition {
+  return {
+    x: getNodePositionX(data.levelInfo),
+    y: getNodePositionY(data.level),
+  };
+}
+
+function getNodePositionX(levelInfo: LevelInfo | null): number {
+  return levelInfo == null ? 0 : levelInfo.index * 200 - levelInfo.count * 50;
+}
+
+function getNodePositionY(level: number): number {
+  return level * 200;
+}
+
+function groupBySolver(problemDtos: ProblemDto<any>[]) {
+  let solvers = new Map<string | undefined, ProblemDto<any>[]>();
+  for (let problemDto of problemDtos) {
+    const problems = solvers.get(problemDto.solverId);
+    if (problems) {
+      problems.push(problemDto);
+    } else {
+      solvers.set(problemDto.solverId, [problemDto]);
+    }
+  }
+  return solvers;
+}
+
+const nodeTypes: NodeTypes = {
+  solverNode: SolverNode,
+  problemNode: ProblemNode,
+};
+const solverNodeIdentifier: string = "-solver-node-";
+const solverEdgeIdentifier: string = "-solver-edge-";
+
+export interface GraphUpdateProps {
+  updateProblem: (problemId: string) => void;
+}
+
+const GraphUpdateContext = createContext<GraphUpdateProps>({
+  updateProblem: (_) => {},
+});
+
+export const useGraphUpdates = () => useContext(GraphUpdateContext);
+
+export const ProblemGraphView = (props: ProblemGraphViewProps) => {
+  const [nodeIds, setNodeIds] = useState<string[]>([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<any>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<ProblemEdgeData>([]);
+  const [graphInstance, setGraphInstance] = useState<
+    ReactFlowInstance | undefined
+  >(undefined);
+  const solutionViewRef = useRef<HTMLDivElement>(null);
+
+  const { getSolvers } = useSolvers();
+
+  /**
+   * Node updates are scheduled in order to provide an asynchronous update mechanism.
+   */
+  const [scheduledNodeUpdates, setScheduledNodeUpdates] = useState<Node[]>([]);
+
+  const scheduleNodeUpdate = useCallback((updateNode: Node) => {
+    setScheduledNodeUpdates((nodes) =>
+      nodes.filter((n) => n.id != updateNode.id).concat(updateNode)
+    );
+  }, []);
+
+  const addNode = useCallback(
+    (newNode: Node) => {
+      setNodes((previousNodes) => {
+        let existingNode = previousNodes.find((node) => node.id === newNode.id);
+        if (existingNode) {
+          return previousNodes;
+        }
+
+        return previousNodes.concat(newNode);
+      });
+    },
+    [setNodes]
+  );
+
+  const addEdge = useCallback(
+    (newEdge: Edge) => {
+      setEdges((edges) => {
+        let existingEdge = edges.find((edge) => edge.id === newEdge.id);
+        if (existingEdge) {
+          return edges;
+        }
+
+        return edges.concat(newEdge);
+      });
+    },
+    [setEdges]
+  );
+
+  const createProblemNode = useCallback(
+    (nodeId: string, nodeData: ProblemNodeData) => {
+      let node: Node<ProblemNodeData> = {
+        id: nodeId,
+        data: nodeData,
+        position: getNodePosition(nodeData),
+        type: "problemNode",
+      };
+
+      addNode(node);
+
+      return node;
+    },
+    [addNode]
+  );
+
+  const updateEdge = useCallback(
+    (edge: Edge<ProblemEdgeData>) => {
+      setEdges((edges) =>
+        edges.map((e) => {
+          if (e.id !== edge.id) return e;
+
+          return {
+            ...e,
+            animated:
+              edge.data?.sourceProblemDto.state === ProblemState.SOLVING,
+          };
+        })
+      );
+    },
+    [setEdges]
+  );
+
+  const createSolverNodes = useCallback(
+    (node: Node<ProblemNodeData>) => {
+      getSolvers(node.data.problemDtos[0].typeId).then((solvers) => {
+        for (let i = 0; i < solvers.length; i++) {
+          let solverId =
+            node.id + solverNodeIdentifier + solvers[i].id.toString();
+
+          addNode({
+            id: solverId,
+            data: {
+              problemTypeId: node.data.problemDtos[0].typeId,
+              problemSolver: solvers[i],
+              selectCallback: (problemSolver: ProblemSolverInfo) => {
+                let edge = edges.find((e) =>
+                  e.target.startsWith(node.id + solverEdgeIdentifier)
+                );
+                if (edge) {
+                  updateEdge(edge);
+                }
+
+                Promise.all(
+                  node.data.problemDtos.map((problemDto) =>
+                    patchProblem(problemDto.typeId, problemDto.id, {
+                      solverId: problemSolver.id,
+                    })
+                  )
+                ).then((dtos) => {
+                  setNodes((previousNodes) =>
+                    previousNodes.map((n) => {
+                      if (n.id !== node.id) return n;
+
+                      let updatedNode: Node<ProblemNodeData> = {
+                        ...n,
+                        data: {
+                          ...n.data,
+                          problemDtos: dtos,
+                        },
+                      };
+                      scheduleNodeUpdate(updatedNode);
+
+                      return updatedNode;
+                    })
+                  );
+                });
+              },
+            },
+            position: {
+              x:
+                node.position.x +
+                getNodePositionX({ index: i, count: solvers.length }),
+              y: getNodePositionY(node.data.level + 1),
+            },
+            type: "solverNode",
+          });
+
+          addEdge({
+            id: node.id + solverEdgeIdentifier + solverId,
+            type: "step",
+            source: node.id,
+            target: solverId,
+          });
+        }
+      });
+    },
+    [
+      addEdge,
+      addNode,
+      edges,
+      getSolvers,
+      scheduleNodeUpdate,
+      setNodes,
+      updateEdge,
+    ]
+  );
+
+  const removeSolverNodes = useCallback(
+    (node: Node<ProblemNodeData>) => {
+      setNodes((previousNodes) =>
+        previousNodes.filter(
+          (n) => !n.id.startsWith(node.id + solverNodeIdentifier)
+        )
+      );
+      setEdges((edges) =>
+        edges.filter((e) => !e.id.startsWith(node.id + solverEdgeIdentifier))
+      );
+    },
+    [setEdges, setNodes]
+  );
+
+  const updateSolverNodes = useCallback(
+    (node: Node<ProblemNodeData>) => {
+      // Load solver nodes when user action is required
+      if (node.data.problemDtos[0].solverId === undefined) {
+        const existingSolverNode = nodes.find((n) =>
+          n.id.startsWith(node.id + solverNodeIdentifier)
+        );
+        if (existingSolverNode === undefined) {
+          createSolverNodes(node);
+        }
+      } else {
+        removeSolverNodes(node);
+      }
+    },
+    [createSolverNodes, nodes, removeSolverNodes]
+  );
+
+  const updateNodeData = useCallback(
+    (
+      nodeId: string,
+      updateNode: (node: Node<ProblemNodeData>) => Node<ProblemNodeData>
+    ) => {
+      setNodes((previousNodes) =>
+        previousNodes.map((node) => {
+          if (node.id !== nodeId) return node;
+
+          return updateNode(node);
+        })
+      );
+    },
+    [setNodes]
+  );
+
+  const updateProblem = useCallback(
+    (problemId: string) => {
+      const node = nodes.find((n) => {
+        if (n.data.problemDtos === undefined) {
+          return false;
+        }
+
+        return n.data.problemDtos.find(
+          (p: ProblemDto<any>) => p.id === problemId
+        );
+      });
+
+      if (!node) return;
+
+      // Get parent node
+      const parentNodeId = getParentNodeId(node.id);
+      const parentNode = nodes.find((n) => n.id === parentNodeId);
+
+      if (parentNode) {
+        scheduleNodeUpdate(parentNode);
+      } else {
+        fetchProblem(node.data.problemDtos[0].typeId, problemId).then((dto) => {
+          node.data.problemDtos = [dto];
+          scheduleNodeUpdate(node);
+        });
+      }
+    },
+    [nodes, scheduleNodeUpdate]
+  );
+
+  const updateNode = useCallback(
+    (node: Node<ProblemNodeData>) => {
+      updateSolverNodes(node);
+
+      // Update node data
+      updateNodeData(node.id, (n) => ({
+        ...n,
+        data: node.data,
+      }));
+      console.log(node.id, node.position.x, node.position.y);
+
+      // Solver id and thus sub problems are the same for all problems, so we can just use the first one
+      let subProblemsPerType: Map<
+        SubRoutineDefinitionDto,
+        SubRoutineReferenceDto[]
+      > = new Map<SubRoutineDefinitionDto, SubRoutineReferenceDto[]>();
+
+      // Collect specific sub problems of all subproblems by sub routine
+      node.data.problemDtos[0].subProblems.forEach((subRoutineReference, i) => {
+        for (let problemDto of node.data.problemDtos) {
+          const references = subProblemsPerType.get(
+            subRoutineReference.subRoutine
+          );
+          if (references) {
+            subProblemsPerType.set(
+              subRoutineReference.subRoutine,
+              references.concat(problemDto.subProblems)
+            );
+          } else {
+            subProblemsPerType.set(subRoutineReference.subRoutine, [
+              problemDto.subProblems[i],
+            ]);
+          }
+        }
+      });
+
+      // Update sub-problem nodes
+      for (let subProblems of Array.from(subProblemsPerType.values())) {
+        // This can use the first sub problem as the relevant parts
+        // (the definition and type of the sub-problem) will be the same for all
+        const subRoutineReference = subProblems[0].subRoutine;
+
+        // Fetch all sub problems to update the sub-problem nodes
+        Promise.all(
+          subProblems
+            .flatMap((x) => x.subProblemIds)
+            .map((subProblemId) =>
+              fetchProblem(subRoutineReference.typeId, subProblemId)
+            )
+        ).then((subProblemDtos) => {
+          // Create sub problem nodes per used solver
+          const problemsPerSolver = groupBySolver(subProblemDtos);
+
+          // Keep a list of all existing child nodes to remove the ones that are not needed anymore
+          let unusedChildNodes = getChildNodes(
+            nodes,
+            node,
+            subRoutineReference.typeId
+          );
+
+          let entries = Array.from(problemsPerSolver.entries());
+          for (let j = 0; j < entries.length; j++) {
+            let [solverId, problemDtos] = entries[j];
+
+            // Schedule update for unsolved base node if all subproblems were solved
+            if (
+              node.data.problemDtos.some(
+                (dto) => dto.state === ProblemState.SOLVING
+              ) &&
+              problemDtos.every((dto) => dto.state === ProblemState.SOLVED)
+            ) {
+              // Schedule update for parent node
+              setTimeout(() => {
+                for (let problemDto of node.data.problemDtos) {
+                  updateProblem(problemDto.id);
+                }
+              }, 500);
+            }
+
+            const problemNodeIdentifier: ProblemNodeIdentifier = {
+              subRoutineDefinitionDto: subRoutineReference,
+              solverId: solverId,
+            };
+
+            const subNodeId = getNodeId(problemNodeIdentifier, node);
+            const edgeId = getEdgeId(problemNodeIdentifier, node);
+
+            // Remove child node from unused list
+            unusedChildNodes = unusedChildNodes.filter(
+              (n) => n.id !== subNodeId
+            );
+
+            const subNode = nodes.find((n) => n.id === subNodeId);
+
+            const nodeData: ProblemNodeData = {
+              problemDtos: problemDtos,
+              level: node.data.level + 1,
+              levelInfo: {
+                index: j,
+                count: entries.length,
+              },
+            };
+
+            if (subNode) {
+              // Update existing node with new data if it exists
+              scheduleNodeUpdate({
+                ...subNode,
+                data: nodeData,
+              });
+
+              const edge = edges.find((edge) => edge.id === edgeId);
+              if (edge) {
+                updateEdge(edge);
+              }
+            } else {
+              // Otherwise create a new node
+              addEdge({
+                id: edgeId,
+                source: node.id,
+                target: subNodeId,
+                data: {
+                  sourceProblemDto: problemDtos,
+                },
+                animated: problemDtos.some(
+                  (dto) => dto.state === ProblemState.SOLVING
+                ),
+              });
+
+              let subNode = createProblemNode(subNodeId, nodeData);
+              scheduleNodeUpdate(subNode);
+            }
+          }
+
+          // Remove all remaining child nodes that are not referenced anymore
+          for (let childNode of unusedChildNodes) {
+            removeSolverNodes(childNode);
+            setNodes((previousNodes) =>
+              previousNodes.filter((n) => n.id !== childNode.id)
+            );
+            setEdges((edges) =>
+              edges.filter((e) => !e.id.startsWith(childNode.id))
+            );
+          }
+        });
+      }
+    },
+    [
+      addEdge,
+      createProblemNode,
+      edges,
+      nodes,
+      removeSolverNodes,
+      scheduleNodeUpdate,
+      setEdges,
+      setNodes,
+      updateEdge,
+      updateNodeData,
+      updateProblem,
+      updateSolverNodes,
+    ]
+  );
+
+  useEffect(() => {
+    if (scheduledNodeUpdates.length === 0) return;
+
+    for (let scheduledNodeUpdate of scheduledNodeUpdates) {
+      updateNode(scheduledNodeUpdate);
+    }
+    setScheduledNodeUpdates((nodes) =>
+      nodes.filter((node) => !scheduledNodeUpdates.includes(node))
+    );
+  }, [scheduledNodeUpdates, updateNode]);
+
+  // Repopulate graph when problem changes
+  useEffect(() => {
+    setNodes([]);
+    setEdges([]);
+    fetchProblem(props.problemTypeId, props.problemId).then((problemDto) => {
+      if (problemDto.error) {
+        console.error(problemDto.error);
+        return;
+      }
+
+      // Create root node
+      let rootNode = createProblemNode(props.problemId, {
+        problemDtos: [problemDto],
+        level: 0,
+        levelInfo: {
+          index: 0,
+          count: 1,
+        },
+      });
+      scheduleNodeUpdate(rootNode);
+    });
+  }, [
+    createProblemNode,
+    props.problemId,
+    props.problemTypeId,
+    scheduleNodeUpdate,
+    setEdges,
+    setNodes,
+  ]);
+
+  // Update node ids when nodes change
+  useEffect(() => {
+    let ids = nodes.sort((a, b) => a.id.localeCompare(b.id)).map((n) => n.id);
+    if (ids.join(",") !== nodeIds.join(",")) {
+      setNodeIds(ids);
+    }
+  }, [graphInstance, nodeIds, nodes]);
+
+  // Fit view when nodes change
+  useEffect(() => {
+    graphInstance?.fitView({
+      duration: 500,
+      nodes: nodeIds.map((id) => ({
+        id: id,
+      })),
+    });
+  }, [graphInstance, nodeIds]);
+
+  useEffect(() => {
+    if (solutionViewRef.current) {
+      solutionViewRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [solutionViewRef.current]);
+
+  return (
+    <GraphUpdateContext.Provider value={{ updateProblem }}>
+      <VStack>
+        <div
+          style={{
+            width: "50vw",
+            height: "50vh",
+          }}
+        >
+          <ReactFlow
+            zoomOnScroll={false}
+            onWheel={(e) => {
+              window.scrollBy({
+                behavior: "smooth",
+                top: e.deltaY,
+                left: e.deltaX,
+              });
+            }}
+            onInit={(reactFlowInstance) => setGraphInstance(reactFlowInstance)}
+            nodes={nodes}
+            edges={edges}
+            onNodesChange={onNodesChange}
+            onEdgesChange={onEdgesChange}
+            nodeTypes={nodeTypes}
+            fitView
+          >
+            <Controls />
+          </ReactFlow>
+        </div>
+        {nodes.length > 0 &&
+          nodes[0].data.problemDtos?.length > 0 &&
+          nodes[0].data.problemDtos[0].state === ProblemState.SOLVED && (
+            <Flex width="full" ref={solutionViewRef}>
+              <SolutionView solution={nodes[0].data.problemDtos[0].solution} />
+            </Flex>
+          )}
+      </VStack>
+    </GraphUpdateContext.Provider>
+  );
+};
diff --git a/src/components/solvers/Graph/ProblemList.tsx b/src/components/solvers/Graph/ProblemList.tsx
new file mode 100644
index 0000000..b4e0838
--- /dev/null
+++ b/src/components/solvers/Graph/ProblemList.tsx
@@ -0,0 +1,207 @@
+import {
+  Flex,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Select,
+  Spinner,
+  Text,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { Dispatch, SetStateAction, useState } from "react";
+import { BiPlay } from "react-icons/bi";
+import { FaQuestion, FaQuestionCircle } from "react-icons/fa";
+import { GrInProgress } from "react-icons/gr";
+import { ImCheckmark } from "react-icons/im";
+import { MdError } from "react-icons/md";
+import {
+  canProblemSolverBeUpdated,
+  ProblemDto,
+} from "../../../api/data-model/ProblemDto";
+import { ProblemState } from "../../../api/data-model/ProblemState";
+import { SolutionStatus } from "../../../api/data-model/SolutionStatus";
+import { patchProblem } from "../../../api/ToolboxAPI";
+import { ProblemDetails } from "./ProblemDetails";
+import { useGraphUpdates } from "./ProblemGraphView";
+import { useSolvers } from "./SolverProvider";
+
+export const ProblemList = (props: {
+  problemDtos: ProblemDto<any>[];
+  selectedProblemIds: string[];
+  setSelectedProblemIds: Dispatch<SetStateAction<string[]>>;
+}) => {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [modalProblemDto, setModalProblemDto] = useState<ProblemDto<any>>();
+  const [lastSelectedProblem, setLastSelectedProblem] = useState<
+    ProblemDto<any> | undefined
+  >(undefined);
+
+  const { solvers } = useSolvers();
+  const { updateProblem } = useGraphUpdates();
+
+  const typeId = props.problemDtos[0].typeId;
+
+  function getStatusIcon(problemDto: ProblemDto<any>): JSX.Element {
+    switch (problemDto.state) {
+      case ProblemState.NEEDS_CONFIGURATION:
+        return <FaQuestion color="red" />;
+      case ProblemState.READY_TO_SOLVE:
+        return (
+          <BiPlay
+            color="green"
+            onClick={() => {
+              patchProblem(problemDto.typeId, problemDto.id, {
+                state: ProblemState.SOLVING,
+              }).then((dto) => {
+                updateProblem(dto.id);
+              });
+            }}
+          />
+        );
+      case ProblemState.SOLVING:
+        return (
+          <Spinner speed="1s" width="10px" height="10px" thickness="1px" />
+        );
+      case ProblemState.SOLVED:
+        switch (problemDto.solution.status) {
+          case SolutionStatus.INVALID:
+            return <MdError color="red" />;
+          case SolutionStatus.COMPUTING:
+            return <GrInProgress />;
+          case SolutionStatus.SOLVED:
+            return <ImCheckmark color="teal" />;
+          case SolutionStatus.ERROR:
+            return <MdError color="red" />;
+        }
+    }
+  }
+
+  function handleClick(
+    e: React.MouseEvent<HTMLDivElement>,
+    clickedSubProblem: ProblemDto<any>
+  ) {
+    setLastSelectedProblem(clickedSubProblem);
+    if (!lastSelectedProblem) {
+      props.setSelectedProblemIds([clickedSubProblem.id]);
+      return;
+    }
+
+    let newProblemIds: string[];
+    if (e.shiftKey) {
+      let lastIndex = props.problemDtos.indexOf(lastSelectedProblem);
+      let currentIndex = props.problemDtos.indexOf(clickedSubProblem);
+      let start = Math.min(lastIndex, currentIndex);
+      let end = Math.max(lastIndex, currentIndex);
+      newProblemIds = props.problemDtos.slice(start, end + 1).map((p) => p.id);
+    } else {
+      newProblemIds = [clickedSubProblem.id];
+    }
+
+    if (e.ctrlKey) {
+      props.setSelectedProblemIds((prev) => [
+        ...prev.filter((id) => !newProblemIds.includes(id)),
+        ...newProblemIds.filter(
+          (id) => lastSelectedProblem.id == id || !prev.includes(id)
+        ),
+      ]);
+    } else {
+      props.setSelectedProblemIds((prev) =>
+        newProblemIds.filter(
+          (id) => lastSelectedProblem.id == id || !prev.includes(id)
+        )
+      );
+    }
+  }
+
+  return (
+    <VStack fontSize="2xs" gap={0}>
+      <Text alignSelf="start">
+        Selected {props.selectedProblemIds.length} of {props.problemDtos.length}
+      </Text>
+
+      <Modal
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior="inside"
+        isCentered
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalCloseButton />
+          <ModalHeader>
+            <Text fontWeight="semibold">{typeId}</Text>
+          </ModalHeader>
+          <ModalBody>
+            {modalProblemDto && <ProblemDetails problemDto={modalProblemDto} />}
+          </ModalBody>
+        </ModalContent>
+      </Modal>
+
+      {props.problemDtos.map((problemDto, index) => (
+        <Flex
+          key={problemDto.id}
+          direction="row"
+          width="100%"
+          alignItems="center"
+          bg={
+            props.selectedProblemIds.find((id) => id == problemDto.id)
+              ? "lightgrey"
+              : "ghostwhite"
+          }
+          onClick={(e) => handleClick(e, problemDto)}
+        >
+          <Flex width=".75rem">{getStatusIcon(problemDto)}</Flex>
+          <Text width="3rem">
+            {typeId} {index + 1}
+          </Text>
+          <Select
+            disabled={!canProblemSolverBeUpdated(problemDto)}
+            variant="unstyled"
+            key={problemDto.id}
+            padding="0px"
+            margin="0px"
+            fontSize="2xs"
+            value={problemDto.solverId ?? ""}
+            onChange={(e) => {
+              patchProblem(problemDto.typeId, problemDto.id, {
+                solverId: e.target.value,
+              }).then((dto) => {
+                updateProblem(dto.id);
+              });
+            }}
+          >
+            {[
+              <option key="" value="">
+                -
+              </option>,
+              ...solvers[problemDto.typeId].map((solverInfo) => (
+                <option key={solverInfo.id} value={solverInfo.id}>
+                  {solverInfo.name}
+                </option>
+              )),
+            ]}
+          </Select>
+
+          <div
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setModalProblemDto(problemDto);
+                onOpen();
+              }
+            }}
+            onClick={() => {
+              setModalProblemDto(problemDto);
+              onOpen();
+            }}
+          >
+            <FaQuestionCircle size="1rem" />
+          </div>
+        </Flex>
+      ))}
+    </VStack>
+  );
+};
diff --git a/src/components/solvers/Graph/ProblemNode.tsx b/src/components/solvers/Graph/ProblemNode.tsx
new file mode 100644
index 0000000..6f1ffdc
--- /dev/null
+++ b/src/components/solvers/Graph/ProblemNode.tsx
@@ -0,0 +1,352 @@
+import {
+  Box,
+  Divider,
+  HStack,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalHeader,
+  ModalOverlay,
+  Spinner,
+  Text,
+  Tooltip,
+  useDisclosure,
+  VStack,
+} from "@chakra-ui/react";
+import { Property } from "csstype";
+import { useEffect, useState } from "react";
+import { BsDatabaseFillGear } from "react-icons/bs";
+import {
+  FaChevronCircleDown,
+  FaChevronCircleUp,
+  FaQuestionCircle,
+} from "react-icons/fa";
+import { FaXmark } from "react-icons/fa6";
+import { Handle, NodeProps, Position } from "reactflow";
+import {
+  canProblemSolverBeUpdated,
+  ProblemDto,
+} from "../../../api/data-model/ProblemDto";
+import { ProblemState } from "../../../api/data-model/ProblemState";
+import { SolutionStatus } from "../../../api/data-model/SolutionStatus";
+import { patchProblem } from "../../../api/ToolboxAPI";
+import { ProblemDetails } from "./ProblemDetails";
+import { useGraphUpdates } from "./ProblemGraphView";
+import { ProblemList } from "./ProblemList";
+import { SolverNodeContent } from "./SolverNodeContent";
+import { useSolvers } from "./SolverProvider";
+import Color = Property.Color;
+
+// Used to determine the horizontal position of the node in the canvas
+export interface LevelInfo {
+  /**
+   * Index of the node at this level
+   */
+  index: number;
+  /**
+   * Total amount of nodes at this level
+   */
+  count: number;
+}
+
+export interface ProblemNodeData {
+  // Data
+  problemDtos: ProblemDto<any>[];
+
+  // Styling info
+  level: number;
+  levelInfo: LevelInfo;
+}
+
+function getNodeType(data: ProblemNodeData): {
+  topHandle: boolean;
+  bottomHandle: boolean;
+} {
+  let topHandle = data.level > 0;
+
+  let bottomHandle =
+    data.problemDtos[0].solverId === undefined ||
+    data.problemDtos.some((dto) => dto.subProblems.length > 0);
+
+  return {
+    topHandle: topHandle,
+    bottomHandle: bottomHandle,
+  };
+}
+
+function getStatusColor(problemDtos: ProblemDto<any>[]): Color {
+  for (let problemDto of problemDtos) {
+    switch (problemDto.state) {
+      case ProblemState.NEEDS_CONFIGURATION:
+        return "ghostwhite";
+      case ProblemState.SOLVED:
+        switch (problemDto.solution.status) {
+          case SolutionStatus.INVALID:
+            return "orange";
+          case SolutionStatus.ERROR:
+            return "red";
+        }
+    }
+  }
+
+  // If all dtos are solved, the whole node should have the solved color
+  if (problemDtos.every((dto) => dto.state === ProblemState.SOLVED)) {
+    return "teal";
+  }
+
+  // Otherwise if any dto is ready to solve or solving, the whole node should have the ready to solve color
+  return "cornflowerblue";
+}
+
+function getState(problemDtos: ProblemDto<any>[]): ProblemState {
+  if (problemDtos.some((dto) => canProblemSolverBeUpdated(dto))) {
+    return ProblemState.READY_TO_SOLVE;
+  } else if (problemDtos.some((dto) => dto.state === ProblemState.SOLVING)) {
+    return ProblemState.SOLVING;
+  } else if (problemDtos.every((dto) => dto.state === ProblemState.SOLVED)) {
+    return ProblemState.SOLVED;
+  } else {
+    return ProblemState.NEEDS_CONFIGURATION;
+  }
+}
+
+export function ProblemNode(props: NodeProps<ProblemNodeData>) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const [selectedProblemIds, setSelectedProblemIds] = useState<string[]>([]);
+  const [nodeState, setNodeState] = useState<ProblemState>(
+    getState(props.data.problemDtos)
+  );
+
+  // Update node state when problems change
+  useEffect(() => {
+    setNodeState(getState(props.data.problemDtos));
+  }, [props.data.problemDtos]);
+
+  const { topHandle, bottomHandle } = getNodeType(props.data);
+  const nodeColor = getStatusColor(props.data.problemDtos);
+
+  const { solvers, getSolvers } = useSolvers();
+  const { updateProblem } = useGraphUpdates();
+
+  // Type id is the same for all problems
+  const typeId = props.data.problemDtos[0].typeId;
+  const solverId = props.data.problemDtos[0].solverId;
+  const solverName = solvers[typeId]?.find((s) => s.id === solverId)?.name;
+
+  // Fetch solvers for type if necessary
+  getSolvers(typeId);
+
+  const extended = solverId && solverName;
+  const multiProblem = props.data.problemDtos.length > 1;
+
+  function disconnect() {
+    for (let problemDto of props.data.problemDtos) {
+      patchProblem(problemDto.typeId, problemDto.id, {
+        solverId: "",
+      }).then((dto) => {
+        updateProblem(dto.id);
+      });
+    }
+  }
+
+  function problemButton() {
+    switch (nodeState) {
+      case ProblemState.READY_TO_SOLVE:
+      case ProblemState.NEEDS_CONFIGURATION:
+        return {
+          label: "Solve",
+          callback: () => {
+            // Set state to solving manually so the ui updates instantly
+            setNodeState(ProblemState.SOLVING);
+
+            for (let problemDto of props.data.problemDtos) {
+              patchProblem(problemDto.typeId, problemDto.id, {
+                state: ProblemState.SOLVING,
+              }).then((dto) => {
+                updateProblem(dto.id);
+              });
+            }
+
+            // Update the state again after a delay to attempt
+            // to ensure that the backend has updated the state
+            setTimeout(() => {
+              for (let problemDto of props.data.problemDtos) {
+                updateProblem(problemDto.id);
+              }
+            }, 500);
+          },
+        };
+      case ProblemState.SOLVING:
+        return {
+          label: (
+            <HStack gap="1rem">
+              <Text fontWeight="bold" fontSize="small" paddingY="1px">
+                Solving
+              </Text>
+              <Spinner speed="1s" width="10px" height="10px" thickness="1px" />
+            </HStack>
+          ),
+        };
+      case ProblemState.SOLVED:
+        return { label: "Solved" };
+    }
+  }
+
+  return (
+    <VStack
+      width="10rem"
+      css={{
+        // prevent this from consuming pointer events
+        pointerEvents: "none",
+        "& > *": {
+          pointerEvents: "auto",
+        },
+      }}
+    >
+      {topHandle && <Handle type="target" position={Position.Top} />}
+      {bottomHandle && <Handle type="source" position={Position.Bottom} />}
+
+      <Box
+        bg="red"
+        border="1px"
+        borderRadius={extended ? "0px" : "10px"}
+        borderTopRadius="10px"
+        background={nodeColor}
+        width="10rem"
+        fontSize="xs"
+        position="relative"
+        zIndex="2"
+      >
+        {["translate(calc(-50% + 50px))", "translate(calc(-50% + -50px))"].map(
+          (transform) => (
+            <div
+              key={transform}
+              style={{
+                position: "absolute",
+                left: "50%",
+                bottom: "-7.5px",
+                width: "14px",
+                height: "14px",
+                transform: transform,
+                zIndex: 10,
+                background: "white",
+                border: "1px solid black",
+                borderRadius: "5px",
+              }}
+            >
+              {extended &&
+                props.data.problemDtos.every((dto) =>
+                  canProblemSolverBeUpdated(dto)
+                ) && <FaXmark color="red" onClick={disconnect} />}
+            </div>
+          )
+        )}
+
+        <HStack
+          align="center"
+          justifyContent="space-between"
+          maxW="10rem"
+          padding="0.5rem"
+          marginBottom={multiProblem ? "0px" : "10px"}
+        >
+          <Tooltip hasArrow label="Problem" placement="bottom">
+            <div style={{ height: "20px" }}>
+              <BsDatabaseFillGear size="1.5rem" />
+            </div>
+          </Tooltip>
+          <Text fontWeight="semibold">
+            {multiProblem ? props.data.problemDtos.length + "x " : ""}
+            {props.data.problemDtos[0].typeId}
+          </Text>
+          <div>
+            <FaQuestionCircle size="1rem" onClick={onOpen} />
+          </div>
+
+          <Modal
+            isOpen={isOpen}
+            onClose={onClose}
+            scrollBehavior="inside"
+            isCentered
+          >
+            <ModalOverlay />
+            <ModalContent>
+              <ModalCloseButton />
+              <ModalHeader>
+                <Text fontWeight="semibold">{typeId}</Text>
+              </ModalHeader>
+              <ModalBody>
+                {props.data.problemDtos.map((problemDto) => (
+                  <div key={problemDto.id}>
+                    <ProblemDetails problemDto={problemDto} />
+                    <Divider />
+                  </div>
+                ))}
+              </ModalBody>
+            </ModalContent>
+          </Modal>
+        </HStack>
+
+        {multiProblem && (
+          <VStack
+            top="10px"
+            borderTop={dropdownOpen ? "1px" : "0px"}
+            position="relative"
+          >
+            <Box
+              position="absolute"
+              bg={nodeColor}
+              borderRadius={10}
+              onClick={() => setDropdownOpen(!dropdownOpen)}
+              left="50%"
+              transform="translate(-50%, -50%)"
+            >
+              {dropdownOpen ? <FaChevronCircleUp /> : <FaChevronCircleDown />}
+            </Box>
+
+            <div
+              style={{
+                width: "100%",
+                maxHeight: "10rem",
+                overflowY: "auto",
+                marginBottom: "10px",
+              }}
+            >
+              {dropdownOpen && (
+                <ProblemList
+                  problemDtos={props.data.problemDtos}
+                  selectedProblemIds={selectedProblemIds}
+                  setSelectedProblemIds={setSelectedProblemIds}
+                />
+              )}
+            </div>
+          </VStack>
+        )}
+      </Box>
+
+      {extended && (
+        <Box
+          alignSelf="stretch"
+          border="1px"
+          borderBottomRadius="10px"
+          padding=".5rem"
+          background="ghostwhite"
+          fontSize="xs"
+          zIndex="0"
+          position="relative"
+          marginTop="-10px"
+        >
+          <SolverNodeContent
+            problemTypeId={typeId}
+            solver={{
+              id: solverId,
+              name: solverName,
+            }}
+            button={problemButton()}
+          />
+        </Box>
+      )}
+    </VStack>
+  );
+}
diff --git a/src/components/solvers/Graph/SolverNode.tsx b/src/components/solvers/Graph/SolverNode.tsx
new file mode 100644
index 0000000..c4d56a8
--- /dev/null
+++ b/src/components/solvers/Graph/SolverNode.tsx
@@ -0,0 +1,59 @@
+import { Box, VStack } from "@chakra-ui/react";
+import { Handle, NodeProps, Position } from "reactflow";
+import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
+import { SolverNodeContent } from "./SolverNodeContent";
+
+export interface SolverNodeData {
+  problemTypeId: string;
+  problemSolver: ProblemSolverInfo;
+  selectCallback: (problemSolver: ProblemSolverInfo) => void;
+}
+
+export function SolverNode(props: NodeProps<SolverNodeData>) {
+  return (
+    <Box
+      border="1px"
+      borderRadius="10px"
+      padding=".5rem"
+      background="ghostwhite"
+      fontSize="xs"
+      css={{
+        "&::before, &::after": {
+          content: '""',
+          position: "absolute",
+          borderBottomRightRadius: "5px",
+          borderBottomLeftRadius: "5px",
+          left: "50%",
+          top: "-0.2px",
+          width: "15px",
+          height: "8px",
+          background: "white",
+          borderLeft: "1px solid black",
+          borderRight: "1px solid black",
+          borderBottom: "1px solid black",
+          zIndex: 10,
+        },
+        "&::before": {
+          transform: "translate(calc(-50% - 50px), -4%)",
+        },
+        "&::after": {
+          transform: "translate(calc(-50% + 50px), -4%)",
+        },
+      }}
+    >
+      <Handle type="target" position={Position.Top} />
+      <VStack gap="0px">
+        <SolverNodeContent
+          problemTypeId={props.data.problemTypeId}
+          solver={props.data.problemSolver}
+          button={{
+            label: "Select",
+            callback: () => {
+              props.data.selectCallback(props.data.problemSolver);
+            },
+          }}
+        />
+      </VStack>
+    </Box>
+  );
+}
diff --git a/src/components/solvers/Graph/SolverNodeContent.tsx b/src/components/solvers/Graph/SolverNodeContent.tsx
new file mode 100644
index 0000000..ea580ce
--- /dev/null
+++ b/src/components/solvers/Graph/SolverNodeContent.tsx
@@ -0,0 +1,97 @@
+import {
+  Button,
+  HStack,
+  Popover,
+  PopoverArrow,
+  PopoverBody,
+  PopoverCloseButton,
+  PopoverContent,
+  PopoverFooter,
+  PopoverHeader,
+  PopoverTrigger,
+  Portal,
+  Text,
+  Tooltip,
+  VStack,
+} from "@chakra-ui/react";
+import { ReactNode } from "react";
+import { FaQuestionCircle } from "react-icons/fa";
+import { FaGears } from "react-icons/fa6";
+import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
+
+export interface SolverNodeContentProps {
+  problemTypeId: string;
+  solver: ProblemSolverInfo;
+  button: {
+    label: ReactNode;
+    callback?: () => void;
+  };
+}
+
+export const SolverNodeContent = (props: SolverNodeContentProps) => {
+  return (
+    <VStack gap="0px">
+      <HStack align="start" maxW="10rem" justifyContent="space-between" gap="0">
+        <Tooltip hasArrow label="Solver" placement="bottom">
+          <div>
+            <FaGears size="2rem" />
+          </div>
+        </Tooltip>
+        <Text padding=".25rem" fontWeight="semibold">
+          {props.solver.name}
+        </Text>
+
+        <Popover>
+          <PopoverTrigger>
+            <div>
+              <FaQuestionCircle size="1rem" />
+            </div>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverHeader>
+                <Text fontWeight="semibold">{props.solver.name}</Text>
+              </PopoverHeader>
+              <PopoverBody>
+                <Text>Solves {props.problemTypeId}</Text>
+              </PopoverBody>
+              <PopoverFooter>
+                <Text fontSize="xs">{props.solver.id}</Text>
+              </PopoverFooter>
+            </PopoverContent>
+          </Portal>
+        </Popover>
+      </HStack>
+
+      <div
+        style={{
+          display: "flex",
+          justifyContent: "center",
+          marginTop: "0.5rem",
+          width: "100%",
+        }}
+      >
+        <Button
+          bg="kitGreen"
+          width="100%"
+          height="25px"
+          textColor="white"
+          fontWeight="bold"
+          fontSize="small"
+          _hover={{
+            bg: props.button.callback ? "kitGreenAlpha" : "kitGreen",
+          }}
+          border="1px"
+          borderColor="black"
+          borderRadius="0.25rem"
+          paddingY="1px"
+          onClick={props.button.callback}
+        >
+          {props.button.label}
+        </Button>
+      </div>
+    </VStack>
+  );
+};
diff --git a/src/components/solvers/Graph/SolverProvider.tsx b/src/components/solvers/Graph/SolverProvider.tsx
new file mode 100644
index 0000000..752b8bc
--- /dev/null
+++ b/src/components/solvers/Graph/SolverProvider.tsx
@@ -0,0 +1,45 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
+import { fetchSolvers } from "../../../api/ToolboxAPI";
+
+interface SolversMap {
+  [key: string]: ProblemSolverInfo[];
+}
+
+// This is a React context that globally gives access to the solvers that are available for a given problem type
+// Using the useSolvers() context hook in a component will give you access to the solvers and a function
+// to fetch them for the first time - they will be cached in the context for future use
+const SolverContext = createContext<{
+  solvers: SolversMap;
+  getSolvers: (problemTypeId: string) => Promise<ProblemSolverInfo[]>;
+}>({
+  solvers: {},
+  getSolvers: () => Promise.resolve([]),
+});
+
+export const useSolvers = () => useContext(SolverContext);
+
+export const SolverProvider = (props: { children: ReactNode }) => {
+  const [solvers, setSolvers] = useState<SolversMap>({});
+
+  // Function to get solvers, either from cache or by fetching
+  const getSolvers = async (problemTypeId: string) => {
+    const cachedSolvers = solvers[problemTypeId];
+    if (cachedSolvers) {
+      return cachedSolvers;
+    } else {
+      const fetchedSolvers = await fetchSolvers(problemTypeId);
+      setSolvers((prevSolvers) => ({
+        ...prevSolvers,
+        [problemTypeId]: fetchedSolvers,
+      }));
+      return fetchedSolvers;
+    }
+  };
+
+  return (
+    <SolverContext.Provider value={{ solvers, getSolvers }}>
+      {props.children}
+    </SolverContext.Provider>
+  );
+};
diff --git a/src/components/solvers/ProgressHandler.tsx b/src/components/solvers/ProgressHandler.tsx
deleted file mode 100644
index de12e0b..0000000
--- a/src/components/solvers/ProgressHandler.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import { Box, Center, HStack, VStack } from "@chakra-ui/react";
-import React, { useState } from "react";
-import { GoButton } from "./buttons/GoButton";
-import { postProblem } from "../../api/ToolboxAPI";
-import { SolutionView } from "./SolutionView";
-import { Container } from "../Container";
-import { Solution } from "../../api/data-model/Solution";
-import { SolveRequest } from "../../api/data-model/SolveRequest";
-import { SolverPicker } from "./SolverPicker";
-
-export interface ProgressHandlerProps<T> {
-  /**
-   * List of problem types that should be solved with the given input.
-   */
-  problemTypes: string[];
-  problemInput: T;
-}
-
-export const ProgressHandler = <T extends {}>(
-  props: ProgressHandlerProps<T>
-) => {
-  const [wasClicked, setClicked] = useState<boolean>(false);
-  const [finished, setFinished] = useState<boolean>(false);
-  const [solutions, setSolutions] = useState<Solution[]>();
-  const [solveRequest, setSolveRequest] = useState<SolveRequest<T>>({
-    requestContent: props.problemInput,
-    requestedSubSolveRequests: {},
-  });
-
-  async function startSolving() {
-    setClicked(true);
-    setFinished(false);
-
-    let newSolveRequest: SolveRequest<T> = {
-      ...solveRequest,
-      requestContent: props.problemInput,
-    };
-
-    setSolveRequest(newSolveRequest);
-    Promise.all(
-      props.problemTypes.map((problemType) =>
-        postProblem(problemType, newSolveRequest)
-      )
-    ).then((solutions) => {
-      setSolutions(solutions);
-      setFinished(true);
-    });
-  }
-
-  return (
-    <Container>
-      {!wasClicked || finished ? (
-        <HStack alignContent={"end"}>
-          {props.problemTypes.map((problemType) => (
-            <SolverPicker
-              key={problemType}
-              problemType={problemType}
-              setSolveRequest={(solverChoice) => {
-                setSolveRequest({
-                  ...solveRequest,
-                  requestedSolverId: solverChoice.requestedSolverId,
-                  requestedSubSolveRequests:
-                    solveRequest.requestedSubSolveRequests,
-                });
-              }}
-            />
-          ))}
-          <Center>
-            <GoButton clicked={startSolving} />
-          </Center>
-        </HStack>
-      ) : null}
-
-      {wasClicked
-        ? solutions?.map((s) => (
-            <Box
-              key={`${s.solverName}-${s.id}`}
-              w="50pc"
-              m={2}
-              borderWidth="1px"
-              borderRadius="lg"
-              overflow="hidden"
-              p={2}
-            >
-              <SolutionView key={s.id} solution={s} finished={finished} />
-            </Box>
-          ))
-        : null}
-    </Container>
-  );
-};
diff --git a/src/components/solvers/SAT/SyntaxHighlightedTextarea.tsx b/src/components/solvers/SAT/SyntaxHighlightedTextarea.tsx
new file mode 100644
index 0000000..2e04416
--- /dev/null
+++ b/src/components/solvers/SAT/SyntaxHighlightedTextarea.tsx
@@ -0,0 +1,53 @@
+import { Box } from "@chakra-ui/react";
+import { Grammar, highlight } from "prismjs";
+import "prismjs/themes/prism-solarizedlight.css";
+import Editor from "react-simple-code-editor";
+
+interface SyntaxHighlightedTextareaProps {
+  text: string;
+  setText: (value: string) => void;
+  placeholder?: string;
+  isInvalid?: boolean;
+  grammar?: GrammarSettings;
+}
+
+export interface GrammarSettings {
+  grammar: Grammar;
+  language: string;
+}
+
+export const SyntaxHighlightedTextarea = (
+  props: SyntaxHighlightedTextareaProps
+) => {
+  return (
+    <Box
+      border="2px"
+      borderColor={props.isInvalid ? "tomato" : "#AAAAAA"}
+      borderRadius="10px"
+      width="100%"
+      maxHeight="50rem"
+      overflowX="hidden"
+    >
+      <Editor
+        placeholder={props.placeholder}
+        value={props.text}
+        onValueChange={(code) => props.setText(code)}
+        highlight={(code) => {
+          if (props.grammar) {
+            return highlight(
+              code,
+              props.grammar.grammar,
+              props.grammar.language
+            );
+          }
+          return code;
+        }}
+        padding={10}
+        style={{
+          fontFamily: '"Fira code", "Fira Mono", monospace',
+          fontSize: 16,
+        }}
+      />
+    </Box>
+  );
+};
diff --git a/src/components/solvers/SAT/TextArea.tsx b/src/components/solvers/SAT/TextArea.tsx
deleted file mode 100644
index b18ca71..0000000
--- a/src/components/solvers/SAT/TextArea.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import "prismjs/themes/prism-solarizedlight.css"; //TODO: use custom styling
-import React from "react";
-import Editor from "react-simple-code-editor";
-import { highlight } from "prismjs";
-import { Box, Container } from "@chakra-ui/react";
-import { SAT_language } from "./prism-SAT";
-
-interface TextAreaProps {
-  problemString: string;
-  setProblemString: React.Dispatch<React.SetStateAction<string>>;
-}
-
-export const TextArea = (props: TextAreaProps) => {
-  return (
-    <Box border="1px" borderColor="#AAAAAA" borderRadius="10px">
-      <Editor
-        value={props.problemString}
-        onValueChange={(code) => props.setProblemString(code)}
-        highlight={(code) => highlight(code, SAT_language, "SAT_language")}
-        padding={10}
-        style={{
-          fontFamily: '"Fira code", "Fira Mono", monospace',
-          fontSize: 24,
-        }}
-      />
-    </Box>
-  );
-};
diff --git a/src/components/solvers/SAT/prism-SAT.ts b/src/components/solvers/SAT/prism-SAT.ts
index ba230f3..0cf8dc9 100644
--- a/src/components/solvers/SAT/prism-SAT.ts
+++ b/src/components/solvers/SAT/prism-SAT.ts
@@ -1,7 +1,7 @@
 import { regexVariable } from "../../../converter/dimacs/Syntax/CommonSyntax";
 import {
   regexAND,
-  regexNOTVariable,
+  regexNOT,
   regexOR,
 } from "../../../converter/dimacs/Syntax/LogicalExpressionSyntax";
 
@@ -16,7 +16,7 @@ export const SAT_language = {
   },
   "SAT-punctuation": /[()]/,
   negation: {
-    pattern: regexNOTVariable,
+    pattern: regexNOT,
     alias: "string",
   },
   "SAT-variable": {
diff --git a/src/components/solvers/SettingsView.tsx b/src/components/solvers/SettingsView.tsx
deleted file mode 100644
index b18a6df..0000000
--- a/src/components/solvers/SettingsView.tsx
+++ /dev/null
@@ -1,179 +0,0 @@
-import {
-  Container,
-  Slider,
-  Textarea,
-  Checkbox,
-  Select,
-  SliderTrack,
-  SliderFilledTrack,
-  Text,
-  SliderThumb,
-  SliderMark,
-  VStack,
-  Box,
-} from "@chakra-ui/react";
-import React, { useEffect, useState } from "react";
-import { fetchMetaSolverSettings } from "../../api/ToolboxAPI";
-import {
-  RangeSetting,
-  CheckboxSetting,
-  TextSetting,
-  SelectSetting,
-  MetaSolverSetting,
-  MetaSolverSettingType,
-} from "../../api/data-model/MetaSolverSettings";
-
-interface SettingsViewProps {
-  problemType: string;
-  settingChanged: (newSettings: MetaSolverSetting[]) => void;
-}
-
-export const SettingsView = (props: SettingsViewProps) => {
-  const [settings, setSettings] = useState<MetaSolverSetting[]>([]);
-
-  useEffect(() => {
-    fetchMetaSolverSettings(props.problemType).then(
-      (settings: MetaSolverSetting[]) => setSettings(settings)
-    );
-  }, [props.problemType]);
-
-  if (settings.length == 0) {
-    return null;
-  }
-
-  function replaceSetting<T extends MetaSolverSetting>(
-    key: string,
-    newValue: T
-  ): MetaSolverSetting[] {
-    const index = settings.findIndex((setting) => setting.name === key);
-    if (index !== -1) {
-      settings.splice(index, 1, newValue);
-    }
-    return settings;
-  }
-
-  return (
-    <Container>
-      <Text>Settings:</Text>
-
-      <Box margin={2} padding={2} borderWidth="1px" borderRadius="lg">
-        {settings.map((setting) => {
-          let settingView;
-
-          switch (setting.type) {
-            case MetaSolverSettingType.RANGE:
-              let range = setting as RangeSetting;
-              let total = range.max - range.min;
-              let step = total < 100 ? total / 100 : 1;
-              let marks = 5;
-              let markStep = total / (marks - 1);
-
-              settingView = (
-                <Slider
-                  key={setting.name}
-                  min={range.min}
-                  max={range.max}
-                  step={step}
-                  onChange={(v) => {
-                    const newSettings = replaceSetting<RangeSetting>(
-                      setting.name,
-                      {
-                        ...range,
-                        value: v,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                >
-                  {Array.from({ length: marks }, (_, i) => {
-                    return (
-                      <SliderMark key={i} value={i * markStep}>
-                        {i * markStep}
-                      </SliderMark>
-                    );
-                  })}
-                  <SliderTrack>
-                    <SliderFilledTrack />
-                  </SliderTrack>
-
-                  <SliderThumb />
-                </Slider>
-              );
-              break;
-            case MetaSolverSettingType.CHECKBOX:
-              let checkbox = setting as CheckboxSetting;
-              settingView = (
-                <Checkbox
-                  key={checkbox.name}
-                  defaultChecked={checkbox.state}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<CheckboxSetting>(
-                      setting.name,
-                      {
-                        ...checkbox,
-                        state: e.target.checked,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                />
-              );
-              break;
-            case MetaSolverSettingType.TEXT:
-              let text = setting as TextSetting;
-              settingView = (
-                <Textarea
-                  key={text.name}
-                  defaultValue={text.text}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<TextSetting>(
-                      setting.name,
-                      {
-                        ...text,
-                        text: e.target.value,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                />
-              );
-              break;
-            case MetaSolverSettingType.SELECT:
-              let select = setting as SelectSetting;
-              settingView = (
-                <Select
-                  key={select.name}
-                  defaultValue={select.selectedOption}
-                  onChange={(e) => {
-                    const newSettings = replaceSetting<SelectSetting>(
-                      setting.name,
-                      {
-                        ...select,
-                        selectedOption: e.target.value,
-                      }
-                    );
-                    props.settingChanged(newSettings);
-                  }}
-                >
-                  {select.options.map((option) => (
-                    <option key={option}>{option}</option>
-                  ))}
-                </Select>
-              );
-              break;
-            default:
-              return null;
-          }
-
-          return (
-            <VStack key={setting.name} align="left" paddingY="2">
-              <Text align="left">{setting.name}</Text>
-
-              {settingView}
-            </VStack>
-          );
-        })}
-      </Box>
-    </Container>
-  );
-};
diff --git a/src/components/solvers/SolutionView.tsx b/src/components/solvers/SolutionView.tsx
index 0e48318..0a64a71 100644
--- a/src/components/solvers/SolutionView.tsx
+++ b/src/components/solvers/SolutionView.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   Accordion,
   AccordionButton,
@@ -7,14 +6,11 @@ import {
   AccordionPanel,
   Box,
   Code,
-  Spinner,
 } from "@chakra-ui/react";
-import { Container } from "../Container";
-import { Solution } from "../../api/data-model/Solution";
+import { SolutionObject } from "../../api/data-model/SolutionObject";
 
 export interface SolutionViewProps {
-  finished: boolean;
-  solution: Solution | undefined;
+  solution: SolutionObject;
 }
 
 const OutputSection = (props: { title: string; content: any[] }) => (
@@ -48,41 +44,25 @@ const OutputSection = (props: { title: string; content: any[] }) => (
   </AccordionItem>
 );
 
-export const SolutionView = (props: SolutionViewProps) => {
-  if (props.finished && props.solution) {
-    return (
-      <Accordion defaultIndex={[0]} width="100%" marginTop="2rem">
-        <OutputSection
-          title={`Solution by ${props.solution.solverName}`}
-          content={[props.solution.solutionData]}
-        />
-        <OutputSection
-          title="Meta Data"
-          content={[
-            `Problem ID: ${props.solution.id}`,
-            `Solver: ${props.solution.solverName}`,
-            `Execution time: ${props.solution.executionMilliseconds / 1000}s`,
-            `Additional meta data: ${props.solution.metaData}`,
-          ]}
-        />
-        <OutputSection
-          title="Debugging Info"
-          content={[props.solution.debugData]}
-        />
-        <OutputSection title="Error" content={[props.solution.error]} />
-      </Accordion>
-    );
-  } else {
-    return (
-      <Container>
-        <Spinner
-          thickness="4px"
-          speed="0.65s"
-          emptyColor="gray.200"
-          color="teal.500"
-          size="xl"
-        />
-      </Container>
-    );
-  }
-};
+export const SolutionView = (props: SolutionViewProps) => (
+  <Accordion defaultIndex={[0]} width="100%" marginTop="2rem" allowMultiple>
+    <OutputSection
+      title={`Solution by ${props.solution.solverName}`}
+      content={[props.solution.solutionData]}
+    />
+    <OutputSection
+      title="Meta Data"
+      content={[
+        `Problem ID: ${props.solution.id}`,
+        `Solver: ${props.solution.solverName}`,
+        `Execution time: ${props.solution.executionMilliseconds / 1000}s`,
+        `Additional meta data: ${props.solution.metaData}`,
+      ]}
+    />
+    <OutputSection
+      title="Debugging Info"
+      content={[props.solution.debugData]}
+    />
+    {/*<OutputSection title="Error" content={[props.solution.error]} />*/}
+  </Accordion>
+);
diff --git a/src/components/solvers/SolverConfiguration.tsx b/src/components/solvers/SolverConfiguration.tsx
new file mode 100644
index 0000000..09fa5eb
--- /dev/null
+++ b/src/components/solvers/SolverConfiguration.tsx
@@ -0,0 +1,62 @@
+import { Button, Flex, Tooltip } from "@chakra-ui/react";
+import { useEffect, useRef, useState } from "react";
+import { getInvalidProblemDto } from "../../api/data-model/ProblemDto";
+import { postProblem } from "../../api/ToolboxAPI";
+import { ProblemGraphView } from "./Graph/ProblemGraphView";
+import { SolverProvider } from "./Graph/SolverProvider";
+
+interface SolverConfigurationProps {
+  problemTypeId: string;
+  problemTypeName?: string;
+  problemInput: string;
+}
+
+export const SolverConfiguration = (props: SolverConfigurationProps) => {
+  const [problemId, setProblemId] = useState<string | null>(null);
+  const problemGraphViewRef = useRef<HTMLDivElement>(null);
+
+  // Reset problemId when problemInput is empty
+  useEffect(() => {
+    if (props.problemInput === "") {
+      setProblemId(null);
+    }
+  }, [props.problemInput]);
+
+  useEffect(() => {
+    if (problemGraphViewRef.current) {
+      problemGraphViewRef.current.scrollIntoView({ behavior: "smooth" });
+    }
+  }, [problemId]);
+
+  return (
+    <Flex alignSelf="center">
+      {problemId === null ? (
+        <Tooltip label="Unleash the Qubits!" color="white">
+          <Button
+            colorScheme="teal"
+            size="md"
+            onClick={() => {
+              postProblem<string>(props.problemTypeId, {
+                ...getInvalidProblemDto<string>(),
+                input: props.problemInput,
+              }).then((problem) => {
+                setProblemId(problem.id);
+              });
+            }}
+          >
+            Configure {props.problemTypeName} Solver
+          </Button>
+        </Tooltip>
+      ) : (
+        <SolverProvider>
+          <div ref={problemGraphViewRef}>
+            <ProblemGraphView
+              problemTypeId={props.problemTypeId}
+              problemId={problemId}
+            />
+          </div>
+        </SolverProvider>
+      )}
+    </Flex>
+  );
+};
diff --git a/src/components/solvers/SolverPicker.tsx b/src/components/solvers/SolverPicker.tsx
deleted file mode 100644
index 7a8c40a..0000000
--- a/src/components/solvers/SolverPicker.tsx
+++ /dev/null
@@ -1,142 +0,0 @@
-import { Box, Container, Select, Text, Tooltip } from "@chakra-ui/react";
-import React, { ChangeEvent, useEffect, useState } from "react";
-import { fetchSolvers, fetchSubRoutines } from "../../api/ToolboxAPI";
-import { SubRoutineDefinition } from "../../api/data-model/SubRoutineDefinition";
-import { ProblemSolver } from "../../api/data-model/ProblemSolver";
-import { SolverChoice } from "../../api/data-model/SolveRequest";
-import { SettingsView } from "./SettingsView";
-
-export interface SolverPickerProps {
-  problemType: string;
-
-  /**
-   * Only needed internally if this should show a sub routine
-   */
-  subRoutineDefinition?: SubRoutineDefinition;
-  setSolveRequest: (subRoutines: SolverChoice) => void;
-}
-
-export const SolverPicker = (props: SolverPickerProps) => {
-  const [loadingSolvers, setLoadingSolvers] = useState<boolean>(true);
-  const [solvers, setSolvers] = useState<ProblemSolver[]>([]);
-  const [subRoutines, setSubRoutines] = useState<
-    SubRoutineDefinition[] | undefined
-  >(undefined);
-  const [solveRequest, setSolveRequest] = useState<SolverChoice>({
-    requestedSubSolveRequests: {},
-  });
-
-  useEffect(() => {
-    setSubRoutines(undefined);
-    setLoadingSolvers(true);
-    fetchSolvers(props.problemType).then((solvers: ProblemSolver[]) => {
-      setSolvers(solvers);
-      setLoadingSolvers(false);
-    });
-  }, [props.problemType]);
-
-  function onSolverChanged(e: ChangeEvent<HTMLSelectElement>) {
-    if (
-      e.target.selectedIndex == 0 ||
-      e.target.selectedIndex > solvers.length
-    ) {
-      let newSolveRequest: SolverChoice = {
-        ...solveRequest,
-        requestedSolverId: undefined,
-      };
-
-      setSolveRequest(newSolveRequest);
-      props.setSolveRequest?.(newSolveRequest);
-
-      setSubRoutines(undefined);
-    } else {
-      let solver = solvers[e.target.selectedIndex - 1];
-      let newSolveRequest: SolverChoice = {
-        ...solveRequest,
-        requestedSolverId: solver.id,
-      };
-
-      setSolveRequest(newSolveRequest);
-      props.setSolveRequest?.(newSolveRequest);
-
-      fetchSubRoutines(props.problemType, solver.id).then((subRoutines) =>
-        setSubRoutines(subRoutines)
-      );
-    }
-  }
-
-  const SolverSelection = () => {
-    return (
-      <Container>
-        {props.subRoutineDefinition == undefined ? null : (
-          <Text>{props.subRoutineDefinition?.type} Subroutine:</Text>
-        )}
-        <Text>{props.subRoutineDefinition?.description}</Text>
-        <Tooltip
-          label="Use this dropdown to select the meta solver strategy"
-          color="white"
-        >
-          <Select margin="2" onChange={onSolverChanged}>
-            <option selected={solveRequest.requestedSolverId === undefined}>
-              Automated Solver Selection
-            </option>
-            <optgroup label="Use Specific Solvers">
-              {solvers.map((s: ProblemSolver) => (
-                <option
-                  key={s.id}
-                  selected={solveRequest.requestedSolverId === s.id}
-                >
-                  {s.name}
-                </option>
-              ))}
-            </optgroup>
-          </Select>
-        </Tooltip>
-      </Container>
-    );
-  };
-
-  return (
-    <Container>
-      {loadingSolvers ? <Text>Loading solvers...</Text> : <SolverSelection />}
-
-      {solveRequest.requestedSolverId == undefined ? (
-        <SettingsView
-          problemType={props.problemType}
-          settingChanged={(settings) => {
-            let newSolveRequest: SolverChoice = {
-              ...solveRequest,
-              requestedMetaSolverSettings: settings,
-            };
-
-            setSolveRequest(newSolveRequest);
-            props.setSolveRequest(newSolveRequest);
-          }}
-        />
-      ) : null}
-
-      {subRoutines == undefined || subRoutines.length == 0 ? null : (
-        <Box borderWidth="1px" borderRadius="lg" overflow="hidden" p={2}>
-          {subRoutines.map((def) => (
-            <SolverPicker
-              key={def.type}
-              problemType={def.type}
-              subRoutineDefinition={def}
-              setSolveRequest={(subSolveRequest) => {
-                let newSolveRequest: SolverChoice = {
-                  ...solveRequest,
-                  requestedSubSolveRequests: {
-                    ...solveRequest.requestedSubSolveRequests,
-                    [def.type]: subSolveRequest,
-                  },
-                };
-                setSolveRequest(newSolveRequest);
-                props.setSolveRequest?.(newSolveRequest);
-              }}
-            />
-          ))}
-        </Box>
-      )}
-    </Container>
-  );
-};
diff --git a/src/components/solvers/TextInputMask.tsx b/src/components/solvers/TextInputMask.tsx
index ec44db7..792b19d 100644
--- a/src/components/solvers/TextInputMask.tsx
+++ b/src/components/solvers/TextInputMask.tsx
@@ -1,27 +1,37 @@
-import { Divider, Text, Textarea } from "@chakra-ui/react";
+import { Divider } from "@chakra-ui/react";
 import Head from "next/head";
-import React, { ReactElement, useState } from "react";
+import { ReactElement, useState } from "react";
+import { baseUrl } from "../../api/ToolboxAPI";
 import { Container } from "../Container";
-import { Main } from "../Main";
-import { Help } from "./SAT/Help";
 import { EditorControls } from "./EditorControls";
+import {
+  GrammarSettings,
+  SyntaxHighlightedTextarea,
+} from "./SAT/SyntaxHighlightedTextarea";
 
 export interface TextInputMaskProperties {
+  problemTypeId: string;
   textPlaceholder: string;
-  onTextChanged: (text: string) => void;
+  text: string;
+  setText: (text: string) => void;
+  validate?: (text: string) => string[] | null;
+  grammar?: GrammarSettings;
   body?: ReactElement;
 }
 
 export const TextInputMask = (props: TextInputMaskProperties) => {
-  const [text, setText] = useState<string>("");
   const [errorString, setErrorString] = useState("");
 
-  function onTextChanged(text: string): void {
+  function onTextChanged(newText: string): void {
     try {
-      setText(text);
-      props.onTextChanged(text);
+      props.setText(newText);
 
-      setErrorString("");
+      let errors = props.validate?.(newText);
+      if (errors) {
+        setErrorString(errors.toString());
+      } else {
+        setErrorString("");
+      }
     } catch (e: any) {
       setErrorString(e.message);
     }
@@ -39,20 +49,24 @@ export const TextInputMask = (props: TextInputMaskProperties) => {
       <EditorControls
         errorText={errorString}
         idleText={props.textPlaceholder + " 👇"}
-        onUpload={onTextChanged}
-        editorContent={text}
+        setEditorContent={onTextChanged}
+        editorContent={props.text}
+        documentationLink={`${baseUrl()}/webjars/swagger-ui/index.html#/${
+          props.problemTypeId
+        }`}
       />
-      <Textarea
+
+      <SyntaxHighlightedTextarea
+        text={props.text}
+        setText={onTextChanged}
         placeholder={props.textPlaceholder}
-        value={text}
-        minHeight="10rem"
         isInvalid={errorString != ""}
-        onChange={(x) => onTextChanged(x.target.value)}
+        grammar={props.grammar}
       />
 
-      <Divider />
-
       {props.body}
+
+      <Divider />
     </Container>
   );
 };
diff --git a/src/components/solvers/buttons/GoButton.tsx b/src/components/solvers/buttons/GoButton.tsx
deleted file mode 100644
index c65c815..0000000
--- a/src/components/solvers/buttons/GoButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Button, Tooltip, Flex } from "@chakra-ui/react";
-import { MouseEventHandler } from "react";
-
-interface GoButtonProps {
-  clicked: MouseEventHandler<HTMLButtonElement>;
-}
-
-export const GoButton = (props: GoButtonProps) => (
-  <Flex alignSelf="flex-start">
-    <Tooltip label="Unleash the Qubits!" color="white">
-      <Button colorScheme="teal" size="md" onClick={props.clicked}>
-        GO!
-      </Button>
-    </Tooltip>
-  </Flex>
-);
diff --git a/src/components/solvers/settings/CheckboxSettingView.tsx b/src/components/solvers/settings/CheckboxSettingView.tsx
new file mode 100644
index 0000000..a674df8
--- /dev/null
+++ b/src/components/solvers/settings/CheckboxSettingView.tsx
@@ -0,0 +1,21 @@
+import { Checkbox } from "@chakra-ui/react";
+import { CheckboxSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const CheckboxSettingView = (
+  props: SettingProps<CheckboxSetting & Disabled>
+) => {
+  return (
+    <Checkbox
+      disabled={props.setting.disabled}
+      defaultChecked={props.setting.state}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          state: e.target.checked,
+        });
+      }}
+    />
+  );
+};
diff --git a/src/components/solvers/settings/DoubleSettingView.tsx b/src/components/solvers/settings/DoubleSettingView.tsx
new file mode 100644
index 0000000..1078c43
--- /dev/null
+++ b/src/components/solvers/settings/DoubleSettingView.tsx
@@ -0,0 +1,49 @@
+import {
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack,
+} from "@chakra-ui/react";
+import { RangeSetting } from "../../../api/data-model/SolverSettings";
+
+import { SettingProps } from "./SettingProps";
+
+export const DoubleSettingView = (
+  props: SettingProps<RangeSetting & { disabled: boolean }>
+) => {
+  let total = props.setting.max - props.setting.min;
+  let marks = 5;
+  let markStep = total / (marks - 1);
+
+  return (
+    <Slider
+      isDisabled={props.setting.disabled}
+      min={props.setting.min}
+      max={props.setting.max}
+      value={props.setting.value}
+      step={1}
+      onChange={(v) => {
+        props.updateSetting({
+          ...props.setting,
+          value: v,
+        });
+      }}
+    >
+      {Array.from({ length: marks }, (_, i) => {
+        const stepValue = Math.round(i * markStep);
+
+        return (
+          <SliderMark key={i} value={stepValue}>
+            {stepValue}
+          </SliderMark>
+        );
+      })}
+      <SliderTrack>
+        <SliderFilledTrack />
+      </SliderTrack>
+
+      <SliderThumb />
+    </Slider>
+  );
+};
diff --git a/src/components/solvers/settings/IntegerSettingView.tsx b/src/components/solvers/settings/IntegerSettingView.tsx
new file mode 100644
index 0000000..b06babb
--- /dev/null
+++ b/src/components/solvers/settings/IntegerSettingView.tsx
@@ -0,0 +1,36 @@
+import {
+  NumberDecrementStepper,
+  NumberIncrementStepper,
+  NumberInput,
+  NumberInputField,
+  NumberInputStepper,
+} from "@chakra-ui/react";
+import { RangeSetting } from "../../../api/data-model/SolverSettings";
+
+import { SettingProps } from "./SettingProps";
+
+export const IntegerSettingView = (
+  props: SettingProps<RangeSetting & { disabled: boolean }>
+) => {
+  return (
+    <NumberInput
+      isDisabled={props.setting.disabled}
+      step={1}
+      value={props.setting.value}
+      min={props.setting.min}
+      max={props.setting.max}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          value: parseInt(e),
+        });
+      }}
+    >
+      <NumberInputField />
+      <NumberInputStepper>
+        <NumberIncrementStepper />
+        <NumberDecrementStepper />
+      </NumberInputStepper>
+    </NumberInput>
+  );
+};
diff --git a/src/components/solvers/settings/SelectSettingView.tsx b/src/components/solvers/settings/SelectSettingView.tsx
new file mode 100644
index 0000000..ac7a81b
--- /dev/null
+++ b/src/components/solvers/settings/SelectSettingView.tsx
@@ -0,0 +1,25 @@
+import { Select } from "@chakra-ui/react";
+import { SelectSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const SelectSettingView = (
+  props: SettingProps<SelectSetting & Disabled>
+) => {
+  return (
+    <Select
+      disabled={props.setting.disabled}
+      value={props.setting.selectedOption}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          selectedOption: e.target.value,
+        });
+      }}
+    >
+      {props.setting.options.map((option) => (
+        <option key={option}>{option}</option>
+      ))}
+    </Select>
+  );
+};
diff --git a/src/components/solvers/settings/SettingProps.tsx b/src/components/solvers/settings/SettingProps.tsx
new file mode 100644
index 0000000..b45c4af
--- /dev/null
+++ b/src/components/solvers/settings/SettingProps.tsx
@@ -0,0 +1,6 @@
+import { OptionalSolverSetting } from "./SettingsView";
+
+export interface SettingProps<T extends OptionalSolverSetting> {
+  setting: T;
+  updateSetting: (newSetting: T) => void;
+}
diff --git a/src/components/solvers/settings/SettingsView.tsx b/src/components/solvers/settings/SettingsView.tsx
new file mode 100644
index 0000000..c3ab3a1
--- /dev/null
+++ b/src/components/solvers/settings/SettingsView.tsx
@@ -0,0 +1,132 @@
+import { Box, Button, Checkbox, Text, VStack } from "@chakra-ui/react";
+import { FC, useEffect, useState } from "react";
+import { ProblemDto } from "../../../api/data-model/ProblemDto";
+import {
+  SolverSetting,
+  SolverSettingType,
+} from "../../../api/data-model/SolverSettings";
+import { fetchSolverSettings, patchProblem } from "../../../api/ToolboxAPI";
+import { CheckboxSettingView } from "./CheckboxSettingView";
+import { DoubleSettingView } from "./DoubleSettingView";
+import { IntegerSettingView } from "./IntegerSettingView";
+import { SelectSettingView } from "./SelectSettingView";
+import { SettingProps } from "./SettingProps";
+import { TextSettingView } from "./TextSettingView";
+
+interface SettingsViewProps {
+  problemDto: ProblemDto<any>;
+  settingsChanged?: (newSettings: SolverSetting[]) => void;
+}
+
+export interface Disabled {
+  disabled: boolean;
+}
+
+export type OptionalSolverSetting = SolverSetting & Disabled;
+
+export const settingComponentMap: {
+  [key in SolverSettingType]: FC<SettingProps<any>>;
+} = {
+  [SolverSettingType.INTEGER]: IntegerSettingView,
+  [SolverSettingType.DOUBLE]: DoubleSettingView,
+  [SolverSettingType.CHECKBOX]: CheckboxSettingView,
+  [SolverSettingType.TEXT]: TextSettingView,
+  [SolverSettingType.SELECT]: SelectSettingView,
+};
+
+export const SettingsView = (props: SettingsViewProps) => {
+  const [settings, setSettings] = useState<OptionalSolverSetting[]>([]);
+
+  useEffect(() => {
+    if (!props.problemDto.solverId) return;
+
+    fetchSolverSettings(
+      props.problemDto.typeId,
+      props.problemDto.solverId
+    ).then((newSettings: SolverSetting[]) =>
+      setSettings(
+        // Use settings set on the problem, if they exist
+        newSettings
+          .filter(
+            (s) =>
+              !props.problemDto.solverSettings.find(
+                (existingSetting) => existingSetting.name === s.name
+              )
+          )
+          .map((s) => ({ ...s, disabled: !s.required }))
+          .concat(
+            props.problemDto.solverSettings.map((s) => ({
+              ...s,
+              disabled: false,
+            }))
+          )
+      )
+    );
+  }, [props.problemDto]);
+
+  if (settings.length == 0) {
+    return null;
+  }
+
+  function updateSetting<T extends OptionalSolverSetting>(newSetting: T) {
+    const index = settings.findIndex(
+      (setting) => setting.name === newSetting.name
+    );
+    if (index !== -1) {
+      settings.splice(index, 1, newSetting);
+    }
+
+    setSettings([...settings]);
+  }
+
+  function getSettingView(setting: OptionalSolverSetting) {
+    const SettingComponent = settingComponentMap[setting.type];
+    if (!SettingComponent) return null;
+
+    return <SettingComponent setting={setting} updateSetting={updateSetting} />;
+  }
+
+  return (
+    <Box margin={2} padding={2} borderWidth="1px" borderRadius="lg">
+      {settings.map((setting) => (
+        <VStack key={setting.name} align="left" paddingY="2">
+          {setting.required ? (
+            <Text>{setting.name}</Text>
+          ) : (
+            <Checkbox
+              checked={!setting.disabled}
+              defaultChecked={!setting.disabled}
+              onChange={(e) =>
+                updateSetting({ ...setting, disabled: !e.target.checked })
+              }
+            >
+              {setting.name}
+            </Checkbox>
+          )}
+          <Text fontSize="sm" fontStyle="italic">
+            {setting.description}
+          </Text>
+
+          {getSettingView(setting)}
+        </VStack>
+      ))}
+
+      <Button
+        bg="kitGreen"
+        width="100%"
+        textColor="white"
+        fontWeight="bold"
+        _hover={{
+          bg: "kitGreenAlpha",
+        }}
+        onClick={() => {
+          patchProblem(props.problemDto.typeId, props.problemDto.id, {
+            solverSettings: settings,
+          }).then((r) => props.settingsChanged?.(r.solverSettings));
+        }}
+      >
+        Save
+      </Button>
+    </Box>
+  );
+};
diff --git a/src/components/solvers/settings/TextSettingView.tsx b/src/components/solvers/settings/TextSettingView.tsx
new file mode 100644
index 0000000..ac0e2fb
--- /dev/null
+++ b/src/components/solvers/settings/TextSettingView.tsx
@@ -0,0 +1,21 @@
+import { Textarea } from "@chakra-ui/react";
+import { TextSetting } from "../../../api/data-model/SolverSettings";
+import { SettingProps } from "./SettingProps";
+import { Disabled } from "./SettingsView";
+
+export const TextSettingView = (
+  props: SettingProps<TextSetting & Disabled>
+) => {
+  return (
+    <Textarea
+      disabled={props.setting.disabled}
+      value={props.setting.text}
+      onChange={(e) => {
+        props.updateSetting({
+          ...props.setting,
+          text: e.target.value,
+        });
+      }}
+    />
+  );
+};
diff --git a/src/converter/dimacs/DimacsParser.ts b/src/converter/dimacs/DimacsParser.ts
index 93d7c57..f1656e5 100644
--- a/src/converter/dimacs/DimacsParser.ts
+++ b/src/converter/dimacs/DimacsParser.ts
@@ -1,4 +1,11 @@
 import { Lexer, Token } from "@jlguenego/lexer";
+import {
+  blankRule,
+  parenthesesRule,
+  regexBlank,
+  TokenName,
+  variableRule,
+} from "./Syntax/CommonSyntax";
 import {
   andRule,
   commentRule,
@@ -10,13 +17,6 @@ import {
   sat,
   startKeywords,
 } from "./Syntax/DimacsSyntax";
-import {
-  TokenName,
-  parenthesesRule,
-  variableRule,
-  blankRule,
-  regexBlank,
-} from "./Syntax/CommonSyntax";
 
 // the order is important - tokens are applied from first to last
 const rules = [
diff --git a/src/converter/dimacs/LogicalExpressionParser.ts b/src/converter/dimacs/LogicalExpressionParser.ts
deleted file mode 100644
index e586eaf..0000000
--- a/src/converter/dimacs/LogicalExpressionParser.ts
+++ /dev/null
@@ -1,293 +0,0 @@
-import { Lexer, Token } from "@jlguenego/lexer";
-import {
-  TokenName,
-  parenthesesRule,
-  variableRule,
-  blankRule,
-} from "./Syntax/CommonSyntax";
-import {
-  andRule,
-  negatedVariableRule,
-  negateRule,
-  orRule,
-} from "./Syntax/LogicalExpressionSyntax";
-
-// the order is important - tokens are applied from first to last
-const rules = [
-  ...parenthesesRule,
-  orRule,
-  andRule,
-  negatedVariableRule,
-  variableRule,
-  blankRule,
-];
-const rulesNegation = [negateRule, variableRule, blankRule];
-
-interface LeveledToken {
-  level: number;
-  token: Token;
-}
-
-export class LogicalExpressionParser {
-  private lex: Lexer = new Lexer(rules);
-  private lexNegation: Lexer = new Lexer(rulesNegation);
-  private output: string = "";
-
-  /**
-   * Converts a logical expression to an expression in dimacs sat format
-   * dimacs sat format: https://www.domagoj-babic.com/uploads/ResearchProjects/Spear/dimacs-cnf.pdf
-   * @param logicalExpression {string} logical expression
-   * @returns {string} formula in dimacs sat format of the input
-   */
-  public parseDimacs(logicalExpression: string): string {
-    this.output = "";
-
-    let tokens = this.lex.tokenize(logicalExpression);
-    if (tokens.length == 0) return this.output;
-
-    //Verify formula integrity
-    let errors = this.verifyTokens(tokens);
-    if (errors.length > 0) {
-      let errorStr = "";
-      for (let error of errors) errorStr += error + "\n";
-
-      throw new Error(errorStr);
-    }
-
-    //Handle variable comments and program start
-    let variables = this.convertVariables(tokens);
-    variables.forEach((num, str, _) => {
-      this.output += `c ${num} ${TokenName.variableAssignment} ${str}\n`;
-    });
-    this.output += `p sat ${variables.size}\n`;
-
-    this.parseFormula(tokens);
-
-    return this.output;
-  }
-
-  private verifyTokens(tokens: Token[]): string[] {
-    let errors: string[] = [];
-    let wasOperator = false;
-    let wasVariable = false;
-    let wasClose = false;
-
-    if (tokens.length > 0) {
-      switch (tokens[0].name) {
-        case TokenName.or:
-        case TokenName.and:
-          errors.push("Formula can't start with operator (AND/OR)");
-          break;
-      }
-
-      switch (tokens[tokens.length - 1].name) {
-        case TokenName.or:
-        case TokenName.and:
-          errors.push("Formula can't end with operator (AND/OR)");
-          break;
-      }
-    }
-
-    for (let token of tokens) {
-      switch (token.name) {
-        case TokenName.or:
-        case TokenName.and:
-          if (wasOperator)
-            errors.push("Two operators (AND/OR) can't be next to each other");
-          break;
-        case TokenName.negatedVariable:
-        case TokenName.variable:
-          if (wasVariable)
-            errors.push(
-              `Variable '${token.lexeme}' is next to another variable`
-            );
-          if (wasClose)
-            errors.push(
-              `Variable '${token.lexeme}' is after a closing parenthesis`
-            );
-          break;
-        case TokenName.open:
-          if (wasVariable)
-            errors.push("Parenthesis can't be opened after a variable");
-          break;
-      }
-
-      wasOperator = token.name == TokenName.and || token.name == TokenName.or;
-      wasVariable =
-        token.name == TokenName.variable ||
-        token.name == TokenName.negatedVariable;
-      wasClose = token.name == TokenName.close;
-    }
-
-    return errors;
-  }
-  /**
-   * Converts any negative variable's negative prefix
-   * Converts all variables to numbers
-   * @param tokens {Token[]} array of tokens to search for variables
-   * @returns {Map<string, number>} variables mapped to their number representation
-   */
-  private convertVariables(tokens: Token[]): Map<string, number> {
-    let variables = new Map<string, number>();
-    const addToMap = (str: string): number => {
-      let number = variables.get(str);
-      if (number == undefined) {
-        number = variables.size + 1;
-        variables.set(str, number);
-      }
-
-      return number;
-    };
-
-    for (let i = 0; i < tokens.length; i++) {
-      switch (tokens[i].name) {
-        case TokenName.variable:
-          tokens[i].lexeme = addToMap(tokens[i].lexeme).toString();
-          break;
-        case TokenName.negatedVariable:
-          let negTokens = this.lexNegation.tokenize(tokens[i].lexeme);
-          if (negTokens.length != 2)
-            throw new Error(
-              "Can't parse negated variables that don't have two tokens"
-            );
-
-          let negToken = negTokens[1] as Token;
-          let varNumber = addToMap(negToken.lexeme);
-
-          //Replace negated variable with dimacs negative variable syntax
-          negToken.lexeme = `-${varNumber}`;
-          tokens[i] = negToken;
-          break;
-      }
-    }
-
-    return variables;
-  }
-
-  private getLeveledTokens(tokens: Token[]): LeveledToken[] {
-    let leveledTokens: LeveledToken[] = [];
-    let curLevel = 0;
-
-    for (let token of tokens) {
-      switch (token.name) {
-        case TokenName.open:
-          curLevel++;
-          break;
-        case TokenName.close:
-          curLevel--;
-          break;
-        default:
-          leveledTokens.push({ token: token, level: curLevel });
-          break;
-      }
-    }
-
-    return leveledTokens;
-  }
-
-  private parseFormula(tokens: Token[]) {
-    let leveledTokens = this.getLeveledTokens(tokens);
-
-    //Start recursive parsing of formula starting with or
-    this.processOR(leveledTokens);
-  }
-
-  private getOperatorPositions(
-    tokens: LeveledToken[],
-    operator: string,
-    level: number
-  ): number[] {
-    let positions: number[] = [];
-    for (let i = 0; i < tokens.length; i++) {
-      let token = tokens[i];
-      switch (token.token.name) {
-        case operator:
-          if (token.level == level) positions.push(i);
-          break;
-        default:
-          break;
-      }
-    }
-
-    //Always add token length
-    positions.push(tokens.length);
-
-    return positions;
-  }
-
-  private getMinLevel(tokens: LeveledToken[]): number {
-    let minLevel = undefined;
-
-    for (const token of tokens) {
-      if (minLevel == undefined || token.level < minLevel) {
-        minLevel = token.level;
-      }
-    }
-
-    return minLevel ?? -1;
-  }
-
-  private processAND(tokens: LeveledToken[]): LeveledToken[] {
-    if (tokens.length < 2) {
-      this.output += ` ${tokens[0].token.lexeme} `;
-      return tokens;
-    }
-
-    let level = this.getMinLevel(tokens);
-    let operatorPositions = this.getOperatorPositions(
-      tokens,
-      TokenName.and,
-      level
-    );
-    if (operatorPositions.length == 1) return this.processOR(tokens);
-
-    let returnTokens: LeveledToken[] = [];
-    let lastOr = -1;
-
-    this.output += `*(`;
-    for (let pos of operatorPositions) {
-      let before = tokens.slice(lastOr + 1, pos);
-      lastOr = pos;
-
-      let processedBefore = this.processOR(before);
-      returnTokens.push(...processedBefore);
-    }
-    this.output += `)`;
-
-    return returnTokens;
-  }
-
-  private processOR(tokens: LeveledToken[]): LeveledToken[] {
-    if (tokens.length < 2) {
-      this.output += ` ${tokens[0].token.lexeme} `;
-      return tokens;
-    }
-
-    let level = this.getMinLevel(tokens);
-    let operatorPositions = this.getOperatorPositions(
-      tokens,
-      TokenName.or,
-      level
-    );
-    if (operatorPositions.length == 1) return this.processAND(tokens);
-
-    let returnTokens: LeveledToken[] = [];
-    let lastOr = -1;
-
-    if (operatorPositions.length > 1) this.output += `+(`;
-    for (let pos of operatorPositions) {
-      let before = tokens.slice(lastOr + 1, pos);
-      lastOr = pos;
-
-      //Start processing nested expressions with OR
-      let processedBefore =
-        before[0].level != level
-          ? this.processOR(before)
-          : this.processAND(before);
-      returnTokens.push(...processedBefore);
-    }
-    if (operatorPositions.length > 1) this.output += `)`;
-
-    return returnTokens;
-  }
-}
diff --git a/src/converter/dimacs/LogicalExpressionValidator.ts b/src/converter/dimacs/LogicalExpressionValidator.ts
new file mode 100644
index 0000000..3648ab5
--- /dev/null
+++ b/src/converter/dimacs/LogicalExpressionValidator.ts
@@ -0,0 +1,112 @@
+import { Lexer, Token } from "@jlguenego/lexer";
+import {
+  blankRule,
+  parenthesesRule,
+  TokenName,
+  variableRule,
+} from "./Syntax/CommonSyntax";
+import { andRule, negateRule, orRule } from "./Syntax/LogicalExpressionSyntax";
+
+// the order is important - tokens are applied from first to last
+const rules = [
+  ...parenthesesRule,
+  orRule,
+  andRule,
+  negateRule,
+  variableRule,
+  blankRule,
+];
+
+export class LogicalExpressionValidator {
+  private lex: Lexer = new Lexer(rules);
+
+  /**
+   * Validates a logical expression
+   * @param logicalExpression {string} logical expression
+   * @returns {string[]} an array of errors, or null if there are none.
+   */
+  public validateLogicalExpression(logicalExpression: string): string[] | null {
+    let tokens = this.lex.tokenize(logicalExpression);
+    if (tokens.length == 0) return [];
+
+    //Verify formula integrity
+    return this.verifyTokens(tokens);
+  }
+
+  private verifyTokens(tokens: Token[]): string[] | null {
+    let errors: string[] = [];
+    let wasOperator = false;
+    let wasVariable = false;
+    let wasClose = false;
+    let wasOpen = false;
+    let wasNegate = false;
+
+    if (tokens.length > 0) {
+      switch (tokens[0].name) {
+        case TokenName.or:
+        case TokenName.and:
+          errors.push("Formula can't start with operator (AND/OR)");
+          break;
+      }
+
+      switch (tokens[tokens.length - 1].name) {
+        case TokenName.or:
+        case TokenName.and:
+          errors.push("Formula can't end with operator (AND/OR)");
+          break;
+      }
+    }
+
+    for (let token of tokens) {
+      switch (token.name) {
+        case TokenName.or:
+        case TokenName.and:
+          if (wasOperator)
+            errors.push("Two operators (AND/OR) can't be next to each other");
+          if (wasOpen)
+            errors.push(
+              `Operator '${token.lexeme}' can't be after an opening parenthesis`
+            );
+          break;
+        case TokenName.negate:
+          if (wasClose)
+            errors.push(
+              `Negation '${token.lexeme}' is after a closing parenthesis`
+            );
+          if (wasVariable)
+            errors.push(`Negation '${token.lexeme}' is after a variable`);
+          break;
+        case TokenName.variable:
+          if (wasVariable)
+            errors.push(
+              `Variable '${token.lexeme}' is next to another variable`
+            );
+          if (wasClose)
+            errors.push(
+              `Variable '${token.lexeme}' is after a closing parenthesis`
+            );
+          break;
+        case TokenName.open:
+          if (wasVariable)
+            errors.push("Parenthesis can't be opened after a variable");
+          break;
+        case TokenName.close:
+          if (wasOperator)
+            errors.push(
+              "Parenthesis can't be closed after an operator (AND/OR)"
+            );
+          if (wasNegate)
+            errors.push("Parenthesis can't be closed after a negation");
+          break;
+      }
+
+      wasOperator = token.name == TokenName.and || token.name == TokenName.or;
+      wasVariable = token.name == TokenName.variable;
+      wasOpen = token.name == TokenName.open;
+      wasClose = token.name == TokenName.close;
+      wasNegate = token.name == TokenName.negate;
+    }
+
+    return errors;
+  }
+}
diff --git a/src/converter/dimacs/Syntax/CommonSyntax.ts b/src/converter/dimacs/Syntax/CommonSyntax.ts
index 50cd601..83f872d 100644
--- a/src/converter/dimacs/Syntax/CommonSyntax.ts
+++ b/src/converter/dimacs/Syntax/CommonSyntax.ts
@@ -7,12 +7,10 @@ export enum TokenName {
   open = "open",
   close = "close",
   variable = "variable",
-  negatedVariable = "negatedVariable",
   variableAssignment = "=>",
 }
 
-export const variableRegexPart = "(?:[A-z]|\\d)+";
-export const regexVariable = new RegExp(variableRegexPart);
+export const regexVariable = /(?:[A-z]|\d)+/;
 export const regexBlank = /\s+/g;
 
 export const variableRule = new Rule({
diff --git a/src/converter/dimacs/Syntax/LogicalExpressionSyntax.ts b/src/converter/dimacs/Syntax/LogicalExpressionSyntax.ts
index e600194..ead78af 100644
--- a/src/converter/dimacs/Syntax/LogicalExpressionSyntax.ts
+++ b/src/converter/dimacs/Syntax/LogicalExpressionSyntax.ts
@@ -1,25 +1,15 @@
 import { Rule } from "@jlguenego/lexer";
-import { TokenName, variableRegexPart } from "./CommonSyntax";
+import { TokenName } from "./CommonSyntax";
 
-export const negateRegexPart = "(?:(?:not|NOT)\\s+|(?:!\\s*))";
-
-export const regexAND = /(?:&|and|AND) /;
-export const regexOR = /(?:\||or|OR) /;
-export const regexNOT = new RegExp(negateRegexPart, "g");
-export const regexNOTVariable = new RegExp(
-  `${negateRegexPart}\\s*${variableRegexPart}`
-);
+export const regexAND = /(?:&|and|AND)\b/;
+export const regexOR = /(?:\||or|OR)\b/;
+export const regexNOT = /not|NOT|!/g;
 
 export const negateRule = new Rule({
   name: TokenName.negate,
   pattern: regexNOT,
 });
 
-export const negatedVariableRule = new Rule({
-  name: TokenName.negatedVariable,
-  pattern: regexNOTVariable,
-});
-
 export const andRule = new Rule({
   name: TokenName.and,
   pattern: regexAND,
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1220cd4..99f468d 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,5 @@
-import type { AppProps } from "next/app";
 import { ChakraProvider } from "@chakra-ui/react";
+import type { AppProps } from "next/app";
 import theme from "../theme";
 
 function MyApp({ Component, pageProps }: AppProps) {
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 52996ba..2d4dc05 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,5 +1,5 @@
-import NextDocument, { Head, Html, Main, NextScript } from "next/document";
 import { ColorModeScript } from "@chakra-ui/react";
+import NextDocument, { Head, Html, Main, NextScript } from "next/document";
 import theme from "../theme";
 
 export default class Document extends NextDocument {
diff --git a/src/pages/demonstrate/MixedIntegerProgramming.tsx b/src/pages/demonstrate/MixedIntegerProgramming.tsx
new file mode 100644
index 0000000..c9861aa
--- /dev/null
+++ b/src/pages/demonstrate/MixedIntegerProgramming.tsx
@@ -0,0 +1,35 @@
+import { Flex, Heading, Text } from "@chakra-ui/react";
+import { NextPage } from "next";
+import { useState } from "react";
+import { Demonstrator } from "../../components/demonstrators/Demonstrator";
+import { Layout } from "../../components/layout/Layout";
+
+const MixedIntegerProgramming: NextPage = () => {
+  const [svg, setSvg] = useState<string | null>(null);
+
+  return (
+    <Layout>
+      <Heading as="h1">Mixed Integer Programming Demonstrator</Heading>
+      <Text color="text" align="justify">
+        This demonstrator will provide a visual benchmark representation of the
+        Mixed Integer Programming (MIP) problem based on a variable number of
+        variables and repetitions. The MIP problem is a mathematical
+        optimization problem where some or all of the variables are restricted
+        to be integers.
+      </Text>
+
+      <Demonstrator
+        demonstratorId="edu.kit.provideq.toolbox.demonstrators.CplexMipDemonstrator"
+        onSolved={setSvg}
+      />
+
+      {svg && (
+        <Flex justifyContent="center">
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </Flex>
+      )}
+    </Layout>
+  );
+};
+
+export default MixedIntegerProgramming;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fb1f0d5..d5b6986 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,9 +1,18 @@
+import {
+  Link,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from "@chakra-ui/react";
 import type { NextPage } from "next";
 import Head from "next/head";
-import { Text, Heading, Link } from "@chakra-ui/react";
+import { baseUrl } from "../api/ToolboxAPI";
+import { DemonstratorChooser } from "../components/landing-page/DemonstratorChooser";
 import { ProblemChooser } from "../components/landing-page/ProblemChooser";
 import { Layout } from "../components/layout/Layout";
-import { baseUrl } from "../api/ToolboxAPI";
 
 const Home: NextPage = () => {
   return (
@@ -48,11 +57,24 @@ const Home: NextPage = () => {
         </Link>
       </Text>
 
-      <Heading as="h2" size="xl" pt="10">
-        Solve a problem
-      </Heading>
-
-      <ProblemChooser />
+      <Tabs pt={10} variant="enclosed">
+        <TabList>
+          <Tab fontSize="4xl" fontWeight="bold">
+            Solve a problem
+          </Tab>
+          <Tab fontSize="4xl" fontWeight="bold">
+            Demonstrators
+          </Tab>
+        </TabList>
+        <TabPanels>
+          <TabPanel>
+            <ProblemChooser />
+          </TabPanel>
+          <TabPanel>
+            <DemonstratorChooser />
+          </TabPanel>
+        </TabPanels>
+      </Tabs>
     </Layout>
   );
 };
diff --git a/src/pages/solve/FeatureModelAnomaly.tsx b/src/pages/solve/FeatureModelAnomaly.tsx
index a803d78..6d22ed1 100644
--- a/src/pages/solve/FeatureModelAnomaly.tsx
+++ b/src/pages/solve/FeatureModelAnomaly.tsx
@@ -1,20 +1,10 @@
-import {
-  Box,
-  Divider,
-  Heading,
-  List,
-  ListItem,
-  Spacer,
-  Text,
-  UnorderedList,
-  VStack,
-} from "@chakra-ui/react";
+import { Heading, Link, ListItem, Text, UnorderedList } from "@chakra-ui/react";
 import { NextPage } from "next";
-import React, { useState } from "react";
-import { MultiSelect, Option } from "react-multi-select-component";
-import { ProgressHandler } from "../../components/solvers/ProgressHandler";
-import { TextInputMask } from "../../components/solvers/TextInputMask";
+import { useState } from "react";
+import { Option } from "react-multi-select-component";
 import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
 
 const anomalies: Option[] = [
   {
@@ -29,8 +19,6 @@ const anomalies: Option[] = [
 
 const FeatureModelAnomaly: NextPage = () => {
   const [uvl, setUvl] = useState<string>("");
-  const [selectedAnomalies, setSelectedAnomalies] =
-    useState<Option[]>(anomalies);
 
   return (
     <Layout>
@@ -38,7 +26,15 @@ const FeatureModelAnomaly: NextPage = () => {
       <Text color="text" align="justify">
         For a tree of features with cross tree constraints, these solvers can
         detect various anomalies. Feature Models are given in the extended
-        Universal Variablity Language (UVL).
+        Universal Variablity Language (UVL). You can find information about UVL
+        and feature model examples{" "}
+        <Link
+          href="https://universal-variability-language.github.io"
+          color={"blue.400"}
+        >
+          here
+        </Link>
+        .
       </Text>
 
       <UnorderedList>
@@ -53,28 +49,20 @@ const FeatureModelAnomaly: NextPage = () => {
       </UnorderedList>
 
       <TextInputMask
+        problemTypeId=""
         textPlaceholder="Enter your feature model in UVL format"
-        onTextChanged={setUvl}
-        body={
-          <VStack>
-            <Box width="300px">
-              <MultiSelect
-                options={anomalies}
-                value={selectedAnomalies}
-                onChange={setSelectedAnomalies}
-                labelledBy="Select anomalies"
-              />
-            </Box>
-
-            <Divider />
-
-            <ProgressHandler
-              problemTypes={selectedAnomalies.map((option) => option.value)}
-              problemInput={uvl}
-            />
-          </VStack>
-        }
+        text={uvl}
+        setText={setUvl}
       />
+
+      {anomalies.map((option) => (
+        <SolverConfiguration
+          key={option.value}
+          problemTypeId={option.value}
+          problemTypeName={option.label}
+          problemInput={uvl}
+        />
+      ))}
     </Layout>
   );
 };
diff --git a/src/pages/solve/Knapsack.tsx b/src/pages/solve/Knapsack.tsx
new file mode 100644
index 0000000..9c28836
--- /dev/null
+++ b/src/pages/solve/Knapsack.tsx
@@ -0,0 +1,45 @@
+import { Heading, Link, Text } from "@chakra-ui/react";
+import { NextPage } from "next";
+import { useState } from "react";
+import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+
+const Knapsack: NextPage = () => {
+  const [knapsackProblem, setKnapsackProblem] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">Knapsack Solver</Heading>
+
+      <Text color="text" align="justify">
+        In the 0-1 knapsack problem, we are given a list of items, each with a
+        weight and a value, and the maximum weight that the knapsack can hold.
+        The goal is to find the subset of items that maximizes the total value
+        while keeping the total weight below the maximum weight. Example
+        problems and an explanation of the input format can be found{" "}
+        <Link
+          href="https://github.com/ProvideQ/knapsack-problems"
+          color={"blue.400"}
+        >
+          here
+        </Link>
+        .
+      </Text>
+
+      <TextInputMask
+        problemTypeId="knapsack"
+        text={knapsackProblem}
+        setText={setKnapsackProblem}
+        textPlaceholder="Enter your knapsack problem"
+      />
+
+      <SolverConfiguration
+        problemTypeId="knapsack"
+        problemInput={knapsackProblem}
+      />
+    </Layout>
+  );
+};
+
+export default Knapsack;
diff --git a/src/pages/solve/MaxCut.tsx b/src/pages/solve/MaxCut.tsx
index 28c3be5..0362171 100644
--- a/src/pages/solve/MaxCut.tsx
+++ b/src/pages/solve/MaxCut.tsx
@@ -1,31 +1,25 @@
 import {
+  Accordion,
+  AccordionButton,
+  AccordionItem,
+  AccordionPanel,
   Center,
   Code,
-  Divider,
   Heading,
   Link,
   Spacer,
   Text,
 } from "@chakra-ui/react";
 import { NextPage } from "next";
-import React, { useState } from "react";
-import { Container } from "../../components/Container";
-import { GraphArea } from "../../components/solvers/Graph/GraphArea";
-import { ProgressHandler } from "../../components/solvers/ProgressHandler";
-import { TextInputMask } from "../../components/solvers/TextInputMask";
-import { parseGML } from "../../converter/graph/gml/GmlParser";
+import { useState } from "react";
 import { Layout } from "../../components/layout/Layout";
+import { GMLGraphView } from "../../components/solvers/Graph/GMLGraphView";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
 
 const MaxCut: NextPage = () => {
-  const [graphData, setGraphData] = useState<any>(null);
   const [graphString, setGraphString] = useState("");
 
-  function change(x: string): void {
-    setGraphString(x);
-    let data = parseGML(x);
-    setGraphData(data);
-  }
-
   return (
     <Layout>
       <Heading as="h1">MaxCut Solver</Heading>
@@ -33,39 +27,51 @@ const MaxCut: NextPage = () => {
         For a given weighted graph, this algorithm finds a partition of the
         graph so that the sum of edge weights <i>between</i> these partitions is
         maximal. The graph can be specified in the{" "}
-        <Link href="https://en.wikipedia.org/wiki/Graph_Modelling_Language">
+        <Link
+          href="https://en.wikipedia.org/wiki/Graph_Modelling_Language"
+          color={"blue.400"}
+        >
           Graph Modeling Language
         </Link>{" "}
         and edge weights can be specified with the <Code>weight</Code>{" "}
         properties. If the <Code>weight</Code> property is omitted, a weight of
         <Code>1</Code> units is used implicitly. All solvers will return a graph
         (in the GML format) with the same node <Code>id</Code>s, where each node
-        has a <Code>partition</Code> value assigned.
+        has a <Code>partition</Code> value assigned. Example MaxCut problems can
+        be found{" "}
+        <Link
+          href="https://github.com/ProvideQ/maxcut-problems"
+          color={"blue.400"}
+        >
+          here
+        </Link>
+        .
       </Text>
 
       <Spacer />
 
       <TextInputMask
+        problemTypeId="max-cut"
         textPlaceholder="Enter your graph in GML format"
-        onTextChanged={change}
+        text={graphString}
+        setText={setGraphString}
         body={
-          <Container>
-            <Center>
-              <GraphArea
-                graphData={graphData}
-                graphHeight={500}
-                graphWidth={500}
-              />
-            </Center>
-
-            <Divider />
-            <ProgressHandler
-              problemTypes={["max-cut"]}
-              problemInput={graphString}
-            />
-          </Container>
+          <Accordion width="100%" allowMultiple>
+            <AccordionItem>
+              <h2>
+                <AccordionButton>Preview</AccordionButton>
+              </h2>
+              <AccordionPanel>
+                <Center>
+                  <GMLGraphView gml={graphString} />
+                </Center>
+              </AccordionPanel>
+            </AccordionItem>
+          </Accordion>
         }
       />
+
+      <SolverConfiguration problemTypeId="max-cut" problemInput={graphString} />
     </Layout>
   );
 };
diff --git a/src/pages/solve/QUBO.tsx b/src/pages/solve/QUBO.tsx
new file mode 100644
index 0000000..d53e260
--- /dev/null
+++ b/src/pages/solve/QUBO.tsx
@@ -0,0 +1,36 @@
+import { Code, Heading, Spacer, Text } from "@chakra-ui/react";
+import type { NextPage } from "next";
+import { useState } from "react";
+import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+
+const QUBO: NextPage = () => {
+  const [quboTerm, setQuboTerm] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">QUBO Solver</Heading>
+      <Text color="text" align="justify">
+        In the Quadratic Unconstrained Binary Optimization problem, we try to
+        find the assignment for a finite amount of <Code>0/1</Code> decision
+        variables that minimizes a given quadratic term with these variables.
+        The problem statement is given in the LP format and all solvers will
+        present a variable assigment as a solution.
+      </Text>
+
+      <Spacer />
+
+      <TextInputMask
+        problemTypeId="qubo"
+        text={quboTerm}
+        setText={setQuboTerm}
+        textPlaceholder={"Enter your QUBO problem in LP format"}
+      />
+
+      <SolverConfiguration problemTypeId="qubo" problemInput={quboTerm} />
+    </Layout>
+  );
+};
+
+export default QUBO;
diff --git a/src/pages/solve/SAT.tsx b/src/pages/solve/SAT.tsx
index 09d977a..3659a72 100644
--- a/src/pages/solve/SAT.tsx
+++ b/src/pages/solve/SAT.tsx
@@ -1,30 +1,19 @@
-import Head from "next/head";
-import React, { useState } from "react";
+import { Divider, Heading, Spacer, Text } from "@chakra-ui/react";
 import type { NextPage } from "next";
-import { TextArea } from "../../components/solvers/SAT/TextArea";
-import { ProgressHandler } from "../../components/solvers/ProgressHandler";
-import { Text, Divider, Heading, Spacer } from "@chakra-ui/react";
-import { DimacsParser } from "../../converter/dimacs/DimacsParser";
-import { LogicalExpressionParser } from "../../converter/dimacs/LogicalExpressionParser";
+import { useState } from "react";
 import { Layout } from "../../components/layout/Layout";
-import { EditorControls } from "../../components/solvers/EditorControls";
-import { baseUrl } from "../../api/ToolboxAPI";
+import { SAT_language } from "../../components/solvers/SAT/prism-SAT";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+import { LogicalExpressionValidator } from "../../converter/dimacs/LogicalExpressionValidator";
 
 const SAT: NextPage = () => {
-  const logicalExpressionParser = new LogicalExpressionParser();
+  const logicalExpressionValidator = new LogicalExpressionValidator();
 
   const [logicalExpressionString, setLogicalExpressionString] = useState("");
-  const [errorString, setErrorString] = useState("");
 
   return (
     <Layout>
-      <Head>
-        <title>ProvideQ</title>
-        <meta name="description" content="Generated by create next app" />
-        <link rel="icon" href="/favicon.ico" />
-        {/* TODO: replace favicon */}
-      </Head>
-
       <Heading as="h1">SAT Solver</Heading>
       <Text color="text" align="justify">
         For a given Boolean formula, this algorithm checks if there is an
@@ -35,29 +24,24 @@ const SAT: NextPage = () => {
 
       <Spacer />
 
-      <EditorControls
-        idleText={'Try "a and (not a or not b)" 👇'}
-        errorText={errorString}
-        onUpload={setLogicalExpressionString}
-        editorContent={logicalExpressionString}
-        documentationLink={`${baseUrl()}/webjars/swagger-ui/index.html#/sat`}
-      />
-      <TextArea
-        problemString={logicalExpressionString}
-        setProblemString={(value) => {
-          setLogicalExpressionString(value);
-
-          try {
-            logicalExpressionParser.parseDimacs(value.toString());
-            setErrorString("");
-          } catch (e: any) {
-            setErrorString(e.message);
-          }
+      <TextInputMask
+        textPlaceholder='Try "a and (not a or not b)"'
+        text={logicalExpressionString}
+        setText={setLogicalExpressionString}
+        problemTypeId="sat"
+        grammar={{
+          grammar: SAT_language,
+          language: "SAT_language",
         }}
+        validate={(text) =>
+          logicalExpressionValidator.validateLogicalExpression(text)
+        }
       />
+
       <Divider />
-      <ProgressHandler
-        problemTypes={["sat"]}
+
+      <SolverConfiguration
+        problemTypeId="sat"
         problemInput={logicalExpressionString}
       />
     </Layout>
diff --git a/src/pages/solve/TSP.tsx b/src/pages/solve/TSP.tsx
new file mode 100644
index 0000000..d955273
--- /dev/null
+++ b/src/pages/solve/TSP.tsx
@@ -0,0 +1,45 @@
+import { Heading, Link, Spacer, Text } from "@chakra-ui/react";
+import type { NextPage } from "next";
+import { useState } from "react";
+import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+
+const TSP: NextPage = () => {
+  const [tsp, setTsp] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">Traveling Salesperson Problem</Heading>
+      <Text color="text" align="justify">
+        The Traveling Salesperson Problem (TSP) is a classic combinatorial
+        optimization problem. Given a list of cities and the distances between
+        them, the task is to find the shortest possible route that visits each
+        city exactly once and returns to the origin city. Example TSP problems
+        can be found{" "}
+        <Link
+          href="https://github.com/ProvideQ/tsp-problems"
+          color={"blue.400"}
+        >
+          here
+        </Link>
+        .
+      </Text>
+
+      <Spacer />
+
+      <TextInputMask
+        problemTypeId="tsp"
+        text={tsp}
+        setText={setTsp}
+        textPlaceholder={
+          "Enter your Traveling Salesperson Problem in tsp-lib format"
+        }
+      />
+
+      <SolverConfiguration problemTypeId="tsp" problemInput={tsp} />
+    </Layout>
+  );
+};
+
+export default TSP;
diff --git a/src/pages/solve/VehicleRouting.tsx b/src/pages/solve/VehicleRouting.tsx
new file mode 100644
index 0000000..a34166a
--- /dev/null
+++ b/src/pages/solve/VehicleRouting.tsx
@@ -0,0 +1,43 @@
+import { Heading, Link, Spacer, Text } from "@chakra-ui/react";
+import type { NextPage } from "next";
+import { useState } from "react";
+import { Layout } from "../../components/layout/Layout";
+import { SolverConfiguration } from "../../components/solvers/SolverConfiguration";
+import { TextInputMask } from "../../components/solvers/TextInputMask";
+
+const VehicleRouting: NextPage = () => {
+  const [vrp, setVrp] = useState("");
+
+  return (
+    <Layout>
+      <Heading as="h1">Vehicle Routing Solver</Heading>
+      <Text color="text" align="justify">
+        The Vehicle Routing Problem (VRP) is a combinatorial optimization
+        problem that seeks to find the best set of routes for a fleet of
+        vehicles to service a set of customers. The problem can be specified in
+        the VRP format and all solvers will return a solution in the same
+        format. Example VRP problems can be found in the{" "}
+        <Link
+          href="http://vrp.galgos.inf.puc-rio.br/index.php/en"
+          color={"blue.400"}
+        >
+          CVRPLib
+        </Link>
+        .
+      </Text>
+
+      <Spacer />
+
+      <TextInputMask
+        problemTypeId="vrp"
+        text={vrp}
+        setText={setVrp}
+        textPlaceholder={"Enter your Vehicle Routing problem in vrp format"}
+      />
+
+      <SolverConfiguration problemTypeId="vrp" problemInput={vrp} />
+    </Layout>
+  );
+};
+
+export default VehicleRouting;
diff --git a/src/theme.ts b/src/theme.ts
index 728f100..f0acb2a 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -3,8 +3,10 @@ import { extendTheme } from "@chakra-ui/react";
 const theme = extendTheme({
   semanticTokens: {
     colors: {
+      kitGreen: "#00876C",
+      kitGreenAlpha: "#00876CA0",
       heroGradientStart: {
-        default: "#00876C",
+        default: "kitGreen",
         _dark: "#e3a7f9",
       },
       heroGradientEnd: {
diff --git a/yarn.lock b/yarn.lock
index 6920315..13cb09c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -20,267 +20,6 @@
     "@jridgewell/gen-mapping" "^0.3.0"
     "@jridgewell/trace-mapping" "^0.3.9"
 
-"@ant-design/colors@^4.0.5":
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/@ant-design/colors/-/colors-4.0.5.tgz#d7d100d7545cca8f624954604a6892fc48ba5aae"
-  integrity sha512-3mnuX2prnWOWvpFTS2WH2LoouWlOgtnIpc6IarWN6GOzzLF8dW/U8UctuvIPhoboETehZfJ61XP+CGakBEPJ3Q==
-  dependencies:
-    tinycolor2 "^1.4.1"
-
-"@antv/algorithm@^0.1.8":
-  version "0.1.25"
-  resolved "https://registry.yarnpkg.com/@antv/algorithm/-/algorithm-0.1.25.tgz#1aa88d4909138a2900935f0a9a3cb97bc8db65d2"
-  integrity sha512-TGwPyFoAu4+iEJd0y1l0gHdBXCbUj8a4gR7P3GzZRfEfRnWfk+gswApzOSTd7c6HP402JOEF64PAJQKxQgSPSQ==
-  dependencies:
-    "@antv/util" "^2.0.13"
-    tslib "^2.0.0"
-
-"@antv/dom-util@^2.0.1", "@antv/dom-util@^2.0.2":
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/@antv/dom-util/-/dom-util-2.0.4.tgz#b09b56c56fec42896fc856edad56b595b47ab514"
-  integrity sha512-2shXUl504fKwt82T3GkuT4Uoc6p9qjCKnJ8gXGLSW4T1W37dqf9AV28aCfoVPHp2BUXpSsB+PAJX2rG/jLHsLQ==
-  dependencies:
-    tslib "^2.0.3"
-
-"@antv/event-emitter@^0.1.1", "@antv/event-emitter@~0.1.0":
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/@antv/event-emitter/-/event-emitter-0.1.3.tgz#3e06323b9dcd55a3241ddc7c5458cfabd2095164"
-  integrity sha512-4ddpsiHN9Pd4UIlWuKVK1C4IiZIdbwQvy9i7DUSI3xNJ89FPUFt8lxDYj8GzzfdllV0NkJTRxnG+FvLk0llidg==
-
-"@antv/g-base@^0.5.1", "@antv/g-base@^0.5.12":
-  version "0.5.15"
-  resolved "https://registry.yarnpkg.com/@antv/g-base/-/g-base-0.5.15.tgz#4d4174c956ba652a4b55c4f6a2c28aaa92e7738d"
-  integrity sha512-QOtq50QpnKez9J75/Z8j2yZ7QDQdk8R8mVQJiHtaEO5eI7DM4ZbrsWff/Ew26JYmPWdq7nbRuARMAD4PX9uuLA==
-  dependencies:
-    "@antv/event-emitter" "^0.1.1"
-    "@antv/g-math" "^0.1.9"
-    "@antv/matrix-util" "^3.1.0-beta.1"
-    "@antv/path-util" "~2.0.5"
-    "@antv/util" "~2.0.13"
-    "@types/d3-timer" "^2.0.0"
-    d3-ease "^1.0.5"
-    d3-interpolate "^3.0.1"
-    d3-timer "^1.0.9"
-    detect-browser "^5.1.0"
-    tslib "^2.0.3"
-
-"@antv/g-canvas@^0.5.2":
-  version "0.5.14"
-  resolved "https://registry.yarnpkg.com/@antv/g-canvas/-/g-canvas-0.5.14.tgz#099668cb65d9c89dc2fc1000313c18298dcf8a13"
-  integrity sha512-IUGLEMIMAUYgaBMT8h3FTmYQYz7sjQkKWwh6Psqx+UPK86fySa+G8fMRrh1EqAL07jVB+GRnn6Ym+3FoFUgeFg==
-  dependencies:
-    "@antv/g-base" "^0.5.12"
-    "@antv/g-math" "^0.1.9"
-    "@antv/matrix-util" "^3.1.0-beta.1"
-    "@antv/path-util" "~2.0.5"
-    "@antv/util" "~2.0.0"
-    gl-matrix "^3.0.0"
-    tslib "^2.0.3"
-
-"@antv/g-math@^0.1.1", "@antv/g-math@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@antv/g-math/-/g-math-0.1.9.tgz#1f981b9aebf5c024f284389aa3e5cba8cefa1f28"
-  integrity sha512-KHMSfPfZ5XHM1PZnG42Q2gxXfOitYveNTA7L61lR6mhZ8Y/aExsYmHqaKBsSarU0z+6WLrl9C07PQJZaw0uljQ==
-  dependencies:
-    "@antv/util" "~2.0.0"
-    gl-matrix "^3.0.0"
-
-"@antv/g-svg@^0.5.1", "@antv/g-svg@^0.5.2":
-  version "0.5.7"
-  resolved "https://registry.yarnpkg.com/@antv/g-svg/-/g-svg-0.5.7.tgz#d63db5f8590a5f3ceab097c183ec80ed143f0a50"
-  integrity sha512-jUbWoPgr4YNsOat2Y/rGAouNQYGpw4R0cvlN0YafwOyacFFYy2zC8RslNd6KkPhhR3XHNSqJOuCYZj/YmLUwYw==
-  dependencies:
-    "@antv/g-base" "^0.5.12"
-    "@antv/g-math" "^0.1.9"
-    "@antv/util" "~2.0.0"
-    detect-browser "^5.0.0"
-    tslib "^2.0.3"
-
-"@antv/g-webgpu-core@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@antv/g-webgpu-core/-/g-webgpu-core-0.7.2.tgz#65ef2a1253e319ffb2ed568d222b8313635d6677"
-  integrity sha512-xUMmop7f3Rs34zFYKXLqHhDR1CQTeDl/7vI7Sn3X/73BqJc3X3HIIRvm83Fg2CjVACaOzw4WeLRXNaOCp9fz9w==
-  dependencies:
-    eventemitter3 "^4.0.0"
-    gl-matrix "^3.1.0"
-    lodash "^4.17.15"
-    probe.gl "^3.1.1"
-
-"@antv/g-webgpu-engine@^0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@antv/g-webgpu-engine/-/g-webgpu-engine-0.7.2.tgz#64631f24930f449ef41ffff6429d4fb9519eca23"
-  integrity sha512-lx8Y93IW2cnJvdoDRKyMmTdYqSC1pOmF0nyG3PGGyA0NI9vBYVgO0KTF6hkyWjdTWVq7XDZyf/h8CJridLh3lg==
-  dependencies:
-    "@antv/g-webgpu-core" "^0.7.2"
-    gl-matrix "^3.1.0"
-    lodash "^4.17.15"
-    regl "^1.3.11"
-
-"@antv/g-webgpu@0.7.2":
-  version "0.7.2"
-  resolved "https://registry.yarnpkg.com/@antv/g-webgpu/-/g-webgpu-0.7.2.tgz#39ba2123816322fec9563236211ad8ab1e40924d"
-  integrity sha512-kw+oYGsdvj5qeUfy5DPb/jztZBV+2fmqBd3Vv8NlKatfBmv8AirYX/CCW74AUSdWm99rEiLyxFB1VdRZ6b/wnQ==
-  dependencies:
-    "@antv/g-webgpu-core" "^0.7.2"
-    "@antv/g-webgpu-engine" "^0.7.2"
-    gl-matrix "^3.1.0"
-    gl-vec2 "^1.3.0"
-    lodash "^4.17.15"
-
-"@antv/g6-core@0.8.19":
-  version "0.8.19"
-  resolved "https://registry.yarnpkg.com/@antv/g6-core/-/g6-core-0.8.19.tgz#ad4f33ba59b4b2aa364af8a951e563cd02a8c310"
-  integrity sha512-JBpmdMuHOLCOvoF3EReCH3w1jTsZ/GL6Kl0aYNGEAlAeKVTT3iqHgXUAim3G49RKELXRfhit+IsYTRN1jboF9A==
-  dependencies:
-    "@antv/algorithm" "^0.1.8"
-    "@antv/dom-util" "^2.0.1"
-    "@antv/event-emitter" "~0.1.0"
-    "@antv/g-base" "^0.5.1"
-    "@antv/g-math" "^0.1.1"
-    "@antv/matrix-util" "^3.1.0-beta.3"
-    "@antv/path-util" "^2.0.3"
-    "@antv/util" "~2.0.5"
-    ml-matrix "^6.5.0"
-    tslib "^2.1.0"
-
-"@antv/g6-element@0.8.19":
-  version "0.8.19"
-  resolved "https://registry.yarnpkg.com/@antv/g6-element/-/g6-element-0.8.19.tgz#1b17bfb3856d6703ea7ec8ebda42fad222838e12"
-  integrity sha512-q22KlMHlFjR+hUMeHJyDt1NDsuMB6YBGSV/AgJRcaoatNQRHqdUBDQuwoNhw40tjVs4OJQsWwJ/6PI0zlA3LwQ==
-  dependencies:
-    "@antv/g-base" "^0.5.1"
-    "@antv/g6-core" "0.8.19"
-    "@antv/util" "~2.0.5"
-
-"@antv/g6-pc@0.8.19":
-  version "0.8.19"
-  resolved "https://registry.yarnpkg.com/@antv/g6-pc/-/g6-pc-0.8.19.tgz#120f666c33fade469e612fa55e0005f1c3d03905"
-  integrity sha512-dxaFGQlT7NGQ6kWweBYaBd0hwW7OQtQfT6DB/r431gP02vbXkl3C2Nnjw1rtOeSVBI7PcWOX9T9yHZglM0GsHg==
-  dependencies:
-    "@ant-design/colors" "^4.0.5"
-    "@antv/algorithm" "^0.1.8"
-    "@antv/dom-util" "^2.0.1"
-    "@antv/event-emitter" "~0.1.0"
-    "@antv/g-base" "^0.5.1"
-    "@antv/g-canvas" "^0.5.2"
-    "@antv/g-math" "^0.1.1"
-    "@antv/g-svg" "^0.5.1"
-    "@antv/g6-core" "0.8.19"
-    "@antv/g6-element" "0.8.19"
-    "@antv/g6-plugin" "0.8.19"
-    "@antv/hierarchy" "^0.6.10"
-    "@antv/layout" "^0.3.0"
-    "@antv/matrix-util" "^3.1.0-beta.3"
-    "@antv/path-util" "^2.0.3"
-    "@antv/util" "~2.0.5"
-    color "^3.1.3"
-    d3-force "^2.0.1"
-    dagre "^0.8.5"
-    insert-css "^2.0.0"
-    ml-matrix "^6.5.0"
-
-"@antv/g6-plugin@0.8.19":
-  version "0.8.19"
-  resolved "https://registry.yarnpkg.com/@antv/g6-plugin/-/g6-plugin-0.8.19.tgz#f9f01fe83451f7694a61b2be52406a639a1ac91c"
-  integrity sha512-vPDko7gdrszRp/2OlYwxyWOAFiW/mn/I798s689KsC7/e/YSOuq94TdmdZHulNLOlT6zqqYwIP3JQG6YxdyPTQ==
-  dependencies:
-    "@antv/dom-util" "^2.0.2"
-    "@antv/g-base" "^0.5.1"
-    "@antv/g-canvas" "^0.5.2"
-    "@antv/g-svg" "^0.5.2"
-    "@antv/g6-core" "0.8.19"
-    "@antv/g6-element" "0.8.19"
-    "@antv/matrix-util" "^3.1.0-beta.3"
-    "@antv/path-util" "^2.0.3"
-    "@antv/scale" "^0.3.4"
-    "@antv/util" "^2.0.9"
-    insert-css "^2.0.0"
-
-"@antv/g6@^4.7.16":
-  version "4.8.19"
-  resolved "https://registry.yarnpkg.com/@antv/g6/-/g6-4.8.19.tgz#1ba580f88b38ff7440405f1f0b670b3baa0f5a9d"
-  integrity sha512-VBs45lAnxjjfDu6CTDdb/nMJRYcwAG4K5MWZiVf+vq4789rtElm7q2GKV5zVChadtrqcUt/dCjKp56zR5/foaA==
-  dependencies:
-    "@antv/g6-pc" "0.8.19"
-
-"@antv/graphlib@^1.0.0":
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/@antv/graphlib/-/graphlib-1.2.0.tgz#c88f97d4b3456d261480a1207ffc4fbc5d7dcf0d"
-  integrity sha512-hhJOMThec51nU4Fe5p/viLlNIL71uDEgYFzKPajWjr2715SFG1HAgiP6AVylIeqBcAZ04u3Lw7usjl/TuI5RuQ==
-
-"@antv/hierarchy@^0.6.10":
-  version "0.6.11"
-  resolved "https://registry.yarnpkg.com/@antv/hierarchy/-/hierarchy-0.6.11.tgz#244d6820347170e0107f3611802d1e5bb089ca7a"
-  integrity sha512-RJVhEMCuu4vj+Dt25lXIiNdd7jaqm/fqWGYikiELha4S5tnzdJoTUaUvvpfWlxLx4B0RsS9XRwBs1bOKN71TKg==
-  dependencies:
-    "@antv/util" "^2.0.7"
-
-"@antv/layout@^0.3.0":
-  version "0.3.23"
-  resolved "https://registry.yarnpkg.com/@antv/layout/-/layout-0.3.23.tgz#00e5f47cf29841808afb233f0585565d793ef2b7"
-  integrity sha512-F/CyfQuc1WSgCVemX0jA3pE3XuDRbDJmMueY1cL8WgL6nhdzm3/jg5UPamwbBVnhLk+rzNUDYdEIyX+RJbpcMA==
-  dependencies:
-    "@antv/g-webgpu" "0.7.2"
-    "@antv/graphlib" "^1.0.0"
-    "@antv/util" "^3.3.2"
-    d3-force "^2.1.1"
-    d3-quadtree "^2.0.0"
-    dagre-compound "^0.0.11"
-    ml-matrix "^6.5.0"
-
-"@antv/matrix-util@^3.0.4":
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/@antv/matrix-util/-/matrix-util-3.0.4.tgz#ea13f158aa2fb4ba2fb8d6b6b561ec467ea3ac20"
-  integrity sha512-BAPyu6dUliHcQ7fm9hZSGKqkwcjEDVLVAstlHULLvcMZvANHeLXgHEgV7JqcAV/GIhIz8aZChIlzM1ZboiXpYQ==
-  dependencies:
-    "@antv/util" "^2.0.9"
-    gl-matrix "^3.3.0"
-    tslib "^2.0.3"
-
-"@antv/matrix-util@^3.1.0-beta.1", "@antv/matrix-util@^3.1.0-beta.3":
-  version "3.1.0-beta.3"
-  resolved "https://registry.yarnpkg.com/@antv/matrix-util/-/matrix-util-3.1.0-beta.3.tgz#e061de8fa7be04605a155c69cc5ce9082eedddee"
-  integrity sha512-W2R6Za3A6CmG51Y/4jZUM/tFgYSq7vTqJL1VD9dKrvwxS4sE0ZcXINtkp55CdyBwJ6Cwm8pfoRpnD4FnHahN0A==
-  dependencies:
-    "@antv/util" "^2.0.9"
-    gl-matrix "^3.4.3"
-    tslib "^2.0.3"
-
-"@antv/path-util@^2.0.3", "@antv/path-util@~2.0.5":
-  version "2.0.15"
-  resolved "https://registry.yarnpkg.com/@antv/path-util/-/path-util-2.0.15.tgz#a6f691dfc8b7bce5be7f0aabb5bd614964325631"
-  integrity sha512-R2VLZ5C8PLPtr3VciNyxtjKqJ0XlANzpFb5sE9GE61UQqSRuSVSzIakMxjEPrpqbgc+s+y8i+fmc89Snu7qbNw==
-  dependencies:
-    "@antv/matrix-util" "^3.0.4"
-    "@antv/util" "^2.0.9"
-    tslib "^2.0.3"
-
-"@antv/scale@^0.3.4":
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/@antv/scale/-/scale-0.3.18.tgz#b911f431b3e0b9547b6a65f66d0d3fa295b5ef32"
-  integrity sha512-GHwE6Lo7S/Q5fgaLPaCsW+CH+3zl4aXpnN1skOiEY0Ue9/u+s2EySv6aDXYkAqs//i0uilMDD/0/4n8caX9U9w==
-  dependencies:
-    "@antv/util" "~2.0.3"
-    fecha "~4.2.0"
-    tslib "^2.0.0"
-
-"@antv/util@^2.0.13", "@antv/util@^2.0.7", "@antv/util@^2.0.9", "@antv/util@~2.0.0", "@antv/util@~2.0.13", "@antv/util@~2.0.3", "@antv/util@~2.0.5":
-  version "2.0.17"
-  resolved "https://registry.yarnpkg.com/@antv/util/-/util-2.0.17.tgz#e8ef42aca7892815b229269f3dd10c6b3c7597a9"
-  integrity sha512-o6I9hi5CIUvLGDhth0RxNSFDRwXeywmt6ExR4+RmVAzIi48ps6HUy+svxOCayvrPBN37uE6TAc2KDofRo0nK9Q==
-  dependencies:
-    csstype "^3.0.8"
-    tslib "^2.0.3"
-
-"@antv/util@^3.3.2":
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/@antv/util/-/util-3.3.2.tgz#6238226c9e2e4a7ba2f0c0821e19ee10844931f1"
-  integrity sha512-uvyQxEOugdJs/FVlpz/+8pKxn70z8jEVydPqv+LI62cpIF7YDjVnMfNIsoMqwEoTzPUJ9TJalyLqZhT5rYez0w==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-    gl-matrix "^3.3.0"
-    tslib "^2.3.1"
-
 "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.12.13", "@babel/code-frame@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.5.tgz#234d98e1551960604f1246e6475891a570ad5658"
@@ -1952,27 +1691,71 @@
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
   integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
 
-"@probe.gl/env@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@probe.gl/env/-/env-3.6.0.tgz#33343fd9041a14d21374c1911826d4a2f9d9a35d"
-  integrity sha512-4tTZYUg/8BICC3Yyb9rOeoKeijKbZHRXBEKObrfPmX4sQmYB15ZOUpoVBhAyJkOYVAM8EkPci6Uw5dLCwx2BEQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-
-"@probe.gl/log@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@probe.gl/log/-/log-3.6.0.tgz#c645bfd22b4769dc65161caa17f13bd2b231e413"
-  integrity sha512-hjpyenpEvOdowgZ1qMeCJxfRD4JkKdlXz0RC14m42Un62NtOT+GpWyKA4LssT0+xyLULCByRAtG2fzZorpIAcA==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    "@probe.gl/env" "3.6.0"
-
-"@probe.gl/stats@3.6.0":
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/@probe.gl/stats/-/stats-3.6.0.tgz#a1bb12860fa6f40b9c028f9eb575d7ada0b4dbdd"
-  integrity sha512-JdALQXB44OP4kUBN/UrQgzbJe4qokbVF4Y8lkIA8iVCFnjVowWIgkD/z/0QO65yELT54tTrtepw1jScjKB+rhQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
+"@reactflow/background@11.3.8":
+  version "11.3.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/background/-/background-11.3.8.tgz#367a21c3fd9204ae84cca2ea6d98cd0d142e57d6"
+  integrity sha512-U4aI54F7PwqgYI0Knv72QFRI/wXeipPmIYAlDsA0j51+tlPxs3Nk2z7G1/4pC11GxEZkgQVfcIXro4l1Fk+bIQ==
+  dependencies:
+    "@reactflow/core" "11.10.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/controls@11.2.8":
+  version "11.2.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/controls/-/controls-11.2.8.tgz#70d17eecc1c5a3be4aea371704426bd76b7892a7"
+  integrity sha512-Y9YVx38sRjYtbPsI/xa+B1FGN73FV1GqqajlmGfrc1TmqhJaX+gaMXMvVazT/N5haK1hMJvOApUTLQ2V/5Rdbg==
+  dependencies:
+    "@reactflow/core" "11.10.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
+
+"@reactflow/core@11.10.3":
+  version "11.10.3"
+  resolved "https://registry.yarnpkg.com/@reactflow/core/-/core-11.10.3.tgz#653280dd232e31a73b26cffb892fd02404df3c46"
+  integrity sha512-nV3nep4fjBy3h8mYSnJcclGcQtj8fkUBmNkEwCZCK4ps+n3HNkXFB0BRisSnQz6GRQlYboSsi0cThEl3KdNITw==
+  dependencies:
+    "@types/d3" "^7.4.0"
+    "@types/d3-drag" "^3.0.1"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/minimap@11.7.8":
+  version "11.7.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/minimap/-/minimap-11.7.8.tgz#9d66c79f08b20c2b066b76a45ce9b7fb8f693617"
+  integrity sha512-MwyP5q3VomC91Dhd4P6YcxEfnjDbREGYV6rRxbSJSTHiG0x7ETQCcPelYDGy7JvQej77Pa2yJ4g0FDwP7CsQEA==
+  dependencies:
+    "@reactflow/core" "11.10.3"
+    "@types/d3-selection" "^3.0.3"
+    "@types/d3-zoom" "^3.0.1"
+    classcat "^5.0.3"
+    d3-selection "^3.0.0"
+    d3-zoom "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-resizer@2.2.8":
+  version "2.2.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-resizer/-/node-resizer-2.2.8.tgz#233713f8ca3371b3dfbe5a4c373309dd9735c1f6"
+  integrity sha512-u/EXLpvOfAmq1sGoPYwoX4gi0PnCi0mH3eHVClHNc8JQD0WCqcV1UeVV7H3PF+1SGhhg/aOv/vPG1PcQ5fu4jQ==
+  dependencies:
+    "@reactflow/core" "11.10.3"
+    classcat "^5.0.4"
+    d3-drag "^3.0.0"
+    d3-selection "^3.0.0"
+    zustand "^4.4.1"
+
+"@reactflow/node-toolbar@1.3.8":
+  version "1.3.8"
+  resolved "https://registry.yarnpkg.com/@reactflow/node-toolbar/-/node-toolbar-1.3.8.tgz#b8b1367bce61c5be8d147b2d41408558629194b9"
+  integrity sha512-cfvlTPeJa/ciQTosx2bGrjHT8K/UL9kznpvpOzeZFnJm5UQXmbwAYt4Vo6GfkD51mORcIL7ujQJvB9ym3ZI9KA==
+  dependencies:
+    "@reactflow/core" "11.10.3"
+    classcat "^5.0.3"
+    zustand "^4.4.1"
 
 "@rushstack/eslint-patch@^1.1.3":
   version "1.3.2"
@@ -2086,10 +1869,220 @@
   dependencies:
     "@babel/types" "^7.20.7"
 
-"@types/d3-timer@^2.0.0":
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-2.0.1.tgz#ffb6620d290624f3726aa362c0c8a4b44c8d7200"
-  integrity sha512-TF8aoF5cHcLO7W7403blM7L1T+6NF3XMyN3fxyUolq2uOcFeicG/khQg/dGxiCJWoAcmYulYN7LYSRKO54IXaA==
+"@types/d3-array@*":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
+
+"@types/d3-axis@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-axis/-/d3-axis-3.0.6.tgz#e760e5765b8188b1defa32bc8bb6062f81e4c795"
+  integrity sha512-pYeijfZuBd87T0hGn0FO1vQ/cgLk6E1ALJjfkC0oJ8cbwkZl3TpgS8bVBLZN+2jjGgg38epgxb2zmoGtSfvgMw==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-brush@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-brush/-/d3-brush-3.0.6.tgz#c2f4362b045d472e1b186cdbec329ba52bdaee6c"
+  integrity sha512-nH60IZNNxEcrh6L1ZSMNA28rj27ut/2ZmI3r96Zd+1jrZD++zD3LsMIjWlvg4AYrHn/Pqz4CF3veCxGjtbqt7A==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-chord@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-chord/-/d3-chord-3.0.6.tgz#1706ca40cf7ea59a0add8f4456efff8f8775793d"
+  integrity sha512-LFYWWd8nwfwEmTZG9PfQxd17HbNPksHBiJHaKuY1XeqscXacsS2tyoo6OdRsjf+NQYeB6XrNL3a25E3gH69lcg==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-contour@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-contour/-/d3-contour-3.0.6.tgz#9ada3fa9c4d00e3a5093fed0356c7ab929604231"
+  integrity sha512-BjzLgXGnCWjUSYGfH1cpdo41/hgdWETu4YxpezoztawmqsvCeep+8QGfiY6YbDvfgHz/DkjeIkkZVJavB4a3rg==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/geojson" "*"
+
+"@types/d3-delaunay@*":
+  version "6.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-delaunay/-/d3-delaunay-6.0.4.tgz#185c1a80cc807fdda2a3fe960f7c11c4a27952e1"
+  integrity sha512-ZMaSKu4THYCU6sV64Lhg6qjf1orxBthaC161plr5KuPHo3CNm8DTHiLw/5Eq2b6TsNP0W0iJrUOFscY6Q450Hw==
+
+"@types/d3-dispatch@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-dispatch/-/d3-dispatch-3.0.6.tgz#096efdf55eb97480e3f5621ff9a8da552f0961e7"
+  integrity sha512-4fvZhzMeeuBJYZXRXrRIQnvUYfyXwYmLsdiN7XXmVNQKKw1cM8a5WdID0g1hVFZDqT9ZqZEY5pD44p24VS7iZQ==
+
+"@types/d3-drag@*", "@types/d3-drag@^3.0.1":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-drag/-/d3-drag-3.0.7.tgz#b13aba8b2442b4068c9a9e6d1d82f8bcea77fc02"
+  integrity sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-dsv@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-dsv/-/d3-dsv-3.0.7.tgz#0a351f996dc99b37f4fa58b492c2d1c04e3dac17"
+  integrity sha512-n6QBF9/+XASqcKK6waudgL0pf/S5XHPPI8APyMLLUHd8NqouBGLsU8MgtO7NINGtPBtk9Kko/W4ea0oAspwh9g==
+
+"@types/d3-ease@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-fetch@*":
+  version "3.0.7"
+  resolved "https://registry.yarnpkg.com/@types/d3-fetch/-/d3-fetch-3.0.7.tgz#c04a2b4f23181aa376f30af0283dbc7b3b569980"
+  integrity sha512-fTAfNmxSb9SOWNB9IoG5c8Hg6R+AzUHDRlsXsDZsNp6sxAEOP0tkP3gKkNSO/qmHPoBFTxNrjDprVHDQDvo5aA==
+  dependencies:
+    "@types/d3-dsv" "*"
+
+"@types/d3-force@*":
+  version "3.0.9"
+  resolved "https://registry.yarnpkg.com/@types/d3-force/-/d3-force-3.0.9.tgz#dd96ccefba4386fe4ff36b8e4ee4e120c21fcf29"
+  integrity sha512-IKtvyFdb4Q0LWna6ymywQsEYjK/94SGhPrMfEr1TIc5OBeziTi+1jcCvttts8e0UWZIxpasjnQk9MNk/3iS+kA==
+
+"@types/d3-format@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-format/-/d3-format-3.0.4.tgz#b1e4465644ddb3fdf3a263febb240a6cd616de90"
+  integrity sha512-fALi2aI6shfg7vM5KiR1wNJnZ7r6UuggVqtDA+xiEdPZQwy/trcQaHnwShLuLdta2rTymCNpxYTiMZX/e09F4g==
+
+"@types/d3-geo@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-geo/-/d3-geo-3.1.0.tgz#b9e56a079449174f0a2c8684a9a4df3f60522440"
+  integrity sha512-856sckF0oP/diXtS4jNsiQw/UuK5fQG8l/a9VVLeSouf1/PPbBE1i1W852zVwKwYCBkFJJB7nCFTbk6UMEXBOQ==
+  dependencies:
+    "@types/geojson" "*"
+
+"@types/d3-hierarchy@*":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-hierarchy/-/d3-hierarchy-3.1.6.tgz#8d3638df273ec90da34b3ac89d8784c59708cb0d"
+  integrity sha512-qlmD/8aMk5xGorUvTUWHCiumvgaUXYldYjNVOWtYoTYY/L+WwIEAmJxUmTgr9LoGNG0PPAOmqMDJVDPc7DOpPw==
+
+"@types/d3-interpolate@*":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.2.tgz#4327f4a05d475cf9be46a93fc2e0f8d23380805a"
+  integrity sha512-WAIEVlOCdd/NKRYTsqCpOMHQHemKBEINf8YXMYOtXH0GA7SY0dqMB78P3Uhgfy+4X+/Mlw2wDtlETkN6kQUCMA==
+
+"@types/d3-polygon@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-polygon/-/d3-polygon-3.0.2.tgz#dfae54a6d35d19e76ac9565bcb32a8e54693189c"
+  integrity sha512-ZuWOtMaHCkN9xoeEMr1ubW2nGWsp4nIql+OPQRstu4ypeZ+zk3YKqQT0CXVe/PYqrKpZAi+J9mTs05TKwjXSRA==
+
+"@types/d3-quadtree@*":
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-quadtree/-/d3-quadtree-3.0.6.tgz#d4740b0fe35b1c58b66e1488f4e7ed02952f570f"
+  integrity sha512-oUzyO1/Zm6rsxKRHA1vH0NEDG58HrT5icx/azi9MF1TWdtttWl0UIUsjEQBBh+SIkrpd21ZjEv7ptxWys1ncsg==
+
+"@types/d3-random@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-random/-/d3-random-3.0.3.tgz#ed995c71ecb15e0cd31e22d9d5d23942e3300cfb"
+  integrity sha512-Imagg1vJ3y76Y2ea0871wpabqp613+8/r0mCLEBfdtqC7xMSfj9idOnmBYyMoULfHePJyxMAw3nWhJxzc+LFwQ==
+
+"@types/d3-scale-chromatic@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz#fc0db9c10e789c351f4c42d96f31f2e4df8f5644"
+  integrity sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==
+
+"@types/d3-scale@*":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-selection@*", "@types/d3-selection@^3.0.3":
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@types/d3-selection/-/d3-selection-3.0.10.tgz#98cdcf986d0986de6912b5892e7c015a95ca27fe"
+  integrity sha512-cuHoUgS/V3hLdjJOLTT691+G2QoqAjCVLmr4kJXR4ha56w1Zdu8UUQ5TxLRqudgNjwXeQxKMq4j+lyf9sWuslg==
+
+"@types/d3-shape@*":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
+  integrity sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time-format@*":
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time-format/-/d3-time-format-4.0.3.tgz#d6bc1e6b6a7db69cccfbbdd4c34b70632d9e9db2"
+  integrity sha512-5xg9rC+wWL8kdDj153qZcsJ0FWiFt0J5RB6LYUNZjwSnesfblqrI/bJ1wBdJ8OQfncgbJG5+2F+qfqnqyzYxyg==
+
+"@types/d3-time@*":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.3.tgz#3c186bbd9d12b9d84253b6be6487ca56b54f88be"
+  integrity sha512-2p6olUZ4w3s+07q3Tm2dbiMZy5pCDfYwtLXXHUnVzXgQlZ/OyPtUz6OL382BkOuGlLXqfT+wqv8Fw2v8/0geBw==
+
+"@types/d3-timer@*":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
+"@types/d3-transition@*":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-transition/-/d3-transition-3.0.8.tgz#677707f5eed5b24c66a1918cde05963021351a8f"
+  integrity sha512-ew63aJfQ/ms7QQ4X7pk5NxQ9fZH/z+i24ZfJ6tJSfqxJMrYLiK01EAs2/Rtw/JreGUsS3pLPNV644qXFGnoZNQ==
+  dependencies:
+    "@types/d3-selection" "*"
+
+"@types/d3-zoom@*", "@types/d3-zoom@^3.0.1":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz#dccb32d1c56b1e1c6e0f1180d994896f038bc40b"
+  integrity sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==
+  dependencies:
+    "@types/d3-interpolate" "*"
+    "@types/d3-selection" "*"
+
+"@types/d3@^7.4.0":
+  version "7.4.3"
+  resolved "https://registry.yarnpkg.com/@types/d3/-/d3-7.4.3.tgz#d4550a85d08f4978faf0a4c36b848c61eaac07e2"
+  integrity sha512-lZXZ9ckh5R8uiFVt8ogUNf+pIrK4EsWrx2Np75WvF/eTpJ0FMHNhjXk8CKEx/+gpHbNQyJWehbFaTvqmHWB3ww==
+  dependencies:
+    "@types/d3-array" "*"
+    "@types/d3-axis" "*"
+    "@types/d3-brush" "*"
+    "@types/d3-chord" "*"
+    "@types/d3-color" "*"
+    "@types/d3-contour" "*"
+    "@types/d3-delaunay" "*"
+    "@types/d3-dispatch" "*"
+    "@types/d3-drag" "*"
+    "@types/d3-dsv" "*"
+    "@types/d3-ease" "*"
+    "@types/d3-fetch" "*"
+    "@types/d3-force" "*"
+    "@types/d3-format" "*"
+    "@types/d3-geo" "*"
+    "@types/d3-hierarchy" "*"
+    "@types/d3-interpolate" "*"
+    "@types/d3-path" "*"
+    "@types/d3-polygon" "*"
+    "@types/d3-quadtree" "*"
+    "@types/d3-random" "*"
+    "@types/d3-scale" "*"
+    "@types/d3-scale-chromatic" "*"
+    "@types/d3-selection" "*"
+    "@types/d3-shape" "*"
+    "@types/d3-time" "*"
+    "@types/d3-time-format" "*"
+    "@types/d3-timer" "*"
+    "@types/d3-transition" "*"
+    "@types/d3-zoom" "*"
+
+"@types/geojson@*":
+  version "7946.0.13"
+  resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.13.tgz#e6e77ea9ecf36564980a861e24e62a095988775e"
+  integrity sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ==
 
 "@types/graceful-fs@^4.1.3":
   version "4.1.6"
@@ -2679,6 +2672,11 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
+classcat@^5.0.3, classcat@^5.0.4:
+  version "5.0.4"
+  resolved "https://registry.yarnpkg.com/classcat/-/classcat-5.0.4.tgz#e12d1dfe6df6427f260f03b80dc63571a5107ba6"
+  integrity sha512-sbpkOw6z413p+HDGcBENe498WM9woqWHiJxCq7nvmxe9WmrUmqfAcxpIwAiMtM5Q3AhYkzXcNQHqsWq0mND51g==
+
 cliui@^8.0.1:
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-8.0.1.tgz#0c04b075db02cbfe60dc8e6cf2f5486b1a3608aa"
@@ -2698,7 +2696,7 @@ collect-v8-coverage@^1.0.0:
   resolved "https://registry.yarnpkg.com/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz#c0b29bcd33bcd0779a1344c2136051e6afd3d9e9"
   integrity sha512-lHl4d5/ONEbLlJvaJNtsF/Lz+WvB07u2ycqTYbdrq7UypDXailES4valYb2eWiJFxZlVmpGekfqoxQhzyFdT4Q==
 
-color-convert@^1.9.0, color-convert@^1.9.3:
+color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   integrity sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==
@@ -2717,32 +2715,16 @@ color-name@1.1.3:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
   integrity sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==
 
-color-name@^1.0.0, color-name@~1.1.4:
+color-name@~1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-color-string@^1.6.0:
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.9.1.tgz#4467f9146f036f855b764dfb5bf8582bf342c7a4"
-  integrity sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg==
-  dependencies:
-    color-name "^1.0.0"
-    simple-swizzle "^0.2.2"
-
 color2k@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/color2k/-/color2k-2.0.2.tgz#ac2b4aea11c822a6bcb70c768b5a289f4fffcebb"
   integrity sha512-kJhwH5nAwb34tmyuqq/lgjEKzlFXn1U99NlnB6Ws4qVaERcRUYeYP1cBw6BJ4vxaWStAUEef4WMr7WjOCnBt8w==
 
-color@^3.1.3:
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/color/-/color-3.2.1.tgz#3544dc198caf4490c3ecc9a790b54fe9ff45e164"
-  integrity sha512-aBl7dZI9ENN6fUGC7mWpMTPNHmWUSNan9tuWN6ahh5ZLNk9baLJOnSMlrQkHcrfFgz2/RigjUVAjdx36VcemKA==
-  dependencies:
-    color-convert "^1.9.3"
-    color-string "^1.6.0"
-
 combined-stream@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -2826,7 +2808,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.8:
+csstype@^3.0.11, csstype@^3.0.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.2.tgz#1d4bf9d572f11c14031f0436e1c10bc1f571f50b"
   integrity sha512-I7K1Uu0MBPzaFKg4nI5Q7Vs2t+3gWWW648spaF+Rg7pI9ds18Ugn+lvg4SHczUdKlHI5LWBXyqfS8+DufyBsgQ==
@@ -2836,59 +2818,67 @@ csstype@^3.0.11, csstype@^3.0.2, csstype@^3.0.8:
   resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e"
   integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ==
 
-"d3-dispatch@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-2.0.0.tgz#8a18e16f76dd3fcaef42163c97b926aa9b55e7cf"
-  integrity sha512-S/m2VsXI7gAti2pBoLClFFTMOO1HTtT0j99AuXLoGFKO6deHDdnv6ZGTxSTTUTgO1zVcv82fCOtDjYK4EECmWA==
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
 
-d3-ease@^1.0.5:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-1.0.7.tgz#9a834890ef8b8ae8c558b2fe55bd57f5993b85e2"
-  integrity sha512-lx14ZPYkhNx0s/2HX5sLFUI3mbasHjSSpwO/KaaNACweVwxUruKyWVcb293wMv1RqTPZyZ8kSZ2NogUZNcLOFQ==
+"d3-dispatch@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz#5fc75284e9c2375c36c839411a0cf550cbfc4d5e"
+  integrity sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==
 
-d3-force@^2.0.1, d3-force@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/d3-force/-/d3-force-2.1.1.tgz#f20ccbf1e6c9e80add1926f09b51f686a8bc0937"
-  integrity sha512-nAuHEzBqMvpFVMf9OX75d00OxvOXdxY+xECIXjW6Gv8BRrXu6gAWbv/9XKrvfJ5i5DCokDW7RYE50LRoK092ew==
+"d3-drag@2 - 3", d3-drag@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-drag/-/d3-drag-3.0.0.tgz#994aae9cd23c719f53b5e10e3a0a6108c69607ba"
+  integrity sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==
   dependencies:
-    d3-dispatch "1 - 2"
-    d3-quadtree "1 - 2"
-    d3-timer "1 - 2"
+    d3-dispatch "1 - 3"
+    d3-selection "3"
 
-d3-interpolate@2.0.1, d3-interpolate@^3.0.1:
+"d3-ease@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-interpolate@1 - 3":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163"
   integrity sha512-c5UhwwTs/yybcmTpAVqwSFl6vrQ8JZJoT5F7xNFK9pymv5C0Ymcc9/LIJHtYIggg/yS9YHw8i8O8tgb9pupjeQ==
   dependencies:
     d3-color "1 - 2"
 
-"d3-quadtree@1 - 2", d3-quadtree@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-quadtree/-/d3-quadtree-2.0.0.tgz#edbad045cef88701f6fee3aee8e93fb332d30f9d"
-  integrity sha512-b0Ed2t1UUalJpc3qXzKi+cPGxeXRr4KU9YSlocN74aTzp6R/Ud43t79yLLqxHRWZfsvWXmbDWPpoENK1K539xw==
-
-"d3-timer@1 - 2":
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-2.0.0.tgz#055edb1d170cfe31ab2da8968deee940b56623e6"
-  integrity sha512-TO4VLh0/420Y/9dO3+f9abDEFYeCUr2WZRlxJvbp4HPTQcSylXNiL6yZa9FIUvV1yRiFufl1bszTCLDqv9PWNA==
+"d3-selection@2 - 3", d3-selection@3, d3-selection@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-selection/-/d3-selection-3.0.0.tgz#c25338207efa72cc5b9bd1458a1a41901f1e1b31"
+  integrity sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==
 
-d3-timer@^1.0.9:
-  version "1.0.10"
-  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-1.0.10.tgz#dfe76b8a91748831b13b6d9c793ffbd508dd9de5"
-  integrity sha512-B1JDm0XDaQC+uvo4DT79H0XmBskgS3l6Ve+1SBCfxgmtIb1AVrPIoqd+nPSv+loMX8szQ0sVUhGngL7D5QPiXw==
+"d3-timer@1 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
 
-dagre-compound@^0.0.11:
-  version "0.0.11"
-  resolved "https://registry.yarnpkg.com/dagre-compound/-/dagre-compound-0.0.11.tgz#8d3d1004d756f420582d29f28c92045375018987"
-  integrity sha512-UrSgRP9LtOZCYb9e5doolZXpc7xayyszgyOs7uakTK4n4KsLegLVTRRtq01GpQd/iZjYw5fWMapx9ed+c80MAQ==
+"d3-transition@2 - 3":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-transition/-/d3-transition-3.0.1.tgz#6869fdde1448868077fdd5989200cb61b2a1645f"
+  integrity sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==
+  dependencies:
+    d3-color "1 - 3"
+    d3-dispatch "1 - 3"
+    d3-ease "1 - 3"
+    d3-interpolate "1 - 3"
+    d3-timer "1 - 3"
 
-dagre@^0.8.5:
-  version "0.8.5"
-  resolved "https://registry.yarnpkg.com/dagre/-/dagre-0.8.5.tgz#ba30b0055dac12b6c1fcc247817442777d06afee"
-  integrity sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==
+d3-zoom@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/d3-zoom/-/d3-zoom-3.0.0.tgz#d13f4165c73217ffeaa54295cd6969b3e7aee8f3"
+  integrity sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==
   dependencies:
-    graphlib "^2.1.8"
-    lodash "^4.17.15"
+    d3-dispatch "1 - 3"
+    d3-drag "2 - 3"
+    d3-interpolate "1 - 3"
+    d3-selection "2 - 3"
+    d3-transition "2 - 3"
 
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
@@ -2980,11 +2970,6 @@ dequal@^2.0.3:
   resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
   integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
 
-detect-browser@^5.0.0, detect-browser@^5.1.0:
-  version "5.3.0"
-  resolved "https://registry.yarnpkg.com/detect-browser/-/detect-browser-5.3.0.tgz#9705ef2bddf46072d0f7265a1fe300e36fe7ceca"
-  integrity sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==
-
 detect-newline@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-3.1.0.tgz#576f5dfc63ae1a192ff192d8ad3af6308991b651"
@@ -3395,11 +3380,6 @@ esutils@^2.0.2:
   resolved "https://registry.yarnpkg.com/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
-eventemitter3@^4.0.0:
-  version "4.0.7"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
-  integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/execa/-/execa-5.1.1.tgz#f80ad9cbf4298f7bd1d4c9555c21e93741c411dd"
@@ -3472,11 +3452,6 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
-fecha@~4.2.0:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/fecha/-/fecha-4.2.3.tgz#4d9ccdbc61e8629b259fdca67e65891448d569fd"
-  integrity sha512-OP2IUU6HeYKJi3i0z4A19kHMQoLVs4Hc+DPqqxI2h/DPZHTm/vjsfC6P0b4jCMy14XizLBqvndQ+UilD7707Jw==
-
 file-entry-cache@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
@@ -3654,16 +3629,6 @@ get-symbol-description@^1.0.0:
     call-bind "^1.0.2"
     get-intrinsic "^1.1.1"
 
-gl-matrix@^3.0.0, gl-matrix@^3.1.0, gl-matrix@^3.3.0, gl-matrix@^3.4.3:
-  version "3.4.3"
-  resolved "https://registry.yarnpkg.com/gl-matrix/-/gl-matrix-3.4.3.tgz#fc1191e8320009fd4d20e9339595c6041ddc22c9"
-  integrity sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==
-
-gl-vec2@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/gl-vec2/-/gl-vec2-1.3.0.tgz#83d472ed46034de8e09cbc857123fb6c81c51199"
-  integrity sha512-YiqaAuNsheWmUV0Sa8k94kBB0D6RWjwZztyO+trEYS8KzJ6OQB/4686gdrf59wld4hHFIvaxynO3nRxpk1Ij/A==
-
 glob-parent@^5.1.2:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
@@ -3750,13 +3715,6 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-graphlib@^2.1.8:
-  version "2.1.8"
-  resolved "https://registry.yarnpkg.com/graphlib/-/graphlib-2.1.8.tgz#5761d414737870084c92ec7b5dbcb0592c9d35da"
-  integrity sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==
-  dependencies:
-    lodash "^4.17.15"
-
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -3900,11 +3858,6 @@ inherits@2:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-insert-css@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/insert-css/-/insert-css-2.0.0.tgz#eb5d1097b7542f4c79ea3060d3aee07d053880f4"
-  integrity sha512-xGq5ISgcUP5cvGkS2MMFLtPDBtrtQPSFfC6gA6U8wHKqfjTIMZLZNxOItQnoSjdOzlXOLU/yD32RKC4SvjNbtA==
-
 internal-slot@^1.0.3, internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
@@ -3921,11 +3874,6 @@ invariant@^2.2.4:
   dependencies:
     loose-envify "^1.0.0"
 
-is-any-array@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/is-any-array/-/is-any-array-2.0.1.tgz#9233242a9c098220290aa2ec28f82ca7fa79899e"
-  integrity sha512-UtilS7hLRu++wb/WBAw9bNuP1Eg04Ivn1vERJck8zJthEvXCBEBpGR/33u/xLKWEQf95803oalHrVDptcAvFdQ==
-
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -3948,11 +3896,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
-is-arrayish@^0.3.1:
-  version "0.3.2"
-  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
-  integrity sha512-eVRqCvVlZbuw3GrM63ovNSNAeA1K16kaR/LRY/92w0zxQ5/1YzwblUX652i4Xs9RwAGjW9d9y6X88t8OaAJfWQ==
-
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -4781,37 +4724,6 @@ minimist@^1.2.0, minimist@^1.2.6:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
 
-ml-array-max@^1.2.4:
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/ml-array-max/-/ml-array-max-1.2.4.tgz#2373e2b7e51c8807e456cc0ef364c5863713623b"
-  integrity sha512-BlEeg80jI0tW6WaPyGxf5Sa4sqvcyY6lbSn5Vcv44lp1I2GR6AWojfUvLnGTNsIXrZ8uqWmo8VcG1WpkI2ONMQ==
-  dependencies:
-    is-any-array "^2.0.0"
-
-ml-array-min@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/ml-array-min/-/ml-array-min-1.2.3.tgz#662f027c400105816b849cc3cd786915d0801495"
-  integrity sha512-VcZ5f3VZ1iihtrGvgfh/q0XlMobG6GQ8FsNyQXD3T+IlstDv85g8kfV0xUG1QPRO/t21aukaJowDzMTc7j5V6Q==
-  dependencies:
-    is-any-array "^2.0.0"
-
-ml-array-rescale@^1.3.7:
-  version "1.3.7"
-  resolved "https://registry.yarnpkg.com/ml-array-rescale/-/ml-array-rescale-1.3.7.tgz#c4d129320d113a732e62dd963dc1695bba9a5340"
-  integrity sha512-48NGChTouvEo9KBctDfHC3udWnQKNKEWN0ziELvY3KG25GR5cA8K8wNVzracsqSW1QEkAXjTNx+ycgAv06/1mQ==
-  dependencies:
-    is-any-array "^2.0.0"
-    ml-array-max "^1.2.4"
-    ml-array-min "^1.2.3"
-
-ml-matrix@^6.5.0:
-  version "6.10.4"
-  resolved "https://registry.yarnpkg.com/ml-matrix/-/ml-matrix-6.10.4.tgz#babee344b20062d9c123aa801c2e5d0d0c7477f6"
-  integrity sha512-rUyEhfNPzqFsltYwvjNeYQXlYEaVea3KgzcJKJteQUj2WVAGFx9fLNRjtMR9mg2B6bd5buxlmkZmxM4hmO+SKg==
-  dependencies:
-    is-any-array "^2.0.0"
-    ml-array-rescale "^1.3.7"
-
 ms@2.1.2:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
@@ -5107,6 +5019,11 @@ prelude-ls@^1.2.1:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
+prettier-plugin-organize-imports@^3.2.4:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/prettier-plugin-organize-imports/-/prettier-plugin-organize-imports-3.2.4.tgz#77967f69d335e9c8e6e5d224074609309c62845e"
+  integrity sha512-6m8WBhIp0dfwu0SkgfOxJqh+HpdyfqSSLfKKRZSFbDuEQXDDndb8fTpRWkUrX/uBenkex3MgnVk0J3b3Y5byog==
+
 prettier@2.8.8:
   version "2.8.8"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.8.8.tgz#e8c5d7e98a4305ffe3de2e1fc4aca1a71c28b1da"
@@ -5135,16 +5052,6 @@ prismjs@^1.29.0:
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.29.0.tgz#f113555a8fa9b57c35e637bba27509dcf802dd12"
   integrity sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==
 
-probe.gl@^3.1.1:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/probe.gl/-/probe.gl-3.6.0.tgz#e816234412b27a70b9be029cb82c8cf96cd72659"
-  integrity sha512-19JydJWI7+DtR4feV+pu4Mn1I5TAc0xojuxVgZdXIyfmTLfUaFnk4OloWK1bKbPtkgGKLr2lnbnCXmpZEcEp9g==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    "@probe.gl/env" "3.6.0"
-    "@probe.gl/log" "3.6.0"
-    "@probe.gl/stats" "3.6.0"
-
 prompts@^2.0.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.4.2.tgz#7b57e73b3a48029ad10ebd44f74b01722a4cb069"
@@ -5284,6 +5191,18 @@ react@18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+reactflow@^11.10.3:
+  version "11.10.3"
+  resolved "https://registry.yarnpkg.com/reactflow/-/reactflow-11.10.3.tgz#9cf812e16e0a9c57131050860d3ec80afe4097ca"
+  integrity sha512-DGNrTdkWjZtPOhj5MV8fiWWGkJo+otMVdoJ9l67bQL+Xf+8NkJ4AHmRXoYIxtgcENzwTr5WTAIJlswV9i91cyw==
+  dependencies:
+    "@reactflow/background" "11.3.8"
+    "@reactflow/controls" "11.2.8"
+    "@reactflow/core" "11.10.3"
+    "@reactflow/minimap" "11.7.8"
+    "@reactflow/node-resizer" "2.2.8"
+    "@reactflow/node-toolbar" "1.3.8"
+
 redent@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
@@ -5311,11 +5230,6 @@ regexpp@^3.2.0:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-3.2.0.tgz#0425a2768d8f23bad70ca4b90461fa2f1213e1b2"
   integrity sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==
 
-regl@^1.3.11:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/regl/-/regl-1.7.0.tgz#0d185431044a356bf80e9b775b11b935ef2746d3"
-  integrity sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w==
-
 require-directory@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/require-directory/-/require-directory-2.1.1.tgz#8c64ad5fd30dab1c976e2344ffe7f792a6a6df42"
@@ -5451,13 +5365,6 @@ signal-exit@^3.0.3, signal-exit@^3.0.7:
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"
   integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==
 
-simple-swizzle@^0.2.2:
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
-  integrity sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg==
-  dependencies:
-    is-arrayish "^0.3.1"
-
 sisteransi@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.5.tgz#134d681297756437cc05ca01370d3a7a571075ed"
@@ -5670,11 +5577,6 @@ tiny-invariant@^1.0.6:
   resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642"
   integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw==
 
-tinycolor2@^1.4.1:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.6.0.tgz#f98007460169b0263b97072c5ae92484ce02d09e"
-  integrity sha512-XPaBkWQJdsf3pLKJV9p4qN/S+fm2Oj8AIPo1BTUhg5oxkvm9+SVEGFdhyOz7tTdUTfvxMiAs4sp6/eZO2Ew+pw==
-
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -6007,3 +5909,10 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^4.4.1:
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-4.5.0.tgz#141354af56f91de378aa6c4b930032ab338f3ef0"
+  integrity sha512-zlVFqS5TQ21nwijjhJlx4f9iGrXSL0o/+Dpy4txAP22miJ8Ti6c1Ol1RLNN98BMib83lmDH/2KmLwaNXpjrO1A==
+  dependencies:
+    use-sync-external-store "1.2.0"