@darajs/core 1.0.0-a.1

package/dist/shared/interactivity/use-data-variable.js

@@ -0,0 +1,56 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useContext, useEffect, useMemo, useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useRecoilValueLoadable } from 'recoil';
+// eslint-disable-next-line import/no-cycle
+import { useSessionToken } from '../../auth/auth-context';
+import { VariableCtx, WebSocketCtx, useTaskContext } from '../../shared/context';
+import { isDataVariable } from '../../types';
+import { registerDataVariable, useDerivedVariable, useFetchDataVariable, useFetchDerivedDataVariable, } from './internal';
+/**
+ * Helper hook which turns a (Derived)DataVariable into a callback to return DataFrame.
+ * Can be used in components that only work with data variables.
+ *
+ * The callback identity changes whenever a refetch should be triggered.
+ *
+ * @param variable data variable
+ */
+export function useDataVariable(variable) {
+    const token = useSessionToken();
+    const { client: WsClient } = useContext(WebSocketCtx);
+    if (isDataVariable(variable)) {
+        registerDataVariable(variable);
+        const serverTriggers$ = useMemo(() => WsClient.serverTriggers$(variable.uid), []);
+        const [serverTriggerCounter, setServerTriggerCounter] = useState(0);
+        useEffect(() => {
+            const sub = serverTriggers$.subscribe(() => setServerTriggerCounter((c) => c + 1));
+            return () => sub.unsubscribe();
+        }, [serverTriggers$]);
+        const fetchDataVariable = useFetchDataVariable(variable, serverTriggerCounter);
+        return fetchDataVariable;
+    }
+    // Synchronously register subscription to the underlying DV, clean up on unmount
+    const variablesContext = useContext(VariableCtx);
+    variablesContext.variables.current.add(variable.uid);
+    useEffect(() => {
+        return () => {
+            variablesContext.variables.current.delete(variable.uid);
+        };
+    }, []);
+    const taskContext = useTaskContext();
+    const { search } = useLocation();
+    const dvSelector = useDerivedVariable(variable, WsClient, taskContext, search, token);
+    const dvLoadable = useRecoilValueLoadable(dvSelector);
+    // We can't directly use the loadable as the callback's dependency because the loadable identity
+    // changes whenever it also changes state; we only want to update it when there is a new value
+    const [dvValue, setDvValue] = useState(dvLoadable.toPromise());
+    useEffect(() => {
+        // Whenever loadable becomes loading update the promise stored
+        if (dvLoadable.state === 'loading') {
+            setDvValue(dvLoadable.toPromise());
+        }
+    }, [dvLoadable]);
+    const fetchDerivedDataVariable = useFetchDerivedDataVariable(variable, taskContext, WsClient, dvValue);
+    return fetchDerivedDataVariable;
+}
+//# sourceMappingURL=use-data-variable.js.map

package/dist/shared/interactivity/use-data-variable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-data-variable.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-data-variable.tsx"],"names":[],"mappings":"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"}

package/dist/shared/interactivity/use-refresh-selector.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Helper hook to refresh a selector by its key
+ */
+export default function useRefreshSelector(): (key: string) => void;
+//# sourceMappingURL=use-refresh-selector.d.ts.map

package/dist/shared/interactivity/use-refresh-selector.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-refresh-selector.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-refresh-selector.tsx"],"names":[],"mappings":"AAIA;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,IAAI,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAUlE"}

package/dist/shared/interactivity/use-refresh-selector.js

@@ -0,0 +1,16 @@
+import { useRecoilCallback } from 'recoil';
+import { selectorRegistry } from './store';
+/**
+ * Helper hook to refresh a selector by its key
+ */
+export default function useRefreshSelector() {
+    return useRecoilCallback(({ refresh }) => {
+        return (key) => {
+            const selector = selectorRegistry.get(key);
+            if (selector) {
+                refresh(selector);
+            }
+        };
+    });
+}
+//# sourceMappingURL=use-refresh-selector.js.map

package/dist/shared/interactivity/use-refresh-selector.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-refresh-selector.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-refresh-selector.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB;IACtC,OAAO,iBAAiB,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE;QACrC,OAAO,CAAC,GAAW,EAAE,EAAE;YACnB,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;YAE3C,IAAI,QAAQ,EAAE;gBACV,OAAO,CAAC,QAAQ,CAAC,CAAC;aACrB;QACL,CAAC,CAAC;IACN,CAAC,CAAC,CAAC;AACP,CAAC"}

