querysub 0.152.0 → 0.154.0

package/src/library-components/Histogram.tsx

@@ -0,0 +1,338 @@
+import preact from "preact"; import { qreact } from "../4-dom/qreact";
+import { formatNumber } from "socket-function/src/formatting/format";
+import { css } from "typesafecss";
+import { URLParam } from "../library-components/URLParam";
+import { Anchor } from "../library-components/ATag";
+import { performDrag2 } from "../library-components/drag";
+import { atomic, atomicObjectSymbol, atomicObjectWrite } from "../2-proxy/PathValueProxyWatcher";
+import { getProxyPath } from "../2-proxy/pathValueProxy";
+import { authorityStorage } from "../0-path-value-core/pathValueCore";
+import { addEpsilons } from "../bits";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { MeasuredDiv } from "../library-components/MeasuredDiv";
+
+export type ColumnDesc = {
+    title?: string;
+    format?: (value: number, context: { maxAbsoluteValue: number; long?: boolean }) => preact.ComponentChild;
+    link?: (range: { xStart: number; xEnd: number; }) => { param: URLParam; value: unknown; }[];
+};
+export type XYValue = { x: number; y: number };
+export class Histogram extends qreact.Component<{
+    title?: string;
+    className?: string;
+    values: XYValue[];
+    xColumn?: ColumnDesc;
+    yColumn?: ColumnDesc;
+    noXAxisRounding?: boolean;
+
+    barWidth?: number;
+    barGap?: number;
+    yLabelCount?: number;
+    pixelsPerLabel?: number;
+}> {
+    state = {
+        width: window.innerWidth,
+        height: 500,
+        yAxisWidth: 100,
+        dragging: undefined as {
+            xStart: number;
+            xEnd: number;
+        } | undefined,
+    };
+
+    render() {
+        let { className, values, xColumn, yColumn, noXAxisRounding } = this.props;
+        if (values.length === 0) return <div class={this.props.className + css.center}>No data</div>;
+        let width = Math.max(1, this.state.width);
+        let yAxisWidth = this.state.yAxisWidth;
+        const barSpacing = this.props.barGap ?? 2;
+        // In reality the width will be less, as some space will be taken up by the axis labels
+        let barWidth = this.props.barWidth ?? 20;
+        let barCount = Math.ceil((width - yAxisWidth) / (barWidth + barSpacing));
+        const pixelsPerLabel = this.props.pixelsPerLabel ?? 100;
+        let barsPerLabel = Math.ceil(pixelsPerLabel / (barWidth + barSpacing));
+        // The bars have to align with our labels, otherwise they can't be equally spaced,
+        //      and that is the only spacing mode flex supports!
+        let barCountDelta = (barCount % barsPerLabel);
+        barCount -= barCountDelta;
+        barCount = Math.max(barsPerLabel, barCount);
+        // Recalculate the width
+        barWidth = (width - yAxisWidth) / barCount - barSpacing;
+        const yLabelCount = this.props.yLabelCount ?? 10;
+
+        // Values test code
+        // values = [];
+        // let rand = getSeededRandom(7);
+        // for (let i = 0; i < 1000; i++) {
+        //     values.push({ x: i + 500, y: rand() * 1000 });
+        // }
+        // xColumn = { title: "X" };
+        // yColumn = { title: "Y" };
+
+        let minX = Math.min(...values.map((v) => v.x));
+        let maxX = Math.max(...values.map((v) => v.x));
+        if (maxX === minX) {
+            maxX = minX + 1;
+        }
+        // We often use maxX as the end, instead of the max, so... make it a bit bigger, so that works.
+        maxX = addEpsilons(maxX, 1);
+        let xIncrement = Math.ceil((maxX - minX) / barCount);
+        /** Get a nice number, https://stackoverflow.com/a/16363437/1117119, https://gist.github.com/igodorogea/4f42a95ea31414c3a755a8b202676dfd
+         *  - Modified to handle negative numbers
+         *  - Always returns a value >= num, unless num is < 0, then returns a number <= num.
+        */
+        function getNiceNumber(num: number): number {
+            if (num < 0) return -getNiceNumber(-num);
+            let zeros = Math.floor(Math.log10(num));
+            if (zeros === Number.NEGATIVE_INFINITY) return 1;
+            let fraction = num / 10 ** zeros;
+            if (fraction <= 1) fraction = 1;
+            else if (fraction <= 2) fraction = 2;
+            else if (fraction <= 5) fraction = 5;
+            else fraction = 10;
+            return fraction * 10 ** zeros;
+        }
+        if (!noXAxisRounding) {
+            xIncrement = getNiceNumber(xIncrement);
+        }
+
+        // Round to xIncrement
+        minX = Math.floor(minX / xIncrement) * xIncrement;
+        maxX = Math.ceil(maxX / xIncrement) * xIncrement;
+
+        // xIncrement MIGHT not cover the range we need (as we extended the range).
+        //  So just add bars in increments of barsParLabel. This shrinks the bar pixel width, but... it should be fine.
+        while (barCount * xIncrement <= (maxX - minX)) {
+            barCount += barsPerLabel;
+        }
+        if (noXAxisRounding) {
+            xIncrement = (maxX - minX) / barCount;
+        }
+
+        let xBuckets: {
+            xStart: number;
+            xEnd: number;
+            sum: number;
+        }[] = [];
+        for (let i = 0; i < barCount; i++) {
+            xBuckets.push({
+                xStart: minX + i * xIncrement,
+                xEnd: minX + (i + 1) * xIncrement,
+                sum: 0,
+            });
+        }
+        function getBucketIndex(xValue: number) {
+            return Math.floor((xValue - minX) / xIncrement);
+        }
+        for (let value of values) {
+            let bucketIndex = getBucketIndex(value.x);
+            xBuckets[bucketIndex].sum += value.y;
+        }
+
+        let minY = Math.min(...xBuckets.map((v) => v.sum));
+        let maxY = Math.max(...xBuckets.map((v) => v.sum));
+        maxY = getNiceNumber(maxY);
+        // Always try to start at zero
+        if (minY / (maxY - minY) < 0.35) {
+            minY = 0;
+        }
+
+        let yIncrement = getNiceNumber((maxY - minY) / yLabelCount);
+        let yLabelValues: number[] = [];
+        for (let i = 0; i < yLabelCount; i++) {
+            yLabelValues.push(minY + i * yIncrement);
+        }
+        yLabelValues.reverse();
+
+
+        let maxAbsoluteY = Math.max(Math.abs(minY), Math.abs(maxY));
+        let maxAbsoluteX = Math.max(Math.abs(minX), Math.abs(maxX));
+
+        function formatX(value: number) {
+            return xColumn?.format?.(value, { maxAbsoluteValue: maxAbsoluteX }) ?? formatNumber(value);
+        }
+        function formatXLong(value: number) {
+            return xColumn?.format?.(value, { maxAbsoluteValue: maxAbsoluteX, long: true }) ?? formatNumber(value);
+        }
+        function formatY(value: number) {
+            return yColumn?.format?.(value, { maxAbsoluteValue: maxAbsoluteY }) ?? formatNumber(value);
+        }
+        function formatYLong(value: number) {
+            return yColumn?.format?.(value, { maxAbsoluteValue: maxAbsoluteY, long: true }) ?? formatNumber(value);
+        }
+
+        // NOTE: Y Axis labels are less accurately positioned (especially if some have wrapping text, and others don't)
+        //  but... it should be fine. The x axis labels are the ones that really need to be accurate, because the users will
+        //  be looking at specific bars.
+        let yAxisLabels = yLabelValues.map((yValue, i) => {
+            i = yLabelCount - i - 1;
+            let frac = 1 - i / (yLabelCount - 1);
+            let pos = frac === 0 ? "0%" as const : `calc(${frac * 100}% - 2px)` as const;
+            return (
+                <div class={
+                    css.maxWidth("30vw").height("100%").hbox0.relative
+                }>
+                    <div class={css.relative.top(`${80 * (frac - 0.5)}%`)}>
+                        {formatY(yValue)}
+                    </div>
+                    {/* <div class={css.fillHeight.relative.marginLeft(4)}>
+                        <div class={css.relative.pos(0, pos).size(4, 1).hsla(0, 0, 7, 0.4).display("block").marginTop(1)} />
+                    </div> */}
+                </div>
+            );
+        });
+        let xAxisLabels: preact.ComponentChild[] = [];
+        for (let i = 0; i < barCount; i += barsPerLabel) {
+            let firstBucket = xBuckets[i];
+            let lastBucket = xBuckets[i + barsPerLabel - 1];
+            let middleXValue = (firstBucket.xStart + lastBucket.xEnd) / 2;
+            if (i === 0) {
+                middleXValue = firstBucket.xStart;
+            } else if (i === barCount - barsPerLabel) {
+                middleXValue = lastBucket.xEnd;
+            }
+            let link = xColumn?.link?.({ xStart: firstBucket.xStart, xEnd: lastBucket.xEnd }) || [];
+            xAxisLabels.push(
+                <div class={
+                    css.relative
+                        .width("100%")
+                        .vbox0
+                        .alignCenter
+                        .offsetx(`calc(${barWidth * 0.5}px - 50%)`)
+                }>
+                    {/* NOTE: Our ticks are off again, so... just don't show them. */}
+                    {/* <div class={css.offsetx("-50%").size(1, 4).hsla(0, 0, 7, 0.4).display("block").marginTop(1)} /> */}
+                    <Anchor
+                        class={
+                            css
+                                .pad2(10, 0)
+                                .boxSizing("content-box")
+                                .textAlign("center")
+                        }
+                        values={link}
+                    >
+                        {formatX(middleXValue)}
+                    </Anchor>
+                </div>
+            );
+        }
+
+        let totalY = xBuckets.reduce((sum, v) => sum + v.sum, 0);
+        const renderBucket = (bucket: { xStart: number; xEnd: number; sum: number }) => {
+            let barEnd = (bucket.sum - minY) / (maxY - minY);
+            let barStart = 0;
+            // If we have a value, but it's very small, increase it, so the bar is visible
+            if (0 < barEnd && barEnd < 0.01) {
+                // We  want it to be 1 pixel high. Our bar height is less than this.state.height,
+                //  but... as long as this is > 0.5 pixels, it should be visible.
+                barEnd = 1 / this.state.height;
+            }
+            if (minY < 0) {
+                barStart = (0 - minY) / (maxY - minY);
+            }
+            if (barEnd < barStart) {
+                [barStart, barEnd] = [barEnd, barStart];
+            }
+            let link = xColumn?.link?.({ xStart: bucket.xStart, xEnd: bucket.xEnd }) || [];
+            let drag = atomic(this.state.dragging);
+            let center = (bucket.xStart + bucket.xEnd) / 2;
+            let draggedOver = drag && drag.xStart <= center && center <= drag.xEnd;
+            return (
+                <Anchor
+                    class={
+                        css
+                            .size(barWidth, "100%")
+                            .relative
+                            .background(`hsla(0, 0%, 100%, 0.2)`, "hover")
+                            .userSelect("none").filter("brightness(1.1)", "hover")
+                            .fillWidth
+                            .flexShrink(100000000)
+                        + (draggedOver && css.background("hsla(0, 0%, 100%, 0.4)"))
+                    }
+                    title={`${formatYLong(bucket.sum)} at ${formatXLong(bucket.xStart)} to ${formatXLong(bucket.xEnd)}`}
+                    values={link}
+                    onMouseDown={(e) => {
+                        e.preventDefault();
+                        const self = this;
+                        self.state.dragging = atomicObjectWrite({ xStart: bucket.xStart, xEnd: bucket.xEnd });
+                        performDrag2({
+                            e,
+                            slop: 5,
+                            onFinally(apply) {
+                                let dragState = atomic(self.state.dragging);
+                                self.state.dragging = undefined;
+                                if (dragState && apply) {
+                                    let xStart = dragState.xStart;
+                                    let xEnd = dragState.xEnd;
+                                    let link = xColumn?.link?.({ xStart, xEnd }) || [];
+                                    for (let value of link) {
+                                        value.param.value = value.value;
+                                    }
+                                }
+                            }
+                        });
+                    }}
+                    onMouseOver={e => {
+                        let dragging = atomic(this.state.dragging);
+                        if (dragging) {
+                            let xStart = Math.min(dragging.xStart, bucket.xStart);
+                            let xEnd = Math.max(dragging.xEnd, bucket.xEnd);
+                            this.state.dragging = atomicObjectWrite({ xStart, xEnd });
+                        }
+                    }}
+                >
+                    <div class={
+                        css
+                            .absolute
+                            .size("100%", `${(barEnd - barStart) * 100}%`)
+                            .pos(0, `${(1 - barEnd) * 100}%`)
+                            .hsl(240, 50, 75).vbox0.justifyContent("flex-end")
+                    }>
+                    </div>
+                </Anchor>
+            );
+        };
+        return (
+            <MeasuredDiv
+                onNewSize={(width, height, elem) => {
+                    this.state.width = width;
+                    this.state.height = height;
+                }}
+                class={
+                    (className || css.size("100%", "100%"))
+                    + css.hsl(75, 50, 75)
+                    // NOTE: We might need scroll bars if the axis labels are too big (too much text).
+                    + css.overflowAuto.vbox0
+                }
+            >
+                <div class={css.alignSelf("center").margins2(10, 4).fontSize(16)}>
+                    {this.props.title}
+                    {this.props.title && " ("}
+                    {
+                        yColumn && yColumn && `${formatY(totalY)} ${yColumn.title} vs ${xColumn?.title}`
+                        || yColumn?.title && `${formatY(totalY)} ${yColumn.title}`
+                        || xColumn?.title
+                    }
+                    {this.props.title && ")"}
+                </div>
+                <div class={
+                    css
+                        .display("grid").gridTemplateColumns("auto 1fr").gridTemplateRows("1fr auto")
+                        .fillBoth
+                        .relative
+                }>
+                    <div className={css.vbox0.justifyContent("space-between").flexShrink0.fillHeight.alignEnd.margins2(4, 0)}>
+                        {yAxisLabels}
+                    </div>
+                    <div class={css.hbox(barSpacing).fillBoth.overflowHidden.flexShrink(10000000)}>
+                        {xBuckets.map(renderBucket)}
+                    </div>
+                    <div />
+                    <div class={css.hbox(barSpacing).alignItems("start").margins2(0, 2)}>
+                        {xAxisLabels}
+                    </div>
+                </div>
+            </MeasuredDiv>
+        );
+    }
+}

