@gen3/frontend 0.11.32 → 0.11.33

package/dist/cjs/index.js

@@ -46,6 +46,11 @@ var MiniSearch = require('minisearch');
 var uniq = require('lodash/uniq');
 var sum = require('lodash/sum');
 var lu = require('react-icons/lu');
+var filesize = require('filesize');
+var core$2 = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
+var modifiers = require('@dnd-kit/modifiers');
 var Cookies = require('universal-cookie');
 var GraphiQL = require('graphiql');
 var fs = require('fs');
@@ -57,7 +62,6 @@ var toolkit = require('@reduxjs/toolkit');
 var createWebStorage = require('redux-persist/lib/storage/createWebStorage');
 var dynamic = require('next/dynamic');
 var YAML = require('yaml');
-var filesize = require('filesize');
 var dnd = require('@hello-pangea/dnd');
 var plugin = require('tailwindcss/plugin');
 var cookie = require('cookie');
@@ -550,6 +554,48 @@ const create10ColorAccessibleContrast = (pallet)=>{
  * @param {number} seconds - The time in seconds to be converted.
  * @returns {number} The equivalent time in milliseconds.
  */ const convertSecondsToMilliseconds = (seconds)=>seconds * 1000;
+// Using the built-in Date object
+const getCurrentTimestamp = ()=>{
+    return Date.now(); // Returns milliseconds since Unix epoch
+};
+// Get a readable timestamp for logging/display
+const getFormattedTimestamp = ()=>{
+    return new Date().toISOString();
+};
+// Compare two timestamps and get difference in milliseconds
+const getTimeDifferenceMs = (startTime, endTime = Date.now())=>{
+    return endTime - startTime;
+};
+// Check if time difference is greater than specified minutes
+const isTimeGreaterThan = (startTime, minutes)=>{
+    const diffMs = getTimeDifferenceMs(startTime);
+    const diffMinutes = diffMs / (1000 * 60);
+    return diffMinutes > minutes;
+};
+// Get human-readable duration
+const getReadableDuration = (milliseconds)=>{
+    const seconds = Math.floor(milliseconds / 1000);
+    const minutes = Math.floor(seconds / 60);
+    const hours = Math.floor(minutes / 60);
+    if (hours > 0) {
+        return `${hours}h ${minutes % 60}m ${seconds % 60}s`;
+    }
+    if (minutes > 0) {
+        return `${minutes}m ${seconds % 60}s`;
+    }
+    return `${seconds}s`;
+};
+// Example usage:
+const measureExecutionTime = async (func)=>{
+    const startTime = getCurrentTimestamp();
+    await func();
+    const duration = getTimeDifferenceMs(startTime);
+    return getReadableDuration(duration);
+};
+// Performance monitoring with high-resolution timestamps
+const getHighResolutionTimestamp = ()=>{
+    return performance.now(); // More precise than Date.now() for performance measurements
+};
 const MinutesToMilliseconds = (minutes)=>minutes * 60 * 1000;
 
 const convertPathsToTree = (paths)=>{
@@ -1246,6 +1292,14 @@ const EmptyTableMessage = ({ message })=>{
     });
 };
 
+const MessagePage = ({ children })=>{
+    // place children in center of div that is 1/2 the visible height
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "flex justify-center items-center w-full h-vh",
+        children: children
+    });
+};
+
 const LoginProviderMultipleItems = ({ provider, handleLoginSelected })=>{
     const [value, setValue] = React.useState(null);
     return /*#__PURE__*/ jsxRuntime.jsxs("div", {
@@ -1709,12 +1763,20 @@ const filterRedirect = (redirect)=>{
     } else {
         redirectPath = redirect ?? '/';
     }
-    return core.GEN3_REDIRECT_URL ? `${core.GEN3_REDIRECT_URL}/${redirectPath}` : redirectPath;
+    if (!core.GEN3_REDIRECT_URL) {
+        return redirectPath;
+    }
+    // Remove trailing slash from base URL and leading slash from path
+    const baseUrl = core.GEN3_REDIRECT_URL.replace(/\/+$/, '');
+    const cleanPath = redirectPath.replace(/^\/+/, '');
+    // Join with a single slash, ensuring we don't create double slashes
+    return cleanPath ? `${baseUrl}/${cleanPath}` : baseUrl;
 };
 const LoginPanel = (loginConfig)=>{
     const { image, topContent, bottomContent } = loginConfig;
     const router$1 = router.useRouter();
-    const { query: { referer } } = router$1;
+    const { query: { referer: refererQuery, redirect: redirectQuery } } = router$1;
+    const referer = redirectQuery || refererQuery; // either referer or redirect query param
     const handleFenceLoginSelected = React.useCallback(async (loginURL)=>{
         router$1.push(`${appendParameterToUrl(loginURL, 'redirect', filterRedirect(referer))}`).catch((e)=>{
             notifications.showNotification({
@@ -5047,61 +5109,65 @@ const DropdownPanel = ({ index, filters, tabTitle, facetDefinitions, facetDataHo
                 onChange: onAccessChange,
                 accessLevel: accessLevel
             }) : null,
-            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
-                className: "bg-base-max py-4 px-2 h-full w-full",
-                children: [
-                    Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
-                        gap: "xs",
-                        justify: "space-between",
-                        children: [
-                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
-                                className: "flex items-center space-x-1",
-                                children: [
-                                    /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                                        icon: "gen3:share",
-                                        height: 16,
-                                        width: 16,
-                                        color: theme.colors.accent[4]
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
-                                        size: "sm",
-                                        children: "Set the shared filters for all"
-                                    }),
-                                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
-                                        label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
-                                        position: "top",
-                                        withArrow: true,
-                                        children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
-                                            icon: "gen3:info",
-                                            height: 12,
-                                            width: 12,
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.ScrollArea, {
+                type: "auto",
+                className: "flex-1 min-h-0 w-full",
+                children: /*#__PURE__*/ jsxRuntime.jsxs(core$1.Stack, {
+                    className: "bg-base-max py-4 px-2 h-screen w-full",
+                    children: [
+                        Object.keys(sharedFilters).length > 0 && /*#__PURE__*/ jsxRuntime.jsxs(core$1.Group, {
+                            gap: "xs",
+                            justify: "space-between",
+                            children: [
+                                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                    className: "flex items-center space-x-1",
+                                    children: [
+                                        /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                            icon: "gen3:share",
+                                            height: 16,
+                                            width: 16,
                                             color: theme.colors.accent[4]
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                                            size: "sm",
+                                            children: "Set the shared filters for all"
+                                        }),
+                                        /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                            label: "If enabled any filter set on this tab will be applied to every tab where occurs.",
+                                            position: "top",
+                                            withArrow: true,
+                                            children: /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                                                icon: "gen3:info",
+                                                height: 12,
+                                                width: 12,
+                                                color: theme.colors.accent[4]
+                                            })
                                         })
-                                    })
-                                ]
-                            }),
-                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
-                                checked: shareFilters,
-                                onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
-                            })
-                        ]
-                    }),
-                    filters.tabs.length > 1 && /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
-                        classNames: {
-                            options: 'border-1 border-base-dark',
-                            option: 'hover:bg-primary-lightest'
-                        },
-                        withCheckIcon: false,
-                        data: items,
-                        value: value === null ? '0' : value,
-                        onChange: setValue
-                    }),
-                    Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
-                        fields: fields,
-                        dataFunctions: facetDataHooks,
-                        valueLabel: tabTitle
-                    }) : null
-                ]
+                                    ]
+                                }),
+                                /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                                    checked: shareFilters,
+                                    onChange: (event)=>handleSharedFiltersChange(event.currentTarget.checked)
+                                })
+                            ]
+                        }),
+                        filters.tabs.length > 1 && /*#__PURE__*/ jsxRuntime.jsx(core$1.Select, {
+                            classNames: {
+                                options: 'border-1 border-base-dark',
+                                option: 'hover:bg-primary-lightest'
+                            },
+                            withCheckIcon: false,
+                            data: items,
+                            value: value === null ? '0' : value,
+                            onChange: setValue
+                        }),
+                        Object.keys(facetDefinitions).length > 0 ? /*#__PURE__*/ jsxRuntime.jsx(FiltersPanel, {
+                            fields: fields,
+                            dataFunctions: facetDataHooks,
+                            valueLabel: tabTitle
+                        }) : null
+                    ]
+                })
             })
         ]
     });
