frontend curie expansion experiment

frontend/package.json

@@ -12,6 +12,7 @@
     "test:e2e": "playwright test"
   },
   "dependencies": {
+    "@biopragmatics/curies": "^0.1.1",
     "@floating-ui/dom": "^1.6.3",
     "@fortawesome/fontawesome-svg-core": "^6.5.1",
     "@fortawesome/free-brands-svg-icons": "^6.5.1",

frontend/src/main.ts

@@ -12,7 +12,8 @@ import "wicg-inert";
 import "@/global/icons";
 import "@/global/meta";
 import "normalize.css";
-import "@/global/styles.scss"; /** keep these last so they take priority */
+import "@/global/styles.scss";
+import { initCurieConverter } from "@/util/url";
 
 groupLog("Env variables", import.meta.env);
 
@@ -48,6 +49,7 @@ if (new URL(window.location.href).hostname.endsWith("monarchinitiative.org")) {
   app.use(VueGtag, { config: { id: "G-TWM5ED4QJB" } }, router);
 }
 
+
 (async () => {
   /** mock api */
   if (
@@ -62,6 +64,8 @@ if (new URL(window.location.href).hostname.endsWith("monarchinitiative.org")) {
     await setupWorker(...handlers).start();
   }
 
+  await initCurieConverter();
+
   /** start app */
   app.mount("#app");
 })();

frontend/src/pages/node/AssociationsTable.vue

@@ -71,6 +71,12 @@
       <span v-else class="empty">No info</span>
     </template>
 
+    <template #original_subject="{ row }">
+      <AppLink :to="expandCurie(row.original_subject)">
+        {{ row.original_subject }}
+      </AppLink>
+    </template>
+
     <!-- button to show details -->
     <template #details="{ cell, row }">
       <AppButton
@@ -128,6 +134,7 @@ import type { Cols, Sort } from "@/components/AppTable.vue";
 import { snackbar } from "@/components/TheSnackbar.vue";
 import { useQuery } from "@/composables/use-query";
 import { getBreadcrumbs } from "@/pages/node/AssociationsSummary.vue";
+import { expandCurie } from "@/util/url";
 
 type Props = {
   /** current node */
@@ -244,6 +251,7 @@ const cols = computed((): Cols<Datum> => {
         sortable: true,
       },
       {
+        slot: "original_subject",
         key: "original_subject",
         heading: "Original Subject",
         sortable: true,

frontend/src/util/url.ts

@@ -1,3 +1,5 @@
+import init, {Converter, getOboConverter, getBioregistryConverter} from "@biopragmatics/curies";
+
 /** is url absolute (as opposed to relative) */
 export const isAbsolute = (url = ""): boolean =>
   ["http:", "https:", "ftp:", "mailto:"].some((prefix) =>
@@ -24,3 +26,43 @@ export const getUrl = (
 type KeysMatching<T, V> = {
   [K in keyof T]-?: T[K] extends V ? K : never;
 }[keyof T];
+
+const curieMap: Record<string, string> = {
+    "MONDO": "http://purl.obolibrary.org/obo/MONDO_",
+    "HP": "http://purl.obolibrary.org/obo/HP_",
+    "GO": "http://purl.obolibrary.org/obo/GO_",
+    "CL": "http://purl.obolibrary.org/obo/CL_",
+    "OMIM": "http://purl.obolibrary.org/obo/OMIM_",
+    "NCIT": "http://purl.obolibrary.org/obo/NCIT_",
+    "DOID": "http://purl.obolibrary.org/obo/DOID_",
+    "Orphanet": "http://purl.obolibrary.org/obo/Orphanet_",
+}
+
+//@ts-expect-error
+let curieConverter;
+
+export async function initCurieConverter() {
+    //@ts-ignore
+    await init();
+    curieConverter = await Converter.fromExtendedPrefixMap("https://raw.githubusercontent.com/biopragmatics/bioregistry/main/exports/contexts/bioregistry.epm.json")
+}
+
+export function expandCurie(curie: string | undefined): string  {
+    if (!curie) {
+        return "";
+    }
+
+    //@ts-expect-error
+    return curieConverter.expand(curie);
+}
+
+export const expand = (curie: string): string => {
+    if (!curie.includes(":")) {
+        return curie;
+    }
+    const [prefix, id] = curie.split(":");
+    if (!curieMap[prefix]) {
+        return curie;
+    }
+    return curieMap[prefix] + id;
+}