@gen3/frontend 0.10.98 → 0.10.99

package/dist/cjs/index.js

@@ -47,6 +47,7 @@ var lu = require('react-icons/lu');
 require('universal-cookie');
 var modals = require('@mantine/modals');
 var GraphiQL = require('graphiql');
+var router$1 = require('next/dist/client/router');
 var fs = require('fs');
 var path = require('path');
 var react$1 = require('redux-persist/integration/react');
@@ -62,6 +63,7 @@ var filesize = require('filesize');
 var dnd = require('@hello-pangea/dnd');
 var plugin = require('tailwindcss/plugin');
 var cookie = require('cookie');
+var DOMPurify = require('isomorphic-dompurify');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -2777,6 +2779,69 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
     });
 };
 
+const CollapsableCharts = ({ config, data })=>{
+    const [showLegends, setShowLegends] = React.useState(config.showLegends?.enabled);
+    if (!(config?.charts && Object.keys(config.charts).length > 0)) {
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                message: "Charts Section not setup properly"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
+        unstyled: true,
+        classNames: {
+            root: 'mb-4 bg-base-max w-full rounded-lg',
+            control: 'bg-secondary-lightest w-full px-4 py-2 rounded-lg data-active:rounded-b-none text-left group',
+            label: 'pl-2 font-bold [text-shadow:_1px_0_#000]',
+            chevron: 'rounded-full bg-secondary-dark text-white inline-block align-middle group-data-[active]:rotate-180 transition-all',
+            panel: 'py-4'
+        },
+        chevronPosition: "left",
+        defaultValue: "chartsAccordion",
+        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
+            value: 'chartsAccordion',
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
+                    children: config.title || ''
+                }),
+                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Panel, {
+                    children: [
+                        config.showLegends?.enabled && config.showLegends?.showSwitch && /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                                    color: "accent",
+                                    labelPosition: "left",
+                                    label: "Show legends",
+                                    size: "xs",
+                                    px: "md",
+                                    checked: showLegends,
+                                    onChange: (event)=>setShowLegends(event.currentTarget.checked)
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                                    my: "sm"
+                                })
+                            ]
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Box, {
+                            px: "md",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(Charts, {
+                                showLegends: showLegends,
+                                style: "box",
+                                charts: config.charts,
+                                data: data,
+                                counts: 2,
+                                isSuccess: true,
+                                numCols: 4
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
 const ChartTitleBar = ({ divId, title, filename, jsonData })=>{
     return /*#__PURE__*/ jsxRuntime.jsx("div", {
         className: "flex justify-between items-center",
@@ -3324,7 +3389,7 @@ const useFieldNameToTitle = ()=>{
     return fieldToTitle;
 };
 
-const DEFAULT_VISIBLE_ITEMS = 6;
+const DEFAULT_VISIBLE_ITEMS$1 = 6;
 const DEFAULT_MINIMUM = 0;
 const DEFAULT_MAXIMUM = 100;
 const BAD_DATA_MESSAGE = 'No data for this field';
@@ -3761,7 +3826,7 @@ const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false
     }, [
         enumFilters
     ]);
-    const maxValuesToDisplay = DEFAULT_VISIBLE_ITEMS;
+    const maxValuesToDisplay = DEFAULT_VISIBLE_ITEMS$1;
     // update filters when checkbox is selected
     const handleChange = (value, checked)=>{
         setFacetChartData({
@@ -5004,6 +5069,7 @@ const CustomFacetGroup = ({ hooks, customFacetHooks, queryOptions, getFacetLabel
     });
 };
 
+const DEFAULT_VISIBLE_ITEMS = 16;
 const FacetSelector = ({ category, facetName, hooks, width = 'w-full', description, fields, selectedFields, updateSelectedField, showSearch = true, showSettings = false, header = {
     Panel: FacetHeader,
     Label: FacetText,
@@ -5034,7 +5100,8 @@ const FacetSelector = ({ category, facetName, hooks, width = 'w-full', descripti
         searchTerm,
         fields
     ]);
-    const remainingValues = filteredFields.length - DEFAULT_VISIBLE_ITEMS;
+    const remainingValues = filteredFields.length - DEFAULT_VISIBLE_ITEMS * 2;
+    const visibleFields = filteredFields.slice(0, !isGroupExpanded ? DEFAULT_VISIBLE_ITEMS : undefined);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: `flex flex-col ${width ? width : 'mx-1'} bg-base-max relative border-base-light border-1 rounded-b-md transition`,
         id: category,
@@ -5083,11 +5150,11 @@ const FacetSelector = ({ category, facetName, hooks, width = 'w-full', descripti
                                 /*#__PURE__*/ jsxRuntime.jsx("div", {
                                     className: "card-face bg-base-max rounded-b-xs flex flex-col gap-y-1 justify-between",
                                     children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                        children: filteredFields.length == 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                        children: visibleFields.length == 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
                                             className: "mx-4 font-content text-sm",
                                             children: BAD_DATA_MESSAGE
-                                        }) : filteredFields.map((facet)=>{
-                                            const label = core.fieldNameToTitle(facet.field);
+                                        }) : visibleFields.map((facet)=>{
+                                            const label = facet?.label ?? core.fieldNameToTitle(facet.field);
                                             return /*#__PURE__*/ jsxRuntime.jsxs("div", {
                                                 className: "flex justify-between items-center px-2 my-1",
                                                 children: [
@@ -5138,7 +5205,12 @@ const ProtectedContent = ({ children, referer })=>{
             }
         });
     };
-    const { status, pending } = useSession(true, onUnauthenticated);
+    const delayRedirect = ()=>{
+        setTimeout(()=>{
+            onUnauthenticated();
+        }, 2000);
+    };
+    const { status, pending } = useSession(true, delayRedirect);
     if (status !== 'issued') {
         // not logged in
         if (pending) return /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -5148,12 +5220,20 @@ const ProtectedContent = ({ children, referer })=>{
         else return /*#__PURE__*/ jsxRuntime.jsx("div", {
             className: "w-full h-full relative",
             children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
-                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Paper, {
-                    shadow: "md",
-                    p: "md",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                        children: "You are not signed in and cannot access this protected content. Please login in."
-                    })
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                    h: 300,
+                    align: "center",
+                    justify: "center",
+                    gap: "md",
+                    className: "mt-24",
+                    children: [
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                            children: "You are not logged in and cannot access this protected content."
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                            children: "You will be redirected to the login page in a few seconds.."
+                        })
+                    ]
                 })
             })
         });
@@ -5471,7 +5551,7 @@ const LoginButton = ({ name = 'login', leftIcon = undefined, rightIcon = undefin
 const processTopBarItems = (items, classNames, dividerClassname)=>{
     return items.reduce((acc, item, index)=>{
         const mergedClassnames = item?.classNames ? mergeDefaultTailwindClassnames(classNames, item.classNames) : classNames;
-        acc.push(/*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        acc.push(/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
             children: [
                 /*#__PURE__*/ jsxRuntime.jsx("a", {
                     className: "flex",
@@ -5483,7 +5563,7 @@ const processTopBarItems = (items, classNames, dividerClassname)=>{
                         rightIcon: item.rightIcon,
                         classNames: mergedClassnames
                     })
-                }, `${item.href}_${item.name}`),
+                }),
                 /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
                     size: "md",
                     orientation: "vertical",
@@ -5492,7 +5572,7 @@ const processTopBarItems = (items, classNames, dividerClassname)=>{
                     }
                 })
             ]
-        }));
+        }, `${item.href}_${item.name}-topbar-item`));
         return acc;
     }, []);
 };
