@geospatial-sdk/core 0.0.5-alpha.1

package/lib/utils/map-context-diff.test.ts

@@ -0,0 +1,577 @@
+import { MapContext, MapContextDiff, MapContextLayer } from "../model";
+import { deepFreeze } from "./freeze";
+import {
+  computeMapContextDiff,
+  getLayerHash,
+  isLayerSame,
+  isLayerSameAndUnchanged,
+} from "./map-context-diff";
+
+const SAMPLE_CONTEXT: MapContext = deepFreeze({
+  view: {
+    center: [10, 20],
+    zoom: 3,
+    extent: [40, 50, 60, 70],
+  },
+  layers: [],
+});
+
+const SAMPLE_LAYER1: MapContextLayer = deepFreeze({
+  type: "wms",
+  url: "http://abc.org/wms",
+  name: "myLayer",
+  extras: { myField: "abc" },
+});
+const SAMPLE_LAYER2: MapContextLayer = deepFreeze({
+  type: "xyz",
+  url: "http://abc.org/tiles",
+  extras: { myField2: "123" },
+});
+const SAMPLE_LAYER3: MapContextLayer = deepFreeze({
+  type: "geojson",
+  data: '{ "type": "Feature", "properties": {}}',
+  extras: { myField3: "000" },
+});
+const SAMPLE_LAYER4: MapContextLayer = deepFreeze({
+  type: "wfs",
+  url: "http://abc.org/wfs",
+  featureType: "myFeatureType",
+  extras: { myField4: "aaa" },
+});
+const SAMPLE_LAYER5: MapContextLayer = deepFreeze({
+  type: "xyz",
+  url: "http://my.tiles/server",
+});
+
+describe("Context diff utils", () => {
+  describe("isLayerSame", () => {
+    describe("layers with id", () => {
+      it("compares non-strictly by id", () => {
+        expect(
+          isLayerSame(
+            { ...SAMPLE_LAYER1, id: "a" },
+            { ...SAMPLE_LAYER1, id: "b" },
+          ),
+        ).toBe(false);
+        expect(
+          isLayerSame(
+            { ...SAMPLE_LAYER1, id: "ab" },
+            { ...SAMPLE_LAYER2, id: "ab" },
+          ),
+        ).toBe(true);
+        expect(
+          isLayerSame(
+            { ...SAMPLE_LAYER1, id: 1 },
+            { ...SAMPLE_LAYER2, id: "01" },
+          ),
+        ).toBe(true);
+        expect(
+          isLayerSame({ ...SAMPLE_LAYER1, id: 1 }, { ...SAMPLE_LAYER2, id: 1 }),
+        ).toBe(true);
+        expect(
+          isLayerSame({ ...SAMPLE_LAYER1, id: 1 }, { ...SAMPLE_LAYER1, id: 2 }),
+        ).toBe(false);
+      });
+    });
+    describe("layers without id", () => {
+      it("compares by properties", () => {
+        expect(isLayerSame(SAMPLE_LAYER1, SAMPLE_LAYER1)).toBe(true);
+        expect(
+          isLayerSame(SAMPLE_LAYER1, { ...SAMPLE_LAYER1, name: "abc" }),
+        ).toBe(false);
+        expect(
+          isLayerSame(
+            {
+              ...SAMPLE_LAYER1,
+              url: "http://abc.org",
+              name: SAMPLE_LAYER1.name,
+            },
+            { ...SAMPLE_LAYER1, url: "http://abc.org" },
+          ),
+        ).toBe(true);
+        expect(isLayerSame(SAMPLE_LAYER1, SAMPLE_LAYER2)).toBe(false);
+      });
+      it("ignores extras prop", () => {
+        expect(
+          isLayerSame(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            extras: { otherProp: "abc" },
+          }),
+        ).toBe(true);
+        expect(
+          isLayerSame(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            extras: undefined,
+          }),
+        ).toBe(true);
+        const { extras, ...layer } = SAMPLE_LAYER1;
+        expect(isLayerSame(SAMPLE_LAYER1, layer)).toBe(true);
+      });
+    });
+    describe("layers with and without id", () => {
+      it("compares by properties", () => {
+        expect(
+          isLayerSame(SAMPLE_LAYER1, { ...SAMPLE_LAYER1, id: "123" }),
+        ).toBe(false);
+        expect(
+          isLayerSame(
+            { ...SAMPLE_LAYER1, id: "123" },
+            { id: "123", ...SAMPLE_LAYER1, name: SAMPLE_LAYER1.name },
+          ),
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe("isLayerSameAndUnchanged", () => {
+    describe("layers with id", () => {
+      it("compares non-strictly by id and version field", () => {
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: "a" },
+            { ...SAMPLE_LAYER1, id: "b" },
+          ),
+        ).toBe(false);
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: "a" },
+            { ...SAMPLE_LAYER2, id: "a" },
+          ),
+        ).toBe(true);
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: "ab", version: 2 },
+            { ...SAMPLE_LAYER2, id: "ab", version: 2 },
+          ),
+        ).toBe(true);
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: "ab", version: 2 },
+            { ...SAMPLE_LAYER1, id: "ab", version: 1 },
+          ),
+        ).toBe(false);
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: 1 },
+            { ...SAMPLE_LAYER1, id: "01", version: 3 },
+          ),
+        ).toBe(false);
+      });
+    });
+    describe("layers without id", () => {
+      it("compares by properties, including extras", () => {
+        expect(isLayerSameAndUnchanged(SAMPLE_LAYER1, SAMPLE_LAYER1)).toBe(
+          true,
+        );
+        expect(
+          isLayerSameAndUnchanged(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            name: "abc",
+          }),
+        ).toBe(false);
+        expect(
+          isLayerSameAndUnchanged(
+            {
+              ...SAMPLE_LAYER1,
+              url: "http://abc.org",
+              name: SAMPLE_LAYER1.name,
+            },
+            { ...SAMPLE_LAYER1, url: "http://abc.org" },
+          ),
+        ).toBe(true);
+        expect(isLayerSameAndUnchanged(SAMPLE_LAYER1, SAMPLE_LAYER2)).toBe(
+          false,
+        );
+      });
+      it("takes into account extras prop", () => {
+        expect(
+          isLayerSameAndUnchanged(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            extras: { otherProp: "abc" },
+          }),
+        ).toBe(false);
+        expect(
+          isLayerSameAndUnchanged(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            extras: undefined,
+          }),
+        ).toBe(false);
+        const { extras, ...layer } = SAMPLE_LAYER1;
+        expect(isLayerSameAndUnchanged(SAMPLE_LAYER1, layer)).toBe(false);
+      });
+    });
+    describe("layers with and without id", () => {
+      it("compares by properties", () => {
+        expect(
+          isLayerSameAndUnchanged(SAMPLE_LAYER1, {
+            ...SAMPLE_LAYER1,
+            id: "123",
+          }),
+        ).toBe(false);
+        expect(
+          isLayerSameAndUnchanged(
+            { ...SAMPLE_LAYER1, id: "123" },
+            { id: "123", ...SAMPLE_LAYER1, name: SAMPLE_LAYER1.name },
+          ),
+        ).toBe(true);
+      });
+    });
+  });
+
+  describe("computeMapContextDiff", () => {
+    let contextOld: MapContext;
+    let contextNew: MapContext;
+    let diff: MapContextDiff;
+
+    describe("no change", () => {
+      beforeEach(() => {
+        contextOld = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, SAMPLE_LAYER1],
+        };
+        contextNew = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, SAMPLE_LAYER1],
+        };
+      });
+      it("outputs the correct diff", () => {
+        diff = computeMapContextDiff(contextNew, contextOld);
+        expect(diff).toEqual({
+          layersAdded: [],
+          layersChanged: [],
+          layersRemoved: [],
+          layersReordered: [],
+          viewChanges: {},
+        });
+      });
+    });
+
+    describe("layers added", () => {
+      beforeEach(() => {
+        contextOld = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER1],
+        };
+        contextNew = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, SAMPLE_LAYER1, SAMPLE_LAYER4],
+        };
+      });
+      it("outputs the correct diff", () => {
+        diff = computeMapContextDiff(contextNew, contextOld);
+        expect(diff).toEqual({
+          layersAdded: [
+            {
+              layer: SAMPLE_LAYER2,
+              position: 0,
+            },
+            {
+              layer: SAMPLE_LAYER4,
+              position: 2,
+            },
+          ],
+          layersChanged: [],
+          layersRemoved: [],
+          layersReordered: [],
+          viewChanges: {},
+        });
+      });
+    });
+
+    describe("layers removed", () => {
+      beforeEach(() => {
+        contextOld = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, SAMPLE_LAYER1, SAMPLE_LAYER4],
+        };
+        contextNew = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER4],
+        };
+      });
+      it("outputs the correct diff", () => {
+        diff = computeMapContextDiff(contextNew, contextOld);
+        expect(diff).toEqual({
+          layersAdded: [],
+          layersChanged: [],
+          layersRemoved: [
+            {
+              layer: SAMPLE_LAYER2,
+              position: 0,
+            },
+            {
+              layer: SAMPLE_LAYER1,
+              position: 1,
+            },
+          ],
+          layersReordered: [],
+          viewChanges: {},
+        });
+      });
+    });
+
+    describe("layers changed", () => {
+      beforeEach(() => {
+        contextOld = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, { ...SAMPLE_LAYER1, id: 123, version: 3 }],
+        };
+        contextNew = {
+          ...SAMPLE_CONTEXT,
+          layers: [
+            { ...SAMPLE_LAYER2, extras: { prop: true } },
+            { ...SAMPLE_LAYER1, id: 123, version: 10 },
+          ],
+        };
+      });
+      it("outputs the correct diff", () => {
+        diff = computeMapContextDiff(contextNew, contextOld);
+        expect(diff).toEqual({
+          layersAdded: [],
+          layersChanged: [
+            {
+              layer: contextNew.layers[0],
+              position: 0,
+            },
+            {
+              layer: contextNew.layers[1],
+              position: 1,
+            },
+          ],
+          layersRemoved: [],
+          layersReordered: [],
+          viewChanges: {},
+        });
+      });
+    });
+
+    describe("reordering", () => {
+      describe("three layers reordered", () => {
+        beforeEach(() => {
+          contextOld = {
+            ...SAMPLE_CONTEXT,
+            layers: [SAMPLE_LAYER1, SAMPLE_LAYER2, SAMPLE_LAYER3],
+          };
+          contextNew = {
+            ...SAMPLE_CONTEXT,
+            layers: [SAMPLE_LAYER2, SAMPLE_LAYER1, SAMPLE_LAYER3],
+          };
+        });
+        it("outputs the correct diff", () => {
+          diff = computeMapContextDiff(contextNew, contextOld);
+          expect(diff).toEqual({
+            layersAdded: [],
+            layersChanged: [],
+            layersRemoved: [],
+            layersReordered: [
+              {
+                layer: SAMPLE_LAYER2,
+                newPosition: 0,
+                previousPosition: 1,
+              },
+              {
+                layer: SAMPLE_LAYER1,
+                newPosition: 1,
+                previousPosition: 0,
+              },
+            ],
+            viewChanges: {},
+          });
+        });
+      });
+
+      describe("four layers reordered", () => {
+        beforeEach(() => {
+          contextOld = {
+            ...SAMPLE_CONTEXT,
+            layers: [
+              SAMPLE_LAYER1,
+              SAMPLE_LAYER3,
+              SAMPLE_LAYER4,
+              SAMPLE_LAYER2,
+            ],
+          };
+          contextNew = {
+            ...SAMPLE_CONTEXT,
+            layers: [
+              SAMPLE_LAYER4,
+              SAMPLE_LAYER3,
+              SAMPLE_LAYER1,
+              SAMPLE_LAYER2,
+            ],
+          };
+        });
+        it("outputs the correct diff", () => {
+          diff = computeMapContextDiff(contextNew, contextOld);
+          expect(diff).toEqual({
+            layersAdded: [],
+            layersChanged: [],
+            layersRemoved: [],
+            layersReordered: [
+              {
+                layer: SAMPLE_LAYER4,
+                newPosition: 0,
+                previousPosition: 2,
+              },
+              {
+                layer: SAMPLE_LAYER1,
+                newPosition: 2,
+                previousPosition: 0,
+              },
+            ],
+            viewChanges: {},
+          });
+        });
+      });
+    });
+
+    describe("combined changes", () => {
+      let changedLayer: MapContextLayer;
+      beforeEach(() => {
+        changedLayer = { ...SAMPLE_LAYER3, extras: { prop: true } };
+        contextOld = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER1, SAMPLE_LAYER5, SAMPLE_LAYER3, SAMPLE_LAYER4],
+        };
+        contextNew = {
+          ...SAMPLE_CONTEXT,
+          layers: [SAMPLE_LAYER2, changedLayer, SAMPLE_LAYER5],
+        };
+      });
+      it("outputs the correct diff", () => {
+        diff = computeMapContextDiff(contextNew, contextOld);
+        expect(diff).toEqual({
+          layersAdded: [
+            {
+              layer: SAMPLE_LAYER2,
+              position: 0,
+            },
+          ],
+          layersChanged: [
+            {
+              layer: changedLayer,
+              position: 1,
+            },
+          ],
+          layersRemoved: [
+            {
+              layer: SAMPLE_LAYER1,
+              position: 0,
+            },
+            {
+              layer: SAMPLE_LAYER4,
+              position: 3,
+            },
+          ],
+          layersReordered: [
+            {
+              layer: changedLayer,
+              newPosition: 1,
+              previousPosition: 2,
+            },
+            {
+              layer: SAMPLE_LAYER5,
+              newPosition: 2,
+              previousPosition: 1,
+            },
+          ],
+          viewChanges: {},
+        });
+      });
+    });
+  });
+
+  describe("getLayerHash", () => {
+    it("works with serializable entities", () => {
+      expect(
+        getLayerHash({
+          ...SAMPLE_LAYER1,
+          extras: {
+            array: [11, 22, null, undefined],
+            object: {},
+            undef: undefined,
+          },
+        }),
+      ).toBeTypeOf("string");
+    });
+    it("ignores extra property by default", () => {
+      expect(
+        getLayerHash({
+          ...SAMPLE_LAYER1,
+          extras: {
+            array: [11, 22, null, undefined],
+            object: {},
+          },
+        }),
+      ).toEqual(
+        getLayerHash({
+          ...SAMPLE_LAYER1,
+          extras: { hello: "world" },
+        }),
+      );
+    });
+    it("works with non-serializable entities (but they are ignored)", () => {
+      const hash = getLayerHash(
+        {
+          ...SAMPLE_LAYER1,
+          extras: {
+            func: () => 123,
+            canvas: document.createElement("canvas"),
+          },
+        },
+        true,
+      );
+      expect(hash).toBeTypeOf("string");
+      expect(hash).toEqual(
+        getLayerHash(
+          {
+            ...SAMPLE_LAYER1,
+            extras: {
+              func: () => 456,
+              canvas: document.createElement("div"),
+            },
+          },
+          true,
+        ),
+      );
+      expect(hash).not.toEqual(
+        getLayerHash(
+          {
+            ...SAMPLE_LAYER1,
+            extras: {},
+          },
+          true,
+        ),
+      );
+    });
+    it("does not take into account properties order", () => {
+      expect(
+        getLayerHash(
+          {
+            type: "wms",
+            url: "http://abc.org/wms",
+            name: "myLayer",
+            extras: {
+              array: [1, 2, 3],
+              object: {},
+            },
+          },
+          true,
+        ),
+      ).toEqual(
+        getLayerHash(
+          {
+            extras: {
+              array: [1, 2, 3],
+              object: {},
+            },
+            url: "http://abc.org/wms",
+            type: "wms",
+            name: "myLayer",
+          },
+          true,
+        ),
+      );
+    });
+  });
+});

package/lib/utils/map-context-diff.ts

@@ -0,0 +1,144 @@
+import {
+  MapContext,
+  MapContextDiff,
+  MapContextLayer,
+  MapContextLayerPositioned,
+  MapContextLayerReordered,
+  MapContextView,
+} from "../model";
+
+export function getLayerHash(
+  layer: MapContextLayer,
+  includeExtras = false,
+): string {
+  function getHash(input: unknown): string {
+    if (input instanceof Object) {
+      const obj: Record<string, string> = {};
+      const keys = Object.keys(input).sort();
+      for (const key of keys) {
+        if (!includeExtras && key === "extras") continue;
+        obj[key] = getHash(input[key as keyof typeof input]);
+      }
+      const hash = JSON.stringify(obj)
+        .split("")
+        .reduce((prev, curr) => (prev << 5) - prev + curr.charCodeAt(0), 0);
+      return (hash >>> 0).toString();
+    } else {
+      return JSON.stringify(input);
+    }
+  }
+  return getHash(layer);
+}
+
+export function isLayerSame(
+  layerA: MapContextLayer,
+  layerB: MapContextLayer,
+): boolean {
+  if ("id" in layerA && "id" in layerB) {
+    return layerA.id == layerB.id;
+  }
+  return getLayerHash(layerA) === getLayerHash(layerB);
+}
+
+export function isLayerSameAndUnchanged(
+  layerA: MapContextLayer,
+  layerB: MapContextLayer,
+): boolean {
+  if ("id" in layerA && "id" in layerB) {
+    return layerA.id == layerB.id && layerA.version == layerB.version;
+  }
+  return getLayerHash(layerA, true) === getLayerHash(layerB, true);
+}
+
+/**
+ * The following logic is produced by identifying layers in both context
+ * and determining whether they have been added, removed, changed or reordered.
+ *
+ * Identifying layers to determine if they have been added/removed/reordered is done like so:
+ * 1. For layers with an `id` property, use non-strict equality on it (e.g. '2' and 2 are equivalent);
+ * 2. For layers without `id`, compute a hash of their base properties _excluding the `extras` property_
+ *
+ * Determining whether layers have changed is done like so:
+ * 1. For layers with an `id` property, the value of the `version` field is compared;
+ *    if values are different (using non-strict equality), then the layer is considered to have changed; otherwise
+ *    it is considered to have remained the same
+ * 2. For layers without `id`, a full hash is computed _including the `extras` property_;
+ *    this means that a layer which only had changes in its `extras` object will not be considered added/removed,
+ *    but only changed
+ *
+ * @param nextContext
+ * @param previousContext
+ */
+export function computeMapContextDiff(
+  nextContext: MapContext,
+  previousContext: MapContext,
+): MapContextDiff {
+  function getLayerPosition(
+    layer: MapContextLayer,
+    layers: MapContextLayer[],
+  ): number {
+    for (let i = 0; i < layers.length; i++) {
+      if (isLayerSame(layers[i], layer)) {
+        return i;
+      }
+    }
+    return -1;
+  }
+
+  const layersChanged: MapContextLayerPositioned[] = [];
+  const layersReordered: MapContextLayerReordered[] = [];
+  const layersRemoved: MapContextLayerPositioned[] = [];
+  const layersAdded: MapContextLayerPositioned[] = [];
+  const viewChanges: MapContextView = {};
+
+  // loop on prev context layers (for removed layers)
+  for (let i = 0; i < previousContext.layers.length; i++) {
+    const layer = previousContext.layers[i];
+    const nextPosition = getLayerPosition(layer, nextContext.layers);
+    const prevPosition = getLayerPosition(layer, previousContext.layers);
+    if (nextPosition === -1) {
+      layersRemoved.push({ layer, position: prevPosition });
+    }
+  }
+
+  // loop on next context layers (for added & updated)
+  for (let i = 0; i < nextContext.layers.length; i++) {
+    const layer = nextContext.layers[i];
+    const prevPosition = getLayerPosition(layer, previousContext.layers);
+    if (prevPosition === -1) {
+      layersAdded.push({ layer, position: i });
+    } else {
+      const prevLayer = previousContext.layers[prevPosition];
+      if (!isLayerSameAndUnchanged(layer, prevLayer)) {
+        layersChanged.push({ layer, position: i });
+      }
+    }
+  }
+
+  // look for moved layers
+  const prevLayersFiltered = previousContext.layers.filter(
+    (l) => !layersRemoved.find(({ layer }) => l === layer),
+  );
+  const nextLayersFiltered = nextContext.layers.filter(
+    (l) => !layersAdded.find(({ layer }) => l === layer),
+  );
+  for (let i = 0; i < nextLayersFiltered.length; i++) {
+    const layer = nextLayersFiltered[i];
+    const prevPosition = getLayerPosition(layer, prevLayersFiltered);
+    if (i !== prevPosition) {
+      layersReordered.push({
+        layer,
+        newPosition: getLayerPosition(layer, nextContext.layers),
+        previousPosition: getLayerPosition(layer, previousContext.layers),
+      });
+    }
+  }
+
+  return {
+    layersAdded,
+    layersChanged,
+    layersRemoved,
+    layersReordered,
+    viewChanges,
+  };
+}