querysub 0.394.0 → 0.395.0

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

@@ -0,0 +1,946 @@
+import { qreact } from "../../../4-dom/qreact";
+import { t } from "../../../2-proxy/schema2";
+import { css } from "typesafecss";
+import { deepCloneJSON, nextId } from "socket-function/src/misc";
+import { Querysub } from "../../../4-querysub/QuerysubController";
+import { InputLabel } from "../../../library-components/InputLabel";
+import { Button } from "../../../library-components/Button";
+import { LifeCycle, LifeCycleEntry, LifeCyclesController, getVariables } from "./lifeCycles";
+import { SocketFunction } from "socket-function/SocketFunction";
+import { LogDatum } from "../diskLogger";
+import { TimeRangeSelector } from "../TimeRangeSelector";
+import { URLParam } from "../../../library-components/URLParam";
+import { InputLabelURL } from "../../../library-components/InputLabel";
+import { RenderSearchStats } from "../IndexedLogs/RenderSearchStats";
+import { IndexedLogResults } from "../IndexedLogs/BufferIndexHelpers";
+import { ellipsisMiddle, ellipsisStart, matchFilter } from "../../../misc";
+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 { getLifecycleMatchesForDatum } from "./lifeCycleMatching";
+import { managementPageURL } from "../../managementPages";
+import { startTimeParam, endTimeParam } from "../TimeRangeSelector";
+import { formatValue } from "../../../5-diagnostics/GenericFormat";
+import { StartEllipsis } from "../../../library-components/StartEllipsis";
+export let lifecycleIdURL = new URLParam("lifecycleid", "");
+
+export class LifeCyclePage extends qreact.Component {
+    controller = LifeCyclesController(SocketFunction.browserNodeId());
+
+    state = t.state({
+        filterText: t.string(""),
+        searchingLifeCycleId: t.atomic<string | undefined>(undefined),
+        phase1Results: t.atomic<LogDatum[]>([]),
+        phase1InvalidResults: t.atomic<Array<{ datum: LogDatum; missingKeys: string[] }>>([]),
+        phase1Stats: t.atomic<IndexedLogResults | undefined>(undefined),
+        phase1Searching: t.boolean(false),
+        phase2Results: t.atomic<LogDatum[]>([]),
+        phase2Stats: t.atomic<IndexedLogResults | undefined>(undefined),
+        phase2Searching: t.boolean(false),
+        lifecycleInstances: t.atomic<LifecycleInstance[]>([]),
+    });
+
+    search = createLifeCycleSearch(this);
+
+    searchLifeCycle = (lifeCycleId: string) => {
+        return this.search.searchLifeCycle(lifeCycleId);
+    };
+
+    componentDidMount() {
+        if (lifecycleIdURL.value) {
+            void this.searchLifeCycle(lifecycleIdURL.value);
+        }
+    }
+
+    render() {
+        let lifeCycles = this.controller.getLifeCycles();
+        if (!lifeCycles) {
+            return <div className={css.vbox(16).pad2(16)}>
+                <div>Loading...</div>
+            </div>;
+        }
+        let sortedLifeCycles = deepCloneJSON(lifeCycles);
+
+        let filteredLifeCycles = sortedLifeCycles.filter(x =>
+            matchFilter({ value: this.state.filterText }, JSON.stringify(x))
+        );
+
+        if (lifecycleIdURL.value) {
+            filteredLifeCycles = filteredLifeCycles.filter(lc => lc.id === lifecycleIdURL.value);
+        }
+
+        if (this.state.searchingLifeCycleId) {
+            filteredLifeCycles = filteredLifeCycles.filter(lc => lc.id === this.state.searchingLifeCycleId);
+        }
+
+        return <div className={css.vbox(16).pad2(16).fillWidth}>
+            <style>{`
+                .LifeCycleInstanceRenderer:has(.LifeCycleEntryEditor:hover) {
+                    filter: brightness(1.0) !important;
+                }
+            `}</style>
+            <div className={css.vbox(8).fillWidth}>
+                <div className={css.hbox(12).wrap}>
+                    <InputLabelURL
+                        label="Limit"
+                        number
+                        url={limitURL}
+                    />
+                    <TimeRangeSelector />
+                </div>
+
+                <InputLabelURL
+                    label="Additional Search"
+                    placeholder="Additional search filter..."
+                    url={additionalSearchURL}
+                    fillWidth
+                />
+
+                <div className={css.hbox(12).wrap}>
+                    <InputLabel
+                        placeholder="Add new life cycle"
+                        onChangeValue={(value) => {
+                            let title = value.trim();
+                            if (title) {
+                                let newLifeCycle: LifeCycle = {
+                                    id: nextId(),
+                                    title,
+                                    entries: [],
+                                };
+                                Querysub.onCommitFinished(async () => {
+                                    await this.controller.setLifeCycle.promise(newLifeCycle);
+                                });
+                            }
+                        }}
+                        className={css.width(500)}
+                    />
+                    <InputLabel
+                        placeholder="Filter life cycles..."
+                        value={this.state.filterText}
+                        onChangeValue={(value) => {
+                            this.state.filterText = value;
+                        }}
+                        className={css.width(500)}
+                    />
+                    <span>({filteredLifeCycles.length} / {sortedLifeCycles.length})</span>
+                    {this.state.searchingLifeCycleId && (
+                        <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 = [];
+                            }}
+                        >
+                            Show All Life Cycles
+                        </Button>
+                    )}
+                </div>
+            </div>
+
+            <div className={
+                css.vbox(12).pad2(12).bord2(200, 20, 80)
+                + (this.state.lifecycleInstances.length > 0 && css.maxHeight("30vh").overflowAuto)
+            }>
+                {filteredLifeCycles.length === 0 && <div>No life cycles match the filter</div>}
+                <div className={css.vbox(6)}>
+                    {filteredLifeCycles.map((lifeCycle) => (
+                        <LifeCycleRenderer
+                            key={lifeCycle.id}
+                            lifeCycle={lifeCycle}
+                            defaultEditMode={false}
+                            onSearch={(id) => this.searchLifeCycle(id)}
+                        />
+                    ))}
+                </div>
+            </div>
+
+            {(this.state.phase1Searching || this.state.phase1Results.length > 0) && (
+                <div className={css.vbox(8)}>
+                    <div className={css.boldStyle}>
+                        Phase 1: Start Entries ({this.state.phase1Results.length} valid)
+                        {this.state.phase1Searching && " - Searching..."}
+                    </div>
+                    {this.state.phase1Stats && (
+                        <RenderSearchStats
+                            stats={this.state.phase1Stats}
+                            searching={this.state.phase1Searching}
+                            limit={limitURL.value}
+                        />
+                    )}
+                </div>
+            )}
+
+            {this.state.phase1InvalidResults.length > 0 && (() => {
+                let allMissingKeys = new Set<string>();
+                for (let invalid of this.state.phase1InvalidResults) {
+                    for (let key of invalid.missingKeys) {
+                        allMissingKeys.add(key);
+                    }
+                }
+                return <div className={css.vbox(8).pad2(12).bord2(30, 60, 70).hsl(30, 50, 95)}>
+                    <div className={css.boldStyle.colorhsl(30, 80, 40)}>
+                        ⚠ Phase 1: Invalid Results Missing Keys ({this.state.phase1InvalidResults.length})
+                    </div>
+                    <div className={css.hbox(8).wrap}>
+                        <span>Missing keys across all results:</span>
+                        {Array.from(allMissingKeys).map(key => (
+                            <span key={key} className={css.colorhsl(0, 70, 40).boldStyle}>{key}</span>
+                        ))}
+                    </div>
+                    <div className={css.vbox(4).maxHeight("200px").overflowAuto}>
+                        {this.state.phase1InvalidResults.map((invalid, idx) => (
+                            <div key={idx} className={css.pad2(4).bord2(30, 40, 80).hsl(30, 40, 97).hbox(12, 4).wrap}>
+                                <span className={css.colorhsl(220, 60, 50)}>
+                                    {formatDateTime(invalid.datum.time)}
+                                </span>
+                                <span className={css.ellipsis.flexShrink0.maxWidth(400)}>
+                                    {String(invalid.datum.param0)}
+                                </span>
+                                <div className={css.hbox(4)}>
+                                    <span>Missing:</span>
+                                    {invalid.missingKeys.map(key => (
+                                        <span key={key} className={css.colorhsl(0, 70, 40)}>{key}</span>
+                                    ))}
+                                </div>
+                            </div>
+                        ))}
+                    </div>
+                </div>;
+            })()}
+
+            {(this.state.phase2Searching || this.state.phase2Results.length > 0) && (
+                <div className={css.vbox(8)}>
+                    <div className={css.boldStyle}>
+                        Phase 2: All Lifecycle Entries ({this.state.phase2Results.length})
+                        {this.state.phase2Searching && " - Searching..."}
+                    </div>
+                    {this.state.phase2Stats && (
+                        <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)}
+                        />
+                    )}
+                </div>
+            )}
+
+            {this.state.lifecycleInstances.length > 0 && (() => {
+                let searchedLifeCycle = sortedLifeCycles.find(lc => lc.id === this.state.searchingLifeCycleId);
+                if (!searchedLifeCycle) return <div>Cannot find life cycle instance {this.state.searchingLifeCycleId}</div>;
+
+                let lc = searchedLifeCycle;
+
+                return <div className={css.vbox(8)}>
+                    <h1>{lc.title} ({this.state.lifecycleInstances.length})</h1>
+                    <div className={css.vbox(2)}>
+                        {this.state.lifecycleInstances.map((instance, idx) => (
+                            <LifeCycleInstanceRenderer
+                                key={getPathStr(instance.entries.map(x => x.matchPattern)) + "_" + idx}
+                                lifeCycle={lc}
+                                instance={instance}
+                            />
+                        ))}
+                    </div>
+                </div>;
+            })()}
+        </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>;
+    }
+}