node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »




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 



withDialog()(YourComponent) wraps YourComponent in a blueprint Dialog!

First hook up dialog to redux (only need to do this once):

import {tg_modalState} from 'teselagen-react-components'
export default combineReducers({

Use the component

const DialogComp = withDialog({...bpDialogPropsHere})(MyComponent)
render() {
  return <DialogComp 
  dialogName={string} //optionally pass a UNIQUE dialog name to be used
  dialogProps={object} //optionally pass additional runtime blueprint dialog props here
  //all other props passed directly to wrapped component

In RARE cases where you need to open the dialog programatically, make sure the dialog component is on the page (just don't pass a child component and nothing will appear to be added to the DOM), and call dispatch like:

  type: "TG_SHOW_MODAL",
  name: dialogName //you'll need to pass a unique dialogName prop to the compoennt
  props:  // pass props to the wrapped component here :)

withDelete, withUpsert, withQuery

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: {

They can also be used as functions but you must pass in the apolloClient:

withQuery(userFragment, {
    asFunction: true,
    isPlural: true,
    client: apolloClient
    filter: {
      email: newEmail

getApolloMethods (query, upsert, delete)

//pass an apollo client here:
const {upsert, query, delete} = getApolloMethods(client);


const resultArray = await query(fragment, options)
const aliquot = await query(aliquotFragment, {variables: {id: 2}})
const aliquots = await query(aliquotFragment, {isPlural: true, variables: {filter: {name: 'aliquotX'}}})


const resultArray = await upsert(modelNameOrFragment [, options], modelOrModels)
const [aliquot] = await upsert('aliquot', {name: 'aliquot1'})
const aliquots = await upsert('aliquot', [{name: 'aliquot1'}, {name: 'aliquot2'}])


await delete(modelNameOrFragment, [, options], modelOrModels)
await delete('aliquot', 1)
await delete('aliquot', [1,2,6,1616])

Data Table

Use the component with withTableParams() enhancer or by itself (locally connected) DataTable props

import {DataTable} from "teselagen-react-components";
<DataTable {DataTableProps here} /> 

Simple DataTable Demo Src Code

withTableParams (enhancer)

Use withTableParams in conjunction with withQuery

  formName: String; // - required unique identifier for the table
  schema: Boolean; //  - The data table schema
  urlConnected: Boolean; //  - default: false - whether the table should connect to/update the URL
  withSelectedEntities: Boolean; //  - whether or not to pass the selected entities
  defaults: defaults; // - tableParam defaults such as pageSize, filter, etc
withQuery() //the usual withQuery stuff here

withTableParams returns a prop called tableParams which you can spread like:

<DataTable {...tableParams}/> //this provides, entities, schema, handlers etc

Form 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 :)