feat: small improvements and fixes

backend/examples/example-application.yaml

@@ -16,14 +16,22 @@ ldes:
       member-type: "https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitshinder"
       timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
       property-predicates:
-        startTime: "http://data.europa.eu/m8g/startTime"
-        endTime: "http://data.europa.eu/m8g/endTime"
+        starttime: "http://data.europa.eu/m8g/startTime"
+        endtime: "http://data.europa.eu/m8g/endTime"
     verkeersmeting:
       member-type: "https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting"
       timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
       property-predicates:
-        fullName: "http://custom/meetpunt#VolledigeNaam"
+        fullname: "http://custom/meetpunt#VolledigeNaam"
         countObservationResult: "http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result"
+    bluebikes:
+      member-type: "https://w3id.org/gbfs#Station"
+      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
+      property-predicates:
+        fullname: "http://schema.org/name"
+        capacity: "https://blue-bike.be/ns#capacity"
+        available: "https://w3id.org/gbfs#bikes_available"
+        used: "https://w3id.org/gbfs#bikes_in_use"
 graphdb:
   url: "http://localhost:8080/rdf4j-server/repositories/"
   repositoryId: "test"

backend/src/main/resources/application.yaml

@@ -1,39 +1,39 @@
-spring:
-  datasource:
-    url: jdbc:postgresql://localhost:25432/test
-    username: postgres
-    password: test
-  jpa:
-    properties:
-      hibernate:
-        dialect: org.hibernate.dialect.PostgreSQLDialect
-    hibernate:
-      ddl-auto: update
-
-ldes:
-  streams:
-    gipod:
-      member-type: "https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitshinder"
-      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
-      property-predicates:
-        startTime: "http://data.europa.eu/m8g/startTime"
-        endTime: "http://data.europa.eu/m8g/endTime"
-    verkeersmeting:
-      member-type: "https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting"
-      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
-      property-predicates:
-        fullName: "http://custom/meetpunt#VolledigeNaam"
-        countObservationResult: "http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result"
-    bluebikes:
-      member-type: "https://w3id.org/gbfs#Station"
-      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
-      property-predicates:
-        fullName: "http://schema.org/name"
-        capacity: "https://blue-bike.be/ns#capacity"
-        available: "https://w3id.org/gbfs#bikes_available"
-        used: "https://w3id.org/gbfs#bikes_in_use"
-graphdb:
-  url: "http://localhost:8080/rdf4j-server/repositories/"
-  repositoryId: "test"
-server:
-  port: 8084
+#spring:
+#  datasource:
+#    url: jdbc:postgresql://localhost:25432/test
+#    username: postgres
+#    password: test
+#  jpa:
+#    properties:
+#      hibernate:
+#        dialect: org.hibernate.dialect.PostgreSQLDialect
+#    hibernate:
+#      ddl-auto: update
+#
+#ldes:
+#  streams:
+#    gipod:
+#      member-type: "https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitshinder"
+#      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
+#      property-predicates:
+#        starttime: "http://data.europa.eu/m8g/startTime"
+#        endtime: "http://data.europa.eu/m8g/endTime"
+#    verkeersmeting:
+#      member-type: "https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting"
+#      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
+#      property-predicates:
+#        fullname: "http://custom/meetpunt#VolledigeNaam"
+#        countObservationResult: "http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result"
+#    bluebikes:
+#      member-type: "https://w3id.org/gbfs#Station"
+#      timestamp-path: "http://www.w3.org/ns/prov#generatedAtTime"
+#      property-predicates:
+#        fullname: "http://schema.org/name"
+#        capacity: "https://blue-bike.be/ns#capacity"
+#        available: "https://w3id.org/gbfs#bikes_available"
+#        used: "https://w3id.org/gbfs#bikes_in_use"
+#graphdb:
+#  url: "http://localhost:8080/rdf4j-server/repositories/"
+#  repositoryId: "test"
+#server:
+#  port: 8084

