-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
495 lines (425 loc) · 28.1 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
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
<!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 image search</title>
<!--
favicons derived from "Eye. Kaufer, Waldo Glover, 1906-, artist"
No known restrictions on publication
https://www.loc.gov/resource/cph.3b09365/
-->
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicons/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="shortcut icon" href="/favicons/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- build:leafletcss -->
<link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">
<!-- endbuild -->
<link rel="stylesheet" href="libs/leaflet-draw/dist/leaflet.draw.css">
<!-- build:csslibs -->
<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="libs/leaflet-slidebar/src/leaflet.slidebar.css">
<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.css">
<link rel="stylesheet" href="node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css">
<link rel="stylesheet" href="node_modules/leaflet-easybutton/src/easy-button.css">
<!-- endbuild -->
<!-- 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/toggles-lib.css">
<link rel="stylesheet" href="css/grid.css">
<link rel="stylesheet" href="css/figure.css">
<link rel="stylesheet" href="css/carousel.css">
<link rel="stylesheet" href="css/charts.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/close-btn.css">
<link rel="stylesheet" href="css/treatmentDetails.css">
<link rel="stylesheet" href="css/sparkline.css">
<link rel="stylesheet" href="css/simpleLightbox.css">
<link rel="stylesheet" href="css/simpleLightbox-modifiers.css">
<!-- endbuild -->
</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="sparkBox" class="sparkBox">
<div id="sparkText"></div>
<div id="sparkChart"></div>
<div id="sparkTip" class="hidden"></div>
</div>
<div id="normalSearch" class="search-container">
<div id="ns-container">
<div id="ns-widget">
<div id="ns" class="ns">
<!--
resource is what we want to retrieve and
display. It is either "images" or "treatments"
-->
<div id="toggle-resource"
class="toggle-container"
aria-label="toggle image vs treatments search"
data-pop="top" data-pop-no-shadow
data-pop-arrow data-pop-multiline>
<label class="toggle toggle-inline">
<input name="resource" class="toggle-checkbox query" type="checkbox" value="treatments">
<div class="toggle-switch toggle-round toggle-medium toggle-green"></div>
</label>
</div>
<input id="q" name="q" type="text"
placeholder="search images"
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="?family=Formicidae"
class="quicksearch bg-ant"
aria-label="find ants" data-pop="bottom"
data-pop-no-shadow
data-pop-arrow>ants</a>
<a href="?class=Actinopterygii"
class="quicksearch bg-fish"
aria-label="find fishes" data-pop="bottom"
data-pop-no-shadow
data-pop-arrow>fishes</a>
<a href="?class=Arachnida"
class="quicksearch bg-spider"
aria-label="find spiders" data-pop="bottom"
data-pop-no-shadow
data-pop-arrow>spiders</a>
<a href="?class=Malacostraca"
class="quicksearch bg-crustacean"
aria-label="find shrimp, crabs and other crustacea"
data-pop="bottom" data-pop-no-shadow
data-pop-arrow>crustacea</a>
<a href="?order=Coleoptera"
class="quicksearch bg-beetle"
aria-label="find beetles" data-pop="bottom"
data-pop-no-shadow
data-pop-arrow>beetles</a>
<a href="#"
id="search-help"
class="quicksearch2 bg-more"
aria-label="more examples"
data-pop="bottom" data-pop-no-shadow
data-pop-arrow>more examples</a>
<a href="maps.html"
class="quicksearch2 bg-map"
aria-label="ocellus maps"
data-pop="bottom" data-pop-no-shadow
data-pop-arrow>maps</a>
<div class="warn hidden"></div>
</div>
<div id="toggle-search" class="toggle-container"
aria-label="toggle between simple and advanced search"
data-pop="left" data-pop-no-shadow data-pop-arrow>
<label class="toggle toggle-inline">
<input name="searchtype" class="toggle-checkbox" type="checkbox" value="advSearch">
<div class="toggle-switch toggle-round toggle-small toggle-grey"></div>
</label>
</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>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">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">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>from the Museum für Naturkunde</summary>
<button class="example-insert">collectionCode=MfN</button>
</details>
<details>
<summary>from the articles published in the European Journal of Taxonomy</summary>
<button class="example-insert">journalTitle=eq(European Journal of Taxonomy)</button>
</details>
<details>
<summary>from the 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>from the 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>in the 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>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>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">
<input name="as-q" id="as-q" type="text" class="fullwidth" placeholder="Search Full Text">
<input name="as-treatmentTitle" id="as-treatmentTitle" type="text" class="fullwidth" placeholder="Treatment Title">
<input name="as-authorityName" id="as-authorityName" type="text" class="fullwidth" placeholder="Authority">
<input name="as-articleTitle" id="as-articleTitle" type="text" class="fullwidth" placeholder="Article Title">
<label for="as-status">New Species</label>
<input name="as-status" id="as-status" type="checkbox" value="sp. nov.">
<!-- collectionCode/collectionName filled by autocomplete -->
<!-- <input name="as-collectionName" id="as-collectionName" type="text" class="fullwidth" placeholder="Collection Name"> -->
<input name="as-collectionCode" id="as-collectionCode" type="text" class="fullwidth" placeholder="Collection Code">
<!-- journalTitle/journals_id filled by autocomplete -->
<input name="as-journalTitle" id="as-journalTitle" type="text" class="fullwidth" placeholder="Journal Title">
<!-- <input name="as-journals_id" id="as-journals_id" type="hidden"> -->
<select name="as-journalYear" id="as-journalYear" class="fullwidth">
<option value="">Journal Year…</option>
<option value="1995">Journal year is 1995</option>
<option value="1996">Journal year is 1996</option>
<option value="1997">Journal year is 1997</option>
<option value="1998">Journal year is 1998</option>
<option value="1999">Journal year is 1999</option>
<option value="2000">Journal year is 2000</option>
<option value="2001">Journal year is 2001</option>
<option value="2002">Journal year is 2002</option>
<option value="2003">Journal year is 2003</option>
<option value="2004">Journal year is 2004</option>
<option value="2005">Journal year is 2005</option>
<option value="2006">Journal year is 2006</option>
<option value="2007">Journal year is 2007</option>
<option value="2008">Journal year is 2008</option>
<option value="2009">Journal year is 2009</option>
<option value="2010">Journal year is 2010</option>
<option value="2011">Journal year is 2011</option>
<option value="2012">Journal year is 2012</option>
<option value="2013">Journal year is 2013</option>
<option value="2014">Journal year is 2014</option>
<option value="2015">Journal year is 2015</option>
<option value="2016">Journal year is 2016</option>
<option value="2017">Journal year is 2017</option>
<option value="2018">Journal year is 2018</option>
<option value="2019">Journal year is 2019</option>
<option value="2020">Journal year is 2020</option>
<option value="2021">Journal year is 2021</option>
<option value="2022">Journal year is 2022</option>
<option value="2023">Journal year is 2023</option>
<option value="2024">Journal year is 2024</option>
</select>
<fieldset id="publicationDateContainer">
<legend>Publication Date</legend>
<select name="as-publicationDate" id="as-publicationDate" class="fullwidth">
<option value="">Duration…</option>
<option value="eq">Published on</option>
<option value="since">Published since</option>
<option value="until">Published until</option>
<option value="between">Published between</option>
</select>
<div id="as-publicationDate-range">
<input name="as-publicationDateFrom" id="as-publicationDateFrom" type="date">
<span class="hidden">and</span>
<input class="hidden" name="as-publicationDateTo" id="as-publicationDateTo" type="date">
</div>
</fieldset>
<fieldset id="checkinTimeContainer">
<legend>Check-in Time</legend>
<select name="as-checkinTime" id="as-checkinTime" class="fullwidth">
<option value="">Duration…</option>
<option value="eq">Checked-in on</option>
<option value="since">Checked-in since</option>
<option value="until">Checked-in until</option>
<option value="between">Checked-in between</option>
</select>
<div id="as-checkinTime-range">
<input name="as-checkinTimeFrom" id="as-checkinTimeFrom" type="date">
<span class="hidden">and</span>
<input class="hidden" name="as-checkinTimeTo" id="as-checkinTimeTo" type="date">
</div>
</fieldset>
<select name="as-biome" id="as-biome" class="fullwidth">
<option value="">Biome…</option>
<option value="Boreal Forests or Taiga">Biome is Boreal Forests or Taiga</option>
<option value="Deserts and Xeric Shrublands">Biome is Deserts and Xeric Shrublands</option>
<option value="Flooded Grasslands and Savannas">Biome is Flooded Grasslands and Savannas</option>
<option value="Mangroves">Biome is Mangroves</option>
<option value="Mediterranean Forests, Woodlands and Scrub">Biome is Mediterranean Forests, Woodlands and Scrub</option>
<option value="Montane Grasslands and Shrublands">Biome is Montane Grasslands and Shrublands</option>
<!-- <option value="15">N/A</option> -->
<option value="Temperate Broadleaf and Mixed Forests">Biome is Temperate Broadleaf and Mixed Forests</option>
<option value="Temperate Conifer Forests">Biome is 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="Temperate Grasslands, Savannas & Shrublands">Temperate Grasslands, Savannas & Shrublands</option>
<option value="Temperate Grasslands, Savannas & Shrublands">synonym: Pampas</option>
<option value="Temperate Grasslands, Savannas & Shrublands">synonym: Veld</option>
<option value="Temperate Grasslands, Savannas & Shrublands">synonym: Savanna</option>
</optgroup>
<option value="Tropical and Subtropical Coniferous Forests">Biome is Tropical and Subtropical Coniferous Forests</option>
<option value="Tropical and Subtropical Dry Broadleaf Forests">Biome is Tropical and Subtropical Dry Broadleaf Forests</option>
<option value="Tropical and Subtropical Grasslands, Savannas and Shrublands">Biome is Tropical and Subtropical Grasslands, Savannas and Shrublands</option>
<option value="Tropical and Subtropical Moist Broadleaf Forests">Biome is Tropical and Subtropical Moist Broadleaf Forests</option>
<option value="Tundra">Biome is Tundra</option>
</select>
<div id="mapSearchContainer">
<label for="as-geolocation">Geolocation</label>
<input type="hidden" name="as-geolocation" id="as-geolocation" value="">
<div id="mapSearch"></div>
<div id="coords" style="display: block; height: 20px;"></div>
</div>
<div id="submitButtonContainer">
<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>
</div>
</div>
</form>
<div id="throbber" class="nothrob"></div>
</header>
<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="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.png">
</footer>
<!-- note: leaflet.js has to come before all other leaflet plugins -->
<!-- build:leafletjs -->
<script src="node_modules/leaflet/dist/leaflet.js"></script>
<!-- endbuild -->
<script src="libs/leaflet-draw/dist/leaflet.draw.js"></script>
<!-- build:jslibs -->
<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="libs/echarts/echarts.min.js"></script>
<script src="node_modules/leaflet-easybutton/src/easy-button.js"></script>
<script src="node_modules/leaflet.markercluster/dist/leaflet.markercluster.js"></script>
<script src="node_modules/leaflet.vectorgrid/dist/Leaflet.VectorGrid.bundled.js"></script>
<!-- endbuild -->
<!--
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/leaflet.markercluster-src.js"></script>
<script src="https://cdn.jsdelivr.net/npm/leaflet.vectorgrid@latest/dist/Leaflet.VectorGrid.bundled.js"></script>
-->
<script type="module">
import { init, showTooltip, hideTooltip } from './js/ocellus.js';
window.showTooltip = showTooltip;
window.hideTooltip = hideTooltip;
const SimpleLightbox = window.SimpleLightbox;
window.onload = () => init();
</script>
</body>
</html>