querysub 0.152.0 → 0.154.0

package/src/functional/promiseCache.ts

@@ -0,0 +1,67 @@
+import { proxyWatcher } from "../2-proxy/PathValueProxyWatcher";
+import { cacheLimited } from "socket-function/src/caching";
+
+// IMPORTANT! See getSyncedController if you just want to run controller functions
+
+export function cacheAsyncLimited<Arg, Return>(limit: number, fnc: (arg: Arg) => Promise<Return>) {
+    let results = new Map<Arg, { type: "result"; value: Return } | { type: "error"; error: Error; }>();
+    let promiseValues = cacheLimited(limit, fnc);
+    return function get(arg: Arg) {
+        let result = results.get(arg);
+        if (result) {
+            if (result.type === "result") {
+                return result.value;
+            } else {
+                throw result.error;
+            }
+        }
+        let promise = promiseValues(arg);
+        promise.then(
+            value => {
+                if (results.size >= limit) results.clear();
+                results.set(arg, { type: "result", value });
+            },
+            error => {
+                if (results.size >= limit) results.clear();
+                results.set(arg, { type: "error", error });
+            }
+        );
+        proxyWatcher.triggerOnPromiseFinish(promise, { waitReason: fnc.toString() });
+        return undefined;
+    };
+}
+
+export const cacheAsyncSynced = cacheAsyncLimitedJSON;
+export function cacheAsyncLimitedJSON<Arg, Return>(limit: number, fnc: (arg: Arg) => Promise<Return>) {
+    let results = new Map<string, { type: "result"; value: Return } | { type: "error"; error: Error; }>();
+    let promiseValues = cacheLimited(limit, (json: string) => fnc(JSON.parse(json)));
+    get["clear"] = () => {
+        results.clear();
+        promiseValues.clear();
+    };
+    return get;
+    function get(arg: Arg) {
+        let json = JSON.stringify(arg);
+        let result = results.get(json);
+        if (result) {
+            if (result.type === "result") {
+                return result.value;
+            } else {
+                throw result.error;
+            }
+        }
+        let promise = promiseValues(json);
+        promise.then(
+            value => {
+                if (results.size >= limit) results.clear();
+                results.set(json, { type: "result", value });
+            },
+            error => {
+                if (results.size >= limit) results.clear();
+                results.set(json, { type: "error", error });
+            }
+        );
+        proxyWatcher.triggerOnPromiseFinish(promise, { waitReason: fnc.toString() });
+        return undefined;
+    };
+}

package/src/functional/random.ts

@@ -0,0 +1,9 @@
+import { critz } from "./stats";
+import { getSeededRandom, shuffle } from "../misc/random";
+
+export function getSeededRandomNormal(seed: number, mean: number, stdDev: number) {
+    let rand = getSeededRandom(seed);
+    return () => {
+        return critz(rand()) * stdDev + mean;
+    };
+}

package/src/functional/runCommand.ts

@@ -0,0 +1,42 @@
+import child_process from "child_process";
+import path from "path";
+
+export async function runCommand(config: {
+    exe: string;
+    args: string[];
+    cwd?: string;
+    cancelPromise?: Promise<void>;
+}) {
+    await new Promise<void>((resolve, reject) => {
+        let childProc = child_process.spawn(config.exe, config.args, {
+            cwd: path.resolve(__dirname, "../.."),
+            stdio: "inherit",
+        });
+        childProc.on("error", reject);
+        childProc.on("exit", (code) => {
+            if (code === 0) {
+                resolve();
+            } else {
+                reject(new Error(`Process exited with code ${code} for command ${config.exe} ${config.args.join(" ")}`));
+            }
+        });
+        void config.cancelPromise?.finally(() => {
+            childProc.kill();
+        });
+    });
+}
+
+export function runCommandShell(command: string, config?: { cwd?: string; maxBuffer?: number }) {
+    return new Promise<string>((resolve, reject) => {
+        child_process.exec(command, {
+            cwd: config?.cwd || path.resolve(__dirname, "../.."),
+            maxBuffer: config?.maxBuffer,
+        }, (err, stdout, stderr) => {
+            if (err) {
+                reject(err);
+            } else {
+                resolve(stdout);
+            }
+        });
+    });
+}

package/src/functional/runOnce.ts

@@ -0,0 +1,7 @@
+
+let runLookup: { [guid: string]: boolean } = (globalThis as any).runLookup = (globalThis as any).runLookup || {};
+export function runOnce(guid: string) {
+    if (runLookup[guid]) return true;
+    runLookup[guid] = true;
+    return false;
+}

