Refactor CohortComparison: simplify props, enhance UI components, add error handling, and migrate reusable logic

Author: craigrbarnes

packages/core/src/features/cohortComparison/cohortFacetSlice.ts

@@ -24,22 +24,25 @@ export const cohortFacetSlice = graphQLAPI.injectEndpoints({
         primaryCohort,
         comparisonCohort,
         continuousFacetsInterval = undefined,
-      }) => ({
-        url: `${GEN3_ANALYSIS_API}/compare/facets`,
-        method: 'POST',
-        body: {
-          doc_type: index,
-          cohort1: primaryCohort,
-          cohort2: comparisonCohort,
-          facets: facetFields,
-          interval:
-            continuousFacetsInterval ??
-            continuousFacets.reduce((acc: Record<string, number>, x) => {
-              acc[x] = DAYS_IN_DECADE;
-              return acc;
-            }, {}),
-        },
-      }),
+      }) => {
+        console.log('Fetching cohort facets for index:', index);
+        return {
+          url: `${GEN3_ANALYSIS_API}/compare/facets`,
+          method: 'POST',
+          body: {
+            doc_type: index,
+            cohort1: primaryCohort,
+            cohort2: comparisonCohort,
+            facets: facetFields,
+            interval:
+              continuousFacetsInterval ??
+              continuousFacets.reduce((acc: Record<string, number>, x) => {
+                acc[x] = DAYS_IN_DECADE;
+                return acc;
+              }, {}),
+          },
+        };
+      },
       transformResponse: (response: any) => {
         const facets1 = response?.cohort1?.facets;
         const facets2 = response?.cohort2?.facets;

packages/frontend/src/components/charts/echarts/ComparisonBarChart.tsx

@@ -2,10 +2,7 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { ActionIcon, Menu, Tooltip } from '@mantine/core';
 import { processLabel } from '../utils';
 import { ChartProps } from '../types';
-import ReactECharts, {
-  ReactEChartsHandle,
-  ReactEChartsProps,
-} from './ReactECharts';
+import ReactECharts, { ReactEChartsHandle, ReactEChartsProps, } from './ReactECharts';
 import { HistogramDataArray } from '@gen3/core';
 import { CallbackDataParams } from 'echarts/types/dist/shared';
 import { isArray } from 'lodash';
@@ -110,16 +107,18 @@ const ComparisonBarChart = ({
           return `${colorSquare}${p.name}: <b>${p.value}</b>`;
         },
       },
-      ...processAxis(
-        data[0],
-        maxBins,
-        labelTruncation,
-        xLabel,
-        yLabel,
-        showXTicks,
-        showYTicks,
-        xLabelRotation,
-      ),
+      ...(data.length > 0
+        ? processAxis(
+            data[0],
+            maxBins,
+            labelTruncation,
+            xLabel,
+            yLabel,
+            showXTicks,
+            showYTicks,
+            xLabelRotation,
+          )
+        : {}),
       series: data.map((d: HistogramDataArray, i: number) => ({
         name: labels[i],
         type: 'bar',
@@ -130,15 +129,16 @@ const ComparisonBarChart = ({
       })),
     };
   }, [
-    colors,
     data,
-    labelTruncation,
     maxBins,
-    showXTicks,
-    showYTicks,
+    labelTruncation,
     xLabel,
     yLabel,
+    showXTicks,
+    showYTicks,
     xLabelRotation,
+    labels,
+    colors,
   ]);
 
   if (!data || data.length === 0)

packages/frontend/src/features/CohortComparison/AdditionalCohortSelection.tsx

