@mwater/visualization 5.5.0 → 5.6.1

package/src/datagrids/DatagridDesignerComponent.tsx

@@ -1,14 +1,14 @@
 import _ from "lodash"
 import React, { useMemo } from "react"
-const R = React.createElement
 import { default as ReactSelect } from "react-select"
 import { languages } from "../languages"
 
-import { DataSource, ExprUtils, LiteralType, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprCleaner, ExprUtils, LiteralType, Schema } from "@mwater/expressions"
 import { ExprValidator } from "@mwater/expressions"
 import TabbedComponent from "@mwater/react-library/lib/TabbedComponent"
 import { ExprComponent } from "@mwater/expressions-ui"
 import { FilterExprComponent } from "@mwater/expressions-ui"
+import SelectExprModalComponent from "@mwater/expressions-ui/lib/SelectExprModalComponent"
 import OrderBysDesignerComponent from "./OrderBysDesignerComponent"
 import ReorderableListComponent from "@mwater/react-library/lib/reorderable/ReorderableListComponent"
 import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
@@ -63,114 +63,102 @@ export default class DatagridDesignerComponent extends React.Component<DatagridD
 
   // Render the tabs of the designer
   renderTabs() {
-    return R(TabbedComponent, {
-      initialTabId: "columns",
-      tabs: [
+    return <TabbedComponent
+      initialTabId="columns"
+      tabs={[
         {
           id: "columns",
           label: T`Columns`,
-          elem: R(ColumnsDesignerComponent, {
-            schema: this.props.schema,
-            dataSource: this.props.dataSource,
-            table: this.props.design.table!,
-            columns: this.props.design.columns,
-            onColumnsChange: this.handleColumnsChange
-          })
+          elem: <ColumnsDesignerComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.design.table!}
+            columns={this.props.design.columns}
+            onColumnsChange={this.handleColumnsChange}
+          />
         },
         {
           id: "filter",
           label: T`Filter`,
           // Here because of modal scroll issue
-          elem: R(
-            "div",
-            { style: { marginBottom: 200 } },
-            R(FilterExprComponent, {
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              table: this.props.design.table!,
-              value: this.props.design.filter,
-              onChange: this.handleFilterChange
-            }),
+          elem: <div style={{ marginBottom: 200 }}>
+            <FilterExprComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.props.design.table!}
+              value={this.props.design.filter}
+              onChange={this.handleFilterChange}
+            />
             <GlobalFiltersElementFactoryContext.Consumer>
               {(globalFiltersElementFactory) =>
                 globalFiltersElementFactory
-                  ? R(
-                      "div",
-                      { style: { marginTop: 20 } },
-                      globalFiltersElementFactory({
+                  ? <div style={{ marginTop: 20 }}>
+                      {globalFiltersElementFactory({
                         schema: this.props.schema,
                         dataSource: this.props.dataSource,
                         filterableTables: [this.props.design.table!],
                         globalFilters: this.props.design.globalFilters,
                         onChange: this.handleGlobalFiltersChange,
                         nullIfIrrelevant: true
-                      })
-                    )
+                      })}
+                    </div>
                   : undefined
               }
             </GlobalFiltersElementFactoryContext.Consumer>
-          )
+          </div>
         },
         {
           id: "order",
           label: T`Sorting`,
-          elem: R(
-            "div",
-            { style: { marginBottom: 200 } },
-            R(OrderBysDesignerComponent, {
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              table: this.props.design.table!,
-              orderBys: this.props.design.orderBys,
-              onChange: this.handleOrderBysChange
-            })
-          )
+          elem: <div style={{ marginBottom: 200 }}>
+            <OrderBysDesignerComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              table={this.props.design.table!}
+              orderBys={this.props.design.orderBys}
+              onChange={this.handleOrderBysChange}
+            />
+          </div>
         },
         {
           id: "quickfilters",
           label: T`Quickfilters`,
-          elem: R(
-            "div",
-            { style: { marginBottom: 200 } },
-            R(QuickfiltersDesignComponent, {
-              design: this.props.design.quickfilters || [],
-              onDesignChange: (design: any) =>
-                this.props.onDesignChange(update(this.props.design, { quickfilters: { $set: design } })),
-              schema: this.props.schema,
-              dataSource: this.props.dataSource,
-              tables: [this.props.design.table!]
-            })
-          )
+          elem: <div style={{ marginBottom: 200 }}>
+            <QuickfiltersDesignComponent
+              design={this.props.design.quickfilters || []}
+              onDesignChange={(design: any) =>
+                this.props.onDesignChange(update(this.props.design, { quickfilters: { $set: design } }))}
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              tables={[this.props.design.table!]}
+            />
+          </div>
         },
         {
           id: "options",
           label: T`Options`,
-          elem: R(
-            "div",
-            { style: { marginBottom: 200 } },
-            R(DatagridOptionsComponent, {
-              design: this.props.design,
-              onDesignChange: this.props.onDesignChange
-            })
-          )
+          elem: <div style={{ marginBottom: 200 }}>
+            <DatagridOptionsComponent
+              design={this.props.design}
+              onDesignChange={this.props.onDesignChange}
+            />
+          </div>
         }
-      ]
-    })
+      ]}
+    />
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      R("label", null, T`Data Source:`),
-      R(TableSelectComponent, {
-        schema: this.props.schema,
-        value: this.props.design.table,
-        onChange: this.handleTableChange
-      }),
-
-      this.props.design.table ? this.renderTabs() : undefined
-    )
+    return <div>
+      <label>{T`Data Source:`}</label>
+      <TableSelectComponent
+        schema={this.props.schema}
+        value={this.props.design.table}
+        onChange={this.handleTableChange}
+      />
+
+      {this.props.design.table ? this.renderTabs() : undefined}
+    </div>
   }
 }
 
