@gen3/frontend 0.11.17 → 0.11.19

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,60 @@ 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;
+    }, {});
+};
+
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = React.useState(false);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        label: label,
+        disabled: !showTooltip,
+        position: "top-start",
+        offset: 5,
+        multiline: true,
+        withArrow: true,
+        arrowOffset: 20,
+        classNames: {
+            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
+            arrow: 'bg-base-min bg-opacity-90'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: `${className} truncate ... `,
+            ref: (el)=>{
+                if (el) {
+                    if (el.clientWidth < el.scrollWidth) {
+                        setShowTooltip(true);
+                    } else {
+                        setShowTooltip(false);
+                    }
+                }
+            },
+            children: children
+        })
+    });
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DefaultItemRenderer(_props) {
@@ -2620,16 +2702,25 @@ const LegendRows = ({ data })=>{
     const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
     return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
             children: [
-                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
-                            className: "inline-block mr-2 align-middle",
-                            size: "1em",
-                            radius: "xs",
-                            color: chartColors?.[elIndex % chartColors.length] || ''
-                        }),
-                        element.key
-                    ]
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                    children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-nowrap items-center overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
+                                className: "inline-block mr-2 align-middle",
+                                size: "1em",
+                                radius: "xs",
+                                color: chartColors?.[elIndex % chartColors.length] || ''
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
+                                label: element.key.toString(),
+                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "text-sm font-medium font-content",
+                                    children: element.key.toString()
+                                })
+                            })
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
                     className: "text-right",
@@ -2667,25 +2758,35 @@ const LegendOverflow = ({ chart, data, chartTitle, counts })=>{
                                 children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table, {
                                     withRowBorders: false,
                                     classNames: {
-                                        table: '',
+                                        table: 'w-full table-fixed',
                                         td: 'p-1 leading-3'
                                     },
                                     children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
                                         children: data.map((element, elIndex)=>/*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Tr, {
+                                                className: `${elIndex === 0 ? 'overflow-hidden text-ellipsis whitespace-nowrap' : 'last:text-right'}`,
                                                 children: [
-                                                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table.Td, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
-                                                                className: "inline-block mr-2 align-middle",
-                                                                size: "1em",
-                                                                radius: "xs",
-                                                                color: chartColors?.[elIndex % chartColors.length] || ''
-                                                            }),
-                                                            element.key
-                                                        ]
+                                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
+                                                        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                                            className: "flex flex-nowrap items-center",
+                                                            children: [
+                                                                /*#__PURE__*/ jsxRuntime.jsx(core$1.ColorSwatch, {
+                                                                    className: "inline-block mr-2 align-middle",
+                                                                    size: "1em",
+                                                                    radius: "xs",
+                                                                    color: chartColors?.[elIndex % chartColors.length] || ''
+                                                                }),
+                                                                /*#__PURE__*/ jsxRuntime.jsx(OverflowTooltippedLabel, {
+                                                                    label: element.key.toString(),
+                                                                    children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                                                        className: "text-sm font-medium font-content",
+                                                                        children: element.key.toString()
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     }),
                                                     /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Td, {
-                                                        className: "text-right",
+                                                        className: "w-[10%] text-right",
                                                         children: element.count
                                                     })
                                                 ]
@@ -2763,31 +2864,35 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         inheritPadding: true,
                         py: "xs",
                         withBorder: style === 'box',
-                        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
-                            withRowBorders: false,
-                            classNames: {
-                                td: 'p-1 leading-3',
-                                th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
-                                thead: 'border-b',
-                                tbody: "before:content-[''] before:block before:p-1"
-                            },
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Thead, {
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tr, {
-                                        children: dataKeys.map((el, i)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
-                                                className: "last:text-right",
-                                                children: charts[field]?.dataLabels?.[el] || /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
-                                                    children: " "
-                                                })
-                                            }, i))
-                                    })
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
-                                    children: data === undefined ? '' : /*#__PURE__*/ jsxRuntime.jsx(LegendRows, {
-                                        data: data[field]
+                        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            className: "w-full",
+                            children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Table, {
+                                withRowBorders: false,
+                                classNames: {
+                                    table: 'w-full table-fixed',
+                                    td: 'p-1 leading-3',
+                                    th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
+                                    thead: 'border-b',
+                                    tbody: "before:content-[''] before:block before:p-1"
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Thead, {
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tr, {
+                                            children: dataKeys.map((el, i)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Th, {
+                                                    className: `${i === 0 ? 'w-[90%] overflow-hidden text-ellipsis whitespace-nowrap' : 'last:text-right'}`,
+                                                    children: charts[field]?.dataLabels?.[el] || /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
+                                                        children: " "
+                                                    })
+                                                }, i))
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Table.Tbody, {
+                                        children: data === undefined ? '' : /*#__PURE__*/ jsxRuntime.jsx(LegendRows, {
+                                            data: data[field]
+                                        })
                                     })
-                                })
-                            ]
+                                ]
+                            })
                         })
                     }),
                     showLegends && moreThanMaxRows && /*#__PURE__*/ jsxRuntime.jsx(core$1.Card.Section, {
@@ -3818,36 +3923,6 @@ flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5 ro
     });
 };
 
