Skip to content

Parse and load a Linkurious visualization in Ogma with one line of code

License

Notifications You must be signed in to change notification settings

Linkurious/ogma-linkurious-parser

Repository files navigation

Ogma-Linkurious-Parser

Description

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.

Prerequisites

  • Linkurious Enterprise 2.10.x or above
  • An existing visualization to export
  • An Ogma license

Installation

npm install @linkurious/ogma-linkurious-parser

Usage

In order to create an Ogma visualization with your Linkurious styles:

  1. Get your visualization using Linkurious Enterprise REST API.

  2. Get Linkurious Enterprise configuration using Linkurious Enterprise REST API.

  3. If you need to reproduce the same caption styles, get graph schema using Linkurious Enterprise REST API.

  4. Initialize LKOgma and call initVisualization with 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.

Licensing

The Ogma-Linkurious-parser is licensed under the Apache License, Version 2.0. See LICENSE for the full license text.

About

Parse and load a Linkurious visualization in Ogma with one line of code

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published