Nobids/toggle bar

frontend/assets/css/prime.scss

@@ -16,6 +16,7 @@
 
   display: flex;
   justify-content: center;
+  align-items: center;
 
   transition: background-color 0.2s, color 0.2s, border-color 0.2s;
 
@@ -202,4 +203,4 @@
 .p-toast .p-toast-message.p-toast-message-error .p-toast-message-icon,
 .p-toast .p-toast-message.p-toast-message-error .p-toast-icon-close {
   color: #ff5757;
-}
+}

frontend/components/bc/toggle/MultiBar.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import type { Component } from 'vue'
+
+interface Props {
+  icons: {
+    icon?: IconDefinition
+    component?: Component,
+    value: string
+  }[]
+}
+
+const props = defineProps<Props>()
+
+const selected = defineModel<string[]>({ required: true })
+
+const inital: Record<string, boolean> = {}
+const modelValues = ref<Record<string, boolean>>(props.icons.reduce((map, { value }) => {
+  map[value] = selected.value.includes(value)
+  return map
+}, inital))
+
+watch(modelValues, () => {
+  const list: string[] = []
+  Object.entries(modelValues.value).forEach(([key, value]) => {
+    if (value) {
+      list.push(key)
+    }
+  })
+  selected.value = list
+}, { deep: true })
+
+</script>
+
+<template>
+  <div class="bc-togglebar">
+    <BcToggleMultibarButton v-for="icon in props.icons" :key="icon.value" v-model="modelValues[icon.value]" :icon="icon.icon">
+      <template #icon>
+        <slot :name="icon.value">
+          <component :is="icon.component" />
+        </slot>
+      </template>
+    </BcToggleMultibarButton>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.bc-togglebar {
+  display: inline-flex;
+  gap: var(--padding);
+  padding: 7px 10px;
+
+  background-color: var(--container-background);
+  border: solid 1px var(--container-border-color);
+  border-radius: var(--border-radius);
+}
+</style>

frontend/components/bc/toggle/MultibarButton.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core'
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+
+interface Props {
+  icon?: IconDefinition,
+  falseIcon?: IconDefinition,
+}
+
+const props = defineProps<Props>()
+
+const selected = defineModel<boolean | undefined>({ required: true })
+
+const icon = computed(() => {
+  return selected.value || !props.falseIcon ? props.icon : props.falseIcon
+})
+</script>
+
+<template>
+  <ToggleButton v-model="selected" class="bc-toggle" on-label="" off-icon="">
+    <template #icon="slotProps">
+      <slot name="icon" v-bind="slotProps">
+        <FontAwesomeIcon v-if="icon" :icon="icon" />
+      </slot>
+    </template>
+  </ToggleButton>
+</template>
+
+<style lang="scss">
+.bc-toggle {
+  &.p-button {
+    &.p-togglebutton {
+
+      width: 30px;
+      height: 30px;
+      padding: 2px;
+      border-style: none;
+
+      &:not(.p-highlight) {
+        background-color: var(--container-background);
+        color: var(--container-color);
+      }
+
+      // this is needed as the primvevue ToggleButton adds a yes/no label if none is provided
+      .p-button-label {
+        display: none;
+      }
+    }
+
+  }
+}
+</style>

frontend/components/playground/PlaygroundIcons.vue

@@ -1,3 +1,6 @@
+<script setup lang="ts">
+</script>
+
 <template>
   <div id="iconHolder" class="icon_holder">
     <div>

frontend/components/playground/PlaygroundStyling.vue

