@mwater/visualization 5.4.3 → 5.4.4

package/lib/quickfilter/Quickfilter.d.ts

@@ -3,8 +3,6 @@ import { Expr } from "@mwater/expressions";
   design is an array of quick filters (user-selectable filters).
   */
 export interface Quickfilter {
-    /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is modified. */
-    id?: string;
     /** filter expression (left hand side only. Usually enum, enumset, text, date, datetime, id[], text[]) */
     expr: Expr;
     /** optional label */

package/lib/quickfilter/QuickfiltersDesignComponent.d.ts

@@ -11,11 +11,4 @@ export interface QuickfiltersDesignComponentProps {
     /** List of possible table ids to use */
     tables: string[];
 }
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-    handleDesignChange: (design: Quickfilter[]) => void;
-    isMergeable(design: Quickfilter[], index: number): boolean;
-    renderQuickfilter: (item: Quickfilter, index: number) => React.JSX.Element;
-    handleAdd: () => void;
-    handleRemove: (index: number) => void;
-    render(): React.JSX.Element;
-}
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps): React.JSX.Element;

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -26,40 +26,41 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = QuickfiltersDesignComponent;
 const lodash_1 = __importDefault(require("lodash"));
-const react_1 = __importDefault(require("react"));
-const uuid_1 = __importDefault(require("uuid"));
+const react_1 = __importStar(require("react"));
 const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
 const ui = __importStar(require("@mwater/react-library/lib/bootstrap"));
 const ListEditorComponent_1 = require("@mwater/react-library/lib/ListEditorComponent");
 // Displays quick filters and allows their value to be modified
-class QuickfiltersDesignComponent extends react_1.default.Component {
-    handleDesignChange = (design) => {
-        // Use immer produce to create immutable update
+function QuickfiltersDesignComponent(props) {
+    // This counter is used to force a complete remount of the ListEditorComponent when items are reordered
+    // This is necessary because the ExprComponent inside the list has internal state that can get corrupted
+    // during reordering operations. By remounting, we ensure a clean slate for all expression components.
+    const [reorderCounter, setReorderCounter] = (0, react_1.useState)(0);
+    const handleDesignChange = (design) => {
         const newDesign = (0, immer_1.produce)(design, draft => {
-            // Add UUID if missing
-            for (let i = 0; i < draft.length; i++) {
-                if (!draft[i].id) {
-                    draft[i].id = uuid_1.default.v4();
-                }
-            }
             // Update merged flag, clearing if not mergeable
             for (let i = 0; i < draft.length; i++) {
-                if (draft[i].merged && !this.isMergeable(draft, i)) {
+                if (draft[i].merged && !isMergeable(draft, i)) {
                     draft[i].merged = false;
                 }
             }
         });
-        this.props.onDesignChange(newDesign);
+        props.onDesignChange(newDesign);
+    };
+    const handleReorder = (design) => {
+        setReorderCounter(c => c + 1);
+        handleDesignChange(design);
     };
     // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-    isMergeable(design, index) {
+    const isMergeable = (design, index) => {
         if (index === 0) {
             return false;
         }
-        const exprUtils = new expressions_1.ExprUtils(this.props.schema);
+        const exprUtils = new expressions_1.ExprUtils(props.schema);
         const type = exprUtils.getExprType(design[index].expr);
         const prevType = exprUtils.getExprType(design[index - 1].expr);
         const idTable = exprUtils.getExprIdTable(design[index].expr);
@@ -81,33 +82,30 @@ class QuickfiltersDesignComponent extends react_1.default.Component {
             return false;
         }
         return true;
-    }
-    renderQuickfilter = (item, index) => {
-        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: this.props.schema, dataSource: this.props.dataSource, tables: this.props.tables, mergeable: this.isMergeable(this.props.design, index), onChange: (newItem) => {
-                const design = this.props.design.slice();
+    };
+    const renderQuickfilter = (item, index) => {
+        return react_1.default.createElement(QuickfilterDesignComponent, { key: index, design: item, schema: props.schema, dataSource: props.dataSource, tables: props.tables, mergeable: isMergeable(props.design, index), onChange: (newItem) => {
+                const design = props.design.slice();
                 design[index] = newItem;
-                return this.handleDesignChange(design);
-            }, onRemove: this.handleRemove.bind(null, index) });
+                handleDesignChange(design);
+            }, onRemove: () => handleRemove(index) });
     };
-    handleAdd = () => {
+    const handleAdd = () => {
         // Add blank to end
-        const design = this.props.design.concat([{ expr: null }]);
-        this.props.onDesignChange(design);
+        const design = props.design.concat([{ expr: null }]);
+        props.onDesignChange(design);
     };
-    handleRemove = (index) => {
-        const design = this.props.design.slice();
+    const handleRemove = (index) => {
+        const design = props.design.slice();
         design.splice(index, 1);
-        this.props.onDesignChange(design);
+        props.onDesignChange(design);
     };
-    render() {
-        return (react_1.default.createElement("div", null,
-            react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: this.props.design, onItemsChange: this.handleDesignChange, renderItem: this.renderQuickfilter, getReorderableKey: (item, index) => item.id || index }),
-            this.props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: this.handleAdd },
-                react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
-                T `Add Quick Filter`)) : undefined));
-    }
+    return (react_1.default.createElement("div", null,
+        react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { key: reorderCounter, items: props.design, onItemsChange: handleReorder, renderItem: renderQuickfilter, getReorderableKey: (item, index) => index }),
+        props.tables.length > 0 ? (react_1.default.createElement("button", { type: "button", className: "btn btn-sm btn-link", onClick: handleAdd },
+            react_1.default.createElement("span", { className: "fas fa-plus me-1" }),
+            T `Add Quick Filter`)) : undefined));
 }
