Merge pull request #225 from LCOGT/feature/grid-cards

Feature/grid cards

Author: LTDakin

src/assets/css/ptr-extra.css

@@ -84,6 +84,21 @@ p {
     color: var(--text);
 }
 
+.prevent-select {
+	-webkit-touch-callout: none;
+	-webkit-user-select: none;
+	-khtml-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+
+.single-line-text {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .datalab-site-menu {
 	font-family: var(--font-headers);
 	text-transform: uppercase;

src/components/DataSession/DataSession.vue

@@ -53,6 +53,7 @@ function addCompletedOperation(operation) {
     operation.output.output_files.forEach(outputFile => {
       outputFile.operation = operation.id
       outputFile.operationIndex = operation.index
+      outputFile.operationName = operation.name
       if (!imagesContainsFile(outputFile)) {
         images.value.push(outputFile)
       }

src/components/DataSession/OperationWizard.vue

@@ -287,6 +287,7 @@ function selectOperation(name) {
               :selected-images="operationInputs[inputKey].map(image => image.basename)"
               :column-span="calculateColumnSpan(images.length, IMAGES_PER_ROW)"
               :allow-selection="true"
+              :enable-image-cards="false"
               @select-image="selectImage(inputKey, $event)"
             />
           </div>

src/components/Global/FilterBadge.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 </script>
 <template>
   <p
-    class="filter-badge rounded d-flex pa-2 justify-center align-center"
+    class="filter-badge rounded d-flex pa-2 justify-center align-center prevent-select"
     :style="{ backgroundColor: filterToColor(props.filter) }"
   >
     {{ props.filter }}
@@ -20,7 +20,6 @@ const props = defineProps({
 <style scoped>
 .filter-badge {
   color: var(--text);
-  user-select: none;
   font-size: smaller;
   font-weight: bolder;
   max-width: 2.2rem;

…omponents/Analysis/ImageDownloadMenu.vue …/components/Global/ImageDownloadMenu.vuesrc/components/Analysis/ImageDownloadMenu.vue renamed to src/components/Global/ImageDownloadMenu.vue src/components/Analysis/ImageDownloadMenu.vue renamed to src/components/Global/ImageDownloadMenu.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { useAlertsStore } from '@/stores/alerts'
 import { useAnalysisStore } from '@/stores/analysis'
+import { useThumbnailsStore } from '@/stores/thumbnails'
+import { useConfigurationStore } from '@/stores/configuration'
 
 const props = defineProps({
   imageName: {
     type: String,
     required: true,
-    default: null,
   },
   fitsUrl: {
     type: String,
@@ -18,17 +19,34 @@ const props = defineProps({
     required: false,
     default: null,
   },
+  enableScaledDownload: {
+    type: Boolean,
+    required: false,
+    default: true,
+  },
+  speedDialLocation: {
+    type: String,
+    required: false,
+    default: 'left center',
+  }
 })
 
 defineEmits(['analysisAction'])
 
 const alertStore = useAlertsStore()
 const analysisStore = useAnalysisStore()
+const thumbnailsStore = useThumbnailsStore()
+const configurationStore = useConfigurationStore()
 
 function downloadBase64File(base64Data, filename, fileType='file'){
   downloadFile('data:image/jpeg;base64,' + base64Data, filename, fileType)
 }
 
+async function downloadJpg(jpgUrl, filename, fileType='file'){
+  const urlToDownload = jpgUrl || await thumbnailsStore.cacheImage('large', configurationStore.archiveType, jpgUrl, props.imageName)
+  downloadFile(urlToDownload, filename, fileType)
+}
+
 function downloadFile(file, filename, fileType='file'){
   try{
     const a = document.createElement('a')
@@ -44,13 +62,14 @@ function downloadFile(file, filename, fileType='file'){
 <template>
   <v-speed-dial
     variant="text"
-    location="left center"
+    :location="props.speedDialLocation"
     transition="fade-transition"
   >
     <template #activator="{ props: activatorProps }">
-      <v-btn
+      <v-icon
         v-bind="activatorProps"
         icon="mdi-download"
+        color="var(--secondary-interactive)"
       />
     </template>
     <v-btn
@@ -63,22 +82,23 @@ function downloadFile(file, filename, fileType='file'){
     <v-btn
       key="2"
       class="file-download"
-      text=".TIF"
-      @click="$emit('analysisAction', 'get-tif', {'basename': props.imageName}, downloadFile)"
-    />
-    <v-btn
-      v-if="props.jpgUrl"
-      key="3"
-      class="file-download"
-      text="Small .JPG"
-      @click="downloadFile(props.jpgUrl, props.imageName, 'Small JPG')"
-    />
-    <v-btn
-      key="4"
-      class="file-download"
-      text="Scaled .JPG"
-      @click="$emit('analysisAction', 'get-jpg', {'basename': props.imageName, 'zmin': analysisStore.zmin, 'zmax': analysisStore.zmax}, downloadBase64File)"
+      text=".JPG"
+      @click="downloadJpg(props.jpgUrl, props.imageName, 'JPG')"
     />
+    <template v-if="props.enableScaledDownload">
+      <v-btn
+        key="3"
+        class="file-download"
+        text=".TIF"
+        @click="$emit('analysisAction', 'get-tif', {'basename': props.imageName}, downloadFile)"
+      />
+      <v-btn
+        key="4"
+        class="file-download"
+        text="Scaled .JPG"
+        @click="$emit('analysisAction', 'get-jpg', {'basename': props.imageName, 'zmin': analysisStore.zmin, 'zmax': analysisStore.zmax}, downloadBase64File)"
+      />
+    </template>
   </v-speed-dial>
 </template>
 <style scoped>

src/components/Global/ImageGrid.vue

@@ -3,13 +3,14 @@ import { ref, watch } from 'vue'
 import { useThumbnailsStore } from '@/stores/thumbnails'
 import { useConfigurationStore } from '@/stores/configuration'
 import { useAlertsStore } from '@/stores/alerts'
+import ImageDownloadMenu from '@/components/Global/ImageDownloadMenu.vue'
 import FilterBadge from './FilterBadge.vue'
 import AnalysisView from '../../views/AnalysisView.vue'
 
 const props = defineProps({
   images: {
-    type: [Array, Boolean],
-    default: false
+    type: Array,
+    default: () => []
   },
   selectedImages: {
     type: Array,
@@ -22,6 +23,10 @@ const props = defineProps({
   allowSelection: {
     type: Boolean,
     default: false
+  },
+  enableImageCards: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -32,38 +37,21 @@ const emit = defineEmits(['selectImage'])
 const showAnalysisDialog = ref(false)
 const imageDetails = ref({})
 const analysisImage = ref({})
-var doubleClickTimer = 0
 
-const handleClick = (basename) => {
-  clearTimeout(doubleClickTimer)
-  // timeout length indicates how long to wait for a second click before treating as a single click
-  doubleClickTimer = setTimeout(() => {
-    emit('selectImage', basename)
-    doubleClickTimer = 0
-  }, 250)
+async function ensureLargeCachedUrl(image) {
+  if (!image.largeCachedUrl) {
+    const url = image.large_url || image.largeThumbUrl || ''
+    image.largeCachedUrl = await thumbnailsStore.cacheImage('large', configurationStore.archiveType, url, image.basename)
+  }
+  return image.largeCachedUrl
 }
 
-const handleDoubleClick = (image) => {
-  clearTimeout(doubleClickTimer)
+const launchAnalysis = async (image) => {
   alertsStore.setAlert('info', `Opening ${image?.basename} for analysis`)
-  launchAnalysis(image)
-}
-
-const launchAnalysis = (image) => {
   try {
-    if (!image.largeCachedUrl) {
-      image.largeCachedUrl = ref('')
-      const url = image.large_url || image.largeThumbUrl || ''
-      thumbnailsStore.cacheImage('large', configurationStore.archiveType, url, image.basename).then((cachedUrl) => {
-        image.largeCachedUrl = cachedUrl
-        analysisImage.value = image
-        showAnalysisDialog.value = true
-      })
-    }
-    else {
-      analysisImage.value = image
-      showAnalysisDialog.value = true
-    }
+    await ensureLargeCachedUrl(image)
+    analysisImage.value = image
+    showAnalysisDialog.value = true
   } catch {
     alertsStore.setAlert('error', `Failed to open ${image?.basename}`)
   }
@@ -74,7 +62,6 @@ const isSelected = (basename) => {
 }
 
 watch(() => props.images, () => {
-  if (!props.images) return
   props.images.forEach(image => {
     if (image.basename && !(image.basename in imageDetails.value)) {
       imageDetails.value[image.basename] = ref('')
@@ -90,22 +77,27 @@ watch(() => props.images, () => {
 
 <template>
   <v-row>
-    <template v-if="props.images">
-      <v-col
-        v-for="(image, index) in props.images"
-        :key="index"
-        :cols="columnSpan"
-        class="image-grid-col"
+    <v-col
+      v-for="(image, index) in props.images"
+      :key="index"
+      :cols="columnSpan"
+      class="image-grid-col"
+    >
+      <v-sheet
+        v-if="image.basename in imageDetails && imageDetails[image.basename]"
+        class="pa-2"
+        color="var(--secondary-background)"
+        :elevation="2"
+        rounded
+        :class="{ 'selected-image': isSelected(image.basename) }"
+        @click="emit('selectImage', image.basename)"
       >
         <v-img
-          v-if="image.basename in imageDetails && imageDetails[image.basename]"
           :src="imageDetails[image.basename]"
           :alt="image.basename"
+          rounded
           cover
-          :class="{ 'selected-image': isSelected(image.basename) }"
           aspect-ratio="1"
-          @click="handleClick(image.basename)"
-          @dblclick="handleDoubleClick(image)"
         >
           <filter-badge
             v-if="image.filter || image.FILTER"
@@ -116,33 +108,37 @@ watch(() => props.images, () => {
             class="image-text-overlay"
           >{{ image.operationIndex }}</span>
         </v-img>
-        <v-skeleton-loader
-          v-else
-          type="card"
-          color="var(--secondary-background)"
-          bg-color="var(--primary-background)"
-        />
-      </v-col>
-    </template>
-    <template v-else>
-      <v-col
-        v-for="n in 10"
-        :key="n"
-        :cols="columnSpan"
-        class="image-grid-col"
-      >
-        <v-skeleton-loader
-          type="card"
-          class="ma-1"
-          color="var(--secondary-background)"
-          bg-color="var(--primary-background)"
-        />
-      </v-col>
-    </template>
+        <div
+          v-if="props.enableImageCards"
+          class="d-flex flex-row ga-2 align-center mt-2"
+        >
+          <p class="text-subtitle-2 mr-auto prevent-select single-line-text">
+            {{ image.target_name || image.operationName }}
+          </p>
+          <v-icon
+            icon="mdi-eye"
+            color="var(--primary-interactive)"
+            @click.stop="launchAnalysis(image)"
+          />
+          <image-download-menu
+            :fits-url="image.url || image.fits_url || ''"
+            :jpg-url="image.largeCachedUrl || image.large_url || ''"
+            :image-name="image.basename"
+            speed-dial-location="top right"
+            :enable-scaled-download="false"
+          />
+        </div>
+      </v-sheet>
+      <v-skeleton-loader
+        v-else
+        type="card"
+        color="var(--secondary-background)"
+        bg-color="var(--primary-background)"
+      />
+    </v-col>
   </v-row>
   <v-dialog
     v-model="showAnalysisDialog"
-    persistent
     fullscreen
   >
     <analysis-view
@@ -154,9 +150,8 @@ watch(() => props.images, () => {
 
 <style scoped>
 .selected-image {
-  border: 0.3rem solid var(--primary-interactive);
+  outline: 0.3rem solid var(--primary-interactive);
 }
-
 .image-text-overlay {
   color: var(--text);
   font-weight: bold;

src/components/Project/CreateSessionDialog.vue

@@ -41,7 +41,8 @@ async function addImagesToExistingSession(session){
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
     'id': image.id,
     'url': image.url,
-    'filter': image.FILTER
+    'filter': image.FILTER,
+    'target_name': image.target_name
   }))]
   const requestBody = {
     'name': session.name,
@@ -61,7 +62,8 @@ async function createNewDataSession(){
     'basename': image.basename.replace('-small', '') || image.basename.replace('-large', ''),
     'id': image.id,
     'url': image.url,
-    'filter': image.FILTER
+    'filter': image.FILTER,
+    'target_name': image.target_name
   }))
   const requestBody = {
     'name': newSessionName.value,

src/views/AnalysisView.vue

@@ -7,7 +7,7 @@ import { useUserDataStore } from '@/stores/userData'
 import FilterBadge from '@/components/Global/FilterBadge.vue'
 import NonLinearSlider from '@/components/Global/NonLinearSlider.vue'
 import HistogramSlider from '@/components/Global/Scaling/HistogramSlider.vue'
-import ImageDownloadMenu from '@/components/Analysis/ImageDownloadMenu.vue'
+import ImageDownloadMenu from '@/components/Global/ImageDownloadMenu.vue'
 import FitsHeaderTable from '@/components/Analysis/FitsHeaderTable.vue'
 import ImageViewer from '@/components/Analysis/ImageViewer.vue'
 import LinePlot from '@/components/Analysis/LinePlot.vue'

src/views/ProjectView.vue

@@ -349,7 +349,7 @@ onMounted(() => {
             @select-image="selectImage(proposal.id, $event)"
           />
           <div
-            v-if="imagesByProposal[proposal.id]?.length == 0"
+            v-if="imagesByProposal[proposal.id]?.length == 0 && !loadingProposals"
             class="mt-4 d-flex flex-column justify-center align-center"
           >
             <v-icon