Skip to content

Commit

Permalink
Merge pull request #630 from EBISPOT/feature/update-ols-widget-config
Browse files Browse the repository at this point in the history
Update build widget script
  • Loading branch information
henrietteharmse authored Mar 18, 2024
2 parents 86c5262 + 3d48584 commit 37256e2
Show file tree
Hide file tree
Showing 5 changed files with 87 additions and 18 deletions.
6 changes: 4 additions & 2 deletions frontend/build_widgets.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,8 @@ build({
plugins: [
],
logLevel: 'info',
sourcemap: 'linked'
sourcemap: 'linked',
format: "esm"
});

console.log('### Building ols4_widgets.min.js')
Expand All @@ -29,7 +30,8 @@ build({
],
logLevel: 'info',
minify: true,
sourcemap: 'linked'
sourcemap: 'linked',
format: "esm"
});

console.log('### Copying treestyles.css')
Expand Down
71 changes: 71 additions & 0 deletions frontend/dist_widgets/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
# OLS4 Widgets

OLS4 Widgets is a library for various ols components. At the moment only one component
is exposed called `entityTree` which is ideal for seamless ontology visualisations.

## Installation

You can install OLS4 Widgets using npm:

```bash
npm i @ebi-ols/ols4-widgets
```

This command installs the latest version of OLS4 widgets and saves it as a dependency in your project's `package.json` file.

## Usage

After installation, you can use OLS4 Widgets in your project by including the necessary files and
initializing the widget with a simple javaScript command. Here's a quick example of
how to display the chebi tree in a **React** application:

1. Import the dependencies in the js file you want to render the component:

```javascript
import '@ebi-ols/ols4-widgets/treestyles.css'
import { useEffect, useRef } from 'react';
import { createEntityTree } from '@ebi-ols/ols4-widgets/ols4_widgets';
```

2. Create the function to render the tree:

```javascript
function EntityTree() {

let div = useRef()

useEffect(() => {
if(div.current) {
createEntityTree({
ontologyId: "chebi",
apiUrl: "https://www.ebi.ac.uk/ols4/"
}, div.current);
}
}, [div])

return <div ref={div}></div>
}

```
**NOTE:** The main point to notice here is the ontologyId and the apiUrl. The ontologyId is the id of the ontology you want to display and the apiUrl is the base url of the OLS4 API.

3. Add the element where you want the tree to appear in your HTML file:

```javascript
function App() {
return (
<div className="App">
<EntityTree />
</div>
);
}
```
### Example of the rendered tree

![chebi-tree-render](https://github.com/EBISPOT/ols4/assets/13108541/b9e14c70-6be0-4007-8311-91605087d5ad)


## Features

- Easy to integrate with any web application.
- Lightweight and fast.
15 changes: 5 additions & 10 deletions frontend/dist_widgets/manually_maintained_types.d.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@

declare global {
interface OLSWidgets {
createEntityTree:(props:{
iri?:string,
ontologyId:string,
apiUrl:string
}, target:Element)=>void
}
}
export function createEntityTree(props:{
iri?:string,
ontologyId:string,
apiUrl:string
}, target:Element);

7 changes: 4 additions & 3 deletions frontend/dist_widgets/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "ols4-widgets",
"version": "1.0.0",
"main": "ols4_widgets.min.js",
"name": "@ebi-ols/ols4-widgets",
"version": "1.0.2",
"type": "module",
"main": "ols4_widgets.js",
"types": "manually_maintained_types.d.ts"
}
6 changes: 3 additions & 3 deletions frontend/src/widgets/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@

import { createEntityTree } from "./EntityTreeWidget"

window['OLSWidgets'] = {
createEntityTree
}
// window['OLSWidgets'] = {
// createEntityTree
// }

export { createEntityTree }

0 comments on commit 37256e2

Please sign in to comment.