@reltio/components 1.4.2006 → 1.4.2007

package/cjs/ReltioMap/components/TopCenterMapControls/TopCenterMapControls.js

@@ -10,14 +10,15 @@ var FormControlLabel_1 = __importDefault(require("@mui/material/FormControlLabel
 var Checkbox_1 = __importDefault(require("@mui/material/Checkbox"));
 var styles_1 = require("./styles");
 var TopCenterMapControls = function (_a) {
-    var isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
+    var className = _a.className, isSearchOnMapMove = _a.isSearchOnMapMove, onChangeIsSearchOnMapMove = _a.onChangeIsSearchOnMapMove;
     var styles = (0, styles_1.useStyles)();
     var onChange = function (event) {
         onChangeIsSearchOnMapMove(event.target.checked);
     };
-    return (react_1.default.createElement(FormControlLabel_1.default, { classes: {
-            root: styles.container,
-            label: styles.label
-        }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') }));
+    return (react_1.default.createElement("div", { className: className },
+        react_1.default.createElement(FormControlLabel_1.default, { classes: {
+                root: styles.container,
+                label: styles.label
+            }, control: react_1.default.createElement(Checkbox_1.default, { checked: isSearchOnMapMove, onChange: onChange, className: styles.checkbox }), label: ui_i18n_1.default.text('Search as I move the map') })));
 };
 exports.TopCenterMapControls = TopCenterMapControls;

package/cjs/ReltioMap/components/TopRightMapControls/TopRightMapControls.d.ts

@@ -38,11 +38,12 @@ export declare const ButtonWithTooltip: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLButtonElement>;
 }, "color" | "size" | "disabled" | "tabIndex" | "children" | "sx" | "action" | keyof import("@mui/material/OverridableComponent").CommonProps | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "href" | "startIcon" | "disableElevation" | "endIcon" | "fullWidth" | "variant">, "ref"> & React.RefAttributes<HTMLElement>>;
 type Props = {
+    className?: string;
     onDrawingModeChanged: (value: DrawingMode | null) => void;
     drawingMode: DrawingMode | null;
     drawingModes: DrawingModes;
     hasActiveOverlay: boolean;
     onClearOverlay: () => void;
 };
-export declare const TopRightMapControls: ({ drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
+export declare const TopRightMapControls: ({ className, drawingMode, drawingModes, hasActiveOverlay, onDrawingModeChanged, onClearOverlay }: Props) => React.JSX.Element;
 export {};

package/cjs/ReltioMap/components/TopRightMapControls/TopRightMapControls.js

@@ -5,6 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TopRightMapControls = exports.ButtonWithTooltip = void 0;
 var react_1 = __importDefault(require("react"));
+var classnames_1 = __importDefault(require("classnames"));
 var ui_i18n_1 = __importDefault(require("ui-i18n"));
 var Button_1 = __importDefault(require("@mui/material/Button"));
 var withTooltip_1 = require("../../../HOCs/withTooltip");
@@ -25,12 +26,12 @@ var getIcon = function (mode) {
     }
 };
 var TopRightMapControls = function (_a) {
-    var drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
+    var className = _a.className, drawingMode = _a.drawingMode, _b = _a.drawingModes, drawingModes = _b === void 0 ? [] : _b, hasActiveOverlay = _a.hasActiveOverlay, onDrawingModeChanged = _a.onDrawingModeChanged, onClearOverlay = _a.onClearOverlay;
     var styles = (0, styles_1.useStyles)();
     var changeDrawingModeTo = function (drawingMode) { return function () {
         onDrawingModeChanged(drawingMode);
     }; };
-    return (react_1.default.createElement("div", { className: styles.container }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
+    return (react_1.default.createElement("div", { className: (0, classnames_1.default)(styles.container, className) }, drawingMode || hasActiveOverlay ? (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Clear area'), className: styles.button, onClick: hasActiveOverlay ? onClearOverlay : changeDrawingModeTo(null) },
         react_1.default.createElement(HighlightOff_1.default, { className: styles.icon }))) : (drawingModes.map(function (mode) {
         var Icon = getIcon(mode);
         return (react_1.default.createElement(exports.ButtonWithTooltip, { tooltipTitle: ui_i18n_1.default.text('Draw area'), key: mode, className: styles.button, onClick: changeDrawingModeTo(mode) },

package/cjs/ReltioMap/components/TopRightMapControls/styles.js

@@ -4,7 +4,7 @@ exports.useStyles = void 0;
 var styles_1 = require("@mui/styles");
 exports.useStyles = (0, styles_1.makeStyles)({
     container: {
-        margin: '2px',
+        padding: '2px',
         display: 'flex',
         alignItems: 'center'
     },

package/cjs/ReltioMap/helpers.d.ts

@@ -1,5 +1,6 @@
-import { DrawingMode, EntityMarker, Overlay, MapInstance } from './types';
+import { GeoPoint } from '@reltio/mdm-sdk';
+import { DrawingMode, Overlay, MapInstance } from './types';
 export declare const getMapBoundsPolygon: (map: MapInstance) => any[];
 export declare const getDrawingMode: (drawingMode: DrawingMode) => google.maps.drawing.OverlayType.CIRCLE | google.maps.drawing.OverlayType.POLYGON;
-export declare const fitMapBoundsForMarkers: (markers: EntityMarker[], map: MapInstance, overlay: Overlay) => void;
+export declare const fitMapBoundsForMarkers: (markers: GeoPoint[], map: MapInstance, overlay: Overlay) => void;
 export declare const fitMapBoundsForOverlay: (map: MapInstance, overlay: Overlay, existingBounds?: any) => void;

package/cjs/ReltioMap/types.d.ts

@@ -1,8 +1,11 @@
-import { GeoPoint } from '@reltio/mdm-sdk';
+import { Marker } from '@googlemaps/markerclusterer';
 export type DrawingMode = 'circle' | 'polygon';
 export type DrawingModes = DrawingMode[];
-export type EntityMarker = GeoPoint & {
-    visible?: boolean;
+export type ClusteredMarkersOptions = {
+    maxZoom?: number;
+    calculator?: (markers: Marker[]) => {
+        title: string;
+    };
 };
 export type OverlayPath = Array<{
     lat: number;

package/cjs/hooks/useMarkers/referenceHelpers.js

@@ -60,6 +60,29 @@ exports.getPointsFromReference = void 0;
 var ramda_1 = require("ramda");
 var mdm_sdk_1 = require("@reltio/mdm-sdk");
 var helpers_1 = require("./helpers");
+var createCachedDecodeAddress = function (maxCacheSize) {
+    if (maxCacheSize === void 0) { maxCacheSize = 500; }
+    var cache = new Map();
+    return function (_a) {
+        var servicesPath = _a.servicesPath, address = _a.address;
+        if (cache.has(address)) {
+            var cached = cache.get(address);
+            // maintain LRU cache - move recently used item to the end of the queue
+            cache.delete(address);
+            cache.set(address, cached);
+            return cached;
+        }
+        var promise = (0, mdm_sdk_1.decodeAddress)({ servicesPath: servicesPath, address: address });
+        cache.set(address, promise);
+        promise.catch(function () { return cache.delete(address); });
+        if (cache.size > maxCacheSize) {
+            // maintain LRU cache - remove the oldest (first) item
+            cache.delete(cache.keys().next().value);
+        }
+        return promise;
+    };
+};
+var cachedDecodeAddress = createCachedDecodeAddress();
 var getGeoLocation = function (servicesPath, entity, attributes, metadata, refAttribute, name) { return __awaiter(void 0, void 0, void 0, function () {
     var entityType, results, geoLocation, results, response, _a;
     var _b;
@@ -98,7 +121,7 @@ var getGeoLocation = function (servicesPath, entity, attributes, metadata, refAt
                 _c.label = 1;
             case 1:
                 _c.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, (0, mdm_sdk_1.decodeAddress)({ servicesPath: servicesPath, address: refAttribute.label })];
+                return [4 /*yield*/, cachedDecodeAddress({ servicesPath: servicesPath, address: refAttribute.label })];
             case 2:
                 response = _c.sent();
                 return [2 /*return*/, response.location];
@@ -162,7 +185,7 @@ var getPointsFromReference = function (servicesPath_1, metadata_1) {
                             return getGeoLocation(servicesPath, entity, pointSource, metadata, refAttribute, name)
                                 .then(function (points) {
                                 if (!points && entity.label) {
-                                    return (0, mdm_sdk_1.decodeAddress)({ servicesPath: servicesPath, address: entity.label })
+                                    return cachedDecodeAddress({ servicesPath: servicesPath, address: entity.label })
                                         .then(function (response) { return response.location; })
                                         .catch(function () { return null; });
                                 }

package/cjs/hooks/useMarkers/referenceHelpers.test.js

@@ -338,6 +338,15 @@ describe('from reference strategy test', function () {
                     expect(points[0].entity).toEqual(entities[0]);
                     expect(points[0].label).toBe('label');
                     expect(points[0].point).toEqual({ lat: 321, lng: 123 });
+                    expect(mdm_sdk_1.decodeAddress).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, (0, referenceHelpers_1.getPointsFromReference)(servicesPath, defaultMetadata, entities)];
+                case 2:
+                    points = _a.sent();
+                    expect(points[0].id).toBe('entities/111');
+                    expect(points[0].entity).toEqual(entities[0]);
+                    expect(points[0].label).toBe('label');
+                    expect(points[0].point).toEqual({ lat: 321, lng: 123 });
+                    expect(mdm_sdk_1.decodeAddress).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
             }
         });
@@ -479,7 +488,7 @@ describe('from reference strategy test', function () {
             switch (_a.label) {
                 case 0:
                     metadata = (0, ramda_1.assocPath)(['entityTypes', 0, 'attributes', 0, 'attributes', 0, 'masking'], { regex: '***' }, defaultMetadata);
-                    return [4 /*yield*/, (0, referenceHelpers_1.getPointsFromReference)(servicesPath, metadata, defaultEntities)];
+                    return [4 /*yield*/, (0, referenceHelpers_1.getPointsFromReference)(servicesPath, metadata, defaultEntities.map(function (entity) { return (__assign(__assign({}, entity), { label: '***' })); }))];
                 case 1:
                     points = _a.sent();
                     expect(points).toEqual([]);

package/hooks/useMarkers/referenceHelpers.js

@@ -57,6 +57,29 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 import { identity, flatten } from 'ramda';
 import { decodeAddress, getEntityType, wrapInArrayIfNeeded, hasMaskingByUris } from '@reltio/mdm-sdk';
 import { getPointsFromAttributes, isSet } from './helpers';
+var createCachedDecodeAddress = function (maxCacheSize) {
+    if (maxCacheSize === void 0) { maxCacheSize = 500; }
+    var cache = new Map();
+    return function (_a) {
+        var servicesPath = _a.servicesPath, address = _a.address;
+        if (cache.has(address)) {
+            var cached = cache.get(address);
+            // maintain LRU cache - move recently used item to the end of the queue
+            cache.delete(address);
+            cache.set(address, cached);
+            return cached;
+        }
+        var promise = decodeAddress({ servicesPath: servicesPath, address: address });
+        cache.set(address, promise);
+        promise.catch(function () { return cache.delete(address); });
+        if (cache.size > maxCacheSize) {
+            // maintain LRU cache - remove the oldest (first) item
+            cache.delete(cache.keys().next().value);
+        }
+        return promise;
+    };
+};
+var cachedDecodeAddress = createCachedDecodeAddress();
 var getGeoLocation = function (servicesPath, entity, attributes, metadata, refAttribute, name) { return __awaiter(void 0, void 0, void 0, function () {
     var entityType, results, geoLocation, results, response, _a;
     var _b;
@@ -95,7 +118,7 @@ var getGeoLocation = function (servicesPath, entity, attributes, metadata, refAt
                 _c.label = 1;
             case 1:
                 _c.trys.push([1, 3, , 4]);
-                return [4 /*yield*/, decodeAddress({ servicesPath: servicesPath, address: refAttribute.label })];
+                return [4 /*yield*/, cachedDecodeAddress({ servicesPath: servicesPath, address: refAttribute.label })];
             case 2:
                 response = _c.sent();
                 return [2 /*return*/, response.location];
@@ -159,7 +182,7 @@ export var getPointsFromReference = function (servicesPath_1, metadata_1) {
                             return getGeoLocation(servicesPath, entity, pointSource, metadata, refAttribute, name)
                                 .then(function (points) {
                                 if (!points && entity.label) {
-                                    return decodeAddress({ servicesPath: servicesPath, address: entity.label })
+                                    return cachedDecodeAddress({ servicesPath: servicesPath, address: entity.label })
                                         .then(function (response) { return response.location; })
                                         .catch(function () { return null; });
                                 }

package/hooks/useMarkers/referenceHelpers.test.js

@@ -336,6 +336,15 @@ describe('from reference strategy test', function () {
                     expect(points[0].entity).toEqual(entities[0]);
                     expect(points[0].label).toBe('label');
                     expect(points[0].point).toEqual({ lat: 321, lng: 123 });
+                    expect(decodeAddress).toHaveBeenCalledTimes(1);
+                    return [4 /*yield*/, getPointsFromReference(servicesPath, defaultMetadata, entities)];
+                case 2:
+                    points = _a.sent();
+                    expect(points[0].id).toBe('entities/111');
+                    expect(points[0].entity).toEqual(entities[0]);
+                    expect(points[0].label).toBe('label');
+                    expect(points[0].point).toEqual({ lat: 321, lng: 123 });
+                    expect(decodeAddress).toHaveBeenCalledTimes(1);
                     return [2 /*return*/];
             }
         });
@@ -477,7 +486,7 @@ describe('from reference strategy test', function () {
             switch (_a.label) {
                 case 0:
                     metadata = assocPath(['entityTypes', 0, 'attributes', 0, 'attributes', 0, 'masking'], { regex: '***' }, defaultMetadata);
-                    return [4 /*yield*/, getPointsFromReference(servicesPath, metadata, defaultEntities)];
+                    return [4 /*yield*/, getPointsFromReference(servicesPath, metadata, defaultEntities.map(function (entity) { return (__assign(__assign({}, entity), { label: '***' })); }))];
                 case 1:
                     points = _a.sent();
                     expect(points).toEqual([]);

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.2006",
+  "version": "1.4.2007",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./index.js",
   "dependencies": {
     "@fluentui/react-context-selector": "^9.1.26",
-    "@react-google-maps/api": "2.7.0",
+    "@googlemaps/markerclusterer": "^2.5.3",
     "@react-sigma/core": "3.4.0",
     "@reltio/mdm-sdk": "^1.4.1893",
+    "@vis.gl/react-google-maps": "^1.3.0",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",
     "d3-hierarchy": "^2.0.0",