fix(layout): auto-layout image panels for foxglove protobuf MCAP

Extend isRosImageSchema to recognize foxglove.CompressedImage and related
protobuf image types. Use buildImageRows for multi-camera color-only
datasets (e.g. NuScenes) while keeping planColorDepthCameraRows for
depth/color robot bags.

Author: joaner

src/features/layout/autoLayout/applyDefaultRosDockLayout.test.ts

@@ -202,4 +202,35 @@ describe('buildDefaultRosFoxgloveLayoutData', () => {
     expect(rawSnapshots).toHaveLength(1);
     expect((rawSnapshots[0]?.config as { topic?: string }).topic).toBe('/observations/joint_states');
   });
+
+  it('lays out six NuScenes protobuf CompressedImage streams without RawMessages fallback', () => {
+    const topics: TopicInfo[] = [
+      { name: '/CAM_FRONT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_FRONT_LEFT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_FRONT_RIGHT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_BACK/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_BACK_LEFT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_BACK_RIGHT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/imu', type: 'IMU' },
+    ];
+
+    const data = buildDefaultRosFoxgloveLayoutData(topics);
+    const ids = collectMosaicPanelIds(data.layout);
+    const panelTypes = ids.map((id) => getPanelTypeFromId(id));
+    expect(panelTypes.filter((type) => type === 'Image')).toHaveLength(6);
+    expect(panelTypes.filter((type) => type === 'RawMessages')).toHaveLength(0);
+
+    const imageTopics = Object.values(data.configById)
+      .map((config) => (config as { topic?: string }).topic)
+      .filter((topic): topic is string => Boolean(topic))
+      .sort();
+    expect(imageTopics).toEqual([
+      '/CAM_BACK/image_rect_compressed',
+      '/CAM_BACK_LEFT/image_rect_compressed',
+      '/CAM_BACK_RIGHT/image_rect_compressed',
+      '/CAM_FRONT/image_rect_compressed',
+      '/CAM_FRONT_LEFT/image_rect_compressed',
+      '/CAM_FRONT_RIGHT/image_rect_compressed',
+    ]);
+  });
 });

src/features/layout/autoLayout/applyDefaultRosDockLayout.ts

@@ -15,10 +15,12 @@ import {
   type FoxgloveLayoutData,
   type FoxgloveMosaicNode,
 } from '@/core/preferences/foxgloveLayout';
-import { planColorDepthCameraRows } from '@/features/layout/autoLayout/planRosImageGrid';
+import { planColorDepthCameraRows, isDepthImageTopicName } from '@/features/layout/autoLayout/planRosImageGrid';
+import { buildImageRows } from '@/features/layout/autoLayout/buildImageRows';
+import { selectImageTopicsForAutoLayout } from '@/features/layout/autoLayout/imageTopicSelection';
 import { heuristicAudioInfoTopics } from '@/features/panels/Audio/core/resolveAudioInfo';
 import { getPanelDefinition } from '@/features/panels/registry';
