Merge branch '59-reparer-affichage-donnees-spatiales-sur-dataset' into 'main'

Resolve "Réparer affichage données spatiales sur dataset"

Closes #59

See merge request !71

src/assets/datasetExample1.json → src/assets/datasetExample1.ts

-{
+import type { OcDataset } from "@/declarations";
+
+export const datasetExample1: OcDataset = {
   "@id": "urn:testdataset:nakala:6d79f9ed-e10e-4eea-8bfe-93c0bdf370dc",
-  "@type": "http://www.w3.org/ns/dcat#Dataset",
+  "@type": ["http://www.w3.org/ns/dcat#Dataset"],
+  "identifier": "test-6d79f9ed-e10e-4eea-8bfe-93c0bdf370dc",
   "creator@string": "Coché, Lorraine; Arnaud, Elie; Bouveret, Laurent; David, Romain; Foulquier, Eric; Gandilhon, Nadège; Jeannesson, Etienne; Le Bras, Yvan; Lerigoleur, Emilie; Lopez, Pascal Jean; Madon, Bénédicte; Sananikone, Julien; Sèbe, Maxime; Le Berre, Iwan; Jung, Jean-Luc",
   "accrualPeriodicity": "http://publications.europa.eu/resource/authority/frequency/UNKNOWN",
   "bibliographicCitation": "Coché, L., Arnaud, E., Laurent, B., David, R., Foulquier, E., Gandilhon, N., Jeannesson, E., Le Bras, Y., Lerigoleur, E., Jean Lopez, P., Madon, B., Sananikone, J., Sèbe, M., Le Berre, I., & Jung, J.-L. (2021). Kakila database of marine mammal observation data around the French archipelago of Guadeloupe in the AGOA sanctuary - French Antilles [dataset]. PNDB Metacat PRODUCTION Node. https://doi.org/10.48502/8BB5-PK85",
@@ -115,12 +118,12 @@
     "fr": "Base de données collectée dans le cadre du stage de master 2 Lorraine Coché \"Inventaire et structuration des données d'observation des mammifères marins autour de la Guadeloupe\" en 2020 (Master Écosystèmes marins tropicaux de l'Université des Antilles). Cette base de données a été constituée dans un esprit de science participative. Elle centralise et harmonise les données d'observation collectées par l'équipe du Sanctuaire Agoa (Aire Marine Protégée), l'OMMAG (Observatoire des Mammifères Marins de l'Archipel Guadeloupéen), BREACH Antilles, et les sociétés de whale-watching Cétacés Caraïbes, Guadeloupe Evasion Découverte et Aventures Marines.",
     "en": "Database collected as part of Lorraine Coché's Master 2 course entitled \"Inventory and structuring of marine mammal observation data around Guadeloupe\" in 2020 (Master's degree in Tropical Marine Ecosystems at the University of the West Indies). This database has been set up in the spirit of participatory science. It centralises and harmonises the observation data collected by the Agoa Sanctuary team (Marine Protected Area), OMMAG (Observatoire des Mammifères Marins de l'Archipel Guadeloupéen), BREACH Antilles, and the whale-watching companies Cétacés Caraïbes, Guadeloupe Evasion Découverte and Aventures Marines."
   },
-  "identifier": [
+  "otherIdentifier": [
     {
       "@id": "_:vb112236",
       "@type": "http://www.w3.org/ns/adms#Identifier",
       "creator": "https://doi.org/",
-      "issued": "2021-05-20",
+      "issued": new Date(Date.parse("2021-05-20")),
       "notation": "10.48502/8bb5-pk85",
       "schemeAgency": "DOI"
     },
@@ -128,7 +131,7 @@
       "@id": "_:vb112249",
       "@type": "http://www.w3.org/ns/adms#Identifier",
       "creator": "https://doi.org/",
-      "issued": "2021-05-20",
+      "issued": new Date(Date.parse("2021-05-20")),
       "notation": "10.48502/8bb5-pk85",
       "schemeAgency": "DOI"
     },
@@ -136,16 +139,16 @@
       "@id": "_:vb112262",
       "@type": "http://www.w3.org/ns/adms#Identifier",
       "creator": "https://doi.org/",
-      "issued": "2021-05-20",
+      "issued": new Date(Date.parse("2021-05-20")),
       "notation": "10.48502/8bb5-pk85",
       "schemeAgency": "DOI"
     }
   ],
   "isPartOf": "https://data.driihm.fr/catalogs/geo-ohm-lc",
   "isReferencedBy": "https://doi.org/10.3897/BDJ.9.e69022",
-  "issued": "2021-01-01",
+  "issued": new Date(Date.parse("2021-01-01")),
   "language": "http://publications.europa.eu/resource/authority/language/FRE",
-  "modified": "2023-12-04",
+  "modified": new Date(Date.parse("2023-12-04")),
   "provenance": [
     {
       "@id": "_:vb112239",
@@ -181,52 +184,65 @@
     {
       "@id": "_:vb112238",
       "@type": "http://purl.org/dc/terms/Location",
-      "geometry": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>",
-      "geometry@Geometry": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+      "geometry": [
+        {
+          "@type": "http://www.opengis.net/ont/geosparql#gmlLiteral",
+          "@value": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>"
+        },
+        {
+          "@type": "http://www.openlinksw.com/schemas/virtrdf#Geometry",
+          "@value": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+        }
+      ]
     },
     {
       "@id": "_:vb112251",
       "@type": "http://purl.org/dc/terms/Location",
-      "geometry": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>",
-      "geometry@Geometry": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+      "geometry": [
+        {
+          "@type": "http://www.opengis.net/ont/geosparql#gmlLiteral",
+          "@value": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>"
+        },
+        {
+          "@type": "http://www.openlinksw.com/schemas/virtrdf#Geometry",
+          "@value": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+        }
+      ]
     },
     {
       "@id": "_:vb112264",
       "@type": "http://purl.org/dc/terms/Location",
-      "geometry": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>",
-      "geometry@Geometry": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+      "geometry": [
+        {
+          "@type": "http://www.opengis.net/ont/geosparql#gmlLiteral",
+          "@value": "<gml:Envelope srsName=\"http://www.opengis.net/def/crs/OGC/1.3/CRS84\"><gml:lowerCorner>-61.8098386177696 15.832018691052</gml:lowerCorner><gml:upperCorner>-61.0019590353041 16.5144923539361</gml:upperCorner></gml:Envelope>"
+        },
+        {
+          "@type": "http://www.openlinksw.com/schemas/virtrdf#Geometry",
+          "@value": "POLYGON((-61.80983861777 16.514492353936,-61.001959035304 16.514492353936,-61.001959035304 15.832018691052,-61.80983861777 15.832018691052,-61.80983861777 16.514492353936))"
+        }
+      ]
     }
   ],
   "temporal": [
-    {
-      "@id": "_:vb112237",
-      "@type": "http://purl.org/dc/terms/PeriodOfTime",
-      "endDate": "2019-12-31",
-      "startDate": "2000-01-01"
-    },
-    {
-      "@id": "_:vb112250",
-      "@type": "http://purl.org/dc/terms/PeriodOfTime",
-      "endDate": "2019-12-31",
-      "startDate": "2000-01-01"
-    },
-    {
-      "@id": "_:vb112263",
-      "@type": "http://purl.org/dc/terms/PeriodOfTime",
-      "endDate": "2019-12-31",
-      "startDate": "2000-01-01"
-    }
+    [
+      new Date(Date.parse('2019-12-31')),
+      new Date(Date.parse('2000-01-01'))
+    ],
+    [
+      new Date(Date.parse('2019-12-31')),
+      new Date(Date.parse('2000-01-01'))
+    ],
+    [
+      new Date(Date.parse('2019-12-31')),
+      new Date(Date.parse('2000-01-01'))
+    ]
   ],
   "title": {
     "fr": "KAKILA, Base de données d'observation des mammifères marins autour de l'archipel de la Guadeloupe dans le sanctuaire AGOA - Antilles françaises",
     "en": "KAKILA, Marine mammal observation database around the Guadeloupe archipelago in the AGOA sanctuary - French West Indies"
   },
   "sameAs": "https://doi.org/10.48502/8bb5-pk85",
-  "identifier@id": [
-    "_:vb112236",
-    "_:vb112249",
-    "_:vb112262"
-  ],
   "status": {
     "@id": "http://publications.europa.eu/resource/authority/dataset-status/COMPLETED",
     "prefLabel": {

src/components/descriptors/OcDescriptorDataset/OcDescriptorDataset.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import OcDescriptorDataset from './OcDescriptorDataset.vue'
-import datasetExample from '@/assets/datasetExample1.json'
+import { datasetExample1 } from '@/assets/datasetExample1'
 
 const meta: Meta<typeof OcDescriptorDataset> = {
   component: OcDescriptorDataset
@@ -19,7 +19,7 @@ export const Default: Story = {
     template: '<OcDescriptorDataset v-bind="args" />'
   }),
   args: {
-    dataset: datasetExample,
+    dataset: datasetExample1,
     community: {
       name: 'example'
     }

src/components/descriptors/OcDescriptorResource/OcDescriptorResource.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import OcDescriptorResource from './OcDescriptorResource.vue'
-import datasetExample1 from '@/assets/datasetExample1.json'
+import { datasetExample1 } from '@/assets/datasetExample1'
 
 const meta: Meta<typeof OcDescriptorResource> = {
   component: OcDescriptorResource
@@ -16,8 +16,19 @@ export const Default: Story = {
     setup() {
       return { args }
     },
-    template: '<OcDescriptorResource v-bind="args" />'
+    template: '<OcDescriptorResource v-bind="args" />',
   }),
+  args: {
+    loading: false,
+    community: {
+      identifier: "189088ec-baa9-4397-8c6f-eefde9a3790c",
+      title: {
+        fr: "Communauté du LabEx DRIIHM",
+        en: "DRIIHM Community"
+      },
+      name: 'driihm'
+    }
+  }
 }
 
 export const Loading: Story = {
@@ -38,6 +49,7 @@ export const Loading: Story = {
         fr: "Communauté du LabEx DRIIHM",
         en: "DRIIHM Community"
       },
+      name: 'driihm'
     }
   }
 }
@@ -61,6 +73,7 @@ export const Kakila: Story = {
         fr: "Communauté du LabEx DRIIHM",
         en: "DRIIHM Community"
       },
+      name: 'driihm'
     }
   }
 }

