auspice
Version:
Web app for visualizing pathogen evolution
93 lines (86 loc) • 10.9 kB
HTML
<html lang="en"><head><meta charSet="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><title>Injecting custom components · Auspice</title><meta name="viewport" content="width=device-width"/><meta name="generator" content="Docusaurus"/><meta name="description" content="<blockquote>
<p>These interfaces are very experimental and will change frequently.</p>
</blockquote>
"/><meta name="docsearch:language" content="en"/><meta property="og:title" content="Injecting custom components · Auspice"/><meta property="og:type" content="website"/><meta property="og:url" content="https://nextstrain.github.io/auspice/"/><meta property="og:description" content="<blockquote>
<p>These interfaces are very experimental and will change frequently.</p>
</blockquote>
"/><meta property="og:image" content="https://nextstrain.github.io/auspice/img/icon.svg"/><meta name="twitter:card" content="summary"/><meta name="twitter:image" content="https://nextstrain.github.io/auspice/img/icon.svg"/><link rel="shortcut icon" href="/auspice/img/favicon.ico"/><link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/solarized-dark.min.css"/><script type="text/javascript" src="https://buttons.github.io/buttons.js"></script><link rel="stylesheet" href="/auspice/css/main.css"/><script src="/auspice/js/codetabs.js"></script></head><body class="sideNavVisible separateOnPageNav"><div class="fixedHeaderContainer"><div class="headerWrapper wrapper"><header><a href="/auspice/"><img class="logo" src="/auspice/img/logo-light.svg" alt="Auspice"/><h2 class="headerTitleWithLogo">Auspice</h2></a><div class="navigationWrapper navigationSlider"><nav class="slidingNav"><ul class="nav-site nav-site-internal"><li class="siteNavGroupActive"><a href="/auspice/overview" target="_self">Docs</a></li></ul></nav></div></header></div></div><div class="navPusher"><div class="docMainWrapper wrapper"><div class="container docsNavContainer" id="docsNav"><nav class="toc"><div class="toggleNav"><section class="navWrapper wrapper"><div class="navBreadcrumb wrapper"><div class="navToggle" id="navToggler"><i></i></div><h2><i>›</i><span>Customisations</span></h2><div class="tocToggler" id="tocToggler"><i class="icon-toc"></i></div></div><div class="navGroups"><div class="navGroup"><h3 class="navGroupCategoryTitle">Introduction</h3><ul class=""><li class="navListItem"><a class="navItem" href="/auspice/overview">Overview</a></li><li class="navListItem"><a class="navItem" href="/auspice/installation">Installing auspice</a></li><li class="navListItem"><a class="navItem" href="/auspice/inputs">Input file formats</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Customisations</h3><ul class=""><li class="navListItem"><a class="navItem" href="/auspice/customisations/introduction">Extending Auspice</a></li><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Customising the Client</h4><ul><li class="navListItem navListItemActive"><a class="navItem" href="/auspice/customisations/client/componentInterfaces">Injecting custom components</a></li><li class="navListItem"><a class="navItem" href="/auspice/customisations/client/sidebarTheme">Sidebar theming</a></li></ul></div><div class="navGroup subNavGroup"><h4 class="navGroupSubcategoryTitle">Customising the Server</h4><ul><li class="navListItem"><a class="navItem" href="/auspice/customisations/server/charonAPI">Auspice Server API</a></li><li class="navListItem"><a class="navItem" href="/auspice/customisations/server/serverless">Deploying auspice without a server</a></li></ul></div><li class="navListItem"><a class="navItem" href="/auspice/customisations/authentication">Authentication</a></li></ul></div><div class="navGroup"><h3 class="navGroupCategoryTitle">Tutorial</h3><ul class=""><li class="navListItem"><a class="navItem" href="/auspice/tutorial/overview">Auspice functionality</a></li></ul></div></div></section></div><script>
var coll = document.getElementsByClassName('collapsible');
var checkActiveCategory = true;
for (var i = 0; i < coll.length; i++) {
var links = coll[i].nextElementSibling.getElementsByTagName('*');
if (checkActiveCategory){
for (var j = 0; j < links.length; j++) {
if (links[j].classList.contains('navListItemActive')){
coll[i].nextElementSibling.classList.toggle('hide');
coll[i].childNodes[1].classList.toggle('rotate');
checkActiveCategory = false;
break;
}
}
}
coll[i].addEventListener('click', function() {
var arrow = this.childNodes[1];
arrow.classList.toggle('rotate');
var content = this.nextElementSibling;
content.classList.toggle('hide');
});
}
document.addEventListener('DOMContentLoaded', function() {
createToggler('#navToggler', '#docsNav', 'docsSliderActive');
createToggler('#tocToggler', 'body', 'tocActive');
const headings = document.querySelector('.toc-headings');
headings && headings.addEventListener('click', function(event) {
if (event.target.tagName === 'A') {
document.body.classList.remove('tocActive');
}
}, false);
function createToggler(togglerSelector, targetSelector, className) {
var toggler = document.querySelector(togglerSelector);
var target = document.querySelector(targetSelector);
if (!toggler) {
return;
}
toggler.onclick = function(event) {
event.preventDefault();
target.classList.toggle(className);
};
}
});
</script></nav></div><div class="container mainContainer"><div class="wrapper"><div class="post"><header class="postHeader"><h1 class="postHeaderTitle">Injecting custom components</h1></header><article><div><span><blockquote>
<p>These interfaces are very experimental and will change frequently.
Documentation is somewhat incomplete.
Please contact us (links at the bottom of the page) if you are using these customisations as we would like to develop them in a collaborative fashion.</p>
</blockquote>
<p>One way to extend auspice is by replacing react components with your own custom components.
These custom components will receive props defined here, which can be used to update the rendering of the component using the normal react lifecycle methods.
Right now this is only available for the splash page and nav-bar components, whose interfaces are defined here.</p>
<p>Each component must be the default export of a javascript file which is specified in the (client) config JSON passed to auspice at build time (<code>auspice build</code> or <code>auspice develop</code>).</p>
<h2><a class="anchor" aria-hidden="true" id="splash-component"></a><a href="#splash-component" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Splash component</h2>
<p>Build config property:</p>
<pre><code class="hljs css language-json">{
<span class="hljs-attr">"splashComponent"</span>: <span class="hljs-string">"<javascript file>"</span>
}
</code></pre>
<p>Available Props:</p>
<ul>
<li><code>isMobile</code> boolean</li>
<li><code>available</code> available datasets and narratives</li>
<li><code>browserDimensions</code> broswer width & height</li>
<li><code>dispatch</code> callback</li>
<li><code>errorMessage</code> callback</li>
<li><code>changePage</code> callback</li>
</ul>
<h2><a class="anchor" aria-hidden="true" id="nav-bar-component"></a><a href="#nav-bar-component" aria-hidden="true" class="hash-link"><svg class="hash-link-icon" aria-hidden="true" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path></svg></a>Nav-bar component</h2>
<p>Build config property:</p>
<pre><code class="hljs css language-json">{
<span class="hljs-attr">"navbarComponent"</span>: <span class="hljs-string">"<javascript file>"</span>
}
</code></pre>
<p>Available props:</p>
<ul>
<li><code>narrativeTitle</code> string</li>
<li><code>sidebar</code> boolean. Is it to be displayed in the sidebar?</li>
</ul>
<p>The navbar also receives the (possibly customised) sidebar theme which can be used to style components.</p>
</span></div></article></div><div class="docLastUpdate"><em>Last updated on 1/15/2019</em></div><div class="docs-prevnext"><a class="docs-prev button" href="/auspice/customisations/introduction"><span class="arrow-prev">← </span><span>Extending Auspice</span></a><a class="docs-next button" href="/auspice/customisations/client/sidebarTheme"><span>Sidebar theming</span><span class="arrow-next"> →</span></a></div></div></div><nav class="onPageNav"><ul class="toc-headings"><li><a href="#splash-component">Splash component</a></li><li><a href="#nav-bar-component">Nav-bar component</a></li></ul></nav></div><footer class="nav-footer" id="footer"><section class="sitemap"><div><img src="/auspice/img/logo-light.svg" alt="Auspice" width="66" height="58"/></div><div><h5>Docs</h5><a href="/auspice/">Splash Page</a><a href="/auspice/overview">Overview</a></div><div><h5>Links</h5><a href="https://github.com/nextstrain/auspice">GitHub</a><a href="https://www.npmjs.com/package/auspice">NPM</a><a href="https://nextstrain.org">Nextstrain</a></div><div><h5>Contact</h5><a href="mailto:hello@nextstrain.org">email</a><a href="https://twitter.com/hamesjadfield">twitter</a></div></section><section class="copyright">If you use auspice, please cite <a href="https://doi.org/10.1093/bioinformatics/bty407">Hadfield et al., 2018</a></section><section class="copyright">Copyright © 2014-2019 Richard Neher & Trevor Bedford</section></footer></div></body></html>