beacon-home.html 4.66 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
            <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>
6
7
8
    </div>
    <form class="form-horizontal">
        <div class="form-group">
Daniel Teixeira's avatar
Daniel Teixeira committed
9
            <label for="referenceName" class="col-sm-2 control-label">Reference name</label>
10
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
11
                <input type="text" class="form-control" id="referenceName" ng-model="config.referenceName" placeholder="corresponds to chromosome name, ex: 11">
12
13
14
            </div>
        </div>
        <div class="form-group">
Daniel Teixeira's avatar
Daniel Teixeira committed
15
            <label for="start" class="col-sm-2 control-label">Start</label>
16
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
17
                <input type="text" class="form-control" id="start" ng-model="config.start" placeholder="start position, ex: 34439881">
18
19
            </div>
        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
20
        <div class="form-group">
21
            <label for="referenceSelect" class="col-sm-2 control-label">Assembly ID</label>
Daniel Teixeira's avatar
Daniel Teixeira committed
22
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
23
                <select id="referenceSelect" ng-model="config.assemblyId" class="form-control">
Daniel Teixeira's avatar
Daniel Teixeira committed
24
25
26
27
                    <option ng-repeat="ref in references" value="{{ref}}" >{{ref}}</option>
                </select>
            </div>
        </div>
28
        <div class="form-group">
Daniel Teixeira's avatar
Daniel Teixeira committed
29
            <label for="datasetSelect" class="col-sm-2 control-label">Dataset Ids</label>
30
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
31
                <select id="datasetSelect" ng-model="config.datasetIds" class="form-control">
32
33
34
35
36
                    <option ng-repeat="ds in datasets" value="{{ds.code}}" >({{ds.code}}) {{ds.description}}</option>
                </select>
            </div>
        </div>
        <div class="form-group">
37
            <label style="color:green" for="alternateBases" class="col-sm-2 control-label">Alternate bases</label>
38
            <div class="col-sm-4">
39
                <select id="alternateBases" ng-model="config.alternateBases" class="form-control">
40
                    <!--<option value="">Substitution (For precise variants)</option>-->
41
                    <option value="DEL">DEL (Deletion)</option>
42
                    <!--<option value="INS">INS (Insertion)</option>-->
43
                    <option value="DUP">DUP (Duplication)</option>
44
                    <!--<option value="INV">INV (Inversion)</option>
45
                    <option value="CNV">CNV (Copy Number Variation)</option>
46
                    <option value="BND">BND (Breakend???)</option>-->
47
48
49
                </select>
            </div>
        </div>
50
51

        <!-- Do not allow minLength and maxLength to be compliant with 0.3
52
        <div class="form-group">
Daniel Teixeira's avatar
Daniel Teixeira committed
53
            <label for="minlength" class="col-sm-2 control-label">Minimal length</label>
54
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
55
                <input type="text" class="form-control" id="minlength" ng-model="config.minlength" placeholder="1">
56
57
            </div>
        </div>
Severine Duvaud's avatar
Severine Duvaud committed
58
59

        <div class="form-group">
Daniel Teixeira's avatar
Daniel Teixeira committed
60
            <label for="maxlength" class="col-sm-2 control-label">Maximal length</label>
Severine Duvaud's avatar
Severine Duvaud committed
61
            <div class="col-sm-4">
Daniel Teixeira's avatar
Daniel Teixeira committed
62
                <input type="text" class="form-control" id="maxlength" ng-model="config.maxlength" placeholder="Max bases for the selected chromosome">
Severine Duvaud's avatar
Severine Duvaud committed
63
            </div>
64
        </div>-->
Severine Duvaud's avatar
Severine Duvaud committed
65

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

75
76
77
78
79
80
81
82
        <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>
83

84
85
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
Daniel Teixeira's avatar
Daniel Teixeira committed
86
                <a target="beacon" href="/samples?limit=10">Get 10 samples</a>
87
88
            </div>
        </div>
Daniel Teixeira's avatar
Daniel Teixeira committed
89

90
91
92
93
94
        <div class="form-group">
            <div class="col-sm-offset-2 col-sm-8">
                <a target="beacon" ng-href="{{getDatasetUrl()}}">{{getDatasetUrl()}}</a>
            </div>
        </div>
95
96
    </form>
</div>