From fced3e9ca6d6df4858104eea9d2a43b646d9364c Mon Sep 17 00:00:00 2001 From: sharhio Date: Wed, 6 Mar 2024 16:07:59 +0200 Subject: [PATCH 01/11] feat: dt-5452 draw a badge when stop is not in use --- app/component/map/tile-layer/Stops.js | 23 ++++++--- app/component/map/tile-layer/TileContainer.js | 2 +- app/configurations/config.waltti.js | 4 ++ app/util/mapIconUtils.js | 48 +++++++++++++++++++ static/assets/svg-sprite.default.svg | 8 ++++ static/assets/svg-sprite.hsl.svg | 8 ++++ 6 files changed, 85 insertions(+), 8 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index 78346881fd..5ea4ead946 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -52,11 +52,11 @@ class Stops { this.tile.hilightedStops.includes(feature.properties.gtfsId); let hasTrunkRoute = false; let hasLocalTramRoute = false; + const routes = JSON.parse(feature.properties.routes); if ( feature.properties.type === 'BUS' && this.config.useExtendedRouteTypes ) { - const routes = JSON.parse(feature.properties.routes); if (routes.some(p => p.gtfsType === ExtendedRouteTypes.BusExpress)) { hasTrunkRoute = true; } @@ -65,7 +65,6 @@ class Stops { feature.properties.type === 'TRAM' && this.config.useExtendedRouteTypes ) { - const routes = JSON.parse(feature.properties.routes); if (routes.some(p => p.gtfsType === ExtendedRouteTypes.SpeedTram)) { hasLocalTramRoute = true; } @@ -93,6 +92,9 @@ class Stops { if (hasLocalTramRoute) { mode = 'speedtram'; } + const stopTemporarilyClosed = + feature.properties.alerts?.indexOf('NO_SERVICE') > -1; + const stopClosed = !routes.length; drawStopIcon( this.tile, @@ -107,6 +109,8 @@ class Stops { !isNull(feature.properties.code) ), this.config.colors.iconColors, + stopTemporarilyClosed, + stopClosed, ); } } @@ -123,8 +127,13 @@ class Stops { } getPromise(lang) { + const zoom = this.tile.coords.z + (this.tile.props.zoomOffset || 0); + const stopsUrl = + zoom < this.config.stopsMinZoom + ? this.config.URL.STOP_MAP + : this.config.URL.REALTIME_STOP_MAP; return fetchWithLanguageAndSubscription( - `${getLayerBaseUrl(this.config.URL.STOP_MAP, lang)}${ + `${getLayerBaseUrl(stopsUrl, lang)}${ this.tile.coords.z + (this.tile.props.zoomOffset || 0) }/${this.tile.coords.x}/${this.tile.coords.y}.pbf`, this.config, @@ -145,19 +154,19 @@ class Stops { this.tile.hilightedStops.length && this.tile.hilightedStops[0] ); + const stopLayer = vt.layers.stops || vt.layers.realtimeStops; if ( - vt.layers.stops != null && + stopLayer != null && (this.tile.coords.z >= this.config.stopsMinZoom || hasHilightedStops) ) { const featureByCode = {}; const hybridGtfsIdByCode = {}; - const zoom = this.tile.coords.z + (this.tile.props.zoomOffset || 0); const drawPlatforms = this.config.terminalStopsMaxZoom - 1 <= zoom; const drawRailPlatforms = this.config.railPlatformsMinZoom <= zoom; - for (let i = 0, ref = vt.layers.stops.length - 1; i <= ref; i++) { - const feature = vt.layers.stops.feature(i); + for (let i = 0, ref = stopLayer.length - 1; i <= ref; i++) { + const feature = stopLayer.feature(i); if ( isFeatureLayerEnabled(feature, 'stop', this.mapLayers) && feature.properties.type && diff --git a/app/component/map/tile-layer/TileContainer.js b/app/component/map/tile-layer/TileContainer.js index 907f960596..58ae25c085 100644 --- a/app/component/map/tile-layer/TileContainer.js +++ b/app/component/map/tile-layer/TileContainer.js @@ -244,7 +244,7 @@ class TileContainer { } if ( index < features.length - 1 && - features[index + 1].feature.properties.code === + features[index + 1]?.feature.properties.code === feature.feature.properties.code ) { isCombo = true; diff --git a/app/configurations/config.waltti.js b/app/configurations/config.waltti.js index 74106a9a47..5f29f0d1dd 100644 --- a/app/configurations/config.waltti.js +++ b/app/configurations/config.waltti.js @@ -15,6 +15,10 @@ export default { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, RENTAL_STATION_MAP: { default: `${POI_MAP_PREFIX}/fi/rentalStations/`, }, diff --git a/app/util/mapIconUtils.js b/app/util/mapIconUtils.js index 1338043878..f12a0863de 100644 --- a/app/util/mapIconUtils.js +++ b/app/util/mapIconUtils.js @@ -275,6 +275,19 @@ function drawIconImageBadge( ); } +function drawTopRightCornerIconBadge( + image, + tile, + iconTopLeftCornerX, + iconTopLeftCornerY, + width, + badgeSize, +) { + const badgeX = iconTopLeftCornerX + width / 2; // badge left corner placed at the horizontal center of the icon + const badgeY = iconTopLeftCornerY - badgeSize / 3; // badge left corner placed a third above the icon + tile.ctx.drawImage(image, badgeX, badgeY); +} + function getSelectedIconCircleOffset(zoom, ratio) { if (zoom > 15) { return 94 / ratio; @@ -350,6 +363,38 @@ function getSmallStopIcon(type, radius, color) { }); } +/** + * Draw a badge icon on top of the icon. + */ +function drawStopStatusBadge( + tile, + x, + y, + iconWidth, + stopTemporarilyClosed, + stopClosed, +) { + const badgeSize = iconWidth * 0.75; // badge size is 75% of the icon size + const badgeImageId = stopTemporarilyClosed + ? `icon-icon_stop-temporarily-closed-badge` + : `icon-icon_stop-closed-badge`; + + if (stopClosed || stopTemporarilyClosed) { + getImageFromSpriteCache(badgeImageId, badgeSize, badgeSize).then( + badgeImage => { + drawTopRightCornerIconBadge( + badgeImage, + tile, + x, + y, + iconWidth, + badgeSize, + ); + }, + ); + } +} + const getMemoizedStopIcon = memoize( getSmallStopIcon, (type, radius, color, isHilighted) => @@ -369,6 +414,8 @@ export function drawStopIcon( isHilighted, isFerryTerminal, modeIconColors, + stopTemporarilyClosed, + stopClosed, ) { if (type === 'SUBWAY') { return; @@ -417,6 +464,7 @@ export function drawStopIcon( color, ).then(image => { tile.ctx.drawImage(image, x, y); + drawStopStatusBadge(tile, x, y, width, stopTemporarilyClosed, stopClosed); if (drawNumber && platformNumber) { x += radius; y += radius; diff --git a/static/assets/svg-sprite.default.svg b/static/assets/svg-sprite.default.svg index 6989b19c19..039f5c7ddb 100644 --- a/static/assets/svg-sprite.default.svg +++ b/static/assets/svg-sprite.default.svg @@ -2792,5 +2792,13 @@ + + + + + + + + diff --git a/static/assets/svg-sprite.hsl.svg b/static/assets/svg-sprite.hsl.svg index 4237874b61..9c419e7f08 100644 --- a/static/assets/svg-sprite.hsl.svg +++ b/static/assets/svg-sprite.hsl.svg @@ -2714,5 +2714,13 @@ + + + + + + + + From 15398787ec453169735b8e2b499da0bc6a660ba9 Mon Sep 17 00:00:00 2001 From: sharhio Date: Thu, 7 Mar 2024 13:40:47 +0200 Subject: [PATCH 02/11] feat: dt-5452 default to stop map, test added --- app/component/map/tile-layer/Stops.js | 6 +++--- .../unit/component/map/tile-layer/Stops.test.js | 17 +++++++++++++++++ 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index 5ea4ead946..45689ecc33 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -129,9 +129,9 @@ class Stops { getPromise(lang) { const zoom = this.tile.coords.z + (this.tile.props.zoomOffset || 0); const stopsUrl = - zoom < this.config.stopsMinZoom - ? this.config.URL.STOP_MAP - : this.config.URL.REALTIME_STOP_MAP; + zoom >= this.config.stopsMinZoom + ? this.config.URL.REALTIME_STOP_MAP + : this.config.URL.STOP_MAP; return fetchWithLanguageAndSubscription( `${getLayerBaseUrl(stopsUrl, lang)}${ this.tile.coords.z + (this.tile.props.zoomOffset || 0) diff --git a/test/unit/component/map/tile-layer/Stops.test.js b/test/unit/component/map/tile-layer/Stops.test.js index cb9cf60d8f..26644a8055 100644 --- a/test/unit/component/map/tile-layer/Stops.test.js +++ b/test/unit/component/map/tile-layer/Stops.test.js @@ -5,7 +5,9 @@ describe('Stops', () => { const config = { URL: { STOP_MAP: { default: 'https://localhost/stopmap/' }, + REALTIME_STOP_MAP: { default: 'https://localhost/realtimestopmap/' }, }, + stopsMinZoom: 13, }; const tile = { @@ -37,5 +39,20 @@ describe('Stops', () => { new Stops({ ...tile, props: { zoomOffset: 1 } }, config, []).getPromise(); // eslint-disable-line no-new expect(mock.called()).to.equal(true); }); + + it('should make a get to realtime stops uri when zoomed in', () => { + const mock = fetchMock.get( + `${config.URL.REALTIME_STOP_MAP.default}13/1/2.pbf`, + { + status: 404, + }, + ); + new Stops( + { ...tile, props: { zoomOffset: 10 } }, + config, + [], + ).getPromise(); + expect(mock.called()).to.equal(true); + }); }); }); From f01b05f2fd380729a71a8200dba1c3c8e1083234 Mon Sep 17 00:00:00 2001 From: sharhio Date: Wed, 13 Mar 2024 10:28:22 +0200 Subject: [PATCH 03/11] fix: otp returns noServiceAlert boolean, renaming --- app/component/map/tile-layer/Stops.js | 10 +++++----- app/util/mapIconUtils.js | 14 +++++++------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index 45689ecc33..e3d507fcbd 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -92,9 +92,9 @@ class Stops { if (hasLocalTramRoute) { mode = 'speedtram'; } - const stopTemporarilyClosed = - feature.properties.alerts?.indexOf('NO_SERVICE') > -1; - const stopClosed = !routes.length; + + const stopOutOfService = !!feature.properties.noServiceAlert; + const noRoutesForStop = !routes.length; drawStopIcon( this.tile, @@ -109,8 +109,8 @@ class Stops { !isNull(feature.properties.code) ), this.config.colors.iconColors, - stopTemporarilyClosed, - stopClosed, + stopOutOfService, + noRoutesForStop, ); } } diff --git a/app/util/mapIconUtils.js b/app/util/mapIconUtils.js index f12a0863de..87fe116f45 100644 --- a/app/util/mapIconUtils.js +++ b/app/util/mapIconUtils.js @@ -371,15 +371,15 @@ function drawStopStatusBadge( x, y, iconWidth, - stopTemporarilyClosed, - stopClosed, + stopOutOfService, + noRoutesForStop, ) { const badgeSize = iconWidth * 0.75; // badge size is 75% of the icon size - const badgeImageId = stopTemporarilyClosed + const badgeImageId = stopOutOfService ? `icon-icon_stop-temporarily-closed-badge` : `icon-icon_stop-closed-badge`; - if (stopClosed || stopTemporarilyClosed) { + if (noRoutesForStop || stopOutOfService) { getImageFromSpriteCache(badgeImageId, badgeSize, badgeSize).then( badgeImage => { drawTopRightCornerIconBadge( @@ -414,8 +414,8 @@ export function drawStopIcon( isHilighted, isFerryTerminal, modeIconColors, - stopTemporarilyClosed, - stopClosed, + stopOutOfService, + noRoutesForStop, ) { if (type === 'SUBWAY') { return; @@ -464,7 +464,7 @@ export function drawStopIcon( color, ).then(image => { tile.ctx.drawImage(image, x, y); - drawStopStatusBadge(tile, x, y, width, stopTemporarilyClosed, stopClosed); + drawStopStatusBadge(tile, x, y, width, stopOutOfService, noRoutesForStop); if (drawNumber && platformNumber) { x += radius; y += radius; From a806cc6ca1bda06e690c07531777692cbac26ffd Mon Sep 17 00:00:00 2001 From: sharhio Date: Wed, 13 Mar 2024 13:53:36 +0200 Subject: [PATCH 04/11] variable name change --- app/component/map/tile-layer/Stops.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index e3d507fcbd..a98234d041 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -93,7 +93,7 @@ class Stops { mode = 'speedtram'; } - const stopOutOfService = !!feature.properties.noServiceAlert; + const stopOutOfService = !!feature.properties.closedByServiceAlert; const noRoutesForStop = !routes.length; drawStopIcon( From b2dc41734050ccbd0cf831d297865b9e02021705 Mon Sep 17 00:00:00 2001 From: sharhio Date: Wed, 27 Mar 2024 10:59:18 +0200 Subject: [PATCH 05/11] DT-5452 realtimeStops layer config --- app/configurations/config.default.js | 4 ++++ app/configurations/config.hsl.js | 4 ++++ app/configurations/config.kela.js | 4 ++++ app/configurations/config.varely.js | 4 ++++ app/configurations/config.waltti.js | 2 +- app/configurations/config.walttiOpas.js | 4 ++++ 6 files changed, 21 insertions(+), 1 deletion(-) diff --git a/app/configurations/config.default.js b/app/configurations/config.default.js index 542a9a7c26..1f90e8585a 100644 --- a/app/configurations/config.default.js +++ b/app/configurations/config.default.js @@ -54,6 +54,10 @@ export default { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, RENTAL_STATION_MAP: { default: `${POI_MAP_PREFIX}/fi/rentalStations/`, }, diff --git a/app/configurations/config.hsl.js b/app/configurations/config.hsl.js index 051b7c4332..6e60795510 100644 --- a/app/configurations/config.hsl.js +++ b/app/configurations/config.hsl.js @@ -29,6 +29,10 @@ export default { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, RENTAL_STATION_MAP: { default: `${POI_MAP_PREFIX}/fi/rentalStations/`, }, diff --git a/app/configurations/config.kela.js b/app/configurations/config.kela.js index 28c63071bb..c342b09c31 100644 --- a/app/configurations/config.kela.js +++ b/app/configurations/config.kela.js @@ -24,6 +24,10 @@ export default configMerger(matkaConfig, { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, }, favicon: './app/configurations/images/default/default-favicon.png', diff --git a/app/configurations/config.varely.js b/app/configurations/config.varely.js index c5fbd1be6d..bb98914a48 100644 --- a/app/configurations/config.varely.js +++ b/app/configurations/config.varely.js @@ -30,6 +30,10 @@ export default configMerger(walttiConfig, { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, }, feedIds: ['VARELY', 'FOLI', 'Rauma'], diff --git a/app/configurations/config.waltti.js b/app/configurations/config.waltti.js index 5f29f0d1dd..61e6fd6d56 100644 --- a/app/configurations/config.waltti.js +++ b/app/configurations/config.waltti.js @@ -16,7 +16,7 @@ export default { sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, REALTIME_STOP_MAP: { - default: `${POI_MAP_PREFIX}fi/realtimeStops,stations/`, + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, }, RENTAL_STATION_MAP: { diff --git a/app/configurations/config.walttiOpas.js b/app/configurations/config.walttiOpas.js index b2206179c2..1b98629ede 100644 --- a/app/configurations/config.walttiOpas.js +++ b/app/configurations/config.walttiOpas.js @@ -22,6 +22,10 @@ export default configMerger(walttiConfig, { default: `${POI_MAP_PREFIX}/fi/stops,stations/`, sv: `${POI_MAP_PREFIX}/sv/stops,stations/`, }, + REALTIME_STOP_MAP: { + default: `${POI_MAP_PREFIX}/fi/realtimeStops,stations/`, + sv: `${POI_MAP_PREFIX}/sv/realtimeStops,stations/`, + }, RENTAL_STATION_MAP: { default: `${POI_MAP_PREFIX}/fi/rentalStations/`, }, From 67bc801d56a3f3198352f45500fccb3f13293c9b Mon Sep 17 00:00:00 2001 From: sharhio Date: Thu, 23 May 2024 09:32:29 +0300 Subject: [PATCH 06/11] DT-5452 new no service variable, logic updated --- app/component/map/tile-layer/Stops.js | 5 ++--- app/util/mapIconUtils.js | 19 +++++++++++++------ 2 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index a98234d041..b4231a4712 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -92,9 +92,8 @@ class Stops { if (hasLocalTramRoute) { mode = 'speedtram'; } - const stopOutOfService = !!feature.properties.closedByServiceAlert; - const noRoutesForStop = !routes.length; + const noServiceOnServiceDay = !!feature.properties.noServiceOnServiceDay; drawStopIcon( this.tile, @@ -110,7 +109,7 @@ class Stops { ), this.config.colors.iconColors, stopOutOfService, - noRoutesForStop, + noServiceOnServiceDay, ); } } diff --git a/app/util/mapIconUtils.js b/app/util/mapIconUtils.js index e702a9ce7a..8204ca6d2c 100644 --- a/app/util/mapIconUtils.js +++ b/app/util/mapIconUtils.js @@ -372,14 +372,14 @@ function drawStopStatusBadge( y, iconWidth, stopOutOfService, - noRoutesForStop, + noServiceOnServiceDay, ) { const badgeSize = iconWidth * 0.75; // badge size is 75% of the icon size const badgeImageId = stopOutOfService - ? `icon-icon_stop-temporarily-closed-badge` - : `icon-icon_stop-closed-badge`; + ? `icon-icon_stop-closed-badge` + : `icon-icon_stop-temporarily-closed-badge`; - if (noRoutesForStop || stopOutOfService) { + if (noServiceOnServiceDay || stopOutOfService) { getImageFromSpriteCache(badgeImageId, badgeSize, badgeSize).then( badgeImage => { drawTopRightCornerIconBadge( @@ -415,7 +415,7 @@ export function drawStopIcon( isFerryTerminal, modeIconColors, stopOutOfService, - noRoutesForStop, + noServiceOnServiceDay, ) { if (type === 'SUBWAY') { return; @@ -464,7 +464,14 @@ export function drawStopIcon( color, ).then(image => { tile.ctx.drawImage(image, x, y); - drawStopStatusBadge(tile, x, y, width, stopOutOfService, noRoutesForStop); + drawStopStatusBadge( + tile, + x, + y, + width, + stopOutOfService, + noServiceOnServiceDay, + ); if (drawNumber && platformNumber) { x += radius; y += radius; From 11e964b3ebf778359d7e0fd656acfe43b4187ef3 Mon Sep 17 00:00:00 2001 From: sharhio Date: Thu, 23 May 2024 14:48:07 +0300 Subject: [PATCH 07/11] DT-5452 otp returns a positive value --- app/component/map/tile-layer/Stops.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index b4231a4712..a154ca9a2f 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -93,7 +93,8 @@ class Stops { mode = 'speedtram'; } const stopOutOfService = !!feature.properties.closedByServiceAlert; - const noServiceOnServiceDay = !!feature.properties.noServiceOnServiceDay; + const noServiceOnServiceDay = + !feature.properties.servicesRunningOnServiceDay; drawStopIcon( this.tile, From 5cd778e546838e4b832ff06fb9ca41a30e4ed11d Mon Sep 17 00:00:00 2001 From: sharhio Date: Mon, 27 May 2024 10:28:01 +0300 Subject: [PATCH 08/11] DT-5452 serviceDate instead of day --- app/component/map/tile-layer/Stops.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index a154ca9a2f..2ff1afce79 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -94,7 +94,7 @@ class Stops { } const stopOutOfService = !!feature.properties.closedByServiceAlert; const noServiceOnServiceDay = - !feature.properties.servicesRunningOnServiceDay; + !feature.properties.servicesRunningOnServiceDate; drawStopIcon( this.tile, From 82012264785037f88ef0543123827ba1d6bf5ac4 Mon Sep 17 00:00:00 2001 From: sharhio Date: Mon, 10 Jun 2024 11:19:11 +0300 Subject: [PATCH 09/11] DT-5452 undefined services running variable is false --- app/component/map/tile-layer/Stops.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index 2ff1afce79..390cdf5fab 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -94,7 +94,9 @@ class Stops { } const stopOutOfService = !!feature.properties.closedByServiceAlert; const noServiceOnServiceDay = - !feature.properties.servicesRunningOnServiceDate; + feature.properties.servicesRunningOnServiceDate === undefined + ? false + : !feature.properties.servicesRunningOnServiceDate; drawStopIcon( this.tile, From 6be84ab0e14c3d0efb49a1103a7368bb287cf612 Mon Sep 17 00:00:00 2001 From: sharhio Date: Mon, 10 Jun 2024 15:57:26 +0300 Subject: [PATCH 10/11] DT-5452 fetch single highlighted stop details separately --- app/component/map/tile-layer/Stops.js | 100 +++++++++++++++++++++----- 1 file changed, 83 insertions(+), 17 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index 390cdf5fab..aa0e14e9de 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -1,13 +1,15 @@ import { VectorTile } from '@mapbox/vector-tile'; import Protobuf from 'pbf'; import pick from 'lodash/pick'; +import { graphql, fetchQuery } from 'react-relay'; +import moment from 'moment'; import { drawTerminalIcon, drawStopIcon, drawHybridStopIcon, drawHybridStationIcon, } from '../../../util/mapIconUtils'; -import { ExtendedRouteTypes } from '../../../constants'; +import { ExtendedRouteTypes, DATE_FORMAT } from '../../../constants'; import { isFeatureLayerEnabled, getLayerBaseUrl, @@ -15,6 +17,22 @@ import { import { PREFIX_ITINERARY_SUMMARY, PREFIX_ROUTES } from '../../../util/path'; import { fetchWithLanguageAndSubscription } from '../../../util/fetchUtils'; +const stopAlertsQuery = graphql` + query StopsQuery($stopId: String!, $date: String!) { + stop: stop(id: $stopId) { + gtfsId + alerts: alerts(types: [STOP]) { + alertEffect + } + stoptimes: stoptimesForServiceDate(date: $date, omitCanceled: false) { + stoptimes { + serviceDay + } + } + } + } +`; + function isNull(val) { return val === 'null' || val === undefined || val === null; } @@ -98,22 +116,27 @@ class Stops { ? false : !feature.properties.servicesRunningOnServiceDate; - drawStopIcon( - this.tile, - feature.geom, - mode, - !isNull(feature.properties.platform) - ? feature.properties.platform - : false, - isHilighted, - !!( - feature.properties.type === 'FERRY' && - !isNull(feature.properties.code) - ), - this.config.colors.iconColors, - stopOutOfService, - noServiceOnServiceDay, - ); + if (isHilighted && zoom <= minZoom) { + // Fetch stop details only when stop is highlighted and realtime layer is not used (zoom level) + this.drawHighlighted(feature, mode, isHilighted); + } else { + drawStopIcon( + this.tile, + feature.geom, + mode, + !isNull(feature.properties.platform) + ? feature.properties.platform + : false, + isHilighted, + !!( + feature.properties.type === 'FERRY' && + !isNull(feature.properties.code) + ), + this.config.colors.iconColors, + stopOutOfService, + noServiceOnServiceDay, + ); + } } } @@ -316,6 +339,49 @@ class Stops { ); }); } + + drawHighlighted = (feature, mode, isHilighted) => { + const date = moment().format(DATE_FORMAT); + const callback = ({ stop: result }) => { + if (result) { + const noServiceAlert = result.alerts.find( + alert => alert.alertEffect === 'NO_SERVICE', + ); + const serviceOnServiceDay = result.stoptimes.find( + stoptimes => stoptimes.stoptimes.length > 0, + ); + const stopOutOfService = noServiceAlert !== undefined; + const noServiceOnServiceDay = serviceOnServiceDay === undefined; + + drawStopIcon( + this.tile, + feature.geom, + mode, + !isNull(feature.properties.platform) + ? feature.properties.platform + : false, + isHilighted, + !!( + feature.properties.type === 'FERRY' && + !isNull(feature.properties.code) + ), + this.config.colors.iconColors, + stopOutOfService, + noServiceOnServiceDay, + ); + } + return this; + }; + + fetchQuery( + this.relayEnvironment, + stopAlertsQuery, + { stopId: feature.properties.gtfsId, date }, + { force: true }, + ) + .toPromise() + .then(callback); + }; } export default Stops; From 59f17a3d7b5137932db5042695f82f561a42cd94 Mon Sep 17 00:00:00 2001 From: sharhio Date: Mon, 10 Jun 2024 16:22:42 +0300 Subject: [PATCH 11/11] DT-5452 simplified --- app/component/map/tile-layer/Stops.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/app/component/map/tile-layer/Stops.js b/app/component/map/tile-layer/Stops.js index aa0e14e9de..12c0bc5b87 100644 --- a/app/component/map/tile-layer/Stops.js +++ b/app/component/map/tile-layer/Stops.js @@ -344,14 +344,12 @@ class Stops { const date = moment().format(DATE_FORMAT); const callback = ({ stop: result }) => { if (result) { - const noServiceAlert = result.alerts.find( + const stopOutOfService = result.alerts.some( alert => alert.alertEffect === 'NO_SERVICE', ); - const serviceOnServiceDay = result.stoptimes.find( + const noServiceOnServiceDay = !result.stoptimes.some( stoptimes => stoptimes.stoptimes.length > 0, ); - const stopOutOfService = noServiceAlert !== undefined; - const noServiceOnServiceDay = serviceOnServiceDay === undefined; drawStopIcon( this.tile,