WEB-4460 - Cells

app/pages/dashboard/PatientDrawer/CGMDeltaSummary/index.js → app/components/PatientDrawer/CGMDeltaSummary/index.js

@@ -6,7 +6,7 @@ import { utils as vizUtils, colors as vizColors } from '@tidepool/viz';
 import styled from '@emotion/styled';
 const { bankersRound } = vizUtils.stat;
 const { getTimezoneFromTimePrefs } = vizUtils.datetime;
-import { MS_IN_HOUR } from '../../../../core/constants';
+import { MS_IN_HOUR } from '../../../core/constants';
 
 import getReportDaysText from '../getReportDaysText';
 

app/pages/dashboard/PatientDrawer/CGMStatistics/index.js → app/components/PatientDrawer/CGMStatistics/index.js

@@ -5,7 +5,7 @@ import { Flex, Box, Text } from 'theme-ui';
 import { utils as vizUtils } from '@tidepool/viz';
 const { formatDatum, bankersRound } = vizUtils.stat;
 const { getTimezoneFromTimePrefs } = vizUtils.datetime;
-import { MGDL_UNITS } from '../../../../core/constants';
+import { MGDL_UNITS } from '../../../core/constants';
 import getReportDaysText from '../getReportDaysText';
 
 const TableRow = ({ label, sublabel, value, units, id }) => {

app/pages/dashboard/PatientDrawer/MenuBar/CGMClipboardButton.js → app/components/PatientDrawer/MenuBar/CGMClipboardButton.js

@@ -1,8 +1,8 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useTranslation } from 'react-i18next';
-import Button from '../../../../components/elements/Button';
-import { MS_IN_HOUR } from '../../../../core/constants';
+import Button from '../../../components/elements/Button';
+import { MS_IN_HOUR } from '../../../core/constants';
 import { Box, Flex } from 'theme-ui';
 import { utils as vizUtils } from '@tidepool/viz';
 const { agpCGMText } = vizUtils.text;

app/pages/dashboard/PatientDrawer/MenuBar/MenuBar.js → app/components/PatientDrawer/MenuBar/MenuBar.js

@@ -1,20 +1,21 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import * as actions from '../../../../redux/actions';
+import * as actions from '../../../redux/actions';
 import { useSelector, useDispatch } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { push } from 'connected-react-router';
 import { Flex, Box, Text } from 'theme-ui';
 import { colors as vizColors } from '@tidepool/viz';
-import Button from '../../../../components/elements/Button';
+import Button from '../../../components/elements/Button';
 import moment from 'moment';
-import PatientLastReviewed from '../../../../components/clinic/PatientLastReviewed';
+import PatientLastReviewed from '../../../components/clinic/PatientLastReviewed';
 import { useFlags } from 'launchdarkly-react-client-sdk';
 import CGMClipboardButton from './CGMClipboardButton';
-import api from '../../../../core/api';
+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 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,7 +33,7 @@ const tabs = {
   },
 };
 
