Vep species selector (#1144)

src/content/app/tools/vep/VepPageContent.module.css

@@ -0,0 +1,4 @@
+.grid {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+}

src/content/app/tools/vep/VepPageContent.tsx

@@ -19,38 +19,42 @@ import { Route, Routes } from 'react-router-dom';
 import VepAppBar from './components/vep-app-bar/VepAppBar';
 import VepTopBar from './components/vep-top-bar/VepTopBar';
 import VepForm from './views/vep-form/VepForm';
+import VepSpeciesSelector from './views/vep-species-selector/VepSpeciesSelector';
 import { NotFoundErrorScreen } from 'src/shared/components/error-screen';
 
+import styles from './VepPageContent.module.css';
+
 const VepPageContent = () => {
   return (
-    <div>
+    <div className={styles.grid}>
       <VepAppBar />
+      <VepTopBar />
       <Main />
     </div>
   );
 };
 
 const Main = () => {
   return (
-    <div>
-      <VepTopBar />
-
-      <Routes>
-        <Route index={true} element={<VepForm />} />
+    <Routes>
+      <Route index={true} element={<VepForm />} />
+      <Route
+        path="species-selector"
+        element={<VepSpeciesSelector />}
+      />
+      <Route
+        path="unviewed-submissions"
+        element={<div>List of unviewed submissions</div>}
+      />
+      <Route path="submissions">
+        <Route index={true} element={<div>List of viewed submissions</div>} />
         <Route
-          path="unviewed-submissions"
-          element={<div>List of unviewed submissions</div>}
+          path=":submissionId"
+          element={<div>Results of a single VEP analysis</div>}
         />
-        <Route path="submissions">
-          <Route index={true} element={<div>List of viewed submissions</div>} />
-          <Route
-            path=":submissionId"
-            element={<div>Results of a single VEP analysis</div>}
-          />
-        </Route>
-        <Route path="*" element={<NotFoundErrorScreen />} />
-      </Routes>
-    </div>
+      </Route>
+      <Route path="*" element={<NotFoundErrorScreen />} />
+    </Routes>
   );
 };
 

src/content/app/tools/vep/state/vep-form/vepFormSelectors.ts

@@ -0,0 +1,20 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import type { RootState } from 'src/store';
+
+export const getSelectedSpecies = (state: RootState) =>
+  state.vep.vepForm.selectedSpecies;

src/content/app/tools/vep/state/vep-form/vepFormSlice.ts

@@ -0,0 +1,46 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+import type { CommittedItem } from 'src/content/app/species-selector/types/committedItem';
+
+type VepSelectedSpecies = Omit<CommittedItem, 'isEnabled'>;
+
+export type VepFormState = {
+  selectedSpecies: VepSelectedSpecies | null;
+};
+
+export const initialState: VepFormState = {
+  selectedSpecies: null
+};
+
+const vepFormSlice = createSlice({
+  name: 'vep-form',
+  initialState,
+  reducers: {
+    setSelectedSpecies: (
+      state,
+      action: PayloadAction<{ species: VepSelectedSpecies }>
+    ) => {
+      state.selectedSpecies = action.payload.species;
+    }
+  }
+});
+
+export const { setSelectedSpecies } = vepFormSlice.actions;
+
+export default vepFormSlice.reducer;

src/content/app/tools/vep/state/vepReducer.ts

@@ -0,0 +1,23 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { combineReducers } from 'redux';
+
+import vepFormReducer from './vep-form/vepFormSlice';
+
+export default combineReducers({
+  vepForm: vepFormReducer
+});

src/content/app/tools/vep/views/vep-form/VepForm.tsx

@@ -14,6 +14,10 @@
  * limitations under the License.
  */
 
+import {
+  VepFormSpecies,
+  VepSpeciesSelectorNavButton
+} from './vep-form-species-section/VepFormSpeciesSection';
 import FormSection from 'src/content/app/tools/vep/components/form-section/FormSection';
 import PlusButton from 'src/shared/components/plus-button/PlusButton';
 import TextButton from 'src/shared/components/text-button/TextButton';
@@ -38,12 +42,10 @@ const VepForm = () => {
       <FormSection className={styles.formSection}>
         <div className={styles.topFormSectionRegularGrid}>
           <div className={styles.topFormSectionName}>Species</div>
-          <div className={styles.topFormSectionMain}>
-            <TextButton>Select a species / assembly</TextButton>
-          </div>
-          <div className={styles.topFormSectionToggle}>
-            <PlusButton />
-          </div>
+          <VepFormSpecies className={styles.topFormSectionMain} />
+          <VepSpeciesSelectorNavButton
+            className={styles.topFormSectionToggle}
+          />
         </div>
       </FormSection>
       <FormSection className={styles.formSection}>

src/content/app/tools/vep/views/vep-form/vep-form-species-section/VepFormSpeciesSection.module.css

@@ -0,0 +1,3 @@
+.commonName {
+  font-weight: var(--font-weight-bold);
+}

src/content/app/tools/vep/views/vep-form/vep-form-species-section/VepFormSpeciesSection.tsx

@@ -0,0 +1,71 @@
+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Link } from 'react-router-dom';
+
+import * as urlFor from 'src/shared/helpers/urlHelper';
+
+import { useAppSelector } from 'src/store';
+
+import { getSelectedSpecies } from 'src/content/app/tools/vep/state/vep-form/vepFormSelectors';
+
+import {
+  ScientificName,
+  AssemblyName
+} from 'src/shared/components/species-name-parts';
+import PlusButton from 'src/shared/components/plus-button/PlusButton';
+import TextButton from 'src/shared/components/text-button/TextButton';
+
+import styles from './VepFormSpeciesSection.module.css';
+
+/**
+ * TODO: Consider the following
+ * The component below displays a species label after a species has been selected for VEP analysis.
+ *   - Is this going to be a recurring pattern of displaying species info outside of tables?
+ *   - Does it need to show the type information for the selected assembly (is reference, population)?
+ *   - Does it need to consider user's selection of species info display (as chosen in species manager)
+ * The answer may justify exxtracting this into a reusable component.
+ */
+
+const vepSpeciesSelectorUrl = urlFor.vepSpeciesSelector();
+
+export const VepFormSpecies = (props: { className?: string }) => {
+  const selectedSpecies = useAppSelector(getSelectedSpecies);
+
+  if (!selectedSpecies) {
+    return <Link to={vepSpeciesSelectorUrl}>Select a species / assembly</Link>;
+  }
+
+  return (
+    <div className={props.className}>
+      {selectedSpecies.common_name && (
+        <span className={styles.commonName}>{selectedSpecies.common_name}</span>
+      )}
+      {!selectedSpecies.common_name && <ScientificName {...selectedSpecies} />}{' '}
+      <AssemblyName {...selectedSpecies} />
+    </div>
+  );
+};
+
+export const VepSpeciesSelectorNavButton = (props: { className?: string }) => {
+  const selectedSpecies = useAppSelector(getSelectedSpecies);
+
+  return (
+    <Link to={vepSpeciesSelectorUrl} className={props.className}>
+      {!selectedSpecies ? <PlusButton /> : <TextButton>Change</TextButton>}
+    </Link>
+  );
+};

src/content/app/tools/vep/views/vep-species-selector/VepSpeciesSelector.module.css

@@ -0,0 +1,29 @@
+.grid {
+  display: grid;
+  grid-template-rows: auto auto 1fr;
+  margin-left: var(--global-padding-left);
+  height: 100%;
+}
+
+.tableContainer {
+  overflow: auto;
+  padding-bottom: var(--global-padding-bottom);
+}
+
+/* Question to consider: is the top section of a species selector
+   a sufficiently stable and repeatable component
+   to be extracted into a shared component?
+   Note: so far, the top section in vep species selector
+   does not have a filter element in the design.
+   We will see if we will need to bring it in.
+*/
+.topSection {
+  display: flex;
+  flex-direction: column;
+  row-gap: 32px;
+}
+
+.loader {
+  margin-top: 40px;
+  margin-left: 60px;
+}