@mwater/visualization 5.4.1 → 5.4.3

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -1,9 +1,9 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-import update from "update-object"
+import uuid from "uuid"
+import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, FieldExpr, Schema } from "@mwater/expressions"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import { ListEditorComponent } from "@mwater/react-library/lib/ListEditorComponent"
 import { Quickfilter } from "./Quickfilter"
@@ -21,21 +21,29 @@ export interface QuickfiltersDesignComponentProps {
 
 // Displays quick filters and allows their value to be modified
 export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-  handleDesignChange = (design: any) => {
-    design = design.slice()
+  handleDesignChange = (design: Quickfilter[]) => {
+    // Use immer produce to create immutable update
+    const newDesign = produce(design, draft => {
+      // Add UUID if missing
+      for (let i = 0; i < draft.length; i++) {
+        if (!draft[i].id) {
+          draft[i].id = uuid.v4()
+        }
+      }
 
-    // Update merged, clearing if not mergeable
-    for (let index = 0, end = design.length, asc = 0 <= end; asc ? index < end : index > end; asc ? index++ : index--) {
-      if (design[index].merged && !this.isMergeable(design, index)) {
-        design[index] = _.extend({}, design[index], { merged: false })
+      // Update merged flag, clearing if not mergeable
+      for (let i = 0; i < draft.length; i++) {
+        if (draft[i].merged && !this.isMergeable(draft, i)) {
+          draft[i].merged = false
+        }
       }
-    }
+    })
 
-    return this.props.onDesignChange(design)
+    this.props.onDesignChange(newDesign)
   }
 
   // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-  isMergeable(design: any, index: any) {
+  isMergeable(design: Quickfilter[], index: number) {
     if (index === 0) {
       return false
     }
@@ -73,54 +81,51 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
     return true
   }
 
-  renderQuickfilter = (item: any, index: any) => {
-    return R(QuickfilterDesignComponent, {
-      key: index,
-      design: item,
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      tables: this.props.tables,
-      mergeable: this.isMergeable(this.props.design, index),
-      onChange: (newItem: any) => {
+  renderQuickfilter = (item: Quickfilter, index: number) => {
+    return <QuickfilterDesignComponent
+      key={index}
+      design={item}
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      tables={this.props.tables}
+      mergeable={this.isMergeable(this.props.design, index)}
+      onChange={(newItem: Quickfilter) => {
         const design = this.props.design.slice()
         design[index] = newItem
         return this.handleDesignChange(design)
-      },
-
-      onRemove: this.handleRemove.bind(null, index)
-    })
+      }}
+      onRemove={this.handleRemove.bind(null, index)}
+    />
   }
 
   handleAdd = () => {
     // Add blank to end
     const design = this.props.design.concat([{ expr: null }])
-    return this.props.onDesignChange(design)
+    this.props.onDesignChange(design)
   }
 
-  handleRemove = (index: any) => {
+  handleRemove = (index: number) => {
     const design = this.props.design.slice()
     design.splice(index, 1)
-    return this.props.onDesignChange(design)
+    this.props.onDesignChange(design)
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      <ListEditorComponent
-        items={this.props.design}
-        onItemsChange={this.handleDesignChange}
-        renderItem={this.renderQuickfilter}
-        getReorderableKey={(item, index) => index}
-      />,
-      this.props.tables.length > 0
-        ? R(
-            "button",
-            { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
-            R("span", { className: "fas fa-plus" }),
-            T`Add Quick Filter`
-          )
-        : undefined
+    return (
+      <div>
+        <ListEditorComponent
+          items={this.props.design}
+          onItemsChange={this.handleDesignChange}
+          renderItem={this.renderQuickfilter}
+          getReorderableKey={(item, index) => item.id || index}
+        />
+        {this.props.tables.length > 0 ? (
+          <button type="button" className="btn btn-sm btn-link" onClick={this.handleAdd}>
+            <span className="fas fa-plus me-1" />
+            {T`Add Quick Filter`}
+          </button>
+        ) : undefined}
+      </div>
     )
   }
 }
@@ -138,7 +143,7 @@ interface QuickfilterDesignComponentProps {
 }
 
 interface QuickfilterDesignComponentState {
-  table: any
+  table: string
 }
 
 /** Single quickfilter design component */
@@ -146,16 +151,16 @@ class QuickfilterDesignComponent extends React.Component<
   QuickfilterDesignComponentProps,
   QuickfilterDesignComponentState
 > {
-  constructor(props: any) {
+  constructor(props: QuickfilterDesignComponentProps) {
     super(props)
 
     // Store table to allow selecting table first, then expression
     this.state = {
-      table: props.design.expr?.table || props.tables[0]
+      table: (props.design.expr as FieldExpr)?.table || props.tables[0]
     }
   }
 
-  handleTableChange = (table: any) => {
+  handleTableChange = (table: string) => {
     this.setState({ table })
     const design = {
       expr: null
@@ -163,95 +168,89 @@ class QuickfilterDesignComponent extends React.Component<
     return this.props.onChange(design)
   }
 
-  handleExprChange = (expr: any) => {
-    return this.props.onChange(update(this.props.design, { expr: { $set: expr } }))
+  handleExprChange = (expr: Expr) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.expr = expr
+    }))
   }
+
   handleLabelChange = (ev: any) => {
-    return this.props.onChange(update(this.props.design, { label: { $set: ev.target.value } }))
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.label = ev.target.value
+    }))
   }
-  handleMergedChange = (merged: any) => {
-    return this.props.onChange(update(this.props.design, { merged: { $set: merged } }))
+
+  handleMergedChange = (merged: boolean) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.merged = merged
+    }))
   }
