58 datacite badge #72
Conversation
amadulhaxxani
commented
Nov 5, 2025
amadulhaxxani
commented
- Adding DataCite badge in simple item view
- conditionally rendering the badge if appConfig.datacite has value
- loading the scripts dynamically only when appConfig.datacite has value
- tests included
adding config for datacite
Added a new component for datacite badge
translations for datacite
adding datacite in untyped item
added basic tests for testing initial component
tests for item handling
testing extraction of DOI
adding tests for badge visibility
There was a problem hiding this comment.
Pull Request Overview
This PR adds DataCite badge functionality to display citation metrics for items with DOIs. The badge is integrated into the untyped-item component and uses external DataCite scripts to render metrics.
- Adds a new
DataciteBadgeComponentthat dynamically loads DataCite scripts and displays badge for items with DOIs - Integrates the badge component into the item display page via the untyped-item template
- Adds configuration support for enabling/disabling the badge and specifying the DOI metadata field
Reviewed Changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 7 comments.
Show a summary per file
| File | Description |
|---|---|
| src/config/app-config.interface.ts | Adds optional datacite configuration property for metadata field name |
| src/assets/i18n/en.json5 | Adds English translation for DataCite badge label |
| src/assets/i18n/cs.json5 | Adds Czech translation for DataCite badge label |
| src/app/item-page/simple/item-types/untyped-item/untyped-item.component.html | Integrates DataCite badge component into item display |
| src/app/item-page/item-page.module.ts | Imports and declares DataciteBadgeComponent, adds CUSTOM_ELEMENTS_SCHEMA |
| src/app/item-page/datacite/datacite-badge.component.ts | Implements DataCite badge component with DOI extraction and script loading |
| src/app/item-page/datacite/datacite-badge.component.spec.ts | Comprehensive unit tests for DataciteBadgeComponent |
| src/app/item-page/datacite/datacite-badge.component.scss | Styles for DataCite badge layout |
| src/app/item-page/datacite/datacite-badge.component.html | Template for DataCite badge display |
Comments suppressed due to low confidence (1)
src/app/item-page/datacite/datacite-badge.component.spec.ts:11
- Unused import exp.
import exp from 'constants';
making fields public
copilot fixes
| try { | ||
| await this.loadScript('https://unpkg.com/vue@^2/dist/vue.min.js'); | ||
| await this.loadScript('https://unpkg.com/@webcomponents/webcomponentsjs@2.0.0/webcomponents-loader.js'); | ||
| await this.loadScript('https://unpkg.com/data-metrics-badge/dist/data-metrics-badge.min.js'); |
There was a problem hiding this comment.
Any benefits to loading the scripts this way? Why not have it as a dependency in package.json?
There was a problem hiding this comment.
I don't think that we had the package available
or maybe I missed it somewhere...
you mean installing the package with npm yes?
There was a problem hiding this comment.
Okay you are right
I don't know why I just relied on that one link related to datacite
I will implement it using the dependency in package.json :(
There was a problem hiding this comment.
I tried implementing it using the npm package but it's somehow not possible. Maybe some engineering skills will be required but I am not sure if we need to waste this much time or not. I already wasted some in trying to find some alternative or making it work
Some nice reason from copilot for this approach are below:
- The badge depends on Vue 2 and a Web Components polyfill; importing it via the Angular build (SSR-enabled) triggers “window/document” usage on the server and breaks Angular Universal. Loading scripts in ngAfterViewInit under isPlatformBrowser avoids SSR errors.
- The package is published primarily as a UMD/minified bundle for <script> usage, not a clean, tree-shakeable ESM module with typings; bundling it directly bloats the main bundle and complicates TypeScript/Angular builds.
- Script order matters (Vue → webcomponents-loader → data-metrics-badge). Loading them explicitly ensures correct sequencing without wrestling with the Angular/webpack pipeline.
- This approach keeps our app bundle lean and defers loading until a DOI is present and the badge is shown, improving performance.
- It also isolates potential version conflicts (Vue 2 in an Angular app) and avoids polluting the global build
Updated AppConfig interface and related component code to use 'dataciteBadgeField' instead of 'datacite' for clarity and consistency in Datacite badge configuration.
Changed the @types/d3-dispatch dependency from 3.0.6 to 3.0.2 in package.json. This may address compatibility or stability issues with the newer version.
