From b92bd5451f755f5cc6ac78d5869f3e841622e526 Mon Sep 17 00:00:00 2001
From: ConnorN <connor.needham2015@gmail.com>
Date: Tue, 16 Dec 2025 15:06:43 -0500
Subject: [PATCH 1/2] feat: dynamic tile creation

---
 src/components/panels/MosaicDashboard.tsx | 243 ++++++++++++++++++++--
 1 file changed, 225 insertions(+), 18 deletions(-)

diff --git a/src/components/panels/MosaicDashboard.tsx b/src/components/panels/MosaicDashboard.tsx
index fea6482..be73a84 100644
--- a/src/components/panels/MosaicDashboard.tsx
+++ b/src/components/panels/MosaicDashboard.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import React, { useState, ReactElement } from 'react';
+import React, { useState, ReactElement, useContext, useRef, useEffect, memo } from 'react';
 import {
   Mosaic,
   MosaicWindow,
   MosaicNode,
   MosaicPath,
+  MosaicContext,
 } from 'react-mosaic-component';
 import 'react-mosaic-component/react-mosaic-component.css';
 import MapView from './MapView';
@@ -17,10 +18,142 @@ import GasSensor from './GasSensor';
 import NetworkHealthTelemetryPanel from './NetworkHealthTelemetryPanel';
 import VideoControls from './VideoControls';
 
