/* Instructions: This single-file contains a React component (default export) for an interactive body-map GIS UI and, in comments below, a minimal Express.js API implementation that serves organ geometry + metadata. This is a starter you can run locally. How to run (quick): 1) Create a folder, initialize two packages or use a single Node project. Example: - npx create-react-app bodymap-frontend - cd bodymap-frontend - Replace src/App.js with the React component below (and add Tailwind if you want the exact styling). 2) Create a backend folder (or inside same repo) and add server.js with the Express server code in the comments below. - npm init -y; npm i express cors - node server.js 3) Start frontend (npm start) and ensure frontend requests /api/organs -> either proxy in package.json or run backend on a different port and set fetch URL accordingly. API contract (example): GET /api/organs -> returns JSON array of organs with: { id, name, description, anatomyGroup, svgPath, bbox, properties: {...} } CORS: enable cors() in Express or proxy via package.json. --- Below: React component (interactive SVG body map) + helper UI. */ import React, { useEffect, useState } from "react"; export default function BodyMapApp() { const [organs, setOrgans] = useState([]); const [selected, setSelected] = useState(null); const [query, setQuery] = useState(""); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { // Fetch organ metadata + SVG paths from backend API // Change /api/organs to full URL if backend runs on another port setLoading(true); fetch("/api/organs") .then((r) => { if (!r.ok) throw new Error(`HTTP ${r.status}`); return r.json(); }) .then((data) => { setOrgans(data); setLoading(false); }) .catch((err) => { setError(err.message); setLoading(false); }); }, []); const filtered = organs.filter((o) => o.name.toLowerCase().includes(query.toLowerCase()) || (o.anatomyGroup || "").toLowerCase().includes(query.toLowerCase()) ); function handleSelect(id) { const o = organs.find((x) => x.id === id); setSelected(o || null); } return (
BodyMap GIS — Organs Explorer
{/* Left: controls */}
{/* Middle: SVG Body Map */}
{/* Right: details panel */}
)}
{/* Raw JSON dump for selected */}
{selected && (
)}
setQuery(e.target.value)}
/>
{loading &&
Loading organs...
}
{error && Error: {error}
}
{!loading && !error && filtered.length === 0 && (
No organs found.
)}
{filtered.map((o) => (
))}
API:
/api/organs — returns organ list + SVG geometry.
Interactive Body Map
{/* Simple anatomical SVG (frontal). Each organ path comes from API in organs[].svgPath */}
Details
{!selected && (
Click an organ on the map or select from the list.
)}
{selected && (
{selected.name}
Group: {selected.anatomyGroup}
{selected.description}
Properties
-
{selected.properties &&
Object.entries(selected.properties).map(([k, v]) => (
- {k}: {String(v)} ))}
Raw JSON
{JSON.stringify(selected, null, 2)}