@gen3/frontend 0.11.0 → 0.11.11

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import React__default, { createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, createElement, forwardRef, useReducer } from 'react';
-import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, fetchFence, isFetchError, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useGetCSRFQuery, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, GEN3_FENCE_API, showModal, Modals, isAuthenticated, useGetLoginProvidersQuery, hideModal, selectCurrentModal, fieldNameToTitle, isOperationWithField, selectShouldShareFilters, selectSharedFilters, updateCohortFilter as updateCohortFilter$1, selectIndexedFilterByName, isUnion, isOperatorWithFieldAndArrayOfOperands, extractEnumFilterValue, removeCohortFilter as removeCohortFilter$1, trimFirstFieldNameToTitle, useIsUserLoggedIn, GEN3_DOMAIN, useDataLibrary, DataLibraryStoreMode, buildListItemsGroupedByDataset, extractFileDatasetsInRecords, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, setCohortFilter as setCohortFilter$1, clearCohortFilters as clearCohortFilters$1, handleOperation, selectAvailableCohorts, selectCurrentCohortId as selectCurrentCohortId$1, selectCohortFilters, selectCurrentCohortModified, selectCurrentCohortSaved, setCohortIndexFilters, setActiveCohort, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, setCohortFilterCombineMode, selectCohortFilterCombineMode, selectCurrentCohortName as selectCurrentCohortName$1, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, Accessibility, selectAllCohortFiltersCollapsed, toggleCohortBuilderAllFilters, setShouldShareFilters, useGetAggsQuery, useGetAggsNoFilterSelfQuery, isIntersection, useGetCountsQuery, setSharedFilters, usePrevious, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_API, GEN3_COMMONS_NAME, getTimestamp, createAppStore, buildGetAggregationQuery, processHistogramResponse, getRemoteSupportServiceRegistry, isHttpStatusError, MissingServiceConfigurationError, useLazyGetAggsNoFilterSelfQuery, useCreateRequestMutation, useUserRequestQuery, getGen3AppId, createGen3AppWithOwnStore, createAppApiForRTKQ, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, fetchJSONDataFromURL, HttpMethod, groupSharedFields, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, getFederatedLoginStatus, queryMultipleMDSRecords, GEN3_MANIFEST_API, extractIndexFromDataLibraryCohort, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, useLazyGetCrosswalkDataQuery, roundHistogramResponse } from '@gen3/core';
+import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, fetchFence, isFetchError, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useGetCSRFQuery, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, GEN3_FENCE_API, showModal, Modals, isAuthenticated, useGetLoginProvidersQuery, hideModal, selectCurrentModal, fieldNameToTitle, isOperationWithField, selectShouldShareFilters, selectSharedFilters, updateCohortFilter as updateCohortFilter$1, selectIndexedFilterByName, isUnion, isOperatorWithFieldAndArrayOfOperands, extractEnumFilterValue, removeCohortFilter as removeCohortFilter$1, trimFirstFieldNameToTitle, useIsUserLoggedIn, GEN3_DOMAIN, useDataLibrary, DataLibraryStoreMode, buildListItemsGroupedByDataset, extractFileDatasetsInRecords, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, setCohortFilter as setCohortFilter$1, clearCohortFilters as clearCohortFilters$1, handleOperation, selectAvailableCohorts, selectCurrentCohortId as selectCurrentCohortId$1, selectCohortFilters, selectCurrentCohortModified, selectCurrentCohortSaved, setCohortIndexFilters, setActiveCohort, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, setCohortFilterCombineMode, selectCohortFilterCombineMode, selectCurrentCohortName as selectCurrentCohortName$1, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, Accessibility, selectAllCohortFiltersCollapsed, toggleCohortBuilderAllFilters, setShouldShareFilters, useGetAggsQuery, useGetAggsNoFilterSelfQuery, isIntersection, useGetCountsQuery, setSharedFilters, usePrevious, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_API, GEN3_COMMONS_NAME, getTimestamp, createAppStore, getRemoteSupportServiceRegistry, isHttpStatusError, MissingServiceConfigurationError, useLazyGetAggsNoFilterSelfQuery, useCreateRequestMutation, buildGetAggregationQuery, processHistogramResponse, roundHistogramResponse, selectCSRFToken, useUserRequestQuery, getGen3AppId, createGen3AppWithOwnStore, createAppApiForRTKQ, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, fetchJSONDataFromURL, HttpMethod, groupSharedFields, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, getFederatedLoginStatus, queryMultipleMDSRecords, GEN3_MANIFEST_API, extractIndexFromDataLibraryCohort, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, useLazyGetCrosswalkDataQuery } from '@gen3/core';
 import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Center, Loader, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Accordion, Switch, ActionIcon, Badge, TextInput, SegmentedControl, NumberInput, RangeSlider, MultiSelect, SimpleGrid, Highlight, MantineProvider, Tabs, Flex, Menu, Alert, Drawer, CopyButton, factory, useProps, getStyleObject, Paper, useCombobox, Combobox, ScrollArea, Autocomplete, Title, Transition, rem, Stepper, Image as Image$1, NavLink, List, createTheme, Pagination, FileInput, CloseButton } from '@mantine/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
 import { useRouter } from 'next/router';
