diff --git a/README.md b/README.md index b197291ae..f1db306b7 100644 --- a/README.md +++ b/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: "" }, ]; ``` diff --git a/demo/lib/App.tsx b/demo/lib/App.tsx index cecd03619..f9013723e 100644 --- a/demo/lib/App.tsx +++ b/demo/lib/App.tsx @@ -98,7 +98,7 @@ export default class App extends React.Component { 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", diff --git a/src/SeqViz.tsx b/src/SeqViz.tsx index 1dac53961..35f1cfa70 100644 --- a/src/SeqViz.tsx +++ b/src/SeqViz.tsx @@ -453,10 +453,7 @@ export default class SeqViz extends React.Component { 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, diff --git a/src/elements.ts b/src/elements.ts index 569b841b6..93943dcc6 100644 --- a/src/elements.ts +++ b/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; }