diff --git a/src/app/custom/context-menu-customization.service.ts b/src/app/custom/context-menu-customization.service.ts
index d5f86e4c..aeb7a084 100644
--- a/src/app/custom/context-menu-customization.service.ts
+++ b/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).replace(/_/g, ":")],
+      [ele.id().substr(1)],
       (x) => {
         this._cyService.loadElementsFromDatabase(x, true);
       },
diff --git a/src/app/custom/group-customization.service.ts b/src/app/custom/group-customization.service.ts
index 89c8c9c3..a843288e 100644
--- a/src/app/custom/group-customization.service.ts
+++ b/src/app/custom/group-customization.service.ts
@@ -33,11 +33,10 @@ 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
@@ -45,7 +44,7 @@ export class GroupCustomizationService {
         // 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 {
diff --git a/src/app/shared/elem-of-interest/elem-of-interest.component.ts b/src/app/shared/elem-of-interest/elem-of-interest.component.ts
index c710551f..ffb2f2fa 100644
--- a/src/app/shared/elem-of-interest/elem-of-interest.component.ts
+++ b/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.replace(":", '_');
+    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;
   }
 
@@ -49,7 +49,7 @@ export class ElemOfInterestComponent implements OnInit {
     if (selectedNodes.length < 1) {
       return;
     }
-    const dbIds = selectedNodes.map(x => x.id().slice(1).replace(/_/g, ":"));
+    const dbIds = selectedNodes.map(x => x.id().slice(1));
     const labels = this._g.getLabels4ElemsAsArray(dbIds);
     const types = selectedNodes.map(x => x.classes()[0]);
     for (let i = 0; i < labels.length; i++) {
@@ -76,7 +76,7 @@ export class ElemOfInterestComponent implements OnInit {
         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).replace(/_/g, ":"))) {
+          if (this.selectedNodes.find(x => x.dbId == arr[i][idx4id].substring(1))) {
             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).replace(/_/g, ":")) === undefined;
+        const fn1 = x => this.selectedNodes.find(y => y.dbId === x.data.id.substring(1)) === 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).replace(/_/g, ":"), label: x.classes.split(' ')[0] + ':' + labels[i] } }));
+      this.selectedNodes = this.selectedNodes.concat(elems.map((x, i) => { return { dbId: x.data.id.substring(1), label: x.classes.split(' ')[0] + ':' + labels[i] } }));
 
       this.selectedElemsChanged.next(this.selectedNodes);
     });
@@ -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.replace(":", '_');;
-      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--;
     }
diff --git a/src/app/shared/table-view/table-view.component.ts b/src/app/shared/table-view/table-view.component.ts
index 39ddab47..1fa6eb71 100644
--- a/src/app/shared/table-view/table-view.component.ts
+++ b/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).replace(/_/g, ":");
+          this.hoveredElemId = e.target.id().substr(1);
         }
       } else {
         this.hoveredElemId = '-';
@@ -159,32 +159,31 @@ 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' + elementId.replace(/:/g, "_"));
+      let target = this._g.cy.elements(`[id = "n${id}"]`);
+      
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + elementId.replace(/:/g, "_"));
+        target = this._g.cy.edges(`[id = "e${id}"]`);
       }
       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' + elementId.replace(/:/g, "_"));
+      let target = this._g.cy.elements(`[id = "n${id}"]`);
       if (!this.params.isNodeData) {
-        target = this._g.cy.$('#e' + elementId.replace(/:/g, "_"));
+        target =  this._g.cy.edges(`[id = "e${id}"]`);
       }
       this.highlighterFn({ target: target, type: EV_MOUSE_OFF });
     }
@@ -319,7 +318,7 @@ export class TableViewComponent implements OnInit, OnDestroy {
       }
       data['id'] = prefix + r[0].val;
       if (this.params.isUseCySelector4Highlight) {
-        data['id'] = r[0].val.substr(1).replace(/_/g, ":");
+        data['id'] = r[0].val.substr(1);
       }
       objs.push({ classes: cName, data: data });
     }
