ols4
ols4 copied to clipboard
EBISPOT
Is it possible to use OLS UI components in other websites?
Hi SPOT Team 👋, I have a simple question. Is it possible to include someway the Tree view UI component on a website (maybe using an iframe?). We are evaluating options to show the ChEBI Ontology on the new ChEBI website and we are studying a few options.
Thank you!
Hi @CarMoreno! the component you mentioned is not being maintained by us anymore so unfortunately we won't be able to help here 😢 This is the treeview component we currently use in ols but it won't work out of the box as a widget atm.
@henrietteharmse Are these use cases being tracked somewhere since the issues are being closed?
EDIT: I just realised this sounded critical, sorry it really wasn't, I just worry about losing info about new use cases especially when they come from EBI
We do actually have a widget for the current tree view, it's just not being published anywhere at the moment. You can build it from the OLS4 repo like this (requires node.js to be installed just to build it but not to use it):
cd frontend
npm install
npm run build:widgets
Now you should have some files in the dist_widgets folder:
> ls -hl dist_widgets/
total 11680
-rw-r--r-- 1 jmcl EBI\Domain Users 158B 23 Nov 10:59 manually_maintained_types.d.ts
-rw-r--r-- 1 jmcl EBI\Domain Users 1.4M 22 Feb 18:34 ols4_widgets.js
-rw-r--r-- 1 jmcl EBI\Domain Users 2.6M 22 Feb 18:34 ols4_widgets.js.map
-rw-r--r-- 1 jmcl EBI\Domain Users 282K 22 Feb 18:34 ols4_widgets.min.js
-rw-r--r-- 1 jmcl EBI\Domain Users 1.4M 22 Feb 18:34 ols4_widgets.min.js.map
-rw-r--r-- 1 jmcl EBI\Domain Users 129B 6 Jul 2023 package.json
-rw-r--r-- 1 jmcl EBI\Domain Users 51K 22 Feb 18:34 treestyles.css
Here is a small example of using it to show the chebi tree. The only dependencies are the two files ols4_widgets.js (or ols4_widgets.min.js for a smaller version) and treestyles.css.
<html>
<head>
<link rel="stylesheet" href="treestyles.css">
</head>
<body>
<div id="tree"></div>
<script src="ols4_widgets.js"></script>
<script>
OLSWidgets.createEntityTree({
ontologyId: "chebi",
apiUrl: "https://www.ebi.ac.uk/ols4/"
}, document.getElementById('tree'));
</script>
</body>
</html>
Here is a screenshot of the output:
Ideally (1) these JS files would be built as a github action and pushed to github releases and (2) the docs I wrote above would be in the readme somewhere!
(Reopening because it would be nice if the docs I wrote above didn't get lost, but up to @henrietteharmse what to do with them)
Hi @jamesamcl It would be wonderful if those components, or at least Tree view for now, could be published on npm. If you guys ask me, OLS widgets are clean and very usables. Have you guys thought about publishing UI components as npm packages?. For ChEBI team would be very useful at least having Tree view for our ChEBI website. cc @eloyfelix
@jamesamcl Yes, indeed the "docs" added now is useful. It would have been helpful if it was added when the component was added. When we looked through the code base we could not find it.
I will assign Haider to have it published on npm with your help.
Thanks, @haideriqbal lets look at this next Thursday when we are in the office
Hey everyone! Just wanted to check in and see if there's any update on when the package might be published? It would be really helpful for us to know so we can start planning some topics on our end. Thanks a bunch! :)
Hi @CarMoreno! we still need to coordinate this within our team and once we have a timeline we'll let you know soon :)
@CarMoreno I don't want to hijack this discussion here. But maybe our widgets are also interesting for you. We developed one of the widgets together with @jamesamcl and @serjoshua in the past. This is also the part @jamesamcl was talking in his earlier comment. Nevertheless we are provided a whole suite of different React-based widgets which should be compatible with OLS3 and OLS4. There will be a bigger update of the widgets in the next week. In this update we will also provide the tree widget from OLS4 directly. If you are interested just contact me. @matentzn thanks for pointing me to this post.
https://github.com/nfdi4health/semlookp-widgets
Nevertheless were are also interested in the npm publication. Since it is easier for us to reuse this widget in our suite.
Hi @rombaum, thank you for your reply. We are using VueJS in the frontend, so I do not know if seemlookp-widgets package will be compatible with our code, what do you think?. I was checking all the components and it is a great job. If the new tree view will be released next week and, if it is compatible with VueJS, I think we could use it.
Hey @CarMoreno there is already a proof-of-concept branch with a JavaScript version of the widgets. This will be released on a regular basis in the future. We will focus on this after the bigger update mentioned before. So at least this should work for you.
@rombaum, awesome news! Plain JavaScript sounds like it could be a perfect fit for us. We're really excited to dive into experimenting with those components. Just curious, any idea when the tree view component for plain JavaScript might be released? Maybe by the end of this month or around that time? Thanks a bunch!
@CarMoreno we have published the treeview component on npm (https://www.npmjs.com/package/@ebi-ols/ols4-widgets?activeTab=readme) and you can use it in your webapp now :) The readme has an example of how to use it with React framework which you can use as a reference for your VueJS application.
@haideriqbal and the entire team, thank you immensely for not only delivering a quick solution but also for the exemplary code example and comprehensive documentation 🙌 . We are going to put effort into integrating the solution provided in our VueJS application this week. If we have any feedback or additional comments, we'll communicate them to you!
Hi @CarMoreno , thank you for your kind words... let us know if you need any further help :)
Hi @haideriqbal, hope you're doing well! I was wondering if there's an option within the package to render the ontology based on the CURIE. For instance, when utilizing OLS to search for CHEBI:15377 (water), I'm currently receiving a tree view representing a portion of the ontology related to water, but not the entire ontology. Having this functionality would greatly benefit us as it would allow us to include the component in every compound detail view on our beta site. Thanks in advance for your help!
New widget is published here: https://www.npmjs.com/package/@ebi-ols/ols4-widgets Closing this issue now :)
Hi @haideriqbal, I hope you're doing well. I wanted to apologize for my delayed response; priorities have shifted a bit since we last discussed this feature, and I also took a few days off for the holidays. I reviewed the component today, and it looks fantastic, we are just thinking of customizing it even more.
PD: I was talking with @theArsalanM and he told me that we could use the OLS API to get customized results and show our graph using data from there. So we will be exploring that option.
Thank you very much again for your excellent work!