Merge pull request #1122 from monarch-initiative/issue-1120-home-page-update

Issue 1120 home page update - Move KG tools to header

Author: varun-divya

frontend/src/components/TheHeaderV2.vue

@@ -47,8 +47,8 @@
         <div class="hero-search-wrapper">
           <TabSearch :minimal="true" :header-box="true" :home="home" />
           <TheSearchTerms />
-
           <TheSearchSuggestions @select="handleSuggestionClick" />
+          <TheHeroTools />
         </div>
       </div>
     </div>
@@ -97,6 +97,9 @@
             </li>
           </template>
         </DropdownButton>
+        <div class="hero-tools">
+          <TheHeroTools v-if="isMobile" />
+        </div>
       </div>
     </nav>
 
@@ -113,6 +116,7 @@ import TheSearchTerms from "@/components/TheSearchTerms.vue";
 import navigationMenus from "@/data/navigationMenu.json";
 import { ENTITY_MAP } from "@/data/toolEntityConfig";
 import DropdownButton from "./TheDropdownButton.vue";
+import TheHeroTools from "./TheHeroTools.vue";
 import TheNexus from "./TheNexus.vue";
 import TheScrollButton from "./TheScrollButton.vue";
 import TheSearchSuggestions from "./TheSearchSuggestions.vue";
@@ -446,7 +450,7 @@ Its here to align with the styling of old nav items. */
   width: 80%;
   max-width: 68em;
   margin: 0 auto;
-  padding: 3.5em 2em;
+  padding: 2.5em 2em;
   gap: 1.2em;
   border-radius: 20px;
   background: white;
@@ -455,7 +459,7 @@ Its here to align with the styling of old nav items. */
   text-align: center;
   transition: box-shadow 0.3s ease;
 
-  @media (max-width: 1200px) {
+  @media (max-width: 1300px) {
     padding: 1.8em;
   }
 }
