feat(attritionTableHistogramModal): updated stories to show euler dia…

…grams
uc-cdis · Oct 2, 2024 · 8b676b7 · 8b676b7
1 parent b32dbf1
commit 8b676b7
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 54 deletions.
diff --git a/...alysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTable.stories.jsx b/...alysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTable.stories.jsx
@@ -3,6 +3,10 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import AttritionTable from './AttritionTable';
 import { SourceContextProvider } from '../../../Utils/Source';
+import {
+  generateEulerTestData,
+  generateHistogramTestData,
+} from '../../../TestData/generateDiagramTestData';
 import '../../../GWASApp.css';
 
 export default {
@@ -12,26 +16,6 @@ export default {
 
 const mockedQueryClient = new QueryClient();
 
-const generateHistogramTestData = () => {
-  const minNumberOfBars = 5;
-  const maxNumberOfBars = 15;
-  const minPersonCount = 100;
-  const maxPersonCount = 2000;
-  const binSizeOffSet = 10;
-  const numberOfBars =
-    Math.floor(Math.random() * maxNumberOfBars) + minNumberOfBars;
-  // Create an array of numberOfBars objects
-  const objectsArray = Array.from({ length: numberOfBars }, (v, i) => {
-    return {
-      start: i * binSizeOffSet,
-      end: start + binSizeOffSet,
-      personCount: Math.floor(Math.random() * (maxPersonCount - minPersonCount)) +
-      minPersonCount,
-    };
-  });
-  return objectsArray;
-};
-
 const MockTemplate = () => {
   const [covariateArrSizeTable1, setCovariateArrSizeTable1] = useState(10);
   const [covariateArrSizeTable2, setCovariateArrSizeTable2] = useState(2);
@@ -41,6 +25,8 @@ const MockTemplate = () => {
   };
   const outcome = {
     variable_type: 'custom_dichotomous',
+    cohort_sizes: [10000, 20000],
+    cohort_names: ['name1', 'name2'],
     cohort_ids: [1, 2],
     provided_name: 'dichotomous test1',
   };
@@ -58,6 +44,8 @@ const MockTemplate = () => {
     (_, i) => ({
       variable_type: 'custom_dichotomous',
       provided_name: 'providednamebyuser' + i,
+      cohort_sizes: [10000, 20000],
+      cohort_names: ['name1', 'name2'],
       cohort_ids: [i, i * i],
     })
   );
@@ -179,6 +167,15 @@ MockedSuccess.parameters = {
           );
         }
       ),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/cohort-stats/check-overlap/by-source-id/:sourceid/by-cohort-definition-ids/:cohortdefinitionA/:cohortdefinitionB',
+        (req, res, ctx) => {
+          const { cohortmiddlewarepath } = req.params;
+          const { cohortdefinitionA } = req.params;
+          const { cohortdefinitionB } = req.params;
+          return res(ctx.delay(1100), ctx.json(generateEulerTestData()));
+        }
+      ),
     ],
   },
 };

