Merge pull request #1182 from monarch-initiative/issue-1110-node-page-linkouts

Make Node Page Linkouts More Prominent

Author: kevinschaper

frontend/src/App.vue

@@ -30,7 +30,7 @@
       Disabling the banner is as simple as commenting out this section.
     </TheBanner> -->
 
-    <TheHeaderV2 />
+    <TheHeaderV2 :key="route.path" />
     <main>
       <router-view />
       <TheFloatButtons />

frontend/src/components/AppAssociationTabs.vue

@@ -0,0 +1,96 @@
+<template>
+  <div class="association-tabs">
+    <div class="tab-item" v-if="hasDirectAssociations">
+      <AppButton
+        :info="true"
+        :info-tooltip="directTooltip"
+        :class="['tab-button', { active: directActive }]"
+        :disabled="!hasDirectAssociations"
+        :text="directLabel"
+        color="none"
+        @click="$emit('select', 'direct')"
+      />
+    </div>
+
+    <div class="tab-item" v-if="showAllTab">
+      <AppButton
+        :info="true"
+        :info-tooltip="inferredTooltip"
+        :class="['tab-button', { active: allActive }]"
+        :text="inferredLabel"
+        color="none"
+        @click="$emit('select', 'all')"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import AppButton from "@/components/AppButton.vue";
+
+const props = withDefaults(
+  defineProps<{
+    hasDirectAssociations: boolean;
+    showAllTab: boolean;
+    directActive: boolean;
+    allActive: boolean;
+    directLabel: string;
+    inferredLabel: string;
+    directTooltip?: string;
+    inferredTooltip?: string;
+  }>(),
+  {
+    hasDirectAssociations: true,
+    showAllTab: true,
+    directActive: true,
+    allActive: false,
+    directLabel: "Direct",
+    inferredLabel: "All",
+    directTooltip: undefined,
+    inferredTooltip: undefined,
+  },
+);
+defineEmits<{
+  (e: "select", which: "direct" | "all"): void;
+}>();
+</script>
+
+<style scoped lang="scss">
+$wrap: 900px;
+.association-tabs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25em;
+  .tab-button {
+    z-index: 0;
+    position: relative;
+    min-width: 22em;
+    padding: 0.8rem 1.5rem;
+    border: none;
+    border-radius: 8px 8px 0 0;
+    background-color: $light-gray;
+    &.active {
+      z-index: 1;
+      background-color: $theme;
+      box-shadow: 0 3px 0 0 $theme;
+      color: white;
+    }
+  }
+  :deep(.tab-button) {
+    border: none;
+    outline: none;
+    box-shadow: none;
+    &:focus,
+    &:hover {
+      outline: none;
+      box-shadow: none;
+    }
+  }
+}
+.tab-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+</style>

frontend/src/components/AppBackToTopButton.vue

@@ -0,0 +1,61 @@
+<template>
+  <div class="toc-top" v-show="show">
+    <AppButton
+      design="link"
+      color="none"
+      :text="label"
+      icon="angle-up"
+      icon-position="left"
+      :aria-label="ariaLabel"
+      @click="scrollTop"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useWindowScroll, useWindowSize } from "@vueuse/core";
+import AppButton from "@/components/AppButton.vue";
+
+// Props
+const props = withDefaults(
+  defineProps<{
+    targetId?: string; // anchor to scroll to
+    thresholdVH?: number; // show after this % of viewport
+    label?: string;
+    ariaLabel?: string;
+  }>(),
+  {
+    targetId: "top",
+    thresholdVH: 0.1,
+    label: "Back to top",
+    ariaLabel: "Back to top",
+  },
+);
+
+// Reactive scroll/viewport
+const { y } = useWindowScroll();
+const { height } = useWindowSize();
+
+// Show control after threshold
+const show = computed(() => y.value > height.value * props.thresholdVH);
+
+// Smooth scroll to anchor or page top
+const scrollTop = () => {
+  const el = document.getElementById(props.targetId);
+  el
+    ? el.scrollIntoView({ behavior: "smooth", block: "start" })
+    : window.scrollTo({ top: 0, behavior: "smooth" });
+};
+</script>
+
+<style scoped lang="scss">
+.toc-top {
+  display: flex;
+  z-index: 1;
+  justify-content: center;
+  padding: 1em;
+  border-bottom: 1px solid #e9eef0;
+  background: #fff;
+}
+</style>

frontend/src/components/AppButton.vue

@@ -7,8 +7,21 @@
     :type="type"
     @click="copy ? copyToClipboard(text) : click"
   >
+    <AppIcon v-if="icon && iconPosition === 'left'" :icon="icon" class="icon" />
     <span v-if="text" class="truncate">{{ text }}</span>
-    <AppIcon v-if="icon" :icon="icon" />
+    <!-- icon on the RIGHT (default) -->
+    <AppIcon
+      v-if="icon && iconPosition === 'right'"
+      :icon="icon"
+      class="icon"
+    />
+    <!-- optional info icon -->
+    <AppIcon
+      v-if="info"
+      icon="info-circle"
+      v-tooltip="infoTooltip"
+      class="info-icon"
+    />
   </component>
 </template>
 
