Feature/vv insights ta

apps/fishing-map-e2e/src/constants/urls.ts

@@ -12,6 +12,9 @@ export const URL_YEAR_2018 =
 export const URL_VESSEL_PROFILE =
   'fishing-activity/default-public/vessel/3d92d0d1e-ed36-e1bd-fd55-3735c2a5485e?start=2018-01-01T00%3A00%3A00.000Z&end=2019-01-01T00%3A00%3A00.000Z&latitude=-51.62826704426086&longitude=-48.04732049999999&zoom=2.746324859308452&dvIn[0][id]=vessel-3d92d0d1e-ed36-e1bd-fd55-3735c2a5485e&dvIn[0][dvId]=fishing-map-vessel-track&dvIn[0][cfg][track]=public-global-all-tracks%3Av20231026&dvIn[0][cfg][info]=public-global-vessel-identity%3Av20231026&dvIn[0][cfg][events][0]=public-global-fishing-events%3Av20231026&dvIn[0][cfg][events][1]=public-global-port-visits-c2-events%3Av20231026&dvIn[0][cfg][events][2]=public-global-encounters-events%3Av20231026&dvIn[0][cfg][events][3]=public-global-loitering-events%3Av20231026&dvIn[0][cfg][events][4]=public-global-gaps-events%3Av20231026&dvIn[0][cfg][clr]=%23F95E5E&lTD=&fTD=&timebarVisualisation=vessel&vesselDatasetId=public-global-vessel-identity%3Av20231026&visibleEvents[0]=loitering&visibleEvents[1]=encounter&visibleEvents[2]=port_visit&tk[0]=public-global-vessel-identity%3Av20231026'
 
+export const URL_VESSEL_PROFILE_2020 =
+  'fishing-activity/default-public/vessel/3d92d0d1e-ed36-e1bd-fd55-3735c2a5485e?start=2021-01-01T00%3A00%3A00.000Z&end=2024-01-01T00%3A00%3A00.000Z&latitude=-51.62826704426086&longitude=-48.04732049999999&zoom=2.746324859308452&dvIn[0][id]=vessel-3d92d0d1e-ed36-e1bd-fd55-3735c2a5485e&dvIn[0][dvId]=fishing-map-vessel-track&dvIn[0][cfg][track]=public-global-all-tracks%3Av20231026&dvIn[0][cfg][info]=public-global-vessel-identity%3Av20231026&dvIn[0][cfg][events][0]=public-global-fishing-events%3Av20231026&dvIn[0][cfg][events][1]=public-global-port-visits-c2-events%3Av20231026&dvIn[0][cfg][events][2]=public-global-encounters-events%3Av20231026&dvIn[0][cfg][events][3]=public-global-loitering-events%3Av20231026&dvIn[0][cfg][events][4]=public-global-gaps-events%3Av20231026&dvIn[0][cfg][clr]=%23F95E5E&lTD=&fTD=&timebarVisualisation=vessel&vesselDatasetId=public-global-vessel-identity%3Av20231026&visibleEvents[0]=loitering&visibleEvents[1]=encounter&visibleEvents[2]=port_visit&tk[0]=public-global-vessel-identity%3Av20231026'
+
 // API URLS
 export const API_URL_VESSELS = '/v3/vessels*'
 export const API_URL_SEARCH_VESSELS = '/v3/vessels/search*'

apps/fishing-map-e2e/src/e2e/vessel-viewer/direct-access.cy.ts

