Merged dspace-cris-2023_02_x into task/dspace-cris-2023_02_x/DSC-1575

src/app/core/core.module.ts

@@ -162,7 +162,7 @@ import { EditItemMode } from './submission/models/edititem-mode.model';
 import { AuditDataService } from './audit/audit-data.service';
 import { Audit } from './audit/model/audit.model';
 import { ItemExportFormat } from './itemexportformat/model/item-export-format.model';
-import { MetricsComponentsDataService } from './layout/metrics-components-data.service';
+import { MetricsComponentsService } from './layout/metrics-components.service';
 import { MetricsComponent } from './layout/models/metrics-component.model';
 import { Metric } from './shared/metric.model';
 import { MetricsDataService } from './data/metrics-data.service';
@@ -354,7 +354,7 @@ const PROVIDERS = [
   FilteredDiscoveryPageResponseParsingService,
   { provide: NativeWindowService, useFactory: NativeWindowFactory },
   TabDataService,
-  MetricsComponentsDataService,
+  MetricsComponentsService,
   MetricsDataService,
   VocabularyService,
   VocabularyDataService,

src/app/core/layout/metrics-components-data.service.spec.ts → src/app/core/layout/metrics-components.service.spec.ts

@@ -1,12 +1,12 @@
 import { Metric } from '../shared/metric.model';
-import { MetricsComponentsDataService } from './metrics-components-data.service';
+import { MetricsComponentsService } from './metrics-components.service';
 
-describe('MetricsComponentsDataService', () => {
+describe('MetricsComponentsService', () => {
 
-  let service: MetricsComponentsDataService;
+  let service: MetricsComponentsService;
 
   beforeEach(() => {
-    service = new MetricsComponentsDataService();
+    service = new MetricsComponentsService();
 
   });
 
@@ -44,8 +44,8 @@ describe('MetricsComponentsDataService', () => {
 
       expect(result.length).toBe(1);
       expect(result[0].metrics.length).toBe(2);
-      expect(result[0].metrics[0].metricType).toBe('views');
-      expect(result[0].metrics[1].metricType).toBe('downloads');
+      expect(result[0].metrics[0].metricType).toBe('downloads');
+      expect(result[0].metrics[1].metricType).toBe('views');
 
     });
 

src/app/core/layout/metrics-components-data.service.ts → src/app/core/layout/metrics-components.service.ts

@@ -4,7 +4,7 @@ import { CrisLayoutMetricRow } from './models/tab.model';
 /**
  * A service responsible for managing metrics objects
  */
-export class MetricsComponentsDataService {
+export class MetricsComponentsService {
 
   /**
    * Get matching metrics for item.
@@ -20,17 +20,13 @@ export class MetricsComponentsDataService {
 
   computeMetricsRows(itemMetrics: Metric[], maxColumn, metricTypes: string[]): CrisLayoutMetricRow[] {
 
-    // support
-    const typeMap = {};
-    metricTypes.forEach((type) => typeMap[type] = type);
-
     // filter, enrich, order
-    const metrics = itemMetrics
-      .filter((metric) => typeMap[metric.metricType])
-      .map((metric) => {
-        return { ...metric, position: typeMap[metric.metricType].position };
+    const metrics: Metric[] = itemMetrics
+      .filter((metric: Metric) => metricTypes.includes(metric.metricType))
+      .map((metric: Metric) => {
+        return { ...metric, position: metricTypes.indexOf(metric.metricType) };
       })
-      .sort((metric) => metric.position);
+      .sort((metricA, metricB ) => metricA.position - metricB.position);
 
     // chunker
     const totalRow = Math.ceil(metrics.length / maxColumn);

src/app/core/shared/client-math.service.ts

@@ -0,0 +1,105 @@
+import { DOCUMENT } from '@angular/common';
+import {
+  Inject,
+  Injectable,
+} from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { environment } from 'src/environments/environment';
+import {
+  NativeWindowRef,
+  NativeWindowService,
+} from '../services/window.service';import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+/**
+ * Provide the MathService for CSR
+ */
+export class ClientMathService extends MathService {
+
+  protected isReady$: Subject<boolean>;
+
+  protected mathJaxOptions = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']]
+    },
+    svg: {
+      fontCache: 'global'
+    },
+    startup: {
+      typeset: false
+    }
+  };
+
+  protected mathJax: MathJaxConfig = {
+    source: 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-chtml.js',
+    id: 'MathJaxScript'
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: 'https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.2/es5/tex-chtml.min.js',
+    id: 'MathJaxBackupScript'
+  };
+
+  constructor(
+    @Inject(DOCUMENT) private _document: Document,
+    @Inject(NativeWindowService) protected _window: NativeWindowRef,
+  ) {
+    super();
+
+    this.isReady$ = new ReplaySubject<boolean>();
+
+    void this.registerMathJaxAsync(this.mathJax)
+      .then(() => this.isReady$.next(true))
+      .catch(_ => {
+        void this.registerMathJaxAsync(this.mathJaxFallback)
+          .then(() => this.isReady$.next(true));
+      });
+  }
+
+  /**
+   * Register the specified MathJax script in the document
+   *
+   * @param config The configuration object for the script
+   */
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    if (environment.markdown.mathjax) {
+      return new Promise<void>((resolve, reject) => {
+
+        const optionsScript: HTMLScriptElement = this._document.createElement('script');
+        optionsScript.type = 'text/javascript';
+        optionsScript.text = `MathJax = ${JSON.stringify(this.mathJaxOptions)};`;
+        this._document.head.appendChild(optionsScript);
+
+        const script: HTMLScriptElement = this._document.createElement('script');
+        script.id = config.id;
+        script.type = 'text/javascript';
+        script.src = config.source;
+        script.crossOrigin = 'anonymous';
+        script.async = true;
+        script.onload = () => resolve();
+        script.onerror = error => reject(error);
+        this._document.head.appendChild(script);
+      });
+    }
+    return Promise.resolve();
+  }
+
+  /**
+   * Return the status of the script registration
+   */
+  ready(): Observable<boolean> {
+    return this.isReady$;
+  }
+
+  /**
+   * Render the specified element using the MathJax JavaScript
+   *
+   * @param element The element to render with MathJax
+   */
+  render(element: HTMLElement) {
+    if (environment.markdown.mathjax) {
+      this._window.nativeWindow.MathJax.typesetPromise([element]);
+    }
+  }
+}

src/app/core/shared/math.service.spec.ts

@@ -0,0 +1,47 @@
+import { TestBed } from '@angular/core/testing';
+import { Observable, of } from 'rxjs';
+import { MathService, MathJaxConfig } from './math.service';
+
+export class MockMathService extends MathService {
+  protected mathJaxOptions: any = {};
+  protected mathJax: MathJaxConfig = { source: '', id: '' };
+  protected mathJaxFallback: MathJaxConfig = { source: '', id: '' };
+
+  protected registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return of(true);
+  }
+
+  render(element: HTMLElement): void {
+    return;
+  }
+}
+
+describe('MathService', () => {
+  let service: MockMathService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = new MockMathService();
+    spyOn(service, 'render');
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should be ready', (done) => {
+    service.ready().subscribe(isReady => {
+      expect(isReady).toBe(true);
+      done();
+    });
+  });
+
+  it('should render', () => {
+    service.render(document.createElement('div'));
+    expect(service.render).toHaveBeenCalled();
+  });
+});

src/app/core/shared/math.service.ts

@@ -0,0 +1,19 @@
+import { Observable } from 'rxjs';
+
+export interface MathJaxConfig {
+  source: string;
+  id: string;
+}
+
+/**
+ * This service is used to provide the MathJax library with the ability to render markdown code
+ */
+export abstract class MathService {
+  protected abstract mathJaxOptions: any;
+  protected abstract mathJax: MathJaxConfig;
+  protected abstract mathJaxFallback: MathJaxConfig;
+
+  protected abstract registerMathJaxAsync(config: MathJaxConfig): Promise<any>;
+  abstract ready(): Observable<boolean>;
+  abstract render(element: HTMLElement): void;
+}

src/app/core/shared/server-math.service.ts

@@ -0,0 +1,44 @@
+import { Injectable } from '@angular/core';
+import { Observable, ReplaySubject, Subject } from 'rxjs';
+import { MathJaxConfig, MathService } from './math.service';
+
+@Injectable({
+  providedIn: 'root'
+})
+/**
+ * Provide the MathService for SSR
+ */
+export class ServerMathService extends MathService {
+
+  protected signal: Subject<boolean>;
+
+  protected mathJaxOptions = {};
+
+  protected mathJax: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+  protected mathJaxFallback: MathJaxConfig = {
+    source: '',
+    id: ''
+  };
+
+  constructor() {
+    super();
+
+    this.signal = new ReplaySubject<boolean>();
+    this.signal.next(true);
+  }
+
+  protected async registerMathJaxAsync(config: MathJaxConfig): Promise<any> {
+    return Promise.resolve();
+  }
+
+  ready(): Observable<boolean> {
+    return this.signal;
+  }
+
+  render(element: HTMLElement) {
+    return;
+  }
+}

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.spec.ts

@@ -1,5 +1,5 @@
 /* eslint-disable max-classes-per-file */
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
 import { Observable, of } from 'rxjs';
 import { RemoteData } from '../../../../../core/data/remote-data';
@@ -16,7 +16,7 @@ import { SharedModule } from '../../../../../shared/shared.module';
 import { CrisLayoutMetricsBoxComponent } from './cris-layout-metrics-box.component';
 import { metricsComponent } from '../../../../../shared/testing/metrics-components.mock';
 import { MetricsComponent } from '../../../../../core/layout/models/metrics-component.model';
-import { MetricsComponentsDataService } from '../../../../../core/layout/metrics-components-data.service';
+import { MetricsComponentsService } from '../../../../../core/layout/metrics-components.service';
 import { Metric } from '../../../../../core/shared/metric.model';
 import { ItemDataService } from '../../../../../core/data/item-data.service';
 import { CrisLayoutMetricRow } from '../../../../../core/layout/models/tab.model';
@@ -78,7 +78,7 @@ describe('CrisLayoutMetricsBoxComponent', () => {
   let component: CrisLayoutMetricsBoxComponent;
   let fixture: ComponentFixture<CrisLayoutMetricsBoxComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
 
     itemDataService = jasmine.createSpyObj('ItemDataService', {
       getMetrics: jasmine.createSpy('getMetrics')
@@ -94,7 +94,7 @@ describe('CrisLayoutMetricsBoxComponent', () => {
         BrowserAnimationsModule,
         SharedModule],
       providers: [
-        { provide: MetricsComponentsDataService, useClass: MetricsComponentsDataServiceMock },
+        { provide: MetricsComponentsService, useClass: MetricsComponentsDataServiceMock },
         { provide: ItemDataService, useValue: itemDataService },
         { provide: 'boxProvider', useClass: boxMetrics },
         { provide: 'itemProvider', useClass: { metrics: [metric1Mock, metric2Mock] } },

src/app/cris-layout/cris-layout-matrix/cris-layout-box-container/boxes/metrics/cris-layout-metrics-box.component.ts

@@ -8,7 +8,7 @@ import { RenderCrisLayoutBoxFor } from '../../../../decorators/cris-layout-box.d
 import { LayoutBox } from '../../../../enums/layout-box.enum';
 import { getFirstSucceededRemoteDataPayload } from '../../../../../core/shared/operators';
 import { hasValue } from '../../../../../shared/empty.util';
-import { MetricsComponentsDataService } from '../../../../../core/layout/metrics-components-data.service';
+import { MetricsComponentsService } from '../../../../../core/layout/metrics-components.service';
 import { ItemDataService } from '../../../../../core/data/item-data.service';
 import { CrisLayoutBox, MetricsBoxConfiguration, } from '../../../../../core/layout/models/box.model';
 import { Item } from '../../../../../core/shared/item.model';
@@ -51,7 +51,7 @@ export class CrisLayoutMetricsBoxComponent extends CrisLayoutBoxModelComponent i
   subs: Subscription[] = [];
 
   constructor(
-    protected metricsComponentService: MetricsComponentsDataService,
+    protected metricsComponentService: MetricsComponentsService,
     protected itemService: ItemDataService,
     protected translateService: TranslateService,
     @Inject('boxProvider') public boxProvider: CrisLayoutBox,

src/app/item-page/field-components/metadata-values/metadata-values.component.html

@@ -12,7 +12,7 @@
 
 <!-- Render value as markdown -->
 <ng-template #markdown let-value="value">
-  <span class="dont-break-out" [innerHTML]="value | dsMarkdown | async">
+  <span class="dont-break-out" [dsMarkdown]="value">
   </span>
 </ng-template>
 

src/app/item-page/field-components/metadata-values/metadata-values.component.ts

@@ -37,7 +37,7 @@ export class MetadataValuesComponent implements OnChanges {
   @Input() label: string;
 
   /**
-   * Whether the {@link MarkdownPipe} should be used to render these metadata values.
+   * Whether the {@link MarkdownDirective} should be used to render these metadata values.
    * This will only have effect if {@link MarkdownConfig#enabled} is true.
    * Mathjax will only be rendered if {@link MarkdownConfig#mathjax} is true.
    */

src/app/item-page/item-page.module.ts

@@ -61,6 +61,8 @@ import { ThemedItemAlertsComponent } from './alerts/themed-item-alerts.component
 import {
   ThemedFullFileSectionComponent
 } from './full/field-components/file-section/themed-full-file-section.component';
+import { MarkdownViewerModule } from '../shared/markdown-viewer/markdown-viewer.module';
+
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -123,6 +125,7 @@ const DECLARATIONS = [
     CrisItemPageModule,
     ContextMenuModule.withEntryComponents(),
     MiradorViewerModule,
+    MarkdownViewerModule,
   ],
   declarations: [
     ...DECLARATIONS,

src/app/item-page/simple/field-components/specific-field/abstract/item-page-abstract-field.component.ts

@@ -37,7 +37,7 @@ export class ItemPageAbstractFieldComponent extends ItemPageFieldComponent {
     label = 'item.page.abstract';
 
     /**
-     * Use the {@link MarkdownPipe} to render dc.description.abstract values
+     * Use the {@link MarkdownDirective} to render dc.description.abstract values
      */
     enableMarkdown = true;
 }