Refactor chart handling: integrate ChartContent component, replace MultiTrackHorizontalBarChart logic with modular approach, and update multi-index aggregation query.

Author: craigrbarnes

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

@@ -617,7 +617,7 @@ export const explorerApi = explorerTags.injectEndpoints({
       },
     }),
     getGetMultiIndexAggregation: builder.query<
-      ObjectIdQueryResponse,
+      Record<string, any>,
       MultiIndexFieldQueryRequest
     >({
       query: ({

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import { createChart } from '../charts/createChart';
+import { ChartProps } from '../charts';
+import {
+  HistogramDataArray,
+  useGetGetMultiIndexAggregationQuery,
+} from '@gen3/core';
+import { LoadingOverlay } from '@mantine/core';
+import { ErrorCard } from '../../index';
+
+interface ChartContentProps {
+  chartType?: string;
+  parameters?: Record<string, any>;
+  width?: string;
+}
+
+const ChartContent = ({ chartType, parameters }: ChartContentProps) => {
+  const chart: ChartProps = parameters?.chart;
+  const dataFunctionParameters = parameters?.dataFetch;
+  const { data, isFetching, isError } = useGetGetMultiIndexAggregationQuery(
+    dataFunctionParameters,
+  );
+
+  if (!chartType) {
+    return <div>No chart type specified</div>;
+  }
+
+  if (isError) {
+    return <ErrorCard message="Error fetching chart data" />;
+  }
+
+  const chartComponent = createChart(chartType, {
+    data: data === undefined ? [] : (data as HistogramDataArray),
+    total: 1,
+    valueType: chart.valueType ?? 'count',
+    label: chart.label,
+    showLegendInChart: chart.showLegendInChart,
+  });
+
+  return (
+    <div className="flex justify-center pt-2 items-center m-2">
+      <LoadingOverlay visible={isFetching} />
+      {chartComponent}
+    </div>
+  );
+};
+
+export default ChartContent;

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

@@ -9,7 +9,9 @@ import { MdFormatQuote, MdGroup, MdOutlineBarChart, MdOutlineSearch, } from 'rea
 import { FaGraduationCap, FaRegQuestionCircle, FaVideo } from 'react-icons/fa';
 import Gen3Link from '../../features/Navigation/Gen3Link';
 import TextContent, { ContentType } from './TextContent';
+import ChartContent from './ChartContent';
 import { Gen3AppConfigData } from '../../lib/content/types';
+import { ChartProps } from '../charts';
 
 export interface LandingPageContentProp {
   content: LandingPageProps;
@@ -27,6 +29,13 @@ export interface leftRightProps {
     readonly src: string;
     readonly alt: string;
   };
+  readonly chart?: {
+    readonly chartType: string;
+    parameters: {
+      readonly chart?: ChartProps;
+      readonly dataFetch: Record<string, any>;
+    };
+  };
 }
 export interface LandingPageProps extends Gen3AppConfigData {
   readonly topTitle?: string;
@@ -122,6 +131,16 @@ const LandingPageContent = ({ content }: LandingPageContentProp) => {
                   </div>
                 );
               }
+              if (obj.type === 'chart') {
+                return (
+                  <div key="chart" className="h-full relative">
+                    <ChartContent
+                      chartType={obj.chart?.chartType}
+                      parameters={obj.chart?.parameters}
+                    />
+                  </div>
+                );
+              }
             });
           return (
             <div key={index} className="flex mx-20">