@mwater/visualization 5.2.0 → 5.3.0

package/src/datagrids/ServerDatagridDataSource.ts

@@ -1,8 +1,9 @@
-import $ from "jquery"
-import querystring from "querystring"
 import DatagridDataSource from "./DatagridDataSource"
 import compressJson from "../compressJson"
-import { DatagridDesign } from ".."
+import querystring from "querystring"
+import { DatagridDesign, JsonQLFilter } from ".."
+import { QuickfiltersDataSource } from "../quickfilter/QuickfiltersDataSource"
+import { Expr, Row } from "@mwater/expressions"
 
 export interface ServerDatagridDataSourceOptions {
   /** API url to use for talking to mWater server */
@@ -38,42 +39,86 @@ export default class ServerDatagridDataSource implements DatagridDataSource {
   // Get the data that the widget needs. The widget should implement getData method (see above) to get the data from the server
   //  design: design of the widget. Ignored in the case of server-side rendering
   //  filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
-  getRows(design: DatagridDesign, offset: any, limit: any, filters: any, callback: any) {
-    const query = {
+  async getRows(
+    design: DatagridDesign,
+    offset: number,
+    limit: number,
+    filters: JsonQLFilter[] | undefined,
+    callback: (error: any, rows?: Row[]) => void
+  ) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
       rev: this.options.rev,
       offset,
       limit
     }
 
-    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/data?` + querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    const filtersJson = JSON.stringify(filters)
+    const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/data`
+
+    try {
+      let response: Response
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        response = await fetch(baseUrl + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = compressJson(filters)
+        const url = baseUrl + '?' + querystring.stringify(query)
+        response = await fetch(url)
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const data = await response.json()
+      callback(null, data)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
 
-  countRows(design: DatagridDesign, filters: any, callback: any) {
-    const query = {
+  async countRows(design: DatagridDesign, filters: any, callback: any) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
-      rev: this.options.rev,
+      rev: this.options.rev
     }
 
-    const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary?` + querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data?.[0]?.cnt)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    const filtersJson = JSON.stringify(filters)
+    const baseUrl = this.options.apiUrl + `datagrids/${this.options.datagridId}/summary`
+
+    try {
+      let response: Response
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        response = await fetch(baseUrl + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = compressJson(filters)
+        const url = baseUrl + '?' + querystring.stringify(query)
+        response = await fetch(url)
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+      const data = await response.json()
+      callback(null, data?.[0]?.cnt)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
 
   getQuickfiltersDataSource() {
@@ -98,7 +143,7 @@ interface ServerQuickfilterDataSourceOptions {
   rev?: number
 }
 
-class ServerQuickfilterDataSource {
+class ServerQuickfilterDataSource implements QuickfiltersDataSource {
   options: ServerQuickfilterDataSourceOptions
   // options:
   //   apiUrl: API url to use for talking to mWater server
@@ -111,26 +156,44 @@ class ServerQuickfilterDataSource {
   }
 
   // Gets the values of the quickfilter at index
-  getValues(index: any, expr: any, filters: any, offset: any, limit: any, callback: any) {
-    const query = {
+  async getValues(index: number, expr: Expr, filters: JsonQLFilter[], offset: number | null, limit: number, callback: (error: any, values?: any[]) => void) {
+    const query: Record<string, any> = {
       client: this.options.client,
       share: this.options.share,
-      filters: compressJson(filters),
-      offset,
+      offset: offset ?? 0,
       limit,
       rev: this.options.rev
     }
 
-    const url =
-      this.options.apiUrl +
-      `datagrids/${this.options.datagridId}/quickfilters/${index}/values?` +
-      querystring.stringify(query)
-
-    return $.getJSON(url, (data: any) => {
-      return callback(null, data)
-    }).fail((xhr: any) => {
-      console.log(xhr.responseText)
-      return callback(new Error(xhr.responseText))
-    })
+    try {
+      let response: Response
+
+      const url = this.options.apiUrl + `datagrids/${this.options.datagridId}/quickfilters/${index}/values`
+
+      const filtersJson = JSON.stringify(filters)
+
+      // If the filters are too large, we need to send them in the body
+      if (filtersJson.length > 5000) {
+        query.filters = compressJson(filters)
+        response = await fetch(url + '?' + querystring.stringify(query), {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ filters: compressJson(filters) }),
+        })
+      } else {
+        query.filters = filtersJson
+        response = await fetch(url + '?' + querystring.stringify(query))
+      }
+
+      if (!response.ok) {
+        throw new Error(`HTTP error! status: ${response.status}`)
+      }
+
+      const data = await response.json()
+      callback(null, data)
+    } catch (error) {
+      console.error(error)
+      callback(error)
+    }
   }
-}
+}

package/src/demo.ts

@@ -42,14 +42,14 @@ $(function () {
       "div",
       { className: "container-fluid", style: { height: "100%", paddingLeft: 0, paddingRight: 0 } },
       R("style", null, "html, body, #main { height: 100% }"),
-      R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+      R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
+      //R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
+      // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       // R(RichTextPane)
       // R(MWaterMapPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1)})
       // R(TestPane, apiUrl: "https://api.mwater.co/v3/")
       // R(MWaterDashboardPane, apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "a855eb0587d845d3ac27aed03c463976", share: "817c76088c7649ec8cc0b8193e547a09")
       // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "f99f206ddd4442a981761b8342c58058"})
-      // R(MWaterDashboardPane, {apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1), dashboardId: "38d803820a7a4bf5a1d5ef19cf8c64f3"})
-      // R(MWaterDirectDashboardPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       //R(MWaterDirectDashboardPane, { apiUrl: "http://localhost:1234/v3/", client: window.location.hash.substr(1) })
       //R(MWaterDatagridPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })
       // R(MWaterDirectMapPane, { apiUrl: "https://api.mwater.co/v3/", client: window.location.hash.substr(1) })

package/src/index.css

@@ -1,3 +1,8 @@
+/*
+Lato, Lora, Inter, Merriweather, Roboto
+*/
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Lora:ital,wght@0,400..700;1,400..700&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
 /** Plain link with cursor pointer. Can be span or a */
 .link-plain {
   color: var(--bs-primary);

package/src/index.ts

@@ -41,6 +41,7 @@ export { default as MWaterContextComponent } from "./MWaterContextComponent"
 
 export { default as mWaterLoader } from "./mWaterLoader"
 
+export { WidgetDataSource } from "./widgets/WidgetDataSource"
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource"
 
 import "leaflet/dist/leaflet.css"
@@ -50,7 +51,6 @@ import "./layouts/decorated-block.css"
 import "react-datepicker/dist/react-datepicker.css"
 import "billboard.js/dist/billboard.css"
 import "./index.css"
-import "./layout-styles.css"
 
 export { setMapTilerApiKey } from "./maps/vectorMaps"
 

package/src/layouts/LayoutManager.ts

@@ -1,47 +1,56 @@
 import { ReactElement, ReactNode } from "react"
-import { BlocksLayoutOptions } from "../dashboards/layoutOptions"
+import { BlocksLayoutOptions, DashboardTheme } from "../dashboards/layoutOptions"
 
-/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
-export default class LayoutManager {
-  /** Renders the layout as a react element */
-  renderLayout(options: {
-    /** width of layout */
-    width?: number
+/** Options for rendering a widget */
+export interface RenderWidgetOptions {
+  id: string
+  type: string
+
+  design: any
+  onDesignChange?: (design: any) => void
+
+  width: number
+
+  /** height of widget. If not specified, is auto height */
+  height?: number
+
+  /** Priority of widget. Higher priority widgets are rendered first */
+  priority?: number
+}
+
+export interface RenderLayoutOptions {
+  /** width of layout */
+  width?: number
 
-    /** opaque items object that layout manager understands */
-    items: any
+  /** opaque items object that layout manager understands */
+  items: any
 
-    /** Called when items changes */
-    onItemsChange?: (items: any) => void
+  /** Called when items changes */
+  onItemsChange?: (items: any) => void
 
-    /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
-    renderWidget: (options: {
-      id: string
-      type: string
-      design: any
-      onDesignChange: (design: any) => void
-      width: number
-      height: number
-    }) => ReactElement
+  /** called with ({ id:, type:, design:, onDesignChange:, width:, height:  }) */
+  renderWidget: (options: RenderWidgetOptions) => ReactElement
 
-    /** style to use for layout. null for default */
-    style: string | null
+  /** layout options to use */
+  layoutOptions: BlocksLayoutOptions
 
-    /** layout options to use */
-    layoutOptions: BlocksLayoutOptions | null
+  /** true to disable maps */
+  disableMaps?: boolean
 
-    /** true to disable maps */
-    disableMaps?: boolean
+  /** clipboard contents */
+  clipboard?: any
 
-    /** clipboard contents */
-    clipboard: any
+  /** called when clipboard is changed */
+  onClipboardChange?: (clipboard: any) => void
 
-    /** called when clipboard is changed */
-    onClipboardChange: (clipboard: any) => void
+  /** message to display if clipboard can't be pasted into current dashboard */
+  cantPasteMessage?: string
+}
 
-    /** message to display if clipboard can't be pasted into current dashboard */
-    cantPasteMessage: string
-  }): ReactNode {
+/** Responsible for laying out items, rendering widgets and holding them in a data structure that is layout manager specific */
+export default class LayoutManager {
+  /** Renders the layout as a react element */
+  renderLayout(options: RenderLayoutOptions): ReactNode {
     return null
   }
 
@@ -61,19 +70,12 @@ export default class LayoutManager {
   }
 
   static createLayoutManager(type: string): LayoutManager {
-    // Default is old grid type
-    type = type || "grid"
+    type = type || "blocks"
 
     switch (type) {
-      case "grid": // Old one
-        var GridLayoutManager = require("./grid/GridLayoutManager").default
-        return new GridLayoutManager()
-        break
-
-      case "blocks": // New one
+      case "blocks": 
         var BlocksLayoutManager = require("./blocks/BlocksLayoutManager").default
         return new BlocksLayoutManager()
-        break
 
       default:
         throw new Error(`Unknown layout manager type ${type}`)