querysub 0.395.0 → 0.396.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "querysub",
-  "version": "0.395.0",
+  "version": "0.396.0",
   "main": "index.js",
   "license": "MIT",
   "note1": "note on node-forge fork, see https://github.com/digitalbazaar/forge/issues/744 for details",

package/src/-c-identity/IdentityController.ts

@@ -17,6 +17,7 @@ import { delay } from "socket-function/src/batching";
 import { formatTime } from "socket-function/src/formatting/format";
 import { waitForFirstTimeSync } from "socket-function/time/trueTimeShim";
 import { red } from "socket-function/src/formatting/logColors";
+import { isNode } from "typesafecss";
 
 let callerInfo = new Map<CallerContext, {
     reconnectNodeId: string | undefined;
@@ -108,6 +109,7 @@ export interface ChangeIdentityPayload {
     certIssuer: string;
     serverId: string;
     mountedPort: number | undefined;
+    debugEntryPoint: string | undefined;
 }
 class IdentityControllerBase {
     // IMPORTANT! We HAVE to call changeIdentity NOT JUST because we can't use peer certificates in the browser, BUT, also
@@ -158,7 +160,22 @@ class IdentityControllerBase {
             pubKeyShort: getShortNumber(pubKey),
         });
 
-        console.log(`Authenticated identity for ${caller.nodeId} to ${reconnectNodeId || caller.nodeId} in ${formatTime(Date.now() - time)}, at ${Date.now()}`);
+        let duration = Date.now() - time;
+        console.log(`Authenticated identity for ${caller.nodeId} in ${formatTime(duration)}, at ${Date.now()}`, {
+            clientId: caller.nodeId,
+            reconnectNodeId,
+            duration,
+            mountedPort: payload.mountedPort,
+            debugEntryPoint: payload.debugEntryPoint,
+        });
+
+        SocketFunction.onNextDisconnect(caller.nodeId, () => {
+            // NOTE: I don't really see any purpose of deleting from caller info. I don't think we're going to run out of memory because of too many callers authenticating. 
+            // However, logging here is useful as it allows us to complete the life cycle so we know how long a client was connected for.
+            console.log(`Disconnected client`, {
+                clientId: caller.nodeId,
+            });
+        });
     }
 }
 
