implement one row linear viewer

README.md

@@ -133,7 +133,7 @@ export default () => {
 
 #### `viewer (='both')`
 
-The type and orientation of the sequence viewers. One of `"linear" | "circular" | "both" | "both_flip"`. `both` means the circular viewer fills the left side of SeqViz, and the linear viewer fills the right. `both_flip` is the opposite: the linear viewer is on the left, and the circular viewer is on the right.
+The type and orientation of the sequence viewers. One of `"linear" | "circular" | "both" | "both_flip" | "linear_one_row"`. `both` means the circular viewer fills the left side of SeqViz, and the linear viewer fills the right. `both_flip` is the opposite: the linear viewer is on the left, and the circular viewer is on the right.  `linear_one_row` will render the entire linear sequence in a single row.
 
 #### `name (='')`
 

demo/lib/App.tsx

@@ -26,6 +26,7 @@ const viewerTypeOptions = [
   { key: "circular", text: "Circular", value: "circular" },
   { key: "linear", text: "Linear", value: "linear" },
   { key: "both_flip", text: "Both Flip", value: "both_flip" },
+  { key: "linear_one_row", text: "Linear One Row", value: "linear_one_row" },
 ];
 
 interface AppState {
@@ -216,18 +217,18 @@ export default class App extends React.Component<any, AppState> {
                     key={`${this.state.viewer}${this.state.customChildren}`}
                     annotations={this.state.annotations}
                     enzymes={this.state.enzymes}
-                    highlights={[{ start: 0, end: 10 }]}
+                    highlights={[{ end: 10, start: 0 }]}
                     name={this.state.name}
-                    onSelection={selection => this.setState({ selection })}
                     refs={{ circular: this.circularRef, linear: this.linearRef }}
                     search={this.state.search}
                     selection={this.state.selection}
                     seq={this.state.seq}
                     showComplement={this.state.showComplement}
                     showIndex={this.state.showIndex}
                     translations={this.state.translations}
-                    viewer={this.state.viewer as "linear" | "circular"}
+                    viewer={this.state.viewer as "linear" | "linear_one_row" | "circular"}
                     zoom={{ linear: this.state.zoom }}
+                    onSelection={selection => this.setState({ selection })}
                   >
                     {customChildren}
                   </SeqViz>

src/Circular/Circular.tsx

@@ -43,7 +43,7 @@ export interface CircularProps {
   center: { x: number; y: number };
   compSeq: string;
   cutSites: CutSite[];
-  handleMouseEvent: (e: any) => void;
+  handleMouseEvent: (e: React.MouseEvent) => void;
   highlights: Highlight[];
   inputRef: InputRefFunc;
   name: string;

src/Circular/Labels.tsx

@@ -19,7 +19,7 @@ export interface GroupedLabelsWithCoors {
   labels: ILabel[];
   lineCoor: Coor;
   name: string;
-  overflow: unknown;
+  overflow: boolean;
   textAnchor: "start" | "end";
   textCoor: Coor;
 }

src/EventHandler.tsx

@@ -8,7 +8,7 @@ export interface EventsHandlerProps {
   bpsPerBlock: number;
   children: React.ReactNode;
   copyEvent: (e: React.KeyboardEvent<HTMLElement>) => boolean;
-  handleMouseEvent: (e: any) => void;
+  handleMouseEvent: (e: React.MouseEvent) => void;
   selection: Selection;
   seq: string;
   setSelection: (selection: Selection) => void;

src/Linear/Annotations.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 
 import { InputRefFunc } from "../SelectionHandler";
 import { COLOR_BORDER_MAP, darkerColor } from "../colors";
-import { NameRange } from "../elements";
+import { Annotation, NameRange } from "../elements";
 import { annotation, annotationLabel } from "../style";
 import { FindXAndWidthElementType } from "./SeqBlock";
 
@@ -27,7 +27,9 @@ const AnnotationRows = (props: {
   fullSeq: string;
   inputRef: InputRefFunc;
   lastBase: number;
+  oneRow: boolean;
   seqBlockRef: unknown;
+  stackedPositions: Annotation[][];
   width: number;
   yDiff: number;
 }) => (
@@ -43,9 +45,20 @@ const AnnotationRows = (props: {
         height={props.elementHeight}
         inputRef={props.inputRef}
         lastBase={props.lastBase}
+        oneRow={props.oneRow}
         seqBlockRef={props.seqBlockRef}
         width={props.width}
-        y={props.yDiff + props.elementHeight * i}
+        y={
+          props.yDiff +
+          props.elementHeight *
+            (props.oneRow
+              ? Math.max(
+                  ...anns.map(
+                    ann => props.stackedPositions.findIndex(row => row.some(item => item.id === ann.id)) as number
+                  )
+                )
+              : i)
+        }
       />
     ))}
   </g>
@@ -66,6 +79,7 @@ const AnnotationRow = (props: {
   height: number;
   inputRef: InputRefFunc;
   lastBase: number;
+  oneRow: boolean;
   seqBlockRef: unknown;
   width: number;
   y: number;
@@ -102,8 +116,9 @@ const SingleNamedElement = (props: {
   index: number;
   inputRef: InputRefFunc;
   lastBase: number;
+  oneRow: boolean;
 }) => {
-  const { element, elements, findXAndWidth, firstBase, index, inputRef, lastBase } = props;
+  const { element, elements, findXAndWidth, firstBase, index, inputRef, lastBase, oneRow } = props;
 
   const { color, direction, end, name, start } = element;
   const forward = direction === 1;
@@ -130,7 +145,7 @@ const SingleNamedElement = (props: {
 
   let linePath = "";
   let bottomRight = `L ${width} ${height}`; // flat right edge
-  if ((overflowRight && width > 2 * cW) || crossZero) {
+  if ((overflowRight && width > 2 * cW && !oneRow) || crossZero) {
     bottomRight = `
         L ${width - cW} ${cH}
         L ${width} ${2 * cH}
@@ -143,7 +158,7 @@ const SingleNamedElement = (props: {
   }
 
   let bottomLeft = `L 0 ${height} L 0 0`; // flat left edge
-  if (overflowLeft && width > 2 * cW) {
+  if (overflowLeft && width > 2 * cW && !oneRow) {
     bottomLeft = `
         L 0 ${height}
         L ${cW} ${3 * cH}