diff --git a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx index 4a05a14d..fad72f65 100644 --- a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx +++ b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx @@ -1,4 +1,4 @@ -import { type CSSProperties, useEffect, useMemo } from 'react'; +import { type CSSProperties, useEffect, useState } from 'react'; import { Col, Form, Row } from 'antd'; import type { DefaultOptionType } from 'antd/es/select/index'; @@ -70,17 +70,24 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps) const form = Form.useFormInstance(); const currentAssemblyID = Form.useWatch('Assembly ID', form); - // Right now, we cannot figure out the contig options for the network, so we fall back to a normal input box. - const availableContigs = useMemo( - () => - !isNetworkQuery && currentAssemblyID && genomesByID[currentAssemblyID] - ? genomesByID[currentAssemblyID].contigs - .map(contigToOption) - .sort(contigOptionSort) - .filter(filterOutHumanLikeExtraContigs) - : [], - [isNetworkQuery, currentAssemblyID, genomesByID] - ); + const [availableContigs, setAvailableContigs] = useState([]); + + useEffect(() => { + // Right now, we cannot figure out the contig options for the network, so we fall back to a normal input box. + if (!isNetworkQuery && currentAssemblyID && genomesByID[currentAssemblyID]) { + setAvailableContigs( + genomesByID[currentAssemblyID].contigs + .map(contigToOption) + .sort(contigOptionSort) + .filter(filterOutHumanLikeExtraContigs) + ); + } else { + // Keep existing memory address for existing empty array if availableContigs was already empty, to avoid + // re-render/clearing effect. + setAvailableContigs((ac) => (ac.length ? [] : ac)); + } + }, [isNetworkQuery, currentAssemblyID, genomesByID]); + const assemblySelect = !!availableContigs.length; useEffect(() => { @@ -92,7 +99,7 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps) const formFields = { referenceName: { name: 'Chromosome', - placeholder: !currentAssemblyID ? t('beacon.select_asm') : '', + placeholder: !isNetworkQuery && !currentAssemblyID ? t('beacon.select_asm') : '', initialValue: '', }, start: { @@ -130,7 +137,7 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps)