{cart[bedId || ''] ? (
@@ -167,12 +173,12 @@ export const Bed2BedSearchResultsTable = (props: Props) => {
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
-
+
if (bedId === undefined) {
toast.error('No bed ID found', { position: 'top-center' });
return;
}
-
+
const bedItem = {
id: bedId,
name: rowData.metadata?.name || 'No name',
@@ -183,7 +189,7 @@ export const Bed2BedSearchResultsTable = (props: Props) => {
description: rowData.metadata?.description || '',
assay: rowData.metadata?.annotation?.assay || 'N/A',
};
-
+
addBedToCart(bedItem);
}}
>
diff --git a/ui/src/components/search/search-bar.tsx b/ui/src/components/search/search-bar.tsx
index 2538b429..ddee1842 100644
--- a/ui/src/components/search/search-bar.tsx
+++ b/ui/src/components/search/search-bar.tsx
@@ -74,14 +74,16 @@ export const SearchBar = (props: Props) => {
{searchView === 't2b' && (
)}
{showOptions && (
diff --git a/ui/src/components/search/search-selector.tsx b/ui/src/components/search/search-selector.tsx
index 41cef61c..64cd1bc5 100644
--- a/ui/src/components/search/search-selector.tsx
+++ b/ui/src/components/search/search-selector.tsx
@@ -13,39 +13,39 @@ export const SearchSelector = (props: Props) => {
const [params, setParams] = useSearchParams();
return (
-
+
+ {
+ params.set('view', 't2b');
+ params.delete('q');
+ setParams(params);
+ setView('t2b');
+ }}
+ >
+ Text-to-BED
+
+ {
+ params.set('view', 'b2b');
+ params.delete('q');
+ setParams(params);
+ setView('b2b');
+ }}
+ >
+ BED-to-BED
+
+ {
+ params.set('view', 't2bs');
+ params.delete('q');
+ setParams(params);
+ setView('t2bs');
+ }}
+ >
+ Text-to-BEDset
+
+
);
diff --git a/ui/src/components/search/text2bed/t2b-search-results-table.tsx b/ui/src/components/search/text2bed/t2b-search-results-table.tsx
index 4bdbfcbc..7da0fac5 100644
--- a/ui/src/components/search/text2bed/t2b-search-results-table.tsx
+++ b/ui/src/components/search/text2bed/t2b-search-results-table.tsx
@@ -1,4 +1,4 @@
-import { ProgressBar } from 'react-bootstrap';
+// import { ProgressBar } from 'react-bootstrap';
import { components } from '../../../../bedbase-types';
import { roundToTwoDecimals } from '../../../utils';
import { useBedCart } from '../../../contexts/bedcart-context';
@@ -117,12 +117,16 @@ export const Text2BedSearchResultsTable = (props: Props) => {
-
+ {
+ // const scoreValue = (result.score ?? 0) * 100;
+ // if (scoreValue >= 80) return 'text-success';
+ // if (scoreValue >= 60) return 'text-warning';
+ // if (scoreValue >= 40) return 'text-info';
+ // return 'text-danger';
+ return 'text-success';
+ })()}`}>
+ {roundToTwoDecimals((result.score ?? 0) * 100)}%
+
|
{cart[result?.metadata?.id || ''] ? (
@@ -149,7 +153,7 @@ export const Text2BedSearchResultsTable = (props: Props) => {
toast.error('No bed ID found', { position: 'top-center' });
return;
}
-
+
// Create the simplified bed item object
const bedItem = {
id: result.metadata.id,
@@ -161,7 +165,7 @@ export const Text2BedSearchResultsTable = (props: Props) => {
description: result.metadata.description || '',
assay: result.metadata.annotation?.assay || 'N/A',
};
-
+
addBedToCart(bedItem);
}}
>
diff --git a/ui/src/components/search/text2bedset.tsx b/ui/src/components/search/text2bedset.tsx
index a0213bce..0fedb944 100644
--- a/ui/src/components/search/text2bedset.tsx
+++ b/ui/src/components/search/text2bedset.tsx
@@ -75,7 +75,8 @@ export const Text2BedSet = () => {
) : (
- Try searching for some BEDsets! e.g. K562 or excluderanges
+ Find collections of BED files by entering a text query above.
+ For example, try searching for "excluderanges" or "a562".
)}
diff --git a/ui/src/components/umap/atlas-tooltip.tsx b/ui/src/components/umap/atlas-tooltip.tsx
new file mode 100644
index 00000000..d0329962
--- /dev/null
+++ b/ui/src/components/umap/atlas-tooltip.tsx
@@ -0,0 +1,93 @@
+import { createRoot, Root } from 'react-dom/client';
+
+interface TooltipProps {
+ tooltip?: {
+ text: string;
+ identifier: string;
+ fields?: {
+ Assay: string;
+ 'Cell Line': string;
+ Description: string;
+ };
+ category?: number;
+ x?: number;
+ y?: number;
+ };
+ showLink?: boolean;
+}
+
+const TooltipContent = ({ tooltip, showLink }: { tooltip: TooltipProps['tooltip']; showLink?: boolean }) => {
+ if (!tooltip) return null;
+ return (
+
+
+ {tooltip.text || 'Unnamed BED'}
+ {tooltip.fields && (
+ <>
+ {tooltip.fields.Description || 'No description available'}
+
+ {tooltip.identifier !== 'custom_point' && (
+ <>
+
+ cell_line: {tooltip.fields['Cell Line'] || 'N/A'}
+
+
+ assay: {tooltip.fields.Assay || 'N/A'}
+
+
+ id: {tooltip.identifier || 'N/A'}
+
+
+ )}
+
+ x: {tooltip.x ? tooltip.x.toFixed(6) : 'N/A'}
+
+
+ y: {tooltip.y ? tooltip.y.toFixed(6) : 'N/A'}
+
+
+
+ )}
+ {showLink && tooltip.identifier !== 'custom_point' && (
+
+ Go!
+
+ )}
+
+
+
+ console.log(e)}
+ // onExportSelection={async (predicate, format) => {
+ // console.log('Export selection:', predicate, format);
+ // }}
+ />
+
+
+ {webglStatus.error}
+
+ ) : (
+ <>
+ {isReady ? (
+
+ {
+ if (!dataPoints || (dataPoints.length === 0 && stickyBaseline)) {
+ setTimeout(() => {
+ if (baselinePointsRef.current.length > 0) {
+ setSelectedPoints([...baselinePointsRef.current]);
+ }
+ }, 0);
+ return;
+ }
+ setSelectedPoints(dataPoints);
+ }}
+ theme={{
+ statusBar: false,
+ }}
+ />
+
+ ) : (
+
+ Loading...
+
+ )}
+
+ )}
+
+ );
+});
diff --git a/ui/src/components/umap/bed-embedding-view.tsx b/ui/src/components/umap/bed-embedding-view.tsx
new file mode 100644
index 00000000..1e5ee3db
--- /dev/null
+++ b/ui/src/components/umap/bed-embedding-view.tsx
@@ -0,0 +1,611 @@
+import { EmbeddingViewMosaic } from 'embedding-atlas/react';
+import { useEffect, useState, useRef, useMemo } from 'react';
+import * as vg from '@uwdata/vgplot';
+
+import { isPointInPolygon, tableau20 } from '../../utils';
+import { useBedCart } from '../../contexts/bedcart-context';
+import { components } from '../../../bedbase-types';
+import { AtlasTooltip } from './atlas-tooltip';
+import { useMosaicCoordinator } from '../../contexts/mosaic-coordinator-context';
+import { useBedUmap } from '../../queries/useBedUmap';
+
+type SearchResponse = components['schemas']['BedListSearchResult'];
+
+type Props = {
+ bedId?: string;
+ neighbors?: SearchResponse;
+ showNeighbors?: boolean;
+ enableUpload?: boolean;
+};
+
+export const BEDEmbeddingView = (props: Props) => {
+ const { bedId, neighbors, showNeighbors, enableUpload } = props;
+ const { coordinator, initializeData, addCustomPoint, deleteCustomPoint, webglStatus } = useMosaicCoordinator();
+ const { addMultipleBedsToCart } = useBedCart();
+ const { mutateAsync: getUmapCoordinates } = useBedUmap();
+
+ const containerRef = useRef(null);
+ const fileInputRef = useRef(null);
+
+ const [containerWidth, setContainerWidth] = useState(900);
+ const [embeddingHeight, setEmbeddingHeight] = useState(500);
+ const [isReady, setIsReady] = useState(false);
+ const [colorGrouping, setColorGrouping] = useState('cell_line_category');
+ const [selectedPoints, setSelectedPoints] = useState([]);
+ const [initialPoint, setInitialPoint] = useState(null);
+ const [viewportState, setViewportState] = useState(null);
+ const [legendItems, setLegendItems] = useState([]);
+ const [filterSelection, setFilterSelection] = useState(null);
+ const [addedToCart, setAddedToCart] = useState(false);
+ const [tooltipPoint, setTooltipPoint] = useState(null);
+ const [uploadedFilename, setUploadedFilename] = useState('');
+ const [dataVersion, setDataVersion] = useState(0);
+ const [pendingSelection, setPendingSelection] = useState(null);
+ const [uploadButtonText, setUploadButtonText] = useState('Upload BED');
+
+ const filter = useMemo(() => vg.Selection.intersect(), []);
+ const legendFilterSource = useMemo(() => ({}), []);
+ const neighborIDs = useMemo(() => neighbors?.results?.map((result) => result.id), [neighbors]);
+
+ const centerOnPoint = (point: any, scale: number = 1) => {
+ setTooltipPoint(point);
+ setViewportState({
+ x: point.x,
+ y: point.y,
+ scale: scale,
+ });
+ };
+
+ const handleFileRemove = async () => {
+ try {
+ await deleteCustomPoint();
+ setUploadedFilename('');
+
+ coordinator.clear();
+ const updatedLegend = await fetchLegendItems(coordinator);
+ setLegendItems(updatedLegend);
+
+ // Prepare selection without custom point
+ const newSelection = selectedPoints.filter((p: any) => p.identifier !== 'custom_point');
+ setPendingSelection(newSelection);
+
+ // Force remount to remove point from map
+ setDataVersion((v) => v + 1);
+ } catch (error) {
+ console.error('Error deleting file');
+ }
+ };
+
+ const handleFileUpload = async (event: React.ChangeEvent) => {
+ const file = event.target.files?.[0];
+ if (!file) return;
+
+ setUploadButtonText('Uploading...');
+
+ try {
+ const coordinates = await getUmapCoordinates(file);
+
+ if (coordinates.length >= 2) {
+ await addCustomPoint(coordinates[0], coordinates[1]);
+ setUploadedFilename(file.name);
+
+ // Clear coordinator cache and refresh legend
+ coordinator.clear();
+ const updatedLegend = await fetchLegendItems(coordinator);
+ setLegendItems(updatedLegend);
+
+ // await new Promise(resolve => setTimeout(resolve, 150));
+
+ // Query the uploaded point
+ const customPoint: any = await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id = 'custom_point'`,
+ { type: 'json' },
+ );
+
+ if (customPoint && customPoint.length > 0) {
+ // console.log('Custom point queried:', customPoint[0]);
+
+ // Prepare selection to apply after remount
+ const newSelection = selectedPoints.filter((p: any) => p.identifier !== 'custom_point');
+ newSelection.push(customPoint[0]);
+ setPendingSelection(newSelection);
+
+ // Force remount to show new point
+ setDataVersion((v) => v + 1);
+ }
+ }
+ } catch (error) {
+ console.error('Error getting UMAP coordinates:', error);
+ } finally {
+ if (fileInputRef.current) {
+ fileInputRef.current.value = '';
+ }
+ setUploadButtonText('Upload BED');
+ }
+ };
+
+ const handleUploadClick = () => {
+ fileInputRef.current?.click();
+ };
+
+ const getSortedSelectedPoints = () => {
+ if (!selectedPoints || selectedPoints.length === 0) return [];
+
+ const currentBed = selectedPoints.find((p: any) => p.identifier === bedId);
+ const others = selectedPoints.filter((p: any) => p.identifier !== bedId);
+
+ if (neighbors?.results && neighbors.results.length > 0) {
+ const scoreMap = new Map(neighbors.results.map((n) => [n.id, n.score]));
+ others.sort((a: any, b: any) => {
+ const scoreA = scoreMap.get(a.identifier) || 0;
+ const scoreB = scoreMap.get(b.identifier) || 0;
+ return scoreB - scoreA; // Descending order
+ });
+ }
+
+ return currentBed ? [currentBed, ...others] : others;
+ };
+
+ const handleLegendClick = (item: any) => {
+ if (filterSelection?.category === item.category) {
+ setFilterSelection(null);
+ filter.update({
+ source: legendFilterSource, // memoized so that mosaic can keep track of source and clear previous selection
+ value: null,
+ predicate: null,
+ });
+ } else {
+ setFilterSelection(item);
+ filter.update({
+ source: legendFilterSource,
+ value: item.category,
+ predicate: vg.eq(colorGrouping, item.category),
+ });
+ }
+ };
+
+ const handlePointSelection = (dataPoints: any[] | null) => {
+ // console.log('Selection changed via onSelection callback:', dataPoints);
+ const points = dataPoints || [];
+ const hasInitialPoint = points.some((p) => p.identifier === initialPoint?.identifier);
+ let finalPoints = hasInitialPoint ? points : initialPoint ? [initialPoint, ...points] : points;
+
+ if (showNeighbors && neighborIDs && neighborIDs.length > 0) {
+ const selectedIds = new Set(finalPoints.map((p: any) => p.identifier));
+ const missingNeighborIds = neighborIDs.filter((id) => !selectedIds.has(id));
+
+ if (missingNeighborIds.length > 0) {
+ coordinator
+ .query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id IN (${missingNeighborIds.map((id) => `'${id}'`).join(',')})`,
+ { type: 'json' },
+ )
+ .then((neighborPoints: any) => {
+ setSelectedPoints([...finalPoints, ...neighborPoints]);
+ });
+ return;
+ }
+ }
+
+ // setTooltipPoint(finalPoints.slice(-1)[0])
+ setSelectedPoints(finalPoints);
+ };
+
+ // Range selection (for rectangle/lasso)
+ const handleRangeSelection = async (coordinator: any, value: any) => {
+ // console.log('Range selection updated:', value);
+
+ if (!value) {
+ return;
+ }
+
+ let result;
+
+ // filter clause prevents selecting points that are not within a selected legend category
+ const filterClause = filterSelection ? ` AND ${colorGrouping} = '${filterSelection.category}'` : '';
+
+ // Check if rectangle selection (bounding box)
+ if (typeof value === 'object' && 'xMin' in value) {
+ result = (await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE x >= ${value.xMin} AND x <= ${value.xMax} AND y >= ${value.yMin} AND y <= ${value.yMax}${filterClause}`,
+ { type: 'json' },
+ )) as any[];
+ }
+ // Check if lasso selection (array of points)
+ else if (Array.isArray(value) && value.length > 0) {
+ // First get points within bounding box (optimization)
+ const xCoords = value.map((p: any) => p.x);
+ const yCoords = value.map((p: any) => p.y);
+ const xMin = Math.min(...xCoords);
+ const xMax = Math.max(...xCoords);
+ const yMin = Math.min(...yCoords);
+ const yMax = Math.max(...yCoords);
+
+ // Only fetch x, y, identifier for filtering, then get full data for matches
+ const candidates: any = await coordinator.query(
+ `SELECT x, y, id as identifier FROM data
+ WHERE x >= ${xMin} AND x <= ${xMax} AND y >= ${yMin} AND y <= ${yMax}${filterClause}`,
+ { type: 'json' },
+ );
+
+ // Filter to points inside polygon
+ const filteredIds = candidates
+ .filter((point: any) => isPointInPolygon(point, value))
+ .map((p: any) => `'${p.identifier}'`)
+ .join(',');
+
+ if (filteredIds) {
+ result = (await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id IN (${filteredIds})${filterClause}`,
+ { type: 'json' },
+ )) as any[];
+ } else {
+ result = [];
+ }
+ }
+
+ const resultArray = result || [];
+ const hasInitialPoint =
+ resultArray.length > 0 && resultArray.some((p: any) => p.identifier === initialPoint?.identifier);
+ let finalPoints = hasInitialPoint ? resultArray : initialPoint ? [initialPoint, ...resultArray] : resultArray;
+
+ if (showNeighbors && neighborIDs && neighborIDs.length > 0) {
+ const selectedIds = new Set(finalPoints.map((p: any) => p.identifier));
+ const missingNeighborIds = neighborIDs.filter((id) => !selectedIds.has(id));
+
+ if (missingNeighborIds.length > 0) {
+ // fetch missing neighbor points
+ const neighborPoints = (await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id IN (${missingNeighborIds.map((id) => `'${id}'`).join(',')})`,
+ { type: 'json' },
+ )) as any[];
+ finalPoints = [...finalPoints, ...neighborPoints];
+ }
+ }
+
+ setSelectedPoints(finalPoints);
+ };
+
+ const fetchLegendItems = async (coordinator: any) => {
+ const query = `SELECT DISTINCT
+ ${colorGrouping.replace('_category', '')} as name,
+ ${colorGrouping} as category
+ FROM data
+ ORDER BY ${colorGrouping}`;
+
+ const result = (await coordinator.query(query, { type: 'json' })) as any[];
+ return result;
+ };
+
+ useEffect(() => {
+ // initialize data
+ initializeData().then(() => {
+ setIsReady(true);
+ });
+ }, []);
+
+ useEffect(() => {
+ // resize width and height of view based on window size
+ const updateDimensions = () => {
+ if (containerRef.current) {
+ setContainerWidth(containerRef.current.offsetWidth);
+ }
+ // Calculate height: window height minus approximate offset for header/footer/margins
+ const calculatedHeight = Math.max(400, window.innerHeight * 0.6);
+ setEmbeddingHeight(calculatedHeight);
+ };
+
+ updateDimensions();
+ window.addEventListener('resize', updateDimensions);
+
+ return () => window.removeEventListener('resize', updateDimensions);
+ }, [isReady]);
+
+ useEffect(() => {
+ // set legend items
+ if (isReady) {
+ fetchLegendItems(coordinator).then((result) => {
+ setLegendItems(result);
+ });
+ }
+ }, [isReady, colorGrouping]);
+
+ useEffect(() => {
+ // apply pending selection after dataVersion change
+ if (pendingSelection !== null) {
+ setTimeout(() => {
+ setSelectedPoints(pendingSelection);
+ // If there's an uploaded file, center on it and set tooltip
+ if (uploadedFilename) {
+ const uploadedPoint = pendingSelection.find((point: any) => point.identifier === 'custom_point');
+ if (uploadedPoint) {
+ centerOnPoint(uploadedPoint, 0.3);
+ }
+ }
+ setPendingSelection(null);
+ }, 200);
+ }
+ }, [dataVersion, pendingSelection]);
+
+ useEffect(() => {
+ // fetch initial bed id and neighbors
+ if (isReady && !!bedId) {
+ setTimeout(async () => {
+ const currentBed: any = await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id = '${bedId}'`,
+ { type: 'json' },
+ );
+ if (!currentBed || currentBed.length === 0) return;
+ setInitialPoint(currentBed[0]);
+ setTooltipPoint(currentBed[0]);
+
+ if (showNeighbors && neighborIDs && neighborIDs.length > 0) {
+ const neighborPoints: any = await coordinator.query(
+ `SELECT
+ x, y,
+ ${colorGrouping} as category,
+ name as text,
+ id as identifier,
+ {'Description': description, 'Assay': assay, 'Cell Line': cell_line} as fields
+ FROM data
+ WHERE id IN (${neighborIDs.map((id) => `'${id}'`).join(',')})`,
+ { type: 'json' },
+ );
+ setSelectedPoints([currentBed[0], ...neighborPoints]);
+ } else if (showNeighbors && enableUpload) {
+ setSelectedPoints([currentBed[0]]);
+ } else {
+ setSelectedPoints([currentBed[0]]);
+ }
+ }, 200);
+ }
+ }, [isReady, bedId, coordinator, colorGrouping, showNeighbors, neighborIDs]);
+
+ return (
+ <>
+
+ {enableUpload && (
+
+ )}
+
+
+
+
+ Region Embeddings
+
+
+ {!!uploadedFilename && (
+
+ {uploadedFilename}
+
+
+ )}
+
+
+
+ {webglStatus.error ? (
+
+ {webglStatus.error}
+
+ ) : (
+ handleRangeSelection(coordinator, e)}
+ />
+ )}
+
+
+
+
+
+
+
+
+ | BED Name |
+ Assay |
+ Cell Line |
+ Description |
+
+
+
+ {getSortedSelectedPoints().map((point: any, index: number) => (
+ centerOnPoint(point, 0.3)}
+ key={point.identifier + '_' + index}
+ >
+ | {point.text} |
+ {point.fields.Assay} |
+ {point.fields['Cell Line']} |
+ {point.fields.Description} |
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+ {legendItems?.map((item: any) => (
+ handleLegendClick(item)}
+ key={item.category}
+ >
+ |
+
+
+ {item.name}
+
+ {filterSelection?.category === item.category && (
+
+ )}
+ |
+
+ ))}
+
+
+
+
+
+ BED analyzer
+
+
+
+
+
+
+
+ {loadingRS && (
+
+
+ Loading...
+
+
+ Loading and analyzing...
+
+
+ )}
+
+ {rs && !loadingRS && (
+
+ )}
+
+
+ {rs && (
+
+
+
+
+
+ | Identifier |
+ {rs.identifier} |
+
+
+ | Mean region width |
+ {rs.meanRegionWidth} |
+
+
+ | Total number of regions |
+ {rs.numberOfRegions} |
+
+
+ | Total number of nucleotides |
+ {rs.nucleotidesLength} |
+
+
+
+
+
+ Interval chromosome length statistics
+ {rs && (
+
+ )}
+
+
+ {rs && (
+ //
+ // Region Distribution Data
+ //
+ // {JSON.stringify(rs.calculateRegionDistribution(300), null, 2)}
+ //
+ //
+
+
+
+ )}
+
+
+ )}
+
+
+ {children} ;
-};
+// const FileBadge = (props: FileBadgeProps) => {
+// const { children } = props;
+// return {children} ;
+// };
export const Home = () => {
const [searchTerm, setSearchTerm] = useState('');
const [searchTermSmall, setSearchTermSmall] = useState('Kidney cancer in humans');
const [copied, setCopied] = useState(false);
+ const [searchType, setSearchType] = useState('t2b');
const navigate = useNavigate();
+ const handleSearch = () => {
+ if (!searchTerm) {
+ toast.error('Please enter a search term.');
+ return;
+ }
+ navigate(`/search?q=${searchTerm}&view=${searchType}`);
+ };
+
+
// const { data: exampleBedMetadata } = useExampleBed(); # if example will be dynamic again
const { data: exampleBedSetMetadata } = useExampleBedSet();
const { data: bedbaseStats } = useStats();
@@ -49,132 +61,165 @@ export const Home = () => {
{/* */}
{/* */}
{/**/}
- Welcome to BEDbase
-
+ BEDbase
+ Find, analyze, and understand genomic region data - all in one
+ place
+
+
-
- BEDbase is a unified platform for aggregating, analyzing, and serving genomic region data. BEDbase redefines
- the way to manage genomic region data and allows users to search for BED files of interest and create
- collections tailored to research needs. BEDbase is composed of a web server and an API. Users can explore
+
+ BEDbase is a unified platform for searching, analyzing, visualizing and serving genomic region data.
+ BEDbase redefines the way to manage genomic region data and allows users to search for BED files of
+ interest, visualize them, and create
+ collections tailored to research needs. Users can explore
comprehensive descriptions of specific BED files via a user-oriented web interface and programmatically
interact with the data via an OpenAPI-compatible API.
- setSearchTerm(e.target.value)}
- onKeyDown={(e) => {
- if (e.key === 'Enter') {
- if (searchTerm.length === 0) {
- return;
- }
- navigate(`/search?q=${searchTerm}`);
- }
- }}
- />
- |