### Teselagen tg-oss Local Development Setup
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Commands to set up and run the tg-oss project locally. Prerequisites include Node.js (>= v8) and Yarn. This snippet covers installing dependencies, starting the demo application, and launching Cypress end-to-end tests.
```Shell
cd tg-oss
yarn
yarn nx run ove:start #this will start the demo app
yarn nx run ove:launch-e2e #this will run the cypress tests
```
--------------------------------
### Examples of NX Package-Specific Commands
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
Illustrative examples of running common development and testing commands for specific packages like 'ui' and 'ove' using NX. These commands demonstrate how to start development servers, launch end-to-end tests, or build individual packages.
```bash
nx run ui:start
nx run ove:start
nx run ove:launch-e2e
nx run ove:build
```
--------------------------------
### Run UI Library Locally with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ui/README.md
Starts the 'ui' library in a local development environment using the Nx 'start' command. This allows developers to test and interact with the library's components in real-time.
```bash
nx run ui:start
```
--------------------------------
### Install @teselagen/sequence-utils NPM Package
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Command to install the @teselagen/sequence-utils library using npm, making it available for use in projects.
```shell
npm install @teselagen/sequence-utils
```
--------------------------------
### Install Teselagen OVE via npm
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Instructions for installing the @teselagen/ove package using npm for universal usage, enabling its use in any application with or without React.
```bash
npm install @teselagen/ove
```
--------------------------------
### Install Project Dependencies with Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
Instructions to install all project dependencies using Yarn after cloning the repository. This command should be run from the project's root directory.
```bash
yarn
```
--------------------------------
### Install Teselagen OVE for React Applications
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Installs the core @teselagen/ove package along with React and ReactDOM, which are required dependencies for using OVE components in a React environment.
```bash
yarn add @teselagen/ove react react-dom
```
--------------------------------
### Run Development Server with Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/example-demos/oveViteDemo/README.md
Starts the React application in development mode, making it accessible via `http://localhost:3000`. The page automatically reloads on code edits, and any lint errors are displayed directly in the console.
```Shell
yarn start
```
--------------------------------
### Install the Teselagen Range Utilities Library
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Instructions for installing the `@teselagen/range-utils` library using npm. This command adds the package to your project's dependencies, making its utility functions available for use.
```bash
npm install @teselagen/range-utils
```
--------------------------------
### Understand DNA Sequence 0-Based and 1-Based Indexing
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Illustrates the 0-based and 1-based inclusive indexing conventions used for DNA sequences and features within the library. This example clarifies how feature start and end positions are interpreted.
```plaintext
Example:
0123456
ATGAGAG
--fff-- (the feature covers GAG)
0-based inclusive start:
feature.start = 2
1-based inclusive start:
feature.start = 3
0-based inclusive end:
feature.end = 4
1-based inclusive end:
feature.end = 5
```
--------------------------------
### Include Teselagen OVE Styles and Script (NPM Path)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
HTML snippet to link the necessary CSS stylesheet and JavaScript bundle for Teselagen OVE when installed via npm. These links should be added after npm installation.
```html
```
--------------------------------
### Install Bio-Parsers Library via npm or Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Instructions for installing the `@teselagen/bio-parsers` library using Node Package Manager (npm) or Yarn. These commands add the library as a dependency to your project, making its parsing functionalities available for use.
```Bash
npm install -S @teselagen/bio-parsers
```
```Bash
yarn add @teselagen/bio-parsers
```
--------------------------------
### Install UI Library for React Projects
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ui/README.md
Adds the '@teselagen/ove' package, which is part of the 'ui' library, along with its peer dependencies 'react' and 'react-dom' to a project using Yarn. This prepares the project to use the UI components.
```bash
yarn add @teselagen/ove react react-dom
```
--------------------------------
### Execute NX Command Across Multiple Packages
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
Example of running the 'build' command across all relevant packages using NX's `run-many` command. This efficiently builds all projects that have a 'build' target defined.
```bash
nx run-many --target:build
```
--------------------------------
### Browser Usage Example: Converting GenBank to JSON and Back
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Demonstrates how to use the `@teselagen/bio-parsers` library directly in a web browser via a UMD build. This example shows an asynchronous function that fetches a GenBank string, converts it to the generalized JSON format using `genbankToJson`, and then converts the parsed JSON back into a GenBank string using `jsonToGenbank`, logging both results to the console.
```HTML
```
--------------------------------
### Initialize and Populate First Teselagen Vector Editor Instance
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/public/UMDDemo.html
This example demonstrates how to create the first instance of the Teselagen vector editor using `window.createVectorEditor`. It then populates the editor with a circular DNA sequence and a single feature using `editor.updateEditor`. The editor is configured with preview mode and a menu bar.
```javascript
const editor = window.createVectorEditor("createDomNodeForMe", { withPreviewMode: true, editorName: "FirstSequence", showMenuBar: true });
/* createDomNodeForMe will make a dom node for you and append it to the document.body*/
editor.updateEditor({ sequenceData: { circular: true, sequence: "gtagagagagagtgagcccgacccccgtagagagagagtgagcccgacccccgtagagagagagtgagcccgacccccgtagagagagagtgagcccgaccccc", features: [ { id: "2oi452", name: "I'm a feature :)", start: 10, end: 20 } ] } });
```
--------------------------------
### Include Teselagen OVE Styles and Script (CDN Path)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
HTML snippet to link the necessary CSS stylesheet and JavaScript bundle for Teselagen OVE when using the unpkg CDN. This provides an alternative to local npm installation.
```html
```
--------------------------------
### Import and Use getComplementSequence in JavaScript
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Demonstrates how to import and use the getComplementSequence function from the @teselagen/sequence-utils library to find the complement of a given DNA sequence. The example shows input and expected output.
```javascript
import { getComplementSequence } from '@teselagen/sequence-utils';
const mySequence = 'ATGAGAG';
const myComplement = getComplementSequence(mySequence);
console.log(myComplement); // TACTCTC
```
--------------------------------
### Execute NX Command for a Specific Package
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
General syntax for running a specific command on a designated package using NX. This command allows targeting individual packages within the monorepo for operations like building, testing, or starting development servers.
```bash
nx run :
```
--------------------------------
### Initialize and Populate Third Teselagen Vector Editor Instance with Multiple Features
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/public/UMDDemo.html
This example demonstrates creating a third vector editor instance and populating it with a longer circular DNA sequence. It showcases how to add multiple features of different types (RBS, CDS) to the sequence data, providing a more complex visualization scenario.
```javascript
const editor3 = window.createVectorEditor("createDomNodeForMe", { withPreviewMode: true, showMenuBar: true, editorName: "YetAnotherSequence" });
/* createDomNodeForMe will make a dom node for you and append it to the document.body*/
editor3.updateEditor({ sequenceData: { name: "Wait for Me!", circular: true, sequence: "gtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaaccccccgtaacccccc", features: [ { id: "19f0fjj", name: "abcd", type: "RBS", start: 1, end: 5 }, { id: "24t2t", name: "pj1", type: "CDS", start: 10, end: 50 }, { id: "82020000", name: "pj3", type: "CDS", start: 10, end: 50 } ] } });
```
--------------------------------
### Feature Location (Join) Data Model Structure
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
This JavaScript object illustrates how to define a feature with multiple, non-contiguous locations, also known as feature joins. The `locations` array specifies individual segments, each with a `start` and `end` property. The feature's overall `start` and `end` properties must match the first and last segment's boundaries, respectively.
```js
{
name: "GFP_with_locations",
start: 10,
end: 40,
locations: [{
start: 10, //this must match the .start property of the feature,
end: 15
},
{
start: 18, end: 19
},
{
start: 35,
end: 40 //this must match the .end property of the feature,
}
]
}
```
--------------------------------
### Define a Standard Range Object
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Illustrates the basic structure of a standard range object used by the library. A range object must contain `start` and `end` properties, representing 0-based inclusive indices, where `start` is less than or equal to `end`.
```javascript
const myRange = {
start: 10,
end: 40
}
```
--------------------------------
### Eject Create React App Configuration with Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/example-demos/oveViteDemo/README.md
A one-way operation that removes the single build dependency from the project. It copies all configuration files (e.g., webpack, Babel, ESLint) and transitive dependencies directly into your project, providing full control over the build setup. This is typically used for advanced customization when the default configuration is insufficient.
```Shell
yarn eject
```
--------------------------------
### Convert Snapgene .dna Files to JSON Format (JavaScript)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Provides an example of using the asynchronous `snapgeneToJson` function to parse Snapgene .dna files into the generalized JSON format. Similar to other parsing functions, it accepts either a browser `File` object or a Node.js `Buffer` as input.
```javascript
import { snapgeneToJson } from "bio-parsers";
//file can be either a browser file
// or a node file snapgeneToJson(fs.readFileSync(path.join(__dirname, './testData/ab1/example1.ab1')));
const results = await snapgeneToJson(file, options);
```
--------------------------------
### Convert Genbank String to JSON and Back in JavaScript
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/umd_demo.html
This snippet demonstrates how to use `window.bioParsers.genbankToJson` to parse a Genbank string into a JSON object, and then `window.bioParsers.jsonToGenbank` to convert the parsed JSON back into a Genbank string. It showcases basic usage of the bioParsers library for sequence data manipulation, including handling features and qualifiers.
```JavaScript
async function main() {
var jsonOutput = await window.bioParsers.genbankToJson( `LOCUS kc2 108 bp DNA linear 01-NOV-2016 COMMENT teselagen_unique_id: 581929a7bc6d3e00ac7394e8 FEATURES Location/Qualifiers CDS 1..108 /label="GFPuv" misc_feature 61..108 /label="gly_ser_linker" bogus_dude 4..60 /label="ccmN_sig_pep" misc_feature 4..60 /label="ccmN_nterm_sig_pep" /pragma="Teselagen_Part" /preferred5PrimeOverhangs="" /preferred3PrimeOverhangs="" ORIGIN 1 atgaaggtct acggcaagga acagtttttg cggatgcgcc agagcatgtt ccccgatcgc 61 ggtggcagtg gtagcgggag ctcgggtggc tcaggctctg ggg //` );
console.log("jsonOutput:", jsonOutput);
var genbankString = window.bioParsers.jsonToGenbank(
jsonOutput[0].parsedSequence
);
console.log(genbankString);
}
main();
```
--------------------------------
### Build Production-Ready App with Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/example-demos/oveViteDemo/README.md
Builds the React application for production, outputting optimized and minified files into the `build` folder. It correctly bundles React in production mode and includes hashes in filenames for efficient caching, preparing the app for deployment.
```Shell
yarn build
```
--------------------------------
### Run Unit Tests for Uploader Library
Source: https://github.com/teselagen/tg-oss/blob/master/packages/uploader/README.md
Executes the unit tests for the 'uploader' library using the Nx build system and Bun test runner. This command should be run from the project root.
```Shell
nx test uploader
```
--------------------------------
### Publishing Teselagen Packages
Source: https://github.com/teselagen/tg-oss/blob/master/README.md
Commands to publish Teselagen packages using `nx`. This section demonstrates how to publish individual packages or multiple packages simultaneously to a stable release.
```Shell
nx run ui:publish
nx run ove:publish
nx run-many --target=publish --projects=bio-parsers,ove,sequence-utils,ui
```
--------------------------------
### Build file-utils library with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/file-utils/README.md
This command builds the file-utils library using the Nx build system. It compiles the source code and prepares it for distribution or use.
```Shell
nx build file-utils
```
--------------------------------
### Publishing Teselagen Beta Packages
Source: https://github.com/teselagen/tg-oss/blob/master/README.md
Commands to publish beta versions of Teselagen packages using `nx`. This is particularly useful for development purposes, allowing linking to a specific branch in another project.
```Shell
nx run ui:publish-beta
nx run ove:publish-beta
nx run-many --target=publish-beta --projects=bio-parsers,ove,sequence-utils,ui
```
--------------------------------
### Build @teselagen/sequence-utils Library with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Command to build the @teselagen/sequence-utils library using the Nx build system. This compiles the source code into distributable assets.
```shell
nx build sequence-utils
```
--------------------------------
### Publish UI Library Beta Version with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ui/README.md
Publishes a beta version of the 'ui' library, which is useful for testing specific branches or features in conjunction with other projects before a full release. This command facilitates linking to a development branch.
```bash
nx run ui:publish-beta
```
--------------------------------
### Run Unit Tests with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ui/README.md
Executes the unit tests for the 'ui' library using Nx, leveraging Bun for the test runner. This command helps verify the functionality and stability of the library's components.
```bash
nx test ui
```
--------------------------------
### Publish UI Library with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ui/README.md
Publishes the 'ui' library to a package registry using the Nx 'publish' command. This makes the stable version of the library available for consumption by other projects.
```bash
nx run ui:publish
```
--------------------------------
### Define a Circular Range Object
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Shows how to define a 'circular' range object, which is characterized by its `start` property being greater than its `end` property. This indicates a range that wraps around, often used in circular data structures.
```javascript
const myRange2 = {
start: 50,
end: 40
}
```
--------------------------------
### Convert GenBank String to JSON in JavaScript
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Demonstrates how to use the `genbankToJson` function from the `bio-parsers` library to convert a GenBank formatted string into a structured JSON object. The example output illustrates the parsed sequence data, including features, name, sequence, and metadata, along with any parsing messages.
```js
import { genbankToJson } from "bio-parsers";
const result = genbankToJson(string, options);
console.info(result);
// [
// {
// "messages": [
// "Import Error: Illegal character(s) detected and removed from sequence. Allowed characters are: atgcyrswkmbvdhn",
// "Invalid feature end: 1384 detected for Homo sapiens and set to 1",
// ],
// "success": true,
// "parsedSequence": {
// "features": [
// {
// "notes": {
// "organism": [
// "Homo sapiens"
// ],
// "db_xref": [
// "taxon:9606"
// ],
// "chromosome": [
// "17"
// ],
// "map": [
// "17q21"
// ]
// },
// "type": "source",
// "strand": 1,
// "name": "Homo sapiens",
// "start": 0,
// "end": 1
// }
// ],
// "name": "NP_003623",
// "sequence": "gagaggggggttatccccccttcgtcagtcgatcgtaacgtatcagcagcgcgcgagattttctggcgcagtcag",
// "circular": true,
// "extraLines": [
// "DEFINITION contactin-associated protein 1 precursor [Homo sapiens].",
// "ACCESSION NP_003623",
// "VERSION NP_003623.1 GI:4505463",
// "DBSOURCE REFSEQ: accession NM_003632.2",
// "KEYWORDS RefSeq."
// ],
// "type": "DNA",
// "size": 925
// }
// }
// ]
```
--------------------------------
### Launch Interactive Test Runner with Yarn
Source: https://github.com/teselagen/tg-oss/blob/master/example-demos/oveViteDemo/README.md
Launches the test runner in an interactive watch mode. This allows developers to continuously run tests as code changes, facilitating rapid feedback and ensuring application functionality and code quality.
```Shell
yarn test
```
--------------------------------
### Initialize and Populate Second Teselagen Vector Editor Instance
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/public/UMDDemo.html
This snippet illustrates the creation of a second vector editor instance. It's configured with preview mode and a menu bar, similar to the first. The editor is then updated with a linear DNA sequence and a feature of type 'CDS' (Coding Sequence).
```javascript
const editor2 = window.createVectorEditor("createDomNodeForMe", { withPreviewMode: true, showMenuBar: true, editorName: "AnotherSequence" });
/* createDomNodeForMe will make a dom node for you and you and append it to the document.body*/
editor2.updateEditor({ sequenceData: { name: "Another Sequence", circular: false, sequence: "gtaacccccc", features: [ { id: "agog98", name: "2nd Feature", type: "CDS", start: 1, end: 5 } ] } });
```
--------------------------------
### Run unit tests for file-utils with Jest and Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/file-utils/README.md
This command executes the unit tests for the file-utils library. It leverages Jest for the testing framework and Nx for orchestrating the test run.
```Shell
nx test file-utils
```
--------------------------------
### Build the Range Utilities Library
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Command to build the `@teselagen/range-utils` library using the Nx build system. This process compiles the source code and prepares the library for distribution or use in other projects.
```bash
nx build range-utils
```
--------------------------------
### Publish @teselagen/sequence-utils NPM Package
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Commands for Teselagen collaborators to version and publish the @teselagen/sequence-utils library to the npm registry. This process involves incrementing the package version and then publishing the updated package.
```shell
npm version patch|minor|major
npm publish
```
--------------------------------
### Run Unit Tests for @teselagen/sequence-utils with Nx
Source: https://github.com/teselagen/tg-oss/blob/master/packages/sequence-utils/README.md
Command to execute unit tests for the @teselagen/sequence-utils library via Jest, orchestrated by Nx. This ensures the code functions as expected.
```shell
nx test sequence-utils
```
--------------------------------
### Publish Multiple Packages with NX
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
Command to publish all packages that have a 'publish' target using NX's `run-many` feature. This streamlines the release process for multiple packages simultaneously.
```bash
nx run-many --target=publish
```
--------------------------------
### Implementing Autosave Functionality
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Guidance on enabling autosave by passing the `shouldAutosave` prop and ensuring the `onSave` handler returns a Promise for proper UI feedback, such as a spinner indicating saving is in progress.
```APIDOC
Autosave Configuration:
Props:
shouldAutosave: boolean
Description: Set to `true` to enable autosave functionality.
Handler Requirements:
onSave: Function
Description: The `onSave` handler must return a Promise to allow the UI to respond correctly (e.g., display a spinner).
```
--------------------------------
### Run Unit Tests for Range Utilities
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Command to execute unit tests for the `@teselagen/range-utils` library. Tests are run via Jest, orchestrated by Nx, ensuring the library's functionality and stability.
```bash
nx test range-utils
```
--------------------------------
### Create Alignment View with Custom Data
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Demonstrates how to initialize an alignment view using `window.createAlignmentView` with custom `pairwiseAlignments` or `alignmentTracks` and various annotation visibility options. This is used when not leveraging the built-in alignment creation tool.
```js
const alignment = window.createAlignmentView(this.node, {
id: "jbeiAlignment1", //give your alignment a unique id
////optional! Use if you want a pairwise alignment:
pairwiseAlignments: [ // this is an array of [referenceSequence, alignedSequence]
[
{ //reference sequence must come first!
sequenceData: {
id: "FWER1231", //every sequenceData and alignmentData should have a unique id
name: "GFPuv58",
sequence: "ttgagggg",
features: [{id: "feat1", start: 2, end:4, name: "GFP CDS"}]
},
alignmentData: {
sequence: "ttgag--ggg--" //this length should be the same as the below alignmentData length!
}
},{
sequenceData: {
name: "GFPuv58",
sequence: "gagccgggtt"
},
alignmentData: {
sequence: "--gagccgggtt" //this length should be the same as the above alignmentData length!
}
}
],
[
{Alignment Track Data Here}, //reference sequence track (see Data Model below for specs)
{Alignment Track Data Here}, //aligned sequence track (see Data Model below for specs)
],
[
{Alignment Track Data Here}, //see Data Model below for specs
{Alignment Track Data Here},
],
]
////optional! Use if you want a multi-seq alignment:
alignmentTracks: [
{Alignment Track Data Here}, //see Data Model below for specs
{Alignment Track Data Here},
{Alignment Track Data Here},
],
//additional view options:
"alignmentAnnotationVisibility": {
"features": true,
"translations": false,
"parts": true,
"orfs": true,
"orfTranslations": false,
"axis": true,
"cutsites": false,
"primers": true,
"reverseSequence": false,
"fivePrimeThreePrimeHints": true,
"axisNumbers": true
},
"alignmentAnnotationLabelVisibility": {
"features": true,
"parts": true,
"cutsites": false
}
});
```
--------------------------------
### Execute NX Command by Target
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
General syntax for running a command across multiple packages by specifying a target. This is useful for executing a common operation, like 'build' or 'test', on all packages that define that target.
```bash
nx run --target:
```
--------------------------------
### Create Universal Vector Editor Instance
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
JavaScript code to initialize the universal vector editor, allowing it to be attached to a specified DOM node or automatically created and appended to the document body. This corresponds to the React `` component.
```js
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);
```
--------------------------------
### Publish a Specific Package with NX
Source: https://github.com/teselagen/tg-oss/blob/master/CONTRIBUTING.md
Command to publish a single package, such as 'ui', using the NX build system. This is typically used for releasing new versions of individual packages to a package registry.
```bash
nx run ui:publish
```
--------------------------------
### Render EnzymeViewer React Component
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Shows how to instantiate the EnzymeViewer component with sequence and snip position properties for enzyme visualization. This component is used for viewing enzymes.
```js
```
--------------------------------
### VersionHistoryView API Reference
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
API documentation for the VersionHistoryView component, detailing methods for interacting with sequence versions and saving data. Some methods are optional when embedded within the main editor.
```APIDOC
VersionHistoryView API:
getSequenceAtVersion(): Retrieves sequence data for a specific version.
getVersionList(): Fetches a list of available versions.
onSave(data: any): [optional] Callback function triggered on save, not necessary unless using the standalone VersionHistoryView.
exitVersionHistoryView(): [optional] Exits the version history view, not necessary unless using the standalone VersionHistoryView.
getCurrentSequenceData(): [optional] Retrieves the current sequence data, not necessary unless using the standalone VersionHistoryView.
```
--------------------------------
### Using VersionHistoryView as a UMD Module
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Shows how to initialize `VersionHistoryView` as a UMD module via `window.createVersionHistoryView`. This method is suitable for environments where React components are not directly used, but the same functional props are required.
```js
window.createVersionHistoryView({
getSequenceAtVersion,
getVersionList,
onSave,
exitVersionHistoryView,
getCurrentSequenceData
});
```
--------------------------------
### Configure Back Button Link for Teselagen tg-oss Demo
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/public/UMDDemo.html
This snippet dynamically sets the 'href' attribute of an HTML element with the ID 'backButton'. It checks if the current host is 'localhost' to determine whether to link to a local editor path or the public Teselagen demo URL.
```javascript
const hrefToUse = window.location.href.includes("localhost") ? `${window.location.origin}/#/Editor` : "https://teselagen.github.io/tg-oss/ove-demo/";
document.getElementById("backButton").setAttribute("href", hrefToUse);
```
--------------------------------
### Import OVE Components in React
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Demonstrates how to import specific components like Editor and RowView from the @teselagen/ove library into a React application for use in JSX.
```javascript
import {Editor, RowView} from "@teselagen/ove"
```
--------------------------------
### Common Options for `anyToJson` and `xxxxToJson` Functions (JavaScript)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Defines the common and specific configuration options that can be passed to `anyToJson` and other `*ToJson` functions. These options allow control over file naming, explicit protein parsing, circularity for FASTA files, 1-based indexing for Genbank features, and whether to accept 'Teselagen_Part' features.
```javascript
//You can pass an optional options object as the third argument. Here are the defaults
const options = {
fileName: "example.gb", //the filename is used if none is found in the genbank
isProtein: false, //if you know that it is a protein string being parsed you can pass true here
parseFastaAsCircular: false, //by default fasta files are parsed as linear sequences. You can change this by setting parseFastaAsCircular=true
//genbankToJson options only
inclusive1BasedStart: false, //by default feature starts are parsed out as 0-based and inclusive
inclusive1BasedEnd: false, //by default feature ends are parsed out as 0-based and inclusive
acceptParts: true, //by default features with a feature.notes.pragma[0] === "Teselagen_Part" are added to the sequenceData.parts array. Setting this to false will keep them as features instead
// fastaToJson options only
parseName: true //by default attempt to parse the name and description of sequence from the comment line. Setting this to false will keep the name unchanged with no description
}
```
--------------------------------
### Publish Updates to npm (Teselagen Collaborators)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/range-utils/README.md
Commands for Teselagen collaborators to update the package version and publish the library to the npm registry. This process involves incrementing the version (patch, minor, or major) and then publishing the new package.
```bash
npm version patch|minor|major
npm publish
```
--------------------------------
### API: getVersionList
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Describes the `getVersionList` API method. This function returns an array of version objects, each containing metadata such as `versionId`, `dateChanged`, `editedBy`, and `revisionType`.
```APIDOC
() => [{ versionId: "51241", dateChanged: "12/30/1990", editedBy: "Hector Plahar", revisionType: "Feature Add"}]
```
--------------------------------
### Vector Editor Configuration Properties (editorProps)
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
This JavaScript object defines a comprehensive set of configuration properties and callback functions for customizing a vector editor. It covers aspects like autosaving, fullscreen mode handling, data persistence (onSave), clipboard interactions (onCopy, onPaste), annotation lifecycle hooks (beforeAnnotationCreate), UI overrides (rightClickOverrides), and the configuration of various editor panels and tools (PropertiesProps, ToolBarProps, StatusBarProps).
```javascript
{
shouldAutosave: true, //by default the editor does not autosave, setting this to true will trigger the onSave callback after any change to the sequenceData
//supplying this function WILL make the editor FULLSCREEN BY DEFAULT
handleFullscreenClose: () => {
//do whatever you want here
//UMD only:
editor.close() //this calls reactDom.unmountComponent at the node you passed as the first arg
},
onPreviewModeFullscreenClose: () => {}, //user defined handler for tracking when fullscreen is closed from preview mode
showReadOnly: false, //default true
disableSetReadOnly: true, //default false
onSave: function(event, sequenceDataToSave, editorState, onSuccessCallback) {
console.info("event:", event);
console.info("sequenceData:", sequenceDataToSave);
console.info("editorState:", editorState);
// To disable the save button after successful saving
// either call the onSuccessCallback or return a successful promise :)
onSuccessCallback()
//or
// return myPromiseBasedApiCall()
},
onCopy: function(event, copiedSequenceData, editorState) {
//the copiedSequenceData is the subset of the sequence that has been copied in the teselagen sequence format
console.info("event:", event);
console.info("sequenceData:", copiedSequenceData);
console.info("editorState:", editorState);
const clipboardData = event.clipboardData;
clipboardData.setData(
"application/json",
JSON.stringify(copiedSequenceData)
);
event.preventDefault();
//in onPaste in your app you can do:
// e.clipboardData.getData('application/json')
},
onPaste: function(event, editorState) {
//the onPaste here must return sequenceData in the teselagen data format
const clipboardData = event.clipboardData;
let jsonData = clipboardData.getData("application/json")
if (jsonData) {
jsonData = JSON.parse(jsonData)
if (jsonData.isJbeiSeq) {
jsonData = convertJbeiToTeselagen(jsonData)
}
}
const sequenceData = jsonData || {sequence: clipboardData.getData("text/plain")}
return sequenceData
},
beforeAnnotationCreate: ({ //also works for edits (!)
annotationTypePlural, //features/parts/primers
annotation, //annotation info
props, //general props to the dialog
isEdit //true if this is an edit instead of a create
}) => {
//a handler to hook into when annotations (features/primers/parts) are being created
},
//regular click overrides, eg:
featureClicked: ({annotation, event}) => {
//do something here :)
}
// orf/primer/translation/cutsite/translationDouble/deletionLayer/replacementLayer/feature/part/searchLayer xxxxClicked can also be overridden
rightClickOverrides: { //override what happens when a given feature/part/primer/translation/orf/cutsite/selectionLayer/lineageLine gets right clicked
//the general format is xxxxRightClicked eg:
selectionLayerRightClicked: (items, {annotation}, props) => {
return [...items, {
//props here get passed directly to blueprintjs MenuItems
text: "Create Part",
onClick: () => console.info('hey!≈')
}]
}
},
PropertiesProps: {
// the list of tabs shown in the Properties panel
propertiesList: [
"general",
"features",
"parts",
"primers",
"translations",
"cutsites",
"orfs",
"genbank"
]
},
ToolBarProps: {
toolList: [
"saveTool",
//you can override a tool like so:
{name: "downloadTool", Dropdown: () => {
return "Hey!"
}},
"importTool",
"undoTool",
"redoTool",
"cutsiteTool",
"featureTool",
"alignmentTool",
// "oligoTool",
"orfTool",
// "viewTool",
"editTool",
"findTool",
"visibilityTool"
// "propertiesTool"
]
},
StatusBarProps: {
//these are the defaults:
showCircularity: true,
showReadOnly: true,
showAvailability: false
},
onDigestSave: () => {} //tnr: NOT YET IMPLEMENTED
}
```
--------------------------------
### Available Bio-Parser Functions for Format Conversion
Source: https://github.com/teselagen/tg-oss/blob/master/packages/bio-parsers/README.md
Lists the primary functions exported by the `@teselagen/bio-parsers` library. These functions facilitate conversion of various biological file formats (like FASTA, GenBank, AB1, SBOL, Geneious, JBEI, and SnapGene) into a generalized JSON format, and also provide functions to convert back from JSON to specific formats like GenBank, FASTA, and BED.
```JavaScript
fastaToJson //handles fasta files (.fa, .fasta)
genbankToJson //handles genbank files (.gb, .gbk)
ab1ToJson //handles .ab1 sequencing read files
sbolXmlToJson //handles .sbol files
geneiousXmlToJson //handles .genious files
jbeiXmlToJson //handles jbei .seq or .xml files
snapgeneToJson //handles snapgene (.dna) files
anyToJson //this handles any of the above file types based on file extension
jsonToGenbank
jsonToFasta
jsonToBed
```
--------------------------------
### Version History View API Handlers
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Optional API handlers for integrating with the standalone VersionHistoryView component. These functions manage data saving, exiting the view, and retrieving the current sequence data.
```APIDOC
onSave:
Signature: (event, sequenceDataToSave, editorState, onSuccessCallback) => { same onSave handler as normal }
Description: Callback function invoked when data needs to be saved from the editor.
exitVersionHistoryView:
Signature: () => {}
Description: Function to call when exiting the version history view.
getCurrentSequenceData:
Signature: () => teselagenSequenceData
Description: Called upon initialization to retrieve the current sequence data.
```
--------------------------------
### Accessing Current Alignment State
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Shows how to retrieve the current state of an alignment view using `alignment.getState()` and access specific properties like `selectionLayer` for inspection or further manipulation.
```js
const currentAlignmentState = alignment.getState();
//you can view various properties of the alignment such as the selection layer using alignment.getState()
console.info(currentAlignmentState.selectionLayer);
```
--------------------------------
### Embedding VersionHistoryView within the Vector Editor UMD Module
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Explains how to integrate `VersionHistoryView` functionality when using the `createVectorEditor` UMD module. Similar to the React component integration, it requires passing version-related props and configuring the `ToolBarProps`.
```js
window.createVectorEditor({
getSequenceAtVersion,
getVersionList,
onSave,
ToolBarProps: { toolList: ["versionHistoryTool", ...otherTools] }
});
```
--------------------------------
### API: getSequenceAtVersion
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Describes the `getSequenceAtVersion` API method. This function retrieves sequence data for a specific version identified by its `versionId`.
```APIDOC
(versionId) => teselagenSequenceData
```
--------------------------------
### Using VersionHistoryView as a React Component
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Illustrates how to embed the `VersionHistoryView` as a standalone React component. It requires passing essential props such as `getSequenceAtVersion`, `getVersionList`, `onSave`, `exitVersionHistoryView`, and `getCurrentSequenceData` for its functionality.
```js
;
```
--------------------------------
### Set Amino Acid Coloring Preference in Local Storage
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
This JavaScript line demonstrates how to set a default value for the 'aaColorType' preference in the browser's local storage. If the item is not already set, it defaults to 'byFamily', ensuring a consistent coloring scheme for amino acids across sessions.
```js
localStorage.setItem("aaColorType", localStorage.getItem("aaColorType") || "byFamily");
```
--------------------------------
### Embedding VersionHistoryView within the Editor Component
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
Demonstrates how to integrate `VersionHistoryView` functionality into the main `Editor` React component. This involves passing version-related props and including `versionHistoryTool` in the `ToolBarProps` to enable the feature within the editor's UI.
```js
;
```
--------------------------------
### Access Universal Editor State
Source: https://github.com/teselagen/tg-oss/blob/master/packages/ove/README.md
JavaScript code to retrieve the current state of the universal editor instance. This allows inspection of various properties, such as the selection layer, for debugging or further manipulation.
```js
const currentEditorState = editor.getState();
//you can view various properties of the alignment such as the selection layer using alignment.getState()
console.info(currentEditorState.selectionLayer);
```