color-data/theme related fixes and tweaks

src/mol-geo/util/color-data.ts

@@ -46,8 +46,8 @@ export function createValueColor(value: Color, colorData?: ColorData): ColorData
 }
 
 /** Creates color uniform */
-export function createUniformColor(locationIt: LocationIterator, colorFn: LocationColor, colorData?: ColorData): ColorData {
-    return createValueColor(colorFn(NullLocation, false), colorData)
+export function createUniformColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
+    return createValueColor(color(NullLocation, false), colorData)
 }
 
 export function createTextureColor(colors: TextureImage, type: ColorType, colorData?: ColorData): ColorData {
@@ -70,36 +70,38 @@ export function createTextureColor(colors: TextureImage, type: ColorType, colorD
 }
 
 /** Creates color texture with color for each instance/unit */
-export function createInstanceColor(locationIt: LocationIterator, colorFn: LocationColor, colorData?: ColorData): ColorData {
+export function createInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { instanceCount} = locationIt
     const colors = colorData && colorData.tColor.ref.value.array.length >= instanceCount * 3 ? colorData.tColor.ref.value : createTextureImage(instanceCount, 3)
-    while (locationIt.hasNext && !locationIt.isNextNewInstance) {
+    while (locationIt.hasNext) {
         const { location, isSecondary, instanceIndex } = locationIt.move()
-        Color.toArray(colorFn(location, isSecondary), colors.array, instanceIndex * 3)
+        Color.toArray(color(location, isSecondary), colors.array, instanceIndex * 3)
         locationIt.skipInstance()
     }
     return createTextureColor(colors, 'instance', colorData)
 }
 
 /** Creates color texture with color for each group (i.e. shared across instances/units) */
-export function createGroupColor(locationIt: LocationIterator, colorFn: LocationColor, colorData?: ColorData): ColorData {
+export function createGroupColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount } = locationIt
     const colors = colorData && colorData.tColor.ref.value.array.length >= groupCount * 3 ? colorData.tColor.ref.value : createTextureImage(groupCount, 3)
     while (locationIt.hasNext && !locationIt.isNextNewInstance) {
         const { location, isSecondary, groupIndex } = locationIt.move()
-        Color.toArray(colorFn(location, isSecondary), colors.array, groupIndex * 3)
+        Color.toArray(color(location, isSecondary), colors.array, groupIndex * 3)
     }
     return createTextureColor(colors, 'group', colorData)
 }
 
 /** Creates color texture with color for each group in each instance (i.e. for each unit) */
-export function createGroupInstanceColor(locationIt: LocationIterator, colorFn: LocationColor, colorData?: ColorData): ColorData {
+export function createGroupInstanceColor(locationIt: LocationIterator, color: LocationColor, colorData?: ColorData): ColorData {
     const { groupCount, instanceCount } = locationIt
     const count = instanceCount * groupCount
+    console.log(count, instanceCount, groupCount)
     const colors = colorData && colorData.tColor.ref.value.array.length >= count * 3 ? colorData.tColor.ref.value : createTextureImage(count, 3)
-    while (locationIt.hasNext && !locationIt.isNextNewInstance) {
+    console.log(colors.array.length / 3, count)
+    while (locationIt.hasNext) {
         const { location, isSecondary, index } = locationIt.move()
-        Color.toArray(colorFn(location, isSecondary), colors.array, index * 3)
+        Color.toArray(color(location, isSecondary), colors.array, index * 3)
     }
     return createTextureColor(colors, 'groupInstance', colorData)
 }

src/mol-view/theme/color.ts

@@ -45,7 +45,7 @@ export interface ColorThemeProps {
     domain?: [number, number]
     value?: Color
     structure?: Structure
-    colorFn?: LocationColor
+    color?: LocationColor
     kind?: ColorType
 }
 

src/mol-view/theme/color/carbohydrate-symbol.ts

@@ -14,7 +14,7 @@ import { Color } from 'mol-util/color';
 const DefaultColor = Color(0xCCCCCC)
 
 export function CarbohydrateSymbolColorTheme(props: ColorThemeProps): ColorTheme {
-    let colorFn: LocationColor
+    let color: LocationColor
 
     if (props.structure) {
         const { elements, getElementIndex, getAnomericCarbon } = props.structure.carbohydrates
@@ -29,7 +29,7 @@ export function CarbohydrateSymbolColorTheme(props: ColorThemeProps): ColorTheme
             return DefaultColor
         }
 
-        colorFn = (location: Location, isSecondary: boolean) => {
+        color = (location: Location, isSecondary: boolean) => {
             if (isSecondary) {
                 return SaccharideColors.Secondary
             } else {
@@ -42,11 +42,8 @@ export function CarbohydrateSymbolColorTheme(props: ColorThemeProps): ColorTheme
             return DefaultColor
         }
     } else {
-        colorFn = () => DefaultColor
+        color = () => DefaultColor
     }
 
-    return {
-        kind: 'group',
-        color: colorFn
-    }
+    return { kind: 'group', color: color }
 }

src/mol-view/theme/color/chain-id.ts

@@ -25,7 +25,7 @@ function getAsymId(unit: Unit): StructureElement.Property<string> {
 export function ChainIdColorTheme(props: ColorThemeProps): ColorTheme {
     const l = StructureElement.create()
 
-    function colorFn(location: Location): Color {
+    function color(location: Location): Color {
         if (StructureElement.isLocation(location)) {
             const map = location.unit.model.properties.asymIdSerialMap
             const scale = ColorScale.create({ domain: [ 0, map.size - 1 ] })
@@ -42,8 +42,5 @@ export function ChainIdColorTheme(props: ColorThemeProps): ColorTheme {
         return DefaultColor
     }
 
-    return {
-        kind: 'group',
-        color: colorFn
-    }
+    return { kind: 'group', color }
 }

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

@@ -21,13 +21,13 @@ function linkDistance(link: Link.Location) {
 }
 
 export function CrossLinkColorTheme(props: ColorThemeProps): ColorTheme {
-    let colorFn: LocationColor
+    let color: LocationColor
 
     if (props.structure) {
         const crosslinks = props.structure.crossLinkRestraints
         const scale = ColorScale.create({ domain: [ -10, 10 ], colors: ColorBrewer.RdYlBu })
 
-        colorFn = (location: Location): Color => {
+        color = (location: Location): Color => {
             if (Link.isLocation(location)) {
                 const pairs = crosslinks.getPairs(location.aIndex, location.aUnit, location.bIndex, location.bUnit)
                 if (pairs) {
@@ -37,11 +37,8 @@ export function CrossLinkColorTheme(props: ColorThemeProps): ColorTheme {
             return DefaultColor
         }
     } else {
-        colorFn = () => DefaultColor
+        color = () => DefaultColor
     }
 
-    return {
-        kind: 'group',
-        color: colorFn
-    }
+    return { kind: 'group', color }
 }

src/mol-view/theme/color/custom.ts

@@ -14,6 +14,6 @@ export function CustomColorTheme(props: ColorThemeProps): ColorTheme {
     const value = defaults(props.value, DefaultColor)
     return {
         kind: defaults(props.kind, 'uniform'),
-        color: defaults(props.colorFn, () => value)
+        color: defaults(props.color, () => value)
     }
 }

src/mol-view/theme/color/element-index.ts

@@ -13,7 +13,7 @@ import { ColorThemeProps, ColorTheme, LocationColor } from '../color';
 const DefaultColor = Color(0xCCCCCC)
 
 export function ElementIndexColorTheme(props: ColorThemeProps): ColorTheme {
-    let colorFn: LocationColor
+    let color: LocationColor
 
     if (props.structure) {
         const { units } = props.structure
@@ -27,7 +27,7 @@ export function ElementIndexColorTheme(props: ColorThemeProps): ColorTheme {
         }
         const scale = ColorScale.create({ domain: [ 0, elementCount ] })
 
-        colorFn = (location: Location): Color => {
+        color = (location: Location): Color => {
             if (StructureElement.isLocation(location)) {
                 const unitIndex = Unit.findUnitById(location.unit.id, units)
                 const unitElementIndex = OrderedSet.findPredecessorIndex(location.unit.elements, location.element)
@@ -39,11 +39,8 @@ export function ElementIndexColorTheme(props: ColorThemeProps): ColorTheme {
             return DefaultColor
         }
     } else {
-        colorFn = () => DefaultColor
+        color = () => DefaultColor
     }
 
-    return {
-        kind: 'groupInstance',
-        color: colorFn
-    }
+    return { kind: 'groupInstance', color }
 }

src/mol-view/theme/color/element-symbol.ts

@@ -23,7 +23,7 @@ export function elementSymbolColor(element: ElementSymbol): Color {
 }
 
 export function ElementSymbolColorTheme(props: ColorThemeProps): ColorTheme {
-    function colorFn(location: Location): Color {
+    function color(location: Location): Color {
         if (StructureElement.isLocation(location)) {
             if (Unit.isAtomic(location.unit)) {
                 const { type_symbol } = location.unit.model.atomicHierarchy.atoms
@@ -38,8 +38,5 @@ export function ElementSymbolColorTheme(props: ColorThemeProps): ColorTheme {
         return DefaultElementSymbolColor
     }
 
-    return {
-        kind: 'group',
-        color: colorFn
-    }
+    return { kind: 'group', color }
 }

src/mol-view/theme/color/unit-index.ts

@@ -12,16 +12,15 @@ import { ColorTheme, ColorThemeProps, LocationColor } from '../color';
 const DefaultColor = Color(0xCCCCCC)
 
 export function UnitIndexColorTheme(props: ColorThemeProps): ColorTheme {
-    let colorFn: LocationColor
+    let color: LocationColor
 
     if (props.structure) {
         const { units } = props.structure
-        const unitCount = units.length
+        const scale = ColorScale.create({ domain: [ 0, units.length - 1 ] })
 
-        const scale = ColorScale.create({ domain: [ 0, unitCount ] })
-
-        colorFn = (location: Location): Color => {
+        color = (location: Location): Color => {
             if (StructureElement.isLocation(location)) {
+                // console.log(location.unit.id, Unit.findUnitById(location.unit.id, units), units.length, units)
                 return scale.color(Unit.findUnitById(location.unit.id, units))
             } else if (Link.isLocation(location)) {
                 return scale.color(Unit.findUnitById(location.aUnit.id, units))
@@ -29,11 +28,8 @@ export function UnitIndexColorTheme(props: ColorThemeProps): ColorTheme {
             return DefaultColor
         }
     } else {
-        colorFn = () => DefaultColor
+        color = () => DefaultColor
     }
 
-    return {
-        kind: 'instance',
-        color: colorFn
-    }
+    return { kind: 'instance', color }
 }