mobility-toolbox-js 2.0.0-beta.1 → 2.0.0

package/common/mixins/TralisLayerMixin.js

@@ -3,12 +3,25 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable class-methods-use-this */
 /* eslint-disable max-classes-per-file */
+import qs from 'query-string';
+import { buffer, containsCoordinate, intersects } from 'ol/extent';
+import { unByKey } from 'ol/Observable';
 import GeoJSON from 'ol/format/GeoJSON';
 import Point from 'ol/geom/Point';
-import { intersects } from 'ol/extent';
+import debounce from 'lodash.debounce';
+import throttle from 'lodash.throttle';
 import { fromLonLat } from 'ol/proj';
+import Tracker from '../Tracker';
+import { timeSteps } from '../trackerConfig';
+import createFilters from '../utils/createTrackerFilters';
+import trackerDefaultStyle from '../styles/trackerDefaultStyle';
 import { TralisAPI, TralisModes } from '../../api';
 
+/* Permalink parameter used to filters vehicles */
+const LINE_FILTER = 'publishedlinename';
+const ROUTE_FILTER = 'tripnumber';
+const OPERATOR_FILTER = 'operator';
+
 /**
  * TralisLayerInterface.
  */
@@ -38,6 +51,16 @@ export class TralisLayerInterface {
    */
   terminate() {}
 
+  /**
+   * Start the clock.
+   */
+  start() {}
+
+  /**
+   * Stop the clock.
+   */
+  stop() {}
+
   /**
    * Set the Tralis api's bbox.
    *
@@ -61,28 +84,20 @@ export class TralisLayerInterface {
    * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
    */
   getTrajectoryInfos(id, mode) {}
-
-  /**
-   * Define the style of the vehicle.
-   * Draw a blue circle with the id of the props parameter.
-   *
-   * @param {TralisTrajectory} trajectory  A trajectory
-   * @param {ViewState} viewState Map's view state (zoom, resolution, center, ...)
-   */
-  defaultStyle(trajectory, viewState) {}
 }
 
 /**
  * Mixin for TralisLayerInterface.
  *
- * @param {TrackerLayer} TrackerLayer A {TrackerLayer} class to extend with {TrajservLayerInterface} functionnalities.
+ * @param {Class} Base A class to extend with {TralisLayerInterface} functionnalities.
  * @return {Class}  A class that implements {TralisLayerInterface} class and extends Base;
  * @private
  */
