Skip to content
This repository was archived by the owner on Sep 26, 2024. It is now read-only.

Embedding

Jump to bottom
Alexey Morozov edited this page May 22, 2018 · 6 revisions

Technological overview

Ontodia is written in TypeScript language, uses npm package manager for dependency managment and webpack to build JavaScript bundle.

Ontodia builds are available in npm repository: https://www.npmjs.com/package/ontodia.

The main integration scenario for Ontodia is to use it as an npm dependency in your project and package it along with other dependencies into your application by build and package system you use, however fallback to <script> loading also exists.

Usage of TypeScript language

Though Ontodia is written in TypeScript, you can still use Ontodia library without any functionality degradation in JavaScript application, Ontodia build has JavaScript as well.

However, for TypeScript users all needed type definitions are provided along with the library to use type information for code completing, documentation and type checks.

Using Ontodia as npm dependency

You can reference Ontodia npm package in your package.json and use it through modules. Ontodia has the following dependencies:

name dependency type
react peer dependency
react-dom peer dependency
@types/react typings dependency required only for TypeScript projects
Font Awesome runtime dependency

When engaging with Ontodia, you might want to take a look at a couple of example projects with sample html page and aligned build process:

Loading Ontodia via <script>

Building Ontodia with all dependencies

Ontodia requires some dependencies to run, and default npm build of Ontodia does not contain all the dependencies, requiring application to provide those dependencies on build step. When using Ontodia without any build pipeline, you need to have all dependencies bundled with Ontodia. You can do this by building Ontodia with BUNDLE_PEERS environment variable set. This command will do it on Linux/MacOS:

BUNDLE_PEERS=true npm run build

Bundle will be built at dist/ontodia.js

Including it into your project.

To bootstrap Ontodia, you will have to include some other dependencies by yourself:

  • React
  • React-DOM
  • Font Awesome fonts and CSS

We've created JSFiddle example.

The resulting code will look like this:

<html>

<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <script type="text/javascript" src="https://unpkg.com/ontodia@0.8.0/dist/ontodia-full.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
  <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>

  <style type="text/css">
    html, body, #container {
      height: 100%;
      overflow: hidden;
      margin: 0;
      padding: 0;
    }
  </style>

  <script type="text/javascript">
    //<![CDATA[
    window.onload = function () {
        function onWorkspaceMounted(workspace) {
            if (!workspace) { return; }
            workspace.getModel().importLayout({        
                dataProvider: new Ontodia.SparqlDataProvider({
                    endpointUrl: 'https://library-ontodia-org.herokuapp.com/sparql',
                    imagePropertyUris: [                
                        'http://xmlns.com/foaf/0.1/img',
                    ],
                    queryMethod: Ontodia.SparqlQueryMethod.GET
                }, Ontodia.OWLStatsSettings),
            });
        }

        ReactDOM.render(
            React.createElement(Ontodia.Workspace, {ref: onWorkspaceMounted}),
            document.getElementById('container')
        );
    }
    //]]>
  </script>
</head>

<body>
  <div id="container"></div>
</body>

</html>

Navigation

Tutorials

Development Notes

Clone this wiki locally