Ogma-Linkurious-Parser is an official library maintained by the Linkurious team that allows you to quickly parse and load a Linkurious Enterprise visualization in Ogma with one line of code and apply different Linkurious Enterprise styles, filters, captions and more.
- Linkurious Enterprise 2.10.x or above
- An existing visualization to export
- An Ogma license
npm install @linkurious/ogma-linkurious-parser
In order to create an Ogma visualization with your Linkurious styles:
-
Get your visualization using Linkurious Enterprise REST API.
-
Get Linkurious Enterprise configuration using Linkurious Enterprise REST API.
-
If you need to reproduce the same caption styles, get graph schema using Linkurious Enterprise REST API.
-
Initialize
LKOgmaand callinitVisualizationwith the configuration and the visualization data from the previous steps. You can also pass a base url as second parameter in case you are using relative paths in your image style urls.
A full working example using the Linkurious Enterprise REST API library:
const {RestClient} = require('@linkurious/rest-client');
const {LKOgma} = require('@linkurious/ogma-linkurious-parser');
async function main() {
// Initialize the rest client
const rc = new RestClient({baseUrl: 'http://localhost:3000'});
// Log in
await rc.auth.login({
usernameOrEmail: 'your-username',
password: 'your-password'
});
// Get linkurious configuration response
const linkuriousConfigurationResponse = await rc.config.getConfiguration();
// Get the visualisation configuration response
const visualizationResponse = await rc
.visualization.getVisualization({
sourceKey: 'e7900d9b',
id: 3
});
const nodeTypesResponse = await this.rc.graphSchema.getTypesWithAccess({
entityType: 'node'
});
const edgeTypesResponse = await this.rc.graphSchema.getTypesWithAccess({
entityType: 'edge'
});
if (linkuriousConfigurationResponse.isSuccess() && visualizationResponse.isSuccess() && nodeTypesResponse.isSuccess() && edgeTypesResponse.isSuccess()) {
const ogmaConfiguration = linkuriousConfigurationResponse.body.ogma;
const lkeServerBaseUrl = linkuriousConfigurationResponse.body.url;
const graphSchema = {
node: nodeTypesResponse.body.node.results,
edge: edgeTypesResponse.body.edge.results
}
const visualizationConfiguration = visualizationResponse.body;
// Initialize ogma object
const ogma = new LKOgma(
{
...ogmaConfiguration,
options: {
...ogmaConfiguration.options,
backgroundColor: 'rgba(240, 240, 240)'
}
},
// the base url is an optional parameter
lkeServerBaseUrl
);
// Set HTML container where Ogma will be rendered
ogma.setContainer('graph-container');
// Set graphSchema that will be used in defining caption styles
ogma.LKCaptions.graphSchema = graphSchema;
// Initialize the visualization content & styles
await ogma.initVisualization(visualizationConfiguration);
}
}
main();You can use any other Ogma feature you would like to apply to the visualization.
To learn more about Ogma check our official documentation.
The Ogma-Linkurious-parser is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.
![renovate[bot] avatar](https://avatars.githubusercontent.com/in/2740?v=4 "renovate[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent