proteopedia wrapper

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
             }

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 });

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!);