WEB-4460 - Data Issues

app/components/PatientDrawer/MenuBar/MenuBar.js

@@ -15,6 +15,7 @@ import api from '../../../core/api';
 import { map, keys } from 'lodash';
 import copyIcon from '../../../core/icons/copyIcon.svg';
 import viewIcon from '../../../core/icons/viewIcon.svg';
+import { trackMetric } from '../../../core/metricUtils';
 
 export const OVERVIEW_TAB_INDEX = 0;
 export const STACKED_DAILY_TAB_INDEX = 1;
@@ -32,10 +33,9 @@ const tabs = {
   },
 };
 
-const MenuBar = ({ patientId, onClose, onSelectTab, selectedTab, trackMetric }) => {
+const MenuBar = ({ patientId, onClose, onSelectTab, selectedTab }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
-  const { showTideDashboardLastReviewed } = useFlags();
 
   const selectedClinicId = useSelector(state => state.blip.selectedClinicId);
   const patient = useSelector(state => state.blip.clinics[state.blip.selectedClinicId]?.patients?.[patientId]);
@@ -87,26 +87,24 @@ const MenuBar = ({ patientId, onClose, onSelectTab, selectedTab, trackMetric })
         </Flex>
 
         <Flex sx={{ fontSize: 0, alignItems: 'center' }}>
-          {showTideDashboardLastReviewed && (
-            <Flex data-testid="last-reviewed-section" sx={{ alignItems: 'center', justifyContent: 'space-between', gap: 3 }}>
-              <Text sx={{
-                color: vizColors.purple90,
-                fontWeight: 'medium',
-              }}>
-                {t('Last Reviewed')}
-              </Text>
-
-              <PatientLastReviewed
-                sx={{ flexGrow: 1 }}
-                api={api}
-                trackMetric={trackMetric}
-                metricSource="TIDE dashboard"
-                patientId={patientId}
-                recentlyReviewedThresholdDate={recentlyReviewedThresholdDate}
-                onReview={handleReviewSuccess}
-              />
-            </Flex>
-          )}
+          <Flex data-testid="last-reviewed-section" sx={{ alignItems: 'center', justifyContent: 'space-between', gap: 3 }}>
+            <Text sx={{
+              color: vizColors.purple90,
+              fontWeight: 'medium',
+            }}>
+              {t('Last Reviewed')}
+            </Text>
+
+            <PatientLastReviewed
+              sx={{ flexGrow: 1 }}
+              api={api}
+              trackMetric={trackMetric}
+              metricSource="TIDE dashboard"
+              patientId={patientId}
+              recentlyReviewedThresholdDate={recentlyReviewedThresholdDate}
+              onReview={handleReviewSuccess}
+            />
+          </Flex>
         </Flex>
       </Flex>
 
@@ -157,7 +155,6 @@ MenuBar.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSelectTab: PropTypes.func.isRequired,
   selectedTab: PropTypes.number.isRequired,
-  trackMetric: PropTypes.func.isRequired,
 };
 
 export default MenuBar;

app/components/PatientDrawer/PatientDrawer.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Icon from '../../components/elements/Icon';
 import { useLocation, useHistory } from 'react-router-dom';
 import Drawer from '@material-ui/core/Drawer';
@@ -51,7 +51,7 @@ const getAgpPeriodInDays = (period) => {
   }
 };
 
-const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
+const DrawerContent = ({ patientId, onClose, api, period }) => {
   // Only rendered when patient is selected and isOpen is true
   // this will also allow the hook to dismount and for the cleanup to be called
   const location = useLocation();
@@ -83,7 +83,7 @@ const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
   return (
     <>
       <Box sx={{ flexShrink: 0 }}>
-        <MenuBar patientId={patientId} trackMetric={trackMetric} onClose={onClose} selectedTab={selectedTab} onSelectTab={handleSelectTab} />
+        <MenuBar patientId={patientId} onClose={onClose} selectedTab={selectedTab} onSelectTab={handleSelectTab} />
 
         <Box className='sticky-shadow' sx={{ height: '8px', position: 'sticky', zIndex: 1, visibility: scrolledToTop ? 'hidden' : 'visible', boxShadow: shadows.large }} />
       </Box>
@@ -106,7 +106,7 @@ const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
   )
 }
 
-const PatientDrawer = ({ patientId, onClose, api, trackMetric, period }) => {
+const PatientDrawer = ({ patientId, onClose, api, period }) => {
   const classes = useStyles();
 
   const isOpen = !!patientId && isValidAgpPeriod(period);
@@ -129,7 +129,7 @@ const PatientDrawer = ({ patientId, onClose, api, trackMetric, period }) => {
           flexDirection: 'column',
         }}
       >
-        {isOpen && <DrawerContent patientId={patientId} onClose={onClose} api={api} trackMetric={trackMetric} period={period} />}
+        {isOpen && <DrawerContent patientId={patientId} onClose={onClose} api={api} period={period} />}
       </Box>
     </StyledDrawer>
   );

