Merge branch 'activity-state-display' of https://github.com/nasa/openmct into timelist-expanded-view

- Mod to `s-selected` styling to allow selection visiblity on Time List rows.

e2e/test-data/examplePlans/ExamplePlan_Small1.json

@@ -6,7 +6,8 @@
       "end": 1660343797000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 1
     },
     {
       "name": "Past event 2",
@@ -14,7 +15,8 @@
       "end": 1660429160000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 2
     },
     {
       "name": "Past event 3",
@@ -22,7 +24,8 @@
       "end": 1660503981000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 3
     },
     {
       "name": "Past event 4",
@@ -30,7 +33,8 @@
       "end": 1660624108000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 4
     },
     {
       "name": "Past event 5",
@@ -38,7 +42,8 @@
       "end": 1660681529000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 5
     }
   ]
 }

e2e/test-data/examplePlans/ExamplePlan_Small3.json

@@ -6,7 +6,8 @@
       "end": 1660343797000,
       "type": "Group 1",
       "color": "orange",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 1
     },
     {
       "name": "Time until supper",
@@ -14,7 +15,8 @@
       "end": 1650420410000,
       "type": "Group 2",
       "color": "blue",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 2
     }
   ],
   "Group 2": [
@@ -24,7 +26,8 @@
       "end": 1650320102001,
       "type": "Group 2",
       "color": "green",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 3
     },
     {
       "name": "Time since last accident",
@@ -32,7 +35,8 @@
       "end": 1650320102002,
       "type": "Group 1",
       "color": "yellow",
-      "textColor": "white"
+      "textColor": "white",
+      "id": 4
     }
   ]
 }

e2e/tests/functional/planning/plan.e2e.spec.js

@@ -27,7 +27,7 @@ import {
   assertPlanActivities,
   assertPlanOrderedSwimLanes
 } from '../../../helper/planningUtils.js';
-import { test } from '../../../pluginFixtures.js';
+import { expect, test } from '../../../pluginFixtures.js';
 
 const testPlan1 = JSON.parse(
   fs.readFileSync(
@@ -63,4 +63,51 @@ test.describe('Plan', () => {
     });
     await assertPlanOrderedSwimLanes(page, testPlanWithOrderedLanes, planWithSwimLanes.url);
   });
+
+  test('Allows setting the state of an activity when selected.', async ({ page }) => {
+    const groups = Object.keys(testPlan1);
+    const firstGroupKey = groups[0];
+    const firstGroupItems = testPlan1[firstGroupKey];
+    const firstActivity = firstGroupItems[0];
+    const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+    const startBound = firstActivity.start;
+    // Set the endBound to the end time of the current activity
+    let endBound = lastActivity.end;
+    // eslint-disable-next-line playwright/no-conditional-in-test
+    if (endBound === startBound) {
+      // Prevent oddities with setting start and end bound equal
+      // via URL params
+      endBound += 1;
+    }
+
+    // Switch to fixed time mode with all plan events within the bounds
+    await page.goto(
+      `${plan.url}?tc.mode=fixed&tc.startBound=${startBound}&tc.endBound=${endBound}&tc.timeSystem=utc&view=plan.view`
+    );
+
+    // select the first activity in the list
+    await page.getByText('Past event 1').click();
+
+    // Find the activity state section in the inspector
+    await page.getByRole('tab', { name: 'Activity' }).click();
+
+    // Check that activity state label is displayed in the inspector.
+    await expect(page.getByLabel('Activity Status Label')).toHaveText('Not started');
+
+    // Check that activity state dropdown selection shows the `set status` option by default
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      '- Set Status -'
+    );
+
+    // Change the selection of the activity status
+    await page.getByRole('combobox').selectOption({ label: 'Aborted' });
+    // select a different activity and back to the previous one
+    await page.getByText('Past event 2').click();
+    await page.getByText('Past event 1').click();
+    // Check that activity state dropdown selection shows the previously selected option by default
+    await expect(page.getByLabel('Activity Status Label')).toHaveText('Aborted');
+    await expect(page.getByLabel('Activity Status').locator("[aria-selected='true']")).toHaveText(
+      'Aborted'
+    );
+  });
 });

e2e/tests/functional/planning/timelist.e2e.spec.js

@@ -30,6 +30,11 @@ const examplePlanSmall3 = JSON.parse(
     new URL('../../../test-data/examplePlans/ExamplePlan_Small3.json', import.meta.url)
   )
 );
+const examplePlanSmall1 = JSON.parse(
+  fs.readFileSync(
+    new URL('../../../test-data/examplePlans/ExamplePlan_Small1.json', import.meta.url)
+  )
+);
 // eslint-disable-next-line no-unused-vars
 const START_TIME_COLUMN = 0;
 // eslint-disable-next-line no-unused-vars
@@ -40,53 +45,8 @@ const ACTIVITY_COLUMN = 3;
 const HEADER_ROW = 0;
 const NUM_COLUMNS = 4;
 
