flowerbi-react 1.19.0 → 2.0.0

package/README.md

@@ -2,7 +2,7 @@
 
 Defines hooks for working with FlowerBI from React applications:
 
-- `useQuery` - the state of a query and the data it produces
+- `useFlowerBI` - the state of a query and the data it produces
 - `usePageFilters` - a shared set of filters that chart components can interact via
 
 Also some components:

package/dist/FlowerBITable.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { QueryValues, ExpandedQueryResult, QuerySelect } from "flowerbi";
 export declare type ColumnDefinition = string | [string, "left" | "right"];
 export declare type FlowerBITableProps<S extends QuerySelect> = {

package/dist/FlowerBITable.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.FlowerBITable = void 0;
 var react_1 = __importDefault(require("react"));
 var flowerbi_1 = require("flowerbi");
 function renderCell(key, def) {

package/dist/FlowerBITable.js.map

@@ -1 +1 @@
-{"version":3,"file":"FlowerBITable.js","sourceRoot":"","sources":["../src/FlowerBITable.tsx"],"names":[],"mappings":";;;;;AAAA,gDAA0B;AAC1B,qCAA2G;AAI3G,SAAS,UAAU,CAAC,GAAW,EAAE,GAAqB;IAClD,IAAM,KAAK,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,IAAM,KAAK,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAExD,OAAO,CACH,sCAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,IACzB,KAAK,CACL,CACR,CAAC;AACN,CAAC;AASD,SAAgB,aAAa,CAAwB,EAAsC;QAArC,cAAI,EAAE,oBAAO;IAC/D,OAAO,CACH;QACI;YACI,0CACK,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CAClC,sCAAI,GAAG,EAAE,MAAM,IAAG,MAAM,CAAM,CACjC,EAFqC,CAErC,CAAC,CACD,CACD;QACR,6CACK,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,CAAC;;YAAK,OAAA,CAC7B,sCAAI,GAAG,QAAE,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,mCAAI,CAAC,IAEzC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,UAAU,CAC3C,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,yBAAc,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EADhC,CACgC,CAAC,CAErE,CACR,CAAA;SAAA,CAAC,CACE;QACP,IAAI,CAAC,MAAM,IAAI,CACZ;YACI,0CAEI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,UAAU,CAC3C,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,2BAAgB,CAAC,IAAI,CAAC,MAAO,CAAC,CAAC,CAAC,EAD3B,CAC2B,CAAC,CAEhE,CACD,CACX,CACG,CACX,CAAC;AACN,CAAC;AAhCD,sCAgCC"}
+{"version":3,"file":"FlowerBITable.js","sourceRoot":"","sources":["../src/FlowerBITable.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAA0B;AAC1B,qCAA2G;AAI3G,SAAS,UAAU,CAAC,GAAW,EAAE,GAAqB;IAClD,IAAM,KAAK,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IACrD,IAAM,KAAK,GAAG,OAAO,GAAG,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;IAExD,OAAO,CACH,sCAAI,GAAG,EAAE,GAAG,EAAE,SAAS,EAAE,KAAK,IACzB,KAAK,CACL,CACR,CAAC;AACN,CAAC;AASD,SAAgB,aAAa,CAAwB,EAAsC;QAArC,IAAI,UAAA,EAAE,OAAO,aAAA;IAC/D,OAAO,CACH;QACI;YACI,0CACK,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,CAClC,sCAAI,GAAG,EAAE,MAAM,IAAG,MAAM,CAAM,CACjC,EAFqC,CAErC,CAAC,CACD,CACD;QACR,6CACK,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,UAAC,MAAM,EAAE,CAAC;;YAAK,OAAA,CAC7B,sCAAI,GAAG,EAAE,MAAA,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,QAAQ,CAAC,mCAAI,CAAC,IAEzC,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,UAAU,CAC3C,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,yBAAc,CAAC,MAAM,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,EADhC,CACgC,CAAC,CAErE,CACR,CAAA;SAAA,CAAC,CACE;QACP,IAAI,CAAC,MAAM,IAAI,CACZ;YACI,0CAEI,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,GAAG,CAAC,UAAC,MAAM,IAAK,OAAA,UAAU,CAC3C,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,IAAI,2BAAgB,CAAC,IAAI,CAAC,MAAO,CAAC,CAAC,CAAC,EAD3B,CAC2B,CAAC,CAEhE,CACD,CACX,CACG,CACX,CAAC;AACN,CAAC;AAhCD,sCAgCC"}

package/dist/index.d.ts

@@ -1,3 +1,3 @@
 export * from "./FlowerBITable";
 export * from "./usePageFilters";
-export * from "./useQuery";
+export * from "./useFlowerBI";

package/dist/index.js

@@ -1,9 +1,16 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./FlowerBITable"));
-__export(require("./usePageFilters"));
-__export(require("./useQuery"));
+__exportStar(require("./FlowerBITable"), exports);
+__exportStar(require("./usePageFilters"), exports);
+__exportStar(require("./useFlowerBI"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,qCAAgC;AAChC,sCAAiC;AACjC,gCAA2B"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,kDAAgC;AAChC,mDAAiC;AACjC,gDAA8B"}

package/dist/useFlowerBI.d.ts

@@ -0,0 +1,50 @@
+import { Query, QueryFetch, QuerySelect, ExpandedQueryResult } from "flowerbi";
+export declare type UseQueryState = "init" | "ready" | "refresh" | "error";
+export interface UseQueryResult<S extends QuerySelect> extends ExpandedQueryResult<S> {
+    /**
+     * The state of the query operation:
+     *
+     * - `init` - no result has been downloaded yet
+     * - `ready` - result has been downloaded
+     * - `refresh` - a new result is being downloaded
+     * - `error` - most recent query attempt failed
+     */
+    state: UseQueryState;
+}
+/**
+ * Defines another query on which our query depends - for example a
+ * first query may return the top 10 vendors, and a subsequent query
+ * may then use an `in` filter to get details about those 10 vendors.
+ */
+export declare type QueryDependency = {
+    /**
+     * The result of the query we depend on
+     */
+    dependency: UseQueryResult<QuerySelect>;
+    /**
+     * If true (default is false) then if the dependency query produces
+     * an empty result, our query should also produce an empty result,
+     * so there is no need to execute it.
+     */
+    nonEmpty?: boolean;
+};
+/**
+ * A custom React hook that evaluates to the result of a
+ * [Query](../flowerbi/interfaces/query.html), making it easy to perform a
+ * query from within a component.
+ *
+ * The returned object has a strongly-typed `records` array, and optionally
+ * a `totals` object. It has a `state` of type {@link UseQueryState} that
+ * can be used to show a loading indicator.
+ *
+ * @param fetch The fetch function to use.
+ * @param query The [Query](../flowerbi/interfaces/query.html) specification.
+ * @param dependencies Optionally, a list of one or more other queries whose
+ * results are used to build this query, so we wait for them before executing,
+ * and optionally short-circuit to an empty result if the dependency is empty.
+ */
+export declare function useFlowerBI<S extends QuerySelect>(fetch: QueryFetch, query: Query<S>, dependencies?: QueryDependency[]): UseQueryResult<S>;
+/**
+ * Alias of useFlowerBI for backward compatibility.
+ */
+export declare const useQuery: typeof useFlowerBI;

package/dist/useFlowerBI.js

@@ -0,0 +1,82 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = exports.useFlowerBI = void 0;
+var react_1 = require("react");
+var flowerbi_1 = require("flowerbi");
+var json_stable_stringify_1 = __importDefault(require("json-stable-stringify"));
+/**
+ * A custom React hook that evaluates to the result of a
+ * [Query](../flowerbi/interfaces/query.html), making it easy to perform a
+ * query from within a component.
+ *
+ * The returned object has a strongly-typed `records` array, and optionally
+ * a `totals` object. It has a `state` of type {@link UseQueryState} that
+ * can be used to show a loading indicator.
+ *
+ * @param fetch The fetch function to use.
+ * @param query The [Query](../flowerbi/interfaces/query.html) specification.
+ * @param dependencies Optionally, a list of one or more other queries whose
+ * results are used to build this query, so we wait for them before executing,
+ * and optionally short-circuit to an empty result if the dependency is empty.
+ */
+function useFlowerBI(fetch, query, dependencies) {
+    var queryJson = (0, flowerbi_1.jsonifyQuery)(query);
+    var _a = (0, react_1.useState)("init"), state = _a[0], setState = _a[1];
+    var _b = (0, react_1.useState)({ records: [] }), result = _b[0], setResult = _b[1];
+    (0, react_1.useEffect)(function () {
+        var disposed = false; // discard stale results
+        if (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length) {
+            // if any not ready, neither are we
+            if (dependencies.some(function (x) { return x.dependency.state !== "ready"; })) {
+                if (state !== "init") {
+                    setState("refresh");
+                }
+                return;
+            }
+            // if any with option nonEmpty produced empty result, so do we
+            if (dependencies.filter(function (x) { return !!x.nonEmpty; }).some(function (x) { return !x.dependency.records.length; })) {
+                setState("ready");
+                setResult({ records: [] });
+                return;
+            }
+        }
+        if (state !== "init") {
+            setState("refresh");
+        }
+        fetch(queryJson).then(function (x) {
+            if (!disposed) {
+                setState("ready");
+                setResult(x);
+            }
+        }, function () {
+            if (!disposed) {
+                setState("error");
+            }
+        });
+        return function () {
+            disposed = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fetch, (0, json_stable_stringify_1.default)(queryJson)]);
+    return __assign(__assign({}, (0, flowerbi_1.expandQueryResult)(query.select, result)), { state: state });
+}
+exports.useFlowerBI = useFlowerBI;
+/**
+ * Alias of useFlowerBI for backward compatibility.
+ */
+exports.useQuery = useFlowerBI;
+//# sourceMappingURL=useFlowerBI.js.map

package/dist/useFlowerBI.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useFlowerBI.js","sourceRoot":"","sources":["../src/useFlowerBI.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAAoD;AACpD,qCAAiI;AACjI,gFAAoD;AAkCpD;;;;;;;;;;;;;;GAcG;AACH,SAAgB,WAAW,CAAwB,KAAiB,EAAE,KAAe,EAAE,YAAgC;IACnH,IAAM,SAAS,GAAG,IAAA,uBAAY,EAAC,KAAK,CAAC,CAAC;IAEhC,IAAA,KAAoB,IAAA,gBAAQ,EAAgB,MAAM,CAAC,EAAlD,KAAK,QAAA,EAAE,QAAQ,QAAmC,CAAC;IACpD,IAAA,KAAsB,IAAA,gBAAQ,EAAkB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAA/D,MAAM,QAAA,EAAE,SAAS,QAA8C,CAAC;IAEvE,IAAA,iBAAS,EAAC;QACN,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC,wBAAwB;QAE9C,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,EAAE;YACtB,mCAAmC;YACnC,IAAI,YAAY,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,OAAO,EAA9B,CAA8B,CAAC,EAAE;gBACxD,IAAI,KAAK,KAAK,MAAM,EAAE;oBAClB,QAAQ,CAAC,SAAS,CAAC,CAAC;iBACvB;gBACD,OAAO;aACV;YAED,8DAA8D;YAC9D,IAAI,YAAY,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,EAA5B,CAA4B,CAAC,EAAE;gBAChF,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAClB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC3B,OAAO;aACV;SACJ;QAED,IAAI,KAAK,KAAK,MAAM,EAAE;YAClB,QAAQ,CAAC,SAAS,CAAC,CAAC;SACvB;QAED,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CACjB,UAAA,CAAC;YACG,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAClB,SAAS,CAAC,CAAC,CAAC,CAAC;aAChB;QACL,CAAC,EACD;YACI,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;aACrB;QACL,CAAC,CACJ,CAAC;QAEF,OAAO;YACH,QAAQ,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QACF,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,EAAE,IAAA,+BAAe,EAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAExC,6BAAY,IAAA,4BAAiB,EAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,KAAE,KAAK,OAAA,IAAG;AACjE,CAAC;AAnDD,kCAmDC;AAED;;GAEG;AACU,QAAA,QAAQ,GAAG,WAAW,CAAC"}

package/dist/usePageFilters.js

@@ -10,17 +10,29 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePageFilters = void 0;
 var react_1 = require("react");
+var json_stable_stringify_1 = __importDefault(require("json-stable-stringify"));
 var clearedState = {
     global: [],
     interactions: [],
     interactionKey: "",
 };
 function usePageFilters() {
-    var _a = react_1.useState(clearedState), state = _a[0], set = _a[1];
+    var _a = (0, react_1.useState)(clearedState), state = _a[0], set = _a[1];
     function setInteraction(interactionKey, interactions) {
-        set(__assign(__assign({}, state), { interactionKey: interactionKey, interactions: interactions }));
+        console.log(interactionKey, state.interactionKey, state.interactionKey === interactionKey, interactions, state.interactions, (0, json_stable_stringify_1.default)(state.interactions), (0, json_stable_stringify_1.default)(interactions), (0, json_stable_stringify_1.default)(state.interactions) === (0, json_stable_stringify_1.default)(interactions));
+        if (state.interactionKey === interactionKey &&
+            (0, json_stable_stringify_1.default)(state.interactions) === (0, json_stable_stringify_1.default)(interactions)) {
+            clearInteraction();
+        }
+        else {
+            set(__assign(__assign({}, state), { interactionKey: interactionKey, interactions: interactions }));
+        }
     }
     function setGlobal(global) {
         set(__assign(__assign({}, state), { global: global }));

package/dist/usePageFilters.js.map

@@ -1 +1 @@
-{"version":3,"file":"usePageFilters.js","sourceRoot":"","sources":["../src/usePageFilters.ts"],"names":[],"mappings":";;;;;;;;;;;;;AAAA,+BAAiC;AAkBjC,IAAM,YAAY,GAAqB;IACnC,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,EAAE;IAChB,cAAc,EAAE,EAAE;CACrB,CAAC;AAEF,SAAgB,cAAc;IACpB,IAAA,mCAAuD,EAAtD,aAAK,EAAE,WAA+C,CAAC;IAC9D,SAAS,cAAc,CAAC,cAAsB,EAAE,YAA0B;QACtE,GAAG,uBAAM,KAAK,KAAE,cAAc,gBAAA,EAAE,YAAY,cAAA,IAAG,CAAC;IACpD,CAAC;IACD,SAAS,SAAS,CAAC,MAAoB;QACnC,GAAG,uBAAM,KAAK,KAAE,MAAM,QAAA,IAAG,CAAC;IAC9B,CAAC;IACD,SAAS,gBAAgB;QACrB,GAAG,uBAAM,KAAK,KAAE,cAAc,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,IAAG,CAAC;IAC5D,CAAC;IACD,SAAS,WAAW;QAChB,GAAG,uBAAM,KAAK,KAAE,MAAM,EAAE,EAAE,IAAG,CAAC;IAClC,CAAC;IACD,SAAS,QAAQ;QACb,GAAG,CAAC,YAAY,CAAC,CAAC;IACtB,CAAC;IACD,SAAS,UAAU,CAAC,GAAW;QAC3B,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,GAAG,KAAK,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACrF,CAAC;IACD,6BAAY,KAAK,KAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,gBAAgB,kBAAA,EAAE,WAAW,aAAA,EAAE,QAAQ,UAAA,EAAE,UAAU,YAAA,IAAG;AACxG,CAAC;AAtBD,wCAsBC"}
+{"version":3,"file":"usePageFilters.js","sourceRoot":"","sources":["../src/usePageFilters.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAAiC;AAEjC,gFAAoD;AAiBpD,IAAM,YAAY,GAAqB;IACnC,MAAM,EAAE,EAAE;IACV,YAAY,EAAE,EAAE;IAChB,cAAc,EAAE,EAAE;CACrB,CAAC;AAEF,SAAgB,cAAc;IACpB,IAAA,KAAe,IAAA,gBAAQ,EAAmB,YAAY,CAAC,EAAtD,KAAK,QAAA,EAAE,GAAG,QAA4C,CAAC;IAC9D,SAAS,cAAc,CAAC,cAAsB,EAAE,YAA0B;QACtE,OAAO,CAAC,GAAG,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,EAAE,KAAK,CAAC,cAAc,KAAK,cAAc,EACrF,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,IAAA,+BAAe,EAAC,KAAK,CAAC,YAAY,CAAC,EAAE,IAAA,+BAAe,EAAC,YAAY,CAAC,EAClE,IAAA,+BAAe,EAAC,KAAK,CAAC,YAAY,CAAC,KAAK,IAAA,+BAAe,EAAC,YAAY,CAAC,CAAC,CAAC;QAE3E,IAAI,KAAK,CAAC,cAAc,KAAK,cAAc;YACvC,IAAA,+BAAe,EAAC,KAAK,CAAC,YAAY,CAAC,KAAK,IAAA,+BAAe,EAAC,YAAY,CAAC,EAAE;YACvE,gBAAgB,EAAE,CAAC;SACtB;aAAM;YACH,GAAG,uBAAM,KAAK,KAAE,cAAc,gBAAA,EAAE,YAAY,cAAA,IAAG,CAAC;SACnD;IACL,CAAC;IACD,SAAS,SAAS,CAAC,MAAoB;QACnC,GAAG,uBAAM,KAAK,KAAE,MAAM,QAAA,IAAG,CAAC;IAC9B,CAAC;IACD,SAAS,gBAAgB;QACrB,GAAG,uBAAM,KAAK,KAAE,cAAc,EAAE,EAAE,EAAE,YAAY,EAAE,EAAE,IAAG,CAAC;IAC5D,CAAC;IACD,SAAS,WAAW;QAChB,GAAG,uBAAM,KAAK,KAAE,MAAM,EAAE,EAAE,IAAG,CAAC;IAClC,CAAC;IACD,SAAS,QAAQ;QACb,GAAG,CAAC,YAAY,CAAC,CAAC;IACtB,CAAC;IACD,SAAS,UAAU,CAAC,GAAW;QAC3B,IAAM,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC;QAC5B,OAAO,GAAG,KAAK,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC;IACrF,CAAC;IACD,6BAAY,KAAK,KAAE,cAAc,gBAAA,EAAE,SAAS,WAAA,EAAE,gBAAgB,kBAAA,EAAE,WAAW,aAAA,EAAE,QAAQ,UAAA,EAAE,UAAU,YAAA,IAAG;AACxG,CAAC;AAhCD,wCAgCC"}

package/dist/useQuery.d.ts

@@ -11,6 +11,23 @@ export interface UseQueryResult<S extends QuerySelect> extends ExpandedQueryResu
      */
     state: UseQueryState;
 }
+/**
+ * Defines another query on which our query depends - for example a
+ * first query may return the top 10 vendors, and a subsequent query
+ * may then use an `in` filter to get details about those 10 vendors.
+ */
+export declare type QueryDependency = {
+    /**
+     * The result of the query we depend on
+     */
+    dependency: UseQueryResult<QuerySelect>;
+    /**
+     * If true (default is false) then if the dependency query produces
+     * an empty result, our query should also produce an empty result,
+     * so there is no need to execute it.
+     */
+    nonEmpty?: boolean;
+};
 /**
  * A custom React hook that evaluates to the result of a
  * [Query](../flowerbi/interfaces/query.html), making it easy to perform a
@@ -22,5 +39,8 @@ export interface UseQueryResult<S extends QuerySelect> extends ExpandedQueryResu
  *
  * @param fetch The fetch function to use.
  * @param query The [Query](../flowerbi/interfaces/query.html) specification.
+ * @param dependencies Optionally, a list of one or more other queries whose
+ * results are used to build this query, so we wait for them before executing,
+ * and optionally short-circuit to an empty result if the dependency is empty.
  */
-export declare function useQuery<S extends QuerySelect>(fetch: QueryFetch, query: Query<S>): UseQueryResult<S>;
+export declare function useQuery<S extends QuerySelect>(fetch: QueryFetch, query: Query<S>, dependencies?: QueryDependency[]): UseQueryResult<S>;

package/dist/useQuery.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useQuery = void 0;
 var react_1 = require("react");
 var flowerbi_1 = require("flowerbi");
 var json_stable_stringify_1 = __importDefault(require("json-stable-stringify"));
@@ -28,13 +29,31 @@ var json_stable_stringify_1 = __importDefault(require("json-stable-stringify"));
  *
  * @param fetch The fetch function to use.
  * @param query The [Query](../flowerbi/interfaces/query.html) specification.
+ * @param dependencies Optionally, a list of one or more other queries whose
+ * results are used to build this query, so we wait for them before executing,
+ * and optionally short-circuit to an empty result if the dependency is empty.
  */
-function useQuery(fetch, query) {
-    var queryJson = flowerbi_1.jsonifyQuery(query);
-    var _a = react_1.useState("init"), state = _a[0], setState = _a[1];
-    var _b = react_1.useState({ records: [] }), result = _b[0], setResult = _b[1];
-    react_1.useEffect(function () {
-        var disposed = false;
+function useQuery(fetch, query, dependencies) {
+    var queryJson = (0, flowerbi_1.jsonifyQuery)(query);
+    var _a = (0, react_1.useState)("init"), state = _a[0], setState = _a[1];
+    var _b = (0, react_1.useState)({ records: [] }), result = _b[0], setResult = _b[1];
+    (0, react_1.useEffect)(function () {
+        var disposed = false; // discard stale results
+        if (dependencies === null || dependencies === void 0 ? void 0 : dependencies.length) {
+            // if any not ready, neither are we
+            if (dependencies.some(function (x) { return x.dependency.state !== "ready"; })) {
+                if (state !== "init") {
+                    setState("refresh");
+                }
+                return;
+            }
+            // if any with option nonEmpty produced empty result, so do we
+            if (dependencies.filter(function (x) { return !!x.nonEmpty; }).some(function (x) { return !x.dependency.records.length; })) {
+                setState("ready");
+                setResult({ records: [] });
+                return;
+            }
+        }
         if (state !== "init") {
             setState("refresh");
         }
@@ -48,9 +67,12 @@ function useQuery(fetch, query) {
                 setState("error");
             }
         });
-        return function () { disposed = true; };
-    }, [json_stable_stringify_1.default(queryJson)]);
-    return __assign(__assign({}, flowerbi_1.expandQueryResult(query.select, result)), { state: state });
+        return function () {
+            disposed = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fetch, (0, json_stable_stringify_1.default)(queryJson)]);
+    return __assign(__assign({}, (0, flowerbi_1.expandQueryResult)(query.select, result)), { state: state });
 }
 exports.useQuery = useQuery;
 //# sourceMappingURL=useQuery.js.map

package/dist/useQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"useQuery.js","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,+BAA4C;AAC5C,qCAAiI;AACjI,gFAAoD;AAgBpD;;;;;;;;;;;GAWG;AACH,SAAgB,QAAQ,CAAwB,KAAiB,EAAE,KAAe;IAE9E,IAAM,SAAS,GAAG,uBAAY,CAAC,KAAK,CAAC,CAAC;IAEhC,IAAA,6BAAmD,EAAlD,aAAK,EAAE,gBAA2C,CAAC;IACpD,IAAA,sCAAgE,EAA/D,cAAM,EAAE,iBAAuD,CAAC;IAEvE,iBAAS,CAAC;QACN,IAAI,QAAQ,GAAG,KAAK,CAAC;QACrB,IAAI,KAAK,KAAK,MAAM,EAAE;YAClB,QAAQ,CAAC,SAAS,CAAC,CAAC;SACvB;QACD,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,UAAA,CAAC;YACnB,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAClB,SAAS,CAAC,CAAC,CAAC,CAAC;aAChB;QACL,CAAC,EAAE;YACC,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;aACrB;QACL,CAAC,CAAC,CAAC;QAEH,OAAO,cAAQ,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAC;IACtC,CAAC,EAAE,CAAC,+BAAe,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAEjC,6BAAY,4BAAiB,CAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,KAAE,KAAK,OAAA,IAAG;AACjE,CAAC;AA3BD,4BA2BC"}
+{"version":3,"file":"useQuery.js","sourceRoot":"","sources":["../src/useQuery.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,+BAAoD;AACpD,qCAAiI;AACjI,gFAAoD;AAkCpD;;;;;;;;;;;;;;GAcG;AACH,SAAgB,QAAQ,CAAwB,KAAiB,EAAE,KAAe,EAAE,YAAgC;IAChH,IAAM,SAAS,GAAG,IAAA,uBAAY,EAAC,KAAK,CAAC,CAAC;IAEhC,IAAA,KAAoB,IAAA,gBAAQ,EAAgB,MAAM,CAAC,EAAlD,KAAK,QAAA,EAAE,QAAQ,QAAmC,CAAC;IACpD,IAAA,KAAsB,IAAA,gBAAQ,EAAkB,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,EAA/D,MAAM,QAAA,EAAE,SAAS,QAA8C,CAAC;IAEvE,IAAA,iBAAS,EAAC;QACN,IAAI,QAAQ,GAAG,KAAK,CAAC,CAAC,wBAAwB;QAE9C,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,MAAM,EAAE;YACtB,mCAAmC;YACnC,IAAI,YAAY,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,UAAU,CAAC,KAAK,KAAK,OAAO,EAA9B,CAA8B,CAAC,EAAE;gBACxD,IAAI,KAAK,KAAK,MAAM,EAAE;oBAClB,QAAQ,CAAC,SAAS,CAAC,CAAC;iBACvB;gBACD,OAAO;aACV;YAED,8DAA8D;YAC9D,IAAI,YAAY,CAAC,MAAM,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAZ,CAAY,CAAC,CAAC,IAAI,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,CAAC,UAAU,CAAC,OAAO,CAAC,MAAM,EAA5B,CAA4B,CAAC,EAAE;gBAChF,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAClB,SAAS,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,CAAC;gBAC3B,OAAO;aACV;SACJ;QAED,IAAI,KAAK,KAAK,MAAM,EAAE;YAClB,QAAQ,CAAC,SAAS,CAAC,CAAC;SACvB;QAED,KAAK,CAAC,SAAS,CAAC,CAAC,IAAI,CACjB,UAAA,CAAC;YACG,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;gBAClB,SAAS,CAAC,CAAC,CAAC,CAAC;aAChB;QACL,CAAC,EACD;YACI,IAAI,CAAC,QAAQ,EAAE;gBACX,QAAQ,CAAC,OAAO,CAAC,CAAC;aACrB;QACL,CAAC,CACJ,CAAC;QAEF,OAAO;YACH,QAAQ,GAAG,IAAI,CAAC;QACpB,CAAC,CAAC;QACF,uDAAuD;IAC3D,CAAC,EAAE,CAAC,KAAK,EAAE,IAAA,+BAAe,EAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IAExC,6BAAY,IAAA,4BAAiB,EAAC,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,KAAE,KAAK,OAAA,IAAG;AACjE,CAAC;AAnDD,4BAmDC"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flowerbi-react",
-    "version": "1.19.0",
+    "version": "2.0.0",
     "author": "Daniel Earwicker <dan@earwicker.com>",
     "license": "MIT",
     "description": "React helpers for FlowerBI",
@@ -9,22 +9,22 @@
     "dependencies": {
         "@types/json-stable-stringify": "^1.0.32",
         "@types/react": "^16.9.0",
-        "json-stable-stringify": "^1.0.1",
-        "flowerbi": "1.19.0"
+        "flowerbi": "2.0.0",
+        "json-stable-stringify": "^1.0.1"
     },
     "devDependencies": {
-        "prettier": "^2.0.5",
-        "react": "^16.13.1",
-        "typescript": "~3.8.3",
-        "typedoc": "^0.17.8"
+        "prettier": "^2.5.1",
+        "react": "^17.0.2",
+        "typedoc": "^0.22.11",
+        "typescript": "^4.5.5"
     },
     "peerDependencies": {
-        "react": "^16.13.1"
+        "react": "^16.13.1 || ^17.0.2"
     },
     "scripts": {
         "build": "tsc",
         "watch": "tsc -w",
-        "docs": "typedoc --mode file --out ../../../docs/typedoc/flowerbi-react src",
+        "docs": "typedoc --out ../../../docs/typedoc/flowerbi-react src",
         "prepare": "npm run build && npm run docs"
     }
 }

package/src/index.ts

@@ -1,3 +1,3 @@
 export * from "./FlowerBITable";
 export * from "./usePageFilters";
-export * from "./useQuery";
+export * from "./useFlowerBI";

package/src/useFlowerBI.ts

@@ -0,0 +1,108 @@
+import { useState, useEffect, useRef } from "react";
+import { Query, QueryFetch, jsonifyQuery, QueryResultJson, QuerySelect, expandQueryResult, ExpandedQueryResult } from "flowerbi";
+import stableStringify from "json-stable-stringify";
+
+export type UseQueryState = "init" | "ready" | "refresh" | "error";
+
+export interface UseQueryResult<S extends QuerySelect> extends ExpandedQueryResult<S> {
+    /**
+     * The state of the query operation:
+     * 
+     * - `init` - no result has been downloaded yet
+     * - `ready` - result has been downloaded
+     * - `refresh` - a new result is being downloaded
+     * - `error` - most recent query attempt failed
+     */
+    state: UseQueryState;
+}
+
+/**
+ * Defines another query on which our query depends - for example a
+ * first query may return the top 10 vendors, and a subsequent query
+ * may then use an `in` filter to get details about those 10 vendors.
+ */
+export type QueryDependency = {
+    /**
+     * The result of the query we depend on
+     */
+    dependency: UseQueryResult<QuerySelect>;
+    /**
+     * If true (default is false) then if the dependency query produces
+     * an empty result, our query should also produce an empty result,
+     * so there is no need to execute it.
+     */
+    nonEmpty?: boolean;
+};
+
+/**
+ * A custom React hook that evaluates to the result of a 
+ * [Query](../flowerbi/interfaces/query.html), making it easy to perform a 
+ * query from within a component.
+ * 
+ * The returned object has a strongly-typed `records` array, and optionally
+ * a `totals` object. It has a `state` of type {@link UseQueryState} that
+ * can be used to show a loading indicator.
+ * 
+ * @param fetch The fetch function to use.
+ * @param query The [Query](../flowerbi/interfaces/query.html) specification.
+ * @param dependencies Optionally, a list of one or more other queries whose
+ * results are used to build this query, so we wait for them before executing,
+ * and optionally short-circuit to an empty result if the dependency is empty.
+ */
+export function useFlowerBI<S extends QuerySelect>(fetch: QueryFetch, query: Query<S>, dependencies?: QueryDependency[]): UseQueryResult<S> {
+    const queryJson = jsonifyQuery(query);
+
+    const [state, setState] = useState<UseQueryState>("init");
+    const [result, setResult] = useState<QueryResultJson>({ records: [] });
+
+    useEffect(() => {
+        let disposed = false; // discard stale results
+
+        if (dependencies?.length) {
+            // if any not ready, neither are we
+            if (dependencies.some(x => x.dependency.state !== "ready")) {
+                if (state !== "init") {
+                    setState("refresh");
+                }
+                return;
+            }
+
+            // if any with option nonEmpty produced empty result, so do we
+            if (dependencies.filter(x => !!x.nonEmpty).some(x => !x.dependency.records.length)) {
+                setState("ready");
+                setResult({ records: [] });
+                return;
+            }
+        }
+
+        if (state !== "init") {
+            setState("refresh");
+        }
+
+        fetch(queryJson).then(
+            x => {
+                if (!disposed) {
+                    setState("ready");
+                    setResult(x);
+                }
+            },
+            () => {
+                if (!disposed) {
+                    setState("error");
+                }
+            }
+        );
+
+        return () => {
+            disposed = true;
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [fetch, stableStringify(queryJson)]);
+
+    return { ...expandQueryResult(query.select, result), state };
+}
+
+/**
+ * Alias of useFlowerBI for backward compatibility.
+ */
+export const useQuery = useFlowerBI;

package/src/usePageFilters.ts

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import { FilterJson } from "flowerbi";
+import stableStringify from "json-stable-stringify";
 
 export interface PageFiltersState {
     readonly global: FilterJson[];
@@ -25,7 +26,17 @@ const clearedState: PageFiltersState = {
 export function usePageFilters(): PageFilters {
     const [state, set] = useState<PageFiltersState>(clearedState);
     function setInteraction(interactionKey: string, interactions: FilterJson[]) {
-        set({ ...state, interactionKey, interactions });
+        console.log(interactionKey, state.interactionKey, state.interactionKey === interactionKey,
+            interactions, state.interactions,
+            stableStringify(state.interactions), stableStringify(interactions),
+            stableStringify(state.interactions) === stableStringify(interactions));
+
+        if (state.interactionKey === interactionKey &&
+            stableStringify(state.interactions) === stableStringify(interactions)) {
+            clearInteraction();
+        } else {
+            set({ ...state, interactionKey, interactions });
+        }
     }
     function setGlobal(global: FilterJson[]) {
         set({ ...state, global });

package/src/useQuery.ts

@@ -1,58 +0,0 @@
-import { useState, useEffect } from "react";
-import { Query, QueryFetch, jsonifyQuery, QueryResultJson, QuerySelect, expandQueryResult, ExpandedQueryResult } from "flowerbi";
-import stableStringify from "json-stable-stringify";
-
-export type UseQueryState = "init" | "ready" | "refresh" | "error";
-
-export interface UseQueryResult<S extends QuerySelect> extends ExpandedQueryResult<S> {
-    /**
-     * The state of the query operation:
-     * 
-     * - `init` - no result has been downloaded yet
-     * - `ready` - result has been downloaded
-     * - `refresh` - a new result is being downloaded
-     * - `error` - most recent query attempt failed
-     */
-    state: UseQueryState;
-}
-
-/**
- * A custom React hook that evaluates to the result of a 
- * [Query](../flowerbi/interfaces/query.html), making it easy to perform a 
- * query from within a component.
- * 
- * The returned object has a strongly-typed `records` array, and optionally
- * a `totals` object. It has a `state` of type {@link UseQueryState} that
- * can be used to show a loading indicator.
- * 
- * @param fetch The fetch function to use.
- * @param query The [Query](../flowerbi/interfaces/query.html) specification.
- */
-export function useQuery<S extends QuerySelect>(fetch: QueryFetch, query: Query<S>): UseQueryResult<S> {
-
-    const queryJson = jsonifyQuery(query);
-
-    const [state, setState] = useState<UseQueryState>("init");
-    const [result, setResult] = useState<QueryResultJson>({ records: [] });
-
-    useEffect(() => {
-        let disposed = false;
-        if (state !== "init") {
-            setState("refresh");
-        }
-        fetch(queryJson).then(x => {
-            if (!disposed) {
-                setState("ready");
-                setResult(x);
-            }
-        }, () => {
-            if (!disposed) {
-                setState("error");
-            }
-        });
-
-        return () => { disposed = true; };
-    }, [stableStringify(queryJson)]);
-
-    return { ...expandQueryResult(query.select, result), state };
-}