From 4561aecfdd13957e3fdd30daeddd81d33b74dede Mon Sep 17 00:00:00 2001 From: nickp Date: Mon, 29 Jan 2024 18:18:50 +0100 Subject: [PATCH] Run prettier --- src/api/ToolboxAPI.ts | 14 +++--- src/components/solvers/Graph/GMLGraphView.tsx | 22 ++++++--- .../solvers/Graph/ProblemGraphView.tsx | 48 ++++++++++++------- .../solvers/Graph/TestGraphDisplay.tsx | 10 ++-- src/pages/index.tsx | 2 +- src/pages/solve/MaxCut.tsx | 4 +- 6 files changed, 59 insertions(+), 41 deletions(-) diff --git a/src/api/ToolboxAPI.ts b/src/api/ToolboxAPI.ts index 698d525..d1bb18d 100644 --- a/src/api/ToolboxAPI.ts +++ b/src/api/ToolboxAPI.ts @@ -114,7 +114,7 @@ export async function fetchProblemGraph(): Promise { 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 { 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: [], + }, + ], + }, }); }); } diff --git a/src/components/solvers/Graph/GMLGraphView.tsx b/src/components/solvers/Graph/GMLGraphView.tsx index eb37821..fcffd18 100644 --- a/src/components/solvers/Graph/GMLGraphView.tsx +++ b/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,7 +85,7 @@ export const GMLGraphView = (props: { gml: string }) => { width: "50vw", height: "50vh", border: "2px solid black", - borderRadius: "15px" + borderRadius: "15px", }} > { edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - fitView> + fitView + > ); -}; \ No newline at end of file +}; diff --git a/src/components/solvers/Graph/ProblemGraphView.tsx b/src/components/solvers/Graph/ProblemGraphView.tsx index 41f0db0..9212301 100644 --- a/src/components/solvers/Graph/ProblemGraphView.tsx +++ b/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([]); @@ -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,7 +156,7 @@ export const ProblemGraphView = (props: { graph: ProblemGraph | null }) => { width: "50vw", height: "50vh", border: "2px solid black", - borderRadius: "15px" + borderRadius: "15px", }} > { edges={edges} onNodesChange={onNodesChange} onEdgesChange={onEdgesChange} - fitView> + fitView + > ); -}; \ No newline at end of file +}; diff --git a/src/components/solvers/Graph/TestGraphDisplay.tsx b/src/components/solvers/Graph/TestGraphDisplay.tsx index 98c8452..4edf438 100644 --- a/src/components/solvers/Graph/TestGraphDisplay.tsx +++ b/src/components/solvers/Graph/TestGraphDisplay.tsx @@ -7,12 +7,10 @@ export const TestGraphDisplay = () => { let [graph, setGraph] = useState(null); useEffect(() => { - fetchProblemGraph() - .then(graph => { - setGraph(graph); - }); + fetchProblemGraph().then((graph) => { + setGraph(graph); + }); }, []); - return ( - ); + return ; }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index b895301..ee700db 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -15,7 +15,7 @@ const Home: NextPage = () => { {/* TODO: replace favicon */} - + Welcome to the ProvideQ Toolbox! diff --git a/src/pages/solve/MaxCut.tsx b/src/pages/solve/MaxCut.tsx index cb428c3..ba05edf 100644 --- a/src/pages/solve/MaxCut.tsx +++ b/src/pages/solve/MaxCut.tsx @@ -43,9 +43,7 @@ const MaxCut: NextPage = () => { body={
- +