switch icon for splits and fix issues for build

GEMstack/onboard/visualization/sr_viz/threeD/package.json

@@ -23,6 +23,7 @@
     "react-icons": "^5.5.0",
     "react-resizable-panels": "^3.0.1",
     "three": "^0.175.0",
+    "three-stdlib": "^2.36.0",
     "urdf-loader": "^0.12.4"
   },
   "devDependencies": {

GEMstack/onboard/visualization/sr_viz/threeD/src/app/rosbagViewer/page.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import React from "react";
 import RosbagViewer from "@/components/RosbagViewer";
 import { useRouter } from "next/navigation";
 import Button from "@mui/material/Button";

GEMstack/onboard/visualization/sr_viz/threeD/src/components/PanelManager.tsx

@@ -42,7 +42,7 @@ export const PanelManager = ({
 }) => {
     const [rootPanel, setRootPanel] = useState<PanelNode>(createPanel("video"));
 
-    const renderPanelNode = (node: PanelNode): JSX.Element => {
+    const renderPanelNode = (node: PanelNode) => {
         if ("split" in node) {
             return (
                 <Panel>
@@ -94,12 +94,12 @@ export const PanelManager = ({
                     rootPanel={rootPanel}
                 />
                 {node.type === "video" && (
-                    <VideoPanel messages={messageMap["video"]} initialTopic={Object.keys(messageMap["video"])[0]} />
+                    <VideoPanel messages={messageMap["video"] as Record<string, any[]>} initialTopic={Object.keys(messageMap["video"])[0]} />
                 )}
                 {node.type === "pointcloud" && (
                     <PointCloudPanel
-                        messages={messageMap["pointcloud"]}
-                        tfMessages={messageMap["tf"]}
+                        messages={messageMap["pointcloud"] as Record<string, any[]>}
+                        tfMessages={messageMap["tf"] as any[]}
                         initialTopic={Object.keys(messageMap["pointcloud"])[0]}
                     />
                 )}
@@ -152,7 +152,7 @@ function closePanel(
         return node;
     }
     const newRoot = helper(root);
-    setRoot(newRoot);
+    if (newRoot) setRoot(newRoot);
 }
 
 function changePanelType(
@@ -218,7 +218,7 @@ const PanelMenu = ({
                     }}
                 >
                     <ListItemIcon>
-                        <HorizontalSplitIcon fontSize="small" />
+                        <VerticalSplitIcon fontSize="small" />
                     </ListItemIcon>
                     <ListItemText>Split Horizontally</ListItemText>
                 </MenuItem>
@@ -229,7 +229,7 @@ const PanelMenu = ({
                     }}
                 >
                     <ListItemIcon>
-                        <VerticalSplitIcon fontSize="small" />
+                        <HorizontalSplitIcon fontSize="small" />
                     </ListItemIcon>
                     <ListItemText>Split Vertically</ListItemText>
                 </MenuItem>

GEMstack/onboard/visualization/sr_viz/threeD/src/components/PointCloudPanel.tsx

@@ -3,7 +3,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import { useScrubber } from "./ScrubberContext";
 import * as THREE from "three";
-import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
+import { OrbitControls } from "three-stdlib";
 import { Select, SelectChangeEvent, MenuItem } from "@mui/material";
 
 function parsePointCloud2(msg: any): THREE.Points {
@@ -116,10 +116,10 @@ export const PointCloudPanel = ({
     const mountRef = useRef<HTMLDivElement>(null);
     const { startTime, currentTime } = useScrubber();
     const rendererRef = useRef<THREE.WebGLRenderer | null>(null);
-    const cameraRef = useRef<THREE.PerspectiveCamera>();
-    const sceneRef = useRef<THREE.Scene>();
-    const controlsRef = useRef<OrbitControls>();
-    const pointCloudRef = useRef<THREE.Points>();
+    const cameraRef = useRef<THREE.PerspectiveCamera | null>(null);
+    const sceneRef = useRef<THREE.Scene | null>(null);
+    const controlsRef = useRef<OrbitControls | null>(null);
+    const pointCloudRef = useRef<THREE.Points | null>(null);
     const [selectedTopic, setSelectedTopic] = useState(
         initialTopic || Object.keys(messages)[0] || ""
     );

GEMstack/onboard/visualization/sr_viz/threeD/src/components/RosbagViewer.tsx

@@ -56,8 +56,8 @@ export default function RosbagViewer() {
         if (!file) return;
 
         setMessageMap({
-            video: [],
-            pointcloud: [],
+            video: {},
+            pointcloud: {},
             tf: [],
         });
         setLoading(true);
@@ -72,7 +72,7 @@ export default function RosbagViewer() {
             (conn) => conn.type
         );
         setTopics(topicNames);
-        setTypes(topicTypes);
+        setTypes(topicTypes as string[]);
         // console.log("Topics:", topicNames, topicTypes);
 
         const videoMessages: Record<string, any[]> = {};
@@ -84,7 +84,7 @@ export default function RosbagViewer() {
                 topic: msg.topic,
                 data: msg.message,
             };
-            const type = topicTypes[topicNames.indexOf(msg.topic)];
+            const type = topicTypes[topicNames.indexOf(msg.topic)] as string;
             if (type.includes("Image")) {
                 if (!videoMessages[msg.topic]) videoMessages[msg.topic] = [];
                 videoMessages[msg.topic].push(entry);