@gen3/frontend 0.10.44 → 0.10.46

package/dist/cjs/index.js

@@ -2,10 +2,11 @@
 
 var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
+var tailwindMerge = require('tailwind-merge');
 var Image = require('next/image');
+var lodash = require('lodash');
 var Link = require('next/link');
 var fa = require('react-icons/fa');
-var tailwindMerge = require('tailwind-merge');
 var react = require('@iconify/react');
 var core$1 = require('@mantine/core');
 var router = require('next/router');
@@ -17,12 +18,12 @@ require('swr');
 var cookiesNext = require('cookies-next');
 var jose = require('jose');
 var notifications = require('@mantine/notifications');
+var Markdown = require('react-markdown');
 var ai = require('react-icons/ai');
 var pi = require('react-icons/pi');
 var Head = require('next/head');
 var mantineReactTable = require('mantine-react-table');
 var jsonpathPlus = require('jsonpath-plus');
-var lodash = require('lodash');
 var lu = require('react-icons/lu');
 var tinycolor = require('tinycolor2');
 var hooks = require('@mantine/hooks');
@@ -33,7 +34,6 @@ var reactMinisearch = require('react-minisearch');
 var MiniSearch = require('minisearch');
 var uniq = require('lodash/uniq');
 var sum = require('lodash/sum');
-var Markdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var reactCookie = require('react-cookie');
 var FileSaver = require('file-saver');
@@ -45,6 +45,7 @@ var tw = require('tailwind-styled-components');
 require('universal-cookie');
 var ri = require('react-icons/ri');
 var io = require('react-icons/io');
+var GraphiQL = require('graphiql');
 var fs = require('fs');
 var path = require('path');
 var modals = require('@mantine/modals');
