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 @@
+/// <reference types="cypress" />
+
+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<GlobalSettingsDialogRequest, string> {
+    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 @@
 
   <p-dialog id="global-settings-modal" data-testid="app-global-settings-dialog"
     [(visible)]="GlobalSettingsDialogSettings.isVisible"
+    [baseZIndex]="GlobalSettingsDialogBaseZIndex"
+    [style]="GlobalSettingsDialogStyle"
+    [keepInViewport]="true"
     header="Global Settings" >
     <div class="modal-dialog" role="document">
       <div class="modal-content">
diff --git a/src/app/microbe-trace-next-plugin.component.ts b/src/app/microbe-trace-next-plugin.component.ts
index fb5360d7..f99b5040 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<string, string> = { 'z-index': String(this.GlobalSettingsDialogBaseZIndex) };
     private preserveNextKeyTablesRemoval: boolean = false;
+    private readonly linkedSettingsDialogGap = 16;
+    private readonly linkedSettingsDialogViewportMargin = 8;
 
     private thresholdDebouncer: Subject<number> = new Subject<number>();
 
@@ -4605,7 +4620,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
@@ -4621,7 +4638,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<string, string> {
+        return { 'z-index': String(this.GlobalSettingsDialogBaseZIndex) };
+    }
+
+    private getGlobalSettingsDialogPlacementStyle(top: number, left: number): Record<string, string> {
+        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<HTMLElement>('.p-dialog'))
+            .find(dialog => {
+                const titleElement = dialog.querySelector<HTMLElement>('.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<string, string>): 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 @@
       <div class="form-group row" title="">
         <div class="col-3" style="padding-right: 0px;"><label>Node Color</label></div>
         <div class="col-7">
-          <button id="bubble-open-global-styling" pButton type="button" label="Show Colors" class="ui-button-raised width-percent-100" (click)="showGlobalSettings()" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
+          <button id="bubble-open-global-styling" pButton type="button" label="Show Colors" class="ui-button-raised width-percent-100" (click)="showGlobalSettings($event)" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
         </div>
       </div>
     </p-dialog>
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<GlobalSettingsDialogRequest>();
 
   @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 @@ <h1><b>Please add data files to load...</b></h1>
   <div class="form-group row">
     <div class="col-4">Color</div>
     <div class="col-8"><button class="btn btn-sm map-btn w-100"
-    (click)="displayColorOptions()">Color Options</button></div>
+    (click)="displayColorOptions($event)">Color Options</button></div>
   </div>
   <div class="form-group row">
     <div class="col-4">Collapsing</div>
@@ -326,7 +326,7 @@ <h1><b>Please add data files to load...</b></h1>
   <div class="form-group row">
     <div class="col-4">Color</div>
     <div class="col-8"><button class="btn btn-sm map-btn w-100" 
-    (click)="displayColorOptions()">Color Options</button></div>
+    (click)="displayColorOptions($event)">Color Options</button></div>
   </div>
   <div class="form-group row" title="How transparent would you like links to be?">
     <div class="col-4"><label for="map-link-transparency">Transparency</label></div>
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 &copy; Esri - Source: Esri, Maxar,
 
 export class MapComponent extends BaseComponentDirective implements OnInit, MicobeTraceNextPluginEvents, OnDestroy {
 
-    @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter();
+    @Output() DisplayGlobalSettingsDialogEvent = new EventEmitter<GlobalSettingsDialogRequest>();
     @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 @@
 </p-accordion-panel>
 <p-accordion-panel value="tree-leafcolors" style="color:#495057">
   <p-accordion-header>Colors</p-accordion-header>
-  <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings()" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
+  <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings($event)" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
 </p-accordion-content>
 </p-accordion-panel>
 </p-accordion>
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<GlobalSettingsDialogRequest>();
   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 @@ <h1><b>Please add data files to load...</b></h1>
                             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'}">
                           </button>
                         </div>
@@ -169,7 +169,7 @@ <h1><b>Please add data files to load...</b></h1>
                 </p-accordion-panel>
                 <p-accordion-panel value="node-colors" style="color:#495057">
                   <p-accordion-header>Colors</p-accordion-header>
-                  <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings()" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
+                  <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings($event)" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
                 </p-accordion-content>
               </p-accordion-panel>
             </p-accordion>
@@ -262,7 +262,7 @@ <h1><b>Please add data files to load...</b></h1>
         </p-accordion-panel>
         <p-accordion-panel value="link-colors" style="color:#495057">
           <p-accordion-header>Colors</p-accordion-header>
-          <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings()" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
+          <p-accordion-content><button pButton type="button" label="Show Colors" class="ui-button-raised" (click)="showGlobalSettings($event)" [style]="{'background-color': '#2196f3', 'border': '1px solid #2196f3'}"></button>
         </p-accordion-content>
       </p-accordion-panel>
     </p-accordion>
diff --git a/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts b/src/app/visualizationComponents/TwoDComponent/twoD-plugin.component.ts
index 1a034257..d7e036e3 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<GlobalSettingsDialogRequest>();
 
     // 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));
     }