package/src/library-components/InlinePopup.tsx

@@ -0,0 +1,67 @@
+import preact from "preact";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { qreact } from "../4-dom/qreact";
+import { Button } from "../library-components/Button";
+import { Icon } from "../library-components/icons";
+import { createURLSync } from "./URLParam";
+
+const popupURL = createURLSync<string>("popup", "");
+
+
+export class InlinePopup extends qreact.Component<{
+    type: string;
+    margin?: number;
+}> {
+    render() {
+        if (popupURL.value !== this.props.type) return undefined;
+        let margin = this.props.margin ?? 100;
+        return (
+            <div
+                style={{
+                    position: "fixed",
+                    left: 0, top: 0,
+                    width: "100vw", height: "100vh",
+                    zIndex: 1000,
+                }}
+                onClick={e => qreact.isTarget(e) && (popupURL.value = "")}
+            >
+                <div style={{
+                    margin,
+                    position: "relative",
+                    zIndex: 1,
+                }}>
+                    <Button
+                        hotkeys={["Escape"]}
+                        showHotkeys
+                        onClick={() => popupURL.value = ""}
+                        style={{
+                            position: "absolute",
+                            right: 0, top: -10,
+                            transform: "translate(0%, -100%)",
+                            border: "1px solid hsl(0, 0%, 7%)",
+                        }}
+                    >
+                        {Icon.close()}
+                    </Button>
+                    <div style={{
+                        maxHeight: `calc(100vh - ${margin * 2}px)`,
+                        overflow: "auto",
+                    }}>
+                        {this.props.children}
+                    </div>
+                </div>
+                <div
+                    className="button"
+                    style={{
+                        position: "absolute",
+                        left: 0, top: 0,
+                        width: "100%", height: "100%",
+                        background: "hsl(0, 0%, 50%, 0.5)",
+                        zIndex: 0,
+                    }}
+                    onClick={e => popupURL.value = ""}
+                />
+            </div>
+        );
+    }
+}

