querysub 0.2.0

package/src/5-diagnostics/GenericFormat.tsx

@@ -0,0 +1,165 @@
+import { formatDateTime, formatNiceDateTime, formatNumber, formatTime, formatVeryNiceDateTime } from "socket-function/src/formatting/format";
+import { css } from "typesafecss";
+import { canHaveChildren } from "socket-function/src/types";
+import { qreact } from "../4-dom/qreact";
+import preact, { ContextType } from "preact";
+import { errorMessage, warnMessage } from "../library-components/colors";
+
+export { errorMessage, warnMessage };
+
+export type RowType = { [columnName: string]: unknown };
+export type FormatContext<RowT extends RowType = RowType> = {
+    row?: RowT;
+    columnName?: RowT extends undefined ? string : keyof RowT;
+};
+export type JSXFormatter<T = unknown, RowT extends RowType = RowType> = (
+    StringFormatters
+    | `varray:${StringFormatters}`
+    | `link:${string}`
+    | ((value: T, context?: FormatContext<RowT>) => preact.ComponentChild)
+);
+
+type StringFormatters = (
+    "guess"
+    | "string" | "number"
+    | "timeSpan" | "date"
+    | "error" | "link"
+    | "toSpaceCase"
+);
+
+function d(value: unknown, formattedValue: preact.ComponentChild) {
+    if (value === undefined || value === null) {
+        return "";
+    }
+    return formattedValue;
+}
+const startGuessDateRange = +new Date(2010, 0, 1).getTime();
+const endGuessDateRange = +new Date(2040, 0, 1).getTime();
+let formatters: { [formatter in StringFormatters]: (value: unknown) => preact.ComponentChild } = {
+    string: (value) => d(value, String(value || "")),
+    number: (value) => d(value, formatNumber(Number(value))),
+    timeSpan: (value) => d(value, formatTime(Number(value))),
+    date: (value) => d(value, formatVeryNiceDateTime(Number(value))),
+    error: (value) => d(value, <span class={errorMessage}>{String(value)}</span>),
+    toSpaceCase: (value) => d(value, toSpaceCase(String(value))),
+    link: (value) => {
+        if (value === undefined || value === null) {
+            return "";
+        }
+        let href = String(value);
+        let str = String(value);
+        // https://google.com<google> => href = https://google.com, str = google
+        let match = str.match(/<([^>]+)>/);
+        if (match) {
+            href = str.slice(0, match.index);
+            str = match[1];
+        }
+        return <a target="_blank" href={href}>{str}</a>;
+    },
+    guess: (value) => {
+        if (typeof value === "number") {
+            // NOTE: These special values don't represent real values, and if they are shown
+            //  to the user, it is a mistake anyways. So instead of showing a large number
+            //  that is not meaningful to the user, we show a string, so they the issue
+            //  is not the system having a large number, but the system not changing
+            //  the default value.
+            if (value === Number.MAX_SAFE_INTEGER) {
+                return "Number.MAX_SAFE_INTEGER";
+            }
+            if (value === Number.MIN_SAFE_INTEGER) {
+                return "Number.MIN_SAFE_INTEGER";
+            }
+            if (value === Number.MAX_VALUE) {
+                return "Number.MAX_VALUE";
+            }
+            if (value === Number.MIN_VALUE) {
+                return "Number.MIN_VALUE";
+            }
+            // Infinity should be somewhat understood by the user, if they are even a little
+            //  bit literate. Of course, the value is likely a bug, but at least the consequences
+            //  may be inferrable (the threshold is +Infinity, so it will never be reached, etc).
+            if (value === Number.POSITIVE_INFINITY) {
+                return "+Infinity";
+            }
+            if (value === Number.NEGATIVE_INFINITY) {
+                return "-Infinity";
+            }
+            // These are somewhat a mistake, and should almost always be displayed as ""
+            if (Number.isNaN(value)) {
+                return "";
+            }
+
+            if (startGuessDateRange < value && value < endGuessDateRange) {
+                return formatters.date(value);
+            }
+            return formatters.number(value);
+        }
+        if (typeof value === "string" && value.startsWith("Error:")) {
+            return formatters.error(value.slice("Error:".length));
+        }
+        if (typeof value === "string" && value.startsWith("https://")) {
+            return formatters.link(value);
+        }
+        // Don't render nested objects, etc, otherwise passing large arrays
+        //  could just in us blowing the output up, when their intention
+        //  is to just show "Array()"
+        if (Array.isArray(value) && !value.some(x => canHaveChildren(x))) {
+            return formatValue(value, "varray:guess");
+        }
+        return formatters.string(value);
+    },
+};
+function formatVArray(value: unknown[], formatter: StringFormatters) {
+    if (!Array.isArray(value)) {
+        return <span class={errorMessage}>Expected array, got {typeof value}</span>;
+    }
+    let values = value.map(v => {
+        let formatted = formatValue(v, formatter);
+        if (!canHaveChildren(formatted)) {
+            return <span>{formatted}</span>;
+        }
+        return formatted;
+    });
+    return (
+        <div class={css.vbox(4)}>
+            {values}
+        </div>
+    );
+}
+
+export const genericFormat = formatValue;
+export function formatValue(value: unknown, formatter: JSXFormatter = "guess", context?: FormatContext) {
+    if (typeof formatter === "function") {
+        return formatter(value, context);
+    }
+    let formatterT = formatter as StringFormatters;
+    if (formatterT.startsWith("varray:")) {
+        formatterT = formatterT.slice("varray:".length) as StringFormatters;
+        return formatVArray(value as unknown[], formatterT);
+    }
+    if (formatterT.startsWith("link:")) {
+        let href = formatterT.slice("link:".length);
+        href = href.replaceAll("$VALUE$", String(value));
+        return formatters.link(href);
+    }
+    if (!formatters[formatterT]) {
+        throw new Error(`Unknown formatter: ${formatter}`);
+    }
+    return formatters[formatterT](value);
+}
+
+export function toSpaceCase(text: string) {
+    return text
+        // "camelCase" => "camel Case"
+        //  "URL" => "URL"
+        .replace(/([a-z][A-Z])/g, str => str[0] + " " + str[1])
+        // "snake_case" => "snake case"
+        .replace(/_([A-Za-z])/g, " $1")
+        // "firstletter" => "Firstletter"
+        .replace(/^./, str => str.toUpperCase())
+        // "first letter" => "first Letter"
+        .replace(/ ./, str => str.toUpperCase())
+        // Convert multiple spaces to a single space
+        .replace(/\s+/g, " ");
+    ;
+}

