feat: Add detailed logging for plot session creation and remove unused TabCoordinationDemo component
This commit is contained in:
parent
696b79ba0d
commit
e4908396be
|
|
@ -7090,8 +7090,78 @@
|
|||
"trigger_variable": null,
|
||||
"auto_started": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-08-15T18:58:33.217127",
|
||||
"level": "info",
|
||||
"event_type": "plot_session_created",
|
||||
"message": "Plot session 'UR29' created and started",
|
||||
"details": {
|
||||
"session_id": "plot_1_1755277113217_7",
|
||||
"variables": [
|
||||
"UR29_Brix",
|
||||
"UR29_ma",
|
||||
"AUX Blink_1.0S",
|
||||
"AUX Blink_1.6S"
|
||||
],
|
||||
"time_window": 36,
|
||||
"trigger_variable": null,
|
||||
"auto_started": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-08-15T19:01:07.918276",
|
||||
"level": "info",
|
||||
"event_type": "plot_session_created",
|
||||
"message": "Plot session 'Clock' created and started",
|
||||
"details": {
|
||||
"session_id": "Clock_1755277267917_8",
|
||||
"variables": [
|
||||
"AUX Blink_1.0S",
|
||||
"AUX Blink_1.6S"
|
||||
],
|
||||
"time_window": 10,
|
||||
"trigger_variable": null,
|
||||
"auto_started": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-08-15T19:05:09.401035",
|
||||
"level": "info",
|
||||
"event_type": "plot_session_created",
|
||||
"message": "Plot session 'UR29' created and started",
|
||||
"details": {
|
||||
"session_id": "plot_1_1755277509401_9",
|
||||
"variables": [
|
||||
"UR29_Brix",
|
||||
"UR29_ma",
|
||||
"AUX Blink_1.0S",
|
||||
"AUX Blink_1.6S"
|
||||
],
|
||||
"time_window": 36,
|
||||
"trigger_variable": null,
|
||||
"auto_started": true
|
||||
}
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-08-15T19:06:20.284691",
|
||||
"level": "info",
|
||||
"event_type": "plot_session_created",
|
||||
"message": "Plot session 'UR29' created and started",
|
||||
"details": {
|
||||
"session_id": "plot_1_1755277580284_10",
|
||||
"variables": [
|
||||
"UR29_Brix",
|
||||
"UR29_ma",
|
||||
"AUX Blink_1.0S",
|
||||
"AUX Blink_1.6S"
|
||||
],
|
||||
"time_window": 36,
|
||||
"trigger_variable": null,
|
||||
"auto_started": true
|
||||
}
|
||||
}
|
||||
],
|
||||
"last_updated": "2025-08-15T18:54:24.318797",
|
||||
"total_entries": 579
|
||||
"last_updated": "2025-08-15T19:06:20.284691",
|
||||
"total_entries": 583
|
||||
}
|
||||
|
|
@ -251,35 +251,6 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
|
|||
return false;
|
||||
}, [session]);
|
||||
|
||||
// Diagnostic function to help identify issues
|
||||
const runDiagnostics = useCallback(() => {
|
||||
console.log('🔍 Chart Diagnostics:', {
|
||||
chartExists: !!chartRef.current,
|
||||
canvasExists: !!canvasRef.current,
|
||||
sessionId: session?.session_id,
|
||||
sessionActive: session?.is_active,
|
||||
sessionPaused: session?.is_paused,
|
||||
health: chartHealthRef.current,
|
||||
datasets: chartRef.current?.data?.datasets?.length || 0,
|
||||
realtimeConfig: !!chartRef.current?.options?.scales?.x?.realtime
|
||||
});
|
||||
|
||||
// Check for common issues
|
||||
const issues = [];
|
||||
if (!chartRef.current) issues.push('Chart not initialized');
|
||||
if (!session?.is_active) issues.push('Session not active');
|
||||
if (session?.is_paused) issues.push('Session is paused');
|
||||
if (chartHealthRef.current.consecutiveErrors > 5) issues.push(`${chartHealthRef.current.consecutiveErrors} consecutive errors`);
|
||||
|
||||
if (issues.length > 0) {
|
||||
console.warn('⚠️ Issues detected:', issues);
|
||||
} else {
|
||||
console.log('✅ No issues detected');
|
||||
}
|
||||
|
||||
return issues;
|
||||
}, [session]);
|
||||
|
||||
// Load historical data from CSV files
|
||||
const loadHistoricalData = useCallback(async (variables, timeWindow) => {
|
||||
try {
|
||||
|
|
@ -1872,48 +1843,6 @@ const ChartjsPlot = ({ session, height = '400px' }) => {
|
|||
🔄 Reset Zoom
|
||||
</button>
|
||||
|
||||
{/* Auto-recovery button when chart health is poor */}
|
||||
{!chartHealthRef.current.isHealthy && (
|
||||
<>
|
||||
<button
|
||||
onClick={attemptAutoRecovery}
|
||||
style={{
|
||||
background: 'rgba(255, 140, 0, 0.9)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '11px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px'
|
||||
}}
|
||||
title="Restart chart (use when data stops loading)"
|
||||
>
|
||||
🚑 Fix Chart
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={runDiagnostics}
|
||||
style={{
|
||||
background: 'rgba(128, 128, 128, 0.9)',
|
||||
color: 'white',
|
||||
border: 'none',
|
||||
borderRadius: '4px',
|
||||
padding: '4px 8px',
|
||||
fontSize: '11px',
|
||||
cursor: 'pointer',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
gap: '4px'
|
||||
}}
|
||||
title="Show chart diagnostics in console"
|
||||
>
|
||||
🔍 Debug
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</Box>
|
||||
)}
|
||||
|
||||
|
|
|
|||
|
|
@ -522,12 +522,6 @@ export default function PlotRealtimeSession({
|
|||
<> | Trigger: {localConfig.trigger_variable}</>
|
||||
)}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.500" mt={1}>
|
||||
Tab: {browserTabId}
|
||||
{actualSessionId && actualSessionId !== plotDefinition.id && (
|
||||
<> | Session: {actualSessionId.substring(0, 40)}...</>
|
||||
)}
|
||||
</Text>
|
||||
</Box>
|
||||
<Spacer />
|
||||
<HStack>
|
||||
|
|
|
|||
|
|
@ -1,62 +0,0 @@
|
|||
import React from 'react'
|
||||
import { Box, Text, Badge, VStack, HStack, useColorModeValue } from '@chakra-ui/react'
|
||||
import { getTabCoordinator } from '../utils/TabCoordinator'
|
||||
|
||||
/**
|
||||
* TabCoordinationDemo - Componente de demostración para mostrar el estado de coordinación
|
||||
*/
|
||||
export default function TabCoordinationDemo() {
|
||||
const [coordinator, setCoordinator] = React.useState(null)
|
||||
const [isLeader, setIsLeader] = React.useState(false)
|
||||
const [tabInfo, setTabInfo] = React.useState({})
|
||||
const bgColor = useColorModeValue('gray.50', 'gray.800')
|
||||
|
||||
React.useEffect(() => {
|
||||
const coord = getTabCoordinator()
|
||||
setCoordinator(coord)
|
||||
setIsLeader(coord.getIsLeader())
|
||||
setTabInfo({
|
||||
tabId: coord.tabId,
|
||||
isLeader: coord.getIsLeader()
|
||||
})
|
||||
|
||||
// Subscribirse a cambios de liderazgo
|
||||
const unsubscribe = coord.subscribe('demo', ({ type, data }) => {
|
||||
if (type === 'leadership_change') {
|
||||
setIsLeader(data.isLeader)
|
||||
setTabInfo(prev => ({
|
||||
...prev,
|
||||
isLeader: data.isLeader
|
||||
}))
|
||||
}
|
||||
})
|
||||
|
||||
return unsubscribe
|
||||
}, [])
|
||||
|
||||
if (!coordinator) {
|
||||
return <Text>Loading coordinator...</Text>
|
||||
}
|
||||
|
||||
return (
|
||||
<Box p={3} bg={bgColor} borderRadius="md" border="1px" borderColor="gray.200">
|
||||
<VStack align="start" spacing={2}>
|
||||
<HStack>
|
||||
<Text fontWeight="bold">🔗 Tab Coordination Status</Text>
|
||||
<Badge colorScheme={isLeader ? 'green' : 'blue'}>
|
||||
{isLeader ? '👑 Leader' : '👥 Follower'}
|
||||
</Badge>
|
||||
</HStack>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Tab ID: <code>{tabInfo.tabId}</code>
|
||||
</Text>
|
||||
<Text fontSize="sm" color="gray.600">
|
||||
Role: {isLeader ? 'Making real connections to backend' : 'Receiving data from leader tab'}
|
||||
</Text>
|
||||
<Text fontSize="xs" color="gray.500">
|
||||
Only the leader tab creates actual HTTP connections. Other tabs receive data via BroadcastChannel.
|
||||
</Text>
|
||||
</VStack>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
|
|
@ -54,7 +54,6 @@ import LayoutObjectFieldTemplate from '../components/rjsf/LayoutObjectFieldTempl
|
|||
import { VariableProvider, useVariableContext } from '../contexts/VariableContext'
|
||||
import * as api from '../services/api'
|
||||
import { useCoordinatedPolling } from '../hooks/useCoordinatedConnection'
|
||||
import TabCoordinationDemo from '../components/TabCoordinationDemo'
|
||||
|
||||
// Collapsible Array Items Form - Each item in the array is individually collapsible
|
||||
function CollapsibleArrayItemsForm({ data, schema, uiSchema, onSave, title, icon, getItemLabel }) {
|
||||
|
|
@ -1131,9 +1130,6 @@ function DashboardContent() {
|
|||
)}
|
||||
</Flex>
|
||||
|
||||
{/* Tab Coordination Demo */}
|
||||
<TabCoordinationDemo />
|
||||
|
||||
<StatusBar status={status} isConnected={isConnected} isLeader={isLeader} />
|
||||
|
||||
<Tabs variant="enclosed" colorScheme="blue">
|
||||
|
|
|
|||
Loading…
Reference in New Issue