@mwater/visualization 5.4.0 → 5.4.2

package/src/datagrids/DatagridComponent.tsx

@@ -0,0 +1,646 @@
+import _ from "lodash"
+import React, { ReactNode, useEffect, useState, useRef, forwardRef, useImperativeHandle } from "react"
+
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { DataSource, Expr, ExprUtils, injectTableAlias, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import DatagridViewComponent, { DatagridViewComponentRef, RowUpdate } from "./DatagridViewComponent"
+import DatagridDesignerComponent from "./DatagridDesignerComponent"
+import DatagridUtils from "./DatagridUtils"
+import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
+import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
+import FindReplaceModalComponent from "./FindReplaceModalComponent"
+import DatagridDataSource from "./DatagridDataSource"
+import { DatagridDesign, JsonQLFilter } from ".."
+import { format as d3Format } from "d3-format"
+import { LocaleContext } from "@mwater/expressions-ui"
+import IdSelection from "../IdSelection"
+import { useStableCallback } from "@mwater/react-library/lib/useStableCallback"
+import DatagridQueryBuilder from "./DatagridQueryBuilder"
+import produce from "immer"
+
+export interface DatagridComponentRef {
+  getQuickfilterValues: () => any[]
+  getQuickfilterFilters: () => JsonQLFilter[]
+  reload: () => void
+}
+
+export interface DatagridComponentProps {
+  /** Schema to use */
+  schema: Schema
+
+  /** Data source to use */
+  dataSource: DataSource
+
+  /** Datagrid data source to use */
+  datagridDataSource: DatagridDataSource
+
+  /** Design of datagrid to use */
+  design: DatagridDesign
+
+  /** Called when design changes */
+  onDesignChange?: (design: DatagridDesign) => void
+
+  /** Extra element to include in title at left */
+  titleElem?: ReactNode
+
+  /** Extra elements to add to right */
+  extraTitleButtonsElem?: ReactNode
+
+  /** Check if a value 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 clicked with (tableId, rowId) */
+  onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Called when row is double-clicked with (tableId, rowId) */
+  onRowDoubleClick?: (tableId: string, rowId: any) => void
+
+  /** Called when a set of rows is deleted with (tableId, rowIds). Can be cancelled via the abort signal */
+  onRowsDelete?: (tableId: string, rowIds: any[], signal: AbortSignal) => Promise<void>
+
+  /** Locked quickfilter values. See README in quickfilters */
+  quickfilterLocks?: any[]
+
+  // Filters to add to the datagrid
+  filters?: JsonQLFilter[]
+}
+
+/**
+ * Datagrid with decorations
+ * Design should be cleaned already before being passed in (see DatagridUtils)
+ */
+export default forwardRef<DatagridComponentRef, DatagridComponentProps>(function DatagridComponent(props: DatagridComponentProps, ref) {
+  const { schema, dataSource, datagridDataSource, design, onDesignChange, titleElem, extraTitleButtonsElem, canEditExpr, updateExprValues, onRowClick, onRowDoubleClick, quickfilterLocks, filters = [] } = props
+
+  // State management
+  /** is design being edited */
+  const [editingDesign, setEditingDesign] = useState(false)
+  
+  /** True if cells can be edited directly */
+  const [dataEditingEnabled, setDataEditingEnabled] = useState(false)
+  
+  /** Height of quickfilters */
+  const [quickfiltersHeight, setQuickfiltersHeight] = useState<number | null>(null)
+  
+  /** Values of quickfilters */
+  const [quickfiltersValues, setQuickfiltersValues] = useState<any[] | null>(null)
+  
+  /** Refresh key */
+  const [refreshKey, setRefreshKey] = useState(1)
+  
+  /** Number of rows */
+  const [numRows, setNumRows] = useState<number>()
+  
+  /** Selected rows */
+  const [selectedRows, setSelectedRows] = useState(new IdSelection())
+
+  /** True if delete confirmation modal is open */
+  const [showDeleteConfirmation, setShowDeleteConfirmation] = useState(false)
+
+  /** IDs of rows to be deleted */
+  const [rowIdsToDelete, setRowIdsToDelete] = useState<string[]>()
+
+  /** True when loading IDs of rows to delete */
+  const [loadingRowIdsToDelete, setLoadingRowIdsToDelete] = useState(false)
+
+  // Refs
+  const datagridViewRef = React.useRef<DatagridViewComponentRef | null>(null)
+  const quickfiltersRef = React.useRef<HTMLDivElement | null>(null)
+  const findReplaceModalRef = React.useRef<FindReplaceModalComponent | null>(null)
+
+  const reload = () => {
+    datagridViewRef.current?.reload()
+  }
+
+  const loadRowCount = useStableCallback(() => {
+    if (!design.showNumRows) {
+      return
+    }
+    let activeFilters = filters || []
+
+    // Compile quickfilters
+    activeFilters = activeFilters.concat(getQuickfilterFilters())
+    datagridDataSource.countRows(design,
+      activeFilters,
+      (error: any, count?: number) => {
+        if (error) {
+          console.error(error)
+          alert(T`Error loading data`)
+          return
+        }
+        setNumRows(count)
+      })
+  })
+
+  useEffect(() => {
+    loadRowCount()
+  }, [JSON.stringify(design), JSON.stringify(quickfiltersValues), refreshKey])
+
+  useEffect(() => {
+    // Calculate quickfilters height
+    if (quickfiltersRef.current) {
+      if (quickfiltersHeight !== quickfiltersRef.current.offsetHeight) {
+        setQuickfiltersHeight(quickfiltersRef.current.offsetHeight)
+      }
+    } else {
+      setQuickfiltersHeight(0)
+    }
+  }, [quickfiltersRef.current, JSON.stringify(design.quickfilters)])
+
+  const handleRefreshData = () => {
+    dataSource.clearCache?.()
+    setRefreshKey(refreshKey + 1)
+  }
+
+  const handleDeleteRows = async (signal: AbortSignal) => {
+    try {
+      if (!rowIdsToDelete) {
+        return
+      }
+
+      await props.onRowsDelete!(design.table!, rowIdsToDelete, signal)
+      setShowDeleteConfirmation(false)
+
+      // If not aborted, clear selected rows
+      if (!signal.aborted) {
+        setSelectedRows(new IdSelection())
+        handleRefreshData()
+      }
+      setRowIdsToDelete(undefined)
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        alert(`Error deleting rows: ${error}`)
+      }
+    }
+  }
+
+  const handleShowDeleteConfirmation = async () => {
+    setShowDeleteConfirmation(true)
+    setLoadingRowIdsToDelete(true)
+    setRowIdsToDelete(undefined)
+
+    try {
+      // Get row ids
+      let rowIds = Object.keys(selectedRows.ids)
+
+      // If inverted, get all ids and remove selected ids
+      if (selectedRows.inverted) {
+        // Create modified design to just get ids 
+        const idsDesign = produce(design, (draft) => {
+          draft.columns = []
+          draft.subtables = []
+        })
+
+        // Create query builder
+        const queryBuilder = new DatagridQueryBuilder(schema)
+        const query = queryBuilder.createQuery(idsDesign, {
+          extraFilters: filters
+        })
+
+        // Perform query
+        const rows = await dataSource.performQuery(query)
+        rowIds = rows.map((row: any) => row.id)
+
+        // Remove rows from rowIds
+        rowIds = rowIds.filter(id => !selectedRows.ids[id])
+      }
+
+      setRowIdsToDelete(rowIds)
+    } catch (error) {
+      alert(`Error loading rows to delete: ${error}`)
+      setShowDeleteConfirmation(false)
+    } finally {
+      setLoadingRowIdsToDelete(false)
+    }
+  }
+
+  // Get the values of the quick filters
+  const getQuickfilterValues = () => {
+    return quickfiltersValues || []
+  }
+
+  /** Get filters that are applied by the quickfilters */
+  const getQuickfilterFilters = () => {
+    return new QuickfilterCompiler(schema).compile(
+      design.quickfilters,
+      quickfiltersValues,
+      quickfilterLocks
+    )
+  }
+
+  const handleDataEditingToggle = () => {
+    if (dataEditingEnabled) {
+      setDataEditingEnabled(false)
+    } else {
+      if (confirm(T`Turn on data editing? This will allow you to edit the live data and is an advanced feature.`)) {
+        setDataEditingEnabled(true)
+      }
+    }
+  }
+
+  const handleEdit = () => {
+    setEditingDesign(true)
+  }
+
+  /** Get datagrid filter compiled for quickfilter filtering */
+  const getCompiledFilters = (): JsonQLFilter[] => {
+    let jsonql
+    const exprCompiler = new ExprCompiler(schema)
+    const exprUtils = new ExprUtils(schema)
+    const exprCleaner = new ExprCleaner(schema)
+
+    const compiledFilters: JsonQLFilter[] = []
+
+    if (design.filter) {
+      // First clean the filter
+      const cleanExpr = exprCleaner.cleanExpr(design.filter, { table: design.table! })
+
+      jsonql = exprCompiler.compileExpr({ expr: cleanExpr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({
+          table: design.table!,
+          jsonql
+        })
+      }
+    }
+
+    // Add global filters
+    for (let filter of design.globalFilters || []) {
+      // Check if exists and is correct type
+      const column = schema.getColumn(design.table!, filter.columnId)
+      if (!column) {
+        continue
+      }
+
+      const columnExpr: Expr = { type: "field", table: design.table!, column: column.id }
+      if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+        continue
+      }
+
+      // Create expr
+      let expr: Expr = {
+        type: "op",
+        op: filter.op,
+        table: design.table!,
+        exprs: [columnExpr as Expr].concat(filter.exprs)
+      }
+
+      // Clean expr
+      expr = exprCleaner.cleanExpr(expr, { table: design.table! })
+
+      jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({
+          table: design.table!,
+          jsonql
+        })
+      }
+    }
+
+    return compiledFilters
+  }
+
+  const renderDeleteRows = () => {
+    if (!props.onRowsDelete || selectedRows.isNone()) {
+      return null
+    }
+    return <button className="btn btn-link btn-sm" onClick={handleShowDeleteConfirmation}>
+      <i className="fas fa-times" />
+      {" "}
+      {T`Delete Selected Rows`}
+    </button>
+  }
+
+  /** Toggle to allow cell editing */
+  const renderCellEdit = () => {
+    if (!canEditExpr) {
+      return null
+    }
+
+    const label = <>
+      <i className={dataEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o"} />
+      {" "}
+      {T`Data Editing`}
+    </>
+
+    return (
+      <a
+        key="cell-edit"
+        className="btn btn-link btn-sm"
+        onClick={handleDataEditingToggle}
+      >
+        {label}
+      </a>
+    )
+  }
+
+  const renderEditButton = () => {
+    if (!onDesignChange) {
+      return null
+    }
+
+    return (
+      <button
+        type="button"
+        className="btn btn-primary"
+        onClick={handleEdit}
+      >
+        <span className="fas fa-cog" />
+        {" "}
+        {T`Settings`}
+      </button>
+    )
+  }
+
+  const renderFindReplace = () => {
+    if (!dataEditingEnabled) {
+      return null
+    }
+
+    return (
+      <a
+        key="findreplace"
+        className="btn btn-link btn-sm"
+        onClick={() => findReplaceModalRef.current!.show()}
+      >
+        {T`Find/Replace`}
+      </a>
+    )
+  }
+
+  const renderTitleBar = () => {
+    return (
+      <div style={{ position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 }}>
+        <div style={{ float: "right" }}>
+          {design.showNumRows && numRows ? <small className='text-muted text-sm'>{`${d3Format(',')(numRows)} rows`}</small> : undefined}
+          {renderDeleteRows()}
+          {renderFindReplace()}
+          {renderCellEdit()}
+          {renderEditButton()}
+          <a key="refresh" className="btn btn-link btn-sm" onClick={handleRefreshData}>
+            <span className="fas fa-sync" />
+            {" "}
+            <span className="hide-600px">{T`Refresh`}</span>
+          </a>
+          {extraTitleButtonsElem}
+        </div>
+        {titleElem}
+      </div>
+    )
+  }
+
+  const renderQuickfilter = () => {
+    return (
+      <div
+        style={{ position: "absolute", top: 40, left: 0, right: 0 }}
+        ref={quickfiltersRef}
+      >
+        <QuickfiltersComponent
+          design={design.quickfilters!}
+          schema={schema}
+          dataSource={dataSource}
+          quickfiltersDataSource={datagridDataSource.getQuickfiltersDataSource()}
+          values={quickfiltersValues || []}
+          onValuesChange={(values: any) => setQuickfiltersValues(values)}
+          locks={quickfilterLocks}
+          filters={getCompiledFilters()}
+        />
+      </div>
+    )
+  }
+
+  // Renders the editor modal
+  const renderEditor = () => {
+    if (!editingDesign) {
+      return null
+    }
+
+    return (
+      <DatagridEditorComponent
+        schema={schema}
+        dataSource={dataSource}
+        design={design}
+        onDesignChange={(newDesign: any) => {
+          // If quickfilters have changed, reset values
+          if (!_.isEqual(design.quickfilters, newDesign.quickfilters)) {
+            setQuickfiltersValues(null)
+          }
+
+          onDesignChange!(newDesign)
+          setEditingDesign(false)
+        }}
+        onCancel={() => setEditingDesign(false)}
+      />
+    )
+  }
+
+  const renderFindReplaceModal = (filters: any) => {
+    return (
+      <FindReplaceModalComponent
+        ref={findReplaceModalRef}
+        schema={schema}
+        dataSource={dataSource}
+        design={design}
+        filters={filters}
+        updateExprValues={updateExprValues!}
+        onUpdate={() => {
+          // Reload
+          datagridViewRef.current?.reload()
+        }}
+      />
+    )
+  }
+
+  let activeFilters = filters || []
+
+  // Compile quickfilters
+  activeFilters = activeFilters.concat(getQuickfilterFilters())
+
+  useImperativeHandle(
+    ref,
+    (): DatagridComponentRef => ({
+      getQuickfilterValues,
+      getQuickfilterFilters,
+      reload
+    })
+  )
+
+  return (
+    <LocaleContext.Provider value={design.locale || "en"}>
+      <div
+        style={{
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          paddingTop: 40 + (quickfiltersHeight || 0)
+        }}
+      >
+        {renderTitleBar()}
+        {renderQuickfilter()}
+
+        {renderEditor()}
+        {renderFindReplaceModal(activeFilters)}
+        {showDeleteConfirmation && (
+          <DeleteConfirmationModal
+            onConfirm={handleDeleteRows}
+            onCancel={() => {
+              setShowDeleteConfirmation(false)
+              setRowIdsToDelete(undefined)
+            }}
+            numRows={rowIdsToDelete?.length}
+            loadingNumRows={loadingRowIdsToDelete}
+          />
+        )}
+
+        <AutoSizeComponent injectWidth injectHeight>
+          {(size: any) => {
+            // Clean before displaying
+            const cleanedDesign = new DatagridUtils(schema).cleanDesign(design)
+
+            if (!new DatagridUtils(schema).validateDesign(cleanedDesign)) {
+              return (
+                <DatagridViewComponent
+                  ref={datagridViewRef}
+                  width={size.width - 1} // minus 1 px to test if it solves the jitter with scroll
+                  height={size.height - 1}
+                  pageSize={100}
+                  schema={schema}
+                  dataSource={dataSource}
+                  datagridDataSource={datagridDataSource}
+                  design={cleanedDesign}
+                  filters={activeFilters}
+                  onDesignChange={onDesignChange}
+                  onRowClick={onRowClick}
+                  onRowDoubleClick={onRowDoubleClick}
+                  selectedRows={dataEditingEnabled && props.onRowsDelete != null ? selectedRows : undefined}
+                  onSelectedRowsChange={dataEditingEnabled && props.onRowsDelete != null ? setSelectedRows : undefined}
+                  canEditExpr={dataEditingEnabled ? canEditExpr : undefined}
+                  updateExprValues={dataEditingEnabled ? updateExprValues : undefined}
+                  refreshKey={refreshKey}
+                />
+              )
+            } else if (onDesignChange) {
+              return (
+                <div style={{ textAlign: "center", marginTop: size.height / 2 }}>
+                  <a className="btn btn-link" onClick={handleEdit}>{T`Click Here to Configure`}</a>
+                </div>
+              )
+            } else {
+              return null
+            }
+          }}
+        </AutoSizeComponent>
+      </div>
+    </LocaleContext.Provider>
+  )
+})
+
+interface DatagridEditorComponentProps {
+  schema: Schema
+  dataSource: DataSource
+  design: DatagridDesign
+  onDesignChange: (design: DatagridDesign) => void
+  onCancel: () => void
+}
+
+/** Popup editor */
+function DatagridEditorComponent(props: DatagridEditorComponentProps) {
+  const { schema, dataSource, design, onDesignChange, onCancel } = props
+  const [localDesign, setLocalDesign] = useState(design)
+
+  return (
+    <ActionCancelModalComponent
+      onAction={() => {
+        onDesignChange(localDesign)
+        setLocalDesign(design)
+      }}
+      onCancel={onCancel}
+      size="large"
+    >
+      <DatagridDesignerComponent
+        schema={schema}
+        dataSource={dataSource}
+        design={localDesign}
+        onDesignChange={(design: any) => setLocalDesign(design)}
+      />
+    </ActionCancelModalComponent>
+  )
+}
+
+interface DeleteConfirmationModalProps {
+  /** Called when deletion is confirmed */
+  onConfirm: (signal: AbortSignal) => Promise<void>
+  /** Called when modal is cancelled */
+  onCancel: () => void
+  /** Number of rows to be deleted */
+  numRows?: number
+  /** True when loading number of rows */
+  loadingNumRows: boolean
+}
+
+/** Modal that confirms deletion of rows */
+function DeleteConfirmationModal(props: DeleteConfirmationModalProps) {
+  const { onConfirm, onCancel, numRows, loadingNumRows } = props
+  const [confirmed, setConfirmed] = useState(false)
+  const [deleting, setDeleting] = useState(false)
+  const abortControllerRef = useRef<AbortController>()
+
+  // If more than 1000 rows, show an error
+  const tooManyRows = numRows && numRows > 1000
+
+  const handleConfirm = async () => {
+    setDeleting(true)
+    abortControllerRef.current = new AbortController()
+    try {
+      await onConfirm(abortControllerRef.current.signal)
+    }
+    finally {
+      setDeleting(false)
+    }
+  }
+
+  const handleCancel = () => {
+    if (deleting) {
+      abortControllerRef.current?.abort()
+    }
+    onCancel()
+  }
+
+  return (
+    <ActionCancelModalComponent
+      title={T`Confirm Delete`}
+      onAction={handleConfirm}
+      onCancel={handleCancel}
+      actionLabel={T`Delete`}
+      size="normal"
+      actionBusy={deleting}
+      actionDisabled={!confirmed || loadingNumRows}
+    >
+      <div>
+        {loadingNumRows ? (
+          <div className="text-muted"><i className="fa fa-spinner fa-spin" /> {T`Loading rows to delete...`}</div>
+        ) : (
+          <div>{T`This will permanently delete ${d3Format(",")(numRows || 0)} row(s).`}</div>
+        )}
+        {tooManyRows && (
+          <div className="alert alert-danger">{T`Cannot delete more than 1000 rows at a time.`}</div>
+        )}
+        {!tooManyRows && numRows && numRows > 0 && (
+          <div className="mt-3">
+            <Checkbox value={confirmed} onChange={setConfirmed}>
+              {T`I understand that this action cannot be undone`}
+            </Checkbox>
+          </div>
+        )}
+      </div>
+    </ActionCancelModalComponent>
+  )
+}