1644 Redirect spectrogram to visualizer (#2012)

* #1644 Add the endpoint for get the rec id (mock playload)

* #1644 Call get rec id when click icon

* #1644 Call api with real data

* #1644 store.project without the computed, change prop name and use window.location.assign

* #1644 Use Number(response.data) and use response == null

apps/website/src/detect/cnn-job-detail-by-species/cnn-job-detail-by-species.vue

@@ -59,6 +59,7 @@ const route = useRoute()
 const pageSizeLimit = ref<number>(25)
 
 const apiClientBio = inject(apiClientKey) as AxiosInstance
+
 const detectionsResultFilterBySpeciesStore = useDetectionsResultFilterBySpeciesStore()
 const jobId = computed(() => typeof route.params.jobId === 'string' ? parseInt(route.params.jobId) : -1)
 const speciesSlug = computed(() => typeof route.params.speciesSlug === 'string' ? route.params.speciesSlug : '')

apps/website/src/detect/cnn-job-detail-by-species/components/job-detections.vue

@@ -36,6 +36,7 @@
               :validation="dt.validation"
               :checked="dt.checked"
               :site="dt.site"
+              :site-id-core="dt.siteIdCore"
               :start="dt.start"
               :score="dt.score"
               :selected-grouping="selectedGrouping"
@@ -229,6 +230,7 @@ const allSpecies = computed<Array<{ siteName: string, speciesSlug: string, speci
           validation: detection.reviewStatus,
           score: detection.confidence,
           start: detection.start,
+          siteIdCore: detection.siteIdCore,
           site: store.projectFilters?.locationSites.filter((site) => site.idCore === detection.siteIdCore)[0]?.name ?? ''
         }
       })

apps/website/src/detect/cnn-job-detail/components/detection-item.vue

@@ -61,6 +61,7 @@
       <div
         v-if="!spectrogramLoading && spectrogram"
         class="absolute bottom-2 left-2 cursor-pointer"
+        @click="onVisualizerRedirect"
       >
         <icon-custom-fi-visualizer-redirect class="w-6.3 h-6.3" />
       </div>
@@ -93,10 +94,11 @@ import dayjs from 'dayjs'
 import { Howl } from 'howler'
 import { inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 
+import { apiArbimonLegacyFindRecording } from '@rfcx-bio/common/api-arbimon/recordings-query'
 import { type ArbimonReviewStatus } from '@rfcx-bio/common/api-bio/cnn/classifier-job-information'
 import { apiCoreGetMedia } from '@rfcx-bio/common/api-core/media/core-media'
 
-import { apiClientMediaKey } from '@/globals'
+import { apiClientArbimonLegacyKey, apiClientMediaKey } from '@/globals'
 import { useStore } from '~/store'
 import type { DetectionEvent } from './types'
 import ValidationStatus from './validation-status.vue'
@@ -110,7 +112,8 @@ const props = withDefaults(defineProps<{
   score?: number | undefined,
   start?: string | undefined,
   site?: string | undefined,
-  selectedGrouping?: string | undefined
+  selectedGrouping?: string | undefined,
+  siteIdCore?: string | undefined
 }>(), {
   id: null,
   checked: null,
@@ -129,6 +132,7 @@ const highlightBorder = ref(false)
 const isSelected = ref<boolean>(false)
 
 const apiMedia = inject(apiClientMediaKey) as AxiosInstance
+const apiClientArbimon = inject(apiClientArbimonLegacyKey) as AxiosInstance
 
 const audio = ref<Howl | null>(null)
 const spectrogram = ref<string | null>(null)
@@ -193,6 +197,13 @@ const stop = () => {
   audio.value?.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
+  window.location.assign(`${window.location.origin}/project/${store.project?.slug}/visualizer/rec/${response}`)
+}
+
 const toggleDetection = (event: MouseEvent) => {
   if (!store.userIsExpertMember) return
   isSelected.value = !isSelected.value

apps/website/src/detect/cnn-job-detail/components/types.ts

@@ -18,6 +18,7 @@ export interface DetectionMedia {
   validation: ArbimonReviewStatus
   score?: number
   site?: string
+  siteIdCore?: string
   start?: string
 }
 

packages/common/src/api-arbimon/recordings-query.ts

@@ -0,0 +1,13 @@
+import { type AxiosInstance } from 'axios'
+
+export interface RecordingsQueryParams {
+  start: string
+  end?: string
+  site_external_id: string
+  project_id?: number
+}
+
+export const apiArbimonLegacyFindRecording = async (apiClient: AxiosInstance, slug: string, params: RecordingsQueryParams): Promise<number> => {
+  const response = await apiClient.get(`/legacy-api/project/${slug}/recordings/query`, { params })
+  return Number(response.data)
+}