package/dist/shared/interactivity/use-reset-variables.d.ts

@@ -0,0 +1,8 @@
+import { Variable } from '../../types';
+/**
+ * A helper hook that returns a function to reset a list of variables to their default values
+ *
+ * @param variables list of variables to reset
+ */
+export default function useResetVariables(variables: Variable<any>[]): () => void;
+//# sourceMappingURL=use-reset-variables.d.ts.map

package/dist/shared/interactivity/use-reset-variables.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reset-variables.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-reset-variables.tsx"],"names":[],"mappings":"AAOA,OAAO,EAAE,QAAQ,EAAuF,MAAM,SAAS,CAAC;AAIxH;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,SAAS,EAAE,QAAQ,CAAC,GAAG,CAAC,EAAE,GAAG,MAAM,IAAI,CAkChF"}

package/dist/shared/interactivity/use-reset-variables.js

@@ -0,0 +1,46 @@
+import { useContext } from 'react';
+import { useHistory, useLocation } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+// eslint-disable-next-line import/no-cycle
+import { useSessionToken } from '../../auth/auth-context';
+import { WebSocketCtx, useTaskContext } from '../../shared/context';
+import { isDataVariable, isDerivedDataVariable, isDerivedVariable, isUrlVariable, isVariable } from '../../types';
+import { getOrRegisterPlainVariable, getOrRegisterTrigger, getOrRegisterUrlVariable } from './internal';
+/**
+ * A helper hook that returns a function to reset a list of variables to their default values
+ *
+ * @param variables list of variables to reset
+ */
+export default function useResetVariables(variables) {
+    const taskContext = useTaskContext();
+    const { client } = useContext(WebSocketCtx);
+    const { search } = useLocation();
+    const token = useSessionToken();
+    const history = useHistory();
+    return useRecoilCallback(({ reset, set }) => () => {
+        variables.filter(isVariable).forEach((variable) => {
+            // For DVs, trigger their recalculation
+            if (isDerivedVariable(variable) || isDerivedDataVariable(variable)) {
+                const triggerAtom = getOrRegisterTrigger(variable);
+                set(triggerAtom, (triggerIndexValue) => ({
+                    force: true,
+                    inc: triggerIndexValue.inc + 1,
+                }));
+            }
+            else if (isUrlVariable(variable)) {
+                // For UrlVariables, we use set instead of reset to update the URL as well; otherwise just the atom is reset
+                const urlAtom = getOrRegisterUrlVariable(variable);
+                set(urlAtom, variable.default);
+            }
+            else if (isDataVariable(variable)) {
+                // for data variables this is a noop
+            }
+            else {
+                // For plain variables reset them to default values
+                const plainAtom = getOrRegisterPlainVariable(variable, client, taskContext, search, token);
+                reset(plainAtom);
+            }
+        });
+    }, [variables, history]);
+}
+//# sourceMappingURL=use-reset-variables.js.map

package/dist/shared/interactivity/use-reset-variables.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-reset-variables.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-reset-variables.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,2CAA2C;AAC3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAAY,cAAc,EAAE,qBAAqB,EAAE,iBAAiB,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAExH,OAAO,EAAE,0BAA0B,EAAE,oBAAoB,EAAE,wBAAwB,EAAE,MAAM,YAAY,CAAC;AAExG;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,SAA0B;IAChE,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IACjC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,OAAO,iBAAiB,CACpB,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,EAAE,EAAE,CACf,GAAG,EAAE;QACD,SAAS,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC,OAAO,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC9C,uCAAuC;YACvC,IAAI,iBAAiB,CAAC,QAAQ,CAAC,IAAI,qBAAqB,CAAC,QAAQ,CAAC,EAAE;gBAChE,MAAM,WAAW,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;gBAEnD,GAAG,CAAC,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;oBACrC,KAAK,EAAE,IAAI;oBACX,GAAG,EAAE,iBAAiB,CAAC,GAAG,GAAG,CAAC;iBACjC,CAAC,CAAC,CAAC;aACP;iBAAM,IAAI,aAAa,CAAC,QAAQ,CAAC,EAAE;gBAChC,4GAA4G;gBAC5G,MAAM,OAAO,GAAG,wBAAwB,CAAC,QAAQ,CAAC,CAAC;gBACnD,GAAG,CAAC,OAAO,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;aAClC;iBAAM,IAAI,cAAc,CAAC,QAAQ,CAAC,EAAE;gBACjC,oCAAoC;aACvC;iBAAM;gBACH,mDAAmD;gBACnD,MAAM,SAAS,GAAG,0BAA0B,CAAC,QAAQ,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,EAAE,KAAK,CAAC,CAAC;gBAC3F,KAAK,CAAC,SAAS,CAAC,CAAC;aACpB;QACL,CAAC,CAAC,CAAC;IACP,CAAC,EACL,CAAC,SAAS,EAAE,OAAO,CAAC,CACvB,CAAC;AACN,CAAC"}

