[Frontend] Create a new discussion component to be displayed in an Analysis view

.github/workflows/system-tests.yml

@@ -16,7 +16,7 @@ jobs:
       uses: cypress-io/github-action@v5
       with:
         working-directory: system-tests
-        browser: chrome
+        browser: electron
         headed: false
         start: docker compose up --build -d
         wait-on: 'http://local.rosalution.cgds'

frontend/src/components/AnalysisView/DiscussionSection.vue

@@ -0,0 +1,55 @@
+<template>
+    <div class="rosalution-section-container">
+        <input type="checkbox" id="discussion_toggle" />
+        <div class="rosalution-section-header">
+            <h2 class="rosalution-section-header-text">Discussion</h2>
+            <span class="rosalution-section-center" data-test="header-datasets"/>
+            <button class="primary-button new-discussion-button">New Discussion</button>
+            <label class="collapsable-icon" for="discussion_toggle">
+                <font-awesome-icon icon="chevron-down" size="lg"/>
+            </label>
+        </div>
+        <div class="rosalution-section-seperator"></div>
+        <div class="section-content">
+            Content
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  name: 'discussion-section',
+  props: {
+    header: {
+      type: String,
+    },
+  },
+};
+
+</script>
+
+<style scoped>
+
+.new-discussion-button {
+    margin-bottom: var(--p-8);
+    margin-right: var(--p-8);
+}
+
+.collapsable-icon {
+    color: var(--rosalution-grey-200);
+    cursor: pointer;
+}
+
+input[type="checkbox"] {
+    display: none;
+}
+
+.rosalution-section-container input[type="checkbox"]:checked ~ .section-content {
+    display: none;
+}
+
+input[type="checkbox"]:checked ~ .rosalution-section-header > span ~ label.collapsable-icon {
+    transform: scaleY(-1);
+}
+
+</style>

frontend/src/models/analyses.js

@@ -22,6 +22,21 @@ export default {
     const baseUrl = '/rosalution/api/';
     const urlQuery = 'analysis/' + analysisName;
     const body = await Requests.get(baseUrl + urlQuery);
+
+    body['discussions'] = [{
+      'postId': '',
+      'client_id': '',
+      'datetimestamp': '',
+      'content': [],
+      'attachments': [],
+      'replies': [{
+        'client_id': '',
+        'datetimestamp': '',
+        'content': '',
+        'attachments': [],
+      }],
+    }];
+
     return body;
   },
 

frontend/src/styles/main.css

