diff --git a/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx index 24200c5fa0..96bde0b704 100644 --- a/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx +++ b/aim/web/ui/src/pages/ImagesExplore/components/SelectForm/SelectForm.tsx @@ -47,6 +47,10 @@ function SelectForm({ const autocompleteRef: any = React.useRef>(null); const advancedAutocompleteRef: any = React.useRef>(null); + + // Guard against the user opening the selector before options are loaded (slow network). + const isSelectDataReady = Array.isArray(selectFormData?.options); + const isImagesSelectorDisabled = isDisabled || !isSelectDataReady; React.useEffect(() => { return () => { searchMetricsRef.current?.abort(); @@ -115,6 +119,9 @@ function SelectForm({ } function handleClick(event: React.ChangeEvent) { + if (isImagesSelectorDisabled) { + return; + } setAnchorEl(event.currentTarget); } @@ -167,7 +174,7 @@ function SelectForm({ - +
+ +
+ >(null); const advancedAutocompleteRef: any = React.useRef>(null); + + // On slow networks it's possible for the user to click the selector before + // the explorer context/options are loaded. Guard against that state. + const isSelectDataReady = Array.isArray(selectFormData?.options); + const isMetricSelectorDisabled = isDisabled || !isSelectDataReady; React.useEffect(() => { return () => { searchRef.current?.abort(); @@ -106,6 +111,9 @@ function SelectForm({ } function handleClick(event: React.ChangeEvent) { + if (isMetricSelectorDisabled) { + return; + } setAnchorEl(event.currentTarget); } @@ -156,9 +164,9 @@ function SelectForm({
- +
+ +
+ diff --git a/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx b/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx index 9b2bbcf16a..7ab52315de 100644 --- a/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx +++ b/aim/web/ui/src/pages/Params/components/SelectForm/SelectForm.tsx @@ -1,7 +1,14 @@ import React from 'react'; import classNames from 'classnames'; -import { Box, Checkbox, Divider, InputBase, Popper } from '@material-ui/core'; +import { + Box, + Checkbox, + Divider, + InputBase, + Popper, + Tooltip, +} from '@material-ui/core'; import Autocomplete from '@material-ui/lab/Autocomplete'; import { CheckBox as CheckBoxIcon, @@ -34,6 +41,10 @@ function SelectForm({ const [searchValue, setSearchValue] = React.useState(''); const searchRef = React.useRef(null); const autocompleteRef: any = React.useRef>(null); + + // Guard against the user opening the selector before options are loaded (slow network). + const isSelectDataReady = Array.isArray(selectFormData?.options); + const isParamsSelectorDisabled = isDisabled || !isSelectDataReady; React.useEffect(() => { return () => { searchRef.current?.abort(); @@ -86,6 +97,9 @@ function SelectForm({ } function handleClick(event: React.ChangeEvent) { + if (isParamsSelectorDisabled) { + return; + } setAnchorEl(event.currentTarget); } @@ -131,16 +145,24 @@ function SelectForm({ > - +
+ +
+