@@ -5993,7 +6073,7 @@ const LeftSidePanel = ({ items = [], classNames = {} })=>{
     });
 };
 
-const NavPageLayout = ({ headerProps, footerProps, mainProps, headerData, children })=>{
+const NavPageLayout = ({ headerProps, footerProps, mainProps, headerMetadata, children })=>{
     const mainContentStyle = mainProps?.fixed ? 'flex-1 flex overflow-hidden relative' : 'flex grow relative';
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "flex flex-col justify-between h-screen",
@@ -6001,24 +6081,24 @@ const NavPageLayout = ({ headerProps, footerProps, mainProps, headerData, childr
             /*#__PURE__*/ jsxRuntime.jsxs(Head, {
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("title", {
-                        children: headerData.title
+                        children: headerMetadata.title
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("meta", {
                         property: "og:title",
-                        content: headerData.content
-                    }, headerData.key)
+                        content: headerMetadata.content
+                    }, headerMetadata.key)
                 ]
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(Header$1, {
                 ...headerProps,
                 children: [
                     /*#__PURE__*/ jsxRuntime.jsx("title", {
-                        children: headerData.title
+                        children: headerMetadata.title
                     }),
                     /*#__PURE__*/ jsxRuntime.jsx("meta", {
                         property: "og:title",
-                        content: headerData.content
-                    }, headerData.key)
+                        content: headerMetadata.content
+                    }, headerMetadata.key)
                 ]
             }),
             headerProps.type === 'vertical' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -6044,6 +6124,20 @@ const NavPageLayout = ({ headerProps, footerProps, mainProps, headerData, childr
     });
 };
 
+/**
+ * Type guard to check if an object is of type HeaderMetadata
+ * @param obj - The object to check
+ * @returns True if the object is a valid HeaderMetadata
+ */ const isHeaderMetadata = (obj)=>{
+    // Check if obj is a non-null object
+    if (typeof obj !== 'object' || obj === null || Array.isArray(obj)) {
+        return false;
+    }
+    const candidate = obj;
+    // Check all required properties exist and are non-empty strings
+    return typeof candidate.title === 'string' && candidate.title.trim().length > 0 && typeof candidate.content === 'string' && candidate.content.trim().length > 0 && typeof candidate.key === 'string' && candidate.key.trim().length > 0;
+};
+
 var classes = {"tableRow":"DiscoveryTable-module_tableRow__yFUJZ"};
 
 const jsonPathAccessor$1 = (path)=>(row)=>{
@@ -7883,69 +7977,6 @@ const SummaryStatisticPanel = ({ summaries })=>{
     });
 };
 
-const ChartsPanel = ({ config, data })=>{
-    const [showLegends, setShowLegends] = React.useState(config.showLegends?.enabled);
-    if (!(config?.charts && Object.keys(config.charts).length > 0)) {
-        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
-            children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
-                message: "Discovery Charts Section not setup properly"
-            })
-        });
-    }
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion, {
-        unstyled: true,
-        classNames: {
-            root: 'mb-4 bg-base-max w-full rounded-lg',
-            control: 'bg-secondary-lightest w-full px-4 py-2 rounded-lg data-active:rounded-b-none text-left group',
-            label: 'pl-2 font-bold [text-shadow:_1px_0_#000]',
-            chevron: 'rounded-full bg-secondary-dark text-white inline-block align-middle group-data-[active]:rotate-180 transition-all',
-            panel: 'py-4'
-        },
-        chevronPosition: "left",
-        defaultValue: "chartsAccordion",
-        children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Item, {
-            value: 'chartsAccordion',
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Accordion.Control, {
-                    children: config.title || ''
-                }),
-                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Accordion.Panel, {
-                    children: [
-                        config.showLegends?.enabled && config.showLegends?.showSwitch && /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-                            children: [
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
-                                    color: "accent",
-                                    labelPosition: "left",
-                                    label: "Show legends",
-                                    size: "xs",
-                                    px: "md",
-                                    checked: showLegends,
-                                    onChange: (event)=>setShowLegends(event.currentTarget.checked)
-                                }),
-                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
-                                    my: "sm"
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Box, {
-                            px: "md",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(Charts, {
-                                showLegends: showLegends,
-                                style: "box",
-                                charts: config.charts,
-                                data: data,
-                                counts: 2,
-                                isSuccess: true,
-                                numCols: 4
-                            })
-                        })
-                    ]
-                })
-            ]
-        })
-    });
-};
-
 const isSearchKV = (obj)=>{
     return obj && obj.key && obj.value;
 };
@@ -9286,7 +9317,7 @@ registerDefaultDiscoveryDataLoaders();
                             size: "xl",
                             children: discoveryConfig?.features?.pageTitle.text
                         }) : null,
-                        discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsxRuntime.jsx(ChartsPanel, {
+                        discoveryConfig.features?.chartsSection?.enabled && /*#__PURE__*/ jsxRuntime.jsx(CollapsableCharts, {
                             config: discoveryConfig.features?.chartsSection,
                             data: chartData
                         }),
@@ -12346,7 +12377,25 @@ const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHo
 };
 
 const EmptyData = {};
-const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropdowns, buttons, loginForDownload, showAccessLevel = false })=>{
+/**
+ * CohortPanel is a React component that provides an interactive interface for cohort exploration and filtering.
+ * It integrates with data services and facilitates visualization, filtering, and analysis tasks.
+ *
+ * @param {Object} props                          The properties required to configure the CohortPanel component.
+ * @param {Object} props.guppyConfig              Configuration object for Guppy, including field mappings and data type information.
+ * @param {Object} props.filters                  Configuration for filter tabs, including filter fields and layout.
+ * @param {Object} [props.charts={}]              Optional set of chart configuration objects for rendering summaries.
+ * @param {Object} [props.chartsSection]          Optional configuration for an additional section of charts.
+ * @param {Object} props.table                    Reference to the table configuration or component for displaying data.
+ * @param {string} props.tabTitle                 Title for the filter tab section.
+ * @param {Object[]|undefined} props.dropdowns    Dropdown menu configuration, allowing for additional filter options or actions.
+ * @param {Object[]|undefined} props.buttons      List of button configurations for actions such as downloads.
+ * @param {boolean} props.loginForDownload        Determines whether login is required to enable download functionality.
+ * @param {boolean} [props.showAccessLevel=false] Indicates if the user access level should be displayed on the panel.
+ *
+ * @returns {JSX.Element}                         Returns a JSX element rendering the CohortPanel. This includes filter options,
+ *                                                summary charts, cohort manager, and data display components.
+ */ const CohortPanel = ({ guppyConfig, filters, charts = {}, chartsSection = undefined, table, tabTitle, dropdowns, buttons, loginForDownload, showAccessLevel = false })=>{
     const isSm = hooks.useMediaQuery('(min-width: 639px)');
     const isMd = hooks.useMediaQuery('(min-width: 1373px)');
     const isXl = hooks.useMediaQuery('(min-width: 1600px)');
@@ -12371,7 +12420,10 @@ const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropd
     });
     const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = core.useGetAggsNoFilterSelfQuery({
         type: index,
-        fields: Object.keys(charts),
+        fields: [
+            ...Object.keys(chartsSection?.charts ?? {}),
+            ...Object.keys(charts)
+        ],
         filters: cohortFilters,
         accessibility: accessLevel
     });
