@gen3/frontend 0.10.84 → 0.10.86

package/dist/cjs/index.js

@@ -11954,18 +11954,35 @@ const Workspace = ({ config })=>{
 
 const TextDescription = ({ description })=>{
     const [extend, setExtend] = React.useState(false);
+    const textRef = React.useRef(null);
+    const [isClamped, setClamped] = React.useState(false);
+    React.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__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             !extend ? /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                ref: textRef,
+                size: "sm",
                 lineClamp: 4,
                 children: description
             }) : /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                size: "sm",
                 children: description
             }),
-            /*#__PURE__*/ jsxRuntime.jsx("button", {
+            isClamped && /*#__PURE__*/ jsxRuntime.jsx("button", {
                 onClick: ()=>setExtend((extend)=>!extend),
                 children: /*#__PURE__*/ jsxRuntime.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',
                         ' ',
@@ -11980,6 +11997,90 @@ const TextDescription = ({ description })=>{
     });
 };
 
+const AnalysisCard = ({ title, description, type, icon, image, hasDemo, loginRequired, href })=>{
+    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"
+                            })
+                        }),
+                        /*#__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",
+                            children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
+                                description: description
+                            })
+                        }),
+                        /*#__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: `Run ${type === 'application' ? 'App' : 'Notebook'}`
+                                    }),
+                                    hasDemo && /*#__PURE__*/ jsxRuntime.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] = React.useState({
         type: '',
@@ -12049,91 +12150,158 @@ const AnalysisCenter = ({ tools, showFilterAndSort = false })=>{
                 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",
                     children: tools.map(({ title, description, type, icon, image, hasDemo, loginRequired, href }, key)=>{
-                        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
-                            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "rounded-sm bg-base-max",
+                        return /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsxs(core$1.Stack, {
+        gap: "xs",
+        classNames: {
+            root: 'rounded-lg border-3 border-contrast bg-base-max h-full'
+        },
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "rounded-t-lg bg-secondary border-b-4 border-accent-warm h-12"
+            }),
+            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: "flex relative -mt-10 z-10 p-2 max-w-90",
+                children: /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx(core$1.Image, {
+                        component: Image,
+                        src: `${icon}`,
+                        alt: `${title} logo`,
+                        fill: true,
+                        fit: "cover",
+                        radius: "lg"
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex flex-col ml-2 px-4 pb-2 h-full justify-between",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex flex-col",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                fw: "bold",
+                                classNames: {
+                                    root: 'font-header sm:text-xl lg:text-2xl'
+                                },
+                                children: title
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Text, {
+                                size: "md",
+                                fw: "semibold",
+                                c: "base-contrast.5",
                                 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"
-                                                })
-                                            }),
-                                            /*#__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",
-                                                children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
-                                                    description: description
-                                                })
-                                            }),
-                                            /*#__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: `Run ${type === 'application' ? 'App' : 'Notebook'}`
-                                                        }),
-                                                        hasDemo && /*#__PURE__*/ jsxRuntime.jsx("button", {
-                                                            className: "ml-2 p-1.5 rounded-sm text-sm font-semibold",
-                                                            children: "Demo"
-                                                        })
-                                                    ]
-                                                })
-                                            })
-                                        ]
-                                    })
+                                    count?.toLocaleString(),
+                                    " ",
+                                    countUnits
                                 ]
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "py-2 min-h-24 h-full",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(TextDescription, {
+                                    description: description
+                                })
                             })
-                        }, key);
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                        className: "mb-4",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Button, {
+                                color: "primary.4",
+                                children: [
+                                    "Run ",
+                                    type === 'application' ? 'App' : 'Notebook'
+                                ]
+                            }),
+                            hasDemo && /*#__PURE__*/ jsxRuntime.jsx(core$1.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 = React.useMemo(()=>sections.map((section)=>{
+            const sectionClassnames = mergeDefaultTailwindClassnames(mergedGlobalClassnames, section.classNames ?? {});
+            return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                gap: "xs",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                        classNames: {
+                            root: sectionClassnames['title']
+                        },
+                        children: section.label
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                        size: "lg",
+                        classNames: {
+                            root: sectionClassnames['divider']
+                        }
+                    }),
+                    /*#__PURE__*/ jsxRuntime.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__*/ jsxRuntime.jsx("div", {
+                                children: /*#__PURE__*/ jsxRuntime.jsx(AnalysisCardCompact, {
+                                    ...tool
+                                })
+                            }, tool.title);
+                        })
+                    })
+                ]
+            }, section.label);
+        }), [
+        sections
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+        children: sectionPanels
     });
 };
 
@@ -17659,8 +17827,8 @@ const AnalysisPanel = ({ tools })=>{
     });
 };
 
-const AnalysisPage = ({ headerProps, footerProps, tools })=>{
-    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+const AnalysisPage = ({ headerProps, footerProps, tools, sections, classNames })=>{
+    return /*#__PURE__*/ jsxRuntime.jsxs(NavPageLayout, {
         headerProps,
         footerProps,
         headerData: {
@@ -17668,9 +17836,21 @@ const AnalysisPage = ({ headerProps, footerProps, tools })=>{
             content: 'Analysis Center',
             key: 'gen3-analysis-center'
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(AnalysisPanel, {
-            tools: tools
-        })
+        children: [
+            !tools && !sections && /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+                className: "mt-20",
+                children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                    message: "No tools or sections found"
+                })
+            }),
+            tools && /*#__PURE__*/ jsxRuntime.jsx(AnalysisPanel, {
+                tools: tools
+            }),
+            sections && /*#__PURE__*/ jsxRuntime.jsx(AnalysisCenterWithSections, {
+                sections: sections,
+                classNames: classNames
+            })
+        ]
     });
 };
 
@@ -17684,11 +17864,10 @@ const AnalysisPageGetServerSideProps = async ()=>{
             }
         };
     } catch (err) {
-        console.error(err);
+        console.warn(err);
         return {
             props: {
-                ...await getNavPageLayoutPropsFromConfig(),
-                tools: []
+                ...await getNavPageLayoutPropsFromConfig()
             }
         };
     }
@@ -20856,6 +21035,7 @@ exports.AdminAuthZPageGetServerSideProps = AdminAuthZPageGetServerSideProps;
 exports.AiSearch = AiSearch;
 exports.AiSearchPage = AISearchPage;
 exports.AnalysisCenter = AnalysisCenter;
+exports.AnalysisCenterWithSections = AnalysisCenterWithSections;
 exports.AnalysisEditorPage = AnalysisEditorPage;
 exports.AnalysisEditorPageGetServerSideProps = AnalysisEditorPageGetServerSideProps;
 exports.AnalysisPage = AnalysisPage;