time/index.html

﻿<!DOCTYPE html>
<html>
	<head>
		<title>AMT | Allen-Freksa-Time</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<script type="text/javascript" src="amt.js"></script>
		<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
		<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
		<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
		<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.js"></script>
		<link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.20.0/vis.min.css" rel="stylesheet" type="text/css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			body {
				height: 100%;
				width: 100%;
				position: absolute;
				overflow: hidden;
				display: flex;
		    	min-height: 100vh;
		    	flex-direction: column;
			}
			#footer {
				height: 100px;
				color: black;
			}
			#graph {
				height: calc(100% - 100px);
			}
			.description {
				margin-left: 25px;
			}
			.modal {
				width: 90% !important;
				height: 90% !important;
			}
		</style>
		<script>
			var TIME = {};
			TIME.ontology = "time";
			TIME.graph = {};
			TIME.edit = false;
			TIME.thisNodes = [];
			TIME.thisEdges = [];
			TIME.inverse = false;
			var update = function() {
				if (TIME.amt) {
					var updated = TIME.amt.getGraph(!TIME.edit,true);
					TIME.graph.edges.clear();
					TIME.graph.nodes.clear();
					/*
						Hier wird spezifiziert, wie die Knoten aussehen sollen
					*/
					for (var i in updated.nodes) {
						updated.nodes[i].length = 10/updated.nodes[i].width;
						if (!TIME.edit) {
							updated.nodes[i].chosen = false;
						}
						if (updated.nodes[i].concept.includes("Event")) {
							updated.nodes[i].color = {background:'#00ccff', border:'#00ccff', highlight:{background:'white', border:'#00ccff'}};
							updated.nodes[i].shape = "box";
						} else {
							updated.nodes[i].color = {background:'grey', border:'black', highlight:{background:'white',border:'black'}};
							updated.nodes[i].shape = "box";
						}
					}
					/*
						Hier wird spezifiziert wie die Kanten aussehen sollen, welche angezeigt werden sollen, etc
					*/
					var hiddenQuestionMarks = true;
					if ($("#showQuestionMark").is(":checked")) {
						hiddenQuestionMarks = false;
					} else {
						hiddenQuestionMarks = true;
					}
					var hiddenInverse = false;
					/*var hiddenInverse = true;
					if (TIME.edit) {
						hiddenInverse = false;
					} else {
						if ($('input[name=group1]:checked').val()==="showAllInverse") {
							hiddenInverse = false;
						} else {
							hiddenInverse = true;
						}
					}*/
					for (var i in updated.edges) {
						updated.edges[i].arrowStrikethrough = false;
						updated.edges[i].chosen = false;
						if (updated.edges[i].width < 0.1) {
							updated.edges[i].hidden = !TIME.edit;
						}
						var roleWithPrefix = "http://academic-meta-tool.xyz/AllenFreksa#";
						if (updated.edges[i].role===roleWithPrefix+"q") {
							updated.edges[i].color = {color:"grey", highlight:"black"};
							updated.edges[i].dashes = true;
							updated.edges[i].hidden = hiddenQuestionMarks;
						} else if (updated.edges[i].role===roleWithPrefix+"e") {
							updated.edges[i].color = {color:"grey", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"b") {
							updated.edges[i].color = {color:"red", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"a") {
							updated.edges[i].color = {color:"green", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"d") {
							updated.edges[i].color = {color:"blue", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"di") {
							updated.edges[i].color = {color:"blue", highlight:"black"};
							updated.edges[i].arrows = "to";
							updated.edges[i].hidden = hiddenInverse;
						} else if (updated.edges[i].role===roleWithPrefix+"o") {
							updated.edges[i].color = {color:"yellow", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"oi") {
							updated.edges[i].color = {color:"yellow", highlight:"black"};
							updated.edges[i].arrows = "to";
							updated.edges[i].hidden = hiddenInverse;
						} else if (updated.edges[i].role===roleWithPrefix+"m") {
							updated.edges[i].color = {color:"orange", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"mi") {
							updated.edges[i].color = {color:"orange", highlight:"black"};
							updated.edges[i].arrows = "to";
							updated.edges[i].hidden = hiddenInverse;
						} else if (updated.edges[i].role===roleWithPrefix+"s") {
							updated.edges[i].color = {color:"#66ff99", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"si") {
							updated.edges[i].color = {color:"#66ff99", highlight:"black"};
							updated.edges[i].arrows = "to";
							updated.edges[i].hidden = hiddenInverse;
						} else if (updated.edges[i].role===roleWithPrefix+"f") {
							updated.edges[i].color = {color:"#9933ff", highlight:"black"};
							updated.edges[i].arrows = "to";
						} else if (updated.edges[i].role===roleWithPrefix+"fi") {
							updated.edges[i].color = {color:"#9933ff", highlight:"black"};
							updated.edges[i].arrows = "to";
							updated.edges[i].hidden = hiddenInverse;
						} else {
							updated.edges[i].color = {color:"black", highlight:"black"};
							updated.edges[i].arrows = "to";
						}
					}
					TIME.graph.nodes.update(updated.nodes);
					TIME.graph.edges.update(updated.edges);
					TIME.thisNodes = updated.nodes;
					TIME.thisEdges = updated.edges;
				}
			};
			var edit = function() {
				TIME.edit = !TIME.edit;
				$(".edit").toggle();
				$(".normal").toggle();
				update();
			};
			var cancel = function() {
				TIME.amt.cancel();
				$("#store").hide();
				edit();
			};
			var save = function() {
				TIME.amt.save(function() {
					location.reload();
				});
			}
			var openModal = function(id,type) {
				$("#uri").val("");
				if (id) {
					$("#uri").val(id);
					var graph = TIME.amt.getGraph(false,true);
					var node = false;
					for (var i in graph.nodes) {
						if (graph.nodes[i].id == id)
							node = graph.nodes[i];
					}
					type = node.concept;
					$("#label").val(node.label);
				}
				$("#concept").val(type);
				$("#role").empty();
				$("#table").empty();
				var concepts = TIME.amt.getConcepts();
				for (var i in concepts) {
					if (concepts[i].concept == type) {
						$("#label").attr("placeholder",concepts[i].placeholder);
					}
				}
				$("#role").append("<option value='' disabled selected>Rolle wählen ...</option>");
				var roles = TIME.amt.getRoles();
				for (var i in roles) {
					if (roles[i].domain == type) {
						// load only Allen types
						var role = roles[i].role;
						var timeprefix = "http://academic-meta-tool.xyz/AllenFreksa#";
						if (role===timeprefix+"b" || role===timeprefix+"m" || role===timeprefix+"o" || role===timeprefix+"fi" || role===timeprefix+"di" ||
								role===timeprefix+"si" || role===timeprefix+"e" || role===timeprefix+"s" || role===timeprefix+"d" || role===timeprefix+"f" ||
								role===timeprefix+"oi" || role===timeprefix+"mi" || role===timeprefix+"a") {
									$("#role").append("<option value='"+roles[i].role+"'>"+roles[i].label+"</option>");
						}
					}
				}
				$("#role").on("change",function() {
					$("#table").empty();
					var concept = "";
					for (var i in roles) {
						if (roles[i].role == $("#role").val()) {
							concept = roles[i].range;
						}
					}
					var graph = TIME.amt.getGraph(false,true);
					for (var i in graph.nodes) {
						if (graph.nodes[i].concept == concept) {
							var w = 0;
							if (id) {
								for (var j in graph.edges) {
									if (graph.edges[j].role == $("#role").val() && graph.edges[j].from == id && graph.edges[j].to == graph.nodes[i].id)
										w = graph.edges[j].width;
								}
							}
							var tr = $("<tr></tr>");
							tr.append("<td>"+graph.nodes[i].label+"</td>");
							tr.append("<td><p class='range-field'><input type='range' name='"+graph.nodes[i].id+"' min='0' max='100' value='"+w*100+"' /></p></td>");
							$("#table").append(tr);
						}
					}
				});
				$("#role").material_select();
				$("#modal").modal("open");
			};
			var remove = function() {
				var from = $("#uri").val();
				if (from) {
					$("#save").show();
					if (!TIME.amt.removeIndividual(from)) {
						console.log("Inkonsistenz vorhanden");
						$("#save").hide();
					}
				}
				$("#store").show();
				$("#modal").modal("close");
				$("#label").val("");
				update();
			}
			var cancelEdit = function() {
				$("#modal").modal("close");
				$("#label").val("");
			};
			var saveEdit = function() {
				var role = $("#role").val();
				var from = $("#uri").val();
				if (!from) {
					from = TIME.amt.addIndividual($("#label").val(),$("#concept").val());
				}
				$("#save").show();
				$("#table tr td input").each(function(i) {
					var w = Math.floor(Number($(this).val()));
					var to = $(this).attr("name");
					var inconsistent = false;
					if (!TIME.amt.editAssertion(role,from,to,w/100)) {
						if (!inconsistent)
							console.log("Inkonsistenz vorhanden");
						inconsistent = true;
						$("#save").hide();
					}
				});
				$("#store").show();
				$("#modal").modal("close");
				$("#label").val("");
				update();
			};
			$(function() {
				TIME.amt = new AMT();
				TIME.amt.load(function() {
					var concepts = TIME.amt.getConcepts();
					for (var i in concepts) {
						var a = $("<a class='btn-floating btn-large edit green' onclick='openModal(false,\""+concepts[i].concept+"\")' title='Add "+concepts[i].label+" node'><i class='material-icons'>add "+concepts[i].label.substr(0,1)+"</i></a>");
						$("#buttons").prepend(a);
					}
					$(".edit").hide();
					var graph = TIME.amt.getGraph(true);
					TIME.graph.nodes = new vis.DataSet(graph.nodes);
					TIME.graph.edges = new vis.DataSet(graph.edges);
					var network = new vis.Network(document.getElementById("graph"),{nodes: TIME.graph.nodes, edges: TIME.graph.edges},{});
					network.on("selectNode", function (params) {
						if (TIME.edit)
							openModal(params.nodes[0]);
					});
					update();
					propModal();
				});
				$("#modal").modal({
					complete: cancelEdit
				});
				$("#info").modal({
					complete: function() {info(true);}
				});
				$("#exportModal").modal({
					complete: function() {exportOptions(true);}
				});
				$("#loadModal").modal({
					complete: function() {loadJSONGraph(true);}
				});
				$("#propertiesModal").modal({
					dismissible: false,
					complete: function() {loadJSONGraph(true);}
				});
				$("#graphPropModal").modal({
					dismissible: false,
					complete: function() {openGraphPropModal(true);}
				});
				$(".edit").hide();
				$("#store").hide();
			});
			var switchOntology = function() {
				TIME = {};
				TIME.ontology = $("#ontology").val();
				TIME.graph = {};
				TIME.edit = false;
				TIME.thisNodes = [];
				TIME.thisEdges = [];
				TIME.amt = new AMT();
				TIME.amt.setStore("http://ls-dev.i3mainz.hs-mainz.de/rdf4j-server/repositories/amttime");
				console.log(TIME);
				TIME.amt.load(function() {
					var concepts = TIME.amt.getConcepts();
					$("#buttons .green").remove();
					for (var i in concepts) {
						var a = $("<a class='btn-floating btn-large edit green' onclick='openModal(false,\""+concepts[i].concept+"\")' title='Add "+concepts[i].label+" node'><i class='material-icons'>add "+concepts[i].label.substr(0,1)+"</i></a>");
						$("#buttons").prepend(a);
					}
					$(".edit").hide();
					var graph = TIME.amt.getGraph(true);
					TIME.graph.nodes = new vis.DataSet(graph.nodes);
					TIME.graph.edges = new vis.DataSet(graph.edges);
					var network = new vis.Network(document.getElementById("graph"),{nodes: TIME.graph.nodes, edges: TIME.graph.edges},{});
					network.on("selectNode", function (params) {
						if (TIME.edit)
							openModal(params.nodes[0]);
					});
					update();
				});
				$("#modal").modal({
					complete: cancelEdit
				});
				$("#info").modal({
					complete: function() {info(true);}
				});
				$("#exportModal").modal({
					complete: function() {exportOptions(true);}
				});
				$("#loadModal").modal({
					complete: function() {loadJSONGraph(true);}
				});
				$("#propertiesModal").modal({
					dismissible: false,
					complete: function() {propModal(true);}
				});
				$("#graphPropModal").modal({
					dismissible: false,
					complete: function() {openGraphPropModal(true);}
				});
				$(".edit").hide();
				$("#store").hide();
			};
			var info = function(close) {
				if (close)
					$("#info").modal("close");
				else
					$("#info").modal("open");
			}
			var exportOptions = function(close) {
				if (close)
					$("#exportModal").modal("close");
				else
					$("#exportModal").modal("open");
			}
			var loadJSONGraph = function(close) {
				$("#json").val("");
				$("#json").height(75);
				if (close)
					$("#loadModal").modal("close");
				else
					$("#loadModal").modal("open");
			}
			var propModal = function(close) {
				$("#ontology").material_select();
				$("#ontology").val(TIME.ontology);
				if (close)
					$("#propertiesModal").modal("close");
				else
					$("#propertiesModal").modal("open");
			}
			var openGraphPropModal = function(close) {
				$("#exportModal").modal("close");
				if (close)
					$("#graphPropModal").modal("close");
				else
					$("#graphPropModal").modal("open");
			}
			var reloadGraphWithProperties = function() {
				update();
				$("#graphPropModal").modal("close");
			}
			var exportData = function(type,kind) {
				if (type==="json") {
					var nodesAndEdges = {};
					nodesAndEdges.nodes = TIME.thisNodes;
					nodesAndEdges.edges = TIME.thisEdges;
					nodesAndEdges = JSON.stringify(nodesAndEdges);
					if (nodesAndEdges.includes("Infinity")) {
						nodesAndEdges = nodesAndEdges.replace("Infinity",1.0);
					}
					// COPY TO CLIPBOARD
					$("#hiddenclipboard").text(nodesAndEdges);
					copyToClipboard('#hiddenclipboard');
					// CLOSE MODAL
					$("#exportModal").modal("close");
				} else if (type==="csv") {
					if (kind==="nodes") {
						var nodesAndEdges = "id,label,concept\r\n";
						for (var node in TIME.thisNodes) {
							nodesAndEdges += TIME.thisNodes[node].id+","+TIME.thisNodes[node].label+","+TIME.thisNodes[node].concept+"\r\n";
						}
						// COPY TO CLIPBOARD
						$("#hiddenclipboard").text(nodesAndEdges);
						copyToClipboard('#hiddenclipboard');
						// CLOSE MODAL
						$("#exportModal").modal("close");
					} else {
						var nodesAndEdges = "from,to,role,width\r\n";
						for (var edge in TIME.thisEdges) {
							if (!TIME.thisEdges[edge].hidden) {
								nodesAndEdges += TIME.thisEdges[edge].from+","+TIME.thisEdges[edge].to+","+TIME.thisEdges[edge].role+","+TIME.thisEdges[edge].width+"\r\n";
								if (nodesAndEdges.includes("Infinity")) {
									nodesAndEdges = nodesAndEdges.replace("Infinity",1.0);
								}
							}
						}
						// COPY TO CLIPBOARD
						$("#hiddenclipboard").text(nodesAndEdges);
						copyToClipboard('#hiddenclipboard');
						// CLOSE MODAL
						$("#exportModal").modal("close");
					}
				} else if (type==="rdf") {
					var nodesAndEdges = "";
					for (var node in TIME.thisNodes) {
						nodesAndEdges += "<"+TIME.thisNodes[node].id+"> "+"<http://www.academic-meta-tool.xyz/instanceOf>"+" <"+TIME.thisNodes[node].concept+"> .\r\n";
						nodesAndEdges += "<"+TIME.thisNodes[node].id+"> "+"<http://www.w3.org/2000/01/rdf-schema#label>"+" \""+TIME.thisNodes[node].label+"\" .\r\n";
					}
					for (var edge in TIME.thisEdges) {
						var emptyNode = "_:"+StrID();
						nodesAndEdges += emptyNode+" <http://www.w3.org/1999/02/22-rdf-syntax-ns#subject>"+" <"+TIME.thisEdges[edge].from+"> .\r\n";
						nodesAndEdges += emptyNode+" <http://www.w3.org/1999/02/22-rdf-syntax-ns#predicate>"+" <"+TIME.thisEdges[edge].role+"> .\r\n";
						nodesAndEdges += emptyNode+" <http://www.w3.org/1999/02/22-rdf-syntax-ns#object>"+" <"+TIME.thisEdges[edge].to+"> .\r\n";
						nodesAndEdges += emptyNode+" <http://www.academic-meta-tool.xyz/weight>"+" \""+TIME.thisEdges[edge].width+"\"^^<http://www.w3.org/2001/XMLSchema#integer> .\r\n";
						if (nodesAndEdges.includes("Infinity")) {
							nodesAndEdges = nodesAndEdges.replace("Infinity",1.0);
						}
					}
					// COPY TO CLIPBOARD
					$("#hiddenclipboard").text(nodesAndEdges);
					copyToClipboard('#hiddenclipboard');
					// CLOSE MODAL
					$("#exportModal").modal("close");
				} else if (type==="cypher") {
					var nodesAndEdges = "";
					var map = [];
					var nodeIDs = [];
					// CREATE NODE -> CREATE (shortID:Concept{label: 'text'})
					for (var node in TIME.thisNodes) {
						if (TIME.thisNodes[node].concept.includes("Person")) {
							var nodeItem = {};
							nodeItem.id = TIME.thisNodes[node].id;
							nodeItem.node = cypherNode;
							nodeItem.shortID = TIME.thisNodes[node].id.replace("http://www.academic-meta-tool.xyz/","");
							nodeIDs.push(nodeItem.shortID);
							map.push(nodeItem);
							var cypherNode = "("+nodeItem.shortID+":Person{label: '"+TIME.thisNodes[node].label+"'})";
							nodesAndEdges += "CREATE "+cypherNode+ "\r\n";
						} else if (TIME.thisNodes[node].concept.includes("Interest")) {
							var nodeItem = {};
							nodeItem.id = TIME.thisNodes[node].id;
							nodeItem.node = cypherNode;
							nodeItem.shortID = TIME.thisNodes[node].id.replace("http://www.academic-meta-tool.xyz/","");
							nodeIDs.push(nodeItem.shortID);
							map.push(nodeItem);
							var cypherNode = "("+nodeItem.shortID+":Interest{label: '"+TIME.thisNodes[node].label+"'})";
							nodesAndEdges += "CREATE "+cypherNode+ "\r\n";
						}
					}
					// MERGE NODES AS EDGE -> MERGE (shortID)-[:ROLE{width:width}]->(shortID)
					for (var edge in TIME.thisEdges) {
						if (TIME.thisEdges[edge].role.includes("connectedWith") && !TIME.thisEdges[edge].hidden) {
							var cypherEdge = "(*)-[:CONNECTED_WITH{width:%}]->(**)";
							for (var item in map) {
								if (map[item].id===TIME.thisEdges[edge].from) {
									cypherEdge = cypherEdge.replace("*",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
								if (map[item].id===TIME.thisEdges[edge].to) {
									cypherEdge = cypherEdge.replace("**",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
							}
							nodesAndEdges += "MERGE "+cypherEdge+ "\r\n";
						}
						if (TIME.thisEdges[edge].role.includes("interestedIn") && !TIME.thisEdges[edge].hidden) {
							var cypherEdge = "(*)-[:INTERESTED_IN{width:%}]->(**)";
							for (var item in map) {
								if (map[item].id===TIME.thisEdges[edge].from) {
									cypherEdge = cypherEdge.replace("*",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
								if (map[item].id===TIME.thisEdges[edge].to) {
									cypherEdge = cypherEdge.replace("**",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
							}
							nodesAndEdges += "MERGE "+cypherEdge+ "\r\n";
						}
						if (TIME.thisEdges[edge].role.includes("interestOf") && !TIME.thisEdges[edge].hidden) {
							var cypherEdge = "(*)-[:INTEREST_OF{width:%}]->(**)";
							for (var item in map) {
								if (map[item].id===TIME.thisEdges[edge].from) {
									cypherEdge = cypherEdge.replace("*",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
								if (map[item].id===TIME.thisEdges[edge].to) {
									cypherEdge = cypherEdge.replace("**",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
							}
							nodesAndEdges += "MERGE "+cypherEdge+ "\r\n";
						}
						if (TIME.thisEdges[edge].role.includes("subInterestOf") && !TIME.thisEdges[edge].hidden) {
							var cypherEdge = "(*)-[:SUB_INTEREST_OF{width:%}]->(**)";
							for (var item in map) {
								if (map[item].id===TIME.thisEdges[edge].from) {
									cypherEdge = cypherEdge.replace("*",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
								if (map[item].id===TIME.thisEdges[edge].to) {
									cypherEdge = cypherEdge.replace("**",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
							}
							nodesAndEdges += "MERGE "+cypherEdge+ "\r\n";
						}
						if (TIME.thisEdges[edge].role.includes("superInterestOf") && !TIME.thisEdges[edge].hidden) {
							var cypherEdge = "(*)-[:SUPER_INTEREST_OF{width:%}]->(**)";
							for (var item in map) {
								if (map[item].id===TIME.thisEdges[edge].from) {
									cypherEdge = cypherEdge.replace("*",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
								if (map[item].id===TIME.thisEdges[edge].to) {
									cypherEdge = cypherEdge.replace("**",map[item].shortID);
									cypherEdge = cypherEdge.replace("%",TIME.thisEdges[edge].width);
									if (cypherEdge.includes("Infinity")) {
										cypherEdge = cypherEdge.replace("Infinity",1.0);
									}
								}
							}
							nodesAndEdges += "MERGE "+cypherEdge+ "\r\n";
						}
					}
					// ADD RETURN ALL NODES
					var returnCall = "RETURN ";
					for (var nodeID in nodeIDs) {
						returnCall += nodeIDs[nodeID] + ",";
					}
					nodesAndEdges += returnCall.slice(0, -1);
					// COPY TO CLIPBOARD
					$("#hiddenclipboard").text(nodesAndEdges);
					copyToClipboard('#hiddenclipboard');
					// CLOSE MODAL
					$("#exportModal").modal("close");
				}
			}
			var loadJSONGraphInApp = function() {
				var json = JSON.parse($("#json").val());
				for (var node in json.nodes) {
					TIME.amt.addExistingIndividual(json.nodes[node].id,json.nodes[node].label,json.nodes[node].concept);
				}
				for (var edge in json.edges) {
					TIME.amt.addExistingAssertion(json.edges[edge].id,json.edges[edge].role,json.edges[edge].from,json.edges[edge].to,json.edges[edge].width);
				}
				update();
				$("#loadModal").modal("close");
			}
		</script>
	</head>

	<body>
		<div id="graph" class="col s12"></div>
		<div id="footer" class="page-footer col s12 orange lighten-3">
			<div class="container">
				<div class="row">
					<div id="footertitle" class="col s2 left-align">
						<b class="description">Amt.TIME.</b>
					</div>
					<div id="props" class="col s4 left-align">
						<a class="btn-floating btn-large black" onclick="info()" title="Information"><i class="material-icons">info</i></a>
						<a class="btn-floating btn-large black" onclick="openGraphPropModal()" title="Ontology wechseln"><i class="material-icons">palette</i></a>
						<a class="btn-floating btn-large black" onclick="exportOptions()" title="Download Edges and Nodes"><i class="material-icons">file_download</i></a>
						<a class="btn-floating btn-large black" onclick="loadJSONGraph()" title="load JSON Graph"><i class="material-icons">file_upload</i></a>
					</div>
					<div id="buttons" class="col s3 right-align">
						<a class="btn-floating btn-large edit blue" onclick="edit()" title="Close edit mode"><i class="material-icons">cancel</i></a>
						<a class="btn-floating btn-large normal blue" onclick="edit()" title="Open edit mode"><i class="material-icons">edit</i></a>
					</div>
					<div id="store" class="col s3 left-align">
						<div><a class="btn-floating btn-large edit red" onclick="cancel()" title="Cancel changes"><i class="material-icons">cancel</i></a></div>
						<div id="save"><a class="btn-floating btn-large normal black" onclick="save()" title="Save changes"><i class="material-icons">save</i></a></div>
					</div>
				</div>
			</div>
		</div>
		<div id="modal" class="modal">
			<input id="uri" hidden />
			<input id="concept" hidden />
			<div class="modal-content">
				<div class="row">
					<div class="input-field col s9">
						<input id="label" type="text" placeholder="-" />
						<label for="label">Label</label>
					</div>
					<div class="col s3 right-align">
						<a class="btn-floating btn-large red" onclick="remove()" title="Delete node"><i class="material-icons">delete</i></a>
						<a class="btn-floating btn-large green" onclick="saveEdit()" title="Save changes"><i class="material-icons">save</i></a>
						<a class="btn-floating btn-large blue" onclick="cancelEdit()" title="Cancel changes"><i class="material-icons">cancel</i></a>
					</div>
				</div>
				<div class="row">
					<div class="input-field col s12">
						<select id="role"></select>
						<label for="role">Relation</label>
					</div>
				</div>
				<div class="row">
					<table class="bordered col s12">
						<thead>
							<tr><th>Individuum</th><th>Gewicht</th></tr>
						</thead>
						<tbody id="table"></tbody>
					</table>
				</div>
			</div>
		</div>
		<div id="info" class="modal">
			<div class="modal-content">
				<h4>Academic Meta Tool. AMT.</h4>
				<p><b>Über AMT</b></p>
				<br>
				<p>AMT bietet die Möglichkeit sämtlichen Kanten eine Gewichtung hinzuzufügen, um dadurch die Vagheit dieser Kante auszudrücken. Eine Beziehung zwischen zwei Knoten besteht also nur zu einem gewissen Grad. Dieser Grad, d.h. das Kantengewicht, wird üblicherweise in Prozent angegeben. AMT beinhaltet zusätzlich ein Verfahren, mit dem - unter Zuhilfenahme einer vordefinierten Ontologie - aus vorhandenen graphbasierten Daten automatisch Schlussfolgerungen gezogen werden können (Reasoning). Ein Prototyp des AMTs steht hier als Web-Anwendung zur Verfügung. In einer entwickelten Test-Ontologie können <b>Personen</b> und <b>Interessen</b> und deren Beziehungen in einem gewissen Grad zueinander modelliert werden. Diese Ontologie beinhaltet neben den genannten beiden Klassen weitere Relationen, so dass Personen und Interessen miteinander in Beziehung gesetzt werden können. Außerdem enthält die Ontologie Axiome, um automatisiert aus bestehenden Beziehungen neue Beziehungen generieren zu können.</p>
				<br>
				<p><b>How to?</b></p>
				<br>
				<p>
					1. Auswahl der Ontologie.
					<br>
					2. Ggf. Laden eines JSON-Graphen über "Laden-Button."
					<br>
					3. Nodes und Edges im "Editmodus" erstellen, dazu "Edit-Button" klicken.
					<br>
					4. Node erstellen durch Klick auf "Add-Buttons" oder Node bearbeiten durch Klick auf einen Node.
					<br>
					5. Label, Relation und Gewicht im "Edit-Modal" modifizieren und mit "Save-Button" übernehmen (oder Änderungen verwerfen / Node löschen).
					<br>
					6. Über blauen "Close-Editmode-Button" in den Reasoning Modus kommen oder mit dem roten "Close-Button" die Änderungen verwerfen.
					<br>
					7. Graph exportieren über "Export-Button".
				</p>
				<br>
				<p><b>Auswahl der Ontologie</b></p>
				<br>
				<p>Wählen Sie mit dem "Palettensymbol" die Ontologie aus.</p>
				<br>
				<p><b>Export</b></p>
				<br>
				<p>
					Der Playground bietet (noch) keine Möglichkeit zum Speichern der Daten. Eine einfache Exportfunktion ist jedoch implementiert. Durch Klick auf den "Download-Button" kann der aktuell angezeigte Graph (egal ob im Editor- oder Reasoning-Modus) in drei Varianten exportiert werden. Es stehen hier ein <b>JSON-Object</b> mit allen Knoten und Kanten, <b>CSV-Strings</b>, jeweils für Nodes und Edges und ein <b>cypher-Statement</b> zum direkten Import z.B. in Neo4J zur Verfügung. Mit Klick auf einer der Funktionen wird ein String in die Zwischenablage kopiert.
				</p>
				<br>
				<p><b>Import</b></p>
				<br>
				<p>
					Nach einem Export in das "JSON-Format" kann über den "loadButton" ein bereits existierer AMT Graph geladen werden.
				</p>
				<br>
				<p><b>About</b></p>
				<br>
				<p>* AMT-Software by Martin Unold (i3mainz) & Florian Thiery (i3mainz, RGZM).
			</div>
		</div>
		<div id="exportModal" class="modal">
			<div class="modal-content">
				<h4>Copy Edges and Nodes to Clipboard</h4>
				<br><br>
				<table class="centered stripped">
	        <thead>
	          <tr>
	              <th width="25%">JSON array</th>
	              <th width="25%">CSV as edges,nodes</th>
	              <th width="25%">CYPHER statements</th>
				  <th width="25%">RDF</th>
	          </tr>
	        </thead>
	        <tbody>
	          <tr>
	            <td><a class="btn-floating btn-large green" onclick="exportData('json')" title="Copy Edges and Nodes as JSON"><i class="material-icons">code</i></a></td>
	            <td><a class="btn-floating btn-large green" onclick="exportData('csv','nodes')" title="Copy Nodes as CSV"><i class="material-icons">fiber_manual_record</i></a>
							&nbsp;&nbsp;
							<a class="btn-floating btn-large green" onclick="exportData('csv','edges')" title="Copy Edges as CSV"><i class="material-icons">arrow_forward</i></a></td>
	            <td><a class="btn-floating btn-large green" onclick="exportData('cypher')" title="Copy Edges and Nodes as CYPHER"><i class="material-icons">input</i></a></td>
							<td><a class="btn-floating btn-large green" onclick="exportData('rdf')" title="Copy Edges as RDF"><i class="material-icons">share</i></a></td>
	          </tr>
	        </tbody>
      	</table>
				<textarea id="hiddenclipboard" hidden></textarea>
			</div>
		</div>
			<div id="loadModal" class="modal">
				<div class="modal-content">
					<h4>Load JSON Graph</h4>
					<form class="col s12">
						<div class="row">
			        <div class="input-field col s12">
			          <i class="material-icons prefix">code</i>
			          <textarea id="json" class="materialize-textarea"></textarea>
			          <label for="json">JSON Graph</label>
			        </div>
			      </div>
		    </form>
				<center><a class="btn-floating btn-large green" onclick="loadJSONGraphInApp()" title="load"><i class="material-icons">check</i></a></center>
				</div>
		</div>
		<div id="propertiesModal" class="modal">
			<div class="modal-content">
				<h4>Ontologie wählen</h4>
				<br>
				<ul class="collection">
		      <li class="collection-item"><b>Allen-Freksa-Netzwerk</b>&nbsp;&nbsp;<div class="chip blue lighten-4">Event</div></li>
		    </ul>
				<br>
				<form class="col s12">
					<div class="row">
						<div class="input-field col s12">
					    <select id="ontology" disabled>
								<option value="time">Allen-Freksa-Netzwerk</option>
							</select>
    					<label>Ontologie</label>
  					</div>
					</div>
			</form>
			<center><a class="btn-floating btn-large green" onclick="switchOntology()" title="load"><i class="material-icons">check</i></a></center>
			</div>
	</div>
	<div id="graphPropModal" class="modal">
		<div class="modal-content">
			<h4>Graph Properties</h4>
			<br>
			<p><input type="checkbox" id="showQuestionMark" /><label for="showQuestionMark">show unknown relations (?)</label></p>
			<br>
			<p><input name="group1" type="radio" class="with-gap" id="showAllInverse" value="showAllInverse" /><label for="showAllInverse">show all inverse relations</label></p>
			<p><input name="group1" type="radio" class="with-gap" id="showNoInverse" value="showNoInverse" checked /><label for="showNoInverse">show no inverse relations</label></p>
			<br>
			<center><a class="btn-floating btn-large green" onclick="reloadGraphWithProperties()" title="reload"><i class="material-icons">check</i></a></center>
		</div>
	</div>
	</body>
</html>