app/components/datasources/DataConnections.js

@@ -332,26 +332,13 @@ export const getConnectStateUI = (patient, isLoggedInUser, providerName) => {
   }
 };
 
-export const getDataConnectionProps = (patient, isLoggedInUser, selectedClinicId, setActiveHandler) => reduce(availableProviders, (result, providerName) => {
-
-  const provider = providers[providerName];
+export const resolveConnectState = (patient, providerName, isLoggedInUser = false) => {
   const dataSource = getCurrentDataSourceForProvider(patient, providerName);
   const connectStateUI = getConnectStateUI(patient, isLoggedInUser, providerName);
   const inviteExpired = dataSource?.expirationTime < moment.utc().toISOString();
 
-  // If the provider requires a logged in user to create the connection, then ensure that is the case.
-  if (!!provider.requiresLoggedInUser && !isLoggedInUser) {
-    return result;
-  }
-
-  // If the provider requires an existing data source to create the connection, then ensure that is the case.
-  // This mechanism can be used to limit access to certain providers to only users who have previously connected
-  // or where Tidepool has created a data source on their behalf.
-  if (!!provider.requiresExistingDataSource && !dataSource) {
-    return result;
-  }
-
   let connectState;
+
   if (dataSource?.state) {
     connectState = includes(keys(connectStateUI), dataSource.state)
       ? dataSource.state
@@ -368,6 +355,15 @@ export const getDataConnectionProps = (patient, isLoggedInUser, selectedClinicId
     connectState = 'noPendingConnections';
   }
 
+  return connectState;
+};
+
+export const getDataConnectionProps = (patient, isLoggedInUser, selectedClinicId, setActiveHandler) => reduce(availableProviders, (result, providerName) => {
+  result[providerName] = {};
+
+  const connectStateUI = getConnectStateUI(patient, isLoggedInUser, providerName);
+  const connectState = resolveConnectState(patient, providerName, isLoggedInUser);
+
   const { color, icon, message, text, handler } = connectStateUI[connectState];
 
   const {

app/pages/clinicworkspace/TideDashboardV2/AppliedFiltersList.js

@@ -59,6 +59,7 @@ const AppliedFiltersList = ({ patientCount = 0 }) => {
       patientCount={patientCount}
       hasSearchActive={false} // No patient search in TIDE Dashboard
       filters={activeFilters}
+      requiredFilters={['lastData']}
       onRemoveFilter={handleRemoveFilter}
       rightContent={
         <Box sx={{ fontSize: 0 }}>

app/pages/clinicworkspace/TideDashboardV2/CGMExclusionQuery.js

@@ -10,10 +10,10 @@ export default class CGMExclusionQuery {
 
   negate(threshold) {
     switch (true) {
-      case threshold.startsWith('>='): return threshold.replace('>=', '<');
-      case threshold.startsWith('<='): return threshold.replace('<=', '>');
-      case threshold.startsWith('>'):  return threshold.replace('>', '<=');
-      case threshold.startsWith('<'):  return threshold.replace('<', '>=');
+      case threshold.startsWith('>='): return threshold.replace(/^>=/, '<');
+      case threshold.startsWith('<='): return threshold.replace(/^<=/, '>');
+      case threshold.startsWith('>'):  return threshold.replace(/^>/, '<=');
+      case threshold.startsWith('<'):  return threshold.replace(/^</, '>=');
 
       default: return threshold;
     }

app/pages/clinicworkspace/TideDashboardV2/DataIssues/Cells.js

@@ -0,0 +1,141 @@
+import React, { useMemo } from 'react';
+import { useSelector } from 'react-redux';
+import { useTranslation } from 'react-i18next';
+import moment from 'moment-timezone';
+import { Box, Text } from 'theme-ui';
+import { resolveConnectState } from '../../../../components/datasources/DataConnections';
+import includes from 'lodash/includes';
+
+import Pill from '../../../../components/elements/Pill';
+import HoverButton from '../../../../components/elements/HoverButton';
+import PopoverMenu from '../../../../components/elements/PopoverMenu';
+import { colors, fontWeights } from '../../../../themes/baseTheme';
+import ErrorRoundedIcon from '@material-ui/icons/ErrorRounded';
+import EditIcon from '@material-ui/icons/EditRounded';
+import DataInIcon from '../../../../core/icons/DataInIcon.svg';
+
+export const DexcomConnectionStatusCell = ({ patient, onOpenDataConnectionsModal }) => {
+  const { t } = useTranslation();
+
+  const dexcomConnectStateUI = useMemo(() => ({
+    noPendingConnections: { colorPalette: 'neutral', icon: null, text: t('No Pending Connections') },
+    inviteJustSent: { colorPalette: 'info', icon: null, text: t('Invite Sent') },
+    pending: { colorPalette: 'info', icon: null, text: t('Invite Sent') },
+    pendingReconnect: { colorPalette: 'info', icon: null, text: t('Invite Sent') },
+    pendingExpired: { colorPalette: 'warning', icon: ErrorRoundedIcon, text: t('Invite Expired') },
+    connected: { colorPalette: 'info', icon: null, text: t('Connected') },
+    disconnected: { colorPalette: 'warning', icon: ErrorRoundedIcon, text: t('Patient Disconnected') },
+    error: { colorPalette: 'warning', icon: ErrorRoundedIcon, text: t('Error Connecting') },
+    unknown: { colorPalette: 'warning', icon: ErrorRoundedIcon, text: t('Unknown Status') },
+  }), [t]);
+
+  const dexcomConnectState = resolveConnectState(patient, 'dexcom');
+
+  if (!dexcomConnectState) return null;
+
+  const showViewButton = includes([
+    'disconnected',
+    'error',
+    'noPendingConnections',
+    'pendingExpired',
+    'unknown',
+  ], dexcomConnectState);
+
+  const handleOpenDataConnectionsModal = () => onOpenDataConnectionsModal(patient.id);
+
+  const StatusBadge = () => (
+    <Pill
+      className="patient-dexcom-connection-status"
+      icon={dexcomConnectStateUI[dexcomConnectState].icon}
+      text={dexcomConnectStateUI[dexcomConnectState].text}
+      label={t('dexcom connection status')}
+      colorPalette={dexcomConnectStateUI[dexcomConnectState].colorPalette}
+      condensed
+    />
+  );
+
+  if (!showViewButton) return <StatusBadge />;
+
+  return (
+    <HoverButton
+      buttonText={t('View')}
+      buttonProps={{
+        onClick: handleOpenDataConnectionsModal,
+        variant: 'textSecondary',
+        ml: -2,
+        sx: {
+          fontSize: 0,
+          fontWeight: fontWeights.medium,
+          textDecoration: 'underline',
+          color: colors.purpleMedium,
+          ':hover': {
+            color: colors.purpleMedium,
+            textDecoration: 'underline',
+          },
+        },
+      }}
+    >
+      <Box sx={{ whiteSpace: 'nowrap' }}>
+        <StatusBadge />
+      </Box>
+    </HoverButton>
+  );
+};
+
+export const DaysSinceLastDataCell = ({ patient }) => {
+  const timePrefs = useSelector(state => state.blip.timePrefs);
+
+  const daysSinceLastData = useMemo(() => {
+    if (!patient?.lastData) return null;
+
+    const timezone = timePrefs?.timezoneName || new Intl.DateTimeFormat().resolvedOptions().timeZone;
+    const startOfLastDataDay = moment.utc(patient.lastData).tz(timezone).startOf('day');
+    const startOfCurrentDay = moment.utc().tz(timezone).startOf('day');
+
+    return startOfCurrentDay.diff(startOfLastDataDay, 'days');
+  }, [patient?.lastData, timePrefs?.timezoneName]);
+
+  return (
+    <Text sx={{ fontWeight: 'medium' }}>{daysSinceLastData ?? '-'}</Text>
+  );
+};
+
+export const MoreMenuCell = ({ patient, onOpenEditPatientDialog, onOpenDataConnectionsModal }) => {
+  const { t } = useTranslation();
+
+  return (
+    <PopoverMenu
+      id={`action-menu-${patient?.id}`}
+      items={[{
+        icon: EditIcon,
+        iconLabel: t('Edit Patient Details'),
+        iconPosition: 'left',
+        id: `edit-${patient?.id}`,
+        variant: 'actionListItem',
+        onClick: (_popupState) => {
+          _popupState.close();
+          onOpenEditPatientDialog(patient.id);
+        },
+        text: t('Edit Patient Details'),
+      }, {
+        iconSrc: DataInIcon,
+        iconLabel: t('Bring Data into Tidepool'),
+        iconPosition: 'left',
+        id: `edit-data-connections-${patient?.id}`,
+        variant: 'actionListItem',
+        onClick: (_popupState) => {
+          _popupState.close();
+          onOpenDataConnectionsModal(patient.id);
+        },
+        text: t('Bring Data into Tidepool'),
+      }]}
+      sx={{ position: 'relative', left: '-2px' }}
+    />
+  );
+};
+
+export default {
+  DexcomConnectionStatusCell,
+  DaysSinceLastDataCell,
+  MoreMenuCell,
+};

app/pages/clinicworkspace/TideDashboardV2/DataIssues/DataConnectionsModalController.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import DataConnectionsModal from '../../../../components/datasources/DataConnectionsModal';
+
+const DataConnectionsModalController = ({ isOpen, patient, onClose }) => (
+  <DataConnectionsModal
+    open={isOpen && !!patient}
+    patient={patient}
+    onClose={onClose}
+  />
+);
+
+export default DataConnectionsModalController;