Merge pull request #209 from samply/feature/get-site-names-from-directory

feat: pull biobank names from directory

Author: MatsJohansen87

src/App.svelte

@@ -11,9 +11,14 @@
     querySpot,
     removeFailedSite,
   } from "@samply/lens";
+  import { base } from "$app/paths";
   import { env } from "$env/dynamic/public";
   import { onMount } from "svelte";
   import { v4 as uuidv4 } from "uuid";
+  import {
+    cloneLensOptions,
+    loadOptionsWithDirectoryBiobankNames,
+  } from "$lib/directoryBiobankNames";
   import optionsProd from "./config/options.json";
   import optionsTest from "./config/options-test.json";
   import optionsAcceptance from "./config/options-acceptance.json";
@@ -77,16 +82,79 @@
     scrollToResults();
   });
 
-  onMount(async () => {
+  const setupResultTableNameTooltips = () => {
+    let animationFrameId: number | undefined;
+    let tableObserver: MutationObserver | undefined;
+
+    const updateTooltips = (resultTable: HTMLElement) => {
+      const rows = resultTable.shadowRoot?.querySelectorAll<HTMLElement>(
+        '[part~="lens-result-table-item-body-row"]',
+      );
+
+      rows?.forEach((row) => {
+        const cells = row.querySelectorAll<HTMLElement>(
+          '[part~="lens-result-table-item-body-cell"]',
+        );
+        const siteCell = cells[1];
+        const siteName = siteCell?.textContent?.replace(/\s+/g, " ").trim();
+
+        if (!siteCell || !siteName) {
+          return;
+        }
+
+        siteCell.title = siteName;
+        siteCell
+          .querySelector<HTMLElement>(
+            '[part~="lens-result-table-item-body-cell-link"]',
+          )
+          ?.setAttribute("title", siteName);
+      });
+    };
+
+    const observeResultTable = () => {
+      const resultTable =
+        document.querySelector<HTMLElement>("lens-result-table");
+
+      if (!resultTable?.shadowRoot) {
+        animationFrameId = window.requestAnimationFrame(observeResultTable);
+        return;
+      }
+
+      updateTooltips(resultTable);
+      tableObserver = new MutationObserver(() => updateTooltips(resultTable));
+      tableObserver.observe(resultTable.shadowRoot, {
+        childList: true,
+        subtree: true,
+        characterData: true,
+      });
+    };
+
+    observeResultTable();
+
+    return () => {
+      tableObserver?.disconnect();
+      if (animationFrameId) {
+        window.cancelAnimationFrame(animationFrameId);
+      }
+    };
+  };
+
+  const initializeLens = async () => {
     // Set the options based on the environment
-    let options: LensOptions = optionsProd;
+    let optionsSource: LensOptions = optionsProd;
     if (env.PUBLIC_ENVIRONMENT === "test") {
-      options = optionsTest;
+      optionsSource = optionsTest;
     } else if (env.PUBLIC_ENVIRONMENT === "acceptance") {
-      options = optionsAcceptance;
+      optionsSource = optionsAcceptance;
     }
+
+    let options = cloneLensOptions(optionsSource);
+
     if (env.PUBLIC_SPOT_URL) {
-      options.spotUrl = env.PUBLIC_SPOT_URL;
+      options = {
+        ...options,
+        spotUrl: env.PUBLIC_SPOT_URL,
+      };
     }
 
     // Check if prism URL parameter is set
@@ -105,6 +173,11 @@
       };
     }
 
+    options = await loadOptionsWithDirectoryBiobankNames(
+      options,
+      `${base}/api/directory-biobank-names`,
+    );
+
     setOptions(options);
 
     // Set the catalogue
@@ -113,6 +186,13 @@
     // Wait for the search bar to initialize (load query from URL) before sending the initial query.
     // Using setTimeout to ensure the custom element's onMount has completed.
     setTimeout(() => sendQuery(), 0);
+  };
+
+  onMount(() => {
+    const cleanupResultTableNameTooltips = setupResultTableNameTooltips();
+    void initializeLens();
+
+    return cleanupResultTableNameTooltips;
   });
 
   let results: HTMLElement;

src/app.css

@@ -263,6 +263,31 @@ lens-result-summary {
   display: block;
 }
 
