Skip to content

Conversation

@dtunikov
Copy link

@dtunikov dtunikov commented Oct 29, 2025

Description

This PR adds the ability to customize chart colors (markColor, markColorFade, etc.) by passing a chartColors prop to the EmbeddingAtlas component. This provides flexibility for theming and branding while maintaining backward compatibility with default colors.
This PR also adds theme property to EmbeddingAtlas react component, that let the clients customise embeddings view and table themes from outside.

Motivation

Users may want to customize the chart colors to match their application's theme or branding. Currently, the chart colors are hardcoded in the chartColors object, making it impossible to override them without modifying the source code.

Changes

  • Added ChartColors interface and exported it from api.ts for TypeScript support
  • Added chartColors prop to EmbeddingAtlasProps interface
  • Created getChartColors() helper function to merge custom colors with defaults
  • Updated ChartContext to include customChartColors field
  • Updated all chart components (CountPlot, CountPlotList, Histogram, HistogramStack, BoxPlot) to use getChartColors()
  • Connected the prop through EmbeddingAtlas.svelte to the chart context

Example Usage

import { EmbeddingAtlas } from 'embedding-atlas';

const atlas = new EmbeddingAtlas(container, {
  coordinator,
  data: {
    table: "my_table",
    id: "id",
    projection: { x: "x", y: "y" },
  },
  chartColors: {
    light: {
      markColor: "#ff6b6b",      // Custom red instead of default blue
      markColorFade: "#ffe0e0",  // Light red
    },
    dark: {
      markColor: "#ff6b6b",
      markColorFade: "#4d2020",
    }
  }
});

Testing

  • ✅ Build passes successfully (npm run build)
  • ✅ All files compile without TypeScript errors
  • ✅ Backward compatible - existing code works without any changes
  • ✅ Custom colors properly override defaults when provided

Checklist

  • Code follows the project's style guidelines
  • Changes are backward compatible
  • Build passes successfully
  • TypeScript types are properly defined and exported

This change allows users to customize chart colors (markColor, markColorFade, etc.)
by passing a `chartColors` prop to the EmbeddingAtlas component. This provides
flexibility for theming and branding while maintaining backward compatibility with
default colors.

Changes:
- Add ChartColors interface and export it from api.ts
- Add chartColors prop to EmbeddingAtlasProps
- Add getChartColors() helper function to merge custom colors with defaults
- Update ChartContext to include customChartColors field
- Update all chart components (CountPlot, Histogram, BoxPlot, etc.) to use getChartColors()
- Pass chartColors through EmbeddingAtlas.svelte to chart context

Example usage:
```typescript
new EmbeddingAtlas(container, {
  coordinator,
  data: { table: "data", id: "id" },
  chartColors: {
    light: { markColor: "#ff6b6b", markColorFade: "#ffe0e0" },
    dark: { markColor: "#ff6b6b", markColorFade: "#4d2020" }
  }
});
```
@dtunikov dtunikov marked this pull request as draft October 29, 2025 09:58
Extends the customizable color system to include embedding view and table components.

Changes:
- Add `theme` field to EmbeddingViewConfig for customizing embedding view colors and fonts
- Export `Theme` type from table package for public API
- Add `tableTheme` prop to EmbeddingAtlasProps for customizing table colors and fonts
- Add `tableTheme` field to ChartContext and wire it through to Table component
- Update Table.svelte to merge custom theme with default theme

This complements the chart colors customization added in the previous commit,
providing a comprehensive color customization API for all visualization components.

Example usage:
```typescript
new EmbeddingAtlas(container, {
  coordinator,
  data: { table: "data", id: "id", projection: { x: "x", y: "y" } },
  // Chart colors
  chartColors: {
    light: { markColor: "#ff6b6b" },
    dark: { markColor: "#ff6b6b" }
  },
  // Embedding view theme (via config)
  embeddingViewConfig: {
    theme: {
      clusterLabelColor: "#ff0000",
      statusBarBackgroundColor: "rgba(255, 255, 255, 0.95)"
    }
  },
  // Table theme
  tableTheme: {
    light: { primaryBackgroundColor: "#f5f5f5" },
    dark: { primaryBackgroundColor: "#1a1a1a" }
  }
});
```
@dtunikov dtunikov marked this pull request as ready for review October 29, 2025 10:05
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant