docs: Reorganize pages, implement tiles and add Intro do CryoET doc (#…

…1195) Closes #1188 Existing links are not changed, but we may want to link to the new Intro do CryoET page, or to the new About page. As usual, here's a link to a preview: https://melissawm.github.io/cryoet-data-portal
chanzuckerberg · Oct 2, 2024 · def942f · def942f
1 parent 6164201
commit def942f
Show file tree

Hide file tree

Showing 22 changed files with 333 additions and 37 deletions.
diff --git a/docs/_static/css/custom.css b/docs/_static/css/custom.css
@@ -20,6 +20,7 @@ html, body {
   --md-primary-fg-color: #A2C9FF;
   --md-code-bg-color: #494949;
   --md-code-fg-color: #FFFFFF;
+  --sd-color-card-border: var(--md-default-fg-color--light);
 }
 
 /* Header */
@@ -263,7 +264,7 @@ dl.py.attribute.objdesc > dd > p {
   margin-bottom: 0;
 }
 
-.md-typeset blockquote, .md-typeset dl, .md-typeset figure, .md-typeset ol, .md-typeset pre, .md-typeset ul {
+.md-typeset blockquote, .md-typeset dl, .md-typeset ol, .md-typeset pre, .md-typeset ul {
   margin-top: 0;
   margin-bottom: 0;
 }
@@ -325,3 +326,34 @@ dl.class > dd > dl:nth-child(27) {
   box-shadow: none;
   border-bottom: 0.01px solid var(--md-default-fg-color--lightest);
 }
+
+/* Figure/video captions */
+.md-typeset figcaption {
+  min-width: 75%;
+  max-width: fit-content;
+  text-align: justify;
+  font-size: small;
+  margin-top: 0px;
+}
+
+/* Better spacing around figure elements */
+.md-typeset figure {
+  margin-top: 30px;
+}
+
+.md-typeset figure img {
+  margin: auto;
+}
+
+/* Landing page button */
+.sd-btn {
+  font-size: 0.75rem;
+}
+
+/* Centered quote */
+div .centered-quote {
+  text-align: center;
+  font-style: italic;
+  max-width: 24rem;
+  margin: auto;
+}
diff --git a/docs/_static/img/intro_movie.mp4 b/docs/_static/img/intro_movie.mp4
diff --git a/docs/_static/img/intro_movie.png b/docs/_static/img/intro_movie.png
diff --git a/docs/_static/img/resolution_ranges.png b/docs/_static/img/resolution_ranges.png
diff --git a/docs/_static/img/schematics_subtomogram.png b/docs/_static/img/schematics_subtomogram.png
diff --git a/docs/_static/img/schematics_transmission.png b/docs/_static/img/schematics_transmission.png
diff --git a/docs/_static/img/schematics_vitrification.png b/docs/_static/img/schematics_vitrification.png
diff --git a/docs/_static/img/schematics_workflow.png b/docs/_static/img/schematics_workflow.png
diff --git a/docs/_toc.yml b/docs/_toc.yml
@@ -5,13 +5,17 @@ subtrees:
     title: "Home"
   - file: cryoet_data_portal_docsite_quick_start.md
   - file: python-api.md
-  - file: cryoet_data_portal_docsite_data.md
   - file: tutorials.md
     subtrees:
     - entries:
+      - file: cryoet_data_portal_docsite_aws.md
       - file: cryoet_data_portal_docsite_examples.md
+      - file: cryoet_data_portal_docsite_napari.md
       - file: tutorial_sample_boundaries.md
+  - file: about.md
+    subtrees:
+    - entries:
+      - file: intro_cryoet.md
+      - file: cryoet_data_portal_docsite_data.md
   - file: cryoet_data_portal_docsite_faq.md
     title: "FAQ"
-  - file: cryoet_data_portal_docsite_aws.md
-  - file: cryoet_data_portal_docsite_napari.md
diff --git a/docs/about.md b/docs/about.md
@@ -0,0 +1,25 @@
+---
+hide-navigation: true
+---
+
+# About CryoET
+
+Learn about CryoET data and how to navigate the CryoET Data Portal.
+
+::::{grid} 1 1 2 2
+:gutter: 2
+
+:::{grid-item-card} Introduction to CryoET
+:link: cryoet-intro
+:link-type: ref
+
+Learn about the capabilities and acquisition of CryoET data
+:::
+
+:::{grid-item-card} Data Organization
+:link: data-organization
+:link-type: ref
+
+Guide on how the CryoET Data Portal is organized
+:::
+::::
diff --git a/docs/conf.py b/docs/conf.py
@@ -26,6 +26,7 @@
     "myst_nb",
     "sphinx_immaterial",
     "sphinx_external_toc",
+    "sphinx_design",
 ]
 
 napoleon_custom_sections = ["Lifecycle"]

diff --git a/docs/cryoet_data_portal_docsite_aws.md b/docs/cryoet_data_portal_docsite_aws.md
@@ -1,7 +1,4 @@
----
-hide-navigation: true
----
-
+(download-data)=
 # Download Data
 
 ## Download data using AWS CLI

