@gen3/frontend 0.12.62 → 0.12.63

package/dist/pages/cjs/CohortBuilder-iRUJA2S8.js

@@ -0,0 +1,576 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var useDeepCompare = require('use-deep-compare');
+var core$1 = require('@mantine/core');
+var _ = require('lodash');
+var core = require('@gen3/core');
+var index = require('./index-pY4GejhP.js');
+require('echarts');
+var hooks = require('@mantine/hooks');
+require('victory');
+require('react-icons/bs');
+require('react-icons/io');
+require('@mantine/form');
+require('react-icons/md');
+require('react-icons/ri');
+require('react-icons/fa');
+require('react-icons/pi');
+require('@iconify-icon/react');
+require('@mantine/modals');
+require('tailwind-merge');
+require('next/navigation');
+require('next/image');
+require('next/router');
+require('next/link');
+require('swr');
+require('cookies-next');
+require('jose');
+require('@gen3/core/server');
+require('cookie');
+require('@mantine/notifications');
+require('react-markdown');
+require('react-icons/ai');
+require('next/head');
+require('remark-gfm');
+require('rehype-sanitize');
+require('fs');
+require('path');
+require('tailwind-styled-components');
+require('file-saver');
+require('@tanstack/react-table');
+require('mantine-react-table-open');
+require('react-icons/ti');
+require('react-icons/fi');
+require('@theothergothamdev/pluralize-ts');
+require('jsonpath-plus');
+require('redux-persist/integration/react');
+require('redux-persist');
+require('redux');
+require('@reduxjs/toolkit');
+require('redux-persist/lib/storage/createWebStorage');
+require('filesize');
+require('react-icons/lu');
+require('react-dom');
+require('react-minisearch');
+require('minisearch');
+require('lodash/uniq');
+require('lodash/sum');
+require('react-icons/fa6');
+require('@dnd-kit/core');
+require('@dnd-kit/sortable');
+require('@dnd-kit/utilities');
+require('@dnd-kit/modifiers');
+require('universal-cookie');
+require('next/dist/client/router');
+require('react-cookie');
+require('default-composer');
+require('next/dynamic');
+require('yaml');
+require('@hello-pangea/dnd');
+require('tailwindcss/plugin');
+require('tailwindcss/colors');
+require('postcss-selector-parser');
+require('@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] = React.useState({});
+    const [pollers, setPollers] = React.useState(new Set());
+    const [trigger, statusResult] = core.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
+        ]));
+    };
+    React.useEffect(()=>{
+        void trigger(Array.from(pollers));
+    }, [
+        pollers
+    ]);
+    React.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 = hooks.useMediaQuery('(min-width: 639px)');
+    const isMd = hooks.useMediaQuery('(min-width: 1373px)');
+    const isXl = hooks.useMediaQuery('(min-width: 1600px)');
+    const [accessLevel, setAccessLevel] = React.useState(core.Accessibility.ALL);
+    const sharedFiltersMap = core.useCoreSelector((state)=>core.selectSharedFilters(state));
+    const defaultDropdowns = React.useMemo(()=>dropdowns ?? {}, [
+        dropdowns
+    ]);
+    const defaultButtons = React.useMemo(()=>buttons ?? [], [
+        buttons
+    ]);
+    const numCols = React.useMemo(()=>{
+        if (isSm) return 1;
+        if (isMd) return 2;
+        if (isXl) return 4;
+        return 3;
+    }, [
+        isSm,
+        isMd,
+        isXl
+    ]);
+    const index$1 = guppyConfig.dataType;
+    const indexPrefix = guppyConfig?.indexPrefix ?? '';
+    const fields = React.useMemo(()=>index.getAllFieldsFromFilterConfigs(filters?.tabs ?? []), [
+        filters?.tabs
+    ]);
+    const coreDispatch = core.useCoreDispatch();
+    const [facetDefinitions, setFacetDefinitions] = React.useState({});
+    const [summaryCharts, setSummaryCharts] = React.useState({});
+    const cohortFilters = core.useCoreSelector((state)=>core.selectIndexFilters(state, index$1));
+    const cohortId = core.useCoreSelector((state)=>core.selectCurrentCohortId(state));
+    const allFiltersCollapsed = core.useCoreSelector((state)=>core.selectAllCohortFiltersCollapsed(state, index$1));
+    const toggleAllFiltersExpanded = (expand)=>{
+        coreDispatch(core.toggleCohortBuilderAllFilters({
+            expand,
+            index: index$1
+        }));
+    };
+    const clearAllFilters = React.useCallback(()=>{
+        coreDispatch(core.clearCohortFilters({
+            index: index$1
+        }));
+    }, [
+        coreDispatch,
+        index$1
+    ]);
+    const { data, isSuccess, isError: isAggsQueryError } = core.useGetAggsQuery({
+        type: index$1,
+        fields: fields,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        queryId: cohortId,
+        indexPrefix: indexPrefix
+    });
+    const chartKeys = useDeepCompare.useDeepCompareMemo(()=>[
+            ...Object.keys(chartsSection?.charts ?? {}),
+            ...Object.keys(charts)
+        ], [
+        chartsSection?.charts,
+        charts
+    ]);
+    const { data: chartData, isSuccess: isChartSuccess, isFetching: isChartFetching, isError: isChartError } = core.useGetAggsQuery({
+        type: index$1,
+        fields: chartKeys,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        filterSelf: true,
+        queryId: cohortId,
+        indexPrefix: indexPrefix
+    }, {
+        skip: chartKeys.length === 0
+    });
+    const cleanChartData = useDeepCompare.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 = useDeepCompare.useDeepCompareCallback((field)=>{
+        let filters = undefined;
+        let combineMode = 'or';
+        if (field in cohortFilters.root) {
+            if (core.isIntersection(cohortFilters.root[field])) {
+                const intersectionFilters = index.removeIntersectionFromEnum(cohortFilters.root[field]);
+                if (intersectionFilters) {
+                    filters = core.extractEnumFilterValue(intersectionFilters);
+                    combineMode = 'and';
+                }
+            } else {
+                filters = core.extractEnumFilterValue(cohortFilters.root[field]);
+            }
+        }
+        return {
+            data: index.processBucketData(data?.[field]),
+            enumFilters: filters,
+            combineMode: combineMode,
+            isSuccess: isSuccess
+        };
+    }, [
+        cohortFilters.root,
+        data,
+        isSuccess
+    ]);
+    const getRangeFacetData = useDeepCompare.useDeepCompareCallback((field)=>{
+        return {
+            data: index.processRangeData(data?.[field]),
+            filters: index.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 = useDeepCompare.useDeepCompareMemo(()=>{
+        return {
+            // TODO: see if there a better way to do this
+            enum: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: _.partial(index.useUpdateFilters, index$1),
+                useGetFacetFilters: _.partial(index.useGetFacetFilters, index$1),
+                useClearFilter: _.partial(index.useClearFilters, index$1),
+                useFilterExpanded: _.partial(index.useFilterExpandedState, index$1),
+                useToggleExpandFilter: _.partial(index.useToggleExpandFilter, index$1),
+                useGetCombineMode: _.partial(index.useCohortFilterCombineState, index$1),
+                useSetCombineMode: _.partial(index.useSetCohortFilterCombineState, index$1),
+                useFieldNameToLabel: index.useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            exact: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: _.partial(index.useUpdateFilters, index$1),
+                useGetFacetFilters: _.partial(index.useGetFacetFilters, index$1),
+                useClearFilter: _.partial(index.useClearFilters, index$1),
+                useFilterExpanded: _.partial(index.useFilterExpandedState, index$1),
+                useToggleExpandFilter: _.partial(index.useToggleExpandFilter, index$1),
+                useFieldNameToLabel: index.useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            multiselect: {
+                useGetFacetData: getEnumFacetData,
+                useUpdateFacetFilters: _.partial(index.useUpdateFilters, index$1),
+                useGetFacetFilters: _.partial(index.useGetFacetFilters, index$1),
+                useClearFilter: _.partial(index.useClearFilters, index$1),
+                useFilterExpanded: _.partial(index.useFilterExpandedState, index$1),
+                useToggleExpandFilter: _.partial(index.useToggleExpandFilter, index$1),
+                useFieldNameToLabel: index.useFieldNameToLabel,
+                useTotalCounts: undefined
+            },
+            range: {
+                useGetFacetData: getRangeFacetData,
+                useUpdateFacetFilters: _.partial(index.useUpdateFilters, index$1),
+                useGetFacetFilters: _.partial(index.useGetFacetFilters, index$1),
+                useClearFilter: _.partial(index.useClearFilters, index$1),
+                useFilterExpanded: _.partial(index.useFilterExpandedState, index$1),
+                useToggleExpandFilter: _.partial(index.useToggleExpandFilter, index$1),
+                useFieldNameToLabel: index.useFieldNameToLabel,
+                useTotalCounts: undefined
+            }
+        };
+    }, [
+        getEnumFacetData,
+        getRangeFacetData,
+        index$1
+    ]);
+    // Set the facet definitions based on the data only the first time the data is loaded
+    useDeepCompare.useDeepCompareEffect(()=>{
+        if (isSuccess && Object.keys(facetDefinitions).length === 0) {
+            const configFacetDefs = filters?.tabs.reduce((acc, tab)=>{
+                return {
+                    ...tab.fieldsConfig,
+                    ...acc
+                };
+            }, {});
+            const facetDefs = index.classifyFacets(data, index$1, 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$1,
+        guppyConfig.fieldMapping,
+        charts,
+        chartsSection
+    ]);
+    const { data: counts, isFetching: isCountsFetching, isError: isCountsError } = core.useGetCountsQuery({
+        type: index$1,
+        filters: cohortFilters,
+        accessibility: accessLevel,
+        queryId: cohortId
+    });
+    // oxlint-disable-next-line no-unused-vars
+    const [submitJob, result] = core.useSubmitSowerJobMutation();
+    const { update } = useSowerJobEventBus();
+    React.useEffect(()=>{
+        if (result?.data) {
+            update(result.data?.uid);
+        }
+    }, [
+        result
+    ]);
+    if (isCountsError || isAggsQueryError) {
+        return /*#__PURE__*/ jsxRuntime.jsx(index.ErrorCard, {
+            message: "Unable to fetch data from server"
+        }); // TODO: replace with configurable message
+    }
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col mt-3 relative px-4 bg-base-lightest w-full",
+        children: [
+            /*#__PURE__*/ jsxRuntime.jsx(index.QueryExpression, {
+                index: index$1
+            }),
+            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                className: "flex w-full",
+                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(index.DropdownPanel, {
+                            filters: filters,
+                            tabTitle: tabTitle,
+                            facetDefinitions: facetDefinitions,
+                            facetDataHooks: facetDataHooks,
+                            onAccessChange: setAccessLevel,
+                            accessLevel: accessLevel,
+                            showAccessLevel: showAccessLevel,
+                            allFiltersCollapsed: allFiltersCollapsed,
+                            toggleAllFiltersExpanded: toggleAllFiltersExpanded,
+                            clearAllFilters: clearAllFilters
+                        })
+                    }),
+                    /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                        id: "cohort-builder-content",
+                        className: "flex flex-col md:w-3/4 lg:w-4/5 pl-4",
+                        children: [
+                            /*#__PURE__*/ jsxRuntime.jsxs("div", {
+                                className: "flex justify-between mb-2 ml-2",
+                                children: [
+                                    /*#__PURE__*/ jsxRuntime.jsx(index.DownloadsPanel, {
+                                        dropdowns: defaultDropdowns,
+                                        buttons: defaultButtons,
+                                        loginForDownload: loginForDownload,
+                                        index: index$1,
+                                        totalCount: counts ?? 0,
+                                        fields: table?.fields ?? [],
+                                        filter: cohortFilters
+                                    }),
+                                    /*#__PURE__*/ jsxRuntime.jsx(index.CountsValue, {
+                                        label: guppyConfig?.nodeCountTitle || index.toDisplayName(index$1),
+                                        counts: counts,
+                                        isFetching: isCountsFetching,
+                                        isError: isCountsError
+                                    })
+                                ]
+                            }),
+                            chartsSection?.enabled ? /*#__PURE__*/ jsxRuntime.jsx(index.CollapsableCharts, {
+                                config: {
+                                    ...chartsSection,
+                                    charts: summaryCharts
+                                },
+                                data: cleanChartData ?? EmptyData,
+                                isSuccess: isChartSuccess,
+                                isFetching: isChartFetching,
+                                isError: isChartError
+                            }) : /*#__PURE__*/ jsxRuntime.jsx(index.Charts, {
+                                charts: summaryCharts,
+                                data: cleanChartData ?? EmptyData,
+                                counts: counts,
+                                isSuccess: isChartSuccess,
+                                isError: isChartError,
+                                numCols: numCols
+                            }),
+                            table?.enabled && /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+                                children: /*#__PURE__*/ jsxRuntime.jsx("div", {
+                                    className: "mt-2 flex flex-col",
+                                    children: /*#__PURE__*/ jsxRuntime.jsx(index.ExplorerTable, {
+                                        index: index$1,
+                                        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 core.useCoreSelector((state)=>core.selectCurrentCohortId(state));
+};
+const CohortBuilder = ({ explorerConfig, sharedFiltersMap, tabsLayout = 'left', enableCohortManager = true, activeTab })=>{
+    const dispatch = core.useCoreDispatch();
+    dispatch(core.setSharedFilters(sharedFiltersMap ?? {}));
+    const configuration = useDeepCompare.useDeepCompareMemo(()=>explorerConfig, [
+        explorerConfig
+    ]);
+    return /*#__PURE__*/ jsxRuntime.jsxs("div", {
+        className: "flex flex-col w-full mt-2",
+        children: [
+            enableCohortManager ? /*#__PURE__*/ jsxRuntime.jsx(index.CohortManager, {}) : null,
+            /*#__PURE__*/ jsxRuntime.jsxs(core$1.Tabs, {
+                color: "primary.5",
+                variant: explorerConfig[0]?.tabType,
+                keepMounted: true,
+                defaultValue: activeTab ?? explorerConfig[0].tabTitle,
+                children: [
+                    /*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.List, {
+                        className: "w-full",
+                        justify: TabsLayoutToComponentProp(tabsLayout),
+                        children: configuration.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Tab, {
+                                value: panelConfig.tabTitle,
+                                children: panelConfig.tabTitle
+                            }, `${panelConfig.tabTitle}-tabList`))
+                    }),
+                    configuration.map((panelConfig)=>/*#__PURE__*/ jsxRuntime.jsx(core$1.Tabs.Panel, {
+                            value: panelConfig.tabTitle,
+                            children: /*#__PURE__*/ jsxRuntime.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`))
+                ]
+            })
+        ]
+    });
+};
+
+exports.default = CohortBuilder;
+exports.useGetCurrentCohort = useGetCurrentCohort;
+//# sourceMappingURL=CohortBuilder-iRUJA2S8.js.map