package/src/5-diagnostics/Modal.tsx

@@ -0,0 +1,79 @@
+import preact from "preact";
+import { nextId } from "socket-function/src/misc";
+import { lazy } from "socket-function/src/caching";
+import { css } from "typesafecss";
+import { Querysub } from "../4-querysub/Querysub";
+import { atomicObjectWrite, atomicObjectWriteNoFreeze } from "../2-proxy/PathValueProxyWatcher";
+import { qreact } from "../4-dom/qreact";
+
+const data = Querysub.createLocalSchema<{
+    modals: {
+        [id: string]: {
+            value: preact.ComponentChild;
+        }
+    };
+}>("modals");
+
+export class Modal extends preact.Component {
+    id = nextId();
+    componentWillUnmount(): void {
+        delete data().modals[this.id];
+    }
+    render() {
+        ensureRendering();
+        data().modals[this.id] = atomicObjectWriteNoFreeze({ value: this.props.children });
+        return undefined;
+    }
+}
+
+export function showModal(config: {
+    content: preact.ComponentChild;
+}): {
+    close: () => void;
+} {
+    ensureRendering();
+    let id = nextId();
+    Querysub.commit(() => {
+        data().modals[id] = atomicObjectWriteNoFreeze({ value: config.content });
+    });
+    function close() {
+        Querysub.commit(() => {
+            delete data().modals[id];
+        });
+    }
+    return { close };
+}
+
+export function closeAllModals() {
+    Querysub.commit(() => {
+        for (let id in data().modals) {
+            delete data().modals[id];
+        }
+    });
+}
+
+
+export class ModalHolder extends preact.Component {
+    render() {
+        let modals = Object.values(data().modals);
+        return (
+            <div class={"ModalHolder" + css.position("fixed").pos(0, 0).size("100vw", "100vh").zIndex(20).pointerEvents("none")}>
+                {modals.map(x => x.value)}
+                <style>
+                    {`
+                        .ModalHolder > * {
+                            pointer-events: all;
+                        }
+                    `}
+                </style>
+            </div>
+        );
+    }
+}
+
+const ensureRendering = lazy(() => {
+    let root = document.createElement("div");
+    root.id = "modals";
+    document.body.appendChild(root);
+    Querysub.render(<ModalHolder />, root);
+});

