Commit f7b8dbb4 authored by Sascha Herzinger's avatar Sascha Herzinger
Browse files

#24 (Nicer demo page)

parent 6c575e24
Pipeline #6104 passed with stages
in 38 minutes and 28 seconds
...@@ -2,7 +2,8 @@ ...@@ -2,7 +2,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<head> <head>
<script src="fractal-1.0.0.min.js"></script> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script src="http://unpkg.com/fractalis"></script>
</head> </head>
<body> <body>
...@@ -43,29 +44,40 @@ ...@@ -43,29 +44,40 @@
to learn how these tools are used. to learn how these tools are used.
</p> </p>
<h2>To get started</h2> <h2>To get started</h2>
<p>
1. Add one or more charts you want to see from the --Select Chart-- field below.<br/>
2. You will see a control panel on the right without variables, because no data have been loaded yet.<br/>
3. Click the "Prepare analysis cache" button and wait for the variables become available.<br/>
4. Select parameters and variables to run an analysis.<br/>
</p>
<div class="controls"> <div class="controls">
<select id="chart-select"> <span class="headline">1. Select chart(s): </span>
<option selected disabled>-- Select Chart --</option> <div class="chart-button-container">
<option value="scatterplot">Scatterplot</option> <button class="custom-button" onclick="addChart(this.value)" value="scatterplot">Scatter Plot</button>
<option value="boxplot">Boxplot</option> <button class="custom-button" onclick="addChart(this.value)" value="boxplot">Box Plot</button>
<option value="heatmap">Heatmap</option> <button class="custom-button" onclick="addChart(this.value)" value="Survival Plot">Survival Plot</button>
<option value="pca">PCA</option> <button class="custom-button" onclick="addChart(this.value)" value="pca">PCA</button>
<option value="survivalplot">Survivalplot</option> <button class="custom-button" onclick="addChart(this.value)" value="Histogram">Histogram</button>
<option value="volcanoplot">Volcanoplot</option> <button class="custom-button" onclick="addChart(this.value)" value="Heatmap">Heat Map</button>
</select> <button class="custom-button" onclick="addChart(this.value)" value="volcanoplot">Volcano PLot</button>
<input type="button" value="Add Chart" onclick="addChart()"/> <button class="delete-button" onclick="clearView()">Clear View</button>
<label> </div>
Zoom: <br/>
<input id="chart-size-range" type="range" min="10" max="100" value="30" oninput="setChartSize(this.value)"/> <span class="headline">2. Set zoom level: </span>
</label> <div class="zoom-button-container">
<input type="button" onclick="loadData()" value="Prepare analysis cache"/> <button class="custom-button" onclick="zoom(this.value)" value="10">10%</button>
<input type="button" onclick="deleteData()" value="Clear analysis cache"/> <button class="custom-button" onclick="zoom(this.value)" value="20">20%</button>
<button class="custom-button" onclick="zoom(this.value)" value="30">30%</button>
<button class="custom-button" onclick="zoom(this.value)" value="40">40%</button>
<button class="custom-button" onclick="zoom(this.value)" value="50">50%</button>
<button class="custom-button" onclick="zoom(this.value)" value="60">60%</button>
<button class="custom-button" onclick="zoom(this.value)" value="70">70%</button>
<button class="custom-button" onclick="zoom(this.value)" value="80">80%</button>
<button class="custom-button" onclick="zoom(this.value)" value="90">90%</button>
<button class="custom-button" onclick="zoom(this.value)" value="100">100%</button>
</div>
<br/>
<span class="headline">3. Prepare cache</span>
<div class="cache-button-container">
<button class="custom-button" onclick="loadData()">Prepare Cache</button>
<button class="delete-button" onclick="clearCache()">Clear Cache</button>
</div>
<br/>
<span class="headline">4. Select variables in the control panel on the right -></span>
</div> </div>
</div> </div>
<div class="charts"> <div class="charts">
...@@ -79,7 +91,7 @@ ...@@ -79,7 +91,7 @@
const fjs = fractal.init({ const fjs = fractal.init({
handler: 'demo_tcga_coad', handler: 'demo_tcga_coad',
dataSource: location.protocol + '//' + window.location.host, dataSource: location.protocol + '//' + window.location.host,
fractalisNode: location.protocol + '//' + window.location.host, fractalisNode: 'http://localhost:5000',
getAuth () { getAuth () {
return {token: ''} return {token: ''}
}, },
...@@ -89,25 +101,29 @@ ...@@ -89,25 +101,29 @@
} }
}) })
function deleteData () { function clearView() {
fjs.removeAllCharts()
document.querySelector('.charts').innerHTML = ''
}
function clearCache() {
fjs.clearCache() fjs.clearCache()
} }
let chartSize = '30vw' window.chartSize = '30vw'
function setChartSize (value) { function zoom (value) {
chartSize = value + 'vw' window.chartSize = value + 'vw'
Array.prototype.forEach.call(document.querySelectorAll('.charts > div'), chart => { Array.prototype.forEach.call(document.querySelectorAll('.charts > div'), chart => {
chart.style.height = chartSize chart.style.height = window.chartSize
chart.style.width = chartSize chart.style.width = window.chartSize
}) })
} }
function addChart () { function addChart (chart) {
const chart = document.querySelector('#chart-select').value
const container = document.querySelector('.charts') const container = document.querySelector('.charts')
const chartDiv = document.createElement('div') const chartDiv = document.createElement('div')
chartDiv.style.width = chartSize chartDiv.style.width = window.chartSize
chartDiv.style.height = chartSize chartDiv.style.height = window.chartSize
container.appendChild(chartDiv) container.appendChild(chartDiv)
chartDiv.id = `chart-${container.childNodes.length}` chartDiv.id = `chart-${container.childNodes.length}`
fjs.setChart(chart, '#' + chartDiv.id) fjs.setChart(chart, '#' + chartDiv.id)
...@@ -119,7 +135,6 @@ ...@@ -119,7 +135,6 @@
]) ])
function loadData () { function loadData () {
deleteData()
fjs.loadData([ fjs.loadData([
{ {
dataType: 'categorical', dataType: 'categorical',
...@@ -155,6 +170,15 @@ ...@@ -155,6 +170,15 @@
</script> </script>
<style> <style>
* {
font-family: 'Roboto', sans-serif;
}
.introduction {
width: 50%;
margin: auto;
}
.charts > div { .charts > div {
float: left; float: left;
} }
...@@ -165,18 +189,71 @@ ...@@ -165,18 +189,71 @@
.do-table table, .do-table th, .do-table td { .do-table table, .do-table th, .do-table td {
border: 1px solid black; border: 1px solid black;
padding: 4px;
} }
.introduction { .controls .headline {
width: 500px; font-size: 1.25em;
} }
.controls { .chart-button-container {
width: 200px;
display: flex; display: flex;
flex-direction: column;
} }
.controls > * {
margin-bottom: 5px; .zoom-button-container {
display: flex;
}
.cache-button-container {
display: flex;
}
.delete-button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border-radius: 4px;
border: 1px solid #c0341d;
color: #fff;
background: #db3b21 none;
margin-left: 0.5vw;
}
.delete-button:hover {
border: 1px solid #a62d19;
color: #fff;
background: #c0341d none;
}
.custom-button {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
touch-action: manipulation;
cursor: pointer;
user-select: none;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
background: #fff none;
}
.custom-button:hover {
background: #ddd none;
} }
</style> </style>
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