@@ -22,7 +22,7 @@ import { useCookies } from 'react-cookie';
 import FileSaver from 'file-saver';
 import { useClipboard, useResizeObserver, useDisclosure, useElementSize, useDidUpdate, mergeRefs, useReducedMotion, useMediaQuery, useFullscreen, useLocalStorage, useScrollIntoView, getHotkeyHandler } from '@mantine/hooks';
 import { defaultComposer } from 'default-composer';
-import { Icon, addCollection } from '@iconify/react';
+import { Icon, addCollection } from '@iconify-icon/react';
 import { init, getInstanceByDom, graphic } from 'echarts';
 import { VictoryChart, VictoryTheme, VictoryAxis, VictoryStack, VictoryBar, Bar, VictoryTooltip, VictoryContainer } from 'victory';
 import { FaUndo, FaPlus, FaExternalLinkAlt, FaExclamationTriangle, FaExclamation, FaQuestion, FaUser, FaExclamationCircle, FaRegStopCircle, FaChartPie, FaCircle, FaCheck, FaVideo, FaRegQuestionCircle, FaGraduationCap, FaRedo, FaUpload, FaDownload } from 'react-icons/fa';
@@ -609,6 +609,27 @@ const toDisplayName = (field)=>{
     if (!fieldName) return 'NotSet';
     return fieldName.split('_').map((w)=>capitalize$1(w)).join(' ');
 };
+/*
+  Function to convert counts to a string with units
+  For example: count = 100 units = 'cases' => '100 Cases'
+  Function should handle pluralization
+ */ const toCountsString = (counts, units)=>{
+    if (!counts) return `No ${capitalize$1(pluralize(units))}`;
+    // return a string with counts and units handling pluralization
+    const unitDisplay = counts === 1 ? units : pluralize(units);
+    return `${counts.toLocaleString()} ${capitalize$1(unitDisplay)}`;
+};
+// Helper function to handle basic pluralization
+const pluralize = (word)=>{
+    // Handle special cases
+    if (word.endsWith('y')) {
+        return word.slice(0, -1) + 'ies';
+    } else if (word.endsWith('s') || word.endsWith('x') || word.endsWith('z') || word.endsWith('ch') || word.endsWith('sh')) {
+        return word + 'es';
+    } else {
+        return word + 's';
+    }
+};
 
 const isArrayOfString = (value)=>{
     return Array.isArray(value) && value.every((element)=>typeof element === 'string');
@@ -2476,10 +2497,11 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
     const chartDefinition = useMemo(()=>{
         return {
             tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    // Use axis to trigger tooltip
-                    type: 'shadow'
+                trigger: 'item',
+                formatter: function(param) {
+                    const p = isArray(param) && param.length > 0 ? param[0] : param;
+                    const colorSquare = `<span style="display:inline-block; width:10px; height:10px; background-color:${p.color}; margin-right:5px;"></span>`;
+                    return `${colorSquare}${p.seriesName}: <b>${p.value}</b>`;
                 }
             },
             legend: {
@@ -4822,7 +4844,7 @@ const FacetGroup = ({ facets, children })=>{
     const availableFields = facets.map((f)=>f.field);
     useScrollToHash(availableFields, false);
     return /*#__PURE__*/ jsx("div", {
-        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 w-content gap-4 my-4 ml-2 w-full",
+        className: "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 3xl:grid-cols-5 w-content gap-4 ml-2 w-full",
         "data-testid": "title-cohort-builder-facet-groups",
         children: children
     });
@@ -5688,11 +5710,10 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
  * @param iconHeight - the height of the icon
  * @param classNames - the class names to use for root, label, icon/tooltip and arrow'
  * @param noBasePath - set to true to avoid prepending a basePath to the link
- */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {}, noBasePath = false })=>{
+ */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '32px', classNames = {}, noBasePath = false })=>{
     const classNamesDefaults = {
-        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
+        root: 'flex flex-col flex-nowrap px-3 py-2 pt-4 justify-between items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100',
         label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
-        icon: 'mt-0.5 ml-1',
         ...TooltipStyle
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
@@ -11594,7 +11615,7 @@ const CountsValue = ({ label, isSuccess, counts })=>{
                 p: "xs",
                 withBorder: true,
                 className: "bg-primary text-primary-contrast font-heading text-md font-semibold",
-                children: `${counts?.toLocaleString() ?? '...'} ${label}`
+                children: toCountsString(counts, label)
             })
         ]
     });
