Manual for PanGraphViewer



Yuxuan Yuan, Ricky Ma and Ting-Fung Chan*

The Chinese University of Hong Kong, Hong Kong

PanGraphViewer logo



Version 1.0.2

2022-09-01

Table of Contents

Workflow for using PanGraphViewer

Thank you for choosing PanGraphViewer. Hope you can find our tool is useful for your study. In this section, we will introduce a general workflow (see the figure below) that can be used to explore PanGraphViewer.

workflow

There are three key functions that we would like to emphasize.

Plot a genome graph

Depending on the purpose and preference, users can install either application on their platform.

Check the sequence of nodes of interest

If users find some nodes are of interest, they can check or save the sequence of the nodes.

Show gene models that may be interrupted by some sequences/nodes in some samples

If users have the annotation file for the backbone sample, they can check gene models that are interrupted by some sequences/nodes in some samples.

How to use desktop-based PanGraphViewer

For the desktop-based application, once it is opened as shown below, users can follow the following steps to explore the program.

application

Load Files for Graph Visualization

Here we provide two options to let users select if they want to explore a GFA-based graph or a VCF-based graph.

GFA

When selecting to plot a GFA-based graph, an rGFA file or a GFA_v1 file is needed. Users can click the Select button to specify the file and then select an output directory to perform the analyses.

load_gfa_d

VCF

When selecting to plot a VCF-based graph, a VCF file is needed.

load_vcf_d

Users can click the Select button to specify the VCF file. An output directory is also needed to perform the analyses. Here the Backbone name and Backbone fasta are optional if

The program will check automatically if the given VCF file is a standard one once a fasta file is not specified. If the VCF file selected is not qualified, an error message will pop up.

vcf_err_d

Otherwise, a warning message will show.

fasta_missing_d

By default the Backbone name is backbone and the Threads to parse the VCF file is 4.

Once the files are selected and the output directory is specified, users can click the Start button to parse either the given GFA file or the VCF file. The program will run internally with 'Parsing... or Converting ...' showing in the Status bar. Once this is completed, 'Finished in xxx s!' will show.

Selection for Plot

After completing GFA or VCF parsing, users can go to the Selection for Plot panel to check genome graphs. Here we provide Basic settings and Sample(s) showing panels to let users customize their plots.

In the Basic settings panel, users can select a particular chromosome/sequence to display after specifying the name of the backbone sample.

selection_basic_d

For the start and end positions, users can specify both of them, one of them or none. For example,

Additionally, the program will check if the given start and end positions are qualified automatically. If not, a warning message will pop up and the plot will not be generated.

For the Sample(s) showing panel, users can select to hide nodes from particular sample(s) if they have such a demand.

sample_s_d

Genome Graph

After completing the settings above, users can either click the Plot button in the Plot the Graph panel to generate the graph or customise the Settings first and then plot graphs.

In Settings, users can select Node Shapes to specify node shapes in either vis.js-based plot or cytoscape.js-based plot from the dropdown menus.

node_shape_d

Users can also select to use either vis.js or cytoscape.js to plot graphs by the number of nodes specified in the Graph Modification panel under Settings.

graph_m_d

By default, if users want to check graphs with <=200 nodes, vis.js will be applied to generate graphs. Users can adjust this value (200) depending on their preference. However, if there are over five thousands of nodes that users want to browse in one graph, we don't recommend using vis.js as it may take a long time to load the graph file (an html file).

Depending on the screen/display size, users may also need to adjust the canvas height and width to make the graph fully show in the canvas if selecting vis.js-based plot. The hover box may run off the screen if the canvas height and width settings do not match with users' screen size.

Once all settings are ready, users can click the Plot button to generate the graphs. After the graph is shown in the display canvas, users can use the mouse to zoom in and out to check graph details. Users can also move the mouse close to a specific node to check the node information (mouseover, see the figure below).

hover

From the hover box, users can capture the information, such as

If users decide to use vis.js to plot graphs, we also provide some options in Settings to let users customize the plot if they don't like the default one.

interaction

GM

Users can customise the graph by enabling the options and the corresponding options would be shown in the display canvas during graph display.

While in cytoscape.js-based plot, we do not provide such functions or interactions mentioned in the vis.js-based plot. However, one unique interaction in cytoscape-based plot is that users can press Ctrl or command and hold the left click button of the mouse to select particular node regions and then right click the mouse to show or hide nodes (see the figure below). This would be useful if users want to check a specific subgraph.

mSelection

Check node information

We provide two ways to check the node information.

Display gene models that may be interrupted in some samples

If users have an annotation file for the backbone sample, they can check gene models that may be interrupted by some sequences in some samples.

gene_d

Basically, users need to

After clicking the Plot button, a plot will show in the display canvas.

gene

How to use web browser-based PanGraphViewer

After the installation of the web-based PanGraphViewer, users can follow README to open it. The login interface is like:

application-web

Users can use the test account (demo) or personal account to open the application.

After opening the page showing above, users can

webUI

Notably, when selecting specific nodes in the graph, the web-based application provides options to directly check/download the node sequence(s).

sequence_w

For the admin account, users can login using the steps shown in the README file. The interface of the login page is like:

admin

Once entering the login page, the admin can create accounts for either groups or users.

admin_p


Enjoy using PanGraphViewer!