@mwater/visualization 5.4.0 → 5.4.2

package/lib/dashboards/DashboardDesign.d.ts

@@ -2,13 +2,14 @@ import { Quickfilter } from "../quickfilter/Quickfilter";
 import { Expr } from "@mwater/expressions";
 import { BlocksLayoutOptions, DashboardTheme } from "./layoutOptions";
 import { GlobalFilter } from "../GlobalFilter";
+import { LayoutBlock } from "../layouts/blocks/blockUtils";
 /** Dashboard design
  * Each understands enough of the dashboard design to create widgets.
  * Widget refers to the widget itself, where *item* refers also to the layout and id that it has in the dashboard.
  */
 export interface DashboardDesign {
     /** dashboard items. Format depends on layout of dashboard. See layouts/.../README.md */
-    items: any;
+    items: LayoutBlock;
     /** array of quick filters (user-selectable filters). See quickfilter/README.md */
     quickfilters?: Quickfilter[];
     /** layout engine to use (`blocks` is new default)  */
@@ -21,8 +22,16 @@ export interface DashboardDesign {
     filters?: {
         [tableId: string]: Expr;
     };
-    /** optional locale (e.g. "fr") to use for display */
+    /** optional locale (e.g. "fr") to use for display. Defaults to "en" */
     locale?: string;
+    /** Other locales that the dashboard is available in. */
+    otherLocales?: string[];
+    /** Translation map for dashboard. Maps locale to translation map. Does not include default locale. */
+    translations?: {
+        [locale: string]: {
+            [key: string]: string;
+        };
+    };
     /** true to enable implicit filtering (see ImplicitFilterBuilder). Defaults to true for older dashboards. */
     implicitFiltersEnabled?: boolean;
     /** array of global filters. See below. */

package/lib/dashboards/DashboardUtils.d.ts

@@ -1,7 +1,12 @@
 import { Schema } from "@mwater/expressions";
 import { JsonQLFilter } from "..";
+import LayoutManager from "../layouts/LayoutManager";
 import { DashboardDesign } from "./DashboardDesign";
 /** Gets filterable tables for a dashboard */
 export declare function getFilterableTables(design: DashboardDesign, schema: Schema): string[];
+/** Gets all translatable strings from a dashboard */
+export declare function getTranslatableStringsFromDashboard(design: DashboardDesign, schema: Schema): string[];
+/** Gets translatable strings from a layout manager and items */
+export declare function getTranslatableStringsFromLayoutManager(layoutManager: LayoutManager, items: any, schema: Schema): string[];
 /** Get filters from props filters combined with dashboard filters */
 export declare function getCompiledFilters(design: DashboardDesign, schema: Schema, filterableTables: string[]): JsonQLFilter[];

package/lib/dashboards/DashboardUtils.js

@@ -4,6 +4,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getFilterableTables = getFilterableTables;
+exports.getTranslatableStringsFromDashboard = getTranslatableStringsFromDashboard;
+exports.getTranslatableStringsFromLayoutManager = getTranslatableStringsFromLayoutManager;
 exports.getCompiledFilters = getCompiledFilters;
 const lodash_1 = __importDefault(require("lodash"));
 const expressions_1 = require("@mwater/expressions");
@@ -24,6 +26,34 @@ function getFilterableTables(design, schema) {
     filterableTables = lodash_1.default.filter(lodash_1.default.uniq(filterableTables), (table) => schema.getTable(table));
     return filterableTables;
 }
+/** Gets all translatable strings from a dashboard */
+function getTranslatableStringsFromDashboard(design, schema) {
+    const layoutManager = LayoutManager_1.default.createLayoutManager(design.layout);
+    // Get translatable strings from layout manager
+    let strings = getTranslatableStringsFromLayoutManager(layoutManager, design.items, schema);
+    // Get translatable strings from quickfilters
+    if (design.quickfilters) {
+        for (let quickfilter of design.quickfilters) {
+            if (quickfilter.label) {
+                strings.push(quickfilter.label);
+            }
+        }
+    }
+    // Remove duplicates
+    return lodash_1.default.uniq(strings);
+}
+/** Gets translatable strings from a layout manager and items */
+function getTranslatableStringsFromLayoutManager(layoutManager, items, schema) {
+    let strings = [];
+    for (let widgetItem of layoutManager.getAllWidgets(items)) {
+        // Create widget
+        const widget = WidgetFactory_1.default.createWidget(widgetItem.type);
+        // Get translatable strings
+        strings = strings.concat(widget.getTranslatableStrings(widgetItem.design, schema));
+    }
+    // Remove duplicates
+    return lodash_1.default.uniq(strings);
+}
 /** Get filters from props filters combined with dashboard filters */
 function getCompiledFilters(design, schema, filterableTables) {
     let expr, jsonql, table;

package/lib/dashboards/DashboardViewComponent.d.ts

@@ -30,6 +30,8 @@ export interface DashboardViewComponentProps {
     printMode?: boolean;
     /** Change to force a refresh */
     refreshKey?: any;
+    /** Locale to use for display. Defaults to dashboard design locale. */
+    locale?: string;
 }
 export interface DashboardViewComponentHandle {
     print: () => Promise<void>;

package/lib/dashboards/DashboardViewComponent.js

@@ -154,6 +154,17 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
     const renderScopes = () => {
         return (react_1.default.createElement(WidgetScopesViewComponent_1.default, { scopes: widgetScoper.getScopes(), onRemoveScope: handleRemoveScope }));
     };
+    /** Locale that the dashboard design is in */
+    const designLocale = props.design.locale ?? "en";
+    /** Locale to display the dashboard in. If editing, always use design locale. */
+    const displayLocale = props.onDesignChange != null ? designLocale : (props.locale ?? designLocale ?? "en");
+    /** Translate function to use for display. Do not use when editing. */
+    const translate = (0, react_1.useCallback)((input) => {
+        if (designLocale === displayLocale) {
+            return input;
+        }
+        return props.design.translations?.[displayLocale]?.[input] ?? input;
+    }, [props.design.translations, designLocale, displayLocale]);
     const compRef = (widgetId, comp) => {
         return (widgetComps.current[widgetId] = comp);
     };
@@ -180,9 +191,11 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
             const implicitFilterBuilder = new ImplicitFilterBuilder_1.default(props.schema);
             filters = implicitFilterBuilder.extendFilters(filterableTables, filters);
         }
-        const widgetElem = (react_1.default.createElement(WidgetComponent_1.WidgetComponent, { key: options.id, id: options.id, type: options.type, schema: props.schema, dataSource: props.dataSource, widgetDataSource: widgetDataSource, design: options.design, scope: widgetScoper.getScope(options.id), filters: filters, onScopeChange: handleScopeChange.bind(null, options.id), onDesignChange: options.onDesignChange, width: options.width, height: options.height, onRowClick: props.onRowClick, namedStrings: props.namedStrings, tocEntries: tocEntries, onScrollToTOCEntry: handleScrollToTOCEntry, 
+        const widgetElem = (react_1.default.createElement(WidgetComponent_1.WidgetComponent, { key: options.id, type: options.type, schema: props.schema, dataSource: props.dataSource, widgetDataSource: widgetDataSource, design: options.design, scope: widgetScoper.getScope(options.id), filters: filters, onScopeChange: handleScopeChange.bind(null, options.id), onDesignChange: options.onDesignChange, width: options.width, height: options.height, onRowClick: props.onRowClick, namedStrings: props.namedStrings, tocEntries: tocEntries, onScrollToTOCEntry: handleScrollToTOCEntry, 
             // Keep references to widget elements
-            widgetRef: compRef.bind(null, options.id), refreshKey: props.refreshKey }));
+            widgetRef: compRef.bind(null, options.id), refreshKey: props.refreshKey, 
+            // Use locale from props, design, or default to en
+            locale: displayLocale, translate: translate }));
         return widgetElem;
     };
     const style = {
@@ -195,7 +208,7 @@ const DashboardViewComponent = react_1.default.forwardRef((props, ref) => {
         style.overflowX = "auto";
     }
     // Render widget container
-    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: props.design.locale ?? "en" },
+    return (react_1.default.createElement(expressions_ui_1.LocaleContext.Provider, { value: displayLocale },
         react_1.default.createElement("div", { style: style },
             !props.hideScopes ? renderScopes() : undefined,
             layoutManager.renderLayout({

package/lib/dashboards/ServerDashboardDataSource.js

@@ -273,7 +273,8 @@ class ServerWidgetLayerDataSource {
             throw new Error("Error getting tiles token");
         }
         const { token, expires } = await response.json();
-        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}`, expires };
+        // Client isn't necessary, but allows tracking of usage easier
+        return { url: this.options.apiUrl + `vector_tiles/tiles/{z}/{x}/{y}?token=${token}&client=${this.options.client ?? ""}`, expires };
     }
     // Gets widget data source for a popup widget
     getPopupWidgetDataSource(design, widgetId) {

package/lib/dashboards/SettingsModalComponent.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 import { DataSource, Schema } from "@mwater/expressions";
 import { DashboardDesign } from "./DashboardDesign";
 export interface SettingsModalComponentProps {
-    onDesignChange: any;
+    onDesignChange: (design: DashboardDesign) => void;
     schema: Schema;
     dataSource: DataSource;
 }

package/lib/dashboards/SettingsModalComponent.js

@@ -37,6 +37,10 @@ const QuickfiltersDesignComponent_1 = __importDefault(require("../quickfilter/Qu
 const FiltersDesignerComponent_1 = __importDefault(require("../FiltersDesignerComponent"));
 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");
 /** Popup with settings for dashboard */
 class SettingsModalComponent extends react_1.default.Component {
     constructor(props) {
@@ -71,33 +75,41 @@ exports.default = SettingsModalComponent;
 /** Settings component for dashboard that is used in the settings modal */
 function SettingsComponent(props) {
     const { design, onDesignChange, schema, dataSource } = props;
-    // Get filterable tables
-    const filterableTables = DashboardUtils.getFilterableTables(design, schema);
-    const localeOptions = (0, react_1.useMemo)(() => {
-        return lodash_1.default.map(languages_1.languages, (language) => {
-            return {
-                value: language.code,
-                label: language.en + " (" + language.name + ")"
-            };
-        });
-    }, [languages_1.languages]);
+    const tabs = [
+        {
+            id: "filters",
+            label: T `Filters`,
+            elem: (react_1.default.createElement(FiltersTab, { design: design, onDesignChange: onDesignChange, schema: schema, dataSource: dataSource }))
+        },
+        {
+            id: "language",
+            label: T `Translation`,
+            elem: (react_1.default.createElement(LanguageTab, { design: design, onDesignChange: onDesignChange, schema: schema }))
+        }
+    ];
     return (react_1.default.createElement("div", { style: { paddingBottom: 200 } },
+        react_1.default.createElement(TabbedComponent_1.default, { tabs: tabs, initialTabId: "filters" })));
+}
+function FiltersTab({ design, onDesignChange, schema, dataSource }) {
+    // Get filterable tables
+    const filterableTables = (0, react_1.useMemo)(() => DashboardUtils.getFilterableTables(design, schema), [design, schema]);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement("h4", null, T `Quick Filters`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.`),
         filterableTables.length > 0 ? (react_1.default.createElement(QuickfiltersDesignComponent_1.default, { design: design.quickfilters || [], onDesignChange: (quickfilters) => {
                 onDesignChange((0, immer_1.default)(design, draft => {
                     draft.quickfilters = quickfilters;
                 }));
             }, schema: schema, dataSource: dataSource, tables: filterableTables })) : (T `Nothing to quickfilter. Add widgets to the dashboard`),
-        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Filters`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`),
+        react_1.default.createElement("h4", { style: { paddingTop: 15 } }, T `Filters`),
+        react_1.default.createElement("div", { className: "mb-2" }, T `Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`),
         filterableTables.length > 0 ? (react_1.default.createElement(FiltersDesignerComponent_1.default, { schema: schema, dataSource: dataSource, filters: design.filters, onFiltersChange: (filters) => {
                 onDesignChange((0, immer_1.default)(design, draft => {
                     draft.filters = filters;
                 }));
             }, filterableTables: filterableTables })) : (T `Nothing to filter. Add widgets to the dashboard`),
         react_1.default.createElement(MWaterContextComponent_1.GlobalFiltersElementFactoryContext.Consumer, null, globalFiltersElementFactory => globalFiltersElementFactory ? (react_1.default.createElement("div", null,
-            react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Global Filters`),
+            react_1.default.createElement("h4", { style: { paddingTop: 15 } }, T `Global Filters`),
             globalFiltersElementFactory({
                 schema,
                 dataSource,
@@ -109,14 +121,239 @@ function SettingsComponent(props) {
                     }));
                 }
             }))) : undefined),
-        react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Language`),
-        react_1.default.createElement("div", { className: "text-muted" }, T `Controls the preferred language of widgets and uses specified language when available`),
-        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;
-            })) }),
         design.implicitFiltersEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
             react_1.default.createElement("h4", { style: { paddingTop: 10 } }, T `Advanced`),
             react_1.default.createElement(ui.Checkbox, { value: design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true, onChange: (value) => onDesignChange((0, immer_1.default)(design, draft => {
                     draft.implicitFiltersEnabled = value;
                 })) }, T `Enable Implicit Filtering (leave unchecked for new dashboards)`)))));
 }