package/dist/shared/interactivity/use-server-component.d.ts

@@ -0,0 +1,24 @@
+import { AnyVariable, ComponentInstance } from '../../types';
+/**
+ * Claan value to a format understood by the backend.
+ * Removes `deps`, appends `force` to resolved derived(data)variables.
+ *
+ * @param value a value to clean
+ * @param force whether to force a derived variable recalculation
+ */
+export declare function cleanValue(value: unknown, force: boolean): any;
+/**
+ * A hook to fetch a server component
+ *
+ * @param name component name - specific to a given py_component
+ * @param uid component uid - specific to a given *instance* of a py_component
+ * @param dynamicKwargs kwargs passed into the component
+ */
+export default function useServerComponent(name: string, uid: string, dynamicKwargs: Record<string, AnyVariable<any>>): ComponentInstance;
+/**
+ * A helper hook that returns a function to force a refresh of a server component
+ *
+ * @param name component uid
+ */
+export declare function useRefreshServerComponent(uid: string): () => void;
+//# sourceMappingURL=use-server-component.d.ts.map

package/dist/shared/interactivity/use-server-component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-server-component.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-server-component.tsx"],"names":[],"mappings":"AAUA,OAAO,EACH,WAAW,EACX,iBAAiB,EAIpB,MAAM,SAAS,CAAC;AAyDjB;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,GAAG,GAAG,CAa9D;AA0JD;;;;;;GAMG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACtC,IAAI,EAAE,MAAM,EACZ,GAAG,EAAE,MAAM,EACX,aAAa,EAAE,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,GAAG,CAAC,CAAC,GAChD,iBAAiB,CA4BnB;AAED;;;;GAIG;AACH,wBAAgB,yBAAyB,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,IAAI,CAajE"}

package/dist/shared/interactivity/use-server-component.js