src/components/descriptors/OcDescriptorResource/OcDescriptorResource.vue

@@ -11,6 +11,7 @@
         />
 
         <Button
+          v-if="resource?.identifier"
           size="small"
           :as="OcLink"
           :to="{
@@ -155,16 +156,28 @@
           <slot></slot>
         </main>
         <aside class="w-[20rem]">
-          <OcDescriptorSpatialCoverage
-            v-if="props.resource?.spatial"
-            class="mb-4"
-            :spatial-items="props.resource?.spatial"
-          />
+          <section class="bg-white rounded p-2 flex flex-col gap-2 mb-4" v-if="props.resource?.spatial">
+            <h2 class="text-xl font-medium">
+              {{ globalTranslateValue(datasetMetadata.spatial.label) }}
+            </h2>
+            <OcDescriptorSpatialCoverage
+              v-if="spatialGeometry.length"
+              :spatial-items="spatialGeometry"
+            />
+            <div v-if="spatialConcepts.length" class="flex gap-2">
+              <span
+                class="rounded bg-slate-200 border border-slate-500 text-black font-medium px-2 py-1"
+                v-for="spatialConcept in spatialConcepts"
+                :key="spatialConcept['@id']"
+              >
+                {{ translateValue(spatialConcept.prefLabel) }}
+              </span>
+            </div>
+          </section>
 
           <section class="bg-white rounded p-2 mb-4" v-if="props.resource?.temporal">
             <h2 class="text-xl font-medium mb-2">
               {{ globalTranslateValue(datasetMetadata.temporal.label) }}
-              ({{ props.resource.temporal.length }})
             </h2>
             <ul>
               <li v-for="(temporal, key) in props.resource.temporal" :key="key">
@@ -306,4 +319,7 @@ const contactPointLink = computed(() => {
   const body = t('emails.ask.body', { resourceType, resourceTitle, resourceLink })
   return `mailto:${mailto}?subject=${subject}&body=${body}`
 })
+
+const spatialConcepts = computed(() => props.resource?.spatial?.filter((spatialItem) => spatialItem.prefLabel))
+const spatialGeometry = computed(() => props.resource?.spatial?.filter((spatialItem) => spatialItem.geometry))
 </script>

