-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
207 lines (189 loc) · 8.81 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
<!doctype html>
<html class="no-js" lang="">
<head>
<title>JS-Widgets Demo</title>
<link rel="icon" type="image/svg+xml" href="./images/favicon.svg">
<link rel="icon" type="image/png" href="./images/favicon.png">
<link rel="stylesheet" href="https://unpkg.com/@elastic/eui@62.2.4/dist/eui_theme_light.css">
<link rel="stylesheet" href="./css/styles.css">
<link rel="stylesheet" href="https://ts4nfdi.github.io/terminology-service-suite/js-modules/2.0.1/terminology-service-suite.min.js">
<!-- <link rel="stylesheet" href="./css/semlookp_widgets.css/">-->
<link rel="stylesheet" href="./css/prism.css">
<script type="text/javascript" src="https://ts4nfdi.github.io/terminology-service-suite/js-modules/2.0.1/terminology-service-suite.min.js"></script>
<!-- <script type="text/javascript" src="./js/semlookp_widgets.js"></script>-->
<script>
let selectOption = "";
let pApi = "https://semanticlookup.zbmed.de/api/";
</script>
</head>
<body>
<div class="parent">
<div class="hor" style="max-width: 600px; margin-right: 20px">
<div class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--horizontal css-1yzwxdg-euiPanel-grow-m-m-plain-hasShadow" style="margin-bottom: 20px">
<div class="euiCard__content">
<span class="euiTitle euiCard__title css-1mr6cet-euiTitle-s">JS-Widgets Demo Project</span>
</div>
<img src="./images/NFDI_SemLookP_Logo.svg" alt="" style="margin-top: 10px; align-self: center; width: 95%">
<div class="euiCard__content">
<br>
<div class="euiText css-g2xc3e-euiText-m">
This is an example project illustrating the use of SemLookP's widgets in a plain JS environment. All widgets are created directly inside of <span class="mark">index.html</span>.
To access the widgets of SemLookP, a bundled javascript output file generated by esbuild in the <a href="https://github.com/nfdi4health/semlookp-widgets/">semlookp-widgets</a>
repository is included in this project's <span class="mark">js/</span> folder and embedded in <span class="mark">index.html</span> via script tag.
<br><br>
To create a widget, an empty container with an id has to be created first. This container can then be addressed in a script tag, where the SemLookP widget can now be rendered into
with the respective function added to <span class="mark">window['SemLookPWidgets']</span>. Here's an example code snippet:
</div>
<pre><code class="language-html"><head>
<link rel="stylesheet" href="https://unpkg.com/@elastic/eui@62.2.4/dist/eui_theme_light.css">
<link rel="stylesheet" href="./css/semlookp_widgets.css/">
<script type="text/javascript" src="./js/semlookp_widgets.js"></script>
</head>
<body>
<div id="datacontent_widget"></div>
<script>
let widgetContainer = document.getElementById('datacontent_widget');
window['SemLookPWidgets'].createDataContent(
{
api: "https://www.ebi.ac.uk/ols4/api/",
},
widgetContainer
);
</script>
</body></code></pre>
</div>
</div>
</div>
<div class="hor" style="max-width: 500px; margin-right: 20px">
<div class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--horizontal css-1yzwxdg-euiPanel-grow-m-m-plain-hasShadow" style="margin-bottom: 20px">
<div class="euiCard__content">
<span class="euiTitle euiCard__title css-1mr6cet-euiTitle-s">Choose an API</span>
</div>
<div class="euiCard__content">
<br>
<form>
<fieldset>
<label for="slp">
<input type="radio" id="slp" name="api" value="https://semanticlookup.zbmed.de/api/" onclick="pApi = this.value; initialize()" checked>
<span class="euiText css-g2xc3e-euiText-m">https://semanticlookup.zbmed.de/api/</span>
</label>
<br>
<label for="slpols">
<input type="radio" id="slpols" name="api" value="https://semanticlookup.zbmed.de/ols/api/" onclick="pApi = this.value; initialize()">
<span class="euiText css-g2xc3e-euiText-m">https://semanticlookup.zbmed.de/ols/api/</span>
</label>
<br>
<label for="ebi">
<input type="radio" id="ebi" name="api" value="https://www.ebi.ac.uk/ols4/api/" onclick="pApi = this.value; initialize()">
<span class="euiText css-g2xc3e-euiText-m">https://www.ebi.ac.uk/ols4/api/</span>
</label>
</fieldset>
</form>
</div>
</div>
<div class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--horizontal css-1yzwxdg-euiPanel-grow-m-m-plain-hasShadow" style="margin-bottom: 20px">
<div class="euiCard__content">
<span class="euiTitle euiCard__title css-1mr6cet-euiTitle-s">SelectOption</span>
</div>
<div class="euiCard__content">
<br>
<form>
<fieldset>
<label for="slp">
<input type="radio" id="abc primer" name="api" value="http://purl.obolibrary.org/obo/IAO_0000409" onclick="selectOption = this.value; initialize()">
<span class="euiText css-g2xc3e-euiText-m"><i>denotator type</i></span>
</label>
<br>
<label for="slpols">
<input type="radio" id="opanixil" name="api" value="http://purl.obolibrary.org/obo/UBERON_2001747" onclick="selectOption = this.value; initialize()">
<span class="euiText css-g2xc3e-euiText-m"><i>lateral mesethmoid wing</i></span>
</label>
<br>
<label for="ebi">
<input type="radio" id="empty" name="api" value="" onclick="selectOption = this.value; initialize()" checked>
<span class="euiText css-g2xc3e-euiText-m">no preselected value</span>
</label>
</fieldset>
</form>
</div>
</div>
<div class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--horizontal css-1yzwxdg-euiPanel-grow-m-m-plain-hasShadow" style="margin-bottom: 20px">
<div class="euiCard__content">
<span class="euiTitle euiCard__title css-1mr6cet-euiTitle-s">Autocomplete Widget</span>
</div>
<div class="euiCard__content">
<br>
<span class="euiText css-g2xc3e-euiText-m">
Here you can search for different concepts using the semanticlookup API.
</span>
<br><br>
</div>
<div id="autocomplete_widget"></div>
</div>
<div class="euiPanel euiPanel--plain euiPanel--paddingMedium euiCard euiCard--horizontal css-1yzwxdg-euiPanel-grow-m-m-plain-hasShadow">
<div class="euiCard__content">
<span class="euiTitle euiCard__title css-1mr6cet-euiTitle-s">Metadata Widget</span>
<br><br>
</div>
<div id="metadata_widget" style="text-align: left"></div>
</div>
</div>
<div class="hor" style="max-width: 500px">
<div id="datacontent_widget" style="margin-bottom: 20px"></div>
<div id="entityinfo_widget" style="margin-bottom: 20px"></div>
<div id="entityrelations_widget"></div>
</div>
</div>
<script>
function initialize() {
let widgetContainer = document.getElementById('autocomplete_widget');
window['SemLookPWidgets'].createAutocomplete(
{
api: pApi,
selectionChangedEvent:((props) => {
selectOption = props.length > 0 ? props[0].iri : selectOption;
initialize()
}),
preselected: [{iri:`${selectOption}`}],
allowCustomTerms:true,
singleSelection: true
},
widgetContainer);
widgetContainer = document.getElementById('datacontent_widget');
window['SemLookPWidgets'].createDataContent(
{
api: pApi,
},
widgetContainer);
widgetContainer = document.getElementById('entityinfo_widget');
window['SemLookPWidgets'].createEntityInfo(
{
api: pApi,
iri: selectOption,
hasTitle: true
},
widgetContainer);
widgetContainer = document.getElementById('metadata_widget');
window['SemLookPWidgets'].createMetadata(
{
api: pApi,
iri: selectOption,
parameter: "",
//useLegacy: false
},
widgetContainer);
widgetContainer = document.getElementById('entityrelations_widget');
window['SemLookPWidgets'].createEntityRelations(
{
api: "https://www.ebi.ac.uk/ols4/api/",
iri: selectOption,
hasTitle: true,
},
widgetContainer
);
}
initialize();
</script>
<script src="./js/prism.js"></script>
</body>
</html>