MET-6239 Add Debias Info

projects/sandbox/src/app/_directives/index.ts

@@ -1 +1,2 @@
+export * from './is-scrollable';
 export * from './text-copy';

projects/sandbox/src/app/_directives/is-scrollable/index.ts

@@ -0,0 +1 @@
+export * from './is-scrollable.directive';

projects/sandbox/src/app/_directives/is-scrollable/is-scrollable.directive.spec.ts

@@ -0,0 +1,39 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { IsScrollableDirective } from '.';
+
+@Component({
+  imports: [IsScrollableDirective],
+  template: `
+    <div class="cmp">
+      <div class="scrollable" appIsScrollable #scrollInfo="scrollInfo" id="scrollInfo"></div>
+      <a class="back" (click)="scrollInfo.back()">BACK</a>
+      <a class="fwd" (click)="scrollInfo.fwd()">FWD</a>
+    </div>
+  `,
+  styles: ['.scrollable{ width: 100px; max-width: 100px; }'],
+  standalone: true
+})
+class TestIsScrollableDirectiveComponent {}
+
+describe('IsScrollableDirective', () => {
+  let fixture: ComponentFixture<TestIsScrollableDirectiveComponent>;
+  let testComponent: TestIsScrollableDirectiveComponent;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [IsScrollableDirective, TestIsScrollableDirectiveComponent],
+      schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TestIsScrollableDirectiveComponent);
+    testComponent = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('it should create', () => {
+    expect(testComponent).toBeTruthy();
+  });
+});

projects/sandbox/src/app/_directives/is-scrollable/is-scrollable.directive.ts

@@ -0,0 +1,50 @@
+import { AfterViewInit, Directive, ElementRef, HostListener } from '@angular/core';
+
+@Directive({
+  selector: '[appIsScrollable]',
+  exportAs: 'scrollInfo',
+  standalone: true
+})
+export class IsScrollableDirective implements AfterViewInit {
+  canScrollBack = false;
+  canScrollFwd = false;
+
+  constructor(private readonly elementRef: ElementRef) {
+    const element = this.elementRef.nativeElement;
+
+    new MutationObserver((_: MutationRecord[]) => {
+      console.log('mutate...');
+      this.calc();
+    }).observe(element, {
+      childList: true
+    });
+  }
+
+  ngAfterViewInit(): void {
+    const fn = (): void => {
+      this.calc();
+    };
+    setTimeout(fn, 0);
+  }
+
+  /** calc
+  /* updates the variables
+  /* - canScrollBack
+  /* - canScrollFwd
+  /* according to the element's relative width and scroll position
+  */
+  @HostListener('window:resize', ['$event'])
+  @HostListener('scroll', ['$event'])
+  calc(e?: Event): void {
+    const el = this.elementRef.nativeElement;
+    const scrollSpace = el.scrollHeight;
+    const dimension = el.getBoundingClientRect().height;
+    const actualScroll = el.scrollTop;
+
+    this.canScrollBack = actualScroll > 0;
+    this.canScrollFwd = scrollSpace > actualScroll + dimension + 1;
+    if (e) {
+      e.stopPropagation();
+    }
+  }
+}

projects/sandbox/src/app/dataset-content-summary/dataset-content-summary.component.html

@@ -238,14 +238,16 @@
   <div
     *ngIf="summaryData"
     class="cell-inner-grid"
+    appIsScrollable
+    #scrollableElement
+    #scrollInfo="scrollInfo"
     tabindex="-1"
     [ngClass]="{
       scrollable: !(maxPageSize > maxPageSizes[0].value),
       'has-scroll-bar':
-        maxPageSize === maxPageSizes[0].value && gridData.length >= visibleRowsDefault
+        maxPageSize === maxPageSizes[0].value && gridData.length >= visibleRowsDefault,
+      'scrollable-downwards': scrollInfo.canScrollFwd
     }"
-    #innerGrid
-    (scroll)="gridScroll()"
   >
     <div class="inner-grid">
       <ng-container *ngIf="pagerInfo">

projects/sandbox/src/app/dataset-content-summary/dataset-content-summary.component.spec.ts

