@gen3/frontend 0.10.79 → 0.10.80

package/dist/cjs/index.js

@@ -7225,6 +7225,28 @@ font-content
     });
 };
 
+const compareKeysAscending = (a, b)=>{
+    if (typeof a === 'number' && typeof b === 'number') {
+        return a - b;
+    }
+    // If only one value is a number, move numbers to one end
+    // (in this case, numbers will come before strings)
+    if (typeof a === 'number') return -1;
+    if (typeof b === 'number') return 1;
+    // If both are strings, sort alphabetically
+    return a.localeCompare(b);
+};
+const compareKeysDescending = (a, b)=>{
+    if (typeof a === 'number' && typeof b === 'number') {
+        return b - a;
+    }
+    // If only one value is a number, move numbers to one end
+    // (in this case, numbers will come before strings)
+    if (typeof a === 'number') return 1;
+    if (typeof b === 'number') return -1;
+    // If both are strings, sort alphabetically
+    return b.localeCompare(a);
+};
 const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true })=>{
     const [isGroupExpanded, setIsGroupExpanded] = React.useState(false);
     const cardRef = React.useRef(null);
@@ -7237,7 +7259,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
     const updateFacetFilters = hooks.useUpdateFacetFilters();
     const isFilterExpanded = hooks?.useFilterExpanded && hooks.useFilterExpanded(field);
     const showFilters = isFilterExpanded === undefined || isFilterExpanded;
-    const [sortedData, setSortedData] = React.useState({});
+    const [sortedData, setSortedData] = React.useState([]);
     const [sortType, setSortType] = React.useState({
         type: 'alpha',
         direction: 'asc'
@@ -7356,25 +7378,9 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
     ]);
     useDeepCompare.useDeepCompareEffect(()=>{
         if (facetChartData.filteredData && facetChartData.filteredData.length > 0) {
-            const compareValuesAscending = ([, a], [, b])=>a - b;
-            const compareValuesDescending = ([, a], [, b])=>b - a;
-            const compareKeysAscending = ([a], [b])=>typeof a === 'string' && typeof b === 'string' ? a.localeCompare(b) : typeof a === 'number' && typeof b === 'number' ? a - b : 0;
-            const compareKeysDescending = ([a], [b])=>typeof a === 'string' && typeof b === 'string' ? b.localeCompare(a) : typeof a === 'number' && typeof b === 'number' ? b - a : 0;
-            let comparisonFn;
-            if (sortType.type === 'value') {
-                comparisonFn = sortType.direction === 'dsc' ? compareValuesDescending : compareValuesAscending;
-            } else {
-                comparisonFn = sortType.direction === 'dsc' ? compareKeysDescending : compareKeysAscending;
-            }
             const obj = [
                 ...facetChartData.filteredData
-            ].sort(comparisonFn).slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined).reduce((acc, [key, value])=>{
-                acc[key] = value;
-                return acc;
-            }, {});
-            Object.fromEntries([
-                ...facetChartData.filteredData
-            ].sort(comparisonFn).slice(0, !isGroupExpanded ? maxValuesToDisplay : undefined));
+            ].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);
             setSortedData(obj);
         }
     }, [
@@ -7438,10 +7444,10 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
                                                     facetChartData.filteredData.length == 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                                                         className: "mx-4 font-content text-sm",
                                                         children: BAD_DATA_MESSAGE
-                                                    }) : isSuccess ? !sortedData || Object.entries(sortedData).length === 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                                    }) : isSuccess ? !sortedData || sortedData.length === 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                                                         className: "mx-4",
                                                         children: "No results found"
-                                                    }) : Object.entries(sortedData ?? {}).map(([value, count])=>{
+                                                    }) : sortedData.map(([value, count])=>{
                                                         return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                                             className: "flex flex-row items-center gap-x-1",
                                                             children: [
@@ -7462,7 +7468,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
                                                                     })
                                                                 }),
                                                                 /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
