UD integration

[lewisjared]

Description

We need a way to integrate the Unified Dashboard into the REF website. This issue is a discussion to figure out how we can best achieve that.

The metric bundles used by the UD will be generated via the API. The query parameters to this endpoint are still up for debate, but assume that a metric bundle can be created via a GET request. The URL for this query should be static and publicly accessible. The dimensions that are included in this bundle are still being finalised and may be different for different pages (for example each realm might have a page and a portrait plot).

Since we have built a JSON schema for our metric bundles they will be strongly typed which makes it significantly easier to reason about.

Integration

Static JS + HTML

The REF website is a typescript, react application rather than static JS + HTML which is how the UD has been created in the past. There are many approaches to mixing the two. We could serve the JS + HTML as a custom page within the REF, but that might add some complexity and lead to inconsistent styling and layouts.

IFrame

We could use an Iframe to embed a UD inside a portal page. This would ensure consistent layout, but we would

React Component

Alternatively, we could create a React component to encapsulate the UD. This would enable the deepest integration into the portal, as additional parameters could be passed to the UD.

Ideally, the component would pass the information in a metric bundle that decouples the component from the fetching of the bundle from the display. The portal already includes an autogenerated SDK which makes it easier to query the API. That would create a reusable component.

In a perfect world we would publish this component to npm, but that might be out of scope for the next few months.

Inset HTML

Currently when you click on a cell in the portrait plot it takes you to a different URL. @minxu74 Can you describe how you currently do that? Is that using an output bundle?

In our case we might need to redirect to an absolute URL, but those can be generated via the API and included where needed.

[minxu74]

@lewisjared the urls by the clicking cells are obtained by an url template using the dimension names in the DIMENSIONS section of the metric bundle. The template is saved in a setting json with other settings for the default behaviors. For example, the url template for ILAMB is: (the 0,1,2 represent the three level structures of metrics)

const linkTemplate = "{metric.0}/{metric.1}/{metric.2}/{metric.2}.html?model={model}&region={region}";

The setting json is:

udcJsonLoc	"scalar_database.json"
udcDimSets	
x_dim	"model"
y_dim	"metric"
fxdim	
region	"global"
statistic	"Overall Score"
udcScreenHeight	0
udcCellValue	1
udcNormType	"standarized"
udcNormAxis	"row"
logofile	"None"

[minxu74]

UD heavily depends on the tabultor.js (https://tabulator.info/) which has the reactJS version https://github.com/ngduc/react-tabulator. So I am interested in porting the UD into the react framework. But I need help. :)

[lewisjared]

Ok that settings.json might be a useful indication for some of the key parameters.

I'm most familiar with https://tanstack.com/table/latest which is a very popular dependency and it looks like it has a very similar pattern.

[lewisjared]

To get started with this I'm going to first get the types working for the Metric bundle. Then I can have a go at wrapping this up. I bet most of the logic in the UD is currently in handling the metrics bundles and associated edge cases?

[minxu74]

Yes, UD mainly handles the metric bundles, but it can connect to other artifacts in output bundles to provide an entry to other results related to the metric values. @lewisjared please let me know if anything I can help.