Skip to content

Make SVG export match GC ring controls #42

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
happykhan merged 1 commit into from
Sep 5, 2026
Merged

Make SVG export match GC ring controls #42

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions components/ExportPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import type { ImagePropertiesConfig } from './ImageProperties';

interface ExportPanelProps {
plotData: CircularPlotData;
displayedPlotData: CircularPlotData;
imageProperties: ImagePropertiesConfig;
viewState?: PlotViewState | null;
plotCanvasRef?: RefObject<HTMLCanvasElement | null>;
Expand Down Expand Up @@ -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!');
Expand Down
10 changes: 9 additions & 1 deletion src/pages/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down
17 changes: 17 additions & 0 deletions tests/e2e/brigx.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down