Skip to content

Commit

Permalink
[Frontend] Create a new discussion component to be displayed in an An…
Browse files Browse the repository at this point in the history
…alysis view (#139)

* Updating the paper to include the country for each affiliation which is required for publication.

* Updated the system tests workflow to use electron (#140)

* Added a DiscussionsSection.vue in AnalysisView components, updated the analysis model to return an injected discussion object, and updating the styling of the buttons to match figma more closely

* The discussion collapse works

* Looks ready for a pull request

* Tests should be working now

* Left out the node test

* Updating CSS in a few places

* Updating the DiscussionSection values

---------

Co-authored-by: Angelina Uno-Antonison <ange.unoantonison@gmail.com>
  • Loading branch information
JmScherer and SeriousHorncat authored Sep 26, 2023
1 parent 1d9e35b commit 28e8772
Showing 10 changed files with 122 additions and 16 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/system-tests.yml
Original file line number Diff line number Diff line change
@@ -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'
55 changes: 55 additions & 0 deletions frontend/src/components/AnalysisView/DiscussionSection.vue
Original file line number Diff line number Diff line change
@@ -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>
15 changes: 15 additions & 0 deletions frontend/src/models/analyses.js
Original file line number Diff line number Diff line change
@@ -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;
},

1 change: 1 addition & 0 deletions frontend/src/styles/main.css
Original file line number Diff line number Diff line change
@@ -51,6 +51,7 @@ html {
--p-8: 0.5rem;
--p-10: 0.625rem;
--p-16: 1rem;
--p-28: 1.75rem;

scroll-padding-top: 4rem;

20 changes: 13 additions & 7 deletions frontend/src/styles/rosalution.css
Original file line number Diff line number Diff line change
@@ -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 {
6 changes: 6 additions & 0 deletions frontend/src/views/AnalysisView.vue
Original file line number Diff line number Diff line change
@@ -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;
},
23 changes: 23 additions & 0 deletions frontend/test/components/AnalysisView/DiscussionSection.spec.js
Original file line number Diff line number Diff line change
@@ -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');
});
});
2 changes: 1 addition & 1 deletion frontend/test/views/AnalysisView.spec.js
Original file line number Diff line number Diff line change
@@ -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',
);
});

10 changes: 5 additions & 5 deletions paper.md
Original file line number Diff line number Diff line change
@@ -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


4 changes: 2 additions & 2 deletions system-tests/e2e/rosalution_analysis.cy.js
Original file line number Diff line number Diff line change
@@ -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];

0 comments on commit 28e8772

Please sign in to comment.