Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iframe support for visualizations in publication pages #3588

Open
bherr2 opened this issue Nov 1, 2024 · 6 comments
Open

iframe support for visualizations in publication pages #3588

bherr2 opened this issue Nov 1, 2024 · 6 comments
Labels
enhancement New feature or request

Comments

@bherr2
Copy link
Member

bherr2 commented Nov 1, 2024

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
@bherr2 bherr2 added the enhancement New feature or request label Nov 1, 2024
@NickAkhmetov
Copy link
Collaborator

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
Copy link
Member Author

bherr2 commented Nov 1, 2024

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
Copy link
Member Author

bherr2 commented Nov 1, 2024

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
Copy link
Member Author

bherr2 commented Nov 1, 2024 •
edited
Loading

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
Copy link
Member Author

bherr2 commented Nov 1, 2024

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>

@ngehlenborg
Copy link
Member

@NickAkhmetov @lchoy Per discussion in 12/11/2024 HIVE PI call, a desirable delivery date for iframe support in publication pages would be in February 2025.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@ngehlenborg @NickAkhmetov @bherr2