alma/NeahNew
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

observatory

Browse Source
This commit is contained in:
alma 2025-05-04 16:51:19 +02:00
parent da34c32527
commit bb20cdbc90
2 changed files with 118 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/observatory/observatory-map.tsx
View File

@ -47,15 +47,15 @@ export function ObservatoryMap({
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
// Draw world map background (simplified) // Draw world map background (simplified)
ctx.fillStyle = '#e0e0e0'; ctx.fillStyle = '#f5f5f5';
ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillRect(0, 0, canvas.width, canvas.height);
// Draw grid lines for better visualization // Draw grid lines for better visualization
ctx.strokeStyle = '#ffffff'; ctx.strokeStyle = '#e5e5e5';
ctx.lineWidth = 0.5; ctx.lineWidth = 1;
// Horizontal grid lines // Horizontal grid lines
for (let y = 0; y < canvas.height; y += 30) { for (let y = 0; y < canvas.height; y += 40) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(0, y); ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y); ctx.lineTo(canvas.width, y);
@ -63,7 +63,7 @@ export function ObservatoryMap({
} }
// Vertical grid lines // Vertical grid lines
for (let x = 0; x < canvas.width; x += 30) { for (let x = 0; x < canvas.width; x += 40) {
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(x, 0); ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height); ctx.lineTo(x, canvas.height);
@ -73,26 +73,30 @@ export function ObservatoryMap({
// Draw country markers (in random positions) // Draw country markers (in random positions)
countries.forEach((country, index) => { countries.forEach((country, index) => {
// Generate random positions (in a real app, we would use actual coordinates) // Generate random positions (in a real app, we would use actual coordinates)
const x = (index * 50 + 100) % (canvas.width - 50); const x = (index * 60 + 100) % (canvas.width - 80);
const y = 50 + Math.floor(index / 5) * 50; const y = 60 + Math.floor(index / 4) * 70;
// Draw marker // Draw marker
ctx.beginPath(); ctx.beginPath();
ctx.arc(x, y, country.count > 5 ? 10 : (country.count > 2 ? 7 : 5), 0, Math.PI * 2); ctx.arc(x, y, country.count > 5 ? 8 : (country.count > 2 ? 6 : 4), 0, Math.PI * 2);
// Highlight selected country // Highlight selected country
if (selectedCountry === country.name) { if (selectedCountry === country.name) {
ctx.fillStyle = '#3b82f6'; ctx.fillStyle = '#3b82f6';
ctx.strokeStyle = '#2563eb';
} else { } else {
ctx.fillStyle = '#ef4444'; ctx.fillStyle = '#f87171';
ctx.strokeStyle = '#ef4444';
} }
ctx.fill(); ctx.fill();
ctx.lineWidth = 1;
ctx.stroke();
// Draw country name // Draw country name
ctx.fillStyle = '#000000'; ctx.fillStyle = '#374151';
ctx.font = '12px Arial'; ctx.font = '12px Inter, system-ui, sans-serif';
ctx.fillText(country.name, x + 12, y + 4); ctx.fillText(country.name, x + 14, y + 4);
// Store coordinates for click detection // Store coordinates for click detection
country.x = x; country.x = x;
@ -130,14 +134,14 @@ export function ObservatoryMap({
}, [countries, selectedCountry, onCountrySelect]); }, [countries, selectedCountry, onCountrySelect]);
return ( return (
<div className="w-full h-full bg-gray-100 rounded-lg relative"> <div className="w-full h-full bg-gray-50 relative">
<canvas <canvas
ref={canvasRef} ref={canvasRef}
className="w-full h-full rounded-lg" className="w-full h-full"
/> />
{countries.length === 0 && ( {countries.length === 0 && (
<div className="absolute inset-0 flex items-center justify-center"> <div className="absolute inset-0 flex items-center justify-center">
<p className="text-gray-500">No countries detected in the news</p> <p className="text-gray-400 text-center">No countries detected in the news</p>
</div> </div>
)} )}
</div> </div>

203
components/observatory/observatory-view.tsx
View File

@ -56,7 +56,8 @@ export function ObservatoryView() {
// In a real app, we would use NLP or a more sophisticated technique // In a real app, we would use NLP or a more sophisticated technique
const countries = [ const countries = [
'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China', 'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China',
'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain' 'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain',
'Sudan', 'New York', 'United Nations'
]; ];
const result: Record<string, NewsItem[]> = {}; const result: Record<string, NewsItem[]> = {};
@ -115,118 +116,112 @@ export function ObservatoryView() {
const countries = Object.keys(countriesMap); const countries = Object.keys(countriesMap);
return ( return (
<div className="container mx-auto px-4 py-8"> <div className="container mx-auto px-4 py-2">
<div className="flex flex-col space-y-6"> {/* Header */}
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg"> <div className="flex items-center justify-between bg-white rounded-lg shadow px-4 py-3 mb-4">
<CardHeader className="pb-2 border-b border-gray-100"> <h1 className="text-xl font-medium flex items-center gap-2">
<div className="flex justify-between items-center"> <Globe className="h-5 w-5 text-gray-600" />
<CardTitle className="text-2xl font-semibold text-gray-800 flex items-center gap-2"> News Observatory
<Globe className="h-6 w-6 text-gray-600" /> </h1>
News Observatory <Button
</CardTitle> variant="ghost"
<Button size="sm"
variant="ghost" onClick={fetchNews}
size="sm" className="flex items-center"
onClick={fetchNews} >
className="h-8 px-2 rounded-full" <RefreshCw className="h-4 w-4 mr-2" />
> Refresh
<RefreshCw className="h-4 w-4 mr-2" /> </Button>
Refresh </div>
</Button>
</div>
</CardHeader>
</Card>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6"> {/* Main Content */}
{/* News Feed Section */} <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
<div className="lg:col-span-2"> {/* News Feed Section - Narrower */}
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full"> <div className="lg:col-span-2">
<CardHeader className="pb-2 border-b border-gray-100"> <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
<CardTitle className="text-lg font-semibold text-gray-800"> <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
{selectedCountry ? `News about ${selectedCountry}` : 'Latest News'} <CardTitle className="text-lg font-medium">
<span className="text-sm font-normal ml-2 text-gray-500"> {selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
({filteredNews.length} articles) <span className="text-sm font-normal ml-2 text-gray-500">
</span> ({filteredNews.length} articles)
</CardTitle> </span>
</CardHeader> </CardTitle>
<CardContent className="p-4"> </CardHeader>
<div className="space-y-4 max-h-[calc(100vh-20rem)] overflow-y-auto pr-2"> <CardContent className="p-0">
{filteredNews.length === 0 ? ( <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
<p className="text-gray-500 text-center py-10">No news available</p> {filteredNews.length === 0 ? (
) : ( <p className="text-gray-500 text-center py-10">No news available</p>
filteredNews.map(item => ( ) : (
<div className="divide-y divide-gray-100">
{filteredNews.map(item => (
<div <div
key={item.id} key={item.id}
className="p-4 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200" className="p-4 hover:bg-gray-50 transition-colors cursor-pointer"
onClick={() => window.open(item.url, '_blank')} onClick={() => window.open(item.url, '_blank')}
> >
<div className="flex flex-col gap-1"> <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
<div className="flex items-center justify-between text-xs"> <span>{item.displayDate}</span>
<span className="text-gray-500">{item.displayDate}</span> <span>{item.source}</span>
<span className="text-gray-500">{item.source}</span>
</div>
<h3 className="text-md font-medium text-gray-800" title={item.title}>
{item.title}
</h3>
<p className="text-sm text-gray-600 mt-1">
{item.description}
</p>
</div> </div>
<h3 className="text-base font-medium text-gray-800 mb-1">
{item.title}
</h3>
<p className="text-sm text-gray-600 line-clamp-2">
{item.description}
</p>
</div> </div>
)) ))}
)} </div>
</div> )}
</CardContent> </div>
</Card> </CardContent>
</div> </Card>
</div>
{/* Map Section */} {/* Map Section - Wider */}
<div className="lg:col-span-1"> <div className="lg:col-span-3">
<Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-full"> <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
<CardHeader className="pb-2 border-b border-gray-100"> <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
<CardTitle className="text-lg font-semibold text-gray-800"> <CardTitle className="text-lg font-medium">
World Map World Map
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-0">
{/* Map Placeholder */} {/* Map Container */}
<div <div className="h-[500px]">
className="bg-gray-100 rounded-lg h-[300px] mb-4" <ObservatoryMap
> countries={Object.entries(countriesMap).map(([name, items]) => ({
<ObservatoryMap name,
countries={Object.entries(countriesMap).map(([name, items]) => ({ count: items.length
name, }))}
count: items.length onCountrySelect={handleCountrySelect}
}))} selectedCountry={selectedCountry}
onCountrySelect={handleCountrySelect} />
selectedCountry={selectedCountry} </div>
/>
</div>
{/* Countries List */} {/* Countries List */}
<div className="mt-4"> <div className="px-4 py-3 border-t border-gray-100">
<h4 className="text-md font-medium mb-2">Mentioned Countries:</h4> <h4 className="text-sm font-medium mb-2">Mentioned Countries:</h4>
{countries.length === 0 ? ( {countries.length === 0 ? (
<p className="text-gray-500">No countries detected</p> <p className="text-sm text-gray-500">No countries detected</p>
) : ( ) : (
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{countries.map(country => ( {countries.map(country => (
<Button <Button
key={country} key={country}
variant={selectedCountry === country ? "default" : "outline"} variant={selectedCountry === country ? "default" : "outline"}
size="sm" size="sm"
onClick={() => handleCountrySelect(country)} onClick={() => handleCountrySelect(country)}
className="text-xs" className="text-xs"
> >
{country} ({countriesMap[country].length}) {country} ({countriesMap[country].length})
</Button> </Button>
))} ))}
</div> </div>
)} )}
</div> </div>
</CardContent> </CardContent>
</Card> </Card>
</div>
</div> </div>
</div> </div>
</div> </div>