Skip to content

Commit 4d4b24e

Browse files
rafiattrachrafiattrach
authored
Merge pull request #35 from rafiattrach/feature/diagram
Feature/diagram
2 parents 07e2198 + dfb3d28 commit 4d4b24e

File tree

7 files changed

+22
-279
lines changed

7 files changed

+22
-279
lines changed

‎webapp/public/favicon.ico‎

11.3 KB
Binary file not shown.

‎webapp/public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
work correctly both with client-side routing and a non-root public URL.
2525
Learn how to configure a non-root public URL by running `npm run build`.
2626
-->
27-
<title>React App</title>
27+
<title>M3 - MCP for EHRs</title>
2828
</head>
2929
<body>
3030
<noscript>You need to enable JavaScript to run this app.</noscript>

‎webapp/public/m3_architecture.png‎

151 KB
Loading

‎webapp/public/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "M3",
3+
"name": "M3-MCP for EHRs",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎webapp/public/pypi_logo.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎webapp/src/components/ArchitectureDiagram.js‎

Lines changed: 10 additions & 275 deletions
Original file line numberDiff line numberDiff line change
@@ -10,282 +10,17 @@ const ArchitectureDiagram = () => {
1010
</div>
1111

1212
<div className="architecture-diagram fade-in">
13-
<svg
14-
width="100%"
15-
height="500"
16-
viewBox="0 0 1000 500"
17-
className="architecture-svg"
18-
style={{ background: 'linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%)', borderRadius: '15px' }}
19-
>
20-
<defs>
21-
{/* Gradients */}
22-
<linearGradient id="claudeGradient" x1="0%" y1="0%" x2="100%" y2="100%">
23-
<stop offset="0%" stopColor="#ff6b6b" />
24-
<stop offset="100%" stopColor="#ee5a24" />
25-
</linearGradient>
26-
27-
<linearGradient id="mcpGradient" x1="0%" y1="0%" x2="100%" y2="100%">
28-
<stop offset="0%" stopColor="#4ecdc4" />
29-
<stop offset="100%" stopColor="#44bd87" />
30-
</linearGradient>
31-
32-
<linearGradient id="dataGradient" x1="0%" y1="0%" x2="100%" y2="100%">
33-
<stop offset="0%" stopColor="#a8e6cf" />
34-
<stop offset="100%" stopColor="#7fcdcd" />
35-
</linearGradient>
36-
37-
{/* Arrow marker */}
38-
<marker id="arrowhead" markerWidth="10" markerHeight="7"
39-
refX="10" refY="3.5" orient="auto">
40-
<polygon points="0 0, 10 3.5, 0 7" fill="#333" />
41-
</marker>
42-
43-
{/* Drop shadow filter */}
44-
<filter id="dropshadow" x="-20%" y="-20%" width="140%" height="140%">
45-
<feDropShadow dx="0" dy="4" stdDeviation="3" floodColor="#000" floodOpacity="0.1"/>
46-
</filter>
47-
</defs>
48-
49-
{/* Flow indicators at top */}
50-
<g className="flow-indicators">
51-
<circle cx="120" cy="40" r="20" fill="#ff6b6b" opacity="0.2" />
52-
<text x="120" y="46" textAnchor="middle" fontSize="12" fontWeight="bold" fill="#333">1</text>
53-
<text x="120" y="25" textAnchor="middle" fontSize="11" fill="#333">User Query</text>
54-
55-
<circle cx="350" cy="40" r="20" fill="#4ecdc4" opacity="0.2" />
56-
<text x="350" y="46" textAnchor="middle" fontSize="12" fontWeight="bold" fill="#333">2</text>
57-
<text x="350" y="25" textAnchor="middle" fontSize="11" fill="#333">MCP Tools</text>
58-
59-
<circle cx="580" cy="40" r="20" fill="#a8e6cf" opacity="0.2" />
60-
<text x="580" y="46" textAnchor="middle" fontSize="12" fontWeight="bold" fill="#333">3</text>
61-
<text x="580" y="25" textAnchor="middle" fontSize="11" fill="#333">Data Access</text>
62-
63-
<circle cx="820" cy="40" r="20" fill="#6c5ce7" opacity="0.2" />
64-
<text x="820" y="46" textAnchor="middle" fontSize="12" fontWeight="bold" fill="#333">0</text>
65-
<text x="820" y="25" textAnchor="middle" fontSize="11" fill="#333">Setup</text>
66-
</g>
67-
68-
{/* Claude Desktop */}
69-
<g className="claude-desktop">
70-
<rect x="50" y="100" width="140" height="100" rx="12"
71-
fill="url(#claudeGradient)" filter="url(#dropshadow)" />
72-
<text x="120" y="130" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">
73-
Claude Desktop
74-
</text>
75-
<text x="120" y="150" textAnchor="middle" fill="white" fontSize="11">
76-
MCP Client
77-
</text>
78-
<text x="120" y="170" textAnchor="middle" fill="white" fontSize="11">
79-
AI Assistant
80-
</text>
81-
<text x="120" y="185" textAnchor="middle" fill="white" fontSize="11">
82-
Interface
83-
</text>
84-
</g>
85-
86-
{/* MCP Server */}
87-
<g className="mcp-server">
88-
<rect x="270" y="120" width="160" height="80" rx="12"
89-
fill="url(#mcpGradient)" filter="url(#dropshadow)" />
90-
<text x="350" y="145" textAnchor="middle" fill="white" fontSize="14" fontWeight="bold">
91-
m3 MCP Server
92-
</text>
93-
<text x="350" y="165" textAnchor="middle" fill="white" fontSize="11">
94-
Model Context Protocol
95-
</text>
96-
<text x="350" y="180" textAnchor="middle" fill="white" fontSize="11">
97-
Tools & Authentication
98-
</text>
99-
</g>
100-
101-
{/* Data Sources */}
102-
<g className="data-sources">
103-
{/* Local SQLite */}
104-
<rect x="500" y="100" width="130" height="70" rx="10"
105-
fill="url(#dataGradient)" filter="url(#dropshadow)" />
106-
<text x="565" y="125" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold">
107-
Local SQLite
108-
</text>
109-
<text x="565" y="145" textAnchor="middle" fill="white" fontSize="10">
110-
MIMIC-IV Demo
111-
</text>
112-
<text x="565" y="158" textAnchor="middle" fill="white" fontSize="10">
113-
Database
114-
</text>
115-
116-
{/* BigQuery */}
117-
<rect x="500" y="180" width="130" height="70" rx="10"
118-
fill="url(#dataGradient)" filter="url(#dropshadow)" />
119-
<text x="565" y="205" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold">
120-
Google BigQuery
121-
</text>
122-
<text x="565" y="225" textAnchor="middle" fill="white" fontSize="10">
123-
Full MIMIC-IV
124-
</text>
125-
<text x="565" y="238" textAnchor="middle" fill="white" fontSize="10">
126-
Cloud Database
127-
</text>
128-
</g>
129-
130-
{/* m3 init command */}
131-
<g className="m3-init">
132-
<rect x="750" y="320" width="140" height="60" rx="10"
133-
fill="#6c5ce7" filter="url(#dropshadow)" />
134-
<text x="820" y="340" textAnchor="middle" fill="white" fontSize="12" fontWeight="bold">
135-
m3 init
136-
</text>
137-
<text x="820" y="355" textAnchor="middle" fill="white" fontSize="10">
138-
Download & Setup
139-
</text>
140-
<text x="820" y="370" textAnchor="middle" fill="white" fontSize="10">
141-
MIMIC Files
142-
</text>
143-
</g>
144-
145-
{/* Connection arrows */}
146-
<g className="connections">
147-
{/* Claude to MCP */}
148-
<path d="M 190 150 L 270 150"
149-
stroke="#333" strokeWidth="2" fill="none"
150-
markerEnd="url(#arrowhead)" />
151-
<text x="230" y="135" textAnchor="middle" fontSize="10" fill="#333" fontWeight="bold">
152-
MCP Protocol
153-
</text>
154-
155-
{/* MCP to SQLite */}
156-
<path d="M 430 140 L 500 135"
157-
stroke="#333" strokeWidth="2" fill="none"
158-
markerEnd="url(#arrowhead)" />
159-
<text x="465" y="125" textAnchor="middle" fontSize="10" fill="#333" fontWeight="bold">
160-
SQL
161-
</text>
162-
163-
{/* MCP to BigQuery */}
164-
<path d="M 430 170 L 500 215"
165-
stroke="#333" strokeWidth="2" fill="none"
166-
markerEnd="url(#arrowhead)" />
167-
<text x="465" y="205" textAnchor="middle" fontSize="10" fill="#333" fontWeight="bold">
168-
BigQuery API
169-
</text>
170-
171-
{/* m3 init to SQLite */}
172-
<path d="M 750 340 Q 700 280 630 135"
173-
stroke="#6c5ce7" strokeWidth="2" fill="none"
174-
markerEnd="url(#arrowhead)" strokeDasharray="5,5" />
175-
<text x="680" y="255" textAnchor="middle" fontSize="10" fill="#6c5ce7" fontWeight="bold">
176-
Setup DB
177-
</text>
178-
</g>
179-
180-
{/* Available Tools Box */}
181-
<g className="tools-box">
182-
<rect x="50" y="280" width="350" height="160" rx="8"
183-
fill="rgba(255,255,255,0.95)" stroke="#4ecdc4" strokeWidth="2"
184-
filter="url(#dropshadow)" />
185-
<text x="225" y="305" textAnchor="middle" fontSize="13" fontWeight="bold" fill="#333">
186-
Available MCP Tools
187-
</text>
188-
189-
<text x="70" y="325" fontSize="11" fill="#555">• execute_mimic_query(sql_query)</text>
190-
<text x="70" y="345" fontSize="11" fill="#555">• get_database_schema()</text>
191-
<text x="70" y="365" fontSize="11" fill="#555">• get_table_info(table_name)</text>
192-
<text x="70" y="385" fontSize="11" fill="#555">• get_icu_stays(patient_id, limit)</text>
193-
<text x="70" y="405" fontSize="11" fill="#555">• get_lab_results(patient_id, lab_item)</text>
194-
<text x="70" y="425" fontSize="11" fill="#555">• get_race_distribution(limit)</text>
195-
</g>
196-
</svg>
197-
</div>
198-
199-
{/* Architecture explanation cards */}
200-
<div className="architecture-explanation fade-in">
201-
<div style={{
202-
display: 'grid',
203-
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
204-
gap: '30px',
205-
marginTop: '40px'
206-
}}>
207-
<div style={{
208-
background: 'white',
209-
padding: '30px',
210-
borderRadius: '15px',
211-
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
212-
textAlign: 'center',
213-
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
214-
}}
215-
onMouseEnter={(e) => {
216-
e.target.style.transform = 'translateY(-5px)';
217-
e.target.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)';
218-
}}
219-
onMouseLeave={(e) => {
220-
e.target.style.transform = 'translateY(0)';
221-
e.target.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
222-
}}>
223-
<div style={{ fontSize: '48px', marginBottom: '20px' }}>🔧</div>
224-
<h3 style={{ color: '#2c3e50', marginBottom: '15px', fontSize: '1.3rem', fontWeight: '600' }}>
225-
Setup with m3 init
226-
</h3>
227-
<p style={{ color: '#5a6c7d', lineHeight: '1.6', margin: '0' }}>
228-
Use <code style={{
229-
background: '#f8f9fa',
230-
padding: '2px 8px',
231-
borderRadius: '4px',
232-
fontFamily: 'Courier New, monospace',
233-
color: '#4ecdc4',
234-
fontWeight: '600'
235-
}}>m3 init mimic-iv-demo</code> to automatically download and setup the MIMIC-IV demo database locally, or configure BigQuery access for the full dataset.
236-
</p>
237-
</div>
238-
239-
<div style={{
240-
background: 'white',
241-
padding: '30px',
242-
borderRadius: '15px',
243-
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
244-
textAlign: 'center',
245-
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
246-
}}
247-
onMouseEnter={(e) => {
248-
e.target.style.transform = 'translateY(-5px)';
249-
e.target.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)';
250-
}}
251-
onMouseLeave={(e) => {
252-
e.target.style.transform = 'translateY(0)';
253-
e.target.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
254-
}}>
255-
<div style={{ fontSize: '48px', marginBottom: '20px' }}>🤖</div>
256-
<h3 style={{ color: '#2c3e50', marginBottom: '15px', fontSize: '1.3rem', fontWeight: '600' }}>
257-
AI Model Integration
258-
</h3>
259-
<p style={{ color: '#5a6c7d', lineHeight: '1.6', margin: '0' }}>
260-
Claude Desktop connects to the m3 MCP server through the Model Context Protocol, gaining access to specialized healthcare data tools.
261-
</p>
262-
</div>
263-
264-
<div style={{
265-
background: 'white',
266-
padding: '30px',
267-
borderRadius: '15px',
268-
boxShadow: '0 10px 30px rgba(0, 0, 0, 0.1)',
269-
textAlign: 'center',
270-
transition: 'transform 0.3s ease, box-shadow 0.3s ease'
271-
}}
272-
onMouseEnter={(e) => {
273-
e.target.style.transform = 'translateY(-5px)';
274-
e.target.style.boxShadow = '0 20px 40px rgba(0, 0, 0, 0.15)';
13+
<img
14+
src="/m3/m3_architecture.png"
15+
alt="m3 Architecture Diagram"
16+
style={{
17+
width: '80%',
18+
maxWidth: '800px',
19+
height: 'auto',
20+
display: 'block',
21+
margin: '0 auto'
27522
}}
276-
onMouseLeave={(e) => {
277-
e.target.style.transform = 'translateY(0)';
278-
e.target.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.1)';
279-
}}>
280-
<div style={{ fontSize: '48px', marginBottom: '20px' }}>🔍</div>
281-
<h3 style={{ color: '#2c3e50', marginBottom: '15px', fontSize: '1.3rem', fontWeight: '600' }}>
282-
Secure Data Access
283-
</h3>
284-
<p style={{ color: '#5a6c7d', lineHeight: '1.6', margin: '0' }}>
285-
All queries are validated and authenticated. The MCP server provides safe, controlled access to MIMIC-IV data through specialized tools.
286-
</p>
287-
</div>
288-
</div>
23+
/>
28924
</div>
29025
</div>
29126
</section>

‎webapp/src/components/Header.js‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,7 +74,14 @@ const Header = () => {
7474
fontWeight: 'bold'
7575
}}
7676
>
77-
<span className="star-count">📦 PyPI</span>
77+
<span className="star-count">
78+
<img
79+
src="/m3/pypi_logo.svg"
80+
alt="PyPI"
81+
style={{ height: '20px', verticalAlign: 'middle', marginRight: '8px' }}
82+
/>
83+
PyPI
84+
</span>
7885
</a>
7986
<a href="https://github.com/rafiattrach/m3" target="_blank" rel="noopener noreferrer" className="btn-github">
8087
<span className="star-count">{stars.toLocaleString()} ⭐</span> Star on GitHub

0 commit comments

Comments
 (0)