feat: add strategy nodes into the problem graph view

Author: Elscrux

src/components/solvers/Graph/MetaSolverStrategyProvider.tsx

@@ -0,0 +1,45 @@
+import { createContext, ReactNode, useContext, useState } from "react";
+import { MetaSolverStrategyDto } from "../../../api/strategy/data-model/MetaSolverStrategyDto";
+import { strategyApi } from "../../../api/strategy/StrategyAPI";
+
+interface StrategiesMap {
+  [key: string]: MetaSolverStrategyDto[];
+}
+
+// This is a React context that globally gives access to the solvers that are available for a given problem type
+// Using the useMetaSolverStrategies() 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 StrategyContext = createContext<{
+  strategies: StrategiesMap;
+  getStrategies: (problemTypeId: string) => Promise<MetaSolverStrategyDto[]>;
+}>({
+  strategies: {},
+  getStrategies: () => Promise.resolve([]),
+});
+
+export const useMetaSolverStrategies = () => useContext(StrategyContext);
+
+export const StrategyProvider = (props: { children: ReactNode }) => {
+  const [strategies, setStrategies] = useState<StrategiesMap>({});
+
+  // Function to get solvers, either from cache or by fetching
+  const getStrategies = async (problemTypeId: string) => {
+    const cachedSolvers = strategies[problemTypeId];
+    if (cachedSolvers) {
+      return cachedSolvers;
+    } else {
+      const strategies = await strategyApi.listStrategies(problemTypeId);
+      setStrategies((previous) => ({
+        ...previous,
+        [problemTypeId]: strategies,
+      }));
+      return strategies;
+    }
+  };
+
+  return (
+    <StrategyContext.Provider value={{ strategies, getStrategies }}>
+      {props.children}
+    </StrategyContext.Provider>
+  );
+};

src/components/solvers/Graph/ProblemGraphView.tsx

@@ -19,16 +19,20 @@ import {
   useNodesState,
 } from "reactflow";
 import "reactflow/dist/style.css";
+import { MetaSolverStrategyDto } from "../../../api/strategy/data-model/MetaSolverStrategyDto";
+import { strategyApi } from "../../../api/strategy/StrategyAPI";
 import { ProblemDto } from "../../../api/toolbox/data-model/ProblemDto";
 import { ProblemSolverInfo } from "../../../api/toolbox/data-model/ProblemSolverInfo";
 import { ProblemState } from "../../../api/toolbox/data-model/ProblemState";
 import { SubRoutineDefinitionDto } from "../../../api/toolbox/data-model/SubRoutineDefinitionDto";
 import { SubRoutineReferenceDto } from "../../../api/toolbox/data-model/SubRoutineReferenceDto";
 import { toolboxApi } from "../../../api/toolbox/ToolboxAPI";
 import { SolutionView } from "../SolutionView";
+import { useMetaSolverStrategies } from "./MetaSolverStrategyProvider";
 import { LevelInfo, ProblemNode, ProblemNodeData } from "./ProblemNode";
-import { SolverNode } from "./SolverNode";
+import { SolverNode, SolverNodeData } from "./SolverNode";
 import { useSolvers } from "./SolverProvider";
