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

package/{common/mixins/TrackerLayerMixin.js → src/common/mixins/TralisLayerMixin.js}

@@ -1,14 +1,21 @@
+/* eslint-disable no-empty-function */
+/* eslint-disable no-useless-constructor */
+/* eslint-disable no-unused-vars */
 /* eslint-disable class-methods-use-this */
 /* eslint-disable max-classes-per-file */
-import { buffer, containsCoordinate } from 'ol/extent';
-import { unByKey } from 'ol/Observable';
 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 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 { delayTrackerStyle } from '../utils';
+import trackerDefaultStyle from '../styles/trackerDefaultStyle';
+import { TralisAPI, TralisModes } from '../../api';
 
 /* Permalink parameter used to filters vehicles */
 const LINE_FILTER = 'publishedlinename';
@@ -16,34 +23,31 @@ const ROUTE_FILTER = 'tripnumber';
 const OPERATOR_FILTER = 'operator';
 
 /**
- * TrackerLayerInterface.
- *
- * @classproperty {string} hoverVehicleId - Id of the hovered vehicle.
- * @classproperty {string} selectedVehicleId - Id of the selected vehicle.
- * @classproperty {number} pixelRatio - Pixel ratio use to render the trajectories. Default to window.devicePixelRatio.
- * @classproperty {boolean} live - If true, the layer will always use Date.now() to render trajectories. Default to true.
- * @classproperty {boolean} useRequestAnimationFrame - If true, encapsulates the renderTrajectories calls in a requestAnimationFrame. Experimental.
- * @classproperty {boolean} useThrottle - If true, encapsulates the renderTrajectories calls in a throttle function. Experimental.
- * @classproperty {boolean} useDebounce - If true, encapsulates the renderTrajectories calls in a debounce function. Experimental.
- * @classproperty {boolean} isTrackerLayer - Property for duck typing since `instanceof` is not working when the instance was created on different bundles.
- * @classproperty {function} sort - Sort the trajectories.
- * @classproperty {function} style - Style of a trajectory.
- * @classproperty {Date} time - Time used to display the trajectories. The setter manages a Date or a number in ms representing a Date. If `live` property is true. The setter does nothing..
- * @classproperty {FilterFunction} filter - Filter the trajectories.
+ * TralisLayerInterface.
  */
