@mwater/visualization 5.4.5 → 5.6.0

package/src/datagrids/ExprCellComponent.tsx

@@ -39,51 +39,54 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
     return <a href={url} key={id} target="_blank" style={{ paddingLeft: 5, paddingRight: 5 }}>{T`Image`}</a>
   }
 
-  render() {
-    let node
-    const exprUtils = new ExprUtils(this.props.schema)
+  renderCellContent() {
     let { value } = this.props
 
+    const exprUtils = new ExprUtils(this.props.schema)
+
     if (value == null || !this.props.expr) {
-      node = null
+      return null
     } else {
       // Parse if should be JSON
       if (["image", "imagelist", "geometry", "text[]"].includes(this.props.exprType) && _.isString(value)) {
-        value = JSON.parse(value)
+        try {
+          value = JSON.parse(value)
+        } catch (e) {
+          console.error("Error parsing JSON", e)
+          return "???"
+        }
       }
 
       // Format if possible
       if (canFormatType(this.props.exprType)) {
-        node = formatValue(this.props.exprType, value, this.props.format)
+        return formatValue(this.props.exprType, value, this.props.format)
       } else {
         // Convert to node based on type
         switch (this.props.exprType) {
           case "text":
-            node = <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
-            break
+            return <Linkify properties={{ target: "_blank" }}>{value}</Linkify>
           case "boolean":
           case "enum":
           case "enumset":
           case "text[]":
-            node = exprUtils.stringifyExprLiteral(this.props.expr, value, this.props.locale)
-            break
+            return exprUtils.stringifyExprLiteral(this.props.expr, value, this.props.locale)
           case "date":
-            node = moment(value, "YYYY-MM-DD").format("ll")
-            break
+            return moment(value, "YYYY-MM-DD").format("ll")
           case "datetime":
-            node = moment(value, moment.ISO_8601).format("lll")
-            break
+            return moment(value, moment.ISO_8601).format("lll")
           case "image":
-            node = this.renderImage(value.id)
-            break
+            return this.renderImage(value.id)
           case "imagelist":
-            node = _.map(value, (v: any) => this.renderImage(v.id))
-            break
+            return _.map(value, (v: any) => this.renderImage(v.id))
           default:
-            node = "" + value
+            return "" + value
         }
       }
     }
+  }
+
+  render() {
+    const content = this.renderCellContent()
 
     return (
       <div
@@ -101,7 +104,7 @@ export default class ExprCellComponent extends React.Component<ExprCellComponent
         onClick={this.props.onClick}
         onDoubleClick={this.props.onDoubleClick}
       >
-        {node}
+        {content}
       </div>
     )
   }

package/src/datagrids/OrderBysDesignerComponent.tsx

@@ -1,11 +1,9 @@
-import PropTypes from "prop-types"
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-
-import { DataSource, ExprUtils, Schema } from "@mwater/expressions"
+import { DataSource, Schema } from "@mwater/expressions"
 import { ExprComponent } from "@mwater/expressions-ui"
-import { Checkbox } from "@mwater/react-library/lib/bootstrap"
+import { Toggle } from "@mwater/react-library/lib/bootstrap"
+import { DatagridDesignOrderBy } from "./DatagridDesign"
 
 export interface OrderBysDesignerComponentProps {
   /** schema to use */
@@ -13,10 +11,9 @@ export interface OrderBysDesignerComponentProps {
   /** dataSource to use */
   dataSource: DataSource
   table: string
-  /** Columns list See README.md of this folder */
-  orderBys: any
+  orderBys: DatagridDesignOrderBy[]
   /** Called when columns changes */
-  onChange: any
+  onChange: (orderBys: DatagridDesignOrderBy[]) => void
 }
 
 // Edits an orderBys which is a list of expressions and directions. See README.md
@@ -42,40 +39,38 @@ export default class OrderBysDesignerComponent extends React.Component<OrderBysD
   }
 
   render() {
-    return R(
-      "div",
-      null,
-      _.map(this.props.orderBys, (orderBy, index) => {
-        return R(OrderByDesignerComponent, {
-          key: index,
-          schema: this.props.schema,
-          table: this.props.table,
-          dataSource: this.props.dataSource,
-          orderBy,
-          onChange: this.handleChange.bind(null, index),
-          onRemove: this.handleRemove.bind(null, index)
-        })
-      }),
+    return (
+      <div>
+        {_.map(this.props.orderBys, (orderBy, index) => {
+          return <OrderByDesignerComponent
+            key={index}
+            schema={this.props.schema}
+            table={this.props.table}
+            dataSource={this.props.dataSource}
+            orderBy={orderBy}
+            onChange={this.handleChange.bind(null, index)}
+            onRemove={this.handleRemove.bind(null, index)}
+          />
+        })}
 
-      R(
-        "button",
-        {
-          key: "add",
-          type: "button",
-          className: "btn btn-link",
-          onClick: this.handleAdd
-        },
-        R("span", { className: "fas fa-plus" }),
-        " " + T`Add Ordering`
-      )
+        <button
+          key="add"
+          type="button"
+          className="btn btn-link"
+          onClick={this.handleAdd}
+        >
+          <span className="fas fa-plus" />
+          {" " + T`Add Ordering`}
+        </button>
+      </div>
     )
   }
 }
 
 interface OrderByDesignerComponentProps {
-  orderBy: any
-  onChange: any
-  onRemove: any
+  orderBy: DatagridDesignOrderBy
+  onChange: (orderBy: DatagridDesignOrderBy) => void
+  onRemove: () => void
   schema: Schema
   dataSource: DataSource
   table?: string
@@ -86,43 +81,39 @@ class OrderByDesignerComponent extends React.Component<OrderByDesignerComponentP
     return this.props.onChange(_.extend({}, this.props.orderBy, { expr }))
   }
 
-  handleDirectionChange = (value: any) => {
-    return this.props.onChange(_.extend({}, this.props.orderBy, { direction: value ? "desc" : "asc" }))
+  handleDirectionChange = (direction: string) => {
+    return this.props.onChange(_.extend({}, this.props.orderBy, { direction }))
   }
 
   render() {
-    return R(
-      "div",
-      { className: "row" },
-      R(
-        "div",
-        { className: "col-7" },
-        R(ExprComponent, {
-          schema: this.props.schema,
-          dataSource: this.props.dataSource,
-          table: this.props.table,
-          types: ["text", "number", "boolean", "date", "datetime"],
-          aggrStatuses: ["individual", "literal", "aggregate"],
-          value: this.props.orderBy.expr,
-          onChange: this.handleExprChange
-        })
-      ),
-      R(
-        "div",
-        { className: "col-3" },
-        <Checkbox inline value={this.props.orderBy.direction === "desc"} onChange={this.handleDirectionChange}>
-          {T`Reverse`}
-        </Checkbox>
-      ),
-      R(
-        "div",
-        { className: "col-1" },
-        R(
-          "button",
-          { className: "btn btn-sm btn-link", type: "button", onClick: this.props.onRemove },
-          R("span", { className: "fas fa-times" })
-        )
-      )
+    return (
+      <div style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px" }}>
+        <div style={{ flex: 1 }}>
+          <ExprComponent
+            schema={this.props.schema}
+            dataSource={this.props.dataSource}
+            table={this.props.table}
+            types={["text", "number", "boolean", "date", "datetime"]}
+            aggrStatuses={["individual", "literal", "aggregate"]}
+            value={this.props.orderBy.expr}
+            onChange={this.handleExprChange}
+          />
+        </div>
+        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
+          <Toggle
+            size="xs"
+            value={this.props.orderBy.direction}
+            onChange={this.handleDirectionChange}
+            options={[
+              { value: "asc", label: T`Ascending` },
+              { value: "desc", label: T`Descending` }
+            ]}
+          />
+          <button className="btn btn-sm btn-link" type="button" onClick={this.props.onRemove}>
+            <span className="fas fa-times" />
+          </button>
+        </div>
+      </div>
     )
   }
 }

package/src/index.css

@@ -55,6 +55,12 @@ Lato, Lora, Inter, Merriweather, Roboto
   }
 }
 