diff --git a/...mponents/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.jsx b/...mponents/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.jsx
@@ -36,7 +36,7 @@ const AttritionTableModal = ({ modalInfo, setModalInfo }) => {
         modalInfo.rowObject.variable_type === 'custom_dichotomous' && (
           <div data-testid='euler-diagram'>
             <CohortsOverlapDiagram
-              dispatch={() => null}
+              useInlineErrorMessages
               selectedStudyPopulationCohort={modalInfo.selectedCohort}
               selectedCaseCohort={{
                 cohort_name: modalInfo?.rowObject?.cohort_names[0],

diff --git a/...nts/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.test.jsx b/...nts/AttritionTableWrapper/AttritionTable/AttritionTableModal/AttritionTableModal.test.jsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import AttritionTableModal from './AttritionTableModal';
 import { SourceContextProvider } from '../../../../Utils/Source';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import {
   fetchSimpleOverlapInfo,
   useSourceFetch,
@@ -12,7 +12,7 @@ import {
 // Mock the PhenotypeHistogram component
 jest.mock(
   '../../../Diagrams/PhenotypeHistogram/PhenotypeHistogram',
-  () => () => null
+  () => () => null,
 );
 jest.mock('../../../../Utils/cohortMiddlewareApi');
 fetchSimpleOverlapInfo.mockResolvedValue({
@@ -49,7 +49,7 @@ describe('AttritionTableModal', () => {
     render(<AttritionTableModal {...defaultProps} />);
     expect(screen.getByText('Test Modal')).toBeInTheDocument();
     expect(
-      screen.queryByTestId('phenotype-histogram-diagram')
+      screen.queryByTestId('phenotype-histogram-diagram'),
     ).toBeInTheDocument();
     expect(screen.queryByTestId('euler-diagram')).not.toBeInTheDocument();
   });
@@ -77,11 +77,11 @@ describe('AttritionTableModal', () => {
         <SourceContextProvider>
           <AttritionTableModal {...customProps} />
         </SourceContextProvider>
-      </QueryClientProvider>
+      </QueryClientProvider>,
     );
     expect(screen.queryByTestId('euler-diagram')).toBeInTheDocument();
     expect(
-      screen.queryByTestId('phenotype-histogram-diagram')
+      screen.queryByTestId('phenotype-histogram-diagram'),
     ).not.toBeInTheDocument();
   });
 
@@ -96,7 +96,7 @@ describe('AttritionTableModal', () => {
     render(<AttritionTableModal {...noRowObjectProps} />);
     expect(screen.getByText('Test Modal')).toBeInTheDocument();
     expect(
-      screen.queryByTestId('phenotype-histogram-diagram')
+      screen.queryByTestId('phenotype-histogram-diagram'),
     ).not.toBeInTheDocument();
     expect(screen.queryByTestId('euler-diagram')).not.toBeInTheDocument();
   });

diff --git a/src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTableWrapper.stories.jsx b/src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTableWrapper.stories.jsx
@@ -3,6 +3,10 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import AttritionTableWrapper from './AttritionTableWrapper';
 import { SourceContextProvider } from '../../Utils/Source';
+import {
+  generateEulerTestData,
+  generateHistogramTestData,
+} from '../../TestData/generateDiagramTestData';
 import '../../GWASApp.css';
 
 let rowCount = 0;
@@ -32,10 +36,14 @@ WithConceptOutcome.args = {
     {
       variable_type: 'custom_dichotomous',
       provided_name: 'providednamebyuser',
+      cohort_sizes: [9999912, 9999932],
+      cohort_names: ['name1', 'name2'],
       cohort_ids: [12, 32],
     },
     {
       variable_type: 'custom_dichotomous',
+      cohort_sizes: [9999912, 9999932],
+      cohort_names: ['name1', 'name2'],
       cohort_ids: [1, 2],
       provided_name: 'dichotomous test1',
     },
@@ -106,6 +114,26 @@ WithConceptOutcome.parameters = {
           );
         }
       ),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        (req, res, ctx) => {
+          return res(
+            ctx.delay(2000),
+            ctx.json({
+              bins: generateHistogramTestData(),
+            })
+          );
+        }
+      ),
+      rest.post(
+        'http://:cohortmiddlewarepath/cohort-middleware/cohort-stats/check-overlap/by-source-id/:sourceid/by-cohort-definition-ids/:cohortdefinitionA/:cohortdefinitionB',
+        (req, res, ctx) => {
+          const { cohortmiddlewarepath } = req.params;
+          const { cohortdefinitionA } = req.params;
+          const { cohortdefinitionB } = req.params;
+          return res(ctx.delay(1100), ctx.json(generateEulerTestData()));
+        }
+      ),
     ],
   },
 };
@@ -115,6 +143,8 @@ WithDichotomousOutcome.args = {
   ...WithConceptOutcome.args,
   outcome: {
     variable_type: 'custom_dichotomous',
+    cohort_sizes: [9999912, 9999932],
+    cohort_names: ['name1', 'name2'],
     cohort_ids: [1, 2],
     provided_name: 'dichotomous test1',
   },

diff --git a/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.jsx b/src/Analysis/GWASApp/Components/Covariates/CustomDichotomousCovariates.jsx
@@ -23,11 +23,11 @@ const CustomDichotomousCovariates = ({
       variable_type: 'custom_dichotomous',
       cohort_names: [
         firstPopulation.cohort_name,
-        secondPopulation.cohort_name
+        secondPopulation.cohort_name,
       ],
       cohort_sizes: [
         firstPopulation.size,
-        secondPopulation.size
+        secondPopulation.size,
       ],
       cohort_ids: [
         firstPopulation.cohort_definition_id,

diff --git a/src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram.jsx b/src/Analysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram.jsx
@@ -22,14 +22,7 @@ const CohortsOverlapDiagram = ({
   selectedCovariates,
   outcome,
 }) => {
-  const objects = [
-    selectedStudyPopulationCohort,
-    selectedCaseCohort,
-    selectedControlCohort,
-    selectedCovariates,
-    outcome,
-  ];
-
+  const [inlineErrorMessage, setInlineErrorMessage] = useState(null);
   const { source } = useSourceContext();
   const [showTextVersion, setShowTextVersion] = useState(false);
   const sourceId = source; // TODO - change name of source to sourceId for clarity
@@ -149,15 +142,19 @@ const CohortsOverlapDiagram = ({
         dataStudyPopulationAndCase.cohort_overlap.case_control_overlap === 0 ||
         dataStudyPopulationAndControl.cohort_overlap.case_control_overlap === 0
       ) {
-        dispatch({
-          type: ACTIONS.ADD_MESSAGE,
-          payload: MESSAGES.OVERLAP_ERROR,
-        });
+        setInlineErrorMessage(<h4>❌ {MESSAGES.OVERLAP_ERROR.title}</h4>);
+        dispatch &&
+          dispatch({
+            type: ACTIONS.ADD_MESSAGE,
+            payload: MESSAGES.OVERLAP_ERROR,
+          });
       } else {
-        dispatch({
-          type: ACTIONS.DELETE_MESSAGE,
-          payload: MESSAGES.OVERLAP_ERROR,
-        });
+        setInlineErrorMessage(null);
+        dispatch &&
+          dispatch({
+            type: ACTIONS.DELETE_MESSAGE,
+            payload: MESSAGES.OVERLAP_ERROR,
+          });
       }
     }
   }, [dataStudyPopulationAndCase, dataStudyPopulationAndControl]);
@@ -203,6 +200,7 @@ const CohortsOverlapDiagram = ({
     <React.Fragment>
       {!showTextVersion && (
         <React.Fragment>
+          <>{inlineErrorMessage}</>
           <Simple3SetsLegend
             cohort1Label={eulerArgs.set1Label}
             cohort2Label={eulerArgs.set2Label}
@@ -236,7 +234,8 @@ const CohortsOverlapDiagram = ({
 };
 
 CohortsOverlapDiagram.propTypes = {
-  dispatch: PropTypes.func.isRequired,
+  useInlineErrorMessages: PropTypes.bool,
+  dispatch: PropTypes.func,
   selectedStudyPopulationCohort: PropTypes.object.isRequired,
   selectedCaseCohort: PropTypes.object.isRequired,
   selectedControlCohort: PropTypes.object.isRequired,
@@ -245,6 +244,8 @@ CohortsOverlapDiagram.propTypes = {
 };
 
 CohortsOverlapDiagram.defaultProps = {
+  useInlineErrorMessages: false,
+  dispatch: null,
   selectedCovariates: [],
   outcome: null,
 };

diff --git a/...lysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram.stories.jsx b/...lysis/GWASApp/Components/Diagrams/CohortsOverlapDiagram/CohortsOverlapDiagram.stories.jsx
@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import { rest } from 'msw';
 import CohortsOverlapDiagram from './CohortsOverlapDiagram';
 import { SourceContextProvider } from '../../../Utils/Source';
+import { generateEulerTestData } from '../../../TestData/generateDiagramTestData';
 
 export default {
   title: 'Tests3/GWASApp/CohortsOverlapDiagram',
@@ -57,14 +58,7 @@ SuccessCase.parameters = {
           const { cohortmiddlewarepath } = req.params;
           const { cohortdefinitionA } = req.params;
           const { cohortdefinitionB } = req.params;
-          return res(
-            ctx.delay(1100),
-            ctx.json({
-              cohort_overlap: {
-                case_control_overlap: Math.floor(Math.random() * 500),
-              }, // because of random here, we get some data that does not really make sense...SuccessCase2 tries to fix that for some of the relevant group overlaps...
-            })
-          );
+          return res(ctx.delay(1100), ctx.json(generateEulerTestData()));
         }
       ),
     ],

diff --git a/src/Analysis/GWASApp/TestData/generateDiagramTestData.js b/src/Analysis/GWASApp/TestData/generateDiagramTestData.js
@@ -0,0 +1,27 @@
+export const generateHistogramTestData = () => {
+  const minNumberOfBars = 5;
+  const maxNumberOfBars = 15;
+  const minPersonCount = 100;
+  const maxPersonCount = 2000;
+  const binSizeOffSet = 10;
+  const numberOfBars =
+    Math.floor(Math.random() * maxNumberOfBars) + minNumberOfBars;
+  // Create an array of numberOfBars objects
+  const objectsArray = Array.from({ length: numberOfBars }, (v, i) => {
+    const start = i * binSizeOffSet;
+    return {
+      start: start,
+      end: start + binSizeOffSet,
+      personCount:
+        Math.floor(Math.random() * (maxPersonCount - minPersonCount)) +
+        minPersonCount,
+    };
+  });
+  return objectsArray;
+};
+
+export const generateEulerTestData = () => ({
+  cohort_overlap: {
+    case_control_overlap: Math.floor(Math.random() * 5000),
+  }, // because of random here, we get some data that does not really make sense...SuccessCase2 tries to fix that for some of the relevant group overlaps...
+});