Add FTP links component to the Species page (#1088)

Co-authored-by: Andrey Azov <[email protected]>

src/content/app/species/components/species-page-sidebar/SpeciesPageSidebar.module.css

@@ -58,3 +58,29 @@
 .assemblyLevel {
   font-weight: var(--font-weight-bold);
 }
+
+.getFilesSection {
+  margin-top: 40px;
+}
+
+.getFiles {
+  display: inline-flex;
+  align-items: center;
+  column-gap: 10px;
+  font-size: 12px;
+  color: var(--color-blue);
+}
+
+.downloadIcon {
+  display: inline-flex;
+  width: 22px;
+  aspect-ratio: 1;
+  background: var(--color-blue);
+  align-items: center;
+  justify-content: center;
+}
+
+.downloadIcon svg {
+  width: 55%;
+  fill: var(--color-white);
+}

src/content/app/species/components/species-page-sidebar/SpeciesPageSidebar.tsx

@@ -15,11 +15,21 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import upperFirst from 'lodash/upperFirst';
 
+import { useAppSelector, useAppDispatch } from 'src/store';
+
+import { getActiveGenomeId } from 'src/content/app/species/state/general/speciesGeneralSelectors';
+
+import { updateSpeciesSidebarModalForGenome } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
+
 import Sidebar from 'src/shared/components/layout/sidebar/Sidebar';
 import ExternalReference from 'src/shared/components/external-reference/ExternalReference';
 
+import DownloadIcon from 'static/icons/icon_download.svg';
+
+import { SpeciesSidebarModalView } from 'src/content/app/species/state/sidebar/speciesSidebarSlice';
 import type { GenomeInfo } from 'src/shared/state/genome/genomeTypes';
 
 import styles from './SpeciesPageSidebar.module.css';
@@ -86,6 +96,10 @@ const SpeciesPageSidebar = (props: Props) => {
           <AssemblyDate {...data} />
         </div>
       </section>
+
+      <section className={classNames(styles.section, styles.getFilesSection)}>
+        <GetFilesButton />
+      </section>
     </Sidebar>
   );
 };
@@ -200,4 +214,27 @@ const AssemblyDate = (props: GenomeInfo) => {
   );
 };
 
+const GetFilesButton = () => {
+  const activeGenomeId = useAppSelector(getActiveGenomeId) as string;
+  const dispatch = useAppDispatch();
+
+  const onClick = () => {
+    dispatch(
+      updateSpeciesSidebarModalForGenome({
+        activeGenomeId,
+        fragment: { sidebarModalView: SpeciesSidebarModalView.DOWNLOADS }
+      })
+    );
+  };
+
+  return (
+    <button className={styles.getFiles} onClick={onClick}>
+      <span>Get files</span>
+      <span className={styles.downloadIcon}>
+        <DownloadIcon />
+      </span>
+    </button>
+  );
+};
+
 export default SpeciesPageSidebar;

src/content/app/species/components/species-sidebar-modal/SpeciesSidebarModal.tsx

