improved color theme legend with labels from data

src/mol-theme/color/chain-id.ts

@@ -26,7 +26,10 @@ export function getChainIdColorThemeParams(ctx: ThemeDataContext) {
     if (ctx.structure) {
         if (getAsymIdSerialMap(ctx.structure.root).size > 12) {
             params.palette.defaultValue.name = 'scale'
-            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+            params.palette.defaultValue.params = {
+                ...params.palette.defaultValue.params,
+                list: 'red-yellow-blue'
+            }
         }
     }
     return params
@@ -79,6 +82,9 @@ export function ChainIdColorTheme(ctx: ThemeDataContext, props: PD.Values<ChainI
         const l = StructureElement.Location.create()
         const asymIdSerialMap = getAsymIdSerialMap(ctx.structure.root)
 
+        const labelTable = Array.from(asymIdSerialMap.keys())
+        props.palette.params.valueLabel = (i: number) => labelTable[i]
+
         const palette = getPalette(asymIdSerialMap.size, props)
         legend = palette.legend
 

src/mol-theme/color/entity-source.ts

@@ -27,7 +27,10 @@ export function getEntitySourceColorThemeParams(ctx: ThemeDataContext) {
     if (ctx.structure) {
         if (getMaps(ctx.structure.root.models).srcKeySerialMap.size > 12) {
             params.palette.defaultValue.name = 'scale'
-            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+            params.palette.defaultValue.params = {
+                ...params.palette.defaultValue.params,
+                list: 'red-yellow-blue'
+            }
         }
     }
     return params
@@ -108,6 +111,13 @@ export function EntitySourceColorTheme(ctx: ThemeDataContext, props: PD.Values<E
         const { models } = ctx.structure.root
         const { seqToSrcByModelEntity, srcKeySerialMap } = getMaps(models)
 
+        const labelTable = Array.from(srcKeySerialMap.keys()).map(v => {
+            const l = v.split('|')[2]
+            return l === '1' ? 'Unnamed' : l
+        })
+        labelTable.push('Unknown')
+        props.palette.params.valueLabel = (i: number) => labelTable[i]
+
         const palette = getPalette(srcKeySerialMap.size + 1, props)
         legend = palette.legend
 

src/mol-theme/color/polymer-id.ts

@@ -27,7 +27,10 @@ export function getPolymerIdColorThemeParams(ctx: ThemeDataContext) {
     if (ctx.structure) {
         if (getPolymerAsymIdSerialMap(ctx.structure.root).size > 12) {
             params.palette.defaultValue.name = 'scale'
-            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+            params.palette.defaultValue.params = {
+                ...params.palette.defaultValue.params,
+                list: 'red-yellow-blue'
+            }
         }
     }
     return params
@@ -88,6 +91,9 @@ export function PolymerIdColorTheme(ctx: ThemeDataContext, props: PD.Values<Poly
         const l = StructureElement.Location.create()
         const polymerAsymIdSerialMap = getPolymerAsymIdSerialMap(ctx.structure.root)
 
+        const labelTable = Array.from(polymerAsymIdSerialMap.keys())
+        props.palette.params.valueLabel = (i: number) => labelTable[i]
+
         const palette = getPalette(polymerAsymIdSerialMap.size, props)
         legend = palette.legend
 

src/mol-theme/color/polymer-index.ts

@@ -25,7 +25,10 @@ export function getPolymerIndexColorThemeParams(ctx: ThemeDataContext) {
     if (ctx.structure) {
         if (getPolymerChainCount(ctx.structure.root) > 12) {
             params.palette.defaultValue.name = 'scale'
-            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+            params.palette.defaultValue.params = {
+                ...params.palette.defaultValue.params,
+                list: 'red-yellow-blue'
+            }
         }
     }
     return params

src/mol-theme/color/unit-index.ts

@@ -25,7 +25,10 @@ export function getUnitIndexColorThemeParams(ctx: ThemeDataContext) {
     if (ctx.structure) {
         if (ctx.structure.root.units.length > 12) {
             params.palette.defaultValue.name = 'scale'
-            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+            params.palette.defaultValue.params = {
+                ...params.palette.defaultValue.params,
+                list: 'red-yellow-blue'
+            }
         }
     }
     return params

src/mol-util/color/palette.ts

@@ -20,19 +20,28 @@ const DefaultGetPaletteProps = {
 }
 type GetPaletteProps = typeof DefaultGetPaletteProps
 
+const LabelParams = {
+    valueLabel: PD.Value((i: number) => `${i + 1}`, { isHidden: true }),
+    minLabel: PD.Value('Start', { isHidden: true }),
+    maxLabel: PD.Value('End', { isHidden: true }),
+}
+
 export function getPaletteParams(props: Partial<GetPaletteProps> = {}) {
     const p = { ...DefaultGetPaletteProps, ...props }
     return {
         palette: PD.MappedStatic(p.type, {
             scale: PD.Group({
+                ...LabelParams,
                 list: PD.ColorList<ColorListName>(p.scaleList, ColorListOptionsScale),
             }, { isFlat: true }),
             set: PD.Group({
+                ...LabelParams,
                 list: PD.ColorList<ColorListName>(p.setList, ColorListOptionsSet),
             }, { isFlat: true }),
             generate: PD.Group({
+                ...LabelParams,
                 ...DistinctColorsParams,
-                maxCount: PD.Numeric(75, { min: 1, max: 250, step: 1 })
+                maxCount: PD.Numeric(75, { min: 1, max: 250, step: 1 }),
             }, { isFlat: true })
         }, {
             options: [
@@ -57,9 +66,9 @@ export function getPalette(count: number, props: PaletteProps) {
     let legend: ScaleLegend | TableLegend | undefined
 
     if (props.palette.name === 'scale') {
-        const listOrName = props.palette.params.list
+        const { list: listOrName, minLabel, maxLabel } = props.palette.params
         const domain: [number, number] = [0, count - 1]
-        const scale = ColorScale.create({ listOrName, domain, minLabel: 'Start', maxLabel: 'End' })
+        const scale = ColorScale.create({ listOrName, domain, minLabel, maxLabel })
         legend = scale.legend
         color = scale.color
     } else {
@@ -71,8 +80,18 @@ export function getPalette(count: number, props: PaletteProps) {
             count = Math.min(count, props.palette.params.maxCount)
             colors = distinctColors(count, props.palette.params)
         }
+        const { valueLabel } = props.palette.params
         const colorsLength = colors.length
-        legend = TableLegend(colors.map((c, i) => [`${i + 1}`, c]))
+        const table: [string, Color][] = []
+        for (let i = 0; i < count; ++i) {
+            const j = i % colorsLength
+            if (table[j] === undefined) {
+                table[j] = [valueLabel(i), colors[j]]
+            } else {
+                table[j][0] += `, ${valueLabel(i)}`
+            }
+        }
+        legend = TableLegend(table)
         color = (i: number) => colors[i % colorsLength]
     }