From 310f46da1e6697cf02aa755cfb9eb3be3fdc1c24 Mon Sep 17 00:00:00 2001
From: MauserBitfly <125363940+MauserBitfly@users.noreply.github.com>
Date: Wed, 19 Jun 2024 09:10:42 +0200
Subject: [PATCH] Bids 3142/group filter for slot viz (#496)

* group filter for slot viz
* Improve tooltip for slot viz explanation

---------

Co-authored-by: D13ce <stefan.benker@bitfly.at>
---
 frontend/assets/css/prime.scss                | 151 +++++++++---------
 frontend/components/bc/BcTooltip.vue          |   1 +
 frontend/components/bc/toggle/MultiBar.vue    |   2 +-
 .../components/dashboard/ValidatorSlotViz.vue |  84 +++++++++-
 .../components/slot/viz/SlotVizViewer.vue     | 133 +++++++++++----
 frontend/i18n/en.json                         |   3 +-
 .../dashboard/useValidatorSlotVizStore.ts     |   8 +-
 frontend/types/network.ts                     |   2 +-
 8 files changed, 261 insertions(+), 123 deletions(-)

diff --git a/frontend/assets/css/prime.scss b/frontend/assets/css/prime.scss
index 728be658c..20ba45cb8 100644
--- a/frontend/assets/css/prime.scss
+++ b/frontend/assets/css/prime.scss
@@ -172,7 +172,8 @@
 
   .p-inputswitch-slider {
     background: var(--button-color-active);
-    transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+    transition: background-color 0.2s, color 0.2s, border-color 0.2s,
+      box-shadow 0.2s;
     border-radius: 30px;
   }
 
@@ -294,83 +295,76 @@
 }
 
 // Multiselect drop-down