@@ -8187,6 +8253,7 @@ const DataLibraryActionButton = /*#__PURE__*/ React.forwardRef(({ label = undefi
 DataLibraryActionButton.displayName = 'DataLibraryActionButton';
 
 const MANIFEST_FILENAME = 'manifest.json';
+const XL_BREAKPOINT = 1280;
 
 /**
  * Determines the disabled state and the reason for disabling based on authentication status,
@@ -10511,6 +10578,52 @@ const DetailsDrawer = ({ id, title, panel, panelProps })=>{
     });
 };
 
+// TODO: refine this to make more general
+const extractProgramAndProjectNames = (path)=>{
+    // Regular expression to match the pattern /programs/{programName}/projects/{projectName}
+    const regex = /\/programs\/([^/]+)\/projects\/([^/]+)/;
+    const match = path.match(regex);
+    if (match) {
+        return {
+            programName: match[1],
+            projectName: match[2]
+        };
+    }
+    return {
+        programName: null,
+        projectName: null
+    };
+};
+const isStringToColorTable = (value)=>{
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) {
+        return false;
+    }
+    for(const key in value){
+        if (typeof key !== 'string' || typeof value[key] !== 'string') {
+            return false;
+        }
+    }
+    return true;
+};
+const ProjectAccessCellRenderer = ({ cell }, params)=>{
+    const value = cell.getValue();
+    if (typeof value !== 'string') return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        children: "Bad Value"
+    });
+    const { projectName } = extractProgramAndProjectNames(value);
+    let color = 'primary.4';
+    if (params && isStringToColorTable(params?.colorTable)) {
+        if (projectName) {
+            color = core.ExtractValueFromObject(params.colorTable, projectName, color);
+        }
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Badge, {
+        fullWidth: true,
+        color: color,
+        children: projectName
+    });
+};
+
 // TODO need to type this
 const RenderArrayCell = ({ cell })=>{
     const value = cell.getValue();
@@ -10555,6 +10668,11 @@ const ValueCellRenderer = ({ cell })=>{
         children: cell.getValue()
     });
 };
+const FilesizeRenderer = ({ cell })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx("span", {
+        children: filesize.filesize(cell.getValue())
+    });
+};
 const ArrayCellFunctionCatalog = {
     NegativePositive: RenderArrayCellNegativePositive,
     default: RenderArrayCell
@@ -10576,6 +10694,66 @@ const RenderLinkCell = ({ cell }, ...args)=>{
         })
     });
 };
+const isRenderNextLinkCellWithIconParams = (value)=>{
+    if (typeof value !== 'object' || value === null) {
+        return false;
+    }
+    const obj = value;
+    return (obj.baseURL === undefined || typeof obj.baseURL === 'string') && (obj.icon === undefined || typeof obj.icon === 'string') && (obj.size === undefined || typeof obj.size === 'string') && (obj.linkField === undefined || typeof obj.linkField === 'string');
+};
+const RenderLinkCellWithIcon = ({ cell }, ...args)=>{
+    let baseURL = '';
+    let icon = null;
+    let size = 'sm';
+    let iconHeight = '1em';
+    let linkField = undefined;
+    let classNames = {
+        text: ''
+    };
+    const params = args[0];
+    if (isRenderNextLinkCellWithIconParams(params)) {
+        baseURL = params.baseURL ?? baseURL;
+        if (params.icon) {
+            icon = params.icon;
+        }
+        size = params.size ?? size;
+        iconHeight = params.iconHeight ?? iconHeight;
+        linkField = params.linkField ?? undefined;
+        classNames = params?.classNames ?? {
+            icon: '',
+            text: ''
+        };
+    }
+    let linkURL = `${baseURL}${cell.getValue()}`;
+    if (linkField) {
+        const value = cell.row.original[linkField];
+        if (typeof value === 'string') {
+            linkURL = `${baseURL}${value}`;
+        }
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(Link, {
+        href: linkURL,
+        target: "_blank",
+        rel: "noreferrer",
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-1",
+            children: [
+                icon && /*#__PURE__*/ jsxRuntime.jsx(react.Icon, {
+                    height: iconHeight,
+                    icon: icon
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Text, {
+                    fw: 700,
+                    size: size,
+                    classNames: {
+                        root: classNames?.text
+                    },
+                    children: cell.getValue()
+                })
+            ]
+        })
+    });
+};
 const RenderLinkCellUsingValueMap = ({ cell }, ...args)=>{
     let href = null;
     if (typeof args[0] === 'object' && Object.keys(args[0]).includes('valueToURL')) {
@@ -10608,7 +10786,8 @@ const RenderLinkCellUsingValueMap = ({ cell }, ...args)=>{
 };
 const LinkCellFunctionCatalog = {
     default: RenderLinkCell,
-    linkWithValueMap: RenderLinkCellUsingValueMap
+    linkWithValueMap: RenderLinkCellUsingValueMap,
+    linkWithIcon: RenderLinkCellWithIcon
 };
 let instance$2;
 const ExplorerTableCellRendererFactory = ()=>{
@@ -10621,7 +10800,13 @@ const ExplorerTableCellRendererFactory = ()=>{
 const registerExplorerDefaultCellRenderers = ()=>{
     ExplorerTableCellRendererFactory().registerRendererCatalog({
         value: {
-            default: ValueCellRenderer
+            default: ValueCellRenderer,
+            filesize: FilesizeRenderer
+        }
+    });
+    ExplorerTableCellRendererFactory().registerRendererCatalog({
+        access: {
+            projectAccess: ProjectAccessCellRenderer
         }
     });
     ExplorerTableCellRendererFactory().registerRendererCatalog({
@@ -10661,7 +10846,7 @@ const isRecordAny = (obj)=>{
     return obj !== null && typeof obj === 'object';
 };
 const createTableColumns = (tableConfig)=>{
-    return tableConfig.fields.map((field)=>{
+    const tableColumns = tableConfig.fields.map((field)=>{
         const columnDef = tableConfig?.columns?.[field];
         const cellRendererFunc = columnDef?.type ? ExplorerTableCellRendererFactory().getRenderer(columnDef?.type, columnDef?.cellRenderFunction ?? 'default') : undefined;
         const cellRendererFuncParams = columnDef?.params && isRecordAny(columnDef?.params) ? columnDef?.params : {};
@@ -10673,9 +10858,22 @@ const createTableColumns = (tableConfig)=>{
             accessorFn: columnDef?.accessorPath ? jsonPathAccessor(columnDef.accessorPath) : undefined,
             Cell: cellRendererFunc && columnDef?.params ? (cell)=>cellRendererFunc(cell, cellRendererFuncParams) : cellRendererFunc ? cellRendererFunc : undefined,
             size: columnDef?.width,
-            enableSorting: columnDef?.sortable ?? undefined
+            enableSorting: columnDef?.sortable ?? undefined,
+            visible: columnDef?.visible ?? true,
+            lockVisible: columnDef?.lockVisible ?? false
         };
-    }, []);
+    });
+    const lockedVisibility = tableConfig.fields.reduce((acc, field)=>{
+        const columnDef = tableConfig?.columns?.[field];
+        if (columnDef && columnDef?.lockVisible) {
+            acc[field] = columnDef?.visible ?? true; // assume visible by default
+        }
+        return acc;
+    }, {});
+    return {
+        tableColumns: tableColumns,
+        lockedVisibility: lockedVisibility
+    };
 };
 const createArrayTableColumns = (root, tableConfig)=>{
     return tableConfig.fields.map((field)=>{
@@ -10785,7 +10983,7 @@ const ExpandingSubtable = ({ config, data })=>{
     const [expanded, setExpanded] = React.useState(false);
     const [headerHeight, setHeaderHeight] = React.useState(0);
     const theme = core$1.useMantineTheme();
-    const expandedTableColumns = useDeepCompare.useDeepCompareMemo(()=>{
+    const { tableColumns: expandedTableColumns } = useDeepCompare.useDeepCompareMemo(()=>{
         return createTableColumns(config);
     }, [
         config
@@ -10967,6 +11165,350 @@ const QueryRowDetailsPanel = ({ id, index, tableConfig, accessibility })=>{
     });
 };
 
+function ColumnOrdering({ table, handleColumnOrderingReset, columnOrder, setColumnOrder, noColumnOrdering = [] }) {
+    const [showColumnMenu, setShowColumnMenu] = React.useState(false);
+    const [searchValue, setSearchValue] = React.useState('');
+    const [columesVisible, setColumsnVisible] = React.useState([]);
+    const isBackToDefaults = lodash.isEqual(table.initialState.columnOrder, columnOrder) && lodash.isEqual(table.initialState.columnVisibility, Object.fromEntries(Object.entries(table.getState().columnVisibility).filter(([, value])=>!value)));
+    const sensors = core$2.useSensors(core$2.useSensor(core$2.PointerSensor, {
+        activationConstraint: {
+            distance: 5
+        }
+    }), core$2.useSensor(core$2.KeyboardSensor, {
+        coordinateGetter: sortable.sortableKeyboardCoordinates
+    }));
+    const handleDragEnd = (event)=>{
+        const { active, over } = event;
+        if (active?.id && over?.id && active?.id !== over?.id) {
+            setColumnOrder((items)=>{
+                const oldIndex = items.indexOf(active?.id);
+                const newIndex = items.indexOf(over?.id);
+                return sortable.arrayMove(items, oldIndex, newIndex);
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu, {
+        position: "bottom-end",
+        middlewares: {
+            shift: false,
+            flip: false
+        },
+        onChange: setShowColumnMenu,
+        offset: 0,
+        zIndex: 400,
+        withinPortal: true,
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                label: "Customize Columns",
+                disabled: showColumnMenu,
+                children: /*#__PURE__*/ jsxRuntime.jsx(core$1.Menu.Target, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                        variant: "outline",
+                        size: "lg",
+                        "aria-label": "Customize Columns",
+                        color: "primary",
+                        "data-testid": "button-column-selector-box",
+                        className: `${showColumnMenu && 'border-2 border-primary'} hover:bg-primary hover:text-base-max`,
+                        children: !showColumnMenu ? /*#__PURE__*/ jsxRuntime.jsx(bs.BsList, {
+                            size: "1.5rem",
+                            "aria-hidden": "true"
+                        }) : /*#__PURE__*/ jsxRuntime.jsx(bs.BsX, {
+                            size: "2rem",
+                            "aria-hidden": "true"
+                        })
+                    })
+                })
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Menu.Dropdown, {
+                className: "bg-base-max border-2 border-primary p-2 rounded-md",
+                "data-testid": "column-selector-popover-modal",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        className: "flex justify-between items-center",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                className: "font-bold text-primary-darkest tracking-normal",
+                                children: "Customize Columns"
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+                                label: "Restore defaults",
+                                disabled: isBackToDefaults,
+                                zIndex: 400,
+                                children: /*#__PURE__*/ jsxRuntime.jsx("span", {
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                                        onClick: handleColumnOrderingReset,
+                                        className: isBackToDefaults ? 'invisible' : 'border-0',
+                                        "data-testid": "restore-default-icon",
+                                        "aria-label": "restore default column ordering",
+                                        children: /*#__PURE__*/ jsxRuntime.jsx(fa.FaUndo, {
+                                            size: "1rem"
+                                        })
+                                    })
+                                })
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Divider, {
+                        color: "base.2",
+                        className: "mt-1"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+                        value: searchValue,
+                        onChange: (event)=>setSearchValue(event.currentTarget.value.trim()),
+                        placeholder: "Filter Columns",
+                        "aria-label": "Search input for columns",
+                        leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdSearch, {
+                            "aria-hidden": "true"
+                        }),
+                        className: "mb-2 mt-4",
+                        "data-testid": "textbox-column-selector"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx(core$2.DndContext, {
+                        sensors: sensors,
+                        collisionDetection: core$2.closestCenter,
+                        onDragEnd: handleDragEnd,
+                        modifiers: [
+                            modifiers.restrictToVerticalAxis,
+                            modifiers.restrictToWindowEdges,
+                            modifiers.restrictToParentElement
+                        ],
+                        children: /*#__PURE__*/ jsxRuntime.jsx(sortable.SortableContext, {
+                            items: table.getAllLeafColumns(),
+                            strategy: sortable.verticalListSortingStrategy,
+                            children: /*#__PURE__*/ jsxRuntime.jsx(List, {
+                                columns: table.getAllLeafColumns(),
+                                searchValue: searchValue,
+                                noColumnOrdering: noColumnOrdering
+                            })
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+function List({ columns, searchValue, noColumnOrdering = [] }) {
+    return /*#__PURE__*/ jsxRuntime.jsx("ul", {
+        children: columns.filter((column)=>{
+            if (!noColumnOrdering.includes(column.id)) {
+                return core.humanify({
+                    term: column.id
+                }).toLowerCase().includes(searchValue.toLowerCase());
+            } else {
+                return column.id;
+            }
+        }).map((column, index)=>{
+            return !noColumnOrdering.includes(column.id) ? /*#__PURE__*/ jsxRuntime.jsx(DraggableColumnItem, {
+                column: column,
+                isNotLast: index < columns.length - 1
+            }, column.id) : /*#__PURE__*/ jsxRuntime.jsx("li", {
+                className: "hide"
+            }, column.id);
+        })
+    });
+}
+function DraggableColumnItem({ column, isNotLast }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({
+        id: column.id
+    });
+    const style = {
+        transform: utilities.CSS.Transform.toString(transform),
+        transition
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx("li", {
+        ref: setNodeRef,
+        style: style,
+        ...listeners,
+        className: ` ${isNotLast ? 'mb-2' : ''}`,
+        "data-testid": `column-selector-row-${column.id}`,
+        children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+            ...attributes,
+            role: undefined,
+            className: "flex gap-2 items-center bg-nci-violet-lightest px-1 py-1.5 h-6 cursor-move",
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(md.MdDragIndicator, {
+                    size: "1rem",
+                    className: "text-primary"
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(core$1.Switch, {
+                    labelPosition: "left",
+                    label: typeof column?.columnDef?.header === 'string' ? column.columnDef.header : core.humanify({
+                        term: column.id
+                    }),
+                    classNames: {
+                        root: 'w-full',
+                        body: 'grow flex justify-between',
+                        label: 'text-xs font-medium tracking-normal'
+                    },
+                    color: "accent",
+                    checked: column.getIsVisible(),
+                    onChange: ()=>column.toggleVisibility(),
+                    onKeyDown: (e)=>{
+                        if (e.code === 'Space') {
+                            e.preventDefault();
+                            column.toggleVisibility();
+                        }
+                    },
+                    size: "xs",
+                    "data-testid": "switch-toggle"
+                })
+            ]
+        })
+    });
+}
+
+const TitleWrapper = ({ title })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "uppercase text-lg text-left ml-0 lg:ml-auto gap-x-2",
+        children: title
+    });
+const TotalDetailWrapper = ({ detail, className = '' })=>/*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: `self-center uppercase text-lg text-left ml-0 lg:ml-auto ${className}`,
+        children: detail
+    });
+const TooltipWrapper = ({ children, tooltip, searchFocused, baseZIndex })=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tooltip, {
+        multiline: true,
+        label: tooltip,
+        position: "bottom-start",
+        offset: 0,
+        opened: searchFocused,
+        zIndex: baseZIndex + 1,
+        classNames: {
+            tooltip: 'w-72 border border-base-lighter absolute bg-white p-2 text-nci-gray text-sm overflow-wrap break-all rounded-b rounded-t-none font-content'
+        },
+        children: children
+    });
+const SearchInput = ({ searchTerm, placeholder, tooltip, searchFocused, baseZIndex, onClear, onChange, onFocus, onBlur })=>{
+    const TooltipContainer = tooltip ? TooltipWrapper : React.Fragment;
+    return /*#__PURE__*/ jsxRuntime.jsx(TooltipContainer, {
+        tooltip: tooltip,
+        baseZIndex: baseZIndex,
+        searchFocused: searchFocused,
+        children: /*#__PURE__*/ jsxRuntime.jsx(core$1.TextInput, {
+            leftSection: /*#__PURE__*/ jsxRuntime.jsx(md.MdSearch, {
+                size: 24,
+                "aria-hidden": "true"
+            }),
+            "data-testid": "textbox-table-search-bar",
+            placeholder: placeholder ?? 'Search',
+            "aria-label": "Table Search Input",
+            size: "sm",
+            rightSection: searchTerm.length > 0 && /*#__PURE__*/ jsxRuntime.jsx(core$1.ActionIcon, {
+                onClick: onClear,
+                className: "border-0",
+                children: /*#__PURE__*/ jsxRuntime.jsx(md.MdClose, {
+                    "aria-label": "clear search"
+                })
+            }),
+            value: searchTerm,
+            onChange: onChange,
+            onFocus: onFocus,
+            onBlur: onBlur,
+            classNames: {
+                input: `border-base-lighter focus:border-2 focus:border-primary${tooltip ? ' focus:rounded-b-none' : ''}`,
+                wrapper: 'xl:w-72'
+            }
+        })
+    });
+};
+function TableHeader({ additionalControls, tableTotalDetail, tableTitle, search, showControls, handleChange, table, columnOrder, setColumnOrder, baseZIndex, customBreakpoint, noColumnOrdering }) {
+    const [searchTerm, setSearchTerm] = React.useState(search?.defaultSearchTerm ?? '');
+    const [searchFocused, setSearchFocused] = React.useState(false);
+    const inputRef = React.useRef(null); // updated apr 10 25 to get build to work
+    const timeoutRef = React.useRef(null); // updated apr 10 25 to get build to work
+    const shouldShowControls = search?.enabled || showControls;
+    const { width } = hooks.useViewportSize();
+    React.useEffect(()=>{
+        if (search?.defaultSearchTerm) {
+            inputRef.current?.focus();
+        }
+    }, [
+        search?.defaultSearchTerm
+    ]);
+    const handleInputChange = (e)=>{
+        const newSearchTerm = e.target.value;
+        setSearchTerm(newSearchTerm);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(()=>{
+            handleChange({
+                newSearch: newSearchTerm.trim()
+            });
+        }, 400);
+    };
+    const handleClearClick = ()=>{
+        setSearchTerm('');
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        handleChange({
+            newSearch: ''
+        });
+    };
+    const renderSearchAndControls = ()=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+            className: "flex items-center gap-2",
+            "data-testid": "table-options-menu",
+            children: [
+                search?.enabled && /*#__PURE__*/ jsxRuntime.jsx(SearchInput, {
+                    searchTerm: searchTerm,
+                    placeholder: search?.placeholder,
+                    tooltip: search?.tooltip,
+                    searchFocused: searchFocused,
+                    baseZIndex: baseZIndex,
+                    onClear: handleClearClick,
+                    onChange: handleInputChange,
+                    onFocus: ()=>setSearchFocused(true),
+                    onBlur: ()=>setSearchFocused(false)
+                }),
+                showControls && /*#__PURE__*/ jsxRuntime.jsx(ColumnOrdering, {
+                    table: table,
+                    handleColumnOrderingReset: ()=>{
+                        table.resetColumnVisibility();
+                        table.resetColumnOrder();
+                    },
+                    columnOrder: columnOrder,
+                    setColumnOrder: setColumnOrder,
+                    noColumnOrdering: noColumnOrdering
+                })
+            ]
+        });
+    const breakpoint = customBreakpoint ?? XL_BREAKPOINT;
+    let detailClass = '';
+    if (tableTitle !== undefined) {
+        if (width >= breakpoint && shouldShowControls) {
+            detailClass = 'ml-auto';
+        }
+    } else {
+        if (width >= breakpoint && additionalControls) {
+            detailClass = 'ml-auto';
+        } else {
+            detailClass = 'order-first basis-full grow-0 shrink-0 -mb-2';
+        }
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: `flex flex-wrap gap-4 items-center mb-2 ${!additionalControls && !tableTitle ? 'justify-end' : 'justify-between'}`,
+        children: [
+            tableTitle && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: additionalControls || shouldShowControls && width < breakpoint ? 'basis-full grow-0 shrink-0 -mb-2' : '',
+                children: /*#__PURE__*/ jsxRuntime.jsx(TitleWrapper, {
+                    title: tableTitle
+                })
+            }),
+            additionalControls && additionalControls,
+            tableTotalDetail && /*#__PURE__*/ jsxRuntime.jsx("div", {
+                className: detailClass,
+                children: /*#__PURE__*/ jsxRuntime.jsx(TotalDetailWrapper, {
+                    detail: tableTotalDetail
+                })
+            }),
+            shouldShowControls && renderSearchAndControls()
+        ]
+    });
+}
+
+// Provides the bottom X position so components can align themselves with the table
+function emptyFn() {}
+const TableXPositionContext = /*#__PURE__*/ React.createContext({
+    xPosition: undefined,
+    setXPosition: emptyFn
+});
+
 const DEFAULT_PAGE_LIMIT_LABEL = 'Rows per Page (Limited to 10,0000):';
 const DEFAULT_PAGE_LIMIT = 10000;
 /**
@@ -10976,11 +11518,12 @@ const DEFAULT_PAGE_LIMIT = 10000;
  * @param index - Offset to use for fetching/displaying pages of rows
  * @param tableConfig - Inherited from ExplorerPageGetServerSideProps
  * @param accessibility - set the access level for the cohort data
- */ const ExplorerTable = ({ index, tableConfig, accessibility, classNames, size = 'sm' })=>{
+ */ const ExplorerTable = ({ index, tableConfig, accessibility, classNames, size = 'sm', additionalControls, tableTotalDetail, tableTitle })=>{
     const [pagination, setPagination] = React.useState({
         pageIndex: 0,
-        pageSize: 10
+        pageSize: 20
     });
+    const ref = React.useRef(null);
     const DetailsComponent = React.useMemo(()=>{
         if (!tableConfig?.detailsConfig || !tableConfig?.detailsConfig?.panel || tableConfig?.detailsConfig?.mode === 'none') return null;
         return tableConfig?.detailsConfig?.panelContainer === 'drawer' ? DetailsDrawer : DetailsModal;
@@ -10988,6 +11531,7 @@ const DEFAULT_PAGE_LIMIT = 10000;
     const [sorting, setSorting] = React.useState([]);
     const [rowSelection, setRowSelection] = React.useState({});
     const [selectedRow, setSelectedRow] = React.useState(undefined);
+    const [columnVisibility, setColumnVisibility] = React.useState({});
     // const DetailsPanel = useMemo(
     //   () =>
     //     ExplorerTableDetailsPanelFactory().getRenderer(
@@ -10997,11 +11541,23 @@ const DEFAULT_PAGE_LIMIT = 10000;
     //   [tableConfig?.detailsConfig?.panel],
     // );
     const DetailsPanel = React.useMemo(()=>QueryRowDetailsPanel, []);
-    const tableColumns = useDeepCompare.useDeepCompareMemo(()=>{
+    const handleColumnVisibilityChange = (updater)=>{
+        const newState = typeof updater === 'function' ? updater(columnVisibility) : updater;
+        setColumnVisibility({
+            ...newState,
+            ...{
+                'mrt-row-expand': false,
+                ...lockedVisibility
+            }
+        });
+    };
+    const { tableColumns, lockedVisibility } = useDeepCompare.useDeepCompareMemo(()=>{
         return createTableColumns(tableConfig);
     }, [
         tableConfig
     ]);
+    const [columnOrder, setColumnOrder] = React.useState(tableColumns.map((column)=>column.id));
+    const handleSearchOrPageChange = React.useCallback((params)=>null, []);
     // TODO: add support for nested fields
     const fields = React.useMemo(()=>tableColumns.map((column)=>column.field), [
         tableColumns
@@ -11023,7 +11579,8 @@ const DEFAULT_PAGE_LIMIT = 10000;
         };
     }, []);
     const cohortFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
-    const { data, isLoading, isError, isFetching } = core.useGetRawDataAndTotalCountsQuery({
+    const { xPosition, setXPosition } = React.useContext(TableXPositionContext);
+    const { data, isLoading, isError, isFetching, isSuccess } = core.useGetRawDataAndTotalCountsQuery({
         type: index,
         fields: fields,
         filters: cohortFilters,
@@ -11079,12 +11636,17 @@ const DEFAULT_PAGE_LIMIT = 10000;
         onSortingChange: setSorting,
         enableTopToolbar: false,
         enableExpandAll: false,
+        enableHiding: true,
+        enableColumnActions: false,
         displayColumnDefOptions: {
             'mrt-row-expand': {
                 enableHiding: true
             }
         },
+        onColumnVisibilityChange: handleColumnVisibilityChange,
         enableExpanding: !!tableConfig?.detailsConfig,
+        //enableColumnOrdering: tableConfig?.columnSorting,
+        // enableHiding: tableConfig?.columnHiding,
         getRowId: getRowId(tableConfig),
         rowCount: totalRowCount,
         icons: TableIcons,
@@ -11135,9 +11697,8 @@ const DEFAULT_PAGE_LIMIT = 10000;
             showAlertBanner: isError,
             density: 'xs',
             rowSelection: rowSelection,
-            columnVisibility: {
-                'mrt-row-expand': false
-            }
+            columnVisibility: columnVisibility,
+            columnOrder: columnOrder
         },
         mantineTableBodyRowProps: tableConfig.detailsConfig?.mode === 'click' ? ({ row })=>({
                 onClick: ()=>{
@@ -11169,6 +11730,16 @@ const DEFAULT_PAGE_LIMIT = 10000;
             } else return null;
         } : undefined
     });
+    const rowCount = table.getRowModel().rows.length;
+    React.useLayoutEffect(()=>{
+        if (setXPosition && xPosition === undefined && isSuccess && rowCount > 0 && ref.current) {
+            setXPosition(ref?.current?.getBoundingClientRect()?.bottom);
+        }
+    }, [
+        setXPosition,
+        xPosition,
+        rowCount
+    ]);
     return /*#__PURE__*/ jsxRuntime.jsx(React.Fragment, {
         children: /*#__PURE__*/ jsxRuntime.jsxs(StudyProvider, {
             children: [
@@ -11186,11 +11757,25 @@ const DEFAULT_PAGE_LIMIT = 10000;
                         accessibility
                     }
                 }),
-                /*#__PURE__*/ jsxRuntime.jsx("div", {
-                    className: "inline-block overflow-x-scroll",
-                    children: /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
-                        table: table
-                    })
+                /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                    className: "inline-block overflow-x-scroll ",
+                    ref: ref,
+                    children: [
+                        (tableConfig?.showTableHeaderControls || tableConfig.columnSorting || tableConfig?.columnHiding) && /*#__PURE__*/ jsxRuntime.jsx(TableHeader, {
+                            table: table,
+                            columnOrder: columnOrder,
+                            setColumnOrder: setColumnOrder,
+                            handleChange: handleSearchOrPageChange,
+                            additionalControls: additionalControls,
+                            tableTitle: tableTitle,
+                            tableTotalDetail: tableTotalDetail,
+                            showControls: tableConfig?.showTableHeaderControls,
+                            noColumnOrdering: Object.keys(lockedVisibility)
+                        }),
+                        /*#__PURE__*/ jsxRuntime.jsx(mantineReactTable.MantineReactTable, {
+                            table: table
+                        })
+                    ]
                 })
             ]
         })
@@ -11402,16 +11987,19 @@ const useGuppyActionButton = ({ Modal403 = core.Modals.NoAccessModal, Modal400 =
                 modal: Modal400,
                 message: errorMessage
             }));
+            console.error(error);
         } else if (errorMessage === 'Your token is invalid or expired. Please get a new token.') {
             dispatch(core.showModal({
                 modal: Modal403,
                 message: errorMessage
             }));
+            console.error(error);
         } else {
             dispatch(core.showModal({
                 modal: Modal400,
                 message: customErrorMessage || errorMessage
             }));
+            console.error(error);
         }
     }, [
         Modal400,
@@ -12525,6 +13113,7 @@ const JSONObjectDownloadButton = ({ getData, filename = 'data.json', icon = 'gen
         })
     });
 };
+JSONObjectDownloadButton.displayName = 'JSONObjectDownloadButton';
 
 const UploadJSONButton = ({ handleFileChange, tooltip, icon = 'gen3:upload' })=>{
     const [file, setFile] = React.useState(null);
@@ -13199,7 +13788,7 @@ const EmptyData = {};
         charts,
         chartsSection
     ]);
-    const { data: counts, isFetching: isCountsFetching, isSuccess: isCountSuccess, isError: isCountsError } = core.useGetCountsQuery({
+    const { data: counts, isFetching: isCountsFetching, isError: isCountsError } = core.useGetCountsQuery({
         type: index,
         filters: cohortFilters,
         accessibility: accessLevel,
@@ -13822,53 +14411,341 @@ const TabbedCohortBuilder = ({ index, tabsConfiguration })=>{
     const facetDataHooks = useDeepCompare.useDeepCompareMemo(()=>{
         return {
             // TODO: see if there a better way to do this
-            enum: EnumHookInstances,
-            exact: EnumHookInstances,
-            multiselect: EnumHookInstances,
-            range: RangeHookInstances,
-            age: RangeHookInstances,
-            year: RangeHookInstances,
-            years: RangeHookInstances,
-            days: RangeHookInstances,
-            percent: RangeHookInstances,
-            datetime: RangeHookInstances,
-            toggle: RangeHookInstances,
-            upload: EnumHookInstances
+            enum: EnumHookInstances,
+            exact: EnumHookInstances,
+            multiselect: EnumHookInstances,
+            range: RangeHookInstances,
+            age: RangeHookInstances,
+            year: RangeHookInstances,
+            years: RangeHookInstances,
+            days: RangeHookInstances,
+            percent: RangeHookInstances,
+            datetime: RangeHookInstances,
+            toggle: RangeHookInstances,
+            upload: EnumHookInstances
+        };
+    }, [
+        getEnumFacetData,
+        getRangeFacetData,
+        index
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
+        gap: "xs",
+        align: "stretch",
+        classNames: {
+            root: 'w-full'
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(FacetTabs, {
+            activeTab: activeTab,
+            setActiveTab: setActiveTab,
+            facetDefinitions: facetDefinitions,
+            tabsConfig: tabsConfig,
+            usedFacets: cohortBuilderFilters,
+            hooks: facetDataHooks,
+            customFacetHooks: {
+                useCustomFacets,
+                useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
+                        data: {},
+                        isSuccess: true
+                    }),
+                useAddCustomFilter: ()=>(filter)=>{},
+                useRemoveCustomFilter: ()=>(filter)=>{}
+            },
+            getFacetLabel: ()=>'Cases',
+            cardScrollMargin: calculateStickyHeaderHeight(),
+            useFieldNameToTitle: useFieldNameToTitle
+        })
+    });
+};
+
+const useGetFacetValuesQuery = (args)=>{
+    const { data, isSuccess, isFetching, isError } = core.useGetAggsQuery(args);
+    return {
+        data: data ?? {},
+        isError,
+        isFetching,
+        isSuccess
+    };
+};
+const buildFileStatsdQuery = (type, fileSizeField, cohortItemIdField, fileItemIdField)=>{
+    const fileStatsQuery = `query repositoryTotals ($filter: JSON, $accessibility:Accessibility) {
+    _aggregation {
+        ${type} (accessibility: $accessibility, filter: $filter) {
+            ${core.customQueryStrForField(fileItemIdField, '{_totalCount }')}
+             ${core.customQueryStrForField(fileSizeField, ' {  histogram {sum} }')}
+                ${core.customQueryStrForField(cohortItemIdField, '{_cardinalityCount }')}
+        }
+    }
+}`;
+    return fileStatsQuery;
+};
+const useTotalFileSizeQuery = ({ repositoryFilters, repositoryIndex, cohortIndex, fileSizeField, cohortItemIdField, fileItemIdField, accessibility = core.Accessibility.ALL })=>{
+    const [totals, setTotals] = React.useState({
+        totalFileSize: 0,
+        totalCaseCount: 0,
+        totalFileCount: 0
+    });
+    const query = buildFileStatsdQuery(repositoryIndex, fileSizeField, cohortItemIdField, fileItemIdField);
+    const { data, isSuccess, isFetching, isError } = core.useGeneralGQLQuery({
+        query,
+        variables: {
+            accessibility,
+            filter: core.convertFilterSetToGqlFilter(repositoryFilters)
+        }
+    });
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (isSuccess) {
+            const response = data.data;
+            const totalFileSize = response?._aggregation?.[repositoryIndex]?.[fileSizeField]?.histogram?.[0]?.sum || 0;
+            const totalCaseCount = response?._aggregation?.[repositoryIndex]?.[cohortItemIdField]?._cardinalityCount || 0;
+            const totalFileCount = response?._aggregation?.[repositoryIndex]?.[fileItemIdField]?._totalCount || 0;
+            setTotals({
+                totalFileSize,
+                totalCaseCount,
+                totalFileCount
+            });
+        }
+    }, [
+        data,
+        isSuccess
+    ]);
+    return {
+        data: totals,
+        isError,
+        isFetching,
+        isSuccess
+    };
+};
+
+const Stats = ({ totalCaseCount, totalFileSize, totalFileCount, isFetching })=>/*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex gap-1 text-xl items-center uppercase flex-wrap",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                children: [
+                    "Total of",
+                    ' ',
+                    /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                        children: !isFetching ? totalFileCount.toLocaleString() : '--'
+                    }),
+                    ' ',
+                    totalFileCount !== 1 ? 'Files' : 'File'
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(md.MdPerson, {
+                        className: "ml-2 mr-1 mb-1 inline-block",
+                        "aria-hidden": "true"
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                        className: "mr-1",
+                        children: totalCaseCount
+                    }),
+                    totalCaseCount !== 1 ? 'Cases' : 'Case'
+                ]
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(md.MdSave, {
+                        className: "ml-2 mr-1 mb-1 inline-block",
+                        "aria-hidden": "true"
+                    }),
+                    filesize.filesize(totalFileSize)
+                ]
+            })
+        ]
+    });
+
+const FileFacetPanel = ({ filters, index, tabTitle, fieldMapping })=>{
+    const repositoryFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
+    const fields = React.useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
+        filters?.tabs
+    ]);
+    const [accessLevel, setAccessLevel] = React.useState(core.Accessibility.ALL);
+    const [facetDefinitions, setFacetDefinitions] = React.useState({});
+    const { data: facetData, isSuccess: isFacetsQuerySuccess, isFetching: isFacetsQueryFetching, isError: isFacetsQueryError } = useGetFacetValuesQuery({
+        type: index,
+        fields: fields,
+        filters: repositoryFilters
+    });
+    // Set the facet definitions based on the data only the first time the data is loaded
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (isFacetsQuerySuccess && Object.keys(facetDefinitions).length === 0) {
+            const configFacetDefs = filters?.tabs.reduce((acc, tab)=>{
+                return {
+                    ...tab.fieldsConfig,
+                    ...acc
+                };
+            }, {});
+            const facetDefs = classifyFacets(facetData, index, fieldMapping ?? [], configFacetDefs ?? {});
+            setFacetDefinitions(facetDefs);
+        }
+    }, [
+        isFacetsQuerySuccess,
+        facetData,
+        facetDefinitions,
+        index,
+        fieldMapping
+    ]);
+    const getEnumFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
+        let filters = undefined;
+        let combineMode = 'or';
+        if (field in repositoryFilters.root) {
+            if (core.isIntersection(repositoryFilters.root[field])) {
+                const intersectionFilters = removeIntersectionFromEnum(repositoryFilters.root[field]);
+                if (intersectionFilters) {
+                    filters = core.extractEnumFilterValue(intersectionFilters);
+                    combineMode = 'and';
+                }
+            } else {
+                filters = core.extractEnumFilterValue(repositoryFilters.root[field]);
+            }
+        }
+        return {
+            data: processBucketData(facetData?.[field]),
+            enumFilters: filters,
+            combineMode: combineMode,
+            isSuccess: isFacetsQuerySuccess,
+            isFetching: isFacetsQueryFetching
+        };
+    }, [
+        repositoryFilters.root,
+        facetData,
+        isFacetsQuerySuccess
+    ]);
+    const facetDataHooks = useDeepCompare.useDeepCompareMemo(()=>{
+        return {
+            // TODO: see if there a better way to do this
+            enum: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: lodash.partial(useUpdateFilters$1, index),
+                useGetFacetFilters: lodash.partial(useGetFacetFilters$1, index),
+                useClearFilter: lodash.partial(useClearFilters$1, index),
+                useFilterExpanded: lodash.partial(useFilterExpandedState$1, index),
+                useToggleExpandFilter: lodash.partial(useToggleExpandFilter$1, index),
+                useGetCombineMode: lodash.partial(useCohortFilterCombineState, index),
+                useSetCombineMode: lodash.partial(useSetCohortFilterCombineState, index),
+                useFieldNameToTitle: useFieldNameToTitle,
+                useTotalCounts: undefined,
+                useUpdateCombineMode: ()=>null
+            }
         };
     }, [
         getEnumFacetData,
-        getRangeFacetData,
         index
     ]);
-    return /*#__PURE__*/ jsxRuntime.jsx(core$1.Stack, {
-        gap: "xs",
-        align: "stretch",
-        classNames: {
-            root: 'w-full'
+    if (isFacetsQueryError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+            message: "Unable to fetch data from server"
+        }); // TODO: replace with configurable message
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(DropdownPanel, {
+        index: index,
+        filters: filters,
+        facetDefinitions: facetDefinitions,
+        facetDataHooks: facetDataHooks,
+        showAccessLevel: false,
+        tabTitle: tabTitle,
+        onAccessChange: setAccessLevel,
+        accessLevel: accessLevel
+    });
+};
+
+const RepositoryPanel = ({ guppyConfig, filters, table, dropdowns, buttons, loginForDownload, fileStatsConfiguration })=>{
+    hooks.useMediaQuery('(min-width: 639px)');
+    hooks.useMediaQuery('(min-width: 1373px)');
+    hooks.useMediaQuery('(min-width: 1600px)');
+    const [tableXPosition, setTableXPosition] = React.useState(undefined);
+    const defaultDropdowns = React.useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = React.useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const [accessLevel, setAccessLevel] = React.useState(core.Accessibility.ALL);
+    const index = guppyConfig.dataType;
+    React.useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
+        filters?.tabs
+    ]);
+    const repositoryFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index));
+    const { data: fileSizeSliceData, isFetching: isFileSizeFetching } = useTotalFileSizeQuery({
+        repositoryFilters: repositoryFilters,
+        ...fileStatsConfiguration
+    });
+    if (fileStatsConfiguration) return /*#__PURE__*/ jsxRuntime.jsx(TableXPositionContext.Provider, {
+        value: {
+            xPosition: tableXPosition,
+            setXPosition: setTableXPosition
         },
-        children: /*#__PURE__*/ jsxRuntime.jsx(FacetTabs, {
-            activeTab: activeTab,
-            setActiveTab: setActiveTab,
-            facetDefinitions: facetDefinitions,
-            tabsConfig: tabsConfig,
-            usedFacets: cohortBuilderFilters,
-            hooks: facetDataHooks,
-            customFacetHooks: {
-                useCustomFacets,
-                useAvailableCustomFacets: (usedFacets, onlyFiltersWithValues, queryOptions)=>({
-                        data: {},
-                        isSuccess: true
+        children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+            className: "flex flex-col mt-3 relative px-4 bg-base-lightest w-full",
+            children: /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex w-full pt-2",
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        id: "cohort-builder-filters",
+                        className: "flex-shrink-0 md:w-1/4 lg:w-1/5",
+                        children: filters?.tabs && /*#__PURE__*/ jsxRuntime.jsx(FileFacetPanel, {
+                            index: index,
+                            filters: filters,
+                            tabTitle: "Files",
+                            fieldMapping: guppyConfig?.fieldMapping ?? []
+                        })
                     }),
-                useAddCustomFilter: ()=>(filter)=>{},
-                useRemoveCustomFilter: ()=>(filter)=>{}
-            },
-            getFacetLabel: ()=>'Cases',
-            cardScrollMargin: calculateStickyHeaderHeight(),
-            useFieldNameToTitle: useFieldNameToTitle
+                    /*#__PURE__*/ jsxRuntime.jsx("div", {
+                        id: "cohort-builder-content",
+                        className: "flex flex-col md:w-3/4 lg:w-4/5 pl-4",
+                        children: table?.enabled && /*#__PURE__*/ jsxRuntime.jsx(ExplorerTable, {
+                            index: index,
+                            tableConfig: table,
+                            accessibility: accessLevel,
+                            additionalControls: /*#__PURE__*/ jsxRuntime.jsx(DownloadsPanel, {
+                                dropdowns: defaultDropdowns,
+                                buttons: defaultButtons,
+                                loginForDownload: loginForDownload,
+                                index: index,
+                                totalCount: fileSizeSliceData.totalCaseCount ?? 0,
+                                fields: table?.fields ?? [],
+                                filter: repositoryFilters
+                            }),
+                            tableTotalDetail: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                className: "ml-auto",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(Stats, {
+                                    totalFileCount: fileSizeSliceData.totalFileCount,
+                                    totalCaseCount: fileSizeSliceData.totalCaseCount,
+                                    totalFileSize: fileSizeSliceData.totalFileSize,
+                                    isFetching: isFileSizeFetching
+                                })
+                            })
+                        })
+                    })
+                ]
+            })
         })
     });
 };
 
+const validateObjectHasRequiredFields = (obj, requiredFields)=>requiredFields.every((field)=>obj[field] !== undefined);
+
+const Repository = ({ filters, guppyConfig, table, buttons, loginForDownload, dropdowns, fileStatsConfiguration })=>{
+    if (!fileStatsConfiguration || !validateObjectHasRequiredFields(fileStatsConfiguration, Object.keys(fileStatsConfiguration))) {
+        return /*#__PURE__*/ jsxRuntime.jsx(MessagePage, {
+            children: /*#__PURE__*/ jsxRuntime.jsx(ErrorCard, {
+                message: "Invalid file stats configuration"
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx(RepositoryPanel, {
+        guppyConfig: guppyConfig,
+        filters: filters,
+        table: table,
+        dropdowns: dropdowns,
+        buttons: buttons,
+        loginForDownload: loginForDownload,
+        fileStatsConfiguration: fileStatsConfiguration
+    }, "Repository-Panel");
+};
+
 /**
  * Fetches graphql data from a graphql endpoint if one is specified, or guppy by default.
  * @param graphQLEndpoint - The location of the graphql endpoint.
@@ -15328,7 +16205,6 @@ var ContentSource$1 = ContentSource.getInstance();
         if (isHeaderMetadata(loadedHeaderMetadata)) {
             headerMetadata = loadedHeaderMetadata;
         } else {
-            console.log('loadedHeaderMetadata', loadedHeaderMetadata);
             console.warn('headerMetadata is not a valid HeaderMetadata object');
         }
     } catch (error) {
@@ -19390,6 +20266,428 @@ var CategoryPanel$1 = /*#__PURE__*/ React.memo(CategoryPanel, (prevProps, nextPr
     return prevProps.category === nextProps.category && selectedItems.node === prevProps.category && prevProps.selectedId === nextProps.selectedId && prevProps.scrollToSelection === nextProps.scrollToSelection;
 });
 
+/**
+ * Get subgroup links from link
+ * @param {object} link - array of links
+ * @param {object} nameToNode - key (node name) value (node object) map
+ * @param {string} sourceId - source id for subgroup links
+ * This function traverse links recursively and return all nested subgroup lnks
+ */ const getSubgroupLinks = (link, nameToNode, sourceId)=>{
+    let subgroupLinks = [];
+    if (link.subgroup) {
+        link.subgroup.forEach((sgLink)=>{
+            if (sgLink.subgroup) {
+                subgroupLinks = subgroupLinks.concat(getSubgroupLinks(sgLink, nameToNode, sourceId));
+            } else {
+                subgroupLinks.push({
+                    source: nameToNode[sourceId],
+                    target: nameToNode[sgLink.target_type],
+                    exists: 1,
+                    ...sgLink
+                });
+            }
+        });
+    }
+    return subgroupLinks;
+};
+/**
+ * Given a data dictionary that defines a set of nodes
+ *    and edges, returns the nodes and edges in correct format
+ *
+ * @method createNodesAndEdges
+ * @param props: Object (normally taken from redux state) that includes dictionary
+ *    property defining the dictionary as well as other optional properties
+ *    such as counts_search and links_search (created by getCounts) with
+ *    information about the number of each type (node) and link (between
+ *    nodes with a link's source and target types) that actually
+ *    exist in the data
+ * @param createAll: Include all nodes and edges or only those that are populated in
+ *    counts_search and links_search
+ * @param nodesToHide: Array of nodes to hide from graph
+ * @returns { nodes, edges } Object containing nodes and edges
+ */ function createNodesAndEdges(props, createAll, nodesToHide = [
+    'program'
+]) {
+    const { dictionary } = props;
+    const nodes = Object.keys(dictionary).filter((key)=>!key.startsWith('_') && dictionary[key].type === 'object' && dictionary[key].category !== 'internal' && !nodesToHide.includes(key)).map((key)=>{
+        let count = 0;
+        if (props.counts_search) {
+            count = props.counts_search[`_${key}_count`];
+        }
+        return {
+            name: dictionary[key].title,
+            count,
+            ...dictionary[key]
+        };
+    }).filter((node)=>createAll);
+    const nameToNode = nodes.reduce((db, node)=>{
+        db[node.id] = node;
+        return db;
+    }, {});
+    const hideDb = nodesToHide.reduce((db, name)=>{
+        db[name] = true;
+        return db;
+    }, {});
+    const edges = nodes.filter((node)=>node.links !== undefined && node.links.length > 0).reduce((list, node)=>{
+        const newLinks = node.links.map((link)=>({
+                source: node,
+                target: nameToNode[link.target_type],
+                exists: 1,
+                ...link
+            }));
+        return list.concat(newLinks);
+    }, []).reduce((list, link)=>{
+        let result = list;
+        if (link.target) {
+            result.push(link);
+        }
+        if (link.subgroup) {
+            const sgLinks = getSubgroupLinks(link, nameToNode, link.source.id);
+            result = result.concat(sgLinks);
+        }
+        return result;
+    }, []).filter(// target type exist and is not in hide list
+    (link)=>link.target && link.target.id in nameToNode && !(link.target.id in hideDb)).map((link)=>{
+        // decorate each link with its "exists" count if available
+        //  (number of instances of link between source and target types in the data)
+        const res = link;
+        res.exists = props.links_search ? props.links_search[`${res.source.id}_${res.name}_to_${res.target.id}_link`] : 0;
+        return res;
+    }).filter(// filter out if no instances of this link exists and createAll is not specified
+    (link)=>createAll);
+    return {
+        nodes,
+        edges
+    };
+}
+/**
+ * Find the root of the given graph (no edges out)
+ * @method findRoot
+ * @param nodes
+ * @param edges
+ * @return {string} rootName or null if no root
+ */ function findRoot(nodes, edges) {
+    const couldBeRoot = edges.reduce((db, edge)=>{
+        // At some point the d3 force layout converts
+        //   edge.source and edge.target into node references ...
+        const sourceName = typeof edge.source === 'object' ? edge.source.id : edge.source;
+        if (db[sourceName]) {
+            db[sourceName] = false;
+        }
+        return db;
+    }, // initialize emptyDb - any node could be the root
+    nodes.reduce((emptyDb, node)=>{
+        const res = emptyDb;
+        res[node.id] = true;
+        return res;
+    }, {}));
+    const rootNode = nodes.find((n)=>couldBeRoot[n.id]);
+    return rootNode ? rootNode.id : null;
+}
+/**
+ * Recursive helper function for getTreeHierarchy
+ * Returns the hierarchy of the tree in the form of a map
+ * Each (key, value) consists of (node, node's descendants including the node itself)
+ * @method getTreeHierarchyHelper
+ * @param root
+ * @param name2EdgesIn
+ * @param hierarchy
+ * @return {map}
+ */ function getTreeHierarchyHelper(node, name2EdgesIn, hierarchy) {
+    const descendants = new Set();
+    descendants.add(node);
+    hierarchy.set(node, descendants);
+    name2EdgesIn[node].forEach((edge)=>{
+        const sourceName = typeof edge.source === 'object' ? edge.source.id : edge.source;
+        if (!hierarchy.get(sourceName)) {
+            hierarchy = getTreeHierarchyHelper(sourceName, name2EdgesIn, hierarchy);
+            descendants.add(sourceName);
+            hierarchy.get(sourceName).forEach((n)=>{
+                descendants.add(n);
+            });
+        }
+    });
+    hierarchy.set(node, descendants);
+    return hierarchy;
+}
+/**
+ * Returns the hierarchy of the tree in the form of a map
+ * Each (key, value) consists of (node, node's descendants including the node itself)
+ * @method getTreeHierarchy
+ * @param root
+ * @param name2EdgesIn
+ * @return {map}
+ */ function getTreeHierarchy(root, name2EdgesIn) {
+    return getTreeHierarchyHelper(root, name2EdgesIn, new Map());
+}
+/**
+ * Arrange nodes in dictionary graph breadth first, and build level database.
+ * If a node links to multiple parents, then place it under the highest parent ...
+ * Exported for testing.
+ *
+ * @param {Array} nodes
+ * @param {Array} edges
+ * @return { nodesBreadthFirst, treeLevel2Names, name2Level } where
+ *          nodesBreadthFirst is array of node names, and
+ *          treeLevel2Names is an array of arrays of node names,
+ *          and name2Level is a mapping of node name to level
+ */ function nodesBreadthFirst(nodes, edges) {
+    const result = {
+        bfOrder: [],
+        treeLevel2Names: [],
+        name2Level: {}
+    };
+    // mapping of node name to edges that point into that node
+    const name2EdgesIn = edges.reduce((db, edge)=>{
+        // At some point the d3 force layout converts edge.source
+        //   and edge.target into node references ...
+        const targetName = typeof edge.target === 'object' ? edge.target.id : edge.target;
+        if (db[targetName]) {
+            db[targetName].push(edge);
+        } else {
+            console.error(`Edge points to unknown node: ${targetName}`);
+        }
+        return db;
+    }, // initialize emptyDb - include nodes that have no incoming edges (leaves)
+    nodes.reduce((emptyDb, node)=>{
+        const res = emptyDb;
+        res[node.id] = [];
+        return res;
+    }, {}));
+    // root node has no edges coming out of it, just edges coming in
+    const root = findRoot(nodes, edges);
+    if (!root) {
+        console.log('Could not find root of given graph');
+        return result;
+    }
+    const processedNodes = new Set(); // account for nodes that link to multiple other nodes
+    let queue = [];
+    queue.push({
+        query: root,
+        level: 0
+    });
+    // just 2b safe - could be user gives us a graph without a 'project'
+    if (!name2EdgesIn[root]) {
+        name2EdgesIn[root] = [];
+    }
+    const name2ActualLvl = {};
+    const hierarchy = getTreeHierarchy(root, name2EdgesIn);
+    // Run through this once to determine the actual level of each node
+    for(let head = 0; head < queue.length; head += 1){
+        const { query, level } = queue[head]; // breadth first
+        name2ActualLvl[query] = level;
+        name2EdgesIn[query].forEach((edge)=>{
+            // At some point the d3 force layout converts edge.source
+            //   and edge.target into node references ...
+            const sourceName = typeof edge.source === 'object' ? edge.source.id : edge.source;
+            if (name2EdgesIn[sourceName]) {
+                const isAncestor = hierarchy.get(sourceName).has(query);
+                // only push node if it is not an ancestor of the current node, or else --> cycle
+                if (!isAncestor) {
+                    queue.push({
+                        query: sourceName,
+                        level: level + 1
+                    });
+                }
+            } else {
+                console.log(`Edge comes from unknown node ${sourceName}`);
+            }
+        });
+    }
+    // Reset and run for real
+    queue = [];
+    queue.push({
+        query: root,
+        level: 0
+    });
+    // queue.shift is O(n), so just keep pushing, and move the head
+    for(let head = 0; head < queue.length; head += 1){
+        const { query, level } = queue[head]; // breadth first
+        result.bfOrder.push(query);
+        processedNodes.add(query);
+        if (result.treeLevel2Names.length <= level) {
+            result.treeLevel2Names.push([]);
+        }
+        result.treeLevel2Names[level].push(query);
+        result.name2Level[query] = level;
+        name2EdgesIn[query].forEach((edge)=>{
+            // At some point the d3 force layout converts edge.source
+            //   and edge.target into node references ...
+            const sourceName = typeof edge.source === 'object' ? edge.source.id : edge.source;
+            if (name2EdgesIn[sourceName]) {
+                if (!processedNodes.has(sourceName) && name2ActualLvl[sourceName] === level + 1) {
+                    //
+                    // edge source has not yet been processed via another link from the source
+                    // to a node higher in the graph
+                    //
+                    processedNodes.add(sourceName); // don't double-queue a node
+                    queue.push({
+                        query: sourceName,
+                        level: level + 1
+                    });
+                }
+            } else {
+                console.log(`Edge comes from unknown node ${sourceName}`);
+            }
+        });
+    }
+    return result;
+}
+const placeNodesOnGraph = (treeLevel2Names, nodesById)=>{
+    let currentX = 0;
+    let currentY = 0;
+    const xSpacing = 300;
+    const ySpacing = 100;
+    const positions = [];
+    treeLevel2Names.forEach((level)=>{
+        level.forEach((id)=>{
+            positions.push({
+                id: id,
+                name: nodesById[id].name,
+                x: currentX,
+                y: currentY
+            });
+            currentY += ySpacing;
+        });
+        currentY = 0;
+        currentX += xSpacing;
+    });
+    return positions;
+};
+const linksForGraph = (edges)=>{
+    return edges.map((edge)=>{
+        return {
+            source: edge.source.id,
+            target: edge.target.id
+        };
+    });
+};
+//TODO posably get this from somewhere else
+// object of nodes by ID for easy lookup
+const getNodesById = (nodes)=>{
+    return nodes.reduce((db, node)=>{
+        db[node.id] = node;
+        return db;
+    }, {});
+};
+const formatDataForGraph = (categories)=>{
+    //TODO cash all this unchanging data
+    const { nodes, edges } = createNodesAndEdges({
+        dictionary: categories
+    }, true, []);
+    const nodeTree = nodesBreadthFirst(nodes, edges);
+    console.log('nodes edges', nodes, edges);
+    console.log('nodesBreadthFirst', nodeTree);
+    const nodesById = getNodesById(nodes);
+    const graphData = placeNodesOnGraph(nodeTree.treeLevel2Names, nodesById);
+    console.log('placeNodesOnGraph', graphData);
+    const graphLinks = linksForGraph(edges);
+    console.log('linksForGraph', graphLinks);
+    return {
+        data: graphData,
+        links: graphLinks
+    };
+};
+
+const GraphView = ({ categories, dictionary, selectedId })=>{
+    const [zoomLevel, setZoomLevel] = React.useState(0); // TODO Start here for zoom level
+    const dataAndLinks = formatDataForGraph(dictionary);
+    console.log('GraphView dictionary', dictionary);
+    console.log('GraphView categories', categories);
+    console.log('GraphView selectedId', selectedId);
+    const chartDefinition = React.useMemo(()=>{
+        return {
+            tooltip: {
+                trigger: 'item',
+                triggerOn: 'mousemove'
+            },
+            toolbox: {
+                show: true,
+                left: 'left',
+                orient: 'vertical',
+                itemSize: 30,
+                iconStyle: {
+                    borderWidth: 0,
+                    opacity: 0.8
+                },
+                emphasis: {
+                    iconStyle: {
+                        opacity: 1,
+                        color: '#3283c8'
+                    }
+                },
+                feature: {
+                    restore: {
+                        show: true,
+                        title: 'Reset',
+                        icon: 'image://data:image/gif;base64,R0lGODlhHgAeAKEAADKDyP///zKDyDKDyCH5BAEKAAIALAAAAAAeAB4AAAJChI+py+0Powm02irP3TRPfnkAJjZkuZxooq5a57Jw/AY00sY5lO+PjwKWhCKix5hBSpQRJm+2BFmKUueoCr1pt5ICADs='
+                    },
+                    myZoomIn: {
+                        show: true,
+                        title: 'Zoom In',
+                        icon: 'image://data:image/gif;base64,R0lGODlhHgAeAKEAADKDyP///zKDyDKDyCH5BAEKAAIALAAAAAAeAB4AAAJAhI+py+0PIww0yFnvq1Y37n1ZuICkYp5Iqhps+27cTNfdauc0qvcU79NpYiciyRhCepTDUcvlfDIvU0n1ic2GCgA7',
+                        onclick: (params)=>{
+                            const series = params?.option?.series;
+                            const zoom = series && series[0] ? series[0].zoom : 1;
+                            setZoomLevel((zoom || 1) + 0.1);
+                        }
+                    },
+                    myZoomOut: {
+                        show: true,
+                        title: 'Zoom Out',
+                        icon: 'image://data:image/gif;base64,R0lGODlhHgAeAKEAADKDyP///zKDyDKDyCH5BAEKAAIALAAAAAAeAB4AAAIohI+py+0Po5y02ouz3rz7PwXiSJbmqJzqmq4u2b4vSNf2jef6zvd1AQA7',
+                        onclick: (params)=>{
+                            const series = params?.option?.series;
+                            const zoom = series && series[0] ? series[0].zoom : 1;
+                            setZoomLevel((zoom || 1) - 0.1);
+                        }
+                    }
+                }
+            },
+            //https://echarts.apache.org/en/option.html#legend
+            series: {
+                type: 'graph',
+                roam: true,
+                zoom: zoomLevel,
+                label: {
+                    show: true,
+                    position: 'right',
+                    backgroundColor: 'white'
+                },
+                symbol: 'circle',
+                emphasis: {
+                    focus: 'adjacency'
+                },
+                //edgeSymbol: ['circle', 'circle'],
+                //edgeSymbolSize: [4, 4],
+                lineStyle: {
+                    opacity: 0.9,
+                    width: 2,
+                    curveness: 0,
+                    cap: 'square'
+                },
+                //https://echarts.apache.org/en/option.html#series-tree.data
+                data: dataAndLinks.data,
+                links: dataAndLinks.links,
+                top: '10%',
+                left: '5%'
+            }
+        };
+    }, [
+        dataAndLinks,
+        zoomLevel
+    ]);
+    //TODO: import real data
+    //TODO: connections between nodes
+    //TODO: ZOOM IN AND OUT AND MOVE AROUND controls? 
+    return /*#__PURE__*/ jsxRuntime.jsx("div", {
+        className: "w-full h-full min-h-[800px]",
+        children: /*#__PURE__*/ jsxRuntime.jsx(ReactECharts, {
+            option: chartDefinition
+        })
+    });
+};
+
 const Dictionary = ()=>{
     const [selectedId, setSelectedId] = React.useState('');
     const [view, setView] = React.useState('table');
@@ -19408,6 +20706,11 @@ const Dictionary = ()=>{
         scrollIntoView,
         targetRef
     ]);
+    const categoryPanelTable = Object.keys(categories).length && Object.keys(categories).map((category)=>/*#__PURE__*/ jsxRuntime.jsx(CategoryPanel$1, {
+            category: category,
+            selectedId: selectedId,
+            scrollToSelection: scrollToSelection
+        }, category));
     return /*#__PURE__*/ jsxRuntime.jsxs(jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ jsxRuntime.jsx("div", {
@@ -19448,11 +20751,26 @@ const Dictionary = ()=>{
                 ref: scrollableRef,
                 children: /*#__PURE__*/ jsxRuntime.jsx("div", {
                     className: "h-full",
-                    children: Object.keys(categories).length && Object.keys(categories).map((category)=>/*#__PURE__*/ jsxRuntime.jsx(CategoryPanel$1, {
-                            category: category,
-                            selectedId: selectedId,
-                            scrollToSelection: scrollToSelection
-                        }, category))
+                    children: config?.showGraph ? /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
+                        value: view,
+                        keepMounted: false,
+                        className: "h-full",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                value: "table",
+                                children: categoryPanelTable
+                            }),
+                            /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                                value: "graph",
+                                className: "h-full",
+                                children: /*#__PURE__*/ jsxRuntime.jsx(GraphView, {
+                                    categories: categories,
+                                    dictionary: dictionary,
+                                    selectedId: selectedId
+                                })
+                            })
+                        ]
+                    }) : categoryPanelTable
                 })
             })
         ]
@@ -20519,7 +21837,7 @@ const GetSharedFieldMapping = async (cohortBuilderConfiguration)=>{
     }
     return sharedFiltersMap;
 };
