@delmaredigital/payload-experiments 0.0.0-stage → 0.1.0-rc.3

package/dist/admin/results/CiChart.js

@@ -0,0 +1,178 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RESULTS_COPY as C, chartSummary, contentChangeTitle } from '../copy/results.js';
+import { chartModel } from './chart.model.js';
+import { formatPercent } from './format.js';
+const colors = [
+    'var(--theme-elevation-800)',
+    'var(--theme-elevation-600)',
+    'var(--theme-elevation-400)'
+];
+const date = (t)=>new Intl.DateTimeFormat('en-US', {
+        dateStyle: 'medium',
+        timeZone: 'UTC'
+    }).format(t);
+export function CiChart({ series, metricId, metricName, phase, contentChanges }) {
+    const model = chartModel({
+        series,
+        metricId,
+        phase,
+        contentChanges
+    });
+    if (model.empty) return /*#__PURE__*/ _jsx("p", {
+        children: C.noHistory
+    });
+    const [from, to] = model.xDomain, [low, high] = model.yDomain;
+    const x = (t)=>80 + (t - from) / (to - from) * 600;
+    const y = (value)=>230 - (value - low) / (high - low) * 210;
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-ci-chart",
+        style: {
+            color: 'var(--theme-text)'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: C.chart
+            }),
+            /*#__PURE__*/ _jsxs("svg", {
+                viewBox: "0 0 760 280",
+                style: {
+                    width: '100%',
+                    height: 'auto'
+                },
+                role: "img",
+                "aria-label": chartSummary(metricName, model.variants.map((variant)=>variant.label).join(', '), date(from), date(to), [
+                    ...new Set(model.markers.map((marker)=>date(marker.t)))
+                ]),
+                children: [
+                    /*#__PURE__*/ _jsx("line", {
+                        x1: 80,
+                        x2: 680,
+                        y1: y(0),
+                        y2: y(0),
+                        stroke: "var(--theme-elevation-500)",
+                        strokeDasharray: "4 4"
+                    }),
+                    [
+                        high,
+                        low
+                    ].map((value, index)=>/*#__PURE__*/ _jsx("text", {
+                            x: 72,
+                            y: y(value) + 4,
+                            textAnchor: "end",
+                            fill: "currentColor",
+                            fontSize: 12,
+                            children: formatPercent(value, true)
+                        }, index)),
+                    /*#__PURE__*/ _jsx("text", {
+                        x: 80,
+                        y: 260,
+                        fill: "currentColor",
+                        fontSize: 12,
+                        children: date(from)
+                    }),
+                    /*#__PURE__*/ _jsx("text", {
+                        x: 680,
+                        y: 260,
+                        textAnchor: "end",
+                        fill: "currentColor",
+                        fontSize: 12,
+                        children: date(to)
+                    }),
+                    model.variants.map((variant, index)=>{
+                        const path = (points)=>{
+                            let connected = false;
+                            return points.map((point)=>{
+                                if (point.value === null) {
+                                    connected = false;
+                                    return '';
+                                }
+                                const command = connected ? 'L' : 'M';
+                                connected = true;
+                                return `${command}${x(point.t)},${y(point.value)}`;
+                            }).join(' ');
+                        };
+                        const color = colors[index % colors.length];
+                        const upper = variant.points.map((point)=>`${x(point.t)},${y(point.hi ?? high)}`);
+                        const lower = [
+                            ...variant.points
+                        ].reverse().map((point)=>`${x(point.t)},${y(point.lo ?? low)}`);
+                        return /*#__PURE__*/ _jsxs("g", {
+                            "data-series": variant.arm,
+                            stroke: color,
+                            fill: color,
+                            children: [
+                                /*#__PURE__*/ _jsx("title", {
+                                    children: variant.label
+                                }),
+                                /*#__PURE__*/ _jsx("polygon", {
+                                    points: [
+                                        ...upper,
+                                        ...lower
+                                    ].join(' '),
+                                    fillOpacity: 0.15,
+                                    stroke: "none"
+                                }),
+                                /*#__PURE__*/ _jsx("path", {
+                                    d: path(variant.points.map((point)=>({
+                                            t: point.t,
+                                            value: point.lift
+                                        }))),
+                                    fill: "none",
+                                    strokeWidth: 2
+                                }),
+                                [
+                                    'lo',
+                                    'hi'
+                                ].map((bound)=>/*#__PURE__*/ _jsx("path", {
+                                        "data-bound": bound,
+                                        d: path(variant.points.map((point)=>({
+                                                t: point.t,
+                                                value: point[bound]
+                                            }))),
+                                        fill: "none",
+                                        strokeWidth: 1
+                                    }, bound))
+                            ]
+                        }, variant.arm);
+                    }),
+                    model.markers.map((marker, index)=>/*#__PURE__*/ _jsxs("g", {
+                            children: [
+                                /*#__PURE__*/ _jsx("title", {
+                                    children: contentChangeTitle(date(marker.t))
+                                }),
+                                /*#__PURE__*/ _jsx("line", {
+                                    x1: x(marker.t),
+                                    x2: x(marker.t),
+                                    y1: 20,
+                                    y2: 230,
+                                    stroke: "var(--theme-text)",
+                                    strokeDasharray: "2 4"
+                                })
+                            ]
+                        }, `${marker.at}/${index}`))
+                ]
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                children: model.variants.map((variant, index)=>/*#__PURE__*/ _jsxs("li", {
+                        style: {
+                            color: 'var(--theme-text)'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx("span", {
+                                "aria-hidden": "true",
+                                style: {
+                                    display: 'inline-block',
+                                    width: '1em',
+                                    height: '0.5em',
+                                    marginRight: '0.5em',
+                                    backgroundColor: colors[index % colors.length]
+                                }
+                            }),
+                            variant.label
+                        ]
+                    }, variant.arm))
+            })
+        ]
+    });
+}

