@gen3/frontend 0.10.47 → 0.10.48

package/dist/esm/index.js

@@ -3,15 +3,15 @@ import * as React from 'react';
 import React__default, { useState, useCallback, useEffect, useContext, useRef, createElement, createContext, useMemo, forwardRef, useReducer } from 'react';
 import { twMerge } from 'tailwind-merge';
 import Image from 'next/image';
-import { toString, isArray, get, partial, omit, capitalize as capitalize$1 } from 'lodash';
+import { toString, capitalize as capitalize$1, isArray, get, partial, omit } from 'lodash';
 import Link from 'next/link';
-import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaCircle } from 'react-icons/fa';
+import { FaExternalLinkAlt, FaQuestion, FaExclamation, FaExclamationTriangle, FaUndo, FaPlus, FaChartPie, FaGraduationCap, FaRegQuestionCircle, FaVideo, FaCircle } from 'react-icons/fa';
 import { Icon, addCollection } from '@iconify/react';
-import { Tooltip, UnstyledButton, Menu, Text, Button, Box, Badge, Alert, Tabs, Accordion, Stack, Group, Drawer, CopyButton, LoadingOverlay, factory, useProps, useMantineTheme, getStyleObject, Paper, Checkbox, SegmentedControl, Loader, Grid, Card, Table, ColorSwatch, Modal, Switch, Divider, Autocomplete, TextInput, Title, Avatar, Select, Textarea, FileButton, Anchor, ThemeIcon, ActionIcon, NumberInput, RangeSlider, MultiSelect, Center, MantineProvider, createTheme, Highlight, List } from '@mantine/core';
+import { Tooltip, UnstyledButton, Menu, Text, Button, Box, Badge, Alert, Tabs, Accordion, Stack, Group, Drawer, CopyButton, LoadingOverlay, factory, useProps, useMantineTheme, getStyleObject, Paper, Checkbox, SegmentedControl, Loader, Grid, Card, Table, ColorSwatch, Modal, Switch, Divider, Autocomplete, TextInput, Title, Avatar, Select, Textarea, FileButton, Anchor, ThemeIcon, ActionIcon, NumberInput, RangeSlider, MultiSelect, Center, Flex, ScrollArea, rem, MantineProvider, createTheme, Highlight, List } from '@mantine/core';
 import { useRouter } from 'next/router';
 import { usePathname } from 'next/navigation';
-import { MdLogin, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdClose, MdInfo, MdAddCircle, MdRemoveCircle, MdFlip, MdOutlineArrowBack, MdOutlineArrowForward, MdOutlineArrowBackIos, MdOutlineArrowForwardIos, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete } from 'react-icons/md';
-import { useCoreDispatch, useLazyFetchUserDetailsQuery, useCoreSelector, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, selectUserDetails, useIsUserLoggedIn, fieldNameToTitle, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, useUserAuth, useGetAuthzMappingsQuery, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, GEN3_COMMONS_NAME, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetExternalLoginsQuery, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, useLazyGetCrosswalkDataQuery } from '@gen3/core';
+import { MdLogin, MdKeyboardDoubleArrowLeft, MdUndo, MdSearch, MdClose, MdInfo, MdExpandLess, MdExpandMore, MdFlip, MdAddCircle, MdRemoveCircle, MdOutlineArrowBack, MdOutlineArrowForward, MdOutlineArrowBackIos, MdOutlineArrowForwardIos, MdKeyboardArrowDown, MdKeyboardArrowUp, MdDownload, MdFormatQuote, MdOutlineSearch, MdOutlineBarChart, MdGroup, MdDelete } from 'react-icons/md';
+import { useCoreDispatch, useLazyFetchUserDetailsQuery, useCoreSelector, selectUserAuthStatus, GEN3_REDIRECT_URL, showModal, Modals, GEN3_FENCE_API, isAuthenticated, selectUserDetails, useIsUserLoggedIn, fieldNameToTitle, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, useUserAuth, useGetAuthzMappingsQuery, useGetLoginProvidersQuery, hideModal, useGetCSRFQuery, selectCurrentModal, updateCohortFilter, selectIndexedFilterByName, isOperationWithField, removeCohortFilter, trimFirstFieldNameToTitle, selectCohortFilters, handleOperation, selectCurrentCohortId, clearCohortFilters, selectCurrentCohortName, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, Accessibility, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, useGetAggsQuery, extractEnumFilterValue, useGetCountsQuery, selectHeadersWithCSRFToken, GEN3_GUPPY_API, GEN3_COMMONS_NAME, createAppStore, createGen3AppWithOwnStore, createAppApiForRTKQ, getGen3AppId, CoreProvider, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetExternalLoginsQuery, useGetDictionaryQuery, useGetProjectsDetailsQuery, useGetSubmissionsQuery, useLazyGetCrosswalkDataQuery } from '@gen3/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import 'swr';
 import { getCookie, deleteCookie, setCookie } from 'cookies-next';
@@ -25,7 +25,7 @@ import { useMantineReactTable, MantineReactTable } from 'mantine-react-table';
 import { JSONPath } from 'jsonpath-plus';
 import { LuClock, LuCircleSlash, LuUnlock, LuLock, LuRefreshCw } from 'react-icons/lu';
 import tinycolor from 'tinycolor2';
-import { useDisclosure, useDidUpdate, mergeRefs, useReducedMotion, useElementSize, useClipboard, useMediaQuery, useLocalStorage, useScrollIntoView } from '@mantine/hooks';
+import { useDisclosure, useDidUpdate, mergeRefs, useReducedMotion, useResizeObserver, useElementSize, useClipboard, useMediaQuery, useLocalStorage, useScrollIntoView } from '@mantine/hooks';
 import { FiDownload, FiMoreVertical } from 'react-icons/fi';
 import { TiArrowUnsorted, TiArrowSortedUp, TiArrowSortedDown } from 'react-icons/ti';
 import { flushSync } from 'react-dom';
@@ -47,6 +47,11 @@ import { IoMdArrowDropdown, IoMdRefresh, IoMdLogIn } from 'react-icons/io';
 import GraphiQL from 'graphiql';
 import fs from 'fs';
 import path from 'path';
+import { PersistGate } from 'redux-persist/integration/react';
+import { persistReducer, persistStore } from 'redux-persist';
+import { combineReducers } from 'redux';
+import storage from 'redux-persist/lib/storage';
+import { createSlice } from '@reduxjs/toolkit';
 import { ModalsProvider } from '@mantine/modals';
 import dynamic from 'next/dynamic';
 import { useForm } from '@mantine/form';
