From fa3e51bd522c50f0c9cfdc07641ef61fa69fca62 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 31 Oct 2024 11:04:24 -0400 Subject: [PATCH 01/14] Fixed gc content and example --- bedhost/routers/bed_api.py | 2 +- ui/bedbase-types.d.ts | 4 ++-- .../bedset-splash-components/cards/gc-content-card.tsx | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/bedhost/routers/bed_api.py b/bedhost/routers/bed_api.py index e21c3b0..100b56c 100644 --- a/bedhost/routers/bed_api.py +++ b/bedhost/routers/bed_api.py @@ -52,7 +52,7 @@ async def get_example_bed_record(): """ Get metadata for an example BED record. """ - result = bbagent.bed.get_ids_list(limit=1, offset=0).results + result = bbagent.bed.get_ids_list(limit=1, offset=0, genome="hg38").results if result: return result[0] raise HTTPException(status_code=404, detail="No records found") diff --git a/ui/bedbase-types.d.ts b/ui/bedbase-types.d.ts index be646a0..410d2cb 100644 --- a/ui/bedbase-types.d.ts +++ b/ui/bedbase-types.d.ts @@ -1182,7 +1182,7 @@ export interface components { * @description Name of species. e.g. Homo sapiens. * @default */ - organism: string; + species_name: string; /** * Species Id * @default @@ -1234,7 +1234,7 @@ export interface components { * @description Experimental protocol (e.g. ChIP-seq) * @default */ - exp_protocol: string; + assay: string; /** * Antibody * @description Antibody used in the assay diff --git a/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx b/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx index ca1b951..79d8adb 100644 --- a/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx +++ b/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx @@ -15,11 +15,11 @@ export const GCContentCard = (props: Props) => {

{metadata.statistics?.mean?.gc_content - ? `${formatNumberWithCommas(Math.round(metadata.statistics?.mean?.gc_content || 0))}} bp` + ? `${formatNumberWithCommas(Math.round((metadata.statistics?.mean?.gc_content || 0)*100)/100)}` : 'N/A'}

{/* plus minus */} -

± {formatNumberWithCommas(Math.round(metadata.statistics?.sd?.gc_content || 0))} bp

+