src/components/descriptors/OcDescriptorSpatialCoverage/OcDescriptorSpatialCoverage.stories.ts

 import type { Meta, StoryObj } from '@storybook/vue3'
 
 import OcDescriptorSpatialCoverage from './OcDescriptorSpatialCoverage.vue'
-import datasetExample from '@/assets/datasetExample1.json'
+import { datasetExample1 } from '@/assets/datasetExample1'
 import example1 from './example1.json'
 import example2 from './example2.json'
 
@@ -21,7 +21,7 @@ export const Default: Story = {
     template: '<OcDescriptorSpatialCoverage v-bind="args" />'
   }),
   args: {
-    spatialItems: datasetExample.spatial
+    spatialItems: datasetExample1.spatial?.filter((item) => item.geometry )
   }
 }
 

src/components/descriptors/OcDescriptorSpatialCoverage/OcDescriptorSpatialCoverage.vue

@@ -15,16 +15,13 @@ import OSM from 'ol/source/OSM.js'
 import TileLayer from 'ol/layer/Tile.js'
 import VectorLayer from 'ol/layer/Vector.js'
 import View from 'ol/View.js'
+import type { OcGeometry } from '@/declarations'
 
 const props = defineProps({
   spatialItems: {
-    type: Array,
+    type: Array<OcGeometry>,
     required: false
-  },
-  // resourceURI: {
-  //   type: String,
-  //   required: false
-  // }
+  }
 })
 
 const loading = ref(true)
@@ -33,38 +30,42 @@ let map: Map
 let allLayers: VectorLayer[] = []
 const initialExtent = ref()
 
