@mwater/visualization 5.5.0 → 5.6.1

package/src/TranslationsTabComponent.tsx

@@ -0,0 +1,429 @@
+import _ from "lodash"
+import React, { useMemo, useRef, useState } from "react"
+import { languages } from "./languages"
+import { default as ReactSelect } from "react-select"
+import { LocalizedString } from "@mwater/expressions"
+import produce from "immer"
+import FileSaver from "file-saver"
+import * as localizeUtils from "ez-localize/lib/utils"
+import { canAutoTranslate, translateStrings } from "./autotranslate"
+import { FormGroup } from "@mwater/react-library/lib/bootstrap"
+
+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 function TranslationsTabComponent(props: TranslationsTabComponentProps) {
+  const {
+    locale,
+    otherLocales,
+    translations,
+    translatableStrings,
+    onLocaleChange,
+    onOtherLocalesChange,
+    onTranslationsChange,
+    downloadFilename = "Translations.xlsx",
+    baseLanguageDescription = T`This is the base language.`
+  } = props
+
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const localeOptions = useMemo(() => {
+    return _.sortBy(
+      _.map(languages, (language) => ({
+        value: language.code,
+        label: `${language.en} (${language.name})`
+      })),
+      'label'
+    )
+  }, [])
+
+  // Get available languages that aren't already selected
+  const availableLocaleOptions = 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 = useMemo(() => {
+    const percentages: { [locale: string]: number } = {}
+    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: any) => {
+    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: string) => {
+    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 = (): LocalizedString[] => {
+    const localizedStrings: LocalizedString[] = []
+    for (const str of translatableStrings) {
+      const localizedString: 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: LocalizedString[]) => {
+    const newTranslations: { [locale: string]: { [key: string]: string } } = {}
+
+    // 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
+    FileSaver.saveAs(
+      b64toBlob(base64, "application/octet-stream"),
+      downloadFilename
+    )
+  }
+
+  const handleUpload = () => {
+    fileInputRef.current?.click()
+  }
+
+  const handleUploadChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
+    const reader = new FileReader()
+
+    reader.onload = (file) => {
+      if (!file.target?.result) {
+        return
+      }
+
+      const base64 = (file.target.result as string).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: string, newLocaleTranslations: { [key: string]: string }) => {
+    const newTranslations = { ...translations }
+    newTranslations[loc] = newLocaleTranslations
+    onTranslationsChange(newTranslations)
+  }
+
+  return (
+    <>
+      <FormGroup
+        label={T`Base Language`}
+        labelMuted={true}
+        help={baseLanguageDescription}
+      >
+        <ReactSelect
+          value={_.findWhere(localeOptions, { value: locale }) || null}
+          options={localeOptions}
+          onChange={(selected: any) => onLocaleChange(selected.value)}
+        />
+      </FormGroup>
+      <FormGroup
+        label={T`Additional Languages`}
+        labelMuted={true}
+        help={T`Add languages to translate into`}
+      >
+        {/* Show current additional languages */}
+        <table>
+          <tbody>
+            {otherLocales.map(loc => {
+              const localeOption = _.findWhere(localeOptions, { value: loc })
+              if (!localeOption) {
+                return null
+              }
+
+              return (
+                <tr key={loc}>
+                  <td style={{ paddingRight: 10 }}>{localeOption.label}</td>
+                  <td className={translationPercentages[loc] === 100 ? "text-success" : "text-warning"} style={{ textAlign: "right" }}>
+                    {T`${translationPercentages[loc]}% translated`}
+                  </td>
+                  <td>
+                    {translationPercentages[loc] < 100 && (
+                      <AutoTranslateLink
+                        locale={loc}
+                        baseLocale={locale}
+                        strings={translatableStrings}
+                        existingTranslations={translations?.[loc] || {}}
+                        onTranslationsChange={(newLocaleTranslations) => handleTranslationsChangeForLocale(loc, newLocaleTranslations)}
+                      />
+                    )}
+                  </td>
+                  <td>
+                    <button
+                      type="button"
+                      className="btn btn-sm btn-link"
+                      onClick={() => handleRemoveLocale(loc)}
+                    >
+                      <i className="fa fa-times" />
+                    </button>
+                  </td>
+                </tr>
+              )
+            })}
+          </tbody>
+        </table>
+
+        {/* Add new language dropdown */}
+        {availableLocaleOptions.length > 0 && (
+          <div className="mt-3">
+            <ReactSelect
+              value={null}
+              options={availableLocaleOptions}
+              onChange={handleAddLocale}
+              placeholder={T`Add language...`}
+            />
+          </div>
+        )}
+      </FormGroup>
+
+      {/* Add translation management section if there are additional languages */}
+      {otherLocales.length > 0 && (
+        <>
+          <FormGroup
+            label={T`Manage Translations`}
+            labelMuted={true}
+            help={T`Download and re-upload an Excel spreadsheet of text to translate:`}
+          >
+            <p>{T`Download and re-upload an Excel spreadsheet of text to translate:`}</p>
+
+            <div>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={handleDownload}
+              >
+                <i className="fas fa-download me-2" />{T`Download XLSX`}
+              </button>
+            </div>
+            <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.`}
+            </div>
+
+            <br />
+            <p>
+              {T`Once translation is complete, upload the file back using the button below:`}
+            </p>
+            <div>
+              <button
+                type="button"
+                className="btn btn-secondary"
+                onClick={handleUpload}
+              >
+                <i className="fas fa-upload me-2" />{T`Upload Translated XLSX`}
+              </button>
+            </div>
+            <input
+              type="file"
+              ref={fileInputRef}
+              style={{ display: "none" }}
+              onChange={handleUploadChange}
+              accept=".xlsx"
+            />
+          </FormGroup>
+        </>
+      )}
+    </>
+  )
+}
+
+interface AutoTranslateLinkProps {
+  locale: string
+  baseLocale: string
+  strings: string[]
+  existingTranslations: { [key: string]: string }
+  onTranslationsChange: (newTranslations: { [key: string]: string }) => void
+}
+
+/**
+ * Button that auto-translates untranslated strings using the translation service
+ */
+function AutoTranslateLink(props: AutoTranslateLinkProps) {
+  const { locale, baseLocale, strings, existingTranslations, onTranslationsChange } = props
+  const [isTranslating, setIsTranslating] = useState(false)
+
+  const untranslatedStrings = useMemo(() => {
+    return strings.filter(str => !existingTranslations[str])
+  }, [strings, existingTranslations])
+
+  const handleClick = async () => {
+    if (isTranslating) {
+      return
+    }
+
+    setIsTranslating(true)
+    try {
+      const translatedStrings = await 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 (!canAutoTranslate(locale)) {
+    return null
+  }
+
+  return (
+    <button
+      type="button"
+      className="btn btn-sm btn-link"
+      onClick={handleClick}
+      disabled={isTranslating}
+      style={{ marginLeft: 5, padding: "0 5px" }}
+    >
+      {isTranslating ? (
+        <span>
+          <i className="fa fa-spinner fa-spin" />
+          {" "}
+          {T`Translating...`}
+        </span>
+      ) : (
+        T`Autotranslate`
+      )}
+    </button>
+  )
+}
+
+/**
+ * Helper function for base64 to blob conversion
+ */
+function b64toBlob(b64Data: string, contentType: string = "", sliceSize: number = 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/src/UndoStack.ts

@@ -4,24 +4,32 @@ import _ from "lodash"
 export default class UndoStack {
   undoStack: any[]
   redoStack: any[]
+  maxDepth?: number
 
-  constructor(undoStack?: any, redoStack?: any) {
+  constructor(undoStack?: any, redoStack?: any, maxDepth?: number) {
     this.undoStack = undoStack || []
     this.redoStack = redoStack || []
+    this.maxDepth = maxDepth
   }
 
   // Add a value to the stack
   push(value: any) {
     // No trivial pushes
-    if (_.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: any = []
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   canUndo() {
@@ -39,7 +47,7 @@ export default class UndoStack {
 
     const undoStack = _.initial(this.undoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   redo() {
@@ -49,7 +57,7 @@ export default class UndoStack {
 
     const redoStack = _.initial(this.redoStack)
 
-    return new UndoStack(undoStack, redoStack)
+    return new UndoStack(undoStack, redoStack, this.maxDepth)
   }
 
   // Get the current value

package/src/dashboards/DashboardComponent.tsx

@@ -289,7 +289,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
               {this.state.locale}
             </a>
             <ul className="dropdown-menu dropdown-menu-end">
-              {[this.props.design.locale || "en", ...this.props.design.otherLocales].map(locale => 
+              {[...new Set([this.props.design.locale || "en", ...this.props.design.otherLocales])].map(locale => 
                 <li key={locale}>
                   <a
                     className="dropdown-item"
@@ -304,23 +304,23 @@ export default class DashboardComponent extends React.Component<DashboardCompone
           : undefined}
         <a key="print" className="btn btn-link btn-sm" onClick={this.handlePrint}>
           <span className="fas fa-print"/>
-          <span className="hide-600px"> {T`Print`}</span>
+          <span className="hide-800px"> {T`Print`}</span>
         </a>
         <a key="refresh" className="btn btn-link btn-sm" onClick={this.handleRefreshData}>
           <span className="fas fa-sync"/>
-          <span className="hide-600px"> {T`Refresh`}</span>
+          <span className="hide-800px"> {T`Refresh`}</span>
         </a>
         {this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
           ? <a key="showQuickfilters" className="btn btn-link btn-sm" onClick={this.handleShowQuickfilters}>
             <span className="fa fa-filter"/>
-            <span className="hide-600px"> {T`Show Quickfilters`}</span>
+            <span className="hide-800px"> {T`Show Quickfilters`}</span>
           </a>
           : undefined}
 
         {this.state.editing
           ? <a key="settings" className="btn btn-link btn-sm" onClick={this.handleSettings}>
             <span className="fas fa-cog"/>
-            <span className="hide-600px"> {T`Settings`}</span>
+            <span className="hide-800px"> {T`Settings`}</span>
           </a>
           : undefined}
         {this.state.editing ? this.renderStyle() : undefined}
@@ -435,6 +435,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
         <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/src/dashboards/DashboardDesign.ts

@@ -39,6 +39,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/src/dashboards/ServerDashboardDataSource.ts

@@ -318,25 +318,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     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: any, filters: JsonQLFilter[]) {
-    // Handle special cases
-    if (this.options.layerView.type === "MWaterServer") {
-      return this.createLegacyUrl(this.options.layerView.design, "grid.json", filters)
-    }
-
-    // Create layer
-    const layer = LayerFactory.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
    */
@@ -407,12 +388,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
 
     let url = `${this.options.apiUrl}maps/tiles/{z}/{x}/{y}.${extension}?` + querystring.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
   }
 
@@ -421,12 +396,6 @@ class ServerWidgetLayerDataSource implements MapLayerDataSource {
     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}`
     }