@gen3/frontend 0.12.63 → 0.12.64

package/dist/pages/cjs/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-pY4GejhP.js');
+var index = require('./index-BQzYPjdE.js');
 require('react/jsx-runtime');
 require('react');
 require('next/navigation');

package/dist/pages/esm/CohortBuilder-CI9PAFLd.js

@@ -0,0 +1,573 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect, useMemo, useCallback } from 'react';
+import { useDeepCompareMemo, useDeepCompareCallback, useDeepCompareEffect } from 'use-deep-compare';
+import { Tabs } from '@mantine/core';
+import { partial } from 'lodash';
+import { useLazyGetMultipleSowerJobStatusQuery, Accessibility, useCoreSelector, selectSharedFilters, useCoreDispatch, selectIndexFilters, selectCurrentCohortId, selectAllCohortFiltersCollapsed, clearCohortFilters, useGetAggsQuery, isIntersection, extractEnumFilterValue, useGetCountsQuery, useSubmitSowerJobMutation, toggleCohortBuilderAllFilters, setSharedFilters } from '@gen3/core';
+import { g as getAllFieldsFromFilterConfigs, r as removeIntersectionFromEnum, p as processBucketData, e as extractRangeValues, a as processRangeData, u as useFieldNameToLabel, b as useToggleExpandFilter, c as useFilterExpandedState, d as useClearFilters, f as useGetFacetFilters, h as useUpdateFilters, i as useSetCohortFilterCombineState, j as useCohortFilterCombineState, k as classifyFacets, E as ErrorCard, Q as QueryExpression, D as DropdownPanel, l as DownloadsPanel, C as CountsValue, t as toDisplayName, m as CollapsableCharts, n as Charts, o as ExplorerTable, q as CohortManager } from './index-BoZwM5wd.js';
+import 'echarts';
+import { useMediaQuery } from '@mantine/hooks';
+import 'victory';
+import 'react-icons/bs';
+import 'react-icons/io';
+import '@mantine/form';
+import 'react-icons/md';
+import 'react-icons/ri';
+import 'react-icons/fa';
+import 'react-icons/pi';
+import '@iconify-icon/react';
+import '@mantine/modals';
+import 'tailwind-merge';
+import 'next/navigation';
+import 'next/image';
+import 'next/router';
+import 'next/link';
+import 'swr';
+import 'cookies-next';
+import 'jose';
+import '@gen3/core/server';
+import 'cookie';
+import '@mantine/notifications';
+import 'react-markdown';
+import 'react-icons/ai';
+import 'next/head';
+import 'remark-gfm';
+import 'rehype-sanitize';
+import 'fs';
+import 'path';
+import 'tailwind-styled-components';
+import 'file-saver';
+import '@tanstack/react-table';
+import 'mantine-react-table-open';
+import 'react-icons/ti';
+import 'react-icons/fi';
+import '@theothergothamdev/pluralize-ts';
+import 'jsonpath-plus';
+import 'redux-persist/integration/react';
+import 'redux-persist';
+import 'redux';
+import '@reduxjs/toolkit';
+import 'redux-persist/lib/storage/createWebStorage';
+import 'filesize';
+import 'react-icons/lu';
+import 'react-dom';
+import 'react-minisearch';
+import 'minisearch';
+import 'lodash/uniq';
+import 'lodash/sum';
+import 'react-icons/fa6';
+import '@dnd-kit/core';
+import '@dnd-kit/sortable';
+import '@dnd-kit/utilities';
+import '@dnd-kit/modifiers';
+import 'universal-cookie';
+import 'next/dist/client/router';
+import 'react-cookie';
+import 'default-composer';
+import 'next/dynamic';
+import 'yaml';
+import '@hello-pangea/dnd';
+import 'tailwindcss/plugin';
+import 'tailwindcss/colors';
+import 'postcss-selector-parser';
+import '@tabler/icons-react';
+
+/**
+ * Hook that sets up an event bus for components to subscribe to and fire off events
+ * when an active Sower job is completed.
+ */ const useSowerJobEventBus = ()=>{
+    const [listeners, setListeners] = useState({});
+    const [pollers, setPollers] = useState(new Set());
+    const [trigger, statusResult] = useLazyGetMultipleSowerJobStatusQuery({
+        pollingInterval: 10000,
+        skipPollingIfUnfocused: true
+    });
+    /**
+   * Function for component to subscribe to sower job updates
+   * @param listenerKey unique key for component
+   * @param newPollers list of jobs to poll the status of
+   * @param callback function to call when a job completes
+   */ const on = (listenerKey, newPollers, callback)=>{
+        setListeners({
+            ...listeners,
+            [listenerKey]: callback
+        });
+        setPollers(new Set([
+            ...pollers,
+            ...newPollers
+        ]));
+    };
+    /**
+   * Function for component to unsubscribe to updates
+   * @param listenerKey unique key for component
+   */ const off = (listenerKey)=>{
+        setListeners(Object.fromEntries(Object.entries(listeners).filter(([key])=>key === listenerKey)));
+    };
+    /**
+   * Function to update the jobs that are polling
+   * @param job new job to add to pollers
+   */ const update = (job)=>{
+        setPollers(new Set([
+            ...pollers,
+            job
+        ]));
+    };
+    useEffect(()=>{
+        void trigger(Array.from(pollers));
+    }, [
+        pollers
+    ]);
+    useEffect(()=>{
+        if (statusResult.isSuccess) {
+            Object.entries(statusResult.currentData || {}).map(([job, response])=>{
+                if (response.status === 'Completed') {
+                    Object.values(listeners).forEach((callback)=>callback(job));
+                    // Remove job from pollers after it has completed
+                    setPollers(new Set([
+                        ...pollers
+                    ].filter((poller)=>poller !== job)));
+                }
+            });
+        }
+    }, [
+        statusResult
+    ]);
+    return {
+        on,
+        off,
+        update
+    };
+};
+
+const EmptyData = {};
+/**
+ * CohortPanel is a React component that provides an interactive interface for cohort exploration and filtering.
+ * It integrates with data services and facilitates visualization, filtering, and analysis tasks.
+ *
+ * @param {Object} props                          The properties required to configure the CohortPanel component.
+ * @param {Object} props.guppyConfig              Configuration object for Guppy, including field mappings and data type information.
+ * @param {Object} props.filters                  Configuration for filter tabs, including filter fields and layout.
+ * @param {Object} [props.charts={}]              Optional set of chart configuration objects for rendering summaries.
+ * @param {Object} [props.chartsSection]          Optional configuration for an additional section of charts.
+ * @param {Object} props.table                    Reference to the table configuration or component for displaying data.
+ * @param {string} props.tabTitle                 Title for the filter tab section.
+ * @param {Object[]|undefined} props.dropdowns    Dropdown menu configuration, allowing for additional filter options or actions.
+ * @param {Object[]|undefined} props.buttons      List of button configurations for actions such as downloads.
+ * @param {boolean} props.loginForDownload        Determines whether login is required to enable download functionality.
+ * @param {boolean} [props.showAccessLevel=false] Indicates if the user access level should be displayed on the panel.
+ *
+ * @returns {JSX.Element}                         Returns a JSX element rendering the CohortPanel. This includes filter options,
+ *                                                summary charts, cohort manager, and data display components.
+ */ const CohortPanel = ({ guppyConfig, filters, charts = {}, chartsSection = undefined, table, tabTitle, dropdowns, buttons, loginForDownload, showAccessLevel = false })=>{
+    const isSm = useMediaQuery('(min-width: 639px)');
+    const isMd = useMediaQuery('(min-width: 1373px)');
+    const isXl = useMediaQuery('(min-width: 1600px)');
+    const [accessLevel, setAccessLevel] = useState(Accessibility.ALL);
+    const sharedFiltersMap = useCoreSelector((state)=>selectSharedFilters(state));
+    const defaultDropdowns = useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const numCols = useMemo(()=>{
+        if (isSm) return 1;
+        if (isMd) return 2;
+        if (isXl) return 4;
+        return 3;
+    }, [
+        isSm,
+        isMd,
+        isXl
+    ]);
+    const index = guppyConfig.dataType;
+    const indexPrefix = guppyConfig?.indexPrefix ?? '';
+    const fields = useMemo(()=>getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
+        filters?.tabs
+    ]);
+    const coreDispatch = useCoreDispatch();
+    const [facetDefinitions, setFacetDefinitions] = useState({});
+    const [summaryCharts, setSummaryCharts] = useState({});
+    const cohortFilters = useCoreSelector((state)=>selectIndexFilters(state, index));
+    const cohortId = useCoreSelector((state)=>selectCurrentCohortId(state));
+    const allFiltersCollapsed = useCoreSelector((state)=>selectAllCohortFiltersCollapsed(state, index));
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(toggleCohortBuilderAllFilters({
+            expand,
+            index
+        }));
+    };
+    const clearAllFilters = useCallback(()=>{
+        coreDispatch(clearCohortFilters({
+            index
+        }));
+    }, [
+        coreDispatch,
+        index
+    ]);
+    const { data, isSuccess, isError: isAggsQueryError } = useGetAggsQuery({
+        type: index,
+        fields: fields,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        queryId: cohortId,
+        indexPrefix: indexPrefix
+    });
+    const chartKeys = useDeepCompareMemo(()=>[
+            ...Object.keys(chartsSection?.charts ?? {}),
+            ...Object.keys(charts)
+        ], [
+        chartsSection?.charts,
+        charts
+    ]);
+    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = useGetAggsQuery({
+        type: index,
+        fields: chartKeys,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        filterSelf: true,
+        queryId: cohortId,
+        indexPrefix: indexPrefix
+    }, {
+        skip: chartKeys.length === 0
+    });
+    const cleanChartData = useDeepCompareMemo(()=>{
+        if (isChartSuccess && chartData) {
+            const cleanedData = {};
+            const totalCount = chartData._totalCount[0]?.count;
+            Object.keys(summaryCharts).forEach((key)=>{
+                if (!(key in chartData)) {
+                    return;
+                } // handle missing key in  data
+                // remove empty keys
+                cleanedData[key] = chartData[key].filter((x)=>typeof x.key !== 'string' ? true : x.key !== '');
+                const facetDef = facetDefinitions?.[key];
+                if (facetDef?.excludeValues) {
+                    cleanedData[key] = cleanedData[key].filter((x)=>typeof x.key !== 'string' ? true : facetDef?.excludeValues?.includes(String(x.key)) === false);
+                }
+                if (cleanedData[key].length === 0 && totalCount) {
+                    // if no keys adds back no data
+                    cleanedData[key] = [
+                        {
+                            key: 'no data',
+                            count: totalCount
+                        }
+                    ];
+                }
+            });
+            return cleanedData;
+        }
+        return chartData;
+    }, [
+        chartData,
+        isChartSuccess,
+        summaryCharts
+    ]);
+    const getEnumFacetData = useDeepCompareCallback((field)=>{
+        let filters = undefined;
+        let combineMode = 'or';
+        if (field in cohortFilters.root) {
+            if (isIntersection(cohortFilters.root[field])) {
+                const intersectionFilters = removeIntersectionFromEnum(cohortFilters.root[field]);
+                if (intersectionFilters) {
+                    filters = extractEnumFilterValue(intersectionFilters);
+                    combineMode = 'and';
+                }
+            } else {
+                filters = extractEnumFilterValue(cohortFilters.root[field]);
+            }
+        }
+        return {
+            data: processBucketData(data?.[field]),
+            enumFilters: filters,
+            combineMode: combineMode,
+            isSuccess: isSuccess
+        };
+    }, [
+        cohortFilters.root,
+        data,
+        isSuccess
+    ]);
+    const getRangeFacetData = useDeepCompareCallback((field)=>{
+        return {
+            data: processRangeData(data?.[field]),
+            filters: extractRangeValues(cohortFilters.root[field]),
+            isSuccess: isSuccess
+        };
+    }, [
+        data,
+        cohortFilters.root,
+        isSuccess
+    ]);
+    // Set up the hooks for the facet components to use based on the required index
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const facetDataHooks = useDeepCompareMemo(()=>{
+        return {
+            // TODO: see if there a better way to do this
+            enum: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: partial(useUpdateFilters, index),
+                useGetFacetFilters: partial(useGetFacetFilters, index),
+                useClearFilter: partial(useClearFilters, index),
+                useFilterExpanded: partial(useFilterExpandedState, index),
+                useToggleExpandFilter: partial(useToggleExpandFilter, index),
+                useGetCombineMode: partial(useCohortFilterCombineState, index),
+                useSetCombineMode: partial(useSetCohortFilterCombineState, index),
+                useFieldNameToLabel: useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            exact: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: partial(useUpdateFilters, index),
+                useGetFacetFilters: partial(useGetFacetFilters, index),
+                useClearFilter: partial(useClearFilters, index),
+                useFilterExpanded: partial(useFilterExpandedState, index),
+                useToggleExpandFilter: partial(useToggleExpandFilter, index),
+                useFieldNameToLabel: useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            multiselect: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: partial(useUpdateFilters, index),
+                useGetFacetFilters: partial(useGetFacetFilters, index),
+                useClearFilter: partial(useClearFilters, index),
+                useFilterExpanded: partial(useFilterExpandedState, index),
+                useToggleExpandFilter: partial(useToggleExpandFilter, index),
+                useFieldNameToLabel: useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            range: {
+                useGetFacetData: getRangeFacetData,
+                useUpdateFacetFilters: partial(useUpdateFilters, index),
+                useGetFacetFilters: partial(useGetFacetFilters, index),
+                useClearFilter: partial(useClearFilters, index),
+                useFilterExpanded: partial(useFilterExpandedState, index),
+                useToggleExpandFilter: partial(useToggleExpandFilter, index),
+                useFieldNameToLabel: useFieldNameToLabel,
+                useTotalCounts: undefined
+            }
+        };
+    }, [
+        getEnumFacetData,
+        getRangeFacetData,
+        index
+    ]);
+    // Set the facet definitions based on the data only the first time the data is loaded
+    useDeepCompareEffect(()=>{
+        if (isSuccess && Object.keys(facetDefinitions).length === 0) {
+            const configFacetDefs = filters?.tabs.reduce((acc, tab)=>{
+                return {
+                    ...tab.fieldsConfig,
+                    ...acc
+                };
+            }, {});
+            const facetDefs = classifyFacets(data, index, guppyConfig?.fieldMapping ?? [], configFacetDefs ?? {}, sharedFiltersMap);
+            setFacetDefinitions(facetDefs);
+            // setup summary charts since nested fields can be listed by the split field name
+            const chartDefinitions = chartsSection?.charts ?? charts;
+            const summaryCharts = Object.keys(chartDefinitions).reduce((acc, field)=>{
+                let chartField = field;
+                if (facetDefs?.[field] === undefined) {
+                    const res = Object.values(facetDefs).filter((def)=>{
+                        return def.dataField === field;
+                    });
+                    if (res.length > 0) {
+                        chartField = res[0].field;
+                    }
+                }
+                return {
+                    ...acc,
+                    [chartField]: chartDefinitions[field]
+                };
+            }, {});
+            setSummaryCharts(summaryCharts);
+        }
+    }, [
+        isSuccess,
+        data,
+        facetDefinitions,
+        index,
+        guppyConfig.fieldMapping,
+        charts,
+        chartsSection
+    ]);
+    const { data: counts, isFetching: isCountsFetching, isError: isCountsError } = useGetCountsQuery({
+        type: index,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        queryId: cohortId
+    });
+    // oxlint-disable-next-line no-unused-vars
+    const [submitJob, result] = useSubmitSowerJobMutation();
+    const { update } = useSowerJobEventBus();
+    useEffect(()=>{
+        if (result?.data) {
+            update(result.data?.uid);
+        }
+    }, [
+        result
+    ]);
+    if (isCountsError || isAggsQueryError) {
+        return /*#__PURE__*/ jsx(ErrorCard, {
+            message: "Unable to fetch data from server"
+        }); // TODO: replace with configurable message
+    }
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col mt-3 relative px-4 bg-base-lightest w-full",
+        children: [
+            /*#__PURE__*/ jsx(QueryExpression, {
+                index: index
+            }),
+            /*#__PURE__*/ jsxs("div", {
+                className: "flex w-full",
+                children: [
+                    /*#__PURE__*/ jsx("div", {
+                        id: "cohort-builder-filters",
+                        className: "flex-shrink-0 md:w-1/4 lg:w-1/5",
+                        children: filters?.tabs && /*#__PURE__*/ jsx(DropdownPanel, {
+                            filters: filters,
+                            tabTitle: tabTitle,
+                            facetDefinitions: facetDefinitions,
+                            facetDataHooks: facetDataHooks,
+                            onAccessChange: setAccessLevel,
+                            accessLevel: accessLevel,
+                            showAccessLevel: showAccessLevel,
+                            allFiltersCollapsed: allFiltersCollapsed,
+                            toggleAllFiltersExpanded: toggleAllFiltersExpanded,
+                            clearAllFilters: clearAllFilters
+                        })
+                    }),
+                    /*#__PURE__*/ jsxs("div", {
+                        id: "cohort-builder-content",
+                        className: "flex flex-col md:w-3/4 lg:w-4/5 pl-4",
+                        children: [
+                            /*#__PURE__*/ jsxs("div", {
+                                className: "flex justify-between mb-2 ml-2",
+                                children: [
+                                    /*#__PURE__*/ jsx(DownloadsPanel, {
+                                        dropdowns: defaultDropdowns,
+                                        buttons: defaultButtons,
+                                        loginForDownload: loginForDownload,
+                                        index: index,
+                                        totalCount: counts ?? 0,
+                                        fields: table?.fields ?? [],
+                                        filter: cohortFilters
+                                    }),
+                                    /*#__PURE__*/ jsx(CountsValue, {
+                                        label: guppyConfig?.nodeCountTitle || toDisplayName(index),
+                                        counts: counts,
+                                        isFetching: isCountsFetching,
+                                        isError: isCountsError
+                                    })
+                                ]
+                            }),
+                            chartsSection?.enabled ? /*#__PURE__*/ jsx(CollapsableCharts, {
+                                config: {
+                                    ...chartsSection,
+                                    charts: summaryCharts
+                                },
+                                data: cleanChartData ?? EmptyData,
+                                isSuccess: isChartSuccess,
+                                isFetching: isChartFetching,
+                                isError: isChartError
+                            }) : /*#__PURE__*/ jsx(Charts, {
+                                charts: summaryCharts,
+                                data: cleanChartData ?? EmptyData,
+                                counts: counts,
+                                isSuccess: isChartSuccess,
+                                isError: isChartError,
+                                numCols: numCols
+                            }),
+                            table?.enabled && /*#__PURE__*/ jsx(Fragment, {
+                                children: /*#__PURE__*/ jsx("div", {
+                                    className: "mt-2 flex flex-col",
+                                    children: /*#__PURE__*/ jsx(ExplorerTable, {
+                                        index: index,
+                                        tableConfig: table,
+                                        accessibility: accessLevel
+                                    })
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+};
+
+const TabsLayoutToComponentProp = (tabsLayout)=>{
+    if (!tabsLayout) {
+        return 'flex-start';
+    }
+    switch(tabsLayout){
+        case 'left':
+            {
+                return 'flex-start';
+            }
+        case 'right':
+            {
+                return 'flex-end';
+            }
+        case 'center':
+            {
+                return 'center';
+            }
+        default:
+            {
+                return 'flex-start';
+            }
+    }
+};
+
+const useGetCurrentCohort = ()=>{
+    return useCoreSelector((state)=>selectCurrentCohortId(state));
+};
+const CohortBuilder = ({ explorerConfig, sharedFiltersMap, tabsLayout = 'left', enableCohortManager = true, activeTab })=>{
+    const dispatch = useCoreDispatch();
+    dispatch(setSharedFilters(sharedFiltersMap ?? {}));
+    const configuration = useDeepCompareMemo(()=>explorerConfig, [
+        explorerConfig
+    ]);
+    return /*#__PURE__*/ jsxs("div", {
+        className: "flex flex-col w-full mt-2",
+        children: [
+            enableCohortManager ? /*#__PURE__*/ jsx(CohortManager, {}) : null,
+            /*#__PURE__*/ jsxs(Tabs, {
+                color: "primary.5",
+                variant: explorerConfig[0]?.tabType,
+                keepMounted: true,
+                defaultValue: activeTab ?? explorerConfig[0].tabTitle,
+                children: [
+                    /*#__PURE__*/ jsx(Tabs.List, {
+                        className: "w-full",
+                        justify: TabsLayoutToComponentProp(tabsLayout),
+                        children: configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Tab, {
+                                value: panelConfig.tabTitle,
+                                children: panelConfig.tabTitle
+                            }, `${panelConfig.tabTitle}-tabList`))
+                    }),
+                    configuration.map((panelConfig)=>/*#__PURE__*/ jsx(Tabs.Panel, {
+                            value: panelConfig.tabTitle,
+                            children: /*#__PURE__*/ jsx(CohortPanel, {
+                                guppyConfig: panelConfig.guppyConfig,
+                                chartsSection: panelConfig?.chartsSection,
+                                charts: panelConfig?.charts,
+                                filters: panelConfig.filters,
+                                tabTitle: panelConfig.tabTitle,
+                                table: panelConfig.table,
+                                dropdowns: panelConfig.dropdowns,
+                                buttons: panelConfig.buttons,
+                                loginForDownload: panelConfig.loginForDownload,
+                                sharedFiltersMap: panelConfig.sharedFiltersMap
+                            }, `${panelConfig.tabTitle}-CohortPanel`)
+                        }, `${panelConfig.tabTitle}-tabPanel`))
+                ]
+            })
+        ]
+    });
+};
+
+export { CohortBuilder as default, useGetCurrentCohort };
+//# sourceMappingURL=CohortBuilder-CI9PAFLd.js.map