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

package/{ol/layers/TrackerLayer.js → src/ol/layers/TralisLayer.js}

@@ -1,24 +1,36 @@
+import GeoJSON from 'ol/format/GeoJSON';
 import { Layer as OLLayer, Group, Vector as VectorLayer } from 'ol/layer';
 import Source from 'ol/source/Source';
 import { composeCssTransform } from 'ol/transform';
 import { Vector as VectorSource } from 'ol/source';
-import mixin from '../../common/mixins/TrackerLayerMixin';
-
 import Layer from './Layer';
+import mixin from '../../common/mixins/TralisLayerMixin';
+import { fullTrajectoryStyle } from '../styles';
+
+const format = new GeoJSON();
 
 /**
- * Responsible for loading tracker data.
+ * Responsible for loading and display data from a Tralis service.
+ *
+ * @example
+ * import { TralisLayer } from 'mobility-toolbox-js/ol';
+ *
+ * const layer = new TralisLayer({
+ *   url: [yourUrl],
+ *   apiKey: [yourApiKey],
+ * });
+ *
+ *
+ * @see <a href="/api/class/src/api/tralis/TralisAPI%20js~TralisAPI%20html">TralisAPI</a>
  *
- * @classproperty {ol/Map~Map} map - The map where the layer is displayed.
  * @extends {Layer}
- * @implements {TrackerLayerInterface}
+ * @implements {TralisLayerInterface}
  */
