Revise hop length buckets. Closes #240.

frontend/src/test/rawPacketStats.test.ts

@@ -147,7 +147,9 @@ describe('buildRawPacketStatsSnapshot', () => {
       '2-5',
       '6-10',
       '11-15',
-      '16+',
+      '16-20',
+      '21-31',
+      '32+',
     ]);
     expect(stats.hopProfile).toEqual(
       expect.arrayContaining([
@@ -156,7 +158,9 @@ describe('buildRawPacketStatsSnapshot', () => {
         expect.objectContaining({ label: '2-5', count: 1 }),
         expect.objectContaining({ label: '6-10', count: 0 }),
         expect.objectContaining({ label: '11-15', count: 0 }),
-        expect.objectContaining({ label: '16+', count: 0 }),
+        expect.objectContaining({ label: '16-20', count: 0 }),
+        expect.objectContaining({ label: '21-31', count: 0 }),
+        expect.objectContaining({ label: '32+', count: 0 }),
       ])
     );
     expect(stats.hopByteWidthProfile).toEqual(

frontend/src/utils/rawPacketStats.ts

@@ -322,7 +322,13 @@ function getHopProfileBucket(pathTokenCount: number): string {
   if (pathTokenCount <= 15) {
     return '11-15';
   }
-  return '16+';
+  if (pathTokenCount <= 20) {
+    return '16-20';
+  }
+  if (pathTokenCount <= 31) {
+    return '21-31';
+  }
+  return '32+';
 }
 
 export function buildRawPacketStatsSnapshot(
@@ -354,7 +360,9 @@ export function buildRawPacketStatsSnapshot(
     ['2-5', 0],
     ['6-10', 0],
     ['11-15', 0],
-    ['16+', 0],
+    ['16-20', 0],
+    ['21-31', 0],
+    ['32+', 0],
   ]);
   const hopByteWidthCounts = new Map<string, number>([
     ['No path', 0],