Add solver characteristics based on theoretical paper concepts

Modify some icon-text margins

Author: ekulos-code

src/api/toolbox/data-model/ProblemSolverInfo.ts

@@ -1,5 +1,12 @@
+export enum SolverCharacteristic {
+  Solve = "SOLVE",
+  Reformulation = "REFORMULATION",
+  Decomposition = "DECOMPOSITION",
+}
+
 export interface ProblemSolverInfo {
   id: string;
   name: string;
   description: string;
+  characteristics?: SolverCharacteristic[];
 }

src/components/solvers/Graph/ProblemNode.tsx

@@ -372,6 +372,7 @@ export function ProblemNode(props: NodeProps<ProblemNodeData>) {
               id: solverId,
               name: solverName,
               description: solverDescription,
+              characteristics: solver?.characteristics,
             }}
             button={problemButton()}
           />

src/components/solvers/Graph/SolverCharacteristicIcons.tsx

@@ -0,0 +1,77 @@
+import { Box, HStack, Tooltip } from "@chakra-ui/react";
+import { ComponentType } from "react";
+import { FaGears } from "react-icons/fa6";
+import { LuReplace } from "react-icons/lu";
+import { PiTreeStructure } from "react-icons/pi";
+import { TbTargetArrow } from "react-icons/tb";
+import { SolverCharacteristic } from "../../../api/toolbox/data-model/ProblemSolverInfo";
+
+export const characteristicPresentation: Record<
+  SolverCharacteristic,
+  {
+    label: string;
+    color: string;
+    icon: ComponentType<{ size?: string }>;
+    tooltip: string;
+  }
+> = {
+  [SolverCharacteristic.Solve]: {
+    label: "Solve",
+    color: "green.500",
+    icon: TbTargetArrow,
+    tooltip: "Solve: obtains a solution for the problem.",
+  },
+  [SolverCharacteristic.Reformulation]: {
+    label: "Reformulate",
+    color: "blue.500",
+    icon: LuReplace,
+    tooltip: "Reformulate: maps the problem onto another problem type.",
+  },
+  [SolverCharacteristic.Decomposition]: {
+    label: "Decompose",
+    color: "purple.500",
+    icon: PiTreeStructure,
+    tooltip: "Decompose: splits the problem into several subproblems.",
+  },
+};
+
+export interface SolverCharacteristicIconsProps {
+  characteristics?: SolverCharacteristic[];
+}
+
+export const SolverCharacteristicIcons = (
+  props: SolverCharacteristicIconsProps,
+) => {
+  const characteristics = props.characteristics ?? [];
+  if (characteristics.length === 0) {
+    // fallback to previous icon
+    return (
+      <Tooltip hasArrow label="Solver" placement="bottom">
+        <Box display="inline-flex" marginTop="0.35rem">
+          <FaGears size="1.5rem" />
+        </Box>
+      </Tooltip>
+    );
+  }
+
+  return (
+    <HStack spacing="0.2rem" marginTop="0.4rem">
+      {characteristics.map((characteristic) => {
+        const presentation = characteristicPresentation[characteristic];
+        const Icon = presentation.icon;
+        return (
+          <Tooltip
+            key={characteristic}
+            hasArrow
+            label={presentation.tooltip}
+            placement="bottom"
+          >
+            <Box as="span" color={presentation.color} display="inline-flex">
+              <Icon size="1.5rem" />
+            </Box>
+          </Tooltip>
+        );
+      })}
+    </HStack>
+  );
+};

src/components/solvers/Graph/SolverNodeContent.tsx

@@ -11,13 +11,12 @@ import {
   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/toolbox/data-model/ProblemSolverInfo";
+import { SolverCharacteristicIcons } from "./SolverCharacteristicIcons";
 
 export interface SolverNodeContentProps {
   solver: ProblemSolverInfo;
@@ -30,19 +29,17 @@ export interface SolverNodeContentProps {
 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">
+      <HStack align="start" maxW="10rem" justifyContent="space-between">
+        <SolverCharacteristicIcons
+          characteristics={props.solver.characteristics}
+        />
+        <Text paddingY=".25rem" fontWeight="semibold">
           {props.solver.name}
         </Text>
 
         <Popover>
           <PopoverTrigger>
-            <div>
+            <div style={{ marginTop: "0.5rem" }}>
               <FaQuestionCircle size="1rem" />
             </div>
           </PopoverTrigger>
@@ -64,6 +61,12 @@ export const SolverNodeContent = (props: SolverNodeContentProps) => {
         </Popover>
       </HStack>
 
+      {/*
+        <SolverCharacteristicBadges
+          characteristics={props.solver.characteristics}
+        />
+      */}
+
       <div
         style={{
           display: "flex",