@@ -51,6 +51,7 @@ html {
   --p-8: 0.5rem;
   --p-10: 0.625rem;
   --p-16: 1rem;
+  --p-28: 1.75rem;
 
   scroll-padding-top: 4rem;
 

frontend/src/styles/rosalution.css

@@ -15,8 +15,10 @@ html {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 700;
   font-size: 1.125rem;
-  height: 1.75rem;
-  width: 7rem;
+  padding-top: var(--p-10);
+  padding-bottom: var(--p-10);
+  padding-left: var(--p-28);
+  padding-right: var(--p-28);
   border: none;
   border-radius: var(--content-border-radius);
   cursor: pointer;
@@ -27,8 +29,10 @@ html {
   color: var(--rosalution-purple-300);
   font-weight: 700;
   font-size: 1.125rem;
-  height: 1.75rem;
-  width: 7rem;
+  padding-top: var(--p-10);
+  padding-bottom: var(--p-10);
+  padding-left: var(--p-28);
+  padding-right: var(--p-28);
   border: none;
   border-radius: var(--button-border-radius);
   cursor: pointer;
@@ -49,8 +53,10 @@ html {
   font-family: "Proxima Nova", sans-serif;
   font-weight: 700;
   font-size: 1.125rem;
-  height: 1.75rem;
-  width: 7rem;
+  padding-top: var(--p-10);
+  padding-bottom: var(--p-10);
+  padding-left: var(--p-28);
+  padding-right: var(--p-28);
   border-color: var(--rosalution-black);
   border-radius: var(--button-border-radius);
   border-style: solid;
@@ -107,7 +113,7 @@ html {
 
 .rosalution-section-header {
   display: flex;
-  align-items: flex-end;
+  align-items: center;
 }
 
 .rosalution-header-right-icons {

frontend/src/views/AnalysisView.vue

@@ -37,6 +37,9 @@
         @update-image="this.updateSectionImage"
         @update:content-row="this.onAnalysisContentUpdated"
       />
+      <DiscussionSection
+        id="Discussion"
+      />
       <SupplementalFormList
         id="Supporting_Evidence"
         :attachments="this.attachments"
@@ -68,6 +71,7 @@ import NotificationDialog from '@/components/Dialogs/NotificationDialog.vue';
 import Toast from '@/components/Dialogs/Toast.vue';
 import SupplementalFormList from '@/components/AnalysisView/SupplementalFormList.vue';
 import SaveModal from '@/components/AnalysisView/SaveModal.vue';
+import DiscussionSection from '../components/AnalysisView/DiscussionSection.vue';
 
 import inputDialog from '@/inputDialog.js';
 import notificationDialog from '@/notificationDialog.js';
@@ -87,6 +91,7 @@ export default {
     Toast,
     SupplementalFormList,
     SaveModal,
+    DiscussionSection,
   },
   props: ['analysis_name'],
   data: function() {
@@ -105,6 +110,7 @@ export default {
       const sections = this.analysis.sections.map((section) => {
         return section.header;
       });
+      sections.push('Discussion');
       sections.push('Supporting Evidence');
       return sections;
     },

frontend/test/components/AnalysisView/DiscussionSection.spec.js

@@ -0,0 +1,23 @@
+import {it, expect, describe, beforeEach} from 'vitest';
+import {shallowMount} from '@vue/test-utils';
+
+import DiscussionSection from '../../../src/components/AnalysisView/DiscussionSection.vue';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
+
+describe('DiscussionSection.vue', () => {
+  let wrapper;
+
+  beforeEach(() => {
+    wrapper = shallowMount(DiscussionSection, {
+      global: {
+        components: {
+          'font-awesome-icon': FontAwesomeIcon,
+        },
+      },
+    });
+  });
+
+  it('Vue instance exists and it is an object', () => {
+    expect(typeof wrapper).toBe('object');
+  });
+});

frontend/test/views/AnalysisView.spec.js

@@ -143,7 +143,7 @@ describe('AnalysisView', () => {
     it('provides the expected headings of sections to be used as anchors', () => {
       const headerComponent = wrapper.get('[data-test="analysis-view-header"]');
       expect(headerComponent.attributes('sectionanchors')).to.equal(
-          'Brief,Medical Summary,Pedigree,Case Information,Supporting Evidence',
+          'Brief,Medical Summary,Pedigree,Case Information,Discussion,Supporting Evidence',
       );
     });
 

paper.md

@@ -47,15 +47,15 @@ authors:
       affiliation: "1,2,3"
 
 affiliations:
-    - name: Center for Computational Genomics and Data Sciences, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, AL
+    - name: Center for Computational Genomics and Data Sciences, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, Alabama, United States of America
       index: 1
-    - name: Department of Genetics, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, AL
+    - name: Department of Genetics, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, Alabama, United States of America
       index: 2
-    - name: Department of Pediatrics, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, AL
+    - name: Department of Pediatrics, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, Alabama, United States of America
       index: 3
-    - name: Hugh Kaul Precision Medicine Institute, Heersink School of Medicine, The University of Alabama at Birmingham
+    - name: Hugh Kaul Precision Medicine Institute, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, Alabama, United States of America
       index: 4
-    - name: Department of Cell, Developmental and Integrative Biology, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, AL
+    - name: Department of Cell, Developmental and Integrative Biology, Heersink School of Medicine, The University of Alabama at Birmingham, Birmingham, Alabama, United States of America
       index: 5
 
 

system-tests/e2e/rosalution_analysis.cy.js

@@ -8,11 +8,11 @@ describe('As a Clinical Analyst using Rosalution for analysis', () => {
         .find('.case-name').click();
   });
 
-  it.skip('should allow the user to navigate the analysis via the logo, header, and section anchor links', () => {
+  it('should allow the user to navigate the analysis via the logo, header, and section anchor links', () => {
 
     const anchorLinks = [
       'Brief', 'Clinical History', 'Pedigree', 'Supporting Evidence', 'VMA21_Gene%20To%20Phenotype',
-      'VMA21_Molecular%20Mechanism', 'VMA21_Function', 'Model_Goals',
+      'VMA21_Molecular%20Mechanism', 'VMA21_Function', 'Model_Goals', 'Discussion'
     ];
     const expectedHeaderLinks =
       ['CPAM0002', 'LOGIN', ...anchorLinks];