mobility-toolbox-js 1.6.0-beta.4 → 1.6.0-beta.8

package/api/tralis/TralisAPI.js

@@ -75,7 +75,7 @@ class TralisAPI {
     /** @ignore */
     this.prefix = options.prefix || '';
 
-    this.isUpdateBboxOnMoveEnd = options.isUpateBboxOnMoveEnd || false;
+    this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd || false;
 
     /** @ignore */
     this.conn = new WebSocketConnector(wsUrl);

package/api/tralis/WebSocketConnector.js

@@ -11,8 +11,8 @@ class WebSocketConnector {
     this.subscriptions = [];
     this.connect(url);
 
-    this.isSUBAllow = true;
-    this.isDELAllow = true;
+    this.isSUBAllow = false;
+    this.isDELAllow = false;
 
     // keep websocket alive
     setInterval(() => {
@@ -55,13 +55,13 @@ class WebSocketConnector {
     //   this.setProjection(this.currentProj);
     // }
 
-    // [...this.subscriptions].forEach((s) => {
-    //   this.subscribe(s.params, s.cb, s.errorCb, s.quiet);
-    // });
+    [...this.subscriptions].forEach((s) => {
+      this.subscribe(s.params, s.cb, s.errorCb, s.quiet);
+    });
 
-    // if (this.currentBbox) {
-    //   this.setBbox(this.currentBbox);
-    // }
+    if (this.currentBbox) {
+      this.setBbox(this.currentBbox);
+    }
 
     // reconnect on close
     this.websocket.onclose = () => {

package/common/layers/Layer.js

@@ -13,7 +13,9 @@ import { v4 as uuid } from 'uuid';
  * @classproperty {string} key - Identifier of the layer. Must be unique.
  * @classproperty {string[]} copyrights - Array of copyrights.
  * @classproperty {boolean} isBaseLayer - Define if the layer is a base layer. Read-only.
- * @classproperty {boolean} isQueryable - Define if the layer can be queried. Read-only.
+ * @classproperty {boolean} isQueryable - Define if the layer can be queried. If false, it will set isHoverActive and isClickActive to false. Read-only.
+ * @classproperty {boolean} isClickActive - If true feature information will be queried on user click event. See inherited layers for more informations. Read-only.
+ * @classproperty {boolean} isHoverActive - If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
  * @classproperty {boolean} isReactSpatialLayer - Custom property for duck typing since `instanceof` is not working when the instance was created on different bundles. Read-only.
  * @classproperty {Layer[]} children - List of children.
  * @classproperty {boolean} visible - Define if the layer is visible or not.
@@ -33,9 +35,9 @@ export default class Layer extends Observable {
    * @param {Object} [options.properties={}] Application-specific layer properties.
    * @param {boolean} [options.visible=true] If true this layer is visible on the map.
    * @param {boolean} [options.isBaseLayer=false] If true this layer is a baseLayer.
-   * @param {boolean} [options.isQueryable=true] If true this layer can be queried.
-   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on click event. See inherited layers for more informations.
-   * @param {boolean} [options.isHoverActive=true] If true feature information will be queried on pointer move event. See inherited layers for more informations.
+   * @param {boolean} [options.isQueryable=true] Define if the layer can be queried. If false, it will also set isHoverActive and isClickActive to false. Read-only.
+   * @param {boolean} [options.isClickActive=true] If true feature information will be queried on click event. See inherited layers for more informations. Read-only.
+   * @param {boolean} [options.isHoverActive=true] If true feature information will be queried on pointer move event. See inherited layers for more informations. Read-only.
    * @param {number} [options.hitTolerance=5] Hit-detection tolerance in css pixels. Pixels inside the radius around the given position will be checked for features.
    */
   constructor(options = {}) {
@@ -109,10 +111,10 @@ export default class Layer extends Observable {
         value: !!isQueryable,
       },
       isClickActive: {
-        value: !!isClickActive,
+        value: !!isQueryable && !!isClickActive,
       },
       isHoverActive: {
-        value: !!isHoverActive,
+        value: !!isQueryable && !!isHoverActive,
       },
       hitTolerance: {
         value: hitTolerance || 5,
@@ -307,6 +309,7 @@ export default class Layer extends Observable {
     // eslint-disable-next-line no-console
     console.error(
       'getFeatureInfoAtCoordinate must be implemented by inheriting layers',
+      this.key,
     );
 
     // This layer returns no feature info.
@@ -427,7 +430,7 @@ export default class Layer extends Observable {
       .then((featureInfo) => {
         const { features, layer, coordinate } = featureInfo;
         this.hoverCallbacks.forEach((callback) =>
-          callback({ features, layer, coordinate }),
+          callback(features, layer, coordinate),
         );
         return featureInfo;
       })

package/common/layers/Layer.test.js

@@ -63,6 +63,21 @@ describe('Layer', () => {
     expect(layer.name).toEqual('Layer');
   });
 
+  test('should set isClickActive and isHoverActive to false if isQueryable is set to false.', () => {
+    const options = {
+      name: 'Layer',
+      isQueryable: false,
+      isClickActive: true,
+      isHoverActive: true,
+      olLayer,
+    };
+    const layer = new Layer(options);
+    expect(layer).toBeInstanceOf(Layer);
+    expect(layer.isQueryable).toBe(false);
+    expect(layer.isClickActive).toBe(false);
+    expect(layer.isHoverActive).toBe(false);
+  });
+
   test('should called terminate on initialization.', () => {
     const layer = new Layer({ name: 'Layer', olLayer });
     const spy = jest.spyOn(layer, 'terminate');
@@ -465,7 +480,13 @@ describe('Layer', () => {
         expect(spy).toHaveBeenCalledWith(evt.coordinate);
         expect(featureInfo).toBe(goodFeatureInfo);
         expect(fn).toHaveBeenCalledTimes(1);
+        expect(fn.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         expect(fn2).toHaveBeenCalledTimes(1);
+        expect(fn2.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn2.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn2.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         done();
       });
     });
@@ -599,7 +620,13 @@ describe('Layer', () => {
         expect(spy).toHaveBeenCalledWith(evt.coordinate);
         expect(featureInfo).toBe(goodFeatureInfo);
         expect(fn).toHaveBeenCalledTimes(1);
+        expect(fn.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         expect(fn2).toHaveBeenCalledTimes(1);
+        expect(fn2.mock.calls[0][0]).toBe(goodFeatureInfo.features);
+        expect(fn2.mock.calls[0][1]).toBe(goodFeatureInfo.layer);
+        expect(fn2.mock.calls[0][2]).toBe(goodFeatureInfo.coordinate);
         done();
       });
     });

package/common/mixins/TrackerLayerMixin.js

@@ -3,8 +3,15 @@
 import { buffer, containsCoordinate } from 'ol/extent';
 import { unByKey } from 'ol/Observable';
 import Feature from 'ol/Feature';
+import qs from 'query-string';
 import Tracker from '../Tracker';
 import { timeSteps } from '../trackerConfig';
+import createFilters from '../utils/createTrackerFilters';
+
+/* Permalink parameter used to filters vehicles */
+const LINE_FILTER = 'publishedlinename';
+const ROUTE_FILTER = 'tripnumber';
+const OPERATOR_FILTER = 'operator';
 
 /**
  * TrackerLayerInterface.
@@ -129,6 +136,13 @@ const TrackerLayerMixin = (Base) =>
         live,
       } = options;
 
+      let {
+        regexPublishedLineName,
+        publishedLineName,
+        tripNumber,
+        operator,
+      } = options;
+
       const initTrackerOptions = {
         pixelRatio: pixelRatio || window.devicePixelRatio || 1,
         interpolate,
@@ -314,6 +328,74 @@ const TrackerLayerMixin = (Base) =>
           default: false,
           writable: true,
         },
+
+        /**
+         * Filter properties used in combination with permalink parameters.
+         */
+        publishedLineName: {
+          get: () => {
+            return publishedLineName;
+          },
+          set: (newPublishedLineName) => {
+            publishedLineName = newPublishedLineName;
+            this.updateFilters();
+          },
+        },
+        tripNumber: {
+          get: () => {
+            return tripNumber;
+          },
+          set: (newTripNumber) => {
+            tripNumber = newTripNumber;
+            this.updateFilters();
+          },
+        },
+        operator: {
+          get: () => {
+            return operator;
+          },
+          set: (newOperator) => {
+            operator = newOperator;
+            this.updateFilters();
+          },
+        },
+        regexPublishedLineName: {
+          get: () => {
+            return regexPublishedLineName;
+          },
+          set: (newRegex) => {
+            regexPublishedLineName = newRegex;
+            this.updateFilters();
+          },
+        },
+
+        /**
+         * Style properties.
+         */
+        delayDisplay: {
+          value: options.delayDisplay || 300000,
+          writable: true,
+        },
+        delayOutlineColor: {
+          value: options.delayOutlineColor || '#000000',
+          writable: true,
+        },
+        useDelayStyle: {
+          value: options.useDelayStyle || false,
+          writable: true,
+        },
+
+        /**
+         * Debug properties.
+         */
+        // Not used anymore, but could be useful for debugging.
+        // showVehicleTraj: {
+        //   value:
+        //     options.showVehicleTraj !== undefined
+        //       ? options.showVehicleTraj
+        //       : true,
+        //   writable: true,
+        // },
       });
     }
 
@@ -375,6 +457,7 @@ const TrackerLayerMixin = (Base) =>
      */
     start() {
       this.stop();
+      this.updateFilters();
       this.tracker.setVisible(true);
       this.renderTrajectories();
       this.startUpdateTime();
@@ -587,10 +670,25 @@ const TrackerLayerMixin = (Base) =>
       const roundedZoom = Math.round(zoom);
       const timeStep = timeSteps[roundedZoom] || 25;
       const nextTick = Math.max(25, timeStep / this.speed);
-      console.log(`Next render in ${nextTick} ms.`);
+      // console.log(`Next render in ${nextTick} ms.`);
       return nextTick;
     }
 
+    /**
+     * Update filter provided by properties or permalink.
+     */
+    updateFilters() {
+      // Setting filters from the permalink if no values defined by the layer.
+      const parameters = qs.parse(window.location.search.toLowerCase());
+      // filter is the property in TrackerLayerMixin.
+      this.filter = createFilters(
+        this.publishedLineName || parameters[LINE_FILTER],
+        this.tripNumber || parameters[ROUTE_FILTER],
+        this.operator || parameters[OPERATOR_FILTER],
+        this.regexPublishedLineName,
+      );
+    }
+
     /**
      * @private
      */

package/common/mixins/TrajservLayerMixin.js

@@ -101,74 +101,6 @@ export class TrajservLayerInterface {
   defaultStyle(trajectory, viewState) {}
 }
 
-const LINE_FILTER = 'publishedlinename';
-const ROUTE_FILTER = 'tripnumber';
-const OPERATOR_FILTER = 'operator';
-
-/**
- * Create a array of filter functions based on some parameters.
- * @param {string} line
- * @param {string} route
- * @param {string} operator
- * @param {string} regexLine
- * @private
- */
-const createFilters = (line, route, operator, regexLine) => {
-  const filterList = [];
-
-  if (!line && !route && !operator && !regexLine) {
-    return null;
-  }
-
-  if (regexLine) {
-    const regexLineList =
-      typeof regexLine === 'string' ? [regexLine] : regexLine;
-    const lineFilter = (t) =>
-      regexLineList.some((tr) => new RegExp(tr, 'i').test(t.name));
-    filterList.push(lineFilter);
-  }
-
-  if (line) {
-    const lineFiltersList = typeof line === 'string' ? line.split(',') : line;
-    const lineList = lineFiltersList.map((l) =>
-      l.replace(/\s+/g, '').toUpperCase(),
-    );
-    const lineFilter = (l) =>
-      lineList.some((filter) => filter === l.name.toUpperCase());
-    filterList.push(lineFilter);
-  }
-
-  if (route) {
-    const routes = typeof route === 'string' ? route.split(',') : route;
-    const routeList = routes.map((item) => parseInt(item, 10));
-    const routeFilter = (item) => {
-      const routeId = parseInt(item.routeIdentifier.split('.')[0], 10);
-      return routeList.some((id) => id === routeId);
-    };
-    filterList.push(routeFilter);
-  }
-
-  if (operator) {
-    const operatorList = typeof operator === 'string' ? [operator] : operator;
-    const operatorFilter = (t) =>
-      operatorList.some((op) => new RegExp(op, 'i').test(t.operator));
-    filterList.push(operatorFilter);
-  }
-
-  if (!filterList.length) {
-    return null;
-  }
-
-  return (t) => {
-    for (let i = 0; i < filterList.length; i += 1) {
-      if (!filterList[i](t)) {
-        return false;
-      }
-    }
-    return true;
-  };
-};
-
 /**
  * Mixin for TrajservLayerInterface.
  *
@@ -185,12 +117,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
      */
     defineProperties(options) {
       super.defineProperties(options);
-      let {
-        regexPublishedLineName,
-        publishedLineName,
-        tripNumber,
-        operator,
-      } = options;
 
       let requestIntervalSeconds = 3;
       let defaultApi;
@@ -205,25 +131,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
         defaultApi = new TrajservAPI(apiOptions);
       }
       Object.defineProperties(this, {
-        showVehicleTraj: {
-          value:
-            options.showVehicleTraj !== undefined
-              ? options.showVehicleTraj
-              : true,
-          writable: true,
-        },
-        delayDisplay: {
-          value: options.delayDisplay || 300000,
-          writable: true,
-        },
-        delayOutlineColor: {
-          value: options.delayOutlineColor || '#000000',
-          writable: true,
-        },
-        useDelayStyle: {
-          value: options.useDelayStyle || false,
-          writable: true,
-        },
         requestIntervalSeconds: {
           get: () => {
             return requestIntervalSeconds;
@@ -238,42 +145,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
             }
           },
         },
-        publishedLineName: {
-          get: () => {
-            return publishedLineName;
-          },
-          set: (newPublishedLineName) => {
-            publishedLineName = newPublishedLineName;
-            this.updateFilters();
-          },
-        },
-        tripNumber: {
-          get: () => {
-            return tripNumber;
-          },
-          set: (newTripNumber) => {
-            tripNumber = newTripNumber;
-            this.updateFilters();
-          },
-        },
-        operator: {
-          get: () => {
-            return operator;
-          },
-          set: (newOperator) => {
-            operator = newOperator;
-            this.updateFilters();
-          },
-        },
-        regexPublishedLineName: {
-          get: () => {
-            return regexPublishedLineName;
-          },
-          set: (newRegex) => {
-            regexPublishedLineName = newRegex;
-            this.updateFilters();
-          },
-        },
+
         api: {
           value: options.api || defaultApi,
         },
@@ -302,7 +174,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
     }
 
     stop() {
-      this.journeyId = null;
       this.stopUpdateTrajectories();
       this.abortFetchTrajectories();
       super.stop();
@@ -314,10 +185,8 @@ const TrajservLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureHover(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureHover(features, layer, coordinate) {
+      const [feature] = features;
       let id = null;
       if (feature) {
         id = feature.get('id');
@@ -327,7 +196,7 @@ const TrajservLayerMixin = (TrackerLayer) =>
         this.hoverVehicleId = id;
         this.renderTrajectories();
       }
-      super.onFeatureHover(featureInfo);
+      super.onFeatureHover(features, layer, coordinate);
     }
 
     /**
@@ -336,32 +205,78 @@ const TrajservLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('id');
         /** @ignore */
         this.journeyId = feature.get('journeyIdentifier');
-        this.updateTrajectoryStations(this.selectedVehicleId);
+        this.highlightTrajectory();
       } else {
         this.selectedVehicleId = null;
+        this.journeyId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
     }
 
-    updateFilters() {
-      // Setting filters from the permalink if no values defined by the layer.
-      const parameters = qs.parse(window.location.search.toLowerCase());
-      // filter is the property in TrackerLayerMixin.
-      this.filter = createFilters(
-        this.publishedLineName || parameters[LINE_FILTER],
-        this.tripNumber || parameters[ROUTE_FILTER],
-        this.operator || parameters[OPERATOR_FILTER],
-        this.regexPublishedLineName,
-      );
+    /**
+     * Highlight the trajectory of journey.
+     * @private
+     */
+    highlightTrajectory() {
+      const { selectedVehicleId, journeyId } = this;
+      const promises = [
+        // Fetch stations information with a trajectory id.
+        this.api.fetchTrajectoryStations(
+          this.getParams({
+            id: selectedVehicleId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+        // Full trajectory.
+        this.api.fetchTrajectoryById(
+          this.getParams({
+            id: journeyId,
+            time: getUTCTimeString(new Date()),
+          }),
+        ),
+      ];
+
+      Promise.all(promises)
+        .then(([trajStations, fullTraj]) => {
+          const stationsCoords = [];
+          if (trajStations) {
+            trajStations.stations.forEach((station) => {
+              stationsCoords.push(station.coordinates);
+            });
+          }
+
+          if (fullTraj) {
+            const { p: multiLine, t, c: color } = fullTraj;
+            const lineCoords = [];
+            multiLine.forEach((line) => {
+              line.forEach((point) => {
+                lineCoords.push([point.x, point.y]);
+              });
+            });
+
+            const lineColor = color ? `#${color}` : getBgColor(t);
+            // Don't allow white lines, use red instead.
+            const vehiculeColor = /#ffffff/i.test(lineColor)
+              ? '#ff0000'
+              : lineColor;
+
+            this.drawFullTrajectory(
+              stationsCoords,
+              lineCoords,
+              this.useDelayStyle ? '#a0a0a0' : vehiculeColor,
+            );
+          }
+        })
+        .catch(() => {
+          this.drawFullTrajectory();
+        });
     }
 
     abortFetchTrajectories() {
@@ -370,14 +285,6 @@ const TrajservLayerMixin = (TrackerLayer) =>
       }
     }
 
-    updateTrajectoryStations(trajId) {
-      const params = this.getParams({
-        id: trajId,
-        time: getUTCTimeString(new Date()),
-      });
-      return this.api.fetchTrajectoryStations(params);
-    }
-
     getParams(extraParams = {}) {
       // The 5 seconds more are used as a buffer if the request takes too long.
       const requestIntervalInMs = (this.requestIntervalSeconds + 5) * 1000;
@@ -464,6 +371,16 @@ const TrajservLayerMixin = (TrackerLayer) =>
         });
     }
 
+    /**
+     * Draw the trajectory as a line with points for each stop.
+     *
+     * @param {Array} stationsCoords Array of station coordinates in EPSG:4326.
+     * @param {Array<ol/coordinate~Coordinate>} lineCoords A list of coordinates in EPSG:3857.
+     * @param {string} color The color of the line.
+     * @private
+     */
+    drawFullTrajectory(stationsCoords, lineCoords, color) {}
+
     /**
      * Define the style of the vehicle.
      *

package/common/mixins/TralisLayerMixin.js

@@ -128,10 +128,8 @@ const TralisLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureHover(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureHover(features, layer, coordinate) {
+      const [feature] = features;
       let id = null;
       if (feature) {
         id = feature.get('train_id');
@@ -141,7 +139,7 @@ const TralisLayerMixin = (TrackerLayer) =>
         this.hoverVehicleId = id;
         this.renderTrajectories();
       }
-      super.onFeatureHover(featureInfo);
+      super.onFeatureHover(features, layer, coordinate);
     }
 
     /**
@@ -150,23 +148,28 @@ const TralisLayerMixin = (TrackerLayer) =>
      * @private
      * @override
      */
-    onFeatureClick(featureInfo) {
-      const {
-        features: [feature],
-      } = featureInfo;
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
       if (feature) {
         /** @ignore */
         this.selectedVehicleId = feature.get('train_id');
+        this.highlightTrajectory();
       } else {
         this.selectedVehicleId = null;
       }
-      super.onFeatureClick(featureInfo);
+      super.onFeatureClick(features, layer, coordinate);
     }
 
     onMessage(data) {
       if (!data.content) {
         return;
       }
+
+      // Temporary fix to avoid displaying old trains cached .
+      if (data.content.properties.mot) {
+        return;
+      }
+
       const feat = this.format.readFeature(data.content);
 
       feat.set('timeOffset', Date.now() - data.timestamp);
@@ -197,6 +200,38 @@ const TralisLayerMixin = (TrackerLayer) =>
       }
     }
 
+    /**
+     * When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
+     * Then we combine them in one response and send them to inherited layers.
+     *
+     * @private
+     * @override
+     */
+    highlightTrajectory() {
+      // When a vehicle is selected, we request the complete stop sequence and the complete full trajectory.
+      // Then we combine them in one response and send them to inherited layers.
+      const promises = [
+        this.api.getStopSequence(this.selectedVehicleId, this.mode),
+        this.api.getFullTrajectory(this.selectedVehicleId, this.mode),
+      ];
+
+      return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+        console.log(
+          `stopSequence for ${this.selectedVehicleId}:`,
+          stopSequence,
+        );
+        console.log(
+          `fullTrajectory for ${this.selectedVehicleId}:`,
+          fullTrajectory,
+        );
+        const response = {
+          stopSequence,
+          fullTrajectory,
+        };
+        return response;
+      });
+    }
+
     addTrajectory(id, traj, addOnTop) {
       const idx = this.trajectories.findIndex((t) => t.train_id === id);
       const { time_intervals: timeIntervals } = traj;