i18n of devmode, resloves #201

js/browser/button.js

@@ -24,6 +24,11 @@ const buttonConfigs =
     {
       layout.run(graph.cy,layout.eulerVariable(util.getElementById("layout-range").value),rdfGraph.subs(),menu.separateSubs()&&!graph.getStarMode(),false);
     }],
+  [
+    "Compound Layout","recalculate-layout", ()=>
+    {
+      layout.run(graph.cy,layout.cose,rdfGraph.subs(),menu.separateSubs()&&!graph.getStarMode(),false);
+    }],
 
   [language.getString("reset-view"),"reset-view", graph.resetStyle],
 //  ["Reload", loadGraphFromSparql],

js/browser/contextmenuEdges.js

@@ -35,6 +35,14 @@ const edgeCommands = [
 ];
 //collection of expert edge commands to use in devRelations and devLimesRelations
 const devEdgeCommands = [
+  {
+    content: 'description (if it exists)',
+    select: node=>
+    {
+      if(node.data(EDGE.AXIOM)) {window.open(node.data(EDGE.AXIOM));}
+      else {alert("There is no description for this edge.");}
+    },
+  },
   {
     content: 'remove permanently',
     select: function(edge)

js/browser/menu.js

@@ -61,6 +61,65 @@ function visualizationFeedback()
   window.open("https://github.com/IMISE/snik-cytoscape.js/issues/new?body="+encodeURIComponent(log.logs.reduce((a,b)=>a+"\n"+b)));
 }
 
+let parents = null;
+
+/** Sets whether close matches are grouped in compound nodes. */
+function combineMatch(enabled)
+{
+  if(!enabled)
+  {
+    if(parents)
+    {
+      parents.remove();
+      graph.cy.nodes().move({parent:null});
+    }
+    return;
+  }
+  parents = graph.cy.collection();
+  // Can be calculated only once per session but then it needs to be synchronized with in-visualization ontology edits.
+  const matchEdges = graph.cy.edges('[pl="closeMatch"]').filter('.unfiltered').not('.hidden');
+  const matchGraph = graph.cy.nodes('.unfiltered').not('.hidden').union(matchEdges);
+  //graph.hide(graph.cy.elements());
+  //graph.show(matchGraph);
+
+  const components = matchGraph.components();
+  for(let i=0; i < components.length; i++)
+  {
+    const comp = components[i];
+    if(comp.length===1) {continue;}
+    const id = 'parent'+i;
+    graph.cy.add({
+      group: 'nodes',
+      data: { id: id },
+      position: { x: 0, y: 0 },
+    });
+    const parent = graph.cy.getElementById(id);
+    parents.add(parent);
+    const nodes = comp.nodes();
+    for(let j=0; j < nodes.length ;j++)
+    {
+      nodes[j].move({parent:id});
+    }
+  }
+  //const closeMatchNodes = closeMatchEdges.connectedNodes();
+}
+
+/** Show all nodes that are connected via close matches to visible nodes. */
+function showCloseMatches()
+{
+  log.trace("show close matches start");
+  const visible = graph.cy.elements('.unfiltered').not('.hidden');
+  //const closeMatchEdges = graph.cy.edges('[pl="closeMatch"]');
+  const newEdges = visible.connectedEdges(".unfiltered").filter('[pl="closeMatch"]');
+  console.log(newEdges);
+  graph.show(newEdges);
+  graph.show(newEdges.connectedNodes(".unfiltered"));
+  log.trace("show close matches end");
+  //closeMatchEdges.connectedNodes();
+  //".unfiltered";
+}
+
+
 /**
 Creates and returns the menus for the top menu bar.
 The format is an array of menu elements.
@@ -107,6 +166,14 @@ function menuData()
       "id": "options",
       "entries": [], // filled by addOptions()
     },
+    {
+      "label": "Operations",
+      "id":"operations",
+      "entries":
+          [
+            [showCloseMatches,"Show Close Matches","show-close-matches"],
+          ],
+    },
     {
       "label": "Services",
       "id":"services",
@@ -153,13 +220,20 @@ function addOptions()
   `<span class="dropdown-entry"><input type="checkbox" id="separate-subs-checkbox" autocomplete="off"/><span id="separate-subs">separate subontologies</span></span>
   <span class="dropdown-entry"> <input type="checkbox" id="cumulative-search-checkbox" autocomplete="off"/><span id="cumulative-search">cumulative search</span></span>
   <span class="dropdown-entry"><input type="checkbox" id="day-mode-checkbox" autocomplete="on"/><span id="day-mode">day mode</span></span>
-  <span class="dropdown-entry"><input type="checkbox" id="user-type-checkbox" autocomplete="on"/><span id="dev-mode">developer mode</span></span>`;
+  <span class="dropdown-entry"><input type="checkbox" id="user-type-checkbox" autocomplete="on"/><span id="developer version">developer version</span></span>
+  <span class="dropdown-entry"><input type="checkbox" id="combine-match-checkbox" autocomplete="off"/><span id="combine-match">combine matches</span></span>`;
   const dayMode = util.getElementById("day-mode-checkbox");
   dayMode.addEventListener("change",()=>{graph.invert(dayMode.checked);log.trace("Set dayMode to "+dayMode.checked);});
   const devMode = util.getElementById("user-type-checkbox");
   devMode.addEventListener("change",()=>{contextmenu(devMode.checked);log.trace("Set devMode to "+devMode.checked);});
   const cumuSearch = util.getElementById("cumulative-search-checkbox");
   cumuSearch.addEventListener("change",()=>{log.trace("Set cumulative search to "+cumuSearch.checked);});
+  const combineMatchMode  = util.getElementById("combine-match-checkbox");
+  combineMatchMode.addEventListener("change",()=>
+  {
+    combineMatch(combineMatchMode.checked);
+    log.trace("Set combine match mode to "+combineMatchMode.checked);
+  });
 }
 
 /** @returns whether cumulative search is activated. */

js/browser/style.js

@@ -168,6 +168,14 @@ const style =
         'visibility': 'hidden',
       },
     },
