@gen3/frontend 0.10.47 → 0.10.48

package/dist/cjs/index.js

@@ -48,6 +48,11 @@ var io = require('react-icons/io');
 var GraphiQL = require('graphiql');
 var fs = require('fs');
 var path = require('path');
+var react$1 = require('redux-persist/integration/react');
+var reduxPersist = require('redux-persist');
+var redux = require('redux');
+var storage = require('redux-persist/lib/storage');
+var toolkit = require('@reduxjs/toolkit');
 var modals = require('@mantine/modals');
 var dynamic = require('next/dynamic');
 var form = require('@mantine/form');
@@ -667,7 +672,9 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         children: /*#__PURE__*/ jsxRuntime.jsx("header", {
             className: extractClassName('root', mergedClassnames),
-            children: /*#__PURE__*/ jsxRuntime.jsxs("nav", {
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                role: "navigation",
+                "aria-label": "top most navigation",
                 className: "flex items-center align-middle",
                 children: [
                     processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible),
@@ -813,6 +820,8 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
         router$1.pathname
     ]);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        role: "navigation",
+        "aria-label": "main site navigation",
         className: extractClassName('root', mergedClassnames),
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -1268,7 +1277,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;
@@ -1488,6 +1497,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)=>lodash.capitalize(w)).join(' ');
+};
 
 const isArrayOfString = (value)=>{
     return Array.isArray(value) && value.every((element)=>typeof element === 'string');
@@ -3102,18 +3120,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 = [])=>{
@@ -3179,11 +3197,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));
@@ -3192,24 +3209,15 @@ const processRangeKeyLabel = (key)=>{
 };
 
 const ReactECharts = ({ option, style, settings, loading, theme })=>{
-    const chartRef = React.useRef(null);
+    const [chartRoot, setChartRoot] = React.useState(undefined);
+    const [chartRef, rect] = hooks.useResizeObserver();
     useDeepCompare.useDeepCompareEffect(()=>{
         // Initialize chart
         let chart;
         if (chartRef.current !== null) {
             chart = echarts.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
     ]);
@@ -3234,7 +3242,14 @@ const ReactECharts = ({ option, style, settings, loading, theme })=>{
     }, [
         loading
     ]);
+    useDeepCompare.useDeepCompareEffect(()=>{
+        chartRoot?.resize();
+    }, [
+        rect
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        role: "figure",
+        "aria-label": "Data Chart",
         ref: chartRef,
         style: {
             width: '100%',
@@ -3490,13 +3505,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
@@ -3524,9 +3539,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__*/ jsxRuntime.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;
@@ -3666,7 +3686,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__*/ jsxRuntime.jsx(core$1.Table.Thead, {
@@ -3699,7 +3719,7 @@ const Charts = ({ index, charts, data, counts, isSuccess, numCols = DEFAULT_COLS
                     })
                 ]
             })
-        }, `${index}-${indexNum}-charts-${field}-col`);
+        }, `${indexNum}-charts-${field}-col`);
     };
     return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid, {
         className: "w-full",
@@ -3951,10 +3971,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;
@@ -3999,10 +4020,9 @@ const ChartsPanel = ({ config })=>{
                             children: /*#__PURE__*/ jsxRuntime.jsx(Charts, {
                                 showLegends: showLegends,
                                 style: "box",
-                                index: 'subjectsCharts',
                                 charts: chartsProperties(),
                                 data: {
-                                    'testName0': [
+                                    testName0: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4024,7 +4044,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 0
                                         }
                                     ],
-                                    'testName1': [
+                                    testName1: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4038,7 +4058,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 3
                                         }
                                     ],
-                                    'testName2': [
+                                    testName2: [
                                         {
                                             key: 'a',
                                             count: 11
@@ -4052,7 +4072,7 @@ const ChartsPanel = ({ config })=>{
                                             count: 3
                                         }
                                     ],
-                                    'testName3': [
+                                    testName3: [
                                         {
                                             key: 'a',
                                             count: 1
@@ -5947,7 +5967,7 @@ const LoginPanel = (loginConfig)=>{
                     /*#__PURE__*/ jsxRuntime.jsx(LoginProvidersPanel, {
                         handleLoginSelected: handleFenceLoginSelected
                     }),
-                    loginConfig?.showCredentialsLogin && /*#__PURE__*/ jsxRuntime.jsx(CredentialsLogin, {
+                    loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsxRuntime.jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
                     bottomContent?.map((content, index)=>content?.email ? /*#__PURE__*/ React.createElement(ContactWithEmailContent, {
@@ -6429,7 +6449,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])=>{
@@ -6437,7 +6457,7 @@ const classifyFacets = (data, index, fieldMapping, facetDefinitionsFromConfig)=>
         const dataField = fieldKey.split('.')?.slice(-1)[0] ?? fieldKey;
         // check if range facet
         const type = value.length === 1 && lodash.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 ?? core.fieldNameToTitle(fieldKey);
         const facetDef = facetDefinitionsFromConfig[fieldKey] ?? {};
         return {
             ...acc,
@@ -6448,7 +6468,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])),
@@ -6490,7 +6510,10 @@ const buildNested = (field, leafOperand)=>{
     };
 };
 const useGetFacetFilters = (index, field)=>{
-    return core.useCoreSelector((state)=>core.selectIndexedFilterByName(state, index, field));
+    return core.useCoreSelector((state)=>core.selectIndexedFilterByName(state, index, field) ?? {
+            operator: 'and',
+            operands: []
+        });
 };
 /**
  * Given an operation, determine if range is open or closed and extract
@@ -6549,47 +6572,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] = React.useState(false);
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.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();
+    React.useEffect(()=>{
+        // Initialize filter as expanded
+        if (isFilterExpanded === undefined && toggleExpandFilter) {
+            toggleExpandFilter(field, true);
+        }
+    }, [
+        field,
+        isFilterExpanded,
+        toggleExpandFilter
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(header.Panel, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-row items-center",
+                children: [
+                    toggleExpandFilter && /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: isFilterExpanded ? 'Collapse card' : 'Expand card',
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.jsx(md.MdExpandLess, {
+                                size: "3em",
+                                color: "accent.4",
+                                "aria-hidden": "true"
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(md.MdExpandMore, {
+                                size: "3em",
+                                color: "accent.4",
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: description,
+                        position: "bottom-start",
+                        multiline: true,
+                        w: 220,
+                        withArrow: true,
+                        transitionProps: {
+                            duration: 200,
+                            transition: 'fade'
+                        },
+                        disabled: !description,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(header.Label, {
+                            children: facetName ? facetName : core.fieldNameToTitle(field)
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-row",
+                children: [
+                    showSearch ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Search values",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                if (toggleExpandFilter) toggleExpandFilter(field, true);
+                                if (toggleSearch) toggleSearch();
+                            },
+                            "aria-label": "Search",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(md.MdSearch, {
+                                size: "1.45em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }) : null,
+                    showFlip ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: isFacetView ? 'Chart view' : 'Selection view',
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                if (toggleExpandFilter) toggleExpandFilter(field, true);
+                                if (toggleFlip) toggleFlip();
+                            },
+                            "aria-pressed": !isFacetView,
+                            "aria-label": isFacetView ? 'Chart view' : 'Selection view',
+                            children: /*#__PURE__*/ jsxRuntime.jsx(md.MdFlip, {
+                                size: "1.45em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }) : null,
+                    showClearSelection && /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Clear selection",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
+                            onClick: ()=>clearFilters(field),
+                            "aria-label": "clear selection",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUndo, {
+                                size: "1.0em",
+                                className: header.iconStyle,
+                                "aria-hidden": "true"
+                            })
+                        })
+                    }),
+                    dismissCallback ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                        label: "Remove the facet",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
+                            onClick: ()=>{
+                                dismissCallback(field);
+                            },
+                            "aria-label": "Remove the facet",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(md.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') {
@@ -6689,13 +6822,43 @@ const sortTypeToAriaDescription = (sortTypeAndDirection, valueLabel, field)=>{
     });
 };
 
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.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
@@ -6704,7 +6867,7 @@ font-content-noto
  * @param onShowChanged - callback to call when the expand/compact button is clicked
  */ const FacetExpander = ({ remainingValues, isGroupExpanded, onShowChanged })=>{
     return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("button", {
             onClick: ()=>onShowChanged(!isGroupExpanded),
             "data-testid": "plus-icon",
@@ -6713,7 +6876,7 @@ font-content-noto
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(md.MdAddCircle, {
                         className: "text-accent",
-                        size: "1.5em",
+                        size: "1rem",
                         "aria-hidden": "true"
                     }, "show-more"),
                     /*#__PURE__*/ jsxRuntime.jsxs(ExpanderLabel, {
@@ -6732,7 +6895,7 @@ font-content-noto
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx(md.MdRemoveCircle, {
                         className: "text-accent",
-                        size: "1.5em",
+                        size: "1rem",
                         onClick: ()=>onShowChanged(!isGroupExpanded),
                         "aria-hidden": "true"
                     }, "show-less"),
@@ -6745,35 +6908,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] = React.useState(false);
-    const [isSearching, setIsSearching] = React.useState(false);
+    const cardRef = React.useRef(null);
+    const searchInputRef = React.useRef(null);
     const [searchTerm, setSearchTerm] = React.useState('');
+    const { data, enumFilters, isSuccess, error } = hooks.useGetFacetData(field);
+    const [selectedEnums, setSelectedEnums] = React.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] = React.useState({});
     const [sortType, setSortType] = React.useState({
         type: 'alpha',
         direction: 'asc'
     });
-    const [isFacetView, setIsFacetView] = React.useState(startShowingData);
-    const { data, enumFilters, isSuccess } = dataHooks.useGetFacetData(field);
-    const cardRef = React.useRef(null);
-    const [selectedEnums, setSelectedEnums] = React.useState(enumFilters ?? []);
-    const searchInputRef = React.useRef(null);
-    const totalCount = 1000;
-    // TODO Determine if total count is needed
-    // const totalCount = dataHooks.useTotalCounts();
-    const clearFilters = dataHooks.useClearFilter();
-    const updateFacetFilters = dataHooks.useUpdateFacetFilters();
     React.useEffect(()=>{
         if (isSearching) {
             searchInputRef?.current?.focus();
+        } else if (searchTerm.length > 0) {
+            setSearchTerm('');
         }
     }, [
-        isSearching
+        isSearching,
+        searchTerm
     ]);
     useDeepCompare.useDeepCompareEffect(()=>{
         setSelectedEnums(enumFilters ?? []);
@@ -6800,13 +6960,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] = React.useState({
         filteredData: [],
         filteredDataObj: {},
@@ -6819,9 +6972,9 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
     const calcCardStyle = useDeepCompare.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
@@ -6917,68 +7070,14 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
         return null; // nothing to render if visibleItems == 0
     }
     return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
-                children: /*#__PURE__*/ jsxRuntime.jsxs(header.Panel, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                            label: description,
-                            position: "bottom-start",
-                            multiline: true,
-                            w: 220,
-                            withArrow: true,
-                            disabled: !description,
-                            children: /*#__PURE__*/ jsxRuntime.jsx(header.Label, {
-                                children: facetName ? facetName : core.fieldNameToTitle(field)
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                            className: "flex flex-row",
-                            children: [
-                                showSearch ? /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
-                                    onClick: toggleSearch,
-                                    "aria-label": "Search",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(md.MdSearch, {
-                                        size: "1.45em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null,
-                                showFlip ? /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
-                                    onClick: toggleFlip,
-                                    "aria-label": "Flip between form and chart",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(md.MdFlip, {
-                                        size: "1.45em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null,
-                                /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
-                                    onClick: ()=>clearFilters(field),
-                                    "aria-label": "clear selection",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUndo, {
-                                        size: "1.25em",
-                                        className: header.iconStyle
-                                    })
-                                }),
-                                dismissCallback ? /*#__PURE__*/ jsxRuntime.jsx(FacetIconButton, {
-                                    onClick: ()=>{
-                                        clearFilters(field);
-                                        dismissCallback(field);
-                                    },
-                                    "aria-label": "Remove the facet",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
-                                        size: "1.25em",
-                                        className: header.iconStyle
-                                    })
-                                }) : null
-                            ]
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "h-full",
+            ' ',
+            isSuccess && error ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "m-4 font-content pb-2",
+                children: BAD_DATA_MESSAGE
+            }) : /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
                 children: [
                     isSearching && /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
                         value: searchTerm,
@@ -7004,12 +7103,12 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                 children: [
                                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                         children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx(FacetSortPanel, {
+                                            showSorting ? /*#__PURE__*/ jsxRuntime.jsx(FacetSortPanel, {
                                                 sortType: sortType,
                                                 valueLabel: valueLabel,
                                                 setSort: setSortType,
                                                 field: facetName ? facetName : core.fieldNameToTitle(field)
-                                            }),
+                                            }) : false,
                                             /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                                 className: facetChartData.cardStyle,
                                                 role: "group",
@@ -7020,14 +7119,14 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                         "data-testid": "loading-spinner"
                                                     }),
                                                     facetChartData.filteredData.length == 0 ? /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
                                                         className: "mx-4",
                                                         children: "No results found"
                                                     }) : Object.entries(sortedData ?? {}).map(([value, count])=>{
                                                         return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                                            className: "flex flex-row items-center gap-x-1 px-2 ",
+                                                            className: "flex flex-row items-center gap-x-1",
                                                             children: [
                                                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
                                                                     className: "flex-none",
@@ -7035,11 +7134,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)
                                                                     })
@@ -7047,16 +7147,16 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                                 /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
                                                                     label: value,
                                                                     children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                                                        className: "font-content",
+                                                                        className: "text-xs font-normal font-content",
                                                                         children: value
                                                                     })
                                                                 }),
                                                                 /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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),
@@ -7075,6 +7175,7 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                                                         className: "flex-none",
                                                                         children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Checkbox, {
                                                                             size: "xs",
+                                                                            radius: "xs",
                                                                             className: "bg-base-lightest text-primary-contrast-lightest hover:bg-base-darkest hover:text-base-contrast-darkest"
                                                                         })
                                                                     }),
@@ -7092,11 +7193,11 @@ const EnumFacet = ({ field, dataHooks, valueLabel, description, facetName, showP
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(FacetExpander, {
+                                    facetChartData.remainingValues > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FacetExpander, {
                                         remainingValues: facetChartData.remainingValues,
                                         isGroupExpanded: isGroupExpanded,
                                         onShowChanged: setIsGroupExpanded
-                                    })
+                                    }) : null
                                 ]
                             }),
                             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -7123,6 +7224,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] = React.useState(false);
