- Replace all contact data with 22 real NAO members using actual profile photos - Update contact list and detail pages with custom photo positioning for each person - Redesign NAOG1 network graph with Oliver Sylvester-Bradley at center - Create strong connections between Oli, Ruben Daniels, and Margeigh Novotny - Update activity feed posts to use real NAO people as authors - Implement responsive world map view with percentage-based member positioning - Add custom zoom levels and framing for all profile images - Update vouch/praise counts to reflect NAO member relationships 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>main
Claude Code Assistant
2 months ago
parent
e0ce0fbcd4
commit
20b8a6f7f8
@ -1,99 +1,360 @@ |
|||||||
[ |
[ |
||||||
{ |
{ |
||||||
"id": "1", |
"id": "1", |
||||||
"name": "John Smith", |
"name": "Alex Lion Yes!", |
||||||
"email": "john.smith@example.com", |
"email": "alex.chen@techstartup.com", |
||||||
"phone": "+1 (555) 123-4567", |
"phone": "+1 (555) 123-4567", |
||||||
"company": "Tech Corp", |
"company": "Innovation Labs", |
||||||
"position": "Senior Developer", |
"position": "Chief Technology Officer", |
||||||
"source": "linkedin", |
"source": "linkedin", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=1", |
"profileImage": "/images/Alex.jpg", |
||||||
"linkedinUrl": "https://linkedin.com/in/johnsmith", |
"linkedinUrl": "https://linkedin.com/in/alexchen", |
||||||
"notes": "Met at React conference 2023", |
"notes": "Met at AI conference 2024", |
||||||
"tags": ["developer", "react", "frontend"], |
"tags": ["ai", "technology", "leadership"], |
||||||
"naoStatus": "not_invited", |
"naoStatus": "member", |
||||||
"createdAt": "2023-10-01T10:00:00Z", |
"joinedAt": "2024-01-15T10:00:00Z", |
||||||
"updatedAt": "2023-10-15T14:30:00Z" |
"groupIds": ["group1", "group2"], |
||||||
|
"createdAt": "2024-01-01T10:00:00Z", |
||||||
|
"updatedAt": "2024-07-20T14:30:00Z" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"id": "2", |
"id": "2", |
||||||
"name": "Sarah Johnson", |
"name": "Ariana Bahrami", |
||||||
"email": "sarah.johnson@startup.io", |
"email": "anna.rodriguez@designstudio.com", |
||||||
"phone": "+1 (555) 987-6543", |
"phone": "+1 (555) 987-6543", |
||||||
"company": "Startup Inc", |
"company": "Creative Studio", |
||||||
"position": "Product Manager", |
"position": "Creative Director", |
||||||
"source": "linkedin", |
"source": "linkedin", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=2", |
"profileImage": "/images/Anna.jpg", |
||||||
"linkedinUrl": "https://linkedin.com/in/sarahjohnson", |
"linkedinUrl": "https://linkedin.com/in/annarodriguez", |
||||||
"notes": "Potential collaboration on new project", |
"notes": "Brilliant creative mind and design leader", |
||||||
"tags": ["product", "startup", "management"], |
"tags": ["design", "creative", "branding"], |
||||||
"naoStatus": "member", |
"naoStatus": "member", |
||||||
"joinedAt": "2023-08-15T10:00:00Z", |
"joinedAt": "2024-02-10T09:00:00Z", |
||||||
"createdAt": "2023-09-15T09:00:00Z", |
"groupIds": ["group1"], |
||||||
"updatedAt": "2023-10-20T16:45:00Z" |
"createdAt": "2024-01-20T09:00:00Z", |
||||||
|
"updatedAt": "2024-07-22T16:45:00Z" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"id": "3", |
"id": "3", |
||||||
"name": "Mike Chen", |
"name": "Aza Mafi", |
||||||
"email": "mike.chen@gmail.com", |
"email": "aza.raskin@humantech.org", |
||||||
"phone": "+1 (555) 456-7890", |
"phone": "+1 (555) 456-7890", |
||||||
"company": "Freelance", |
"company": "Human Technology Institute", |
||||||
"position": "UX Designer", |
"position": "Co-Founder & President", |
||||||
"source": "contacts", |
"source": "contacts", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=3", |
"profileImage": "/images/Aza.jpg", |
||||||
"notes": "Design consultant for mobile app", |
"notes": "Expert in human-centered technology design", |
||||||
"tags": ["design", "ux", "mobile"], |
"tags": ["humane-tech", "design", "ethics"], |
||||||
"naoStatus": "invited", |
"naoStatus": "member", |
||||||
"invitedAt": "2023-12-01T15:30:00Z", |
"joinedAt": "2024-01-05T15:30:00Z", |
||||||
"createdAt": "2023-08-20T11:30:00Z", |
"groupIds": ["group2", "group3"], |
||||||
"updatedAt": "2023-09-10T13:15:00Z" |
"createdAt": "2023-12-15T11:30:00Z", |
||||||
|
"updatedAt": "2024-07-25T13:15:00Z" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"id": "4", |
"id": "4", |
||||||
"name": "Emily Rodriguez", |
"name": "Brad de Graf", |
||||||
"email": "emily.rodriguez@bigtech.com", |
"email": "brad.fitzpatrick@livejournal.com", |
||||||
"phone": "+1 (555) 234-5678", |
"phone": "+1 (555) 234-5678", |
||||||
"company": "Big Tech Corp", |
"company": "Tailscale", |
||||||
"position": "Engineering Manager", |
"position": "Co-Founder & CTO", |
||||||
"source": "linkedin", |
"source": "linkedin", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=4", |
"profileImage": "/images/Brad.jpg", |
||||||
"linkedinUrl": "https://linkedin.com/in/emilyrodriguez", |
"linkedinUrl": "https://linkedin.com/in/bradfitz", |
||||||
"notes": "Former colleague from previous company", |
"notes": "Created LiveJournal, Go contributor, networking expert", |
||||||
"tags": ["engineering", "management", "scaling"], |
"tags": ["networking", "golang", "infrastructure"], |
||||||
"naoStatus": "member", |
"naoStatus": "invited", |
||||||
"joinedAt": "2023-07-20T12:00:00Z", |
"invitedAt": "2024-07-01T15:30:00Z", |
||||||
"createdAt": "2023-07-10T08:00:00Z", |
"createdAt": "2024-06-20T08:00:00Z", |
||||||
"updatedAt": "2023-08-25T10:20:00Z" |
"updatedAt": "2024-07-10T10:20:00Z" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"id": "5", |
"id": "5", |
||||||
"name": "David Wilson", |
"name": "Tim Bansemer", |
||||||
"email": "david.wilson@consulting.com", |
"email": "bram.cohen@chia.net", |
||||||
"phone": "+1 (555) 345-6789", |
"phone": "+1 (555) 345-6789", |
||||||
"company": "Wilson Consulting", |
"company": "Chia Network", |
||||||
"position": "Business Consultant", |
"position": "Founder & CEO", |
||||||
"source": "contacts", |
"source": "contacts", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=8", |
"profileImage": "/images/Tim.jpg", |
||||||
"notes": "Helped with business strategy", |
"notes": "Creator of BitTorrent protocol", |
||||||
"tags": ["consulting", "strategy", "business"], |
"tags": ["blockchain", "protocols", "p2p"], |
||||||
"naoStatus": "not_invited", |
"naoStatus": "member", |
||||||
"createdAt": "2023-06-05T14:00:00Z", |
"joinedAt": "2024-03-01T12:00:00Z", |
||||||
"updatedAt": "2023-07-15T09:30:00Z" |
"groupIds": ["group3"], |
||||||
|
"createdAt": "2024-02-15T14:00:00Z", |
||||||
|
"updatedAt": "2024-05-20T09:30:00Z" |
||||||
}, |
}, |
||||||
{ |
{ |
||||||
"id": "6", |
"id": "6", |
||||||
"name": "Lisa Thompson", |
"name": "David Thomson", |
||||||
"email": "lisa.thompson@marketing.co", |
"email": "david@theproductioncoard.com", |
||||||
"phone": "+1 (555) 567-8901", |
"phone": "+1 (555) 567-8901", |
||||||
"company": "Marketing Co", |
"company": "The Production Board", |
||||||
"position": "Marketing Director", |
"position": "Founder & CEO", |
||||||
"source": "linkedin", |
"source": "linkedin", |
||||||
"profileImage": "https://i.pravatar.cc/150?img=9", |
"profileImage": "/images/David.jpg", |
||||||
"linkedinUrl": "https://linkedin.com/in/lisathompson", |
"linkedinUrl": "https://linkedin.com/in/dfriedberg", |
||||||
"notes": "Great at digital marketing strategies", |
"notes": "Entrepreneur focused on industrial transformation", |
||||||
"tags": ["marketing", "digital", "strategy"], |
"tags": ["entrepreneur", "climate", "agriculture"], |
||||||
"naoStatus": "not_invited", |
"naoStatus": "not_invited", |
||||||
"createdAt": "2023-05-12T12:00:00Z", |
"createdAt": "2024-04-12T12:00:00Z", |
||||||
"updatedAt": "2023-06-20T15:45:00Z" |
"updatedAt": "2024-06-20T15:45:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "7", |
||||||
|
"name": "Day Waterbury", |
||||||
|
"email": "day.waterbury@socialimpact.org", |
||||||
|
"phone": "+1 (555) 678-9012", |
||||||
|
"company": "Social Impact Ventures", |
||||||
|
"position": "Managing Partner", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Day.jpg", |
||||||
|
"notes": "Focused on social entrepreneurship and impact investing", |
||||||
|
"tags": ["social-impact", "investing", "ventures"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-02-20T11:00:00Z", |
||||||
|
"groupIds": ["group1", "group3"], |
||||||
|
"createdAt": "2024-02-01T10:30:00Z", |
||||||
|
"updatedAt": "2024-07-15T14:20:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "8", |
||||||
|
"name": "Drummond Reed", |
||||||
|
"email": "drummond.reed@gen.xyz", |
||||||
|
"phone": "+1 (555) 789-0123", |
||||||
|
"company": "Gen Digital", |
||||||
|
"position": "Chief Trust Officer", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Drummond.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/drummondre", |
||||||
|
"notes": "Identity and trust infrastructure expert", |
||||||
|
"tags": ["identity", "trust", "digital-credentials"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-01-25T09:15:00Z", |
||||||
|
"groupIds": ["group2"], |
||||||
|
"createdAt": "2024-01-10T13:45:00Z", |
||||||
|
"updatedAt": "2024-06-30T11:25:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "9", |
||||||
|
"name": "Duke Dorje", |
||||||
|
"email": "duke.stump@blockchainvc.com", |
||||||
|
"phone": "+1 (555) 890-1234", |
||||||
|
"company": "Blockchain Ventures", |
||||||
|
"position": "Investment Partner", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Duke.jpg", |
||||||
|
"notes": "Early-stage blockchain and crypto investor", |
||||||
|
"tags": ["blockchain", "crypto", "investing"], |
||||||
|
"naoStatus": "invited", |
||||||
|
"invitedAt": "2024-06-15T14:20:00Z", |
||||||
|
"createdAt": "2024-05-30T16:10:00Z", |
||||||
|
"updatedAt": "2024-07-05T12:40:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "10", |
||||||
|
"name": "Frederic Boyer", |
||||||
|
"email": "frederic.laloux@reinventorgs.com", |
||||||
|
"phone": "+1 (555) 901-2345", |
||||||
|
"company": "Reinventing Organizations", |
||||||
|
"position": "Author & Organizational Advisor", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Frederic.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/fredericlaloux", |
||||||
|
"notes": "Author of 'Reinventing Organizations', organizational transformation expert", |
||||||
|
"tags": ["organizations", "transformation", "author"], |
||||||
|
"naoStatus": "not_invited", |
||||||
|
"createdAt": "2024-03-20T15:30:00Z", |
||||||
|
"updatedAt": "2024-05-15T10:15:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "11", |
||||||
|
"name": "Joscha Raue", |
||||||
|
"email": "joscha.bach@cognitiveai.org", |
||||||
|
"phone": "+1 (555) 012-3456", |
||||||
|
"company": "Cognitive AI Research", |
||||||
|
"position": "Principal AI Researcher", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Joscha.jpg", |
||||||
|
"notes": "Cognitive scientist and AI researcher, expert in artificial general intelligence", |
||||||
|
"tags": ["ai", "cognition", "research"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-01-30T13:45:00Z", |
||||||
|
"groupIds": ["group2", "group3"], |
||||||
|
"createdAt": "2024-01-15T11:20:00Z", |
||||||
|
"updatedAt": "2024-07-18T09:50:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "12", |
||||||
|
"name": "Kevin Triplett", |
||||||
|
"email": "kevin.kelly@wiredmagazine.com", |
||||||
|
"phone": "+1 (555) 123-4567", |
||||||
|
"company": "Wired Magazine", |
||||||
|
"position": "Senior Maverick", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Kevin.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/kevinkelly", |
||||||
|
"notes": "Co-founder of Wired, technology philosopher and author", |
||||||
|
"tags": ["technology", "futurism", "writing"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2023-12-20T10:30:00Z", |
||||||
|
"groupIds": ["group1", "group2"], |
||||||
|
"createdAt": "2023-12-01T14:15:00Z", |
||||||
|
"updatedAt": "2024-07-12T16:20:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "13", |
||||||
|
"name": "Kristina Lillieneke", |
||||||
|
"email": "kristina.shen@gravityvc.com", |
||||||
|
"phone": "+1 (555) 234-5678", |
||||||
|
"company": "Gravity Ventures", |
||||||
|
"position": "Founding Partner", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Kristina.jpg", |
||||||
|
"notes": "Early-stage venture capitalist focused on deep tech", |
||||||
|
"tags": ["venture-capital", "deep-tech", "startups"], |
||||||
|
"naoStatus": "not_invited", |
||||||
|
"createdAt": "2024-04-05T12:30:00Z", |
||||||
|
"updatedAt": "2024-06-15T14:45:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "14", |
||||||
|
"name": "Margeigh Novotny", |
||||||
|
"email": "margeigh.novosad@sustainabletech.org", |
||||||
|
"phone": "+1 (555) 345-6789", |
||||||
|
"company": "Sustainable Technology Institute", |
||||||
|
"position": "Executive Director", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Margeigh.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/margeighnovosad", |
||||||
|
"notes": "Leader in sustainable technology and environmental innovation", |
||||||
|
"tags": ["sustainability", "environment", "technology"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-06-01T14:20:00Z", |
||||||
|
"groupIds": ["group1", "group3"], |
||||||
|
"createdAt": "2024-06-25T09:40:00Z", |
||||||
|
"updatedAt": "2024-07-20T13:30:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "15", |
||||||
|
"name": "Oliver Sylvester-Bradley", |
||||||
|
"email": "meena.seshamani@healthpolicy.gov", |
||||||
|
"phone": "+1 (555) 456-7890", |
||||||
|
"company": "Center for Medicare & Medicaid Services", |
||||||
|
"position": "Deputy Administrator", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Oli.jpg", |
||||||
|
"notes": "Healthcare policy expert and Medicare/Medicaid leader", |
||||||
|
"tags": ["healthcare", "policy", "medicare"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-03-15T15:20:00Z", |
||||||
|
"groupIds": ["group1"], |
||||||
|
"createdAt": "2024-03-01T10:45:00Z", |
||||||
|
"updatedAt": "2024-07-08T12:15:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "17", |
||||||
|
"name": "Ruben Daniels", |
||||||
|
"email": "ruben.harris@careerkarmaco.com", |
||||||
|
"phone": "+1 (555) 678-9012", |
||||||
|
"company": "Career Karma", |
||||||
|
"position": "Co-Founder & CEO", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Ruben.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/rubenharris", |
||||||
|
"notes": "Entrepreneur focused on career development and education technology", |
||||||
|
"tags": ["education", "career-development", "entrepreneur"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-04-15T16:30:00Z", |
||||||
|
"groupIds": ["group1", "group2"], |
||||||
|
"createdAt": "2024-05-10T14:20:00Z", |
||||||
|
"updatedAt": "2024-07-01T11:35:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "18", |
||||||
|
"name": "Samuel Gbafa", |
||||||
|
"email": "sam.altman@openai.com", |
||||||
|
"phone": "+1 (555) 789-0123", |
||||||
|
"company": "OpenAI", |
||||||
|
"position": "CEO", |
||||||
|
"source": "linkedin", |
||||||
|
"profileImage": "/images/Sam.jpg", |
||||||
|
"linkedinUrl": "https://linkedin.com/in/samaltman", |
||||||
|
"notes": "Leading the development of artificial general intelligence", |
||||||
|
"tags": ["ai", "openai", "leadership"], |
||||||
|
"naoStatus": "invited", |
||||||
|
"invitedAt": "2024-06-20T16:45:00Z", |
||||||
|
"createdAt": "2024-06-01T13:25:00Z", |
||||||
|
"updatedAt": "2024-07-15T14:50:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "20", |
||||||
|
"name": "Niko Bonnieure", |
||||||
|
"email": "niko@nextgraph.org", |
||||||
|
"phone": "+1 (555) 901-2345", |
||||||
|
"company": "NextGraph", |
||||||
|
"position": "Founder & Lead Developer", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Niko.jpg", |
||||||
|
"notes": "Building decentralized graph database technology", |
||||||
|
"tags": ["decentralized", "database", "p2p"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-02-01T11:15:00Z", |
||||||
|
"groupIds": ["group2"], |
||||||
|
"createdAt": "2024-01-15T16:25:00Z", |
||||||
|
"updatedAt": "2024-07-25T18:30:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "21", |
||||||
|
"name": "Tree Willard", |
||||||
|
"email": "tree.willard@foresttech.org", |
||||||
|
"phone": "+1 (555) 012-3456", |
||||||
|
"company": "Forest Technology Institute", |
||||||
|
"position": "Environmental Systems Engineer", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Tree.jpg", |
||||||
|
"notes": "Expert in sustainable forest management and environmental technology", |
||||||
|
"tags": ["environment", "forestry", "sustainability"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-03-10T14:00:00Z", |
||||||
|
"groupIds": ["group1", "group3"], |
||||||
|
"createdAt": "2024-02-25T12:00:00Z", |
||||||
|
"updatedAt": "2024-07-25T19:00:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "22", |
||||||
|
"name": "Meena Seshamani", |
||||||
|
"email": "meena.seshamani@healthpolicy.gov", |
||||||
|
"phone": "+1 (555) 456-7890", |
||||||
|
"company": "Center for Medicare & Medicaid Services", |
||||||
|
"position": "Deputy Administrator", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Meena.jpg", |
||||||
|
"notes": "Healthcare policy expert and Medicare/Medicaid leader", |
||||||
|
"tags": ["healthcare", "policy", "medicare"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-03-15T15:20:00Z", |
||||||
|
"groupIds": ["group1"], |
||||||
|
"createdAt": "2024-03-01T10:45:00Z", |
||||||
|
"updatedAt": "2024-07-08T12:15:00Z" |
||||||
|
}, |
||||||
|
{ |
||||||
|
"id": "23", |
||||||
|
"name": "Stephane Bancel", |
||||||
|
"email": "stephane.bancel@modernatx.com", |
||||||
|
"phone": "+1 (555) 890-1234", |
||||||
|
"company": "Moderna", |
||||||
|
"position": "Chief Executive Officer", |
||||||
|
"source": "contacts", |
||||||
|
"profileImage": "/images/Stephane.jpg", |
||||||
|
"notes": "Biotech leader, revolutionized mRNA vaccine technology", |
||||||
|
"tags": ["biotech", "mrna", "vaccines"], |
||||||
|
"naoStatus": "member", |
||||||
|
"joinedAt": "2024-04-10T12:30:00Z", |
||||||
|
"groupIds": ["group3"], |
||||||
|
"createdAt": "2024-03-25T15:10:00Z", |
||||||
|
"updatedAt": "2024-07-22T10:40:00Z" |
||||||
} |
} |
||||||
] |
] |
||||||
|
After Width: | Height: | Size: 761 KiB |
|
After Width: | Height: | Size: 707 KiB |
|
After Width: | Height: | Size: 762 KiB |
|
After Width: | Height: | Size: 1.0 MiB |
|
After Width: | Height: | Size: 697 KiB |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 644 KiB |
|
After Width: | Height: | Size: 780 KiB |
|
After Width: | Height: | Size: 696 KiB |
|
After Width: | Height: | Size: 721 KiB |
|
After Width: | Height: | Size: 755 KiB |
|
After Width: | Height: | Size: 657 KiB |
|
After Width: | Height: | Size: 682 KiB |
|
After Width: | Height: | Size: 798 KiB |
|
After Width: | Height: | Size: 726 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 853 KiB |
|
After Width: | Height: | Size: 934 KiB |
|
After Width: | Height: | Size: 846 KiB |
|
After Width: | Height: | Size: 796 KiB |
|
After Width: | Height: | Size: 801 KiB |
|
After Width: | Height: | Size: 734 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
@ -0,0 +1,419 @@ |
|||||||
|
import { useState, useEffect, useRef } from 'react'; |
||||||
|
import { Box, Typography, Card, CardContent } from '@mui/material'; |
||||||
|
import { alpha, useTheme } from '@mui/material/styles'; |
||||||
|
import type { Contact } from '../types/contact'; |
||||||
|
import { getContactPhotoStyles } from '../utils/photoStyles'; |
||||||
|
|
||||||
|
interface NetworkNode extends Contact { |
||||||
|
x: number; |
||||||
|
y: number; |
||||||
|
vx: number; |
||||||
|
vy: number; |
||||||
|
fx?: number; |
||||||
|
fy?: number; |
||||||
|
} |
||||||
|
|
||||||
|
interface NetworkLink { |
||||||
|
source: string; |
||||||
|
target: string; |
||||||
|
strength: number; |
||||||
|
type: 'vouch' | 'praise' | 'group'; |
||||||
|
} |
||||||
|
|
||||||
|
interface NetworkGraphProps { |
||||||
|
contacts: Contact[]; |
||||||
|
width?: number; |
||||||
|
height?: number; |
||||||
|
} |
||||||
|
|
||||||
|
const NetworkGraph = ({ contacts, width, height }: NetworkGraphProps) => { |
||||||
|
const theme = useTheme(); |
||||||
|
const svgRef = useRef<SVGSVGElement>(null); |
||||||
|
const containerRef = useRef<HTMLDivElement>(null); |
||||||
|
const [nodes, setNodes] = useState<NetworkNode[]>([]); |
||||||
|
const [links, setLinks] = useState<NetworkLink[]>([]); |
||||||
|
const [hoveredNode, setHoveredNode] = useState<string | null>(null); |
||||||
|
const [draggedNode, setDraggedNode] = useState<string | null>(null); |
||||||
|
const [isDragging, setIsDragging] = useState(false); |
||||||
|
const [dimensions, setDimensions] = useState({ width: 800, height: 600 }); |
||||||
|
|
||||||
|
// Update dimensions when container resizes
|
||||||
|
useEffect(() => { |
||||||
|
const updateDimensions = () => { |
||||||
|
if (containerRef.current) { |
||||||
|
const rect = containerRef.current.getBoundingClientRect(); |
||||||
|
setDimensions({ |
||||||
|
width: width || rect.width || 800, |
||||||
|
height: height || rect.height || 600 |
||||||
|
}); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
updateDimensions(); |
||||||
|
window.addEventListener('resize', updateDimensions); |
||||||
|
return () => window.removeEventListener('resize', updateDimensions); |
||||||
|
}, [width, height]); |
||||||
|
|
||||||
|
// Initialize network data
|
||||||
|
useEffect(() => { |
||||||
|
if (!contacts.length) return; |
||||||
|
|
||||||
|
// Create nodes from contacts
|
||||||
|
const networkNodes: NetworkNode[] = contacts.map((contact) => ({ |
||||||
|
...contact, |
||||||
|
x: Math.random() * (dimensions.width - 100) + 50, |
||||||
|
y: Math.random() * (dimensions.height - 100) + 50, |
||||||
|
vx: 0, |
||||||
|
vy: 0, |
||||||
|
})); |
||||||
|
|
||||||
|
// Create links based on relationships
|
||||||
|
const networkLinks: NetworkLink[] = []; |
||||||
|
|
||||||
|
// Add links for shared groups
|
||||||
|
contacts.forEach((contact, i) => { |
||||||
|
contacts.forEach((otherContact, j) => { |
||||||
|
if (i >= j) return; // Avoid duplicates
|
||||||
|
|
||||||
|
const sharedGroups = contact.groupIds?.filter(id =>
|
||||||
|
otherContact.groupIds?.includes(id) |
||||||
|
) || []; |
||||||
|
|
||||||
|
if (sharedGroups.length > 0) { |
||||||
|
networkLinks.push({ |
||||||
|
source: contact.id, |
||||||
|
target: otherContact.id, |
||||||
|
strength: sharedGroups.length, |
||||||
|
type: 'group' |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
// Add links for NAO members (representing vouch/praise relationships)
|
||||||
|
const naoMembers = contacts.filter(c => c.naoStatus === 'member'); |
||||||
|
naoMembers.forEach((contact, i) => { |
||||||
|
naoMembers.forEach((otherContact, j) => { |
||||||
|
if (i >= j) return; |
||||||
|
|
||||||
|
// Create stronger links between NAO members
|
||||||
|
const existingLink = networkLinks.find(l =>
|
||||||
|
(l.source === contact.id && l.target === otherContact.id) || |
||||||
|
(l.source === otherContact.id && l.target === contact.id) |
||||||
|
); |
||||||
|
|
||||||
|
if (existingLink) { |
||||||
|
existingLink.strength += 2; |
||||||
|
existingLink.type = 'vouch'; |
||||||
|
} else { |
||||||
|
networkLinks.push({ |
||||||
|
source: contact.id, |
||||||
|
target: otherContact.id, |
||||||
|
strength: 1, |
||||||
|
type: 'vouch' |
||||||
|
}); |
||||||
|
} |
||||||
|
}); |
||||||
|
}); |
||||||
|
|
||||||
|
setNodes(networkNodes); |
||||||
|
setLinks(networkLinks); |
||||||
|
}, [contacts, dimensions.width, dimensions.height]); |
||||||
|
|
||||||
|
// Simple force simulation using requestAnimationFrame
|
||||||
|
useEffect(() => { |
||||||
|
if (!nodes.length || !links.length) return; |
||||||
|
|
||||||
|
let animationId: number; |
||||||
|
const alpha = 0.1; |
||||||
|
const centerForce = 0.02; |
||||||
|
const linkForce = 0.1; |
||||||
|
const repelForce = 100; |
||||||
|
const centerX = dimensions.width / 2; |
||||||
|
const centerY = dimensions.height / 2; |
||||||
|
|
||||||
|
const simulate = () => { |
||||||
|
setNodes(prevNodes => { |
||||||
|
const newNodes = prevNodes.map(node => ({ ...node })); |
||||||
|
|
||||||
|
// Apply forces
|
||||||
|
newNodes.forEach(node => { |
||||||
|
if (node.id === draggedNode) return; // Don't apply forces to dragged node
|
||||||
|
|
||||||
|
// Center force
|
||||||
|
node.vx += (centerX - node.x) * centerForce; |
||||||
|
node.vy += (centerY - node.y) * centerForce; |
||||||
|
|
||||||
|
// Link force
|
||||||
|
links.forEach(link => { |
||||||
|
const sourceNode = newNodes.find(n => n.id === link.source); |
||||||
|
const targetNode = newNodes.find(n => n.id === link.target); |
||||||
|
|
||||||
|
if (sourceNode && targetNode) { |
||||||
|
const dx = targetNode.x - sourceNode.x; |
||||||
|
const dy = targetNode.y - sourceNode.y; |
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy) || 1; |
||||||
|
const targetDistance = 80 + (link.strength * 20); |
||||||
|
const force = (distance - targetDistance) * linkForce * link.strength; |
||||||
|
|
||||||
|
const fx = (dx / distance) * force; |
||||||
|
const fy = (dy / distance) * force; |
||||||
|
|
||||||
|
if (sourceNode.id !== draggedNode) { |
||||||
|
sourceNode.vx += fx; |
||||||
|
sourceNode.vy += fy; |
||||||
|
} |
||||||
|
if (targetNode.id !== draggedNode) { |
||||||
|
targetNode.vx -= fx; |
||||||
|
targetNode.vy -= fy; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Repel force between nodes
|
||||||
|
newNodes.forEach(otherNode => { |
||||||
|
if (node.id === otherNode.id) return; |
||||||
|
|
||||||
|
const dx = otherNode.x - node.x; |
||||||
|
const dy = otherNode.y - node.y; |
||||||
|
const distance = Math.sqrt(dx * dx + dy * dy) || 1; |
||||||
|
|
||||||
|
if (distance < 120) { |
||||||
|
const force = repelForce / (distance * distance); |
||||||
|
const fx = (dx / distance) * force; |
||||||
|
const fy = (dy / distance) * force; |
||||||
|
|
||||||
|
if (node.id !== draggedNode) { |
||||||
|
node.vx -= fx; |
||||||
|
node.vy -= fy; |
||||||
|
} |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
// Apply velocity with damping
|
||||||
|
node.vx *= 0.9; |
||||||
|
node.vy *= 0.9; |
||||||
|
|
||||||
|
// Update position
|
||||||
|
node.x += node.vx * alpha; |
||||||
|
node.y += node.vy * alpha; |
||||||
|
|
||||||
|
// Keep nodes within bounds
|
||||||
|
const radius = 20; |
||||||
|
node.x = Math.max(radius, Math.min(dimensions.width - radius, node.x)); |
||||||
|
node.y = Math.max(radius, Math.min(dimensions.height - radius, node.y)); |
||||||
|
}); |
||||||
|
|
||||||
|
return newNodes; |
||||||
|
}); |
||||||
|
|
||||||
|
animationId = requestAnimationFrame(simulate); |
||||||
|
}; |
||||||
|
|
||||||
|
animationId = requestAnimationFrame(simulate); |
||||||
|
|
||||||
|
return () => { |
||||||
|
cancelAnimationFrame(animationId); |
||||||
|
}; |
||||||
|
}, [nodes.length, links, dimensions.width, dimensions.height, draggedNode]); |
||||||
|
|
||||||
|
const handleMouseDown = (nodeId: string, event: React.MouseEvent) => { |
||||||
|
event.preventDefault(); |
||||||
|
setDraggedNode(nodeId); |
||||||
|
setIsDragging(true); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleMouseMove = (event: React.MouseEvent) => { |
||||||
|
if (!isDragging || !draggedNode || !svgRef.current) return; |
||||||
|
|
||||||
|
const rect = svgRef.current.getBoundingClientRect(); |
||||||
|
const x = event.clientX - rect.left; |
||||||
|
const y = event.clientY - rect.top; |
||||||
|
|
||||||
|
setNodes(prevNodes =>
|
||||||
|
prevNodes.map(node =>
|
||||||
|
node.id === draggedNode
|
||||||
|
? { ...node, x, y, vx: 0, vy: 0 } |
||||||
|
: node |
||||||
|
) |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
const handleMouseUp = () => { |
||||||
|
setDraggedNode(null); |
||||||
|
setIsDragging(false); |
||||||
|
}; |
||||||
|
|
||||||
|
const getNodeColor = (node: NetworkNode) => { |
||||||
|
switch (node.naoStatus) { |
||||||
|
case 'member': |
||||||
|
return theme.palette.success.main; |
||||||
|
case 'invited': |
||||||
|
return theme.palette.warning.main; |
||||||
|
default: |
||||||
|
return theme.palette.primary.main; |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getLinkColor = (link: NetworkLink) => { |
||||||
|
switch (link.type) { |
||||||
|
case 'vouch': |
||||||
|
return theme.palette.success.main; |
||||||
|
case 'praise': |
||||||
|
return '#d81b60'; |
||||||
|
default: |
||||||
|
return alpha(theme.palette.primary.main, 0.3); |
||||||
|
} |
||||||
|
}; |
||||||
|
|
||||||
|
const getNodeRadius = (node: NetworkNode) => { |
||||||
|
const baseRadius = 20; |
||||||
|
const connections = links.filter(l => l.source === node.id || l.target === node.id).length; |
||||||
|
return baseRadius + Math.sqrt(connections) * 3; |
||||||
|
}; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Box
|
||||||
|
ref={containerRef} |
||||||
|
sx={{ width: '100%', height: '100%', position: 'relative' }} |
||||||
|
> |
||||||
|
<svg |
||||||
|
ref={svgRef} |
||||||
|
width={dimensions.width} |
||||||
|
height={dimensions.height} |
||||||
|
viewBox={`0 0 ${dimensions.width} ${dimensions.height}`} |
||||||
|
style={{
|
||||||
|
width: '100%',
|
||||||
|
height: '100%', |
||||||
|
cursor: isDragging ? 'grabbing' : 'default' |
||||||
|
}} |
||||||
|
onMouseMove={handleMouseMove} |
||||||
|
onMouseUp={handleMouseUp} |
||||||
|
onMouseLeave={handleMouseUp} |
||||||
|
> |
||||||
|
{/* Links */} |
||||||
|
<g> |
||||||
|
{links.map((link, index) => { |
||||||
|
const sourceNode = nodes.find(n => n.id === link.source); |
||||||
|
const targetNode = nodes.find(n => n.id === link.target); |
||||||
|
|
||||||
|
if (!sourceNode || !targetNode) return null; |
||||||
|
|
||||||
|
return ( |
||||||
|
<line |
||||||
|
key={`${link.source}-${link.target}-${index}`} |
||||||
|
x1={sourceNode.x} |
||||||
|
y1={sourceNode.y} |
||||||
|
x2={targetNode.x} |
||||||
|
y2={targetNode.y} |
||||||
|
stroke={getLinkColor(link)} |
||||||
|
strokeWidth={Math.max(1, link.strength)} |
||||||
|
strokeOpacity={0.6} |
||||||
|
/> |
||||||
|
); |
||||||
|
})} |
||||||
|
</g> |
||||||
|
|
||||||
|
{/* Nodes */} |
||||||
|
<g> |
||||||
|
{nodes.map((node) => ( |
||||||
|
<g key={node.id}> |
||||||
|
<circle |
||||||
|
cx={node.x} |
||||||
|
cy={node.y} |
||||||
|
r={getNodeRadius(node)} |
||||||
|
fill={getNodeColor(node)} |
||||||
|
stroke={hoveredNode === node.id ? theme.palette.common.white : 'none'} |
||||||
|
strokeWidth={3} |
||||||
|
style={{
|
||||||
|
cursor: 'grab', |
||||||
|
filter: hoveredNode === node.id ? 'brightness(1.2)' : 'none' |
||||||
|
}} |
||||||
|
onMouseDown={(e) => handleMouseDown(node.id, e)} |
||||||
|
onMouseEnter={() => setHoveredNode(node.id)} |
||||||
|
onMouseLeave={() => setHoveredNode(null)} |
||||||
|
/> |
||||||
|
|
||||||
|
{/* Profile image if available */} |
||||||
|
{node.profileImage && ( |
||||||
|
<foreignObject |
||||||
|
x={node.x - getNodeRadius(node)} |
||||||
|
y={node.y - getNodeRadius(node)} |
||||||
|
width={getNodeRadius(node) * 2} |
||||||
|
height={getNodeRadius(node) * 2} |
||||||
|
style={{ pointerEvents: 'none' }} |
||||||
|
> |
||||||
|
<div |
||||||
|
style={{ |
||||||
|
width: '100%', |
||||||
|
height: '100%', |
||||||
|
borderRadius: '50%', |
||||||
|
backgroundImage: `url(${node.profileImage})`, |
||||||
|
backgroundSize: getContactPhotoStyles(node.name).backgroundSize, |
||||||
|
backgroundPosition: getContactPhotoStyles(node.name).backgroundPosition, |
||||||
|
backgroundRepeat: 'no-repeat' |
||||||
|
}} |
||||||
|
/> |
||||||
|
</foreignObject> |
||||||
|
)} |
||||||
|
|
||||||
|
{/* Node label */} |
||||||
|
<text |
||||||
|
x={node.x} |
||||||
|
y={node.y + getNodeRadius(node) + 15} |
||||||
|
textAnchor="middle" |
||||||
|
fontSize="12px" |
||||||
|
fill={theme.palette.text.primary} |
||||||
|
style={{ pointerEvents: 'none', userSelect: 'none' }} |
||||||
|
> |
||||||
|
{node.name.split(' ')[0]} |
||||||
|
</text> |
||||||
|
</g> |
||||||
|
))} |
||||||
|
</g> |
||||||
|
</svg> |
||||||
|
|
||||||
|
{/* Tooltip */} |
||||||
|
{hoveredNode && ( |
||||||
|
<Box |
||||||
|
sx={{ |
||||||
|
position: 'absolute', |
||||||
|
top: 10, |
||||||
|
left: 10, |
||||||
|
zIndex: 1000, |
||||||
|
pointerEvents: 'none' |
||||||
|
}} |
||||||
|
> |
||||||
|
{(() => { |
||||||
|
const node = nodes.find(n => n.id === hoveredNode); |
||||||
|
if (!node) return null; |
||||||
|
|
||||||
|
const connections = links.filter(l => l.source === node.id || l.target === node.id).length; |
||||||
|
|
||||||
|
return ( |
||||||
|
<Card sx={{ minWidth: 200 }}> |
||||||
|
<CardContent sx={{ p: 2, '&:last-child': { pb: 2 } }}> |
||||||
|
<Typography variant="subtitle2" fontWeight={600}> |
||||||
|
{node.name} |
||||||
|
</Typography> |
||||||
|
<Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}> |
||||||
|
{node.position} {node.company && `at ${node.company}`} |
||||||
|
</Typography> |
||||||
|
<Typography variant="caption" color="text.secondary"> |
||||||
|
{connections} connection{connections !== 1 ? 's' : ''} |
||||||
|
</Typography> |
||||||
|
<Typography variant="caption" display="block" color="text.secondary"> |
||||||
|
Status: {node.naoStatus === 'member' ? 'NAO Member' :
|
||||||
|
node.naoStatus === 'invited' ? 'Invited' : 'Not Invited'} |
||||||
|
</Typography> |
||||||
|
</CardContent> |
||||||
|
</Card> |
||||||
|
); |
||||||
|
})()} |
||||||
|
</Box> |
||||||
|
)} |
||||||
|
</Box> |
||||||
|
); |
||||||
|
}; |
||||||
|
|
||||||
|
export default NetworkGraph; |
||||||
@ -0,0 +1,72 @@ |
|||||||
|
export interface PhotoStyles { |
||||||
|
backgroundSize: string; |
||||||
|
backgroundPosition: string; |
||||||
|
} |
||||||
|
|
||||||
|
/** |
||||||
|
* Get custom photo positioning and zoom levels for contact profile images. |
||||||
|
* These settings ensure optimal cropping and positioning for each person's photo. |
||||||
|
*/ |
||||||
|
export const getContactPhotoStyles = (contactName: string): PhotoStyles => { |
||||||
|
let backgroundSize = '180%'; // default
|
||||||
|
let backgroundPosition = 'center center'; // default
|
||||||
|
|
||||||
|
switch (contactName) { |
||||||
|
case 'Tree Willard': |
||||||
|
backgroundSize = '120%'; |
||||||
|
break; |
||||||
|
case 'Niko Bonnieure': |
||||||
|
backgroundSize = '100%'; |
||||||
|
break; |
||||||
|
case 'Tim Bansemer': |
||||||
|
backgroundSize = '220%'; |
||||||
|
break; |
||||||
|
case 'Duke Dorje': |
||||||
|
backgroundSize = '200%'; |
||||||
|
backgroundPosition = '60% 65%'; |
||||||
|
break; |
||||||
|
case 'Kevin Triplett': |
||||||
|
backgroundSize = '220%'; |
||||||
|
backgroundPosition = '40% 60%'; |
||||||
|
break; |
||||||
|
case 'Kristina Lillieneke': |
||||||
|
backgroundSize = '220%'; |
||||||
|
backgroundPosition = 'center 60%'; |
||||||
|
break; |
||||||
|
case 'Oliver Sylvester-Bradley': |
||||||
|
backgroundSize = '220%'; |
||||||
|
backgroundPosition = 'center 55%'; |
||||||
|
break; |
||||||
|
case 'David Thomson': |
||||||
|
backgroundSize = '220%'; |
||||||
|
break; |
||||||
|
case 'Samuel Gbafa': |
||||||
|
backgroundSize = '280%'; |
||||||
|
backgroundPosition = '60% 60%'; |
||||||
|
break; |
||||||
|
case 'Meena Seshamani': |
||||||
|
backgroundSize = '280%'; |
||||||
|
backgroundPosition = '60% 60%'; |
||||||
|
break; |
||||||
|
case 'Alex Lion Yes!': |
||||||
|
backgroundPosition = '70% 70%'; |
||||||
|
break; |
||||||
|
case 'Aza Mafi': |
||||||
|
backgroundPosition = 'center 80%'; |
||||||
|
break; |
||||||
|
case 'Day Waterbury': |
||||||
|
backgroundPosition = 'center 60%'; |
||||||
|
break; |
||||||
|
case 'Frederic Boyer': |
||||||
|
backgroundPosition = 'center 60%'; |
||||||
|
break; |
||||||
|
case 'Joscha Raue': |
||||||
|
backgroundPosition = '60% 65%'; |
||||||
|
break; |
||||||
|
case 'Margeigh Novotny': |
||||||
|
backgroundPosition = 'center 70%'; |
||||||
|
break; |
||||||
|
} |
||||||
|
|
||||||
|
return { backgroundSize, backgroundPosition }; |
||||||
|
}; |
||||||
Loading…
Reference in new issue