@@ -188,6 +205,7 @@ const changeIdentityOnce = cacheWeak(async function changeIdentityOnce(connectio
         cert: threadKeyCert.cert.toString(),
         certIssuer: issuer.cert.toString(),
         mountedPort: getNodeIdLocation(SocketFunction.mountedNodeId)?.port,
+        debugEntryPoint: isNode() ? process.argv[1] : "browser",
     };
     let signature = sign(threadKeyCert, payload);
     await timeoutToError(

package/src/0-path-value-core/pathValueCore.ts

@@ -1249,14 +1249,14 @@ class PathWatcher {
         if (newPathsWatched.size > 0 || newParentsWatched.size > 0) {
             if (isOwnNodeId(config.callback)) {
                 for (let path of newPathsWatched) {
-                    auditLog("new local WATCH", { path });
+                    auditLog("new local WATCH VALUE", { path });
                 }
                 for (let path of newParentsWatched) {
                     auditLog("new local WATCH PARENT", { path });
                 }
             } else {
                 for (let path of newPathsWatched) {
-                    auditLog("new non-local WATCH", { path, watcher: config.callback });
+                    auditLog("new non-local WATCH VALUE", { path, watcher: config.callback });
                 }
                 for (let path of newParentsWatched) {
                     auditLog("new non-local WATCH PARENT", { path, watcher: config.callback });
@@ -1381,9 +1381,9 @@ class PathWatcher {
             watchers.watchers.delete(callback);
 
             if (isOwnNodeId(callback)) {
-                auditLog("local UNWATCH", { path });
+                auditLog("local UNWATCH VALUE", { path });
             } else {
-                auditLog("non-local UNWATCH", { path, watcher: callback });
+                auditLog("non-local UNWATCH VALUE", { path, watcher: callback });
             }
 
             if (watchers.watchers.size === 0) {
@@ -1781,9 +1781,9 @@ class WriteValidStorage {
     }
     public setWriteValidState(write: WriteState, lockless?: boolean): boolean {
         if (write.isValid) {
-            auditLog(write.reason || "ACCEPTING VALUE", { path: write.path, time: write.time.time });
+            auditLog("ACCEPTING VALUE", { path: write.path, time: write.time.time, reason: write.reason });
         } else {
-            auditLog(write.reason || "REJECTING VALUE", { path: write.path, time: write.time.time });
+            auditLog("REJECTING VALUE", { path: write.path, time: write.time.time, reason: write.reason });
         }
         this.ensureGarbageCollectOldState();
 
@@ -2359,8 +2359,8 @@ export const lockWatchDeduper = new LockWatchDeduper();
 //  can trigger the import of memoryValueAudit for all clients as consistently
 //  as the core.
 setImmediate(() => {
-    logErrors(import("../5-diagnostics/memoryValueAudit").then(x => x.startMemoryAuditLoop()));
-    logErrors(import("../5-diagnostics/diskValueAudit").then(x => x.startDiskAuditLoop()));
+    //logErrors(import("../5-diagnostics/memoryValueAudit").then(x => x.startMemoryAuditLoop()));
+    //logErrors(import("../5-diagnostics/diskValueAudit").then(x => x.startDiskAuditLoop()));
     logErrors(import("../5-diagnostics/synchronousLagTracking").then(x => x.trackSynchronousLag()));
 });
 

package/src/diagnostics/logs/IndexedLogs/LogViewer3.tsx

@@ -30,13 +30,12 @@ import { readProductionLogsURL, searchTextURL } from "./LogViewerParams";
 import { RenderSearchStats } from "./RenderSearchStats";
 import { LifeCyclesController, LifeCycle, LifeCycleEntry } from "../lifeCycleAnalysis/lifeCycles";
 import { getLifecycleMatchesForDatum } from "../lifeCycleAnalysis/lifeCycleMatching";
-import { lifecycleIdURL } from "../lifeCycleAnalysis/LifeCyclePage";
+import { lifecycleIdURL, additionalSearchURL } from "../lifeCycleAnalysis/LifeCyclePage";
 import { ATag } from "../../../library-components/ATag";
 import { SocketFunction } from "socket-function/SocketFunction";
 import { managementPageURL } from "../../managementPages";
 import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
 import { formatSearchString } from "./LogViewerParams";
-import { additionalSearchURL } from "../lifeCycleAnalysis/lifeCycleSearch";
 
 let excludePendingResults = new URLParam("excludePendingResults", false);
 let limitURL = new URLParam("limit", 100);
@@ -564,7 +563,7 @@ export class LogViewer3 extends qreact.Component {
                                         startTimeParam.getOverride(datum.time - timeInHour),
                                         endTimeParam.getOverride(datum.time + timeInHour),
                                     ]}>
-                                        {match.lifecycle.title}
+                                        View {JSON.stringify(match.lifecycle.title)}
                                     </ATag>
                                 </div>
                             ))}
@@ -576,7 +575,7 @@ export class LogViewer3 extends qreact.Component {
                                 endTimeParam.getOverride(maxTime + timeInHour),
                             ]}>
                                 <Button hue={280} className={css.boldStyle}>
-                                    View All {lifecycleTitle}
+                                    View All
                                 </Button>
                             </ATag>
                         </div>;

package/src/diagnostics/logs/IndexedLogs/bufferSearchFindMatcher.ts

@@ -9,6 +9,7 @@ const SEARCH_OR_CHAR = "|";
 const SEARCH_AND_BYTE = 38;
 const SEARCH_AND_CHAR = "&";
 
+// IMPORTANT! While technically THIS structure can support negation, the index structure above us cannot, as it only stores information at the block level (multiple buffers per block). So... if we supported negation, it couldn't, so it would give us a lot of false positives (cases where negation removes the results). So... never use negation, just turn everything into a positive signal.
 export type MatchStructure = {
     type: "or";
     parts: MatchStructure[];

package/src/diagnostics/logs/lifeCycleAnalysis/LifeCycleEntryEditor.tsx

@@ -0,0 +1,358 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { deepCloneJSON } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { t } from "../../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { Button } from "../../../library-components/Button";
+import { InputLabel } from "../../../library-components/InputLabel";
+import { LogDatum } from "../diskLogger";
+import { LifeCycleEntryReadMode } from "./LifeCycleEntryReadMode";
+import { LifeCycle, LifeCycleEntry, LifeCyclesController } from "./lifeCycles";
+
+export class LifeCycleEntryEditor extends qreact.Component<{
+    lifeCycle: LifeCycle;
+    entry: LifeCycleEntry;
+    entryIndex: number;
+    defaultEditMode?: boolean;
+    datum?: LogDatum;
+}> {
+    state = t.state({
+        editMode: t.atomic<boolean>(false),
+    });
+
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+
+    componentDidMount() {
+        this.state.editMode = this.props.defaultEditMode || false;
+    }
+
+    render() {
+        let { lifeCycle, entry, entryIndex } = this.props;
+        let isConfigured = entry.groupByKeys && entry.groupByKeys.length > 0 && entry.groupByKeys.every(k => k.ourKey.trim() !== "");
+        let bgClass = isConfigured && css.hsl(150, 30, 95) || css.hsl(30, 50, 90);
+
+        return <div className={
+            css.pad2(4).bord2(150, 30, 70)
+                .vbox(4)
+                .cursor("auto")
+            + bgClass
+            + " LifeCycleEntryEditor"
+        }>
+            <div className={css.hbox(12)}>
+                <span className={css.boldStyle}>{entry.description || entry.matchPattern}</span>
+                {entry.description && <span className={css.colorhsl(0, 0, 50)}>({entry.matchPattern})</span>}
+                <span className={css.colorhsl(220, 70, 50)}>[{entry.sourceType}]</span>
+                {entry.isStart && <span className={css.colorhsl(120, 80, 30).boldStyle}>START</span>}
+                {entry.isEnd && <span className={css.colorhsl(0, 80, 30).boldStyle}>END</span>}
+                {!isConfigured && !this.state.editMode && <span className={css.colorhsl(30, 80, 40).boldStyle}>(not fully configured)</span>}
+                <Button
+                    hue={150}
+                    onClick={() => {
+                        this.state.editMode = !this.state.editMode;
+                    }}
+                >
+                    {this.state.editMode && "Read Mode" || "Edit Mode"}
+                </Button>
+                <Button
+                    hue={0}
+                    onClick={() => {
+                        if (!confirm("Delete this entry?")) return;
+
+                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                        updatedLifeCycle.entries.splice(entryIndex, 1);
+                        Querysub.onCommitFinished(async () => {
+                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                        });
+                    }}
+                >
+                    Delete
+                </Button>
+            </div>
+
+            {this.state.editMode && (
+                <div className={css.vbox(12)}>
+                    <div className={css.hbox(10)}>
+                        <InputLabel
+                            label="Match Pattern"
+                            value={entry.matchPattern}
+                            onChangeValue={(value) => {
+                                let matchPattern = value.trim();
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].matchPattern = matchPattern;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                            className={css.width(500)}
+                        />
+                        <InputLabel
+                            label="Description"
+                            value={entry.description || ""}
+                            onChangeValue={(value) => {
+                                let description = value.trim() || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].description = description;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                            className={css.width(500)}
+                        />
+                    </div>
+
+                    <div className={css.hbox(12)}>
+                        <div className={css.vbox(4)}>
+                            <span>Source Type</span>
+                            <select
+                                value={entry.sourceType}
+                                onChange={(e) => {
+                                    let sourceType = e.currentTarget.value as "log" | "error" | "info" | "warning";
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].sourceType = sourceType;
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }}
+                                className={css.pad2(4, 2)}
+                            >
+                                <option value="log">log</option>
+                                <option value="info">info</option>
+                                <option value="warning">warning</option>
+                                <option value="error">error</option>
+                            </select>
+                        </div>
+                    </div>
+
+                    <div className={css.hbox(12)}>
+                        <InputLabel
+                            label="Is Start"
+                            checkbox
+                            checked={entry.isStart}
+                            onChange={(e) => {
+                                let isStart = e.currentTarget.checked || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].isStart = isStart;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                        />
+                        <InputLabel
+                            label="Is End"
+                            checkbox
+                            checked={entry.isEnd}
+                            onChange={(e) => {
+                                let isEnd = e.currentTarget.checked || undefined;
+                                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                updatedLifeCycle.entries[entryIndex].isEnd = isEnd;
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                });
+                            }}
+                        />
+                    </div>
+
+                    <div className={css.vbox(8)}>
+                        <div className={!isConfigured && css.colorhsl(30, 80, 40).boldStyle || ""}>
+                            Group By Keys{!isConfigured && " (at least one required)" || ""}
+                        </div>
+                        {Array.isArray(entry.groupByKeys) && entry.groupByKeys.map((keyConfig, keyIdx) => {
+                            let keyExistsInAllOtherEntries = lifeCycle.entries.every((e, idx) => {
+                                if (idx === entryIndex) return true;
+                                return e.groupByKeys && e.groupByKeys.some(k => k.ourKey === keyConfig.ourKey);
+                            });
+
+                            return <div key={keyIdx} className={css.hbox(8).pad2(4).bord2(200, 30, 80).hsl(200, 30, 97)}>
+                                <Button
+                                    hue={160}
+                                    disabled={keyExistsInAllOtherEntries}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e, idx) => {
+                                            if (idx === entryIndex) return;
+                                            if (!e.groupByKeys.some(k => k.ourKey === keyConfig.ourKey)) {
+                                                e.groupByKeys.push({ ourKey: keyConfig.ourKey });
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Copy to All
+                                </Button>
+                                <InputLabel
+                                    label="Key"
+                                    value={keyConfig.ourKey}
+                                    onChangeValue={(value) => {
+                                        let ourKey = value.trim();
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys[keyIdx].ourKey = ourKey;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <InputLabel
+                                    label="Different key in start entry (not usually needed)"
+                                    value={keyConfig.startKey || ""}
+                                    onChangeValue={(value) => {
+                                        let startKey = value.trim() || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys[keyIdx].startKey = startKey;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <InputLabel
+                                    label="Aliases (comma-separated)"
+                                    value={keyConfig.aliases && keyConfig.aliases.join(", ") || ""}
+                                    onChangeValue={(value) => {
+                                        let aliases = value.trim() && value.split(",").map(a => a.trim()).filter(a => a) || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e) => {
+                                            let matchingKey = e.groupByKeys.find(k => k.ourKey === keyConfig.ourKey);
+                                            if (matchingKey) {
+                                                matchingKey.aliases = aliases;
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(250)}
+                                />
+                                <Button
+                                    hue={0}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].groupByKeys.splice(keyIdx, 1);
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Delete
+                                </Button>
+                            </div>;
+                        })}
+                        <InputLabel
+                            label="Add new key"
+                            onChangeValue={(value) => {
+                                let ourKey = value.trim();
+                                if (ourKey) {
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].groupByKeys.push({ ourKey });
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }
+                            }}
+                            className={css.width(250)}
+                        />
+                    </div>
+
+                    <div className={css.vbox(4)}>
+                        {Object.entries(entry.variables).map(([key, varData]) => {
+                            let keyExistsInAllOtherEntries = lifeCycle.entries.every((e, idx) => {
+                                if (idx === entryIndex) return true;
+                                return key in e.variables;
+                            });
+
+                            return <div key={key} className={css.hbox(8).pad2(4).bord2(0, 0, 80).hsl(0, 0, 97)}>
+                                <Button
+                                    hue={160}
+                                    disabled={keyExistsInAllOtherEntries}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e, idx) => {
+                                            if (idx === entryIndex) return;
+                                            if (!(key in e.variables)) {
+                                                e.variables[key] = {};
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Copy to All
+                                </Button>
+                                <span className={css.minWidth(150).boldStyle}>{key}</span>
+                                <InputLabel
+                                    placeholder="Variable title"
+                                    value={varData.title || ""}
+                                    onChangeValue={(value) => {
+                                        let title = value.trim() || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries[entryIndex].variables[key].title = title;
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(300)}
+                                />
+                                <InputLabel
+                                    placeholder="Aliases (comma-separated)"
+                                    value={varData.aliases && varData.aliases.join(", ") || ""}
+                                    onChangeValue={(value) => {
+                                        let aliases = value.trim() && value.split(",").map(a => a.trim()).filter(a => a) || undefined;
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        updatedLifeCycle.entries.forEach((e) => {
+                                            if (key in e.variables) {
+                                                e.variables[key].aliases = aliases;
+                                            }
+                                        });
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                    className={css.width(300)}
+                                />
+                                <Button
+                                    hue={0}
+                                    onClick={() => {
+                                        let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                        delete updatedLifeCycle.entries[entryIndex].variables[key];
+                                        Querysub.onCommitFinished(async () => {
+                                            await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                        });
+                                    }}
+                                >
+                                    Delete
+                                </Button>
+                            </div>;
+                        })}
+
+                        <InputLabel
+                            label="Add new variable key"
+                            onChangeValue={(value) => {
+                                let key = value.trim();
+                                if (key) {
+                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                                    updatedLifeCycle.entries[entryIndex].variables[key] = {};
+                                    Querysub.onCommitFinished(async () => {
+                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                                    });
+                                }
+                            }}
+                            className={css.width(300)}
+                        />
+                    </div>
+                </div>
+            )}
+
+            {!this.state.editMode && <LifeCycleEntryReadMode
+                lifeCycle={lifeCycle}
+                entry={entry}
+                entryIndex={entryIndex}
+                datum={this.props.datum}
+            />}
+        </div>;
+    }
+}
+

package/src/diagnostics/logs/lifeCycleAnalysis/LifeCycleEntryReadMode.tsx

@@ -0,0 +1,149 @@
+import { SocketFunction } from "socket-function/SocketFunction";
+import { deepCloneJSON } from "socket-function/src/misc";
+import { css } from "typesafecss";
+import { t } from "../../../2-proxy/schema2";
+import { qreact } from "../../../4-dom/qreact";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { Button } from "../../../library-components/Button";
+import { niceStringify } from "../../../niceStringify";
+import { LogDatum } from "../diskLogger";
+import { LifeCycle, LifeCycleEntry, LifeCyclesController, getVariables } from "./lifeCycles";
+import { NestedLifeCycleInfo } from "./NestedLifeCycleInfo";
+
+export class LifeCycleEntryReadMode extends qreact.Component<{
+    lifeCycle: LifeCycle;
+    entry: LifeCycleEntry;
+    entryIndex: number;
+    datum: LogDatum | undefined;
+}> {
+    state = t.state({
+        showAllVariables: t.atomic<boolean>(false),
+    });
+
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+
+    render() {
+        let { lifeCycle, entry, entryIndex } = this.props;
+        const datum = this.props.datum;
+
+        let variables = getVariables(entry);
+
+        let renderEditUI = (key: string) => {
+            let updateLifeCycle = (fnc: (updatedLifeCycle: LifeCycle) => void) => {
+                let updatedLifeCycle = deepCloneJSON(lifeCycle);
+                fnc(updatedLifeCycle);
+                Querysub.onCommitFinished(async () => {
+                    await this.controller.setLifeCycle.promise(updatedLifeCycle);
+                });
+            };
+
+            let isVariable = key in entry.variables;
+            let isGroupByKey = Array.isArray(entry.groupByKeys) && entry.groupByKeys.some(k => k.ourKey === key);
+
+            return <>
+                <span
+                    className={css.button.pad2(4).bord2(0, 0, 60).hsl(220, 50, 60) + (!isGroupByKey && css.opacity(0.4))}
+                    onClick={() => {
+                        updateLifeCycle((updated) => {
+                            if (isGroupByKey) {
+                                updated.entries.forEach((e) => {
+                                    e.groupByKeys = e.groupByKeys.filter(k => k.ourKey !== key);
+                                });
+                            } else {
+                                updated.entries.forEach((e) => {
+                                    if (!e.groupByKeys.some(k => k.ourKey === key)) {
+                                        e.groupByKeys.push({ ourKey: key });
+                                    }
+                                });
+                            }
+                        });
+                    }}
+                    title={isGroupByKey && "Remove group by key from all entries" || "Add group by key to all entries"}
+                >
+                    🔑
+                </span>
+                <span
+                    className={css.button.pad2(4).bord2(0, 0, 60).hsl(120, 50, 60) + (!isVariable && css.opacity(0.4))}
+                    onClick={() => {
+                        updateLifeCycle((updated) => {
+                            if (isVariable) {
+                                updated.entries.forEach((e) => {
+                                    delete e.variables[key];
+                                });
+                            } else {
+                                updated.entries.forEach((e) => {
+                                    if (!(key in e.variables)) {
+                                        e.variables[key] = {};
+                                    }
+                                });
+                            }
+                        });
+                    }}
+                    title={isVariable && "Remove variable from all entries" || "Add variable to all entries"}
+                >
+                    📌
+                </span>
+            </>;
+        };
+
+        let renderNestedInfo = (key: string, value: unknown) => {
+            if (value === undefined) return null;
+
+            let isGroupByKey = Array.isArray(entry.groupByKeys) && entry.groupByKeys.some(k => k.ourKey === key);
+            let aliases = isGroupByKey && entry.groupByKeys.find(k => k.ourKey === key)?.aliases || entry.variables[key]?.aliases || [];
+
+            return <NestedLifeCycleInfo
+                keyName={key}
+                value={value}
+                aliases={aliases}
+                currentLifeCycleId={lifeCycle.id}
+            />;
+        };
+
+        return <div className={css.vbox(8)}>
+            {Array.isArray(entry.groupByKeys) && entry.groupByKeys.some(k => k.startKey) && (
+                <div className={css.vbox(2)}>
+                    {entry.groupByKeys.filter(k => k.startKey).map((k, idx) => (
+                        <div key={idx}>{k.ourKey} start override: {k.startKey}</div>
+                    ))}
+                </div>
+            )}
+            {datum && <div className={css.vbox(4)}>
+                {variables.map(({ key, title }) => {
+                    let value = datum[key];
+                    return <div key={key} className={css.hbox(8).wrap}>
+                        {renderEditUI(key)}
+                        <span className={css.minWidth(150).colorhsl(0, 0, 50)}>
+                            {title || key}{title && ` (${key})` || ""}:
+                        </span>
+                        <span className={css.whiteSpace("pre-wrap")}>{niceStringify(value)}</span>
+                        {renderNestedInfo(key, value)}
+                    </div>;
+                })}
+                {this.state.showAllVariables && (() => {
+                    let configuredKeys = new Set(getVariables(entry).map(v => v.key));
+                    let allKeys = Object.keys(datum).filter(key => !configuredKeys.has(key));
+                    return allKeys.map((key) => {
+                        let value = datum[key];
+                        return <div key={key} className={css.hbox(8).wrap}>
+                            {renderEditUI(key)}
+                            <span className={css.minWidth(150).colorhsl(0, 0, 50)}>
+                                {key}
+                            </span>
+                            <span className={css.whiteSpace("pre-wrap")}>{niceStringify(value)}</span>
+                            {renderNestedInfo(key, value)}
+                        </div>;
+                    });
+                })()}
+                <Button
+                    hue={220}
+                    onClick={() => {
+                        this.state.showAllVariables = !this.state.showAllVariables;
+                    }}
+                >
+                    {this.state.showAllVariables && "Hide Additional Variables" || "Show All Variables"}
+                </Button>
+            </div>}
+        </div>;
+    }
+}