-  handleMultiChange = (multi: any) => {
-    return this.props.onChange(update(this.props.design, { multi: { $set: multi } }))
+
+  handleMultiChange = (multi: boolean) => {
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.multi = multi
+    }))
   }
 
   render() {
     // Determine type of expression
     const exprType = new ExprUtils(this.props.schema).getExprType(this.props.design.expr)
 
-    return R(
-      "div", {},
-      R(
-        "div",
-        { className: "mb-3 mt-1", key: "table" },
-        R("label", { className: "text-muted" }, T`Data Source`),
-        R(ui.Select, {
-          value: this.state.table,
-          options: _.map(this.props.tables, (table) => ({
-            value: table,
-            label: ExprUtils.localizeString(this.props.schema.getTable(table)!.name)
-          })),
-          onChange: this.handleTableChange,
-          nullLabel: T`Select...`
-        })
-      ),
-
-      R(
-        "div",
-        { className: "mb-3", key: "expr" },
-        R("label", { className: "text-muted" }, T`Filter By`),
-        R(
-          "div",
-          null,
-          R(ExprComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.state.table,
-            value: this.props.design.expr,
-            onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
-          })
-        )
-      ),
-
-      this.props.design.expr
-        ? R(
-            "div",
-            { className: "mb-3", key: "label" },
-            R("label", { className: "text-muted" }, T`Label`),
-            R("input", {
-              type: "text",
-              className: "form-control form-control-sm",
-              value: this.props.design.label || "",
-              onChange: this.handleLabelChange,
-              placeholder: T`Optional Label`
-            })
-          )
-        : undefined,
-
-      this.props.mergeable
-        ? R(
-            ui.Checkbox,
-            {
-              value: this.props.design.merged,
-              onChange: this.handleMergedChange
-            },
-            T`Merge with previous quickfilter `,
-            R("span", { className: "text-muted" }, T`- displays as one single control that filters both`)
-          )
-        : undefined,
-
-      ["enum", "text", "enumset", "id[]", "text[]"].includes(exprType!)
-        ? R(
-            ui.Checkbox,
-            {
-              value: this.props.design.multi,
-              onChange: this.handleMultiChange
-            },
-            T`Allow multiple selections`
-          )
-        : undefined
+    return (
+      <div>
+        <div className="mb-3 mt-1" key="table">
+          <label className="text-muted">{T`Data Source`}</label>
+          <ui.Select
+            value={this.state.table}
+            options={_.map(this.props.tables, (table) => ({
+              value: table,
+              label: ExprUtils.localizeString(this.props.schema.getTable(table)!.name)
+            }))}
+            onChange={this.handleTableChange}
+            nullLabel={T`Select...`}
+          />
+        </div>
+
+        <div className="mb-3" key="expr">
+          <label className="text-muted">{T`Filter By`}</label>
+          <div>
+            <ExprComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.state.table}
+              value={this.props.design.expr}
+              onChange={this.handleExprChange}
+              types={["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]}
+            />
+          </div>
+        </div>
+
+        {this.props.design.expr ? (
+          <div className="mb-3" key="label">
+            <label className="text-muted">{T`Label`}</label>
+            <input
+              type="text"
+              className="form-control form-control-sm"
+              value={this.props.design.label || ""}
+              onChange={this.handleLabelChange}
+              placeholder={T`Optional Label`}
+            />
+          </div>
+        ) : undefined}
+
+        {this.props.mergeable ? (
+          <ui.Checkbox value={this.props.design.merged} onChange={this.handleMergedChange}>
+            {T`Merge with previous quickfilter `}
+            <span className="text-muted">{`- ${T`displays as one single control that filters both`}`}</span>
+          </ui.Checkbox>
+        ) : undefined}
+
+        {["enum", "text", "enumset", "id[]", "text[]"].includes(exprType!) ? (
+          <ui.Checkbox value={this.props.design.multi} onChange={this.handleMultiChange}>
+            {T`Allow multiple selections`}
+          </ui.Checkbox>
+        ) : undefined}
+      </div>
     )
   }
 }

