#2016 CNN Validation - add error message when failed to call recordin…

…g id
rfcx · Jun 4, 2024 · bd58aca · bd58aca
1 parent 1750e1b
commit bd58aca
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 3 deletions.
diff --git a/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue b/apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue
@@ -29,6 +29,13 @@
         :selected-grouping="selectedGrouping"
         :max-page="maxPage"
         @emit-validation-result="onEmitValidateResult"
+        @show-alert-dialog="showAlertDialog"
+      />
+      <alert-dialog
+        v-if="showAlert"
+        severity="error"
+        title="Loading Error"
+        message="Couldn't retrieve the recording ID. Please try again."
       />
     </div>
   </section>
@@ -46,6 +53,7 @@ import { type GetDetectionsQueryParams } from '@rfcx-bio/common/api-bio/cnn/dete
 import type { GetDetectionsSummaryQueryParams } from '@rfcx-bio/common/api-bio/cnn/detections-summary'
 import { CLASSIFIER_JOB_STATUS } from '@rfcx-bio/common/api-core/classifier-job/classifier-job-status'
 
+import alertDialog from '@/_components/alert-dialog.vue'
 import { useGetBestDetections, useGetBestDetectionsSummary } from '@/detect/_composables/use-get-best-detections'
 import { apiClientKey } from '@/globals'
 import { useDetectionsResultFilterBySpeciesStore } from '~/store'
@@ -244,4 +252,12 @@ onBeforeUnmount(() => {
   detectionsResultFilterBySpeciesStore.resetFilter()
 })
 
+const showAlert = ref(false)
+const showAlertDialog = () => {
+  showAlert.value = true
+  setTimeout(() => {
+    showAlert.value = false
+  }, 7000)
+}
+
 </script>
diff --git a/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue b/apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue
@@ -41,6 +41,7 @@
               :score="dt.score"
               :selected-grouping="selectedGrouping"
               @emit-detection="updateSelectedDetections"
+              @show-alert-dialog="$emit('showAlertDialog')"
             />
           </div>
         </div>
@@ -129,7 +130,7 @@ const props = withDefaults(defineProps<{ isLoading: boolean, isError: boolean, d
   data: undefined
 })
 
-const emit = defineEmits<{(e: 'update:page', value: number): void, (e: 'emitValidationResult'): void}>()
+const emit = defineEmits<{(e: 'update:page', value: number): void, (e: 'emitValidationResult'): void, (e: 'showAlertDialog'): void}>()
 
 const pageIndex = ref(props.page ?? 1)
 const index = useDebounce(pageIndex, 1000)

diff --git a/apps/website/src/detect/cnn-job-detail/components/detection-item.vue b/apps/website/src/detect/cnn-job-detail/components/detection-item.vue
@@ -123,7 +123,7 @@ const props = withDefaults(defineProps<{
   selectedGrouping: undefined
 })
 
-const emit = defineEmits<{(e: 'emitDetection', detectionId: number, event: DetectionEvent): void}>()
+const emit = defineEmits<{(e: 'emitDetection', detectionId: number, event: DetectionEvent): void, (e: 'showAlertDialog'): void}>()
 const store = useStore()
 
 const spectrogramLoading = ref(false)
@@ -200,7 +200,10 @@ const stop = () => {
 const onVisualizerRedirect = async (): Promise<void> => {
   if (!props.start || !props.siteIdCore) return
   const response = await apiArbimonLegacyFindRecording(apiClientArbimon, store.project?.slug ?? '', { start: props.start, site_external_id: props.siteIdCore })
-  if (response == null) return
+  if (response == null) {
+    emit('showAlertDialog')
+    return
+  }
   window.location.assign(`${window.location.origin}/project/${store.project?.slug}/visualizer/rec/${response}`)
 }