Replace static diagram with animated cluster fleet#19
Merged
Conversation
Transform the architecture diagram from a static representation into an animated visualization that demonstrates PostgreSQL cluster provisioning and lifecycle management. The visualization better communicates Autobase's capability to manage infrastructure at scale.
Replace static predefined growth stages with dynamic animation using randomized scheduling and procedurally generated messages. The animation now randomly varies the timing and content of fleet operations (scaling, healing, maintaining, monitoring) instead of following a fixed sequence. Update layout to accommodate single-line messages instead of multi-line arrays.
Add provisioning state visualization to the fleet animation by tracking activity cycles and displaying cluster provisioning ranges every 9 activities. Improve animation timing for smoother transitions (650-1300ms). Update UI labels for clarity: 'Every cluster lifecycle' to 'Fully managed lifecycle' and 'Autobase Platform' to uppercase.
Implement dynamic replica count visualization in the architecture diagram. Replica counts now scale from 2 to 4 based on service scaling activity, managed as component state. Replicas are rendered dynamically instead of statically, and position classes for replicas 3 and 4 are added to support the increased replica count. Animation updated from 'serviceScale' to 'replicaProvision' to reflect the new scaling behavior.
Refactor service activation logic to avoid selecting the same service consecutively and optimize replica count updates. Introduces activateService callback with refs to track previous selections and maintain efficient state. Simplifies settled activity management by storing full activity objects instead of indices.
Remove the monitoring service type from the fleet diagram and replace it with maintaining. This includes: - Removing the monitoring activity from settled activities - Changing the default service type fallback from 'monitoring' to 'maintaining' - Updating the initial settled activity index to skip the removed monitoring activity - Removing associated CSS animations and styles for the monitoring service type
Adds a hoverable cluster preview UI to FleetCluster. New markup in src/components/ArchDiagramSection/index.js and extensive styles in styles.module.css render a primary/replica preview, reveal animation, and responsive positioning for different grid breakpoints. Also updates the fleet status label from "AUTOMATION ACTIVE" to "SYSTEM ACTIVE".
Enable interactive previews for fleet cluster tiles: add openPreviewIndex state and handlers in ClusterFleet, keyboard handlers and click/tap support in FleetCluster, and close-on-outside/Escape logic. Improve ARIA semantics (role=group for fleet, focusable cluster tiles, aria-expanded/label) and mark the preview element aria-hidden. Update styles to show previews via a .fleetClusterPreviewOpen class, add pointer cursor and focus-visible outline, and replace hover-only selectors so previews work for keyboard/touch. Purpose: improve accessibility, keyboard and touch interaction for cluster previews.
Add createReplicaTargets and replicaTargetsRef to generate a per-cluster desired replica count (with shuffling) and persist it. activateService now checks replicaCounts against replicaTargets instead of the global maxReplicaCount. Prefer-reduced-motion path sets replicaCounts directly to the targets. This enables varied, randomized replica goals per cluster and updates the scaling candidate selection accordingly.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Transform the architecture diagram from a static representation into an animated visualization that demonstrates PostgreSQL cluster provisioning and lifecycle management.
The visualization better communicates Autobase's capability to manage infrastructure at scale.