@mwater/visualization 5.4.0 → 5.4.2

package/src/datagrids/DatagridViewComponent.tsx

@@ -0,0 +1,539 @@
+import _ from "lodash"
+import React from "react"
+import { useState, useEffect, useRef, forwardRef, useImperativeHandle, useCallback } from "react"
+import { GridComponent, RenderCellProps, RenderColHeaderProps, RenderCellEditorProps, RenderRowHeaderProps } from "@mwater/react-library/lib/GridComponent"
+import { DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
+import ExprCellComponent from "./ExprCellComponent"
+import DatagridDataSource from "./DatagridDataSource"
+import { DatagridDesign, JsonQLFilter } from ".."
+import produce from "immer"
+import { canEditType, CellEditor } from "./CellEditor"
+import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
+import { formatValue } from "../valueFormatter"
+import { canFormatType } from "../valueFormatter"
+import IdSelection from "../IdSelection"
+
+export interface DatagridViewComponentProps {
+  /** Width of control */
+  width: number
+
+  /** Height of control */
+  height: number
+
+  /** Number of rows to load per page. Defaults to 100. */
+  pageSize?: number
+
+  schema: Schema
+  dataSource: DataSource
+  datagridDataSource: DatagridDataSource
+
+  design: DatagridDesign
+  onDesignChange?: (design: DatagridDesign) => void
+
+  filters?: JsonQLFilter[]
+
+  /** Current selection of rows */
+  selectedRows?: IdSelection
+
+  /** Called when selection changes */
+  onSelectedRowsChange?: (selection: IdSelection) => void
+
+  /** 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
+
+  /** Change to force a refresh */
+  refreshKey?: any
+}
+
+/** Update to one row expression value */
+export interface RowUpdate {
+  primaryKey: string
+  expr: Expr
+  value: any
+}
+
+interface LoadState {
+  design: DatagridDesign
+  offset: number
+  limit: number
+  filters?: JsonQLFilter[]
+}
+
+export interface DatagridViewComponentRef {
+  getRows: () => any[]
+  getEntirelyLoaded: () => boolean
+  loadMoreRows: (callback?: () => void) => void
+  reload: () => void
+  reloadRow: (rowIndex: number, rowId: any, callback: () => void) => void
+  deleteRow: (rowIndex: number, callback: () => void) => void
+}
+
+/** Datagrid view component. It does not show any quick filters, but only the grid itself. */
+const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewComponentProps>((props, ref) => {
+  const [rows, setRows] = useState<any[]>([])
+  const [entirelyLoaded, setEntirelyLoaded] = useState(false)
+  const loadStateRef = useRef<LoadState | null>(null)
+
+  // Get row header width based on selection and showRowNumbers
+  const rowHeaderWidth = props.selectedRows 
+    ? (props.design.showRowNumbers ? 70 : 30)  // With selection: 70 for both, 30 for just checkbox
+    : (props.design.showRowNumbers ? 50 : 20)  // Without selection: 50 for numbers, 20 for neither
+
+  const handleRowSelect = useCallback((rowId: string) => {
+    if (props.onSelectedRowsChange) {
+      props.onSelectedRowsChange(props.selectedRows!.toggle(rowId))
+    }
+  }, [props.selectedRows, props.onSelectedRowsChange])
+
+  const handleSelectAll = useCallback(() => {
+    if (props.onSelectedRowsChange) {
+      props.onSelectedRowsChange(props.selectedRows!.all())
+    }
+  }, [props.selectedRows, props.onSelectedRowsChange])
+
+  const handleSelectNone = useCallback(() => {
+    if (props.onSelectedRowsChange) {
+      props.onSelectedRowsChange(props.selectedRows!.none())
+    }
+  }, [props.selectedRows, props.onSelectedRowsChange])
+
+  const handleSelectInvert = useCallback(() => {
+    if (props.onSelectedRowsChange) {
+      props.onSelectedRowsChange(props.selectedRows!.invert())
+    }
+  }, [props.selectedRows, props.onSelectedRowsChange])
+
+  /** Render top left corner with optional selection dropdown */
+  const renderTopLeft = useCallback(() => {
+    if (!props.selectedRows) {
+      return null
+    }
+
+    if (!props.onSelectedRowsChange) {
+      return (
+        <div style={{ padding: 8, textAlign: "right" }}>
+          <input type="checkbox" checked={false} readOnly={true} />
+        </div>
+      )
+    }
+
+    return (
+      <div className="dropdown" style={{ marginTop: 6 }}>
+        <div style={{ textAlign: "center" }} className="dropdown-toggle" data-bs-toggle="dropdown">
+          <input type="checkbox" checked={false} readOnly={true} style={{ marginTop: 7 }} />
+        </div>
+        <ul className="dropdown-menu">
+          <li>
+            <a className="dropdown-item" onClick={handleSelectAll}>
+              {T`All`}
+            </a>
+          </li>
+          <li>
+            <a className="dropdown-item" onClick={handleSelectNone}>
+              {T`None`}
+            </a>
+          </li>
+          <li>
+            <a className="dropdown-item" onClick={handleSelectInvert}>
+              {T`Invert`}
+            </a>
+          </li>
+        </ul>
+      </div>
+    )
+  }, [props.selectedRows, props.onSelectedRowsChange, handleSelectAll, handleSelectNone, handleSelectInvert])
+
+  /** Render row headers with optional selection checkboxes */
+  const renderRowHeader = useCallback((options: RenderRowHeaderProps) => {
+    const rowHeaderStyle = {
+      width: options.width,
+      height: options.height,
+      display: "flex",
+      alignItems: "center",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap",
+      padding: "0 8px"
+    }
+
+    const rowId = options.row < rows.length ? rows[options.row].id : null
+    const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false
+    const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false
+
+    return (
+      <div style={rowHeaderStyle}>
+        {props.selectedRows && !isSubtable && (
+          <input
+            type="checkbox"
+            style={{ marginRight: 4 }}
+            checked={isSelected}
+            onChange={rowId != null && props.onSelectedRowsChange ? () => handleRowSelect(rowId) : undefined}
+            readOnly={!props.onSelectedRowsChange}
+          />
+        )}
+        {props.design.showRowNumbers ? (
+          <div style={{ flex: 1, textAlign: "right" }}>{options.row + 1}</div>
+        ) : null}
+      </div>
+    )
+  }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect])
+
+  const loadMoreRows = useStableCallback((callback?: () => void) => {
+    const loadState: LoadState = {
+      design: props.design,
+      offset: rows.length,
+      limit: props.pageSize || 100,
+      filters: props.filters
+    }
+
+    if (_.isEqual(loadState, loadStateRef.current)) {
+      return
+    }
+
+    loadStateRef.current = loadState
+
+    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
+        }
+
+        if (_.isEqual(loadState, loadStateRef.current)) {
+          loadStateRef.current = null
+          setRows(prev => [...prev, ...newRows])
+          setEntirelyLoaded(newRows.length < (props.pageSize || 100))
+          callback?.()
+        }
+      }
+    )
+  })
+
+  function reload() {
+    console.log("reload")
+    setRows([])
+    setEntirelyLoaded(false)
+  }
+
+  // Reset rows when design, filters or refreshKey changes
+  useEffect(() => {
+    reload()
+  }, [getDatagridReloadKey(props.design), JSON.stringify(props.filters), props.refreshKey])
+
+  function getRows() {
+    return rows
+  }
+
+  function reloadRow(rowIndex: number, rowId: any, callback: () => void) {
+    const filters = produce(props.filters || [], draft => {
+      draft.push({
+        table: props.design.table!,
+        jsonql: {
+          type: "op",
+          op: "=",
+          exprs: [
+            { type: "field", tableAlias: "{alias}", column: props.schema.getTable(props.design.table!)?.primaryKey! },
+            { type: "literal", value: rowId }
+          ]
+        }
+      })
+    })
+
+    props.datagridDataSource.getRows(
+      props.design,
+      0,
+      1,
+      filters,
+      (error, newRows) => {
+        if (error) {
+          console.error(error)
+          alert(T`Error loading data`)
+          callback()
+          return
+        }
+
+        setRows(currentRows => 
+          produce(currentRows, draft => {
+            if (newRows![0]) {
+              draft[rowIndex] = newRows![0]
+            } else {
+              draft.splice(rowIndex, 1)
+            }
+          })
+        )
+        callback()
+      }
+    )
+  }
+
+  function deleteRow(rowIndex: number, callback: () => void) {
+    const newRows = rows.slice()
+    newRows.splice(rowIndex, 1)
+    setRows(newRows)
+    callback()
+  }
+
+  // Expose methods via ref
+  useImperativeHandle(ref, () => ({
+    getRows: getRows,
+    getEntirelyLoaded: () => entirelyLoaded,
+    reload: reload,
+    reloadRow: reloadRow,
+    deleteRow: deleteRow,
+    loadMoreRows: loadMoreRows
+  }), [rows, entirelyLoaded, reload, reloadRow, deleteRow, loadMoreRows])
+
+  const handleColWidthsChange = useStableCallback((colWidths: number[]) => {
+    const columns = props.design.columns.map((col, index) => ({
+      ...col,
+      width: colWidths[index]
+    }))
+
+    props.onDesignChange?.({ ...props.design, columns })
+  })
+
+  const updateCellValue = useStableCallback(async (value: any, rowIndex: number, colIndex: number): Promise<boolean> => {
+    try {
+      const rowId = rows[rowIndex].id
+      const { expr } = props.design.columns[colIndex]
+
+      await props.updateExprValues!(props.design.table!, [{ primaryKey: rowId, expr, value }])
+
+      await new Promise<void>(resolve => {
+        reloadRow(rowIndex, rowId, resolve)
+      })
+
+      return true
+    } catch (error) {
+      alert(T`Error saving data`)
+      console.error(error)
+      return false
+    }
+  })
+
+  const handleRowDoubleClick = useStableCallback((rowIndex: number) => {
+    if (props.onRowDoubleClick != null && rows[rowIndex]?.id) {
+      props.onRowDoubleClick(props.design.table!, rows[rowIndex].id, rowIndex)
+      return true
+    }
+    return false
+  })
+
+  const handleRowClick = useStableCallback((rowIndex: number) => {
+    if (props.onRowClick != null && rows[rowIndex]?.id) {
+      props.onRowClick(props.design.table!, rows[rowIndex].id, rowIndex)
+      return true
+    }
+    return false
+  })
+
+  const handleCopy = useStableCallback((rowIndex: number, colIndex: number) => {
+    const row = rows[rowIndex]
+    const col = props.design.columns[colIndex]
+    const value = row[`c${colIndex}`]
+    // Format value as text using ExprCellComponent logic
+    const exprUtils = new ExprUtils(props.schema)
+    const exprType = exprUtils.getExprType(col.expr)
+    if (!exprType) {
+      return
+    }
+
+    let formattedValue = value
+
+    // Parse JSON values
+    if (["image", "imagelist", "geometry", "text[]"].includes(exprType) && _.isString(value)) {
+      formattedValue = JSON.parse(value)
+    }
+
+    // Format based on type
+    if (canFormatType(exprType)) {
+      formattedValue = formatValue(exprType, formattedValue, col.format)
+    } else {
+      formattedValue = exprUtils.stringifyExprLiteral(col.expr, formattedValue, props.design.locale)
+    }
+
+    navigator.clipboard.writeText(formattedValue || "")
+  })
+
+  const renderCell = useStableCallback((options: RenderCellProps) => {
+    if (options.row >= rows.length) {
+      _.defer(() => loadMoreRows())
+      return <div style={{ padding: 8 }}><i className="fa fa-spinner fa-spin text-muted" /></div>
+    }
+
+    if (options.col === -1) {
+      return (
+        <div style={{ padding: 8, textAlign: "right" }}>
+          {options.row + 1}
+        </div>
+      )
+    }
+
+    const column = props.design.columns[options.col]
+    const exprUtils = new ExprUtils(props.schema)
+    const exprType = exprUtils.getExprType(column.expr)
+    const value = rows[options.row][`c${options.col}`]
+
+    if (column.type === "expr" && exprType) {
+      const muted = !column.subtable && rows[options.row].subtable >= 0
+
+      return <div style={{ width: options.width, height: options.height }}>
+        <ExprCellComponent
+          schema={props.schema}
+          dataSource={props.dataSource}
+          locale={props.design.locale}
+          width={options.width}
+          height={options.height}
+          value={value}
+          expr={column.expr}
+          format={column.format}
+          exprType={exprType}
+          muted={muted}
+        />
+      </div>
+    }
+
+    return null
+  })
+
+  const renderColHeader = useStableCallback((options: RenderColHeaderProps) => {
+    if (options.col === -1) {
+      return (
+        <div style={{
+          padding: 5,
+          textAlign: "right",
+          fontWeight: "bold",
+          height: "100%",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end"
+        }}>
+          #
+        </div>
+      )
+    }
+
+    const column = props.design.columns[options.col]
+    const exprUtils = new ExprUtils(props.schema)
+
+    return (
+      <div style={{
+        padding: 5,
+        whiteSpace: "nowrap",
+        fontWeight: "bold",
+        height: "100%",
+        display: "flex",
+        alignItems: "center"
+      }}>
+        {column.label || exprUtils.summarizeExpr(column.expr, props.design.locale)}
+      </div>
+    )
+  })
+
+  const renderCellEditor = useStableCallback((options: RenderCellEditorProps) => {
+    if (options.row >= rows.length) {
+      return <div />
+    }
+
+    const column = props.design.columns[options.col]
+    const value = rows[options.row][`c${options.col}`]
+
+    const expr = column.expr!
+    const exprUtils = new ExprUtils(props.schema)
+    const exprType = exprUtils.getExprType(expr)!
+    const enumValues = exprUtils.getExprEnumValues(expr) ?? undefined
+    const idTable = exprUtils.getExprIdTable(expr) ?? undefined
+
+    return (
+      <CellEditor
+        type={exprType}
+        enumValues={enumValues}
+        idTable={idTable}
+        schema={props.schema}
+        dataSource={props.dataSource}
+        initialValue={value}
+        updateCellValue={value => updateCellValue(value, options.row, options.col)}
+        editorOptions={options}
+      />
+    )
+  })
+
+  const canEdit = useStableCallback(async (options: { row: number; col: number }) => {
+    if (options.col === -1) {
+      return false
+    }
+
+    const rowId = rows[options.row].id
+    if (rowId == null) {
+      return false
+    }
+
+    if (!props.canEditExpr) {
+      return false
+    }
+
+    const column = props.design.columns[options.col]
+    const exprType = new ExprUtils(props.schema).getExprType(column.expr)!
+    if (!canEditType(exprType)) {
+      return false
+    }
+
+    return props.canEditExpr(props.design.table!, rowId, column.expr)
+  })
+
+  let numRows = rows.length
+  if (!entirelyLoaded) {
+    numRows += 1
+  }
+
+  const colWidths = props.design.columns.map(col => col.width || 200)
+
+  return (
+    <GridComponent
+      width={props.width}
+      height={props.height}
+      numRows={numRows}
+      colWidths={colWidths}
+      colHeaderHeight={40}
+      rowHeight={40}
+      renderCell={renderCell}
+      renderColHeader={renderColHeader}
+      renderCellEditor={renderCellEditor}
+      canEdit={canEdit}
+      onColWidthsChange={handleColWidthsChange}
+      onRowDoubleClick={handleRowDoubleClick}
+      onRowClick={handleRowClick}
+      rowHeaderWidth={rowHeaderWidth}
+      renderRowHeader={renderRowHeader}
+      renderTopLeft={renderTopLeft}
+      onCopy={handleCopy}
+    />
+  )
+})
+
+export default DatagridViewComponent
+
+/** Get a unique key for a datagrid design, ignoring column widths which don't affect data */
+function getDatagridReloadKey(design: DatagridDesign): string {
+  // Create copy without column widths
+  const designWithoutWidths = produce(design, draft => {
+    for (const column of draft.columns) {
+      column.width = 0
+    }
+  })
+  return JSON.stringify(designWithoutWidths)
+}

