color refactoring

src/mol-model-props/rcsb/themes/assembly-symmetry-cluster.ts

@@ -14,7 +14,7 @@ import { Unit, StructureElement, StructureProperties } from '../../../mol-model/
 import { Location } from '../../../mol-model/location';
 import { ScaleLegend } from '../../../mol-util/color/scale';
 import { getSymmetrySelectParam } from '../util';
-import { getPalette, getPaletteParams } from '../../../mol-theme/color/util';
+import { getPalette, getPaletteParams } from '../../../mol-util/color/palette';
 import { TableLegend } from '../../../mol-util/color/lists';
 
 const DefaultColor = Color(0xCCCCCC)

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

@@ -4,26 +4,33 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Unit, StructureProperties, StructureElement, Link } from '../../mol-model/structure';
+import { Unit, StructureProperties, StructureElement, Link, Structure } from '../../mol-model/structure';
 import { Color } from '../../mol-util/color';
 import { Location } from '../../mol-model/location';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { ScaleLegend } from '../../mol-util/color/scale';
-import { Column } from '../../mol-data/db';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 import { TableLegend } from '../../mol-util/color/lists';
+import { Segmentation } from '../../mol-data/int';
 
-const DefaultColor = Color(0xCCCCCC)
+const DefaultColor = Color(0xFAFAFA)
 const Description = 'Gives every chain a color based on its `asym_id` value.'
 
 export const ChainIdColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'set', setList: 'set-3' }),
 }
 export type ChainIdColorThemeParams = typeof ChainIdColorThemeParams
 export function getChainIdColorThemeParams(ctx: ThemeDataContext) {
-    return ChainIdColorThemeParams // TODO return copy
+    const params = PD.clone(ChainIdColorThemeParams)
+    if (ctx.structure) {
+        if (getAsymIdSerialMap(ctx.structure.root).size > 12) {
+            params.palette.defaultValue.name = 'scale'
+            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+        }
+    }
+    return params
 }
 
 function getAsymId(unit: Unit): StructureElement.Property<string> {
@@ -36,49 +43,57 @@ function getAsymId(unit: Unit): StructureElement.Property<string> {
     }
 }
 
