@mwater/visualization 5.4.4 → 5.4.5

package/lib/quickfilter/Quickfilter.d.ts

@@ -3,6 +3,8 @@ 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 edited. */
+    id?: string;
     /** filter expression (left hand side only. Usually enum, enumset, text, date, datetime, id[], text[]) */
     expr: Expr;
     /** optional label */

package/lib/quickfilter/QuickfiltersDesignComponent.js

@@ -29,6 +29,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = QuickfiltersDesignComponent;
 const lodash_1 = __importDefault(require("lodash"));
 const react_1 = __importStar(require("react"));
+const uuid_1 = __importDefault(require("uuid"));
 const immer_1 = require("immer");
 const expressions_ui_1 = require("@mwater/expressions-ui");
 const expressions_1 = require("@mwater/expressions");
@@ -36,10 +37,19 @@ 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
 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);
+    // Add ids if not present
+    (0, react_1.useEffect)(() => {
+        if (props.design.some(qf => !qf.id)) {
+            const design = (0, immer_1.produce)(props.design, draft => {
+                for (let i = 0; i < draft.length; i++) {
+                    if (!draft[i].id) {
+                        draft[i].id = uuid_1.default.v4();
+                    }
+                }
+            });
+            props.onDesignChange(design);
+        }
+    }, [props.design]);
     const handleDesignChange = (design) => {
         const newDesign = (0, immer_1.produce)(design, draft => {
             // Update merged flag, clearing if not mergeable
@@ -51,10 +61,6 @@ function QuickfiltersDesignComponent(props) {
         });
         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)
     const isMergeable = (design, index) => {
         if (index === 0) {
@@ -92,7 +98,9 @@ function QuickfiltersDesignComponent(props) {
     };
     const handleAdd = () => {
         // Add blank to end
-        const design = props.design.concat([{ expr: null }]);
+        const design = (0, immer_1.produce)(props.design, draft => {
+            draft.push({ expr: null, id: uuid_1.default.v4() });
+        });
         props.onDesignChange(design);
     };
     const handleRemove = (index) => {
@@ -101,7 +109,7 @@ function QuickfiltersDesignComponent(props) {
         props.onDesignChange(design);
     };
     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 }),
+        react_1.default.createElement(ListEditorComponent_1.ListEditorComponent, { items: props.design, onItemsChange: handleDesignChange, renderItem: renderQuickfilter, getReorderableKey: (item, index) => item.id ?? 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));

package/package.json

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

package/src/quickfilter/Quickfilter.ts

@@ -4,6 +4,9 @@ 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 edited. */
+  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, { useState } from "react"
+import React, { useEffect, useState } from "react"
 import uuid from "uuid"
 import { produce } from "immer"
 import { ExprComponent } from "@mwater/expressions-ui"
@@ -21,10 +21,19 @@ export interface QuickfiltersDesignComponentProps {
 
 // Displays quick filters and allows their value to be modified
 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)
+  // Add ids if not present
+  useEffect(() => {
+    if (props.design.some(qf => !qf.id)) {
+      const design = produce(props.design, draft => {
+        for (let i = 0; i < draft.length; i++) {
+          if (!draft[i].id) {
+            draft[i].id = uuid.v4()
+          }
+        }
+      })
+      props.onDesignChange(design)
+    }
+  }, [props.design])
 
   const handleDesignChange = (design: Quickfilter[]) => {
     const newDesign = produce(design, draft => {
@@ -39,11 +48,6 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
     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)
   const isMergeable = (design: Quickfilter[], index: number) => {
     if (index === 0) {
@@ -102,7 +106,9 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
 
   const handleAdd = () => {
     // Add blank to end
-    const design = props.design.concat([{ expr: null }])
+    const design = produce(props.design, draft => {
+      draft.push({ expr: null, id: uuid.v4() })
+    })
     props.onDesignChange(design)
   }
 
@@ -115,11 +121,10 @@ export default function QuickfiltersDesignComponent(props: QuickfiltersDesignCom
   return (
     <div>
       <ListEditorComponent
-        key={reorderCounter}
         items={props.design}
-        onItemsChange={handleReorder}
+        onItemsChange={handleDesignChange}
         renderItem={renderQuickfilter}
-        getReorderableKey={(item, index) => index}
+        getReorderableKey={(item, index) => item.id ?? index}
       />
       {props.tables.length > 0 ? (
         <button type="button" className="btn btn-sm btn-link" onClick={handleAdd}>