feat: Merge all static information pages into one view (#263)

frontend/src/components/HeaderDefault.vue

@@ -50,16 +50,16 @@ function toggleTheme() {
         </template>
 
         <v-list>
-          <v-list-item id="about" to="/about">
+          <v-list-item id="about" to="/info#about">
             <v-list-item-title> About </v-list-item-title>
           </v-list-item>
-          <v-list-item id="contact" to="/contact">
+          <v-list-item id="contact" to="/info#contact">
             <v-list-item-title> Contact </v-list-item-title>
           </v-list-item>
-          <v-list-item id="privacy" to="/privacy">
+          <v-list-item id="privacy" to="/info#privacy-policy">
             <v-list-item-title> Privacy Policy </v-list-item-title>
           </v-list-item>
-          <v-list-item id="terms" to="/terms">
+          <v-list-item id="terms" to="/info#terms-of-use">
             <v-list-item-title> Terms of Use </v-list-item-title>
           </v-list-item>
         </v-list>

frontend/src/components/HeaderDetailPage.vue

@@ -100,16 +100,16 @@ watch(() => props.searchTerm, updateTerms)
         </template>
 
         <v-list>
-          <v-list-item id="about" to="/about">
+          <v-list-item id="about" to="/info#about">
             <v-list-item-title> About </v-list-item-title>
           </v-list-item>
-          <v-list-item id="contact" to="/contact">
+          <v-list-item id="contact" to="/info#contact">
             <v-list-item-title> Contact </v-list-item-title>
           </v-list-item>
-          <v-list-item id="privacy" to="/privacy">
+          <v-list-item id="privacy" to="/info#privacy-policy">
             <v-list-item-title> Privacy Policy </v-list-item-title>
           </v-list-item>
-          <v-list-item id="terms" to="/terms">
+          <v-list-item id="terms" to="/info#terms-of-use">
             <v-list-item-title> Terms of Use </v-list-item-title>
           </v-list-item>
         </v-list>

frontend/src/components/StaticViews/AboutView.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+type AcknowledgementsType = {
+  [key: string]: {
+    name: string
+    url: string
+    description: string
+    doi?: string
+  }
+}
+
+const Acknowledgements: AcknowledgementsType = {
+  ClinVar: {
+    name: 'ClinVar',
+    url: 'https://www.ncbi.nlm.nih.gov/clinvar/',
+    description:
+      'ClinVar is a freely accessible, public archive ' +
+      'of reports of the relationships among human variations ' +
+      'and phenotypes, with supporting evidence.',
+    doi: 'DOI: 10.1093/nar/gkx1153'
+  },
+  Coral: {
+    name: 'Coral emoji',
+    url: 'https://openmoji.org/library/emoji-1FAB8/',
+    description: 'Coral emoji from OpenMoji',
+    doi: ''
+  }
+}
+</script>
+
+<template>
+  <v-card>
+    <v-card-title>About REEV</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <p>
+        REEV (REEV Explains and Evaluates Variants) is a web-based tool designed to assist
+        clinicians and researchers in the field of rare disease genetics. This tool empowers users
+        by providing comprehensive and aggregated information on genomic variants.
+      </p>
+      <p>
+        Whether you're a medical professional seeking insights into genetic variations or a
+        researcher investigating rare diseases, REEV is here to streamline your workflow. Our
+        platform combines cutting-edge technology with user-friendly interfaces to ensure that you
+        have the resources you need to make informed decisions.
+      </p>
+      <v-card-subtitle>Sequence Variants in REEV</v-card-subtitle>
+      <p>
+        REEV's documentation on ACMG Sequence Variant Criteria provides a comprehensive guide for
+        the automated classification of sequence variants. This process emphasizes transparency for
+        users, ensuring they receive detailed reports of evidence supporting or contradicting each
+        criterion. It is meticulously designed to inform users why certain criteria are applied or
+        omitted in specific cases, such as when one criterion may invalidate others due to the
+        nature of the variant (e.g., BA1 disabling all other benign criteria). In addition, the ACMG
+        Sequence Variant Details section elaborates on the implementation of these classification
+        criteria. This includes a detailed description of the data sources utilized in the
+        classification of sequence variants. These sources form the foundation of the classification
+        process, aiding in the accurate and comprehensive evaluation of sequence variants.
+      </p>
+      <v-card-subtitle>Copy Number Variants in REEV</v-card-subtitle>
+      <p>
+        The ACMG CNV Criteria section in REEV's documentation outlines the implementation of
+        criteria for CNVs (Copy Number Variants), based on guidelines from Riggs et al. (2020).
+        These criteria are critical for understanding and classifying CNVs in the context of genetic
+        analysis and rare disease research. Furthermore, the ACMG CNV Details page provides in-depth
+        information about the assessment criteria for CNVs. This includes an overview of the data
+        used for classification, emphasizing the thorough and detailed approach REEV takes in
+        evaluating CNVs. The data used in this classification process is pivotal for understanding
+        the genetic implications of CNVs and their potential impact on rare genetic disorders.
+      </p>
+      <p>
+        Overall, REEV's approach to both sequence and CNV variants is characterized by a meticulous
+        and transparent methodology. The platform's use of comprehensive data sources and adherence
+        to established criteria ensures that it remains a valuable tool for researchers and
+        clinicians in the field of rare disease genetics.
+      </p>
+      <p>
+        For more detailed information, please visit our
+        <a href="https://reev.readthedocs.io/en/latest/">documentation</a>.
+      </p>
+    </v-card-text>
+    <v-card-title>Acknowledgements:</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <p class="description">
+        <v-list lines="two">
+          <v-list-item v-for="ack in Object.values(Acknowledgements)" :key="ack.name">
+            <v-list-item-title>
+              <a :href="ack.url" target="_blank">{{ ack.name }}</a>
+            </v-list-item-title>
+            <v-list-item-subtitle>{{ ack.description }}</v-list-item-subtitle>
+            <!-- If there is a doi, then display it -->
+            <v-list-item-subtitle v-if="ack.doi">
+              <a :href="'https://doi.org/' + ack.doi" target="_blank">{{ ack.doi }}</a>
+            </v-list-item-subtitle>
+          </v-list-item>
+        </v-list>
+      </p>
+    </v-card-text>
+  </v-card>
+</template>

frontend/src/components/StaticViews/ContactView.vue

@@ -0,0 +1,30 @@
+<template>
+  <v-card>
+    <v-card-title>Contact Us</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <p>
+        We'd love to hear from you! Feel free to reach out to us through any of the following
+        channels:
+      </p>
+      <div class="contact-links mt-4">
+        <v-btn href="https://github.com/bihealth/reev/discussions" target="_blank" class="button">
+          <v-icon left> mdi-github </v-icon>
+          GitHub
+        </v-btn>
+        <v-btn href="mailto:[email protected]" class="mt-2">
+          <v-icon left> mdi-email </v-icon>
+          Email
+        </v-btn>
+      </div>
+    </v-card-text>
+  </v-card>
+</template>
+
+<style scoped>
+.contact-links {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+</style>

frontend/src/components/StaticViews/PrivacyView.vue

@@ -0,0 +1,14 @@
+<template>
+  <v-card>
+    <v-card-title>Privacy Policy</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <p>
+        See
+        <a href="https://www.bihealth.org/en/privacy" target="_blank">
+          privacy policy of the Berlin Institute of Health
+        </a>
+      </p>
+    </v-card-text>
+  </v-card>
+</template>

frontend/src/components/StaticViews/TermsView.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-card>
+    <v-card-title>Terms of Use</v-card-title>
+    <v-divider />
+    <v-card-text>
+      <p>REEV is for research use only software</p>
+      <p>
+        The software is provided "as is," without warranty of any kind, express or implied,
+        including but not limited to the warranties of merchantability, fitness for a particular
+        purpose, and noninfringement. In no event shall the authors or copyright holders be liable
+        for any claim, damages, or other liability, whether in an action of contract, tort, or
+        otherwise, arising from, out of, or in connection with the software or the use or other
+        dealings in the software.
+      </p>
+    </v-card-text>
+  </v-card>
+</template>

frontend/src/components/__tests__/StaticViews/AboutView.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+
+import AboutView from '@/components/StaticViews/AboutView.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('AboutView', async () => {
+  it('renders the main content', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: AboutView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
+
+    expect(wrapper.html()).toMatch('REEV Explains and Evaluates Variants')
+    // Acknowledgements
+    expect(wrapper.html()).toMatch('ClinVar is a freely accessible, public archive')
+    expect(wrapper.html()).toMatch('Coral emoji from OpenMoji')
+  })
+})

