@mwater/visualization 5.4.1 → 5.4.2

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:

package/src/widgets/TOCWidget.tsx

@@ -0,0 +1,281 @@
+import React, { useState } from "react"
+import _ from "lodash"
+import * as ui from "@mwater/react-library/lib/bootstrap"
+import Widget, { CreateViewElementOptions, TOCEntry } from "./Widget"
+import DropdownWidgetComponent from "./DropdownWidgetComponent"
+import ModalPopupComponent from "@mwater/react-library/lib/ModalPopupComponent"
+import produce from "immer"
+import { Schema } from "@mwater/expressions"
+
+export interface TOCWidgetDesign {
+  /** Header text. Defaults to blank */
+  header?: string
+  /** Border weight. Defaults to 0=None. 1=light, 2=medium, 3=heavy */
+  borderWeight?: number
+  /** True/false for prepending numbering to entries (e.g. 3.4.1) */
+  numbering?: boolean
+}
+
+/**
+ * Table of contents widget that displays the h1, h2, etc entries from all text fields in one widget
+ */
+export default class TOCWidget extends Widget {
+  /** Creates a React element that is a view of the widget */
+  createViewElement(options: CreateViewElementOptions) {
+    return <TOCWidgetComponent
+      design={options.design}
+      onDesignChange={options.onDesignChange ?? undefined}
+      width={options.width}
+      height={options.height}
+      tocEntries={options.tocEntries}
+      onScrollToTOCEntry={options.onScrollToTOCEntry}
+      translate={options.translate}
+    />
+  }
+
+  // Determine if widget is auto-height, which means that a vertical height is not required.
+  isAutoHeight() {
+    return true
+  }
+
+  getTranslatableStrings(design: TOCWidgetDesign, schema: Schema): string[] {
+    const strings: string[] = []
+    if (design.header) {
+      strings.push(design.header)
+    }
+    return strings
+  }
+}
+
+interface TOCWidgetComponentProps {
+  design: TOCWidgetDesign
+  /** Called with new design. null/undefined for readonly */
+  onDesignChange?: (design: TOCWidgetDesign) => void
+  width?: number
+  height?: number
+  tocEntries?: TOCEntry[]
+  onScrollToTOCEntry?: (widgetId: string, id: any) => void
+  translate: (input: string) => string
+}
+
+function TOCWidgetComponent(props: TOCWidgetComponentProps) {
+  const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props
+  const [editing, setEditing] = useState(false)
+
+  const handleStartEditing = () => {
+    setEditing(true)
+  }
+
+  const handleEndEditing = () => {
+    setEditing(false)
+  }
+
+  const renderEditor = () => {
+    if (!editing) {
+      return null
+    }
+
+    // Create editor
+    const editor = <TOCWidgetDesignerComponent
+      design={design}
+      onDesignChange={onDesignChange!}
+    />
+
+    return <ModalPopupComponent
+      showCloseX={true}
+      header={T`Table of Contents Options`}
+      onClose={handleEndEditing}
+    >
+      {editor}
+    </ModalPopupComponent>
+  }
+
+  const renderContent = () => {
+    return <TOCWidgetViewComponent
+      design={design}
+      onDesignChange={onDesignChange}
+      width={width}
+      height={height}
+      tocEntries={tocEntries}
+      onScrollToTOCEntry={onScrollToTOCEntry}
+      translate={translate}
+    />
+  }
+
+  const dropdownItems = []
+  if (onDesignChange != null) {
+    dropdownItems.push({ label: T`Edit`, icon: "pencil", onClick: handleStartEditing })
+  }
+
+  // Wrap in a simple widget
+  return <div onDoubleClick={handleStartEditing}>
+    {onDesignChange != null ? renderEditor() : undefined}
+    <DropdownWidgetComponent
+      width={width}
+      height={height}
+      dropdownItems={dropdownItems}
+    >
+      {renderContent()}
+    </DropdownWidgetComponent>
+  </div>
+}
+
+interface TOCWidgetViewComponentProps {
+  design: TOCWidgetDesign
+  onDesignChange?: (design: TOCWidgetDesign) => void
+  width?: number
+  height?: number
+  tocEntries?: TOCEntry[]
+  onScrollToTOCEntry?: (widgetId: string, id: any) => void
+  translate: (input: string) => string
+}
+
+// Displays the contents of the widget
+function TOCWidgetViewComponent(props: TOCWidgetViewComponentProps) {
+  const { design, onDesignChange, width, height, tocEntries, onScrollToTOCEntry, translate } = props
+
+  const handleEntryClick = (tocEntry: TOCEntry) => {
+    return onScrollToTOCEntry?.(tocEntry.widgetId, tocEntry.id)
+  }
+
+  const renderTOCEntry = (tocEntry: TOCEntry, index: number) => {
+    // Find indentation number (e.g "1.3.2") by counting # backwards that are same level with no level lower
+    let level
+    let indentation = ""
+    if (design.numbering) {
+      // For each level up to the current entry's level
+      for (let level = 1; level <= tocEntry.level; level++) {
+        let value = 0
+        // Count entries at this level up to current index
+        for (let i = 0; i <= index; i++) {
+          const entry = tocEntries?.[i]
+          if (!entry) {
+            continue
+          }
+          if (entry.level === level) {
+            value++
+          } else if (entry.level < level) {
+            // Reset counter when we hit a higher level
+            value = 0
+          }
+        }
+        indentation += `${value}.`
+      }
+      indentation += " "
+    }
+
+    return <div key={index} style={{ paddingLeft: tocEntry.level * 8 - 8 }}>
+      <a className="link-plain" onClick={() => handleEntryClick(tocEntry)}>
+        {indentation}
+        <span>{translate(tocEntry.text)}</span>
+      </a>
+    </div>
+  }
+
+  // Get border
+  const border = (() => {
+    switch (design.borderWeight) {
+      case 0:
+        return "none"
+      case 1:
+        return "solid 1px #f4f4f4"
+      case 2:
+        return "solid 1px #ccc"
+      case 3:
+        return "solid 1px #888"
+    }
+  })()
+
+  return <div
+    style={{
+      width,
+      height,
+      border,
+      padding: 5,
+      margin: 1
+    }}
+  >
+    {/* Render header */}
+    <div style={{ fontWeight: "bold" }}>{design.header ? props.translate(design.header) : ""}</div>
+    {_.map(tocEntries || [], (tocEntry, i) => {
+      return renderTOCEntry(tocEntry, i)
+    })}
+
+    {/* Add placeholder if none and editable */}
+    {onDesignChange && (tocEntries || []).length === 0
+      ? <div className="text-muted">
+        {T`Table of Contents will appear here as text blocks with headings are added to the dashboard`}
+      </div>
+      : undefined}
+  </div>
+}
+
+interface TOCWidgetDesignerProps {
+  design: TOCWidgetDesign
+  onDesignChange: (design: TOCWidgetDesign) => void
+}
+
+// Designer for TOC widget options
+function TOCWidgetDesignerComponent(props: TOCWidgetDesignerProps) {
+  const { design, onDesignChange } = props
+
+  // Updates design with the specified changes
+  const handleUpdate = (field: keyof TOCWidgetDesign) => (value: any) => {
+    onDesignChange(produce(design, draft => {
+      draft[field] = value
+    }))
+  }
+
+  return <div>
+    <ui.FormGroup label={T`Header`}>
+      <ui.TextInput
+        value={design.header || ""}
+        onChange={handleUpdate("header")}
+        placeholder={T`None`}
+      />
+    </ui.FormGroup>
+    <ui.FormGroup label={T`Border`}>
+      <BorderComponent
+        value={design.borderWeight || 0}
+        onChange={handleUpdate("borderWeight")}
+      />
+    </ui.FormGroup>
+    <ui.FormGroup label={T`Numbering`}>
+      <ui.Radio
+        inline={true}
+        value={design.numbering || false}
+        radioValue={true}
+        onChange={handleUpdate("numbering")}
+      >
+        {T`On`}
+      </ui.Radio>
+      <ui.Radio
+        inline={true}
+        value={design.numbering || false}
+        radioValue={false}
+        onChange={handleUpdate("numbering")}
+      >
+        {T`Off`}
+      </ui.Radio>
+    </ui.FormGroup>
+  </div>
+}
+
+interface BorderComponentProps {
+  value?: number
+  defaultValue?: number
+  onChange: (value: number) => void
+}
+
+// Allows setting border heaviness
+function BorderComponent(props: BorderComponentProps) {
+  const { value, defaultValue, onChange } = props
+  const currentValue = value != null ? value : defaultValue
+
+  return <div>
+    <ui.Radio inline={true} value={currentValue} radioValue={0} onChange={onChange}>{T`None`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={1} onChange={onChange}>{T`Light`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={2} onChange={onChange}>{T`Medium`}</ui.Radio>
+    <ui.Radio inline={true} value={currentValue} radioValue={3} onChange={onChange}>{T`Heavy`}</ui.Radio>
+  </div>
+}

package/src/widgets/Widget.ts

@@ -10,16 +10,16 @@ export interface CreateViewElementOptions {
   dataSource: DataSource
   /** Gives data to the widget in a way that allows client-server separation and secure sharing. See definition in WidgetDataSource. **/
   widgetDataSource: WidgetDataSource
-  /** widget design **/
-  design: object
+  /** widget design */
+  design: any
   /** scope of the widget (when the widget self-selects a particular scope) **/
   scope?: WidgetScope | null
   /** array of filters to apply.**/
   filters: JsonQLFilter[]
   /** called with scope of widget **/
-  onScopeChange: (scope: WidgetScope | null) => void
+  onScopeChange?: (scope: WidgetScope | null) => void
   /** called with new design. null/undefined for readonly **/
-  onDesignChange?: { (design: object): void } | null
+  onDesignChange?: ((design: any) => void) | null
   /** width in pixels on screen **/
   width?: number
   /** height in pixels on screen **/
@@ -32,7 +32,7 @@ export interface CreateViewElementOptions {
   namedStrings?: { [key: string]: string }
 
   /** Entries in the table of content */
-  tocEntries?: string[]
+  tocEntries?: TOCEntry[]
 
   /** the widget callback ref */
   widgetRef?: (widget: any) => void
@@ -42,8 +42,23 @@ export interface CreateViewElementOptions {
 
   /** A key that changes when the widget should be refreshed */
   refreshKey?: any
+
+  /** Locale to use for display */
+  locale: string
+
+  /** Translate function to use for display. Returns same string when editing. */
+  translate: (input: string) => string
+}
+
+/** An entry in the table of contents */
+export interface TOCEntry {
+  id: any
+  widgetId: string
+  level: number
+  text: string
 }
 
+
 export default class Widget {
   /** Creates a React element that is a view of the widget */
   createViewElement(options: CreateViewElementOptions): ReactElement<any> {
@@ -83,4 +98,9 @@ export default class Widget {
   getTOCEntries(design: any, namedStrings?: { [key: string]: string }): { id: string; text: string; level: number }[] {
     return []
   }
+
+  /** Gets any strings that should be translated */
+  getTranslatableStrings(design: any, schema: Schema): string[] {
+    return []
+  }
 }

package/src/widgets/WidgetScopesViewComponent.ts

@@ -47,7 +47,8 @@ export default class WidgetScopesViewComponent extends React.Component<WidgetSco
       "div",
       { className: "alert alert-info" },
       R("span", { className: "fas fa-filter" }),
-      T` Filters: `,
+      " ",
+      T`Filters: `,
       _.map(_.keys(scopes), (id) => this.renderScope(id, scopes[id]))
     )
   }

package/src/widgets/charts/Chart.ts

@@ -11,7 +11,7 @@ export interface ChartCreateViewElementOptions {
   /** data source to use. Only used when designing, for display uses data **/
   dataSource: DataSource
 
-  /** Chart design **/
+  /** Chart design. Should already be translated. */
   design: any
 
   /** called with new design. null/undefined for readonly **/
@@ -37,6 +37,9 @@ export interface ChartCreateViewElementOptions {
 
   /** Called with (tableId, rowId) when item is clicked **/
   onRowClick?: (tableId: string, rowId: any) => void
+
+  /** Locale to use for display */
+  locale: string
 }
 
 export default class Chart {
@@ -98,17 +101,9 @@ export default class Chart {
     throw new Error("Not implemented")
   }
 
-  // Create a view element for the chart
-  // Options include:
-  //   schema: schema to use
-  //   dataSource: dataSource to use
-  //   design: design of the chart
-  //   onDesignChange: when design changes
-  //   data: results from queries
-  //   width, height: size of the chart view
-  //   scope: current scope of the view element
-  //   onScopeChange: called when scope changes with new scope
-  //   onRowClick: Called with (tableId, rowId) when item is clicked
+  /** Create a view element for the chart.
+   * Chart design should already be translated. This is handled by ChartViewComponent.
+   */
   createViewElement(options: ChartCreateViewElementOptions): ReactNode {
     throw new Error("Not implemented")
   }
@@ -137,4 +132,28 @@ export default class Chart {
   getPlaceholderIcon() {
     return ""
   }
+
+  /** Get a list of translatable strings in the design. No need to override in subclasses. Design should already be cleaned. */
+  getTranslatableStrings(design: any, schema: Schema): string[] {
+    const strings = new Set<string>()
+  
+    // Create collector function that just saves strings and returns them unchanged
+    const collectStrings = (str: string) => {
+      // Only collect non-empty strings
+      if (str) {
+        strings.add(str)
+      }
+      return str
+    }
+  
+    // Use existing translation function but with collector
+    this.translateDesign(design, collectStrings)
+  
+    return Array.from(strings)
+  }
+
+  /** Translates the design. Override in subclasses. Design is already cleaned. */
+  translateDesign(design: any, translate: (input: string) => string): any {
+    return design
+  }
 }