From 5c05cb5e1fb59a4c986ed74e919d66fa76c2b4f5 Mon Sep 17 00:00:00 2001
From: Saul Rennison <saul.rennison@gmail.com>
Date: Tue, 23 Feb 2016 12:38:47 +0000
Subject: [PATCH] :sparkles: Merged heatmaps into timeline visualisation, added
 ability to filter all visualisations.

Closes #14, #13
---
 components/App.vue                        |   8 +-
 components/Canvas.vue                     |  34 ---
 components/EventFilterList.vue            |  89 ++++++++
 components/HeatmapGradientSelect.vue      |  47 ++++
 components/QueryForm.vue                  | 267 ----------------------
 components/RadioList.vue                  |  31 +++
 components/TimelineCanvas.vue             |   2 +-
 components/TimelineEventContinuous.vue    |  25 +-
 components/TimelineEventDiscontinuous.vue |  14 +-
 components/TimelineEventHeatmap.vue       | 133 +++++++++++
 components/TimelineEvents.vue             |   6 +
 components/TimelineVisualisation.vue      |  23 +-
 js/web/app.js                             |   7 +-
 js/web/overview-mesh.js                   |  28 +++
 14 files changed, 356 insertions(+), 358 deletions(-)
 delete mode 100644 components/Canvas.vue
 create mode 100644 components/EventFilterList.vue
 create mode 100644 components/HeatmapGradientSelect.vue
 delete mode 100644 components/QueryForm.vue
 create mode 100644 components/RadioList.vue
 create mode 100644 components/TimelineEventHeatmap.vue
 create mode 100644 js/web/overview-mesh.js

diff --git a/components/App.vue b/components/App.vue
index 0ccd8b5..32bb2e4 100644
--- a/components/App.vue
+++ b/components/App.vue
@@ -14,15 +14,11 @@
 		</div>
 
 		<ul class="nav nav-tabs" role="tablist">
-			<li><a href="#heatmap" data-toggle="tab">Heatmap</a></li>
-			<li class="active"><a href="#timeline" data-toggle="tab">Timeline</a></li>
+			<li class="active"><a href="#timeline" data-toggle="tab">Visualisation</a></li>
 		</ul>
 
 		<div class="tab-content">
-			<div role="tabpanel" class="tab-pane" id="heatmap">
-				<gv-heatmap-visualisation></gv-heatmap-visualisation>
-			</div>
-
+			<!-- TODO: add tabbing -->
 			<div role="tabpanel" class="tab-pane active" id="timeline">
 				<gv-timeline-visualisation></gv-timeline-visualisation>
 			</div>
diff --git a/components/Canvas.vue b/components/Canvas.vue
deleted file mode 100644
index 6877ae9..0000000
--- a/components/Canvas.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-	<canvas class="visualisation__canvas"></canvas>
-</template>
-
-<script type="text/babel">
-	export default {
-		props: ['heatmap', 'gradientPath'],
-		ready() {
-			this.heatmap = window.createWebGLHeatmap({
-				canvas: this.$el,
-				intensityToAlpha: true,
-				gradientTexture: 'img/gradients/plasma.png',
-				width: 1024,
-				height: 1024
-			});
-
-			this.$watch('gradientPath', () => {
-				let image = new Image();
-				image.onload = () => {
-					return this.heatmap.gradientTexture.bind().upload(image);
-				};
-				image.src = this.gradientPath;
-			});
-		}
-	}
-</script>
-
-<style lang="less" rel="stylesheet/less">
-	.visualisation__canvas {
-		position: absolute;
-		width: 100%;
-		height: 100%;
-	}
-</style>
diff --git a/components/EventFilterList.vue b/components/EventFilterList.vue
new file mode 100644
index 0000000..217d196
--- /dev/null
+++ b/components/EventFilterList.vue
@@ -0,0 +1,89 @@
+<template>
+	<label>{{all.length | pluralize 'Filter'}} ({{all.length}})</label>
+
+	<div class="form-group-flex form-group" v-for="filter in all" track-by="id">
+		<select class="form-control width--auto" v-model="filter.target">
+			<option value="_event">Event</option>
+			<option v-for="entity in event.entities" :value="entity" :selected="$index == 0">
+				{{entity | capitalize}}
+			</option>
+		</select>
+
+		<input type="text" class="form-control" v-model="filter.prop">
+
+		<select class="form-control width--auto" v-model="filter.comparator">
+			<option v-for="comparator in comparators" :value="comparator" :selected="$index == 0">
+				{{{ comparator.text }}}
+			</option>
+		</select>
+
+		<input type="text" class="form-control" v-model="filter.value">
+
+		<button type="button" class="btn btn-danger" @click="remove($index)">
+			<span class="glyphicon glyphicon-minus-sign"></span>
+		</button>
+	</div>
+
+	<div class="form-group clearfix">
+		<button type="button" class="btn btn-default pull-right" @click="add">
+			<span class="glyphicon glyphicon-filter"></span>
+		</button>
+	</div>
+</template>
+
+<script type="text/babel">
+	export default {
+		props: {
+			event: {
+				required: true
+			}
+		},
+		data() {
+			return {
+				atomicId: 0,
+				all: [],
+				comparators: [
+					{text: '=', sql: '=', cast: 'text'},
+					{text: '&ne;', sql: '!=', cast: 'text'},
+					{text: '&lt;', sql: '<', cast: 'int'},
+					{text: '&le;', sql: '<=', cast: 'int'},
+					{text: '&gt;', sql: '>', cast: 'int'},
+					{text: '&ge;', sql: '>=', cast: 'int'}
+				]
+			}
+		},
+		methods: {
+			add() {
+				this.all.push({
+					id: this.atomicId++,
+					target: null,
+					prop: '',
+					comparator: null,
+					value: ''
+				});
+			},
+			remove(index) {
+				this.all.splice(index, 1);
+			},
+			sql() {
+				return this.all.map(filter => {
+						if (filter.target === '_event') {
+							return `AND (events.data->>${db.escape(filter.prop)})::${filter.comparator.cast} ${filter.comparator.sql} ${db.escape(filter.value)}`;
+						}
+
+						return `AND ((
+              SELECT entity_props.value
+              FROM entity_props
+              WHERE entity_props.index = (events.entities->>${db.escape(filter.target)})::int
+              AND entity_props.tick <= events.tick
+              AND entity_props.prop = ${db.escape(filter.prop)}
+              AND entity_props.session_id = events.session_id
+              ORDER BY entity_props.tick DESC
+              LIMIT 1
+            )->>'value')::${filter.comparator.cast} ${filter.comparator.sql} ${db.escape(filter.value)}`;
+					})
+					.join('\n');
+			}
+		}
+	}
+</script>
diff --git a/components/HeatmapGradientSelect.vue b/components/HeatmapGradientSelect.vue
new file mode 100644
index 0000000..9f72e10
--- /dev/null
+++ b/components/HeatmapGradientSelect.vue
@@ -0,0 +1,47 @@
+<template>
+	<div class="form-group">
+		<label>Colour gradient</label>
+
+		<select class="form-control" v-model="selected" :disabled="all.length == 0">
+			<option v-for="gradient in all" value="{{ gradient.path }}">
+				{{ gradient.baseName | capitalize }}
+			</option>
+		</select>
+	</div>
+</template>
+
+<script type="text/babel">
+	const assert = window.require('assert');
+	const fs = window.require('fs');
+	const path = window.require('path');
+
+	// path to the gradient textures directory
+	const GRADIENT_BASE = 'img/gradients';
+
+	export default {
+		props: {
+			selected: {
+				required: true,
+				twoWay: true,
+			}
+		},
+		data() {
+			return {
+				all: []
+			}
+		},
+		ready() {
+			fs.readdir(GRADIENT_BASE, (err, files) => {
+				assert.ifError(err);
+
+				this.all = files.filter(name => !name.startsWith('.'))
+					.map(file => {
+						return {
+							path: path.join(GRADIENT_BASE, file),
+							baseName: path.parse(file).name
+						}
+					});
+			});
+		}
+	}
+</script>
diff --git a/components/QueryForm.vue b/components/QueryForm.vue
deleted file mode 100644
index 1bd5bc6..0000000
--- a/components/QueryForm.vue
+++ /dev/null
@@ -1,267 +0,0 @@
-<template>
-	<fieldset :disabled="!enabled">
-		<div class="form-group">
-			<label for="sessionId">Session</label>
-
-			<div class="input-group">
-				<select class="form-control" id="sessionId" v-model="selectedSession" :disabled="sessions.length == 0">
-					<option v-for="session in sessions" :value="session" :selected="$index == 0">
-						{{session.title}} [{{session.level}} on {{session.game}}]
-					</option>
-				</select>
-
-					<span class="input-group-btn">
-						<button class="btn btn-default" type="button" @click="refreshSessions">
-							<span class="glyphicon glyphicon-refresh"></span>
-						</button>
-					</span>
-			</div>
-		</div>
-
-		<div class="form-group">
-			<label>Colour gradient</label>
-
-			<select class="form-control" v-model="gradientPath" :disabled="gradientTextures.length == 0">
-				<option v-for="gradient in gradientTextures" value="{{ gradient.path }}">
-					{{ gradient.baseName | capitalize }}
-				</option>
-			</select>
-		</div>
-
-		<fieldset :disabled="selectedSession == null">
-			<div class="form-group">
-				<label for="eventName">Event</label>
-
-				<select class="form-control" id="eventName" v-model="selectedEvent" :disabled="events.length == 0">
-					<option v-for="event in events" :value="event">{{event.name}}</option>
-				</select>
-			</div>
-
-			<div class="form-group" v-if="selectedEvent">
-				<label>Plot</label>
-
-				<div class="radio" v-for="location in selectedEvent.locations">
-					<label>
-						<input type="radio" v-model="selectedLocation" :value="location" :checked="$index == 0">
-						{{location | capitalize}}
-					</label>
-				</div>
-			</div>
-		</fieldset>
-
-		<fieldset :disabled="selectedEvent == null">
-			<label>{{filters.length | pluralize 'Filter'}} ({{filters.length}})</label>
-
-			<div class="form-group-flex form-group" v-for="filter in filters" track-by="id">
-				<select class="form-control width--auto" v-model="filter.target">
-					<option value="_event">Event</option>
-					<option v-for="entity in selectedEvent.entities" :value="entity" :selected="$index == 0">
-						{{entity | capitalize}}
-					</option>
-				</select>
-
-				<input type="text" class="form-control" v-model="filter.prop">
-
-				<select class="form-control width--auto" v-model="filter.comparator">
-					<option v-for="comparator in comparators" :value="comparator" :selected="$index == 0">
-						{{{ comparator.text }}}
-					</option>
-				</select>
-
-				<input type="text" class="form-control" v-model="filter.value">
-
-				<button type="button" class="btn btn-danger" @click="removeFilter($index)">
-					<span class="glyphicon glyphicon-minus-sign"></span>
-				</button>
-			</div>
-
-			<div class="form-group clearfix">
-				<button type="button" class="btn btn-default pull-right" @click="addFilter">
-					<span class="glyphicon glyphicon-filter"></span>
-				</button>
-			</div>
-		</fieldset>
-	</fieldset>
-</template>
-
-<script type="text/babel">
-	const _ = window.require('lodash');
-	const db = window.db;
-	const models = window.models;
-
-	export default {
-		props: ['heatmap', 'enabled', 'gradientPath', 'gradientTextures', 'readyToVisualise'],
-		replace: false,
-		data() {
-			return {
-				selectedSession: null,
-				selectedEvent: null,
-				selectedLocation: null,
-				sessions: [],
-				filters: [],
-				events: [],
-				points: [],
-				comparators: [
-					{
-						text: '=',
-						sql: '=',
-						cast: 'text'
-					},
-					{
-						text: '&ne;',
-						sql: '!=',
-						cast: 'text'
-					},
-					{
-						text: '&lt;',
-						sql: '<',
-						cast: 'int'
-					},
-					{
-						text: '&le;',
-						sql: '<=',
-						cast: 'int'
-					},
-					{
-						text: '&gt;',
-						sql: '>',
-						cast: 'int'
-					},
-					{
-						text: '&ge;',
-						sql: '>=',
-						cast: 'int'
-					}
-				]
-			};
-		},
-		computed: {
-			readyToVisualise() {
-				return this.selectedSession && this.selectedEvent && this.selectedLocation && this.gradientPath;
-			}
-		},
-		ready() {
-			this.$watch('selectedSession', () => {
-				this.points = [];
-				this.events = [];
-
-				db.query(`SELECT DISTINCT ON (name) name, locations, entities
-FROM events
-WHERE events.session_id = :sessionId
-AND events.locations IS NOT NULL
-ORDER BY name`, {
-							type: db.QueryTypes.SELECT,
-							replacements: {sessionId: this.selectedSession.id}
-						})
-						.then(results => {
-							this.events = results.map(row => {
-								return {
-									name: row.name,
-									locations: _.keys(row.locations),
-									entities: _.keys(row.entities)
-								}
-							});
-
-							console.log('Got events:', this.events);
-						})
-						.catch(err => this.$dispatch('error', err));
-
-				this.$dispatch('updateBackdrop', this.selectedSession);
-			});
-
-			this.$watch('points', () => {
-				if (this.heatmap == null) {
-					console.warn('no heatmap to update');
-					return;
-				}
-				this.heatmap.clear();
-				this.heatmap.addPoints(this.points);
-			});
-
-			this.refreshSessions();
-		},
-		methods: {
-			refreshSessions() {
-				models.Session.findAll({
-							attributes: ['id', 'level', 'title', 'game'],
-							order: [['id', 'DESC']]
-						})
-						.then(sessions => {
-							this.sessions = sessions.map(x => _.toPlainObject(x.get({plain: true})));
-							console.log('Got sessions:', this.sessions);
-						})
-						.catch(err => this.$dispatch('error', err));
-			},
-			addFilter() {
-				this.filters.push({
-					id: Math.random(),
-					target: null,
-					prop: '',
-					comparator: null,
-					value: ''
-				});
-			},
-			removeFilter(index) {
-				this.filters.splice(index, 1);
-			},
-			getResults(intensity) {
-				let queryString = `SELECT *, (events.locations ->> :location) AS position
-          FROM events
-          WHERE events.name = :event
-          AND events.session_id = :sessionId
-          AND events.locations ? :location`;
-
-				this.filters.forEach(filter => {
-					if (filter.target === '_event') {
-						queryString += `\nAND (events.data->>${db.escape(filter.prop)})::${filter.comparator.cast} ${filter.comparator.sql} ${db.escape(filter.value)}`;
-					} else {
-						queryString += `\nAND ((
-              SELECT entity_props.value
-              FROM entity_props
-              WHERE entity_props.index = (events.entities->>${db.escape(filter.target)})::int
-              AND entity_props.tick <= events.tick
-              AND entity_props.prop = ${db.escape(filter.prop)}
-              AND entity_props.session_id = events.session_id
-              ORDER BY entity_props.tick DESC
-              LIMIT 1
-            )->>'value')::${filter.comparator.cast} ${filter.comparator.sql} ${db.escape(filter.value)}`;
-					}
-				});
-
-				console.log(' *** Query');
-
-				this.points = [];
-				console.time('query');
-
-				return db.query(queryString, {
-							type: db.QueryTypes.SELECT,
-							replacements: {
-								event: this.selectedEvent.name,
-								sessionId: this.selectedSession.id,
-								location: this.selectedLocation
-							}
-						})
-						.then(results => {
-							console.timeEnd('query');
-
-							console.log('Query returned %d rows', results.length);
-
-							let overviewData = require(`./overviews/${this.selectedSession.game}/${this.selectedSession.level}.json`);
-
-							console.time('render');
-
-							this.points = results.map(row => {
-								let position = JSON.parse(row.position);
-								let x = (position.x - overviewData.pos_x) / overviewData.scale;
-								let y = (overviewData.pos_y - position.y) / overviewData.scale;
-
-								return {x, y, scale: overviewData.scale, intensity};
-							});
-
-							console.timeEnd('render');
-						})
-						.catch(err => this.$dispatch('error', err));
-			},
-		}
-	}
-</script>
diff --git a/components/RadioList.vue b/components/RadioList.vue
new file mode 100644
index 0000000..e71d533
--- /dev/null
+++ b/components/RadioList.vue
@@ -0,0 +1,31 @@
+<template>
+	<div class="form-group">
+		<label>{{label}}</label>
+
+		<div class="radio" v-for="element in all">
+			<label>
+				<input type="radio" v-model="selected" :value="element" :checked="$index == 0">
+				{{element | capitalize}}
+			</label>
+		</div>
+	</div>
+</template>
+
+<script type="text/babel">
+	export default {
+		props: {
+			label: {
+				type: String,
+				required: true
+			},
+			all: {
+				type: Array,
+				required: true
+			},
+			selected: {
+				twoWay: true,
+				required: true
+			}
+		}
+	}
+</script>
diff --git a/components/TimelineCanvas.vue b/components/TimelineCanvas.vue
index d7ba06c..9fd5804 100644
--- a/components/TimelineCanvas.vue
+++ b/components/TimelineCanvas.vue
@@ -44,7 +44,7 @@
 			this.renderer.setSize(1024, 1024);
 			this.renderer.setPixelRatio(window.devicePixelRatio);
 
-			let camera = new THREE.OrthographicCamera(0, 1, 0, 1, -10000, 10000);
+			let camera = new THREE.OrthographicCamera(0, 1, 0, 1, -20000, 20000);
 			this.camera = camera;
 
 			let scene = new THREE.Scene();
diff --git a/components/TimelineEventContinuous.vue b/components/TimelineEventContinuous.vue
index c86ad14..0802f53 100644
--- a/components/TimelineEventContinuous.vue
+++ b/components/TimelineEventContinuous.vue
@@ -5,27 +5,11 @@
 		</label>
 	</div>
 
-	<div v-if="event" class="form-group">
-		<label>Plot</label>
-
-		<div class="radio" v-for="location in event.locations">
-			<label>
-				<input type="radio" v-model="selectedLocation" :value="location" :checked="$index == 0">
-				{{location | capitalize}}
-			</label>
-		</div>
-	</div>
+	<gv-radio-list v-if="event" label="Plot" :all="event.locations" :selected.sync="selectedLocation"></gv-radio-list>
 
-	<div v-if="event" class="form-group">
-		<label>Group by</label>
+	<gv-radio-list v-if="event" label="Group by" :all="event.entities" :selected.sync="groupByEntity"></gv-radio-list>
 
-		<div class="radio" v-for="entity in event.entities">
-			<label>
-				<input type="radio" v-model="groupByEntity" :value="entity" :checked="$index == 0">
-				{{entity | capitalize}}
-			</label>
-		</div>
-	</div>
+	<gv-event-filter-list v-ref:filters v-if="event" :event="event"></gv-event-filter-list>
 </template>
 
 <script type="text/babel">