@@ -0,0 +1,227 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useContext, useEffect } from 'react';
+import { useLocation } from 'react-router';
+import { atom, selector, useRecoilCallback, useRecoilValueLoadable } from 'recoil';
+import { HTTP_METHOD, validateResponse } from '@darajs/ui-utils';
+import { fetchTaskResult, request } from '../../api';
+import { useSessionToken } from '../../auth';
+import { useDeferLoadable } from '../../shared/utils';
+import { normalizeRequest } from '../../shared/utils/normalization';
+import { isResolvedDerivedDataVariable, isResolvedDerivedVariable, } from '../../types';
+import { VariableCtx, WebSocketCtx } from '../context';
+import { useTaskContext } from '../context/global-task-context';
+import { resolveDerivedValue } from './derived-variable';
+import { resolveVariable } from './resolve-variable';
+import { atomRegistry, depsRegistry, selectorRegistry } from './store';
+function isTaskResponse(response) {
+    return response && typeof response === 'object' && 'task_id' in response;
+}
+/**
+ * Generate a registry key for a component instance
+ *
+ * @param uid component instance uid
+ * @param trigger whether it's a trigger key
+ */
+function getComponentRegistryKey(uid, trigger) {
+    let key = `_COMPONENT_${uid}`;
+    if (trigger) {
+        key += '_TRIGGER';
+    }
+    return key;
+}
+/**
+ * Fetch a component from the backend, expects a component instance to be returned.
+ *
+ * @param component the component to fetch
+ * @param taskRef ref holding the current running task id
+ */
+function fetchFunctionComponent(component, values, uid, token, wsClient) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const ws_channel = yield wsClient.getChannel();
+        const res = yield request(`/api/core/components/${component}`, {
+            body: JSON.stringify({ uid, values, ws_channel }),
+            method: HTTP_METHOD.POST,
+        }, token);
+        yield validateResponse(res, `Failed to fetch the component: ${component}`);
+        const result = yield res.json();
+        return result;
+    });
+}
+/**
+ * Claan value to a format understood by the backend.
+ * Removes `deps`, appends `force` to resolved derived(data)variables.
+ *
+ * @param value a value to clean
+ * @param force whether to force a derived variable recalculation
+ */
+export function cleanValue(value, force) {
+    if (isResolvedDerivedVariable(value) || isResolvedDerivedDataVariable(value)) {
+        const { deps } = value, rest = __rest(value, ["deps"]);
+        const cleanedValues = value.values.map((v) => cleanValue(v, force));
+        return Object.assign(Object.assign({}, rest), { force, values: cleanedValues });
+    }
+    return value;
+}
+function cleanKwargs(kwargs, force) {
+    return Object.keys(kwargs).reduce((acc, k) => {
+        acc[k] = cleanValue(kwargs[k], force);
+        return acc;
+    }, {});
+}
+function getOrRegisterComponentTrigger(uid) {
+    const triggerKey = getComponentRegistryKey(uid, true);
+    if (!atomRegistry.has(triggerKey)) {
+        atomRegistry.set(triggerKey, atom({
+            default: {
+                force: false,
+                inc: 0,
+            },
+            key: triggerKey,
+        }));
+    }
+    return atomRegistry.get(triggerKey);
+}
+/**
+ * Get a server component from the selector registry, registering it if not already registered
+ *
+ * @param name component name
+ * @param uid  component uid
+ * @param dynamicKwargs kwargs
+ * @param wsClient websocket client
+ * @param taskContext task context
+ * @param search current search string
+ * @param token auth token
+ */
+function getOrRegisterServerComponent(name, uid, dynamicKwargs, wsClient, taskContext, search, token) {
+    const key = getComponentRegistryKey(uid);
+    if (!selectorRegistry.has(key)) {
+        // Kwargs resolved to their simple values
+        const resolvedKwargs = Object.keys(dynamicKwargs).reduce((acc, k) => {
+            const value = dynamicKwargs[k];
+            acc[k] = resolveVariable(value, wsClient, taskContext, search, token);
+            return acc;
+        }, {});
+        // Turn kwargs into lists so we can re-use the DerivedVariable logic
+        const resolvedKwargsList = Object.values(resolvedKwargs);
+        const kwargsList = Object.values(dynamicKwargs);
+        const triggerAtom = getOrRegisterComponentTrigger(uid);
+        selectorRegistry.set(key, selector({
+            cachePolicy_UNSTABLE: {
+                eviction: 'most-recent',
+            },
+            get: ({ get }) => __awaiter(this, void 0, void 0, function* () {
+                const selfTrigger = get(triggerAtom);
+                const derivedResult = yield resolveDerivedValue(key, kwargsList, kwargsList, // pass deps=kwargs
+                resolvedKwargsList, wsClient, get, selfTrigger);
+                // returning previous result as no change in dependant values
+                if (derivedResult.type === 'previous') {
+                    return derivedResult.entry.result;
+                }
+                // Otherwise fetch new component
+                // turn the resolved values back into an object and clean them up
+                const kwargValues = cleanKwargs(Object.keys(dynamicKwargs).reduce((acc, k, idx) => {
+                    acc[k] = derivedResult.values[idx];
+                    return acc;
+                }, {}), derivedResult.force);
+                let result = null;
+                try {
+                    result = yield fetchFunctionComponent(name, normalizeRequest(kwargValues, dynamicKwargs), uid, token, wsClient);
+                }
+                catch (e) {
+                    e.selectorId = key;
+                    throw e;
+                }
+                taskContext.cleanupRunningTasks(key);
+                // Metatask returned
+                if (isTaskResponse(result)) {
+                    const taskId = result.task_id;
+                    // Register the task under the component's instance key
+                    taskContext.startTask(taskId, key, getComponentRegistryKey(uid, true));
+                    try {
+                        yield wsClient.waitForTask(taskId);
+                    }
+                    catch (_a) {
+                        return null;
+                    }
+                    finally {
+                        taskContext.endTask(taskId);
+                    }
+                    try {
+                        result = yield fetchTaskResult(taskId, token);
+                    }
+                    catch (e) {
+                        e.selectorId = key;
+                        throw e;
+                    }
+                }
+                depsRegistry.set(key, {
+                    args: derivedResult.relevantValues,
+                    cacheKey: null,
+                    result,
+                });
+                return result;
+            }),
+            key,
+        }));
+    }
+    return selectorRegistry.get(key);
+}
+/**
+ * A hook to fetch a server component
+ *
+ * @param name component name - specific to a given py_component
+ * @param uid component uid - specific to a given *instance* of a py_component
+ * @param dynamicKwargs kwargs passed into the component
+ */
+export default function useServerComponent(name, uid, dynamicKwargs) {
+    const token = useSessionToken();
+    const { client: wsClient } = useContext(WebSocketCtx);
+    const taskContext = useTaskContext();
+    const variablesContext = useContext(VariableCtx);
+    const { search } = useLocation();
+    // Synchronously register the py_component uid, and clean it up on unmount
+    variablesContext.variables.current.add(getComponentRegistryKey(uid));
+    useEffect(() => {
+        return () => {
+            variablesContext.variables.current.delete(getComponentRegistryKey(uid));
+        };
+    }, []);
+    const componentSelector = getOrRegisterServerComponent(name, uid, dynamicKwargs, wsClient, taskContext, search, token);
+    const componentLoadable = useRecoilValueLoadable(componentSelector);
+    const deferred = useDeferLoadable(componentLoadable);
+    return deferred;
+}
+/**
+ * A helper hook that returns a function to force a refresh of a server component
+ *
+ * @param name component uid
+ */
+export function useRefreshServerComponent(uid) {
+    return useRecoilCallback(({ set }) => () => {
+        const triggerAtom = getOrRegisterComponentTrigger(uid);
+        set(triggerAtom, (triggerIndexValue) => ({
+            force: false,
+            inc: triggerIndexValue.inc + 1,
+        }));
+    }, [uid]);
+}
+//# sourceMappingURL=use-server-component.js.map

