From 6c891198b58fcc62cbb198dcd64f6b72ba0850ae Mon Sep 17 00:00:00 2001 From: Daniel Pupius Date: Wed, 23 Apr 2025 13:17:19 -0700 Subject: [PATCH] Show more data --- .logista.yaml | 2 + web/src/components/PacketList.tsx | 6 +-- web/src/components/packets/PacketCard.tsx | 11 ++++- web/src/store/slices/packetSlice.ts | 54 ++++++++++++----------- 4 files changed, 43 insertions(+), 30 deletions(-) diff --git a/.logista.yaml b/.logista.yaml index 97b7ad0..19cd3ee 100644 --- a/.logista.yaml +++ b/.logista.yaml @@ -27,6 +27,8 @@ format: | {{ "Text:" | dim }} {{ $data.textMessage }} {{- else if $data.mapReport }} {{ "Map Report:" | dim }} {{ $data.mapReport | table }} + {{- else if $data.routeDiscovery }} + {{ "Route Discovery:" | dim }} {{ $data.routeDiscovery | table }} {{- else if $data.position }} {{ "Position:" | dim }} Lat: {{ $data.position.latitudeI | mult 0.0000001 }}, Long: {{ $data.position.longitudeI | mult 0.0000001 }} {{- else if $data.nodeInfo }} diff --git a/web/src/components/PacketList.tsx b/web/src/components/PacketList.tsx index 16559d4..cd7ceaa 100644 --- a/web/src/components/PacketList.tsx +++ b/web/src/components/PacketList.tsx @@ -1,14 +1,14 @@ -import React, { useState, useEffect, useCallback } from "react"; +import React, { useState, useCallback } from "react"; import { useAppSelector, useAppDispatch } from "../hooks"; import { PacketRenderer } from "./packets/PacketRenderer"; import { StreamControl } from "./StreamControl"; -import { Trash2, RefreshCw, Archive, Radio } from "lucide-react"; +import { Trash2, RefreshCw, Archive } from "lucide-react"; import { clearPackets, toggleStreamPause } from "../store/slices/packetSlice"; import { Packet } from "../lib/types"; import { Separator } from "./Separator"; // Number of packets to show per page -const PACKETS_PER_PAGE = 10; +const PACKETS_PER_PAGE = 100; export const PacketList: React.FC = () => { const { packets, bufferedPackets, loading, error, streamPaused } = diff --git a/web/src/components/packets/PacketCard.tsx b/web/src/components/packets/PacketCard.tsx index 7c0a81a..218e321 100644 --- a/web/src/components/packets/PacketCard.tsx +++ b/web/src/components/packets/PacketCard.tsx @@ -27,7 +27,7 @@ export const PacketCard: React.FC = ({
{/* Left side: Icon, From, Channel */} -
+
= ({ className: "h-3.5 w-3.5 text-white", })}
- + {data.from ? `!${data.from.toString(16).toLowerCase()}` : "Unknown"} + on {packet.info.channel} + {data.gatewayId && ( + <> + via + {data.gatewayId} + + )}
{/* Right side: ID and Type */} diff --git a/web/src/store/slices/packetSlice.ts b/web/src/store/slices/packetSlice.ts index f15465f..2330dfd 100644 --- a/web/src/store/slices/packetSlice.ts +++ b/web/src/store/slices/packetSlice.ts @@ -1,8 +1,8 @@ -import { createSlice, PayloadAction } from '@reduxjs/toolkit'; -import { Packet } from '../../lib/types'; +import { createSlice, PayloadAction } from "@reduxjs/toolkit"; +import { Packet } from "../../lib/types"; // Maximum number of packets to keep in memory -const MAX_PACKETS = 100; +const MAX_PACKETS = 5000; interface PacketState { packets: Packet[]; @@ -23,7 +23,7 @@ const initialState: PacketState = { }; const packetSlice = createSlice({ - name: 'packets', + name: "packets", initialState, reducers: { fetchPacketsStart(state) { @@ -33,12 +33,12 @@ const packetSlice = createSlice({ fetchPacketsSuccess(state, action: PayloadAction) { // Track unique packets and update the seen packets object const uniquePackets: Packet[] = []; - - action.payload.forEach(packet => { + + action.payload.forEach((packet) => { if (packet.data.from !== undefined && packet.data.id !== undefined) { const nodeId = `!${packet.data.from.toString(16).toLowerCase()}`; const packetKey = `${nodeId}_${packet.data.id}`; - + if (!state.seenPackets[packetKey]) { state.seenPackets[packetKey] = true; uniquePackets.push(packet); @@ -48,7 +48,7 @@ const packetSlice = createSlice({ uniquePackets.push(packet); } }); - + // Limit initial load to MAX_PACKETS state.packets = uniquePackets.slice(-MAX_PACKETS); state.loading = false; @@ -59,29 +59,29 @@ const packetSlice = createSlice({ }, addPacket(state, action: PayloadAction) { const packet = action.payload; - + // Skip packets without valid from/id if (packet.data.from === undefined || packet.data.id === undefined) { return; } - + // Create a Meshtastic node ID format const nodeId = `!${packet.data.from.toString(16).toLowerCase()}`; const packetKey = `${nodeId}_${packet.data.id}`; - + // Check if we've already seen this packet if (state.seenPackets[packetKey]) { // Packet is a duplicate, ignore it return; } - + // Mark this packet as seen state.seenPackets[packetKey] = true; - + if (state.streamPaused) { // When paused, add to buffer instead of main list state.bufferedPackets.unshift(packet); - + // Ensure buffer doesn't grow too large if (state.bufferedPackets.length > MAX_PACKETS) { state.bufferedPackets = state.bufferedPackets.slice(0, MAX_PACKETS); @@ -89,7 +89,7 @@ const packetSlice = createSlice({ } else { // Normal flow - add to main list state.packets.unshift(packet); - + // Remove oldest packets if we exceed the limit if (state.packets.length > MAX_PACKETS) { state.packets = state.packets.slice(0, MAX_PACKETS); @@ -103,34 +103,38 @@ const packetSlice = createSlice({ }, toggleStreamPause(state) { state.streamPaused = !state.streamPaused; - + // If unpausing, prepend buffered packets to the main list if (!state.streamPaused && state.bufferedPackets.length > 0) { - state.packets = [...state.bufferedPackets, ...state.packets] - .slice(0, MAX_PACKETS); + state.packets = [...state.bufferedPackets, ...state.packets].slice( + 0, + MAX_PACKETS + ); state.bufferedPackets = []; } }, // Explicitly set the pause state setPauseState(state, action: PayloadAction) { const newPausedState = action.payload; - + // Only process if state is actually changing if (state.streamPaused !== newPausedState) { state.streamPaused = newPausedState; - + // If unpausing, prepend buffered packets to the main list if (!newPausedState && state.bufferedPackets.length > 0) { - state.packets = [...state.bufferedPackets, ...state.packets] - .slice(0, MAX_PACKETS); + state.packets = [...state.bufferedPackets, ...state.packets].slice( + 0, + MAX_PACKETS + ); state.bufferedPackets = []; } } - } + }, }, }); -export const { +export const { fetchPacketsStart, fetchPacketsSuccess, fetchPacketsFailure, @@ -140,4 +144,4 @@ export const { setPauseState, } = packetSlice.actions; -export default packetSlice.reducer; \ No newline at end of file +export default packetSlice.reducer;