@mwater/visualization 5.5.0 → 5.6.1

package/src/datagrids/DatagridViewComponent.tsx

@@ -82,6 +82,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   const [rows, setRows] = useState<any[]>([])
   const [entirelyLoaded, setEntirelyLoaded] = useState(false)
   const loadStateRef = useRef<LoadState | null>(null)
+  
+  // Track which design key the current rows were loaded with to avoid rendering stale data
+  // with a mismatched column structure (e.g. after column reorder)
+  const [loadedDesignKey, setLoadedDesignKey] = useState<string | null>(null)
+  const currentDesignKey = getDatagridReloadKey(props.design)
 
   // Get row header width based on selection and showRowNumbers
   const rowHeaderWidth = props.selectedRows 
@@ -154,7 +159,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
 
   /** Render row headers with optional selection checkboxes */
   const renderRowHeader = useCallback((options: RenderRowHeaderProps) => {
-    const rowHeaderStyle = {
+    const rowHeaderStyle: React.CSSProperties = {
       width: options.width,
       height: options.height,
       display: "flex",
@@ -165,9 +170,20 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
       padding: "0 8px"
     }
 
-    const rowId = options.row < rows.length ? rows[options.row].id : null
+    // If design key doesn't match, rows are stale - show loading state
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+      return (
+        <div style={rowHeaderStyle}>
+          {props.design.showRowNumbers ? (
+            <div style={{ flex: 1, textAlign: "right" }}>{options.row + 1}</div>
+          ) : null}
+        </div>
+      )
+    }
+
+    const rowId = rows[options.row].id
     const isSelected = rowId != null && props.selectedRows ? props.selectedRows.isSelected(rowId) : false
-    const isSubtable = options.row < rows.length ? rows[options.row].subtable >= 0 : false
+    const isSubtable = rows[options.row].subtable >= 0
 
     return (
       <div style={rowHeaderStyle}>
@@ -185,7 +201,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
         ) : null}
       </div>
     )
-  }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect])
+  }, [rows, props.selectedRows, props.onSelectedRowsChange, props.design.showRowNumbers, handleRowSelect, loadedDesignKey, currentDesignKey])
 
   const loadMoreRows = useStableCallback((callback?: () => void) => {
     const loadState: LoadState = {
@@ -217,6 +233,7 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
           loadStateRef.current = null
           setRows(prev => [...prev, ...newRows])
           setEntirelyLoaded(newRows.length < (props.pageSize || 100))
+          setLoadedDesignKey(getDatagridReloadKey(loadState.design))
           callback?.()
         }
       }
@@ -224,9 +241,9 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   function reload() {
-    console.log("reload")
     setRows([])
     setEntirelyLoaded(false)
+    setLoadedDesignKey(null)
   }
 
   // Reset rows when design, filters or refreshKey changes
@@ -342,6 +359,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const handleCopy = useStableCallback((rowIndex: number, colIndex: number) => {
+    // If design key doesn't match, rows are stale - don't copy
+    if (loadedDesignKey !== currentDesignKey || rowIndex >= rows.length) {
+      return
+    }
+
     const row = rows[rowIndex]
     const col = props.design.columns[colIndex]
     const value = row[`c${colIndex}`]
@@ -370,6 +392,13 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const renderCell = useStableCallback((options: RenderCellProps) => {
+    // If rows were loaded with a different design key, show loading state to avoid
+    // rendering stale data with mismatched column structure (e.g. after column reorder)
+    if (loadedDesignKey !== currentDesignKey) {
+      _.defer(() => loadMoreRows())
+      return <div style={{ padding: 8 }}><i className="fa fa-spinner fa-spin text-muted" /></div>
+    }
+    
     if (options.row >= rows.length) {
       _.defer(() => loadMoreRows())
       return <div style={{ padding: 8 }}><i className="fa fa-spinner fa-spin text-muted" /></div>
@@ -437,7 +466,9 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
         fontWeight: "bold",
         height: "100%",
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        overflow: "hidden",
+        width: options.width
       }}>
         {column.label || exprUtils.summarizeExpr(column.expr, props.design.locale)}
       </div>
@@ -445,7 +476,8 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
   })
 
   const renderCellEditor = useStableCallback((options: RenderCellEditorProps) => {
-    if (options.row >= rows.length) {
+    // If design key doesn't match, rows are stale - don't render editor
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
       return <div />
     }
 
@@ -477,6 +509,11 @@ const DatagridViewComponent = forwardRef<DatagridViewComponentRef, DatagridViewC
       return false
     }
 
+    // If design key doesn't match, rows are stale - don't allow edit
+    if (loadedDesignKey !== currentDesignKey || options.row >= rows.length) {
+      return false
+    }
+
     const rowId = rows[options.row].id
     if (rowId == null) {
       return false

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`}
           >