@gen3/frontend 0.11.12 → 0.11.14

package/dist/esm/index.js

@@ -2,7 +2,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, selectAllCohortFiltersCollapsed, Accessibility, toggleCohortBuilderAllFilters, setShouldShareFilters, 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, setCohortFilterCombineMode, selectCohortFilterCombineMode, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, selectCurrentCohortName as selectCurrentCohortName$1, useGeneralGQLQuery, selectIndexFilters, useGetRawDataAndTotalCountsQuery, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, 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, SegmentedControl as SegmentedControl$1, ActionIcon, Badge, TextInput, NumberInput, RangeSlider, MultiSelect, Tabs, SimpleGrid, Highlight, MantineProvider, 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 { 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, SegmentedControl as SegmentedControl$1, ActionIcon, Badge, TextInput, NumberInput, RangeSlider, MultiSelect, Tabs, SimpleGrid, Highlight, MantineProvider, Flex, Menu, Alert, Drawer, CopyButton, factory, useProps, getStyleObject, Paper, useCombobox, Combobox, ScrollArea, Autocomplete, Title, Transition, rem, Stepper, Spoiler, 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';
 import { usePathname } from 'next/navigation';
@@ -1460,7 +1460,7 @@ function hashCode(str) {
                     dangerouslySetInnerHTML: {
                         __html: textString
                     },
-                    "aria-label": "HTML content" // Provide context for HTML rendered content
+                    "aria-label": "HTML content"
                 });
             }
         case "textArray":
