search

hubmapconsortium / portal-ui

HuBMAP Data Portal front end
https://portal.hubmapconsortium.org
MIT License
12 stars 2 forks source link

iframe support for visualizations in publication pages #3588

Open bherr2 opened 3 weeks ago

bherr2 commented 3 weeks ago

We would like to formally request a new feature to be added to the publications page wherein individual visualizations can be specified as HTML to be embedded as an iframe. It would just be an additional way to specify visualizations beyond the current vitessce support. We will use this to create custom EUI and CDE visualizations for specific publications. One question was how big of iframe, it should be just as big as any other visualization on the page and the html code in the iframe should just fit to that size.

CC @katyb @ngehlenborg

NickAkhmetov commented 3 weeks ago

This request appears technically feasible; since iframes are HTML elements, markdown supports inline HTML, and our vignette descriptions are loaded in from the markdown files hosted in Globus, including them in the description should work with minimal additional development.

In terms of sizing, the current visualization containers on the portal get a height of 600 pixels when not expanded to the full screen size, and are given as much horizontal space as would be proportional; e.g. vitessce's visualizations are 1200x600px on publication pages such as this one.

Conceptually, the main concern embedding iframes in publication descriptions raises for me is guaranteeing that the linked resources will remain published/visible/relevant since they're externally hosted - i.e. link rot. For the Vitessce visualizations currently present on the portal's publications, both the configuration and the requisite data for the visualization live in Globus (i.e. within HuBMAP infrastructure). On the other hand, if we embed an iframe, we can only trust a data provider's word that the linked content won't dramatically change over time, and I'm not aware of any safeguards we could put into place to protect against this phenomenon. If this is a risk that the consortium is willing to take, we can proceed.

bherr2 commented 3 weeks ago

Ok, yes, the sizing should be sufficient. Essentially targeting 1200x600, but we'll make sure the visualizations are flexible either way.

As far as link rot, as a core component of the HuBMAP project, I can say that we will ensure the code and data we contribute will be properly maintained to the best of our abilities. It sounds like you need an official OK from HuBMAP leadership. I'll setup an email chain shortly.

bherr2 commented 3 weeks ago

Also, to be sure, we don't want iframes in the description, we want another way to specify individual visualizations, via an HTML snippet embedded in an iframe. ie here:

image

bherr2 commented 3 weeks ago

I will add a few html snippet examples for testing purposes. First is the EUI (this shows all kidney data with a rui location in hubmap):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>EUI Web Component</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
    <link href="https://cdn.humanatlas.io/ui/ccf-eui/styles.css" rel="stylesheet" />
    <script src="https://cdn.humanatlas.io/ui/ccf-eui/wc.js" defer></script>
  </head>
  <body style="margin: 0">
    <ccf-eui
      base-href="https://cdn.humanatlas.io/ui/ccf-eui/"
      header="false"
      data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap"]'
      filter='{"ontologyTerms": ["http://purl.obolibrary.org/obo/UBERON_0002113"]}'
    >
    </ccf-eui>
  </body>
</html>
bherr2 commented 3 weeks ago

html snippet which shows the organ information web component (might be useful for showing the tissue blocks in a publication):

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>EUI Organ Info Web Component</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet" />
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet" />
    <link href="https://cdn.humanatlas.io/ui/ccf-organ-info/styles.css" rel="stylesheet" />
    <script src="https://cdn.humanatlas.io/ui/ccf-organ-info/wc.js" defer></script>
  </head>
  <body style="margin: 0">
    <ccf-organ-info
      base-href="https://cdn.humanatlas.io/ui/ccf-organ-info/"
      organ-iri="http://purl.obolibrary.org/obo/UBERON_0002113"
      data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap"]'
    >
    </ccf-organ-info>
  </body>
</html>