UI update working PR

[sanghoonio]

From our discussion last year, I made some updates to the new UI:

1. all search results, similar BED files, BEDset lists, default to table view with the option to use card view
2. bed2bed search uses table view by default, and only shows UMAP if you switch to card view
3. bed splash page is rearranged to not focus primarily on the region distributions plot
4. embedding component allows for more informed selections through buckets and live selection counts plot
5. embedding component allows for static view for use as small previews on the homepage or elsewhere (looks like an image, but uses the live data), and expands when you click on it. this way there are no redirects to a separate UMAP page and the embeddings are already loaded when the preview loads
6. homepage updates: I kept the old home page to demo the static view of the embedding component, but Alex's version is available at /home_alt, and a hybrid I tried is at /home_alt2. we can decide on one to keep for the main deployment

[khoroshevskyi]

Comments on the New UI

• Can we make each UMAP link point to a single page instead of opening in a new window?
  This would keep everything on one page and allow the link to be copied and shared, as before.

BED Page

• Move statistics into a table placed to the right of the metadata.

• Consolidate the following statistics:

  • number of regions
  • median TSS distance
  • mean region width
  • GC content
    with BED format and BED compliance.

• Remove BED compliance and data format from the top list.

• Use a single, consistent color for all statistics.

• Add back the region distribution over chromosomes to the BED page.
  For now, I would not rely on the analyzer. It would be better to keep all statistics and metadata on one page so users do not need to navigate elsewhere.
  (If needed, the expected distribution over genomic partitions can be removed for now.)

• Fix the number of BEDs shown in the BEDset table.

• UMAP icon (visualization) on bed page

  • Move it before the before/after plots section, and make it on full width
  • Do not show UMAP if the file is not hg38.
    Currently, non-hg38 files leave a lot of white space, which looks awkward.
  • If the visualization spans the full page, it will be easier to hide when it is not applicable.

• Add boxes (cards) to the Overview and Statistics sections.
  At the moment, there is a lot of white space, and it is difficult for the eye to focus on specific items.

[nleroy917]

Nit pick, but can we use language logos for these buttons?

Rust syntax highlighting seems broken:

Can we make the "paper" at the top look like a BED file? Right now it looks like a PDF document with natural language instead of chr, start, and end

[cloudflare-workers-and-pages]

Deploying bedhost-ui with    Cloudflare Pages

Latest commit:	598279f
Status:	✅  Deploy successful!
Preview URL:	https://229ef0e7.bedhost.pages.dev
Branch Preview URL:	https://new-ui.bedhost.pages.dev

View logs

[sanghoonio]

@khoroshevskyi @nleroy917 didn't have a chance to implement your suggestions til today. Could you both take a look again?

[khoroshevskyi]

New UI was released, that also includes these changes