add altmetrics and plumx

config/config.yml

@@ -11,9 +11,12 @@ ui:
   # Trust X-FORWARDED-* headers from proxies (default = true)
   useProxies: true
 
+  altmetric: https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js
+  plumx: https://cdn.plu.mx/widget-popup.js
+
 rest:
   ssl: true
-  host: ys.library.yorku.ca
+  host: api7.dspace.org
   port: 443
   nameSpace: /server
 

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

@@ -60,6 +60,7 @@ import { ThemedItemAlertsComponent } from './alerts/themed-item-alerts.component
 import {
   ThemedFullFileSectionComponent
 } from './full/field-components/file-section/themed-full-file-section.component';
+import { ItemPageMetricsFieldComponent } from './simple/field-components/specific-field/metrics/item-page-metrics-field/item-page-metrics-field.component';
 
 const ENTRY_COMPONENTS = [
   // put only entry components that use custom decorator
@@ -102,6 +103,7 @@ const DECLARATIONS = [
   OrcidQueueComponent,
   ItemAlertsComponent,
   ThemedItemAlertsComponent,
+  ItemPageMetricsFieldComponent,
   BitstreamRequestACopyPageComponent,
 ];
 

src/app/item-page/simple/field-components/specific-field/metrics/item-page-metrics-field/item-page-metrics-field.component.html

@@ -0,0 +1,6 @@
+<ng-container *ngIf="!metrics.disabled">
+  <div data-badge-type='medium-donut' class='altmetric-embed' data-badge-details='right' [attr.data-doi]='metrics.url'>
+  </div>
+  <a id="plumx" class="plumx-plum-print-popup" href="https://plu.mx/plum/a/?doi={{metrics.url}}" data-popup="right"
+    data-hide-when-empty="true"></a>
+</ng-container>

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

@@ -0,0 +1,57 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { Item } from 'src/app/core/shared/item.model';
+import { of as observableOf } from 'rxjs';
+import { ItemPageMetricsFieldComponent } from './item-page-metrics-field.component';
+import { APP_CONFIG } from 'src/config/app-config.interface';
+
+describe('ItemPageMetricsFieldComponent', () => {
+  let component: ItemPageMetricsFieldComponent;
+  let fixture: ComponentFixture<ItemPageMetricsFieldComponent>;
+  const URI = '/10.13039/501100000289';
+
+  const appConfigProvider = {
+    provide: APP_CONFIG,
+    useValue: { ui: { altmetric: 'altmetric-url', plumx: 'plumx-url' } }
+  };
+
+  beforeEach(async () => {
+    TestBed.configureTestingModule({
+      declarations: [ItemPageMetricsFieldComponent],
+      providers: [appConfigProvider],
+    });
+
+    fixture = TestBed.createComponent(ItemPageMetricsFieldComponent);
+    component = fixture.componentInstance;
+
+    const mockItem: Item = Object.assign(new Item(), {
+      bundles: observableOf({}),
+      metadata: {
+        'dc.title': [
+          {
+            language: 'en_US',
+            value: 'This is just another title',
+          },
+        ],
+        'dc.identifier.uri': [{ value: 'http://dx.doi.org' + URI }],
+      },
+    });
+
+    component.item = mockItem;
+
+    fixture.detectChanges();
+  });
+
+  it('should set data-doi attribute correctly', () => {
+    const doiAttribute = fixture.nativeElement.querySelector('.altmetric-embed').getAttribute('data-doi');
+    expect(doiAttribute).toBe(URI);
+  });
+
+  it('should generate a valid anchor element', () => {
+    const metricsFieldElement = fixture.nativeElement;
+    const anchorElement = metricsFieldElement.querySelector('a');
+    expect(anchorElement).not.toBeNull();
+
+    const expectedHref = 'https://plu.mx/plum/a/?doi=' + URI;
+    expect(anchorElement.getAttribute('href')).toBe(expectedHref);
+  });
+});

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

@@ -0,0 +1,49 @@
+import { Component, Input, Inject, OnInit } from '@angular/core';
+import { AltmetricMenuItemModel } from 'src/app/shared/menu/menu-item/models/altmetric.model';
+import { Item } from 'src/app/core/shared/item.model';
+import { AppConfig, APP_CONFIG } from 'src/config/app-config.interface';
+
+@Component({
+  selector: 'ds-item-page-metrics-field',
+  templateUrl: './item-page-metrics-field.component.html',
+})
+export class ItemPageMetricsFieldComponent implements OnInit {
+
+  @Input() metrics = { url: '', disabled: true } as AltmetricMenuItemModel;
+  @Input() item: Item;
+
+  constructor(@Inject(APP_CONFIG) private appConfig: AppConfig) {}
+
+  ngOnInit() {
+    this.metrics.url = this.item.firstMetadataValue('dc.identifier.uri') ? (new URL(this.item.firstMetadataValue('dc.identifier.uri')).pathname) : '';
+    if (this.metrics.url !== '') {
+      this.metrics.disabled = false;
+    }
+
+    this.loadExternalScript(this.appConfig.ui.altmetric)
+    .catch(error => console.error('Script loading error:', error));
+
+    this.loadExternalScript(this.appConfig.ui.plumx)
+    .catch(error => console.error('Script loading error:', error));
+  }
+
+  private loadExternalScript(scriptUrl: string): Promise<void> {
+    return new Promise<void>((resolve, reject) => {
+      if (!this.metrics.disabled) {
+        const script = document.createElement('script');
+        script.src = scriptUrl;
+        script.onload = () => {
+          console.log('External script has been loaded: ' + scriptUrl);
+          resolve();
+        };
+        script.onerror = (error) => {
+          this.metrics.disabled = true;
+          reject(error);
+        };
+        document.body.appendChild(script);
+      } else {
+        resolve();
+      }
+    });
+  }
+}

src/app/item-page/simple/item-types/publication/publication.component.html

@@ -47,7 +47,10 @@
       [fields]="['dc.publisher']"
       [label]="'publication.page.publisher'">
     </ds-generic-item-page-field>
+    <ds-item-page-metrics-field [item]="object">
+    </ds-item-page-metrics-field>
   </div>
+
   <div class="col-xs-12 col-md-7">
     <ds-related-items
       [parentItem]="object"

src/config/config.server.ts

@@ -221,6 +221,8 @@ export const buildAppConfig = (destConfigPath?: string): AppConfig => {
   appConfig.ui.port = isNotEmpty(ENV('PORT', true)) ? getNumberFromString(ENV('PORT', true)) : appConfig.ui.port;
   appConfig.ui.nameSpace = isNotEmpty(ENV('NAMESPACE', true)) ? ENV('NAMESPACE', true) : appConfig.ui.nameSpace;
   appConfig.ui.ssl = isNotEmpty(ENV('SSL', true)) ? getBooleanFromString(ENV('SSL', true)) : appConfig.ui.ssl;
+  appConfig.ui.altmetric = isNotEmpty(ENV('ALTMETRIC', true)) ? ENV('ALTMETRIC', true) : appConfig.ui.altmetric;
+  appConfig.ui.plumx = isNotEmpty(ENV('PLUMX', true)) ? ENV('PLUMX', true) : appConfig.ui.plumx;
 
   // apply existing non convention REST environment variables
   appConfig.rest.host = isNotEmpty(ENV('REST_HOST', true)) ? ENV('REST_HOST', true) : appConfig.rest.host;

src/config/ui-server-config.interface.ts

@@ -13,4 +13,9 @@ export class UIServerConfig extends ServerConfig {
 
   // Trust X-FORWARDED-* headers from proxies
   useProxies: boolean;
+
+  // Altmetric script URL
+  altmetric?: string;
+  // Plumx script URL
+  plumx?: string;
 }