From 5e5a68e1d7fc5498946c79ddeb88e5a5bb3a3462 Mon Sep 17 00:00:00 2001
From: Xiaohan-Tian <157918347+Xiaohan-Tian@users.noreply.github.com>
Date: Tue, 12 Aug 2025 18:25:00 -0700
Subject: [PATCH] added a treatment for InstrumentSelection panel when
 `selectedTrackId` is empty or doesn't associate with a valid track.

---
 src/components/InstrumentSelection.tsx | 30 ++++++++++++++------------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/src/components/InstrumentSelection.tsx b/src/components/InstrumentSelection.tsx
index e32ace2..454a60c 100644
--- a/src/components/InstrumentSelection.tsx
+++ b/src/components/InstrumentSelection.tsx
@@ -42,8 +42,9 @@ const InstrumentSelection: React.FC = () => {
   };
 
   const handleSelectInstrument = async (instrumentKey: string) => {
-    const instrument = instrumentKey as InstrumentType;
+    // If no valid target track, ignore user interaction
     if (!targetTrack || !(targetTrack instanceof KGMidiTrack)) return;
+    const instrument = instrumentKey as InstrumentType;
     try {
       await setTrackInstrument(targetTrack.getId(), instrument);
     } catch (err) {
@@ -53,25 +54,26 @@ const InstrumentSelection: React.FC = () => {
 
   const previewImage = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.image || 'piano.png';
   const previewAlt = FLUIDR3_INSTRUMENT_MAP[currentInstrumentKey]?.displayName || currentInstrumentKey;
-
-  if (!targetTrack) return null;
+  const hasTargetTrack = !!targetTrack;
 
   return (
-    <div className="instrument-selection">
+      <div className="instrument-selection">
       <div className="instrument-selection-header">
-        <h3>{`${previewAlt.toString()}`}</h3>
+        <h3>{hasTargetTrack ? `${previewAlt.toString()}` : ''}</h3>
         <button className="instrument-selection-close-btn" onClick={closeInstrumentSelection}>✕</button>
       </div>
       <div className="instrument-selection-top">
-        <div className="instrument-preview">
-          <img
-            src={`${import.meta.env.BASE_URL}resources/instruments/${previewImage}`}
-            alt={previewAlt.toString()}
-            width={256}
-            height={256}
-          />
-        </div>
-        <div className="instrument-name-overlay">{targetTrack.getName()}</div>
+        {hasTargetTrack && (
+            <div className="instrument-preview">
+              <img
+                src={`${import.meta.env.BASE_URL}resources/instruments/${previewImage}`}
+                alt={previewAlt.toString()}
+                width={256}
+                height={256}
+              />
+            </div>
+          )}
+          <div className="instrument-name-overlay">{hasTargetTrack ? targetTrack.getName() : ''}</div>
       </div>
       <div className="instrument-selection-bottom">
         <div className="instrument-groups">