hoverAt(lane, event)}
onpointerleave={leave}
onclick={(event) => {
const step = callAt(lane, event);
hovered = null;
choose(!step || selected === step.id ? null : step);
}}
ondblclick={(event) => {
const step = callAt(lane, event);
if (step) focusOn(step.start, step.end);
}}
>
{#each lane.steps as step (step.id)}
{/each}
{#if clusters.get(lane.id)?.length}
{#each clusters.get(lane.id) ?? [] as cluster (cluster.key)}
{@const one = cluster.steps.length === 1 ? cluster.steps[0] : null}
{/each}
{/if}
{#if jobs.get(lane.id)?.length}
{@const placed = jobs.get(lane.id) ?? []}
{@const tracks = Math.max(...placed.map((item) => item.track)) + 1}
1}
class:open={tracks > 1 && unfolded === lane.id}
style:--tracks={tracks}
role="group"
aria-label="jobs"
onpointerenter={() => (unfolded = lane.id)}
onpointerleave={() => unfolded === lane.id && (unfolded = null)}
onfocusin={() => (unfolded = lane.id)}
onfocusout={(event) => !(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node) && unfolded === lane.id && (unfolded = null)}
>
{#each placed as { job, track } (job.id)}
{/each}
{/if}