Translation have now a mandatory name so they can use the NameRange i…

…nterface as the other elements

README.md

@@ -170,12 +170,12 @@ In the example above, the forward and reverse primers of LacZ are define by the
 
 #### `translations (=[])`
 
-An array of `translations`: sequence ranges to translate and render as amino acids sequences. Requires 0-based `start` (inclusive) and `end` (exclusive) indexes relative the DNA sequence. A direction is required: `1` (FWD) or `-1` (REV). It will also render a handle to select the entire range. A color and a name are optional for the handle. If no name is provided, the handle will not be rendered.
+An array of `translations`: sequence ranges to translate and render as amino acids sequences. Requires 0-based `start` (inclusive) and `end` (exclusive) indexes relative the DNA sequence. A direction is required: `1` (FWD) or `-1` (REV). It will also render a handle to select the entire range. A color is optional for the handle. If the empry string ("") is provided as the name, the handle will not be rendered.
 
 ```js
 translations = [
   { start: 0, end: 90, direction: 1, name: "ORF 1", color: "#FAA887" }, // [0, 90)
-  { start: 191, end: 522, direction: -1 },
+  { start: 191, end: 522, direction: -1, name: "" },
 ];
 ```
 

demo/lib/App.tsx

@@ -98,7 +98,7 @@ export default class App extends React.Component<any, AppState> {
     showSidebar: false,
     translations: [
       { color: chooseRandomColor(), direction: -1, end: 630, name: "ORF 1", start: 6 },
-      { end: 1147, start: 736 },
+      { end: 1147, name: "", start: 736 },
       { end: 1885, name: "ORF 2", start: 1165 },
     ],
     viewer: "both",

src/SeqViz.tsx

@@ -453,10 +453,7 @@ export default class SeqViz extends React.Component<SeqVizProps, SeqVizState> {
       showComplement: (!!compSeq && (typeof showComplement !== "undefined" ? showComplement : true)) || false,
       showIndex: !!showIndex,
       translations: (translations || []).map(
-        (
-          t,
-          i
-        ): { direction: 1 | -1; end: number; start: number; color: string; id: string; name: string | undefined } => ({
+        (t, i): { direction: 1 | -1; end: number; start: number; color: string; id: string; name: string } => ({
           direction: t.direction ? (t.direction < 0 ? -1 : 1) : 1,
           end: seqType === "aa" ? t.end : t.start + Math.floor((t.end - t.start) / 3) * 3,
           start: t.start % seq.length,

src/elements.ts

@@ -9,7 +9,7 @@ export interface Range {
 export interface NameRange extends Range {
   color?: string;
   id: string;
-  name?: string;
+  name: string;
 }
 
 /** AnnotationProp is an annotation provided to SeqViz via the annotations prop. */
@@ -21,12 +21,12 @@ export interface AnnotationProp {
   start: number;
 }
 
-/** AnnotationProp is an annotation provided to SeqViz via the annotations prop. */
+/** TranslationProp is an translation provided to SeqViz via the translation prop. */
 export interface TranslationProp {
   color?: string;
   direction?: number;
   end: number;
-  name?: string;
+  name: string;
   start: number;
 }