Merge pull request #64 from nf-core/reports

Report updates

.devcontainer/devcontainer.json

@@ -18,11 +18,11 @@
                 "python.linting.flake8Path": "/opt/conda/bin/flake8",
                 "python.linting.pycodestylePath": "/opt/conda/bin/pycodestyle",
                 "python.linting.pydocstylePath": "/opt/conda/bin/pydocstyle",
-                "python.linting.pylintPath": "/opt/conda/bin/pylint"
+                "python.linting.pylintPath": "/opt/conda/bin/pylint",
             },
 
             // Add the IDs of extensions you want installed when the container is created.
-            "extensions": ["ms-python.python", "ms-python.vscode-pylance", "nf-core.nf-core-extensionpack"]
-        }
-    }
+            "extensions": ["ms-python.python", "ms-python.vscode-pylance", "nf-core.nf-core-extensionpack"],
+        },
+    },
 }

.prettierignore

@@ -12,3 +12,4 @@ testing*
 bin/
 test-datasets/
 .nf-test/
+*.scss

CHANGELOG.md

@@ -18,6 +18,7 @@ compatible with further downstream analyses and/or exploration in _e.g._
 
 ### `Added`
 
+- Add a custom nf-core Quarto template for the downstream analysis reports [[#64](https://github.com/nf-core/spatialtranscriptomics/pull/64)]
 - Allow input directories `fastq_dir` and `spaceranger_dir` to be specified as tar archives (`.tar.gz`)
 - Add a check to make sure that there are spots left after filtering [[#46](https://github.com/nf-core/spatialtranscriptomics/issues/46)]
 - Implement tests with nf-test [[#42](https://github.com/nf-core/spatialtranscriptomics/pull/42)]

assets/_extensions/nf-core/_extension.yml

@@ -0,0 +1,21 @@
+title: nf-core Quarto Extension
+author: Erik Fasterius
+version: 1.0.0
+quarto-required: ">=1.2.0"
+contributes:
+  formats:
+    html:
+      code-fold: true
+      df-print: paged
+      embed-resources: true
+      highlight-style: nf-core.theme
+      smooth-scroll: true
+      theme: [default, nf-core.scss]
+      toc-location: left
+      toc: true
+    revealjs:
+      code-line-numbers: false
+      embed-resources: true
+      slide-level: 2
+      slide-number: false
+      theme: [default, nf-core.scss]

assets/_extensions/nf-core/nf-core.scss

@@ -0,0 +1,194 @@
+/*-- scss:defaults --*/
+
+$theme: "nf-core" !default;
+
+// Colours
+$green: #24B064 !default;
+$blue:  #3073AF !default;
+$red:   #E0191A !default;
+$yellow: #DABC25 !default;
+
+// Greyscale
+$white:    #FFFFFF !default;
+$grey-100: #F5F5F5 !default;
+$grey-90:  #E5E5E5 !default;
+$grey-80:  #CCCCCC !default;
+$grey-70:  #B2B2B2 !default;
+$grey-60:  #999999 !default;
+$grey-50:  #7F7F7F !default;
+$grey-40:  #666666 !default;
+$grey-30:  #4C4C4C !default;
+$grey-20:  #333333 !default;
+$grey-10:  #191919 !default;
+$black:    #000000 !default;
+
+// Theme
+$primary:   $green !default;
+$secondary: $blue !default;
+$tertiary:  $red !default;
+$light:     $grey-100 !default;
+$dark:      $grey-30 !default;
+$success:   $green !default;
+$info:      $blue !default;
+$warning:   $yellow !default;
+$danger:    $red !default;
+
+// Code
+$code-color:    $primary !default;
+$code-bg:       $light !default;
+$code-block-bg: $light !default;
+
+// Links
+$link-color: $primary !default;
+
+// Popover
+$popover: $light !default;
+
+// Dropdowns
+$dropdown-link-color:       $grey-30 !default;
+$dropdown-link-hover-color: $white !default;
+$dropdown-link-hover-bg:    $primary !default;
+
+// Font
+@import "https://fonts.googleapis.com/css2?family=Maven+Pro:wght@300;400;500;600";
+$font-family-sans-serif: "Maven Pro";
+
+// Font size for headers
+$h1-font-size: 1.75rem !default;
+$h2-font-size: 1.50rem !default;
+$h3-font-size: 1.25rem !default;
+
+// Font size base for reveal.js presentations
+$presentation-font-size-root: 35px !default;
+
+// Tables
+$table-bg-scale: 0 !default;
+
+// Navs
+$nav-link-padding-y:      .5rem !default !default;
+$nav-link-padding-x:      2rem !default;
+$nav-link-disabled-color: $grey-40 !default !default;
+$nav-tabs-border-color:   $grey-80 !default;
+
+// Navbar
+$navbar-padding-y:               1rem !default;
+$navbar-light-bg:                $primary !default;
+$navbar-light-color:             $white !default;
+$navbar-light-hover-color:       $success !default;
+$navbar-light-active-color:      $success !default;
+$navbar-light-brand-color:       $white !default;
+$navbar-light-brand-hover-color: $navbar-light-brand-color !default;
+$navbar-dark-color:              $white !default;
+$navbar-dark-hover-color:        $primary !default;
+$navbar-dark-active-color:       $primary !default;
+$navbar-dark-brand-color:        $white !default;
+$navbar-dark-brand-hover-color:  $navbar-dark-brand-color !default;
+
+// Pagination
+$pagination-color:                 $white !default;
+$pagination-bg:                    $success !default;
+$pagination-border-width:          0 !default;
+$pagination-border-color:          transparent !default;
+$pagination-hover-color:           $white !default;
+$pagination-hover-bg:              darken($success, 15%) !default;
+$pagination-hover-border-color:    transparent !default;
+$pagination-active-bg:             $pagination-hover-bg !default;
+$pagination-active-border-color:   transparent !default;
+$pagination-disabled-color:        $grey-80 !default;
+$pagination-disabled-bg:           lighten($success, 15%) !default;
+$pagination-disabled-border-color: transparent !default;
+
+// List group
+$list-group-hover-bg:    $grey-80 !default;
+$list-group-disabled-bg: $grey-80 !default;
+
+// Close
+$btn-close-color:         $white !default;
+$btn-close-opacity:       .4 !default;
+$btn-close-hover-opacity: 1 !default;
+
+/*-- scss:rules --*/
+
+// Variables
+$web-font-path: "https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;1,400&display=swap" !default;
+@if $web-font-path {
+    @import url($web-font-path);
+}
+
+// Navbar
+.bg-primary {
+    .navbar-nav .show > .nav-link,
+    .navbar-nav .nav-link.active,
+    .navbar-nav .nav-link:hover,
+    .navbar-nav .nav-link:focus {
+        color: $success !important;
+    }
+}
+
+// Navs
+.nav-tabs {
+    .nav-link.active,
+    .nav-link.active:focus,
+    .nav-link.active:hover,
+    .nav-item.open .nav-link,
+    .nav-item.open .nav-link:focus,
+    .nav-item.open .nav-link:hover {
+        color: $primary;
+    }
+}
+
+// Pagination
+.pagination {
+    a:hover {
+        text-decoration: none;
+    }
+}
+
+// Blockquotes
+.blockquote {
+    color: $primary;
+    border-left-color: $primary;
+}
+
+// Cell Output
+.cell-output-error > pre > code {
+    color: $red;
+}
+.cell-output-stderr > pre > code {
+    color: $yellow;
+}
+
+// Horizontally center level 1 headers
+.center h1 {
+    text-align: center
+}
+
+// Text justification
+.justify-right {
+    text-align: right
+}
+.justify-center {
+    text-align: center
+}
+
+// Custom colours
+.green {
+    color: $green;
+    font-weight: bold;
+}
+.blue {
+    color: $blue;
+    font-weight: bold;
+}
+.red {
+    color: $red;
+    font-weight: bold;
+}
+.yellow {
+    color: $yellow;
+    font-weight: bold;
+}
+.grey {
+    color: $grey-70;
+    font-weight: bold;
+}