demonstrator.env

@@ -0,0 +1,22 @@
+SPRING_DATASOURCE_URL=jdbc:postgresql://postgresql:5432/test
+SPRING_DATASOURCE_USERNAME=postgres
+SPRING_DATASOURCE_PASSWORD=test
+SPRING_JPA_PROPERTIES_HIBERNATE_DIALECT=org.hibernate.dialect.PostgreSQLDialect
+SPRING_JPA_HIBERNATE_DDLAUTO=update
+LDES_STREAMS_GIPOD_MEMBERTYPE=https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitshinder
+LDES_STREAMS_GIPOD_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
+LDES_STREAMS_GIPOD_PROPERTYPREDICATES_STARTTIME=http://data.europa.eu/m8g/startTime
+LDES_STREAMS_GIPOD_PROPERTYPREDICATES_ENDTIME=http://data.europa.eu/m8g/endTime
+LDES_STREAMS_VERKEERSMETING_MEMBERTYPE=https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting
+LDES_STREAMS_VERKEERSMETING_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
+LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_FULLNAME=http://custom/meetpunt#VolledigeNaam
+LDES_STREAMS_VERKEERSMETING_PROPERTYPREDICATES_COUNTOBSERVATIONRESULT=http://def.isotc211.org/iso19156/2011/CountObservation#OM_CountObservation.result
+LDES_STREAMS_BLUEBIKES_MEMBERTYPE=https://w3id.org/gbfs#Station
+LDES_STREAMS_BLUEBIKES_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
+LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_FULLNAME=http://schema.org/name
+LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_CAPACITY=https://blue-bike.be/ns#capacity
+LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_AVAILABLE=https://w3id.org/gbfs#bikes_available
+LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_USED=https://w3id.org/gbfs#bikes_in_use
+GRAPHDB_URL=http://rdf4j-server:8080/rdf4j-server/repositories/
+GRAPHDB_REPOSITORYID=test
+SERVER_PORT=8080

docker-compose.yml

@@ -23,25 +23,7 @@ services:
     build:
       context: .
       dockerfile: Dockerfile
-    environment:
-      - SPRING_DATASOURCE_URL=jdbc:postgresql://postgresql:5432/test
-      - SPRING_DATASOURCE_USERNAME=postgres
-      - SPRING_DATASOURCE_PASSWORD=test
-      - SPRING_JPA_PROPERTIES_HIBERNATE_DIALECT=org.hibernate.dialect.PostgreSQLDialect
-      - SPRING_JPA_HIBERNATE_DDLAUTO=update
-      - LDES_STREAMS_GIPOD_MEMBERTYPE=https://data.vlaanderen.be/ns/mobiliteit#Mobiliteitshinder
-      - LDES_STREAMS_GIPOD_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
-      - LDES_STREAMS_VERKEERSMETING_MEMBERTYPE=https://data.vlaanderen.be/ns/verkeersmetingen#Verkeersmeting
-      - LDES_STREAMS_VERKEERSMETING_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
-      - LDES_STREAMS_BLUEBIKES_MEMBERTYPE=https://w3id.org/gbfs#Station
-      - LDES_STREAMS_BLUEBIKES_TIMESTAMPPATH=http://www.w3.org/ns/prov#generatedAtTime
-      - LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_FULLNAME=http://schema.org/name
-      - LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_CAPACITY=https://blue-bike.be/ns#capacity
-      - LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_AVAILABLE=https://w3id.org/gbfs#bikes_available
-      - LDES_STREAMS_BLUEBIKES_PROPERTYPREDICATES_USED=https://w3id.org/gbfs#bikes_in_use
-      - GRAPHDB_URL=http://rdf4j-server:8080/rdf4j-server/repositories/
-      - GRAPHDB_REPOSITORYID=test
-      - SERVER_PORT=8080
+    env_file: ./demonstrator.env
     ports:
       - 8084:8080
     depends_on:

frontend/src/components/graph/composables/useTriplesFetching.js

@@ -116,7 +116,6 @@ function visualizeTriples(triples) {
     let transform;
 
     const zoom = d3.zoom().on("zoom", e => {
-        console.log(e.transform)
         g.attr("transform", () => transform = e.transform);
         nodes.attr("r", NODE_RADIUS / Math.sqrt(transform.k))
         nodes.style("stroke-width", `${NODE_STROKE_WIDTH / Math.sqrt(transform.k)}px`)

frontend/src/components/map/LeafletMap.vue

@@ -13,7 +13,7 @@
       time = timestamp;
       timePeriod = period;
     }"
-            @realtime-toggled="(isRealTimeEnabled) => isRealTimeEnabled ? connect() : disconnect()"
+            @realtime-toggled="isRealTimeEnabled => isRealTimeEnabled ? connect() : disconnect()"
     />
   </div>
 </template>
@@ -155,6 +155,7 @@ export default {
     },
     //websocket
     connect() {
+      this.layers.forEach(layer => layer.clearLayers())
       this.stompClient = new Stomp.client(`${import.meta.env.VITE_WS_BASE_URL}/update`, {debug: false});
       this.stompClient.connect(
           {},
@@ -188,7 +189,7 @@ export default {
       }
     },
     updateMarker(marker) {
-      marker.setStyle({color: '#808080'})
+      marker.setStyle({color: '#A813F7'})
     }
   }
 
@@ -291,11 +292,7 @@ export default {
   justify-self: center;
 }
 
-.popup-gipod-start-date {
-  justify-self: end;
-}
-
-.popup-gipod-end-date {
+.popup-grid-end {
   justify-self: end;
 }
 

frontend/src/components/map/composables/useMarkers.js

@@ -54,7 +54,7 @@ export function useMarkers(memberGeometries, collection, onMarkerClicked, onPopu
             }
         }
         let geoJson = L.geoJson(geoJsonFeature, {onEachFeature: onEachFeature, pointToLayer: pointToLayer})
-        geoJson.setStyle({color: '#808080'});
+        geoJson.setStyle({color: '#A813F7'});
         markers.push(geoJson)
     })
     return markers;

frontend/src/components/map/composables/usePopup.js

@@ -2,18 +2,23 @@ import mapsMarker from "../../../assets/svgs/legend/maps.marker.svg"
 import carIcon from "../../../assets/svgs/legend/car.svg"
 import bikeIcon from "../../../assets/svgs/legend/bike.svg"
 import alertIcon from "../../../assets/svgs/legend/alert-triangle-filled.svg"
