diff --git a/docusaurus.config.ts b/docusaurus.config.ts index 594b512..269cc22 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -99,7 +99,7 @@ const config: Config = { routeBasePath: "gallery", blogTitle: "Gallery", blogDescription: - "Example projects. Each one opens directly in TissUUmaps, in your browser.", + "Example projects made with TissUUmaps, to open in your browser.", blogListComponent: "@site/src/components/pages/GalleryListPage", blogTagsPostsComponent: "@site/src/components/pages/GalleryListPage", blogPostComponent: "@site/src/components/pages/GalleryProjectPage", diff --git a/gallery/2024-01-31-prostate-cancer/index.md b/gallery/2024-01-31-prostate-cancer/index.md new file mode 100644 index 0000000..75d8507 --- /dev/null +++ b/gallery/2024-01-31-prostate-cancer/index.md @@ -0,0 +1,13 @@ +--- +title: Prostate cancer grading +description: Full-resolution digitized prostate biopsies with AI-based detection, localisation and Gleason grading of prostate cancer. +image: ./thumbnail.jpg +link: https://sthlm3-2020.serve.scilifelab.se/ +tags: [Histology, H&E, Deep learning] +--- + +More and more prostate biopsies, and a worldwide shortage of urological pathologists, strain pathology departments. Grading also varies a lot between and within observers, which can lead to over- and undertreatment. This artificial intelligence system detects, localises and grades prostate cancer with clinically acceptable accuracy. The viewer shows examples of full-resolution digitized biopsies and their AI-based grading. + +[Open the overview of all sample datasets](https://sthlm3-2020.serve.scilifelab.se/). + +Publication: P. Ström, K. Kartasalo, H. Olsson, L. Solorzano et al. Artificial intelligence for diagnosis and grading of prostate cancer in biopsies: a population-based, diagnostic study. _The Lancet Oncology_, 21(2), 222–232, 2020. [doi:10.1016/S1470-2045(19)30738-7]() diff --git a/gallery/2024-01-31-prostate-cancer/thumbnail.jpg b/gallery/2024-01-31-prostate-cancer/thumbnail.jpg new file mode 100644 index 0000000..b27db06 Binary files /dev/null and b/gallery/2024-01-31-prostate-cancer/thumbnail.jpg differ diff --git a/gallery/2024-02-01-spage2vec/index.md b/gallery/2024-02-01-spage2vec/index.md new file mode 100644 index 0000000..b35ce7a --- /dev/null +++ b/gallery/2024-02-01-spage2vec/index.md @@ -0,0 +1,16 @@ +--- +title: Spage2vec +description: Unsupervised representation of localized spatial gene expression signatures, on in situ sequencing, osmFISH and MERFISH data. +image: ./thumbnail.jpg +link: https://tissuumaps-demo.serve.scilifelab.se/web/spage2vec/index.html +tags: [In situ sequencing, osmFISH, MERFISH] +--- + +Spage2vec is an unsupervised, segmentation-free approach to the spatial transcriptomic diversity of complex tissues, at subcellular resolution. It represents the spatial transcriptomic landscape of a tissue sample as a graph, and uses graph representation learning to create a lower-dimensional representation of local gene expression. These viewers show the spage2vec signatures of four datasets. We thank Mats Nilsson, Sten Linnarsson and Xiaowei Zhuang for making their datasets publicly available. + +- [In situ sequencing, mouse brain hippocampal area CA1](https://tissuumaps-demo.serve.scilifelab.se/Spage2vec_ISS_Qian_et_al.tmap). Data: X. Qian et al., _Nature Methods_, 2020. [doi:10.1038/s41592-019-0631-4](https://doi.org/10.1038/s41592-019-0631-4) +- [osmFISH, mouse brain somatosensory cortex](https://tissuumaps-demo.serve.scilifelab.se/Spage2vec_osmFISH_Codeluppi_et_al.tmap). Data: S. Codeluppi et al., _Nature Methods_, 2018. [doi:10.1038/s41592-018-0175-z](https://doi.org/10.1038/s41592-018-0175-z) +- [MERFISH, mouse brain hypothalamic preoptic area](https://tissuumaps-demo.serve.scilifelab.se/Spage2vec_MERFISH_Moffitt_et_al.tmap). Data: J. R. Moffitt et al., _Science_, 2018. [doi:10.1126/science.aau5324](https://doi.org/10.1126/science.aau5324) +- [MERFISH, human fibroblast cells (IMR90)](https://tissuumaps-demo.serve.scilifelab.se/Spage2vec_MERFISH_Chen_et_al_2015.tmap). Data: K. H. Chen et al., _Science_, 2015. [doi:10.1126/science.aaa6090](https://doi.org/10.1126/science.aaa6090) + +The spatial gene expression data is available on [Zenodo](https://doi.org/10.5281/zenodo.3897401), and the code to reproduce the results and figures [also on Zenodo](https://doi.org/10.5281/zenodo.4030404). diff --git a/gallery/2024-02-01-spage2vec/thumbnail.jpg b/gallery/2024-02-01-spage2vec/thumbnail.jpg new file mode 100644 index 0000000..8baba89 Binary files /dev/null and b/gallery/2024-02-01-spage2vec/thumbnail.jpg differ diff --git a/gallery/2024-02-02-mouse-brain/index.md b/gallery/2024-02-02-mouse-brain/index.md new file mode 100644 index 0000000..6072ead --- /dev/null +++ b/gallery/2024-02-02-mouse-brain/index.md @@ -0,0 +1,17 @@ +--- +title: Mouse brain compartments +description: Spatial compartments of the mouse brain, identified automatically from in situ sequencing data, on four sections. +image: ./thumbnail.jpg +link: https://tissuumaps-demo.serve.scilifelab.se/mousebrain_5.tmap +tags: [In situ sequencing, Clustering] +--- + +The compartments of the mouse brain are mostly outlined by hand, from tissue and cell morphology and reference atlases. This is hard, because sections are rarely parallel to the atlas sections, and organs vary in size and shape. Here, in situ sequencing data, dimensionality reduction and unsupervised clustering identify spatial compartments that match known anatomical compartments of the brain, on four sections. + +[Open the mouse brain in TissUUmaps 3](https://tissuumaps-demo.serve.scilifelab.se/mousebrain_5.tmap). + +Publication: G. Partel, M. M. Hilscher, G. Milli, L. Solorzano, A. H. Klemm, M. Nilsson and C. Wählby. Automated identification of the mouse brain's spatial compartments from in situ sequencing data. _BMC Biology_, 2020. [doi:10.1186/s12915-020-00874-5](https://doi.org/10.1186/s12915-020-00874-5) + +The raw in situ sequencing data was published in X. Qian, K. D. Harris, T. Hauling et al. Probabilistic cell typing enables fine mapping of closely related cell types in situ. _Nature Methods_, 17(1), 101–106, 2020. [doi:10.1038/s41592-019-0631-4](https://doi.org/10.1038/s41592-019-0631-4) + +The pipelines, data and software are available on [Zenodo](https://doi.org/10.5281/zenodo.3928219) and [GitHub](https://github.com/wahlby-lab/graph-iss). diff --git a/gallery/2024-02-02-mouse-brain/thumbnail.jpg b/gallery/2024-02-02-mouse-brain/thumbnail.jpg new file mode 100644 index 0000000..2a8e25a Binary files /dev/null and b/gallery/2024-02-02-mouse-brain/thumbnail.jpg differ diff --git a/gallery/2024-02-03-lung-cell-atlas/index.md b/gallery/2024-02-03-lung-cell-atlas/index.md new file mode 100644 index 0000000..4750935 --- /dev/null +++ b/gallery/2024-02-03-lung-cell-atlas/index.md @@ -0,0 +1,18 @@ +--- +title: Human Developmental Lung Cell Atlas +description: Single-cell RNA sequencing, in situ sequencing, SCRINSHOT and Spatial Transcriptomics of the developing human lung, from 5 to 14 post-conception weeks. +image: ./thumbnail.jpg +link: https://hdca-lung.serve.scilifelab.se/web/private/HDCA/index.html +tags: [scRNA-seq, In situ sequencing, SCRINSHOT, Spatial Transcriptomics] +--- + +The lung contains many specialized cell types: epithelial, endothelial, neuronal, stromal and immune cells. To understand how this diversity develops into a healthy mature lung, this atlas captures the gene expression of all cells of the developing organ, in time and space, during the first trimester. + +Viewers: + +- Single-cell RNA sequencing: [UMAP](https://hdca-lung.serve.scilifelab.se/UMAP.tmap?path=private/HDCA/UMAP/) of the clusters and sub-clusters, gene expression and metadata. +- In situ sequencing: [pcw 5](https://hdca-lung.serve.scilifelab.se/05.tmap?path=private/HDCA/ISS/), [pcw 6](https://hdca-lung.serve.scilifelab.se/06.tmap?path=private/HDCA/ISS/), [pcw 13](https://hdca-lung.serve.scilifelab.se/13.tmap?path=private/HDCA/ISS/). Spot locations and identities, cell type probabilities per bin and imputed genes. +- SCRINSHOT: [pcw 6](https://hdca-lung.serve.scilifelab.se/pcw6.tmap?path=private/HDCA/SCRINSHOT/), [pcw 8](https://hdca-lung.serve.scilifelab.se/pcw8.tmap?path=private/HDCA/SCRINSHOT/), [pcw 11](https://hdca-lung.serve.scilifelab.se/pcw11.tmap?path=private/HDCA/SCRINSHOT/), [pcw 14](https://hdca-lung.serve.scilifelab.se/pcw14.tmap?path=private/HDCA/SCRINSHOT/). Spot locations and identities. +- Spatial Transcriptomics: [pcw 6](https://hdca-lung.serve.scilifelab.se/Counts_25.tmap?path=private/HDCA/ST/), [pcw 8](https://hdca-lung.serve.scilifelab.se/Counts_29.tmap?path=private/HDCA/ST/), [pcw 10](https://hdca-lung.serve.scilifelab.se/Counts_06.tmap?path=private/HDCA/ST/), [pcw 11](https://hdca-lung.serve.scilifelab.se/Counts_23.tmap?path=private/HDCA/ST/). Gene expression per gene or as pie charts. + +Publication: A. Sountoulidis, S. M. Salas, E. Braun, C. Avenel, J. Bergenstråhle, M. Vicari, P. Czarnewski, J. Theelke, A. Liontos, X. Abalo, Ž. Andrusivová, M. Asp, X. Li, L. Hu, S. Sariyar, A. M. Casals, B. Ayoglu, A. Firsova, J. Michaëlsson, E. Lundberg, C. Wählby, E. Sundström, S. Linnarsson, J. Lundeberg, M. Nilsson and C. Samakovlis. Developmental origins of cell heterogeneity in the human lung. _bioRxiv_, 2022. [doi:10.1101/2022.01.11.475631](https://doi.org/10.1101/2022.01.11.475631) diff --git a/gallery/2024-02-03-lung-cell-atlas/thumbnail.jpg b/gallery/2024-02-03-lung-cell-atlas/thumbnail.jpg new file mode 100644 index 0000000..ce7c8d5 Binary files /dev/null and b/gallery/2024-02-03-lung-cell-atlas/thumbnail.jpg differ diff --git a/gallery/2024-02-04-human-heart/index.md b/gallery/2024-02-04-human-heart/index.md new file mode 100644 index 0000000..5af8b23 --- /dev/null +++ b/gallery/2024-02-04-human-heart/index.md @@ -0,0 +1,13 @@ +--- +title: Developmental human heart +description: De novo modelling of cell-type signatures in the developing human heart, from in situ sequencing data analysed with spage2vec. +image: ./thumbnail.jpg +link: https://tissuumaps-demo.serve.scilifelab.se/human_heart.tmap +tags: [In situ sequencing, Cell typing] +--- + +Targeted cell typing that relies on existing single-cell data gives incomplete and biased maps, which can hide the molecular and cellular diversity of a tissue section. Here, spage2vec, a de novo approach, spatially resolves and characterizes the cellular diversity during human heart development. The viewer shows the data of the in situ sequencing experiment and the identified cell types. + +[Open the human heart in TissUUmaps 3](https://tissuumaps-demo.serve.scilifelab.se/human_heart.tmap). + +Publication: R. S. Marco Salas, X. Yuan, C. Sylvén, M. Nilsson, C. Wählby and G. Partel. De novo spatiotemporal modelling of cell-type signatures identifies novel cell populations in the developmental human heart. _PLOS Computational Biology_, 2022. [doi:10.1371/journal.pcbi.1010366](https://doi.org/10.1371/journal.pcbi.1010366) diff --git a/gallery/2024-02-04-human-heart/thumbnail.jpg b/gallery/2024-02-04-human-heart/thumbnail.jpg new file mode 100644 index 0000000..61ecb84 Binary files /dev/null and b/gallery/2024-02-04-human-heart/thumbnail.jpg differ diff --git a/gallery/2024-02-05-depicter/index.md b/gallery/2024-02-05-depicter/index.md new file mode 100644 index 0000000..82339b1 --- /dev/null +++ b/gallery/2024-02-05-depicter/index.md @@ -0,0 +1,17 @@ +--- +title: DEPICTER +description: Deep representation clustering for histology annotation, shown on a whole-slide image of the CAMELYON17 dataset. +image: ./thumbnail.jpg +link: https://depicter-2024.serve.scilifelab.se/patient_022_node_4.tmap?path=DEPICTER/camelyon +tags: [Histology, H&E, Deep learning] +--- + +DEPICTER (Deep rEPresentatIon ClusTERing) is an interactive segmentation tool for histopathology annotation. It produces a patch-wise dense segmentation map of a whole-slide image, in three steps: + +1. A pretrained model computes embeddings from image patches. +2. The user selects a few benign and cancerous patches in the multi-resolution image. +3. Guided by the embeddings, the labels spread to the rest of the image, by seeded iterative clustering or by gating in the embedding space. + +[Open the demo on the CAMELYON17 dataset](https://depicter-2024.serve.scilifelab.se/patient_022_node_4.tmap?path=DEPICTER/camelyon). + +Publication: E. Chelebian, C. Avenel, F. Ciompi and C. Wählby. DEPICTER: Deep representation clustering for histology annotation. _Computers in Biology and Medicine_, 108026, 2024. [doi:10.1016/j.compbiomed.2024.108026](https://doi.org/10.1016/j.compbiomed.2024.108026) diff --git a/gallery/2024-02-05-depicter/thumbnail.jpg b/gallery/2024-02-05-depicter/thumbnail.jpg new file mode 100644 index 0000000..a08af53 Binary files /dev/null and b/gallery/2024-02-05-depicter/thumbnail.jpg differ diff --git a/gallery/2024-02-06-points2regions/index.md b/gallery/2024-02-06-points2regions/index.md new file mode 100644 index 0000000..f44021e --- /dev/null +++ b/gallery/2024-02-06-points2regions/index.md @@ -0,0 +1,15 @@ +--- +title: Points2Regions +description: Fast, interactive clustering of imaging-based spatial transcriptomics data, as a TissUUmaps plugin. Try it on human heart, mouse brain or your own data. +image: ./thumbnail.jpg +link: https://tissuumaps-demo.serve.scilifelab.se/p2r_human_heart.tmap +tags: [In situ sequencing, Clustering, Plugin] +--- + +Points2Regions is a Python tool, integrated into TissUUmaps and Napari, for clustering spatial biomarkers in omics data. It finds patterns across scales, beyond the limits of traditional clustering methods. It identifies biologically important regions and cell types across various datasets. + +Try Points2Regions: + +- [Human heart tissue](https://tissuumaps-demo.serve.scilifelab.se/p2r_human_heart.tmap) +- [Mouse brain tissue](https://tissuumaps-demo.serve.scilifelab.se/p2r_mousebrain.tmap) +- [Your own data](https://tissuumaps-demo.serve.scilifelab.se/p2r_own.tmap) diff --git a/gallery/2024-02-06-points2regions/thumbnail.jpg b/gallery/2024-02-06-points2regions/thumbnail.jpg new file mode 100644 index 0000000..04f21d4 Binary files /dev/null and b/gallery/2024-02-06-points2regions/thumbnail.jpg differ diff --git a/gallery/README.md b/gallery/README.md index c66441f..63d8288 100644 --- a/gallery/README.md +++ b/gallery/README.md @@ -23,4 +23,6 @@ Every folder here is one project of the Gallery page of the website. Folders sta | `data_url` | Where the data comes from | | `data_license` | The license of the data, for example `CC BY 4.0` | +The gallery has two sections: TissUUmaps 4 projects, then older TissUUmaps 3 projects. For a TissUUmaps 3 project, replace `project` with `link`, the address of the project on its own server. The data fields are optional for these: remove all three, or keep all three. + The text below the fields is optional. It appears on the project's own page and can use [Markdown](https://www.markdownguide.org/basic-syntax/): paragraphs, **bold**, links, lists and images. diff --git a/src/components/pages/GalleryListPage/ProjectCard.tsx b/src/components/pages/GalleryListPage/ProjectCard.tsx index 5083eac..d05e26a 100644 --- a/src/components/pages/GalleryListPage/ProjectCard.tsx +++ b/src/components/pages/GalleryListPage/ProjectCard.tsx @@ -13,20 +13,17 @@ export function ProjectCard({ }): ReactNode { return (
- +
- + {project.title}

{project.description}

-

- Data: {project.dataProvider},{" "} - {project.dataLicense} -

- + +
); @@ -47,3 +44,35 @@ export function ProjectTags({ ); } + +/** The data source line; an empty one keeps the card's button at the bottom */ +export function ProjectSource({ + project, + className, +}: { + project: GalleryProject; + className?: string; +}): ReactNode { + return ( +

+ {project.data && ( + <> + Data: {project.data.provider},{" "} + {project.data.license} + + )} +

+ ); +} + +export function ProjectButton({ + project, +}: { + project: GalleryProject; +}): ReactNode { + return ( + + ); +} diff --git a/src/components/pages/GalleryListPage/index.tsx b/src/components/pages/GalleryListPage/index.tsx index 46d5d0b..7740033 100644 --- a/src/components/pages/GalleryListPage/index.tsx +++ b/src/components/pages/GalleryListPage/index.tsx @@ -10,6 +10,21 @@ import { readGalleryProject } from "../../../gallery"; import { ProjectCard } from "./ProjectCard"; import styles from "./styles.module.css"; +// The gallery sections: TissUUmaps project files first, then links to older +// TissUUmaps 3 projects +const sections = [ + { + version: 4, + title: "TissUUmaps 4 projects", + lead: "Each one opens directly in TissUUmaps, in your browser.", + }, + { + version: 3, + title: "TissUUmaps 3 projects", + lead: "Older projects made with TissUUmaps 3.", + }, +] as const; + // The gallery is the blog plugin's content (see docusaurus.config.ts), listed // as cards; the same page lists the projects with one tag export default function GalleryListPage( @@ -42,13 +57,31 @@ export default function GalleryListPage(

