Skip to content

Commit a6a8552

Browse files
adamjeffriesadamjeffries
committed
Surface manual play error messages.
1 parent c531219 commit a6a8552

File tree

1 file changed

+48
-31
lines changed

1 file changed

+48
-31
lines changed

‎kaggle_environments/static/player.html‎

Lines changed: 48 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@
8181
`;
8282

8383
const Logo = styled(
84-
props => h`
84+
(props) => h`
8585
<a href="https://kaggle.com" target="_blank" className=${props.className}>
8686
<svg width="62px" height="20px" viewBox="0 0 62 24" version="1.1" xmlns="http://www.w3.org/2000/svg">
8787
<g fill="#1EBEFF" fill-rule="nonzero">
@@ -99,7 +99,7 @@
9999
display: inline-flex;
100100
`;
101101

102-
const Header = styled(props => {
102+
const Header = styled((props) => {
103103
const { environment } = useContext(Context);
104104

105105
return h`<div className=${props.className} >
@@ -119,7 +119,7 @@
119119
width: 100%;
120120
`;
121121

122-
const Renderer = styled(props => {
122+
const Renderer = styled((props) => {
123123
const context = useContext(Context);
124124
const { animate, debug, playing, renderer, speed } = context;
125125
const ref = preact.createRef();
@@ -150,6 +150,7 @@
150150
width: ref.current.clientWidth,
151151
});
152152
} catch (error) {
153+
if (debug) console.error(error);
153154
console.log({ ...context, frame, error });
154155
} finally {
155156
if (debug) console.timeEnd("render");
@@ -173,9 +174,10 @@
173174
width: 100%;
174175
`;
175176

176-
const Processing = styled(props => {
177+
const Processing = styled((props) => {
177178
const { processing } = useContext(Context);
178-
return h`<div className=${props.className}>Processing...</div>`;
179+
const text = processing === true ? "Processing..." : processing;
180+
return h`<div className=${props.className}>${text}</div>`;
179181
})`
180182
bottom: 0;
181183
color: #fff;
@@ -187,7 +189,7 @@
187189
width: 100%;
188190
`;
189191

190-
const Viewer = styled(props => {
192+
const Viewer = styled((props) => {
191193
const { processing } = useContext(Context);
192194
return h`<div className=${props.className}>
193195
<${Renderer} />
@@ -207,17 +209,20 @@
207209
width: 100%;
208210
`;
209211

210-
const Legend = styled(props => {
212+
const Legend = styled((props) => {
211213
const { agents, legend } = useContext(Context);
212214

213215
return h`<div className=${props.className}>
214216
<ul>
215217
${agents
216218
.sort((a, b) => a.index - b.index)
217-
.map(a => h`<li key=${a.id} title="id: ${
218-
a.id
219-
}" style="color:${a.color || "#FFF"}">${a.image &&
220-
h`<img src=${a.image} />`}<span>${a.name}</span></li>`
219+
.map(
220+
(a) =>
221+
h`<li key=${a.id} title="id: ${a.id}" style="color:${
222+
a.color || "#FFF"
223+
}">${a.image && h`<img src=${a.image} />`}<span>${
224+
a.name
225+
}</span></li>`
221226
)}
222227
</ul>
223228
</div>`;
@@ -326,13 +331,13 @@
326331
pointer-events: none;
327332
`;
328333

329-
const Controls = styled(props => {
334+
const Controls = styled((props) => {
330335
const { environment, pause, play, playing, setStep, step } = useContext(
331336
Context
332337
);
333338
const value = step + 1;
334339
const onClick = () => (playing ? pause() : play());
335-
const onInput = e => {
340+
const onInput = (e) => {
336341
pause();
337342
setStep(parseInt(e.target.value) - 1);
338343
};
@@ -358,7 +363,7 @@
358363
width: 100%;
359364
`;
360365

361-
const Info = styled(props => {
366+
const Info = styled((props) => {
362367
const {
363368
environment,
364369
playing,
@@ -384,7 +389,7 @@
384389
font-size: 12px;
385390
`;
386391

387-
const Settings = styled(props => {
392+
const Settings = styled((props) => {
388393
const { environment, pause, play, playing, setStep, step } = useContext(
389394
Context
390395
);
@@ -406,7 +411,7 @@
406411
}
407412
`;
408413

409-
const Player = styled(props => {
414+
const Player = styled((props) => {
410415
const context = useContext(Context);
411416
const { agents, controls, header, legend, loading, settings } = context;
412417
return h`
@@ -457,11 +462,11 @@
457462
// Context helpers.
458463
const rerender = (contextRef.current.rerender = () =>
459464
setRenderCount((renderCountRef.current += 1)));
460-
const setStep = (contextRef.current.setStep = newStep => {
465+
const setStep = (contextRef.current.setStep = (newStep) => {
461466
contextRef.current.step = newStep;
462467
rerender();
463468
});
464-
const setPlaying = (contextRef.current.setPlaying = playing => {
469+
const setPlaying = (contextRef.current.setPlaying = (playing) => {
465470
contextRef.current.playing = playing;
466471
rerender();
467472
});
@@ -481,7 +486,7 @@
481486
}
482487
};
483488

484-
const play = (contextRef.current.play = continuing => {
489+
const play = (contextRef.current.play = (continuing) => {
485490
const context = contextRef.current;
486491
if (context.playing && !continuing) return;
487492
if (!context.playing) setPlaying(true);
@@ -494,7 +499,7 @@
494499
setTimeout(playNext, context.speed);
495500
});
496501

497-
const updateContext = o => {
502+
const updateContext = (o) => {
498503
const context = contextRef.current;
499504
Object.assign(context, o, {
500505
environment: { ...context.environment, ...(o.environment || {}) },
@@ -514,7 +519,7 @@
514519
// Listen for messages received to update the context.
515520
window.addEventListener(
516521
"message",
517-
event => {
522+
(event) => {
518523
// Ensure the environment names match before updating.
519524
try {
520525
if (
@@ -529,11 +534,22 @@
529534
);
530535
// Listen for keyboard commands.
531536
window.addEventListener(
532-
"keyup",
533-
event => {
534-
const { playing, step, environment } = contextRef.current;
537+
"keydown",
538+
(event) => {
539+
const {
540+
interactive,
541+
isInteractive,
542+
playing,
543+
step,
544+
environment,
545+
} = contextRef.current;
535546
const key = event.keyCode;
536-
if (key !== 32 && key !== 37 && key !== 39) return;
547+
if (
548+
interactive ||
549+
isInteractive() ||
550+
(key !== 32 && key !== 37 && key !== 39)
551+
)
552+
return;
537553

538554
if (key === 32) {
539555
playing ? pause() : play();
@@ -562,12 +578,12 @@
562578
contextRef.current.update = updateContext;
563579

564580
// Ability to communicate with ipython.
565-
const execute = (contextRef.current.execute = source =>
581+
const execute = (contextRef.current.execute = (source) =>
566582
new Promise((resolve, reject) => {
567583
try {
568584
window.parent.IPython.notebook.kernel.execute(source, {
569585
iopub: {
570-
output: resp => {
586+
output: (resp) => {
571587
const type = resp.msg_type;
572588
if (type === "stream") return resolve(resp.content.text);
573589
if (type === "error") return reject(new Error(resp.evalue));
@@ -581,7 +597,7 @@
581597
}));
582598

583599
// Ability to return an action from an interactive session.
584-
contextRef.current.act = action => {
600+
contextRef.current.act = (action) => {
585601
const id = contextRef.current.environment.id;
586602
updateContext({ processing: true });
587603
execute(`
@@ -592,18 +608,19 @@
592608
env, trainer = interactives["${id}"]
593609
trainer.step(action)
594610
print(json.dumps(env.steps))`)
595-
.then(resp => {
611+
.then((resp) => {
596612
try {
597613
updateContext({
598614
processing: false,
599615
environment: { steps: JSON.parse(resp) },
600616
});
601617
play();
602618
} catch (e) {
619+
updateContext({ processing: resp.split("\n")[0] });
603620
console.error(resp, e);
604621
}
605622
})
606-
.catch(e => console.error(e));
623+
.catch((e) => console.error(e));
607624
};
608625

609626
// Check if currently interactive.
@@ -614,7 +631,7 @@
614631
context.interactive &&
615632
!context.processing &&
616633
context.step === steps.length - 1 &&
617-
steps[context.step].some(s => s.status === "ACTIVE")
634+
steps[context.step].some((s) => s.status === "ACTIVE")
618635
);
619636
};
620637

0 commit comments

Comments
 (0)