Fix issue #387: İd's were changed with elementId

src/app/custom/context-menu-customization.service.ts

@@ -146,7 +146,7 @@ export class ContextMenuCustomizationService {
   getNeighbors(event, historyMeta: HistoryMetaData, queryMeta: DbQueryMeta) {
     const ele = event.target || event.cyTarget;
     this._dbService.getNeighbors(
-      [ele.id().substr(1)],
+      [ele.id().substr(1).replace(/_/g, ":")],
       (x) => {
         this._cyService.loadElementsFromDatabase(x, true);
       },

src/app/custom/queries/query-helper.ts

@@ -40,7 +40,7 @@ export function buildIdFilter(ids: string[] | number[], hasEnd = false, isEdgeQu
     cql = '(';
   }
   for (let i = 0; i < ids.length; i++) {
-    cql += `ID(${varName})=${ids[i]} OR `
+    cql += `ElementId(${varName})='${ids[i]}' OR `
   }
 
   if (ids.length > 0) {

src/app/custom/queries/query0/query0.component.ts

@@ -8,7 +8,7 @@ import { buildIdFilter, getOrderByExpression4Query, getQueryCondition4TxtFilter
 import { DbResponseType, GraphResponse } from 'src/app/visuall/db-service/data-types';
 
 export interface ActorCountData {
-  id: number;
+  id: string;
   Actor: string;
   Count: number;
 }
@@ -77,7 +77,7 @@ export class Query0Component implements OnInit {
     WITH n, SIZE(COLLECT(r)) as degree
     WHERE degree >= ${this.movieCnt} ${txtCondition}
     WITH n, degree ORDER BY ${orderExpr}
-    RETURN collect(ID(n))${r} as id, collect(n.primary_name)${r} as Actor, collect(degree)${r} as Count, size(collect(ID(n))) as totalDataCount`;
+    RETURN collect(ElementId(n))${r} as id, collect(n.primary_name)${r} as Actor, collect(degree)${r} as Count, size(collect(ElementId(n))) as totalDataCount`;
     this._dbService.runQuery(cql, cb, DbResponseType.table);
   }
 
@@ -214,13 +214,13 @@ export class Query0Component implements OnInit {
     }
     // add a node if an edge starts with that
     for (let i = 0; i < x.edges.length; i++) {
-      if (nodeIdDict[x.edges[i].startNode]) {
-        nodeIdDict[x.edges[i].endNode] = true;
+      if (nodeIdDict[x.edges[i].startNodeElementId]) {
+        nodeIdDict[x.edges[i].endNodeElementId] = true;
       }
     }
 
     for (let i = 0; i < x.nodes.length; i++) {
-      if (nodeIdDict[x.nodes[i].id]) {
+      if (nodeIdDict[x.nodes[i].elementId]) {
         r.nodes.push(x.nodes[i]);
       }
     }

src/app/custom/queries/query1/query1.component.ts

@@ -8,7 +8,7 @@ import { buildIdFilter, getOrderByExpression4Query, getQueryCondition4TxtFilter
 import { DbResponseType, GraphResponse } from 'src/app/visuall/db-service/data-types';
 
 export interface TitleData {
-  id: number;
+  id: string;
   title: string;
 }
 @Component({
@@ -86,7 +86,7 @@ export class Query1Component implements OnInit {
     const cql = ` MATCH (n:Title)<-[r:ACTOR|ACTRESS]-(:Person)
     WHERE '${this.selectedGenre}' IN n.genres AND ${dateFilter} ${txtCondition} 
     WITH DISTINCT n ORDER BY ${orderExpr}
-    RETURN collect(ID(n))${r} as id, collect(n.primary_title)${r} as Title, size(collect(ID(n))) as totalDataCount`;
+    RETURN collect(ElementId(n))${r} as id, collect(n.primary_title)${r} as Title, size(collect(ElementId(n))) as totalDataCount`;
     this._dbService.runQuery(cql, cb, DbResponseType.table);
   }
 
@@ -238,13 +238,13 @@ export class Query1Component implements OnInit {
     }
     // add a node if an edge ends with that
     for (let i = 0; i < x.edges.length; i++) {
-      if (nodeIdDict[x.edges[i].endNode]) {
-        nodeIdDict[x.edges[i].startNode] = true;
+      if (nodeIdDict[x.edges[i].endNodeElementId]) {
+        nodeIdDict[x.edges[i].startNodeElementId] = true;
       }
     }
 
     for (let i = 0; i < x.nodes.length; i++) {
-      if (nodeIdDict[x.nodes[i].id]) {
+      if (nodeIdDict[x.nodes[i].elementId]) {
         r.nodes.push(x.nodes[i]);
       }
     }

src/app/shared/elem-of-interest/elem-of-interest.component.ts

@@ -29,7 +29,7 @@ export class ElemOfInterestComponent implements OnInit {
   selectedNodeClicked(i: number) {
     this._g.isSwitch2ObjTabOnSelect = false;
     this.clickedNodeIdx = i;
-    const idSelector = '#n' + this.selectedNodes[i].dbId;
+    const idSelector = '#n' + this.selectedNodes[i].dbId.replace(":", '_');
     this._g.cy.$().unselect();
     this._g.cy.$(idSelector).select();
     this._g.isSwitch2ObjTabOnSelect = true;
@@ -49,7 +49,7 @@ export class ElemOfInterestComponent implements OnInit {
     if (selectedNodes.length < 1) {
       return;
     }
-    const dbIds = selectedNodes.map(x => x.id().slice(1));
+    const dbIds = selectedNodes.map(x => x.id().slice(1).replace(/_/g, ":"));
     const labels = this._g.getLabels4ElemsAsArray(dbIds);
     const types = selectedNodes.map(x => x.classes()[0]);
     for (let i = 0; i < labels.length; i++) {
@@ -73,10 +73,10 @@ export class ElemOfInterestComponent implements OnInit {
         if (arr.length < 0) {
           return;
         }
-        const idx4id = arr[0].indexOf('id');
+        const idx4id = arr[0].indexOf('elementId');
 
         for (let i = 1; i < arr.length; i++) {
-          if (this.selectedNodes.find(x => x.dbId == arr[i][idx4id].substring(1))) {
+          if (this.selectedNodes.find(x => x.dbId == arr[i][idx4id].substring(1).replace(/_/g, ":"))) {
             continue;
           }
           const o = {};
@@ -87,7 +87,7 @@ export class ElemOfInterestComponent implements OnInit {
         }
       } else {
         elems = JSON.parse(txt) as GraphElem[];
-        const fn1 = x => this.selectedNodes.find(y => y.dbId === x.data.id.substring(1)) === undefined;
+        const fn1 = x => this.selectedNodes.find(y => y.dbId === x.data.id.substring(1).replace(/_/g, ":")) === undefined;
         if (!(elems instanceof Array)) {
           elems = (JSON.parse(txt).nodes as any[]).filter(fn1);
         } else {
@@ -97,7 +97,7 @@ export class ElemOfInterestComponent implements OnInit {
 
       elems = elems.filter(x => this.isValidType(x.classes.split(' ')[0]));
       const labels = this._g.getLabels4ElemsAsArray(null, true, elems);
-      this.selectedNodes = this.selectedNodes.concat(elems.map((x, i) => { return { dbId: x.data.id.substring(1), label: x.classes.split(' ')[0] + ':' + labels[i] } }));
+      this.selectedNodes = this.selectedNodes.concat(elems.map((x, i) => { return { dbId: x.data.id.substring(1).replace(/_/g, ":"), label: x.classes.split(' ')[0] + ':' + labels[i] } }));
 
       this.selectedElemsChanged.next(this.selectedNodes);
     });
@@ -106,7 +106,7 @@ export class ElemOfInterestComponent implements OnInit {
   removeSelected(i: number) {
     if (i == this.clickedNodeIdx) {
       this.clickedNodeIdx = -1;
-      const idSelector = '#n' + this.selectedNodes[i].dbId;
+      const idSelector = '#n' + this.selectedNodes[i].dbId.replace(":", '_');;
       this._g.cy.$(idSelector).unselect();
     } else if (i < this.clickedNodeIdx) {
       this.clickedNodeIdx--;

src/app/shared/table-view/table-view-types.ts

@@ -38,7 +38,7 @@ export interface TableFiltering {
 }
 
 export interface TableRowMeta {
-  dbIds: number[] | string[];
+  dbIds:  string[];
   tableIdx: number[];
 }
 

src/app/shared/table-view/table-view.component.ts

@@ -126,7 +126,7 @@ export class TableViewComponent implements OnInit, OnDestroy {
         if (this.params.isUseCySelector4Highlight) {
           this.hoveredElemId = '#' + e.target.id();
         } else {
-          this.hoveredElemId = e.target.id().substr(1);
+          this.hoveredElemId = e.target.id().substr(1).replace(/_/g, ":");
         }
       } else {
         this.hoveredElemId = '-';
@@ -159,30 +159,32 @@ export class TableViewComponent implements OnInit, OnDestroy {
   }
 
   onMouseEnter(id: string) {
+    let elementId = id;
     if (this.params.isDisableHover || !this._g.userPrefs.isHighlightOnHover.getValue()) {
       return;
     }
     if (this.params.isUseCySelector4Highlight) {
       this.highlighterFn({ target: null, type: EV_MOUSE_ON, cySelector: id });
     } else {
-      let target = this._g.cy.$('#n' + id);
+      let target = this._g.cy.$('#n' + elementId.replace(/:/g, "_"));
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + id);
+        target = this._g.cy.$('#e' + elementId.replace(/:/g, "_"));
       }
       this.highlighterFn({ target: target, type: EV_MOUSE_ON });
     }
   }
 
   onMouseExit(id: string) {
+    let elementId = id;
     if (this.params.isDisableHover || !this._g.userPrefs.isHighlightOnHover.getValue()) {
       return;
     }
     if (this.params.isUseCySelector4Highlight) {
       this.highlighterFn({ target: null, type: EV_MOUSE_OFF, cySelector: id });
     } else {
-      let target = this._g.cy.$('#n' + id);
+      let target = this._g.cy.$('#n' + elementId.replace(/:/g, "_"));
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + id);
+        target = this._g.cy.$('#e' + elementId.replace(/:/g, "_"));
       }
       this.highlighterFn({ target: target, type: EV_MOUSE_OFF });
     }
@@ -317,7 +319,7 @@ export class TableViewComponent implements OnInit, OnDestroy {
       }
       data['id'] = prefix + r[0].val;
       if (this.params.isUseCySelector4Highlight) {
-        data['id'] = r[0].val.substr(1);
+        data['id'] = r[0].val.substr(1).replace(/_/g, ":");
       }
       objs.push({ classes: cName, data: data });
     }

src/app/visuall/cytoscape.service.ts

@@ -155,7 +155,7 @@ export class CytoscapeService {
     let elemIds: string[] = [];
     let cyNodes = [];
     for (let i = 0; i < nodes.length; i++) {
-      let cyNodeId = 'n' + nodes[i].id;
+      let cyNodeId = 'n' + nodes[i].elementId.replace(/:/g, "_");
       cyNodes.push(this.createCyNode(nodes[i], cyNodeId));
       elemIds.push(cyNodeId);
     }
@@ -166,7 +166,7 @@ export class CytoscapeService {
       collapsedEdgeIds = this.getCollapsedEdgeIds();
     }
     for (let i = 0; i < edges.length; i++) {
-      let cyEdgeId = 'e' + edges[i].id;
+      let cyEdgeId = 'e' + edges[i].elementId.replace(/:/g, "_");
       if (collapsedEdgeIds[cyEdgeId]) {
         elemIds.push(collapsedEdgeIds[cyEdgeId]);
         continue;
@@ -188,7 +188,7 @@ export class CytoscapeService {
     for (let i = 0; i < cyEdges.length; i++) {
       const sId = cyEdges[i].data.source;
       const eId = cyEdges[i].data.target;
-      if ((this._g.cy.$id(sId).length < 1 && !nodes.find(x => x.id == sId)) || (this._g.cy.$id(eId).length < 1 && !nodes.find(x => x.id == eId))) {
+      if ((this._g.cy.$id(sId).length < 1 && !nodes.find(x => x.elementId == sId)) || (this._g.cy.$id(eId).length < 1 && !nodes.find(x => x.elementId == eId))) {
         continue;
       }
       filteredCyEdges.push(cyEdges[i]);
@@ -338,16 +338,16 @@ export class CytoscapeService {
   createCyNode(node: CyNode, id) {
     const classes = node.labels.join(' ');
     let properties = node.properties;
-    properties.id = id
-
+    properties.elementId = id
+    properties.id = id;
     return { data: properties, classes: classes };
   }
 
   createCyEdge(edge: CyEdge, id) {
     let properties = edge.properties || {};
-    properties.id = id;
-    properties.source = 'n' + edge.startNode;
-    properties.target = 'n' + edge.endNode;
+    properties.elementId = id;
+    properties.source = 'n' + edge.startNodeElementId.replace(/:/g, "_");
+    properties.target = 'n' + edge.endNodeElementId.replace(/:/g, "_");
 
     return { data: properties, classes: edge.type };
   }
@@ -573,7 +573,7 @@ export class CytoscapeService {
 
   addParentNode(idSuffix: string | number, parent = undefined): string {
     const id = 'c' + idSuffix;
-    const parentNode = this.createCyNode({ labels: [C.CLUSTER_CLASS], properties: { end_datetime: 0, begin_datetime: 0, name: name }, id: '' }, id);
+    const parentNode = this.createCyNode({ labels: [C.CLUSTER_CLASS], properties: { end_datetime: 0, begin_datetime: 0, name: name } ,elementId:''}, id);
     this._g.cy.add(parentNode);
     this._g.cy.$('#' + id).move({ parent: parent });
     return id;

src/app/visuall/db-service/data-types.ts

@@ -17,16 +17,20 @@ export interface GraphResponse {
 }
 
 export interface CyNode {
-  id: string;
+  //id: string;
+  elementId: string;
   labels: string[];
   properties?: any;
 }
 
 export interface CyEdge {
-  id: string;
+  //id: string;
+  elementId: string;
   properties?: any;
-  startNode: string | number;
-  endNode: string | number;
+  //startNode: string | number;
+  startNodeElementId: string;
+  //endNode: string | number;
+  endNodeElementId: string;
   type: string;
 }
 

src/app/visuall/db-service/db-adapter.service.ts

@@ -16,7 +16,7 @@ export class DbAdapterService {
     this._db = CustomizationModule.db;
   }
 
-  getNeighbors(elemId: string[] | number[], callback: (x: GraphResponse) => any, historyMeta?: HistoryMetaData, queryMeta?: DbQueryMeta) {
+  getNeighbors(elemId: string[], callback: (x: GraphResponse) => any, historyMeta?: HistoryMetaData, queryMeta?: DbQueryMeta) {
     let s = '';
     if (historyMeta) {
       s = historyMeta.labels;
@@ -33,7 +33,7 @@ export class DbAdapterService {
     this._db.getNeighbors(elemId, fn, queryMeta);
   }
 
-  getElems(ids: string[] | number[], callback: (x: GraphResponse) => any, queryMeta: DbQueryMeta, historyMeta?: HistoryMetaData,) {
+  getElems(ids: string[], callback: (x: GraphResponse) => any, queryMeta: DbQueryMeta, historyMeta?: HistoryMetaData,) {
     let s = '';
     if (historyMeta) {
       s = historyMeta.labels;