Docs

Author: cmdcolin

component_tests/cli-node18/run.mjs

@@ -205,15 +205,19 @@ ctgA\ttest\tgene\t5000\t6000\t.\t+\t.\tID=gene3;Name=TestGene3
       const cmd = `npx jbrowse text-index --file http://localhost:${port}/test.gff3.gz --out ${outDir} --quiet`
       console.log(`[TEST] Command: ${cmd}`)
       const { stdout, stderr } = await new Promise((resolve, reject) => {
-        exec(cmd, { encoding: 'utf8', timeout: 60000 }, (error, stdout, stderr) => {
-          if (error) {
-            console.log(`[TEST] Command stderr: ${stderr}`)
-            console.log(`[TEST] Command stdout: ${stdout}`)
-            reject(error)
-          } else {
-            resolve({ stdout, stderr })
-          }
-        })
+        exec(
+          cmd,
+          { encoding: 'utf8', timeout: 60000 },
+          (error, stdout, stderr) => {
+            if (error) {
+              console.log(`[TEST] Command stderr: ${stderr}`)
+              console.log(`[TEST] Command stdout: ${stdout}`)
+              reject(error)
+            } else {
+              resolve({ stdout, stderr })
+            }
+          },
+        )
       })
       console.log(`[TEST] Command stdout: ${stdout}`)
       console.log(`[TEST] Command stderr: ${stderr}`)

plugins/variants/src/MultiLinearVariantMatrixDisplay/configSchema.ts

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
 import { types } from '@jbrowse/mobx-state-tree'
+import { linearBasicDisplayConfigSchemaFactory } from '@jbrowse/plugin-linear-genome-view'
 
 import configSchema from '../MultiLinearVariantMatrixRenderer/configSchema.ts'
 
@@ -71,6 +71,17 @@ export default function configSchemaF(pluginManager: PluginManager) {
         type: 'number',
         defaultValue: 0,
       },
+      /**
+       * #slot
+       * Automatically color samples by this metadata attribute when the track
+       * loads. The attribute must be present in the sample metadata TSV file
+       * (configured via samplesTsvLocation on the adapter). Leave empty to
+       * disable auto-coloring.
+       */
+      colorBy: {
+        type: 'string',
+        defaultValue: '',
+      },
     },
     {
       /**

plugins/variants/src/shared/MultiVariantBaseModel.test.ts

@@ -1,7 +1,8 @@
+/* eslint-disable @typescript-eslint/no-unnecessary-condition */
 import { readConfObject } from '@jbrowse/core/configuration'
-import { getSnapshot } from '@jbrowse/mobx-state-tree'
 
 import sharedVariantConfigFactory from './SharedVariantConfigSchema.ts'
+import { applyColorPalette } from './applyColorPalette.ts'
 
 describe('SharedVariantConfigSchema', () => {
   const configSchema = sharedVariantConfigFactory()
@@ -103,7 +104,6 @@ describe('SharedVariantConfigSchema', () => {
 })
 
 describe('Config-to-getter fallback logic', () => {
-
   it('referenceDrawingMode getter returns draw when showReferenceAlleles config is true', () => {
     const showReferenceAlleles = true
     const referenceDrawingModeSetting: string | undefined = undefined
@@ -200,3 +200,121 @@ describe('Config-to-getter fallback logic', () => {
     expect(result).toBe(0.2)
   })
 })
+
+describe('colorBy config slot', () => {
+  const configSchema = sharedVariantConfigFactory()
+
+  it('has default value of empty string', () => {
+    const config = configSchema.create({
+      type: 'SharedVariantDisplay',
+      displayId: 'test-colorby-1',
+    })
+    expect(readConfObject(config, 'colorBy')).toBe('')
+  })
+
+  it('can be set to a metadata attribute name', () => {
+    const config = configSchema.create({
+      type: 'SharedVariantDisplay',
+      displayId: 'test-colorby-2',
+      colorBy: 'population',
+    })
+    expect(readConfObject(config, 'colorBy')).toBe('population')
+  })
+})
+
+describe('applyColorPalette', () => {
+  it('returns original sources when attribute is empty', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR' },
+      { name: 'sample2', population: 'AFR' },
+    ]
+    const result = applyColorPalette(sources, '')
+    expect(result).toBe(sources)
+  })
+
+  it('returns original sources when sources array is empty', () => {
+    const sources: { name: string }[] = []
+    const result = applyColorPalette(sources, 'population')
+    expect(result).toBe(sources)
+  })
+
+  it('returns original sources when attribute does not exist', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR' },
+      { name: 'sample2', population: 'AFR' },
+    ]
+    const result = applyColorPalette(sources, 'nonexistent')
+    expect(result).toBe(sources)
+  })
+
+  it('applies colors based on attribute values', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR' },
+      { name: 'sample2', population: 'AFR' },
+      { name: 'sample3', population: 'EUR' },
+    ]
+    const result = applyColorPalette(sources, 'population')
+
+    expect(result).toHaveLength(3)
+    expect(result[0]).toHaveProperty('color')
+    expect(result[1]).toHaveProperty('color')
+    expect(result[2]).toHaveProperty('color')
+
+    // Samples with same population value should have same color
+    expect(result[0]!.color).toBe(result[2]!.color)
+    // Samples with different population values should have different colors
+    expect(result[0]!.color).not.toBe(result[1]!.color)
+  })
+
+  it('assigns colors by frequency (less common values get colors first)', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR' },
+      { name: 'sample2', population: 'EUR' },
+      { name: 'sample3', population: 'EUR' },
+      { name: 'sample4', population: 'AFR' },
+    ]
+    const result = applyColorPalette(sources, 'population')
+
+    // AFR (1 occurrence) should get the first color from palette
+    // EUR (3 occurrences) should get the second color
+    const afrSample = result.find(s => s.population === 'AFR')
+    const eurSample = result.find(s => s.population === 'EUR')
+
+    expect(afrSample).toHaveProperty('color')
+    expect(eurSample).toHaveProperty('color')
+    expect(afrSample!.color).not.toBe(eurSample!.color)
+  })
+
+  it('preserves other properties on sources', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR', region: 'Western', custom: 123 },
+      { name: 'sample2', population: 'AFR', region: 'Eastern', custom: 456 },
+    ]
+    const result = applyColorPalette(sources, 'population')
+
+    expect(result[0]!.name).toBe('sample1')
+    // @ts-expect-error
+    expect(result[0]!.region).toBe('Western')
+    // @ts-expect-error
+    expect(result[0]!.custom).toBe(123)
+    expect(result[1]!.name).toBe('sample2')
+    // @ts-expect-error
+    expect(result[1]!.region).toBe('Eastern')
+    // @ts-expect-error
+    expect(result[1]!.custom).toBe(456)
+  })
+
+  it('handles undefined attribute values by converting to string', () => {
+    const sources = [
+      { name: 'sample1', population: 'EUR' },
+      { name: 'sample2' }, // no population attribute
+    ]
+    const result = applyColorPalette(sources, 'population')
+
+    expect(result).toHaveLength(2)
+    expect(result[0]).toHaveProperty('color')
+    expect(result[1]).toHaveProperty('color')
+    // They should have different colors (EUR vs undefined)
+    expect(result[0]!.color).not.toBe(result[1]!.color)
+  })
+})

