diff --git a/src/mol-plugin/ui/sequence/sequence.tsx b/src/mol-plugin/ui/sequence/sequence.tsx index f9f71426c628a7e99895df641c273ee7616d2c97..653dd9279254b57daa8e74cfd0e4ec9b6c92da04 100644 --- a/src/mol-plugin/ui/sequence/sequence.tsx +++ b/src/mol-plugin/ui/sequence/sequence.tsx @@ -153,6 +153,8 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> { const { markerArray } = this.props.sequenceWrapper; const hasNumbers = !this.props.hideSequenceNumbers, period = this.sequenceNumberPeriod; + let first: HTMLSpanElement | undefined; + let o = 0; for (let i = 0, il = markerArray.length; i < il; i++) { if (hasNumbers && i % period === 0 && i < il) o++; @@ -160,9 +162,17 @@ export class Sequence<P extends SequenceProps> extends PluginUIComponent<P> { if (!span) return; o++; + if (!first && markerArray[i] > 0) { + first = span; + } + const backgroundColor = this.getBackgroundColor(markerArray[i]); if (span.style.backgroundColor !== backgroundColor) span.style.backgroundColor = backgroundColor; } + + if (first) { + first.scrollIntoView({ block: 'nearest' }); + } } mouseMove = (e: React.MouseEvent) => {