feat: source init progress and RawMessages improvements (v1.8.0)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ioai/rosview",
-  "version": "1.7.9",
+  "version": "1.8.0",
   "description": "High-performance robotics data visualization for MCAP, ROS bag, ROS2 db3, HDF5 and BVH — embeddable React component and standalone SPA",
   "keywords": [
     "ros",
@@ -104,62 +104,62 @@
     "@mcap/browser": "^1.1.0",
     "@mcap/core": "^2.0.2",
     "@microsoft/api-extractor": "^7.58.12",
-    "@playwright/test": "^1.59.1",
-    "@radix-ui/react-collapsible": "^1.1.12",
-    "@radix-ui/react-dialog": "^1.1.5",
-    "@radix-ui/react-dropdown-menu": "^2.1.5",
-    "@radix-ui/react-menubar": "^1.1.16",
-    "@radix-ui/react-popover": "^1.1.15",
-    "@radix-ui/react-select": "^2.2.6",
-    "@radix-ui/react-separator": "^1.1.1",
-    "@radix-ui/react-slider": "^1.2.2",
-    "@radix-ui/react-slot": "^1.1.1",
-    "@radix-ui/react-tabs": "^1.1.2",
-    "@react-three/drei": "^10.0.0",
-    "@react-three/fiber": "^9.0.0",
+    "@playwright/test": "^1.62.1",
+    "@radix-ui/react-collapsible": "^1.1.20",
+    "@radix-ui/react-dialog": "^1.1.23",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-menubar": "^1.1.24",
+    "@radix-ui/react-popover": "^1.1.23",
+    "@radix-ui/react-select": "^2.3.7",
+    "@radix-ui/react-separator": "^1.1.15",
+    "@radix-ui/react-slider": "^1.4.7",
+    "@radix-ui/react-slot": "^1.3.3",
+    "@radix-ui/react-tabs": "^1.1.21",
+    "@react-three/drei": "^10.7.8",
+    "@react-three/fiber": "^9.7.0",
     "@types/cytoscape": "^3.21.9",
-    "@types/node": "^25.6.0",
-    "@types/react": "^19.2.15",
-    "@types/react-dom": "^19.2.3",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.2.18",
+    "@types/react-dom": "^19.2.4",
     "@types/sql.js": "^1.4.11",
-    "@types/three": "^0.173.0",
-    "@vitejs/plugin-react": "^6.0.1",
-    "@vitest/coverage-v8": "^4.1.10",
-    "autoprefixer": "^10.4.23",
+    "@types/three": "^0.185.4",
+    "@vitejs/plugin-react": "^6.0.5",
+    "@vitest/coverage-v8": "^4.1.11",
+    "autoprefixer": "^10.5.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
     "comlink": "^4.4.1",
-    "cytoscape": "^3.33.2",
+    "cytoscape": "^3.34.1",
     "dockview": "^6.0.7",
     "dockview-core": "^6.0.7",
-    "eslint": "^10.8.0",
-    "eslint-plugin-react-hooks": "^7.0.1",
-    "eslint-plugin-react-refresh": "^0.5.2",
+    "eslint": "^10.8.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
     "eventemitter3": "^5.0.1",
     "fflate": "^0.8.2",
     "flatbuffers": "^25.9.23",
-    "globals": "^17.4.0",
-    "happy-dom": "^20.9.0",
+    "globals": "^17.11.0",
+    "happy-dom": "^20.11.2",
     "intervals-fn": "^3.0.3",
-    "lucide-react": "^0.474.0",
+    "lucide-react": "^1.32.0",
     "lz4js": "^0.2.0",
-    "postcss": "^8.5.6",
-    "protobufjs": "^8.0.1",
-    "react": "^19.2.6",
-    "react-dom": "^19.2.6",
-    "react-intl": "^10.1.2",
-    "react-resizable-panels": "^4.10.0",
-    "sonner": "^2.0.7",
-    "sql.js": "^1.14.1",
+    "postcss": "^8.5.26",
+    "protobufjs": "^8.7.2",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
+    "react-intl": "^10.1.22",
+    "react-resizable-panels": "^4.12.3",
+    "sonner": "^2.0.8",
+    "sql.js": "^1.14.2",
     "tailwind-merge": "^3.5.0",
     "tailwindcss": "^3.4.17",
-    "three": "^0.173.0",
+    "three": "^0.185.1",
     "typescript": "6.0.3",
-    "typescript-eslint": "^8.58.0",
+    "typescript-eslint": "^8.67.0",
     "uplot": "^1.6.31",
-    "vite": "^8.0.14",
-    "vitest": "^4.1.4",
-    "zustand": "^5.0.3"
+    "vite": "^8.2.1",
+    "vitest": "^4.1.11",
+    "zustand": "^5.0.15"
   }
 }

