Run prettier

src/api/ToolboxAPI.ts

@@ -114,7 +114,7 @@ export async function fetchProblemGraph(): Promise<ProblemGraph> {
         status: SolutionStatus.SOLVED,
         solver: {
           id: "vr-solver-1",
-          name: "VR Solver 1"
+          name: "VR Solver 1",
         },
         solutionId: 1,
         subRoutines: [
@@ -124,18 +124,18 @@ export async function fetchProblemGraph(): Promise<ProblemGraph> {
             solutionId: 2,
             solver: {
               id: "clustering-solver-1",
-              name: "Clustering Solver 1"
+              name: "Clustering Solver 1",
             },
-            subRoutines: []
+            subRoutines: [],
           },
           {
             problemType: "travelling-salesman",
             status: SolutionStatus.PENDING_USER_ACTION,
             solutionId: 3,
-            subRoutines: []
-          }
-        ]
-      }
+            subRoutines: [],
+          },
+        ],
+      },
     });
   });
 }

src/components/solvers/Graph/GMLGraphView.tsx

@@ -1,5 +1,12 @@
 import { useEffect } from "react";
-import { Controls, Edge, Node, ReactFlow, useEdgesState, useNodesState } from "reactflow";
+import {
+  Controls,
+  Edge,
+  Node,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from "reactflow";
 import "reactflow/dist/style.css";
 import { parseGML } from "../../../converter/graph/gml/GmlParser";
 
@@ -52,8 +59,8 @@ export const GMLGraphView = (props: { gml: string }) => {
           type: getNodeType(node),
           position: {
             x: 0,
-            y: i * 100
-          }
+            y: i * 100,
+          },
         };
         return n;
       });
@@ -63,7 +70,7 @@ export const GMLGraphView = (props: { gml: string }) => {
           id: i.toString(),
           source: edge.source,
           target: edge.target,
-          label: edge.label
+          label: edge.label,
         };
         return e;
       });
@@ -78,17 +85,18 @@ export const GMLGraphView = (props: { gml: string }) => {
         width: "50vw",
         height: "50vh",
         border: "2px solid black",
-        borderRadius: "15px"
+        borderRadius: "15px",
       }}
     >
       <ReactFlow
         nodes={nodes}
         edges={edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
-        fitView>
+        fitView
+      >
         <Controls />
       </ReactFlow>
     </div>
   );
-};
+};

src/components/solvers/Graph/ProblemGraphView.tsx

@@ -1,9 +1,19 @@
 import { useEffect } from "react";
-import { Controls, Edge, Node, ReactFlow, useEdgesState, useNodesState } from "reactflow";
-import { ProblemGraph, ProblemNode } from "../../../api/data-model/ProblemGraph";
+import {
+  Controls,
+  Edge,
+  Node,
+  ReactFlow,
+  useEdgesState,
+  useNodesState,
+} from "reactflow";
+import "reactflow/dist/style.css";
+import {
+  ProblemGraph,
+  ProblemNode,
+} from "../../../api/data-model/ProblemGraph";
 import { SolutionStatus } from "../../../api/data-model/SolutionStatus";
 import { fetchSolvers } from "../../../api/ToolboxAPI";
-import 'reactflow/dist/style.css';
 
 export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
   const [nodes, setNodes, onNodesChange] = useNodesState<Node[]>([]);
@@ -16,7 +26,10 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
     setEdges(edges);
     setNodes(nodes);
 
-    function problemGraphToReactFlow(graph: ProblemGraph): { nodes: Node[]; edges: Edge[] } {
+    function problemGraphToReactFlow(graph: ProblemGraph): {
+      nodes: Node[];
+      edges: Edge[];
+    } {
       function getNodeId(node: ProblemNode) {
         return node.problemType + node.solutionId.toString();
       }
@@ -54,7 +67,7 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
           (problemNode.solver == null ? "" : " - " + problemNode.solver?.name);
         let position = {
           x: getPositionX(levelInfo),
-          y: getPositionY(level)
+          y: getPositionY(level),
         };
         let data = { label: label };
         let type: string;
@@ -70,12 +83,12 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
           id: id,
           data: data,
           position: position,
-          type: type
+          type: type,
         };
 
         if (problemNode.status == SolutionStatus.PENDING_USER_ACTION) {
           node.style = {
-            background: "teal"
+            background: "teal",
           };
 
           fetchSolvers(problemNode.problemType).then((solvers) => {
@@ -90,23 +103,23 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
                   x:
                     node.position.x +
                     getPositionX({ index: i, count: solvers.length }),
-                  y: getPositionY(level + 1)
+                  y: getPositionY(level + 1),
                 },
                 type: "output",
                 style: {
-                  background: "teal"
-                }
+                  background: "teal",
+                },
               });
 
               edges.push({
                 id: id + "-" + solverId,
                 type: "step",
                 source: id,
-                target: solverId
+                target: solverId,
               });
             }
             node.style = {
-              background: "grey"
+              background: "grey",
             };
 
             setNodes(nodes);
@@ -122,11 +135,11 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
             id: getEdgeId(problemNode, subRoutine),
             source: id,
             target: getNodeId(subRoutine),
-            animated: subRoutine.status == SolutionStatus.COMPUTING
+            animated: subRoutine.status == SolutionStatus.COMPUTING,
           });
           addNode(subRoutine, level + 1, {
             index: i,
-            count: problemNode.subRoutines.length
+            count: problemNode.subRoutines.length,
           });
         }
       }
@@ -143,17 +156,18 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => {
         width: "50vw",
         height: "50vh",
         border: "2px solid black",
-        borderRadius: "15px"
+        borderRadius: "15px",
       }}
     >
       <ReactFlow
         nodes={nodes}
         edges={edges}
         onNodesChange={onNodesChange}
         onEdgesChange={onEdgesChange}
-        fitView>
+        fitView
+      >
         <Controls />
       </ReactFlow>
     </div>
   );
-};
+};

src/components/solvers/Graph/TestGraphDisplay.tsx

@@ -7,12 +7,10 @@ export const TestGraphDisplay = () => {
   let [graph, setGraph] = useState<ProblemGraph | null>(null);
 
   useEffect(() => {
-    fetchProblemGraph()
-      .then(graph => {
-        setGraph(graph);
-      });
+    fetchProblemGraph().then((graph) => {
+      setGraph(graph);
+    });
   }, []);
 
-  return (
-    <ProblemGraphView graph={graph} />);
+  return <ProblemGraphView graph={graph} />;
 };

src/pages/index.tsx

@@ -15,7 +15,7 @@ const Home: NextPage = () => {
         <link rel="icon" href="/favicon.ico" />
         {/* TODO: replace favicon */}
       </Head>
-      <TestGraphDisplay/>
+      <TestGraphDisplay />
       <Text color="text" align="justify" as="b">
         Welcome to the ProvideQ Toolbox!
       </Text>

src/pages/solve/MaxCut.tsx

@@ -43,9 +43,7 @@ const MaxCut: NextPage = () => {
         body={
           <Container>
             <Center>
-              <GMLGraphView
-                gml={graphString}
-              />
+              <GMLGraphView gml={graphString} />
             </Center>
 
             <Divider />