frontend/src/views/__tests__/ContactView.spec.ts → frontend/src/components/__tests__/StaticViews/ContactView.spec.ts

@@ -1,29 +1,9 @@
 import { describe, expect, it } from 'vitest'
-import { VMenu } from 'vuetify/components'
 
+import ContactView from '@/components/StaticViews/ContactView.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
 
-import ContactView from '../ContactView.vue'
-
 describe.concurrent('ContactView', async () => {
-  it('renders the header', async () => {
-    const { wrapper } = await setupMountedComponents(
-      { component: ContactView, template: true },
-      {
-        initialStoreState: {
-          misc: {
-            appVersion: 'v0.0.0'
-          }
-        }
-      }
-    )
-
-    const logo = wrapper.find('#logo')
-    const menu = wrapper.findComponent(VMenu)
-    expect(logo.exists()).toBe(true)
-    expect(menu.exists()).toBe(true)
-  })
-
   it('renders the main content', async () => {
     const { wrapper } = await setupMountedComponents(
       { component: ContactView, template: true },
@@ -36,11 +16,9 @@ describe.concurrent('ContactView', async () => {
       }
     )
 
-    const mainContent = wrapper.find('.contact-view')
     const githubLink = wrapper.find('.mdi-github')
     const emailLink = wrapper.find('.mdi-email')
-    expect(mainContent.exists()).toBe(true)
-    expect(mainContent.html()).toMatch(
+    expect(wrapper.html()).toMatch(
       'Feel free to reach out to us through any of the following channels:'
     )
     expect(githubLink.exists()).toBe(true)

frontend/src/views/__tests__/PrivacyView.spec.ts → frontend/src/components/__tests__/StaticViews/PrivacyView.spec.ts

@@ -1,26 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
-import HeaderDefault from '@/components/HeaderDefault.vue'
+import PrivacyView from '@/components/StaticViews/PrivacyView.vue'
 import { setupMountedComponents } from '@/lib/test-utils'
-import PrivacyView from '@/views/PrivacyView.vue'
 
 describe.concurrent('PrivacyView', async () => {
-  it('renders the header', async () => {
-    const { wrapper } = await setupMountedComponents(
-      { component: PrivacyView, template: true },
-      {
-        initialStoreState: {
-          misc: {
-            appVersion: 'v0.0.0'
-          }
-        }
-      }
-    )
-
-    const header = wrapper.findComponent(HeaderDefault)
-    expect(header.exists()).toBe(true)
-  })
-
   it('renders the privacy policy link', async () => {
     const { wrapper } = await setupMountedComponents(
       { component: PrivacyView, template: true },
@@ -50,8 +33,7 @@ describe.concurrent('PrivacyView', async () => {
       }
     )
 
-    const mainContent = wrapper.find('.privacy-view')
-    expect(mainContent.exists()).toBe(true)
-    expect(mainContent.text()).toMatch('Privacy Policy')
+    expect(wrapper.exists()).toBe(true)
+    expect(wrapper.text()).toMatch('Privacy Policy')
   })
 })

frontend/src/components/__tests__/StaticViews/TermsView.spec.ts

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest'
+
+import TermsView from '@/components/StaticViews/TermsView.vue'
+import { setupMountedComponents } from '@/lib/test-utils'
+
+describe.concurrent('TermsView', async () => {
+  it('renders the terms of use content', async () => {
+    const { wrapper } = await setupMountedComponents(
+      { component: TermsView, template: true },
+      {
+        initialStoreState: {
+          misc: {
+            appVersion: 'v0.0.0'
+          }
+        }
+      }
+    )
+
+    expect(wrapper.text()).toContain('REEV is for research use only software')
+    expect(wrapper.text()).toContain(
+      'The software is provided "as is," without warranty of any kind'
+    )
+  })
+})

frontend/src/router/index.ts

@@ -3,18 +3,15 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import ACMGCriteriaDocs from '@/views/ACMGCriteriaDocs.vue'
 import ACMGSVDocs from '@/views/ACMGSVDocs.vue'
-import AboutView from '@/views/AboutView.vue'
-import ContactView from '@/views/ContactView.vue'
 import GeneDetailView from '@/views/GeneDetailView.vue'
 import GenesListView from '@/views/GenesListView.vue'
 import HomeView from '@/views/HomeView.vue'
 import LoginView from '@/views/LoginView.vue'
 import PathNotFound from '@/views/PathNotFound.vue'
-import PrivacyView from '@/views/PrivacyView.vue'
 import ProfileView from '@/views/ProfileView.vue'
 import SeqvarDetailsView from '@/views/SeqvarDetailsView.vue'
+import StaticView from '@/views/StaticView.vue'
 import StrucvarDetailsView from '@/views/StrucvarDetailsView.vue'
-import TermsView from '@/views/TermsView.vue'
 import VerifyEmailView from '@/views/VerifyEmailView.vue'
 
 const routes = [
@@ -23,26 +20,11 @@ const routes = [
     name: 'home',
     component: HomeView
   },
-  {
-    path: '/about',
-    name: 'about',
-    component: AboutView
-  },
   {
     path: '/login',
     name: 'login',
     component: LoginView
   },
-  {
-    path: '/privacy',
-    name: 'privacy',
-    component: PrivacyView
-  },
-  {
-    path: '/terms',
-    name: 'terms',
-    component: TermsView
-  },
   {
     path: '/profile',
     name: 'profile',
@@ -54,9 +36,9 @@ const routes = [
     component: VerifyEmailView
   },
   {
-    path: '/contact',
-    name: 'contact',
-    component: ContactView
+    path: '/info',
+    name: 'static-info',
+    component: StaticView
   },
   {
     path: '/gene/:searchTerm/:genomeRelease',