querysub 0.152.0 → 0.154.0

package/src/diagnostics/misc-pages/ComponentSyncStats.tsx

@@ -0,0 +1,129 @@
+import { ExternalRenderClass, qreact } from "../../4-dom/qreact";
+import { throttleRerender } from "../../functional/throttleRerender";
+import { pathWatcher } from "../../0-path-value-core/pathValueCore";
+import { css } from "../../4-dom/css";
+import { TimeRangeView } from "./TimeRangeView";
+import { URLParam } from "../../library-components/URLParam";
+import { InputLabelURL } from "../../library-components/InputLabel";
+import { addEpsilons } from "../../bits";
+import { formatNumber, formatPercent, formatTime } from "socket-function/src/formatting/format";
+import { nextId, sort } from "socket-function/src/misc";
+import { ATag } from "../../library-components/ATag";
+import { managementPageURL, showingManagementURL } from "../../diagnostics/managementPages";
+import { filterURL } from "../../diagnostics/logs/DiskLoggerPage";
+import { watchShowLocalPaths, watchValueType } from "./LocalWatchViewer";
+import { filtersURL, viewMode } from "./archiveViewerShared";
+import { proxyWatcher } from "../../2-proxy/PathValueProxyWatcher";
+import { LOCAL_DOMAIN_PATH } from "../../0-path-value-core/NodePathAuthorities";
+
+const historySecondsURL = new URLParam("historySeconds", 10);
+
+export class ComponentSyncStats extends qreact.Component<{ component: ExternalRenderClass }> {
+    state = {
+        expanded: false,
+    };
+    @throttleRerender({})
+    render() {
+        const { component } = this.props;
+
+        if (!this.state.expanded) {
+            return <button onClick={() => this.state.expanded = true}>View Syncing Time Chart</button>;
+        }
+
+        let allPaths = new Set<string>();
+        for (let watcher of proxyWatcher.getAllWatchers()) {
+            let { paths, parentPaths } = watcher.lastWatches;
+            for (let path of paths) {
+                if (path.startsWith(LOCAL_DOMAIN_PATH)) continue;
+                allPaths.add(path);
+            }
+        }
+
+        let nestedPaths = new Set<string>();
+        function addNestedPaths(component: ExternalRenderClass) {
+            for (let path of component.renderWatcher.lastWatches.paths) {
+                nestedPaths.add(path);
+            }
+            for (let child of component.childComponents.values()) {
+                let childComponent = component.getInstance(child);
+                if (childComponent) {
+                    addNestedPaths(childComponent);
+                }
+            }
+        }
+        addNestedPaths(component);
+
+        let syncHistory = pathWatcher.debug_getSyncHistory();
+        syncHistory = syncHistory.filter(x => !x.path.startsWith(LOCAL_DOMAIN_PATH));
+        let endTime = addEpsilons(syncHistory.at(-1)?.end ?? Date.now(), 1);
+        let startTime = Math.max(syncHistory.at(0)?.start ?? 0, endTime - historySecondsURL.value * 1000);
+
+        let extentTime = (syncHistory.at(-1)?.end ?? 0) - (syncHistory.at(0)?.start ?? 0);
+
+        return (
+            <div className={css.pad2(6, 2).hsla(0, 0, 0, 0.2).vbox(6)}>
+                <button onClick={() => this.state.expanded = false}>Collapse</button>
+                <div className={css.hbox(20)}>
+                    <button onClick={() => this.forceUpdate()}>Refresh</button>
+                    <InputLabelURL
+                        label={`History seconds (${formatTime(extentTime)} extent)`}
+                        url={historySecondsURL}
+                    />
+                    <div>
+                        <b>All paths</b>: {syncHistory.length}
+                    </div>
+                </div>
+                <>
+                    <b>
+                        <ATag lightMode values={[
+                            filtersURL.getOverride({}),
+                            managementPageURL.getOverride("LocalWatchViewer"),
+                            watchValueType.getOverride("watch"),
+                            viewMode.getOverride("tree"),
+                            showingManagementURL.getOverride(true),
+                            watchShowLocalPaths.getOverride(false),
+                        ]}>
+                            All Paths
+                        </ATag>
+                    </b>
+                    <ComponentSyncStatsBase startTime={startTime} endTime={endTime} paths={allPaths} />
+                </>
+                <b>
+                    <ATag lightMode values={[
+                        filtersURL.getOverride({ ...filtersURL.value, [nextId()]: { column: "path", match: component.debugName, type: "and" } }),
+                        managementPageURL.getOverride("LocalWatchViewer"),
+                        watchValueType.getOverride("component"),
+                        viewMode.getOverride("tree"),
+                        showingManagementURL.getOverride(true),
+                        watchShowLocalPaths.getOverride(false),
+                    ]}>
+                        Current + NestedPaths
+                    </ATag>
+                </b>
+                <ComponentSyncStatsBase startTime={startTime} endTime={endTime} paths={nestedPaths} />
+            </div>
+        );
+    }
+}
+
+export class ComponentSyncStatsBase extends qreact.Component<{
+    startTime: number;
+    endTime: number;
+    paths: Set<string>;
+}> {
+    render() {
+        const { startTime, endTime, paths } = this.props;
+        let syncHistory = pathWatcher.debug_getSyncHistory();
+        syncHistory = syncHistory.filter(x => paths.has(x.path));
+        syncHistory = syncHistory.filter(x => !(x.end < startTime || x.start >= endTime));
+
+        return (
+            <TimeRangeView
+                ranges={syncHistory}
+                startTime={startTime}
+                endTime={endTime}
+            />
+        );
+    }
+}
+