package/dist/shared/interactivity/use-server-component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-server-component.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-server-component.tsx"],"names":[],"mappings":"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"}

package/dist/shared/interactivity/use-trigger-variable.d.ts

@@ -0,0 +1,9 @@
+import { DerivedDataVariable, DerivedVariable } from '../../types';
+/**
+ * A helper hook that returns a function to trigger a calculation for a given variable.
+ *
+ * @param variable variable to use
+ * @param force whether to force the recalculation irrespective of the caching setting
+ */
+export default function useTriggerVariable(variable: DerivedVariable | DerivedDataVariable, force: boolean): () => void;
+//# sourceMappingURL=use-trigger-variable.d.ts.map

package/dist/shared/interactivity/use-trigger-variable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-trigger-variable.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-trigger-variable.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,mBAAmB,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI/D;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACtC,QAAQ,EAAE,eAAe,GAAG,mBAAmB,EAC/C,KAAK,EAAE,OAAO,GACf,MAAM,IAAI,CAaZ"}

package/dist/shared/interactivity/use-trigger-variable.js

@@ -0,0 +1,18 @@
+import { useRecoilCallback } from 'recoil';
+import { getOrRegisterTrigger } from './internal';
+/**
+ * A helper hook that returns a function to trigger a calculation for a given variable.
+ *
+ * @param variable variable to use
+ * @param force whether to force the recalculation irrespective of the caching setting
+ */
+export default function useTriggerVariable(variable, force) {
+    return useRecoilCallback(({ set }) => () => {
+        const triggerAtom = getOrRegisterTrigger(variable);
+        set(triggerAtom, (triggerIndexValue) => ({
+            force,
+            inc: triggerIndexValue.inc + 1,
+        }));
+    }, [variable.uid, force]);
+}
+//# sourceMappingURL=use-trigger-variable.js.map

package/dist/shared/interactivity/use-trigger-variable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-trigger-variable.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-trigger-variable.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAK3C,OAAO,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAElD;;;;;GAKG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CACtC,QAA+C,EAC/C,KAAc;IAEd,OAAO,iBAAiB,CACpB,CAAC,EAAE,GAAG,EAAE,EAAE,EAAE,CACR,GAAG,EAAE;QACD,MAAM,WAAW,GAAG,oBAAoB,CAAC,QAAQ,CAAC,CAAC;QAEnD,GAAG,CAAC,WAAW,EAAE,CAAC,iBAAiB,EAAE,EAAE,CAAC,CAAC;YACrC,KAAK;YACL,GAAG,EAAE,iBAAiB,CAAC,GAAG,GAAG,CAAC;SACjC,CAAC,CAAC,CAAC;IACR,CAAC,EACL,CAAC,QAAQ,CAAC,GAAG,EAAE,KAAK,CAAC,CACxB,CAAC;AACN,CAAC"}