@@ -225,13 +213,17 @@ interface ColumnsDesignerComponentProps {
   dataSource: DataSource
   table: string
   /** Columns list See README.md of this folder */
-  columns: any
-  onColumnsChange: any
+  columns: DatagridDesignColumn[]
+  onColumnsChange: (columns: DatagridDesignColumn[]) => void
 }
 
 // Columns list
 class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentProps> {
-  handleColumnChange = (columnIndex: any, column: any) => {
+  state = {
+    showSelectExprModal: false
+  }
+
+  handleColumnChange = (columnIndex: number, column: null | DatagridDesignColumn | DatagridDesignColumn[]) => {
     const columns = this.props.columns.slice()
 
     // Handle remove
@@ -239,7 +231,7 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
       columns.splice(columnIndex, 1)
     } else if (_.isArray(column)) {
       // Handle array case
-      Array.prototype.splice.apply(columns, [columnIndex, 1].concat(column))
+      columns.splice(columnIndex, 1, ...column)
     } else {
       columns[columnIndex] = column
     }
@@ -248,9 +240,31 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
   }
 
   handleAddColumn = () => {
+    this.setState({ showSelectExprModal: true })
+  }
+
+  handleExprSelect = (expr: Expr) => {
+    // Clean the expression first
+    const exprCleaner = new ExprCleaner(this.props.schema)
+    const cleanedExpr = exprCleaner.cleanExpr(expr, {
+      aggrStatuses: ["individual", "literal", "aggregate"]
+    })
+
+    const exprUtils = new ExprUtils(this.props.schema)
     const columns = this.props.columns.slice()
-    columns.push({ id: uuid(), type: "expr", width: 150 })
-    return this.props.onColumnsChange(columns)
+    columns.push({
+      id: uuid(),
+      type: "expr",
+      width: 150,
+      expr: cleanedExpr,
+      label: exprUtils.summarizeExpr(cleanedExpr).slice(0, 30)
+    })
+    this.props.onColumnsChange(columns)
+    this.setState({ showSelectExprModal: false })
+  }
+
+  handleExprCancel = () => {
+    this.setState({ showSelectExprModal: false })
   }
 
   handleAddIdColumn = () => {
@@ -272,13 +286,13 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
       headerFormat: "text"
     })
 
-    let columns = []
+    let columns: DatagridDesignColumn[] = []
     for (let labeledExpr of labeledExprs) {
       columns.push({
         id: uuid(),
         width: 150,
         type: "expr",
-        label: null, // Use default label instead. # labeledExpr.label
+        label: undefined, // Use default label instead. # labeledExpr.label
         expr: labeledExpr.expr
       })
     }
