consolidate functionality across infographic instances: ONMS, IEA, ... about infographiqjs

[bbest]

Considerations:

1. Enlisting help from the likes of Jenn Brown to populate content, who's used to entering all necessary information into a single Google sheet per project across SVGs like noaa-onms/sanctsound:

• • sanctsound website content - Google Sheets
    

2. Generalization of infographiqJS in this form:
   

3. Functionality of CINMS for all future use of infographiqJS:

• svg: explicit mention here allows for multiple SVGs in the same table to be associated with links to modal windows
• id -> icon: per SVG icon identifier
• title: populates the modal title
• link: specifies destination of clicking icon or toc.
  • If exists, then the destination URL is constructed by {modal_url_pfx}+{link} is made explicit so you can have all kinds of scenarios, like: 1) different icon names go to the same modal content; or 2) maybe the same icon names in different SVGs go to the same modal content.
  • If this column is missing in the CSV, then presume a simpler fk-esr-info method whereby the link to the modal window is constructed by {modal_url_pfx}+{icon}.html.
  • In the above scenarios, modal_url_pfx could be:
    • "": empty, so use just {link} or {icon}.html; {link} would then be able to serve modals from full URLs from entirely different locations (eg Github repos, etc).
    • "./modals/": a common folder, so can drop that part from the {link}
    • "https://noaa-iea.github.io/fk-esr-info/modals/": a full external URL prefix common across modals, such as for fk-esr-info modals hosted on Drupal CMS
• not_modal: allows for clicking to a new page (vs opening the modal content), such as going from CINMS Ov`rview to a habitat like Kelp Forest

Now maybe we could have some default functionality or argument values to not require fields like:

• svg: excluding in the table, defaults to apply to any icon without filtering by svg
• not_modal: excluding in the table,

And what about these arguments in infographiqJS link_svg()?:

• modal_url_pfx: This prefix is a hack to prepend a full URL (such as for Drupal IEA), but it would then apply to ALL modal links. Default to blank "" or NULL.
• modal_id: 'modal'
  This defines the HTML id of the modal html content to be update when clicked. The modal html is created in
  infographiq.js#L18 but hardcoded and
  gets updated in infographiq.js#L216-L226 with the variable value. Let's drop the argument and hard-code throughout for simplicity.

FYI @superjai, @mspector13

[superjai]

Hey @superjai, @mspector13 - job completed. I have modified the infographic javascript to make the changes listed above. I have also ported all of cinms to reflect the new javascript as well as the new R organizational structure.

I have also made changes to the organizational structure of the two R repos, with a recommendation that one of the repos (infographiqR) be deleted (details in this issue).

Details to changes to the link_svg function in the infographiq.js file:

• Lots of error checking added, with error messages going to browser console, so that future failures in link_svg will be easier to fix. For example, if any of the four required parameters for link_svg are not defined, that is reported as an error message.
• csv_rows added as an optional parameter. This parameter allows a subset of rows to be selected from the csv for the generation of the infographic (based upon rows with matching values in the optional svg column of the csv).
• Hyperlinks for modal windows made much more flexible. Here are the options:
  • If link provided in csv for modal window, that is used as link.
  • If no link provided in csv for modal window, code uses icon name as link name for modal window
  • If modal_url_pfx is defined, that then the link is modal_url_pfx + link
• not_modal is an optional value pulled from the csv file
• modal_id: this parameter has been removed from the function with the parameter value of 'modal' hard-coded instead

[bbest]

I'm seeing the suggestion that all 4 arguments are required, otherwise get "ERROR" in

infographiqJS/libs/infographiq_latest/infographiq.js

Lines 26 to 33 in 173afd2

	function link_svg({svg, csv, svg_id, toc_id, hover_color = 'yellow', width = '100%',
	height = '100%', modal_url_pfx, toc_style = "list", colored_sections = false,
	section_colors = ['LightGreen', 'MediumOrchid', 'Orange'], text_toggle = false,
	csv_rows} = {}) {
	if (svg == null | csv == null | svg_id == null | toc_id == null){
	console.error("ERROR! Values are missing for the required parameters in the function link_svg: svg, csv, svg_id, toc_id.");
	}

Ideally, we only require these two arguments:

• svg
• csv

Then these could be optional parameters:

• svg_id = "svg"
• toc_id = "toc"

[bbest]

• csv_rows -(rename)-> svg_filter: value to filter the column svg by rows in the table csv for subsetting the icons to link ; default is NULL so all rows are used

[superjai]

Hey @bbest: finished.

1. Requested changes to infographiq javascript made
2. Functions moved from onmsR to infographiqR
3. Cinms repo updated