-function createLayerFrom(data): VectorLayer | null {
-  if (data.datatype == 'http://www.openlinksw.com/schemas/virtrdf#Geometry') {
-    const format = new WKT()
-    let value = data.value
-    if (data.value.startsWith('BOX(')) {
-      //BOX geometry is not a WKT shape, need to transform it to Polygon
-      value = box2polygon(data.value)
-    }
-    const feature = format.readFeature(value, {
-      dataProjection: 'EPSG:4326',
-      featureProjection: 'EPSG:3857'
-    })
-    const vector = new VectorLayer({
-      source: new VectorSource({
-        features: [feature]
+function createLayerFrom(data: OcGeometry): VectorLayer | null {
+  for(const geometry of data.geometry) {
+    if (geometry['@type'] === 'http://www.openlinksw.com/schemas/virtrdf#Geometry') {
+      const format = new WKT()
+      let value = geometry['@value']
+      if (value.startsWith('BOX(')) {
+        //BOX geometry is not a WKT shape, need to transform it to Polygon
+        value = box2polygon(value)
+      }
+      const feature = format.readFeature(value, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857'
       })
-    })
-    return vector
-  } else if (data['geometry@Geometry']) {
-    const format = new WKT()
-    const value = data['geometry@Geometry']
-    const feature = format.readFeature(value, {
-      dataProjection: 'EPSG:4326',
-      featureProjection: 'EPSG:3857'
-    })
-    const vector = new VectorLayer({
-      source: new VectorSource({
-        features: [feature]
+      const vector = new VectorLayer({
+        source: new VectorSource({
+          features: [feature]
+        })
       })
-    })
-    return vector
-  } else return null
+      return vector
+    } else if (geometry['@type'] === 'http://www.opengis.net/ont/geosparql#wktLiteral') {
+      const format = new WKT()
+      const value = geometry['@value']
+      const feature = format.readFeature(value, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: 'EPSG:3857'
+      })
+      const vector = new VectorLayer({
+        source: new VectorSource({
+          features: [feature]
+        })
+      })
+      return vector
+    }
+  }
+  console.warn('No readable geometry found')
+  return null
 }
 
 function box2polygon(box) {

src/declarations.ts

@@ -60,7 +60,7 @@ export type OcDataset = OcResource & {
   status?: OcConcept
   modified?: Date
   temporal?: [Date, Date][]
-  spatial?: OcConcept[]
+  spatial?: Array<OcConcept | OcGeometry>
   landingPage?: string
   license?: OcConcept
   conformsTo?: OcConcept
@@ -135,6 +135,11 @@ export type OcConceptScheme = {
   prefLabel: LocalizedProperty<string>
 }
 
+export type OcGeometry = {
+  '@id'?: string,
+  geometry: Array<{'@type': string, '@value': string}>
+}
+
 export type OcOrganization = {
   '@id': string
   '@type': string | string[]

src/sparql/datasets.ts

@@ -7,7 +7,8 @@ import {
   type OcConcept,
   type OcOrganization,
   type OcDatasetSummary,
-  type OcAdmsIdentifier
+  type OcAdmsIdentifier,
+  type OcGeometry
 } from '@/declarations'
 import {
   defaultLocalizedPropFormatter,
@@ -232,7 +233,7 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
   /**
    * Temporal
    */
-  const datasetTemporalPromise = executeSparqlConstruct<{ startDate: Date, endDate: Date }>(
+  const datasetTemporalPromise = executeSparqlConstruct<{ startDate: string, endDate: string }>(
     `
     CONSTRUCT {
       ?temporal ?p ?o.
@@ -249,11 +250,11 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
       context: {
         startDate: {
           '@id': 'http://www.w3.org/ns/dcat#startDate',
-          '@type': 'http://www.w3.org/2001/XMLSchema#dateTime'
+          '@type': 'http://www.w3.org/2001/XMLSchema#date',
         },
         endDate: {
           '@id': 'http://www.w3.org/ns/dcat#endDate',
-          '@type': 'http://www.w3.org/2001/XMLSchema#dateTime'
+          '@type': 'http://www.w3.org/2001/XMLSchema#date',
         }
 
       }
@@ -328,9 +329,9 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
   )
 
   /**
-   * Spatial
+   * Spatial concept(s)
    */
-  const datasetSpatialPromise = executeSparqlConstruct<OcConcept>(
+  const datasetSpatialConceptPromise = executeSparqlConstruct<OcConcept>(
     `
     CONSTRUCT {
       ?spatial skos:prefLabel ?o.
@@ -351,6 +352,33 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
     }
   )
 
+  /**
+   * Spatial geometry(s)
+   */
+  const datasetSpatialGeometryPromise = executeSparqlConstruct<OcGeometry>(
+    `
+    CONSTRUCT {
+      ?spatial ?p ?geometry.
+      ?spatial rdf:type dct:Location.
+    }
+    WHERE {
+      <${datasetUri}> dct:spatial ?spatial.
+      ?spatial a dct:Location.
+      ?spatial ?p ?geometry.
+      FILTER (bif:isgeometry(?geometry))
+    }
+    `,
+    {
+      auth,
+      context: {
+        geometry: {
+          '@id': "http://www.w3.org/ns/locn#geometry",
+          '@container': '@set'
+        }
+      }
+    }
+  )
+
   /**
    * Theme
    */
@@ -605,13 +633,14 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
     datasetIdentifierPromise, // 7
     datasetTypePromise, // 8,
     datasetLanguagePromise, // 9
-    datasetSpatialPromise, // 10
+    datasetSpatialConceptPromise, // 10
     datasetAccrualPeriodicityPromise, // 11
     datasetLicensePromise, // 12
-    datasetConformsToPromise // 13
+    datasetConformsToPromise, // 13
+    datasetSpatialGeometryPromise // 14
   ])
 
-  dataset.temporal = datasetResponse[0].map<[Date, Date]>(temporal => [temporal.startDate, temporal.endDate])
+  dataset.temporal = datasetResponse[0].map<[Date, Date]>(temporal => [new Date(Date.parse(temporal.startDate)), new Date(Date.parse(temporal.endDate))])
   dataset.status = datasetResponse[1][0]
   dataset.creator = datasetResponse[2]
   dataset.contactPoint = datasetResponse[3]
@@ -621,11 +650,15 @@ export async function getDataset(identifier: string, auth?: Credentials): Promis
   dataset.otherIdentifier = datasetResponse[7]
   dataset.type = datasetResponse[8][0]
   dataset.language = datasetResponse[9]
-  dataset.spatial = datasetResponse[10]
+  dataset.spatial = [...datasetResponse[10], ...datasetResponse[14]]
   dataset.accrualPeriodicity = datasetResponse[11][0]
   dataset.license = datasetResponse[12][0]
   dataset.conformsTo = datasetResponse[13][0]
 
+  // Format Dates
+  dataset.issued = dataset.issued ? new Date(Date.parse(dataset.issued)) : dataset.issued
+  dataset.modified = dataset.modified ? new Date(Date.parse(dataset.modified)) : dataset.modified
+
   return dataset
 }