package/dist/shared/interactivity/use-variable-state.d.ts

@@ -0,0 +1,9 @@
+import { ResolvedDataVariable, ResolvedDerivedDataVariable, ResolvedDerivedVariable } from '../../types';
+type AnyResolvedVariable = ResolvedDataVariable | ResolvedDerivedDataVariable | ResolvedDerivedVariable;
+/**
+ * Helper hook to get the current state of the variable.
+ * For client-side variables, returns their value. For server-side variables, returns their resolved forms.
+ */
+export default function useVariableState(): any | AnyResolvedVariable;
+export {};
+//# sourceMappingURL=use-variable-state.d.ts.map

package/dist/shared/interactivity/use-variable-state.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-variable-state.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-variable-state.tsx"],"names":[],"mappings":"AAMA,OAAO,EAEH,oBAAoB,EACpB,2BAA2B,EAC3B,uBAAuB,EAE1B,MAAM,SAAS,CAAC;AAKjB,KAAK,mBAAmB,GAAG,oBAAoB,GAAG,2BAA2B,GAAG,uBAAuB,CAAC;AAExG;;;GAGG;AAEH,MAAM,CAAC,OAAO,UAAU,gBAAgB,IAAI,GAAG,GAAG,mBAAmB,CA+BpE"}

package/dist/shared/interactivity/use-variable-state.js

@@ -0,0 +1,35 @@
+import { useContext } from 'react';
+import { useLocation } from 'react-router';
+import { useRecoilCallback } from 'recoil';
+import { useSessionToken } from '../../auth/auth-context';
+import { WebSocketCtx, useTaskContext } from '../../shared/context';
+import { isVariable, } from '../../types';
+import { resolveVariable } from './resolve-variable';
+import { atomRegistry, isRegistered } from './store';
+/**
+ * Helper hook to get the current state of the variable.
+ * For client-side variables, returns their value. For server-side variables, returns their resolved forms.
+ */
+// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+export default function useVariableState() {
+    const token = useSessionToken();
+    const { client } = useContext(WebSocketCtx);
+    const taskCtx = useTaskContext();
+    const { search } = useLocation();
+    return useRecoilCallback(({ snapshot }) => {
+        return (variable) => {
+            if (!isRegistered(variable)) {
+                return '__NOT_REGISTERED__';
+            }
+            // For variables and url-variables, get the value directly out of recoil store
+            if (isVariable(variable) && (variable.__typename === 'Variable' || variable.__typename === 'UrlVariable')) {
+                const atom = atomRegistry.get(variable.uid);
+                return snapshot.getLoadable(atom).getValue();
+            }
+            // otherwise we'll just get the resolved form of the variable
+            const resolvedVariable = resolveVariable(variable, client, taskCtx, search, token, (v) => snapshot.getLoadable(v).getValue());
+            return resolvedVariable;
+        };
+    }, []);
+}
+//# sourceMappingURL=use-variable-state.js.map

package/dist/shared/interactivity/use-variable-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-variable-state.js","sourceRoot":"","sources":["../../../js/shared/interactivity/use-variable-state.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAChE,OAAO,EAKH,UAAU,GACb,MAAM,SAAS,CAAC;AAEjB,OAAO,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAIrD;;;GAGG;AACH,6EAA6E;AAC7E,MAAM,CAAC,OAAO,UAAU,gBAAgB;IACpC,MAAM,KAAK,GAAG,eAAe,EAAE,CAAC;IAChC,MAAM,EAAE,MAAM,EAAE,GAAG,UAAU,CAAC,YAAY,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,cAAc,EAAE,CAAC;IACjC,MAAM,EAAE,MAAM,EAAE,GAAG,WAAW,EAAE,CAAC;IAEjC,OAAO,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE;QACtC,OAAO,CAAC,QAA0B,EAAE,EAAE;YAClC,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,EAAE;gBACzB,OAAO,oBAAoB,CAAC;aAC/B;YAED,8EAA8E;YAC9E,IAAI,UAAU,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,UAAU,KAAK,UAAU,IAAI,QAAQ,CAAC,UAAU,KAAK,aAAa,CAAC,EAAE;gBACvG,MAAM,IAAI,GAAG,YAAY,CAAC,GAAG,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC;gBAC5C,OAAO,QAAQ,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,CAAC;aAChD;YAED,6DAA6D;YAC7D,MAAM,gBAAgB,GAAG,eAAe,CACpC,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,KAAK,EACL,CAAC,CAAC,EAAE,EAAE,CAAC,QAAQ,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,QAAQ,EAAE,CAC5C,CAAC;YAEF,OAAO,gBAAgB,CAAC;QAC5B,CAAC,CAAC;IACN,CAAC,EAAE,EAAE,CAAC,CAAC;AACX,CAAC"}

