Refactor CohortBuilder and chart components: simplify CohortPanel props, update multi-index aggregation query, and modularize MultiTrackHorizontalBarChart.

Author: craigrbarnes

packages/core/src/features/guppy/guppySlice.ts

@@ -111,6 +111,20 @@ interface MultiIndexFieldQueryRequest {
   accessibility?: Accessibility;
 }
 
+interface FieldAggregation {
+  histogram: AggregationsData;
+  totalCount: number;
+}
+
+interface IndexAggregation {
+  [field: string]: FieldAggregation | number;
+  totalCount: number;
+}
+
+interface MultiIndexFieldAggregationResponse {
+  [index: string]: IndexAggregation;
+}
+
 export const explorerTags = guppyApi.enhanceEndpoints({
   addTagTypes: ['AGGS', 'COUNTS', 'STATS', 'TABLE_DATA', 'RAW_DATA'] as const,
 });
@@ -463,8 +477,10 @@ export const explorerApi = explorerTags.injectEndpoints({
         _meta,
         args,
       ): number => {
+        if (!('data' in response) || !response.data) return 0;
+
         return (
-          response?.data[`${args?.indexPrefix ?? ''}_aggregation`][args.type]
+          response?.data?.[`${args?.indexPrefix ?? ''}_aggregation`][args.type]
             ?._totalCount ?? 0
         );
       },
@@ -617,7 +633,7 @@ export const explorerApi = explorerTags.injectEndpoints({
       },
     }),
     getGetMultiIndexAggregation: builder.query<
-      Record<string, any>,
+      MultiIndexFieldAggregationResponse,
       MultiIndexFieldQueryRequest
     >({
       query: ({
@@ -632,17 +648,23 @@ export const explorerApi = explorerTags.injectEndpoints({
           },
           {} as Record<string, GQLFilter>,
         );
-        const query = buildMultiIndexAggregationQuery(indexAndFields);
+        const query = buildMultiIndexAggregationQuery(
+          indexAndFields,
+          accessibility,
+        );
         return {
           query,
           variables: {
             ...filters,
-            accessibility,
           },
         };
       },
-      transformResponse: (response: Record<string, any>) => {
-        return response?.data?._aggregation ?? {};
+      transformResponse: (response: {
+        data: { _aggregation?: IndexAggregation };
+      }) => {
+        if (!response?.data?._aggregation) return {};
+
+        return response.data._aggregation;
       },
     }),
     generalGQL: builder.query<Record<string, unknown>, guppyApiSliceRequest>({
@@ -676,18 +698,18 @@ export const useGetIndexFields = (index: string, indexPrefix = '') => {
 
 const buildMultiIndexAggregationQuery = (
   indexesAndFields: Array<QueryAggsParams>,
+  accessibility = Accessibility.ALL,
   filterBasename: string = 'filter',
 ) => {
   const filterNames = indexesAndFields.reduce(
     (acc, curr) => acc + `$${curr.type}${filterBasename}: JSON,`,
     '',
   );
 
-  let queryString = `query getAggs (${filterNames}) {`;
+  let queryString = `query getMultiIndexAggs (${filterNames}) {`;
 
   indexesAndFields.forEach((indexQuery) => {
-    queryString += `  ${indexQuery.type}_aggregation {
-      ${indexQuery.type} (filter: ${indexQuery.type}${filterBasename}, filterSelf: ${indexQuery.filterSelf ? 'true' : 'false'}, accessibility: ${indexQuery.accessibility}) { _totalCount
+    queryString += `  ${indexQuery.indexPrefix ?? ''}_aggregation { ${indexQuery.type} (filter: $${indexQuery.type}${filterBasename}, filterSelf: ${indexQuery.filterSelf ? 'true' : 'false'}, accessibility: ${accessibility}) { totalCount:_totalCount
     `;
     queryString += indexQuery.fields.map((field: string) =>
       histogramQueryStrForEachField(field),

packages/core/src/features/guppy/queryGenerators.ts

@@ -23,7 +23,7 @@ export const histogramQueryStrForEachField = (field: string): string => {
   if (splittedFieldArray.length === 0) {
     return `
     ${splittedField} {
-      _totalCount
+      totalCount: _totalCount
       histogram {
         key
         count

packages/frontend/src/components/Content/ChartContent.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { createChart } from '../charts/createChart';
 import { ChartProps } from '../charts';
 import {
+  Accessibility,
   EmptyFilterSet,
   HistogramDataArray,
   useGetGetMultiIndexAggregationQuery,
@@ -19,15 +20,17 @@ const ChartContent = ({ chartType, parameters }: ChartContentProps) => {
   const chart: ChartProps = parameters?.chart;
   const dataFunctionParameters = parameters?.dataFetch;
 
-  const processedDataFunctionParameters = dataFunctionParameters?.map(
-    (props: any) => ({
+  const processedDataFunctionParameters =
+    dataFunctionParameters?.indexAndFields?.map((props: any) => ({
       ...props,
       filters: EmptyFilterSet,
-    }),
-  );
+    }));
 
   const { data, isFetching, isError } = useGetGetMultiIndexAggregationQuery(
-    processedDataFunctionParameters,
+    {
+      indexAndFields: processedDataFunctionParameters,
+      accessibility: dataFunctionParameters?.accessibility ?? Accessibility.ALL,
+    },
     { skip: !processedDataFunctionParameters },
   );
 
@@ -39,6 +42,7 @@ const ChartContent = ({ chartType, parameters }: ChartContentProps) => {
     return <ErrorCard message="Error fetching chart data" />;
   }
 
+  console.log('chart data', data);
   const chartComponent = createChart(chartType, {
     data: data === undefined ? [] : (data as HistogramDataArray),
     total: 1,