Appearance
Ogma + TypeScript
Installation
Using template
Check out our template repository.
Details
If you wish to use Ogma within a TypeScript application, we suggest you adding it as a dependency to your project. This can be done in two ways:
Through npm
If you are developing locally and can access the outside Internet you can also install directly.
sh
npm install --save https://get.linkurio.us/api/get/npm/ogma/<VERSION>/?secret=<YOUR_API_KEY>
# or yarn
yarn add https://get.linkurio.us/api/get/npm/ogma/<VERSION>.tgz?secret=<YOUR_API_KEY>
If you cannot use npm
from external sources, because of company policy, you can always install it via tar.gz
.
Using downloaded tar.gz
The same link used for the npm
version can be used to download a tar.gz
file: just past it into your browser to download the file. Once downloaded it is possible to tell npm
to use it to install locally:
sh
npm install --save path/to/ogma-v.X.X.X.tar.gz
Usage
js
import Ogma from '@linkurious/ogma';
const ogma = new Ogma();
ogma.addNode({ id: 0 });
You can import some other interfaces from the file if you wish to use them in your code, e.g:
ts
import Ogma, { Node, Color } from '@linkurious/ogma';
function getColor(node: Node): Color {
return node.getAttribute('color');
}
const ogma = new Ogma();
const node = ogma.addNode({ id: 0, attributes: { color: 'blue' } });
console.log(getColor(node));
Data typing
Since Ogma v. 3.0.0 the data
field for any item can be typed directly on the Node
, Edge
, NodeList
and EdgeList
: in order to leverage such feature it is possible to use typed versions of any API method that returns any <Item>
or <ItemList>
.
By default the assigned data type is set to any
to not have any backward compatibility issue.
For instance:
ts
import Ogma from '@linkurious/ogma';
interface Data {
company: string;
}
interface EdgeData {
timestamp: number;
}
const ogma = new Ogma();
const node = ogma.addNode<Data>({
id: 0,
attributes: { color: 'blue' },
data: { company: 'Linkurious' }
});
// ...later on
const currentNode = ogma.getNodes<Data>().get(0); // currentNode is of type Node<Data> here
// It possible to assign also the type of adjacent items to any graph item also
const otherNode = ogma.addNode<Data, EdgeData>({
id: 0,
attributes: { color: 'blue' },
data: { company: 'Linkurious' }
});
// ...later on
// For the "currentNode" version the edges will have the "any" type because a more specific one hasn't been set before
const adjacentEdges = currentNode.getAdjacentEdges(); // adjacentEdges is of type EdgeList here
// On the other hand using "otherNode"
const otherAdjacentEdges = otherNode.getAdjacentEdges(); // otherAdjacentEdges is of type EdgeList<EdgeData> now
The provided Ogma definition file contains already this typings for each method, which are named, as expected NodeDataType
and EdgeDataType
.
Methods like addGraph
will expose both, for instance:
ts
import Ogma from '@linkurious/ogma';
interface NodeData {
company: string;
}
interface EdgeData {
timestamp: number;
}
const ogma = new Ogma();
ogma
.addGraph<NodeData, EdgeData>({
nodes: [
{
id: 0,
attributes: { color: 'red' },
data: { company: 'Linkurious' }
},
{
id: 1,
attributes: { color: 'blue' },
data: { company: 'Company X' }
}
],
edges: [
{
id: 0,
source: 0,
target: 1,
data: { timestamp: 1580746239841 }
}
]
})
.then(
(graph: {
nodes: NodeList<NodeData, EdgeData>;
edges: EdgeList<EdgeData, NodeData>;
}) => {
// ...
}
);