@mwater/visualization 5.0.0

package/src/dashboards/WidgetComponent.tsx

@@ -0,0 +1,131 @@
+import { Schema, DataSource } from "@mwater/expressions"
+import { useMemo, useRef } from "react"
+import { JsonQLFilter } from "../JsonQLFilter"
+import WidgetFactory from "../widgets/WidgetFactory"
+import { WidgetScope } from "../WidgetScope"
+import DashboardDataSource from "./DashboardDataSource"
+
+/**
+ * Component which renders a widget and ensures that props do not change
+ * unnecessarily.
+ */
+export function WidgetComponent(props: {
+  /** Widget id */
+  id: string
+  /** Widget type */
+  type: string
+
+  /** Widget design */
+  design: any
+
+  /** Called with new widget design. null/undefined for readonly **/
+  onDesignChange?: { (design: object): void } | null
+
+  /** Data source for dashboard */
+  dashboardDataSource: DashboardDataSource
+
+  /** schema to use **/
+  schema: Schema
+
+  /** data source to use. Only used when designing, for display uses widgetDataSource **/
+  dataSource: DataSource
+
+  /** scope of the widget (when the widget self-selects a particular scope) **/
+  scope?: WidgetScope | null
+
+  /** array of filters to apply.**/
+  filters: JsonQLFilter[]
+
+  /** called with scope of widget **/
+  onScopeChange: (scope: WidgetScope | null) => void
+
+  /** width in pixels on screen **/
+  width?: number
+
+  /** height in pixels on screen **/
+  height?: number
+
+  /** optional table name of table that will be filtered to have a single row present. Widget designer should optionally account for this **/
+  singleRowTable?: string
+
+  /** Called with (tableId, rowId) when item is clicked **/
+  onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Optional lookup of string name to value. Used for {{branding}} and other replacement strings in text widget */
+  namedStrings?: { [key: string]: string }
+
+  /** Entries in the table of content */
+  tocEntries?: string[]
+
+  /** the widget callback ref */
+  widgetRef: (widget: any) => void
+
+  /** called with (widgetId, tocEntryId) to scroll to TOC entry */
+  onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void
+
+  /** Change to force a refresh */
+  refreshKey?: any
+}) {
+  // Get and stabilize widget data source
+  // TODO!!! There is a global problem with DashboardDataSources being re-created on each render.
+  // TODO!!! This now only uses the type of the dashboard data source. They should be more stable in the future.
+  const widgetDataSource = useMemo(
+    () => props.dashboardDataSource.getWidgetDataSource(props.type, props.id),
+    [props.dashboardDataSource.constructor, props.type, props.id, props.schema, props.dataSource, props.refreshKey]
+  )
+
+  const widget = WidgetFactory.createWidget(props.type)
+
+  // Stabilize functions
+  const onDesignChange = useStabilizeFunction(props.onDesignChange)
+  const onRowClick = useStabilizeFunction(props.onRowClick) || undefined
+  const onScopeChange = useStabilizeFunction(props.onScopeChange)!
+  const widgetRef = useStabilizeFunction(props.widgetRef)!
+
+  // Stabilize values
+  const filters = useStabilizeValue(props.filters)
+  const scope = useStabilizeValue(props.scope)
+
+  return widget.createViewElement({
+    schema: props.schema,
+    dataSource: props.dataSource,
+    widgetDataSource,
+    design: props.design,
+    scope,
+    filters,
+    onScopeChange,
+    onDesignChange,
+    width: props.width,
+    height: props.height,
+    singleRowTable: props.singleRowTable,
+    onRowClick,
+    namedStrings: props.namedStrings,
+    tocEntries: props.tocEntries,
+    onScrollToTOCEntry: props.onScrollToTOCEntry,
+    widgetRef
+  })
+}
+
+/** Always returns the same function to prevent unnecessary re-rendering. Forwards to the real function */
+function useStabilizeFunction<T extends Function>(func: T | undefined | null): T | undefined | null {
+  // Create ref for changing func
+  const variableRef = useRef<T | null>()
+  variableRef.current = func
+
+  // Create stable function to always use as callback
+  function stableCallback(...args: any[]) {
+    return variableRef.current!.apply(null, args)
+  }
+  const stableRef = useRef<T>(stableCallback as any)
+  return func ? stableRef.current : undefined
+}
+
+/** Always returns the same value of stringifies the same to prevent unnecessary re-rendering */
+function useStabilizeValue<T>(value: T): T {
+  const stableRef = useRef<T>(value)
+
+  if (JSON.stringify(value) != JSON.stringify(stableRef.current)) {
+    stableRef.current = value
+  }
+  return stableRef.current
+}

package/src/dashboards/layoutOptions.ts

