From 08b182b1526e7fde989c7c5390f144d40fb814c9 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 14:54:30 -0500
Subject: [PATCH 1/2] chore: address confusing UX for network
 chromosome/assembly

---
 src/js/components/Beacon/BeaconCommon/VariantsForm.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
index 4a05a14d..3184d81d 100644
--- a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
+++ b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
@@ -92,7 +92,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 +130,7 @@ const VariantsForm = ({ isNetworkQuery, beaconAssemblyIds }: VariantsFormProps)
         <Col span={8}>
           <VariantInput
             field={formFields.referenceName}
-            disabled={variantsError || !currentAssemblyID}
+            disabled={variantsError || (!isNetworkQuery && !currentAssemblyID)}
             mode={assemblySelect ? { type: 'select', options: availableContigs } : { type: 'input' }}
           />
         </Col>

From 688e7496fc1892942f8b7783b0e353a718f4a0f3 Mon Sep 17 00:00:00 2001
From: David Lougheed <david.lougheed@gmail.com>
Date: Tue, 26 Nov 2024 15:14:56 -0500
Subject: [PATCH 2/2] chore(beacon): don't clear chrom if availableContigs
 stays blank

---
 .../Beacon/BeaconCommon/VariantsForm.tsx      | 31 ++++++++++++-------
 1 file changed, 19 insertions(+), 12 deletions(-)

diff --git a/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx b/src/js/components/Beacon/BeaconCommon/VariantsForm.tsx
index 3184d81d..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<ContigOptionType[]>(
-    () =>
-      !isNetworkQuery && currentAssemblyID && genomesByID[currentAssemblyID]
-        ? genomesByID[currentAssemblyID].contigs
-            .map(contigToOption)
-            .sort(contigOptionSort)
-            .filter(filterOutHumanLikeExtraContigs)
-        : [],
-    [isNetworkQuery, currentAssemblyID, genomesByID]
-  );
+  const [availableContigs, setAvailableContigs] = useState<ContigOptionType[]>([]);
+
+  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(() => {