blast single column layout for smaller screen (#744)

src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequences.scss

@@ -8,16 +8,20 @@
   display: grid;
   grid-template-columns: auto auto 1fr;
   column-gap: 52px;
-  width: 860px;
+  width: 862px;
+  margin-left: -1px; //increasing the width by 2px and adding a left margin so that we dont see the borders shadows from the box below when scrolling
   align-items: center;
-  padding-left: 28px;
-  padding-bottom: 12px;
+  padding: 20px 0 12px 28px;
   position: sticky;
   top: 0px;
   z-index: 1;
   background-color: $white;
 }
 
+.smallScreenHeader {
+  top: 49px;
+}
+
 .headerGroup {
   display: flex;
   align-items: center;

src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequencesHeader.tsx

@@ -15,6 +15,7 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import { useSelector, useDispatch } from 'react-redux';
 
 import {
@@ -22,14 +23,10 @@ import {
   getUncommittedSequencePresence
 } from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
 
-import {
-  updateEmptyInputDisplay,
-  switchToSpeciesStep
-} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
+import { updateEmptyInputDisplay } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
 
 import useBlastInputSequences from './useBlastInputSequences';
 
-import { SecondaryButton } from 'src/shared/components/button/Button';
 import PlusButton from 'src/shared/components/plus-button/PlusButton';
 import RadioGroup from 'src/shared/components/radio-group/RadioGroup';
 
@@ -61,10 +58,6 @@ const BlastInputSequencesHeader = (props: Props) => {
     setTimeout(() => scrollToLastInputBox(), 0);
   };
 
-  const onSwitchToSpecies = () => {
-    dispatch(switchToSpeciesStep());
-  };
-
   const scrollToLastInputBox = () => {
     const lastInputBox = document.querySelector(
       `.${sequenceBoxStyles.inputSequenceBox}:last-child`
@@ -81,8 +74,12 @@ const BlastInputSequencesHeader = (props: Props) => {
     ? sequences.length + 1
     : sequences.length;
 
+  const headerClass = classNames(styles.header, {
+    [styles.smallScreenHeader]: compact
+  });
+
   return (
-    <div className={styles.header}>
+    <div className={headerClass}>
       <div className={styles.headerGroup}>
         <span className={styles.headerTitle}>Sequences</span>
         <span className={styles.sequenceCounter}>{sequencesCount}</span>
@@ -100,14 +97,6 @@ const BlastInputSequencesHeader = (props: Props) => {
           onAdd={appendEmptyInput}
           disabled={!shouldEnableAddButton}
         />
-        {compact && (
-          <SecondaryButton
-            className={styles.blastAgainstButton}
-            onClick={onSwitchToSpecies}
-          >
-            Blast against
-          </SecondaryButton>
-        )}
       </div>
     </div>
   );

src/content/app/tools/blast/components/blast-species-selector/BlastSpeciesSelector.scss

@@ -2,20 +2,25 @@
 
 .header {
   display: flex;
-  width: 860px;
+  width: 862px;
   justify-content: space-between;
   align-items: center;
-  padding-left: 28px;
-  padding-bottom: 12px;
+  margin-left: -1px;
+  padding: 20px 0 12px 28px;
   position: sticky;
   top: 0px;
   z-index: 1;
   background-color: $white;
 }
 
+.smallScreenHeader {
+  top: 49px;
+}
+
 .headerGroup {
   display: flex;
   align-items: center;
+  width: 100%;
 }
 
 .headerTitle {
@@ -30,6 +35,7 @@
 
 .clearAll {
   margin-right: 30px;
+  margin-left: auto;
   color: $blue;
   cursor: pointer;
   user-select: none;

src/content/app/tools/blast/components/blast-species-selector/BlastSpeciesSelectorHeader.tsx

@@ -15,16 +15,12 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import { useSelector, useDispatch } from 'react-redux';
 
-import {
-  switchToSequencesStep,
-  clearSelectedSpecies
-} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
+import { clearSelectedSpecies } from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
 import { getSelectedSpeciesList } from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
 
-import { SecondaryButton } from 'src/shared/components/button/Button';
-
 import styles from './BlastSpeciesSelector.scss';
 
 export type Props = {
@@ -37,42 +33,25 @@ const BlastSpeciesSelectorHeader = (props: Props) => {
 
   const selectedSpeciesList = useSelector(getSelectedSpeciesList);
 
-  const onSwitchToSequence = () => {
-    dispatch(switchToSequencesStep());
-  };
-
   const onClearAll = () => {
     dispatch(clearSelectedSpecies());
   };
 
+  const headerClass = classNames(styles.header, {
+    [styles.smallScreenHeader]: compact
+  });
+
   return (
-    <div className={styles.header}>
+    <div className={headerClass}>
       <div className={styles.headerGroup}>
         <span className={styles.headerTitle}>Blast against</span>
         <span className={styles.speciesCounter}>
           {selectedSpeciesList.length}
         </span>
         <span className={styles.maxSpecies}>of 7 species</span>
-        {compact && (
-          <span className={styles.clearAll} onClick={onClearAll}>
-            Clear all
-          </span>
-        )}
-      </div>
-      <div className={styles.headerGroup}>
-        {!compact && (
-          <span className={styles.clearAll} onClick={onClearAll}>
-            Clear all
-          </span>
-        )}
-        {compact && (
-          <SecondaryButton
-            className={styles.sequencesButton}
-            onClick={onSwitchToSequence}
-          >
-            Sequences
-          </SecondaryButton>
-        )}
+        <span className={styles.clearAll} onClick={onClearAll}>
+          Clear all
+        </span>
       </div>
     </div>
   );

src/content/app/tools/blast/components/blast-submission-header-container/BlastSubmissionHeaderGrid.scss

@@ -4,6 +4,7 @@
   column-gap: 172px;
   align-items: center;
   padding-left: 26px; // TODO: seems to be a constant shared with sequence boxes (see ListedBlastSubmission.scss)
+  padding-top: 20px;
   margin-bottom: 14px;
   white-space: nowrap;
 }

src/content/app/tools/blast/views/blast-form/BlastForm.scss

@@ -4,11 +4,12 @@
   display: grid;
   grid-template-rows: auto auto minmax(0, 1fr);
   height: 100%;
+  position: relative;
 }
 
 .mainContainer {
   height: 100%;
-  padding-left: 65px;
+  padding: 0 6px 0 65px;
 }
 
 .mainContainerSmall {
@@ -31,3 +32,21 @@
   display: flex;
   flex-direction: column;
 }
+
+.blastFormStepToggle {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  max-width: 1770px; //TODO: To replace with global variables for spaces on the blast form (see ENSWBSITES-1602)
+  margin-left: -2px;
+  padding-top: 20px;
+  background-color: $white;
+  position: sticky;
+  top: 0px;
+  z-index: 1;
+}
+
+.buttonActive {
+  background-color: $black;
+  border-color: $black;
+}

src/content/app/tools/blast/views/blast-form/BlastForm.tsx

@@ -15,15 +15,21 @@
  */
 
 import React, { useEffect, useRef } from 'react';
-import { useSelector } from 'react-redux';
+import { useSelector, useDispatch } from 'react-redux';
+import classNames from 'classnames';
 
 import { useBlastConfigQuery } from 'src/content/app/tools/blast/state/blast-api/blastApiSlice';
 import useMediaQuery from 'src/shared/hooks/useMediaQuery';
 
 import { getStep } from 'src/content/app/tools/blast/state/blast-form/blastFormSelectors';
+import {
+  switchToSequencesStep,
+  switchToSpeciesStep
+} from 'src/content/app/tools/blast/state/blast-form/blastFormSlice';
 
 import BlastAppBar from 'src/content/app/tools/blast/components/blast-app-bar/BlastAppBar';
 import ToolsTopBar from 'src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar';
+import { SecondaryButton } from 'src/shared/components/button/Button';
 
 import BlastInputSequencesHeader from 'src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequencesHeader';
 import BlastInputSequences from 'src/content/app/tools/blast/components/blast-input-sequences/BlastInputSequences';
@@ -91,6 +97,7 @@ const MainSmall = () => {
 
   return (
     <div className={containerClasses} ref={containerRef}>
+      <BlastFormStepToggle />
       {step === 'sequences' ? (
         <>
           <BlastInputSequencesHeader compact={true} />
@@ -106,4 +113,41 @@ const MainSmall = () => {
   );
 };
 
+const BlastFormStepToggle = () => {
+  const dispatch = useDispatch();
+  const step = useSelector(getStep);
+
+  const onSwitchToSpecies = () => {
+    dispatch(switchToSpeciesStep());
+  };
+
+  const onSwitchToSequence = () => {
+    dispatch(switchToSequencesStep());
+  };
+
+  const sequenceButtonClass = classNames(styles.blastAgainstButton, {
+    [styles.buttonActive]: step === 'sequences'
+  });
+  const speciesButtonClass = classNames(styles.blastAgainstButton, {
+    [styles.buttonActive]: step === 'species'
+  });
+
+  return (
+    <div className={styles.blastFormStepToggle}>
+      <SecondaryButton
+        className={sequenceButtonClass}
+        onClick={onSwitchToSequence}
+      >
+        Add sequence(s)
+      </SecondaryButton>
+      <SecondaryButton
+        className={speciesButtonClass}
+        onClick={onSwitchToSpecies}
+      >
+        Select species
+      </SecondaryButton>
+    </div>
+  );
+};
+
 export default BlastForm;

src/content/app/tools/shared/components/tools-top-bar/ToolsTopBar.scss

@@ -5,5 +5,6 @@
   background-color: $light-grey;
   padding: 24px 20px 20px 30px;
   box-shadow: 0 3px 5px $global-box-shadow;
-  margin-bottom: 21px;
+  position: relative;
+  z-index: 2;
 }