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

Updated HRA EUI and organ-info web components to latest version #3577

Merged
merged 4 commits into from
Oct 22, 2024
Merged

Updated HRA EUI and organ-info web components to latest version #3577

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8d6e5ea
Updated HRA EUI and organ-info web components to latest version
bherr2 Oct 22, 2024
01fd981
Updated CCFOrganInfo to use the latest HRA organ-info
bherr2 Oct 22, 2024
d8fc22c
fix incorrect CCFOrganInfo types and pytest failures
NickAkhmetov Oct 22, 2024
666c359
fix groups_token
NickAkhmetov Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG-update-hra.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated HRA EUI and organ-info web components to latest version
18 changes: 7 additions & 11 deletions context/app/static/js/components/HRA/CCFOrganInfo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,35 +8,32 @@ import { HRAEvent } from './types';

interface CCFOrganInfoProps {
uberonIri: string;
remoteApiEndpoint?: string;
remoteApi?: string;
dataSources?: string;
onNodeClick?: (event: HRAEvent) => void;
onSexChange?: (event: HRAEvent) => void;
onSideChange?: (event: HRAEvent) => void;
}

interface RawOrganProps {
'organ-iri': string;
'remote-api-endpoint': string;
'use-remote-api': string;
'data-sources': string;
nodeClick?: (event: HRAEvent) => void;
sexChange?: (event: HRAEvent) => void;
sideChange?: (event: HRAEvent) => void;
}

const defaultRemoteApiEndpoint = 'https://apps.humanatlas.io/hubmap-hra-api/v1';
const defaultDataSources = '["https://apps.humanatlas.io/api/ds-graph/hubmap?token="]';

const HRAOrganScript = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/wc.js';
const HRAOrganStyles = 'https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/styles.css';
const HRAOrganScript = 'https://cdn.humanatlas.io/ui/ccf-organ-info/wc.js';
const HRAOrganStyles = 'https://cdn.humanatlas.io/ui/ccf-organ-info/styles.css';

const OrganInfo = reactifyWc('ccf-organ-info', {
forceEvent: ['nodeClick', 'sexChange', 'sideChange'],
}) as React.FC<RawOrganProps>;

function CCFOrganInfo({
uberonIri,
remoteApiEndpoint = defaultRemoteApiEndpoint,
remoteApi = 'true',
dataSources = defaultDataSources,
onNodeClick,
onSexChange,
onSideChange,
Expand All @@ -47,8 +44,7 @@ function CCFOrganInfo({
return (
<OrganInfo
organ-iri={uberonIri}
use-remote-api={remoteApi}
remote-api-endpoint={remoteApiEndpoint}
data-sources={dataSources}
nodeClick={onNodeClick}
sexChange={onSexChange}
sideChange={onSideChange}
Expand Down
3 changes: 1 addition & 2 deletions context/app/static/js/pages/Iframe/Iframe.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,7 @@ function Switch({ organs_count }) {
return (
<ccf-organ-info
organ-iri={iri}
use-remote-api="true"
remote-api-endpoint="https://apps.humanatlas.io/hubmap-hra-api/v1"
data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap?token="]'
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap?token="]'
data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap"]'

Do we need the empty token param?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It is preferable to keep the ?token= for caching purposes as the EUI uses the same data sources string and will be cached across both products.

/>
);
default:
Expand Down
19 changes: 10 additions & 9 deletions context/app/templates/special-pages/ccf-eui.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,24 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="utf-8">
<title>HuBMAP CCF Exploration User Interface (CCF-EUI)</title>
<base href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/">
<title>HuBMAP HRA Exploration User Interface</title>
<base href="https://cdn.humanatlas.io/ui/ccf-eui/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="icon" type="image/png" href="/favicon.png">
<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 rel="stylesheet" href="styles.css">
<link href="styles.css" rel="stylesheet">
<script src="wc.js" async></script>
</head>

<body class="mat-typography">
<body>
<ccf-eui
hubmap-token="{{ groups_token }}"
use-remote-api="true"
remote-api-endpoint="https://apps.humanatlas.io/hubmap-hra-api/v1"
logo-tooltip="HuBMAP Data Portal"
home-url="https://portal.hubmapconsortium.org/"
data-sources='["https://apps.humanatlas.io/api/ds-graph/hubmap?token={{groups_token}}"]'
theme="hubmap"
></ccf-eui>
</body>

Expand Down
5 changes: 3 additions & 2 deletions context/app/templates/special-pages/organ.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{% extends 'base-pages/react-content.html' %}
{% block extra_stylesheets %}
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500&amp;display=swap" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/styles.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/gh/hubmapconsortium/ccf-ui@3/organ-info/wc.js" async></script>
<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" async></script>
{% endblock %}
Loading