+
+function getBikeString(number) {
+    return number === "1" ? "fiets" : "fietsen";
+}
+
 export function usePopup(collection, properties) {
     switch (collection) {
         case "gipod":
             return `<div class="popup-grid body body-xxsmall-regular">
 <img class="popup-grid-icon popup-gipod-icon" src="${alertIcon}">
-<b class="popup-gipod-start-label">Vanaf</b><span class="popup-gipod-start-date">${properties.startTime}</span>
-<b class="popup-gipod-end-label">Tot</b><span class="popup-gipod-end-date">${properties.endTime}</span>
+<b class="popup-gipod-start-label">Vanaf</b><span class="popup-grid-end">${properties.starttime}</span>
+<b class="popup-gipod-end-label">Tot</b><span class="popup-grid-end">${properties.endtime}</span>
 </div>`
         case "verkeersmeting":
             return `<div class="popup-verkeersmeting">
 <img class="popup-verkeersmeting-map-marker" src="${mapsMarker}">
-<span class="popup-verkeersmeting-fullname body body-xxsmall-regular">${properties.fullName}</span>
+<span class="popup-verkeersmeting-fullname body body-xxsmall-regular">${properties.fullname}</span>
 <div class="popup-verkeersmeting-counting-row">
 <img class="popup-verkeersmeting-car-icon" src="${carIcon}">
 <span class="popup-verkeersmeting-counting-result body">${properties.countObservationResult ?? " - "}</span>
@@ -22,10 +27,10 @@ export function usePopup(collection, properties) {
         case "bluebikes":
             return `<div class="popup-grid body body-xxsmall-regular">
 <img class="popup-grid-icon popup-bluebike-icon" src="${bikeIcon}">
-<span class="popup-title body-small-regular">${properties.fullName}</span>
+<span class="popup-title body-small-regular">${properties.fullname}</span>
 <b>${properties.capacity}</b><span class="">staanplaatsen</span>
-<b>${properties.available}</b><span>beschikbare fietsen</span>
-<b>${properties.used}</b><span>fietsen in gebruik</span>
+<b>${properties.available}</b><span>beschikbare ${getBikeString(properties.available)}</span>
+<b>${properties.used}</b><span>${getBikeString(properties.used)} in gebruik</span>
 </div>`
 
     }

frontend/src/components/modal/MapButtons.vue

@@ -10,8 +10,8 @@ const emit = defineEmits(["onLayersUpdated"])
 const streams = import.meta.env.VITE_STREAMS.streams
 
 function onMapButtonClicked(button : "layers" | "legend") {
-  showLayers.value = button === "layers"
-  showLegend.value = button === "legend"
+  showLayers.value = button === "layers" && !showLayers.value;
+  showLegend.value = button === "legend" && !showLegend.value;
 }
 
 function onCheckboxClicked(key: string, isChecked: boolean) {
@@ -41,7 +41,7 @@ function onCheckboxClicked(key: string, isChecked: boolean) {
       <p class="body body-medium-regular margin-vert-24">
         Als decentrale oplossing maakt de Vlaamse Smart Data Space gebruik van een gezamenlijk <b>ecosysteem</b> met duidelijke spelregels, waardoor we data slim kunnen delen, publiceren en hergebruiken.
       </p>
-      <CheckboxTile v-for="stream in streams" :id="stream.id" :label="stream.fullName" @on-checked="isChecked => onCheckboxClicked(stream.id, isChecked)" :checked="layersToShow.get(stream.id)"></CheckboxTile>
+      <CheckboxTile v-for="stream in streams" :id="stream.id" :label="stream['fullname']" @on-checked="isChecked => onCheckboxClicked(stream.id, isChecked)" :checked="layersToShow.get(stream.id)"></CheckboxTile>
       <!--
             <CheckboxTile id="gipod" label="GIPOD" @on-checked="isChecked => onCheckboxClicked('gipod', isChecked)" :checked="layersToShow.get('gipod')"></CheckboxTile>
             <CheckboxTile id="verkeersmeting" label="Verkeersmetingen Verkeerscentrum LDES" @on-checked="isChecked => onCheckboxClicked('verkeersmeting', isChecked)" :checked="layersToShow.get('verkeersmeting')"></CheckboxTile>

frontend/vite.config.js

@@ -28,7 +28,7 @@ export default defineConfig(({command, mode}) => {
             outDir: 'target/dist'
         },
         define: {
-            'import.meta.env.VITE_STREAMS': JSON.stringify({ streams: [{id: "gipod", fullName: "GIPOD", color: "#FFED00"}, {id: "verkeersmeting", fullName: "Verkeersmetingen Verkeerscentrum LDES", color: "#443939"}, {id: "bluebikes", fullName: "Blue Bikes", color: "#05c"}]})
+            'import.meta.env.VITE_STREAMS': JSON.stringify({ streams: [{id: "gipod", fullname: "GIPOD", color: "#FFED00"}, {id: "verkeersmeting", fullname: "Verkeersmetingen Verkeerscentrum LDES", color: "#443939"}, {id: "bluebikes", fullname: "Blue Bikes", color: "#05c"}]})
         }
     }
 })