GithubHelp home page GithubHelp logo

Comments (21)

jamesamcl avatar jamesamcl commented on July 29, 2024 3

Thanks, @haideriqbal lets look at this next Thursday when we are in the office

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024 3

@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.

from ols4.

jamesamcl avatar jamesamcl commented on July 29, 2024 2

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:

Screenshot 2024-02-22 at 18 42 31

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!

from ols4.

matentzn avatar matentzn commented on July 29, 2024 1

cc @rombaum

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024 1

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.

from ols4.

henrietteharmse avatar henrietteharmse commented on July 29, 2024 1

@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.

from ols4.

rombaum avatar rombaum commented on July 29, 2024 1

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.

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024 1

@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!

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024 1

New widget is published here: https://www.npmjs.com/package/@ebi-ols/ols4-widgets Closing this issue now :)

from ols4.

jamesamcl avatar jamesamcl commented on July 29, 2024

@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

from ols4.

jamesamcl avatar jamesamcl commented on July 29, 2024

(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)

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

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

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

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! :)

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024

Hi @CarMoreno! we still need to coordinate this within our team and once we have a timeline we'll let you know soon :)

from ols4.

rombaum avatar rombaum commented on July 29, 2024

@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.

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

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.

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

@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!

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024

Hi @CarMoreno , thank you for your kind words... let us know if you need any further help :)

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

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!

from ols4.

haideriqbal avatar haideriqbal commented on July 29, 2024

@CarMoreno I will look into it and get back to you :)

from ols4.

CarMoreno avatar CarMoreno commented on July 29, 2024

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!

from ols4.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.