package/dist/shared/interactivity/use-variable-value.d.ts

@@ -0,0 +1,20 @@
+import { DataVariable, DerivedDataVariable, DerivedVariable, ResolvedDataVariable, ResolvedDerivedDataVariable, ResolvedDerivedVariable, Variable } from '../../types';
+type UseVariableValueSigOne<V, B extends boolean | undefined> = (variable: DerivedVariable, shouldFetchVariable?: B) => () => B extends true ? Promise<V> : ResolvedDerivedVariable;
+type UseVariableValueSigTwo<V, B extends boolean | undefined> = (variable: DataVariable, shouldFetchVariable?: B) => () => B extends true ? Promise<V> : ResolvedDataVariable;
+type UseVariableValueSigThree<V, B extends boolean | undefined> = (variable: V | Variable<V>, shouldFetchVariable?: B) => () => V;
+type UseVariableValueSigFour<V, B extends boolean | undefined> = (variable: DerivedDataVariable, shouldFetchVariable?: B) => () => B extends true ? Promise<V> : ResolvedDerivedDataVariable;
+type UseVariableValueSig<V, B extends boolean | undefined> = UseVariableValueSigOne<V, B> | UseVariableValueSigTwo<V, B> | UseVariableValueSigThree<V, B> | UseVariableValueSigFour<V, B>;
+/**
+ * A helper hook that turns a Variable class into the actual value.
+ * As opposed to the `useVariable` hook, this one returns a callback to retrieve the latest value
+ * without subscribing the component using it to updates.
+ * For derived (data) variables, instead of returning its value directly - its resolved to its
+ * uid and dependency values.
+ *
+ * @param variable the variable to use
+ * @param shouldFetchVariable if true, if the variable is a derived (data) variable, the request to fetch the variable value will be made
+ * @returns Returns the value if the Variable is not derived/data. A Resolved(Data/Derived/DerivedData)Variable if shouldFetchVariable = false, and a Promise for fetching the variable if true.
+ */
+export default function useVariableValue<VV, B extends boolean = false>(variable: VV | Variable<VV> | DataVariable | DerivedVariable | DerivedDataVariable, shouldFetchVariable?: B): ReturnType<UseVariableValueSig<VV, B>>;
+export {};
+//# sourceMappingURL=use-variable-value.d.ts.map

package/dist/shared/interactivity/use-variable-value.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-variable-value.d.ts","sourceRoot":"","sources":["../../../js/shared/interactivity/use-variable-value.tsx"],"names":[],"mappings":"AAWA,OAAO,EACH,YAAY,EACZ,mBAAmB,EACnB,eAAe,EACf,oBAAoB,EACpB,2BAA2B,EAC3B,uBAAuB,EACvB,QAAQ,EAQX,MAAM,SAAS,CAAC;AAWjB,KAAK,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,SAAS,IAAI,CAC5D,QAAQ,EAAE,eAAe,EACzB,mBAAmB,CAAC,EAAE,CAAC,KACtB,MAAM,CAAC,SAAS,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,uBAAuB,CAAC;AAEjE,KAAK,sBAAsB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,SAAS,IAAI,CAC5D,QAAQ,EAAE,YAAY,EACtB,mBAAmB,CAAC,EAAE,CAAC,KACtB,MAAM,CAAC,SAAS,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,oBAAoB,CAAC;AAE9D,KAAK,wBAAwB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,SAAS,IAAI,CAC9D,QAAQ,EAAE,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,EACzB,mBAAmB,CAAC,EAAE,CAAC,KACtB,MAAM,CAAC,CAAC;AACb,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,SAAS,IAAI,CAC7D,QAAQ,EAAE,mBAAmB,EAC7B,mBAAmB,CAAC,EAAE,CAAC,KACtB,MAAM,CAAC,SAAS,IAAI,GAAG,OAAO,CAAC,CAAC,CAAC,GAAG,2BAA2B,CAAC;AACrE,KAAK,mBAAmB,CAAC,CAAC,EAAE,CAAC,SAAS,OAAO,GAAG,SAAS,IACnD,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,sBAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC5B,wBAAwB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC9B,uBAAuB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AAEpC;;;;;;;;;;GAUG;AACH,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAAE,EAAE,CAAC,SAAS,OAAO,GAAG,KAAK,EAClE,QAAQ,EAAE,EAAE,GAAG,QAAQ,CAAC,EAAE,CAAC,GAAG,YAAY,GAAG,eAAe,GAAG,mBAAmB,EAClF,mBAAmB,GAAE,CAAc,GACpC,UAAU,CAAC,mBAAmB,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CA2ExC"}