-
-
- {projects.map((project) => ( - - ))} -
-
+
+ {sections.map(({ version, title, lead }) => { + const sectionProjects = projects.filter( + (project) => project.version === version, + ); + return ( + sectionProjects.length > 0 && ( +
+ + {title} + +

{lead}

+
+ {sectionProjects.map((project) => ( + + ))} +
+
+ ) + ); + })} +
); diff --git a/src/components/pages/GalleryListPage/styles.module.css b/src/components/pages/GalleryListPage/styles.module.css index a6e9c7d..beea522 100644 --- a/src/components/pages/GalleryListPage/styles.module.css +++ b/src/components/pages/GalleryListPage/styles.module.css @@ -35,6 +35,19 @@ max-width: 1280px; } +.band > .container + .container { + margin-top: 4rem; +} + +.sectionTitle { + margin-bottom: 0.5rem; + font-size: 2rem; +} + +.sectionLead { + margin-bottom: 2rem; +} + .grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); @@ -77,12 +90,12 @@ padding: 1.25rem 1.5rem 1.5rem; } -.body h2 { +.body h3 { margin-bottom: 0.5rem; font-size: 1.3rem; } -.body h2 a { +.body h3 a { color: inherit; } diff --git a/src/components/pages/GalleryProjectPage/index.tsx b/src/components/pages/GalleryProjectPage/index.tsx index 99a43a7..6d313be 100644 --- a/src/components/pages/GalleryProjectPage/index.tsx +++ b/src/components/pages/GalleryProjectPage/index.tsx @@ -6,8 +6,11 @@ import MDXContent from "@theme/MDXContent"; import type { ReactNode } from "react"; import { readGalleryProject } from "../../../gallery"; -import { Button } from "../../markdown/Button"; -import { ProjectTags } from "../GalleryListPage/ProjectCard"; +import { + ProjectButton, + ProjectSource, + ProjectTags, +} from "../GalleryListPage/ProjectCard"; import styles from "./styles.module.css"; // The own page of a gallery project: its card details and the Markdown text @@ -23,20 +26,17 @@ export default function GalleryProjectPage({ content }: Props): ReactNode { ← Gallery

- - - +
{project.title}

{project.description}

-

- Data: {project.dataProvider} - , {project.dataLicense} -

- + {project.data && ( + + )} +
diff --git a/src/gallery.ts b/src/gallery.ts index 60f6c4d..b988f51 100644 --- a/src/gallery.ts +++ b/src/gallery.ts @@ -9,30 +9,34 @@ const galleryAppUrl = "pathname:///app/"; /** A gallery project, read from the front matter of its Markdown file */ export interface GalleryProject { + /** + * A TissUUmaps project file (`project`), or a link to an older TissUUmaps 3 + * project on its own server (`link`) + */ + version: 4 | 3; title: string; description: string; /** URL of the screenshot */ image: string; - /** URL that opens the project in TissUUmaps */ + /** URL that opens the project */ appUrl: string; /** URL of the project's own page */ pageUrl: string; tags: { label: string; permalink: string }[]; - dataProvider: string; - dataUrl: string; - dataLicense: string; + /** Where the data comes from; TissUUmaps 3 projects can leave it out */ + data: { provider: string; url: string; license: string } | undefined; editUrl: string | undefined; } -const requiredFields = [ - "title", - "description", - "image", - "project", - "data_provider", - "data_url", - "data_license", -] as const; +type Field = + | "title" + | "description" + | "image" + | "project" + | "link" + | "data_provider" + | "data_url" + | "data_license"; /** * Reads a gallery project from its blog post content @@ -45,25 +49,46 @@ const requiredFields = [ export function readGalleryProject(content: Content): GalleryProject { const { frontMatter, assets, metadata } = content; const fields = frontMatter as Record; - for (const field of requiredFields) { - if (typeof fields[field] !== "string" || fields[field] === "") { + const has = (name: Field) => + typeof fields[name] === "string" && fields[name] !== ""; + const field = (name: Field) => { + if (!has(name)) { throw new Error( - `Gallery project ${metadata.source}: the field "${field}" is missing`, + `Gallery project ${metadata.source}: the field "${name}" is missing`, ); } + return fields[name] as string; + }; + if (has("project") && has("link")) { + throw new Error( + `Gallery project ${metadata.source}: use either "project" or "link", not both`, + ); } - const field = (name: (typeof requiredFields)[number]) => - fields[name] as string; + const version = has("link") ? 3 : 4; + // TissUUmaps 3 projects can leave out the data fields, but not only some + const hasData = + version === 4 || + has("data_provider") || + has("data_url") || + has("data_license"); return { + version, title: field("title"), description: field("description"), image: assets.image ?? field("image"), - appUrl: `${galleryAppUrl}?project=${encodeURIComponent(field("project"))}`, + appUrl: + version === 3 + ? field("link") + : `${galleryAppUrl}?project=${encodeURIComponent(field("project"))}`, pageUrl: metadata.permalink, tags: metadata.tags.map(({ label, permalink }) => ({ label, permalink })), - dataProvider: field("data_provider"), - dataUrl: field("data_url"), - dataLicense: field("data_license"), + data: hasData + ? { + provider: field("data_provider"), + url: field("data_url"), + license: field("data_license"), + } + : undefined, editUrl: metadata.editUrl, }; }