@@ -5,6 +5,8 @@ import {
 import {
   faChartColumn
 } from '@fortawesome/pro-regular-svg-icons'
+import { BcToggleMultiBar, IconSlotBlockProposal } from '#components'
+
 const emptyModalVisibility = ref(false)
 const headerPropModalVisibility = ref(false)
 const slotModalVisibility = ref(false)
@@ -17,6 +19,11 @@ const toggleLoading = () => {
   loading.value = !loading.value
 }
 
+const selected = ref(true)
+
+const completeList = ref([{ value: 'attestation' }, { value: 'proposal', component: IconSlotBlockProposal }, { value: 'sync' }, { value: 'chart', icon: faChartColumn }])
+const selectedList = ref<string[]>(['attestation', 'proposal'])
+
 </script>
 
 <template>
@@ -74,7 +81,10 @@ const toggleLoading = () => {
     </TabPanel>
     <TabPanel header="Toggle">
       <div class="element_container">
-        <div>isTable: {{ isTable }} <BcIconToggle v-model="isTable" :true-icon="faTable" :false-icon="faChartColumn" /></div>
+        <div>
+          isTable: {{ isTable }}
+          <BcIconToggle v-model="isTable" :true-icon="faTable" :false-icon="faChartColumn" />
+        </div>
 
         <div>
           isAttestation: {{ isAttestation }}
@@ -87,6 +97,22 @@ const toggleLoading = () => {
             </template>
           </BcIconToggle>
         </div>
+
+        <div>
+          Selected: {{ selected }}
+          <BcToggleButton v-model="selected" :icon="faTable" />
+        </div>
+        <div>
+          <BcToggleMultiBar v-model="selectedList" :icons="completeList" style="margin-right: 10px;">
+            <template #attestation>
+              <IconSlotAttestation />
+            </template>
+            <template #sync>
+              <IconSlotSync />
+            </template>
+          </BcToggleMultiBar>
+          Selected: {{ selectedList.join(', ') }}
+        </div>
       </div>
     </TabPanel>
     <TabPanel header="Spinner">
@@ -116,9 +142,9 @@ const toggleLoading = () => {
   flex-wrap: wrap;
   gap: 10px;
 }
-.box{
+
+.box {
   width: 200px;
   height: 200px;
   background-color: antiquewhite;
-}
-</style>
+}</style>

frontend/components/slot/viz/SlotVizTile.vue

@@ -1,13 +1,20 @@
 <script setup lang="ts">
 import type { VDBSlotVizSlot } from '~/types/api/slot_viz'
-import { type SlotVizIcons } from '~/types/dashboard/slotViz'
+import { type SlotVizCategories, type SlotVizIcons } from '~/types/dashboard/slotViz'
 interface Props {
-  data: VDBSlotVizSlot
+  data: VDBSlotVizSlot,
+  selectedCategoris: SlotVizCategories[]
 }
 const props = defineProps<Props>()
 
 const data = computed(() => {
-  const slot = props.data
+  const slot:VDBSlotVizSlot = {
+    ...props.data,
+    attestations: props.selectedCategoris.includes('attestation') ? props.data.attestations : undefined,
+    proposal: props.selectedCategoris.includes('proposal') ? props.data.proposal : undefined,
+    slashing: props.selectedCategoris.includes('slashing') ? props.data.slashing : undefined,
+    sync: props.selectedCategoris.includes('sync') ? props.data.sync : undefined
+  }
   let outer = ''
   const icons: SlotVizIcons[] = []
   switch (slot.status) {
@@ -24,9 +31,9 @@ const data = computed(() => {
   if (slot.status === 'scheduled') {
     inner = 'pending'
   } else {
-    const hasFailed = !!slot.attestations?.failed_count || !!slot.sync?.failed_count || [...[slot.proposal], ...slot.slashing ?? []].find(duty => duty?.status === 'failed')
-    const hasSuccess = !!slot.attestations?.success_count || !!slot.sync?.success_count || [...[slot.proposal], ...slot.slashing ?? []].find(duty => duty?.status === 'success')
-    const hasPending = !!slot.attestations?.pending_count || !!slot.sync?.pending_count || [...[slot.proposal], ...slot.slashing ?? []].find(duty => duty?.status === 'scheduled')
+    const hasFailed = !!slot.attestations?.failed || !!slot.sync?.failed || !!slot.slashing?.failed || (!!slot.proposal && slot.status === 'missed')
+    const hasSuccess = !!slot.attestations?.success || !!slot.sync?.success || !!slot.slashing?.success || (!!slot.proposal && slot.status === 'proposed')
+    const hasPending = !!slot.attestations?.scheduled || !!slot.sync?.scheduled
     if (!hasFailed && !hasSuccess && !hasPending) {
       inner = 'proposed'
     } else if (hasFailed && hasSuccess) {
@@ -43,7 +50,7 @@ const data = computed(() => {
   if (slot.proposal) {
     icons.push('proposal')
   }
-  if (slot.slashing?.length) {
+  if (slot.slashing) {
     icons.push('slashing')
   }
   if (slot.sync) {