-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
322 lines (285 loc) · 22.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Web Widget</title>
<script src="./dist/mia.bundle.js" id="mia_script" data-deref-config="./test/deref_config.json"
data-proxy="https://docker-dev.vliz.be:5301/" data-self-reference data-extra-properties="nodecorator"
data-default-template="./test/default_template.json" defer>
</script>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta property="og:url" content="https://marineinfo.org/id/person/38476">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous">
<script type="module" src="https://vocab.vliz.be/webcomponent/main.js"></script>
<script>
window.onload = function () {
const container = document.querySelector("#container");
const termtable = document.querySelector("#selected_term_table");
container.addEventListener("search-results-changed", (event) => {
console.debug(JSON.stringify(event.detail))
console.debug(`The search results have changed`);
});
container.addEventListener("selection-changed", (event) => {
//check the event.details if the array is bigger then 0
// if yes then make a table with the selected terms
// if no then remove the table
if (event.detail.length > 0) {
termtable.innerHTML = "";
const table = document.createElement("table");
table.classList.add("table");
table.classList.add("table-striped");
table.classList.add("table-bordered");
table.classList.add("table-hover");
table.classList.add("table-sm");
table.classList.add("table-responsive");
table.classList.add("table-responsive-sm");
table.classList.add("table-responsive-md");
table.classList.add("table-responsive-lg");
table.classList.add("table-responsive-xl");
table.classList.add("table-responsive-xxl");
table.classList.add("table-dark");
// Create the header
// col names are name, uri, vocabulary
const thead = document.createElement("thead");
const tr = document.createElement("tr");
const th2 = document.createElement("th");
th2.scope = "col";
th2.innerText = "URI";
const th3 = document.createElement("th");
th3.scope = "col";
th3.innerText = "Vocabulary";
tr.appendChild(th2);
tr.appendChild(th3);
thead.appendChild(tr);
table.appendChild(thead);
//body of the table is made by looping over the event.detail
// event detail looks like :
/*
[{"prefLabel":{"nl":["Schelde"]},"sourceDataset":"https://my-application.com/dataset/6686AE6164C5DC84AC7D0258","datasetEntityUri":"http://marineregions.org/mrgid/2542","vocabulary":"https://my-application.com/vocabularies/6686AE6064C5DC84AC7D0257","tagLabels":null,"uuid":"f3c2ee70-6f75-11ef-b508-d5369d5fea7c","uri":"http://marineregions.org/mrgid/2542","id":"f3c2ee70-6f75-11ef-b508-d5369d5fea7c","highlight":{"prefLabel.nl":["<em>Schelde</em>"]},"trimmedPrefLabel":"Schelde"},{"prefLabel":{"nl":["Schelle"]},"sourceDataset":"https://my-application.com/dataset/6686AE6164C5DC84AC7D0258","datasetEntityUri":"http://marineregions.org/mrgid/2604","vocabulary":"https://my-application.com/vocabularies/6686AE6064C5DC84AC7D0257","tagLabels":null,"uuid":"09104520-6f76-11ef-b508-d5369d5fea7c","uri":"http://marineregions.org/mrgid/2604","id":"09104520-6f76-11ef-b508-d5369d5fea7c","highlight":{"prefLabel.nl":["<em>Schelle</em>"]},"trimmedPrefLabel":"Schelle"},{"prefLabel":{"en":["Rhine-Meuse-Scheldt Delta"]},"sourceDataset":"https://my-application.com/dataset/6686AE6164C5DC84AC7D0258","datasetEntityUri":"http://marineregions.org/mrgid/19668","vocabulary":"https://my-application.com/vocabularies/6686AE6064C5DC84AC7D0257","tagLabels":null,"uuid":"f3f9b5e0-6f75-11ef-b508-d5369d5fea7c","uri":"http://marineregions.org/mrgid/19668","id":"f3f9b5e0-6f75-11ef-b508-d5369d5fea7c","highlight":{"prefLabel.en":["Rhine-Meuse-<em>Scheldt</em> Delta"]},"trimmedPrefLabel":"Rhine-Meuse-Sch..."}]
*/
const tbody = document.createElement("tbody");
event.detail.forEach((element) => {
const tr = document.createElement("tr");
const td2 = document.createElement("td");
//should ba a <a> tag
const a = document.createElement("a");
a.href = element.uri;
a.innerText = element.uri;
td2.appendChild(a);
const td3 = document.createElement("td");
td3.innerText = element.vocabulary;
tr.appendChild(td2);
tr.appendChild(td3);
tbody.appendChild(tr);
});
table.appendChild(tbody);
termtable.appendChild(table);
} else {
termtable.innerHTML = "";
}
console.debug(JSON.stringify(event.detail));
});
};
</script>
</head>
<body>
<!-- The widget will be inserted here -->
<div class="jumbotron">
<h1 class="display-4">Welcome to the MIA's</h1>
<p class="lead">MIA or marine info affordances is a plugable webwidget that will convert links into
hoverable items that will give the end-user a wikipedia like experience
powered by linked open data</p>
<hr class="my-4">
<p>Discover all usecases of the MIA's below!</p>
<a class="btn btn-primary btn-lg" href="https://github.com/vliz-be-opsci/MIA" role="button"
target="_blank">Learn more</a>
</div>
<div class="container">
<h1>Problem childs</h1>
<p>These are the links that have issues related to them</p>
<ul>
<li><a href="http://vocab.nerc.ac.uk/collection/L06/current/67/">BODC term</a></li>
<li><a href="https://marineregions.org/mrgid/61473">No loading geom point</a></li>
<li><a href="https://marineregions.org/mrgid/3293">No loading geom point</a></li>
<li><a href="https://marineregions.org/mrgid/3118">No loading geom point</a></li>
<li><a href="https://marineinfo.org/id/collection/619">eurobis collection</a></li>
<li><a href="https://marineinfo.org/id/collection/269">encora</a></li>
<li><a href="https://marineinfo.org/id/collection/27">scheldemonitor</a></li>
<li><a href="https://marineinfo.org/id/project/5240">project</a></li>
<li><a href="https://marineinfo.org/id/project/2078">Project where the ttl is not parsed
correclty</a></li>
<li><a href="https://marineinfo.org/id/project/2102">ttl not parsed correctly</a></li>
<li><a href="http://marineinfo.org/id/dataset/6430">dataset with one url</a></li>
<li><a href="https://zenodo.org/records/13934886">zenodo example</a></li>
</ul>
for the scheldemonitor collection there are urls in the schema:url section that start with www. Is this
compliant
to rdf stardands? This is because the urls that start with www are treated as relative urls and not as
absolute urls. This is a problem because the urls are not resolvable.
<h2>Index</h2>
<ul>
<li><a href="#marineregions">marineregions</a></li>
<li><a href="#marineinfo-persons">marineinfo-persons</a></li>
<li><a href="#marineinfo-datasets">marineinfo-datasets</a></li>
<li><a href="#marineinfo-publications">marineinfo-publications</a></li>
<li><a href="#marineinfo-events">marineinfo-events</a></li>
<li><a href="#marineinfo-projects">marineinfo-projects</a></li>
<li><a href="#marineinfo-organizations">marineinfo-organizations</a></li>
<li><a href="#marineinfo-collections">marineinfo-collections</a></li>
<li><a href="#aphia-worms">aphia-worms</a></li>
<li><a href="#integration with vocabserver-webapp">integration with vocabserver-webapp</a></li>
<li><a href="#full text example">full text example</a></li>
<li><a href="#no change / no update example">no change / no update example</a></li>
</ul>
<h3 id="marineregions">Marineregions</h3>
<p>These are the links to the marineregions website</p>
<ul>
<li><a href="https://marineregions.org/mrgid/61473" mia-extra-properties="update">No
loading
geom point</a></li>
<li><a href="https://marineregions.org/mrgid/4868" mia-extra-properties="update">Also grey</a>
</li>
<li><a href="https://marineregions.org/mrgid/7632">Also grey</a></li>
</ul>
<h3 id="marineinfo-persons">Marineinfo-persons</h3>
<p>These are the links to the marineinfo-persons website</p>
<ul>
<li><a href="https://marineinfo.org/id/person/38476">Linked data man </a></li>
<li><a href="https://marineinfo.org/id/person/48">Jan Mees</a></li>
<li><a href="https://marineinfo.org/id/person/19211" mia-extra-properties="noellipsis">L.T</a>
</li>
<li><a href="https://marineinfo.org/id/person/41728">Rando</a>
</li>
<li><a href="https://marineinfo.org/id/person/30976">person with weird format picture</a></li>
</ul>
<h3 id="marineinfo-datasets">Marineinfo-datasets</h3>
<p>These are the links to the marineinfo-datasets website</p>
<ul>
<li><a href="https://marineinfo.org/id/dataset/8135">dataset with urls</a></li>
<li><a href="https://marineinfo.org/id/dataset/6430">dataset</a></li>
</ul>
<h3 id="marineinfo-publications">Marineinfo-publications</h3>
<p>These are the links to the marineinfo-publications website</p>
<ul>
<li><a href="https://marineinfo.org/id/publication/355430">publication with authors</a></li>
<li><a href="https://marineinfo.org/id/publication/300143">publication</a></li>
<li><a href="https://marineinfo.org/id/publication/225534">some multimedia</a></li>
</ul>
<h3 id="marineinfo-events">Marineinfo-events</h3>
<p>These are the links to the marineinfo-events website</p>
<ul>
<li><a href="https://marineinfo.org/id/event/3255">event</a></li>
<li><a href="https://marineinfo.org/id/event/3252">event</a></li>
</ul>
<h3 id="marineinfo-projects">Marineinfo-projects</h3>
<p>These are the links to the marineinfo-projects website</p>
<ul>
<li><a href="https://marineinfo.org/id/project/5240">project</a></li>
<li><a href="https://marineinfo.org/id/project/1004">other project</a></li>
</ul>
<h3 id="marineinfo-organizations">Marineinfo-organizations</h3>
<p>These are the links to the marineinfo-organizations website</p>
<ul>
<li><a href="https://marineinfo.org/id/institute/12919">institute</a></li>
<li><a href="https://marineinfo.org/id/institute/36">vliz</a></li>
</ul>
<h3 id="marineinfo-collections">Marineinfo-collections</h3>
<p>These are the links to the marineinfo-collections website</p>
<ul>
<li><a href="https://marineinfo.org/id/collection/917">collection</a></li>
<li><a href="https://marineinfo.org/id/collection/27">scheldemonitor</a></li>
</ul>
<h3 id="aphia-worms">Aphia-worms</h3>
<p>These are the links to the aphia-worms website . NOTE that these will be replaced by worms urls once
the described-by is added to those html pages</p>
<ul>
<li><a href="https://aphia.org/id/taxname/127160">tasty fish</a></li>
<li><a href="https://aphia.org/id/taxname/110704">other organism</a></li>
</ul>
<h3 id="integration with vocabserver-webapp">Integration with vocabserver-webapp</h3>
<p>This section will demonstrate the interactions possible with the vocabserver</p>
<div id="container">
<vocab-search-bar id="search" search-endpoint="https://vocab.vliz.be/" nochange>
</vocab-search-bar>
</div>
<div id="selected_term_table">
</div>
<h3 id="full text example">Full text example</h3>
<p>This is a full text that you could find on any website that encorporates the MIA's</p>
<h3>Explore Marine Data, People, and Projects</h3>
<p>The world of marine research and information is vast and interconnected. Various platforms offer
access to data, people, projects, and publications that contribute to our understanding of
marine ecosystems. Below, we will guide you through some key resources where you can find
detailed datasets, research publications, and more. Each section includes links to relevant
content, providing a gateway to the treasure trove of marine information.</p>
<h4>Marine Regions and Geographic Data</h4>
<p>For those interested in marine regions and geographic points of interest, the <a
href="https://marineregions.org/mrgid/61473">Marine Regions</a> website offers various
resources. You can explore areas such as the <a href="https://marineregions.org/mrgid/4868">Grey
Region</a> and other unique locations like the <a
href="https://marineregions.org/mrgid/7632">Grey Region 2</a>. These regions provide
insights into specific marine environments that are critical for researchers and policymakers
alike.</p>
<h4>Marineinfo: Persons, Projects, and More</h4>
<p>The <a href="https://marineinfo.org">Marineinfo</a> platform is an excellent place to learn about key
figures and contributors in the marine research community. For example, you can explore the
profile of the <a href="https://marineinfo.org/id/person/38476">Linked Data Man</a>, a notable
figure in the field, or meet people like <a
href="https://marineinfo.org/id/person/41728">Rando</a> and <a
href="https://marineinfo.org/id/person/23412">Other Rando</a>, who have contributed to
marine science in various ways.</p>
<p>Additionally, Marineinfo provides access to <a href="https://marineinfo.org/id/dataset/8135">datasets
with URLs</a> and general datasets like the <a
href="https://marineinfo.org/id/dataset/6430">dataset</a> available for deeper
exploration. This platform also features significant marine research projects, such as this <a
href="https://marineinfo.org/id/project/5240">notable project</a> that delves into
important marine challenges.</p>
<h4>Publications, Events, and Organizations</h4>
<p>For those seeking publications on marine topics, Marineinfo also hosts numerous resources. You can
dive into research articles like the <a
href="https://marineinfo.org/id/publication/355430">publication with authors</a> or
explore other studies like this <a href="https://marineinfo.org/id/publication/300143">general
publication</a> and even multimedia material such as <a
href="https://marineinfo.org/id/publication/225534">some multimedia</a>.</p>
<p>If you're more interested in events, Marineinfo lists upcoming and past events such as <a
href="https://marineinfo.org/id/event/3255">Event 1</a> and <a
href="https://marineinfo.org/id/event/3252">Event 2</a>. Furthermore, you can discover
organizations like this <a href="https://marineinfo.org/id/institute/12919">institute</a> and
collections like the <a href="https://marineinfo.org/id/collection/1">Marine Collection</a>,
which play a vital role in advancing marine science.</p>
<h4>Aphia and Vocabulary Integration</h4>
<p>Another crucial resource for marine biodiversity is the <a href="https://aphia.org"
nochange>Aphia</a> platform, which provides taxonomic data on marine species. You can
explore fascinating organisms like the <a href="https://aphia.org/id/taxname/127160">tasty
fish</a> and <a href="https://aphia.org/id/taxname/110704">other organism</a>. Aphia
ensures that detailed taxonomic information is readily available to researchers and enthusiasts
alike.</p>
<p>Finally, the <a href="https://vocab.vliz.be">VocabServer</a> integrates marine data vocabularies,
enabling smooth interactions and searches within marine datasets. This server offers a search
bar to help users explore standardized terms and concepts crucial for marine data management.
</p>
<h3 id="no change / no update example">No change / No update example</h3>
<p> this wil demonstrate that even when a MIA url is given. It can be chosen not to be updated by the
MIA's</p>
<div>
<p> links where noupdate is defined will not be updated by the MIA's</p>
<p><a href="https://marineinfo.org/id/person/38476" mia-extra-properties="noupdate">Linked man
</a></p>
<p><a href="https://marineinfo.org/id/person/37869" mia-extra-properties="nodecorator">Very
handsome person is behind this link</a></p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js"
integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
crossorigin="anonymous"></script>
</body>
</html>