Integrate unified base mode color and helper function

www/__tests__/diaryHelper.test.ts

@@ -4,7 +4,6 @@ import {
   getFormattedDateAbbr,
   getFormattedTimeRange,
   getDetectedModes,
-  modeColors,
 } from '../js/diary/diaryHelper';
 
 import { base_modes } from 'e-mission-common';
@@ -39,20 +38,17 @@ it('returns a human readable time range', () => {
 });
 
 it('returns a Base Mode for a given key', () => {
-  expect(base_modes.get_base_mode_by_key('WALKING')).toEqual({
-    name: 'WALKING',
+  expect(base_modes.get_base_mode_by_key('WALKING')).toMatchObject({
     icon: 'walk',
-    color: modeColors.blue,
+    color: base_modes.mode_colors['blue'],
   });
-  expect(base_modes.get_base_mode_by_key('MotionTypes.WALKING')).toEqual({
-    name: 'WALKING',
+  expect(base_modes.get_base_mode_by_key('MotionTypes.WALKING')).toMatchObject({
     icon: 'walk',
-    color: modeColors.blue,
+    color: base_modes.mode_colors['blue'],
   });
-  expect(base_modes.get_base_mode_by_key('I made this type up')).toEqual({
-    name: 'UNKNOWN',
+  expect(base_modes.get_base_mode_by_key('I made this type up')).toMatchObject({
     icon: 'help',
-    color: modeColors.grey,
+    color: base_modes.mode_colors['grey'],
   });
 });
 
@@ -88,11 +84,13 @@ let myFakeTrip2 = {
 };
 
 let myFakeDetectedModes = [
-  { mode: 'BICYCLING', icon: 'bike', color: modeColors.green, pct: 89 },
-  { mode: 'WALKING', icon: 'walk', color: modeColors.blue, pct: 11 },
+  { mode: 'BICYCLING', icon: 'bike', color: base_modes.mode_colors['green'], pct: 89 },
+  { mode: 'WALKING', icon: 'walk', color: base_modes.mode_colors['blue'], pct: 11 },
 ];
 
-let myFakeDetectedModes2 = [{ mode: 'BICYCLING', icon: 'bike', color: modeColors.green, pct: 100 }];
+let myFakeDetectedModes2 = [
+  { mode: 'BICYCLING', icon: 'bike', color: base_modes.mode_colors['green'], pct: 100 },
+];
 
 it('returns the detected modes, with percentages, for a trip', () => {
   expect(getDetectedModes(myFakeTrip)).toEqual(myFakeDetectedModes);

www/js/diary/cards/ModesIndicator.tsx

@@ -3,7 +3,6 @@
 import color from 'color';
 import TimelineContext from '../../TimelineContext';
 import { logDebug } from '../../plugin/logger';
-import { getBaseModeByValue } from '../diaryHelper';
 import { Text, Icon, useTheme } from 'react-native-paper';
 import { useTranslation } from 'react-i18next';
 import { base_modes } from 'e-mission-common';
@@ -19,7 +18,7 @@
   let modeViews;
   const confirmedModeForTrip = confirmedModeFor(trip);
   if (labelOptions && confirmedModeForTrip?.value) {
     const baseMode = base_modes.get_base_mode_by_key(confirmedModeForTrip.baseMode);
     indicatorBorderColor = baseMode.color;
     logDebug(`TripCard: got baseMode = ${JSON.stringify(baseMode)}`);
     modeViews = (

www/js/diary/details/TripSectionsDescriptives.tsx

@@ -2,7 +2,6 @@
 import { View, StyleSheet } from 'react-native';
 import { Icon, Text, useTheme } from 'react-native-paper';
 import useDerivedProperties from '../useDerivedProperties';
-import { getBaseModeByValue } from '../diaryHelper';
 import TimelineContext from '../../TimelineContext';
 import { base_modes } from 'e-mission-common';
 
@@ -25,9 +24,9 @@
   if ((showConfirmedMode && confirmedModeForTrip) || !trip.sections?.length) {
     let baseMode;
     if (showConfirmedMode && labelOptions && confirmedModeForTrip) {
       baseMode = base_modes.get_base_mode_by_key(confirmedModeForTrip.baseMode);
     } else {
       baseMode = base_modes.get_base_mode_by_key('UNPROCESSED');
     }
     sections = [
       {

www/js/diary/diaryHelper.ts

@@ -11,7 +11,7 @@ import { AppConfig } from '../types/appConfigTypes';
 import { ImperialConfig } from '../config/useImperialConfig';
 import { base_modes } from 'e-mission-common';
 
-export const modeColors = base_modes.mode_colors;
+export type BaseModeKey = string; // TODO figure out how to get keyof typeof base_modes.BASE_MODES
 
 // parallels the server-side MotionTypes enum: https://github.com/e-mission/e-mission-server/blob/94e7478e627fa8c171323662f951c611c0993031/emission/core/wrapper/motionactivity.py#L12
 export type MotionTypeKey =
@@ -27,8 +27,6 @@ export type MotionTypeKey =
   | 'STOPPED_WHILE_IN_VEHICLE'
   | 'AIR_OR_HSR';
 
-const BaseModes = base_modes.BASE_MODES;
-
 export function getBaseModeByValue(value: string, labelOptions: LabelOptions) {
   const modeOption = labelOptions?.MODE?.find((opt) => opt.value == value);
   return base_modes.get_base_mode_by_key(modeOption?.baseMode || 'OTHER');

www/js/diary/timelineHelper.ts

@@ -1,5 +1,4 @@
 import { displayError, displayErrorMsg, logDebug } from '../plugin/logger';
-import { getBaseModeByValue } from './diaryHelper';
 import { getUnifiedDataForInterval } from '../services/unifiedDataLoader';
 import { getRawEntries } from '../services/commHelper';
 import { ServerResponse, BEMData } from '../types/serverData';
@@ -270,7 +269,7 @@
         color:
           trajectoryColor ||
           base_modes.get_base_mode_by_key(section?.sensed_mode_str)?.color ||
           '#333',
       },
       properties: {
         feature_type: 'section_trajectory',

www/js/metrics/MetricsCard.tsx

@@ -15,7 +15,7 @@
 import ToggleSwitch from '../components/ToggleSwitch';
 import { cardStyles } from './MetricsTab';
 import { labelKeyToRichMode, labelOptions } from '../survey/multilabel/confirmHelper';
-import { getBaseModeByText, modeColors } from '../diary/diaryHelper';
+import { getBaseModeByText } from '../diary/diaryHelper';
 import { useTranslation } from 'react-i18next';
 import { GroupingField, MetricName } from '../types/appConfigTypes';
 import { useImperialConfig } from '../config/useImperialConfig';
@@ -116,7 +116,7 @@
   // All other modes are colored according to their base mode
   const getColorForLabel = (label: string) => {
     if (label == 'Unlabeled') {
       const unknownModeColor = base_modes.get_base_mode_by_key('UNKNOWN').color;
       return colorLib(unknownModeColor).alpha(0.15).rgb().string();
     }
     return getBaseModeByText(label, labelOptions).color;