plugins/variants/src/shared/MultiVariantBaseModel.ts

@@ -159,6 +159,12 @@ export default function MultiVariantBaseModelF(
        * #volatile
        */
       sourcesVolatile: undefined as Source[] | undefined,
+      /**
+       * #volatile
+       * Tracks whether the colorBy config has been applied (to avoid
+       * re-applying on every source update)
+       */
+      colorByApplied: false,
       /**
        * #volatile
        */
@@ -190,6 +196,15 @@ export default function MultiVariantBaseModelF(
        */
       mouseoverCanvas: undefined as HTMLCanvasElement | undefined,
     }))
+    .views(self => ({
+      /**
+       * #getter
+       * Returns the effective rendering mode, falling back to config
+       */
+      get renderingMode(): string {
+        return self.renderingModeSetting ?? getConf(self, 'renderingMode')
+      },
+    }))
     .actions(self => ({
       /**
        * #action
@@ -240,6 +255,13 @@ export default function MultiVariantBaseModelF(
         self.featuresVolatile = f
       },
 
+      /**
+       * #action
+       */
+      setColorByApplied(value: boolean) {
+        self.colorByApplied = value
+      },
+
       /**
        * #action
        */
@@ -390,14 +412,6 @@ export default function MultiVariantBaseModelF(
         return self.showTreeSetting ?? getConf(self, 'showTree')
       },
 
-      /**
-       * #getter
-       * Returns the effective rendering mode, falling back to config
-       */
-      get renderingMode(): string {
-        return self.renderingModeSetting ?? getConf(self, 'renderingMode')
-      },
-
       /**
        * #getter
        * Returns the effective reference drawing mode, derived from config showReferenceAlleles

plugins/variants/src/shared/SharedVariantConfigSchema.ts

@@ -1,6 +1,6 @@
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
-import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
 import { types } from '@jbrowse/mobx-state-tree'
+import { baseLinearDisplayConfigSchema } from '@jbrowse/plugin-linear-genome-view'
 
 /**
  * #config SharedVariantDisplay
@@ -53,6 +53,17 @@ export default function sharedVariantConfigFactory() {
         type: 'number',
         defaultValue: 0,
       },
+      /**
+       * #slot
+       * Automatically color samples by this metadata attribute when the track
+       * loads. The attribute must be present in the sample metadata TSV file
+       * (configured via samplesTsvLocation on the adapter). Leave empty to
+       * disable auto-coloring.
+       */
+      colorBy: {
+        type: 'string',
+        defaultValue: '',
+      },
     },
     {
       /**

plugins/variants/src/shared/applyColorPalette.ts

@@ -0,0 +1,45 @@
+import { set1 } from '@jbrowse/core/ui/colors'
+import { randomColor } from '@jbrowse/core/util/color'
+
+import type { Source } from './types.ts'
+
+/**
+ * Applies a color palette to sources based on a metadata attribute.
+ * Colors are assigned based on the frequency of values, with less common
+ * values getting colors first from the set1 palette.
+ *
+ * @param sources - The source array to apply colors to
+ * @param attribute - The metadata attribute to color by
+ * @returns A new array of sources with colors applied
+ */
+export function applyColorPalette(sources: Source[], attribute: string) {
+  if (!attribute || sources.length === 0) {
+    return sources
+  }
+
+  // Check if any source has the attribute
+  const hasAttribute = sources.some(source => attribute in source)
+  if (!hasAttribute) {
+    return sources
+  }
+
+  // Count occurrences of each value
+  const counts = new Map<string, number>()
+  for (const source of sources) {
+    const key = String(source[attribute] ?? '')
+    counts.set(key, (counts.get(key) || 0) + 1)
+  }
+
+  // Create color map, sorting by frequency (least common first gets colors first)
+  const colorMap = Object.fromEntries(
+    [...counts.entries()]
+      .sort((a, b) => a[1] - b[1])
+      .map(([key], idx) => [key, set1[idx] || randomColor(key)]),
+  )
+
+  // Apply colors to sources
+  return sources.map(source => ({
+    ...source,
+    color: colorMap[String(source[attribute] ?? '')],
+  }))
+}