@gen3/frontend 0.11.16 → 0.11.18

package/dist/cjs/index.js

@@ -1305,11 +1305,11 @@ const LoginProvidersPanel = ({ handleLoginSelected })=>{
 
 const TexturedSidePanel = ({ url })=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        "aria-label": 'background image',
+        "aria-hidden": "true",
         style: {
             backgroundImage: `url(${url})`
         },
-        className: "flex h-screen w-full bg-left bg-repeat-y last:-scale-x-100"
+        className: "bg-contain flex h-full w-full bg-repeat-y last:-scale-x-100"
     });
 };
 
@@ -1479,8 +1479,7 @@ function hashCode(str) {
                     className: className,
                     dangerouslySetInnerHTML: {
                         __html: textString
-                    },
-                    "aria-label": "HTML content"
+                    }
                 });
             }
         case "textArray":
@@ -1488,22 +1487,29 @@ function hashCode(str) {
                 const textArray = !Array.isArray(text) ? [
                     text
                 ] : text;
-                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                     className: className,
                     role: "list",
-                    "aria-label": "Text array",
-                    children: textArray.map((item)=>/*#__PURE__*/ jsxRuntime.jsx("p", {
-                            className: "my-2",
-                            role: "listitem",
-                            children: item
-                        }, hashCode(item)))
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("style", {
+                            children: [
+                                "@source inline(",
+                                className,
+                                ");"
+                            ]
+                        }),
+                        textArray.map((item)=>/*#__PURE__*/ jsxRuntime.jsx("p", {
+                                className: "my-2",
+                                role: "listitem",
+                                children: item
+                            }, hashCode(item)))
+                    ]
                 });
             }
         case "markdown":
             {
                 const textString = Array.isArray(text) ? text.join('') : text;
                 return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    "aria-label": "Markdown content",
                     children: /*#__PURE__*/ jsxRuntime.jsx(Markdown, {
                         remarkPlugins: [
                             remarkGfm
@@ -1547,21 +1553,29 @@ function hashCode(str) {
                 const DEFAULT_STYLE = 'inline text-base-contrast-max font-medium margin-block-start-1 margin-block-end-1';
                 const mergedClassname = className ? tailwindMerge.twMerge(DEFAULT_STYLE, className) : DEFAULT_STYLE;
                 const textString = Array.isArray(text) ? text.join('') : text;
-                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                     className: mergedClassname,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
-                        children: [
-                            textString,
-                            email && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
-                                classNames: {
-                                    root: mergedClassname
-                                },
-                                href: `mailto:${email}`,
-                                "aria-label": `Send an email to ${email}`,
-                                children: ` ${email}.`
-                            })
-                        ]
-                    })
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("style", {
+                            children: [
+                                "@source inline(",
+                                className,
+                                ");"
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            children: [
+                                textString,
+                                email && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
+                                    classNames: {
+                                        root: mergedClassname
+                                    },
+                                    href: `mailto:${email}`,
+                                    children: ` ${email}.`
+                                })
+                            ]
+                        })
+                    ]
                 });
             }
         case "textWithLink":
@@ -1572,35 +1586,50 @@ function hashCode(str) {
                 if (!link) {
                     return /*#__PURE__*/ jsxRuntime.jsx("div", {
                         className: mergedClassname,
-                        "aria-label": "No link defined",
                         children: "Link is not defined."
                     });
                 }
-                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                     className: mergedClassname,
-                    children: /*#__PURE__*/ jsxRuntime.jsxs("span", {
-                        children: [
-                            textString,
-                            link && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
-                                classNames: {
-                                    root: mergedClassname
-                                },
-                                href: link,
-                                "aria-label": `Visit the link: ${linkText || link}`,
-                                children: ` ${linkText ?? link}.`
-                            })
-                        ]
-                    })
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsxs("style", {
+                            children: [
+                                "@source inline(",
+                                className,
+                                ");"
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsxs("span", {
+                            children: [
+                                textString,
+                                link && /*#__PURE__*/ jsxRuntime.jsx(core$1.Anchor, {
+                                    classNames: {
+                                        root: mergedClassname
+                                    },
+                                    href: link,
+                                    children: ` ${linkText ?? link}.`
+                                })
+                            ]
+                        })
+                    ]
                 });
             }
         case "text":
         default:
-            return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 className: className,
-                "aria-label": "Plain text content",
-                children: /*#__PURE__*/ jsxRuntime.jsx("p", {
-                    children: text.toString()
-                })
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("style", {
+                        children: [
+                            "@source inline(",
+                            className,
+                            ");"
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("p", {
+                        children: text.toString()
+                    })
+                ]
             });
     }
 };
@@ -2094,7 +2123,6 @@ const Gen3ModalsProvider = ({ config, children })=>{
     });
 };
 