package/dist/shared/interactivity/use-variable-value.js

@@ -0,0 +1,77 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+import { useContext } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useRecoilCallback } from 'recoil';
+import { useDeepCompare } from '@darajs/ui-utils';
+// eslint-disable-next-line import/no-cycle
+import { useSessionToken } from '../../auth/auth-context';
+import { WebSocketCtx, useTaskContext } from '../../shared/context';
+import { normalizeRequest } from '../../shared/utils/normalization';
+import { isDataVariable, isDerivedDataVariable, isDerivedVariable, isResolvedDataVariable, isResolvedDerivedDataVariable, isResolvedDerivedVariable, isVariable, } from '../../types';
+import { fetchDataVariable, fetchDerivedDataVariable, fetchDerivedVariable, formatDerivedVariableRequest, isTaskResponse, resolveVariable, } from './internal';
+/**
+ * A helper hook that turns a Variable class into the actual value.
+ * As opposed to the `useVariable` hook, this one returns a callback to retrieve the latest value
+ * without subscribing the component using it to updates.
+ * For derived (data) variables, instead of returning its value directly - its resolved to its
+ * uid and dependency values.
+ *
+ * @param variable the variable to use
+ * @param shouldFetchVariable if true, if the variable is a derived (data) variable, the request to fetch the variable value will be made
+ * @returns Returns the value if the Variable is not derived/data. A Resolved(Data/Derived/DerivedData)Variable if shouldFetchVariable = false, and a Promise for fetching the variable if true.
+ */
+export default function useVariableValue(variable, shouldFetchVariable = false) {
+    const taskContext = useTaskContext();
+    const { client } = useContext(WebSocketCtx);
+    const { search } = useLocation();
+    const token = useSessionToken();
+    if (!isVariable(variable)) {
+        return () => variable;
+    }
+    return useRecoilCallback(({ snapshot }) => {
+        return () => {
+            // Using loadable since the resolver is only used for simple atoms and shouldn't cause problems
+            const resolved = resolveVariable(variable, client, taskContext, search, token, (v) => snapshot.getLoadable(v).getValue());
+            // if we're NOT forced to fetch, or if it's not a DV/DDV/data variable, return the resolved value
+            // variable is plain/url
+            if (!shouldFetchVariable ||
+                (!isDerivedVariable(variable) && !isDataVariable(variable) && !isDerivedDataVariable(variable))) {
+                return resolved;
+            }
+            // we're forced to fetch but the resolved variable is not a resolved DV/data var, return the resolved value
+            // variable is plain/url
+            if (!isResolvedDerivedVariable(resolved) &&
+                !isResolvedDataVariable(resolved) &&
+                !isResolvedDerivedDataVariable(resolved)) {
+                return resolved;
+            }
+            // data variable
+            if (isResolvedDataVariable(resolved)) {
+                return fetchDataVariable(resolved.uid, token, resolved.filters);
+            }
+            // derived variable
+            return fetchDerivedVariable({
+                cache: variable.cache,
+                force: false,
+                token,
+                uid: resolved.uid,
+                values: normalizeRequest(formatDerivedVariableRequest(resolved.values), variable.variables),
+                wsClient: client,
+            }).then((resp) => {
+                // This is really only used in DownloadVariable currently; we can add support for tasks
+                // if it is requested in the future
+                if (isTaskResponse(resp)) {
+                    throw new Error('Task DerivedVariables are not supported in this context');
+                }
+                // for derived data variables we need to make another request to retrieve the filtered value
+                if (isDerivedDataVariable(variable)) {
+                    return client
+                        .getChannel()
+                        .then((chan) => fetchDerivedDataVariable(variable.uid, token, resp.cache_key, chan, variable.filters));
+                }
+                return resp.value;
+            });
+        };
+    }, [variable.uid, useDeepCompare(taskContext), client, search, token]);
+}
+//# sourceMappingURL=use-variable-value.js.map