THIS REPO HAS MOVED!

https://github.com/TeselaGen/tg-oss/tree/main/packages/ove

🙏🙏 PLEASE MAKE ALL ISSUES/PRs there! 🙏🙏

THIS REPO HAS MOVED!

THIS REPO HAS MOVED!

THIS REPO HAS MOVED!

Congrats, you've made it to the repo for Teselagen's Open Source Vector Editor Component

• Built With React & Redux
• Built for easy extensibility + embed-ibility
• Customize the views to suit your needs

CHANGELOG

Issue Tracking Board: https://github.com/orgs/TeselaGen/projects/10

Demo: http://teselagen.github.io/openVectorEditor/

Get the desktop app: https://github.com/teselagen/ove-electron#installation-instructions

Cypress Tests Dashboard: https://dashboard.cypress.io/#/projects/1zj5vc/runs (you'll need to make a login with cypress)

OVE out in the wild (Who's using OVE):

• Teselagen - https://teselagen.com/ (Combinatorial DNA design + Lab management + Ordering + Biohub)
• ove-electron - https://github.com/teselagen/ove-electron (Simple desktop plasmid editor a la ApE)
• JBEI - https://bioparts.org/ (Auto annotation and blast tool)
• JBEI - https://public-registry.jbei.org/ (Lab management and design)
• Labii - https://docs.labii.com/widgets/biology/open-vector-editor (Lab management)
• eLabFTW - https://www.elabftw.net/ (Open source ELN)
• Colabra - https://www.colabra.ai/ (Lab management, ELN, and R&D AI Copilot) Docs

Table of Contents

<!-- TOC -->

• THIS REPO HAS MOVED!
• THIS REPO HAS MOVED!
• THIS REPO HAS MOVED!
• THIS REPO HAS MOVED!
  • [CHANGELOG](#changelogchangelogmd)
  • Issue Tracking Board: https://github.com/orgs/TeselaGen/projects/10
  • Demo: http://teselagen.github.io/openVectorEditor/
  • Get the desktop app: https://github.com/teselagen/ove-electron#installation-instructions
  • Cypress Tests Dashboard: https://dashboard.cypress.io/#/projects/1zj5vc/runs (you'll need to make a login with cypress)
  • OVE out in the wild (Who's using OVE):
• Table of Contents
• Upgrade Instructions for Major and Minor Versions
• Publishing
• Using this module in React
  • Example CRA repo with OVE
  • Installation (react)
  • Code (react)
    • Editor
    • SimpleCircularOrLinearView
    • EnzymeViewer
• Using this module outside of react apps (Universal):
  • Installation (Universal)
    • via npm:
    • Or via CDN:
    • Full Example:
  • Code (Universal)
    • Accessing the editor state:
  • Demo (Universal): http://teselagen.github.io/openVectorEditor/
• editorProps
• editorState
• Setting Local Storage Persisted Values
  • Amino Acid Coloring
• Data Model
  • Feature Locations (aka Feature Joins)
• Protein Editor
• Alignments
  • Integrating your own alignment data (only necessary if not using the built in alignment creation tool)
    • Accessing the alignment state:
  • Alignment Track Data Model
    • Chromatogram Data
• VersionHistoryView
  • Flavors of use (aka Embedded in the Editor vs Standalone and UMD vs React):
  • API:
    • getSequenceAtVersion
    • getVersionList
    • onSave [optional] (not necessary unless using the standalone VersionHistoryView)
    • exitVersionHistoryView [optional] (not necessary unless using the standalone VersionHistoryView)
    • getCurrentSequenceData [optional] (not necessary unless using the standalone VersionHistoryView)
• Addons
  • Auto annotate addon:
• Implementing Autosave functionality
• Development:
  • Prerequisites
  • Outside Developer Set Up Steps
  • (advanced) Working with locally linked modules
• THIS REPO HAS MOVED!
• THIS REPO HAS MOVED!
• THIS REPO HAS MOVED!

<!-- /TOC -->

Upgrade Instructions for Major and Minor Versions

This repo follows semantic versioning (major/minor/patche)

The commit log can be seen here: https://github.com/TeselaGen/openVectorEditor/commits/master

Upgrade instructions for any major or minor change can be found here: Upgrade instructions

Publishing

To publish just bump the package.json version number and commit to master. A github action will take care of building, publishing to npm and deploying to github pages.

Using this module in React

Example CRA repo with OVE

Here is where you can see how to run the <Editor/> in a Create-React-App environment: https://github.com/tnrich/ove-react-demo-repo

If you clone that repo you can see it working and see how to set up the redux store/provider and initialize the editor. You should just clone it and run:

yarn
yarn start

Installation (react)

yarn add open-vector-editor

Code (react)

Require the following components like:

import {Editor, RowView} from "open-vector-editor"

Editor

To use the <Editor> component, you'll need to do a bit more work to set up a redux store. You can see an example repo where this works here: https://github.com/tnrich/ove-react-demo-repo

The <Editor {...editorProps}/> component gives you a full blown editor. It takes in a list of editorProps as detailed below.

SimpleCircularOrLinearView

This is a non-redux connected component that is easy to use:

<SimpleCircularOrLinearView
  sequenceData={{
    circular: true, // or set to false to get a linear view
    sequence: "gagagagag",
    features: [{ id: "lalala", name: "Mr Feature" }]
  }}
  editorName="previewEditor"
  annotationLabelVisibility={{
    //set visibilities as you please
    features: true,
    parts: true,
    cutsites: false,
    primers: true
  }}
></SimpleCircularOrLinearView>

EnzymeViewer

A component used for viewing enzymes

<EnzymeViewer
  {...{
    sequence: "ggtctc",
    reverseSnipPosition: 7,
    forwardSnipPosition: 11
  }}
/>

Using this module outside of react apps (Universal):

The universal build can be used in any app with or without react. It corresponds to using the <Editor/> component in the React version. You will be able to customize the Editor just like in the react build, but you will not be able to use the individual components like <CircularView/> or <EnzymeViewer/>. For that you'll need to use React.

Installation (Universal)

via npm:

npm install open-vector-editor

then add the links

<link
  rel="stylesheet"
  type="text/css"
  href="your-path-to-node-modules/open-vector-editor/umd/main.css"
/>
<script
  type="text/javascript"
  src="your-path-to-node-modules/open-vector-editor/umd/open-vector-editor.js"
></script>

Or via CDN:

<link
  rel="stylesheet"
  type="text/css"
  href="https://unpkg.com/open-vector-editor/umd/main.css"
/>
<script
  type="text/javascript"
  src="https://unpkg.com/open-vector-editor/umd/open-vector-editor.js"
></script>

Full Example:

A full example of how to set up the unpkg/UMD demo can be seen here: https://github.com/TeselaGen/openVectorEditor/blob/master/demo/public/UMDDemo.html Demo here http://teselagen.github.io/openVectorEditor/UMDDemo.html

Code (Universal)

<script>
  const editor = window.createVectorEditor(
    yourDomNodeHere || "createDomNodeForMe",
    editorProps
  ); /* createDomNodeForMe will make a dom node for you and append it to the document.body*/
  editor.updateEditor(editorState);
</script>

Accessing the editor state:

const currentEditorState = editor.getState();
//you can view various properties of the alignment such as the selection layer using alignment.getState()
console.info(currentEditorState.selectionLayer);

Demo (Universal): http://teselagen.github.io/openVectorEditor/

editorProps

These props consist of hooks and editor config options that can be passed like so: