Instrumentation: Highlight selected commands on click

Author: williamjallen

resources/js/vue/components/shared/CommandGanttChart.vue

@@ -82,6 +82,11 @@ export default {
       },
       deep: true,
     },
+    selectedCommandId: {
+      handler() {
+        this.renderChart(this.commands);
+      },
+    },
   },
   created() {
     this.chart = null;
@@ -253,6 +258,7 @@ export default {
             const height = this.commandBarHeight;
             const itemType = api.value(5);
             const isDisabled = api.value(6);
+            const commandId = api.value(11);
 
             const style = {
               fill: this.colors[itemType],
@@ -267,6 +273,14 @@ export default {
                 opacity: 0.4,
               });
             }
+
+            if (commandId === this.selectedCommandId) {
+              Object.assign(style, {
+                stroke: '#000000',
+                lineWidth: 2,
+              });
+            }
+
             return {
               type: 'rect',
               shape: {