@gen3/frontend 0.11.25 → 0.11.27

package/dist/esm/index.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import React__default, { createContext, useState, useMemo, useEffect, useCallback, useContext, useRef, createElement, forwardRef, useReducer } from 'react';
+import React__default, { createContext, useState, useMemo, useEffect, useRef, useCallback, useContext, createElement, forwardRef, useReducer } from 'react';
 import { useUserAuth, useCoreSelector, selectUserDetails, useGetAuthzMappingsQuery, fetchFence, isFetchError, WorkspaceStatus, useGetWorkspaceStatusQuery, useGetWorkspacePayModelsQuery, useTerminateWorkspaceMutation, selectRequestedWorkspaceStatus, selectRequestedWorkspaceStatusTimestamp, useCoreDispatch, setActiveWorkspaceStatus, RequestedWorkspaceStatus, setRequestedWorkspaceStatus, isTimeGreaterThan, useGetCSRFQuery, useLazyFetchUserDetailsQuery, selectUserAuthStatus, GEN3_REDIRECT_URL, GEN3_FENCE_API, showModal, Modals, isAuthenticated, useGetLoginProvidersQuery, hideModal, selectCurrentModal, fieldNameToTitle, isOperationWithField, extractEnumFilterValue, selectIndexedFilterByName, selectShouldShareFilters, selectSharedFilters, updateCohortFilter as updateCohortFilter$1, isOperatorWithFieldAndArrayOfOperands, isUnion, removeCohortFilter as removeCohortFilter$1, trimFirstFieldNameToTitle, selectAllCohortFiltersCollapsed, Accessibility, toggleCohortBuilderAllFilters, setShouldShareFilters, useIsUserLoggedIn, GEN3_DOMAIN, useDataLibrary, DataLibraryStoreMode, buildListItemsGroupedByDataset, extractFileDatasetsInRecords, useGetMDSQuery, selectAuthzMappingData, useGetAggMDSQuery, useAskQuestionMutation, useGetIndexAggMDSQuery, useGetTagsQuery, useGetRawDataAndTotalCountsQuery, selectIndexFilters, isJSONValue, downloadFromGuppyToBlob, downloadJSONDataFromGuppy, toggleCohortBuilderCategoryFilter, selectCohortFilterExpanded, setCohortFilterCombineMode, selectCohortFilterCombineMode, selectCohortFilters, setCohortFilter as setCohortFilter$1, clearCohortFilters as clearCohortFilters$1, handleOperation, selectAvailableCohorts, selectCurrentCohortId as selectCurrentCohortId$1, selectCurrentCohortModified, selectCurrentCohortSaved, setCohortIndexFilters, setCurrentCohortId as setCurrentCohortId$1, selectCurrentCohortName as selectCurrentCohortName$1, useGetAggsQuery, useGetAggsNoFilterSelfQuery, isIntersection, useGetCountsQuery, selectAllCohorts as selectAllCohorts$1, selectCurrentCohort as selectCurrentCohort$1, isIndexedFilterSetEmpty, removeCohort as removeCohort$1, updateCohortName as updateCohortName$1, createNewCohort as createNewCohort$1, duplicateCohort, setSharedFilters, usePrevious, selectHeadersWithCSRFToken, GEN3_GUPPY_API, useLaunchWorkspaceMutation, selectActiveWorkspaceStatus, isFetchBaseQueryError, setActiveWorkspace, getCurrentTimestamp, selectWorkspaceStatusFromService, selectActiveWorkspaceId, useGetWorkspaceOptionsQuery, GEN3_WORKSPACE_API, useGetExternalLoginsQuery, useSetCurrentPayModelMutation, PodStatus, PodConditionType, isWorkspaceRunningOrStopping, GEN3_API, GEN3_COMMONS_NAME, CohortStorage, createAppStore, getRemoteSupportServiceRegistry, isHttpStatusError, MissingServiceConfigurationError, useLazyGetAggsNoFilterSelfQuery, useCreateRequestMutation, buildGetAggregationQuery, processHistogramResponse, roundHistogramResponse, selectCSRFToken, useUserRequestQuery, getGen3AppId, createGen3AppWithOwnStore, useGeneralGQLQuery, createAppApiForRTKQ, useGetDictionaryQuery, useGetMetadataByIdQuery, createGen3App, CoreProvider, fetchJSONDataFromURL, HttpMethod, groupSharedFields, useGetCredentialsQuery, useRemoveCredentialMutation, useAddNewCredentialMutation, useGetProjectsDetailsQuery, useGetSubmissionsQuery, isCohortItem, isFileItem, fetchFencePresignedURL, HTTPError, getFederatedLoginStatus, queryMultipleMDSRecords, GEN3_MANIFEST_API, extractIndexFromDataLibraryCohort, isFilterSet, getNumberOfItemsInDatalist, isAdditionalDataItem, useLazyGetCrosswalkDataQuery } from '@gen3/core';
 import { LoadingOverlay, Card, Group, Avatar, Text, Checkbox, Stack, Center, Loader, Tooltip, UnstyledButton, ThemeIcon, Box, Select, Button, Divider, Textarea, FileButton, Anchor, Modal, Grid, Table, ColorSwatch, useMantineTheme, Accordion, Switch, SegmentedControl as SegmentedControl$1, ActionIcon, Badge, TextInput, NumberInput, RangeSlider, MultiSelect, Tabs, SimpleGrid, Highlight, MantineProvider, Flex, Menu, Alert, Drawer, CopyButton, factory, useProps, getStyleObject, Paper, useCombobox, Combobox, ScrollArea, Autocomplete, Title, Transition, rem, Stepper, Spoiler, Image as Image$1, NavLink, List, createTheme, Pagination, FileInput, CloseButton } from '@mantine/core';
 import { useDeepCompareEffect, useDeepCompareMemo, useDeepCompareCallback } from 'use-deep-compare';
