Refactor activity selection. Display activity properties

src/plugins/plan/components/ActivityTimeline.vue

@@ -135,37 +135,19 @@ export default {
       default: 22
     }
   },
+  emits: ['activitySelected'],
   data() {
     return {
       lineHeight: 10
     };
   },
   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
+      });
     }
   }
 };

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 @@
     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 @@
     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 @@
             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 @@
       } 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 @@
 
       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 @@
           return;
         }
 
-        rawActivities.forEach((rawActivity) => {
+        rawActivities.forEach((rawActivity, index) => {
           if (!this.isActivityInBounds(rawActivity)) {
             return;
           }
@@ -481,14 +483,10 @@
           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 @@
             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 @@
       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

@@ -39,17 +39,18 @@
       v-if="canPersistState"
       :key="activities[0].key"
       class="c-inspector__properties c-inspect-properties"
       :activity="activities[0]"
       :execution-state="persistedActivityStates[activities[0].id]"
       :heading="'Activity Status'"
       @update-activity-state="persistedActivityState"
     />
   </div>
 </template>
 
 <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';
@@ -63,11 +64,11 @@
   gap: 'Gap',
   overlap: 'Overlap',
   totalTime: 'Total Time',
   description: 'Description'
 };
 export default {
   components: {
     PlanActivityTimeView,
     PlanActivityPropertiesView,
     PlanActivityStatusView
   },
@@ -76,20 +77,20 @@
     return {
       name: '',
       activities: [],
       selectedActivities: [],
       persistedActivityStates: {},
       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);
@@ -97,9 +98,9 @@
   beforeUnmount() {
     this.openmct.selection.off('change', this.updateSelection);
     this.openmct.time.off('timeSystem', this.setFormatters);
     if (this.stopObservingActivityStatesObject) {
       this.stopObservingActivityStatesObject();
     }
   },
   methods: {
     async getActivityStates() {
@@ -158,22 +159,28 @@
             },
             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
-            }
+          activity.metadata.description = {
+            label: propertyLabels.description,
+            value: selectedActivity.description
           };
         }
+
+        const displayProperties = getDisplayProperties(selectedActivity);
+        activity.metadata = {
+          ...activity.metadata,
+          ...displayProperties
+        };
+
         this.activities[index] = activity;
       });
     },
@@ -197,7 +204,7 @@
       let latestEnd;
       let gap;
       let overlap;
       let id;
       let key;
 
       //Sort by start time
@@ -217,8 +224,8 @@
           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;
         }

src/plugins/plan/util.js

@@ -45,10 +45,14 @@
           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] = [];
         }
@@ -104,6 +108,41 @@
   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;