+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] = Math.floor((translatedCount / totalStrings) * 100);
+        }
+        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`)));
+}

package/lib/dashboards/WidgetComponent.d.ts

@@ -2,13 +2,12 @@ import { Schema, DataSource } from "@mwater/expressions";
 import { JsonQLFilter } from "../JsonQLFilter";
 import { WidgetScope } from "../WidgetScope";
 import { WidgetDataSource } from "../widgets/WidgetDataSource";
+import { TOCEntry } from "../widgets/Widget";
 /**
  * Component which renders a widget and ensures that props do not change
  * unnecessarily.
  */
 export declare function WidgetComponent(props: {
-    /** Widget id */
-    id: string;
     /** Widget type */
     type: string;
     /** Widget design */
@@ -42,11 +41,15 @@ export declare function WidgetComponent(props: {
         [key: string]: string;
     };
     /** Entries in the table of content */
-    tocEntries?: string[];
+    tocEntries?: TOCEntry[];
     /** the widget callback ref */
     widgetRef: (widget: any) => void;
     /** called with (widgetId, tocEntryId) to scroll to TOC entry */
     onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void;
     /** Change to force a refresh */
     refreshKey?: any;
+    /** Locale to use for display */
+    locale: string;
+    /** Translate function to use for display. Returns same string when editing. */
+    translate: (input: string) => string;
 }): import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/lib/dashboards/WidgetComponent.js

@@ -37,7 +37,9 @@ function WidgetComponent(props) {
         tocEntries: props.tocEntries,
         onScrollToTOCEntry: props.onScrollToTOCEntry,
         widgetRef,
-        refreshKey: props.refreshKey
+        refreshKey: props.refreshKey,
+        locale: props.locale,
+        translate: props.translate
     });
 }
 /** Always returns the same function to prevent unnecessary re-rendering. Forwards to the real function */

package/lib/datagrids/CellEditor.d.ts

@@ -0,0 +1,19 @@
+import React from "react";
+import { EnumValue, LiteralType, Schema, DataSource } from "@mwater/expressions";
+import { RenderCellEditorProps } from "@mwater/react-library/lib/GridComponent";
+import "react-datepicker/dist/react-datepicker.css";
+/** Determine if type can be edited */
+export declare function canEditType(type: LiteralType): boolean;
+/** Cell editor for a cell of the grid */
+export declare const CellEditor: (props: {
+    type: LiteralType;
+    enumValues?: EnumValue[];
+    idTable?: string;
+    initialValue: any;
+    editorOptions: RenderCellEditorProps;
+    /** Update the cell value. Returns true if successful, false if cancelled */
+    updateCellValue: (value: any) => Promise<boolean>;
+    locale?: string;
+    schema: Schema;
+    dataSource: DataSource;
+}) => React.JSX.Element;