@@ -1,4 +1,4 @@
-import { CUSTOM_ELEMENTS_SCHEMA, ElementRef } from '@angular/core';
+import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { async, ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { Chart } from 'chart.js';
 
@@ -101,33 +101,6 @@ describe('DatasetContentSummaryComponent', () => {
     expect(component.pieComponent.setPieSelection).toHaveBeenCalled();
   });
 
-  it('should handle the grid scroll', fakeAsync(() => {
-    const spyToggleClass = jasmine.createSpy();
-
-    component.innerGridEl = ({
-      nativeElement: {
-        getBoundingClientRect: () => {
-          return {};
-        },
-        classList: ({
-          toggle: spyToggleClass
-        } as unknown) as DOMTokenList
-      } as Element
-    } as unknown) as ElementRef;
-
-    component.datasetId = 100;
-    addPieComponent();
-
-    expect(spyToggleClass).toHaveBeenCalledTimes(0);
-    component.loadData();
-    tick(tickTime);
-
-    expect(spyToggleClass).toHaveBeenCalledTimes(1);
-    component.gridScroll();
-    tick(tickTime);
-    expect(spyToggleClass).toHaveBeenCalledTimes(2);
-  }));
-
   it('should load the data', fakeAsync(() => {
     component.datasetId = 100;
     expect(component.lastLoadedId).toBeFalsy();
@@ -236,13 +209,11 @@ describe('DatasetContentSummaryComponent', () => {
     expect(component.pieLabels.length).toBeGreaterThan(0);
   }));
 
-  it('should set the pager info', fakeAsync(() => {
+  it('should set the pager info', () => {
     expect(component.pagerInfo).toBeFalsy();
     component.setPagerInfo({} as PagerInfo);
-    expect(component.pagerInfo).toBeFalsy();
-    tick(tickTime);
     expect(component.pagerInfo).toBeTruthy();
-  }));
+  });
 
   it('should go to the page', fakeAsync(() => {
     component.datasetId = 100;

projects/sandbox/src/app/dataset-content-summary/dataset-content-summary.component.ts

@@ -12,6 +12,7 @@ import { FormsModule } from '@angular/forms';
 
 // sonar-disable-next-statement (sonar doesn't read tsconfig paths entry)
 import { SubscriptionManager } from 'shared';
+import { IsScrollableDirective } from '../_directives';
 import { getLowestValues, sanitiseSearchTerm } from '../_helpers';
 import {
   LicenseType,
@@ -42,7 +43,8 @@ import { GridPaginatorComponent } from '../grid-paginator';
     GridPaginatorComponent,
     FormatLicensePipe,
     FormatTierDimensionPipe,
-    HighlightMatchPipe
+    HighlightMatchPipe,
+    IsScrollableDirective
   ]
 })
 export class DatasetContentSummaryComponent extends SubscriptionManager {
@@ -95,7 +97,8 @@ export class DatasetContentSummaryComponent extends SubscriptionManager {
   @Output() onReportLinkClicked = new EventEmitter<string>();
 
   @ViewChild('pieCanvas') pieCanvasEl: ElementRef;
-  @ViewChild('innerGrid') innerGridEl: ElementRef;
+
+  @ViewChild(IsScrollableDirective) scrollableElement: IsScrollableDirective;
   @ViewChild(PieComponent, { static: false }) pieComponent: PieComponent;
   @ViewChild('paginator') paginator: GridPaginatorComponent;
 
@@ -330,7 +333,12 @@ export class DatasetContentSummaryComponent extends SubscriptionManager {
     } else {
       this.filteredSummaryData = undefined;
     }
-    this.gridScroll();
+
+    if (this.scrollableElement) {
+      setTimeout(() => {
+        this.scrollableElement.calc();
+      }, 0);
+    }
   }
 
   /** updateTerm
@@ -365,23 +373,6 @@ export class DatasetContentSummaryComponent extends SubscriptionManager {
   }
 
   setPagerInfo(info: PagerInfo): void {
-    setTimeout(() => {
-      this.gridScroll();
-      this.pagerInfo = info;
-    }, 0);
-  }
-
-  gridScroll(): void {
-    setTimeout(() => {
-      if (!this.innerGridEl) {
-        return;
-      }
-      const el = this.innerGridEl.nativeElement;
-      const sh = el.scrollHeight;
-      const h = el.getBoundingClientRect().height;
-      const st = el.scrollTop;
-      const canScrollDown = sh > st + h + 1;
-      el.classList.toggle('scrollable-downwards', canScrollDown);
-    }, 100);
+    this.pagerInfo = info;
   }
 }

projects/sandbox/src/app/dataset-info/dataset-info.component.spec.ts

@@ -195,5 +195,6 @@ describe('DatasetInfoComponent', () => {
 
     component.runOrShowDebiasReport(false);
     expect(component.cmpDebias.startPolling).toHaveBeenCalled();
+    tick(1);
   }));
 });

projects/sandbox/src/app/debias/debias.component.html

@@ -15,6 +15,51 @@
       >No Biases Found</span
     >
 
+    <a class="open-info" (click)="toggleDebiasInfo($event)"></a>
+
+    <div
+      *ngIf="debiasReport.state === DebiasState.COMPLETED && debiasReport.detections.length > 0"
+      class="debias-header"
+      #scrollInfo="scrollInfo"
+      appIsScrollable
+      [ngClass]="{
+        closed: !debiasHeaderOpen,
+        'scrollable-downwards': scrollInfo.canScrollFwd,
+        'scrollable-upwards': scrollInfo.canScrollBack
+      }"
+    >
+      <p>
+        This is functionality that allows you to check your dataset for biased terms after your
+        dataset has finished processing.
+      </p>
+
+      <p>
+        If this bias detection is triggered, the values in certain fields of each successfully
+        processed record are analyzed, provided that they have a valid language qualification
+        (xml:lang attribute) and that this language is one of five supported languages (Dutch,
+        English, French, German and Italian).
+      </p>
+
+      <p>
+        Once processing is complete, you will be able to access a full listing of any contentious
+        terms that were found in the analyzed field values.
+      </p>
+
+      <p *ngIf="'https://pro.europeana.eu/project/de-bias'; let linkUrl">
+        This functionality is one of the results of the de-bias project (2023 - 2024) and is
+        provided as-is. For more information see:
+        <br />
+        <a [href]="linkUrl" target="_blank">{{ linkUrl }}</a
+        >.
+      </p>
+    </div>
+
+    <div
+      class="debias-overlay"
+      [ngClass]="{ active: debiasHeaderOpen }"
+      (click)="closeDebiasInfo($event)"
+    ></div>
+
     <sb-skip-arrows #skipArrows>
       <div
         class="debias-detection-grid"