Beds 1037/large dashboards should not load slot viz icons and absolute values #1303

enzo-bitfly · 2025-01-29T16:41:57Z

Changes:

SlotViz:

Add initial state and persistance to SlotViz icons
Restructure component hierarchy for slot-viz section (duties toggle, group selector and slots)
Prevent extra slot-viz fetch that happened between changing dashboard and loading group-selector
Prevent horizontal scrollbar when the page content is at it's maximum width by making the horizontal paddings smaller (this was introduced when adapting for Gnosis, but it's a design error anyway, as the slot-viz horizontal padding is too small in the designs themselves)

Summary table:

Add initial state and persist absolute/relative values

ValidatorDashboardOverviewStore

Join store and composable that was placed in the same file, and adapt all usages to keep reactivity

Restructure of `SlotViz` section:

- This change affects all files that use the reactive values of the store, so that they keep their reactivity - Additionally, add `loading` state to the store

marcel-bitfly · 2025-01-30T07:27:53Z

np: commit message
(feat(DashboardSlotViz): calculate and persist slotviz visible duties

default visible duties depend on the dashbnoard being shared and over or under 64 validators
loading/intermediate states are added to prevent flashes on the visible duties when changing dashboards)

if this is the commit which solves the issue plz put a reference in:

feat(...

See: BEDS-1037

also I think all these commits kind of handle the same thing (reason for the code change) and should be one commit

marcel-bitfly

I can imagine this was a very challenging task, although it sounded very easy.
Nice how deep you digged into the architecture of the concerned components and that you took the chance to simplify things and create a cleaner data flow.

Some things grew in complexity, that happens sometimes, especially when you are unfamiliar with the code base and everything is tightly coupled.

In general we should not add more complexity, but abort refactoring (thats also one benefit of a clean commit structure, that we could take commits out, e.g. into another branch). But this time it does not hurt us to stay with your current implementation.

Good work in respect to the unforeseeable complexity 💪

frontend/components/dashboard/ValidatorSlotViz.vue

frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts

frontend/composables/useValidatorDashboardGroups.ts

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

marcel-bitfly · 2025-01-30T07:40:44Z

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

        class="dashboard-slot-viz-group-selector"
        @update-selected-group-ids="(newGroupIdSelection) => selectedGroupIds = newGroupIdSelection"
      />
    </div>

    <div
+      v-if="(loadingSlotViz && !refetchingSlotViz) || (loadingOverview && !!dashboardKey)"


We talked already how this refactoring worked out for you, so I understand that such things happen sometimes.

I just have to point out that this is too complex and can for sure be avoided in the future.

This brings up a good point: I was setting loading = true in the validator_overview_store too early, and it remained true even if the fetch wasn't performed by lack of dashboardKey in the case of guest dashboards. I can now remove the !!dashboardKey at least.

frontend/components/dashboard/slot-viz/DashboardSlotVizDutyVisibilityToggle.vue

frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts

cloudflare-workers-and-pages · 2025-01-30T11:43:15Z

Deploying beaconchain with Cloudflare Pages

Latest commit:	`e2c3d79`
Status:	⚡️ Build in progress...

View logs

enzo-bitfly

Great review, thanks 👍

enzo-bitfly · 2025-01-30T09:44:28Z

frontend/.vscode/settings.json

@@ -13,6 +13,7 @@
        "DashboardChartSummary",
        "DashboardChartSummaryFilter",
        "DashboardGroupManagementModal",
+        "DashboardSlotViz",


I rephrased the commit message and removed the scope

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

enzo-bitfly · 2025-01-30T10:14:59Z

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

@@ -103,6 +105,7 @@ watch(
      </BcTooltip>

      <DashboardSlotVizDutyVisibilityToggle
+        :initially-hide-visible="isSharedDashboard && !!isLargeDashboard"


Yeah it's ugly. I removed it and used the values directly in DashboardSlotVizDutyVisibilityToggle

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

enzo-bitfly · 2025-01-30T10:24:29Z

frontend/components/dashboard/slot-viz/DashboardSlotViz.vue

        class="dashboard-slot-viz-group-selector"
        @update-selected-group-ids="(newGroupIdSelection) => selectedGroupIds = newGroupIdSelection"
      />
    </div>

    <div
+      v-if="(loadingSlotViz && !refetchingSlotViz) || (loadingOverview && !!dashboardKey)"


This brings up a good point: I was setting loading = true in the validator_overview_store too early, and it remained true even if the fetch wasn't performed by lack of dashboardKey in the case of guest dashboards. I can now remove the !!dashboardKey at least.

frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts

marcel-bitfly · 2025-01-30T14:07:31Z

frontend/stores/dashboard/useValidatorDashboardOverviewStore.ts

+  const isLargeDashboard = computed(() => {
+    if (!validatorCount.value) return false
+
+    // This value is a product decision from Bitfly, and doesn't stem from any mechanism in the blockchains we handle.


Suggested change

// This value is a product decision from Bitfly, and doesn't stem from any mechanism in the blockchains we handle.

// this amount is a product decision

marcel-bitfly

thx

…roup ids

- default visible duties depend on the dashbnoard being `shared` and over or under 64 validators - loading/intermediate states are added to prevent flashes on the visible duties when changing dashboards See: BEDS-1037

…ability

refactor: move composable into validatorDashboardOverviewStore

17af0b2

- This change affects all files that use the reactive values of the store, so that they keep their reactivity - Additionally, add `loading` state to the store

marcel-bitfly requested changes Jan 30, 2025

View reviewed changes

refactor: improve slotviz section's component structure and namings

dde2724

enzo-bitfly force-pushed the BEDS-1037/large-dashboards-should-not-load-slot-viz-icons-and-absolute-values branch from dbe0096 to 5e92a8e Compare January 30, 2025 11:43

enzo-bitfly commented Jan 30, 2025

View reviewed changes

marcel-bitfly reviewed Jan 30, 2025

View reviewed changes

marcel-bitfly approved these changes Jan 30, 2025

View reviewed changes

enzo-bitfly added 5 commits January 30, 2025 16:30

perf: prevent unnecessary request for slotviz data before setting g…

aac86f0

…roup ids

feat: calculate and persist slotviz visible duties

1984d4e

- default visible duties depend on the dashbnoard being `shared` and over or under 64 validators - loading/intermediate states are added to prevent flashes on the visible duties when changing dashboards See: BEDS-1037

feat(DashboardTableSummary): calculate and persist initial values' unit

6391170

refactor(DashboardTableSummary): reorganize component for better read…

951a175

…ability

fix(DashboardSlotViz): prevent horizontal scrollbar on full width

e2c3d79

enzo-bitfly force-pushed the BEDS-1037/large-dashboards-should-not-load-slot-viz-icons-and-absolute-values branch from 5e92a8e to e2c3d79 Compare January 30, 2025 15:37

enzo-bitfly merged commit 45bccf5 into staging Jan 30, 2025
1 of 2 checks passed

enzo-bitfly deleted the BEDS-1037/large-dashboards-should-not-load-slot-viz-icons-and-absolute-values branch January 30, 2025 15:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Beds 1037/large dashboards should not load slot viz icons and absolute values #1303

Beds 1037/large dashboards should not load slot viz icons and absolute values #1303

enzo-bitfly commented Jan 29, 2025 •

edited

Loading

marcel-bitfly commented Jan 30, 2025 •

edited

Loading

marcel-bitfly left a comment

marcel-bitfly Jan 30, 2025

enzo-bitfly Jan 30, 2025

cloudflare-workers-and-pages bot commented Jan 30, 2025 •

edited

Loading

enzo-bitfly left a comment

enzo-bitfly Jan 30, 2025

enzo-bitfly Jan 30, 2025

enzo-bitfly Jan 30, 2025

marcel-bitfly Jan 30, 2025

marcel-bitfly left a comment

	// This value is a product decision from Bitfly, and doesn't stem from any mechanism in the blockchains we handle.
	// this amount is a product decision

Beds 1037/large dashboards should not load slot viz icons and absolute values #1303

Beds 1037/large dashboards should not load slot viz icons and absolute values #1303

Conversation

enzo-bitfly commented Jan 29, 2025 • edited Loading

Changes:

Restructure of SlotViz section:

marcel-bitfly commented Jan 30, 2025 • edited Loading

marcel-bitfly left a comment

Choose a reason for hiding this comment

marcel-bitfly Jan 30, 2025

Choose a reason for hiding this comment

enzo-bitfly Jan 30, 2025

Choose a reason for hiding this comment

cloudflare-workers-and-pages bot commented Jan 30, 2025 • edited Loading

Deploying beaconchain with Cloudflare Pages

enzo-bitfly left a comment

Choose a reason for hiding this comment

enzo-bitfly Jan 30, 2025

Choose a reason for hiding this comment

enzo-bitfly Jan 30, 2025

Choose a reason for hiding this comment

enzo-bitfly Jan 30, 2025

Choose a reason for hiding this comment

marcel-bitfly Jan 30, 2025

Choose a reason for hiding this comment

marcel-bitfly left a comment

Choose a reason for hiding this comment

enzo-bitfly commented Jan 29, 2025 •

edited

Loading

Restructure of `SlotViz` section:

marcel-bitfly commented Jan 30, 2025 •

edited

Loading

cloudflare-workers-and-pages bot commented Jan 30, 2025 •

edited

Loading