SeqViz

You can override the default layout by using the refs prop and the children render pattern. This allows you to render the Linear and Circular components separately in your own layout (e.g., stacking them vertically).

import { useRef } from "react";
import { Circular, Linear, SeqViz } from "seqviz";

export default () => {
  const circular = useRef();
  const linearRef = useRef();

  return (
    <SeqViz name="J23100" seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC" refs={{ circular, linear }}>
      {({ circularProps, linearProps, ...props }) => (
        <div style={{ display: "flex", flexDirection: "column", width: "100%" }}>
          <div ref={linear} style={{ height: "25%", width: "100%" }}>
            <Linear {...linearProps} {...props} />
          </div>
          <div ref={circular} style={{ height: "75%", width: "100%" }}>
            <Circular {...circularProps} {...props} />
          </div>
        </div>
      )}
    </SeqViz>
  );
};

The SelectionHandler component is a high-order component (HOC) pattern used to manage sequence selection (clicks, drags, shift-clicks) across both Linear and Circular viewers. To use it, wrap your viewer components with SelectionHandler and use the provided render props to register elements and handle mouse events.

Key Responsibilities:

• Registration: Use the inputRef callback to register child elements (like SeqBlocks or annotations) so the handler knows their sequence ranges.
• Event Handling: Pass the handleMouseEvent function to your elements' onMouseDown, onMouseMove, and onMouseUp handlers to enable drag-to-select functionality.
• Lifecycle: Use onUnmount to clean up registered elements when they are removed from the DOM.

Render Prop Signature: children: (inputRef: InputRefFunc, handleMouseEvent: (e: SeqVizMouseEvent) => void, onUnmount: (ref: string) => void) => React.ReactNode

<SelectionHandler
  bpsPerBlock={100}
  center={{ x: 200, y: 200 }}
  centralIndex={0}
  seq="ATGC..."
  setCentralIndex={(viewer, index) => { /* ... */ }}
  setSelection={(selection) => { /* ... */ }}
  yDiff={0}
>
  {(inputRef, handleMouseEvent, onUnmount) => (
    <div onMouseDown={handleMouseEvent} onMouseMove={handleMouseEvent} onMouseUp={handleMouseEvent}>
      {/* Your SeqBlocks or Annotations here */}
      <div 
        id="block-1" 
        onMouseDown={handleMouseEvent}
        ref={(el) => inputRef("block-1", { start: 0, end: 100, type: "SEQ" })}
      />
    </div>
  )}
</SelectionHandler>

The following props are available for both the React component (seqviz.SeqViz) and the plain JS implementation (seqviz.Viewer()).

Required

• seq (string): The DNA, RNA, or amino acid sequence to render.

Deprecated

• file: FASTA, GenBank, SnapGene, JBEI, or SBOL file. Use seqparse instead.
• accession: NCBI accession-ID. Use seqparse instead.

Optional

• viewer ('linear' | 'circular' | 'both' | 'both_flip'): Orientation of viewers. Default is 'both' (circular left, linear right).
• name (string): Name of the sequence, shown in the circular viewer.
• annotations (Array<Annotation>): Array of objects with start (inclusive), end (exclusive), name, direction (1 for FWD, -1 for REV), and color.
• primers (Array<Primer>): Array of objects with start, end, name, direction (1 for FWD, -1 for REV), and color.
• translations (Array<Translation>): Sequence ranges to translate. Requires start, end, and direction (1 or -1).
• enzymes (Array<string | EnzymeObject>): Restriction enzymes. Can be a name (e.g., 'EcoRI') or an object with name, rseq, fcut, rcut, color, and range.
• highlights (Array<Highlight>): Ranges to highlight with start, end, and color.
• zoom ({ linear: number }): Zoom level (0-100) for the linear viewer.
• colors (Array<string>): Array of colors for annotations/translations/highlights.
• bpColors (Object): Map base pairs to colors (e.g., { A: '#FF0000', 12: '#00FFFF' }).
• style (Object): CSS styles for the outer container.
• selection (Object): Manually set selection state with start, end, and clockwise.
• onSelection (Function): Callback for selection events. Receives a Selection object.
• search (Object): Search parameters: { query: string, mismatch: number }.
• onSearch (Function): Callback for search events.
• showComplement (boolean): Whether to show the complement sequence. Default true.
• rotateOnScroll (boolean): Whether the circular viewer rotates on scroll. Default true.
• disableExternalFonts (boolean): If true, prevents downloading Roboto Mono fonts.