From 6596d1e24c419348c89dfc5e1a97838b1004951f Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Mon, 10 Jun 2024 12:42:52 -0400 Subject: [PATCH 1/4] update types --- ui/bedbase-types.d.ts | 29 ++--------------------------- ui/package.json | 2 +- 2 files changed, 3 insertions(+), 28 deletions(-) diff --git a/ui/bedbase-types.d.ts b/ui/bedbase-types.d.ts index 790a2a1..1f790b6 100644 --- a/ui/bedbase-types.d.ts +++ b/ui/bedbase-types.d.ts @@ -327,7 +327,8 @@ export interface components { plots?: components["schemas"]["BedPlots"] | null; files?: components["schemas"]["BedFiles"] | null; universe_metadata?: components["schemas"]["UniverseMetadata"] | null; - raw_metadata?: components["schemas"]["BedPEPHub"] | null; + /** Raw Metadata */ + raw_metadata?: components["schemas"]["BedPEPHub"] | components["schemas"]["BedPEPHubRestrict"] | null; }; /** BedMetadataBasic */ BedMetadataBasic: { @@ -1134,32 +1135,6 @@ export interface operations { }; }; }; - /** - * Get embeddings for a single BED record - * @description Returns embeddings for a single BED record. - */ - get_bed_embedding_v1_bed__bed_id__embedding_get: { - parameters: { - path: { - /** @description BED digest */ - bed_id: string; - }; - }; - responses: { - /** @description Successful Response */ - 200: { - content: { - "application/json": components["schemas"]["BedEmbeddingResult"]; - }; - }; - /** @description Validation Error */ - 422: { - content: { - "application/json": components["schemas"]["HTTPValidationError"]; - }; - }; - }; - }; /** * Get regions from a BED file that overlap a query region. * @description Returns the queried regions with provided ID and optional query parameters 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", From 64dd161c6a71ab15c7571010fb326d1f530e5176 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Mon, 10 Jun 2024 13:25:12 -0400 Subject: [PATCH 2/4] small UI tweaks (#124) --- .../bed-splash-components/header.tsx | 110 ++++++++++++++---- ui/src/custom.scss | 8 ++ ui/src/pages/bed-splash.tsx | 78 ++++++++----- ui/src/utils.ts | 4 +- 4 files changed, 142 insertions(+), 58 deletions(-) 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}

@@ -148,44 +145,107 @@ export const BedSplashHeader = (props: Props) => {

-

- - {metadata?.bed_format || 'No format available'} -
+ +
+
BED file format
+
+ } + > +
+ + {metadata?.bed_format || 'No format available'} +
+

-

- - {metadata?.bed_type || 'No bed type available'} -
+ +
+
BED type
+
+ } + > +
+ + {metadata?.bed_type || 'No bed type available'} +
+

+ {metadata?.is_universe && ( +
+

+ +

+
This BED file is part of the Universe
+
+ } + > +
+ + Universe +
+ +

+
+ )}
- +

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..238d7af 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; @@ -178,6 +182,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..bfa265f 100644 --- a/ui/src/pages/bed-splash.tsx +++ b/ui/src/pages/bed-splash.tsx @@ -108,37 +108,53 @@ export const BedSplash = () => { {metadata !== undefined ? : null} -

Overview

- -
- - - - - - - - - {Object.keys(metadata?.raw_metadata || {}).map((k) => { - if (k === 'input_file' || k === 'global_sample_id' || k === 'file_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?.raw_metadata[k]) { - return null; - } else { - return ( - - - {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */} - - - ); - } - })} - -
KeyValue
{snakeToTitleCase(k)}{metadata?.raw_metadata[k] || 'N/A'}
-
- + + +

Overview

+
+ + + + + + + + + {Object.keys(metadata?.raw_metadata || {}).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?.raw_metadata[k]) { + return null; + } else { + return ( + + + {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */} + + + ); + } + })} + +
KeyValue
{snakeToTitleCase(k)}{metadata?.raw_metadata[k] || 'N/A'}
+
+ + +

BED Sets

+
+ + + + + + + + +
BED set IDNameDescription
+
+ +

Statistics

{metadata && ( diff --git a/ui/src/utils.ts b/ui/src/utils.ts index 8546700..fd30eab 100644 --- a/ui/src/utils.ts +++ b/ui/src/utils.ts @@ -2,12 +2,12 @@ type ObjectType = 'bed' | 'bedset'; export const makeHttpDownloadLink = (md5: string) => { const API_BASE = import.meta.env.VITE_API_BASE || ''; - return `${API_BASE}/objects/bed.${md5}.bedfile/access/http`; + return `${API_BASE}/objects/bed.${md5}.bed_file/access/http`; }; export const makeS3DownloadLink = (md5: string) => { const API_BASE = import.meta.env.VITE_BEDHOST_API_URL || ''; - return `${API_BASE}/objects/bed.${md5}.bedfile/access/s3`; + return `${API_BASE}/objects/bed.${md5}.bed_file/access/s3`; }; export const formatNumberWithCommas = (n: number) => { From 6346b5f7477279f10932ab4db23f12f2b54c0306 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Mon, 10 Jun 2024 13:55:56 -0400 Subject: [PATCH 3/4] UI tweaks... more (#124) --- ui/bedbase-types.d.ts | 11 +++++++++++ ui/src/custom.scss | 6 ++++++ ui/src/pages/bed-splash.tsx | 34 ++++++++++++++++++++++++++++------ 3 files changed, 45 insertions(+), 6 deletions(-) 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/src/custom.scss b/ui/src/custom.scss index 238d7af..86a5937 100644 --- a/ui/src/custom.scss +++ b/ui/src/custom.scss @@ -152,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 { diff --git a/ui/src/pages/bed-splash.tsx b/ui/src/pages/bed-splash.tsx index bfa265f..b960542 100644 --- a/ui/src/pages/bed-splash.tsx +++ b/ui/src/pages/bed-splash.tsx @@ -109,7 +109,7 @@ export const BedSplash = () => { - +

Overview

@@ -129,9 +129,14 @@ export const BedSplash = () => { } else { return ( - - {/* @ts-expect-error wants to get mad because it could be an object and React cant render that (it wont be) */} - + + + ); } @@ -140,17 +145,34 @@ export const BedSplash = () => {
{snakeToTitleCase(k)}{metadata?.raw_metadata[k] || 'N/A'} + {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 Sets

- +
+ + + {metadata?.bedsets?.map((bedset) => ( + + + + + + + )) || 'N/A'} +
BED set ID Name DescriptionView
+ {bedset.id} + + {bedset.name || 'No name'} + {bedset.description || 'No description'} + View +
From d8c86bcacc13499fee593c8894c3c0b3d9415bdc Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Mon, 10 Jun 2024 13:57:18 -0400 Subject: [PATCH 4/4] tweaks --- ui/src/pages/bed-splash.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/ui/src/pages/bed-splash.tsx b/ui/src/pages/bed-splash.tsx index b960542..15ab0e3 100644 --- a/ui/src/pages/bed-splash.tsx +++ b/ui/src/pages/bed-splash.tsx @@ -109,7 +109,7 @@ export const BedSplash = () => { - +

Overview

@@ -129,7 +129,7 @@ export const BedSplash = () => { } else { return ( - @@ -145,7 +145,7 @@ export const BedSplash = () => {
+ {snakeToTitleCase(k)}
- +

BED Sets