@mwater/visualization 5.0.0

package/src/quickfilter/QuickfiltersComponent.ts

@@ -0,0 +1,416 @@
+import _ from "lodash"
+import PropTypes from "prop-types"
+import React from "react"
+const R = React.createElement
+import { default as ReactSelect } from "react-select"
+import { DataSource, ExprUtils, LocalizedString, Schema } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import TextLiteralComponent from "./TextLiteralComponent"
+import DateExprComponent from "./DateExprComponent"
+import QuickfilterCompiler from "./QuickfilterCompiler"
+import IdArrayQuickfilterComponent from "./IdArrayQuickfilterComponent"
+import { Quickfilter, QuickfilterLock } from "./Quickfilter"
+import { QuickfiltersDataSource } from "./QuickfiltersDataSource"
+import { JsonQLFilter } from ".."
+
+export interface QuickfiltersComponentProps {
+  /** Design of quickfilters. See README.md */
+  design: Quickfilter[]
+
+  /** Current values of quickfilters (state of filters selected) */
+  values?: any[]
+
+  /** Called when value changes */
+  onValuesChange: (values: any[]) => void
+
+  // Locked quickfilters. Locked ones cannot be changed and are shown with a lock
+  locks?: QuickfilterLock[]
+
+  schema: Schema
+  dataSource: DataSource
+  quickfiltersDataSource: QuickfiltersDataSource
+
+  /** Filters to add to restrict quick filter data to */
+  filters?: JsonQLFilter[]
+
+  /** True to hide top border */
+  hideTopBorder?: boolean
+
+  /** Called when user hides the quickfilter bar */
+  onHide?: () => void
+}
+
+/** Displays quick filters and allows their value to be modified */
+export default class QuickfiltersComponent extends React.Component<QuickfiltersComponentProps> {
+  renderQuickfilter(item: any, index: any) {
+    // Skip if merged
+    let onValueChange
+    if (item.merged) {
+      return null
+    }
+
+    let values = this.props.values || []
+    let itemValue = values[index]
+
+    // Clean expression first
+    const expr = new ExprCleaner(this.props.schema).cleanExpr(item.expr)
+
+    // Do not render if nothing
+    if (!expr) {
+      return null
+    }
+
+    // Get type of expr
+    const type = new ExprUtils(this.props.schema).getExprType(expr)
+    if (!type) {
+      return null
+    }
+
+    // Determine if locked
+    const lock = _.find(this.props.locks || [], (lock) => _.isEqual(lock.expr, expr))
+
+    if (lock) {
+      // Overrides item value
+      itemValue = lock.value
+      onValueChange = undefined
+    } else {
+      // Can change value if not locked
+      onValueChange = (v: any) => {
+        values = (this.props.values || []).slice()
+        values[index] = v
+
+        // Also set any subsequent merged ones
+        for (let i = index + 1; i < this.props.design.length; i++) {
+          if (this.props.design[i].merged) {
+            values[i] = v
+          } else {
+            break
+          }
+        }
+        return this.props.onValuesChange(values)
+      }
+    }
+
+    // Determine additional filters that come from other quickfilters. This is to make sure that each quickfilter is filtered
+    // by any other active quickfilters (excluding self)
+    const compiler = new QuickfilterCompiler(this.props.schema)
+    const otherDesign = (this.props.design || []).slice()
+    const otherValues = (this.props.values || []).slice()
+    const otherLocks = (this.props.locks || []).slice()
+    otherDesign.splice(index, 1)
+    otherValues.splice(index, 1)
+    otherLocks.splice(index, 1)
+    const otherQuickfilterFilters = compiler.compile(otherDesign, otherValues, otherLocks)
+    const filters = (this.props.filters || []).concat(otherQuickfilterFilters)
+
+    if (["enum", "enumset"].includes(type)) {
+      return R(EnumQuickfilterComponent, {
+        key: JSON.stringify(item),
+        label: item.label,
+        schema: this.props.schema,
+        options: new ExprUtils(this.props.schema).getExprEnumValues(expr)!,
+        value: itemValue,
+        onValueChange,
+        multi: item.multi
+      })
+    }
+
+    if (type === "text") {
+      return R(TextQuickfilterComponent, {
+        key: JSON.stringify(item),
+        index,
+        label: item.label,
+        expr,
+        schema: this.props.schema,
+        quickfiltersDataSource: this.props.quickfiltersDataSource,
+        value: itemValue,
+        onValueChange,
+        filters,
+        multi: item.multi
+      })
+    }
+
+    if (["date", "datetime"].includes(type)) {
+      return R(DateQuickfilterComponent, {
+        key: JSON.stringify(item),
+        label: item.label,
+        expr,
+        schema: this.props.schema,
+        value: itemValue,
+        onValueChange
+      })
+    }
+
+    if (type === "id[]") {
+      return R(IdArrayQuickfilterComponent, {
+        key: JSON.stringify(item),
+        index,
+        label: item.label,
+        expr,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        value: itemValue,
+        onValueChange,
+        filters,
+        multi: item.multi
+      })
+    }
+
+    if (type === "text[]") {
+      return R(TextArrayQuickfilterComponent, {
+        key: JSON.stringify(item),
+        index,
+        label: item.label,
+        expr,
+        schema: this.props.schema,
+        quickfiltersDataSource: this.props.quickfiltersDataSource,
+        value: itemValue,
+        onValueChange,
+        filters,
+        multi: item.multi
+      })
+    }
+
+    return null
+  }
+
+  render() {
+    if (!this.props.design || this.props.design.length === 0) {
+      return null
+    }
+
+    return R(
+      "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
+    )
+  }
+}
+
+interface EnumQuickfilterComponentProps {
+  label?: string
+  schema: Schema
+  /** true to display multiple values */
+  multi?: boolean
+  /** Current value of quickfilter (state of filter selected) */
+  value?: any
+  /** Called when value changes */
+  onValueChange?: any
+  options: {
+    /** id of option */
+    id: string
+    /** localized name */
+    name: LocalizedString
+  }[]
+}
+
+/** Quickfilter for an enum */
+class EnumQuickfilterComponent extends React.Component<EnumQuickfilterComponentProps> {
+  static contextTypes = { locale: PropTypes.string }
+
+  handleSingleChange = (val: any) => {
+    if (val) {
+      return this.props.onValueChange(val)
+    } else {
+      return this.props.onValueChange(null)
+    }
+  }
+
+  handleMultiChange = (val: any) => {
+    if (val?.length > 0) {
+      return this.props.onValueChange(_.pluck(val, "value"))
+    } else {
+      return this.props.onValueChange(null)
+    }
+  }
+
+  renderSingleSelect(options: any[]) {
+    return R(ReactSelect, {
+      placeholder: "All",
+      value: _.findWhere(options, { value: this.props.value }) || null,
+      options,
+      isClearable: true,
+      onChange: (value: any) => {
+        if (this.props.onValueChange) {
+          return this.handleSingleChange(value?.value)
+        }
+      },
+      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: "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: {
+        // Keep menu above fixed data table headers
+        menu: (style) => _.extend({}, style, { zIndex: 2000 })
+      }
+    })
+  }
+
+  render() {
+    const options = _.map(this.props.options, (opt) => ({
+      value: opt.id,
+      label: ExprUtils.localizeString(opt.name, this.context.locale)
+    }))
+
+    // Determine width, estimating about 8 px per letter with 120px padding
+    let width = _.max(options, (o) => o.label.length)?.label?.length
+    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
+    )
+  }
+}
+
+interface TextQuickfilterComponentProps {
+  label: string
+  schema: Schema
+  /** See QuickfiltersDataSource */
+  quickfiltersDataSource: QuickfiltersDataSource
+  expr: any
+  index: number
+  /** Current value of quickfilter (state of filter selected) */
+  value?: any
+  /** Called when value changes */
+  onValueChange?: any
+  /** true to display multiple values */
+  multi?: boolean
+
+  /** Filters to add to restrict quick filter data to */
+  filters?: JsonQLFilter[]
+}
+
+// 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
+    )
+  }
+}
+
+interface DateQuickfilterComponentProps {
+  label?: string
+  schema: Schema
+  expr: any
+  /** Current value of quickfilter (state of filter selected) */
+  value?: any
+  onValueChange: any
+}
+
+// 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
+    )
+  }
+}
+
+interface TextArrayQuickfilterComponentProps {
+  label: string
+  schema: Schema
+  /** See QuickfiltersDataSource */
+  quickfiltersDataSource: QuickfiltersDataSource
+  expr: any
+  index: number
+  /** Current value of quickfilter (state of filter selected) */
+  value?: any
+  /** Called when value changes */
+  onValueChange?: any
+  /** true to display multiple values */
+  multi?: boolean
+
+  /** Filters to add to restrict quick filter data to */
+  filters?: JsonQLFilter[]
+}
+
+/** 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
+    )
+  }
+}

package/src/quickfilter/QuickfiltersDataSource.ts

@@ -0,0 +1,15 @@
+import { JsonQLFilter } from "../JsonQLFilter"
+import { Expr } from "@mwater/expressions"
+
+/** Data source that returns values for text-based and id-based quickfilters. Allows client-server model that supports sharing */
+export interface QuickfiltersDataSource {
+  /** Gets the values of the quickfilter at index */
+  getValues(
+    index: number,
+    expr: Expr,
+    filters: JsonQLFilter[],
+    offset: number | null,
+    limit: number,
+    callback: (error: any, values?: any[]) => void
+  ): void
+}

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -0,0 +1,257 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import update from "update-object"
+import { ExprComponent } from "@mwater/expressions-ui"
+import { DataSource, ExprUtils, 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"
+
+export interface QuickfiltersDesignComponentProps {
+  /** Design of quickfilters. See README.md */
+  design: Quickfilter[]
+  /** Called when design changes */
+  onDesignChange: (design: Quickfilter[]) => void
+  schema: Schema
+  dataSource: DataSource
+  /** List of possible table ids to use */
+  tables: string[]
+}
+
+// Displays quick filters and allows their value to be modified
+export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
+  handleDesignChange = (design: any) => {
+    design = design.slice()
+
+    // 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 })
+      }
+    }
+
+    return this.props.onDesignChange(design)
+  }
+
+  // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
+  isMergeable(design: any, index: any) {
+    if (index === 0) {
+      return false
+    }
+
+    const exprUtils = new ExprUtils(this.props.schema)
+
+    const type = exprUtils.getExprType(design[index].expr)
+    const prevType = exprUtils.getExprType(design[index - 1].expr)
+
+    const idTable = exprUtils.getExprIdTable(design[index].expr)
+    const prevIdTable = exprUtils.getExprIdTable(design[index - 1].expr)
+
+    const enumValues = exprUtils.getExprEnumValues(design[index].expr)
+    const prevEnumValues = exprUtils.getExprEnumValues(design[index - 1].expr)
+
+    const multi = design[index].multi || false
+    const prevMulti = design[index - 1].multi || false
+
+    if (multi !== prevMulti) {
+      return false
+    }
+
+    if (!type || type !== prevType) {
+      return false
+    }
+
+    if (idTable !== prevIdTable) {
+      return false
+    }
+
+    if (enumValues && !_.isEqual(_.pluck(enumValues, "id"), _.pluck(prevEnumValues || [], "id"))) {
+      return false
+    }
+
+    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) => {
+        const design = this.props.design.slice()
+        design[index] = newItem
+        return this.handleDesignChange(design)
+      },
+
+      onRemove: this.handleRemove.bind(null, index)
+    })
+  }
+
+  handleAdd = () => {
+    // Add blank to end
+    const design = this.props.design.concat([{ expr: null }])
+    return this.props.onDesignChange(design)
+  }
+
+  handleRemove = (index: any) => {
+    const design = this.props.design.slice()
+    design.splice(index, 1)
+    return 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" }),
+            " Add Quick Filter"
+          )
+        : undefined
+    )
+  }
+}
+
+interface QuickfilterDesignComponentProps {
+  /** Design of a single quickfilters. See README.md */
+  design: Quickfilter
+  onChange: (design: Quickfilter) => void
+  onRemove: () => void
+  /** True if can be merged */
+  mergeable?: boolean
+  schema: Schema
+  dataSource: DataSource
+  tables: string[]
+}
+
+interface QuickfilterDesignComponentState {
+  table: any
+}
+
+/** Single quickfilter design component */
+class QuickfilterDesignComponent extends React.Component<
+  QuickfilterDesignComponentProps,
+  QuickfilterDesignComponentState
+> {
+  constructor(props: any) {
+    super(props)
+
+    // Store table to allow selecting table first, then expression
+    this.state = {
+      table: props.design.expr?.table || props.tables[0]
+    }
+  }
+
+  handleTableChange = (table: any) => {
+    this.setState({ table })
+    const design = {
+      expr: null
+    }
+    return this.props.onChange(design)
+  }
+
+  handleExprChange = (expr: any) => {
+    return this.props.onChange(update(this.props.design, { expr: { $set: expr } }))
+  }
+  handleLabelChange = (ev: any) => {
+    return this.props.onChange(update(this.props.design, { label: { $set: ev.target.value } }))
+  }
+  handleMergedChange = (merged: any) => {
+    return this.props.onChange(update(this.props.design, { merged: { $set: merged } }))
+  }
+  handleMultiChange = (multi: any) => {
+    return this.props.onChange(update(this.props.design, { multi: { $set: 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" }, "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: "Select..."
+        })
+      ),
+
+      R(
+        "div",
+        { className: "mb-3", key: "expr" },
+        R("label", { className: "text-muted" }, "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" }, "Label"),
+            R("input", {
+              type: "text",
+              className: "form-control form-control-sm",
+              value: this.props.design.label || "",
+              onChange: this.handleLabelChange,
+              placeholder: "Optional Label"
+            })
+          )
+        : undefined,
+
+      this.props.mergeable
+        ? R(
+            ui.Checkbox,
+            {
+              value: this.props.design.merged,
+              onChange: this.handleMergedChange
+            },
+            "Merge with previous quickfilter ",
+            R("span", { className: "text-muted" }, "- 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
+            },
+            "Allow multiple selections"
+          )
+        : undefined
+    )
+  }
+}

package/src/quickfilter/README.md

@@ -0,0 +1,8 @@
+# Quickfilters
+
+See Quickfilter.d.ts
+
+values are:
+For text and enum and enumset, a plain string, unless multi is true, then array
+For date and datetime, { op: some op, exprs: array of exprs. The date will be added as first expr when compiled and `table` will be set }
+For id[], primary key or array of primary keys if multi