@@ -647,7 +652,9 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
     return /*#__PURE__*/ jsx("div", {
         children: /*#__PURE__*/ jsx("header", {
             className: extractClassName('root', mergedClassnames),
-            children: /*#__PURE__*/ jsxs("nav", {
+            children: /*#__PURE__*/ jsxs("div", {
+                role: "navigation",
+                "aria-label": "top most navigation",
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
@@ -793,6 +800,8 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
         router.pathname
     ]);
     return /*#__PURE__*/ jsxs("div", {
+        role: "navigation",
+        "aria-label": "main site navigation",
         className: extractClassName('root', mergedClassnames),
         children: [
             /*#__PURE__*/ jsx("div", {
@@ -1248,7 +1257,7 @@ class DiscoveryRowRendererFactory {
     }
     static getRowRenderer(type, functionName) {
         if (!(type in DiscoveryRowRendererFactory.getInstance().RowRendererCatalog)) {
-            console.log('No row renderer found for type: ', type);
+            console.warn('No row renderer found for type: ', type);
             return defaultRowRenderer;
         }
         return DiscoveryRowRendererFactory.getInstance().RowRendererCatalog[type][functionName] ?? defaultRowRenderer;
@@ -1468,6 +1477,15 @@ const focusStyles = 'focus-visible:outline-none focus-visible:ring-offset-2 focu
 const stripTrailingSlash = (str)=>{
     return str.endsWith('/') ? str.slice(0, -1) : str;
 };
+const SPECIAL_CASE_FIELDS = {
+    icd_10_code: 'ICD-10 Code'
+};
+const toDisplayName = (field)=>{
+    const parsed = field.split('.');
+    const fieldName = parsed.at(-1);
+    if (!fieldName) return 'NotSet';
+    return fieldName.split('_').map((w)=>capitalize$1(w)).join(' ');
+};
 
 const isArrayOfString = (value)=>{
     return Array.isArray(value) && value.every((element)=>typeof element === 'string');
@@ -3082,18 +3100,18 @@ const defaultStatisticRenderer = ({ value, label, ...props })=>{
         ]
     });
 };
-const DefaultRendererCatalog$1 = {
+const DefaultRendererCatalog$2 = {
     string: {
         default: defaultStatisticRenderer
     }
 };
-let instance$3;
+let instance$4;
 const StatisticRendererFactory = ()=>{
-    if (!instance$3) {
-        instance$3 = new RenderFactoryTypedInstance();
-        instance$3.registerRendererCatalog(DefaultRendererCatalog$1);
+    if (!instance$4) {
+        instance$4 = new RenderFactoryTypedInstance();
+        instance$4.registerRendererCatalog(DefaultRendererCatalog$2);
     }
-    return instance$3;
+    return instance$4;
 };
 
 const BuildSummaryStatisticPanel = (summaries = [])=>{
@@ -3159,11 +3177,10 @@ const processRangeKeyLabel = (key)=>{
 /**
  * Computes the row span for each item in the charts object.
  *
- * @param { Record<string, SummaryChart>} charts - The charts object containing summary charts.
+ * @param { number } numItems - The charts object containing summary charts.
  * @param {number} [numCols=3] - The number of columns per row.
  * @returns {number[]} - An array of row spans for each item in the charts object.
- */ const computeRowSpan = (charts, numCols = 3)=>{
-    const numItems = Object.keys(charts).length;
+ */ const computeRowSpan = (numItems, numCols = 3)=>{
     // compute the row span for the last row
     const numLastRow = numItems % numCols;
     let spans = new Array(numItems - numLastRow).fill(Math.floor(12 / numCols));
@@ -3172,24 +3189,15 @@ const processRangeKeyLabel = (key)=>{
 };
 
 const ReactECharts = ({ option, style, settings, loading, theme })=>{
-    const chartRef = useRef(null);
+    const [chartRoot, setChartRoot] = useState(undefined);
+    const [chartRef, rect] = useResizeObserver();
     useDeepCompareEffect(()=>{
         // Initialize chart
         let chart;
         if (chartRef.current !== null) {
             chart = init(chartRef.current, theme);
         }
-        // Add chart resize listener
-        // ResizeObserver is leading to a bit janky UX
-        function resizeChart(event) {
-            chart?.resize();
-        }
-        window.addEventListener('resize', resizeChart);
-        // Return cleanup function
-        return ()=>{
-            chart?.dispose();
-            window.removeEventListener('resize', resizeChart);
-        };
+        setChartRoot(chart);
     }, [
         theme
     ]);
@@ -3214,7 +3222,14 @@ const ReactECharts = ({ option, style, settings, loading, theme })=>{
     }, [
         loading
     ]);
+    useDeepCompareEffect(()=>{
+        chartRoot?.resize();
+    }, [
+        rect
+    ]);
     return /*#__PURE__*/ jsx("div", {
+        role: "figure",
+        "aria-label": "Data Chart",
         ref: chartRef,
         style: {
             width: '100%',
@@ -3470,13 +3485,13 @@ const DefaultChartCatalog = {
         donut: DonutChart
     }
 };
-let instance$2 = undefined;
+let instance$3 = undefined;
 const ChartRendererFactory = ()=>{
-    if (!instance$2) {
-        instance$2 = new RenderFactoryTypedInstance();
-        instance$2.registerRendererCatalog(DefaultChartCatalog);
+    if (!instance$3) {
+        instance$3 = new RenderFactoryTypedInstance();
+        instance$3.registerRendererCatalog(DefaultChartCatalog);
     }
-    return instance$2;
+    return instance$3;
 };
 
 /** createChart selects which type of chart element to create depending on the
@@ -3504,9 +3519,14 @@ const chartColors = [
     '#ea7ccc'
 ];
 //The Charts component maps the data from ChartsProps into a grid of createChart() ReactNodes
-const Charts = ({ index, charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style = 'tile', showLegends = false })=>{
-    const spans = computeRowSpan(charts, numCols);
+const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style = 'tile', showLegends = false })=>{
+    const spans = computeRowSpan(Object.keys(charts).length, numCols);
     const chartCard = (field, indexNum)=>{
+        if (!(field in data)) {
+            return /*#__PURE__*/ jsx(ErrorCard, {
+                message: `${field} not found in data`
+            });
+        }
         const LegendRows = ({ data })=>{
             const moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
             const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
@@ -3646,7 +3666,7 @@ const Charts = ({ index, charts, data, counts, isSuccess, numCols = DEFAULT_COLS
                                 td: 'p-1 leading-3',
                                 th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
                                 thead: 'border-b',
-                                tbody: 'before:content-[\'\'] before:block before:p-1'
+                                tbody: "before:content-[''] before:block before:p-1"
                             },
                             children: [
                                 /*#__PURE__*/ jsx(Table.Thead, {
@@ -3679,7 +3699,7 @@ const Charts = ({ index, charts, data, counts, isSuccess, numCols = DEFAULT_COLS
                     })
                 ]
             })
-        }, `${index}-${indexNum}-charts-${field}-col`);
+        }, `${indexNum}-charts-${field}-col`);
     };
     return /*#__PURE__*/ jsx(Grid, {
         className: "w-full",
@@ -3931,10 +3951,11 @@ const ChartsPanel = ({ config })=>{
         const chartDataTemp = {};
         config?.charts?.forEach((chart, index)=>{
             chartDataTemp[`testName${index}`] = {
+                //TODO use from data
                 title: chart.title,
                 chartType: chart.chartType,
                 valueType: chart.valueType,
-                dataLabels: chart.dataLabels //TODO get from code and not from setup
+                dataLabels: chart.dataLabels
             };
         });
         return chartDataTemp;
@@ -3979,10 +4000,9 @@ const ChartsPanel = ({ config })=>{
                             children: /*#__PURE__*/ jsx(Charts, {
                                 showLegends: showLegends,
                                 style: "box",
-                                index: 'subjectsCharts',
                                 charts: chartsProperties(),
                                 data: {
-                                    'testName0': [
+                                    testName0: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4004,7 +4024,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 0
                                         }
                                     ],
-                                    'testName1': [
+                                    testName1: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4018,7 +4038,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 3
                                         }
                                     ],
-                                    'testName2': [
+                                    testName2: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4032,7 +4052,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 3
                                         }
                                     ],
-                                    'testName3': [
+                                    testName3: [
                                         {
                                             key: 'a',
                                             count: 1
@@ -5927,7 +5947,7 @@ const LoginPanel = (loginConfig)=>{
                     /*#__PURE__*/ jsx(LoginProvidersPanel, {
                         handleLoginSelected: handleFenceLoginSelected
                     }),
-                    loginConfig?.showCredentialsLogin && /*#__PURE__*/ jsx(CredentialsLogin, {
+                    loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
                     bottomContent?.map((content, index)=>content?.email ? /*#__PURE__*/ createElement(ContactWithEmailContent, {
@@ -6409,7 +6429,7 @@ const processRangeData = (data)=>{
     }
 };
 // Process facets to determine if they are enum, exact, or range
-const classifyFacets = (data, index, fieldMapping, facetDefinitionsFromConfig)=>{
+const classifyFacets = (data, index, fieldMapping = [], facetDefinitionsFromConfig = {})=>{
     if (typeof data !== 'object' || data === null) return {};
     // otherwise enum facet
     return Object.entries(data).reduce((acc, [fieldKey, value])=>{
@@ -6417,7 +6437,7 @@ const classifyFacets = (data, index, fieldMapping, facetDefinitionsFromConfig)=>
         const dataField = fieldKey.split('.')?.slice(-1)[0] ?? fieldKey;
         // check if range facet
         const type = value.length === 1 && isArray(value[0].key) ? 'range' : 'enum';
-        const facetName = fieldMapping.find((x)=>x.field === fieldKey)?.name ?? undefined;
+        const facetName = fieldMapping.find((x)=>x.field === fieldKey)?.name ?? fieldNameToTitle(fieldKey);
         const facetDef = facetDefinitionsFromConfig[fieldKey] ?? {};
         return {
             ...acc,
@@ -6428,7 +6448,7 @@ const classifyFacets = (data, index, fieldMapping, facetDefinitionsFromConfig)=>
                 type: facetDef.type ?? type,
                 index: index,
                 description: facetDef.description ?? 'Not Available',
-                label: facetDef.description ?? facetName,
+                label: facetDef.label ?? facetName,
                 // assumption is that the initial data has the min and max values
                 range: facetDef.range ?? type === 'range' ? {
                     minimum: Math.floor(Number(value[0].key[0])),
@@ -6470,7 +6490,10 @@ const buildNested = (field, leafOperand)=>{
     };
 };
 const useGetFacetFilters = (index, field)=>{
-    return useCoreSelector((state)=>selectIndexedFilterByName(state, index, field));
+    return useCoreSelector((state)=>selectIndexedFilterByName(state, index, field) ?? {
+            operator: 'and',
+            operands: []
+        });
 };
 /**
  * Given an operation, determine if range is open or closed and extract
@@ -6529,47 +6552,157 @@ inline-flex
 items-center
 hover:text-primary-lightest
 `;
-const controlsIconStyle = 'text-primary-contrast-darker hover:text-primary-lighter';
+const controlsIconStyle = 'text-secondary-contrast hover:text-secondary-lighter';
 const FacetText = tw.div`
-text-secondary-contrast font-heading font-semibold text-[1.25em] break-words py-2
+text-secondary-contrast font-heading font-semibold text-sm break-words
 `;
 const FacetHeader = tw.div`
-flex items-start justify-between flex-nowrap bg-secondary px-1.5
+flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5
 `;
 
-const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
-    const [showTooltip, setShowTooltip] = useState(false);
-    return /*#__PURE__*/ jsx(Tooltip, {
-        label: label,
-        disabled: !showTooltip,
-        position: "top-start",
-        offset: 5,
-        multiline: true,
-        withArrow: true,
-        arrowOffset: 20,
-        classNames: {
-            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
-            arrow: 'bg-base-min bg-opacity-90'
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            className: `${className} truncate ... `,
-            ref: (el)=>{
-                if (el) {
-                    if (el.clientWidth < el.scrollWidth) {
-                        setShowTooltip(true);
-                    } else {
-                        setShowTooltip(false);
-                    }
-                }
-            },
-            children: children
-        })
+/**
+ * Component for the common controls on the header of different type facet cards
+ * @param field - filter this FacetCard manages
+ * @param description - describes information about the facet
+ * @param hooks - object defining the hooks required by this facet component
+ * @param facetName - name of the Facet in human-readable form
+ * @param showSearch - if the search icon show be displayed
+ * @param showFlip - if the flip icon should be displayed
+ * @param showClearSelection - if the clear selection icon should be displayed
+ * @param isFacetView - if the facet selection view (and not the chart view) is displayed
+ * @param toggleFlip - function to switch the facet/chart view
+ * @param toggleSearch - function to switch if the search bart is displayed
+ * @param dismissCallback - if facet can be removed, supply a function which will ensure the "dismiss" control will be visible
+ * @param header - object containing the display components to use for the header
+ */ const FacetControlsHeader = ({ field, description, hooks, facetName, showSearch = false, showFlip = false, showClearSelection = true, isFacetView = false, toggleFlip = undefined, toggleSearch = undefined, dismissCallback = undefined, header = {
+    Panel: FacetHeader,
+    Label: FacetText,
+    iconStyle: controlsIconStyle
+} })=>{
+    const clearFilters = hooks.useClearFilter();
+    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
+    const toggleExpandFilter = hooks?.useToggleExpandFilter && hooks.useToggleExpandFilter();
+    useEffect(()=>{
+        // Initialize filter as expanded
+        if (isFilterExpanded === undefined && toggleExpandFilter) {
+            toggleExpandFilter(field, true);
+        }
+    }, [
+        field,
+        isFilterExpanded,
+        toggleExpandFilter
+    ]);
+    return /*#__PURE__*/ jsxs(header.Panel, {
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-row items-center",
+                children: [
+                    toggleExpandFilter && /*#__PURE__*/ jsx(Tooltip, {
+                        label: isFilterExpanded ? 'Collapse card' : 'Expand card',
+                        children: /*#__PURE__*/ jsx(ActionIcon, {
+                            variant: "subtle",
+                            onClick: ()=>toggleExpandFilter(field, !isFilterExpanded),
+                            className: "mt-0.5 -ml-1.5",
+                            "aria-expanded": isFilterExpanded,
+                            "aria-label": isFilterExpanded ? 'Collapse card' : 'Expand card',
+                            children: isFilterExpanded ? /*#__PURE__*/ jsx(MdExpandLess, {
+                                size: "3em",
+                                color: "accent.4",
+                                "aria-hidden": "true"
+                            }) : /*#__PURE__*/ jsx(MdExpandMore, {
+                                size: "3em",
+                                color: "accent.4",
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Tooltip, {
+                        label: description,
+                        position: "bottom-start",
+                        multiline: true,
+                        w: 220,
+                        withArrow: true,
+                        transitionProps: {
+                            duration: 200,
+                            transition: 'fade'
+                        },
+                        disabled: !description,
+                        children: /*#__PURE__*/ jsx(header.Label, {
+                            children: facetName ? facetName : fieldNameToTitle(field)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-row",
+                children: [
+                    showSearch ? /*#__PURE__*/ jsx(Tooltip, {
+                        label: "Search values",
+                        children: /*#__PURE__*/ jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                if (toggleExpandFilter) toggleExpandFilter(field, true);
+                                if (toggleSearch) toggleSearch();
+                            },
+                            "aria-label": "Search",
+                            children: /*#__PURE__*/ jsx(MdSearch, {
+                                size: "1.45em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }) : null,
+                    showFlip ? /*#__PURE__*/ jsx(Tooltip, {
+                        label: isFacetView ? 'Chart view' : 'Selection view',
+                        children: /*#__PURE__*/ jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                if (toggleExpandFilter) toggleExpandFilter(field, true);
+                                if (toggleFlip) toggleFlip();
+                            },
+                            "aria-pressed": !isFacetView,
+                            "aria-label": isFacetView ? 'Chart view' : 'Selection view',
+                            children: /*#__PURE__*/ jsx(MdFlip, {
+                                size: "1.45em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }) : null,
+                    showClearSelection && /*#__PURE__*/ jsx(Tooltip, {
+                        label: "Clear selection",
+                        children: /*#__PURE__*/ jsx(FacetIconButton, {
+                            onClick: ()=>clearFilters(field),
+                            "aria-label": "clear selection",
+                            children: /*#__PURE__*/ jsx(FaUndo, {
+                                size: "1.0em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    dismissCallback ? /*#__PURE__*/ jsx(Tooltip, {
+                        label: "Remove the facet",
+                        children: /*#__PURE__*/ jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                dismissCallback(field);
+                            },
+                            "aria-label": "Remove the facet",
+                            children: /*#__PURE__*/ jsx(MdClose, {
+                                size: "1.25em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }) : null
+                ]
+            })
+        ]
     });
 };
 
 const DEFAULT_VISIBLE_ITEMS = 6;
 const DEFAULT_MINIMUM = 0;
 const DEFAULT_MAXIMUM = 100;
+const BAD_DATA_MESSAGE = 'No data for this field';
 
 const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
     if (sortTypeAndDirection.type === 'alpha') {
@@ -6669,13 +6802,43 @@ const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
     });
 };
 
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = useState(false);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: label,
+        disabled: !showTooltip,
+        position: "top-start",
+        offset: 5,
+        multiline: true,
+        withArrow: true,
+        arrowOffset: 20,
+        classNames: {
+            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
+            arrow: 'bg-base-min bg-opacity-90'
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${className} truncate ... `,
+            ref: (el)=>{
+                if (el) {
+                    if (el.clientWidth < el.scrollWidth) {
+                        setShowTooltip(true);
+                    } else {
+                        setShowTooltip(false);
+                    }
+                }
+            },
+            children: children
+        })
+    });
+};
+
 const ExpanderLabel = tw.div`
 text-accent-content-darker
 p-1
 font-bold
 cursor-pointer
 text-xs
-font-content-noto
+font-content
 `;
 /**
  * Component which manages the compact/expanded state of a FacetCard
@@ -6684,7 +6847,7 @@ font-content-noto
  * @param onShowChanged - callback to call when the expand/compact button is clicked
  */ const FacetExpander = ({ remainingValues, isGroupExpanded, onShowChanged })=>{
     return /*#__PURE__*/ jsx("div", {
-        className: "mt-3 flex flex-row justify-end border-t-2 p-1.5",
+        className: `mt-3 flex flex-row justify-end ${remainingValues > 0 && 'border-t-2'} p-1.5`,
         children: remainingValues > 0 && !isGroupExpanded ? /*#__PURE__*/ jsx("button", {
             onClick: ()=>onShowChanged(!isGroupExpanded),
             "data-testid": "plus-icon",
@@ -6693,7 +6856,7 @@ font-content-noto
                 children: [
                     /*#__PURE__*/ jsx(MdAddCircle, {
                         className: "text-accent",
-                        size: "1.5em",
+                        size: "1rem",
                         "aria-hidden": "true"
                     }, "show-more"),
                     /*#__PURE__*/ jsxs(ExpanderLabel, {
@@ -6712,7 +6875,7 @@ font-content-noto
                 children: [
                     /*#__PURE__*/ jsx(MdRemoveCircle, {
                         className: "text-accent",
-                        size: "1.5em",
+                        size: "1rem",
                         onClick: ()=>onShowChanged(!isGroupExpanded),
                         "aria-hidden": "true"
                     }, "show-less"),
@@ -6725,35 +6888,32 @@ font-content-noto
     });
 };
 
-const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, startShowingData = true, dismissCallback = undefined, width = undefined, header = {
-    Panel: FacetHeader,
-    Label: FacetText,
-    iconStyle: controlsIconStyle
-} })=>{
+const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true })=>{
     const [isGroupExpanded, setIsGroupExpanded] = useState(false);
-    const [isSearching, setIsSearching] = useState(false);
+    const cardRef = useRef(null);
+    const searchInputRef = useRef(null);
     const [searchTerm, setSearchTerm] = useState('');
+    const { data, enumFilters, isSuccess, error } = hooks.useGetFacetData(field);
+    const [selectedEnums, setSelectedEnums] = useState(enumFilters ?? []);
+    const totalCount = hooks?.useTotalCounts ? hooks.useTotalCounts() : 1;
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
+    const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
     const [sortedData, setSortedData] = useState({});
     const [sortType, setSortType] = useState({
         type: 'alpha',
         direction: 'asc'
     });
-    const [isFacetView, setIsFacetView] = useState(startShowingData);
-    const { data, enumFilters, isSuccess } = dataHooks.useGetFacetData(field);
-    const cardRef = useRef(null);
-    const [selectedEnums, setSelectedEnums] = useState(enumFilters ?? []);
-    const searchInputRef = useRef(null);
-    const totalCount = 1000;
-    // TODO Determine if total count is needed
-    // const totalCount = dataHooks.useTotalCounts();
-    const clearFilters = dataHooks.useClearFilter();
-    const updateFacetFilters = dataHooks.useUpdateFacetFilters();
     useEffect(()=>{
         if (isSearching) {
             searchInputRef?.current?.focus();
+        } else if (searchTerm.length > 0) {
+            setSearchTerm('');
         }
     }, [
-        isSearching
+        isSearching,
+        searchTerm
     ]);
     useDeepCompareEffect(()=>{
         setSelectedEnums(enumFilters ?? []);
@@ -6780,13 +6940,6 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
             updateFacetEnum(field, updated ?? [], updateFacetFilters, clearFilters);
         }
     };
-    const toggleSearch = ()=>{
-        setIsSearching(!isSearching);
-        setSearchTerm('');
-    };
-    const toggleFlip = ()=>{
-        setIsFacetView(!isFacetView);
-    };
     const [facetChartData, setFacetChartData] = useState({
         filteredData: [],
         filteredDataObj: {},
@@ -6799,9 +6952,9 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
     const calcCardStyle = useDeepCompareCallback((remainingValues)=>{
         if (isGroupExpanded) {
             const cardHeight = remainingValues > 16 ? 96 : remainingValues > 0 ? Math.min(96, remainingValues * 5 + 40) : 24;
-            return `flex-none  h-${cardHeight} overflow-y-scroll `;
+            return `flex-none h-${cardHeight} overflow-y-scroll pl-3`;
         } else {
-            return 'overflow-hidden h-auto';
+            return 'overflow-hidden h-auto mr-3 pl-3';
         }
     }, [
         isGroupExpanded
@@ -6897,68 +7050,14 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
         return null; // nothing to render if visibleItems == 0
     }
     return /*#__PURE__*/ jsxs("div", {
-        className: `flex flex-col ${width ? width : 'mx-1'} bg-base-max relative shadow-lg border-base-lighter border-1 rounded-b-md text-xs transition`,
-        id: field,
+        className: showFilters ? 'h-full' : 'h-0 invisible',
+        "aria-hidden": !showFilters,
         children: [
-            /*#__PURE__*/ jsx("div", {
-                children: /*#__PURE__*/ jsxs(header.Panel, {
-                    children: [
-                        /*#__PURE__*/ jsx(Tooltip, {
-                            label: description,
-                            position: "bottom-start",
-                            multiline: true,
-                            w: 220,
-                            withArrow: true,
-                            disabled: !description,
-                            children: /*#__PURE__*/ jsx(header.Label, {
-                                children: facetName ? facetName : fieldNameToTitle(field)
-                            })
-                        }),
-                        /*#__PURE__*/ jsxs("div", {
-                            className: "flex flex-row",
-                            children: [
-                                showSearch ? /*#__PURE__*/ jsx(FacetIconButton, {
-                                    onClick: toggleSearch,
-                                    "aria-label": "Search",
-                                    children: /*#__PURE__*/ jsx(MdSearch, {
-                                        size: "1.45em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null,
-                                showFlip ? /*#__PURE__*/ jsx(FacetIconButton, {
-                                    onClick: toggleFlip,
-                                    "aria-label": "Flip between form and chart",
-                                    children: /*#__PURE__*/ jsx(MdFlip, {
-                                        size: "1.45em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null,
-                                /*#__PURE__*/ jsx(FacetIconButton, {
-                                    onClick: ()=>clearFilters(field),
-                                    "aria-label": "clear selection",
-                                    children: /*#__PURE__*/ jsx(FaUndo, {
-                                        size: "1.25em",
-                                        className: header.iconStyle
-                                    })
-                                }),
-                                dismissCallback ? /*#__PURE__*/ jsx(FacetIconButton, {
-                                    onClick: ()=>{
-                                        clearFilters(field);
-                                        dismissCallback(field);
-                                    },
-                                    "aria-label": "Remove the facet",
-                                    children: /*#__PURE__*/ jsx(MdClose, {
-                                        size: "1.25em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxs("div", {
-                className: "h-full",
+            ' ',
+            isSuccess && error ? /*#__PURE__*/ jsx("div", {
+                className: "m-4 font-content pb-2",
+                children: BAD_DATA_MESSAGE
+            }) : /*#__PURE__*/ jsxs(Fragment, {
                 children: [
                     isSearching && /*#__PURE__*/ jsx(TextInput, {
                         value: searchTerm,
@@ -6984,12 +7083,12 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                 children: [
                                     /*#__PURE__*/ jsxs("div", {
                                         children: [
-                                            /*#__PURE__*/ jsx(FacetSortPanel, {
+                                            showSorting ? /*#__PURE__*/ jsx(FacetSortPanel, {
                                                 sortType: sortType,
                                                 valueLabel: valueLabel,
                                                 setSort: setSortType,
                                                 field: facetName ? facetName : fieldNameToTitle(field)
-                                            }),
+                                            }) : false,
                                             /*#__PURE__*/ jsxs("div", {
                                                 className: facetChartData.cardStyle,
                                                 role: "group",
@@ -7000,14 +7099,14 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                         "data-testid": "loading-spinner"
                                                     }),
                                                     facetChartData.filteredData.length == 0 ? /*#__PURE__*/ jsx("div", {
-                                                        className: "mx-4 font-content",
-                                                        children: "No data for this field"
+                                                        className: "mx-4 font-content text-sm",
+                                                        children: BAD_DATA_MESSAGE
                                                     }) : isSuccess ? !sortedData || Object.entries(sortedData).length === 0 ? /*#__PURE__*/ jsx("div", {
                                                         className: "mx-4",
                                                         children: "No results found"
                                                     }) : Object.entries(sortedData ?? {}).map(([value, count])=>{
                                                         return /*#__PURE__*/ jsxs("div", {
-                                                            className: "flex flex-row items-center gap-x-1 px-2 ",
+                                                            className: "flex flex-row items-center gap-x-1",
                                                             children: [
                                                                 /*#__PURE__*/ jsx("div", {
                                                                     className: "flex-none",
@@ -7015,11 +7114,12 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                                         "data-testid": `checkbox-${value}`,
                                                                         value: value,
                                                                         size: "xs",
-                                                                        color: "accent",
+                                                                        color: "accent.4",
                                                                         onChange: (e)=>handleChange(e.currentTarget.value, e.currentTarget.checked),
                                                                         "aria-label": `${value}`,
                                                                         classNames: {
-                                                                            input: 'bg-base hover:bg-accent-darker'
+                                                                            input: 'hover:bg-accent-darker',
+                                                                            label: 'text-xs font-normal font-content'
                                                                         },
                                                                         checked: selectedEnums && selectedEnums.includes(value)
                                                                     })
@@ -7027,16 +7127,16 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                                 /*#__PURE__*/ jsx(OverflowTooltippedLabel, {
                                                                     label: value,
                                                                     children: /*#__PURE__*/ jsx("span", {
-                                                                        className: "font-content",
+                                                                        className: "text-xs font-normal font-content",
                                                                         children: value
                                                                     })
                                                                 }),
                                                                 /*#__PURE__*/ jsx("div", {
-                                                                    className: "flex-none text-right w-14 font-content",
+                                                                    className: "flex-none text-right w-14 text-xs font-normal font-content",
                                                                     children: count.toLocaleString()
                                                                 }),
                                                                 showPercent ? /*#__PURE__*/ jsxs("div", {
-                                                                    className: "flex-none text-right w-18 font-content",
+                                                                    className: "flex-none text-right w-18 text-xs font-normal font-content",
                                                                     children: [
                                                                         "(",
                                                                         (count / totalCount * 100).toFixed(2),
@@ -7055,6 +7155,7 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                                         className: "flex-none",
                                                                         children: /*#__PURE__*/ jsx(Checkbox, {
                                                                             size: "xs",
+                                                                            radius: "xs",
                                                                             className: "bg-base-lightest text-primary-contrast-lightest hover:bg-base-darkest hover:text-base-contrast-darkest"
                                                                         })
                                                                     }),
@@ -7072,11 +7173,11 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsx(FacetExpander, {
+                                    facetChartData.remainingValues > 0 ? /*#__PURE__*/ jsx(FacetExpander, {
                                         remainingValues: facetChartData.remainingValues,
                                         isGroupExpanded: isGroupExpanded,
                                         onShowChanged: setIsGroupExpanded
-                                    })
+                                    }) : null
                                 ]
                             }),
                             /*#__PURE__*/ jsx("div", {
@@ -7103,6 +7204,52 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
     });
 };
 
+const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, startShowingData = true, dismissCallback = undefined, width = undefined, header = {
+    Panel: FacetHeader,
+    Label: FacetText,
+    iconStyle: controlsIconStyle
+} })=>{
+    const [isSearching, setIsSearching] = useState(false);
+    const [isFacetView, setIsFacetView] = useState(startShowingData);
+    const toggleSearch = ()=>{
+        setIsSearching(!isSearching);
+    };
+    const toggleFlip = ()=>{
+        setIsFacetView(!isFacetView);
+    };
+    return /*#__PURE__*/ jsxs("div", {
+        className: `flex flex-col ${width ? width : 'mx-1'} bg-base-max relative shadow-lg border-base-lighter border-1 rounded-b-md text-xs transition`,
+        id: field,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(FacetControlsHeader, {
+                    field: field,
+                    description: description,
+                    hooks: hooks,
+                    facetName: facetName,
+                    showSearch: showSearch,
+                    showFlip: showFlip,
+                    isFacetView: isFacetView,
+                    toggleFlip: toggleFlip,
+                    toggleSearch: toggleSearch,
+                    dismissCallback: dismissCallback,
+                    header: header
+                })
+            }),
+            /*#__PURE__*/ jsx(FacetEnumList, {
+                field: field,
+                facetName: facetName,
+                valueLabel: valueLabel,
+                hooks: hooks,
+                isFacetView: isFacetView,
+                isSearching: isSearching,
+                hideIfEmpty: hideIfEmpty,
+                showPercent: showPercent
+            })
+        ]
+    });
+};
+
 const createBucket = (field, lower, upper)=>({
         operator: 'and',
         operands: [
@@ -7118,17 +7265,17 @@ const createBucket = (field, lower, upper)=>({
             }
         ]
     });
-const RangeFacet = ({ field, dataHooks, valueLabel, description, facetName, minimum = DEFAULT_MINIMUM, maximum = DEFAULT_MAXIMUM, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = true, startShowingData = true, dismissCallback = undefined, width = undefined, header = {
+const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum = DEFAULT_MINIMUM, maximum = DEFAULT_MAXIMUM, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = true, startShowingData = true, dismissCallback = undefined, width = undefined, header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
 } })=>{
-    const { data, rangeFilters, isSuccess } = dataHooks.useGetFacetData(field);
+    const { data, rangeFilters, isSuccess } = hooks.useGetFacetData(field);
     const [minMaxValue, setMinMaxValue] = React__default.useState({
         from: minimum,
         to: maximum
     });
-    const clearRangeFilterFromCohort = dataHooks.useClearFilter();
+    const clearRangeFilterFromCohort = hooks.useClearFilter();
     const clearFilters = useCallback(()=>{
         setMinMaxValue({
             from: minimum,
@@ -7141,7 +7288,7 @@ const RangeFacet = ({ field, dataHooks, valueLabel, description, facetName, mini
         maximum,
         minimum
     ]);
-    const updateRangeFilter = dataHooks.useUpdateFacetFilters();
+    const updateRangeFilter = hooks.useUpdateFacetFilters();
     const updateFilters = useCallback((from, to)=>{
         updateRangeFilter(field, createBucket(field, from, to));
         setMinMaxValue({
@@ -7275,13 +7422,13 @@ const instanceOfIncludesExcludes$1 = (op)=>[
  * @param width - width of the facet
  * @param hooks - hooks to use for the facet
  * @category Facets
- */ const MultiSelectValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, dataHooks })=>{
+ */ const MultiSelectValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, hooks })=>{
     const [selectedValues, setSelectedValues] = useState([]); // Handle the state of the TextInput
-    const clearFilters = dataHooks.useClearFilter();
-    const updateFacetFilters = dataHooks.useUpdateFacetFilters();
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
     const facetTitle = facetName ? facetName : trimFirstFieldNameToTitle(field, true);
-    const facetValue = dataHooks.useGetFacetFilters(field);
-    const facetDataValues = dataHooks.useGetFacetData(field);
+    const facetValue = hooks.useGetFacetFilters(field);
+    const facetDataValues = hooks.useGetFacetData(field);
     const dataValues = useMemo(()=>{
         if (facetDataValues?.data) {
             return Object.keys(facetDataValues.data).map((key)=>{
@@ -7426,12 +7573,12 @@ const instanceOfIncludesExcludes = (op)=>[
  * @param width - width of the facet
  * @param hooks - hooks to use for the facet
  * @category Facets
- */ const ExactValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, dataHooks })=>{
+ */ const ExactValueFacet = ({ field, description, facetName = undefined, dismissCallback = undefined, width = undefined, hooks })=>{
     const [textValue, setTextValue] = useState(''); // Handle the state of the TextInput
-    const clearFilters = dataHooks.useClearFilter();
-    const updateFacetFilters = dataHooks.useUpdateFacetFilters();
+    const clearFilters = hooks.useClearFilter();
+    const updateFacetFilters = hooks.useUpdateFacetFilters();
     const facetTitle = facetName ? facetName : trimFirstFieldNameToTitle(field, true);
-    const facetValue = dataHooks.useGetFacetFilters(field);
+    const facetValue = hooks.useGetFacetFilters(field);
     const textValues = useMemo(()=>extractValues(facetValue), [
         facetValue
     ]);
@@ -7582,7 +7729,7 @@ const createFacetCard = (facetDefinition, valueLabel, dataFunctions, idPrefix, d
                 description: description,
                 hideIfEmpty: hideIfEmpty,
                 width: width,
-                dataHooks: dataFunctions,
+                hooks: dataFunctions,
                 showPercent: false
             }, `${idPrefix}-enum-${field}`),
             range: /*#__PURE__*/ jsx(RangeFacet, {
@@ -7592,7 +7739,7 @@ const createFacetCard = (facetDefinition, valueLabel, dataFunctions, idPrefix, d
                 description: description,
                 hideIfEmpty: hideIfEmpty,
                 width: width,
-                dataHooks: dataFunctions,
+                hooks: dataFunctions,
                 minimum: facetDefinition.range?.minimum,
                 maximum: facetDefinition.range?.maximum
             }, `${idPrefix}-range-${field}`),
@@ -7602,7 +7749,7 @@ const createFacetCard = (facetDefinition, valueLabel, dataFunctions, idPrefix, d
                 description: description,
                 hideIfEmpty: hideIfEmpty,
                 width: width,
-                dataHooks: dataFunctions
+                hooks: dataFunctions
             }, `${idPrefix}-exact-${field}`),
             multiselect: /*#__PURE__*/ jsx(MultiSelectValueFacet, {
                 field: field,
@@ -7610,7 +7757,7 @@ const createFacetCard = (facetDefinition, valueLabel, dataFunctions, idPrefix, d
                 description: description,
                 hideIfEmpty: hideIfEmpty,
                 width: width,
-                dataHooks: dataFunctions
+                hooks: dataFunctions
             }, `${idPrefix}-exact-${field}`)
         }[type]
     }, `${idPrefix}-enum-${field}`);
@@ -7661,7 +7808,7 @@ const QueryFieldLabel = tw.div`
 bg-accent-cool-lightest
 text-base-darkest
 uppercase
-px-1
+px-2 pl-1
 border-primary-darkest
 border-r-[1.5px]
 flex
@@ -7762,7 +7909,7 @@ const IncludeExcludeQueryElement = ({ index, field, path, operator, operands })=
                             color: "accent.5",
                             size: "md",
                             pr: 0,
-                            className: "normal-case items-center max-w-[162px] cursor-pointer pl-0 pr-0 hover:bg-accent-darker",
+                            className: "normal-case items-center max-w-[162px] cursor-pointer pl-2 pr-0 hover:bg-accent-darker",
                             rightSection: /*#__PURE__*/ jsx(RemoveButton, {
                                 value: value
                             }),
@@ -8207,7 +8354,7 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                 setExpandedState
             ],
             children: /*#__PURE__*/ jsxs("div", {
-                className: "flex flex-col w-full bg-primary",
+                className: "flex flex-col w-full bg-primary-lighter",
                 children: [
                     /*#__PURE__*/ jsxs("div", {
                         "data-testid": "text-cohort-filters-top-row",
@@ -8444,12 +8591,12 @@ const LinkCellFunctionCatalog = {
     default: RenderLinkCell,
     linkWithValueMap: RenderLinkCellUsingValueMap
 };
-let instance$1;
+let instance$2;
 const ExplorerTableCellRendererFactory = ()=>{
-    if (!instance$1) {
-        instance$1 = new RenderFactoryTypedInstance();
+    if (!instance$2) {
+        instance$2 = new RenderFactoryTypedInstance();
     }
-    return instance$1;
+    return instance$2;
 };
 // register default cell renderers
 const registerExplorerDefaultCellRenderers = ()=>{
@@ -8603,21 +8750,21 @@ const RowTableDetailsPanel = ({ row })=>{
     });
 };
 
-let instance;
-const DefaultRendererCatalog = {
+let instance$1;
+const DefaultRendererCatalog$1 = {
     tableDetails: {
         default: RowTableDetailsPanel,
         queryRowDetails: QueryRowDetailsPanel
     }
 };
 const ExplorerTableDetailsPanelFactory = ()=>{
-    if (!instance) {
-        instance = new RenderFactoryTypedInstance();
+    if (!instance$1) {
+        instance$1 = new RenderFactoryTypedInstance();
     }
-    return instance;
+    return instance$1;
 };
 const registerCohortBuilderDefaultPreviewRenderers = ()=>{
-    ExplorerTableDetailsPanelFactory().registerRendererCatalog(DefaultRendererCatalog);
+    ExplorerTableDetailsPanelFactory().registerRendererCatalog(DefaultRendererCatalog$1);
 };
 
 const DEFAULT_PROPS = {
@@ -8857,7 +9004,7 @@ const CountsValue = ({ label, isSuccess, counts })=>{
                 shadow: "xs",
                 p: "xs",
                 withBorder: true,
-                className: "bg-primary font-heading text-md font-semibold",
+                className: "bg-primary text-primary-contrast font-heading text-md font-semibold",
                 children: `${counts?.toLocaleString() ?? '...'} ${label}`
             })
         ]
@@ -9595,7 +9742,7 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
                     ...acc
                 };
             }, {});
-            const facetDefs = classifyFacets(data, index, guppyConfig.fieldMapping, configFacetDefs ?? {});
+            const facetDefs = classifyFacets(data, index, guppyConfig?.fieldMapping ?? [], configFacetDefs ?? {});
             setFacetDefinitions(facetDefs);
             // setup summary charts since nested fields can be listed by the split field name
             const summaryCharts = Object.keys(charts).reduce((acc, field)=>{
@@ -9669,14 +9816,13 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
                                     filter: cohortFilters
                                 }),
                                 /*#__PURE__*/ jsx(CountsValue, {
-                                    label: guppyConfig.nodeCountTitle,
+                                    label: guppyConfig?.nodeCountTitle || toDisplayName(index),
                                     counts: counts,
                                     isSuccess: isCountSuccess
                                 })
                             ]
                         }),
                         /*#__PURE__*/ jsx(Charts, {
-                            index: index,
                             charts: summaryCharts,
                             data: data ?? EmptyData,
                             counts: counts,
@@ -9781,88 +9927,1701 @@ const CohortBuilder = ({ explorerConfig })=>{
     });
 };
 
-var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: GqlQueryEditor$1
-});
+var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: GqlQueryEditor$1
+});
+
+const WorkspacesPanel = ()=>{
+    return /*#__PURE__*/ jsx(Center, {
+        className: "m-20 w-full",
+        children: /*#__PURE__*/ jsx(Text, {
+            size: "2rem",
+            children: "Coming soon."
+        })
+    });
+};
+
+class FilesystemContent {
+    constructor({ rootPath }){
+        this.rootPath = rootPath || '';
+    }
+    async get(filepath) {
+        try {
+            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf-8'));
+        } catch (err) {
+            throw new Error(`Cannot process ${filepath}`);
+        }
+    }
+}
+
+class ContentDatabase {
+    constructor(config){
+        this.config = config;
+        this.store = config.store;
+    }
+    async get(filepath) {
+        return this.store.get(filepath);
+    }
+}
+
+const GEN3_FRONTEND_CONFIGURATION_ROOT = process.env.GEN3_FRONTEND_CONFIGURATION_ROOT || './';
+
+const ContentRoot = GEN3_FRONTEND_CONFIGURATION_ROOT;
+const setup = ()=>{
+    const config = {
+        store: new FilesystemContent({
+            rootPath: ContentRoot
+        })
+    };
+    return new ContentDatabase(config);
+};
+const ContentSource = setup();
+
+/**
+ * Retrieves navigation page layout properties from configuration.
+ * Note: GEN3_COMMONS_NAME depends on siteConfig.json value in the data commons package
+ * @returns A Promise resolving to an object containing header and footer props.
+ */ const getNavPageLayoutPropsFromConfig = async ()=>{
+    const navigationConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/navigation.json`);
+    let bannerConfigJSON = [];
+    try {
+        bannerConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/banner.json`);
+    } catch (e) {
+        console.warn('No banner config found at: ', `config/${GEN3_COMMONS_NAME}/banner.json`);
+    }
+    const { topBar, navigation, type = 'original' } = navigationConfigJSON;
+    const headerProps = {
+        top: topBar,
+        navigation: navigation,
+        banners: bannerConfigJSON,
+        type
+    };
+    const footerProps = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/footer.json`);
+    return {
+        headerProps,
+        footerProps,
+        headerData: {
+            title: 'Gen3 Frontend Framework Page',
+            content: 'Gen3 Frontend Framework Page',
+            key: 'gen3-common-page'
+        }
+    };
+};
+
+const FacetSelector = ({ category, facetName, hooks, width = 'w-full', description, fields, selectedFields, updateSelectedField, showSearch = true, header = {
+    Panel: FacetHeader,
+    Label: FacetText,
+    iconStyle: controlsIconStyle
+} })=>{
+    const [isGroupExpanded, setIsGroupExpanded] = useState(false);
+    const [isSearching, setIsSearching] = useState(false);
+    const [searchTerm, setSearchTerm] = useState('');
+    const cardRef = useRef(null);
+    const isFilterExpanded = hooks.useFilterExpanded && hooks.useFilterExpanded(category);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
+    const searchInputRef = useRef(null);
+    const toggleSearch = ()=>{
+        setIsSearching(!isSearching);
+        setSearchTerm('');
+    };
+    useEffect(()=>{
+        if (isSearching) {
+            searchInputRef?.current?.focus();
+        }
+    }, [
+        isSearching
+    ]);
+    const filteredFields = useDeepCompareMemo(()=>{
+        if (!searchTerm) return fields;
+        return fields.filter((f)=>f.description?.toLowerCase().includes(searchTerm.toLowerCase()) || toDisplayName(f?.label ?? f.field).toLowerCase().includes(searchTerm.toLowerCase()));
+    }, [
+        searchTerm,
+        fields
+    ]);
+    const remainingValues = filteredFields.length - DEFAULT_VISIBLE_ITEMS;
+    return /*#__PURE__*/ jsxs("div", {
+        className: `flex flex-col ${width ? width : 'mx-1'} bg-base-max relative border-base-light border-1 rounded-b-md transition`,
+        id: category,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsx(FacetControlsHeader, {
+                    field: category,
+                    description: description,
+                    hooks: hooks,
+                    facetName: facetName,
+                    showSearch: showSearch,
+                    toggleSearch: toggleSearch,
+                    header: header
+                })
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: showFilters ? 'h-full' : 'h-0 invisible',
+                "aria-hidden": !showFilters,
+                children: /*#__PURE__*/ jsxs(Fragment, {
+                    children: [
+                        isSearching && /*#__PURE__*/ jsx(TextInput, {
+                            "data-testid": "textbox-search-values",
+                            value: searchTerm,
+                            onChange: (e)=>setSearchTerm(e.target.value),
+                            "aria-label": `category ${facetName}`,
+                            className: 'p-2',
+                            placeholder: "Search",
+                            ref: searchInputRef,
+                            rightSection: searchTerm.length > 0 && /*#__PURE__*/ jsx(ActionIcon, {
+                                onClick: ()=>{
+                                    setSearchTerm('');
+                                    searchInputRef?.current?.focus();
+                                },
+                                className: "border-0",
+                                children: /*#__PURE__*/ jsx(MdClose, {
+                                    "aria-label": "clear search"
+                                })
+                            }),
+                            role: "search"
+                        }),
+                        /*#__PURE__*/ jsxs("div", {
+                            className: "flip-card",
+                            ref: cardRef,
+                            children: [
+                                /*#__PURE__*/ jsx("div", {
+                                    className: "card-face bg-base-max rounded-b-xs flex flex-col gap-y-1 justify-between",
+                                    children: /*#__PURE__*/ jsx("div", {
+                                        children: filteredFields.length == 0 ? /*#__PURE__*/ jsx("div", {
+                                            className: "mx-4 font-content text-sm",
+                                            children: BAD_DATA_MESSAGE
+                                        }) : filteredFields.map((facet)=>{
+                                            const label = fieldNameToTitle(facet.field);
+                                            return /*#__PURE__*/ jsxs("div", {
+                                                className: "flex justify-between items-center px-2 my-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsx(Text, {
+                                                        size: "sm",
+                                                        fw: 400,
+                                                        children: label
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Switch, {
+                                                        "data-testid": `switch-${label}`,
+                                                        "aria-label": `select ${facet.field}`,
+                                                        color: "accent",
+                                                        checked: selectedFields && selectedFields.includes(facet.field),
+                                                        onChange: ()=>updateSelectedField(facet.field)
+                                                    })
+                                                ]
+                                            }, facet.field);
+                                        })
+                                    })
+                                }),
+                                remainingValues > 0 ? /*#__PURE__*/ jsx(FacetExpander, {
+                                    remainingValues: remainingValues,
+                                    isGroupExpanded: isGroupExpanded,
+                                    onShowChanged: setIsGroupExpanded
+                                }) : null
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+const FacetSelectionPanel = ({ categories, hooks, selectedFields, updateSelectedField })=>{
+    const panels = useDeepCompareMemo(()=>{
+        return categories.map((item)=>{
+            const fields = item.fields.map((f)=>item.fieldsConfig[f]);
+            return /*#__PURE__*/ jsx(FacetSelector, {
+                fields: fields,
+                category: item.title,
+                facetName: item.title,
+                selectedFields: selectedFields,
+                updateSelectedField: updateSelectedField,
+                hooks: {
+                    ...hooks
+                }
+            }, item.title);
+        });
+    }, [
+        categories,
+        selectedFields,
+        updateSelectedField,
+        hooks
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        className: "w-1/3 flex flex-col p-4 gap-y-6",
+        children: panels
+    });
+};
+
+const initialState$1 = {};
+const expandSlice = createSlice({
+    name: 'CohortDiscovery/filterExpand',
+    initialState: initialState$1,
+    reducers: {
+        toggleCategoryFilter: (state, action)=>{
+            return {
+                ...state,
+                [action.payload.field]: action.payload.expanded
+            };
+        },
+        toggleAllFilters: (state, action)=>{
+            return Object.fromEntries(Object.keys(state).map((k)=>[
+                    k,
+                    action.payload
+                ]));
+        }
+    }
+});
+const filtersExpandedReducer = expandSlice.reducer;
+const { toggleCategoryFilter, toggleAllFilters } = expandSlice.actions;
+const selectFilterExpanded = (state, field)=>state.filtersExpandedState?.[field];
+
+const initialState = {};
+const selectIndexFacets = createSlice({
+    name: 'CohortDiscovery/filterExpand',
+    initialState: initialState,
+    reducers: {
+        addFacetSelection: (state, action)=>{
+            if (!(action.payload.index in state)) {
+                return {
+                    ...state,
+                    ...{
+                        [action.payload.index]: [
+                            action.payload.field
+                        ]
+                    }
+                };
+            } else return {
+                ...state,
+                [action.payload.index]: [
+                    ...state[action.payload.index],
+                    action.payload.field
+                ]
+            };
+        },
+        removeFacetSelection: (state, action)=>{
+            if (!(action.payload.index in state[action.payload.index])) return state;
+            if (action.payload.field in state[action.payload.index]) {
+                return {
+                    ...state,
+                    ...{
+                        [action.payload.index]: state[action.payload.index].filter((x)=>x !== action.payload.field)
+                    }
+                };
+            }
+        }
+    }
+});
+const selectedFacetsReducer = selectIndexFacets.reducer;
+selectIndexFacets.actions;
+
+const _APP_NAME$2 = 'CohortDiscovery';
+const persistConfig = {
+    key: _APP_NAME$2,
+    version: 1,
+    storage,
+    whitelist: [
+        'filterExpandState'
+    ]
+};
+// create the store, context and selector for the ProjectsCenter
+// Note the project app has a local store and context which isolates
+// the filters and other store/cache values
+const reducers = combineReducers({
+    selectedIndexFacets: selectedFacetsReducer,
+    filtersExpandedState: filtersExpandedReducer
+});
+const { id, AppStore, AppContext, useAppSelector, useAppDispatch } = createAppStore({
+    reducers: persistReducer(persistConfig, reducers),
+    name: _APP_NAME$2,
+    version: '0.0.1'
+});
+
+const useToggleExpandFilter = ()=>{
+    const dispatch = useAppDispatch();
+    return (field, expanded)=>{
+        dispatch(toggleCategoryFilter({
+            field,
+            expanded
+        }));
+    };
+};
+const useFilterExpandedState = (field)=>{
+    return useAppSelector((state)=>selectFilterExpanded(state, field));
+};
+
+const EnumFacetToHistogramArray = (data)=>{
+    if (!data) return [];
+    return Object.entries(data).reduce((acc, [key, count])=>{
+        acc.push({
+            key,
+            count
+        });
+        return acc;
+    }, []);
+};
+
+const FacetPanelDataHeader = ({ label, valueLabel })=>{
+    return /*#__PURE__*/ jsxs(Group, {
+        justify: "space-between",
+        className: "border-1 border-base p-2 px-4",
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "flex",
+                children: /*#__PURE__*/ jsx(Text, {
+                    size: "sm",
+                    fw: 600,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                fw: 600,
+                children: valueLabel
+            })
+        ]
+    });
+};
+
+const EnumFacetPanel = ({ facet, hooks, valueLabel, showTotals = false, chartType = 'bar' })=>{
+    const { field, label } = facet;
+    const facetName = useMemo(()=>label ?? fieldNameToTitle(field), [
+        label,
+        field
+    ]);
+    const { data } = hooks.useGetFacetData(field);
+    const chart = createChart(chartType, {
+        data: EnumFacetToHistogramArray(data),
+        total: 1,
+        valueType: 'count'
+    });
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col bg-base-max relative border-base border-1 rounded-b-md transition",
+        children: [
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex justify-between px-4 py-2 bg-base-lightest border-b-1 border-base",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        size: "sm",
+                        fw: 600,
+                        children: facetName
+                    }),
+                    showTotals ? /*#__PURE__*/ jsx(Text, {
+                        children: "Todo"
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "px-4 pb-4 pt-8",
+                children: chart
+            }),
+            /*#__PURE__*/ jsx(FacetPanelDataHeader, {
+                label: facetName,
+                valueLabel: valueLabel
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "p-4 pt-2 pb-2",
+                children: /*#__PURE__*/ jsx(FacetEnumList, {
+                    field: field,
+                    valueLabel: valueLabel,
+                    hooks: hooks,
+                    showSorting: false
+                })
+            })
+        ]
+    });
+};
+
+const createFacetPanel = (facet, chartType, valueLabel, hooks)=>{
+    switch(facet.type){
+        case 'enum':
+            return /*#__PURE__*/ jsx(EnumFacetPanel, {
+                facet: facet,
+                chartType: chartType,
+                valueLabel: valueLabel,
+                hooks: hooks
+            });
+    }
+    return null;
+};
+
+/**
+ * CartsAndFacetsPanel component
+ *
+ * @param {string} index - The index type used for querying data.
+ * @param {Array} facets - The list of facets to be rendered.
+ * @returns {JSX.Element} The rendered component showing facets.
+ */ const ChartsAndFacetsPanel = ({ index, facets })=>{
+    const cohortFilters = useCoreSelector((state)=>selectIndexFilters(state, index));
+    const { data, isSuccess, isError: isAggsQueryError } = useGetAggsQuery({
+        type: index,
+        fields: facets.map((x)=>x.field),
+        filters: cohortFilters
+    });
+    const getEnumFacetData = useDeepCompareCallback((field)=>{
+        return {
+            data: processBucketData(data?.[field]),
+            enumFilters: field in cohortFilters.root ? extractEnumFilterValue(cohortFilters.root[field]) : undefined,
+            isSuccess: isSuccess
+        };
+    }, [
+        cohortFilters,
+        cohortFilters.root,
+        data,
+        isSuccess
+    ]);
+    const getRangeFacetData = useDeepCompareCallback((field)=>{
+        return {
+            data: processRangeData(data?.[field]),
+            filters: extractRangeValues(cohortFilters.root[field]),
+            isSuccess: isSuccess
+        };
+    }, [
+        data,
+        cohortFilters.root,
+        isSuccess
+    ]);
+    const facetHooks = useDeepCompareMemo(()=>{
+        return {
+            enum: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: partial(useUpdateFilters, index),
+                useGetFacetFilters: partial(useGetFacetFilters, index),
+                useClearFilter: partial(useClearFilters, index),
+                useTotalCounts: undefined
+            }
+        };
+    }, [
+        getEnumFacetData,
+        getRangeFacetData,
+        index
+    ]);
+    const panels = useDeepCompareMemo(()=>{
+        return facets.map((facet)=>createFacetPanel(facet, 'bar', fieldNameToTitle(index), facetHooks.enum));
+    }, [
+        facets,
+        index,
+        facetHooks.enum
+    ]);
+    const spans = computeRowSpan(panels.length);
+    return /*#__PURE__*/ jsx(Grid, {
+        className: "w-full mx-2 bg-base-max p-4",
+        children: panels.map((panel, index)=>/*#__PURE__*/ jsx(Grid.Col, {
+                span: spans[index],
+                children: panel
+            }, `${index}-charts-${facets[index].field}-col`))
+    });
+};
+
+const ActionButtonGroup = ()=>{
+    return /*#__PURE__*/ jsxs(Group, {
+        gap: "xs",
+        className: "flex pt-4 pl-2",
+        children: [
+            /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Save Cohort"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Export Cohort"
+            }),
+            /*#__PURE__*/ jsx(Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Import Cohort"
+            })
+        ]
+    });
+};
+
+const IndexPanel = ({ dataConfig, tabs, tabTitle })=>{
+    const [activeFieldDefinitions, setActiveFieldDefinitions] = useState([]);
+    const index = dataConfig.dataType;
+    const fields = useMemo(()=>getAllFieldsFromFilterConfigs(tabs ?? []), [
+        tabs
+    ]);
+    const [facetDefinitions, setFacetDefinitions] = useState({});
+    const [categories, setCategories] = useState([]);
+    const cohortFilters = useCoreSelector((state)=>selectIndexFilters(state, index));
+    const queryFields = categories.length === 0 ? fields : activeFieldDefinitions.map((x)=>x.field);
+    const { data, isSuccess, isError: isAggsQueryError } = useGetAggsQuery({
+        type: index,
+        fields: queryFields,
+        filters: cohortFilters
+    }, {
+        skip: queryFields.length === 0
+    });
+    const updateFields = useDeepCompareCallback((field)=>{
+        if (activeFieldDefinitions.some((facetDef)=>facetDef.field === field)) {
+            setActiveFieldDefinitions((prevState)=>{
+                return prevState.filter((f)=>f.field !== field);
+            });
+        } else {
+            setActiveFieldDefinitions((prevState)=>[
+                    ...prevState,
+                    facetDefinitions[field]
+                ]);
+        }
+    }, [
+        activeFieldDefinitions,
+        facetDefinitions
+    ]);
+    // Set the facet definitions based on the data only the first time the data is loaded
+    useDeepCompareEffect(()=>{
+        if (isSuccess && Object.keys(facetDefinitions).length === 0) {
+            const configFacetDefs = tabs.reduce((acc, tab)=>{
+                return {
+                    ...tab.fieldsConfig,
+                    ...acc
+                };
+            }, {});
+            const facetDefs = classifyFacets(data, index, [], configFacetDefs);
+            setFacetDefinitions(facetDefs);
+            // setup categories
+            const categories = tabs.reduce((acc, tab)=>{
+                const updatedTab = tab;
+                if (!updatedTab?.fieldsConfig) {
+                    updatedTab.fieldsConfig = {};
+                }
+                updatedTab.fields.forEach((x)=>{
+                    tab.fieldsConfig[x] = {
+                        ...tab.fieldsConfig[x],
+                        ...x in facetDefs ? facetDefs[x] : {}
+                    };
+                });
+                acc.push(updatedTab);
+                return acc;
+            }, []);
+            setCategories(categories);
+        }
+    }, [
+        isSuccess,
+        data,
+        facetDefinitions,
+        index
+    ]);
+    if (isAggsQueryError) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: "Unable to fetch data from server"
+        });
+    }
+    return /*#__PURE__*/ jsxs(Stack, {
+        children: [
+            /*#__PURE__*/ jsx(CohortManager, {
+                index: index
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                className: "w-full h-full bg-base-light",
+                children: [
+                    /*#__PURE__*/ jsx(FacetSelectionPanel, {
+                        categories: categories,
+                        selectedFields: activeFieldDefinitions.map((x)=>x.field),
+                        updateSelectedField: updateFields,
+                        hooks: {
+                            useClearFilter: ()=>(field)=>null,
+                            useToggleExpandFilter: useToggleExpandFilter,
+                            useFilterExpanded: useFilterExpandedState
+                        }
+                    }),
+                    /*#__PURE__*/ jsxs(Stack, {
+                        className: "w-full",
+                        children: [
+                            /*#__PURE__*/ jsx(ActionButtonGroup, {}),
+                            /*#__PURE__*/ jsx(ChartsAndFacetsPanel, {
+                                index: index,
+                                facets: activeFieldDefinitions
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const persistor = persistStore(AppStore);
+const CohortDiscovery = (config)=>{
+    const { isLoading } = useGetCSRFQuery(); // need for Guppy
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Center, {
+            maw: 400,
+            h: 100,
+            mx: "auto",
+            children: /*#__PURE__*/ jsx(Loader, {
+                variant: "dots"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: /*#__PURE__*/ jsx(PersistGate, {
+            persistor: persistor,
+            children: /*#__PURE__*/ jsx("div", {
+                className: "w-full h-full",
+                children: /*#__PURE__*/ jsx(IndexPanel, {
+                    dataConfig: config.dataIndexes[0].dataConfig,
+                    tabTitle: config.dataIndexes[0].tabTitle,
+                    tabs: config.dataIndexes[0].tabs
+                })
+            })
+        })
+    });
+};
+
+const _APP_NAME$1 = 'CohortDiscovery'; // This wil be the route name of the app
+const registerCohortDiscoveryApp = ()=>createGen3AppWithOwnStore({
+        App: CohortDiscovery,
+        id: id,
+        name: _APP_NAME$1,
+        version: 'v1.0.0',
+        requiredEntityTypes: [],
+        store: AppStore,
+        context: AppContext
+    });
+
+const roundTo2AfterDecimal = (number)=>{
+    return Math.round((number + Number.EPSILON) * 100) / 100;
+};
+
+const processComparisonData$1 = (baseData, comparisonData)=>{
+    return [
+        {
+            name: baseData.label,
+            type: 'bar',
+            barGap: 0,
+            itemStyle: {
+                color: '#4e79a7'
+            },
+            data: baseData.data.map((item)=>roundTo2AfterDecimal(item.count)),
+            emphasis: {
+                focus: 'series'
+            }
+        },
+        {
+            name: comparisonData.label,
+            type: 'bar',
+            itemStyle: {
+                color: '#f28e2c'
+            },
+            data: comparisonData.data.map((item)=>roundTo2AfterDecimal(item.count)),
+            emphasis: {
+                focus: 'series'
+            }
+        }
+    ];
+};
+const BarComparison = ({ baseDataset, comparisonDataset, title, yAxisLabel = 'percent' })=>{
+    const categories = baseDataset.data.map((d)=>truncateString(processLabel$1(d.key), 35));
+    const chartDefinition = useMemo(()=>{
+        const series = processComparisonData$1(baseDataset, comparisonDataset);
+        return {
+            aria: {
+                enabled: true
+            },
+            tooltip: {
+                trigger: 'axis',
+                axisPointer: {
+                    type: 'shadow'
+                }
+            },
+            title: {
+                text: title,
+                left: 'center'
+            },
+            legend: {
+                data: [
+                    baseDataset.label,
+                    comparisonDataset.label
+                ],
+                bottom: '5%'
+            },
+            xAxis: {
+                type: 'category',
+                data: categories,
+                axisTick: {
+                    show: false
+                }
+            },
+            yAxis: {
+                type: 'value',
+                name: yAxisLabel
+            },
+            series: series
+        };
+    }, [
+        baseDataset,
+        categories,
+        comparisonDataset,
+        title,
+        yAxisLabel
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        role: "region",
+        "aria-labelledby": "bar-comparison-title",
+        className: "flex flex-col w-full h-96",
+        children: /*#__PURE__*/ jsx(ReactECharts, {
+            option: chartDefinition,
+            settings: {
+                notMerge: true
+            }
+        })
+    });
+};
+
+const processComparisonData = (baseData, comparisonData)=>{
+    const maxB = baseData.data.reduce((acc, curr)=>{
+        return Math.max(curr.count, acc);
+    }, 0);
+    const maxC = comparisonData.data.reduce((acc, curr)=>{
+        return Math.max(curr.count, acc);
+    }, 0);
+    return {
+        data: [
+            {
+                type: 'radar',
+                data: [
+                    {
+                        value: baseData.data.map((item)=>roundTo2AfterDecimal(item.count)),
+                        name: baseData.label,
+                        itemStyle: {
+                            color: '#4e79a7'
+                        },
+                        areaStyle: {
+                            opacity: 0.3
+                        }
+                    },
+                    {
+                        value: comparisonData.data.map((item)=>roundTo2AfterDecimal(item.count)),
+                        name: comparisonData.label,
+                        itemStyle: {
+                            color: '#f28e2c'
+                        },
+                        areaStyle: {
+                            opacity: 0.3
+                        }
+                    }
+                ]
+            }
+        ],
+        maxBase: maxB,
+        maxComparison: maxC
+    };
+};
+const RadarComparison = ({ baseDataset, comparisonDataset, title, yAxisLabel = 'percent' })=>{
+    const categories = baseDataset.data.map((d)=>truncateString(processLabel$1(d.key), 35));
+    const chartDefinition = useMemo(()=>{
+        const series = processComparisonData(baseDataset, comparisonDataset);
+        const option = {
+            aria: {
+                enabled: true
+            },
+            title: {
+                text: title,
+                left: 'center'
+            },
+            legend: {
+                data: [
+                    baseDataset.label,
+                    comparisonDataset.label
+                ],
+                bottom: '5%'
+            },
+            radar: {
+                indicator: categories.map((group)=>({
+                        name: group,
+                        max: Math.max(series.maxBase, series.maxComparison)
+                    })),
+                axisLine: {
+                    lineStyle: {
+                        color: '#4e79a7'
+                    }
+                },
+                splitLine: {
+                    show: true,
+                    lineStyle: {
+                        color: [
+                            '#8c8989',
+                            '#8aa0ae'
+                        ]
+                    }
+                },
+                center: [
+                    '50%',
+                    '50%'
+                ],
+                radius: '65%'
+            },
+            series: series.data,
+            tooltip: {
+                trigger: 'item'
+            }
+        };
+        return option;
+    }, [
+        baseDataset,
+        categories,
+        comparisonDataset,
+        title,
+        yAxisLabel
+    ]);
+    return /*#__PURE__*/ jsx("div", {
+        role: "region",
+        "aria-labelledby": "radar-comparison-title",
+        className: "flex flex-col w-full h-96",
+        children: /*#__PURE__*/ jsx(ReactECharts, {
+            option: chartDefinition,
+            settings: {
+                notMerge: true
+            }
+        })
+    });
+};
+
+let instance = undefined;
+const DefaultComparisonChart = ()=>{
+    return /*#__PURE__*/ jsx("div", {
+        children: "Chart not configured"
+    });
+};
+const DefaultRendererCatalog = {
+    comparison: {
+        default: DefaultComparisonChart,
+        barComparison: BarComparison,
+        radarComparison: RadarComparison
+    }
+};
+const DiversityChartsFactory = ()=>{
+    if (!instance) {
+        instance = new RenderFactoryTypedInstance();
+        instance.registerRendererCatalog(DefaultRendererCatalog);
+    }
+    return instance;
+};
+
+DiversityChartsFactory();
+const generateChart = (groundData, groundLabel, comparisonData, comparisonLabel, field, config, showTitle = true)=>{
+    // Check if the field exists in the datasets
+    if (!(field in groundData) || !(field in comparisonData)) {
+        console.error(`Field ${field} does not exist in provided data.`);
+        return /*#__PURE__*/ jsx("span", {
+            children: "Error: Data field missing"
+        });
+    }
+    const chartRenderer = DiversityChartsFactory().getRenderer('comparison', config.chartType);
+    // Check if renderer is the DefaultItemRenderer to log a warning
+    if (chartRenderer === DefaultComparisonChart) {
+        console.warn(`No specific renderer found for ${config.chartType}. Using default renderer.`);
+    }
+    return chartRenderer({
+        baseDataset: {
+            data: groundData[field],
+            label: groundLabel
+        },
+        comparisonDataset: {
+            data: comparisonData[field],
+            label: comparisonLabel
+        },
+        title: showTitle ? fieldNameToTitle(field) : ''
+    });
+};
+
+// Compute statistics
+const computeStatistics = (baseData, comparisonData)=>{
+    const buckets = baseData.map((item)=>typeof item.key !== 'string' ? `${item.key[0]} to ${item.key[1]}` : item.key);
+    const baseValues = baseData.map((item)=>item.count);
+    const cmpValues = comparisonData.map((item)=>item.count);
+    // Mean Absolute Error (MAE)
+    const mae = baseValues.reduce((sum, value, index)=>sum + Math.abs(value - cmpValues[index]), 0) / buckets.length;
+    // Root Mean Square Error (RMSE)
+    const rmse = Math.sqrt(baseValues.reduce((sum, value, index)=>sum + Math.pow(value - cmpValues[index], 2), 0) / buckets.length);
+    // Pearson Correlation Coefficient
+    const baseAve = baseValues.reduce((sum, value)=>sum + value, 0) / buckets.length;
+    const cmpAvg = cmpValues.reduce((sum, value)=>sum + value, 0) / buckets.length;
+    const numerator = baseValues.reduce((sum, value, index)=>sum + (value - baseAve) * (cmpValues[index] - cmpAvg), 0);
+    const denominator = Math.sqrt(baseValues.reduce((sum, value)=>sum + Math.pow(value - baseAve, 2), 0) * cmpValues.reduce((sum, value)=>sum + Math.pow(value - cmpAvg, 2), 0));
+    const correlation = numerator / denominator;
+    const robustChiSquare = baseValues.reduce((sum, expected, index)=>{
+        const observed = cmpValues[index];
+        if (expected === 0 && observed === 0) {
+            return sum; // Both expected and observed are 0, no contribution to chi-square
+        } else if (expected === 0) {
+            return sum + observed; // Add observed value to chi-square when expected is 0
+        } else {
+            return sum + Math.pow(observed - expected, 2) / expected;
+        }
+    }, 0);
+    // Chi-Square Contributions
+    const chiSquareContributions = buckets.map((group, index)=>{
+        const expected = baseValues[index];
+        const observed = cmpValues[index];
+        let contribution = 0;
+        if (expected === 0 && observed === 0) {
+            contribution = 0;
+        } else if (expected === 0) {
+            contribution = observed;
+        } else {
+            contribution = Math.pow(observed - expected, 2) / expected;
+        }
+        return {
+            group,
+            contribution
+        };
+    });
+    return {
+        mae,
+        rmse,
+        correlation,
+        robustChiSquare,
+        chiSquareContributions
+    };
+};
+const LabeledValueRow = ({ label, value })=>{
+    return /*#__PURE__*/ jsxs(Group, {
+        justify: "space-between",
+        children: [
+            /*#__PURE__*/ jsx(Text, {
+                fw: 600,
+                size: "sm",
+                className: "uppercase",
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                size: "sm",
+                c: "primary",
+                children: value
+            })
+        ]
+    });
+};
+const StatisticsCard = ({ baseData, comparisonData })=>{
+    const metrics = computeStatistics(baseData, comparisonData);
+    return /*#__PURE__*/ jsxs(Stack, {
+        gap: "xs",
+        children: [
+            /*#__PURE__*/ jsx(LabeledValueRow, {
+                label: "Mean Absolute Error (MAE)",
+                value: metrics.mae.toFixed(4)
+            }),
+            /*#__PURE__*/ jsx(LabeledValueRow, {
+                label: "Root Mean Square Error (RMSE)",
+                value: metrics.rmse.toFixed(4)
+            }),
+            /*#__PURE__*/ jsx(LabeledValueRow, {
+                label: "Pearson Correlation Coefficient",
+                value: metrics.correlation.toFixed(4)
+            }),
+            /*#__PURE__*/ jsx(LabeledValueRow, {
+                label: "Robust Chi-Square Statistic",
+                value: metrics.robustChiSquare.toFixed(4)
+            }),
+            /*#__PURE__*/ jsx(Text, {
+                fw: 600,
+                size: "sm",
+                className: "uppercase",
+                children: "Chi-Square Contributions by Group"
+            }),
+            /*#__PURE__*/ jsx(ScrollArea, {
+                h: 200,
+                children: /*#__PURE__*/ jsxs(Table, {
+                    striped: true,
+                    withTableBorder: true,
+                    withColumnBorders: true,
+                    stickyHeader: true,
+                    stickyHeaderOffset: 0,
+                    children: [
+                        /*#__PURE__*/ jsx(Table.Thead, {
+                            children: /*#__PURE__*/ jsxs(Table.Tr, {
+                                children: [
+                                    /*#__PURE__*/ jsx(Table.Th, {
+                                        children: "Group"
+                                    }),
+                                    /*#__PURE__*/ jsx(Table.Th, {
+                                        children: "Contribution"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Table.Tbody, {
+                            children: metrics.chiSquareContributions.map(({ group, contribution })=>/*#__PURE__*/ jsxs(Table.Tr, {
+                                    children: [
+                                        /*#__PURE__*/ jsx(Table.Td, {
+                                            children: group
+                                        }),
+                                        /*#__PURE__*/ jsx(Table.Td, {
+                                            children: contribution.toFixed(4)
+                                        })
+                                    ]
+                                }, group))
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+const ComparisonChart = ({ config, groundData, groundLabel, comparisonData, comparisonLabel, field, chartType })=>{
+    return generateChart(groundData, groundLabel, comparisonData, comparisonLabel, field, {
+        ...config,
+        chartType: chartType
+    }, false);
+};
+const ComparisonCard = ({ config, groundData, groundLabel, comparisonData, comparisonLabel, field, style = 'box' })=>{
+    const [viewType, setViewType] = useState(config.chartType);
+    return /*#__PURE__*/ jsxs(Card, {
+        shadow: "xs",
+        withBorder: style === 'box',
+        className: "h-full",
+        children: [
+            /*#__PURE__*/ jsx(Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                withBorder: style === 'box',
+                children: /*#__PURE__*/ jsxs(Group, {
+                    justify: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsx(Text, {
+                            fw: 600,
+                            children: fieldNameToTitle(field)
+                        }),
+                        /*#__PURE__*/ jsx(SegmentedControl, {
+                            value: viewType,
+                            onChange: setViewType,
+                            data: [
+                                {
+                                    label: 'Bar',
+                                    value: 'barComparison'
+                                },
+                                {
+                                    label: 'Radar',
+                                    value: 'radarComparison'
+                                },
+                                {
+                                    label: 'Statistics',
+                                    value: 'statisticsComparison'
+                                }
+                            ]
+                        })
+                    ]
+                })
+            }),
+            viewType == 'statisticsComparison' ? /*#__PURE__*/ jsx("div", {
+                className: "h-96 m-2",
+                children: /*#__PURE__*/ jsx(StatisticsCard, {
+                    baseData: groundData[field],
+                    comparisonData: comparisonData[field]
+                })
+            }) : /*#__PURE__*/ jsx(ComparisonChart, {
+                config: config,
+                groundData: groundData,
+                groundLabel: groundLabel,
+                comparisonData: comparisonData,
+                comparisonLabel: comparisonLabel,
+                field: field,
+                chartType: viewType
+            })
+        ]
+    });
+};
 
-const WorkspacesPanel = ()=>{
-    return /*#__PURE__*/ jsx(Center, {
-        className: "m-20 w-full",
-        children: /*#__PURE__*/ jsx(Text, {
-            size: "2rem",
-            children: "Coming soon."
+const ComparisonCharts = ({ ground, groundLabel, comparison, comparisonLabel, comparisonChartsConfig, numberOfColumns = 2, style = 'tile' })=>{
+    const spans = computeRowSpan(Object.keys(comparisonChartsConfig).length, numberOfColumns);
+    return /*#__PURE__*/ jsx(Grid, {
+        className: "w-full p-4",
+        children: Object.entries(comparisonChartsConfig).map(([field, config], indexNum)=>{
+            return /*#__PURE__*/ jsx(Grid.Col, {
+                span: spans[indexNum],
+                children: /*#__PURE__*/ jsx(ComparisonCard, {
+                    config: config,
+                    groundData: ground,
+                    groundLabel: groundLabel,
+                    comparisonData: comparison,
+                    comparisonLabel: comparisonLabel,
+                    field: field
+                })
+            }, `${indexNum}-charts-${field}-col`);
         })
     });
 };
 
-class FilesystemContent {
-    constructor({ rootPath }){
-        this.rootPath = rootPath || '';
+/**
+ * Converts a deeply nested data structure of numbers into a structured aggregation data format.
+ *
+ * @param {Record<string, Record<string, Record<string, number>>>} data - The input data where the structure
+ * consists of three levels of nested records:
+ *   - The outermost level is keyed by source identifiers.
+ *   - The middle level is keyed by aggregation identifiers.
+ *   - The innermost level is keyed by histogram keys with corresponding numeric counts.
+ *
+ * @return {Record<string, AggregationsData>} - A newly structured data object where:
+ *   - The outermost level is the same as the input.
+ *   - Each aggregation identifier now maps to an array of histogram objects with key-count pairs.
+ */ const convertToAggregateData = (data)=>{
+    const result = {};
+    for (const [sourceKey, sourceValue] of Object.entries(data)){
+        const aggData = {};
+        for (const [aggKey, aggValue] of Object.entries(sourceValue)){
+            const histogramDataArray = [];
+            for (const [key, count] of Object.entries(aggValue)){
+                histogramDataArray.push({
+                    key,
+                    count
+                });
+            }
+            aggData[aggKey] = histogramDataArray;
+        }
+        result[sourceKey] = aggData;
     }
-    async get(filepath) {
-        try {
-            return await JSON.parse(fs.readFileSync(path.join(this.rootPath, filepath)).toString('utf-8'));
-        } catch (err) {
-            throw new Error(`Cannot process ${filepath}`);
+    return result;
+};
+/**
+ * Converts histogram response data into percentages based on the total counts.
+ *
+ * @param {Record<string, any>} data - The input data containing histogram details and total counts.
+ *
+ * @returns {AggregationsData} The processed histogram data where counts are converted to percentages.
+ */ const processHistogramResponseAsPercentage = (data)=>{
+    const pathData = JSONPath({
+        json: data,
+        path: '$..histogram',
+        resultType: 'all'
+    });
+    const totalData = JSONPath({
+        json: data,
+        path: '$.._totalCount',
+        resultType: 'value'
+    });
+    const total = totalData[0];
+    const results = pathData.reduce((acc, element)=>{
+        const key = element.pointer.split('/').slice(-2, -1)[0];
+        if (isArray(element.value[0].key) && element.value[0].key.length == 2) {
+            if (!(key in acc)) acc[key] = [];
+            return {
+                ...acc,
+                [key]: [
+                    {
+                        key: `${element.value[0].key[0]}-${element.value[0].key[1]}`,
+                        count: element.value[0].count / total * 100
+                    },
+                    ...acc[key]
+                ]
+            };
+        }
+        return {
+            ...acc,
+            [key]: element.value.map((x)=>{
+                return {
+                    key: x.key,
+                    count: x.count / total * 100
+                };
+            })
+        };
+    }, {});
+    return results;
+};
+/**
+ * Takes an object of type AggregationsData and normalizes the
+ * 'age_at_index' property by converting the age keys to a string format.
+ *
+ * This function checks if the 'age_at_index' key exists in the input object.
+ * If it does, it transforms each age entry by appending ' Years' to the age
+ * value and returns the updated object. If the 'age_at_index' key does not exist,
+ * it returns the original data.
+ *
+ * @param {AggregationsData} data - The input data object containing the age aggregations.
+ * @returns {AggregationsData} - The transformed data object with normalized age keys.
+ */ const normalizeAgeOfIndex = (data)=>{
+    if (!('age_at_index' in data)) return data;
+    const newKeys = data['age_at_index'].map((x)=>{
+        return {
+            key: `${x.key} Years`,
+            count: x.count
+        };
+    });
+    return {
+        ...data,
+        age_at_index: newKeys
+    };
+};
+/**
+ * Aligns the source data with the target structure by mapping items based on their keys and updating the counts.
+ *
+ * This function takes two sets of aggregation data, aligns them by their categories and individual keys,
+ * and updates the counts from the source data. If a category or its items are missing in the source data,
+ * a count of 0 is assigned to those items in the resulting aligned data structure.
+ *
+ * @param {AggregationsData} sourceData - The source aggregation data containing key-value pairs with the count.
+ * @param {AggregationsData} targetStructure - The target aggregation structure used to align and structure the result.
+ * @return {AggregationsData} The aligned data with updated counts from the source data, maintaining the target structure.
+ */ const alignData = (sourceData, targetStructure)=>{
+    const result = {};
+    for(const category in targetStructure){
+        if (category in sourceData) {
+            result[category] = targetStructure[category].map((targetItem)=>{
+                const sourceItem = sourceData[category].find((item)=>item.key === targetItem.key);
+                return sourceItem ? {
+                    ...targetItem,
+                    count: sourceItem.count
+                } : {
+                    ...targetItem,
+                    count: 0
+                };
+            });
         }
     }
-}
+    // TODO: report missing?
+    // TODO: make this configurable
+    return result;
+};
 
-class ContentDatabase {
-    constructor(config){
-        this.config = config;
-        this.store = config.store;
+const getStaticDiversityData = (dataset)=>{
+    return convertToAggregateData({
+        census: {
+            age_at_index: {
+                '0-4 Years': 6,
+                '5-11 Years': 8.7,
+                '12-15 Years': 5.1,
+                '16-17 Years': 2.5,
+                '18-29 Years': 16.4,
+                '30-39 Years': 13.5,
+                '40-49 Years': 12.3,
+                '50-64 Years': 19.2,
+                '65-74 Years': 9.6,
+                '75-84 Years': 4.9,
+                '85-89 Years': 2
+            },
+            race: {
+                White: 61.6315330007,
+                'Black or African American': 12.4013544021,
+                Asian: 5.9997260938,
+                Other: 18.6347237845,
+                'American Indian or Alaska Native': 1.1244963298,
+                'Native Hawaiian or Other Pacific Islander': 0.2081663891,
+                'Not Reported': 0
+            },
+            ethnicity: {
+                'Hispanic or Latino': 18.7298774077,
+                'Not Hispanic or Latino': 81.2701225923,
+                'Not Reported': 0
+            },
+            sex: {
+                Female: 50.75,
+                Male: 49.25,
+                'Not Reported': 0
+            },
+            race_and_ethnicity: {
+                'Hispanic or Latino': 18.45,
+                'American Indian or Alaska Native, Not Hispanic or Latino': 0.74,
+                'Asian, Not Hispanic or Latino': 5.76,
+                'Black, Not Hispanic or Latino': 12.54,
+                'Native Hawaiian or Other Pacific Islander, Not Hispanic or Latino': 0.182,
+                'White, Not Hispanic or Latino': 60.11,
+                'Multiple or Other, Not Hispanic or Latino': 2.22,
+                'Not Reported': 0
+            }
+        }
+    })[dataset];
+};
+
+const convertToValidJSON = (inputString)=>{
+    // Remove all newline characters and extra spaces
+    let cleanedString = inputString.replace(/\s+/g, ' ').trim();
+    // Add quotes around property names that aren't already quoted
+    cleanedString = cleanedString.replace(/(\w+):/g, '"$1":');
+    // Replace single quotes with double quotes (if any)
+    cleanedString = cleanedString.replace(/'/g, '"');
+    return cleanedString;
+};
+const createDiversityQuery = (fields = {
+    age_at_index: 'age_at_index',
+    sex: 'sex',
+    ethnicity: 'ethnicity',
+    race: 'race'
+})=>{
+    // TODO refactor to make this usable for all facets
+    return {
+        query: `
+  query ($filter_0_4: JSON, $filter_5_11: JSON, $filter_12_15: JSON, $filter_16_17: JSON, $filter_18_29: JSON, $filter_30_39: JSON, $filter_40_49: JSON, $filter_50_64: JSON, $filter_65_74: JSON, $filter_75_84: JSON, $filter_85_plus: JSON) {
+  _aggregation {
+    case {
+          _totalCount
+          ${fields['sex']} {
+            histogram {
+              key
+              count
+            }
+          }
+          ${fields['ethnicity']} {
+            histogram {
+              key
+              count
+            }
+          },
+          ${fields['race']} {
+            histogram {
+              key
+              count
+            }
+          }
     }
-    async get(filepath) {
-        return this.store.get(filepath);
+    case_0_4: case(filter: $filter_0_4, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
     }
-}
-
-const GEN3_FRONTEND_CONFIGURATION_ROOT = process.env.GEN3_FRONTEND_CONFIGURATION_ROOT || './';
-
-const ContentRoot = GEN3_FRONTEND_CONFIGURATION_ROOT;
-const setup = ()=>{
-    const config = {
-        store: new FilesystemContent({
-            rootPath: ContentRoot
-        })
+    case_5_11: case(filter: $filter_5_11, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_12_15: case(filter: $filter_12_15, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_16_17: case(filter: $filter_16_17, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_18_29: case(filter: $filter_18_29, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_30_39: case(filter: $filter_30_39, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_40_49: case(filter: $filter_40_49, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_50_64: case(filter: $filter_50_64, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_65_74: case(filter: $filter_65_74, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_75_84: case(filter: $filter_75_84, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+    case_85_plus: case(filter: $filter_85_plus, filterSelf: true, accessibility: all) {
+      ${fields['age_at_index']} {
+        histogram {
+          key
+          count
+        }
+      }
+    }
+  }
+}`,
+        variables: convertToValidJSON(`{ "filter_0_4": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 0
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 4
+        }
+      }
+    ]
+  },
+  "filter_5_11": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 5
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 11
+        }
+      }
+    ]
+  },
+  "filter_12_15": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 12
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 15
+        }
+      }
+    ]
+  },
+  "filter_16_17": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 16
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 17
+        }
+      }
+    ]
+  },
+  "filter_18_29": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 18
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 29
+        }
+      }
+    ]
+  },
+  "filter_30_39": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 30
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 39
+        }
+      }
+    ]
+  },
+  "filter_40_49": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 40
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 49
+        }
+      }
+    ]
+  },
+  "filter_50_64": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 50
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 64
+        }
+      }
+    ]
+  },
+  "filter_65_74": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 65
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 74
+        }
+      }
+    ]
+  },
+  "filter_75_84": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 75
+        }
+      },
+      {
+        "<=": {
+          ${fields['age_at_index']}: 84
+        }
+      }
+    ]
+  },
+  "filter_85_plus": {
+    "AND": [
+      {
+        ">=": {
+          ${fields['age_at_index']}: 85
+        }
+      }
+    ]
+  }
+}`)
     };
-    return new ContentDatabase(config);
 };
-const ContentSource = setup();
 
-/**
- * Retrieves navigation page layout properties from configuration.
- * Note: GEN3_COMMONS_NAME depends on siteConfig.json value in the data commons package
- * @returns A Promise resolving to an object containing header and footer props.
- */ const getNavPageLayoutPropsFromConfig = async ()=>{
-    const navigationConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/navigation.json`);
-    let bannerConfigJSON = [];
-    try {
-        bannerConfigJSON = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/banner.json`);
-    } catch (e) {
-        console.log('No banner config found at: ', `config/${GEN3_COMMONS_NAME}/banner.json`);
-    }
-    const { topBar, navigation, type = 'original' } = navigationConfigJSON;
-    const headerProps = {
-        top: topBar,
-        navigation: navigation,
-        banners: bannerConfigJSON,
-        type
-    };
-    const footerProps = await ContentSource.get(`config/${GEN3_COMMONS_NAME}/footer.json`);
-    return {
-        headerProps,
-        footerProps,
-        headerData: {
-            title: 'Gen3 Frontend Framework Page',
-            content: 'Gen3 Frontend Framework Page',
-            key: 'gen3-common-page'
+const CohortDiversityApp = (config)=>{
+    const groundDataset = getStaticDiversityData(config.datasets.ground.dataset);
+    const gqlQuery = createDiversityQuery(); // TODO: add field mapping
+    const { data: rawComparisonDataset, isLoading: isComparisonLoading, isError: isComparisonError } = useGeneralGQLQuery({
+        query: gqlQuery.query,
+        variables: JSON.parse(gqlQuery.variables)
+    });
+    const comparisonDataset = useMemo(()=>{
+        if (rawComparisonDataset) {
+            const results = processHistogramResponseAsPercentage(rawComparisonDataset.data);
+            return alignData(normalizeAgeOfIndex(results), groundDataset);
         }
-    };
+        return undefined;
+    }, [
+        groundDataset,
+        rawComparisonDataset
+    ]);
+    if (isComparisonError) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: 'Unable to get data need for Cohort Diversity'
+        });
+    }
+    if (isComparisonLoading) {
+        return /*#__PURE__*/ jsx(LoadingOverlay, {
+            visible: true
+        });
+    }
+    return /*#__PURE__*/ jsxs(Stack, {
+        classNames: {
+            root: 'w-full m-4 mb-2'
+        },
+        "aria-label": "Main Content of Cohort Diversity App",
+        children: [
+            /*#__PURE__*/ jsx(Title, {
+                order: 1,
+                size: "h3",
+                children: "Cohort Diversity Visualization"
+            }),
+            /*#__PURE__*/ jsx(Accordion, {
+                variant: "filled",
+                chevronPosition: "left",
+                children: /*#__PURE__*/ jsxs(Accordion.Item, {
+                    value: "summaryCharts",
+                    "aria-label": "Summary Charts",
+                    children: [
+                        /*#__PURE__*/ jsx(Accordion.Control, {
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "flex items-center justify-start space-x-2 text-accent",
+                                children: [
+                                    /*#__PURE__*/ jsx(FaChartPie, {
+                                        style: {
+                                            color: 'secondary.4',
+                                            width: rem(32),
+                                            height: rem(32)
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsx(Text, {
+                                        fw: 600,
+                                        children: "Summary Charts"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Accordion.Panel, {
+                            children: /*#__PURE__*/ jsx(Charts, {
+                                data: groundDataset ?? {},
+                                charts: config.charts,
+                                isSuccess: true,
+                                numCols: 2
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(ComparisonCharts, {
+                ground: groundDataset ?? {},
+                groundLabel: config.datasets.ground.label,
+                comparison: comparisonDataset ?? {},
+                comparisonLabel: config.datasets.comparison[0].label,
+                comparisonChartsConfig: config.comparisonCharts,
+                numberOfColumns: config?.numberOfColumns
+            })
+        ]
+    });
 };
 
+const { appApi: diversityApi, appStore, appContext } = createAppApiForRTKQ('cohortDiversity');
+
+const _APP_NAME = 'CohortDiversity'; // This wil be the route name of the app
+const _APP_VERSION = '1.0.0';
+const AppId = getGen3AppId(_APP_NAME, _APP_VERSION);
+const registerCohortDiversityApp = ()=>createGen3AppWithOwnStore({
+        App: CohortDiversityApp,
+        name: _APP_NAME,
+        version: 'v1.0.0',
+        id: AppId,
+        requiredEntityTypes: [],
+        store: appStore,
+        context: appContext
+    });
+
 // Define theme for mantine v7
 const createMantineTheme = (fonts, colors)=>{
     const theme = createTheme({
@@ -13041,7 +14800,10 @@ const AdminAuthZPageGetServerSideProps = async ()=>{
     try {
         const contents = fs.readFileSync(path.join(rootPath, filepath), 'utf8');
         data = await YAML.parse(contents);
-    } catch (err) {
+    } catch (error) {
+        if (error instanceof Error) {
+            console.error(error.message);
+        }
         throw new Error(`Cannot process ${rootPath}${filepath}`);
     }
     return {
@@ -14017,5 +15779,5 @@ async function credentialsLogout(req, res) {
     res.redirect(307, '/');
 }
 
-export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, WorkspacesPage, WorkspacesPageGetServerSideProps, WorkspacesPanel, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, WorkspacesPage, WorkspacesPageGetServerSideProps, WorkspacesPanel, capitalize, computeRowSpan, create10ColorAccessibleContrast, create10ColorPallet, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map