@@ -74,40 +75,6 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })=>{
-    const portalBasename = process.env.NEXT_PUBLIC_PORTAL_BASENAME && process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/' ? process.env.NEXT_PUBLIC_PORTAL_BASENAME : '';
-    if (linkType === 'gen3ff') {
-        return /*#__PURE__*/ jsxRuntime.jsx("span", {
-            className: className,
-            children: /*#__PURE__*/ jsxRuntime.jsx(Link, {
-                href: href,
-                children: text
-            })
-        });
-    } else if (linkType === 'portal') {
-        return /*#__PURE__*/ jsxRuntime.jsx("a", {
-            className: className,
-            href: `${portalBasename}${href}`,
-            target: "_parent",
-            children: text
-        });
-    }
-    // external link
-    return /*#__PURE__*/ jsxRuntime.jsxs("a", {
-        className: className,
-        href: href,
-        target: "_blank",
-        rel: "noreferrer",
-        children: [
-            showExternalIcon ? /*#__PURE__*/ jsxRuntime.jsx(fa.FaExternalLinkAlt, {
-                className: "pr-1",
-                title: "External Link"
-            }) : null,
-            text
-        ]
-    });
-};
-
 const extractClassName = (key, classNames)=>{
     if (typeof classNames === 'object' && key in classNames) {
         return classNames[key];
@@ -120,119 +87,212 @@ const extractClassName = (key, classNames)=>{
  *
  * @param {RecordType} defaultValues - The default values for the classnames.
  * @param {RecordType} userValues - The user-defined values for the classnames.
- * @param {boolean} merge - Whether to merge the default and user values. Default is true.
+ * @param {StylingMergeMode} mode - Whether to merge or replace the default and user values. Default is merge.
  * @returns {RecordType} - The merged default and user values for the classnames.
- */ const mergeDefaultTailwindClassnames = (defaultValues, userValues, merge = true)=>{
+ */ const mergeDefaultTailwindClassnames = (defaultValues, { mode = 'merge', ...userValues })=>{
     const defaultKeys = Object.keys(defaultValues);
     const mergedValues = {
-        ...defaultValues,
-        ...userValues
+        ...defaultValues
     };
-    if (merge) {
+    if (mode === 'merge') {
         defaultKeys.forEach((key)=>{
             if (userValues[key]) {
                 mergedValues[key] = tailwindMerge.twMerge(defaultValues[key], userValues[key]);
             }
         });
     }
+    if (mode === 'replace') {
+        defaultKeys.forEach((key)=>{
+            if (userValues[key]) {
+                mergedValues[key] = userValues[key];
+            }
+        });
+    }
     return mergedValues;
 };
 
-const Footer = ({ bottomLinks, columnLinks, footerLogos, footerRightLogos, classNames = {} })=>{
+const isPropertyKey = (value)=>{
+    return typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol';
+};
+const hasOwnProperty = (obj, prop)=>{
+    if (obj === undefined) return false;
+    if (prop === undefined) return false;
+    return Object.hasOwnProperty.call(obj, prop);
+};
+const getParamsValueAsString = (params, key)=>{
+    return params && key && key !== '' && isPropertyKey(key) && hasOwnProperty(params, key) ? lodash.toString(params[key]) : undefined;
+};
+const extractObjectKey = (obj)=>{
+    const keys = Object.keys(obj);
+    return keys.length > 0 ? keys[0] : undefined;
+};
+
+// Component for rendering a single row in the column
+// TODO: replace with a renderer factory
+const FooterRowComponent = ({ item, rowClassname })=>{
+    const itemType = extractObjectKey(item);
+    if (!itemType) return null;
+    const className = item[itemType].className ?? rowClassname;
+    switch(itemType){
+        case 'Label':
+            {
+                const text = item[itemType];
+                return /*#__PURE__*/ jsxRuntime.jsxs("p", {
+                    className: className,
+                    children: [
+                        " ",
+                        text.text
+                    ]
+                });
+            }
+        case 'Link':
+            {
+                const link = item[itemType];
+                return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx("a", {
+                        href: link.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: className,
+                        children: link.text ? link.text : link.href
+                    })
+                }, link.href);
+            }
+        case 'Links':
+            {
+                const links = item[itemType];
+                return /*#__PURE__*/ jsxRuntime.jsx("div", {
+                    className: `flex flex-no-wrap space-x-4 ${className ?? ''}`,
+                    children: links?.links.map((link, i)=>{
+                        return /*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsx("a", {
+                                    href: link.href,
+                                    target: "_blank",
+                                    rel: "noopener noreferrer",
+                                    className: link?.className,
+                                    children: link.text ? link.text : link.href
+                                }),
+                                i !== links?.links.length - 1 && /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    className: "mx-1",
+                                    children: "|"
+                                })
+                            ]
+                        }, link.href);
+                    })
+                });
+            }
+        case 'Icon':
+            {
+                const logo = item[itemType];
+                return /*#__PURE__*/ jsxRuntime.jsx(Image, {
+                    src: `${logo.logo}`,
+                    width: logo.width,
+                    height: logo.height,
+                    alt: logo.description,
+                    className: className
+                }, `icons-${logo.logo}`);
+            }
+        case 'Section':
+            {
+                const section = item[itemType];
+                return /*#__PURE__*/ jsxRuntime.jsx(FooterSection, {
+                    columns: section.columns,
+                    className: className
+                });
+            }
+        default:
+            return null;
+    }
+};
+const FooterColumnTwDefaultStyles = {
+    root: 'flex flex-col px-2 justify-start',
+    heading: 'font-bold text-xl text-white font-heading',
+    rowItem: ''
+};
+const FooterColumn = ({ heading, rows, classNames = {} })=>{
+    const mergedClassNames = mergeDefaultTailwindClassnames(FooterColumnTwDefaultStyles, classNames);
+    const rowClassname = extractClassName('rowItem', mergedClassNames);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: extractClassName('root', mergedClassNames),
+        children: [
+            heading && /*#__PURE__*/ jsxRuntime.jsx("h1", {
+                className: extractClassName('heading', mergedClassNames),
+                children: heading
+            }),
+            rows?.map((item, index)=>{
+                return /*#__PURE__*/ jsxRuntime.jsx(FooterRowComponent, {
+                    item: item,
+                    rowClassname: rowClassname
+                }, `footer-row-${index}`);
+            })
+        ]
+    });
+};
+const FooterSection = ({ columns, className = undefined })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: `${className ?? 'flex items-center justify-center'}`,
+        children: columns?.map((col, index)=>/*#__PURE__*/ jsxRuntime.jsx(FooterColumn, {
+                ...col
+            }, `column-${index}`))
+    });
+};
+var FooterSection$1 = /*#__PURE__*/ React.memo(FooterSection);
+
+const Footer = ({ rightSection, leftSection, classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'bg-primary-lighter text-primary-contrast p-4 shadow-sm'
+        root: 'bg-primary-lighter text-primary-contrast p-4 shadow-sm',
+        layout: 'flex items-center justify-between'
     };
     const mergedClassNames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
-    return /*#__PURE__*/ jsxRuntime.jsxs("footer", {
-        children: [
-            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                className: extractClassName('root', mergedClassNames),
+    return /*#__PURE__*/ jsxRuntime.jsx("footer", {
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: extractClassName('root', mergedClassNames),
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: extractClassName('layout', mergedClassNames),
                 children: [
-                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                        className: "flex justify-end",
-                        children: [
-                            (footerLogos || [
-                                []
-                            ]).map((col, index)=>{
-                                return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                    className: `flex flex-row gap-x-3 mr-8 ${col.length > 1 ? 'justify-between' : ''}`,
-                                    children: col.map((logo)=>/*#__PURE__*/ jsxRuntime.jsx(Image, {
-                                            className: "object-none",
-                                            src: `${logo.logo}`,
-                                            width: logo.width,
-                                            height: logo.height,
-                                            alt: logo.description
-                                        }, `icons-${logo.logo}`))
-                                }, `footer-col-${index}`);
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx("div", {
-                                className: "flex w-[100%] pl-10 pt-3",
-                                children: (columnLinks || []).map(({ heading, items }, i)=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                        className: "flex flex-col pl-10",
-                                        children: [
-                                            /*#__PURE__*/ jsxRuntime.jsx("h1", {
-                                                className: "font-bold text-xl text-white font-heading",
-                                                children: heading
-                                            }),
-                                            (items || []).map(({ text, href, linkType }, j)=>{
-                                                const attrs = {
-                                                    className: `${href && 'heal-link-footer'} font-medium text-sm p-[2px] text-white font-content`,
-                                                    key: j
-                                                };
-                                                if (href) {
-                                                    return /*#__PURE__*/ React.createElement("div", {
-                                                        ...attrs,
-                                                        key: href
-                                                    }, /*#__PURE__*/ jsxRuntime.jsx(Gen3Link, {
-                                                        href: href,
-                                                        linkType: linkType,
-                                                        text: text
-                                                    }));
-                                                } else {
-                                                    return /*#__PURE__*/ React.createElement("span", {
-                                                        ...attrs,
-                                                        key: href
-                                                    }, text);
-                                                }
-                                            })
-                                        ]
-                                    }, i))
-                            })
-                        ]
+                    leftSection && /*#__PURE__*/ jsxRuntime.jsx(FooterSection$1, {
+                        ...leftSection
                     }),
-                    (footerRightLogos || [
-                        []
-                    ]).map((col, index)=>{
-                        return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                            className: `flex gap-x-6 mr-8 ${col.length > 1 ? 'justify-end' : ''}`,
-                            children: col.map((logo)=>/*#__PURE__*/ jsxRuntime.jsx(Image, {
-                                    src: `${logo.logo}`,
-                                    width: logo.width,
-                                    height: logo.height,
-                                    alt: logo.description
-                                }, `icons-${logo.logo}`))
-                        }, `footer-col-${index}`);
+                    rightSection && /*#__PURE__*/ jsxRuntime.jsx(FooterSection$1, {
+                        ...rightSection
                     })
                 ]
-            }),
-            bottomLinks && bottomLinks.length > 0 ? /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: "pt-[4px] m-1 text-right text-xs text-white font-content",
-                children: bottomLinks.map((link, i)=>/*#__PURE__*/ jsxRuntime.jsxs(React.Fragment, {
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsx("a", {
-                                href: link.href,
-                                target: "_blank",
-                                rel: "noopener noreferrer",
-                                className: "heal-link-footer",
-                                children: link.text ? link.text : link.href
-                            }),
-                            i !== bottomLinks.length - 1 && /*#__PURE__*/ jsxRuntime.jsx("span", {
-                                className: "mx-1",
-                                children: "|"
-                            })
-                        ]
-                    }, link.href))
-            }) : null
+            })
+        })
+    });
+};
+
+const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })=>{
+    const portalBasename = process.env.NEXT_PUBLIC_PORTAL_BASENAME && process.env.NEXT_PUBLIC_PORTAL_BASENAME !== '/' ? process.env.NEXT_PUBLIC_PORTAL_BASENAME : '';
+    if (linkType === 'gen3ff') {
+        return /*#__PURE__*/ jsxRuntime.jsx("span", {
+            className: className,
+            children: /*#__PURE__*/ jsxRuntime.jsx(Link, {
+                href: href,
+                children: text
+            })
+        });
+    } else if (linkType === 'portal') {
+        return /*#__PURE__*/ jsxRuntime.jsx("a", {
+            className: className,
+            href: `${portalBasename}${href}`,
+            target: "_parent",
+            children: text
+        });
+    }
+    // external link
+    return /*#__PURE__*/ jsxRuntime.jsxs("a", {
+        className: className,
+        href: href,
+        target: "_blank",
+        rel: "noreferrer",
+        children: [
+            showExternalIcon ? /*#__PURE__*/ jsxRuntime.jsx(fa.FaExternalLinkAlt, {
+                className: "pr-1",
+                title: "External Link"
+            }) : null,
+            text
         ]
     });
 };
