From a762acd955d9a23892b54c102f38286803220322 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Wed, 14 Aug 2024 15:54:23 +0200
Subject: [PATCH 1/2] [DSC-1874] Improve related-items popover open/close
 behaviour

---
 .../metadata-link-view.component.html         |   9 +-
 .../sticky-popover.directive.ts               | 122 ++++++++++++++++++
 src/app/shared/shared.module.ts               |   2 +
 3 files changed, 128 insertions(+), 5 deletions(-)
 create mode 100644 src/app/shared/metadata-link-view/sticky-popover.directive.ts

diff --git a/src/app/shared/metadata-link-view/metadata-link-view.component.html b/src/app/shared/metadata-link-view/metadata-link-view.component.html
index d7fb1150e7b..5bf25253071 100644
--- a/src/app/shared/metadata-link-view/metadata-link-view.component.html
+++ b/src/app/shared/metadata-link-view/metadata-link-view.component.html
@@ -3,13 +3,12 @@
                   [ngTemplateOutletContext]="{metadataView: metadataView}"></ng-container>
 </div>
 <ng-template class="d-flex" #linkToAuthority let-metadataView="metadataView">
-  <span [ngbPopover]="popContent"
-        [closeDelay]="500"
-        [openDelay]="1000"
+  <span [dsStickyPopover]="popContent"
+        [openDelay]="100"
         [animation]="true"
-        [autoClose]="'outside'"
+        [autoClose]="true"
         container="body"
-        triggers="mouseenter:mouseleave">
+        triggers="mouseenter">
     <a rel="noopener noreferrer" data-test="linkToAuthority"
       [routerLink]="['/items/' + metadataView.authority]">
       <span dsEntityIcon