src/core/players/IterablePlayer.test.ts

@@ -5,6 +5,7 @@ import { useMessagePipelineStore } from '@/core/pipeline/store';
 import type { Initialization, MessageEvent } from '@/core/types/ros';
 import type { PlayerState } from '@/core/types/player';
 import type { WorkerSerializedSource } from '@/infra/workers/WorkerSerializedSource';
+import type { SourceInitProgressCallback } from '@/infra/workers/types';
 
 const TOPIC = '/camera/front/image/compressed';
 
@@ -1216,3 +1217,34 @@ describe('IterablePlayer topic metadata', () => {
     player.close();
   });
 });
+
+describe('IterablePlayer initialize progress', () => {
+  it('emits loadedBytes while presence is still initializing', async () => {
+    const gate = deferred<Initialization>();
+    const source = makeSource([]);
+    source.initialize = vi.fn(async (_args: Record<string, unknown>, onProgress?: SourceInitProgressCallback) => {
+      onProgress?.({ phase: 'downloading', loadedBytes: 12, totalBytes: 100, transferredBytes: 12 });
+      await gate.promise;
+      return makeInitialization();
+    });
+
+    const player = new IterablePlayer(source);
+    let latestState: PlayerState | undefined;
+    player.setListener((state) => {
+      latestState = state;
+    });
+
+    const pending = player.initialize({});
+    await flushAsyncWork();
+
+    expect(latestState?.presence).toBe('initializing');
+    expect(latestState?.progress.loadedBytes).toBe(12);
+    expect(latestState?.progress.totalBytes).toBe(100);
+    expect(latestState?.progress.initPhase).toBe('downloading');
+    expect(useMessagePipelineStore.getState().playerState.progress.loadedBytes).toBe(12);
+
+    gate.resolve(makeInitialization());
+    await pending;
+    player.close();
+  });
+});

src/core/players/IterablePlayer.ts

