From 31d0d48da857991a1151dfc6f32af0e480aa6e26 Mon Sep 17 00:00:00 2001 From: "Guppy L. Stott" Date: Wed, 17 Jun 2026 10:40:20 -0400 Subject: [PATCH] Fix global setting positioning bug and add cypress tests for behavior --- .../global-settings-dialog-positioning.cy.ts | 99 +++++++++++ .../globalSettingsDialogRequest.ts | 51 ++++++ .../microbe-trace-next-plugin.component.html | 3 + .../microbe-trace-next-plugin.component.ts | 166 +++++++++++++++++- .../BubbleComponent/bubble.component.html | 2 +- .../BubbleComponent/bubble.component.ts | 7 +- .../MapComponent/map-plugin.component.html | 4 +- .../MapComponent/map-plugin.component.ts | 7 +- .../phylogenetic-plugin.component.html | 2 +- .../phylogenetic-plugin.component.ts | 7 +- .../TwoDComponent/twoD-plugin.component.html | 6 +- .../TwoDComponent/twoD-plugin.component.ts | 7 +- 12 files changed, 340 insertions(+), 21 deletions(-) create mode 100644 cypress/e2e/journeys/flows/global-settings-dialog-positioning.cy.ts create mode 100644 src/app/helperClasses/globalSettingsDialogRequest.ts diff --git a/cypress/e2e/journeys/flows/global-settings-dialog-positioning.cy.ts b/cypress/e2e/journeys/flows/global-settings-dialog-positioning.cy.ts new file mode 100644 index 00000000..15601aa7 --- /dev/null +++ b/cypress/e2e/journeys/flows/global-settings-dialog-positioning.cy.ts @@ -0,0 +1,99 @@ +/// + +import { getProfile } from '../datasets/profile'; +import { + expandAccordionTabByHeader, + launchProfileToTwoD, + openTwoDSettingsDialog, +} from '../../../support/journey-helpers'; + +function getOverlapArea(first: DOMRect, second: DOMRect): number { + const overlapWidth = Math.max(0, Math.min(first.right, second.right) - Math.max(first.left, second.left)); + const overlapHeight = Math.max(0, Math.min(first.bottom, second.bottom) - Math.max(first.top, second.top)); + + return overlapWidth * overlapHeight; +} + +function getEffectiveZIndex(element: HTMLElement): number { + let current: HTMLElement | null = element; + + while (current) { + const zIndex = current.ownerDocument.defaultView?.getComputedStyle(current).zIndex; + const numericZIndex = zIndex && zIndex !== 'auto' ? Number(zIndex) : NaN; + + if (Number.isFinite(numericZIndex)) { + return numericZIndex; + } + + current = current.parentElement; + } + + return 0; +} + +function expectRectInsideViewport(rect: DOMRect, win: Window, label: string): void { + expect(rect.left, `${label} left`).to.be.at.least(0); + expect(rect.top, `${label} top`).to.be.at.least(0); + expect(rect.right, `${label} right`).to.be.at.most(win.innerWidth); + expect(rect.bottom, `${label} bottom`).to.be.at.most(win.innerHeight); +} + +describe('Journey Flow - Global Settings dialog positioning', () => { + const profile = getProfile('color-by-uploaded-categorical'); + + it('opens linked Global Settings above and beside the 2D Network Settings dialog', () => { + cy.viewport(1800, 900); + + launchProfileToTwoD(profile); + openTwoDSettingsDialog(); + + cy.get('@twoDSettings').contains('.nav-link', 'Nodes').click({ force: true }); + cy.get('@twoDSettings') + .find('.tab-pane:visible', { timeout: 15000 }) + .should('exist') + .as('nodesTab'); + + expandAccordionTabByHeader('@nodesTab', 'Colors'); + cy.get('@nodesTab').contains('button', 'Show Colors').scrollIntoView().click({ force: true }); + + cy.contains('.p-dialog-title', 'Global Settings', { timeout: 15000 }) + .should('be.visible') + .parents('.p-dialog') + .should('be.visible') + .as('globalSettings'); + + cy.get('@twoDSettings').should('be.visible'); + cy.get('@globalSettings').should('be.visible'); + + cy.get('@twoDSettings').then(($sourceDialog) => { + cy.get('@globalSettings').then(($globalSettingsDialog) => { + const sourceDialog = $sourceDialog[0] as HTMLElement; + const globalSettingsDialog = $globalSettingsDialog[0] as HTMLElement; + const win = globalSettingsDialog.ownerDocument.defaultView; + + expect(win, 'dialog window').to.exist; + + const sourceRect = sourceDialog.getBoundingClientRect(); + const globalRect = globalSettingsDialog.getBoundingClientRect(); + + expectRectInsideViewport(sourceRect, win!, '2D Network Settings'); + expectRectInsideViewport(globalRect, win!, 'Global Settings'); + + expect(getEffectiveZIndex(globalSettingsDialog), 'Global Settings z-index') + .to.be.greaterThan(getEffectiveZIndex(sourceDialog)); + + const centerX = Math.min(Math.max(globalRect.left + globalRect.width / 2, 1), win!.innerWidth - 1); + const centerY = Math.min(Math.max(globalRect.top + globalRect.height / 2, 1), win!.innerHeight - 1); + const topmostElement = globalSettingsDialog.ownerDocument.elementFromPoint(centerX, centerY); + + expect( + topmostElement === globalSettingsDialog || globalSettingsDialog.contains(topmostElement), + 'Global Settings is topmost at its center point', + ).to.equal(true); + + expect(getOverlapArea(sourceRect, globalRect), 'dialog overlap area on a wide viewport') + .to.be.lessThan(1); + }); + }); + }); +}); diff --git a/src/app/helperClasses/globalSettingsDialogRequest.ts b/src/app/helperClasses/globalSettingsDialogRequest.ts new file mode 100644 index 00000000..cbbc3e74 --- /dev/null +++ b/src/app/helperClasses/globalSettingsDialogRequest.ts @@ -0,0 +1,51 @@ +export type DialogRectSnapshot = { + top: number; + left: number; + right: number; + bottom: number; + width: number; + height: number; +}; + +export type GlobalSettingsDialogRequest = string | { + activeTab?: string; + sourceDialogRect?: DialogRectSnapshot; +}; + +export type NormalizedGlobalSettingsDialogRequest = { + activeTab: string; + sourceDialogRect?: DialogRectSnapshot; +}; + +export function createGlobalSettingsDialogRequest( + activeTab: string = 'Styling', + event?: MouseEvent +): Exclude { + return { + activeTab, + sourceDialogRect: getSourceDialogRect(event) + }; +} + +function getSourceDialogRect(event?: MouseEvent): DialogRectSnapshot | undefined { + const eventTarget = event?.currentTarget instanceof HTMLElement + ? event.currentTarget + : event?.target instanceof HTMLElement + ? event.target + : undefined; + + const sourceDialog = eventTarget?.closest('.p-dialog'); + if (!sourceDialog) { + return undefined; + } + + const rect = sourceDialog.getBoundingClientRect(); + return { + top: rect.top, + left: rect.left, + right: rect.right, + bottom: rect.bottom, + width: rect.width, + height: rect.height + }; +} diff --git a/src/app/microbe-trace-next-plugin.component.html b/src/app/microbe-trace-next-plugin.component.html index 7a0cec15..0f277ca5 100644 --- a/src/app/microbe-trace-next-plugin.component.html +++ b/src/app/microbe-trace-next-plugin.component.html @@ -314,6 +314,9 @@
diff --git a/src/app/microbe-trace-next-plugin.component.ts b/src/app/microbe-trace-next-plugin.component.ts index 85100f6e..b0ff2b6f 100644 --- a/src/app/microbe-trace-next-plugin.component.ts +++ b/src/app/microbe-trace-next-plugin.component.ts @@ -31,6 +31,11 @@ import { NodeShapeOption, resolveNodeShapeKey } from '@app/contactTraceCommonServices/node-shapes'; +import { + DialogRectSnapshot, + GlobalSettingsDialogRequest, + NormalizedGlobalSettingsDialogRequest +} from './helperClasses/globalSettingsDialogRequest'; type ThresholdSweepSnapshot = { threshold: number; @@ -62,6 +67,12 @@ type DashboardOpenEntry = { type KeyTableDisplayMode = 'Show' | 'Dock' | 'Hide'; +type DialogPlacementCandidate = { + top: number; + left: number; + overlapArea: number; +}; + interface NodeShapeOptionGroup { key: NodeShapeGroupKey; label: string; @@ -153,7 +164,11 @@ export class MicrobeTraceNextHomeComponent extends AppComponentBase implements A ExportDashboardScale: number = 1; ExportDashboardResolution: { width: number, height:number, summary:string} = {width: 0, height: 0, summary: ''}; public readonly keyTablesController = new KeyTablesController(); + public readonly GlobalSettingsDialogBaseZIndex = 5000; + public GlobalSettingsDialogStyle: Record = { 'z-index': String(this.GlobalSettingsDialogBaseZIndex) }; private preserveNextKeyTablesRemoval: boolean = false; + private readonly linkedSettingsDialogGap = 16; + private readonly linkedSettingsDialogViewportMargin = 8; private thresholdDebouncer: Subject = new Subject(); @@ -4603,7 +4618,9 @@ export class MicrobeTraceNextHomeComponent extends AppComponentBase implements A } - DisplayGlobalSettingsDialog(activeTab = "Styling") { + DisplayGlobalSettingsDialog(request: GlobalSettingsDialogRequest = "Styling") { + const dialogRequest = this.normalizeGlobalSettingsDialogRequest(request); + this.GlobalSettingsDialogStyle = this.getGlobalSettingsDialogBaseStyle(); this.getGlobalSettingsData(); // TODO: May need to refacor this @@ -4619,7 +4636,152 @@ export class MicrobeTraceNextHomeComponent extends AppComponentBase implements A this.commonService.updateThresholdHistogram(this.linkThresholdSparkline.nativeElement); this.refreshThresholdStabilityPanel(false); - this.globalSettingsTab.tabs[activeTab === "Styling" ? 1 : 0].active = true; + this.globalSettingsTab.tabs[dialogRequest.activeTab === "Styling" ? 1 : 0].active = true; + + if (dialogRequest.sourceDialogRect) { + this.scheduleGlobalSettingsDialogPlacement(dialogRequest.sourceDialogRect); + } + } + + private normalizeGlobalSettingsDialogRequest(request: GlobalSettingsDialogRequest): NormalizedGlobalSettingsDialogRequest { + if (typeof request === 'string') { + return { activeTab: request }; + } + + return { + activeTab: request?.activeTab ?? 'Styling', + sourceDialogRect: request?.sourceDialogRect + }; + } + + private getGlobalSettingsDialogBaseStyle(): Record { + return { 'z-index': String(this.GlobalSettingsDialogBaseZIndex) }; + } + + private getGlobalSettingsDialogPlacementStyle(top: number, left: number): Record { + const margin = this.linkedSettingsDialogViewportMargin; + return { + ...this.getGlobalSettingsDialogBaseStyle(), + position: 'fixed', + top: `${Math.round(top)}px`, + left: `${Math.round(left)}px`, + margin: '0', + transform: 'none', + overflow: 'auto', + 'max-height': `calc(100vh - ${margin * 2}px)`, + 'max-width': `calc(100vw - ${margin * 2}px)` + }; + } + + private scheduleGlobalSettingsDialogPlacement(sourceDialogRect: DialogRectSnapshot): void { + const runNextFrame = window.requestAnimationFrame?.bind(window) ?? ((callback: FrameRequestCallback) => window.setTimeout(() => callback(Date.now()), 0)); + + setTimeout(() => { + runNextFrame(() => { + runNextFrame(() => this.positionGlobalSettingsDialogNearSource(sourceDialogRect)); + }); + }, 0); + } + + private positionGlobalSettingsDialogNearSource(sourceDialogRect: DialogRectSnapshot): void { + const dialog = this.getVisibleDialogByTitle('Global Settings'); + if (!dialog) { + return; + } + + const dialogRect = dialog.getBoundingClientRect(); + const dialogWidth = dialog.offsetWidth || dialogRect.width; + const dialogHeight = dialog.offsetHeight || dialogRect.height; + const placement = this.findBestGlobalSettingsDialogPlacement(sourceDialogRect, dialogWidth, dialogHeight); + const style = this.getGlobalSettingsDialogPlacementStyle(placement.top, placement.left); + + this.GlobalSettingsDialogStyle = style; + this.applyDialogStyle(dialog, style); + this.cdref.detectChanges(); + } + + private getVisibleDialogByTitle(title: string): HTMLElement | undefined { + return Array + .from(document.querySelectorAll('.p-dialog')) + .find(dialog => { + const titleElement = dialog.querySelector('.p-dialog-title'); + const computedStyle = window.getComputedStyle(dialog); + return titleElement?.textContent?.trim() === title + && computedStyle.display !== 'none' + && computedStyle.visibility !== 'hidden'; + }); + } + + private findBestGlobalSettingsDialogPlacement( + sourceRect: DialogRectSnapshot, + dialogWidth: number, + dialogHeight: number + ): DialogPlacementCandidate { + const gap = this.linkedSettingsDialogGap; + const margin = this.linkedSettingsDialogViewportMargin; + const viewportWidth = window.innerWidth || document.documentElement.clientWidth; + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + const placementWidth = Math.min(dialogWidth, Math.max(0, viewportWidth - margin * 2)); + const placementHeight = Math.min(dialogHeight, Math.max(0, viewportHeight - margin * 2)); + const rawCandidates = [ + { left: sourceRect.right + gap, top: sourceRect.top }, + { left: sourceRect.left - placementWidth - gap, top: sourceRect.top }, + { left: sourceRect.left, top: sourceRect.bottom + gap }, + { left: sourceRect.left, top: sourceRect.top - placementHeight - gap } + ]; + + const candidates = rawCandidates.map(candidate => { + const placement = this.clampDialogPlacement(candidate.left, candidate.top, placementWidth, placementHeight); + return { + ...placement, + overlapArea: this.getDialogOverlapArea( + { + ...placement, + right: placement.left + placementWidth, + bottom: placement.top + placementHeight, + width: placementWidth, + height: placementHeight + }, + sourceRect + ) + }; + }); + + return candidates.find(candidate => candidate.overlapArea === 0) + ?? candidates.reduce((best, candidate) => candidate.overlapArea < best.overlapArea ? candidate : best); + } + + private clampDialogPlacement( + left: number, + top: number, + dialogWidth: number, + dialogHeight: number + ): { top: number; left: number } { + const margin = this.linkedSettingsDialogViewportMargin; + const viewportWidth = window.innerWidth || document.documentElement.clientWidth; + const viewportHeight = window.innerHeight || document.documentElement.clientHeight; + const maxLeft = Math.max(margin, viewportWidth - dialogWidth - margin); + const maxTop = Math.max(margin, viewportHeight - dialogHeight - margin); + + return { + left: this.clamp(left, margin, maxLeft), + top: this.clamp(top, margin, maxTop) + }; + } + + private getDialogOverlapArea(first: DialogRectSnapshot, second: DialogRectSnapshot): number { + const width = Math.max(0, Math.min(first.right, second.right) - Math.max(first.left, second.left)); + const height = Math.max(0, Math.min(first.bottom, second.bottom) - Math.max(first.top, second.top)); + + return width * height; + } + + private clamp(value: number, minimum: number, maximum: number): number { + return Math.min(Math.max(value, minimum), maximum); + } + + private applyDialogStyle(dialog: HTMLElement, style: Record): void { + Object.entries(style).forEach(([property, value]) => dialog.style.setProperty(property, value)); } toggleThresholdStabilityPanel(): void { diff --git a/src/app/visualizationComponents/BubbleComponent/bubble.component.html b/src/app/visualizationComponents/BubbleComponent/bubble.component.html index 25fa7056..054db7b2 100644 --- a/src/app/visualizationComponents/BubbleComponent/bubble.component.html +++ b/src/app/visualizationComponents/BubbleComponent/bubble.component.html @@ -58,7 +58,7 @@
- +
diff --git a/src/app/visualizationComponents/BubbleComponent/bubble.component.ts b/src/app/visualizationComponents/BubbleComponent/bubble.component.ts index b835fda8..15f815a8 100644 --- a/src/app/visualizationComponents/BubbleComponent/bubble.component.ts +++ b/src/app/visualizationComponents/BubbleComponent/bubble.component.ts @@ -13,6 +13,7 @@ import svg from 'cytoscape-svg'; import { ExportService, ExportOptions } from '@app/contactTraceCommonServices/export.service'; import { Subject, Subscription, takeUntil } from 'rxjs'; import { CommonStoreService } from '@app/contactTraceCommonServices/common-store.services'; +import { createGlobalSettingsDialogRequest, GlobalSettingsDialogRequest } from '@app/helperClasses/globalSettingsDialogRequest'; type DataRecord = { index: number, id: string, x: number; y: number, color: string, opacity: number, Xgroup: number, Ygroup: number, strokeColor: string, totalCount?: number, counts ?: any }//selected: boolean } @@ -43,7 +44,7 @@ interface BubblePieSvgExportReplacement { }) export class BubbleComponent extends BaseComponentDirective implements OnInit, MicobeTraceNextPluginEvents, OnDestroy { - @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); + @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); @ViewChild('cyBubble', { static: false }) cyContainer: ElementRef; @ViewChild('bubbleTooltip') toolTip: ElementRef; @@ -1194,8 +1195,8 @@ export class BubbleComponent extends BaseComponentDirective implements OnInit, M /** * Opens Global Setting Dialog */ - showGlobalSettings() { - this.DisplayGlobalSettingsDialogEvent.emit("Styling"); + showGlobalSettings(event?: MouseEvent) { + this.DisplayGlobalSettingsDialogEvent.emit(createGlobalSettingsDialogRequest('Styling', event)); } updateNodeColors() { diff --git a/src/app/visualizationComponents/MapComponent/map-plugin.component.html b/src/app/visualizationComponents/MapComponent/map-plugin.component.html index 948475f9..a3f6bb03 100644 --- a/src/app/visualizationComponents/MapComponent/map-plugin.component.html +++ b/src/app/visualizationComponents/MapComponent/map-plugin.component.html @@ -276,7 +276,7 @@

Please add data files to load...

Color
+ (click)="displayColorOptions($event)">Color Options
Collapsing
@@ -326,7 +326,7 @@

Please add data files to load...

Color
+ (click)="displayColorOptions($event)">Color Options
diff --git a/src/app/visualizationComponents/MapComponent/map-plugin.component.ts b/src/app/visualizationComponents/MapComponent/map-plugin.component.ts index b1b8e89c..bf33baf4 100644 --- a/src/app/visualizationComponents/MapComponent/map-plugin.component.ts +++ b/src/app/visualizationComponents/MapComponent/map-plugin.component.ts @@ -25,6 +25,7 @@ import { GoogleTagManagerService } from 'angular-google-tag-manager'; import { CommonStoreService } from '@app/contactTraceCommonServices/common-store.services'; import { ExportService, ExportOptions } from '@app/contactTraceCommonServices/export.service'; import { getMapNodeShapeDataUri, isCustomNodeShape as isCustomNodeIconShape, resolveNodeShapeForNode, resolveNodeShapeKey } from '@app/contactTraceCommonServices/node-shapes'; +import { createGlobalSettingsDialogRequest, GlobalSettingsDialogRequest } from '@app/helperClasses/globalSettingsDialogRequest'; declare var google: any; @@ -73,7 +74,7 @@ const ESRI_WORLD_IMAGERY_ATTRIBUTION = 'Tiles © Esri - Source: Esri, Maxar, export class MapComponent extends BaseComponentDirective implements OnInit, MicobeTraceNextPluginEvents, OnDestroy { - @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); + @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); @ViewChild('mapContainer') exportContainer: ElementRef; viewActive: boolean = true; @@ -1263,8 +1264,8 @@ export class MapComponent extends BaseComponentDirective implements OnInit, Mico new Promise(resolve => setTimeout(resolve, 2000)).then(() => this.lmap.addControl(this.lmap.zoomControl)) } - displayColorOptions() { - this.DisplayGlobalSettingsDialogEvent.emit("Styling"); + displayColorOptions(event?: MouseEvent) { + this.DisplayGlobalSettingsDialogEvent.emit(createGlobalSettingsDialogRequest('Styling', event)); } codeAddress(addressList: any[]) { diff --git a/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.html b/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.html index a0a99fc0..29fb67fd 100644 --- a/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.html +++ b/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.html @@ -181,7 +181,7 @@ Colors - + diff --git a/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.ts b/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.ts index e79eabd6..0448f406 100644 --- a/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.ts +++ b/src/app/visualizationComponents/PhylogeneticComponent/phylogenetic-plugin.component.ts @@ -24,6 +24,7 @@ import { throws } from 'assert'; import { Subject, takeUntil } from 'rxjs'; import { CommonStoreService } from '@app/contactTraceCommonServices/common-store.services'; import { getTreeNodeShapeDataUri, getTreeNodeShapeScale, isCustomNodeShape as isCustomNodeIconShape, resolveNodeShapeForNode } from '@app/contactTraceCommonServices/node-shapes'; +import { createGlobalSettingsDialogRequest, GlobalSettingsDialogRequest } from '@app/helperClasses/globalSettingsDialogRequest'; /** * @title PhylogeneticComponent @@ -36,7 +37,7 @@ import { getTreeNodeShapeDataUri, getTreeNodeShapeScale, isCustomNodeShape as is }) export class PhylogeneticComponent extends BaseComponentDirective implements OnInit, OnDestroy, MicobeTraceNextPluginEvents { - @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); + @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); viewActive: boolean = true; svgStyle: object = { height: '0px', @@ -810,8 +811,8 @@ export class PhylogeneticComponent extends BaseComponentDirective implements OnI this.settings['tree-leaf-label-show'] = this.SelectedLeafLabelShowVariable } - showGlobalSettings() { - this.DisplayGlobalSettingsDialogEvent.emit('Styling'); + showGlobalSettings(event?: MouseEvent) { + this.DisplayGlobalSettingsDialogEvent.emit(createGlobalSettingsDialogRequest('Styling', event)); } private ensureGlobalNodeShapeTableVisible(): void { diff --git a/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.html b/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.html index a8df0d7b..182437e1 100644 --- a/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.html +++ b/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.html @@ -129,7 +129,7 @@

Please add data files to load...

id="open-global-shape-settings" label="Show Shapes" class="ui-button-raised width-percent-100" - (click)="showGlobalSettings()" + (click)="showGlobalSettings($event)" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}">
@@ -169,7 +169,7 @@

Please add data files to load...

Colors - + @@ -262,7 +262,7 @@

Please add data files to load...

Colors - + diff --git a/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts b/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts index 0bb1783e..c879ee47 100644 --- a/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts +++ b/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts @@ -23,6 +23,7 @@ import * as d3f from 'd3-force'; import { CommonStoreService } from '@app/contactTraceCommonServices/common-store.services'; import { ExportService, ExportOptions } from '@app/contactTraceCommonServices/export.service'; import { NgZone } from '@angular/core'; +import { createGlobalSettingsDialogRequest, GlobalSettingsDialogRequest } from '@app/helperClasses/globalSettingsDialogRequest'; interface CustomNodeSvgExportReplacement { exportHeight: number; @@ -48,7 +49,7 @@ type PolygonColorTableDisplayMode = 'Show' | 'Dock' | 'Hide'; standalone: false }) export class TwoDComponent extends BaseComponentDirective implements OnInit, MicobeTraceNextPluginEvents, OnDestroy { - @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); + @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter(); // Reference to the Cytoscape container @ViewChild('cy', { static: false }) cyContainer: ElementRef; @@ -1600,9 +1601,9 @@ export class TwoDComponent extends BaseComponentDirective implements OnInit, Mic /** * Opens Global Setting Dialog */ - showGlobalSettings() { + showGlobalSettings(event?: MouseEvent) { //console.log("threshold: ", this.commonService.GlobalSettingsModel.SelectedLinkThresholdVariable); - this.DisplayGlobalSettingsDialogEvent.emit("Styling"); + this.DisplayGlobalSettingsDialogEvent.emit(createGlobalSettingsDialogRequest('Styling', event)); }