From dc7f314298bdf77ebaf3f91367d504cee3f70a5d Mon Sep 17 00:00:00 2001
From: Michael Peters <michael@styx>
Date: Sun, 4 Aug 2024 13:37:15 -0700
Subject: [PATCH] add key

---
 src/components/snake/index.tsx |  24 ++++++++++++++++++------
 src/favicon.png                | Bin 599 -> 1023 bytes
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/components/snake/index.tsx b/src/components/snake/index.tsx
index 899461f..313ec95 100644
--- a/src/components/snake/index.tsx
+++ b/src/components/snake/index.tsx
@@ -13,9 +13,9 @@ function tableHead(...cols: (string | number)[]) {
     const elements = cols.map((col, idx) => <th key={idx}>{col}</th>);
     return <tr>{elements}</tr>;
 }
-function tableRow(...cols: (string | number)[]) {
+function tableRow(key: number, ...cols: (string | number)[]) {
     const elements = cols.map((col, idx) => <td key={idx}>{col}</td>);
-    return <tr>{elements}</tr>;
+    return <tr key={key}>{elements}</tr>;
 }
 
 const SnakePage: FC = () => {
@@ -46,7 +46,7 @@ const SnakePage: FC = () => {
 
     const labSnapsTRs = useMemo(
         () =>
-            snaps.map(snap => {
+            snaps.map((snap, idx) => {
                 const labsRanked = snap.labs.sort((a, b) => a.snakeLength - b.snakeLength);
                 const avgLen = labsRanked.reduce((prev, curr) => prev + curr.snakeLength, 0) / labsRanked.length;
 
@@ -59,7 +59,19 @@ const SnakePage: FC = () => {
                 const q95Len = labsRanked[Math.floor(labsRanked.length * 0.95)]!.snakeLength;
                 const maxLen = Math.max(...labsRanked.map(lab => lab.snakeLength));
 
-                return tableRow(snap.iteration, avgLen, minLen, q20Len, q40Len, q60Len, q80Len, q90Len, q95Len, maxLen);
+                return tableRow(
+                    idx,
+                    snap.iteration,
+                    avgLen,
+                    minLen,
+                    q20Len,
+                    q40Len,
+                    q60Len,
+                    q80Len,
+                    q90Len,
+                    q95Len,
+                    maxLen,
+                );
             }),
         [snaps],
     );
@@ -70,8 +82,8 @@ const SnakePage: FC = () => {
                 <canvas id="board" ref={boardRef} width={BOARD_SIZE} height={BOARD_SIZE} />
                 <div className="table-container">
                     <table id="snaps">
-                        {tableHead('Itr', 'Avg', 'Min', '20%', '40%', '60%', '80%', '90%', '95%', 'Max')}
-                        {labSnapsTRs}
+                        <thead>{tableHead('Itr', 'Avg', 'Min', '20%', '40%', '60%', '80%', '90%', '95%', 'Max')}</thead>
+                        <tbody>{labSnapsTRs}</tbody>
                     </table>
                 </div>
             </div>
diff --git a/src/favicon.png b/src/favicon.png
index f541a38db945d9b5526f87535e049041f6313a12..96470a9478d16219028b2d6ee5d1ed61687ed5f1 100644
GIT binary patch
literal 1023
zcmeAS@N?(olHy`uVBq!ia0vp^(?FPm4M^HB7CvHNU~JBGb`J1#c2+1T%1_J8No8Qr
zm{>c}*5j~)%+dJEUfm%wXA~YySZH<A)m0{2v@1aI3fEez88N?DeWNCch`S%$`ryIw
zq^k#yMuxM8I|}?^C@d=oDw!zsf4WH2k&1#l{pH`~%HK0A3{Bl7>cy}tarVrRpi@u7
zmwwPz;&5zX2}}&D^_zD2gKYeFjt^h;&Tam4{;wt5mZqZ(4K8yMN-wM3Q<!&i%j-Gc
zJ6*%VOdb_K;+(AK@#jS8)yL-NRHw7f)0}nljLk+5ovBq3Zxh4JN*`rDnz2lJivAOu
zYZm#1*H-gh+o@ikxFunYPVwAl8bJ|9gi>C4xH5}|Br5x@cI;~9d8=OgM|oYm+H|jV
zToRUI0nL0zzc&9r_&#s#qbp0Mi}*6t>i2y%WNRsJEW2E|uU~d~EfdT9M(xF~*KcjO
z>3?Z<tZo?#Pad=Q^;qA#%zEVw50~#s(po37L{p^uz;DUgU^$6htiP`Bxo7p;qLyLP
zmC#>o78WeWyr=Aa_xYVie*XV?FTZ?e&YxbiRBBbye_*VzC3(BM0BIoj>AbrhNO2Z;
zL>4nJ=qZCRW5rVYGN2%PiKnkC`wI>h5hVparKY(+A;}Wgh!W@g+}zZ>5(ej@)Wnk1
z6ovB4k_-iRPv3y>Mm}+1Y~S#7aSW-r_4dv}FP1=&hKGxJbl5iL7-~wKF<X67{Kk?8
zO=q(NYd97^Go0~__1dPRd3UlluQ{o3eUbixcf7CXaNeKJ&S(5*4!8N4TR*>^3s>1O
zYff5E?=~Cu|M_>-9U?fm6B{=Oh#g`|RMcr<J>&!wXlVrs0L2w`fZ|RO3OYamsKOW1
zpJl!`O#P6aIXUj9Lh7p;3*VW){}p5;Kh$6$$^f`cg1$4K{`vYe!@zH*wfFDSzI~U@
z<?6_^B3lMmi_=vKi%v?_?5><-RBm{x^6B4*Cwua9Zbn#eIU;%M;?iU4KW=_|vhUT-
z>lbf&J>S=(zk1&7-25Cg+g>P}zuzD6wYO^RzWXa~BN+e+7w;XF?@!z=nPL3n#<4?z
z97qo8_S;#huB5~!UmkjXYA?4mx4R;8SpIwTY;MPj{ejyz7KkVzg=a!%{_Qzhsh#Yz
Re*hB#gQu&X%Q~loCIBStsE_~v

delta 529
zcmV+s0`C3)2iF9DiBL{Q4GJ0x0000DNk~Le0000G0000G2nGNE03Y-JVE_ODglR)V
zP)S2WAaHVTW@&6?001bFeUUv#!%!53PgA8TRR=qWbjVPh?4lx$T7@E12(?114kj=C
zgC-40ii@M*T5#}ZvFhOBtgC~oAPD||I6F8gx=4xlC50A$F<yAQkMr(1ymucUG%8H9
zx@G}Qx6O1iA!c){V(1kCL?NIT12VIWIY~;vx4!PFo9Zskv;6!1tbR3bF(4ok&oaZb
zi8qL+H*JISK5>MVWR>`wc-*855<hZX@%W8%(Pe>WM$Allo;X4*7CTt!U{*3U;wj>o
zs_B$3WIa}YId5^+DmB)+Cx2l$udgg~omLb{EMf@~L@21Cj0$YTY1c`ykf!s5kAKAV
zOXO0>RR$x+0;<p;yMFLL_&r;zFgf8Rg%d#ci{pHZ0-;@?S$CZ8W5;Qp0KsSAN^kqC
z4PfSz^m<#19RY*ez{Pc2Q}%$%9bov$kWJZ@g0zG*LIHR`qi@OqL$^TRnm4!BIZhvd
z49zNa0~{OzV@1kd_jz|u=iL77Y0d8kB-3(-KLXeOldu6X2>~1e3k{F0gTRyO0VhQO
zFG)l}R5;6H6wvee&p-iSVxSPPz!)DcZNZQf(DNZEN3jcrfdP!8(Ks57)Nla+c!dzX
TY;DS)00000NkvXXu0mjf;34C<