@@ -473,7 +477,6 @@ Its here to align with the styling of old nav items. */
 .hero-header h1 {
   color: #333;
   font-weight: 600;
-  font-size: clamp(1.75rem, 5vw, 2.5rem);
   font-size: 1.75em;
   strong {
     display: block;

frontend/src/components/TheHeroTools.vue

@@ -0,0 +1,59 @@
+<template>
+  <hr />
+  <div class="hero-tool-links">
+    <p class="hero-tools-label">Knowledge Graph Tools:</p>
+    <AppLink to="/search-phenotypes">Phenotype Similarity Tools</AppLink>
+    <span>|</span>
+    <AppLink to="/text-annotator">Text Annotator</AppLink>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$wrap: 1120px;
+.hero-tool-links {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: 0.75rem;
+  font-size: 1.1em;
+  white-space: nowrap;
+
+  @media (max-width: $wrap) {
+    flex-wrap: wrap;
+    margin-top: 0.8rem;
+    color: $white;
+    font-size: 0.9em;
+    white-space: wrap;
+  }
+  a {
+    color: #007c8a;
+    font-weight: 500;
+    text-decoration: none;
+
+    @media (max-width: $wrap) {
+      color: $white;
+    }
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  span {
+    color: #aaa;
+  }
+  h3 {
+    padding: 0;
+
+    @media (max-width: $wrap) {
+      color: $white;
+    }
+  }
+}
+.hero-tools-label {
+  font-weight: 500;
+  text-align: center;
+  @media (max-width: $wrap) {
+    color: $white;
+  }
+}
+</style>

frontend/src/components/TheScrollButton.vue

@@ -34,7 +34,7 @@ function scrollToHomePageSection() {
 
 <style scoped>
 .scroll-button {
-  margin-bottom: 2rem;
+  margin: 1.2rem;
   border: none;
   border-radius: 50%;
   background: white;

frontend/src/data/navigationMenu.json

@@ -49,6 +49,27 @@
         "to": "/kg/downloads",
         "tooltip": ""
       },
+      {
+        "label": "API",
+        "key": "kg-api",
+        "to": "https://api-v3.monarchinitiative.org/v3/docs",
+        "tooltip": "",
+        "icon": true
+      },
+      {
+        "label": "Neo4j",
+        "key": "about-neo4J",
+        "to": "https://neo4j.monarchinitiative.org/browser/",
+        "tooltip": "",
+        "icon": true
+      },
+      {
+        "label": "Monarch R",
+        "key": "about-monarchr",
+        "to": "https://monarch-initiative.github.io/monarchr/articles/monarchr",
+        "tooltip": "",
+        "icon": true
+      },
       {
         "label": "Status & QC",
         "key": "kg-status-qc",
@@ -79,13 +100,6 @@
         "to": "/kg/citation",
         "tooltip": ""
       },
-      {
-        "label": "API",
-        "key": "kg-api",
-        "to": "https://api-v3.monarchinitiative.org/v3/docs",
-        "tooltip": "",
-        "icon": true
-      },
       {
         "label": "About the KG",
         "key": "about-kg",

frontend/src/data/toolEntityConfig.ts

@@ -24,44 +24,6 @@ export const ENTITY_MAP: Record<
   },
 };
 
-export const KG_TOOL_LINKS: {
-  label: string;
-  to: string;
-  icon?: string;
-  external?: boolean;
-  tooltip?: string;
-}[] = [
-  {
-    label: "Phenotype Search",
-    icon: "tool-phenotype-search",
-    to: "/search-phenotypes",
-    tooltip: "Start exploring genes and diseases based on phenotype similarity",
-  },
-  {
-    label: "Text Annotator",
-    icon: "text-annotator",
-    to: "/text-annotator",
-    tooltip:
-      "Paste or upload text to find references to Monarch Knowledge Graph entities",
-  },
-  {
-    label: "Neo4j",
-    icon: "neoj",
-    to: "https://neo4j.monarchinitiative.org/browser/",
-    tooltip:
-      "Explore the Monarch Knowledge Graph directly in the Neo4j browser",
-    external: true,
-  },
-  {
-    label: "Monarch R",
-    icon: "monarchr",
-    to: "https://monarch-initiative.github.io/monarchr/articles/monarchr",
-    tooltip:
-      "Query and manipulate Monarch KG data in a tidy-inspired R interface",
-    external: true,
-  },
-];
-
 export const TOOL_LINKS: {
   label: string;
   to: string;

frontend/src/global/icons.ts

@@ -90,6 +90,7 @@ const icons = [
   fas.faCalendarWeek,
   fas.faGraduationCap,
   fas.faBookOpenReader,
+  fas.faWrench,
 ];
 
 library.add(...icons);

frontend/src/pages/PageHomeV2.vue

@@ -33,27 +33,11 @@
       </div>
     </div>
   </AppSection>
-
-  <AppSection width="big">
-    <AppHeading :level="1">Explore Knowledge Graph Tools</AppHeading>
-    <div class="custom-grid kg-tools">
-      <template v-for="(tool, id) in KG_TOOL_LINKS" :key="id">
-        <AppToolTile
-          v-tooltip="tool.tooltip"
-          :to="tool.to"
-          :aria-label="tool.tooltip"
-          :icon="tool.icon"
-          :title="tool.label"
-        />
-      </template>
-    </div>
-  </AppSection>
 </template>
 
 <script setup lang="ts">
-import AppToolTile from "@/components/AppToolTile.vue";
 import PageTitle from "@/components/ThePageTitle.vue";
-import { KG_TOOL_LINKS, TOOL_LINKS } from "@/data/toolEntityConfig";
+import { TOOL_LINKS } from "@/data/toolEntityConfig";
 </script>
 
 <style lang="scss" scoped>
@@ -129,12 +113,4 @@ a:focus,
 .icon:focus {
   outline: none;
 }
-
-.kg-tools {
-  margin-top: 2.5em;
-
-  @media (max-width: 1000px) {
-    gap: 2.5em;
-  }
-}
 </style>