@@ -12477,7 +12529,8 @@ const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropd
             const facetDefs = classifyFacets(data, index, guppyConfig?.fieldMapping ?? [], configFacetDefs ?? {}, sharedFiltersMap);
             setFacetDefinitions(facetDefs);
             // setup summary charts since nested fields can be listed by the split field name
-            const summaryCharts = Object.keys(charts).reduce((acc, field)=>{
+            const chartDefinitions = chartsSection?.charts ?? charts;
+            const summaryCharts = Object.keys(chartDefinitions).reduce((acc, field)=>{
                 let chartField = field;
                 if (facetDefs?.[field] === undefined) {
                     const res = Object.values(facetDefs).filter((def)=>{
@@ -12489,7 +12542,7 @@ const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropd
                 }
                 return {
                     ...acc,
-                    [chartField]: charts[field]
+                    [chartField]: chartDefinitions[field]
                 };
             }, {});
             setSummaryCharts(summaryCharts);
@@ -12500,7 +12553,8 @@ const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropd
         facetDefinitions,
         index,
         guppyConfig.fieldMapping,
-        charts
+        charts,
+        chartsSection
     ]);
     const { data: counts, isSuccess: isCountSuccess, isError } = core.useGetCountsQuery({
         type: index,
@@ -12558,7 +12612,13 @@ const CohortPanel = ({ guppyConfig, filters, charts = {}, table, tabTitle, dropd
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ jsxRuntime.jsx(Charts, {
+                            chartsSection?.enabled ? /*#__PURE__*/ jsxRuntime.jsx(CollapsableCharts, {
+                                config: {
+                                    ...chartsSection,
+                                    charts: summaryCharts
+                                },
+                                data: chartData ?? EmptyData
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(Charts, {
                                 charts: summaryCharts,
                                 data: chartData ?? EmptyData,
                                 counts: counts,
@@ -13759,11 +13819,11 @@ const TextDescription = ({ description })=>{
         children: [
             !extend ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
                 ref: textRef,
-                size: "md",
+                size: "sm",
                 lineClamp: 4,
                 children: description
             }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: "md",
+                size: "sm",
                 children: description
             }),
             isClamped && /*#__PURE__*/ jsxRuntime.jsx("button", {
@@ -13785,86 +13845,91 @@ const TextDescription = ({ description })=>{
 };
 
 const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginRequired, href, btnText })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
-        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-            className: "rounded-sm bg-base-max",
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "p-0 rounded-sm",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
-                        component: Image,
-                        src: `${image}`,
-                        alt: `${title} image`,
-                        height: 1000,
-                        width: 1000,
-                        radius: "md"
-                    })
-                }),
-                /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    className: "flex -mt-5 relative z-10",
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
-                                component: Image,
-                                src: `${icon}`,
-                                alt: `${title} logo`,
-                                width: 40,
-                                height: 40,
-                                radius: "lg"
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+        align: "stretch",
+        justify: "space-between",
+        className: "rounded-sm rounded-t-md bg-base-max p-0",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "h-full",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        className: "p-0 rounded-sm h-1/2 h-max-1/2",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
+                            component: Image,
+                            src: `${image}`,
+                            alt: `${title} image`,
+                            height: 1000,
+                            width: 1000,
+                            radius: "md"
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex -mt-5 relative z-10",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base w-1/5 h-1/5",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Image, {
+                                    component: Image,
+                                    src: `${icon}`,
+                                    alt: `${title} logo`,
+                                    width: 40,
+                                    height: 40,
+                                    radius: "lg"
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "relative mb-0 ml-2",
+                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
+                                    children: type === 'application' ? 'Application' : 'Jupyter Notebook'
+                                })
                             })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "relative mb-0 ml-2",
-                            children: /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
-                                children: type === 'application' ? 'Application' : 'Jupyter Notebook'
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-col mt-2 ml-2",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-sm font-black h-6",
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-xs text-gray-400 h-6",
+                                children: loginRequired ? 'Login Required' : ' '
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "text-sm p-2 h-fit mt-2",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
+                                    description: description
+                                })
                             })
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                    className: "flex flex-col mt-2 ml-2",
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex mb-4 rounded-b-md",
+                children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "m-auto",
                     children: [
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "text-sm font-black h-6",
-                            children: title
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "text-xs text-gray-400 h-6",
-                            children: loginRequired ? 'Login Required' : ' '
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "text-sm p-2 h-fit",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
-                                description: description
-                            })
+                        /*#__PURE__*/ jsxRuntime.jsx(core$1.NavLink, {
+                            component: Link,
+                            href: href ?? '_blank',
+                            classNames: {
+                                root: 'bg-accent text-accent-contrast hover:bg-accent-darker p-2 rounded-sm',
+                                label: 'text-sm font-semibold'
+                            },
+                            label: btnText ? btnText : `Run ${type === 'application' ? 'App' : 'Notebook'}`
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: "flex mb-4 rounded-b-md",
-                            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "m-auto",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.NavLink, {
-                                        component: Link,
-                                        href: href ?? '_blank',
-                                        classNames: {
-                                            root: 'bg-accent text-accent-contrast hover:bg-accent-darker p-2 rounded-sm',
-                                            label: 'text-sm font-semibold'
-                                        },
-                                        label: btnText ? btnText : `Run ${type === 'application' ? 'App' : 'Notebook'}`
-                                    }),
-                                    hasDemo && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                        className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
-                                        children: "Demo"
-                                    })
-                                ]
-                            })
+                        hasDemo && /*#__PURE__*/ jsxRuntime.jsx("button", {
+                            className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
+                            children: "Demo"
                         })
                     ]
                 })
-            ]
-        })
+            })
+        ]
     }, title);
 };
 
