From 156200098a3e7feada08a41ea7c4da14f049f86d Mon Sep 17 00:00:00 2001
From: Anandaroop Roy <anandaroop.roy+github@gmail.com>
Date: Tue, 7 Jul 2020 16:28:10 -0400
Subject: [PATCH 1/2] Add valid key for .map'd FeaturedGene components

---
 src/desktop/apps/categories/components/FeaturedGenes.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/desktop/apps/categories/components/FeaturedGenes.js b/src/desktop/apps/categories/components/FeaturedGenes.js
index ac8134ef95d..11709388104 100644
--- a/src/desktop/apps/categories/components/FeaturedGenes.js
+++ b/src/desktop/apps/categories/components/FeaturedGenes.js
@@ -26,7 +26,7 @@ const FeaturedGenes = ({ featuredGeneLinks }) => {
         featuredGeneLinks.length > 0 &&
         featuredGeneLinks
           .map(featuredGene => (
-            <FeaturedGene key={featuredGene.id} {...featuredGene} />
+            <FeaturedGene key={featuredGene.href} {...featuredGene} />
           ))
           .slice(0, 3)}
     </Layout>

From 7571e000954b9c53290a1e2d1ac69902fcd329b0 Mon Sep 17 00:00:00 2001
From: Anandaroop Roy <anandaroop.roy+github@gmail.com>
Date: Tue, 7 Jul 2020 16:28:41 -0400
Subject: [PATCH 2/2] Use slugs instead of ids to fix scrolly nav

---
 src/desktop/apps/categories/components/GeneFamily.js    | 4 ++--
 src/desktop/apps/categories/components/GeneFamilyNav.js | 4 ++--
 src/desktop/apps/categories/queries/geneFamilies.js     | 1 +
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/desktop/apps/categories/components/GeneFamily.js b/src/desktop/apps/categories/components/GeneFamily.js
index 280d2009a4f..61f4300301a 100644
--- a/src/desktop/apps/categories/components/GeneFamily.js
+++ b/src/desktop/apps/categories/components/GeneFamily.js
@@ -29,11 +29,11 @@ const GeneList = styled.ul`
   }
 `
 
-const GeneFamily = ({ id, name, genes, featuredGeneLinks }) => {
+const GeneFamily = ({ slug, name, genes, featuredGeneLinks }) => {
   const publishedGenes = genes.filter(g => g.is_published)
   const sortedGenes = alphabetizeGenes(publishedGenes)
   return (
-    <div id={id}>
+    <div id={slug}>
       <GeneFamilyName>{name}</GeneFamilyName>
       <FeaturedGenes featuredGeneLinks={featuredGeneLinks} />
       <GeneList>
diff --git a/src/desktop/apps/categories/components/GeneFamilyNav.js b/src/desktop/apps/categories/components/GeneFamilyNav.js
index 5f87e04823a..122827872e2 100644
--- a/src/desktop/apps/categories/components/GeneFamilyNav.js
+++ b/src/desktop/apps/categories/components/GeneFamilyNav.js
@@ -81,9 +81,9 @@ class GeneFamilyNav extends React.Component {
           offset={-1 * TOP_BUFFER}
         >
           {geneFamilies.map(geneFamily => (
-            <GeneFamilyItem key={geneFamily.id}>
+            <GeneFamilyItem key={geneFamily.slug}>
               <GeneFamilyLink
-                href={`#${geneFamily.id}`}
+                href={`#${geneFamily.slug}`}
                 onClick={this.handleClick}
               >
                 {geneFamily.name}
diff --git a/src/desktop/apps/categories/queries/geneFamilies.js b/src/desktop/apps/categories/queries/geneFamilies.js
index 8d78154f7c0..ed48ed5ba7b 100644
--- a/src/desktop/apps/categories/queries/geneFamilies.js
+++ b/src/desktop/apps/categories/queries/geneFamilies.js
@@ -5,6 +5,7 @@ export default function GeneFamiliesQuery() {
       edges {
         node {
           id
+          slug
           name
           genes {
             id