package/src/functional/stats.ts

@@ -0,0 +1,61 @@
+// https://stackoverflow.com/questions/36575743/how-do-i-convert-probability-into-z-score
+
+var Z_MAX = 6;
+export function poz(z: number) {
+
+    var y, x, w;
+
+    if (z === 0.0) {
+        x = 0.0;
+    } else {
+        y = 0.5 * Math.abs(z);
+        if (y > (Z_MAX * 0.5)) {
+            x = 1.0;
+        } else if (y < 1.0) {
+            w = y * y;
+            x = ((((((((0.000124818987 * w
+                - 0.001075204047) * w + 0.005198775019) * w
+                - 0.019198292004) * w + 0.059054035642) * w
+                - 0.151968751364) * w + 0.319152932694) * w
+                - 0.531923007300) * w + 0.797884560593) * y * 2.0;
+        } else {
+            y -= 2.0;
+            x = (((((((((((((-0.000045255659 * y
+                + 0.000152529290) * y - 0.000019538132) * y
+                - 0.000676904986) * y + 0.001390604284) * y
+                - 0.000794620820) * y - 0.002034254874) * y
+                + 0.006549791214) * y - 0.010557625006) * y
+                + 0.011630447319) * y - 0.009279453341) * y
+                + 0.005353579108) * y - 0.002141268741) * y
+                + 0.000535310849) * y + 0.999936657524;
+        }
+    }
+    return z > 0.0 ? ((x + 1.0) * 0.5) : ((1.0 - x) * 0.5);
+}
+
+
+/*  CRITZ  --  Compute critical normal z value to
+               produce given p.  We just do a bisection
+               search for a value within CHI_EPSILON,
+               relying on the monotonicity of pochisq().  */
+
+export function critz(p: number) {
+    var Z_EPSILON = 0.000001;     /* Accuracy of z approximation */
+    var minz = -Z_MAX;
+    var maxz = Z_MAX;
+    var zval = 0.0;
+    var pval;
+    if (p < 0.0) p = 0.0;
+    if (p > 1.0) p = 1.0;
+
+    while ((maxz - minz) > Z_EPSILON) {
+        pval = poz(zval);
+        if (pval > p) {
+            maxz = zval;
+        } else {
+            minz = zval;
+        }
+        zval = (maxz + minz) * 0.5;
+    }
+    return (zval);
+}

package/src/functional/throttleRerender.tsx

@@ -0,0 +1,80 @@
+
+import { qreact } from "../4-dom/qreact";
+import { formatTime } from "socket-function/src/formatting/format";
+import { css } from "typesafecss";
+
+const DEFAULT_PAUSE_THRESHOLD = 200;
+
+interface ThrottleState {
+    prevVNode: qreact.VNode;
+    paused: boolean;
+    threshold: number;
+    lastRenderTime: number;
+}
+
+// TODO: Support predicting if a render should be paused based on previous runs
+//  (using the target type, or maybe the render function body)?
+//  - Even just storing in memory the previous component types that were slow might be enough to be useful?
+// TODO: Support actual render throttling as well, which delays slow renders, instead of entirely pausing them
+//  (until they get so slow we need to pause them)
+export function throttleRerender(options: {
+    pauseThreshold?: number;
+    startPaused?: boolean;
+}) {
+    return function (target: unknown, propertyKey: unknown, descriptor: PropertyDescriptor) {
+        const originalMethod = descriptor.value as Function;
+        descriptor.value = newRender;
+        return descriptor;
+
+        function newRender(this: {
+            throttleState?: ThrottleState;
+        } & qreact.Component, ...args: any[]) {
+            let throttleState = this.throttleState;
+            if (!throttleState) {
+                throttleState = {
+                    prevVNode: undefined,
+                    paused: options.startPaused ?? false,
+                    threshold: options.pauseThreshold ?? DEFAULT_PAUSE_THRESHOLD,
+                    lastRenderTime: 0,
+                };
+                this.throttleState = throttleState;
+            }
+            if (throttleState.paused) {
+                // NOTE: reuseLastWatches will stop the server from unsyncing values. BUT... it shouldn't unsync
+                //  them immediately anyways... as that would cause dialogs, etc, to always have to resync
+                //  a lot of state. So... I think it's fine to not call reuseLastWatches here. If we have
+                //  a usecase that has a lot of of values being synced, which somehow renders quickly,
+                //  but is only slow due to us rapidly changing from syncing nothing to everything...
+                //  then we could re-enable this. But I imagine the render code will take more time
+                //  than the sync overhead (not the syncing time, just the overhead to recalculate what is
+                //  syncing).
+                //Querysub.reuseLastWatches();
+                return <>
+                    <div
+                        key="throttle-rerender-paused"
+                        className={css.pad2(6, 2).hsla(0, 0, 0, 0.8).color("white").button}
+                        title={`Paused, render ${formatTime(throttleState.lastRenderTime)} >= threshold ${formatTime(throttleState.threshold)}`}
+                        onClick={() => {
+                            throttleState!.paused = false;
+                            this.forceUpdate();
+                        }}
+                    >
+                        Slow component paused ({formatTime(throttleState.lastRenderTime)} render time). Click to unpause.
+                    </div>
+                    {throttleState.prevVNode}
+                </>;
+            }
+            let time = Date.now();
+            try {
+                const result = originalMethod.apply(this, args);
+                throttleState.prevVNode = result;
+            } catch (e) {
+                throttleState.prevVNode = qreact.errorHandler({ error: e, debugName: "throttleRerender" });
+            }
+            time = Date.now() - time;
+            throttleState.lastRenderTime = time;
+            throttleState.paused = time >= throttleState.threshold;
+            return throttleState.prevVNode;
+        }
+    };
+}

