From 65a7e7e4fabb0e79137abe9ecaee48b2cb5b4558 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Thu, 18 Jan 2024 15:32:33 -0800
Subject: [PATCH 1/4] Use activity id as key if it is available

---
 src/plugins/timelist/TimelistComponent.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/plugins/timelist/TimelistComponent.vue b/src/plugins/timelist/TimelistComponent.vue
index 548202518b..9876fd4c91 100644
--- a/src/plugins/timelist/TimelistComponent.vue
+++ b/src/plugins/timelist/TimelistComponent.vue
@@ -374,7 +374,9 @@ export default {
           activity.cssClass = PAST_CSS_SUFFIX;
         }
 
-        if (!activity.key) {
+        if (activity.id) {
+          activity.key = activity.id;
+        } else if (!activity.key) {
           activity.key = uuid();
         }
 

From 176d344956c1064ab586475d96c4ad9eff6a7256 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Thu, 18 Jan 2024 15:42:48 -0800
Subject: [PATCH 2/4] Ensure the correct option is selected for activity states

---
 .../plan/inspector/components/PlanActivityStatusView.vue    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/plugins/plan/inspector/components/PlanActivityStatusView.vue b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
index 4b964143a3..3ed351d529 100644
--- a/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
+++ b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
@@ -26,7 +26,7 @@
       <div class="c-inspect-properties__header">{{ heading }}</div>
       <form name="activityStatus">
         <select v-model="currentStatusKey" name="setActivityStatus" @change="changeActivityStatus">
-          <option v-for="status in activityStates" :key="status.key" :value="status.label">
+          <option v-for="status in activityStates" :key="status.key" :value="status.key">
             {{ status.label }}
           </option>
         </select>
@@ -39,7 +39,7 @@
 const activityStates = [
   {
     key: '',
-    label: '- Select Activity Status -'
+    label: '- Set Status -'
   },
   {
     key: 'active',
@@ -97,7 +97,7 @@ export default {
   },
   methods: {
     setActivityStatus() {
-      this.currentStatusKey = this.executionState;
+      this.currentStatusKey = this.executionState ?? this.activityStates[0].key;
     },
     changeActivityStatus() {
       if (this.currentStatusKey === '') {

From 02c796a42b2930cbc966e3a5e99302b7a40c1bc6 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Thu, 18 Jan 2024 21:54:17 -0800
Subject: [PATCH 3/4] Add status label

---
 .../components/PlanActivityStatusView.vue         | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/plugins/plan/inspector/components/PlanActivityStatusView.vue b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
index 3ed351d529..5a96ff2442 100644
--- a/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
+++ b/src/plugins/plan/inspector/components/PlanActivityStatusView.vue
@@ -24,7 +24,11 @@
   <div>
     <div class="u-contents">
       <div class="c-inspect-properties__header">{{ heading }}</div>
-      <form name="activityStatus">
+      <div class="c-inspect-properties__row">
+        <div class="c-inspect-properties__label" title="Status">Status</div>
+        <div class="c-inspect-properties__value">{{ statusLabel }}</div>
+      </div>
+      <form name="activityStatus" class="span-all">
         <select v-model="currentStatusKey" name="setActivityStatus" @change="changeActivityStatus">
           <option v-for="status in activityStates" :key="status.key" :value="status.key">
             {{ status.label }}
@@ -87,6 +91,15 @@ export default {
       currentStatusKey: activityStates[0].key
     };
   },
+  computed: {
+    statusLabel() {
+      let defaultStatus = activityStates.find((state) => state.key === 'notStarted');
+      let currentStatus = activityStates.find(
+        (state) => this.currentStatusKey !== '' && state.key === this.currentStatusKey
+      );
+      return currentStatus?.label || defaultStatus.label;
+    }
+  },
   watch: {
     executionState() {
       this.setActivityStatus();

From b0a21d40f6a790acdb36d822375311b53ae1fc34 Mon Sep 17 00:00:00 2001
From: Shefali <simplyrender@gmail.com>
Date: Fri, 19 Jan 2024 07:10:09 -0800
Subject: [PATCH 4/4] Refactor activity selection. Display activity properties

---
 .../plan/components/ActivityTimeline.vue      | 28 ++--------
 src/plugins/plan/components/PlanView.vue      | 56 ++++++++++++++-----
 .../components/PlanActivitiesView.vue         | 17 ++++--
 src/plugins/plan/util.js                      | 39 +++++++++++++
 4 files changed, 97 insertions(+), 43 deletions(-)

diff --git a/src/plugins/plan/components/ActivityTimeline.vue b/src/plugins/plan/components/ActivityTimeline.vue
index c9e4095a2f..d5cadd0d4e 100644
--- a/src/plugins/plan/components/ActivityTimeline.vue
+++ b/src/plugins/plan/components/ActivityTimeline.vue
@@ -135,6 +135,7 @@ export default {
       default: 22
     }
   },
+  emits: ['activitySelected'],
   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('activitySelected', {
+        event,
+        selection: activity.selection
+      });
     }
   }
 };
diff --git a/src/plugins/plan/components/PlanView.vue b/src/plugins/plan/components/PlanView.vue
index ca9eece594..ef23f1dff8 100644
--- a/src/plugins/plan/components/PlanView.vue
+++ b/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.getPlanData(this.domainObject);
     }
 
     const canvas = document.createElement('canvas');
@@ -177,6 +178,9 @@ export default {
     this.planViewConfiguration.destroy();
   },
   methods: {
+    getPlanData(object) {
+      this.planData = getValidatedData(object);
+    },
     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 object = domainObject || this.domainObject;
+      this.getPlanData(object);
+      this.setStatus(this.openmct.status.get(object.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,14 +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,
-            description: rawActivity.description,
             row: currentRow,
             textLines: textLines,
             textStart: textStart,
@@ -498,7 +496,10 @@ export default {
             rectEnd: showTextInsideRect ? rectX2 : textStart + textWidth,
             rectWidth: rectWidth,
             clipPathId: this.getClipPathId(groupName, rawActivity, currentRow),
-            id: rawActivity.id
+            selection: {
+              groupName,
+              index
+            }
           };
           activitiesByRow[currentRow].push(activity);
         });
@@ -575,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
+      );
     }
   }
 };