package/src/diagnostics/misc-pages/LocalWatchViewer.tsx

@@ -0,0 +1,431 @@
+import { PathValue, ReadLock, authorityStorage, epochTime, pathValueArchives, pathWatcher } from "../../0-path-value-core/pathValueCore";
+import { PathValueProxyWatcher, doAtomicWrites, proxyWatcher } from "../../2-proxy/PathValueProxyWatcher";
+import { ExternalRenderClass, qreact } from "../../4-dom/qreact";
+import { Querysub } from "../../4-querysub/Querysub";
+import { Table } from "../../5-diagnostics/Table";
+import { appendToPathStr, getPathFromStr, getPathStr } from "../../path";
+import { css } from "typesafecss";
+import { filtersURL, formatPath, viewMode } from "./archiveViewerShared";
+import { nextId, sort } from "socket-function/src/misc";
+import { ArchiveViewerFilterUI, filterDatums } from "./archiveViewerFilter";
+import { ArchiveViewerTree } from "./ArchiveViewerTree";
+import { Button } from "../../library-components/Button";
+import { URLParam } from "../../library-components/URLParam";
+import { Anchor } from "../../library-components/ATag";
+import { ButtonSelector } from "../../library-components/ButtonSelector";
+import { throttleRerender } from "../../functional/throttleRerender";
+import { InputLabel, InputLabelURL } from "../../library-components/InputLabel";
+import { formatPercent, formatTime } from "socket-function/src/formatting/format";
+import { LOCAL_DOMAIN_PATH } from "../../0-path-value-core/NodePathAuthorities";
+import { TimeRange, TimeRangeView, getTimeRangeStats, getUniqueTimeByPath, normalizeTimeRanges } from "./TimeRangeView";
+import { ComponentSyncStatsBase } from "./ComponentSyncStats";
+import { addEpsilons } from "../../bits";
+import { pathValueSerializer } from "../../-h-path-value-serialize/PathValueSerializer";
+
+export const watchValueType = new URLParam("valueType", "watch" as "watch" | "component");
+export const watchShowLocalPaths = new URLParam("showLocalPaths", false);
+const filterToComponentsWithPath = new URLParam("filterToComponentsWithPath", "");
+const filterToPathsWithComponent = new URLParam("filterToPathsWithComponent", "");
+
+export class LocalWatchViewer extends qreact.Component {
+    // NOTE: We don't save this in the URL, because on refresh the times will be entirely different,
+    //  so old time filters are unlikely to be relevant
+    state = {
+        filterStartTime: 0,
+        filterEndTime: 0,
+    };
+    getValues(syncHistory: { path: string, start: number, end: number }[]) {
+        let watchesAdded = new Set<string>();
+        let parentPathsAdded = new Set<string>();
+        let fakePathsSet = new Set<string>();
+        let fakePaths: PathValue[] = [];
+        let time = epochTime;
+        let locks: ReadLock[] = [];
+
+        let componentToPaths = new Map<string, string[]>();
+        let pathToComponents = new Map<string, string[]>();
+        let showLocalPaths = watchShowLocalPaths.value;
+
+        let uniqueTimePerPath = getUniqueTimeByPath(syncHistory);
+
+        for (let watcher of proxyWatcher.getAllWatchers()) {
+            let { paths, parentPaths } = watcher.lastWatches;
+            for (let path of paths) {
+                if (watchesAdded.has(path)) continue;
+                if (!showLocalPaths && path.startsWith(LOCAL_DOMAIN_PATH)) continue;
+                watchesAdded.add(path);
+                if (!fakePathsSet.has(path)) {
+                    fakePathsSet.add(path);
+                    fakePaths.push({ path, value: uniqueTimePerPath.get(path) || 0, time, locks, lockCount: 0 });
+                }
+            }
+            for (let parentPath of parentPaths) {
+                if (parentPathsAdded.has(parentPath)) continue;
+                if (!showLocalPaths && parentPath.startsWith(LOCAL_DOMAIN_PATH)) continue;
+                parentPathsAdded.add(parentPath);
+                let path = appendToPathStr(parentPath, "%entries()");
+                if (!fakePathsSet.has(path)) {
+                    fakePathsSet.add(path);
+                    fakePaths.push({ path, value: uniqueTimePerPath.get(path) || 0, time, locks, lockCount: 0 });
+                }
+            }
+        }
+
+        let componentPaths: PathValue[] = [];
+        for (let component of qreact.allComponents) {
+            let path: string[] = [];
+            {
+                let cur: ExternalRenderClass | undefined = component;
+                while (cur) {
+                    path.unshift(cur.debugName);
+                    cur = cur.getParent();
+                }
+            }
+            let pathStr = getPathStr(path);
+            let watchCount = component.renderWatcher.lastWatches.paths.size;
+
+            let curPaths = Array.from(component.renderWatcher.lastWatches.paths);
+            if (!showLocalPaths) {
+                curPaths = curPaths.filter(a => !a.startsWith(LOCAL_DOMAIN_PATH));
+                if (curPaths.length === 0) continue;
+            }
+
+            componentPaths.push({ path: pathStr, value: watchCount, time, locks, lockCount: 0 });
+            componentToPaths.set(pathStr, curPaths);
+            for (let componentPath of curPaths) {
+                let components = pathToComponents.get(componentPath);
+                if (!components) {
+                    components = [];
+                    pathToComponents.set(componentPath, components);
+                }
+                components.push(pathStr);
+            }
+        }
+
+        return {
+            watches: fakePaths,
+            components: componentPaths,
+            componentToPaths,
+            pathToComponents,
+        };
+    }
+    renderTable(values: PathValue[], componentToPaths: Map<string, string[]>, pathToComponents: Map<string, string[]>, paths: Set<string>, syncHistory: { path: string, start: number, end: number }[]) {
+        let filters = filtersURL.value;
+        let timesByPath = new Map<string, TimeRange[]>();
+        for (let time of syncHistory) {
+            let path = time.path;
+            let times = timesByPath.get(path);
+            if (!times) {
+                times = [];
+                timesByPath.set(path, times);
+            }
+            times.push(time);
+        }
+        let allTimes = syncHistory.filter(x => paths.has(x.path));
+        let startTime = this.state.filterStartTime;
+        let endTime = this.state.filterEndTime;
+        //let allStats = getTimeRangeStats({ ranges: allTimes, startTime, endTime });
+        let uniqueTimes = getUniqueTimeByPath(syncHistory);
+        let totalUniqueTime = Array.from(uniqueTimes.values()).reduce((a, b) => a + b, 0);
+        return (
+            <div class={css.vbox(4).fillWidth}>
+                <Table
+                    cellClass={css.pad2(4, 1).bord(1, { h: 0, s: 0, l: 50 }).hsla(0, 0, 95, 0.25)}
+                    rows={values}
+                    columns={{
+                        canGCValue: {
+                            title: "Debug",
+                            formatter: (value, context) => {
+                                const pathValue = context?.row;
+                                if (!pathValue) return undefined;
+                                return <div>
+                                    <button onClick={() => {
+                                        console.log(authorityStorage.getValue(pathValue.path));
+                                    }}>Log Current Value</button>
+                                </div>;
+                            }
+                        },
+                        value: {
+                            title: "Debug Breakpoints",
+                            formatter: (value, context) => {
+                                let pathValue = context?.row;
+                                if (!pathValue) return undefined;
+                                let path = pathValue.path;
+                                let breakOnWrites = PathValueProxyWatcher.BREAK_ON_WRITES.has(path);
+                                let breakOnReads = PathValueProxyWatcher.BREAK_ON_READS.has(path);
+                                let logOnRead = PathValueProxyWatcher.LOG_WRITES_INCLUDES.has(path);
+                                let selectedButton = css.hsl(120, 75, 75);
+                                return (
+                                    <div class={css.hbox(10, 0).wrap}>
+                                        <button class={breakOnWrites && selectedButton || ""} onClick={() => {
+                                            if (breakOnWrites) {
+                                                PathValueProxyWatcher.BREAK_ON_WRITES.delete(path);
+                                            } else {
+                                                PathValueProxyWatcher.BREAK_ON_WRITES.add(path);
+                                            }
+                                            this.forceUpdate();
+                                        }}>
+                                            =
+                                        </button>
+                                        <button class={breakOnReads && selectedButton || ""} onClick={() => {
+                                            if (breakOnReads) {
+                                                PathValueProxyWatcher.BREAK_ON_READS.delete(path);
+                                            } else {
+                                                PathValueProxyWatcher.BREAK_ON_READS.add(path);
+                                            }
+                                            this.forceUpdate();
+                                        }}>
+                                            ===
+                                        </button>
+                                        <button class={logOnRead && selectedButton || ""} onClick={() => {
+                                            if (logOnRead) {
+                                                PathValueProxyWatcher.LOG_WRITES_INCLUDES.delete(path);
+                                            } else {
+                                                PathValueProxyWatcher.LOG_WRITES_INCLUDES.add(path);
+                                            }
+                                            this.forceUpdate();
+                                        }}>
+                                            Log
+                                        </button>
+                                    </div>
+                                );
+                            }
+                        },
+                        event: {
+                            title: "Syncing Time",
+                            formatter: (value, context) => {
+                                let pathValue = context?.row;
+                                if (!pathValue) return undefined;
+                                let paths = [pathValue.path];
+                                if (watchValueType.value === "component") {
+                                    paths = componentToPaths.get(pathValue.path) ?? [];
+                                }
+                                let time = uniqueTimes.get(pathValue.path) || 0;
+                                return <div className={css.relative.padding(0, "important")}>
+                                    <div className={
+                                        css.hsla(0, 0, 0, 0.2).absolute.pos(0, 0).fillHeight
+                                            .width(`${(time / totalUniqueTime) * 100}%`)
+                                    } />
+                                    <div className={css.relative.pad2(4, 1)}>
+                                        {formatTime(time)}
+                                    </div>
+                                </div>;
+                            }
+                        },
+                        time: (
+                            watchValueType.value === "watch" && ({
+                                title: "Components",
+                                formatter: (value, context) => {
+                                    let pathValue = context?.row;
+                                    if (!pathValue) return undefined;
+                                    let components = pathToComponents.get(pathValue.path);
+                                    return (
+                                        <Anchor values={[
+                                            { param: filtersURL, value: undefined },
+                                            { param: watchValueType, value: "component" },
+                                            { param: filterToComponentsWithPath, value: pathValue.path }]
+                                        } onClick={() => {
+                                            this.state.filterStartTime = 0;
+                                            this.state.filterEndTime = 0;
+                                        }}>
+                                            {components?.length || 0}
+                                        </Anchor>
+                                    );
+                                }
+                            })
+                            || ({
+                                title: "Paths",
+                                formatter: (value, context) => {
+                                    let pathValue = context?.row;
+                                    if (!pathValue) return undefined;
+                                    let paths = componentToPaths.get(pathValue.path);
+                                    return (
+                                        <Anchor values={[
+                                            { param: filtersURL, value: undefined },
+                                            { param: watchValueType, value: "watch" },
+                                            { param: filterToPathsWithComponent, value: pathValue.path },
+                                        ]}>
+                                            {paths?.length || 0}
+                                        </Anchor>
+                                    );
+                                }
+                            })
+                        ),
+                        source: {
+                            title: "Name",
+                            formatter: (value, context) => {
+                                let row = context?.row;
+                                if (!row) return undefined;
+                                let pathParts = getPathFromStr(row.path);
+                                let debugName = pathParts.at(-1);
+                                return (
+                                    <div>
+                                        <div className={css.hbox(10).whiteSpace("nowrap")}>
+                                            {debugName}
+
+                                            <a href={"#"} onClick={(e) => {
+                                                e.preventDefault();
+                                                e.stopPropagation();
+                                                let component = Array.from(qreact.allComponents).find(a => a.debugName === debugName);
+                                                if (component) {
+                                                    window.open(component.getVSCodeLink(), "_blank");
+                                                }
+                                            }}>
+                                                IDE
+                                            </a>
+                                        </div>
+                                    </div>
+                                );
+                            }
+                        },
+                        path: {
+                            formatter: (value) => {
+                                let pathParts = getPathFromStr(value);
+                                return (
+                                    <div>
+                                        <div class={css.hbox(0).wrap}>
+                                            {formatPath(pathParts, (part, index) => {
+                                                let newPath = getPathStr(pathParts.slice(0, index + 1));
+                                                filters[nextId()] = { column: "path", match: newPath, type: "and" };
+                                            })}
+                                        </div>
+                                    </div>
+                                );
+                            }
+                        },
+                    }}
+                />
+            </div>
+        );
+    }
+    renderTree(values: PathValue[]) {
+        return <ArchiveViewerTree
+            data={values}
+            lite
+            valueLabel={"Sync Time"}
+            sumFormatter={formatTime}
+        />;
+    }
+    @throttleRerender({})
+    render() {
+        let now = Date.now();
+        let filterStartTime = this.state.filterStartTime;
+        let filterEndTime = this.state.filterEndTime;
+
+        let syncHistory = pathWatcher.debug_getSyncHistory();
+        let paths = new Set<string>();
+        if (filterStartTime || filterEndTime) {
+            syncHistory = normalizeTimeRanges(syncHistory, filterStartTime, filterEndTime);
+            paths = new Set(syncHistory.map(a => a.path));
+        }
+
+        let filters = filtersURL.value;
+        let state = this.getValues(syncHistory);
+        let values = (
+            watchValueType.value === "watch" && state.watches
+            || watchValueType.value === "component" && state.components
+            || []
+        );
+        let filterObj = filterDatums(values, Object.values(filters));
+        if (watchValueType.value === "component" && filterToComponentsWithPath.value) {
+            let filter = filterToComponentsWithPath.value;
+            filterObj = { ...filterObj };
+            filterObj.filtered = filterObj.filtered.filter(a => state.componentToPaths.get(a.path)?.includes(filter));
+        }
+        if (watchValueType.value === "watch" && filterToPathsWithComponent.value) {
+            let filter = filterToPathsWithComponent.value;
+            filterObj = { ...filterObj };
+            filterObj.filtered = filterObj.filtered.filter(a => state.pathToComponents.get(a.path)?.includes(filter));
+        }
+
+        if (filterStartTime || filterEndTime) {
+            filterObj.filtered = filterObj.filtered.filter(a => paths.has(a.path));
+        } else {
+            let paths = new Set(filterObj.filtered.map(a => a.path));
+            if (watchValueType.value === "component") {
+                paths = new Set(filterObj.filtered.map(a => a.path).flatMap(a => state.componentToPaths.get(a) ?? []));
+            }
+            syncHistory = syncHistory.filter(x => paths.has(x.path));
+        }
+
+        let firstTime = syncHistory.at(0)?.start ?? 0;
+        let lastTime = syncHistory.at(-1)?.end ?? 0;
+
+
+        if (!filterStartTime) {
+            filterStartTime = firstTime;
+        } else {
+            firstTime = filterStartTime;
+        }
+        if (!filterEndTime) {
+            filterEndTime = addEpsilons(lastTime, 1);
+        } else {
+            lastTime = filterEndTime;
+        }
+
+        return (
+            <div class={css.vbox(4).fillWidth.pad2(10, 4)}>
+                <div class={css.hbox(10)}>
+                    <ButtonSelector<typeof watchValueType.value>
+                        value={watchValueType.value}
+                        onChange={value => watchValueType.value = value}
+                        options={[
+                            { value: "watch", title: "Watch" },
+                            { value: "component", title: "Component" },
+                        ]}
+                    />
+                    {filterToComponentsWithPath.value && <Button onClick={() => filterToComponentsWithPath.value = ""}>Clear Component Path Filter</Button>}
+                    {filterToPathsWithComponent.value && <Button onClick={() => filterToPathsWithComponent.value = ""}>Clear Path Component Filter</Button>}
+                </div>
+                <ButtonSelector<typeof viewMode.value>
+                    value={viewMode.value}
+                    onChange={value => viewMode.value = value}
+                    options={[
+                        { value: "table", title: "Table" },
+                        { value: "tree", title: "Tree" },
+                    ]}
+                />
+                <div class={css.hbox(10)}>
+                    <button onClick={() => this.forceUpdate()}>Refresh</button>
+                    <InputLabelURL label="Show Local Paths" url={watchShowLocalPaths} checkbox />
+                    <InputLabel
+                        label="History Start Offset (s)" number
+                        value={Math.round((now - filterStartTime) / 1000)}
+                        onChangeValue={value => {
+                            let duration = filterEndTime - filterStartTime;
+                            this.state.filterStartTime = Date.now() - +value * 1000;
+                            this.state.filterEndTime = this.state.filterStartTime + duration;
+                        }}
+                    />
+                    <InputLabel
+                        label="History Duration (s)" number
+                        value={Math.round((filterEndTime - filterStartTime) / 1000)}
+                        onChangeValue={value => {
+                            this.state.filterStartTime = filterStartTime;
+                            this.state.filterEndTime = filterStartTime + +value * 1000;
+                        }}
+                    />
+                    <button onClick={() => {
+                        this.state.filterStartTime = 0;
+                        this.state.filterEndTime = 0;
+                    }}>Reset Time Filter</button>
+                </div>
+                <TimeRangeView
+                    ranges={syncHistory}
+                    startTime={firstTime}
+                    endTime={lastTime}
+                    selectTimeRange={(startTime, endTime) => {
+                        console.log("selectTimeRange", startTime, endTime);
+                        this.state.filterStartTime = startTime;
+                        this.state.filterEndTime = endTime;
+                    }}
+                />
+                <ArchiveViewerFilterUI filterObj={filterObj} />
+                {
+                    viewMode.value === "table" && this.renderTable(filterObj.filtered, state.componentToPaths, state.pathToComponents, paths, syncHistory)
+                    || this.renderTree(filterObj.filtered)
+                }
+            </div>
+        );
+    }
+}