Async Workflows and Source Panels

Task Slot Summary

Store independent task results in typed slots before summarizing them.

task slots Separate result slots make interleaved or filtered replay easier to reason about because each task has its own state.

Task Slot Summary

seed
task_slots.ts
Replay: real traced execution (multi-file project)
type Slot = {
    name: "read" | "write";
    value: number;
};

const seed: number = 5;
const slots: Slot[] = [
    { name: "read", value: 0 },
    { name: "write", value: 0 }
];

function fillReadSlot(value: number): void {
    slots[0].value = value + 10;
}

function fillWriteSlot(value: number): void {
    slots[1].value = value * 3;
}

fillReadSlot(seed);
fillWriteSlot(seed);

const total: number = slots[0].value + slots[1].value;

console.log(`read=${slots[0].value}`);
console.log(`write=${slots[1].value}`);
console.log(`total=${total}`);

type Slot = {
    name: "read" | "write";
    value: number;
};

const seed: number = 2;
const slots: Slot[] = [
    { name: "read", value: 0 },
    { name: "write", value: 0 }
];

function fillReadSlot(value: number): void {
    slots[0].value = value + 10;
}

function fillWriteSlot(value: number): void {
    slots[1].value = value * 3;
}

fillReadSlot(seed);
fillWriteSlot(seed);

const total: number = slots[0].value + slots[1].value;

console.log(`read=${slots[0].value}`);
console.log(`write=${slots[1].value}`);
console.log(`total=${total}`);

type Slot = {
    name: "read" | "write";
    value: number;
};

const seed: number = 8;
const slots: Slot[] = [
    { name: "read", value: 0 },
    { name: "write", value: 0 }
];

function fillReadSlot(value: number): void {
    slots[0].value = value + 10;
}

function fillWriteSlot(value: number): void {
    slots[1].value = value * 3;
}

fillReadSlot(seed);
fillWriteSlot(seed);

const total: number = slots[0].value + slots[1].value;

console.log(`read=${slots[0].value}`);
console.log(`write=${slots[1].value}`);
console.log(`total=${total}`);

  1. seed ← 5, slots ← [object Object],[object Object]

    3    value: number;4};56const seed→ 5: number = 5;  //@seed=2, 87const slots→ [object Object],[object Object]: Slot[] = [8    { name: "read", value: 0 },9    { name: "write", value: 0 }10];1112function fillReadSlot(value: number): void {13    slots[0].value = value + 10;14}1516function fillWriteSlot(value: number): void {17    slots[1].value = value * 3;18}1920fillReadSlot(seed5);21fillWriteSlot(seed);

  2. slots[0].value ← 15, value ← 5

    9    { name: "write", value: 0 }10];1112function fillReadSlot(value5: number): void {13    slots[0].value = value→ 5 + 10;14}
    values this step15slots[0].value

  3. fillReadSlot(seed);

    17    slots[1].value = value * 3;18}1920fillReadSlot(seed5);21fillWriteSlot(seed5);

  4. slots[1].value ← 15, value ← 5

    13    slots[0].value = value + 10;14}1516function fillWriteSlot(value5: number): void {17    slots[1].value = value→ 5 * 3;18}
    values this step15slots[1].value

  5. total ← 30, slots[0].value ← 15

    20fillReadSlot(seed);21fillWriteSlot(seed5);2223const total→ 30: number = slots[0].value→ 15 + slots[1].value15;2425console.log(`read=${slots[0].value15}`);26console.log(`write=${slots[1].value15}`);27console.log(`total=${total30}`);
    outputread=15
write=15
total=30

  1. seed ← 2, slots ← [object Object],[object Object]

    3    value: number;4};56const seed→ 2: number = 2;7const slots→ [object Object],[object Object]: Slot[] = [8    { name: "read", value: 0 },9    { name: "write", value: 0 }10];1112function fillReadSlot(value: number): void {13    slots[0].value = value + 10;14}1516function fillWriteSlot(value: number): void {17    slots[1].value = value * 3;18}1920fillReadSlot(seed2);21fillWriteSlot(seed);

  2. slots[0].value ← 12, value ← 2

    9    { name: "write", value: 0 }10];1112function fillReadSlot(value2: number): void {13    slots[0].value = value→ 2 + 10;14}
    values this step12slots[0].value

  3. fillReadSlot(seed);

    17    slots[1].value = value * 3;18}1920fillReadSlot(seed2);21fillWriteSlot(seed2);

  4. slots[1].value ← 6, value ← 2

    13    slots[0].value = value + 10;14}1516function fillWriteSlot(value2: number): void {17    slots[1].value = value→ 2 * 3;18}
    values this step6slots[1].value

  5. total ← 18, slots[0].value ← 12

    20fillReadSlot(seed);21fillWriteSlot(seed2);2223const total→ 18: number = slots[0].value→ 12 + slots[1].value6;2425console.log(`read=${slots[0].value12}`);26console.log(`write=${slots[1].value6}`);27console.log(`total=${total18}`);
    outputread=12
write=6
total=18

  1. seed ← 8, slots ← [object Object],[object Object]

    3    value: number;4};56const seed→ 8: number = 8;7const slots→ [object Object],[object Object]: Slot[] = [8    { name: "read", value: 0 },9    { name: "write", value: 0 }10];1112function fillReadSlot(value: number): void {13    slots[0].value = value + 10;14}1516function fillWriteSlot(value: number): void {17    slots[1].value = value * 3;18}1920fillReadSlot(seed8);21fillWriteSlot(seed);

  2. slots[0].value ← 18, value ← 8

    9    { name: "write", value: 0 }10];1112function fillReadSlot(value8: number): void {13    slots[0].value = value→ 8 + 10;14}
    values this step18slots[0].value

  3. fillReadSlot(seed);

    17    slots[1].value = value * 3;18}1920fillReadSlot(seed8);21fillWriteSlot(seed8);

  4. slots[1].value ← 24, value ← 8

    13    slots[0].value = value + 10;14}1516function fillWriteSlot(value8: number): void {17    slots[1].value = value→ 8 * 3;18}
    values this step24slots[1].value

  5. total ← 42, slots[0].value ← 18

    20fillReadSlot(seed);21fillWriteSlot(seed8);2223const total→ 42: number = slots[0].value→ 18 + slots[1].value24;2425console.log(`read=${slots[0].value18}`);26console.log(`write=${slots[1].value24}`);27console.log(`total=${total42}`);
    outputread=18
write=24
total=42