@mwater/visualization 5.4.0 → 5.4.2

package/src/dashboards/SettingsModalComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React, { useMemo } from "react"
+import React, { useMemo, useRef, useState } from "react"
 import { languages } from "../languages"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { default as ReactSelect } from "react-select"
@@ -7,13 +7,17 @@ import * as DashboardUtils from "./DashboardUtils"
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
 import FiltersDesignerComponent from "../FiltersDesignerComponent"
-import { DataSource, Schema } from "@mwater/expressions"
+import { DataSource, LocalizedString, Schema } from "@mwater/expressions"
 import { DashboardDesign } from "./DashboardDesign"
 import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
 import produce from "immer"
+import TabbedComponent from "@mwater/react-library/lib/TabbedComponent"
+import FileSaver from "file-saver"
+import * as localizeUtils from "ez-localize/lib/utils"
+import { canAutoTranslate, translateStrings } from "../autotranslate"
 
 export interface SettingsModalComponentProps {
-  onDesignChange: any
+  onDesignChange: (design: DashboardDesign) => void
   schema: Schema
   dataSource: DataSource
 }
@@ -39,7 +43,7 @@ export default class SettingsModalComponent extends React.Component<
   }
 
   handleSave = () => {
-    this.props.onDesignChange(this.state.design)
+    this.props.onDesignChange(this.state.design!)
     return this.setState({ design: null })
   }
 
