node package manager




CircleCI [![npm package][npm-badge]][npm] codecov


yarn add teselagen-react-components

Add peer-dependencies:

yarn add @blueprintjs/core @blueprintjs/datetime @blueprintjs/table react-addons-css-transition-group react-redux react-select redux 


import {withDelete, withUpsert, withQuery} from "teselagen-react-components";
import jobWorkflowRunsQuery from '../graphql/queries/jobWorkflowRunsQuery';
import workQueueItemFragment from '../graphql/fragments/workQueueItemFragment';
export default compose(
    //withUpsert takes a fragment/string as its first argument and an options object as its second param.
    //in the case below it will pass a prop to the wrapped component called upsertWorkQueueItem
    //upsertWorkQueueItem() can be passed an array or single object and will perform a create or an update based on 
    //if it detects an id
        {extraMutateArgs: {
            refetchQueries: [ { query: jobWorkflowRunsQuery } ]
            //any additional options are spread onto the usual apollo mutation enhancer 
    //withDelete takes a fragment/string as its first argument and an options object as its second param.
    //in the case below it will pass a prop to the wrapped component called deleteWorkQueueItem
    //deleteWorkQueueItem() can be passed an array of ids or a single id and will delete those items with the given id
  withDelete(workQueueItemFragment, { 
    mutationName: "deleteWorkQueueItems",
        //any additional options are spread onto the usual apollo mutation enhancer 
    //withQuery takes only a fragment as its first argument and an options object as its second param.
    //in the case below it will pass several props to the wrapped component: 
    //data  --- the usual apollo query data object 
    //workQueueItemsQuery  ---  the usual apollo query data object just on a unique name
    //workQueueItem/s  --- the actual workQueueItem record or the workQueueItems records array  
    //workQueueItemsCount --- the count of the records coming back if isPlural:true
    withQuery(workQueueItemFragment, {
        //isPlural: boolean whether or not to search for just one item or multiple
    //any additional options are spread onto the usual apollo query enhancer 
        options: props => {
      const id = parseInt(get(props, ""), 10);
      return {
        variables: {

Any of the withQuery/withDelete/withUpsert enhancers can be passed an {asFunction: true} option which will make them return a function that can then be invoked.

Vector Editor:

Redux connected:

import {vectorEditorReducer as VectorEditor} from 'teselagen-react-components'
const store = createStore(
    form: formReducer, 
    VectorEditor: VectorEditor({
        DemoEditor: {
            sequenceData: exampleSequenceData
     applyMiddleware(thunk) //your store should be redux-thunk enabled!
import {createVectorEditor} from 'teselagen-react-components'
export default createVectorEditor({
  namespace: 'DemoEditor', 
  //you can pass editor specific action overrides at this level or at render time
  // actionOverrides(actions) {
  //   return {
  //     featureClicked: function ({annotation}) {
  //       return actions.caretPositionUpdate(annotation.start)
  //     },
  //     selectionLayerUpdate: function (selectionLayer) {
  //       return actions.caretPositionUpdate(selectionLayer.start)
  //     }
  //   }
  // }
//file where you want to display the editor: 
import DemoEditor from '../DemoEditor';
var {withEditorInteractions, withEditorProps, veSelectors, HoverHelper} = SelectInsertEditor
import {CircularView, LinearView, CutsiteFilter} from 'teselagen-react-components';
var CutsiteFilterConnected = withEditorProps(CutsiteFilter)
var CircularViewConnected = withEditorInteractions(CircularView)
var LinearViewConnected = withEditorInteractions(LinearView)
function actionOverrides(actions) {
    return {
        selectionLayerRightClicked(firstArg, ...otherArgs) {
            return actions.selectionLayerRightClicked(
                    extraItems: [
                            title: "Delete Selection",
                            fn: onDeleteClick,
                            disabled: deletionButtonDisabled
                            title: "Replace Selection",
                            fn: onReplaceClick,
                            disabled: replaceDisabled
function MyReactComp () {
    var editorProps = { //
        actionOverrides: (restrictionDigest || alreadyLinearized) ? actionOverrides : undefined,
        disableEditorClickAndDrag: restrictionDigest || alreadyLinearized,
        annotationVisibility: { 
            //only show custites if the user is doing a restriction digest
            cutsites: restrictionDigest,
            orfs: false
    return <div>
            //props passed here will take precedence over redux provided props
                {... {
                  scale: .8,
                  width: Math.max(containerWidth - 100, 200),
                  height: Math.max(containerWidth - 300, 200),
                  featureOptions: {
                    showFeatureLabels: restrictionDigest
                  // selectionLayer: [],
                    // componentOverrides: restrictionDigest
                    //   ? {
                    //     SelectionLayer: SelectionLayerOverride,
                    //     Caret: CaretOverride,
                    //   }
                    //  : undefined
//some file where you want to do things to the demo editor
import DemoEditor from '../DemoEditor';
var {veActions} = DemoEditor
//see all actions by console logging veActions
dispatch(veActions.updateSequenceData(sequenceData)) //dispatch an update action the sequence data for the demo editor

Data Table

import {DataTable, routeDoubleClick, queryParams} from "teselagen-react-components";
import {toastr} from 'teselagen-react-components';
import {
} from 'teselagen-react-components'
  placeholder="Enter text..."
  inputClassName="className(s) for input"



Node.js >= v4 must be installed.


  • Running npm install in the components's root directory will install everything you need for development.

Demo Development Server

  • npm start will run a development server with the component's demo app at http://localhost:3000 with hot module reloading. You can check the /demo folder for the source code.

Developing linked to another folder: aka lims/hde

//link everything up:
cd lims/node_modules/react
yarn link 
cd teselagen-react-components
yarn link
yarn link react
cd lims
yarn link teselagen-react-components

//start the auto rebuild:
cd teselagen-react-components
yarn build-watch

Running Tests

  • npm test will run the tests once.

  • npm run test:coverage will run the tests and produce a coverage report in coverage/.

  • npm run test:watch will run the tests on every change.


  • npm whoami you should be teselagen
  • npm login teselagen//ourMasterPass//
  • git pull
  • npm version patch|minor|major
  • npm publish
  • git push

Adding custom svg icons

  • yarn fontopen this opens up our custom font file in the fontello webtool
  • add the svg icons you want, hit Save Session to commit your changes
  • then run yarn fontsave
  • commit the changes :)