support custom colors in molecule-type theme

CHANGELOG.md

@@ -11,6 +11,7 @@ Note that since we don't clearly distinguish between a public and private interf
     - Fix camera stutter for "camera spin" animation
 - Add partial charge parsing support for MOL/SDF files (thanks @ptourlas)
 - [Breaking] Cleaner looking ``MembraneOrientationVisuals`` defaults
+- Add support for custom colors to "molecule-type" theme
 
 ## [v3.0.0-dev.9] - 2022-01-09
 

src/mol-theme/color/molecule-type.ts

@@ -1,10 +1,10 @@
 /**
- * Copyright (c) 2018-2019 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ * Copyright (c) 2018-2022 mol* contributors, licensed under MIT, See LICENSE file for more info.
  *
  * @author Alexander Rose <alexander.rose@weirdbyte.de>
  */
 
-import { Color, ColorMap } from '../../mol-util/color';
+import { Color } from '../../mol-util/color';
 import { StructureElement, Unit, Bond, ElementIndex } from '../../mol-model/structure';
 import { Location } from '../../mol-model/location';
 import { ColorTheme } from '../color';
@@ -13,53 +13,55 @@ import { getElementMoleculeType } from '../../mol-model/structure/util';
 import { ParamDefinition as PD } from '../../mol-util/param-definition';
 import { ThemeDataContext } from '../theme';
 import { TableLegend } from '../../mol-util/legend';
-import { getAdjustedColorMap } from '../../mol-util/color/color';
-
-export const MoleculeTypeColors = ColorMap({
-    water: 0x386cb0,
-    ion: 0xf0027f,
-    protein: 0xbeaed4,
-    RNA: 0xfdc086,
-    DNA: 0xbf5b17,
-    PNA: 0x42A49A,
-    saccharide: 0x7fc97f,
-});
-export type MoleculeTypeColors = typeof MoleculeTypeColors
 
 const DefaultMoleculeTypeColor = Color(0xffff99);
 const Description = 'Assigns a color based on the molecule type of a residue.';
 
 export const MoleculeTypeColorThemeParams = {
     saturation: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
-    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 })
+    lightness: PD.Numeric(0, { min: -6, max: 6, step: 0.1 }),
+    colors: PD.Group({
+        water: PD.Color(Color(0x386cb0)),
+        ion: PD.Color(Color(0xf0027f)),
+        protein: PD.Color(Color(0xbeaed4)),
+        rna: PD.Color(Color(0xfdc086)),
+        dna: PD.Color(Color(0xbf5b17)),
+        pna: PD.Color(Color(0x42A49A)),
+        saccharide: PD.Color(Color(0x7fc97f)),
+        lipid: PD.Color(Color(0xcccccc)),
+    })
 };
 export type MoleculeTypeColorThemeParams = typeof MoleculeTypeColorThemeParams
 export function getMoleculeTypeColorThemeParams(ctx: ThemeDataContext) {
     return MoleculeTypeColorThemeParams; // TODO return copy
 }
 
-export function moleculeTypeColor(colorMap: MoleculeTypeColors, unit: Unit, element: ElementIndex): Color {
+type MoleculeTypeColorThemeProps = PD.Values<MoleculeTypeColorThemeParams>;
+export function moleculeTypeColor(props: MoleculeTypeColorThemeProps, unit: Unit, element: ElementIndex): Color {
+    let c = DefaultMoleculeTypeColor;
     const moleculeType = getElementMoleculeType(unit, element);
     switch (moleculeType) {
-        case MoleculeType.Water: return colorMap.water;
-        case MoleculeType.Ion: return colorMap.ion;
-        case MoleculeType.Protein: return colorMap.protein;
-        case MoleculeType.RNA: return colorMap.RNA;
-        case MoleculeType.DNA: return colorMap.DNA;
-        case MoleculeType.PNA: return colorMap.PNA;
-        case MoleculeType.Saccharide: return colorMap.saccharide;
+        case MoleculeType.Water: c = props.colors.water; break;
+        case MoleculeType.Ion: c = props.colors.ion; break;
+        case MoleculeType.Protein: c = props.colors.protein; break;
+        case MoleculeType.RNA: c = props.colors.rna; break;
+        case MoleculeType.DNA: c = props.colors.dna; break;
+        case MoleculeType.PNA: c = props.colors.pna; break;
+        case MoleculeType.Saccharide: c = props.colors.saccharide; break;
+        case MoleculeType.Lipid: c = props.colors.lipid; break;
     }
-    return DefaultMoleculeTypeColor;
+    c = Color.saturate(c, props.saturation);
+    c = Color.darken(c, -props.lightness);
+    return c;
 }
 
 export function MoleculeTypeColorTheme(ctx: ThemeDataContext, props: PD.Values<MoleculeTypeColorThemeParams>): ColorTheme<MoleculeTypeColorThemeParams> {
-    const colorMap = getAdjustedColorMap(MoleculeTypeColors, props.saturation, props.lightness);
 
     function color(location: Location): Color {
         if (StructureElement.Location.is(location)) {
-            return moleculeTypeColor(colorMap, location.unit, location.element);
+            return moleculeTypeColor(props, location.unit, location.element);
         } else if (Bond.isLocation(location)) {
-            return moleculeTypeColor(colorMap, location.aUnit, location.aUnit.elements[location.aIndex]);
+            return moleculeTypeColor(props, location.aUnit, location.aUnit.elements[location.aIndex]);
         }
         return DefaultMoleculeTypeColor;
     }
@@ -70,8 +72,8 @@ export function MoleculeTypeColorTheme(ctx: ThemeDataContext, props: PD.Values<M
         color,
         props,
         description: Description,
-        legend: TableLegend(Object.keys(MoleculeTypeColors).map(name => {
-            return [name, (MoleculeTypeColors as any)[name] as Color] as [string, Color];
+        legend: TableLegend(Object.keys(props.colors).map(name => {
+            return [name, (props.colors as any)[name] as Color] as [string, Color];
         }).concat([['Other/unknown', DefaultMoleculeTypeColor]]))
     };
 }