@@ -12709,6 +12730,11 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         filters: cohortFilters,
         accessibility: accessLevel
     });
+    const { data: counts, isSuccess: isCountSuccess, isError } = useGetCountsQuery({
+        type: index,
+        filters: cohortFilters,
+        accessibility: accessLevel
+    });
     const [facetDefinitions, setFacetDefinitions] = useState({});
     useEffect(()=>{
         // Check if the router initiated the change
@@ -12846,25 +12872,42 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         getRangeFacetData,
         index
     ]);
-    return /*#__PURE__*/ jsx(FacetTabs, {
-        activeTab: activeTab,
-        setActiveTab: setActiveTab,
-        facetDefinitions: facetDefinitions,
-        tabsConfig: tabsConfig,
-        usedFacets: cohortBuilderFilters,
-        hooks: facetDataHooks,
-        customFacetHooks: {
-            useCustomFacets,
-            useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
-                    data: {},
-                    isSuccess: true
-                }),
-            useAddCustomFilter: ()=>(filter)=>{},
-            useRemoveCustomFilter: ()=>(filter)=>{}
+    return /*#__PURE__*/ jsxs(Stack, {
+        gap: "xs",
+        align: "stretch",
+        classNames: {
+            root: 'w-full'
         },
-        getFacetLabel: ()=>'Cases',
-        cardScrollMargin: calculateStickyHeaderHeight(),
-        useFieldNameToTitle: useFieldNameToTitle
+        children: [
+            /*#__PURE__*/ jsx(Group, {
+                justify: "flex-end",
+                children: /*#__PURE__*/ jsx(CountsValue, {
+                    label: index,
+                    counts: counts,
+                    isSuccess: isCountSuccess
+                })
+            }),
+            /*#__PURE__*/ jsx(FacetTabs, {
+                activeTab: activeTab,
+                setActiveTab: setActiveTab,
+                facetDefinitions: facetDefinitions,
+                tabsConfig: tabsConfig,
+                usedFacets: cohortBuilderFilters,
+                hooks: facetDataHooks,
+                customFacetHooks: {
+                    useCustomFacets,
+                    useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
+                            data: {},
+                            isSuccess: true
+                        }),
+                    useAddCustomFilter: ()=>(filter)=>{},
+                    useRemoveCustomFilter: ()=>(filter)=>{}
+                },
+                getFacetLabel: ()=>'Cases',
+                cardScrollMargin: calculateStickyHeaderHeight(),
+                useFieldNameToTitle: useFieldNameToTitle
+            })
+        ]
     });
 };
 
@@ -15488,85 +15531,26 @@ const createFacetPanel = (facet, chartType, valueLabel, hooks)=>{
     return null;
 };
 
