@@ -108,11 +139,11 @@ export const BedSplash = () => {
{metadata !== undefined ? : null}
-
+
- Overview
-
-
+ Overview
+
+
| Key |
@@ -123,83 +154,110 @@ export const BedSplash = () => {
{Object.keys(metadata?.annotation || {}).map((k) => {
if (k === 'input_file' || k === 'file_name' || k === 'sample_name') {
return null;
- // @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be)
- } else if (!metadata?.annotation[k]) {
+ }
+
+ const value = getAnnotationValue(metadata, k);
+ if (!value) {
return null;
- } else {
- return (
-
- |
- {snakeToTitleCase(k)}
- |
-
-
- {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */}
- {metadata?.annotation[k] || 'N/A'}
- |
-
- );
}
+
+ return (
+
+ |
+ {snakeToTitleCase(k)}
+ |
+
+ {value ?? 'N/A'}
+ |
+
+ );
})}
BED Sets
-
-
+
+ BEDsets
+
+
- | BED set ID |
+ BEDset ID |
Name |
Description |
View |
- {metadata?.bedsets?.map((bedset) => (
-
- |
- {bedset.id}
- |
-
- {bedset.name || 'No name'}
- |
-
- {bedset.description || 'No description'}
- |
-
- View
- |
-
- )) || 'N/A'}
+ {[
+ ...(metadata?.bedsets || []).map((bedset) => (
+
+ |
+ {bedset.id}
+ |
+
+ {bedset.name || 'No name'}
+ |
+
+ {bedset.description || 'No description'}
+ |
+
+ View
+ |
+
+ )),
+ ...Array(
+ Math.max(
+ 0,
+ getFilteredKeys(metadata).length - (metadata?.bedsets?.length || 0)
+ )
+ ).fill(null).map((_, index) => (
+
+ | |
+ |
+ |
+ |
+
+ ))
+ ]}
Statistics
-
+
+
+ Statistics
{metadata && (
-
+
)}
-
+
- {/* */}
- Plots
+
-
+
+ Plots
+
+
+
+ { neighbours &&
+
+ Similar BED Files
+
+
+
+
+ }
);
}
-};
+};
\ No newline at end of file
diff --git a/ui/src/pages/bedset-splash.tsx b/ui/src/pages/bedset-splash.tsx
index d31ccf6..f40ef6a 100644
--- a/ui/src/pages/bedset-splash.tsx
+++ b/ui/src/pages/bedset-splash.tsx
@@ -64,17 +64,17 @@ export const BedsetSplash = () => {
} else if (error) {
if ((error as AxiosError)?.response?.status === 404) {
return (
-
+
Oh no!
-
+
We could not find BEDset with record identifier:
{bedsetId}
-
+
@@ -102,47 +102,53 @@ export const BedsetSplash = () => {
}
} else {
return (
-
+
-
+
{metadata !== undefined ? : null}
-
Statistics
-
+
+
+ Statistics
{metadata && (
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
)}
+
+
+
- Plots
+
-
+
+ Plots
+
+
- BED files in this BED set
+
- {isLoadingBedfiles ? (
-
-
- {Array.from({ length: 10 }).map((_, index) => (
-
-
-
- ))}
-
Constituent BED Files
+
+ {isLoadingBedfiles ? (
+
+
+ {Array.from({ length: 10 }).map((_, index) => (
+
+
+
+ ))}
+
+
);
diff --git a/ui/src/queries/useBedNeighbours.ts b/ui/src/queries/useBedNeighbours.ts
new file mode 100644
index 0000000..885ec32
--- /dev/null
+++ b/ui/src/queries/useBedNeighbours.ts
@@ -0,0 +1,24 @@
+import { useQuery } from '@tanstack/react-query';
+import { useBedbaseApi } from '../contexts/api-context';
+import { components } from '../../bedbase-types';
+
+type BedNeighboursResponse = components['schemas']['BedNeighboursResult'];
+type BedNeighboursQuery = {
+ md5?: string;
+ limit?: number;
+ offset?: number;
+};
+
+export const useBedNeighbours = (query: BedNeighboursQuery) => {
+ const { api } = useBedbaseApi();
+
+ const { md5, limit } = query;
+
+ return useQuery({
+ queryKey: ['neighbours', md5],
+ queryFn: async () => {
+ const { data } = await api.get(`/bed/${md5}/neighbours?limit=${limit}`);
+ return data;
+ }
+ });
+};
diff --git a/ui/src/queries/useBedSetBedfiles.ts b/ui/src/queries/useBedSetBedfiles.ts
index ffa5edc..b700377 100644
--- a/ui/src/queries/useBedSetBedfiles.ts
+++ b/ui/src/queries/useBedSetBedfiles.ts
@@ -1,6 +1,6 @@
import type { components } from '../../bedbase-types';
import { useQuery } from '@tanstack/react-query';
-import { useBedbaseApi } from '../contexts/api-context.tsx';
+import { useBedbaseApi } from '../contexts/api-context';
type BedSetBedfilesResponse = components['schemas']['BedSetBedFiles'];
@@ -11,11 +11,7 @@ type BedSetBedfilesQuery = {
export const useBedsetBedfiles = (query: BedSetBedfilesQuery) => {
const { api } = useBedbaseApi();
- const { id, autoRun } = query;
- let enabled = false;
- if (autoRun !== undefined && autoRun && id) {
- enabled = true;
- }
+ const { id } = query;
return useQuery({
queryKey: ['bedset-bedfiles', id],
@@ -23,7 +19,10 @@ export const useBedsetBedfiles = (query: BedSetBedfilesQuery) => {
const { data } = await api.get(`/bedset/${id}/bedfiles`);
return data;
},
- enabled: enabled,
- staleTime: 0,
+ enabled: Boolean(id),
+ staleTime: 5 * 60 * 1000, // Consider data fresh for 5 minutes
+ gcTime: 30 * 60 * 1000, // This replaces cacheTime in newer versions
+ refetchOnWindowFocus: false,
+ refetchOnMount: false,
});
-};
+};
\ No newline at end of file
diff --git a/ui/src/queries/useBedsetMetadata.ts b/ui/src/queries/useBedsetMetadata.ts
index e847bf9..303448c 100644
--- a/ui/src/queries/useBedsetMetadata.ts
+++ b/ui/src/queries/useBedsetMetadata.ts
@@ -1,6 +1,6 @@
import type { components } from '../../bedbase-types';
import { useQuery } from '@tanstack/react-query';
-import { useBedbaseApi } from '../contexts/api-context.tsx';
+import { useBedbaseApi } from '../contexts/api-context';
type BedSetMetadataResponse = components['schemas']['BedSetMetadata'];
@@ -11,11 +11,7 @@ type BedSetMetadataQuery = {
export const useBedsetMetadata = (query: BedSetMetadataQuery) => {
const { api } = useBedbaseApi();
- const { md5, autoRun } = query;
- let enabled = false;
- if (autoRun !== undefined && autoRun && md5) {
- enabled = true;
- }
+ const { md5 } = query;
return useQuery({
queryKey: ['bedset-metadata', md5],
@@ -23,7 +19,10 @@ export const useBedsetMetadata = (query: BedSetMetadataQuery) => {
const { data } = await api.get(`/bedset/${md5}/metadata`);
return data;
},
- enabled: enabled,
- staleTime: 0,
+ enabled: Boolean(md5),
+ staleTime: 5 * 60 * 1000,
+ gcTime: 30 * 60 * 1000, // This replaces cacheTime in newer versions
+ refetchOnWindowFocus: false,
+ refetchOnMount: false,
});
-};
+};
\ No newline at end of file
diff --git a/ui/src/utils.ts b/ui/src/utils.ts
index 1af3a65..ce365ad 100644
--- a/ui/src/utils.ts
+++ b/ui/src/utils.ts
@@ -23,6 +23,11 @@ export const makeThumbnailImageLink = (md5: string, plotName: string, type: Obje
return `${API_BASE}/objects/${type}.${md5}.${plotName}/access/http/thumbnail`;
};
+export const makePDFImageLink = (md5: string, plotName: string, type: ObjectType) => {
+ const API_BASE = import.meta.env.VITE_API_BASE || '';
+ return `${API_BASE}/objects/${type}.${md5}.${plotName}/access/http/bytes`;
+};
+
export const formatDateTime = (date: string) => {
return new Date(date).toLocaleString();
};