@mwater/visualization 5.6.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/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/dashboards/DashboardComponent.js

@@ -197,7 +197,7 @@ 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 },

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
      */

package/lib/dashboards/SettingsModalComponent.js

@@ -26,11 +26,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
-const languages_1 = require("../languages");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
-const react_select_1 = __importDefault(require("react-select"));
 const DashboardUtils = __importStar(require("./DashboardUtils"));
 const ActionCancelModalComponent_1 = __importDefault(require("@mwater/react-library/lib/ActionCancelModalComponent"));
 const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/QuickfiltersDesignComponent"));
@@ -38,9 +35,7 @@ const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerCo
 const MWaterContextComponent_1 = require("../MWaterContextComponent");
 const immer_1 = __importDefault(require("immer"));
 const TabbedComponent_1 = __importDefault(require("@mwater/react-library/lib/TabbedComponent"));
-const file_saver_1 = __importDefault(require("file-saver"));
-const localizeUtils = __importStar(require("ez-localize/lib/utils"));
-const autotranslate_1 = require("../autotranslate");
+const TranslationsTabComponent_1 = require("../TranslationsTabComponent");
 /** Popup with settings for dashboard */
 class SettingsModalComponent extends react_1.default.Component {
     constructor(props) {
@@ -127,233 +122,14 @@ function FiltersTab({ design, onDesignChange, schema, dataSource }) {
                     draft.implicitFiltersEnabled = value;
                 })) }, T `Enable Implicit Filtering (leave unchecked for new dashboards)`)))));
 }
+/** Wrapper around TranslationsTabComponent for dashboard-specific usage */
 function LanguageTab({ design, onDesignChange, schema }) {
-    const fileInputRef = (0, react_1.useRef)(null);
-    const locale = design.locale || "en";
-    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');
-    }, [languages_1.languages]);
-    // Get available languages that aren't already selected
-    const availableLocaleOptions = (0, react_1.useMemo)(() => {
-        const selectedLocales = new Set([design.locale, ...(design.otherLocales || [])]);
-        return localeOptions.filter(opt => !selectedLocales.has(opt.value));
-    }, [localeOptions, design.locale, design.otherLocales]);
     const translatableStrings = (0, react_1.useMemo)(() => DashboardUtils.getTranslatableStringsFromDashboard(design, schema), [design, schema]);
