From 2c5309e0d6a5bebb97d9cd1237f078d764f8ae7e Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Mon, 30 Mar 2026 15:12:13 +0300
Subject: [PATCH 1/2] fix(frontend): remove duplicated plot sidebar labels

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-openagent)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 frontend/e2e/search.spec.ts                   | 39 +++++++++++++++++++
 frontend/src/components/plot/PlotControls.tsx |  5 +--
 2 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/frontend/e2e/search.spec.ts b/frontend/e2e/search.spec.ts
index c2c7f30..2eab99f 100644
--- a/frontend/e2e/search.spec.ts
+++ b/frontend/e2e/search.spec.ts
@@ -208,3 +208,42 @@ test.describe('Semantic Search', () => {
   })
 
 })
+
+test.describe('Plot Sidebar', () => {
+  test('plot sidebar does not duplicate visible labels', async ({ page }) => {
+    // Mock the API calls so we don't need real ChromaDB data
+    await page.route('**/api/collections', async route => {
+      await route.fulfill({ json: [{ name: 'fashionimageUrl', count: 100 }] })
+    })
+    await page.route('**/api/collections/fashionimageUrl', async route => {
+      await route.fulfill({
+        json: { name: 'fashionimageUrl', count: 100, metadata_fields: ['productDisplayName', 'imageUrl'] }
+      })
+    })
+
+    // Navigate with collection param
+    await page.goto('/plot?collection=fashionimageUrl')
+
+    // Wait for the collection dropdown to be populated with options
+    await expect(
+      page.locator('select option:not([value=""])').first()
+    ).toBeAttached({ timeout: 10_000 })
+
+    const sidebar = page.getByTestId('plot-sidebar')
+
+    await expect(sidebar.getByRole('button', { name: 'Collection', exact: true })).toBeVisible({ timeout: 5_000 })
+
+    const displayFieldsBtn = sidebar.getByRole('button', { name: 'Display Fields', exact: true })
+    const imageFieldBtn = sidebar.getByRole('button', { name: 'Image Field', exact: true })
+
+    await displayFieldsBtn.click()
+    await imageFieldBtn.click()
+
+    await expect(sidebar.locator('label').filter({ hasText: /^Collection$/ })).toHaveCount(0)
+    await expect(sidebar.locator('label').filter({ hasText: /^Display Fields$/ })).toHaveCount(0)
+    await expect(sidebar.locator('label').filter({ hasText: /^Image Field$/ })).toHaveCount(0)
+
+    await expect(sidebar.getByRole('combobox', { name: 'Collection' })).toBeVisible()
+    await expect(sidebar.getByRole('combobox', { name: 'Image Field' })).toBeVisible()
+  })
+})
diff --git a/frontend/src/components/plot/PlotControls.tsx b/frontend/src/components/plot/PlotControls.tsx
index b4bea7a..74b1e17 100644
--- a/frontend/src/components/plot/PlotControls.tsx
+++ b/frontend/src/components/plot/PlotControls.tsx
@@ -130,8 +130,8 @@ export default function PlotControls({ onCompute, isComputing }: PlotControlsPro
       {/* Collection Selection */}
       <CollapsibleSection title="Collection" defaultOpen={true}>
         <div className="space-y-1.5">
-          <label className="block text-xs font-medium text-gray-600">Collection</label>
           <select
+            aria-label="Collection"
             className="w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm"
             value={selectedCollection}
             onChange={(e) => {
@@ -285,7 +285,6 @@ export default function PlotControls({ onCompute, isComputing }: PlotControlsPro
           {/* Text Display Fields */}
           <CollapsibleSection title="Display Fields" defaultOpen={false}>
             <div className="space-y-1.5">
-              <label className="block text-xs font-medium text-gray-600">Display Fields</label>
               <div className="max-h-32 overflow-y-auto border rounded p-2 space-y-1">
                 {collectionDetails.metadata_fields.map((field) => (
                   <div key={field} className="flex items-center">
@@ -308,8 +307,8 @@ export default function PlotControls({ onCompute, isComputing }: PlotControlsPro
           {/* Image Field */}
           <CollapsibleSection title="Image Field" defaultOpen={false}>
             <div className="space-y-1.5">
-              <label className="block text-xs font-medium text-gray-600">Image Field</label>
               <select
+                aria-label="Image Field"
                 className="w-full border border-gray-300 rounded-md px-2 py-1.5 text-sm"
                 value={imageField}
                 onChange={(e) => setImageField(e.target.value)}

From 26dd726cf2d2ce568910271612d518dca4ae00d5 Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Mon, 30 Mar 2026 15:19:09 +0300
Subject: [PATCH 2/2] fix(frontend): remove remaining duplicated sidebar labels

---
 frontend/src/components/plot/PlotControls.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/src/components/plot/PlotControls.tsx b/frontend/src/components/plot/PlotControls.tsx
index 74b1e17..c02d164 100644
--- a/frontend/src/components/plot/PlotControls.tsx
+++ b/frontend/src/components/plot/PlotControls.tsx
@@ -174,9 +174,6 @@ export default function PlotControls({ onCompute, isComputing }: PlotControlsPro
           {/* Reduction Algorithm */}
           <CollapsibleSection title="Reduction Algorithm" defaultOpen={false}>
             <div className="space-y-1.5">
-              <label className="block text-xs font-medium text-gray-600">
-                Reduction Algorithm
-              </label>
               <div className="flex space-x-2">
                 {(['tsne', 'umap', 'pca'] as const).map((algo) => (
                   <label key={algo} className="flex items-center text-xs cursor-pointer">
@@ -330,12 +327,13 @@ export default function PlotControls({ onCompute, isComputing }: PlotControlsPro
                 <input
                   type="checkbox"
                   id="gpt-enabled"
+                  aria-label="GPT Cluster Naming"
                   checked={gptEnabled}
                   onChange={(e) => setGptEnabled(e.target.checked)}
                   className="mr-2"
                 />
                 <label htmlFor="gpt-enabled" className="text-xs font-medium text-gray-600 cursor-pointer">
-                  GPT Cluster Naming
+                  Enable
                 </label>
               </div>