Repository: hubmapconsortium/hra-ui
Pull request #1172: Content Pages - HRA API
Author: login: saaivignesh20
Created: 2025-05-13T16:07:18Z | Merged: 2025-05-14T19:17:08Z

This pull request resolves the GitHub issue #1153.

Implemented the HRA API page according to the new design by Libby after discussion on 12-May.


Diff:
diff --git a/apps/humanatlas.io/src/app/app.routes.ts b/apps/humanatlas.io/src/app/app.routes.ts
index 53c781e61e..13efe7b137 100644
--- a/apps/humanatlas.io/src/app/app.routes.ts
+++ b/apps/humanatlas.io/src/app/app.routes.ts
@@ -32,6 +32,13 @@ export const appRoutes: Route[] = [
       data: createYamlSpecResolver('assets/content/3d-reference-library-page/data.yaml', ContentPageDataSchema),
     },
   },
+  {
+    path: 'api',
+    component: ContentPageComponent,
+    resolve: {
+      data: createYamlSpecResolver('assets/content/api-page/data.yaml', ContentPageDataSchema),
+    },
+  },
   {
     path: 'standard-operating-procedures',
     component: ContentPageComponent,
diff --git a/apps/humanatlas.io/src/assets/content/api-page/data.yaml b/apps/humanatlas.io/src/assets/content/api-page/data.yaml
new file mode 100644
index 0000000000..6f1168a27e
--- /dev/null
+++ b/apps/humanatlas.io/src/assets/content/api-page/data.yaml
@@ -0,0 +1,61 @@
+$schema: ../../../app/pages/content-page/types/content-page.schema.json
+title: API
+subtitle: Query and interact with the Human Reference Atlas using Python, JavaScript, SPARQL, REST, and more.
+action:
+  label: Use app
+  url: https://apps.humanatlas.io/api/
+content:
+  - component: PageSection
+    tagline: Overview
+    anchor: overview
+    level: 2
+    content:
+      component: Markdown
+      data: |
+        This API provides programmatic access to data registered to the Common Coordinate Framework. A listing of API endpoints and database schema descriptions with examples are provided.
+
+        - HRA-API:
+          - Production: https://apps.humanatlas.io/api/
+          - OpenAPI Specification: https://apps.humanatlas.io/api/hra-api-spec.yaml
+          - JavaScript Library: [hra-api](https://www.npmjs.com/package/hra-api) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/hra-api?labelColor=%23E6EAF0&color=%23FFC8BC)
+        - HRA-API Client Libraries:
+          - JavaScript: [@hra-api/js-client](https://www.npmjs.com/package/@hra-api/js-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@hra-api/js-client?labelColor=%23E6EAF0&color=%23FFC8BC)
+          - TypeScript: [@hra-api/ts-client](https://www.npmjs.com/package/@hra-api/ts-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@hra-api/ts-client?labelColor=%23E6EAF0&color=%23FFC8BC)
+          - Angular 17+: [@hra-api/ng-client](https://www.npmjs.com/package/@hra-api/ng-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@hra-api/ng-client?labelColor=%23E6EAF0&color=%23FFC8BC)
+          - Python 3.6+: [hra-api-client](https://pypi.org/project/hra-api-client/) &nbsp; ![PyPI](https://img.shields.io/pypi/v/hra-api-client?labelColor=%23E6EAF0&color=%23FFC8BC)
+        - HRA Knowledge Graph (HRA-KG):
+          - Production: https://lod.humanatlas.io
+          - SPARQL Endpoint: https://lod.humanatlas.io/sparql
+        - grlc APIs (SPARQL queries plus OpenAPI endpoints more info):
+          - grlc queries using the HRA-KG SPARQL endpoint: https://grlc.io/api-git/hubmapconsortium/ccf-grlc/subdir/hra/
+          - grlc queries using the Ubergraph SPARQL endpoint: https://grlc.io/api-git/hubmapconsortium/ccf-grlc/subdir/ubergraph/
+          - More queries available at: https://github.com/hubmapconsortium/ccf-grlc/
+
+  - component: PageSection
+    tagline: Deprecated APIs
+    anchor: deprecated-apis
+    level: 3
+    content:
+      component: Markdown
+      data: |
+        - HRA-API v1.x:
+          - Production: https://apps.humanatlas.io/hra-api/
+          - OpenAPI Specification: https://apps.humanatlas.io/hra-api/ccf-api-spec.yaml
+        - CCF-OPENAPI Client Libraries:
+          - JavaScript: [@ccf-openapi/js-client](https://www.npmjs.com/package/@ccf-openapi/js-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@ccf-openapi/js-client?labelColor=%23E6EAF0&color=%23D6E8F8)
+          - TypeScript: [@ccf-openapi/ts-client](https://www.npmjs.com/package/@ccf-openapi/ts-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@ccf-openapi/ts-client?labelColor=%23E6EAF0&color=%23D6E8F8)
+          - Angular 15+: [@ccf-openapi/ng-client](https://www.npmjs.com/package/@ccf-openapi/ng-client) &nbsp; ![npm (scoped)](https://img.shields.io/npm/v/@ccf-openapi/ng-client?labelColor=%23E6EAF0&color=%23D6E8F8)
+          - Python 3.6+: [ccf-openapi](https://pypi.org/project/ccf-openapi/) &nbsp; ![PyPI](https://img.shields.io/pypi/v/ccf-openapi?labelColor=%23E6EAF0&color=%23D6E8F8)
+        - CCF API Sample Notebooks/Vignettes:
+          - Python 3.6+:
+            - Basic Usage: ccf-api-usage.ipynb
+            - Use case walkthrough: ccf-api-usecase.ipynb
+          - JavaScript:
+            - Basic Usage: https://observablehq.com/@cns-iu/ccf-api-documentation-javascript
+            - Use case walkthrough: https://observablehq.com/@cns-iu/ccf-api-usecase-javascript
+        - CCF.OWL v2.3.0:
+          - PURL: https://purl.humanatlas.io/graph/ccf
+          - BioPortal: https://bioportal.bioontology.org/ontologies/CCF
+          - Ontology Lookup Service (OLS): https://www.ebi.ac.uk/ols4/ontologies/ccf
+
+# TODO - Action Button is Pending


Reviews:
user: login: axdanbol
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T16:46:35Z
user: login: axdanbol
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-05-14T19:16:57Z

Review comments:
diff_hunk: @@ -32,6 +32,20 @@ export const appRoutes: Route[] = [
       data: createYamlSpecResolver('assets/content/3d-reference-library-page/data.yaml', ContentPageDataSchema),
     },
   },
+  {
+    path: 'overview-training',
path: apps/humanatlas.io/src/app/app.routes.ts
user: login: axdanbol
body: This has already been moved to `/training`. Please remove
created_at: 2025-05-14T16:46:02Z
author_association: CONTRIBUTOR
path: apps/humanatlas.io/src/assets/content/training-overview/data.yaml
user: login: axdanbol
body: Please remove. It has been moved to `training/data.yaml`
created_at: 2025-05-14T16:46:30Z
author_association: CONTRIBUTOR

PR comments:
user: login: nx-cloud[bot]
created_at: 2025-05-13T16:10:40Z
body: 
View your [CI Pipeline Execution ↗](https://cloud.nx.app/cipes/6824dc063a58926ab5a174ae?utm_source=pull-request&utm_medium=comment) for commit 1c6e7854742ab5ee1cff3d9b4156d9581a9f52e2.

| Command | Status | Duration | Result |
|---------|--------|----------:|--------|
| `nx affected --target=build --parallel=3` | ✅ Succeeded | 1m 5s | [View ↗](https://cloud.nx.app/runs/eUcRUxw69k?utm_source=pull-request&utm_medium=comment) |
| `nx affected --target=test --parallel=3 --ci` | ✅ Succeeded | 51s | [View ↗](https://cloud.nx.app/runs/bDxzEo3syJ?utm_source=pull-request&utm_medium=comment) |
| `nx affected --target=lint --parallel=3` | ✅ Succeeded | 19s | [View ↗](https://cloud.nx.app/runs/wTNHetaDWM?utm_source=pull-request&utm_medium=comment) |
| `nx affected --target=compodoc --configuration=t...` | ✅ Succeeded | 8s | [View ↗](https://cloud.nx.app/runs/U0ieK9BQXH?utm_source=pull-request&utm_medium=comment) |
| `nx-cloud record -- npx nx format:check` | ✅ Succeeded | 3s | [View ↗](https://cloud.nx.app/runs/yKpB7At8Mb?utm_source=pull-request&utm_medium=comment) |

---

☁️ [Nx Cloud](https://cloud.nx.app?utm_source=pull-request&utm_medium=comment) last updated this comment at `2025-05-14 18:09:51` UTC

<!-- NX_CLOUD_APP_COMMENT_END -->
author_association: NONE
user: login: github-actions[bot]
created_at: 2025-05-13T16:11:29Z
body: # :rocket: Preview Deploy Report Updated

✅ Successfully deployed preview [here](https://6824dc32a9abab5f1070af18--hra-ui.netlify.app)
author_association: NONE
user: login: sonarqubecloud[bot]
created_at: 2025-05-14T18:08:04Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=hubmapconsortium_hra-ui&pullRequest=1172) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=hubmapconsortium_hra-ui&pullRequest=1172&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=hubmapconsortium_hra-ui&pullRequest=1172&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=hubmapconsortium_hra-ui&pullRequest=1172&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=hubmapconsortium_hra-ui&pullRequest=1172&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=hubmapconsortium_hra-ui&pullRequest=1172&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=hubmapconsortium_hra-ui&pullRequest=1172)


author_association: NONE