Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

Build StatusLicense: MITLanguage: Javascript

FriPan

Interactive visualization of bacterial pan-genomes

Introduction

FriPan is a web-based tool for exploring the pan-genome of multiple bacterial genomes. FriPan does not perform the ortholog clustering itself, but it can load the output of [Roary](http://sanger-pathogens.github.io/Roary/) directly. Each genome is a row, and there is a columnar position for each gene cluster.

Demo

To run a demo of the built application locally:

  1. Change to the dist/ directory and run a python server:

    cd dist ; python -m http.server
  2. Navigate your browser to: http://localhost:8000/pan.html

Installation

To deploy FriPan, simply copy the following built assets from the dist/ directory to a web-accessible location on your server:

  • build.js
  • pan.css
  • pan.html

Development

For development and creating a new build, use the provided build_dist.sh script. This uses Docker to build the application and extract the assets.

./build_dist.sh

Using data from roary

After you've run a pan-genome analysis with roary, copy the generated gene_presence_absence.csv file to the FriPan root directory and name it some_strain.roary (eg ecoli.roary).

Go to http://localhost:8030/pan.html?some_strain (where some_strain is the name you chose for the file above).

The interface

A : Menu bar

Tells you how many isolates were loaded and how many gene clusters across those isolates, as well as links to error logs and software information.

B: Gene presence/absence tree

This is not a phylogenetic tree. It is constructed from binary matrix of gene presence/absence for each pair of gene cluster and isolate. It dynamically changes depending on the selection in panel E/F.

C1: MDS plot

This MDS plot is a dimensionality scaling plot (like PCA) which uses gene presence/absence to group isolates with similar accessory genomes. Note that core genome has no influence on this plot because those genes are present in all the isolates. This panel also dynamically updates to represent the current selection in panel E/F.

C2: MDS dimensions

This graph plots the percentage of the signal present in each of the MDS dimensions. Ideally most of the signal will be in the first 2 dimensions which are shown in panel C1. You can click on any of the bars to change which dimensions are displayed in panel C1.

D: Display options

These options allow you to configure how the pan-genome, tree and MDS plot are displayed. You can re-order rows, annotate with colours etc.

E: Pan-genome overview

This panel will always show a zoomed out version of the whole pan-genome. The x-axis shows the gene clusters - here we see we have just over 900 clusters, which matches the 931 denoted in Panel A. It is possible to select a region of this panel to zoom in on a smaller section of the pan-genome.

F: Pan-genome

This panel provides a scrollable view of the pan genome itself. When zoomed in, each gene is visible as a block, with width approximaltely proportional to the gene length. Hovering over a gene will display information about that gene that was present in the input files.

G: Phylogenomic tree

Coming soon.

H: Metadata columns

Coming soon.

Input files

An example set of input files with the stem test is provided:

  1. test.proteinortho
  2. test.descriptions
  3. test.strains

XXX.proteinortho

This is the gene presence/absence matrix in TSV format. Each row is a gene ortholog cluster, and each column in a strain. Each cell in the matrix is gene ID, or * if none. Paralogs are CSV within the cell. The first 3 columns are unused, but you must use the exact names as below.

# Species Genes Alg.-Conn. USA300 TW20 JKD6159
3 3 1 USA_001 TW20_001 JKD_001 3 4 1 USA_002 TW20_002 JKD_002,JKD_004
2 2 1 USA_003 * JKD_003 1 1 1 USA_004 * *

XXX.descriptions

This maps gene IDs from the strain columns, in 2-column TSV format.

USA_001 DNA replication protein
USA_002 hypothetical protein
USA_003 gyrase A
USA_004 alcohol dehydrogenase (EC:1.1.1.1)
TW20_001 DNA replication protein
TW20_002 unknown protein
JKD_001 DNA replication protein, dnaA
JKD_002 hypothetical protein
JKD_003 gyrase
JKD_004 hypothetical protein

XXX.strains

This a multi-column TSV format. The first ID column links it with the strains in the other two files. The remainign columns can be used for colouring and ordering within the application.

ID ST Phenotype Country Colour
USA300 239 resistant US blue
TW20 2 suspectible UK green
JKD6159 239 resistant AU red

Viewing multiple pan genomes

The included example input files all start with the stem/prefix test. You can add as many pan-genomes to the fripan folder as you like, just give each of them a different stem, say mypop. Then you just append ?mypop to the URL, so it looks like http://example.com/~user/fripan/pan.html?mypop.

To simplify this, just add each stem to the file called pan.index. This will allow them to be selected via the Index menu item within the application.

Issues

Report feedback, suggestions and bugs on the Issues page

License

MIT

Source

Authors

About

Interactive, web tool for exploring pan-genome of bacterial strains

Resources

Stars

50 stars

Watchers

7 watching

Forks

Releases

Packages

Used by

Contributors

Languages