Skip to content

GitLab

Commit dc53d79c authored by Jacek Lebioda's avatar Jacek Lebioda
Browse files

Merge branch '19-add-analytics-and-gdpr-information' into 'master' 

Resolve "Add analytics and gdpr information"

Closes #19

See merge request elixir/elixir-beacon!12
parents cfbd2145 32437cb6
Pipeline #29734 passed with stage
in 1 minute and 15 seconds
Expand all Hide whitespace changes
Inline Side-by-side
.gitignore
View file @ dc53d79c
......@@ -8,6 +8,8 @@ code/backend/beacon/templates/*.html
code/backend/beacon/static/*.html
code/frontend/build/*
code/frontend/node_modules/*
configuration/*.json
configuration/*.yaml
env/*
venv/*
code/frontend/css/lap.css 0 → 100644
View file @ dc53d79c
#lap-cookies-banner {
position: fixed;
bottom: 0;
background-color: #fff;
padding-top: 1em;
padding-bottom: 1em;
z-index: 1000;
left: 0;
text-align: center;
border-top: 1px solid #198cdc;
width: 100%;
display: none;
/* hidden by default */ }
#lap-cookies-banner .banner-intro {
width: 40%;
position: relative;
left: 30%;
text-align: left; }
#lap-cookies-banner .banner-img {
width: 50px;
position: absolute;
padding-top: 5px;
height: 50px; }
#lap-cookies-banner .banner-title {
font-size: 120%;
font-weight: bold;
text-align: left;
padding-left: 60px; }
#lap-cookies-banner .banner-text {
float: center;
min-height: 40px;
padding-left: 60px;
font-size: 80%;
text-align: left; }
#lap-cookies-banner .banner-buttons {
float: center;
padding-top: 5px;
height: 20px;
margin-bottom: 10px; }
#lap-cookies-banner .close-button {
position: absolute;
left: 100%; }
#lap-cookies-banner .banner-buttons .lap-accept,
#lap-cookies-banner .banner-buttons .lap-refuse,
#lap-cookies-banner .banner-buttons .lap-cookies-more,
#lap-cookies-banner .banner-buttons .btn.active {
border: 1px solid #198cdc;
font-weight: bold;
background-color: #198cdc;
color: #ffffff !important;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box; }
#lap-cookies-banner .banner-buttons .lap-accept:hover,
#lap-cookies-banner .banner-buttons .lap-refuse:hover,
#lap-cookies-banner .banner-buttons .lap-cookies-more:hover,
#lap-cookies-banner .banner-buttons .btn.selected {
background: white;
color: #198cdc !important;
border: 1px solid #198cdc;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
text-decoration: none; }
#lap-cookies-banner .btn {
text-decoration: none;
display: inline-block;
margin-bottom: 0;
text-align: center;
vertical-align: middle;
touch-action: manipulation;
background-image: none;
white-space: nowrap;
padding: 3px 10px;
font-size: 9pt;
line-height: 20px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer; }
#lap-cookies-banner .banner-checkboxes {
font-size: 80%;
margin-top: 1em; }
#lap-cookies-banner .checkbox-label {
margin-left: 0.3em;
margin-right: 1.5em;
top: -0.2em;
position: relative; }
@media (max-width: 500px) {
#lap-cookies-banner {
position: fixed;
bottom: 0;
background-color: #fff;
padding-top: 1em;
padding-bottom: 1em;
z-index: 1000;
left: 0;
text-align: center;
border-top: 1px solid #198cdc;
width: 100%;
display: none;
height: 280px;
overflow: auto;
/* hidden by default */ }
#lap-cookies-banner .banner-intro {
width: 60%;
position: relative;
left: 20%;
text-align: left; } }
@media (max-width: 1100px) {
#lap-cookies-banner .banner-intro {
width: 90%;
position: relative;
left: 5%;
text-align: left; }
#lap-cookies-banner .banner-buttons {
float: center;
padding-top: 5px;
height: 60px;
margin-bottom: 10px; } }
@media (max-width: 1600px) {
#lap-cookies-banner .banner-intro {
width: 60%;
position: relative;
left: 20%;
text-align: left; } }
/* ultra-wide screen */
@media (min-width: 2400px) {
#lap-cookies-banner .banner-intro {
position: relative;
text-align: left;
max-width: 800px;
left: 35%; } }
\ No newline at end of file
code/frontend/images/r3-logo.svg 0 → 100644
View file @ dc53d79c
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 74.49 61.04"><title>r3-logo</title><path d="M6.36,5.4H24.93c2.67,0,8.14,0,12,2.45a12.21,12.21,0,0,1,5.76,10.59A12.6,12.6,0,0,1,32.86,31c5,1.29,7.2,3.53,7.92,10C41.5,47.17,42,51.63,44,57.39H36.31c-1.15-3.45-1.87-9.79-2.37-13.75-.87-7.56-2.67-9.72-11.38-9.72H13.49V57.39H6.36Zm7,22.4H24.72c.79,0,4.9,0,6.84-1.15a7.39,7.39,0,0,0,3.53-6.77c0-8.43-7.49-8.43-10.37-8.43H13.34Z" style="fill:#00aae5"/><path d="M54.23,26.89c0,2.69,1.77,4.6,5.33,4.6,4.08,0,5.8-2.52,5.8-5a4.91,4.91,0,0,0-4.2-5,16.64,16.64,0,0,0-4-.21V18c2.9.25,7.77-.32,7.77-4.88,0-3.18-2.23-4.44-5.13-4.44-2.18,0-4.91.94-5.29,4.44H50.24c.26-7,7.06-7.7,9.41-7.7,6.34,0,9.48,3.71,9.48,7.62,0,2.32-1.3,5.66-5.79,6.63a6.67,6.67,0,0,1,6.21,6.84c0,3.95-3.31,8.31-10.07,8.31-3.06,0-6.13-.86-8-2.93a7.3,7.3,0,0,1-1.72-5Z" style="fill:#ee2e27"/></svg>
\ No newline at end of file
code/frontend/js/src_analytics.js 0 → 100644
View file @ dc53d79c
/* These are the settings used ELIXIR Luxembourg; we use Matomo in the analytics */
window.settings = {
expires: "180",
matomoURL: "https://analytics.lcsb.uni.lu/hub/",
siteID: "-1",
accept_all_text: "Aggregate statistics cookies accepted",
only_necessary_text: "Only necessary cookies accepted",
doNotTrack_text: "Do Not Track is enabled",
cookieName: "lap",
bots: /bot|crawler|spider|crawling/i,
timeout_hidebanner: "500",
cookieDomain: "*"
};
code/frontend/package-lock.json
View file @ dc53d79c
This diff is collapsed.
code/frontend/package.json
View file @ dc53d79c
{
"devDependencies": {
"gulp": "4.0.0",
"gulp-uglify": "3.0.1",
"gulp-concat": "2.6.1",
"gulp-clean-css": "4.0.0",
"gulp-inject": "5.0.2",
"merge-stream": "^1.0.1"
"gulp": "latest",
"gulp-watch": "latest",
"gulp-clean-css": "latest",
"gulp-concat": "latest",
"gulp-inject": "latest",
"gulp-uglify": "latest",
"merge-stream": "latest"
},
"name": "ELIXIR_LU_Beacon",
"version": "1.0.0",
......
code/frontend/templates/index.html
View file @ dc53d79c
......@@ -9,6 +9,22 @@
<title>ELIXIR Luxembourg Beacon</title>
<!-- inject:css -->
<!-- endinject -->
<script>
/* These are the settings used ELIXIR Luxembourg; we use Matomo in the analytics */
window.settings = {
expires: "180",
matomoURL: "https://analytics.lcsb.uni.lu/hub/",
siteID: "10",
accept_all_text: "Aggregate statistics cookies accepted",
only_necessary_text: "Only necessary cookies accepted",
doNotTrack_text: "Do Not Track is enabled",
cookieName: "lap",
bots: /bot|crawler|spider|crawling/i,
timeout_hidebanner: "500",
cookieDomain: "*"
};
</script>
</head>
<body data-query_url="{{ root }}/beacon/query" data-metadata_url="{{ root }}/beacon/">
<div class="container">
......@@ -79,8 +95,6 @@
<div class="col-md-6">
<select id="assemblyId" name="assemblyId" class="form-control">
<option value="GRCh37">GRCh37</option>
<!-- <option value="GRCh38">GRCh38</option>
<option value="NCBI36">NCBI36</option> -->
</select>
</div>
</div>
......@@ -235,11 +249,34 @@
<div class="row">
<footer class="footer">
<p>&copy; LCSB, 2018 - 2019; <span class="warning">By using this application, you agree to abandon any attempt to re-identify individuals represented in the query results.</span>
<p>&copy; LCSB, 2018 - 2020; <span class="warning">By using this application, you agree to abandon any attempt to re-identify individuals represented in the query results.</span>
</p>
<div id="lap-cookies-banner">
<div class="banner-intro">
<div class="close-button">
<a class="lap-refuse">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="banner-img">
<img src="{{ url_for('static', filename='r3-logo.svg') }}" type="image/svg+xml"/>
</div>
<div class="banner-title">This website needs some cookies and similar means to function.</div>
<div class="banner-text">If you permit us, we will use those means to collect data on your visits for aggregated
statistics to improve our service.
</div>
</div>
<div class="banner-buttons">
<a class="btn lap-accept">Accept cookies for aggregated statistics</a>
<a class="btn lap-refuse">No thanks, only technically necessary cookies</a>
<a class="btn lap-cookies-more" href="https://elixir-luxembourg.org/privacy/">More information</a>
</div>
</div>
<p>
This site uses cookies. The continued use of the website implies your agreement to this. <i>Terms and Conditions</i> will be available in <a href="https://elixir-luxembourg.org/sustainability-data">this document.</a>
This site uses cookies. If you are interested, please check our <a href="https://elixir-luxembourg.org/privacy/">our the privacy policy</a>.
</p>
</footer>
</div>
......
code/frontend/vendor/lap.js 0 → 100644
View file @ dc53d79c
var _paq = window._paq || _paq || [];
var settings = window.settings;
// convert days to milliseconds
settings.cookieTimeout = settings.expires * 86400 * 1000;
/*
* loadMatomo: load the tracking code of the analytics instance
*/
function loadMatomo() {
if (settings.siteID > 0) {
var u = settings.matomoURL;
_paq.push(['setSiteId', settings.siteID]);
_paq.push(['setTrackerUrl', u + 'matomo.php']);
_paq.push(['setDoNotTrack', 1]);
_paq.push(['trackPageView']);
_paq.push(['setIgnoreClasses', ['no-tracking', 'colorbox']]);
_paq.push(['enableLinkTracking']);
// set the cookie domain an
if (!(settings.cookieDomain === "*")) {
_paq.push(["setCookieDomain", settings.cookieDomain]);
}
var d = document,
g = d.createElement('script'),
s = d.getElementsByTagName('script')[0];
g.type = 'text/javascript';
g.defer = true;
g.async = true;
g.src = u + 'matomo.js';
s.parentNode.insertBefore(g, s);
setResultText(true);
}
}
/*
* setResultText: change the text in the footer
*/
function setResultText(acceptCookies) {
if (acceptCookies === true) {
$('#gdpr-result-text').html(settings.accept_all_text);
} else {
$('#gdpr-result-text').html(settings.only_necessary_text);
}
}
/*
* showBanner: show the banner
*/
function showBanner() {
var popup = $('#lap-cookies-banner');
popup.hide();
popup.slideDown('slow');
}
/*
* hideBanner: show the banner
*/
function hideBanner() {
var popup = $('#lap-cookies-banner');
setTimeout(function() {
popup.slideUp('slow');
}, settings.timeout_hidebanner);
}
/*
* clearCookies: clear all cookies
*/
function clearCookies() {
var originOfTime = new Date(0);
var commonSuffix = '; expires= ' + originOfTime + '; path=/;';
// set the cookie domain an
if (!(settings.cookieDomain === "*")) {
commonSuffix += 'domain=' + settings.cookieDomain;
}
// remove the analytics cookies
var cookies = document.cookie.split('; ');
for (var i in cookies) {
var name = cookies[i].split('=')[0];
if (name.startsWith('_pk_') || name.startsWith('MATOMO_SESSID')) {
document.cookie = name + '= ' + commonSuffix;
}
}
setResultText(false);
}
/*
* setCookie: create/update cookie
*/
function setCookie(name, value) {
var date = new Date();
date.setTime(date.getTime() + settings.cookieTimeout);
var commonSuffix = ';expires=' + date.toGMTString() + ';path=/';
// set the cookie domain an
if (!(settings.cookieDomain === "*")) {
commonSuffix += ';domain=' + settings.cookieDomain;
}
document.cookie = name + '=' + value + commonSuffix;
}
function isCookieSetTo(val) {
return document.cookie.indexOf(settings.cookieName + '=' + val) > -1;
}
/*
* hasConsent: check if user gave consent
*/
function hasConsent() {
if (isCookieSetTo(1)) {
setResultText(true);
return true;
} else if (isCookieSetTo(0)) {
setResultText(false);
return false;
}
return null;
}
/*
* accept: accept the cookies
*/
function accept() {
// action
loadMatomo();
// cookie management
setCookie(settings.cookieName, 1);
// feedback
setResultText(true);
// style
$('.lap-accept').addClass('selected');
$('.lap-refuse').removeClass('selected');
// hide banner
hideBanner();
}
/*
* accept: refuse the cookies
*/
function refuse(doNotTrack) {
// action
clearCookies();
// cookie management
// only set the refusal cookie if actually allowed (i.e. doNotTrack = false)
if (doNotTrack === false) {
setCookie(settings.cookieName, 0);
// feedback
setResultText(false);
// style
$('.lap-refuse').addClass('selected');
$('.lap-accept').removeClass('selected');
} else { //doNotTrack === true
if (settings.doNotTrack_text) {
doNotTrack_text = settings.doNotTrack_text;
} else {
doNotTrack_text = 'Do Not Track is enabled';
}
$('#doNotTrack-text').html(doNotTrack_text);
}
// hide banner
hideBanner();
}
/*
* main function
*/
$(document).ready(function () {
// accept
$('.lap-accept').click(function (e) {
e.preventDefault(true);
accept();
});
// refuse
$('.lap-refuse').click(function (e) {
e.preventDefault(true);
refuse(false);
});
// detect if the visitor is a bot or not
// prevent search engine t otake the cookie alert message as main content
var isBot = settings.bots.test(navigator.userAgent);
// check if DoNotTrack is active
var dnt = navigator.doNotTrack || navigator.msDoNotTrack || window.doNotTrack;
var isToTrack = (dnt !== null && dnt !== undefined) ? (dnt && dnt !== 'yes' && dnt !== 1 && dnt !== '1') : true;
var doNotTrack = false;
// do nothing if it is a bot or if DoNotTrack is active
if (isBot || !isToTrack || hasConsent() === false) {
doNotTrack = true;
if (hasConsent() === false) { // refusal has been given previously
refuse(false);
} else { // bot or DoNotTrack active
refuse(doNotTrack);
}
}
if (doNotTrack === false) {
if (hasConsent() === true) {
// user has already given consent to use cookies to tracking
accept();
} else if (hasConsent() === false || hasConsent() === null) {
// all other cases considered, show banner
showBanner();
}
}
});
readme.md
View file @ dc53d79c
......@@ -34,6 +34,9 @@ What is important, that under `redirect_uris` key, you should put your domain ap
Setting up proper HTTPS connection requires generating `nginx-selfsigned*` files and `dhparam.pem` (if you don't know how to do it, follow any nginx-related tutorial).
8. Use `docker-compose up --build -d` to run a daemon using docker. Consult `Dockerfile` and `docker-compose.yml` files.
## Analytics
We use Matomo in our applications, with aggregated users' information - no personal information is stored. By default, **it is turned off**. However, if you have Matomo instance running and would like to use it as well, just tune `code/frontend/templates/index.html` - in head section and in footer.
## References
* [API specification](https://github.com/ga4gh/beacon-team/blob/develop/src/main/resources/avro/beacon.avdl)
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment