From 813cae86d11ba1532cb58780706beededa326407 Mon Sep 17 00:00:00 2001
From: George Corney <haxiomic@gmail.com>
Date: Tue, 30 Jun 2020 20:25:56 +0100
Subject: [PATCH] Add example with `reorderTracks: true`

---
 examples/reorder-buttons/index.html | 67 +++++++++++++++++++++++++++++
 1 file changed, 67 insertions(+)
 create mode 100644 examples/reorder-buttons/index.html

diff --git a/examples/reorder-buttons/index.html b/examples/reorder-buttons/index.html
new file mode 100644
index 00000000..0ef41193
--- /dev/null
+++ b/examples/reorder-buttons/index.html
@@ -0,0 +1,67 @@
+<style>
+    body {
+        margin: 0;
+    }
+</style>
+
+<div id="container"></div>
+
+<script src="../../dist/valis-hpgv.js"></script>
+
+<script>
+    let config = {
+        allowNewPanels: false,
+        clampToTracks: true,
+        removableTracks: true,
+        reorderTracks: true,
+        panels: [
+            {
+               location: { contig: 'chr1', x0: 0, x1: 249e6 }
+            }
+        ],
+        tracks: [
+            {
+                name: 'Cerebellum, DNase',
+                type: 'signal',
+                path: "https://www.encodeproject.org/files/ENCFF833POA/@@download/ENCFF833POA.bigWig",
+                heightPx: 150,
+            },
+            {
+                name: 'Unknown Signal',
+                type: 'signal',
+                path: "https://www.encodeproject.org/files/ENCFF677VKI/@@download/ENCFF677VKI.bigWig",
+                heightPx: 150,
+            },
+            {
+                name: 'Third Signal',
+                type: 'signal',
+                path: "https://www.encodeproject.org/files/ENCFF677VKI/@@download/ENCFF677VKI.bigWig",
+                heightPx: 150,
+            },
+        ],
+    };
+
+    // get state from URL
+    if (window.location.hash) {
+        config = JSON.parse(decodeURIComponent(window.location.hash.substr(1)));
+    }
+
+    let visualizer = new GenomeVisualizer(config);
+
+    let container = document.getElementById('container');
+
+    window.addEventListener('resize', update);
+
+    function update() {
+        visualizer.render({
+            width: window.innerWidth,
+            height: window.innerHeight
+        }, container);
+    }
+
+    function saveStateInURL() {
+        window.history.replaceState(null, null, '#' + JSON.stringify(visualizer.getConfiguration()));
+    }
+
+    update();
+</script>
\ No newline at end of file