package/dist/admin/results/DataQualityPanel.d.ts

@@ -0,0 +1,4 @@
+import type { DataQualityItem } from './results.model.js';
+export declare function DataQualityPanel({ items }: {
+    items: DataQualityItem[];
+}): import("react").JSX.Element | null;

package/dist/admin/results/DataQualityPanel.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { RESULTS_COPY } from '../copy/results.js';
+export function DataQualityPanel({ items }) {
+    if (items.length === 0) return null;
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-data-quality",
+        "aria-label": RESULTS_COPY.quality,
+        style: {
+            color: 'var(--theme-text)',
+            background: 'var(--theme-elevation-50)',
+            padding: '1rem'
+        },
+        children: [
+            /*#__PURE__*/ _jsx("h2", {
+                children: RESULTS_COPY.quality
+            }),
+            /*#__PURE__*/ _jsx("ul", {
+                children: items.map((item)=>/*#__PURE__*/ _jsxs("li", {
+                        children: [
+                            /*#__PURE__*/ _jsx("p", {
+                                children: item.message
+                            }),
+                            item.detail ? /*#__PURE__*/ _jsx("p", {
+                                children: item.detail
+                            }) : null,
+                            item.shares ? /*#__PURE__*/ _jsx("ul", {
+                                children: item.shares.map((share, index)=>/*#__PURE__*/ _jsx("li", {
+                                        children: share
+                                    }, index))
+                            }) : null,
+                            /*#__PURE__*/ _jsx("p", {
+                                children: item.nextStep
+                            })
+                        ]
+                    }, item.id))
+            })
+        ]
+    });
+}

package/dist/admin/results/ResultsView.d.ts

@@ -0,0 +1,3 @@
+import '../styles.js';
+import type { DocumentViewClientProps } from 'payload';
+export declare function ResultsView(_props: DocumentViewClientProps): import("react").JSX.Element;

package/dist/admin/results/ResultsView.js