package/src/5-diagnostics/Table.tsx

@@ -0,0 +1,183 @@
+import { qreact } from "../4-dom/qreact";
+import { JSXFormatter, formatValue, toSpaceCase } from "./GenericFormat";
+import { css } from "typesafecss";
+import preact from "preact";
+import { showModal } from "./Modal";
+import { FullscreenModal } from "./FullscreenModal";
+import { canHaveChildren } from "socket-function/src/types";
+
+// Undefined means we infer the column
+// Null means the column is removed
+export type ColumnType<T = unknown, Row extends RowType = RowType> = undefined | null | {
+    // Defaults to column name
+    title?: string;
+    formatter?: JSXFormatter<T, Row>;
+};
+export type RowType = {
+    [columnName: string]: unknown;
+};
+export type ColumnsType = { [columnName: string]: ColumnType };
+export type TableType<RowT extends RowType = RowType> = {
+    columns: { [columnName in keyof RowT]?: ColumnType<RowT[columnName], RowT> };
+    rows: RowT[];
+};
+
+module.hotreload = true;
+
+export class Table<RowT extends RowType> extends qreact.Component<TableType<RowT> & {
+    class?: string;
+    cellClass?: string;
+    initialLimit?: number;
+
+    // Line and character limits before we cut off the inner content
+    lineLimit?: number;
+    characterLimit?: number;
+}> {
+    state = {
+        limit: this.props.initialLimit || 100,
+    };
+    render() {
+        let { columns, rows } = this.props;
+        let cellClass = " " + String(this.props.cellClass || "") + " ";
+        let allRows = rows;
+        rows = rows.slice(0, this.state.limit);
+
+        const lineLimit = this.props.lineLimit ?? 3;
+        const characterLimit = this.props.characterLimit ?? 300;
+
+        return (
+            <table class={css.borderCollapse("collapse") + this.props.class}>
+                <tr class={css.position("sticky").zIndex(1).top(0).hsla(0, 0, 95, 0.9)}>
+                    <th class={css.whiteSpace("nowrap")}>⧉ {allRows.length}</th>
+                    {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]) =>
+                        <th class={css.pad2(8, 4) + cellClass}>{column?.title || toSpaceCase(columnName)}</th>
+                    )}
+                </tr>
+                {rows.map((row, index) => (
+                    <tr
+                        class={
+                            (index % 2 === 1 && css.hsla(0, 0, 100, 0.25) || "")
+                            + css.relative.zIndex(0)
+                        }
+                    >
+                        <td class={css.center}>{index + 1}</td>
+                        {Object.entries(columns).filter(x => x[1] !== null).map(([columnName, column]) => {
+                            let value = row[columnName];
+                            let formatter = column?.formatter || "guess";
+                            let result = formatValue(value, formatter, { row, columnName });
+                            let renderedObj = renderTrimmed({
+                                content: result,
+                                lineLimit,
+                                characterLimit,
+                            });
+                            let attributes = { ...renderedObj.outerAttributes };
+                            attributes.class = attributes.class || "";
+                            attributes.class += " " + css.whiteSpace("pre-wrap").pad2(8, 4);
+                            attributes.class += cellClass;
+                            // If the inner content looks like a VNode, take it's attributes and unwrap it,
+                            //  so it can fill the entire cell.
+                            let innerContent = renderedObj.innerContent;
+                            if (
+                                canHaveChildren(innerContent) && "props" in innerContent
+                                && canHaveChildren(innerContent.props)
+                                && "children" in innerContent.props
+                                && (
+                                    Array.isArray(innerContent.props.children) && innerContent.props.children.length === 1
+                                    || !Array.isArray(innerContent.props.children)
+                                )
+                                // AND, it is a div or span (a tags shouldn't be unwrapped)
+                                && (innerContent.type === "div")
+                            ) {
+                                attributes.class += " " + innerContent.props.class;
+                                let baseOnClick = attributes.onClick;
+                                let props = innerContent.props;
+                                attributes.onClick = (e) => {
+                                    if (baseOnClick) baseOnClick(e);
+                                    (props as any).onClick?.(e);
+                                };
+                                for (let key in props) {
+                                    if (key === "class") continue;
+                                    if (key === "onClick") continue;
+                                    (attributes as any)[key] = props[key];
+                                }
+                                innerContent = props.children as any;
+                            }
+                            return <td {...attributes}>
+                                {innerContent}
+                            </td>;
+                        })}
+                    </tr>
+                ))}
+                {allRows.length > rows.length && <tr>
+                    <td
+                        colSpan={1 + Object.keys(columns).length}
+                        class={css.pad2(8).textAlign("center")}
+                    >
+                        <button onClick={() => this.state.limit += 100}>
+                            {/* TODO: Load more as soon as they get close to the end.
+                                - It doesn't really matter, as there is little reason for them to scroll far
+                                    (they should just filter/search instead).
+                            */}
+                            Load more
+                        </button>
+                    </td>
+                </tr>}
+            </table>
+        );
+    }
+}
+
+function renderTrimmed(config: {
+    content: preact.ComponentChild;
+    lineLimit: number;
+    characterLimit: number;
+}): {
+    outerAttributes: preact.JSX.HTMLAttributes<HTMLTableCellElement>;
+    innerContent: preact.ComponentChild;
+} {
+    let { content, lineLimit, characterLimit } = config;
+    if (typeof content !== "string" && typeof content !== "number") {
+        return {
+            outerAttributes: {},
+            innerContent: content as any,
+        };
+    }
+    let trimmed = false;
+    let contentStr = String(content);
+    if (contentStr.length > characterLimit) {
+        contentStr = contentStr.slice(0, characterLimit - 3) + "...";
+        trimmed = true;
+    }
+    let lines = contentStr.split("\n");
+    if (lines.length > lineLimit) {
+        lines = lines.slice(0, lineLimit);
+        lines[lines.length - 1] += "...";
+        contentStr = lines.join("\n");
+        trimmed = true;
+    }
+
+    if (!trimmed) {
+        return {
+            outerAttributes: {},
+            innerContent: contentStr,
+        };
+    }
+
+    return {
+        outerAttributes: {
+            class: css.opacity(0.5, "hover").button,
+            onClick: () => {
+                let close = showModal({
+                    content: <FullscreenModal onCancel={() => {
+                        close.close();
+                    }}>
+                        <div class={css.whiteSpace("pre-wrap")}>
+                            {content}
+                        </div>
+                    </FullscreenModal>
+                });
+            }
+        },
+        innerContent: contentStr
+    };
+}