@@ -486,7 +546,7 @@ var LoginButtonVisibility;
 const handleSelected = async (isAuthenticated, router, referrer, endSession)=>{
     if (!isAuthenticated) await router.push(`Login?redirect=${referrer}`);
     else {
-        endSession && endSession();
+        if (endSession) endSession();
     }
 };
 const LoginButton = ({ icon = /*#__PURE__*/ jsxRuntime.jsx(md.MdLogin, {
@@ -546,7 +606,7 @@ const TopIconButton = ({ name, leftIcon = undefined, rightIcon = undefined, clas
     const classNamesDefaults = {
         root: `flex items-center align-middle px-2 ${drawBorder && 'border-r-2 border-accent'} my-2`,
         button: 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent',
-        leftSection: 'text-secondary-contrast-lighter pr-1',
+        leftIcon: 'text-secondary-contrast-lighter pr-1',
         label: 'font-content text-secondary-contrast-lighter block',
         rightIcon: 'text-secondary-contrast-lighter pl-1'
     };
@@ -640,12 +700,14 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, c
     });
 };
 
-const NavigationLogo = ({ src, title, description, basePath = '', classNames = {} })=>{
+const NavigationLogo = ({ src, title, description, width, height, divider = false, basePath = '', classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'relative flex h-full py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
-        link: 'relative w-96 h-full',
-        title: 'border-solid border-base-darker border-l-1 ml-1 mr-3 h-32 w-1',
-        titleLink: 'font-heading h3-typo pt-2 text-ink-dark hover:text-ink-darkest hover:border-accent hover:border-b-3'
+        root: 'relative flex py-2 justify-start items-center align-middle font-heading font-bold tracking-wide text-xl ml-[5px] mr-[20px]',
+        link: 'relative object-contain',
+        logo: 'px-3',
+        title: 'border-solid border-base-darker ml-1 mr-3',
+        divider: 'border-solid border-gen3-smoke border-l-1 ml-[2px] mr-[7px] h-[64px] w-1',
+        titleLink: 'font-heading text-md pt-2 text-ink-dark hover:text-ink-darkest hover:border-accent hover:border-b-3'
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -656,12 +718,17 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
                 className: extractClassName('link', mergedClassnames),
                 href: "/",
                 children: /*#__PURE__*/ jsxRuntime.jsx(Image, {
-                    className: "pr-3 object-contain",
-                    fill: true,
+                    className: extractClassName('logo', mergedClassnames),
+                    width: width ?? undefined,
+                    height: height ?? undefined,
+                    fill: !width && !height,
                     src: `${basePath}${src}`,
                     alt: description ?? title ?? 'link back to homepage'
                 })
             }),
+            divider && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: extractClassName('divider', mergedClassnames)
+            }),
             title && /*#__PURE__*/ jsxRuntime.jsx("div", {
                 className: extractClassName('title', mergedClassnames),
                 role: "navigation",
@@ -686,7 +753,7 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
  */ const NavigationBarButton = ({ tooltip, icon, href, name, iconHeight = '27px', classNames = {} })=>{
     const classNamesDefaults = {
         root: `flex flex-col flex-nowrap px-3 py-2 pt-4 items-center align-center text-primary hover:text-accent opacity-80 hover:opacity-100`,
-        label: 'pt-1.5 body-typo font-heading text-sm',
+        label: 'pt-1.5 body-typo font-heading text-sm text-nowrap',
         icon: 'mt-0.5 ml-1',
         ...TooltipStyle
     };
@@ -729,11 +796,12 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
  * @param {Object} NavigationProps.logo - The logo object
  * @param {Array} NavigationProps.items - The array of navigation items
  * @param {Object} NavigationProps.classNames - The custom class names for different elements of the NavigationBar
- * @returns {JSX.Element} The rendered NavigationBar component
- */ const NavigationBar = ({ logo = undefined, items = [], classNames = {} })=>{
+ * @returns {ReactElement} The rendered NavigationBar component
+ */ const NavigationBar = ({ logo = undefined, title = undefined, items = [], classNames = {} })=>{
     const classNamesDefaults = {
-        root: 'flex bg-base-max border-b-1 border-base-lighter',
-        navigationPanel: 'font-heading font-bold tracking-wide text-xl',
+        root: 'flex bg-base-max border-b-1 border-base-dark',
+        navigationPanel: 'font-heading',
+        logoAndTitlePanel: 'flex justify-center items-center align-middle',
         login: 'pl-1 mr-6 bg-base-max text-base-contrast opacity-80 hover:opacity-100'
     };
     const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
@@ -748,7 +816,7 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
         className: extractClassName('root', mergedClassnames),
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
-                className: `flex justify-center items-center align-middle ${extractClassName('logo', mergedClassnames)}`,
+                className: extractClassName('logoAndTitlePanel', mergedClassnames),
                 children: logo && /*#__PURE__*/ jsxRuntime.jsx(NavigationLogo, {
                     ...logo
                 })
@@ -761,7 +829,7 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
                 children: items.map((x, index)=>{
                     const selectedStyle = current === x.href ? 'border-accent border-b-4 border-b-accent' : '';
                     return /*#__PURE__*/ jsxRuntime.jsx("div", {
-                        className: `first:border-l-1 border-r-1 border-base-lighter ${selectedStyle}`,
+                        className: `first:border-l-1 border-r-1 border-base-dark ${selectedStyle}`,
                         children: /*#__PURE__*/ jsxRuntime.jsx(NavigationBarButton, {
                             tooltip: x.tooltip,
                             icon: x.icon,
@@ -776,6 +844,67 @@ const NavigationLogo = ({ src, title, description, basePath = '', classNames = {
     });
 };
 
+const backgroundColor = {
+    INFO: 'bg-utility-info',
+    WARNING: 'bg-utility-warning',
+    ERROR: 'bg-utility-error',
+    MESSAGE: 'bg-utility-warning'
+};
+const textColor = {
+    INFO: 'text-utility-contrast-info',
+    WARNING: 'text-utility-contrast-warning',
+    ERROR: 'text-utility-contrast-error',
+    MESSAGE: 'text-utility-contrast-warning'
+};
+const icon = {
+    INFO: /*#__PURE__*/ jsxRuntime.jsx(fa.FaQuestion, {
+        className: "text-utility-contrast-info",
+        title: "Info icon."
+    }),
+    WARNING: /*#__PURE__*/ jsxRuntime.jsx(fa.FaExclamation, {
+        className: "text-utility-contrast-warning",
+        title: "Warning icon."
+    }),
+    ERROR: /*#__PURE__*/ jsxRuntime.jsx(fa.FaExclamationTriangle, {
+        className: "text-utility-contrast-error",
+        title: "Error icon."
+    })
+};
+const Banner = ({ message, level, isExternalLink })=>{
+    const linkTarget = isExternalLink ? '_blank' : '_self';
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: `w-full p-1 flex justify-between ${backgroundColor[level]}`,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "flex items-center m-auto",
+            children: [
+                icon[level],
+                /*#__PURE__*/ jsxRuntime.jsx("span", {
+                    className: `pl-4 ${textColor[level]}`,
+                    children: /*#__PURE__*/ jsxRuntime.jsx(Markdown, {
+                        components: {
+                            // eslint-disable-next-line react/prop-types
+                            a: ({ children, ...props })=>/*#__PURE__*/ jsxRuntime.jsxs("a", {
+                                    className: "underline",
+                                    ...props,
+                                    target: linkTarget,
+                                    rel: "noreferrer",
+                                    children: [
+                                        children,
+                                        isExternalLink && /*#__PURE__*/ jsxRuntime.jsx(fa.FaExternalLinkAlt, {
+                                            className: "pl-1 inline-block",
+                                            title: "External Link"
+                                        })
+                                    ]
+                                })
+                        },
+                        children: message
+                    })
+                })
+            ]
+        })
+    });
+};
+
 const ActionMenu = ({ items })=>{
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu, {
@@ -872,25 +1001,39 @@ const HorizontalNavigationBar = ({ actions, items, logo = undefined, loginIcon =
  * @param {object} props.navigation - The navigation bar items and configuration.
  * @param {string} props.type - The type of header to render. Default value is 'original'.
  * @returns {JSX.Element} - The rendered Header component.
- */ const Header = ({ top, navigation, type = 'original' })=>{
-    return type === 'horizontal' ? /*#__PURE__*/ jsxRuntime.jsx("div", {
+ */ const Header = ({ top, navigation, banners, type = 'original' })=>{
+    return type === 'horizontal' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "w-full",
-        children: /*#__PURE__*/ jsxRuntime.jsx(HorizontalNavigationBar, {
-            logo: navigation.logo,
-            title: navigation.title,
-            items: navigation.items,
-            classNames: {
-                ...navigation.classNames
-            },
-            actions: top
-        })
-    }) : type === 'vertical' ? /*#__PURE__*/ jsxRuntime.jsx(HorizontalNavigationBar, {
-        logo: navigation.logo,
-        title: navigation.title,
-        classNames: {
-            ...navigation.classNames
-        },
-        actions: top
+        children: [
+            banners?.map((banner)=>/*#__PURE__*/ React.createElement(Banner, {
+                    ...banner,
+                    key: banner.id
+                })),
+            /*#__PURE__*/ jsxRuntime.jsx(HorizontalNavigationBar, {
+                logo: navigation.logo,
+                title: navigation.title,
+                items: navigation.items,
+                classNames: {
+                    ...navigation.classNames
+                },
+                actions: top
+            })
+        ]
+    }) : type === 'vertical' ? /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        children: [
+            banners?.map((banner)=>/*#__PURE__*/ React.createElement(Banner, {
+                    ...banner,
+                    key: banner.id
+                })),
+            /*#__PURE__*/ jsxRuntime.jsx(HorizontalNavigationBar, {
+                logo: navigation.logo,
+                title: navigation.title,
+                classNames: {
+                    ...navigation.classNames
+                },
+                actions: top
+            })
+        ]
     }) : /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "w-100",
         children: [
@@ -901,10 +1044,15 @@ const HorizontalNavigationBar = ({ actions, items, logo = undefined, loginIcon =
                     ...top.classNames
                 }
             }),
+            banners?.map((banner)=>/*#__PURE__*/ React.createElement(Banner, {
+                    ...banner,
+                    key: banner.id
+                })),
             /*#__PURE__*/ jsxRuntime.jsx(NavigationBar, {
                 logo: navigation.logo,
                 title: navigation.title,
-                items: navigation.items
+                items: navigation.items,
+                classNames: navigation?.classNames
             })
         ]
     });
@@ -1396,18 +1544,6 @@ const TruncatedStringWithTooltip = ({ value, params })=>{
     });
 };
 
-const isPropertyKey = (value)=>{
-    return typeof value === 'string' || typeof value === 'number' || typeof value === 'symbol';
-};
-const hasOwnProperty = (obj, prop)=>{
-    if (obj === undefined) return false;
-    if (prop === undefined) return false;
-    return Object.hasOwnProperty.call(obj, prop);
-};
-const getParamsValueAsString = (params, key)=>{
-    return params && key && key !== '' && isPropertyKey(key) && hasOwnProperty(params, key) ? lodash.toString(params[key]) : undefined;
-};
-
 const TruncatedStringWithTooltipCellRenderer = ({ value }, params)=>{
     return /*#__PURE__*/ jsxRuntime.jsx(TruncatedStringWithTooltip, {
         value: value,
@@ -4985,9 +5121,13 @@ const FirstTimeModal = ({ openModal, config })=>{
         'Gen3-first-time-use'
     ]);
     const handleAccept = ()=>{
-        cookie['Gen3-first-time-use'] || setCookie('Gen3-first-time-use', true, {
-            maxAge: 60 * 60 * 24 * (config?.expireDays ?? 365)
-        });
+        const isFirstTimeUse = cookie['Gen3-first-time-use'];
+        if (!isFirstTimeUse) {
+            const maxAge = 60 * 60 * 24 * (config?.expireDays ?? 365);
+            setCookie('Gen3-first-time-use', true, {
+                maxAge
+            });
+        }
     };
     return /*#__PURE__*/ jsxRuntime.jsx(BaseModal, {
         title: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
@@ -5232,7 +5372,7 @@ const Gen3ModalsProvider = ({ config, children })=>{
     useDeepCompare.useDeepCompareEffect(()=>{
         if (!cookie['Gen3-first-time-use'] && modalsConfig.systemUseModal.enabled) {
             if (modalsConfig.systemUseModal.showOnlyOnLogin && !isAuthenticated) return;
-            dispatch && dispatch(core.showModal({
+            if (dispatch) dispatch(core.showModal({
                 modal: core.Modals.FirstTimeModal
             }));
         }
@@ -8020,7 +8160,7 @@ const ExtractData = (data, index)=>{
     if (data.data === undefined || data.data === null) return {};
     return Array.isArray(data.data[index]) && data.data[index].length > 0 ? data.data[index][0] : {};
 };
-const TableDetailsPanel = ({ id, index, tableConfig })=>{
+const QueryRowDetailsPanel = ({ id, index, tableConfig })=>{
     //const [queryGuppy, { data, isLoading, isError }] = useLazyGeneralGQLQuery();
     const idField = tableConfig.detailsConfig?.idField;
     const { data, isLoading, isError } = core.useGeneralGQLQuery({
@@ -8043,7 +8183,7 @@ const TableDetailsPanel = ({ id, index, tableConfig })=>{
             }
         }
     });
-    if (!idField || idField === null) {
+    if (!idField) {
         return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
             message: 'idField not configure in Tables Details Config'
         });
@@ -8075,7 +8215,7 @@ const TableDetailsPanel = ({ id, index, tableConfig })=>{
                 visible: isLoading
             }),
             /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
-                color: "primary.4",
+                c: "primary.4",
                 children: [
                     "Results for ",
                     id
@@ -8106,10 +8246,53 @@ const TableDetailsPanel = ({ id, index, tableConfig })=>{
     });
 };
 
+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;
 const DefaultRendererCatalog = {
     tableDetails: {
-        default: TableDetailsPanel
+        default: RowTableDetailsPanel,
+        queryRowDetails: QueryRowDetailsPanel
     }
 };
 const ExplorerTableDetailsPanelFactory = ()=>{
@@ -8128,9 +8311,9 @@ const DEFAULT_PROPS = {
     title: '!text-primary-contrast !font-bold',
     close: '!bg-base-darker'
 };
-const DetailsModal = ({ title, id, classNames, panel, panelProps, onClose, withCloseButton = true, closeOnClickOutside = true, closeOnEscape = true, size = 'auto' })=>{
+const DetailsModal = ({ title, id, row, classNames, panel, panelProps, onClose, withCloseButton = true, closeOnClickOutside = true, closeOnEscape = true, size = 'auto' })=>{
     const [opened, { open, close }] = hooks.useDisclosure(id !== undefined);
-    const styling = React.useMemo(()=>mergeDefaultTailwindClassnames(DEFAULT_PROPS, classNames ?? {}, true), [
+    const styling = React.useMemo(()=>mergeDefaultTailwindClassnames(DEFAULT_PROPS, classNames ?? {}), [
         classNames
     ]);
     React.useEffect(()=>{
@@ -8145,7 +8328,7 @@ const DetailsModal = ({ title, id, classNames, panel, panelProps, onClose, withC
         opened: opened,
         onClose: ()=>{
             close();
-            onClose && onClose(id);
+            if (onClose) onClose(id);
         },
         title: title,
         withinPortal: true,
@@ -8157,8 +8340,9 @@ const DetailsModal = ({ title, id, classNames, panel, panelProps, onClose, withC
         classNames: styling,
         xOffset: 0,
         children: panel({
-            id: id,
+            id,
             onClose,
+            row,
             ...panelProps
         })
     });
@@ -8184,6 +8368,7 @@ const isRecordAny = (obj)=>{
     const DetailsComponent = 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'), []);
     const cols = useDeepCompare.useDeepCompareMemo(()=>{
         // setup table columns at the same time
@@ -8307,10 +8492,12 @@ const isRecordAny = (obj)=>{
                 onClick: ()=>{
                     if (Object.keys(rowSelection).includes(row.id)) {
                         setRowSelection({});
+                        setSelectedRow(undefined);
                     } else {
                         setRowSelection({
                             [row.id]: true
                         });
+                        setSelectedRow(row); // TODO: fix this typecast
                     }
                 },
                 sx: {
@@ -8323,6 +8510,7 @@ const isRecordAny = (obj)=>{
             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,
@@ -8455,22 +8643,22 @@ const useGuppyActionButton = ({ Modal403 = core.Modals.NoAccessModal, Modal400 =
         const controller = new AbortController();
         showDownloadNotification(controller);
         setActive(true);
-        setIsActive && setIsActive(true);
+        if (setIsActive) setIsActive(true);
         await actionFunction(actionArgs, ()=>{
             setActive(false);
-            setIsActive && setIsActive(false);
+            if (setIsActive) setIsActive(false);
             // Clean up notifications...
             notifications.cleanNotifications();
         }, (error)=>{
             handleError(error);
             setActive(false);
-            setIsActive && setIsActive(false);
+            if (setIsActive) setIsActive(false);
             // Clean up notifications...
             notifications.cleanNotifications();
             showErrorMessage(error);
         }, ()=>{
             setActive(false);
-            setIsActive && setIsActive(false);
+            if (setIsActive) setIsActive(false);
             // Clean up notifications...
             notifications.cleanNotifications();
         }, controller.signal);
@@ -8536,13 +8724,13 @@ const downloadToFileAction = async (params, done, onError, onAbort, signal)=>{
         parameters: params,
         onDone: (data)=>{
             handleDownload(data, params.filename);
-            done && done();
+            if (done) done();
         },
         onError: (error)=>{
-            onError && onError(error);
+            if (onError) onError(error);
         },
         onAbort: ()=>{
-            onAbort && onAbort();
+            if (onAbort) onAbort();
         },
         signal
     });
@@ -8606,13 +8794,13 @@ const downloadToManifestAction = async (params, done, onError, onAbort, signal,
                 type: 'application/json;charset=utf-8'
             });
             handleDownload(blob, manifestFilename);
-            done && done();
+            if (done) done();
         } catch (err) {
             let resultErr;
             if (typeof err === 'string') resultErr = new Error(err);
             if (err instanceof Error) resultErr = err;
             if (!resultErr) resultErr = new Error('unknown error in download manifest');
-            onError && onError(resultErr);
+            if (onError) onError(resultErr);
         }
         return;
     }
@@ -8678,16 +8866,16 @@ const downloadToManifestAction = async (params, done, onError, onAbort, signal,
             type: 'application/json;charset=utf-8'
         });
         handleDownload(blob, manifestFilename);
-        done && done();
+        if (done) done();
     } catch (err) {
-        onError && onError(err);
+        if (onError) onError(err);
     }
 };
 
 const registeredButtonActions = {};
 const NullButtonAction = (_params, done)=>{
     return new Promise((done)=>{
-        done && done();
+        if (done) done();
     });
 };
 const registerButtonAction = (buttonName, actionItem)=>{
@@ -8745,7 +8933,7 @@ const GuppyDropdownMenuItem = ({ title, idx, disabled = false, Modal403 = core.M
     });
     return /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Item, {
         onClick: ()=>{
-            handleClick && handleClick();
+            if (handleClick) handleClick();
         },
         "data-testid": `${title}-${idx}`,
         leftSection: icon,
@@ -9239,18 +9427,42 @@ const CohortBuilder = ({ explorerConfig })=>{
  * @param graphQLEndpoint - The location of the graphql endpoint.
  * @returns a component containing a GraphiQl editor
  */ const GqlQueryEditor$1 = ({ graphQLEndpoint })=>{
-    React.useState('');
-    core.useCoreSelector(core.selectHeadersWithCSRFToken);
-    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+    const [query, setQuery] = React.useState('');
+    const headers = core.useCoreSelector(core.selectHeadersWithCSRFToken);
+    // Typically we would put this in core but it's only used here
+    const fetcher = async (graphQLParams)=>{
+        const data = await fetch(graphQLEndpoint || `${core.GEN3_GUPPY_API}/graphql`, {
+            method: 'POST',
+            headers: headers,
+            body: JSON.stringify(graphQLParams)
+        });
+        return data.json().catch(()=>data.text());
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
         className: "flex flex-col h-full w-full",
-        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
-            className: "flex justify-between items-center m-2",
-            children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                size: "xl",
-                fw: 500,
-                children: "Query Graph"
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex justify-between items-center m-2",
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                    size: "xl",
+                    fw: 500,
+                    children: "Query Graph"
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx(GraphiQL, {
+                editorTheme: "light",
+                fetcher: fetcher,
+                query: query,
+                onEditQuery: setQuery,
+                children: /*#__PURE__*/ jsxRuntime.jsxs(GraphiQL.Logo, {
+                    children: [
+                        " ",
+                        null,
+                        " "
+                    ]
+                })
             })
-        })
+        ]
     });
 };
 
@@ -9311,10 +9523,17 @@ const ContentSource = setup();
  * @returns A Promise resolving to an object containing header and footer props.
  */ const getNavPageLayoutPropsFromConfig = async ()=>{
     const navigationConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/navigation.json`);
+    let bannerConfigJSON = [];
+    try {
+        bannerConfigJSON = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/banner.json`);
+    } catch (e) {
+        console.log('No banner config found at: ', `config/${core.GEN3_COMMONS_NAME}/banner.json`);
+    }
     const { topBar, navigation, type = 'original' } = navigationConfigJSON;
     const headerProps = {
         top: topBar,
         navigation: navigation,
+        banners: bannerConfigJSON,
         type
     };
     const footerProps = await ContentSource.get(`config/${core.GEN3_COMMONS_NAME}/footer.json`);
@@ -9779,8 +9998,6 @@ const LandingPageGetStaticProps = async ()=>{
     };
 };
 
-registerExplorerDefaultCellRenderers();
-registerCohortBuilderDefaultPreviewRenderers();
 const ExplorerPage = ({ headerProps, footerProps, explorerConfig })=>{
     if (explorerConfig === undefined) {
         return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
@@ -13547,11 +13764,15 @@ exports.create10ColorAccessibleContrast = create10ColorAccessibleContrast;
 exports.create10ColorPallet = create10ColorPallet;
 exports.credentialsLogin = credentialsLogin;
 exports.credentialsLogout = credentialsLogout;
+exports.extractObjectKey = extractObjectKey;
 exports.focusStyles = focusStyles;
 exports.getCurrentUnixTimestamp = getCurrentUnixTimestamp;
 exports.getNavPageLayoutPropsFromConfig = getNavPageLayoutPropsFromConfig;
+exports.getParamsValueAsString = getParamsValueAsString;
 exports.getTagInfo = getTagInfo;
+exports.hasOwnProperty = hasOwnProperty;
 exports.isArrayOfString = isArrayOfString;
+exports.isPropertyKey = isPropertyKey;
 exports.isTextTransform = isTextTransform$1;
 exports.processLabel = processLabel$1;
 exports.processRangeKeyLabel = processRangeKeyLabel;