+@media only screen and (max-width: 800px) {
+  .hide-800px {
+    display: none;
+  }
+}
+
 /* Dashed thresholds */
 .bb-grid line {
   stroke-dasharray: 3;
@@ -133,6 +139,20 @@ Lato, Lora, Inter, Merriweather, Roboto
   visibility: visible;
 }
 
+/* Use these to make a grandchild that displays only when parent is hovered */
+.hover-display-parent > * > .hover-display-grandchild {
+  visibility: hidden;
+}
+
+.hover-display-parent:hover > * > .hover-display-grandchild {
+  visibility: visible;
+}
+
+/* Use these to set a faint background on hover */
+.hover-grey:hover {
+  background-color: #f8f8f8;
+}
+
 .bb-title {
   font: 14px sans-serif;
   font-weight: bold;
@@ -342,6 +362,29 @@ Lato, Lora, Inter, Merriweather, Roboto
   background-color: #363b3e;
   padding: 5px;
   padding-top: 6px;
+  transform: translateX(-100%);
+  animation: slideIn 0.3s ease-in-out;
+}
+
+@keyframes slideIn {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+.mwater-visualization-palette-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+  z-index: 1000;
+}
+
+.mwater-visualization-palette-container:not(.hidden) .mwater-visualization-palette {
+  transform: translateX(0);
 }
 
 .mwater-visualization-palette-item {
@@ -543,11 +586,11 @@ Lato, Lora, Inter, Merriweather, Roboto
   background-color: rgba(0, 0, 0, 0.075);
 }
 
