https://github.com/vemonet/nanopub-js
🧬 A Web Component to display Nanopublications
https://github.com/vemonet/nanopub-js
nanopublications web-components
Last synced: 30 days ago
JSON representation
🧬 A Web Component to display Nanopublications
- Host: GitHub
- URL: https://github.com/vemonet/nanopub-js
- Owner: vemonet
- License: mit
- Created: 2023-03-06T10:37:50.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-20T08:05:00.000Z (about 3 years ago)
- Last Synced: 2026-04-02T08:23:18.563Z (3 months ago)
- Topics: nanopublications, web-components
- Language: TypeScript
- Homepage: https://vemonet.github.io/nanopub-js
- Size: 976 KB
- Stars: 4
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# 🧬 Web Components to display Nanopublications
`@nanopub/display` is a library of standard web components to easily display [Nanopublications](https://nanopub.net) in applications built using any web framework (pure HTML, React, Angular, Vue, Svelte).
If you want to improve this library, please refer to the [contribute page](/pages/CONTRIBUTING.html) which details how to use the library in development.
## 🏷️ As easy as HTML
`` and `` are just HTML elements, you can use them anywhere you can use HTML:
```html
```
> `` enables developers and users to control which graphs from the nanopublication are displayed.
## 💫 Declarative rendering
`@nanopub/display` can be used with popular declarative rendering libraries like **React**, **Angular**, **Vue**, Svelte, and lit-html
```js
import {html, render} from 'lit-html'
import '@nanopub/display'
const np = 'https://purl.org/np/RAHtkscyyyJDLvWRuINckQrn5rbHzQKvwakNVC3fmRzGU'
render(
html`
This is a <nanopub-display>
`,
document.body
)
```
## 🧶 Cytoscape configuration
`@nanopub/display` can also be used to generate a cytoscape configuration to nicely display your nanopublication with [CytoscapeJS](https://js.cytoscape.org).
⚠️ Cytoscape is not imported by `@nanopub/display`, you will need to make sure to install the following packages first:
```bash
npm i --save cytoscape cytoscape-cose-bilkent cytoscape-popper
# or
yarn add cytoscape cytoscape-cose-bilkent cytoscape-popper
```
The code below shows how to easily generate the cytoscape configuration, please refer to the [cytoscape documentation](https://js.cytoscape.org/#getting-started) to see how to setup your cytoscape container.
```ts
import {cyGetConfig, cyShowNodeOnClick, cyHighlightConnectedEdges} from '@nanopub/display';
import cytoscape, { Core } from 'cytoscape';
import popper from 'cytoscape-popper';
import COSEBilkent from 'cytoscape-cose-bilkent';
// Get the cytoscape div container, and nanopub RDF
const cyContainer?: HTMLDivElement;
const nanopubTrigRdfString?: string;
// Generate the cytoscape config for a given nanopub RDF
const cytoscapeConfig = cyGetConfig(nanopubTrigRdfString),
// Provide the generated config and cytoscape container to the cytoscape builder
const cy = cytoscape({
...cytoscapeConfig,
container: cyContainer
})
// Hightlight connected and show a card with the content of the node on click
cy.on('tap', "node", (e: any) => cytoscapeHighlightConnectedEdges(e, cy))
cy.on('tap', 'node', cytoscapeShowNodeOnClick);
```
# 📥️ Install
`` is distributed on npm, so you can install it in your project, or use it via npm CDNs like [unpkg.com](https://unpkg.com).
## 📦️ Install with a package manager
The most convenient way to install a package in your project, using either `npm` or `yarn`:
```bash
npm i --save @nanopub/display
# or
yarn add @nanopub/display
```
### ⚛️ Define types for React apps
To fix JSX types, for example when used in a React app, you will need to add this declaration to one of your project `.d.ts` file:
```ts
declare namespace JSX {
interface NanopubDisplay {
url?: string
rdf?: string
}
interface NanopubStatus {
url?: string
}
interface IntrinsicElements {
'nanopub-display': NanopubDisplay
'nanopub-status': NanopubStatus
}
}
```
## 🌐 Import from a CDN
npm CDNs like [unpkg.com](https://unpkg.com) or [jsdelivr.com](https://www.jsdelivr.com) can directly serve files that have been published to npm. This works great for standard JavaScript modules that the browser can load natively, or minified bundles.
For this element to work from unpkg.com specifically, you need to include the `?module` query parameter, which tells unpkg.com to rewrite "bare" module specifiers to full URLs.
### 🛩️ Import Module
In HTML:
```html
```
In JavaScript:
```js
import {NanopubDisplay} from 'https://unpkg.com/@nanopub/display?module'
```
### 🚛 Import Bundle
We also distribute Nanopub Display as a minified bundle with all dependencies pre-included (~60kB).
Import the latest version:
```html
```
In production we recommend to use a specific version:
```html
```