-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
289 lines (287 loc) · 14 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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin="" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.css"/>
<link rel="stylesheet" href="css/main.css"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css">
<script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
<script src="https://unpkg.com/esri-leaflet@2.3.1/dist/esri-leaflet.js"
integrity="sha512-Np+ry4Dro5siJ1HZ0hTwn2jsmu/hMNrYw1EIK9EjsEVbDge4AaQhjeTGRg2ispHg7ZgDMVrSDjNrzH/kAO9Law=="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.2/leaflet.draw.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/s3_upload.js"></script>
<script src="js/request.js"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<a class="navbar-brand" href="https://github.com/ttsukianto/esip_julia_aws">ESIP XCor App</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
</div>
</div>
</nav>
<div class="nav nav-tabs">
<a class="nav-item nav-link active" data-toggle="tab" href="#appContainer">Map</a>
<a class="nav-item nav-link" data-toggle="tab" href="#xCorContainer">XCor</a>
<a class="nav-item nav-link" data-toggle="tab" href="#stackContainer">Stacking</a>
</div>
<div class="tab-content">
<!-- Start of map tab -->
<div id="appContainer" class="tab-pane active">
<div id="map">
</div>
<script src="js/map.js"></script>
<div id="tableOptions">
<input class="btn btn-success" type="button" value="Select All" id="selectAll">
<input class="btn btn-danger" type="button" value="Deselect All" id="deselectAll">
</div>
<div id="tableContainer">
<table id="displayedStations" class="table table-striped">
<thead class="sticky-top">
<tr>
<th scope="col">Selected</th>
<th scope="col">Network</th>
<th scope="col">Station</th>
<th scope="col">Location</th>
<th scope="col">Channel</th>
<th scope="col">Start Date</th>
<th scope="col">End Date</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="filters">
<h3>Station Filters</h3>
<p>Use the rectangle tool for geographic constraints.</p>
<form>
<div class="form-row">
<div class="form-group">
<label for="network" data-toggle="tooltip"
title="Choose the network code or network codes of data that you would like to search for.
For example AV or TA. Use a comma to make a list of multiple network codes, e.g. AV, TA.
You can also use wildcards in your query, e.g. T*.
You can also leave this field empty.
NOTE: This is not suggested because it will return a huge list of potential stations and channels,
bogging down the query to a very slow response time."
data-placement="right">Network(s) ⓘ</label>
<input type="text" class="form-control" id="network" placeholder="SEED or data center code">
</div>
<div class="form-group">
<label for="station"
data-toggle="tooltip"
title="Choose the station code or station codes of data that you would like to search for.
For example CLES or CLES1. Use a comma to make a list of multiple station codes, e.g. CLES, CLES1.
You can also use wildcards in your query, e.g. CLE*.
You can also leave this field empty."
data-placement="right">Station(s) ⓘ</label>
<input type="text" class="form-control" id="station" placeholder="SEED or data center code">
</div>
<div class="form-group">
<label for="location"
data-toggle="tooltip"
title="Choose the location code or location codes of data that you would like to search for.
For example 00 or 01. Use a comma to make a list of multiple location codes, e.g. 00, 01.
You can also use wildcards in your query, e.g. *. NOTE: It is often easiest to leave this field empty and then select the locations you want from the list of stations that is returned.
This is because often times stations do not have location codes assigned."
data-placement="right">Location(s) ⓘ</label>
<input type="text" class="form-control" id="location" placeholder="SEED or data center code">
</div>
<div class="form-group">
<label for="channel"
data-toggle="tooltip"
title="Choose the channel or channels of data that you would like to search for.
For example BHZ or HHE. For a comprehensive overview of SEED channel naming conventions,
see this page at IRIS: https://ds.iris.edu/ds/nodes/dmc/data/formats/seed-channel-naming/.
Use a comma to make a list of multiple channel names, e.g. BHZ, HHE, HHZ.
You can also use wildcards in your query, e.g. BH*. You can also leave this field empty."
data-placement="right">Channel(s) ⓘ</label>
<input type="text" class="form-control" id="channel" placeholder="SEED or data center code">
</div>
<div class="form-group">
<label for="start-date"
data-toggle="tooltip"
title="Choose the earliest time for which you would like to search for data."
data-placement="right">Start Date ⓘ</label>
<input data-date-format="yyyy-mm-dd" placeholder="YYYY-MM-DD" class="form-control" id="start-date">
</div>
<div class="form-group">
<label for="end-date"
data-toggle="tooltip"
title="Choose the latest time for which you would like to search for data."
data-placement="right">End Date ⓘ</label>
<input data-date-format="yyyy-mm-dd" placeholder="YYYY-MM-DD" class="form-control" id="end-date">
</div>
</div>
</form>
<br>
<input class="btn btn-secondary" type="button" value="Query" id="update">
<br>
<br>
<input class="btn btn-primary" type="button" value="Save Selected" id="save">
<input class="btn btn-danger" type="button" value="Clear" id="clear">
<br>
<br>
<p><span id="numQueried">0</span> station channels found.</p>
<p><span id="numSaved">0</span> station channels saved.</p>
<input class="btn btn-primary" type="button" value="Download" id="download_stations">
</div>
</div>
<!-- End of map tab -->
<!-- Start of xcor tab -->
<div id="xCorContainer" class="tab-pane">
<div id="filesContainer">
<p>This page is used to set preprocessing and cross correlation parameters.
You can find more detailed information about the preprocessing parameters at
<a target="_blank" href="https://github.com/tclements/SeisNoise.jl/blob/master/docs/src/preprocessing.md">SeisNoise.jl.</a></p>
<table id="displayedFiles" class="table table-striped">
<thead class="sticky-top">
<tr>
<th id="selected" scope="col">Selected</th>
<th scope="col">File</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div id="fileOptions">
<input class="btn btn-success" type="button" value="Select All" id="selectAllFiles">
<input class="btn btn-danger" type="button" value="Deselect All" id="deselectAllFiles">
<input class="btn btn-primary" type="button" value="Refresh" id="refresh">
<br>
<br>
<p id="processingMessage">Processing initiated. Table will be refreshed automatically every 10 seconds.</p>
</div>
<div id="xCorFilters">
<h3>XCor Filters</h3>
<form>
<div class="form-row">
<div class="form-group">
<label for="fs"
data-toggle="tooltip"
title="Choose the frequency at which you like to decimate or interpolate the raw data prior to crosscorrelation.
NOTE: Decimating the data can speed the processing time significantly.
Pay attention however that your 'Maximum Frequency' parameter respects
the Nyquist Frequency associated with the chosen Resample Frequency."
data-placement="right">Resample Frequency (Hz) ⓘ</label>
<input type="number" class="form-control" id="fs" placeholder="10.0">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="freqmin"
data-toggle="tooltip"
title="Low-frequency filter parameter for seismic data preprocessing before cross correlation."
data-placement="right">Minimum Frequency (Hz) ⓘ</label>
<input type="number" class="form-control" id="freqmin" placeholder="0.1">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="freqmax"
data-toggle="tooltip"
title="High-frequency filter parameter for seismic data preprocessing before cross correlation."
data-placement="right">Maximum Frequency (Hz) ⓘ</label>
<input type="number" class="form-control" id="freqmax" placeholder="0.2">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="ccstep"
data-toggle="tooltip"
title="Set the step length in seconds for the moving window cross correlation. In other codes this often the 'percent overlap' parameter.
For example, if the correlation length was 600 seconds (10 minutes) and the correlation step was 300 seconds (5 minutes),
you would have 50% overlap in your sliding correlation window."
data-placement="right">Correlation Step (sec) ⓘ</label>
<input type="number" class="form-control" id="ccstep" placeholder="450">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="cclen"
data-toggle="tooltip"
title="Set the data window length for the cross correlation.
For example, if you set this value to 300 seconds (5 minutes),
you would cut your data into 300 second long windows prior to cross correlation."
data-placement="right">Correlation Length (sec) ⓘ</label>
<input type="number" class="form-control" id="cclen" placeholder="1800">
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="maxlag"
data-toggle="tooltip"
title="Choose the maximum amount of time that you would like to save for your cross correlation waveform.
For example, if a correlation length of 300 seconds is chosen, the actual correlation length will be 600 seconds because there is a causal and acausal side to the correlation.
However, you may not want to save 600 seconds of data because your seismic arrival of interest should arrive at 5 seconds.
In that case you would want to save 20 or 30 seconds perhaps from each side of the correlation. Setting the Maximum Correlation Lag Time to 20 seconds,
would then result in a 40 second long cross correlation being saved, 20 seconds of the acausal signal and 20 seconds of the causal signal,
all written as a single seismic trace. NOTE: Saving smaller windows will speed post processing (e.g. stacking correlation windows)."
data-placement="right">Max Correlation Lag Time (sec) ⓘ</label>
<input type="number" class="form-control" id="maxlag" placeholder="60.0">
</div>
</div>
</form>
<input class="btn btn-primary" type="button" value="Save and Launch" id="launch">
<br>
<br>
<input class="btn btn-secondary" type="button" value="Download Selected Files" id="download_xcor">
</div>
</div>
<!-- End of xcor tab -->
<!-- Start of stack tab -->
<div id="stackContainer" class="tab-pane">
<div id="stackFilters">
<h3>Stacking</h3>
<form>
<div class="form-row">
<div class="form-group">
<label for="stack"
data-toggle="tooltip"
title=""
data-placement="right">Stack Type ⓘ</label>
<select class="browser-default custom-select" id="stack">
<option selected value="linear">Linear</option>
<option value="robust">Robust</option>
<option value="phase-weighted">Phase-weighted</option>
</select>
</div>
</div>
<div class="form-row" id="phaseContainer">
<div class="form-group">
<label for="phase"
data-toggle="tooltip"
title=""
data-placement="right">Phase Smoothing (sec) ⓘ</label>
<input type="number" class="form-control" id="phase" placeholder="2">
</div>
</div>
<div class="form-row">
<div class="form-check">
<input type="checkbox" class="form-check-input" id="stackAll">
<label for="stackAll">Stack All</label>
</div>
</div>
</form>
<input class="btn btn-secondary" type="button" value="Download" id="download_stacking">
</div>
</div>
<!-- End of stack tab -->
</div>
</body>
</html>