Display Altmetric badges on simple item view

[sergius02]

References

• Fixes Display Altmetric badges on simple item view #2400

Description

Displays the Altmetric donut in the simple item page. It use diferent identifiers to do that, DOI, Handle, PMID, ISBN, ARXIV or URI.

Instructions for Reviewers

List of changes in this PR:

• item-page-altmetric-field.component: The new component with the donut.
• item-page-atlmetric-field.directive: This directive adds the data-* to the div depending in the firs valid identifier found in the item. See https://badge-docs.altmetric.com/getting-started.html#quick-start
• publication and untyped component to load the new component.
• Translation files with the head of the new item page section
• external-scripts-loader.service, this service loads dinamically the javascripts (from URLs) creating a script tag in the head of the html. It can be use to load other javascript from CDN and no need to download and use static javascript. See Display Altmetric badges on simple item view #2400 (comment) . The idea for this service is from this comment https://stackoverflow.com/a/42766146

Checklist

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.
• My PR passes ESLint validation using yarn lint
• My PR doesn't introduce circular dependencies (verified via yarn check-circ-deps)
• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.
• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.
• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.
• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.
• If my PR fixes an issue ticket, I've linked them together.

[github-actions]

Hi @sergius02,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[amtuannguyen]

@sergius02 I'd like to test this on our dspace-7.6 instance. Could you please make a patch against dspace-7.6 tag? Thanks!

[amtuannguyen]

@sergius02 I'd like to test this on our dspace-7.6 instance. Could you please make a patch against dspace-7.6 tag? Thanks!

Never mind, I applied the patch and it is working on dspace-7.6 tag. Thanks!

[abollini]

We have this feature in DSpace-CRIS. It is part of a larger feature that allow to track/visualize metrics about the item so it is not something "small" to be ported so the fact that the feature exists in DSpace-CRIS should definitively not prevent us to consider this PR.
That said, having this feature since a while we hear feedback from users and some of them raise concerns about privacy / GPDR. The point is that this kind of widget require the browser to sent data to a third-party service via an http request and this request could lead to "track the user". There is no cookie involved in this but in any case this is a grey area. On the DSpace-CRIS side we are finalizing an improvement that would allow to configure klaro to prevent the use of the badge until the user accept to use it (opt-in).
If a such mechanism is not offered also in dspace I would like to keep this feature disabled by default and put a warning in the documentation about potential privacy issue if you enable it.
In any case the feature should be configurable (turn on / off)

[alanorth]

Regarding GDPR, we are already loading fonts from Google Fonts, which was apparently found to be a breach of GDPR in January, 2022. So that's not great...

In any case the feature should be configurable (turn on / off)

Yes I agree that they should be off by default as they were in DSpace 6.x, see dspace/config/modules/altmetrics.cfg:

# Is the Altmetric.com badge enabled?
#altmetric.enabled = false

[pilasou]

Hi, just to help with the test, the article referenced by @alanorth in the issue related to the PR as a nice Altmetrics badge and have both a DOI (10.1126/science.1259855 ; to add in dc.identifier.doi metadata of an item) and a Pubmed ID (25592418 ; to add in a dc.identifier.pubmedid metadata of an item). Just 2 questions to test this feature: where on the page should the Altmetrics Badge be displayed? For the metadata, can both the ID and the URI (ex for DOI: 10.1126/science.1259855 or https://doi.org/10.1126/science.1259855) be used, or only the ID?

[sergius02]

Ok, i've made some changes.

There's a new configuration under item section in the config.yml named showAltmetricBadge (false by default).

When it's false the script will be never be loaded

[tdonohue]

I haven't had a chance to test this yet, but I wanted to quickly note that we'll need to make this URL configurable in some manner. This sort of external CDN may not be compatible with GDPR. It's also unclear to me if this is an "official" CDN for the altmetric badges or something else?

Basically, it'd unclear to me whether this would be GDPR compliant or not. So, we need a way to change this URL via configuration easily if sites need that.

[sergius02]

It's taken from the oficial docs: https://badge-docs.altmetric.com/getting-started.html#quick-start

<script type='text/javascript' src='https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'></script>

I can try to make it configurable

[tdonohue]

@sergius02 : Right, I understand this came from the official AltMetric documentation. If you prefer to leave it as-is, we can do so. But, I do think it's easier to maintain this code if the URL is configurable. Consider this an optional request.

I also have realized that my feedback here is similar to the feedback in this comment above.

The main point is that this external CDN (cloudfront.net) may not be GDPR compliant...but it doesn't appear there's any way to fix that issue since Altmetric requires you to use this CDN in order to use their badges.

So, in the end, we may need to simply add warnings on enabling Altmetric to the documentation since it requires usage of an external CDN (and we cannot make guarantees ourselves that the external CDN is GDPR compliant).

[github-actions]

Hi @sergius02,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[tdonohue]

@sergius02 : If you have a chance in the next few days, could you rebase this to resolve the merge conflicts? Our 8.0 feature PR merger deadline is Friday, Feb 23 and we are still hoping that we can include this PR. Thanks!

[tdonohue]

@sergius02 : I tested this today and it seems to be somehow enabled by default? We need it to be disabled by default.

Currently with default configurations I can see the script is downloaded & the request to https://api.altmetric.com occurs...and that's not what we want to happen. This call also occurs if I set:

item: 
    showAltmetricBadge: false

So, it appears that something is causing this to run whether it's disabled or not. (It might be your changes to config/config.yml?)

A few other notes inline below.

[tdonohue]

Please change to false because the default value is false.

[tdonohue]

This should be removed as it shouldn't be necessary. All default config values are only in app/config/default-app-config.ts. (That's why this file has very few configurations in it)