diff --git a/docs/cryoet_data_portal_docsite_data.md b/docs/cryoet_data_portal_docsite_data.md
@@ -2,7 +2,7 @@
 tocdepth: 2
 hide-navigation: true
 ---
-
+(data-organization)=
 # Data Organization
 
 The Data Portal is organized in a hierarchical structure. We welcome contributions to the Portal. [Use this form](https://airtable.com/apppmytRJXoXYTO9w/shr5UxgeQcUTSGyiY?prefill_Event=Portal\&hide_Event=true) to express interest in adding your data to the Portal.

diff --git a/docs/cryoet_data_portal_docsite_examples.md b/docs/cryoet_data_portal_docsite_examples.md
@@ -1,3 +1,4 @@
+(examples)=
 # Examples
 
 Below are code snippets for completing various tasks using the Python Client API. Have an example you'd like to share with the community? Submit a [GitHub issue](https://github.com/chanzuckerberg/cryoet-data-portal/issues) and include "Example:" in your title.

diff --git a/docs/cryoet_data_portal_docsite_landing.md b/docs/cryoet_data_portal_docsite_landing.md
@@ -6,6 +6,13 @@ hide-navigation: true
 
 The [Chan Zuckerberg Institute for Advanced Biological Imaging (CZ Imaging Institute)](https://www.czimaginginstitute.org/) has made a beta release of the [CryoET Data Portal](https://cryoetdataportal.czscience.com) providing queryable and organized data from CryoET experiments. Each of the over 15,000 tomograms on the Portal have at least one structure annotated.
 
+```{button-ref} data-organization
+:color: primary
+:align: center
+
+Learn about the Data Schema
+```
+
 This site provides additional documentation for using our [Python API](python-api) to query and download data and for navigating the [CryoET Data Portal](https://cryoetdataportal.czscience.com) and its visualization tools. We hope this site will assist segmentation algorithm developers to produce annotations for diverse macromolecules in the tomograms that may be used for high-resolution subtomogram averaging.
 
 We welcome feedback from the community on the data structure, design and functionality.
@@ -15,10 +22,37 @@ We welcome feedback from the community on the data structure, design and functio
 
 ## Getting Started
 
-- [Installation](cryoet_data_portal_docsite_quick_start)
-- [Python Client API Reference](python-api)
-- [Tutorials](tutorials)
-- [napari Plugin Documentation](cryoet_data_portal_docsite_napari)
+::::{grid} 1 1 2 2
+:gutter: 2
+
+:::{grid-item-card} Get Started
+:link: quick-start
+:link-type: ref
+
+Install and start using the Python Client API
+:::
+
+:::{grid-item-card} API Reference
+:link: api-documentation
+:link-type: ref
+
+Information on the Python Client API Classes
+:::
+
+:::{grid-item-card} Tutorials
+:link: tutorials
+:link-type: doc
+
+Examples of selecting, downloading, and visualizing data from the Portal
+:::
+
+:::{grid-item-card} About CryoET
+:link: about
+:link-type: doc
+
+Learn about CryoET data and how to navigate the CryoET Data Portal
+:::
+::::
 
 ## Amazon Web Services S3 Bucket Info
 
@@ -34,23 +68,7 @@ To list the bucket contents with the S3 CLI without credentials, please use the
 aws s3 ls --no-sign-request s3://cryoet-data-portal-public
 ```
 
-## CryoET Workflow Overview
-
-
-```{image} https://github.com/chanzuckerberg/cryoet-data-portal/assets/100323416/dc425098-d949-479f-b2f2-325f1c944784
-:alt: CZII Graphic Github
-:align: center
-```
-
-Electron Tomography workflow and the data we provide.
-
-**A.** Sample is rotated to different tilt angles and electrons pass through to produce projection images of the 3D volume
-
-**B.** We provide raw movie frames collected by a direct detector and may also provide these stacked into a tilt series of images
-
-**C.** A 3D tomographic reconstructed volume is produced by back projecting projections which are first corrected in a variety of ways (motion correction, CTF estimation, etc.)
-
-**D.** We provide the 3D volume together with any available point annotations or semantic segmentations of macromolecular complexes for each volume
+Refer to [this how-to guide](download-data) for information on downloading data from our AWS S3 bucket.
 
 ## Citing the CryoET Data Portal
 

diff --git a/docs/cryoet_data_portal_docsite_napari.md b/docs/cryoet_data_portal_docsite_napari.md
@@ -1,7 +1,4 @@
----
-hide-navigation: true
----
-
+(using-napari)=
 # Using napari
 
 [napari](https://napari.org) is a general purpose interactive image viewer for Python

diff --git a/docs/cryoet_data_portal_docsite_quick_start.md b/docs/cryoet_data_portal_docsite_quick_start.md
@@ -2,6 +2,7 @@
 hide-navigation: true
 ---
 
+(quick-start)=
 # Quick start
 
 This page provides details to help you get started using the CryoET Data Portal Client API.