From 884cb0d9a4bf0ad8220df3f89c07aa2acaa770bf Mon Sep 17 00:00:00 2001
From: Alexander Rose <alex.rose@rcsb.org>
Date: Fri, 21 Jun 2019 12:54:22 -0700
Subject: [PATCH] sequence widget refactoring
---
src/mol-plugin/ui/sequence/polymer.ts | 29 ++++++++++++++++++-------
src/mol-plugin/ui/sequence/residue.tsx | 10 ++++++---
src/mol-plugin/ui/sequence/sequence.tsx | 13 ++++++++---
src/mol-plugin/ui/sequence/util.ts | 14 +++++++-----
4 files changed, 47 insertions(+), 19 deletions(-)
diff --git a/src/mol-plugin/ui/sequence/polymer.ts b/src/mol-plugin/ui/sequence/polymer.ts
index dc02ba205..a6302fd24 100644
--- a/src/mol-plugin/ui/sequence/polymer.ts
+++ b/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()
}
}
diff --git a/src/mol-plugin/ui/sequence/residue.tsx b/src/mol-plugin/ui/sequence/residue.tsx
index d5329a90b..1d543db77 100644
--- a/src/mol-plugin/ui/sequence/residue.tsx
+++ b/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>;
}
}
\ No newline at end of file
diff --git a/src/mol-plugin/ui/sequence/sequence.tsx b/src/mol-plugin/ui/sequence/sequence.tsx
index fcc6d1e7b..913cbd9e2 100644
--- a/src/mol-plugin/ui/sequence/sequence.tsx
+++ b/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
diff --git a/src/mol-plugin/ui/sequence/util.ts b/src/mol-plugin/ui/sequence/util.ts
index 68b4e8d56..91813be7a 100644
--- a/src/mol-plugin/ui/sequence/util.ts
+++ b/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 {
--
GitLab