-import { isAudioCommonInfoSchema, isJointStateSchema, isRawAudioSchema, normalizeRosSchemaName } from '@/shared/ros/rosMessageTypes';
+import { isAudioCommonInfoSchema, isJointStateSchema, isRawAudioSchema, isRosImageSchema, normalizeRosSchemaName } from '@/shared/ros/rosMessageTypes';
 import { pickDefaultRawMessagesTopic } from '@/features/layout/autoLayout/pickDefaultRawMessagesTopic';
 
 function imageTabTitle(topic: string): string {
@@ -230,24 +232,41 @@ export function buildDefaultRosFoxgloveLayoutData(
   topics: ReadonlyArray<TopicInfo>,
   options?: BuildDefaultRosLayoutOptions,
 ): FoxgloveLayoutData {
-  const { colorRow, depthRow } = planColorDepthCameraRows(topics);
   const configById: Record<string, FoxgloveConfig> = {};
   const hdf5Dataset = isHdf5Dataset(topics, options?.publishersByTopic);
 
   const stackParts: FoxgloveMosaicNode[] = [];
   const usedImageTopics = new Set<string>();
-  const colorImageIds = appendImagePanelsForRow(colorRow, configById);
-  const depthImageIds = appendImagePanelsForRow(depthRow, configById);
-  for (const topic of colorRow) {
-    if (topic) usedImageTopics.add(topic);
-  }
-  for (const topic of depthRow) {
-    if (topic) usedImageTopics.add(topic);
+
+  const pickedImageTopics = selectImageTopicsForAutoLayout(topics);
+  const hasDepthImageStreams = topics.some(
+    (topic) => isRosImageSchema(topic.type) && isDepthImageTopicName(topic.name),
+  );
+
+  if (hasDepthImageStreams) {
+    const { colorRow, depthRow } = planColorDepthCameraRows(topics);
+    const colorImageIds = appendImagePanelsForRow(colorRow, configById);
+    const depthImageIds = appendImagePanelsForRow(depthRow, configById);
+    for (const topic of colorRow) {
+      if (topic) usedImageTopics.add(topic);
+    }
+    for (const topic of depthRow) {
+      if (topic) usedImageTopics.add(topic);
+    }
+    const colorMosaic = rowMosaicFromPanelIds(colorImageIds);
+    const depthMosaic = rowMosaicFromPanelIds(depthImageIds);
+    if (colorMosaic) stackParts.push(colorMosaic);
+    if (depthMosaic) stackParts.push(depthMosaic);
+  } else if (pickedImageTopics.length > 0) {
+    for (const row of buildImageRows(pickedImageTopics)) {
+      const imageIds = appendImagePanelsForRow(row, configById);
+      for (const topic of row) {
+        usedImageTopics.add(topic);
+      }
+      const mosaic = rowMosaicFromPanelIds(imageIds);
+      if (mosaic) stackParts.push(mosaic);
+    }
   }
-  const colorMosaic = rowMosaicFromPanelIds(colorImageIds);
-  const depthMosaic = rowMosaicFromPanelIds(depthImageIds);
-  if (colorMosaic) stackParts.push(colorMosaic);
-  if (depthMosaic) stackParts.push(depthMosaic);
 
   const audioTopicCandidates = collectTopicsForPanelSchemas(topics, 'Audio')
     .sort((a, b) => audioTopicPriorityScore(b) - audioTopicPriorityScore(a) || a.localeCompare(b))

src/features/layout/autoLayout/imageTopicSelection.test.ts

@@ -54,6 +54,18 @@ describe('selectImageTopicsForAutoLayout', () => {
     ]);
   });
 
+  it('includes foxglove protobuf CompressedImage topics', () => {
+    const topics: TopicInfo[] = [
+      { name: '/CAM_FRONT/image_rect_compressed', type: 'foxglove.CompressedImage' },
+      { name: '/CAM_BACK/image_rect_compressed', type: 'foxglove.CompressedImage' },
+    ];
+    const picked = selectImageTopicsForAutoLayout(topics);
+    expect(picked).toEqual([
+      '/CAM_BACK/image_rect_compressed',
+      '/CAM_FRONT/image_rect_compressed',
+    ]);
+  });
+
   it('keeps distinct non-overlapping streams', () => {
     const topics: TopicInfo[] = [
       { name: '/camera/left/color/image_resized/compressed', type: 'sensor_msgs/msg/CompressedImage' },

src/shared/ros/rosMessageTypes.test.ts

@@ -63,7 +63,10 @@ describe('rosMessageTypes', () => {
     expect(isRosImageSchema('sensor_msgs/msg/Image')).toBe(true);
     expect(isRosImageSchema('sensor_msgs/msg/CompressedImage')).toBe(true);
     expect(isRosImageSchema(ROS_MSG_FOXGLOVE_COMPRESSED_VIDEO)).toBe(true);
+    expect(isRosImageSchema('foxglove.CompressedImage')).toBe(true);
     expect(isRosImageSchema('sensor_msgs/msg/CameraInfo')).toBe(false);
+    expect(isRosImageSchema('foxglove.ImageAnnotations')).toBe(false);
+    expect(isRosImageSchema('foxglove.CameraCalibration')).toBe(false);
   });
 
   it('detects RawAudio and audio panel main schemas', () => {

src/shared/ros/rosMessageTypes.ts

@@ -34,11 +34,29 @@ export function isJointStateSchema(type: string): boolean {
 }
 
 export function isRosImageSchema(type: string): boolean {
-  return (
+  if (
     matchesRosSchema(type, ROS_MSG_SENSOR_IMAGE) ||
     matchesRosSchema(type, ROS_MSG_SENSOR_COMPRESSED_IMAGE) ||
     matchesRosSchema(type, ROS_MSG_FOXGLOVE_COMPRESSED_VIDEO)
-  );
+  ) {
+    return true;
+  }
+
+  const normalized = normalizeRosSchemaName(type);
+  if (normalized.includes('compressedimage')) {
+    return true;
+  }
+  if (normalized.includes('compressedvideo')) {
+    return true;
+  }
+  if (
+    /\/image$/i.test(normalized) &&
+    !normalized.includes('camerainfo') &&
+    !normalized.includes('annotations')
+  ) {
+    return true;
+  }
+  return false;
 }
 
 export function isPoseStampedSchema(type: string): boolean {