-    // Calculate percentage of strings translated for each locale
-    const translationPercentages = (0, react_1.useMemo)(() => {
-        const percentages = {};
-        const totalStrings = translatableStrings.length;
-        for (const locale of design.otherLocales || []) {
-            const translatedCount = translatableStrings.filter(str => design.translations?.[locale]?.[str] != null).length;
-            // Round down to nearest percent
-            percentages[locale] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0;
-        }
-        return percentages;
-    }, [design.translations, design.otherLocales, translatableStrings]);
-    const handleAddLocale = (locale) => {
-        onDesignChange((0, immer_1.default)(design, draft => {
-            draft.otherLocales = [...(draft.otherLocales || []), locale.value];
-            // Initialize empty translations object if needed
-            if (!draft.translations) {
-                draft.translations = {};
-            }
-            if (!draft.translations[locale.value]) {
-                draft.translations[locale.value] = {};
-            }
-        }));
-    };
-    const handleRemoveLocale = (localeToRemove) => {
-        onDesignChange((0, immer_1.default)(design, draft => {
-            draft.otherLocales = (draft.otherLocales || []).filter(locale => locale !== localeToRemove);
-            // Remove translations for this locale
-            if (draft.translations) {
-                delete draft.translations[localeToRemove];
-            }
-        }));
-    };
-    // Convert dashboard translations to LocalizedString format
-    const getLocalizedStrings = () => {
-        // For each string, create a localized string
-        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 design.otherLocales || []) {
-                if (design.translations?.[otherLocale]?.[str]) {
-                    localizedString[otherLocale] = design.translations?.[otherLocale]?.[str];
-                }
-            }
-            localizedStrings.push(localizedString);
-        }
-        return localizedStrings;
-    };
-    // Convert LocalizedString format back to dashboard translations
-    const updateFromLocalizedStrings = (localizedStrings) => {
-        const newTranslations = {};
-        // Get all locales except base
-        const locales = design.otherLocales || [];
-        // Initialize translations object
-        for (const locale of locales) {
-            newTranslations[locale] = {};
-        }
-        // Add all translations
-        for (const str of localizedStrings) {
-            for (const locale of locales) {
-                if (str[locale]) {
-                    newTranslations[locale][str[str._base]] = str[locale];
-                }
-            }
-        }
-        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((design.otherLocales || []).map(code => ({ code, name: code })));
-        const base64 = localizeUtils.exportXlsx(locales, strings);
-        // Download
-        file_saver_1.default.saveAs(b64toBlob(base64, "application/octet-stream"), "Dashboard Translations.xlsx");
-    };
-    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((design.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 dashboard format and update
-                const newTranslations = updateFromLocalizedStrings(updates);
-                onDesignChange((0, immer_1.default)(design, draft => {
-                    draft.translations = 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]);
-        }
-    };
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("h4", null, T `Base Language`),
-        react_1.default.createElement("div", { className: "mb-2" }, T `This is the language that the dashboard is written in.`),
-        react_1.default.createElement(react_select_1.default, { value: lodash_1.default.findWhere(localeOptions, { value: design.locale || "en" }) || null, options: localeOptions, onChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
-                draft.locale = locale.value;
-            })) }),
-        react_1.default.createElement("h4", { className: "mt-4" }, T `Additional Languages`),
-        react_1.default.createElement("div", { className: "mb-2" }, T `Add languages that this dashboard will be translated into`),
-        react_1.default.createElement("table", null,
-            react_1.default.createElement("tbody", null, (design.otherLocales || []).map(locale => {
-                const localeOption = lodash_1.default.findWhere(localeOptions, { value: locale });
-                if (!localeOption) {
-                    return null;
-                }
-                return (react_1.default.createElement("tr", { key: locale },
-                    react_1.default.createElement("td", { style: { paddingRight: 10 } }, localeOption.label),
-                    react_1.default.createElement("td", { className: translationPercentages[locale] === 100 ? "text-success" : "text-warning", style: { textAlign: "right" } }, T `${translationPercentages[locale]}% translated`),
-                    react_1.default.createElement("td", null, translationPercentages[locale] < 100 && (react_1.default.createElement(AutoTranslateLink, { locale: locale, baseLocale: design.locale || "en", strings: translatableStrings, existingTranslations: design.translations?.[locale] || {}, onTranslationsChange: (newTranslations) => {
-                            onDesignChange((0, immer_1.default)(design, draft => {
-                                if (!draft.translations) {
-                                    draft.translations = {};
-                                }
-                                draft.translations[locale] = newTranslations;
-                            }));
-                        } }))),
-                    react_1.default.createElement("td", null,
-                        react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: () => handleRemoveLocale(locale) },
-                            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...` }))),
-        (design.otherLocales || []).length > 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement("h4", { className: "mt-4" }, T `Manage Translations`),
-            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" })))));
-}
-/** 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 });
-}
-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`)));
+    return (react_1.default.createElement(TranslationsTabComponent_1.TranslationsTabComponent, { locale: design.locale || "en", otherLocales: design.otherLocales || [], translations: design.translations || {}, translatableStrings: translatableStrings, onLocaleChange: (locale) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.locale = locale;
+        })), onOtherLocalesChange: (otherLocales) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.otherLocales = otherLocales;
+        })), onTranslationsChange: (translations) => onDesignChange((0, immer_1.default)(design, draft => {
+            draft.translations = translations;
+        })), downloadFilename: "Dashboard Translations.xlsx", baseLanguageDescription: T `This is the language that the dashboard is written in.` }));
 }

package/lib/datagrids/DatagridComponent.js

@@ -85,6 +85,11 @@ exports.default = (0, react_1.forwardRef)(function DatagridComponent(props, ref)
             return;
         }
         let activeFilters = filters || [];
+        // Clean before counting
+        const cleanedDesign = new DatagridUtils_1.default(schema).cleanDesign(design);
+        if (new DatagridUtils_1.default(schema).validateDesign(cleanedDesign)) {
+            return;
+        }
         // Compile quickfilters
         activeFilters = activeFilters.concat(getQuickfilterFilters());
         datagridDataSource.countRows(design, activeFilters, (error, count) => {