@mwater/visualization 5.1.0 → 5.3.0

package/src/dashboards/SettingsModalComponent.tsx

@@ -0,0 +1,170 @@
+import _ from "lodash"
+import React from "react"
+const R = React.createElement
+import update from "update-object"
+import { languages } from "../languages"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import { default as ReactSelect } from "react-select"
+import * as DashboardUtils from "./DashboardUtils"
+import ActionCancelModalComponent from "@mwater/react-library/lib/ActionCancelModalComponent"
+import QuickfiltersDesignComponent from "../quickfilter/QuickfiltersDesignComponent"
+import FiltersDesignerComponent from "../FiltersDesignerComponent"
+import { DataSource, Schema } from "@mwater/expressions"
+import { DashboardDesign } from "./DashboardDesign"
+import { GlobalFiltersElementFactoryContext } from "../MWaterContextComponent"
+
+export interface SettingsModalComponentProps {
+  onDesignChange: any
+  schema: Schema
+  dataSource: DataSource
+}
+
+interface SettingsModalComponentState {
+  design: DashboardDesign | null
+}
+
+// Popup with settings for dashboard
+export default class SettingsModalComponent extends React.Component<
+  SettingsModalComponentProps,
+  SettingsModalComponentState
+> {
+  constructor(props: SettingsModalComponentProps) {
+    super(props)
+    this.state = {
+      design: null // Set when being edited
+    }
+  }
+
+  show(design: any) {
+    return this.setState({ design })
+  }
+
+  handleSave = () => {
+    this.props.onDesignChange(this.state.design)
+    return this.setState({ design: null })
+  }
+
+  handleCancel = () => {
+    return this.setState({ design: null })
+  }
+  handleDesignChange = (design: any) => {
+    return this.setState({ design })
+  }
+
+  handleFiltersChange = (filters: any) => {
+    const design = _.extend({}, this.state.design, { filters })
+    return this.handleDesignChange(design)
+  }
+
+  handleGlobalFiltersChange = (globalFilters: any) => {
+    const design = _.extend({}, this.state.design, { globalFilters })
+    return this.handleDesignChange(design)
+  }
+
+  render() {
+    // Don't show if not editing
+    if (!this.state.design) {
+      return null
+    }
+
+    // Get filterable tables
+    const filterableTables = DashboardUtils.getFilterableTables(this.state.design, this.props.schema)
+
+    const localeOptions = _.map(languages, (language) => {
+      return {
+        value: language.code,
+        label: language.en + " (" + language.name + ")"
+      }
+    })
+
+    return (
+      <ActionCancelModalComponent
+        size="large"
+        onCancel={this.handleCancel}
+        onAction={this.handleSave}
+      >
+        <div style={{ paddingBottom: 200 }}>
+          <h4>Quick Filters</h4>
+          <div className="text-muted">
+            Quick filters are shown to the user as a dropdown at the top of the dashboard and can be used to filter data of widgets.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <QuickfiltersDesignComponent
+              design={this.state.design.quickfilters || []}
+              onDesignChange={(design: any) =>
+                this.handleDesignChange(update(this.state.design, { quickfilters: { $set: design } }))
+              }
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              tables={filterableTables}
+            />
+          ) : (
+            "Nothing to quickfilter. Add widgets to the dashboard"
+          )}
+
+          <h4 style={{ paddingTop: 10 }}>Filters</h4>
+          <div className="text-muted">
+            Filters are built in to the dashboard and cannot be changed by viewers of the dashboard.
+          </div>
+
+          {filterableTables.length > 0 ? (
+            <FiltersDesignerComponent
+              schema={this.props.schema}
+              dataSource={this.props.dataSource}
+              filters={this.state.design.filters}
+              onFiltersChange={this.handleFiltersChange}
+              filterableTables={filterableTables}
+            />
+          ) : (
+            "Nothing to filter. Add widgets to the dashboard"
+          )}
+
+          <GlobalFiltersElementFactoryContext.Consumer>
+            {globalFiltersElementFactory =>
+              globalFiltersElementFactory ? (
+                <div>
+                  <h4 style={{ paddingTop: 10 }}>Global Filters</h4>
+                  {globalFiltersElementFactory({
+                    schema: this.props.schema,
+                    dataSource: this.props.dataSource,
+                    filterableTables,
+                    globalFilters: this.state.design!.globalFilters || [],
+                    onChange: this.handleGlobalFiltersChange
+                  })}
+                </div>
+              ) : undefined
+            }
+          </GlobalFiltersElementFactoryContext.Consumer>
+
+          <h4 style={{ paddingTop: 10 }}>Language</h4>
+          <div className="text-muted">
+            Controls the preferred language of widgets and uses specified language when available
+          </div>
+
+          <ReactSelect
+            value={_.findWhere(localeOptions, { value: this.state.design.locale || "en" }) || null}
+            options={localeOptions}
+            onChange={(locale: any) =>
+              this.handleDesignChange(update(this.state.design, { locale: { $set: locale.value } }))
+            }
+          />
+
+          {this.state.design.implicitFiltersEnabled && (
+            <>
+              <h4 style={{ paddingTop: 10 }}>Advanced</h4>
+              <ui.Checkbox
+                value={this.state.design.implicitFiltersEnabled != null ? this.state.design.implicitFiltersEnabled : true}
+                onChange={(value: boolean) =>
+                  this.handleDesignChange(update(this.state.design, { implicitFiltersEnabled: { $set: value } }))
+                }
+              >
+                Enable Implicit Filtering (leave unchecked for new dashboards)
+              </ui.Checkbox>
+            </>
+          )}
+        </div>
+      </ActionCancelModalComponent>
+    )
+  }
+}

