diff --git a/src/examples/proteopedia-wrapper/coloring.ts b/src/examples/proteopedia-wrapper/coloring.ts index bbef16e7618f9463722c751e15a1728b138c453b..a2199b6edbc72f94989016b1e97de943d467e6aa 100644 --- a/src/examples/proteopedia-wrapper/coloring.ts +++ b/src/examples/proteopedia-wrapper/coloring.ts @@ -17,11 +17,10 @@ import { Column } from 'mol-data/db'; const Description = 'Gives every chain a color from a list based on its `asym_id` value.' -export function createProteopediaCustomTheme(colors: number[], defaultColor: number) { +export function createProteopediaCustomTheme(colors: number[]) { const ProteopediaCustomColorThemeParams = { colors: PD.ObjectList({ color: PD.Color(Color(0xffffff)) }, ({ color }) => Color.toHexString(color), - { defaultValue: colors.map(c => ({ color: Color(c) })) }), - defaultColor: PD.Color(Color(defaultColor)) + { defaultValue: colors.map(c => ({ color: Color(c) })) }) } type ProteopediaCustomColorThemeParams = typeof ProteopediaCustomColorThemeParams function getChainIdColorThemeParams(ctx: ThemeDataContext) { @@ -52,7 +51,7 @@ export function createProteopediaCustomTheme(colors: number[], defaultColor: num function ProteopediaCustomColorTheme(ctx: ThemeDataContext, props: PD.Values<ProteopediaCustomColorThemeParams>): ColorTheme<ProteopediaCustomColorThemeParams> { let color: LocationColor - const colors = props.colors, colorCount = colors.length, defaultColor = props.defaultColor; + const colors = props.colors, colorCount = colors.length, defaultColor = colors[0].color; if (ctx.structure) { const l = StructureElement.create() @@ -71,13 +70,13 @@ export function createProteopediaCustomTheme(colors: number[], defaultColor: num if (StructureElement.isLocation(location)) { const asym_id = getAsymId(location.unit); const o = asymIdSerialMap.get(asym_id(location)) || 0; - return o < colorCount ? colors[o].color : defaultColor; + return colors[o % colorCount].color; } else if (Link.isLocation(location)) { const asym_id = getAsymId(location.aUnit) l.unit = location.aUnit l.element = location.aUnit.elements[location.aIndex] const o = asymIdSerialMap.get(asym_id(l)) || 0; - return o < colorCount ? colors[o].color : defaultColor; + return colors[o % colorCount].color; } return defaultColor } diff --git a/src/examples/proteopedia-wrapper/index.html b/src/examples/proteopedia-wrapper/index.html index 09d9537fad15800035056c1086dcb3d6dae25596..288db037a5d4f2406c2a3b486fd2417dde62e592 100644 --- a/src/examples/proteopedia-wrapper/index.html +++ b/src/examples/proteopedia-wrapper/index.html @@ -58,12 +58,11 @@ <script> // it might be a good idea to define these colors in a separate script file var CustomColors = [0x00ff00, 0x0000ff]; - var DefaultCustomColor = 0xff0000; // create an instance of the plugin var PluginWrapper = new MolStarProteopediaWrapper(); - console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR); + console.log('Wrapper version', MolStarProteopediaWrapper.VERSION_MAJOR, MolStarProteopediaWrapper.VERSION_MINOR); function $(id) { return document.getElementById(id); } @@ -90,8 +89,7 @@ }; PluginWrapper.init('app' /** or document.getElementById('app') */, { - customColorList: CustomColors, - customColorDefault: DefaultCustomColor + customColorList: CustomColors }); PluginWrapper.setBackground(0xffffff); PluginWrapper.load({ url: url, format: format, assemblyId: assemblyId, representationStyle: representationStyle }); diff --git a/src/examples/proteopedia-wrapper/index.ts b/src/examples/proteopedia-wrapper/index.ts index 3ec4cc92695c36d6332c96e88b0844bd88951d19..ee540eef34939d060f3d3813a0d4826be364ad27 100644 --- a/src/examples/proteopedia-wrapper/index.ts +++ b/src/examples/proteopedia-wrapper/index.ts @@ -33,7 +33,7 @@ require('mol-plugin/skin/light.scss') class MolStarProteopediaWrapper { static VERSION_MAJOR = 3; - static VERSION_MINOR = 0; + static VERSION_MINOR = 1; private _ev = RxEventHelper.create(); @@ -44,8 +44,7 @@ class MolStarProteopediaWrapper { plugin: PluginContext; init(target: string | HTMLElement, options?: { - customColorList?: number[], - customColorDefault?: number + customColorList?: number[] }) { this.plugin = createPlugin(typeof target === 'string' ? document.getElementById(target)! : target, { ...DefaultPluginSpec, @@ -63,7 +62,7 @@ class MolStarProteopediaWrapper { } }); - const customColoring = createProteopediaCustomTheme((options && options.customColorList) || [], (options && options.customColorDefault) || 0x777777); + const customColoring = createProteopediaCustomTheme((options && options.customColorList) || []); this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.add('proteopedia-custom', customColoring); this.plugin.structureRepresentation.themeCtx.colorThemeRegistry.add(EvolutionaryConservation.Descriptor.name, EvolutionaryConservation.colorTheme!);