Skip to content

Commit

Permalink
d3 mouseover/mouseout fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
ichupin committed Nov 24, 2023
1 parent b9b4651 commit 496afa7
Show file tree
Hide file tree
Showing 6 changed files with 37 additions and 31 deletions.
2 changes: 1 addition & 1 deletion src-gui/ui/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build --prod && cd.. && cp src/main/resources/ui/index.html src/main/resources/ui/index.php",
"build": "ng build --configuration production && cd.. && cp src/main/resources/ui/index.html src/main/resources/ui/index.php",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
Expand Down
19 changes: 10 additions & 9 deletions src-gui/ui/src/app/common/services/flowpath.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,8 @@ export class FlowpathService {
}).attr('stroke-width', (d) => 4.5).attr('stroke', function(d, index) {
return d.colourCode;
}).attr('cursor', 'pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
const index = d.index;
if (type == 'forwardDiverse' || type == 'reverseDiverse' ) {
const element = document.getElementById(type + '_link' + index);
let classes = element.getAttribute('class');
Expand Down Expand Up @@ -380,8 +381,8 @@ export class FlowpathService {
});
}

}).on('mouseout', function(d, index) {
$('#' + type + '_link' + index).removeClass('overlay');
}).on('mouseout', function(event, d) {
$('#' + type + '_link' + d.index).removeClass('overlay');
$('#' + hoverTextID).css('display', 'none');
}).on('click', function(d) {
if (d.type == 'isl') {
Expand Down Expand Up @@ -418,7 +419,7 @@ export class FlowpathService {
.attr('stroke', '#00baff')
.attr('stroke-width', '1px')
.attr('fill', '#FFF').attr('style', 'cursor:pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
if (type == 'forwardDiverse' || type == 'reverseDiverse' ) {
const element = document.getElementById('textCircle_target_' + type + '_' + d.target.switch_id);
const rec: any = element.getBoundingClientRect();
Expand All @@ -433,7 +434,7 @@ export class FlowpathService {

}

}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
$('#' + hoverTextID).css('display', 'none');
});

Expand Down Expand Up @@ -481,7 +482,7 @@ export class FlowpathService {
.attr('stroke', '#00baff')
.attr('stroke-width', '1px')
.attr('fill', '#FFF').attr('style', 'cursor:pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
if (type == 'forwardDiverse' || type == 'reverseDiverse' ) {
const element = document.getElementById('textCircle_source_' + type + '_' + d.source.switch_id);
const rec: any = element.getBoundingClientRect();
Expand All @@ -497,7 +498,7 @@ export class FlowpathService {

}

}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
$('#' + hoverTextID).css('display', 'none');
});

Expand Down Expand Up @@ -587,7 +588,7 @@ export class FlowpathService {
return 'image_' + index;
})
.attr('cursor', 'pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
if (type == 'forwardDiverse' || type == 'reverseDiverse' ) {
const element = document.getElementById(type + '_circle_' + d.switch_id);
const rec: any = element.getBoundingClientRect();
Expand All @@ -602,7 +603,7 @@ export class FlowpathService {

}

}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
$('#' + hoverTextID).css('display', 'none');
});

Expand Down
11 changes: 6 additions & 5 deletions src-gui/ui/src/app/common/services/topology-graph.service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -314,7 +314,7 @@ export class TopologyGraphService {
})
.attr('cursor', 'pointer');
if (!forMap) {
graphNodeElement.on('mouseover', function(d, index) {
graphNodeElement.on('mouseover', function(event, d) {
$('#isl_hover').css('display', 'none');
const element = document.getElementById('circle_' + d.switch_id);

Expand Down Expand Up @@ -360,7 +360,7 @@ export class TopologyGraphService {
}

})
.on('mouseout', function(d, index) {
.on('mouseout', function(event, d) {
if (this.flagHover == false) {
this.flagHover = true;
} else {
Expand Down Expand Up @@ -571,7 +571,8 @@ export class TopologyGraphService {
}
});
if (!forMap) {
graphLinksData.on('mouseover', function(d, index) {
graphLinksData.on('mouseover', function(event, d) {
const index = d.index;
$('#switch_hover').css('display', 'none');
const element = $('#link' + index)[0];
const availbandwidth = d.available_bandwidth;
Expand Down Expand Up @@ -739,9 +740,9 @@ export class TopologyGraphService {
);
}
})
.on('mouseout', function(d, index) {
.on('mouseout', function(event, d) {
$('#topology-hover-txt, #isl_hover').css('display', 'none');
const element = $('#link' + index)[0];
const element = $('#link' + d.index)[0];
const availbandwidth = d.available_bandwidth;
const max_bandwidth = d.max_bandwidth;
const percentage = ref.commonService.getPercentage(availbandwidth, max_bandwidth);
Expand Down
6 changes: 3 additions & 3 deletions src-gui/ui/src/app/modules/flows/connected-devices/connected-devices.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -413,8 +413,8 @@ export class ConnectedDevicesComponent implements OnInit, OnChanges, AfterViewIn
})
.attr('id', function(d, index) {
return 'image_' + index;
}).attr('cursor', 'pointer').on('mouseover', function(d, index) {
const element = document.getElementById('circle_' + index);
}).attr('cursor', 'pointer').on('mouseover', function(event, d) {
const element = document.getElementById('circle_' + d.index);
const rec: any = element.getBoundingClientRect();
if (d.connected) {
$('#tooltip_connected_device').css('display', 'block');
Expand Down Expand Up @@ -443,7 +443,7 @@ export class ConnectedDevicesComponent implements OnInit, OnChanges, AfterViewIn
}
}

}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
$('#tooltip_connected_device').css('display', 'none');
});

Expand Down
12 changes: 7 additions & 5 deletions src-gui/ui/src/app/modules/flows/flow-detail/flow-detail.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -268,7 +268,8 @@ export class FlowDetailComponent implements OnInit {
}).attr('stroke-width', (d) => 2.5).attr('stroke', function(d, index) {
return ISL.DISCOVERED;
}).attr('cursor', 'pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
const index = d.index;
const element = document.getElementById('link' + index);
let classes = element.getAttribute('class');
classes = classes + ' overlay';
Expand Down Expand Up @@ -304,7 +305,8 @@ export class FlowDetailComponent implements OnInit {
});

}
}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
const index = d.index;
const element = document.getElementById('link' + index);
$('#link' + index).removeClass('overlay');
$('#ping-hover-txt').css('display', 'none');
Expand Down Expand Up @@ -363,8 +365,8 @@ export class FlowDetailComponent implements OnInit {
.attr('width', 58)
.attr('id', function(d, index) {
return 'image_' + index;
}).attr('cursor', 'pointer').on('mouseover', function(d, index) {
const element = document.getElementById('circle_' + index);
}).attr('cursor', 'pointer').on('mouseover', function(event, d) {
const element = document.getElementById('circle_' + d.index);
const rec: any = element.getBoundingClientRect();
$('#ping-hover-txt,#switch_hover').css('display', 'block');
$('#ping-hover-txt').css('top', rec.y + 'px');
Expand Down Expand Up @@ -394,7 +396,7 @@ export class FlowDetailComponent implements OnInit {
$('#ping-hover-txt').css('left', left + 'px');
$('#ping-hover-txt').addClass('left');
}
}).on('mouseout', function(d, index) {
}).on('mouseout', function(event, d) {
$('#ping-hover-txt,#switch_hover').css('display', 'none');
});

Expand Down
18 changes: 10 additions & 8 deletions src-gui/ui/src/app/modules/topology/topology.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,7 +522,7 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
return 'image_' + index;
})
.attr('cursor', 'pointer')
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
$('#isl_hover').css('display', 'none');

const element = document.getElementById('circle_' + d.switch_id);
Expand Down Expand Up @@ -569,7 +569,7 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
}

})
.on('mouseout', function(d, index) {
.on('mouseout', function(event, d) {
if (this.flagHover == false) {
this.flagHover = true;
} else {
Expand Down Expand Up @@ -693,7 +693,8 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
.attr('id', (d, index) => {
return 'link' + index;
})
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
const index = d.index;
$('#switch_hover').css('display', 'none');
const element = $('#link' + index)[0];
const availbandwidth = d.available_bandwidth;
Expand Down Expand Up @@ -861,9 +862,9 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
);
}
})
.on('mouseout', function(d, index) {
.on('mouseout', function(event, d) {
$('#topology-hover-txt, #isl_hover').css('display', 'none');
const element = $('#link' + index)[0];
const element = $('#link' + d.index)[0];
const availbandwidth = d.available_bandwidth;
const max_bandwidth = d.max_bandwidth;
const percentage = ref.commonService.getPercentage(availbandwidth, max_bandwidth);
Expand Down Expand Up @@ -1053,7 +1054,8 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
return r;
}
})
.on('mouseover', function(d, index) {
.on('mouseover', function(event, d) {
const index = d.index;
const element = $('#link' + index)[0];
const availbandwidth = d.available_bandwidth;
let classes = '';
Expand All @@ -1070,8 +1072,8 @@ export class TopologyComponent implements OnInit, AfterViewInit, OnDestroy {
}
element.setAttribute('class', classes);
})
.on('mouseout', function(d, index) {
const element = $('#link' + index)[0];
.on('mouseout', function(event, d) {
const element = $('#link' + d.index)[0];
const availbandwidth = d.available_bandwidth;
let classes = '';
const max_bandwidth = d.max_bandwidth;
Expand Down

0 comments on commit 496afa7

Please sign in to comment.