-// TODO: Apply our styles better and completely
 
 .p-multiselect {
   @include fonts.button_text;
-  color: var(--primary-contrast-color);
-  background: var(--button-color-active);
+  color: var(--input-active-text-color);
+  background: var(--input-background);
+  border: 1px solid var(--input-border-color);
   height: var(--default-button-height);
-  border: 1px solid var(--button-color-active);
   border-radius: var(--border-radius);
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
   justify-content: center;
-}
-.p-multiselect .p-disabled {
-  color: var(--button-text-color-disabled);
-  background: var(--button-color-disabled);
-  border-color: var(--button-color-disabled);
-}
-.p-multiselect:not(:disabled):hover {
-  background: var(--button-color-hover);
-  border-color: var(--button-color-hover);
-}
-.p-multiselect .p-multiselect-label.p-placeholder {
-  background: var(--searchbar-filter-unselected);
-}
-.p-multiselect .p-multiselect-trigger {
-  background: transparent;
-  color: var(--light-grey);
-  width: 1.5rem;  // MAYBE 2rem IS BETTER
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-.p-multiselect .p-multiselect-label {
-  padding: 6px;
-  padding-top: 3px;
-  transition: background-color 0.2s, color 0.2s, border-color 0.2s, box-shadow 0.2s;
+  width: 100%;
+
+  .p-disabled {
+    opacity: 0.5;
+  }
+  .p-multiselect-trigger {
+    margin-right: var(--padding);
+  }
+  .p-multiselect-label-container {
+    margin-top: auto;
+    margin-bottom: auto;
+    margin-left: var(--padding);
+    .p-multiselect-label {
+      @include utils.truncate-text;
+      &.p-placeholder {
+        background: var(--searchbar-filter-unselected);
+      }
+    }
+  }
 }
 .p-multiselect-panel {
-  background: var(--container-background);
-  border: 0 none;
+  color: var(--input-active-text-color);
+  background: var(--input-background);
+  border: 1px solid var(--input-border-color);
   border-radius: var(--border-radius);
-}
-.p-multiselect-panel .p-multiselect-items {
-  padding: 0.75rem 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item {
-  margin: 0;
-  padding: 4px;
-  border: 0 none;
-  color: var(--text-color);
-  background: transparent;
-  transition: box-shadow 0.2s;
-  border-radius: 0;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight {
-  color: #047857;
-  background: #F0FDFA;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight.p-focus {
-  background: rgba(16, 185, 129, 0.24);
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled).p-focus {
-  color: #4b5563;
-  background: #e5e7eb;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover {
-  color: #4b5563;
-  background: #f3f4f6;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
-  margin-right: 0.5rem;
-}
-.p-multiselect-panel .p-multiselect-items .p-multiselect-item-group {
-  margin: 0;
-  padding: 0.75rem 1.25rem;
-  color: #374151;
-  background: #ffffff;
-  font-weight: 700;
+  padding: var(--padding) var(--padding-small);
+
+  .p-multiselect-header {
+    float: left;
+    margin-right: var(--padding);
+    padding-left: var(--padding-small);
+    .p-multiselect-close {
+      display: none;
+    }
+  }
+
+  .p-multiselect-items-wrapper {
+    max-width: 200px;
+    margin-top: var(--padding);
+    height: 100%;
+    border-top: 1px solid var(--input-border-color);
+
+    .p-multiselect-items {
+      .p-multiselect-item {
+        padding: var(--padding-small) 4px var(--padding-small);
+        border-radius: var(--border-radius);
+
+        &:hover {
+          background: var(--list-hover-background);
+          color: var(--list-hover-color);
+        }
+        .p-checkbox {
+          margin-right: var(--padding);
+        }
+        span {
+          @include utils.truncate-text;
+        }
+      }
+    }
+  }
 }
 
 /***
@@ -401,10 +395,9 @@
   &.table {
     background: var(--background-color);
   }
-  &.header{
+  &.header {
     background: transparent;
     border: none;
-
   }
 
   &:not(.p-disabled).p-focus {
@@ -475,15 +468,15 @@
   }
 }
 
-.p-accordion{
-  .p-accordion-tab{
-    .p-accordion-header{
+.p-accordion {
+  .p-accordion-tab {
+    .p-accordion-header {
       color: var(--container-color);
       background-color: var(--container-background);
       border: 1px solid var(--container-border-color);
       border-radius: var(--border-radius);
       padding: 16px;
-      .p-accordion-header-link{
+      .p-accordion-header-link {
         display: flex;
         justify-content: space-between;
         flex-direction: row-reverse;
@@ -491,12 +484,12 @@
       }
     }
 
-    &.p-accordion-tab-active{
-      .p-accordion-header{
-        svg{
+    &.p-accordion-tab-active {
+      .p-accordion-header {
+        svg {
           transform: rotate(90deg);
         }
       }
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/components/bc/BcTooltip.vue b/frontend/components/bc/BcTooltip.vue
index a5c9c625e..fdd02786f 100644
--- a/frontend/components/bc/BcTooltip.vue
+++ b/frontend/components/bc/BcTooltip.vue
@@ -269,6 +269,7 @@ onUnmounted(() => {
   color: var(--tt-color);
   @include fonts.tooltip_text;
   pointer-events: none;
+  max-width: 300px;
 
   &.dark {
     --tt-bg-color: var(--light-black);
diff --git a/frontend/components/bc/toggle/MultiBar.vue b/frontend/components/bc/toggle/MultiBar.vue
index 340179e7f..65edf2309 100644
--- a/frontend/components/bc/toggle/MultiBar.vue
+++ b/frontend/components/bc/toggle/MultiBar.vue
@@ -51,7 +51,7 @@ watch(modelValues, () => {
 <style lang="scss" scoped>
 .bc-togglebar {
   display: inline-flex;
-  gap: var(--padding);
+  gap: var(--padding-small);
   padding: 7px 10px;
 
   background-color: var(--container-background);
diff --git a/frontend/components/dashboard/ValidatorSlotViz.vue b/frontend/components/dashboard/ValidatorSlotViz.vue
index 69325d546..b475e61e6 100644
--- a/frontend/components/dashboard/ValidatorSlotViz.vue
+++ b/frontend/components/dashboard/ValidatorSlotViz.vue
@@ -1,20 +1,26 @@
 <script setup lang="ts">
 
+import { orderBy } from 'lodash-es'
 import { useValidatorSlotVizStore } from '~/stores/dashboard/useValidatorSlotVizStore'
+import { getGroupLabel } from '~/utils/dashboard/group'
 
+const { t: $t } = useI18n()
 const { dashboardKey } = useDashboardKey()
-const { validatorCount } = useValidatorDashboardOverviewStore()
+const { validatorCount, overview } = useValidatorDashboardOverviewStore()
+const { networkInfo } = useNetworkStore()
+const selectedGroups = ref<number[]>([])
 
 const { tick, resetTick } = useInterval(12)
 
 const { slotViz, refreshSlotViz } = useValidatorSlotVizStore()
+
 await useAsyncData('validator_dashboard_slot_viz', () => refreshSlotViz(dashboardKey.value))
 
-watch(() => [dashboardKey.value, tick.value], (newValue, oldValue) => {
-  if (oldValue && newValue[0] !== oldValue[0]) {
+watch(() => [dashboardKey.value, selectedGroups.value, tick.value], (newValue, oldValue) => {
+  if (oldValue && (newValue[0] !== oldValue[0] || (newValue[1] as number[]).length !== (oldValue[1] as number[]).length)) {
     resetTick()
   }
-  refreshSlotViz(dashboardKey.value)
+  refreshSlotViz(dashboardKey.value, selectedGroups.value)
 }, { immediate: true })
 
 const initiallyHideVisible = computed(() => {
@@ -23,11 +29,79 @@ const initiallyHideVisible = computed(() => {
   }
   return validatorCount.value > 60
 })
+
+const groups = computed(() => {
+  if (!overview.value?.groups) {
+    return []
+  }
+  return orderBy(overview.value.groups, [g => g.name.toLowerCase()], 'asc')
+})
+
+const selectAll = () => {
+  selectedGroups.value = groups.value.map(g => g.id)
+}
+
+const toggleAll = () => {
+  if (selectedGroups.value.length < groups.value.length) {
+    selectAll()
+  } else {
+    selectedGroups.value = []
+  }
+}
+
+watch(groups, (newGroups, oldGroups) => {
+  if (!newGroups || newGroups.length <= 0) {
+    selectedGroups.value = []
+  }
+  if (!oldGroups || JSON.stringify(newGroups) !== JSON.stringify(oldGroups)) {
+    selectAll()
+  }
+}, { immediate: true })
+
+const selectedLabel = computed(() => {
+  if (selectedGroups.value.length === 0 || selectedGroups.value.length === groups.value.length) {
+    return $t('dashboard.group.selection.all')
+  }
+  return orderBy(selectedGroups.value.map(id => getGroupLabel($t, id, groups.value)), [g => g.toLowerCase()], 'asc').join(', ')
+})
+
 </script>
 
 <template>
-  <SlotVizViewer v-if="slotViz" :data="slotViz" :timestamp="tick" :initially-hide-visible="initiallyHideVisible" />
+  <SlotVizViewer
+    v-if="slotViz"
+    :data="slotViz"
+    :network-info="networkInfo"
+    :timestamp="tick"
+    :initially-hide-visible="initiallyHideVisible"
+  >
+    <template #header-right>
+      <MultiSelect
+        v-if="groups.length > 1"
+        v-model="selectedGroups"
+        :options="groups"
+        option-label="name"
+        option-value="id"
+        :placeholder="$t('dashboard.group.selection.all')"
+        class="group-selection"
+      >
+        <template #header>
+          <span class="pointer" @click="toggleAll">
+            {{ $t('dashboard.group.selection.all') }}
+          </span>
+        </template>
+        <template #value>
+          {{ selectedLabel }}
+        </template>
+      </MultiSelect>
+    </template>
+  </SlotVizViewer>
 </template>
 
 <style lang="scss" scoped>
+@media (max-width: 800px) {
+  .group-selection {
+    height: 46px;
+  }
+}
 </style>
diff --git a/frontend/components/slot/viz/SlotVizViewer.vue b/frontend/components/slot/viz/SlotVizViewer.vue
index 0051832e4..2ad866827 100644
--- a/frontend/components/slot/viz/SlotVizViewer.vue
+++ b/frontend/components/slot/viz/SlotVizViewer.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import { faEye } from '@fortawesome/pro-solid-svg-icons'
+import {
+  faInfoCircle
+} from '@fortawesome/pro-regular-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import type { SlotVizEpoch } from '~/types/api/slot_viz'
 import { type SlotVizCategories } from '~/types/dashboard/slotViz'
 import { formatNumber } from '~/utils/format'
@@ -7,11 +11,13 @@ import { IconSlotAttestation, IconSlotBlockProposal, IconSlotSlashing, IconSlotS
 import { COOKIE_KEY } from '~/types/cookie'
 import { useNetworkStore } from '~/stores/useNetworkStore'
 import type { MultiBarItem } from '~/types/multiBar'
+import type { ChainInfoFields } from '~/types/network'
 
 interface Props {
   data: SlotVizEpoch[],
   initiallyHideVisible?: boolean,
   timestamp?: number
+  networkInfo?: ChainInfoFields
 }
 const props = defineProps<Props>()
 
@@ -95,28 +101,38 @@ watch(props, () => {
 </script>
 <template>
   <div id="slot-viz" class="content">
-    <div class="rows">
-      <div class="row" />
-      <div v-for="row in props.data" :key="row.epoch" class="row">
-        <div class="epoch">
-          <BcFormatNumber :text="row.state === 'head' ? $t('slotViz.head') : formatNumber(row.epoch)" />
-        </div>
-      </div>
-    </div>
-    <div class="rows">
-      <div class="row">
+    <div class="header-row">
+      <BcTooltip class="info" :text="$t('slotViz.info_tootlip')" :dont-open-permanently="true">
+        <BcLink to="https://kb.beaconcha.in/v2beta/slot-visualization#how-does-it-work" target="_blank" class="link">
+          <FontAwesomeIcon :icon="faInfoCircle" />
+        </BcLink>
+      </BCTooltip>
+      <div class="filter-row">
         <BcToggleMultiBar v-model="selectedCategories" :icons="icons" />
       </div>
-      <div v-for="row in props.data" :key="row.epoch" class="row">
-        <SlotVizTile
-          v-for="slot in row.slots"
-          :key="slot.slot"
-          :data="slot"
-          :selected-categories="selectedCategories"
-          :current-slot-id="currentSlotId"
-        />
+      <h1 class="network">
+        {{ networkInfo?.family }} {{ networkInfo?.name }}
+      </h1>
+      <div class="header-right">
+        <slot name="header-right" />
       </div>
     </div>
+    <div class="grid">
+      <template v-for="row in props.data" :key="row.epoch">
+        <div class="epoch">
+          <BcFormatNumber :text="row.state === 'head' ? $t('slotViz.head') : formatNumber(row.epoch)" />
+        </div>
+        <div class="row">
+          <SlotVizTile
+            v-for="slot in row.slots"
+            :key="slot.slot"
+            :data="slot"
+            :selected-categories="selectedCategories"
+            :current-slot-id="currentSlotId"
+          />
+        </div>
+      </template>
+    </div>
   </div>
 </template>
 <style lang="scss" scoped>
@@ -124,23 +140,76 @@ watch(props, () => {
 @use '~/assets/css/fonts.scss';
 
 .content {
+  position: relative;
   @include main.container;
-  display: flex;
-  gap: var(--padding);
-  overflow-x: auto;
-  overflow-y: hidden;
-  min-height: 180px;
-  padding: var(--padding-large) var(--padding-large) var(--padding-large) 9px;
+
+  .header-row {
+    display: grid;
+    justify-content: center;
+    padding: var(--padding-large) var(--padding-large) var(--padding) 9px;
+    gap: var(--padding);
+    grid-template:
+      [row1-start] "info filter-row network header-right"[row1-end] / max-content max-content 1fr max-content;
+
+    @media (max-width: 800px) {
+      column-gap: var(--padding-small);
+      grid-template:
+        [row1-start] "network network network"[row1-end] [row2-start] "info filter-row header-right"[row2-end] / max-content 1fr max-content;
+    }
+
+    .network {
+      grid-area: network;
+      flex-grow: 1;
+      text-align: center;
+      margin-top: auto;
+      margin-bottom: auto;
+      justify-self: stretch;
+    }
+
+    .info {
+      grid-area: info;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 49px;
+
+      @media (max-width: 800px) {
+        width: 20px;
+      }
+    }
+
+    .header-right {
+      grid-area: header-right;
+      width: 196px;
+      margin-top: auto;
+      margin-bottom: auto;
+
+      @media (max-width: 490px) {
+        width: 87px;
+      }
+    }
+
+    .filter-row {
+      grid-area: filter-row;
+      display: flex;
+      align-items: center;
+    }
+  }
 
   .epoch {
     @include fonts.small_text_bold;
+    margin-top: auto;
+    margin-bottom: auto;
   }
 
-  .rows {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    gap: var(--padding-large);
+  .grid {
+    padding: 0 var(--padding-large) var(--padding-large) 9px;
+    display: grid;
+    gap: var(--padding);
+    overflow-x: auto;
+    overflow-y: hidden;
+    min-height: 180px;
+    grid-template-columns: 49px max-content;
 
     .row {
       display: flex;
@@ -148,10 +217,6 @@ watch(props, () => {
       justify-content: flex-start;
       height: 30px;
       gap: var(--padding);
-
-      &:first-child {
-        height: 46px;
-      }
     }
   }
 
@@ -167,7 +232,7 @@ watch(props, () => {
     height: 100%;
     width: 1px;
     position: absolute;
-    left: -8px;
+    left: -5px;
   }
 }
 </style>
diff --git a/frontend/i18n/en.json b/frontend/i18n/en.json
index d981192b7..3cc939bc6 100644
--- a/frontend/i18n/en.json
+++ b/frontend/i18n/en.json
@@ -150,12 +150,13 @@
   },
   "slotViz": {
     "head": "Head",
+    "info_tootlip": "Slot Viz explanation",
     "filter": {
       "attestation": "If enabled, attestations will be shown.",
       "proposal": "If enabled, blocks will be shown.",
       "slashing": "If enabled, slashings will be shown.",
       "sync": "If enabled, sync committees will be shown.",
-      "visible": "If enabled, all duties will be shown."
+      "visible": "If enabled, all duty icons for the duties selected to the left will be shown."
     },
     "tooltip": {
       "attestation": "Attestation",
diff --git a/frontend/stores/dashboard/useValidatorSlotVizStore.ts b/frontend/stores/dashboard/useValidatorSlotVizStore.ts
index ebd1a79fc..1a487dd87 100644
--- a/frontend/stores/dashboard/useValidatorSlotVizStore.ts
+++ b/frontend/stores/dashboard/useValidatorSlotVizStore.ts
@@ -14,8 +14,12 @@ export function useValidatorSlotVizStore () {
 
   const slotViz = computed(() => data.value)
 
-  async function refreshSlotViz (dashboardKey: DashboardKey) {
-    const res = await fetch<InternalGetValidatorDashboardSlotVizResponse>(API_PATH.DASHBOARD_SLOTVIZ, { headers: {} }, { dashboardKey: dashboardKey || 'MQ' })
+  async function refreshSlotViz (dashboardKey: DashboardKey, groups?: number[]) {
+    let query
+    if (groups?.length) {
+      query = { groups: groups.join(',') }
+    }
+    const res = await fetch<InternalGetValidatorDashboardSlotVizResponse>(API_PATH.DASHBOARD_SLOTVIZ, { headers: {}, query }, { dashboardKey: dashboardKey || 'MQ' })
 
     // We use this hacky solution as we don't have an api endpoint to load a slot viz without validators
     // So we load it for a small public dashboard and then remove the validator informations from it.
diff --git a/frontend/types/network.ts b/frontend/types/network.ts
index 3617fc7f1..9fca0d21f 100644
--- a/frontend/types/network.ts
+++ b/frontend/types/network.ts
@@ -30,7 +30,7 @@ export enum ChainIDs {
   Chiado = 10200
 }
 
-interface ChainInfoFields {
+export interface ChainInfoFields {
   name: string,
   description: string,
   family: ChainFamily,