sequence widget refactoring

src/mol-plugin/ui/sequence/polymer.ts

@@ -8,11 +8,24 @@ import { StructureSelection, StructureQuery, Structure, Queries, StructureProper
 import { SequenceWrapper } from './util';
 import { OrderedSet, Interval } from '../../../mol-data/int';
 import { Loci } from '../../../mol-model/loci';
+import { Sequence } from '../../../mol-model/sequence';
+import { Color } from '../../../mol-util/color';
 
 export type StructureUnit = { structure: Structure, unit: Unit }
 
 export class PolymerSequenceWrapper extends SequenceWrapper<StructureUnit> {
-    private readonly location = StructureElement.create()
+    private readonly location: StructureElement
+    private readonly sequence: Sequence
+
+    seqId(i: number) {
+        return this.sequence.offset + i + 1
+    }
+    residueLabel(i: number) {
+        return this.sequence.sequence[i]
+    }
+    residueColor(i: number) {
+        return Color(0)
+    }
 
     eachResidue(loci: Loci, apply: (interval: Interval) => boolean) {
         let changed = false
@@ -47,15 +60,15 @@ export class PolymerSequenceWrapper extends SequenceWrapper<StructureUnit> {
         return StructureSelection.toLoci2(StructureQuery.run(query, this.data.structure));
     }
 
-    constructor(readonly data: StructureUnit) {
-        super()
+    constructor(data: StructureUnit) {
+        const l = StructureElement.create(data.unit, data.unit.elements[0])
+        const sequence = data.unit.model.sequence.byEntityKey[SP.entity.key(l)].sequence
+        const markerArray = new Uint8Array(sequence.sequence.length)
 
-        const l = this.location
-        l.unit = data.unit
-        l.element = data.unit.elements[0]
+        super(data, markerArray, sequence.sequence.length)
 
-        this.sequence = data.unit.model.sequence.byEntityKey[SP.entity.key(l)].sequence
-        this.markerArray = new Uint8Array(this.sequence.sequence.length)
+        this.sequence = sequence
+        this.location = StructureElement.create()
     }
 }
 

src/mol-plugin/ui/sequence/residue.tsx

@@ -9,8 +9,9 @@ import * as React from 'react'
 import { PurePluginUIComponent } from '../base';
 import { getButtons, getModifiers } from '../../../mol-util/input/input-observer';
 import { Sequence } from './sequence';
+import { Color } from '../../../mol-util/color';
 
-export class Residue extends PurePluginUIComponent<{ seqId: number, letter: string, parent: Sequence<any>, marker: number }> {
+export class Residue extends PurePluginUIComponent<{ seqId: number, label: string, parent: Sequence<any>, marker: number, color: Color }> {
 
     mouseEnter = (e: React.MouseEvent) => {
         const modifiers = getModifiers(e.nativeEvent)
@@ -41,8 +42,11 @@ export class Residue extends PurePluginUIComponent<{ seqId: number, letter: stri
             onMouseEnter={this.mouseEnter}
             onMouseLeave={this.mouseLeave}
             onMouseDown={this.mouseDown}
-            style={{ backgroundColor: this.getBackgroundColor() }}>
-            {this.props.letter}
+            style={{
+                color: Color.toStyle(this.props.color),
+                backgroundColor: this.getBackgroundColor()
+            }}>
+            {this.props.label}
         </span>;
     }
 }

src/mol-plugin/ui/sequence/sequence.tsx

@@ -88,11 +88,18 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P, Sequ
 
     render() {
         const { markerData } = this.state;
-        const { offset, sequence } = this.props.sequenceWrapper.sequence;
+        const sw = this.props.sequenceWrapper
 
         const elems: JSX.Element[] = [];
-        for (let i = 0, _i = sequence.length; i < _i; i++) {
-            elems[elems.length] = <Residue seqId={offset + i + 1} letter={sequence[i]} parent={this} marker={markerData.value[i]} key={i} />;
+        for (let i = 0, il = sw.length; i < il; ++i) {
+            elems[elems.length] = <Residue
+                seqId={sw.seqId(i)}
+                label={sw.residueLabel(i)}
+                parent={this}
+                marker={markerData.value[i]}
+                color={sw.residueColor(i)}
+                key={i}
+            />;
         }
 
         return <div

src/mol-plugin/ui/sequence/util.ts

@@ -8,15 +8,15 @@ import { Interval } from '../../../mol-data/int';
 import { Loci } from '../../../mol-model/loci';
 import { MarkerAction, applyMarkerAction } from '../../../mol-util/marker-action';
 import { StructureElement } from '../../../mol-model/structure';
-import { Sequence } from '../../../mol-model/sequence';
+import { Color } from '../../../mol-util/color';
 
 export { SequenceWrapper }
 
 abstract class SequenceWrapper<D> {
-    label: string
-    data: D
-    markerArray: Uint8Array
-    sequence: Sequence
+    abstract seqId(i: number): number
+    abstract residueLabel(i: number): string
+    abstract residueColor(i: number): Color
+
     abstract eachResidue(loci: Loci, apply: (interval: Interval) => boolean): boolean
     abstract getLoci(seqId: number): StructureElement.Loci
 
@@ -25,6 +25,10 @@ abstract class SequenceWrapper<D> {
             return applyMarkerAction(this.markerArray, i, action)
         })
     }
+
+    constructor(readonly data: D, readonly markerArray: Uint8Array, readonly length: number) {
+
+    }
 }
 
 namespace SequenceWrapper {