@@ -9,7 +9,7 @@ import type {
 import { MAX_PLAYBACK_SPEED } from '@/core/types/player';
 import type { DataQualityReport, Time, Initialization, MessageEvent, TimeRange } from '@/core/types/ros';
 import type { ISourceHandle } from '@/infra/workers/ISourceHandle';
-import type { IMessageCursor } from '@/infra/workers/types';
+import type { IMessageCursor, SourceInitProgress } from '@/infra/workers/types';
 import { addMs, toNano } from '@/shared/utils/time';
 import { useMessagePipelineStore } from '@/core/pipeline/store';
 import { messageBus } from '@/core/pipeline/messageBus';
@@ -387,7 +387,9 @@ export class IterablePlayer implements Player {
 
     try {
       this._advancePlaybackEpoch();
-      this._initialization = await this._source.initialize(args);
+      this._initialization = await this._source.initialize(args, (progress) => {
+        this._applyInitProgress(progress);
+      });
       this._topicLastMessageNs.clear();
       this._currentTime = this._initialization.start;
       this._state.presence = "ready";
@@ -1194,6 +1196,25 @@ export class IterablePlayer implements Player {
     return time;
   }
 
+  private _applyInitProgress(progress: SourceInitProgress): void {
+    if (this._state.presence !== "initializing") {
+      return;
+    }
+    const percent =
+      progress.totalBytes > 0
+        ? Math.min(100, (progress.loadedBytes / progress.totalBytes) * 100)
+        : undefined;
+    this._state.progress = {
+      ...this._state.progress,
+      initPhase: progress.phase,
+      loadedBytes: progress.loadedBytes,
+      totalBytes: progress.totalBytes,
+      transferredBytes: progress.transferredBytes,
+      percent,
+    };
+    this._emitState();
+  }
+
   private _startLoadProgressPolling(): void {
     this._stopLoadProgressPolling();
     this._loadProgressPollId = globalThis.setInterval(() => {

src/core/types/player.ts

@@ -24,6 +24,9 @@ export interface Readable {
 
 export type PlayerPresence = 'preinit' | 'initializing' | 'ready' | 'closed';
 
+/** Worker-reported phase while a remote (or large local) source is opening. */
+export type SourceInitPhase = 'connecting' | 'downloading' | 'opening';
+
 export interface PlayerState {
   presence: PlayerPresence;
   progress: {
@@ -33,6 +36,12 @@ export interface PlayerState {
     downloadedByteRanges?: Range[];
     /** Total source bytes for byte-range diagnostics. */
     totalBytes?: number;
+    /** Bytes received in the current HTTP range (or full-file download). */
+    loadedBytes?: number;
+    /** Session-cumulative HTTP bytes transferred while opening. */
+    transferredBytes?: number;
+    /** Coarse initialize phase for the loading overlay. */
+    initPhase?: SourceInitPhase;
     /** Parsed/playable time ranges rendered on the playback track. */
     parsedMessageRanges?: TimeRange[];
     /** Current worker transport mode. */

src/features/layout/PanelTabHeader.tsx

@@ -4,7 +4,14 @@ import { useIntl } from 'react-intl';
 import { Separator } from '@/shared/ui/separator';
 import { useElementWidth } from '@/shared/hooks/useElementWidth';
 import type { PanelType } from '../panels/framework';
-import { getPanelTypeFromId, listPanelStates, usePanelActions } from '../panels/framework';
+import {
+  extractPrimaryTopicFromConfig,
+  getPanelConfig,
+  getPanelState,
+  getPanelTypeFromId,
+  listPanelStates,
+  usePanelActions,
+} from '../panels/framework';
 import { PANEL_TYPE_MESSAGE_SLUG } from '../panels/framework/panelMessageSlug';
 import { PanelTypeIcon } from '../panels/framework/panelIcons';
 import {
@@ -98,9 +105,15 @@ export const PanelTabHeader: React.FC<IDockviewPanelHeaderProps> = ({ api, conta
 
   const addPanelWithPlacement = useCallback(
     (type: PanelType, placement: 'replace' | 'right' | 'below' | 'within') => {
+      const sourceConfig = getPanelConfig(api.id) ?? getPanelState(api.id)?.config;
+      const inheritedTopic =
+        type === 'RawMessages' ? extractPrimaryTopicFromConfig(sourceConfig) : undefined;
+      const config = inheritedTopic ? { topic: inheritedTopic } : undefined;
+
       if (placement === 'replace') {
         openDockviewPanel({
           type,
+          config,
           position: { referencePanel: api.id, direction: 'within' },
         });
         window.setTimeout(() => {
@@ -110,6 +123,7 @@ export const PanelTabHeader: React.FC<IDockviewPanelHeaderProps> = ({ api, conta
       }
       openDockviewPanel({
         type,
+        config,
         position: { referencePanel: api.id, direction: placement },
       });
     },

src/features/panels/RawMessages/RawMessagesPanel.tsx

@@ -14,7 +14,7 @@ import { scheduleFrame } from '@/shared/utils/rafScheduler';
 import { TopicQuickPicker } from '../framework/TopicQuickPicker';
 import { PanelTopicBar } from '../framework/PanelTopicBar';
 import type { RawMessagesConfig } from './defaults';
-import { buildRowsForMessageEvent, type FlatRow } from './shapeTree';
+import { buildRowsForMessageEvent, isExpandableArray, type FlatRow } from './shapeTree';
 
 interface RawMessagesPanelProps {
   player: Player;
@@ -110,7 +110,7 @@ function readValueAtPath(event: MessageEvent | null | undefined, path: string):
   const parts = pathToParts(path.replace(/^message\./, ''));
   let current: unknown = event.message;
   for (const part of parts) {
-    if (Array.isArray(current)) {
+    if (isExpandableArray(current)) {
       const idx = Number(part);
       if (!Number.isInteger(idx)) return undefined;
       current = current[idx];
@@ -158,7 +158,7 @@ function previewPrimitive(value: unknown): string {
   if (typeof value === 'number' || typeof value === 'boolean') return String(value);
   if (value instanceof Uint8Array) return `Uint8Array(${value.byteLength})`;
   if (value instanceof ArrayBuffer) return `ArrayBuffer(${value.byteLength})`;
-  if (Array.isArray(value)) return `Array(${value.length})`;
+  if (isExpandableArray(value)) return `Array(${value.length})`;
   if (isPlainObject(value)) return `{${Object.keys(value).length} keys}`;
   if (typeof value === 'bigint') return `${value.toString()}n`;
   if (typeof value === 'function') return '[Function]';
@@ -206,7 +206,7 @@ export function describeValue(
   if (value instanceof ArrayBuffer) {
     return describeValue(new Uint8Array(value), maxBinaryPreviewBytes, options);
   }
-  if (Array.isArray(value)) return { text: `Array(${value.length})`, kind: 'array' };
+  if (isExpandableArray(value)) return { text: `Array(${value.length})`, kind: 'array' };
   if (isPlainObject(value)) {
     return { text: previewObject(value) ?? `{${Object.keys(value).length} keys}`, kind: 'object' };
   }
@@ -257,7 +257,9 @@ function serializeForCopy(value: unknown, binaryFormat: BinaryCopyFormat): unkno
     return { __type: 'Uint8Array', data: Array.from(value) };
   }
   if (value instanceof ArrayBuffer) return serializeForCopy(new Uint8Array(value), binaryFormat);
-  if (Array.isArray(value)) return value.map((entry) => serializeForCopy(entry, binaryFormat));
+  if (isExpandableArray(value)) {
+    return Array.from(value, (entry) => serializeForCopy(entry, binaryFormat));
+  }
   if (isPlainObject(value)) {
     const out: Record<string, unknown> = {};
     for (const [key, entry] of Object.entries(value)) out[key] = serializeForCopy(entry, binaryFormat);

src/features/panels/RawMessages/describeValue.test.ts

@@ -35,4 +35,16 @@ describe('describeValue', () => {
     expect(visual.text).toContain('100.500000000');
     expect(visual.kind).toBe('number');
   });
+
+  it('describes Float64Array as an expandable Array(n) preview', () => {
+    const visual = describeValue(new Float64Array(16), 256);
+    expect(visual.text).toBe('Array(16)');
+    expect(visual.kind).toBe('array');
+  });
+
+  it('still treats Uint8Array as binary', () => {
+    const visual = describeValue(new Uint8Array([0x00, 0x01]), 256);
+    expect(visual.kind).toBe('binary');
+    expect(visual.text).toBe('Uint8Array(2) 0x0001');
+  });
 });

src/features/panels/RawMessages/shapeTree.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest';
 import type { MessageEvent } from '@/core/types/ros';
-import { buildRowsForMessageEvent } from './shapeTree';
+import { buildRowsForMessageEvent, buildRowsForShape } from './shapeTree';
 
 describe('buildRowsForMessageEvent', () => {
   it('includes log_time and publish_time rows before message', () => {
@@ -17,3 +17,35 @@ describe('buildRowsForMessageEvent', () => {
     expect(shape.signature.startsWith('log_time:time|publish_time:time|')).toBe(true);
   });
 });
+
+describe('buildRowsForShape typed arrays', () => {
+  it('expands Float64Array fields the same way as regular arrays', () => {
+    const { rows } = buildRowsForShape(
+      {
+        name: ['abad_L_Joint', 'hip_L_Joint'],
+        position: new Float64Array([-1.6e-10, 0.25]),
+      },
+      4,
+      2000,
+    );
+    const byPath = new Map(rows.map((row) => [row.path, row]));
+
+    expect(byPath.get('message.position')).toMatchObject({
+      expandable: true,
+      parentIsArray: false,
+    });
+    expect(byPath.get('message.position.0')).toMatchObject({
+      key: '0',
+      expandable: false,
+      parentIsArray: true,
+    });
+    expect(byPath.has('message.position.1')).toBe(true);
+  });
+
+  it('keeps Uint8Array payloads as a non-expandable binary leaf', () => {
+    const { rows } = buildRowsForShape({ data: new Uint8Array([1, 2, 3, 4]) }, 4, 2000);
+    const dataRow = rows.find((row) => row.path === 'message.data');
+    expect(dataRow).toMatchObject({ expandable: false });
+    expect(rows.some((row) => row.path === 'message.data.0')).toBe(false);
+  });
+});