package/src/library-components/Notifications.tsx

@@ -0,0 +1,153 @@
+import preact from "preact";
+import { showModal } from "../5-diagnostics/Modal";
+import { lazy } from "socket-function/src/caching";
+import { Querysub } from "../4-querysub/Querysub";
+import { nextId, sort } from "socket-function/src/misc";
+import { atomicObjectWrite } from "../2-proxy/PathValueProxyWatcher";
+import { css } from "../4-dom/css";
+import { qreact } from "../4-dom/qreact";
+import { yellow } from "socket-function/src/formatting/logColors";
+
+export type NotifyPos = "topLeft" | "topRight" | "bottomLeft" | "bottomRight";
+
+let nextSeqNum = 1;
+interface NotifySchema {
+    id?: string;
+    seqNum: number;
+    notification: preact.ComponentChild;
+    pos: NotifyPos;
+}
+let notifySchema = Querysub.createLocalSchema<{
+    notifications: {
+        [seqNum: number]: NotifySchema;
+    };
+}>("notifications");
+
+class Notifications extends qreact.Component {
+    render() {
+        let notes = Object.values(notifySchema().notifications);
+        let byPos = new Map<NotifyPos, NotifySchema[]>();
+        for (let note of notes) {
+            let pos = note.pos;
+            if (!byPos.has(pos)) byPos.set(pos, []);
+            byPos.get(pos)!.push(note);
+        }
+        return <>
+            {Array.from(byPos.entries()).map(([pos, notes]) => {
+                sort(notes, note => note.seqNum);
+                let style: preact.JSX.CSSProperties = {};
+                if (pos === "topLeft") {
+                    style.top = 0;
+                    style.left = 0;
+                }
+                if (pos === "topRight") {
+                    style.top = 0;
+                    style.right = 0;
+                }
+                if (pos === "bottomLeft") {
+                    style.bottom = 0;
+                    style.left = 0;
+                }
+                if (pos === "bottomRight") {
+                    style.bottom = 0;
+                    style.right = 0;
+                }
+                let usedIds = new Set<string>();
+                notes = notes.filter(note => {
+                    if (!note.id) return true;
+                    if (usedIds.has(note.id)) return false;
+                    usedIds.add(note.id);
+                    return true;
+                });
+                return <div
+                    class={
+                        css.position("fixed").vbox(10).pad(20)
+                            .zIndex(1000000)
+                    }
+                    style={style}
+                >
+                    {notes.slice(0, 10).map(note =>
+                        <CloseWrapper key={note.seqNum} seqNum={note.seqNum}>
+                            {note.notification}
+                        </CloseWrapper>
+                    )}
+                    {notes.length > 10 && <div class={css.hsl(0, 0, 50).pad2(4, 2)}>
+                        <div>And {notes.length - 10} more notifications</div>
+                    </div>}
+                </div>;
+            })}
+        </>;
+    }
+}
+class CloseWrapper extends qreact.Component<{ seqNum: number }> {
+    render() {
+        return this.props.children;
+    }
+}
+let ensureNotifications = lazy(() => {
+    showModal({ content: <Notifications /> });
+});
+
+/** Allows capturing the current state so the notification can be closed later on */
+export function createCloseCurrentNotification() {
+    const ancestor = qreact.getAncestor(CloseWrapper);
+    if (!ancestor) {
+        console.warn(yellow(`Cannot close current Notification as we are not presently inside of a Notification.`));
+        return;
+    }
+    let seqNum = ancestor.data().props.seqNum as number;
+    return () => {
+        Querysub.commit(() => {
+            // Close all, as we are getting too much notify spam
+            for (let key in notifySchema().notifications) {
+                delete notifySchema().notifications[key];
+            }
+            // delete notifySchema().notifications[seqNum];
+        });
+    };
+}
+
+export function closeCurrentNotification() {
+    const ancestor = qreact.getAncestor(CloseWrapper);
+    if (!ancestor) {
+        console.warn(yellow(`Cannot close current Notification as we are not presently inside of a Notification.`));
+        return;
+    }
+    Querysub.commit(() => {
+        // Close all, as we are getting too much notify spam
+        for (let key in notifySchema().notifications) {
+            delete notifySchema().notifications[key];
+        }
+        //delete notifySchema().notifications[ancestor.data().props.seqNum as number];
+    });
+}
+
+export function showNotification(config: {
+    notification: preact.ComponentChild;
+    pos: NotifyPos;
+    timeout?: number;
+    id?: string;
+}): {
+    close: () => void;
+} {
+    let { notification, pos, timeout, id } = config;
+    ensureNotifications();
+    let seqNum = nextSeqNum++;
+    Querysub.commit(() => {
+        notifySchema().notifications[seqNum] = atomicObjectWrite({
+            notification,
+            pos,
+            seqNum,
+            id,
+        });
+    });
+    function close() {
+        Querysub.commit(() => {
+            delete notifySchema().notifications[seqNum];
+        });
+    }
+    if (timeout) {
+        setTimeout(close, timeout);
+    }
+    return { close };
+}