-                                                                    label: value,
+                                                                    label: value.toString(),
                                                                     children: /*#__PURE__*/ jsxRuntime.jsx("span", {
                                                                         className: "text-xs font-normal font-content",
                                                                         children: value
@@ -7746,6 +7752,13 @@ const RangeFacet = ({ field, hooks, valueLabel, description, facetName, minimum
 const instanceOfIncludesExcludes$1 = (op)=>[
         'in'
     ].includes(op.operator); // TODO: Guppy does not support excludes
+const isOperandsObject = (obj)=>{
+    return !!obj && // Ensure obj is not null or undefined
+    typeof obj === 'object' && 'operands' in obj && Array.isArray(obj.operands);
+};
+const isFacetEmpty = (op)=>{
+    return isOperandsObject(op) && op.operands.length === 0;
+};
 /**
  * Exact value facet component
  * @param field - field to facet on
@@ -7776,7 +7789,7 @@ const instanceOfIncludesExcludes$1 = (op)=>[
         facetDataValues?.data
     ]);
     useDeepCompare.useDeepCompareEffect(()=>{
-        if (!facetValue) {
+        if (!facetValue || isFacetEmpty(facetValue)) {
             setSelectedValues([]);
         } else if (instanceOfIncludesExcludes$1(facetValue)) {
             const filters = facetValue.operands.map((x)=>x.toString());
@@ -7787,26 +7800,9 @@ const instanceOfIncludesExcludes$1 = (op)=>[
     ]);
     useDeepCompare.useDeepCompareEffect(()=>{
         const setValues = (values)=>{
-            if (values.length > 0) {
-                if (facetValue && instanceOfIncludesExcludes$1(facetValue)) {
-                    // updating facet value
-                    updateFacetFilters(field, {
-                        ...facetValue,
-                        operands: values
-                    });
-                }
-                if (facetValue === undefined) {
-                    // TODO: Assuming Includes by default but this might change to Include|Excludes
-                    updateFacetFilters(field, {
-                        operator: 'in',
-                        field: field,
-                        operands: values
-                    });
-                }
-            } else {
-                clearFilters(field);
-            }
+            updateFacetEnum(field, values, updateFacetFilters, clearFilters);
         };
+        console.log('selectedValues: ', selectedValues);
         setValues(selectedValues);
     }, [
         selectedValues
@@ -7867,17 +7863,25 @@ const instanceOfIncludesExcludes$1 = (op)=>[
                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.MultiSelect, {
                     "data-testid": "multiselect-add-filter-value",
                     size: "sm",
-                    placeholder: `Enter ${facetTitle}`,
-                    classNames: {
-                        root: 'grow',
-                        input: 'border-r-0 rounded-r-none py-1'
+                    comboboxProps: {
+                        shadow: 'md'
                     },
+                    placeholder: `Enter ${facetTitle}`,
                     "aria-label": "enter value to add filter",
                     value: selectedValues,
                     onChange: setSelectedValues,
                     data: dataValues,
+                    limit: 10,
                     searchable: true,
-                    maxDropdownHeight: 200
+                    hidePickedOptions: true,
+                    withScrollArea: false,
+                    styles: {
+                        dropdown: {
+                            maxHeight: 200,
+                            overflowY: 'auto'
+                        }
+                    },
+                    mt: "md"
                 })
             })
         ]
@@ -8101,7 +8105,7 @@ const FiltersPanel = ({ fields, dataFunctions, valueLabel })=>{
         "data-testid": "filters-facets",
         className: "flex flex-col gap-y-4 h-full overflow-y-scroll px-4 w-full",
         children: fields.map((facetDefinition)=>{
-            return createFacetCard(facetDefinition, valueLabel, dataFunctions[facetDefinition.type], 'filters-panel', undefined, false, facetDefinition.label, 'w-64');
+            return createFacetCard(facetDefinition, valueLabel, dataFunctions[facetDefinition.type], 'filters-panel', undefined, false, facetDefinition.label, 'w-80');
         })
     });
 };
@@ -10122,7 +10126,7 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
     const [facetDefinitions, setFacetDefinitions] = React.useState({});
     const [summaryCharts, setSummaryCharts] = React.useState({});
     const cohortFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
-    const { data, isSuccess, isError: isAggsQueryError } = core.useGetAggsQuery({
+    const { data, isSuccess, isFetching: isAggsQueryFetching, isError: isAggsQueryError } = core.useGetAggsQuery({
         type: index,
         fields: fields,
         filters: cohortFilters
@@ -10238,6 +10242,9 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "flex mt-3 relative",
         children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
+                visible: isAggsQueryFetching
+            }),
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 children: filters?.tabs === undefined ? null : filters?.tabs.length > 1 ? /*#__PURE__*/ jsxRuntime.jsx(TabbedPanel, {
                     filters: filters,
@@ -12317,7 +12324,7 @@ const DefaultRendererCatalog = {
         radarComparison: RadarComparison
     }
 };
-const DiversityChartsFactory = ()=>{
+const CohortSimilarityChartsFactory = ()=>{
     if (!instance) {
         instance = new RenderFactoryTypedInstance();
         instance.registerRendererCatalog(DefaultRendererCatalog);
@@ -12325,7 +12332,7 @@ const DiversityChartsFactory = ()=>{
     return instance;
 };
 
-DiversityChartsFactory();
+CohortSimilarityChartsFactory();
 const generateChart = (groundData, groundLabel, comparisonData, comparisonLabel, field, config, showTitle = true)=>{
     // Check if the field exists in the datasets
     if (!(field in groundData) || !(field in comparisonData)) {
@@ -12334,7 +12341,7 @@ const generateChart = (groundData, groundLabel, comparisonData, comparisonLabel,
             children: "Error: Data field missing"
         });
     }
-    const chartRenderer = DiversityChartsFactory().getRenderer('comparison', config.chartType);
+    const chartRenderer = CohortSimilarityChartsFactory().getRenderer('comparison', config.chartType);
     // Check if renderer is the DefaultItemRenderer to log a warning
     if (chartRenderer === DefaultComparisonChart) {
         console.warn(`No specific renderer found for ${config.chartType}. Using default renderer.`);
@@ -12701,7 +12708,7 @@ const ComparisonCharts = ({ ground, groundLabel, comparison, comparisonLabel, co
     return result;
 };
 
-const getStaticDiversityData = (dataset)=>{
+const getStaticSimilarityData = (dataset)=>{
     return convertToAggregateData({
         census: {
             age_at_index: {
@@ -12759,7 +12766,7 @@ const convertToValidJSON = (inputString)=>{
     cleanedString = cleanedString.replace(/'/g, '"');
     return cleanedString;
 };
-const createDiversityQuery = (fields = {
+const createSimilarityQuery = (fields = {
     age_at_index: 'age_at_index',
     sex: 'sex',
     ethnicity: 'ethnicity',
@@ -13034,9 +13041,9 @@ const createDiversityQuery = (fields = {
     };
 };
 
-const CohortDiversityApp = (config)=>{
-    const groundDataset = getStaticDiversityData(config.datasets.ground.dataset);
-    const gqlQuery = createDiversityQuery(); // TODO: add field mapping
+const CohortSimilarityApp = (config)=>{
+    const groundDataset = getStaticSimilarityData(config.datasets.ground.dataset);
+    const gqlQuery = createSimilarityQuery(); // TODO: add field mapping
     const { data: rawComparisonDataset, isLoading: isComparisonLoading, isError: isComparisonError } = core.useGeneralGQLQuery({
         query: gqlQuery.query,
         variables: JSON.parse(gqlQuery.variables)
@@ -13053,7 +13060,7 @@ const CohortDiversityApp = (config)=>{
     ]);
     if (isComparisonError) {
         return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
-            message: 'Unable to get data need for Cohort Diversity'
+            message: 'Unable to get data need for Cohort Similarity'
         });
     }
     if (isComparisonLoading) {
@@ -13065,12 +13072,12 @@ const CohortDiversityApp = (config)=>{
         classNames: {
             root: 'w-full m-4 mb-2'
         },
-        "aria-label": "Main Content of Cohort Diversity App",
+        "aria-label": "Main Content of Cohort Similarity App",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
                 order: 1,
                 size: "h3",
-                children: "Cohort Diversity Visualization"
+                children: "Cohort Similarity Visualization"
             }),
             /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
                 variant: "filled",
@@ -13120,13 +13127,13 @@ const CohortDiversityApp = (config)=>{
     });
 };
 
-const { appApi: diversityApi, appStore, appContext } = core.createAppApiForRTKQ('cohortDiversity');
+const { appApi: cohortSimilarityApi, appStore, appContext } = core.createAppApiForRTKQ('cohortSimilarity');
 
-const _APP_NAME$1 = 'CohortDiversity'; // This wil be the route name of the app
+const _APP_NAME$1 = 'CohortSimilarity'; // This wil be the route name of the app
 const _APP_VERSION = '1.0.0';
 const AppId = core.getGen3AppId(_APP_NAME$1, _APP_VERSION);
-const registerCohortDiversityApp = ()=>core.createGen3AppWithOwnStore({
-        App: CohortDiversityApp,
+const registerCohortSimilarityApp = ()=>core.createGen3AppWithOwnStore({
+        App: CohortSimilarityApp,
         name: _APP_NAME$1,
         version: 'v1.0.0',
         id: AppId,
@@ -15187,19 +15194,12 @@ const getStatus = (expiration, now)=>{
                 header: 'Actions',
                 Cell: ({ row })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
                         className: "flex items-center",
-                        children: row.original.actions === 'delete' ? /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
                             onClick: ()=>removeCredential({
                                     csrfToken: csrfToken?.csrfToken,
                                     id: row.original.key
                                 }),
                             children: /*#__PURE__*/ jsxRuntime.jsx(md.MdDelete, {})
-                        }) : /*#__PURE__*/ jsxRuntime.jsxs("span", {
-                            children: [
-                                ' ',
-                                /*#__PURE__*/ jsxRuntime.jsx(lu.LuRefreshCw, {}),
-                                " ",
-                                /*#__PURE__*/ jsxRuntime.jsx(md.MdDelete, {})
-                            ]
                         })
                     })
             }
@@ -15442,18 +15442,18 @@ const ResourceBadge = ({ resource, serviceBadgeStyle, defaultColor = 'primary' }
  * Open a new window for authentication.
  * @param url - URL to open
  * @param title - Title of the window
- */ const openAuthWindow = (url, title)=>{
+ * @param refetch - refetch the external status if successful
+ */ const openAuthWindow = (url, title, refetch)=>{
     const pollInterval = 500;
     return new Promise((resolve, reject)=>{
         if (window.navigator.cookieEnabled) {
+            const width = Math.max(1024, window.innerWidth / 2);
+            const height = Math.max(1024, window.innerHeight / 2);
             const dualScreenLeft = window.screenLeft ?? window.screenX;
             const dualScreenTop = window.screenTop ?? window.screenY;
-            const width = window.innerWidth ?? document.documentElement.clientWidth ?? screen.width;
-            const height = window.innerHeight ?? document.documentElement.clientHeight ?? screen.height;
-            const systemZoom = width / window.screen.availWidth;
-            const left = (width - 500) / 2 / systemZoom + dualScreenLeft;
-            const top = (height - 550) / 2 / systemZoom + dualScreenTop;
-            const win = window.open(url, title, `width=${500 / systemZoom},height=${550 / systemZoom},top=${top},left=${left}`);
+            const left = dualScreenLeft + (window.innerWidth - width) / 2;
+            const top = dualScreenTop + (window.innerHeight - height) / 2;
+            const win = window.open(url, title, `width=${width},height=${height},left=${left},top=${top}`);
             if (!win) {
                 reject('Popup blocked');
                 return;
@@ -15472,9 +15472,11 @@ const ResourceBadge = ({ resource, serviceBadgeStyle, defaultColor = 'primary' }
                             reject('login_error');
                             return;
                         }
+                        refetch();
                         resolve('success');
                     }
-                } catch (err) {
+                // eslint-disable-next-line @typescript-eslint/no-unused-vars
+                } catch (_err) {
                 // We just want to catch it and not reject it. Rejecting the promise leads to unexpected behavior
                 // where the logged-in status isn't reflected immediately as the program moves ahead w/o users
                 // having a chance to log in, requiring a manual screen refresh to update. By catching errors
@@ -15489,7 +15491,7 @@ const ResourceBadge = ({ resource, serviceBadgeStyle, defaultColor = 'primary' }
         }
     });
 };
-const ExternalProviderCard = ({ provider })=>{
+const ExternalProviderCard = ({ provider, refetch })=>{
     const [loading, handler] = hooks.useDisclosure();
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Card, {
         withBorder: true,
@@ -15583,7 +15585,7 @@ const ExternalProviderCard = ({ provider })=>{
                         onClick: async ()=>{
                             const queryChar = providerUrl.url.includes('?') ? '&' : '?';
                             handler.open();
-                            openAuthWindow(`${providerUrl.url}${queryChar}redirect=${window.location.pathname}`, provider.name).finally(()=>{
+                            openAuthWindow(`${providerUrl.url}${queryChar}redirect=${window.location.pathname}`, provider.name, refetch).finally(()=>{
                                 handler.close();
                             });
                         },
@@ -15606,9 +15608,10 @@ const ExternalProviderCard = ({ provider })=>{
 };
 
 const ExternalProvidersPanel = ()=>{
-    const { data: externalProviders, isLoading, isError, isSuccess } = core.useGetExternalLoginsQuery();
+    const { data: externalProviders, isLoading, isError, isSuccess, refetch } = core.useGetExternalLoginsQuery();
     const providerCards = React.useMemo(()=>externalProviders ? externalProviders.providers.map((provider)=>/*#__PURE__*/ jsxRuntime.jsx(ExternalProviderCard, {
-                provider: provider
+                provider: provider,
+                refetch: refetch
             }, provider.base_url)) : null, [
         externalProviders
     ]);
@@ -20224,7 +20227,7 @@ exports.processLabel = processLabel$1;
 exports.processRangeKeyLabel = processRangeKeyLabel;
 exports.registerCohortBuilderDefaultPreviewRenderers = registerCohortBuilderDefaultPreviewRenderers;
 exports.registerCohortDiscoveryApp = registerCohortDiscoveryApp;
-exports.registerCohortDiversityApp = registerCohortDiversityApp;
+exports.registerCohortSimilarityApp = registerCohortSimilarityApp;
 exports.registerDefaultDiscoveryDataLoaders = registerDefaultDiscoveryDataLoaders;
 exports.registerDiscoveryDefaultCellRenderers = registerDiscoveryDefaultCellRenderers;
 exports.registerDiscoveryDefaultStudyPreviewRenderers = registerDiscoveryDefaultStudyPreviewRenderers;