-const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
-    const [showTooltip, setShowTooltip] = React.useState(false);
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-        label: label,
-        disabled: !showTooltip,
-        position: "top-start",
-        offset: 5,
-        multiline: true,
-        withArrow: true,
-        arrowOffset: 20,
-        classNames: {
-            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
-            arrow: 'bg-base-min bg-opacity-90'
-        },
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: `${className} truncate ... `,
-            ref: (el)=>{
-                if (el) {
-                    if (el.clientWidth < el.scrollWidth) {
-                        setShowTooltip(true);
-                    } else {
-                        setShowTooltip(false);
-                    }
-                }
-            },
-            children: children
-        })
-    });
-};
-
 const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc', moveValuesToBottom = [], excludeValues = [] })=>{
     const [isGroupExpanded, setIsGroupExpanded] = React.useState(false);
     const cardRef = React.useRef(null);
@@ -5744,6 +5819,20 @@ const FooterRowComponent = ({ item, rowClassname })=>{
         case 'Icon':
             {
                 const logo = item[itemType];
+                if (logo.href) {
+                    return /*#__PURE__*/ jsxRuntime.jsx("a", {
+                        href: logo.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: className,
+                        children: /*#__PURE__*/ jsxRuntime.jsx(Image, {
+                            src: `${logo.logo}`,
+                            width: logo.width,
+                            height: logo.height,
+                            alt: logo.description
+                        })
+                    }, `icons-${logo.logo}`);
+                }
                 return /*#__PURE__*/ jsxRuntime.jsx(Image, {
                     src: `${logo.logo}`,
                     width: logo.width,
@@ -7179,10 +7268,16 @@ const createFieldRendererElement = (field, resource)=>{
         json: resource,
         path: field.field
     });
-    if (resourceFieldValue === undefined || resourceFieldValue === null) {
+    if (!lodash.isArray(resourceFieldValue) || resourceFieldValue.length == 0 || resourceFieldValue[0] === null) {
         if (field.includeIfNotAvailable === false) return null;
-        if (field.valueIfNotAvailable) resourceFieldValue = field.valueIfNotAvailable;
-    } else resourceFieldValue = resourceFieldValue.length > 0 ? resourceFieldValue[0] : '';
+        if (field.valueIfNotAvailable) {
+            resourceFieldValue = field.valueIfNotAvailable;
+        } else {
+            resourceFieldValue = '';
+        }
+    } else {
+        resourceFieldValue = resourceFieldValue[0];
+    }
     const label = field.includeLabel === undefined || field?.includeLabel ? field.name : undefined;
     const studyFieldRenderer = StudyDetailsRenderer(field.contentType, field?.renderer ?? 'default');
     switch(field.contentType){
@@ -7439,17 +7534,17 @@ const SinglePageStudyDetailsPanel = ({ data, studyConfig, authorization })=>{
                 children: "Study Details Panel not configured"
             });
         } else {
-            return studyConfig?.fieldsToShow.map((field)=>{
+            return studyConfig?.fieldsToShow.map((fieldToShow)=>{
                 return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: `px-2 ${field.groupWidth == 'full' || field.groupWidth === undefined ? 'w-full' : 'w-1/2'}`,
+                    className: `px-2 ${fieldToShow.groupWidth == 'full' || fieldToShow.groupWidth === undefined ? 'w-full' : 'w-1/2'}`,
                     children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
                         className: "flex flex-col",
                         children: [
-                            field?.groupName ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                            fieldToShow?.groupName ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                                 className: "text-lg font-bold",
-                                children: field.groupName
+                                children: fieldToShow.groupName
                             }) : null,
-                            field.fields.map((field)=>{
+                            fieldToShow.fields.map((field)=>{
                                 const element = createFieldRendererElement(field, data);
                                 if (element !== null) {
                                     return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -7460,7 +7555,7 @@ const SinglePageStudyDetailsPanel = ({ data, studyConfig, authorization })=>{
                             })
                         ]
                     })
-                }, `${field.fields.join('-')}-details`);
+                }, `${fieldToShow.fields.join('-')}-details`);
             });
         }
     }, [
@@ -11321,160 +11416,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',
@@ -11518,6 +11459,48 @@ const DetailsModal = ({ title, id, row, classNames, panel, panelProps, onClose,
     });
 };
 
