Usage without material UI and formik

These packages will not include any extra UI other than the sequence viewer.

This is recommended if you want to build your own UI.

Installation

# Pick one or both
npm i @anocca/sequence-viewer-react-circular
npm i @anocca/sequence-viewer-react-linear

# utils is recommended to get started
npm i @anocca/sequence-viewer-utils

Usage

Example

import { CircularController } from '@anocca/sequence-viewer-react-circular';
/* or for linear */
// import { LinearController } from '@anocca/sequence-viewer-react-linear';
import { humanCodons } from '@anocca/sequence-viewer-utils';

<CircularController
  width={800}
  height={640}
  isProtein={false}
  annotations={[]}
  codons={humanCodons}
  sequence="ATCAGATACAGATCAAGATCACCCCACCCCATTTA"
/>

Result

Note how there is no UI to:

• add or remove annotations
• search for sequence
• copy the selected sequence

Building your own UI

Example

To get access to internals you can pass a function in the children prop.

<CircularController
  width={800}
  height={640}
  isProtein={false}
  annotations={[]}
  codons={humanCodons}
  sequence="ATCAGATACAGATCAAGATCACCCCACCCCATTTA"
>
  {({ canvas, circularSelections }) => (
    <div style={{ margin: 'auto', maxWidth: '800px' }}>
      <div style={{ position: 'relative' }}>
        {canvas}
        <div style={{position: 'absolute'}}>
          <pre>
            {JSON.stringify(circularSelections, null, 2)}
          </pre>
        </div>
      </div>
    </div>
  )}
</CircularController>

Result

[
  {
    "state": "selected",
    "start": 0,
    "end": 0
  }
]