KANBAN-619: Add BLAST page

cdk/amplify-test-stack.ts

@@ -51,6 +51,10 @@ export class AmplifyTestStack extends cdk.Stack {
       { source: '/bluegenes/',                         target: 'https://production-alliancemine.alliancegenome.org:444/bluegenes/alliancemine',       status: amplify.RedirectStatus.REWRITE },
       { source: '/bluegenes/<*>',                      target: 'https://production-alliancemine.alliancegenome.org:444/bluegenes/<*>',                status: amplify.RedirectStatus.REWRITE },
 
+      { source: '/blast',                              target: 'https://test.alliancegenome.org/blast',                                               status: amplify.RedirectStatus.REWRITE },
+      { source: '/blast/',                             target: 'https://test.alliancegenome.org/blast/',                                              status: amplify.RedirectStatus.REWRITE },
+      { source: '/blast/<*>',                          target: 'https://blast.alliancegenome.org/blast/<*>',                                          status: amplify.RedirectStatus.REWRITE },
+
       { source: '/swagger-ui',                         target: 'https://test-alb.alliancegenome.org/swagger-ui',                                      status: amplify.RedirectStatus.REWRITE },
       { source: '/swagger-ui/',                        target: 'https://test-alb.alliancegenome.org/swagger-ui/',                                     status: amplify.RedirectStatus.REWRITE },
       { source: '/swagger-ui/<*>',                     target: 'https://test-alb.alliancegenome.org/swagger-ui/<*>',                                  status: amplify.RedirectStatus.REWRITE },

src/containers/blastPage/BlastService.js

@@ -0,0 +1,59 @@
+import React from "react";
+import useBlastServers from "../../hooks/useBlastServers";
+
+function listPublicServers(blastEnv) {
+  const mods = Object.entries(blastEnv);
+  let blastServerList = [];
+
+  mods.map(([mod, modServers]) => {
+    const servers = Object.entries(modServers);
+    servers.map(([server, serverData]) => {
+      if (serverData.public) {
+        const serverItem = { name: server, ...serverData };
+        blastServerList.push(serverItem);
+      }
+    });
+  });
+
+  return blastServerList;
+};
+
+const BlastService = () => {
+  const { data, isLoading, error } = useBlastServers();
+
+  if (error) return console.log("ERROR: BlastServerList: ", error);
+  if (isLoading) return null;  // maybe change to <loadingPage /> ... or something like that ...
+
+  const blastEnv = data.environments;
+  const blastServers = listPublicServers(blastEnv);
+
+  // const title = page.title.rendered;
+  return (
+    <div>
+      <h3>
+        Welcome to the BLAST Service for the Alliance of Genome Resources!
+      </h3>
+      <p>
+        This BLAST service allows researchers to search genomic sequences using
+        the Basic Local Alignment Search Tool (BLAST). By entering a sequence or
+        query, users can find regions of similarity to various genomes within
+        the Alliance. This service supports separate environments for each of
+        the Model Organism Databases (MODs) as well as a unified environment for
+        the Alliance. Results provide detailed alignments and annotations to aid
+        in your research. Explore the various BLAST environments through the
+        links below to find the one that best suits your research needs:
+      </p>
+      <ul>
+        {
+          blastServers.map((server) => (
+            <li key={server.dataProvider + server.name}>
+              <a href={"/blast/" + server.dataProvider + "/" + server.name}>{server.dataProvider + " - " + server.name}</a>
+            </li>
+          ))
+        }
+      </ul>
+    </div>
+  );
+};
+
+export default BlastService;

src/containers/blastPage/index.js

@@ -0,0 +1,32 @@
+import React from "react";
+import style from "./style.module.scss";
+import HeadMetaTags from "../../components/headMetaTags";
+import BlastService from "./BlastService";
+
+const BlastPage = () => {
+  return (
+    <div>
+      <HeadMetaTags title="BLAST Service" />
+      <div>
+      <div className={style.aboutMenuContainer}>
+        <div className="container-fluid">
+          <div className={style.secondaryNavEmptyRow}></div>
+          <div className={`row ${style.secondaryNav}`}>
+            <div className="container">
+              <h1>BLAST Service</h1>
+            </div>
+          </div>
+        </div>
+
+      </div>
+      </div>
+      <div className="container">
+        <div className="col-xs-12 col-sm-12 mission">
+          <BlastService />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default BlastPage;

src/containers/blastPage/style.module.scss

@@ -0,0 +1,20 @@
+@import "~bootstrap/scss/functions";
+@import "~bootstrap/scss/variables";
+@import "~bootstrap/scss/mixins";
+@import "../wordpress/style.module.scss";
+
+$max-width: 800px;
+
+.section {
+  padding: 3rem 1rem;
+  border-bottom: 1px solid $border-color;
+}
+
+.contentContainer {
+  width: 100%;
+  margin: 0 auto;
+
+  @media (min-width: $max-width) {
+    max-width: $max-width;
+  }
+}

src/hooks/useBlastServers.js

@@ -0,0 +1,11 @@
+import { useQuery } from 'react-query';
+import fetchData from '../lib/fetchData';
+
+const BLAST_SERVER_ENVIRONMENT_URL = 'https://blast.alliancegenome.org/blast/environment_info.json';
+
+export default function useBlastServers() {
+  return useQuery(['blast-servers'], () => {
+    // I changed this from quoted with back-ticks to qouted with single qoutes
+    return fetchData('https://blast.alliancegenome.org/blast/environment_info.json');
+  });
+}

src/routes.js

@@ -20,6 +20,7 @@ import AllelePage from './containers/allelePage/AllelePage';
 import VariantPage from './containers/allelePage/VariantPage';
 import MODLanding from './containers/modLanding/Main';
 import AlzheimersPage from './containers/alzheimersPage';
+import BlastPage from './containers/blastPage';
 
 export default (
   <Layout>
@@ -36,6 +37,7 @@ export default (
       <Route exact path='/downloads' component={DownloadsPage} />
       <Route exact path='/members/:id' render={({ match }) => <MODLanding modId={match.params.id} />} />
       <Route exact path='/disease-portal/alzheimers-disease' component={AlzheimersPage} />
+      <Route exact path='/blast' component={BlastPage} />
 
 
       {/* this one needs to be handled outside of the main application */}