Making it so if there's no name for the translation, we don't show th…

…e handle

README.md

@@ -170,7 +170,7 @@ 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, start and end indices will be used as the name.
+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.
 
 ```js
 translations = [

src/Linear/SeqBlock.tsx

@@ -279,9 +279,13 @@ export class SeqBlock extends React.PureComponent<SeqBlockProps> {
     const primerRevHeight = primerRevRows.length ? elementHeight * primerRevRows.length : 0;
 
     // height and yDiff of translations
-    // elementHeight * 2 is to account for the translation handle
+    // elementHeight * 2 is to account for the translation handle. If no name, don't show the handle
     const translationYDiff = primerRevYDiff + primerRevHeight;
-    const translationHeight = elementHeight * 2 * translationRows.length;
+    let translationHeight = 0;
+    for (let i = 0; i < translationRows.length; i++) {
+      const multiplier = translationRows[i][0]["name"] ? 2 : 1;
+      translationHeight += elementHeight * multiplier;
+    }
 
     // height and yDiff of annotations
     const annYDiff = translationYDiff + translationHeight;

src/Linear/Translations.tsx

@@ -48,25 +48,33 @@ export const TranslationRows = ({
   yDiff,
 }: TranslationRowsProps) => (
   <g className="la-vz-linear-translation" data-testid="la-vz-linear-translation">
-    {translationRows.map((translations, i) => (
-      <TranslationRow
-        key={`i-${firstBase}`}
-        bpsPerBlock={bpsPerBlock}
-        charWidth={charWidth}
-        elementHeight={elementHeight}
-        findXAndWidth={findXAndWidth}
-        findXAndWidthElement={findXAndWidthElement}
-        firstBase={firstBase}
-        fullSeq={fullSeq}
-        height={elementHeight}
-        inputRef={inputRef}
-        lastBase={lastBase}
-        seqType={seqType}
-        translations={translations}
-        y={yDiff + elementHeight * 2 * i} // * 2 because we have two elements per row, the aminoacids and the handle
-        onUnmount={onUnmount}
-      />
-    ))}
+    {translationRows.map((translations, i) => {
+      // Add up the previous translation heights, taking into account if they have a handle or not
+      let currentElementY = yDiff;
+      for (let j = 0; j < i; j += 1) {
+        const multiplier = translationRows[j][0]["name"] ? 2 : 1;
+        currentElementY += elementHeight * multiplier;
+      }
+      return (
+        <TranslationRow
+          key={`i-${firstBase}`}
+          bpsPerBlock={bpsPerBlock}
+          charWidth={charWidth}
+          elementHeight={elementHeight}
+          findXAndWidth={findXAndWidth}
+          findXAndWidthElement={findXAndWidthElement}
+          firstBase={firstBase}
+          fullSeq={fullSeq}
+          height={elementHeight}
+          inputRef={inputRef}
+          lastBase={lastBase}
+          seqType={seqType}
+          translations={translations}
+          y={currentElementY}
+          onUnmount={onUnmount}
+        />
+      );
+    })}
   </g>
 );
 
@@ -98,13 +106,15 @@ const TranslationRow = (props: {
           key={`translation-linear-${t.id}-${i}-${props.firstBase}-${props.lastBase}`}
           translation={t}
         />
-        <SingleNamedElementHandle
-          {...props}
-          key={`translation-handle-linear-${t.id}-${i}-${props.firstBase}-${props.lastBase}`}
-          element={t}
-          elements={props.translations}
-          index={i}
-        />
+        {t.name && (
+          <SingleNamedElementHandle
+            {...props}
+            key={`translation-handle-linear-${t.id}-${i}-${props.firstBase}-${props.lastBase}`}
+            element={t}
+            elements={props.translations}
+            index={i}
+          />
+        )}
       </>
     ))}
   </>
@@ -319,8 +329,8 @@ const SingleNamedElementHandle = (props: {
   // Use at most 1/4 of the width for the name handle.
   const availableCharacters = Math.floor(width / 4 / characterWidth);
 
-  let displayName = name;
-  if (name.length > availableCharacters) {
+  let displayName = name ?? "";
+  if (name && name.length > availableCharacters) {
     const charactersToShow = availableCharacters - 1;
     if (charactersToShow < 3) {
       // If we can't show at least three characters, don't show any.

src/SeqViz.tsx

@@ -453,13 +453,16 @@ 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 } => ({
+        (
+          t,
+          i
+        ): { direction: 1 | -1; end: number; start: number; color: string; id: string; name: string | undefined } => ({
           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,
           color: t.color || colorByIndex(i, COLORS),
           id: `translation${t.name}${i}${t.start}${t.end}`,
-          name: t.name || `${t.start}-${t.end}`,
+          name: t.name,
         })
       ),
       viewer: this.props.viewer || "both",

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. */