@@ -298,85 +312,101 @@ class ColumnsDesignerComponent extends React.Component<ColumnsDesignerComponentP
     connectDragPreview: any,
     connectDropTarget: any
   ) => {
-    return R(ColumnDesignerComponent, {
-      key: columnIndex,
-      schema: this.props.schema,
-      table: this.props.table,
-      dataSource: this.props.dataSource,
-      column,
-      onColumnChange: this.handleColumnChange.bind(null, columnIndex),
-      connectDragSource,
-      connectDragPreview,
-      connectDropTarget
-    })
+    return <ColumnDesignerComponent
+      key={columnIndex}
+      schema={this.props.schema}
+      table={this.props.table}
+      dataSource={this.props.dataSource}
+      column={column}
+      onColumnChange={this.handleColumnChange.bind(null, columnIndex)}
+      connectDragSource={connectDragSource}
+      connectDragPreview={connectDragPreview}
+      connectDropTarget={connectDropTarget}
+    />
   }
 
   render() {
-    return R(
-      "div",
-      { style: { height: "auto", overflowY: "auto", overflowX: "hidden" } },
-      R(
-        "div",
-        { style: { textAlign: "right" }, key: "options" },
-        R(
-          "button",
-          {
-            key: "addAll",
-            type: "button",
-            className: "btn btn-link btn-sm",
-            onClick: this.handleAddDefaultColumns
-          },
-          R("span", { className: "fas fa-plus" }),
-          " " + T`Add Default Columns`
-        ),
-        R(
-          "button",
-          {
-            key: "removeAll",
-            type: "button",
-            className: "btn btn-link btn-sm",
-            onClick: this.handleRemoveAllColumns
-          },
-          R("span", { className: "fas fa-times" }),
-          " " + T`Remove All Columns`
-        )
-      ),
-
-      R(ReorderableListComponent, {
-        items: this.props.columns,
-        onReorder: this.props.onColumnsChange,
-        renderItem: this.renderColumn,
-        getItemId: (item: DatagridDesignColumn) => item.id
-      }),
-
-      R("div", { className: "p-2" },
-        R(
-          "button",
-          {
-            key: "add",
-            type: "button",
-            className: "btn btn-link",
-            onClick: this.handleAddColumn
-          },
-          R("span", { className: "fas fa-plus" }),
-          " " + T`Add Column`
-        ),
-
-        R(
-          "button",
-          {
-            key: "add-id",
-            type: "button",
-            className: "btn btn-link",
-            onClick: this.handleAddIdColumn
-          },
-          R("span", { className: "fas fa-plus" }),
-          " " + T`Add Unique Id (advanced)`
-        )
-      )
-    )
+    return <div style={{ height: "auto", overflowY: "auto", overflowX: "hidden" }}>
+      <div style={{ textAlign: "right" }} key="options">
+        <button
+          key="addAll"
+          type="button"
+          className="btn btn-link btn-sm"
+          onClick={this.handleAddDefaultColumns}
+        >
+          <span className="fas fa-plus" />
+          {" " + T`Add Default Columns`}
+        </button>
+        <button
+          key="removeAll"
+          type="button"
+          className="btn btn-link btn-sm"
+          onClick={this.handleRemoveAllColumns}
+        >
+          <span className="fas fa-times" />
+          {" " + T`Remove All Columns`}
+        </button>
+      </div>
+
+      <ReorderableListComponent
+        items={this.props.columns}
+        onReorder={this.props.onColumnsChange}
+        renderItem={this.renderColumn}
+        getItemId={(item: DatagridDesignColumn) => item.id}
+      />
+
+      <div className="p-2">
+        <button
+          key="add"
+          type="button"
+          className="btn btn-link"
+          onClick={this.handleAddColumn}
+        >
+          <span className="fas fa-plus" />
+          {" " + T`Add Column`}
+        </button>
+
+        <button
+          key="add-id"
+          type="button"
+          className="btn btn-link"
+          onClick={this.handleAddIdColumn}
+        >
+          <span className="fas fa-plus" />
+          {" " + T`Add Unique Id (advanced)`}
+        </button>
+      </div>
+
+      {this.state.showSelectExprModal && (
+        <SelectExprModalComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.table}
+          value={null}
+          allowCase
+          onSelect={this.handleExprSelect}
+          onCancel={this.handleExprCancel}
+          types={[
+            "text",
+            "number",
+            "enum",
+            "enumset",
+            "boolean",
+            "date",
+            "datetime",
+            "image",
+            "imagelist",
+            "text[]",
+            "geometry",
+            "id"
+          ]}
+          aggrStatuses={["literal", "individual", "aggregate"]}
+        />
+      )}
+    </div>
   }
 }
