react-viewer: collapsible per-sensor stream modules, compact spacing, motion enabled by default

Author: sareluzi

wrappers/rest-api/tools/react-viewer/src/components/DevicePanel.tsx

@@ -637,8 +637,16 @@ function SensorStreamControls({
   onStartSensorStreaming,
   onStopSensorStreaming,
 }: SensorStreamControlsProps) {
+  // Each sensor module is collapsed by default; the play button stays visible.
+  const [expandedSensors, setExpandedSensors] = useState<Set<string>>(new Set())
+  const toggleSensor = (sensorId: string) => setExpandedSensors(prev => {
+    const next = new Set(prev)
+    next.has(sensorId) ? next.delete(sensorId) : next.add(sensorId)
+    return next
+  })
+
   return (
-    <div className="space-y-3">
+    <div className="space-y-1.5">
       {sensors.map((sensor) => {
         const sensorStreamConfigs = streamsBySensor[sensor.sensor_id] || []
         if (sensorStreamConfigs.length === 0) return null
@@ -651,6 +659,7 @@ function SensorStreamControls({
         const sensorConfig = sensorConfigs[sensor.sensor_id]
 
         const canStartSensor = hasEnabledSensorStreams && streamingMode !== 'pipeline'
+        const isExpanded = expandedSensors.has(sensor.sensor_id)
 
         const computeCommonOptions = () => {
           const profiles = sensor.supported_stream_profiles
@@ -677,15 +686,26 @@ function SensorStreamControls({
         const { resolutions: availableResolutions, fps: availableFps } = computeCommonOptions()
 
         return (
-          <div key={sensor.sensor_id} className="bg-gray-800/50 rounded-lg p-2">
-            {/* Sensor header with per-sensor start button */}
-            <div className="flex items-center justify-between mb-2">
-              <div className="flex items-center gap-2">
-                <span className="text-sm font-medium text-gray-300">{sensor.name}</span>
+          <div key={sensor.sensor_id} className="bg-gray-800/50 rounded-lg px-2 py-1">
+            {/* Sensor header: collapse toggle (name) on the left, start button always visible on the right */}
+            <div className={`flex items-center justify-between ${isExpanded ? 'mb-2' : ''}`}>
+              <button
+                onClick={() => toggleSensor(sensor.sensor_id)}
+                className="flex items-center gap-2 flex-1 min-w-0 text-left"
+                aria-expanded={isExpanded}
+                title={isExpanded ? 'Collapse' : 'Expand stream settings'}
+              >
+                <svg
+                  className={`w-3 h-3 shrink-0 text-gray-400 transition-transform ${isExpanded ? 'rotate-90' : ''}`}
+                  fill="none" stroke="currentColor" viewBox="0 0 24 24"
+                >
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                </svg>
+                <span className="text-sm font-medium text-gray-300 truncate">{sensor.name}</span>
                 {isSensorStreaming && (
-                  <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse" />
+                  <span className="w-2 h-2 bg-green-500 rounded-full animate-pulse shrink-0" />
                 )}
-              </div>
+              </button>
               <button
                 onClick={() => isSensorStreaming
                   ? onStopSensorStreaming(sensor.sensor_id)
@@ -715,6 +735,7 @@ function SensorStreamControls({
               </div>
             )}
 
+            {isExpanded && (<>
             {sensorConfig && !sensorConfig.isMotionSensor && (
               <div className="mb-2 flex items-center gap-2 text-xs">
                 <div className="flex items-center gap-1">
@@ -765,6 +786,7 @@ function SensorStreamControls({
                 />
               ))}
             </div>
+            </>)}
           </div>
         )
       })}

wrappers/rest-api/tools/react-viewer/src/store/index.ts

@@ -41,7 +41,9 @@ function buildStreamConfigs(sensors: SensorInfo[]): StreamConfig[] {
     )
     for (const profile of profiles) {
       const streamTypeLower = profile.stream_type.toLowerCase()
-      const enableByDefault = streamTypeLower === 'depth' || streamTypeLower === 'color'
+      const enableByDefault =
+        streamTypeLower === 'depth' || streamTypeLower === 'color' ||
+        streamTypeLower.includes('gyro') || streamTypeLower.includes('accel')
       configs.push({
         sensor_id: sensor.sensor_id,
         stream_type: profile.stream_type,