Skip to content

Commit

Permalink
Fix issue #387: cytoscape selectors changed
Browse files Browse the repository at this point in the history
  • Loading branch information
@LaraMerdol
LaraMerdol committed Oct 16, 2023
1 parent eeddabb commit 06aca0b
Show file tree
Hide file tree
Showing 8 changed files with 44 additions and 48 deletions.
2 changes: 1 addition & 1 deletion src/app/custom/context-menu-customization.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
Expand Down
5 changes: 2 additions & 3 deletions src/app/custom/group-customization.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
16 changes: 8 additions & 8 deletions src/app/shared/elem-of-interest/elem-of-interest.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand All @@ -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++) {
Expand All @@ -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 = {};
Expand All @@ -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 {
Expand All @@ -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);
});
Expand All @@ -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--;
}
Expand Down
15 changes: 7 additions & 8 deletions src/app/shared/table-view/table-view.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = '-';
Expand Down Expand Up @@ -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 });
}
Expand Down Expand Up @@ -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 });
}
Expand Down
24 changes: 11 additions & 13 deletions src/app/visuall/cytoscape.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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) {
Expand Down Expand Up @@ -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;
Expand All @@ -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 };
}
Expand Down Expand Up @@ -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;
}

Expand Down Expand Up @@ -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 = [];
Expand Down Expand Up @@ -878,19 +877,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 {
Expand Down
2 changes: 1 addition & 1 deletion src/app/visuall/db-service/neo4j-db.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
6 changes: 3 additions & 3 deletions src/app/visuall/global-variable.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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]);
}
}

Expand All @@ -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];
}
Expand All @@ -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];
Expand Down
22 changes: 11 additions & 11 deletions src/app/visuall/operation-tabs/query-tab/advanced-queries/advanced-queries.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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++) {
Expand All @@ -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--;
}
Expand Down Expand Up @@ -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);
Expand All @@ -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) {
Expand Down Expand Up @@ -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 {
Expand All @@ -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] } }));
});
}

Expand All @@ -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;
}

Expand Down Expand Up @@ -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] });
}
Expand Down

0 comments on commit 06aca0b

Please sign in to comment.