feat: improve documentation on fetchSimpleOverlapInfo

...and fix eslint

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

@@ -24,12 +24,23 @@ const AttritionTableModal = ({ modalInfo, setModalInfo }) => {
         <div data-testid='phenotype-histogram-diagram'>
           <PhenotypeHistogram
             selectedStudyPopulationCohort={modalInfo.selectedCohort}
-            // If row is outcome, we don't want covariates to be included in the filter.
-            // If not, we only want covariates from previous rows here. The current one will be in selectedContinuousItem below.
-            selectedCovariates={rowIsOutcome ? [] : modalInfo.currentCovariateAndCovariatesFromPrecedingRows.slice(0, -1)}
+            selectedCovariates={(() => {
+              // If row is outcome, we don't want covariates to be included in the filter.
+              // If not, we only want covariates from previous rows here. The current one will be in selectedContinuousItem below.
+              // Overall, the result of the logic below should be a histogram that reflects what was displayed in the "select covariate" step.
+              // A TODO could be to have another histogram display the remaining data. Will it be transformed again using just the remaining set?
+              if (rowIsOutcome) return [];
+
+              if (modalInfo.outcome.variable_type === 'custom_dichotomous') {
+                // case/control... - here we also remove an extra item that is added on the fly (see applyAutoGenFilters() in AttritionTable)
+                return modalInfo.currentCovariateAndCovariatesFromPrecedingRows.slice(0, -2);
+              }
+
+              return modalInfo.currentCovariateAndCovariatesFromPrecedingRows.slice(0, -1);
+            })()}
             outcome={rowIsOutcome ? null : modalInfo.outcome}
             selectedContinuousItem={modalInfo.rowObject}
-            readOnly={true}
+            readOnly
           />
         </div>
       )}

src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.css

@@ -1,9 +1,12 @@
 .GWASUI-column.transformation-dropdown-label {
-  max-width: 25%;
+  max-width: 30%;
+  padding-top: 10px;
+  padding-bottom: 5px;
 }
 
 .GWASUI-column.transformation-select {
-  max-width: 65%;
+  max-width: 60%;
+  padding-bottom: 10px;
 }
 
 label[for='input-minOutlierCutoff'],

src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx

@@ -49,17 +49,13 @@ const PhenotypeHistogram = ({
     queryConfig,
   );
 
-  const getMinCutoff = (continuousItem) => {
-    return continuousItem?.filters?.find(
-      (filter) => filter.type === FILTERS.greaterThanOrEqualTo,
-    )?.value ?? null;
-  };
+  const getMinCutoff = (continuousItem) => continuousItem?.filters?.find(
+    (filter) => filter.type === FILTERS.greaterThanOrEqualTo,
+  )?.value ?? null;
 
-  const getMaxCutoff = (continuousItem) => {
-    return continuousItem?.filters?.find(
-      (filter) => filter.type === FILTERS.lessThanOrEqualTo,
-    )?.value ?? null;
-  };
+  const getMaxCutoff = (continuousItem) => continuousItem?.filters?.find(
+    (filter) => filter.type === FILTERS.lessThanOrEqualTo,
+  )?.value ?? null;
 
   useEffect(() => {
     // Validate and give error message if there is no data:
@@ -114,13 +110,16 @@ const PhenotypeHistogram = ({
       {inlineErrorMessage}
       {data.bins !== null && (
         <div>
+          <div>{(outcome?.variable_type === 'custom_dichotomous' && readOnly
+            ? '\u2139\uFE0F histogram displaying data from both case and control groups'
+            : '')}
+          </div>
           <div className='GWASUI-row'>
             <div className='GWASUI-column transformation-dropdown-label'>
               <label
                 id='transformation-dropdown-label'
                 htmlFor='transformation-select'
-              >
-                Select Transformation
+              >{(readOnly ? 'Selected Transformation' : 'Select Transformation')}
               </label>
             </div>
             <div className='GWASUI-column transformation-select'>
@@ -165,7 +164,8 @@ const PhenotypeHistogram = ({
                 max={
                   (maxOutlierCutoff
                   ?? data.bins[data.bins.length - 1]?.end
-                  ?? 100) + 1}
+                  ?? 100) + 1
+                }
                 onKeyDown={(e) => {
                   const { key } = e;
                   // Allow only numeric keys, backspace, and delete, and one decimal point

src/Analysis/GWASApp/Utils/cohortMiddlewareApi.js

@@ -13,7 +13,7 @@ export const fetchSimpleOverlapInfo = async (
   outcome,
 ) => {
   const variablesPayload = {
-    variables: [outcome, ...selectedCovariates,
+    variables: [outcome, ...selectedCovariates, // <- note: this order is important (outcome first, then covariates)
       // add extra filter to make sure we only count persons that have a HARE group as well:
       {
         variable_type: 'concept',
@@ -45,7 +45,7 @@ export const fetchHistogramInfo = async (
   transformationType,
 ) => {
   const variablesPayload = {
-    variables: [...selectedCovariates, outcome,
+    variables: [outcome, ...selectedCovariates, // <- note: this order is important (outcome first, then covariates)
       // add extra filter to make sure we only count persons that have a HARE group as well:
       {
         variable_type: 'concept',
@@ -113,7 +113,6 @@ export const addCDFilter = (cohortId, otherCohortId, covariateArr) => {
   return covariateRequest;
 };
 
-
 export const fetchCohortDefinitions = async (sourceId, selectedTeamProject) => {
   const cohortEndPoint = `${cohortMiddlewarePath}cohortdefinition-stats/by-source-id/${sourceId}/by-team-project?team-project=${selectedTeamProject}`;
   const response = await fetch(cohortEndPoint);