start building react flow representation of requirements

Author: wbglaeser

package.json

@@ -26,6 +26,7 @@
     "react-markdown": "^9.0.1",
     "react-router-dom": "^6.23.1",
     "react-scripts": "5.0.1",
+    "reactflow": "^11.11.4",
     "swiper": "^11.2.4",
     "web-vitals": "^2.1.4",
     "zustand": "^4.5.2"

src/core/managers/matchingEngineManager.js

@@ -92,6 +92,21 @@ const matchingEngineManager = {
             FORMAT.JSON_LD,
             true
         );
+    },
+
+    async fetchDetailedMatchingReport(userId, requirementProfile, language = "en") {
+        if (!this.matchingEngineInstance) {
+            await this.initMatchingEngine(language);
+        }
+        
+        const userProfile = userManager.retrieveUserData(userId);
+        const userProfileTurtle = await convertUserProfileToTurtle(userProfile);
+        const expandedRp = expand(requirementProfile);
+
+        return this.matchingEngineInstance.detailedSingleRequirementProfileValidation(
+            userProfileTurtle,
+            expandedRp
+        );
     }
 };
 

src/ui/screens/benefit-page/BenefitPageScreen.js

@@ -10,13 +10,16 @@ import BenefitPageExampleList from './components/BenefitPageExampleList';
 import BenefitPageRules from "./components/BenefitPageRules";
 import BenefitPageHeader from "./components/BenefitPageHeader";
 import AppScreenWrapperContainer from '@/ui/shared-components/app-screen-wrapper/AppScreenWrapperContainer';
