feat: live message viewer

public/scripts/components/EventComponent.js

@@ -19,6 +19,12 @@ class EventComponent extends Component {
         
         // Track recent events to trigger animations
         this.lastSeenEvents = new Set();
+        
+        // Track rendered message IDs for animation
+        this.renderedMessageIds = new Set();
+        
+        // Track selected node for highlighting
+        this.selectedNodeId = null;
     }
 
     updateDimensions() {
@@ -414,15 +420,25 @@ class EventComponent extends Component {
             .style('opacity', 0)
             .call(this.drag());
         
-        // Add circle
-        nodesEnter.append('circle')
+        // Add circle with click handler for non-center nodes
+        const circlesEnter = nodesEnter.append('circle')
             .attr('r', d => d.type === 'center' ? 18 : 14)
             .attr('fill', d => {
                 if (d.type === 'center') return '#3498db';
                 return '#10b981';
             })
             .attr('stroke', '#fff')
-            .attr('stroke-width', 2.5);
+            .attr('stroke-width', 2.5)
+            .style('cursor', d => d.type === 'center' ? 'default' : 'pointer');
+        
+        // Add outer ring for highlighted nodes
+        nodesEnter.append('circle')
+            .attr('class', 'node-highlight')
+            .attr('r', d => d.type === 'center' ? 22 : 18)
+            .attr('fill', 'none')
+            .attr('stroke', '#FFD700')
+            .attr('stroke-width', 3)
+            .attr('opacity', 0);
         
         // Add text labels
         nodesEnter.append('text')
@@ -433,20 +449,37 @@ class EventComponent extends Component {
             .attr('font-weight', '600')
             .text(d => d.label);
         
+        // Add click handler to open drawer for topic nodes
+        nodesEnter.on('click', (event, d) => {
+            if (d.type !== 'center' && d.id) {
+                this.selectedNodeId = d.id;
+                // Update the graph to show highlight
+                if (this.svg) {
+                    this.updateSimulation();
+                }
+                this.openTopicDrawer(d.id);
+            }
+        });
+        
         // Merge and update all nodes
         const nodesUpdate = nodesEnter.merge(nodes);
         
         // Update node visibility
         nodesUpdate.style('opacity', 1);
         
-        // Update circles
-        nodesUpdate.select('circle')
+        // Update circles (excluding highlight ring)
+        nodesUpdate.select('circle:not(.node-highlight)')
             .attr('r', d => d.type === 'center' ? 18 : 14)
             .attr('fill', d => {
                 if (d.type === 'center') return '#3498db';
                 return '#10b981';
             });
         
+        // Update highlight rings
+        nodesUpdate.select('.node-highlight')
+            .attr('opacity', d => d.id === this.selectedNodeId ? 1 : 0)
+            .classed('highlighted', d => d.id === this.selectedNodeId);
+        
         // Update text labels
         nodesUpdate.select('text')
             .text(d => d.label);
@@ -807,6 +840,289 @@ class EventComponent extends Component {
                 animationGroup.remove();
             });
     }
+    
+    // Get topics that contain this node ID (part)
+    getTopicsForNodeId(nodeId) {
+        const events = this.viewModel.get('events');
+        const topics = [];
+        
+        for (const [topic, data] of events) {
+            if (data.parts && data.parts.includes(nodeId)) {
+                topics.push(topic);
+            }
+        }
+        
+        return topics;
+    }
+    
+    // Open drawer to show messages for a topic node
+    openTopicDrawer(nodeId) {
+        // Find topics that contain this node
+        const topics = this.getTopicsForNodeId(nodeId);
+        
+        if (topics.length === 0) {
+            logger.warn('EventComponent: No topics found for node', nodeId);
+            return;
+        }
+        
+        // Store all matching topics
+        this._selectedNodeId = nodeId;
+        this._selectedTopics = topics;
+        
+        // Set selected topic in view model (first topic for backwards compatibility)
+        this.viewModel.setSelectedTopic(topics[0]);
+        
+        // Update highlight state
+        this.selectedNodeId = nodeId;
+        this.updateSimulation();
+        
+        // Open drawer with all matching topics
+        this.openMessagesDrawer(nodeId, topics);
+    }
+    
+    // Open the messages drawer
+    openMessagesDrawer(nodeId, topics) {
+        if (!window.DrawerComponent) {
+            logger.error('EventComponent: DrawerComponent not available');
+            return;
+        }
+        
+        const drawer = new window.DrawerComponent();
+        
+        const title = topics.length === 1 
+            ? `Live Messages: ${topics[0]}` 
+            : `Live Messages: ${nodeId} (${topics.length} topics)`;
+        
+        drawer.openDrawer(
+            title,
+            (container) => {
+                this.renderMessageList(container, nodeId, topics);
+            },
+            null,
+            () => {
+                // On close callback - cleanup
+                if (this._messageUnsubscribe) {
+                    this._messageUnsubscribe();
+                    this._messageUnsubscribe = null;
+                }
+                this._selectedNodeId = null;
+                this._selectedTopics = null;
+                this.selectedNodeId = null;
+                // Update graph to remove highlight
+                this.updateSimulation();
+                this.viewModel.clearSelectedTopic();
+            },
+            true // Hide terminal button for events drawer
+        );
+    }
+    
+    // Render message list in the drawer
+    renderMessageList(container, nodeId, topics) {
+        // Clear loading state
+        container.innerHTML = '';
+        
+        // Create scrollable container
+        const messagesContainer = document.createElement('div');
+        messagesContainer.className = 'topic-messages-container';
+        
+        // Create header info
+        const header = document.createElement('div');
+        header.className = 'message-list-header';
+        
+        // Build topic display
+        let topicDisplay = '';
+        if (topics.length === 1) {
+            topicDisplay = `<code class="topic-code">${topics[0]}</code>`;
+        } else {
+            topicDisplay = `
+                ${topics.map(t => `<code class="topic-code" style="margin-right: 4px;">${t}</code>`).join('')}
+                <br><small class="topic-multi-indicator">(${topics.length} topics for node: ${nodeId})</small>
+            `;
+        }
+        
+        header.innerHTML = `
+            <div class="message-list-header-title">
+                Topics: ${topicDisplay}
+            </div>
+            <div class="message-list-header-subtitle">
+                Showing live websocket messages for these topics
+            </div>
+        `;
+        messagesContainer.appendChild(header);
+        
+        // Message list
+        const messageList = document.createElement('div');
+        messageList.id = `message-list-${nodeId}`;
+        messageList.className = 'message-list';
+        messagesContainer.appendChild(messageList);
+        
+        container.appendChild(messagesContainer);
+        
+        // Initial render
+        this.updateMessageList(nodeId, topics);
+        
+        // Subscribe to allMessagesCounter changes to update in real-time
+        // Store unsubscribe function for cleanup
+        const updateHandler = () => {
+            this.updateMessageList(nodeId, topics);
+        };
+        
+        // Subscribe to the counter which changes on every new message
+        this._messageUnsubscribe = this.viewModel.subscribe('allMessagesCounter', updateHandler);
+    }
+    
+    // Update the message list display
+    updateMessageList(nodeId, topics) {
+        const messageList = document.getElementById(`message-list-${nodeId}`);
+        if (!messageList) return;
+        
+        // Get messages for all topics
+        const allMessages = [];
+        topics.forEach(topic => {
+            const messages = this.viewModel.getMessagesForTopic(topic);
+            allMessages.push(...messages);
+        });
+        
+        // Sort by timestamp (newest first)
+        allMessages.sort((a, b) => new Date(b.timestamp) - new Date(a.timestamp));
+        
+        // Clear existing content
+        messageList.innerHTML = '';
+        
+        if (allMessages.length === 0) {
+            const emptyMsg = document.createElement('div');
+            emptyMsg.className = 'empty-message-state';
+            emptyMsg.textContent = 'No messages yet. Waiting for websocket events...';
+            messageList.appendChild(emptyMsg);
+            return;
+        }
+        
+        // Show messages (newest at top)
+        allMessages.forEach((msg, index) => {
+            // Check if this is a new message (not previously rendered)
+            const isNewMessage = !this.renderedMessageIds.has(msg.id);
+            
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message-item';
+            if (isNewMessage) {
+                // Add animation class for new messages
+                messageDiv.classList.add('message-item-new');
+            }
+            
+            // Timestamp
+            const timestamp = new Date(msg.timestamp);
+            const timeStr = timestamp.toLocaleTimeString();
+            
+            // Get full message data (exclude internal properties)
+            const messageData = this.getDisplayableMessageData(msg);
+            
+            // Format message for display
+            let displayText = '';
+            if (messageData && Object.keys(messageData).length > 0) {
+                try {
+                    displayText = JSON.stringify(messageData, null, 2);
+                } catch (e) {
+                    displayText = String(messageData);
+                }
+            } else {
+                displayText = '(empty message)';
+            }
+            
+            const topicIndicator = topics.length > 1 ? ` - ${msg.topic || 'unknown'}` : '';
+            
+            messageDiv.innerHTML = `
+                <div class="message-item-header">
+                    <div class="message-id">#${allMessages.length - index}${topicIndicator}</div>
+                    <div class="message-timestamp">${timeStr}</div>
+                </div>
+                <pre class="message-content">${this.escapeHtml(displayText)}</pre>
+            `;
+            
+            messageList.appendChild(messageDiv);
+            
+            // Mark as rendered
+            this.renderedMessageIds.add(msg.id);
+        });
+        
+        // Auto-scroll to top (newest messages)
+        messageList.scrollTop = 0;
+    }
+    
+    // Get displayable message data (exclude internal properties)
+    getDisplayableMessageData(msg) {
+        // Clone the message and exclude internal properties
+        const data = { ...msg };
+        delete data.id;
+        delete data.timestamp;
+        delete data.topic;
+        
+        // If the message has a 'data' property, that's usually what we want to show
+        // Otherwise show all properties
+        if (data.data !== undefined) {
+            return this.unescapeJson(data.data);
+        }
+        
+        return this.unescapeJson(data);
+    }
+    
+    // Recursively unescape JSON strings
+    unescapeJson(obj, depth = 0) {
+        // Prevent infinite recursion
+        if (depth > 10) return obj;
+        
+        // If it's a string, try to parse as JSON
+        if (typeof obj === 'string') {
+            try {
+                const parsed = JSON.parse(obj);
+                // If parsing succeeded and it's an object/array, recursively unescape
+                if (typeof parsed === 'object' && parsed !== null) {
+                    return this.unescapeJson(parsed, depth + 1);
+                }
+                return parsed;
+            } catch (e) {
+                // Not a valid JSON string, return as-is
+                return obj;
+            }
+        }
+        
+        // If it's an array, process each element
+        if (Array.isArray(obj)) {
+            return obj.map(item => this.unescapeJson(item, depth + 1));
+        }
+        
+        // If it's an object, process each property
+        if (obj && typeof obj === 'object') {
+            const result = {};
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    result[key] = this.unescapeJson(obj[key], depth + 1);
+                }
+            }
+            return result;
+        }
+        
+        // Not a string, array, or object - return as-is
+        return obj;
+    }
+    
+    // Escape HTML to prevent XSS
+    escapeHtml(text) {
+        const div = document.createElement('div');
+        div.textContent = text;
+        return div.innerHTML;
+    }
+    
+    // Cleanup method
+    unmount() {
+        // Unsubscribe from messages if subscribed
+        if (this._messageUnsubscribe) {
+            this._messageUnsubscribe();
+            this._messageUnsubscribe = null;
+        }
+        
+        // Call parent unmount
+        super.unmount();
+    }
 }
 
 window.EventComponent = EventComponent;