package/src/richtext/ExprItemsHtmlConverter.ts

@@ -1,10 +1,11 @@
 import _ from "lodash"
-import ItemsHtmlConverter, { HtmlItemBase } from "./ItemsHtmlConverter"
+import ItemsHtmlConverter, { HtmlItem, HtmlItemBase } from "./ItemsHtmlConverter"
 import { Expr, ExprUtils, Schema } from "@mwater/expressions"
 import uuid from "uuid"
 import { formatValue } from "../valueFormatter"
 import { canFormatType } from "../valueFormatter"
 
+/** Html item that is an expression */
 export interface HtmlItemExpr extends HtmlItemBase {
   type: "expr"
  
@@ -24,6 +25,9 @@ export interface HtmlItemExpr extends HtmlItemBase {
   format?: string
 }
 
+/** Html item that is an expression or a normal item */
+export type HtmlItemOrExpr = HtmlItem | HtmlItemExpr
+
 /**
  * ItemsHtmlConverter that supports embedded mwater expressions
  * Converts items (JSON contents of rich text) to HTML and back to allow editing
@@ -66,7 +70,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
       if (this.summarizeExprs) {
         text = new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale)
         if (text.length > 30) {
-          text = text.substr(0, 30) + T`...`
+          text = text.substr(0, 30) + `...`
         }
 
         exprHtml = _.escape(text)
@@ -88,7 +92,7 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
 
           exprHtml = _.escape(text)
         } else {
-          exprHtml = `<span style="color: #DDD">${T`---`}</span>`
+          exprHtml = `<span style="color: #DDD">${`---`}</span>`
         }
       } else {
         // Placeholder
@@ -97,14 +101,14 @@ export default class ExprItemsHtmlConverter extends ItemsHtmlConverter {
 
       // Add label
       if (exprItem.includeLabel) {
-        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + T`:\u00A0`
+        const label = exprItem.labelText || new ExprUtils(this.schema).summarizeExpr(exprItem.expr, this.locale) + `:\u00A0`
         exprHtml = `<span class="text-muted">${_.escape(label)}</span>` + exprHtml
       }
 
       if (this.designMode) {
         html +=
           `\u2060<span data-embed="${_.escape(JSON.stringify(item))}" class="mwater-visualization-text-widget-expr">` +
-          (exprHtml || T`\u00A0`) +
+          (exprHtml || `\u00A0`) +
           `</span>\u2060`
       } else {
         // View mode

package/src/richtext/ExprItemsTranslator.ts

@@ -0,0 +1,176 @@
+import _ from "lodash"
+import { HtmlItemExpr, HtmlItemOrExpr } from "./ExprItemsHtmlConverter"
+import { produce } from "immer"
+import ItemsHtmlConverter, { HtmlItem, HtmlItemBase, HtmlItemElement } from "./ItemsHtmlConverter"
+
+/** Gets all unique strings from html items */
+export function getHtmlItemsStrings(items: HtmlItemOrExpr[]): string[] {
+  const strings = new Set<string>()
+  
+  // Create collector function that just saves strings and returns them unchanged
+  const collectStrings = (str: string) => {
+    // Only collect non-empty strings
+    if (str) {
+      strings.add(str)
+    }
+    return str
+  }
+
+  // Use existing translation function but with collector
+  translateHtmlItems(items, collectStrings)
+
+  return Array.from(strings)
+}
+
+/** Translates items in an html items list with expressions */
+export function translateHtmlItems(items: HtmlItemOrExpr[], translate: (input: string) => string): HtmlItemOrExpr[] {
+  return produce(items, draft => {
+    function translateItems(itemList: HtmlItemOrExpr[]) {
+      // Accumulate simple items
+      let simpleItems: HtmlItemOrExpr[] = []
+      let simpleItemStartIndex: number | null = null
+
+      /** Process accumulated simple nodes which are simple inline elements */
+      function processSimpleNodes() {
+        if (simpleItems.length === 0) {
+          return
+        }
+
+        // Create html string with {0}, {1}, etc. for expressions and html for other items
+        const expressions: HtmlItemExpr[] = []
+
+        const converter = new TranslationItemsHtmlConverter(item => {
+          if (item.type === "expr") {
+            const expr = item as HtmlItemExpr
+            if (expr.labelText) {
+              expr.labelText = translate(expr.labelText)
+            }
+            expressions.push(expr)
+            return `{${expressions.length - 1}}`
+          }
+          return ""
+        })
+
+        // Convert items to html which has the side effect of translating expressions
+        let html = converter.convertItemsToHtml(simpleItems)
+
+        // If there was no text, do nothing except translate expressions
+        if (!simpleItems.some(doesItemContainText)) {
+          return
+        }
+        
+        // Remove leading and trailing whitespace from the HTML
+        const leftWhitespace = html.slice(0, html.length - html.trimStart().length)
+        const rightWhitespace = html.slice(html.trimEnd().length)
+        html = html.trim()
+
+        if (!html) {
+          return
+        }
+
+        let translatedHtml = leftWhitespace + translate(html) + rightWhitespace
+
+        // Parse translatedHtml into items by first replacing {0}, {1}, etc. with html that can be converted to items
+        for (let i = 0; i < expressions.length; i++) {
+          const expr = expressions[i]
+          translatedHtml = translatedHtml.replace(new RegExp(`\\{${i}\\}`, "g"), `<span data-embed="${_.escape(JSON.stringify(expr))}"></span>`)
+        }
+
+        // Wrap in a div to prevent whitespace from being trimmed.
+        const translatedItems = (converter.convertElemToItems(new DOMParser().parseFromString("<div>" + translatedHtml + "</div>", "text/html").body.firstChild as HTMLElement))
+
+        // Replace the simple items with the translated items
+        itemList.splice(simpleItemStartIndex!, simpleItems.length, ...translatedItems)
+
+        simpleItems = []
+        simpleItemStartIndex = null
+      }
+
+      for (let i = 0; i < itemList.length; i++) {
+        const item = itemList[i]
+
+        // If the child is a simple node, add it to the list
+        if (isItemSimple(item)) {
+          simpleItems.push(item)
+          if (simpleItemStartIndex == null) {
+            simpleItemStartIndex = i
+          }
+        } else {
+          // If we have gathered simple nodes, we need to return/replace them
+          processSimpleNodes()
+          simpleItemStartIndex = null
+          simpleItems = []
+
+          // Handle the current node
+          if (typeof item !== "string" && item.type === "element" && item.items) {
+            translateItems(item.items)
+          }
+        }
+      }
+
+      if (simpleItems.length > 0) {
+        processSimpleNodes()
+        simpleItemStartIndex = null
+        simpleItems = []
+      }
+    }
+
+    translateItems(draft)
+  })
+}
+
+/** ItemsHtmlConverter that has a callback for handling special items */
+class TranslationItemsHtmlConverter extends ItemsHtmlConverter {
+  handleSpecialItem: (item: HtmlItemBase) => string
+  
+  constructor(handleSpecialItem: (item: HtmlItemBase) => string) {
+    super()
+    this.handleSpecialItem = handleSpecialItem
+  }
+
+  convertSpecialItemToHtml(item: HtmlItemBase) {
+    return this.handleSpecialItem(item)
+  }
+}
+
+/**
+ * Check if an html item is simple.
+ * A node is simple if it is:
+ *  - a string
+ *  - a tag that is a "b", "i", "u", "a", "strong", "em" tag with no children or only simple children
+ * Only sequences of simple nodes are exported to translation entries as HTML.
+ */
+function isItemSimple(node: HtmlItemOrExpr): boolean {
+  if (typeof node === "string") {
+    return true
+  }
+
+  if (node.type === "expr") {
+    return true
+  }
+
+  if (node.type === "element") {
+    const element = node as HtmlItemElement
+
+    if (["b", "i", "u", "a", "strong", "em"].indexOf(element.tag) === -1) {
+      return false
+    }
+
+    return (element.items || []).every(child => isItemSimple(child))
+  }
+
+  return false
+}
+
+/** Determines if an item contains any non-empty text strings */
+function doesItemContainText(item: HtmlItemOrExpr): boolean {
+  if (typeof item === "string") {
+    return item.trim().length > 0
+  }
+
+  if (item.type === "element") {
+    return (item.items || []).some(child => doesItemContainText(child))
+  }
+
+  return false
+}