feat: add transformation dropdown to histogram

...and adjust histogram endpoint call to include histogram concept id in variables list instead of being part of the url, according to the backend changes implemented for this same endpoint.
uc-cdis · Jan 24, 2025 · 2a1fdde · 2a1fdde
1 parent 58b8322
commit 2a1fdde
Show file tree

Hide file tree

Showing 7 changed files with 33 additions and 12 deletions.
diff --git a/...alysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTable.stories.jsx b/...alysis/GWASApp/Components/AttritionTableWrapper/AttritionTable/AttritionTable.stories.jsx
@@ -159,7 +159,7 @@ MockedSuccess.parameters = {
         }
       ),
       rest.post(
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => {
           return res(
             ctx.delay(2000),

diff --git a/src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTableWrapper.stories.jsx b/src/Analysis/GWASApp/Components/AttritionTableWrapper/AttritionTableWrapper.stories.jsx
@@ -117,7 +117,7 @@ WithConceptOutcome.parameters = {
         }
       ),
       rest.post(
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => {
           return res(
             ctx.delay(2000),

diff --git a/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.jsx b/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.jsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import Select from 'antd';
 import PropTypes from 'prop-types';
 import Covariates from './Covariates';
 import PhenotypeHistogram from '../Diagrams/PhenotypeHistogram/PhenotypeHistogram';
@@ -15,12 +16,17 @@ const ContinuousCovariates = ({
 }) => {
   const [selected, setSelected] = useState(null);
 
-  const formatSelected = () => ({
+  const formatSelected = (transformationType) => ({
     variable_type: 'concept',
     concept_id: selected.concept_id,
     concept_name: selected.concept_name,
+    transformation: transformationType,
   });
 
+  const onChange = (selectedTransformationType) => {
+    setSelected(formatSelected(selectedTransformationType));
+  };
+
   // when a user has selected a outcome phenotype that is a continuous covariate with a concept ID,
   // that should not appear as a selectable option, and be included in the submitted covariates.
   // If they selected a outcome phenotype that is dichotomous
@@ -64,6 +70,15 @@ const ContinuousCovariates = ({
           </div>
           {selected ? (
             <div data-tour='phenotype-histogram'>
+              <Select
+                showSearch={false}
+                labelInValue
+                onChange={onChange}
+                placeholder='-optional transformation-'
+                fieldNames={{ label: 'description', value: 'type' }}
+                options={[{type: 'log', description: 'log transformation'},{type: 'z_score', description: 'z-score transformation'}]}
+                dropdownStyle={{ width: '800' }}
+              />
               <PhenotypeHistogram
                 dispatch={dispatch}
                 selectedStudyPopulationCohort={selectedStudyPopulationCohort}

diff --git a/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.stories.jsx b/src/Analysis/GWASApp/Components/Covariates/ContinuousCovariates.stories.jsx
@@ -105,8 +105,7 @@ SuccessCase.parameters = {
         }
       ),
       rest.post(
-        //histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${currentSelection.concept_id}`;
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => {
           const { cohortmiddlewarepath } = req.params;
           const { cohortdefinitionId } = req.params;
@@ -152,8 +151,7 @@ EmptyDataCase.parameters = {
         }
       ),
       rest.post(
-        //histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${currentSelection.concept_id}`;
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => {
           const { cohortmiddlewarepath } = req.params;
           const { cohortdefinitionId } = req.params;

diff --git a/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx b/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.jsx
@@ -29,13 +29,15 @@ const PhenotypeHistogram = ({
       selectedCovariates,
       outcome,
       selectedContinuousItem.concept_id,
+      selectedContinuousItem.transformation,
     ],
     () => fetchHistogramInfo(
       sourceId,
       selectedStudyPopulationCohort.cohort_definition_id,
       selectedCovariates,
       outcome,
       selectedContinuousItem.concept_id,
+      selectedContinuousItem.transformation,
     ),
     queryConfig,
   );

diff --git a/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.stories.jsx b/src/Analysis/GWASApp/Components/Diagrams/PhenotypeHistogram/PhenotypeHistogram.stories.jsx
@@ -64,8 +64,7 @@ SuccessCase.parameters = {
   msw: {
     handlers: [
       rest.post(
-        //histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${currentSelection.concept_id}`;
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => {
           const { cohortmiddlewarepath } = req.params;
           const { cohortdefinitionId } = req.params;
@@ -106,7 +105,7 @@ ErrorCase.parameters = {
   msw: {
     handlers: [
       rest.post(
-        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId/by-histogram-concept-id/:conceptId',
+        'http://:cohortmiddlewarepath/cohort-middleware/histogram/by-source-id/:sourceid/by-cohort-definition-id/:cohortdefinitionId',
         (req, res, ctx) => res(ctx.delay(800), ctx.status(403))
       ),
     ],

diff --git a/src/Analysis/GWASApp/Utils/cohortMiddlewareApi.js b/src/Analysis/GWASApp/Utils/cohortMiddlewareApi.js
@@ -42,17 +42,24 @@ export const fetchHistogramInfo = async (
   selectedCovariates,
   outcome,
   selectedConceptId,
+  transformationType,
 ) => {
   const variablesPayload = {
     variables: [...selectedCovariates, outcome,
       // add extra filter to make sure we only count persons that have a HARE group as well:
       {
         variable_type: 'concept',
         concept_id: hareConceptId,
-      }].filter(Boolean), // filter out any undefined or null items (e.g. in some
+      },
+      {
+        variable_type: 'concept',
+        concept_id: selectedConceptId,
+        transformation: transformationType
+      }
+    ].filter(Boolean), // filter out any undefined or null items (e.g. in some
     // scenarios "outcome" and "selectedCovariates" are still null and/or empty)
   };
-  const endPoint = `${cohortMiddlewarePath}histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}/by-histogram-concept-id/${selectedConceptId}`;
+  const endPoint = `${cohortMiddlewarePath}histogram/by-source-id/${sourceId}/by-cohort-definition-id/${cohortId}`;
   const reqBody = {
     method: 'POST',
     credentials: 'include',