+import ReactFlow, { Background, Controls } from 'reactflow';
+import 'reactflow/dist/style.css';
 
 const BenefitPageScreen = ({
     t,
     id,
     benefitPageData,
     validatedStatus,
-    categoryTitles
+    categoryTitles,
+    flowGraph
 }) => {
 
     return (
@@ -29,6 +32,13 @@ const BenefitPageScreen = ({
                         flexDirection: "column",
                         width: '100%'
                     }}>
+                        <div style={{ width: '100%', height: '100vh', background: '#fff' }}>
+                            <ReactFlow nodes={flowGraph?.nodes} edges={flowGraph?.edges} fitView>
+                                <Background color="#eee" gap={16} />
+                                <Controls />
+                            </ReactFlow>
+                        </div>
+
                         <VBox
                             sx={{
                                 backgroundColor: 'white.main',

src/ui/screens/benefit-page/BenefitPageScreenContainer.js

@@ -1,28 +1,55 @@
-import React from 'react';
+import React, { useState, useEffect, useMemo } from 'react';
 import { useParams } from "react-router-dom";
 import useTranslation from "@/ui/language/useTranslation";
 import useFetchStaticBenefitPageData from './hooks/useFetchStaticBenefitPageData';
 import useValidatedStatus from "./hooks/useValidatedStatus";
 import useBuildCategoryTitles from "./hooks/useBuildCategoryTitles";
 import BenefitPageScreen from './BenefitPageScreen';
 import { useLanguageStore } from '@/ui/storage/useLanguageStore';
+import matchingEngineManager from "@/core/managers/matchingEngineManager";
+import { useUserStore } from '@/ui/storage/zustand';
+import buildFlow from './hooks/buildFlow';
 
 const BenefitPageScreenContainer = () => {
     const { id } = useParams();
     const { t } = useTranslation();
+    const [matchingGraph, setMatchingGraph] = useState(null);
     const language = useLanguageStore((state) => state.language);
 
     const benefitPageData = useFetchStaticBenefitPageData(id, language);
     const categoryTitles = useBuildCategoryTitles(id, language);
     const validatedStatus = useValidatedStatus(id);
-    
+    const activeUserId = useUserStore((state) => state.activeUserId);
+
+    useEffect(() => {
+        const fetchMatchingReport = async () => {
+            if (id && activeUserId) {
+                try {
+                    const matchingGraph = await matchingEngineManager.fetchDetailedMatchingReport(activeUserId, id, language);
+                    setMatchingGraph(matchingGraph);
+                } catch (error) {
+                    console.error("Error fetching matching report:", error);
+                }
+            }
+        }
+        fetchMatchingReport();
+    }, [id, activeUserId, language]);
+
+    const flowGraph = useMemo(() => {
+        if (matchingGraph) {
+            console.log("Building flow graph for matchingGraph:", matchingGraph);
+            return buildFlow(matchingGraph.root);
+        }
+    }, [matchingGraph]);
+
     return (
         <BenefitPageScreen
             t={t}
             id={id}
             benefitPageData={benefitPageData}
             validatedStatus={validatedStatus}
             categoryTitles={categoryTitles}
+            flowGraph={flowGraph}
         />
     );
 };

src/ui/screens/benefit-page/hooks/buildFlow.js

@@ -0,0 +1,98 @@
+// src/utils/buildFlow.js
+
+// ——— Label mapping for the non-rule nodes ———
+const typeLabelMap = {
+  NodeROOT: 'Requirements',
+  NodeAND:  'All need to be fulfilled',
+  NodeOR:   'At least one needs to be met',
+};
+
+export default function buildFlow(graphRoot) {
+  let nextId = 0;
+
+  // Temp storage of every node with depth & parent
+  const raw = [];
+  const edges = [];
+
+  // 1) Traverse & collect, skipping MinCount RULEs
+  function traverse(node, depth = 0, parentId = null) {
+    const typeName = node.constructor?.name;
+
+    // ─── FILTER OUT MinCountConstraintComponent RULEs ───
+    if (
+      typeName === 'NodeRULE' &&
+      node.type === 'sh:MinCountConstraintComponent'
+    ) {
+      return;
+    }
+
+    const myId = `node_${nextId++}`;
+    raw.push({ id: myId, node, depth, parentId });
+
+    if (parentId) {
+      edges.push({
+        id: `e_${parentId}-${myId}`,
+        source: parentId,
+        target: myId,
+        style: { stroke: '#888' },
+      });
+    }
+
+    (node.children || []).forEach(child =>
+      traverse(child, depth + 1, myId)
+    );
+  }
+  traverse(graphRoot);
+
+  // 2) Group by depth
+  const levels = raw.reduce((acc, item) => {
+    (acc[item.depth] = acc[item.depth] || []).push(item);
+    return acc;
+  }, {});
+
+  const horizontalSpacing = 200;
+  const verticalSpacing   = 100;
+
+  // 3) Assign positions symmetrically
+  const nodes = raw.map(item => {
+    const { id, node, depth } = item;
+    const group = levels[depth];
+    const idx   = group.findIndex(g => g.id === id);
+    const count = group.length;
+
+    // center siblings around x=0
+    const x = (idx - (count - 1) / 2) * horizontalSpacing;
+    const y = depth * verticalSpacing;
+
+    // determine label
+    let label;
+    if (node.constructor?.name === 'NodeRULE') {
+      const compType = node.type || '<constraint>';
+      const val = Array.isArray(node.value) ? node.value.join(', ') : node.value;
+      label = `${compType}: ${val}`;
+    } else {
+      label = typeLabelMap[node.constructor?.name]
+           ?? node.path
+           ?? node.constructor?.name
+           ?? 'node';
+    }
+
+    // detect missing
+    const isMissing = node.status === 'missing' || node.shaclEval?.status === 'missing';
+
+    return {
+      id,
+      data: { label },
+      position: { x, y },
+      style: {
+        padding: 10,
+        borderRadius: 6,
+        background: isMissing ? '#fde2e2' : '#e2f7de',
+        border: `2px solid ${isMissing ? '#f5c2c7' : '#a8e6a3'}`,
+        width: Math.max(150, label.length * 8),
+      }
+    };
+  });
+
+  return { nodes, edges };
+}

src/ui/screens/eligibilty-overview/hooks/useProduceValidationReport.js

@@ -34,7 +34,7 @@ const useProduceValidationReport = () => {
         const fetchingValidationReport = async () => {
             setApplicationIsLoading({
                 applicationIsLoading: true,
-                loadingMessage: "Producing validation report..."
+                loadingMessage: "app.loading.producingValidationReport"
             });
             try {
                 const report = await matchingEngineManager.fetchValidationReport(

src/ui/shared-hooks/useInitialiseApplication.js

@@ -30,7 +30,7 @@ export const useInitialiseApplication = () => {
             isInitializingRef.current = true;
             setApplicationIsLoading({
                 applicationIsLoading: true,
-                loadingMessage: "Initializing application"
+                loadingMessage: "app.loading.initialising"
             });
 
             try {