@mwater/visualization 5.2.0 → 5.3.1

package/src/wellknown.ts

@@ -0,0 +1,286 @@
+/*
+
+https://github.com/mapbox/wellknown
+
+Copyright (c) 2016, Mapbox
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+*/
+
+
+const numberRegexp: RegExp = /[-+]?([0-9]*\.[0-9]+|[0-9]+)([eE][-+]?[0-9]+)?/;
+// Matches sequences like '100 100' or '100 100 100'.
+const tuples: RegExp = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,}');
+
+/*
+ * Parse WKT and return GeoJSON.
+ *
+ * @param {string} _ A WKT geometry
+ * @return {?Object} A GeoJSON geometry object
+ */
+export function parse(input: string): any {
+  let parts: string[] = input.split(';');
+  let _: string | undefined = parts.pop();
+  let srid: string = (parts.shift() || '').split('=').pop() || '';
+
+  let i: number = 0;
+
+  function $(re: RegExp): string | null {
+    let match: RegExpMatchArray | null = _!.substring(i).match(re);
+    if (!match) return null;
+    else {
+      i += match[0].length;
+      return match[0];
+    }
+  }
+
+  function crs(obj: any): any {
+    if (obj && srid.match(/\d+/)) {
+      obj.crs = {
+        type: 'name',
+        properties: {
+          name: 'urn:ogc:def:crs:EPSG::' + srid
+        }
+      };
+    }
+
+    return obj;
+  }
+
+  function white(): void { $(/^\s*/); }
+
+  function multicoords(): any[] | null {
+    white();
+    let depth: number = 0;
+    let rings: any[] = [];
+    let stack: any[][] = [rings];
+    let pointer: any[] = rings;
+    let elem: string | null;
+
+    while (elem =
+      $(/^(\()/) ||
+      $(/^(\))/) ||
+      $(/^(,)/) ||
+      $(tuples)) {
+      if (elem === '(') {
+        stack.push(pointer);
+        pointer = [];
+        stack[stack.length - 1].push(pointer);
+        depth++;
+      } else if (elem === ')') {
+        // For the case: Polygon(), ...
+        if (pointer.length === 0) return null;
+
+        pointer = stack.pop() || [];
+        // the stack was empty, input was malformed
+        if (!pointer) return null;
+        depth--;
+        if (depth === 0) break;
+      } else if (elem === ',') {
+        pointer = [];
+        stack[stack.length - 1].push(pointer);
+      } else if (!elem.split(/\s/g).some(s => isNaN(s as any))) {
+        Array.prototype.push.apply(pointer, elem.split(/\s/g).map(parseFloat));
+      } else {
+        return null;
+      }
+      white();
+    }
+
+    if (depth !== 0) return null;
+
+    return rings;
+  }
+
+  function coords(): any[] | null {
+    let list: any[] = [];
+    let item: any[] | undefined;
+    let pt: string | null;
+    while (pt =
+      $(tuples) ||
+      $(/^(,)/)) {
+      if (pt === ',') {
+        list.push(item);
+        item = [];
+      } else if (!pt.split(/\s/g).some(s => isNaN(s as any))) {
+        if (!item) item = [];
+        Array.prototype.push.apply(item, pt.split(/\s/g).map(parseFloat));
+      }
+      white();
+    }
+
+    if (item) list.push(item);
+    else return null;
+
+    return list.length ? list : null;
+  }
+
+  function point(): any | null {
+    if (!$(/^(point(\sz)?)/i)) return null;
+    white();
+    if (!$(/^(\()/)) return null;
+    let c: any[] | null = coords();
+    if (!c) return null;
+    white();
+    if (!$(/^(\))/)) return null;
+    return {
+      type: 'Point',
+      coordinates: c[0]
+    };
+  }
+
+  function multipoint(): any | null {
+    if (!$(/^(multipoint(\sz)?)/i)) return null;
+    white();
+    let newCoordsFormat: string = _!
+      .substring(_!.indexOf('(') + 1, _!.length - 1)
+      .replace(/\(/g, '')
+      .replace(/\)/g, '');
+    _ = 'MULTIPOINT (' + newCoordsFormat + ')';
+    let c: any[] | null = multicoords();
+    if (!c) return null;
+    white();
+    return {
+      type: 'MultiPoint',
+      coordinates: c
+    };
+  }
+
+  function multilinestring(): any | null {
+    if (!$(/^(multilinestring(\sz)?)/i)) return null;
+    white();
+    let c: any[] | null = multicoords();
+    if (!c) return null;
+    white();
+    return {
+      type: 'MultiLineString',
+      coordinates: c
+    };
+  }
+
+  function linestring(): any | null {
+    if (!$(/^(linestring(\sz)?)/i)) return null;
+    white();
+    if (!$(/^(\()/)) return null;
+    let c: any[] | null = coords();
+    if (!c) return null;
+    if (!$(/^(\))/)) return null;
+    return {
+      type: 'LineString',
+      coordinates: c
+    };
+  }
+
+  function polygon(): any | null {
+    if (!$(/^(polygon(\sz)?)/i)) return null;
+    white();
+    let c: any[] | null = multicoords();
+    if (!c) return null;
+    return {
+      type: 'Polygon',
+      coordinates: c
+    };
+  }
+
+  function multipolygon(): any | null {
+    if (!$(/^(multipolygon(\sz)?)/i)) return null;
+    white();
+    let c: any[] | null = multicoords();
+    if (!c) return null;
+    return {
+      type: 'MultiPolygon',
+      coordinates: c
+    };
+  }
+
+  function geometrycollection(): any | null {
+    let geometries: any[] = [];
+    let geometry: any | null;
+
+    if (!$(/^(geometrycollection)/i)) return null;
+    white();
+
+    if (!$(/^(\()/)) return null;
+    while (geometry = root()) {
+      geometries.push(geometry);
+      white();
+      $(/^(,)/);
+      white();
+    }
+    if (!$(/^(\))/)) return null;
+
+    return {
+      type: 'GeometryCollection',
+      geometries: geometries
+    };
+  }
+
+  function root(): any | null {
+    return point() ||
+      linestring() ||
+      polygon() ||
+      multipoint() ||
+      multilinestring() ||
+      multipolygon() ||
+      geometrycollection();
+  }
+
+  return crs(root());
+}
+
+/**
+ * Stringifies a GeoJSON object into WKT
+ */
+export function stringify(gj: any): string {
+  if (gj.type === 'Feature') {
+    gj = gj.geometry;
+  }
+
+  function pairWKT(c: any[]): string {
+    return c.join(' ');
+  }
+
+  function ringWKT(r: any[]): string {
+    return r.map(pairWKT).join(', ');
+  }
+
+  function ringsWKT(r: any[]): string {
+    return r.map(ringWKT).map(wrapParens).join(', ');
+  }
+
+  function multiRingsWKT(r: any[]): string {
+    return r.map(ringsWKT).map(wrapParens).join(', ');
+  }
+
+  function wrapParens(s: string): string { return '(' + s + ')'; }
+
+  switch (gj.type) {
+    case 'Point':
+      return 'POINT (' + pairWKT(gj.coordinates) + ')';
+    case 'LineString':
+      return 'LINESTRING (' + ringWKT(gj.coordinates) + ')';
+    case 'Polygon':
+      return 'POLYGON (' + ringsWKT(gj.coordinates) + ')';
+    case 'MultiPoint':
+      return 'MULTIPOINT (' + ringWKT(gj.coordinates) + ')';
+    case 'MultiPolygon':
+      return 'MULTIPOLYGON (' + multiRingsWKT(gj.coordinates) + ')';
+    case 'MultiLineString':
+      return 'MULTILINESTRING (' + ringsWKT(gj.coordinates) + ')';
+    case 'GeometryCollection':
+      return 'GEOMETRYCOLLECTION (' + gj.geometries.map(stringify).join(', ') + ')';
+    default:
+      throw new Error('stringify requires a valid GeoJSON Feature or geometry object as input');
+  }
+}

