@mwater/visualization 5.2.0 → 5.3.0

package/src/dashboards/DashboardComponent.tsx

@@ -1,25 +1,22 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React, { ReactNode } from "react"
 const R = React.createElement
 
 import { DataSource, ExprCompiler, Schema } from "@mwater/expressions"
-import { ExprCleaner } from "@mwater/expressions"
 import UndoStack from "../UndoStack"
 import * as DashboardUtils from "./DashboardUtils"
-import DashboardViewComponent from "./DashboardViewComponent"
+import DashboardViewComponent, { DashboardViewComponentHandle } from "./DashboardViewComponent"
 import QuickfiltersComponent from "../quickfilter/QuickfiltersComponent"
 import QuickfilterCompiler from "../quickfilter/QuickfilterCompiler"
 import SettingsModalComponent from "./SettingsModalComponent"
 import LayoutManager from "../layouts/LayoutManager"
-import DashboardUpgrader from "./DashboardUpgrader"
 import { LayoutOptionsComponent } from "./LayoutOptionsComponent"
 import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
 import { getLayoutOptions } from "./layoutOptions"
 import { DashboardDesign } from "./DashboardDesign"
 import DashboardDataSource from "./DashboardDataSource"
 import { JsonQLFilter } from ".."
-import { ActiveTablesContext } from "@mwater/expressions-ui"
+import { ActiveTablesContext, LocaleContext } from "@mwater/expressions-ui"
 
 export interface DashboardComponentProps {
   design: DashboardDesign
@@ -75,31 +72,20 @@ export interface DashboardComponentState {
  * Manages undo stack and quickfilter value
  */
 export default class DashboardComponent extends React.Component<DashboardComponentProps, DashboardComponentState> {
-  dashboardView: DashboardViewComponent | null
+  dashboardView: DashboardViewComponentHandle | null
 
   static defaultProps = { printScaling: true }
 
-  static childContextTypes = {
-    locale: PropTypes.string,
-  }
-
   settings: SettingsModalComponent | null
 
-  getChildContext() {
-    return {
-      // Pass locale down. Both here and DashboardViewComponent to ensure that quickfilters also get context
-      locale: this.props.design.locale,
-    }
-  }
-
-  constructor(props: any) {
+  constructor(props: DashboardComponentProps) {
     super(props)
 
     const layoutOptions = getLayoutOptions(props.design)
 
     this.state = {
       undoStack: new UndoStack().push(props.design),
-      quickfiltersValues: props.quickfiltersValues,
+      quickfiltersValues: props.quickfiltersValues || null,
       editing:
         LayoutManager.createLayoutManager(props.design.layout).isEmpty(props.design.items) &&
         props.onDesignChange != null,
@@ -138,7 +124,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
   }
 
   handlePrint = () => {
-    this.dashboardView!.print()
+    this.dashboardView?.print()
   }
 
   handleUndo = () => {
@@ -198,21 +184,6 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return this.setState({ hideQuickfilters: false })
   }
 
-  handleUpgrade = () => {
-    if (
-      !confirm(
-        "This will upgrade your dashboard to the new kind with enhanced features. You can click Undo immediately afterwards if you wish to revert it. Continue?"
-      )
-    ) {
-      return
-    }
-
-    const design = new DashboardUpgrader().upgrade(this.props.design)
-    this.props.onDesignChange!(design)
-
-    alert("Upgrade completed. Some widgets may need to be resized. Click Undo to revert back to old dashboard style.")
-  }
-
   // Get filters from props filters combined with dashboard filters
   getCompiledFilters() {
     let compiledFilters = DashboardUtils.getCompiledFilters(
@@ -250,37 +221,30 @@ export default class DashboardComponent extends React.Component<DashboardCompone
     return R(
       "div",
       null,
-      this.state.editing && (this.props.design.layout || "grid") === "grid"
-        ? R(
-            "a",
-            { key: "upgrade", className: "btn btn-info btn-sm", onClick: this.handleUpgrade },
-            "Upgrade Dashboard..."
-          )
-        : undefined,
       this.state.editing
         ? [
-            R(
-              "a",
-              {
-                key: "undo",
-                className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
-                onClick: this.handleUndo
-              },
-              R("span", { className: "fas fa-caret-left" }),
-              R("span", { className: "hide-600px" }, " Undo")
-            ),
-            " ",
-            R(
-              "a",
-              {
-                key: "redo",
-                className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
-                onClick: this.handleRedo
-              },
-              R("span", { className: "fas fa-caret-right" }),
-              R("span", { className: "hide-600px" }, " Redo")
-            )
-          ]
+          R(
+            "a",
+            {
+              key: "undo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canUndo() ? "disabled" : ""}`,
+              onClick: this.handleUndo
+            },
+            R("span", { className: "fas fa-caret-left" }),
+            R("span", { className: "hide-600px" }, " Undo")
+          ),
+          " ",
+          R(
+            "a",
+            {
+              key: "redo",
+              className: `btn btn-link btn-sm ${!this.state.undoStack.canRedo() ? "disabled" : ""}`,
+              onClick: this.handleRedo
+            },
+            R("span", { className: "fas fa-caret-right" }),
+            R("span", { className: "hide-600px" }, " Redo")
+          )
+        ]
         : undefined,
       R(
         "a",
@@ -296,11 +260,11 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       ),
       this.state.hideQuickfilters && this.props.design.quickfilters && this.props.design.quickfilters.length > 0
         ? R(
-            "a",
-            { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
-            R("span", { className: "fa fa-filter" }),
-            R("span", { className: "hide-600px" }, " Show Quickfilters")
-          )
+          "a",
+          { key: "showQuickfilters", className: "btn btn-link btn-sm", onClick: this.handleShowQuickfilters },
+          R("span", { className: "fa fa-filter" }),
+          R("span", { className: "hide-600px" }, " Show Quickfilters")
+        )
         : undefined,
 
       // R 'a', key: "export", className: "btn btn-link btn-sm", onClick: @handleSaveDesignFile,
@@ -308,11 +272,11 @@ export default class DashboardComponent extends React.Component<DashboardCompone
       //   " Export"
       this.state.editing
         ? R(
-            "a",
-            { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
-            R("span", { className: "fas fa-cog" }),
-            R("span", { className: "hide-600px" }, " Settings")
-          )
+          "a",
+          { key: "settings", className: "btn btn-link btn-sm", onClick: this.handleSettings },
+          R("span", { className: "fas fa-cog" }),
+          R("span", { className: "hide-600px" }, " Settings")
+        )
         : undefined,
       this.state.editing ? this.renderStyle() : undefined,
       this.props.extraTitleButtonsElem,
@@ -346,7 +310,7 @@ export default class DashboardComponent extends React.Component<DashboardCompone
   }
 
   refDashboardView = (el: any) => {
-    return (this.dashboardView = el)
+    this.dashboardView = el
   }
 
   render() {
@@ -389,39 +353,39 @@ export default class DashboardComponent extends React.Component<DashboardCompone
 
 
     // Pass active tables down to table select components so they can present a shorter list
-    return <ActiveTablesContext.Provider 
+    return <ActiveTablesContext.Provider
       value={DashboardUtils.getFilterableTables(this.props.design, this.props.schema)}>
-        
-    <div style={{
-      display: "grid",
-      gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
-      height: "100%"
-    }}>
-      {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
-      <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
-      {dashboardView}
-      {this.props.onDesignChange != null && (
-        <SettingsModalComponent
-          onDesignChange={this.handleDesignChange}
-          schema={this.props.schema}
-          dataSource={this.props.dataSource}
-          ref={(c: SettingsModalComponent | null) => {
-            this.settings = c
-          }}
-        />
-      )}
-      {this.state.layoutOptionsOpen && (
-        <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10}>
-          <LayoutOptionsComponent
-            design={this.props.design}
-            onDesignChange={this.props.onDesignChange!}
-            onClose={() => this.setState({ layoutOptionsOpen: false })}
-            dashboardView={readonlyDashboardView}
-            quickfiltersView={this.renderQuickfilter()}
-          />
-        </ModalWindowComponent>
-      )}
-    </div>
+      <LocaleContext.Provider value={this.props.design.locale ?? "en"}>
+        <div style={{
+          display: "grid",
+          gridTemplateRows: this.props.hideTitleBar ? "auto 1fr" : "auto auto 1fr",
+          height: "100%"
+        }}>
+          {!this.props.hideTitleBar ? this.renderTitleBar() : undefined}
+          <div>{!this.state.hideQuickfilters ? this.renderQuickfilter() : undefined}</div>
+          {dashboardView}
+          {this.props.onDesignChange != null && (
+            <SettingsModalComponent
+              onDesignChange={this.handleDesignChange}
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              ref={(c: SettingsModalComponent | null) => {
+                this.settings = c
+              }}
+            />
+          )}
+          {this.state.layoutOptionsOpen && (
+            <ModalWindowComponent isOpen={true} outerPadding={10} innerPadding={10} onRequestClose={() => this.setState({ layoutOptionsOpen: false })}>
+              <LayoutOptionsComponent
+                design={this.props.design}
+                onDesignChange={this.props.onDesignChange!}
+                dashboardView={readonlyDashboardView}
+                quickfiltersView={this.renderQuickfilter()}
+              />
+            </ModalWindowComponent>
+          )}
+        </div>
+      </LocaleContext.Provider>
     </ActiveTablesContext.Provider>
   }
 }

package/src/dashboards/DashboardDesign.ts

@@ -15,13 +15,13 @@ export interface DashboardDesign {
   quickfilters?: Quickfilter[]
 
   /** layout engine to use (`blocks` is new default)  */
-  layout: "blocks" | "grid"
+  layout: "blocks"
 
-  /** optional theme to use */
+  /** Optional theme to use. Defaults to "default" theme. */
   style?: DashboardTheme
 
   /** Options for layout including responsiveness, scaling, etc */
-  layoutOptions?: BlocksLayoutOptions
+  layoutOptions?: Partial<BlocksLayoutOptions>
 
   /** filter expression indexed by table. e.g. { sometable: logical expression, etc. } */
   filters?: { [tableId: string]: Expr }

package/src/dashboards/DashboardUpgrader.ts

@@ -60,7 +60,47 @@ export default class DashboardUpgrader {
           delete items[li]
         }
       } else if (lineItems.length === 1) {
-        newItems.blocks.push(convertBlock(lineItems[0], items[lineItems[0]]))
+        const item = items[lineItems[0]]
+        const convertedBlock = convertBlock(lineItems[0], item)
+
+        // If widget goes all the way across
+        if (item.layout.x + item.layout.w == 24) {
+          newItems.blocks.push(convertedBlock)
+        } else {
+          const leftSpacerWidth = item.layout.x
+          const rightSpacerWidth = 24 - (item.layout.x + item.layout.w)
+          const blocks = []
+          const weights = []
+
+          if (leftSpacerWidth > 0) {
+            blocks.push({
+              id: uuid(),
+              type: "spacer",
+              aspectRatio: 3,
+            })
+            weights.push(leftSpacerWidth)
+          }
+
+          blocks.push(convertedBlock)
+          weights.push(item.layout.w)
+
+          if (rightSpacerWidth > 0) {
+            blocks.push({
+              id: uuid(),
+              type: "spacer",
+              aspectRatio: 3,
+            })
+            weights.push(rightSpacerWidth)
+          }
+
+          newItems.blocks.push({
+            id: uuid(),
+            type: "horizontal",
+            blocks,
+            weights,
+          })
+        }
+
         delete items[lineItems[0]]
       }
 

package/src/dashboards/DashboardViewComponent.tsx

@@ -0,0 +1,313 @@
+import _ from "lodash"
+import React, { CSSProperties, useEffect, useImperativeHandle, useRef, useMemo, useState } from "react"
+
+import ImplicitFilterBuilder from "../ImplicitFilterBuilder"
+import * as DashboardUtils from "./DashboardUtils"
+import { DataSource, Schema } from "@mwater/expressions"
+import WidgetFactory from "../widgets/WidgetFactory"
+import WidgetScoper from "../widgets/WidgetScoper"
+import ReactElementPrinter from "@mwater/react-library/lib/ReactElementPrinter"
+import LayoutManager, { RenderWidgetOptions } from "../layouts/LayoutManager"
+import WidgetScopesViewComponent from "../widgets/WidgetScopesViewComponent"
+import { getLayoutOptions } from "./layoutOptions"
+import { WidgetComponent } from "./WidgetComponent"
+import { DashboardDataSource, DashboardDesign, JsonQLFilter } from ".."
+import { setPrintingModeEnabled } from "../maps/vectorMaps"
+import { WidgetDataSourcePrioritizer } from "./WidgetDataSourcePrioritizer"
+import { LocaleContext } from "@mwater/expressions-ui/lib/contexts"
+
+export interface DashboardViewComponentProps {
+  /** schema to use */
+  schema: Schema
+  
+  /** data source to use. Only used when designing, for display uses dashboardDataSource */
+  dataSource: DataSource
+
+  /** dashboard data source */
+  dashboardDataSource: DashboardDataSource
+
+  design: DashboardDesign
+
+  /** Leave unset for readonly */
+  onDesignChange?: (design: DashboardDesign) => void
+
+  /** 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 }
+
+  /** Filters to add to the dashboard (includes extra filters and any quickfilters from the dashboard component. Does not include dashboard level filters) */
+  filters?: JsonQLFilter[]
+
+  /** Entry to scroll to initially when dashboard is loaded */
+  initialTOCEntryScroll?: { widgetId: string; entryId: any }
+
+  /** True to hide scope display */
+  hideScopes?: boolean
+
+  /** True to render in print mode (prevents odd clipping issue) */
+  printMode?: boolean
+
+  /** Change to force a refresh */
+  refreshKey?: any
+}
+
+export interface DashboardViewComponentHandle {
+  print: () => Promise<void>
+}
+
+/**
+ * Displays a dashboard, handling removing of widgets. No title bar or other decorations.
+ * Handles scoping and stores the state of scope
+ */
+const DashboardViewComponent = React.forwardRef<DashboardViewComponentHandle, DashboardViewComponentProps>((props, ref) => {
+  const [widgetScoper, setWidgetScoper] = useState(new WidgetScoper())
+  const widgetComps = useRef<{ [widgetId: string]: any }>({})
+  const [forceUpdate, setForceUpdate] = useState(0)
+
+  const widgetDataSourcePrioritizer = useMemo(() => {
+    return new WidgetDataSourcePrioritizer(props.dashboardDataSource, 10)
+  }, [props.dashboardDataSource])
+
+  useEffect(() => {
+    return () => {
+      // Clear queue on component unmount
+      widgetDataSourcePrioritizer.cancel()
+    }
+  }, [widgetDataSourcePrioritizer])
+
+  useEffect(() => {
+    if (props.initialTOCEntryScroll) {
+      // Getting heights of widgets properly requires a 0 length timeout
+      setTimeout(() => {
+        handleScrollToTOCEntry(
+          props.initialTOCEntryScroll!.widgetId,
+          props.initialTOCEntryScroll!.entryId
+        )
+      }, 0)
+    }
+
+    // Add listener to localstorage to update clipboard display
+    window.addEventListener("storage", handleStorageChange)
+
+    return () => {
+      // Remove listener
+      window.removeEventListener("storage", handleStorageChange)
+    }
+  }, [props.initialTOCEntryScroll])
+
+  const handleStorageChange = () => {
+    setForceUpdate(forceUpdate + 1)
+  }
+
+  const handleScopeChange = (id: any, scope: any) => {
+    setWidgetScoper(widgetScoper.applyScope(id, scope))
+  }
+
+  const handleRemoveScope = (id: any) => {
+    setWidgetScoper(widgetScoper.applyScope(id, null))
+  }
+
+  const handleItemsChange = (items: any) => {
+    const design = _.extend({}, props.design, { items }) as DashboardDesign
+    props.onDesignChange!(design)
+  }
+
+  const handleClipboardChange = (block: any) => {
+    try {
+      // If empty, just set it
+      if (!block) {
+        window.localStorage.removeItem("DashboardViewComponent.clipboard")
+        setForceUpdate(forceUpdate + 1)
+        return
+      }
+
+      // Determine which tables are used (just peek for any uses of the table name. Not ideal, but easy)
+      const tables = _.pluck(
+        _.filter(props.schema.getTables(), (table) => JSON.stringify(block).includes(JSON.stringify(table.id))),
+        "id"
+      )
+
+      // Store in clipboard
+      window.localStorage.setItem("DashboardViewComponent.clipboard", JSON.stringify({ block, tables }))
+      setForceUpdate(forceUpdate + 1)
+    } catch (err) {
+      return alert("Clipboard not available")
+    }
+  }
+
+  const getClipboardContents = () => {
+    try {
+      return JSON.parse(window.localStorage.getItem("DashboardViewComponent.clipboard") || "null")
+    } catch (err) {
+      return null
+    }
+  }
+
+  const print = async () => {
+    // Temporarily enable print mode for vector maps
+    try {
+      setPrintingModeEnabled(true)
+
+      // Create element at 1080 wide (use as standard printing width)
+      const elem = (
+        <div style={{ width: 1080 }}>
+          <DashboardViewComponent {...props} onDesignChange={undefined} printMode={true} />
+        </div>
+      )
+    
+      const printer = new ReactElementPrinter()
+      await printer.print(elem, { delay: 5000 })
+    } finally {
+      setPrintingModeEnabled(false)
+    }
+  }
+
+  useImperativeHandle(ref, () => ({
+    print
+  }))
+
+  const getCompiledFilters = () => {
+    let compiledFilters = DashboardUtils.getCompiledFilters(
+      props.design,
+      props.schema,
+      DashboardUtils.getFilterableTables(props.design, props.schema)
+    )
+    compiledFilters = compiledFilters.concat(props.filters || [])
+    return compiledFilters
+  }
+
+  const getTOCEntries = (layoutManager: any) => {
+    const entries = []
+
+    for (let { id, type, design } of layoutManager.getAllWidgets(props.design.items)) {
+      const widget = WidgetFactory.createWidget(type)
+      // Add widgetId to each one
+      for (let entry of widget.getTOCEntries(design, props.namedStrings)) {
+        entries.push(_.extend({}, entry, { widgetId: id }))
+      }
+    }
+
+    return entries
+  }
+
+  const handleScrollToTOCEntry = (widgetId: any, entryId: any) => {
+    const widgetComp = widgetComps.current[widgetId]
+    if (!widgetComp) {
+      return
+    }
+
+    // Call scrollToTOCEntry if present
+    return widgetComp.scrollToTOCEntry?.(entryId)
+  }
+
+  const renderScopes = () => {
+    return (
+      <WidgetScopesViewComponent
+        scopes={widgetScoper.getScopes()}
+        onRemoveScope={handleRemoveScope}
+      />
+    )
+  }
+
+  const compRef = (widgetId: any, comp: any) => {
+    return (widgetComps.current[widgetId] = comp)
+  }
+
+  let cantPasteMessage = ""
+  const layoutManager = LayoutManager.createLayoutManager(props.design.layout)
+
+  const compiledFilters = getCompiledFilters()
+
+  // Get filterable tables
+  const filterableTables = DashboardUtils.getFilterableTables(props.design, props.schema)
+
+  // Determine toc entries
+  const tocEntries = getTOCEntries(layoutManager)
+
+  // Get clipboard contents
+  const clipboardContents = getClipboardContents()
+
+  // Check if can't paste because of missing table
+  if (clipboardContents && !_.all(clipboardContents.tables, (table: string) => props.schema.getTable(table))) {
+    cantPasteMessage = "Dashboard is missing one or more data sources needed for the copied item."
+  }
+
+  const renderWidget = (options: RenderWidgetOptions) => {
+    const widgetDataSource = widgetDataSourcePrioritizer.getWidgetDataSource(
+      options.type,
+      options.id, 
+      options.priority ?? 0
+    )
+
+    // Get filters (passed in plus dashboard widget scoper filters)
+    let filters = compiledFilters.concat(widgetScoper.getFilters(options.id))
+
+    // Extend the filters to include implicit filters (filter children in 1-n relationships)
+    if (props.design.implicitFiltersEnabled || props.design.implicitFiltersEnabled == null) {
+      // Default is true
+      const implicitFilterBuilder = new ImplicitFilterBuilder(props.schema)
+      filters = implicitFilterBuilder.extendFilters(filterableTables, filters)
+    }
+
+    const widgetElem = (
+      <WidgetComponent
+        key={options.id}
+        id={options.id}
+        type={options.type}
+        schema={props.schema}
+        dataSource={props.dataSource}
+        widgetDataSource={widgetDataSource}
+        design={options.design}
+        scope={widgetScoper.getScope(options.id)}
+        filters={filters}
+        onScopeChange={handleScopeChange.bind(null, options.id)}
+        onDesignChange={options.onDesignChange}
+        width={options.width}
+        height={options.height}
+        onRowClick={props.onRowClick}
+        namedStrings={props.namedStrings}
+        tocEntries={tocEntries}
+        onScrollToTOCEntry={handleScrollToTOCEntry}
+        // Keep references to widget elements
+        widgetRef={compRef.bind(null, options.id)}
+        refreshKey={props.refreshKey}
+      />
+    )
+
+    return widgetElem
+  }
+
+  const style: CSSProperties = {
+    height: "100%",
+    position: "relative"
+  }
+
+  if (!props.printMode) {
+    // Prevent this block from taking up too much space. Scrolling handled by layout manager.
+    // Setting overflow-x stops the inner div from becoming too tall
+    style.overflowX = "auto"
+  }
+
+  // Render widget container
+  return (
+    <LocaleContext.Provider value={props.design.locale ?? "en"}>
+    <div style={style}>
+      {!props.hideScopes ? renderScopes() : undefined}
+
+      {layoutManager.renderLayout({
+        items: props.design.items,
+        onItemsChange: props.onDesignChange != null ? handleItemsChange : undefined,
+        layoutOptions: getLayoutOptions(props.design),
+        renderWidget,
+        clipboard: clipboardContents?.block,
+        onClipboardChange: handleClipboardChange,
+        cantPasteMessage
+      })}
+    </div>
+    </LocaleContext.Provider>
+  )
+})
+
+export default DashboardViewComponent