@@ -12,7 +12,7 @@ import useSWR from 'swr';
 import { errors, importSPKI, jwtVerify, decodeJwt } from 'jose';
 import { notifications, showNotification, cleanNotifications, Notifications } from '@mantine/notifications';
 import tinycolor from 'tinycolor2';
-import { capitalize as capitalize$1, toString, isArray, get, omit, partial, cloneDeep, unset } from 'lodash';
+import { capitalize as capitalize$1, toString, isArray, uniqueId, reduce, includes, isPlainObject, get, omit, partial, cloneDeep, unset } from 'lodash';
 import { twMerge } from 'tailwind-merge';
 import { BsExclamationTriangle, BsArrowsFullscreen } from 'react-icons/bs';
 import { IoMdInformationCircleOutline, IoMdArrowDropdown, IoMdRefresh, IoMdLogIn } from 'react-icons/io';
@@ -45,7 +45,7 @@ import MiniSearch from 'minisearch';
 import uniq from 'lodash/uniq';
 import sum from 'lodash/sum';
 import { LuCircleSlash, LuClock, LuLock, LuUnlock } from 'react-icons/lu';
-import 'universal-cookie';
+import Cookies from 'universal-cookie';
 import GraphiQL from 'graphiql';
 import fs from 'fs';
 import path from 'path';
@@ -860,6 +860,7 @@ const workspaceShutdownAlertLimit = 30000; // 5 minutes: 5 * 60 * 1000 TODO Figu
     }
 };
 