-function addAsymIds(map: Map<string, number>, data: Column<string>) {
-    let j = map.size
-    for (let o = 0, ol = data.rowCount; o < ol; ++o) {
-        const k = data.value(o)
-        if (!map.has(k)) {
-            map.set(k, j)
-            j += 1
+function getAsymIdSerialMap(structure: Structure) {
+    const map = new Map<string, number>()
+    for (let i = 0, il = structure.unitSymmetryGroups.length; i < il; ++i) {
+        const unit = structure.unitSymmetryGroups[i].units[0]
+        const { model } = unit
+        if (Unit.isAtomic(unit)) {
+            const { chainAtomSegments, chains } = model.atomicHierarchy
+            const chainIt = Segmentation.transientSegments(chainAtomSegments, unit.elements)
+            while (chainIt.hasNext) {
+                const { index: chainIndex } = chainIt.move()
+                const asymId = chains.label_asym_id.value(chainIndex)
+                if (!map.has(asymId)) map.set(asymId, map.size)
+            }
+        } else if (Unit.isCoarse(unit)) {
+            const { chainElementSegments, asym_id } = Unit.isSpheres(unit)
+                ? model.coarseHierarchy.spheres
+                : model.coarseHierarchy.gaussians
+            const chainIt = Segmentation.transientSegments(chainElementSegments, unit.elements)
+            while (chainIt.hasNext) {
+                const { index: chainIndex } = chainIt.move()
+                const asymId = asym_id.value(chainIndex)
+                if (!map.has(asymId)) map.set(asymId, map.size)
             }
         }
     }
+    return map
+}
 
 export function ChainIdColorTheme(ctx: ThemeDataContext, props: PD.Values<ChainIdColorThemeParams>): ColorTheme<ChainIdColorThemeParams> {
     let color: LocationColor
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        // TODO same asym ids in different models should get different color
         const l = StructureElement.create()
-        const { models } = ctx.structure
-        const asymIdSerialMap = new Map<string, number>()
-        for (let i = 0, il = models.length; i <il; ++i) {
-            const m = models[i]
-            addAsymIds(asymIdSerialMap, m.atomicHierarchy.chains.label_asym_id)
-            if (m.coarseHierarchy.isDefined) {
-                addAsymIds(asymIdSerialMap, m.coarseHierarchy.spheres.asym_id)
-                addAsymIds(asymIdSerialMap, m.coarseHierarchy.gaussians.asym_id)
-            }
-        }
+        const asymIdSerialMap = getAsymIdSerialMap(ctx.structure.root)
 
         const palette = getPalette(asymIdSerialMap.size, props)
         legend = palette.legend
 
         color = (location: Location): Color => {
+            let serial: number | undefined = undefined
             if (StructureElement.isLocation(location)) {
                 const asym_id = getAsymId(location.unit)
-                return palette.color(asymIdSerialMap.get(asym_id(location)) || 0)
+                serial = asymIdSerialMap.get(asym_id(location))
             } else if (Link.isLocation(location)) {
                 const asym_id = getAsymId(location.aUnit)
                 l.unit = location.aUnit
                 l.element = location.aUnit.elements[location.aIndex]
-                return palette.color(asymIdSerialMap.get(asym_id(l)) || 0)
+                serial = asymIdSerialMap.get(asym_id(l))
             }
-            return DefaultColor
+            return serial === undefined ? DefaultColor : palette.color(serial)
         }
     } else {
         color = () => DefaultColor

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

@@ -11,7 +11,7 @@ import { OrderedSet } from '../../mol-data/int';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 import { TableLegend } from '../../mol-util/color/lists';
 import { ScaleLegend } from '../../mol-util/color/scale';
 
@@ -19,7 +19,7 @@ const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every element (atom or coarse sphere/gaussian) a unique color based on the position (index) of the element in the list of elements in the structure.'
 
 export const ElementIndexColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'scale', scaleList: 'red-yellow-blue' }),
 }
 export type ElementIndexColorThemeParams = typeof ElementIndexColorThemeParams
 export function getElementIndexColorThemeParams(ctx: ThemeDataContext) {
@@ -31,7 +31,7 @@ export function ElementIndexColorTheme(ctx: ThemeDataContext, props: PD.Values<E
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        const { units } = ctx.structure
+        const { units } = ctx.structure.root
         const unitCount = units.length
         const cummulativeElementCount = new Map<number, number>()
         const unitIdIndex = new Map<number, number>()
@@ -49,11 +49,12 @@ export function ElementIndexColorTheme(ctx: ThemeDataContext, props: PD.Values<E
         color = (location: Location): Color => {
             if (StructureElement.isLocation(location)) {
                 const unitIndex = unitIdIndex.get(location.unit.id)!
-                const unitElementIndex = OrderedSet.findPredecessorIndex(location.unit.elements, location.element)
+                const unitElementIndex = OrderedSet.findPredecessorIndex(units[unitIndex].elements, location.element)
                 return palette.color(cummulativeElementCount.get(unitIndex)! + unitElementIndex)
             } else if (Link.isLocation(location)) {
                 const unitIndex = unitIdIndex.get(location.aUnit.id)!
-                return palette.color(cummulativeElementCount.get(unitIndex)! + location.aIndex)
+                const unitElementIndex = OrderedSet.findPredecessorIndex(units[unitIndex].elements, location.aUnit.elements[location.aIndex])
+                return palette.color(cummulativeElementCount.get(unitIndex)! + unitElementIndex)
             }
             return DefaultColor
         }

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

@@ -13,18 +13,25 @@ import { ThemeDataContext } from '../../mol-theme/theme';
 import { ScaleLegend } from '../../mol-util/color/scale';
 import { Table, Column } from '../../mol-data/db';
 import { mmCIF_Schema } from '../../mol-io/reader/cif/schema/mmcif';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 import { TableLegend } from '../../mol-util/color/lists';
 
-const DefaultColor = Color(0xCCCCCC)
-const Description = 'Gives ranges of a polymer chain a color based on the entity source it originates from. Genes get the same color per entity'
+const DefaultColor = Color(0xFAFAFA)
+const Description = 'Gives ranges of a polymer chain a color based on the entity source it originates from. Genes get the same color per entity.'
 
 export const EntitySourceColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'set', setList: 'set-3' }),
 }
 export type EntitySourceColorThemeParams = typeof EntitySourceColorThemeParams
 export function getEntitySourceColorThemeParams(ctx: ThemeDataContext) {
-    return EntitySourceColorThemeParams // TODO return copy
+    const params = PD.clone(EntitySourceColorThemeParams)
+    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' }
+        }
+    }
+    return params
 }
 
 function modelEntityKey(modelIndex: number, entityId: string) {
@@ -77,14 +84,7 @@ function addSrc(seqToSrcByModelEntity: Map<string, Int16Array>, srcKeySerialMap:
     }
 }
 