+    {
+      'selector': '$node > node', // compound nodes
+      'css': {
+        'background-color': '#ff0000',
+        'shape': 'rectangle',
+      },
+    },
+
   ],
 };
 export {style};

js/browser/teststyle.js

@@ -0,0 +1,39 @@
+/**
+Test style for error detection.
+@module */
+const style =
+{
+  'style':
+  [
+    {
+      'selector': 'node', // compound nodes
+      'css': {
+        'background-color': '#ffffff',
+        'shape': 'circle',
+        'label': node=>node.data('id').replace("http://www.snik.eu/ontology/",""),
+        'color': '#ffffff',
+      },
+    },
+    {
+      'selector': 'edge', // compound nodes
+      'css': {
+        'label': edge=>edge.data('pl'),
+        'color': 'white',
+      },
+    },
+    {
+      'selector': '.hidden',
+      'css':
+      {
+        'visibility': 'hidden',
+      },
+    },
+    {
+      'selector': ':parent', // compound nodes
+      'css': {
+        'background-color': '#ff0000',
+      },
+    },
+  ],
+};
+export {style};

js/edge.js

@@ -7,3 +7,4 @@ export const ID = "id";
 export const PROPERTY = "p";
 export const PROPERTY_LABEL  = "pl";
 export const GRAPH = "g";
+export const AXIOM = "ax";

js/layout.js

@@ -237,6 +237,9 @@ export const eulerTight =
   name: "euler",
   springLength: 40,
   animate: false,
+  maxSimulationTime: 40000,
+  maxIterations: 500,
+  timeStep: 80,
   refresh: 50,
   randomize: false,
   movementThreshold: 1,
@@ -260,3 +263,15 @@ export function eulerVariable(len)
   };
   return layout;
 }
+
+/** Layout for compound graphs */
+export const cose =
+{
+  name: "cose",
+  animate: true,
+  refresh: 50,
+  numIter: 500,
+  initialTemp: 1000,
+  nestingFactor: 1.01,
+  randomize: false,
+};

js/loadGraphFromSparql.js

@@ -89,12 +89,19 @@ export default function loadGraphFromSparql(cy,subs)
   //  replace(str(?d),"http://www.snik.eu/ontology/","s:") as ?d
   //  replace(str(?g),"http://www.snik.eu/ontology/","s:") as ?g
   const propertyQuery =
-  `select  ?c ?p ?d ?g
+  `select  ?c ?p ?d ?g (MIN(?ax) as ?ax)
   ${froms}
   {
     owl:Class ^a ?c,?d.
     graph ?g {?c ?p ?d.}
     filter(?p!=meta:subTopClass)
+    OPTIONAL
+    {
+     ?ax a owl:Axiom;
+         owl:annotatedSource ?c;
+         owl:annotatedProperty ?p;
+         owl:annotatedTarget ?d.
+    }
   }`;
   const sparqlClassesTimer = timer("sparql-classes");
   const classes = undefined;//localStorage.getItem('classes');
@@ -166,6 +173,7 @@ export default function loadGraphFromSparql(cy,subs)
             p: json[i].p.value,//Labels_DE: [json[i].l.value]
             pl: json[i].p.value.replace(/.*[#/]/,""),
             g: json[i].g.value,
+            ax: json[i].ax===undefined?null:json[i].ax.value,
           },
           //position: { x: 200, y: 200 }
         });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "snikgraph",
-  "version": "1.0.0",
+  "version": "1.1.1",
   "description": "SNIK Graph",
   "main": "js/main.js",
   "homepage": "https://github.com/IMISE/snik-cytoscape.js#readme",