Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add basic table for similar bed files and pdf download button for plots #155

Merged
merged 9 commits into from
Nov 15, 2024
Merged

Add basic table for similar bed files and pdf download button for plots #155

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
8e15412
fix search table stretched link in safari
sanghoonio Nov 12, 2024
082c766
Merge branch 'dev' into dev_sam
sanghoonio Nov 14, 2024
b43828a
bootstrap detail cleanup
sanghoonio Nov 14, 2024
86e9e37
address #153 and #154, and clean up more ui related details
sanghoonio Nov 14, 2024
52543cd
ui detail cleanup
sanghoonio Nov 15, 2024
1f9eb9d
description placeholder text for bed splash
sanghoonio Nov 15, 2024
9e999c8
bed sets table height consistency
sanghoonio Nov 15, 2024
44f1592
bedsets typo
sanghoonio Nov 15, 2024
0fc1b37
address comments
sanghoonio Nov 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions ui/bedbase-types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -678,6 +678,17 @@ export interface components {
/** Results */
results?: components["schemas"]["QdrantSearchResult"][];
};
/** BedNeighborsResult */
BedNeighboursResult: {
/** Count */
count: number;
/** Limit */
limit: number;
/** Offset */
offset: number;
/** Results */
results?: components["schemas"]["QdrantSearchResult"][];
};
/** BedMetadataAll */
BedMetadataAll: {
/**
Expand Down
11 changes: 4 additions & 7 deletions ui/src/components/bed-splash-components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -141,15 +141,12 @@ export const BedSplashHeader = (props: Props) => {
</Dropdown>
</div>
</div>
<div className="d-flex flex-row align-items-end justify-content-between">
<b>{metadata.name}</b>
<div className="ms-auto">
{metadata.description}
</div>
<div>
<h5 className='fw-semibold mb-1'>{metadata.name}</h5>
<p className='text-body-secondary fst-italic'>{metadata?.description || 'No description available'}</p>
</div>

<div className="d-flex flex-row align-items-end justify-content-between mt-2">

<div className="d-flex flex-row gap-1 text-lg">
<div className="d-flex flex-row">
<p className="mb-0">
Expand Down Expand Up @@ -270,7 +267,7 @@ export const BedSplashHeader = (props: Props) => {
<div className="d-flex flex-row text-muted">
<i className="bi bi-calendar4-event me-1 ms-4" />
<p className="mb-0">
<span>Last update:</span>{' '}
<span>Updated:</span>{' '}
{metadata?.last_update_date ? formatDateTime(metadata?.last_update_date) : 'No date available'}
</p>
</div>
Expand Down
24 changes: 14 additions & 10 deletions ui/src/components/bed-splash-components/plots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useState } from 'react';
import { Col, Image, Row } from 'react-bootstrap';
import { components } from '../../../bedbase-types';
import { chunkArray, makeThumbnailImageLink } from '../../utils';
import { chunkArray, makeThumbnailImageLink , makePDFImageLink } from '../../utils';
import { Fragment } from 'react';
import { FigureModal } from '../modals/figure-modal';

Expand All @@ -13,12 +13,13 @@ type PlotsProps = {

type PlotProps = {
src: string;
pdf: string;
alt: string;
title: string;
};

const Plot = (props: PlotProps) => {
const { src, alt, title } = props;
const { src, pdf, alt, title } = props;
const [show, setShow] = useState(false);

return (
Expand All @@ -31,13 +32,13 @@ const Plot = (props: PlotProps) => {
}}
className="h-100 border rounded p-1 shadow-sm hover-border-primary transition-all"
>
<div className="px-1 d-flex flex-row justify-content-between w-100 mb-1">
<span className="fw-bold text-sm text-center w-100 mb-1">{title}</span>
<div className="px-1 text-center">
<span className="fw-bold text-sm mb-1">{title}</span>
{/* <button onClick={() => setShow(true)} className="btn btn-sm btn-outline-primary text-xs">
<i className="bi bi-eye" />
</button> */}
</div>
<div className="d-flex flex-row align-items-center w-100 justify-content-center">
<div className="text-center">
<Image height="300px" src={src} alt={alt} />
</div>
<FigureModal
Expand All @@ -47,6 +48,7 @@ const Plot = (props: PlotProps) => {
}}
title={title}
src={src}
pdf={pdf}
alt={alt}
/>
</div>
Expand All @@ -55,13 +57,14 @@ const Plot = (props: PlotProps) => {

export const Plots = (props: PlotsProps) => {
const { metadata } = props;

const plotNames = metadata.plots ? Object.keys(metadata.plots) : [];
return (
<Fragment>
<div className="my-2">
<Row className="mb-2 row-cols-3 g-2">
{metadata.plots &&
chunkArray(plotNames, 3).map((chunk, idx) => (
<Row key={idx} className="mb-2">
<Fragment key={idx}>
{chunk.map((plotName) => {
// this is for type checking
const plotNameKey = plotName as keyof typeof metadata.plots;
Expand All @@ -73,19 +76,20 @@ export const Plots = (props: PlotsProps) => {
metadata.plots[plotNameKey]?.description || metadata.plots[plotNameKey].title
: plotName;
return (
<Col key={plotName} sm={12} md={4} className="px-1">
<Col key={plotName}>
<Plot
key={plotName}
src={plotExists ? makeThumbnailImageLink(metadata.id, plotName, 'bed') : '/fignotavl_png.svg'}
pdf={plotExists ? makePDFImageLink(metadata.id, plotName, 'bed') : '/fignotavl_png.svg'}
alt={alt || 'No description available'}
title={title || 'No title available'}
/>
</Col>
);
})}
</Row>
</Fragment>
))}
</div>
</Row>
</Fragment>
);
};
104 changes: 53 additions & 51 deletions ui/src/components/bedset-splash-components/beds-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,65 +139,67 @@ export const BedsTable = (props: Props) => {
});

return (
<div className="rounded border shadow-sm my-2">
<div className="rounded border shadow-sm mb-2 p-0">
<div className="d-flex flex-row mt-2">
<input
className="form-control"
className="form-control mx-3 my-2"
placeholder="Search files"
value={globalFilter}
onChange={(e) => setGlobalFilter(e.target.value)}
/>
</div>
<table className="table mb-2 table-hover">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan} scope="col" className="text-right align-middle" style={{ minWidth: '110px' }}>
{header.isPlaceholder ? null : (
<div
className={header.column.getCanSort() ? 'cursor-pointer' : ''}
onClick={header.column.getToggleSortingHandler()}
title={
header.column.getCanSort()
? header.column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: header.column.getNextSortingOrder() === 'desc'
? 'Sort descending'
: 'Clear sort'
: undefined
}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: ' 🔼',
desc: ' 🔽',
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className="cursor-pointer"
onClick={() => (window.location.href = `/bed/${row.original.id}`)}
>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="text-right align-middle small-font">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
<div className='table-responsive'>
<table className="table mb-2 table-hover table">
<thead>
{table.getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id} colSpan={header.colSpan} scope="col" className="text-right align-middle" style={{ minWidth: '110px' }}>
{header.isPlaceholder ? null : (
<div
className={header.column.getCanSort() ? 'cursor-pointer' : ''}
onClick={header.column.getToggleSortingHandler()}
title={
header.column.getCanSort()
? header.column.getNextSortingOrder() === 'asc'
? 'Sort ascending'
: header.column.getNextSortingOrder() === 'desc'
? 'Sort descending'
: 'Clear sort'
: undefined
}
>
{flexRender(header.column.columnDef.header, header.getContext())}
{{
asc: <i className='bi bi-caret-up-fill ms-1' />,
desc: <i className='bi bi-caret-down-fill ms-1' />,
}[header.column.getIsSorted() as string] ?? null}
</div>
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{table.getRowModel().rows.map((row) => (
<tr
key={row.id}
className="cursor-pointer"
onClick={() => (window.location.href = `/bed/${row.original.id}`)}
>
{row.getVisibleCells().map((cell) => (
<td key={cell.id} className="text-right align-middle small-font">
{flexRender(cell.column.columnDef.cell, cell.getContext())}
</td>
))}
</tr>
))}
</tbody>
</table>
</div>
<div className="h-4" />
<div className="d-flex justify-content-between align-items-center gap-2 mb-2">
<div className="d-flex justify-content-between align-items-center gap-2 m-3">
<div className="d-flex flex-row align-items-center ">
Showing
<span className="fw-bold mx-1">
Expand Down
28 changes: 17 additions & 11 deletions ui/src/components/bedset-splash-components/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,10 +22,10 @@ export const BedsetSplashHeader = (props: Props) => {

return (
<div className="border-bottom py-2">
<div className="d-flex flex-row align-items-start justify-content-between mb-2 ">
<div className="d-flex flex-row align-items-start justify-content-between">
<div className="d-flex flex-column align-items-start">
<h4 className="fw-bold">
<i className="bi bi-file-earmark-text me-2" />
<i className="bi bi-journal-text me-2" />
{metadata?.id || 'No name available'}
<button
className="btn btn-link text-primary mb-2"
Expand Down Expand Up @@ -104,16 +104,22 @@ export const BedsetSplashHeader = (props: Props) => {
</div>
</div>
<div>
<p className="mb-2">{metadata?.description || 'No description available'}</p>
<p className='text-body-secondary fst-italic'>{metadata?.description || 'No description available'}</p>
</div>
<div className="d-flex flex-row align-items-end justify-content-start gap-1">
<div className="badge bg-primary text-wrap">
<i className="bi bi-hash me-1" />
{metadata.md5sum}
</div>
<div className="badge bg-primary text-wrap">
<i className="bi bi-file-earmark-text me-1" />
{metadata.bed_ids?.length} BED files
<div className="d-flex flex-row align-items-end justify-content-between mt-2">
<div className="d-flex flex-row gap-1">
<p className='mb-0'>
<div className="badge bg-primary text-wrap">
<i className="bi bi-hash me-1" />
{metadata.md5sum}
</div>
</p>
<p className='mb-0'>
<div className="badge bg-primary text-wrap">
<i className="bi bi-file-earmark-text me-1" />
{metadata.bed_ids?.length} BED files
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we check for bed_ids first? Otherwise this will render as just BED files. Small thing, just curious

</div>
</p>
</div>
</div>
<DownloadBedSetModal id={metadata.id} show={showDownloadModal} setShow={setShowDownloadModal} />
Expand Down
8 changes: 4 additions & 4 deletions ui/src/components/bedset-splash-components/plots.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ export const Plots = (props: PlotsProps) => {
const plotNames = metadata.plots ? Object.keys(metadata.plots) : [];
return (
<Fragment>
<div className="my-2">
<Row className="mb-2 row-cols-3 g-2">
{metadata.plots &&
chunkArray(plotNames, 3).map((chunk, idx) => (
<Row key={idx} className="mb-2">
<Fragment key={idx}>
{chunk.map((plotName) => {
// this is for type checking
const plotNameKey = plotName as keyof typeof metadata.plots;
Expand All @@ -83,9 +83,9 @@ export const Plots = (props: PlotsProps) => {
</Col>
);
})}
</Row>
</Fragment>
))}
</div>
</Row>
</Fragment>
);
};
20 changes: 18 additions & 2 deletions ui/src/components/modals/figure-modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,15 @@ import { Modal } from 'react-bootstrap';
type Props = {
title: string;
src: string;
pdf?: string;
alt: string;
show: boolean;
onHide: () => void;
};

export const FigureModal = (props: Props) => {
const { title, src, alt, show, onHide } = props;
const { title, src, pdf, alt, show, onHide } = props;

return (
<Modal
animation={false}
Expand All @@ -35,8 +37,22 @@ export const FigureModal = (props: Props) => {
link.click();
}}
>
<i className="bi bi-download me2"></i> Download
<i className="bi bi-download me-1"></i> Download PNG
</button>
{pdf &&
<button
className="btn btn-outline-primary"
onClick={() => {
const link = document.createElement('a');
link.href = pdf;
link.download = alt;
link.click();
}}
>
<i className="bi bi-filetype-pdf me-1"></i> Download PDF
</button>
}

<button onClick={() => onHide()} className="btn btn-primary">
Close
</button>
Expand Down
Loading
Loading