@@ -21,29 +34,38 @@ type Props = {
   text?: string;
   /** icon to show */
   icon?: string;
+  /** where to place the icon relative to text */
+  iconPosition?: "left" | "right";
   /** location to link to */
   to?: string;
   /** on click action */
   click?: () => unknown;
   /** visual design */
-  design?: "normal" | "circle" | "small" | "tile";
+  design?: "normal" | "circle" | "small" | "tile" | "big" | "link";
   /** color */
   color?: "primary" | "secondary" | "none";
   /** whether to copy text prop to clipboard on click */
   copy?: boolean;
   /** html button type attribute */
   type?: string;
+  /** show an “i” info icon on the right */
+  info?: boolean;
+  /** tooltip text for the info icon */
+  infoTooltip?: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   text: "",
   icon: "",
+  iconPosition: "right",
   to: "",
   click: undefined,
   design: "normal",
   color: "primary",
   copy: false,
   type: "button",
+  info: false,
+  infoTooltip: "",
 });
 
 /** element ref */
@@ -84,7 +106,6 @@ defineExpose({ button });
     &.primary {
       background: $theme-light;
     }
-
     &.secondary {
       background: $light-gray;
     }
@@ -106,6 +127,12 @@ defineExpose({ button });
     width: fit-content;
   }
 
+  &.big {
+    min-width: min(300px, 100% - 40px);
+    padding: 0px 30px;
+    font-size: 1.75rem;
+  }
+
   &.circle {
     border-radius: 999px;
     color: $off-black;
@@ -115,7 +142,6 @@ defineExpose({ button });
       min-height: 2em;
       padding: 0.25em 0.75em;
     }
-
     &:not(.text) {
       width: 2.5em;
       height: 2.5em;
@@ -124,7 +150,6 @@ defineExpose({ button });
     &.primary {
       background: $theme-light;
     }
-
     &.secondary {
       background: $light-gray;
     }
@@ -143,11 +168,9 @@ defineExpose({ button });
     &.primary {
       color: $theme;
     }
-
     &.secondary {
       color: $off-black;
     }
-
     &:hover,
     &:focus {
       color: $black;
@@ -166,7 +189,6 @@ defineExpose({ button });
     &.primary {
       background: $theme-light;
     }
-
     &.secondary {
       background: $light-gray;
     }
@@ -177,13 +199,61 @@ defineExpose({ button });
       box-shadow: $outline;
     }
   }
+
+  /* link-style button*/
+  &.link {
+    min-height: unset;
+    padding: 0;
+    gap: 6px;
+    background: transparent;
+    color: $theme;
+    text-decoration: none;
+
+    &:hover .truncate,
+    &:focus .truncate {
+      text-decoration: underline;
+      text-decoration-thickness: 2px;
+      text-underline-offset: 3px;
+    }
+
+    .truncate {
+      text-decoration: underline;
+      text-decoration-thickness: 1px;
+      text-underline-offset: 3px;
+    }
+
+    &:focus {
+      border-radius: 6px;
+      outline: none;
+      box-shadow: 0 0 0 3px rgba($theme, 0.25);
+    }
+  }
 }
-</style>
 
-<style lang="scss">
 .fill {
   .button.circle.primary {
     background: $theme-mid;
   }
 }
+
+.icon {
+  margin-left: 0.5em;
+}
+
+/* When icon is on the LEFT, remove the left margin and add a right one */
+.button.link .icon,
+.button.normal .icon,
+.button.small .icon,
+.button.tile .icon,
+.button.big .icon {
+  margin-left: 0.5em;
+}
+.button.link.icon-left .icon {
+  margin-right: 0.25em;
+  margin-left: 0;
+}
+
+.info-icon {
+  margin-left: 0.5em;
+}
 </style>

frontend/src/components/AppCitation.vue

@@ -33,6 +33,15 @@ type Props = {
 
 const props = defineProps<Props>();
 
+/** name/label */
+const title = computed(() => props.title || "");
+
+/** link */
+const link = computed(() => props.link || "");
+
+/** authors */
+const authors = computed(() => props.authors || "");
+
 /** joined details as string */
 const detailsString = computed(() =>
   (props.details || []).filter((e) => e).join("&nbsp; · &nbsp;"),

frontend/src/components/AppDownloadTable.vue

@@ -17,7 +17,9 @@
 import type { DownloadItem } from "@/data/downloads";
 import AppButton from "./AppButton.vue";
 
-defineProps<{ items: DownloadItem[] }>();
+const { items } = withDefaults(defineProps<{ items?: DownloadItem[] }>(), {
+  items: () => [],
+});
 </script>
 
 <style scoped>

frontend/src/components/AppNodeBadge.vue

@@ -62,7 +62,7 @@ type Props = {
   /** whether to show id. not shown by default, unless name/label empty. */
   showId?: boolean;
   /** boolen to use for highlighting */
-  highlight: boolean;
+  highlight?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {