@mwater/visualization 5.2.0 → 5.3.0

package/src/dashboards/ServerDashboardDataSource.ts

@@ -1,5 +1,4 @@
 import _ from "lodash"
-import $ from "jquery"
 import { DataSource, Expr, injectTableAlias } from "@mwater/expressions"
 import { JsonQLFilter } from "../JsonQLFilter"
 import querystring from "querystring"
@@ -104,18 +103,23 @@ class ServerQuickfilterDataSource implements QuickfiltersDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 }
@@ -158,18 +162,23 @@ class ServerWidgetDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    return $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 
@@ -242,18 +251,23 @@ class ServerWidgetMapDataSource implements MapDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
       headers
     })
-      .done((data: any) => {
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
         return callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        return callback(error)
       })
   }
 
@@ -491,18 +505,23 @@ class ServerWidgetLayerPopupWidgetDataSource implements WidgetDataSource {
       headers["Cache-Control"] = `max-age=${seconds}`
     }
 
-    $.ajax({
-      dataType: "json",
+    fetch(url, {
       method: "GET",
-      url,
-      headers
+      headers: headers
     })
-      .done((data: any) => {
-        return callback(null, data)
+      .then(async response => {
+        if (!response.ok) {
+          const text = await response.text()
+          throw new Error(text)
+        }
+        return response.json()
+      })
+      .then(data => {
+        callback(null, data)
       })
-      .fail((xhr: any) => {
-        console.log(xhr.responseText)
-        return callback(new Error(xhr.responseText))
+      .catch(error => {
+        console.log(error.message)
+        callback(error)
       })
   }
 

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()
+  }
+}
+