-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
116 lines (101 loc) · 7.12 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!--
Copyright [2009-2017] EMBL-European Bioinformatics Institute
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<!--
We need to set base tag for document to deal with github pages
url, which is normally:
https://rnacentral.github.io/angularjs-genoverse/
while our local url is like:
http://localhost:8000/
Also, Angular's $location in HTML5 mode requires <base> tag set.
-->
<script type="text/javascript">
document.write("<base href='" + document.URL + "' />");
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>
AngularJS - Genoverse directive
</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="lib/Genoverse/css/genoverse.css">
<link rel="stylesheet" href="lib/Genoverse/css/controlPanel.css">
<link rel="stylesheet" href="lib/Genoverse/css/fileDrop.css">
<link rel="stylesheet" href="lib/Genoverse/css/karyotype.css">
<link rel="stylesheet" href="lib/Genoverse/css/resizer.css">
<link rel="stylesheet" href="lib/Genoverse/css/trackControls.css">
<link rel="stylesheet" href="lib/Genoverse/css/tooltips.css">
</head>
<body ng-app="Example">
<div ng-controller="GenoverseGenomeBrowser" class="container">
<div class="row">
<div class="col-md-12" role="main">
<h1><i class="fa fa-map-marker"></i> Genome browser</h1>
<p class="text-muted col-md-12">
<i class="fa fa-info-circle"></i> Explore sequences
alongside genes and transcripts from <a href="http://ensembl.org" class="text-muted">Ensembl</a>
/ <a href="http://ensemblgenomes.org/" class="text-muted">Ensembl Genomes</a>
</p>
<div class="row" style="padding-left: 15px;">
<div class="col-lg-3 col-md-3 col-sm-12">
<label for="genomic-species-select">Species</label>
<select id="genomic-species-select" class="form-control" ng-options="genome as (genome | urldecodeSpecies) for genome in genomeNames" ng-model="genome">
</select>
</div>
<div class="ol-lg-2 col-md-2 col-sm-4">
<label for="chromosome-input">Chromosome</label>
<input type="text" class="form-control" id="chromosome-input" placeholder="Enter chromosome" ng-model="chromosome">
</div>
<div class="col-lg-2 col-md-2 col-sm-4">
<label for="genomic-start-input">Start</label>
<input type="number" class="form-control" id="genomic-start-input" placeholder="Enter start" ng-model="start">
</div>
<div class="col-lg-2 col-md-2 col-sm-4">
<label for="genomic-end-input">End</label>
<input type="number" class="form-control" id="genomic-end-input" placeholder="Enter end" ng-model="end">
</div>
</div>
</div>
</div>
<br>
<p class='text-muted'>
<span id='genomic-location' class='margin-right-5px'></span>
View in <a href='http://{{domain}}/{{genome}}/Location/View?r={{chromosome}}:{{start}}-{{end}}' id='ensembl-link' target='_blank'>{{ getGenomeObject(genome, genomes).division }}</a>
<span ng-show='getGenomeObject(genome, genomes).assembly_ucsc' class='ucsc-link'>|
<a href='http://genome.ucsc.edu/cgi-bin/hgTracks?db={{ getGenomeObject(genome, genomes).assembly_ucsc }}&position={{ chromosome | chrToUCSC }}%3A{{ start }}-{{ end }}' target='_blank'>UCSC</a>
</span>
</p>
<genoverse genome="genome" chr="chromosome" start="start" end="end" example-locations="exampleLocations">
<genoverse-track name="'Sequence'" model="Genoverse.Track.Model.Sequence.Ensembl" view="Genoverse.Track.View.Sequence" controller="Genoverse.Track.Controller.Sequence" url="urls.sequence" resizable="'auto'" auto-height="true" hide-empty="false" extra="{100000: false}"></genoverse-track>
<genoverse-track name="'Genes'" labels="true" info="'Ensembl API genes'" model="Genoverse.Track.Model.Gene.Ensembl" view="Genoverse.Track.View.Gene.Ensembl" url="urls.genes" resizable="'auto'" auto-height="true" hide-empty="false"></genoverse-track>
<genoverse-track name="'Transcripts'" labels="true" info="'Ensembl API transcripts'" model="Genoverse.Track.Model.Transcript.Ensembl" view="Genoverse.Track.View.Transcript.Ensembl" url="urls.transcripts" resizable="'auto'" auto-height="true" hide-empty="false"></genoverse-track>
</genoverse>
</div>
<a href="https://github.com/RNAcentral/angularjs-genoverse"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
<script src="lib/Genoverse/dist/js/genoverse.min.js"></script>
<script src="lib/Genoverse/dist/js/genomes/grch38.js"></script>
<!--<script src="lib/Genoverse/js/plugins/controlPanel.js"></script>-->
<!--<script src="lib/Genoverse/js/plugins/fileDrop.js"></script>-->
<!--<script src="lib/Genoverse/js/plugins/resizer.js"></script>-->
<!--<script src="lib/Genoverse/js/plugins/karyotype.js"></script>-->
<script src="app.js"></script>
<script src="dist/angularjs-genoverse.all.js"></script>
</body>
</html>