beacon-home.html 4.51 KB
Newer Older
1
2
3
4
<div ng-controller="BeaconController" ng-cloak class="container">
    <div class="jumbotron">
        <h1>Beacon ArrayMap</h1>
        <p>First Prototype of a <a target="_blank" href="https://genomicsandhealth.org/work-products-demonstration-projects/beacon-project-0">Beacon</a>
5
6
            <a target="_blank" href="https://docs.google.com/document/d/1n7qtCBFwsExP_k2GPfWS_PN53Xeh8YxeCBOgyZ5itOw/edit#"> v0.3</a> implementation for <a target="_blank"  href="http://arraymap.org/">ArrayMap</a>.</p>
        <p>See <a href="documentation">documentation and open questions (OUTDATED)</a>.</p>
7
8
9
    </div>
    <form class="form-horizontal">
        <div class="form-group">
10
            <label for="chromosome" class="col-sm-2 control-label">Reference name</label>
11
12
13
14
15
            <div class="col-sm-4">
                <input type="text" class="form-control" id="chromosome" ng-model="config.chromosome" placeholder="Chromosome">
            </div>
        </div>
        <div class="form-group">
16
            <label for="position" class="col-sm-2 control-label">Start</label>
17
18
19
20
            <div class="col-sm-4">
                <input type="text" class="form-control" id="position" ng-model="config.position" placeholder="Position">
            </div>
        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
21
        <div class="form-group">
22
            <label for="referenceSelect" class="col-sm-2 control-label">Assembly ID</label>
Daniel Teixeira's avatar
Daniel Teixeira committed
23
            <div class="col-sm-4">
24
                <select id="referenceSelect" ng-model="config.reference" class="form-control">
Daniel Teixeira's avatar
Daniel Teixeira committed
25
26
27
28
                    <option ng-repeat="ref in references" value="{{ref}}" >{{ref}}</option>
                </select>
            </div>
        </div>
29
30
31
32
33
34
35
36
37
        <div class="form-group">
            <label for="datasetSelect" class="col-sm-2 control-label">Dataset</label>
            <div class="col-sm-4">
                <select id="datasetSelect" ng-model="config.dataset" class="form-control">
                    <option ng-repeat="ds in datasets" value="{{ds.code}}" >({{ds.code}}) {{ds.description}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
38
            <label style="color:green" for="alternateBases" class="col-sm-2 control-label">Alternate bases</label>
39
            <div class="col-sm-4">
40
                <select id="alternateBases" ng-model="config.alternateBases" class="form-control">
41
                    <!--<option value="">Substitution (For precise variants)</option>-->
42
                    <option value="DEL">DEL (Deletion)</option>
43
                    <!--<option value="INS">INS (Insertion)</option>-->
44
                    <option value="DUP">DUP (Duplication)</option>
45
                    <!--<option value="INV">INV (Inversion)</option>
46
                    <option value="CNV">CNV (Copy Number Variation)</option>
47
                    <option value="BND">BND (Breakend???)</option>-->
48
49
50
                </select>
            </div>
        </div>
51
        <div class="form-group">
52
            <label for="position" class="col-sm-2 control-label">Minimal Length</label>
53
            <div class="col-sm-4">
54
                <input type="text" class="form-control" id="length" ng-model="config.length">
55
56
            </div>
        </div>
Severine Duvaud's avatar
Severine Duvaud committed
57
58
59
60
61
62
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <a target="beacon" ng-href="/v0.3/query?referenceName=11&start=34439881&assemblyId=GRCh38&datasetIds=8070/3&alternateBases=DEL">Example query</a>
            </div>
        </div>

63
64
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
65
                <a target="beacon" ng-href="{{getNewApiUrl()}}">{{getNewApiUrl()}}</a>
66
67
            </div>
            <div class="col-sm-2">
68
                <a target="beacon" ng-href="{{getNewApiUrl()}}" class="btn btn-info">Beacon Query</a>
69
70
            </div>
        </div>
71

72
73
74
75
76
77
78
79
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <a target="beacon" ng-href="{{getInfoUrl()}}">{{getInfoUrl()}}</a>
            </div>
            <div class="col-sm-2">
                <a target="beacon" ng-href="{{getInfoUrl()}}" class="btn btn-info">Beacon Info</a>
            </div>
        </div>
80
81

        <!--
82
83
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
84
                <a target="beacon" ng-href="{{getApiUrl()}}">{{getApiUrl()}}</a>
85
86
            </div>
            <div class="col-sm-2">
87
                <a target="beacon" ng-href="{{getApiUrl()}}" class="btn btn-info">Beacon v0.2</a>
88
89
            </div>
        </div>
90
        -->
91
92
    </form>
</div>