@mwater/visualization 5.6.0 → 5.6.1

package/src/dashboards/SettingsModalComponent.tsx

@@ -1,20 +1,16 @@
 import _ from "lodash"
-import React, { useMemo, useRef, useState } from "react"
-import { languages } from "../languages"
+import React, { useMemo } from "react"
 import * as ui from "@mwater/react-library/lib/bootstrap"
-import { default as ReactSelect } from "react-select"
 import * as DashboardUtils from "./DashboardUtils"
 import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
 import FiltersDesignerComponent from "../FiltersDesignerComponent"
-import { DataSource, LocalizedString, Schema } from "@mwater/expressions"
+import { DataSource, 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"
+import { TranslationsTabComponent } from "../TranslationsTabComponent"
 
 export interface SettingsModalComponentProps {
   onDesignChange: (design: DashboardDesign) => void
@@ -225,388 +221,36 @@ interface LanguageTabProps {
   schema: Schema
 }
 
+/** Wrapper around TranslationsTabComponent for dashboard-specific usage */
 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] = (totalStrings > 0) ? Math.floor((translatedCount / totalStrings) * 100) : 0
-    }
-
-    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] = {}
-    }
-
-    // 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()
+  const translatableStrings = useMemo(
+    () => DashboardUtils.getTranslatableStringsFromDashboard(design, schema),
+    [design, schema]
+  )
 
-    reader.onload = (file) => {
-      if (!file.target?.result) {
-        return
+  return (
+    <TranslationsTabComponent
+      locale={design.locale || "en"}
+      otherLocales={design.otherLocales || []}
+      translations={design.translations || {}}
+      translatableStrings={translatableStrings}
+      onLocaleChange={(locale) =>
+        onDesignChange(produce(design, draft => {
+          draft.locale = locale
+        }))
       }
-
-      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)
+      onOtherLocalesChange={(otherLocales) =>
         onDesignChange(produce(design, draft => {
-          draft.translations = newTranslations
+          draft.otherLocales = otherLocales
         }))
-
-        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
-        value={_.findWhere(localeOptions, { value: design.locale || "en" }) || null}
-        options={localeOptions}
-        onChange={(locale: any) =>
-          onDesignChange(produce(design, draft => {
-            draft.locale = locale.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
-            }
-
-            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"
-          />
-        </>
-      )}
-    </>
-  )
-}
-
-/** 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={(translations) =>
+        onDesignChange(produce(design, draft => {
+          draft.translations = translations
+        }))
       }
-
-      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>
+      downloadFilename="Dashboard Translations.xlsx"
+      baseLanguageDescription={T`This is the language that the dashboard is written in.`}
+    />
   )
 }

package/src/datagrids/DatagridComponent.tsx

@@ -126,6 +126,12 @@ export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function
     }
     let activeFilters = filters || []
 
+    // Clean before counting
+    const cleanedDesign = new DatagridUtils(schema).cleanDesign(design)
+    if (new DatagridUtils(schema).validateDesign(cleanedDesign)) {
+      return
+    }
+
     // Compile quickfilters
     activeFilters = activeFilters.concat(getQuickfilterFilters())
     datagridDataSource.countRows(design,

package/src/datagrids/DatagridViewComponent.tsx

@@ -82,6 +82,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   const [rows, setRows] = useState<any[]>([])
   const [entirelyLoaded, setEntirelyLoaded] = useState(false)
   const loadStateRef = useRef<LoadState | null>(null)
+  
+  // Track which design key the current rows were loaded with to avoid rendering stale data
+  // with a mismatched column structure (e.g. after column reorder)
+  const [loadedDesignKey, setLoadedDesignKey] = useState<string | null>(null)
+  const currentDesignKey = getDatagridReloadKey(props.design)
 
   // Get row header width based on selection and showRowNumbers
   const rowHeaderWidth = props.selectedRows 
@@ -154,7 +159,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
 
   /** Render row headers with optional selection checkboxes */
   const renderRowHeader = useCallback((options: RenderRowHeaderProps) => {
-    const rowHeaderStyle = {
+    const rowHeaderStyle: React.CSSProperties = {
       width: options.width,
       height: options.height,
       display: "flex",
@@ -165,9 +170,20 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
       padding: "0 8px"
     }
 
-    const rowId = options.row < rows.length ? rows[options.row].id : null
+    // If design key doesn't match, rows are stale - show loading state
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+      return (
+        <div style={rowHeaderStyle}>
+          {props.design.showRowNumbers ? (
+            <div style={{ flex: 1, textAlign: "right" }}>{options.row + 1}</div>
+          ) : null}
+        </div>
+      )
+    }
+
+    const rowId = rows[options.row].id
     const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false
-    const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false
+    const isSubtable = rows[options.row].subtable >= 0
 
     return (
       <div style={rowHeaderStyle}>
@@ -185,7 +201,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
         ) : null}
       </div>
     )
-  }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect])
+  }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect, loadedDesignKey, currentDesignKey])
 
   const loadMoreRows = useStableCallback((callback?: () => void) => {
     const loadState: LoadState = {
@@ -217,6 +233,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
           loadStateRef.current = null
           setRows(prev => [...prev, ...newRows])
           setEntirelyLoaded(newRows.length < (props.pageSize || 100))
+          setLoadedDesignKey(getDatagridReloadKey(loadState.design))
           callback?.()
         }
       }
@@ -226,6 +243,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   function reload() {
     setRows([])
     setEntirelyLoaded(false)
+    setLoadedDesignKey(null)
   }
 
   // Reset rows when design, filters or refreshKey changes
@@ -341,6 +359,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const handleCopy = useStableCallback((rowIndex: number, colIndex: number) => {
+    // If design key doesn't match, rows are stale - don't copy
+    if (loadedDesignKey !== currentDesignKey || rowIndex >= rows.length) {
+      return
+    }
+
     const row = rows[rowIndex]
     const col = props.design.columns[colIndex]
     const value = row[`c${colIndex}`]
@@ -369,6 +392,13 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const renderCell = useStableCallback((options: RenderCellProps) => {
+    // If rows were loaded with a different design key, show loading state to avoid
+    // rendering stale data with mismatched column structure (e.g. after column reorder)
+    if (loadedDesignKey !== currentDesignKey) {
+      _.defer(() => loadMoreRows())
+      return <div style={{ padding: 8 }}><i className="fa fa-spinner fa-spin text-muted" /></div>
+    }
+    
     if (options.row >= rows.length) {
       _.defer(() => loadMoreRows())
       return <div style={{ padding: 8 }}><i className="fa fa-spinner fa-spin text-muted" /></div>
@@ -446,7 +476,8 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const renderCellEditor = useStableCallback((options: RenderCellEditorProps) => {
-    if (options.row >= rows.length) {
+    // If design key doesn't match, rows are stale - don't render editor
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
       return <div />
     }
 
@@ -478,6 +509,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
       return false
     }
 
+    // If design key doesn't match, rows are stale - don't allow edit
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+      return false
+    }
+
     const rowId = rows[options.row].id
     if (rowId == null) {
       return false