+
 interface ColumnDesignerComponentProps {
   /** schema to use */
   schema: Schema
@@ -464,20 +494,16 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
 
     switch (exprType) {
       case "enumset":
-        return R(
-          "a",
-          { className: "btn btn-sm btn-link", onClick: this.handleSplitEnumset },
-          R("i", { className: "fa fa-chain-broken" }),
-          " " + T`Split by options`
-        )
+        return <a className="btn btn-sm btn-link" onClick={this.handleSplitEnumset}>
+          <i className="fa fa-chain-broken" />
+          {" " + T`Split by options`}
+        </a>
         break
       case "geometry":
-        return R(
-          "a",
-          { className: "btn btn-sm btn-link", onClick: this.handleSplitGeometry },
-          R("i", { className: "fa fa-chain-broken" }),
-          " " + T`Split by lat/lng`
-        )
+        return <a className="btn btn-sm btn-link" onClick={this.handleSplitGeometry}>
+          <i className="fa fa-chain-broken" />
+          {" " + T`Split by lat/lng`}
+        </a>
         break
     }
 
@@ -496,22 +522,18 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
       return null
     }
 
-    return R(
-      "div",
-      { className: "mb-3" },
-      R("label", { className: "text-muted" }, T`Format`),
-      ": ",
-      R(
-        "select",
-        {
-          value: this.props.column.format != null ? this.props.column.format : getDefaultFormat(exprType),
-          className: "form-select",
-          style: { width: "auto", display: "inline-block" },
-          onChange: this.handleFormatChange
-        },
-        _.map(formats, (format) => R("option", { key: format.value, value: format.value }, format.label))
-      )
-    )
+    return <div className="mb-3">
+      <label className="text-muted">{T`Format`}</label>
+      {": "}
+      <select
+        value={this.props.column.format != null ? this.props.column.format : getDefaultFormat(exprType)}
+        className="form-select"
+        style={{ width: "auto", display: "inline-block" }}
+        onChange={this.handleFormatChange}
+      >
+        {_.map(formats, (format) => <option key={format.value} value={format.value}>{format.label}</option>)}
+      </select>
+    </div>
   }
 
   render = () => {
@@ -545,52 +567,42 @@ class ColumnDesignerComponent extends React.Component<ColumnDesignerComponentPro
       aggrStatuses: ["individual", "literal", "aggregate"]
     })
 
-    const elem = R(
-      "div",
-      { className: "row" },
-      R("div", { className: "col-1" }, this.props.connectDragSource(R("span", { className: "text-muted fa fa-bars _mviz-move" }))),
-
-      R(
-        "div",
-        { className: "col-6" }, // style: { border: "solid 1px #DDD", padding: 4 },
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.table,
-          value: this.props.column.expr,
-          aggrStatuses: ["literal", "individual", "aggregate"],
-          types: allowedTypes,
-          onChange: this.handleExprChange
-        }),
-        this.renderSplit(),
-        this.renderFormat(),
-        error ? <span className="text-danger">
+    const elem = <div className="row">
+      <div className="col-1">{this.props.connectDragSource(<span className="text-muted fa fa-bars mwater-visualization-cursor-hover" />)}</div>
+
+      <div className="col-6">
+        <ExprComponent
+          schema={this.props.schema}
+          dataSource={this.props.dataSource}
+          table={this.props.table}
+          value={this.props.column.expr}
+          aggrStatuses={["literal", "individual", "aggregate"]}
+          types={allowedTypes}
+          onChange={this.handleExprChange}
+        />
+        {this.renderSplit()}
+        {this.renderFormat()}
+        {error ? <span className="text-danger">
           <i className="fa fa-exclamation-circle" /> {error}
-        </span> : undefined
-      ),
-
-      R(
-        "div",
-        { className: "col-4" },
-        R("input", {
-          type: "text",
-          className: "form-control",
-          placeholder: exprUtils.summarizeExpr(this.props.column.expr),
-          value: this.props.column.label,
-          onChange: (ev: any) => this.handleLabelChange(ev.target.value)
-        })
-      ),
-
-      R(
-        "div",
-        { className: "col-1" },
-        R(
-          "a",
-          { className: "link-plain", onClick: this.props.onColumnChange.bind(null, null) },
-          R("span", { className: "fas fa-times" })
-        )
-      )
-    )
+        </span> : undefined}
+      </div>
+
+      <div className="col-4">
+        <input
+          type="text"
+          className="form-control"
+          placeholder={exprUtils.summarizeExpr(this.props.column.expr)}
+          value={this.props.column.label}
+          onChange={(ev: any) => this.handleLabelChange(ev.target.value)}
+        />
+      </div>
+
+      <div className="col-1">
+        <a className="link-plain" onClick={this.props.onColumnChange.bind(null, null)}>
+          <span className="fas fa-times" />
+        </a>
+      </div>
+    </div>
 
     return this.props.connectDropTarget(this.props.connectDragPreview(elem))
   }