@@ -85,22 +89,57 @@ interface SettingsComponentProps {
 function SettingsComponent(props: SettingsComponentProps) {
   const { design, onDesignChange, schema, dataSource } = props
 
-  // Get filterable tables
-  const filterableTables = DashboardUtils.getFilterableTables(design, schema)
-
-  const localeOptions = useMemo(() => {
-    return _.map(languages, (language) => {
-      return {
-        value: language.code,
-        label: language.en + " (" + language.name + ")"
-      }
-    })
-  }, [languages])
+  const tabs = [
+    {
+      id: "filters",
+      label: T`Filters`,
+      elem: (
+        <FiltersTab
+          design={design}
+          onDesignChange={onDesignChange}
+          schema={schema}
+          dataSource={dataSource}
+        />
+      )
+    },
+    {
+      id: "language",
+      label: T`Translation`,
+      elem: (
+        <LanguageTab
+          design={design}
+          onDesignChange={onDesignChange}
+          schema={schema}
+        />
+      )
+    }
+  ]
 
   return (
     <div style={{ paddingBottom: 200 }}>
+      <TabbedComponent
+        tabs={tabs}
+        initialTabId="filters"
+      />
+    </div>
+  )
+}
+
+interface FiltersTabProps {
+  design: DashboardDesign
+  onDesignChange: (design: DashboardDesign) => void
+  schema: Schema
+  dataSource: DataSource
+}
+
+function FiltersTab({ design, onDesignChange, schema, dataSource }: FiltersTabProps) {
+  // Get filterable tables
+  const filterableTables = useMemo(() => DashboardUtils.getFilterableTables(design, schema), [design, schema])
+
+  return (
+    <>
       <h4>{T`Quick Filters`}</h4>
-      <div className="text-muted">
+      <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.`}
       </div>
 
@@ -120,8 +159,8 @@ function SettingsComponent(props: SettingsComponentProps) {
         T`Nothing to quickfilter. Add widgets to the dashboard`
       )}
 
-      <h4 style={{ paddingTop: 10 }}>{T`Filters`}</h4>
-      <div className="text-muted">
+      <h4 style={{ paddingTop: 15 }}>{T`Filters`}</h4>
+      <div className="mb-2">
         {T`Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.`}
       </div>
 
@@ -145,7 +184,7 @@ function SettingsComponent(props: SettingsComponentProps) {
         {globalFiltersElementFactory =>
           globalFiltersElementFactory ? (
             <div>
-              <h4 style={{ paddingTop: 10 }}>{T`Global Filters`}</h4>
+              <h4 style={{ paddingTop: 15 }}>{T`Global Filters`}</h4>
               {globalFiltersElementFactory({
                 schema,
                 dataSource,
@@ -161,10 +200,207 @@ function SettingsComponent(props: SettingsComponentProps) {
           ) : undefined
         }
       </GlobalFiltersElementFactoryContext.Consumer>
+      {design.implicitFiltersEnabled && (
+        <>
+          <h4 style={{ paddingTop: 10 }}>{T`Advanced`}</h4>
+          <ui.Checkbox
+            value={design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true}
+            onChange={(value: boolean) =>
+              onDesignChange(produce(design, draft => {
+                draft.implicitFiltersEnabled = value
+              }))
+            }
+          >
+            {T`Enable Implicit Filtering (leave unchecked for new dashboards)`}
+          </ui.Checkbox>
+        </>
+      )}
+    </>
+  )
+}
+
+interface LanguageTabProps {
+  design: DashboardDesign
+  onDesignChange: (design: DashboardDesign) => void
+  schema: Schema
+}
+
+function LanguageTab({ design, onDesignChange, schema }: LanguageTabProps) {
+  const fileInputRef = useRef<HTMLInputElement>(null)
+
+  const locale = design.locale || "en"
+
+  const localeOptions = useMemo(() => {
+    return _.sortBy(
+      _.map(languages, (language) => ({
+        value: language.code,
+        label: `${language.en} (${language.name})`
+      })),
+      'label'
+    )
+  }, [languages])
+
+  // Get available languages that aren't already selected
+  const availableLocaleOptions = useMemo(() => {
+    const selectedLocales = new Set([design.locale, ...(design.otherLocales || [])])
+    return localeOptions.filter(opt => !selectedLocales.has(opt.value))
+  }, [localeOptions, design.locale, design.otherLocales])
+
+  const translatableStrings = useMemo(() => DashboardUtils.getTranslatableStringsFromDashboard(design, schema), [design, schema])
+
+  // Calculate percentage of strings translated for each locale
+  const translationPercentages = useMemo(() => {
+    const percentages: { [locale: string]: number } = {}
+    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: any) => {
+    onDesignChange(produce(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: string) => {
+    onDesignChange(produce(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 = (): LocalizedString[] => {
+    // For each string, create a localized string
+    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 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: LocalizedString[]) => {
+    const newTranslations: { [locale: string]: { [key: string]: string } } = {}
+
+    // Get all locales except base
+    const locales = design.otherLocales || []
+
+    // Initialize translations object
+    for (const locale of locales) {
+      newTranslations[locale] = {}
+    }
 
-      <h4 style={{ paddingTop: 10 }}>{T`Language`}</h4>
-      <div className="text-muted">
-        {T`Controls the preferred language of widgets and uses specified language when available`}
+    // 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
+    FileSaver.saveAs(
+      b64toBlob(base64, "application/octet-stream"),
+      "Dashboard Translations.xlsx"
+    )
+  }
+
+  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((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(produce(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 (
+    <>
+      <h4>{T`Base Language`}</h4>
+      <div className="mb-2">
+        {T`This is the language that the dashboard is written in.`}
       </div>
 
       <ReactSelect
@@ -177,21 +413,200 @@ function SettingsComponent(props: SettingsComponentProps) {
         }
       />
 
-      {design.implicitFiltersEnabled && (
-        <>
-          <h4 style={{ paddingTop: 10 }}>{T`Advanced`}</h4>
-          <ui.Checkbox
-            value={design.implicitFiltersEnabled != null ? design.implicitFiltersEnabled : true}
-            onChange={(value: boolean) =>
-              onDesignChange(produce(design, draft => {
-                draft.implicitFiltersEnabled = value
-              }))
+      <h4 className="mt-4">{T`Additional Languages`}</h4>
+      <div className="mb-2">
+        {T`Add languages that this dashboard will be translated into`}
+      </div>
+
+      {/* Show current additional languages */}
+      <table>
+        <tbody>
+          {(design.otherLocales || []).map(locale => {
+            const localeOption = _.findWhere(localeOptions, { value: locale })
+            if (!localeOption) {
+              return null
             }
-          >
-            {T`Enable Implicit Filtering (leave unchecked for new dashboards)`}
-          </ui.Checkbox>
+
+            return (
+              <tr key={locale}>
+                <td style={{ paddingRight: 10 }}>{localeOption.label}</td>
+                <td className={translationPercentages[locale] === 100 ? "text-success" : "text-warning"} style={{ textAlign: "right" }}>
+                  {T`${translationPercentages[locale]}% translated`}
+                </td>
+                <td>
+                  {translationPercentages[locale] < 100 && (
+                    <AutoTranslateLink
+                      locale={locale}
+                      baseLocale={design.locale || "en"}
+                      strings={translatableStrings}
+                      existingTranslations={design.translations?.[locale] || {}}
+                      onTranslationsChange={(newTranslations) => {
+                        onDesignChange(produce(design, draft => {
+                          if (!draft.translations) {
+                            draft.translations = {}
+                          }
+                          draft.translations[locale] = newTranslations
+                        }))
+                      }}
+                    />
+                  )}
+                </td>
+                <td>
+                  <button
+                    type="button"
+                    className="btn btn-sm btn-link"
+                    onClick={() => handleRemoveLocale(locale)}
+                  >
+                    <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>
+      )}
+
+      {/* Add translation management section if there are additional languages */}
+      {(design.otherLocales || []).length > 0 && (
+        <>
+          <h4 className="mt-4">{T`Manage Translations`}</h4>
+          <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"
+          />
         </>
       )}
-    </div>
+    </>
+  )
+}
+
+/** 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 })
+}
+
+interface AutoTranslateLinkProps {
+  locale: string
+  baseLocale: string
+  strings: string[]
+  existingTranslations: { [key: string]: string }
+  onTranslationsChange: (newTranslations: { [key: string]: string }) => void
+}
+
+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>
   )
 }

package/src/dashboards/WidgetComponent.tsx

@@ -1,18 +1,16 @@
 import { Schema, DataSource } from "@mwater/expressions"
-import { useMemo, useRef } from "react"
+import { useRef } from "react"
 import { JsonQLFilter } from "../JsonQLFilter"
 import WidgetFactory from "../widgets/WidgetFactory"
 import { WidgetScope } from "../WidgetScope"
-import DashboardDataSource from "./DashboardDataSource"
 import { WidgetDataSource } from "../widgets/WidgetDataSource"
+import { TOCEntry } from "../widgets/Widget"
 
 /**
  * Component which renders a widget and ensures that props do not change
  * unnecessarily.
  */
 export function WidgetComponent(props: {
-  /** Widget id */
-  id: string
   /** Widget type */
   type: string
 
@@ -56,7 +54,7 @@ export function WidgetComponent(props: {
   namedStrings?: { [key: string]: string }
 
   /** Entries in the table of content */
-  tocEntries?: string[]
+  tocEntries?: TOCEntry[]
 
   /** the widget callback ref */
   widgetRef: (widget: any) => void
@@ -66,6 +64,12 @@ export function WidgetComponent(props: {
 
   /** 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
 }) {
   const widget = WidgetFactory.createWidget(props.type)
 
@@ -96,7 +100,9 @@ export function WidgetComponent(props: {
     tocEntries: props.tocEntries,
     onScrollToTOCEntry: props.onScrollToTOCEntry,
     widgetRef,
-    refreshKey: props.refreshKey
+    refreshKey: props.refreshKey,
+    locale: props.locale,
+    translate: props.translate
   })
 }