@@ -0,0 +1,312 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import '../styles.js';
+import { useEffect, useMemo, useRef, useState } from 'react';
+import { Button, Form, useAuth, useDocumentInfo } from '@payloadcms/ui';
+import { useApi } from '../useApi.js';
+import { canManage } from '../permissions.model.js';
+import { armLabel } from '../labels.js';
+import { RESULTS_COPY as C } from '../copy/results.js';
+import { API_MESSAGES } from '../copy/common.js';
+import { ExperimentActions } from '../actions/ExperimentActions.js';
+import { PreviewLinks } from '../PreviewLinks.js';
+import { VerdictCard } from './VerdictCard.js';
+import { ArmTable } from './ArmTable.js';
+import { DataQualityPanel } from './DataQualityPanel.js';
+import { CiChart } from './CiChart.js';
+import { armRows, collectingLine, dataQuality, defaultRound, guardrailChips, powerLine, rolloutLine, roundOptions, verdictCard } from './results.model.js';
+function savedFormState(saved) {
+    const fields = {};
+    const field = (path, value)=>{
+        fields[path] = {
+            value,
+            initialValue: value
+        };
+    };
+    for (const path of [
+        'status',
+        'kind',
+        'allocation'
+    ])field(path, saved?.[path]);
+    saved?.arms?.forEach((arm, index)=>{
+        for (const [key, value] of Object.entries(arm))field(`arms.${index}.${key}`, value);
+    });
+    for (const [key, value] of Object.entries(saved?.decision ?? {}))field(`decision.${key}`, value);
+    for (const [key, value] of Object.entries(saved?.metrics ?? {}))field(`metrics.${key}`, value);
+    return fields;
+}
+export function ResultsView(_props) {
+    const { id, data, initialState } = useDocumentInfo();
+    const { permissions } = useAuth();
+    const formState = useMemo(()=>initialState ?? savedFormState(data), [
+        initialState,
+        data
+    ]);
+    if (id == null) return /*#__PURE__*/ _jsx("p", {
+        children: C.empty
+    });
+    return /*#__PURE__*/ _jsx(ResultsContent, {
+        id: id,
+        saved: data,
+        formState: formState,
+        manage: canManage(permissions)
+    }, id);
+}
+function ResultsContent({ id, saved, formState, manage }) {
+    const api = useApi();
+    const status = saved?.status ?? 'draft';
+    const decision = saved?.decision;
+    const [round, setRound] = useState(null);
+    const [phases, setPhases] = useState([]);
+    const [state, setState] = useState({
+        round: null,
+        kind: 'loading'
+    });
+    const [refresh, setRefresh] = useState(0);
+    const [placements, setPlacements] = useState(null);
+    const [previewError, setPreviewError] = useState(null);
+    const [previewRefresh, setPreviewRefresh] = useState(0);
+    const [busy, setBusy] = useState(false);
+    const inFlight = useRef(false);
+    const [actionError, setActionError] = useState(null);
+    useEffect(()=>{
+        let active = true;
+        setState((previous)=>({
+                round,
+                kind: 'loading',
+                data: previous.round === round ? previous.data : undefined
+            }));
+        void api.results(id, {
+            ...round === null ? {} : {
+                phase: round
+            },
+            series: true
+        }).then((result)=>{
+            if (!active) return;
+            if (!result.ok || !result.data) {
+                setState((previous)=>({
+                        round,
+                        kind: !result.ok && result.status === 403 ? 'forbidden' : 'error',
+                        data: previous.round === round ? previous.data : undefined,
+                        message: result.ok ? API_MESSAGES.unreadable : result.message
+                    }));
+                return;
+            }
+            setPhases(result.data.phases);
+            if (round === null) {
+                const initial = defaultRound({
+                    phases: result.data.phases,
+                    decision,
+                    status
+                });
+                if (initial !== null) {
+                    setRound(initial);
+                    return;
+                }
+            }
+            setState({
+                round,
+                kind: 'ready',
+                data: result.data
+            });
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        api,
+        id,
+        round,
+        refresh,
+        status,
+        decision?.phase
+    ]);
+    useEffect(()=>{
+        let active = true;
+        setPlacements(null);
+        setPreviewError(null);
+        if (manage) void api.preflight(id).then((result)=>{
+            if (!active) return;
+            if (result.ok && result.data) setPlacements(result.data.placements);
+            else setPreviewError(result.ok ? API_MESSAGES.unreadable : result.message);
+        });
+        return ()=>{
+            active = false;
+        };
+    }, [
+        api,
+        id,
+        manage,
+        previewRefresh
+    ]);
+    async function recompute() {
+        if (!manage || inFlight.current) return;
+        inFlight.current = true;
+        setBusy(true);
+        setActionError(null);
+        try {
+            const result = await api.recompute(id);
+            if (result.ok) setRefresh((value)=>value + 1);
+            else setActionError(result.message);
+        } finally{
+            inFlight.current = false;
+            setBusy(false);
+        }
+    }
+    const response = state.round === round ? state.data : undefined;
+    const phase = response?.phases.find((phase)=>phase.phase === round);
+    const snapshot = response?.snapshot;
+    const isDecidedTestRound = status === 'decided' && phase?.phaseKind === 'test' && decision?.phase === round;
+    const winner = phase?.arms.find((arm)=>arm.key === decision?.winnerArm)?.label ?? armLabel(decision?.winnerArm ?? 'control');
+    // Running is context for this round only, never the live status of an older round.
+    const lineStatus = status === 'running' && round === defaultRound({
+        phases,
+        status
+    }) ? 'running' : 'stopped';
+    const context = {
+        phase,
+        inLayer: saved?.layer != null,
+        layerSlices: saved?.layerSlices,
+        allocation: saved?.allocation
+    };
+    const primary = phase?.metrics.find((metric)=>metric.role === 'primary');
+    return /*#__PURE__*/ _jsxs("div", {
+        className: "xp-results",
+        style: {
+            color: 'var(--theme-text)'
+        },
+        children: [
+            phases.length > 0 ? /*#__PURE__*/ _jsxs("label", {
+                children: [
+                    C.round,
+                    /*#__PURE__*/ _jsx("select", {
+                        value: round ?? '',
+                        onChange: (event)=>setRound(Number(event.target.value)),
+                        children: roundOptions(phases).map((option)=>/*#__PURE__*/ _jsx("option", {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    })
+                ]
+            }) : null,
+            state.round !== round || state.kind === 'loading' ? /*#__PURE__*/ _jsx("p", {
+                role: "status",
+                children: response ? C.refreshing : C.loading
+            }) : state.kind === 'forbidden' ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: C.forbidden
+            }) : state.kind === 'error' ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: state.message
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setRefresh((value)=>value + 1),
+                        children: C.retry
+                    })
+                ]
+            }) : null,
+            phase && snapshot ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(VerdictCard, {
+                        model: verdictCard({
+                            snapshot,
+                            decisionSnapshot: response?.decisionSnapshot,
+                            isDecidedTestRound,
+                            winnerLabel: winner
+                        }),
+                        guardrails: guardrailChips(snapshot),
+                        power: powerLine({
+                            snapshot,
+                            phaseKind: phase.phaseKind,
+                            status: lineStatus
+                        }),
+                        collecting: collectingLine({
+                            snapshot,
+                            phaseKind: phase.phaseKind,
+                            status: lineStatus
+                        }, context),
+                        sinceShipping: rolloutLine(snapshot, phase, phases, decision ?? undefined)
+                    }),
+                    /*#__PURE__*/ _jsx(DataQualityPanel, {
+                        items: dataQuality(snapshot, context)
+                    }),
+                    [
+                        'primary',
+                        'secondary',
+                        'guardrail'
+                    ].map((role)=>{
+                        const metrics = phase.metrics.filter((metric)=>metric.role === role);
+                        return metrics.length ? /*#__PURE__*/ _jsxs("section", {
+                            children: [
+                                /*#__PURE__*/ _jsx("h2", {
+                                    children: C[role]
+                                }),
+                                metrics.map((metric)=>/*#__PURE__*/ _jsx(ArmTable, {
+                                        caption: metric.name,
+                                        method: snapshot.method,
+                                        metricKind: metric.kind,
+                                        rows: armRows({
+                                            snapshot,
+                                            phase,
+                                            metricId: metric.metricId
+                                        })
+                                    }, metric.metricId))
+                            ]
+                        }, role) : null;
+                    }),
+                    primary ? /*#__PURE__*/ _jsx(CiChart, {
+                        series: response?.series,
+                        metricId: primary.metricId,
+                        metricName: primary.name,
+                        phase: phase,
+                        contentChanges: snapshot.contentChanges
+                    }) : null
+                ]
+            }) : state.round === round && state.kind === 'ready' ? /*#__PURE__*/ _jsx("p", {
+                children: C.empty
+            }) : null,
+            manage && placements ? /*#__PURE__*/ _jsx(PreviewLinks, {
+                experimentId: id,
+                placements: placements,
+                arms: saved?.arms ?? []
+            }) : null,
+            manage && previewError ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx("p", {
+                        role: "alert",
+                        children: previewError
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        onClick: ()=>setPreviewRefresh((value)=>value + 1),
+                        children: C.retryPreview
+                    })
+                ]
+            }) : null,
+            /*#__PURE__*/ _jsx(Form, {
+                initialState: formState,
+                el: "div",
+                children: /*#__PURE__*/ _jsx(ExperimentActions, {
+                    field: {
+                        name: 'actions',
+                        type: 'ui',
+                        admin: {}
+                    },
+                    path: "actions"
+                })
+            }),
+            manage ? /*#__PURE__*/ _jsx(Button, {
+                disabled: busy,
+                onClick: ()=>{
+                    void recompute();
+                },
+                children: busy ? C.recomputing : C.recompute
+            }) : null,
+            actionError ? /*#__PURE__*/ _jsx("p", {
+                role: "alert",
+                children: actionError
+            }) : null
+        ]
+    });
+}

