Commit f7b8dbb4 authored by Sascha Herzinger's avatar Sascha Herzinger

#24 (Nicer demo page)

parent 6c575e24
Pipeline #6104 passed with stages
in 38 minutes and 28 seconds
......@@ -2,7 +2,8 @@
<meta charset="UTF-8">
<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>
<body>
......@@ -43,29 +44,40 @@
to learn how these tools are used.
</p>
<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">
<select id="chart-select">
<option selected disabled>-- Select Chart --</option>
<option value="scatterplot">Scatterplot</option>
<option value="boxplot">Boxplot</option>
<option value="heatmap">Heatmap</option>
<option value="pca">PCA</option>
<option value="survivalplot">Survivalplot</option>
<option value="volcanoplot">Volcanoplot</option>
</select>
<input type="button" value="Add Chart" onclick="addChart()"/>
<label>
Zoom:
<input id="chart-size-range" type="range" min="10" max="100" value="30" oninput="setChartSize(this.value)"/>
</label>
<input type="button" onclick="loadData()" value="Prepare analysis cache"/>
<input type="button" onclick="deleteData()" value="Clear analysis cache"/>
<span class="headline">1. Select chart(s): </span>
<div class="chart-button-container">
<button class="custom-button" onclick="addChart(this.value)" value="scatterplot">Scatter Plot</button>
<button class="custom-button" onclick="addChart(this.value)" value="boxplot">Box Plot</button>
<button class="custom-button" onclick="addChart(this.value)" value="Survival Plot">Survival Plot</button>
<button class="custom-button" onclick="addChart(this.value)" value="pca">PCA</button>
<button class="custom-button" onclick="addChart(this.value)" value="Histogram">Histogram</button>
<button class="custom-button" onclick="addChart(this.value)" value="Heatmap">Heat Map</button>
<button class="custom-button" onclick="addChart(this.value)" value="volcanoplot">Volcano PLot</button>
<button class="delete-button" onclick="clearView()">Clear View</button>
</div>
<br/>
<span class="headline">2. Set zoom level: </span>
<div class="zoom-button-container">
<button class="custom-button" onclick="zoom(this.value)" value="10">10%</button>
<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 class="charts">
......@@ -79,7 +91,7 @@
const fjs = fractal.init({
handler: 'demo_tcga_coad',
dataSource: location.protocol + '//' + window.location.host,
fractalisNode: location.protocol + '//' + window.location.host,
fractalisNode: 'http://localhost:5000',
getAuth () {
return {token: ''}
},
......@@ -89,25 +101,29 @@
}
})
function deleteData () {
function clearView() {
fjs.removeAllCharts()
document.querySelector('.charts').innerHTML = ''
}
function clearCache() {
fjs.clearCache()
}
let chartSize = '30vw'
function setChartSize (value) {
chartSize = value + 'vw'
window.chartSize = '30vw'
function zoom (value) {
window.chartSize = value + 'vw'
Array.prototype.forEach.call(document.querySelectorAll('.charts > div'), chart => {
chart.style.height = chartSize
chart.style.width = chartSize
chart.style.height = window.chartSize
chart.style.width = window.chartSize
})
}
function addChart () {
const chart = document.querySelector('#chart-select').value
function addChart (chart) {
const container = document.querySelector('.charts')
const chartDiv = document.createElement('div')
chartDiv.style.width = chartSize
chartDiv.style.height = chartSize
chartDiv.style.width = window.chartSize
chartDiv.style.height = window.chartSize
container.appendChild(chartDiv)
chartDiv.id = `chart-${container.childNodes.length}`
fjs.setChart(chart, '#' + chartDiv.id)
......@@ -119,7 +135,6 @@
])
function loadData () {
deleteData()
fjs.loadData([
{
dataType: 'categorical',
......@@ -155,6 +170,15 @@
</script>
<style>
* {
font-family: 'Roboto', sans-serif;
}
.introduction {
width: 50%;
margin: auto;
}
.charts > div {
float: left;
}
......@@ -165,18 +189,71 @@
.do-table table, .do-table th, .do-table td {
border: 1px solid black;
padding: 4px;
}
.introduction {
width: 500px;
.controls .headline {
font-size: 1.25em;
}
.controls {
width: 200px;
.chart-button-container {
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>
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