@@ -31,21 +31,23 @@ import SidebarModal from 'src/shared/components/layout/sidebar-modal/SidebarModa
 const speciesSidebarModals: Record<string, ReturnType<typeof lazy>> = {
   [SpeciesSidebarModalView.SEARCH]: lazy(
     () => import('./modal-views/SpeciesSidebarSearch')
+  ),
+  [SpeciesSidebarModalView.DOWNLOADS]: lazy(
+    () => import('./modal-views/SpeciesSidebarDownloads')
   )
 };
 
 export const speciesSidebarModalTitles: { [key: string]: string } = {
   [SpeciesSidebarModalView.SEARCH]: 'Search',
   [SpeciesSidebarModalView.BOOKMARKS]: 'Previously viewed',
   [SpeciesSidebarModalView.SHARE]: 'Share',
-  [SpeciesSidebarModalView.DOWNLOADS]: 'Downloads'
+  [SpeciesSidebarModalView.DOWNLOADS]: 'Download'
 };
 
 export const SpeciesSidebarModal = () => {
   const speciesSidebarModalView = useAppSelector(getSpeciesSidebarModalView);
   const activeGenomeId = useAppSelector(getActiveGenomeId);
   const dispatch = useAppDispatch();
-
   if (!speciesSidebarModalView || !activeGenomeId) {
     return null;
   }

src/content/app/species/components/species-sidebar-modal/modal-views/SpeciesSidebarDownloads.module.css

@@ -0,0 +1,24 @@
+.sectionHead {
+  font-size: 12px;
+  font-weight: var(--font-weight-light);
+  border-bottom: 1px solid var(--color-grey);
+  margin-bottom: 10px;
+  margin-top: 45px;
+}
+
+.sectionHead:first-child {
+  margin-top: 30px;
+}
+
+.SpeciesFtpLink{
+  margin-left: 10px;
+}
+
+.SpeciesFtpLink:not(:last-child) {
+  margin-bottom: 25px;
+}
+
+.SpeciesFtpLinkTitle{
+  font-weight: var(--font-weight-light);
+  margin-bottom: 10px;
+}

src/content/app/species/components/species-sidebar-modal/modal-views/SpeciesSidebarDownloads.tsx

@@ -0,0 +1,102 @@
+/**
+ * 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 React from 'react';
+
+import { useAppSelector } from 'src/store';
+import { getActiveGenomeId } from 'src/content/app/species/state/general/speciesGeneralSelectors';
+
+import { useSpeciesFtpLinksQuery } from 'src/content/app/species/state/api/speciesApiSlice';
+
+import ExternalLink from 'src/shared/components/external-link/ExternalLink';
+import { CircleLoader } from 'src/shared/components/loader';
+
+import styles from './SpeciesSidebarDownloads.module.css';
+
+const SpeciesSidebarDownloads = () => {
+  const activeGenomeId = useAppSelector(getActiveGenomeId) || '';
+  const { data: ftpLinksResponse, isFetching } = useSpeciesFtpLinksQuery(
+    activeGenomeId,
+    {
+      skip: !activeGenomeId
+    }
+  );
+
+  if (isFetching) {
+    return <CircleLoader />;
+  }
+
+  const ftpLinks = ftpLinksResponse || [];
+  const linkSections: Record<string, string> = {};
+
+  for (const link of ftpLinks) {
+    linkSections[link.dataset] = link.url;
+  }
+
+  return (
+    <div>
+      {linkSections.assembly && (
+        <section>
+          <div className={styles.sectionHead}>Assembly</div>
+          <SpeciesFtpLink title="DNA sequence" link={linkSections.assembly}>
+            FASTA
+          </SpeciesFtpLink>
+        </section>
+      )}
+      <section>
+        <div className={styles.sectionHead}>Annotation</div>
+        {linkSections.genebuild && (
+          <SpeciesFtpLink
+            title="Genes, cDNA, ncRNA, proteins"
+            link={linkSections.genebuild}
+          >
+            FASTA/GTF/GFF3
+          </SpeciesFtpLink>
+        )}
+        {linkSections.variation && (
+          <SpeciesFtpLink title="Variation" link={linkSections.variation}>
+            VCF
+          </SpeciesFtpLink>
+        )}
+        {linkSections.homologies && (
+          <SpeciesFtpLink title="Homologies" link={linkSections.homologies}>
+            TSV
+          </SpeciesFtpLink>
+        )}
+        {linkSections.regulation && (
+          <SpeciesFtpLink title="Regulation" link={linkSections.regulation}>
+            BigBED/TSV/GFF3/BigWig
+          </SpeciesFtpLink>
+        )}
+      </section>
+    </div>
+  );
+};
+
+const SpeciesFtpLink = (props: {
+  title: string;
+  link: string;
+  children: React.ReactNode;
+}) => {
+  return (
+    <div className={styles.SpeciesFtpLink}>
+      <div className={styles.SpeciesFtpLinkTitle}>{props.title}</div>
+      <ExternalLink to={props.link}>{props.children}</ExternalLink>
+    </div>
+  );
+};
+
+export default SpeciesSidebarDownloads;

src/content/app/species/components/species-sidebar-toolstrip/SpeciesSidebarToolstrip.tsx

@@ -105,9 +105,10 @@ export const SpeciesSidebarToolstrip = () => {
         image={ShareIcon}
       />
       <ImageButton
-        status={Status.DISABLED}
+        status={getViewIconStatus(SpeciesSidebarModalView.DOWNLOADS)}
         description="Download"
         className={styles.sidebarIcon}
+        onClick={() => toggleModalView(SpeciesSidebarModalView.DOWNLOADS)}
         image={DownloadIcon}
       />
     </>

src/content/app/species/state/api/speciesApiSlice.ts

@@ -18,7 +18,10 @@ import config from 'config';
 
 import restApiSlice from 'src/shared/state/api-slices/restSlice';
 
-import type { SpeciesStatistics } from './speciesApiTypes';
+import type {
+  SpeciesStatistics,
+  SpeciesFtpLinksResponse
+} from './speciesApiTypes';
 import type { GenomeInfo } from 'src/shared/state/genome/genomeTypes';
 
 type SpeciesStatsQueryParams = {
@@ -43,9 +46,17 @@ const speciesApiSlice = restApiSlice.injectEndpoints({
       query: (genomeId) => ({
         url: `${config.metadataApiBaseUrl}/genome/${genomeId}/details`
       })
+    }),
+    speciesFtpLinks: builder.query<SpeciesFtpLinksResponse, string>({
+      query: (genomeId) => ({
+        url: `${config.metadataApiBaseUrl}/genome/${genomeId}/ftplinks`
+      })
     })
   })
 });
 
-export const { useGetSpeciesStatisticsQuery, useSpeciesDetailsQuery } =
-  speciesApiSlice;
+export const {
+  useGetSpeciesStatisticsQuery,
+  useSpeciesDetailsQuery,
+  useSpeciesFtpLinksQuery
+} = speciesApiSlice;

src/content/app/species/state/api/speciesApiTypes.ts

@@ -119,3 +119,8 @@ export type SpeciesStatsQueryParams = {
 export type SpeciesStatsResponse = {
   genome_stats: SpeciesStatistics;
 };
+
+export type SpeciesFtpLinksResponse = {
+  dataset: string;
+  url: string;
+}[];