package/src/library-components/AspectSizedComponent.tsx

@@ -0,0 +1,88 @@
+import { Querysub } from "../4-querysub/QuerysubController";
+import { css } from "../4-dom/css";
+import { qreact } from "../4-dom/qreact";
+
+export class AspectSizedComponent extends qreact.Component<{
+    aspectRatio: number;
+    onNewSize?: (width: number, height: number) => void;
+    center?: { x: number; y: number };
+    className?: string;
+    innerClassName?: string;
+    defaultWidth?: number;
+    defaultHeight?: number;
+    onClick?: (e: MouseEvent) => void;
+}> {
+    state = {
+        width: this.props.defaultWidth ?? 100,
+        height: this.props.defaultHeight ?? 100,
+    };
+    holder: HTMLDivElement | null = null;
+    getSize() {
+        let { aspectRatio } = this.props;
+        let { width, height } = this.state;
+        let leftFraction = 0;
+        let topFraction = 0;
+        let widthFraction = 1;
+        let heightFraction = 1;
+
+        let center = this.props.center ?? { x: 0.5, y: 0.5 };
+
+        if (width / height > aspectRatio) {
+            // Too wide
+            let newWidth = height * aspectRatio;
+            leftFraction = (width - newWidth) * center.x / width;
+            widthFraction = newWidth / width;
+        } else {
+            // Too tall
+            let newHeight = width / aspectRatio;
+            topFraction = (height - newHeight) * center.y / height;
+            heightFraction = newHeight / height;
+        }
+        return { leftFraction, topFraction, widthFraction, heightFraction };
+    }
+    observer: ResizeObserver = new ResizeObserver((val) => {
+        for (let t of val) {
+            if (t.target === this.holder) {
+                Querysub.serviceWriteDetached(() => {
+                    let width = t.contentRect.width;
+                    let height = t.contentRect.height;
+                    this.state.width = width;
+                    this.state.height = height;
+                    let { widthFraction, heightFraction } = this.getSize();
+                    let innerWidth = widthFraction * width;
+                    let innerHeight = heightFraction * height;
+                    this.props.onNewSize?.(innerWidth, innerHeight);
+                });
+            }
+        }
+    });
+    componentWillUnmount() {
+        this.observer.disconnect();
+    }
+    render() {
+        let { leftFraction, topFraction, widthFraction, heightFraction } = this.getSize();
+
+        return (
+            <div
+                className={css.size("100%", "100%").position("relative", "soft") + " " + this.props.className}
+                key="maindiv"
+                ref2={(x) => {
+                    if (this.holder) {
+                        this.observer.unobserve(this.holder);
+                    }
+                    this.observer.observe(x);
+                    this.holder = x;
+                }}
+                onClick={this.props.onClick}
+            >
+                <div className={this.props.innerClassName} style={{
+                    position: "absolute",
+                    left: `${leftFraction * 100}%`,
+                    top: `${topFraction * 100}%`,
+                    width: `${widthFraction * 100}%`,
+                    height: `${heightFraction * 100}%`,
+                }}>{this.props.children}</div>
+            </div>
+        );
+    }
+}