Make place holder for the quality service graphic in the portal metrics view

[robyngit]

• Add a place for the new graphic to display on the metrics tab in portals, along with any styling that's required.
• The portal uses statsView to display metrics, which is also used for the user profile. The quality service graphic should only appear on the metrics page, and not on user profiles.
• The graphic should appear at or close to the top of the current sections within the metrics view.
• @gothub will provide a sentence or two to go along with the the figure.

Example graphic:

Relates to issue #1116

[gothub]

Here is a first pass for the text:

Metadata Quality

This graph shows the quality scores for all metadata viewable by this portal, based on
the DataONE FAIR Quality Suite. The FAIR suite evaluates metadata based on these
criteria: Finable, Accessible, Interoperable, Reusable.

[laurenwalker]

We've talked about not using the word "Quality" anymore, since it has some negative connotations (e.g. if I have low scores, is my research of low quality?) So let's replace that with something like "Metadata Assessment" or "Metadata Completeness"

Also, with some minor wording changes:

Metadata Assessment

This graph shows the assessment score for all metadata in this portal, based on
the DataONE FAIR Suite. The FAIR suite evaluates metadata based on these
criteria: Findable, Accessible, Interoperable, Reusable.

[robyngit]

@gothub, this should be ready to go! Here's how I set it up...

• To display the metadata assessment placeholder in the portals metrics tab, just change hideMetadataAssessment to false in the PortalMetricsView https://github.com/NCEAS/metacatui/blob/97e3eee6a144ee8dbf4099089c66c3902d5f02e4/src/js/views/portals/PortalMetricsView.js#L130-L132

• There's a spot for a listener, if needed, in StatsView.render() https://github.com/NCEAS/metacatui/blob/97e3eee6a144ee8dbf4099089c66c3902d5f02e4/src/js/views/StatsView.js#L92-L97

• Then there's a starter function here, which for now just inserts the example figure that you sent: https://github.com/NCEAS/metacatui/blob/97e3eee6a144ee8dbf4099089c66c3902d5f02e4/src/js/views/StatsView.js#L126-L137

  Here's how it looks:

[gothub]

@robyngit thanks - this is really helpful!

[gothub]

@robyngit Should I load the image with an xhr in Stats.js? How can I load the image with an XHR request? Should I use Image(), or something like LocalStorage? Or is there some other way to preload the image dynamically? @laurenwalker what would you recommend for preloading an image in Stats.js and then displaying in StatsView.js?

[laurenwalker]

@gothub - Does the auth token need to be sent with the request for the image?

[laurenwalker]

If an auth token doesn't need to be sent, you can just create an img HTML element and make the src the URL of the graph image. If you need to send an XHR in order to send the auth token, then here is an example I Googled that looks like it would work well:

https://gist.github.com/santisbon/a7c221780b528bd3ebb8

[gothub]

@laurenwalker thx for looking this up. My concern is that I assumed img.src should only be used for static content, as the image I'm loading is being returned from a service url, and could certainly return an error status, requiring an appropriate error msg or image to be displayed.

Regarding the REST endpoint, i.e. 'https://.../scores?collection=some pid&suite=FAIR.suite.1', what do you recommend for the requested media type: 'application/octet-stream' or 'image/jpeg'? A jpeg image will be returned in either case, I just couldn't google a recommendation for this.

[laurenwalker]

Ah ok, yeah a XHR makes the most sense in this case. If the response will be a jpeg image, I would think image/jpeg would be the most appropriate.

[mbjones]

@gothub Why are you returning jpeg rather than PNG? PNG is a far superior format for line drawings like our graphs.

[gothub]

@mbjones I'll update the R script that creates the graphic to use PNG.