± {formatNumberWithCommas(Math.round((metadata.statistics?.sd?.gc_content*100 || 0)*100)/100)}

); From b9ead733c823e176f902ba8c2907fb99bb86d2b5 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 31 Oct 2024 11:16:47 -0400 Subject: [PATCH 02/14] Added R example --- ui/src/const.ts | 9 ++++++--- ui/src/pages/home.tsx | 8 +++++++- 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/ui/src/const.ts b/ui/src/const.ts index 90d7aea..93e20b4 100644 --- a/ui/src/const.ts +++ b/ui/src/const.ts @@ -110,16 +110,19 @@ from geniml.bbclient import BBClient bbclient = BBClient() -regionset = bbclient.load_bed("bbad85f21962bb8d972444f7f9a3a932") +regionset = bbclient.load_bed("02c7821a715f1f890ed2ae53d371072b") print(regionset) \`\`\` `; export const CLIENT_R_CODE_RAW = ` \`\`\`r +library(bedbaser) -# BBClient is not yet available in R -# R package is under development +api <- BEDbase() + +bed_granges <- bb_to_granges(api, "02c7821a715f1f890ed2ae53d371072b") +print(bed_granges) \`\`\` `; diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx index cc9b943..23f8242 100644 --- a/ui/src/pages/home.tsx +++ b/ui/src/pages/home.tsx @@ -276,12 +276,18 @@ export const Home = () => { BEDbase provides a Python an R client for interacting with the BEDbase API. The client allows users to download, cache, and analyze BED files and BED sets programmatically, without the need to interact with the native API. BBclient is available on PyPI in geniml package with other useful tools for genomic data - analysis. Geniml package:{' '} + analysis. Python Geniml package:{' '} {' '} PyPI geniml . + R package:{' '} + + {' '} + BEDbaser + + .

From 8e5d855378a8757ca14b80441cba01e446ca93af Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 31 Oct 2024 11:26:47 -0400 Subject: [PATCH 03/14] ui error fix --- .../bedset-splash-components/cards/gc-content-card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx b/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx index 79d8adb..9983fcc 100644 --- a/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx +++ b/ui/src/components/bedset-splash-components/cards/gc-content-card.tsx @@ -19,7 +19,7 @@ export const GCContentCard = (props: Props) => { : 'N/A'} {/* plus minus */} -

± {formatNumberWithCommas(Math.round((metadata.statistics?.sd?.gc_content*100 || 0)*100)/100)}

+

± {formatNumberWithCommas(Math.round((metadata.statistics?.sd?.gc_content || 0)*100)/100)}

); From 244403721e39ae09920b90edf03256e858749b3f Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 31 Oct 2024 13:05:11 -0400 Subject: [PATCH 04/14] bedlist improvements --- .../bedset-splash-components/beds-table.tsx | 129 ++++++++++-------- ui/src/custom.scss | 6 +- 2 files changed, 75 insertions(+), 60 deletions(-) diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index d381b0b..072417c 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -15,6 +15,8 @@ import { import { useState } from 'react'; import { useBedCart } from '../../contexts/bedcart-context'; import { components } from '../../../bedbase-types'; +import { OverlayTrigger, Tooltip } from 'react-bootstrap'; +import YAML from 'js-yaml'; type Bed = components['schemas']['BedSetBedFiles']['results'][number]; @@ -39,42 +41,56 @@ export const BedsTable = (props: Props) => { const { addBedToCart, removeBedFromCart, cart } = useBedCart(); const columns = [ - columnHelper.accessor('genome_alias', { + columnHelper.accessor(row => row.genome_alias, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Genome', id: 'genome', }), - columnHelper.accessor('bed_type', { + columnHelper.accessor(row => row.bed_type, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Type', id: 'bed-type', }), - columnHelper.accessor('name', { + columnHelper.accessor(row => row.name, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Name', id: 'name', }), - columnHelper.accessor('description', { + columnHelper.accessor(row => row.annotation?.tissue, { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Tissue', + id: 'Tissue', + }), + + columnHelper.accessor(row => row.annotation?.cell_type, { cell: (info) => ( - - {info.getValue() || No description} + + {info.getValue() || } ), footer: (info) => info.column.id, - header: 'Description', - id: 'description', + header: 'Cell Type', + id: 'cell-type', }), - columnHelper.accessor('id', { - cell: (info) => {info.getValue()}, + columnHelper.accessor(row => row.annotation?.cell_line, { + cell: (info) => {info.getValue()}, footer: (info) => info.column.id, - header: 'Record Identifier', - id: 'record-identifier', + header: 'Cell Line', + id: 'cell-line', }), + columnHelper.accessor(row => row.description, { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Description', + id: 'description', + }), + - columnHelper.accessor('id', { + columnHelper.accessor(row => row.id, { cell: (info) => (
{!cart.includes(info.getValue()) || (addedToCart && justAddedToCart === info.getValue()) ? ( @@ -134,58 +150,53 @@ export const BedsTable = (props: Props) => { onChange={(e) => setGlobalFilter(e.target.value)} />
- +
- {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - + {headerGroup.headers.map((header) => ( + - ))} - - ))} + : undefined + } + > + {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} + + )} + + ))} + + ))} - {table.getRowModel().rows.map((row) => ( - - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} + {table.getRowModel().rows.map((row) => ( + window.location.href = `/bed/${row.original.id}`} + > + {row.getVisibleCells().map((cell) => ( + + ))} + + ))} - {/* - {table.getFooterGroups().map((footerGroup) => ( - - {footerGroup.headers.map((header) => ( - - ))} - - ))} - */}
- {header.isPlaceholder ? null : ( -
( +
+ {header.isPlaceholder ? null : ( +
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: ' 🔼', - desc: ' 🔽', - }[header.column.getIsSorted() as string] ?? null} -
- )} -
{flexRender(cell.column.columnDef.cell, cell.getContext())}
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.footer, header.getContext())} -
diff --git a/ui/src/custom.scss b/ui/src/custom.scss index 766d47a..4bb6466 100644 --- a/ui/src/custom.scss +++ b/ui/src/custom.scss @@ -69,7 +69,7 @@ a { } .max-cell-width { - width: 20rem !important; + width: 12rem !important; } // tailwind transition class @@ -295,3 +295,7 @@ a { .moreinfo-tooltip > .tooltip-inner { max-width: none; } + +.small-font { + font-size: 0.9rem; /* Adjust the value as needed */ +} \ No newline at end of file From 52da4ba15fa690f18592a51eadbfb3b565c69a75 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 31 Oct 2024 13:14:03 -0400 Subject: [PATCH 05/14] fixed ui imports --- ui/src/components/bedset-splash-components/beds-table.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index 072417c..1db02ad 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -15,9 +15,6 @@ import { import { useState } from 'react'; import { useBedCart } from '../../contexts/bedcart-context'; import { components } from '../../../bedbase-types'; -import { OverlayTrigger, Tooltip } from 'react-bootstrap'; -import YAML from 'js-yaml'; - type Bed = components['schemas']['BedSetBedFiles']['results'][number]; type Props = { From fb73cd8f12fdf51a3b239c24a1d255dff3843843 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Thu, 31 Oct 2024 14:17:45 -0400 Subject: [PATCH 06/14] prettier --- .../bedset-splash-components/beds-table.tsx | 101 +++++++++--------- 1 file changed, 49 insertions(+), 52 deletions(-) diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index 1db02ad..c115422 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -38,56 +38,53 @@ export const BedsTable = (props: Props) => { const { addBedToCart, removeBedFromCart, cart } = useBedCart(); const columns = [ - columnHelper.accessor(row => row.genome_alias, { + columnHelper.accessor((row) => row.genome_alias, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Genome', id: 'genome', }), - columnHelper.accessor(row => row.bed_type, { + columnHelper.accessor((row) => row.bed_type, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Type', id: 'bed-type', }), - columnHelper.accessor(row => row.name, { + columnHelper.accessor((row) => row.name, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Name', id: 'name', }), - columnHelper.accessor(row => row.annotation?.tissue, { + columnHelper.accessor((row) => row.annotation?.tissue, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Tissue', id: 'Tissue', }), - columnHelper.accessor(row => row.annotation?.cell_type, { + columnHelper.accessor((row) => row.annotation?.cell_type, { cell: (info) => ( - - {info.getValue() || } - + {info.getValue() || } ), footer: (info) => info.column.id, header: 'Cell Type', id: 'cell-type', }), - columnHelper.accessor(row => row.annotation?.cell_line, { + columnHelper.accessor((row) => row.annotation?.cell_line, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Cell Line', id: 'cell-line', }), - columnHelper.accessor(row => row.description, { + columnHelper.accessor((row) => row.description, { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Description', id: 'description', }), - - columnHelper.accessor(row => row.id, { + columnHelper.accessor((row) => row.id, { cell: (info) => (
{!cart.includes(info.getValue()) || (addedToCart && justAddedToCart === info.getValue()) ? ( @@ -149,50 +146,50 @@ export const BedsTable = (props: Props) => {
- {table.getHeaderGroups().map((headerGroup) => ( - - {headerGroup.headers.map((header) => ( - + {headerGroup.headers.map((header) => ( + - ))} - - ))} + : undefined + } + > + {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} + + )} + + ))} + + ))} - {table.getRowModel().rows.map((row) => ( - window.location.href = `/bed/${row.original.id}`} - > - {row.getVisibleCells().map((cell) => ( - - ))} - - ))} + {table.getRowModel().rows.map((row) => ( + (window.location.href = `/bed/${row.original.id}`)} + > + {row.getVisibleCells().map((cell) => ( + + ))} + + ))}
- {header.isPlaceholder ? null : ( -
( +
+ {header.isPlaceholder ? null : ( +
- {flexRender(header.column.columnDef.header, header.getContext())} - {{ - asc: ' 🔼', - desc: ' 🔽', - }[header.column.getIsSorted() as string] ?? null} -
- )} -
- {flexRender(cell.column.columnDef.cell, cell.getContext())} -
+ {flexRender(cell.column.columnDef.cell, cell.getContext())} +
From b6670840c24cb9188183fee4a7d4d57a3253f64c Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Thu, 31 Oct 2024 14:51:13 -0400 Subject: [PATCH 07/14] stop propogation of add to cart in beds table --- ui/src/components/bedset-splash-components/beds-table.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index c115422..0f025ba 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -62,7 +62,6 @@ export const BedsTable = (props: Props) => { header: 'Tissue', id: 'Tissue', }), - columnHelper.accessor((row) => row.annotation?.cell_type, { cell: (info) => ( {info.getValue() || } @@ -86,7 +85,12 @@ export const BedsTable = (props: Props) => { columnHelper.accessor((row) => row.id, { cell: (info) => ( -
+
{ + e.stopPropagation(); + }} + > {!cart.includes(info.getValue()) || (addedToCart && justAddedToCart === info.getValue()) ? (