AG-1408: wait for differential expressions boxplot to finish rendering before scrolling to anchor link

src/app/features/genes/components/gene-evidence-rna/gene-evidence-rna.component.ts

@@ -1,10 +1,11 @@
-import { Component, Input, AfterViewInit } from '@angular/core';
+import { AfterViewChecked, Component, Input, ViewChild } from '@angular/core';
 
 import {
   Gene,
   MedianExpression,
   RnaDifferentialExpression,
 } from '../../../../models';
+import { BoxPlotComponent } from '../../../charts/components';
 import { GeneService } from '../../services';
 import { HelperService } from '../../../../core/services';
 
@@ -13,7 +14,7 @@ import { HelperService } from '../../../../core/services';
   templateUrl: './gene-evidence-rna.component.html',
   styleUrls: ['./gene-evidence-rna.component.scss'],
 })
-export class GeneEvidenceRnaComponent implements AfterViewInit {
+export class GeneEvidenceRnaComponent implements AfterViewChecked {
   _gene: Gene | undefined;
   get gene(): Gene | undefined {
     return this._gene;
@@ -35,6 +36,9 @@ export class GeneEvidenceRnaComponent implements AfterViewInit {
 
   consistencyOfChangeChartData: any | undefined;
 
+  @ViewChild(BoxPlotComponent) boxPlotComponent: BoxPlotComponent | null = null;
+  hasScrolled = false;
+
   constructor(
     private helperService: HelperService,
     private geneService: GeneService
@@ -52,6 +56,8 @@ export class GeneEvidenceRnaComponent implements AfterViewInit {
     this.differentialExpressionYAxisMax = undefined;
 
     this.consistencyOfChangeChartData = undefined;
+
+    this.hasScrolled = false;
   }
 
   init() {
@@ -71,13 +77,20 @@ export class GeneEvidenceRnaComponent implements AfterViewInit {
     this.initConsistencyOfChange();
   }
 
-  ngAfterViewInit() {
-    const hash = window.location.hash.substr(1);
-    if (hash) {
-      const target = document.getElementById(hash);
-      if (target) {
-        // TODO determine if there are async calls altering the offset height
-        window.scrollTo(0, this.helperService.getOffset(target).top - 150);
+  ngAfterViewChecked() {
+    this.scrollToAnchorLink();
+  }
+
+  scrollToAnchorLink() {
+    // AG-1408 - wait for differential expression box plot to finish loading before scrolling
+    if (this.boxPlotComponent?.isInitialized && !this.hasScrolled) {
+      const hash = window.location.hash.slice(1);
+      if (hash) {
+        const target = document.getElementById(hash);
+        if (target) {
+          window.scrollTo(0, this.helperService.getOffset(target).top - 150);
+          this.hasScrolled = true;
+        }
       }
     }
   }

tests/gene-comparison-tool.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForSpinnerNotVisible } from './helpers/utils';
 
 test.describe('specific viewport block', () => {
   test.slow();
@@ -8,8 +9,7 @@ test.describe('specific viewport block', () => {
     await page.goto('/genes/comparison?category=Protein+-+Differential+Expression');
 
     // wait for page to load (i.e. spinner to disappear)
-    await expect(page.locator('div:nth-child(4) > div > .spinner'))
-      .not.toBeVisible({ timeout: 250000});
+    await waitForSpinnerNotVisible(page);
 
     // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle('Gene Comparison | Visual comparison tool for AD genes');
@@ -20,8 +20,7 @@ test.describe('specific viewport block', () => {
     await page.goto('/genes/comparison?category=Protein+-+Differential+Expression');
 
     // wait for page to load (i.e. spinner to disappear)
-    await expect(page.locator('div:nth-child(4) > div > .spinner'))
-      .not.toBeVisible({ timeout: 150000});
+    await waitForSpinnerNotVisible(page, 150000);
 
     // expect sub-category dropdown to be SRM
     const dropdown = page.locator('#subCategory');

tests/gene-details.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForSpinnerNotVisible } from './helpers/utils';
 
 test.describe('specific viewport block', () => {
   test.slow();
@@ -14,4 +15,15 @@ test.describe('specific viewport block', () => {
     // expect div for page not found content to be visible
     expect(page.locator('.page-not-found')).toBeVisible();
   });
+
+  test('consistency of change section heading is visible when using anchor link', async ({ page}) => {
+    await page.goto(
+      '/genes/ENSG00000178209/evidence/rna?model=AD Diagnosis males and females#consistency-of-change'
+    );
+
+    await waitForSpinnerNotVisible(page);
+
+    const header = page.getByRole('heading', { name:  'Consistency of Change in Expression'});
+    expect(header).toBeInViewport();
+  });
 });

tests/gene-resources.spec.ts

@@ -1,4 +1,5 @@
 import { test, expect } from '@playwright/test';
+import { waitForSpinnerNotVisible } from './helpers/utils';
 
 test.describe('specific viewport block', () => {
   test.slow();
@@ -8,8 +9,7 @@ test.describe('specific viewport block', () => {
     await page.goto('/genes/ENSG00000178209/resources');
 
     // wait for page to load (i.e. spinner to disappear)
-    await expect(page.locator('div:nth-child(4) > div > .spinner'))
-      .not.toBeVisible({ timeout: 250000});
+    await waitForSpinnerNotVisible(page);
 
     // Expect a title "to contain" a substring.
     await expect(page).toHaveTitle('Agora');
@@ -20,8 +20,7 @@ test.describe('specific viewport block', () => {
     await page.goto('/genes/ENSG00000178209/resources');
 
     // wait for page to load (i.e. spinner to disappear)
-    await expect(page.locator('div:nth-child(4) > div > .spinner'))
-      .not.toBeVisible({ timeout: 150000});
+    await waitForSpinnerNotVisible(page, 150000);
 
     // expect link named 'Visit AMP-PD'
     const link = page.getByRole('link', { name: 'Visit AMP-PD' });

tests/helpers/utils.ts

@@ -0,0 +1,7 @@
+import { Page, expect } from '@playwright/test';
+
+export const waitForSpinnerNotVisible = async (page: Page, timeout = 250000) => {
+  await expect(
+    page.locator('div:nth-child(4) > div > .spinner')
+  ).not.toBeVisible({ timeout: timeout });
+};