Replace highlightedRegions with highlights

- to match pattern used for annotations/translations/enzymes

README.md

@@ -198,6 +198,17 @@ enzymes = [
 ];
 ```
 
+#### `highlights (=[])`
+
+Ranges of the sequence to highlight. A default color from `colors` is used if none is provided.
+
+```js
+highlightedRegions: [
+  { start: 36, end: 66, color: "magenta" },
+  { start: 70, end: 80 },
+];
+```
+
 #### `zoom (={ linear: 50, circular: 0 })`
 
 How zoomed the viewer(s) should be `0-100`. Key'ed by viewer type (`viewer`).
@@ -335,17 +346,6 @@ This is a feature specific to [BioBricks](https://parts.igem.org/Plasmid_backbon
 
 Custom backbones, as DNA strings, are also supported (for example: `ATGATATAGAT`).
 
-#### `highlightedRegions (=null)`
-
-Passing in a list of ranges will highlight those regions on top of the sequence. A default color from `colors` is used if none is provided.
-
-```js
-highlightedRegions: [
-  { start: 36, end: 66, color: "magenta" },
-  { start: 70, end: 80 },
-];
-```
-
 ### Viewer without React
 
 For usability in non-React apps, we provide a thin wrapper around the React component. The viewer's constructor accepts two arguments:

src/SeqViz/Circular/Circular.tsx

@@ -34,7 +34,7 @@ export interface CircularProps {
   centralIndex: number;
   compSeq: string;
   cutSites: CutSite[];
-  highlightedRegions: Highlight[];
+  highlights: Highlight[];
   inputRef: InputRefFuncType;
   mouseEvent: (e: any) => void;
   name: string;
@@ -360,7 +360,7 @@ class Circular extends React.Component<CircularProps, CircularState> {
             findCoor={general.findCoor}
             generateArc={general.generateArc}
             getRotation={general.getRotation}
-            highlightedRegions={this.props.highlightedRegions}
+            highlights={this.props.highlights}
             inputRef={general.inputRef}
             lineHeight={general.lineHeight}
             radius={general.radius}

src/SeqViz/Circular/Find.tsx

@@ -17,7 +17,7 @@ interface FindProps {
     sweepFWD?: boolean;
   }) => string;
   getRotation: (index: number) => string;
-  highlightedRegions: HighlightProp[];
+  highlights: HighlightProp[];
   inputRef: InputRefFuncType;
   lineHeight: number;
   onUnmount: unknown;
@@ -30,7 +30,7 @@ interface FindProps {
 }
 
 export const Find = (props: FindProps) => {
-  const { generateArc, getRotation, highlightedRegions, inputRef, lineHeight, radius, search, seqLength } = props;
+  const { generateArc, getRotation, highlights, inputRef, lineHeight, radius, search, seqLength } = props;
   const threshold = seqLength >= 200 ? search.length / seqLength <= 0.02 : true;
   const searchArcs = search.map(s => (
     <FindArc
@@ -48,7 +48,7 @@ export const Find = (props: FindProps) => {
     />
   ));
 
-  const highlightArcs = highlightedRegions.map(({ color, end, start }) => (
+  const highlightArcs = highlights.map(({ color, end, start }) => (
     <FindArc
       key={JSON.stringify({ end, start })}
       direction={1}

src/SeqViz/Linear/Linear.tsx

@@ -20,7 +20,7 @@ export interface LinearProps {
   compSeq: string;
   cutSites: CutSite[];
   elementHeight: number;
-  highlightedRegions: Highlight[];
+  highlights: Highlight[];
   inputRef: InputRefFuncType;
   lineHeight: number;
   mouseEvent: React.MouseEventHandler;
@@ -75,7 +75,7 @@ class Linear extends React.Component<LinearProps> {
       compSeq,
       cutSites,
       elementHeight,
-      highlightedRegions,
+      highlights,
       lineHeight,
       onUnmount,
       search,
@@ -141,7 +141,7 @@ class Linear extends React.Component<LinearProps> {
     const searchRows: NameRange[][] =
       search && search.length ? createSingleRows(search, bpsPerBlock, arrSize) : new Array(arrSize).fill([]);
 
-    const highlightRows = createSingleRows(highlightedRegions, bpsPerBlock, arrSize);
+    const highlightRows = createSingleRows(highlights, bpsPerBlock, arrSize);
 
     const translationRows = translations.length
       ? createSingleRows(createLinearTranslations(translations, seq), bpsPerBlock, arrSize)
@@ -204,7 +204,7 @@ class Linear extends React.Component<LinearProps> {
           firstBase={firstBase}
           forwardPrimerRows={forwardPrimerRows[i]}
           fullSeq={seq}
-          highlightedRegions={highlightRows[i]}
+          highlights={highlightRows[i]}
           id={ids[i]}
           inputRef={this.props.inputRef}
           lineHeight={lineHeight}

src/SeqViz/Linear/SeqBlock/Find.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 
-import { HighlightProp, InputRefFuncType, Range } from "../../../elements";
+import { Highlight, InputRefFuncType, Range } from "../../../elements";
 import randomid from "../../../utils/randomid";
 import { FindXAndWidthType } from "./SeqBlock";
 
@@ -9,7 +9,7 @@ interface FindProps {
   filteredRows: Range[];
   findXAndWidth: FindXAndWidthType;
   firstBase: number;
-  highlightedRegions: HighlightProp[];
+  highlights: Highlight[];
   indexYDiff: number;
   inputRef: InputRefFuncType;
   lastBase: number;
@@ -26,7 +26,7 @@ export default function Find(props: FindProps) {
     filteredRows: searchRows,
     findXAndWidth,
     firstBase,
-    highlightedRegions,
+    highlights,
     indexYDiff,
     inputRef,
     lastBase,
@@ -37,8 +37,8 @@ export default function Find(props: FindProps) {
   return (
     <>
       {/* We use two LinearFindBlocks here because we want to span both the top and bottom strand for a highlight */}
-      {highlightedRegions.map(({ color, end, start }) => (
-        <React.Fragment key={`highlight-${start}-${end}-1`}>
+      {highlights.map(({ color, end, id, start }) => (
+        <React.Fragment key={`la-vz-highlight-${id}`}>
           <FindBlock
             compYDiff={compYDiff}
             direction={1}

src/SeqViz/Linear/SeqBlock/SeqBlock.tsx

@@ -1,15 +1,6 @@
 import * as React from "react";
 
-import {
-  Annotation,
-  CutSite,
-  HighlightProp,
-  InputRefFuncType,
-  Primer,
-  Range,
-  Size,
-  Translation,
-} from "../../../elements";
+import { Annotation, CutSite, Highlight, InputRefFuncType, Primer, Range, Size, Translation } from "../../../elements";
 import { Selection as SelectionType } from "../../handlers/selection";
 import AnnotationRows from "./Annotations";
 import CutSiteRow from "./CutSites";
@@ -39,7 +30,7 @@ interface SeqBlockProps {
   firstBase: number;
   forwardPrimerRows: Primer[];
   fullSeq: string;
-  highlightedRegions: HighlightProp[];
+  highlights: Highlight[];
   id: string;
   inputRef: InputRefFuncType;
   key: string;
@@ -326,7 +317,7 @@ export default class SeqBlock extends React.PureComponent<SeqBlockProps> {
           filteredRows={filteredSearchRows}
           findXAndWidth={this.findXAndWidth}
           firstBase={firstBase}
-          highlightedRegions={this.props.highlightedRegions}
+          highlights={this.props.highlights}
           indexYDiff={indexYDiff}
           inputRef={inputRef}
           lastBase={lastBase}

src/SeqViz/SeqViewer.tsx

@@ -14,7 +14,7 @@ interface SeqViewerProps {
   bpColors: { [key: number | string]: string };
   compSeq: string;
   cutSites: CutSite[];
-  highlightedRegions: Highlight[];
+  highlights: Highlight[];
   name: string;
   search: NameRange[];
   selection: Selection;

src/SeqViz/SeqViz.tsx

@@ -63,9 +63,16 @@ export interface SeqVizProps {
   /** a file to parse and render. Genbank, FASTA, SnapGene, JBEI, SBOLv1/2, ab1, and SeqBuilder formats are supported */
   file?: string | File;
 
-  /** ranges of the viewer to highlight. */
+  /**
+   * ranges of the viewer to highlight.
+   *
+   * @deprecated use `highlights`
+   */
   highlightedRegions?: HighlightProp[];
 
+  /** ranges of sequence to highlight on the viewer */
+  highlights?: HighlightProp[];
+
   /** the name of the sequence to show in the middle of the circular viewer */
   name?: string;
 
@@ -333,7 +340,7 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
   };
 
   render() {
-    const { highlightedRegions, name, showComplement, showIndex, style, zoom } = this.props;
+    const { highlightedRegions, highlights, name, showComplement, showIndex, style, zoom } = this.props;
     let { compSeq, seq, translations, viewer } = this.props;
     const { annotations, centralIndex, cutSites, part, search, selection } = this.state;
 
@@ -349,17 +356,19 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
       translations = [];
     }
 
+    // process highlights, adding color + id (+ combining deprecated highlightedRegions)
+    const highlightsProcessed = (highlights || [])
+      .concat(highlightedRegions || [])
+      .map((h): Highlight => ({ ...h, color: h.color || chooseRandomColor(), direction: 1, id: randomid(), name: "" }));
+
     // Since all the props are optional, we need to parse them to defaults.
     const props = {
       ...this.props,
       annotations: annotations && annotations.length ? annotations : part?.annotations || [],
       bpColors: this.props.bpColors || {},
       compSeq: compSeq || "",
       cutSites: cutSites,
-      highlightedRegions:
-        highlightedRegions?.map(
-          (h): Highlight => ({ ...h, color: h.color || chooseRandomColor(), direction: 1, id: randomid(), name: "" })
-        ) || [],
+      highlights: highlightsProcessed,
       name: name || part?.name || "",
       search: search,
       selection: selection,

src/elements.ts

@@ -51,9 +51,10 @@ export interface HighlightProp {
 /** Highlight is the processed version of HighlightProp */
 export interface Highlight extends HighlightProp {
   color: string;
+  /* direction is ignored for now */
   direction: 1 | -1;
   id: string;
-  name: string; // ignored for now
+  name: string;
 }
 
 export interface Part {