Tom/top text validation

tb_plugin/fe/src/components/Kernel.tsx

@@ -20,7 +20,7 @@ import { TableChart } from './charts/TableChart'
 import * as api from '../api'
 import { Graph } from '../api'
 import { DataLoading } from './DataLoading'
-import { UseTop, useTopN } from '../utils/top'
+import { topIsValid, UseTop, useTopN } from '../utils/top'
 import RadioGroup, { RadioGroupProps } from '@material-ui/core/RadioGroup'
 import Radio from '@material-ui/core/Radio'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
@@ -79,7 +79,7 @@ export const Kernel: React.FC<IProps> = (props) => {
   const [searchOpName, setSearchOpName] = React.useState('')
   const [sortColumn, setSortColumn] = React.useState(2)
 
-  const [top, actualTop, useTop, setTop, setUseTop] = useTopN({
+  const [topText, actualTop, useTop, setTopText, setUseTop] = useTopN({
     defaultUseTop: UseTop.Use,
     defaultTop: 10
   })
@@ -90,7 +90,7 @@ export const Kernel: React.FC<IProps> = (props) => {
 
   React.useEffect(() => {
     if (kernelGraph) {
-      setTop(Math.min(kernelGraph.rows?.length, 10))
+      setTopText(String(Math.min(kernelGraph.rows?.length, 10)))
     }
   }, [kernelGraph])
 
@@ -131,7 +131,7 @@ export const Kernel: React.FC<IProps> = (props) => {
   }
 
   const onTopChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTop(Number(event.target.value))
+    setTopText(event.target.value)
   }
 
   const inputProps: StandardTextFieldProps['inputProps'] = {
@@ -170,8 +170,9 @@ export const Kernel: React.FC<IProps> = (props) => {
                     classes={{ root: classes.inputWidth }}
                     inputProps={inputProps}
                     type="number"
-                    value={top}
+                    value={topText}
                     onChange={onTopChanged}
+                    error={!topIsValid(topText)}
                   />
                 </Grid>
               )}

tb_plugin/fe/src/components/Operator.tsx

@@ -26,7 +26,7 @@ import { DataLoading } from './DataLoading'
 import RadioGroup, { RadioGroupProps } from '@material-ui/core/RadioGroup'
 import Radio from '@material-ui/core/Radio'
 import FormControlLabel from '@material-ui/core/FormControlLabel'
-import { UseTop, useTopN } from '../utils/top'
+import { topIsValid, UseTop, useTopN } from '../utils/top'
 import { useSearch } from '../utils/search'
 import {
   DeviceSelfTimeTooltip,
@@ -87,7 +87,7 @@ export const Operator: React.FC<IProps> = (props) => {
   )
   const [groupBy, setGroupBy] = React.useState(GroupBy.Operation)
   const [searchOperatorName, setSearchOperatorName] = React.useState('')
-  const [top, actualTop, useTop, setTop, setUseTop] = useTopN({
+  const [topText, actualTop, useTop, setTopText, setUseTop] = useTopN({
     defaultUseTop: UseTop.Use,
     defaultTop: 10
   })
@@ -101,7 +101,7 @@ export const Operator: React.FC<IProps> = (props) => {
         operatorGraph.host_self_time.rows?.length ?? 0,
         operatorGraph.host_total_time.rows?.length ?? 0
       ]
-      setTop(Math.min(Math.max(...counts), 10))
+      setTopText(String(Math.min(Math.max(...counts), 10)))
     }
   }, [operatorGraph])
 
@@ -141,7 +141,7 @@ export const Operator: React.FC<IProps> = (props) => {
   }
 
   const onTopChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
-    setTop(Number(event.target.value))
+    setTopText(event.target.value)
   }
 
   const inputProps: StandardTextFieldProps['inputProps'] = {
@@ -238,8 +238,9 @@ export const Operator: React.FC<IProps> = (props) => {
                     classes={{ root: classes.inputWidth }}
                     inputProps={inputProps}
                     type="number"
-                    value={top}
+                    value={topText}
                     onChange={onTopChanged}
+                    error={!topIsValid(topText)}
                   />
                 </Grid>
               )}

tb_plugin/fe/src/utils/top.ts

@@ -20,8 +20,8 @@ interface IOptions {
 export function useTopN(options?: IOptions) {
   options ??= {}
 
-  const [top, setTop] = React.useState(options.defaultTop ?? 15)
-  const [actualTop, setActualTop] = React.useState<number | undefined>(top)
+  const [topText, setTopText] = React.useState(String(options.defaultTop ?? 15))
+  const [actualTop, setActualTop] = React.useState<number | undefined>(Number(topText))
   const [useTop, setUseTop] = React.useState(
     options.defaultUseTop ?? UseTop.NotUse
   )
@@ -30,8 +30,13 @@ export function useTopN(options?: IOptions) {
     ? React.useCallback(debounce(setActualTop, options.wait ?? 500), [])
     : setActualTop
   React.useEffect(() => {
-    setActualDebounce(useTop === UseTop.Use && top > 0 ? top : undefined)
-  }, [top, useTop])
+    setActualDebounce(useTop === UseTop.Use && topIsValid(topText) ? Number(topText): actualTop)
+  }, [topText, useTop])
 
-  return [top, actualTop, useTop, setTop, setUseTop] as const
+  return [topText, actualTop, useTop, setTopText, setUseTop] as const
+}
+
+export function topIsValid(topText: string) {
+  const top = Number(topText)
+  return !Number.isNaN(top) && top > 0 && Number.isInteger(top)
 }