-const GEN3_COHORT_DISCOVERY_API = process.env.GEN3_COHORT_DISCOVERY_API || `${GEN3_API}/api/auth/analysis/cohortDiscovery`;
-
-const useGraphQLData = (url, body, skip)=>{
-    // Create a fetcher function that handles the GraphQL POST request
-    const fetcher = async (fetchUrl, fetchBody)=>{
-        const headers = new Headers({
-            Accept: 'application/json',
-            'Content-Type': 'application/json'
-        });
-        if (process.env.NODE_ENV === 'development') {
-            // NOTE: This cookie can only be accessed from the client side
-            // in development mode. Otherwise, the cookie is set as httpOnly
-            const accessToken = getCookie('credentials_token');
-            if (accessToken) {
-                headers.set('Authorization', `Bearer ${accessToken}`);
-            }
-        }
-        const response = await fetch(fetchUrl, {
-            method: 'POST',
-            headers: headers,
-            body: JSON.stringify(fetchBody)
-        });
-        if (!response.ok) {
-            throw new Error(`Error ${response.status}: ${response.statusText}`);
-        }
-        return await response.json();
-    };
-    // Use SWR with the fetcher
-    const { data, error, isLoading, mutate } = useSWR(!skip ? [
-        url,
-        body
-    ] : null, ([fetchUrl, fetchBody])=>fetcher(fetchUrl, fetchBody), {
-        revalidateOnFocus: false
-    });
-    // Format error to match your ErrorDetails interface
-    const formattedError = error ? {
-        status: error.message.match(/\d+/)?.[0] || 'Unknown',
-        message: error.message
-    } : null;
-    return {
-        data,
-        isLoading,
-        isSuccess: !!data && !error,
-        isError: !!error,
-        error: formattedError,
-        mutate
-    };
-};
-const useRoundedAggsQuery = ({ type, fields, filters, accessibility = Accessibility.ALL }, { skip } = {
-    skip: false
-})=>{
-    const response = useGraphQLData(GEN3_COHORT_DISCOVERY_API, buildGetAggregationQuery(type, fields, filters, accessibility, false), skip);
-    return {
-        ...response,
-        data: response?.data?.data ? processHistogramResponse(response?.data.data?._aggregation[type] ?? {}) : {}
-    };
-};
-
 const NUM_COLS = 2; // TODO: add to config
 /**
  * CartsAndFacetsPanel component
  *
  * @param {string} index - The index type used for querying data.
+ * @param data
+ * @param isLoading
+ * @param isError
+ * @param isSuccess
  * @param {Array} facets - The list of facets to be rendered.
  * @returns {JSX.Element} The rendered component showing facets.
- */ const ChartsAndFacetsPanel = ({ index, facets })=>{
+ */ const ChartsAndFacetsPanel = ({ index, data, isLoading, isError, isSuccess, facets })=>{
     const cohortFilters = useAppSelector((state)=>selectCurrentCohortIndexFilters(state, index));
-    const { data, isSuccess, isLoading: isAggsQueryFetching, isError: isAggsQueryError } = useRoundedAggsQuery({
-        type: index,
-        fields: facets.map((x)=>x.field),
-        filters: cohortFilters
-    });
     const getEnumFacetData = useDeepCompareCallback((field)=>{
         return {
             data: processBucketData(data?.[field]),
             enumFilters: field in cohortFilters.root ? extractEnumFilterValue(cohortFilters.root[field]) : undefined,
             isSuccess: isSuccess,
-            isFetching: isAggsQueryFetching,
-            isError: isAggsQueryError
+            isFetching: isLoading,
+            isError: isError
         };
     }, [
         cohortFilters,
@@ -16105,6 +16089,67 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     });
 };
 
+process.env.GEN3_COHORT_DISCOVERY_API || `${GEN3_API}/api/auth/analysis/cohortDiscovery`;
+
+const useGraphQLData = (url, body, skip)=>{
+    // Create a fetcher function that handles the GraphQL POST request
+    const csrfToken = useCoreSelector((state)=>selectCSRFToken(state));
+    const fetcher = async (fetchUrl, fetchBody)=>{
+        const headers = new Headers({
+            Accept: 'application/json',
+            'Content-Type': 'application/json',
+            'X-CSRF-Token': csrfToken ?? ''
+        });
+        if (process.env.NODE_ENV === 'development') {
+            // NOTE: This cookie can only be accessed from the client side
+            // in development mode. Otherwise, the cookie is set as httpOnly
+            const accessToken = getCookie('credentials_token');
+            if (accessToken) {
+                headers.set('Authorization', `Bearer ${accessToken}`);
+            }
+        }
+        const response = await fetch(fetchUrl, {
+            method: 'POST',
+            headers: headers,
+            body: JSON.stringify(fetchBody)
+        });
+        if (!response.ok) {
+            throw new Error(`Error ${response.status}: ${response.statusText}`);
+        }
+        return await response.json();
+    };
+    // Use SWR with the fetcher
+    const { data, error, isLoading, mutate } = useSWR(!skip ? [
+        url,
+        body
+    ] : null, ([fetchUrl, fetchBody])=>fetcher(fetchUrl, fetchBody), {
+        revalidateOnFocus: false
+    });
+    // Format error to match your ErrorDetails interface
+    const formattedError = error ? {
+        status: error.message.match(/\d+/)?.[0] || 'Unknown',
+        message: error.message
+    } : null;
+    return {
+        data,
+        isLoading,
+        isSuccess: !!data && !error,
+        isError: !!error,
+        error: formattedError,
+        mutate
+    };
+};
+const COHORT_DISCOVERY_LIMIT$1 = process.env.NEXT_PUBLIC_GEN3_COHORT_DISCOVERY_LIMIT ? Number(process.env.NEXT_PUBLIC_GEN3_COHORT_DISCOVERY_LIMIT) : 100;
+const useUnsecureRoundedAggsQuery = ({ type, fields, filters, accessibility = Accessibility.ALL }, { skip } = {
+    skip: false
+})=>{
+    const response = useGraphQLData(`${GEN3_GUPPY_API}/graphql`, buildGetAggregationQuery(type, fields, filters, accessibility, false), skip);
+    return {
+        ...response,
+        data: response?.data?.data ? processHistogramResponse(roundHistogramResponse(response?.data?.data._aggregation[type], COHORT_DISCOVERY_LIMIT$1)) : {}
+    };
+};
+
 const CohortQueryExpression = ({ index })=>{
     const currentCohortId = useAppSelector((state)=>selectCurrentCohortId(state));
     const currentCohortName = useAppSelector((state)=>selectCurrentCohortName(state));
@@ -16178,13 +16223,12 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection, indexResources
         facetDefinitions
     ]);
     const cohortFilters = useAppSelector((state)=>selectCurrentCohortIndexFilters(state, index));
