Move foundational products above monarch tools, update MonarchR link (#…

…808)

Co-authored-by: amc-corey-cox <[email protected]>

frontend/e2e/search.test.ts

@@ -3,21 +3,6 @@ import { log } from "../playwright.config";
 
 log();
 
-test("Redirects to explore page from home page", async ({ page }) => {
-  /** go to homepage and focus search box */
-  await page.goto("/");
-  await page.locator("input").focus();
-  await page.waitForURL(/explore/);
-
-  /** go to homepage and click one of tabs */
-  await page.goto("/");
-  await page
-    .getByText(/Phenotype Explorer/i)
-    .first()
-    .click();
-  await page.waitForURL(/explore/);
-});
-
 test("Recent/frequent results show", async ({ page }) => {
   await page.goto("/explore");
 

frontend/src/components/TheHeader.vue

@@ -42,7 +42,20 @@
 
     <!-- navigation bar -->
     <nav :class="['nav', { home, expanded }]">
-      <TabSearch v-if="search" :minimal="true" :header-box="true" />
+      <div v-if="home" class="home">
+        <AppLink v-tooltip="'Go to the homepage'" class="logo" to="/">
+          <TheLogo class="image" />
+          <div class="name">Monarch Initiative</div>
+        </AppLink>
+      </div>
+
+      <TabSearch
+        v-if="search"
+        :minimal="true"
+        :header-box="true"
+        :home="home"
+        :class="[home]"
+      />
 
       <AppLink
         v-tooltip="'Dive right in and use Monarch'"
@@ -92,7 +105,6 @@ const home = computed((): boolean => route.name === "Home");
 /** whether to show search box */
 const search = computed(
   (): boolean =>
-    route.name !== "Home" &&
     !(
       route.hash === "#search" ||
       (route.name === "Explore" && route.hash === "")
@@ -143,8 +155,13 @@ $wrap: 1000px;
 
 @media not all and (max-width: $wrap) {
   .header.home {
-    position: relative;
-    min-height: 300px;
+    //commenting this out makes the header not sticky
+    //position: relative;
+    min-height: 200px;
+  }
+  .header.home .title {
+    margin-top: 70px;
+    margin-bottom: 20px;
   }
 }
 

frontend/src/pages/PageHome.vue

@@ -3,18 +3,7 @@
 -->
 
 <template>
-  <AppSection design="fill">
-    <AppTabs
-      v-model="tab"
-      name="Explore Mode"
-      :tabs="tabs"
-      navigate="Explore"
-    />
-    <TabSearch :minimal="true" :focus-explore="true" />
-  </AppSection>
-
   <AppSection width="big">
-    <AppHeading> Foundational Products </AppHeading>
     <AppGallery>
       <template v-for="category in resources" :key="category">
         <AppTile
@@ -29,6 +18,16 @@
     </AppGallery>
   </AppSection>
 
+  <!--  <AppSection design="fill">-->
+  <!--    <AppTabs-->
+  <!--      v-model="tab"-->
+  <!--      name="Explore Mode"-->
+  <!--      :tabs="tabs"-->
+  <!--      navigate="Explore"-->
+  <!--    />-->
+  <!--    <TabSearch :minimal="true" :focus-explore="true" />-->
+  <!--  </AppSection>-->
+
   <AppSection>
     <AppHeading>What is Monarch?</AppHeading>
 
@@ -184,25 +183,13 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, ref } from "vue";
-import { startCase } from "lodash";
+import { onMounted } from "vue";
 import { getBlogPosts } from "@/api/blog";
-import nodePage from "@/assets/demos/node-page.mp4";
-import phenotypeExplorer from "@/assets/demos/phenotype-explorer.mp4";
-import search from "@/assets/demos/search.mp4";
-import textAnnotator from "@/assets/demos/text-annotator.mp4";
-// import AppHighlight from "@/components/AppHighlight.vue";
 import AppPost from "@/components/AppPost.vue";
-import AppTabs from "@/components/AppTabs.vue";
 import AppTile from "@/components/AppTile.vue";
 import { useQuery } from "@/composables/use-query";
-import tabs from "./explore/tabs.json";
-import TabSearch from "./explore/TabSearch.vue";
 import resources from "./resources.json";
 
-/** selected tab state */
-const tab = ref(tabs[0].id);
-
 const {
   query: runGetBlogPosts,
   data: blogPosts,

frontend/src/pages/explore/PageExplore.vue

@@ -19,8 +19,6 @@ import { useRoute } from "vue-router";
 import { startCase } from "lodash";
 import AppTabs from "@/components/AppTabs.vue";
 import { appTitle } from "@/global/meta";
-import { formatNumber } from "@/util/string";
-import metadata from "./metadata.json";
 import TabMetadata from "./TabMetadata.vue";
 import TabPhenotypeExplorer from "./TabPhenotypeExplorer.vue";
 import tabs from "./tabs.json";

frontend/src/pages/explore/TabMetadata.vue

@@ -32,7 +32,7 @@
   <AppSection>
     <AppFlex gap="big">
       <AppTile
-        to="https://github.com/monarch-initiative/monarchr"
+        to="https://monarch-initiative.github.io/monarchr/articles/monarchr"
         icon="diagram-project"
         title="MonarchR"
         subtitle="R package for exploring the Monarch KG locally"

frontend/src/pages/explore/TabSearch.vue

@@ -12,7 +12,7 @@
         :model-value="search"
         name="Search"
         placeholder="Gene, disease, phenotype, etc."
-        :class="{ 'header-box': headerBox }"
+        :class="{ 'header-box': headerBox, home: home }"
         :options="runGetAutocomplete"
         @focus="onFocus"
         @change="onChange"
@@ -155,6 +155,8 @@ type Props = {
   headerBox?: boolean;
   /** whether to navigate to explore page when focusing search box */
   focusExplore?: boolean;
+  /** whether this is being shown on the home page */
+  home?: boolean;
 };
 
 const props = defineProps<Props>();
@@ -478,7 +480,6 @@ watch(from, () => runGetSearch(false));
 .header-box {
   width: 100%;
 }
-
 .header-box :deep(input) {
   border-top-width: 0;
   border-right-width: 0;