From 21516d658a867aedfc0fed9989cafbe3e7283616 Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Mon, 2 Mar 2015 16:40:28 +0100
Subject: [PATCH 01/23] update graph and data

* change graph node IDs to "node_"+ID
* update getJSON url
---
 src/topicMapViz.js | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 1a7e170..cfb575d 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -158,7 +158,7 @@ function drawGraph(localLinks){
        .data(force.nodes())
       .enter().append("g")
         .attr("class", "node")
-        .attr("id", function(d) { return d.name.substring(1); })
+        .attr("id", function(d) {return "node_" + d.name.substring(d.name.indexOf('#')+1); })
         .on("mouseover", mouseover)
         .on("mouseout", mouseout)
         .on("click", onclick)
@@ -212,6 +212,12 @@ clearFilters();
 appendFilters($('#graph svg'));
 }
 
+// helper functions
+
+/* 
+ * filter jquery association objects by contained player
+ */
+
 function filterByMember (object, value) {
 
   // The real meat of the solution, you can use this directly if you want.
@@ -230,6 +236,10 @@ function filterByMember (object, value) {
     return num
 }
 
+/*
+ * filter json topic objects by id
+ */
+ 
 function filterById (object, value) {
 
     console.log('filter by id:');
@@ -260,6 +270,10 @@ function renderTopicDetail(detail){
   
 }
 
+/*
+ * render topic details to detail area
+ */
+
 function getTopicDetails(topic, i){
   
   var newTopic = d3.select('#meta')
@@ -310,6 +324,10 @@ function getTopicDetails(topic, i){
     
 }
 
+/*
+ * clear Detail area
+ */
+
 function clearTopicDetail(){
   $('#meta').empty();
   $('#graph').empty();

From 443186d8ee932cbfb82ecddd9f70cdea50dfb006 Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Mon, 2 Mar 2015 17:26:35 +0100
Subject: [PATCH 02/23] add highlight for graph nodes

---
 index.html         |  4 ++++
 src/topicMapViz.js | 16 +++++++++++-----
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index 551aa90..bd1893d 100644
--- a/index.html
+++ b/index.html
@@ -57,6 +57,10 @@
   stroke-width: 1.5px;
 }
 
+.node.highlight circle {
+    fill: #900;
+}
+
 text {
   font: 10px sans-serif;
   pointer-events: none;
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index cfb575d..3ba9708 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -67,9 +67,10 @@ function appendFilters(data){
     $.each(data_nodes,
     function(i, item){
       var name = item.textContent;
+      var id = item.id;
       console.log(name);
       if($.inArray(name, nodeNames == -1)){
-        nodeNames.push(name);
+        nodeNames.push({"name": name, "id": id});
       }
     }
   );
@@ -83,7 +84,7 @@ function appendFilters(data){
       
       newEntry.append('span').classed('filterLabel', true).text(item.substring(item.indexOf('#')+1));
      
-      newEntry.append('a').attr('onclick',"mapHighlight('"+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
+      newEntry.append('a').attr('onclick',"mapHighlight('."+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
     });
   }
   
@@ -92,8 +93,13 @@ function appendFilters(data){
      .append('h4').text('Topics');
   
    nodeNames.forEach(function(item, i){
-       d3.select('#filters-nodes').append('div')
-         .text(item);
+       var newEntry = d3.select('#filters-nodes').append('div').classed('filter', true);
+      
+      newEntry.append('span').classed('filterLabel', true).text(item.name);
+     
+      newEntry.append('a').attr('onclick',"mapHighlight('#"+item.id+"')").classed('filter_highlight', true).text('highlight');
+       
+       
    });
   }
  
@@ -109,7 +115,7 @@ function clearFilters(){
  */
 function mapHighlight(identifier){
   //TODO impement toggle
-  var obj = $($('#graph .'+identifier));
+  var obj = $($('#graph '+identifier));
   var highlight_status = obj.attr('class').indexOf('highlight') > -1;
   console.log(highlight_status);
   if(highlight_status){

From 0fe9043fc9f669e60275d9caded3614cdbcfbb49 Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Mon, 2 Mar 2015 17:41:14 +0100
Subject: [PATCH 03/23] some CSS

---
 index.html | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index bd1893d..4ddc38e 100644
--- a/index.html
+++ b/index.html
@@ -8,6 +8,9 @@
         <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap-theme.min.css" media="screen"/>
         <script type="text/javascript" src="dist/bower.js" charset="utf-8"/>
         <style type="text/css">
+        
+        
+    
       /*bootstrap framework*/
       
      #topicList {
@@ -23,6 +26,10 @@
       height: 400px;
      }
      
+     #meta {
+         font-size:1.2em;
+     }
+     
      
      .filters-classes,.filters-nodes {
          display:table;
@@ -68,9 +75,20 @@
       /* topicDetail*/
       
       #meta .key{
-        font-size: 1.2em;
-        font-weight:bold;
+          font-weight:bold;
+      }
+      dl.topicDetail {
+          display: table;
+      }
+      
+    
+      dl.topicDetail dt, dt+dd {
+          margin-top: 12px;
       }
+
+      
+      
+      
     </style>
     </head>
     <body>

From 2c3e81aef2b95b8d4a473727c6a8c43c00cf14fd Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Mon, 2 Mar 2015 17:45:03 +0100
Subject: [PATCH 04/23] fix occurrences display in detail

closes #13
---
 src/topicMapViz.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 3ba9708..c36d129 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -319,12 +319,12 @@ function getTopicDetails(topic, i){
     };
     
     //occurrence(s)
-    if(topic.occurrence && topic.occurrence.resourceRef){
+    if(topic.occurrences && topic.occurrences.length > 0){
       newTopic.append('dt').classed('key', true)
         .text('Nachweise');
-      for(i=0; i < topic.occurrence.resourceRef.length; i++){
+      for(i=0; i < topic.occurrences.length; i++){
         newTopic.append('dd').classed('value', true)
-          .text(topic.occurrence.resourceRef[i].href);
+          .text(topic.occurrences[i].value);
       }
     }
     

From 7f961f087e2728c79331e4b0a57040bc3527f35a Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Tue, 3 Mar 2015 17:28:42 +0100
Subject: [PATCH 05/23] add currentTopic to global variables

---
 src/topicMapViz.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index c36d129..9a9d0d6 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -432,6 +432,7 @@ var topics;
 var topicsFiltered = new Array();
 var associations;
 var distance = 1;
+var currentTopic;
 
 /*
  * load data from filesystem as json using jquery ajax request

From 2f63c646d34bce70affc71af642c15daea5fc404 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Tue, 3 Mar 2015 17:32:35 +0100
Subject: [PATCH 06/23] remove #variant-type topics from list

closes #9
---
 src/topicMapViz.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 9a9d0d6..f1b73b0 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -435,7 +435,7 @@ var distance = 1;
 var currentTopic;
 
 /*
- * load data from filesystem as json using jquery ajax request
+ * load data from filesystem as json using jquery ajax request and populate topicList
  */
 $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   json = data;
@@ -447,7 +447,7 @@ $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   //
   for (i=0; i < topics.length; i++) {
     
-    if(topics[i].names && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/association-type' && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/topic-type') {//&& topics[i].instanceOf
+    if(topics[i].names && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/association-type' && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/topic-type' && topics[i].instance_of !='ii:#variant-type') {
       topicsFiltered.push(topics[i]);
     }
   };

From 6dca15299d6906b47b46a30a6301fa27b2072560 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Tue, 3 Mar 2015 17:51:28 +0100
Subject: [PATCH 07/23] avoid substring matches in filterByMember

closes #14
---
 src/topicMapViz.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index f1b73b0..2562009 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -225,12 +225,13 @@ appendFilters($('#graph svg'));
  */
 
 function filterByMember (object, value) {
-
+    console.log('filterByMember: ' +value);
   // The real meat of the solution, you can use this directly if you want.
   var num = $.map(object, function (item, key) { 
       var regEx = new RegExp(value, 'g');
+
       // this is where the check is done
-      if (item.roles[0].player.match(regEx) || item.roles[1].player.match(regEx)) {
+      if (item.roles[0].player.substring(item.roles[0].player.indexOf(':')+1) == value || item.roles[1].player.substring(item.roles[1].player.indexOf(':')+1) == value) {
 
         // if you want the index or property "0", "1", "2"... etc.
         // item._index = key;

From 929415350f9fddad8fb28323158599d5661ac293 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 4 Mar 2015 10:05:40 +0100
Subject: [PATCH 08/23] graph distance=2 functionality fix and css

---
 index.html         | 22 +++++++++++-----
 src/topicMapViz.js | 62 ++++++++++++++++++++++++++++++----------------
 2 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/index.html b/index.html
index 4ddc38e..3f2e1b8 100644
--- a/index.html
+++ b/index.html
@@ -50,26 +50,36 @@
 /*d3 graph*/
 .link {
   fill: none;
-  stroke: #666;
+  stroke: #bbb;
   stroke-width: 1.5px;
 }
 
 .link.highlight {
-    stroke: #900;
+    stroke: #3af;
 }
 
 .node circle {
-  fill: #ccc;
-  stroke: #fff;
+  fill: #aaa;
+  stroke: #bbb;
   stroke-width: 1.5px;
 }
 
 .node.highlight circle {
-    fill: #900;
+    fill: #18d;
+}
+
+.node.distance_1{}
+
+.node.distance_2 circle{
+    fill: #ccc;
+}
+
+.node.distance_2.highlight circle {
+    fill: #3af;
 }
 
 text {
-  font: 10px sans-serif;
+  font: 12px sans-serif;
   pointer-events: none;
 }
       /* topicDetail*/
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 2562009..7765c1c 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -129,12 +129,13 @@ function mapHighlight(identifier){
  * @param  localLinks 
  */
 function drawGraph(localLinks){
-  
+  console.log('init: drawGraph');
   // Compute the distinct nodes from the links.
   links.forEach(function(link) {//refer data
-   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source});
-   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target});
+   link.source = nodes[link.source] || (nodes[link.source] = {name: link.source, distance: link.distance});
+   link.target = nodes[link.target] || (nodes[link.target] = {name: link.target, distance: link.distance});
   });
+  console.log('drawGraph:nodes');
   console.log(nodes);
   
    var width = 600,
@@ -163,11 +164,11 @@ function drawGraph(localLinks){
    var node = svg.selectAll(".node")
        .data(force.nodes())
       .enter().append("g")
-        .attr("class", "node")
+        .attr("class", function(d) {return "node " + "distance_"+d.distance; })
         .attr("id", function(d) {return "node_" + d.name.substring(d.name.indexOf('#')+1); })
         .on("mouseover", mouseover)
         .on("mouseout", mouseout)
-        .on("click", onclick)
+        .on("dblclick", onclick)
         .call(force.drag);
    
    node.append("circle")
@@ -370,38 +371,44 @@ function getNodeLinks(topicID,distance){
   var filterTopicRef = topicID;
   console.log('filterTopics by ref to: '+ topicID);
   var nodes = filterByMember (associations, topicID);
-  if (nodes.length == 0){
+  if (nodes.length === 0){
     nodes.push(
       filterById(topicsFiltered, topicID)
     )
-  };
+  }
+  console.log('nodes:');
   console.log(nodes);
   
+  var distantTopicRefs = new Array();
+  var addNodes = [];
+  
   if(distance==2){
-    var distantTopicRefs = new Array();
-    //distantTopicRefs.push(filterTopicRef);
-    //console.log(filterTopicRef);
-    console.log('start topic loop');
+    console.log('distance=2, start topic loop');
     $.each(nodes, function(i, item){
-      //distantTopicRefs.push(item.member[0].topicRef.href);
-      //distantTopicRefs.push(item.member[1].topicRef.href);
+      console.log('init retrieve association for '+item);
       console.log('enter each loop on nodes');
       $.each(item.roles, function(i, role){
         console.log('enter each loop on node.roles');
-        var topicRef = role.player;
+        var topicRef = role.player.substring(role.player.indexOf(':')+1);
         if($.inArray(topicRef, distantTopicRefs) == -1 && topicRef !== filterTopicRef){
+          
           distantTopicRefs.push(topicRef);
-          var addNodes = filterByMember (associations, topicRef);
+          topicRefNodes = filterByMember (associations, topicRef);
+          $.each(topicRefNodes, function(i,item){
+              addNodes.push(item);
+          })
+          console.log('ADD NODES: '+ topicRef)
           console.log(addNodes);
-          $.each(addNodes, function(i, item){nodes.push(item)});
         };
-        
       });
     });
-    
+    console.log('distantTopicRefs:');
     console.log(distantTopicRefs);
-    console.log(nodes);
   }
+  console.log('addNodes:');
+  console.log(addNodes);
+  
+  //create links Array
   var myLinks = new Array();
   
   $.each(nodes,function(i, node){
@@ -411,10 +418,23 @@ function getNodeLinks(topicID,distance){
     myLinks.push({ 
         "source" : node.roles[0].player.substring(node.roles[0].player.indexOf(':')),//TODO: function get ID
         "target" : node.roles[1].player.substring(node.roles[1].player.indexOf(':')),
-        "type"   : node.type 
+        "type"   : node.type,
+        "distance" : 1
     });
   });
-  
+  console.log('myLinks, distance=1:');
+  console.log(myLinks);
+  if(distance==2){
+    $.each(addNodes, function(i, node){
+        myLinks.push({ 
+        "source" : node.roles[0].player.substring(node.roles[0].player.indexOf(':')),//TODO: function get ID
+        "target" : node.roles[1].player.substring(node.roles[1].player.indexOf(':')),
+        "type"   : node.type,
+        "distance" : 2
+    });
+    });  
+  }
+  console.log('myLinks: distance=2');
   console.log(myLinks);
   
   return myLinks;

From 04da878d222a005dbaea186ca7a788c43af41a6e Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 4 Mar 2015 10:27:48 +0100
Subject: [PATCH 09/23] documentation an cleanup

---
 src/topicMapViz.js | 65 +++++++++++++++++++++++++++++++++++-----------
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 7765c1c..1a5daf5 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -42,7 +42,7 @@
  *  - topic classifications
  */
 
-function appendFilters(data){
+function appendFilters(data1){
   
   var data = $('#graph svg');
   //console.log(data);
@@ -62,6 +62,7 @@ function appendFilters(data){
       }
     }
   );
+  console.log('appendFilters: associationClasses:');
   console.log(associationClasses);
   
     $.each(data_nodes,
@@ -102,13 +103,15 @@ function appendFilters(data){
        
    });
   }
- 
-
 }
 
+/* function clearFilters
+ *
+ * empties #filters
+ */
 function clearFilters(){
   $('#filters').empty();
-};
+}
 
 /* function to highligh a class in the map
  *
@@ -123,10 +126,12 @@ function mapHighlight(identifier){
   }else{
     obj.attr('class', obj.attr('class') + ' highlight');
   }
-};
+}
 
 /* function drawGraph
- * @param  localLinks 
+ * @param  localLinks
+ *
+ * draws a force graph using d3.js
  */
 function drawGraph(localLinks){
   console.log('init: drawGraph');
@@ -221,8 +226,11 @@ appendFilters($('#graph svg'));
 
 // helper functions
 
-/* 
- * filter jquery association objects by contained player
+/* function filterById
+ * @param object   the JSON array to be searched
+ * @param value    the value to be retrieved from any roles.player
+ *
+ * returns JSON array
  */
 
 function filterByMember (object, value) {
@@ -244,10 +252,12 @@ function filterByMember (object, value) {
     return num
 }
 
-/*
- * filter json topic objects by id
+/* function filterById
+ * @param object   the JSON array to be searched
+ * @param value    the ID value to be retrieved
+ *
+ * returns JSON object
  */
- 
 function filterById (object, value) {
 
     console.log('filter by id:');
@@ -274,11 +284,19 @@ function filterById (object, value) {
     });
 }
 
+/* function renderTopicDetail
+ * @param detail
+ *
+ * TODO: this function shoud be a general function for rendering arbitrary details to detail view in order to promote a more data driven and object oriented setup of this app
+ */
 function renderTopicDetail(detail){
   
 }
 
-/*
+/* function getTopicDetails
+ * @param topic
+ * @param i
+ *
  * render topic details to detail area
  */
 
@@ -332,10 +350,9 @@ function getTopicDetails(topic, i){
     
 }
 
-/*
+/* function clearTopicDetail
  * clear Detail area
  */
-
 function clearTopicDetail(){
   $('#meta').empty();
   $('#graph').empty();
@@ -344,6 +361,18 @@ function clearTopicDetail(){
   nodes = emptyArray;
 }
 
+/* function selectTopic
+ * @param  id
+ * @param  i
+ *
+ * this function is the onclick fnuction for items in the topicList
+ * it retrieves the corrsponding JSON object
+ * sets the corresponding list entry 'active'
+ * clears the detail view from previous topics details
+ * retrieves the links for the graph
+ * fires drawGraph
+ * fires getTopicDetails
+ */
 function selectTopic(id, i){
   console.log('start selectTopic');
   console.log('submitted i: '+ i);
@@ -354,7 +383,7 @@ function selectTopic(id, i){
   var graphDepth = 2;
   
   $('.topicName').toggleClass('active',false);
-  $('#topic_'+id.substring(id.indexOf('#')+1)).toggleClass('active', true); //append class selected
+  $('#topic_'+id.substring(id.indexOf('#')+1)).toggleClass('active', true);
   
   clearTopicDetail();
   topicLinks = getNodeLinks(id, distance);
@@ -364,6 +393,12 @@ function selectTopic(id, i){
   
 }
 
+/* function  getNodeLinks
+ * @param    topicID  ID of the topic that should be origin of the graph
+ * @param    distance maximum number of node steps between topicID and other nodes
+ *
+ * this function returns the links d3 needs to render the graph
+ */
 function getNodeLinks(topicID,distance){
   console.log('determining nodes with parameters: ');
   console.log('topicID: '+topicID);

From ee0e2aa05bb7e3d4055be333195f0ebac4faa2d7 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 4 Mar 2015 11:04:50 +0100
Subject: [PATCH 10/23] fix graph rendering with curentTopic only

---
 src/topicMapViz.js | 40 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 1a5daf5..357231e 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -374,7 +374,7 @@ function clearTopicDetail(){
  * fires getTopicDetails
  */
 function selectTopic(id, i){
-  console.log('start selectTopic');
+  console.log('selectTopic: init');
   console.log('submitted i: '+ i);
   console.log('submitted id: '+ id);
   var currentTopic = filterById(topicsFiltered, id);
@@ -387,6 +387,8 @@ function selectTopic(id, i){
   
   clearTopicDetail();
   topicLinks = getNodeLinks(id, distance);
+  console.log('selectTopic: topicLinks');
+  console.log(topicLinks);
   links = topicLinks;
   drawGraph(links);
   getTopicDetails(currentTopic[0], i);
@@ -407,8 +409,36 @@ function getNodeLinks(topicID,distance){
   console.log('filterTopics by ref to: '+ topicID);
   var nodes = filterByMember (associations, topicID);
   if (nodes.length === 0){
+    selfTopic = filterById(topicsFiltered, topicID);
+console.log(selfTopic);
     nodes.push(
-      filterById(topicsFiltered, topicID)
+    /*
+        reifier null
+roles	[Object { type="ii:#role", player="ii:#mutter", reifier=null}, Object { type="ii:#role", player="ii:#foersterin", reifier=null}]
+0	Object { type="ii:#role", player="ii:#mutter", reifier=null}
+player	"ii:#mutter"
+reifier	null
+type	"ii:#role"
+1	Object { type="ii:#role", player="ii:#foersterin", reifier=null}
+player	"ii:#foersterin"
+reifier	null
+type	"ii:#role"
+type	"ii:#same-as"
+    */    
+    {
+      "reifier" : null,
+      "roles" : [
+          {"player" : 'ii:'+selfTopic[0].item_identifiers,
+           "reifier" : null,
+           "type" : selfTopic[0].instance_of
+          },
+          {"player" : 'ii:'+selfTopic[0].item_identifiers,
+           "reifier" : null,
+           "type" : selfTopic[0].instance_of
+          }
+      ],
+      "type" : 'self'
+    }
     )
   }
   console.log('nodes:');
@@ -420,7 +450,8 @@ function getNodeLinks(topicID,distance){
   if(distance==2){
     console.log('distance=2, start topic loop');
     $.each(nodes, function(i, item){
-      console.log('init retrieve association for '+item);
+      console.log('init retrieve association for ');
+      console.log(item);
       console.log('enter each loop on nodes');
       $.each(item.roles, function(i, role){
         console.log('enter each loop on node.roles');
@@ -500,13 +531,12 @@ $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   associations = data.associations;
   //console.log(associations);
   
-  //
   for (i=0; i < topics.length; i++) {
     
     if(topics[i].names && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/association-type' && topics[i].instance_of !='ii:http://psi.ontopia.net/ontology/topic-type' && topics[i].instance_of !='ii:#variant-type') {
       topicsFiltered.push(topics[i]);
     }
-  };
+  }
   //console.log(topicsFiltered);
    
   topicsFiltered.sortBy({prop: "item_identifiers"});

From bec085e996be274213660e8905430902702896d7 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 4 Mar 2015 13:21:19 +0100
Subject: [PATCH 11/23] fix graph node dblclick function call

---
 src/topicMapViz.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 357231e..68d227f 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -144,13 +144,13 @@ function drawGraph(localLinks){
   console.log(nodes);
   
    var width = 600,
-       height = 300;
+       height = 400;
    
    var force = d3.layout.force()
        .nodes(d3.values(nodes))
        .links(localLinks) //refer data
        .size([width, height])
-       .linkDistance(60)
+       .linkDistance(100)
        .charge(-100)
        .on("tick", tick)
        .start();
@@ -217,7 +217,7 @@ function drawGraph(localLinks){
     var node = d3.select(this);
     var text = node.select("text").text();
     var id = node.property("id");
-    selectTopic(id);
+    selectTopic('#'+id.substring(id.indexOf('_')+1));
   }
 //use event mechanism?
 clearFilters();

From 27360c62b53598e02bfebdb65396f4e5c9126c7d Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 4 Mar 2015 15:57:20 +0100
Subject: [PATCH 12/23] add graphControl for distance

---
 index.html         | 25 ++++++++++++++++++++-----
 src/topicMapViz.js | 38 ++++++++++++++++++++++++++------------
 2 files changed, 46 insertions(+), 17 deletions(-)

diff --git a/index.html b/index.html
index 3f2e1b8..0a9b68d 100644
--- a/index.html
+++ b/index.html
@@ -20,6 +20,8 @@
      
      #graph-container {
       height:400px;
+     // background-image:-moz-linear-gradient(left center , rgba(60, 60, 60, 0.2), rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, 0) 90%, rgba(60, 60, 60, 0.2));
+      border-radius:10px;
      }
      
      #meta-container {
@@ -140,17 +142,30 @@
                     <div class="row">
                         <div class="col-md-9">
                             <div id="graph-container">
-                                <h3>Graph</h3>
+                                <h2>Graph</h2>
                                 <div id="graph"/>
                             </div>
                             <div id="meta-container">
-                                <h3>Details</h3>
+                                <h2>Details</h2>
                                 <div id="meta"/>
                             </div>
                         </div>
-                        <div class="col-md-3" id="filters-container">
-                            <h3>Filters</h3>
-                            <div id="filters"/>
+                        <div class="col-md-3">
+                            <h2>Graph Control</h2>
+                            <div>
+                                <h3>Settings</h3>
+                                <div class="form-group">
+                                    <label for="sel_distance">Node distance:</label>
+                                    <select class="form-control" id="sel_distance">
+                                        <option value="1">1</option>
+                                        <option value="2">2</option>
+                                    </select>
+                                </div>
+                            </div>
+                            <div id="filters-container">
+                                <h3>Highlighting</h3>
+                                <div id="filters"/>
+                            </div>
                         </div>
                     </div>
                 </div>
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 68d227f..27c179e 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -1,3 +1,18 @@
+/* global variables
+ * 
+ */
+var links;
+var nodes = {};
+var json;
+var topics;
+var topicsFiltered = new Array();
+var associations;
+var distance = 1;
+var currentTopic = {};
+
+/* prototype extensions
+ *
+ */
 (function() {
     var toString = Object.prototype.toString,
         //default parser
@@ -224,6 +239,15 @@ clearFilters();
 appendFilters($('#graph svg'));
 }
 
+
+$("#sel_distance").change(function() {
+  var val = $("#sel_distance option:selected").val();
+  console.log(val);
+  distance = val;
+  selectTopic(currentTopic[0].item_identifiers[0]);
+  //selectTopic(currentTopic.id);
+});
+
 // helper functions
 
 /* function filterById
@@ -377,7 +401,7 @@ function selectTopic(id, i){
   console.log('selectTopic: init');
   console.log('submitted i: '+ i);
   console.log('submitted id: '+ id);
-  var currentTopic = filterById(topicsFiltered, id);
+  currentTopic = filterById(topicsFiltered, id);
   console.log('current topic object:');
   console.log(currentTopic);
   var graphDepth = 2;
@@ -509,17 +533,7 @@ type	"ii:#same-as"
 
 /*End functions*/
 
-/* global variables
- * 
- */
-var links;
-var nodes = {};
-var json;
-var topics;
-var topicsFiltered = new Array();
-var associations;
-var distance = 1;
-var currentTopic;
+
 
 /*
  * load data from filesystem as json using jquery ajax request and populate topicList

From 65cc1aca1f3978e378b928c16860989d1322acaa Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Thu, 5 Mar 2015 10:16:02 +0100
Subject: [PATCH 13/23] add inter_associations

---
 src/topicMapViz.js | 68 ++++++++++++++++++++++++++--------------------
 1 file changed, 38 insertions(+), 30 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 27c179e..6fa72c7 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -430,28 +430,16 @@ function getNodeLinks(topicID,distance){
   console.log('topicID: '+topicID);
   console.log('distance: '+distance);
   var filterTopicRef = topicID;
+  var associations_secondary = new Array();
   console.log('filterTopics by ref to: '+ topicID);
-  var nodes = filterByMember (associations, topicID);
-  if (nodes.length === 0){
+  var associations_filtered = filterByMember (associations, topicID);
+  if (associations_filtered.length === 0){
     selfTopic = filterById(topicsFiltered, topicID);
 console.log(selfTopic);
-    nodes.push(
-    /*
-        reifier null
-roles	[Object { type="ii:#role", player="ii:#mutter", reifier=null}, Object { type="ii:#role", player="ii:#foersterin", reifier=null}]
-0	Object { type="ii:#role", player="ii:#mutter", reifier=null}
-player	"ii:#mutter"
-reifier	null
-type	"ii:#role"
-1	Object { type="ii:#role", player="ii:#foersterin", reifier=null}
-player	"ii:#foersterin"
-reifier	null
-type	"ii:#role"
-type	"ii:#same-as"
-    */    
-    {
-      "reifier" : null,
-      "roles" : [
+    associations_filtered.push(
+      {
+        "reifier" : null,
+        "roles" : [
           {"player" : 'ii:'+selfTopic[0].item_identifiers,
            "reifier" : null,
            "type" : selfTopic[0].instance_of
@@ -460,23 +448,45 @@ type	"ii:#same-as"
            "reifier" : null,
            "type" : selfTopic[0].instance_of
           }
-      ],
-      "type" : 'self'
-    }
+        ],
+        "type" : 'self'
+      }
     )
+  }else{
+    var players = new Array();
+    $.each(associations_filtered, function(i,association){
+      console.log(association);
+      $.each(association.roles, function(i,role){
+        if(role.player.substring(role.player.indexOf(':')+1) !== topicID){
+          players.push(role.player);
+        }
+      })
+    })
+    console.log('players');
+    console.log(players);
+    $.each(associations, function(i, association){
+        console.log($.inArray(players, association.roles[0].player));
+      if($.inArray(association.roles[0].player, players) != -1 && $.inArray(association.roles[1].player, players) !== -1){
+          associations_secondary.push(association);
+          associations_filtered.push(association);
+      }
+    })
   }
-  console.log('nodes:');
-  console.log(nodes);
+  console.log('associations_filtered:');
+  console.log(associations_filtered);
+  console.log('associations_secondary:');
+  console.log(associations_secondary);
+  //if(associations_secondary.length > 0){window.alert('now')}
   
   var distantTopicRefs = new Array();
   var addNodes = [];
   
   if(distance==2){
     console.log('distance=2, start topic loop');
-    $.each(nodes, function(i, item){
+    $.each(associations_filtered, function(i, item){
       console.log('init retrieve association for ');
       console.log(item);
-      console.log('enter each loop on nodes');
+      console.log('enter each loop on associations_filtered');
       $.each(item.roles, function(i, role){
         console.log('enter each loop on node.roles');
         var topicRef = role.player.substring(role.player.indexOf(':')+1);
@@ -501,10 +511,8 @@ type	"ii:#same-as"
   //create links Array
   var myLinks = new Array();
   
-  $.each(nodes,function(i, node){
-    //{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"}
-    /*console.log('pos: ' + i);
-    console.log(node);*/
+  $.each(associations_filtered,function(i, node){
+
     myLinks.push({ 
         "source" : node.roles[0].player.substring(node.roles[0].player.indexOf(':')),//TODO: function get ID
         "target" : node.roles[1].player.substring(node.roles[1].player.indexOf(':')),

From 762f1c4fe5194faa674ec8cd68f788a84bd2edba Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Thu, 21 May 2015 15:19:38 +0200
Subject: [PATCH 14/23] first draft of occurrences text display

---
 data/xql/getOccurrenceDetail.xql | 29 ++++++++++++++++++
 data/xslt/getOccurenceDetail.xsl | 51 ++++++++++++++++++++++++++++++++
 index.html                       |  9 ++++++
 src/topicMapViz.js               | 35 ++++++++++++++++++++--
 4 files changed, 122 insertions(+), 2 deletions(-)
 create mode 100644 data/xql/getOccurrenceDetail.xql
 create mode 100644 data/xslt/getOccurenceDetail.xsl

diff --git a/data/xql/getOccurrenceDetail.xql b/data/xql/getOccurrenceDetail.xql
new file mode 100644
index 0000000..9a58e41
--- /dev/null
+++ b/data/xql/getOccurrenceDetail.xql
@@ -0,0 +1,29 @@
+xquery version "3.0";
+
+import module namespace config="http://www.freischuetz-digital.de/topicMapViz/config" at "../../modules/config.xqm";
+import module namespace freidi-tmv="http://www.freischuetz-digital.de/topicMapViz/app" at "../../modules/app.xql";
+
+
+declare namespace tei = "http://www.tei-c.org/ns/1.0";
+
+(:declare option exist:serialize "method=xhtml media-type=text/html omit-xml-declaration=yes indent=yes";:)
+declare option exist:serialize "method=text media-type=text/plain omit-xml-declaration=yes";
+
+
+declare variable $href := request:get-parameter('href','');
+declare variable $docName := substring-before($href, '#');
+declare variable $topicID := substring-after($href, '#');
+
+let $doc := xmldb:document($freidi-tmv:text-root||$docName)
+let $xslt := xmldb:document($config:app-root||'/data/xslt/getOccurenceDetail.xsl')
+ 
+let $result := transform:transform($doc, $xslt, <parameters><param name="topicID" value="{$topicID}"/></parameters>)
+ 
+return
+(:<a href="{$href}">{$docName || 'with ID: ' || $topicID}</a>:)
+(:element root {
+for $occurence in $doc//tei:*[@key = $topicID]
+return $occurence/parent::tei:*
+
+}:)
+serialize($result)
\ No newline at end of file
diff --git a/data/xslt/getOccurenceDetail.xsl b/data/xslt/getOccurenceDetail.xsl
new file mode 100644
index 0000000..2fd17f6
--- /dev/null
+++ b/data/xslt/getOccurenceDetail.xsl
@@ -0,0 +1,51 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:math="http://www.w3.org/2005/xpath-functions/math" xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl" exclude-result-prefixes="xs math xd tei" version="3.0">
+    <xd:doc scope="stylesheet">
+        <xd:desc>
+            <xd:p>
+                <xd:b>Created on:</xd:b> May 21, 2015</xd:p>
+            <xd:p>
+                <xd:b>Author:</xd:b> benjamin</xd:p>
+            <xd:p/>
+        </xd:desc>
+    </xd:doc>
+<!--  <xsl:output method="text" omit-xml-declaration="yes" indent="no"/>-->
+    <xsl:param name="topicID" required="yes"/>
+    <xsl:template match="/">
+        <ol>
+            <xsl:variable name="matches" as="node()*" select="//tei:*[@key = $topicID]"/>
+            <xsl:for-each select="$matches">
+                <li>
+                    <xsl:call-template name="occurrence">
+                        <xsl:with-param name="pos" select="position()"/>
+                    </xsl:call-template>
+                </li>
+            </xsl:for-each>
+        </ol>
+    </xsl:template>
+    <xsl:template name="occurrence">
+        <xsl:param name="pos"/>
+        <div class="meta">
+          <!--<xsl:value-of select="$pos"/>
+          <xsl:text>) </xsl:text>-->
+            <xsl:value-of select="//tei:teiHeader//tei:title[1]"/>
+            <xsl:text>; </xsl:text>
+            <xsl:text>Akt </xsl:text>
+            <xsl:number count="tei:div[@type='act']" level="any" format="I"/>
+            <xsl:text>, Szene </xsl:text>
+            <xsl:number count="tei:div[@type='scene']" level="any" format="1"/>
+        </div>
+        <div class="content">
+            <!--<xsl:variable name="text">
+                <xsl:apply-templates select="./parent::tei:*"/>
+            </xsl:variable>-->
+            <xsl:apply-templates select="./parent::tei:*"/>
+<!--            <xsl:value-of select="$text"/>-->
+        </div>
+    </xsl:template>
+    <xsl:template match="tei:*[@key = $topicID]">
+        <span style="background-color:yellow;">
+            <xsl:apply-templates/>
+        </span>
+    </xsl:template>
+</xsl:stylesheet>
\ No newline at end of file
diff --git a/index.html b/index.html
index 0a9b68d..bf67202 100644
--- a/index.html
+++ b/index.html
@@ -13,6 +13,14 @@
     
       /*bootstrap framework*/
       
+      #meta-container .value .meta {
+        font-weight:bold;
+      }
+      
+      #meta-container .value li {
+        margin: 4px 0;
+      }
+      
      #topicList {
       height: 700px;
       overflow-y: scroll;
@@ -179,5 +187,6 @@ <h3>Highlighting</h3>
     </script>
         <script type="text/javascript" src="src/topicMapViz.js"/>
         <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"/>
+<!--      <script type="text/javascript" src="src/demo.js" charset="utf-8"/>-->
     </body>
 </html>
\ No newline at end of file
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 6fa72c7..5c612a1 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -367,13 +367,44 @@ function getTopicDetails(topic, i){
       newTopic.append('dt').classed('key', true)
         .text('Nachweise');
       for(i=0; i < topic.occurrences.length; i++){
-        newTopic.append('dd').classed('value', true)
-          .text(topic.occurrences[i].value);
+      var ref = topic.occurrences[i].value;
+      var context = 'occurrence' + i;
+      console.log(context);
+      newTopic.append('dd').classed('value', true).attr('id', context);
+          /*.append('a').attr('href', topic.occurrences[i].value)
+          .text(topic.occurrences[i].value);*/
+            //var content;
+      var text = getOccurrenceDetail(topic.occurrences[i].value,context);
+
       }
     }
     
 }
 
+function getOccurrenceDetail(href, context){
+var text;
+var request = $.get("data/xql/getOccurrenceDetail.xql",{'href': href},
+  function(data, status){
+  console.log('function called');
+  console.log(status);
+  console.log('#'+context );
+  $('#'+context).append(data);
+  });
+/*var text = new String();
+$.ajax({
+    url: "data/xql/getOccurrenceDetail.xql",
+    method: "GET",
+    data: {'href': href},
+    dataType: 'text',
+    //context: document.body
+    success: function(result){text=result.responseText}
+    });
+    console.log(text);
+    return $.parseHTML(text);*/
+    console.log(text);
+
+}
+
 /* function clearTopicDetail
  * clear Detail area
  */

From 21812600ae8e5ccd799d0b3c5aaccfe2c7d77148 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Thu, 28 May 2015 01:12:09 +0200
Subject: [PATCH 15/23] sortBySortName

topicsFIltered will be sorted by:
topic/names/variants[scope/topicRef/@href ='#sort']
---
 src/topicMapViz.js | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index 6fa72c7..8a4ca25 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -1,8 +1,8 @@
 /* global variables
  * 
  */
-var links;
-var nodes = {};
+var links = new Array();
+var nodes = new Array();
 var json;
 var topics;
 var topicsFiltered = new Array();
@@ -22,7 +22,7 @@ var currentTopic = {};
             return this.parser((toString.call(x) == "[object Object]" && x[this.prop]) || x);
         };
     // Creates a sort method in the Array prototype
-    Object.defineProperty(Array.prototype, "sortBy", {
+    Object.defineProperty(Array.prototype, "sortBySortName", {
         configurable: false,
         enumerable: false,
         // @o.prop: property name (if it is an Array of objects)
@@ -37,8 +37,8 @@ var currentTopic = {};
             //if @o.desc is true: set -1, else 1
             o.desc = [1, -1][+!!o.desc];
             return this.sort(function (a, b) {
-                a = getItem.call(o, a);
-                b = getItem.call(o, b);
+                a = getItem.call(o, a.names[0].variants[0].value.toLowerCase());
+                b = getItem.call(o, b.names[0].variants[0].value.toLowerCase());
                 return o.desc * ((a > b) - (b > a));
               //return o.desc * (a > b ? 1 : (a < b ? -1 : 0));
             });
@@ -466,7 +466,7 @@ console.log(selfTopic);
     console.log(players);
     $.each(associations, function(i, association){
         console.log($.inArray(players, association.roles[0].player));
-      if($.inArray(association.roles[0].player, players) != -1 && $.inArray(association.roles[1].player, players) !== -1){
+      if($.inArray(association.roles[0].player, players) !== -1 && $.inArray(association.roles[1].player, players) !== -1){
           associations_secondary.push(association);
           associations_filtered.push(association);
       }
@@ -508,8 +508,9 @@ console.log(selfTopic);
   console.log('addNodes:');
   console.log(addNodes);
   
-  //create links Array
-  var myLinks = new Array();
+  console.log('start create myLinks');
+  var myLinks = [];
+  console.log();
   
   $.each(associations_filtered,function(i, node){
 
@@ -534,9 +535,8 @@ console.log(selfTopic);
   }
   console.log('myLinks: distance=2');
   console.log(myLinks);
-  
-  return myLinks;
 
+  return myLinks;
 }
 
 /*End functions*/
@@ -561,7 +561,7 @@ $.getJSON("data/xql/getJSONtopicMap.xql", function(data){
   }
   //console.log(topicsFiltered);
    
-  topicsFiltered.sortBy({prop: "item_identifiers"});
+  topicsFiltered.sortBySortName();//{prop: "item_identifiers"}
   
   for (i=0; i < topicsFiltered.length; i++) {
     var topic = topicsFiltered[i];

From b886e6e52dd9eeaa197e755cbc8b425361ca2e25 Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Thu, 28 May 2015 11:07:27 +0200
Subject: [PATCH 16/23] fix: add missing XQuery variable text-root

---
 modules/app.xql | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/modules/app.xql b/modules/app.xql
index 7ea306e..a8d5d3b 100644
--- a/modules/app.xql
+++ b/modules/app.xql
@@ -5,6 +5,8 @@ module namespace freidi-tmv="http://www.freischuetz-digital.de/topicMapViz/app";
 import module namespace templates="http://exist-db.org/xquery/templates" ;
 import module namespace config="http://www.freischuetz-digital.de/topicMapViz/config" at "config.xqm";
 
+declare variable $freidi-tmv:text-root := "/db/contents/referenceTexts/";
+
 (:~
  : This is a sample templating function. It will be called by the templating module if
  : it encounters an HTML element with an attribute: data-template="app:test" or class="app:test" (deprecated). 

From 568b60145765ac1fe7b4f16c56b0cd8a71e3517a Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Thu, 28 May 2015 12:58:21 +0200
Subject: [PATCH 17/23] fix / update bower install bs list filter URL

the bootstrap-list-filter library was not fetched properly on OS X; and
a newer version of the package was released meanwhile

This commit fixes both the URL for poperly installing and points to the
new version v0.2.0 which should fix filter issues.

closes #25
---
 bower.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/bower.json b/bower.json
index 3adbd5c..0b41197 100644
--- a/bower.json
+++ b/bower.json
@@ -24,6 +24,6 @@
     "jquery": "~2.1.1",
     "bootstrap": "~3.2.0",
     "d3": "~3.4.13",
-    "bootstrap-list-filter": "https://github.com/stefanocudini/bootstrap-list-filter/releases/tag/v0.1.7"
+    "bootstrap-list-filter": "git://github.com/stefanocudini/bootstrap-list-filter.git#v0.2.0"
   }
 }

From e7a4159f7fdbe199bd3f5520e5d66ed55b03cc8e Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Thu, 28 May 2015 13:49:31 +0200
Subject: [PATCH 18/23] fix topicMap-converter integration

topicMap-converter stylesheets weren't available for installation via
bower.

This commit implements fetching them from the new github repo and
defines a grunt task for copying them to the new data/xslt folder which
has been excluded via .gitignore
---
 .gitignore                   | 2 +-
 Gruntfile.coffee             | 7 +++++++
 bower.json                   | 3 ++-
 data/xql/getJSONtopicMap.xql | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/.gitignore b/.gitignore
index 2f67de1..cba641f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -5,7 +5,7 @@ node_modules
 #dist folder 
 dist
 build
-data/tm-converter
+data/xslt/tmxsl
 
 # temporary work data
 TODOs.txt
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
index 36262bb..f150b2f 100644
--- a/Gruntfile.coffee
+++ b/Gruntfile.coffee
@@ -75,6 +75,13 @@ module.exports = (grunt) ->
     copy:
       src:
         files: [{expand: true, flatten: true, cwd: 'src/', src: ['**'], dest: 'dist/'}]
+      dependencies:
+        files: [{
+          cwd: 'bower_components/tmxsl',  # set working folder / root to copy
+          src: '**/*',           # copy all files and subfolders
+          dest: 'data/xslt/tmxsl',    # destination folder
+          expand: true           # required when using cwd
+        }]
       #fonts:
        # files: [{expand: true, cwd: 'bower_components/bootstrap/dist/fonts/', src: ['*'], dest: 'fonts/'}]
 
diff --git a/bower.json b/bower.json
index 0b41197..65847ec 100644
--- a/bower.json
+++ b/bower.json
@@ -24,6 +24,7 @@
     "jquery": "~2.1.1",
     "bootstrap": "~3.2.0",
     "d3": "~3.4.13",
-    "bootstrap-list-filter": "git://github.com/stefanocudini/bootstrap-list-filter.git#v0.2.0"
+    "bootstrap-list-filter": "git://github.com/stefanocudini/bootstrap-list-filter.git#v0.2.0",
+    "tmxsl": "git://github.com/heuer/tmxsl.git#713ee96436184cc0aafbc9edb59ee5d429245f02" 
   }
 }
diff --git a/data/xql/getJSONtopicMap.xql b/data/xql/getJSONtopicMap.xql
index f4a1c88..9cf92e8 100644
--- a/data/xql/getJSONtopicMap.xql
+++ b/data/xql/getJSONtopicMap.xql
@@ -5,7 +5,7 @@ import module namespace config="http://www.freischuetz-digital.de/topicMapViz/co
 declare option exist:serialize "method=text media-type=text/plain omit-xml-declaration=yes";
 
  let $doc := xmldb:document($config:app-root||'/topicMaps/FreiDi_TopicMap_2.xml')
- let $xslt := xmldb:document($config:app-root||'/data/tm-converter/xtm2tojtm1.xsl')
+ let $xslt := xmldb:document($config:app-root||'/data/xslt/tmxsl/xtm2tojtm1.xsl')
  
  let $jtm := transform:transform($doc, $xslt, <parameters><param name="jtm_version" value="1.1"/></parameters>)
  

From 57f9482395ab4ea6ae5ca0a4913b62c9215cc935 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Thu, 28 May 2015 13:57:08 +0200
Subject: [PATCH 19/23] Update readme.md

---
 readme.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/readme.md b/readme.md
index 56c191f..6300cb3 100644
--- a/readme.md
+++ b/readme.md
@@ -6,7 +6,7 @@ It is intended for vizualizing JTM topic maps.
 
 For development purposes it can be built and served with bower and grunt, a respective test topic map is included as the application is tailored to our data.
 
-Moreover a ant script for building a eXist-db application is included. In the eXist based setup the tm-converter stylesheets by Lars Heuer (published at https://code.google.com/p/topic-maps/ under Apache License 2.0) will be used for transfroming XTM 2.0 topic maps to JTM 1.1 specification. In order to include theses script you need SVN installed as the repository will be checked out via bower install.
+Moreover a ant script for building a eXist-db application is included. In the eXist based setup the tmxsl stylesheets by Lars Heuer (published at https://github.com/heuer/tmxsl under Apache License 2.0) will be used for transfroming XTM 2.0 topic maps to JTM 1.1 specification. In order to include theses script you need SVN installed as the repository will be checked out via bower install.
 
 Setup
 -----
@@ -39,4 +39,4 @@ You need ant insalled on your system
 
 ```shell
 ant
-```
\ No newline at end of file
+```

From 8d2cdcf78e25d61ddcdd488c03205fe08d700862 Mon Sep 17 00:00:00 2001
From: bwbohl <bohl@edirom.de>
Date: Tue, 9 Jun 2015 13:24:08 +0200
Subject: [PATCH 20/23] change to fileDesc/title

---
 data/xslt/getOccurenceDetail.xsl | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/data/xslt/getOccurenceDetail.xsl b/data/xslt/getOccurenceDetail.xsl
index 2fd17f6..85366ac 100644
--- a/data/xslt/getOccurenceDetail.xsl
+++ b/data/xslt/getOccurenceDetail.xsl
@@ -28,8 +28,9 @@
         <div class="meta">
           <!--<xsl:value-of select="$pos"/>
           <xsl:text>) </xsl:text>-->
-            <xsl:value-of select="//tei:teiHeader//tei:title[1]"/>
-            <xsl:text>; </xsl:text>
+            <xsl:value-of select="//tei:teiHeader/tei:fileDesc/tei:titleStmt/tei:title[not(@type = 'desc')]"/>
+            <xsl:text>: </xsl:text>
+          <xsl:value-of select="//tei:sourceDesc/tei:analytic/tei:title" separator=". "></xsl:value-of>
             <xsl:text>Akt </xsl:text>
             <xsl:number count="tei:div[@type='act']" level="any" format="I"/>
             <xsl:text>, Szene </xsl:text>

From 8aeba4381994014917540c188429d20a26f9a977 Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 10 Jun 2015 09:30:11 +0200
Subject: [PATCH 21/23] rework occurences

---
 data/xslt/getOccurenceDetail.xsl | 29 +++++++++++++++++++----------
 1 file changed, 19 insertions(+), 10 deletions(-)

diff --git a/data/xslt/getOccurenceDetail.xsl b/data/xslt/getOccurenceDetail.xsl
index 85366ac..be70713 100644
--- a/data/xslt/getOccurenceDetail.xsl
+++ b/data/xslt/getOccurenceDetail.xsl
@@ -1,5 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:math="http://www.w3.org/2005/xpath-functions/math" xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl" exclude-result-prefixes="xs math xd tei" version="3.0">
+<xsl:stylesheet xmlns:math="http://www.w3.org/2005/xpath-functions/math" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:tei="http://www.tei-c.org/ns/1.0" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xd="http://www.oxygenxml.com/ns/doc/xsl" exclude-result-prefixes="xs math xd tei" version="3.0">
     <xd:doc scope="stylesheet">
         <xd:desc>
             <xd:p>
@@ -12,8 +12,15 @@
 <!--  <xsl:output method="text" omit-xml-declaration="yes" indent="no"/>-->
     <xsl:param name="topicID" required="yes"/>
     <xsl:template match="/">
-        <ol>
-            <xsl:variable name="matches" as="node()*" select="//tei:*[@key = $topicID]"/>
+        <a class="btn" data-toggle="collapse" href="{concat('#collapse_',//tei:TEI/@xml:id)}" aria-expanded="false" aria-controls="{concat('#collapse_',//tei:TEI/@xml:id)}">
+            <span class="caret">
+                <xsl:text> </xsl:text>
+            </span>
+            <xsl:value-of select="//tei:teiHeader/tei:fileDesc/tei:titleStmt/tei:title[not(@type = 'desc')]"/>
+        </a>
+        <div id="{concat('collapse_',//tei:TEI/@xml:id)}" class="collapse">
+            <ol>
+            <xsl:variable name="matches" as="node()*" select="//tei:*[@key = $topicID or @xml:id = $topicID]"/>
             <xsl:for-each select="$matches">
                 <li>
                     <xsl:call-template name="occurrence">
@@ -22,6 +29,7 @@
                 </li>
             </xsl:for-each>
         </ol>
+    </div>
     </xsl:template>
     <xsl:template name="occurrence">
         <xsl:param name="pos"/>
@@ -29,12 +37,13 @@
           <!--<xsl:value-of select="$pos"/>
           <xsl:text>) </xsl:text>-->
             <xsl:value-of select="//tei:teiHeader/tei:fileDesc/tei:titleStmt/tei:title[not(@type = 'desc')]"/>
-            <xsl:text>: </xsl:text>
-          <xsl:value-of select="//tei:sourceDesc/tei:analytic/tei:title" separator=". "></xsl:value-of>
-            <xsl:text>Akt </xsl:text>
-            <xsl:number count="tei:div[@type='act']" level="any" format="I"/>
+            <xsl:if test="//tei:div[@type = 'act'] and //tei:div[@type = 'scene']">
+                <xsl:text>, </xsl:text>
+          <xsl:text>Akt </xsl:text>
+            <xsl:number value="ancestor::tei:div[@type = 'act']/@n" format="I"/>
             <xsl:text>, Szene </xsl:text>
-            <xsl:number count="tei:div[@type='scene']" level="any" format="1"/>
+            <xsl:number value="ancestor::tei:div[@type = 'scene']/@n" format="1"/>
+        </xsl:if>
         </div>
         <div class="content">
             <!--<xsl:variable name="text">
@@ -45,8 +54,8 @@
         </div>
     </xsl:template>
     <xsl:template match="tei:*[@key = $topicID]">
-        <span style="background-color:yellow;">
+        <mark>
             <xsl:apply-templates/>
-        </span>
+        </mark>
     </xsl:template>
 </xsl:stylesheet>
\ No newline at end of file

From 0f1b58cfde2c14fccb38609736624f1b18383e2a Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 10 Jun 2015 09:33:06 +0200
Subject: [PATCH 22/23] GUI redesign

---
 index.html         |  61 ++++++++++++++++-----------
 src/topicMapViz.js | 102 ++++++++++++++++++++++++++++-----------------
 2 files changed, 99 insertions(+), 64 deletions(-)

diff --git a/index.html b/index.html
index bf67202..3b08cc4 100644
--- a/index.html
+++ b/index.html
@@ -41,6 +41,10 @@
      }
      
      
+    #filters-classes-list, #filters-nodes-list {
+         height: 300px;
+         overflow: auto;
+     }
      .filters-classes,.filters-nodes {
          display:table;
      }
@@ -60,7 +64,7 @@
 /*d3 graph*/
 .link {
   fill: none;
-  stroke: #bbb;
+  stroke: #666;
   stroke-width: 1.5px;
 }
 
@@ -148,42 +152,49 @@
                 </div>
                 <div class="col-md-10">
                     <div class="row">
-                        <div class="col-md-9">
-                            <div id="graph-container">
-                                <h2>Graph</h2>
-                                <div id="graph"/>
-                            </div>
-                            <div id="meta-container">
-                                <h2>Details</h2>
-                                <div id="meta"/>
-                            </div>
+                        <div id="title"/>
                         </div>
-                        <div class="col-md-3">
-                            <h2>Graph Control</h2>
-                            <div>
-                                <h3>Settings</h3>
-                                <div class="form-group">
-                                    <label for="sel_distance">Node distance:</label>
-                                    <select class="form-control" id="sel_distance">
-                                        <option value="1">1</option>
-                                        <option value="2">2</option>
-                                    </select>
+                <div class="row top-buffer">
+                        <div class="col-md-6">
+                            <div class="row">
+                                <div id="graph-container" class="col-md-12" style="resize:both; overflow:auto;">
+<!--                                <h2>Graph</h2>-->
+                                    <div id="graph"/>
                                 </div>
                             </div>
+                        </div>
+                        <div class="col-md-6">
                             <div id="filters-container">
-                                <h3>Highlighting</h3>
-                                <div id="filters"/>
+<!--                            <h3>Highlighting</h3>-->
+                                <div class="row" id="filters"/>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="row">
+                        <div class="col-md-6">
+                            <div class="form-group">
+                                <label for="sel_distance">Node distance:</label>
+                                <select class="form-control" id="sel_distance">
+                                    <option value="1">1</option>
+                                    <option value="2">2</option>
+                                </select>
                             </div>
                         </div>
                     </div>
+                    <div class="row">
+                        <div id="sources" class="col-md-12">
+<!--                        <h2>Fundstellen</h2>-->
+<!--                        <div id="sources"/>-->
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <script type="text/javascript">
       //demo graphs
-      var links5 = [{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "mond", "target": "nacht", "type": "part-of"},{"source": "mond", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kugelguss", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "wald", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kreuzweg", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "max", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "sammiel", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "caspar", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "form", "target": "kugelguss", "type": "used-for"},{"source": "kohlen", "target": "kugelguss", "type": "used-for"},{"source": "blei", "target": "kugelguss", "type": "used-for"},{"source": "max", "target": "jaeger", "type": "same-as"},{"source": "max", "target": "wilhelm", "type": "comparable-with"},{"source": "max", "target": "agathe", "type": "related-to"},{"source": "wilhelm", "target": "jaeger", "type": "same-as"},{"source": "wilhelm", "target": "pauline", "type": "related-to"}];
-      var links6 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "kranz", "target": "braut", "type": "#belong-to"}];
-      var links7 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "max", "target": "braeutigam", "type": "#is-a"},{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "wilhelm", "target": "braeutigam", "type": "#is-a"},{"source": "edward", "target": "braeutigam", "type": "#is-a"},{"source": "benno", "target": "braeutigam", "type": "#same-as"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "max", "target": "agathe", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "agathe", "target": "tochter", "type": "#is-a"},{"source": "agathe", "target": "maedchen", "type": "#is-a"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "agathe", "target": "leonore", "type": "#comparable-with"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "agathe", "target": "bertha", "type": "#comparable-with"},{"source": "agathe", "target": "opfer", "type": "#same-as"},{"source": "agathe", "target": "taube", "type": "#same-as"},{"source": "agathe", "target": "grillen", "type": "#undergo"},{"source": "annchen", "target": "agathe", "type": "#friendly-related-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"},{"source": "agathe", "target": "traum", "type": "#undergo"},{"source": "eremit", "target": "agathe", "type": "#friendly-related-to"},{"source": "rosen", "target": "agathe", "type": "#belong-to"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "pauline", "type": "#affectionate-to"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "pauline", "target": "tochter", "type": "#same-as"},{"source": "pauline", "target": "traum", "type": "#undergo"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "kaethchen", "type": "#affectionate-to"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "traum", "type": "#undergo"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "traum", "type": "#undergo"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "brautjungfern", "target": "reigen", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "reigen", "target": "hochzeit", "type": "#part-of"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "myrte", "target": "kranz", "type": "#part-of"},{"source": "lavendel", "target": "kranz", "type": "#part-of"},{"source": "seide", "target": "kranz", "type": "#part-of"},{"source": "rosmarin", "target": "kranz", "type": "#part-of"},{"source": "thymian", "target": "kranz", "type": "#part-of"},{"source": "silber", "target": "kranz", "type": "#part-of"},{"source": "kranz", "target": "winden", "type": "#used-for"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"}];
+ //     var links5 = [{"source": "nacht", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "mond", "target": "nacht", "type": "part-of"},{"source": "mond", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kugelguss", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "wald", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "kreuzweg", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "max", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "sammiel", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "caspar", "target": "wolfsschluchtszene", "type": "part-of"},{"source": "form", "target": "kugelguss", "type": "used-for"},{"source": "kohlen", "target": "kugelguss", "type": "used-for"},{"source": "blei", "target": "kugelguss", "type": "used-for"},{"source": "max", "target": "jaeger", "type": "same-as"},{"source": "max", "target": "wilhelm", "type": "comparable-with"},{"source": "max", "target": "agathe", "type": "related-to"},{"source": "wilhelm", "target": "jaeger", "type": "same-as"},{"source": "wilhelm", "target": "pauline", "type": "related-to"}];
+ //     var links6 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "kranz", "target": "braut", "type": "#belong-to"}];
+ //     var links7 = [{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "max", "target": "braeutigam", "type": "#is-a"},{"source": "braeutigam", "target": "braut", "type": "#affectionate-to"},{"source": "wilhelm", "target": "braeutigam", "type": "#is-a"},{"source": "edward", "target": "braeutigam", "type": "#is-a"},{"source": "benno", "target": "braeutigam", "type": "#same-as"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "max", "target": "agathe", "type": "#affectionate-to"},{"source": "agathe", "target": "braut", "type": "#is-a"},{"source": "agathe", "target": "tochter", "type": "#is-a"},{"source": "agathe", "target": "maedchen", "type": "#is-a"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "agathe", "target": "leonore", "type": "#comparable-with"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "agathe", "target": "bertha", "type": "#comparable-with"},{"source": "agathe", "target": "opfer", "type": "#same-as"},{"source": "agathe", "target": "taube", "type": "#same-as"},{"source": "agathe", "target": "grillen", "type": "#undergo"},{"source": "annchen", "target": "agathe", "type": "#friendly-related-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"},{"source": "agathe", "target": "traum", "type": "#undergo"},{"source": "eremit", "target": "agathe", "type": "#friendly-related-to"},{"source": "rosen", "target": "agathe", "type": "#belong-to"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "pauline", "type": "#affectionate-to"},{"source": "agathe", "target": "pauline", "type": "#comparable-with"},{"source": "pauline", "target": "braut", "type": "#same-as"},{"source": "pauline", "target": "tochter", "type": "#same-as"},{"source": "pauline", "target": "traum", "type": "#undergo"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "wilhelm", "target": "kaethchen", "type": "#affectionate-to"},{"source": "agathe", "target": "kaethchen", "type": "#comparable-with"},{"source": "kaethchen", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "elfride", "type": "#comparable-with"},{"source": "elfride", "target": "braut", "type": "#same-as"},{"source": "elfride", "target": "traum", "type": "#undergo"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "agathe", "target": "juliane", "type": "#comparable-with"},{"source": "juliane", "target": "braut", "type": "#same-as"},{"source": "juliane", "target": "traum", "type": "#undergo"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "schleier", "target": "braut", "type": "#belong-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "brautjungfern", "target": "braut", "type": "#friendly-related-to"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "brautjungfern", "target": "reigen", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "braut", "target": "hochzeit", "type": "#undergo"},{"source": "reigen", "target": "hochzeit", "type": "#part-of"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "kranz", "target": "braut", "type": "#belong-to"},{"source": "myrte", "target": "kranz", "type": "#part-of"},{"source": "lavendel", "target": "kranz", "type": "#part-of"},{"source": "seide", "target": "kranz", "type": "#part-of"},{"source": "rosmarin", "target": "kranz", "type": "#part-of"},{"source": "thymian", "target": "kranz", "type": "#part-of"},{"source": "silber", "target": "kranz", "type": "#part-of"},{"source": "kranz", "target": "winden", "type": "#used-for"},{"source": "kranz", "target": "brautjungfern", "type": "#belong-to"},{"source": "kranz", "target": "agathe", "type": "#belong-to"}];
     </script>
         <script type="text/javascript" src="src/topicMapViz.js"/>
         <script type="text/javascript" src="bower_components/bootstrap/dist/js/bootstrap.min.js"/>
diff --git a/src/topicMapViz.js b/src/topicMapViz.js
index afdb442..bf8db23 100644
--- a/src/topicMapViz.js
+++ b/src/topicMapViz.js
@@ -91,25 +91,14 @@ function appendFilters(data1){
     }
   );
   
-  if(associationClasses.length > 0){
-    d3.select('#filters').append('div').attr('id','filters-classes')
-      .append('h4').text('Assoziationstypen');
-    
-    associationClasses.forEach(function(item, i){
-      var newEntry = d3.select('#filters-classes').append('div').classed('filter', true);
-      
-      newEntry.append('span').classed('filterLabel', true).text(item.substring(item.indexOf('#')+1));
-     
-      newEntry.append('a').attr('onclick',"mapHighlight('."+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
-    });
-  }
-  
-  if(nodeNames.length > 0){
-    d3.select('#filters').append('div').attr('id','filters-nodes')
+    if(nodeNames.length > 0){
+    d3.select('#filters').append('div').attr('id','filters-nodes').classed('col-md-6', true)
      .append('h4').text('Topics');
+     
+   d3.select('#filters-nodes').append('div').attr('id','filters-nodes-list');
   
    nodeNames.forEach(function(item, i){
-       var newEntry = d3.select('#filters-nodes').append('div').classed('filter', true);
+       var newEntry = d3.select('#filters-nodes-list').append('div').classed('filter', true);
       
       newEntry.append('span').classed('filterLabel', true).text(item.name);
      
@@ -118,6 +107,23 @@ function appendFilters(data1){
        
    });
   }
+  
+  if(associationClasses.length > 0){
+    d3.select('#filters').append('div').attr('id','filters-classes').classed('col-md-6', true)
+      .append('h4').text('Relationen');
+    
+    d3.select('#filters-classes').append('div').attr('id','filters-classes-list');
+    
+    associationClasses.forEach(function(item, i){
+      var newEntry = d3.select('#filters-classes-list').append('div').classed('filter', true);
+      console.log('building filter for');
+      console.log(item);
+      newEntry.append('span').classed('filterLabel', true).text(filterById(topics,'#'+item)[0].names[0].value);
+     
+      newEntry.append('a').attr('onclick',"mapHighlight('."+item.substring(item.indexOf('#')+1)+"')").classed('filter_highlight', true).text('highlight');
+    });
+  }
+  
 }
 
 /* function clearFilters
@@ -158,8 +164,8 @@ function drawGraph(localLinks){
   console.log('drawGraph:nodes');
   console.log(nodes);
   
-   var width = 600,
-       height = 400;
+   var width = $('#graph').width(),
+       height = 300;
    
    var force = d3.layout.force()
        .nodes(d3.values(nodes))
@@ -299,7 +305,7 @@ function filterById (object, value) {
       }
       
     });*/
-    return $.grep(topicsFiltered, function(element, index){
+    return $.grep(object, function(element, index){
       
       if(element.item_identifiers[0] === value){
         return element
@@ -325,25 +331,42 @@ function renderTopicDetail(detail){
  */
 
 function getTopicDetails(topic, i){
-  
-  var newTopic = d3.select('#meta')
-    .append('dl').classed('topicDetail dl-horizontal', true);
+
+  var newTitle = d3.select('#title')
+    .append('h1').text(topic.names[0].value);
     
-    //topic
-    newTopic.append('dt').classed('key', true)
-    .text('Topic');
-    newTopic.append('dd').classed('value', true)
-    .text(topic.names[0].value);
+        if(topic.instance_of && typeof topic.instance_of !== 'undefined'){
+  newTitle.append('span').classed('small', true).text(' (');
+    for(i=0; i < topic.instance_of.length; i++){
+      newTitle.append('span').classed('small', true)
+        .text(topic.instance_of[i].substring(topic.instance_of[i].indexOf('#')+1)
+           + ((i === topic.instance_of.length-1) ? '' : ', ')
+        );
+    }
+  newTitle.append('span').classed('small', true).text(')');
+  }
     
     //variant(s)
     if(topic.names[0].variants && typeof topic.names[0].variants !== 'undefined'){
-      newTopic.append('dt').classed('key', true)
-        .text('Varianten');
-      for(i=0; i < topic.names[0].variants.length; i++){
-        newTopic.append('dd').classed('value', true)
-          .text(topic.names[0].variants[i].value);
+     // newTitle.append('span').classed('small', true)
+     //   .text('Varianten');
+     newTitle.append('div')
+      for(i=1; i < topic.names[0].variants.length; i++){
+         newTitle.append('span').classed('small', true).classed('muted', true)
+          .text(topic.names[0].variants[i].value + ((i === topic.names[0].variants.length-1) ? '' : ', '));
       }
-    };
+//console.log('variants');
+//console.log(variants);
+};
+  
+  var newTopic = d3.select('#sources');
+    //.append('dl').classed('topicDetail dl-horizontal', true);
+    
+    //topic DEPRECATED
+   /* newTopic.append('dt').classed('key', true)
+    .text('Topic');
+    newTopic.append('dd').classed('value', true)
+    .text(topic.names[0].value);*/
     
     //TODO: deprecated
     //declaration
@@ -354,23 +377,23 @@ function getTopicDetails(topic, i){
         .text(topic.declaration.bibl);
     };*/
     
-    //instanceOf
-    newTopic.append('dt').classed('key', true)
+    //instanceOf DEPRECATED
+   /* newTopic.append('dt').classed('key', true)
       .text('Klassifizierung');
     for(i=0; i < topic.instance_of.length; i++){
       newTopic.append('dd').classed('value', true)
         .text(topic.instance_of[i].substring(topic.instance_of[i].indexOf('#')+1));
-    };
+    };*/
     
     //occurrence(s)
     if(topic.occurrences && topic.occurrences.length > 0){
-      newTopic.append('dt').classed('key', true)
-        .text('Nachweise');
+      newTopic.append('h2')
+        .text('Fundstellen');
       for(i=0; i < topic.occurrences.length; i++){
       var ref = topic.occurrences[i].value;
       var context = 'occurrence' + i;
       console.log(context);
-      newTopic.append('dd').classed('value', true).attr('id', context);
+      newTopic.append('div').attr('id', context);
           /*.append('a').attr('href', topic.occurrences[i].value)
           .text(topic.occurrences[i].value);*/
             //var content;
@@ -409,6 +432,7 @@ $.ajax({
  * clear Detail area
  */
 function clearTopicDetail(){
+  $('#title').empty();
   $('#meta').empty();
   $('#graph').empty();
   var emptyArray = new Array();

From 0249f8ef6dc3818e167074a04ff63ba7b93eeabc Mon Sep 17 00:00:00 2001
From: "Benjamin W. Bohl" <bohl@edirom.de>
Date: Wed, 10 Jun 2015 09:43:11 +0200
Subject: [PATCH 23/23] bump version

---
 bower.json     | 2 +-
 build.xml      | 2 +-
 expath-pkg.xml | 2 +-
 package.json   | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/bower.json b/bower.json
index 65847ec..41d0cf0 100644
--- a/bower.json
+++ b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "FreiDi:topicMapViz",
-  "version": "0.7.1-beta",
+  "version": "0.8.0-beta",
   "authors": [
     "Benjamin W. Bohl <bohl@edirom.de>"
   ],
diff --git a/build.xml b/build.xml
index d4cb7b3..f37f8aa 100644
--- a/build.xml
+++ b/build.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <project default="xar" name="proofMEIdata">
   
-  <property name="project.version" value="0.7.1-beta"/>
+  <property name="project.version" value="0.8.0-beta"/>
   <property name="project.app" value="FreiDi-topicMapViz"/>
   <property name="build.dir" value="build"/>
   
diff --git a/expath-pkg.xml b/expath-pkg.xml
index f8092b1..e94b159 100644
--- a/expath-pkg.xml
+++ b/expath-pkg.xml
@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<package xmlns="http://expath.org/ns/pkg" name="http://freischuetz-digital.de/topicMapViz" abbrev="topicMapViz" version="0.7.1-beta" spec="1.0">
+<package xmlns="http://expath.org/ns/pkg" name="http://freischuetz-digital.de/topicMapViz" abbrev="topicMapViz" version="0.8.0-beta" spec="1.0">
     <title>FreiDi:topicMapViz</title>
 </package>
\ No newline at end of file
diff --git a/package.json b/package.json
index 6f412e0..feefa88 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "FreiDi-topicMapViz",
-  "version": "0.7.1-beta",
+  "version": "0.8.0-beta",
   "repository": {
     "type": "git",
     "url": "git://github.com/Freischuetz-Digital/topicMapViz.git"