@@ -13885,7 +13950,7 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
         if (!keyword.length) return;
     };
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
-        className: "w-full bg-base-lighter",
+        className: "w-full bg-base-light p-4",
         children: [
             showFilterAndSort ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
                 className: "flex justify-between items-center w-7/8 mt-2 mx-2",
@@ -13935,7 +14000,7 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
             }) : null,
             /*#__PURE__*/ jsxRuntime.jsx("div", {
                 children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-1 mx-4 overflow-y-scroll",
+                    className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-1 mx-4 overflow-y-auto",
                     children: tools.map(({ title, description, type, icon, image, hasDemo, loginRequired, href, btnText }, key)=>{
                         return /*#__PURE__*/ jsxRuntime.jsx(AnalysisCard, {
                             title,
@@ -14092,6 +14157,80 @@ const AnalysisCardCompact = ({ title, description, type = 'application', icon, h
     });
 };
 
+const GEN3_STATIC_NOTEBOOK_API = process.env.GEN3_STATIC_NOTEBOOK_API || `${core.GEN3_API}/api/staticNotebook`;
+const GEN3_STATIC_NOTEBOOK_DIR = process.env.GEN3_STATIC_NOTEBOOK_DIR || 'htmlNotebooks';
+const GEN3_STATIC_NOTEBOOK_PATH = process.env.GEN3_STATIC_NOTEBOOK_PATH || '/public';
+
+const StaticNotebookViewer = ({ notebook })=>{
+    const [htmlContent, setHtmlContent] = React.useState('');
+    const [isError, setIsError] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(false);
+    React.useEffect(()=>{
+        async function fetchHtml() {
+            const headers = new Headers();
+            headers.set('Content-Type', 'application/json');
+            setIsLoading(true);
+            try {
+                const response = await fetch(`${GEN3_STATIC_NOTEBOOK_API}?notebook=${notebook}`, {
+                    headers: headers
+                });
+                const json = await response.json();
+                setHtmlContent(json.content);
+            } catch (error) {
+                if (error instanceof Error) {
+                    console.error(error.message);
+                }
+                setIsError(true);
+            } finally{
+                setIsLoading(false);
+            }
+        }
+        fetchHtml();
+    }, [
+        notebook
+    ]);
+    if (isError) {
+        return /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex w-full h-full",
+            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+                children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                    message: `Error loading notebook ${notebook}`
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex w-full h-full",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.LoadingOverlay, {
+                visible: isLoading
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                dangerouslySetInnerHTML: {
+                    __html: htmlContent
+                }
+            })
+        ]
+    });
+};
+
+const StaticNotebookIFrame = ({ notebook })=>{
+    const router = router$1.useRouter();
+    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",
+                src: `${router.basePath}/${GEN3_STATIC_NOTEBOOK_DIR}/${notebook}`,
+                width: "100%",
+                height: "100%",
+                title: "client notebook"
+            })
+        })
+    });
+};
+
 const myGlob = (dir, filter)=>{
     try {
         const files = fs.readdirSync(dir);
@@ -14174,10 +14313,25 @@ var ContentSource$1 = ContentSource.getInstance();
     let bannerConfigJSON = [];
     try {
         bannerConfigJSON = await ContentSource$1.getContentDatabase().get(`${core.GEN3_COMMONS_NAME}/banner.json`);
-    } catch (e) {
+    } catch (error) {
         console.warn('No banner config found at: ', `${core.GEN3_COMMONS_NAME}/banner.json`);
     }
     const { topBar, navigation, type = 'original' } = navigationConfigJSON;
+    let headerMetadata = {
+        title: 'Gen3 Frontend Framework Page',
+        content: 'Gen3 Frontend Framework Page',
+        key: 'gen3-common-page'
+    };
+    try {
+        const loadedHeaderMetadata = await ContentSource$1.getContentDatabase().get(`${core.GEN3_COMMONS_NAME}/headerMetadata.json`);
+        if (isHeaderMetadata(loadedHeaderMetadata)) {
+            headerMetadata = loadedHeaderMetadata;
+        } else {
+            console.warn('headerMetadata is not a valid HeaderMetadata object');
+        }
+    } catch (error) {
+        console.warn('No headerMetadata config found at: ', `${core.GEN3_COMMONS_NAME}/headerMetadata.json`);
+    }
     const headerProps = {
         top: topBar,
         navigation: navigation,
@@ -14188,11 +14342,7 @@ var ContentSource$1 = ContentSource.getInstance();
     return {
         headerProps,
         footerProps,
-        headerData: {
-            title: 'Gen3 Frontend Framework Page',
-            content: 'Gen3 Frontend Framework Page',
-            key: 'gen3-common-page'
-        }
+        headerMetadata
     };
 };
 
@@ -15412,386 +15562,7 @@ const useRoundedAggsQuery = ({ type, fields, filters, accessibility = core.Acces
         ...response,
         data: response?.data?.data ? core.processHistogramResponse(response?.data.data?._aggregation[type] ?? {}) : {}
     };
-}; // import { cohortDiscoveryApi } from './appApi';
- //
- // import {
- //   Accessibility,
- //   convertFilterSetToGqlFilter,
- //   FilterSet,
- //   isFilterEmpty,
- //   AggregationsData,
- //   RawDataAndTotalCountsParams,
- //   GraphQLQuery,
- // } from '@gen3/core';
- //
- // /*
- //   returns all the fields for a given type
- //   @param type: the type to get fields for
- //   @returns: a list of fields for the given type
- //  */
- //
- // interface AccessibleDataSliceParams {
- //   type: string;
- //   fields: ReadonlyArray<string>;
- //   accessType: Accessibility;
- // }
- //
- // interface QueryAggsParams {
- //   type: string;
- //   fields: ReadonlyArray<string>;
- //   filters: FilterSet;
- //   accessibility?: Accessibility;
- // }
- //
- // interface QueryForSubAggsParams {
- //   type: string;
- //   mainField: string;
- //   numericAggAsText: boolean;
- //   termsFields?: ReadonlyArray<string>;
- //   missingFields?: ReadonlyArray<string>;
- //   gqlFilter?: FilterSet;
- //   accessibility?: Accessibility;
- // }
- //
- // interface QueryCountsParams {
- //   type: string;
- //   filters: FilterSet;
- //   accessibility?: Accessibility;
- // }
- //
- // interface QueryForFileCountSummaryParams {
- //   type: string;
- //   field: string;
- //   filters: FilterSet;
- //   accessibility?: Accessibility;
- // }
- //
- // /**
- //  * The main endpoint used in templating Exploration page queries.
- //  * Includes table, filter and aggregation query types and leverages guppyApi defined in ./gupplApi.ts
- //  * Query templates support filters where applicable
- //  *
- //  * @param endpoints - Defines endpoints used in Exploration page:
- //  * @param getAllFieldsForType - A mapping query that returns all property key names vertex types specified.
- //  *   @see https://github.com/uc-cdis/guppy/blob/master/doc/queries.md#mapping-query
- //  * @param getAccessibleData - An aggregation histogram counts query that filters based on access type
- //  *   @see https://github.com/uc-cdis/guppy/blob/master/doc/queries.md#accessibility-argument-for-regular-tier-access-level
- //  * @param getRawDataAndTotalCounts - Queries both _totalCount for selected vertex types and
- //  * tabular results containing the raw data in the rows of selected vertex types
- //  *   @see https://github.com/uc-cdis/guppy/blob/master/doc/queries.md#1-total-count-aggregation
- //  * @param getAggs - An aggregated histogram counts query which outputs vertex property frequencies
- //  * @param getSubAggs - TODO: not sure what this one does. Looks like nested aggregation
- //  * @param getCounts - Returns total counts of a vertex type
- //  * @returns: A guppy API endpoint for templating queryable data displayed on the exploration page
- //  */
- // const explorerApi = cohortDiscoveryApi.injectEndpoints({
- //   endpoints: (builder) => ({
- //     getAllFieldsForType: builder.query({
- //       query: (type: { type: string }) => ({
- //         query: `{ _mapping ${type} } }`,
- //       }),
- //       transformResponse: (response: Record<string, any>, _meta, params) => {
- //         return response[params.type];
- //       },
- //     }),
- //     getAccessibleData: builder.query({
- //       query: ({ type, fields, accessType }: AccessibleDataSliceParams) => {
- //         const fieldParts = fields.map(
- //           (field) => `${field} { histogram { key count } }`,
- //         );
- //       },
- //     }),
- //     getRawDataAndTotalCounts: builder.query({
- //       query: ({
- //         type,
- //         fields,
- //         filters,
- //         sort,
- //         offset = 0,
- //         size = 20,
- //         accessibility = Accessibility.ALL,
- //         format = undefined,
- //       }: RawDataAndTotalCountsParams) => {
- //         const gqlFilter = convertFilterSetToGqlFilter(filters);
- //         const params = [
- //           ...(sort ? ['$sort: JSON'] : []),
- //           ...(gqlFilter ? ['$filter: JSON'] : []),
- //           ...(format ? ['$format: Format'] : []),
- //         ].join(',');
- //         const queryLine = `query getRawDataAndTotalCounts (${params}) {`;
- //
- //         const dataParams = [
- //           ...(format ? ['format: $format'] : []),
- //           ...(sort ? ['sort: $sort'] : []),
- //           ...(gqlFilter ? ['filter: $filter'] : []),
- //         ].join(',');
- //         const dataTypeLine = `${type} (accessibility: ${accessibility}, offset: ${offset}, first: ${size},
- //         ${dataParams}) {`;
- //
- //         const typeAggsLine = `${type} (${
- //           gqlFilter && 'filter: $filter,'
- //         } accessibility: ${accessibility}) {`;
- //
- //         const processedFields = fields.map((field) =>
- //           rawDataQueryStrForEachField(field),
- //         );
- //
- //         const query = `${queryLine}
- //     ${dataTypeLine}
- //       ${processedFields.join(' ')}
- //             }
- //             _aggregation {
- //               ${typeAggsLine}
- //                 _totalCount
- //               }
- //             }
- //         }`;
- //         const variables = {
- //           ...(sort && { sort }),
- //           ...(gqlFilter && { filter: gqlFilter }),
- //           ...(format && { format }),
- //         };
- //         return { query, variables };
- //       },
- //     }),
- //     getAggs: builder.query<AggregationsData, QueryAggsParams>({
- //       query: ({
- //         type,
- //         fields,
- //         filters,
- //         accessibility = Accessibility.ALL,
- //       }: QueryAggsParams) => {
- //         const queryStart = isFilterEmpty(filters)
- //           ? `
- //               query getAggs {
- //               _aggregation {
- //               ${type} (accessibility: ${accessibility}) {`
- //           : `query getAggs ($filter: JSON) {
- //                _aggregation {
- //                       ${type} (filter: $filter, filterSelf: false, accessibility: ${accessibility}) {`;
- //         const query = `${queryStart}
- //                   ${fields.map((field: string) =>
- //                     histogramQueryStrForEachField(field),
- //                   )}
- //                 }
- //               }
- //             }`;
- //         const queryBody: GraphQLQuery = {
- //           query: query,
- //           variables: { filter: convertFilterSetToGqlFilter(filters) },
- //         };
- //         return queryBody;
- //       },
- //     }),
- //     getAggsNoFilterSelf: builder.query<AggregationsData, QueryAggsParams>({
- //       query: ({
- //         type,
- //         fields,
- //         filters,
- //         accessibility = Accessibility.ALL,
- //       }: QueryAggsParams) => {
- //         const queryStart = isFilterEmpty(filters)
- //           ? `
- //               query getAggs {
- //               _aggregation {
- //               ${type} (accessibility: ${accessibility}) {`
- //           : `query getAggs ($filter: JSON) {
- //                _aggregation {
- //                       ${type} (filter: $filter, filterSelf: true, accessibility: ${accessibility}) {`;
- //         const query = `${queryStart}
- //                   ${fields.map((field: string) =>
- //                     histogramQueryStrForEachField(field),
- //                   )}
- //                 }
- //               }
- //             }`;
- //         const queryBody: GraphQLQuery = {
- //           query: query,
- //           variables: { filter: convertFilterSetToGqlFilter(filters) },
- //         };
- //         return queryBody;
- //       },
- //     }),
- //     getSubAggs: builder.query<AggregationsData, QueryForSubAggsParams>({
- //       query: ({
- //         type,
- //         mainField,
- //         termsFields = undefined,
- //         missingFields = undefined,
- //         numericAggAsText = false,
- //         gqlFilter = undefined,
- //         accessibility = Accessibility.ALL,
- //       }: QueryForSubAggsParams) => {
- //         const nestedAggFields = {
- //           termsFields: termsFields,
- //           missingFields: missingFields,
- //         };
- //
- //         const query = `query getSubAggs ( ${
- //           gqlFilter ?? '$filter: JSON,'
- //         } $nestedAggFields: JSON) {
- //     _aggregation {
- //       ${type} ( ${
- //         gqlFilter ?? 'filter: $filter, filterSelf: false,'
- //       } nestedAggFields: $nestedAggFields, accessibility: ${accessibility}) {
- //         ${nestedHistogramQueryStrForEachField(mainField, numericAggAsText)}
- //       }`;
- //
- //         return {
- //           query: query,
- //           variables: {
- //             ...(gqlFilter && {
- //               filter: convertFilterSetToGqlFilter(gqlFilter),
- //             }),
- //             nestedAggFields: nestedAggFields,
- //           },
- //         };
- //       },
- //     }),
- //     getCounts: builder.query<number, QueryCountsParams>({
- //       query: ({
- //         type,
- //         filters,
- //         accessibility = Accessibility.ALL,
- //       }: QueryCountsParams) => {
- //         const gqlFilters = convertFilterSetToGqlFilter(filters);
- //         const queryLine = `query totalCounts ${
- //           gqlFilters ? '($filter: JSON)' : ''
- //         }{`;
- //         const typeAggsLine = `${type} ${
- //           gqlFilters ? '(filter: $filter, ' : '('
- //         } accessibility: ${accessibility}) {`;
- //
- //         const query = `${queryLine} _aggregation {
- //           ${typeAggsLine}
- //             _totalCount
- //             }
- //            }
- //         }`;
- //         return {
- //           query: query,
- //           variables: {
- //             ...(gqlFilters && {
- //               filter: gqlFilters,
- //             }),
- //           },
- //         };
- //       },
- //     }),
- //     getFieldCountSummary: builder.query<
- //       Record<string, any>,
- //       QueryForFileCountSummaryParams
- //     >({
- //       query: ({
- //         type,
- //         field,
- //         filters,
- //         accessibility = Accessibility.ALL,
- //       }: QueryForFileCountSummaryParams) => {
- //         const gqlFilters = convertFilterSetToGqlFilter(filters);
- //         const query = `query summary ($filter: JSON) {
- //         _aggregation {
- //           ${type} (filter: $filter, accessibility: ${accessibility}) {
- //             ${field} {
- //               histogram {
- //                 sum,
- //               }
- //             }
- //           }
- //         }
- //       }`;
- //         return {
- //           query: query,
- //           variables: {
- //             ...(gqlFilters && {
- //               filter: gqlFilters,
- //             }),
- //           },
- //         };
- //       },
- //     }),
- //     getFieldsForIndex: builder.query({
- //       query: (index: string) => {
- //         return {
- //           query: `{
- //             _mapping { ${index} }
- //           }`,
- //         };
- //       },
- //     }),
- //   }),
- // });
- //
- // // query for aggregate data
- // // convert the function below to typescript
- //
- // const histogramQueryStrForEachField = (field: string): string => {
- //   const splittedFieldArray = field.split('.');
- //   const splittedField = splittedFieldArray.shift();
- //   if (splittedFieldArray.length === 0) {
- //     return `
- //     ${splittedField} {
- //       histogram {
- //         key
- //         count
- //       }
- //     }`;
- //   }
- //   return `
- //   ${splittedField} {
- //     ${histogramQueryStrForEachField(splittedFieldArray.join('.'))}
- //   }`;
- // };
- //
- // const nestedHistogramQueryStrForEachField = (
- //   mainField: string,
- //   numericAggAsText: boolean,
- // ) => `
- //   ${mainField} {
- //     ${numericAggAsText ? 'asTextHistogram' : 'histogram'} {
- //       key
- //       count
- //       missingFields {
- //         field
- //         count
- //       }
- //       termsFields {
- //         field
- //         count
- //         terms {
- //           key
- //           count
- //         }
- //       }
- //     }
- //   }`;
- //
- // export const rawDataQueryStrForEachField = (field: string): string => {
- //   const splitFieldArray = field.split('.');
- //   const splitField = splitFieldArray.shift();
- //   if (splitFieldArray.length === 0) {
- //     return `
- //     ${splitField}
- //     `;
- //   }
- //   return `
- //   ${splitField} {
- //     ${rawDataQueryStrForEachField(splitFieldArray.join('.'))}
- //   }`;
- // };
- //
- // export const {
- //   useGetRawDataAndTotalCountsQuery,
- //   useGetAccessibleDataQuery,
- //   useGetAllFieldsForTypeQuery,
- //   useGetAggsQuery,
- //   useGetAggsNoFilterSelfQuery,
- //   useLazyGetAggsQuery,
- //   useGetSubAggsQuery,
- //   useGetCountsQuery,
- //   useGetFieldCountSummaryQuery,
- //   useGetFieldsForIndexQuery,
- // } = explorerApi;
+};
 
 const NUM_COLS = 2; // TODO: add to config
 /**
@@ -16992,13 +16763,11 @@ const RequestsTable = ()=>{
 };
 
 const RequestsPanel = ()=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(ProtectedContent, {
-        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
-            className: "w-100 m-2",
-            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
-                className: "w-100 bg-base-light p-4",
-                children: /*#__PURE__*/ jsxRuntime.jsx(RequestsTable, {})
-            })
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+        className: "w-100 m-2",
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Group, {
+            className: "w-100 bg-base-light p-4",
+            children: /*#__PURE__*/ jsxRuntime.jsx(RequestsTable, {})
         })
     });
 };
