querysub 0.312.0 → 0.313.0

package/src/diagnostics/errorLogs/LogViewer.tsx

@@ -1,757 +0,0 @@
-
-import preact from "preact";
-import { qreact } from "../../../src/4-dom/qreact";
-import { SocketFunction } from "socket-function/SocketFunction";
-import { ErrorLogControllerBase } from "../../../src/diagnostics/errorLogs/ErrorLogController";
-import { getSyncedController } from "../../../src/library-components/SyncedController";
-import { getBrowserUrlNode } from "../../../src/-f-node-discovery/NodeDiscovery";
-import { LogBlock, LogBlockInfo, LogClass, LogClassSummary, LogRaw, LogType, getLogClassCategorizer, isClassifierMatch, isUngroupedClass, logBlockFromBuffer, sanitizeMessageForMatch, ungroupedPrefix } from "../../../src/diagnostics/errorLogs/ErrorLogCore";
-import { css } from "typesafecss";
-import { cacheShallowConfigArgEqual } from "socket-function/src/caching";
-import { nextId, sort } from "socket-function/src/misc";
-import { URLParam } from "../../../src/library-components/URLParam";
-import { ATag } from "../../../src/library-components/ATag";
-import { Button } from "../../../src/library-components/Button";
-import { doAtomicWrites } from "../../../src/2-proxy/PathValueProxyWatcher";
-import { formatNumber } from "socket-function/src/formatting/format";
-import { LogTimeSelector, TimelineInfo, getLogFilterRange } from "./LogTimeSelector";
-import { errorColor, fatalColor, filterMachineIdsURL, filterThreadIdsURL, getLogFilterClasses, getLogFilterMachineIds, getLogFilterThreadIds, getPathArrayLax, infoColor, showErrorURL, showFatalURL, showInfoURL, showLiveLogsURL, showOldestLogsFirstURL, showWarningURL, warnColor } from "./logFiltering";
-import { logErrors } from "../../../src/errors";
-import { Querysub } from "../../../src/4-querysub/Querysub";
-import { InputLabel } from "../../../src/library-components/InputLabel";
-import { LogFilterUI } from "./LogFilterUI";
-import { Table } from "../../../src/5-diagnostics/Table";
-import { JSXFormatter, toSpaceCase } from "../../../src/5-diagnostics/GenericFormat";
-import { SuppressUntil, logClassIdURL } from "./LogClassifiers";
-import { measureFnc } from "socket-function/src/profiling/measure";
-import { Icon } from "../../library-components/icons";
-import { assertIsManagementUser, managementPageURL } from "../managementPages";
-import { NodeViewerController } from "../NodeViewer";
-
-export const downloadLogsOnceURL = new URLParam("downloadLogsOnce", false);
-
-export type LogsParsed = {
-    class: LogClass;
-    count: number;
-    firstTime: number;
-    lastTime: number;
-};
-export type LogExample = {
-    message: string;
-    time: number;
-    threadId: string;
-    machineId: string;
-    class: LogClass;
-};
-export type LogProcessedData = {
-    examples: LogExample[];
-    parsed: LogsParsed[];
-    timeline: TimelineInfo[];
-};
-
-export class LogViewer extends qreact.Component {
-    state = {
-        allData: null as LogProcessedData | null,
-        ungroupedData: null as LogProcessedData | null,
-        unsuppressedData: null as LogProcessedData | null,
-
-        allMachineIds: null as Set<string> | null,
-        allThreadIds: null as Set<string> | null,
-        downloading: false,
-    };
-    blockBuffers: Buffer[] = [];
-
-    componentDidMount(): void {
-        if (downloadLogsOnceURL.value) {
-            downloadLogsOnceURL.value = false;
-            logErrors(this.download());
-        }
-    }
-
-    @measureFnc
-    async download() {
-        Querysub.localCommit(() => {
-            this.state.downloading = true;
-        });
-        try {
-
-            const logController = LogViewerController.nodes[getBrowserUrlNode()];
-
-            let timeFilter = getLogFilterRange();
-
-            let blockInfos = await logController.scanBlocks();
-
-            // Only blocks in the time range
-            blockInfos = blockInfos.filter(info =>
-                !(info.endTime <= timeFilter.startTime || info.startTime >= timeFilter.endTime)
-            );
-            // NOTE: We COULD filter blocks to only blocks which contain the types we want, but...
-            //  1) We might have reclassified the examples
-            //  2) Blocks are fairly small (for now), so downloading them isn't that big of a deal.
-
-            let blockBuffers = await logController.readBlocks({ files: blockInfos.map(info => info.fileName) });
-
-            if (showLiveLogsURL.value) {
-                let liveBlocks = await logController.readAllLiveBlocks();
-                blockBuffers.push(...liveBlocks);
-            }
-            this.blockBuffers = blockBuffers;
-            await this.parse();
-        } finally {
-            Querysub.localCommit(() => {
-                this.state.downloading = false;
-            });
-        }
-    }
-    @measureFnc
-    async parse() {
-        let timeFilter = getLogFilterRange();
-
-        let byClass = new Map<string, LogsParsed>();
-        function getByClass(classObj: LogClass) {
-            let obj = byClass.get(classObj.id);
-            if (!obj) {
-                obj = { class: classObj, count: 0, firstTime: Number.MAX_SAFE_INTEGER, lastTime: 0, };
-                byClass.set(classObj.id, obj);
-            }
-            return obj;
-        }
-        let examples: LogExample[] = [];
-        let timeline: (TimelineInfo & { class: LogClass })[] = [];
-
-        let byClassUnsuppressed = new Map<string, LogsParsed>();
-        function getByClassUnsuppressed(classObj: LogClass) {
-            let obj = byClassUnsuppressed.get(classObj.id);
-            if (!obj) {
-                obj = { class: classObj, count: 0, firstTime: Number.MAX_SAFE_INTEGER, lastTime: 0, };
-                byClassUnsuppressed.set(classObj.id, obj);
-            }
-            return obj;
-        }
-        let examplesUnsuppressed: LogExample[] = [];
-        let timelineUnsuppressed: (TimelineInfo & { class: LogClass })[] = [];
-
-        const blockBuffers = this.blockBuffers;
-        const logController = LogViewerController.nodes[getBrowserUrlNode()];
-
-        let classObjs = await logController.getClasses();
-        let classObjLookup = new Map(classObjs.map(obj => [obj.id, obj] as const));
-
-        let classIds = new Set(getLogFilterClasses());
-        let machineIds = new Set(getLogFilterMachineIds());
-        let threadIds = new Set(getLogFilterThreadIds());
-
-        let showFatal = showFatalURL.value;
-        let showError = showErrorURL.value;
-        let showWarning = showWarningURL.value;
-        let showInfo = showInfoURL.value;
-        function isClassInclude(classObj: LogClass) {
-            if (classIds.size > 0) {
-                if (!classIds.has(classObj.id)) {
-                    return false;
-                }
-            }
-            if (!showFatal && classObj.type === "fatal") return false;
-            if (!showError && classObj.type === "error") return false;
-            if (!showWarning && classObj.type === "warn") return false;
-            if (!showInfo && classObj.type === "info") return false;
-            return true;
-        }
-
-        let allMachineIds = new Set<string>();
-        let allThreadIds = new Set<string>();
-
-        let blocks: LogBlock[] = [];
-        for (let buffer of blockBuffers) {
-            let block = await logBlockFromBuffer(buffer);
-            allMachineIds.add(block.machineId);
-            allThreadIds.add(block.threadId);
-
-            if (machineIds.size > 0 && !machineIds.has(block.machineId)) {
-                continue;
-            }
-            if (threadIds.size > 0 && !threadIds.has(block.threadId)) {
-                continue;
-            }
-
-            blocks.push(block);
-        }
-
-        let classifier = getLogClassCategorizer(classObjs);
-
-        for (let block of blocks) {
-            // Only look at classes, ignore summary data (except for threadId/machineId)
-            const threadId = block.threadId;
-            const machineId = block.machineId;
-            function addToClass(classSummary: LogsParsed, config: {
-                count: number;
-                time: number;
-            }) {
-                classSummary.count += config.count;
-                classSummary.firstTime = Math.min(classSummary.firstTime, config.time);
-                classSummary.lastTime = Math.max(classSummary.lastTime, config.time);
-            }
-
-            function addRaw(classObj: LogClass, log: LogRaw) {
-                if (!isClassInclude(classObj)) return;
-                let example: LogExample = {
-                    class: classObj,
-                    message: log.message,
-                    threadId,
-                    machineId,
-                    time: log.time,
-                };
-                let timelineObj: TimelineInfo & { class: LogClass } = {
-                    count: 1,
-                    startTime: log.time,
-                    endTime: log.time,
-                    fatalCount: classObj.type === "fatal" ? 1 : 0,
-                    errorCount: classObj.type === "error" ? 1 : 0,
-                    warnCount: classObj.type === "warn" ? 1 : 0,
-                    infoCount: classObj.type === "info" ? 1 : 0,
-                    class: classObj,
-                };
-                examples.push(example);
-                timeline.push(timelineObj);
-                addToClass(getByClass(classObj), { count: 1, time: example.time });
-
-                if (example.time > classObj.suppressUntil) {
-                    examplesUnsuppressed.push(example);
-                    timelineUnsuppressed.push(timelineObj);
-                    addToClass(getByClassUnsuppressed(classObj), { count: 1, time: example.time });
-                }
-            }
-            function addClassSummary(classObj: LogClass, summary: LogClassSummary) {
-                if (!isClassInclude(classObj)) return;
-                let timelineObj: TimelineInfo & { class: LogClass } = {
-                    count: summary.count,
-                    startTime: summary.firstTime,
-                    endTime: summary.lastTime,
-                    fatalCount: classObj.type === "fatal" ? summary.count : 0,
-                    errorCount: classObj.type === "error" ? summary.count : 0,
-                    warnCount: classObj.type === "warn" ? summary.count : 0,
-                    infoCount: classObj.type === "info" ? summary.count : 0,
-                    class: classObj,
-                };
-                timeline.push(timelineObj);
-                addToClass(getByClass(classObj), { count: summary.count, time: summary.firstTime });
-                addToClass(getByClass(classObj), { count: 0, time: summary.lastTime });
-                // NOTE: If the user suppressed to the current moment, pending blocks will not be caught,
-                //  as their last time will keep increasing. BUT, users should suppress for at least a day,
-                //  so this shouldn't be an issue.
-                if (summary.lastTime > classObj.suppressUntil) {
-                    timelineUnsuppressed.push(timelineObj);
-                    addToClass(getByClassUnsuppressed(classObj), { count: summary.count, time: summary.firstTime });
-                    addToClass(getByClassUnsuppressed(classObj), { count: 0, time: summary.lastTime });
-                }
-            }
-
-            for (let classSummary of Object.values(block.classes)) {
-                let classObj: LogClass = classObjLookup.get(classSummary.logClassId) || {
-                    id: ungroupedPrefix + classSummary.logClassType,
-                    title: "missing Class",
-                    description: "missing class",
-                    createTime: 0,
-                    type: "fatal",
-                    match: [],
-                    suppressUntil: 0
-                };
-                // ALWAYS reclassify examples
-                {
-                    classSummary = { ...classSummary };
-                    for (let example of classSummary.examples) {
-                        if (!(timeFilter.startTime <= example.time && example.time < timeFilter.endTime)) {
-                            continue;
-                        }
-                        let newClass = classifier(example, classObj.type);
-                        addRaw(newClass, example);
-                    }
-
-                    classSummary.count -= classSummary.examples.length;
-                    if (classSummary.count <= 0) continue;
-                }
-                addClassSummary(classObj, classSummary);
-            }
-        }
-
-        let classList = Array.from(byClass.values());
-        let classListUnsuppressed = Array.from(byClassUnsuppressed.values());
-        if (showOldestLogsFirstURL.value) {
-            sort(classList, x => x.count);
-            sort(examples, x => x.time);
-            sort(timeline, x => x.startTime);
-
-            sort(classListUnsuppressed, x => x.firstTime);
-            sort(examplesUnsuppressed, x => x.time);
-            sort(timelineUnsuppressed, x => x.startTime);
-        } else {
-            sort(classList, x => -x.count);
-            sort(examples, x => -x.time);
-            sort(timeline, x => -x.startTime);
-
-            sort(classListUnsuppressed, x => -x.firstTime);
-            sort(examplesUnsuppressed, x => -x.time);
-            sort(timelineUnsuppressed, x => -x.startTime);
-        }
-
-
-        Querysub.localCommit(() => {
-            doAtomicWrites(() => {
-                this.state.allMachineIds = allMachineIds;
-                this.state.allThreadIds = allThreadIds;
-
-                this.state.allData = {
-                    examples,
-                    parsed: classList,
-                    timeline,
-                };
-                this.state.ungroupedData = {
-                    examples: examples.filter(a => isUngroupedClass(a.class)),
-                    parsed: classList.filter(a => isUngroupedClass(a.class)),
-                    timeline: timeline.filter(a => isUngroupedClass(a.class)),
-                };
-                this.state.unsuppressedData = {
-                    examples: examplesUnsuppressed.filter(a => !isUngroupedClass(a.class)),
-                    parsed: classListUnsuppressed.filter(a => !isUngroupedClass(a.class)),
-                    timeline: timelineUnsuppressed.filter(a => !isUngroupedClass(a.class)),
-                };
-            });
-        });
-    }
-    render() {
-        let blockInfos = LogViewerSynced(getBrowserUrlNode()).scanBlocks();
-        blockInfos = filterBlocks({
-            blockInfos,
-            machineIdsURL: filterMachineIdsURL.value,
-            threadIdsURL: filterThreadIdsURL.value,
-        });
-
-        const reparse = () => this.parse();
-
-        function divBorder(
-            outer: string,
-            borderColor: string,
-            content: preact.ComponentChild
-        ) {
-            let border = 10;
-            const fullMinusBorder = `calc(100% - ${border}px)` as const;
-            let createBorder = () => <div
-                class={
-                    css.fillBoth
-                        .backgroundImage(`
-                            repeating-linear-gradient(
-                                -45deg,
-                                ${borderColor},
-                                ${borderColor} 12px,
-                                transparent 10px,
-                                transparent 23px
-                            )
-                        `)
-                }
-            />;
-            return (
-                <div
-                    class={css.pad2(border).relative + outer}
-                >
-                    <div class={css.absolute.pos(0, 0).size("100%", border)}>
-                        {createBorder()}
-                    </div>
-                    <div class={css.absolute.pos(0, border).size(border, fullMinusBorder)}>
-                        {createBorder()}
-                    </div>
-                    <div class={css.absolute.pos(border, fullMinusBorder).size(fullMinusBorder, border)}>
-                        {createBorder()}
-                    </div>
-                    <div class={css.absolute.pos(fullMinusBorder, border).size(border, fullMinusBorder)}>
-                        {createBorder()}
-                    </div>
-                    <div class={css.pad2(5)}>
-                        {content}
-                    </div>
-                </div>
-            );
-        }
-
-        return (
-            <div class={css.pad2(10).vbox(10).fillWidth.center}>
-                <div class={css.fillWidth.hbox(10)}>
-                    <div class={css.marginAuto} />
-
-                    <h1>File Overview ({blockInfos?.length} files)</h1>
-
-                    <div class={css.marginAuto} />
-                </div>
-                <LogTimeSelector infos={blockInfos} hotkeys />
-
-                <div class={css.fillWidth.hbox(10).alignItems("start")}>
-                    <Button
-                        flavor="large"
-                        class={css.fontSize(40, "important").flexShrink0}
-                        showHotkeys
-                        hotkeys={["Enter", "Space"]}
-                        onClick={async () => this.download()}
-                    >
-                        Download
-                    </Button>
-                    <LogFilterUI
-                        allMachineIds={this.state.allMachineIds}
-                        allThreadIds={this.state.allThreadIds}
-                    />
-                </div>
-
-                <style>
-                    {`
-                        .loadingSpinner {
-                            animation: spin 3s linear infinite;
-                        }
-                        @keyframes spin {
-                            0% { transform: rotate(0deg); }
-                            100% { transform: rotate(360deg); }
-                        }
-                    `}
-                </style>
-                {this.state.downloading &&
-                    <div class={css.fillWidth.center.paddingTop(200) + " loadingSpinner"}>
-                        {Icon.loadingSymbol({ size: 300 })}
-                    </div>
-                }
-
-                {!!this.state.ungroupedData?.examples.length && (
-                    divBorder(
-                        css.hsl(-5, 40, 60),
-                        "hsl(-5, 60%, 50%)",
-                        <LogSection
-                            key="ungroupedData"
-                            reparse={reparse}
-                            title="Add accurate and specific classifiers for these immediately, don't worry about fixing them yet"
-                            data={this.state.ungroupedData}
-                            showExamplesByDefault
-                        />
-                    )
-                )}
-                {!!this.state.unsuppressedData?.examples.length && (
-                    divBorder(
-                        css.hsl(40, 40, 60),
-                        "hsl(40, 60%, 50%)",
-                        <LogSection
-                            key="unsuppressedData"
-                            reparse={reparse}
-                            title="Create tickets for these logs, and then suppress them"
-                            addSuppressColumns
-                            data={this.state.unsuppressedData}
-                        />
-                    )
-                )}
-                {this.state.allData && (
-                    divBorder(
-                        //css.hsl(210, 40, 60),
-                        "",
-                        "hsl(210, 60%, 50%)",
-                        <LogSection
-                            key="allData"
-                            reparse={reparse}
-                            title="All Data"
-                            data={this.state.allData}
-                        />
-                    )
-                )}
-            </div>
-        );
-    }
-}
-
-const filterBlocks = cacheShallowConfigArgEqual((
-    config: {
-        blockInfos: LogBlockInfo[] | undefined;
-        machineIdsURL: string;
-        threadIdsURL: string;
-    }
-): LogBlockInfo[] => {
-    const { blockInfos, machineIdsURL, threadIdsURL } = config;
-    let machineIds = new Set(getPathArrayLax(machineIdsURL));
-    let threadIds = new Set(getPathArrayLax(threadIdsURL));
-
-    return blockInfos?.filter(info =>
-        (!machineIds.size || machineIds.has(info.machineId)) &&
-        (!threadIds.size || threadIds.has(info.threadId))
-    ) || [];
-});
-
-let lastClassifierUpdated: LogClass | undefined;
-class LogSection extends qreact.Component<{
-    title: string;
-    data: LogProcessedData;
-    showExamplesByDefault?: boolean;
-    addSuppressColumns?: boolean;
-    reparse: () => void;
-}> {
-    state = {
-        previewFilter: "",
-        summaryExpanded: { value: true },
-        examplesExpanded: { value: !!this.props.showExamplesByDefault },
-    };
-    render() {
-        let { title, data } = this.props;
-        let previewFilter = this.state.previewFilter;
-        if (previewFilter) {
-            data = { ...data };
-            let tempClassifier: LogClass = {
-                id: "",
-                title: "",
-                createTime: 0,
-                description: "",
-                match: [{ type: "includes", value: previewFilter }],
-                suppressUntil: 0,
-                type: "info",
-            };
-            data.examples = data.examples.filter(example =>
-                isClassifierMatch(tempClassifier, example)
-            );
-        }
-        let { reparse } = this.props;
-        const createClassifier = async (type: LogType) => {
-            let previewFilter = this.state.previewFilter;
-            // Wait for the blur to finish before resetting previewFilter
-            Querysub.onCommitFinished(() => {
-                setImmediate(() => {
-                    Querysub.localCommit(() => {
-                        this.state.previewFilter = "";
-                    });
-                });
-            });
-            let newClass: LogClass = {
-                id: nextId(),
-                title: toSpaceCase(previewFilter),
-                createTime: Date.now(),
-                description: previewFilter,
-                match: [{ type: "includes", value: previewFilter }],
-                suppressUntil: 0,
-                type,
-            };
-            lastClassifierUpdated = newClass;
-            await LogViewerController.nodes[getBrowserUrlNode()].updateClass(newClass);
-            await reparse();
-        };
-        const classFormatter: JSXFormatter<LogClass> = (x) => {
-            return (
-                <div class={css.hbox(4).wrap}>
-                    {this.props.addSuppressColumns && (
-                        <SuppressUntil
-                            type={x.type}
-                            time={x.suppressUntil}
-                            updateClass={async newValue => {
-                                let newClass = { ...x, ...newValue };
-                                lastClassifierUpdated = newClass;
-                                await LogViewerController.nodes[getBrowserUrlNode()].updateClass(newClass);
-                                reparse();
-                            }}
-                        />
-                    )}
-                    <ATag
-                        target="_blank"
-                        class={css.button.textDecoration("none", "important").hbox(0)}
-                        values={[
-                            { param: logClassIdURL, value: x.id },
-                            { param: managementPageURL, value: "LogClassifiers" },
-                        ]}
-                    >
-                        (Edit {formatTypeColor(x.type, x.title)})
-                    </ATag>
-                </div>
-            );
-        };
-        let totalCount = data.parsed.reduce((sum, x) => sum + x.count, 0);
-        return (
-            <div class={css.fillWidth.vbox(10).maxHeight("80vh")}>
-                <h1>{title}</h1>
-                <LogTimeSelector infos={data.timeline} />
-                <SideCollapsible
-                    expanded={this.state.summaryExpanded}
-                    collapsedTitle={`Summary (${formatNumber(data.parsed.length)})`}
-                >
-                    <Table
-                        columns={{
-                            class: { formatter: classFormatter },
-                            count: {
-                                formatter: (x) => {
-                                    return (
-                                        <div class={css.relative}>
-                                            <div class={
-                                                css.absolute.pos(0, 0).size(`${x / totalCount * 100}%`, "100%")
-                                                    .hsla(0, 0, 100, 0.75)
-                                            } />
-                                            <span class={css.relative}>{formatNumber(x)}</span>
-                                        </div>
-                                    );
-                                }
-                            },
-                            firstTime: {},
-                            lastTime: {},
-                        }}
-                        rows={data.parsed}
-                    />
-                </SideCollapsible>
-                {lastClassifierUpdated &&
-                    <ATag
-                        // NOTE: Not only is this nice, but... without it we would need
-                        //  to explicitly invalidate our cache, which is annoying to do with ATag.
-                        target="_blank"
-                        values={[
-                            { param: logClassIdURL, value: lastClassifierUpdated.id },
-                            { param: managementPageURL, value: "LogClassifiers" },
-                        ]}
-                        class={css.hbox(4).marginLeft(10).hsla(0, 0, 100, 0.5).pad2(4, 1)}
-                    >
-                        View last updated classifier: {formatTypeColor(lastClassifierUpdated.type, lastClassifierUpdated.title)}
-                    </ATag>
-                }
-                {/* NOTE: We show classifiers for all views, as you might want to reclassify even classified data,
-                    by using a higher priority. */}
-                {this.state.examplesExpanded.value && <div class={css.hbox(10)}>
-                    <InputLabel
-                        label="Create Classifier"
-                        value={previewFilter}
-                        hot
-                        onChangeValue={(value) => {
-                            this.state.previewFilter = value;
-                        }}
-                        onKeyDown={async e => {
-                            if (e.key === "Enter") {
-                                await createClassifier(data.examples[0]?.class.type || "error");
-                            }
-                        }}
-                    />
-                    {previewFilter && (
-                        <div class={css.hbox(4).hsla(0, 0, 100, 0.5).pad2(4, 1)}>
-                            <span>Matches</span>
-                            <span>
-                                {formatNumber(data.examples.length)} / {formatNumber(this.props.data.examples.length)}
-                            </span>
-                            <Button class={css.hbox(6).hsl(fatalColor.h, fatalColor.s, fatalColor.l)} onClick={() => createClassifier("fatal")}>
-                                Fatal
-                            </Button>
-                            <Button class={css.hbox(6).hsl(errorColor.h, errorColor.s, errorColor.l)} onClick={() => createClassifier("error")}>
-                                Error
-                            </Button>
-                            <Button class={css.hbox(6).hsl(warnColor.h, warnColor.s, warnColor.l)} onClick={() => createClassifier("warn")}>
-                                Warning
-                            </Button>
-                            <Button class={css.hbox(6).hsl(infoColor.h, infoColor.s, infoColor.l)} onClick={() => createClassifier("info")}>
-                                Info
-                            </Button>
-                        </div>
-                    )}
-                </div>}
-
-                <SideCollapsible
-                    expanded={this.state.examplesExpanded}
-                    collapsedTitle={`Examples (${formatNumber(data.examples.length)})`}
-                    defaultCollapsed={!this.props.showExamplesByDefault}
-                >
-                    <Table
-                        columns={{
-                            class: {
-                                formatter: classFormatter,
-                            },
-                            time: {},
-                            machineId: {},
-                            threadId: {},
-                            message: {
-                                formatter: (x) => {
-                                    if (!previewFilter) return x;
-                                    let matchIndex = sanitizeMessageForMatch(x).indexOf(previewFilter.toLowerCase());
-                                    if (matchIndex === -1) return x;
-                                    let before = x.slice(0, matchIndex);
-                                    let match = x.slice(matchIndex, matchIndex + previewFilter.length);
-                                    let after = x.slice(matchIndex + previewFilter.length);
-                                    return (
-                                        <div>
-                                            {before}
-                                            <span class={css.hsl(60, 75, 50)}>{match}</span>
-                                            {after}
-                                        </div>
-                                    );
-                                },
-                            },
-                        }}
-                        rows={data.examples}
-                    />
-                </SideCollapsible>
-            </div>
-        );
-    }
-}
-class SideCollapsible extends qreact.Component<{
-    defaultCollapsed?: boolean;
-    collapsedTitle?: string;
-    expanded: { value: boolean }
-}> {
-    render() {
-        let expanded = this.props.expanded.value;
-        return (
-            <div class={
-                css.fillWidth.hbox(10).alignItems("start").overflowAuto
-                //+ css.minHeight(expanded ? 100 : 50)
-                + (expanded && css.minHeight(100).maxHeight("60%") || css.minHeight(50))
-            }>
-                <Button
-                    square
-                    flavor="noui"
-                    onClick={() => this.props.expanded.value = !expanded}
-                    class={
-                        (expanded && css.hsla(0, 0, 100, 0.5) || css.hsla(0, 0, 100, 0.25))
-                        + css.background(expanded ? "hsla(0, 0%, 100%, 0.25)" : "hsla(0, 0%, 100%, 0.5)", "hover")
-                        + css.button.borderWidth(0).flex
-                        + css.outline("none", "important")
-                    }
-                >
-                    {(expanded && Icon.chevronDown || Icon.chevronRight)({
-                        size: 30,
-                        style: {
-                            position: "relative",
-                            top: expanded ? -3 : 0,
-                            left: expanded ? 0 : 4,
-                        }
-                    })}
-                    {!expanded && <div class={css.fontSize(20).pad2(8, 2)}>{this.props.collapsedTitle}</div> || ""}
-                </Button>
-
-                {expanded && this.props.children}
-            </div>
-        );
-    }
-}
-
-export function formatTypeColor(type: LogType, contents: preact.ComponentChild) {
-    let color = (
-        (type === "fatal" && fatalColor) ||
-        (type === "error" && errorColor) ||
-        (type === "warn" && warnColor) ||
-        (type === "info" && infoColor) ||
-        fatalColor
-    );
-    return (
-        <div class={css.pad2(4, 1).color("white").hsl(color.h, color.s, color.l)}>
-            {contents}
-        </div>
-    );
-}
-
-export const LogViewerController = SocketFunction.register(
-    "LogViewerController-257d81a9-a170-441e-9ff3-7d9d86b6e80a",
-    new ErrorLogControllerBase(),
-    () => ({
-        scanBlocks: {},
-        readBlocks: {},
-        readAllLiveBlocks: {},
-        getClasses: {},
-        updateClass: {},
-        onClassesUpdated: {},
-    }),
-    () => ({
-        hooks: [assertIsManagementUser],
-    }),
-);
-
-export const LogViewerSynced = getSyncedController(LogViewerController);
-const NodeViewerSynced = getSyncedController(NodeViewerController);