querysub 0.433.0 → 0.436.0

package/src/5-diagnostics/qreactDebug.tsx

@@ -1,347 +1,347 @@
-import { lazy } from "socket-function/src/caching";
-import { ExternalRenderClass, __INTERNAL__QRenderClass, getSchemaPrefix, getSourceVSCodeLink, qreact, triggerRerenderAll } from "../4-dom/qreact";
-import { blue, green, magenta, yellow } from "socket-function/src/formatting/logColors";
-import { getPathFromStr, getPathStr } from "../path";
-import { delay } from "socket-function/src/batching";
-import { logErrors } from "../errors";
-import { clientWatcher } from "../1-path-client/pathValueClientWatcher";
-import { Querysub } from "../4-querysub/QuerysubController";
-import { closeAllModals, showModal } from "./Modal";
-import { FullscreenModal } from "./FullscreenModal";
-import { css } from "typesafecss";
-import { Button } from "../library-components/Button";
-import { authorityStorage } from "../0-path-value-core/pathValueCore";
-import { pathValueSerializer } from "../-h-path-value-serialize/PathValueSerializer";
-import { PathValueProxyWatcher } from "../2-proxy/PathValueProxyWatcher";
-import { InputLabel, InputLabelURL } from "../library-components/InputLabel";
-import { URLParam } from "../library-components/URLParam";
-import { hotReloadingGuard, isHotReloading, onHotReload } from "socket-function/hot/HotReloadController";
-import { isCallerDynamicModule, isDynamicModule } from "../3-path-functions/pathFunctionLoader";
-
-// Map, so hot reloading doesn't break things
-let componentButtons = new Map<string, { title: string, callback: (component: ExternalRenderClass) => void }>();
-let componentUIs = new Map<string, (component: ExternalRenderClass) => qreact.ComponentChildren>();
-
-export function addComponentButton(config: {
-    title: string;
-    callback: (component: ExternalRenderClass) => void;
-}) {
-    if (isCallerDynamicModule()) return;
-    if (!isHotReloading() && componentButtons.has(config.title)) {
-        throw new Error(`Component button with title ${config.title} already exists`);
-    }
-    componentButtons.set(config.title, config);
-}
-
-export function addComponentUI(config: {
-    key: string;
-    createUI: (component: ExternalRenderClass) => qreact.ComponentChildren;
-}) {
-    if (isCallerDynamicModule()) return;
-    if (!isHotReloading() && componentUIs.has(config.key)) {
-        throw new Error(`Component UI with key ${config.key} already exists`);
-    }
-    componentUIs.set(config.key, config.createUI);
-}
-
-export const enableDebugComponents = lazy(function enableDebugComponents() {
-    console.log(magenta(`middleclick + shift on components to debug them`));
-    // mousedown is more reliable than click, because the click will be aborted if they middle click
-    //  in something with a scrollbar.
-    document.addEventListener("mousedown", function (e) {
-        // Middle click to debug
-        if (e.button === 1 && (e.altKey || e.shiftKey)) {
-            logErrors(triggerDebug(e.target as HTMLElement, e));
-        }
-    });
-
-    async function triggerDebug(target: HTMLElement, event: MouseEvent) {
-        const component = __INTERNAL__QRenderClass.getInstanceFromDOM(target);
-        if (!component) return;
-        event.preventDefault();
-        event.stopPropagation();
-
-        let prevInject = qreact.INJECT_LINE_NUMBERS;
-        try {
-            qreact.INJECT_LINE_NUMBERS = true;
-            triggerRerenderAll();
-            await clientWatcher.waitForTriggerFinished();
-        } finally {
-            qreact.INJECT_LINE_NUMBERS = prevInject;
-        }
-        // Get new target under the mouse
-        target = document.elementFromPoint(event.clientX, event.clientY) as HTMLElement;
-
-        let source = getSourceVSCodeLink(target);
-        if (event.shiftKey) {
-            let newComponent = __INTERNAL__QRenderClass.getInstanceFromDOM(target) || component;
-            showModal({ content: <WatchModal component={newComponent} />, onClose: () => "abortClose" });
-            return;
-        }
-
-        let ancestors = component.getDebugComponentStack().slice(1).reverse();
-        let schemaPrefix = getSchemaPrefix();
-        let schemaLength = getPathFromStr(schemaPrefix).length;
-        function encodePath(pathStr: string) {
-            let path = getPathFromStr(pathStr);
-            if (pathStr.startsWith(schemaPrefix)) {
-                let underPath = path.slice(schemaLength);
-                let componentId = Number(underPath[0]);
-                let component = __INTERNAL__QRenderClass.getInstanceAllowedUndefined(componentId);
-                if (component) {
-                    path = [component.debugName].concat(underPath.slice(1));
-                }
-            }
-            //  If paths are to other components, replace the prefix with the component debugName
-            return path.map(x => green(x)).join(".");
-        }
-
-        console.log(" ");
-        console.log(" ");
-        console.log(" ");
-        if (event.altKey) {
-            window.open(source);
-        }
-        // VSCode link
-        if (source) {
-            console.log(source);
-        }
-        console.group(`Component ${blue(component.debugName)}`);
-        console.groupCollapsed(`    Ancestors (${ancestors.length})`);
-        for (let ancestor of ancestors) {
-            console.log("        " + ancestor.debugName);
-            let source = ancestor.getVSCodeLink();
-            if (source) {
-                console.log(`            ${source}`);
-            }
-        }
-        console.groupEnd();
-        let lastWatches = component.renderWatcher!.lastWatches;
-
-        let watchPaths = Array.from(lastWatches.paths).filter(x => getPathFromStr(x).length > schemaLength);
-        console.groupCollapsed(`    Watches (${watchPaths.length}):`);
-        for (let key of watchPaths) {
-            console.log("        " + encodePath(key));
-        }
-        console.groupEnd();
-
-        let parentPaths = Array.from(lastWatches.parentPaths).filter(x => getPathFromStr(x).length > schemaLength);
-        if (parentPaths.length > 0) {
-            console.groupCollapsed(`    Parent Watches (${parentPaths.length}):`);
-            for (let key of parentPaths) {
-                if (getPathFromStr(key).length <= schemaLength) continue;
-                console.log("        " + encodePath(key));
-            }
-            console.groupEnd();
-        }
-
-        console.log(`    debugHolder = `, component);
-        (globalThis as any).debugHolder = component;
-        console.log(`    debugInstance`, component.instance);
-        (globalThis as any).debugInstance = component.instance;
-
-        console.groupEnd();
-    }
-});
-
-
-const pathFilter = new URLParam("pathfilter", "");
-class WatchModal extends qreact.Component<{
-    component: ExternalRenderClass;
-}> {
-    state = {
-        parentNavigate: 0,
-        pos: "fill" as "top" | "fill" | "bottom",
-    };
-    render() {
-        let component = this.props.component;
-        for (let i = 0; i < this.state.parentNavigate; i++) {
-            component = component.getParent() || component;
-        }
-        let lastWatches = component.renderWatcher?.lastWatches || {
-            paths: new Set(),
-            parentPaths: new Set(),
-        };
-        let parent: ExternalRenderClass | undefined;
-        try {
-            parent = component.getParent();
-        } catch (e) {
-            console.log(`Failed to get parent`, e);
-        }
-        function nicerPath(path: string[]) {
-            if (path[1] === "PathFunctionRunner") {
-                path.splice(1, 1);
-            }
-            return path;
-        }
-        let pos = this.state.pos;
-        let filter = pathFilter.value.toLowerCase();
-        return (
-            <FullscreenModal
-                onlyExplicitClose
-                outerStyle={
-                    pos === "fill" && {}
-                    || pos === "top" && { height: "25vh", padding: 10 }
-                    || pos === "bottom" && { height: "25vh", padding: 10, top: undefined, bottom: 0 }
-                    || {}
-                }
-                style={
-                    {
-                        ...(
-                            pos === "fill" && {}
-                            || pos === "top" && { maxHeight: "100%" }
-                            || pos === "bottom" && { maxHeight: "100%" }
-                            || {}
-                        ),
-                        background: "rgb(255, 255, 255)!important",
-                    }
-                }
-                onCancel={() => {
-                    if (this.state.pos !== "fill") {
-                        return "abortClose";
-                    }
-                }}
-            >
-                <div class={css.hsl(0, 0, 100).hslcolor(0, 0, 10).vbox(6)}>
-                    <div class={css.hbox(10).fillWidth}>
-                        {component.debugName}
-                        {parent && <Button onClick={() => this.state.parentNavigate++}>
-                            Go to parent ({parent.debugName})
-                        </Button>}
-                        {this.state.parentNavigate > 0 && <Button onClick={() => this.state.parentNavigate--}>
-                            Child
-                        </Button>}
-                        <div class={css.marginAuto} />
-                        <Button onClick={() => this.state.pos = "top"}>
-                            Top
-                        </Button>
-                        <Button onClick={() => this.state.pos = "fill"}>
-                            Fill
-                        </Button>
-                        <Button onClick={() => this.state.pos = "bottom"}>
-                            Bottom
-                        </Button>
-                        <Button onClick={() => {
-                            closeAllModals();
-                        }}>
-                            Close
-                        </Button>
-                    </div>
-
-                    <div class={css.hbox(8)}>
-                        <Button onClick={() => component.instance.forceUpdate()}>
-                            Rerender
-                        </Button>
-                        {Array.from(componentButtons.values()).map(({ title, callback }) => (
-                            <Button onClick={() => callback(component)}>
-                                {title}
-                            </Button>
-                        ))}
-                    </div>
-                    {Array.from(componentUIs.values()).map((createUI) => createUI(component))}
-
-
-                    <InputLabelURL hot label="Filter" url={pathFilter} />
-
-                    <h4>Parent Paths ({lastWatches.parentPaths.size})</h4>
-                    <div class={css.vbox(2)}>
-                        {Array.from(lastWatches.parentPaths).map(path =>
-                            <div class={css.hbox(4).wrap.button} onClick={() => {
-                                console.log(path);
-                                return navigator.clipboard.writeText(path);
-                            }}>
-                                {nicerPath(getPathFromStr(path)).map(x => <span class={css.pad2(3, 0).hsl(0, 0, 80)}>{x}</span>)}
-
-                                <span class={css.pad2(3, 2).hsl(180, 75, 75)}>({authorityStorage.getPathsFromParent(path)?.size})</span>
-                            </div>
-                        )}
-                    </div>
-                    <h4>Paths ({lastWatches.paths.size})</h4>
-                    {/* TODO: If we render a hierarchy, we will have space where the indent is, to show buttons. */}
-                    <div class={css.vbox(2).fillWidth}>
-                        {Array.from(lastWatches.paths).map(path => {
-                            if (filter && !path.toLowerCase().includes(filter)) {
-                                return undefined;
-                            }
-                            let value = pathValueSerializer.getPathValue(authorityStorage.getValueAtTime(path));
-                            let valueStr = String(value);
-                            try {
-                                valueStr = String(JSON.stringify(value));
-                            } catch { }
-                            if (valueStr === "undefined" && typeof value === "function") {
-                                valueStr = String(value).slice(0, 100);
-                            }
-
-                            if (valueStr.length > 500) {
-                                valueStr = valueStr.slice(0, 500);
-                            }
-                            let pathArray = nicerPath(getPathFromStr(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 fncBreak = PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.has(path);
-                            let selectedButton = css.hsl(120, 75, 75);
-                            return (
-                                <div class={css.hbox(10, 0).fillWidth.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>
-                                    <button class={fncBreak && selectedButton || ""} title="Breaks on the caller of the function that mutates this. Only works on the second call (and only if the function is input predicted)." onClick={() => {
-                                        if (breakOnWrites) {
-                                            PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.delete(path);
-                                        } else {
-                                            PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.add(path);
-                                        }
-                                        this.forceUpdate();
-                                    }}>
-                                        Caller*
-                                    </button>
-                                    <div class={css.hbox(4).wrap.button} onClick={() => {
-                                        console.log(path);
-                                        return navigator.clipboard.writeText(path);
-                                    }}>
-                                        {pathArray.map((x, index) => <span class={css.pad2(3, 2).hsl(0, 0, 80)}>
-                                            {x}
-                                        </span>)}
-                                    </div>
-                                    <div class={css.pad2(3, 2).hsl(180, 75, 75).ellipsis.button} onClick={() => {
-                                        console.log(value);
-                                    }}>
-                                        {valueStr}
-                                    </div>
-                                </div>
-                            );
-                        })}
-                    </div>
-                </div>
-            </FullscreenModal>
-        );
-    }
+import { lazy } from "socket-function/src/caching";
+import { ExternalRenderClass, __INTERNAL__QRenderClass, getSchemaPrefix, getSourceVSCodeLink, qreact, triggerRerenderAll } from "../4-dom/qreact";
+import { blue, green, magenta, yellow } from "socket-function/src/formatting/logColors";
+import { getPathFromStr, getPathStr } from "../path";
+import { delay } from "socket-function/src/batching";
+import { logErrors } from "../errors";
+import { clientWatcher } from "../1-path-client/pathValueClientWatcher";
+import { Querysub } from "../4-querysub/QuerysubController";
+import { closeAllModals, showModal } from "./Modal";
+import { FullscreenModal } from "./FullscreenModal";
+import { css } from "typesafecss";
+import { Button } from "../library-components/Button";
+import { authorityStorage } from "../0-path-value-core/pathValueCore";
+import { pathValueSerializer } from "../-h-path-value-serialize/PathValueSerializer";
+import { PathValueProxyWatcher } from "../2-proxy/PathValueProxyWatcher";
+import { InputLabel, InputLabelURL } from "../library-components/InputLabel";
+import { URLParam } from "../library-components/URLParam";
+import { hotReloadingGuard, isHotReloading, onHotReload } from "socket-function/hot/HotReloadController";
+import { isCallerDynamicModule, isDynamicModule } from "../3-path-functions/pathFunctionLoader";
+
+// Map, so hot reloading doesn't break things
+let componentButtons = new Map<string, { title: string, callback: (component: ExternalRenderClass) => void }>();
+let componentUIs = new Map<string, (component: ExternalRenderClass) => qreact.ComponentChildren>();
+
+export function addComponentButton(config: {
+    title: string;
+    callback: (component: ExternalRenderClass) => void;
+}) {
+    if (isCallerDynamicModule()) return;
+    if (!isHotReloading() && componentButtons.has(config.title)) {
+        throw new Error(`Component button with title ${config.title} already exists`);
+    }
+    componentButtons.set(config.title, config);
+}
+
+export function addComponentUI(config: {
+    key: string;
+    createUI: (component: ExternalRenderClass) => qreact.ComponentChildren;
+}) {
+    if (isCallerDynamicModule()) return;
+    if (!isHotReloading() && componentUIs.has(config.key)) {
+        throw new Error(`Component UI with key ${config.key} already exists`);
+    }
+    componentUIs.set(config.key, config.createUI);
+}
+
+export const enableDebugComponents = lazy(function enableDebugComponents() {
+    console.log(magenta(`middleclick + shift on components to debug them`));
+    // mousedown is more reliable than click, because the click will be aborted if they middle click
+    //  in something with a scrollbar.
+    document.addEventListener("mousedown", function (e) {
+        // Middle click to debug
+        if (e.button === 1 && (e.altKey || e.shiftKey)) {
+            logErrors(triggerDebug(e.target as HTMLElement, e));
+        }
+    });
+
+    async function triggerDebug(target: HTMLElement, event: MouseEvent) {
+        const component = __INTERNAL__QRenderClass.getInstanceFromDOM(target);
+        if (!component) return;
+        event.preventDefault();
+        event.stopPropagation();
+
+        let prevInject = qreact.INJECT_LINE_NUMBERS;
+        try {
+            qreact.INJECT_LINE_NUMBERS = true;
+            triggerRerenderAll();
+            await clientWatcher.waitForTriggerFinished();
+        } finally {
+            qreact.INJECT_LINE_NUMBERS = prevInject;
+        }
+        // Get new target under the mouse
+        target = document.elementFromPoint(event.clientX, event.clientY) as HTMLElement;
+
+        let source = getSourceVSCodeLink(target);
+        if (event.shiftKey) {
+            let newComponent = __INTERNAL__QRenderClass.getInstanceFromDOM(target) || component;
+            showModal({ content: <WatchModal component={newComponent} />, onClose: () => "abortClose" });
+            return;
+        }
+
+        let ancestors = component.getDebugComponentStack().slice(1).reverse();
+        let schemaPrefix = getSchemaPrefix();
+        let schemaLength = getPathFromStr(schemaPrefix).length;
+        function encodePath(pathStr: string) {
+            let path = getPathFromStr(pathStr);
+            if (pathStr.startsWith(schemaPrefix)) {
+                let underPath = path.slice(schemaLength);
+                let componentId = Number(underPath[0]);
+                let component = __INTERNAL__QRenderClass.getInstanceAllowedUndefined(componentId);
+                if (component) {
+                    path = [component.debugName].concat(underPath.slice(1));
+                }
+            }
+            //  If paths are to other components, replace the prefix with the component debugName
+            return path.map(x => green(x)).join(".");
+        }
+
+        console.log(" ");
+        console.log(" ");
+        console.log(" ");
+        if (event.altKey) {
+            window.open(source);
+        }
+        // VSCode link
+        if (source) {
+            console.log(source);
+        }
+        console.group(`Component ${blue(component.debugName)}`);
+        console.groupCollapsed(`    Ancestors (${ancestors.length})`);
+        for (let ancestor of ancestors) {
+            console.log("        " + ancestor.debugName);
+            let source = ancestor.getVSCodeLink();
+            if (source) {
+                console.log(`            ${source}`);
+            }
+        }
+        console.groupEnd();
+        let lastWatches = component.renderWatcher!.lastWatches;
+
+        let watchPaths = Array.from(lastWatches.paths).filter(x => getPathFromStr(x).length > schemaLength);
+        console.groupCollapsed(`    Watches (${watchPaths.length}):`);
+        for (let key of watchPaths) {
+            console.log("        " + encodePath(key));
+        }
+        console.groupEnd();
+
+        let parentPaths = Array.from(lastWatches.parentPaths).filter(x => getPathFromStr(x).length > schemaLength);
+        if (parentPaths.length > 0) {
+            console.groupCollapsed(`    Parent Watches (${parentPaths.length}):`);
+            for (let key of parentPaths) {
+                if (getPathFromStr(key).length <= schemaLength) continue;
+                console.log("        " + encodePath(key));
+            }
+            console.groupEnd();
+        }
+
+        console.log(`    debugHolder = `, component);
+        (globalThis as any).debugHolder = component;
+        console.log(`    debugInstance`, component.instance);
+        (globalThis as any).debugInstance = component.instance;
+
+        console.groupEnd();
+    }
+});
+
+
+const pathFilter = new URLParam("pathfilter", "");
+class WatchModal extends qreact.Component<{
+    component: ExternalRenderClass;
+}> {
+    state = {
+        parentNavigate: 0,
+        pos: "fill" as "top" | "fill" | "bottom",
+    };
+    render() {
+        let component = this.props.component;
+        for (let i = 0; i < this.state.parentNavigate; i++) {
+            component = component.getParent() || component;
+        }
+        let lastWatches = component.renderWatcher?.lastWatches || {
+            paths: new Set(),
+            parentPaths: new Set(),
+        };
+        let parent: ExternalRenderClass | undefined;
+        try {
+            parent = component.getParent();
+        } catch (e) {
+            console.log(`Failed to get parent`, e);
+        }
+        function nicerPath(path: string[]) {
+            if (path[1] === "PathFunctionRunner") {
+                path.splice(1, 1);
+            }
+            return path;
+        }
+        let pos = this.state.pos;
+        let filter = pathFilter.value.toLowerCase();
+        return (
+            <FullscreenModal
+                onlyExplicitClose
+                outerStyle={
+                    pos === "fill" && {}
+                    || pos === "top" && { height: "25vh", padding: 10 }
+                    || pos === "bottom" && { height: "25vh", padding: 10, top: undefined, bottom: 0 }
+                    || {}
+                }
+                style={
+                    {
+                        ...(
+                            pos === "fill" && {}
+                            || pos === "top" && { maxHeight: "100%" }
+                            || pos === "bottom" && { maxHeight: "100%" }
+                            || {}
+                        ),
+                        background: "rgb(255, 255, 255)!important",
+                    }
+                }
+                onCancel={() => {
+                    if (this.state.pos !== "fill") {
+                        return "abortClose";
+                    }
+                }}
+            >
+                <div class={css.hsl(0, 0, 100).hslcolor(0, 0, 10).vbox(6)}>
+                    <div class={css.hbox(10).fillWidth}>
+                        {component.debugName}
+                        {parent && <Button onClick={() => this.state.parentNavigate++}>
+                            Go to parent ({parent.debugName})
+                        </Button>}
+                        {this.state.parentNavigate > 0 && <Button onClick={() => this.state.parentNavigate--}>
+                            Child
+                        </Button>}
+                        <div class={css.marginAuto} />
+                        <Button onClick={() => this.state.pos = "top"}>
+                            Top
+                        </Button>
+                        <Button onClick={() => this.state.pos = "fill"}>
+                            Fill
+                        </Button>
+                        <Button onClick={() => this.state.pos = "bottom"}>
+                            Bottom
+                        </Button>
+                        <Button onClick={() => {
+                            closeAllModals();
+                        }}>
+                            Close
+                        </Button>
+                    </div>
+
+                    <div class={css.hbox(8)}>
+                        <Button onClick={() => component.instance.forceUpdate()}>
+                            Rerender
+                        </Button>
+                        {Array.from(componentButtons.values()).map(({ title, callback }) => (
+                            <Button onClick={() => callback(component)}>
+                                {title}
+                            </Button>
+                        ))}
+                    </div>
+                    {Array.from(componentUIs.values()).map((createUI) => createUI(component))}
+
+
+                    <InputLabelURL hot label="Filter" url={pathFilter} />
+
+                    <h4>Parent Paths ({lastWatches.parentPaths.size})</h4>
+                    <div class={css.vbox(2)}>
+                        {Array.from(lastWatches.parentPaths).map(path =>
+                            <div class={css.hbox(4).wrap.button} onClick={() => {
+                                console.log(path);
+                                return navigator.clipboard.writeText(path);
+                            }}>
+                                {nicerPath(getPathFromStr(path)).map(x => <span class={css.pad2(3, 0).hsl(0, 0, 80)}>{x}</span>)}
+
+                                <span class={css.pad2(3, 2).hsl(180, 75, 75)}>({authorityStorage.getPathsFromParent(path)?.size})</span>
+                            </div>
+                        )}
+                    </div>
+                    <h4>Paths ({lastWatches.paths.size})</h4>
+                    {/* TODO: If we render a hierarchy, we will have space where the indent is, to show buttons. */}
+                    <div class={css.vbox(2).fillWidth}>
+                        {Array.from(lastWatches.paths).map(path => {
+                            if (filter && !path.toLowerCase().includes(filter)) {
+                                return undefined;
+                            }
+                            let value = pathValueSerializer.getPathValue(authorityStorage.getValueAtTime(path));
+                            let valueStr = String(value);
+                            try {
+                                valueStr = String(JSON.stringify(value));
+                            } catch { }
+                            if (valueStr === "undefined" && typeof value === "function") {
+                                valueStr = String(value).slice(0, 100);
+                            }
+
+                            if (valueStr.length > 500) {
+                                valueStr = valueStr.slice(0, 500);
+                            }
+                            let pathArray = nicerPath(getPathFromStr(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 fncBreak = PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.has(path);
+                            let selectedButton = css.hsl(120, 75, 75);
+                            return (
+                                <div class={css.hbox(10, 0).fillWidth.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>
+                                    <button class={fncBreak && selectedButton || ""} title="Breaks on the caller of the function that mutates this. Only works on the second call (and only if the function is input predicted)." onClick={() => {
+                                        if (breakOnWrites) {
+                                            PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.delete(path);
+                                        } else {
+                                            PathValueProxyWatcher.SET_FUNCTION_WATCH_ON_WRITES.add(path);
+                                        }
+                                        this.forceUpdate();
+                                    }}>
+                                        Caller*
+                                    </button>
+                                    <div class={css.hbox(4).wrap.button} onClick={() => {
+                                        console.log(path);
+                                        return navigator.clipboard.writeText(path);
+                                    }}>
+                                        {pathArray.map((x, index) => <span class={css.pad2(3, 2).hsl(0, 0, 80)}>
+                                            {x}
+                                        </span>)}
+                                    </div>
+                                    <div class={css.pad2(3, 2).hsl(180, 75, 75).ellipsis.button} onClick={() => {
+                                        console.log(value);
+                                    }}>
+                                        {valueStr}
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                </div>
+            </FullscreenModal>
+        );
+    }
 }