-    const queryFields = categories.length === 0 ? fields : activeFieldDefinitions.map((x)=>x.field);
-    const { data, isSuccess, isError: isAggsQueryError } = useRoundedAggsQuery({
+    const { data, isSuccess, isLoading: isAggsQueryFetching, isError: isAggsQueryError } = useUnsecureRoundedAggsQuery({
         type: index,
-        fields: queryFields,
+        fields: fields,
         filters: cohortFilters
     }, {
-        skip: queryFields.length === 0
+        skip: fields.length === 0
     });
     const updateFields = useDeepCompareCallback((field, checked)=>{
         if (!checked) {
@@ -16270,6 +16314,10 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection, indexResources
                                 remoteSupportService: remoteSupportService
                             }),
                             selectedFacets.length > 0 ? /*#__PURE__*/ jsx(ChartsAndFacetsPanel, {
+                                data: data,
+                                isLoading: isAggsQueryFetching,
+                                isError: isAggsQueryError,
+                                isSuccess: isSuccess,
                                 index: index,
                                 facets: activeFieldDefinitions
                             }) : /*#__PURE__*/ jsx(Center, {
@@ -25056,8 +25104,26 @@ const TabbedCohortBuilderPage = ({ headerProps, footerProps, configuration })=>{
             content: 'Tabbed Cohort Builder Page',
             key: 'gen3-tabbed-cohort-builder-page'
         },
-        children: /*#__PURE__*/ jsx(TabbedCohortBuilder, {
-            ...configuration
+        children: /*#__PURE__*/ jsxs(Stack, {
+            align: "stretch",
+            classNames: {
+                root: 'w-full'
+            },
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "w-full flex-col flex gap-4 fixed bg-white z-10",
+                    children: /*#__PURE__*/ jsx(CohortManager$1, {
+                        index: configuration.index
+                    })
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    className: "w-full mt-40 mr-4",
+                    children: /*#__PURE__*/ jsx(TabbedCohortBuilder, {
+                        ...configuration,
+                        index: configuration.index
+                    })
+                })
+            ]
         })
     });
 };
@@ -25524,5 +25590,5 @@ const staticNotebookAPI = async (req, res)=>{
     });
 };
 