+import { StrategyNode, StrategyNodeData } from "./StrategyNode";
 
 interface ProblemEdgeData {
   sourceProblemDto: ProblemDto<any>;
@@ -76,7 +80,7 @@ function getChildNodes(
   typeId?: string
 ): Node[] {
   return nodes.filter((n) => {
-    if (n.type !== "problemNode") return false;
+    if (n.type !== "problemNode" && n.type !== "strategyNode") return false;
     if (!n.id.startsWith(parentNode.id)) return false;
 
     const subString = n.id.substring(parentNode.id.length + 1);
@@ -126,10 +130,13 @@ function groupBySolver(problemDtos: ProblemDto<any>[]) {
 
 const nodeTypes: NodeTypes = {
   solverNode: SolverNode,
+  strategyNode: StrategyNode,
   problemNode: ProblemNode,
 };
 const solverNodeIdentifier: string = "-solver-node-";
 const solverEdgeIdentifier: string = "-solver-edge-";
+const strategyNodeIdentifier: string = "-strategy-node-";
+const strategyEdgeIdentifier: string = "-strategy-edge-";
 
 export interface GraphUpdateProps {
   updateProblem: (problemId: string) => void;
@@ -151,6 +158,7 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
   const solutionViewRef = useRef<HTMLDivElement>(null);
 
   const { getSolvers } = useSolvers();
+  const { getStrategies } = useMetaSolverStrategies();
 
   /**
    * Node updates are scheduled in order to provide an asynchronous update mechanism.
@@ -226,15 +234,79 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
 
   const createSolverNodes = useCallback(
     (node: Node<ProblemNodeData>) => {
+      getStrategies(node.data.problemDtos[0].typeId).then((strategies) => {
+        console.log("strategies", strategies);
+        for (let i = 0; i < strategies.length; i++) {
+          let strategyNodeId =
+            node.id + strategyNodeIdentifier + strategies[i].id.toString();
+
+          const strategyNode: Node<StrategyNodeData> = {
+            id: strategyNodeId,
+            data: {
+              strategy: strategies[i],
+              selectCallback: (strategy: MetaSolverStrategyDto) => {
+                let edge = edges.find((e) =>
+                  e.target.startsWith(node.id + strategyEdgeIdentifier)
+                );
+                if (edge) {
+                  updateEdge(edge);
+                }
+
+                Promise.all(
+                  node.data.problemDtos.map((problemDto) =>
+                    strategyApi.executeStrategy(strategy.id, problemDto.id)
+                  )
+                ).then((results) => {
+                  setNodes((previousNodes) =>
+                    previousNodes.map((n) => {
+                      if (n.id !== node.id) return n;
+
+                      let updatedNode: Node<ProblemNodeData> = {
+                        ...n,
+                        data: {
+                          ...n.data,
+                          problemDtos: results
+                            .map((r) => r.result)
+                            .filter(
+                              (dto): dto is ProblemDto<any> => dto !== undefined
+                            ),
+                        },
+                      };
+                      scheduleNodeUpdate(updatedNode);
+
+                      return updatedNode;
+                    })
+                  );
+                });
+              },
+            },
+            position: {
+              x:
+                node.position.x +
+                getNodePositionX({ index: i, count: strategies.length }),
+              y: getNodePositionY(node.data.level + 1.5),
+            },
+            type: "strategyNode",
+          };
+
+          addNode(strategyNode);
+
+          addEdge({
+            id: node.id + solverEdgeIdentifier + strategyNodeId,
+            type: "step",
+            source: node.id,
+            target: strategyNodeId,
+          });
+        }
+      });
       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({
+          const solverNode: Node<SolverNodeData> = {
             id: solverId,
             data: {
-              problemIds: node.data.problemDtos.map((x) => x.id),
               problemSolver: solvers[i],
               selectCallback: (problemSolver: ProblemSolverInfo) => {
                 let edge = edges.find((e) =>
@@ -277,7 +349,9 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
               y: getNodePositionY(node.data.level + 1),
             },
             type: "solverNode",
-          });
+          };
+
+          addNode(solverNode);
 
           addEdge({
             id: node.id + solverEdgeIdentifier + solverId,
@@ -293,6 +367,7 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
       addNode,
       edges,
       getSolvers,
+      getStrategies,
       scheduleNodeUpdate,
       setNodes,
       updateEdge,
@@ -303,11 +378,17 @@ export const ProblemGraphView = (props: ProblemGraphViewProps) => {
     (node: Node<ProblemNodeData>) => {
       setNodes((previousNodes) =>
         previousNodes.filter(
-          (n) => !n.id.startsWith(node.id + solverNodeIdentifier)
+          (n) =>
+            !n.id.startsWith(node.id + solverNodeIdentifier) &&
+            !n.id.startsWith(node.id + strategyNodeIdentifier)
         )
       );
       setEdges((edges) =>
-        edges.filter((e) => !e.id.startsWith(node.id + solverEdgeIdentifier))
+        edges.filter(
+          (e) =>
+            !e.id.startsWith(node.id + solverEdgeIdentifier) &&
+            !e.id.startsWith(node.id + strategyEdgeIdentifier)
+        )
       );
     },
     [setEdges, setNodes]

src/components/solvers/Graph/StrategyNode.tsx

@@ -0,0 +1,58 @@
+import { Box, VStack } from "@chakra-ui/react";
+import { Handle, NodeProps, Position } from "reactflow";
+import { MetaSolverStrategyDto } from "../../../api/strategy/data-model/MetaSolverStrategyDto";
+import { StrategyNodeContent } from "./StrategyNodeContent";
+
+export interface StrategyNodeData {
+  strategy: MetaSolverStrategyDto;
+  selectCallback: (strategy: MetaSolverStrategyDto) => void;
+}
+
+export function StrategyNode(props: NodeProps<StrategyNodeData>) {
+  return (
+    <Box
+      cursor="default"
+      border="1px"
+      borderRadius="10px"
+      padding=".5rem"
+      background="cornflowerblue"
+      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" minWidth="120px">
+        <StrategyNodeContent
+          strategy={props.data.strategy}
+          button={{
+            label: "Solve via Strategy",
+            callback: () => {
+              props.data.selectCallback(props.data.strategy);
+            },
+          }}
+        />
+      </VStack>
+    </Box>
+  );
+}

src/components/solvers/Graph/StrategyNodeContent.tsx

@@ -0,0 +1,96 @@
+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 { PiGraph } from "react-icons/pi";
+import { MetaSolverStrategyDto } from "../../../api/strategy/data-model/MetaSolverStrategyDto";
+
+export interface StrategyNodeContentProps {
+  strategy: MetaSolverStrategyDto;
+  button: {
+    label: ReactNode;
+    callback?: () => void;
+  };
+}
+
+export const StrategyNodeContent = (props: StrategyNodeContentProps) => {
+  return (
+    <VStack gap="0px">
+      <HStack align="start" maxW="10rem" justifyContent="space-between" gap="0">
+        <Tooltip hasArrow label="Strategy" placement="bottom">
+          <div>
+            <PiGraph size="2rem" />
+          </div>
+        </Tooltip>
+        <Text padding=".25rem" fontWeight="semibold">
+          {props.strategy.name}
+        </Text>
+
+        <Popover>
+          <PopoverTrigger>
+            <div>
+              <FaQuestionCircle size="1rem" />
+            </div>
+          </PopoverTrigger>
+          <Portal>
+            <PopoverContent>
+              <PopoverArrow />
+              <PopoverCloseButton />
+              <PopoverHeader>
+                <Text fontWeight="semibold">{props.strategy.name}</Text>
+              </PopoverHeader>
+              <PopoverBody>
+                <Text>{props.strategy.code}</Text>
+              </PopoverBody>
+              <PopoverFooter>
+                <Text fontSize="xs">{props.strategy.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>
+  );
+};