@gen3/frontend 0.11.1 → 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
+            })
+        ]
     });
 };
 
@@ -25081,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
+                    })
+                })
+            ]
         })
     });
 };
@@ -25722,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;