@mwater/visualization 5.0.0 → 5.0.1

package/lib/widgets/charts/table/TableChartViewComponent.js

@@ -7,7 +7,6 @@ const prop_types_1 = __importDefault(require("prop-types"));
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importDefault(require("react"));
 const R = react_1.default.createElement;
-const moment_1 = __importDefault(require("moment"));
 const react_linkify_1 = __importDefault(require("react-linkify"));
 const AxisBuilder_1 = __importDefault(require("../../../axes/AxisBuilder"));
 const expressions_1 = require("@mwater/expressions");
@@ -149,7 +148,13 @@ class TableContentsComponent extends react_1.default.Component {
             else {
                 // Parse if should be JSON
                 if (["image", "imagelist", "geometry", "text[]"].includes(exprType || "") && lodash_1.default.isString(value)) {
-                    value = JSON.parse(value);
+                    try {
+                        value = JSON.parse(value);
+                    }
+                    catch (e) {
+                        // Ignore as can happen when re-arranging columns
+                        value = null;
+                    }
                 }
                 if (column.backgroundColorAxis && row[`bc${columnIndex}`] != null) {
                     backgroundColor = axisBuilder.getValueColor(column.backgroundColorAxis, row[`bc${columnIndex}`]) ?? "#fff";
@@ -170,10 +175,10 @@ class TableContentsComponent extends react_1.default.Component {
                         node = exprUtils.stringifyExprLiteral(column.textAxis?.expr, value, this.context.locale);
                         break;
                     case "date":
-                        node = (0, moment_1.default)(value, "YYYY-MM-DD").format("ll");
+                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
                         break;
                     case "datetime":
-                        node = (0, moment_1.default)(value, moment_1.default.ISO_8601).format("lll");
+                        node = (0, valueFormatter_1.formatValue)(exprType, value, column.format);
                         break;
                     case "image":
                         node = this.renderImage(value.id);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {
@@ -20,6 +20,11 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.12.5",
+    "@mwater/expressions": "^2.49.3",
+    "@mwater/expressions-ui": "^4.13.0",
+    "@mwater/forms": "^11.2.7",
+    "@mwater/jsonql": "^1.14.0",
+    "@mwater/react-library": "^2.0.0",
     "@turf/bbox": "^6.0.1",
     "async": "^1.2.1",
     "async-latest": "^1.0.0",
@@ -34,6 +39,7 @@
     "d3-scale": "^1.0.3",
     "d3-scale-chromatic": "^1.5.0",
     "d3-tip": "^0.9.0",
+    "dayjs": "^1.11.10",
     "dompurify": "^1.0.11",
     "ez-localize": "^2.5.0",
     "file-saver": "^2.0.5",
@@ -42,16 +48,12 @@
     "immutable-setter": "^1.1.1",
     "jquery": "^3.6.3",
     "js-yaml": "^3.14.0",
-    "@mwater/jsonql": "^1.14.0",
     "leaflet": "^1.8.0",
     "lodash": "^3.1.0",
     "lru-cache": "^6.0.0",
     "maplibre-gl": "^3.3.1",
     "markdown-it": "^12.0.4",
     "moment": "^2.29.1",
-    "@mwater/expressions": "^2.49.3",
-    "@mwater/expressions-ui": "^4.13.0",
-    "@mwater/forms": "^11.2.7",
     "pako": "^1.0.11",
     "prop-types": "^15.7.2",
     "querystring": "^0.2.0",
@@ -65,14 +67,12 @@
     "react-dropzone": "^14.2.2",
     "react-float-affixed": "^1.0.0",
     "react-lazy-load-image-component": "^1.5.1",
-    "@mwater/react-library": "^2.0.0",
     "react-linkify": "^0.2.2",
     "react-motion": "^0.5.2",
     "react-onclickout": "^2.0.4",
     "react-select": "^5.1.0",
     "save-svg-as-png": "^1.4.17",
     "shallowequal": "^0.2.2",
-    "ui-builder": "^2.0.1",
     "update-object": "^1.0.0",
     "utm": "^1.1.1",
     "uuid": "^3.4.0"
@@ -108,6 +108,6 @@
     "react-addons-test-utils": "^0.14.0",
     "react-test-renderer": "^16.14.0",
     "sinon": "^4.2.0",
-    "typescript": "^4.8.4"
+    "typescript": "^5.2.2"
   }
 }

package/src/MWaterAddRelatedIndicatorComponent.ts

@@ -43,7 +43,7 @@ export default class MWaterAddRelatedIndicatorComponent extends React.Component<
 
   componentDidMount() {
     // Get all response-type indicators
-    const query = {}
+    const query: any = {}
     query.selector = JSON.stringify({ type: "response" })
     query.fields = JSON.stringify({
       "design.name": 1,

package/src/MWaterContextComponent.ts

@@ -122,11 +122,8 @@ export default class MWaterContextComponent extends React.Component<{
       return null
     }
 
-    // Always open indicator section
+    // Nothing initially open
     context.isScalarExprTreeSectionInitiallyOpen = (options: any) => {
-      if (options.tableId.match(/^entities\./) && options.section.id === "!indicators") {
-        return true
-      }
       return null
     }
 

package/src/datagrids/DatagridComponent.ts

@@ -68,6 +68,7 @@ export default class DatagridComponent extends React.Component<
     /** Height of quickfilters */
     quickfiltersHeight: number | null
     quickfiltersValues: null | any[]
+    refreshKey: number
   }
 > {
   datagridView?: DatagridViewComponent | null
@@ -81,7 +82,8 @@ export default class DatagridComponent extends React.Component<
       editingDesign: false, // is design being edited
       cellEditingEnabled: false, // True if cells can be edited directly
       quickfiltersHeight: null, // Height of quickfilters
-      quickfiltersValues: null
+      quickfiltersValues: null,
+      refreshKey: 1
     }
   }
 
@@ -97,6 +99,11 @@ export default class DatagridComponent extends React.Component<
     return this.updateHeight()
   }
 
+  handleRefreshData = () => {
+    this.props.dataSource.clearCache?.()
+    this.setState({ refreshKey: this.state.refreshKey + 1 })
+  }
+
   updateHeight() {
     // Calculate quickfilters height
     if (this.quickfilters) {
@@ -261,6 +268,12 @@ export default class DatagridComponent extends React.Component<
         this.renderFindReplace(),
         this.renderCellEdit(),
         this.renderEditButton(),
+        R(
+          "a",
+          { key: "refresh", className: "btn btn-link btn-sm", onClick: this.handleRefreshData },
+          R("span", { className: "fas fa-sync" }),
+          R("span", { className: "hide-600px" }, " Refresh")
+        ),
         this.props.extraTitleButtonsElem
       ),
       this.props.titleElem
@@ -375,6 +388,7 @@ export default class DatagridComponent extends React.Component<
             onRowDoubleClick: this.props.onRowDoubleClick,
             canEditExpr: this.state.cellEditingEnabled ? this.props.canEditExpr : undefined,
             updateExprValues: this.state.cellEditingEnabled ? this.props.updateExprValues : undefined,
+            refreshKey: this.state.refreshKey
           })
         } else if (this.props.onDesignChange) {
           return R(

package/src/datagrids/DatagridViewComponent.ts

@@ -38,6 +38,9 @@ export interface DatagridViewComponentProps {
 
   /** Called when a row is clicked with (tableId, rowId, rowIndex) */
   onRowClick?: (tableId: string, rowId: any, rowIndex: number) => void
+
+  /** Change to force a refresh */
+  refreshKey?: any
 }
 
 /** Update to one row expression value */
@@ -91,7 +94,7 @@ export default class DatagridViewComponent extends React.Component<
   componentWillReceiveProps(nextProps: DatagridViewComponentProps) {
     // If design or filters changed, delete all rows
     // TODO won't this reload on column resize?
-    if (!_.isEqual(nextProps.design, this.props.design) || !_.isEqual(nextProps.filters, this.props.filters)) {
+    if (!_.isEqual(nextProps.design, this.props.design) || !_.isEqual(nextProps.filters, this.props.filters) || nextProps.refreshKey !== this.props.refreshKey) {
       return this.setState({ rows: [], entirelyLoaded: false })
     }
   }
@@ -452,7 +455,8 @@ export default class DatagridViewComponent extends React.Component<
         onRowDoubleClick: this.handleRowDoubleClick,
         onRowClick: this.handleRowClick,
         isColumnResizing: false,
-        onColumnResizeEndCallback: this.handleColumnResize
+        onColumnResizeEndCallback: this.handleColumnResize,
+        touchScrollEnabled: true
       },
       this.renderColumns()
     )

package/src/datagrids/LabeledExprGenerator.ts

@@ -140,6 +140,21 @@ export default class LabeledExprGenerator {
               joins
             }
           ]
+        } else if (column.idTable!.match(/^custom./)) { // Support cascading ref question
+          return this.schema
+            .getColumns(column.idTable!)
+            .filter((c: any) => c.id[0] !== "_")
+            .map((c: any) => ({
+              expr: {
+                type: "scalar",
+                table,
+                joins: [column.id],
+                expr: { type: "field", table: column.idTable, column: c.id }
+              },
+
+              label: `${createLabel(column)} > ${createLabel(c)}`,
+              joins
+            }))
         } else {
           // Use label, code, full name, or name of dest table
           const destTable = this.schema.getTable(column.idTable!)

package/src/dayjs.ts

@@ -0,0 +1,5 @@
+import dayjs from "dayjs"
+import localizedFormat from 'dayjs/plugin/localizedFormat'
+dayjs.extend(localizedFormat)
+
+export default dayjs

package/src/languages.ts

@@ -513,6 +513,11 @@ export const languages: {
       "name": "Māori",
       "en": "Maori"
   },
+  {
+      "code": "miq",
+      "name": "Miskitu",
+      "en": "Miskito"
+  },
   {
       "code": "mk",
       "name": "Македонски",

package/src/maps/Layer.ts

@@ -312,22 +312,12 @@ export default class Layer<LayerDesign> {
 
         if (results[0].bounds) {
           const [w, s, e, n] = bbox(results[0].bounds)
-          // Pad to 10km if point
-          if (w === e && n === s) {
-            bounds = {
-              w: w - 0.1,
-              s: s - 0.1,
-              e: e + 0.1,
-              n: n + 0.1
-            }
-            // Pad bounds to prevent too small box (10m)
-          } else {
-            bounds = {
-              w: w - 0.001,
-              s: s - 0.001,
-              e: e + 0.001,
-              n: n + 0.001
-            }
+          // Pad bounds to prevent too small box (100m)
+          bounds = {
+            w: w - 0.001,
+            s: s - 0.001,
+            e: e + 0.001,
+            n: n + 0.001
           }
         }
 

package/src/maps/MapComponent.ts

@@ -303,7 +303,7 @@ export default class MapComponent extends React.Component<MapComponentProps, Map
           gridTemplateAreas: `"header designer" "quickfilters designer" "view designer"`
         }
       },
-      this.renderHeader(),
+      this.props.hideTitleBar != true ? this.renderHeader() : null,
       this.state.hideQuickfilters ? null : this.renderQuickfilter(),
       R("div", { style: { width: "100%", height: "100%", gridArea: "view", overflow: "hidden" } }, this.renderView()),
       designerVisible ? this.renderDesigner() : null

package/src/maps/RasterMapViewComponent.ts

@@ -13,7 +13,6 @@ import { JsonQLFilter } from "../JsonQLFilter"
 import { MapDesign } from "./MapDesign"
 import { MapDataSource } from "./MapDataSource"
 import { MapScope } from "./MapUtils"
-import { defaultProps } from "react-select/src/Select"
 
 export interface RasterMapViewComponentProps {
   schema: Schema

package/src/maps/VectorMapViewComponent.tsx

@@ -1,4 +1,4 @@
-import _ from "lodash"
+import _, { find } from "lodash"
 import { LayerSpecification, MapLayerMouseEvent } from "maplibre-gl"
 import { DataSource, Schema } from "@mwater/expressions"
 import React, { CSSProperties, ReactNode, useEffect, useMemo, useState } from "react"
@@ -14,7 +14,7 @@ import {
   getFilterableTables as utilsGetFilterableTables,
   MapScope
 } from "./MapUtils"
-import { memoizedDebounce } from "../memoizedDebounce"
+import {Color} from '@maplibre/maplibre-gl-style-spec';
 
 import "maplibre-gl/dist/maplibre-gl.css"
 import "./VectorMapViewComponent.css"
@@ -115,7 +115,7 @@ export function VectorMapViewComponent(props: {
   )
 
   // Last feature that mouse entered
-  const lastFeature = useRef()
+  const lastFeature = useRef<string>()
 
   // Load map
   const map = useVectorMap({
@@ -162,6 +162,7 @@ export function VectorMapViewComponent(props: {
     })
 
     if (!results) {
+      setHoverContents(null)
       return
     }
 
@@ -171,15 +172,6 @@ export function VectorMapViewComponent(props: {
     }
   })
 
-  const handleLayerHoverDebounced = memoizedDebounce(
-    (layerViewId: string, ev: { data: any; event: any }) => {
-      handleLayerHover(layerViewId, ev)
-    },
-    250,
-    { leading: true, trailing: false },
-    (layerViewId, ev) => ev.data.id
-  )
-
   /** Handle a click on a layer */
   const handleLayerClick = useStableCallback((layerViewId: string, ev: { data: any; event: any }) => {
     const layerView = props.design.layerViews.find(lv => lv.id == layerViewId)!
@@ -514,7 +506,7 @@ export function VectorMapViewComponent(props: {
       setBusy(b => b - 1)
 
       if (bounds) {
-        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 3000 })
+        map!.fitBounds([bounds.w, bounds.s, bounds.e, bounds.n], { padding: 20, duration: 2500 })
 
         // Also record if editable as part of bounds
         setBounds(bounds)
@@ -598,42 +590,37 @@ export function VectorMapViewComponent(props: {
       return
     }
 
-    const removes: { (): void }[] = []
 
-    for (const clickHandler of layerClickHandlers) {
-      const onEnter = (ev: MapLayerMouseEvent) => {
-        if (!ev.features || !ev.features[0].properties) {
+    const layers = layerClickHandlers.map(clickHandler => clickHandler.mapLayerId)
+    
+    const onEnter = (ev: MapLayerMouseEvent) => {
+      let f = map.queryRenderedFeatures(ev.point, { layers });
+      if (f.length) {
+        if(f[0].layer.type === 'fill' && f[0].layer.paint?.['fill-color']?.toString() == 'rgba(0,0,0,0)') {
           lastFeature.current = undefined
           setHoverContents(null)
           return
         }
-
-        if (ev.features![0].properties.id !== lastFeature.current) {
+        if(lastFeature.current !== f[0].properties.id) {
+          lastFeature.current = f[0].properties.id
           setHoverContents(null)
-          lastFeature.current = ev.features![0].properties.id
+          const handler = find(layerClickHandlers, {mapLayerId: f[0].layer.id})
+          handleLayerHover(handler!.layerViewId, {
+            data: f[0].properties,
+            event: ev
+          })
         }
-
-        handleLayerHoverDebounced(clickHandler.layerViewId, {
-          data: ev.features![0].properties,
-          event: ev
-        })
-      }
-      const onLeave = (ev: MapLayerMouseEvent) => {
+      } else {
         lastFeature.current = undefined
         setHoverContents(null)
       }
-      map.on("mousemove", clickHandler.mapLayerId, onEnter)
-      map.on("mouseleave", clickHandler.mapLayerId, onLeave)
-      removes.push(() => {
-        map.off("mousemove", clickHandler.mapLayerId, onEnter)
-        map.off("mouseleave", clickHandler.mapLayerId, onLeave)
-      })
     }
+    map.on("mousemove", onEnter)
+    
     return () => {
-      for (const remove of removes) {
-        remove()
-      }
+      map.off("mousemove", onEnter)
     }
+
   }, [map, layerClickHandlers])
 
   function renderLegend() {

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -210,7 +210,7 @@ class QuickfilterDesignComponent extends React.Component<
             table: this.state.table,
             value: this.props.design.expr,
             onChange: this.handleExprChange,
-            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"]
+            types: ["enum", "text", "enumset", "date", "datetime", "id[]", "text[]"],
           })
         )
       ),

package/src/quickfilter/TextLiteralComponent.ts

@@ -51,6 +51,10 @@ export default class TextLiteralComponent extends React.Component<TextLiteralCom
     // Create query to get matches
     const exprCompiler = new ExprCompiler(this.props.schema)
 
+    if(!this.props.expr.table) {
+      return 
+    }
+
     // Add filter for input (simple if just text)
     if (exprType === "text") {
       if (input) {

package/src/valueFormatter.ts

@@ -1,6 +1,7 @@
 import { LiteralType } from "@mwater/expressions"
 import { format as d3Format } from "d3-format"
 import { fromLatLon } from "utm"
+import dayjs from './dayjs'
 
 /** Option for list of format options */
 export interface FormatOption {
@@ -10,7 +11,7 @@ export interface FormatOption {
 
 /** Determine if can format type */
 export function canFormatType(type: LiteralType): boolean {
-  return type == "number" || type == "geometry"
+  return type == "number" || type == "geometry" || type === "date" || type === "datetime"
 }
 
 /** Get available options for formatting a type. Null if not available */
@@ -35,6 +36,43 @@ export function getFormatOptions(type: LiteralType): FormatOption[] | null {
     ]
   }
 
+  if (type == "date") {
+    return [
+      { value: "ll", label: dayjs().format("ll") },
+      { value: "YYYY-MM-DD", label: dayjs().format("YYYY-MM-DD") },
+      { value: "YYYY-MMM-DD", label: dayjs().format("YYYY-MMM-DD") },
+      { value: "YYYY-MM", label: dayjs().format("YYYY-MM") },
+      { value: "YYYY", label: dayjs().format("YYYY") },
+      { value: "MMM YYYY", label: dayjs().format("MMM YYYY") },
+      { value: "MMM DD, YYYY", label: dayjs().format("MMM DD, YYYY") },
+      { value: "MMMM D, YYYY", label: dayjs().format("MMMM D, YYYY") },
+      { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
+      { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
+      { value: "DD-MM-YYYY", label: dayjs().format("DD-MM-YYYY") },
+    ]
+  }
+
+  if (type == "datetime") {
+    return [
+      { value: "lll", label: dayjs().format("lll") },
+      { value: "llll", label: dayjs().format("llll") },
+      { value: "YYYY-MM-DD", label: dayjs().format("YYYY-MM-DD") },
+      { value: "YYYY-MMM-DD", label: dayjs().format("YYYY-MMM-DD") },
+      { value: "YYYY-MM", label: dayjs().format("YYYY-MM") },
+      { value: "YYYY", label: dayjs().format("YYYY") },
+      { value: "MMM YYYY", label: dayjs().format("MMM YYYY") },
+      { value: "MMM DD, YYYY h:mm A", label: dayjs().format("MMM DD, YYYY h:mm A") },
+      { value: "MMMM D, YYYY h:mm A", label: dayjs().format("MMMM D, YYYY h:mm A") },
+      { value: "MMM DD, YYYY", label: dayjs().format("MMM DD, YYYY") },
+      { value: "MMMM D, YYYY", label: dayjs().format("MMMM D, YYYY") },
+      { value: "MM/DD/YYYY", label: dayjs().format("MM/DD/YYYY") },
+      { value: "DD/MM/YYYY", label: dayjs().format("DD/MM/YYYY") },
+      { value: "DD-MM-YYYY", label: dayjs().format("DD-MM-YYYY") },
+      { value: "YYYY-MM-DD HH:mm:ss", label: dayjs().format("YYYY-MM-DD HH:mm:ss") },
+      { value: "ISO 8601", label: dayjs().toISOString() },
+    ]
+  }
+
   return null
 }
 
@@ -48,6 +86,14 @@ export function getDefaultFormat(type: LiteralType): string {
     return "lat, lng"
   }
 
+  if (type == "date") {
+    return "ll"
+  }
+
+  if (type == "datetime") {
+    return "lll"
+  }
+
   throw new Error("Not supported")
 }
 
@@ -78,6 +124,13 @@ export function formatValue(
     return d3Format(format)(value)
   }
 
+  if (["date", "datetime"].includes(type)) {
+    if (format == "ISO 8601") {
+      return dayjs(value).toISOString()
+    }
+    return dayjs(value).format(format)
+  }
+
   if (type == "geometry") {
     if (format == "UTM") {
       if (value.type == "Point") {

package/src/widgets/charts/pivot/PivotChartLayout.ts

@@ -40,8 +40,9 @@ export interface PivotChartLayoutCell {
   align: "left" | "center" | "right"
 
   /** section id of either a segment or intersection or blank area. Always a rectangle. 
-   * Id is like intersection id if intersection, id of segment if segment */
-  section: string
+   * Id is like intersection id if intersection, id of segment if segment. Undefined if doesn't
+   * exist yet. */
+  section?: string
   
   /** true if cell is on top edge of section */
   sectionTop?: boolean

package/src/widgets/charts/pivot/PivotChartLayoutBuilder.ts

@@ -373,7 +373,7 @@ export default class PivotChartLayoutBuilder {
     const intersectionData = dataIndexed[intersectionId]
 
     // Create key to lookup value
-    const key = {}
+    const key: { [rNcN: string]: any } = {}
     for (i = 0; i < row.length; i++) {
       part = row[i]
       key[`r${i}`] = part.value
@@ -727,7 +727,7 @@ export default class PivotChartLayoutBuilder {
       // Sort categories if segment is sorted
       if (segment.orderExpr) {
         // Index the ordering by the JSON.stringify to make it O(n)
-        const orderIndex = {}
+        const orderIndex: { [key: string]: number } = {}
         const iterable = _.pluck(data[segment.id], "value")
         for (let index = 0; index < iterable.length; index++) {
           value = iterable[index]

package/src/widgets/charts/pivot/PivotChartLayoutComponent.tsx

@@ -5,7 +5,7 @@ const R = React.createElement
 import Color from "color"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import classNames from "classnames"
-import { PivotChartLayout, PivotChartLayoutRow } from "./PivotChartLayout"
+import { PivotChartLayout, PivotChartLayoutCell, PivotChartLayoutRow } from "./PivotChartLayout"
 
 export interface PivotChartLayoutComponentProps {
   layout: PivotChartLayout
@@ -71,7 +71,7 @@ export default class PivotChartLayoutComponent extends React.Component<PivotChar
           layout: this.props.layout,
           rowIndex,
           columnIndex,
-          onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section }) : undefined,
+          onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : undefined,
           hoverSection: this.props.editable ? this.state.hoverSection : undefined,
           onEditSection: this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined,
           onSummarizeSegment: this.props.onSummarizeSegment
@@ -383,7 +383,11 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
   }
 
   // Render an unconfigured cell
-  renderUnconfigured(cell: any) {
+  renderUnconfigured(cell: PivotChartLayoutCell) {
+    if (!cell.section) { 
+      return null
+    }
+    
     return R(
       "span",
       { style: { fontSize: "90%" } },

package/src/widgets/charts/pivot/PivotChartQueryBuilder.ts

@@ -108,7 +108,7 @@ export default class PivotChartQueryBuilder {
           const columnSegment = columnPath[i]
           query.selects.push({
             type: "select",
-            expr: this.axisBuilder.compileAxis({ axis: columnSegment.valueAxis, tableAlias: "main" }),
+            expr: compileSegmentAxis(columnSegment.valueAxis),
             alias: `c${i}`
           })
           query.groupBy!.push(i + 1 + rowPath.length)