From ea0bd3991099f0b40a0c3526240d35431aac38f0 Mon Sep 17 00:00:00 2001
From: Nabil-Fareed Alikhan <nabil@happykhan.com>
Date: Fri, 4 Sep 2026 07:55:21 +0100
Subject: [PATCH] Make SVG export match GC ring controls

---
 components/ExportPanel.tsx |  5 +++--
 src/pages/Home.tsx         | 10 +++++++++-
 tests/e2e/brigx.spec.ts    | 17 +++++++++++++++++
 3 files changed, 29 insertions(+), 3 deletions(-)

diff --git a/components/ExportPanel.tsx b/components/ExportPanel.tsx
index 80c78d3..bf86117 100644
--- a/components/ExportPanel.tsx
+++ b/components/ExportPanel.tsx
@@ -8,6 +8,7 @@ import type { ImagePropertiesConfig } from './ImageProperties';
 
 interface ExportPanelProps {
   plotData: CircularPlotData;
+  displayedPlotData: CircularPlotData;
   imageProperties: ImagePropertiesConfig;
   viewState?: PlotViewState | null;
   plotCanvasRef?: RefObject<HTMLCanvasElement | null>;
@@ -72,10 +73,10 @@ function canvasToBlob(canvas: HTMLCanvasElement, type: string): Promise<Blob> {
   });
 }
 
-export default function ExportPanel({ plotData, imageProperties, viewState, plotCanvasRef }: ExportPanelProps) {
+export default function ExportPanel({ plotData, displayedPlotData, imageProperties, viewState, plotCanvasRef }: ExportPanelProps) {
   const [isExporting, setIsExporting] = useState(false);
   const exportSVG = () => {
-    const svgString = renderPlotSVG(plotData, imageProperties, viewState);
+    const svgString = renderPlotSVG(displayedPlotData, imageProperties, viewState);
     const blob = new Blob([svgString], { type: 'image/svg+xml' });
     downloadBlob(blob, `brig-plot-${Date.now()}.svg`);
     toast.success('SVG exported successfully!');
diff --git a/src/pages/Home.tsx b/src/pages/Home.tsx
index 69180c2..6881de9 100644
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@@ -129,7 +129,15 @@ export default function Home() {
                           <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /></svg>
                         )}
                       </button>
-                      {plotData && <ExportPanel plotData={plotData} imageProperties={imageProperties} viewState={plotViewState} plotCanvasRef={plotCanvasRef} />}
+                      {plotData && displayedPlotData && (
+                        <ExportPanel
+                          plotData={plotData}
+                          displayedPlotData={displayedPlotData}
+                          imageProperties={imageProperties}
+                          viewState={plotViewState}
+                          plotCanvasRef={plotCanvasRef}
+                        />
+                      )}
                     </div>
                   </div>
 
diff --git a/tests/e2e/brigx.spec.ts b/tests/e2e/brigx.spec.ts
index d41a1c2..3e0d456 100644
--- a/tests/e2e/brigx.spec.ts
+++ b/tests/e2e/brigx.spec.ts
@@ -574,6 +574,23 @@ test.describe('BRIGX e2e — circular genome plot', () => {
     await expect(page.getByRole('button', { name: 'Expand plot' })).toBeVisible()
   })
 
+  test('SVG export matches disabled GC ring controls', async ({ page }) => {
+    await page.goto('/app')
+    await page.getByLabel('Reference genome file').setInputFiles(REFERENCE)
+    await expect(page.getByRole('heading', { name: 'Statistics' })).toBeVisible({ timeout: 30_000 })
+
+    await page.getByLabel('GC Content').uncheck()
+    const downloadPromise = page.waitForEvent('download')
+    await page.getByRole('button', { name: 'SVG', exact: true }).click()
+    const download = await downloadPromise
+    const downloadedPath = await download.path()
+    expect(downloadedPath).not.toBeNull()
+
+    const svg = await fs.readFile(downloadedPath!, 'utf8')
+    expect(svg).not.toContain('id="gc-content-ring"')
+    expect(svg).toContain('id="gc-skew-ring"')
+  })
+
   test('PNG export matches the live canvas after moving a legend', async ({ page }) => {
     await page.goto('/app')
     await page.getByLabel('Reference genome file').setInputFiles(REFERENCE)