Add example of select-region event

VALIS-software · Mar 11, 2020 · 2bc9020 · 2bc9020
1 parent e0f5475
commit 2bc9020
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 16 deletions.
diff --git a/examples/bigbed/index.html b/examples/bigbed/index.html
@@ -30,28 +30,28 @@
             {
                 name: 'bigBed',
                 type: 'annotation',
-                path: './example-files/wgEncodeDukeAffyExon8988tSimpleSignalRep1V2.bigBed',
+                path: '../example-files/wgEncodeDukeAffyExon8988tSimpleSignalRep1V2.bigBed',
             },
             /**
             {
                 name: 'NarrowPeak',
                 type: 'annotation',
-                path: './example-files/narrowpeak.bigBed',
+                path: '../example-files/narrowpeak.bigBed',
                 heightPx: 60,
             },
             /**/
             /**
             {
                 name: 'BroadPeak',
                 type: 'annotation',
-                path: './example-files/broadpeak.bigBed',
+                path: '../example-files/broadpeak.bigBed',
                 heightPx: 60,
             },
             /**
             {
                 name: 'IDR Peaks',
                 type: 'annotation',
-                path: './example-files/GSE105392_ENCFF119SYV_optimal_idr_thresholded_peaks_hg19.bigBed',
+                path: '../example-files/GSE105392_ENCFF119SYV_optimal_idr_thresholded_peaks_hg19.bigBed',
                 heightPx: 60,
             },
             /**/

diff --git a/examples/clickable-annotations/index.html b/examples/clickable-annotations/index.html
@@ -64,6 +64,12 @@
 	</head>
 	<body>
 		<div id="container"></div>
+
+		<div class="log-container">
+			<div id="log">
+				<div class="entry" style="text-align: center; color: grey">Click on annotations</div>
+			</div>
+		</div>
 
 		<script src="../../dist/valis-hpgv.js"></script>
 
@@ -77,11 +83,21 @@
 						x1: 89274809,
 					}
 				}],
-				tracks: []
+				tracks: [
+					{
+						name: 'bigBed',
+						type: 'annotation',
+						path: '../example-files/wgEncodeDukeAffyExon8988tSimpleSignalRep1V2.bigBed',
+					},
+				]
 			});
-			visualizer.setDataSource('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.vdna-dir/manifest.json');
-			visualizer.addTrackFromFilePath('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.vdna-dir', 'DNA', false);
-			visualizer.addTrackFromFilePath('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.92.vgenes-dir', 'Annotation', false);
+
+			// this server is no longer active:
+			// visualizer.setDataSource('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.vdna-dir/manifest.json');
+			// visualizer.addTrackFromFilePath('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.vdna-dir', 'DNA', false);
+			// visualizer.addTrackFromFilePath('https://s3-us-west-1.amazonaws.com/valis-file-storage/genome-data/GRCh38.92.vgenes-dir', 'Annotation', false);
+
+			let logElement = document.querySelector('#log');
 
 			visualizer.addEventListener('annotation-clicked', (e) => {
 				// e.type is the event type string, in this case it is 'annotation-clicked'
@@ -97,8 +113,6 @@
 
 				console.log('Annotation clicked event', e, 'feature:', feature, 'in gene', gene);
 
-				let logElement = document.querySelector('#log');
-
 				let logHTML = `
 				<div class="entry">
 					<span class="arg component">${feature.soClass}</span>
@@ -111,16 +125,24 @@
 				logElement.innerHTML = logHTML + logElement.innerHTML;
 			});
 
+			visualizer.addEventListener('select-region', (e) => {
+				console.log('select-region', e);
+
+				e.preventDefault(); // prevent default zoom-in behavior
+
+				let logHTML = `
+				<div class="entry">
+					Select Region: <span class="arg component">${e.x0} - ${e.x1}</span>
+				</div>
+				`;
+
+				logElement.innerHTML = logHTML + logElement.innerHTML;
+			});
+
 			let container = document.getElementById('container');
 
 			visualizer.render({ width: 800, height: 250 }, container);
 		</script>
 
-		<div class="log-container">
-			<div id="log">
-				<div class="entry" style="text-align: center; color: grey">Click on annotations</div>
-			</div>
-		</div>
-
 	</body>
 </html>
diff --git a/...optimal_idr_thresholded_peaks_hg19.bigBed → ...optimal_idr_thresholded_peaks_hg19.bigBed b/...optimal_idr_thresholded_peaks_hg19.bigBed → ...optimal_idr_thresholded_peaks_hg19.bigBed
diff --git a/...les/bigbed/example-files/broadpeak.bigBed → examples/example-files/broadpeak.bigBed b/...les/bigbed/example-files/broadpeak.bigBed → examples/example-files/broadpeak.bigBed
diff --git a/...es/bigbed/example-files/narrowpeak.bigBed → examples/example-files/narrowpeak.bigBed b/...es/bigbed/example-files/narrowpeak.bigBed → examples/example-files/narrowpeak.bigBed
diff --git a/...ukeAffyExon8988tSimpleSignalRep1V2.bigBed → ...ukeAffyExon8988tSimpleSignalRep1V2.bigBed b/...ukeAffyExon8988tSimpleSignalRep1V2.bigBed → ...ukeAffyExon8988tSimpleSignalRep1V2.bigBed