diff --git a/src/SeqViewerContainer.tsx b/src/SeqViewerContainer.tsx index 6ace6f3a4..9ccbddaeb 100644 --- a/src/SeqViewerContainer.tsx +++ b/src/SeqViewerContainer.tsx @@ -8,7 +8,7 @@ import SelectionHandler, { InputRefFunc } from "./SelectionHandler"; import CentralIndexContext from "./centralIndexContext"; import { Annotation, CutSite, Highlight, NameRange, Primer, Range, SeqType } from "./elements"; import { isEqual } from "./isEqual"; -import SelectionContext, { Selection, defaultSelection } from "./selectionContext"; +import SelectionContext, { ExternalSelection, Selection, defaultSelection } from "./selectionContext"; /** * This is the width in pixels of a character that's 12px @@ -46,11 +46,7 @@ interface SeqViewerContainerProps { rotateOnScroll: boolean; search: NameRange[]; selectAllEvent: (event: React.KeyboardEvent) => boolean; - selection?: { - clockwise?: boolean; - end: number; - start: number; - }; + selection?: ExternalSelection; seq: string; seqType: SeqType; showComplement: boolean; @@ -91,6 +87,25 @@ class SeqViewerContainer extends React.Component { + // Only scroll if the selection was done passed in as a prop by a user of SeqViz. Otherwise the selection was + // made by the user clicking an element or selecting a range of sequences + if (this.selectionIsProgramatic(this.props.selection)) { + if ( + this.props.selection?.start !== prevProps.selection?.start && + this.props.selection?.start !== this.props.selection?.end + ) { + this.setCentralIndex("LINEAR", this.props.selection?.start || 0); + } + } + }; + /** this is here because the size listener is returning a new "size" prop every time */ shouldComponentUpdate = (nextProps: SeqViewerContainerProps, nextState: any) => !isEqual(nextProps, this.props) || !isEqual(nextState, this.state); @@ -123,14 +138,7 @@ class SeqViewerContainer extends React.Component { + getSelection = (state: Selection, prop?: ExternalSelection): Selection => { if (prop) { return { ...prop, clockwise: typeof prop.clockwise === "undefined" || !!prop.clockwise, type: "" }; } diff --git a/src/SeqViz.tsx b/src/SeqViz.tsx index 78e2034e1..dc4982bad 100644 --- a/src/SeqViz.tsx +++ b/src/SeqViz.tsx @@ -18,7 +18,7 @@ import { } from "./elements"; import { isEqual } from "./isEqual"; import search from "./search"; -import { Selection } from "./selectionContext"; +import { ExternalSelection, Selection } from "./selectionContext"; import { complement, directionality, guessType, randomID } from "./sequence"; /** `SeqViz` props. See the README for more details. One of `seq`, `file` or `accession` is required. */ @@ -121,11 +121,7 @@ export interface SeqVizProps { * Externally managed selection. * * If passed, SeqViz uses this prop as the selection range, rather than the internally managed selection */ - selection?: { - clockwise?: boolean; - end: number; - start: number; - }; + selection?: ExternalSelection; /** a sequence to render. Can be DNA, RNA, or an amino acid sequence. Setting accession or file overrides this */ seq?: string; diff --git a/src/selectionContext.ts b/src/selectionContext.ts index 0c7e10dd3..1f957800c 100644 --- a/src/selectionContext.ts +++ b/src/selectionContext.ts @@ -27,6 +27,12 @@ export interface Selection { viewer?: "LINEAR" | "CIRCULAR"; } +export interface ExternalSelection { + clockwise?: boolean; + end: number; + start: number; +} + /** Initial/default selection */ export const defaultSelection: Selection = { clockwise: true,