package/src/5-diagnostics/TimeGrouper.tsx

@@ -0,0 +1,114 @@
+import debugbreak from "debugbreak";
+import { formatTime } from "socket-function/src/formatting/format";
+import { isDefined } from "../misc";
+
+const SUB_BUCKET_COUNT = 100;
+
+export class TimeGrouper {
+    constructor(private timeBuckets = [
+        { name: "Last", duration: 0 },
+        { name: "Hour", duration: 60 * 60 * 1000 },
+        { name: "Day", duration: 24 * 60 * 60 * 1000 },
+        { name: "Week", duration: 7 * 24 * 60 * 60 * 100 },
+    ]) { }
+    private buckets = this.timeBuckets.map(x => ({
+        name: x.name,
+        duration: x.duration,
+        subBucketSize: x.duration / SUB_BUCKET_COUNT,
+        subBuckets: [] as {
+            min: number;
+            max: number;
+            sum: number;
+            last: number;
+            startTime: number;
+            endTime: number;
+            lastUpdateTime: number;
+        }[],
+    }));
+    public onValueChanged(value: number, time = Date.now()) {
+        for (let bucket of this.buckets) {
+            if (bucket.duration === 0) {
+                if (bucket.subBuckets.length === 0) {
+                    let newBucket = {
+                        min: 0, sum: 0, max: 0, last: 0, startTime: 0, endTime: 0, lastUpdateTime: 0,
+                    };
+                    bucket.subBuckets.push(newBucket);
+                }
+                let latest = bucket.subBuckets.at(-1)!;
+                latest.max = value;
+                latest.min = value;
+                latest.sum = value;
+                latest.last = value;
+                latest.startTime = time;
+                latest.endTime = time;
+                latest.lastUpdateTime = time;
+            } else {
+                // Add a new subbucket if the latest is too old
+                if (bucket.subBuckets.length === 0 || time > bucket.subBuckets.at(-1)!.endTime) {
+                    let newBucket = {
+                        min: value,
+                        max: value,
+                        sum: 0,
+                        last: value,
+                        startTime: time,
+                        endTime: time + bucket.subBucketSize,
+                        lastUpdateTime: 0,
+                    };
+                    bucket.subBuckets.push(newBucket);
+                    // Remove buckets that are too old
+                    let threshold = time - bucket.duration;
+                    while (bucket.subBuckets.length > 0 && bucket.subBuckets[0].endTime < threshold) {
+                        bucket.subBuckets.shift();
+                    }
+                }
+                // Update the latest subbucket
+                let latest = bucket.subBuckets.at(-1)!;
+                latest.max = Math.max(latest.max, value);
+                latest.sum += value;
+                latest.last = value;
+                latest.lastUpdateTime = time;
+            }
+        }
+    }
+    public getSummary() {
+        let buckets = this.buckets.map(bucket => {
+            // Reduce subBuckets within each bucket
+            let sub = bucket.subBuckets;
+            return {
+                name: bucket.name,
+                duration: bucket.duration,
+                recordedDuration: sub.at(-1)!.startTime - sub[0].endTime,
+                min: sub.map(x => x.min).reduce((a, b) => Math.min(a, b), Number.POSITIVE_INFINITY),
+                max: sub.map(x => x.max).reduce((a, b) => Math.max(a, b), Number.NEGATIVE_INFINITY),
+                sum: sub.map(x => x.sum).reduce((a, b) => a + b, 0),
+                lastUpdateTime: sub.map(x => x.lastUpdateTime).reduce((a, b) => Math.max(a, b), 0),
+            };
+        });
+        // We have to have at least have more data than the smaller bucket, otherwise this bucket
+        //  is too empty. This prevents us from confusingly displaying "1 week of data",
+        //  when we only have 1 day.
+        return buckets.filter((bucket, index) => {
+            if (index === 0) return true;
+            return bucket.recordedDuration > 0 && (bucket.recordedDuration > buckets[index - 1].recordedDuration * 1.1);
+        });
+    }
+
+    public getStateSummary(format: (value: number) => string): string {
+        return this.getSummary().map(bucket => {
+            if (bucket.duration === 0 || bucket.min === bucket.max) {
+                if (bucket.min === 0) return undefined;
+                return `(${bucket.name}) ${format(bucket.min)}`;
+            }
+            return `(${bucket.name}) ${format(bucket.min)} to ${format(bucket.max)}`;
+        }).filter(isDefined).join("\n");
+    }
+    public getEventSummary(format: (value: number) => string): string {
+        return this.getSummary().map(bucket => {
+            if (bucket.duration === 0) {
+                if (bucket.sum === 0) return undefined;
+                return `(${bucket.name}) ${format(bucket.sum)}`;
+            }
+            return `(${bucket.name}) ${format(bucket.sum)}`;
+        }).filter(isDefined).join("\n");
+    }
+}