[tdonohue]

I don't believe this is correct. Currently DSpace is storing DOIs in dc.identifier.uri and/or dc.identifier based on this ticket DSpace/DSpace#5565

Maybe we need a way to check for DOIs in all three of these fields? I'm OK with the first check being dc.identifier.doi...but if not found there, we may want to check other fields for DOIs too.

[github-actions]

Hi @sergius02,
Conflicts have been detected against the base branch.
Please resolve these conflicts as soon as you can. Thanks!

[sergius02]

Hi @tdonohue , sorry for the late response, im working on it now but with the migration to the new standalone components i have to do some changes to this PR.

Im facing a problem that i don't know why occurs and don't know how to solve. I've made the ItemPageMetricsFieldComponent standalone adding this to the Component decorator

standalone: true,
imports: [TranslateModule, MetadataFieldWrapperComponent, ItemPageAltmetricFieldComponent]

Then in PublicationComponent and UntypedComponent, i've added to the imports:

  imports: [..., AsyncPipe, TranslateModule, ItemPageMetricsFieldComponent],

Everything seems to be ok, but this error appears in publication.component.html and untyped.component.html

Error: src/app/item-page/simple/item-types/publication/publication.component.html:50:5 - error NG8001: 'ds-item-page-metrics-field' is not a known element:
1. If 'ds-item-page-metrics-field' is an Angular component, then verify that it is included in the '@Component.imports' of this component.
2. If 'ds-item-page-metrics-field' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@Component.schemas' of this component to suppress this message.

[blancoj]

I just want to point out that I was trying to implement this, but instead of for Altmetrics, for Dimensions. I basically cp/pt'd the files that were Altmetric specific, but renamed them and some of the variables/constants in the code to "dimensions." I had it working except that when I left the item page and then came back to the page the badge was gone. The issue came from this method. I thought that I could use _dimensison_embed_init as the method, but not that did not work. That method does not exists in the Dimensions' javascript. I reached out to the community and @sergius02 told me to change this method to this:

private reloadBadge(data: any[]) {
  if (data.find((element) => this.isLoaded(element))) {
    const initClass = '__dimensions_embed';
    const initMethod = 'addBadges';
    window[initClass][initMethod]();
  }
}

Then it worked.

[eulereadgbe]

@sergius02, I've tried this method but for Plumx. The PlumX developer page says to call this method window.__plumX.widgets.init(); but unfortunately if I navigate away from the page and return later, I received a TypeError: window[initClass] is undefined error. I tried replacing the value of initClass above with __plumX.widgets.init but the error persists. Any ideas how to resolve this issue?

[tdonohue]

@sergius02 : This still has merge conflicts. If you have a chance to find a fix prior to 8.0, we can still consider this. Otherwise, if you still need help/support, we'll likely need to reschedule for 9.0 (unless anyone else finds time to help...I won't be available until 8.0 is complete unfortunately).

[eulereadgbe]

I tested this in my local 7_x instance and it worked. It would be nice to also include Dimensions and PlumX metrics. Right now I have no idea how to load the cdn of PlumX to co-exist with Altmetrics here.

[eulereadgbe]

I tested this in my local 7_x instance and it worked. It would be nice to also include Dimensions and PlumX metrics. Right now I have no idea how to load the cdn of PlumX to co-exist with Altmetrics here.

I solved this using the code from SO which was also referenced in this pull request: https://stackoverflow.com/a/42766146. My code now looked like this:

export enum ExternalScriptsNames {
  ALTMETRIC = 'altmetric-embed',
  DIMENSIONS = '__dimensions_badge_embed__',
  PLUMX = 'plumx-details'
}

...

export const ExternalScriptsList: ExternalScript[] = [
  {name: ExternalScriptsNames.ALTMETRIC, src: 'https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js'},
  {name: ExternalScriptsNames.DIMENSIONS, src: 'https://badge.dimensions.ai/badge.js'},
  {name: ExternalScriptsNames.PLUMX, src: 'https://cdn.plu.mx/widget-details.js'},
];

[eulereadgbe]

I tried to use this for PlumX, however, the format for PlumX used this format: <a href="https://plu.mx/plum/a/?doi=10.1371/journal.pone.0056506" class="plumx-details"></a>