feat(filebrowser): add recording file metadata display and snapshot handling

- Introduced `RecordingDialog` tests to validate file metadata, snapshot display, and thumbnail rendering.
- Implemented dynamic file rendering in the frontend with enhanced layout and preview logic.
- Refactored backend to centralize snapshot metadata generation using `build_recording_snapshot_info`.
- Updated metadata to include file sizes for both data and meta files in API responses.
- Improved frontend to handle file types dynamically with icons and thumbnails for better user experience.

Author: sgoudelis

backend/handlers/entities/filebrowser.py

@@ -30,7 +30,11 @@
 from PIL import Image
 
 from common.decoded_thumbnails import get_decoded_thumbnail_url
-from common.thumbnails import delete_image_thumbnail, get_image_thumbnail_url
+from common.thumbnails import (
+    delete_image_thumbnail,
+    get_image_thumbnail_path,
+    get_image_thumbnail_url,
+)
 
 
 def get_disk_usage(path: Path) -> Dict[str, Union[int, str]]:
@@ -119,6 +123,35 @@ def get_image_dimensions(image_path: str) -> Tuple[Any, ...]:
         return (None, None)
 
 
+def build_recording_snapshot_info(snapshot_file: Path) -> Optional[Dict[str, Any]]:
+    """Build snapshot and generated-thumbnail metadata for a recording."""
+    if not snapshot_file.exists() or not snapshot_file.is_file():
+        return None
+
+    width, height = get_image_dimensions(str(snapshot_file))
+    thumbnail_url = get_image_thumbnail_url(snapshot_file, "/recordings")
+    thumbnail_info = None
+
+    if thumbnail_url:
+        thumbnail_path = get_image_thumbnail_path(snapshot_file)
+        if thumbnail_path.exists() and thumbnail_path.is_file():
+            thumbnail_info = {
+                "filename": thumbnail_path.name,
+                "url": thumbnail_url,
+                "size": thumbnail_path.stat().st_size,
+            }
+
+    return {
+        "filename": snapshot_file.name,
+        "url": f"/recordings/{snapshot_file.name}",
+        "thumbnail_url": thumbnail_url,
+        "thumbnail": thumbnail_info,
+        "size": snapshot_file.stat().st_size,
+        "width": width,
+        "height": height,
+    }
+
+
 def parse_transcription_metadata(transcription_file_path: str) -> Dict[str, Any]:
     """
     Parse metadata from a transcription file header.
@@ -469,23 +502,15 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
                         continue
 
                     data_stat = data_file.stat()
+                    meta_stat = meta_file.stat()
                     metadata = parse_sigmf_metadata(str(meta_file))
 
                     # Check if recording is in progress
                     is_recording_in_progress = metadata.get("recording_in_progress", False)
 
                     # Check for waterfall snapshot
                     snapshot_file = recordings_dir / f"{base_name}.png"
-                    snapshot_info = None
-                    if snapshot_file.exists():
-                        width, height = get_image_dimensions(str(snapshot_file))
-                        snapshot_info = {
-                            "filename": snapshot_file.name,
-                            "url": f"/recordings/{snapshot_file.name}",
-                            "thumbnail_url": get_image_thumbnail_url(snapshot_file, "/recordings"),
-                            "width": width,
-                            "height": height,
-                        }
+                    snapshot_info = build_recording_snapshot_info(snapshot_file)
 
                     processed_items.append(
                         {
@@ -494,6 +519,7 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
                             "data_file": data_file.name,
                             "meta_file": meta_file.name,
                             "data_size": data_stat.st_size,
+                            "meta_size": meta_stat.st_size,
                             "created": datetime.fromtimestamp(
                                 data_stat.st_ctime, timezone.utc
                             ).isoformat(),
@@ -935,6 +961,7 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
 
                 # Get file stats
                 data_stat = data_file.stat()
+                meta_stat = meta_file.stat()
 
                 # Parse metadata
                 metadata = parse_sigmf_metadata(str(meta_file))
@@ -944,22 +971,14 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
 
                 # Check for waterfall snapshot
                 snapshot_file = recordings_dir / f"{base_name}.png"
-                snapshot_info = None
-                if snapshot_file.exists():
-                    width, height = get_image_dimensions(str(snapshot_file))
-                    snapshot_info = {
-                        "filename": snapshot_file.name,
-                        "url": f"/recordings/{snapshot_file.name}",
-                        "thumbnail_url": get_image_thumbnail_url(snapshot_file, "/recordings"),
-                        "width": width,
-                        "height": height,
-                    }
+                snapshot_info = build_recording_snapshot_info(snapshot_file)
 
                 recording = {
                     "name": base_name,
                     "data_file": data_file.name,
                     "meta_file": meta_file.name,
                     "data_size": data_stat.st_size,
+                    "meta_size": meta_stat.st_size,
                     "created": datetime.fromtimestamp(data_stat.st_ctime, timezone.utc).isoformat(),
                     "modified": datetime.fromtimestamp(
                         data_stat.st_mtime, timezone.utc
@@ -993,6 +1012,7 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
 
             # Get file stats
             data_stat = data_file.stat()
+            meta_stat = meta_file.stat()
 
             # Parse metadata
             metadata = parse_sigmf_metadata(str(meta_file))
@@ -1002,22 +1022,14 @@ async def filebrowser_request_routing(sio, cmd, data, logger, sid):
 
             # Check for waterfall snapshot
             snapshot_file = recordings_dir / f"{recording_name}.png"
-            snapshot_info = None
-            if snapshot_file.exists():
-                width, height = get_image_dimensions(str(snapshot_file))
-                snapshot_info = {
-                    "filename": snapshot_file.name,
-                    "url": f"/recordings/{snapshot_file.name}",
-                    "thumbnail_url": get_image_thumbnail_url(snapshot_file, "/recordings"),
-                    "width": width,
-                    "height": height,
-                }
+            snapshot_info = build_recording_snapshot_info(snapshot_file)
 
             recording = {
                 "name": recording_name,
                 "data_file": data_file.name,
                 "meta_file": meta_file.name,
                 "data_size": data_stat.st_size,
+                "meta_size": meta_stat.st_size,
                 "created": datetime.fromtimestamp(data_stat.st_ctime, timezone.utc).isoformat(),
                 "modified": datetime.fromtimestamp(data_stat.st_mtime, timezone.utc).isoformat(),
                 "metadata": metadata,

backend/tests/test_decoded_thumbnails.py

@@ -1,5 +1,6 @@
 from pathlib import Path
 
+import pytest
 from PIL import Image
 
 from common.decoded_thumbnails import (
@@ -8,6 +9,8 @@
     get_decoded_thumbnail_url,
     select_decoded_thumbnail_source,
 )
+from common.thumbnails import get_image_thumbnail_path
+from handlers.entities.filebrowser import build_recording_snapshot_info
 
 
 def _write_png(path: Path, size=(1200, 700), color=(12, 34, 56)):
@@ -62,3 +65,22 @@ def test_get_decoded_thumbnail_url_lazily_generates_thumbnail(tmp_path):
     assert thumbnail_url is not None
     assert thumbnail_url.startswith(f"/decoded/{folder.name}/{THUMBNAIL_FILENAME}?v=")
     assert (folder / THUMBNAIL_FILENAME).exists()
+
+
+@pytest.mark.unit
+def test_build_recording_snapshot_info_includes_thumbnail_file_metadata(tmp_path):
+    source = tmp_path / "recording.png"
+    _write_png(source, size=(800, 400))
+
+    snapshot_info = build_recording_snapshot_info(source)
+
+    assert snapshot_info is not None
+    assert snapshot_info["filename"] == "recording.png"
+    assert snapshot_info["url"] == "/recordings/recording.png"
+    assert snapshot_info["size"] == source.stat().st_size
+    assert snapshot_info["width"] == 800
+    assert snapshot_info["height"] == 400
+    assert snapshot_info["thumbnail_url"].startswith("/recordings/thumbnails/recording.jpg?v=")
+    assert snapshot_info["thumbnail"]["filename"] == "recording.jpg"
+    assert snapshot_info["thumbnail"]["url"] == snapshot_info["thumbnail_url"]
+    assert snapshot_info["thumbnail"]["size"] == get_image_thumbnail_path(source).stat().st_size

frontend/src/components/filebrowser/__tests__/recording-dialog.test.jsx

@@ -0,0 +1,67 @@
+import { describe, expect, it, vi } from 'vitest';
+import { screen } from '@testing-library/react';
+import { renderWithProviders } from '../../../test/test-utils.jsx';
+import RecordingDialog from '../recording-dialog.jsx';
+
+const recording = {
+    name: 'NOAA_apt_20260101_120000',
+    data_file: 'NOAA_apt_20260101_120000.sigmf-data',
+    meta_file: 'NOAA_apt_20260101_120000.sigmf-meta',
+    data_size: 1536,
+    meta_size: 64,
+    created: '2026-01-01T12:00:00Z',
+    modified: '2026-01-01T12:01:00Z',
+    metadata: {
+        center_frequency: 137_100_000,
+        sample_rate: 2_400_000,
+        start_time: '2026-01-01T12:00:00Z',
+        finalized_time: '2026-01-01T12:01:00Z',
+    },
+    snapshot: {
+        filename: 'NOAA_apt_20260101_120000.png',
+        url: '/recordings/NOAA_apt_20260101_120000.png',
+        thumbnail_url: '/recordings/thumbnails/NOAA_apt_20260101_120000.jpg?v=1',
+        width: 640,
+        height: 360,
+        size: 2048,
+        thumbnail: {
+            filename: 'NOAA_apt_20260101_120000.jpg',
+            url: '/recordings/thumbnails/NOAA_apt_20260101_120000.jpg?v=1',
+            size: 512,
+        },
+    },
+    download_urls: {
+        data: '/recordings/NOAA_apt_20260101_120000.sigmf-data',
+        meta: '/recordings/NOAA_apt_20260101_120000.sigmf-meta',
+    },
+};
+
+describe('RecordingDialog', () => {
+    it('shows associated recording files with thumbnails and sizes', () => {
+        renderWithProviders(
+            <RecordingDialog
+                open
+                onClose={vi.fn()}
+                recording={recording}
+            />
+        );
+
+        expect(screen.getByText('IQ Data')).toBeInTheDocument();
+        expect(screen.getByText('NOAA_apt_20260101_120000.sigmf-data')).toBeInTheDocument();
+        expect(screen.getAllByText('1.5 KB').length).toBeGreaterThan(0);
+
+        expect(screen.getAllByText('Metadata').length).toBeGreaterThan(0);
+        expect(screen.getByText('NOAA_apt_20260101_120000.sigmf-meta')).toBeInTheDocument();
+        expect(screen.getByText('64 Bytes')).toBeInTheDocument();
+
+        expect(screen.getByText('Waterfall Snapshot')).toBeInTheDocument();
+        expect(screen.getByText('NOAA_apt_20260101_120000.png')).toBeInTheDocument();
+        expect(screen.getAllByText('640×360').length).toBeGreaterThan(0);
+        expect(screen.getByText('2 KB')).toBeInTheDocument();
+
+        expect(screen.getByText('Thumbnail')).toBeInTheDocument();
+        expect(screen.getByText('NOAA_apt_20260101_120000.jpg')).toBeInTheDocument();
+        expect(screen.getByText('512 Bytes')).toBeInTheDocument();
+        expect(screen.getAllByAltText('Thumbnail preview')).toHaveLength(1);
+    });
+});