From 496afa73e33fa78a80b2680d3f600a86402da352 Mon Sep 17 00:00:00 2001 From: ichupin Date: Fri, 24 Nov 2023 17:30:36 +0100 Subject: [PATCH] d3 mouseover/mouseout fixes --- src-gui/ui/package.json | 2 +- .../app/common/services/flowpath.service.ts | 19 ++++++++++--------- .../common/services/topology-graph.service.ts | 11 ++++++----- .../connected-devices.component.ts | 6 +++--- .../flow-detail/flow-detail.component.ts | 12 +++++++----- .../modules/topology/topology.component.ts | 18 ++++++++++-------- 6 files changed, 37 insertions(+), 31 deletions(-) diff --git a/src-gui/ui/package.json b/src-gui/ui/package.json index 85b6fb521d4..a310d203e56 100644 --- a/src-gui/ui/package.json +++ b/src-gui/ui/package.json @@ -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" diff --git a/src-gui/ui/src/app/common/services/flowpath.service.ts b/src-gui/ui/src/app/common/services/flowpath.service.ts index 9fc786e8e67..28bded16875 100644 --- a/src-gui/ui/src/app/common/services/flowpath.service.ts +++ b/src-gui/ui/src/app/common/services/flowpath.service.ts @@ -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'); @@ -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') { @@ -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(); @@ -433,7 +434,7 @@ export class FlowpathService { } - }).on('mouseout', function(d, index) { + }).on('mouseout', function(event, d) { $('#' + hoverTextID).css('display', 'none'); }); @@ -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(); @@ -497,7 +498,7 @@ export class FlowpathService { } - }).on('mouseout', function(d, index) { + }).on('mouseout', function(event, d) { $('#' + hoverTextID).css('display', 'none'); }); @@ -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(); @@ -602,7 +603,7 @@ export class FlowpathService { } - }).on('mouseout', function(d, index) { + }).on('mouseout', function(event, d) { $('#' + hoverTextID).css('display', 'none'); }); diff --git a/src-gui/ui/src/app/common/services/topology-graph.service.ts b/src-gui/ui/src/app/common/services/topology-graph.service.ts index 97782f89a9d..0f54a329a3b 100644 --- a/src-gui/ui/src/app/common/services/topology-graph.service.ts +++ b/src-gui/ui/src/app/common/services/topology-graph.service.ts @@ -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); @@ -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 { @@ -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; @@ -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); diff --git a/src-gui/ui/src/app/modules/flows/connected-devices/connected-devices.component.ts b/src-gui/ui/src/app/modules/flows/connected-devices/connected-devices.component.ts index 82a5bfcc874..ca071dfc992 100644 --- a/src-gui/ui/src/app/modules/flows/connected-devices/connected-devices.component.ts +++ b/src-gui/ui/src/app/modules/flows/connected-devices/connected-devices.component.ts @@ -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'); @@ -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'); }); diff --git a/src-gui/ui/src/app/modules/flows/flow-detail/flow-detail.component.ts b/src-gui/ui/src/app/modules/flows/flow-detail/flow-detail.component.ts index 9203438f94e..35cae0ae4d6 100644 --- a/src-gui/ui/src/app/modules/flows/flow-detail/flow-detail.component.ts +++ b/src-gui/ui/src/app/modules/flows/flow-detail/flow-detail.component.ts @@ -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'; @@ -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'); @@ -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'); @@ -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'); }); diff --git a/src-gui/ui/src/app/modules/topology/topology.component.ts b/src-gui/ui/src/app/modules/topology/topology.component.ts index add142b78b3..3f370888888 100644 --- a/src-gui/ui/src/app/modules/topology/topology.component.ts +++ b/src-gui/ui/src/app/modules/topology/topology.component.ts @@ -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); @@ -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 { @@ -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; @@ -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); @@ -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 = ''; @@ -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;