marinebon / infographiqjs Goto Github PK

Hey @bbest. Here's an issue that I think is worth working on - using GitHub Actions to make protected Google Sheets content available for InfographiqJS.

So, the problem that we have faced is that NOAA-owned Google Sheets can't be made visible to the public. This issue has been addressed for Infographiq in the R context using InfographiqR::ocnms_get_sheet().

However, this solution won't work for Javascript-only versions of Infographiq, such as for the Florida Keys IEA or the responsive table. As a work around, we have been using Google Sheets not owned by NOAA for these instances, as we can make them visible to the public.

But I have a feeling that, if Infographiq is to get wide usage within NOAA, they are going to want to use NOAA-owned Google Sheets. So, how to do this?

One straightforward approach would be to use InfographiqR::ocnms_get_sheet (or a slightly altered version of it) within a GitHub Action. On some frequency (once a day/week/whatever), an Action could run that would copy the latest version of a desired protected Google Sheet into a csv that is URL-accessible. That csv could then be read by the Infographiq Javascript.

What do you think?

The issue is:

infographiqJS

ONMS: one table for all svgs

Example noaa-onms/cinms:

• svg_links_cinms.csv
  
  

IEA: one table per svg

Example noaa-iea/fk-esr-info:

• icons to data | fk-esr-info - Google Sheets
  

CINMS fix to one table per svg

cinms fix to work like this for kelp-forest:

Issue:
Tooltip shifted very far left when hovering over icons in fullscreen. Picture below shows issue:
Expected Behavior:

Tooltip is next to the mouse in a fixed location
Issue:

Possible causes:

• justify right when calculating position of tooltip during fullscreen is wrong.

Potential Fixes:

• separate calculation of tooltip position during fullscreen.

We want to embed infographiqJS instances, like info-fk-iea, into the Drupal IEA website, but they have multiple calls to JQuery there preventing it from properly loading.

Let's document the exact error messages from the Google Chrome JS Console here, and research ways of referencing jQuery to work.

Ideally we can surgically reference jQuery so we don't have to rebuild the whole Drupal IEA site.

Here's how I was previously able to get it working in jQuery, but apparently that broke their navigation menu:

From: Ben Best [email protected]
Date: Wed, Mar 24, 2021 at 3:11 PM
Subject: Re: Interactive pieces on IEA site
To: Avi Litwack - NOAA Federal [email protected]
Cc: Ellen Spooner - NOAA Affiliate [email protected], Jai Ranganathan [email protected]

Ok, that moved past the original error, then produced $ is not a function, which led me to this fix:

https://www.drupal.org/node/756722#using-jquery

(function ($) {
  // All your code here
}(jQuery));

And VOILA! The Infographiq-test works 🎉

Which fields are necessary? Which can be swapped out as arguments in link_svg()?

• svg:
• icon: only required field
• title:
• link:
• not_modal: