+
`;
+ } else {
+ return `π¬ Detailed Salinity Analysis
+ +
+
+
+ Highest Salinity: ${highestSalinityProfile.salinityMax} PSU
+ Location: ${highestSalinityProfile.latitude}Β°, ${highestSalinityProfile.longitude}Β°
+ Profile: ${highestSalinityProfile.id} (Float ${highestSalinityProfile.floatWmoId})
+ Date: ${new Date(highestSalinityProfile.date).toLocaleDateString()}
+
+
+
+ Temperature: ${highestSalinityProfile.tempMin}Β°C - ${highestSalinityProfile.tempMax}Β°C
+ Depth: ~${Math.round((highestSalinityProfile.maxPressure || 0) * 1.02)}m
+
+ Analysis: High salinity values indicate strong evaporation processes. This measurement represents significant ocean-atmosphere interaction in this region.
+
+
+
`;
+ }
+ }
+
+ // Handle temperature queries
+ if (input.includes('temperature') && (input.includes('highest') || input.includes('maximum'))) {
+ const highestTempProfile = argoData.reduce((max, profile) => {
+ return (profile.tempMax || 0) > (max.tempMax || 0) ? profile : max;
+ });
+
+ return `π Highest Salinity Found
+ +
+
+ Value: ${highestSalinityProfile.salinityMax} PSU
+ Location: ${highestSalinityProfile.latitude}Β°, ${highestSalinityProfile.longitude}Β°
+ Date: ${new Date(highestSalinityProfile.date).toLocaleDateString()}
+ Temperature: ${highestSalinityProfile.tempMin}Β°C - ${highestSalinityProfile.tempMax}Β°C
+
+
`;
+ }
+
+ // Handle depth/pressure queries
+ if (input.includes('depth') || input.includes('pressure')) {
+ const deepestProfile = argoData.reduce((max, profile) => {
+ return (profile.maxPressure || 0) > (max.maxPressure || 0) ? profile : max;
+ });
+
+ return `π‘οΈ Highest Temperature
+ +
+
+ Value: ${highestTempProfile.tempMax}Β°C
+ Location: ${highestTempProfile.latitude}Β°, ${highestTempProfile.longitude}Β°
+ Date: ${new Date(highestTempProfile.date).toLocaleDateString()}
+ Salinity: ${highestTempProfile.salinityMin} - ${highestTempProfile.salinityMax} PSU
+
+
`;
+ }
+
+ // Handle location queries
+ if (input.includes('arabian sea') || input.includes('indian ocean')) {
+ const arabianSeaProfiles = argoData.filter(profile =>
+ profile.latitude > 10 && profile.latitude < 25 &&
+ profile.longitude > 60 && profile.longitude < 75
+ );
+
+ if (arabianSeaProfiles.length > 0) {
+ const avgSalinityMin = Math.min(...arabianSeaProfiles.map(p => p.salinityMin || 0));
+ const avgSalinityMax = Math.max(...arabianSeaProfiles.map(p => p.salinityMax || 0));
+
+ return `π Deepest Measurement
+ +
+
+ Depth: ~${Math.round((deepestProfile.maxPressure || 0) * 1.02)}m (${deepestProfile.maxPressure} dbar)
+ Location: ${deepestProfile.latitude}Β°, ${deepestProfile.longitude}Β°
+ Temperature: ${deepestProfile.tempMin}Β°C - ${deepestProfile.tempMax}Β°C
+
+
`;
+ } else {
+ return `β No Arabian Sea profiles found in current dataset.`;
+ }
+ }
+
+ // Handle count queries
+ if (input.includes('how many') || input.includes('count')) {
+ return `π Arabian Sea Data
+ +
+
+ Profiles Found: ${arabianSeaProfiles.length}
+ Salinity Range: ${avgSalinityMin.toFixed(2)} - ${avgSalinityMax.toFixed(2)} PSU
+ Active Floats: ${new Set(arabianSeaProfiles.map(p => p.floatWmoId)).size}
+ Region: 10Β°N-25Β°N, 60Β°E-75Β°E
+
+
`;
+ }
+
+ // Default response
+ return `π‘ Ask me about ocean data - salinity, temperature, depth, or regional profiles.`;
+ };
+
+ // Generate detailed researcher-level response for salinity queries
+ const generateResearcherSalinityResponse = (profile: ArgoProfile): string => {
+ const region = getOceanRegion(profile.latitude, profile.longitude);
+ const depthMeters = Math.round((profile.maxPressure || 0) * 1.02);
+
+ return `π§ͺ Comprehensive Salinity Analysis Report
+
+EXECUTIVE SUMMARY
+Upon reviewing the ARGO float dataset, the highest recorded salinity is ${profile.salinityMax} PSU observed in profile ${profile.id} of float ${profile.floatWmoId}, documented on ${new Date(profile.date).toLocaleDateString()}.
+
+LOCATION AND GEOGRAPHIC CONTEXT
+
+Coordinates & Position:
+β’ Latitude: ${profile.latitude}Β°
+β’ Longitude: ${profile.longitude}Β°
+β’ Ocean Region: ${region}
+β’ Profile Details: ARGO profile ${profile.cycleNumber} of float ${profile.floatWmoId}
+
+HYDROGRAPHIC DATA PROFILE
+
+Measurement Specifications:
+β’ Salinity Range: ${profile.salinityMin} β ${profile.salinityMax} PSU
+β’ Temperature Range: ${profile.tempMin}Β°C β ${profile.tempMax}Β°C
+β’ Maximum Pressure: ${profile.maxPressure} dbar (β${depthMeters}m depth)
+β’ Sampling Date: ${new Date(profile.date).toLocaleDateString()}
+
+OCEANOGRAPHIC SIGNIFICANCE & ANALYSIS
+
+Salinity Characteristics:
+This profile records exceptionally high salinity values. PSU values above ${(profile.salinityMax || 0) > 36 ? '36' : '35'} are characteristic of ${region === 'Arabian Sea' ? 'the Arabian Sea during summer monsoon periods, where intense evaporation creates hypersaline surface waters' : 'regions with high evaporation rates or specific water mass characteristics'}.
+
+Temperature-Salinity Relationship:
+The temperature range (${profile.tempMin}Β°Cβ${profile.tempMax}Β°C) indicates ${profile.tempMax && profile.tempMax > 25 ? 'tropical surface heating with cooler subsurface waters, suggesting strong thermal stratification' : 'cooler water masses typical of higher latitudes or deeper layers'}.
+
+Depth & Pressure Context:
+Maximum sampling depth of ${profile.maxPressure} dbar indicates ${(profile.maxPressure || 0) > 1500 ? 'deep water column profiling capturing both surface and intermediate water mass characteristics' : 'shallow to intermediate depth sampling focusing on upper ocean dynamics'}.
+
+SCIENTIFIC IMPLICATIONS & CONCLUSION
+
+Regional Context:
+This observation represents significant ocean-atmosphere interaction, particularly relevant for ${region === 'Arabian Sea' ? 'monsoon climatology and regional circulation studies. The high salinity values are consistent with intense evaporation during pre-monsoon periods' : 'understanding local hydrographic processes and water mass formation in this oceanic region'}.
+
+Research Applications:
+β’ Climate modeling and ocean-atmosphere interaction studies
+β’ Regional circulation pattern analysis
+β’ Water mass formation and transport investigations
+β’ ${region === 'Arabian Sea' ? 'Monsoon dynamics and seasonal variability research' : 'Local oceanographic process characterization'}
+
+Data Quality Assessment:
+Profile ${profile.id} provides high-quality measurements suitable for advanced oceanographic research and climate studies.`;
+ };
+
+ // Helper function to determine ocean region
+ const getOceanRegion = (lat: number, lon: number): string => {
+ if (lat > 10 && lat < 30 && lon > 50 && lon < 80) return 'Arabian Sea';
+ if (lat > -10 && lat < 30 && lon > 80 && lon < 100) return 'Bay of Bengal';
+ if (lat > -40 && lat < 20 && lon > 20 && lon < 120) return 'Indian Ocean';
+ if (lat > -60 && lat < -40) return 'Southern Ocean';
+ if (lat > 40) return 'Northern Ocean';
+ return 'Open Ocean';
+ };
+
const generateBotResponse = (userInput: string): string => {
const input = userInput.toLowerCase();
+ // Check if we have ARGO data loaded and if this is an ARGO-related query
+ if (csvUploaded && argoData.length > 0) {
+ // Check for ARGO-specific keywords
+ if (input.includes('argo') || input.includes('profile') || input.includes('float') ||
+ input.includes('salinity') || input.includes('temperature') || input.includes('depth') ||
+ input.includes('pressure') || input.includes('highest') || input.includes('maximum') ||
+ input.includes('minimum') || input.includes('location') || input.includes('arabian') ||
+ input.includes('indian ocean') || input.includes('how many') || input.includes('count')) {
+ return generateArgoResponse(userInput);
+ }
+ }
+
+ // Simplified fallback responses
if (input.includes('temperature') || input.includes('temp')) {
- return 'The current sea surface temperature in the Indian Ocean ranges from 26Β°C to 30Β°C. Would you like specific data for a particular region?';
+ return csvUploaded ? generateArgoResponse(userInput) : 'π‘οΈ Sea temperature: 26-30Β°C in Indian Ocean. Need specific region?';
} else if (input.includes('salinity')) {
- return 'Ocean salinity levels in our monitored areas range from 34.8 to 35.8 PSU. This data is collected by our Argo float network.';
+ return csvUploaded ? generateArgoResponse(userInput) : 'π§ Ocean salinity: 34.8-35.8 PSU. Data from Argo floats.';
} else if (input.includes('float') || input.includes('argo')) {
- return 'We currently have 10 Argo floats deployed across the Indian Ocean. 7 are active and 3 are inactive. Each float collects temperature, salinity, and depth data.';
+ return csvUploaded ? generateArgoResponse(userInput) : 'π°οΈ 10 Argo floats deployed. 7 active, 3 inactive.';
} else if (input.includes('weather') || input.includes('storm')) {
- return 'Current weather conditions are calm with moderate wave heights. No major storms detected in the region. Would you like a detailed forecast?';
+ return 'π€οΈ Current conditions: Calm seas, moderate waves. No storms detected.';
} else if (input.includes('data') || input.includes('information')) {
- return 'I can provide oceanographic data including temperature, salinity, depth measurements, float locations, and weather conditions. What specific data are you looking for?';
+ return csvUploaded ?
+ `π Ocean data loaded. Ask about temperature, salinity, or depth.` :
+ 'π I can provide ocean data: temperature, salinity, depth, weather. What do you need?';
} else {
- return 'I\'m here to help with oceanographic data and analysis. You can ask me about water temperature, salinity levels, Argo float status, weather conditions, or any other ocean-related data.';
+ return csvUploaded ?
+ `π¬ Ocean Assistant ready! Ask me anything about ocean data.` :
+ 'π¬ Hi! Ask me about ocean temperature, salinity, Argo floats, or weather conditions.';
}
};
@@ -81,23 +688,80 @@ const Chatbot: React.FC = () => {
}
};
+ // Export functions
+ const exportToCSV = () => {
+ const csvContent = messages.map(msg => {
+ const timestamp = msg.timestamp.toLocaleString();
+ const sender = msg.sender === 'bot' ? 'Dolphin AI' : 'User';
+ const text = msg.text.replace(/"/g, '""'); // Escape quotes
+ return `"${timestamp}","${sender}","${text}"`;
+ }).join('\n');
+
+ const headers = '"Timestamp","Sender","Message"\n';
+ const fullCSV = headers + csvContent;
+
+ const blob = new Blob([fullCSV], { type: 'text/csv;charset=utf-8;' });
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = `dolphin-chat-${new Date().toISOString().split('T')[0]}.csv`;
+ link.click();
+ setShowExportDropdown(false);
+ };
+
+ const exportToPDF = () => {
+ // Create a simple HTML structure for PDF conversion
+ const htmlContent = `
+
+
+
+ π Dataset Overview
+ +
+
+ Total Profiles: ${argoData.length}
+ Active Floats: ${new Set(argoData.map(p => p.floatWmoId)).size}
+ Coverage: Global ocean regions
+
+
+ ${messages.map(msg => `
+
+ `).join('')}
+
+
+ `;
+
+ const blob = new Blob([htmlContent], { type: 'text/html' });
+ const link = document.createElement('a');
+ link.href = URL.createObjectURL(blob);
+ link.download = `dolphin-chat-${new Date().toISOString().split('T')[0]}.html`;
+ link.click();
+ setShowExportDropdown(false);
+ };
+
return (
π¬ Dolphin AI Chat Export
+Generated on ${new Date().toLocaleString()}
+
- 
-
+
-
-
-
-
-
-
-
Dolphin
- β Online + Ocean Data Assistant
-
)}
-
+
-
-
-
-
-
-
-
);
diff --git a/react-dashboard/src/components/Dashboard/Dashboard.css b/react-dashboard/src/components/Dashboard/Dashboard.css
index 4369fd6..658af32 100644
--- a/react-dashboard/src/components/Dashboard/Dashboard.css
+++ b/react-dashboard/src/components/Dashboard/Dashboard.css
@@ -6,9 +6,70 @@
overflow: hidden;
}
+.sidebar-container {
+ flex-shrink: 0;
+ background: #f8fafc;
+ border-right: 1px solid #e5e7eb;
+ overflow: hidden;
+}
+
+.right-panel-container {
+ flex-shrink: 0;
+ background: #ffffff;
+ border-left: 1px solid #e5e7eb;
+ overflow: hidden;
+}
+
.main-content {
flex: 1;
position: relative;
background: white;
overflow: hidden;
+ min-width: 400px;
+}
+
+.resize-handle {
+ width: 8px;
+ cursor: col-resize;
+ background: rgba(99, 102, 241, 0.1);
+ position: relative;
+ z-index: 10;
+ transition: background-color 0.2s ease;
+ flex-shrink: 0;
+ user-select: none;
+}
+
+.resize-handle:hover {
+ background: rgba(99, 102, 241, 0.3);
+}
+
+.resize-handle:active {
+ background: rgba(99, 102, 241, 0.5);
+}
+
+.left-handle {
+ border-right: 1px solid #e5e7eb;
+}
+
+.right-handle {
+ border-left: 1px solid #e5e7eb;
+}
+
+/* Add visual indicator on hover */
+.resize-handle::after {
+ content: '';
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 2px;
+ height: 40px;
+ background: #d1d5db;
+ border-radius: 1px;
+ opacity: 0;
+ transition: opacity 0.2s ease;
+}
+
+.resize-handle:hover::after {
+ opacity: 1;
}
diff --git a/react-dashboard/src/components/Dashboard/Dashboard.tsx b/react-dashboard/src/components/Dashboard/Dashboard.tsx
index 510976b..f56ebe6 100644
--- a/react-dashboard/src/components/Dashboard/Dashboard.tsx
+++ b/react-dashboard/src/components/Dashboard/Dashboard.tsx
@@ -1,17 +1,90 @@
-import React from 'react';
+import React, { useState, useRef, useCallback } from 'react';
import './Dashboard.css';
import Sidebar from '../Sidebar/Sidebar';
import MapView from '../Map/MapView';
import RightPanel from '../RightPanel/RightPanel';
const Dashboard: React.FC = () => {
+ const [leftWidth, setLeftWidth] = useState(350);
+ const [rightWidth, setRightWidth] = useState(320);
+ const isDragging = useRef<'left' | 'right' | null>(null);
+ const startX = useRef(0);
+ const startWidth = useRef(0);
+
+ const handleMouseDown = useCallback((side: 'left' | 'right') => (e: React.MouseEvent) => {
+ console.log('Mouse down on', side); // Debug log
+ e.preventDefault();
+ e.stopPropagation();
+ isDragging.current = side;
+ startX.current = e.clientX;
+ startWidth.current = side === 'left' ? leftWidth : rightWidth;
+ document.body.style.cursor = 'col-resize';
+ document.body.style.userSelect = 'none';
+ }, [leftWidth, rightWidth]);
+
+ const handleMouseMove = useCallback((e: MouseEvent) => {
+ if (!isDragging.current) return;
+
+ console.log('Mouse move, dragging:', isDragging.current); // Debug log
+ const deltaX = e.clientX - startX.current;
+
+ if (isDragging.current === 'left') {
+ const newWidth = Math.max(250, Math.min(600, startWidth.current + deltaX));
+ console.log('Setting left width to:', newWidth); // Debug log
+ setLeftWidth(newWidth);
+ } else if (isDragging.current === 'right') {
+ const newWidth = Math.max(250, Math.min(600, startWidth.current - deltaX));
+ console.log('Setting right width to:', newWidth); // Debug log
+ setRightWidth(newWidth);
+ }
+ }, []);
+
+ const handleMouseUp = useCallback(() => {
+ if (isDragging.current) {
+ isDragging.current = null;
+ document.body.style.cursor = '';
+ document.body.style.userSelect = '';
+ }
+ }, []);
+
+ React.useEffect(() => {
+ document.addEventListener('mousemove', handleMouseMove);
+ document.addEventListener('mouseup', handleMouseUp);
+ return () => {
+ document.removeEventListener('mousemove', handleMouseMove);
+ document.removeEventListener('mouseup', handleMouseUp);
+ };
+ }, [handleMouseMove, handleMouseUp]);
+
return (
@@ -196,31 +240,31 @@ const RightPanel: React.FC = () => {
@@ -232,7 +276,318 @@ const RightPanel: React.FC = () => {
)}
diff --git a/react-dashboard/src/components/Sidebar/Sidebar.css b/react-dashboard/src/components/Sidebar/Sidebar.css
index 748fd41..ec17a1a 100644
--- a/react-dashboard/src/components/Sidebar/Sidebar.css
+++ b/react-dashboard/src/components/Sidebar/Sidebar.css
@@ -1,12 +1,12 @@
.sidebar {
- width: 300px;
+ width: 100%;
+ height: 100%;
background: #ffffff;
margin: 0;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: hidden;
- border-right: 1px solid #e8eaed;
}
.sidebar .chatbot-container {
@@ -19,21 +19,21 @@
}
.sidebar-header {
- padding: 30px 20px 20px 20px;
+ padding: 16px 20px 12px 20px;
text-align: left;
}
.dolphin-title {
- font-size: 32px;
+ font-size: 24px;
font-weight: 400;
color: #1a1a1a;
margin: 0;
font-style: italic;
- letter-spacing: -0.5px;
+ letter-spacing: -0.3px;
}
.dolphin-avatar-section {
- padding: 0 20px 30px 20px;
+ padding: 0 20px 16px 20px;
display: flex;
justify-content: center;
}
diff --git a/react-dashboard/src/services/sharedDataService.ts b/react-dashboard/src/services/sharedDataService.ts
new file mode 100644
index 0000000..bfbe0f1
--- /dev/null
+++ b/react-dashboard/src/services/sharedDataService.ts
@@ -0,0 +1,166 @@
+// Shared data service for dashboard components
+export interface ArgoProfile {
+ latitude: number;
+ longitude: number;
+ temperature: number;
+ salinity: number;
+ pressure: number;
+ depth: number;
+ date: string;
+ platform: string;
+}
+
+export interface Float {
+ id: string;
+ lat: number;
+ lng: number;
+ temperature: number;
+ salinity: number;
+ depth: number;
+ status: 'active' | 'inactive';
+}
+
+class DataService {
+ private argoData: ArgoProfile[] = [];
+ private floatData: Float[] = [
+ { id: 'F001', lat: 18.9750, lng: 72.8258, temperature: 28.5, salinity: 35.2, depth: 100, status: 'active' },
+ { id: 'F002', lat: 13.0878, lng: 80.2785, temperature: 29.1, salinity: 35.8, depth: 150, status: 'active' },
+ { id: 'F003', lat: 22.5675, lng: 88.3700, temperature: 27.8, salinity: 34.9, depth: 200, status: 'inactive' },
+ { id: 'F004', lat: 8.0883, lng: 77.0595, temperature: 26.3, salinity: 35.1, depth: 180, status: 'active' },
+ { id: 'F005', lat: 15.4909, lng: 73.8278, temperature: 28.9, salinity: 35.5, depth: 120, status: 'active' },
+ { id: 'F006', lat: 11.0000, lng: 85.0000, temperature: 27.2, salinity: 35.0, depth: 140, status: 'active' },
+ { id: 'F007', lat: 6.9271, lng: 79.8612, temperature: 28.7, salinity: 35.3, depth: 110, status: 'inactive' },
+ { id: 'F008', lat: 12.0000, lng: 68.0000, temperature: 29.5, salinity: 35.7, depth: 95, status: 'active' },
+ { id: 'F009', lat: 4.2105, lng: 73.5074, temperature: 28.1, salinity: 35.4, depth: 160, status: 'active' },
+ { id: 'F010', lat: 16.0000, lng: 94.0000, temperature: 27.9, salinity: 34.8, depth: 130, status: 'inactive' },
+ ];
+
+ constructor() {
+ this.loadArgoData();
+ }
+
+ private async loadArgoData() {
+ try {
+ const response = await fetch('/data/chroma_2024-07.csv');
+ const csvText = await response.text();
+ this.argoData = this.parseArgoCSV(csvText);
+ } catch (error) {
+ console.log('CSV data not available, using float data');
+ }
+ }
+
+ private parseArgoCSV(csvText: string): ArgoProfile[] {
+ const lines = csvText.split('\n');
+ if (lines.length < 2) return [];
+
+ const headers = lines[0].split(',');
+ const profiles: ArgoProfile[] = [];
+
+ for (let i = 1; i < lines.length; i++) {
+ if (!lines[i].trim()) continue;
+
+ const values = this.parseCSVLine(lines[i]);
+ if (values.length < headers.length) continue;
+
+ try {
+ const profile: ArgoProfile = {
+ latitude: parseFloat(values[headers.indexOf('Latitude')] || values[0]),
+ longitude: parseFloat(values[headers.indexOf('Longitude')] || values[1]),
+ temperature: parseFloat(values[headers.indexOf('Temperature')] || values[2]),
+ salinity: parseFloat(values[headers.indexOf('Salinity')] || values[3]),
+ pressure: parseFloat(values[headers.indexOf('Pressure')] || values[4]),
+ depth: parseFloat(values[headers.indexOf('Depth')] || values[5]),
+ date: values[headers.indexOf('Date')] || values[6] || new Date().toISOString(),
+ platform: values[headers.indexOf('Platform')] || values[7] || 'Unknown'
+ };
+
+ if (!isNaN(profile.latitude) && !isNaN(profile.longitude)) {
+ profiles.push(profile);
+ }
+ } catch (error) {
+ continue;
+ }
+ }
+
+ return profiles;
+ }
+
+ private parseCSVLine(line: string): string[] {
+ const result = [];
+ let current = '';
+ let inQuotes = false;
+
+ for (let i = 0; i < line.length; i++) {
+ const char = line[i];
+
+ if (char === '"') {
+ inQuotes = !inQuotes;
+ } else if (char === ',' && !inQuotes) {
+ result.push(current.trim());
+ current = '';
+ } else {
+ current += char;
+ }
+ }
+
+ result.push(current.trim());
+ return result;
+ }
+
+ // Public methods for accessing data
+ getFloatData(): Float[] {
+ return this.floatData;
+ }
+
+ getArgoData(): ArgoProfile[] {
+ return this.argoData;
+ }
+
+ getCsvDataCount(): number {
+ return this.argoData.length;
+ }
+
+ getFloatCategories(): { active: number; inactive: number; total: number } {
+ const active = this.floatData.filter(f => f.status === 'active').length;
+ const inactive = this.floatData.filter(f => f.status === 'inactive').length;
+ return { active, inactive, total: 2 }; // 2 categories: active and inactive
+ }
+
+ getTemperatureData(): number[] {
+ if (this.argoData.length > 0) {
+ return this.argoData.slice(0, 7).map(d => d.temperature);
+ }
+ return this.floatData.slice(0, 7).map(f => f.temperature);
+ }
+
+ getSalinityData(): number[] {
+ if (this.argoData.length > 0) {
+ return this.argoData.slice(0, 7).map(d => d.salinity);
+ }
+ return this.floatData.slice(0, 7).map(f => f.salinity);
+ }
+
+ getDepthData(): number[] {
+ if (this.argoData.length > 0) {
+ return this.argoData.slice(0, 7).map(d => d.depth);
+ }
+ return this.floatData.slice(0, 7).map(f => f.depth);
+ }
+
+ getAverageTemperature(): number {
+ const temps = this.getTemperatureData();
+ return temps.reduce((sum, temp) => sum + temp, 0) / temps.length;
+ }
+
+ getAverageSalinity(): number {
+ const salinities = this.getSalinityData();
+ return salinities.reduce((sum, sal) => sum + sal, 0) / salinities.length;
+ }
+
+ getAverageDepth(): number {
+ const depths = this.getDepthData();
+ return depths.reduce((sum, depth) => sum + depth, 0) / depths.length;
+ }
+}
+
+export const dataService = new DataService();
{message.text}
+
{message.timestamp.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
@@ -131,14 +792,11 @@ const Chatbot: React.FC = () => {
{isTyping && (
-
-
+
-
-
-
-
-
-
@@ -159,13 +817,104 @@ const Chatbot: React.FC = () => {
value={inputText}
onChange={(e) => setInputText(e.target.value)}
onKeyPress={handleKeyPress}
- placeholder="Ask me about ocean data..."
+ placeholder={isListening ? "Listening..." : "Ocean Insights Now... "}
className="message-input"
rows={1}
+ disabled={isListening}
/>
+
+ {/* Export Button with Dropdown */}
+
+
+ {/* Voice Status Indicator */}
+ {isVoiceSupported && (isListening || isSpeaking) && (
+
+
+
+ {showExportDropdown && (
+
+
+ {/* Voice Controls */}
+ {isVoiceSupported && (
+ <>
+ {/* Original Voice Button */}
+
+
+ )}
+
+ {/* Speaker/Mute Button */}
+
+
+
+
+
+ )}
+
+ {isListening && (
+
+ )}
+
+ {/* Voice Not Supported Message */}
+ {!isVoiceSupported && (
+
+
+ Listening... Speak now
+
+ )}
+ {isSpeaking && (
+
+
+ Dolphin is speaking...
+
+ )}
+
+ π‘ Voice features require a modern browser (Chrome, Edge, Safari)
+
+ )}
-
);
};
diff --git a/react-dashboard/src/components/Map/MapView.css b/react-dashboard/src/components/Map/MapView.css
index da838db..d62252f 100644
--- a/react-dashboard/src/components/Map/MapView.css
+++ b/react-dashboard/src/components/Map/MapView.css
@@ -11,17 +11,17 @@
display: flex;
justify-content: space-between;
align-items: center;
- padding: 25px 35px;
+ padding: 12px 20px;
background: white;
border-bottom: 1px solid #f0f0f0;
}
.map-header h2 {
- font-size: 24px;
+ font-size: 18px;
font-weight: 600;
color: #1a1a1a;
margin: 0;
- letter-spacing: -0.5px;
+ letter-spacing: -0.3px;
}
.map-controls {
diff --git a/react-dashboard/src/components/Map/MapView.tsx b/react-dashboard/src/components/Map/MapView.tsx
index 3d249a0..338ad5c 100644
--- a/react-dashboard/src/components/Map/MapView.tsx
+++ b/react-dashboard/src/components/Map/MapView.tsx
@@ -68,11 +68,6 @@ const MapView: React.FC = () => {
+
+
+
+
+
Argo Float Locations - Indian Ocean Region
-
-
-
-
-
diff --git a/react-dashboard/src/components/RightPanel/RightPanel.css b/react-dashboard/src/components/RightPanel/RightPanel.css
index 753ba58..689fb4b 100644
--- a/react-dashboard/src/components/RightPanel/RightPanel.css
+++ b/react-dashboard/src/components/RightPanel/RightPanel.css
@@ -1,12 +1,12 @@
.right-panel {
- width: 300px;
+ width: 100%;
+ height: 100%;
background: white;
margin: 0;
box-shadow: none;
display: flex;
flex-direction: column;
overflow: hidden;
- border-left: 1px solid #e8eaed;
}
.panel-tabs {
@@ -288,3 +288,53 @@
gap: 10px;
}
}
+
+/* Charts section styling */
+.charts-section {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0;
+}
+
+.charts-content {
+ padding: 15px;
+}
+
+.charts-content h3 {
+ margin: 0 0 15px 0;
+ font-size: 18px;
+ font-weight: 600;
+ color: #1a1a1a;
+}
+
+.chart-container {
+ margin-bottom: 15px;
+ padding: 10px;
+ background: #f8f9fa;
+ border-radius: 6px;
+ border: 1px solid #e9ecef;
+}
+
+.chart-container h4 {
+ margin: 0 0 8px 0;
+ font-size: 14px;
+ font-weight: 500;
+ color: #495057;
+}
+
+.chart-svg {
+ width: 100%;
+ height: 170px;
+ background: white;
+ border-radius: 4px;
+ border: 1px solid #e9ecef;
+}
+
+.chart-svg circle {
+ cursor: pointer;
+ transition: r 0.2s ease;
+}
+
+.chart-svg circle:hover {
+ r: 5;
+}
diff --git a/react-dashboard/src/components/RightPanel/RightPanel.tsx b/react-dashboard/src/components/RightPanel/RightPanel.tsx
index 06c1f27..f587157 100644
--- a/react-dashboard/src/components/RightPanel/RightPanel.tsx
+++ b/react-dashboard/src/components/RightPanel/RightPanel.tsx
@@ -1,8 +1,52 @@
import React, { useState, useEffect } from 'react';
import './RightPanel.css';
+import { dataService } from '../../services/sharedDataService';
const RightPanel: React.FC = () => {
- const [activeTab, setActiveTab] = useState<'filters' | 'charts'>('filters');
+ const [activeTab, setActiveTab] = useState<'filters' | 'charts'>('charts');
+ const [dynamicStats, setDynamicStats] = useState({
+ categories: 2,
+ processed: 0,
+ active: 0,
+ inactive: 0,
+ csvCount: 0,
+ avgTemp: 0,
+ avgSalinity: 0,
+ avgDepth: 0
+ });
+
+ const [temperatureData, setTemperatureData] = useState([]);
+ const [salinityData, setSalinityData] = useState([]);
+ const [depthData, setDepthData] = useState([]);
+
+ // Load dynamic data
+ useEffect(() => {
+ const loadData = () => {
+ const floatCategories = dataService.getFloatCategories();
+ const csvCount = dataService.getCsvDataCount();
+
+ setDynamicStats({
+ categories: floatCategories.total,
+ processed: csvCount > 0 ? csvCount : dataService.getFloatData().length,
+ active: floatCategories.active,
+ inactive: floatCategories.inactive,
+ csvCount,
+ avgTemp: Math.round(dataService.getAverageTemperature() * 10) / 10,
+ avgSalinity: Math.round(dataService.getAverageSalinity() * 10) / 10,
+ avgDepth: Math.round(dataService.getAverageDepth())
+ });
+
+ setTemperatureData(dataService.getTemperatureData());
+ setSalinityData(dataService.getSalinityData());
+ setDepthData(dataService.getDepthData());
+ };
+
+ loadData();
+ // Reload data every 10 seconds to check for updates
+ const interval = setInterval(loadData, 10000);
+ return () => clearInterval(interval);
+ }, []);
+
const [dailyData, setDailyData] = useState([
{ day: 'D1', occurrences: 120 },
{ day: 'D2', occurrences: 180 },
@@ -57,18 +101,18 @@ const RightPanel: React.FC = () => {
return (
@@ -102,16 +146,16 @@ const RightPanel: React.FC = () => {
-
+
{activeTab === 'filters' && (
@@ -82,15 +126,15 @@ const RightPanel: React.FC = () => {
- 627
- Entries
+ {dynamicStats.categories}
+ Categories
- $165
- Resolved
+ {dynamicStats.processed}
+ Processed
- 35
+ {dynamicStats.inactive}
Pending
- 442
- Detection
+ {dynamicStats.active}
+ Active Floats
- $3.3
- Average Value
+ {dynamicStats.avgTemp}Β°C
+ Avg. Temp
- 2.5
- Detection Rate
+ {dynamicStats.avgSalinity}
+ Avg. Salinity
Summary
-
π
+ π‘οΈ
- 25.5 km
- Distance
+ {dynamicStats.avgTemp}Β°C
+ Temperature
- 25.4 km
- Depth
+ {dynamicStats.avgDepth}m
+ Avg Depth
- 25.2 km
- Temperature
+ {dynamicStats.avgSalinity}
+ Salinity
- 70.1 km
- Pressure
+ {dynamicStats.active}
+ Active
Data Visualization
-Advanced charts and analytics will be displayed here.
+ + {/* Temperature Chart */} +
+
+
+ {/* Salinity Chart */}
+ Temperature Profile (Β°C)
+ +
+
+
+ {/* Depth Chart */}
+ Salinity Profile (PSU)
+ +
+