From 5ddce4de98574608c6272bcbf0524b77046d822b Mon Sep 17 00:00:00 2001 From: David Sehnal <david.sehnal@gmail.com> Date: Sun, 7 Apr 2019 17:57:51 +0200 Subject: [PATCH] proteopedia wrapper --- src/examples/proteopedia-wrapper/coloring.ts | 11 +++++------ src/examples/proteopedia-wrapper/index.html | 6 ++---- src/examples/proteopedia-wrapper/index.ts | 7 +++---- 3 files changed, 10 insertions(+), 14 deletions(-) diff --git a/src/examples/proteopedia-wrapper/coloring.ts b/src/examples/proteopedia-wrapper/coloring.ts index bbef16e76..a2199b6ed 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 09d9537fa..288db037a 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 3ec4cc926..ee540eef3 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!); -- GitLab