Make the HighCharts work in new Article Pages

[bryanpizzillo]

Issue Description

The HighCharts do not work following the update to the NCIDS style for Article pages and they must work. The HighCharts must not be added to all pages, so whatever solution is taken to make them work must only affect the pages the HighCharts are on. This solution should be quick, only apply to Highchart pages, and can be made with the expectation that the solution can be improved upon in the future, following R4.2.

Technical Notes

Webpages with Highcharts:

URL Trail	Embed UUID for Migration
/about-nci/budget/fact-book/data/program-structure	2eb6563f-ca7f-4e80-a6a2-ff7d86cddfde
/about-nci/budget/fact-book/data/extramural	8f8303e3-7107-4ce6-924a-d424a804c50e
/about-nci/budget/fact-book/data/obligations	a516f1f6-3d1f-497a-ab89-c5632b6a9c7a
/about-nci/budget/fact-book/data/management-fund	9dbe5458-6cbe-418c-968c-859d76e05118
/about-nci/budget/fact-book/extramural-programs/rpg (2 highcharts)	8198eb3c-a21c-4f31-8cdf-7aa8e4be0e53 1d03e058-f5a9-45fa-acbc-5aef8854d4e1
/about-nci/budget/fact-book/extramural-programs/nrsa	8adc95ce-5899-4a96-95bf-26970ec97ca3
/about-nci/budget/fact-book/extramural-programs/k-awards (2 highcharts)	ef5d5ba9-f42a-4781-90c1-e378989f24a1 e8605510-59ec-4282-a1bd-d1fbf433557a
/about-nci/budget/fact-book/extramural-programs/grant-contract-awards	badec603-f877-4691-b0c5-f75111e1b7f2
/about-nci/budget/fact-book/historical-trends/aids-funding	ad87f1da-cfeb-4821-ab85-da4d602afe81
/about-nci/budget/fact-book/historical-trends/bypass-appropriations	2c3f7767-96d0-4c46-9bef-c3e00bbb6f29
/about-nci/budget/fact-book/historical-trends/comparison	fd13d6a6-b04d-4220-b53c-c7aad8ae52f3
/about-nci/budget/fact-book/cancer-moonshot/moonshot-obligations	9834f764-171d-4f70-a272-0fcce37a93ae
/about-nci/budget/fact-book/historical-trends/extramural-intramural-rms	abf2776a-70f8-40de-b550-e9d01c2f9c24

Note: https://www.cancer.gov/about-nci/budget/fact-book/extramural-programs/rpg has a highchart file, but it is not active on the front end. The title of the highchart is "NCI-Chart__rpg-cost-per-award" and the UUID is 97a84f95-ff55-4855-907d-a3b50f33ed3c. This should be reviewed to ensure that the updates don't add this back to the front-end display, while keeping the file around.

SOP for Updating Factbook Charts

SOP - Updating Factbook Charts.docx

Acceptance Criteria

• All Factbooks will appear on the test environments the same as they appear on production
• All Factbooks will be migrated to the new version from this solution with a migration script added to the PR for this ticket

[bryanpizzillo]

Analysis

We looked through a few options

1. Import charts script as <script> tag in raw html content.
   • Needs least Drupal changes and no migration script.
   • Cache fingerprinting could not be used, so will introduce caching issues with our JS cache ages.
   • The 16 raw html blocks would need to be edited by hand on launch and any www ode/acsf deployments
2. Dynamically import script in a cgdp-legacy-highchart component.
   • This option does not require Drupal changes, Content Updating issues or migration script.
   • Caching fingerprint could be hacked to not have caching issue, but there would be slight performance issues for repeat visitors.
   • Might not work at all. (ESModule vs CommonJS)
3. Make a new Raw HTML template for high charts.
   • Does not require content updates.
   • Allows Drupal to control file dependencies and cache fingerprinting.
   • Needs multiple options for raw html embedding
   • Requires Drupal WYSIWYG changes
   • Requires migration script.
4. Make new block_content type for high chart specifically
   • Requires lots of Drupal changes
   • Requires content creation and removal for migration
   • Allows raw html to say "simple"
   • Allows Drupal to control file dependencies and cache fingerprinting.
   • Could make it "easier" to edit factbook charts.

We picked 3.

Tasks

• Make legacy-highcharts.js entrypoint
  • This should only include Libraries/charts
  • The init function should call charts()
  • Import the scss
• Add legacy-highcharts.js & legacy-highcharts.css to ncids_trans library
  • Make it depend on jqueryandui library
  • We may need to care about order... IDK (e.g., make it also depend on ncids-innerpages, etc)
• Make new view mode for block_content named legacy_highcharts
• Make a new template for raw html blocks so you can attach_library named block-content--raw-html--legacy-highcharts.html.twig (check on raw-html vs rawhtml)
  • this should just output {{content}} after your attach_library call.
• Add the legacy_highcharts view mode available to the new block_content_content_block button.
• Update YAML for embeds to use new display mode
• Make migration script that if the UUID matches a highchart raw html you change the displaymode.