elisedeux/Linkurious_SDK_Ex1.js

## Linkurious_SDK_Ex1.js

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="./lib/ogma.min.js"></script>
  <script src="./lib/jquery-3.1.1.min.js"></script>
  <style>
    #graph-container {
        width: 300px;
        height: 300px;
        position: relative;
     }
  </style>
  <title>Linkurious SDK</title>
</head>
<body>
  <h1>Customer: Paula Smith</h1>
  <div id="graph-container"></div>

<script>
// Create an instance of Ogma and assign it to the graph-container DOM element.
var ogma = new Ogma({
  render: ['canvas'],
  container: 'graph-container'
});

// Use the Linkurious SDK REST API to retrieve the nodes associated to the customer 1736.
function loadCustomer(id) {
  // Configure and send the Ajax query asynchronously.
  $.ajax({
    type: "POST",
    // Authentication information takes the user login and the API key.
    headers: {
      "Content-Type": "application/json",
      "Authorization": "Basic " + btoa('root@root.com:6160b54b872459ce1c06c1a8ccdd9019')
    },
    // REST method url
    url: "http://localhost:3000/api/1cf9e65b/graph/nodes/expand",
    // Message body
    data: JSON.stringify({ids:[id]})
  }).fail( () => {
    // On error, display an alert.
    alert( "Error" );
  }).done(response => {
    // When the response arrives, update the graph.
    updateGraph(response);
  })
}

// Update the visualization with the new data.
function updateGraph(data){
  // Transform the graph contents into
  var g = graphFromJSON(data);
  // Reset the graph contents.
  ogma.graph.clear();
  // Load the nodes and edges.
  ogma.graph.addNodes(g.nodes);
  ogma.graph.addEdges(g.edges);
  // Apply a ForceLink layout.
  ogma.layouts.start( 'forceLink', undefined , () => ogma.locate.center());
}

// Translate nodes and edges from Linkurious SDK JSON format into Ogma graph structure.
function graphFromJSON(jsonData){
  const nodes = new Map();
  const edges = new Map();
  jsonData.forEach( n => {
    nodes.set(n.id, n);
    n.edges.forEach( e => edges.set(e.id, e));
  });
  return {nodes: Array.from(nodes.values()), edges: Array.from(edges.values())};
}

// Define Ogma style.
function initOgmaStyle(){
  // Set the node label.
  ogma.design.setNodeText(n => {
    if (n.data.category === 'Customer')
      return n.data.fullname;
    if (n.data.category === 'Address')
      return n.data.city;
    else
      return n.data.category;
  });
}

// Bootstrap the Webpage.
initOgmaStyle();
loadCustomer(1736);

</script>
</body>
</html>

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<script src="./lib/ogma.min.js"></script>
	<script src="./lib/jquery-3.1.1.min.js"></script>
	<style>
	#graph-container {
	width: 300px;
	height: 300px;
	position: relative;
	}
	</style>
	<title>Linkurious SDK</title>
	</head>
	<body>
	<h1>Customer: Paula Smith</h1>
	<div id="graph-container"></div>

	<script>
	// Create an instance of Ogma and assign it to the graph-container DOM element.
	var ogma = new Ogma({
	render: ['canvas'],
	container: 'graph-container'
	});

	// Use the Linkurious SDK REST API to retrieve the nodes associated to the customer 1736.
	function loadCustomer(id) {
	// Configure and send the Ajax query asynchronously.
	$.ajax({
	type: "POST",
	// Authentication information takes the user login and the API key.
	headers: {
	"Content-Type": "application/json",
	"Authorization": "Basic " + btoa('root@root.com:6160b54b872459ce1c06c1a8ccdd9019')
	},
	// REST method url
	url: "http://localhost:3000/api/1cf9e65b/graph/nodes/expand",
	// Message body
	data: JSON.stringify({ids:[id]})
	}).fail( () => {
	// On error, display an alert.
	alert( "Error" );
	}).done(response => {
	// When the response arrives, update the graph.
	updateGraph(response);
	})
	}

	// Update the visualization with the new data.
	function updateGraph(data){
	// Transform the graph contents into
	var g = graphFromJSON(data);
	// Reset the graph contents.
	ogma.graph.clear();
	// Load the nodes and edges.
	ogma.graph.addNodes(g.nodes);
	ogma.graph.addEdges(g.edges);
	// Apply a ForceLink layout.
	ogma.layouts.start( 'forceLink', undefined , () => ogma.locate.center());
	}

	// Translate nodes and edges from Linkurious SDK JSON format into Ogma graph structure.
	function graphFromJSON(jsonData){
	const nodes = new Map();
	const edges = new Map();
	jsonData.forEach( n => {
	nodes.set(n.id, n);
	n.edges.forEach( e => edges.set(e.id, e));
	});
	return {nodes: Array.from(nodes.values()), edges: Array.from(edges.values())};
	}

	// Define Ogma style.
	function initOgmaStyle(){
	// Set the node label.
	ogma.design.setNodeText(n => {
	if (n.data.category === 'Customer')
	return n.data.fullname;
	if (n.data.category === 'Address')
	return n.data.city;
	else
	return n.data.category;
	});
	}

	// Bootstrap the Webpage.
	initOgmaStyle();
	loadCustomer(1736);

	</script>
	</body>
	</html>