@@ -1,11 +1,5 @@
-import { URL_VESSEL_PROFILE } from '../../constants/urls'
-import {
-  disablePopups,
-
-  switchLanguage,
-
-  verifyTracksInTimebar,
-} from '../../support/app.po'
+import { URL_VESSEL_PROFILE, URL_VESSEL_PROFILE_2020 } from '../../constants/urls'
+import { disablePopups, switchLanguage, verifyTracksInTimebar } from '../../support/app.po'
 
 describe('Access to vessel viewver - direct', () => {
   before(() => {
@@ -17,42 +11,55 @@ describe('Access to vessel viewver - direct', () => {
     })
   })
 
-  it(
-    'should access to a vessel profile using a link and check basic data',
-    () => {
-        cy.visit(URL_VESSEL_PROFILE)
-        verifyTracksInTimebar(4)
-
-        // Do a quick test of the loaded content
-        cy.getBySel('vv-summary-loitering').should('exist')
-
-        cy.getBySel('vv-summary-tab').click()
-        cy.getBySel('vv-list-encounter').click()
-        cy.getBySel('vv-encounter-event-0').should('exist')
-        cy.getBySel('vv-encounter-event-1').should('exist')
-
-        cy.getBySel('vv-areas-tab').click()
-        cy.get('span').contains('South Georgia and the South Sandwich Islands')
-        cy.get('span').contains('Uruguay')
-
-        cy.getBySel('vv-area-fao').click()
-        cy.get('span').contains('Atlantic, Antarctic')
-
-        cy.getBySel('vv-area-rfmo').click()
-        cy.get('span').contains('ACAP')
-        cy.get('span').contains('IWC')
-        cy.get('span').contains('CCAMLR')
-
-        cy.getBySel('vv-area-mpa').click()
-        cy.get('span').contains('South Georgia and South Sandwich Islands Marine Protected Area - Marine Protected Area')
-        cy.get('span').contains('Outside MPA areas')
-
-        cy.getBySel('vv-related-tab').click()
-        cy.getBySel('link-vessel-profile').contains('La Manche')
-
-        cy.getBySel('vv-related-type-owners').click()
-        cy.getBySel('link-vessel-profile').contains('Antarctic Sea')
-        cy.getBySel('link-vessel-profile').contains('Gadus Neptun')
-      }
-  )
+  it('should access to a vessel profile using a link and check basic data', () => {
+    cy.visit(URL_VESSEL_PROFILE)
+    verifyTracksInTimebar(4)
+
+    // Do a quick test of the loaded content
+    cy.getBySel('vv-summary-loitering').should('exist')
+
+    cy.getBySel('vv-summary-tab').click()
+    cy.getBySel('vv-list-encounter').click()
+    cy.getBySel('vv-encounter-event-0').should('exist')
+    cy.getBySel('vv-encounter-event-1').should('exist')
+
+    cy.getBySel('vv-areas-tab').click()
+    cy.get('span').contains('South Georgia and the South Sandwich Islands')
+    cy.get('span').contains('Uruguay')
+
+    cy.getBySel('vv-area-fao').click()
+    cy.get('span').contains('Atlantic, Antarctic')
+
+    cy.getBySel('vv-area-rfmo').click()
+    cy.get('span').contains('ACAP')
+    cy.get('span').contains('IWC')
+    cy.get('span').contains('CCAMLR')
+
+    cy.getBySel('vv-area-mpa').click()
+    cy.get('span').contains(
+      'South Georgia and South Sandwich Islands Marine Protected Area - Marine Protected Area'
+    )
+    cy.get('span').contains('Outside MPA areas')
+
+    cy.getBySel('vv-related-tab').click()
+    cy.getBySel('link-vessel-profile').contains('La Manche')
+
+    cy.getBySel('vv-related-type-owners').click()
+    cy.getBySel('link-vessel-profile').contains('Antarctic Sea')
+    cy.getBySel('link-vessel-profile').contains('Gadus Neptun')
+
+    cy.getBySel('vv-insights-tab').click()
+    cy.get('#insights').contains('Insights available from 1 January 2020 onwards')
+  })
+
+  it('should access to a vessel insights profile using a link post 2020', () => {
+    cy.visit(URL_VESSEL_PROFILE_2020)
+    cy.getBySel('vv-insights-tab').click()
+    cy.get('#coverage').contains('AIS Coverage')
+    cy.get('#gaps').contains('AIS Off Events')
+    cy.get('#fishing').contains('Fishing Events')
+    cy.get('#IUU').contains('RFMO IUU Vessel List')
+    cy.get('#flagChanges').contains('Flag changes')
+    cy.get('#MOULists').contains('Tokyo and Paris MOU Lists')
+  })
 })

apps/fishing-map-e2e/src/support/app.po.ts

@@ -1,3 +1,4 @@
+import { HIGHLIGHT_DATAVIEW_INSTANCE_ID } from '../../../fishing-map/features/workspace/highlight-panel/highlight-panel.content'
 import { API_URL_4WINGS_TILES } from '../constants/urls'
 
 export const getGreeting = () => cy.get('h1')
