An embeddable widget for displaying Docmaps data, built with Lit and D3.
To see the widget in action, check out the Docmap explorer demo site!
The widget can be retrieved via CDN, or via NPM if your project already uses NPM.
You can directly pull in the widget in an HTML file without installing anything like so:
<head>
<script type='module' src='https://cdn.jsdelivr.net/npm/@docmaps/widget@latest/dist/index.min.js'></script>
</head>
<body>
<docmaps-widget doi='doi-to-render' serverurl='https://example.com'></docmaps-widget>
</body>
If your project already uses NPM, you can install the widget like so:
npm install @docmaps/widget
Then, add the widget to your page:
<script>
import '@docmaps/widget';
</script>
<docmaps-widget doi="doi-to-render" serverurl="https://example.com"></docmaps-widget>
These attributes can be added to the <docmaps-widget>
tag to configure the widget's behavior.
Attribute | Description |
---|---|
doi |
The DOI of the paper to render |
serverurl |
The URL of the server from which the docmap will be fetched. The widget will make a request to this server's GET /docmap_for/doi?subject={doi} endpoint, which must be implemented by the server in accordance with the official Docmaps API spec. |
If you prefer to pass a docmap directly to the widget, you must do so after the widget has been mounted, like so:
<head>
<script type='module' src='https://cdn.jsdelivr.net/npm/@docmaps/widget@latest/dist/index.min.js'></script>
</head>
<body>
<docmaps-widget id='my-widget'></docmaps-widget>
</body>
<script>
customElements.whenDefined('docmaps-widget') // wait for the custom docmaps-widget element to be defined
.then(() => {
const widgetElement = document.getElementById('my-widget');
widgetElement.docmap = {
// docmap here
};
});
</script>
For examples of docmaps to feed into the widget here, see the examples directory.
Graph view:
Clicking a node opens the detail view:
pnpm run dev
This starts the server on http://localhost:5173
The first time you run the tests, you will need to install browsers for Playwright to use
pnpm run install:browsers
pnpm run test
pnpm run test:unit
To see the tests run in step-by-step, you can open the Playwright UI like this. The Playwright UI is an amazing tool because it lets you see screenshots of each step of the test, and it automatically reruns the tests when you make changes.
pnpm run test:integration:ui
Alternatively, you can run the tests headlessly and see results in the terminal:
pnpm run test:integration
By default, the tests only run in chromium locally. To run in chromium, firefox, and webkit, you can run:
# Headless
pnpm run test:integration:all-browsers
# With UI
pnpm run test:integration:ui:all-browsers