+    const [isFacetView, setIsFacetView] = React.useState(startShowingData);
+    const toggleSearch = ()=>{
+        setIsSearching(!isSearching);
+    };
+    const toggleFlip = ()=>{
+        setIsFacetView(!isFacetView);
+    };
+    return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
+                children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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: [
@@ -7138,17 +7285,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.useState({
         from: minimum,
         to: maximum
     });
-    const clearRangeFilterFromCohort = dataHooks.useClearFilter();
+    const clearRangeFilterFromCohort = hooks.useClearFilter();
     const clearFilters = React.useCallback(()=>{
         setMinMaxValue({
             from: minimum,
@@ -7161,7 +7308,7 @@ const RangeFacet = ({ field, dataHooks, valueLabel, description, facetName, mini
         maximum,
         minimum
     ]);
-    const updateRangeFilter = dataHooks.useUpdateFacetFilters();
+    const updateRangeFilter = hooks.useUpdateFacetFilters();
     const updateFilters = React.useCallback((from, to)=>{
         updateRangeFilter(field, createBucket(field, from, to));
         setMinMaxValue({
@@ -7295,13 +7442,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] = React.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 : core.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 = React.useMemo(()=>{
         if (facetDataValues?.data) {
             return Object.keys(facetDataValues.data).map((key)=>{
@@ -7446,12 +7593,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] = React.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 : core.trimFirstFieldNameToTitle(field, true);
-    const facetValue = dataHooks.useGetFacetFilters(field);
+    const facetValue = hooks.useGetFacetFilters(field);
     const textValues = React.useMemo(()=>extractValues(facetValue), [
         facetValue
     ]);
@@ -7602,7 +7749,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__*/ jsxRuntime.jsx(RangeFacet, {
@@ -7612,7 +7759,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}`),
@@ -7622,7 +7769,7 @@ const createFacetCard = (facetDefinition, valueLabel, dataFunctions, idPrefix, d
                 description: description,
                 hideIfEmpty: hideIfEmpty,
                 width: width,
-                dataHooks: dataFunctions
+                hooks: dataFunctions
             }, `${idPrefix}-exact-${field}`),
             multiselect: /*#__PURE__*/ jsxRuntime.jsx(MultiSelectValueFacet, {
                 field: field,
@@ -7630,7 +7777,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}`);
@@ -7681,7 +7828,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
@@ -7782,7 +7929,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__*/ jsxRuntime.jsx(RemoveButton, {
                                 value: value
                             }),
@@ -8227,7 +8374,7 @@ const QueryExpressionSection = ({ index, filters, currentCohortName, currentCoho
                 setExpandedState
             ],
             children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: "flex flex-col w-full bg-primary",
+                className: "flex flex-col w-full bg-primary-lighter",
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         "data-testid": "text-cohort-filters-top-row",
@@ -8464,12 +8611,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 = ()=>{
@@ -8623,21 +8770,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 = {
@@ -8877,7 +9024,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}`
             })
         ]
@@ -9615,7 +9762,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)=>{
@@ -9689,14 +9836,13 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
                                     filter: cohortFilters
                                 }),
                                 /*#__PURE__*/ jsxRuntime.jsx(CountsValue, {
-                                    label: guppyConfig.nodeCountTitle,
+                                    label: guppyConfig?.nodeCountTitle || toDisplayName(index),
                                     counts: counts,
                                     isSuccess: isCountSuccess
                                 })
                             ]
                         }),
                         /*#__PURE__*/ jsxRuntime.jsx(Charts, {
-                            index: index,
                             charts: summaryCharts,
                             data: data ?? EmptyData,
                             counts: counts,
@@ -9801,88 +9947,1701 @@ const CohortBuilder = ({ explorerConfig })=>{
     });
 };
 
-var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  default: GqlQueryEditor$1
-});
-
-const WorkspacesPanel = ()=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
-        className: "m-20 w-full",
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-            size: "2rem",
-            children: "Coming soon."
+var GqlQueryEditor$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: GqlQueryEditor$1
+});
+
+const WorkspacesPanel = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+        className: "m-20 w-full",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.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/${core.GEN3_COMMONS_NAME}/navigation.json`);
+    let bannerConfigJSON = [];
+    try {
+        bannerConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/banner.json`);
+    } catch (e) {
+        console.warn('No banner config found at: ', `config/${core.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/${core.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] = React.useState(false);
+    const [isSearching, setIsSearching] = React.useState(false);
+    const [searchTerm, setSearchTerm] = React.useState('');
+    const cardRef = React.useRef(null);
+    const isFilterExpanded = hooks.useFilterExpanded && hooks.useFilterExpanded(category);
+    const showFilters = isFilterExpanded === undefined || isFilterExpanded;
+    const searchInputRef = React.useRef(null);
+    const toggleSearch = ()=>{
+        setIsSearching(!isSearching);
+        setSearchTerm('');
+    };
+    React.useEffect(()=>{
+        if (isSearching) {
+            searchInputRef?.current?.focus();
+        }
+    }, [
+        isSearching
+    ]);
+    const filteredFields = useDeepCompare.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__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
+                children: /*#__PURE__*/ jsxRuntime.jsx(FacetControlsHeader, {
+                    field: category,
+                    description: description,
+                    hooks: hooks,
+                    facetName: facetName,
+                    showSearch: showSearch,
+                    toggleSearch: toggleSearch,
+                    header: header
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: showFilters ? 'h-full' : 'h-0 invisible',
+                "aria-hidden": !showFilters,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+                    children: [
+                        isSearching && /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                                onClick: ()=>{
+                                    setSearchTerm('');
+                                    searchInputRef?.current?.focus();
+                                },
+                                className: "border-0",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
+                                    "aria-label": "clear search"
+                                })
+                            }),
+                            role: "search"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                            className: "flip-card",
+                            ref: cardRef,
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "card-face bg-base-max rounded-b-xs flex flex-col gap-y-1 justify-between",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        children: filteredFields.length == 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                            className: "mx-4 font-content text-sm",
+                                            children: BAD_DATA_MESSAGE
+                                        }) : filteredFields.map((facet)=>{
+                                            const label = core.fieldNameToTitle(facet.field);
+                                            return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                className: "flex justify-between items-center px-2 my-1",
+                                                children: [
+                                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                                        size: "sm",
+                                                        fw: 400,
+                                                        children: label
+                                                    }),
+                                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.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__*/ jsxRuntime.jsx(FacetExpander, {
+                                    remainingValues: remainingValues,
+                                    isGroupExpanded: isGroupExpanded,
+                                    onShowChanged: setIsGroupExpanded
+                                }) : null
+                            ]
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+};
+
+const FacetSelectionPanel = ({ categories, hooks, selectedFields, updateSelectedField })=>{
+    const panels = useDeepCompare.useDeepCompareMemo(()=>{
+        return categories.map((item)=>{
+            const fields = item.fields.map((f)=>item.fieldsConfig[f]);
+            return /*#__PURE__*/ jsxRuntime.jsx(FacetSelector, {
+                fields: fields,
+                category: item.title,
+                facetName: item.title,
+                selectedFields: selectedFields,
+                updateSelectedField: updateSelectedField,
+                hooks: {
+                    ...hooks
+                }
+            }, item.title);
+        });
+    }, [
+        categories,
+        selectedFields,
+        updateSelectedField,
+        hooks
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "w-1/3 flex flex-col p-4 gap-y-6",
+        children: panels
+    });
+};
+
+const initialState$1 = {};
+const expandSlice = toolkit.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 = toolkit.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 = redux.combineReducers({
+    selectedIndexFacets: selectedFacetsReducer,
+    filtersExpandedState: filtersExpandedReducer
+});
+const { id, AppStore, AppContext, useAppSelector, useAppDispatch } = core.createAppStore({
+    reducers: reduxPersist.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__*/ jsxRuntime.jsxs(core$1.Group, {
+        justify: "space-between",
+        className: "border-1 border-base p-2 px-4",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex",
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                    size: "sm",
+                    fw: 600,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                fw: 600,
+                children: valueLabel
+            })
+        ]
+    });
+};
+
+const EnumFacetPanel = ({ facet, hooks, valueLabel, showTotals = false, chartType = 'bar' })=>{
+    const { field, label } = facet;
+    const facetName = React.useMemo(()=>label ?? core.fieldNameToTitle(field), [
+        label,
+        field
+    ]);
+    const { data } = hooks.useGetFacetData(field);
+    const chart = createChart(chartType, {
+        data: EnumFacetToHistogramArray(data),
+        total: 1,
+        valueType: 'count'
+    });
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col bg-base-max relative border-base border-1 rounded-b-md transition",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex justify-between px-4 py-2 bg-base-lightest border-b-1 border-base",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        size: "sm",
+                        fw: 600,
+                        children: facetName
+                    }),
+                    showTotals ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        children: "Todo"
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "px-4 pb-4 pt-8",
+                children: chart
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(FacetPanelDataHeader, {
+                label: facetName,
+                valueLabel: valueLabel
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "p-4 pt-2 pb-2",
+                children: /*#__PURE__*/ jsxRuntime.jsx(FacetEnumList, {
+                    field: field,
+                    valueLabel: valueLabel,
+                    hooks: hooks,
+                    showSorting: false
+                })
+            })
+        ]
+    });
+};
+
+const createFacetPanel = (facet, chartType, valueLabel, hooks)=>{
+    switch(facet.type){
+        case 'enum':
+            return /*#__PURE__*/ jsxRuntime.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 = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
+    const { data, isSuccess, isError: isAggsQueryError } = core.useGetAggsQuery({
+        type: index,
+        fields: facets.map((x)=>x.field),
+        filters: cohortFilters
+    });
+    const getEnumFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
+        return {
+            data: processBucketData(data?.[field]),
+            enumFilters: field in cohortFilters.root ? core.extractEnumFilterValue(cohortFilters.root[field]) : undefined,
+            isSuccess: isSuccess
+        };
+    }, [
+        cohortFilters,
+        cohortFilters.root,
+        data,
+        isSuccess
+    ]);
+    const getRangeFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
+        return {
+            data: processRangeData(data?.[field]),
+            filters: extractRangeValues(cohortFilters.root[field]),
+            isSuccess: isSuccess
+        };
+    }, [
+        data,
+        cohortFilters.root,
+        isSuccess
+    ]);
+    const facetHooks = useDeepCompare.useDeepCompareMemo(()=>{
+        return {
+            enum: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: lodash.partial(useUpdateFilters, index),
+                useGetFacetFilters: lodash.partial(useGetFacetFilters, index),
+                useClearFilter: lodash.partial(useClearFilters, index),
+                useTotalCounts: undefined
+            }
+        };
+    }, [
+        getEnumFacetData,
+        getRangeFacetData,
+        index
+    ]);
+    const panels = useDeepCompare.useDeepCompareMemo(()=>{
+        return facets.map((facet)=>createFacetPanel(facet, 'bar', core.fieldNameToTitle(index), facetHooks.enum));
+    }, [
+        facets,
+        index,
+        facetHooks.enum
+    ]);
+    const spans = computeRowSpan(panels.length);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid, {
+        className: "w-full mx-2 bg-base-max p-4",
+        children: panels.map((panel, index)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
+                span: spans[index],
+                children: panel
+            }, `${index}-charts-${facets[index].field}-col`))
+    });
+};
+
+const ActionButtonGroup = ()=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+        gap: "xs",
+        className: "flex pt-4 pl-2",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Save Cohort"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Export Cohort"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                size: "sm",
+                variant: "outline",
+                color: "secondary.4",
+                classNames: {
+                    root: 'bg-base-max'
+                },
+                children: "Import Cohort"
+            })
+        ]
+    });
+};
+
+const IndexPanel = ({ dataConfig, tabs, tabTitle })=>{
+    const [activeFieldDefinitions, setActiveFieldDefinitions] = React.useState([]);
+    const index = dataConfig.dataType;
+    const fields = React.useMemo(()=>getAllFieldsFromFilterConfigs(tabs ?? []), [
+        tabs
+    ]);
+    const [facetDefinitions, setFacetDefinitions] = React.useState({});
+    const [categories, setCategories] = React.useState([]);
+    const cohortFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
+    const queryFields = categories.length === 0 ? fields : activeFieldDefinitions.map((x)=>x.field);
+    const { data, isSuccess, isError: isAggsQueryError } = core.useGetAggsQuery({
+        type: index,
+        fields: queryFields,
+        filters: cohortFilters
+    }, {
+        skip: queryFields.length === 0
+    });
+    const updateFields = useDeepCompare.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
+    useDeepCompare.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__*/ jsxRuntime.jsx(ErrorCard, {
+            message: "Unable to fetch data from server"
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(CohortManager, {
+                index: index
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Flex, {
+                className: "w-full h-full bg-base-light",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(FacetSelectionPanel, {
+                        categories: categories,
+                        selectedFields: activeFieldDefinitions.map((x)=>x.field),
+                        updateSelectedField: updateFields,
+                        hooks: {
+                            useClearFilter: ()=>(field)=>null,
+                            useToggleExpandFilter: useToggleExpandFilter,
+                            useFilterExpanded: useFilterExpandedState
+                        }
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                        className: "w-full",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(ActionButtonGroup, {}),
+                            /*#__PURE__*/ jsxRuntime.jsx(ChartsAndFacetsPanel, {
+                                index: index,
+                                facets: activeFieldDefinitions
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const persistor = reduxPersist.persistStore(AppStore);
+const CohortDiscovery = (config)=>{
+    const { isLoading } = core.useGetCSRFQuery(); // need for Guppy
+    if (isLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+            maw: 400,
+            h: 100,
+            mx: "auto",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {
+                variant: "dots"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsx(react$1.PersistGate, {
+            persistor: persistor,
+            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "w-full h-full",
+                children: /*#__PURE__*/ jsxRuntime.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 = ()=>core.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 = React.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__*/ jsxRuntime.jsx("div", {
+        role: "region",
+        "aria-labelledby": "bar-comparison-title",
+        className: "flex flex-col w-full h-96",
+        children: /*#__PURE__*/ jsxRuntime.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 = React.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__*/ jsxRuntime.jsx("div", {
+        role: "region",
+        "aria-labelledby": "radar-comparison-title",
+        className: "flex flex-col w-full h-96",
+        children: /*#__PURE__*/ jsxRuntime.jsx(ReactECharts, {
+            option: chartDefinition,
+            settings: {
+                notMerge: true
+            }
+        })
+    });
+};
+
+let instance = undefined;
+const DefaultComparisonChart = ()=>{
+    return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.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 ? core.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__*/ jsxRuntime.jsxs(core$1.Group, {
+        justify: "space-between",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                fw: 600,
+                size: "sm",
+                className: "uppercase",
+                children: label
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
+                c: "primary",
+                children: value
+            })
+        ]
+    });
+};
+const StatisticsCard = ({ baseData, comparisonData })=>{
+    const metrics = computeStatistics(baseData, comparisonData);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        gap: "xs",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(LabeledValueRow, {
+                label: "Mean Absolute Error (MAE)",
+                value: metrics.mae.toFixed(4)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(LabeledValueRow, {
+                label: "Root Mean Square Error (RMSE)",
+                value: metrics.rmse.toFixed(4)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(LabeledValueRow, {
+                label: "Pearson Correlation Coefficient",
+                value: metrics.correlation.toFixed(4)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(LabeledValueRow, {
+                label: "Robust Chi-Square Statistic",
+                value: metrics.robustChiSquare.toFixed(4)
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                fw: 600,
+                size: "sm",
+                className: "uppercase",
+                children: "Chi-Square Contributions by Group"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.ScrollArea, {
+                h: 200,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
+                    striped: true,
+                    withTableBorder: true,
+                    withColumnBorders: true,
+                    stickyHeader: true,
+                    stickyHeaderOffset: 0,
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Thead, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
+                                        children: "Group"
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
+                                        children: "Contribution"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
+                            children: metrics.chiSquareContributions.map(({ group, contribution })=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                                            children: group
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.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] = React.useState(config.chartType);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Card, {
+        shadow: "xs",
+        withBorder: style === 'box',
+        className: "h-full",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
+                inheritPadding: true,
+                py: "xs",
+                withBorder: style === 'box',
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                    justify: "space-between",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                            fw: 600,
+                            children: core.fieldNameToTitle(field)
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.SegmentedControl, {
+                            value: viewType,
+                            onChange: setViewType,
+                            data: [
+                                {
+                                    label: 'Bar',
+                                    value: 'barComparison'
+                                },
+                                {
+                                    label: 'Radar',
+                                    value: 'radarComparison'
+                                },
+                                {
+                                    label: 'Statistics',
+                                    value: 'statisticsComparison'
+                                }
+                            ]
+                        })
+                    ]
+                })
+            }),
+            viewType == 'statisticsComparison' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "h-96 m-2",
+                children: /*#__PURE__*/ jsxRuntime.jsx(StatisticsCard, {
+                    baseData: groundData[field],
+                    comparisonData: comparisonData[field]
+                })
+            }) : /*#__PURE__*/ jsxRuntime.jsx(ComparisonChart, {
+                config: config,
+                groundData: groundData,
+                groundLabel: groundLabel,
+                comparisonData: comparisonData,
+                comparisonLabel: comparisonLabel,
+                field: field,
+                chartType: viewType
+            })
+        ]
+    });
+};
+
+const ComparisonCharts = ({ ground, groundLabel, comparison, comparisonLabel, comparisonChartsConfig, numberOfColumns = 2, style = 'tile' })=>{
+    const spans = computeRowSpan(Object.keys(comparisonChartsConfig).length, numberOfColumns);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid, {
+        className: "w-full p-4",
+        children: Object.entries(comparisonChartsConfig).map(([field, config], indexNum)=>{
+            return /*#__PURE__*/ jsxRuntime.jsx(core$1.Grid.Col, {
+                span: spans[indexNum],
+                children: /*#__PURE__*/ jsxRuntime.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 = jsonpathPlus.JSONPath({
+        json: data,
+        path: '$..histogram',
+        resultType: 'all'
+    });
+    const totalData = jsonpathPlus.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 (lodash.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/${core.GEN3_COMMONS_NAME}/navigation.json`);
-    let bannerConfigJSON = [];
-    try {
-        bannerConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/banner.json`);
-    } catch (e) {
-        console.log('No banner config found at: ', `config/${core.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/${core.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 } = core.useGeneralGQLQuery({
+        query: gqlQuery.query,
+        variables: JSON.parse(gqlQuery.variables)
+    });
+    const comparisonDataset = React.useMemo(()=>{
+        if (rawComparisonDataset) {
+            const results = processHistogramResponseAsPercentage(rawComparisonDataset.data);
+            return alignData(normalizeAgeOfIndex(results), groundDataset);
         }
-    };
+        return undefined;
+    }, [
+        groundDataset,
+        rawComparisonDataset
+    ]);
+    if (isComparisonError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: 'Unable to get data need for Cohort Diversity'
+        });
+    }
+    if (isComparisonLoading) {
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
+            visible: true
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        classNames: {
+            root: 'w-full m-4 mb-2'
+        },
+        "aria-label": "Main Content of Cohort Diversity App",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
+                order: 1,
+                size: "h3",
+                children: "Cohort Diversity Visualization"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
+                variant: "filled",
+                chevronPosition: "left",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
+                    value: "summaryCharts",
+                    "aria-label": "Summary Charts",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
+                            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "flex items-center justify-start space-x-2 text-accent",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(fa.FaChartPie, {
+                                        style: {
+                                            color: 'secondary.4',
+                                            width: core$1.rem(32),
+                                            height: core$1.rem(32)
+                                        }
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                        fw: 600,
+                                        children: "Summary Charts"
+                                    })
+                                ]
+                            })
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Panel, {
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Charts, {
+                                data: groundDataset ?? {},
+                                charts: config.charts,
+                                isSuccess: true,
+                                numCols: 2
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.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 } = core.createAppApiForRTKQ('cohortDiversity');
+
+const _APP_NAME = 'CohortDiversity'; // This wil be the route name of the app
+const _APP_VERSION = '1.0.0';
+const AppId = core.getGen3AppId(_APP_NAME, _APP_VERSION);
+const registerCohortDiversityApp = ()=>core.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 = core$1.createTheme({
@@ -13061,7 +14820,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 {
@@ -14092,6 +15854,7 @@ exports.QueryPage = QueryPage;
 exports.QueryPageGetServerSideProps = QueryPageGetServerSideProps;
 exports.ReactECharts = ReactECharts;
 exports.ResourcesFilters = ResourcesFilters;
+exports.SPECIAL_CASE_FIELDS = SPECIAL_CASE_FIELDS;
 exports.SessionExpiredModal = SessionExpiredModal;
 exports.StudyGroup = StudyGroup;
 exports.SubmissionPage = SubmissionPage;
@@ -14121,6 +15884,8 @@ exports.isTextTransform = isTextTransform$1;
 exports.processLabel = processLabel$1;
 exports.processRangeKeyLabel = processRangeKeyLabel;
 exports.registerCohortBuilderDefaultPreviewRenderers = registerCohortBuilderDefaultPreviewRenderers;
+exports.registerCohortDiscoveryApp = registerCohortDiscoveryApp;
+exports.registerCohortDiversityApp = registerCohortDiversityApp;
 exports.registerDefaultDiscoveryDataLoaders = registerDefaultDiscoveryDataLoaders;
 exports.registerDiscoveryDefaultCellRenderers = registerDiscoveryDefaultCellRenderers;
 exports.registerDiscoveryDefaultStudyPreviewRenderers = registerDiscoveryDefaultStudyPreviewRenderers;
@@ -14130,6 +15895,7 @@ exports.resourcePathFromProjectID = resourcePathFromProjectID;
 exports.sessionLogout = sessionLogout;
 exports.sessionToken = sessionToken;
 exports.stripTrailingSlash = stripTrailingSlash;
+exports.toDisplayName = toDisplayName;
 exports.truncateString = truncateString;
 exports.unixTimeToString = unixTimeToString;
 exports.useDiscoveryContext = useDiscoveryContext;