-const TralisLayerMixin = (TrackerLayer) =>
-  class extends TrackerLayer {
+const TralisLayerMixin = (Base) =>
+  class extends Base {
     constructor(options = {}) {
-      super({ ...options });
+      super({ hitTolerance: 10, ...options });
+
       this.debug = options.debug;
       this.mode = options.mode || TralisModes.TOPOGRAPHIC;
       this.api = options.api || new TralisAPI(options);
@@ -110,7 +125,24 @@ const TralisLayerMixin = (TrackerLayer) =>
       // This property will call api.setBbox on each movend event
       this.isUpdateBboxOnMoveEnd = options.isUpdateBboxOnMoveEnd !== false;
 
+      // Define throttling nad debounce render function
+      this.throttleRenderTrajectories = throttle(
+        this.renderTrajectoriesInternal,
+        50,
+        { leading: false, trailing: true },
+      );
+
+      this.debounceRenderTrajectories = debounce(
+        this.renderTrajectoriesInternal,
+        50,
+        { leading: true, trailing: true, maxWait: 5000 },
+      );
+
       // Bind callbacks
+      this.onFeatureHover = this.onFeatureHover.bind(this);
+      this.onFeatureClick = this.onFeatureClick.bind(this);
+      this.renderTrajectoriesInternal =
+        this.renderTrajectoriesInternal.bind(this);
       this.onTrajectoryMessage = this.onTrajectoryMessage.bind(this);
       this.onDeleteTrajectoryMessage =
         this.onDeleteTrajectoryMessage.bind(this);
@@ -118,9 +150,268 @@ const TralisLayerMixin = (TrackerLayer) =>
         this.onDocumentVisibilityChange.bind(this);
     }
 
+    /**
+     * Define layer's properties.
+     *
+     * @ignore
+     */
+    defineProperties(options) {
+      // Tracker options use to build the tracker.
+      let { regexPublishedLineName, publishedLineName, tripNumber, operator } =
+        options;
+      const {
+        style,
+        speed,
+        pixelRatio,
+        hoverVehicleId,
+        selectedVehicleId,
+        filter,
+        sort,
+        time,
+        live,
+      } = options;
+
+      const initTrackerOptions = {
+        style,
+      };
+
+      Object.keys(initTrackerOptions).forEach(
+        (key) =>
+          initTrackerOptions[key] === undefined &&
+          delete initTrackerOptions[key],
+      );
+
+      let currSpeed = speed || 1;
+      let currTime = time || new Date();
+
+      super.defineProperties(options);
+
+      Object.defineProperties(this, {
+        isTrackerLayer: { value: true },
+
+        /**
+         * Style function used to render a vehicle.
+         */
+        style: {
+          value: (trajectory, viewState) =>
+            (style || trackerDefaultStyle)(trajectory, viewState, this),
+        },
+
+        /**
+         * Speed of the wheel of time.
+         * If live property is true. The speed is ignored.
+         */
+        speed: {
+          get: () => currSpeed,
+          set: (newSpeed) => {
+            currSpeed = newSpeed;
+            this.start();
+          },
+        },
+
+        /**
+         * Function to filter which vehicles to display.
+         */
+        filter: {
+          value: filter,
+          writable: true,
+        },
+
+        /**
+         * Function to sort the vehicles to display.
+         */
+        sort: {
+          value: sort,
+          writable: true,
+        },
+
+        /**
+         * The tracker that renders the trajectories.
+         */
+        tracker: { value: null, writable: true },
+
+        /**
+         * Canvas cache object for trajectories drawn.
+         */
+        styleCache: { value: {} },
+
+        /**
+         * If true. The layer will always use Date.now() on the next tick to render the trajectories.
+         * When true, setting the time property has no effect.
+         */
+        live: {
+          value: live === false ? live : true,
+          writable: true,
+        },
+
+        /**
+         * Time used to display the trajectories. Can be a Date or a number in ms representing a Date.
+         * If live property is true. The setter does nothing.
+         */
+        time: {
+          get: () => currTime,
+          set: (newTime) => {
+            currTime = newTime && newTime.getTime ? newTime : new Date(newTime);
+            this.renderTrajectories();
+          },
+        },
+
+        /**
+         * Keep track of which trajectories are stored.
+         */
+        trajectories: {
+          value: {},
+          writable: true,
+        },
+
+        /**
+         * Keep track of which trajectories are currently drawn.
+         */
+        renderedTrajectories: {
+          get: () => (this.tracker && this.tracker.renderedTrajectories) || [],
+        },
+
+        /**
+         * Id of the hovered vehicle.
+         */
+        hoverVehicleId: {
+          value: hoverVehicleId,
+          writable: true,
+        },
+
+        /**
+         * Id of the selected vehicle.
+         */
+        selectedVehicleId: {
+          value: selectedVehicleId,
+          writable: true,
+        },
+
+        /**
+         * Id of the selected vehicle.
+         */
+        pixelRatio: {
+          value:
+            pixelRatio ||
+            (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
+          writable: true,
+        },
+
+        /**
+         * Options used by the constructor of the Tracker class.
+         */
+        initTrackerOptions: {
+          value: initTrackerOptions,
+          writable: false,
+        },
+
+        /**
+         * If true, encapsulates the renderTrajectories calls in a requestAnimationFrame.
+         */
+        useRequestAnimationFrame: {
+          value: options.useRequestAnimationFrame || false,
+          writable: true,
+        },
+
+        /**
+         * If true, encapsulates the renderTrajectories calls in a throttle function. Default to true.
+         */
+        useThrottle: {
+          value: options.useThrottle || true,
+          writable: true,
+        },
+
+        /**
+         * If true, encapsulates the renderTrajectories calls in a debounce function.
+         */
+        useDebounce: {
+          value: options.useDebounce || false,
+          writable: true,
+        },
+
+        /**
+         * Filter properties used in combination with permalink parameters.
+         */
+        publishedLineName: {
+          get: () => publishedLineName,
+          set: (newPublishedLineName) => {
+            publishedLineName = newPublishedLineName;
+            this.updateFilters();
+          },
+        },
+        tripNumber: {
+          get: () => tripNumber,
+          set: (newTripNumber) => {
+            tripNumber = newTripNumber;
+            this.updateFilters();
+          },
+        },
+        operator: {
+          get: () => operator,
+          set: (newOperator) => {
+            operator = newOperator;
+            this.updateFilters();
+          },
+        },
+        regexPublishedLineName: {
+          get: () => regexPublishedLineName,
+          set: (newRegex) => {
+            regexPublishedLineName = newRegex;
+            this.updateFilters();
+          },
+        },
+
+        /**
+         * Style properties.
+         */
+        delayDisplay: {
+          value: options.delayDisplay || 300000,
+          writable: true,
+        },
+        delayOutlineColor: {
+          value: options.delayOutlineColor || '#000000',
+          writable: true,
+        },
+
+        /**
+         * Debug properties.
+         */
+        // Not used anymore, but could be useful for debugging.
+        // showVehicleTraj: {
+        //   value:
+        //     options.showVehicleTraj !== undefined
+        //       ? options.showVehicleTraj
+        //       : true,
+        //   writable: true,
+        // },
+      });
+
+      // Update filter function based on convenient properties
+      this.updateFilters();
+    }
+
     init(map) {
       super.init(map);
 
+      this.tracker = new Tracker({
+        style: (...args) => this.style(...args),
+        ...this.initTrackerOptions,
+      });
+
+      // If the layer is visible we start  the rendering clock
+      if (this.visible) {
+        this.start();
+      }
+
+      // On change of visibility we start/stop the rendering clock
+      this.visibilityRef = this.on('change:visible', (evt) => {
+        if (evt.target.visible) {
+          this.start();
+        } else {
+          this.stop();
+        }
+      });
+
       // To avoid browser hanging when the tab is not visible for a certain amount of time,
       // We stop the rendering and the websocket when hide and start again when show.
       document.addEventListener(
@@ -134,11 +425,31 @@ const TralisLayerMixin = (TrackerLayer) =>
         'visibilitychange',
         this.onDocumentVisibilityChange,
       );
+
+      this.stop();
+      unByKey(this.visibilityRef);
+      if (this.tracker) {
+        const { canvas } = this.tracker;
+        const context = canvas.getContext('2d');
+        context.clearRect(0, 0, canvas.width, canvas.height);
+        this.tracker = null;
+      }
       super.terminate();
     }
 
     start() {
-      super.start();
+      this.stop();
+      this.renderTrajectories();
+      this.startUpdateTime();
+
+      if (this.isClickActive) {
+        this.onClick(this.onFeatureClick);
+      }
+
+      if (this.isHoverActive) {
+        this.onHover(this.onFeatureHover);
+      }
+
       this.api.open();
       this.api.subscribeTrajectory(
         this.mode,
@@ -157,13 +468,119 @@ const TralisLayerMixin = (TrackerLayer) =>
       }
     }
 
+    /**
+     * Start the clock.
+     * @private
+     */
+    startUpdateTime() {
+      this.stopUpdateTime();
+      this.updateTimeDelay = this.getRefreshTimeInMs();
+      this.updateTimeInterval = setInterval(() => {
+        // When live=true, we update the time with new Date();
+        this.time = this.live
+          ? new Date()
+          : this.time.getTime() + this.updateTimeDelay * this.speed;
+      }, this.updateTimeDelay);
+    }
+
     stop() {
-      super.stop();
       this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
       this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
       this.api.close();
     }
 
+    /**
+     * Stop the clock.
+     * @private
+     */
+    stopUpdateTime() {
+      if (this.updateTimeInterval) {
+        clearInterval(this.updateTimeInterval);
+      }
+    }
+
+    /**
+     * Launch renderTrajectories. it avoids duplicating code in renderTrajectories method.
+     *
+     * @param {object} viewState The view state of the map.
+     * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+     * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+     * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+     * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+     * @param {number} viewState.resolution Resolution of the map to render.
+     * @param {boolean} noInterpolate If true trajectories are not interpolated but
+     *   drawn at the last known coordinate. Use this for performance optimization
+     *   during map navigation.
+     * @private
+     */
+    renderTrajectoriesInternal(viewState, noInterpolate) {
+      if (!this.tracker) {
+        return false;
+      }
+
+      const time = this.live ? Date.now() : this.time;
+
+      const trajectories = Object.values(this.trajectories);
+
+      // console.time('sort');
+      if (this.sort) {
+        trajectories.sort(this.sort);
+      }
+      // console.timeEnd('sort');
+
+      // console.time('render');
+      this.renderState = this.tracker.renderTrajectories(
+        trajectories,
+        { ...viewState, pixelRatio: this.pixelRatio, time },
+        {
+          noInterpolate:
+            viewState.zoom < this.minZoomInterpolation ? true : noInterpolate,
+          hoverVehicleId: this.hoverVehicleId,
+          selectedVehicleId: this.selectedVehicleId,
+          iconScale: this.iconScale,
+          delayDisplay: this.delayDisplay,
+          delayOutlineColor: this.delayOutlineColor,
+        },
+      );
+
+      // console.timeEnd('render');
+      return true;
+    }
+
+    /**
+     * Render the trajectories requesting an animation frame and cancelling the previous one.
+     * This function must be overrided by children to provide the correct parameters.
+     *
+     * @param {object} viewState The view state of the map.
+     * @param {number[2]} viewState.center Center coordinate of the map in mercator coordinate.
+     * @param {number[4]} viewState.extent Extent of the map in mercator coordinates.
+     * @param {number[2]} viewState.size Size ([width, height]) of the canvas to render.
+     * @param {number} [viewState.rotation = 0] Rotation of the map to render.
+     * @param {number} viewState.resolution Resolution of the map to render.
+     * @param {boolean} noInterpolate If true trajectories are not interpolated but
+     *   drawn at the last known coordinate. Use this for performance optimization
+     *   during map navigation.
+     * @private
+     */
+    renderTrajectories(viewState, noInterpolate) {
+      if (this.requestId) {
+        cancelAnimationFrame(this.requestId);
+        this.requestId = null;
+      }
+
+      if (!noInterpolate && this.useRequestAnimationFrame) {
+        this.requestId = requestAnimationFrame(() => {
+          this.renderTrajectoriesInternal(viewState, noInterpolate);
+        });
+      } else if (!noInterpolate && this.useDebounce) {
+        this.debounceRenderTrajectories(viewState, noInterpolate);
+      } else if (!noInterpolate && this.useThrottle) {
+        this.throttleRenderTrajectories(viewState, noInterpolate);
+      } else {
+        this.renderTrajectoriesInternal(viewState, noInterpolate);
+      }
+    }
+
     setBbox(extent, zoom) {
       // Clean trajectories before sending the new bbox
       // Purge trajectories:
@@ -210,6 +627,88 @@ const TralisLayerMixin = (TrackerLayer) =>
       );
     }
 
+    /**
+     * Get the duration before the next update depending on zoom level.
+     *
+     * @private
+     * @param {number} zoom
+     */
+    getRefreshTimeInMs(zoom) {
+      const roundedZoom = Math.round(zoom);
+      const timeStep = timeSteps[roundedZoom] || 25;
+      const nextTick = Math.max(25, timeStep / this.speed);
+      const nextThrottleTick = Math.min(nextTick, 500);
+      // TODO: see if this should go elsewhere.
+      if (this.useThrottle) {
+        this.throttleRenderTrajectories = throttle(
+          this.renderTrajectoriesInternal,
+          nextThrottleTick,
+          { leading: true, trailing: true },
+        );
+      } else if (this.useDebounce) {
+        this.debounceRenderTrajectories = debounce(
+          this.renderTrajectoriesInternal,
+          nextThrottleTick,
+          { leading: true, trailing: true, maxWait: 5000 },
+        );
+      }
+      if (this.api?.buffer) {
+        const [, size] = this.api.buffer;
+        this.api.buffer = [nextThrottleTick, size];
+      }
+      return nextTick;
+    }
+
+    /**
+     * Get vehicle.
+     * @param {function} filterFc A function use to filter results.
+     * @return {Array<Object>} Array of vehicle.
+     */
+    getVehicle(filterFc) {
+      return Object.values(this.trajectories).filter(filterFc);
+    }
+
+    /**
+     * Request feature information for a given coordinate.
+     *
+     * @param {ol/coordinate~Coordinate} coordinate Coordinate.
+     * @param {Object} options Options See child classes to see which options are supported.
+     * @param {number} [options.resolution=1] The resolution of the map.
+     * @param {number} [options.nb=Infinity] The max number of vehicles to return.
+     * @return {Promise<FeatureInfo>} Promise with features, layer and coordinate.
+     */
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+      const { resolution, nb } = options;
+      const ext = buffer(
+        [...coordinate, ...coordinate],
+        this.hitTolerance * resolution,
+      );
+      let trajectories = Object.values(this.trajectories);
+
+      if (this.sort) {
+        trajectories = trajectories.sort(this.sort);
+      }
+
+      const vehicles = [];
+      for (let i = 0; i < trajectories.length; i += 1) {
+        if (
+          trajectories[i].properties.coordinate &&
+          containsCoordinate(ext, trajectories[i].properties.coordinate)
+        ) {
+          vehicles.push(trajectories[i]);
+        }
+        if (vehicles.length === nb) {
+          break;
+        }
+      }
+
+      return Promise.resolve({
+        layer: this,
+        features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
+        coordinate,
+      });
+    }
+
     /**
      * Request the stopSequence and the fullTrajectory informations for a vehicle.
      *
@@ -274,9 +773,17 @@ const TralisLayerMixin = (TrackerLayer) =>
       delete this.trajectories[id];
     }
 
-    // getRefreshTimeInMs() {
-    //   return 5000;
-    // }
+    /**
+     * On zoomend we adjust the time interval of the update of vehicles positions.
+     *
+     * @param evt Event that triggered the function.
+     * @private
+     */
+    // eslint-disable-next-line no-unused-vars
+    onZoomEnd(evt) {
+      this.startUpdateTime();
+    }
+
     onDocumentVisibilityChange() {
       if (!this.visible) {
         return;
@@ -373,7 +880,6 @@ const TralisLayerMixin = (TrackerLayer) =>
         this.hoverVehicleId = id;
         this.renderTrajectories(true);
       }
-      super.onFeatureHover(features, layer, coordinate);
     }
 
     /**
@@ -395,7 +901,29 @@ const TralisLayerMixin = (TrackerLayer) =>
         this.selectedVehicle = feature;
         this.renderTrajectories(true);
       }
-      super.onFeatureClick(features, layer, coordinate);
+    }
+
+    /**
+     * 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());
+      const publishedName = this.publishedLineName || parameters[LINE_FILTER];
+      const tripNumber = this.tripNumber || parameters[ROUTE_FILTER];
+      const operator = this.operator || parameters[OPERATOR_FILTER];
+      const { regexPublishedLineName } = this;
+
+      // Only overrides filter function if one of this property exists.
+      if (publishedName || tripNumber || operator || regexPublishedLineName) {
+        // filter is the property in TrackerLayerMixin.
+        this.filter = createFilters(
+          publishedName,
+          tripNumber,
+          operator,
+          regexPublishedLineName,
+        );
+      }
     }
   };
 

package/common/styles/index.js

@@ -0,0 +1,4 @@
+export { default as trackerDefaultStyle } from './trackerDefaultStyle';
+export { default as trackerDelayStyle } from './trackerDelayStyle';
+export * from './trackerDefaultStyle';
+export { default as trackerSimpleStyle } from './trackerSimpleStyle';

package/common/{utils/delayTrackerStyle.js → styles/trackerDefaultStyle.js}

@@ -158,24 +158,24 @@ const style = (trajectory, viewState, options) => {
   } = options;
 
   const { zoom, pixelRatio } = viewState;
-  let { line, type } = trajectory.properties;
+  let { type, cancelled } = trajectory.properties;
   const {
     train_id: id,
+    line,
     delay,
-    cancelled = false,
+    state,
     operator_provides_realtime_journey: operatorProvidesRealtime,
   } = trajectory.properties;
+  let { name, text_color: textColor, color } = line || {};
+
+  // In the future, the cancelled property will be removed we still managed it
+  // until the backend change is on prod.
+  cancelled = cancelled === true || state === 'JOURNEY_CANCELLED';
 
   if (!type) {
     type = 'Rail';
   }
 
-  if (!line) {
-    line = {};
-  }
-
-  let { name, text_color: textColor, color } = line;
-
   if (!name) {
     name = 'I';
   }