@gen3/frontend 0.10.78 → 0.10.80

package/dist/esm/index.js

@@ -32,7 +32,7 @@ import { PiDotsThreeCircleThin, PiTrash, PiSparkleFill, PiCaretUpFill, PiCaretDo
 import Head from 'next/head';
 import { useMantineReactTable, MantineReactTable } from 'mantine-react-table';
 import { JSONPath } from 'jsonpath-plus';
-import { LuClock, LuCircleSlash, LuUnlock, LuLock, LuRefreshCw } from 'react-icons/lu';
+import { LuClock, LuCircleSlash, LuUnlock, LuLock } from 'react-icons/lu';
 import { FiDownload, FiMoreVertical } from 'react-icons/fi';
 import { TiArrowUnsorted, TiArrowSortedUp, TiArrowSortedDown } from 'react-icons/ti';
 import { flushSync } from 'react-dom';
@@ -1106,6 +1106,7 @@ const CredentialsLogin = ({ handleLogin })=>{
                 className: "w-1/3",
                 label: /*#__PURE__*/ jsx(Text, {
                     size: "md",
+                    c: "primary.4",
                     children: "Authorize with credentials"
                 }),
                 labelPosition: "center"
@@ -1168,17 +1169,33 @@ function hashCode(str) {
     return hashString(str);
 }
 
-var ContentType = /*#__PURE__*/ function(ContentType) {
+/**
+ * Enum representing various content types for text-based data.
+ *
+ * Each content type corresponds to a specific format or structure of textual content.
+ */ var ContentType = /*#__PURE__*/ function(ContentType) {
     ContentType["Text"] = "text";
     ContentType["TextArray"] = "textArray";
     ContentType["Html"] = "html";
     ContentType["Markdown"] = "markdown";
     ContentType["TextWithEmail"] = "textWithEmail";
     ContentType["TextWithLink"] = "textWithLink";
-    ContentType["Link"] = "link";
     return ContentType;
 }({});
-const TextContent = ({ text, className = 'inline text-base-contrast-min font-medium margin-block-start-1 margin-block-end-1', type = "text", email = undefined, link = undefined, linkText = undefined })=>{
+/**
+ * Renders textual content dynamically based on the provided type and additional properties.
+ *
+ * The `TextContent` function creates a user interface element conditioned on the type of input content, such as plain text, HTML, Markdown, text arrays, text with email links, or text with hyperlinks. It also provides default styling and customizable CSS class support.
+ *
+ * @param {Object} props - Properties for rendering the TextContent component.
+ * @param {string | string[]} props.text - The content to be displayed. It can be a single string or an array of strings.
+ * @param {string} [props.className='inline text-base-contrast-max font-medium margin-block-start-1 margin-block-end-1'] - Custom CSS classes to apply for styling. Defaults to a predefined inline style.
+ * @param {ContentType} [props.type=ContentType.Text] - Specifies the type of content being passed. Determines how the content will be rendered.
+ * @param {string} [props.email] - Optional email address to be rendered as a clickable "mailto" link when type is `ContentType.TextWithEmail`.
+ * @param {string} [props.link] - Optional URL to be rendered as a clickable hyperlink when type is `ContentType.TextWithLink`.
+ * @param {string} [props.linkText] - Optional link text to display instead of the raw URL when type is `ContentType.TextWithLink`.
+ * @returns {JSX.Element} A JSX element that renders the content dynamically based on the input type and properties.
+ */ const TextContent = ({ text, className = 'inline text-base-contrast-max font-medium margin-block-start-1 margin-block-end-1', type = "text", email = undefined, link = undefined, linkText = undefined })=>{
     switch(type){
         case "html":
             {
@@ -1187,7 +1204,8 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
                     className: className,
                     dangerouslySetInnerHTML: {
                         __html: textString
-                    }
+                    },
+                    "aria-label": "HTML content" // Provide context for HTML rendered content
                 });
             }
         case "textArray":
@@ -1197,8 +1215,11 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
                 ] : text;
                 return /*#__PURE__*/ jsx("div", {
                     className: className,
+                    role: "list",
+                    "aria-label": "Text array",
                     children: textArray.map((item)=>/*#__PURE__*/ jsx("p", {
                             className: "my-2",
+                            role: "listitem",
                             children: item
                         }, hashCode(item)))
                 });
@@ -1207,16 +1228,16 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
             {
                 const textString = Array.isArray(text) ? text.join('') : text;
                 return /*#__PURE__*/ jsx("div", {
+                    "aria-label": "Markdown content",
                     children: /*#__PURE__*/ jsx(Markdown, {
                         remarkPlugins: [
                             remarkGfm
                         ],
                         components: {
-                            // define some formatting for the ai response
                             p (props) {
                                 const { node, ...rest } = props;
                                 return /*#__PURE__*/ jsx("p", {
-                                    className: "text-lg text-primary-contrast my-1",
+                                    className: "text-lg my-1",
                                     ...rest
                                 });
                             },
@@ -1248,7 +1269,7 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
             }
         case "textWithEmail":
             {
-                const DEFAULT_STYLE = 'inline text-base-contrast-min font-medium margin-block-start-1 margin-block-end-1';
+                const DEFAULT_STYLE = 'inline text-base-contrast-max font-medium margin-block-start-1 margin-block-end-1';
                 const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
                 const textString = Array.isArray(text) ? text.join('') : text;
                 return /*#__PURE__*/ jsx("div", {
@@ -1261,6 +1282,7 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
                                     root: mergedClassname
                                 },
                                 href: `mailto:${email}`,
+                                "aria-label": `Send an email to ${email}`,
                                 children: ` ${email}.`
                             })
                         ]
@@ -1269,13 +1291,14 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
             }
         case "textWithLink":
             {
-                const DEFAULT_STYLE = 'inline text-base-contrast-min font-medium margin-block-start-1 margin-block-end-1';
+                const DEFAULT_STYLE = 'inline text-base-contrast-max font-medium margin-block-start-1 margin-block-end-1';
                 const mergedClassname = className ? twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
                 const textString = Array.isArray(text) ? text.join('') : text;
                 if (!link) {
                     return /*#__PURE__*/ jsx("div", {
                         className: mergedClassname,
-                        children: " Link is not defined."
+                        "aria-label": "No link defined",
+                        children: "Link is not defined."
                     });
                 }
                 return /*#__PURE__*/ jsx("div", {
@@ -1288,6 +1311,7 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
                                     root: mergedClassname
                                 },
                                 href: link,
+                                "aria-label": `Visit the link: ${linkText || link}`,
                                 children: ` ${linkText ?? link}.`
                             })
                         ]
@@ -1298,6 +1322,7 @@ const TextContent = ({ text, className = 'inline text-base-contrast-min font-med
         default:
             return /*#__PURE__*/ jsx("div", {
                 className: className,
+                "aria-label": "Plain text content",
                 children: /*#__PURE__*/ jsx("p", {
                     children: text.toString()
                 })
@@ -1360,10 +1385,14 @@ const LoginPanel = (loginConfig)=>{
                     loginConfig?.showCredentialsLogin && process.env.NODE_ENV === 'development' && /*#__PURE__*/ jsx(CredentialsLogin, {
                         handleLogin: handleCredentialsLogin
                     }),
-                    bottomContent?.map((content, index)=>/*#__PURE__*/ createElement(TextContent, {
-                            ...content,
-                            key: `bottomContent-${index}`
-                        }))
+                    /*#__PURE__*/ jsx(Center, {
+                        children: /*#__PURE__*/ jsx(Stack, {
+                            children: bottomContent?.map((content, index)=>/*#__PURE__*/ createElement(TextContent, {
+                                    ...content,
+                                    key: `bottomContent-${index}`
+                                }))
+                        })
+                    })
                 ]
             }),
             /*#__PURE__*/ jsx(TexturedSidePanel, {
@@ -7176,6 +7205,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] = useState(false);
     const cardRef = useRef(null);
@@ -7188,7 +7239,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] = useState({});
+    const [sortedData, setSortedData] = useState([]);
     const [sortType, setSortType] = useState({
         type: 'alpha',
         direction: 'asc'
@@ -7307,25 +7358,9 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
     ]);
     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);
         }
     }, [
@@ -7389,10 +7424,10 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
                                                     facetChartData.filteredData.length == 0 ? /*#__PURE__*/ jsx("div", {
                                                         className: "mx-4 font-content text-sm",
                                                         children: BAD_DATA_MESSAGE
-                                                    }) : isSuccess ? !sortedData || Object.entries(sortedData).length === 0 ? /*#__PURE__*/ jsx("div", {
+                                                    }) : isSuccess ? !sortedData || sortedData.length === 0 ? /*#__PURE__*/ jsx("div", {
                                                         className: "mx-4",
                                                         children: "No results found"
-                                                    }) : Object.entries(sortedData ?? {}).map(([value, count])=>{
+                                                    }) : sortedData.map(([value, count])=>{
                                                         return /*#__PURE__*/ jsxs("div", {
                                                             className: "flex flex-row items-center gap-x-1",
                                                             children: [
@@ -7413,7 +7448,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isFacetView = true
                                                                     })
                                                                 }),
                                                                 /*#__PURE__*/ jsx(OverflowTooltippedLabel, {
-                                                                    label: value,
+                                                                    label: value.toString(),
                                                                     children: /*#__PURE__*/ jsx("span", {
                                                                         className: "text-xs font-normal font-content",
                                                                         children: value
@@ -7697,6 +7732,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
@@ -7727,7 +7769,7 @@ const instanceOfIncludesExcludes$1 = (op)=>[
         facetDataValues?.data
     ]);
     useDeepCompareEffect(()=>{
-        if (!facetValue) {
+        if (!facetValue || isFacetEmpty(facetValue)) {
             setSelectedValues([]);
         } else if (instanceOfIncludesExcludes$1(facetValue)) {
             const filters = facetValue.operands.map((x)=>x.toString());
@@ -7738,26 +7780,9 @@ const instanceOfIncludesExcludes$1 = (op)=>[
     ]);
     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
@@ -7818,17 +7843,25 @@ const instanceOfIncludesExcludes$1 = (op)=>[
                 children: /*#__PURE__*/ jsx(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"
                 })
             })
         ]
@@ -8052,7 +8085,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');
         })
     });
 };
@@ -10073,7 +10106,7 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
     const [facetDefinitions, setFacetDefinitions] = useState({});
     const [summaryCharts, setSummaryCharts] = useState({});
     const cohortFilters = useCoreSelector((state)=>selectIndexFilters(state, index));
-    const { data, isSuccess, isError: isAggsQueryError } = useGetAggsQuery({
+    const { data, isSuccess, isFetching: isAggsQueryFetching, isError: isAggsQueryError } = useGetAggsQuery({
         type: index,
         fields: fields,
         filters: cohortFilters
@@ -10189,6 +10222,9 @@ const SinglePanel = ({ filters, tabTitle, facetDefinitions, facetDataHooks })=>{
     return /*#__PURE__*/ jsxs("div", {
         className: "flex mt-3 relative",
         children: [
+            /*#__PURE__*/ jsx(LoadingOverlay, {
+                visible: isAggsQueryFetching
+            }),
             /*#__PURE__*/ jsx("div", {
                 children: filters?.tabs === undefined ? null : filters?.tabs.length > 1 ? /*#__PURE__*/ jsx(TabbedPanel, {
                     filters: filters,
@@ -12268,7 +12304,7 @@ const DefaultRendererCatalog = {
         radarComparison: RadarComparison
     }
 };
-const DiversityChartsFactory = ()=>{
+const CohortSimilarityChartsFactory = ()=>{
     if (!instance) {
         instance = new RenderFactoryTypedInstance();
         instance.registerRendererCatalog(DefaultRendererCatalog);
@@ -12276,7 +12312,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)) {
@@ -12285,7 +12321,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.`);
@@ -12652,7 +12688,7 @@ const ComparisonCharts = ({ ground, groundLabel, comparison, comparisonLabel, co
     return result;
 };
 
-const getStaticDiversityData = (dataset)=>{
+const getStaticSimilarityData = (dataset)=>{
     return convertToAggregateData({
         census: {
             age_at_index: {
@@ -12710,7 +12746,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',
@@ -12985,9 +13021,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 } = useGeneralGQLQuery({
         query: gqlQuery.query,
         variables: JSON.parse(gqlQuery.variables)
@@ -13004,7 +13040,7 @@ const CohortDiversityApp = (config)=>{
     ]);
     if (isComparisonError) {
         return /*#__PURE__*/ jsx(ErrorCard, {
-            message: 'Unable to get data need for Cohort Diversity'
+            message: 'Unable to get data need for Cohort Similarity'
         });
     }
     if (isComparisonLoading) {
@@ -13016,12 +13052,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__*/ jsx(Title, {
                 order: 1,
                 size: "h3",
-                children: "Cohort Diversity Visualization"
+                children: "Cohort Similarity Visualization"
             }),
             /*#__PURE__*/ jsx(Accordion, {
                 variant: "filled",
@@ -13071,13 +13107,13 @@ const CohortDiversityApp = (config)=>{
     });
 };
 
-const { appApi: diversityApi, appStore, appContext } = createAppApiForRTKQ('cohortDiversity');
+const { appApi: cohortSimilarityApi, appStore, appContext } = 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 = getGen3AppId(_APP_NAME$1, _APP_VERSION);
-const registerCohortDiversityApp = ()=>createGen3AppWithOwnStore({
-        App: CohortDiversityApp,
+const registerCohortSimilarityApp = ()=>createGen3AppWithOwnStore({
+        App: CohortSimilarityApp,
         name: _APP_NAME$1,
         version: 'v1.0.0',
         id: AppId,
@@ -15138,19 +15174,12 @@ const getStatus = (expiration, now)=>{
                 header: 'Actions',
                 Cell: ({ row })=>/*#__PURE__*/ jsx("div", {
                         className: "flex items-center",
-                        children: row.original.actions === 'delete' ? /*#__PURE__*/ jsx(ActionIcon, {
+                        children: /*#__PURE__*/ jsx(ActionIcon, {
                             onClick: ()=>removeCredential({
                                     csrfToken: csrfToken?.csrfToken,
                                     id: row.original.key
                                 }),
                             children: /*#__PURE__*/ jsx(MdDelete, {})
-                        }) : /*#__PURE__*/ jsxs("span", {
-                            children: [
-                                ' ',
-                                /*#__PURE__*/ jsx(LuRefreshCw, {}),
-                                " ",
-                                /*#__PURE__*/ jsx(MdDelete, {})
-                            ]
                         })
                     })
             }
@@ -15393,18 +15422,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;
@@ -15423,9 +15452,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
@@ -15440,7 +15471,7 @@ const ResourceBadge = ({ resource, serviceBadgeStyle, defaultColor = 'primary' }
         }
     });
 };
-const ExternalProviderCard = ({ provider })=>{
+const ExternalProviderCard = ({ provider, refetch })=>{
     const [loading, handler] = useDisclosure();
     return /*#__PURE__*/ jsxs(Card, {
         withBorder: true,
@@ -15534,7 +15565,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();
                             });
                         },
@@ -15557,9 +15588,10 @@ const ExternalProviderCard = ({ provider })=>{
 };
 
 const ExternalProvidersPanel = ()=>{
-    const { data: externalProviders, isLoading, isError, isSuccess } = useGetExternalLoginsQuery();
+    const { data: externalProviders, isLoading, isError, isSuccess, refetch } = useGetExternalLoginsQuery();
     const providerCards = useMemo(()=>externalProviders ? externalProviders.providers.map((provider)=>/*#__PURE__*/ jsx(ExternalProviderCard, {
-                provider: provider
+                provider: provider,
+                refetch: refetch
             }, provider.base_url)) : null, [
         externalProviders
     ]);
@@ -19213,7 +19245,7 @@ const DataSetContentsTable = ({ listId, data, removeList, size = 'sm' })=>{
                         listId: listId,
                         data: rowData?.files
                     }),
-                    rowData.additionalData.length > 0 && /*#__PURE__*/ jsx(AdditionalDataTableTable, {
+                    rowData?.additionalData.length > 0 && /*#__PURE__*/ jsx(AdditionalDataTableTable, {
                         header: 'Additional Data',
                         data: rowData?.additionalData
                     }),
@@ -20073,5 +20105,5 @@ async function credentialsLogout(req, res) {
     res.redirect(307, '/');
 }
 
-export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, convertMinutesToMilliseconds, convertSecondsToMilliseconds, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortDiversityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, convertMinutesToMilliseconds, convertSecondsToMilliseconds, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map