diff --git a/src/plugins/plan/inspector/components/PlanActivitiesView.vue b/src/plugins/plan/inspector/components/PlanActivitiesView.vue
index e9d4119f35..09da4a3c15 100644
--- a/src/plugins/plan/inspector/components/PlanActivitiesView.vue
+++ b/src/plugins/plan/inspector/components/PlanActivitiesView.vue
@@ -50,6 +50,7 @@
 <script>
 import { getPreciseDuration } from 'utils/duration';
 
+import { getDisplayProperties } from '../../util.js';
 import PlanActivityPropertiesView from './PlanActivityPropertiesView.vue';
 import PlanActivityStatusView from './PlanActivityStatusView.vue';
 import PlanActivityTimeView from './PlanActivityTimeView.vue';
@@ -166,14 +167,20 @@ export default {
             }
           }
         };
+        activity.metadata = {};
         if (selectedActivity.description) {
-          activity.metadata = {
-            description: {
-              label: propertyLabels.description,
-              value: selectedActivity.description
-            }
+          activity.metadata.description = {
+            label: propertyLabels.description,
+            value: selectedActivity.description
           };
         }
+
+        const displayProperties = getDisplayProperties(selectedActivity);
+        activity.metadata = {
+          ...activity.metadata,
+          ...displayProperties
+        };
+
         this.activities[index] = activity;
       });
     },
diff --git a/src/plugins/plan/util.js b/src/plugins/plan/util.js
index af13baa93f..75ab667d0f 100644
--- a/src/plugins/plan/util.js
+++ b/src/plugins/plan/util.js
@@ -49,6 +49,10 @@ export function getValidatedData(domainObject) {
           groupActivity.id = activity[sourceMap.id];
         }
 
+        if (sourceMap.displayProperties) {
+          groupActivity.displayProperties = sourceMap.displayProperties;
+        }
+
         if (!mappedJson[groupIdKey]) {
           mappedJson[groupIdKey] = [];
         }
@@ -104,6 +108,41 @@ export function getValidatedGroups(domainObject, planData) {
   return orderedGroupNames;
 }
 
+export function getDisplayProperties(activity) {
+  let displayProperties = {};
+  if (activity?.displayProperties) {
+    const keys = Object.keys(activity.displayProperties);
+    if (keys.length) {
+      keys.forEach((key) => {
+        const displayPropertyLabel = activity.displayProperties[key];
+        const value = _.get(activity, key);
+        if (value) {
+          displayProperties[key] = {
+            label: displayPropertyLabel,
+            value
+          };
+        }
+      });
+    }
+  } else if (activity?.properties) {
+    const keys = Object.keys(activity?.properties);
+    if (keys.length) {
+      keys.forEach((key) => {
+        const displayPropertyLabel = key;
+        const value = activity.properties[key];
+        if (value) {
+          displayProperties[key] = {
+            label: displayPropertyLabel,
+            value
+          };
+        }
+      });
+    }
+  }
+
+  return displayProperties;
+}
+
 export function getContrastingColor(hexColor) {
   function cutHex(h, start, end) {
     const hStr = h.charAt(0) === '#' ? h.substring(1, 7) : h;