Re-enable rules/eval-graph toggle

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.4.1",
+    "@foerderfunke/matching-engine": "^1.4.3",
     "@mui/icons-material": "^5.15.19",
     "@mui/material": "^5.15.19",
     "@mui/x-charts": "^7.6.2",

src/ui/language/translations.js

@@ -295,6 +295,8 @@ const translations = {
                     description: "In this section you will find an overview of the key requirements that must be met for a potential entitlement.\n\nBelow, you can expand the decision tree to explore each step in more detail. If you have already completed our questionnaire, the decision tree will also show which conditions are fulfilled in your case and which may not be.",
                     btn: "Show requirements",
                     btnClose: "Close requirements",
+                    toggleRule: "Rule",
+                    toggleEval: "Evaluation",
                     eligible: "You are likely eligible",
                     notEligible: "You are likely not eligible",
                 },
@@ -675,7 +677,9 @@ const translations = {
                     title: "Wer ist anspruchsberechtigt?",
                     description: "In diesem Bereich sehen Sie eine Übersicht der wichtigsten Voraussetzungen, die erfüllt sein müssen, damit ein möglicher Anspruch besteht.\n\nUnterhalb können Sie den Entscheidungsbaum ausklappen und die einzelnen Schritte genauer nachvollziehen. Wenn Sie bereits unsere Fragestrecke durchlaufen haben, wird im Entscheidungsbaum zusätzlich dargestellt, welche Bedingungen in Ihrem Fall erfüllt sind und welche möglicherweise nicht.",
                     btn: "Anspruchsvoraussetzungen anzeigen",
-                    btnClose: "Anspruchsvoraussetzungen schließen"
+                    btnClose: "Anspruchsvoraussetzungen schließen",
+                    toggleRule: "Regeln",
+                    toggleEval: "Evaluation",
                 },
                 local: {
                     title: "Wo finde ich Unterstützung vor Ort?",

src/ui/shared-components/flow-chart/FlowChart.js

@@ -1,10 +1,12 @@
 import React, { useEffect, useState, useRef } from 'react';
 import theme from '@/theme';
-import { VBox } from '@/ui/shared-components/LayoutBoxes';
+import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
+import AntSwitch from "@/ui/shared-components/AntSwitch";
 import { Typography } from "@mui/material";
 import mermaid from "mermaid";
 import { graphToMermaid } from "@foerderfunke/matching-engine/src/rule-graph/EvalGraph";
 import matchingEngineManager from "@/core/managers/matchingEngineManager";
+import useTranslation from "@/ui/language/useTranslation";
 
 function enablePanZoom(svg) {
     if (!svg) return () => { };
@@ -69,9 +71,10 @@ mermaid.initialize({
 
 
 export default function FlowChart({ evalGraph }) {
+    const { t } = useTranslation();
 
     const [svgContent, setSvgContent] = useState("");
-    const graphTypeEval = true;
+    const [graphTypeEval, setGraphTypeEval] = useState(false);
     const printLabels = true;
     const orientationVertical = false;
 
@@ -123,7 +126,7 @@ export default function FlowChart({ evalGraph }) {
         if (!evalGraph) return;
         const me = matchingEngineManager.matchingEngineInstance;
         const mermaidDef = graphToMermaid(
-            graphTypeEval ? evalGraph.ruleGraph : evalGraph,
+            graphTypeEval ? evalGraph : evalGraph.ruleGraph,
             me, printLabels, orientationVertical
         );
 
@@ -161,6 +164,11 @@ export default function FlowChart({ evalGraph }) {
 
     return (
         <div style={{ position: "relative" }}>
+            <HBox gap={1} alignItems="center" style={{ paddingBottom: "10px" }}>
+                <span>{t("app.benefitPage.requirements.toggleRule")}</span>
+                <AntSwitch checked={graphTypeEval} onChange={(e) => setGraphTypeEval(e.target.checked)} color="white"/>
+                <span>{t("app.benefitPage.requirements.toggleEval")}</span>
+            </HBox>
             <VBox
                 sx={{
                     backgroundColor: 'greyTransparent.main',