+lens-result-table::part(lens-result-table) {
+  table-layout: fixed;
+}
+
+lens-result-table::part(lens-result-table-item-body-cell) {
+  max-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+lens-result-table::part(lens-result-table-item-body-cell-checkbox) {
+  max-width: none;
+  overflow: visible;
+}
+
+lens-result-table::part(lens-result-table-item-body-cell-link) {
+  display: inline-block;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
+}
+
 lens-result-summary::part(result-summary-content) {
   gap: var(--gap-l);
 }

src/lib/directoryBiobankNames.test.ts

@@ -0,0 +1,45 @@
+import { describe, expect, it } from "vitest";
+import type { LensOptions } from "@samply/lens";
+import {
+  getConfiguredCollectionIds,
+  mergeDirectoryBiobankNames,
+} from "./directoryBiobankNames";
+
+describe("directory biobank names", () => {
+  const options: LensOptions = {
+    siteMappings: {
+      aachen: {
+        displayName: "Aachen",
+        collectionId: "bbmri-eric:ID:DE_RWTHCBMB:collection:RWTHCBMB_BC",
+      },
+      test: "Configured fallback",
+    },
+  };
+
+  it("gets configured collection ids from structured site mappings", () => {
+    expect(getConfiguredCollectionIds(options)).toEqual([
+      "bbmri-eric:ID:DE_RWTHCBMB:collection:RWTHCBMB_BC",
+    ]);
+  });
+
+  it("replaces configured display names with Directory biobank names", () => {
+    expect(
+      mergeDirectoryBiobankNames(options, [
+        {
+          collectionId: "bbmri-eric:ID:DE_RWTHCBMB:collection:RWTHCBMB_BC",
+          biobankName:
+            "Zentralisierte Biomaterialbank der RWTH Aachen University",
+        },
+      ]).siteMappings,
+    ).toEqual({
+      aachen: {
+        displayName:
+          "Zentralisierte Biomaterialbank der RWTH Aachen University",
+        collectionId: "bbmri-eric:ID:DE_RWTHCBMB:collection:RWTHCBMB_BC",
+      },
+      test: {
+        displayName: "Configured fallback",
+      },
+    });
+  });
+});

src/lib/directoryBiobankNames.ts

@@ -0,0 +1,104 @@
+import type { LensOptions, SiteInfo } from "@samply/lens";
+
+type DirectoryBiobankName = {
+  collectionId: string;
+  biobankName: string;
+};
+
+type DirectoryBiobankNamesResponse = {
+  names?: DirectoryBiobankName[];
+};
+
+const isSiteInfo = (siteInfo: string | SiteInfo): siteInfo is SiteInfo =>
+  typeof siteInfo === "object" && siteInfo !== null;
+
+export const cloneLensOptions = (options: LensOptions): LensOptions => ({
+  ...options,
+  siteMappings: options.siteMappings
+    ? Object.fromEntries(
+        Object.entries(options.siteMappings).map(([site, siteInfo]) => [
+          site,
+          isSiteInfo(siteInfo) ? { ...siteInfo } : siteInfo,
+        ]),
+      )
+    : undefined,
+});
+
+export const getConfiguredCollectionIds = (options: LensOptions): string[] => {
+  const collectionIds = Object.values(options.siteMappings ?? {})
+    .map((siteInfo) =>
+      isSiteInfo(siteInfo) ? siteInfo.collectionId : undefined,
+    )
+    .filter((collectionId): collectionId is string => Boolean(collectionId));
+
+  return [...new Set(collectionIds)];
+};
+
+export const mergeDirectoryBiobankNames = (
+  options: LensOptions,
+  directoryNames: DirectoryBiobankName[],
+): LensOptions => {
+  const biobankNameByCollectionId = new Map(
+    directoryNames.map(({ collectionId, biobankName }) => [
+      collectionId,
+      biobankName,
+    ]),
+  );
+  const siteMappings = Object.fromEntries(
+    Object.entries(options.siteMappings ?? {}).map(([site, siteInfo]) => {
+      const siteInfoObject = isSiteInfo(siteInfo)
+        ? siteInfo
+        : { displayName: siteInfo };
+      const directoryName = siteInfoObject.collectionId
+        ? biobankNameByCollectionId.get(siteInfoObject.collectionId)
+        : undefined;
+
+      return [
+        site,
+        {
+          ...siteInfoObject,
+          displayName: directoryName ?? siteInfoObject.displayName,
+        },
+      ];
+    }),
+  );
+
+  return {
+    ...options,
+    siteMappings,
+  };
+};
+
+export const loadOptionsWithDirectoryBiobankNames = async (
+  options: LensOptions,
+  apiUrl: string,
+  fetcher: typeof fetch = fetch,
+): Promise<LensOptions> => {
+  const collectionIds = getConfiguredCollectionIds(options);
+  if (!collectionIds.length) {
+    return options;
+  }
+
+  try {
+    const response = await fetcher(apiUrl, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({ collectionIds }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`Directory lookup failed with status ${response.status}`);
+    }
+
+    const payload = (await response.json()) as DirectoryBiobankNamesResponse;
+    return mergeDirectoryBiobankNames(options, payload.names ?? []);
+  } catch (error) {
+    console.warn(
+      "Failed to load biobank names from the BBMRI Directory; using configured display names.",
+      error,
+    );
+    return options;
+  }
+};