refactor overlong strings

src/js/components/Beacon/BeaconQueryUi.tsx

@@ -26,13 +26,17 @@ const STARTER_FILTER = { index: 1, active: true };
 
 // complexity of instructions suggests the form isn't intuitive enough
 const VARIANTS_INSTRUCTIONS_TITLE = 'Variant search';
-const VARIANTS_INSTRUCTIONS_LINE1 =
-  'To search for all variants inside a range: fill both "Variant start" and "Variant end", all variants inside the range will be returned. You can optionally filter by reference or alternate bases.';
-const VARIANTS_INSTRUCTIONS_LINE2 =
-  'To search for a variant at a particular position, either set "Variant end" to the same value in "Variant start", or fill in values for both reference and alternate bases.';
+const VARIANTS_INSTRUCTIONS_LINE1a =
+  'To search for all variants inside a range: fill both "Variant start" and "Variant end",';
+const VARIANTS_INSTRUCTIONS_LINE1b =
+  'all variants inside the range will be returned. You can optionally filter by reference or alternate bases.';
+
+const VARIANTS_INSTRUCTIONS_LINE2a =
+  'To search for a variant at a particular position, either set "Variant end" to the same value in "Variant start",';
+const VARIANTS_INSTRUCTIONS_LINE2b = 'or fill in values for both reference and alternate bases.';
 const VARIANTS_INSTRUCTIONS_LINE3 = '"Chromosome", "Variant start" and "Assembly ID" are always required.';
-const VARIANTS_INSTRUCTIONS_LINE4 = 'Coordinates are one-based.';
-const VARIANTS_INSTRUCTIONS_LINE5 = 'Leave this form blank to search by metadata only.';
+const VARIANTS_INSTRUCTIONS_LINE4a = 'Coordinates are one-based.';
+const VARIANTS_INSTRUCTIONS_LINE4b = 'Leave this form blank to search by metadata only.';
 const METADATA_INSTRUCTIONS = 'Search over clinical or phenotypic properties.';
 const VARIANTS_FORM_ERROR_MESSAGE =
   'variants form should include either an end position or both reference and alternate bases';
@@ -221,10 +225,10 @@ const BeaconQueryUi = () => {
       <Title level={4} style={{ color: 'white', marginTop: '10px' }}>
         {VARIANTS_INSTRUCTIONS_TITLE}
       </Title>
-      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE1)}</ToolTipText>
-      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE2)}</ToolTipText>
+      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE1a) + ' ' + td(VARIANTS_INSTRUCTIONS_LINE1b)}</ToolTipText>
+      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE2a) + ' ' + td(VARIANTS_INSTRUCTIONS_LINE2b)}</ToolTipText>
       <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE3)}</ToolTipText>
-      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE4) + ' ' + td(VARIANTS_INSTRUCTIONS_LINE5)}</ToolTipText>
+      <ToolTipText>{td(VARIANTS_INSTRUCTIONS_LINE4a) + ' ' + td(VARIANTS_INSTRUCTIONS_LINE4b)}</ToolTipText>
     </Space>
   );