-const DefaultAccessControlConfiguration = {
+const DefaultAccessControlConfiguration$1 = {
     dataMode: GuppyDataAccessMode.REGULAR,
     tierLimit: -1,
     showAccessLevelControl: false
@@ -20547,7 +21865,7 @@ const ExplorerPageGetServerSideProps = async ()=>{
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
                 //  headerMetadata: cohortBuilderConfiguration.headerMetadata,
                 accessControl: {
-                    ...DefaultAccessControlConfiguration,
+                    ...DefaultAccessControlConfiguration$1,
                     ...cohortBuilderConfiguration.accessControl ?? {}
                 }
             }
@@ -20588,7 +21906,7 @@ const ExplorerPageGetServerSidePropsForConfigId = async (context)=>{
                 explorerConfig: cohortBuilderConfiguration.explorerConfig,
                 // headerMetadata: { ...(cohortBuilderConfiguration?.headerMetadata ? cohortBuilderConfiguration.headerMetadata : {}) },
                 accessControl: {
-                    ...DefaultAccessControlConfiguration,
+                    ...DefaultAccessControlConfiguration$1,
                     ...cohortBuilderConfiguration.accessControl ?? {}
                 }
             }
@@ -25971,6 +27289,65 @@ const TabbedCohortBuilderPageGetServerSideProps = async ()=>{
     }
 };
 
+const RepositoryPage = ({ headerProps, footerProps, configuration, headerMetadata })=>{
+    if (configuration === undefined) {
+        return /*#__PURE__*/ jsxRuntime.jsx(core$1.Center, {
+            maw: 400,
+            h: 100,
+            mx: "auto",
+            children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                children: "Repository config is not defined. Page disabled"
+            })
+        });
+    }
+    console.log('RepositoryPage', configuration);
+    return /*#__PURE__*/ jsxRuntime.jsx(NavPageLayout, {
+        headerProps,
+        footerProps,
+        headerMetadata: {
+            title: 'Gen3 Repository Page',
+            content: 'Repository Page',
+            key: 'gen3-repository-page',
+            ...headerMetadata ? headerMetadata : {},
+            ...configuration?.headerMetadata ? configuration.headerMetadata : {}
+        },
+        children: /*#__PURE__*/ jsxRuntime.jsx(Repository, {
+            ...configuration
+        })
+    });
+};
+
+const DefaultAccessControlConfiguration = {
+    dataMode: GuppyDataAccessMode.REGULAR,
+    tierLimit: -1,
+    showAccessLevelControl: false
+};
+const RepositoryPageGetServerSideProps = async ()=>{
+    try {
+        const repositoryConfiguration = await ContentSource$1.getContentDatabase().get(`${core.GEN3_COMMONS_NAME}/repository.json`);
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                configuration: repositoryConfiguration,
+                //  headerMetadata: cohortBuilderConfiguration.headerMetadata,
+                accessControl: {
+                    ...DefaultAccessControlConfiguration
+                }
+            }
+        };
+    } catch (err) {
+        if (err instanceof Error) {
+            console.warn('Explorer config cannot be read', err);
+        }
+        return {
+            props: {
+                ...await getNavPageLayoutPropsFromConfig(),
+                configuration: undefined
+            }
+        };
+    }
+};
+
 const TailwindConfig = (themer)=>{
     return {
         important: '#__next',
@@ -26463,6 +27840,7 @@ exports.DiscoveryIndexPanel = DiscoveryIndexPanel;
 exports.DiscoveryPage = DiscoveryPage;
 exports.DiscoveryPageGetServerSideProps = DiscoveryPageGetServerSideProps;
 exports.DiscoveryRowRendererFactory = DiscoveryRowRendererFactory;
+exports.DownloadButton = DownloadButton;
 exports.DropdownButton = DropdownButton;
 exports.DropdownPanel = DropdownPanel;
 exports.DropdownWithIcon = DropdownWithIcon;
@@ -26491,6 +27869,7 @@ exports.Gen3Provider = Gen3Provider;
 exports.GqlQueryEditor = GqlQueryEditor$1;
 exports.Header = Header$1;
 exports.HoverLink = HoverLink;
+exports.JSONObjectDownloadButton = JSONObjectDownloadButton;
 exports.LandingPage = LandingPage;
 exports.LandingPageGetServerSideProps = LandingPageGetServerSideProps;
 exports.LoginButton = LoginButton$1;
@@ -26517,6 +27896,9 @@ exports.QueryPage = QueryPage;
 exports.QueryPageGetServerSideProps = QueryPageGetServerSideProps;
 exports.RangeFacet = RangeFacet;
 exports.ReactECharts = ReactECharts;
+exports.Repository = Repository;
+exports.RepositoryPage = RepositoryPage;
+exports.RepositoryPageGetServerSideProps = RepositoryPageGetServerSideProps;
 exports.ResourcesFilters = ResourcesFilters;
 exports.SPECIAL_CASE_FIELDS = SPECIAL_CASE_FIELDS;
 exports.SegmentedControl = SegmentedControl;
@@ -26534,6 +27916,7 @@ exports.TabbedCohortBuilder = TabbedCohortBuilder;
 exports.TabbedCohortBuilderPage = TabbedCohortBuilderPage;
 exports.TabbedCohortBuilderPageGetServerSideProps = TabbedCohortBuilderPageGetServerSideProps;
 exports.TabbedPanel = TabbedPanel;
+exports.TableXPositionContext = TableXPositionContext;
 exports.TagCloud = TagCloud;
 exports.TailwindConfig = TailwindConfig;
 exports.TopBar = TopBar;
@@ -26569,6 +27952,8 @@ exports.filterAggregationsDataKeys = filterAggregationsDataKeys;
 exports.focusStyles = focusStyles;
 exports.getAllFieldsFromFilterConfigs = getAllFieldsFromFilterConfigs;
 exports.getCurrentUnixTimestamp = getCurrentUnixTimestamp;
+exports.getFormattedTimestamp = getFormattedTimestamp;
+exports.getHighResolutionTimestamp = getHighResolutionTimestamp;
 exports.getNavPageLayoutPropsFromConfig = getNavPageLayoutPropsFromConfig;
 exports.getParamsValueAsString = getParamsValueAsString;
 exports.getTagInfo = getTagInfo;
@@ -26578,7 +27963,9 @@ exports.isEnumFacetResponse = isEnumFacetResponse;
 exports.isHeaderMetadata = isHeaderMetadata;
 exports.isPropertyKey = isPropertyKey;
 exports.isTextTransform = isTextTransform$1;
+exports.isTimeGreaterThan = isTimeGreaterThan;
 exports.mapFacetSortToSortType = mapFacetSortToSortType;
+exports.measureExecutionTime = measureExecutionTime;
 exports.processBucketData = processBucketData;
 exports.processLabel = processLabel$1;
 exports.processRangeData = processRangeData;