Unstable neo4j update

src/app/custom/group-customization.service.ts

@@ -33,19 +33,18 @@ export class GroupCustomizationService {
     if (this._g.userPrefs.groupingOption.getValue() == GroupingOptionTypes.compound) {
       // add parent nodes
       for (let id of directorIds) {
-        let name = this._g.cy.$('#' + id).data().name;
         // for each director, generate a compound node
         this._cyService.addParentNode(id);
         // add the director to the compound node
-        this._g.cy.$('#' + id).move({ parent: 'c' + id });
+        this._g.cy.elements(`[id = "${id}"]`).move({ parent: 'c' + id });
       }
 
       // assign nodes to parents
       for (let [k, v] of Object.entries(movie2director)) {
         // if a movie has less than 2 directors add, those movies to the cluster of director
         if (v['length'] < 2) {
           // add movies to the compound node
-          this._g.cy.$('#' + k).move({ parent: 'c' + v[0] });
+          this._g.cy.elements(`[id = "${k}"]`).move({ parent: 'c' + v[0] });
         }
       }
     } else {

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,9 +29,9 @@ 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;
     this._g.cy.$().unselect();
-    this._g.cy.$(idSelector).select();
+    this._g.cy.elements(`[id = "${idSelector}"]`).select();
     this._g.isSwitch2ObjTabOnSelect = true;
   }
 
@@ -73,7 +73,7 @@ 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))) {
@@ -106,8 +106,8 @@ export class ElemOfInterestComponent implements OnInit {
   removeSelected(i: number) {
     if (i == this.clickedNodeIdx) {
       this.clickedNodeIdx = -1;
-      const idSelector = '#n' + this.selectedNodes[i].dbId;
-      this._g.cy.$(idSelector).unselect();
+      const idSelector = 'n' + this.selectedNodes[i].dbId;
+      this._g.cy.$id(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

@@ -51,7 +51,7 @@ export class TableViewComponent implements OnInit, OnDestroy {
   @Input() tableFilled = new Subject<boolean>();
   @Input() clearFilter = new Subject<boolean>();
   @Output() onFilteringChanged = new EventEmitter<TableFiltering>();
-  @Output() onDataForQueryResult = new EventEmitter<{ dbIds: number[] | string[], tableIdx: number[] }>();
+  @Output() onDataForQueryResult = new EventEmitter<{ dbIds: string[], tableIdx: number[] }>();
 
   constructor(private _cyService: CytoscapeService, private _g: GlobalVariableService, private _ngZone: NgZone) { }
 
@@ -165,9 +165,10 @@ export class TableViewComponent implements OnInit, OnDestroy {
     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.elements(`[id = "n${id}"]`);
+
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + id);
+        target = this._g.cy.edges(`[id = "e${id}"]`);
       }
       this.highlighterFn({ target: target, type: EV_MOUSE_ON });
     }
@@ -180,9 +181,9 @@ export class TableViewComponent implements OnInit, OnDestroy {
     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.elements(`[id = "n${id}"]`);
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + id);
+        target =  this._g.cy.edges(`[id = "e${id}"]`);
       }
       this.highlighterFn({ target: target, type: EV_MOUSE_OFF });
     }
@@ -246,7 +247,7 @@ export class TableViewComponent implements OnInit, OnDestroy {
 
   loadGraph4Checked() {
     // index 0 keeps database IDs
-    let dbIds = this.params.results.filter((_, i) => this.checkedIdx[i]).map(x => x[0].val) as number[];
+    let dbIds = this.params.results.filter((_, i) => this.checkedIdx[i]).map(x => x[0].val) as string[];
     let idxes = [];
     for (let i in this.checkedIdx) {
       idxes.push(Number(i) + 1);

src/app/visuall/cytoscape.service.ts

@@ -155,18 +155,17 @@ 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;
       cyNodes.push(this.createCyNode(nodes[i], cyNodeId));
       elemIds.push(cyNodeId);
     }
-
     let cyEdges = [];
     let collapsedEdgeIds = {};
     if (isIncremental) {
       collapsedEdgeIds = this.getCollapsedEdgeIds();
     }
     for (let i = 0; i < edges.length; i++) {
-      let cyEdgeId = 'e' + edges[i].id;
+      let cyEdgeId = 'e' + edges[i].elementId;
       if (collapsedEdgeIds[cyEdgeId]) {
         elemIds.push(collapsedEdgeIds[cyEdgeId]);
         continue;
@@ -188,7 +187,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]);
@@ -202,8 +201,8 @@ export class CytoscapeService {
     let compoundEdgeIds2 = this._g.cy.edges('.' + C.COLLAPSED_EDGE_CLASS).map(x => x.id());
     elemIds.push(...C.arrayDiff(compoundEdgeIds, compoundEdgeIds2));
     // elements might already exist but hidden, so show them
-    this._g.viewUtils.show(this._g.cy.$(elemIds.map(x => '#' + x).join(',')));
-
+    const elemIdSet = new Set(elemIds);
+    this._g.viewUtils.show(this._g.cy.nodes().filter(node => elemIdSet.has(node.id())));
     this._g.applyClassFiltering();
 
     if (isIncremental && !wasEmpty) {
@@ -324,7 +323,7 @@ export class CytoscapeService {
     let ele2highlight = this._g.cy.collection();
     const cnt = elemIds.length;
     for (let i = 0; i < cnt; i++) {
-      ele2highlight.merge('#' + elemIds.pop());
+      ele2highlight.merge(this._g.cy.$id(elemIds.pop()))    
     }
     if (newElemIndicator == MergedElemIndicatorTypes.selection) {
       this._g.isSwitch2ObjTabOnSelect = false;
@@ -338,16 +337,15 @@ export class CytoscapeService {
   createCyNode(node: CyNode, id) {
     const classes = node.labels.join(' ');
     let properties = node.properties;
-    properties.id = 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.source = 'n' + edge.startNodeElementId;
+    properties.target = 'n' + edge.endNodeElementId;
 
     return { data: properties, classes: edge.type };
   }
@@ -573,9 +571,9 @@ 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 });
+    this._g.cy.elements(`[id = "${id}"]`).move({ parent: parent });
     return id;
   }
 
@@ -847,7 +845,7 @@ export class CytoscapeService {
       }
       // add parents to non-compound nodes
       for (let n in clustering) {
-        this._g.cy.$('#' + n).move({ parent: 'c' + clustering[n] });
+        this._g.cy.elements(`[id = "${n}"]`).move({ parent: 'c' + clustering[n] });
       }
     } else {
       let arr = [];
@@ -878,19 +876,18 @@ export class CytoscapeService {
     if (this._g.userPrefs.groupingOption.getValue() == GroupingOptionTypes.compound) {
       // add parent nodes
       for (let id of directorIds) {
-        let name = this._g.cy.$('#' + id).data().name;
         // for each director, generate a compound node
         this.addParentNode(id);
         // add the director to the compound node
-        this._g.cy.$('#' + id).move({ parent: 'c' + id });
+        this._g.cy.elements(`[id = "${id}"]`).move({ parent: 'c' + id });
       }
 
       // assign nodes to parents
       for (let [k, v] of Object.entries(movie2director)) {
         // if a movie has less than 2 directors add, those movies to the cluster of director
         if (v['length'] < 2) {
           // add movies to the compound node
-          this._g.cy.$('#' + k).move({ parent: 'c' + v[0] });
+          this._g.cy.elements(`[id = "${k}"]`).move({ parent: 'c' + v[0] });
         }
       }
     } else {

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

@@ -17,16 +17,16 @@ export interface GraphResponse {
 }
 
 export interface CyNode {
-  id: string;
+  elementId: string;
   labels: string[];
   properties?: any;
 }
 
 export interface CyEdge {
-  id: string;
+  elementId: string;
   properties?: any;
-  startNode: string | number;
-  endNode: string | number;
+  startNodeElementId: string;
+  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;