-// import { BinGuru } from 'binguru';
 const capitalize = (original)=>{
     if (original === undefined) {
         throw new Error('capitalize: original is undefined');
@@ -2133,6 +2161,30 @@ const processRangeKeyLabel = (key)=>{
     spans = spans.concat(new Array(numLastRow).fill(Math.floor(12 / numLastRow)));
     return spans;
 };
+/**
+ * Filters the keys from the provided aggregation data based on a given list of keys to remove.
+ *
+ * This function processes an `AggregationsData` object by iterating through its properties.
+ * It removes elements from the data that match any of the keys specified in the `keysToRemove` array.
+ * The filtering applies specifically to elements with a valid `key` property of type == string.
+ * If the `key` is empty or matches one of the `keysToRemove`, it is excluded from the resulting object.
+ *
+ * @param {AggregationsData} data - The aggregation data object to filter. Expected to have properties that
+ *                                  are arrays of items containing a `key` property.
+ * @param {Array<string>} keysToRemove - Array of string keys that should be removed from the aggregation data.
+ * @returns {AggregationsData} A new `AggregationsData` object with filtered entries,
+ *                             omitting the specified keys.
+ */ const filterAggregationsDataKeys = (data, keysToRemove)=>{
+    if (!data || typeof data !== 'object') {
+        return {};
+    }
+    return Object.entries(data).reduce((acc, [key, chartData])=>{
+        if (Array.isArray(chartData)) {
+            acc[key] = chartData.filter((x)=>x && typeof x.key === 'string' && !keysToRemove.includes(x.key));
+        }
+        return acc;
+    }, {});
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DefaultItemRenderer(_props) {
@@ -5634,8 +5686,19 @@ const ProtectedContent = ({ children, referer })=>{
             onUnauthenticated();
         }, 2000);
     };
+    const [stableStatus, setStableStatus] = React.useState();
     const { status, pending } = useSession(true, delayRedirect);
-    if (status !== 'issued') {
+    React.useEffect(()=>{
+        if (!pending && stableStatus !== status) {
+            // only update stableStatus if session is not pending
+            // this prevents flickering of the status
+            setStableStatus(status);
+        }
+    }, [
+        status,
+        pending
+    ]);
+    if (stableStatus !== 'issued') {
         // not logged in
         if (pending) return /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: "flex justify-center w-full mt-10",
@@ -11310,160 +11373,6 @@ const CohortManager$1 = ({ index })=>{
     });
 };
 
-function isQueryResponse(obj) {
-    // Considering that the data property can be optional
-    return typeof obj === 'object' && (obj.data === undefined || typeof obj.data === 'object');
-}
-const ExtractData = (data, index)=>{
-    if (data === undefined || data === null) return {};
-    if (data.data === undefined || data.data === null) return {};
-    return Array.isArray(data.data[index]) && data.data[index].length > 0 ? data.data[index][0] : {};
-};
-const QueryRowDetailsPanel = ({ id, index, tableConfig, accessibility })=>{
-    //const [queryGuppy, { data, isLoading, isError }] = useLazyGeneralGQLQuery();
-    const idField = tableConfig.detailsConfig?.idField;
-    const { data, isLoading, isError } = core.useGeneralGQLQuery({
-        query: `query ($filter: JSON) {
-        ${index} (filter: $filter,  accessibility: all) {
-        ${tableConfig.fields}
-        }
-      }`,
-        variables: {
-            filter: {
-                AND: [
-                    {
-                        IN: {
-                            [idField ?? 0]: [
-                                id
-                            ]
-                        }
-                    }
-                ]
-            }
-        }
-    });
-    if (!idField) {
-        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
-            message: 'idField not configure in Tables Details Config'
-        });
-    }
-    if (isError) {
-        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
-            message: 'Error occurred while fetching data'
-        });
-    }
-    const queryData = isQueryResponse(data) ? ExtractData(data, index) : {};
-    const rows = Object.entries(queryData).map(([field, value])=>/*#__PURE__*/ jsxRuntime.jsxs("tr", {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("td", {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        fw: "bold",
-                        children: field
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx("td", {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        children: value ? value : ''
-                    })
-                })
-            ]
-        }, field));
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
-                visible: isLoading
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
-                c: "primary.4",
-                children: [
-                    "Results for ",
-                    id
-                ]
-            }),
-            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
-                withTableBorder: true,
-                withColumnBorders: true,
-                children: [
-                    /*#__PURE__*/ jsxRuntime.jsx("thead", {
-                        children: /*#__PURE__*/ jsxRuntime.jsxs("tr", {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx("th", {
-                                    children: "Field"
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx("th", {
-                                    children: "Value"
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ jsxRuntime.jsx("tbody", {
-                        children: rows
-                    })
-                ]
-            })
-        ]
-    });
-};
-
-const RowTableDetailsPanel = ({ row })=>{
-    const rowData = row?.original ?? {};
-    const rows = Object.entries(rowData).map(([field, value])=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        fw: "bold",
-                        children: field
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        children: value ? value : ''
-                    })
-                })
-            ]
-        }, field));
-    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
-        striped: true,
-        highlightOnHover: true,
-        withTableBorder: true,
-        withColumnBorders: true,
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Thead, {
-                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
-                            children: "Field"
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
-                            children: "Value"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
-                children: rows
-            })
-        ]
-    });
-};
-
-let instance$2;
-const DefaultRendererCatalog$1 = {
-    tableDetails: {
-        default: RowTableDetailsPanel,
-        queryRowDetails: QueryRowDetailsPanel
-    }
-};
-const ExplorerTableDetailsPanelFactory = ()=>{
-    if (!instance$2) {
-        instance$2 = new RenderFactoryTypedInstance();
-    }
-    return instance$2;
-};
-const registerCohortBuilderDefaultPreviewRenderers = ()=>{
-    ExplorerTableDetailsPanelFactory().registerRendererCatalog(DefaultRendererCatalog$1);
-};
-
 const DEFAULT_PROPS = {
     body: 'bg-base-max',
     header: '!bg-primary !pb-9 !mb-9',
@@ -11606,12 +11515,12 @@ const LinkCellFunctionCatalog = {
     default: RenderLinkCell,
     linkWithValueMap: RenderLinkCellUsingValueMap
 };
-let instance$1;
+let instance$2;
 const ExplorerTableCellRendererFactory = ()=>{
-    if (!instance$1) {
-        instance$1 = new RenderFactoryTypedInstance();
+    if (!instance$2) {
+        instance$2 = new RenderFactoryTypedInstance();
     }
-    return instance$1;
+    return instance$2;
 };
 // register default cell renderers
 const registerExplorerDefaultCellRenderers = ()=>{
@@ -11878,6 +11787,91 @@ const SubtableStack = ({ subTables, data })=>{
     });
 };
 
+function isQueryResponse(obj) {
+    // Considering that the data property can be optional
+    return typeof obj === 'object' && (obj.data === undefined || typeof obj.data === 'object');
+}
+const ExtractData = (data, index, path)=>{
+    if (data === undefined || data === null) return {};
+    if (data.data === undefined || data.data === null) return {};
+    if (!lodash.isArray(data.data[index])) return {};
+    let rowData = data.data[index][0];
+    if (path) {
+        const tmp = jsonpathPlus.JSONPath({
+            path: path,
+            json: data.data[index][0]
+        });
+        if (!lodash.isArray(tmp)) {
+            return {};
+        }
+        if (tmp.length > 0) {
+            rowData = tmp[0];
+        }
+    }
+    return rowData;
+};
+const QueryRowDetailsPanel = ({ id, index, tableConfig, accessibility })=>{
+    //const [queryGuppy, { data, isLoading, isError }] = useLazyGeneralGQLQuery();
+    const idField = tableConfig.detailsConfig?.idField;
+    const simpleDetailsView = tableConfig.detailsConfig?.simpleDetailsView;
+    const { setStudyDetails } = useStudyContext();
+    const [opened, { open, close }] = hooks.useDisclosure(false);
+    const { data, isError, isFetching } = core.useGetRawDataAndTotalCountsQuery({
+        type: index,
+        fields: tableConfig.fields,
+        filters: {
+            mode: 'and',
+            root: {
+                [idField]: buildNested(idField, {
+                    operator: '=',
+                    field: idField,
+                    operand: id
+                })
+            }
+        },
+        offset: 0,
+        size: 1,
+        accessibility: accessibility
+    }, {
+        skip: !idField || !id
+    });
+    const queryData = React.useMemo(()=>isQueryResponse(data) ? ExtractData(data, index, tableConfig?.detailsConfig?.dataPath) : {}, [
+        data,
+        index,
+        tableConfig?.detailsConfig?.dataPath
+    ]);
+    React.useEffect(()=>{
+        setStudyDetails(queryData);
+    }, [
+        queryData,
+        setStudyDetails
+    ]);
+    if (!idField) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: 'idField not configure in Tables Details Config'
+        });
+    }
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: 'Error occurred while fetching data'
+        });
+    }
+    // Inital attempt at using Study Details component
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
+                visible: isFetching
+            }),
+            simpleDetailsView ? /*#__PURE__*/ jsxRuntime.jsx(SinglePageStudyDetailsPanel, {
+                data: queryData ?? {},
+                studyConfig: simpleDetailsView
+            }) : /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: "Study Details Panel not configured"
+            })
+        ]
+    });
+};
+
 const DEFAULT_PAGE_LIMIT_LABEL = 'Rows per Page (Limited to 10,0000):';
 const DEFAULT_PAGE_LIMIT = 10000;
 /**
@@ -11896,9 +11890,15 @@ const DEFAULT_PAGE_LIMIT = 10000;
     const [sorting, setSorting] = React.useState([]);
     const [rowSelection, setRowSelection] = React.useState({});
     const [selectedRow, setSelectedRow] = React.useState(undefined);
-    const DetailsPanel = React.useMemo(()=>ExplorerTableDetailsPanelFactory().getRenderer('tableDetails', tableConfig?.detailsConfig?.panel ?? 'default'), [
-        tableConfig?.detailsConfig?.panel
-    ]);
+    // const DetailsPanel = useMemo(
+    //   () =>
+    //     ExplorerTableDetailsPanelFactory().getRenderer(
+    //       'tableDetails',
+    //       tableConfig?.detailsConfig?.panel ?? 'default',
+    //     ),
+    //   [tableConfig?.detailsConfig?.panel],
+    // );
+    const DetailsPanel = React.useMemo(()=>QueryRowDetailsPanel, []);
     const tableColumns = useDeepCompare.useDeepCompareMemo(()=>{
         return createTableColumns(tableConfig);
     }, [
@@ -11911,7 +11911,18 @@ const DEFAULT_PAGE_LIMIT = 10000;
     const getRowId = React.useCallback((tableConfig)=>{
         const { detailsConfig } = tableConfig || {};
         const idField = detailsConfig?.idField;
-        return (originalRow)=>idField && Object.keys(originalRow).includes(idField) ? originalRow[idField] : undefined;
+        if (!idField) return undefined;
+        return (originalRow)=>{
+            const id = jsonpathPlus.JSONPath({
+                json: originalRow,
+                path: idField
+            });
+            if (id.length > 0) {
+                return id[0];
+            } else {
+                return undefined;
+            }
+        };
     }, []);
     const cohortFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
     const { data, isLoading, isError, isFetching } = core.useGetRawDataAndTotalCountsQuery({
@@ -12040,29 +12051,31 @@ const DEFAULT_PAGE_LIMIT = 10000;
             } else return null;
         } : undefined
     });
-    return /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-        children: [
-            Object.keys(rowSelection).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(DetailsComponent, {
-                title: tableConfig?.detailsConfig?.title,
-                id: Object.keys(rowSelection).length > 0 ? Object.keys(rowSelection).at(0) : undefined,
-                row: selectedRow,
-                onClose: ()=>setRowSelection({}),
-                panel: DetailsPanel,
-                classNames: tableConfig?.detailsConfig?.classNames,
-                panelProps: {
-                    index,
-                    tableConfig,
-                    ...tableConfig?.detailsConfig?.params ?? {},
-                    accessibility
-                }
-            }) : null,
-            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "inline-block overflow-x-scroll",
-                children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
-                    table: table
+    return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(StudyProvider, {
+            children: [
+                Object.keys(rowSelection).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(DetailsComponent, {
+                    title: tableConfig?.detailsConfig?.title,
+                    id: Object.keys(rowSelection).length > 0 ? Object.keys(rowSelection).at(0) : undefined,
+                    row: selectedRow,
+                    onClose: ()=>setRowSelection({}),
+                    panel: DetailsPanel,
+                    classNames: tableConfig?.detailsConfig?.classNames,
+                    panelProps: {
+                        index,
+                        tableConfig,
+                        ...tableConfig?.detailsConfig?.params ?? {},
+                        accessibility
+                    }
+                }) : null,
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "inline-block overflow-x-scroll",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                        table: table
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 
@@ -12737,6 +12750,25 @@ const EmptyData = {};
     }, {
         skip: chartKeys.length === 0
     });
+    const cleanChartData = useDeepCompare.useDeepCompareMemo(()=>{
+        if (isChartSuccess && chartData) {
+            const cleanedData = {};
+            Object.keys(summaryCharts).forEach((key)=>{
+                // remove empty keys
+                cleanedData[key] = chartData[key].filter((x)=>typeof x.key !== 'string' ? true : x.key !== '');
+                const facetDef = facetDefinitions?.[key];
+                if (facetDef?.excludeValues) {
+                    cleanedData[key] = cleanedData[key].filter((x)=>typeof x.key !== 'string' ? true : facetDef?.excludeValues?.includes(String(x.key)) === false);
+                }
+            });
+            return cleanedData;
+        }
+        return chartData;
+    }, [
+        chartData,
+        isChartSuccess,
+        summaryCharts
+    ]);
     const getEnumFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
         let filters = undefined;
         let combineMode = 'or';
@@ -12877,7 +12909,7 @@ const EmptyData = {};
         }); // TODO: replace with configurable message
     }
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "flex flex-col mt-3 relative px-4 bg-base-light w-full",
+        className: "flex flex-col mt-3 relative px-4 bg-base-lightest w-full",
         children: [
             /*#__PURE__*/ jsxRuntime.jsx(CohortManager$1, {
                 index: index
@@ -12927,24 +12959,21 @@ const EmptyData = {};
                                     ...chartsSection,
                                     charts: summaryCharts
                                 },
-                                data: chartData ?? EmptyData,
+                                data: cleanChartData ?? EmptyData,
                                 isSuccess: isChartSuccess
                             }) : /*#__PURE__*/ jsxRuntime.jsx(Charts, {
                                 charts: summaryCharts,
-                                data: chartData ?? EmptyData,
+                                data: cleanChartData ?? EmptyData,
                                 counts: counts,
                                 isSuccess: isChartSuccess,
                                 numCols: numCols
                             }),
                             table?.enabled && /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 className: "mt-2 flex flex-col",