package/src/widgets/DropdownWidgetComponent.tsx

@@ -0,0 +1,75 @@
+import React, { ReactNode, useRef, useCallback } from "react"
+
+export interface DropdownWidgetComponentProps {
+  /** Width specification */
+  width?: any
+  /** Height specification */
+  height?: any
+  dropdownItems: { label: ReactNode; onClick: () => void }[]
+  children?: ReactNode
+}
+
+// Widget wrapper that adds a dropdown menu in a gear floating
+const DropdownWidgetComponent = (props: DropdownWidgetComponentProps) => {
+  const { width, height, dropdownItems, children } = props
+  const dropdownRef = useRef<HTMLDivElement>(null)
+
+  const renderDropdownItem = (item: { label: ReactNode; onClick: () => void }, i: number) => {
+    return (
+      <li key={`${i}`}>
+        <a className="dropdown-item" onClick={item.onClick}>
+          {item.label}
+        </a>
+      </li>
+    )
+  }
+
+  const renderDropdown = () => {
+    if (dropdownItems.length === 0) {
+      return null
+    }
+
+    const dropdownStyle: React.CSSProperties = {
+      position: "absolute",
+      right: 3,
+      top: 3,
+      cursor: "pointer",
+      zIndex: 1029
+    }
+
+    return (
+      <div style={dropdownStyle} ref={dropdownRef}>
+        <div style={dropdownStyle} data-bs-toggle="dropdown">
+          <div className="mwater-visualization-simple-widget-gear-button">
+            <span className="fas fa-cog" />
+          </div>
+        </div>
+        <ul className="dropdown-menu dropdown-menu-end" style={{ top: 25 }}>
+          {dropdownItems.map(renderDropdownItem)}
+        </ul>
+      </div>
+    )
+  }
+
+  const closeMenu = useCallback(() => {
+    if (dropdownRef.current) {
+      const dropdownToggle = dropdownRef.current.querySelector('[data-bs-toggle="dropdown"]')
+      if (dropdownToggle) {
+        dropdownToggle.parentElement?.classList.remove('open')
+      }
+    }
+  }, [])
+
+  return (
+    <div
+      className="mwater-visualization-simple-widget"
+      onMouseLeave={closeMenu}
+      style={{ width, height }}
+    >
+      {children}
+      {renderDropdown()}
+    </div>
+  )
+}
+
+export default DropdownWidgetComponent

package/src/widgets/MapWidget.ts

@@ -36,7 +36,8 @@ export default class MapWidget extends Widget {
       onScopeChange: options.onScopeChange,
       width: options.width,
       height: options.height,
-      onRowClick: options.onRowClick
+      onRowClick: options.onRowClick,
+      refreshKey: options.refreshKey
     })
   }
 
@@ -66,6 +67,8 @@ interface MapWidgetComponentProps {
   /** called with (scope) as a scope to apply to self and filter to apply to other widgets. See WidgetScoper for details */
   onScopeChange?: any
   onRowClick?: any
+  /** TODO: implement refreshing */
+  refreshKey?: any
 }
 
 interface MapWidgetComponentState {
@@ -178,7 +181,7 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
         schema: this.props.schema,
         design,
         dataSource: this.props.dataSource,
-        mapDataSource: this.props.widgetDataSource.getMapDataSource(design),
+        mapDataSource: this.props.widgetDataSource.getMapDataSource!(design),
         onDesignChange,
         scope: this.props.scope,
         onScopeChange: this.props.onScopeChange,

package/src/widgets/TOCWidget.ts

@@ -155,6 +155,7 @@ class TOCWidgetViewComponent extends React.Component {
   }
 
   handleEntryClick = (tocEntry: any) => {
+    debugger
     return this.props.onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id)
   }
 
