From 2515f57a693c9d6ea8be952c9265a51c55f3a2a0 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Tue, 9 Apr 2024 19:37:20 -0400 Subject: [PATCH 01/21] replace nivo chart with chart-js-2 --- ui/index.html | 4 +- ui/package-lock.json | 27 ++++++ ui/package.json | 2 + .../charts/genomic-feature-bar.tsx | 88 ++++++------------- 4 files changed, 60 insertions(+), 61 deletions(-) diff --git a/ui/index.html b/ui/index.html index e4b78ea..3b61c53 100644 --- a/ui/index.html +++ b/ui/index.html @@ -1,10 +1,10 @@ - + - Vite + React + TS + BEDbase.org
diff --git a/ui/package-lock.json b/ui/package-lock.json index 14c9df5..b95052f 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -18,9 +18,11 @@ "axios": "^1.6.7", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "chart.js": "^4.4.2", "framer-motion": "^11.0.20", "react": "^18.2.0", "react-bootstrap": "^2.10.1", + "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-helmet-async": "^2.0.4", @@ -986,6 +988,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@kurkle/color": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", + "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" + }, "node_modules/@nivo/annotations": { "version": "0.85.1", "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.85.1.tgz", @@ -2349,6 +2356,17 @@ "url": "https://github.com/sponsors/wooorm" } }, + "node_modules/chart.js": { + "version": "4.4.2", + "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.4.2.tgz", + "integrity": "sha512-6GD7iKwFpP5kbSD4MeRRRlTnQvxfQREy36uEtm1hzHzcOqwWx0YEHuspuoNlslu+nciLIB7fjjsHkUv/FzFcOg==", + "dependencies": { + "@kurkle/color": "^0.3.0" + }, + "engines": { + "pnpm": ">=8" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", @@ -4720,6 +4738,15 @@ } } }, + "node_modules/react-chartjs-2": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-5.2.0.tgz", + "integrity": "sha512-98iN5aguJyVSxp5U3CblRLH67J8gkfyGNbiK3c+l1QI/G4irHMPQw44aEPmjVag+YKTyQ260NcF82GTQ3bdscA==", + "peerDependencies": { + "chart.js": "^4.1.1", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/ui/package.json b/ui/package.json index 06197fa..3bac8b1 100644 --- a/ui/package.json +++ b/ui/package.json @@ -21,9 +21,11 @@ "axios": "^1.6.7", "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", + "chart.js": "^4.4.2", "framer-motion": "^11.0.20", "react": "^18.2.0", "react-bootstrap": "^2.10.1", + "react-chartjs-2": "^5.2.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.3", "react-helmet-async": "^2.0.4", diff --git a/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx index 15c9def..d884738 100644 --- a/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx @@ -1,14 +1,27 @@ import { useState } from 'react'; -import { ResponsiveBar } from '@nivo/bar'; +import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; +import { Bar } from 'react-chartjs-2'; + +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); + import { components } from '../../../../bedbase-types'; import { PRIMARY_COLOR } from '../../../const'; -import { formatNumberWithCommas, roundToTwoDecimals } from '../../../utils'; +import { roundToTwoDecimals } from '../../../utils'; type BedMetadata = components['schemas']['BedMetadata']; type Props = { metadata: BedMetadata; }; +const chartOptions = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + }, +}; + export const GenomicFeatureBar = (props: Props) => { const { metadata } = props; @@ -104,65 +117,22 @@ export const GenomicFeatureBar = (props: Props) => {
- d.feature), + datasets: [ + { + label: displayAsPercentage ? 'Percentage' : 'Frequency', + data: data.map((d) => d.value), + backgroundColor: PRIMARY_COLOR, + borderColor: PRIMARY_COLOR, + borderWidth: 1, + }, + ], }} - enableGridY={false} - labelSkipWidth={12} - labelSkipHeight={12} - labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }} - valueFormat={(value) => (displayAsPercentage ? `${value}%` : formatNumberWithCommas(value))} /> + ;
From 85ab4df5b60c93dc64097c1c4ce54c5b6ae5afe6 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Tue, 9 Apr 2024 19:40:30 -0400 Subject: [PATCH 02/21] replace bedset chart with chart-js-2 --- .../charts/genomic-feature-bar.tsx | 1 - .../charts/genomic-feature-bar.tsx | 84 ++++++------------- 2 files changed, 27 insertions(+), 58 deletions(-) diff --git a/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx index d884738..ce9be2d 100644 --- a/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bed-splash-components/charts/genomic-feature-bar.tsx @@ -132,7 +132,6 @@ export const GenomicFeatureBar = (props: Props) => { ], }} /> - ; diff --git a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx index 5bb95f2..a5c13dc 100644 --- a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx @@ -1,14 +1,26 @@ -import { ResponsiveBar } from '@nivo/bar'; import { components } from '../../../../bedbase-types'; +import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; +import { Bar } from 'react-chartjs-2'; import { PRIMARY_COLOR } from '../../../const'; -import { formatNumberWithCommas, roundToTwoDecimals } from '../../../utils'; +import { roundToTwoDecimals } from '../../../utils'; import { useState } from 'react'; +ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); + type BedSetMetadata = components['schemas']['BedSetMetadata']; type Props = { metadata: BedSetMetadata; }; +const chartOptions = { + responsive: true, + plugins: { + legend: { + position: 'top' as const, + }, + }, +}; + export const GenomicFeatureBar = (props: Props) => { const { metadata } = props; const [displayAsPercentage, setDisplayAsPercentage] = useState(true); @@ -103,62 +115,20 @@ export const GenomicFeatureBar = (props: Props) => {
- d.feature), + datasets: [ + { + label: displayAsPercentage ? 'Percentage' : 'Frequency', + data: data.map((d) => d.value), + backgroundColor: PRIMARY_COLOR, + borderColor: PRIMARY_COLOR, + borderWidth: 1, + }, + ], }} - enableGridY={false} - labelTextColor={{ from: 'color', modifiers: [['darker', 3]] }} - valueFormat={(value) => (displayAsPercentage ? `${value}%` : formatNumberWithCommas(Math.round(value)))} />
From d5da72979b4c0d0487c76023ad7019cf668dbacd Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Tue, 9 Apr 2024 19:50:56 -0400 Subject: [PATCH 03/21] add error bars --- ui/package-lock.json | 9 ++ ui/package.json | 1 + .../charts/genomic-feature-bar.tsx | 109 +++++++++++++++++- 3 files changed, 115 insertions(+), 4 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index b95052f..62d018e 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -19,6 +19,7 @@ "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", "chart.js": "^4.4.2", + "chartjs-chart-error-bars": "^4.4.0", "framer-motion": "^11.0.20", "react": "^18.2.0", "react-bootstrap": "^2.10.1", @@ -2367,6 +2368,14 @@ "pnpm": ">=8" } }, + "node_modules/chartjs-chart-error-bars": { + "version": "4.4.0", + "resolved": "https://registry.npmjs.org/chartjs-chart-error-bars/-/chartjs-chart-error-bars-4.4.0.tgz", + "integrity": "sha512-idA2l7vXF+CzgEIMHppL+8SNiNEWpt4Ooobt9m+UfYkXJfuuzmjySAVdy8VjTXhI7lZvJU02KyaVeqdBPPeLXA==", + "peerDependencies": { + "chart.js": "^4.1.0" + } + }, "node_modules/chokidar": { "version": "3.6.0", "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz", diff --git a/ui/package.json b/ui/package.json index 3bac8b1..3e8419e 100644 --- a/ui/package.json +++ b/ui/package.json @@ -22,6 +22,7 @@ "bootstrap": "^5.3.3", "bootstrap-icons": "^1.11.3", "chart.js": "^4.4.2", + "chartjs-chart-error-bars": "^4.4.0", "framer-motion": "^11.0.20", "react": "^18.2.0", "react-bootstrap": "^2.10.1", diff --git a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx index a5c13dc..11f744e 100644 --- a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx @@ -1,11 +1,22 @@ import { components } from '../../../../bedbase-types'; import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js'; -import { Bar } from 'react-chartjs-2'; +import { Chart } from 'react-chartjs-2'; +import { BarWithErrorBar, BarWithErrorBarsController, PointWithErrorBar } from 'chartjs-chart-error-bars'; import { PRIMARY_COLOR } from '../../../const'; import { roundToTwoDecimals } from '../../../utils'; import { useState } from 'react'; -ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend); +ChartJS.register( + CategoryScale, + LinearScale, + BarElement, + Title, + Tooltip, + Legend, + BarWithErrorBarsController, + BarWithErrorBar, + PointWithErrorBar, +); type BedSetMetadata = components['schemas']['BedSetMetadata']; type Props = { @@ -32,30 +43,88 @@ export const GenomicFeatureBar = (props: Props) => { { feature: "3' UTR", value: roundToTwoDecimals((metadata.statistics?.mean?.threeutr_percentage || 0) * 100), + // mean - sd + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.threeutr_percentage || 0) * 100 - + (metadata.statistics?.sd?.threeutr_percentage || 0) * 100, + ), + // mean + sd + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.threeutr_percentage || 0) * 100 + + (metadata.statistics?.sd?.threeutr_percentage || 0) * 100, + ), }, { feature: "5' UTR", value: roundToTwoDecimals((metadata.statistics?.mean?.fiveutr_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.fiveutr_percentage || 0) * 100 - + (metadata.statistics?.sd?.fiveutr_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.fiveutr_percentage || 0) * 100 + + (metadata.statistics?.sd?.fiveutr_percentage || 0) * 100, + ), }, { feature: 'Exon', value: roundToTwoDecimals((metadata.statistics?.mean?.exon_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.exon_percentage || 0) * 100 - + (metadata.statistics?.sd?.exon_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.exon_percentage || 0) * 100 + + (metadata.statistics?.sd?.exon_percentage || 0) * 100, + ), }, { feature: 'Intron', value: roundToTwoDecimals((metadata.statistics?.mean?.intron_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.intron_percentage || 0) * 100 - + (metadata.statistics?.sd?.intron_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.intron_percentage || 0) * 100 + + (metadata.statistics?.sd?.intron_percentage || 0) * 100, + ), }, { feature: 'Intergenic', value: roundToTwoDecimals((metadata.statistics?.mean?.intergenic_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.intergenic_percentage || 0) * 100 - + (metadata.statistics?.sd?.intergenic_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.intergenic_percentage || 0) * 100 + + (metadata.statistics?.sd?.intergenic_percentage || 0) * 100, + ), }, { feature: 'Promoter proc', value: roundToTwoDecimals((metadata.statistics?.mean?.promoterprox_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.promoterprox_percentage || 0) * 100 - + (metadata.statistics?.sd?.promoterprox_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.promoterprox_percentage || 0) * 100 + + (metadata.statistics?.sd?.promoterprox_percentage || 0) * 100, + ), }, { feature: 'Promoter core', value: roundToTwoDecimals((metadata.statistics?.mean?.promotercore_percentage || 0) * 100), + yMin: roundToTwoDecimals( + (metadata.statistics?.mean?.promotercore_percentage || 0) * 100 - + (metadata.statistics?.sd?.promotercore_percentage || 0) * 100, + ), + yMax: roundToTwoDecimals( + (metadata.statistics?.mean?.promotercore_percentage || 0) * 100 + + (metadata.statistics?.sd?.promotercore_percentage || 0) * 100, + ), }, ]; } else { @@ -63,30 +132,54 @@ export const GenomicFeatureBar = (props: Props) => { { feature: "3' UTR", value: metadata.statistics?.mean?.threeutr_frequency || 0, + yMin: metadata.statistics?.mean?.threeutr_frequency || 0 - (metadata.statistics?.sd?.threeutr_frequency || 0), + yMax: metadata.statistics?.mean?.threeutr_frequency || 0 + (metadata.statistics?.sd?.threeutr_frequency || 0), }, { feature: "5' UTR", value: metadata.statistics?.mean?.fiveutr_frequency || 0, + yMin: metadata.statistics?.mean?.fiveutr_frequency || 0 - (metadata.statistics?.sd?.fiveutr_frequency || 0), + yMax: metadata.statistics?.mean?.fiveutr_frequency || 0 + (metadata.statistics?.sd?.fiveutr_frequency || 0), }, { feature: 'Exon', value: metadata.statistics?.mean?.exon_frequency || 0, + yMin: metadata.statistics?.mean?.exon_frequency || 0 - (metadata.statistics?.sd?.exon_frequency || 0), + yMax: metadata.statistics?.mean?.exon_frequency || 0 + (metadata.statistics?.sd?.exon_frequency || 0), }, { feature: 'Intron', value: metadata.statistics?.mean?.intron_frequency || 0, + yMin: metadata.statistics?.mean?.intron_frequency || 0 - (metadata.statistics?.sd?.intron_frequency || 0), + yMax: metadata.statistics?.mean?.intron_frequency || 0 + (metadata.statistics?.sd?.intron_frequency || 0), }, { feature: 'Intergenic', value: metadata.statistics?.mean?.intergenic_frequency || 0, + yMin: + metadata.statistics?.mean?.intergenic_frequency || 0 - (metadata.statistics?.sd?.intergenic_frequency || 0), + yMax: + metadata.statistics?.mean?.intergenic_frequency || 0 + (metadata.statistics?.sd?.intergenic_frequency || 0), }, { feature: 'Promoter proc', value: metadata.statistics?.mean?.promoterprox_frequency || 0, + yMin: + metadata.statistics?.mean?.promoterprox_frequency || + 0 - (metadata.statistics?.sd?.promoterprox_frequency || 0), + yMax: + metadata.statistics?.mean?.promoterprox_frequency || + 0 + (metadata.statistics?.sd?.promoterprox_frequency || 0), }, { feature: 'Promoter core', value: metadata.statistics?.mean?.promotercore_frequency || 0, + yMin: + metadata.statistics?.mean?.promotercore_frequency || + 0 - (metadata.statistics?.sd?.promotercore_frequency || 0), + yMax: + metadata.statistics?.mean?.promotercore_frequency || + 0 + (metadata.statistics?.sd?.promotercore_frequency || 0), }, ]; } @@ -115,14 +208,22 @@ export const GenomicFeatureBar = (props: Props) => {
- d.feature), datasets: [ { label: displayAsPercentage ? 'Percentage' : 'Frequency', - data: data.map((d) => d.value), + data: data.map((d) => { + return { + x: d.feature, + y: d.value, + yMin: d.yMin, + yMax: d.yMax, + }; + }), backgroundColor: PRIMARY_COLOR, borderColor: PRIMARY_COLOR, borderWidth: 1, From 106c2aa06d50e3be8a95e34bb611f716a9f14fcd Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Tue, 9 Apr 2024 19:51:36 -0400 Subject: [PATCH 04/21] remove nivo dependency --- ui/package-lock.json | 448 ------------------------------------------- ui/package.json | 3 - 2 files changed, 451 deletions(-) diff --git a/ui/package-lock.json b/ui/package-lock.json index 62d018e..6aa3ec8 100644 --- a/ui/package-lock.json +++ b/ui/package-lock.json @@ -8,9 +8,6 @@ "name": "bedhost-ui-2", "version": "0.0.0", "dependencies": { - "@nivo/bar": "^0.85.1", - "@nivo/core": "^0.85.1", - "@nivo/pie": "^0.85.1", "@tanstack/react-query": "^5.28.0", "@tanstack/react-query-devtools": "^5.28.0", "@tanstack/react-table": "^8.15.3", @@ -994,209 +991,6 @@ "resolved": "https://registry.npmjs.org/@kurkle/color/-/color-0.3.2.tgz", "integrity": "sha512-fuscdXJ9G1qb7W8VdHi+IwRqij3lBkosAm4ydQtEmbY58OzHXqQhvlxqEkoz0yssNVn38bcpRWgA9PP+OGoisw==" }, - "node_modules/@nivo/annotations": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/annotations/-/annotations-0.85.1.tgz", - "integrity": "sha512-+YVFKMokf6MMXsztpEoOoFwG+XcEJV90xezuqJ8FmS0hgEzJ8xTeWNxPRWfrvxndMXNrau4QIRU5GrumBmiy4Q==", - "dependencies": { - "@nivo/colors": "0.85.1", - "@nivo/core": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2", - "@types/prop-types": "^15.7.2", - "lodash": "^4.17.21", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/arcs": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/arcs/-/arcs-0.85.1.tgz", - "integrity": "sha512-UwwiSXHWY8cIgi3FADQJX8gyFCJfdx1N80MzxFGuHOYbTcBmsRMMbZYfqXJ5z/x61ulTkLcv/yVvlTEOCKMlcQ==", - "dependencies": { - "@nivo/colors": "0.85.1", - "@nivo/core": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2", - "@types/d3-shape": "^2.0.0", - "d3-shape": "^1.3.5" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/axes": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/axes/-/axes-0.85.1.tgz", - "integrity": "sha512-qhqyamgH8CAdOGEiLwwnqMpPKN6bv9FmKr/75UrNcAvWbU0PZ3unZJGKNkuFzlVAI9/RVvOUvXEE0rRBqV93qg==", - "dependencies": { - "@nivo/core": "0.85.1", - "@nivo/scales": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2", - "@types/d3-format": "^1.4.1", - "@types/d3-time-format": "^2.3.1", - "@types/prop-types": "^15.7.2", - "d3-format": "^1.4.4", - "d3-time-format": "^3.0.0", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/bar": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/bar/-/bar-0.85.1.tgz", - "integrity": "sha512-42Hjvt5YJ9O5Ew+SrZ+jd8NR30odSRuHS/B4tpsL/Yqg2MjmpB+niRMuybEhUAuhQ0aCKvwUHlocjwRRzNXqnA==", - "dependencies": { - "@nivo/annotations": "0.85.1", - "@nivo/axes": "0.85.1", - "@nivo/colors": "0.85.1", - "@nivo/core": "0.85.1", - "@nivo/legends": "0.85.1", - "@nivo/scales": "0.85.1", - "@nivo/tooltip": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2", - "@types/d3-scale": "^4.0.8", - "@types/d3-shape": "^2.0.0", - "d3-scale": "^4.0.2", - "d3-shape": "^1.3.5", - "lodash": "^4.17.21" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/colors": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/colors/-/colors-0.85.1.tgz", - "integrity": "sha512-61qG98cfyku0fTJTdtCTS3zBQKt88URh4FAvlQIoifvKg0607S2Gz5l7P9KJfN7xEK5tmE4bRaOMmjc4AZS2Kg==", - "dependencies": { - "@nivo/core": "0.85.1", - "@types/d3-color": "^3.0.0", - "@types/d3-scale": "^4.0.8", - "@types/d3-scale-chromatic": "^3.0.0", - "@types/prop-types": "^15.7.2", - "d3-color": "^3.1.0", - "d3-scale": "^4.0.2", - "d3-scale-chromatic": "^3.0.0", - "lodash": "^4.17.21", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/core": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/core/-/core-0.85.1.tgz", - "integrity": "sha512-366bc4hBicsitcinQyKGfUPpifk5W60RAjwZ4sQkY8R6OzwPMgY+eu/sfPZTNcY7rsleGg8whX0A2dBg2czWMA==", - "dependencies": { - "@nivo/recompose": "0.85.0", - "@nivo/tooltip": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2", - "@types/d3-shape": "^2.0.0", - "d3-color": "^3.1.0", - "d3-format": "^1.4.4", - "d3-interpolate": "^3.0.1", - "d3-scale": "^4.0.2", - "d3-scale-chromatic": "^3.0.0", - "d3-shape": "^1.3.5", - "d3-time-format": "^3.0.0", - "lodash": "^4.17.21", - "prop-types": "^15.7.2" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/nivo/donate" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/legends": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/legends/-/legends-0.85.1.tgz", - "integrity": "sha512-v2DRiUieo3/iV1Fft3i9pbGTkE5arXzmw+p1ptb4xfBBPpd0hSAHvaePXDY370G31dsh2v5LouL97u+q12li4Q==", - "dependencies": { - "@nivo/colors": "0.85.1", - "@nivo/core": "0.85.1", - "@types/d3-scale": "^4.0.8", - "@types/prop-types": "^15.7.2", - "d3-scale": "^4.0.2", - "prop-types": "^15.7.2" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/pie": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/pie/-/pie-0.85.1.tgz", - "integrity": "sha512-2dSQ7YIc6BLkYFadg+r6uOR5FXOCRSCWAYEIlvMapAvYqQ6/ie3ZnMtEB9idiucy8F4I/zF5C08OSr2jE4DJ9g==", - "dependencies": { - "@nivo/arcs": "0.85.1", - "@nivo/colors": "0.85.1", - "@nivo/core": "0.85.1", - "@nivo/legends": "0.85.1", - "@nivo/tooltip": "0.85.1", - "@types/d3-shape": "^2.0.0", - "d3-shape": "^1.3.5" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/recompose": { - "version": "0.85.0", - "resolved": "https://registry.npmjs.org/@nivo/recompose/-/recompose-0.85.0.tgz", - "integrity": "sha512-UptKwVJ9mlGQKn4a/JiORWbZgo6hT+qEpKBKIs9BUHRIW0a4T0BIE2PA+uDMPpNxzNFgOCu/y8iM5Rhs6QmrmA==", - "dependencies": { - "@types/prop-types": "^15.7.2", - "@types/react-lifecycles-compat": "^3.0.1", - "prop-types": "^15.7.2", - "react-lifecycles-compat": "^3.0.4" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, - "node_modules/@nivo/scales": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/scales/-/scales-0.85.1.tgz", - "integrity": "sha512-zObimCMjbbioMpQtVSGmr52OTn+BVJZsyhKHFx7CK57RA+OW/9lGnvqzc0rnFxl8WBqvHk7wReE5UI8xva/6Zw==", - "dependencies": { - "@types/d3-scale": "^4.0.8", - "@types/d3-time": "^1.1.1", - "@types/d3-time-format": "^3.0.0", - "d3-scale": "^4.0.2", - "d3-time": "^1.0.11", - "d3-time-format": "^3.0.0", - "lodash": "^4.17.21" - } - }, - "node_modules/@nivo/scales/node_modules/@types/d3-time-format": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-3.0.4.tgz", - "integrity": "sha512-or9DiDnYI1h38J9hxKEsw513+KVuFbEVhl7qdxcaudoiqWWepapUen+2vAriFGexr6W5+P4l9+HJrB39GG+oRg==" - }, - "node_modules/@nivo/scales/node_modules/d3-time": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-1.1.0.tgz", - "integrity": "sha512-Xh0isrZ5rPYYdqhAVk8VLnMEidhz5aP7htAADH6MfzgmmicPkTo8LhkLxci61/lCB7n7UmE3bN0leRt+qvkLxA==" - }, - "node_modules/@nivo/tooltip": { - "version": "0.85.1", - "resolved": "https://registry.npmjs.org/@nivo/tooltip/-/tooltip-0.85.1.tgz", - "integrity": "sha512-lX0/MuDI9HvGzYxAtE3mnriYEgFHBWf7d5BMqUifJZIyg82XkI9g3z6vwAwPKRJ52rON9Yhik42+gwFMFj3BrA==", - "dependencies": { - "@nivo/core": "0.85.1", - "@react-spring/web": "9.4.5 || ^9.7.2" - }, - "peerDependencies": { - "react": ">= 16.14.0 < 19.0.0" - } - }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -1255,66 +1049,6 @@ "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } }, - "node_modules/@react-spring/animated": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.7.3.tgz", - "integrity": "sha512-5CWeNJt9pNgyvuSzQH+uy2pvTg8Y4/OisoscZIR8/ZNLIOI+CatFBhGZpDGTF/OzdNFsAoGk3wiUYTwoJ0YIvw==", - "dependencies": { - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/core": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/core/-/core-9.7.3.tgz", - "integrity": "sha512-IqFdPVf3ZOC1Cx7+M0cXf4odNLxDC+n7IN3MDcVCTIOSBfqEcBebSv+vlY5AhM0zw05PDbjKrNmBpzv/AqpjnQ==", - "dependencies": { - "@react-spring/animated": "~9.7.3", - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/react-spring/donate" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/shared": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/shared/-/shared-9.7.3.tgz", - "integrity": "sha512-NEopD+9S5xYyQ0pGtioacLhL2luflh6HACSSDUZOwLHoxA5eku1UPuqcJqjwSD6luKjjLfiLOspxo43FUHKKSA==", - "dependencies": { - "@react-spring/types": "~9.7.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, - "node_modules/@react-spring/types": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/types/-/types-9.7.3.tgz", - "integrity": "sha512-Kpx/fQ/ZFX31OtlqVEFfgaD1ACzul4NksrvIgYfIFq9JpDHFwQkMVZ10tbo0FU/grje4rcL4EIrjekl3kYwgWw==" - }, - "node_modules/@react-spring/web": { - "version": "9.7.3", - "resolved": "https://registry.npmjs.org/@react-spring/web/-/web-9.7.3.tgz", - "integrity": "sha512-BXt6BpS9aJL/QdVqEIX9YoUy8CE6TJrU0mNCqSoxdXlIeNcEBWOfIyE6B14ENNsyQKS3wOWkiJfco0tCr/9tUg==", - "dependencies": { - "@react-spring/animated": "~9.7.3", - "@react-spring/core": "~9.7.3", - "@react-spring/shared": "~9.7.3", - "@react-spring/types": "~9.7.3" - }, - "peerDependencies": { - "react": "^16.8.0 || ^17.0.0 || ^18.0.0", - "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" - } - }, "node_modules/@remix-run/router": { "version": "1.15.3", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.15.3.tgz", @@ -1660,52 +1394,6 @@ "@babel/types": "^7.20.7" } }, - "node_modules/@types/d3-color": { - "version": "3.1.3", - "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz", - "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==" - }, - "node_modules/@types/d3-format": { - "version": "1.4.5", - "resolved": "https://registry.npmjs.org/@types/d3-format/-/d3-format-1.4.5.tgz", - "integrity": "sha512-mLxrC1MSWupOSncXN/HOlWUAAIffAEBaI4+PKy2uMPsKe4FNZlk7qrbTjmzJXITQQqBHivaks4Td18azgqnotA==" - }, - "node_modules/@types/d3-path": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-2.0.4.tgz", - "integrity": "sha512-jjZVLBjEX4q6xneKMmv62UocaFJFOTQSb/1aTzs3m3ICTOFoVaqGBHpNLm/4dVi0/FTltfBKgmOK1ECj3/gGjA==" - }, - "node_modules/@types/d3-scale": { - "version": "4.0.8", - "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.8.tgz", - "integrity": "sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==", - "dependencies": { - "@types/d3-time": "*" - } - }, - "node_modules/@types/d3-scale-chromatic": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/@types/d3-scale-chromatic/-/d3-scale-chromatic-3.0.3.tgz", - "integrity": "sha512-laXM4+1o5ImZv3RpFAsTRn3TEkzqkytiOY0Dz0sq5cnd1dtNlk6sHLon4OvqaiJb28T0S/TdsBI3Sjsy+keJrw==" - }, - "node_modules/@types/d3-shape": { - "version": "2.1.7", - "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-2.1.7.tgz", - "integrity": "sha512-HedHlfGHdwzKqX9+PiQVXZrdmGlwo7naoefJP7kCNk4Y7qcpQt1tUaoRa6qn0kbTdlaIHGO7111qLtb/6J8uuw==", - "dependencies": { - "@types/d3-path": "^2" - } - }, - "node_modules/@types/d3-time": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-1.1.4.tgz", - "integrity": "sha512-JIvy2HjRInE+TXOmIGN5LCmeO0hkFZx5f9FZ7kiN+D+YTcc8pptsiLiuHsvwxwC7VVKmJ2ExHUgNlAiV7vQM9g==" - }, - "node_modules/@types/d3-time-format": { - "version": "2.3.4", - "resolved": "https://registry.npmjs.org/@types/d3-time-format/-/d3-time-format-2.3.4.tgz", - "integrity": "sha512-xdDXbpVO74EvadI3UDxjxTdR6QIxm1FKzEA/+F8tL4GWWUg/hgvBqf6chql64U5A9ZUGWo7pEu4eNlyLwbKdhg==" - }, "node_modules/@types/debug": { "version": "4.1.12", "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz", @@ -1787,14 +1475,6 @@ "@types/react": "*" } }, - "node_modules/@types/react-lifecycles-compat": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/@types/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", - "integrity": "sha512-1CM48Y9ztL5S4wjt7DK2izrkgPp/Ql0zCJu/vHzhgl7J+BD4UbSGjHN1M2TlePms472JvOazUtAO1/G3oFZqIQ==", - "dependencies": { - "@types/react": "*" - } - }, "node_modules/@types/react-transition-group": { "version": "4.4.10", "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.10.tgz", @@ -2483,121 +2163,6 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, - "node_modules/d3-array": { - "version": "3.2.4", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz", - "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==", - "dependencies": { - "internmap": "1 - 2" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-color": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz", - "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==", - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-format": { - "version": "1.4.5", - "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-1.4.5.tgz", - "integrity": "sha512-J0piedu6Z8iB6TbIGfZgDzfXxUFN3qQRMofy2oPdXzQibYGqPB/9iMcxr/TGalU+2RsyDO+U4f33id8tbnSRMQ==" - }, - "node_modules/d3-interpolate": { - "version": "3.0.1", - "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz", - "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==", - "dependencies": { - "d3-color": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-path": { - "version": "1.0.9", - "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz", - "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg==" - }, - "node_modules/d3-scale": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz", - "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==", - "dependencies": { - "d3-array": "2.10.0 - 3", - "d3-format": "1 - 3", - "d3-interpolate": "1.2.0 - 3", - "d3-time": "2.1.1 - 3", - "d3-time-format": "2 - 4" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-scale-chromatic": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz", - "integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==", - "dependencies": { - "d3-color": "1 - 3", - "d3-interpolate": "1 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-shape": { - "version": "1.3.7", - "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-1.3.7.tgz", - "integrity": "sha512-EUkvKjqPFUAZyOlhY5gzCxCeI0Aep04LwIRpsZ/mLFelJiUfnK56jo5JMDSE7yyP2kLSb6LtF+S5chMk7uqPqw==", - "dependencies": { - "d3-path": "1" - } - }, - "node_modules/d3-time": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz", - "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==", - "dependencies": { - "d3-array": "2 - 3" - }, - "engines": { - "node": ">=12" - } - }, - "node_modules/d3-time-format": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-3.0.0.tgz", - "integrity": "sha512-UXJh6EKsHBTjopVqZBhFysQcoXSv/5yLONZvkQ5Kk3qbwiUYkdX17Xa1PT6U1ZWXGGfB1ey5L8dKMlFq2DO0Ag==", - "dependencies": { - "d3-time": "1 - 2" - } - }, - "node_modules/d3-time-format/node_modules/d3-array": { - "version": "2.12.1", - "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-2.12.1.tgz", - "integrity": "sha512-B0ErZK/66mHtEsR1TkPEEkwdy+WDesimkM5gpZr5Dsg54BiTA5RXtYW5qTLIAcekaS9xfZrzBLF/OAkB3Qn1YQ==", - "dependencies": { - "internmap": "^1.0.0" - } - }, - "node_modules/d3-time-format/node_modules/d3-time": { - "version": "2.1.1", - "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-2.1.1.tgz", - "integrity": "sha512-/eIQe/eR4kCQwq7yxi7z4c6qEXf2IYGcjoWB5OOQy4Tq9Uv39/947qlDcN2TLkiTzQWzvnsuYPB9TrWaNfipKQ==", - "dependencies": { - "d3-array": "2" - } - }, - "node_modules/d3-time-format/node_modules/internmap": { - "version": "1.0.1", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-1.0.1.tgz", - "integrity": "sha512-lDB5YccMydFBtasVtxnZ3MRBHuaoE8GKsppq+EchKL2U4nK/DmEpPHNH8MZe5HkMtpSiTSOZwfN0tzYjO/lJEw==" - }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -3511,14 +3076,6 @@ "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.2.tgz", "integrity": "sha512-EcKzdTHVe8wFVOGEYXiW9WmJXPjqi1T+234YpJr98RiFYKHV3cdy1+3mkTE+KHTHxFFLH51SfaGOoUdW+v7ViQ==" }, - "node_modules/internmap": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz", - "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==", - "engines": { - "node": ">=12" - } - }, "node_modules/invariant": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", @@ -3731,11 +3288,6 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/lodash": { - "version": "4.17.21", - "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", - "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" - }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", diff --git a/ui/package.json b/ui/package.json index 3e8419e..378350d 100644 --- a/ui/package.json +++ b/ui/package.json @@ -11,9 +11,6 @@ "generate-types": "npx openapi-typescript http://127.0.0.1:8000/openapi.json -o bedbase-types.d.ts" }, "dependencies": { - "@nivo/bar": "^0.85.1", - "@nivo/core": "^0.85.1", - "@nivo/pie": "^0.85.1", "@tanstack/react-query": "^5.28.0", "@tanstack/react-query-devtools": "^5.28.0", "@tanstack/react-table": "^8.15.3", From b255783fbed1e80c937f56bd474a454c01eb6a01 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 08:56:52 -0400 Subject: [PATCH 05/21] tweaks to text2bedset code --- .../charts/genomic-feature-bar.tsx | 2 +- ui/src/components/search/search-bedset-table.tsx | 8 ++------ ui/src/components/search/text2bedset.tsx | 12 +++++------- ui/src/queries/useText2BedSetSearch.ts | 2 +- 4 files changed, 9 insertions(+), 15 deletions(-) diff --git a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx index 11f744e..a5b5280 100644 --- a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx @@ -218,7 +218,7 @@ export const GenomicFeatureBar = (props: Props) => { label: displayAsPercentage ? 'Percentage' : 'Frequency', data: data.map((d) => { return { - x: d.feature, + // x: d.feature, y: d.value, yMin: d.yMin, yMax: d.yMax, diff --git a/ui/src/components/search/search-bedset-table.tsx b/ui/src/components/search/search-bedset-table.tsx index 04018ad..b4bdf01 100644 --- a/ui/src/components/search/search-bedset-table.tsx +++ b/ui/src/components/search/search-bedset-table.tsx @@ -1,8 +1,4 @@ -import { ProgressBar } from 'react-bootstrap'; import { components } from '../../../bedbase-types'; -import { roundToTwoDecimals } from '../../utils'; -import { useBedCart } from '../../contexts/bedcart-context'; -import toast from 'react-hot-toast'; type SearchResponse = components['schemas']['BedSetListResult']; @@ -12,7 +8,7 @@ type Props = { export const SearchBedSetResultTable = (props: Props) => { const { results } = props; - const { cart, addBedToCart, removeBedFromCart } = useBedCart(); + return ( @@ -20,7 +16,7 @@ export const SearchBedSetResultTable = (props: Props) => { - + diff --git a/ui/src/components/search/text2bedset.tsx b/ui/src/components/search/text2bedset.tsx index b12af28..07ad9e5 100644 --- a/ui/src/components/search/text2bedset.tsx +++ b/ui/src/components/search/text2bedset.tsx @@ -1,6 +1,5 @@ import { Col, Row } from 'react-bootstrap'; import { SearchBar } from './search-bar'; -import { SearchResultsTable } from './search-results-table'; import { SearchingJumper } from './searching-jumper'; import { useSearchParams } from 'react-router-dom'; import { useEffect, useState } from 'react'; @@ -8,7 +7,7 @@ import { useText2BedSetSearch } from '../../queries/useText2BedSetSearch'; import { ErrorPage } from '../common/error-page'; import { TableToolbar } from './table-toolbar'; import { PaginationBar } from './pagination-bar'; -import {SearchBedSetResultTable} from "./search-bedset-table.tsx"; +import { SearchBedSetResultTable } from './search-bedset-table.tsx'; export const Text2BedSet = () => { const [searchParams] = useSearchParams(); @@ -23,11 +22,11 @@ export const Text2BedSet = () => { refetch: onSearch, } = useText2BedSetSearch({ q: searchTerm, - limit: limit, // TODO: make this a variable + limit: limit, offset: offset, autoRun: false, }); - debugger; + useEffect(() => { if (searchTerm) { onSearch(); @@ -39,7 +38,6 @@ export const Text2BedSet = () => { return ; } } - debugger; return (
@@ -56,12 +54,12 @@ export const Text2BedSet = () => { {results ? (
- {' '} + {' '}
) : (
- Try seaching for some BED files! + Try seaching for some BEDsets!
)}
diff --git a/ui/src/queries/useText2BedSetSearch.ts b/ui/src/queries/useText2BedSetSearch.ts index 127ff3b..91aa102 100644 --- a/ui/src/queries/useText2BedSetSearch.ts +++ b/ui/src/queries/useText2BedSetSearch.ts @@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query'; import { useBedbaseApi } from '../contexts/api-context'; import { components } from '../../bedbase-types'; -type SearchResponse = components['schemas']['BedListSearchResult']; +type SearchResponse = components['schemas']['BedSetListResult']; type SearchQuery = { q: string; limit?: number; From 3a000d1cf91eb7e2b2dbf521db43cd5b7a186132 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 09:45:00 -0400 Subject: [PATCH 06/21] remove old charts --- .../charts/promoter-analysis.tsx | 93 ------------------- .../charts/promoter-analysis.tsx | 92 ------------------ 2 files changed, 185 deletions(-) delete mode 100644 ui/src/components/bed-splash-components/charts/promoter-analysis.tsx delete mode 100644 ui/src/components/bedset-splash-components/charts/promoter-analysis.tsx diff --git a/ui/src/components/bed-splash-components/charts/promoter-analysis.tsx b/ui/src/components/bed-splash-components/charts/promoter-analysis.tsx deleted file mode 100644 index 57c77f5..0000000 --- a/ui/src/components/bed-splash-components/charts/promoter-analysis.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { ResponsiveBar } from '@nivo/bar'; -import { components } from '../../../../bedbase-types'; -import { PRIMARY_COLOR } from '../../../const'; -import { roundToTwoDecimals } from '../../../utils'; - -type BedMetadata = components['schemas']['BedMetadata']; -type Props = { - metadata: BedMetadata; -}; - -export const PromoterAnalysisBar = (props: Props) => { - const { metadata } = props; - return ( -
-
-

Promoter analysis

-
- -
-
-

Learn more

-
-
-
- ); -}; diff --git a/ui/src/components/bedset-splash-components/charts/promoter-analysis.tsx b/ui/src/components/bedset-splash-components/charts/promoter-analysis.tsx deleted file mode 100644 index 066c760..0000000 --- a/ui/src/components/bedset-splash-components/charts/promoter-analysis.tsx +++ /dev/null @@ -1,92 +0,0 @@ -import { ResponsiveBar } from '@nivo/bar'; -import { components } from '../../../../bedbase-types'; -import { PRIMARY_COLOR } from '../../../const'; -import { roundToTwoDecimals } from '../../../utils'; - -type BedSetMetadata = components['schemas']['BedSetMetadata']; -type Props = { - metadata: BedSetMetadata; -}; - -export const PromoterAnalysisBar = (props: Props) => { - const { metadata } = props; - return ( -
-
-

Promoter analysis

-
- -
-
-

Learn more

-
-
-
- ); -}; From 5b8cfe8b0cc679beed02fa63688d96e5781cf661 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 10:58:17 -0400 Subject: [PATCH 07/21] smal tweaks to fix bugs and inconsistencies --- .../charts/genomic-feature-bar.tsx | 37 ++++++++++--------- .../search/search-results-table.tsx | 2 +- 2 files changed, 20 insertions(+), 19 deletions(-) diff --git a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx index a5b5280..5333aa9 100644 --- a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx @@ -132,54 +132,54 @@ export const GenomicFeatureBar = (props: Props) => { { feature: "3' UTR", value: metadata.statistics?.mean?.threeutr_frequency || 0, - yMin: metadata.statistics?.mean?.threeutr_frequency || 0 - (metadata.statistics?.sd?.threeutr_frequency || 0), - yMax: metadata.statistics?.mean?.threeutr_frequency || 0 + (metadata.statistics?.sd?.threeutr_frequency || 0), + yMin: (metadata.statistics?.mean?.threeutr_frequency || 0) - (metadata.statistics?.sd?.threeutr_frequency || 0), + yMax: (metadata.statistics?.mean?.threeutr_frequency || 0) + (metadata.statistics?.sd?.threeutr_frequency || 0), }, { feature: "5' UTR", value: metadata.statistics?.mean?.fiveutr_frequency || 0, - yMin: metadata.statistics?.mean?.fiveutr_frequency || 0 - (metadata.statistics?.sd?.fiveutr_frequency || 0), - yMax: metadata.statistics?.mean?.fiveutr_frequency || 0 + (metadata.statistics?.sd?.fiveutr_frequency || 0), + yMin: (metadata.statistics?.mean?.fiveutr_frequency || 0) - (metadata.statistics?.sd?.fiveutr_frequency || 0), + yMax: (metadata.statistics?.mean?.fiveutr_frequency || 0) + (metadata.statistics?.sd?.fiveutr_frequency || 0), }, { feature: 'Exon', value: metadata.statistics?.mean?.exon_frequency || 0, - yMin: metadata.statistics?.mean?.exon_frequency || 0 - (metadata.statistics?.sd?.exon_frequency || 0), - yMax: metadata.statistics?.mean?.exon_frequency || 0 + (metadata.statistics?.sd?.exon_frequency || 0), + yMin: (metadata.statistics?.mean?.exon_frequency || 0) - (metadata.statistics?.sd?.exon_frequency || 0), + yMax: (metadata.statistics?.mean?.exon_frequency || 0) + (metadata.statistics?.sd?.exon_frequency || 0), }, { feature: 'Intron', value: metadata.statistics?.mean?.intron_frequency || 0, - yMin: metadata.statistics?.mean?.intron_frequency || 0 - (metadata.statistics?.sd?.intron_frequency || 0), - yMax: metadata.statistics?.mean?.intron_frequency || 0 + (metadata.statistics?.sd?.intron_frequency || 0), + yMin: (metadata.statistics?.mean?.intron_frequency || 0) - (metadata.statistics?.sd?.intron_frequency || 0), + yMax: (metadata.statistics?.mean?.intron_frequency || 0) + (metadata.statistics?.sd?.intron_frequency || 0), }, { feature: 'Intergenic', value: metadata.statistics?.mean?.intergenic_frequency || 0, yMin: - metadata.statistics?.mean?.intergenic_frequency || 0 - (metadata.statistics?.sd?.intergenic_frequency || 0), + (metadata.statistics?.mean?.intergenic_frequency || 0) - (metadata.statistics?.sd?.intergenic_frequency || 0), yMax: - metadata.statistics?.mean?.intergenic_frequency || 0 + (metadata.statistics?.sd?.intergenic_frequency || 0), + (metadata.statistics?.mean?.intergenic_frequency || 0) + (metadata.statistics?.sd?.intergenic_frequency || 0), }, { feature: 'Promoter proc', value: metadata.statistics?.mean?.promoterprox_frequency || 0, yMin: - metadata.statistics?.mean?.promoterprox_frequency || - 0 - (metadata.statistics?.sd?.promoterprox_frequency || 0), + (metadata.statistics?.mean?.promoterprox_frequency || 0) - + (metadata.statistics?.sd?.promoterprox_frequency || 0), yMax: - metadata.statistics?.mean?.promoterprox_frequency || - 0 + (metadata.statistics?.sd?.promoterprox_frequency || 0), + (metadata.statistics?.mean?.promoterprox_frequency || 0) + + (metadata.statistics?.sd?.promoterprox_frequency || 0), }, { feature: 'Promoter core', value: metadata.statistics?.mean?.promotercore_frequency || 0, yMin: - metadata.statistics?.mean?.promotercore_frequency || - 0 - (metadata.statistics?.sd?.promotercore_frequency || 0), + (metadata.statistics?.mean?.promotercore_frequency || 0) - + (metadata.statistics?.sd?.promotercore_frequency || 0), yMax: - metadata.statistics?.mean?.promotercore_frequency || - 0 + (metadata.statistics?.sd?.promotercore_frequency || 0), + (metadata.statistics?.mean?.promotercore_frequency || 0) + + (metadata.statistics?.sd?.promotercore_frequency || 0), }, ]; } @@ -217,6 +217,7 @@ export const GenomicFeatureBar = (props: Props) => { { label: displayAsPercentage ? 'Percentage' : 'Frequency', data: data.map((d) => { + console.log(d); return { // x: d.feature, y: d.value, diff --git a/ui/src/components/search/search-results-table.tsx b/ui/src/components/search/search-results-table.tsx index 68f0af7..c3175d0 100644 --- a/ui/src/components/search/search-results-table.tsx +++ b/ui/src/components/search/search-results-table.tsx @@ -33,7 +33,7 @@ export const SearchResultsTable = (props: Props) => { From 21f8f10b41e748c8b39d3900e50bf5c9bf3369ad Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 13:00:41 -0400 Subject: [PATCH 08/21] change things --- bedhost/routers/bed_api.py | 4 ++-- ui/.env | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/bedhost/routers/bed_api.py b/bedhost/routers/bed_api.py index 7036c27..d9f1071 100644 --- a/bedhost/routers/bed_api.py +++ b/bedhost/routers/bed_api.py @@ -271,10 +271,10 @@ async def text_to_bed_search(query, limit: int = 10, offset: int = 0): tags=["search"], response_model=BedListSearchResult, ) -async def text_to_bed_search( +async def bed_to_bed_search( file: UploadFile = File(None), limit: int = 10, offset: int = 0 ): - _LOGGER.info(f"Searching for bedfiles...") + _LOGGER.info("Searching for bedfiles...") if file is not None: with tempfile.TemporaryDirectory() as dirpath: diff --git a/ui/.env b/ui/.env index 6584184..7e54f71 100644 --- a/ui/.env +++ b/ui/.env @@ -1,2 +1,2 @@ -# VITE_API_BASE=http://localhost:8000/v1 -VITE_API_BASE=https://api-dev.bedbase.org/v1 \ No newline at end of file +VITE_API_BASE=http://localhost:8000/v1 +# VITE_API_BASE=https://api-dev.bedbase.org/v1 \ No newline at end of file From e7d972cb376b0e84504bd46ec06f67994241b6b0 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 13:55:02 -0400 Subject: [PATCH 09/21] updates --- .../bedset-splash-components/beds-table.tsx | 39 +++++---- ui/src/custom.scss | 4 + ui/src/pages/bedset-splash.tsx | 86 +++++++++---------- ui/src/queries/useBedSetBedfiles.ts | 29 +++++++ 4 files changed, 96 insertions(+), 62 deletions(-) create mode 100644 ui/src/queries/useBedSetBedfiles.ts diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index 19acbf7..74f1556 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -1,11 +1,9 @@ import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; import { useState } from 'react'; -import { BedMetadataModal } from '../modals/bed-metadata-modal'; import { useBedCart } from '../../contexts/bedcart-context'; +import { components } from '../../../bedbase-types'; -type Bed = { - id: string; -}; +type Bed = components['schemas']['BedSetBedFiles']['results'][number]; type Props = { beds: Bed[]; @@ -16,31 +14,35 @@ const columnHelper = createColumnHelper(); export const BedsTable = (props: Props) => { const { beds } = props; - const [metadataModal, setMetadataModal] = useState(false); - const [selectedBed, setSelectedBed] = useState(null); const [addedToCart, setAddedToCart] = useState(false); const [justAddedToCart, setJustAddedToCart] = useState(null); const { addBedToCart, removeBedFromCart, cart } = useBedCart(); const columns = [ + columnHelper.accessor('bed_format', { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Format', + }), + columnHelper.accessor('name', { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Name', + }), + columnHelper.accessor('description', { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Description', + }), columnHelper.accessor('id', { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Record Identifier', }), + columnHelper.accessor('id', { cell: (info) => (
- {!cart.includes(info.getValue()) || (addedToCart && justAddedToCart === info.getValue()) ? (
))} - + {/* {table.getFooterGroups().map((footerGroup) => ( {footerGroup.headers.map((header) => ( @@ -106,10 +108,9 @@ export const BedsTable = (props: Props) => { ))} ))} - + */}
Bedset ID Name DescriptionNumber of BedsNumber of Beds Actions
- {selectedBed && }
); }; diff --git a/ui/src/custom.scss b/ui/src/custom.scss index b5eb9e0..ecf508b 100644 --- a/ui/src/custom.scss +++ b/ui/src/custom.scss @@ -68,6 +68,10 @@ a { } } +.max-cell-width { + width: 20rem !important; +} + // tailwind transition class .transition-all { transition-property: all; diff --git a/ui/src/pages/bedset-splash.tsx b/ui/src/pages/bedset-splash.tsx index 9db92c1..02eceff 100644 --- a/ui/src/pages/bedset-splash.tsx +++ b/ui/src/pages/bedset-splash.tsx @@ -10,14 +10,15 @@ import { GenomicFeatureBar } from '../components/bedset-splash-components/charts import { Plots } from '../components/bedset-splash-components/plots'; import { GCContentCard } from '../components/bedset-splash-components/cards/gc-content-card'; import { BedsTable } from '../components/bedset-splash-components/beds-table'; -import {AxiosError} from "axios"; +import { AxiosError } from 'axios'; +import { useBedsetBedfiles } from '../queries/useBedSetBedfiles'; export const BedsetSplash = () => { const params = useParams(); const bedsetId = params.id; const { - isLoading, + isFetching: isLoadingMetadata, data: metadata, error, } = useBedsetMetadata({ @@ -25,7 +26,12 @@ export const BedsetSplash = () => { autoRun: true, }); - if (isLoading) { + const { isFetching: isLoadingBedfiles, data: bedfiles } = useBedsetBedfiles({ + id: bedsetId, + autoRun: true, + }); + + if (isLoadingMetadata) { return (
@@ -58,40 +64,40 @@ 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} -

-
-
-

- Are you sure you have the correct record identifier? If you believe this is an error, please open an - issue: on GitHub -

-
- + +
+

Oh no!

+
+

+ We could not find BEDset with record identifier:
+ {bedsetId} +

+
+
+

+ Are you sure you have the correct record identifier? If you believe this is an error, please open an + issue: on GitHub +

+
+ - +
+ ); } } else { @@ -124,13 +130,7 @@ export const BedsetSplash = () => {

BED files in this BED set

- ({ - id: id, - })) || [] - } - /> + {isLoadingBedfiles ? : bedfiles && }
diff --git a/ui/src/queries/useBedSetBedfiles.ts b/ui/src/queries/useBedSetBedfiles.ts new file mode 100644 index 0000000..ffa5edc --- /dev/null +++ b/ui/src/queries/useBedSetBedfiles.ts @@ -0,0 +1,29 @@ +import type { components } from '../../bedbase-types'; +import { useQuery } from '@tanstack/react-query'; +import { useBedbaseApi } from '../contexts/api-context.tsx'; + +type BedSetBedfilesResponse = components['schemas']['BedSetBedFiles']; + +type BedSetBedfilesQuery = { + id?: string; + autoRun?: boolean; +}; + +export const useBedsetBedfiles = (query: BedSetBedfilesQuery) => { + const { api } = useBedbaseApi(); + const { id, autoRun } = query; + let enabled = false; + if (autoRun !== undefined && autoRun && id) { + enabled = true; + } + + return useQuery({ + queryKey: ['bedset-bedfiles', id], + queryFn: async () => { + const { data } = await api.get(`/bedset/${id}/bedfiles`); + return data; + }, + enabled: enabled, + staleTime: 0, + }); +}; From 4a21ed99134bae291c7e6d917b3e8cb7020177e2 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 13:58:59 -0400 Subject: [PATCH 10/21] more tweaks --- .../bedset-splash-components/beds-table.tsx | 8 ++++++-- ui/src/pages/bedset-splash.tsx | 13 ++++++++++++- 2 files changed, 18 insertions(+), 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 74f1556..6c297ad 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -30,7 +30,11 @@ export const BedsTable = (props: Props) => { header: 'Name', }), columnHelper.accessor('description', { - cell: (info) => {info.getValue()}, + cell: (info) => ( + + {info.getValue() || No description} + + ), footer: (info) => info.column.id, header: 'Description', }), @@ -76,7 +80,7 @@ export const BedsTable = (props: Props) => { }); return ( -
+
{table.getHeaderGroups().map((headerGroup) => ( diff --git a/ui/src/pages/bedset-splash.tsx b/ui/src/pages/bedset-splash.tsx index 02eceff..d31ccf6 100644 --- a/ui/src/pages/bedset-splash.tsx +++ b/ui/src/pages/bedset-splash.tsx @@ -130,7 +130,18 @@ export const BedsetSplash = () => {

BED files in this BED set

- {isLoadingBedfiles ? : bedfiles && } + {isLoadingBedfiles ? ( +
+ + {Array.from({ length: 10 }).map((_, index) => ( +
+ +
+ ))} +
+ ) : ( + bedfiles && + )} From a9d92dc513ace6e6b1073150f90a95308e9a8e01 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Wed, 10 Apr 2024 14:11:27 -0400 Subject: [PATCH 11/21] remove console.log --- .../bedset-splash-components/charts/genomic-feature-bar.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx index 5333aa9..3c75491 100644 --- a/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx +++ b/ui/src/components/bedset-splash-components/charts/genomic-feature-bar.tsx @@ -217,7 +217,6 @@ export const GenomicFeatureBar = (props: Props) => { { label: displayAsPercentage ? 'Percentage' : 'Frequency', data: data.map((d) => { - console.log(d); return { // x: d.feature, y: d.value, From d21f52694557dcce286554e3534d11bc6baa4ff4 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Wed, 10 Apr 2024 21:52:26 -0400 Subject: [PATCH 12/21] updated bedset table --- bedhost/routers/bedset_api.py | 7 +------ .../components/bedset-splash-components/beds-table.tsx | 9 +++++++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/bedhost/routers/bedset_api.py b/bedhost/routers/bedset_api.py index f513b05..25aa483 100644 --- a/bedhost/routers/bedset_api.py +++ b/bedhost/routers/bedset_api.py @@ -101,13 +101,8 @@ async def get_bedset_metadata( ) async def get_bedfiles_in_bedset( bedset_id: str, - limit: int = 100, - offset: int = 0, - full: bool = False, ): - return bbagent.bedset.get_bedset_bedfiles( - bedset_id, limit=limit, offset=offset, full=full - ) + return bbagent.bedset.get_bedset_bedfiles(bedset_id) # TODO: how are we using it? diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index 6c297ad..ed20469 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -19,10 +19,15 @@ export const BedsTable = (props: Props) => { const { addBedToCart, removeBedFromCart, cart } = useBedCart(); const columns = [ - columnHelper.accessor('bed_format', { + columnHelper.accessor('genome_alias', { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, - header: 'Format', + header: 'Genome', + }), + columnHelper.accessor('bed_type', { + cell: (info) => {info.getValue()}, + footer: (info) => info.column.id, + header: 'Type', }), columnHelper.accessor('name', { cell: (info) => {info.getValue()}, From 5b5b939ca2fdfd2179108ff7065daf0419fec352 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Thu, 11 Apr 2024 09:20:23 -0400 Subject: [PATCH 13/21] sortable bed table for bedset splash --- .../bedset-splash-components/beds-table.tsx | 47 +++++++++++++++++-- 1 file changed, 44 insertions(+), 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 ed20469..9e8e826 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -1,4 +1,11 @@ -import { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table'; +import { + createColumnHelper, + flexRender, + getCoreRowModel, + useReactTable, + SortingState, + getSortedRowModel, +} from '@tanstack/react-table'; import { useState } from 'react'; import { useBedCart } from '../../contexts/bedcart-context'; import { components } from '../../../bedbase-types'; @@ -16,6 +23,8 @@ export const BedsTable = (props: Props) => { const [addedToCart, setAddedToCart] = useState(false); const [justAddedToCart, setJustAddedToCart] = useState(null); + const [sorting, setSorting] = useState([]); + const { addBedToCart, removeBedFromCart, cart } = useBedCart(); const columns = [ @@ -23,16 +32,19 @@ export const BedsTable = (props: Props) => { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Genome', + id: 'genome', }), columnHelper.accessor('bed_type', { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Type', + id: 'bed-type', }), columnHelper.accessor('name', { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Name', + id: 'name', }), columnHelper.accessor('description', { cell: (info) => ( @@ -42,11 +54,13 @@ export const BedsTable = (props: Props) => { ), footer: (info) => info.column.id, header: 'Description', + id: 'description', }), columnHelper.accessor('id', { cell: (info) => {info.getValue()}, footer: (info) => info.column.id, header: 'Record Identifier', + id: 'record-identifier', }), columnHelper.accessor('id', { @@ -74,14 +88,21 @@ export const BedsTable = (props: Props) => { )} ), + enableSorting: false, header: 'Actions', + id: 'actions', }), ]; const table = useReactTable({ data: beds, columns, + state: { + sorting, + }, + onSortingChange: setSorting, getCoreRowModel: getCoreRowModel(), + getSortedRowModel: getSortedRowModel(), }); return ( @@ -91,8 +112,28 @@ export const BedsTable = (props: Props) => { {table.getHeaderGroups().map((headerGroup) => ( {headerGroup.headers.map((header) => ( - ))} From b47282233ec95b941b70f52c8fc625e42480846e Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Thu, 11 Apr 2024 09:43:49 -0400 Subject: [PATCH 14/21] client-side pagination --- .../bedset-splash-components/beds-table.tsx | 73 ++++++++++++++++++- 1 file changed, 70 insertions(+), 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 9e8e826..ee540b1 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -1,10 +1,12 @@ import { + PaginationState, + SortingState, createColumnHelper, flexRender, - getCoreRowModel, useReactTable, - SortingState, + getCoreRowModel, getSortedRowModel, + getPaginationRowModel, } from '@tanstack/react-table'; import { useState } from 'react'; import { useBedCart } from '../../contexts/bedcart-context'; @@ -24,6 +26,10 @@ export const BedsTable = (props: Props) => { const [addedToCart, setAddedToCart] = useState(false); const [justAddedToCart, setJustAddedToCart] = useState(null); const [sorting, setSorting] = useState([]); + const [pagination, setPagination] = useState({ + pageIndex: 0, + pageSize: 20, + }); const { addBedToCart, removeBedFromCart, cart } = useBedCart(); @@ -99,15 +105,18 @@ export const BedsTable = (props: Props) => { columns, state: { sorting, + pagination, }, onSortingChange: setSorting, + onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), + getPaginationRowModel: getPaginationRowModel(), }); return (
-
- {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())} + + {header.isPlaceholder ? null : ( +
+ {flexRender(header.column.columnDef.header, header.getContext())} + {{ + asc: ' 🔼', + desc: ' 🔽', + }[header.column.getIsSorted() as string] ?? null} +
+ )}
+
{table.getHeaderGroups().map((headerGroup) => ( @@ -161,6 +170,64 @@ export const BedsTable = (props: Props) => { */}
+
+
+ Showing + + {table.getState().pagination.pageSize * table.getState().pagination.pageIndex + 1} to{' '} + {Math.min( + table.getState().pagination.pageSize * (table.getState().pagination.pageIndex + 1), + table.getRowCount(), + )} + + of {table.getRowCount().toLocaleString()} files +
+
+
+ + + + +
+ +
+
); }; From 5bc60f81939e025abe094870f7e6d6a11e3d8403 Mon Sep 17 00:00:00 2001 From: Nathan LeRoy Date: Thu, 11 Apr 2024 09:51:11 -0400 Subject: [PATCH 15/21] add basic global filtering --- .../bedset-splash-components/beds-table.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ui/src/components/bedset-splash-components/beds-table.tsx b/ui/src/components/bedset-splash-components/beds-table.tsx index ee540b1..e03c6cd 100644 --- a/ui/src/components/bedset-splash-components/beds-table.tsx +++ b/ui/src/components/bedset-splash-components/beds-table.tsx @@ -6,6 +6,10 @@ import { useReactTable, getCoreRowModel, getSortedRowModel, + getFacetedMinMaxValues, + getFacetedRowModel, + getFacetedUniqueValues, + getFilteredRowModel, getPaginationRowModel, } from '@tanstack/react-table'; import { useState } from 'react'; @@ -30,6 +34,7 @@ export const BedsTable = (props: Props) => { pageIndex: 0, pageSize: 20, }); + const [globalFilter, setGlobalFilter] = useState(''); const { addBedToCart, removeBedFromCart, cart } = useBedCart(); @@ -106,16 +111,29 @@ export const BedsTable = (props: Props) => { state: { sorting, pagination, + globalFilter, }, onSortingChange: setSorting, onPaginationChange: setPagination, getCoreRowModel: getCoreRowModel(), getSortedRowModel: getSortedRowModel(), getPaginationRowModel: getPaginationRowModel(), + getFacetedRowModel: getFacetedRowModel(), + getFacetedUniqueValues: getFacetedUniqueValues(), + getFacetedMinMaxValues: getFacetedMinMaxValues(), + getFilteredRowModel: getFilteredRowModel(), }); return (
+
+ setGlobalFilter(e.target.value)} + /> +
{table.getHeaderGroups().map((headerGroup) => ( From 6d34a4bdae57b401acf3da344b9906b6fa222ed9 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 11 Apr 2024 11:02:51 -0400 Subject: [PATCH 16/21] updated service info --- bedhost/const.py | 10 ---------- bedhost/data_models.py | 8 ++++++++ bedhost/main.py | 10 ++++------ bedhost/routers/base_api.py | 32 ++++++++++++++++++++++--------- requirements/requirements-all.txt | 4 ++-- 5 files changed, 37 insertions(+), 27 deletions(-) diff --git a/bedhost/const.py b/bedhost/const.py index 010d936..4b7065a 100644 --- a/bedhost/const.py +++ b/bedhost/const.py @@ -1,17 +1,7 @@ import os -from platform import python_version -from bbconf import __version__ as bbconf_v - -from ._version import __version__ as SERVER_VERSION PKG_NAME = "bedhost" -# for now bedstat version is hard coded -ALL_VERSIONS = { - "bedhost_version": SERVER_VERSION, - "bbconf_version": bbconf_v, - "python_version": python_version(), -} TEMPLATES_DIRNAME = "templates" STATIC_DIRNAME = "../docs" STATIC_PATH = os.path.join(os.path.dirname(os.path.abspath(__file__)), STATIC_DIRNAME) diff --git a/bedhost/data_models.py b/bedhost/data_models.py index 65c4b2c..7d55c4c 100644 --- a/bedhost/data_models.py +++ b/bedhost/data_models.py @@ -47,9 +47,16 @@ class ComponentVersions(BaseModel): bedhost_version: str bbconf_version: str python_version: str + geniml_version: str openapi_version: str +class EmbeddingModels(BaseModel): + vec2vec: str + region2vec: str + text2vec: str + + class ServiceInfoResponse(BaseModel): id: str name: str @@ -62,3 +69,4 @@ class ServiceInfoResponse(BaseModel): environment: str version: str component_versions: ComponentVersions + embedding_models: EmbeddingModels diff --git a/bedhost/main.py b/bedhost/main.py index 0e907f0..b14e424 100644 --- a/bedhost/main.py +++ b/bedhost/main.py @@ -4,14 +4,13 @@ from fastapi import FastAPI, Request from fastapi.middleware.cors import CORSMiddleware -from fastapi.responses import JSONResponse, HTMLResponse +from fastapi.responses import HTMLResponse import markdown from fastapi.templating import Jinja2Templates from bbconf.exceptions import ( MissingObjectError, MissingThumbnailError, - BadAccessMethodError, BEDFileNotFoundError, BedSetNotFoundError, ) @@ -24,11 +23,10 @@ drs_response, ) from .cli import build_parser +from ._version import __version__ as bedhost_version from .const import ( - ALL_VERSIONS, PKG_NAME, STATIC_PATH, - SERVER_VERSION, ) @@ -62,7 +60,7 @@ app = FastAPI( title=PKG_NAME, description="BED file/sets statistics and image server API", - version=SERVER_VERSION, + version=bedhost_version, docs_url="/docs", openapi_tags=tags_metadata, ) @@ -72,7 +70,7 @@ "http://localhost:8000", "http://localhost:5173", "https://bedbase.org", - "*", # allow cross origin resource sharing, since this is a public API + "*", # allow cross-origin resource sharing, since this is a public API ] app.add_middleware( diff --git a/bedhost/routers/base_api.py b/bedhost/routers/base_api.py index 498827d..5cbcd23 100644 --- a/bedhost/routers/base_api.py +++ b/bedhost/routers/base_api.py @@ -7,16 +7,21 @@ from fastapi import APIRouter from bbconf.models.base_models import StatsReturn - +from platform import python_version +from bbconf import __version__ as bbconf_version +from geniml import __version__ as geniml_version from ..main import bbagent, app -from ..const import ALL_VERSIONS from ..helpers import get_openapi_version from ..data_models import ServiceInfoResponse +from .._version import __version__ as bedhost_version router = APIRouter(prefix="/v1", tags=["base"]) +packages_versions = {} + + @router.get( "/stats", summary="Get summary statistics for the DRS object store", @@ -36,9 +41,13 @@ async def service_info(): """ Returns information about this service, such as versions, name, etc. """ - all_versions = ALL_VERSIONS - service_version = all_versions["bedhost_version"] - all_versions.update({"openapi_version": get_openapi_version(app)}) + all_versions = { + "bedhost_version": bedhost_version, + "bbconf_version": bbconf_version, + "geniml_version": geniml_version, + "python_version": python_version(), + "openapi_version": get_openapi_version(app), + } return ServiceInfoResponse( id="org.bedbase.api", @@ -46,14 +55,19 @@ async def service_info(): type={ "group": "org.databio", "artifact": "bedbase", - "version": service_version, + "version": bedhost_version, }, description="An API providing genomic interval data and metadata", organization={"name": "Databio Lab", "url": "https://databio.org"}, contactUrl="https://github.com/databio/bedbase/issues", - documentationUrl="https://bedbase.org", + documentationUrl="https://docs.bedbase.org", updatedAt="2023-10-25T00:00:00Z", - environment="dev", - version=service_version, + environment="main", + version=bedhost_version, component_versions=all_versions, + embedding_models={ + "vec2vec": bbagent.config.config.path.vec2vec, + "region2vec": bbagent.config.config.path.region2vec, + "text2vec": bbagent.config.config.path.text2vec, + }, ) diff --git a/requirements/requirements-all.txt b/requirements/requirements-all.txt index 72dfbe5..8b85251 100644 --- a/requirements/requirements-all.txt +++ b/requirements/requirements-all.txt @@ -1,5 +1,5 @@ # bbconf @ git+https://github.com/databio/bbconf.git@dev#egg=bbconf -bbconf>=0.5.0 +bbconf>=0.5.1 fastapi>=0.103.0 logmuse>=0.2.7 markdown @@ -7,6 +7,6 @@ requests setuptools uvicorn yacman>=0.9.2 -pephubclient>=0.4.0 +pephubclient>=0.4.1 psycopg[binary,pool] python-multipart>=0.0.9 \ No newline at end of file From 67d647559c5c51e43c4e147ee7bed6e0491b8f5c Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 11 Apr 2024 13:40:42 -0400 Subject: [PATCH 17/21] updated env variable --- ui/.env | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/.env b/ui/.env index 652ab0f..d11cd25 100644 --- a/ui/.env +++ b/ui/.env @@ -1,2 +1,2 @@ -VITE_API_BASE=http://localhost:8000/v1 +# VITE_API_BASE=http://localhost:8000/v1 # VITE_API_BASE=https://api-dev.bedbase.org/v1 From cd8b90a5a738ca555335f00d2950fe007aafa60a Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 11 Apr 2024 13:41:41 -0400 Subject: [PATCH 18/21] updated gitignore --- .gitignore | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/.gitignore b/.gitignore index 1fa3e5c..fe3fa66 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,6 @@ geniml local_cache -environment/ \ No newline at end of file +environment/ + +ui/.env \ No newline at end of file From 5c7c5ea1c80831584de1de11205e926058a901e0 Mon Sep 17 00:00:00 2001 From: Oleksandr Date: Thu, 11 Apr 2024 13:47:36 -0400 Subject: [PATCH 19/21] Updated version --- bedhost/_version.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/bedhost/_version.py b/bedhost/_version.py index 6a9beea..3d26edf 100644 --- a/bedhost/_version.py +++ b/bedhost/_version.py @@ -1 +1 @@ -__version__ = "0.4.0" +__version__ = "0.4.1" From abf703b61afc6e9915b103b4e216734654dcc123 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 11 Apr 2024 13:54:06 -0400 Subject: [PATCH 20/21] updated gitignore --- .gitignore | 10 +++++++++- README.md | 7 ++++++- 2 files changed, 15 insertions(+), 2 deletions(-) diff --git a/.gitignore b/.gitignore index fe3fa66..f008464 100644 --- a/.gitignore +++ b/.gitignore @@ -29,4 +29,12 @@ local_cache environment/ -ui/.env \ No newline at end of file +# Environments +.env +.venv +env/ +venv/ +ENV/ +env.bak/ +venv.bak/ +.DS_store diff --git a/README.md b/README.md index d0cae88..53f38f1 100644 --- a/README.md +++ b/README.md @@ -8,13 +8,18 @@ It needs a path to the *bedbase configuration file*, which can be provided either via `-c`/`--config` argument or read from `$BEDBASE_CONFIG` environment variable. --- -dfgeaf **Deployed public instance**: https://bedbase.org/ **Documentation**: https://docs.bedbase.org/bedhost **API**: https://api.bedbase.org/ +**DEV API**: https://api-dev.bedbase.org/ + +**UI**: https://bedbase.org/ + +**DEV UI**: https://bedhost-ui.pages.dev/ + **Source Code**: https://github.com/databio/bedhost/ --- From e6caf1456927713576b8ac8ae40674d7d065a115 Mon Sep 17 00:00:00 2001 From: Khoroshevskyi Date: Thu, 11 Apr 2024 13:57:39 -0400 Subject: [PATCH 21/21] updated readme --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 53f38f1..8ef5d57 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ It needs a path to the *bedbase configuration file*, which can be provided eithe **UI**: https://bedbase.org/ -**DEV UI**: https://bedhost-ui.pages.dev/ +**DEV UI**: https://dev.bedhost.pages.dev/ **Source Code**: https://github.com/databio/bedhost/