Makre sure CameraStreams dont't get re-created constantly

Author: ashitaka1

pour/vinoweb/src/RobotApp.svelte

@@ -51,40 +51,31 @@
     }
     const initialJoints = Array.from(jointGenerator()) as Joint[];
 
+    // --- $state-ful joint arrays ---
+    let leftJoints = $state([...initialJoints]);
+    let rightJoints = $state([...initialJoints]);
+
     // --- Define panes data ---
-    let panesData = $derived(
-        status === "picking"  ?
-            [
-                {
-                    joints: Array.from(initialJoints) as Joint[],
-                    tableTitle: "Left Arm",
-                    camera: {
-                        name: "cam-left",
-                        partID: "xxx",
-                        label: "Left Camera",
-                    },
-                },
-            ] :
-            [
-                {
-                    joints: Array.from(initialJoints) as Joint[],
-                    tableTitle: "Left Arm",
-                    camera: {
-                        name: "cam-left",
-                        partID: "xxx",
-                        label: "Left Camera",
-                    },
-                },        
-            {
-                joints: Array.from(initialJoints) as Joint[],
-                tableTitle: "Right Arm",
-                camera: {
-                    name: "cam-right",
-                    partID: "xxx",
-                    label: "Right Camera",
-                },
+    let panesData = $state([
+        {
+            joints: leftJoints,
+            tableTitle: "Left Arm",
+            camera: {
+                name: "cam-left",
+                partID: "xxx",
+                label: "Left Camera",
+            },
+        },
+        {
+            joints: rightJoints,
+            tableTitle: "Right Arm",
+            camera: {
+                name: "cam-right",
+                partID: "xxx",
+                label: "Right Camera",
             },
-        ])
+        },
+    ]);
 
     // --- Robot client and polling logic ---
     const robotClientStore = useRobotClient(() => "xxx");
@@ -164,7 +155,10 @@
 <div class="app-container">
     <aside class="sidebar"></aside>
 
-    <MainContent panes={panesData}>
+    <MainContent
+        panes={panesData}
+        status={status}
+    >
         {#snippet statusBar()}
             <Status message={statusMessages[status]} />
         {/snippet}

pour/vinoweb/src/lib/MainContent.svelte

@@ -21,9 +21,10 @@
     interface Props {
         statusBar: Snippet;
         panes: PaneData[];
+        status: string; // Add this line
     }
 
-    let { statusBar, panes }: Props = $props();
+    let { statusBar, panes, status }: Props = $props(); // Destructure status from props
 </script>
 
 <main class="main-content">
@@ -32,28 +33,39 @@
     </header>
 
     <section class="content-panes">
-        {#each panes as pane, i}
-            <div
-                class="expand-pane"
-                transition:scale={{ duration: 350 }}
+        <div class="expand-pane">
+            <DataPane
+                mode={status === "picking" ? "embedded" : "side-by-side"}
             >
-                <DataPane
-                    mode={panes.length === 1 ? "embedded" : "side-by-side"}
-                >
+                {#snippet table()}
+                    <JointTable joints={panes[0].joints} />
+                {/snippet}
+                {#snippet camera()}
+                    <CameraFeed
+                        name={panes[0].camera.name}
+                        partID={panes[0].camera.partID}
+                        label={panes[0].camera.label}
+                        overlay={status === "picking" ? table : undefined}
+                    />
+                {/snippet}
+            </DataPane>
+        </div>
+        {#if status !== "picking"}
+            <div class="expand-pane">
+                <DataPane mode="side-by-side">
                     {#snippet table()}
-                        <JointTable joints={pane.joints} />
+                        <JointTable joints={panes[1].joints} />
                     {/snippet}
                     {#snippet camera()}
                         <CameraFeed
-                            name={pane.camera.name}
-                            partID={pane.camera.partID}
-                            label={pane.camera.label}
-                            overlay={panes.length === 1 ? table : undefined}
+                            name={panes[1].camera.name}
+                            partID={panes[1].camera.partID}
+                            label={panes[1].camera.label}
                         />
                     {/snippet}
                 </DataPane>
             </div>
-        {/each}
+        {/if}
     </section>
 </main>