@@ -38,18 +38,35 @@ const AdditionalCohortSelection: React.FC<AdditionalCohortSelectionProps> = ({
 
   const [rowSelection, setRowSelection] = useState<MRT_RowSelectionState>({});
 
+  console.log('Available cohorts:', availableCohorts);
+  console.log('index', index);
+  console.log('dataTypename', dataTypename);
+
   const cohorts = useDeepCompareMemo(
     () => availableCohorts.filter((cohort) => cohort.id !== primaryCohort.id),
     [primaryCohort, availableCohorts],
   );
 
+  console.log('Available cohorts:', cohorts);
+
   const [selectedCohort, setSelectedCohort] = useState<Cohort | undefined>();
 
   useEffect(() => {
     //do something when the row selection changes...
     console.info({ rowSelection });
   }, [rowSelection]);
 
+  const cohortList = useMemo(
+    () =>
+      cohorts.map((cohort) => ({
+        id: cohort.id,
+        name: cohort.name,
+        counts: cohort.counts,
+        select: false,
+      })),
+    [cohorts],
+  );
+
   const cohortListTableColumns = useMemo(
     () =>
       [
@@ -84,6 +101,7 @@ const AdditionalCohortSelection: React.FC<AdditionalCohortSelectionProps> = ({
         },
         {
           accessorKey: 'name',
+          accessorFn: (cohort) => cohort.name,
           header: 'Name',
           Cell: ({ row }) => (
             <label
@@ -121,10 +139,10 @@ const AdditionalCohortSelection: React.FC<AdditionalCohortSelectionProps> = ({
     manualSorting: true,
     manualPagination: false,
     paginateExpandedRows: false,
-    rowCount: cohorts.length,
+    rowCount: cohortList.length,
     enableTopToolbar: false,
     layoutMode: 'semantic',
-    enableRowSelection: true,
+    enableRowSelection: false,
     getRowId: (row) => row.id,
     onRowSelectionChange: setRowSelection,
     mantineTableHeadCellProps: {

packages/frontend/src/features/CohortComparison/CohortCard/CohortCard.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 import { Switch, useMantineTheme } from '@mantine/core';
 import CohortVennDiagram from '../CohortVennDiagram';
 import Link from 'next/link';
-import { CohortComparisonType, FIELD_LABELS } from '../types';
+import { CohortComparisonType } from '../types';
 import CohortTable from './CohortTable';
+import { fieldNameToLabel } from '@gen3/core';
 
 interface CohortCardProps {
   selectedCards: Record<string, boolean>;
@@ -91,7 +92,7 @@ const CohortCard: React.FC<CohortCardProps> = ({
                   })
                 }
                 disabled={value === 'survival' && !survivalPlotSelectable}
-                label={value === 'survival' ? field : FIELD_LABELS[field]}
+                label={value === 'survival' ? field : fieldNameToLabel(field)}
               />
             </li>
           ))}

packages/frontend/src/features/CohortComparison/CohortComparison.tsx

@@ -1,11 +1,15 @@
 import React, { useState } from 'react';
 import { pickBy } from 'lodash';
 import { LoadingOverlay } from '@mantine/core';
-import { convertFilterSetToGqlFilter, FilterSet, useCohortFacetsQuery, } from '@gen3/core';
+import {
+  convertFilterSetToGqlFilter,
+  FilterSet,
+  useCohortFacetsQuery,
+} from '@gen3/core';
 
 import CohortCard from './CohortCard/CohortCard';
 import FacetCard from './FacetCard';
-import { CohortComparisonConfiguration, CohortComparisonFields } from './types';
+import { CohortComparisonConfiguration } from './types';
 import { DemoText } from '../../components/tailwindComponents';
 
 export interface CohortComparisonType {
@@ -23,27 +27,29 @@ export interface CohortComparisonType {
   };
 }
 
-interface CohortComparisonProps {
-  configuration: CohortComparisonConfiguration;
+interface CohortComparisonProps extends CohortComparisonConfiguration {
   cohorts: CohortComparisonType;
   demoMode: boolean;
 }
 
 const CohortComparison: React.FC<CohortComparisonProps> = ({
-  configuration,
+  index,
+  dataTypename,
+  uniqueIdField,
+  facets,
   cohorts,
   demoMode = false,
 }: CohortComparisonProps) => {
-  const [selectedCards, setSelectedCards] = useState({
-    survival: true,
-    ethnicity: false,
-    gender: true,
-    race: true,
-    vital_status: true,
-    age_at_diagnosis: true,
-  } as Record<string, boolean>);
+  const facetCards = facets.reduce(
+    (acc, facet) => {
+      acc[facet.field] = true;
+      return acc;
+    },
+    {} as Record<string, boolean>,
+  );
 
-  const { index, dataTypename, uniqueIdField, facets } = configuration;
+  const [selectedCards, setSelectedCards] =
+    useState<Record<string, boolean>>(facetCards);
 
   const [survivalPlotSelectable, setSurvivalPlotSelectable] = useState(true);
   const fieldsToQuery = facets.map((f) => f.field);
@@ -53,6 +59,7 @@ const CohortComparison: React.FC<CohortComparisonProps> = ({
     isFetching: cohortFacetsFetching,
     isLoading: cohortFacetsLoading,
     isUninitialized: cohortFacetsUninitialized,
+    isError: cohortFacetsError,
   } = useCohortFacetsQuery({
     index,
     continuousFacets: ['diagnoses.age_at_diagnosis'],
@@ -63,6 +70,9 @@ const CohortComparison: React.FC<CohortComparisonProps> = ({
     ),
   });
 
+  console.log('cohortFacetsData', cohortFacetsData);
+  console.log('cohortFacetsError', cohortFacetsError);
+
   const counts = [
     cohorts.primary_cohort.counts,
     cohorts.comparison_cohort.counts,
@@ -91,19 +101,14 @@ const CohortComparison: React.FC<CohortComparisonProps> = ({
                 visible={
                   cohortFacetsFetching ||
                   cohortFacetsUninitialized ||
-                  cohortFacetsLoading
+                  cohortFacetsLoading ||
+                  cohortFacetsData === undefined
                 }
                 zIndex={1} // need z-index 1
               />
               <FacetCard
-                data={
-                  cohortFacetsData?.aggregations
-                    ? cohortFacetsData.aggregations.map(
-                        (d: any) => d[CohortComparisonFields[selectedCard]],
-                      )
-                    : []
-                }
-                field={CohortComparisonFields[selectedCard]}
+                data={[]}
+                field={selectedCard}
                 counts={counts}
                 cohorts={cohorts}
                 dataTypename={dataTypename}

packages/frontend/src/features/CohortComparison/CohortComparisonApp.tsx

@@ -13,19 +13,22 @@ import { SelectionScreenContext } from '../Analysis/context';
 import CohortComparison from './CohortComparison';
 import AdditionalCohortSelection from './AdditionalCohortSelection';
 import { CohortComparisonConfiguration } from './types';
+import { ErrorCard } from '../../index';
 
 const VoidFunction = () => {};
 
 const CohortComparisonApp = (configuration: CohortComparisonConfiguration) => {
-  const { index: COHORT_FILTER_INDEX } = configuration;
-  const { selectionScreenOpen, setSelectionScreenOpen, app, setActiveApp } =
+  const { index: COHORT_FILTER_INDEX, dataTypename } = configuration;
+  const { selectionScreenOpen, setSelectionScreenOpen, setActiveApp } =
     useContext(SelectionScreenContext);
 
   const allCohortsIds = useCoreSelector(selectCohortIds);
 
   const primaryCohort = useCoreSelector((state) => selectCurrentCohort(state));
 
-  const [comparisonCohort, setComparisonCohort] = useState<Cohort>();
+  const [comparisonCohort, setComparisonCohort] = useState<Cohort | undefined>(
+    undefined,
+  );
   const comparisonCohortObj: Cohort | null = useCoreSelector((state) =>
     comparisonCohort?.id ? selectCohortById(state, comparisonCohort.id) : null,
   );
@@ -83,12 +86,10 @@ const CohortComparisonApp = (configuration: CohortComparisonConfiguration) => {
       index={COHORT_FILTER_INDEX}
       dataTypename={configuration.dataTypename}
     />
+  ) : comparisonCohort ? (
+    <CohortComparison cohorts={cohorts} demoMode={false} {...configuration} />
   ) : (
-    <CohortComparison
-      cohorts={cohorts}
-      demoMode={false}
-      configuration={configuration}
-    />
+    <ErrorCard message="No cohort available" />
   );
 };
 

packages/frontend/src/features/CohortComparison/FacetCard/index.tsx

@@ -10,15 +10,9 @@ import {
 } from '@gen3/core';
 import FunctionButton from '../../../components/FunctionButton';
 import CohortCreationButton from '../../../components/Buttons/CohortCreationButton';
-import {
-  COHORT_A_COLOR,
-  COHORT_B_COLOR,
-  CohortComparisonType,
-  UPPER_FIRST_FIELDS,
-} from '../types';
+import { COHORT_A_COLOR, COHORT_B_COLOR, CohortComparisonType } from '../types';
 import { useDeepCompareMemo } from 'use-deep-compare';
 import { createFilters, formatBucket } from './utils';
-import { upperFirst } from 'lodash';
 import { labelToPlural } from '../../../utils/labels';
 import ComparisonBarChart from '../../../components/charts/echarts/ComparisonBarChart';
 
@@ -75,10 +69,6 @@ export const FacetCard: React.FC<FacetCardProps> = ({
     [formattedData],
   );
 
-  if (field === 'diagnoses.age_at_diagnosis') {
-    uniqueValues.sort();
-  }
-
   formattedData = useMemo(
     () =>
       formattedData.map((cohort) =>
@@ -93,22 +83,6 @@ export const FacetCard: React.FC<FacetCardProps> = ({
     [formattedData, uniqueValues],
   );
 
-  const barChartData = formattedData.map((cohort, idx) => ({
-    x: cohort.map((facet) =>
-      UPPER_FIRST_FIELDS.includes(field)
-        ? upperFirst(facet.key)
-        : fieldNameToLabel(facet.key),
-    ),
-    y: cohort.map((facet) => (facet.count / counts[idx]) * 100),
-    customdata: cohort.map((facet) => facet.count),
-    hovertemplate: `<b>${
-      cohorts[idx === 0 ? 'primary_cohort' : 'comparison_cohort']?.name
-    }</b><br /> %{y:.0f}% Cases (%{customdata:,})<extra></extra>`,
-    marker: {
-      color: idx === 0 ? COHORT_A_COLOR : COHORT_B_COLOR,
-    },
-  }));
-
   const downloadTSVFile = () => {
     const header = [
       `${fieldLabel}`,
@@ -140,6 +114,8 @@ export const FacetCard: React.FC<FacetCardProps> = ({
     );
   };
 
+  console.log('formattedData', formattedData);
+
   return (
     <Paper
       data-testid={`card-${fieldLabel}-cohort-comparison`}
@@ -204,9 +180,7 @@ export const FacetCard: React.FC<FacetCardProps> = ({
                   key={`${field}_${value}`}
                 >
                   <td data-testid={`text-analysis-${value}`} className="pl-2">
-                    {UPPER_FIRST_FIELDS.includes(field)
-                      ? upperFirst(value)
-                      : fieldNameToLabel(value)}
+                    {fieldNameToLabel(value)}
                   </td>
                   <td>
                     <CohortCreationButton