+const DetailsDrawer = ({ id, title, panel, panelProps })=>{
+    const [opened, { open, close }] = hooks.useDisclosure(id !== undefined);
+    React.useEffect(()=>{
+        if (id !== undefined) open();
+        else close();
+    }, [
+        close,
+        id,
+        open
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Drawer.Root, {
+        opened: opened,
+        onClose: close,
+        size: "50%",
+        position: "right",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Drawer.Overlay, {
+                opacity: 0.5,
+                blur: 4
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Drawer.Content, {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Drawer.Header, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Button, {
+                            leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdKeyboardDoubleArrowLeft, {}),
+                            onClick: close,
+                            variant: "outline",
+                            children: "Back"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Drawer.Body, {
+                        children: panel({
+                            id: id,
+                            ...panelProps
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 // TODO need to type this
 const RenderArrayCell = ({ cell })=>{
     const value = cell.getValue();
@@ -11617,12 +11600,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 = ()=>{
@@ -11889,6 +11872,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;
 /**
@@ -11903,13 +11971,19 @@ const DEFAULT_PAGE_LIMIT = 10000;
         pageIndex: 0,
         pageSize: 10
     });
-    const DetailsComponent = DetailsModal;
+    const DetailsComponent = React.useMemo(()=>tableConfig?.detailsConfig?.panelContainer === 'drawer' ? DetailsDrawer : DetailsModal, []);
     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);
     }, [
@@ -11922,7 +11996,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({
@@ -11979,6 +12064,12 @@ const DEFAULT_PAGE_LIMIT = 10000;
         onPaginationChange: setPagination,
         onSortingChange: setSorting,
         enableTopToolbar: false,
+        enableExpandAll: false,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                enableHiding: true
+            }
+        },
         enableExpanding: !!tableConfig?.detailsConfig,
         getRowId: getRowId(tableConfig),
         rowCount: totalRowCount,
@@ -11988,6 +12079,16 @@ const DEFAULT_PAGE_LIMIT = 10000;
         localization: {
             rowsPerPage: limitLabel
         },
+        // mantineExpandAllButtonProps: {
+        //   style: {
+        //     visibility: 'hidden',
+        //   },
+        // },
+        // mantineExpandButtonProps: {
+        //   style: {
+        //     visibility: 'hidden',
+        //   },
+        // },
         mantineTableProps: {
             style: {
                 backgroundColor: 'var(--mantine-color-base-1)',
@@ -12019,7 +12120,10 @@ const DEFAULT_PAGE_LIMIT = 10000;
             showProgressBars: isFetching,
             showAlertBanner: isError,
             density: 'xs',
-            rowSelection: rowSelection
+            rowSelection: rowSelection,
+            columnVisibility: {
+                'mrt-row-expand': false
+            }
         },
         mantineTableBodyRowProps: tableConfig.detailsConfig?.mode === 'click' ? ({ row })=>({
                 onClick: ()=>{
@@ -12051,29 +12155,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: [
+                /*#__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
+                    }
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: "inline-block overflow-x-scroll",
+                    children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                        table: table
+                    })
                 })
-            })
-        ]
+            ]
+        })
     });
 };
 
@@ -12748,6 +12854,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';
@@ -12888,7 +13013,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
@@ -12938,24 +13063,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
                                 })
                             })
                         ]
@@ -12990,16 +13112,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: [
@@ -13030,6 +13156,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
@@ -14534,12 +14725,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%",
@@ -14573,7 +14791,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}`);
         }
     }
@@ -14628,12 +14846,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',
@@ -15219,8 +15443,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 [];
@@ -15262,11 +15487,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
@@ -15447,16 +15674,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;
@@ -15513,6 +15748,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;
@@ -15622,7 +15858,6 @@ const reducers = redux.combineReducers({
     filtersExpandedState: filtersExpandedReducer,
     facetDefinitionState: facetDefinitionsReducer,
     cohorts: cohortManagerReducer,
-    // savedCohorts: saveCohortPersistenceReducer,
     dataAccessRequests: dataAccessRequestsReducer
 });
 const persistedReducers = reduxPersist.persistReducer(persistConfig, reducers);
@@ -15633,6 +15868,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;
@@ -15640,7 +15879,7 @@ const selectCurrentCohort = (state)=>{
     const { currentCohortId, entities } = state.cohorts;
     const cohort = entities[currentCohortId];
     if (!cohort) {
-        return createDefaultCohort();
+        return null;
     }
     return cohort;
 };
@@ -15662,15 +15901,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,
@@ -15682,7 +15921,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)=>{
@@ -16149,14 +16387,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);
@@ -16173,7 +16409,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     };
     const saveEdit = ()=>{
         if (editingLabel.trim() === '' || !currentCohort.name) return;
-        dispatch(updateCohortName({
+        appDispatch(updateCohortName({
             id: currentCohort.id,
             name: editingLabel
         }));
@@ -16181,7 +16417,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
         setEditingLabel('');
     };
     const handleCreateNew = ()=>{
-        dispatch(createNewCohort({
+        appDispatch(createNewCohort({
             name: 'New Cohort'
         }));
     };
@@ -16193,22 +16429,26 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
     }, [
         allCohorts
     ]);
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (!currentCohort) {
+            appDispatch(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",
@@ -16266,7 +16506,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",
@@ -16341,7 +16581,7 @@ const CohortManager = ({ indexResources, remoteSupportService, size = 'md' })=>{
                                 color: theme.colors.accent[4]
                             },
                             onConfirm: ()=>{
-                                dispatch(removeCohort(currentCohort.id));
+                                appDispatch(removeCohort(currentCohort.id));
                             }
                         });
                     },
@@ -16383,8 +16623,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
@@ -16853,22 +17100,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,
@@ -19396,6 +19627,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: [
@@ -19735,6 +19967,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');
             },
@@ -20036,6 +20269,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, {
@@ -25933,6 +26169,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',
@@ -26000,7 +26243,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;
@@ -26127,6 +26370,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;