@mwater/visualization 5.0.0

package/src/datagrids/DatagridUtils.ts

@@ -0,0 +1,74 @@
+import produce, { original } from "immer"
+import _ from "lodash"
+import { ExprCleaner, ExprUtils, ExprValidator, Schema } from "@mwater/expressions"
+import { DatagridDesign } from "./DatagridDesign"
+
+export default class DatagridUtils {
+  schema: Schema
+
+  constructor(schema: Schema) {
+    this.schema = schema
+  }
+
+  // Cleans a datagrid design, removing invalid columns
+  cleanDesign(design: DatagridDesign): DatagridDesign {
+    if (!design.table) {
+      return design
+    }
+
+    const exprCleaner = new ExprCleaner(this.schema)
+
+    // Erase all if table doesn't exist
+    if (!this.schema.getTable(design.table)) {
+      return { table: null, columns: [] }
+    }
+
+    // Clean columns
+    design = produce(design, (draft) => {
+      for (let column of draft.columns) {
+        if (column.type === "expr") {
+          // Determine if subtable
+          var table
+          if (column.subtable) {
+            const subtable = _.findWhere(design.subtables!, { id: column.subtable })
+
+            // Now get destination table
+            table = new ExprUtils(this.schema).followJoins(design.table!, subtable!.joins)
+          } else {
+            table = design.table!
+          }
+
+          column.expr = exprCleaner.cleanExpr(column.expr ? original(column.expr) || null : null, {
+            table,
+            aggrStatuses: ["individual", "literal", "aggregate"]
+          })
+        }
+      }
+    })
+    return design
+  }
+
+  validateDesign(design: DatagridDesign) {
+    if (!design.table) {
+      return "Missing table"
+    }
+
+    if (!design.columns || !design.columns[0]) {
+      return "No columns"
+    }
+
+    // Validate column exprs
+    for (const column of design.columns) {
+      if (column.expr) {
+        const error = new ExprValidator(this.schema).validateExpr(column.expr, {
+          aggrStatuses: ["individual", "literal", "aggregate"]
+        })
+        if (error) {
+          return error
+        }
+      }
+    }
+
+    return null
+  }
+}

package/src/datagrids/DatagridViewComponent.ts

