mobility-toolbox-js 2.3.9-beta.1 → 2.3.10

package/src/common/utils/createRealtimeFilters.test.js

@@ -0,0 +1,100 @@
+import createRealtimeFilters from './createRealtimeFilters';
+
+const u1 = {
+  properties: {
+    route_identifier: '001.000827.004:7',
+    operator: 'FoO',
+    line: {
+      name: 'U1',
+    },
+  },
+};
+const ireta = {
+  properties: {
+    routeIdentifier: '0022.000827.004:7',
+    tenant: 'BAR',
+    line: {
+      name: 'IRETA',
+    },
+  },
+};
+const arb = {
+  properties: {
+    route_identifier: '00333.000827.004:7',
+    operator: 'qux',
+    line: {
+      name: 'ARB',
+    },
+  },
+};
+
+const trajectories = [u1, ireta, arb];
+
+describe('#createTrackerFilter()', () => {
+  test('returns null', () => {
+    const filterFunc = createRealtimeFilters();
+    expect(filterFunc).toBe(null);
+  });
+
+  describe('using line', () => {
+    test('as string', () => {
+      const filterFunc = createRealtimeFilters('u1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createRealtimeFilters(['u1', 'foo', 'IRETA']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using route identifier (snake_case and camelCase (only tralis)', () => {
+    test('as string', () => {
+      const filterFunc = createRealtimeFilters(null, '1,foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createRealtimeFilters(null, ['22', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using operator', () => {
+    test('as string (using operator deprecated property)', () => {
+      const filterFunc = createRealtimeFilters(null, null, 'foo');
+      expect(trajectories.filter(filterFunc)).toEqual([u1]);
+    });
+
+    test('as string (using tenant property)', () => {
+      const filterFunc = createRealtimeFilters(null, null, 'bar');
+      expect(trajectories.filter(filterFunc)).toEqual([ireta]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createRealtimeFilters(null, null, ['bar', 'foo', '1']);
+      expect(trajectories.filter(filterFunc)).toEqual([u1, ireta]);
+    });
+  });
+
+  describe('using regexLine', () => {
+    test('as string', () => {
+      const filterFunc = createRealtimeFilters(
+        null,
+        null,
+        null,
+        '^(S|R$|RE|PE|D|IRE|RB|TER)',
+      );
+      expect(trajectories.filter(filterFunc)).toEqual([ireta]);
+    });
+
+    test('as array of string', () => {
+      const filterFunc = createRealtimeFilters(null, null, null, [
+        '^IR',
+        '^ARB$',
+        'foo',
+      ]);
+      expect(trajectories.filter(filterFunc)).toEqual([ireta, arb]);
+    });
+  });
+});

package/src/common/utils/createRealtimeFilters.ts

@@ -0,0 +1,96 @@
+import { RealtimeTrajectory } from '../../types';
+/**
+ * Return a filter functions based on some parameters of a vehicle.
+ *
+ * @param {string|Array<string>} line - A list of vehicle's name to filter. Names can be separated by a comma. Ex: 'S1,S2,S3'
+ * @param {string|Array<string} route - A list of vehicle's route (contained in route_identifier property) to filter. Indentifiers can be separated by a comma. Ex: 'id1,id2,id3'
+ * @param {string|Array<string} operator  A list of vehicle's operator to filter. Operators can be separated by a comma. Ex: 'SBB,DB'
+ * @param {Regexp} regexLine - A regex aplly of vehcile's name.
+ * @private
+ */
+const createRealtimeFilters = (
+  line: string | string[],
+  route: string | string[],
+  operator: string | string[],
+  regexLine: string | string[],
+): ((trajectory: RealtimeTrajectory) => boolean) | null => {
+  const filterList: ((trajectory: RealtimeTrajectory) => boolean)[] = [];
+
+  if (!line && !route && !operator && !regexLine) {
+    return null;
+  }
+
+  if (regexLine) {
+    const regexLineList: string[] =
+      typeof regexLine === 'string' ? [regexLine] : regexLine;
+    const lineFilter = (item: RealtimeTrajectory) => {
+      const name =
+        item.properties.name ||
+        (item.properties.line && item.properties.line.name) ||
+        '';
+      if (!name) {
+        return false;
+      }
+      return regexLineList.some((regexStr) =>
+        new RegExp(regexStr, 'i').test(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 = (item: RealtimeTrajectory) => {
+      const { line: linee, name } = item.properties;
+      const lineName = (name || (linee && linee.name) || '').toUpperCase();
+      if (!lineName) {
+        return false;
+      }
+      return lineList.includes(lineName);
+    };
+    filterList.push(lineFilter);
+  }
+
+  if (route) {
+    const routes = typeof route === 'string' ? route.split(',') : route;
+    const routeList = routes.map((item) => parseInt(item, 10));
+    const routeFilter = (item: RealtimeTrajectory) => {
+      const routeIdentifier =
+        item.properties.route_identifier ||
+        item.properties.routeIdentifier ||
+        '';
+      const routeId = parseInt(routeIdentifier.split('.')[0], 10);
+      return routeList.includes(routeId);
+    };
+    filterList.push(routeFilter);
+  }
+
+  if (operator) {
+    const operatorList = typeof operator === 'string' ? [operator] : operator;
+    const operatorFilter = (item: RealtimeTrajectory) =>
+      operatorList.some((op) => {
+        // operaotr is the old property tenant is the new one
+        const tenant = item.properties.operator || item.properties.tenant || '';
+        return new RegExp(op, 'i').test(tenant);
+      });
+    filterList.push(operatorFilter);
+  }
+
+  if (!filterList.length) {
+    return null;
+  }
+
+  return (item: RealtimeTrajectory) => {
+    for (let i = 0; i < filterList.length; i += 1) {
+      if (!filterList[i](item)) {
+        return false;
+      }
+    }
+    return true;
+  };
+};
+
+export default createRealtimeFilters;

package/src/common/utils/debounceDeparturesMessages.ts

@@ -0,0 +1,52 @@
+import { RealtimeAPIDeparturesById } from '../../api/RealtimeAPI';
+import type { RealtimeDeparture, RealtimeDepartureExtended } from '../../types';
+import type {
+  WebSocketAPIMessageCallback,
+  WebSocketAPIMessageEventData,
+} from '../api/WebSocketAPI';
+import sortAndFilterDepartures from './sortAndFilterDepartures';
+
+/**
+ * This function returns a WebSocket api callback, and call the onDeparturesUpdate function with the list of current departures to display.
+ * @param {function(departures: RealtimeDeparture[])} onDeparturesUpdate callback when list of departures changes, called after 100 ms
+ * @param {boolean} [sortByMinArrivalTime = true] Sort departures by arrival time
+ * @param {number} [maxDepartureAge = 30] max departure age of departures in minutes
+ * @param {number} [timeout = 100] debounce timeout in ms
+ * @private
+ */
+const debounceDeparturesMessages = (
+  onDeparturesUpdate: (departures: RealtimeDepartureExtended[]) => {},
+  sortByMinArrivalTime = false,
+  maxDepartureAge = 30,
+  timeout = 100,
+): WebSocketAPIMessageCallback<RealtimeDeparture> => {
+  const departureUpdateTimeout: {
+    [key: string]: number;
+  } = {};
+
+  const departureObject: RealtimeAPIDeparturesById = {};
+
+  return (data: WebSocketAPIMessageEventData<RealtimeDeparture>) => {
+    const { source, content: departure } = data;
+    if (departureUpdateTimeout[source]) {
+      window.clearTimeout(departureUpdateTimeout[source]);
+    }
+
+    if (!departure) {
+      return;
+    }
+
+    departureObject[departure.call_id] = departure;
+
+    departureUpdateTimeout[source] = window.setTimeout(() => {
+      const departures = sortAndFilterDepartures(
+        departureObject,
+        sortByMinArrivalTime || false,
+        maxDepartureAge,
+      );
+      onDeparturesUpdate(departures);
+    }, timeout);
+  };
+};
+
+export default debounceDeparturesMessages;

package/src/common/utils/debounceWebsocketMessages.ts

@@ -0,0 +1,47 @@
+import type {
+  WebSocketAPIMessageCallback,
+  WebSocketAPIMessageEventData,
+} from '../api/WebSocketAPI';
+
+/**
+ * This function returns a WebSocket api callback, and call the onUpdate function with the list of of subscribed objects changes.
+ *
+ * @param {function(objects: any[])} onUpdate callback when list of subscribed objects changes, called after 100 ms
+ * @param {function(object: any)} [getObjectId = true] function returning the id of an object
+ * @param {number} [timeout = 100] debounce timeout in ms
+ * @private
+ */
+const debounceWebsocketMessages = (
+  onUpdate: (objects: any[]) => void,
+  getObjectId?: (object: any) => string,
+  timeout = 100,
+): WebSocketAPIMessageCallback<any> => {
+  const updateTimeout: {
+    [key: string]: number;
+  } = {};
+
+  const objectsById: {
+    [key: string]: any;
+  } = {};
+  const objects: any[] = [];
+
+  return (data: WebSocketAPIMessageEventData<any>) => {
+    const { source, content } = data;
+    if (updateTimeout[source]) {
+      window.clearTimeout(updateTimeout[source]);
+    }
+
+    if (getObjectId) {
+      objectsById[getObjectId(content)] = content;
+    } else {
+      objects.push(content);
+    }
+
+    updateTimeout[source] = window.setTimeout(() => {
+      const objectToReturn = getObjectId ? Object.values(objectsById) : objects;
+      onUpdate(objectToReturn);
+    }, timeout);
+  };
+};
+
+export default debounceWebsocketMessages;

package/src/common/utils/getLayersAsFlatArray.ts

@@ -0,0 +1,17 @@
+// TODO: I use any to avoid circular dependency  with common/layers/layer
+/** @private */
+const getLayersAsFlatArray = (layersOrLayer: any | any[]): any[] => {
+  let layers = layersOrLayer;
+  if (!Array.isArray(layers)) {
+    layers = [layersOrLayer as any];
+  }
+  let flatLayers: any[] = [];
+  layers.forEach((layer: any) => {
+    flatLayers.push(layer);
+    const { children } = layer;
+    flatLayers = flatLayers.concat(getLayersAsFlatArray(children || []));
+  });
+  return flatLayers;
+};
+
+export default getLayersAsFlatArray;

package/src/common/utils/getMapboxMapCopyrights.test.js

@@ -0,0 +1,47 @@
+import getMapboxMapCopyrights from './getMapboxMapCopyrights';
+
+describe('getMapboxMapCopyrights()', () => {
+  test('returns an empty array if map is not defined', () => {
+    expect(getMapboxMapCopyrights().length).toBe(0);
+  });
+
+  test('returns an empty array if map.style is not defined', () => {
+    expect(getMapboxMapCopyrights({}).length).toBe(0);
+  });
+
+  test('returns non depluicated copyrights in an array', () => {
+    expect(
+      getMapboxMapCopyrights({
+        style: {
+          sourceCaches: {
+            used: {
+              used: true,
+              getSource() {
+                return {
+                  attribution:
+                    '<a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a> <a href="https://www.openstreetmap.org/about/" target="_blank">&copy; OpenStreetMap contributors</a>',
+                };
+              },
+            },
+            'not used': {
+              used: false,
+            },
+            'also used': {
+              used: true,
+              getSource() {
+                return {
+                  attribution:
+                    '<a href="https://www.openmaptiles.org/" target="_blank">&copy; OpenMapTiles</a> <a href="https://www.imagico.de/" target="_blank">&copy; imagico</a>',
+                };
+              },
+            },
+          },
+        },
+      }),
+    ).toEqual([
+      '<a href="https://www.openmaptiles.org/" target="_blank">© OpenMapTiles</a>',
+      '<a href="https://www.openstreetmap.org/about/" target="_blank">© OpenStreetMap contributors</a>',
+      '<a href="https://www.imagico.de/" target="_blank">© imagico</a>',
+    ]);
+  });
+});

package/src/common/utils/getMapboxMapCopyrights.ts

@@ -0,0 +1,52 @@
+import removeDuplicate from './removeDuplicate';
+
+export interface Source {
+  attribution: string;
+  options: {
+    attribution: string;
+  };
+}
+
+export interface SourceCache {
+  used: boolean;
+  getSource: () => Source;
+}
+
+/**
+ * Return the copyright a Mapbox map.
+ * @param {mapboxgl.Map | maplibregl.Map} map A Mapbox map
+ * @private
+ */
+const getMapboxMapCopyrights = (map: mapboxgl.Map | maplibregl.Map) => {
+  if (!map) {
+    return [];
+  }
+  // @ts-ignore
+  const { style } = map;
+  if (!style) {
+    return [];
+  }
+  const { sourceCaches } = style;
+  let copyrights: string[] = [];
+
+  Object.values(sourceCaches as SourceCache[]).forEach(
+    (sourceCache: SourceCache) => {
+      if (sourceCache.used as boolean) {
+        const source = sourceCache.getSource();
+
+        const attribution = // @ts-ignore
+          source.attribution || (source.options && source.options.attribution);
+
+        if (attribution) {
+          copyrights = copyrights.concat(
+            attribution.replace(/&copy;/g, '©').split(/(<a.*?<\/a>)/),
+          );
+        }
+      }
+    },
+  );
+
+  return removeDuplicate(copyrights);
+};
+
+export default getMapboxMapCopyrights;

package/src/common/utils/getMapboxRender.ts

@@ -0,0 +1,104 @@
+/* eslint-disable no-underscore-dangle */
+import { RenderFunction } from 'ol/layer/Layer';
+import type { FrameState } from 'ol/Map';
+import { toLonLat } from 'ol/proj';
+import type { MapboxLayer } from '../../ol';
+/**
+ * Return the render function fo the olLayer of a MaplibreLayer
+ * @private
+ */
+export default function getMapboxRender(
+  mapoxLayer: MapboxLayer,
+): RenderFunction {
+  // We cretae emptyDiv only in render finction to work with serverside rendering
+  let emptyDiv: HTMLElement;
+  return (frameState: FrameState) => {
+    const { map, mbMap, renderState, olLayer } = mapoxLayer;
+    if (!map || !mbMap) {
+      if (!emptyDiv) {
+        emptyDiv = document.createElement('div');
+      }
+      return emptyDiv;
+    }
+    let changed = false;
+    const canvas = mbMap.getCanvas();
+    const { viewState } = frameState;
+
+    const visible = olLayer?.getVisible();
+    if (renderState && renderState?.visible !== visible) {
+      canvas.style.display = visible ? 'block' : 'none';
+      renderState.visible = visible;
+      // Needed since mapbox-gl 1.9.0.
+      // Without you don't see others ol layers on top.
+      canvas.style.position = 'absolute';
+    }
+
+    const opacity = olLayer?.getOpacity();
+    if (canvas && renderState && renderState.opacity !== opacity) {
+      // @ts-ignore
+      canvas.style.opacity = opacity;
+      renderState.opacity = opacity;
+    }
+
+    // adjust view parameters in mapbox
+    const { rotation } = viewState;
+    if (renderState && renderState.rotation !== rotation) {
+      mbMap.rotateTo((-(rotation || 0) * 180) / Math.PI, {
+        animate: false,
+      });
+      changed = true;
+      renderState.rotation = rotation;
+    }
+
+    if (
+      renderState &&
+      renderState.center &&
+      (renderState.zoom !== viewState.zoom ||
+        renderState.center[0] !== viewState.center[0] ||
+        renderState.center[1] !== viewState.center[1])
+    ) {
+      mbMap.jumpTo({
+        center: toLonLat(viewState.center) as [number, number],
+        zoom: viewState.zoom - 1,
+      });
+      changed = true;
+      renderState.zoom = viewState.zoom;
+      renderState.center = viewState.center;
+    }
+
+    const size = map.getSize() || [0, 0];
+    if (
+      renderState &&
+      renderState.size &&
+      (renderState.size[0] !== size[0] || renderState.size[1] !== size[1])
+    ) {
+      changed = true;
+      renderState.size = size;
+    }
+
+    // cancel the scheduled update & trigger synchronous redraw
+    // see https://github.com/mapbox/mapbox-gl-js/issues/7893#issue-408992184
+    // NOTE: THIS MIGHT BREAK WHEN UPDATING MAPBOX
+    // @ts-ignore
+    if (mbMap && mbMap.style && mbMap.isStyleLoaded() && changed) {
+      try {
+        // @ts-ignore
+        if (mbMap._frame) {
+          // @ts-ignore
+          mbMap._frame.cancel();
+          // @ts-ignore
+          mbMap._frame = null;
+        }
+        // @ts-ignore
+        mbMap._render();
+      } catch (err) {
+        // ignore render errors because it's probably related to
+        // a render during an update of the style.
+        // eslint-disable-next-line no-console
+        console.warn(err);
+      }
+    }
+
+    return mbMap.getContainer();
+  };
+}

package/src/common/utils/getMaplibreRender.ts

@@ -0,0 +1,54 @@
+import { toLonLat } from 'ol/proj';
+import { toDegrees } from 'ol/math';
+import type { FrameState } from 'ol/Map';
+import type { RenderFunction } from 'ol/layer/Layer';
+import type { MaplibreLayer } from '../../ol';
+
+/**
+ * Return the render function fo the olLayer of a MaplibreLayer
+ * @private
+ *
+ */
+
+export default function getMaplibreRender(
+  maplibreLayer: MaplibreLayer,
+): RenderFunction {
+  let emptyDiv: HTMLElement;
+  return (frameState: FrameState) => {
+    const { map, mbMap, olLayer } = maplibreLayer;
+    if (!map || !mbMap) {
+      if (!emptyDiv) {
+        emptyDiv = document.createElement('div');
+      }
+      return emptyDiv;
+    }
+
+    const canvas = mbMap.getCanvas();
+    const { viewState } = frameState;
+
+    const opacity = olLayer?.getOpacity() || 1;
+    canvas.style.opacity = `${opacity}`;
+
+    // adjust view parameters in mapbox
+    mbMap.jumpTo({
+      center: toLonLat(viewState.center) as [number, number],
+      zoom: viewState.zoom - 1,
+      bearing: toDegrees(-viewState.rotation),
+    });
+
+    if (!canvas.isConnected) {
+      // The canvas is not connected to the DOM, request a map rendering at the next animation frame
+      // to set the canvas size.
+      map.render();
+    } else if (
+      canvas.width !== frameState.size[0] ||
+      canvas.height !== frameState.size[1]
+    ) {
+      mbMap.resize();
+    }
+
+    mbMap.redraw();
+
+    return mbMap.getContainer();
+  };
+}

package/{common/utils/getRealtimeModeSuffix.d.ts → src/common/utils/getRealtimeModeSuffix.ts}

@@ -1,10 +1,12 @@
 import type { RealtimeMode } from '../../types';
 import type { RealtimeModesType } from '../../api/RealtimeAPI';
+
 /**
  * Get the websocket channel suffix, depending on the current mode.
  * @param {String} mode Mode 'topographic' ou 'schematic'.
  * @private
  */
-declare const getModeSuffix: (mode: RealtimeMode, modes: RealtimeModesType) => string;
+const getModeSuffix = (mode: RealtimeMode, modes: RealtimeModesType): string =>
+  mode === modes.SCHEMATIC ? '_schematic' : '';
+
 export default getModeSuffix;
-//# sourceMappingURL=getRealtimeModeSuffix.d.ts.map

package/src/common/utils/getUrlWithParams.ts

@@ -0,0 +1,21 @@
+/**
+ * Return the styleUrl with apiKey parameters set.
+ * @param {string} url a url.
+ * @param {Object<String,String>} params a list of key/value pair to add to the url.
+ * @private
+ */
+const getUrlWithParams = (url: string, params: Object): URL => {
+  // Clean requets parameters, removing undefined and null values.
+  const newUrl = new URL(url);
+
+  const searchParams = params || {};
+  Object.entries(searchParams).forEach(([key, value]) => {
+    if (value !== undefined && value !== null) {
+      newUrl.searchParams.set(key, value);
+    }
+  });
+
+  return newUrl;
+};
+
+export default getUrlWithParams;