package/dist/admin/results/VerdictCard.d.ts

@@ -0,0 +1,9 @@
+import type { VerdictCardModel, guardrailChips } from './results.model.js';
+export interface VerdictCardProps {
+    model: VerdictCardModel;
+    guardrails?: ReturnType<typeof guardrailChips>;
+    power?: string | null;
+    collecting?: string | null;
+    sinceShipping?: string | null;
+}
+export declare function VerdictCard({ model, guardrails, power, collecting, sinceShipping }: VerdictCardProps): import("react").JSX.Element;

package/dist/admin/results/VerdictCard.js

@@ -0,0 +1,49 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function VerdictCard({ model, guardrails = [], power, collecting, sinceShipping }) {
+    return /*#__PURE__*/ _jsxs("section", {
+        className: "xp-verdict-card",
+        style: {
+            color: 'var(--theme-text)',
+            background: 'var(--theme-elevation-50)',
+            padding: '1rem'
+        },
+        children: [
+            sinceShipping ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-since-shipping",
+                children: sinceShipping
+            }) : null,
+            /*#__PURE__*/ _jsx("h2", {
+                children: 'title' in model ? model.title : model.headline
+            }),
+            'finding' in model && model.finding ? /*#__PURE__*/ _jsx("p", {
+                children: model.finding
+            }) : null,
+            model.detail ? /*#__PURE__*/ _jsx("p", {
+                children: model.detail
+            }) : null,
+            'guardrailLine' in model && model.guardrailLine ? /*#__PURE__*/ _jsx("p", {
+                children: model.guardrailLine
+            }) : null,
+            !('title' in model) && collecting ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-collecting",
+                children: collecting
+            }) : null,
+            guardrails.length > 0 ? /*#__PURE__*/ _jsx("ul", {
+                className: "xp-guardrails",
+                children: guardrails.map((item, index)=>/*#__PURE__*/ _jsxs("li", {
+                        className: "xp-chip",
+                        children: [
+                            item.name,
+                            ": ",
+                            item.status
+                        ]
+                    }, index))
+            }) : null,
+            !('title' in model) && power ? /*#__PURE__*/ _jsx("p", {
+                className: "xp-power",
+                children: power
+            }) : null
+        ]
+    });
+}

package/dist/admin/results/chart.model.d.ts

@@ -0,0 +1,32 @@
+import type { DocId } from '../../types/contracts.js';
+import type { PhaseSummary, ResultsResponse } from '../../types/endpoints.js';
+import type { Snapshot } from '../../types/snapshot.js';
+export interface ChartPoint {
+    t: number;
+    lift: number;
+    lo: number | null;
+    hi: number | null;
+}
+export type ChartModel = {
+    empty: true;
+} | {
+    empty: false;
+    xDomain: [number, number];
+    yDomain: [number, number];
+    variants: Array<{
+        arm: string;
+        label: string;
+        points: ChartPoint[];
+    }>;
+    markers: Array<{
+        t: number;
+        at: string;
+    }>;
+};
+/** Selects stored primary comparisons and display domains; performs no inference. */
+export declare function chartModel({ series, metricId, phase, contentChanges }: {
+    series?: ResultsResponse['series'];
+    metricId: DocId;
+    phase: PhaseSummary;
+    contentChanges?: Snapshot['contentChanges'];
+}): ChartModel;