add interactive VitePress homepage (#53)

* update README

* update description and authors

* update `configure-dms-viz`

* re-run pipeline

* add interative VitePress homepage

.github/workflows/deploy.yaml

@@ -0,0 +1,35 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Deploy VitePress site to Pages
+
+on:
+  push:
+    branches: ["main"]
+  pull_request:
+    branches: ["main"]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: "npm"
+      - run: npm ci
+      - run: npm run docs:build
+      - name: Deploy
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main'
+        uses: peaceiris/actions-gh-pages@v4
+        with:
+          # Change to your GitHub Pages repository
+          github_token: ${{ secrets.GITHUB_TOKEN }}
+          publish_dir: homepage/.vitepress/dist

.gitignore

@@ -89,3 +89,10 @@ results/dms-viz/*
 !results/escape_logos
 results/escape_logos/*
 !results/escape_logos/*.svg
+
+!.github
+node_modules/
+!homepage/.vitepress/
+homepage/.vitepress/cache/
+homepage/.vitepress/dist/
+!homepage/public/

README.md

@@ -1,14 +1,12 @@
 # Deep mutational scanning of the Rabies glycoprotein (G) Pasteur Strain using a barcoded pseudotyped lentiviral platform
-Study by Arjun Aditham and Jesse Bloom.
-
+Study by Arjun Aditham, Caelan Radford, Caleb Carr, and Jesse Bloom.
 
 This repo contains data and analyses from deep mutational scanning experiments on the Rabies glycoprotein (G). All experiments were performed on the Pasteur strain of rabies [NC_001542.1](https://www.ncbi.nlm.nih.gov/nuccore/NC_001542.1). 
 
+The deep mutational scan only consists of the ectodomain of Rabies G and few sites flanking the ectodomain.
+Consistent with the rabies literature, the sites are numbering using the scheme were 1 is assigned to the first site of the ectodomain, not the first site of the protein itself.
 
-The deep mutational scan only consists of the ectodomain of Rabies G and few sites flanking the ectodomain (positions 18-450). Site 403 is poorly represented. Stop codons were incorporated at alternating positions for sites 18-56 (~20 stop codons). 
-
-
-For analysis and documentation, navigate to [https://dms-vep.org/RABV_Pasteur_G_DMS/](https://dms-vep.org/RABV_Pasteur_G_DMS/). 
+For user-friendly links to interactive visualization of the data and key numerical results, see [https://dms-vep.org/RABV_Pasteur_G_DMS/](https://dms-vep.org/RABV_Pasteur_G_DMS/). 
 
 ## Organization of this repo
 
@@ -38,10 +36,10 @@ Input data utilized by the pipeline are located in [./data/](data).
 The results of running the pipeline are placed in [./results/](results).
 Due to space, only some results are tracked. For those that are not, see the [.gitignore](.gitignore) document.
 
-The pipeline builds HTML documentation for the pipeline in [./docs/](docs). These docs are rendered for viewing at [https://dms-vep.org/RABV_Pasteur_G_DMS/](https://dms-vep.org/RABV_Pasteur_G_DMS/) as stated above.
+The pipeline builds HTML documentation for the pipeline in [./docs/](docs), and a nicely formatted set is put in [./homepage/](homepage). These docs are rendered for viewing at [https://dms-vep.org/RABV_Pasteur_G_DMS/](https://dms-vep.org/RABV_Pasteur_G_DMS/) as stated above.
 
 ### Non-pipeline analyses
-All other non-pipeline analyses are contained in [./scratch_notebook/](scratch_notebook). The notebooks in this directory are not part of the main pipeline but have been used to generate files used as input for the pipeline.
+Additional analyses run outside the core pipeline are in [./non-pipeline_analyses/](non-pipeline_analyses), and are described by README files within that subdirectory.
 
 ## Running the pipeline
 To run the pipeline, build the conda environment `dms-vep-pipeline-3` in the `environment.yml` file of [dms-vep-pipeline-3](https://github.com/dms-vep/dms-vep-pipeline-3), activate it, and run [snakemake](https://snakemake.readthedocs.io/), such as:
@@ -52,6 +50,3 @@ To run the pipeline, build the conda environment `dms-vep-pipeline-3` in the `en
 To run on the Hutch cluster via [slurm](https://slurm.schedmd.com/), you can run the file [run_Hutch_cluster.bash](run_Hutch_cluster.bash):
 
     sbatch -c 32 run_Hutch_cluster.bash
-
-
-

config.yaml

@@ -11,7 +11,13 @@ pipeline_path: dms-vep-pipeline-3  # typically will be `dms-vep-pipeline` for re
 docs: docs  # typically will be `docs` for real pipelines
 
 # ----------------------------------------------------------------------------
-# Details on repo, used ßfor docs. Change this to details for your project.
+# Build VitePress homepage
+# ----------------------------------------------------------------------------
+homepage: homepage/public
+build_vitepress_homepage: true
+
+# ----------------------------------------------------------------------------
+# Details on repo, used for docs. Change this to details for your project.
 # ----------------------------------------------------------------------------
 
 # Name of your main GitHub repo, eg https://github.com/<my_organization>/<my_repo>
@@ -21,10 +27,9 @@ github_repo_url: https://github.com/dms-vep/RABV_Pasteur_G_DMS
 # and should not be needed for other pipelines.
 github_blob_url: https://github.com/dms-vep/RABV_Pasteur_G_DMS/blob/main
 # Some descriptions and metadata about the analysis.
-description: Deep mutational scanning using Rabies glycoprotein (strain Pasteur). Analysis uses dms-vep-pipeline-3
+description: Deep mutational scanning of rabies G (Pasteur strain)
 year: 2024
-authors: Arjun Aditham and Jesse Bloom
-
+authors: Arjun Aditham, Caelan Radford, Caleb Carr, and Jesse Bloom
 
 # ----------------------------------------------------------------------------
 # Site numbering, mutation classification, and neut standards

docs/index.html

@@ -1,5 +1,5 @@
-<h1 id="deep-mutational-scanning-using-rabies-glycoprotein-strain-pasteur-analysis-uses-dms-vep-pipeline-3">Deep mutational scanning using Rabies glycoprotein (strain Pasteur). Analysis uses dms-vep-pipeline-3</h1>
-<p>Analysis by Arjun Aditham and Jesse Bloom (2024)</p>
+<h1 id="deep-mutational-scanning-of-rabies-g-pasteur-strain">Deep mutational scanning of rabies G (Pasteur strain)</h1>
+<p>Analysis by Arjun Aditham, Caelan Radford, Caleb Carr, and Jesse Bloom (2024)</p>
 <p>See <a href="https://github.com/dms-vep/RABV_Pasteur_G_DMS">https://github.com/dms-vep/RABV_Pasteur_G_DMS</a> for full code.</p>
 <div class="toc"><span class="toctitle">Contents</span><ul>
 <li><a href="#barcode-to-codon-variant-lookup-table">Barcode to codon-variant lookup table</a></li>

envs/dms-viz.yml

@@ -14,4 +14,4 @@ dependencies:
   - python=3.11
   - seaborn=0.13
   - pip:
-      - configure-dms-viz==1.5.0
+      - configure-dms-viz==1.6.0

homepage/.vitepress/config.mjs

@@ -0,0 +1,22 @@
+import { defineConfig } from "vitepress";
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+  lang: "en-US",
+  title: "Deep mutational scanning of rabies G (Pasteur strain)",
+  description:
+    "Pseudovirus deep mutational scanning to measure how rabies G mutations affect cell entry and escape from a panel of monoclonal antibodies",
+  base: "/RABV_Pasteur_G_DMS/",
+  appearance: false,
+  themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+    nav: [
+      { text: "Home", link: "/" },
+      { text: "Appendix", link: "/appendix", target: "_self" },
+    ],
+    socialLinks: [{ icon: "github", link: "https://github.com/dms-vep/RABV_Pasteur_G_DMS" }],
+    footer: {
+      message: 'Study by Arjun Aditham, Caelan Radford, Caleb, Carr, & <a href="https://jbloomlab.org">Jesse Bloom</a>',
+    },
+  },
+});

homepage/.vitepress/theme/Altair.vue

@@ -0,0 +1,177 @@
+<script>
+import * as vega from 'vega';
+import * as vegaLite from 'vega-lite';
+import vegaEmbed from 'vega-embed';
+import { parseVegaSpecFromHTML } from './parseVegaSpec';
+
+export default {
+    name: 'VegaChart',
+
+    props: {
+        specUrl: {
+            type: String,
+            required: true,
+        },
+        showShadow: {
+            type: Boolean,
+            default: true,
+        }
+    },
+
+    data() {
+        return {
+            isExpanded: false,
+        };
+    },
+
+    async mounted() {
+        await this.loadChart(this.specUrl);
+    },
+
+    methods: {
+        // Parse and load the chart from the URL
+        async loadChart(url) {
+            try {
+                let spec;
+                // Determine if the URL is local or remote
+                if (!url.startsWith('http://') && !url.startsWith('https://')) {
+                    const htmlContent = await this.fetchLocalFile(url);
+                    spec = await parseVegaSpecFromHTML(htmlContent);
+                } else {
+
+                    // Get the path to check the file format
+                    const urlObj = new URL(url);
+                    const path = urlObj.pathname;
+                    // Get the response from the URL
+                    const response = await fetch(url);
+
+                    // Check if URL ends with '.html'
+                    if (path.endsWith('.html')) {
+                        const htmlContent = await response.text();
+                        spec = await parseVegaSpecFromHTML(htmlContent);
+                    }
+                    // Check if URL ends with '.json'
+                    else if (path.endsWith('.json')) {
+                        spec = await response.json();
+                    }
+                    else {
+                        console.error('Unsupported file format');
+                        return;
+                    }
+                }
+                this.renderChart(spec);
+            } catch (error) {
+                console.error('Error loading Vega spec:', error);
+            }
+        },
+        // Fetch the text from local files
+        async fetchLocalFile(filePath) {
+            const response = await fetch(filePath);
+            if (!response.ok) throw new Error('Failed to fetch local file');
+            console.log('response.text()', response);
+            return await response.text();
+        },
+        // Render the chart using VegaEmbed
+        renderChart(spec) {
+            vegaEmbed(this.$refs.vegaContainer, spec, {
+                renderer: 'canvas',
+                vega,
+                vegaLite,
+                actions: false,
+            }).then((result) => {
+                console.log('Chart rendered successfully');
+            }).catch(console.error);
+        },
+        // Toggle the expanded view
+        toggleExpand() {
+            this.isExpanded = !this.isExpanded;
+        },
+    },
+};
+</script>
+
+<template>
+    <div class="vega-chart-container" :class="{ 'expanded': isExpanded, 'no-box-shadow': !showShadow }">
+        <div ref="vegaContainer">
+        </div>
+        <button @click="toggleExpand" @keydown.esc="isExpanded = false" class="expand-btn">
+            <i v-if="isExpanded" class="bi bi-arrows-angle-contract"></i>
+            <i v-else class="bi bi-arrows-angle-expand"></i>
+        </button>
+    </div>
+</template>
+
+<style>
+.vega-chart-container {
+    width: 100%;
+    height: auto;
+    overflow: auto;
+    padding: 20px;
+    position: relative;
+    background-color: white;
+    line-height: 0%;
+}
+
+.vega-chart-container:not(.no-box-shadow) {
+    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.5);
+}
+
+.expanded {
+    width: 100vw;
+    height: 100vh;
+    position: fixed !important;
+    top: 0;
+    left: 0;
+    z-index: 100;
+    padding: 1%;
+}
+
+.expand-btn {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    outline: none !important;
+    width: 30px;
+    height: 30px;
+    border-radius: 5px;
+    border: 1px solid #aaa;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.bi {
+    font-size: 20px;
+}
+
+/* Form container */
+.vega-bindings {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    padding: 10px;
+}
+
+.vega-bind-name {
+    flex-basis: 20%;
+    text-align: left;
+    font-weight: bold;
+    margin-right: 5px;
+}
+
+.vega-bindings select {
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: #fff;
+    text-align: center;
+}
+
+.vega-bindings input[type="select"] option {
+    text-align: center;
+    font-size: 14px;
+}
+
+.vega-bindings input[type="radio"] {
+    margin: 5px 5px 0px 10px;
+}
+</style>

homepage/.vitepress/theme/Figure.vue

@@ -0,0 +1,31 @@
+<script>
+export default {
+    props: {
+        imageSrc: {
+            type: String,
+            default: ''
+        },
+        caption: {
+            type: String,
+            required: true
+        }
+    },
+};
+</script>
+
+<template>
+    <figure>
+        <img v-if="imageSrc" :src="imageSrc" :alt="caption" />
+        <slot v-else></slot>
+        <figcaption>{{ caption }}</figcaption>
+    </figure>
+</template>
+
+<style scoped>
+figcaption {
+    color: grey;
+    padding-top: 0.5em;
+    font-size: 0.8em;
+    text-align: center;
+}
+</style>

homepage/.vitepress/theme/index.js

@@ -0,0 +1,19 @@
+import { h } from "vue";
+import DefaultTheme from "vitepress/theme";
+import Altair from "./Altair.vue";
+import Figure from "./Figure.vue";
+import "bootstrap-icons/font/bootstrap-icons.css";
+import "./style.css";
+
+export default {
+  extends: DefaultTheme,
+  Layout: () => {
+    return h(DefaultTheme.Layout, null, {
+
+    });
+  },
+  enhanceApp({ app, router, siteData }) {
+    app.component("Altair", Altair);
+    app.component("Figure", Figure);
+  },
+};