-exports.default = QuickfiltersDesignComponent;
 /** Single quickfilter design component */
 class QuickfilterDesignComponent extends react_1.default.Component {
     constructor(props) {
@@ -119,10 +117,9 @@ class QuickfilterDesignComponent extends react_1.default.Component {
     }
     handleTableChange = (table) => {
         this.setState({ table });
-        const design = {
-            expr: null
-        };
-        return this.props.onChange(design);
+        this.props.onChange((0, immer_1.produce)(this.props.design, draft => {
+            draft.expr = null;
+        }));
     };
     handleExprChange = (expr) => {
         this.props.onChange((0, immer_1.produce)(this.props.design, draft => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mwater/visualization",
-  "version": "5.4.3",
+  "version": "5.4.4",
   "description": "Visualization library",
   "main": "lib/index.js",
   "scripts": {

package/src/quickfilter/Quickfilter.ts

@@ -4,9 +4,6 @@ import { Expr } from "@mwater/expressions"
   design is an array of quick filters (user-selectable filters).
   */
 export interface Quickfilter {
-  /** Optional id for the quickfilter. If not present, a random id will be generated the first time the quickfilter is modified. */
-  id?: string
-
   // `table`: (deprecated) table of filter
 
   /** filter expression (left hand side only. Usually enum, enumset, text, date, datetime, id[], text[]) */

package/src/quickfilter/QuickfiltersDesignComponent.tsx

@@ -1,5 +1,5 @@
 import _ from "lodash"
-import React from "react"
+import React, { useState } from "react"
 import uuid from "uuid"
 import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
@@ -20,35 +20,37 @@ export interface QuickfiltersDesignComponentProps {
 }
 
 // Displays quick filters and allows their value to be modified
-export default class QuickfiltersDesignComponent extends React.Component<QuickfiltersDesignComponentProps> {
-  handleDesignChange = (design: Quickfilter[]) => {
-    // Use immer produce to create immutable update
-    const newDesign = produce(design, draft => {
-      // Add UUID if missing
-      for (let i = 0; i < draft.length; i++) {
-        if (!draft[i].id) {
-          draft[i].id = uuid.v4()
-        }
-      }
+export default function QuickfiltersDesignComponent(props: QuickfiltersDesignComponentProps) {
+  // This counter is used to force a complete remount of the ListEditorComponent when items are reordered
+  // This is necessary because the ExprComponent inside the list has internal state that can get corrupted
+  // during reordering operations. By remounting, we ensure a clean slate for all expression components.
+  const [reorderCounter, setReorderCounter] = useState(0)
 
+  const handleDesignChange = (design: Quickfilter[]) => {
+    const newDesign = produce(design, draft => {
       // Update merged flag, clearing if not mergeable
       for (let i = 0; i < draft.length; i++) {
-        if (draft[i].merged && !this.isMergeable(draft, i)) {
+        if (draft[i].merged && !isMergeable(draft, i)) {
           draft[i].merged = false
         }
       }
     })
 
-    this.props.onDesignChange(newDesign)
+    props.onDesignChange(newDesign)
+  }
+
+  const handleReorder = (design: Quickfilter[]) => {
+    setReorderCounter(c => c + 1)
+    handleDesignChange(design)
   }
 
   // Determine if quickfilter at index is mergeable with previous (same type, id table and enum values)
-  isMergeable(design: Quickfilter[], index: number) {
+  const isMergeable = (design: Quickfilter[], index: number) => {
     if (index === 0) {
       return false
     }
 
-    const exprUtils = new ExprUtils(this.props.schema)
+    const exprUtils = new ExprUtils(props.schema)
 
     const type = exprUtils.getExprType(design[index].expr)
     const prevType = exprUtils.getExprType(design[index - 1].expr)
@@ -81,53 +83,52 @@ export default class QuickfiltersDesignComponent extends React.Component<Quickfi
     return true
   }
 
-  renderQuickfilter = (item: Quickfilter, index: number) => {
+  const renderQuickfilter = (item: Quickfilter, index: number) => {
     return <QuickfilterDesignComponent
       key={index}
       design={item}
-      schema={this.props.schema}
-      dataSource={this.props.dataSource}
-      tables={this.props.tables}
-      mergeable={this.isMergeable(this.props.design, index)}
+      schema={props.schema}
+      dataSource={props.dataSource}
+      tables={props.tables}
+      mergeable={isMergeable(props.design, index)}
       onChange={(newItem: Quickfilter) => {
-        const design = this.props.design.slice()
+        const design = props.design.slice()
         design[index] = newItem
-        return this.handleDesignChange(design)
+        handleDesignChange(design)
       }}
-      onRemove={this.handleRemove.bind(null, index)}
+      onRemove={() => handleRemove(index)}
     />
   }
 
-  handleAdd = () => {
+  const handleAdd = () => {
     // Add blank to end
-    const design = this.props.design.concat([{ expr: null }])
-    this.props.onDesignChange(design)
+    const design = props.design.concat([{ expr: null }])
+    props.onDesignChange(design)
   }
 
-  handleRemove = (index: number) => {
-    const design = this.props.design.slice()
+  const handleRemove = (index: number) => {
+    const design = props.design.slice()
     design.splice(index, 1)
-    this.props.onDesignChange(design)
+    props.onDesignChange(design)
   }
 
-  render() {
-    return (
-      <div>
-        <ListEditorComponent
-          items={this.props.design}
-          onItemsChange={this.handleDesignChange}
-          renderItem={this.renderQuickfilter}
-          getReorderableKey={(item, index) => item.id || index}
-        />
-        {this.props.tables.length > 0 ? (
-          <button type="button" className="btn btn-sm btn-link" onClick={this.handleAdd}>
-            <span className="fas fa-plus me-1" />
-            {T`Add Quick Filter`}
-          </button>
-        ) : undefined}
-      </div>
-    )
-  }
+  return (
+    <div>
+      <ListEditorComponent
+        key={reorderCounter}
+        items={props.design}
+        onItemsChange={handleReorder}
+        renderItem={renderQuickfilter}
+        getReorderableKey={(item, index) => index}
+      />
+      {props.tables.length > 0 ? (
+        <button type="button" className="btn btn-sm btn-link" onClick={handleAdd}>
+          <span className="fas fa-plus me-1" />
+          {T`Add Quick Filter`}
+        </button>
+      ) : undefined}
+    </div>
+  )
 }
 
 interface QuickfilterDesignComponentProps {
@@ -162,10 +163,9 @@ class QuickfilterDesignComponent extends React.Component<
 
   handleTableChange = (table: string) => {
     this.setState({ table })
-    const design = {
-      expr: null
-    }
-    return this.props.onChange(design)
+    this.props.onChange(produce(this.props.design, draft => {
+      draft.expr = null
+    }))
   }
 
   handleExprChange = (expr: Expr) => {