@mwater/visualization 5.5.0 → 5.6.1

package/lib/ColorComponent.js

@@ -60,8 +60,8 @@ class ColorComponent extends react_1.default.Component {
         const rect = this.colorWellRef.getBoundingClientRect();
         const popupPosition = {
             position: "fixed",
-            top: `${rect.bottom + window.scrollY}px`,
-            left: `${rect.left + window.scrollX}px`,
+            top: `${rect.bottom}px`,
+            left: `${rect.left}px`,
             zIndex: 1070,
             backgroundColor: "white",
             border: "solid 1px #DDD",

package/lib/MWaterContextComponent.d.ts

@@ -8,7 +8,7 @@ export interface GlobalFiltersElementFactoryProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
     /** If true, return null element if not applicable to filterableTables */
     nullIfIrrelevant?: boolean;
 }

package/lib/MWaterGlobalFiltersComponent.d.ts

@@ -8,10 +8,10 @@ export interface MWaterGlobalFiltersComponentProps {
     dataSource: DataSource;
     filterableTables: string[];
     globalFilters?: GlobalFilter[];
-    onChange: (globalFilters: GlobalFilter[]) => void;
+    onChange?: (globalFilters: GlobalFilter[]) => void;
 }
 export default class MWaterGlobalFiltersComponent extends React.Component<MWaterGlobalFiltersComponentProps> {
     handleRegionsChange: (regions: any) => void;
     handleManagedByChange: (managedBy: any) => void;
-    render(): React.DetailedReactHTMLElement<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+    render(): React.JSX.Element;
 }

package/lib/MWaterGlobalFiltersComponent.js

@@ -28,12 +28,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const expressions_ui_1 = require("@mwater/expressions-ui");
 // Control to edit the global filters (_managed_by and admin_region)
 class MWaterGlobalFiltersComponent extends react_1.default.Component {
     handleRegionsChange = (regions) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within any" && gf.columnId === "admin_region"));
         // Add new filter if present
@@ -48,6 +50,9 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         this.props.onChange(globalFilters);
     };
     handleManagedByChange = (managedBy) => {
+        if (!this.props.onChange) {
+            return;
+        }
         // Remove existing filter
         const globalFilters = lodash_1.default.filter(this.props.globalFilters || [], (gf) => !(gf.op === "within" && gf.columnId === "_managed_by"));
         // Add new filter if present
@@ -79,25 +84,11 @@ class MWaterGlobalFiltersComponent extends react_1.default.Component {
         else {
             adminRegions = null;
         }
-        return R("div", null, R(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: managedBy,
-            onChange: this.handleManagedByChange,
-            idTable: "groups",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Organizations`,
-            multi: false,
-            filter: { type: "field", tableAlias: "main", column: "canManageEntities" }
-        })), R(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true }, R(expressions_ui_1.IdLiteralComponent, {
-            value: adminRegions,
-            onChange: this.handleRegionsChange,
-            idTable: "admin_regions",
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            placeholder: T `All Regions`,
-            multi: true,
-            orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }]
-        })));
+        return (react_1.default.createElement("div", null,
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites managed by`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: managedBy, onChange: this.props.onChange ? this.handleManagedByChange : undefined, idTable: "groups", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Organizations`, multi: false, filter: { type: "field", tableAlias: "main", column: "canManageEntities" } })),
+            react_1.default.createElement(ui.FormGroup, { label: T `Only sites located in`, labelMuted: true },
+                react_1.default.createElement(expressions_ui_1.IdLiteralComponent, { value: adminRegions, onChange: this.props.onChange ? this.handleRegionsChange : undefined, idTable: "admin_regions", schema: this.props.schema, dataSource: this.props.dataSource, placeholder: T `All Regions`, multi: true, orderBy: [{ expr: { type: "field", tableAlias: "main", column: "level" }, direction: "asc" }] }))));
     }
 }
 exports.default = MWaterGlobalFiltersComponent;

package/lib/MWaterLoaderComponent.d.ts

@@ -1,8 +1,7 @@
-import React, { ReactElement } from "react";
+import React, { ReactElement, ReactNode } from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import AsyncLoadComponent from "@mwater/react-library/lib/AsyncLoadComponent";
-import LoadingComponent from "@mwater/react-library/lib/LoadingComponent";
-import MWaterContextComponent, { AddLayerElementFactory } from "./MWaterContextComponent";
+import { AddLayerElementFactory } from "./MWaterContextComponent";
 export interface MWaterLoaderComponentProps {
     apiUrl: string;
     client?: string;
@@ -24,7 +23,7 @@ export interface MWaterLoaderComponentProps {
         dataSource: DataSource;
     }) => ReactElement<any> | null;
     /** Custom error formatter that returns React node or string, gets passed the error response from server */
-    errorFormatter?: (data: any, defaultError: string) => string;
+    errorFormatter?: (data: any, defaultError: ReactNode) => ReactNode;
     /** Origin of usage. e.g. "dashboards:43445364..." */
     origin?: string;
 }
@@ -43,13 +42,5 @@ export default class MWaterLoaderComponent extends AsyncLoadComponent<MWaterLoad
     constructor(props: MWaterLoaderComponentProps);
     isLoadNeeded(newProps: MWaterLoaderComponentProps, oldProps: MWaterLoaderComponentProps): boolean;
     load(props: MWaterLoaderComponentProps, prevProps: MWaterLoaderComponentProps, callback: any): void;
-    render(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.CElement<import("@mwater/react-library/lib/LoadingComponent").LoadingComponentProps, LoadingComponent> | React.CElement<{
-        apiUrl: string;
-        client?: string;
-        user?: string;
-        schema: Schema;
-        extraTables?: string[];
-        onExtraTablesChange?: (extraTables: string[]) => void;
-        addLayerElementFactory?: AddLayerElementFactory;
-    }, MWaterContextComponent> | null;
+    render(): React.JSX.Element | null;
 }

package/lib/MWaterLoaderComponent.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
-const R = react_1.default.createElement;
 const AsyncLoadComponent_1 = __importDefault(require("@mwater/react-library/lib/AsyncLoadComponent"));
 const LoadingComponent_1 = __importDefault(require("@mwater/react-library/lib/LoadingComponent"));
 const mWaterLoader_1 = __importDefault(require("./mWaterLoader"));
@@ -69,18 +68,10 @@ class MWaterLoaderComponent extends AsyncLoadComponent_1.default {
             return this.props.children(this.state.error);
         }
         // Inject context
-        return R(MWaterContextComponent_1.default, {
-            apiUrl: this.props.apiUrl,
-            client: this.props.client,
-            user: this.props.user,
-            schema: this.state.schema,
-            extraTables: this.props.extraTables,
-            onExtraTablesChange: this.props.onExtraTablesChange,
-            addLayerElementFactory: this.props.addLayerElementFactory
-        }, this.props.children(this.state.error, {
+        return (react_1.default.createElement(MWaterContextComponent_1.default, { apiUrl: this.props.apiUrl, client: this.props.client, user: this.props.user, schema: this.state.schema, extraTables: this.props.extraTables, onExtraTablesChange: this.props.onExtraTablesChange, addLayerElementFactory: this.props.addLayerElementFactory }, this.props.children(this.state.error, {
             schema: this.state.schema,
             dataSource: this.state.dataSource
-        }));
+        })));
     }
 }
 exports.default = MWaterLoaderComponent;

package/lib/TranslationsTabComponent.d.ts

@@ -0,0 +1,34 @@
+import React from "react";
+export interface TranslationsTabComponentProps {
+    /** Base locale of the design (e.g. "en") */
+    locale: string;
+    /** Other locales the design is translated into */
+    otherLocales: string[];
+    /** Translation mappings per locale. Maps locale to { originalString: translatedString } */
+    translations: {
+        [locale: string]: {
+            [key: string]: string;
+        };
+    };
+    /** All strings that need translation */
+    translatableStrings: string[];
+    /** Called when base locale changes */
+    onLocaleChange: (locale: string) => void;
+    /** Called when other locales change */
+    onOtherLocalesChange: (locales: string[]) => void;
+    /** Called when translations change */
+    onTranslationsChange: (translations: {
+        [locale: string]: {
+            [key: string]: string;
+        };
+    }) => void;
+    /** Custom filename for download. Defaults to "Translations.xlsx" */
+    downloadFilename?: string;
+    /** Custom description for base language section */
+    baseLanguageDescription?: string;
+}
+/**
+ * Reusable translations tab component for managing localization of designs
+ * (dashboards, maps, etc.) that have locale, otherLocales, and translations properties.
+ */
+export declare function TranslationsTabComponent(props: TranslationsTabComponentProps): React.JSX.Element;

package/lib/TranslationsTabComponent.js

@@ -0,0 +1,256 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TranslationsTabComponent = TranslationsTabComponent;
+const lodash_1 = __importDefault(require("lodash"));
+const react_1 = __importStar(require("react"));
+const languages_1 = require("./languages");
+const react_select_1 = __importDefault(require("react-select"));
+const file_saver_1 = __importDefault(require("file-saver"));
+const localizeUtils = __importStar(require("ez-localize/lib/utils"));
+const autotranslate_1 = require("./autotranslate");
+const bootstrap_1 = require("@mwater/react-library/lib/bootstrap");
+/**
+ * Reusable translations tab component for managing localization of designs
+ * (dashboards, maps, etc.) that have locale, otherLocales, and translations properties.
+ */
+function TranslationsTabComponent(props) {
+    const { locale, otherLocales, translations, translatableStrings, onLocaleChange, onOtherLocalesChange, onTranslationsChange, downloadFilename = "Translations.xlsx", baseLanguageDescription = T `This is the base language.` } = props;
+    const fileInputRef = (0, react_1.useRef)(null);
+    const localeOptions = (0, react_1.useMemo)(() => {
+        return lodash_1.default.sortBy(lodash_1.default.map(languages_1.languages, (language) => ({
+            value: language.code,
+            label: `${language.en} (${language.name})`
+        })), 'label');
+    }, []);
+    // Get available languages that aren't already selected
+    const availableLocaleOptions = (0, react_1.useMemo)(() => {
+        const selectedLocales = new Set([locale, ...otherLocales]);
+        return localeOptions.filter(opt => !selectedLocales.has(opt.value));
+    }, [localeOptions, locale, otherLocales]);
+    // Calculate percentage of strings translated for each locale
+    const translationPercentages = (0, react_1.useMemo)(() => {
+        const percentages = {};
+        const totalStrings = translatableStrings.length;
+        for (const loc of otherLocales) {
+            const translatedCount = translatableStrings.filter(str => translations?.[loc]?.[str] != null).length;
+            // Round down to nearest percent
+            percentages[loc] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0;
+        }
+        return percentages;
+    }, [translations, otherLocales, translatableStrings]);
+    const handleAddLocale = (selectedLocale) => {
+        const newOtherLocales = [...otherLocales, selectedLocale.value];
+        onOtherLocalesChange(newOtherLocales);
+        // Note: We don't initialize translations here because calling both callbacks
+        // in sequence would cause a race condition where the second overwrites the first.
+        // The code handles undefined translations via optional chaining.
+    };
+    const handleRemoveLocale = (localeToRemove) => {
+        const newOtherLocales = otherLocales.filter(loc => loc !== localeToRemove);
+        onOtherLocalesChange(newOtherLocales);
+        // Note: We don't remove translations here for the same reason as above.
+        // Orphaned translations are harmless and will be cleaned up on next save.
+    };
+    // Convert translations to LocalizedString format
+    const getLocalizedStrings = () => {
+        const localizedStrings = [];
+        for (const str of translatableStrings) {
+            const localizedString = { _base: locale };
+            localizedString[locale] = str;
+            // Only add translations for other locales if they exist
+            for (const otherLocale of otherLocales) {
+                if (translations?.[otherLocale]?.[str]) {
+                    localizedString[otherLocale] = translations[otherLocale][str];
+                }
+            }
+            localizedStrings.push(localizedString);
+        }
+        return localizedStrings;
+    };
+    // Convert LocalizedString format back to translations
+    const updateFromLocalizedStrings = (localizedStrings) => {
+        const newTranslations = {};
+        // Initialize translations object
+        for (const loc of otherLocales) {
+            newTranslations[loc] = {};
+        }
+        // Add all translations
+        for (const str of localizedStrings) {
+            for (const loc of otherLocales) {
+                if (str[loc]) {
+                    newTranslations[loc][str[str._base]] = str[loc];
+                }
+            }
+        }
+        return newTranslations;
+    };
+    const handleDownload = () => {
+        // Get strings in LocalizedString format
+        const strings = getLocalizedStrings();
+        // Create xlsx base64 using all locales (primary + other)
+        const locales = [{ code: locale, name: locale }]
+            .concat(otherLocales.map(code => ({ code, name: code })));
+        const base64 = localizeUtils.exportXlsx(locales, strings);
+        // Download
+        file_saver_1.default.saveAs(b64toBlob(base64, "application/octet-stream"), downloadFilename);
+    };
+    const handleUpload = () => {
+        fileInputRef.current?.click();
+    };
+    const handleUploadChange = (evt) => {
+        const reader = new FileReader();
+        reader.onload = (file) => {
+            if (!file.target?.result) {
+                return;
+            }
+            const base64 = file.target.result.split(",")[1];
+            try {
+                // Create locales array for import
+                const locales = [{ code: locale, name: locale }]
+                    .concat(otherLocales.map(code => ({ code, name: code })));
+                // Import updates
+                const updates = localizeUtils.importXlsx(locales, base64);
+                // If nothing localized
+                if (updates.length === 0) {
+                    alert(T `No translation data found in file`);
+                    return;
+                }
+                // Convert back to translations format and update
+                const newTranslations = updateFromLocalizedStrings(updates);
+                onTranslationsChange(newTranslations);
+                alert(T `${updates.length} translations applied`);
+            }
+            catch (error) {
+                console.error("Invalid xlsx file:", error);
+                alert(T `Invalid xlsx file`);
+            }
+        };
+        if (evt.target.files?.[0]) {
+            reader.readAsDataURL(evt.target.files[0]);
+        }
+    };
+    const handleTranslationsChangeForLocale = (loc, newLocaleTranslations) => {
+        const newTranslations = { ...translations };
+        newTranslations[loc] = newLocaleTranslations;
+        onTranslationsChange(newTranslations);
+    };
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Base Language`, labelMuted: true, help: baseLanguageDescription },
+            react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: locale }) || null, options: localeOptions, onChange: (selected) => onLocaleChange(selected.value) })),
+        react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Additional Languages`, labelMuted: true, help: T `Add languages to translate into` },
+            react_1.default.createElement("table", null,
+                react_1.default.createElement("tbody", null, otherLocales.map(loc => {
+                    const localeOption = lodash_1.default.findWhere(localeOptions, { value: loc });
+                    if (!localeOption) {
+                        return null;
+                    }
+                    return (react_1.default.createElement("tr", { key: loc },
+                        react_1.default.createElement("td", { style: { paddingRight: 10 } }, localeOption.label),
+                        react_1.default.createElement("td", { className: translationPercentages[loc] === 100 ? "text-success" : "text-warning", style: { textAlign: "right" } }, T `${translationPercentages[loc]}% translated`),
+                        react_1.default.createElement("td", null, translationPercentages[loc] < 100 && (react_1.default.createElement(AutoTranslateLink, { locale: loc, baseLocale: locale, strings: translatableStrings, existingTranslations: translations?.[loc] || {}, onTranslationsChange: (newLocaleTranslations) => handleTranslationsChangeForLocale(loc, newLocaleTranslations) }))),
+                        react_1.default.createElement("td", null,
+                            react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: () => handleRemoveLocale(loc) },
+                                react_1.default.createElement("i", { className: "fa fa-times" })))));
+                }))),
+            availableLocaleOptions.length > 0 && (react_1.default.createElement("div", { className: "mt-3" },
+                react_1.default.createElement(react_select_1.default, { value: null, options: availableLocaleOptions, onChange: handleAddLocale, placeholder: T `Add language...` })))),
+        otherLocales.length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(bootstrap_1.FormGroup, { label: T `Manage Translations`, labelMuted: true, help: T `Download and re-upload an Excel spreadsheet of text to translate:` },
+                react_1.default.createElement("p", null, T `Download and re-upload an Excel spreadsheet of text to translate:`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleDownload },
+                        react_1.default.createElement("i", { className: "fas fa-download me-2" }),
+                        T `Download XLSX`)),
+                react_1.default.createElement("div", { className: "text-muted mt-2" }, T `This creates a spreadsheet that can be sent to a translator. Please do not change the first column or first row of the spreadsheet.`),
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("p", null, T `Once translation is complete, upload the file back using the button below:`),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("button", { type: "button", className: "btn btn-secondary", onClick: handleUpload },
+                        react_1.default.createElement("i", { className: "fas fa-upload me-2" }),
+                        T `Upload Translated XLSX`)),
+                react_1.default.createElement("input", { type: "file", ref: fileInputRef, style: { display: "none" }, onChange: handleUploadChange, accept: ".xlsx" }))))));
+}
+/**
+ * Button that auto-translates untranslated strings using the translation service
+ */
+function AutoTranslateLink(props) {
+    const { locale, baseLocale, strings, existingTranslations, onTranslationsChange } = props;
+    const [isTranslating, setIsTranslating] = (0, react_1.useState)(false);
+    const untranslatedStrings = (0, react_1.useMemo)(() => {
+        return strings.filter(str => !existingTranslations[str]);
+    }, [strings, existingTranslations]);
+    const handleClick = async () => {
+        if (isTranslating) {
+            return;
+        }
+        setIsTranslating(true);
+        try {
+            const translatedStrings = await (0, autotranslate_1.translateStrings)(untranslatedStrings, baseLocale, locale);
+            const newTranslations = { ...existingTranslations };
+            for (let i = 0; i < untranslatedStrings.length; i++) {
+                newTranslations[untranslatedStrings[i]] = translatedStrings[i];
+            }
+            onTranslationsChange(newTranslations);
+        }
+        catch (error) {
+            console.error("Error translating strings:", error);
+            alert(T `Error translating strings`);
+        }
+        finally {
+            setIsTranslating(false);
+        }
+    };
+    if (untranslatedStrings.length === 0) {
+        return null;
+    }
+    if (!(0, autotranslate_1.canAutoTranslate)(locale)) {
+        return null;
+    }
+    return (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleClick, disabled: isTranslating, style: { marginLeft: 5, padding: "0 5px" } }, isTranslating ? (react_1.default.createElement("span", null,
+        react_1.default.createElement("i", { className: "fa fa-spinner fa-spin" }),
+        " ",
+        T `Translating...`)) : (T `Autotranslate`)));
+}
+/**
+ * Helper function for base64 to blob conversion
+ */
+function b64toBlob(b64Data, contentType = "", sliceSize = 512) {
+    const byteCharacters = atob(b64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+        const slice = byteCharacters.slice(offset, offset + sliceSize);
+        const byteNumbers = new Array(slice.length);
+        for (let i = 0; i < slice.length; i++) {
+            byteNumbers[i] = slice.charCodeAt(i);
+        }
+        const byteArray = new Uint8Array(byteNumbers);
+        byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: contentType });
+}

package/lib/UndoStack.d.ts

@@ -1,7 +1,8 @@
 export default class UndoStack {
     undoStack: any[];
     redoStack: any[];
-    constructor(undoStack?: any, redoStack?: any);
+    maxDepth?: number;
+    constructor(undoStack?: any, redoStack?: any, maxDepth?: number);
     push(value: any): UndoStack;
     canUndo(): boolean;
     canRedo(): boolean;

package/lib/UndoStack.js

@@ -8,20 +8,26 @@ const lodash_1 = __importDefault(require("lodash"));
 class UndoStack {
     undoStack;
     redoStack;
-    constructor(undoStack, redoStack) {
+    maxDepth;
+    constructor(undoStack, redoStack, maxDepth) {
         this.undoStack = undoStack || [];
         this.redoStack = redoStack || [];
+        this.maxDepth = maxDepth;
     }
     // Add a value to the stack
     push(value) {
         // No trivial pushes
-        if (lodash_1.default.isEqual(this.getValue(), value)) {
+        if (JSON.stringify(this.getValue()) === JSON.stringify(value)) {
             return this;
         }
-        const undoStack = this.undoStack.slice();
+        let undoStack = this.undoStack.slice();
         undoStack.push(value);
+        // Limit stack depth if maxDepth is set
+        if (this.maxDepth && undoStack.length > this.maxDepth) {
+            undoStack = undoStack.slice(undoStack.length - this.maxDepth);
+        }
         const redoStack = [];
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     canUndo() {
         return this.undoStack.length > 1;
@@ -34,14 +40,14 @@ class UndoStack {
         const redoStack = this.redoStack.slice();
         redoStack.push(lodash_1.default.last(this.undoStack));
         const undoStack = lodash_1.default.initial(this.undoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     redo() {
         // Put last redo on to undoStack
         const undoStack = this.undoStack.slice();
         undoStack.push(lodash_1.default.last(this.redoStack));
         const redoStack = lodash_1.default.initial(this.redoStack);
-        return new UndoStack(undoStack, redoStack);
+        return new UndoStack(undoStack, redoStack, this.maxDepth);
     }
     // Get the current value
     getValue() {

package/lib/dashboards/DashboardComponent.js

@@ -197,30 +197,30 @@ class DashboardComponent extends react_1.default.Component {
                         react_1.default.createElement("span", { className: "fal fa-globe" }),
                         " ",
                         this.state.locale),
-                    react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, [this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => react_1.default.createElement("li", { key: locale },
+                    react_1.default.createElement("ul", { className: "dropdown-menu dropdown-menu-end" }, [...new Set([this.props.design.locale || "en", ...this.props.design.otherLocales])].map(locale => react_1.default.createElement("li", { key: locale },
                         react_1.default.createElement("a", { className: "dropdown-item", onClick: () => this.setState({ locale: locale }) }, __1.languages.find(l => l.code === locale)?.name || locale)))))
                 : undefined,
             react_1.default.createElement("a", { key: "print", className: "btn btn-link btn-sm", onClick: this.handlePrint },
                 react_1.default.createElement("span", { className: "fas fa-print" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Print`)),
             react_1.default.createElement("a", { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
                 react_1.default.createElement("span", { className: "fas fa-sync" }),
-                react_1.default.createElement("span", { className: "hide-600px" },
+                react_1.default.createElement("span", { className: "hide-800px" },
                     " ",
                     T `Refresh`)),
             this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
                 ? react_1.default.createElement("a", { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
                     react_1.default.createElement("span", { className: "fa fa-filter" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Show Quickfilters`))
                 : undefined,
             this.state.editing
                 ? react_1.default.createElement("a", { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
                     react_1.default.createElement("span", { className: "fas fa-cog" }),
-                    react_1.default.createElement("span", { className: "hide-600px" },
+                    react_1.default.createElement("span", { className: "hide-800px" },
                         " ",
                         T `Settings`))
                 : undefined,
@@ -271,6 +271,7 @@ class DashboardComponent extends react_1.default.Component {
                 react_1.default.createElement("div", { style: {
                         display: "grid",
                         gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+                        gridTemplateColumns: "minmax(0, 1fr)",
                         height: "100%"
                     } },
                     !this.props.hideTitleBar ? this.renderTitleBar() : undefined,

package/lib/dashboards/DashboardDesign.d.ts

@@ -34,6 +34,6 @@ export interface DashboardDesign {
     };
     /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
     implicitFiltersEnabled?: boolean;
-    /** array of global filters. See below. */
+    /** Array of global filters */
     globalFilters?: GlobalFilter[];
 }

package/lib/dashboards/ServerDashboardDataSource.d.ts

@@ -66,7 +66,6 @@ declare class ServerWidgetLayerDataSource implements MapLayerDataSource {
     options: ServerWidgetLayerDataSourceOptions;
     constructor(options: ServerWidgetLayerDataSourceOptions);
     getTileUrl(design: any, filters: JsonQLFilter[]): any;
-    getUtfGridUrl(design: any, filters: JsonQLFilter[]): string | null;
     /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
      * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
      */

package/lib/dashboards/ServerDashboardDataSource.js

@@ -231,21 +231,6 @@ class ServerWidgetLayerDataSource {
         }
         return this.createUrl(filters, "png");
     }
-    // Get the url for the interactivity tiles with the specified filters applied
-    // Called with (design, filters) where design is the layer design and filters are filters to apply. Returns URL
-    getUtfGridUrl(design, filters) {
-        // Handle special cases
-        if (this.options.layerView.type === "MWaterServer") {
-            return this.createLegacyUrl(this.options.layerView.design, "grid.json", filters);
-        }
-        // Create layer
-        const layer = LayerFactory_1.default.createLayer(this.options.layerView.type);
-        // If layer has tiles url directly available
-        if (layer.getLayerDefinitionType() === "TileUrl") {
-            return layer.getUtfGridUrl(this.options.layerView.design, filters);
-        }
-        return this.createUrl(filters, "grid.json");
-    }
     /** Get the url for vector tile source with an expiry time. Only for layers of type "VectorTile"
      * @param createdAfter ISO 8601 timestamp requiring that tile source on server is created after specified datetime
      */
@@ -298,22 +283,12 @@ class ServerWidgetLayerDataSource {
             query.cacheExpiry = cacheExpiry;
         }
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring_1.default.stringify(query);
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         return url;
     }
     // Create query string
     createLegacyUrl(design, extension, filters) {
         let where;
         let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?type=${design.type}&radius=1000`;
-        // Add subdomains: {s} will be substituted with "a", "b" or "c" in leaflet for api.mwater.co only.
-        // Used to speed queries
-        if (url.match(/^https:\/\/api\.mwater\.co\//)) {
-            url = url.replace(/^https:\/\/api\.mwater\.co\//, "https://{s}-api.mwater.co/");
-        }
         if (this.options.client) {
             url += `&client=${this.options.client}`;
         }