{% extends '../base.html' %}

{% block extra-head %}
{{ block.super }}
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/themes/prism.min.css">
{% endblock %}

<!--  IMPORTANT NOTE WHEN ADDING NEW CONTENT: every <h2> <h3> or <h4> element WITH AN ID
WILL BE SHOWN IN THE TABLE OF CONTENT <DIV> (for details, see script at the bottom of the page) -->


{% block page-content %}
<div class='d-flex flex-row' style='flex: 1 1 auto;overflow-y:auto;'>
	<div id='toc' class='shadow px-2 pt-3' style='overflow-y:auto;z-index:10'></div>
	<div class='px-5 pt-3 bg-white' style='flex: 1 1 auto;overflow-x:auto;text-align:justify'>
		<div style='margin:0 auto;max-width:45em'>  <!-- margin:0 auto centers div horizontally -->
			<h1>eGSIM API</h1>
			{% if last_modified %}
			<p style='font-size:50%;text-align:right;'>Last modified: June 2019</p>
			{% endif %}
			<p>
			eGSIM is a web service implemented on top of
			<a target="_blank" href="https://github.com/gem/oq-engine/#openquake-engine">OpenQuake</a>
			for the analysis of strong Motions and interpretation of Ground Shaking Intensity Models (GSIM)
			</p>

			<p>
			In a nutshell, a web service is a program running on a remote computer that processes
			users <i>requests</i>, configurable with request parameters, and returns
			the analysis results in form of <i>response</i> through the internet network.

			The advantages of using a web service instead of software libraries are manifold:
			</p>
			<ul>
				<li> Free the user from local software maintenance (e.g. installation, update)</li>
				<li> Perform the same analysis with less code required and no knowledge of the
					underlying software libraries, functions and signatures</li>
				<li> Allow access to the data from anywhere through the internet</li>
			</ul>
			<p class="small">
			(By the way eGSIM is also a software library - re-using legacy code of a OpenQuake-based
			Python package, <a href="https://github.com/GEMScienceTools/gmpe-smtk" target="_blank">SMTK</a>
			that can be installed locally)
			</p>

			<p>
			This portal represents an example of accessing the web service through a so-called
			browser Graphical User Interface (GUI): HTML forms and controls (e.g., buttons)
			provide an easy way to configure and submit requests, that are then processed
			and visualized in form of plots and tables on the browser.
			</p>
			<p>
			Nevertheless, user can access the service also through client software code,
			e.g. Python notebook running on the user computer. This usage is more indicated
			when human interaction through
			the web page controls is unfeasible or inefficient, e.g. when the service is
			accessed routinely or automatically (e.g., from a data center operation),
			or used in custom code not only for visualization purposes (e.g.,
			as input for further processing).
			</p>
			<p>
			In the following, we will describe basic concept of eGSIM
			for usage in custom code, digging into more details of the underlying
			server-side
			<a target='_blank' href='https://en.wikipedia.org/wiki/Web_API'>web API</a>
			
			
			<h2 id="generalfeatures">Introduction</h2>
			{% include "./intro.html" %}
			
			<h2 id="trellisplots">{{ egsim_data.TRELLIS.title }}</h2>
			{% include "./trellis.html" with data=egsim_data.TRELLIS %}
			
			
			<h2 id="residualanalysis">{{ egsim_data.RESIDUALS.title }}</h2>
			{% include "./residuals.html" with data=egsim_data.RESIDUALS %}
		
		
			<h2 id="testing">{{ egsim_data.TESTING.title }}</h2>
			{% include "./testing.html" with data=egsim_data.TESTING %}

		</div>	
	</div>
</div>
{% endblock %}

{% block after-body %}
{{ block.super }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-python.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-json.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/components/prism-yaml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/plugins/data-uri-highlight/prism-data-uri-highlight.min.js"></script>
<script type='text/javascript'>
// Custom js. Just include the few lines here avoiding external javascript loading

// 1] TOC and Hyperlinks: Loop thorugh all Headers "H*" with id assigned and:
//    1a] create the hyperlink next to them,
// 	  1b] Add an anchor (a.menu-item) in the Table of Content (TOC): clicking on the anchor scrolls
// 	      the relative Header to visible
var tocItemsHTML = [];
var selectedHs = 'h2[id], h3[id], h4[id]';
document.querySelectorAll(selectedHs).forEach((elm, index) => {
    var id = elm.getAttribute('id');
    var text = elm.innerText;
    var newText = `${text} <a style='display:none' class="headerlink" href="#${id}" title="Permalink to this headline">&#182;</a>`;
	elm.innerHTML = newText;
	// add mouseenter mouseleave. Note mouseout! see here:
	// https://javascript.info/mousemove-mouseover-mouseout-mouseenter-mouseleave#extra-mouseout-when-leaving-for-a-child
	elm.onmouseenter = mouseevent => {
	    var target = mouseevent.target;
	    target.children[target.childElementCount-1].style.display = '';
	};
	elm.onmouseleave = mouseevent => {
	    var target = mouseevent.target;
	    target.children[target.childElementCount-1].style.display = 'none';
	};
	tocItemsHTML.push(`<a class="d-block rounded py-1 menu-item ref-${elm.tagName.toLowerCase()}" data-ref="${id}" href="#${id}">${text}</a>`);
});
document.querySelector('#toc').innerHTML = `${tocItemsHTML.join('\n')}`;

// 2] listen for page scroll changes (https://stackoverflow.com/a/7557433):
// 2a] Create a function that tells us if an element is visible (in the viewport)
function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && 
        rect.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
}

// 2b] Create a function that checks which element is visible among our Headers defined above
// This function will be called on window scroll, resize etcetera (see below)
function getHVisible(e){  // (e is the event, not used)
    var visElm = null;
    for (var elm of Array.from(document.querySelectorAll(selectedHs))){
        if (isElementInViewport(elm)){
            visElm = elm;
            break;
        }
    }
    if (!visElm){
        return;
    }
    var refAnchors = document.querySelector('#toc').querySelectorAll('a[data-ref]');
    refAnchors.forEach(anchor => {
       var active = anchor.getAttribute('data-ref') === visElm.getAttribute('id');
       if (active){
           anchor.classList.add('active');
       }else{
           anchor.classList.remove('active');   
       }
    });
}

// 2c] Attach the function above to several window events
//     Note that 'scroll' and 'resize' need the third argument as true to work
//     (see https://stackoverflow.com/a/30723677):
addEventListener('DOMContentLoaded', getHVisible, false); 
addEventListener('load', getHVisible, false);
addEventListener('scroll', getHVisible, true); 
addEventListener('resize', getHVisible, true);
</script>

{% endblock %}