package/src/dashboards/WidgetComponent.tsx

@@ -4,6 +4,7 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import WidgetFactory from "../widgets/WidgetFactory"
 import { WidgetScope } from "../WidgetScope"
 import DashboardDataSource from "./DashboardDataSource"
+import { WidgetDataSource } from "../widgets/WidgetDataSource"
 
 /**
  * Component which renders a widget and ensures that props do not change
@@ -21,8 +22,8 @@ export function WidgetComponent(props: {
   /** Called with new widget design. null/undefined for readonly **/
   onDesignChange?: { (design: object): void } | null
 
-  /** Data source for dashboard */
-  dashboardDataSource: DashboardDataSource
+  /** Data source for widget */
+  widgetDataSource: WidgetDataSource
 
   /** schema to use **/
   schema: Schema
@@ -66,14 +67,6 @@ export function WidgetComponent(props: {
   /** 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
@@ -89,7 +82,7 @@ export function WidgetComponent(props: {
   return widget.createViewElement({
     schema: props.schema,
     dataSource: props.dataSource,
-    widgetDataSource,
+    widgetDataSource: props.widgetDataSource,
     design: props.design,
     scope,
     filters,
@@ -102,7 +95,8 @@ export function WidgetComponent(props: {
     namedStrings: props.namedStrings,
     tocEntries: props.tocEntries,
     onScrollToTOCEntry: props.onScrollToTOCEntry,
-    widgetRef
+    widgetRef,
+    refreshKey: props.refreshKey
   })
 }
 

package/src/dashboards/WidgetDataSourcePrioritizer.ts

@@ -0,0 +1,82 @@
+import PQueue from 'p-queue'
+import DashboardDataSource from './DashboardDataSource'
+import { WidgetDataSource } from '../widgets/WidgetDataSource'
+import { JsonQLFilter } from '../JsonQLFilter'
+import { MapDesign } from '../maps/MapDesign'
+
+/**
+ * A class that prioritizes widget data sources based on the priority of the data source
+ * and ensures that only N requests is made at a time for a given widget data source.
+ */
+export class WidgetDataSourcePrioritizer {
+  private queue: PQueue
+  private dashboardDataSource: DashboardDataSource
+
+  /** 
+   * Key is widget type + ":" + widget id + ":" + priority
+   */
+  widgetDataSources: { [key: string]: WidgetDataSource }
+
+  constructor(dashboardDataSource: DashboardDataSource, concurrency: number) {
+    this.dashboardDataSource = dashboardDataSource
+    this.queue = new PQueue({ concurrency: concurrency })
+    this.widgetDataSources = {}
+  }
+
+  /** Get a widget data source with the given priority */
+  getWidgetDataSource(widgetType: string, widgetId: string, priority: number) {
+    let widgetDataSource = this.widgetDataSources[widgetType + ":" + widgetId + ":" + priority]
+    if (!widgetDataSource) {
+      const innerWidgetDataSource = this.dashboardDataSource.getWidgetDataSource(widgetType, widgetId)
+
+      widgetDataSource = {
+        getData: (design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): AbortController => {
+          const task = () => new Promise((resolve, reject) => {
+            innerWidgetDataSource.getData(design, filters, (error, data) => {
+              if (error) {
+                callback(error)
+                reject(error)
+              } else {
+                callback(null, data)
+                resolve(data)
+              }
+            })
+          })
+
+          // Create an abort controller for this task
+          const taskAbortController = new AbortController()
+
+          // Queue the task and handle errors
+          this.queue.add(task, { priority: priority, signal: taskAbortController.signal }).catch((e: any) => {
+            console.log("Task failed", e)
+            callback(e)
+          })
+
+          return taskAbortController
+        },
+
+        /** Get the url to download an image (by id from an image or imagelist column)
+          * Height, if specified, is minimum height needed. May return larger image */
+        getImageUrl: (imageId: string, height?: number): string => {
+          return innerWidgetDataSource.getImageUrl(imageId, height)
+        }
+      }
+
+      if (innerWidgetDataSource.getMapDataSource) {
+        widgetDataSource.getMapDataSource = (design: MapDesign) => {
+          return innerWidgetDataSource.getMapDataSource!(design)
+        }
+      }
+
+      this.widgetDataSources[widgetType + ":" + widgetId + ":" + priority] = widgetDataSource
+    }
+
+    return widgetDataSource
+  }
+
+  cancel() {
+    // Clear the queue
+    this.queue.clear()
+  }
+}
+