Dataset Page: Citation Styles Integration

[ChengShi-1]

What this PR does / why we need it:

Populate information to the Styled Citation Modal, so user could select a styled citation and copy-paste from the modal

Which issue(s) this PR closes:

• Closes Dataset: Styled Citation Modal #796 Feature Request/Idea: an additional button to copy the citation text to the clipboard #767

Special notes for your reviewer:

• cslStyle.json is a static bundled JSON file of 2,595 hardcoded {slug, label} entries

• citeproc did the style conversion in two spieces:

  • cslStyleFetcher.ts fetches the actual style's CSL XML definition (the rules for how that particular style formats citations) live from cdn. jsdelivr.net/gh/citation-style-language/styles@master/{slug}.csl— this is a different repo/CDN than the static JSON list above, and it's a real network call, cached in memory (styleXmlCache).
  • citeprocEngine.ts is where citeproc.js actually does the conversion: it constructs a CSL.Engine fed by that style XML + locale XML + the dataset's CSL-JSON metadata (title, authors, date, etc.), then calls engine.makeBibliography(), which is citeproc.js's own rendering engine applying the style's rules to the JSON data and producing the formatted HTML citation string.

Suggestions on how to test this:

screenRecordingStyleCitation.mov

Does this PR introduce a user interface change? If mockups are available, please link/include them here:

Add a copy icon in front of "Cite Dataset"

Is there a release notes or changelog update needed for this change?:

yes

Additional documentation:

[coveralls]

coverage: 97.392% (-0.02%) from 97.414% — styledCitation into develop

[github-actions]

• High – Unsanitized remote HTML enables XSS. ViewStyledCitationModal.tsx:68 injects citeproc output with dangerouslySetInnerHTML. The formatting rules are fetched from a mutable third-party master branch at cslStyleFetcher.ts:1. Sanitize the generated HTML (DOMPurify is already installed) and pin trusted style/locale revisions.

• Medium – Dataset changes can expose/copy the previous dataset’s citation. useDefaultStyleCitation.ts:34 starts the new request without clearing existing citation state. If loading or formatting the new dataset fails, the previous text remains and becomes enabled when fetching finishes. Clear all citation state whenever the repository, dataset ID, or version changes.

• Medium – Failed CSL retrieval leaves the modal permanently loading. useStyledCitation.ts:25 treats every null/malformed citation as an indefinite loading state. handleGetCitation returns null on failure at CitationDownloadButton.tsx:46, so users never see an error or retry state.

• Low – The bundled human-readable style labels are discarded. cslStyleOptions.ts:25 sets label to style.slug instead of style.label, producing names such as academy-of-management-review and degrading search/display despite the JSON containing proper labels.

• Low – New citation-copy controls are not keyboard operable. CopyToClipboardButton.tsx:42 uses a clickable <span role="button"> without tabIndex or Enter/Space handling. Use a native <button disabled={...}>.

[Copilot]

Copilot was unable to review this pull request because the user who requested the review has reached their quota limit.

[github-actions]

• High — citeprocEngine.ts:23: retrieveLocale ignores Citeproc’s requested locale and always returns the preloaded en-US XML. Locale-specific styles will therefore produce English or otherwise incorrect citations. Load/return the requested locale and test a non-English style.

• Medium — cslStyleFetcher.ts:2: Production citation rules and locales are fetched from mutable @master URLs. Output can change or break without an application release, and a compromised upstream becomes runtime input. Pin immutable commits/releases or bundle the assets.

• Medium — .storybook/main.ts:17: Removing staticDirs: ['../public'] stops Storybook from serving locale files and other public assets, causing affected stories/tests to issue 404s or render untranslated keys. Restore the setting.