fix: address chart review feedback

Author: XGHeaven

web/src/components/case-config.tsx

@@ -280,8 +280,12 @@ function useMediaQuery(query: string) {
     const media = matchMedia(query)
     const onChange = () => setMatches(media.matches)
     onChange()
-    media.addEventListener('change', onChange)
-    return () => media.removeEventListener('change', onChange)
+    if (media.addEventListener) {
+      media.addEventListener('change', onChange)
+      return () => media.removeEventListener('change', onChange)
+    }
+    media.addListener(onChange)
+    return () => media.removeListener(onChange)
   }, [query])
 
   return matches

web/src/components/case-runner.tsx

@@ -1,11 +1,17 @@
-import React, { useContext, useRef, useState } from 'react'
+import React, { useContext, useEffect, useRef, useState } from 'react'
 import { Button } from '@blueprintjs/core'
 import { ChannelsContext, ConfigContext, I18nContext } from '../context'
 import { css } from '@emotion/react'
 import { SpeedIndicator } from './speed-indicator'
 import { RateCurve } from './rate-curve'
 import { Subscription, zip } from 'rxjs'
 
+const MAX_RATE_POINTS = 60
+
+function appendRate(rates: number[], rate: number) {
+  return [...rates.slice(-(MAX_RATE_POINTS - 1)), rate]
+}
+
 export function CaseRunner(props: { name: 'upload' | 'download'; title: string }) {
   const createChannels = useContext(ChannelsContext)
   const t = useContext(I18nContext)
@@ -14,18 +20,34 @@ export function CaseRunner(props: { name: 'upload' | 'download'; title: string }
   const [rates, setRates] = useState<number[]>([])
   const [running, setRunning] = useState(false)
   const sub = useRef<Subscription | null>(null)
+  const runIdRef = useRef(0)
+
+  useEffect(
+    () => () => {
+      runIdRef.current += 1
+      sub.current?.unsubscribe()
+      sub.current = null
+    },
+    [],
+  )
 
   const onClick = async () => {
     if (running) {
+      runIdRef.current += 1
       sub.current?.unsubscribe()
       sub.current = null
       setRunning(false)
       return
     }
+    const runId = runIdRef.current + 1
+    runIdRef.current = runId
     setRate(-1)
     setRates([])
     setRunning(true)
     const channels = await createChannels()
+    if (runIdRef.current !== runId) {
+      return
+    }
     sub.current = zip(
       ...channels.map((channel) =>
         channel.observe(props.name, {
@@ -37,18 +59,25 @@ export function CaseRunner(props: { name: 'upload' | 'download'; title: string }
       ),
     ).subscribe({
       next(rate) {
+        if (runIdRef.current !== runId) {
+          return
+        }
         const nextRate = rate.reduce((a, b) => a + b, 0)
         setRate(nextRate)
-        setRates((prevRates) => [...prevRates, nextRate])
+        setRates((prevRates) => appendRate(prevRates, nextRate))
       },
       error(e) {
         console.error(e)
-        setRunning(false)
-        sub.current = null
+        if (runIdRef.current === runId) {
+          setRunning(false)
+          sub.current = null
+        }
       },
       complete() {
-        setRunning(false)
-        sub.current = null
+        if (runIdRef.current === runId) {
+          setRunning(false)
+          sub.current = null
+        }
       },
     })
   }

web/src/components/rate-curve.tsx

@@ -46,7 +46,11 @@ export const RateCurve = memo(function RateCurve({
   }, [maxRate, points])
   const currentRate = points[points.length - 1]
   const strokeColor = running ? '#2f8f46' : '#137cbd'
-  const gradientId = `rate-curve-${id.replace(/:/g, '')}`
+  const sanitizedId = id.replace(/:/g, '')
+  const gradientId = `rate-curve-${sanitizedId}`
+  const titleId = `rate-curve-title-${sanitizedId}`
+  const currentLabel = points.length ? formatter(currentRate) : '--'
+  const peakLabel = maxRate > 0 ? formatter(maxRate) : '--'
 
   return (
     <div
@@ -61,13 +65,17 @@ export const RateCurve = memo(function RateCurve({
       <svg
         viewBox={`0 0 ${WIDTH} ${HEIGHT}`}
         role='img'
+        aria-labelledby={titleId}
         css={css`
           display: block;
           width: 100%;
           height: 116px;
           color: currentColor;
         `}
       >
+        <title id={titleId}>
+          {t('chart.title')}: {currentLabel}, {t('chart.peak')} {peakLabel}
+        </title>
         <defs>
           <linearGradient id={gradientId} x1='0' x2='0' y1='0' y2='1'>
             <stop offset='0%' stopColor={strokeColor} stopOpacity='0.28' />
@@ -140,15 +148,15 @@ export const RateCurve = memo(function RateCurve({
             font-weight: 600;
           `}
         >
-          {points.length ? formatter(currentRate) : '--'}
+          {currentLabel}
         </span>
         <span
           css={css`
             min-width: 0;
             opacity: 0.68;
           `}
         >
-          {t('chart.peak')} {maxRate > 0 ? formatter(maxRate) : '--'}
+          {t('chart.peak')} {peakLabel}
         </span>
       </div>
     </div>

web/src/components/run-case-once.tsx

@@ -1,7 +1,7 @@
 import { SpeedIndicator } from './speed-indicator'
 import { RateCurve } from './rate-curve'
 import styled from '@emotion/styled'
-import { useState, useContext, useRef } from 'react'
+import { useState, useContext, useEffect, useRef } from 'react'
 import { useRates } from '../hooks'
 import { ChannelsContext, ConfigContext, I18nContext } from '../context'
 import { zip, interval, Observable, Subscription } from 'rxjs'
@@ -40,6 +40,11 @@ type ChartItem = {
 }
 
 const chartKeys: ChartKey[] = ['ping', 'download', 'upload']
+const MAX_RATE_POINTS = 60
+
+function appendRate(rates: number[], rate: number) {
+  return [...rates.slice(-(MAX_RATE_POINTS - 1)), rate]
+}
 
 enum RunningStep {
   NONE = 1,
@@ -64,6 +69,15 @@ export function RunCaseOnce() {
   const t = useContext(I18nContext)
   const { duration, parallel, packCount, unit } = useContext(ConfigContext)
 
+  useEffect(
+    () => () => {
+      runIdRef.current += 1
+      sub.current?.unsubscribe()
+      sub.current = null
+    },
+    [],
+  )
+
   const waitObservable = <T,>(observer: Observable<T>, onNext: (value: T) => void, runId: number) =>
     new Promise<void>((resolve, reject) => {
       let settled = false
@@ -116,7 +130,7 @@ export function RunCaseOnce() {
       ),
       (v) => {
         pushTTL(v)
-        setPingRates((prevRates) => [...prevRates, v])
+        setPingRates((prevRates) => appendRate(prevRates, v))
       },
       runId,
     )
@@ -144,7 +158,7 @@ export function RunCaseOnce() {
       (v) => {
         const nextRate = v.reduce((a, b) => a + b, 0)
         setDlRate(nextRate)
-        setDlRates((prevRates) => [...prevRates, nextRate])
+        setDlRates((prevRates) => appendRate(prevRates, nextRate))
       },
       runId,
     )
@@ -169,7 +183,7 @@ export function RunCaseOnce() {
       (v) => {
         const nextRate = v.reduce((a, b) => a + b, 0)
         setUlRate(nextRate)
-        setUlRates((prevRates) => [...prevRates, nextRate])
+        setUlRates((prevRates) => appendRate(prevRates, nextRate))
       },
       runId,
     )

web/src/i18n.ts

@@ -10,6 +10,7 @@ export const messages = {
     'action.restart': 'Restart',
     'action.previous': 'Previous item',
     'action.next': 'Next item',
+    'chart.title': 'Rate chart',
     'chart.peak': 'Peak',
     'state.waiting': 'Waiting...',
     'state.downloading': 'Downloading',
@@ -47,6 +48,7 @@ export const messages = {
     'action.restart': '重新开始',
     'action.previous': '上一项',
     'action.next': '下一项',
+    'chart.title': '速率图表',
     'chart.peak': '峰值',
     'state.waiting': '等待中...',
     'state.downloading': '下载中',