@@ -0,0 +1,460 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import { Table, Column, Cell } from "fixed-data-table-2"
+import { DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
+import ExprCellComponent from "./ExprCellComponent"
+import EditExprCellComponent from "./EditExprCellComponent"
+import DatagridDataSource from "./DatagridDataSource"
+import { DatagridDesign, JsonQLFilter } from ".."
+import produce from "immer"
+
+export interface DatagridViewComponentProps {
+  /** Width of control */
+  width: number
+
+  /** Height of control */
+  height: number
+
+  pageSize?: number
+
+  schema: Schema
+  dataSource: DataSource
+  datagridDataSource: DatagridDataSource
+
+  design: DatagridDesign
+  onDesignChange?: (design: DatagridDesign) => void
+
+  filters?: JsonQLFilter[]
+
+  /** Check if a cell is editable by testing if underlying expression is editable */
+  canEditExpr?: (tableId: string, rowId: any, expr: Expr) => Promise<boolean>
+
+  /** Update cell values by updating set of expressions and values */
+  updateExprValues?: (tableId: string, rowUpdates: RowUpdate[]) => Promise<void>
+
+  /** Called when row is double-clicked with (tableId, rowId, rowIndex) */
+  onRowDoubleClick?: (tableId: string, rowId: any, rowIndex: number) => void
+
+  /** Called when a row is clicked with (tableId, rowId, rowIndex) */
+  onRowClick?: (tableId: string, rowId: any, rowIndex: number) => void
+}
+
+/** Update to one row expression value */
+export interface RowUpdate {
+  primaryKey: string
+  expr: Expr
+  value: any
+}
+
+export interface DatagridViewComponentState {
+  rows: any[]
+  entirelyLoaded: boolean
+
+  /** set to { rowIndex: 0, 1, 2, columnIndex: 0, 1, 2..., rowId: id of row } if editing a cell */
+  editingCell: { rowIndex: number; columnIndex: number; rowId: any } | null
+
+  savingCell: boolean
+}
+
+interface LoadState {
+  design: DatagridDesign
+  offset: number
+  limit: number
+  filters?: JsonQLFilter[]
+}
+
+/** Datagrid table itself without decorations such as edit button etc.
+ * See README.md for description of datagrid format
+ * Design should be cleaned already before being passed in (see DatagridUtils)
+ */
+export default class DatagridViewComponent extends React.Component<
+  DatagridViewComponentProps,
+  DatagridViewComponentState
+> {
+  static defaultProps = { pageSize: 100 }
+
+  loadState: LoadState | null
+  editCellComp: EditExprCellComponent | null
+
+  constructor(props: DatagridViewComponentProps) {
+    super(props)
+
+    this.state = {
+      rows: [],
+      entirelyLoaded: false,
+      editingCell: null, // set to { rowIndex: 0, 1, 2, columnIndex: 0, 1, 2... } if editing a cell
+      savingCell: false // True when saving a cell's contents
+    }
+  }
+
+  componentWillReceiveProps(nextProps: DatagridViewComponentProps) {
+    // If design or filters changed, delete all rows
+    // TODO won't this reload on column resize?
+    if (!_.isEqual(nextProps.design, this.props.design) || !_.isEqual(nextProps.filters, this.props.filters)) {
+      return this.setState({ rows: [], entirelyLoaded: false })
+    }
+  }
+
+  // Loads more rows because the placeholder last row has been rendered
+  loadMoreRows() {
+    // Get the current load state (the values that determine what to load and if the loaded results can still be used or are stale)
+    const loadState: LoadState = {
+      design: this.props.design,
+      offset: this.state.rows.length,
+      limit: this.props.pageSize!,
+      filters: this.props.filters
+    }
+
+    // If already loading what we want, return
+    if (_.isEqual(loadState, this.loadState)) {
+      return
+    }
+
+    // Record what we're loading
+    this.loadState = loadState
+
+    // Perform the actual load
+    this.props.datagridDataSource.getRows(
+      loadState.design,
+      loadState.offset,
+      loadState.limit,
+      loadState.filters,
+      (error: any, newRows: any) => {
+        if (error) {
+          console.error(error)
+          alert(T("Error loading data"))
+          return
+        }
+
+        // Check that the required load state has not changed
+        if (_.isEqual(loadState, this.loadState)) {
+          // Load is complete
+          this.loadState = null
+
+          // Add rows, setting entirelyLoaded based on whether fewer than requested were returned
+          const rows = this.state.rows.concat(newRows)
+          return this.setState({ rows, entirelyLoaded: newRows.length < this.props.pageSize! })
+        }
+      }
+    )
+  }
+
+  // Reloads all data
+  reload = () => {
+    return this.setState({ rows: [], entirelyLoaded: false })
+  }
+
+  deleteRow(rowIndex: any, callback: any) {
+    const newRows = this.state.rows.slice()
+    _.pullAt(newRows, rowIndex)
+    this.setState({ rows: newRows })
+    callback()
+  }
+
+  /** Reload a single row by index and id. Note that the row might be in a different
+   * ordinal position within the datagrid, or might have vanished from view if the change
+   * caused the row to be excluded by the filter. Always replace
+   * it where it was, unless it has disappeared from view in which case the row
+   * is removed.
+   */
+  reloadRow(rowIndex: number, rowId: any, callback: () => void) {
+    // Create new filters that only include one row
+    const filters = produce(this.props.filters || [], draft => {
+      draft.push({
+        table: this.props.design.table!,
+        jsonql: {
+          type: "op", 
+          op: "=",
+          exprs: [
+            { type: "field", tableAlias: "{alias}", column: this.props.schema.getTable(this.props.design.table!)?.primaryKey! },
+            { type: "literal", value: rowId }
+          ]
+        }
+      })
+    })
+
+    this.props.datagridDataSource.getRows(
+      this.props.design,
+      0,
+      1,
+      filters,
+      (error, rows) => {
+        if (error) {
+          console.error(error)
+          alert(T("Error loading data"))
+          callback()
+          return
+        }
+
+        const newRows = produce(this.state.rows, draft => {
+          if (rows[0]) {
+            draft[rowIndex] = rows[0]    
+          }
+          else {
+            // If row missing, remove it from list
+            draft.splice(rowIndex, 1)
+          }
+        })
+        
+        this.setState({ rows: newRows })
+        callback()
+      }
+    )
+  }
+
+  handleColumnResize = (newColumnWidth: any, columnKey: any) => {
+    // Find index of column
+    const columnIndex = _.findIndex(this.props.design.columns, { id: columnKey })
+
+    // Set new width
+    let column = this.props.design.columns[columnIndex]
+    column = _.extend({}, column, { width: newColumnWidth })
+
+    // Re-add to list
+    const columns = this.props.design.columns.slice()
+    columns[columnIndex] = column
+
+    this.props.onDesignChange!(_.extend({}, this.props.design, { columns }))
+  }
+
+  handleCellClick = (rowIndex: any, columnIndex: any) => {
+    // Ignore if already editing
+    if (this.state.editingCell?.rowIndex === rowIndex && this.state.editingCell?.columnIndex === columnIndex) {
+      return
+    }
+
+    // Ignore if saving
+    if (this.state.savingCell) {
+      return
+    }
+
+    // Save editing if editing and return
+    if (this.state.editingCell) {
+      this.handleSaveEdit()
+      return
+    }
+
+    // Check if can edit
+    if (!this.props.canEditExpr) {
+      return
+    }
+
+    // Get column
+    const column = this.props.design.columns[columnIndex]
+
+    // Get expression type
+    const exprType = new ExprUtils(this.props.schema).getExprType(column.expr)!
+
+    // If cannot edit type, return
+    if (!["text", "number", "enum", "date", "datetime"].includes(exprType)) {
+      return
+    }
+
+    // Get row id
+    const rowId = this.state.rows[rowIndex].id
+    if (rowId == null) {
+      // No row id means aggregated table. Cannot edti
+      return
+    }
+
+    this.props.canEditExpr(this.props.design.table!, rowId, column.expr)
+      .then(canEdit => {
+        if (canEdit) {
+          // Start editing
+          this.setState({ editingCell: { rowIndex, columnIndex, rowId } })
+        }
+      }).catch(error => {
+        console.error(error)
+      })
+  }
+
+  // Called to save
+  handleSaveEdit = () => {
+    // Ignore if not changed
+    if (!this.editCellComp || !this.editCellComp.hasChanged()) {
+      this.setState({ editingCell: null, savingCell: false })
+      return
+    }
+
+    const rowId = this.state.editingCell!.rowId
+    const { expr } = this.props.design.columns[this.state.editingCell!.columnIndex]
+    const value = this.editCellComp.getValue()
+
+    this.setState({ savingCell: true }, () => {
+      this.props.updateExprValues!(this.props.design.table!, [{ primaryKey: rowId, expr, value }])
+        .then(() => {
+          // Reload row
+          this.reloadRow(this.state.editingCell!.rowIndex, rowId, () => {
+            this.setState({ editingCell: null, savingCell: false })
+          })
+        }).catch(error => {
+          alert(T("Error saving data"))
+          console.error(error)
+        })
+    })
+  }
+
+  handleCancelEdit = () => {
+    this.setState({ editingCell: null, savingCell: false })
+  }
+
+  // Called with current ref edit. Save
+  refEditCell = (comp: EditExprCellComponent | null) => {
+    this.editCellComp = comp
+  }
+
+  handleRowDoubleClick = (ev: any, rowIndex: any) => {
+    if (this.props.onRowDoubleClick != null && this.state.rows[rowIndex].id) {
+      this.props.onRowDoubleClick(this.props.design.table!, this.state.rows[rowIndex].id, rowIndex)
+    }
+  }
+
+  handleRowClick = (ev: any, rowIndex: any) => {
+    if (this.props.onRowClick != null && this.state.rows[rowIndex].id) {
+      this.props.onRowClick(this.props.design.table!, this.state.rows[rowIndex].id, rowIndex)
+    }
+  }
+
+  // Render a single cell. exprType is passed in for performance purposes and is calculated once per column
+  renderCell = (column: any, columnIndex: any, exprType: any, cellProps: any) => {
+    // If rendering placeholder row
+    if (cellProps.rowIndex >= this.state.rows.length) {
+      // Load next tick as cannot update while rendering
+      _.defer(() => {
+        this.loadMoreRows()
+      })
+      return R(Cell, cellProps, R("i", { className: "fa fa-spinner fa-spin" }))
+    }
+
+    // Special case for row number
+    if (columnIndex === -1) {
+      return R(
+        Cell,
+        {
+          width: cellProps.width,
+          height: cellProps.height,
+          style: {
+            whiteSpace: "nowrap",
+            textAlign: "right"
+          }
+        },
+        cellProps.rowIndex + 1
+      )
+    }
+
+    // Get value (columns are c0, c1, c2, etc.)
+    const value = this.state.rows[cellProps.rowIndex][`c${columnIndex}`]
+
+    // Render special if editing
+    if (
+      this.state.editingCell?.rowIndex === cellProps.rowIndex &&
+      this.state.editingCell?.columnIndex === columnIndex
+    ) {
+      // Special if saving
+      if (this.state.savingCell) {
+        return R(Cell, cellProps, R("i", { className: "fa fa-spinner fa-spin" }))
+      }
+
+      return R(EditExprCellComponent, {
+        ref: this.refEditCell,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        locale: this.props.design.locale,
+        width: cellProps.width,
+        height: cellProps.height,
+        value,
+        expr: column.expr,
+        onSave: this.handleSaveEdit,
+        onCancel: this.handleCancelEdit
+      })
+    }
+
+    if (column.type === "expr") {
+      // Muted if from main and are displaying subtable
+      const muted = !column.subtable && this.state.rows[cellProps.rowIndex].subtable >= 0
+
+      return R(ExprCellComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        locale: this.props.design.locale,
+        width: cellProps.width,
+        height: cellProps.height,
+        value,
+        expr: column.expr,
+        format: column.format,
+        exprType,
+        muted,
+        onClick: this.handleCellClick.bind(null, cellProps.rowIndex, columnIndex)
+      })
+    }
+
+    return null
+  }
+
+  // Render a single column
+  renderColumn(column: any, columnIndex: any) {
+    const exprUtils = new ExprUtils(this.props.schema)
+
+    // Get expression type
+    const exprType = exprUtils.getExprType(column.expr)
+
+    return R(Column, {
+      key: column.id,
+      header: R(
+        Cell,
+        { style: { whiteSpace: "nowrap" } },
+        column.label || exprUtils.summarizeExpr(column.expr, this.props.design.locale)
+      ),
+      width: column.width,
+      allowCellsRecycling: true,
+      cell: this.renderCell.bind(null, column, columnIndex, exprType),
+      columnKey: column.id,
+      isResizable: this.props.onDesignChange != null
+    })
+  }
+
+  // Render all columns
+  renderColumns() {
+    const columns = _.map(this.props.design.columns, (column, columnIndex) => this.renderColumn(column, columnIndex))
+
+    if (this.props.design.showRowNumbers) {
+      columns.unshift(
+        this.renderColumn(
+          {
+            label: "#",
+            width: 50
+          },
+          -1
+        )
+      )
+    }
+
+    return columns
+  }
+
+  render() {
+    let rowsCount = this.state.rows.length
+
+    // Add loading row if not entirely loaded
+    if (!this.state.entirelyLoaded) {
+      rowsCount += 1
+    }
+
+    return R(
+      Table,
+      {
+        rowsCount,
+        rowHeight: 40,
+        headerHeight: 40,
+        width: this.props.width,
+        height: this.props.height,
+        onRowDoubleClick: this.handleRowDoubleClick,
+        onRowClick: this.handleRowClick,
+        isColumnResizing: false,
+        onColumnResizeEndCallback: this.handleColumnResize
+      },
+      this.renderColumns()
+    )
+  }
+}