-export { AISearchPageGetServerSideProps, AccessLevel, ActionBar, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisCenterWithSections, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BAD_DATA_MESSAGE, Banner, BaseModal, Charts, CohortBuilder, CohortManager$1 as CohortManager, CollapsableCharts, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource$1 as ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DAYS_IN_YEAR, DEFAULT_MAXIMUM, DEFAULT_MINIMUM, DEFAULT_VISIBLE_ITEMS$1 as DEFAULT_VISIBLE_ITEMS, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, EnumFacet, EnumFacetChart, ErrorCard, ExactValueFacet, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FacetControlsHeader, FacetExpander, FacetSelector, FacetSortPanel, FacetTabs, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header$1 as Header, HoverLink, LandingPage, LandingPageGetServerSideProps, LoginButton$1 as LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, MultiSelectValueFacet, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryExpression, QueryExpressionContext, QueryExpressionSection, QueryPage, QueryPageGetServerSideProps, RangeFacet, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, SinglePageStudyDetailsPanel, StaticNotebookIFrame, StaticNotebookViewer, StudyDetailsPanel, StudyGroup, StudyGroupPanel, StudyProvider, SubmissionPage, SubmissionPageGetServerSideProps, TabbedCohortBuilder, TabbedCohortBuilderPage, TabbedCohortBuilderPageGetServerSideProps, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, accessibleFieldName, addIntersectionToIncludes, addUnion, analysisApiCohortDiscovery, buildNested, capitalize, classifyFacets, compareKeysAscending, compareKeysDescending, computeRowSpan, convertMinutesToMilliseconds, convertPathsToTree, convertSecondsToMilliseconds, convertToStringArray, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, extractRangeValues, focusStyles, getAllFieldsFromFilterConfigs, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isEnumFacetResponse, isHeaderMetadata, isPropertyKey, isTextTransform$1 as isTextTransform, mapFacetSortToSortType, processBucketData, processLabel$1 as processLabel, processRangeData, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeIntersectionFromEnum, removeKey$1 as removeKey, removeUnion, resourcePathFromProjectID, sessionLogout, sessionToken, staticNotebookAPI, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, updateFacetEnum, useClearFilters$1 as useClearFilters, useDiscoveryContext, useExtractEnumFilterValues, useExtractRangeFilterValues, useFieldNameToTitle, useGetFacetFilters$1 as useGetFacetFilters, useUpdateFilters$1 as useUpdateFilters, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AccessLevel, ActionBar, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisCenterWithSections, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BAD_DATA_MESSAGE, Banner, BaseModal, Charts, CohortBuilder, CohortManager$1 as CohortManager, CollapsableCharts, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource$1 as ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DAYS_IN_YEAR, DEFAULT_MAXIMUM, DEFAULT_MINIMUM, DEFAULT_VISIBLE_ITEMS$1 as DEFAULT_VISIBLE_ITEMS, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, EnumFacet, EnumFacetChart, ErrorCard, ExactValueFacet, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FacetControlsHeader, FacetExpander, FacetSelector, FacetSortPanel, FacetTabs, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header$1 as Header, HoverLink, LandingPage, LandingPageGetServerSideProps, LoginButton$1 as LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, MultiSelectValueFacet, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryExpression, QueryExpressionContext, QueryExpressionSection, QueryPage, QueryPageGetServerSideProps, RangeFacet, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, SinglePageStudyDetailsPanel, StaticNotebookIFrame, StaticNotebookViewer, StudyDetailsPanel, StudyGroup, StudyGroupPanel, StudyProvider, SubmissionPage, SubmissionPageGetServerSideProps, TabbedCohortBuilder, TabbedCohortBuilderPage, TabbedCohortBuilderPageGetServerSideProps, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, accessibleFieldName, addIntersectionToIncludes, addUnion, analysisApiCohortDiscovery, buildNested, capitalize, classifyFacets, compareKeysAscending, compareKeysDescending, computeRowSpan, convertMinutesToMilliseconds, convertPathsToTree, convertSecondsToMilliseconds, convertToStringArray, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, extractRangeValues, focusStyles, getAllFieldsFromFilterConfigs, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isEnumFacetResponse, isHeaderMetadata, isPropertyKey, isTextTransform$1 as isTextTransform, mapFacetSortToSortType, processBucketData, processLabel$1 as processLabel, processRangeData, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeIntersectionFromEnum, removeKey$1 as removeKey, removeUnion, resourcePathFromProjectID, sessionLogout, sessionToken, staticNotebookAPI, stripTrailingSlash, toCountsString, toDisplayName, truncateString, unixTimeToString, updateFacetEnum, useClearFilters$1 as useClearFilters, useDiscoveryContext, useExtractEnumFilterValues, useExtractRangeFilterValues, useFieldNameToTitle, useGetFacetFilters$1 as useGetFacetFilters, useUpdateFilters$1 as useUpdateFilters, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map