@@ -37,7 +38,7 @@ export const verifyTracksInTimebar = (segments?: number) => {
 export const disablePopups = () => {
   localStorage.setItem('DisableWelcomePopup', 'true')
   localStorage.setItem('DisableSourceSwitchPopup', 'true')
-  localStorage.setItem('HighlightPopup', '"bathymetry-workspace"')
+  localStorage.setItem('HighlightPopup', `"${HIGHLIGHT_DATAVIEW_INSTANCE_ID}"`)
   localStorage.setItem('WelcomePopup', '{"visible":false,"showAgain":false}')
   localStorage.setItem('VesselProfilePopup', '{"visible":false,"showAgain":false}')
   localStorage.setItem(

apps/fishing-map-e2e/tsconfig.json

@@ -6,5 +6,5 @@
     "allowJs": true,
     "types": ["cypress", "node"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts"]
+  "include": ["src/**/*.ts", "src/**/*.js", "cypress.config.ts", "../../../fishing-map/**/*"]
 }

apps/fishing-map/data/config.ts

@@ -1,8 +1,8 @@
 import { DateTime } from 'luxon'
 import { DataviewCategory, ThinningConfig } from '@globalfishingwatch/api-types'
 import { ThinningLevels, THINNING_LEVELS } from '@globalfishingwatch/api-client'
-import { AppState, TimebarGraphs, TimebarVisualisations, UserTab, WorkspaceState } from 'types'
-import { getUTCDateTime } from 'utils/dates'
+import { AppState, TimebarGraphs, TimebarVisualisations, UserTab, WorkspaceState } from '../types'
+import { getUTCDateTime } from '../utils/dates'
 
 export const ROOT_DOM_ELEMENT = '__next'
 

apps/fishing-map/features/vessel/Vessel.tsx

@@ -122,7 +122,7 @@ const Vessel = () => {
         id: 'insights' as VesselSection,
         title: t('vessel.sectionInsights', 'Insights'),
         content: <Insights />,
-        // testId: 'vv-insights-tab',
+        testId: 'vv-insights-tab',
       },
     ],
     [t, updateAreaLayersVisibility, hasEventsDataset]

apps/fishing-map/features/vessel/insights/InsightCoverage.tsx

@@ -17,7 +17,7 @@ const InsightCoverage = ({
 }) => {
   const { t } = useTranslation()
   return (
-    <div className={styles.insightContainer}>
+    <div id="coverage" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.coverage', 'AIS Coverage')}</label>
         <DataTerminology

apps/fishing-map/features/vessel/insights/InsightFishing.tsx

@@ -49,7 +49,7 @@ const InsightFishing = ({
   }, [eventsInRfmoWithoutKnownAuthorization, vesselEvents])
 
   return (
-    <div className={styles.insightContainer}>
+    <div id="fishing" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.fishing', 'Fishing Events')}</label>
         <DataTerminology

apps/fishing-map/features/vessel/insights/InsightFlagChanges.tsx

@@ -24,7 +24,7 @@ const InsightFlagChanges = ({
   const { flagsChanges } = insightData?.vesselIdentity || {}
 
   return (
-    <div className={styles.insightContainer}>
+    <div id="flagChanges" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.flagChanges', 'Flag Changes')}</label>
         <DataTerminology

apps/fishing-map/features/vessel/insights/InsightGaps.tsx

@@ -25,7 +25,7 @@ const InsightGaps = ({
   }, [eventDetailsVisibility])
 
   return (
-    <div className={styles.insightContainer}>
+    <div id="gaps" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.gaps', 'AIS Off Events')}</label>
         <DataTerminology

apps/fishing-map/features/vessel/insights/InsightIUU.tsx

@@ -17,7 +17,7 @@ const InsightIUU = ({
   const { t } = useTranslation()
   const { iuuVesselList } = insightData?.vesselIdentity || {}
   return (
-    <div className={styles.insightContainer}>
+    <div id="IUU" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.IUU', 'RFMO IUU Vessel List')}</label>
         <DataTerminology

apps/fishing-map/features/vessel/insights/InsightMOUList.tsx

@@ -83,7 +83,7 @@ const InsightMOUList = ({
   }
 
   return (
-    <div className={styles.insightContainer}>
+    <div id="MOULists" className={styles.insightContainer}>
       <div className={styles.insightTitle}>
         <label>{t('vessel.insights.MOULists', 'MOU Lists')}</label>
         <DataTerminology

apps/fishing-map/features/workspace/highlight-panel/highlight-panel.content.ts

@@ -1,5 +1,9 @@
-import { IS_PRODUCTION_BUILD, IS_PRODUCTION_WORKSPACE_ENV, PATH_BASENAME } from 'data/config'
-import { Locale } from 'types'
+import { Locale } from '../../../types'
+import {
+  IS_PRODUCTION_BUILD,
+  IS_PRODUCTION_WORKSPACE_ENV,
+  PATH_BASENAME,
+} from '../../../data/config'
 
 type HighlighPanelConfigLocale = {
   [locale in Locale]?: {