querysub 0.395.0 → 0.397.0

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

@@ -18,13 +18,18 @@ import { MachineThreadInfo } from "../../MachineThreadInfo";
 import { formatDateTime, formatTime } from "socket-function/src/formatting/format";
 import { getPathStr } from "../../../path";
 import { niceStringify } from "../../../niceStringify";
-import { createLifeCycleSearch, LifecycleInstance, limitURL, additionalSearchURL } from "./lifeCycleSearch";
+import { createLifeCycleSearch, LifecycleInstance } from "./lifeCycleSearch";
 import { getLifecycleMatchesForDatum } from "./lifeCycleMatching";
 import { managementPageURL } from "../../managementPages";
 import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
 import { formatValue } from "../../../5-diagnostics/GenericFormat";
 import { StartEllipsis } from "../../../library-components/StartEllipsis";
+import { LifeCycleEntryReadMode } from "./LifeCycleEntryReadMode";
+import { LifeCycleEntryEditor } from "./LifeCycleEntryEditor";
+import { LifeCycleRenderer, LifeCycleInstanceRenderer } from "./LifeCycleRenderer";
 export let lifecycleIdURL = new URLParam("lifecycleid", "");
+export let limitURL = new URLParam("lifecyclelimit", 100);
+export let additionalSearchURL = new URLParam("lifecyclesearch", "");
 
 export class LifeCyclePage extends qreact.Component {
     controller = LifeCyclesController(SocketFunction.browserNodeId());
@@ -39,13 +44,14 @@ export class LifeCyclePage extends qreact.Component {
         phase2Results: t.atomic<LogDatum[]>([]),
         phase2Stats: t.atomic<IndexedLogResults | undefined>(undefined),
         phase2Searching: t.boolean(false),
+        phase2HitLimit: t.boolean(false),
         lifecycleInstances: t.atomic<LifecycleInstance[]>([]),
     });
 
     search = createLifeCycleSearch(this);
 
     searchLifeCycle = (lifeCycleId: string) => {
-        return this.search.searchLifeCycle(lifeCycleId);
+        return this.search.searchLifeCycle({ lifeCycleId, additionalSearch: additionalSearchURL.value.trim(), limit: limitURL.value });
     };
 
     componentDidMount() {
@@ -96,18 +102,29 @@ export class LifeCyclePage extends qreact.Component {
                     placeholder="Additional search filter..."
                     url={additionalSearchURL}
                     fillWidth
+                    onKeyDown={(e) => {
+                        if (e.key === "Enter" && lifecycleIdURL.value) {
+                            void this.searchLifeCycle(lifecycleIdURL.value);
+                        }
+                    }}
                 />
 
                 <div className={css.hbox(12).wrap}>
                     <InputLabel
                         placeholder="Add new life cycle"
                         onChangeValue={(value) => {
-                            let title = value.trim();
-                            if (title) {
+                            value = value.trim();
+                            if (value) {
                                 let newLifeCycle: LifeCycle = {
                                     id: nextId(),
-                                    title,
-                                    entries: [],
+                                    title: value,
+                                    entries: [{
+                                        matchPattern: value,
+                                        groupByKeys: [],
+                                        isStart: true,
+                                        sourceType: "log",
+                                        variables: {},
+                                    }],
                                 };
                                 Querysub.onCommitFinished(async () => {
                                     await this.controller.setLifeCycle.promise(newLifeCycle);
@@ -129,13 +146,8 @@ export class LifeCyclePage extends qreact.Component {
                         <Button
                             hue={120}
                             onClick={() => {
-                                this.state.searchingLifeCycleId = undefined;
-                                this.state.phase1Results = [];
-                                this.state.phase1InvalidResults = [];
-                                this.state.phase1Stats = undefined;
-                                this.state.phase2Results = [];
-                                this.state.phase2Stats = undefined;
-                                this.state.lifecycleInstances = [];
+                                this.search.resetAllSearchState(undefined);
+                                lifecycleIdURL.value = "";
                             }}
                         >
                             Show All Life Cycles
@@ -225,9 +237,16 @@ export class LifeCyclePage extends qreact.Component {
                         <RenderSearchStats
                             stats={this.state.phase2Stats}
                             searching={this.state.phase2Searching}
-                            limit={limitURL.value * (this.state.searchingLifeCycleId && lifeCycles?.find(lc => lc.id === this.state.searchingLifeCycleId)?.entries.length || 1)}
+                            limit={0}
                         />
                     )}
+                    {this.state.phase2HitLimit && (
+                        <div className={css.pad2(12).bord2(30, 60, 70).hsl(30, 50, 95).vbox(4)}>
+                            <div className={css.boldStyle.colorhsl(30, 80, 40)}>
+                                ⚠ BUG: Phase 2 search hit the limit, increase the constant factor at the top of life cycle search.
+                            </div>
+                        </div>
+                    )}
                 </div>
             )}
 
@@ -253,694 +272,3 @@ export class LifeCyclePage extends qreact.Component {
         </div>;
     }
 }
-
-export class LifeCycleRenderer extends qreact.Component<{
-    lifeCycle: LifeCycle;
-    defaultEditMode?: boolean;
-    onSearch?: (lifeCycleId: string) => void;
-}> {
-    state = t.state({
-        expanded: t.atomic<boolean>(false),
-    });
-
-    controller = LifeCyclesController(SocketFunction.browserNodeId());
-
-    render() {
-        let lifeCycle = this.props.lifeCycle;
-        let isSelected = lifecycleIdURL.value === lifeCycle.id;
-        let bgClass = isSelected && css.hsl(280, 50, 90) || css.hsl(200, 30, 95);
-        let borderHue = isSelected && 280 || 200;
-
-        return <div className={css.pad2(12).bord2(borderHue, 30, 70).vbox(8) + bgClass}>
-            <div className={css.hbox(12)}>
-                <Button
-                    hue={borderHue}
-                    onClick={() => {
-                        this.state.expanded = !this.state.expanded;
-                    }}
-                >
-                    {this.state.expanded && "▼" || "▶"} {lifeCycle.title}
-                </Button>
-                <span>{lifeCycle.entries.length} entries</span>
-                {this.props.onSearch && (
-                    <Button
-                        hue={280}
-                        onClick={() => {
-                            if (this.props.onSearch) {
-                                this.props.onSearch(lifeCycle.id);
-                            }
-                        }}
-                    >
-                        Search
-                    </Button>
-                )}
-                {isSelected && (
-                    <Button
-                        hue={200}
-                        onClick={() => {
-                            lifecycleIdURL.value = "";
-                        }}
-                    >
-                        Clear Selection
-                    </Button>
-                ) || (
-                        <Button
-                            hue={280}
-                            onClick={() => {
-                                lifecycleIdURL.value = lifeCycle.id;
-                            }}
-                        >
-                            Pin
-                        </Button>
-                    )}
-                <Button
-                    hue={0}
-                    onClick={() => {
-                        if (!confirm(`Delete life cycle "${lifeCycle.title}"?`)) return;
-
-                        Querysub.onCommitFinished(async () => {
-                            await this.controller.deleteLifeCycle.promise(lifeCycle.id);
-                        });
-                    }}
-                >
-                    Delete
-                </Button>
-            </div>
-
-            {this.state.expanded && (
-                <div className={css.vbox(8)}>
-                    <InputLabel
-                        label="Title"
-                        value={lifeCycle.title}
-                        onChangeValue={(value) => {
-                            let title = value.trim();
-                            if (!title) return;
-                            let updatedLifeCycle = deepCloneJSON(lifeCycle);
-                            updatedLifeCycle.title = title;
-                            Querysub.onCommitFinished(async () => {
-                                await this.controller.setLifeCycle.promise(updatedLifeCycle);
-                            });
-                        }}
-                        className={css.width(500)}
-                    />
-
-                    <div className={css.vbox(4)}>
-                        {lifeCycle.entries.map((entry, idx) => (
-                            <LifeCycleEntryEditor
-                                key={entry.matchPattern + idx}
-                                lifeCycle={lifeCycle}
-                                entry={entry}
-                                entryIndex={idx}
-                                defaultEditMode={this.props.defaultEditMode}
-                            />
-                        ))}
-
-                        <InputLabel
-                            placeholder="Add new entry (match pattern)"
-                            onChangeValue={(value) => {
-                                let matchPattern = value.trim();
-                                if (matchPattern) {
-                                    let defaultGroupByKeys = lifeCycle.entries.length > 0 && lifeCycle.entries[0].groupByKeys && deepCloneJSON(lifeCycle.entries[0].groupByKeys) || [];
-                                    let newEntry: LifeCycleEntry = {
-                                        matchPattern,
-                                        sourceType: "info",
-                                        groupByKeys: defaultGroupByKeys,
-                                        variables: {},
-                                    };
-                                    let updatedLifeCycle = deepCloneJSON(lifeCycle);
-                                    let firstEndIndex = updatedLifeCycle.entries.findIndex(e => e.isEnd);
-                                    if (firstEndIndex !== -1) {
-                                        updatedLifeCycle.entries.splice(firstEndIndex, 0, newEntry);
-                                    } else {
-                                        updatedLifeCycle.entries.push(newEntry);
-                                    }
-                                    Querysub.onCommitFinished(async () => {
-                                        await this.controller.setLifeCycle.promise(updatedLifeCycle);
-                                    });
-                                }
-                            }}
-                            className={css.width(500)}
-                        />
-                    </div>
-                </div>
-            )}
-        </div>;
-    }
-}
-
-
-class LifeCycleInstanceRenderer extends qreact.Component<{
-    lifeCycle: LifeCycle;
-    instance: LifecycleInstance;
-}> {
-    state = t.state({
-        expanded: t.atomic<boolean>(false),
-    });
-
-    render() {
-        let { lifeCycle, instance } = this.props;
-
-        let bgClass = instance.isWarning && css.hsl(30, 60, 90) ||
-            instance.isTruncated && css.hsl(40, 50, 92) ||
-            instance.isComplete && css.hsl(120, 30, 95) ||
-            css.hsl(200, 30, 95);
-
-        let borderHue = instance.isWarning && 30 || instance.isTruncated && 40 || instance.isComplete && 120 || 200;
-
-        let firstDatum = instance.entries[0]?.datum;
-
-        let statusTitle = instance.isWarning && `⚠ ${instance.warningMessage}` ||
-            instance.isTruncated && "⚠ Truncated (ended by new start)" ||
-            instance.isComplete && "✓ Complete" ||
-            "Incomplete";
-
-        return <div
-            className={
-                css.pad2(4).bord2(borderHue, 40, 70)
-                    .vbox(8)
-                    .button.userSelect("auto", "important")
-                + " LifeCycleInstanceRenderer"
-                + bgClass
-            }
-            title={statusTitle}
-            onClick={(e) => {
-                if ((e.target as HTMLElement).closest(".LifeCycleEntryEditor")) {
-                    return;
-                }
-                this.state.expanded = !this.state.expanded;
-            }}
-        >
-            <div className={css.hbox(12, 4)}>
-                <Button
-                    hue={borderHue}
-                >
-                    {this.state.expanded && "▼" || "▶"}
-                </Button>
-                <span className={css.minWidth(200).hbox(12)}>
-                    <span className={css.colorhsl(220, 60, 50)}>
-                        {formatDateTime(instance.startTime)}
-                    </span>
-                    {instance.endTime !== undefined && (
-                        <span className={css.colorhsl(220, 60, 50)}>
-                            ({formatTime(instance.endTime - instance.startTime)})
-                        </span>
-                    )}
-                </span>
-                <span>{instance.entries.length} entries</span>
-                {firstDatum && firstDatum.__machineId && (
-                    <MachineThreadInfo
-                        machineId={firstDatum.__machineId}
-                        threadId={firstDatum.__threadId}
-                    />
-                )}
-                <div className={css.hbox(8, 4).wrap.flexFillWidth}>
-                    {instance.keys.filter(k => !["__threadId", "__machineId"].includes(k.key)).map((kv, idx, list) => (
-                        <div key={idx} className={css.hbox(4)}>
-                            <span className={css.colorhsl(200, 50, 60).boldStyle}>{kv.key}</span>
-                            <span className={css.colorhsl(0, 0, 50)} title={String(kv.value)}>
-                                <StartEllipsis maxWidth={Math.ceil(600 / list.length)}>
-                                    {niceStringify(kv.value)}
-                                </StartEllipsis>
-                            </span>
-                        </div>
-                    ))}
-                    {(() => {
-                        let uniqueVars = new Map<string, { key: string; title: string | undefined; value: unknown }>();
-                        for (let entryData of instance.entries) {
-                            let entry = lifeCycle.entries.find(e => e.matchPattern === entryData.matchPattern);
-                            if (!entry) continue;
-                            for (let [key, config] of Object.entries(entry.variables)) {
-                                let value = entryData.datum[key];
-                                if (value === undefined) continue;
-                                let uniqueId = getPathStr([key, JSON.stringify(value)]);
-                                if (!uniqueVars.has(uniqueId)) {
-                                    uniqueVars.set(uniqueId, {
-                                        key: key,
-                                        title: config?.title || undefined,
-                                        value: value,
-                                    });
-                                }
-                            }
-                        }
-                        return Array.from(uniqueVars.values()).map((varData, idx) => (
-                            <div key={idx} className={css.hbox(4)}>
-                                <span className={css.colorhsl(0, 0, 0).boldStyle}>{varData.title || varData.key}</span>
-                                <span className={css.colorhsl(0, 0, 50)} title={niceStringify(varData.value)}>{formatValue(varData.value)}</span>
-                            </div>
-                        ));
-                    })()}
-                </div>
-            </div>
-
-            {this.state.expanded && (
-                <div className={css.vbox(8)}>
-                    {instance.entries.map((entryData, idx) => {
-                        let entryIndex = lifeCycle.entries.findIndex(e => e.matchPattern === entryData.matchPattern);
-                        let entry = lifeCycle.entries[entryIndex];
-                        return <LifeCycleEntryEditor
-                            key={idx}
-                            lifeCycle={lifeCycle}
-                            entry={entry}
-                            entryIndex={entryIndex}
-                            defaultEditMode={false}
-                            datum={entryData.datum}
-                        />;
-                    })}
-                </div>
-            )}
-        </div>;
-    }
-}
-
-
-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)}
-                                />
-                                <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)}
-                                />
-                                <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>;
-    }
-}
-
-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>
-            </>;
-        };
-
-        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)}>
-                        {renderEditUI(key)}
-                        <span className={css.minWidth(150).colorhsl(0, 0, 50)}>
-                            {title || key}{title && ` (${key})` || ""}:
-                        </span>
-                        <span className={css.whiteSpace("pre-wrap")}>{value !== undefined && niceStringify(value) || "(not found)"}</span>
-                    </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)}>
-                            {renderEditUI(key)}
-                            <span className={css.minWidth(150).colorhsl(0, 0, 50)}>
-                                {key}
-                            </span>
-                            <span className={css.whiteSpace("pre-wrap")}>{value !== undefined && niceStringify(value) || "(not found)"}</span>
-                        </div>;
-                    });
-                })()}
-                <Button
-                    hue={220}
-                    onClick={() => {
-                        this.state.showAllVariables = !this.state.showAllVariables;
-                    }}
-                >
-                    {this.state.showAllVariables && "Hide Additional Variables" || "Show All Variables"}
-                </Button>
-            </div>}
-        </div>;
-    }
-}