Feat/gwas unified flow outcome card (#1201)

* feat(gwasUnifiedFlowOutcomeCard): initial commit

* feat(gwasUnifiedFlowOutcomeCard): Added unit test for CovariatesCard.js

* feat(gwasUnifiedFlowOutcomeCard): Updated test to use ValidInitialState data for outcome and updated CovariatesCardList keys to use covariate obj

* feat(gwasUnifiedFlowOutcomeCard): Cleaned up code formatting for CovariatesCardList.test.jsx

* feat(gwasUnifiedFlowStyleSidebars): Wrote storybook for CovariatesCardsList

* feat(gwasUnifiedFlowStyleSidebars): Changed outcome card title to Outcome Phenotype to match design

* feat(gwasUnifiedFlowOutcomeCard): Changed all instances of InitialValidState to ValidState

* feat(gwasUnifiedFlowOutcomeCard): Updated CovariatesCardList test to use Valid state objs instead of hard coded values; updated ref to Valid state in JobInputModal; Updated ValidState to use correct data

* feat(gwasUnifiedFlowOutcomeCard): Ran ESLINT-new

src/Analysis/GWASV2/Components/Covariates/Covariates.css

@@ -11,13 +11,15 @@
   margin-top: 8px;
 }
 
+.GWASV2 .outcome-card {
+  background: #cae6f1;
+}
+
 .GWASV2 .dichotomous-card {
-  width: 189px;
   background: #ebfad3;
 }
 
 .GWASV2 .continuous-card {
-  width: 189px;
   background: #fde3d6;
 }
 

src/Analysis/GWASV2/Components/Covariates/CovariatesCardList.stories.jsx

@@ -0,0 +1,30 @@
+import React, { useState } from 'react';
+import CovariatesCardsList from './CovariatesCardsList';
+import ValidState from '../../TestData/States/ValidState';
+import './Covariates.css';
+import '../../Steps/SelectCovariates/SelectCovariates.css';
+import '../../GWASV2.css';
+
+export default {
+  title: 'Tests3/GWASV2/CovariatesCardsList',
+  component: CovariatesCardsList,
+};
+
+const Template = (args) => (
+  <div className='GWASV2'>
+    <div className='GWASUI-row'>
+      <div className='GWASUI-double-column'></div>
+      <div className='GWASUI-column GWASUI-card-column'>
+        <CovariatesCardsList
+          {...args}
+          deleteCovariate={(chosenCovariate) =>
+            alert('called deleteCovariate Method')
+          }
+        />
+      </div>
+    </div>
+  </div>
+);
+
+export const SuccessState = Template.bind({});
+SuccessState.args = ValidState;

src/Analysis/GWASV2/Components/Covariates/CovariatesCardList.test.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import { DeleteOutlined } from '@ant-design/icons';
+import CovariatesCardsList from './CovariatesCardsList';
+import ValidState from '../../TestData/States/ValidState';
+
+describe('CovariatesCardsList component', () => {
+  let wrapper;
+  const mockDeleteCovariate = jest.fn();
+
+  const outcomeText = ValidState.outcome.concept_name;
+  const lastCovariateObj = ValidState.covariates.at(-1);
+  const lastContinousCovariateText = lastCovariateObj.concept_name;
+  const dichotomousObj = ValidState.covariates.filter(
+    (obj) => obj.variable_type === 'custom_dichotomous',
+  )[0];
+  const dichotomousText = dichotomousObj.provided_name;
+
+  beforeEach(() => {
+    const mockProps = {
+      outcome: ValidState.outcome,
+      covariates: ValidState.covariates,
+      deleteCovariate: mockDeleteCovariate,
+    };
+    wrapper = mount(<CovariatesCardsList {...mockProps} />);
+  });
+
+  it('should render an outcome card', () => {
+    expect(wrapper.find('.outcome-card').exists()).toBe(true);
+    expect(wrapper.find('.outcome-card .ant-card-meta-title').text()).toBe(
+      'Outcome Phenotype',
+    );
+    expect(
+      wrapper.find('.outcome-card .ant-card-meta-description').text(),
+    ).toBe(outcomeText);
+  });
+
+  it('should render covariate cards', () => {
+    expect(wrapper.find('.dichotomous-card').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.dichotomous-card .ant-card-meta-title')
+        .last()
+        .text(),
+    ).toBe('Dichotomous Covariate');
+    expect(
+      wrapper
+        .find('.dichotomous-card .ant-card-meta-description')
+        .last()
+        .text(),
+    ).toBe(dichotomousText);
+
+    expect(wrapper.find('.continuous-card').exists()).toBe(true);
+    expect(
+      wrapper
+        .find('.continuous-card .ant-card-meta-title')
+        .last()
+        .text(),
+    ).toBe('Continuous Covariate');
+    expect(
+      wrapper
+        .find('.continuous-card .ant-card-meta-description')
+        .last()
+        .text(),
+    ).toBe(lastContinousCovariateText);
+  });
+
+  it('should call deleteCovariate when the delete icon is clicked', () => {
+    wrapper
+      .find(DeleteOutlined)
+      .first()
+      .simulate('click');
+    expect(mockDeleteCovariate).toHaveBeenCalledWith(dichotomousObj);
+    wrapper
+      .find(DeleteOutlined)
+      .last()
+      .simulate('click');
+    expect(mockDeleteCovariate).toHaveBeenCalledWith(lastCovariateObj);
+  });
+});

