diff --git a/ui/bedbase-types.d.ts b/ui/bedbase-types.d.ts index 1f790b6..49c16e0 100644 --- a/ui/bedbase-types.d.ts +++ b/ui/bedbase-types.d.ts @@ -329,6 +329,8 @@ export interface components { universe_metadata?: components["schemas"]["UniverseMetadata"] | null; /** Raw Metadata */ raw_metadata?: components["schemas"]["BedPEPHub"] | components["schemas"]["BedPEPHubRestrict"] | null; + /** Bedsets */ + bedsets?: components["schemas"]["BedSetMinimal"][] | null; }; /** BedMetadataBasic */ BedMetadataBasic: { @@ -595,6 +597,15 @@ export interface components { /** Bed Ids */ bed_ids?: string[]; }; + /** BedSetMinimal */ + BedSetMinimal: { + /** Id */ + id: string; + /** Name */ + name?: string | null; + /** Description */ + description?: string | null; + }; /** BedSetPlots */ BedSetPlots: { region_commonality?: components["schemas"]["FileModel"]; diff --git a/ui/package.json b/ui/package.json index 378350d..e54f97a 100644 --- a/ui/package.json +++ b/ui/package.json @@ -8,7 +8,7 @@ "build": "tsc && vite build", "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0", "preview": "vite preview", - "generate-types": "npx openapi-typescript http://127.0.0.1:8000/openapi.json -o bedbase-types.d.ts" + "generate-types": "npx openapi-typescript https://api-dev.bedbase.org/openapi.json -o bedbase-types.d.ts" }, "dependencies": { "@tanstack/react-query": "^5.28.0", diff --git a/ui/src/components/bed-splash-components/header.tsx b/ui/src/components/bed-splash-components/header.tsx index 59ea7bc..2b72038 100644 --- a/ui/src/components/bed-splash-components/header.tsx +++ b/ui/src/components/bed-splash-components/header.tsx @@ -4,7 +4,7 @@ import { Fragment, useState } from 'react'; import { components } from '../../../bedbase-types'; import { useCopyToClipboard } from '@uidotdev/usehooks'; import { bytesToSize, formatDateTime } from '../../utils'; -import { Dropdown } from 'react-bootstrap'; +import { Dropdown, OverlayTrigger } from 'react-bootstrap'; const API_BASE = import.meta.env.VITE_API_BASE || ''; @@ -45,10 +45,7 @@ export const BedSplashHeader = (props: Props) => { {copiedId ? : } -
- {metadata.name} {' | '} - {metadata.raw_metadata?.global_sample_id || 'No source available'} -
+{metadata.name}
-
-
-
-
+
Created:{' '}
{metadata?.submission_date ? formatDateTime(metadata?.submission_date) : 'No date available'}
diff --git a/ui/src/custom.scss b/ui/src/custom.scss
index ecf508b..86a5937 100644
--- a/ui/src/custom.scss
+++ b/ui/src/custom.scss
@@ -113,6 +113,10 @@ a {
min-height: 100vh;
}
+.h-80 {
+ height: 80%;
+}
+
/* This is for the nav bar */
.hidden {
display: none;
@@ -148,6 +152,12 @@ a {
animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
}
+.truncate {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
/* The typing effect */
@keyframes typing {
from {
@@ -178,6 +188,10 @@ a {
cursor: pointer;
}
+.cursor-default {
+ cursor: default;
+}
+
.animate-pulse {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
diff --git a/ui/src/pages/bed-splash.tsx b/ui/src/pages/bed-splash.tsx
index 6b45737..15ab0e3 100644
--- a/ui/src/pages/bed-splash.tsx
+++ b/ui/src/pages/bed-splash.tsx
@@ -108,37 +108,75 @@ export const BedSplash = () => {
{metadata !== undefined ?
Key | -Value | -
---|---|
{snakeToTitleCase(k)} | - {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */} -{metadata?.raw_metadata[k] || 'N/A'} | -
Key | +Value | +
---|---|
+ {snakeToTitleCase(k)} + | + ++ {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */} + {metadata?.raw_metadata[k] || 'N/A'} + | +
BED set ID | +Name | +Description | +View | +
---|---|---|---|
+ {bedset.id} + | ++ {bedset.name || 'No name'} + | +{bedset.description || 'No description'} | ++ View + | +