package/src/datagrids/DirectDatagridDataSource.ts

@@ -0,0 +1,57 @@
+import DatagridDataSource from "./DatagridDataSource"
+import DatagridQueryBuilder from "./DatagridQueryBuilder"
+import * as QuickfilterUtils from "../quickfilter/QuickfilterUtils"
+import { DataSource, Row, Schema } from "@mwater/expressions"
+import { DatagridDesign } from "./DatagridDesign"
+import { JsonQLFilter } from "../JsonQLFilter"
+
+/** Uses direct DataSource queries */
+export default class DirectDatagridDataSource implements DatagridDataSource {
+  options: { schema: Schema; dataSource: DataSource }
+
+  // Create dashboard data source that uses direct jsonql calls
+  // options:
+  //   schema: schema to use
+  //   dataSource: data source to use
+  constructor(options: { schema: Schema; dataSource: DataSource }) {
+    this.options = options
+  }
+
+  /** Gets the rows specified */
+  getRows(
+    design: DatagridDesign,
+    offset: number,
+    limit: number,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, rows: Row[]) => void
+  ): void {
+    const queryBuilder = new DatagridQueryBuilder(this.options.schema)
+
+    // Create query to get the page of rows at the specific offset
+    const query = queryBuilder.createQuery(design, {
+      offset,
+      limit,
+      extraFilters: filters
+    })
+
+    return this.options.dataSource.performQuery(query, callback)
+  }
+
+  // Gets the quickfilters data source
+  getQuickfiltersDataSource() {
+    return {
+      getValues: (index: any, expr: any, filters: any, offset: any, limit: any, callback: any) => {
+        // Perform query
+        return QuickfilterUtils.findExprValues(
+          expr,
+          this.options.schema,
+          this.options.dataSource,
+          filters,
+          offset,
+          limit,
+          callback
+        )
+      }
+    }
+  }
+}