@mwater/visualization 5.4.1 → 5.4.3

package/src/richtext/ItemsHtmlConverter.ts

@@ -47,7 +47,7 @@ export default class ItemsHtmlConverter {
   }
 
   // Converts list of items to html
-  convertItemsToHtml(items: any) {
+  convertItemsToHtml(items: HtmlItem[]) {
     let html = ""
 
     for (let item of items || []) {
@@ -66,19 +66,20 @@ export default class ItemsHtmlConverter {
         // Escape HTML
         html += _.escape(itemStr)
       } else if (item.type === "element") {
-        if (!allowedTags[item.tag]) {
+        const element = item as HtmlItemElement
+        if (!allowedTags[element.tag]) {
           // Ignore and do contents
-          html += this.convertItemsToHtml(item.items)
+          html += this.convertItemsToHtml(element.items || [])
           continue
         }
 
         let attrs = ""
         // Add style
-        if (item.style) {
+        if (element.style) {
           attrs += ' style="'
           let first = true
-          for (let key in item.style) {
-            const value = item.style[key]
+          for (let key in element.style) {
+            const value = element.style[key]
             if (!allowedStyles[key]) {
               continue
             }
@@ -97,20 +98,20 @@ export default class ItemsHtmlConverter {
         }
 
         // Add href
-        if (item.href) {
-          attrs += ' href="' + item.href + '"'
+        if (element.href) {
+          attrs += ' href="' + element.href + '"'
         }
 
         // Add target
-        if (item.target) {
-          attrs += ' target="' + _.escape(item.target) + '"'
+        if (element.target) {
+          attrs += ' target="' + _.escape(element.target) + '"'
         }
 
         // Special case for self-closing tags
-        if (["br"].includes(item.tag)) {
-          html += `<${item.tag}${attrs}>`
+        if (["br"].includes(element.tag)) {
+          html += `<${element.tag}${attrs}>`
         } else {
-          html += `<${item.tag}${attrs}>` + this.convertItemsToHtml(item.items) + `</${item.tag}>`
+          html += `<${element.tag}${attrs}>` + this.convertItemsToHtml(element.items || []) + `</${element.tag}>`
         }
       } else {
         html += this.convertSpecialItemToHtml(item)
@@ -123,6 +124,8 @@ export default class ItemsHtmlConverter {
     }
 
     // console.log "createHtml: #{html}"
+    // console.log("convertItemsToHtml: " + JSON.stringify(items, null, 2))
+    // console.log("convertItemsToHtml: " + html)
     return html
   }
 
@@ -168,16 +171,22 @@ export default class ItemsHtmlConverter {
         const nodeElement = node as HTMLElement
         if (nodeElement.style != null) {
           const styleDeclaration = nodeElement.style
-          for (const style of styleDeclaration) {
-            if (!allowedStyles[style as string]) {
+          for (let i = 0; i < styleDeclaration.length; i++) {
+            const style = styleDeclaration[i]
+            if (!allowedStyles[style]) {
               continue
             }
 
-            const value = styleDeclaration[style as any]
+            const value = styleDeclaration.getPropertyValue(style)
             if (value == null || value === "") {
               continue
             }
 
+            // Ignore bootstrap variables in style values
+            if (value.startsWith("var(--bs-")) {
+              continue
+            }
+
             item.style = item.style || {}
             item.style[style] = value
           }
@@ -203,7 +212,12 @@ export default class ItemsHtmlConverter {
           item.target = (node as HTMLLinkElement).target
         }
 
-        items.push(item)
+        // Unwrap pointless span elements that have no style and one child
+        if (tag === "span" && item.style == null && item.items?.length === 1) {
+          items.push(item.items[0])
+        } else {
+          items.push(item)
+        }
 
         // Handle text
       } else if (node.nodeType === 3) {
@@ -218,7 +232,8 @@ export default class ItemsHtmlConverter {
     }
 
     // console.log JSON.stringify(items, null, 2)
-
+    // console.log("convertElemToItems: " + elem.outerHTML)
+    // console.log("convertElemToItems: " + JSON.stringify(items, null, 2))
     return items
   }
 }

package/src/wellknown.ts

@@ -21,7 +21,7 @@ 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,}');
+const tuples: RegExp = new RegExp('^' + numberRegexp.source + '(\\s' + numberRegexp.source + '){1,3}');
 
 /*
  * Parse WKT and return GeoJSON.
@@ -61,12 +61,12 @@ export function parse(input: string): any {
   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;
+    white()
+    let depth: number = 0
+    let rings: any[] = []
+    let stack: any[][] = [rings]
+    let pointer: any[] = rings
+    let elem: string | null
 
     while (elem =
       $(/^(\()/) ||
@@ -74,33 +74,35 @@ export function parse(input: string): any {
       $(/^(,)/) ||
       $(tuples)) {
       if (elem === '(') {
-        stack.push(pointer);
-        pointer = [];
-        stack[stack.length - 1].push(pointer);
-        depth++;
+        stack.push(pointer)
+        pointer = []
+        stack[stack.length - 1].push(pointer)
+        depth++
       } else if (elem === ')') {
         // For the case: Polygon(), ...
-        if (pointer.length === 0) return null;
+        if (pointer.length === 0) return null
 
-        pointer = stack.pop() || [];
+        pointer = stack.pop() || []
         // the stack was empty, input was malformed
-        if (!pointer) return null;
-        depth--;
-        if (depth === 0) break;
+        if (!pointer) return null
+        depth--
+        if (depth === 0) break
       } else if (elem === ',') {
-        pointer = [];
-        stack[stack.length - 1].push(pointer);
+        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));
+        // Split into values and only take first 3 if there are 4 (ZM coordinates)
+        const values = elem.split(/\s/g).map(parseFloat)
+        Array.prototype.push.apply(pointer, values.length === 4 ? values.slice(0, 3) : values)
       } else {
-        return null;
+        return null
       }
-      white();
+      white()
     }
 
-    if (depth !== 0) return null;
+    if (depth !== 0) return null
 
-    return rings;
+    return rings
   }
 
   function coords(): any[] | null {
@@ -115,7 +117,8 @@ export function parse(input: string): any {
         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));
+        const values = pt.split(/\s/g).map(parseFloat)
+        Array.prototype.push.apply(item, values.length === 4 ? values.slice(0, 3) : values);
       }
       white();
     }
@@ -127,7 +130,7 @@ export function parse(input: string): any {
   }
 
   function point(): any | null {
-    if (!$(/^(point(\sz)?)/i)) return null;
+    if (!$(/^(point(\s+zm|\s+z)?)/i)) return null;
     white();
     if (!$(/^(\()/)) return null;
     let c: any[] | null = coords();
@@ -141,7 +144,7 @@ export function parse(input: string): any {
   }
 
   function multipoint(): any | null {
-    if (!$(/^(multipoint(\sz)?)/i)) return null;
+    if (!$(/^(multipoint(\s+zm|\s+z)?)/i)) return null;
     white();
     let newCoordsFormat: string = _!
       .substring(_!.indexOf('(') + 1, _!.length - 1)
@@ -158,7 +161,7 @@ export function parse(input: string): any {
   }
 
   function multilinestring(): any | null {
-    if (!$(/^(multilinestring(\sz)?)/i)) return null;
+    if (!$(/^(multilinestring(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;
@@ -170,7 +173,7 @@ export function parse(input: string): any {
   }
 
   function linestring(): any | null {
-    if (!$(/^(linestring(\sz)?)/i)) return null;
+    if (!$(/^(linestring(\s+zm|\s+z)?)/i)) return null;
     white();
     if (!$(/^(\()/)) return null;
     let c: any[] | null = coords();
@@ -183,7 +186,7 @@ export function parse(input: string): any {
   }
 
   function polygon(): any | null {
-    if (!$(/^(polygon(\sz)?)/i)) return null;
+    if (!$(/^(polygon(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;
@@ -194,7 +197,7 @@ export function parse(input: string): any {
   }
 
   function multipolygon(): any | null {
-    if (!$(/^(multipolygon(\sz)?)/i)) return null;
+    if (!$(/^(multipolygon(\s+zm|\s+z)?)/i)) return null;
     white();
     let c: any[] | null = multicoords();
     if (!c) return null;

package/src/widgets/ImageWidget.ts

@@ -62,7 +62,8 @@ export default class ImageWidget extends Widget {
       onDesignChange: options.onDesignChange,
       width: options.width,
       height: options.height,
-      singleRowTable: options.singleRowTable
+      singleRowTable: options.singleRowTable,
+      translate: options.translate
     })
   }
 
@@ -144,4 +145,12 @@ export default class ImageWidget extends Widget {
 
     return []
   }
+
+  getTranslatableStrings(design: ImageWidgetDesign, schema: Schema): string[] {
+    const strings: string[] = []
+    if (design.caption) {
+      strings.push(design.caption)
+    }
+    return strings
+  }
 }

package/src/widgets/ImageWidgetComponent.ts

@@ -29,6 +29,7 @@ export interface ImageWidgetComponentProps {
   width: number
   height: number
   singleRowTable?: string
+  translate: (input: string) => string
 }
 
 export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidgetComponentProps, { data: any, loading: boolean }> {
@@ -154,9 +155,9 @@ export default class ImageWidgetComponent extends AsyncLoadComponent<ImageWidget
               className: "mwater-visualization-image-widget",
               style: { position: "relative", width: this.props.width, height: this.props.height }
             },
-            captionPosition === "top" ? R("div", { className: "caption" }, this.props.design.caption) : undefined,
+            captionPosition === "top" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined,
             R("div", { className: "image" }, this.renderContent()),
-            captionPosition === "bottom" ? R("div", { className: "caption" }, this.props.design.caption) : undefined
+            captionPosition === "bottom" && this.props.design.caption ? R("div", { className: "caption" }, this.props.translate(this.props.design.caption)) : undefined
           )
     )
   }

package/src/widgets/{MapWidget.ts → MapWidget.tsx}

@@ -1,5 +1,4 @@
 import React from "react"
-const R = React.createElement
 import _ from "lodash"
 import Widget, { CreateViewElementOptions } from "./Widget"
 import DropdownWidgetComponent from "./DropdownWidgetComponent"
@@ -7,6 +6,7 @@ import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent
 import * as MapUtils from "../maps/MapUtils"
 import { DataSource, Schema } from "@mwater/expressions"
 import { WidgetDataSource } from "./WidgetDataSource"
+import { MapDesign } from "../maps/MapDesign"
 
 // Design is the map design specified in maps/Map Design.md
 export default class MapWidget extends Widget {
@@ -24,28 +24,33 @@ export default class MapWidget extends Widget {
   //  height: height in pixels on screen
   //  onRowClick: Called with (tableId, rowId) when item is clicked
   createViewElement(options: CreateViewElementOptions) {
-    return React.createElement(MapWidgetComponent, {
-      schema: options.schema,
-      dataSource: options.dataSource,
-      widgetDataSource: options.widgetDataSource,
-
-      design: options.design,
-      onDesignChange: options.onDesignChange,
-      scope: options.scope,
-      filters: options.filters,
-      onScopeChange: options.onScopeChange,
-      width: options.width,
-      height: options.height,
-      onRowClick: options.onRowClick,
-      refreshKey: options.refreshKey
-    })
+    return <MapWidgetComponent 
+      schema={options.schema}
+      dataSource={options.dataSource}
+      widgetDataSource={options.widgetDataSource}
+      design={options.design}
+      onDesignChange={options.onDesignChange}
+      scope={options.scope}
+      filters={options.filters}
+      onScopeChange={options.onScopeChange}
+      width={options.width}
+      height={options.height}
+      onRowClick={options.onRowClick}
+      refreshKey={options.refreshKey}
+      locale={options.locale}
+      translate={options.translate}
+    />
   }
 
   // Get a list of table ids that can be filtered on
-  getFilterableTables(design: any, schema: Schema) {
+  getFilterableTables(design: MapDesign, schema: Schema) {
     // Get filterable tables
     return MapUtils.getFilterableTables(design, schema)
   }
+
+  getTranslatableStrings(design: MapDesign, schema: Schema): string[] {
+    return MapUtils.getTranslatableStrings(design, schema)
+  }
 }
 
 interface MapWidgetComponentProps {
@@ -54,8 +59,7 @@ interface MapWidgetComponentProps {
   /** Data source to use */
   dataSource: DataSource
   widgetDataSource: WidgetDataSource
-  /** See Map Design.md */
-  design: any
+  design: MapDesign
   /** Called with new design.  null/undefined for readonly */
   onDesignChange?: any
   width?: number
@@ -69,6 +73,10 @@ interface MapWidgetComponentProps {
   onRowClick?: any
   /** TODO: implement refreshing */
   refreshKey?: any
+  /** Locale to use. Overrides map design locale */
+  locale: string
+  /** Translate function to use for display */
+  translate: (input: string) => string
 }
 
 interface MapWidgetComponentState {
@@ -115,83 +123,69 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
     const MapDesignerComponent = require("../maps/MapDesignerComponent").default
 
     // Create editor
-    const editor = React.createElement(MapDesignerComponent, {
-      schema: this.props.schema,
-      dataSource: this.props.dataSource,
-      design: this.state.editDesign,
-      onDesignChange: this.handleEditDesignChange,
-      filters: this.props.filters
-    })
+    const editor = <MapDesignerComponent
+      schema={this.props.schema}
+      dataSource={this.props.dataSource}
+      design={this.state.editDesign}
+      onDesignChange={this.handleEditDesignChange}
+      filters={this.props.filters}
+    />
 
     // Create map (maxing out at half of width of screen)
-    const width = Math.min(document.body.clientWidth / 2, this.props.width)
-    const height = (this.props.height * width) / this.props.width
+    const width = Math.min(document.body.clientWidth / 2, this.props.width || 0)
+    const height = ((this.props.height || 0) * width) / (this.props.width || 1)
     const chart = this.renderContent(this.state.editDesign, this.handleEditDesignChange, width, height)
 
-    const content = R(
-      "div",
-      { style: { height: "100%", width: "100%" } },
-      R(
-        "div",
-        {
-          style: {
-            position: "absolute",
-            left: 0,
-            top: 0,
-            border: "solid 2px #EEE",
-            borderRadius: 8,
-            padding: 10,
-            width: width + 20,
-            height: height + 20
-          }
-        },
-        chart
-      ),
-      R(
-        "div",
-        { style: { width: "100%", height: "100%", paddingLeft: width + 40 } },
-        R(
-          "div",
-          {
-            style: { width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" }
-          },
-          editor
-        )
-      )
-    )
-
-    return React.createElement(
-      ModalWindowComponent,
-      {
-        isOpen: true,
-        onRequestClose: this.handleEndEditing
-      },
-      content
-    )
+    const content = <div style={{ height: "100%", width: "100%" }}>
+      <div style={{
+        position: "absolute",
+        left: 0,
+        top: 0,
+        border: "solid 2px #EEE",
+        borderRadius: 8,
+        padding: 10,
+        width: width + 20,
+        height: height + 20
+      }}>
+        {chart}
+      </div>
+      <div style={{ width: "100%", height: "100%", paddingLeft: width + 40 }}>
+        <div style={{ width: "100%", height: "100%", overflowY: "auto", paddingLeft: 20, borderLeft: "solid 3px #AAA" }}>
+          {editor}
+        </div>
+      </div>
+    </div>
+
+    return <ModalWindowComponent
+      isOpen={true}
+      onRequestClose={this.handleEndEditing}
+    >
+      {content}
+    </ModalWindowComponent>
   }
 
   renderContent(design: any, onDesignChange: any, width: any, height: any) {
     // Require here to prevent server require problems
     const { MapViewComponent } = require("../maps/MapViewComponent")
 
-    return R(
-      "div",
-      { style: { width, height, padding: 10 } },
-      React.createElement(MapViewComponent, {
-        schema: this.props.schema,
-        design,
-        dataSource: this.props.dataSource,
-        mapDataSource: this.props.widgetDataSource.getMapDataSource!(design),
-        onDesignChange,
-        scope: this.props.scope,
-        onScopeChange: this.props.onScopeChange,
-        extraFilters: this.props.filters,
-        width: width - 20,
-        height: height - 20,
-        scrollWheelZoom: false, // Prevent accidental zooming
-        onRowClick: this.props.onRowClick
-      })
-    )
+    return <div style={{ width, height, padding: 10 }}>
+      <MapViewComponent
+        schema={this.props.schema}
+        design={design}
+        dataSource={this.props.dataSource}
+        mapDataSource={this.props.widgetDataSource.getMapDataSource!(design)}
+        onDesignChange={onDesignChange}
+        scope={this.props.scope}
+        onScopeChange={this.props.onScopeChange}
+        extraFilters={this.props.filters}
+        width={width - 20}
+        height={height - 20}
+        scrollWheelZoom={false} // Prevent accidental zooming
+        onRowClick={this.props.onRowClick}
+        locale={this.props.locale}
+        translate={this.props.translate}
+      />
+    </div>
   }
 
   render() {
@@ -203,20 +197,15 @@ class MapWidgetComponent extends React.Component<MapWidgetComponentProps, MapWid
     const handleDesignChange = (d: any) => this.setState({ transientDesign: d })
 
     // Wrap in a simple widget
-    return R(
-      "div",
-      null,
-      this.props.onDesignChange != null ? this.renderEditor() : undefined,
-      // Use transient design (as it may be affected by toggling layers)
-      React.createElement(
-        DropdownWidgetComponent,
-        {
-          width: this.props.width,
-          height: this.props.height,
-          dropdownItems
-        },
-        this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)
-      )
-    )
+    return <div>
+      {this.props.onDesignChange != null ? this.renderEditor() : undefined}
+      <DropdownWidgetComponent
+        width={this.props.width}
+        height={this.props.height}
+        dropdownItems={dropdownItems}
+      >
+        {this.renderContent(this.state.transientDesign, handleDesignChange, this.props.width, this.props.height)}
+      </DropdownWidgetComponent>
+    </div>
   }
 }

package/src/widgets/MarkdownWidget.ts

@@ -7,6 +7,9 @@ import DropdownWidgetComponent from "./DropdownWidgetComponent"
 import Markdown from "markdown-it"
 import ModalWindowComponent from "@mwater/react-library/lib/ModalWindowComponent"
 
+/** Widget for displaying markdown. Deprecated. Use TextWidget instead. 
+ * @deprecated
+*/
 export default class MarkdownWidget extends Widget {
   // Creates a React element that is a view of the widget
   // options: