feat(attritionTableHistogramModal): added CSS, notes for technical ap…

…proach, func to determine modal title

src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTable.jsx

@@ -10,7 +10,7 @@ const { Panel } = Collapse;
 const AttritionTable = ({ selectedCohort, outcome, covariates, tableType }) => {
   const [modalInfo, setModalInfo] = useState({
     title: 'Historgram',
-    isModalOpen: true,
+    isModalOpen: false,
   });
   const [covariatesProcessed, setCovariatesProcessed] = useState([]);
   // Creates an array of arrays such that given input arr [A,B,C]
@@ -99,6 +99,8 @@ const AttritionTable = ({ selectedCohort, outcome, covariates, tableType }) => {
                     rowType='Cohort'
                     rowObject={null}
                     currentCovariateAndCovariatesFromPrecedingRows={[]}
+                    modalInfo={modalInfo}
+                    setModalInfo={setModalInfo}
                   />
                 </React.Fragment>
               )}
@@ -135,6 +137,8 @@ const AttritionTable = ({ selectedCohort, outcome, covariates, tableType }) => {
                           ...item,
                           applyAutoGenFilters(),
                         ]}
+                        modalInfo={modalInfo}
+                        setModalInfo={setModalInfo}
                       />
                     </React.Fragment>
                   ))

src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.css

@@ -0,0 +1,4 @@
+.attrition-table-modal h3 {
+  color: #2e77b8;
+  font-size: 14px;
+}

src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.jsx

@@ -1,20 +1,20 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Modal } from 'antd';
+import './AttritionTableModal.css';
 
-const AttritionTableModal = ({ modalInfo, setModalInfo }) => {
-  return (
-    <div>
-      <Modal
-        title={<h3>{modalInfo.title}</h3>}
-        open={modalInfo.isModalOpen}
-        onOk={() => setModalInfo({ ...modalInfo, isModalOpen: false })}
-        onCancel={() => setModalInfo({ ...modalInfo, isModalOpen: false })}
-        footer={null}
-      />
-    </div>
-  );
-};
+const AttritionTableModal = ({ modalInfo, setModalInfo }) => (
+  <div>
+    <Modal
+      title={<h3>{modalInfo.title}</h3>}
+      open={modalInfo.isModalOpen}
+      onOk={() => setModalInfo({ ...modalInfo, isModalOpen: false })}
+      onCancel={() => setModalInfo({ ...modalInfo, isModalOpen: false })}
+      footer={null}
+      className='attrition-table-modal'
+    />
+  </div>
+);
 
 AttritionTableModal.propTypes = {
   modalInfo: PropTypes.object,

src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTableRow.jsx

@@ -133,13 +133,19 @@ const AttritionTableRow = ({
     return value;
   };
 
+  const determineModalTitle = () => {
+    let title;
+    rowObject.variable_type === 'concept'
+      ? (title = 'Continuous ')
+      : (title = 'Dichotomous ');
+    title += rowType;
+    rowType === 'Outcome' ? (title += ' Phenotype') : null;
+    return title;
+  };
   const handleChatIconClick = () => {
     setModalInfo({
       ...modalInfo,
-      title:
-        rowType === 'Covariate' || rowType === 'Outcome'
-          ? 'Histogram'
-          : 'Euler',
+      title: determineModalTitle(),
       isModalOpen: true,
     });
   };
@@ -174,6 +180,8 @@ AttritionTableRow.propTypes = {
   outcome: PropTypes.object,
   rowObject: PropTypes.object,
   selectedCohort: PropTypes.object.isRequired,
+  modalInfo: PropTypes.object.isRequired,
+  setModalInfo: PropTypes.func.isRequired,
 };
 
 AttritionTableRow.defaultProps = {

src/Analysis/GWASApp/Components/Covariates/THIS IS WHAT PHENOTYPE HISTOGRAM NEEDS.txt

@@ -0,0 +1,21 @@
+THIS IS WHAT PHENOTYPE HISTOGRAM NEEDS
+
+<PhenotypeHistogram
+  dispatch="{dispatch}"
+  selectedStudyPopulationCohort="{selectedStudyPopulationCohort}"
+  selectedCovariates="{selectedCovariates}"
+  outcome="{outcome}"
+  selectedContinuousItem="{selected}"
+/>
+
+LINE 67
+data-portal/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.jsx
+
+
+These values are props from data-portal/src/Analysis/GWASApp/Steps/SelectOutcome/SelectOutcome.jsx
+and available as part of reducer state dispatched obj:
+
+selectedStudyPopulationCohort => YES
+selectedCovariates => probably? Covariates
+outcome => YES
+selectedContinuousItem => hopefully from table row data somewhere?