@@ -0,0 +1,40 @@
+import { DashboardDesign } from "./DashboardDesign"
+
+export type DashboardTheme = "default" | "greybg" | "story"
+
+/** Width buckets for dashboards */
+export type WidthBucket = "sm" | "md" | "lg" | "xl"
+
+export interface BlocksLayoutOptions {
+  /** Width at which to collapse columns. Null to not collapse */
+  collapseColumnsWidth: number | null
+
+  /** Width below which scales or scrolls */
+  minimumWidth: number | null
+
+  /** What to do when below minimum width */
+  belowMinimumWidth: "scale" | "scroll"
+
+  /** Width above which pads */
+  maximumWidth: number | null
+
+  /** Width at which to hide quickfilters. Null for never */
+  hideQuickfiltersWidth: number | null
+}
+
+/** Get default layout options for a theme */
+export function getDefaultLayoutOptions(theme?: DashboardTheme | undefined): BlocksLayoutOptions {
+  theme = theme || "default"
+
+  return {
+    collapseColumnsWidth: 600,
+    minimumWidth: theme == "story" ? 400 : 600,
+    belowMinimumWidth: "scale",
+    maximumWidth: theme == "story" ? 1000 : 1600,
+    hideQuickfiltersWidth: 600
+  }
+}
+
+export function getLayoutOptions(design: DashboardDesign): BlocksLayoutOptions {
+  return design.layoutOptions || getDefaultLayoutOptions(design.style)
+}

package/src/datagrids/DatagridComponent.ts