-export class TrackerLayerInterface {
+export class TralisLayerInterface {
+  /*
+   * Constructor
+
+   * @param {Object} options Layer options.
+   * @param {string} options.url Tralis service url.
+   * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/).
+   * @param {boolean} [options.debug=false] Display additional debug informations.
+   * @param {TralisMode} [options.mode=TralisMode.TOPOGRAPHIC] Tralis's Mode.
+   * @param {number} [options.minZoomInterpolation=8] Minimal zoom when trains positions start to be interpolated.
+   * @param {number} [options.minZoomNonTrain=9] Minimal zoom when non trains vehicles are allowed to be displayed.
+   */
+  constructor(options = {}) {}
+
   /**
-   * Initalize the Tracker.
+   * Initialize the layer subscribing to the Tralis api.
+   *
    * @param {ol/Map~Map} map
-   * @param {Object} options
-   * @param {number} [options.width] Canvas's width.
-   * @param {number} [options.height] Canvas's height.
    */
-  // eslint-disable-next-line no-unused-vars
-  init(map, options) {}
+  init(map) {}
 
   /**
-   * Destroy the Tracker.
+   * Terminate the layer unsubscribing to the Tralis api.
    */
   terminate() {}
 
@@ -52,73 +56,76 @@ export class TrackerLayerInterface {
    */
   start() {}
 
-  /**
-   * Start the timeout for the next update.
-   * @private
-   */
-  startUpdateTime() {}
-
   /**
    * Stop the clock.
    */
   stop() {}
 
   /**
-   * Get vehicle.
-   * @param {function} filterFc A function use to filter results.
-   */
-  // eslint-disable-next-line no-unused-vars
-  getVehicle(filterFc) {}
-
-  /**
-   * Returns the list of vehicles which are at the given coordinates.
-   * Returns an empty array when no vehicle is located at the given
-   * coordinates.
+   * Set the Tralis api's bbox.
    *
-   * @param {number[2]} coordinate A coordinate ([x,y]).
-   * @param {number} [resolution=1] The resolution of the map.
-   * @param {number} [nb=Infinity] nb The max number of vehicles to return.
-   * @return {Array<ol/Feature~Feature>} Array of vehicles.
+   * @param {Array<number>} extent  Extent to request, [minX, minY, maxX, maxY, zoom].
+   * @param {number} zoom  Zoom level to request. Must be an integer.
    */
-  // eslint-disable-next-line no-unused-vars
-  getVehiclesAtCoordinate(coordinate, resolution = 1, nb = Infinity) {}
+  setBbox(extent, zoom) {}
 
   /**
-   * Get the duration before the next update depending on zoom level.
-   * @private
-   * @param {number} zoom
+   * Set the Tralis api's mode.
+   *
+   * @param {TralisMode} mode  Tralis mode
    */
-  // eslint-disable-next-line no-unused-vars
-  getRefreshTimeInMs(zoom) {}
+  setMode(mode) {}
 
   /**
-   * Define a default style of vehicles.
-   * Draw a blue circle with the id of the props parameter.
+   * Request the stopSequence and the fullTrajectory informations for a vehicle.
    *
-   * @param {Object} trajectory A trajectory
-   * @param {ViewState} viewState Map's view state (zoom, resolution, center, ...)
-   * @private
+   * @param {string} id The vehicle identifier (the  train_id property).
+   * @param {TralisMode} mode The mode to request. If not defined, the layer´s mode propetrty will be used.
+   * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
    */
-  // eslint-disable-next-line no-unused-vars
-  defaultStyle(trajectory, viewState) {}
+  getTrajectoryInfos(id, mode) {}
 }
 
 /**
- * Mixin for TrackeLayerInterface.
+ * Mixin for TralisLayerInterface.
  *
- * @param {Class} Base  A class to extend with {TrackerLayerInterface} functionnalities.
- * @return {Class}  A class that implements <TrackerLayerInterface> class and extends Base;
+ * @param {Class} Base A class to extend with {TralisLayerInterface} functionnalities.
+ * @return {Class}  A class that implements {TralisLayerInterface} class and extends Base;
  * @private
  */
-const TrackerLayerMixin = (Base) =>
+const TralisLayerMixin = (Base) =>
   class extends Base {
-    constructor(options) {
+    constructor(options = {}) {
       super({ hitTolerance: 10, ...options });
-      this.onFeatureHover = this.onFeatureHover.bind(this);
-      this.onFeatureClick = this.onFeatureClick.bind(this);
-      this.renderTrajectoriesInternal =
-        this.renderTrajectoriesInternal.bind(this);
 
+      this.debug = options.debug;
+      this.mode = options.mode || TralisModes.TOPOGRAPHIC;
+      this.api = options.api || new TralisAPI(options);
+      this.tenant = options.tenant || ''; // sbb,sbh or sbm
+      this.minZoomNonTrain = options.minZoomNonTrain || 9; // Min zoom level from which non trains are allowed to be displayed. Min value is 9 (as configured by the server
+      this.minZoomInterpolation = options.minZoomInterpolation || 8; // Min zoom level from which trains positions are not interpolated.
+      this.format = new GeoJSON();
+      this.generalizationLevelByZoom = options.generalizationLevelByZoom || {
+        0: 5,
+        1: 5,
+        2: 5,
+        3: 5,
+        4: 5,
+        5: 5,
+        6: 5,
+        7: 5,
+        8: 10,
+        9: 30,
+        10: 30,
+        11: 100,
+        12: 100,
+        13: 100,
+      };
+
+      // 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,
@@ -130,6 +137,17 @@ const TrackerLayerMixin = (Base) =>
         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);
+      this.onDocumentVisibilityChange =
+        this.onDocumentVisibilityChange.bind(this);
     }
 
     /**
@@ -175,7 +193,8 @@ const TrackerLayerMixin = (Base) =>
          * Style function used to render a vehicle.
          */
         style: {
-          value: style || this.defaultStyle,
+          value: (trajectory, viewState) =>
+            (style || trackerDefaultStyle)(trajectory, viewState, this),
         },
 
         /**
@@ -272,7 +291,9 @@ const TrackerLayerMixin = (Base) =>
          * Id of the selected vehicle.
          */
         pixelRatio: {
-          value: pixelRatio || window.devicePixelRatio || 1,
+          value:
+            pixelRatio ||
+            (typeof window !== 'undefined' ? window.devicePixelRatio : 1),
           writable: true,
         },
 
@@ -351,10 +372,6 @@ const TrackerLayerMixin = (Base) =>
           value: options.delayOutlineColor || '#000000',
           writable: true,
         },
-        useDelayStyle: {
-          value: options.useDelayStyle || false,
-          writable: true,
-        },
 
         /**
          * Debug properties.
@@ -369,61 +386,24 @@ const TrackerLayerMixin = (Base) =>
         // },
       });
 
-      // When we use the delay style we want to display delayed train on top by default
-      if (this.useDelayStyle && !this.sort) {
-        this.sort = (traj1, traj2) => {
-          const props1 = traj1.properties;
-          const props2 = traj2.properties;
-
-          if (props1.delay === null && props2.delay !== null) {
-            return 1;
-          }
-          if (props2.delay === null && props1.delay !== null) {
-            return -1;
-          }
-
-          // We put cancelled train inbetween green and yellow trains
-          // >=180000ms corresponds to yellow train
-          if (props1.cancelled && !props2.cancelled) {
-            return props2.delay < 180000 ? -1 : 1;
-          }
-          if (props2.cancelled && !props1.cancelled) {
-            return props1.delay < 180000 ? 1 : -1;
-          }
-          return props2.delay - props1.delay;
-        };
-      }
-
       // Update filter function based on convenient properties
       this.updateFilters();
     }
 
-    /**
-     * Initalize the Tracker.
-     * @param {ol/Map~Map} map
-     * @param {Object} options
-     * @param {number} [options.width] Canvas's width.
-     * @param {number} [options.height] Canvas's height.
-     * @param {bool} [options.interpolate] Convert an EPSG:3857 coordinate to a canvas pixel (origin top-left).
-     * @param {string} [options.hoverVehicleId] Id of the trajectory which is hovered.
-     * @param {string} [options.selectedVehicleId] Id of the trajectory which is selected.
-     * @param {function} [options.filter] Function use to filter the features displayed.
-     * @param {function} [options.sort] Function use to sort the features displayed.
-     * @param {function} [options.style] Function use to style the features displayed.
-     */
-    init(map, options = {}) {
+    init(map) {
       super.init(map);
 
       this.tracker = new Tracker({
         style: (...args) => this.style(...args),
         ...this.initTrackerOptions,
-        ...options,
       });
 
+      // 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();
@@ -431,12 +411,21 @@ const TrackerLayerMixin = (Base) =>
           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(
+        'visibilitychange',
+        this.onDocumentVisibilityChange,
+      );
     }
 
-    /**
-     * Destroy the Tracker.
-     */
     terminate() {
+      document.removeEventListener(
+        'visibilitychange',
+        this.onDocumentVisibilityChange,
+      );
+
       this.stop();
       unByKey(this.visibilityRef);
       if (this.tracker) {
@@ -448,14 +437,6 @@ const TrackerLayerMixin = (Base) =>
       super.terminate();
     }
 
-    /**
-     * Start the trajectories rendering.
-     *
-     * @param {Array<Number>} size Map's size: [width, height].
-     * @param {number} zoom Map's zoom level.
-     * @param {number} resolution Map's resolution.
-     * @param {number} rotation Map's rotation.
-     */
     start() {
       this.stop();
       this.renderTrajectories();
@@ -468,6 +449,23 @@ const TrackerLayerMixin = (Base) =>
       if (this.isHoverActive) {
         this.onHover(this.onFeatureHover);
       }
+
+      this.api.open();
+      this.api.subscribeTrajectory(
+        this.mode,
+        this.onTrajectoryMessage,
+        this.isUpdateBboxOnMoveEnd,
+      );
+      this.api.subscribeDeletedVehicles(
+        this.mode,
+        this.onDeleteTrajectoryMessage,
+        this.isUpdateBboxOnMoveEnd,
+      );
+
+      if (this.isUpdateBboxOnMoveEnd) {
+        // Update the bbox on each move end
+        this.setBbox();
+      }
     }
 
     /**
@@ -485,16 +483,10 @@ const TrackerLayerMixin = (Base) =>
       }, this.updateTimeDelay);
     }
 
-    /**
-     * Stop the trajectories rendering.
-     */
     stop() {
-      this.stopUpdateTime();
-      if (this.tracker) {
-        const { canvas } = this.tracker;
-        const context = canvas.getContext('2d');
-        context.clearRect(0, 0, canvas.width, canvas.height);
-      }
+      this.api.unsubscribeTrajectory(this.onTrajectoryMessage);
+      this.api.unsubscribeDeletedVehicles(this.onDeleteTrajectoryMessage);
+      this.api.close();
     }
 
     /**
@@ -548,7 +540,6 @@ const TrackerLayerMixin = (Base) =>
           iconScale: this.iconScale,
           delayDisplay: this.delayDisplay,
           delayOutlineColor: this.delayOutlineColor,
-          useDelayStyle: this.useDelayStyle,
         },
       );
 
@@ -590,6 +581,84 @@ const TrackerLayerMixin = (Base) =>
       }
     }
 
+    setBbox(extent, zoom) {
+      // Clean trajectories before sending the new bbox
+      // Purge trajectories:
+      // - which are outside the extent
+      // - when it's bus and zoom level is too low for them
+      const keys = Object.keys(this.trajectories);
+      for (let i = keys.length - 1; i >= 0; i -= 1) {
+        this.purgeTrajectory(this.trajectories[keys[i]], extent, zoom);
+      }
+
+      const bbox = [...extent];
+
+      if (this.isUpdateBboxOnMoveEnd) {
+        bbox.push(zoom);
+
+        if (this.tenant) {
+          bbox.push(`tenant=${this.tenant}`);
+        }
+
+        /* @ignore */
+        this.generalizationLevel = this.generalizationLevelByZoom[zoom];
+        if (this.generalizationLevel) {
+          bbox.push(`gen=${this.generalizationLevel}`);
+        }
+      }
+
+      this.api.bbox = bbox;
+    }
+
+    setMode(mode) {
+      if (this.mode === mode) {
+        return;
+      }
+      this.mode = mode;
+      this.api.subscribeTrajectory(
+        this.mode,
+        this.onTrajectoryMessage,
+        this.isUpdateBboxOnMoveEnd,
+      );
+      this.api.subscribeDeletedVehicles(
+        this.mode,
+        this.onDeleteTrajectoryMessage,
+        this.isUpdateBboxOnMoveEnd,
+      );
+    }
+
+    /**
+     * 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.
@@ -600,19 +669,26 @@ const TrackerLayerMixin = (Base) =>
     }
 
     /**
-     * Returns an array of vehicles located at the given coordinates and resolution.
+     * Request feature information for a given coordinate.
      *
-     * @param {number[2]} coordinate A coordinate ([x,y]).
-     * @param {number} [resolution=1] The resolution of the map.
-     * @param {number} [nb=Infinity] The max number of vehicles to return.
-     * @return {Array<ol/Feature~Feature>} Array of vehicle.
+     * @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.
      */
-    getVehiclesAtCoordinate(coordinate, resolution = 1, nb = Infinity) {
+    getFeatureInfoAtCoordinate(coordinate, options = {}) {
+      const { resolution, nb } = options;
       const ext = buffer(
         [...coordinate, ...coordinate],
         this.hitTolerance * resolution,
       );
-      const trajectories = Object.values(this.trajectories);
+      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 (
@@ -626,28 +702,75 @@ const TrackerLayerMixin = (Base) =>
         }
       }
 
-      return vehicles;
+      return Promise.resolve({
+        layer: this,
+        features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
+        coordinate,
+      });
     }
 
     /**
-     * Request feature information for a given coordinate.
+     * Request the stopSequence and the fullTrajectory informations for a vehicle.
      *
-     * @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.
+     * @param {string} id The vehicle identifier (the  train_id property).
+     * @return {Promise<{stopSequence: StopSequence, fullTrajectory: FullTrajectory>} A promise that will be resolved with the trajectory informations.
      */
-    getFeatureInfoAtCoordinate(coordinate, options = {}) {
-      const { resolution, nb } = options;
+    getTrajectoryInfos(id) {
+      // 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(id, this.mode),
+        this.api.getFullTrajectory(id, this.mode, this.generalizationLevel),
+      ];
+
+      return Promise.all(promises).then(([stopSequence, fullTrajectory]) => {
+        const response = {
+          stopSequence,
+          fullTrajectory,
+        };
+        return response;
+      });
+    }
 
-      const vehicles = this.getVehiclesAtCoordinate(coordinate, resolution, nb);
+    /**
+     * Determine if the trajectory is useless and should be removed from the list or not.
+     * By default, this function exclude vehicles:
+     *  - that have their trajectory outside the current extent and
+     *  - that are not a train and zoom level is lower than layer's minZoomNonTrain property.
+     *
+     * @param {TralisTrajectory} trajectory
+     * @param {Array<number>} extent
+     * @param {number} zoom
+     * @return {boolean} if the trajectory must be displayed or not.
+     * @ignore
+     */
+    purgeTrajectory(trajectory, extent, zoom) {
+      const { type, bounds, train_id: id } = trajectory.properties;
+      if (
+        !intersects(extent, bounds) ||
+        (type !== 'rail' && zoom < (this.minZoomNonTrain || 9))
+      ) {
+        this.removeTrajectory(id);
+        return true;
+      }
+      return false;
+    }
 
-      return Promise.resolve({
-        layer: this,
-        features: vehicles.map((vehicle) => this.format.readFeature(vehicle)),
-        coordinate,
-      });
+    /**
+     * Add a trajectory to the tracker.
+     * @param {TralisTrajectory} trajectory The trajectory to add.
+     * @private
+     */
+    addTrajectory(trajectory) {
+      if (this.filter && !this.filter(trajectory)) {
+        return;
+      }
+      this.trajectories[trajectory.properties.train_id] = trajectory;
+      this.renderTrajectories();
+    }
+
+    removeTrajectory(id) {
+      delete this.trajectories[id];
     }
 
     /**
@@ -661,54 +784,123 @@ const TrackerLayerMixin = (Base) =>
       this.startUpdateTime();
     }
 
+    onDocumentVisibilityChange() {
+      if (!this.visible) {
+        return;
+      }
+      if (document.hidden) {
+        this.stop();
+      } else {
+        this.start();
+      }
+    }
+
     /**
-     * Define beahvior when a vehicle is clicked
-     * To be defined in child classes.
+     * Callback on websocket's trajectory channel events.
+     * It adds a trajectory to the list.
+     *
+     * @private
+     */
+    onTrajectoryMessage(data) {
+      if (!data.content) {
+        return;
+      }
+      const trajectory = data.content;
+
+      const {
+        geometry,
+        properties: {
+          train_id: id,
+          time_since_update: timeSinceUpdate,
+          raw_coordinates: rawCoordinates,
+        },
+      } = trajectory;
+
+      // ignore old events [SBAHNM-97]
+      if (timeSinceUpdate < 0) {
+        return;
+      }
+
+      // console.time(`onTrajectoryMessage${data.content.properties.train_id}`);
+      if (this.purgeTrajectory(trajectory)) {
+        return;
+      }
+
+      if (
+        this.debug &&
+        this.mode === TralisModes.TOPOGRAPHIC &&
+        rawCoordinates
+      ) {
+        trajectory.properties.olGeometry = {
+          type: 'Point',
+          coordinates: fromLonLat(
+            rawCoordinates,
+            this.map.getView().getProjection(),
+          ),
+        };
+      } else {
+        trajectory.properties.olGeometry = this.format.readGeometry(geometry);
+      }
+
+      // TODO Make sure the timeOffset is useful. May be we can remove it.
+      trajectory.properties.timeOffset = Date.now() - data.timestamp;
+      this.addTrajectory(trajectory);
+    }
+
+    /**
+     * Callback on websocket's deleted_vehicles channel events.
+     * It removes the trajectory from the list.
      *
      * @private
      * @override
      */
-    onFeatureClick() {}
+    onDeleteTrajectoryMessage(data) {
+      if (!data.content) {
+        return;
+      }
+
+      this.removeTrajectory(data.content);
+    }
 
     /**
-     * Define behavior when a vehicle is hovered
-     * To be defined in child classes.
+     * Callback when user moves the mouse/pointer over the map.
+     * It sets the layer's hoverVehicleId property with the current hovered vehicle's id.
      *
      * @private
      * @override
      */
-    onFeatureHover() {}
+    onFeatureHover(features, layer, coordinate) {
+      const [feature] = features;
+      let id = null;
+      if (feature) {
+        id = feature.get('train_id');
+      }
+      if (this.hoverVehicleId !== id) {
+        /** @ignore */
+        this.hoverVehicleId = id;
+        this.renderTrajectories(true);
+      }
+    }
 
     /**
-     * Get the duration before the next update depending on zoom level.
+     * Callback when user clicks on the map.
+     * It sets the layer's selectedVehicleId property with the current selected vehicle's id.
      *
      * @private
-     * @param {number} zoom
+     * @override
      */
-    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 },
-        );
+    onFeatureClick(features, layer, coordinate) {
+      const [feature] = features;
+      let id = null;
+      if (feature) {
+        id = feature.get('train_id');
       }
-      if (this.api?.buffer) {
-        const [, size] = this.api.buffer;
-        this.api.buffer = [nextThrottleTick, size];
+      if (this.selectedVehicleId !== id) {
+        /** @ignore */
+        this.selectedVehicleId = id;
+        this.selectedVehicle = feature;
+        this.renderTrajectories(true);
       }
-      return nextTick;
     }
 
     /**
@@ -733,13 +925,6 @@ const TrackerLayerMixin = (Base) =>
         );
       }
     }
-
-    /**
-     * @private
-     */
-    defaultStyle(trajectory, viewState) {
-      return delayTrackerStyle(trajectory, viewState, this);
-    }
   };
 
-export default TrackerLayerMixin;
+export default TralisLayerMixin;