GlycoGlyph

Description

GlycoGlyph provides an interface to draw glycan structures with SNFG (Symbol Nomenclature For Glycans) symbols using a Graphical User Interface (GUI) and produce appropriate names according to CFG naming convention (modified condensed IUPAC nomenclature). Alternatively, it also allows you to type in the names and see the structure of the glycan. It therefore allows the seamless interconversion of name and structure.

Tool Page

You can use GlycoGlyph at https://glycotoolkit.com/Tools/GlycoGlyph/

Video Tutorial

https://www.youtube.com/watch?v=Z1zEZGO_wKY

Overview of How GlycoGlyph Works

At the core of GlycoGlyph is the ability to create the Glycan Tree JSON. This tree JSON can be created from the CFG Linear Nomenclature. The tree can then be used by D3.js hierarchy module to generate the structure. The tree json can also be parsed to produce the name, allowing seemless name and structure interconversion. A user can therefore either write the name or input the structure using the GUI to generate the structure. In the figure above, the steps are highlighted to walk through what steps would be involved when a user tries to build a structure either using the GUI, or using the name.

Please Cite

If you use GlycoGlyph, please cite: https://doi.org/10.1093/bioinformatics/btaa190

For Developers

Current Stable Version - 2.x

License

GlycoGlyph is released under MIT license. Please see LICENSE.md for details.

Requirements

GlycoGlyph uses the following:

• JS Libraries:
  • D3.js v5
  • jQuery v3.4.1
  • Bootstrap components:
    • Popper.js v1.12.9
    • Bootstrap v4.0.0-alpha.6 js
    • Tether v1.4.0
• CSS
  • Bootstrap v4.0.0-alpha.6 css

Getting Started

Prerequisites

• Node.js (version 12 or higher)
• npm (comes with Node.js)

Development Setup

1. Clone the repository

   git clone https://github.com/akulmehta/GlycoGlyphPublic.git
   cd GlycoGlyphPublic

2. Install dependencies

   npm install

3. Start development

   npm run dev

   This command will:

   • Start a local development server on http://localhost:3000 (or next available port)
   • Watch for changes in the src/ directory
   • Automatically rebuild the JavaScript bundle when files change

Available Scripts

• npm run build - Build the production bundle (creates public/js/glycoglyph.js and public/js/glycoglyph.min.js)
• npm run watch - Watch for changes and rebuild automatically
• npm run start - Start the development server (serves the public/ directory)
• npm run dev - Run both watch and start in parallel (recommended for development)

Project Structure for Development

The source code is organized as follows:

• src/main.js - Main entry point that exports all modules
• src/modules/ - Individual feature modules
• public/ - Built files and static assets (served by development server)
• rollup.config.js - Build configuration

When you make changes to files in the src/ directory, Rollup will automatically rebuild the bundle and place the output in public/js/.

The public directory contains files to implement GlycoGlyph on a website.

Use either:

1. The minified glycoglyph.min.js with index-min.html

public
└─ index-min.html
└─ assets\*.*
└─ css\*.*
└─ js
    └─ glycoglyph.min.js
    └─ initialize.js
    └─ introtut.js

2. The non-minified glycoglyph.js with index.html

public
└─ index.html
└─ assets\*.*
└─ css\*.*
└─ js
    └─ glycoglyph.js
    └─ initialize.js
    └─ introtut.js

3. The minified glycoglyph.js with index_relative.html using relative file paths

public
└─ index_relative.html
└─ assets\*.*
└─ css\*.*
└─ js
    └─ glycoglyph.js
    └─ initialize_relative.js
    └─ introtut.js

The src directory contains all source code files which are only required for development. The files in the modules directory of the src folder is compiled into one using Rollup.js.

Full Documentation

Full Documentation Here.

Contact

Twitter @akulmehta