Merge pull request #61 from ProvideQ/feat/solver-descriptions

Feat/solver descriptions
ProvideQ · Jan 20, 2025 · 9c9e789 · 9c9e789
2 parents 36fb1f7 + ffae251
commit 9c9e789
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 21 deletions.
diff --git a/src/api/data-model/ProblemSolverInfo.ts b/src/api/data-model/ProblemSolverInfo.ts
@@ -1,4 +1,5 @@
 export interface ProblemSolverInfo {
   id: string;
   name: string;
+  description: string;
 }
diff --git a/src/components/solvers/Graph/ProblemNode.tsx b/src/components/solvers/Graph/ProblemNode.tsx
@@ -133,7 +133,10 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
   // 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;
+  const solver = solvers[typeId]?.find((s) => s.id === solverId);
+  const solverName = solver?.name;
+  const solverDescription =
+    solver?.description ?? "Solves the ${typeId} Problem.";
 
   // Fetch solvers for type if necessary
   getSolvers(typeId);
@@ -342,10 +345,10 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
           marginTop="-10px"
         >
           <SolverNodeContent
-            problemIds={props.data.problemDtos.map((dto) => dto.id)}
             solver={{
               id: solverId,
               name: solverName,
+              description: solverDescription,
             }}
             button={problemButton()}
           />

diff --git a/src/components/solvers/Graph/SolverNode.tsx b/src/components/solvers/Graph/SolverNode.tsx
@@ -4,7 +4,6 @@ import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
 import { SolverNodeContent } from "./SolverNodeContent";
 
 export interface SolverNodeData {
-  problemId: string[];
   problemSolver: ProblemSolverInfo;
   selectCallback: (problemSolver: ProblemSolverInfo) => void;
 }
@@ -45,7 +44,6 @@ export function SolverNode(props: NodeProps<SolverNodeData>) {
       <Handle type="target" position={Position.Top} />
       <VStack gap="0px">
         <SolverNodeContent
-          problemIds={props.data.problemId}
           solver={props.data.problemSolver}
           button={{
             label: "Select",

diff --git a/src/components/solvers/Graph/SolverNodeContent.tsx b/src/components/solvers/Graph/SolverNodeContent.tsx
@@ -1,12 +1,25 @@
-import { Button, HStack, Text, Tooltip, VStack } from "@chakra-ui/react";
+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 { IoMdRefresh } from "react-icons/io";
 import { ProblemSolverInfo } from "../../../api/data-model/ProblemSolverInfo";
-import { useGraphUpdates } from "./ProblemGraphView";
 
 export interface SolverNodeContentProps {
-  problemIds: string[];
   solver: ProblemSolverInfo;
   button: {
     label: ReactNode;
@@ -15,8 +28,6 @@ export interface SolverNodeContentProps {
 }
 
 export const SolverNodeContent = (props: SolverNodeContentProps) => {
-  const { updateProblem } = useGraphUpdates();
-
   return (
     <VStack gap="0px">
       <HStack align="start" maxW="10rem" justifyContent="space-between" gap="0">
@@ -29,17 +40,28 @@ export const SolverNodeContent = (props: SolverNodeContentProps) => {
           {props.solver.name}
         </Text>
 
-        {props.problemIds !== undefined && (
-          <IoMdRefresh
-            cursor="pointer"
-            size="2rem"
-            onClick={() => {
-              for (let problemId of props.problemIds) {
-                updateProblem(problemId);
-              }
-            }}
-          />
-        )}
+        <Popover>
+          <PopoverTrigger>
+            <div>
+              <FaQuestionCircle size="1rem" />
+            </div>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverHeader>
+                <Text fontWeight="semibold">{props.solver.name}</Text>
+              </PopoverHeader>
+              <PopoverBody>
+                <Text>{props.solver.description}</Text>
+              </PopoverBody>
+              <PopoverFooter>
+                <Text fontSize="xs">{props.solver.id}</Text>
+              </PopoverFooter>
+            </PopoverContent>
+          </Portal>
+        </Popover>
       </HStack>
 
       <div