<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Harlinn.CIMTool.Web.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="~/Content/jquery.mobile.structure-1.2.0.css" />
<link rel="stylesheet" href="~/Content/jquery.mobile.theme-1.2.0.css" />
<link rel="stylesheet" href="~/Content/cimtool.css" />
<script src="http://d3js.org/d3.v3.min.js"></script>
<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
}
.link {
stroke: #999;
stroke-opacity: .6;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.8.3.js" />
<asp:ScriptReference Path="~/Scripts/jquery.mobile-1.2.0.js" />
</Scripts>
<Services>
<asp:ServiceReference InlineScript="False" Path="~/Services/DataService.svc" />
</Services>
</asp:ScriptManager>
<div data-role="page" class="type-home">
<div data-role="content">
<div class="content-secondary">
<div id="jqm-homeheader">
<p>Harlinn.CIMTool</p>
</div>
<div id="CIMToolBrowser" style="width:100%;">
</div>
</div>
<div class="content-primary">
<div id="CIMToolData" style="width:100%;border-color:black;">
</div>
</div>
</div>
<div data-role="footer" class="footer-docs" data-theme="c">
<p>© 2013 Espen Harlinn</p>
</div>
</div>
</form>
<script type="text/javascript">
var dataservice = new CimToolDataService.DataService();
var currentManagementScope = null;
var currentManagementScopeClasses = {};
function loadRootManagementScope() {
dataservice.GetRootData(function (result) {
currentManagementScope = result;
var browserDiv = $("#CIMToolBrowser");
browserDiv.empty();
renderManagementScope(browserDiv, result);
});
}
function renderManagementScope(browserDiv, managementScope)
{
browserDiv.append('<div id="CIMToolBrowserClasses" data-role="collapsible" data-theme="b" data-content-theme="c"><h2>Classes</h2><ul id="CIMToolBrowserClassesList" data-role="listview" data-filter="true"></ul></div>');
browserDiv.append('<div id="CIMToolBrowserNamespaces" data-role="collapsible" data-theme="b" data-content-theme="c"><h2>Namespaces</h2><ul id="CIMToolBrowserNamespacesList" data-role="listview" data-filter="true"></ul></div>');
var classesList = d3.select("#CIMToolBrowserClassesList");
var namespacesList = d3.select("#CIMToolBrowserNamespacesList");
renderManagementScopeClasses(classesList, managementScope);
renderManagementScopeNamespaces(namespacesList, managementScope);
browserDiv.trigger("create");
}
function renderManagementScopeClasses(classesList, managementScope)
{
currentManagementScopeClasses = {};
managementScope.Classes.forEach(function (classElement) {
currentManagementScopeClasses[classElement.Name] = classElement;
renderManagementScopeClass(classesList, classElement);
});
}
function renderManagementScopeClass(classesList, classElement)
{
classesList.append("li").append("a")
.html(classElement.Name)
.on("click", function (d, i) {
onManagementClassClick(classElement);
});
}
function onManagementClassClick(classElement)
{
/*
var datadiv = d3.select("#CIMToolData");
datadiv.html(classElement.Name);
*/
showClassRelationshipsGraph(classElement);
}
function renderManagementScopeNamespaces(namespacesList, managementScope) {
managementScope.Namespaces.forEach(function (namespaceElement) {
renderManagementScopeNamespace(namespacesList, namespaceElement);
});
}
function renderManagementScopeNamespace(namespacesList, namespaceElement) {
namespacesList.append("li").append("a")
.html(namespaceElement.Name)
.on("click", function (d, i) {
onManagementNamespaceClick(namespaceElement);
});
}
function onManagementNamespaceClick(classElement) {
var datadiv = d3.select("#CIMToolData");
datadiv.html(classElement.Name);
}
function showClassRelationshipsGraph(classElement)
{
var datadiv = d3.select("#CIMToolData");
var width = 600; /*datadiv.attr("width") - 10;*/
var height = 500;
datadiv.html("");
var color = d3.scale.category20();
var force = d3.layout.force()
.charge(-120)
.linkDistance(30)
.size([width, height]);
var nodes = [];
var links = [];
var map = {};
var index = 0;
nodes.push({ name: classElement.Name, group: 0 });
map[classElement.Name];
classElement.Index = index;
index++;
if(classElement.BaseClass.length > 0)
{
baseClass = currentManagementScopeClasses[classElement.BaseClass];
if (baseClass)
{
nodes.push({ name: baseClass.Name, group: 1 });
baseClass.Index = index;
index++;
links.push({ source: classElement.Index, target: baseClass.Index, value: 1 });
}
}
classElement.SubClasses.forEach(function (subClassName) {
var subClass = map[subClassName];
if (!subClass) {
subClass = currentManagementScopeClasses[subClassName];
if (subClass) {
nodes.push({ name: subClass.Name, group: 2 });
subClass.Index = index;
index++;
}
}
});
classElement.RelatedClasses.forEach(function (relatedClassName) {
var relatedClass = map[relatedClassName];
if (!relatedClass) {
var relatedClass = currentManagementScopeClasses[relatedClassName];
if (relatedClass) {
nodes.push({ name: relatedClass.Name, group: 3 });
relatedClass.Index = index;
index++;
}
}
});
classElement.SubClasses.forEach(function (subClassName) {
var subClass = currentManagementScopeClasses[subClassName];
if (subClass) {
links.push({ source: classElement.Index, target: subClass.Index, value: classElement.SubClasses.length });
}
});
classElement.RelatedClasses.forEach(function (relatedClassName) {
var relatedClass = currentManagementScopeClasses[relatedClassName];
if (relatedClass) {
links.push({ source: classElement.Index, target: relatedClass.Index, value: classElement.RelatedClasses.length });
}
});
var svg = datadiv.append("svg").append("g")
.attr("x", 20)
.attr("y", 20)
.attr("width", width - 40)
.attr("height", height - 40);
force
.nodes(nodes)
.links(links)
.start();
var link = svg.selectAll(".link")
.data(links)
.enter().append("line")
.attr("class", "link")
.style("stroke-width", function (d) { return 2;/*Math.sqrt(d.value);*/ });
var node = svg.selectAll(".node")
.data(nodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", 5)
.style("fill", function (d) { return color(d.group); })
.call(force.drag);
node.append("title")
.text(function (d) { return d.name; });
force.on("tick", function () {
link.attr("x1", function (d) { return d.source.x; })
.attr("y1", function (d) { return d.source.y; })
.attr("x2", function (d) { return d.target.x; })
.attr("y2", function (d) { return d.target.y; });
node.attr("cx", function (d) { return d.x; })
.attr("cy", function (d) { return d.y; });
});
}
$(document).ready(loadRootManagementScope);
</script>
</body>
</html>
Submit an article or tip