observatory

components/observatory/observatory-map.tsx

@@ -47,7 +47,7 @@ export function ObservatoryMap({
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     
     // Draw world map background (simplified)
-    ctx.fillStyle = '#f5f5f5';
+    ctx.fillStyle = '#f9f9f9';
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     
     // Draw grid lines for better visualization
@@ -55,7 +55,7 @@ export function ObservatoryMap({
     ctx.lineWidth = 1;
     
     // Horizontal grid lines
-    for (let y = 0; y < canvas.height; y += 40) {
+    for (let y = 0; y < canvas.height; y += 50) {
       ctx.beginPath();
       ctx.moveTo(0, y);
       ctx.lineTo(canvas.width, y);
@@ -63,40 +63,82 @@ export function ObservatoryMap({
     }
     
     // Vertical grid lines
-    for (let x = 0; x < canvas.width; x += 40) {
+    for (let x = 0; x < canvas.width; x += 50) {
       ctx.beginPath();
       ctx.moveTo(x, 0);
       ctx.lineTo(x, canvas.height);
       ctx.stroke();
     }
     
-    // Draw country markers (in random positions)
+    // Draw country markers at more fixed positions
-    countries.forEach((country, index) => {
+    countries.forEach((country) => {
-      // Generate random positions (in a real app, we would use actual coordinates)
+      // Position based on country name (simplified)
-      const x = (index * 60 + 100) % (canvas.width - 80);
+      let x, y;
-      const y = 60 + Math.floor(index / 4) * 70;
+      
+      // Very simple positioning logic
+      switch(country.name) {
+        case 'Sudan':
+          x = canvas.width * 0.55;
+          y = canvas.height * 0.45;
+          break;
+        case 'Ukraine':
+          x = canvas.width * 0.65;
+          y = canvas.height * 0.25;
+          break;
+        case 'USA':
+        case 'New York':
+          x = canvas.width * 0.25;
+          y = canvas.height * 0.35;
+          break;
+        case 'UK':
+          x = canvas.width * 0.45;
+          y = canvas.height * 0.25;
+          break;
+        case 'France':
+          x = canvas.width * 0.48;
+          y = canvas.height * 0.30;
+          break;
+        case 'China':
+          x = canvas.width * 0.75;
+          y = canvas.height * 0.35;
+          break;
+        case 'Russia':
+          x = canvas.width * 0.70;
+          y = canvas.height * 0.20;
+          break;
+        case 'India':
+          x = canvas.width * 0.70;
+          y = canvas.height * 0.40;
+          break;
+        case 'Brazil':
+          x = canvas.width * 0.35;
+          y = canvas.height * 0.60;
+          break;
+        case 'Australia':
+          x = canvas.width * 0.80;
+          y = canvas.height * 0.65;
+          break;
+        default:
+          // Random position for other countries
+          x = 100 + Math.random() * (canvas.width - 200);
+          y = 100 + Math.random() * (canvas.height - 200);
+      }
       
       // Draw marker
       ctx.beginPath();
-      ctx.arc(x, y, country.count > 5 ? 8 : (country.count > 2 ? 6 : 4), 0, Math.PI * 2);
+      ctx.arc(x, y, 6, 0, Math.PI * 2);
       
-      // Highlight selected country
+      // Simple color
-      if (selectedCountry === country.name) {
+      ctx.fillStyle = country.name === 'Sudan' ? '#f87171' : '#cbd5e1'; 
-        ctx.fillStyle = '#3b82f6';
-        ctx.strokeStyle = '#2563eb';
-      } else {
-        ctx.fillStyle = '#f87171';
-        ctx.strokeStyle = '#ef4444';
-      }
       
       ctx.fill();
-      ctx.lineWidth = 1;
-      ctx.stroke();
       
-      // Draw country name
+      // Draw country name if it's Sudan or selected
-      ctx.fillStyle = '#374151';
+      if (country.name === 'Sudan' || country.name === selectedCountry) {
-      ctx.font = '12px Inter, system-ui, sans-serif';
+        ctx.fillStyle = '#374151';
-      ctx.fillText(country.name, x + 14, y + 4);
+        ctx.font = '12px system-ui, sans-serif';
+        ctx.fillText(country.name, x + 10, y + 4);
+      }
       
       // Store coordinates for click detection
       country.x = x;
@@ -116,7 +158,7 @@ export function ObservatoryMap({
             Math.pow(x - country.x, 2) + Math.pow(y - country.y, 2)
           );
           
-          if (distance <= 10) {
+          if (distance <= 8) {
             onCountrySelect(country.name);
             break;
           }
@@ -134,7 +176,7 @@ export function ObservatoryMap({
   }, [countries, selectedCountry, onCountrySelect]);
   
   return (
-    <div className="w-full h-full bg-gray-50 relative">
+    <div className="w-full h-full">
       <canvas 
         ref={canvasRef} 
         className="w-full h-full"

components/observatory/observatory-view.tsx

@@ -57,7 +57,7 @@ export function ObservatoryView() {
     const countries = [
       'France', 'USA', 'Canada', 'UK', 'Germany', 'Japan', 'China', 
       'India', 'Brazil', 'Australia', 'Russia', 'Italy', 'Spain',
-      'Sudan', 'New York', 'United Nations'
+      'Sudan', 'New York', 'United Nations', 'Ukraine'
     ];
     
     const result: Record<string, NewsItem[]> = {};
@@ -95,7 +95,7 @@ export function ObservatoryView() {
   // Loading state
   if (loading) {
     return (
-      <div className="w-full h-[calc(100vh-8rem)] flex items-center justify-center">
+      <div className="w-full h-[calc(100vh-2rem)] flex items-center justify-center">
         <RefreshCw className="h-10 w-10 animate-spin text-gray-400" />
       </div>
     );
@@ -104,7 +104,7 @@ export function ObservatoryView() {
   // Error state
   if (error) {
     return (
-      <div className="w-full h-[calc(100vh-8rem)] flex flex-col items-center justify-center">
+      <div className="w-full h-[calc(100vh-2rem)] flex flex-col items-center justify-center">
         <p className="text-red-500 mb-4">{error}</p>
         <Button onClick={fetchNews}>Retry</Button>
       </div>
@@ -113,115 +113,72 @@ export function ObservatoryView() {
 
   const filteredNews = getFilteredNews();
   const countriesMap = extractCountries(news);
-  const countries = Object.keys(countriesMap);
 
   return (
-    <div className="container mx-auto px-4 py-2">
+    <div className="w-full h-[calc(100vh-2rem)] bg-[#f5f4ef] pt-16 px-12">
-      {/* Header */}
-      <div className="flex items-center justify-between bg-white rounded-lg shadow px-4 py-3 mb-4">
-        <h1 className="text-xl font-medium flex items-center gap-2">
-          <Globe className="h-5 w-5 text-gray-600" />
-          News Observatory
-        </h1>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={fetchNews}
-          className="flex items-center"
-        >
-          <RefreshCw className="h-4 w-4 mr-2" />
-          Refresh
-        </Button>
-      </div>
-
       {/* Main Content */}
-      <div className="grid grid-cols-1 lg:grid-cols-5 gap-4">
+      <div className="grid grid-cols-2 gap-4 h-[calc(100vh-6rem)]">
-        {/* News Feed Section - Narrower */}
+        {/* News Feed Section */}
-        <div className="lg:col-span-2">
+        <div>
-          <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
+          <div className="bg-white rounded-lg overflow-hidden h-full flex flex-col">
-            <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
+            <div className="px-4 py-3 border-b border-gray-100">
-              <CardTitle className="text-lg font-medium">
+              <div className="flex items-center justify-between">
-                {selectedCountry ? `News about ${selectedCountry}` : 'Latest News'}
+                <h2 className="text-lg font-medium">
-                <span className="text-sm font-normal ml-2 text-gray-500">
+                  Latest News
-                  ({filteredNews.length} articles)
+                  <span className="text-sm font-normal ml-2 text-gray-500">
-                </span>
+                    ({filteredNews.length} articles)
-              </CardTitle>
+                  </span>
-            </CardHeader>
+                </h2>
-            <CardContent className="p-0">
+              </div>
-              <div className="max-h-[calc(100vh-12rem)] overflow-y-auto">
+            </div>
+            <div className="overflow-y-auto flex-grow">
+              <div className="divide-y divide-gray-100">
                 {filteredNews.length === 0 ? (
                   <p className="text-gray-500 text-center py-10">No news available</p>
                 ) : (
-                  <div className="divide-y divide-gray-100">
+                  filteredNews.map(item => (
-                    {filteredNews.map(item => (
+                    <div
-                      <div
+                      key={item.id}
-                        key={item.id}
+                      className="px-4 py-5 hover:bg-gray-50 transition-colors cursor-pointer"
-                        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 items-center justify-between text-xs text-gray-500 mb-1">
-                        <div className="flex items-center justify-between text-xs text-gray-500 mb-1">
+                        <span>{item.displayDate}</span>
-                          <span>{item.displayDate}</span>
+                        <span>Unknown</span>
-                          <span>{item.source}</span>
-                        </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>
-                    ))}
+                      <h3 className="text-base font-medium text-gray-800 mb-1">
-                  </div>
+                        {item.title}
+                      </h3>
+                      <p className="text-sm text-gray-600 line-clamp-2">
+                        {item.description}
+                      </p>
+                    </div>
+                  ))
                 )}
               </div>
-            </CardContent>
+            </div>
-          </Card>
+          </div>
         </div>
 
-        {/* Map Section - Wider */}
+        {/* Map Section */}
-        <div className="lg:col-span-3">
+        <div>
-          <Card className="bg-white shadow border-0 rounded-lg overflow-hidden">
+          <div className="bg-white rounded-lg overflow-hidden h-full flex flex-col">
-            <CardHeader className="px-4 py-3 border-b border-gray-100 bg-white">
+            <div className="px-4 py-3 border-b border-gray-100">
-              <CardTitle className="text-lg font-medium">
+              <div className="flex items-center justify-between">
-                World Map
+                <h2 className="text-lg font-medium">World Map</h2>
-              </CardTitle>
-            </CardHeader>
-            <CardContent className="p-0">
-              {/* Map Container */}
-              <div className="h-[500px]">
-                <ObservatoryMap 
-                  countries={Object.entries(countriesMap).map(([name, items]) => ({
-                    name,
-                    count: items.length
-                  }))}
-                  onCountrySelect={handleCountrySelect}
-                  selectedCountry={selectedCountry}
-                />
               </div>
-
+            </div>
-              {/* Countries List */}
+            <div className="flex-grow">
-              <div className="px-4 py-3 border-t border-gray-100">
+              <ObservatoryMap 
-                <h4 className="text-sm font-medium mb-2">Mentioned Countries:</h4>
+                countries={Object.entries(countriesMap).map(([name, items]) => ({
-                {countries.length === 0 ? (
+                  name,
-                  <p className="text-sm text-gray-500">No countries detected</p>
+                  count: items.length
-                ) : (
+                }))}
-                  <div className="flex flex-wrap gap-2">
+                onCountrySelect={handleCountrySelect}
-                    {countries.map(country => (
+                selectedCountry={selectedCountry}
-                      <Button
+              />
-                        key={country}
+            </div>
-                        variant={selectedCountry === country ? "default" : "outline"}
+          </div>
-                        size="sm"
-                        onClick={() => handleCountrySelect(country)}
-                        className="text-xs"
-                      >
-                        {country} ({countriesMap[country].length})
-                      </Button>
-                    ))}
-                  </div>
-                )}
-              </div>
-            </CardContent>
-          </Card>
         </div>
       </div>
     </div>