-const MenuBar = ({ patientId, onClose, onSelectTab, selectedTab, trackMetric }) => {
+const MenuBar = ({ patientId, onClose, onSelectTab, selectedTab }) => {
   const dispatch = useDispatch();
   const { t } = useTranslation();
   const { showTideDashboardLastReviewed } = useFlags();
@@ -157,7 +158,6 @@ MenuBar.propTypes = {
   onClose: PropTypes.func.isRequired,
   onSelectTab: PropTypes.func.isRequired,
   selectedTab: PropTypes.number.isRequired,
-  trackMetric: PropTypes.func.isRequired,
 };
 
 export default MenuBar;

app/pages/dashboard/PatientDrawer/PatientDrawer.js → app/components/PatientDrawer/PatientDrawer.js

@@ -1,19 +1,17 @@
 import React from 'react';
-import Icon from '../../../components/elements/Icon';
+import Icon from '../../components/elements/Icon';
 import { useLocation, useHistory } from 'react-router-dom';
 import Drawer from '@material-ui/core/Drawer';
 import styled from '@emotion/styled';
 import { makeStyles } from '@material-ui/core/styles';
 import CloseRoundedIcon from '@material-ui/icons/CloseRounded';
 import { Box } from 'theme-ui';
-import { useFlags } from 'launchdarkly-react-client-sdk';
 
 import Overview from './Overview';
 import StackedDaily from './StackedDaily';
 import MenuBar, { OVERVIEW_TAB_INDEX, STACKED_DAILY_TAB_INDEX } from './MenuBar';
 import useAgpCGM from './useAgpCGM';
-import { shadows } from '../../../themes/baseTheme';
-import { useScrollToTop } from '../../../core/hooks';
+import { shadows } from '../../themes/baseTheme';
 
 const StyledCloseButton = styled(Icon)`
   position: absolute;
@@ -53,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();
@@ -64,7 +62,6 @@ const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
   const agpPeriodInDays = getAgpPeriodInDays(period);
   const agpCGMData = useAgpCGM(api, patientId, agpPeriodInDays);
   const contentRef = React.useRef(undefined);
-  useScrollToTop(contentRef?.current, [selectedTab]);
 
   function setDrawerTabParam(tabIndex) {
     const { search, pathname } = location;
@@ -76,16 +73,17 @@ const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
   function handleSelectTab(tabIndex) {
     setSelectedTab(parseInt(tabIndex, 10));
     setDrawerTabParam(tabIndex);
+    contentRef?.current?.scrollTo(0, 0);
   }
 
   const handleContentScroll = (e) => {
     setScrolledToTop((e.target.scrollTop || 0) <= 5);
-  }
+  };
 
   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>
@@ -108,12 +106,10 @@ const DrawerContent = ({ patientId, onClose, api, trackMetric, period }) => {
   )
 }
 
-const PatientDrawer = ({ patientId, onClose, api, trackMetric, period }) => {
+const PatientDrawer = ({ patientId, onClose, api, period }) => {
   const classes = useStyles();
-  const { showTideDashboardPatientDrawer } = useFlags();
-  const isOpen = !!patientId && isValidAgpPeriod(period);
 
-  if (!showTideDashboardPatientDrawer) return null;
+  const isOpen = !!patientId && isValidAgpPeriod(period);
 
   return (
     <StyledDrawer
@@ -133,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/pages/dashboard/PatientDrawer/StackedDaily.js → app/components/PatientDrawer/StackedDaily.js

@@ -15,13 +15,13 @@ const { getLocalizedCeiling } = vizUtils.datetime;
 import tidelineBlip from 'tideline/plugins/blip';
 const chartDailyFactory = tidelineBlip.oneday;
 
-import { MS_IN_DAY } from '../../../core/constants';
+import { MS_IN_DAY } from '../../core/constants';
 import { NoPatientData } from './Overview';
 import { STATUS } from './useAgpCGM';
-import { Body1, Body2 } from '../../../components/elements/FontStyles';
-import Button from '../../../components/elements/Button';
+import { Body1, Body2 } from '../../components/elements/FontStyles';
+import Button from '../../components/elements/Button';
 import { STACKED_DAILY_TAB_INDEX } from './MenuBar';
-import BgLegend from '../../../components/chart/BgLegend';
+import BgLegend from '../../components/chart/BgLegend';
 
 const CHART_HEIGHT = 200;
 

app/pages/dashboard/PatientDrawer/getReportDaysText.js → app/components/PatientDrawer/getReportDaysText.js

@@ -1,5 +1,5 @@
 import moment from 'moment';
-import { MS_IN_MIN } from '../../../core/constants';
+import { MS_IN_MIN } from '../../core/constants';
 import isNumber from 'lodash/isNumber';
 import { utils as vizUtils } from '@tidepool/viz';
 const { getOffset, formatDateRange } = vizUtils.datetime;

app/pages/dashboard/PatientDrawer/useAgpCGM/getOpts.js → app/components/PatientDrawer/useAgpCGM/getOpts.js

@@ -2,8 +2,8 @@ import moment from 'moment-timezone';
 import _ from 'lodash';
 import get from 'lodash/get';
 import { utils as vizUtils } from '@tidepool/viz';
-import utils from '../../../../core/utils';
-import { getMostRecentDatumTimeByChartType } from '../../../../core/dataViewUtils';
+import utils from '../../../core/utils';
+import { getMostRecentDatumTimeByChartType } from '../../../core/dataViewUtils';
 
 const getTimezoneFromTimePrefs = vizUtils.datetime.getTimezoneFromTimePrefs;
 

app/pages/dashboard/PatientDrawer/useAgpCGM/getQueries.js → app/components/PatientDrawer/useAgpCGM/getQueries.js

@@ -2,8 +2,8 @@ import _ from 'lodash';
 import { utils as vizUtils } from '@tidepool/viz';
 const { commonStats } = vizUtils.stat;
 
-import utils from '../../../../core/utils';
-import { DEFAULT_GLYCEMIC_RANGES } from '../../../../core/glycemicRangesUtils';
+import utils from '../../../core/utils';
+import { DEFAULT_GLYCEMIC_RANGES } from '../../../core/glycemicRangesUtils';
 
 const getQueries = (
   data,

app/pages/dashboard/PatientDrawer/useAgpCGM/useAgpCGM.js → app/components/PatientDrawer/useAgpCGM/useAgpCGM.js

@@ -1,12 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
-import * as actions from '../../../../redux/actions';
+import * as actions from '../../../redux/actions';
 import moment from 'moment';
 
 import getOpts from './getOpts';
 import getQueries from './getQueries';
 import { cloneDeep } from 'lodash';
-import { useGenerateAGPImages } from '../../../../core/agpUtils';
+import { useGenerateAGPImages } from '../../../core/agpUtils';
 
 export const STATUS = {
   // States in order of happy path AGP generation sequence
@@ -134,8 +134,8 @@ const useAgpCGM = (
   return {
     status:       lastCompletedStep,
     svgDataURLS:  isCorrectPatientInState ? pdf.opts?.svgDataURLS : null,
-    agpCGM:       isCorrectPatientInState ? cloneDeep(pdf.data?.agpCGM) : null,
-    offsetAgpCGM: isCorrectPatientInState ? cloneDeep(pdf.data?.offsetAgpCGM) : null,
+    agpCGM:       isCorrectPatientInState ? pdf.data?.agpCGM : null,
+    offsetAgpCGM: isCorrectPatientInState ? pdf.data?.offsetAgpCGM : null,
   };
 };
 

app/core/navutils.js

@@ -44,11 +44,11 @@ export const getPatientListLink = (clinicFlowActive, selectedClinicId, query, pa
   const drawerTab = query?.drawerTab;
 
   if (dashboard && drawerTab !== undefined && patientId) {
-    return `/dashboard/${dashboard}?drawerPatientId=${patientId}&drawerTab=${drawerTab}`;
+    return `/clinic-workspace/tide-dashboard?drawerPatientId=${patientId}&drawerTab=${drawerTab}`;
   }
 
   if (dashboard) {
-    return `/dashboard/${dashboard}`;
+    return '/clinic-workspace/tide-dashboard';
   }
 
   if (clinicFlowActive && selectedClinicId) {