src/Analysis/GWASV2/Components/Covariates/CovariatesCardsList.jsx

@@ -5,13 +5,21 @@ import { Card } from 'antd';
 
 const { Meta } = Card;
 
-const CovariatesCardsList = ({ covariates, deleteCovariate }) => (
+const CovariatesCardsList = ({ covariates, outcome, deleteCovariate }) => (
   <div className='GWASUI-cdList'>
+    {outcome && (
+      <Card className='outcome-card'>
+        <Meta
+          title='Outcome Phenotype'
+          description={`${outcome.provided_name || outcome.concept_name}`}
+        />
+      </Card>
+    )}
     {covariates.map((covariate, key) => (
-      <React.Fragment key={key}>
+      <React.Fragment key={covariate + key}>
         {covariate.provided_name && (
           <Card
-            key={`cd-list-option-${key}`}
+            key={`cd-list-option-${covariate + key}`}
             className='dichotomous-card'
             actions={[
               <DeleteOutlined
@@ -53,8 +61,13 @@ const CovariatesCardsList = ({ covariates, deleteCovariate }) => (
 );
 
 CovariatesCardsList.propTypes = {
-  covariates: PropTypes.array.isRequired,
+  covariates: PropTypes.array,
+  outcome: PropTypes.object,
   deleteCovariate: PropTypes.func.isRequired,
 };
+CovariatesCardsList.defaultProps = {
+  outcome: null,
+  covariates: [],
+};
 
 export default CovariatesCardsList;

src/Analysis/GWASV2/Components/JobInputModal/JobInputModal.stories.jsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import ValidState from '../../TestData/States/ValidState';
 import JobInputModal from './JobInputModal';
 
 export default {
@@ -24,7 +24,7 @@ const MockTemplate = () => {
     finalPopulationSizes,
     outcome,
     selectedStudyPopulationCohort,
-  } = ValidInitialState;
+  } = ValidState;
 
   return (
     <div

src/Analysis/GWASV2/Components/JobInputModal/JobInputModal.test.jsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { Modal, Input } from 'antd';
 import JobInputModal from './JobInputModal';
 import ACTIONS from '../../Utils/StateManagement/Actions';
-import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import ValidState from '../../TestData/States/ValidState';
 
 const open = true;
 const setOpen = () => null;
@@ -21,7 +21,7 @@ const {
   finalPopulationSizes,
   outcome,
   selectedStudyPopulationCohort,
-} = ValidInitialState;
+} = ValidState;
 
 describe('JobInputModal', () => {
   let wrapper;

src/Analysis/GWASV2/Components/SelectConfiguration/SelectConfiguration.stories.jsx

@@ -5,7 +5,7 @@ import SelectionConfiguration from './SelectConfiguration';
 import { rest } from 'msw';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import '../../GWASV2.css';
-import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import ValidState from '../../TestData/States/ValidState';
 
 export default {
   title: 'Tests3/GWASV2/SelectConfiguration',
@@ -19,7 +19,7 @@ const mockedQueryClient = new QueryClient({
 });
 
 const MockTemplate = () => {
-  const [state, dispatch] = useReducer(reducer, ValidInitialState);
+  const [state, dispatch] = useReducer(reducer, ValidState);
 
   return (
     <QueryClientProvider client={mockedQueryClient}>

src/Analysis/GWASV2/Components/SelectConfiguration/SelectConfiguration.test.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import SelectConfiguration from './SelectConfiguration';
-import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import ValidState from '../../TestData/States/ValidState';
 import ACTIONS from '../../Utils/StateManagement/Actions';
 
 describe('SelectConfiguration component', () => {
@@ -14,7 +14,7 @@ describe('SelectConfiguration component', () => {
     covariates,
     outcome,
     imputationScore,
-  } = ValidInitialState;
+  } = ValidState;
 
   beforeEach(() => {
     wrapper = shallow(

src/Analysis/GWASV2/Components/SelectHare/SelectHareDropDown.test.jsx

@@ -3,7 +3,7 @@ import { mount } from 'enzyme';
 import { Select } from 'antd';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import SelectHareDropDown from './SelectHareDropDown';
-import ValidInitialState from '../../TestData/InitialStates/ValidInitialState';
+import ValidState from '../../TestData/States/ValidState';
 import ACTIONS from '../../Utils/StateManagement/Actions';
 import { SourceContextProvider } from '../../Utils/Source';
 import {
@@ -30,7 +30,8 @@ fetchConceptStatsByHareSubset.mockResolvedValue({
   ],
 });
 useSourceFetch.mockResolvedValue({
-  sourceId: 2, loading: false,
+  sourceId: 2,
+  loading: false,
 });
 
 // Other generic arguments and functions shared by tests below:
@@ -43,7 +44,8 @@ const mountDropDownForOutcome = (
   selectedStudyPopulationCohort,
   covariates,
   outcome,
-  dispatch) => mount(
+  dispatch,
+) => mount(
   <QueryClientProvider client={mockedQueryClient}>
     <SourceContextProvider>
       <SelectHareDropDown
@@ -60,20 +62,18 @@ const mountDropDownForOutcome = (
 // Tests:
 describe('SelectHareDropDown component - Quantitative outcome test scenarios', () => {
   let wrapper;
-  const {
-    selectedStudyPopulationCohort,
-    covariates,
-    outcome,
-  } = ValidInitialState;
+  const { selectedStudyPopulationCohort, covariates, outcome } = ValidState;
   let dispatch;
 
   beforeEach(() => {
     dispatch = jest.fn();
     // use mount() instead of shallow():
-    wrapper = mountDropDownForOutcome(selectedStudyPopulationCohort,
+    wrapper = mountDropDownForOutcome(
+      selectedStudyPopulationCohort,
       covariates,
       outcome,
-      dispatch);
+      dispatch,
+    );
   });
   it('should render the SelectHareDropDown component', async () => {
     expect(wrapper.find(SelectHareDropDown).exists()).toBe(true);
@@ -107,10 +107,7 @@ describe('SelectHareDropDown component - Quantitative outcome test scenarios', (
 
 describe('SelectHareDropDown component - Dichotomous (case/control) test scenarios', () => {
   let wrapper;
-  const {
-    selectedStudyPopulationCohort,
-    covariates,
-  } = ValidInitialState;
+  const { selectedStudyPopulationCohort, covariates } = ValidState;
   // Custom dichotomous (case/control) outcome type:
   const outcome = {
     variable_type: 'custom_dichotomous',
@@ -121,10 +118,12 @@ describe('SelectHareDropDown component - Dichotomous (case/control) test scenari
 
   beforeEach(() => {
     dispatch = jest.fn();
-    wrapper = mountDropDownForOutcome(selectedStudyPopulationCohort,
+    wrapper = mountDropDownForOutcome(
+      selectedStudyPopulationCohort,
       covariates,
       outcome,
-      dispatch);
+      dispatch,
+    );
   });
   it('should render the SelectHareDropDown component', async () => {
     expect(wrapper.find(SelectHareDropDown).exists()).toBe(true);
@@ -154,7 +153,8 @@ describe('SelectHareDropDown component - Dichotomous (case/control) test scenari
       payload: [
         { population: 'Control', size: 39648 },
         { population: 'Case', size: 39648 },
-        { population: 'Total', size: 39648 * 2 }],
+        { population: 'Total', size: 39648 * 2 },
+      ],
     });
   });
 });

src/Analysis/GWASV2/Steps/SelectCovariates/SelectCovariates.jsx

@@ -82,6 +82,7 @@ const SelectCovariates = ({
         <div className='GWASUI-column GWASUI-card-column'>
           <CovariatesCardsList
             covariates={covariates}
+            outcome={outcome}
             deleteCovariate={(chosenCovariate) => dispatch({
               type: ACTIONS.DELETE_COVARIATE,
               payload: chosenCovariate,

src/Analysis/GWASV2/Steps/SelectOutcome/SelectOutcome.jsx

@@ -76,6 +76,7 @@ const SelectOutcome = ({
       <div className='GWASUI-column GWASUI-card-column'>
         <CovariatesCardsList
           covariates={covariates}
+          outcome={outcome}
           deleteCovariate={(chosenCovariate) => dispatch({
             type: ACTIONS.DELETE_COVARIATE,
             payload: chosenCovariate,

src/Analysis/GWASV2/TestData/InitialStates/ValidInitialState.js → src/Analysis/GWASV2/TestData/States/ValidState.js

@@ -1,4 +1,4 @@
-const ValidInitialState = {
+const ValidState = {
   outcome: {
     variable_type: 'concept',
     concept_id: 2000000873,
@@ -10,6 +10,11 @@ const ValidInitialState = {
     size: 510904,
   },
   covariates: [
+    {
+      variable_type: 'custom_dichotomous',
+      provided_name: 'providednamebyuser',
+      cohort_ids: [12, 32],
+    },
     {
       variable_type: 'concept',
       concept_id: 2000000873,
@@ -43,4 +48,4 @@ const ValidInitialState = {
     },
   ],
 };
-export default ValidInitialState;
+export default ValidState;