@@ -1600,7 +1600,7 @@ function hashCode(str) {
  * @param {string} paramValue - The parameter value
  * @returns {string} - The URL with the added parameter
  */ const appendParameterToUrl = (url, paramName, paramValue)=>{
-    if (!url || false) {
+    if (!url || !paramName) {
         return url;
     }
     // Extract hash fragment if present
@@ -1936,8 +1936,7 @@ const saveToFile = (savingStr, filename = 'credentials.json')=>{
             children: [
                 credentials.api_key === '' && /*#__PURE__*/ jsx(LoadingOverlay, {
                     visible: true
-                }) // pragma: allowlist-secret;
-                ,
+                }),
                 /*#__PURE__*/ jsx("p", {
                     children: "This key is only shown once. Please copy or save it and store it in a safe place."
                 }),
@@ -2494,7 +2493,7 @@ const processChartData$2 = (facetData, valueType = 'count', total, maxBins = 100
 };
 const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true })=>{
     const chartData = processChartData$2(data, valueType, total);
-    const chartDefinition = useMemo(()=>{
+    const chartDefinition = useDeepCompareMemo(()=>{
         return {
             tooltip: {
                 trigger: 'item',
@@ -2536,12 +2535,17 @@ const HorizontalBarChart = ({ data, valueType, total, showLegendInChart = true }
             series: chartData
         };
     }, [
-        chartData
+        chartData,
+        showLegendInChart
     ]);
     return /*#__PURE__*/ jsx("div", {
         className: "w-full h-64",
         children: /*#__PURE__*/ jsx(ReactECharts, {
-            option: chartDefinition
+            option: chartDefinition,
+            settings: {
+                notMerge: true,
+                lazyUpdate: false
+            }
         })
     });
 };
@@ -2569,7 +2573,11 @@ const ChartRendererFactory = ()=>{
     // TODO: add default chart chart for missing chart type
     const element = ChartRendererFactory().getRenderer('chart', type);
     return element({
-        ...chartProps
+        total: chartProps.total,
+        valueType: chartProps.valueType,
+        label: chartProps.label,
+        data: chartProps.data,
+        showLegendInChart: chartProps.showLegendInChart
     }, parameters);
 };
 
@@ -2587,6 +2595,106 @@ const chartColors = [
     '#9a60b4',
     '#ea7ccc'
 ];
+const LegendRows = ({ data })=>{
+    const moreThanMaxRows = data.length > MAX_LEGEND_ROWS;
+    const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
+    return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
+            children: [
+                /*#__PURE__*/ jsxs(Table.Td, {
+                    children: [
+                        /*#__PURE__*/ jsx(ColorSwatch, {
+                            className: "inline-block mr-2 align-middle",
+                            size: "1em",
+                            radius: "xs",
+                            color: chartColors?.[elIndex % chartColors.length] || ''
+                        }),
+                        element.key
+                    ]
+                }),
+                /*#__PURE__*/ jsx(Table.Td, {
+                    className: "text-right",
+                    children: element.count
+                })
+            ]
+        }, elIndex));
+};
+const LegendOverflow = ({ chart, data, chartTitle, counts })=>{
+    const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = useDisclosure(false);
+    const theme = useMantineTheme();
+    return /*#__PURE__*/ jsxs(React__default.Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(Modal, {
+                opened: openedMoreRows,
+                onClose: closeMoreRows,
+                title: chartTitle,
+                size: "xl",
+                children: /*#__PURE__*/ jsxs(Grid, {
+                    children: [
+                        /*#__PURE__*/ jsx(Grid.Col, {
+                            span: 6,
+                            children: createChart(chart.chartType, {
+                                data: data === undefined ? [] : data,
+                                total: counts ?? 1,
+                                valueType: chart.valueType ?? 'count',
+                                label: chart.label,
+                                showLegendInChart: chart.showLegendInChart
+                            })
+                        }, "modal-col-1"),
+                        /*#__PURE__*/ jsx(Grid.Col, {
+                            span: 6,
+                            children: /*#__PURE__*/ jsx("div", {
+                                className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
+                                children: /*#__PURE__*/ jsx(Table, {
+                                    withRowBorders: false,
+                                    classNames: {
+                                        table: '',
+                                        td: 'p-1 leading-3'
+                                    },
+                                    children: /*#__PURE__*/ jsx(Table.Tbody, {
+                                        children: data.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
+                                                children: [
+                                                    /*#__PURE__*/ jsxs(Table.Td, {
+                                                        children: [
+                                                            /*#__PURE__*/ jsx(ColorSwatch, {
+                                                                className: "inline-block mr-2 align-middle",
+                                                                size: "1em",
+                                                                radius: "xs",
+                                                                color: chartColors?.[elIndex % chartColors.length] || ''
+                                                            }),
+                                                            element.key
+                                                        ]
+                                                    }),
+                                                    /*#__PURE__*/ jsx(Table.Td, {
+                                                        className: "text-right",
+                                                        children: element.count
+                                                    })
+                                                ]
+                                            }, elIndex))
+                                    })
+                                })
+                            })
+                        }, "modal-col-2")
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxs(Button, {
+                variant: "subtle",
+                onClick: openMoreRows,
+                leftSection: /*#__PURE__*/ jsx(Icon, {
+                    icon: "gen3:open-in-modal",
+                    height: 24,
+                    width: 24,
+                    color: theme.colors.accent[5]
+                }),
+                className: "text-black hover:text-black",
+                children: [
+                    data.length - MAX_LEGEND_ROWS,
+                    " more"
+                ]
+            })
+        ]
+    });
+};
 //The Charts component maps the data from ChartsProps into a grid of createChart() ReactNodes
 const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style = 'tile', showLegends = false })=>{
     const spans = computeRowSpan(Object.keys(charts).length, numCols);
@@ -2597,109 +2705,10 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                 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;
-            return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
-                    children: [
-                        /*#__PURE__*/ jsxs(Table.Td, {
-                            children: [
-                                /*#__PURE__*/ jsx(ColorSwatch, {
-                                    className: "inline-block mr-2 align-middle",
-                                    size: "1em",
-                                    radius: "xs",
-                                    color: chartColors?.[elIndex % chartColors.length] || ''
-                                }),
-                                element.key
-                            ]
-                        }),
-                        /*#__PURE__*/ jsx(Table.Td, {
-                            className: "text-right",
-                            children: element.count
-                        })
-                    ]
-                }, elIndex));
-        };
-        const LegendOverflow = ({ chart, data, chartTitle })=>{
-            const [openedMoreRows, { open: openMoreRows, close: closeMoreRows }] = useDisclosure(false);
-            const theme = useMantineTheme();
-            return /*#__PURE__*/ jsxs(React__default.Fragment, {
-                children: [
-                    /*#__PURE__*/ jsx(Modal, {
-                        opened: openedMoreRows,
-                        onClose: closeMoreRows,
-                        title: chartTitle,
-                        size: "xl",
-                        children: /*#__PURE__*/ jsxs(Grid, {
-                            children: [
-                                /*#__PURE__*/ jsx(Grid.Col, {
-                                    span: 6,
-                                    children: createChart(chart.chartType, {
-                                        data: data === undefined ? [] : data,
-                                        total: counts ?? 1,
-                                        valueType: chart.valueType ?? 'count',
-                                        label: chart.label,
-                                        showLegendInChart: chart.showLegendInChart
-                                    })
-                                }, "modal-col-1"),
-                                /*#__PURE__*/ jsx(Grid.Col, {
-                                    span: 6,
-                                    children: /*#__PURE__*/ jsx("div", {
-                                        className: "border-solid border-[1px] border-[var(--mantine-color-gray-3)] h-full p-1",
-                                        children: /*#__PURE__*/ jsx(Table, {
-                                            withRowBorders: false,
-                                            classNames: {
-                                                table: '',
-                                                td: 'p-1 leading-3'
-                                            },
-                                            children: /*#__PURE__*/ jsx(Table.Tbody, {
-                                                children: data.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxs(Table.Td, {
-                                                                children: [
-                                                                    /*#__PURE__*/ jsx(ColorSwatch, {
-                                                                        className: "inline-block mr-2 align-middle",
-                                                                        size: "1em",
-                                                                        radius: "xs",
-                                                                        color: chartColors?.[elIndex % chartColors.length] || ''
-                                                                    }),
-                                                                    element.key
-                                                                ]
-                                                            }),
-                                                            /*#__PURE__*/ jsx(Table.Td, {
-                                                                className: "text-right",
-                                                                children: element.count
-                                                            })
-                                                        ]
-                                                    }, elIndex))
-                                            })
-                                        })
-                                    })
-                                }, "modal-col-2")
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxs(Button, {
-                        variant: "subtle",
-                        onClick: openMoreRows,
-                        leftSection: /*#__PURE__*/ jsx(Icon, {
-                            icon: "gen3:open-in-modal",
-                            height: 24,
-                            width: 24,
-                            color: theme.colors.accent[5]
-                        }),
-                        className: "text-black hover:text-black",
-                        children: [
-                            data.length - MAX_LEGEND_ROWS,
-                            " more"
-                        ]
-                    })
-                ]
-            });
-        };
         const dataKeys = field in data && data?.[field].length > 0 ? Object.keys(data[field][0]) : [];
         const chartTitle = charts[field].title ?? fieldNameToTitle(field);
-        const moreThanMaxRows = data?.[field] && data[field].length > MAX_LEGEND_ROWS;
+        const numberOfDataItems = data?.[field] && data[field].length;
+        const moreThanMaxRows = numberOfDataItems > MAX_LEGEND_ROWS;
         return /*#__PURE__*/ jsx(Grid.Col, {
             span: spans[indexNum],
             children: /*#__PURE__*/ jsxs(Card, {
@@ -2730,7 +2739,7 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         label: charts[field].label,
                         showLegendInChart: charts[field].showLegendInChart
                     }),
-                    showLegends && /*#__PURE__*/ jsx(Card.Section, {
+                    numberOfDataItems > 0 && showLegends && /*#__PURE__*/ jsx(Card.Section, {
                         inheritPadding: true,
                         py: "xs",
                         withBorder: style === 'box',
@@ -2768,7 +2777,8 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         children: /*#__PURE__*/ jsx(LegendOverflow, {
                             chart: charts[field],
                             data: data[field],
-                            chartTitle: chartTitle
+                            chartTitle: chartTitle,
+                            counts: counts ?? 0
                         })
                     })
                 ]
@@ -2781,7 +2791,7 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
     });
 };
 
-const CollapsableCharts = ({ config, data })=>{
+const CollapsableCharts = ({ config, data, isError, isFetching, isSuccess })=>{
     const [showLegends, setShowLegends] = useState(config.showLegends?.enabled);
     if (!(config?.charts && Object.keys(config.charts).length > 0)) {
         return /*#__PURE__*/ jsx(Center, {
@@ -2833,7 +2843,7 @@ const CollapsableCharts = ({ config, data })=>{
                                 charts: config.charts,
                                 data: data,
                                 counts: 2,
-                                isSuccess: true,
+                                isSuccess: isSuccess,
                                 numCols: 4
                             })
                         })
@@ -3145,6 +3155,8 @@ const classifyFacets = (data, index, fieldMapping = [], facetDefinitionsFromConf
                 label: facetDef.label ?? facetName,
                 // assumption is that the initial data has the min and max values
                 sharedWithIndices: (sharedFieldMapping && fieldKey in sharedFieldMapping && sharedFieldMapping[fieldKey].filter((x)=>x.index !== index)) ?? undefined,
+                moveValuesToBottom: facetDef?.moveValuesToBottom,
+                excludeValues: facetDef?.excludeValues,
                 range: facetDef.range ?? type === 'range' ? {
                     minimum: Math.floor(Number(value[0].key[0])),
                     maximum: Math.ceil(Number(value[0].key[1]))
@@ -3323,6 +3335,22 @@ const convertToStringArray = (inputArray)=>inputArray.map(String);
  * @param {FacetSortType} facetSort - The facet sort type represented as a string in the format "type-direction".
  * @returns {SortType} - The mapped sort type object containing type and direction.
  */ const mapFacetSortToSortType = (facetSort)=>{
+    // Default fallback values
+    const defaultSort = {
+        type: 'value',
+        direction: 'dsc'
+    };
+    // Validate input
+    if (!facetSort) {
+        console.warn(`Invalid facetSort: expected string, got ${typeof facetSort}. Using default.`);
+        return defaultSort;
+    }
+    const parts = facetSort.split('-');
+    // Check if we have exactly 2 parts
+    if (parts.length !== 2) {
+        console.warn(`Invalid facetSort format: expected 'type-direction', got '${facetSort}'. Using default.`);
+        return defaultSort;
+    }
     const [type, direction] = facetSort.split('-');
     return {
         type: type === 'label' ? 'alpha' : 'value',
@@ -3800,7 +3828,7 @@ const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-
     });
 };
 
-const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc' })=>{
+const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc', moveValuesToBottom = [], excludeValues = [] })=>{
     const [isGroupExpanded, setIsGroupExpanded] = useState(false);
     const cardRef = useRef(null);
     const searchInputRef = useRef(null);
@@ -3857,7 +3885,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
             ];
             updateFacetEnum(field, updated, updateFacetFilters, clearFilters, combineMode);
         } else {
-            const updated = selectedEnums?.filter((x)=>x != value);
+            const updated = selectedEnums?.filter((x)=>x !== value);
             updateFacetEnum(field, updated ?? [], updateFacetFilters, clearFilters, combineMode);
         }
     };
@@ -3894,7 +3922,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     useDeepCompareEffect(()=>{
         if (isSuccess && data) {
             // get all the data except the missing and empty values
-            const tempFilteredData = Object.entries(data).filter((entry)=>entry[0] != '_missing' && entry[0] != '').filter((entry)=>searchTerm === '' ? entry : entry[0].toLowerCase().includes(searchTerm.toLowerCase().trim()));
+            const tempFilteredData = Object.entries(data).filter((entry)=>entry[0] !== '_missing' && entry[0] !== '').filter((entry)=>searchTerm === '' ? entry : entry[0].toLowerCase().includes(searchTerm.toLowerCase().trim()));
             // it is possible that the selected enums are not in the data as their counts are 0
             // therefore we need to add them to the data
             const selectedEnumNotInData = selectedEnums ? selectedEnums.reduce((acc, curr)=>{
@@ -3909,16 +3937,16 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
             const remainingValues = tempFilteredData.length + selectedEnumNotInData.length - maxValuesToDisplay;
             const cardStyle = calcCardStyle(remainingValues);
             const numberOfBarsToDisplay = calcNumberOfBarsToDisplay(tempFilteredData.length + selectedEnumNotInData.length);
+            const allData = [
+                ...tempFilteredData,
+                ...selectedEnumNotInData
+            ];
+            // remove any enum in excludeValues
+            const filteredData = allData.filter((x)=>!excludeValues?.includes(x[0].toString()));
             setFacetChartData((prevFacetChartData)=>({
                     ...prevFacetChartData,
-                    filteredData: [
-                        ...tempFilteredData,
-                        ...selectedEnumNotInData
-                    ],
-                    filteredDataObj: Object.fromEntries([
-                        ...tempFilteredData,
-                        ...selectedEnumNotInData
-                    ]),
+                    filteredData: filteredData,
+                    filteredDataObj: Object.fromEntries(filteredData),
                     remainingValues,
                     numberOfBarsToDisplay,
                     isSuccess: true,
@@ -3944,8 +3972,9 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     useDeepCompareEffect(()=>{
         if (facetChartData.filteredData && facetChartData.filteredData.length > 0) {
             const obj = [
-                ...facetChartData.filteredData
-            ].sort(sortType.type === 'value' ? ([, a], [, b])=>sortType.direction === 'dsc' ? b - a : a - b : ([a], [b])=>sortType.direction === 'dsc' ? compareKeysDescending(a, b) : compareKeysAscending(a, b)).slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined);
+                ...facetChartData.filteredData.filter((x)=>!moveValuesToBottom.includes(x[0].toString())).sort(sortType.type === 'value' ? ([, a], [, b])=>sortType.direction === 'dsc' ? b - a : a - b : ([a], [b])=>sortType.direction === 'dsc' ? compareKeysDescending(a, b) : compareKeysAscending(a, b)),
+                ...facetChartData.filteredData.filter((x)=>moveValuesToBottom.includes(x[0].toString()))
+            ].slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined);
             setSortedData(obj);
             if (updateVisibleValues) updateVisibleValues(obj);
         }
@@ -4158,7 +4187,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     });
 };
 
-const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, showSettings = false, startShowingData = true, dismissCallback = undefined, width = undefined, sharedWithIndices = undefined, header = {
+const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPercent = true, hideIfEmpty = true, showSearch = true, showFlip = false, showSettings = false, startShowingData = true, dismissCallback = undefined, width = undefined, sharedWithIndices = undefined, moveValuesToBottom = [], excludeValues = [], header = {
     Panel: FacetHeader,
     Label: FacetText,
     iconStyle: controlsIconStyle
@@ -4209,7 +4238,9 @@ const EnumFacet = ({ field, hooks, valueLabel, description, facetName, showPerce
                     isFacetView: isFacetView,
                     isSearching: isSearching,
                     hideIfEmpty: hideIfEmpty,
-                    showPercent: showPercent
+                    showPercent: showPercent,
+                    moveValuesToBottom: moveValuesToBottom,
+                    excludeValues: excludeValues
                 })
             })
         ]
@@ -4608,7 +4639,9 @@ const createFacetCard = ({ facetDefinition, valueLabel, hooks: dataFunctions, fa
                 width: width,
                 hooks: dataFunctions,
                 showPercent: showPercent,
-                sharedWithIndices: facetDefinition?.sharedWithIndices
+                sharedWithIndices: facetDefinition?.sharedWithIndices,
+                moveValuesToBottom: facetDefinition?.moveValuesToBottom ?? [],
+                excludeValues: facetDefinition?.excludeValues ?? []
             }, `${idPrefix}-enum-${field}`),
             range: /*#__PURE__*/ jsx(RangeFacet, {
                 valueLabel: valueTypeLabel,
@@ -6148,6 +6181,7 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
         root: 'flex bg-base-max border-b-1 border-base-dark',
         navigationPanel: 'font-heading',
         logoAndTitlePanel: 'flex justify-center items-center align-middle',
+        buttons: '',
         login: 'pl-1 mr-6 bg-base-max text-base-contrast opacity-80 hover:opacity-100'
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
@@ -6173,11 +6207,11 @@ const NavigationLogo = ({ src, title, description, width, height, divider = fals
                 className: "flex flex-grow"
             }),
             /*#__PURE__*/ jsx("div", {
-                className: `grid grid-cols-${items?.length} ${extractClassName('navigationPanel', mergedClassnames)}`,
+                className: `flex flex-grow nowrap ${extractClassName('navigationPanel', mergedClassnames)}`,
                 children: items.map((x, index)=>{
                     const selectedStyle = current === x.href ? 'border-accent border-b-4 border-b-accent' : '';
                     return /*#__PURE__*/ jsx("div", {
-                        className: `first:border-l-1 border-r-1 border-base-dark ${selectedStyle}`,
+                        className: `first:border-l-1 border-r-1 flex-1 border-base-dark ${selectedStyle} ${extractClassName('buttons', mergedClassnames)}`,
                         children: /*#__PURE__*/ jsx(NavigationBarButton, {
                             tooltip: x.tooltip,
                             icon: x.icon,
@@ -7516,6 +7550,20 @@ const TableIcons = {
         })
 };
 
+const CompareFn = (fieldValue, cmpOp, value)=>{
+    switch(cmpOp){
+        case 'alwaysTrue':
+            return true;
+        case 'arrayNotEmpty':
+            return Array.isArray(fieldValue) && fieldValue.length > 0;
+    }
+};
+const isSelectable = (row, config)=>{
+    if (!config) return false;
+    if (!Object.hasOwn(row.original, config.field)) return false;
+    const fieldValue = row.original[config.field];
+    return CompareFn(fieldValue, config.comparer, config.value);
+};
 const extractCellValue = (func)=>({ cell, row })=>func({
             value: cell.getValue(),
             cell,
@@ -7548,6 +7596,13 @@ const DiscoveryTable = ({ data, hits, dataRequestStatus, setSorting, setPaginati
     }, [
         config.studyColumns
     ]);
+    const checkIfRowIsSelectable = (row)=>{
+        if (config.tableConfig?.selectableRows) return true;
+        if (config.tableConfig?.selectableRowConfiguration) {
+            return isSelectable(row, config.tableConfig.selectableRowConfiguration);
+        }
+        return false;
+    };
     const table = useMantineReactTable({
         columns: cols,
         data: data ?? [],
@@ -7558,7 +7613,7 @@ const DiscoveryTable = ({ data, hits, dataRequestStatus, setSorting, setPaginati
             onPaginationChange: setPagination,
             onSortingChange: setSorting
         } : {},
-        enableRowSelection: config.tableConfig?.selectableRows ?? false,
+        enableRowSelection: checkIfRowIsSelectable,
         rowCount: hits,
         icons: TableIcons,
         enableTopToolbar: false,
@@ -8786,6 +8841,7 @@ const useSearchMetadata = ({ discoveryConfig, searchTerms, mdsData, isSuccess })
             uidField
         ],
         idField: uidField,
+        tokenize: (string, _fieldName)=>string.split(' '),
         extractField: extractValue,
         //  processTerm: (term) => suffixes(term, 3),
         searchOptions: {
@@ -9689,7 +9745,8 @@ registerDefaultDiscoveryDataLoaders();
                         }) : null,
                         discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsx(CollapsableCharts, {
                             config: discoveryConfig.features?.chartsSection,
-                            data: chartData
+                            data: chartData,
+                            isSuccess: dataRequestStatus.isSuccess
                         }),
                         /*#__PURE__*/ jsxs("div", {
                             className: "flex items-center p-2 mb-4 bg-base-max rounded-lg",
@@ -10119,6 +10176,23 @@ const RenderParagraphsCell = ({ value })=>{
             }, i))
     });
 };
+const RenderIfArrayHasData = ({ value })=>{
+    const content = value;
+    if (isArray(content) && content.length > 0) {
+        return /*#__PURE__*/ jsx(Icon, {
+            icon: "gen3:checked-filled",
+            height: 22,
+            width: 22,
+            className: "text-utility-success"
+        });
+    }
+    return /*#__PURE__*/ jsx(Icon, {
+        icon: "gen3:cancel-filled",
+        height: 22,
+        width: 22,
+        className: "text-utility-error"
+    });
+};
 // TODO Fix below
 // eslint-disable-next-line react/prop-types
 const DiscoveryRenderTagsCell = ({ value })=>{
@@ -10149,6 +10223,7 @@ const DiscoveryRenderTagsCell = ({ value })=>{
 const Gen3DiscoveryStandardCellRenderers = {
     array: {
         NegativePositive: RenderArrayCellNegativePositive$1,
+        HasData: RenderIfArrayHasData,
         default: RenderArrayCell$1
     },
     string: {
@@ -12598,10 +12673,22 @@ const EmptyData = {};
     const isXl = useMediaQuery('(min-width: 1600px)');
     const [accessLevel, setAccessLevel] = useState(Accessibility.ALL);
     const sharedFiltersMap = useCoreSelector((state)=>selectSharedFilters(state));
-    let numCols = 3;
-    if (isSm) numCols = 1;
-    if (isMd) numCols = 2;
-    if (isXl) numCols = 4;
+    const defaultDropdowns = useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const numCols = useMemo(()=>{
+        if (isSm) return 1;
+        if (isMd) return 2;
+        if (isXl) return 4;
+        return 3;
+    }, [
+        isSm,
+        isMd,
+        isXl
+    ]);
     const index = guppyConfig.dataType;
     const fields = useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
         filters?.tabs
@@ -12615,14 +12702,20 @@ const EmptyData = {};
         filters: cohortFilters,
         accessibility: accessLevel
     });
-    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = useGetAggsNoFilterSelfQuery({
-        type: index,
-        fields: [
+    const chartKeys = useDeepCompareMemo(()=>[
             ...Object.keys(chartsSection?.charts ?? {}),
             ...Object.keys(charts)
-        ],
+        ], [
+        chartsSection?.charts,
+        charts
+    ]);
+    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = useGetAggsNoFilterSelfQuery({
+        type: index,
+        fields: chartKeys,
         filters: cohortFilters,
         accessibility: accessLevel
+    }, {
+        skip: chartKeys.length === 0
     });
     const getEnumFacetData = useDeepCompareCallback((field)=>{
         let filters = undefined;
@@ -12645,7 +12738,7 @@ const EmptyData = {};
             isSuccess: isSuccess
         };
     }, [
-        cohortFilters,
+        cohortFilters.root,
         data,
         isSuccess
     ]);
@@ -12794,8 +12887,8 @@ const EmptyData = {};
                                 className: "flex justify-between mb-2 ml-2",
                                 children: [
                                     /*#__PURE__*/ jsx(DownloadsPanel, {
-                                        dropdowns: dropdowns ?? {},
-                                        buttons: buttons ?? [],
+                                        dropdowns: defaultDropdowns,
+                                        buttons: defaultButtons,
                                         loginForDownload: loginForDownload,
                                         index: index,
                                         totalCount: counts ?? 0,
@@ -12814,7 +12907,8 @@ const EmptyData = {};
                                     ...chartsSection,
                                     charts: summaryCharts
                                 },
-                                data: chartData ?? EmptyData
+                                data: chartData ?? EmptyData,
+                                isSuccess: isChartSuccess
                             }) : /*#__PURE__*/ jsx(Charts, {
                                 charts: summaryCharts,
                                 data: chartData ?? EmptyData,
@@ -12868,6 +12962,9 @@ const TabsLayoutToComponentProp = (tabsLayout)=>{
 const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
     const dispatch = useCoreDispatch();
     dispatch(setSharedFilters(sharedFiltersMap ?? {}));
+    const configuration = useDeepCompareMemo(()=>explorerConfig, [
+        explorerConfig
+    ]);
     return /*#__PURE__*/ jsx("div", {
         className: "w-full",
         children: /*#__PURE__*/ jsxs(Tabs, {
@@ -12878,17 +12975,24 @@ const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = '
                 /*#__PURE__*/ jsx(Tabs.List, {
                     className: "w-full",
                     justify: TabsLayoutToComponentProp(tabsLayout),
-                    children: explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                    children: configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Tab, {
                             value: panelConfig.tabTitle,
                             children: panelConfig.tabTitle
                         }, `${panelConfig.tabTitle}-tabList`))
                 }),
-                explorerConfig.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Panel, {
+                configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Panel, {
                         value: panelConfig.tabTitle,
-                        children: /*#__PURE__*/ createElement(CohortPanel, {
-                            ...panelConfig,
-                            key: `${panelConfig.tabTitle}-CohortPanel`
-                        })
+                        children: /*#__PURE__*/ jsx(CohortPanel, {
+                            guppyConfig: panelConfig.guppyConfig,
+                            chartsSection: panelConfig?.chartsSection,
+                            filters: panelConfig.filters,
+                            tabTitle: panelConfig.tabTitle,
+                            table: panelConfig.table,
+                            dropdowns: panelConfig.dropdowns,
+                            buttons: panelConfig.buttons,
+                            loginForDownload: panelConfig.loginForDownload,
+                            sharedFiltersMap: panelConfig.sharedFiltersMap
+                        }, `${panelConfig.tabTitle}-CohortPanel`)
                     }, `${panelConfig.tabTitle}-tabPanel`))
             ]
         })
@@ -14003,47 +14107,25 @@ const Workspace = ({ config })=>{
 };
 
 const TextDescription = ({ description })=>{
-    const [extend, setExtend] = useState(false);
-    const textRef = useRef(null);
-    const [isClamped, setClamped] = useState(false);
-    useEffect(()=>{
-        // Function that should be called on window resize
-        function handleResize() {
-            if (textRef && textRef.current) {
-                setClamped(textRef.current.scrollHeight > textRef.current.clientHeight);
-            }
-        }
-        // Add event listener to window resize
-        window.addEventListener('resize', handleResize);
-        // Remove event listener on cleanup
-        return ()=>window.removeEventListener('resize', handleResize);
-    }, []); // Empty array ensures that it would only run on mount
-    return /*#__PURE__*/ jsxs(Fragment, {
-        children: [
-            !extend ? /*#__PURE__*/ jsx(Text, {
-                ref: textRef,
-                size: "sm",
-                lineClamp: 4,
-                children: description
-            }) : /*#__PURE__*/ jsx(Text, {
-                size: "sm",
-                children: description
-            }),
-            isClamped && /*#__PURE__*/ jsx("button", {
-                onClick: ()=>setExtend((extend)=>!extend),
-                children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex text-xs font-semibold text-base-contrast-light",
-                    children: [
-                        !extend ? 'Extend Text' : 'Collapse Text',
-                        ' ',
-                        /*#__PURE__*/ jsx("div", {
-                            className: "my-auto",
-                            children: !extend ? /*#__PURE__*/ jsx(MdKeyboardArrowDown, {}) : /*#__PURE__*/ jsx(MdKeyboardArrowUp, {})
-                        })
-                    ]
+    return /*#__PURE__*/ jsx(Spoiler, {
+        maxHeight: 80,
+        showLabel: /*#__PURE__*/ jsxs("span", {
+            children: [
+                "Extend Text ",
+                /*#__PURE__*/ jsx(MdKeyboardArrowDown, {
+                    className: "inline"
                 })
-            })
-        ]
+            ]
+        }),
+        hideLabel: /*#__PURE__*/ jsxs("span", {
+            children: [
+                "Collapse Text ",
+                /*#__PURE__*/ jsx(MdKeyboardArrowUp, {
+                    className: "inline"
+                })
+            ]
+        }),
+        children: description
     });
 };
 
@@ -14051,20 +14133,22 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
     return /*#__PURE__*/ jsxs(Stack, {
         align: "stretch",
         justify: "space-between",
-        className: "rounded-sm rounded-t-md bg-base-max p-0",
+        className: "rounded-sm rounded-t-md bg-base-max p-0 h-full",
         children: [
             /*#__PURE__*/ jsxs("div", {
-                className: "h-full",
+                className: "relative",
                 children: [
                     /*#__PURE__*/ jsx("div", {
-                        className: "p-0 rounded-sm h-1/2 h-max-1/2 flex justify-center items-center overflow-hidden",
-                        children: /*#__PURE__*/ jsx(Image$1, {
-                            component: Image,
-                            src: `${image}`,
-                            alt: `${title} image`,
-                            height: 1000,
-                            width: 1000,
-                            radius: "md"
+                        className: "p-0 rounded-sm h-[200px] h-max-1/2 flex justify-center items-center relative overflow-hidden",
+                        children: /*#__PURE__*/ jsx("div", {
+                            children: /*#__PURE__*/ jsx(Image$1, {
+                                component: Image,
+                                src: `${image}`,
+                                alt: "",
+                                radius: "md",
+                                width: 500,
+                                height: 500
+                            })
                         })
                     }),
                     /*#__PURE__*/ jsxs("div", {
@@ -14075,7 +14159,7 @@ const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginReq
                                 children: /*#__PURE__*/ jsx(Image$1, {
                                     component: Image,
                                     src: `${icon}`,
-                                    alt: `${title} logo`,
+                                    alt: "",
                                     width: 40,
                                     height: 40,
                                     radius: "lg"
@@ -17119,7 +17203,7 @@ const registerCohortDiscoveryApp = ()=>createGen3AppWithOwnStore({
         App: CohortDiscovery,
         id: AppId$1,
         name: _APP_NAME$2,
-        version: 'v1.0.0',
+        version: _APP_VERSION$1,
         requiredEntityTypes: [],
         store: AppStore,
         context: AppContext
@@ -19311,45 +19395,44 @@ const registerMetadataSchemaApp = ()=>createGen3App({
         requiredEntityTypes: []
     });
 
-const DropdownWithIcon = ({ disableTargetWidth, LeftIcon, RightIcon = /*#__PURE__*/ jsx(IoMdArrowDropdown, {
-    size: "1.25em",
-    "aria-hidden": "true",
-    "data-testid": "dropdown-icon"
-}), TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex = undefined, customDataTestId = undefined, tooltip = undefined, buttonAriaLabel = undefined })=>{
+const ADDITIONAL_DOWNLOAD_MESSAGE = 'A previous download is being processed. Additional downloads may be started.';
+const DropdownWithIcon = ({ disableTargetWidth, LeftSection, RightSection = /*#__PURE__*/ jsx("div", {
+    className: "border-l pl-1 -mr-2",
+    children: /*#__PURE__*/ jsx(IoMdArrowDropdown, {
+        size: "1.25em",
+        "aria-hidden": "true",
+        "data-testid": "dropdown-icon"
+    })
+}), TargetButtonChildren, targetButtonDisabled, dropdownElements, menuLabelText, menuLabelCustomClass, customPosition, fullHeight, zIndex = 900, customTargetButtonDataTestId = undefined, targetButtonTooltip = undefined, buttonAriaLabel = undefined, closeOnItemClick = true })=>{
+    const targetRef = useRef(null);
     return /*#__PURE__*/ jsxs(Menu, {
-        width: disableTargetWidth ?? 'target',
+        width: !disableTargetWidth ? 'target' : null,
         ...customPosition && {
             position: customPosition
         },
-        "data-testid": customDataTestId ?? 'menu-elem',
         zIndex: zIndex,
+        closeOnItemClick: closeOnItemClick,
         children: [
             /*#__PURE__*/ jsx(Menu.Target, {
-                children: /*#__PURE__*/ jsx(Button, {
-                    variant: "outline",
-                    color: "primary",
-                    className: `bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ${focusStyles}`,
-                    ...LeftIcon && {
-                        leftIcon: LeftIcon
-                    },
-                    rightSection: RightIcon,
-                    disabled: targetButtonDisabled,
-                    classNames: {
-                        // rightIcon: 'border-l pl-1 -mr-2',
-                        root: fullHeight ? 'h-full' : undefined
-                    },
-                    "aria-label": buttonAriaLabel,
-                    children: /*#__PURE__*/ jsx("div", {
-                        children: tooltip?.length && !targetButtonDisabled ? /*#__PURE__*/ jsx("div", {
-                            children: /*#__PURE__*/ jsx(Tooltip, {
-                                label: tooltip,
-                                children: /*#__PURE__*/ jsx("div", {
-                                    children: TargetButtonChildren
-                                })
-                            })
-                        }) : /*#__PURE__*/ jsx("div", {
-                            children: TargetButtonChildren
-                        })
+                children: /*#__PURE__*/ jsx(Tooltip, {
+                    label: targetButtonTooltip,
+                    disabled: !targetButtonTooltip,
+                    children: /*#__PURE__*/ jsx(Button, {
+                        variant: "outline",
+                        color: "primary",
+                        className: `flex items-center bg-base-max border-primary data-disabled:opacity-50 data-disabled:bg-base-max data-disabled:text-primary ${focusStyles}`,
+                        ...LeftSection && {
+                            leftSection: LeftSection
+                        },
+                        rightSection: RightSection,
+                        disabled: targetButtonDisabled,
+                        classNames: {
+                            root: `${fullHeight ? 'h-full' : undefined}`
+                        },
+                        ref: targetRef,
+                        "aria-label": buttonAriaLabel,
+                        "data-testid": customTargetButtonDataTestId ?? 'menu-elem',
+                        children: TargetButtonChildren
                     })
                 })
             }),
@@ -19357,7 +19440,7 @@ const DropdownWithIcon = ({ disableTargetWidth, LeftIcon, RightIcon = /*#__PURE_
                 "data-testid": "dropdown-menu-options",
                 className: "border-1 border-secondary",
                 children: [
-                    menuLabelText && /*#__PURE__*/ jsxs(React__default.Fragment, {
+                    menuLabelText && /*#__PURE__*/ jsxs(Fragment, {
                         children: [
                             /*#__PURE__*/ jsx(Menu.Label, {
                                 className: menuLabelCustomClass ?? 'font-bold',
@@ -19367,15 +19450,37 @@ const DropdownWithIcon = ({ disableTargetWidth, LeftIcon, RightIcon = /*#__PURE_
                             /*#__PURE__*/ jsx(Menu.Divider, {})
                         ]
                     }),
-                    dropdownElements?.map(({ title, onClick, icon, disabled }, idx)=>/*#__PURE__*/ jsx(Menu.Item, {
+                    dropdownElements.map(({ title, onClick, icon, disabled, isLoading, loadingTooltip }, idx)=>{
+                        const menuItem = /*#__PURE__*/ jsx(Menu.Item, {
                             onClick: ()=>{
-                                if (onClick) onClick();
+                                if (onClick) {
+                                    onClick();
+                                }
+                                // This is done inorder to set the last focused element as the menu target element
+                                // This is done to return focus to the target element if the modal is closed with ESC
+                                if (targetRef?.current) {
+                                    targetRef?.current?.focus();
+                                }
                             },
                             "data-testid": `${title}-${idx}`,
                             leftSection: icon && icon,
                             disabled: disabled,
                             children: title
-                        }, `${title}-${idx}`))
+                        }, `${title}-${idx}`);
+                        if (isLoading) {
+                            return /*#__PURE__*/ jsx(Tooltip, {
+                                label: loadingTooltip || ADDITIONAL_DOWNLOAD_MESSAGE,
+                                position: "right",
+                                withArrow: true,
+                                multiline: true,
+                                w: 400,
+                                children: /*#__PURE__*/ jsx("div", {
+                                    children: menuItem
+                                })
+                            }, `${title}-${idx}`);
+                        }
+                        return menuItem;
+                    })
                 ]
             })
         ]