Merge branch 'develop' into feat/translation-handle

package.json

@@ -1,7 +1,7 @@
 {
   "name": "seqviz",
   "description": "A viewer for DNA, RNA, and protein sequences that supports many input formats",
-  "version": "3.10.4",
+  "version": "3.10.6",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "unpkg": "dist/seqviz.min.js",

src/SeqViewerContainer.tsx

@@ -8,7 +8,7 @@ import SelectionHandler, { InputRefFunc } from "./SelectionHandler";
 import CentralIndexContext from "./centralIndexContext";
 import { Annotation, CutSite, Highlight, NameRange, Primer, 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<HTMLElement>) => boolean;
-  selection?: {
-    clockwise?: boolean;
-    end: number;
-    start: number;
-  };
+  selection?: ExternalSelection;
   seq: string;
   seqType: SeqType;
   showComplement: boolean;
@@ -91,6 +87,26 @@ class SeqViewerContainer extends React.Component<SeqViewerContainerProps, SeqVie
     };
   }
 
+  selectionIsProgramatic(selection: any): selection is Selection {
+    // If the selection was done programatically, it has not type
+    if (selection) return !selection.type;
+    return false;
+  }
+
+  // If the selection prop updates, also scroll the linear view to the new selection
+  componentDidUpdate = (prevProps: SeqViewerContainerProps) => {
+    // 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 +139,7 @@ class SeqViewerContainer extends React.Component<SeqViewerContainerProps, SeqVie
   /**
    * Returns the selection that was either a prop (optional) or the selection maintained in state.
    */
-  getSelection = (
-    state: Selection,
-    prop?: {
-      clockwise?: boolean;
-      end: number;
-      start: number;
-    }
-  ): Selection => {
+  getSelection = (state: Selection, prop?: ExternalSelection): Selection => {
     if (prop) {
       return { ...prop, clockwise: typeof prop.clockwise === "undefined" || !!prop.clockwise, type: "" };
     }

src/SeqViz.tsx

@@ -19,7 +19,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. */
@@ -122,11 +122,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;

src/selectionContext.ts

@@ -28,6 +28,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,