diff --git a/src/app/visuall/cytoscape.service.ts b/src/app/visuall/cytoscape.service.ts
index 54a559ee..1d899ac7 100644
--- a/src/app/visuall/cytoscape.service.ts
+++ b/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].elementId.replace(/:/g, "_");
+      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].elementId.replace(/:/g, "_");
+      let cyEdgeId = 'e' + edges[i].elementId;
       if (collapsedEdgeIds[cyEdgeId]) {
         elemIds.push(collapsedEdgeIds[cyEdgeId]);
         continue;
@@ -202,8 +201,7 @@ 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(',')));
-
+    this._g.viewUtils.show(this._g.cy.nodes().filter(node => elemIds.includes(node.id())));
     this._g.applyClassFiltering();
 
     if (isIncremental && !wasEmpty) {
@@ -324,7 +322,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;
@@ -345,9 +343,10 @@ export class CytoscapeService {
 
   createCyEdge(edge: CyEdge, id) {
     let properties = edge.properties || {};
+    properties.id = id;
     properties.elementId = id;
-    properties.source = 'n' + edge.startNodeElementId.replace(/:/g, "_");
-    properties.target = 'n' + edge.endNodeElementId.replace(/:/g, "_");
+    properties.source = 'n' + edge.startNodeElementId;
+    properties.target = 'n' + edge.endNodeElementId;
 
     return { data: properties, classes: edge.type };
   }
@@ -575,7 +574,7 @@ export class CytoscapeService {
     const id = 'c' + idSuffix;
     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 +846,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,11 +877,10 @@ 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
@@ -890,7 +888,7 @@ export class CytoscapeService {
         // 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 {
diff --git a/src/app/visuall/db-service/neo4j-db.service.ts b/src/app/visuall/db-service/neo4j-db.service.ts
index 176c4c63..55bcc305 100644
--- a/src/app/visuall/db-service/neo4j-db.service.ts
+++ b/src/app/visuall/db-service/neo4j-db.service.ts
@@ -144,7 +144,7 @@ export class Neo4jDb implements DbService {
     if (f2.length > 0) {
       f += f2;
     }
-    this.runQuery(`MATCH (n)-[e]-() ${f} RETURN n,e limit 100`, callback);
+    this.runQuery(`MATCH (n)-[e]-() ${f} RETURN n,e limit 5`, callback);
   }
 
   getFilteringResult(rules: ClassBasedRules, filter: TableFiltering, skip: number, limit: number, type: DbResponseType, callback: (x: GraphResponse | TableResponse) => any) {
diff --git a/src/app/visuall/global-variable.service.ts b/src/app/visuall/global-variable.service.ts
index 64788ca0..8a7c122e 100644
--- a/src/app/visuall/global-variable.service.ts
+++ b/src/app/visuall/global-variable.service.ts
@@ -214,7 +214,7 @@ export class GlobalVariableService {
       cyIds = objDatas.map(x => x.data.id);
     } else {
       for (let i = 0; i < elemIds.length; i++) {
-        cyIds.push(idChar + elemIds[i].replace(/:/g, "_"));
+        cyIds.push(idChar + elemIds[i]);
       }
     }
 
@@ -226,7 +226,7 @@ export class GlobalVariableService {
     for (let i = 0; i < cyIds.length; i++) {
       let cName = '';
       if (!objDatas) {
-        cName = this.cy.$('#' + cyIds[i]).className()[0];
+        cName = this.cy.elements(`[id = "${cyIds[i]}"]`).className()[0];
       } else {
         cName = objDatas[i].classes.split(' ')[0];
       }
@@ -237,7 +237,7 @@ export class GlobalVariableService {
       } else {
         let propName = s.slice(s.indexOf('(') + 1, s.indexOf(')'));
         if (!objDatas) {
-          labels.push(this.cy.$('#' + cyIds[i]).data(propName));
+          labels.push(this.cy.elements(`[id = "${cyIds[i]}"]`).data(propName));
         } else {
           const currData = objDatas[i].data;
           let l = currData[propName];
diff --git a/src/app/visuall/operation-tabs/query-tab/advanced-queries/advanced-queries.component.ts b/src/app/visuall/operation-tabs/query-tab/advanced-queries/advanced-queries.component.ts
index 6df29af5..dfee70e6 100644
--- a/src/app/visuall/operation-tabs/query-tab/advanced-queries/advanced-queries.component.ts
+++ b/src/app/visuall/operation-tabs/query-tab/advanced-queries/advanced-queries.component.ts
@@ -81,7 +81,7 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
     if (selectedNodes.length < 1) {
       return;
     }
-    const dbIds = selectedNodes.map(x => x.id().slice(1).replace(/_/g, ":"));
+    const dbIds = selectedNodes.map(x => x.id().slice(1));
     const labels = this._g.getLabels4ElemsAsArray(dbIds);
     const types = selectedNodes.map(x => x.classes()[0]);
     for (let i = 0; i < labels.length; i++) {
@@ -94,8 +94,8 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
   removeSelected(i: number) {
     if (i == this.clickedNodeIdx) {
       this.clickedNodeIdx = -1;
-      const idSelector = '#n' + this.selectedNodes[i].dbId.replace(/:/g, "_");
-      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--;
     }
@@ -296,7 +296,7 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
 
   private highlightSeedNodes() {
     const dbIds = this.selectedNodes.map(x => x.dbId);
-    const seedNodes = this._g.cy.nodes(dbIds.map(x => '#n' + x.replace(/:/g, "_")).join());
+    const seedNodes = this._g.cy.nodes().filter(node => dbIds.includes(node.id().substring(1)));
     // add a new higlight style
     if (this._g.userPrefs.highlightStyles.length < 2) {
       const cyStyle = getCyStyleFromColorAndWid('#0b9bcd', 4.5);
@@ -316,7 +316,7 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
     if (!dbIds || dbIds.length < 1) {
       return;
     }
-    const cyNodes = this._g.cy.nodes(dbIds.map(x => '#n' + x.replace(/:/g, "_")).join());
+    const cyNodes = this._g.cy.nodes().filter(node => dbIds.includes(node.id().substring(1)));
 
     // add a new higlight style
     if (this._g.userPrefs.highlightStyles.length < 3) {
@@ -353,7 +353,7 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
         }
       } else {
         elems = JSON.parse(txt) as GraphElem[];
-        const fn1 = x => this.selectedNodes.find(y => y.dbId === x.data.id.substring(1).replace(/_/g, ":")) === undefined;
+        const fn1 = x => this.selectedNodes.find(y => y.dbId === x.data.id.substring(1)) === undefined;
         if (!(elems instanceof Array)) {
           elems = (JSON.parse(txt).nodes as any[]).filter(fn1);
         } else {
@@ -362,7 +362,7 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
       }
 
       const labels = this._g.getLabels4ElemsAsArray(null, true, elems);
-      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.selectedNodes = this.selectedNodes.concat(elems.map((x, i) => { return { dbId: x.data.id.substring(1), label: x.classes.split(' ')[0] + ':' + labels[i] } }));
     });
   }
 
@@ -382,9 +382,9 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
   selectedNodeClicked(i: number) {
     this._g.isSwitch2ObjTabOnSelect = false;
     this.clickedNodeIdx = i;
-    const idSelector = '#n' + this.selectedNodes[i].dbId.replace(/:/g, "_");
+    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;
   }
 
@@ -426,8 +426,8 @@ export class AdvancedQueriesComponent implements OnInit, OnDestroy {
       const srcId = edgeSrcTgt[i][0];
       const tgtId = edgeSrcTgt[i][1];
       // check if src and target exist in cy or current data.
-      const isSrcLoaded = this.tableInput.isMergeGraph ? this._g.cy.$('#n' + srcId.replace(/:/g, "_")).length > 0 : false;
-      const isTgtLoaded = this.tableInput.isMergeGraph ? this._g.cy.$('#n' + tgtId.replace(/:/g, "_")).length > 0 : false;
+      const isSrcLoaded = this.tableInput.isMergeGraph ? this._g.cy.elements(`[id = "n${srcId}"]`).length > 0 : false;
+      const isTgtLoaded = this.tableInput.isMergeGraph ? this._g.cy.elements(`[id = "n${tgtId}"]`).length > 0 : false;
       if ((nodeIdsDict[srcId] || isSrcLoaded) && (nodeIdsDict[tgtId] || isTgtLoaded)) {
         cyData.edges.push({ properties: edges[i], startNodeElementId: srcId, endNodeElementId: tgtId, elementId: edgeId[i], type: edgeClass[i] });
       }