-export function EntitySourceColorTheme(ctx: ThemeDataContext, props: PD.Values<EntitySourceColorThemeParams>): ColorTheme<EntitySourceColorThemeParams> {
-    let color: LocationColor
-    let legend: ScaleLegend | TableLegend | undefined
-    const { structure } = ctx
-
-    if (structure) {
-        const l = StructureElement.create()
-        const { models } = structure
+function getMaps(models: ReadonlyArray<Model>) {
     const seqToSrcByModelEntity = new Map<string, Int16Array>()
     const srcKeySerialMap = new Map<string, number>() // serial no starting from 1
 
@@ -97,11 +97,23 @@ export function EntitySourceColorTheme(ctx: ThemeDataContext, props: PD.Values<E
         addSrc(seqToSrcByModelEntity, srcKeySerialMap, i, m, pdbx_entity_src_syn)
     }
 
+    return { seqToSrcByModelEntity, srcKeySerialMap }
+}
+
+export function EntitySourceColorTheme(ctx: ThemeDataContext, props: PD.Values<EntitySourceColorThemeParams>): ColorTheme<EntitySourceColorThemeParams> {
+    let color: LocationColor
+    let legend: ScaleLegend | TableLegend | undefined
+
+    if (ctx.structure) {
+        const l = StructureElement.create()
+        const { models } = ctx.structure.root
+        const { seqToSrcByModelEntity, srcKeySerialMap } = getMaps(models)
+
         const palette = getPalette(srcKeySerialMap.size + 1, props)
         legend = palette.legend
 
         const getSrcColor = (location: StructureElement) => {
-            const modelIndex = structure.models.indexOf(location.unit.model)
+            const modelIndex = models.indexOf(location.unit.model)
             const entityId = StructureProperties.entity.id(location)
             const mK = modelEntityKey(modelIndex, entityId)
             const seqToSrc = seqToSrcByModelEntity.get(mK)

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

@@ -11,14 +11,14 @@ import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { ScaleLegend } from '../../mol-util/color/scale';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 import { TableLegend } from '../../mol-util/color/lists';
 
 const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every model a unique color based on the position (index) of the model in the list of models in the structure.'
 
 export const ModelIndexColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'scale', scaleList: 'red-yellow-blue' }),
 }
 export type ModelIndexColorThemeParams = typeof ModelIndexColorThemeParams
 export function getModelIndexColorThemeParams(ctx: ThemeDataContext) {
@@ -30,7 +30,7 @@ export function ModelIndexColorTheme(ctx: ThemeDataContext, props: PD.Values<Mod
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        const { models } = ctx.structure
+        const { models } = ctx.structure.root
         const palette = getPalette(models.length, props)
         legend = palette.legend
         const modelColor = new Map<string, Color>()

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

@@ -4,28 +4,34 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Unit, StructureProperties, StructureElement, Link } from '../../mol-model/structure';
+import { Unit, StructureProperties, StructureElement, Link, Structure } from '../../mol-model/structure';
 
 import { Color } from '../../mol-util/color';
 import { Location } from '../../mol-model/location';
 import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
-import { Column } from '../../mol-data/db';
-import { Entities } from '../../mol-model/structure/model/properties/common';
-import { getPalette, getPaletteParams } from './util';
+import { getPalette, getPaletteParams } from '../../mol-util/color/palette';
 import { ScaleLegend } from '../../mol-util/color/scale';
 import { TableLegend } from '../../mol-util/color/lists';
+import { Segmentation } from '../../mol-data/int';
 
-const DefaultColor = Color(0xCCCCCC)
+const DefaultColor = Color(0xFAFAFA)
 const Description = 'Gives every polymer chain a color based on its `asym_id` value.'
 
 export const PolymerIdColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'set', setList: 'set-3' }),
 }
 export type PolymerIdColorThemeParams = typeof PolymerIdColorThemeParams
 export function getPolymerIdColorThemeParams(ctx: ThemeDataContext) {
-    return PolymerIdColorThemeParams // TODO return copy
+    const params = PD.clone(PolymerIdColorThemeParams)
+    if (ctx.structure) {
+        if (getPolymerAsymIdSerialMap(ctx.structure.root).size > 12) {
+            params.palette.defaultValue.name = 'scale'
+            params.palette.defaultValue.params = { list: 'red-yellow-blue' }
+        }
+    }
+    return params
 }
 
 function getAsymId(unit: Unit): StructureElement.Property<string> {
@@ -38,19 +44,40 @@ function getAsymId(unit: Unit): StructureElement.Property<string> {
     }
 }
 
