Bids 3142/group filter for slot viz (#496)

* group filter for slot viz * Improve tooltip for slot viz explanation --------- Co-authored-by: D13ce <[email protected]>
gobitfly · Jun 19, 2024 · 310f46d · 310f46d
1 parent 1ce3da1
commit 310f46d
Show file tree

Hide file tree

Showing 8 changed files with 261 additions and 123 deletions.
diff --git 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,28 +468,28 @@
   }
 }
 
-.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;
         align-items: center;
       }
     }
 
-    &.p-accordion-tab-active{
-      .p-accordion-header{
-        svg{
+    &.p-accordion-tab-active {
+      .p-accordion-header {
+        svg {
           transform: rotate(90deg);
         }
       }
     }
   }
-}
+}
diff --git 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
@@ -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
@@ -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>