-class TrackerLayer extends mixin(Layer) {
+class TralisLayer extends mixin(Layer) {
   /**
    * Constructor.
    *
    * @param {Object} options
-   * @param {boolean} options.useDelayStyle Set the delay style.
    * @private
    */
   constructor(options = {}) {
@@ -35,6 +47,7 @@ class TrackerLayer extends mixin(Layer) {
         layers: [
           new VectorLayer({
             source: new VectorSource({ features: [] }),
+            style: options.fullTrajectoryStyle || fullTrajectoryStyle,
           }),
           new OLLayer({
             source: new Source({}),
@@ -111,7 +124,7 @@ class TrackerLayer extends mixin(Layer) {
     super.init(map);
     if (this.map) {
       this.olListenersKeys.push(
-        this.map.on('moveend', (evt) => {
+        this.map.on(['moveend', 'change:target'], (evt) => {
           const view = this.map.getView();
           if (view.getAnimating() || view.getInteracting()) {
             return;
@@ -211,23 +224,7 @@ class TrackerLayer extends mixin(Layer) {
     return super.getRefreshTimeInMs(this.map.getView().getZoom());
   }
 
-  /**
-   * Returns the vehicle which are at the given coordinates.
-   * Returns null when no vehicle is located at the given coordinates.
-   * @param {ol/coordinate~Coordinate} coordinate
-   * @param {number} nb Number of vehicles to return;
-   * @return {Array<ol/Feature~Feature>} Vehicle feature.
-   * @override
-   */
-  getVehiclesAtCoordinate(coordinate, nb) {
-    const resolution = this.map.getView().getResolution();
-    return super.getVehiclesAtCoordinate(coordinate, resolution, nb);
-  }
-
   getFeatureInfoAtCoordinate(coordinate, options = {}) {
-    if (!this.hasFeatureInfoAtCoordinate(coordinate)) {
-      return Promise.resolve({ features: [], layer: this, coordinate });
-    }
     const resolution = this.map.getView().getResolution();
     return super.getFeatureInfoAtCoordinate(coordinate, {
       resolution,
@@ -236,14 +233,26 @@ class TrackerLayer extends mixin(Layer) {
   }
 
   /**
-   * Function called on moveend event.
-   * To be defined in inherited classes
+   * On move end we update the websocket with the new bbox.
    *
-   * @param {ol/MapEvent~MapEvent} evt Moveend event.
+   * @param {ol/MapEvent~MapEvent} evt Moveend event
    * @private
+   * @override
    */
-  // eslint-disable-next-line no-unused-vars,class-methods-use-this
-  onMoveEnd(evt) {}
+  onMoveEnd() {
+    if (this.visible && this.isUpdateBboxOnMoveEnd) {
+      this.setBbox();
+    }
+
+    if (
+      this.visible &&
+      this.isUpdateBboxOnMoveEnd &&
+      this.isClickActive &&
+      this.selectedVehicleId
+    ) {
+      this.highlightTrajectory(this.selectedVehicleId);
+    }
+  }
 
   /**
    * Function called on moveend event only when the zoom has changed.
@@ -281,16 +290,70 @@ class TrackerLayer extends mixin(Layer) {
     if (!features.length && this.vectorLayer) {
       this.vectorLayer.getSource().clear();
     }
+    if (this.selectedVehicleId) {
+      this.highlightTrajectory(this.selectedVehicleId);
+    }
+  }
+
+  /**
+   * Remove the trajectory form the list if necessary.
+   *
+   * @private
+   */
+  purgeTrajectory(trajectory, extent, zoom) {
+    return super.purgeTrajectory(
+      trajectory,
+      extent || this.map.getView().calculateExtent(),
+      zoom || this.map.getView().getZoom(),
+    );
+  }
+
+  /**
+   * Send the current bbox to the websocket
+   *
+   * @private
+   */
+  setBbox(extent, zoom) {
+    let newExtent = extent;
+    let newZoom = zoom;
+    if (!newExtent && this.isUpdateBboxOnMoveEnd) {
+      newExtent = extent || this.map.getView().calculateExtent();
+      newZoom = Math.floor(this.map.getView().getZoom());
+    }
+    super.setBbox(newExtent, newZoom);
+  }
+
+  /**
+   * Highlight the trajectory of journey.
+   * @private
+   */
+  highlightTrajectory(id) {
+    this.api
+      .getFullTrajectory(id, this.mode, this.generalizationLevel)
+      .then((fullTrajectory) => {
+        const vectorSource = this.vectorLayer.getSource();
+        vectorSource.clear();
+
+        if (
+          !fullTrajectory ||
+          !fullTrajectory.features ||
+          !fullTrajectory.features.length
+        ) {
+          return;
+        }
+        const features = format.readFeatures(fullTrajectory);
+        this.vectorLayer.getSource().addFeatures(features);
+      });
   }
 
   /**
-   * Create a copy of the TrackerLayer.
+   * Create a copy of the TralisLayer.
    * @param {Object} newOptions Options to override
-   * @return {TrackerLayer} A TrackerLayer
+   * @return {TralisLayer} A TralisLayer
    */
   clone(newOptions) {
-    return new TrackerLayer({ ...this.options, ...newOptions });
+    return new TralisLayer({ ...this.options, ...newOptions });
   }
 }
 
-export default TrackerLayer;
+export default TralisLayer;

package/{ol → src/ol}/layers/TralisLayer.test.js

@@ -10,7 +10,7 @@ let onClick;
 let olMap;
 let server;
 
-describe('TrajservLayer', () => {
+describe('TralisLayer', () => {
   beforeEach(() => {
     server = new WS('ws://localhost:1234');
     global.fetch = fetch;
@@ -69,63 +69,17 @@ describe('TrajservLayer', () => {
       sort: fn,
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(false);
     expect(laye.sort).toBe(fn);
   });
 
-  test.only('should set a default sort function if useDelayStyle is used.', () => {
-    const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      useDelayStyle: true,
-    });
-    expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
-    expect(laye.sort).toBeDefined();
-    const red = { properties: { delay: 1000000 } };
-    const yellow = { properties: { delay: 180000 } };
-    const green2 = { properties: { delay: 178990 } };
-    const green = { properties: { delay: 0 } };
-    const gray = { properties: { delay: null } };
-    const cancelled = { properties: { cancelled: true, delay: 3000000 } };
-
-    const trajectories = [gray, green, yellow, red, green2, cancelled];
-    trajectories.sort(laye.sort);
-    expect(trajectories).toEqual([red, yellow, cancelled, green2, green, gray]);
-  });
-
-  test('should override the default sort function when useDelayStyle is used.', () => {
-    const laye = new TralisLayer({
-      url: 'ws://localhost:1234',
-      apiKey: 'apiKey',
-      useDelayStyle: true,
-      sort: () => -1, // reverse the array
-    });
-    expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
-    expect(laye.sort).toBeDefined();
-    const red = { delay: 1000000 };
-    const yellow = { delay: 180000 };
-    const green2 = { delay: 178990 };
-    const green = { delay: 0 };
-    const gray = { delay: null };
-    const cancelled = { cancelled: true, delay: 3000000 };
-
-    const trajectories = [gray, green, yellow, red, green2, cancelled];
-    trajectories.sort(laye.sort);
-    expect(trajectories).toEqual([cancelled, green2, red, yellow, green, gray]);
-  });
-
   test('should use filter function.', () => {
     const fn = () => true;
     const laye = new TralisLayer({
       url: 'ws://localhost:1234',
       apiKey: 'apiKey',
-      useDelayStyle: true,
       filter: fn, // reverse the array
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
     expect(laye.filter).toBe(fn);
   });
 
@@ -134,12 +88,10 @@ describe('TrajservLayer', () => {
     const laye = new TralisLayer({
       url: 'ws://localhost:1234',
       apiKey: 'apiKey',
-      useDelayStyle: true,
       filter: fn, // reverse the array
       publishedLineName: '.*',
     });
     expect(laye).toBeInstanceOf(TralisLayer);
-    expect(laye.useDelayStyle).toBe(true);
     expect(laye.filter).not.toBe(fn);
   });
 });

package/{ol → src/ol}/layers/VectorLayer.test.js

@@ -3,7 +3,7 @@ import VectorSource from 'ol/source/Vector';
 import View from 'ol/View';
 import Feature from 'ol/Feature';
 import Point from 'ol/geom/Point';
-import Map from '../Map';
+import Map from 'ol/Map';
 import VectorLayer from './VectorLayer';
 
 const feature1 = new Feature({

package/{ol → src/ol}/layers/WMSLayer.test.js

@@ -3,7 +3,7 @@ import ImageLayer from 'ol/layer/Image';
 import ImageWMS from 'ol/source/ImageWMS';
 import fetch from 'jest-fetch-mock';
 import qs from 'query-string';
-import Map from '../Map';
+import Map from 'ol/Map';
 import WMSLayer from './WMSLayer';
 
 describe('WMSLayer', () => {
@@ -23,11 +23,15 @@ describe('WMSLayer', () => {
         }),
       }),
     });
-    map.addLayer(layer);
+    layer.init(map);
     fetch.mockResponseOnce(JSON.stringify({ features: [] }));
     global.fetch = fetch;
   });
 
+  afterEach(() => {
+    layer.terminate();
+  });
+
   test('should initialize.', () => {
     expect(layer).toBeInstanceOf(WMSLayer);
   });

package/src/ol/styles/fullTrajectoryDelayStyle.js

@@ -0,0 +1,35 @@
+import { Style, Fill, Stroke, Circle } from 'ol/style';
+
+const stroke = new Style({
+  zIndex: 2,
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#000000',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#000000',
+    width: 6,
+  }),
+});
+
+const fill = new Style({
+  zIndex: 3,
+  image: new Circle({
+    radius: 4,
+    fill: new Fill({
+      color: '#a0a0a0',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#a0a0a0',
+    width: 4,
+  }),
+});
+
+const fullTrajectoryDelaystyle = () => {
+  return [stroke, fill];
+};
+
+export default fullTrajectoryDelaystyle;

package/src/ol/styles/fullTrajectoryStyle.js

@@ -0,0 +1,51 @@
+import { Style, Fill, Stroke, Circle } from 'ol/style';
+import { getBgColor } from '../../common/trackerConfig';
+
+const borderStyle = new Style({
+  zIndex: 2,
+  image: new Circle({
+    radius: 5,
+    fill: new Fill({
+      color: '#000000',
+    }),
+  }),
+  stroke: new Stroke({
+    color: '#000000',
+    width: 6,
+  }),
+});
+
+const fullTrajectorystyle = (feature) => {
+  let lineColor = '#ffffff'; // white
+
+  const type = feature.get('type');
+  let stroke = feature.get('stroke');
+
+  if (stroke && stroke[0] !== '#') {
+    stroke = `#${stroke}`;
+  }
+
+  lineColor = stroke || getBgColor(type);
+
+  // Don't allow white lines, use red instead.
+  lineColor = /#ffffff/i.test(lineColor) ? '#ff0000' : lineColor;
+
+  const style = [
+    borderStyle,
+    new Style({
+      zIndex: 3,
+      image: new Circle({
+        radius: 4,
+        fill: new Fill({
+          color: lineColor,
+        }),
+      }),
+      stroke: new Stroke({
+        color: lineColor,
+        width: 4,
+      }),
+    }),
+  ];
+  return style;
+};
+export default fullTrajectorystyle;

package/src/ol/styles/index.js

@@ -0,0 +1,2 @@
+export { default as fullTrajectoryStyle } from './fullTrajectoryStyle';
+export { default as fullTrajectoryDelayStyle } from './fullTrajectoryDelayStyle';

package/src/setupTests.js

@@ -0,0 +1,15 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import 'jest-canvas-mock';
+import fetchTrajectoryByIdResponse from '../data/fetchTrajectoryById.json';
+import fetchTrajectoriesResponse from '../data/fetchTrajectories.json';
+import fetchTrajectoryStationsResponse from '../data/fetchTrajectoryStations.json';
+import stopsSearchResponse from '../data/stopsSearch.json';
+import fetchRouteResponse from '../data/fetchRoute.json';
+
+global.fetchTrajectoryByIdResponse = fetchTrajectoryByIdResponse;
+global.fetchTrajectoriesResponse = fetchTrajectoriesResponse;
+global.fetchTrajectoryStationsResponse = fetchTrajectoryStationsResponse;
+global.stopsSearchResponse = stopsSearchResponse;
+global.fetchRouteResponse = fetchRouteResponse;
+
+global.URL.createObjectURL = jest.fn(() => 'fooblob');

package/webpack.config.js

@@ -0,0 +1,6 @@
+// Whilst the configuration object can be modified here, the recommended way of making
+// changes is via the presets' options or Neutrino's API in `.neutrinorc.js` instead.
+// Neutrino's inspect feature can be used to view/export the generated configuration.
+const neutrino = require('neutrino');
+
+module.exports = neutrino().webpack();

package/api/trajserv/TrajservAPI.js

@@ -1,71 +0,0 @@
-import {
-  translateTrajCollResponse,
-  translateTrajStationsResp,
-} from './TrajservAPIUtils';
-import API from '../../common/api/api';
-
-/**
- * Access to the [Realtime service](https://developer.geops.io/apis/5dcbd5c9a256d90001cf1360/).
- *
- * @example
- * import { TrajservAPI } from 'mobility-toolbox-js/api';
- *
- * const api = new TrajservAPI({
- *   url: 'https://api.geops.io/tracker/v1',
- *   apiKey: [yourApiKey]
- * });
- *
- */
-class TrajservAPI extends API {
-  /**
-   * Constructor
-   *
-   * @param {Object} options Options.
-   * @param {string} [options.url='https://api.geops.io/tracker/v1'] Service url.
-   * @param {string} options.apiKey Access key for [geOps services](https://developer.geops.io/).
-   */
-  constructor(options = {}) {
-    super({ url: 'https://api.geops.io/tracker/v1', ...options });
-  }
-
-  /**
-   * Fetch a trajectory by id.
-   *
-   * @param {GetTrajectoryByIdParams} params Request parameters. See [Realtime service documentation](https://developer.geops.io/apis/5dcbd5c9a256d90001cf1360/#/default/get_trajectorybyid).
-   * @param {AbortController} abortController Abort controller used to cancel the request.
-   * @return {Promise<TrajservTrajectory>} A trajectory.
-   */
-  fetchTrajectoryById(params, abortController = {}) {
-    return this.fetch(`/trajectorybyid`, params, {
-      signal: abortController.signal,
-    });
-  }
-
-  /**
-   * Fetch trajectories.
-   *
-   * @param {GetTrajectoriesParams} params Request parameters. See [Realtime service documentation](https://developer.geops.io/apis/5dcbd5c9a256d90001cf1360/#/default/get_trajectory_collection).
-   * @param {AbortController} abortController Abort controller used to cancel the request.
-   * @return {Promise<Array<Trajectory>>} A list of trajectories.
-   */
-  fetchTrajectories(params, abortController = {}) {
-    return this.fetch(`/trajectory_collection`, params, {
-      signal: abortController.signal,
-    }).then((data) => translateTrajCollResponse(data.features));
-  }
-
-  /**
-   * Fetch stations informations about a trajectory.
-   *
-   * @param {GetTrajectoryStationsParams} params Request parameters. See [Realtime service documentation](https://developer.geops.io/apis/5dcbd5c9a256d90001cf1360/#/default/get_trajstations).
-   * @param {AbortController} abortController Abort controller used to cancel the request.
-   * @return {Promise<Array<TrajectoryStation>>} A list of stations.
-   */
-  fetchTrajectoryStations(params, abortController = {}) {
-    return this.fetch(`/trajstations`, params, {
-      signal: abortController.signal,
-    }).then((data) => translateTrajStationsResp(data));
-  }
-}
-
-export default TrajservAPI;

package/api/trajserv/TrajservAPI.test.js

@@ -1,171 +0,0 @@
-import fetch from 'jest-fetch-mock';
-import TrajservAPI from './TrajservAPI';
-
-let api;
-
-describe('TrajservAPI', () => {
-  beforeEach(() => {
-    global.fetch = fetch;
-    fetch.resetMocks();
-
-    api = new TrajservAPI({ apiKey: 'apiKey' });
-  });
-
-  describe('#fetchTrajectoryById', () => {
-    test('should success', () => {
-      fetch.mockResponseOnce(
-        JSON.stringify(global.fetchTrajectoryByIdResponse),
-      );
-
-      return api
-        .fetchTrajectoryById({
-          a: '1',
-          bbox: '917830.8141233932,5949421.787168904,926771.7516620635,5953300.375201735',
-          btime: '5:54:7.880',
-          cd: '1',
-          date: '20200701',
-          etime: '5:54:24.582',
-          fl: '1',
-          id: '16617:3',
-          nm: '1',
-          rid: '1',
-          s: '0',
-          time: '5:54:8.103',
-          z: '15.248670953423606',
-        })
-        .then((response) => {
-          // Correct url
-          expect(fetch.mock.calls[0][0]).toEqual(
-            'https://api.geops.io/tracker/v1/trajectorybyid?a=1&bbox=917830.8141233932%2C5949421.787168904%2C926771.7516620635%2C5953300.375201735&btime=5%3A54%3A7.880&cd=1&date=20200701&etime=5%3A54%3A24.582&fl=1&id=16617%3A3&key=apiKey&nm=1&rid=1&s=0&time=5%3A54%3A8.103&z=15.248670953423606',
-          );
-
-          // Correct search result
-          expect(response.rid).toEqual('21120.000011.101:1');
-        });
-    });
-
-    test('should trigger error message', () => {
-      // Mock console statement
-      const consoleOutput = [];
-      // eslint-disable-next-line no-console
-      console.warn = (message, err) =>
-        consoleOutput.push([message, err.toString()]);
-
-      fetch.mockResponseOnce('invalid json');
-
-      return api
-        .fetchTrajectoryById({
-          attr_det: '1',
-          bbox: '922972.5439121567,5951167.694705085,923812.5648796591,5951532.096677226',
-          btime: '5:18:31.766',
-          etime: '5:18:41.967',
-          date: '20200701',
-          rid: '1',
-          a: '1',
-          cd: '1',
-          nm: '1',
-          fl: '1',
-          s: '0',
-          z: '18.66059982835272',
-        })
-        .catch((err) => {
-          expect(err.name).toEqual('FetchError');
-          expect(err.message).toEqual(
-            'invalid json response body at  reason: Unexpected token i in JSON at position 0',
-          );
-        });
-    });
-  });
-
-  describe('#fetchTrajectories', () => {
-    test('should success', () => {
-      fetch.mockResponseOnce(JSON.stringify(global.fetchTrajectoriesResponse));
-
-      return api
-        .fetchTrajectories({
-          attr_det: '1',
-          bbox: '922972.5439121567,5951167.694705085,923812.5648796591,5951532.096677226',
-          btime: '5:18:31.766',
-          etime: '5:18:41.967',
-          date: '20200701',
-          rid: '1',
-          a: '1',
-          cd: '1',
-          nm: '1',
-          fl: '1',
-          s: '0',
-          z: '18.66059982835272',
-        })
-        .then((features) => {
-          // Correct url
-          expect(fetch.mock.calls[0][0]).toEqual(
-            'https://api.geops.io/tracker/v1/trajectory_collection?a=1&attr_det=1&bbox=922972.5439121567%2C5951167.694705085%2C923812.5648796591%2C5951532.096677226&btime=5%3A18%3A31.766&cd=1&date=20200701&etime=5%3A18%3A41.967&fl=1&key=apiKey&nm=1&rid=1&s=0&z=18.66059982835272',
-          );
-
-          // Correct search result
-          expect(features[0].id).toEqual(4150092);
-        });
-    });
-
-    test('should display error message if the transformation fails', () => {
-      fetch.mockResponseOnce(JSON.stringify({ foo: 'bar' }));
-
-      return api
-        .fetchTrajectories({
-          attr_det: '1',
-          bbox: '922972.5439121567,5951167.694705085,923812.5648796591,5951532.096677226',
-          btime: '5:18:31.766',
-          etime: '5:18:41.967',
-          date: '20200701',
-          rid: '1',
-          a: '1',
-          cd: '1',
-          nm: '1',
-          fl: '1',
-          s: '0',
-          z: '18.66059982835272',
-        })
-        .catch((err) => {
-          expect(err.name).toEqual('TypeError');
-          expect(err.message).toEqual(
-            "Cannot read property 'length' of undefined",
-          );
-        });
-    });
-  });
-
-  describe('#fetchTrajectoryStations', () => {
-    test('should success', () => {
-      fetch.mockResponseOnce(
-        JSON.stringify(global.fetchTrajectoryStationsResponse),
-      );
-
-      return api
-        .fetchTrajectoryStations({
-          a: '1',
-          bbox: '1059098.4179109985,5917420.543096403,1063534.5137495932,5919344.9260996',
-          btime: '6:17:22.722',
-          cd: '1',
-          date: '20200701',
-          etime: '6:17:33.526',
-          fl: '1',
-          id: '1714251',
-          key: 'apiKey',
-          nm: '1',
-          rid: '1',
-          s: '0',
-          time: '6:17:23.34',
-          z: '16.259806538265146',
-        })
-        .then((response) => {
-          // Correct url
-          expect(fetch.mock.calls[0][0]).toEqual(
-            'https://api.geops.io/tracker/v1/trajstations?a=1&bbox=1059098.4179109985%2C5917420.543096403%2C1063534.5137495932%2C5919344.9260996&btime=6%3A17%3A22.722&cd=1&date=20200701&etime=6%3A17%3A33.526&fl=1&id=1714251&key=apiKey&nm=1&rid=1&s=0&time=6%3A17%3A23.34&z=16.259806538265146',
-          );
-
-          // Correct search result
-          expect(response.routeIdentifier).toEqual('01716.000072.001:1716');
-        });
-    });
-  });
-});