@@ -228,7 +229,7 @@ class TOCWidgetViewComponent extends React.Component {
       }),
 
       // Add placeholder if none and editable
-      this.props.onDesignChange && this.props.tocEntries.length === 0
+      this.props.onDesignChange && (this.props.tocEntries || []).length === 0
         ? R(
             "div",
             { className: "text-muted" },

package/src/widgets/Widget.ts

@@ -39,6 +39,9 @@ export interface CreateViewElementOptions {
 
   /** called with (widgetId, tocEntryId) to scroll to TOC entry */
   onScrollToTOCEntry?: (widgetId: string, tocEntryId: string) => void
+
+  /** A key that changes when the widget should be refreshed */
+  refreshKey?: any
 }
 
 export default class Widget {

package/src/widgets/WidgetDataSource.ts

@@ -11,8 +11,10 @@ export interface WidgetDataSource {
    *  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
    *  callback: (error, data)
+   * 
+   * Can be aborted by cancelling the AbortController
    */
-  getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): void
+  getData(design: any, filters: JsonQLFilter[], callback: (error: any, data?: any) => void): AbortController | void | undefined
 
   /** For map widgets, the following is required */
   getMapDataSource?(design: MapDesign): MapDataSource

package/src/widgets/charts/Chart.ts

@@ -119,7 +119,7 @@ export default class Chart {
   //   widgetDataSource: widget data source to use
   //   filters: array of filters to apply. Each is { table: table id, jsonql: jsonql condition with {alias} for tableAlias. Use injectAlias to correct
   // Returns an empty list by default
-  createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): { label: ReactNode, icon?: string, onClick: () => void }[] {
+  createDropdownItems(design: any, schema: Schema, widgetDataSource: WidgetDataSource, filters: any): { label: ReactNode, onClick: () => void }[] {
     return []
   }
 

package/src/widgets/charts/ChartViewComponent.ts

@@ -35,6 +35,9 @@ export interface ChartViewComponentProps {
   onScopeChange?: (scope: WidgetScope | null) => void
 
   onRowClick?: (tableId: string, rowId: any) => void
+
+  /** A key that changes when the widget should be refreshed */
+  refreshKey?: any
 }
 
 interface ChartViewComponentState {
@@ -54,6 +57,9 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
   /** Ordinal of update (0, 1, 2...) to ensure using latest */
   updateSeq: number
 
+  /** Abort controller for the current data load */
+  abortController: AbortController | undefined
+
   constructor(props: ChartViewComponentProps) {
     super(props)
 
@@ -77,7 +83,8 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     if (
       !_.isEqual(prevProps.design, this.props.design) ||
       !_.isEqual(prevProps.filters, this.props.filters) ||
-      this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry
+      this.props.dataSource.getCacheExpiry() !== this.state.cacheExpiry ||
+      prevProps.refreshKey !== this.props.refreshKey
     ) {
       // Save new cache expiry
       this.setState({ cacheExpiry: this.props.dataSource.getCacheExpiry() })
@@ -97,6 +104,9 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     }
 
     this.updateSeq += 1
+    if (this.abortController) {
+      this.abortController.abort("Aborting previous data load")
+    }
 
     // Set loading data after interval to prevent unnecessary refresh
     const dataLoadingTimeout = setTimeout(() => {
@@ -106,15 +116,18 @@ export default class ChartViewComponent extends React.Component<ChartViewCompone
     // Store updateSeq to check if latest
     const loadingUpdateSeq = this.updateSeq
 
-    this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
+    this.abortController = this.props.widgetDataSource.getData(design, this.props.filters || [], (error, data) => {
       // Prevent setting data loading if ready
       clearTimeout(dataLoadingTimeout)
 
       // Only update if latest
       if (loadingUpdateSeq == this.updateSeq) {
+        // Clear the abort controller
+        this.abortController = undefined
+
         this.setState({ dataLoading: false, dataError: error, data, validDesign: design })
       }
-    })
+    }) ?? undefined
   }
 
   renderSpinner() {