This is an example project illustrating the use of SemLookP's widgets in a plain JavaScript environment. All widgets are created directly inside of index.html.
To access the widgets of SemLookP, a bundled javascript output file generated by esbuild in the semlookp-widgets
repository is included in this project's js/ folder and embedded in index.html via script tag.
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 window['SemLookPWidgets']. Here's an example code snippet:
<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>To run the project, just run the index.html.