package/src/library-components/RenderIfVisible.tsx

@@ -0,0 +1,80 @@
+
+import preact from "preact";
+import { VirtualDOM, qreact } from "../4-dom/qreact";
+import { Querysub } from "../4-querysub/Querysub";
+import { cacheLimited, cacheWeak, lazy } from "socket-function/src/caching";
+import { nextId, throttleFunction } from "socket-function/src/misc";
+
+let data = Querysub.createLocalSchema<{
+    visibleIds: {
+        [key: string]: boolean;
+    }
+}>("RenderIfVisible");
+
+let getIntersectionObserver = cacheWeak((root: HTMLElement) => {
+    return new IntersectionObserver(entries => {
+        let visibleCount = 0;
+        Querysub.localCommit(() => {
+            for (let entry of entries) {
+                let id = entry.target.getAttribute("data-intersection-id")!;
+                let isVisible = !!entry.isIntersecting;
+                data().visibleIds[id] = isVisible;
+                if (isVisible) {
+                    visibleCount++;
+                }
+            }
+        });
+        console.log("Visible count", visibleCount);
+    }, {
+        root,
+        rootMargin: "2000px",
+        // TODO: Scrolling breaks this slightly. We need to add a fixed position
+        //  div inside of the scroll div, and use that as the root. Maybe?
+        //  - See https://stackoverflow.com/questions/58622664/intersectionobserver-how-rootmargin-work/58625634#58625634
+        //      - Basically... we can't know the position of the images outside of the scrolled div,
+        //          because they are cutoff by the scrolling, which hides their true position
+        //          from the IntersectionObserver. Or something...
+    });
+});
+
+/** If not visible, wipes out the children. We still need to render something,
+ *      otherwise we can't know if it would be visible or not!
+ *      The size of the element shouldn't depend on it's children, otherwise it will move
+ *          around, and possibly get an infinite loop of re-renders.
+ */
+export class RenderIfVisible extends qreact.Component<preact.JSX.HTMLAttributes<HTMLDivElement> & {
+    uniqueKey: string;
+    overrideType?: string;
+    root?: () => HTMLElement | undefined | null;
+    replacement?: VirtualDOM;
+    forceShow?: boolean;
+}> {
+    id = nextId();
+    lastElement: HTMLElement | null = null;
+    observer() {
+        return getIntersectionObserver(this.props.root?.() ?? document.body);
+    }
+    componentWillUnmount(): void {
+        if (this.lastElement) {
+            this.observer().unobserve(this.lastElement);
+        }
+    }
+    render() {
+        let props = { ...this.props };
+        if (!this.props.forceShow && !data().visibleIds[this.id]) {
+            props.children = undefined;
+        }
+        return qreact.createElement(this.props.overrideType ?? "div", {
+            key: this.props.uniqueKey,
+            ...props,
+            "data-intersection-id": this.id,
+            ref2: (elem: HTMLElement) => {
+                if (this.lastElement) {
+                    this.observer().unobserve(this.lastElement);
+                }
+                this.lastElement = elem;
+                this.observer().observe(elem);
+            }
+        } as any);
+    }
+}