feat: add TissUUmaps 3 projects to the gallery

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",

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](<https://doi.org/10.1016/S1470-2045(19)30738-7>)

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).

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).

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)

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)

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)

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)

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.

src/components/pages/GalleryListPage/ProjectCard.tsx

@@ -13,20 +13,17 @@ export function ProjectCard({
 }): ReactNode {
   return (
     <article className={styles.card}>
-      <Link href={project.appUrl} tabIndex={-1} aria-hidden>
+      <Link to={project.pageUrl} tabIndex={-1} aria-hidden>
         <img src={project.image} alt="" loading="lazy" />
       </Link>
       <div className={styles.body}>
-        <Heading as="h2">
+        <Heading as="h3">
           <Link to={project.pageUrl}>{project.title}</Link>
         </Heading>
         <p>{project.description}</p>
         <ProjectTags project={project} />
-        <p className={styles.source}>
-          Data: <Link href={project.dataUrl}>{project.dataProvider}</Link>,{" "}
-          {project.dataLicense}
-        </p>
-        <Button to={project.appUrl}>Open in TissUUmaps</Button>
+        <ProjectSource project={project} className={styles.source} />
+        <ProjectButton project={project} />
       </div>
     </article>
   );
@@ -47,3 +44,35 @@ export function ProjectTags({
     </ul>
   );
 }
+
+/** 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 (
+    <p className={className}>
+      {project.data && (
+        <>
+          Data: <Link href={project.data.url}>{project.data.provider}</Link>,{" "}
+          {project.data.license}
+        </>
+      )}
+    </p>
+  );
+}
+
+export function ProjectButton({
+  project,
+}: {
+  project: GalleryProject;
+}): ReactNode {
+  return (
+    <Button to={project.appUrl}>
+      {project.version === 3 ? "Open in TissUUmaps 3" : "Open in TissUUmaps"}
+    </Button>
+  );
+}

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(
             </p>
           </div>
         </section>
-        <section className={styles.band}>
-          <div className={clsx("container", styles.container, styles.grid)}>
-            {projects.map((project) => (
-              <ProjectCard key={project.pageUrl} project={project} />
-            ))}
-          </div>
-        </section>
+        <div className={styles.band}>
+          {sections.map(({ version, title, lead }) => {
+            const sectionProjects = projects.filter(
+              (project) => project.version === version,
+            );
+            return (
+              sectionProjects.length > 0 && (
+                <section
+                  key={version}
+                  className={clsx("container", styles.container)}
+                >
+                  <Heading as="h2" className={styles.sectionTitle}>
+                    {title}
+                  </Heading>
+                  <p className={styles.sectionLead}>{lead}</p>
+                  <div className={styles.grid}>
+                    {sectionProjects.map((project) => (
+                      <ProjectCard key={project.pageUrl} project={project} />
+                    ))}
+                  </div>
+                </section>
+              )
+            );
+          })}
+        </div>
       </main>
     </Layout>
   );

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;
 }
 

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 {
             <Link to="/gallery">← Gallery</Link>
           </p>
           <div className={styles.grid}>
-            <Link href={project.appUrl} tabIndex={-1} aria-hidden>
-              <img className={styles.image} src={project.image} alt="" />
-            </Link>
+            <img className={styles.image} src={project.image} alt="" />
             <div>
               <Heading as="h1" className={styles.title}>
                 {project.title}
               </Heading>
               <p className={styles.lead}>{project.description}</p>
               <ProjectTags project={project} />
-              <p className={styles.source}>
-                Data: <Link href={project.dataUrl}>{project.dataProvider}</Link>
-                , {project.dataLicense}
-              </p>
-              <Button to={project.appUrl}>Open in TissUUmaps</Button>
+              {project.data && (
+                <ProjectSource project={project} className={styles.source} />
+              )}
+              <ProjectButton project={project} />
             </div>
           </div>
           <article className={styles.text}>