@gen3/frontend 0.11.0 → 0.11.11

package/dist/cjs/index.js

@@ -23,7 +23,7 @@ var reactCookie = require('react-cookie');
 var FileSaver = require('file-saver');
 var hooks = require('@mantine/hooks');
 var defaultComposer = require('default-composer');
-var react = require('@iconify/react');
+var react = require('@iconify-icon/react');
 var echarts = require('echarts');
 var victory = require('victory');
 var fa = require('react-icons/fa');
@@ -629,6 +629,27 @@ const toDisplayName = (field)=>{
     if (!fieldName) return 'NotSet';
     return fieldName.split('_').map((w)=>lodash.capitalize(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 ${lodash.capitalize(pluralize(units))}`;
+    // return a string with counts and units handling pluralization
+    const unitDisplay = counts === 1 ? units : pluralize(units);
+    return `${counts.toLocaleString()} ${lodash.capitalize(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');
@@ -2496,10 +2517,11 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
     const chartDefinition = React.useMemo(()=>{
         return {
             tooltip: {
-                trigger: 'axis',
-                axisPointer: {
-                    // Use axis to trigger tooltip
-                    type: 'shadow'
+                trigger: 'item',
+                formatter: function(param) {
+                    const p = lodash.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: {
@@ -4842,7 +4864,7 @@ const FacetGroup = ({ facets, children })=>{
     const availableFields = facets.map((f)=>f.field);
     useScrollToHash(availableFields, false);
     return /*#__PURE__*/ jsxRuntime.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
     });
@@ -5708,11 +5730,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);
@@ -11614,7 +11635,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)
             })
         ]
     });
@@ -12729,6 +12750,11 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         filters: cohortFilters,
         accessibility: accessLevel
     });
+    const { data: counts, isSuccess: isCountSuccess, isError } = core.useGetCountsQuery({
+        type: index,
+        filters: cohortFilters,
+        accessibility: accessLevel
+    });
     const [facetDefinitions, setFacetDefinitions] = React.useState({});
     React.useEffect(()=>{
         // Check if the router initiated the change
@@ -12866,25 +12892,42 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
         getRangeFacetData,
         index
     ]);
-    return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsxs(core$1.Stack, {
+        gap: "xs",
+        align: "stretch",
+        classNames: {
+            root: 'w-full'
         },
-        getFacetLabel: ()=>'Cases',
-        cardScrollMargin: calculateStickyHeaderHeight(),
-        useFieldNameToTitle: useFieldNameToTitle
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+                justify: "flex-end",
+                children: /*#__PURE__*/ jsxRuntime.jsx(CountsValue, {
+                    label: index,
+                    counts: counts,
+                    isSuccess: isCountSuccess
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.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
+            })
+        ]
     });
 };
 
@@ -15508,85 +15551,26 @@ const createFacetPanel = (facet, chartType, valueLabel, hooks)=>{
     return null;
 };
 
-const GEN3_COHORT_DISCOVERY_API = process.env.GEN3_COHORT_DISCOVERY_API || `${core.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 = cookiesNext.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 = core.Accessibility.ALL }, { skip } = {
-    skip: false
-})=>{
-    const response = useGraphQLData(GEN3_COHORT_DISCOVERY_API, core.buildGetAggregationQuery(type, fields, filters, accessibility, false), skip);
-    return {
-        ...response,
-        data: response?.data?.data ? core.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 = useDeepCompare.useDeepCompareCallback((field)=>{
         return {
             data: processBucketData(data?.[field]),
             enumFilters: field in cohortFilters.root ? core.extractEnumFilterValue(cohortFilters.root[field]) : undefined,
             isSuccess: isSuccess,
-            isFetching: isAggsQueryFetching,
-            isError: isAggsQueryError
+            isFetching: isLoading,
+            isError: isError
         };
     }, [
         cohortFilters,
@@ -16125,6 +16109,67 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     });
 };
 
+process.env.GEN3_COHORT_DISCOVERY_API || `${core.GEN3_API}/api/auth/analysis/cohortDiscovery`;
+
+const useGraphQLData = (url, body, skip)=>{
+    // Create a fetcher function that handles the GraphQL POST request
+    const csrfToken = core.useCoreSelector((state)=>core.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 = cookiesNext.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 = core.Accessibility.ALL }, { skip } = {
+    skip: false
+})=>{
+    const response = useGraphQLData(`${core.GEN3_GUPPY_API}/graphql`, core.buildGetAggregationQuery(type, fields, filters, accessibility, false), skip);
+    return {
+        ...response,
+        data: response?.data?.data ? core.processHistogramResponse(core.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));
@@ -16198,13 +16243,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 = useDeepCompare.useDeepCompareCallback((field, checked)=>{
         if (!checked) {
@@ -16290,6 +16334,10 @@ const IndexPanel = ({ dataConfig, tabs, tabTitle, emptySelection, indexResources
                                 remoteSupportService: remoteSupportService
                             }),
                             selectedFacets.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(ChartsAndFacetsPanel, {
+                                data: data,
+                                isLoading: isAggsQueryFetching,
+                                isError: isAggsQueryError,
+                                isSuccess: isSuccess,
                                 index: index,
                                 facets: activeFieldDefinitions
                             }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
@@ -25076,8 +25124,26 @@ const TabbedCohortBuilderPage = ({ headerProps, footerProps, configuration })=>{
             content: 'Tabbed Cohort Builder Page',
             key: 'gen3-tabbed-cohort-builder-page'
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(TabbedCohortBuilder, {
-            ...configuration
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+            align: "stretch",
+            classNames: {
+                root: 'w-full'
+            },
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "w-full flex-col flex gap-4 fixed bg-white z-10",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(CohortManager$1, {
+                        index: configuration.index
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "w-full mt-40 mr-4",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(TabbedCohortBuilder, {
+                        ...configuration,
+                        index: configuration.index
+                    })
+                })
+            ]
         })
     });
 };
@@ -25717,6 +25783,7 @@ exports.sessionLogout = sessionLogout;
 exports.sessionToken = sessionToken;
 exports.staticNotebookAPI = staticNotebookAPI;
 exports.stripTrailingSlash = stripTrailingSlash;
+exports.toCountsString = toCountsString;
 exports.toDisplayName = toDisplayName;
 exports.truncateString = truncateString;
 exports.unixTimeToString = unixTimeToString;