feat: add combined filter store

Author: iobuhov

packages/pluggableWidgets/datagrid-web/src/controllers/DatasourceParamsController.ts

@@ -20,6 +20,7 @@ type DatasourceParamsControllerSpec = {
     query: QueryController;
     columns: Columns;
     customFilters: FiltersInput;
+    widgetName: string;
 };
 
 type FiltersMeta = {
@@ -34,13 +35,14 @@ export class DatasourceParamsController implements ReactiveController {
     private columns: Columns;
     private query: QueryController;
     private customFilters: FiltersInput;
-    readonly widgetName: string = "dataKey";
+    readonly widgetName: string;
 
     constructor(host: ReactiveControllerHost, spec: DatasourceParamsControllerSpec) {
         host.addController(this);
         this.columns = spec.columns;
         this.query = spec.query;
         this.customFilters = spec.customFilters;
+        this.widgetName = spec.widgetName;
 
         makeAutoObservable(this, { setup: false });
     }
@@ -137,7 +139,7 @@ export class DatasourceParamsController implements ReactiveController {
     }
 
     static storageKey(widgetName: string, hash: string): string {
-        return `${widgetName}:[${hash}]`;
+        return `[${widgetName}:${hash}]`;
     }
 
     static restoreMeta(filter: FilterCondition, widgetName: string): FiltersMeta | null {

packages/pluggableWidgets/datagrid-web/src/helpers/state/RootGridStore.ts

@@ -66,7 +66,8 @@ export class RootGridStore extends BaseControllerHost {
         new DatasourceParamsController(this, {
             query,
             columns,
-            customFilters: customFilterHost
+            customFilters: customFilterHost,
+            widgetName: props.name
         });
 
         new RefreshController(this, {

packages/shared/widget-plugin-filtering/src/stores/generic/CombinedFilter.ts

@@ -0,0 +1,142 @@
+import { reduceArray, restoreArray } from "@mendix/filter-commons/condition-utils";
+import { disposeBatch } from "@mendix/widget-plugin-mobx-kit/disposeBatch";
+import { FilterCondition } from "mendix/filters";
+import { autorun, reaction } from "mobx";
+import { fnv1aHash } from "../../utils/fnv-1a-hash";
+
+type ConditionWithMeta = {
+    cond: FilterCondition | undefined;
+    meta: string;
+};
+
+interface ObservableInput {
+    condWithMeta: ConditionWithMeta;
+    metaKey: string;
+    hydrate(value: ConditionWithMeta): void;
+}
+
+type MetaBag = Record<string, string>;
+
+export class CombinedFilter {
+    private _inputs: ObservableInput[];
+    readonly stableKey: string;
+    readonly ownMetaKey = "CombinedFilter";
+
+    constructor(spec: { stableKey: string; inputs: ObservableInput[] }) {
+        this._inputs = spec.inputs;
+        this.stableKey = spec.stableKey;
+    }
+
+    storageKey(hash: string): string {
+        return `${this.stableKey}-${hash}`;
+    }
+
+    readMetaFromStorage(key: string): MetaBag | null {
+        const item = sessionStorage.getItem(key);
+        if (!item) {
+            return null;
+        }
+        try {
+            return JSON.parse(item) as MetaBag;
+        } catch (e) {
+            console.error(`CombinedFilter.readFilterMeta: Error parsing meta for key ${key}`, e);
+            return null;
+        }
+    }
+
+    clearFilterMeta(hash: string): void {
+        sessionStorage.removeItem(this.storageKey(hash));
+    }
+
+    filterHash(filter: FilterCondition): string {
+        return fnv1aHash(JSON.stringify(filter)).toString();
+    }
+
+    restoreMeta(filter: FilterCondition): MetaBag | null {
+        const hash = this.filterHash(filter);
+        const key = this.storageKey(hash);
+        return this.readMetaFromStorage(key);
+    }
+
+    hydrate(filter: FilterCondition | undefined): void {
+        if (!filter) {
+            return;
+        }
+
+        const meta = this.restoreMeta(filter);
+        if (!meta) {
+            return;
+        }
+
+        const conditions = restoreArray(filter, meta[this.ownMetaKey]);
+        if (conditions.length !== this._inputs.length) {
+            console.error(
+                `CombinedFilter.hydrate: Number of conditions (${conditions.length}) does not match number of inputs (${this._inputs.length})`
+            );
+            return;
+        }
+
+        for (let i = 0; i < this._inputs.length; i++) {
+            const input = this._inputs[i];
+            const condWithMeta: ConditionWithMeta = {
+                cond: conditions[i],
+                meta: meta[input.metaKey]
+            };
+
+            input.hydrate(condWithMeta);
+        }
+    }
+
+    get filter(): FilterCondition | undefined {
+        return this.filterWithBag.filter;
+    }
+
+    get filterWithBag(): {
+        filter: FilterCondition | undefined;
+        bag: MetaBag;
+        hash: string | null;
+    } {
+        const bag: MetaBag = {};
+        const conditions: Array<FilterCondition | undefined> = [];
+
+        for (const { condWithMeta: data, metaKey } of this._inputs) {
+            bag[metaKey] = data.meta;
+            conditions.push(data.cond);
+        }
+
+        const [filter, meta] = reduceArray(conditions);
+        bag[this.ownMetaKey] = meta;
+
+        return { filter, bag, hash: filter ? this.filterHash(filter) : null };
+    }
+
+    saveFilterMeta(hash: string | null, bag: MetaBag): void {
+        if (!hash) {
+            return;
+        }
+
+        sessionStorage.setItem(this.storageKey(hash), JSON.stringify(bag));
+    }
+
+    setup(): () => void {
+        const [add, disposeAll] = disposeBatch();
+
+        add(autorun(() => console.dir(this.filter)));
+
+        add(
+            reaction(
+                () => this.filterWithBag,
+                (next, prev) => {
+                    if (prev && prev.hash) {
+                        this.clearFilterMeta(prev.hash);
+                    }
+                    if (next.hash) {
+                        this.saveFilterMeta(next.hash, next.bag);
+                    }
+                }
+            )
+        );
+
+        return disposeAll;
+    }
+}

packages/shared/widget-plugin-filtering/src/utils/fnv-1a-hash.ts

@@ -0,0 +1,20 @@
+/* eslint-disable no-bitwise */
+
+/**
+ * Generates 32 bit FNV-1a hash from the given string.
+ * As explained here: http://isthe.com/chongo/tech/comp/fnv/
+ *
+ * @param s {string} String to generate hash from.
+ * @param [h] {number} FNV-1a hash generation init value.
+ * @returns {number} The result integer hash.
+ */
+export function fnv1aHash(s: string, h: number = 0x811c9dc5): number {
+    const l = s.length;
+
+    for (let i = 0; i < l; i++) {
+        h ^= s.charCodeAt(i);
+        h += (h << 1) + (h << 4) + (h << 7) + (h << 8) + (h << 24);
+    }
+
+    return h >>> 0;
+}