@@ -17054,79 +16823,81 @@ const CohortDiscovery = (config)=>{
     const indexResources = extractIndexResourceFromConfiguration(config);
     useAppDispatch(loadCohortsFromStorage());
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
-        children: /*#__PURE__*/ jsxRuntime.jsxs(react$1.PersistGate, {
-            persistor: persistor,
-            loading: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {
-                variant: "dots"
-            }),
-            children: [
-                /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
-                    order: 3,
-                    className: "absolute top-6 left-[154px]",
-                    children: "Cohort Discovery"
+        children: /*#__PURE__*/ jsxRuntime.jsx(ProtectedContent, {
+            children: /*#__PURE__*/ jsxRuntime.jsxs(react$1.PersistGate, {
+                persistor: persistor,
+                loading: /*#__PURE__*/ jsxRuntime.jsx(core$1.Loader, {
+                    variant: "dots"
                 }),
-                /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
-                    keepMounted: false,
-                    defaultValue: "build",
-                    orientation: "vertical",
-                    classNames: {
-                        root: 'w-full h-full',
-                        list: 'bg-base-light before:content-none pt-20',
-                        tab: 'border-0 border-l-4 rounded-none data-[active=true]:border-accent-warm data-[active=true]:bg-base-max text-center',
-                        tabLabel: 'w-full',
-                        panel: 'pt-16'
-                    },
-                    children: [
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.List, {
-                            children: Object.keys(config.leftNav).map((key)=>{
-                                return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs.Tab, {
-                                    value: key,
-                                    children: [
-                                        /*#__PURE__*/ jsxRuntime.jsx(Image, {
-                                            src: config.leftNav[key].image,
-                                            alt: config.leftNav[key].imageAlt,
-                                            width: 40,
-                                            height: 40,
-                                            className: "inline-block mb-1"
-                                        }),
-                                        /*#__PURE__*/ jsxRuntime.jsx("strong", {
-                                            className: "block",
-                                            children: config.leftNav[key].title
-                                        })
-                                    ]
-                                }, key);
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
-                            value: "build",
-                            children: config.dataIndexes.length === 1 ? /*#__PURE__*/ jsxRuntime.jsx(IndexPanel, {
-                                dataConfig: config.dataIndexes[0].dataConfig,
-                                tabTitle: config.dataIndexes[0].tabTitle,
-                                tabs: config.dataIndexes[0].tabs,
-                                emptySelection: config.emptySelection,
-                                resourceField: config.dataIndexes[0].resourceField,
-                                numColumns: config.dataIndexes[0].numColumns ?? 2,
-                                indexResources: indexResources,
-                                remoteSupportService: config.remoteSupportService
-                            }) : /*#__PURE__*/ jsxRuntime.jsx(TabbedIndex, {
-                                config: config,
-                                indexResources: indexResources
-                            })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
-                            value: "saved",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsPanel, {
-                                indexResources: indexResources,
-                                remoteSupportService: config.remoteSupportService
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Title, {
+                        order: 3,
+                        className: "absolute top-6 left-[154px]",
+                        children: "Cohort Discovery"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
+                        keepMounted: false,
+                        defaultValue: "build",
+                        orientation: "vertical",
+                        classNames: {
+                            root: 'w-full h-full',
+                            list: 'bg-base-light before:content-none pt-20',
+                            tab: 'border-0 border-l-4 rounded-none data-[active=true]:border-accent-warm data-[active=true]:bg-base-max text-center',
+                            tabLabel: 'w-full',
+                            panel: 'pt-16'
+                        },
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.List, {
+                                children: Object.keys(config.leftNav).map((key)=>{
+                                    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs.Tab, {
+                                        value: key,
+                                        children: [
+                                            /*#__PURE__*/ jsxRuntime.jsx(Image, {
+                                                src: config.leftNav[key].image,
+                                                alt: config.leftNav[key].imageAlt,
+                                                width: 40,
+                                                height: 40,
+                                                className: "inline-block mb-1"
+                                            }),
+                                            /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                                                className: "block",
+                                                children: config.leftNav[key].title
+                                            })
+                                        ]
+                                    }, key);
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                value: "build",
+                                children: config.dataIndexes.length === 1 ? /*#__PURE__*/ jsxRuntime.jsx(IndexPanel, {
+                                    dataConfig: config.dataIndexes[0].dataConfig,
+                                    tabTitle: config.dataIndexes[0].tabTitle,
+                                    tabs: config.dataIndexes[0].tabs,
+                                    emptySelection: config.emptySelection,
+                                    resourceField: config.dataIndexes[0].resourceField,
+                                    numColumns: config.dataIndexes[0].numColumns ?? 2,
+                                    indexResources: indexResources,
+                                    remoteSupportService: config.remoteSupportService
+                                }) : /*#__PURE__*/ jsxRuntime.jsx(TabbedIndex, {
+                                    config: config,
+                                    indexResources: indexResources
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                value: "saved",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(SavedCohortsPanel, {
+                                    indexResources: indexResources,
+                                    remoteSupportService: config.remoteSupportService
+                                })
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                value: "request",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(RequestsPanel, {})
                             })
-                        }),
-                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
-                            value: "request",
-                            children: /*#__PURE__*/ jsxRuntime.jsx(RequestsPanel, {})
-                        })
-                    ]
-                })
-            ]
+                        ]
+                    })
+                ]
+            })
         })
     });
 };
