@mwater/visualization 5.5.0 → 5.6.0

package/src/quickfilter/{QuickfiltersComponent.ts → QuickfiltersComponent.tsx}

@@ -1,8 +1,7 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import { default as ReactSelect } from "react-select"
-import { DataSource, ExprUtils, LocalizedString, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, LocalizedString, Schema } from "@mwater/expressions"
 import { ExprCleaner } from "@mwater/expressions"
 import TextLiteralComponent from "./TextLiteralComponent"
 import DateExprComponent from "./DateExprComponent"
@@ -45,7 +44,7 @@ export interface QuickfiltersComponentProps {
 
 /** Displays quick filters and allows their value to be modified */
 export default class QuickfiltersComponent extends React.Component<QuickfiltersComponentProps> {
-  renderQuickfilter(item: any, index: any) {
+  renderQuickfilter(item: Quickfilter, index: number) {
     // Skip if merged
     let onValueChange
     if (item.merged) {
@@ -56,10 +55,12 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
     let itemValue = values[index]
 
     // Translate label
-    const label = this.props.translate?.(item.label) ?? item.label
+    const label = this.props.translate?.(item.label ?? "") ?? item.label ?? ""
+
+    const exprCleaner = new ExprCleaner(this.props.schema)
 
     // Clean expression first
-    const expr = new ExprCleaner(this.props.schema).cleanExpr(item.expr)
+    const expr = exprCleaner.cleanExpr(item.expr)
 
     // Do not render if nothing
     if (!expr) {
@@ -72,6 +73,22 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
       return null
     }
 
+    // If this quickfilter is text or text[] and has subsequent merged quickfilters, gather their expressions
+    let exprsToPass: Expr[] = [expr]
+    if (["text", "text[]"].includes(type)) {
+      for (let i2 = index + 1; i2 < this.props.design.length; i2++) {
+        const nextItem = this.props.design[i2]
+        if (nextItem.merged) {
+          const cleaned = exprCleaner.cleanExpr(nextItem.expr)
+          if (cleaned) {
+            exprsToPass.push(cleaned)
+          }
+        } else {
+          break
+        }
+      }
+    }
+
     // Determine if locked
     const lock = _.find(this.props.locks || [], (lock) => _.isEqual(lock.expr, expr))
 
@@ -110,71 +127,71 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
     const filters = (this.props.filters || []).concat(otherQuickfilterFilters)
 
     if (["enum", "enumset"].includes(type)) {
-      return R(EnumQuickfilterComponent, {
-        key: JSON.stringify(item),
-        label,
-        schema: this.props.schema,
-        options: new ExprUtils(this.props.schema).getExprEnumValues(expr)!,
-        value: itemValue,
-        onValueChange,
-        multi: item.multi
-      })
+      return <EnumQuickfilterComponent
+        key={JSON.stringify(item)}
+        label={label}
+        schema={this.props.schema}
+        options={new ExprUtils(this.props.schema).getExprEnumValues(expr)!}
+        value={itemValue}
+        onValueChange={onValueChange}
+        multi={item.multi}
+      />
     }
 
     if (type === "text") {
-      return R(TextQuickfilterComponent, {
-        key: JSON.stringify(item),
-        index,
-        label,
-        expr,
-        schema: this.props.schema,
-        quickfiltersDataSource: this.props.quickfiltersDataSource,
-        value: itemValue,
-        onValueChange,
-        filters,
-        multi: item.multi
-      })
+      return <TextQuickfilterComponent
+        key={JSON.stringify(item)}
+        index={index}
+        label={label}
+        expr={exprsToPass}
+        schema={this.props.schema}
+        quickfiltersDataSource={this.props.quickfiltersDataSource}
+        value={itemValue}
+        onValueChange={onValueChange}
+        filters={filters}
+        multi={item.multi}
+      />
     }
 
     if (["date", "datetime"].includes(type)) {
-      return R(DateQuickfilterComponent, {
-        key: JSON.stringify(item),
-        label,
-        expr,
-        schema: this.props.schema,
-        value: itemValue,
-        onValueChange
-      })
+      return <DateQuickfilterComponent
+        key={JSON.stringify(item)}
+        label={label}
+        expr={expr}
+        schema={this.props.schema}
+        value={itemValue}
+        onValueChange={onValueChange}
+      />
     }
 
     if (type === "id[]") {
-      return R(IdArrayQuickfilterComponent, {
-        key: JSON.stringify(item),
-        index,
-        label,
-        expr,
-        schema: this.props.schema,
-        dataSource: this.props.dataSource,
-        value: itemValue,
-        onValueChange,
-        filters,
-        multi: item.multi
-      })
+      return <IdArrayQuickfilterComponent
+        key={JSON.stringify(item)}
+        index={index}
+        label={label}
+        expr={expr}
+        schema={this.props.schema}
+        dataSource={this.props.dataSource}
+        value={itemValue}
+        onValueChange={onValueChange}
+        filters={filters}
+        multi={item.multi}
+      />
     }
 
     if (type === "text[]") {
-      return R(TextArrayQuickfilterComponent, {
-        key: JSON.stringify(item),
-        index,
-        label,
-        expr,
-        schema: this.props.schema,
-        quickfiltersDataSource: this.props.quickfiltersDataSource,
-        value: itemValue,
-        onValueChange,
-        filters,
-        multi: item.multi
-      })
+      return <TextArrayQuickfilterComponent
+        key={JSON.stringify(item)}
+        index={index}
+        label={label}
+        expr={exprsToPass}
+        schema={this.props.schema}
+        quickfiltersDataSource={this.props.quickfiltersDataSource}
+        value={itemValue}
+        onValueChange={onValueChange}
+        filters={filters}
+        multi={item.multi}
+      />
     }
 
     return null
@@ -185,23 +202,21 @@ export default class QuickfiltersComponent extends React.Component<QuickfiltersC
       return null
     }
 
-    return R(
-      "div",
-      {
-        style: {
+    return (
+      <div
+        style={{
           borderTop: !this.props.hideTopBorder ? "solid 1px #E8E8E8" : undefined,
           borderBottom: "solid 1px #E8E8E8",
           padding: 5
-        }
-      },
-      _.map(this.props.design, (item, i) => this.renderQuickfilter(item, i)),
-      this.props.onHide
-        ? R(
-          "button",
-          { className: "btn btn-sm btn-link", onClick: this.props.onHide },
-          R("i", { className: "fa fa-angle-double-up" })
-        )
-        : undefined
+        }}
+      >
+        {_.map(this.props.design, (item, i) => this.renderQuickfilter(item, i))}
+        {this.props.onHide ? (
+          <button className="btn btn-sm btn-link" onClick={this.props.onHide}>
+            <i className="fa fa-angle-double-up" />
+          </button>
+        ) : undefined}
+      </div>
     )
   }
 }
@@ -244,38 +259,38 @@ class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentP
   }
 
   renderSingleSelect(options: any[]) {
-    return R(ReactSelect, {
-      placeholder: T`All`,
-      value: _.findWhere(options, { value: this.props.value }) || null,
-      options,
-      isClearable: true,
-      onChange: (value: any) => {
+    return <ReactSelect
+      placeholder={T`All`}
+      value={_.findWhere(options, { value: this.props.value }) || null}
+      options={options}
+      isClearable={true}
+      onChange={(value: any) => {
         if (this.props.onValueChange) {
           return this.handleSingleChange(value?.value)
         }
-      },
-      isDisabled: this.props.onValueChange == null,
-      styles: {
+      }}
+      isDisabled={this.props.onValueChange == null}
+      styles={{
         // Keep menu above fixed data table headers
         menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
+      }}
+    />
   }
 
   renderMultiSelect(options: any[]) {
-    return R(ReactSelect, {
-      placeholder: T`All`,
-      value: _.map(this.props.value, (v) => _.find(options, (o) => o.value === v)),
-      isClearable: true,
-      isMulti: true,
-      options,
-      onChange: this.props.onValueChange ? this.handleMultiChange : undefined,
-      isDisabled: this.props.onValueChange == null,
-      styles: {
+    return <ReactSelect
+      placeholder={T`All`}
+      value={_.map(this.props.value, (v) => _.find(options, (o) => o.value === v))}
+      isClearable={true}
+      isMulti={true}
+      options={options}
+      onChange={this.props.onValueChange ? this.handleMultiChange : undefined}
+      isDisabled={this.props.onValueChange == null}
+      styles={{
         // Keep menu above fixed data table headers
         menu: (style) => _.extend({}, style, { zIndex: 2000 })
-      }
-    })
+      }}
+    />
   }
 
   render() {
@@ -289,16 +304,14 @@ class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentP
     width = width ? width * 8 + 120 : 280
     const minWidth = width > 280 || this.props.multi ? "280px" : `${width}px`
 
-    return R(
-      "div",
-      { style: { display: "inline-block", paddingRight: 10 } },
-      this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
-      R(
-        "div",
-        { style: { display: "inline-block", minWidth, verticalAlign: "middle" } },
-        this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)
-      ),
-      !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined
+    return (
+      <div style={{ display: "inline-block", paddingRight: 10 }}>
+        {this.props.label ? <span style={{ color: "gray" }}>{this.props.label + ":\u00a0"}</span> : undefined}
+        <div style={{ display: "inline-block", minWidth, verticalAlign: "middle" }}>
+          {this.props.multi ? this.renderMultiSelect(options) : this.renderSingleSelect(options)}
+        </div>
+        {!this.props.onValueChange ? <i className="text-warning fa fa-fw fa-lock" /> : undefined}
+      </div>
     )
   }
 }
@@ -308,7 +321,7 @@ interface TextQuickfilterComponentProps {
   schema: Schema
   /** See QuickfiltersDataSource */
   quickfiltersDataSource: QuickfiltersDataSource
-  expr: any
+  expr: Expr[]
   index: number
   /** Current value of quickfilter (state of filter selected) */
   value?: any
@@ -324,25 +337,23 @@ interface TextQuickfilterComponentProps {
 // Quickfilter for a text value
 class TextQuickfilterComponent extends React.Component<TextQuickfilterComponentProps> {
   render() {
-    return R(
-      "div",
-      { style: { display: "inline-block", paddingRight: 10 } },
-      this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
-      R(
-        "div",
-        { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
-        R(TextLiteralComponent, {
-          value: this.props.value,
-          onChange: this.props.onValueChange,
-          schema: this.props.schema,
-          expr: this.props.expr,
-          index: this.props.index,
-          multi: this.props.multi,
-          quickfiltersDataSource: this.props.quickfiltersDataSource,
-          filters: this.props.filters
-        })
-      ),
-      !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined
+    return (
+      <div style={{ display: "inline-block", paddingRight: 10 }}>
+        {this.props.label ? <span style={{ color: "gray" }}>{this.props.label + ":\u00a0"}</span> : undefined}
+        <div style={{ display: "inline-block", minWidth: "280px", verticalAlign: "middle" }}>
+          <TextLiteralComponent
+            value={this.props.value}
+            onChange={this.props.onValueChange}
+            schema={this.props.schema}
+            expr={this.props.expr}
+            index={this.props.index}
+            multi={this.props.multi}
+            quickfiltersDataSource={this.props.quickfiltersDataSource}
+            filters={this.props.filters}
+          />
+        </div>
+        {!this.props.onValueChange ? <i className="text-warning fa fa-fw fa-lock" /> : undefined}
+      </div>
     )
   }
 }
@@ -359,20 +370,18 @@ interface DateQuickfilterComponentProps {
 // Quickfilter for a date value
 class DateQuickfilterComponent extends React.Component<DateQuickfilterComponentProps> {
   render() {
-    return R(
-      "div",
-      { style: { display: "inline-block", paddingRight: 10 } },
-      this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
-      R(
-        "div",
-        { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
-        R(DateExprComponent, {
-          datetime: new ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime",
-          value: this.props.value,
-          onChange: this.props.onValueChange
-        })
-      ),
-      !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined
+    return (
+      <div style={{ display: "inline-block", paddingRight: 10 }}>
+        {this.props.label ? <span style={{ color: "gray" }}>{this.props.label + ":\u00a0"}</span> : undefined}
+        <div style={{ display: "inline-block", minWidth: "280px", verticalAlign: "middle" }}>
+          <DateExprComponent
+            datetime={new ExprUtils(this.props.schema).getExprType(this.props.expr) === "datetime"}
+            value={this.props.value}
+            onChange={this.props.onValueChange}
+          />
+        </div>
+        {!this.props.onValueChange ? <i className="text-warning fa fa-fw fa-lock" /> : undefined}
+      </div>
     )
   }
 }
@@ -382,7 +391,7 @@ interface TextArrayQuickfilterComponentProps {
   schema: Schema
   /** See QuickfiltersDataSource */
   quickfiltersDataSource: QuickfiltersDataSource
-  expr: any
+  expr: Expr[]
   index: number
   /** Current value of quickfilter (state of filter selected) */
   value?: any
@@ -398,25 +407,23 @@ interface TextArrayQuickfilterComponentProps {
 /** Quickfilter for a text value */
 class TextArrayQuickfilterComponent extends React.Component<TextArrayQuickfilterComponentProps> {
   render() {
-    return R(
-      "div",
-      { style: { display: "inline-block", paddingRight: 10 } },
-      this.props.label ? R("span", { style: { color: "gray" } }, this.props.label + ":\u00a0") : undefined,
-      R(
-        "div",
-        { style: { display: "inline-block", minWidth: "280px", verticalAlign: "middle" } },
-        R(TextLiteralComponent, {
-          value: this.props.value,
-          onChange: this.props.onValueChange,
-          schema: this.props.schema,
-          expr: this.props.expr,
-          index: this.props.index,
-          multi: this.props.multi,
-          quickfiltersDataSource: this.props.quickfiltersDataSource,
-          filters: this.props.filters
-        })
-      ),
-      !this.props.onValueChange ? R("i", { className: "text-warning fa fa-fw fa-lock" }) : undefined
+    return (
+      <div style={{ display: "inline-block", paddingRight: 10 }}>
+        {this.props.label ? <span style={{ color: "gray" }}>{this.props.label + ":\u00a0"}</span> : undefined}
+        <div style={{ display: "inline-block", minWidth: "280px", verticalAlign: "middle" }}>
+          <TextLiteralComponent
+            value={this.props.value}
+            onChange={this.props.onValueChange}
+            schema={this.props.schema}
+            expr={this.props.expr}
+            index={this.props.index}
+            multi={this.props.multi}
+            quickfiltersDataSource={this.props.quickfiltersDataSource}
+            filters={this.props.filters}
+          />
+        </div>
+        {!this.props.onValueChange ? <i className="text-warning fa fa-fw fa-lock" /> : undefined}
+      </div>
     )
   }
 }

package/src/quickfilter/TextLiteralComponent.tsx

@@ -0,0 +1,197 @@
+import _ from "lodash"
+import React from "react"
+import { default as AsyncReactSelect } from "react-select/async"
+import { Expr, ExprCompiler, Schema } from "@mwater/expressions"
+import { ExprUtils } from "@mwater/expressions"
+import { JsonQLFilter } from "../JsonQLFilter"
+import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
+
+export interface TextLiteralComponentProps {
+  value?: string | string[] | null
+  onChange?: (value: string | string[] | null) => void
+  schema: Schema
+  /** See QuickfiltersDataSource */
+  quickfiltersDataSource: QuickfiltersDataSource
+  /** 
+   * One or more expressions whose values should be combined into a single option list.
+   * Each subsequent expression represents another quickfilter that is merged with this one.
+   * The first expression is the main quickfilter, and the subsequent expressions are merged with it.
+   */
+  expr: Expr[]
+  index: number
+  /** true to display multiple values */
+  multi?: boolean
+
+  /** Filters to add to restrict quick filter data to */
+  filters?: JsonQLFilter[]
+}
+
+/** Displays a combo box that allows selecting single or multiple text values from an expression
+ * The expression can be type `text` or `text[]`
+ */
+export default class TextLiteralComponent extends React.Component<TextLiteralComponentProps> {
+  handleSingleChange = (val: any) => {
+    const value = val ? val.value || null : null // Blank is null
+    return this.props.onChange?.(value)
+  }
+
+  handleMultipleChange = (val: any) => {
+    const value = val ? _.pluck(val, "value") : []
+
+    if (value.length > 0) {
+      return this.props.onChange?.(value)
+    } else {
+      return this.props.onChange?.(null)
+    }
+  }
+
+  /**
+   * Load the options for the select. If multiple expressions are supplied, each
+   * is queried independently and the union of the results (unique values) is
+   * returned.
+   */
+  getOptions = (input: string, cb: (rows: { value: string; label: string }[]) => void) => {
+    // Normalise to array so we can treat single and multiple uniformly
+    const exprs = this.props.expr
+
+    // Keep the unique set of text values that come back from each expression
+    const uniqueValues = new Set<string>()
+
+    // Early exit if no expressions
+    if (exprs.length === 0) {
+      cb([])
+      return
+    }
+
+    let remaining = exprs.length
+
+    // Helper that is called after each async query completes
+    const maybeFinish = () => {
+      remaining -= 1
+      if (remaining === 0) {
+        const result = Array.from(uniqueValues).map((value) => ({ value, label: value }))
+        cb(result)
+      }
+    }
+
+    // Execute a query for each expression
+    for (let i = 0; i < exprs.length; i++) {
+      const expr = exprs[i]
+      // Clone base filters for this expression so that each expression gets its own copy
+      const filters = (this.props.filters || []).slice()
+
+      const exprUtils = new ExprUtils(this.props.schema)
+      const exprType = exprUtils.getExprType(expr)
+
+      // Create query to get matches
+      const exprCompiler = new ExprCompiler(this.props.schema)
+      const exprTable = exprUtils.getExprTable(expr)
+
+      if (!exprTable) {
+        maybeFinish()
+        return
+      }
+
+      // Add filter for the input text depending on expression type
+      if (exprType === "text") {
+        if (input) {
+          filters.push({
+            table: exprTable,
+            jsonql: {
+              type: "op",
+              op: "~*",
+              exprs: [
+                exprCompiler.compileExpr({ expr, tableAlias: "{alias}" }),
+                escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+              ]
+            }
+          })
+        }
+      } else if (exprType === "text[]") {
+        if (input) {
+          filters.push({
+            table: "values",
+            jsonql: {
+              type: "op",
+              op: "~*",
+              exprs: [
+                { type: "field", tableAlias: "{alias}", column: "value" },
+                "^" + escapeRegex(input) // Avoid _.escapeRegExp to prevent extra backslashes that Postgres dislikes
+              ]
+            }
+          })
+        }
+      } else {
+        // Unsupported type – skip this expression
+        maybeFinish()
+        return
+      }
+
+      // Execute the data source query for this expression
+      this.props.quickfiltersDataSource.getValues(
+        this.props.index + i, // Index of this quickfilter in the design
+        expr,
+        filters,
+        null,
+        250,
+        (err: any, values: any[] = []) => {
+          if (!err && values) {
+            // Filter out null / blank and add to unique set
+            _.filter(values, (v) => v).forEach((v) => uniqueValues.add(v))
+          }
+
+          maybeFinish()
+        }
+      )
+    }
+  }
+
+  renderSingle() {
+    const currentValue = this.props.value ? { value: this.props.value, label: this.props.value } : null
+
+    return <AsyncReactSelect
+      key={JSON.stringify(this.props.filters)} // Include to force a change when filters change
+      placeholder={T`All`}
+      value={currentValue}
+      loadOptions={this.getOptions}
+      onChange={this.props.onChange ? this.handleSingleChange : undefined}
+      isClearable={true}
+      defaultOptions={true}
+      isDisabled={this.props.onChange == null}
+      noOptionsMessage={() => T`Type to search`}
+      styles={{
+        // Keep menu above fixed data table headers
+        menu: (style) => _.extend({}, style, { zIndex: 2000 })
+      }}
+    />
+  }
+
+  renderMultiple() {
+    const currentValue = this.props.value ? _.map(this.props.value, (v) => ({ value: v, label: v })) : null
+
+    return <AsyncReactSelect
+      placeholder={T`All`}
+      value={currentValue}
+      key={JSON.stringify(this.props.filters)} // Include to force a change when filters change
+      isMulti={true}
+      loadOptions={this.getOptions}
+      defaultOptions={true}
+      onChange={this.props.onChange ? this.handleMultipleChange : undefined}
+      isClearable={true}
+      isDisabled={this.props.onChange == null}
+      noOptionsMessage={() => T`Type to search`}
+      styles={{
+        // Keep menu above fixed data table headers
+        menu: (style) => _.extend({}, style, { zIndex: 2000 })
+      }}
+    />
+  }
+
+  render() {
+    return <div style={{ width: "100%" }}>{this.props.multi ? this.renderMultiple() : this.renderSingle()}</div>
+  }
+}
+
+function escapeRegex(s: any) {
+  return s.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&")
+}

package/src/widgets/MapWidget.tsx

@@ -196,8 +196,15 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
 
     const handleDesignChange = (d: any) => this.setState({ transientDesign: d })
 
+    // Only allow single click to edit if there are no layers
+    const handleClick = this.props.onDesignChange != null && this.state.editDesign === null && this.props.design.layerViews.length == 0 ? this.handleStartEditing : undefined
+
     // Wrap in a simple widget
-    return <div>
+    return (
+    <div
+      onClick={handleClick}
+      style={{ position: "relative", width: this.props.width }}
+    >
       {this.props.onDesignChange != null ? this.renderEditor() : undefined}
       <DropdownWidgetComponent
         width={this.props.width}
@@ -207,5 +214,6 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
         {this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)}
       </DropdownWidgetComponent>
     </div>
+    )
   }
 }