Merge branch 'main' of github.com:Citizen-Knowledge-Graph/foerderfunke-react-app

Author: wbglaeser

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

@@ -1,8 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import theme from '@/theme';
-import { VBox } from '@/ui/shared-components/LayoutBoxes';
+import { HBox, VBox } from '@/ui/shared-components/LayoutBoxes';
 import { Typography } from "@mui/material";
 import mermaid from "mermaid";
+import AntSwitch from "@/ui/shared-components/AntSwitch";
+import RegularButton from "@/ui/shared-components/buttons/RegularButton";
 
 export default function MermaidRulesGraph({ evalGraph, t }) {
     const [svgContent, setSvgContent] = useState("");
@@ -34,6 +36,32 @@ export default function MermaidRulesGraph({ evalGraph, t }) {
                 <Typography variant="h2" sx={{ fontWeight: '400', wordBreak: "break-word" }}>
                     Rules Graph
                 </Typography>
+                <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>
+                    </HBox>
+                    <HBox gap={1} alignItems="center">
+                        <strong>Orientation:</strong>
+                        <span>Horizontal</span>
+                        <AntSwitch checked={true} onChange={() => {}} color="white"/>
+                        <span>Vertical</span>
+                    </HBox>
+                    <HBox gap={1} alignItems="center">
+                        <strong>Datafields:</strong>
+                        <span>URIs</span>
+                        <AntSwitch checked={true} onChange={() => {}} color="white"/>
+                        <span>Labels</span>
+                    </HBox>
+                    <RegularButton
+                        variant={'blackOutlined'}
+                        text={"Export"}
+                        onClick={() => {}}
+                        size='small'
+                    />
+                </HBox>
                 <Typography variant="body1" component="div">
                     <div dangerouslySetInnerHTML={{ __html: svgContent }} />
                 </Typography>