@@ -65,6 +49,8 @@
 				this.sessionMaterials = [];
 			},
 			updateScene() {
+				this.clear();
+
 				for (let i = 0; i < this.points.length; ++i) {
 					let [session, entityPoints] = this.points[i];
 
@@ -143,6 +129,7 @@
           AND events.session_id IN (:sessionIds)
           AND events.locations ? :location
           AND events.entities ? :entity
+          ${this.$refs.filters.sql()}
           ORDER BY events.tick`;
 
 				console.time(`${this.event.name} continuous query`);
diff --git a/components/TimelineEventDiscontinuous.vue b/components/TimelineEventDiscontinuous.vue
index 4ff341b..4764656 100644
--- a/components/TimelineEventDiscontinuous.vue
+++ b/components/TimelineEventDiscontinuous.vue
@@ -5,19 +5,14 @@
 		</label>
 	</div>
 
-	<div v-if="event" class="form-group">
-		<div class="radio" v-for="location in event.locations">
-			<label>
-				<input type="radio" v-model="selectedLocation" :value="location" :checked="$index == 0">
-				{{location | capitalize}}
-			</label>
-		</div>
-	</div>
+	<gv-radio-list v-if="event" label="Plot" :all="event.locations" :selected.sync="selectedLocation"></gv-radio-list>
 
 	<div class="form-group form-group-flex">
 		<label>Icon</label>
 		<iconpicker :value.sync="iconClass" class="input-sm"></iconpicker>
 	</div>
+
+	<gv-event-filter-list v-ref:filters v-if="event" :event="event"></gv-event-filter-list>
 </template>
 
 <script type="text/babel">
@@ -140,7 +135,8 @@
           FROM events
           WHERE events.name = :event
           AND events.session_id IN (:sessionIds)
-          AND events.locations ? :location`;
+          AND events.locations ? :location
+          ${this.$refs.filters.sql()}`;
 
 				console.time(`${this.event.name} discontinuous query`);
 
diff --git a/components/TimelineEventHeatmap.vue b/components/TimelineEventHeatmap.vue
new file mode 100644
index 0000000..8f795a1
--- /dev/null
+++ b/components/TimelineEventHeatmap.vue
@@ -0,0 +1,133 @@
+<template>
+	<gv-heatmap-gradient-select :selected.sync="gradientPath"></gv-heatmap-gradient-select>
+
+	<gv-radio-list v-if="event" label="Plot" :all="event.locations" :selected.sync="selectedLocation"></gv-radio-list>
+
+	<div class="form-group">
+		<label for="intensity">Point intensity</label>
+		<input type="text" class="form-control" id="intensity" v-model="intensity">
+	</div>
+
+	<gv-event-filter-list v-ref:filters v-if="event" :event="event"></gv-event-filter-list>
+</template>
+
+<script type="text/babel">
+	const _ = window.require('lodash');
+	const THREE = window.require('three');
+	const OverviewMesh = require('js/web/overview-mesh');
+
+	export default {
+		replace: false,
+		props: ['event', 'all', 'available', 'sessions', 'scene'],
+		data() {
+			return {
+				selectedLocation: null,
+				points: [],
+				mesh: null,
+				heatmap: null,
+				intensity: 0.5,
+				gradientPath: 'img/gradients/plasma.png'
+			}
+		},
+		methods: {
+			updateAvailable() {
+				if (this.all) {
+					this.available = this.all.filter(e => e.locations.length > 0);
+				} else {
+					this.available = [];
+				}
+			},
+			clear() {
+				if (this.mesh) {
+					this.scene.remove(this.mesh);
+				}
+			},
+			updateScene(overviewData) {
+				this.clear();
+
+				let material = new THREE.MeshBasicMaterial({
+					map: new THREE.Texture(this.heatmap.canvas),
+					transparent: true
+				});
+				material.map.needsUpdate = true;
+
+				this.mesh = new OverviewMesh(overviewData, material);
+				this.scene.add(this.mesh);
+			}
+		},
+		events: {
+			updateFrame() {
+				this.heatmap.update();
+				this.heatmap.display();
+			},
+			visualise(e) {
+				let queryString = `SELECT *, (events.locations ->> :location) AS position
+          FROM events
+          WHERE events.name = :event
+          AND events.session_id IN (:sessionIds)
+          AND events.locations ? :location
+          ${this.$refs.filters.sql()}`;
+
+				console.time(`${this.event.name} heatmap query`);
+
+				return db.query(queryString, {
+						type: db.QueryTypes.SELECT,
+						replacements: {
+							event: this.event.name,
+							sessionIds: this.sessions.map(s => s.record.id),
+							location: this.selectedLocation
+						}
+					})
+					.then(results => {
+						console.timeEnd(`${this.event.name} heatmap query`);
+
+						console.time('heatmap first render');
+
+						this.points = results.map(row => {
+							let position = JSON.parse(row.position);
+
+							return {
+								x: (position.x - e.overviewData.pos_x) / e.overviewData.scale,
+								y: (e.overviewData.pos_y - position.y) / e.overviewData.scale,
+								scale: e.overviewData.scale,
+								intensity: this.intensity
+							};
+						});
+
+						console.timeEnd('heatmap first render');
+
+						this.updateScene(e.overviewData);
+					})
+					.catch(err => this.$dispatch('error', err));
+			}
+		},
+		ready() {
+			this.$watch('all', this.updateAvailable.bind(this));
+			this.updateAvailable();
+
+			this.heatmap = createWebGLHeatmap({
+				canvas: document.createElement('canvas'),
+				intensityToAlpha: true,
+				gradientTexture: this.gradientPath,
+				width: 1024,
+				height: 1024
+			});
+
+			this.$watch('gradientPath', () => {
+				let image = new Image();
+				image.onload = () => {
+					return this.heatmap.gradientTexture.bind().upload(image);
+				};
+				image.src = this.gradientPath;
+			});
+
+			this.$watch('points', () => {
+				this.heatmap.clear();
+				this.heatmap.addPoints(this.points);
+			});
+		},
+		detached() {
+			this.clear();
+		}
+	}
+</script>
diff --git a/components/TimelineEvents.vue b/components/TimelineEvents.vue
index 72092dc..334089f 100644
--- a/components/TimelineEvents.vue
+++ b/components/TimelineEvents.vue
@@ -27,6 +27,8 @@
 					 :available.sync="event.available"
 					 :sessions="sessions"
 					 :scene="scene"></div>
+
+			<hr>
 		</div>
 
 		<div class="form-group clearfix">
@@ -45,6 +47,10 @@
 		data() {
 			return {
 				types: [
+					{
+						name: 'heatmap',
+						component: 'gv-timeline-event-heatmap'
+					},
 					{
 						name: 'continuous',
 						component: 'gv-timeline-event-continuous'
diff --git a/components/TimelineVisualisation.vue b/components/TimelineVisualisation.vue
index e79950a..be44250 100644
--- a/components/TimelineVisualisation.vue
+++ b/components/TimelineVisualisation.vue
@@ -32,6 +32,7 @@
 <script type="text/babel">
 	const db = window.db;
 	const THREE = window.require('three');
+	const OverviewMesh = require('js/web/overview-mesh.js');
 
 	function tickToMsecs(tick) {
 		// TODO: replace 128 with actual tickrate!!
@@ -84,27 +85,11 @@
 				}
 
 				let loader = new THREE.TextureLoader();
-				let overviewTexture = loader.load(`overviews/${this.gameLevel.game}/${this.gameLevel.level}.png`);
 
+				let overviewTexture = loader.load(`overviews/${this.gameLevel.game}/${this.gameLevel.level}.png`);
 				let material = new THREE.MeshBasicMaterial({map: overviewTexture, depthWrite: false});
 
-				let geometry = new THREE.Geometry();
-				geometry.vertices.push(new THREE.Vector3(0, 0, 0));
-				geometry.vertices.push(new THREE.Vector3(1024, 0, 0));
-				geometry.vertices.push(new THREE.Vector3(0, -1024, 0));
-				geometry.vertices.push(new THREE.Vector3(1024, -1024, 0));
-				geometry.faces.push(new THREE.Face3(0, 2, 1));
-				geometry.faces.push(new THREE.Face3(2, 3, 1));
-				geometry.faceVertexUvs[0].push(
-					[new THREE.Vector2(0, 1), new THREE.Vector2(0, 0), new THREE.Vector2(1, 1)],
-					[new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1)]
-				);
-
-				let mesh = new THREE.Mesh(geometry, material);
-
-				this.overviewMesh = mesh;
-				this.overviewMesh.scale.set(this.overviewData.scale, this.overviewData.scale, 1);
-				this.overviewMesh.position.set(this.overviewData.pos_x, this.overviewData.pos_y, 0);
+				this.overviewMesh = new OverviewMesh(this.overviewData, material);
 				this.scene.add(this.overviewMesh);
 
 				this.camera.left = this.overviewData.pos_x;
@@ -164,7 +149,7 @@
 			},
 			visualise() {
 				this.visualiseTimeline();
-				this.$broadcast('visualise');
+				this.$broadcast('visualise', {overviewData: this.overviewData});
 
 				this.$refs.timeline.$on('moving', (item, cb) => {
 					item.session.tickRange = [item.start, item.end].map(msecsToTick);
diff --git a/js/web/app.js b/js/web/app.js
index 6341638..794d928 100644
--- a/js/web/app.js
+++ b/js/web/app.js
@@ -29,9 +29,8 @@
   Vue.config.debug = true;
   Vue.config.convertAllProperties = true;
 
-  Vue.component('gv-canvas', require('components/Canvas.vue'));
-  Vue.component('gv-query-form', require('components/QueryForm.vue'));
-  Vue.component('gv-heatmap-visualisation', require('components/HeatmapVisualisation.vue'));
+  Vue.component('gv-radio-list', require('components/RadioList.vue'));
+  Vue.component('gv-event-filter-list', require('components/EventFilterList.vue'));
   Vue.component('gv-game-level-select', require('components/GameLevelSelect.vue'));
   Vue.component('gv-session-select', require('components/SessionSelect.vue'));
   Vue.component('gv-timeline-visualisation', require('components/TimelineVisualisation.vue'));
@@ -40,6 +39,8 @@
   Vue.component('gv-timeline-event-continuous', require('components/TimelineEventContinuous.vue'));
   Vue.component('gv-timeline-event-discontinuous', require('components/TimelineEventDiscontinuous.vue'));
   Vue.component('gv-timeline-event-timeline', require('components/TimelineEventTimeline.vue'));
+  Vue.component('gv-timeline-event-heatmap', require('components/TimelineEventHeatmap.vue'));
+  Vue.component('gv-heatmap-gradient-select', require('components/HeatmapGradientSelect.vue'));
   Vue.component('gv-timeline', require('components/Timeline.vue'));
 
   Vue.component('iconpicker', require('components/Iconpicker.vue'));
diff --git a/js/web/overview-mesh.js b/js/web/overview-mesh.js
new file mode 100644
index 0000000..5fc98ae
--- /dev/null
+++ b/js/web/overview-mesh.js
@@ -0,0 +1,28 @@
+const THREE = window.require('three');
+
+class OverviewMesh extends THREE.Mesh {
+  constructor(overviewData, material) {
+    let geometry = new THREE.Geometry();
+
+    geometry.vertices.push(new THREE.Vector3(0, 0, 0));
+    geometry.vertices.push(new THREE.Vector3(1024, 0, 0));
+    geometry.vertices.push(new THREE.Vector3(0, -1024, 0));
+    geometry.vertices.push(new THREE.Vector3(1024, -1024, 0));
+
+    geometry.faces.push(new THREE.Face3(0, 2, 1));
+    geometry.faces.push(new THREE.Face3(2, 3, 1));
+
+    geometry.faceVertexUvs[0].push(
+      [new THREE.Vector2(0, 1), new THREE.Vector2(0, 0), new THREE.Vector2(1, 1)],
+      [new THREE.Vector2(0, 0), new THREE.Vector2(1, 0), new THREE.Vector2(1, 1)]
+    );
+
+    // construct the mesh using the new geometry
+    super(geometry, material);
+
+    this.scale.set(overviewData.scale, overviewData.scale, 1);
+    this.position.set(overviewData.pos_x, overviewData.pos_y, 0);
+  }
+}
+
+module.exports = OverviewMesh;