added human mouse icons on genome page

NishiPhalke · Oct 9, 2020 · fd22d0b · fd22d0b
1 parent 2bfb976
commit fd22d0b
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -23,7 +23,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Genome Browser</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/src/components/genomepage/genomepage.tsx b/src/components/genomepage/genomepage.tsx
@@ -1,10 +1,12 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import { ASSEMBLY_QUERY } from './queries';
 import { AssemblyInfo } from '../../genomes/page/types';
-import { Segment, Container, Grid, Header, Input } from 'semantic-ui-react';
+import { Segment, Container, Grid, Header, Input, Image } from 'semantic-ui-react';
 import MainMenu from './../homepage/masthead/menu';
 import { mainMenuItems } from './../homepage/config/menuitems';
-import dna from '../../dna.png';
+import dna from '../../images/dna.png';
+import humanIcon from '../../images/humanicon.png';
+import mouseIcon from '../../images/mouse.png';
 import { Link } from 'react-router-dom';
 import ContentDivider from './../homepage/content/divider';
 const groupBySpecies = (assemblies: AssemblyInfo[]) => {
@@ -40,7 +42,6 @@ const GenomePage: React.FC = () => {
         fetchData();
     }, []);
     const onSearchChange = useCallback((e, d) => {
-        //setSearchVal(d.result);
         setQ(e.target.value.toLowerCase());
     }, []);
     let groupedAssemblies = assemblies && groupBySpecies(assemblies);
@@ -72,6 +73,14 @@ const GenomePage: React.FC = () => {
                                 Click a link to open the UMMS Genome Browser for that assembly.
                             </Grid.Column>
                         </Grid.Row>
+                        <Grid.Row centered>
+                        <Grid.Column width={2} >
+                            <Image height={100} as={Link} to="/browser/hg38" width={100} src={humanIcon} alt="Human icon" />
+                        </Grid.Column>
+                        <Grid.Column width={2} >
+                            <Image height={100} as={Link} to="/browser/mm10" width={100} src={mouseIcon} alt="Mouse icon" />
+                        </Grid.Column>
+                        </Grid.Row>
                         <Grid.Row>
                             <Grid.Column>
                                 <Input

diff --git a/src/components/homepage/content/genomes.tsx b/src/components/homepage/content/genomes.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Header, Grid, Button } from 'semantic-ui-react';
 import { Link } from 'react-router-dom';
 
-import dna from '../../../dna.png';
+import dna from '../../../images/dna.png';
 
 const Genomes: React.FC = () => (
     <Grid.Row>

diff --git a/src/genomes/hg38/tracks.ts b/src/genomes/hg38/tracks.ts
@@ -104,7 +104,7 @@ export const rampageplus = (domain: Domain) => ({
     url: 'gs://data.genomealmanac.org/rampage.plus.bigWig',
     preRenderedWidth: 1850,
     id: 'rampplus',
-    title: 'rampage plus',
+    title: 'RAMPAGE plus',
     color: '#000000',
     zoomLevel: Math.round((domain.end - domain.start) / 1850),
 });
@@ -121,7 +121,7 @@ export const rampageminus = (domain: Domain) => ({
     url: 'gs://data.genomealmanac.org/rampage.minus.bigWig',
     preRenderedWidth: 1850,
     id: 'rampminus',
-    title: 'rampage minus',
+    title: 'RAMPAGE minus',
     color: '#000000',
     zoomLevel: Math.round((domain.end - domain.start) / 1850),
 });
diff --git a/src/dna.png → src/images/dna.png b/src/dna.png → src/images/dna.png
diff --git a/src/images/humanicon.png b/src/images/humanicon.png
diff --git a/src/images/mouse.png b/src/images/mouse.png