feat: dynamic tile creation #9

ConnorNeed · 2025-12-16T19:31:01Z

Nothing benefits more from me procrastinating from exams than this webUI.

Copilot

Pull request overview

This PR adds dynamic tile creation functionality to the MosaicDashboard component, allowing users to add new panels on-the-fly in horizontal (right) or vertical (below) directions. The feature includes interactive buttons in each tile's toolbar that open a dropdown for selecting which panel to add.

Key changes:

Added Controls component with buttons to dynamically add tiles in different directions
Implemented dropdown UI for selecting which tile type to add
Fixed typo in TODO comment ("paramaterize" → "parameterize")

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-12-16T19:33:27Z

src/components/panels/MosaicDashboard.tsx

+            {ALL_TILES.filter((t) => t !== id).map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}


The tile names displayed in the dropdown and button labels are camelCase identifiers (e.g., 'mapView', 'rosMonitor') which are not user-friendly. Consider creating a mapping to display human-readable names (e.g., 'Map View', 'ROS Monitor') to improve the user experience.

Copilot · 2025-12-16T19:33:27Z

src/components/panels/MosaicDashboard.tsx

+        <button
+          className="tile-btn"
+          title="Add tile to the right"
+          onClick={(e) => {
+            e.stopPropagation();
+            setPendingAdd({ pathKey, path, direction: 'row' });
+          }}
+        >
+          ➕ (Right)
+        </button>
+
+        <button
+          className="tile-btn"
+          title="Add tile below"
+          onClick={(e) => {
+            e.stopPropagation();
+            setPendingAdd({ pathKey, path, direction: 'column' });
+          }}
+        >
+          ➕ (Below)
+        </button>


The buttons lack proper aria-label attributes for screen readers. While the title attribute is present, it only provides tooltip text on hover and is not accessible to assistive technologies. Add aria-label attributes to ensure screen reader users can understand the purpose of these buttons.

Copilot · 2025-12-16T19:33:27Z

src/components/panels/MosaicDashboard.tsx

+          <select
+            className="tile-select"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => {
+              const value = e.target.value as MosaicKey;
+              splitAndAdd(pendingAdd!.direction, value);
+            }}
+            defaultValue=""
+          >


The select dropdown appears immediately when either button is clicked, but lacks an accessible label. Add an aria-label attribute to the select element to describe its purpose for screen reader users, such as "Select tile to add".

Copilot · 2025-12-16T19:33:27Z

src/components/panels/MosaicDashboard.tsx

