Merge pull request #97 from LCOGT/feature/rgb-composite

Feature/rgb composite

Author: LTDakin

src/components/DataSession/OperationWizard.vue

@@ -4,6 +4,7 @@ import { fetchApiCall, handleError } from '@/utils/api'
 import { calculateColumnSpan } from '@/utils/common'
 import ImageGrid from '../Global/ImageGrid'
 import { useConfigurationStore } from '@/stores/configuration'
+import { useAlertsStore } from '@/stores/alerts'
 
 const props = defineProps({
   images: {
@@ -13,6 +14,7 @@ const props = defineProps({
 })
 
 const store = useConfigurationStore()
+const alert = useAlertsStore()
 const emit = defineEmits(['closeWizard', 'addOperation'])
 const dataSessionsUrl = store.datalabApiBaseUrl
 
@@ -91,6 +93,13 @@ const wizardTitle = computed(() => {
 
 function goForward() {
   if (page.value == 'select') {
+    // if there are no images for a filter required by the operation, do not proceed
+    for (const inputKey in selectedOperationInputs.value) {
+      const inputField = selectedOperationInputs.value[inputKey]
+      if (inputField.type == 'file' && imagesWithFilter(inputField.filter).length == 0){
+        return
+      }
+    }
     page.value = 'configure'
   }
   else {
@@ -101,23 +110,42 @@ function goForward() {
       }
     }
     for (const inputKey in selectedImages.value) {
-      let selected = []
+      let input = []
+      const filter = selectedOperationInputs.value[inputKey].filter
       selectedImages.value[inputKey].forEach(index => {
-        selected.push(props.images[index])
+        input.push(imagesWithFilter(filter)[index])
       })
-      operationDefinition.input_data[inputKey] = selected
+      operationDefinition.input_data[inputKey] = input
     }
     emit('addOperation', operationDefinition)
     emit('closeWizard')
   }
 }
 
+function imagesWithFilter(filters) {
+  if(!filters) {
+    return props.images
+  }
+  const imagesFiltered = props.images.filter((image) => filters.includes(image.filter))
+  if (imagesFiltered.length == 0) {
+    alert.setAlert('warning', 'Operation requires images with filter ' + filters.join(', '))
+  }
+  return imagesFiltered
+}
+
 function selectImage(inputKey, imageIndex) {
-  if (selectedImages.value[inputKey].includes(imageIndex)) {
-    selectedImages.value[inputKey].splice(selectedImages.value[inputKey].indexOf(imageIndex), 1)
+  const inputImages = selectedImages.value[inputKey]
+  const maxImages = selectedOperationInputs.value[inputKey].maximum
+
+  if (inputImages.includes(imageIndex)) {
+    inputImages.splice(inputImages.indexOf(imageIndex), 1)
   }
-  else {
-    selectedImages.value[inputKey].push(imageIndex)
+  else if (!maxImages || inputImages.length < maxImages){
+    inputImages.push(imageIndex)
+  }
+  else{
+    alert.setAlert('warning', 'Maximum number of images selected')
+    console.log('Maximum number of images selected in input', inputKey)
   }
 }
 
@@ -192,7 +220,8 @@ function selectImage(inputKey, imageIndex) {
               {{ inputDescription.name }}
             </div>
             <image-grid
-              :images="images"
+              :images="imagesWithFilter(inputDescription.filter)"
+              :selected-images="selectedImages[inputKey]"
               :column-span="calculateColumnSpan(images.length, imagesPerRow)"
               class="wizard-images"
               :allow-selection="true"

src/components/Global/AlertToast.vue

@@ -23,7 +23,8 @@ watch(() => alertStore.alertText, () => {showAlert.value = true})
     position: absolute;
     bottom: 0;
     left: 0;
-    z-index: 1000;
+    /* to show above the v-overlay whose z-index is 2400 */
+    z-index: 2401;
     padding: 10px;
     margin: 2rem;
   }

src/components/Global/FilterBadge.vue

@@ -0,0 +1,38 @@
+<script setup>
+import { computed } from 'vue'
+const props = defineProps({
+  filter: {
+    type: String,
+    required: true
+  }
+})
+
+const badgeColor = computed(() => {
+  switch (props.filter) {
+  case 'R': case 'rp':
+    return 'red'
+  case 'V': case 'gp':
+    return 'green'
+  case 'B':
+    return 'blue'
+  default:
+    return 'var(--metal)'
+  }
+})
+</script>
+<template>
+  <p
+    class="filter-badge"
+    :style="{ backgroundColor: badgeColor}"
+  >
+    {{ props.filter }}
+  </p>
+</template>
+<style scoped>
+.filter-badge {
+  border-radius: 5px;
+  color: var(--tan);
+  padding: 5px 10px;
+  display: inline-block;
+}
+</style>

src/components/Global/ImageGrid.vue

@@ -1,13 +1,18 @@
 <script setup>
-import { defineProps, ref, defineEmits, watch } from 'vue'
+import { ref, watch } from 'vue'
 import { useThumbnailsStore } from '@/stores/thumbnails'
 import { useConfigurationStore } from '@/stores/configuration'
+import FilterBadge from './FilterBadge.vue'
 
 const props = defineProps({
   images: {
     type: Array,
     required: true
   },
+  selectedImages: {
+    type: Array,
+    default: () => []
+  },
   columnSpan: {
     type: Number,
     required: true
@@ -19,30 +24,16 @@ const props = defineProps({
 })
 
 let imageDetails = ref({})
-let selectedImages = ref([])
 const configurationStore = useConfigurationStore()
 const thumbnailsStore = useThumbnailsStore()
 const emit = defineEmits(['selectImage'])
 
 
 const isSelected = (index) => {
-  return selectedImages.value.includes(index)
-}
-
-const onImageClick = (index) => {
-  if (props.allowSelection) {
-    if (selectedImages.value.includes(index)) {
-      selectedImages.value.splice(selectedImages.value.indexOf(index), 1)
-    }
-    else {
-      selectedImages.value.push(index)
-    }
-    emit('selectImage', index)
-  }
+  return props.selectedImages.includes(index)
 }
 
 watch(() => props.images, () => {
-  selectedImages.value = []
   props.images.forEach(image => {
     if (image.basename && !(image.basename in imageDetails.value)) {
       imageDetails.value[image.basename] = ref('')
@@ -62,6 +53,7 @@ watch(() => props.images, () => {
       v-for="(image, index) in props.images"
       :key="index"
       :cols="columnSpan"
+      class="image-grid-col"
     >
       <v-img
         v-if="image.basename in imageDetails && imageDetails[image.basename]"
@@ -70,9 +62,12 @@ watch(() => props.images, () => {
         cover
         :class="{ 'selected-image': isSelected(index) }"
         aspect-ratio="1"
-        class="image-grid"
-        @click="onImageClick(index)"
+        @click="emit('selectImage', index)"
       >
+        <filter-badge
+          v-if="image.filter"
+          :filter="image.filter"
+        />
         <span
           v-if="'operationIndex' in image"
           class="image-text-overlay"
@@ -83,29 +78,17 @@ watch(() => props.images, () => {
 </template>
 
 <style scoped>
-.image-grid-container {
-  display: flex;
-  max-width: 200px;
-  max-height: 200px;
-}
 .selected-image {
   border: 0.3rem solid var(--dark-green);
 }
 
 .image-text-overlay {
-  color: white;
+  color: var(--tan);
   font-weight: bold;
   margin-right: 5px;
   float: right;
 }
-.image-grid {
+.image-grid-col {
   max-width: 200px;
-  height: auto;
-}
-@media (max-width: 900px) {
-.image-grid {
-  width: 20vw;
-  height: auto;
-}
 }
 </style>

src/components/Project/ImageAnalysis/ImageAnalyzer.vue

@@ -4,6 +4,7 @@ import { fetchApiCall } from '../../../utils/api'
 import { useConfigurationStore } from '@/stores/configuration'
 import ImageViewer from './ImageViewer.vue'
 import LinePlot from './LinePlot.vue'
+import FilterBadge from '@/components/Global/FilterBadge.vue'
 
 // eslint-disable-next-line no-unused-vars
 const props = defineProps(['modelValue', 'image'])
@@ -69,9 +70,7 @@ function handleAnalysisOutput(response, action){
           :download="image.basename"
           target="_blank"
         >
-          <v-btn
-            icon="mdi-download"
-          />
+          <v-icon icon="mdi-download" />
         </a>
         <v-btn
           icon="mdi-close"
@@ -92,6 +91,12 @@ function handleAnalysisOutput(response, action){
             <p>Site: {{ image.site_id }}</p>
             <p>Telescope: {{ image.telescope_id }}</p>
             <p>Instrument: {{ image.instrument_id }}</p>
+            <span>Filter: 
+              <filter-badge
+                v-if="image.FILTER"
+                :filter="image.FILTER"
+              />
+            </span>
           </v-sheet>
           <line-plot
             :y-axis-luminosity="lineProfile"
@@ -105,6 +110,9 @@ function handleAnalysisOutput(response, action){
   </v-dialog>
 </template>
 <style scoped>
+a{
+  color: var(--tan);
+}
 .analysis-sheet{
   background-color: var(--dark-blue);
   font-family: 'Open Sans', sans-serif;

src/components/Project/ImageCarousel.vue

@@ -7,6 +7,7 @@ import { useThumbnailsStore } from '@/stores/thumbnails'
 import { Carousel, Slide } from 'vue3-carousel'
 import 'vue3-carousel/dist/carousel.css'
 import ImageAnalyzer from './ImageAnalysis/ImageAnalyzer.vue'
+import FilterBadge from '@/components/Global/FilterBadge.vue'
 
 const props = defineProps({
   data: {
@@ -109,22 +110,34 @@ watch(() => props.data, (newVal) => {
     </Slide>
   </Carousel>
   <Carousel
-    class="mt-4"
     id="thumbnails"
+    ref="carousel"
+    v-model="currentSlide"
+    class="mt-4"
     :wrap-around="false"
     :breakpoints="breakpoints"
-    v-model="currentSlide"
-    ref="carousel">
-    <Slide v-for="(item, index) in data" :key="index">
-      <div class="carousel__item" @click="handleThumbnailClick(item, index)">
+  >
+    <Slide
+      v-for="(item, index) in data"
+      :key="index"
+    >
+      <div
+        class="carousel__item"
+        @click="handleThumbnailClick(item, index)"
+      >
         <v-img
           :src="item.smallCachedUrl"
           loading="lazy"
           cover
           class="thumbnail__item"
           :class="{'selected-thumbnail': store.isSelected(item)}"
           :alt="item.OBJECT"
-        />
+        >
+          <filter-badge
+            v-if="item.FILTER"
+            :filter="item.FILTER"
+          />
+        </v-img>
       </div>
     </Slide>
   </Carousel>

src/components/Project/ImageList.vue

@@ -2,6 +2,7 @@
 <script setup>
 import { ref, onMounted, defineProps } from 'vue'
 import { useSettingsStore } from '@/stores/settings'
+import FilterBadge from '@/components/Global/FilterBadge.vue'
 
 const store = useSettingsStore()
 // eslint-disable-next-line no-unused-vars
@@ -11,7 +12,7 @@ const props = defineProps(['data'])
 let headers = ref([
   { title: 'IMAGE NAME', align: 'start', sortable: true, key: 'basename' },
   { title: 'TIME', align: 'start', sortable: true, key: 'observation_date' },
-  { title: 'OBJECT', align: 'start', sortable: true, key: 'OBJECT' },
+  { title: 'FILTER', align: 'start', sortable: true, key: 'FILTER' },
   { title: 'IMAGE', align: 'start', sortable: false, key: 'url' },
 ])
 let itemsPerPage = ref(15)
@@ -38,11 +39,16 @@ onMounted ( () => {
     item-value="basename"
     :return-object="true"
     show-select
-    density="compact"
     :hover="true"
     class="data_table"
     @update:model-value="select($event)"
   >
+    <template #[`item.FILTER`]="{ item }">
+      <filter-badge
+        v-if="item.FILTER"
+        :filter="item.FILTER"
+      />
+    </template>
     <template #[`item.url`]="{ item }">
       <v-img
         :src="item.smallCachedUrl"
@@ -64,6 +70,8 @@ onMounted ( () => {
   color: var(--tan);
   font-size: 1.4rem;
   background-color: var(--metal);
+  overflow-y: scroll;
+  max-height: 80vh;
 }
 .list_image{
   height: 8vh;