@@ -19592,7 +19363,7 @@ const DiscoveryPage = ({ headerProps, footerProps, discoveryConfig })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Discovery Page',
             content: 'Discovery Data',
             key: 'gen3-discovery-page',
@@ -19648,7 +19419,7 @@ const QueryPage = ({ headerProps, footerProps, queryProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Query Page',
             content: 'Query page',
             key: 'gen3-query-page',
@@ -19821,7 +19592,7 @@ const LandingPage = ({ headerProps, footerProps, landingPage })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         footerProps,
         headerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Home Page',
             content: 'Home page',
             key: 'gen3-home-page',
@@ -19862,7 +19633,7 @@ const ExplorerPage = ({ headerProps, footerProps, explorerConfig, headerMetadata
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Explorer Page',
             content: 'Explorer Page',
             key: 'gen3-explorer-page',
@@ -19884,6 +19655,11 @@ var GuppyDataAccessMode = /*#__PURE__*/ function(GuppyDataAccessMode) {
     return GuppyDataAccessMode;
 }({});
 
+const DefaultHeaderMetadata = {
+    title: 'Gen3 Explorer Page',
+    content: 'Explorer Page',
+    key: 'gen3-explorer-page'
+};
 const GetSharedFieldMapping = async (cohortBuilderConfiguration)=>{
     let sharedFiltersMap = null;
     if (cohortBuilderConfiguration?.sharedFilters) {
@@ -19940,9 +19716,7 @@ const ExplorerPageGetServerSideProps = async ()=>{
                 props: {
                     ...await getNavPageLayoutPropsFromConfig(),
                     explorerConfig: cohortBuilderConfiguration,
-                    headerMetadata: {
-                        ...cohortBuilderConfiguration?.headerMetadata
-                    }
+                    headerMetadata: cohortBuilderConfiguration?.headerMetadata ? cohortBuilderConfiguration.headerMetadata : DefaultHeaderMetadata
                 }
             };
         }
@@ -19953,7 +19727,7 @@ const ExplorerPageGetServerSideProps = async ()=>{
                 sharedFiltersMap: sharedFiltersMap,
                 tabsLayout: cohortBuilderConfiguration?.tabsLayout ?? 'left',
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
-                headerMetadata: cohortBuilderConfiguration.headerMetadata,
+                //  headerMetadata: cohortBuilderConfiguration.headerMetadata,
                 accessControl: {
                     ...DefaultAccessControlConfiguration,
                     ...cohortBuilderConfiguration.accessControl ?? {}
@@ -19983,9 +19757,7 @@ const ExplorerPageGetServerSidePropsForConfigId = async (context)=>{
                 props: {
                     ...await getNavPageLayoutPropsFromConfig(),
                     explorerConfig: cohortBuilderConfiguration,
-                    headerMetadata: {
-                        ...cohortBuilderConfiguration?.headerMetadata
-                    }
+                    headerMetadata: cohortBuilderConfiguration?.headerMetadata ? cohortBuilderConfiguration.headerMetadata : DefaultHeaderMetadata
                 }
             };
         }
@@ -19996,7 +19768,7 @@ const ExplorerPageGetServerSidePropsForConfigId = async (context)=>{
                 sharedFiltersMap: sharedFiltersMap,
                 tabsLayout: cohortBuilderConfiguration?.tabsLayout ?? 'left',
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
-                headerMetadata: cohortBuilderConfiguration.headerMetadata,
+                // headerMetadata: { ...(cohortBuilderConfiguration?.headerMetadata ? cohortBuilderConfiguration.headerMetadata : {}) },
                 accessControl: {
                     ...DefaultAccessControlConfiguration,
                     ...cohortBuilderConfiguration.accessControl ?? {}
@@ -20356,7 +20128,7 @@ const ColorThemePage = ({ headerProps, footerProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Theme Page',
             content: 'Theme page',
             key: 'gen3-theme-page'
@@ -20934,7 +20706,7 @@ const ProfilePage = ({ headerProps, footerProps, profileConfig })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Profile Page',
             content: 'Profile page',
             key: 'gen3-profile-page',
@@ -20962,7 +20734,7 @@ const LoginPage = ({ headerProps, footerProps, loginConfig })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Login Page',
             content: 'Login page',
             key: 'gen3-login-page',
@@ -20993,7 +20765,7 @@ const DictionaryPage = ({ headerProps, footerProps, config })=>{
         mainProps: {
             fixed: true
         },
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 DataDictionary Page',
             content: 'Data Dictionary',
             key: 'gen3-data-dictionary-page',
@@ -21718,7 +21490,7 @@ const AuthzPage = ({ headerProps, footerProps, authz })=>{
         headerProps,
         footerProps,
         headerProps: headerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Authz Editor Page',
             content: 'Authz Editor page',
             key: 'gen3-authz-editor-page'
@@ -22045,7 +21817,7 @@ const SubmissionPage = ({ submissionConfig, headerProps, footerProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         footerProps: footerProps,
         headerProps: headerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Submission Page',
             content: 'Submission page',
             key: 'gen3-submission-page'
@@ -22080,7 +21852,7 @@ const WorkspacePage = ({ headerProps, footerProps, workspaceProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Workspace Page',
             content: 'Workspace page',
             key: 'gen3-workspace-page',
@@ -22097,7 +21869,7 @@ const WorkspaceNoAccessPage = ({ headerProps, footerProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Workspace No Access Page',
             content: 'Workspace no access page',
             key: 'gen3-workspace-no-access-page'
@@ -22161,7 +21933,7 @@ const AnalysisPage = ({ headerProps, footerProps, tools, sections, classNames })
     return /*#__PURE__*/ jsxRuntime.jsxs(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Analysis Center',
             content: 'Analysis Center',
             key: 'gen3-analysis-center'
@@ -22811,7 +22583,7 @@ const AnalysisEditorPage = ({ headerProps, footerProps })=>{
         headerProps,
         footerProps,
         headerProps: headerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Analysis Editor Page',
             content: 'Analysis Editor page',
             key: 'gen3-analysis-editor-page'
@@ -22844,7 +22616,7 @@ const AISearchPage = ({ headerProps, footerProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 AI Search Page',
             content: 'AI Search',
             key: 'gen3-ai-search-page'
@@ -22874,7 +22646,7 @@ const AISearchPageGetServerSideProps = async ()=>{
                     navigation: {}
                 },
                 footerProps: {},
-                headerData: {
+                headerMetadata: {
                     title: 'Gen3 AI Search Page',
                     content: 'AI Search',
                     key: 'gen3-ai-search-page'
@@ -22889,7 +22661,7 @@ const NotebookLitePage = ({ headerProps, footerProps })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         footerProps,
         headerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Notebooks Lite Page',
             content: 'Notebooks Lite',
             key: 'gen3-notebooks-lite-page'
@@ -24954,7 +24726,7 @@ const DataLibraryPage = ({ headerProps, footerProps, config })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 DataLibrary Page',
             content: 'DataLibrary Data',
             key: 'gen3-data-library-page'
@@ -25246,7 +25018,7 @@ const CrosswalkPage = ({ headerProps, footerProps, config })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Crosswalk Page',
             content: 'Crosswalk Data',
             key: 'gen3-crosswalk-page',
@@ -25297,7 +25069,7 @@ const TabbedCohortBuilderPage = ({ headerProps, footerProps, configuration })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
         headerProps,
         footerProps,
-        headerData: {
+        headerMetadata: {
             title: 'Gen3 Tabbed Cohort Builder Page',
             content: 'Tabbed Cohort Builder Page',
             key: 'gen3-tabbed-cohort-builder-page'
@@ -25663,6 +25435,7 @@ async function analysisApiCohortDiscovery(req, res) {
         const redactedData = core.roundHistogramResponse(data, COHORT_DISCOVERY_LIMIT);
         res.status(200).json(redactedData);
     } catch (error) {
+        console.error('CohortDiscovery API', error);
         if (error instanceof core.HTTPError) res.status(error.status).json({
             error: 'HTTP Error',
             details: error.message
@@ -25678,6 +25451,97 @@ async function analysisApiCohortDiscovery(req, res) {
     }
 }
 
+const staticNotebookAPI = async (req, res)=>{
+    if (req.method === 'OPTIONS') {
+        res.status(200).json({
+            success: true
+        });
+    }
+    if (req.method === 'GET') {
+        try {
+            // Validate that a notebook was provided
+            const { notebook } = req.query;
+            if (!notebook) {
+                return res.status(400).json({
+                    error: 'notebook parameter is required'
+                });
+            }
+            let filePath = '';
+            if (lodash.isArray(notebook)) {
+                filePath = notebook[0];
+            } else {
+                filePath = notebook;
+            }
+            // Security: Prevent directory traversal attacks
+            const sanitizedPath = path.normalize(filePath).replace(/^(\.\.[/\\])+/, '');
+            // Ensure the file is within the allowed directory and has .html extension
+            if (!sanitizedPath.endsWith('.html')) {
+                return Response.json({
+                    error: 'Only HTML files are allowed',
+                    success: false
+                }, {
+                    status: 400
+                });
+            }
+            // Construct the full file path within the data directory
+            const fullPath = path.join(process.cwd(), GEN3_STATIC_NOTEBOOK_DIR, sanitizedPath);
+            // Check if a file exists and is within the data directory
+            const dataDir = path.join(process.cwd(), `${GEN3_STATIC_NOTEBOOK_PATH}/${GEN3_STATIC_NOTEBOOK_DIR}`);
+            if (!fullPath.startsWith(dataDir)) {
+                return res.status(403).json({
+                    error: 'File access denied',
+                    success: false
+                });
+            }
+            const rawContent = fs.readFileSync(fullPath, 'utf8');
+            const sanitizedContent = DOMPurify.sanitize(rawContent, {
+                ALLOWED_TAGS: [
+                    'p',
+                    'br',
+                    'strong',
+                    'em',
+                    'h1',
+                    'h2',
+                    'h3',
+                    'ul',
+                    'ol',
+                    'li',
+                    'a',
+                    'img'
+                ],
+                ALLOWED_ATTR: [
+                    'href',
+                    'title',
+                    'src',
+                    'alt',
+                    'target'
+                ]
+            });
+            res.status(200).json({
+                content: sanitizedContent,
+                success: true,
+                filePath: sanitizedPath
+            });
+        } catch (error) {
+            if (error.code === 'ENOENT') {
+                res.status(404).json({
+                    error: 'Notebook not found. Please check the notebook name and try again.',
+                    success: false
+                });
+            } else {
+                console.error('Error reading or sanitizing HTML file:', error);
+                res.status(500).json({
+                    error: 'Error reading or sanitizing HTML file',
+                    success: false
+                });
+            }
+        }
+    }
+    return res.status(405).json({
+        error: 'Only GET|OPTION requests are allowed'
+    });
+};
+
 exports.AISearchPageGetServerSideProps = AISearchPageGetServerSideProps;
 exports.AccessLevel = AccessLevel;
 exports.ActionBar = ActionBar;
@@ -25698,6 +25562,7 @@ exports.BaseModal = BaseModal;
 exports.Charts = Charts;
 exports.CohortBuilder = CohortBuilder;
 exports.CohortManager = CohortManager$1;
+exports.CollapsableCharts = CollapsableCharts;
 exports.CollapsableSidebar = CollapsableSidebar;
 exports.ColorThemePage = ColorThemePage;
 exports.ColorThemePageGetServerSideProps = ColorThemePageGetServerSideProps;
@@ -25709,7 +25574,7 @@ exports.Custom404Page = Custom404Page;
 exports.DAYS_IN_YEAR = DAYS_IN_YEAR;
 exports.DEFAULT_MAXIMUM = DEFAULT_MAXIMUM;
 exports.DEFAULT_MINIMUM = DEFAULT_MINIMUM;
-exports.DEFAULT_VISIBLE_ITEMS = DEFAULT_VISIBLE_ITEMS;
+exports.DEFAULT_VISIBLE_ITEMS = DEFAULT_VISIBLE_ITEMS$1;
 exports.DataLibraryPage = DataLibraryPage;
 exports.DataLibraryPageGetServerSideProps = DataLibraryPageGetServerSideProps;
 exports.DictionaryPage = DictionaryPage;
@@ -25774,6 +25639,8 @@ exports.ReactECharts = ReactECharts;
 exports.ResourcesFilters = ResourcesFilters;
 exports.SPECIAL_CASE_FIELDS = SPECIAL_CASE_FIELDS;
 exports.SessionExpiredModal = SessionExpiredModal;
+exports.StaticNotebookIFrame = StaticNotebookIFrame;
+exports.StaticNotebookViewer = StaticNotebookViewer;
 exports.StudyGroup = StudyGroup;
 exports.SubmissionPage = SubmissionPage;
 exports.SubmissionPageGetServerSideProps = SubmissionPageGetServerSideProps;
@@ -25820,6 +25687,7 @@ exports.getTagInfo = getTagInfo;
 exports.hasOwnProperty = hasOwnProperty;
 exports.isArrayOfString = isArrayOfString;
 exports.isEnumFacetResponse = isEnumFacetResponse;
+exports.isHeaderMetadata = isHeaderMetadata;
 exports.isPropertyKey = isPropertyKey;
 exports.isTextTransform = isTextTransform$1;
 exports.mapFacetSortToSortType = mapFacetSortToSortType;
@@ -25841,6 +25709,7 @@ exports.removeUnion = removeUnion;
 exports.resourcePathFromProjectID = resourcePathFromProjectID;
 exports.sessionLogout = sessionLogout;
 exports.sessionToken = sessionToken;
+exports.staticNotebookAPI = staticNotebookAPI;
 exports.stripTrailingSlash = stripTrailingSlash;
 exports.toDisplayName = toDisplayName;
 exports.truncateString = truncateString;