feat: load spectra from external sources via spectra query param

src/NMRiumWrapper.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useRef } from 'react';
 import { RootLayout } from 'react-science/ui';
 
 import { LoadingIndicator } from './Loadingindicator.js';
+import { loadSpectraFromSource } from './data-source/loadSpectraFromSource.js';
 import events from './events/event.js';
 import { useLoadSpectra } from './hooks/useLoadSpectra.js';
 import { usePreferences } from './hooks/usePreferences.js';
@@ -20,8 +21,13 @@ const containerStyle: CSSProperties = {
 export default function NMRiumWrapper() {
   const { allowedOrigins, isFetchAllowedOriginsPending } = useWhiteList();
   const nmriumRef = useRef<NMRiumRefAPI>(null);
-  const { workspace, preferences, defaultEmptyMessage, customWorkspaces } =
-    usePreferences();
+  const {
+    workspace,
+    preferences,
+    defaultEmptyMessage,
+    customWorkspaces,
+    spectraSource,
+  } = usePreferences();
 
   const { load: loadSpectra, data, isLoading, setActiveTab } = useLoadSpectra();
 
@@ -33,6 +39,25 @@ export default function NMRiumWrapper() {
     events.trigger('data-change', { state, source });
   }, []);
 
+  useEffect(() => {
+    if (!spectraSource) return;
+
+    const { source, id } = spectraSource;
+
+    async function loadFromSource() {
+      try {
+        const nmrium = await loadSpectraFromSource(source, id);
+        void loadSpectra({ nmrium });
+      } catch (error) {
+        events.trigger('error', error as Error);
+        // eslint-disable-next-line no-console
+        console.error(error);
+      }
+    }
+
+    void loadFromSource();
+  }, [spectraSource, loadSpectra]);
+
   useEffect(() => {
     const clearActionListener = events.on(
       'action-request',

src/config/nmrxiv/index.ts

@@ -0,0 +1,10 @@
+import development from './nmrxiv.development.json' with { type: 'json' };
+import production from './nmrxiv.production.json' with { type: 'json' };
+
+interface NmrXivConfig {
+  baseURL: string;
+}
+
+export const nmrXivConfig: NmrXivConfig = import.meta.env.DEV
+  ? development
+  : production;

src/config/nmrxiv/nmrxiv.development.json

@@ -0,0 +1,3 @@
+{
+    "baseURL": "https://dev.nmrxiv.org/api/v1/samples"
+}

src/config/nmrxiv/nmrxiv.production.json

@@ -0,0 +1,3 @@
+{
+    "baseURL": "https://nmrxiv.org/api/v1/samples"
+}

src/data-source/loadSpectraFromSource.ts

@@ -0,0 +1,20 @@
+import { loadNmrXivSpectraById } from './nmrxiv.js';
+
+export type SpectraSource = 'nmrxiv';
+
+type SpectraSourceLoader = (id: string) => Promise<object>;
+
+const spectraSourceLoaders: Record<SpectraSource, SpectraSourceLoader> = {
+  nmrxiv: loadNmrXivSpectraById,
+};
+
+export async function loadSpectraFromSource(
+  source: string,
+  id: string,
+): Promise<object> {
+  const loader = spectraSourceLoaders[source];
+  if (!loader) {
+    throw new Error(`Unknown spectra source: "${source}"`);
+  }
+  return loader(id);
+}

src/data-source/nmrxiv.ts

@@ -0,0 +1,17 @@
+import { nmrXivConfig } from '../config/nmrxiv/index.js';
+
+function getNmrXivSpectraJsonURL(id: string): string {
+  return `${nmrXivConfig.baseURL}/${id}/nmriumInfo`;
+}
+
+export async function loadNmrXivSpectraById(id: string): Promise<object> {
+  const response = await fetch(getNmrXivSpectraJsonURL(id));
+
+  if (!response.ok) {
+    throw new Error(
+      `Failed to fetch nmrXiv spectra "${id}" (status ${response.status})`,
+    );
+  }
+
+  return response.json();
+}

src/hooks/usePreferences.ts

@@ -3,7 +3,9 @@ import type {
   WorkspacePreferences,
 } from '@zakodium/nmrium-core';
 import type { NMRiumWorkspace } from 'nmrium';
+import { useMemo } from 'react';
 
+import { parseSpectraSource } from '../utilities/parseSpectraSource.js';
 import type { WorkspaceOptions } from '../workspaces/integration.js';
 import { getIntegrationWorkspace } from '../workspaces/integration.js';
 import { getNmrXivWorkspace } from '../workspaces/nmrxiv.js';
@@ -58,11 +60,18 @@ export function usePreferences() {
       parameters.get('hidePanelOnLoad')?.toLowerCase() === 'true';
   }
 
+  const rawSpectra = parameters.get('spectra');
+  const spectraSource = useMemo(
+    () => parseSpectraSource(rawSpectra),
+    [rawSpectra],
+  );
+
   return {
     preferences,
     workspace,
     defaultEmptyMessage,
     customWorkspaces,
+    spectraSource,
   };
 }
 

src/utilities/parseSpectraSource.ts

@@ -0,0 +1,25 @@
+export interface SpectraSource {
+  source: string;
+  id: string;
+}
+
+/**
+ * Parses a `spectra` query parameter in the format `<source>:<id>` and returns an object with `source` and `id` properties.
+ *
+ * Example:
+ * `nmrxiv:S2173` => { source: 'nmrxiv', id: 'S2173' }
+ */
+export function parseSpectraSource(
+  value: string | null,
+): SpectraSource | undefined {
+  if (!value) return undefined;
+
+  const separatorIndex = value.indexOf(':');
+  if (separatorIndex === -1) return undefined;
+
+  const source = value.slice(0, separatorIndex).trim();
+  const id = value.slice(separatorIndex + 1).trim();
+  if (!source || !id) return undefined;
+
+  return { source, id };
+}