-type MosaicKey = 'mapView' | 'rosMonitor' | 'waypointList' | 'videoControls' | 'gasSensor' | 'orientationDisplay' | 'goalSetter' | 'networkHealthMonitor';
+type MosaicKey =
+  | 'mapView'
+  | 'rosMonitor'
+  | 'waypointList'
+  | 'videoControls'
+  | 'gasSensor'
+  | 'orientationDisplay'
+  | 'goalSetter'
+  | 'networkHealthMonitor';
+
+const TILE_DISPLAY_NAMES: Record<MosaicKey, string> = {
+  mapView: 'Map View',
+  rosMonitor: 'System Telemetry',
+  waypointList: 'Waypoint List',
+  videoControls: 'Video Stream',
+  gasSensor: 'Science',
+  orientationDisplay: 'Rover Orientation',
+  goalSetter: 'Nav2',
+  networkHealthMonitor: 'Connection Health',
+};
+
+const ALL_TILES: MosaicKey[] = [
+  'mapView',
+  'rosMonitor',
+  'networkHealthMonitor',
+  'orientationDisplay',
+  'videoControls',
+  'waypointList',
+  'gasSensor',
+  'goalSetter',
+];
+
+type PendingAdd = {
+  pathKey: string;
+  path: MosaicPath;
+  direction: 'row' | 'column';
+} | null;
+
+
+const Controls = memo<{ 
+  id: MosaicKey; 
+  path: MosaicPath; 
+  pendingAdd: PendingAdd;
+  setPendingAdd: (value: PendingAdd) => void;
+}>(({ id, path, pendingAdd, setPendingAdd }) => {
+  const { mosaicActions } = useContext(MosaicContext);
+  const pathKey = JSON.stringify(path);
+  const showDropdown = pendingAdd?.pathKey === pathKey;
+  const dropdownRef = useRef<HTMLDivElement>(null);
+
+  const splitAndAdd = (direction: 'row' | 'column', newTile: MosaicKey) => {
+    const splitNode: MosaicNode<MosaicKey> = {
+      direction,
+      first: id,
+      second: newTile,
+      splitPercentage: 60,
+    };
+
+    mosaicActions.replaceWith(path, splitNode);
+    setPendingAdd(null);
+  };
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    if (!showDropdown) return;
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node)) {
+        setPendingAdd(null);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showDropdown, setPendingAdd]);
+
+  return (
+    <div ref={dropdownRef} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+      <button
+        className="tile-btn"
+        title="Add tile to the right"
+        aria-label="Add tile to the right"
+        onClick={(e) => {
+          e.stopPropagation();
+          setPendingAdd({ pathKey, path, direction: 'row' });
+        }}
+      >
+        ➕ (Right)
+      </button>
+
+      <button
+        className="tile-btn"
+        title="Add tile below"
+        aria-label="Add tile below"
+        onClick={(e) => {
+          e.stopPropagation();
+          setPendingAdd({ pathKey, path, direction: 'column' });
+        }}
+      >
+        ➕ (Below)
+      </button>
+
+      {showDropdown ? (
+        <select
+          className="tile-select"
+          aria-label="Select tile to add"
+          onClick={(e) => e.stopPropagation()}
+          onChange={(e) => {
+            const value = e.target.value as MosaicKey;
+            // Validate pendingAdd state and selected value before proceeding
+            if (pendingAdd && value) {
+              splitAndAdd(pendingAdd.direction, value);
+            }
+          }}
+          defaultValue=""
+        >
+          <option value="" disabled>
+            Pick tile…
+          </option>
+          {ALL_TILES.filter((t) => t !== id).map((t) => (
+            <option key={t} value={t}>
+              {TILE_DISPLAY_NAMES[t]}
+            </option>
+          ))}
+        </select>
+      ) : null}
+    </div>
+  );
+});
+
+Controls.displayName = 'Controls';
 
 const MosaicDashboard: React.FC = () => {
-  // TODO: paramaterize layout for custom layout configs
+  // TODO: parameterize layout for custom layout configs
   const [mosaicLayout, setMosaicLayout] = useState<MosaicNode<MosaicKey> | null>({
     direction: 'row',
     first: {
@@ -56,61 +189,110 @@ const MosaicDashboard: React.FC = () => {
     splitPercentage: 60,
   });
 
+  const [pendingAdd, setPendingAdd] = useState<PendingAdd>(null);
+
   const renderTile = (id: MosaicKey, path: MosaicPath): ReactElement => {
     switch (id) {
       case 'mapView':
         return (
-          <MosaicWindow<MosaicKey> title="Map View" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Map View"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <div style={{ height: '100%', backgroundColor: '#121212' }}>
-              <MapView offline/>
+              <MapView offline />
             </div>
           </MosaicWindow>
         );
+
       case 'waypointList':
         return (
-          <MosaicWindow<MosaicKey> title="Waypoint List" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Waypoint List"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <WaypointList />
           </MosaicWindow>
         );
+
       case 'videoControls':
         return (
-          <MosaicWindow<MosaicKey> title="Video Stream" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Video Stream"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <VideoControls />
           </MosaicWindow>
         );
+
       case 'rosMonitor':
         return (
-          <MosaicWindow<MosaicKey> title="System Telemetry" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="System Telemetry"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <SystemTelemetryPanel />
           </MosaicWindow>
         );
+
       case 'networkHealthMonitor':
         return (
-          <MosaicWindow<MosaicKey> title="Connection Health" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Connection Health"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <NetworkHealthTelemetryPanel />
           </MosaicWindow>
         );
+
       case 'orientationDisplay':
         return (
-          <MosaicWindow<MosaicKey> title="Rover Orientation" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Rover Orientation"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <OrientationDisplayPanel />
           </MosaicWindow>
         );
+
       case 'gasSensor':
-          return (
-            <MosaicWindow<MosaicKey> title="Science" path={path}>
-              <GasSensor/>
-            </MosaicWindow>
-          );
-      
+        return (
+          <MosaicWindow<MosaicKey>
+            title="Science"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
+            <GasSensor />
+          </MosaicWindow>
+        );
+
       case 'goalSetter':
         return (
-          <MosaicWindow<MosaicKey> title="Nav2" path={path}>
+          <MosaicWindow<MosaicKey>
+            title="Nav2"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
             <GoalSetterPanel />
           </MosaicWindow>
         );
+
       default:
-        return <div>Unknown tile</div>;
+        return (
+          <MosaicWindow<MosaicKey>
+            title="Unknown tile"
+            path={path}
+            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+          >
+            <div>Unknown tile</div>
+          </MosaicWindow>
+        );
     }
   };
 
@@ -141,6 +323,31 @@ const MosaicDashboard: React.FC = () => {
           background-color: #1e1e1e;
           color: #f1f1f1;
         }
+        .tile-btn {
+          background: transparent;
+          border: 1px solid #444;
+          color: #2d2d2d;
+          border-radius: 6px;
+          padding: 2px 6px;
+          cursor: pointer;
+          line-height: 1;
+        }
+        .tile-btn:hover {
+          border-color: #666;
+        }
+        .tile-select {
+          background: #2d2d2d;
+          color: #f1f1f1;
+          border: 1px solid #444;
+          border-radius: 6px;
+          padding: 2px 6px;
+        }
+        .mosaic-window-toolbar .expand-button {
+          display: none !important;
+        }
+        .mosaic-window-toolbar .bp5-button.bp5-icon-more .control-text {
+          display: none;
+        }
       `}</style>
     </div>
   );

From 1188746b243a9a788d423e1d4540f8e757e5da48 Mon Sep 17 00:00:00 2001
From: ConnorN <connor.needham2015@gmail.com>
Date: Wed, 17 Dec 2025 16:20:46 -0500
Subject: [PATCH 2/2] fix: use unique tile ids

---
 src/components/panels/MosaicDashboard.tsx | 156 +++++++++++++---------
 1 file changed, 90 insertions(+), 66 deletions(-)

diff --git a/src/components/panels/MosaicDashboard.tsx b/src/components/panels/MosaicDashboard.tsx
index be73a84..a1d4be6 100644
--- a/src/components/panels/MosaicDashboard.tsx
+++ b/src/components/panels/MosaicDashboard.tsx
@@ -18,7 +18,7 @@ import GasSensor from './GasSensor';
 import NetworkHealthTelemetryPanel from './NetworkHealthTelemetryPanel';
 import VideoControls from './VideoControls';
 
-type MosaicKey =
+type TileType =
   | 'mapView'
   | 'rosMonitor'
   | 'waypointList'
@@ -28,7 +28,9 @@ type MosaicKey =
   | 'goalSetter'
   | 'networkHealthMonitor';
 
-const TILE_DISPLAY_NAMES: Record<MosaicKey, string> = {
+type TileId = `${TileType}:${string}`;
+
+const TILE_DISPLAY_NAMES: Record<TileType, string> = {
   mapView: 'Map View',
   rosMonitor: 'System Telemetry',
   waypointList: 'Waypoint List',
@@ -39,7 +41,7 @@ const TILE_DISPLAY_NAMES: Record<MosaicKey, string> = {
   networkHealthMonitor: 'Connection Health',
 };
 
-const ALL_TILES: MosaicKey[] = [
+const ALL_TILE_TYPES: TileType[] = [
   'mapView',
   'rosMonitor',
   'networkHealthMonitor',
@@ -50,16 +52,26 @@ const ALL_TILES: MosaicKey[] = [
   'goalSetter',
 ];
 
-type PendingAdd = {
-  pathKey: string;
-  path: MosaicPath;
-  direction: 'row' | 'column';
-} | null;
+function makeTileId(type: TileType): TileId {
+  const uid = crypto.randomUUID();
+  return `${type}:${uid}`;
+}
+
+function tileTypeOf(id: TileId): TileType {
+  return id.split(':', 1)[0] as TileType;
+}
 
+type PendingAdd =
+  | {
+      pathKey: string;
+      path: MosaicPath;
+      direction: 'row' | 'column';
+    }
+  | null;
 
-const Controls = memo<{ 
-  id: MosaicKey; 
-  path: MosaicPath; 
+const Controls = memo<{
+  id: TileId;
+  path: MosaicPath;
   pendingAdd: PendingAdd;
   setPendingAdd: (value: PendingAdd) => void;
 }>(({ id, path, pendingAdd, setPendingAdd }) => {
@@ -68,11 +80,14 @@ const Controls = memo<{
   const showDropdown = pendingAdd?.pathKey === pathKey;
   const dropdownRef = useRef<HTMLDivElement>(null);
 
-  const splitAndAdd = (direction: 'row' | 'column', newTile: MosaicKey) => {
-    const splitNode: MosaicNode<MosaicKey> = {
+  const splitAndAdd = (direction: 'row' | 'column', newType: TileType) => {
+
+    const newId = makeTileId(newType);
+
+    const splitNode: MosaicNode<TileId> = {
       direction,
       first: id,
-      second: newTile,
+      second: newId,
       splitPercentage: 60,
     };
 
@@ -80,7 +95,6 @@ const Controls = memo<{
     setPendingAdd(null);
   };
 
-  // Close dropdown when clicking outside
   useEffect(() => {
     if (!showDropdown) return;
 
@@ -96,6 +110,8 @@ const Controls = memo<{
     };
   }, [showDropdown, setPendingAdd]);
 
+  const currentType = tileTypeOf(id);
+
   return (
     <div ref={dropdownRef} style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
       <button
@@ -128,10 +144,10 @@ const Controls = memo<{
           aria-label="Select tile to add"
           onClick={(e) => e.stopPropagation()}
           onChange={(e) => {
-            const value = e.target.value as MosaicKey;
-            // Validate pendingAdd state and selected value before proceeding
+            const value = e.target.value as TileType;
             if (pendingAdd && value) {
               splitAndAdd(pendingAdd.direction, value);
+              e.target.value = '';
             }
           }}
           defaultValue=""
@@ -139,7 +155,7 @@ const Controls = memo<{
           <option value="" disabled>
             Pick tile…
           </option>
-          {ALL_TILES.filter((t) => t !== id).map((t) => (
+          {ALL_TILE_TYPES.map((t) => (
             <option key={t} value={t}>
               {TILE_DISPLAY_NAMES[t]}
             </option>
@@ -153,34 +169,33 @@ const Controls = memo<{
 Controls.displayName = 'Controls';
 
 const MosaicDashboard: React.FC = () => {
-  // TODO: parameterize layout for custom layout configs
-  const [mosaicLayout, setMosaicLayout] = useState<MosaicNode<MosaicKey> | null>({
+  const [mosaicLayout, setMosaicLayout] = useState<MosaicNode<TileId> | null>({
     direction: 'row',
     first: {
       direction: 'column',
-      first: 'mapView',
+      first: makeTileId('mapView'),
       second: {
         direction: 'row',
         first: {
           direction: 'row',
-          first: 'rosMonitor',
-          second: 'networkHealthMonitor',
+          first: makeTileId('rosMonitor'),
+          second: makeTileId('networkHealthMonitor'),
         },
-        second: 'orientationDisplay',
+        second: makeTileId('orientationDisplay'),
         splitPercentage: 55,
       },
       splitPercentage: 55,
     },
     second: {
       direction: 'column',
-      first: 'videoControls',
+      first: makeTileId('videoControls'),
       second: {
         direction: 'row',
-        first: 'waypointList',
+        first: makeTileId('waypointList'),
         second: {
           direction: 'row',
-          first: 'gasSensor',
-          second: 'goalSetter',
+          first: makeTileId('gasSensor'),
+          second: makeTileId('goalSetter'),
         },
         splitPercentage: 50,
       },
@@ -191,14 +206,17 @@ const MosaicDashboard: React.FC = () => {
 
   const [pendingAdd, setPendingAdd] = useState<PendingAdd>(null);
 
-  const renderTile = (id: MosaicKey, path: MosaicPath): ReactElement => {
-    switch (id) {
+  const renderTile = (id: TileId, path: MosaicPath): ReactElement => {
+    const type = tileTypeOf(id);
+    switch (type) {
       case 'mapView':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Map View"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <div style={{ height: '100%', backgroundColor: '#121212' }}>
               <MapView offline />
@@ -208,10 +226,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'waypointList':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Waypoint List"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <WaypointList />
           </MosaicWindow>
@@ -219,10 +239,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'videoControls':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Video Stream"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <VideoControls />
           </MosaicWindow>
@@ -230,10 +252,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'rosMonitor':
         return (
-          <MosaicWindow<MosaicKey>
-            title="System Telemetry"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <SystemTelemetryPanel />
           </MosaicWindow>
@@ -241,10 +265,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'networkHealthMonitor':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Connection Health"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <NetworkHealthTelemetryPanel />
           </MosaicWindow>
@@ -252,10 +278,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'orientationDisplay':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Rover Orientation"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <OrientationDisplayPanel />
           </MosaicWindow>
@@ -263,10 +291,12 @@ const MosaicDashboard: React.FC = () => {
 
       case 'gasSensor':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Science"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <GasSensor />
           </MosaicWindow>
@@ -274,34 +304,28 @@ const MosaicDashboard: React.FC = () => {
 
       case 'goalSetter':
         return (
-          <MosaicWindow<MosaicKey>
-            title="Nav2"
+          <MosaicWindow<TileId>
+            title={TILE_DISPLAY_NAMES[type]}
             path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
+            additionalControls={
+              <Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />
+            }
           >
             <GoalSetterPanel />
           </MosaicWindow>
         );
 
       default:
-        return (
-          <MosaicWindow<MosaicKey>
-            title="Unknown tile"
-            path={path}
-            additionalControls={<Controls id={id} path={path} pendingAdd={pendingAdd} setPendingAdd={setPendingAdd} />}
-          >
-            <div>Unknown tile</div>
-          </MosaicWindow>
-        );
+        return <div>Unknown tile</div>;
     }
   };
 
   return (
     <div style={{ height: '100%', width: '100%' }}>
-      <Mosaic<MosaicKey>
-        renderTile={renderTile}
-        initialValue={mosaicLayout}
+      <Mosaic<TileId>
+        value={mosaicLayout}
         onChange={setMosaicLayout}
+        renderTile={renderTile}
         blueprintNamespace="bp5"
       />
       <style jsx global>{`