@@ -0,0 +1,430 @@
+import _ from "lodash"
+import React, { ReactNode } from "react"
+const R = React.createElement
+
+import AutoSizeComponent from "@mwater/react-library/lib/AutoSizeComponent"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import { DataSource, Expr, ExprUtils, Schema } from "@mwater/expressions"
+import { ExprCompiler } from "@mwater/expressions"
+import { ExprCleaner } from "@mwater/expressions"
+import DatagridViewComponent, { RowUpdate } from "./DatagridViewComponent"
+import DatagridDesignerComponent from "./DatagridDesignerComponent"
+import DatagridUtils from "./DatagridUtils"
+
+import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
+import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
+import FindReplaceModalComponent from "./FindReplaceModalComponent"
+import DatagridDataSource from "./DatagridDataSource"
+import { DatagridDesign, JsonQLFilter } from ".."
+
+export interface DatagridComponentProps {
+  /** schema to use */
+  schema: Schema
+
+  /** dataSource to use */
+  dataSource: DataSource
+
+  /** datagrid dataSource to use */
+  datagridDataSource: DatagridDataSource
+
+  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
+
+  /** Locked quickfilter values. See README in quickfilters */
+  quickfilterLocks?: any[]
+
+  // Filters to add to the datagrid
+  filters?: JsonQLFilter[]
+}
+
+// Datagrid with decorations
+// See README.md for description of datagrid format
+// Design should be cleaned already before being passed in (see DatagridUtils)
+export default class DatagridComponent extends React.Component<
+  DatagridComponentProps,
+  {
+    /** is design being edited */
+    editingDesign: boolean
+    /** True if cells can be edited directly */
+    cellEditingEnabled: boolean
+    /** Height of quickfilters */
+    quickfiltersHeight: number | null
+    quickfiltersValues: null | any[]
+  }
+> {
+  datagridView?: DatagridViewComponent | null
+  quickfilters?: HTMLElement | null
+  findReplaceModal: FindReplaceModalComponent | null
+
+  constructor(props: DatagridComponentProps) {
+    super(props)
+
+    this.state = {
+      editingDesign: false, // is design being edited
+      cellEditingEnabled: false, // True if cells can be edited directly
+      quickfiltersHeight: null, // Height of quickfilters
+      quickfiltersValues: null
+    }
+  }
+
+  reload() {
+    return this.datagridView?.reload()
+  }
+
+  componentDidMount() {
+    return this.updateHeight()
+  }
+
+  componentDidUpdate() {
+    return this.updateHeight()
+  }
+
+  updateHeight() {
+    // Calculate quickfilters height
+    if (this.quickfilters) {
+      if (this.state.quickfiltersHeight !== this.quickfilters.offsetHeight) {
+        return this.setState({ quickfiltersHeight: this.quickfilters.offsetHeight })
+      }
+    } else {
+      return this.setState({ quickfiltersHeight: 0 })
+    }
+  }
+
+  // Get the values of the quick filters
+  getQuickfilterValues = () => {
+    return this.state.quickfiltersValues || []
+  }
+
+  // Get filters that are applied by the quickfilters
+  getQuickfilterFilters = () => {
+    return new QuickfilterCompiler(this.props.schema).compile(
+      this.props.design.quickfilters,
+      this.state.quickfiltersValues,
+      this.props.quickfilterLocks
+    )
+  }
+
+  handleCellEditingToggle = () => {
+    if (this.state.cellEditingEnabled) {
+      return this.setState({ cellEditingEnabled: false })
+    } else {
+      if (confirm(T("Turn on cell editing? This will allow you to edit the live data and is an advanced feature."))) {
+        return this.setState({ cellEditingEnabled: true })
+      }
+    }
+  }
+
+  handleEdit = () => {
+    return this.setState({ editingDesign: true })
+  }
+
+  // Get datagrid filter compiled for quickfilter filtering
+  getCompiledFilters(): JsonQLFilter[] {
+    let jsonql
+    const exprCompiler = new ExprCompiler(this.props.schema)
+    const exprUtils = new ExprUtils(this.props.schema)
+    const exprCleaner = new ExprCleaner(this.props.schema)
+
+    const compiledFilters: JsonQLFilter[] = []
+
+    if (this.props.design.filter) {
+      // First clean the filter
+      const cleanExpr = exprCleaner.cleanExpr(this.props.design.filter, { table: this.props.design.table! })
+
+      jsonql = exprCompiler.compileExpr({ expr: cleanExpr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({
+          table: this.props.design.table!,
+          jsonql
+        })
+      }
+    }
+
+    // Add global filters
+    for (let filter of this.props.design.globalFilters || []) {
+      // Check if exists and is correct type
+      const column = this.props.schema.getColumn(this.props.design.table!, filter.columnId)
+      if (!column) {
+        continue
+      }
+
+      const columnExpr: Expr = { type: "field", table: this.props.design.table!, column: column.id }
+      if (exprUtils.getExprType(columnExpr) !== filter.columnType) {
+        continue
+      }
+
+      // Create expr
+      let expr: Expr = {
+        type: "op",
+        op: filter.op,
+        table: this.props.design.table!,
+        exprs: [columnExpr as Expr].concat(filter.exprs)
+      }
+
+      // Clean expr
+      expr = exprCleaner.cleanExpr(expr, { table: this.props.design.table! })
+
+      jsonql = exprCompiler.compileExpr({ expr, tableAlias: "{alias}" })
+      if (jsonql) {
+        compiledFilters.push({
+          table: this.props.design.table!,
+          jsonql
+        })
+      }
+    }
+
+    return compiledFilters
+  }
+
+  // Toggle to allow cell editing
+  renderCellEdit() {
+    if (!this.props.canEditExpr) {
+      return null
+    }
+
+    const label = [
+      R("i", { className: this.state.cellEditingEnabled ? "fa fa-fw fa-check-square" : "fa fa-fw fa-square-o" }),
+      " ",
+      T("Cell Editing")
+    ]
+
+    return R(
+      "a",
+      {
+        key: "cell-edit",
+        className: "btn btn-link btn-sm",
+        onClick: this.handleCellEditingToggle
+      },
+      label
+    )
+  }
+
+  renderEditButton() {
+    if (!this.props.onDesignChange) {
+      return null
+    }
+
+    return R(
+      "button",
+      {
+        type: "button",
+        className: "btn btn-primary",
+        onClick: this.handleEdit
+      },
+      R("span", { className: "fas fa-cog" }),
+      " ",
+      T("Settings")
+    )
+  }
+
+  renderFindReplace() {
+    if (!this.state.cellEditingEnabled) {
+      return null
+    }
+
+    return R(
+      "a",
+      {
+        key: "findreplace",
+        className: "btn btn-link btn-sm",
+        onClick: () => this.findReplaceModal!.show()
+      },
+      T("Find/Replace")
+    )
+  }
+
+  renderTitleBar() {
+    return R(
+      "div",
+      { style: { position: "absolute", top: 0, left: 0, right: 0, height: 40, padding: 4 } },
+      R(
+        "div",
+        { style: { float: "right" } },
+        this.renderFindReplace(),
+        this.renderCellEdit(),
+        this.renderEditButton(),
+        this.props.extraTitleButtonsElem
+      ),
+      this.props.titleElem
+    )
+  }
+
+  renderQuickfilter() {
+    return R(
+      "div",
+      {
+        style: { position: "absolute", top: 40, left: 0, right: 0 },
+        ref: (c) => {
+          this.quickfilters = c
+        }
+      },
+      R(QuickfiltersComponent, {
+        design: this.props.design.quickfilters!,
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        quickfiltersDataSource: this.props.datagridDataSource.getQuickfiltersDataSource(),
+        values: this.state.quickfiltersValues || [],
+        onValuesChange: (values: any) => this.setState({ quickfiltersValues: values }),
+        locks: this.props.quickfilterLocks,
+        filters: this.getCompiledFilters()
+      })
+    )
+  }
+
+  // Renders the editor modal
+  renderEditor() {
+    if (!this.state.editingDesign) {
+      return
+    }
+
+    return R(DatagridEditorComponent, {
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      design: this.props.design,
+      onDesignChange: (design: any) => {
+        // If quickfilters have changed, reset values
+        if (!_.isEqual(this.props.design.quickfilters, design.quickfilters)) {
+          this.setState({ quickfiltersValues: null })
+        }
+
+        this.props.onDesignChange!(design)
+
+        return this.setState({ editingDesign: false })
+      },
+      onCancel: () => this.setState({ editingDesign: false })
+    })
+  }
+
+  renderFindReplaceModal(filters: any) {
+    return R(FindReplaceModalComponent, {
+      ref: (c: FindReplaceModalComponent | null) => {
+        this.findReplaceModal = c
+      },
+      schema: this.props.schema,
+      dataSource: this.props.dataSource,
+      datagridDataSource: this.props.datagridDataSource,
+      design: this.props.design,
+      filters,
+      updateExprValues: this.props.updateExprValues!,
+      onUpdate: () => {
+        // Reload
+        return this.datagridView?.reload()
+      }
+    })
+  }
+
+  render() {
+    let filters = this.props.filters || []
+
+    // Compile quickfilters
+    filters = filters.concat(this.getQuickfilterFilters())
+
+    return R(
+      "div",
+      {
+        style: {
+          width: "100%",
+          height: "100%",
+          position: "relative",
+          paddingTop: 40 + (this.state.quickfiltersHeight || 0)
+        }
+      },
+      this.renderTitleBar(),
+      this.renderQuickfilter(),
+
+      this.renderEditor(),
+      this.renderFindReplaceModal(filters),
+
+      R(AutoSizeComponent, { injectWidth: true, injectHeight: true } as any, (size: any) => {
+        // Clean before displaying
+        const design = new DatagridUtils(this.props.schema).cleanDesign(this.props.design)
+
+        if (!new DatagridUtils(this.props.schema).validateDesign(design)) {
+          return R(DatagridViewComponent, {
+            ref: (view: DatagridViewComponent | null) => {
+              this.datagridView = view
+            },
+            width: size.width - 1, // minus 1 px to test if it solves the jitter with scroll
+            height: size.height - 1,
+            pageSize: 100,
+            schema: this.props.schema,
+            dataSource: this.props.dataSource,
+            datagridDataSource: this.props.datagridDataSource,
+            design,
+            filters,
+            onDesignChange: this.props.onDesignChange,
+            onRowClick: this.props.onRowClick,
+            onRowDoubleClick: this.props.onRowDoubleClick,
+            canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
+            updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+          })
+        } else if (this.props.onDesignChange) {
+          return R(
+            "div",
+            { style: { textAlign: "center", marginTop: size.height / 2 } },
+            R("a", { className: "btn btn-link", onClick: this.handleEdit }, T("Click Here to Configure"))
+          )
+        } else {
+          return null
+        }
+      })
+    )
+  }
+}
+
+interface DatagridEditorComponentProps {
+  schema: Schema
+  dataSource: DataSource
+  design: DatagridDesign
+  onDesignChange: (design: DatagridDesign) => void
+  onCancel: () => void
+}
+
+/** Popup editor */
+class DatagridEditorComponent extends React.Component<DatagridEditorComponentProps, { design: DatagridDesign }> {
+  constructor(props: DatagridEditorComponentProps) {
+    super(props)
+
+    this.state = {
+      design: props.design
+    }
+  }
+
+  render() {
+    return R(
+      ActionCancelModalComponent,
+      {
+        onAction: () => {
+          this.props.onDesignChange(this.state.design)
+          return this.setState({ design: this.props.design })
+        },
+        onCancel: this.props.onCancel,
+        size: "large"
+      },
+      R(DatagridDesignerComponent, {
+        schema: this.props.schema,
+        dataSource: this.props.dataSource,
+        design: this.state.design,
+        onDesignChange: (design: any) => this.setState({ design })
+      })
+    )
+  }
+}

package/src/datagrids/DatagridDataSource.ts

@@ -0,0 +1,21 @@
+import { Row } from "@mwater/expressions"
+import { DatagridDesign, JsonQLFilter } from ".."
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
+
+export default class DatagridDataSource {
+  /** Gets the rows specified */
+  getRows(
+    design: DatagridDesign,
+    offset: number,
+    limit: number,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, rows: Row[]) => void
+  ): void {
+    throw new Error("Not implemented")
+  }
+
+  /** Gets the quickfilters data source */
+  getQuickfiltersDataSource(): QuickfiltersDataSource {
+    throw new Error("Not implemented")
+  }
+}