-const testPlan = {
-  TEST_GROUP: [
-    {
-      name: 'Past event 1',
-      start: 1660320408000,
-      end: 1660343797000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 2',
-      start: 1660406808000,
-      end: 1660429160000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 3',
-      start: 1660493208000,
-      end: 1660503981000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 4',
-      start: 1660579608000,
-      end: 1660624108000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    },
-    {
-      name: 'Past event 5',
-      start: 1660666008000,
-      end: 1660681529000,
-      type: 'TEST-GROUP',
-      color: 'orange',
-      textColor: 'white'
-    }
-  ]
-};
-
 test.describe('Time List', () => {
-  test('Create a Time List, add a single Plan to it and verify all the activities are displayed with no milliseconds', async ({
+  test("Create a Time List, add a single Plan to it, verify all the activities are displayed with no milliseconds and selecting an activity shows it's properties", async ({
     page
   }) => {
     // Goto baseURL
@@ -103,12 +63,16 @@ test.describe('Time List', () => {
     await test.step('Create a Plan and add it to the timelist', async () => {
       await createPlanFromJSON(page, {
         name: 'Test Plan',
-        json: testPlan,
+        json: examplePlanSmall1,
         parent: timelist.uuid
       });
-
-      const startBound = testPlan.TEST_GROUP[0].start;
-      const endBound = testPlan.TEST_GROUP[testPlan.TEST_GROUP.length - 1].end;
+      const groups = Object.keys(examplePlanSmall1);
+      const firstGroupKey = groups[0];
+      const firstGroupItems = examplePlanSmall1[firstGroupKey];
+      const firstActivity = firstGroupItems[0];
+      const lastActivity = firstGroupItems[firstGroupItems.length - 1];
+      const startBound = firstActivity.start;
+      const endBound = lastActivity.end;
 
       // Switch to fixed time mode with all plan events within the bounds
       await page.goto(
@@ -118,7 +82,7 @@ test.describe('Time List', () => {
       // Verify all events are displayed
       const eventCount = await page.getByRole('row').count();
       // subtracting one for the header
-      await expect(eventCount - 1).toEqual(testPlan.TEST_GROUP.length);
+      await expect(eventCount - 1).toEqual(firstGroupItems.length);
     });
 
     await test.step('Does not show milliseconds in times', async () => {
@@ -131,6 +95,15 @@ test.describe('Time List', () => {
       await expect(row.locator('.--end')).not.toContainText('.');
       await expect(row.locator('.--duration')).not.toContainText('.');
     });
+
+    await test.step('Shows activity properties when a row is selected', async () => {
+      await page.getByRole('row').nth(2).click();
+
+      // Find the activity state section in the inspector
+      await page.getByRole('tab', { name: 'Activity' }).click();
+      // Check that activity state label is displayed in the inspector.
+      await expect(page.getByLabel('Activity Status Label')).toHaveText('Not started');
+    });
   });
 });
 

src/api/objects/ObjectAPI.js

@@ -99,7 +99,13 @@ export default class ObjectAPI {
     this.cache = {};
     this.interceptorRegistry = new InterceptorRegistry();
 
-    this.SYNCHRONIZED_OBJECT_TYPES = ['notebook', 'restricted-notebook', 'plan', 'annotation'];
+    this.SYNCHRONIZED_OBJECT_TYPES = [
+      'notebook',
+      'restricted-notebook',
+      'plan',
+      'annotation',
+      'activity-states'
+    ];
 
     this.errors = {
       Conflict: ConflictError

src/plugins/activityStates/activityStatesInterceptor.js

@@ -0,0 +1,68 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { ACTIVITY_STATES_KEY } from './createActivityStatesIdentifier.js';
+
+/**
+ * @typedef {object} ActivityStatesInterceptorOptions
+ * @property {import('../../api/objects/ObjectAPI').Identifier} identifier the {namespace, key} to use for the activity states object.
+ * @property {string} name The name of the activity states model.
+ * @property {number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ * Creates an activity states object in the persistence store. This is used to save plan activity states.
+ * This will only get invoked when an attempt is made to save the state for an activity and no activity states object exists in the store.
+ * @param {import('../../../openmct').OpenMCT} openmct
+ * @param {ActivityStatesInterceptorOptions} options
+ * @returns {object}
+ */
+const ACTIVITY_STATES_TYPE = 'activity-states';
+
+function activityStatesInterceptor(openmct, options) {
+  const { identifier, name, priority = openmct.priority.LOW } = options;
+  const activityStatesModel = {
+    identifier,
+    name,
+    type: ACTIVITY_STATES_TYPE,
+    activities: {},
+    location: null
+  };
+
+  return {
+    appliesTo: (identifierObject) => {
+      return identifierObject.key === ACTIVITY_STATES_KEY;
+    },
+    invoke: (identifierObject, object) => {
+      if (!object || openmct.objects.isMissing(object)) {
+        openmct.objects.save(activityStatesModel);
+
+        return activityStatesModel;
+      }
+
+      return object;
+    },
+    priority
+  };
+}
+
+export default activityStatesInterceptor;

src/plugins/activityStates/createActivityStatesIdentifier.js

@@ -0,0 +1,30 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+export const ACTIVITY_STATES_KEY = 'activity-states';
+
+export function createActivityStatesIdentifier(namespace = '') {
+  return {
+    key: ACTIVITY_STATES_KEY,
+    namespace
+  };
+}

src/plugins/activityStates/pluginSpec.js

@@ -0,0 +1,89 @@
+/*****************************************************************************
+ * Open MCT, Copyright (c) 2014-2024, United States Government
+ * as represented by the Administrator of the National Aeronautics and Space
+ * Administration. All rights reserved.
+ *
+ * Open MCT is licensed under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * Open MCT includes source code licensed under additional open source
+ * licenses. See the Open Source Licenses file (LICENSES.md) included with
+ * this source code distribution or the Licensing information page available
+ * at runtime from the About dialog for additional information.
+ *****************************************************************************/
+
+import { createOpenMct, resetApplicationState } from 'utils/testing';
+
+import {
+  ACTIVITY_STATES_KEY,
+  createActivityStatesIdentifier
+} from './createActivityStatesIdentifier.js';
+
+const MISSING_NAME = `Missing: ${ACTIVITY_STATES_KEY}`;
+const DEFAULT_NAME = 'Activity States';
+const activityStatesIdentifier = createActivityStatesIdentifier();
+
+describe('the plugin', () => {
+  let openmct;
+  let missingObj = {
+    identifier: activityStatesIdentifier,
+    type: 'unknown',
+    name: MISSING_NAME
+  };
+
+  describe('with no arguments passed in', () => {
+    beforeEach((done) => {
+      openmct = createOpenMct();
+      openmct.install(openmct.plugins.PlanLayout());
+
+      openmct.on('start', done);
+      openmct.startHeadless();
+    });
+
+    afterEach(() => {
+      return resetApplicationState(openmct);
+    });
+
+    it('when installed, adds "Activity States"', async () => {
+      const activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      expect(activityStatesObject.name).toBe(DEFAULT_NAME);
+      expect(activityStatesObject).toBeDefined();
+    });
+
+    describe('adds an interceptor that returns a "Activity States" model for', () => {
+      let activityStatesObject;
+      let mockNotFoundProvider;
+      let activeProvider;
+
+      beforeEach(async () => {
+        mockNotFoundProvider = {
+          get: () => Promise.reject(new Error('Not found')),
+          create: () => Promise.resolve(missingObj),
+          update: () => Promise.resolve(missingObj)
+        };
+
+        activeProvider = mockNotFoundProvider;
+        spyOn(openmct.objects, 'getProvider').and.returnValue(activeProvider);
+        activityStatesObject = await openmct.objects.get(activityStatesIdentifier);
+      });
+
+      it('missing objects', () => {
+        let idsMatch = openmct.objects.areIdsEqual(
+          activityStatesObject.identifier,
+          activityStatesIdentifier
+        );
+
+        expect(activityStatesObject).toBeDefined();
+        expect(idsMatch).toBeTrue();
+      });
+    });
+  });
+});

src/plugins/plan/components/ActivityTimeline.vue

@@ -135,6 +135,7 @@ export default {
       default: 22
     }
   },
+  emits: ['activity-selected'],
   data() {
     return {
       lineHeight: 10
@@ -142,30 +143,11 @@ export default {
   },
   methods: {
     setSelectionForActivity(activity, event) {
-      const element = event.currentTarget;
-      const multiSelect = event.metaKey;
-
       event.stopPropagation();
-
-      this.openmct.selection.select(
-        [
-          {
-            element: element,
-            context: {
-              type: 'activity',
-              activity: activity
-            }
-          },
-          {
-            element: this.openmct.layout.$refs.browseObject.$el,
-            context: {
-              item: this.domainObject,
-              supportsMultiSelect: true
-            }
-          }
-        ],
-        multiSelect
-      );
+      this.$emit('activity-selected', {
+        event,
+        selection: activity.selection
+      });
     }
   }
 };

src/plugins/plan/components/PlanView.vue

@@ -47,6 +47,7 @@
         :width="group.width"
         :is-nested="options.isChildObject"
         :status="status"
+        @activity-selected="selectActivity"
       />
     </div>
   </div>
@@ -134,7 +135,7 @@ export default {
     this.swimlaneVisibility = this.configuration.swimlaneVisibility;
     this.clipActivityNames = this.configuration.clipActivityNames;
     if (this.domainObject.type === 'plan') {
-      this.planData = getValidatedData(this.domainObject);
+      this.setPlanData(this.domainObject);
     }
 
     const canvas = document.createElement('canvas');
@@ -177,6 +178,9 @@ export default {
     this.planViewConfiguration.destroy();
   },
   methods: {
+    setPlanData(domainObject) {
+      this.planData = getValidatedData(domainObject);
+    },
     activityNameFitsRect(activityName, rectWidth) {
       return this.getTextWidth(activityName) + TEXT_LEFT_PADDING < rectWidth;
     },
@@ -215,9 +219,7 @@ export default {
             callback: () => {
               this.removeFromComposition(this.planObject);
               this.planObject = domainObject;
-              this.planData = getValidatedData(domainObject);
-              this.setStatus(this.openmct.status.get(domainObject.identifier));
-              this.setScaleAndGenerateActivities();
+              this.handleSelectFileChange();
               dialog.dismiss();
             }
           },
@@ -237,9 +239,7 @@ export default {
       } else {
         this.planObject = domainObject;
         this.swimlaneVisibility = this.configuration.swimlaneVisibility;
-        this.planData = getValidatedData(domainObject);
-        this.setStatus(this.openmct.status.get(domainObject.identifier));
-        this.setScaleAndGenerateActivities();
+        this.handleSelectFileChange(domainObject);
       }
     },
     handleConfigurationChange(newConfiguration) {
@@ -259,8 +259,10 @@ export default {
 
       this.setScaleAndGenerateActivities();
     },
-    handleSelectFileChange() {
-      this.planData = getValidatedData(this.domainObject);
+    handleSelectFileChange(domainObject) {
+      const planDomainObject = domainObject || this.domainObject;
+      this.setPlanData(planDomainObject);
+      this.setStatus(this.openmct.status.get(planDomainObject.identifier));
       this.setScaleAndGenerateActivities();
     },
     removeFromComposition(domainObject) {
@@ -434,7 +436,7 @@ export default {
           return;
         }
 
-        rawActivities.forEach((rawActivity) => {
+        rawActivities.forEach((rawActivity, index) => {
           if (!this.isActivityInBounds(rawActivity)) {
             return;
           }
@@ -481,13 +483,10 @@ export default {
           const activity = {
             color: color,
             textColor: textColor,
-            name: rawActivity.name,
             exceeds: {
               start: this.xScale(this.viewBounds.start) > this.xScale(rawActivity.start),
               end: this.xScale(this.viewBounds.end) < this.xScale(rawActivity.end)
             },
-            start: rawActivity.start,
-            end: rawActivity.end,
             row: currentRow,
             textLines: textLines,
             textStart: textStart,
@@ -496,7 +495,11 @@ export default {
             rectStart: rectX1,
             rectEnd: showTextInsideRect ? rectX2 : textStart + textWidth,
             rectWidth: rectWidth,
-            clipPathId: this.getClipPathId(groupName, rawActivity, currentRow)
+            clipPathId: this.getClipPathId(groupName, rawActivity, currentRow),
+            selection: {
+              groupName,
+              index
+            }
           };
           activitiesByRow[currentRow].push(activity);
         });
@@ -573,6 +576,31 @@ export default {
       const activityName = activity.name.toLowerCase().replace(/ /g, '-');
 
       return `${groupName}-${activityName}-${activity.start}-${activity.end}-${row}`;
+    },
+    selectActivity({ event, selection }) {
+      const element = event.currentTarget;
+      const multiSelect = event.metaKey;
+      const { groupName, index } = selection;
+      const rawActivity = this.planData[groupName][index];
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: rawActivity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: true
+            }
+          }
+        ],
+        multiSelect
+      );
     }
   }
 };

src/plugins/plan/inspector/components/PlanActivitiesView.vue

@@ -20,21 +20,35 @@
  at runtime from the About dialog for additional information.
 -->
 <template>
-  <div class="c-inspector__properties c-inspect-properties">
-    <plan-activity-view
-      v-for="activity in activities"
-      :key="activity.id"
-      :activity="activity"
-      :heading="heading"
-    />
-  </div>
+  <plan-activity-time-view
+    v-for="activity in activities"
+    :key="activity.key"
+    :activity="activity"
+    :heading="heading"
+  />
+  <plan-activity-properties-view
+    v-for="activity in activities"
+    :key="activity.key"
+    heading="Properties"
+    :activity="activity"
+  />
+  <plan-activity-status-view
+    v-if="canPersistState"
+    :key="activities[0].key"
+    :activity="activities[0]"
+    :execution-state="activityExecutionState"
+    heading="Activity Status"
+    @update-activity-state="persistActivityState"
+  />
 </template>
 
 <script>
 import { getPreciseDuration } from 'utils/duration';
-import { v4 as uuid } from 'uuid';
 
-import PlanActivityView from './PlanActivityView.vue';
+import { getDisplayProperties } from '../../util.js';
+import PlanActivityPropertiesView from './PlanActivityPropertiesView.vue';
+import PlanActivityStatusView from './PlanActivityStatusView.vue';
+import PlanActivityTimeView from './PlanActivityTimeView.vue';
 
 const propertyLabels = {
   start: 'Start DateTime',
@@ -44,23 +58,34 @@ const propertyLabels = {
   latestEnd: 'Latest End',
   gap: 'Gap',
   overlap: 'Overlap',
-  totalTime: 'Total Time'
+  totalTime: 'Total Time',
+  description: 'Description'
 };
 export default {
   components: {
-    PlanActivityView
+    PlanActivityTimeView,
+    PlanActivityPropertiesView,
+    PlanActivityStatusView
   },
   inject: ['openmct', 'selection'],
   data() {
     return {
       name: '',
       activities: [],
+      selectedActivities: [],
+      activityExecutionState: undefined,
       heading: ''
     };
   },
+  computed: {
+    canPersistState() {
+      return this.selectedActivities.length === 1 && this.activities?.[0]?.id;
+    }
+  },
   mounted() {
     this.setFormatters();
     this.getPlanData(this.selection);
+    this.getActivityStates();
     this.getActivities();
     this.openmct.selection.on('change', this.updateSelection);
     this.openmct.time.on('timeSystem', this.setFormatters);
@@ -68,8 +93,28 @@ export default {
   beforeUnmount() {
     this.openmct.selection.off('change', this.updateSelection);
     this.openmct.time.off('timeSystem', this.setFormatters);
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
   },
   methods: {
+    async getActivityStates() {
+      this.activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(this.activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        this.activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(newActivitiesStateObject) {
+      if (this.activities.length) {
+        const id = this.activities[0].id;
+        this.activityExecutionState = newActivitiesStateObject.activities[id];
+      } else {
+        this.activityExecutionState = undefined;
+      }
+    },
     setFormatters() {
       let timeSystem = this.openmct.time.timeSystem();
       this.timeFormatter = this.openmct.telemetry.getValueFormatter({
@@ -86,6 +131,7 @@ export default {
         if (selectionItem[0].context.type === 'activity') {
           const activity = selectionItem[0].context.activity;
           if (activity) {
+            activity.key = activity.id ?? activity.name;
             this.selectedActivities.push(activity);
           }
         }
@@ -104,20 +150,37 @@ export default {
       this.activities.splice(0);
       this.selectedActivities.forEach((selectedActivity, index) => {
         const activity = {
-          id: uuid(),
-          start: {
-            label: propertyLabels.start,
-            value: this.formatTime(selectedActivity.start)
-          },
-          end: {
-            label: propertyLabels.end,
-            value: this.formatTime(selectedActivity.end)
-          },
-          duration: {
-            label: propertyLabels.duration,
-            value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+          id: selectedActivity.id,
+          key: selectedActivity.key,
+          timeProperties: {
+            start: {
+              label: propertyLabels.start,
+              value: this.formatTime(selectedActivity.start)
+            },
+            end: {
+              label: propertyLabels.end,
+              value: this.formatTime(selectedActivity.end)
+            },
+            duration: {
+              label: propertyLabels.duration,
+              value: this.formatDuration(selectedActivity.end - selectedActivity.start)
+            }
           }
         };
+        activity.metadata = {};
+        if (selectedActivity.description) {
+          activity.metadata.description = {
+            label: propertyLabels.description,
+            value: selectedActivity.description
+          };
+        }
+
+        const displayProperties = getDisplayProperties(selectedActivity);
+        activity.metadata = {
+          ...activity.metadata,
+          ...displayProperties
+        };
+
         this.activities[index] = activity;
       });
     },
@@ -141,6 +204,8 @@ export default {
       let latestEnd;
       let gap;
       let overlap;
+      let id;
+      let key;
 
       //Sort by start time
       let selectedActivities = this.selectedActivities.sort(this.sortFn);
@@ -159,6 +224,8 @@ export default {
           earliestStart = Math.min(earliestStart, selectedActivity.start);
           latestEnd = Math.max(latestEnd, selectedActivity.end);
         } else {
+          id = selectedActivity.id;
+          key = selectedActivity.id ?? selectedActivity.name;
           earliestStart = selectedActivity.start;
           latestEnd = selectedActivity.end;
         }
@@ -166,30 +233,33 @@ export default {
       let totalTime = latestEnd - earliestStart;
 
       const activity = {
-        id: uuid(),
-        earliestStart: {
-          label: propertyLabels.earliestStart,
-          value: this.formatTime(earliestStart)
-        },
-        latestEnd: {
-          label: propertyLabels.latestEnd,
-          value: this.formatTime(latestEnd)
+        id,
+        key,
+        timeProperties: {
+          earliestStart: {
+            label: propertyLabels.earliestStart,
+            value: this.formatTime(earliestStart)
+          },
+          latestEnd: {
+            label: propertyLabels.latestEnd,
+            value: this.formatTime(latestEnd)
+          }
         }
       };
 
       if (gap) {
-        activity.gap = {
+        activity.timeProperties.gap = {
           label: propertyLabels.gap,
           value: this.formatDuration(gap)
         };
       } else if (overlap) {
-        activity.overlap = {
+        activity.timeProperties.overlap = {
           label: propertyLabels.overlap,
           value: this.formatDuration(overlap)
         };
       }
 
-      activity.totalTime = {
+      activity.timeProperties.totalTime = {
         label: propertyLabels.totalTime,
         value: this.formatDuration(totalTime)
       };
@@ -201,6 +271,11 @@ export default {
     },
     formatTime(time) {
       return this.timeFormatter.format(time);
+    },
+    persistActivityState(data) {
+      const { key, executionState } = data;
+      const activitiesPath = `activities.${key}`;
+      this.openmct.objects.mutate(this.activityStatesObject, activitiesPath, executionState);
     }
   }
 };

src/plugins/plan/inspector/components/PlanActivityPropertiesView.vue

@@ -0,0 +1,81 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="properties.length" class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <ul v-for="property in properties" :key="property.id" class="c-inspect-properties__section">
+        <activity-property :label="property.label" :value="property.value" />
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import ActivityProperty from './ActivityProperty.vue';
+
+export default {
+  components: {
+    ActivityProperty
+  },
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      properties: []
+    };
+  },
+  mounted() {
+    this.setProperties();
+  },
+  methods: {
+    setProperties() {
+      if (!this.activity.metadata) {
+        return;
+      }
+
+      Object.keys(this.activity.metadata).forEach((key) => {
+        if (this.activity.metadata[key].label) {
+          const label = this.activity.metadata[key].label;
+          const value = String(this.activity.metadata[key].value);
+          const id = this.activity.id;
+
+          this.properties[this.properties.length] = {
+            id,
+            label,
+            value
+          };
+        }
+      });
+    }
+  }
+};
+</script>

src/plugins/plan/inspector/components/PlanActivityStatusView.vue

@@ -0,0 +1,131 @@
+<!--
+ Open MCT, Copyright (c) 2014-2023, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+
+<template>
+  <div class="c-inspector__properties c-inspect-properties">
+    <div class="u-contents">
+      <div class="c-inspect-properties__header">{{ heading }}</div>
+      <div class="c-inspect-properties__row">
+        <div class="c-inspect-properties__label" title="Set Status">Set Status</div>
+        <div class="c-inspect-properties__value" aria-label="Activity Status Label">
+          <select
+            v-model="currentStatusKey"
+            name="setActivityStatus"
+            aria-label="Activity Status"
+            @change="changeActivityStatus"
+          >
+            <option
+              v-for="status in activityStates"
+              :key="status.key"
+              :value="status.key"
+              :aria-selected="currentStatusKey === status.key"
+            >
+              {{ status.label }}
+            </option>
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+const activityStates = [
+  {
+    key: 'notStarted',
+    label: 'Not started'
+  },
+  {
+    key: 'in-progress',
+    label: 'In progress'
+  },
+  {
+    key: 'completed',
+    label: 'Completed'
+  },
+  {
+    key: 'aborted',
+    label: 'Aborted'
+  },
+  {
+    key: 'skipped',
+    label: 'Skipped'
+  },
+  {
+    key: 'cancelled',
+    label: 'Cancelled'
+  }
+];
+
+export default {
+  props: {
+    activity: {
+      type: Object,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default() {
+        return '';
+      }
+    },
+    heading: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['updateActivityState'],
+  data() {
+    return {
+      activityStates: activityStates,
+      currentStatusKey: activityStates[0].key
+    };
+  },
+  watch: {
+    executionState() {
+      this.setActivityStatus();
+    }
+  },
+  mounted() {
+    this.setActivityStatus();
+  },
+  methods: {
+    setActivityStatus() {
+      let statusKeyIndex = activityStates.findIndex((state) => state.key === this.executionState);
+      if (statusKeyIndex < 0) {
+        statusKeyIndex = 0;
+      }
+      this.currentStatusKey = this.activityStates[statusKeyIndex].key;
+    },
+    changeActivityStatus() {
+      if (this.currentStatusKey === '') {
+        return;
+      }
+      this.activity.executionState = this.currentStatusKey;
+      this.$emit('updateActivityState', {
+        key: this.activity.id,
+        executionState: this.currentStatusKey
+      });
+    }
+  }
+};
+</script>

src/plugins/plan/inspector/components/PlanActivityTimeView.vue

@@ -21,23 +21,23 @@
 -->
 
 <template>
-  <div v-if="timeProperties.length" class="u-contents">
-    <div class="c-inspect-properties__header">
-      {{ heading }}
+  <div class="c-inspector__properties c-inspect-properties">
+    <div v-if="timeProperties.length" class="u-contents">
+      <div class="c-inspect-properties__header">
+        {{ heading }}
+      </div>
+      <ul
+        v-for="timeProperty in timeProperties"
+        :key="timeProperty.id"
+        class="c-inspect-properties__section"
+      >
+        <activity-property :label="timeProperty.label" :value="timeProperty.value" />
+      </ul>
     </div>
-    <ul
-      v-for="timeProperty in timeProperties"
-      :key="timeProperty.id"
-      class="c-inspect-properties__section"
-    >
-      <activity-property :label="timeProperty.label" :value="timeProperty.value" />
-    </ul>
   </div>
 </template>
 
 <script>
-import { v4 as uuid } from 'uuid';
-
 import ActivityProperty from './ActivityProperty.vue';
 
 export default {
@@ -64,13 +64,14 @@ export default {
   },
   methods: {
     setProperties() {
-      Object.keys(this.activity).forEach((key) => {
-        if (this.activity[key].label) {
-          const label = this.activity[key].label;
-          const value = String(this.activity[key].value);
+      Object.keys(this.activity.timeProperties).forEach((key) => {
+        if (this.activity.timeProperties[key].label) {
+          const label = this.activity.timeProperties[key].label;
+          const value = String(this.activity.timeProperties[key].value);
+          const id = this.activity.id;
 
           this.timeProperties[this.timeProperties.length] = {
-            id: uuid(),
+            id,
             label,
             value
           };

src/plugins/plan/plugin.js

@@ -20,12 +20,28 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+import activityStatesInterceptor from '../activityStates/activityStatesInterceptor.js';
+import { createActivityStatesIdentifier } from '../activityStates/createActivityStatesIdentifier.js';
 import ganttChartCompositionPolicy from './GanttChartCompositionPolicy.js';
 import ActivityInspectorViewProvider from './inspector/ActivityInspectorViewProvider.js';
 import GanttChartInspectorViewProvider from './inspector/GanttChartInspectorViewProvider.js';
 import { DEFAULT_CONFIGURATION } from './PlanViewConfiguration.js';
 import PlanViewProvider from './PlanViewProvider.js';
 
+const ACTIVITY_STATES_DEFAULT_NAME = 'Activity States';
+/**
+ * @typedef {object} PlanOptions
+ * @property {boolean} creatable true/false to allow creation of a plan via the Create menu.
+ * @property {string} name The name of the activity states model.
+ * @property {string} namespace the namespace to use for the activity states object.
+ * @property {Number} priority the priority of the interceptor. By default, it is low.
+ */
+
+/**
+ *
+ * @param {PlanOptions} options
+ * @returns {*} (any)
+ */
 export default function (options = {}) {
   return function install(openmct) {
     openmct.types.addType('plan', {
@@ -70,5 +86,13 @@ export default function (options = {}) {
     openmct.inspectorViews.addProvider(new ActivityInspectorViewProvider(openmct));
     openmct.inspectorViews.addProvider(new GanttChartInspectorViewProvider(openmct));
     openmct.composition.addPolicy(ganttChartCompositionPolicy(openmct));
+
+    //add activity states get interceptor
+    const { name = ACTIVITY_STATES_DEFAULT_NAME, namespace = '', priority } = options;
+    const identifier = createActivityStatesIdentifier(namespace);
+
+    openmct.objects.addGetInterceptor(
+      activityStatesInterceptor(openmct, { identifier, name, priority })
+    );
   };
 }

src/plugins/plan/util.js

@@ -20,6 +20,18 @@
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
 
+/**
+ * The SourceMap allows mapping specific implementations of plan domain objects to those expected by Open MCT.
+ * @typedef {object} SourceMapOption
+ * @property {string} orderedGroups the property of the plan that lists groups/swim lanes specifying what order they will be displayed in Open MCT.
+ * @property {string} activities the property of the plan that has the list of activities to be displayed.
+ * @property {string} groupId the property of the activity that maps to the group/swim lane it should be displayed in.
+ * @property {string} start The start time property of the activity
+ * @property {string} end The end time property of the activity
+ * @property {string} id The unique id of the activity. This is required to allow setting activity states
+ * @property {object} displayProperties a list of key: value pairs that specifies which properties of the activity should be displayed when it is selected. Ex. {'location': 'Location', 'metadata.length_in_meters', 'Length (meters)'}
+ */
+
 export function getValidatedData(domainObject) {
   const sourceMap = domainObject.sourceMap;
   const json = getObjectJson(domainObject);
@@ -45,6 +57,14 @@ export function getValidatedData(domainObject) {
           groupActivity.end = activity[sourceMap.end];
         }
 
+        if (sourceMap.id) {
+          groupActivity.id = activity[sourceMap.id];
+        }
+
+        if (sourceMap.displayProperties) {
+          groupActivity.displayProperties = sourceMap.displayProperties;
+        }
+
         if (!mappedJson[groupIdKey]) {
           mappedJson[groupIdKey] = [];
         }
@@ -100,6 +120,26 @@ export function getValidatedGroups(domainObject, planData) {
   return orderedGroupNames;
 }
 
+export function getDisplayProperties(activity) {
+  let displayProperties = {};
+  function extractProperties(properties, useKeyAsLabel = false) {
+    Object.keys(properties).forEach((key) => {
+      const label = useKeyAsLabel ? key : properties[key];
+      const value = _.get(activity, key);
+      if (value) {
+        displayProperties[key] = { label, value };
+      }
+    });
+  }
+
+  if (activity?.displayProperties) {
+    extractProperties(activity.displayProperties);
+  } else if (activity?.properties) {
+    extractProperties(activity.properties, true);
+  }
+  return displayProperties;
+}
+
 export function getContrastingColor(hexColor) {
   function cutHex(h, start, end) {
     const hStr = h.charAt(0) === '#' ? h.substring(1, 7) : h;

src/plugins/telemetryTable/components/table.scss

@@ -123,15 +123,6 @@
       .is-editing .l-layout__frame & {
         pointer-events: none;
       }
-
-      &.is-selected {
-        background-color: $colorSelectedBg !important;
-        color: $colorSelectedFg !important;
-        td {
-          background: none !important;
-          color: inherit !important;
-        }
-      }
     }
 
     td {
@@ -203,6 +194,18 @@ td {
   @include isLimit();
 }
 
+.c-table tr {
+  &[s-selected],
+  &.is-selected {
+    background-color: $colorSelectedBg !important;
+    color: $colorSelectedFg !important;
+    td {
+      background: none !important;
+      color: inherit !important;
+    }
+  }
+}
+
 /******************************* SPECIFIC CASE WRAPPERS */
 .is-editing {
   .c-telemetry-table__headers__labels {

src/plugins/timelist/ExpandedViewItem.vue

@@ -0,0 +1,240 @@
+<!--
+ Open MCT, Copyright (c) 2014-2024, United States Government
+ as represented by the Administrator of the National Aeronautics and Space
+ Administration. All rights reserved.
+
+ Open MCT is licensed under the Apache License, Version 2.0 (the
+ "License"); you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0.
+
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ License for the specific language governing permissions and limitations
+ under the License.
+
+ Open MCT includes source code licensed under additional open source
+ licenses. See the Open Source Licenses file (LICENSES.md) included with
+ this source code distribution or the Licensing information page available
+ at runtime from the About dialog for additional information.
+-->
+<template>
+  <div :class="listItemClass">
+    <div class="c-tli__activity-color">
+      <div class="c-tli__activity-color-swatch" :style="styleClass"></div>
+    </div>
+    <div class="c-tli__title-and-bounds">
+      <div class="c-tli__title">{{ formattedItemValue.title }}</div>
+      <div class="c-tli__bounds" :class="{ '--has-duration': formattedItemValue.end }">
+        <div class="c-tli__duration">{{ formattedItemValue.duration }}</div>
+        <div class="c-tli__start-time">
+          {{ formattedItemValue.start }}
+        </div>
+        <div class="c-tli__end-time">{{ formattedItemValue.end }}</div>
+      </div>
+    </div>
+    <div class="c-tli__graphic">
+      <svg viewBox="0 0 100 100">
+        <g aria-label="Activity in progress" class="c-tli__graphic__pie">
+          <circle class="c-svg-progress__bg" r="50" cx="50" cy="50"></circle>
+          <path id="svg-progress-path" class="c-svg-progress__progress"></path>
+          <circle
+            class="c-svg-progress__ticks"
+            r="40"
+            cx="50"
+            cy="50"
+            stroke-dasharray="3 7.472"
+          ></circle>
+        </g>
+        <path
+          aria-label="Activity complete"
+          class="c-tli__graphic__check"
+          d="M80 20L42.5 57.5L20 35V57.5L42.5 80L80 42.5V20Z"
+        />
+        <path
+          aria-label="Activity alert"
+          class="c-tli__graphic__alert-triangle"
+          d="M79.4533 70.3034L54.004 25.7641C51.8962 22.0786 48.4636 22.0786 46.3559 25.7641L20.8946 70.3034C18.7868 73.989 20.5332 77 24.7728 77H75.563C79.8146 77 81.561 73.989 79.4533 70.3034ZM54.028 73.1459H46.3198V65.4376H54.028V73.1459ZM55.3409 50.0211L53.0645 61.5835H47.2833L45.007 50.0211V34.6045H55.3529V50.0211H55.3409Z"
+        />
+        <g aria-label="Activity aborted" class="c-tli__graphic__circle-slash">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M50 82C67.6731 82 82 67.6731 82 50C82 32.3269 67.6731 18 50 18C32.3269 18 18 32.3269 18 50C18 67.6731 32.3269 82 50 82ZM50 72C62.1503 72 72 62.1503 72 50C72 37.8497 62.1503 28 50 28C37.8497 28 28 37.8497 28 50C28 62.1503 37.8497 72 50 72Z"
+          />
+          <path
+            d="M63.7886 29.6404L70.8596 36.7114L36.2114 71.3596L29.1404 64.2886L63.7886 29.6404Z"
+          />
+        </g>
+        <path
+          aria-label="Activity skipped"
+          class="c-tli__graphic__skipped"
+          d="M31 48C31 42.4772 35.5152 38 41 38H59C64.4848 38 69 42.4772 69 48V55H58L74 72L90 55H79V48C79 36.9543 69.9695 28 59 28H41C30.0305 28 21 36.9543 21 48V53.0294C21 56.8792 17.8232 60 14 60V70C23.308 70 31 62.402 31 53.0294V48Z"
+        />
+      </svg>
+    </div>
+    <div class="c-tli__time-hero">
+      <div class="c-tli__time-hero-context-and-time">
+        <div class="c-tli__time-hero-context">{{ formattedItemValue.label }}</div>
+        <div v-if="showTimeHero" class="c-tli__time-hero-time --is-countdown">
+          {{ formattedItemValue.countdown }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import _ from 'lodash';
+
+import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
+import { CURRENT_CSS_SUFFIX, FUTURE_CSS_SUFFIX, PAST_CSS_SUFFIX } from './constants.js';
+
+const ITEM_COLORS = {
+  [CURRENT_CSS_SUFFIX]: '#ffcc00',
+  [PAST_CSS_SUFFIX]: '#0088ff',
+  [FUTURE_CSS_SUFFIX]: '#7300ff'
+};
+
+const EXECUTION_STATES = {
+  notStarted: 'Not started',
+  active: 'In progress',
+  completed: 'Completed',
+  aborted: 'Aborted',
+  skipped: 'Skipped',
+  cancelled: 'Cancelled'
+};
+
+const INFERRED_EXECUTION_STATES = {
+  incomplete: 'Incomplete',
+  overdue: 'Overdue',
+  runningLong: 'Running Long',
+  starts: 'Starts',
+  occurs: 'Occurs',
+  ends: 'Ends'
+};
+
+export default {
+  inject: ['openmct', 'domainObject', 'path'],
+  props: {
+    item: {
+      type: Object,
+      required: true
+    },
+    itemProperties: {
+      type: Array,
+      required: true
+    },
+    executionState: {
+      type: String,
+      default() {
+        return '';
+      }
+    }
+  },
+  data() {
+    return {
+      timestamp: this.openmct.time.now()
+    };
+  },
+  computed: {
+    styleClass() {
+      return { backgroundColor: ITEM_COLORS[this.item.cssClass] };
+    },
+    listItemClass() {
+      const timeRelationClass = this.item.cssClass;
+      const executionStateClass = `--is-${this.executionState}`;
+      return `c-tli ${timeRelationClass} ${executionStateClass}`;
+    },
+    formattedItemValue() {
+      let executionStateLabel;
+      const executionStateKeys = Object.keys(EXECUTION_STATES);
+      const executionStateIndex = executionStateKeys.findIndex(
+        (key) => key === this.executionState
+      );
+      if (executionStateIndex > -1) {
+        executionStateLabel = EXECUTION_STATES[executionStateIndex];
+
+        // - 'Incomplete' : executionState.notStarted && now > end datetime
+        if (executionStateIndex === 0 && this.item.cssClass === PAST_CSS_SUFFIX) {
+          executionStateLabel = INFERRED_EXECUTION_STATES.incomplete;
+        }
+        // - 'Ends' : executionState.inProgress && now > start datetime && now < end datetime
+        // - 'Running Long' : executionState.inProgress && now > end datetime
+        // - 'Overdue' : executionState.notStarted && start < now datetime
+        if (executionStateIndex === 1) {
+          if (this.item.cssClass === CURRENT_CSS_SUFFIX) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.ends;
+          } else if (this.timestamp > this.item.end) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.runningLong;
+          } else if (this.item.start < this.timestamp) {
+            executionStateLabel = INFERRED_EXECUTION_STATES.overdue;
+          }
+        }
+      }
+      let itemValue = {
+        title: this.item.name
+      };
+      this.itemProperties.forEach((itemProperty) => {
+        let value = this.item[itemProperty.key];
+        let formattedValue;
+        if (itemProperty.format) {
+          formattedValue = itemProperty.format(value, this.item, itemProperty.key, this.openmct, {
+            skipPrefix: true
+          });
+        }
+        itemValue[itemProperty.key] = formattedValue;
+
+        // - 'Starts' : for Activities with now > start datetime
+        // - 'Occurs' : for Events with now > start datetime and 0 duration
+        let label;
+        if (itemProperty.key === 'countdown') {
+          if (this.item.start < this.timestamp) {
+            if (this.item.start === this.item.end) {
+              label = INFERRED_EXECUTION_STATES.occurs;
+            } else {
+              label = INFERRED_EXECUTION_STATES.starts;
+            }
+          } else {
+            label = executionStateLabel;
+          }
+        }
+        itemValue.label = itemValue.label ?? label;
+      });
+
+      return itemValue;
+    },
+    showTimeHero() {
+      return !(
+        this.executionState === EXECUTION_STATES.completed ||
+        this.executionState === EXECUTION_STATES.aborted ||
+        this.executionState === EXECUTION_STATES.skipped
+      );
+    }
+  },
+  mounted() {
+    this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
+    this.setTimeContext();
+    this.timestamp = this.timeContext.now();
+  },
+  methods: {
+    setTimeContext() {
+      this.stopFollowingTimeContext();
+      this.timeContext = this.openmct.time.getContextForView(this.path);
+      this.followTimeContext();
+    },
+    followTimeContext() {
+      this.timeContext.on(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+    },
+    stopFollowingTimeContext() {
+      if (this.timeContext) {
+        this.timeContext.off(TIME_CONTEXT_EVENTS.tick, this.updateTimestamp);
+      }
+    },
+    updateTimestamp(time) {
+      this.timestamp = time;
+    }
+  }
+};
+</script>

src/plugins/timelist/TimelistComponent.vue

@@ -21,13 +21,50 @@
 -->
 
 <template>
-  <div ref="timelistHolder" class="c-timelist">
-    <list-view
-      :items="planActivities"
-      :header-items="headerItems"
-      :default-sort="defaultSort"
-      class="sticky"
-    />
+  <div ref="timelistHolder" :class="listTypeClass">
+    <template v-if="isExpanded">
+      <expanded-view-item
+        v-for="item in sortedItems"
+        :key="item.key"
+        :item="item"
+        :item-properties="itemProperties"
+        :execution-state="persistedActivityStates[item.id]"
+        @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+      >
+      </expanded-view-item>
+    </template>
+    <div v-else class="c-table c-table--sortable c-list-view c-list-view--sticky-header sticky">
+      <table class="c-table__body js-table__body">
+        <thead class="c-table__header">
+          <tr>
+            <list-header
+              v-for="headerItem in headerItems"
+              :key="headerItem.property"
+              :direction="
+                defaultSort.property === headerItem.property
+                  ? defaultSort.defaultDirection
+                  : headerItem.defaultDirection
+              "
+              :is-sortable="headerItem.isSortable"
+              :aria-label="headerItem.name"
+              :title="headerItem.name"
+              :property="headerItem.property"
+              :current-sort="defaultSort.property"
+              @sort="sort"
+            />
+          </tr>
+        </thead>
+        <tbody>
+          <list-item
+            v-for="item in sortedItems"
+            :key="item.key"
+            :item="item"
+            :item-properties="itemProperties"
+            @click.stop="setSelectionForActivity(item, $event.currentTarget)"
+          />
+        </tbody>
+      </table>
+    </div>
   </div>
 </template>
 
@@ -36,17 +73,22 @@ import _ from 'lodash';
 import { v4 as uuid } from 'uuid';
 
 import { TIME_CONTEXT_EVENTS } from '../../api/time/constants.js';
-import ListView from '../../ui/components/List/ListView.vue';
+import ListHeader from '../../ui/components/List/ListHeader.vue';
+import ListItem from '../../ui/components/List/ListItem.vue';
 import { getPreciseDuration } from '../../utils/duration.js';
 import { getValidatedData, getValidatedGroups } from '../plan/util.js';
-import { SORT_ORDER_OPTIONS } from './constants.js';
+import {
+  CURRENT_CSS_SUFFIX,
+  FUTURE_CSS_SUFFIX,
+  PAST_CSS_SUFFIX,
+  SORT_ORDER_OPTIONS
+} from './constants.js';
+import ExpandedViewItem from './ExpandedViewItem.vue';
 
 const SCROLL_TIMEOUT = 10000;
 
 const TIME_FORMAT = 'YYYY-MM-DD HH:mm:ss';
-const CURRENT_CSS_SUFFIX = '--is-current';
-const PAST_CSS_SUFFIX = '--is-past';
-const FUTURE_CSS_SUFFIX = '--is-future';
+
 const headerItems = [
   {
     defaultDirection: true,
@@ -72,17 +114,22 @@ const headerItems = [
   },
   {
     defaultDirection: false,
-    property: 'duration',
+    property: 'countdown',
     name: 'Time To/From',
-    format: function (value) {
+    format: function (value, object, key, openmct, options = {}) {
       let result;
       if (value < 0) {
-        result = `+${getPreciseDuration(Math.abs(value), {
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(Math.abs(value), {
           excludeMilliSeconds: true,
           useDayFormat: true
         })}`;
       } else if (value > 0) {
-        result = `-${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+        const prefix = options.skipPrefix ? '' : '+';
+        result = `${prefix}${getPreciseDuration(value, {
+          excludeMilliSeconds: true,
+          useDayFormat: true
+        })}`;
       } else {
         result = 'Now';
       }
@@ -90,6 +137,14 @@ const headerItems = [
       return result;
     }
   },
+  {
+    defaultDirection: false,
+    property: 'duration',
+    name: 'Duration',
+    format: function (value, object, key, openmct) {
+      return `${getPreciseDuration(value, { excludeMilliSeconds: true, useDayFormat: true })}`;
+    }
+  },
   {
     defaultDirection: true,
     property: 'name',
@@ -104,7 +159,9 @@ const defaultSort = {
 
 export default {
   components: {
-    ListView
+    ExpandedViewItem,
+    ListHeader,
+    ListItem
   },
   inject: ['openmct', 'domainObject', 'path', 'composition'],
   data() {
@@ -114,9 +171,34 @@ export default {
       height: 0,
       planActivities: [],
       headerItems: headerItems,
-      defaultSort: defaultSort
+      defaultSort: defaultSort,
+      isExpanded: false,
+      persistedActivityStates: {}
     };
   },
+  computed: {
+    listTypeClass() {
+      if (this.isExpanded) {
+        return 'c-timelist c-timelist--large';
+      }
+      return 'c-timelist';
+    },
+    sortedItems() {
+      let sortedItems = _.sortBy(this.planActivities, this.defaultSort.property);
+      if (!this.defaultSort.defaultDirection) {
+        sortedItems = sortedItems.reverse();
+      }
+      return sortedItems;
+    },
+    itemProperties() {
+      return this.headerItems.map((headerItem) => {
+        return {
+          key: headerItem.property,
+          format: headerItem.format
+        };
+      });
+    }
+  },
   mounted() {
     this.isEditing = this.openmct.editor.isEditing();
     this.updateTimestamp = _.throttle(this.updateTimestamp, 1000);
@@ -125,6 +207,7 @@ export default {
     this.timestamp = this.timeContext.now();
 
     this.getPlanDataAndSetConfig(this.domainObject);
+    this.getActivityStates();
 
     this.unlisten = this.openmct.objects.observe(
       this.domainObject,
@@ -164,6 +247,14 @@ export default {
       this.unlistenConfig();
     }
 
+    if (this.stopObservingPlan) {
+      this.stopObservingPlan();
+    }
+
+    if (this.stopObservingActivityStatesObject) {
+      this.stopObservingActivityStatesObject();
+    }
+
     if (this.removeStatusListener) {
       this.removeStatusListener();
     }
@@ -203,20 +294,31 @@ export default {
         sourceMap: this.domainObject.sourceMap
       });
     },
+    async getActivityStates() {
+      this.activityStatesObject = await this.openmct.objects.get('activity-states');
+      this.setActivityStates(this.activityStatesObject);
+      this.stopObservingActivityStatesObject = this.openmct.objects.observe(
+        this.activityStatesObject,
+        '*',
+        this.setActivityStates
+      );
+    },
+    setActivityStates(activityStatesObject) {
+      this.persistedActivityStates = activityStatesObject.activities;
+    },
     getPlanDataAndSetConfig(mutatedObject) {
       this.getPlanData(mutatedObject);
       this.setViewFromConfig(mutatedObject.configuration);
     },
     setViewFromConfig(configuration) {
+      this.filterValue = configuration.filter;
       if (this.isEditing) {
-        this.filterValue = configuration.filter;
         this.hideAll = false;
-        this.listActivities();
       } else {
-        this.filterValue = configuration.filter;
         this.setSort();
-        this.listActivities();
+        this.isExpanded = configuration.isExpanded;
       }
+      this.listActivities();
     },
     updateTimestamp(timestamp) {
       //The clock never stops ticking
@@ -230,8 +332,8 @@ export default {
       }
     },
     addItem(domainObject) {
-      this.planObjects = [domainObject];
       this.resetPlanData();
+      this.planObjects = [domainObject];
       if (domainObject.type === 'plan') {
         this.getPlanDataAndSetConfig({
           ...this.domainObject,
@@ -239,15 +341,28 @@ export default {
           sourceMap: domainObject.sourceMap
         });
       }
+      //listen for changes to the plan
+      if (this.stopObservingPlan) {
+        this.stopObservingPlan();
+      }
+      this.stopObservingPlan = this.openmct.objects.observe(
+        this.planObjects[0],
+        '*',
+        this.handlePlanChange
+      );
     },
-    addToComposition(telemetryObject) {
+    handlePlanChange(planObject) {
+      this.getPlanData(planObject);
+      this.listActivities();
+    },
+    addToComposition(planObject) {
       if (this.planObjects.length > 0) {
-        this.confirmReplacePlan(telemetryObject);
+        this.confirmReplacePlan(planObject);
       } else {
-        this.addItem(telemetryObject);
+        this.addItem(planObject);
       }
     },
-    confirmReplacePlan(telemetryObject) {
+    confirmReplacePlan(planObject) {
       const dialog = this.openmct.overlays.dialog({
         iconClass: 'alert',
         message: 'This action will replace the current plan. Do you want to continue?',
@@ -258,22 +373,22 @@ export default {
             callback: () => {
               const oldTelemetryObject = this.planObjects[0];
               this.removeFromComposition(oldTelemetryObject);
-              this.addItem(telemetryObject);
+              this.addItem(planObject);
               dialog.dismiss();
             }
           },
           {
             label: 'Cancel',
             callback: () => {
-              this.removeFromComposition(telemetryObject);
+              this.removeFromComposition(planObject);
               dialog.dismiss();
             }
           }
         ]
       });
     },
-    removeFromComposition(telemetryObject) {
-      this.composition.remove(telemetryObject);
+    removeFromComposition(planObject) {
+      this.composition.remove(planObject);
     },
     removeItem() {
       this.planObjects = [];
@@ -379,11 +494,13 @@ export default {
         activity.key = uuid();
       }
 
+      activity.duration = activity.end - activity.start;
+
       if (activity.start < this.timestamp) {
         //if the activity start time has passed, display the time to the end of the activity
-        activity.duration = activity.end - this.timestamp;
+        activity.countdown = activity.end - this.timestamp;
       } else {
-        activity.duration = activity.start - this.timestamp;
+        activity.countdown = activity.start - this.timestamp;
       }
 
       return activity;
@@ -426,7 +543,7 @@ export default {
     },
     setScrollTop() {
       //The view isn't ready yet
-      if (!this.$el.parentElement) {
+      if (!this.$el.parentElement || this.isExpanded) {
         return;
       }
 
@@ -516,6 +633,40 @@ export default {
     setEditState(isEditing) {
       this.isEditing = isEditing;
       this.setViewFromConfig(this.domainObject.configuration);
+    },
+    sort(data) {
+      const property = data.property;
+      const direction = data.direction;
+
+      if (this.defaultSort.property === property) {
+        this.defaultSort.defaultDirection = !this.defaultSort.defaultDirection;
+      } else {
+        this.defaultSort.property = property;
+        this.defaultSort.defaultDirection = direction;
+      }
+    },
+    setSelectionForActivity(activity, element) {
+      const multiSelect = false;
+
+      this.openmct.selection.select(
+        [
+          {
+            element: element,
+            context: {
+              type: 'activity',
+              activity: activity
+            }
+          },
+          {
+            element: this.openmct.layout.$refs.browseObject.$el,
+            context: {
+              item: this.domainObject,
+              supportsMultiSelect: false
+            }
+          }
+        ],
+        multiSelect
+      );
     }
   }
 };

src/plugins/timelist/constants.js

@@ -22,3 +22,7 @@ export const SORT_ORDER_OPTIONS = [
 ];
 
 export const TIMELIST_TYPE = 'timelist';
+
+export const CURRENT_CSS_SUFFIX = '--is-current';
+export const PAST_CSS_SUFFIX = '--is-past';
+export const FUTURE_CSS_SUFFIX = '--is-future';

src/plugins/timelist/inspector/EventProperties.vue

@@ -22,8 +22,8 @@
 <template>
   <li class="c-inspect-properties__row">
     <div class="c-inspect-properties__label" title="Options for future events.">{{ label }}</div>
-    <div v-if="canEdit" class="c-inspect-properties__value">
-      <select v-model="index" @change="updateForm('index')">
+    <div class="c-inspect-properties__value">
+      <select v-if="canEdit" v-model="index" @change="updateForm('index')">
         <option
           v-for="(activityOption, activityKey) in activitiesOptions"
           :key="activityKey"
@@ -32,9 +32,7 @@
           {{ activityOption }}
         </option>
       </select>
-    </div>
-    <div v-else class="c-inspect-properties__value">
-      {{ activitiesOptions[index] }}
+      <span v-else>{{ activitiesOptions[index] }}</span>
     </div>
   </li>
 </template>

src/plugins/timelist/inspector/TimeListInspectorViewProvider.js

@@ -28,7 +28,7 @@ import TimelistPropertiesView from './TimelistPropertiesView.vue';
 export default function TimeListInspectorViewProvider(openmct) {
   return {
     key: 'timelist-inspector',
-    name: 'Timelist Inspector View',
+    name: 'View Properties',
     canView: function (selection) {
       if (selection.length === 0 || selection[0].length === 0) {
         return false;

src/plugins/timelist/inspector/TimelistPropertiesView.vue

@@ -30,11 +30,21 @@
             These settings don't affect the view while editing, but will be applied after editing is
             finished.
           </div>
+          <div class="c-inspect-properties__label" title="Display Style">Display Style</div>
+          <div class="c-inspect-properties__value">
+            <select v-if="canEdit" v-model="isExpanded" @change="updateExpandedView()">
+              <option :key="'expanded-view-option-enabled'" :value="true">Expanded</option>
+              <option :key="'expanded-view-option-disabled'" :value="false">Compact</option>
+            </select>
+            <span v-else>{{ isExpanded ? 'Expanded' : 'Compact' }}</span>
+          </div>
+        </li>
+        <li class="c-inspect-properties__row">
           <div class="c-inspect-properties__label" title="Sort order of the timelist.">
             Sort Order
           </div>
-          <div v-if="canEdit" class="c-inspect-properties__value">
-            <select v-model="sortOrderIndex" @change="updateSortOrder()">
+          <div class="c-inspect-properties__value">
+            <select v-if="canEdit" v-model="sortOrderIndex" @change="updateSortOrder()">
               <option
                 v-for="(sortOrderOption, index) in sortOrderOptions"
                 :key="index"
@@ -43,9 +53,7 @@
                 {{ sortOrderOption.label }}
               </option>
             </select>
-          </div>
-          <div v-else class="c-inspect-properties__value">
-            {{ sortOrderOptions[sortOrderIndex].label }}
+            <span v-else>{{ sortOrderOptions[sortOrderIndex].label }}</span>
           </div>
         </li>
         <event-properties
@@ -89,7 +97,8 @@ export default {
       sortOrderIndex: this.domainObject.configuration.sortOrderIndex,
       sortOrderOptions: SORT_ORDER_OPTIONS,
       eventTypes: EVENT_TYPES,
-      isEditing: this.openmct.editor.isEditing()
+      isEditing: this.openmct.editor.isEditing(),
+      isExpanded: this.domainObject.configuration.isExpanded || false
     };
   },
   computed: {
@@ -117,6 +126,9 @@ export default {
       const key = data.property;
       const value = data.value;
       this.updateProperty(key, value);
+    },
+    updateExpandedView() {
+      this.updateProperty('isExpanded', this.isExpanded);
     }
   }
 };

src/plugins/timelist/timelist.scss

@@ -19,41 +19,288 @@
  * this source code distribution or the Licensing information page available
  * at runtime from the About dialog for additional information.
  *****************************************************************************/
-
 .c-timelist {
-  & .nowMarker.hasCurrent {
-    height: 2px;
-    position: absolute;
-    z-index: 10;
-    background: cyan;
-    width: 100%;
-  }
-
-  .c-list-item {
-    /* Time Lists */
-
-    td {
-      $p: $interiorMarginSm;
-      padding-top: $p;
-      padding-bottom: $p;
+    & .nowMarker.hasCurrent {
+        height: 2px;
+        position: absolute;
+        z-index: 10;
+        background: cyan;
+        width: 100%;
     }
 
-    &.--is-current {
-      background-color: $colorCurrentBg;
-      border-top: 1px solid $colorCurrentBorder !important;
-      color: $colorCurrentFg;
-    }
+    .c-list-item {
+        /* Time Lists */
 
-    &.--is-future {
-      background-color: $colorFutureBg;
-      border-top-color: $colorFutureBorder !important;
-      color: $colorFutureFg;
-    }
+        td {
+            $p: $interiorMarginSm;
+            padding-top: $p;
+            padding-bottom: $p;
+        }
 
-    &__value {
-      &.--duration {
-        width: 5%;
-      }
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            border-top: 1px solid $colorCurrentBorder !important;
+            color: $colorCurrentFgEm;
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            border-top-color: $colorFutureBorder !important;
+            color: $colorFutureFgEm;
+        }
+
+        &.--is-in-progress {
+            background-color: $colorInProgressBg;
+        }
+
+        &__value {
+            &.--duration {
+                width: 5%;
+            }
+        }
+    }
+}
+
+/**************************************************** LARGE TIME LIST */
+@mixin styleTliEm($colorEm) {
+    // Styles emphasized elements within c-tli.
+    .c-tli {
+        &__duration,
+        &__title,
+        &__time-hero-time {
+            color: $colorEm;
+        }
+    }
+}
+@mixin showTliGraphic($wGraphic) {
+    .c-tli__graphic {
+        &__#{$wGraphic} {
+            display: block;
+        }
+    }
+}
+
+.c-timelist--large {
+    $textSm: 0.8em;
+    $textLg: 1.3em;
+
+    margin-right: $interiorMargin; // fend off from scrollbar
+
+    > * + * {
+        margin-top: $interiorMarginSm;
+    }
+
+    .c-tli {
+        // TODO: add styles for various activity statuses
+        $baseBg: $colorPastBg;
+        $baseFg: $colorPastFg;
+        $baseFgEm: $colorPastFgEm;
+
+        background: $baseBg;
+        color: $baseFg;
+        border-radius: $basicCr;
+        display: grid;
+        padding: $interiorMargin;
+        grid-template-columns: min-content 3fr 40px 1fr;
+        grid-column-gap: $interiorMargin;
+
+        @include styleTliEm($baseFgEm);
+
+        &__activity-color {
+            align-items: start;
+            display: flex;
+            padding-top: 1px;
+        }
+
+        &__activity-color-swatch {
+            $d: 16px;
+            border-radius: 50%;
+            box-shadow: rgba(black, 0.3) 0 0 2px 1px;
+            width: $d;
+            height: $d;
+        }
+
+        &__title-and-bounds {
+            > * + * {
+                margin-top: $interiorMargin;
+            }
+        }
+
+        &__bounds {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+
+            > * {
+                margin-right: $interiorMargin;
+                white-space: nowrap;
+            }
+
+            &.--has-duration {
+                .c-tli__start-time {
+                    display: flex;
+                    align-items: start;
+
+                    &:after {
+                        content: $glyph-icon-play;
+                        font-family: symbolsfont;
+                        font-size: 0.7em;
+                        display: block;
+                        margin-left: $interiorMargin;
+                        margin-top: 2px;
+                    }
+                }
+            }
+        }
+
+        &__title {
+            font-size: $textLg;
+        }
+
+        &__time-hero {
+            display: flex;
+            align-items: center;
+            justify-content: end;
+        }
+
+        &__time-hero-context-and-time {
+            align-items: center;
+            flex-wrap: wrap;
+            display: flex;
+            justify-content: end;
+            text-align: right;
+
+            > * + * {
+                margin-left: $interiorMargin;
+            }
+        }
+
+        &__time-hero-context {
+            font-size: $textSm;
+            text-transform: uppercase;
+        }
+
+        &__time-hero-time {
+            display: flex;
+            align-items: center;
+            font-size: $textLg;
+            white-space: nowrap;
+
+            &:before {
+                display: block;
+                font-family: symbolsfont;
+                font-size: 0.7em;
+                margin-right: 3px;
+            }
+
+            &.--is-countdown {
+                &:before {
+                    content: $glyph-icon-minus;
+                }
+            }
+
+            &.--is-countup {
+                &:before {
+                    content: $glyph-icon-plus;
+                }
+            }
+        }
+
+        &__graphic {
+            display: flex;
+            fill: $baseFg;
+            align-items: center;
+
+            svg {
+                > * {
+                    display: none;
+                }
+            }
+        }
+
+        &.--is-current {
+            background-color: $colorCurrentBg;
+            color: $colorCurrentFg;
+            @include styleTliEm($colorCurrentFgEm);
+        }
+
+        &.--is-future {
+            background-color: $colorFutureBg;
+            color: $colorFutureFg;
+            @include styleTliEm($colorFutureFgEm);
+        }
+
+        /************************************ ACTIVITY STATE STYLES */
+        /*
+        - 'In Progress' : itemState.inProgress
+        - 'Running Long' : itemState.inProgress && now > end datetime
+        - 'Overdue' : itemState.notStarted && now > start datetime
+        - 'Incomplete' : itemState.notStarted && now > end datetime
+        - 'Starts' : for Activities with now > start datetime
+        - 'Occurs' : for Events with now > start datetime
+        - 'Ends' : itemState.inProgress && now > start datetime && now < end datetime
+        - 'Completed', 'Aborted', 'Skipped' : itemState.<that state>
+        */
+        &.--is-not-started {
+
+        }
+
+        &.--is-in-progress {
+            @include showTliGraphic('pie');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-running-long {
+            @include showTliGraphic('alert-triangle');
+            background-color: $colorInProgressBg;
+            color: $colorInProgressFg;
+        }
+
+        &.--is-overdue,
+        &.--is-incomplete {
+            @include showTliGraphic('alert-triangle');
+
+        }
+
+        &.--is-completed {
+            @include showTliGraphic('check');
+        }
+
+        &.--is-aborted {
+            @include showTliGraphic('circle-slash');
+        }
+
+        &.--is-skipped {
+            @include showTliGraphic('skipped');
+        }
+
+        &__check {
+            // Overrides?
+        }
+
+        &__alert-triangle {
+            // Overrides?
+        }
+
+        &__circle-slash {
+            // Overrides?
+        }
+    }
+}
+
+.c-svg-progress {
+    &__bg {
+        fill: rgba(black, 0.2);
+    }
+
+    &__ticks {
+        fill: none;
+        stroke: $colorInProgressFg;
+        stroke-width: 6;
+    }
+
+    &__progress {
+        fill: $colorInProgressFgEm;
     }
-  }
 }

src/styles/_constants-espresso.scss

@@ -421,13 +421,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: $colorTimeRealtimeBg;
-$colorCurrentFg: $colorTimeRealtimeFg;
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFg;
+$colorCurrentFgEm: $colorBodyFgEm;
 $colorCurrentBorder: $colorBodyBg;
-$colorFutureBg: #1b5263;
+$colorFutureBg: $colorPastBg;
 $colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
 $colorGanttSelectedBorder: rgba(#fff, 0.3);
 
 // Tree

src/styles/_constants-maelstrom.scss

@@ -424,14 +424,23 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.4);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: $colorTimeRealtimeBg;
-$colorCurrentFg: $colorTimeRealtimeFg;
+$colorPastBg: #444;
+$colorPastFg: pushBack($colorBodyFg, 10%);
+$colorPastFgEm: $colorBodyFg;
+$colorCurrentBg: #666;
+$colorCurrentFg: $colorBodyFgEm;
+$colorCurrentFgEm: $colorBodyFgEm;
 $colorCurrentBorder: $colorBodyBg;
-$colorFutureBg: #1b5263;
+$colorFutureBg: $colorPastBg;
 $colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
-$colorGanttSelectedBorder: #fff;
+$colorInProgressBg: $colorTimeRealtimeBg;
+$colorInProgressFg: $colorTimeRealtimeFgSubtle;
+$colorInProgressFgEm: $colorTimeRealtimeFg;
+$colorGanttSelectedBorder: rgba(#fff, 0.3);
 
 // Tree
 $colorTreeBg: transparent;

src/styles/_constants-snow.scss

@@ -157,10 +157,10 @@ $colorTimeFixedBtnFg: $colorTimeFixedFgSubtle;
 $colorTimeFixedBtnBgMajor: #a09375;
 $colorTimeFixedBtnFgMajor: #fff;
 
-$colorTimeRealtime: #445890;
+$colorTimeRealtime: #6179d7;
 $colorTimeRealtimeBg: $colorTimeRealtime;
-$colorTimeRealtimeFg: #eee;
-$colorTimeRealtimeFgSubtle: #88b0ff;
+$colorTimeRealtimeFg: #fff;
+$colorTimeRealtimeFgSubtle: #eee;
 $colorTimeRealtimeHov: pullForward($colorTimeRealtime, 10%);
 $colorTimeRealtimeSubtle: pushBack($colorTimeRealtime, 20%);
 $colorTimeRealtimeBtnBg: pullForward($colorTimeRealtime, 5%);
@@ -421,13 +421,22 @@ $colorGaugeLimitHigh: rgba($colorLimitRedBg, 0.2);
 $colorGaugeLimitLow: $colorGaugeLimitHigh;
 $transitionTimeGauge: 150ms; // CSS transition time used to smooth needle gauge and meter value transitions
 $marginGaugeMeterValue: 10%; // Margin between meter value bar and bounds edges
+
 // Time Strip and Lists
-$colorCurrentBg: #5872bd;
-$colorCurrentFg: #eee;
-$colorCurrentBorder: #fff;
-$colorFutureBg: #c6f0ff;
-$colorFutureFg: $colorBodyFg;
+$colorPastBg: #f0f0f0;
+$colorPastFg: #999;
+$colorPastFgEm: #666;
+$colorCurrentBg: #ddd;
+$colorCurrentFg: #666;
+$colorCurrentFgEm: #000;
+$colorCurrentBorder: $colorBodyBg;
+$colorFutureBg: #eaeaea;
+$colorFutureFg: $colorCurrentFg;
+$colorFutureFgEm: $colorCurrentFgEm;
 $colorFutureBorder: $colorCurrentBorder;
+$colorInProgressBg: #b1e8ff;
+$colorInProgressFg: $colorCurrentFg;
+$colorInProgressFgEm: $colorCurrentFgEm;
 $colorGanttSelectedBorder: #fff;
 
 // Tree

src/ui/components/List/ListView.vue

@@ -43,6 +43,7 @@
           :key="item.key"
           :item="item"
           :item-properties="itemProperties"
+          @click.stop="itemSelected(item, $event)"
         />
       </tbody>
     </table>
@@ -86,6 +87,7 @@ export default {
       }
     }
   },
+  emits: ['item-selection-changed'],
   data() {
     let sortBy = this.defaultSort.property;
     let ascending = this.defaultSort.defaultDirection;
@@ -156,6 +158,9 @@ export default {
           })
         );
       }
+    },
+    itemSelected(item, event) {
+      this.$emit('item-selection-changed', item, event.currentTarget);
     }
   }
 };