Genomic Features
diff --git a/ui/src/components/metrics/metric-plot.tsx b/ui/src/components/metrics/metric-plot.tsx
new file mode 100644
index 00000000..88884720
--- /dev/null
+++ b/ui/src/components/metrics/metric-plot.tsx
@@ -0,0 +1,124 @@
+import { Bar, Pie } from 'react-chartjs-2';
+import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ArcElement } from 'chart.js';
+import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+ChartJS.register(
+ CategoryScale,
+ LinearScale,
+ BarElement,
+ ArcElement,
+ Title,
+ Tooltip,
+ Legend,
+ ChartDataLabels
+);
+
+export type MetricPlotType = 'bar' | 'pie';
+
+type Props = {
+ type: MetricPlotType;
+ data: [string, number][];
+ dataLabel?: string;
+ backgroundColor: string[];
+ borderWidth: number;
+ sliceIndex: number;
+ plotRef?: any;
+};
+
+export const MetricPlot = (props: Props) => {
+ const { type, data, dataLabel, backgroundColor, borderWidth, sliceIndex, plotRef } = props;
+
+ const sortedData = data.sort((a, b) => b[1] - a[1]).slice(0, sliceIndex);
+ const labels = sortedData.map(entry => entry[0]);
+ const values = sortedData.map(entry => entry[1]);
+
+ // Function to generate a color palette with the same length as the data
+ const generateColorPalette = (dataLength: number): string[] => {
+
+ const baseColors = [
+ 'rgba(255, 99, 132, 0.6)', // red
+ 'rgba(54, 162, 235, 0.6)', // blue
+ 'rgba(255, 206, 86, 0.6)', // yellow
+ 'rgba(51,193,43,0.6)', // teal
+ 'rgba(153, 102, 255, 0.6)', // purple
+ 'rgba(255, 159, 64, 0.6)', // orange
+ 'rgba(199, 199, 199, 0.6)', // gray
+ 'rgba(83, 102, 255, 0.6)', // indigo
+ 'rgba(255, 99, 255, 0.6)', // pink
+ 'rgb(6,80,49)', // light green
+ ];
+
+ let colorPalette = [];
+
+ // If we need more colors than in our base palette,
+ // we'll cycle through with different opacities
+ const cycles = Math.ceil((dataLength - colorPalette.length) / baseColors.length);
+
+ for (let cycle = 0; cycle < cycles; cycle++) {
+ // For each cycle, adjust opacity slightly
+ const opacity = 0.6 - (cycle * 0.1);
+
+ for (let i = 0; i < baseColors.length; i++) {
+ if (colorPalette.length >= dataLength) break;
+
+ // Create a new color with adjusted opacity
+ const baseColor = baseColors[i];
+ const rgbPart = baseColor.substring(0, baseColor.lastIndexOf(','));
+ const newColor = `${rgbPart}, ${opacity})`;
+
+ colorPalette.push(newColor);
+ }
+ }
+
+ return colorPalette;
+ };
+
+ const ensureColorPalette = (data: [string, number][]): string[] => {
+ return generateColorPalette(data.length);
+ };
+
+ const plotData = {
+ labels: labels,
+ datasets: [
+ {
+ label: dataLabel,
+ data: values,
+ backgroundColor: type === 'bar' ? backgroundColor : ensureColorPalette(data),
+ borderWidth: borderWidth,
+ },
+ ],
+ };
+
+ const plotOptions = {
+ responsive: true,
+ maintainAspectRatio: true,
+ plugins: {
+ datalabels: {
+ font: {
+ size: 10,
+ },
+ align: 'end' as const,
+ offset: 2,
+ },
+ },
+ };
+
+ if (type === 'bar') {
+ return (
+
+ );
+ } else if (type === 'pie') {
+ return (
+
+ )}
+
+ return null;
+};
diff --git a/ui/src/components/modals/endpoints-modal.tsx b/ui/src/components/modals/endpoints-modal.tsx
new file mode 100644
index 00000000..931a8657
--- /dev/null
+++ b/ui/src/components/modals/endpoints-modal.tsx
@@ -0,0 +1,47 @@
+import { Modal } from 'react-bootstrap';
+
+type Props = {
+ titles: string[];
+ endpoints: string[],
+ show: boolean;
+ onHide: () => void;
+};
+
+export const EndpointsModal = (props: Props) => {
+ const { titles, endpoints, show, onHide } = props;
+
+ return (
+
onHide()}
+ size='lg'
+ aria-labelledby='contained-modal-title-vcenter'
+ centered
+ >
+ API Endpoints
+
+
+
+
+
+ Service
+ Endpoint
+
+
+
+ {titles.map((title, index) => (
+
+ {title}
+
+ {endpoints[index]}
+
+
+ ))}
+
+
+
+
+ );
+};
diff --git a/ui/src/components/modals/metric-modal.tsx b/ui/src/components/modals/metric-modal.tsx
new file mode 100644
index 00000000..66dd7173
--- /dev/null
+++ b/ui/src/components/modals/metric-modal.tsx
@@ -0,0 +1,84 @@
+import { useState } from 'react';
+import { Modal } from 'react-bootstrap';
+import { MetricPlot, MetricPlotType } from '../metrics/metric-plot';
+import { useRef } from 'react';
+
+type Props = {
+ title: string;
+ type: MetricPlotType,
+ data: [string, number][];
+ dataLabel?: string | undefined;
+ backgroundColor: string[];
+ borderWidth: number;
+ sliceIndex: number;
+ show: boolean;
+ onHide: () => void;
+};
+
+export const MetricModal = (props: Props) => {
+ const { title, type, data, dataLabel, backgroundColor, borderWidth, sliceIndex, show, onHide } = props;
+ const plotRef = useRef<{ toBase64Image: () => string } | null>(null);
+
+ const [plotType, setPlotType] = useState(type);
+
+ const checkHandler = (value: MetricPlotType) => {
+ setPlotType(value);
+ };
+
+ const handleDownload = () => {
+ if (plotRef.current) {
+ const link = document.createElement('a');
+ link.download = (props.title ? props.title : 'metric_plot') + '.png';
+ link.href = plotRef.current.toBase64Image();
+ link.click();
+ }
+ };
+
+ return (
+
onHide()}
+ size='lg'
+ aria-labelledby='contained-modal-title-vcenter'
+ centered
+ >
+ {title}
+
+
+
+
+
+
+ checkHandler(e.target.value as MetricPlotType)}
+ value={plotType}
+ >
+ Bar Chart
+ Pie Chart
+
+
+
+ onHide()} className='btn btn-primary'>
+ Close
+
+
+
+ );
+};
diff --git a/ui/src/components/nav/nav-desktop.tsx b/ui/src/components/nav/nav-desktop.tsx
index e47f2281..0e711bca 100644
--- a/ui/src/components/nav/nav-desktop.tsx
+++ b/ui/src/components/nav/nav-desktop.tsx
@@ -2,7 +2,6 @@ import { useBedCart } from '../../contexts/bedcart-context';
const API_BASE = import.meta.env.VITE_API_BASE || '';
-
export const NavDesktop = () => {
const { cart } = useBedCart();
return (
diff --git a/ui/src/components/nav/nav-mobile.tsx b/ui/src/components/nav/nav-mobile.tsx
index 4248f17b..1ed31734 100644
--- a/ui/src/components/nav/nav-mobile.tsx
+++ b/ui/src/components/nav/nav-mobile.tsx
@@ -19,6 +19,10 @@ export const MobileNav = () => {
Docs
+
+
Not Found
,
diff --git a/ui/src/pages/bed-splash.tsx b/ui/src/pages/bed-splash.tsx
index d7fd5cbc..d9d59f1f 100644
--- a/ui/src/pages/bed-splash.tsx
+++ b/ui/src/pages/bed-splash.tsx
@@ -2,7 +2,7 @@ import { useParams } from 'react-router-dom';
import { useBedMetadata } from '../queries/useBedMetadata';
import { useBedGenomeStats } from '../queries/useBedGenomeStats';
import { Layout } from '../components/layout';
-import { Col, Row } from 'react-bootstrap';
+import { Col, Container, Row } from 'react-bootstrap';
import { BedSplashHeader } from '../components/bed-splash-components/header';
import { CardSkeleton } from '../components/skeletons/card-skeleton';
import { ErrorPage } from '../components/common/error-page';
@@ -135,7 +135,7 @@ export const BedSplash = () => {
} else {
return (
-
+
: null}
@@ -277,7 +277,7 @@ export const BedSplash = () => {
Statistics
{metadata && (
-
)}
-
+
);
}
diff --git a/ui/src/pages/bedset-splash.tsx b/ui/src/pages/bedset-splash.tsx
index 8cdf0fca..bd129979 100644
--- a/ui/src/pages/bedset-splash.tsx
+++ b/ui/src/pages/bedset-splash.tsx
@@ -1,6 +1,6 @@
import { useParams } from 'react-router-dom';
import { Layout } from '../components/layout';
-import { Col, Row } from 'react-bootstrap';
+import { Col, Container, Row } from 'react-bootstrap';
import { useBedsetMetadata } from '../queries/useBedsetMetadata';
import { CardSkeleton } from '../components/skeletons/card-skeleton';
import { BedsetSplashHeader } from '../components/bedset-splash-components/header';
@@ -103,7 +103,7 @@ export const BedsetSplash = () => {
} else {
return (
-
+
@@ -111,7 +111,7 @@ export const BedsetSplash = () => {
Statistics
{metadata && (
-
-
+
);
}
diff --git a/ui/src/pages/home.tsx b/ui/src/pages/home.tsx
index e3bb3323..e35f1caa 100644
--- a/ui/src/pages/home.tsx
+++ b/ui/src/pages/home.tsx
@@ -336,6 +336,10 @@ export const Home = () => {
Data Availability Summary
+
+ Comprehensive metrics about BEDbase file statistics is available on the {' '}
+ metrics page .
+
diff --git a/ui/src/pages/metrics.tsx b/ui/src/pages/metrics.tsx
new file mode 100644
index 00000000..63dc18f8
--- /dev/null
+++ b/ui/src/pages/metrics.tsx
@@ -0,0 +1,231 @@
+import { useState } from 'react';
+import { Layout } from '../components/layout.tsx';
+import { Col, Row, Container } from 'react-bootstrap';
+
+import { useStats } from '../queries/useStats.ts';
+import { useDetailedStats } from '../queries/useDetailedStats.ts';
+import { MetricPlot, MetricPlotType } from '../components/metrics/metric-plot.tsx';
+import { MetricModal } from '../components/modals/metric-modal.tsx';
+import { CardSkeleton } from '../components/skeletons/card-skeleton';
+import { EndpointsModal } from '../components/modals/endpoints-modal.tsx';
+
+const API_BASE = import.meta.env.VITE_API_BASE || '';
+export const PRIMARY_COLOR = 'rgba(0, 128, 128,0.6)';
+
+interface MetricModalProps {
+ title: string;
+ type: MetricPlotType;
+ data: [string, number][];
+ dataLabel?: string;
+ backgroundColor: string[];
+ borderWidth: number;
+ sliceIndex: number;
+}
+
+export const Metrics = () => {
+ const [showMetricModal, setShowMetricModal] = useState(false);
+ const [metricModalTitle, setMetricModalTitle] = useState('');
+ const [metricModalType, setMetricModalType] = useState
('bar');
+ const [metricModalData, setMetricModalData] = useState<[string, number][]>([]);
+ const [metricModalDataLabel, setMetricModalDataLabel] = useState('');
+ const [metricModalBackgroundColor, setMetricModalBackgroundColor] = useState([]);
+ const [metricModalBorderWidth, setMetricModalBorderWidth] = useState(0);
+ const [metricModalSliceIndex, setMetricModalSliceIndex] = useState(0);
+ const [endpointsModalShow, setEndpointsModalShow] = useState(false);
+
+ const setMetricModalProps = ({ title, type, data, dataLabel = '', backgroundColor, borderWidth, sliceIndex }: MetricModalProps): void => {
+ setMetricModalTitle(title);
+ setMetricModalType(type);
+ setMetricModalData(data);
+ setMetricModalDataLabel(dataLabel);
+ setMetricModalBackgroundColor(backgroundColor);
+ setMetricModalBorderWidth(borderWidth);
+ setMetricModalSliceIndex(sliceIndex);
+ setShowMetricModal(true);
+ };
+
+ const { data: bedbaseStats } = useStats();
+ const { data: detailedStats, isLoading } = useDetailedStats();
+
+ const sliceIndex = 5;
+
+ if (isLoading) {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+ };
+
+ return (
+
+
+
+ Metrics
+
+
+ setEndpointsModalShow(true)}>
+
+
+
+
+
+
+ BEDbase File Statistics
+
+
+ Number of bed files available:
+ {(bedbaseStats?.bedfiles_number || 0).toLocaleString()}
+
+
+ Number of bed sets available:
+ {(bedbaseStats?.bedsets_number || 0).toLocaleString()}
+
+
+ Number of genomes available:
+ {(bedbaseStats?.genomes_number || 0).toLocaleString()}
+
+
+
+
+
+ {detailedStats && (
+
+ setMetricModalProps({
+ title: 'BED Files by Genome',
+ type: 'bar',
+ data: Object.entries(detailedStats?.file_genome || {}),
+ dataLabel: 'Number of BED files',
+ backgroundColor: [PRIMARY_COLOR],
+
+ borderWidth: 1,
+ sliceIndex: Object.entries(detailedStats?.file_genome || {}).length
+ })}
+ >
+
BED Files by Genome
+ setMetricModalProps({
+ title: 'BED Files by Type',
+ type: 'bar',
+ data: Object.entries(detailedStats?.file_type || {}),
+ dataLabel: 'Number of BED files',
+ backgroundColor: [PRIMARY_COLOR],
+ borderWidth: 1,
+ sliceIndex: Object.entries(detailedStats?.file_type || {}).length
+ })}
+ >
+
BED Files by Type
+ setMetricModalProps({
+ title: 'BED Files by Format',
+ type: 'pie',
+ data: Object.entries(detailedStats?.file_format || {}),
+ dataLabel: 'Number of BED files',
+ backgroundColor: [PRIMARY_COLOR],
+ borderWidth: 1,
+ sliceIndex: Object.entries(detailedStats?.file_format || {}).length
+ })}
+ >
+
BED Files by Format
+
+
+
+ )}
+
+
+ BEDbase Usage Statistics
+ Coming Soon..
+
+
+
+ {showMetricModal && (
+ setShowMetricModal(false)}
+ />
+ )}
+
+ setEndpointsModalShow(false)}
+ />
+
+
+
+ );
+};
diff --git a/ui/src/queries/useDetailedStats.ts b/ui/src/queries/useDetailedStats.ts
new file mode 100644
index 00000000..f3047e9c
--- /dev/null
+++ b/ui/src/queries/useDetailedStats.ts
@@ -0,0 +1,16 @@
+import {useQuery} from '@tanstack/react-query';
+import {components} from '../../bedbase-types';
+import {useBedbaseApi} from '../contexts/api-context';
+
+type BEDBASEStatistics = components['schemas']['FileStats'];
+
+export const useDetailedStats = () => {
+ const {api} = useBedbaseApi();
+ return useQuery({
+ queryKey: ['detailed-stats'],
+ queryFn: async () => {
+ const {data} = await api.get('/detailed-stats');
+ return data;
+ },
+ });
+};