rudimentary cross-link color scheme

src/mol-view/stage.ts

@@ -36,7 +36,7 @@ const ballAndStickProps: Partial<BallAndStickProps> = {
 
 const distanceRestraintProps: Partial<DistanceRestraintProps> = {
     doubleSided: true,
-    colorTheme: { name: 'chain-id' },
+    colorTheme: { name: 'cross-link' },
     sizeTheme: { name: 'uniform', value: 0.6 },
     quality: 'auto',
     useFog: false

src/mol-view/theme/color.ts

@@ -14,6 +14,7 @@ import { ChainIdColorTheme } from './color/chain-id';
 import { ElementSymbolColorTheme } from './color/element-symbol';
 import { UnitIndexColorTheme } from './color/unit-index';
 import { UniformColorTheme } from './color/uniform';
+import { CrossLinkColorTheme } from './color/cross-link';
 
 export interface ColorTheme {
     kind: ColorType
@@ -24,6 +25,7 @@ export function ColorTheme(props: ColorThemeProps): ColorTheme {
     switch (props.name) {
         case 'element-index': return ElementIndexColorTheme(props)
         case 'carbohydrate-symbol': return CarbohydrateSymbolColorTheme(props)
+        case 'cross-link': return CrossLinkColorTheme(props)
         case 'chain-id': return ChainIdColorTheme(props)
         case 'element-symbol': return ElementSymbolColorTheme(props)
         case 'unit-index': return UnitIndexColorTheme(props)
@@ -32,7 +34,7 @@ export function ColorTheme(props: ColorThemeProps): ColorTheme {
 }
 
 export interface ColorThemeProps {
-    name: 'element-index' | 'chain-id'| 'unit-index' | 'uniform' | 'carbohydrate-symbol' | 'element-symbol'
+    name: ColorThemeName
     domain?: [number, number]
     value?: Color
     structure?: Structure
@@ -41,6 +43,7 @@ export interface ColorThemeProps {
 export const ColorThemeInfo = {
     'element-index': {},
     'carbohydrate-symbol': {},
+    'cross-link': {},
     'chain-id': {},
     'element-symbol': {},
     'unit-index': {},

src/mol-view/theme/color/cross-link.ts

@@ -0,0 +1,48 @@
+/**
+ * Copyright (c) 2018 mol* contributors, licensed under MIT, See LICENSE file for more info.
+ *
+ * @author Alexander Rose <alexander.rose@weirdbyte.de>
+ */
+
+import { Link } from 'mol-model/structure';
+
+import { Color, ColorScale, ColorBrewer } from 'mol-util/color';
+import { Location } from 'mol-model/location';
+import { ColorThemeProps, ColorTheme } from '../color';
+import { LocationColor } from 'mol-geo/util/color-data';
+import { Vec3 } from 'mol-math/linear-algebra';
+
+const DefaultColor = 0xCCCCCC;
+
+const distVecA = Vec3.zero(), distVecB = Vec3.zero()
+function linkDistance(link: Link.Location) {
+    link.aUnit.conformation.position(link.aIndex, distVecA)
+    link.bUnit.conformation.position(link.bIndex, distVecB)
+    return Vec3.distance(distVecA, distVecB)
+}
+
+export function CrossLinkColorTheme(props: ColorThemeProps): ColorTheme {
+    let colorFn: LocationColor
+
+    if (props.structure) {
+        const crosslinks = props.structure.crossLinkRestraints
+        const scale = ColorScale.create({ domain: [ -10, 10 ], colors: ColorBrewer.RdYlBu })
+
+        colorFn = (location: Location): Color => {
+            if (Link.isLocation(location)) {
+                const pairs = crosslinks.getPairs(location.aIndex, location.aUnit, location.bIndex, location.bUnit)
+                if (pairs) {
+                    return scale.color(linkDistance(location) - pairs[0].distanceThreshold)
+                }
+            }
+            return DefaultColor
+        }
+    } else {
+        colorFn = () => DefaultColor
+    }
+
+    return {
+        kind: 'element',
+        color: colorFn
+    }
+}