@gen3/frontend 0.10.83 → 0.10.85

package/dist/esm/index.js

@@ -992,13 +992,13 @@ var LoginButtonVisibility = /*#__PURE__*/ function(LoginButtonVisibility) {
 };
 const mergeTailwindClassnameWithDefault = (userValues, defaultValues)=>userValues ? twMerge(defaultValues, userValues) : defaultValues;
 
-const handleSelected = async (isAuthenticated, router, referrer, endSession, externalLoginUrl)=>{
+const handleSelected$1 = async (isAuthenticated, router, referrer, endSession, externalLoginUrl)=>{
     if (!isAuthenticated) await router.push(externalLoginUrl || `Login?redirect=${referrer}`);
     else {
         if (endSession) endSession();
     }
 };
-const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
+const LoginButton$1 = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
     className: "pl-1",
     size: '1.55rem'
 }), hideText = false, className = undefined, tooltip, visibility, externalLoginUrl })=>{
@@ -1020,7 +1020,7 @@ const LoginButton = ({ icon = /*#__PURE__*/ jsx(MdLogin, {
         disabled: tooltip === undefined,
         classNames: TooltipStyle,
         children: /*#__PURE__*/ jsx(UnstyledButton, {
-            onClick: ()=>handleSelected(authenticated, router, pathname, endSession, externalLoginUrl),
+            onClick: ()=>handleSelected$1(authenticated, router, pathname, endSession, externalLoginUrl),
             children: /*#__PURE__*/ jsxs("div", {
                 className: mergedClassname,
                 children: [
@@ -3037,27 +3037,6 @@ const Gen3Link = ({ className, href, linkType, text, showExternalIcon = false })
     });
 };
 
-const LoginAccountButton = ({ className = undefined })=>{
-    const router = useRouter();
-    const handleSelected = async ()=>{
-        await router.push('Profile');
-    };
-    const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
-    const userInfo = useCoreSelector((state)=>selectUserDetails(state));
-    const mergedClassname = mergeTailwindClassnameWithDefault(className, 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent');
-    if (userStatus && isAuthenticated(userStatus)) {
-        return /*#__PURE__*/ jsx(UnstyledButton, {
-            className: "mx-2",
-            onClick: ()=>handleSelected(),
-            children: /*#__PURE__*/ jsx("div", {
-                className: mergedClassname,
-                children: userInfo?.username
-            })
-        });
-    }
-    return null;
-};
-
 const IconSize = {
     xs: 14,
     sm: 16,
@@ -3067,7 +3046,7 @@ const IconSize = {
     'xl-2': 36
 };
 
-const TopIconButton = ({ name, leftIcon = undefined, rightIcon = undefined, iconSize = 'md', classNames = {}, drawBorder = true })=>{
+const IconButton = ({ name, leftIcon = undefined, rightIcon = undefined, iconSize = 'md', tooltip = undefined, classNames = {}, clickHandler = undefined, ariaLabel = undefined })=>{
     const classNamesDefaults = {
         root: `flex items-center align-middle px-2 my-2`,
         button: 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent',
@@ -3080,53 +3059,111 @@ const TopIconButton = ({ name, leftIcon = undefined, rightIcon = undefined, icon
     const iconSz = IconSize[iconSize] ?? iconSize;
     return /*#__PURE__*/ jsx("div", {
         className: extractClassName('root', mergedClassnames),
-        "aria-label": name,
-        children: /*#__PURE__*/ jsxs("div", {
-            className: extractClassName('button', mergedClassnames),
-            role: "button",
-            children: [
-                leftIcon ? /*#__PURE__*/ jsx(Icon, {
-                    icon: leftIcon,
-                    width: iconSz,
-                    height: iconSz,
-                    className: extractClassName('leftIcon', mergedClassnames)
-                }) : null,
-                /*#__PURE__*/ jsxs("p", {
-                    className: extractClassName('label', mergedClassnames),
-                    children: [
-                        " ",
-                        name,
-                        " "
-                    ]
-                }),
-                rightIcon && rightIcon.length > 0 ? /*#__PURE__*/ jsx(Icon, {
-                    width: iconSz,
-                    height: iconSz,
-                    icon: rightIcon,
-                    className: extractClassName('rightIcon', mergedClassnames)
-                }) : null
-            ]
+        children: /*#__PURE__*/ jsx(Tooltip, {
+            label: tooltip,
+            position: "bottom",
+            withArrow: true,
+            multiline: true,
+            color: "base",
+            disabled: tooltip === undefined,
+            classNames: TooltipStyle,
+            children: /*#__PURE__*/ jsxs("div", {
+                className: extractClassName('button', mergedClassnames),
+                role: "button",
+                "aria-label": ariaLabel ?? name,
+                onClick: (event)=>clickHandler && clickHandler(),
+                children: [
+                    leftIcon ? /*#__PURE__*/ jsx(Icon, {
+                        icon: leftIcon,
+                        width: iconSz,
+                        height: iconSz,
+                        className: extractClassName('leftIcon', mergedClassnames)
+                    }) : null,
+                    /*#__PURE__*/ jsx("p", {
+                        className: extractClassName('label', mergedClassnames),
+                        children: name
+                    }),
+                    rightIcon && rightIcon.length > 0 ? /*#__PURE__*/ jsx(Icon, {
+                        width: iconSz,
+                        height: iconSz,
+                        icon: rightIcon,
+                        className: extractClassName('rightIcon', mergedClassnames)
+                    }) : null
+                ]
+            })
         })
     });
 };
-const processTopBarItems = (items, showLogin, classNames, dividerClassname)=>{
+
+const AccountButton = ({ leftIcon = undefined, rightIcon = undefined, iconSize = 'md', classNames = {}, tooltip = 'See account profile' })=>{
+    const classNamesDefaults = {
+        root: `flex items-center align-middle px-2 my-2`,
+        button: 'flex flex-nowrap items-center align-middle border-b-2 hover:border-accent border-transparent',
+        leftIcon: 'text-secondary-contrast-lighter pr-1',
+        label: 'font-content text-secondary-contrast-lighter block',
+        rightIcon: 'text-secondary-contrast-lighter pl-1'
+    };
+    const mergedClassnames = mergeDefaultTailwindClassnames(classNamesDefaults, classNames);
+    const router = useRouter();
+    const handleSelected = async ()=>{
+        await router.push('Profile');
+    };
+    const userInfo = useCoreSelector((state)=>selectUserDetails(state));
+    const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
+    const authenticated = isAuthenticated(userStatus);
+    if (!authenticated) return null;
+    return /*#__PURE__*/ jsx(IconButton, {
+        name: userInfo?.username ?? 'Profile',
+        leftIcon: leftIcon,
+        rightIcon: rightIcon,
+        iconSize: iconSize,
+        classNames: mergedClassnames,
+        clickHandler: handleSelected,
+        tooltip: tooltip
+    });
+};
+
+const handleSelected = async (isAuthenticated, router, referrer, endSession, externalLoginUrl)=>{
+    if (!isAuthenticated) await router.push(externalLoginUrl || `Login?redirect=${referrer}`);
+    else {
+        if (endSession) endSession();
+    }
+};
+const LoginButton = ({ name = 'login', leftIcon = undefined, rightIcon = undefined, tooltip = 'Login to your account', visibility, externalLoginUrl, iconSize = 'md', classNames = {} })=>{
+    const router = useRouter();
+    const pathname = usePathname();
+    const { endSession } = useContext(SessionContext) ?? {
+        endSession: undefined
+    };
+    const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
+    const authenticated = isAuthenticated(userStatus);
+    if (visibility === LoginButtonVisibility.LogoutOnly && !authenticated) return null;
+    return /*#__PURE__*/ jsx(IconButton, {
+        name: authenticated ? 'Logout' : 'Login',
+        leftIcon: leftIcon,
+        rightIcon: authenticated ? 'gen3:logout' : 'gen3:login',
+        iconSize: iconSize,
+        classNames: classNames,
+        clickHandler: ()=>handleSelected(authenticated, router, pathname, endSession, externalLoginUrl)
+    });
+};
+
+const processTopBarItems = (items, classNames, dividerClassname)=>{
     return items.reduce((acc, item, index)=>{
-        const needsBorder = !(index === items.length - 1 && !showLogin);
         const mergedClassnames = item?.classNames ? mergeDefaultTailwindClassnames(classNames, item.classNames) : classNames;
-        acc.push(/*#__PURE__*/ jsxs("a", {
-            className: "flex",
-            href: item.href,
+        acc.push(/*#__PURE__*/ jsxs(Fragment, {
             children: [
-                ' ',
-                /*#__PURE__*/ jsx(TopIconButton, {
-                    name: item.name,
-                    iconSize: item.iconSize,
-                    leftIcon: item.leftIcon,
-                    rightIcon: item.rightIcon,
-                    classNames: mergedClassnames,
-                    drawBorder: needsBorder
-                }),
-                ' ',
+                /*#__PURE__*/ jsx("a", {
+                    className: "flex",
+                    href: item.href,
+                    children: /*#__PURE__*/ jsx(IconButton, {
+                        name: item.name,
+                        iconSize: item.iconSize,
+                        leftIcon: item.leftIcon,
+                        rightIcon: item.rightIcon,
+                        classNames: mergedClassnames
+                    })
+                }, `${item.href}_${item.name}`),
                 /*#__PURE__*/ jsx(Divider, {
                     size: "md",
                     orientation: "vertical",
@@ -3135,7 +3172,7 @@ const processTopBarItems = (items, showLogin, classNames, dividerClassname)=>{
                     }
                 })
             ]
-        }, `${item.href}_${item.name}`));
+        }));
         return acc;
     }, []);
 };
@@ -3162,29 +3199,30 @@ const TopBar = ({ items, loginButtonVisibility = LoginButtonVisibility.Hidden, e
                 "aria-label": "top most navigation",
                 className: "flex items-center align-middle",
                 children: [
-                    processTopBarItems(items, loginButtonVisibility === LoginButtonVisibility.Visible, mergedItemClassnames, extractClassName('divider', mergedClassnames)),
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxs("div", {
-                        className: "flex items-center",
+                    processTopBarItems(items, mergedItemClassnames, extractClassName('divider', mergedClassnames)),
+                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsxs(Fragment, {
                         children: [
-                            /*#__PURE__*/ jsx(LoginAccountButton, {
-                                className: extractClassName('login', mergedClassnames)
+                            /*#__PURE__*/ jsxs("span", {
+                                className: "flex items-center align-middle [&>*:only-child]:hidden",
+                                children: [
+                                    /*#__PURE__*/ jsx(AccountButton, {
+                                        classNames: mergedItemClassnames
+                                    }),
+                                    /*#__PURE__*/ jsx(Divider, {
+                                        size: "md",
+                                        classNames: {
+                                            root: extractClassName('divider', mergedClassnames)
+                                        },
+                                        orientation: "vertical"
+                                    })
+                                ]
                             }),
-                            /*#__PURE__*/ jsx(Divider, {
-                                size: "md",
-                                classNames: {
-                                    root: extractClassName('divider', mergedClassnames)
-                                },
-                                orientation: "vertical"
+                            /*#__PURE__*/ jsx(LoginButton, {
+                                visibility: loginButtonVisibility,
+                                externalLoginUrl: externalLoginUrl,
+                                classNames: mergedItemClassnames
                             })
                         ]
-                    }) : null,
-                    loginButtonVisibility != LoginButtonVisibility.Hidden ? /*#__PURE__*/ jsx("div", {
-                        className: "flex items-center",
-                        children: /*#__PURE__*/ jsx(LoginButton, {
-                            visibility: loginButtonVisibility,
-                            externalLoginUrl: externalLoginUrl,
-                            className: extractClassName('login', mergedClassnames)
-                        })
                     }) : null
                 ]
             })
@@ -3518,7 +3556,7 @@ const HorizontalNavigationBar = ({ actions, items, logo = undefined, loginIcon =
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center align-middle mr-3",
                 children: [
-                    actions.loginButtonVisibility === LoginButtonVisibility.Visible ? /*#__PURE__*/ jsx(LoginButton, {
+                    actions.loginButtonVisibility === LoginButtonVisibility.Visible ? /*#__PURE__*/ jsx(LoginButton$1, {
                         icon: loginIcon,
                         hideText: true,
                         className: `${extractClassName('login', mergedClassnames)}`,
@@ -11896,18 +11934,35 @@ const Workspace = ({ config })=>{
 
 const TextDescription = ({ description })=>{
     const [extend, setExtend] = useState(false);
+    const textRef = useRef(null);
+    const [isClamped, setClamped] = useState(false);
+    useEffect(()=>{
+        // Function that should be called on window resize
+        function handleResize() {
+            if (textRef && textRef.current) {
+                setClamped(textRef.current.scrollHeight > textRef.current.clientHeight);
+            }
+        }
+        // Add event listener to window resize
+        window.addEventListener('resize', handleResize);
+        // Remove event listener on cleanup
+        return ()=>window.removeEventListener('resize', handleResize);
+    }, []); // Empty array ensures that it would only run on mount
     return /*#__PURE__*/ jsxs(Fragment, {
         children: [
             !extend ? /*#__PURE__*/ jsx(Text, {
+                ref: textRef,
+                size: "sm",
                 lineClamp: 4,
                 children: description
             }) : /*#__PURE__*/ jsx(Text, {
+                size: "sm",
                 children: description
             }),
-            /*#__PURE__*/ jsx("button", {
+            isClamped && /*#__PURE__*/ jsx("button", {
                 onClick: ()=>setExtend((extend)=>!extend),
                 children: /*#__PURE__*/ jsxs("div", {
-                    className: "flex text-xs font-semibold text-gray-400",
+                    className: "flex text-xs font-semibold text-base-contrast-light",
                     children: [
                         !extend ? 'Extend Text' : 'Collapse Text',
                         ' ',
@@ -11922,6 +11977,90 @@ const TextDescription = ({ description })=>{
     });
 };
 
+const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginRequired, href })=>{
+    return /*#__PURE__*/ jsx(Stack, {
+        children: /*#__PURE__*/ jsxs("div", {
+            className: "rounded-sm bg-base-max",
+            children: [
+                /*#__PURE__*/ jsx("div", {
+                    className: "p-0 rounded-sm",
+                    children: /*#__PURE__*/ jsx(Image$1, {
+                        component: Image,
+                        src: `${image}`,
+                        alt: `${title} image`,
+                        height: 1000,
+                        width: 1000,
+                        radius: "md"
+                    })
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex -mt-5 relative z-10",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
+                            children: /*#__PURE__*/ jsx(Image$1, {
+                                component: Image,
+                                src: `${icon}`,
+                                alt: `${title} logo`,
+                                width: 40,
+                                height: 40,
+                                radius: "lg"
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "relative mb-0 ml-2",
+                            children: /*#__PURE__*/ jsx("span", {
+                                className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
+                                children: type === 'application' ? 'Application' : 'Jupyter Notebook'
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsxs("div", {
+                    className: "flex flex-col mt-2 ml-2",
+                    children: [
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-sm font-black h-6",
+                            children: title
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-xs text-gray-400 h-6",
+                            children: loginRequired ? 'Login Required' : ' '
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "text-sm p-2 h-fit",
+                            children: /*#__PURE__*/ jsx(TextDescription, {
+                                description: description
+                            })
+                        }),
+                        /*#__PURE__*/ jsx("div", {
+                            className: "flex mb-4 rounded-b-md",
+                            children: /*#__PURE__*/ jsxs("div", {
+                                className: "m-auto",
+                                children: [
+                                    /*#__PURE__*/ jsx(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: `Run ${type === 'application' ? 'App' : 'Notebook'}`
+                                    }),
+                                    hasDemo && /*#__PURE__*/ jsx("button", {
+                                        className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
+                                        children: "Demo"
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
+    }, title);
+};
+
 const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
     const [cards, setCards] = useState({
         type: '',
@@ -11991,91 +12130,158 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
                 children: /*#__PURE__*/ jsx("div", {
                     className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 p-1 mx-4 overflow-y-scroll",
                     children: tools.map(({ title, description, type, icon, image, hasDemo, loginRequired, href }, key)=>{
-                        return /*#__PURE__*/ jsx(Stack, {
-                            children: /*#__PURE__*/ jsxs("div", {
-                                className: "rounded-sm bg-base-max",
+                        return /*#__PURE__*/ jsx(AnalysisCard, {
+                            title,
+                            description,
+                            type,
+                            icon,
+                            image,
+                            hasDemo,
+                            loginRequired,
+                            href,
+                            cardType: 'regular'
+                        }, title);
+                    })
+                })
+            })
+        ]
+    });
+};
+
+const AnalysisCardCompact = ({ title, description, type = 'application', icon, hasDemo = false, loginRequired = false, href, count, countUnits })=>{
+    return /*#__PURE__*/ jsxs(Stack, {
+        gap: "xs",
+        classNames: {
+            root: 'rounded-lg border-3 border-contrast bg-base-max h-full'
+        },
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                className: "rounded-t-lg bg-secondary border-b-4 border-accent-warm h-12"
+            }),
+            /*#__PURE__*/ jsx("div", {
+                className: "flex relative -mt-10 z-10 p-2 max-w-90",
+                children: /*#__PURE__*/ jsx("div", {
+                    className: "relative rounded-lg bg-base-lightest ml-5 border-4 border-base-light mx-2 w-1/4 aspect-square",
+                    children: /*#__PURE__*/ jsx(Image$1, {
+                        component: Image,
+                        src: `${icon}`,
+                        alt: `${title} logo`,
+                        fill: true,
+                        fit: "cover",
+                        radius: "lg"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex flex-col ml-2 px-4 pb-2 h-full justify-between",
+                children: [
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ jsx(Text, {
+                                fw: "bold",
+                                classNames: {
+                                    root: 'font-header sm:text-xl lg:text-2xl'
+                                },
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsxs(Text, {
+                                size: "md",
+                                fw: "semibold",
+                                c: "base-contrast.5",
                                 children: [
-                                    /*#__PURE__*/ jsx("div", {
-                                        className: "p-0 rounded-sm",
-                                        children: /*#__PURE__*/ jsx(Image$1, {
-                                            component: Image,
-                                            src: `${image}`,
-                                            alt: `${title} image`,
-                                            height: 1000,
-                                            width: 1000,
-                                            radius: "md"
-                                        })
-                                    }),
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "flex -mt-5 relative z-10",
-                                        children: [
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "p-0.5 rounded-sm bg-base-lightest ml-5 border-2 border-base",
-                                                children: /*#__PURE__*/ jsx(Image$1, {
-                                                    component: Image,
-                                                    src: `${icon}`,
-                                                    alt: `${title} logo`,
-                                                    width: 40,
-                                                    height: 40,
-                                                    radius: "lg"
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "relative mb-0 ml-2",
-                                                children: /*#__PURE__*/ jsx("span", {
-                                                    className: "absolute bottom-0 left-0 text-xs text-gray-700 w-max",
-                                                    children: type === 'application' ? 'Application' : 'Jupyter Notebook'
-                                                })
-                                            })
-                                        ]
-                                    }),
-                                    /*#__PURE__*/ jsxs("div", {
-                                        className: "flex flex-col mt-2 ml-2",
-                                        children: [
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "text-sm font-black h-6",
-                                                children: title
-                                            }),
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "text-xs text-gray-400 h-6",
-                                                children: loginRequired ? 'Login Required' : ' '
-                                            }),
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "text-sm p-2 h-fit",
-                                                children: /*#__PURE__*/ jsx(TextDescription, {
-                                                    description: description
-                                                })
-                                            }),
-                                            /*#__PURE__*/ jsx("div", {
-                                                className: "flex mb-4 rounded-b-md",
-                                                children: /*#__PURE__*/ jsxs("div", {
-                                                    className: "m-auto",
-                                                    children: [
-                                                        /*#__PURE__*/ jsx(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: `Run ${type === 'application' ? 'App' : 'Notebook'}`
-                                                        }),
-                                                        hasDemo && /*#__PURE__*/ jsx("button", {
-                                                            className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
-                                                            children: "Demo"
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    })
+                                    count?.toLocaleString(),
+                                    " ",
+                                    countUnits
                                 ]
+                            }),
+                            /*#__PURE__*/ jsx("div", {
+                                className: "py-2 min-h-24 h-full",
+                                children: /*#__PURE__*/ jsx(TextDescription, {
+                                    description: description
+                                })
                             })
-                        }, key);
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxs(Group, {
+                        className: "mb-4",
+                        children: [
+                            /*#__PURE__*/ jsxs(Button, {
+                                color: "primary.4",
+                                children: [
+                                    "Run ",
+                                    type === 'application' ? 'App' : 'Notebook'
+                                ]
+                            }),
+                            hasDemo && /*#__PURE__*/ jsx(Button, {
+                                variant: "outline",
+                                color: "primary.4",
+                                children: "Demo"
+                            })
+                        ]
                     })
-                })
+                ]
             })
         ]
+    }, title);
+};
+
+/**
+ * AnalysisPanelWithSections component.
+ *
+ * This React functional component renders a panel that organizes tools into sections. Each section
+ * includes a title, a divider, and a grid of tool cards. The component supports customizable styling
+ * for global and section-specific classNames.
+ *
+ * @type {React.FC<AnalysisCenterWithSectionsConfiguration>}
+ *
+ * @param {Object} props - The component properties.
+ * @param {Array} props.sections - The array of sections to display in the panel. Each section includes
+ * a label, an optional classNames object for custom styling, and an array of tools.
+ * @param {Object} [props.classNames] - An optional object of global classNames used for styling
+ * components within the panel. These can be overridden on a per-section basis.
+ *
+ * @returns {ReactElement} A React element that renders the analysis panel with sections.
+ */ const AnalysisCenterWithSections = ({ sections, classNames })=>{
+    const rootClassNamesDefaults = {
+        title: 'font-header font-bold text-2xl uppercase',
+        divider: 'text-accent w-[100px] border-accent mb-4'
+    };
+    const mergedGlobalClassnames = mergeDefaultTailwindClassnames(rootClassNamesDefaults, classNames ?? {});
+    const sectionPanels = useMemo(()=>sections.map((section)=>{
+            const sectionClassnames = mergeDefaultTailwindClassnames(mergedGlobalClassnames, section.classNames ?? {});
+            return /*#__PURE__*/ jsxs(Stack, {
+                gap: "xs",
+                children: [
+                    /*#__PURE__*/ jsx(Text, {
+                        classNames: {
+                            root: sectionClassnames['title']
+                        },
+                        children: section.label
+                    }),
+                    /*#__PURE__*/ jsx(Divider, {
+                        size: "lg",
+                        classNames: {
+                            root: sectionClassnames['divider']
+                        }
+                    }),
+                    /*#__PURE__*/ jsx("div", {
+                        className: "grid sm:grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4 items-stretch",
+                        children: section.tools.map((tool)=>{
+                            return /*#__PURE__*/ jsx("div", {
+                                children: /*#__PURE__*/ jsx(AnalysisCardCompact, {
+                                    ...tool
+                                })
+                            }, tool.title);
+                        })
+                    })
+                ]
+            }, section.label);
+        }), [
+        sections
+    ]);
+    return /*#__PURE__*/ jsx(Stack, {
+        children: sectionPanels
     });
 };
 
@@ -17601,8 +17807,8 @@ const AnalysisPanel = ({ tools })=>{
     });
 };
 
-const AnalysisPage = ({ headerProps, footerProps, tools })=>{
-    return /*#__PURE__*/ jsx(NavPageLayout, {
+const AnalysisPage = ({ headerProps, footerProps, tools, sections, classNames })=>{
+    return /*#__PURE__*/ jsxs(NavPageLayout, {
         headerProps,
         footerProps,
         headerData: {
@@ -17610,9 +17816,21 @@ const AnalysisPage = ({ headerProps, footerProps, tools })=>{
             content: 'Analysis Center',
             key: 'gen3-analysis-center'
         },
-        children: /*#__PURE__*/ jsx(AnalysisPanel, {
-            tools: tools
-        })
+        children: [
+            !tools && !sections && /*#__PURE__*/ jsx(Center, {
+                className: "mt-20",
+                children: /*#__PURE__*/ jsx(ErrorCard, {
+                    message: "No tools or sections found"
+                })
+            }),
+            tools && /*#__PURE__*/ jsx(AnalysisPanel, {
+                tools: tools
+            }),
+            sections && /*#__PURE__*/ jsx(AnalysisCenterWithSections, {
+                sections: sections,
+                classNames: classNames
+            })
+        ]
     });
 };
 
@@ -17626,11 +17844,10 @@ const AnalysisPageGetServerSideProps = async ()=>{
             }
         };
     } catch (err) {
-        console.error(err);
+        console.warn(err);
         return {
             props: {
-                ...await getNavPageLayoutPropsFromConfig(),
-                tools: []
+                ...await getNavPageLayoutPropsFromConfig()
             }
         };
     }
@@ -20792,5 +21009,5 @@ async function credentialsLogout(req, res) {
     res.redirect(307, '/');
 }
 
-export { AISearchPageGetServerSideProps, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, convertMinutesToMilliseconds, convertSecondsToMilliseconds, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
+export { AISearchPageGetServerSideProps, ActionButton, AdminAuthZPageGetServerSideProps, AiSearch, AISearchPage as AiSearchPage, AnalysisCenter, AnalysisCenterWithSections, AnalysisEditorPage, AnalysisEditorPageGetServerSideProps, AnalysisPage, AnalysisPageGetServerSideProps, AuthzPage, BaseModal, Charts, CohortBuilder, CollapsableSidebar, ColorThemePage, ColorThemePageGetServerSideProps, ContentSource, CreateCredentialsAPIKeyModal, CrosswalkPage, CrosswalkPageGetServerSideProps, Custom404Page, DataLibraryPage, DataLibraryPageGetServerSideProps, DictionaryPage, DictionaryPageGetServerSideProps, DiscoveryCellRendererFactory, DiscoveryProvider as DiscoveryConfigProvider, DiscoveryIndexPanel, DiscoveryPage, DiscoveryPageGetServerSideProps, DiscoveryRowRendererFactory, DropdownButton, EnumFacetChart, ErrorCard, ExplorerPage, ExplorerPageGetServerSideProps, ExplorerPageGetServerSidePropsForConfigId, ExplorerTableCellRendererFactory, ExplorerTableDetailsPanelFactory, FirstTimeModal, Footer, Gen3Button, Gen3ButtonReverse, Gen3Link, Gen3ModalsProvider, Gen3Provider, GqlQueryEditor$1 as GqlQueryEditor, Header, HoverLink, LandingPage, LandingPageGetStaticProps, LoginButton$1 as LoginButton, LoginPage, LoginPageGetServerSideProps, LoginPanel, LoginProvidersPanel, MinutesToMilliseconds, NavPageLayout, NavigationBar, NavigationButton, NoAccessModal, NotebookLitePage, NotebookLitePageGetStaticProps, ProfilePage, ProfilePageGetServerSideProps, ProfileProvider, ProtectedContent, QueryPage, QueryPageGetServerSideProps, ReactECharts, ResourcesFilters, SPECIAL_CASE_FIELDS, SessionExpiredModal, StudyGroup, SubmissionPage, SubmissionPageGetServerSideProps, TagCloud, TailwindConfig, TopBar, UploadJSONButton, User, Workspace, WorkspaceNoAccessPage, WorkspaceNoAccessPageServerSideProps, WorkspacePage, WorkspacePageGetServerSideProps, capitalize, computeRowSpan, convertMinutesToMilliseconds, convertSecondsToMilliseconds, create10ColorAccessibleContrast, create10ColorPallet, createMantineTheme, credentialsLogin, credentialsLogout, extractObjectKey, focusStyles, getCurrentUnixTimestamp, getNavPageLayoutPropsFromConfig, getParamsValueAsString, getTagInfo, hasOwnProperty, isArrayOfString, isPropertyKey, isTextTransform$1 as isTextTransform, processLabel$1 as processLabel, processRangeKeyLabel, registerCohortBuilderDefaultPreviewRenderers, registerCohortDiscoveryApp, registerCohortSimilarityApp, registerDefaultDiscoveryDataLoaders, registerDiscoveryDefaultCellRenderers, registerDiscoveryDefaultStudyPreviewRenderers, registerExplorerDefaultCellRenderers, registerMetadataSchemaApp, removeKey$1 as removeKey, resourcePathFromProjectID, sessionLogout, sessionToken, stripTrailingSlash, toDisplayName, truncateString, unixTimeToString, useDiscoveryContext, userHasMethodForServiceOnResource$1 as userHasMethodForServiceOnResource };
 //# sourceMappingURL=index.js.map