diff --git a/src/mol-theme/color/chain-id.ts b/src/mol-theme/color/chain-id.ts
index e7188bedb41210eb565990d7962e663747d48c0c..b35d23a27ba8acbf48577fedd3351eb8f98f40af 100644
--- a/src/mol-theme/color/chain-id.ts
+++ b/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
diff --git a/src/mol-theme/color/entity-source.ts b/src/mol-theme/color/entity-source.ts
index 5a553b87cd8ec79edeafdb1dee5ca44e97b3ea15..18f6968399b152aacdbc13b684a98b2318323c64 100644
--- a/src/mol-theme/color/entity-source.ts
+++ b/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
diff --git a/src/mol-theme/color/polymer-id.ts b/src/mol-theme/color/polymer-id.ts
index 5df2bc59983be4f5a6117b0a4b9e33f625acb308..39b74bd84e50eaf1618e9d871b330895ce6d7b74 100644
--- a/src/mol-theme/color/polymer-id.ts
+++ b/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
diff --git a/src/mol-theme/color/polymer-index.ts b/src/mol-theme/color/polymer-index.ts
index 2233487402935173084c68fcfc5dc90c9ddd9f01..cb94750b0e325046347b16305ae87d19ba7f6cf5 100644
--- a/src/mol-theme/color/polymer-index.ts
+++ b/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
diff --git a/src/mol-theme/color/unit-index.ts b/src/mol-theme/color/unit-index.ts
index c1f42c49ff897b64d5bee1c1adc5dbf4ad812d52..491d590f230237376f0e10034d1a4514a707fcd8 100644
--- a/src/mol-theme/color/unit-index.ts
+++ b/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
diff --git a/src/mol-util/color/palette.ts b/src/mol-util/color/palette.ts
index d05fa5aa52033fc00da71c8920af0f06844a2484..263086f5614a3fc86b1f59f251512a3c19f08a38 100644
--- a/src/mol-util/color/palette.ts
+++ b/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]
}