-function addPolymerAsymIds(map: Map<string, number>, asymId: Column<string>, entityId: Column<string>, entities: Entities) {
-    let j = map.size
-    for (let o = 0, ol = asymId.rowCount; o < ol; ++o) {
-        const e = entityId.value(o)
-        const eI = entities.getEntityIndex(e)
-        if (entities.data.type.value(eI) === 'polymer') {
-            const k = asymId.value(o)
-            if (!map.has(k)) {
-                map.set(k, j)
-                j += 1
-            }
-        }
-    }
+function getPolymerAsymIdSerialMap(structure: Structure) {
+    const map = new Map<string, number>()
+    for (let i = 0, il = structure.unitSymmetryGroups.length; i < il; ++i) {
+        const unit = structure.unitSymmetryGroups[i].units[0]
+        const { model } = unit
+        if (Unit.isAtomic(unit)) {
+            const { chainAtomSegments, chains } = model.atomicHierarchy
+            const chainIt = Segmentation.transientSegments(chainAtomSegments, unit.elements)
+            while (chainIt.hasNext) {
+                const { index: chainIndex } = chainIt.move()
+                const entityId = chains.label_entity_id.value(chainIndex)
+                const eI = model.entities.getEntityIndex(entityId)
+                if (model.entities.data.type.value(eI) === 'polymer') {
+                    const asymId = chains.label_asym_id.value(chainIndex)
+                    if (!map.has(asymId)) map.set(asymId, map.size)
+                }
+            }
+        } else if (Unit.isCoarse(unit)) {
+            const { chainElementSegments, asym_id, entity_id } = Unit.isSpheres(unit)
+                ? model.coarseHierarchy.spheres
+                : model.coarseHierarchy.gaussians
+            const chainIt = Segmentation.transientSegments(chainElementSegments, unit.elements)
+            while (chainIt.hasNext) {
+                const { index: chainIndex } = chainIt.move()
+                const entityId = entity_id.value(chainIndex)
+                const eI = model.entities.getEntityIndex(entityId)
+                if (model.entities.data.type.value(eI) === 'polymer') {
+                    const asymId = asym_id.value(chainIndex)
+                    if (!map.has(asymId)) map.set(asymId, map.size)
+                }
+            }
+        }
+    }
+    return map
 }
 
 export function PolymerIdColorTheme(ctx: ThemeDataContext, props: PD.Values<PolymerIdColorThemeParams>): ColorTheme<PolymerIdColorThemeParams> {
@@ -58,33 +85,24 @@ export function PolymerIdColorTheme(ctx: ThemeDataContext, props: PD.Values<Poly
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        // TODO same asym ids in different models should get different color
         const l = StructureElement.create()
-        const { models } = ctx.structure
-        const polymerAsymIdSerialMap = new Map<string, number>()
-        for (let i = 0, il = models.length; i <il; ++i) {
-            const m = models[i]
-            addPolymerAsymIds(polymerAsymIdSerialMap, m.atomicHierarchy.chains.label_asym_id, m.atomicHierarchy.chains.label_entity_id, m.entities)
-            if (m.coarseHierarchy.isDefined) {
-                addPolymerAsymIds(polymerAsymIdSerialMap, m.coarseHierarchy.spheres.asym_id, m.coarseHierarchy.spheres.entity_id, m.entities)
-                addPolymerAsymIds(polymerAsymIdSerialMap, m.coarseHierarchy.gaussians.asym_id, m.coarseHierarchy.spheres.entity_id, m.entities)
-            }
-        }
+        const polymerAsymIdSerialMap = getPolymerAsymIdSerialMap(ctx.structure.root)
 
         const palette = getPalette(polymerAsymIdSerialMap.size, props)
         legend = palette.legend
 
         color = (location: Location): Color => {
+            let serial: number | undefined = undefined
             if (StructureElement.isLocation(location)) {
                 const asym_id = getAsymId(location.unit)
-                return palette.color(polymerAsymIdSerialMap.get(asym_id(location)) || 0)
+                serial = polymerAsymIdSerialMap.get(asym_id(location))
             } else if (Link.isLocation(location)) {
                 const asym_id = getAsymId(location.aUnit)
                 l.unit = location.aUnit
                 l.element = location.aUnit.elements[location.aIndex]
-                return palette.color(polymerAsymIdSerialMap.get(asym_id(l)) || 0)
+                serial = polymerAsymIdSerialMap.get(asym_id(l))
             }
-            return DefaultColor
+            return serial === undefined ? DefaultColor : palette.color(serial)
         }
     } else {
         color = () => DefaultColor

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

@@ -12,7 +12,7 @@ import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { ScaleLegend } from '../../mol-util/color/scale';
 import { TableLegend } from '../../mol-util/color/lists';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 
 const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every polymer a unique color based on the position (index) of the polymer in the list of polymers in the structure.'
@@ -31,7 +31,7 @@ export function PolymerIndexColorTheme(ctx: ThemeDataContext, props: PD.Values<P
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        const { units } = ctx.structure
+        const { units } = ctx.structure.root
         let polymerCount = 0
         for (let i = 0, il = units.length; i <il; ++i) {
             if (units[i].polymerElements.length > 0) ++polymerCount

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

@@ -11,14 +11,14 @@ import { ColorTheme, LocationColor } from '../color';
 import { ParamDefinition as PD } from '../../mol-util/param-definition'
 import { ThemeDataContext } from '../../mol-theme/theme';
 import { ScaleLegend } from '../../mol-util/color/scale';
-import { getPaletteParams, getPalette } from './util';
+import { getPaletteParams, getPalette } from '../../mol-util/color/palette';
 import { TableLegend } from '../../mol-util/color/lists';
 
 const DefaultColor = Color(0xCCCCCC)
 const Description = 'Gives every unit (single chain or collection of single elements) a unique color based on the position (index) of the unit in the list of units in the structure.'
 
 export const UnitIndexColorThemeParams = {
-    ...getPaletteParams({ scaleList: 'red-yellow-blue' }),
+    ...getPaletteParams({ type: 'scale', scaleList: 'red-yellow-blue' }),
 }
 export type UnitIndexColorThemeParams = typeof UnitIndexColorThemeParams
 export function getUnitIndexColorThemeParams(ctx: ThemeDataContext) {
@@ -30,7 +30,7 @@ export function UnitIndexColorTheme(ctx: ThemeDataContext, props: PD.Values<Unit
     let legend: ScaleLegend | TableLegend | undefined
 
     if (ctx.structure) {
-        const { units } = ctx.structure
+        const { units } = ctx.structure.root
         const palette = getPalette(units.length, props)
         legend = palette.legend
         const unitIdColor = new Map<number, Color>()

src/mol-theme/color/util.ts → src/mol-util/color/palette.ts

@@ -4,22 +4,25 @@
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { ParamDefinition as PD } from '../../mol-util/param-definition'
-import { DistinctColorsParams, distinctColors } from '../../mol-util/color/distinct';
-import { ScaleLegend, ColorScale } from '../../mol-util/color/scale';
-import { Color } from '../../mol-util/color';
-import { TableLegend, ColorListName, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from '../../mol-util/color/lists';
+import { ParamDefinition as PD } from '../param-definition'
+import { DistinctColorsParams, distinctColors } from './distinct';
+import { ScaleLegend, ColorScale } from './scale';
+import { Color } from '.';
+import { TableLegend, ColorListName, ColorListOptionsScale, ColorListOptionsSet, getColorListFromName } from './lists';
+
+type PaletteType = 'generate' | 'scale' | 'set'
 
 const DefaultGetPaletteProps = {
+    type: 'generate' as PaletteType,
     scaleList: 'red-yellow-blue' as ColorListName,
     setList: 'set-1' as ColorListName
 }
 type GetPaletteProps = typeof DefaultGetPaletteProps
 
 export function getPaletteParams(props: Partial<GetPaletteProps> = {}) {
-    const p = { ...DefaultGetPaletteProps, props }
+    const p = { ...DefaultGetPaletteProps, ...props }
     return {
-        palette: PD.MappedStatic('generate', {
+        palette: PD.MappedStatic(p.type, {
             scale: PD.Group({
                 list: PD.ColorList<ColorListName>(p.scaleList, ColorListOptionsScale),
             }, { isFlat: true }),