+const ACTIVITY_CHANNEL = 'gen3-user-activity';
 const logoutSession = async ()=>{
     // logged in using credentials then execute credentials logout first
     const accessToken = getCookie('credentials_token');
@@ -943,6 +944,27 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
     const [getUserDetails] = useLazyFetchUserDetailsQuery(); // Fetch user details
     const userStatus = useCoreSelector((state)=>selectUserAuthStatus(state));
     const [mostRecentActivityTimestamp, setMostRecentActivityTimestamp] = useState(Date.now());
+    const broadcastChannelRef = useRef(null);
+    // Initialize BroadcastChannel for cross-tab communication
+    // any user event on one tab or window will update mostRecentActivityTimestamp
+    useEffect(()=>{
+        if (typeof window !== 'undefined') {
+            broadcastChannelRef.current = new BroadcastChannel(ACTIVITY_CHANNEL);
+            // Listen for activity updates from other tabs
+            const handleActivityMessage = (event)=>{
+                if (event.data.type === 'activity-update') {
+                    setMostRecentActivityTimestamp(event.data.timestamp);
+                }
+            };
+            broadcastChannelRef.current.addEventListener('message', handleActivityMessage);
+            return ()=>{
+                if (broadcastChannelRef.current) {
+                    broadcastChannelRef.current.removeEventListener('message', handleActivityMessage);
+                    broadcastChannelRef.current.close();
+                }
+            };
+        }
+    }, []);
     const [mostRecentSessionRefreshTimestamp, setMostRecentSessionRefreshTimestamp] = useState(Date.now());
     const inactiveTimeLimitMilliseconds = MinutesToMilliseconds(inactiveTimeLimit);
     const workspaceInactivityTimeLimitMilliseconds = MinutesToMilliseconds(workspaceInactivityTimeLimit);
@@ -979,15 +1001,28 @@ const UPDATE_SESSION_LIMIT = MinutesToMilliseconds(5);
         updateSession();
         if (updateSessionIntervalMilliseconds <= 0) return; // do not poll if updateSessionInterval is 0
         const updateUserActivity = ()=>{
-            setMostRecentActivityTimestamp(Date.now());
+            const timestamp = Date.now();
+            setMostRecentActivityTimestamp(timestamp);
+            if (broadcastChannelRef.current) {
+                broadcastChannelRef.current.postMessage({
+                    type: 'activity-update',
+                    timestamp
+                });
+            }
         };
         window.addEventListener('mousedown', updateUserActivity);
         window.addEventListener('keypress', updateUserActivity);
         window.addEventListener('updateUserActivity', updateUserActivity);
+        window.addEventListener('scroll', updateUserActivity);
+        window.addEventListener('click', updateUserActivity);
+        window.addEventListener('touchstart', updateUserActivity);
         return ()=>{
             window.removeEventListener('mousedown', updateUserActivity);
             window.removeEventListener('keypress', updateUserActivity);
             window.removeEventListener('updateUserActivity', updateUserActivity);
+            window.removeEventListener('scroll', updateUserActivity);
+            window.removeEventListener('click', updateUserActivity);
+            window.removeEventListener('touchstart', updateUserActivity);
         };
     }, []); // only call on mount/dismount
     useInterval(()=>{
@@ -1413,7 +1448,7 @@ const CredentialsLogin = ({ handleLogin })=>{
 };
 
 // separate function for hashing logic
-function hashString(str) {
+function hashString$1(str) {
     let hash = 0;
     for(let i = 0; i < str.length; i++){
         hash = str.charCodeAt(i) + ((hash << 5) - hash);
@@ -1425,7 +1460,7 @@ function hashCode(str) {
     if (str === null || str === '') {
         return 0;
     }
-    return hashString(str);
+    return hashString$1(str);
 }
 
 /**
@@ -11161,6 +11196,22 @@ const CountsValue = ({ label, isSuccess, counts })=>{
     });
 };
 
+const hashString = (s)=>s.split('').reduce((acc, c)=>(acc << 5) - acc + c.charCodeAt(0), 0);
+const getBody = (iframe)=>{
+    const document1 = iframe?.contentWindow || iframe?.contentDocument;
+    return document1?.document?.body || document1?.body;
+};
+const toHtml = (key, value)=>`<input
+    type="hidden"
+    name="${key}"
+    value="${isPlainObject(value) ? JSON.stringify(value).replace(/"/g, '&quot;') : value}"
+  />`;
+const customKeys = [
+    'expand',
+    'fields',
+    'facets'
+];
+const processParamObj = (key, value)=>includes(customKeys, key) ? [].concat(value).join() : value;
 /**
  * A notification box that is used to alert the user that their
  * selected file downloads are in progress
@@ -11186,6 +11237,136 @@ const CountsValue = ({ label, isSuccess, counts })=>{
         ]
     });
 };
+/**
+ * Trigger a download by attaching an iFrame to the document with the parameters of the request as fields in a form
+ * @param endpoint - endpoint to be attached with
+ * @param params - body to be attached with post request
+ * @param method - Request Method: GET, PUT, POST
+ * @param dispatch - dispatch send from the parent component to dispatch Modals
+ * @param done - callback function to be called after the download has been initiated
+ * @param Modal400 - Modal for 400 error
+ * @param Modal403 - Modal for 403 error
+ * @param customErrorMessage - custom message to be passed for 400 errors
+ * @param hideNotification - hide the notification
+ */ const download = async ({ endpoint, params, method, dispatch, done, Modal400 = Modals.GeneralErrorModal, Modal403 = Modals.NoAccessModal, customErrorMessage, hideNotification = false })=>{
+    const cookies = new Cookies();
+    /* Create a cookie with a unique identifier to attach to request. Response from server will use the set-cookie header
+    to remove the cookie when the response is received (aka the download starts). This will only work on when the FE and BE
+    are on the same domain.
+  */ const downloadToken = uniqueId(`${+new Date()}-`);
+    const cookieKey = navigator.cookieEnabled ? Math.abs(hashString(JSON.stringify(params) + downloadToken)).toString(16) : null;
+    if (cookieKey) {
+        cookies.set(cookieKey, downloadToken);
+    }
+    // place notification in timeout to avoid flicker on fast calls
+    const showNotificationTimeout = setTimeout(()=>showNotification({
+            message: /*#__PURE__*/ jsx(DownloadNotification, {
+                onClick: ()=>{
+                    iFrame.remove();
+                    cleanNotifications();
+                    if (done) {
+                        done();
+                    }
+                }
+            }),
+            styles: ()=>({
+                    root: {
+                        textAlign: 'center',
+                        display: hideNotification ? 'none' : 'block'
+                    },
+                    closeButton: {
+                        color: 'black',
+                        '&:hover': {
+                            backgroundColor: 'lightslategray'
+                        }
+                    }
+                }),
+            closeButtonProps: {
+                'aria-label': 'Close notification'
+            }
+        }), 100); // set to 100 as that is perceived as instant
+    const fields = reduce({
+        ...params,
+        downloadCookieKey: cookieKey,
+        downloadCookiePath: '/',
+        attachment: true,
+        ...params.filename !== undefined ? {
+            download: params.filename
+        } : {}
+    }, (result, value, key)=>{
+        const paramValue = processParamObj(key, value);
+        return result + [].concat(paramValue).reduce((acc, v)=>acc + toHtml(key, v), '');
+    }, '');
+    const iFrame = document.createElement('iframe');
+    iFrame.style.display = 'none';
+    iFrame.src = 'about:blank';
+    // Appending to document body to allow navigation away from the current
+    // page and downloads in the background
+    document.body.appendChild(iFrame);
+    const pollForDownloadResult = async ()=>{
+        const executePoll = async (resolve)=>{
+            // Request has been canceled
+            const body = getBody(iFrame);
+            if (body === undefined) {
+                resolve();
+                return;
+            }
+            const content = body?.textContent;
+            // Download has started
+            if (cookieKey !== null && !cookies.get(cookieKey)) {
+                clearTimeout(showNotificationTimeout);
+                cleanNotifications();
+                if (done) {
+                    done();
+                }
+                resolve();
+            } else {
+                const iFrameHasContent = iFrame.contentWindow?.document.body;
+                const requestError = iFrame.contentWindow?.document.getElementsByTagName('form').length === 0 && content !== '';
+                if (iFrameHasContent && requestError) {
+                    clearTimeout(showNotificationTimeout);
+                    cleanNotifications();
+                    const errorMessage = /{"(?:message|error)":"([^"]*)"/g.exec(content ?? 'Undefined')?.[1];
+                    if (errorMessage === 'internal server error' || errorMessage === undefined) {
+                        dispatch(showModal({
+                            modal: Modal400,
+                            message: errorMessage
+                        }));
+                    } else if (errorMessage === 'Your token is invalid or expired. Please get a new token.') {
+                        dispatch(showModal({
+                            modal: Modal403,
+                            message: errorMessage
+                        }));
+                    } else {
+                        dispatch(showModal({
+                            modal: Modal400,
+                            message: customErrorMessage || errorMessage
+                        }));
+                    }
+                    if (done) {
+                        done();
+                    }
+                    resolve();
+                } else {
+                    setTimeout(executePoll, 1000, resolve);
+                }
+            }
+        };
+        return new Promise(executePoll);
+    };
+    const addFormAndSubmit = ()=>{
+        //do all of this together for FireFox support
+        const form = document.createElement('form');
+        form.method = method.toUpperCase();
+        form.action = endpoint;
+        form.innerHTML = fields;
+        getBody(iFrame).appendChild(form);
+        form.submit();
+    };
+    addFormAndSubmit();
+    await pollForDownloadResult();
+    iFrame.remove();
+};
 
 const showErrorMessage = (error)=>{
     showNotification({
@@ -19719,6 +19900,78 @@ border-solid
 rounded-[7px]
 `;
 
+/**
+ * A Button component that downloads data from a given endpoint.
+ * The component will handle all download logic including fetching
+ * the data, creating the file, and downloading the file.
+ * @param endpoint - The endpoint to download from.
+ * @param disabled - Whether the button is disabled.
+ * @param inactiveText - The text to display when the button is inactive.
+ * @param activeText - The text to display when the button is active.
+ * @param filename - The name of the file to download.
+ * @param size - The size of the download.
+ * @param format - The format of the download.
+ * @param fields - The fields to download.
+ * @param caseFilters - The case filters to download.
+ * @param filters - The filters to download.
+ * @param extraParams - Any extra parameters to download.
+ * @param method - The method to use for the download.
+ * @param customStyle - Any custom styles to apply to the button.
+ * @param showLoading - Whether to show the loading icon.
+ * @param showIcon - Whether to show the download icon.
+ * @param preventClickEvent - Whether to prevent the default click event.
+ * @param onClick - The function to call when the button is clicked.
+ * @param setActive - The function to call when the button is set active.
+ * @param active - Whether the button is active.
+ * @param Modal403 - The modal to display when a 403 error occurs.
+ * @param Modal400 - The modal to display when a 400 error occurs.
+ * @param toolTip - The tooltip to display.
+ * @category Buttons
+ */ const DownloadButton = /*#__PURE__*/ forwardRef(({ endpoint = '', disabled = false, inactiveText, activeText, params = {}, method = 'POST', customStyle, setActive, onClick, showLoading = true, showIcon = true, preventClickEvent = false, active, Modal400 = Modals.GeneralErrorModal, Modal403 = Modals.NoAccessModal, toolTip, ...buttonProps }, ref)=>{
+    const text = active ? activeText : inactiveText;
+    const dispatch = useCoreDispatch();
+    const Icon = active ? /*#__PURE__*/ jsx(Loader, {
+        size: "sm",
+        className: "p-1"
+    }) : /*#__PURE__*/ jsx(FiDownload, {
+        title: "download",
+        size: 16
+    });
+    return /*#__PURE__*/ jsx(Tooltip, {
+        disabled: !toolTip,
+        label: toolTip,
+        children: /*#__PURE__*/ jsx(Button, {
+            ref: ref,
+            leftSection: showIcon && inactiveText && /*#__PURE__*/ jsx(FiDownload, {}),
+            disabled: disabled,
+            className: customStyle || `text-base-lightest ${disabled ? 'bg-base' : 'bg-primary hover:bg-primary-darker'} `,
+            loading: showLoading && active,
+            onClick: ()=>{
+                if (!preventClickEvent && onClick) {
+                    onClick();
+                    return;
+                }
+                dispatch(hideModal());
+                if (setActive) setActive(true);
+                download({
+                    endpoint,
+                    params,
+                    method,
+                    dispatch,
+                    done: ()=>{
+                        if (setActive) setActive(false);
+                    },
+                    Modal400,
+                    Modal403
+                });
+            },
+            ...buttonProps,
+            children: text || Icon
+        })
+    });
+});
+DownloadButton.displayName = 'DownloadButton';
+
 // Define theme for mantine v7
 const createMantineTheme = (fonts, colors)=>{
     const theme = createTheme({