package/src/datagrids/DirectDatagridDataSource.ts

@@ -36,7 +36,7 @@ export default class DirectDatagridDataSource implements DatagridDataSource {
       extraFilters: filters
     })
 
-    return this.options.dataSource.performQuery(query, callback)
+    this.options.dataSource.performQuery(query, callback)
   }
 
   countRows(
@@ -66,8 +66,7 @@ export default class DirectDatagridDataSource implements DatagridDataSource {
       ]
     };
 
-    console.log(countQuery)
-    return this.options.dataSource.performQuery(countQuery, (error, rows) => {
+    this.options.dataSource.performQuery(countQuery, (error, rows) => {
       callback(error, rows?.[0]?.cnt)
     })
   }

package/src/datagrids/{ExprCellComponent.ts → ExprCellComponent.tsx}

@@ -1,10 +1,8 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
 import moment from "moment"
-import { DataSource, ExprUtils, LiteralType, Schema } from "@mwater/expressions"
+import { DataSource, Expr, ExprUtils, LiteralType, Schema } from "@mwater/expressions"
 import { default as Linkify } from "react-linkify"
-import { Cell } from "fixed-data-table-2"
 import { canFormatType } from "../valueFormatter"
 import { formatValue } from "../valueFormatter"
 
@@ -22,21 +20,23 @@ export interface ExprCellComponentProps {
   width: number
   height: number
   value?: any
-  expr?: any
+  expr?: Expr
+
   /** True to show muted */
   muted?: boolean
-  onClick?: any
+
+  /** Called when clicked */
+  onClick?: () => void
+
+  /** Called when double clicked */
+  onDoubleClick?: () => void
 }
 
 // Cell that displays an expression column cell
 export default class ExprCellComponent extends React.Component<ExprCellComponentProps> {
-  handleClick = () => {
-    return this.setState({ editing: true })
-  }
-
-  renderImage(id: any) {
+  renderImage(id: string) {
     const url = this.props.dataSource.getImageUrl(id)
-    return R("a", { href: url, key: id, target: "_blank", style: { paddingLeft: 5, paddingRight: 5 } }, T`Image`)
+    return <a href={url} key={id} target="_blank" style={{ paddingLeft: 5, paddingRight: 5 }}>{T`Image`}</a>
   }
 
   render() {
@@ -59,7 +59,7 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
         // Convert to node based on type
         switch (this.props.exprType) {
           case "text":
-            node = R(Linkify, { properties: { target: "_blank" } }, value)
+            node = <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
             break
           case "boolean":
           case "enum":
@@ -85,19 +85,24 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
       }
     }
 
-    return R(
-      Cell,
-      {
-        width: this.props.width,
-        height: this.props.height,
-        onClick: this.props.onClick,
-        style: {
+    return (
+      <div
+        style={{
+          width: this.props.width,
+          height: this.props.height,
           whiteSpace: "nowrap",
           textAlign: ["number"].includes(this.props.exprType) ? "right" : "left",
-          opacity: this.props.muted ? 0.4 : undefined
-        }
-      },
-      node
+          opacity: this.props.muted ? 0.4 : undefined,
+          padding: 8,
+          cursor: this.props.onClick ? "pointer" : undefined,
+          overflow: "hidden",
+          textOverflow: "ellipsis"
+        }}
+        onClick={this.props.onClick}
+        onDoubleClick={this.props.onDoubleClick}
+      >
+        {node}
+      </div>
     )
   }
 }