@mwater/visualization 5.5.0 → 5.6.0

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

@@ -869,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
@@ -962,7 +975,7 @@ marker-fill: ` +
       filters: options.filters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      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"]}
       />
     )
   }

package/src/maps/ChoroplethLayer.ts

@@ -914,7 +914,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -927,7 +927,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // Add filters on regions to outer query
       for (const filter of filters) {
         if (filter.table == regionsTable) {
-          ;(query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
         }
       }
 
@@ -1062,7 +1062,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -1075,7 +1075,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // Add filters on regions to outer query
       for (const filter of filters) {
         if (filter.table == regionsTable) {
-          ;(query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions2"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions2"))
         }
       }
 
@@ -1148,7 +1148,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
 
       // Scope overall
       if (design.scope) {
-        ;(query.where as JsonQLOp).exprs.push({
+        ; (query.where as JsonQLOp).exprs.push({
           type: "op",
           op: "=",
           exprs: [
@@ -1161,7 +1161,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       // Add filters on regions to outer query
       for (const filter of filters) {
         if (filter.table == regionsTable) {
-          ;(query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
+          ; (query.where as JsonQLOp).exprs.push(injectTableAlias(filter.jsonql, "regions"))
         }
       }
 
@@ -1600,6 +1600,19 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
         delete draft.filter
       }
 
+      // Clean hover over expressions only for indirect mode with a valid table
+      if (design.table && design.regionMode === "indirect" && 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", "aggregate"]
+            })
+          }
+        }
+      }
+
       if (design.detailLevel == null) {
         draft.detailLevel = 0
       }
@@ -1746,7 +1759,7 @@ export default class ChoroplethLayer extends Layer<ChoroplethLayerDesign> {
       filters: popupFilters,
       schema: options.schema,
       dataSource: options.dataSource,
-      hoverOverItems: options.design.hoverOver.items,
+      hoverOverItems: options.design.hoverOver!.items,
     })
   }
 }

package/src/maps/ChoroplethLayerDesign.ts

@@ -65,8 +65,11 @@ export default interface ChoroplethLayerDesign {
   /** customizable filtering for popup. See PopupFilterJoins.md. Only when region mode is "indirect"  */
   popupFilterJoins: PopupFilterJoins
 
-  /** Hover over items to display when hovering over a region. Only when region mode is "indirect" */
-  hoverOver: { items: HoverOverItem[] }
+  /** Hover over items to display when hovering over a region. Only when region mode is "indirect".
+   * This is an aggregate hover over, but can contain individual items. If so, only the first row
+   * of the resulting query will be displayed.
+   */
+  hoverOver?: { items: HoverOverItem[] }
 
   /** minimum zoom level */
   minZoom?: number