-                                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                    className: "grid",
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(ExplorerTable, {
-                                        index: index,
-                                        tableConfig: table,
-                                        accessibility: accessLevel
-                                    })
+                                children: /*#__PURE__*/ jsxRuntime.jsx(ExplorerTable, {
+                                    index: index,
+                                    tableConfig: table,
+                                    accessibility: accessLevel
                                 })
                             })
                         ]
@@ -12979,16 +13008,20 @@ const TabsLayoutToComponentProp = (tabsLayout)=>{
     }
 };
 
-const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
+const useGetCurrentCohort = ()=>{
+    return core.useCoreSelector((state)=>core.selectCurrentCohortId(state));
+};
+const CohortBuilder$1 = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = 'left' })=>{
     const dispatch = core.useCoreDispatch();
     dispatch(core.setSharedFilters(sharedFiltersMap ?? {}));
     const configuration = useDeepCompare.useDeepCompareMemo(()=>explorerConfig, [
         explorerConfig
     ]);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-        className: "w-full",
+        className: "w-full mt-2",
         children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
             color: "primary.4",
+            variant: explorerConfig[0]?.tabType,
             keepMounted: true,
             defaultValue: explorerConfig[0].tabTitle,
             children: [
@@ -13019,6 +13052,71 @@ const CohortBuilder = ({ explorerConfig, sharedFiltersMap = null, tabsLayout = '
     });
 };
 
+var CohortBuilder$2 = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: CohortBuilder$1,
+  useGetCurrentCohort: useGetCurrentCohort
+});
+
+const RowTableDetailsPanel = ({ row })=>{
+    const rowData = row?.original ?? {};
+    const rows = Object.entries(rowData).map(([field, value])=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        fw: "bold",
+                        children: field
+                    })
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        children: value ? value : ''
+                    })
+                })
+            ]
+        }, field));
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
+        striped: true,
+        highlightOnHover: true,
+        withTableBorder: true,
+        withColumnBorders: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Thead, {
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
+                            children: "Field"
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
+                            children: "Value"
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
+                children: rows
+            })
+        ]
+    });
+};
+
+let instance$1;
+const DefaultRendererCatalog$1 = {
+    tableDetails: {
+        default: RowTableDetailsPanel,
+        queryRowDetails: QueryRowDetailsPanel
+    }
+};
+const ExplorerTableDetailsPanelFactory = ()=>{
+    if (!instance$1) {
+        instance$1 = new RenderFactoryTypedInstance();
+    }
+    return instance$1;
+};
+const registerCohortBuilderDefaultPreviewRenderers = ()=>{
+    ExplorerTableDetailsPanelFactory().registerRendererCatalog(DefaultRendererCatalog$1);
+};
+
 const useCustomFacets = ()=>({
         data: [],
         isSuccess: true
@@ -14523,12 +14621,39 @@ const StaticNotebookViewer = ({ notebook })=>{
 
 const StaticNotebookIFrame = ({ notebook })=>{
     const router = router$1.useRouter();
+    const iframeRef = React.useRef(null);
+    React.useEffect(()=>{
+        const iframe = iframeRef.current;
+        const handleLoad = ()=>{
+            try {
+                // Access iframe document
+                if (iframe) {
+                    const iframeDoc = iframe.contentDocument || iframe?.contentWindow?.document;
+                    // Find all anchor tags and add target="_blank"
+                    const links = iframeDoc?.querySelectorAll('a');
+                    links?.forEach((link)=>{
+                        link.setAttribute('target', '_blank');
+                        link.setAttribute('rel', 'noreferrer');
+                    });
+                }
+            } catch (error) {
+                console.error('Cannot access iframe content:', error);
+            }
+        };
+        if (iframe) {
+            iframe.addEventListener('load', handleLoad);
+            return ()=>iframe.removeEventListener('load', handleLoad);
+        }
+    }, []);
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "flex w-full h-full",
         children: /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: "flex justify-items-center w-full",
             children: /*#__PURE__*/ jsxRuntime.jsx("iframe", {
-                allow: "cross-origin",
+                ref: iframeRef,
+                sandbox: "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox",
+                referrerPolicy: "strict-origin-when-cross-origin",
+                allow: "geolocation 'none'; microphone 'none'; camera 'none'",
                 src: `${router.basePath}/${GEN3_STATIC_NOTEBOOK_DIR}/${notebook}`,
                 width: "100%",
                 height: "100%",
@@ -14562,7 +14687,7 @@ class FilesystemContent {
         try {
             const files = myGlob(path.join(this.rootPath, filepath), filter);
             return Promise.all(files.map((file)=>this.get(path.join(filepath, file))));
-        } catch (err) {
+        } catch (_err) {
             throw new Error(`getAllCannot process ${path.join(this.rootPath, filepath)}/${filter}`);
         }
     }
@@ -14617,12 +14742,18 @@ var ContentSource$1 = ContentSource.getInstance();
  * @returns A Promise resolving to an object containing header and footer props.
  */ const getNavPageLayoutPropsFromConfig = async ()=>{
     const navigationConfigJSON = await ContentSource$1.getContentDatabase().get(`${core.GEN3_COMMONS_NAME}/navigation.json`);
-    let bannerConfigJSON = [];
-    try {
-        bannerConfigJSON = await ContentSource$1.getContentDatabase().get(`${core.GEN3_COMMONS_NAME}/banner.json`);
-    } catch (error) {
-        console.warn('No banner config found at: ', `${core.GEN3_COMMONS_NAME}/banner.json`);
-    }
+    const bannerConfigJSON = [];
+    // TODO: enable later
+    // try {
+    //   bannerConfigJSON = await ContentSource.getContentDatabase().get(
+    //     `${GEN3_COMMONS_NAME}/banner.json`,
+    //   );
+    // } catch (error: unknown) {
+    //   console.warn(
+    //     'No banner config found at: ',
+    //     `${GEN3_COMMONS_NAME}/banner.json`,
+    //   );
+    // }
     const { topBar, navigation, type = 'original' } = navigationConfigJSON;
     let headerMetadata = {
         title: 'Gen3 Frontend Framework Page',
@@ -15208,8 +15339,9 @@ const cohortsAdapter = toolkit.createEntityAdapter({
 const DEFAULT_COHORT_NAME = 'Default';
 const loadCohortsFromStorage = toolkit.createAsyncThunk('cohorts/loadFromStorage', async ()=>{
     try {
-        const cohortsMap = await cohortStorage.getAllCohorts();
-        return Object(cohortsMap).values();
+        const results = await cohortStorage.getAllCohorts();
+        if (results.data) return Object.values(results.data);
+        else return [];
     } catch (error) {
         console.error('Failed to load cohorts:', error);
         return [];
@@ -15251,11 +15383,13 @@ const deleteCohortFromStorage = toolkit.createAsyncThunk('cohorts/deleteFromStor
     return cohortId;
 });
 const emptyInitialState = cohortsAdapter.getInitialState({
-    currentCohortId: 'empty',
+    currentCohortId: 'uninitialized',
     loading: false,
+    uninitialized: true,
     error: null,
     autoSaveInProgress: []
 });
+// const initialState = emptyInitialState;
 const initialState = cohortsAdapter.addOne(emptyInitialState, createDefaultCohort());
 const updateAutoSave = (cohortId, state)=>{
     // Add to auto-save queue if not already present
@@ -15436,16 +15570,24 @@ const cohortManagerSlice = toolkit.createSlice({
     extraReducers: (builder)=>{
         builder.addCase(loadCohortsFromStorage.pending, (state)=>{
             state.loading = true;
+            state.uninitialized = false;
             state.error = null;
+            console.log('loadCohortsFromStorage.pending');
         }).addCase(loadCohortsFromStorage.fulfilled, (state, action)=>{
             state.loading = false;
+            console.log('loadCohortsFromStorage.fulfilled', action.payload);
             if (action.payload.length > 0) {
-                if (Object.keys(state.entities).length === 1) {
-                    cohortsAdapter.removeOne(state, state.entities[0].id);
+                if (Object.keys(state.entities).length >= 0) {
+                    cohortsAdapter.removeAll(state);
                 }
                 cohortsAdapter.addMany(state, action.payload);
                 const sortedCohorts = action.payload.sort((a, b)=>b.modifiedDatetime.localeCompare(a.modifiedDatetime));
                 state.currentCohortId = sortedCohorts[0].id;
+            } else {
+                // No cohorts in storage, create default cohort
+                const defaultCohort = createDefaultCohort();
+                cohortsAdapter.addOne(state, defaultCohort);
+                state.currentCohortId = defaultCohort.id;
             }
         }).addCase(loadCohortsFromStorage.rejected, (state, action)=>{
             state.loading = false;
@@ -15502,6 +15644,7 @@ const cohortManagerReducer = cohortManagerSlice.reducer;
 const getCurrentCohort = (state)=>{
     const cohort = state.entities[state.currentCohortId];
     if (!cohort) {
+        console.log('creating default cohort');
         return createDefaultCohort();
     }
     return cohort;
@@ -15611,7 +15754,6 @@ const reducers = redux.combineReducers({
     filtersExpandedState: filtersExpandedReducer,
     facetDefinitionState: facetDefinitionsReducer,
     cohorts: cohortManagerReducer,
-    // savedCohorts: saveCohortPersistenceReducer,
     dataAccessRequests: dataAccessRequestsReducer
 });
 const persistedReducers = reduxPersist.persistReducer(persistConfig, reducers);
@@ -15622,6 +15764,10 @@ const { id, AppStore, AppContext, useAppSelector, useAppDispatch } = core.create
     version: '0.0.1'
 });
 
+process.env.GEN3_COHORT_DISCOVERY_API || `${core.GEN3_API}/api/auth/analysis/cohortDiscovery`;
+const UninitializeCohort = {
+    filters: {}};
+
 // Selectors
 const { selectAll: selectAllCohorts, selectTotal: selectTotalCohorts, selectById: selectCohortById, selectIds: selectCohortIds } = cohortsAdapter.getSelectors((state)=>state.cohorts);
 const selectCurrentCohortId = (state)=>state.cohorts.currentCohortId;
@@ -15629,7 +15775,7 @@ const selectCurrentCohort = (state)=>{
     const { currentCohortId, entities } = state.cohorts;
     const cohort = entities[currentCohortId];
     if (!cohort) {
-        return createDefaultCohort();
+        return null;
     }
     return cohort;
 };
@@ -15651,15 +15797,15 @@ toolkit.createSelector([
 ], (autoSaveArray, cohortId)=>autoSaveArray.includes(cohortId));
 const selectCurrentCohortName = toolkit.createSelector([
     selectCurrentCohort
-], (cohort)=>cohort.name);
+], (cohort)=>cohort?.name ?? 'No Cohort Defined');
 const selectCurrentCohortFilters = toolkit.createSelector([
     selectCurrentCohort
-], (cohort)=>cohort.filters);
+], (cohort)=>cohort ? cohort.filters : UninitializeCohort.filters);
 const selectCurrentCohortIndexFilters = toolkit.createSelector([
     selectCurrentCohort,
     (state, index)=>index
 ], (cohort, index)=>{
-    return cohort.filters?.[index] ?? EmptyFilterSet;
+    return cohort?.filters?.[index] ?? EmptyFilterSet;
 });
 toolkit.createSelector([
     selectAllCohorts,
@@ -15671,7 +15817,6 @@ toolkit.createSelector([
     const trimmedName = params.name.trim().toLowerCase();
     return cohorts.some((cohort)=>cohort.id !== params.excludeId && cohort.name.trim().toLowerCase() === trimmedName);
 });
-const selectCohortManagerLoading = (state)=>state.cohorts.loading;
 const selectCohortIdToNameMap = toolkit.createSelector([
     selectAllCohorts
 ], (cohorts)=>{
@@ -16138,14 +16283,12 @@ const submitCohortRequestAction = async (cohort, values, user, indexResources, r
     }
 };
 
-const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
-    const dispatch = useAppDispatch();
+const CohortManagerPanel = ({ indexResources, remoteSupportService, size = 'md' })=>{
+    const appDispatch = useAppDispatch();
     const [isEditing, setIsEditing] = React.useState(false);
     const [editingLabel, setEditingLabel] = React.useState('');
     const allCohorts = useAppSelector(selectAllCohorts);
     const currentCohort = useAppSelector(selectCurrentCohort);
-    const loading = useAppSelector(selectCohortManagerLoading);
-    const appDispatch = useAppDispatch();
     const [getGetAggs] = core.useLazyGetAggsNoFilterSelfQuery();
     const [requestQuery] = core.useCreateRequestMutation();
     const user = core.useCoreSelector(core.selectUserDetails);
@@ -16162,7 +16305,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     };
     const saveEdit = ()=>{
         if (editingLabel.trim() === '' || !currentCohort.name) return;
-        dispatch(updateCohortName({
+        appDispatch(updateCohortName({
             id: currentCohort.id,
             name: editingLabel
         }));
@@ -16170,7 +16313,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
         setEditingLabel('');
     };
     const handleCreateNew = ()=>{
-        dispatch(createNewCohort({
+        appDispatch(createNewCohort({
             name: 'New Cohort'
         }));
     };
@@ -16182,22 +16325,26 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     }, [
         allCohorts
     ]);
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (!currentCohort) {
+            setCurrentCohortId(allCohorts[0].id);
+        }
+    }, [
+        allCohorts,
+        currentCohort,
+        setCurrentCohortId
+    ]);
     const onSelectCohort = React.useCallback((_value, option)=>{
         if (option) {
-            dispatch(setCurrentCohortId(option.value));
+            appDispatch(setCurrentCohortId(option.value));
         }
     }, [
-        dispatch
+        appDispatch
     ]);
     const handleCohortAccessRequest = async (cohortId, values)=>{
         const cohort = allCohorts.find((obj)=>obj.id === cohortId);
         if (cohort) await submitCohortRequestAction(cohort, values, user, indexResources, remoteSupportService, appDispatch, getGetAggs, requestQuery);
     };
-    if (loading) {
-        return /*#__PURE__*/ jsxRuntime.jsx("div", {
-            children: "Loading cohorts..."
-        });
-    }
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
         gap: "xs",
         className: "flex pt-4 pl-2",
@@ -16255,7 +16402,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
                             onClick: saveEdit,
                             "data-testid": "completeCohortRenameButton",
                             "aria-label": "Complete rename cohort",
-                            disabled: editingLabel.trim() === '' || editingLabel.trim() === currentCohort.name,
+                            disabled: editingLabel.trim() === '' || editingLabel.trim() === currentCohort?.name,
                             size: `compact-${size}`,
                             children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
                                 icon: "gen3:check",
@@ -16330,7 +16477,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
                                 color: theme.colors.accent[4]
                             },
                             onConfirm: ()=>{
-                                dispatch(removeCohort(currentCohort.id));
+                                appDispatch(removeCohort(currentCohort.id));
                             }
                         });
                     },
@@ -16372,8 +16519,15 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
         ]
     });
 };
-
-process.env.GEN3_COHORT_DISCOVERY_API || `${core.GEN3_API}/api/auth/analysis/cohortDiscovery`;
+const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
+    // TODO: initialize and load cohorts from cohort storage
+    //  as right now the redux-persist is handling cohorts
+    return /*#__PURE__*/ jsxRuntime.jsx(CohortManagerPanel, {
+        indexResources: indexResources,
+        remoteSupportService: remoteSupportService,
+        size: size
+    });
+};
 
 const useGraphQLData = (url, body, skip)=>{
     // Create a fetcher function that handles the GraphQL POST request
@@ -16842,22 +16996,6 @@ const SavedCohortsTable = ({ indexResources, remoteSupportService, size = 'md' }
                             })
                         })
                     }),
-                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                        label: "Select Cohort",
-                        withArrow: true,
-                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
-                            color: "accent.4",
-                            variant: "transparent",
-                            "aria-label": "Select cohort",
-                            onClick: ()=>{},
-                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                                icon: "gen3:cohort",
-                                height: iconSize,
-                                width: iconSize,
-                                color: theme.colors.secondary[4]
-                            })
-                        })
-                    }),
                     /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
                         label: "Delete Cohort",
                         withArrow: true,