-._mviz-move:hover {
+.mwater-visualization-cursor-hover:hover {
   cursor: move;
 }
 
-._mviz-map-hover-content {
+.mwater-visualization-map-hover-content {
   display: grid;
   grid-template-columns: 1fr 2fr;
   grid-auto-rows: min-content;

package/src/index.ts

@@ -1,10 +1,5 @@
-export {
-  default as LeafletMapComponent,
-  MapBounds,
-  TileLayer,
-  GeoJsonLayer,
-  MapLayer
-} from "./maps/LeafletMapComponent"
+export { default as LeafletMapComponent } from "./maps/LeafletMapComponent"
+export type { MapBounds, TileLayer, GeoJsonLayer, MapLayer } from "./maps/LeafletMapComponent"
 
 export { default as DateRangeComponent } from "./DateRangeComponent"
 
@@ -18,7 +13,7 @@ export { default as DashboardComponent } from "./dashboards/DashboardComponent"
 export { default as DashboardDataSource } from "./dashboards/DashboardDataSource"
 export { default as DirectDashboardDataSource } from "./dashboards/DirectDashboardDataSource"
 export * from "./dashboards/DashboardDesign"
-export { MapDesign, MapLayerView } from "./maps/MapDesign"
+export type { MapDesign, MapLayerView } from "./maps/MapDesign"
 
 export { default as compressJson } from "./compressJson"
 
@@ -32,7 +27,7 @@ export { default as Widget } from "./widgets/Widget"
 export { default as DatagridUtils } from "./datagrids/DatagridUtils"
 
 export * from "./maps/MapViewComponent"
-export { MapScope } from "./maps/MapUtils"
+export type { MapScope } from "./maps/MapUtils"
 
 export { languages } from "./languages"
 
@@ -41,7 +36,7 @@ export { default as MWaterContextComponent } from "./MWaterContextComponent"
 
 export { default as mWaterLoader } from "./mWaterLoader"
 
-export { WidgetDataSource } from "./widgets/WidgetDataSource"
+export type { WidgetDataSource } from "./widgets/WidgetDataSource"
 export { default as DirectWidgetDataSource } from "./widgets/DirectWidgetDataSource"
 
 import "leaflet/dist/leaflet.css"
@@ -55,7 +50,6 @@ export { setMapTilerApiKey } from "./maps/vectorMaps"
 
 export { default as UndoStack } from "./UndoStack"
 export { default as DashboardViewComponent } from "./dashboards/DashboardViewComponent"
-export let BingLayer = require("./maps/BingLayer")
 export let UtfGridLayer = require("./maps/UtfGridLayer")
 export { default as LayerFactory } from "./maps/LayerFactory"
 export { default as MapDesignerComponent } from "./maps/MapDesignerComponent"

package/src/layouts/blocks/BlocksDisplayComponent.tsx

@@ -38,11 +38,39 @@ export interface BlocksDisplayComponentProps {
   cantPasteMessage?: string
 }
 
+interface BlocksDisplayComponentState {
+  isPaletteVisible: boolean
+  isManuallyHidden: boolean
+}
+
 /**
   Renders the complete layout of the blocks and also optionally a palette to the left
   that can be used to drag new items into the layout. Palette is only displayed if onItemsChange is not null
 */
-class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps> {
+class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps, BlocksDisplayComponentState> {
+  state: BlocksDisplayComponentState = {
+    isPaletteVisible: false,
+    isManuallyHidden: false
+  }
+
+  componentDidUpdate(prevProps: BlocksDisplayComponentProps) {
+    // If editing state changes (onItemsChange becomes available/unavailable)
+    if (prevProps.onItemsChange !== this.props.onItemsChange) {
+      if (this.props.onItemsChange && !this.state.isManuallyHidden) {
+        this.setState({ isPaletteVisible: true })
+      } else if (!this.props.onItemsChange) {
+        this.setState({ isPaletteVisible: false, isManuallyHidden: false })
+      }
+    }
+  }
+
+  handlePaletteToggle = () => {
+    this.setState(prevState => ({
+      isPaletteVisible: !prevState.isPaletteVisible,
+      isManuallyHidden: !prevState.isManuallyHidden
+    }))
+  }
+
   handleBlockDrop = (sourceBlock: LayoutBlock, targetBlock: LayoutBlock, side: "top" | "left" | "right" | "bottom") => {
     // Remove source from items
     let items = blockUtils.removeBlock(this.props.items, sourceBlock)!
@@ -219,8 +247,32 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
 
   renderPalette() {
     return (
-      <div key="palette" style={{ width: 141, height: "100%", position: "absolute", top: 0, left: 0 }}>
+      <div key="palette" style={{ 
+        width: 141, 
+        height: "100%", 
+        position: "absolute", 
+        top: 0, 
+        left: 0,
+        transition: "transform 0.3s ease-in-out",
+        transform: this.state.isPaletteVisible ? "translateX(0)" : "translateX(-100%)"
+      }}>
         <div className="mwater-visualization-palette" style={{ height: "100%" }}>
+          <div 
+            style={{ 
+              position: "absolute", 
+              right: -14, 
+              top: 0, 
+              background: "#363b3e", 
+              color: "white", 
+              padding: "5px 3px 5px 5px", 
+              cursor: "pointer",
+              borderRadius: "0 3px 3px 0",
+              zIndex: 1001
+            }}
+            onClick={this.handlePaletteToggle}
+          >
+            <i className={`fa fa-chevron-${this.state.isPaletteVisible ? 'left' : 'right'}`} />
+          </div>
           <PaletteItemComponent
             createItem={this.createBlockItem({ type: "widget", widgetType: "Text", design: { style: "title" } })}
             title={<i className="fa fa-font" />}
@@ -345,16 +397,19 @@ class BlocksDisplayComponent extends React.Component<BlocksDisplayComponentProps
           style={{ width: "100%", height: "100%", overflow: "hidden", position: "relative" }}
           layoutOptions={layoutOptions}
         >
-          {this.renderPalette()}
+          <div className="mwater-visualization-palette-container">
+            {this.renderPalette()}
+          </div>
           <div
             style={{
               position: "absolute",
-              left: 141,
+              left: this.state.isPaletteVisible ? 141 : 0,
               top: 0,
               bottom: 0,
               right: 0,
               overflowX: "auto",
-              overflowY: "scroll"
+              overflowY: "scroll",
+              transition: "left 0.3s ease-in-out"
             }}
             className={`mwater-visualization-block-parent-outer mwater-visualization-block-editing`}
           >

package/src/maps/BufferLayer.ts

@@ -18,6 +18,7 @@ import { getDefaultLayoutOptions } from "../dashboards/layoutOptions"
 import Widget from "../widgets/Widget"
 import BlocksLayoutManager from "../layouts/blocks/BlocksLayoutManager"
 import { getTranslatableStringsFromLayoutManager } from "../dashboards/DashboardUtils"
+import { getSimpleHoverOverData } from "./MapUtils"
 
 /** Layer which draws a buffer around geometries (i.e. a radius circle around points) */
 export default class BufferLayer extends Layer<BufferLayerDesign> {
@@ -696,29 +697,16 @@ marker-fill: ` +
     ev: { data: any; event: any },
     hoverOptions: OnGridHoverOptions<BufferLayerDesign>
   ): OnGridHoverResults {
-    if (ev.data && ev.data.id) {
-      const { table } = hoverOptions.design
-      const results: OnGridHoverResults = {}
-
-      // Popup
-      if (hoverOptions.design.hoverOver) {
-        // Create filter using popupFilterJoins
-        const popupFilterJoins =
-          hoverOptions.design.popupFilterJoins || PopupFilterJoinsUtils.createDefaultPopupFilterJoins(table)
-        const popupFilters = PopupFilterJoinsUtils.createPopupFilters(
-          popupFilterJoins,
-          hoverOptions.schema,
-          table,
-          ev.data.id
-        )
-
-        results.hoverOver = React.createElement(HoverContent, {
+    if (ev.data && ev.data.id && hoverOptions.design.hoverOver && hoverOptions.design.hoverOver.items.length > 0) {
+      const results: OnGridHoverResults = {
+        hoverOver: React.createElement(HoverContent, {
           key: ev.data.id,
           schema: hoverOptions.schema,
-          dataSource: hoverOptions.dataSource,
-          table,
+          data: ev.data,
+          mapLayerDataSource: hoverOptions.layerDataSource,
+          design: hoverOptions.design,
           items: hoverOptions.design.hoverOver.items,
-          filters: popupFilters,
+          filters: hoverOptions.filters,
           locale: hoverOptions.locale,
           translate: hoverOptions.translate
         })
@@ -881,6 +869,19 @@ marker-fill: ` +
       })
 
       draft.filter = exprCleaner.cleanExpr(design.filter || null, { table: design.table })
+
+      // Clean hover over expressions 
+      if (design.table && design.hoverOver && design.hoverOver.items) {
+        for (let i = 0; i < design.hoverOver.items.length; i++) {
+          const item = design.hoverOver.items[i]
+          if (item.value) {
+            draft.hoverOver!.items[i].value = exprCleaner.cleanExpr(item.value || null, {
+              table: design.table,
+              aggrStatuses: ["individual", "literal"]
+            })
+          }
+        }
+      }
     })
 
     return design
@@ -950,4 +951,31 @@ marker-fill: ` +
     // Remove duplicates
     return _.uniq(strings)
   }
+
+
+  /** Gets hover over data for hover over items. This should be implemented by layers that have hover over items.
+   * It will be called on the server side if using a server map data source, or on the client side if using a direct 
+   * map data source.
+   */
+  getHoverOverData(options: {
+    /** Design of the layer */
+    design: BufferLayerDesign,
+    /** Data of the current item being hovered over. e.g. { id: 123 } */
+    data: any,
+    /** Filters to apply to the hover over data, not including filtering down to the current item */
+    filters: JsonQLFilter[],
+    /** Schema to use */
+    schema: Schema,
+    /** Data source to use */
+    dataSource: DataSource,
+  }): Promise<{ [key: string]: any }> {
+    return getSimpleHoverOverData({
+      id: options.data.id,
+      table: options.design.table,
+      filters: options.filters,
+      schema: options.schema,
+      dataSource: options.dataSource,
+      hoverOverItems: options.design.hoverOver!.items,
+    })
+  }
 }

package/src/maps/BufferLayerDesign.ts

@@ -47,7 +47,7 @@ export interface BufferLayerDesign {
   popup: { items: LayoutBlock }
 
   /** Contains items: which is HoverOverItem[] */
-  hoverOver: { items: HoverOverItem[] }
+  hoverOver?: { items: HoverOverItem[] }
 
   /** Customizable filtering for popup. See PopupFilterJoins.md */
   popupFilterJoins: PopupFilterJoins

package/src/maps/BufferLayerDesignerComponent.tsx

@@ -15,7 +15,7 @@ import { Checkbox } from "@mwater/react-library/lib/bootstrap"
 import { BufferLayerDesign } from "./BufferLayerDesign"
 import { JsonQLFilter } from "../JsonQLFilter"
 import { areVectorMapsEnabled } from "./vectorMaps"
-import EditHoverOver from "./EditHoverOver"
+import { EditHoverOver } from "./EditHoverOver"
 
 export interface BufferLayerDesignerComponentProps {
   /** Schema to use */
@@ -281,6 +281,7 @@ export default class BufferLayerDesignerComponent extends React.Component<Buffer
         table={this.props.design.table}
         idTable={this.props.design.table}
         defaultPopupFilterJoins={PopupFilterJoinsUtils.createDefaultPopupFilterJoins(this.props.design.table)}
+        aggrStatuses={["individual", "literal"]}
       />
     )
   }