+        .tile-btn {
+          background: transparent;
+          border: 1px solid #444;
+          color: #2d2d2d;


The button text color is set to a very dark color (#2d2d2d) on a dark background (#2d2d2d for the title bar), making the buttons nearly invisible to users. The color should be changed to a lighter color (such as #f1f1f1) to provide sufficient contrast and ensure the buttons are visible and accessible.

Copilot · 2025-12-16T19:33:28Z

src/components/panels/MosaicDashboard.tsx

+  const Controls: React.FC<{ id: MosaicKey; path: MosaicPath }> = ({ id, path }) => {
+    const { mosaicActions } = useContext(MosaicContext);
+    const pathKey = JSON.stringify(path);
+    const showDropdown = pendingAdd?.pathKey === pathKey;
+
+    const splitAndAdd = (direction: 'row' | 'column', newTile: MosaicKey) => {
+      const splitNode: MosaicNode<MosaicKey> = {
+        direction,
+        first: id, // keep current tile
+        second: newTile,
+        splitPercentage: 60,
+      };
+
+      mosaicActions.replaceWith(path, splitNode);
+      setPendingAdd(null);
+    };
+
+    return (
+      <div style={{ display: 'flex', gap: 6, alignItems: 'center' }}>
+        <button
+          className="tile-btn"
+          title="Add tile to the right"
+          onClick={(e) => {
+            e.stopPropagation();
+            setPendingAdd({ pathKey, path, direction: 'row' });
+          }}
+        >
+          ➕ (Right)
+        </button>
+
+        <button
+          className="tile-btn"
+          title="Add tile below"
+          onClick={(e) => {
+            e.stopPropagation();
+            setPendingAdd({ pathKey, path, direction: 'column' });
+          }}
+        >
+          ➕ (Below)
+        </button>
+
+        {showDropdown ? (
+          <select
+            className="tile-select"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => {
+              const value = e.target.value as MosaicKey;
+              splitAndAdd(pendingAdd!.direction, value);
+            }}
+            defaultValue=""
+          >
+            <option value="" disabled>
+              Pick tile…
+            </option>
+            {ALL_TILES.filter((t) => t !== id).map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        ) : null}
+      </div>
+    );
+  };


The Controls component is defined inside the render function of MosaicDashboard. This will cause the Controls component to be recreated on every render, which can lead to unnecessary re-renders and potential performance issues. The Controls component should be moved outside of the MosaicDashboard component or memoized to prevent this issue.

Copilot · 2025-12-16T19:33:28Z

src/components/panels/MosaicDashboard.tsx

+  const ALL_TILES = useMemo<MosaicKey[]>(
+    () => [
+      'mapView',
+      'rosMonitor',
+      'networkHealthMonitor',
+      'orientationDisplay',
+      'videoControls',
+      'waypointList',
+      'gasSensor',
+      'goalSetter',
+    ],
+    []
+  );


The ALL_TILES constant is wrapped in useMemo with an empty dependency array, but since it contains a static array of string literals that never changes, useMemo adds unnecessary overhead without any benefit. Consider removing useMemo and declaring ALL_TILES as a const array outside the component, or at minimum as a regular const inside the component.

Copilot · 2025-12-16T19:33:28Z

src/components/panels/MosaicDashboard.tsx

+            onChange={(e) => {
+              const value = e.target.value as MosaicKey;
+              splitAndAdd(pendingAdd!.direction, value);
+            }}


The onChange handler directly casts the value without validation and uses the non-null assertion operator (pendingAdd!). If pendingAdd becomes null between the time showDropdown is evaluated and onChange is triggered, this could cause a runtime error. Consider adding a null check before calling splitAndAdd.

Copilot · 2025-12-16T19:33:28Z

src/components/panels/MosaicDashboard.tsx

+        {showDropdown ? (
+          <select
+            className="tile-select"
+            onClick={(e) => e.stopPropagation()}
+            onChange={(e) => {
+              const value = e.target.value as MosaicKey;
+              splitAndAdd(pendingAdd!.direction, value);
+            }}
+            defaultValue=""
+          >
+            <option value="" disabled>
+              Pick tile…
+            </option>
+            {ALL_TILES.filter((t) => t !== id).map((t) => (
+              <option key={t} value={t}>
+                {t}
+              </option>
+            ))}
+          </select>
+        ) : null}


The dropdown is only closed when a tile is selected via splitAndAdd. If a user clicks elsewhere on the page, the dropdown remains open and shows for that specific tile. Consider adding an onBlur handler or a click-outside handler to close the dropdown when the user clicks elsewhere, improving the user experience.

ConnorNeed · 2025-12-16T19:35:36Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2025-12-16T19:35:44Z

@ConnorNeed I've opened a new pull request, #10, to work on those changes. Once the pull request is ready, I'll request review from you.

Copilot

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated 6 comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

src/components/panels/MosaicDashboard.tsx

Copilot · 2025-12-16T20:11:55Z

src/components/panels/MosaicDashboard.tsx

+            const value = e.target.value as MosaicKey;
+            // Validate pendingAdd state and selected value before proceeding
+            if (pendingAdd && value) {
+              splitAndAdd(pendingAdd.direction, value);


The onChange handler doesn't reset the select element's value after selection. This means after selecting a tile, the dropdown will show the last selected tile instead of the placeholder "Pick tile…". Consider adding e.target.value = '' after calling splitAndAdd to reset the selection, or use a controlled component with value state.

Suggested change

splitAndAdd(pendingAdd.direction, value);

splitAndAdd(pendingAdd.direction, value);

e.target.value = '';

src/components/panels/MosaicDashboard.tsx

ConnorNeed · 2025-12-16T20:17:30Z

Code still has some bugs. Closing for now

ConnorNeed requested a review from Copilot December 16, 2025 19:31

Copilot started reviewing on behalf of ConnorNeed December 16, 2025 19:31 View session

Copilot AI reviewed Dec 16, 2025

View reviewed changes

Copilot AI mentioned this pull request Dec 16, 2025

Address accessibility, visibility, and performance issues in dynamic tile controls #10

Merged

ConnorNeed force-pushed the more-custom branch from 5be2ce2 to c26b93b Compare December 16, 2025 20:03

feat: dynamic tile creation

b92bd54

ConnorNeed force-pushed the more-custom branch from c26b93b to b92bd54 Compare December 16, 2025 20:06

ConnorNeed requested a review from Copilot December 16, 2025 20:06

Copilot started reviewing on behalf of ConnorNeed December 16, 2025 20:07 View session

Copilot AI reviewed Dec 16, 2025

View reviewed changes

ConnorNeed closed this Dec 16, 2025

	splitAndAdd(pendingAdd.direction, value);
	splitAndAdd(pendingAdd.direction, value);
	e.target.value = '';

feat: dynamic tile creation #9

feat: dynamic tile creation #9

Uh oh!

Conversation

ConnorNeed commented Dec 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

ConnorNeed commented Dec 16, 2025

Uh oh!

Copilot AI commented Dec 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Uh oh!

Copilot AI Dec 16, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ConnorNeed commented Dec 16, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants