Multi Timeline Configs (#332)

* initial upgrade to multi timelineconfigs

* fix button display and default display of timeline button

* allow for empty timeline configs, change logic for selecting/editing timeline configs

* increment client version

* update editing timeline name

Author: BryonLewis

client/dive-common/components/ControlsContainer.vue

@@ -11,11 +11,12 @@ import {
   Timeline,
   TimelineKey,
 } from 'vue-media-annotator/components';
-import { UISettingsKey } from 'vue-media-annotator/ConfigurationManager';
+import { TimelineDisplay, UISettingsKey } from 'vue-media-annotator/ConfigurationManager';
 import TimelineCharts from 'vue-media-annotator/components/controls/TimelineCharts.vue';
 import TimelineButtons from 'vue-media-annotator/components/controls/TimelineButtons.vue';
 import {
   useAttributesFilters, useConfiguration,
+  useTimelineFilters,
 } from '../../src/provides';
 
 export default defineComponent({
@@ -53,10 +54,32 @@ export default defineComponent({
     const currentView = ref('Detections');
     const ticks = ref([0.25, 0.5, 0.75, 1.0, 2.0, 4.0, 8.0]);
     const configMan = useConfiguration();
+    const attributesFilter = useAttributesFilters();
+    const { enabledTimelines: enabledFilterTimelines } = useTimelineFilters();
     const getUISetting = (key: UISettingsKey) => (configMan.getUISetting(key));
     if (getUISetting('UIDetections') === false && getUISetting('UIEvents')) {
       currentView.value = 'Events';
     }
+    if (getUISetting('UIDetections') === false && getUISetting('UIEvents') === false) {
+      // Current view should be the first item in the list
+      const timelines: { name: string; type: TimelineDisplay['type'] }[] = [];
+      Object.entries(attributesFilter.timelineEnabled.value).forEach(([key, enabled]) => {
+        if (enabled) {
+          timelines.push({ name: key, type: 'graph' });
+        }
+      });
+      Object.entries(attributesFilter.swimlaneEnabled.value).forEach(([key, enabled]) => {
+        if (enabled) {
+          timelines.push({ name: key, type: 'swimlane' });
+        }
+      });
+      enabledFilterTimelines.value.forEach((item) => {
+        timelines.push({ name: item.name, type: 'filter' });
+      });
+      if (timelines.length > 0) {
+        currentView.value = timelines[0].name;
+      }
+    }
     const enabledKey = ref(false);
     const dismissedButtons: Ref<string[]> = ref([]); // buttons that have been dismissed from the timelineConfig;
     const dismissedHeights: Ref<{name: string; height: number}[]> = ref([]);
@@ -65,8 +88,9 @@ export default defineComponent({
     } = useAttributesFilters();
 
     const timelineHeight = computed(() => {
-      if (configMan.configuration.value?.timelineConfigs?.maxHeight) {
-        let max = configMan.configuration.value?.timelineConfigs?.maxHeight;
+      const activeConfig = configMan.getActiveTimelineConfig();
+      if (activeConfig?.maxHeight) {
+        let max = activeConfig.maxHeight;
         dismissedHeights.value.forEach((item) => {
           max -= item.height;
         });

client/dive-common/components/EditorMenu.vue

@@ -96,6 +96,10 @@ export default defineComponent({
       },
     };
 
+    const editBlackColorScale = ref(false);
+    const editWhiteColorScale = ref(false);
+    const editTransparentcolor = ref(false);
+
     const editButtons = computed((): ButtonData[] => {
       const buttons: ButtonData[] = [{
         id: 'rectangle',
@@ -380,6 +384,9 @@ export default defineComponent({
       loadingFrame,
       buttonOptions,
       menuOptions,
+      editWhiteColorScale,
+      editBlackColorScale,
+      editTransparentcolor,
     };
   },
 });

client/dive-common/components/configurationEditors/TimelineConfiguration.vue

@@ -15,6 +15,10 @@ export default defineComponent({
       type: Object as PropType<TimelineConfiguration>,
       required: true,
     },
+    configName: {
+      type: String,
+      default: '',
+    },
   },
   setup(props, { emit }) {
     const baseHeight = ref(props.timelineConfig.maxHeight || 300);
@@ -115,6 +119,16 @@ export default defineComponent({
   <v-card>
     <h2>Custom Timeline List</h2>
     <v-card-text>
+      <v-row dense>
+        <v-text-field
+          :value="configName"
+          label="Configuration Name"
+          outlined
+          dense
+          class="mr-2"
+          @input="$emit('update-config-name', $event)"
+        />
+      </v-row>
       <v-row dense>
         <v-select
           v-model="addTimeline"