-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
434 lines (383 loc) · 26 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
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="description" content="Ocellus, an explorer for the Biodiversity Literature Repository (BLR) on Zenodo">
<meta name="version" content="4.0">
<meta name="author" content="Puneet Kishor">
<meta name="copyright" content="Puneet Kishor">
<meta name="license" content="CC0 Public Domain Dedication">
<meta name="repo" content="https://github.com/punkish/ocellus">
<meta name="date" content="%date%">
<meta http-equiv="Cache-Control" content="max-age=604800, public">
<title>ocellus^4</title>
<link rel="icon" type="image/png" href="img/ocellus.png">
<!-- build:css -->
<link rel="stylesheet" href="css/uglyduck.css">
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/header.css">
<link rel="stylesheet" href="css/form.css">
<link rel="stylesheet" href="css/adv-search.css">
<link rel="stylesheet" href="css/examples.css">
<link rel="stylesheet" href="css/quicksearch.css">
<link rel="stylesheet" href="css/toggleSwitch.css">
<link rel="stylesheet" href="css/cssToggle.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/charts.css">
<link rel="stylesheet" href="css/dashboard.css">
<link rel="stylesheet" href="css/throbber.css">
<link rel="stylesheet" href="css/pager.css">
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/treatmentDetails.css">
<link rel="stylesheet" href="libs/fancySearch/fancySearch.css">
<link rel="stylesheet" href="css/sparkline.css">
<link rel="stylesheet" href="css/simpleLightbox.css">
<link rel="stylesheet" href="css/simpleLightbox-modifiers.css">
<link rel="stylesheet" href="css/media-queries.css">
<!-- endbuild -->
<link rel="stylesheet" href="libs/JavaScript-autoComplete/auto-complete.css">
<link rel="stylesheet" href="libs/pop-pop/pop-pop.min.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<!--
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin=""/>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/MarkerCluster.Default.css">
-->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fjalla+One&family=Lora">
</head>
<body>
<header>
<div class="title">
<div id="brand" class="reveal" data-reveal="MAP • IMAGES • TREATMENTS">4</div>
<h1><a href="/index.html">ocellus</a></h1>
<div class="subtitle">
<div class="small">A Plazi Project</div>
<a href="#about" class="modalToggle">about</a>
</div>
</div>
<form>
<input class="query" id="page" name="page" type="hidden" value="1">
<input class="query" id="size" name="size" type="hidden" value="30">
<div id="tooltip" display="none" style="position: absolute; display: none;"></div>
<div id="sparkBox" class="sparkBox" style="height: 30px;"></div>
<div id="normalSearch" class="search-container">
<div id="ns-container">
<!-- <div id="ns-help">search images</div> -->
<div id="ns-widget">
<div id="ns" class="ns">
<!--
resource is what we want to retrieve and
display. resource is either "images" or
"treatments"
-->
<div class="switch resource regular pill green" aria-label="toggle resource" data-pop="right" data-pop-no-shadow="true" data-pop-arrow="true">
<input class="query" type="radio" id="switchResource-1" name="resource" value="images" autocomplete="off" checked="true">
<label for="switchResource-1"></label>
<input class="query" type="radio" id="switchResource-2" name="resource" value="treatments" autocomplete="off">
<label for="switchResource-2"></label>
</div>
<input id="q" name="q" type="text" placeholder="search for something" class="query ns-val-input">
<div id="ns-input-controls">
<input name="refreshCache" id="refreshCache" type="checkbox" value="true" class="query unchecked" aria-label="This will refresh the cache. You probably don't want to do this." data-pop="top" data-pop-no-shadow data-pop-arrow data-pop-multiline>
<button id="clear-q" type="reset" aria-label="reset search" data-pop="top" data-pop-no-shadow data-pop-arrow>⊗</button>
</div>
</div>
<button id="ns-go" name="go" type="submit" class="ns-button-primary">go</button>
</div>
</div>
</div>
<div id="fancySearch" class="search-container hidden">
<div id="fs-container"></div>
</div>
<div id="bottom-menu">
<div id="quicksearch">
<a href="?resource=images&family=Formicidae" aria-label="find ants" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-ant.svg"></a>
<a href="?resource=images&class=Actinopterygii" aria-label="find fishes" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-fish.svg"></a>
<a href="?resource=images&class=Arachnida" aria-label="find spiders" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-spider.svg"></a>
<a href="?resource=images&class=Malacostraca" aria-label="find shrimp, crabs and other crustacea" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-shrimp.svg"></a>
<a href="?resource=images&order=Coleoptera" aria-label="find beetles" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-beetle.svg"></a>
<a id="search-help" href="#" aria-label="more examples" data-pop="bottom" data-pop-no-shadow data-pop-arrow><img src="img/icon-more-examples.svg"></a>
<div class="warn hidden"></div>
</div>
<!-- <div class="switch search small slider green" aria-label="toggle search type" data-pop="left" data-pop-no-shadow data-pop-arrow>
<input type="radio" id="switchSearch-1" name="searchType" value="ns" checked="true" data-checked="true">
<label for="switchSearch-1"></label>
<input type="radio" id="switchSearch-2" name="searchType" value="fs" data-checked="false">
<label for="switchSearch-2"></label>
</div> -->
<!-- <div class="switch search small slider red" aria-label="toggle advanced search" data-pop="left" data-pop-no-shadow data-pop-arrow>
<input type="radio" id="switchAdvSearch-1" name="searchType2" value="ss" checked="true" data-checked="true">
<label for="switchAdvSearch-1"></label>
<input type="radio" id="switchAdvSearch-2" name="searchType2" value="as" data-checked="false">
<label for="switchAdvSearch-2"></label>
</div> -->
<div class="button r hidden" id="advSearch" aria-label="toggle advanced search" data-pop="left" data-pop-no-shadow data-pop-arrow>
<input name="searchtype" type="checkbox" class="checkbox" value="simple">
<div class="knobs"></div>
<div class="layer"></div>
</div>
</div>
<div class="examples hidden">
<p>Click on the link to try the search<br><em><b>Note:</b> These extended syntax queries are currently only possible against treatments.</em></p>
<details open>
<summary>images from the article with the given DOI (either of the two below will work)</summary>
<button class="example-insert">10.11646/zootaxa.5284.3.7</button><br>
<button class="example-insert">articleDOI=10.11646/zootaxa.5284.3.7</button>
</details>
<details open>
<summary><img src="img/icon_fts_all.svg" width="30" align="top"> images from treatments with the given term anywhere in the text (a fulltext search against the entire treatment)</summary>
<button class="example-insert">phylogeny</button><br>
</details>
<details open>
<summary><img src="img/icon_fts_caption.svg" width="30" align="top"> images with the given term anywhere in the text of the image caption (a fulltext search against just the image caption)</summary>
<button class="example-insert">captionText=phylogeny</button><br>
</details>
<details>
<summary>all images from articles published in the European Journal of Taxonomy</summary>
<button class="example-insert">journalTitle=eq(European Journal of Taxonomy)</button>
</details>
<details>
<summary>all images from article whose title starts with "Morphology and taxonomic assessment"</summary>
<button class="example-insert">articleTitle=starts_with(Morphology and taxonomic assessment)</button>
</details>
<details>
<summary>all images from treatments with materialCitations found within 10 kms of a given lat/lng</summary>
<button class="example-insert">geolocation=within(radius:10, units:'kilometers', lat:40.21, lng:-120.33)</button>
</details>
<details>
<summary>all fishes in articles published since 2021-12-21</summary>
<button class="example-insert">class=Actinopterygii&publicationDate=since(2021-12-21)</button>
</details>
<details>
<summary>text contains 'shrimp' in articles published since 2020-12-21</summary>
<button class="example-insert">shrimp&publicationDate=since(2020-12-21)</button>
</details>
<details>
<summary>images from treatments checked in since yesterday</summary>
<button class="example-insert">checkinTime=since(yesterday)</button>
</details>
<details>
<summary>text contains 'tyrannosaurus' and <i>authorityName</i> starts with 'Osborn'</summary>
<button class="example-insert">tyrannosaurus&authorityName=Osborn</button>
</details>
<details>
<summary>images from treatments from family 'Agamidae'</summary>
<button class="example-insert">family=Agamidae</button>
</details>
<details>
<summary>text contains 'moloch' OR 'horridus'</summary>
<button class="example-insert">moloch OR horridus</button>
</details>
<details>
<summary>text contains 'decapoda' and the journal is not "Zootaxa"</summary>
<button class="example-insert">decapoda&journalTitle=not_like(zootaxa)</button>
</details>
</div>
<div id="as-container" class="advanced-search noblock">
<table>
<tr>
<td class="h">Search Full Text</td>
<td colspan="3"><input name="as-q" type="text"></td>
</tr>
<tr>
<td class="h">Treatment Title</td>
<td colspan="3"><input name="as-treatmentTitle" type="text"></td>
</tr>
<tr>
<td class="h">Authority</td>
<td colspan="3"><input name="as-authorityName" type="text"></td>
</tr>
<tr>
<td class="h">Article Title</td>
<td colspan="3"><input name="as-articleTitle" type="text"></td>
</tr>
<tr>
<td class="h">New Species</td>
<td colspan="3"><input name="as-status" type="checkbox" value="sp. nov."></td>
</tr>
<tr>
<td class="h">Journal Title</td>
<td><input name="as-journalTitle" type="text"></td>
<td class="h">Journal Year</td>
<td>
<select name="as-journalYear">
<option value="">choose year…</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option>
<option>2004</option>
<option>2005</option>
<option>2006</option>
<option>2007</option>
<option>2008</option>
<option>2009</option>
<option>2010</option>
<option>2011</option>
<option>2012</option>
<option>2013</option>
<option>2014</option>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
<option>2023</option>
<option>2024</option>
</select>
</td>
</tr>
<tr>
<td class="h" aria-label="When the article was published." data-pop="left" data-pop-no-shadow data-pop-arrow data-pop-multiline>Publication Date</td>
<td colspan="3">
<select name="as-publicationDate">
<option value="">choose duration…</option>
<option value="since">since</option>
<option value="until">until</option>
<option value="between">between</option>
</select>
<input name="as-publicationDateFrom" type="date">
<span class="hidden">and</span>
<input class="hidden" name="as-publicationDateTo" type="date">
</td>
</tr>
<tr>
<td class="h" aria-label="When the article was checked into the Treatment Bank database." data-pop="left" data-pop-no-shadow data-pop-arrow data-pop-multiline>Check-in Time</td>
<td colspan="3">
<select name="as-checkinTime">
<option value="">choose duration…</option>
<option value="since">since</option>
<option value="until">until</option>
<option value="between">between</option>
</select>
<input name="as-checkinTimeFrom" type="date">
<span class="hidden">and</span>
<input class="hidden" name="as-checkinTimeTo" type="date">
</td>
</tr>
<tr>
<td class="h">Biome</td>
<!-- <td colspan="3"><input name="as-biome" type="text"></td> -->
<td colspan="3">
<select name="as-biome">
<option value="">choose biome…</option>
<option>Boreal Forests or Taiga</option>
<option>Deserts and Xeric Shrublands</option>
<option>Flooded Grasslands and Savannas</option>
<option>Mangroves</option>
<option>Mediterranean Forests, Woodlands and Scrub</option>
<option>Montane Grasslands and Shrublands</option>
<!-- <option value="15">N/A</option> -->
<option>Temperate Broadleaf and Mixed Forests</option>
<option>Temperate Conifer Forests</option>
<option title="synonyms: Pampas, Veld, Savanna">Temperate Grasslands, Savannas and Shrublands</option>
<option title="synonyms: Temperate Grasslands, Savannas & Shrublands" disabled> - Pampas</option>
<option title="synonyms: Temperate Grasslands, Savannas & Shrublands" disabled> - Veld</option>
<option title="synonyms: Temperate Grasslands, Savannas & Shrublands" disabled> - Savanna</option>
<!--
<optgroup label="Temperate Grasslands, Savannas & Shrublands">
<option value="5">Temperate Grasslands, Savannas & Shrublands</option>
<option value="5">Pampas</option>
<option value="5">Veld</option>
<option value="5">Savanna</option>
</optgroup>
-->
<option>Tropical and Subtropical Coniferous Forests</option>
<option>Tropical and Subtropical Dry Broadleaf Forests</option>
<option>Tropical and Subtropical Grasslands, Savannas and Shrublands</option>
<option>Tropical and Subtropical Moist Broadleaf Forests</option>
<option>Tundra</option>
</select>
</td>
</tr>
<tr>
<td colspan="4" class="footer">
<input name="as-refreshCache" id="refreshCache-2" type="checkbox" value="true" class="unchecked" aria-label="This will refresh the cache. You probably don't want to do this." data-pop="top" data-pop-no-shadow data-pop-arrow data-pop-multiline>
<button id="as-go" name="as-go" type="submit" class="as-button-primary">search</button>
</td>
</tr>
</table>
</div>
</form>
</header>
<div id="throbber" class="nothrob"></div>
<main>
<section id="images">
<details id="charts-container" class="charts" open>
<summary></summary>
<div id="charts" class="charts-content">
<div id="yearlyCounts" class="chart"></div>
<div id="termFreq" class="chart"></div>
</div>
</details>
<div class="column-2 box">
<!-- <div id="search-criteria"></div> -->
<!-- this is where the images go -->
<div id="grid-images"></div>
<div id="pager"></div>
</div>
</section>
<section id="dashboard" class="modal hidden noblock">
<a href="#" class="close modalToggle">close</a>
<div id="dashboardCharts"></div>
</section>
<section id="about" class="modal hidden noblock">
<a href="#" class="close modalToggle">close</a>
<h1>About</h1>
<p>Ocellus is a frontend to the Biodiversity Literature Repository (BLR) on <a href="https://zenodo.org" target="_blank">Zenodo</a>, and taxonomic treatments in <a href="http://treatmentbank.org" target="_blank">TreatmentBank</a>. Ocellus depends on <a href="https://test.zenodeo.org" target="_blank">Zenodeo</a>, a <code>nodejs</code> API that queries, analyzes and aggregates results from these various repositories via a single, unified interface. Start typing in the search field and Ocellus will suggest from > 5100 taxonomic familes, and then retrieve the results for you.</p>
<p>Check out our policies on <a href="#privacy" class="modalToggle">privacy</a> and <a href="#ip" class="modalToggle">intellectual property</a>, or <a href="#contact" class="modalToggle">send us feedback</a>.</p>
</section>
<section id="privacy" class="modal hidden noblock">
<a href="#" class="close modalToggle">close</a>
<h1>Privacy</h1>
<p>We track nothing. What you do with the data here is not our business. Check out our policy on <a href="#ip" class="modalToggle">intellectual property</a> or <a href="#contact" class="modalToggle">give us feedback</a>.</p>
</section>
<section id="ip" class="modal hidden noblock">
<a href="#" class="close modalToggle">close</a>
<h1>Intellectual Property</h1>
<p>All information we extract or create is dedicated to the public domain under the <a href="https://creativecommons.org/publicdomain/zero/1.0/legalcode" target="_blank">CC0 Public Domain Dedication</a>. All original content by authors of source article is copyrighted by either the authors or their publishers and is used under its applicable open license. For copyright information in the images, please consult the original record on Zenodo, BLR policies, and the applicable laws of your country.</p>
<p>If you use are data, please be nice and give us credit by citing us as follows: <cite>Biodiversity Literature Repository. 2013-. A community to share publications related to bio-systematics. Plazi.</cite></p>
<p>The half-fish in the footer is based on the original of a Blunt-Nosed Minnow, <i>Pimephales notatus</i> (Rafinesque) ♂ from the <a href="https://archive.org/stream/cu31924090292669/#page/n1063/mode/1up" target="_blank">Internet Archive</a> and has no known copyright restrictions.</p>
<p>Check out our <a href="#privacy" class="modalToggle">privacy policy</a> or <a href="#contact" class="modalToggle">give us feedback</a>.</p>
</section>
<section id="contact" class="modal hidden noblock">
<a href="#" class="close modalToggle">close</a>
<h1>Contact</h1>
<p>Biodiversity Literature Repository (BLR aka BioLitRepo) is a production of Plazi in partnership with Zenodo/CERN, Geneva, and Pensoft Publishers, Sofia, Bulgaria, with generous support from The Arcadia Foundation, UK.</p>
<p>Check out our policies on <a href="#privacy" class="modalToggle">privacy</a> and <a href="#ip" class="modalToggle">intellectual property</a>, or contact <a href="mailto:[email protected]">Plazi</a> for more information.</p>
</section>
</main>
<footer aria-label="This half-fish is based on the original of a Blunt-Nosed Minnow, Pimephales notatus (Rafinesque) ♂ from the Internet Archive, and has no known copyright restrictions." data-pop="top" data-pop-no-shadow data-pop-arrow data-pop-multiline>
<img src="img/fish.jpg">
</footer>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!--
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.markercluster.js"></script>
<script src="https://unpkg.com/[email protected]/dist/h3-js.umd.js"></script>
-->
<!-- build:js -->
<!-- endbuild -->
<script src="../../libs/simple-lightbox/simpleLightbox.js"></script>
<script src="libs/picolog/picolog.min.js"></script>
<script src="libs/lazysizes.min.js"></script>
<script src="libs/JavaScript-autoComplete/auto-complete.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.3/echarts.min.js"></script>
<script type="module">
import { init, showTooltip, hideTooltip } from './js/ocellus.js';
window.onload = () => init();
window.showTooltip = showTooltip;
window.hideTooltip = hideTooltip;
const SimpleLightbox = window.SimpleLightbox;
</script>
</body>
</html>