@@ -19385,6 +19523,7 @@ const MetadataDictionary = ({ schemas })=>{
     }
     return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
         defaultValue: schemas[0].schemaID,
+        variant: schemas[0]?.tabType,
         className: "w-full",
         keepMounted: false,
         children: [
@@ -19724,6 +19863,7 @@ const Discovery = ({ discoveryConfig })=>{
         children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
             className: "w-full",
             defaultValue: metadataIndex,
+            variant: discoveryConfig.metadataConfig[0]?.tabType,
             onChange: (v)=>{
                 setMetadataIndex(v ?? '0');
             },
@@ -20025,6 +20165,9 @@ const LandingPageGetServerSideProps = async ()=>{
     };
 };
 
+const CohortBuilder = dynamic(()=>Promise.resolve().then(function () { return CohortBuilder$2; }), {
+    ssr: false
+});
 const ExplorerPage = ({ headerProps, footerProps, explorerConfig, headerMetadata, tabsLayout, sharedFiltersMap })=>{
     if (explorerConfig === undefined) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
@@ -23642,15 +23785,16 @@ const SelectedItemsTable = ({ validatedItems, rowSelection, setRowSelection, siz
     const table = mantineReactTable.useMantineReactTable({
         columns,
         data: tableRows.rows,
-        enableColumnResizing: false,
         icons: TableIcons,
         enableTopToolbar: false,
         enableRowSelection: true,
         enableBottomToolbar: tableRows.rows.length > 10,
         enablePagination: tableRows.rows.length > 10,
         enableRowActions: false,
-        enableStickyFooter: true,
+        enableColumnResizing: true,
+        enableGrouping: true,
         enableStickyHeader: true,
+        enableStickyFooter: true,
         enableHiding: true,
         onRowSelectionChange: handleRowSelectionChange,
         state: {
@@ -23658,6 +23802,9 @@ const SelectedItemsTable = ({ validatedItems, rowSelection, setRowSelection, siz
         },
         initialState: {
             density: 'xs',
+            grouping: [
+                'datasetId'
+            ],
             columnPinning: {
                 left: [
                     'mrt-row-select',
@@ -25918,6 +26065,13 @@ const staticNotebookAPI = async (req, res)=>{
                 });
             }
             const rawContent = fs.readFileSync(fullPath, 'utf8');
+            DOMPurify.addHook('afterSanitizeAttributes', function(node) {
+                if (node.tagName === 'a' || node.tagName === 'A') {
+                    // Check for anchor tags and target attribute
+                    node.setAttribute('target', '_blank');
+                    node.setAttribute('rel', 'noopener'); // Prevent window.opener vulnerability
+                }
+            });
             const sanitizedContent = DOMPurify.sanitize(rawContent, {
                 ALLOWED_TAGS: [
                     'p',
@@ -25985,7 +26139,7 @@ exports.BAD_DATA_MESSAGE = BAD_DATA_MESSAGE;
 exports.Banner = Banner;
 exports.BaseModal = BaseModal;
 exports.Charts = Charts;
-exports.CohortBuilder = CohortBuilder;
+exports.CohortBuilder = CohortBuilder$1;
 exports.CohortManager = CohortManager$1;
 exports.CollapsableCharts = CollapsableCharts;
 exports.CollapsableSidebar = CollapsableSidebar;
@@ -26112,6 +26266,7 @@ exports.credentialsLogin = credentialsLogin;
 exports.credentialsLogout = credentialsLogout;
 exports.extractObjectKey = extractObjectKey;
 exports.extractRangeValues = extractRangeValues;
+exports.filterAggregationsDataKeys = filterAggregationsDataKeys;
 exports.focusStyles = focusStyles;
 exports.getAllFieldsFromFilterConfigs = getAllFieldsFromFilterConfigs;
 exports.getCurrentUnixTimestamp = getCurrentUnixTimestamp;