mobility-toolbox-js 1.6.4 → 1.7.0

package/ol/controls/CopyrightControl.test.js

@@ -29,13 +29,12 @@ const getOLTileLayer = () => {
   return layer;
 };
 
-const getLayer = (copyrights, visible = true) => {
-  return new Layer({
+const getLayer = (copyrights, visible = true) =>
+  new Layer({
     visible,
     copyrights,
     olLayer: getOLTileLayer(),
   });
-};
 
 describe('CopyrightControl', () => {
   let map;

package/ol/controls/RoutingControl.js

@@ -51,9 +51,7 @@ class RoutingControl extends Control {
 
     Object.defineProperties(this, {
       mot: {
-        get: () => {
-          return this.get('mot');
-        },
+        get: () => this.get('mot'),
         set: (newMot) => {
           if (newMot) {
             this.set('mot', newMot);
@@ -64,17 +62,13 @@ class RoutingControl extends Control {
         },
       },
       loading: {
-        get: () => {
-          return this.get('loading');
-        },
+        get: () => this.get('loading'),
         set: (newLoading) => {
           this.set('loading', newLoading);
         },
       },
       modify: {
-        get: () => {
-          return this.get('modify');
-        },
+        get: () => this.get('modify'),
         set: (modify) => {
           this.set('modify', modify);
         },
@@ -267,9 +261,7 @@ class RoutingControl extends Control {
     this.routingLayer.olLayer.getSource().clear();
 
     // Create point features for the viaPoints
-    this.viaPoints.forEach((viaPoint, idx) => {
-      return this.drawViaPoint(viaPoint, idx);
-    });
+    this.viaPoints.forEach((viaPoint, idx) => this.drawViaPoint(viaPoint, idx));
 
     return Promise.all(
       this.graphs.map(([graph], index) => {

package/ol/layers/MapboxLayer.test.js

@@ -112,12 +112,8 @@ describe('MapboxLayer', () => {
         apiKeyName: 'apiKey',
       });
       layer1.init(map);
-      layer1.mbMap.isStyleLoaded = jest.fn(() => {
-        return true;
-      });
-      layer1.mbMap.getSource = jest.fn(() => {
-        return true;
-      });
+      layer1.mbMap.isStyleLoaded = jest.fn(() => true);
+      layer1.mbMap.getSource = jest.fn(() => true);
     });
 
     afterEach(() => {
@@ -135,12 +131,8 @@ describe('MapboxLayer', () => {
         source: 'barr',
         sourceLayer: 'fooo',
       };
-      layer1.mbMap.project = jest.fn((coord) => {
-        return { x: coord[0], y: coord[1] };
-      });
-      layer1.mbMap.queryRenderedFeatures = jest.fn(() => {
-        return [mapboxFeature];
-      });
+      layer1.mbMap.project = jest.fn((coord) => ({ x: coord[0], y: coord[1] }));
+      layer1.mbMap.queryRenderedFeatures = jest.fn(() => [mapboxFeature]);
       layer1.getFeatureInfoAtCoordinate([0, 0], {}).then((featureInfo) => {
         expect(featureInfo.features[0].get('mapboxFeature')).toBe(
           mapboxFeature,
@@ -152,9 +144,10 @@ describe('MapboxLayer', () => {
     });
     describe('should use hitTolerance property', () => {
       beforeEach(() => {
-        layer1.mbMap.project = jest.fn((coord) => {
-          return { x: coord[0], y: coord[1] };
-        });
+        layer1.mbMap.project = jest.fn((coord) => ({
+          x: coord[0],
+          y: coord[1],
+        }));
       });
 
       afterEach(() => {

package/ol/layers/MapboxStyleLayer.js

@@ -110,9 +110,7 @@ class MapboxStyleLayer extends Layer {
 
     if (!this.styleLayersFilter && this.styleLayers) {
       const ids = this.styleLayers.map((s) => s.id);
-      this.styleLayersFilter = (styleLayer) => {
-        return ids.includes(styleLayer.id);
-      };
+      this.styleLayersFilter = (styleLayer) => ids.includes(styleLayer.id);
     }
   }
 
@@ -265,12 +263,9 @@ class MapboxStyleLayer extends Layer {
         validate: false,
       })
       .then((featureInfo) => {
-        const features = featureInfo.features.filter((feature) => {
-          return this.featureInfoFilter(
-            feature,
-            this.map.getView().getResolution(),
-          );
-        });
+        const features = featureInfo.features.filter((feature) =>
+          this.featureInfoFilter(feature, this.map.getView().getResolution()),
+        );
         this.highlight(features);
         return { ...featureInfo, features, layer: this };
       });
@@ -300,10 +295,10 @@ class MapboxStyleLayer extends Layer {
    * @param {boolean} state Is the feature hovered
    * @private
    */
-  setHoverState(features = [], state) {
+  setHoverState(features, state) {
     const { mbMap } = this.mapboxLayer;
 
-    if (!mbMap) {
+    if (!features || !mbMap) {
       return;
     }
 
@@ -350,11 +345,12 @@ class MapboxStyleLayer extends Layer {
    */
   highlight(features = []) {
     // Filter out selected features
-    const filtered = this.highlightedFeatures.filter((feature) => {
-      return !this.selectedFeatures
-        .map((feat) => feat.getId())
-        .includes(feature.getId());
-    });
+    const filtered = this.highlightedFeatures.filter(
+      (feature) =>
+        !this.selectedFeatures
+          .map((feat) => feat.getId())
+          .includes(feature.getId()),
+    );
 
     // Remove previous highlight
     this.setHoverState(filtered, false);

package/ol/layers/MapboxStyleLayer.test.js

@@ -110,12 +110,8 @@ describe('MapboxStyleLayer', () => {
   describe('#getFeatureInfoAtCoordinate()', () => {
     beforeEach(() => {
       source.init(map);
-      source.mbMap.isStyleLoaded = jest.fn(() => {
-        return true;
-      });
-      source.mbMap.getSource = jest.fn(() => {
-        return true;
-      });
+      source.mbMap.isStyleLoaded = jest.fn(() => true);
+      source.mbMap.getSource = jest.fn(() => true);
     });
     afterEach(() => {
       source.mbMap.getSource.mockRestore();
@@ -123,45 +119,37 @@ describe('MapboxStyleLayer', () => {
     });
 
     test('should request features on layers ids from styleLayers property', () => {
-      source.mbMap.getStyle = jest.fn(() => {
-        return { layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }] };
-      });
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }],
+      }));
       layer.init(map);
-      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => {
-        return Promise.resolve({ features: [] });
-      });
+      layer.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
       layer.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
-      expect(
-        layer.mapboxLayer.getFeatureInfoAtCoordinate,
-      ).toHaveBeenCalledWith([0, 0], { layers: ['layer'], validate: false });
+      expect(layer.mapboxLayer.getFeatureInfoAtCoordinate).toHaveBeenCalledWith(
+        [0, 0],
+        { layers: ['layer'], validate: false },
+      );
       layer.mapboxLayer.getFeatureInfoAtCoordinate.mockRestore();
       source.mbMap.getStyle.mockRestore();
     });
 
     test('should request features on layers ids from styleLayersFilter property', () => {
-      source.mbMap.getStyle = jest.fn(() => {
-        return {
-          layers: [
-            { id: 'foo' },
-            { id: 'layer' },
-            { id: 'bar' },
-            { id: 'foo2' },
-          ],
-        };
-      });
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [{ id: 'foo' }, { id: 'layer' }, { id: 'bar' }, { id: 'foo2' }],
+      }));
       const layer2 = new MapboxStyleLayer({
         name: 'mapbox layer',
         visible: true,
         mapboxLayer: source,
         styleLayer,
-        styleLayersFilter: ({ id }) => {
-          return /foo/.test(id);
-        },
+        styleLayersFilter: ({ id }) => /foo/.test(id),
       });
       layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => {
-        return Promise.resolve({ features: [] });
-      });
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
       layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
       expect(
         layer2.mapboxLayer.getFeatureInfoAtCoordinate,
@@ -174,33 +162,27 @@ describe('MapboxStyleLayer', () => {
     });
 
     test('should request features on layers ids from queryRenderedLayersFilter property', () => {
-      source.mbMap.getStyle = jest.fn(() => {
-        return {
-          layers: [
-            { id: 'foo' },
-            { id: 'bar2' },
-            { id: 'layer' },
-            { id: 'bar' },
-            { id: 'foo2' },
-          ],
-        };
-      });
+      source.mbMap.getStyle = jest.fn(() => ({
+        layers: [
+          { id: 'foo' },
+          { id: 'bar2' },
+          { id: 'layer' },
+          { id: 'bar' },
+          { id: 'foo2' },
+        ],
+      }));
       const layer2 = new MapboxStyleLayer({
         name: 'mapbox layer',
         visible: true,
         mapboxLayer: source,
         styleLayer,
-        styleLayersFilter: ({ id }) => {
-          return /foo/.test(id);
-        },
-        queryRenderedLayersFilter: ({ id }) => {
-          return /bar/.test(id);
-        },
+        styleLayersFilter: ({ id }) => /foo/.test(id),
+        queryRenderedLayersFilter: ({ id }) => /bar/.test(id),
       });
       layer2.init(map);
-      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() => {
-        return Promise.resolve({ features: [] });
-      });
+      layer2.mapboxLayer.getFeatureInfoAtCoordinate = jest.fn(() =>
+        Promise.resolve({ features: [] }),
+      );
       layer2.getFeatureInfoAtCoordinate([0, 0]).then(() => {});
       expect(
         layer2.mapboxLayer.getFeatureInfoAtCoordinate,

package/ol/layers/TrackerLayer.js

@@ -35,14 +35,11 @@ class TrackerLayer extends mixin(Layer) {
      */
     this.renderWhenInteracting =
       options.renderWhenInteracting ||
-      (() => {
+      (() =>
         // Render trajectories on each render frame when the number of trajectories is small.
-        return (
-          this.tracker &&
-          this.tracker.renderedTrajectories &&
-          this.tracker.renderedTrajectories.length <= 200
-        );
-      });
+        this.tracker &&
+        this.tracker.renderedTrajectories &&
+        this.tracker.renderedTrajectories.length <= 200);
 
     /** @ignore */
     this.olLayer =
@@ -95,9 +92,8 @@ class TrackerLayer extends mixin(Layer) {
                   // Avoid having really big points when zooming fast.
                   this.tracker.clear();
                 } else {
-                  const pixelCenterRendered = this.map.getPixelFromCoordinate(
-                    renderedCenter,
-                  );
+                  const pixelCenterRendered =
+                    this.map.getPixelFromCoordinate(renderedCenter);
                   const pixelCenter = this.map.getPixelFromCoordinate(center);
                   this.transformContainer.style.transform = composeCssTransform(
                     pixelCenterRendered[0] - pixelCenter[0],

package/ol/layers/TrajservLayer.js

@@ -103,9 +103,7 @@ class TrajservLayer extends mixin(TrackerLayer) {
     // Add station points
     if (stationsCoords) {
       const geometry = new MultiPoint(
-        stationsCoords.map((coords) => {
-          return fromLonLat(coords);
-        }),
+        stationsCoords.map((coords) => fromLonLat(coords)),
       );
       const aboveStationsFeature = new Feature(geometry);
       aboveStationsFeature.setStyle(

package/ol/layers/TralisLayer.test.js

@@ -60,4 +60,47 @@ describe('TrajservLayer', () => {
     expect(clone.name).toBe('clone');
     expect(clone).toBeInstanceOf(TralisLayer);
   });
+
+  test('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 = { 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([red, yellow, cancelled, green2, green, gray]);
+  });
+
+  test('should override the defaulrt 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]);
+  });
 });

package/package.json

@@ -2,91 +2,91 @@
   "name": "mobility-toolbox-js",
   "license": "MIT",
   "description": "Toolbox for JavaScript applications in the domains of mobility and logistics.",
-  "version": "1.6.4",
+  "version": "1.7.0",
   "main": "index.js",
   "module": "module.js",
   "dependencies": {
-    "@geops/geops-ui": "0.1.11",
-    "@material-ui/core": "^4.9.14",
-    "@material-ui/icons": "^4.9.1",
-    "@material-ui/styles": "^4.9.14",
+    "@geops/geops-ui": "0.1.13",
+    "@material-ui/core": "4.12.3",
+    "@material-ui/icons": "4.11.2",
+    "@material-ui/styles": "4.11.4",
     "@turf/helpers": "^6.5.0",
     "@turf/transform-rotate": "^6.5.0",
-    "codesandbox": "^2.1.16",
-    "es6-mixin": "^0.3.0",
+    "codesandbox": "2.2.3",
     "path": "^0.12.7",
-    "prop-types": "^15.7.2",
-    "query-string": "^6.13.0",
-    "react": "^16.13.1",
+    "prop-types": "15.8.1",
+    "query-string": "7.1.0",
+    "react": "17.0.2",
     "react-app-polyfill": "^1.0.6",
-    "react-dom": "^16.13.1",
-    "react-icons": "^4.2.0",
-    "react-markdown": "^4.3.1",
-    "react-router": "^5.2.0",
-    "react-router-dom": "^5.2.0",
-    "react-scrollchor": "^6.0.0",
-    "react-syntax-highlighter": "^15.4.1",
+    "react-dom": "17.0.2",
+    "react-icons": "4.3.1",
+    "react-markdown": "8.0.0",
+    "react-router-dom": "6",
+    "react-scrollchor": "7.0.1",
+    "react-syntax-highlighter": "15.4.5",
     "taffydb": "^2.7.3",
     "turf": "^3.0.14",
     "typeface-lato": "^0.0.75",
-    "uuid": "^8.1.0",
-    "worker-loader": "2.0.0"
+    "uuid": "8.3.2"
   },
   "peerDependencies": {
     "mapbox-gl": "^1",
     "ol": "^6"
   },
   "devDependencies": {
-    "@babel/plugin-transform-runtime": "7.12.1",
-    "@neutrinojs/airbnb": "9.1.0",
-    "@neutrinojs/airbnb-base": "9.1.0",
-    "@neutrinojs/copy": "9.1.0",
-    "@neutrinojs/image-loader": "9.1.0",
-    "@neutrinojs/jest": "9.1.0",
-    "@neutrinojs/library": "9.1.0",
-    "@neutrinojs/react": "9.1.0",
-    "cypress": "4.12.1",
+    "@babel/core": "7.16.12",
+    "@babel/eslint-parser": "7.16.5",
+    "@babel/plugin-transform-runtime": "7.16.10",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/preset-react": "7.16.7",
+    "@neutrinojs/copy": "9.5.0",
+    "@neutrinojs/jest": "^9.5.0",
+    "@neutrinojs/library": "9.5.0",
+    "@neutrinojs/react": "9.5.0",
+    "autoprefixer": "9.7.6",
+    "cypress": "9.4.1",
     "deepmerge": "4.2.2",
     "esdoc": "1.1.0",
     "esdoc-ecmascript-proposal-plugin": "1.0.0",
     "esdoc-publish-html-plugin": "1.1.2",
     "esdoc-standard-plugin": "1.0.0",
-    "eslint": "7.13.0",
-    "eslint-config-airbnb": "18.2.0",
-    "eslint-config-prettier": "6.15.0",
-    "eslint-import-resolver-webpack": "0.13.0",
-    "eslint-plugin-cypress": "2.11.2",
-    "eslint-plugin-import": "2.22.1",
-    "eslint-plugin-jsx-a11y": "6.4.1",
-    "eslint-plugin-prettier": "3.1.4",
-    "eslint-plugin-react": "7.21.4",
-    "eslint-plugin-react-hooks": "4.0.4",
+    "eslint": "8.8.0",
+    "eslint-config-airbnb": "19.0.4",
+    "eslint-config-prettier": "8.3.0",
+    "eslint-import-resolver-webpack": "0.13.2",
+    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsx-a11y": "6.5.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "4.3.0",
     "fixpack": "3.0.6",
-    "husky": "4.2.5",
-    "jest": "25.5.4",
-    "jest-canvas-mock": "2.2.0",
+    "husky": "7.0.4",
+    "jest": "26.6.3",
+    "jest-canvas-mock": "2.3.1",
     "jest-fetch-mock": "3.0.3",
-    "jest-serializer-html": "7.0.0",
-    "jest-websocket-mock": "^2.2.0",
-    "jsdoc": "3.6.4",
-    "lint-staged": "10.2.9",
-    "mapbox-gl": "^1",
-    "mock-socket": "^9.0.3",
-    "neutrino": "9.1.0",
+    "jest-serializer-html": "7.1.0",
+    "jest-websocket-mock": "2.3.0",
+    "lint-staged": "12.3.3",
+    "mapbox-gl": "1.13.2",
+    "mock-socket": "9.1.2",
+    "neutrino": "9.5.0",
     "node-sass": "4.14.1",
-    "ol": "^6",
+    "ol": "6.12.0",
+    "postcss": "8.3.3",
     "postcss-loader": "3.0.0",
-    "prettier": "2.0.5",
+    "prettier": "2.5.1",
     "sass-loader": "8.0.2",
     "sort-json": "2.0.0",
-    "start-server-and-test": "1.11.0",
-    "stylelint": "13.6.0",
-    "stylelint-config-recommended-scss": "4.2.0",
-    "stylelint-config-standard": "20.0.0",
-    "stylelint-scss": "3.17.2",
+    "start-server-and-test": "1.14.0",
+    "stylelint": "14.3.0",
+    "stylelint-config-recommended-scss": "5.0.2",
+    "stylelint-config-standard": "24.0.0",
+    "stylelint-scss": "4.1.0",
     "webpack": "4.43.0",
     "webpack-cli": "3.3.11",
-    "webpack-dev-server": "3.11.0"
+    "webpack-dev-server": "3.11.0",
+    "worker-loader": "3.0.8"
   },
   "scripts": {
     "apidoc": "esdoc",
@@ -106,7 +106,7 @@
     "publish:public": "yarn version && git push origin HEAD && yarn build && cd build && yarn publish",
     "start": "yarn doc && webpack-dev-server --mode development --open",
     "start:examples": "webpack-dev-server --mode development --open",
-    "test": "REACT_APP_LIB_MODE=1 jest --env=jsdom --transformIgnorePatterns \"/node_modules/(?!(ol|ol-mapbox-style)/).*/\"",
+    "test": "REACT_APP_LIB_MODE=1 jest",
     "test:watch": "yarn test --watchAll"
   },
   "browserslist": {
@@ -130,18 +130,18 @@
       "es6": true,
       "jest": true
     },
-    "parser": "babel-eslint",
+    "parser": "@babel/eslint-parser",
     "extends": [
       "airbnb",
       "airbnb/hooks",
-      "prettier",
-      "prettier/react"
+      "prettier"
     ],
     "plugins": [
       "cypress",
       "prettier"
     ],
     "rules": {
+      "arrow-body-style": 0,
       "react/jsx-filename-extension": [
         1,
         {
@@ -169,14 +169,6 @@
     "./mapbox": "./mapbox/index.js",
     "./ol": "./ol/index.js"
   },
-  "husky": {
-    "hooks": {
-      "post-checkout": "yarn install --frozen-lockfile",
-      "post-merge": "yarn install --frozen-lockfile",
-      "post-rebase": "yarn install --frozen-lockfile",
-      "pre-commit": "CI=true lint-staged   "
-    }
-  },
   "keywords": [
     "mobility",
     "toolbox"