Activate toggles for eval graph

Author: benjaminaaron

package.json

@@ -8,7 +8,7 @@
     "@babel/plugin-transform-private-property-in-object": "^7.24.7",
     "@emotion/react": "^11.11.4",
     "@emotion/styled": "^11.11.5",
-    "@foerderfunke/matching-engine": "^1.2.6",
+    "@foerderfunke/matching-engine": "^1.2.7",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.15.19",
     "@mui/x-charts": "^7.6.2",

src/ui/screens/benefit-page/components/MermaidRulesGraph.js

@@ -5,13 +5,26 @@ import { Typography } from "@mui/material";
 import mermaid from "mermaid";
 import AntSwitch from "@/ui/shared-components/AntSwitch";
 import RegularButton from "@/ui/shared-components/buttons/RegularButton";
+import { graphToMermaid } from "@foerderfunke/matching-engine/src/rule-graph/EvalGraph";
+import matchingEngineManager from "@/core/managers/matchingEngineManager";
 
 export default function MermaidRulesGraph({ evalGraph, t }) {
+    // make SVG zoomable TODO
     const [svgContent, setSvgContent] = useState("");
+    const [graphTypeEval, setGraphTypeEval] = useState(false);
+    const [printLabels, setPrintLabels] = useState(false);
+    const [orientationVertical, setOrientationVertical] = useState(true);
 
     useEffect(() => {
         if (!evalGraph) return;
-        const mermaidDef = evalGraph.toMermaid();
+        renderMermaid();
+    }, [evalGraph, graphTypeEval, printLabels, orientationVertical]);
+
+    const renderMermaid = () => {
+        const me = matchingEngineManager.matchingEngineInstance;
+        const mermaidDef = graphToMermaid(
+            graphTypeEval ? evalGraph.ruleGraph : evalGraph,
+            me, printLabels, orientationVertical);
         mermaid.initialize();
         try {
             mermaid.parse(mermaidDef);
@@ -21,7 +34,7 @@ export default function MermaidRulesGraph({ evalGraph, t }) {
         mermaid.render(`rulesGraph${Date.now()}`, mermaidDef)
             .then(({ svg }) => setSvgContent(svg))
             .catch((error) => console.error("Mermaid render error:", error));
-    }, [evalGraph]);
+    };
 
     return (
         <VBox
@@ -39,26 +52,26 @@ export default function MermaidRulesGraph({ evalGraph, t }) {
                 <HBox gap={4} alignItems="center">
                     <HBox gap={1} alignItems="center">
                         <strong>Type:</strong>
-                        <span>Rule</span>
-                        <AntSwitch checked={true} onChange={() => {}} color="white"/>
                         <span>Evaluation</span>
+                        <AntSwitch checked={graphTypeEval} onChange={(e) => setGraphTypeEval(e.target.checked)} color="white"/>
+                        <span>Rule</span>
                     </HBox>
                     <HBox gap={1} alignItems="center">
                         <strong>Orientation:</strong>
                         <span>Horizontal</span>
-                        <AntSwitch checked={true} onChange={() => {}} color="white"/>
+                        <AntSwitch checked={orientationVertical} onChange={(e) => setOrientationVertical(e.target.checked)} color="white"/>
                         <span>Vertical</span>
                     </HBox>
                     <HBox gap={1} alignItems="center">
                         <strong>Datafields:</strong>
                         <span>URIs</span>
-                        <AntSwitch checked={true} onChange={() => {}} color="white"/>
+                        <AntSwitch checked={printLabels} onChange={(e) => setPrintLabels(e.target.checked)} color="white"/>
                         <span>Labels</span>
                     </HBox>
                     <RegularButton
                         variant={'blackOutlined'}
                         text={"Export"}
-                        onClick={() => {}}
+                        onClick={() => alert("TODO")}
                         size='small'
                     />
                 </HBox>