diff --git a/src/app/shared/metadata-link-view/sticky-popover.directive.ts b/src/app/shared/metadata-link-view/sticky-popover.directive.ts
new file mode 100644
index 00000000000..f81d8a9e281
--- /dev/null
+++ b/src/app/shared/metadata-link-view/sticky-popover.directive.ts
@@ -0,0 +1,122 @@
+import {
+  ElementRef,
+  Directive,
+  Input,
+  TemplateRef,
+  Renderer2,
+  OnInit,
+  OnDestroy,
+  Injector,
+  ViewContainerRef,
+  NgZone,
+  ChangeDetectorRef,
+  ApplicationRef, Inject
+} from '@angular/core';
+import {NgbPopover, NgbPopoverConfig} from '@ng-bootstrap/ng-bootstrap';
+import {DOCUMENT} from '@angular/common';
+import {NavigationStart, Router} from '@angular/router';
+import {Subscription} from 'rxjs';
+
+/**
+ * Directive to create a sticky popover using NgbPopover.
+ * The popover remains open when the mouse is over its content and closes when the mouse leaves.
+ */
+@Directive({
+  selector: '[dsStickyPopover]'
+})
+export class StickyPopoverDirective extends NgbPopover implements OnInit, OnDestroy {
+  /** Template for the sticky popover content */
+  @Input() dsStickyPopover: TemplateRef<any>;
+
+  /** Subscriptions to manage router events */
+  subs: Subscription[] = [];
+
+  /** Flag to determine if the popover can be closed */
+  private canClosePopover: boolean;
+
+  /** Reference to the element the directive is applied to */
+  private readonly _elRef;
+
+  /** Renderer to listen to and manipulate DOM elements */
+  private readonly _render;
+
+  constructor(
+    _elementRef: ElementRef<HTMLElement>,
+    _renderer: Renderer2, injector: Injector,
+    viewContainerRef: ViewContainerRef,
+    config: NgbPopoverConfig,
+    _ngZone: NgZone,
+    @Inject(DOCUMENT) _document: Document,
+    _changeDetector: ChangeDetectorRef,
+    applicationRef: ApplicationRef,
+    private router: Router
+  ) {
+    super(_elementRef, _renderer, injector, viewContainerRef, config, _ngZone, document, _changeDetector, applicationRef);
+    this._elRef = _elementRef;
+    this._render = _renderer;
+    this.triggers = 'manual';
+    this.popoverTitle = 'Permissions';
+    this.container = 'body';
+  }
+
+  /**
+   * Sets up event listeners for mouse enter, mouse leave, and click events.
+   */
+  ngOnInit(): void {
+    super.ngOnInit();
+    this.ngbPopover = this.dsStickyPopover;
+
+    this._render.listen(this._elRef.nativeElement, 'mouseenter', () => {
+      this.canClosePopover = true;
+      this.open();
+    });
+
+    this._render.listen(this._elRef.nativeElement, 'mouseleave', () => {
+      setTimeout(() => {
+        if (this.canClosePopover) {
+          this.close();
+        }
+      }, 100);
+    });
+
+    this._render.listen(this._elRef.nativeElement, 'click', () => {
+      this.close();
+    });
+
+    this.subs.push(
+      this.router.events.subscribe((event) => {
+        if (event instanceof NavigationStart) {
+          this.close();
+        }
+      })
+    );
+  }
+
+  /**
+   * Opens the popover and sets up event listeners for mouse over and mouse out events on the popover.
+   */
+  open() {
+    super.open();
+    const popover = window.document.querySelector('.popover');
+    this._render.listen(popover, 'mouseover', () => {
+      this.canClosePopover = false;
+    });
+
+    this._render.listen(popover, 'mouseout', () => {
+      this.canClosePopover = true;
+      setTimeout(() => {
+        if (this.canClosePopover) {
+          this.close();
+        }
+      }, 0);
+    });
+  }
+
+  /**
+   * Unsubscribes from all subscriptions when the directive is destroyed.
+   */
+  ngOnDestroy() {
+    super.ngOnDestroy();
+    this.subs.forEach((sub) => sub.unsubscribe());
+  }
+}
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 318d4a3ae0c..181feb8d8fa 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -357,6 +357,7 @@ import { ThemedDefaultBrowseElementsComponent } from './browse-most-elements/def
 import { MetadataLinkViewPopoverComponent } from './metadata-link-view/metadata-link-view-popover/metadata-link-view-popover.component';
 import { MetadataLinkViewAvatarPopoverComponent } from './metadata-link-view/metadata-link-view-avatar-popover/metadata-link-view-avatar-popover.component';
 import { MetadataLinkViewOrcidComponent } from './metadata-link-view/metadata-link-view-orcid/metadata-link-view-orcid.component';
+import {StickyPopoverDirective} from './metadata-link-view/sticky-popover.directive';
 
 const MODULES = [
   CommonModule,
@@ -623,6 +624,7 @@ const DIRECTIVES = [
   ContextHelpDirective,
   EntityIconDirective,
   MarkdownDirective,
+  StickyPopoverDirective
 ];
 
 @NgModule({

From 1e01f389eafccf67049d8a5d58de33a377eee565 Mon Sep 17 00:00:00 2001
From: Alisa Ismailati <alisa.ismailati@4science.com>
Date: Fri, 16 Aug 2024 10:46:20 +0200
Subject: [PATCH 2/2] [DSC-1874] Small fix

---
 src/app/shared/metadata-link-view/sticky-popover.directive.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/shared/metadata-link-view/sticky-popover.directive.ts b/src/app/shared/metadata-link-view/sticky-popover.directive.ts
index f81d8a9e281..5ce37e5ce8c 100644
--- a/src/app/shared/metadata-link-view/sticky-popover.directive.ts
+++ b/src/app/shared/metadata-link-view/sticky-popover.directive.ts
@@ -55,7 +55,6 @@ export class StickyPopoverDirective extends NgbPopover implements OnInit, OnDest
     this._elRef = _elementRef;
     this._render = _renderer;
     this.triggers = 'manual';
-    this.popoverTitle = 'Permissions';
     this.container = 'body';
   }