@gen3/frontend 0.11.18 → 0.11.20

package/dist/esm/index.js

@@ -2166,6 +2166,36 @@ const processRangeKeyLabel = (key)=>{
     }, {});
 };
 
+const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
+    const [showTooltip, setShowTooltip] = useState(false);
+    return /*#__PURE__*/ jsx(Tooltip, {
+        label: label,
+        disabled: !showTooltip,
+        position: "top-start",
+        offset: 5,
+        multiline: true,
+        withArrow: true,
+        arrowOffset: 20,
+        classNames: {
+            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
+            arrow: 'bg-base-min bg-opacity-90'
+        },
+        children: /*#__PURE__*/ jsx("div", {
+            className: `${className} truncate ... `,
+            ref: (el)=>{
+                if (el) {
+                    if (el.clientWidth < el.scrollWidth) {
+                        setShowTooltip(true);
+                    } else {
+                        setShowTooltip(false);
+                    }
+                }
+            },
+            children: children
+        })
+    });
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 function DefaultItemRenderer(_props) {
     return /*#__PURE__*/ jsx("span", {
@@ -2652,16 +2682,25 @@ const LegendRows = ({ data })=>{
     const limitedRows = moreThanMaxRows ? data.slice(0, MAX_LEGEND_ROWS) : data;
     return limitedRows.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
             children: [
-                /*#__PURE__*/ jsxs(Table.Td, {
-                    children: [
-                        /*#__PURE__*/ jsx(ColorSwatch, {
-                            className: "inline-block mr-2 align-middle",
-                            size: "1em",
-                            radius: "xs",
-                            color: chartColors?.[elIndex % chartColors.length] || ''
-                        }),
-                        element.key
-                    ]
+                /*#__PURE__*/ jsx(Table.Td, {
+                    children: /*#__PURE__*/ jsxs("div", {
+                        className: "flex flex-nowrap items-center overflow-hidden",
+                        children: [
+                            /*#__PURE__*/ jsx(ColorSwatch, {
+                                className: "inline-block mr-2 align-middle",
+                                size: "1em",
+                                radius: "xs",
+                                color: chartColors?.[elIndex % chartColors.length] || ''
+                            }),
+                            /*#__PURE__*/ jsx(OverflowTooltippedLabel, {
+                                label: element.key.toString(),
+                                children: /*#__PURE__*/ jsx("span", {
+                                    className: "text-sm font-medium font-content",
+                                    children: element.key.toString()
+                                })
+                            })
+                        ]
+                    })
                 }),
                 /*#__PURE__*/ jsx(Table.Td, {
                     className: "text-right",
@@ -2699,25 +2738,35 @@ const LegendOverflow = ({ chart, data, chartTitle, counts })=>{
                                 children: /*#__PURE__*/ jsx(Table, {
                                     withRowBorders: false,
                                     classNames: {
-                                        table: '',
+                                        table: 'w-full table-fixed',
                                         td: 'p-1 leading-3'
                                     },
                                     children: /*#__PURE__*/ jsx(Table.Tbody, {
                                         children: data.map((element, elIndex)=>/*#__PURE__*/ jsxs(Table.Tr, {
+                                                className: `${elIndex === 0 ? 'overflow-hidden text-ellipsis whitespace-nowrap' : 'last:text-right'}`,
                                                 children: [
-                                                    /*#__PURE__*/ jsxs(Table.Td, {
-                                                        children: [
-                                                            /*#__PURE__*/ jsx(ColorSwatch, {
-                                                                className: "inline-block mr-2 align-middle",
-                                                                size: "1em",
-                                                                radius: "xs",
-                                                                color: chartColors?.[elIndex % chartColors.length] || ''
-                                                            }),
-                                                            element.key
-                                                        ]
+                                                    /*#__PURE__*/ jsx(Table.Td, {
+                                                        children: /*#__PURE__*/ jsxs("div", {
+                                                            className: "flex flex-nowrap items-center",
+                                                            children: [
+                                                                /*#__PURE__*/ jsx(ColorSwatch, {
+                                                                    className: "inline-block mr-2 align-middle",
+                                                                    size: "1em",
+                                                                    radius: "xs",
+                                                                    color: chartColors?.[elIndex % chartColors.length] || ''
+                                                                }),
+                                                                /*#__PURE__*/ jsx(OverflowTooltippedLabel, {
+                                                                    label: element.key.toString(),
+                                                                    children: /*#__PURE__*/ jsx("span", {
+                                                                        className: "text-sm font-medium font-content",
+                                                                        children: element.key.toString()
+                                                                    })
+                                                                })
+                                                            ]
+                                                        })
                                                     }),
                                                     /*#__PURE__*/ jsx(Table.Td, {
-                                                        className: "text-right",
+                                                        className: "w-[10%] text-right",
                                                         children: element.count
                                                     })
                                                 ]
@@ -2795,31 +2844,35 @@ const Charts = ({ charts, data, counts, isSuccess, numCols = DEFAULT_COLS, style
                         inheritPadding: true,
                         py: "xs",
                         withBorder: style === 'box',
-                        children: /*#__PURE__*/ jsxs(Table, {
-                            withRowBorders: false,
-                            classNames: {
-                                td: 'p-1 leading-3',
-                                th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
-                                thead: 'border-b',
-                                tbody: "before:content-[''] before:block before:p-1"
-                            },
-                            children: [
-                                /*#__PURE__*/ jsx(Table.Thead, {
-                                    children: /*#__PURE__*/ jsx(Table.Tr, {
-                                        children: dataKeys.map((el, i)=>/*#__PURE__*/ jsx(Table.Th, {
-                                                className: "last:text-right",
-                                                children: charts[field]?.dataLabels?.[el] || /*#__PURE__*/ jsx(React__default.Fragment, {
-                                                    children: " "
-                                                })
-                                            }, i))
-                                    })
-                                }),
-                                /*#__PURE__*/ jsx(Table.Tbody, {
-                                    children: data === undefined ? '' : /*#__PURE__*/ jsx(LegendRows, {
-                                        data: data[field]
+                        children: /*#__PURE__*/ jsx("div", {
+                            className: "w-full",
+                            children: /*#__PURE__*/ jsxs(Table, {
+                                withRowBorders: false,
+                                classNames: {
+                                    table: 'w-full table-fixed',
+                                    td: 'p-1 leading-3',
+                                    th: 'p-1 leading-3 [text-shadow:_1px_0_#000]',
+                                    thead: 'border-b',
+                                    tbody: "before:content-[''] before:block before:p-1"
+                                },
+                                children: [
+                                    /*#__PURE__*/ jsx(Table.Thead, {
+                                        children: /*#__PURE__*/ jsx(Table.Tr, {
+                                            children: dataKeys.map((el, i)=>/*#__PURE__*/ jsx(Table.Th, {
+                                                    className: `${i === 0 ? 'w-[90%] overflow-hidden text-ellipsis whitespace-nowrap' : 'last:text-right'}`,
+                                                    children: charts[field]?.dataLabels?.[el] || /*#__PURE__*/ jsx(React__default.Fragment, {
+                                                        children: " "
+                                                    })
+                                                }, i))
+                                        })
+                                    }),
+                                    /*#__PURE__*/ jsx(Table.Tbody, {
+                                        children: data === undefined ? '' : /*#__PURE__*/ jsx(LegendRows, {
+                                            data: data[field]
+                                        })
                                     })
-                                })
-                            ]
+                                ]
+                            })
                         })
                     }),
                     showLegends && moreThanMaxRows && /*#__PURE__*/ jsx(Card.Section, {
@@ -3850,36 +3903,6 @@ flex items-start justify-between items-center flex-nowrap bg-secondary px-1.5 ro
     });
 };
 
-const OverflowTooltippedLabel = ({ children, label, className = 'flex-grow font-heading text-md pt-0.5' })=>{
-    const [showTooltip, setShowTooltip] = useState(false);
-    return /*#__PURE__*/ jsx(Tooltip, {
-        label: label,
-        disabled: !showTooltip,
-        position: "top-start",
-        offset: 5,
-        multiline: true,
-        withArrow: true,
-        arrowOffset: 20,
-        classNames: {
-            tooltip: 'bg-base-min bg-opacity-90 text-base-contrast-min shadow-lg font-content font-medium text-xs',
-            arrow: 'bg-base-min bg-opacity-90'
-        },
-        children: /*#__PURE__*/ jsx("div", {
-            className: `${className} truncate ... `,
-            ref: (el)=>{
-                if (el) {
-                    if (el.clientWidth < el.scrollWidth) {
-                        setShowTooltip(true);
-                    } else {
-                        setShowTooltip(false);
-                    }
-                }
-            },
-            children: children
-        })
-    });
-};
-
 const FacetEnumList = ({ field, facetName, hooks, valueLabel, isSettings = false, isFacetView = true, isSearching = false, showPercent = false, hideIfEmpty = false, showSorting = true, sort = 'value-dsc', moveValuesToBottom = [], excludeValues = [] })=>{
     const [isGroupExpanded, setIsGroupExpanded] = useState(false);
     const cardRef = useRef(null);
@@ -5776,6 +5799,20 @@ const FooterRowComponent = ({ item, rowClassname })=>{
         case 'Icon':
             {
                 const logo = item[itemType];
+                if (logo.href) {
+                    return /*#__PURE__*/ jsx("a", {
+                        href: logo.href,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        className: className,
+                        children: /*#__PURE__*/ jsx(Image, {
+                            src: `${logo.logo}`,
+                            width: logo.width,
+                            height: logo.height,
+                            alt: logo.description
+                        })
+                    }, `icons-${logo.logo}`);
+                }
                 return /*#__PURE__*/ jsx(Image, {
                     src: `${logo.logo}`,
                     width: logo.width,
@@ -7211,10 +7248,16 @@ const createFieldRendererElement = (field, resource)=>{
         json: resource,
         path: field.field
     });
-    if (resourceFieldValue === undefined || resourceFieldValue === null) {
+    if (!isArray(resourceFieldValue) || resourceFieldValue.length == 0 || resourceFieldValue[0] === null) {
         if (field.includeIfNotAvailable === false) return null;
-        if (field.valueIfNotAvailable) resourceFieldValue = field.valueIfNotAvailable;
-    } else resourceFieldValue = resourceFieldValue.length > 0 ? resourceFieldValue[0] : '';
+        if (field.valueIfNotAvailable) {
+            resourceFieldValue = field.valueIfNotAvailable;
+        } else {
+            resourceFieldValue = '';
+        }
+    } else {
+        resourceFieldValue = resourceFieldValue[0];
+    }
     const label = field.includeLabel === undefined || field?.includeLabel ? field.name : undefined;
     const studyFieldRenderer = StudyDetailsRenderer(field.contentType, field?.renderer ?? 'default');
     switch(field.contentType){
@@ -7471,17 +7514,17 @@ const SinglePageStudyDetailsPanel = ({ data, studyConfig, authorization })=>{
                 children: "Study Details Panel not configured"
             });
         } else {
-            return studyConfig?.fieldsToShow.map((field)=>{
+            return studyConfig?.fieldsToShow.map((fieldToShow)=>{
                 return /*#__PURE__*/ jsx("div", {
-                    className: `px-2 ${field.groupWidth == 'full' || field.groupWidth === undefined ? 'w-full' : 'w-1/2'}`,
+                    className: `px-2 ${fieldToShow.groupWidth == 'full' || fieldToShow.groupWidth === undefined ? 'w-full' : 'w-1/2'}`,
                     children: /*#__PURE__*/ jsxs("div", {
                         className: "flex flex-col",
                         children: [
-                            field?.groupName ? /*#__PURE__*/ jsx("div", {
+                            fieldToShow?.groupName ? /*#__PURE__*/ jsx("div", {
                                 className: "text-lg font-bold",
-                                children: field.groupName
+                                children: fieldToShow.groupName
                             }) : null,
-                            field.fields.map((field)=>{
+                            fieldToShow.fields.map((field)=>{
                                 const element = createFieldRendererElement(field, data);
                                 if (element !== null) {
                                     return /*#__PURE__*/ jsx("div", {
@@ -7492,7 +7535,7 @@ const SinglePageStudyDetailsPanel = ({ data, studyConfig, authorization })=>{
                             })
                         ]
                     })
-                }, `${field.fields.join('-')}-details`);
+                }, `${fieldToShow.fields.join('-')}-details`);
             });
         }
     }, [
@@ -11396,6 +11439,48 @@ const DetailsModal = ({ title, id, row, classNames, panel, panelProps, onClose,
     });
 };
 
+const DetailsDrawer = ({ id, title, panel, panelProps })=>{
+    const [opened, { open, close }] = useDisclosure(id !== undefined);
+    useEffect(()=>{
+        if (id !== undefined) open();
+        else close();
+    }, [
+        close,
+        id,
+        open
+    ]);
+    return /*#__PURE__*/ jsxs(Drawer.Root, {
+        opened: opened,
+        onClose: close,
+        size: "50%",
+        position: "right",
+        children: [
+            /*#__PURE__*/ jsx(Drawer.Overlay, {
+                opacity: 0.5,
+                blur: 4
+            }),
+            /*#__PURE__*/ jsxs(Drawer.Content, {
+                children: [
+                    /*#__PURE__*/ jsx(Drawer.Header, {
+                        children: /*#__PURE__*/ jsx(Button, {
+                            leftSection: /*#__PURE__*/ jsx(MdKeyboardDoubleArrowLeft, {}),
+                            onClick: close,
+                            variant: "outline",
+                            children: "Back"
+                        })
+                    }),
+                    /*#__PURE__*/ jsx(Drawer.Body, {
+                        children: panel({
+                            id: id,
+                            ...panelProps
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+};
+
 // TODO need to type this
 const RenderArrayCell = ({ cell })=>{
     const value = cell.getValue();
@@ -11866,7 +11951,10 @@ const DEFAULT_PAGE_LIMIT = 10000;
         pageIndex: 0,
         pageSize: 10
     });
-    const DetailsComponent = DetailsModal;
+    const DetailsComponent = useMemo(()=>{
+        if (!tableConfig?.detailsConfig || !tableConfig?.detailsConfig?.panel || tableConfig?.detailsConfig?.mode === 'none') return null;
+        return tableConfig?.detailsConfig?.panelContainer === 'drawer' ? DetailsDrawer : DetailsModal;
+    }, []);
     const [sorting, setSorting] = useState([]);
     const [rowSelection, setRowSelection] = useState({});
     const [selectedRow, setSelectedRow] = useState(undefined);
@@ -11959,6 +12047,12 @@ const DEFAULT_PAGE_LIMIT = 10000;
         onPaginationChange: setPagination,
         onSortingChange: setSorting,
         enableTopToolbar: false,
+        enableExpandAll: false,
+        displayColumnDefOptions: {
+            'mrt-row-expand': {
+                enableHiding: true
+            }
+        },
         enableExpanding: !!tableConfig?.detailsConfig,
         getRowId: getRowId(tableConfig),
         rowCount: totalRowCount,
@@ -11968,6 +12062,16 @@ const DEFAULT_PAGE_LIMIT = 10000;
         localization: {
             rowsPerPage: limitLabel
         },
+        // mantineExpandAllButtonProps: {
+        //   style: {
+        //     visibility: 'hidden',
+        //   },
+        // },
+        // mantineExpandButtonProps: {
+        //   style: {
+        //     visibility: 'hidden',
+        //   },
+        // },
         mantineTableProps: {
             style: {
                 backgroundColor: 'var(--mantine-color-base-1)',
@@ -11999,7 +12103,10 @@ const DEFAULT_PAGE_LIMIT = 10000;
             showProgressBars: isFetching,
             showAlertBanner: isError,
             density: 'xs',
-            rowSelection: rowSelection
+            rowSelection: rowSelection,
+            columnVisibility: {
+                'mrt-row-expand': false
+            }
         },
         mantineTableBodyRowProps: tableConfig.detailsConfig?.mode === 'click' ? ({ row })=>({
                 onClick: ()=>{
@@ -12034,7 +12141,7 @@ const DEFAULT_PAGE_LIMIT = 10000;
     return /*#__PURE__*/ jsx(React__default.Fragment, {
         children: /*#__PURE__*/ jsxs(StudyProvider, {
             children: [
-                Object.keys(rowSelection).length > 0 ? /*#__PURE__*/ jsx(DetailsComponent, {
+                DetailsComponent && /*#__PURE__*/ jsx(DetailsComponent, {
                     title: tableConfig?.detailsConfig?.title,
                     id: Object.keys(rowSelection).length > 0 ? Object.keys(rowSelection).at(0) : undefined,
                     row: selectedRow,
@@ -12047,7 +12154,7 @@ const DEFAULT_PAGE_LIMIT = 10000;
                         ...tableConfig?.detailsConfig?.params ?? {},
                         accessibility
                     }
-                }) : null,
+                }),
                 /*#__PURE__*/ jsx("div", {
                     className: "inline-block overflow-x-scroll",
                     children: /*#__PURE__*/ jsx(MantineReactTable, {
@@ -16307,7 +16414,7 @@ const CohortManagerPanel = ({ indexResources, remoteSupportService, size = 'md'
     ]);
     useDeepCompareEffect(()=>{
         if (!currentCohort) {
-            setCurrentCohortId(allCohorts[0].id);
+            appDispatch(setCurrentCohortId(allCohorts[0].id));
         }
     }, [
         allCohorts,