e

backend/main.py

@@ -18,7 +18,7 @@ import gcsfs
 @asynccontextmanager
 async def lifespan(app: FastAPI):
     bucket = "mda_eu_project"
-    path   = "data/consolidated_clean.parquet"
+    path   = "data/consolidated_clean_pred.parquet" #"data/consolidated_clean.parquet"
     uri    = f"gs://{bucket}/{path}"
 
     fs = gcsfs.GCSFileSystem()
@@ -51,28 +51,59 @@ app.add_middleware(
 )
 
 @app.get("/api/projects")
-def get_projects(page: int = 0, limit: int = 10, search: str = "", status: str = ""):
-    df = app.state.df
+def get_projects(
+    page: int = 0,
+    limit: int = 10,
+    search: str = "",
+    status: str = ""
+):
+    df: pl.DataFrame = app.state.df
     start = page * limit
     sel = df
 
-    if search != "":
-        sel = sel.filter(pl.col("_title_lc").str.contains(search.lower()))
-
-    if status != "":
-        sel = sel.filter(pl.col("_status_lc") == status.lower())
-
-    return (
+    # case-insensitive title search
+    if search:
+        sel = sel.filter(
+            pl.col("_title_lc").str.contains(search.lower())
+        )
+
+    # filter by status
+    if status:
+        sel = sel.filter(
+            pl.col("_status_lc") == status.lower()
+        )
+
+    # slice for pagination and select all needed fields, including top-N features/shap and prediction
+    cols = [
+        "id", "title", "status", "startDate", "endDate",
+        "ecMaxContribution", "acronym", "legalBasis", "objective",
+        "frameworkProgramme", "list_euroSciVocTitle", "list_euroSciVocPath",
+    ]
+    for i in range(1, 7):
+        cols += [f"top{i}_features", f"top{i}_shap"]
+
+    cols += ["predicted_label", "predicted_prob"]
+
+    rows = (
         sel.slice(start, limit)
-           .select([
-               "id","title","status","startDate","ecMaxContribution",
-               "acronym","endDate","legalBasis","objective",
-               "frameworkProgramme","list_euroSciVocTitle",
-               "list_euroSciVocPath"
-           ])
+           .select(cols)
            .to_dicts()
     )
 
+    # build explanations array for each row
+    projects = []
+    for row in rows:
+        explanations = []
+        for i in range(1, 7):
+            feat = row.pop(f"top{i}_features", None)
+            shap = row.pop(f"top{i}_shap", None)
+            if feat is not None and shap is not None:
+                explanations.append({"feature": feat, "shap": shap})
+        row["explanations"] = explanations
+        projects.append(row)
+
+    return projects
+
 @app.get("/api/filters")
 def get_filters():
     return {

frontend/package.json

@@ -23,7 +23,8 @@
     "react-chartjs-2": "^5.3.0",
     "react-dom": "^18.3.1",
     "react-leaflet": "^4.2.1",
-    "react-select": "^5.10.1"
+    "react-select": "^5.10.1",
+    "rechart": "^0.0.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
@@ -32,6 +33,7 @@
     "@types/node": "^22.15.17",
     "@types/react": "^18.3.21",
     "@types/react-dom": "^18.3.5",
+    "@types/recharts": "^2.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "eslint": "^9.17.0",
     "eslint-plugin-react-hooks": "^5.0.0",

frontend/src/components/ProjectDetails.tsx

@@ -16,6 +16,16 @@ import {
   Button,
   Avatar,
 } from "@chakra-ui/react";
+import {
+  ResponsiveContainer,
+  BarChart,
+  Bar,
+  Cell,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip
+} from "recharts";
 import {
   MapContainer,
   TileLayer,
@@ -49,16 +59,11 @@ function ResizeMap({ count }: { count: number }) {
 }
 
 export default function ProjectDetails({
-  project,
-  question,
-  setQuestion,
-  askChatbot,
-  chatHistory = [],
-  messagesEndRef,
-}: ProjectDetailsProps) {
+  project,}: ProjectDetailsProps) {
   // fetch organization locations
   const [orgLocations, setOrgLocations] = useState<OrganizationLocation[]>([]);
   const [loadingOrgs, setLoadingOrgs] = useState(true);
+  const [loadingPlot, setLoadingPlot] = useState(true);
 
   useEffect(() => {
     if (!project) return;
@@ -77,7 +82,9 @@ export default function ProjectDetails({
       </Box>
     );
   }
-
+  const shapData = project.explanations;
+  const predicted = project.predicted_label;
+  const probability = project.predicted_prob;
   // Map center fallback
   const center: [number, number] = orgLocations.length
     ? [orgLocations[0].latitude, orgLocations[0].longitude]
@@ -178,62 +185,34 @@ export default function ProjectDetails({
         )}
       </Box>
 
-      {/* Right: Chatbot */}
-      <Box
-        flex={{ base: '1', md: '0.6' }}
-        bg="gray.50"
-        p={4}
-        borderRadius="md"
-        display="flex"
-        flexDirection="column"
-        maxH="600px"
-      >
-        <Heading size="sm" mb={2}>Ask about this project</Heading>
-
-        <Box flex={1} overflowY="auto" mb={4}>
-          <VStack spacing={3} align="stretch">
-            {(chatHistory ?? []).map((msg, i) => (
-              <HStack
-                key={i}
-                alignSelf={msg.role === "user" ? "flex-end" : "flex-start"}
-                maxW="90%"
-              >
-                {msg.role === "assistant" && <Avatar size="sm" name="Bot" />}
-                <Box>
-                  <Text
-                    fontSize="sm"
-                    bg={msg.role === "user" ? "blue.100" : "gray.200"}
-                    px={3}
-                    py={2}
-                    borderRadius="md"
-                  >
-                    {msg.content}
-                  </Text>
-                </Box>
-                {msg.role === "user" && <Avatar size="sm" name="You" bg="blue.300" />}
-              </HStack>
-            ))}
-            <div ref={messagesEndRef} />
-          </VStack>
-        </Box>
-
-        <HStack>
-          <Input
-            placeholder="Type your question..."
-            value={question}
-            onChange={(e) => setQuestion(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && !e.shiftKey) {
-                e.preventDefault();
-                askChatbot();
-              }
-            }}
-          />
-          <Button onClick={askChatbot} aria-label="Send question">
-            Send
-          </Button>
-        </HStack>
+      {/* Right: Model Explanation */}
+      <Box flex={{ base: '1', md: '0.6' }} bg="white" p={4} borderRadius="md" boxShadow="sm">
+        <Heading size="sm" mb={4}>Model Prediction & Explanation</Heading>
+        {shapData?.length ? (
+          <>
+            <Text mb={2}><strong>Predicted Label:</strong> {predicted}</Text>
+            <Text mb={4}><strong>Probability:</strong> {(probability * 100).toFixed(2)}%</Text>
+            <ResponsiveContainer width="100%" height={300}>
+              <BarChart data={shapData} margin={{ top: 10, right: 30, left: 0, bottom: 5 }}>
+                <CartesianGrid strokeDasharray="3 3" />
+                <XAxis dataKey="feature" />
+                <YAxis />
+                <Tooltip />
+                <Bar dataKey="shap" name="SHAP Value">
+                  {shapData.map((entry, index) => (
+                    <Cell
+                      key={`cell-${index}`}
+                      fill={entry.shap >= 0 ? "#4caf50" : "#f44336"}
+                    />
+                  ))}
+                </Bar>
+              </BarChart>
+            </ResponsiveContainer>
+          </>
+        ) : (
+          <Spinner />
+        )}
       </Box>
     </Flex>
   );
-}
+}

frontend/src/hooks/types.ts

@@ -12,15 +12,18 @@ export interface Project {
   frameworkProgramme: string;
   list_euroSciVocTitle: string[];
   list_euroSciVocPath: string[];
+  explanations: Array<{ feature: string; shap: number }>;
+  predicted_label: number;
+  predicted_prob: number;
 }
 
 export interface ProjectDetailsProps {
   project: Project;
-  question: string;
-  setQuestion: React.Dispatch<React.SetStateAction<string>>;
-  askChatbot: () => void;
-  chatHistory: ChatMessage[];
-  messagesEndRef: React.RefObject<HTMLDivElement>;
+//  question: string;
+//  setQuestion: React.Dispatch<React.SetStateAction<string>>;
+//  askChatbot: () => void;
+//  chatHistory: ChatMessage[];
+//  messagesEndRef: React.RefObject<HTMLDivElement>;
 }