Skip to content

Refactor(UVE): Real-Time Canvas#34173

Open
fmontes wants to merge 206 commits intomainfrom
uve-experiment
Open

Refactor(UVE): Real-Time Canvas#34173
fmontes wants to merge 206 commits intomainfrom
uve-experiment

Conversation

@fmontes
Copy link
Member

@fmontes fmontes commented Dec 26, 2025

Scope

This summary is based on the branch artifacts available locally in this workspace (not live GitHub PR metadata, which is not accessible from this environment). The changes are centered on UVE store state refactoring in edit-ema.

What Changed

The branch refactors the UVE store architecture from a duplicated state model to a single-source-of-truth model.

1. New computed-signal access layer (withPageAsset)

A new store feature was introduced to expose page asset data through computed signals:

  • $page(), $site(), $containers(), $template(), $layout()
  • $viewAs(), $vanityUrl(), $urlContentMap(), $numberContents()
  • $clientResponse()

This centralizes derived state access and reduces direct dependence on internal response structure.

2. State/API renaming for cleaner semantics

Several store properties and methods were renamed to remove GraphQL-specific wording and better describe intent:

  • graphqlRequest -> requestMetadata
  • graphqlResponse -> pageAssetResponse
  • legacyGraphqlResponse -> legacyResponseFormat
  • setGraphqlResponse() -> setPageAssetResponse()
  • setGraphqlResponseOptimistic() -> setPageAssetResponseOptimistic()
  • rollbackGraphqlResponse() -> rollbackPageAssetResponse()
  • $graphqlWithParams -> $requestWithParams
  • $customGraphqlResponse -> $clientResponse

3. Duplication removed from load/save flows

withLoad and withSave were simplified by removing repeated manual extraction/sync of pageAsset sub-properties.

Instead of repeatedly patching multiple top-level fields, flows now rely on updating pageAssetResponse once and reading via computed signals.

4. Consumer updates

Related consumers were updated to use the new API naming and signals, including:

  • Store features (withLayout, etc.)
  • Services (for example, action handling)
  • Components (for example, editor/style-editor integrations)
  • Tests across affected store/features/components

Why This Matters

Architectural improvements

  • Moves from multiple duplicated state fields to one authoritative source.
  • Removes manual synchronization points that could drift out of sync.
  • Makes API naming implementation-agnostic and easier to maintain.
  • Improves type-safety and readability via explicit computed accessors.

Engineering impact

  • Lower maintenance overhead when pageAsset shape changes.
  • Fewer fragile updates across load/save/consumer code paths.
  • Simpler mocking in tests (less setup of duplicated top-level state).

Reported Quantified Outcomes

From branch docs/changelog:

  • Manual sync points eliminated.
  • Duplicate extraction code removed from load/save paths.
  • 10 computed signals added for page-asset-derived data.
  • Store-related test suite reported as passing (with unrelated failures noted in other areas).

Backward Compatibility and Migration

Current compatibility

The branch indicates no immediate breaking changes for consumers because existing patterns are still tolerated during transition.

Recommended direction

Adopt computed-signal usage in new/updated code:

  • Prefer store.$page() over store.page()
  • Prefer store.$site() over store.site()
  • Continue migrating remaining direct property reads progressively

Future cleanup (planned)

Branch docs mention a later cleanup phase to fully remove deprecated direct-property access patterns once migration is complete.

Risk / Attention Points

  • Broad usage of legacy access patterns means migration should remain incremental.
  • Any consumer still directly tied to old names/patterns is a potential regression point if cleanup phase lands.
  • End-to-end validation of editor workflows should continue through migration phases (loading, saving, style editing, rollback flows).

Quick Takeaway

PR #34173 is primarily an internal architecture refactor that modernizes UVE store state handling: one source of truth, cleaner API names, computed signal access, and reduced duplication in critical load/save paths. It is aimed at maintainability, consistency, and safer future evolution rather than introducing large user-facing behavior changes.

Videos

video-general-walkthrough.mov
content-editing.mov
uve-bookmark.mov

- Replaced the usage header with a PrimeNG toolbar for better action handling.
- Enhanced loading state with a more structured skeleton layout for site metrics, system configuration, and user activity.
- Updated error handling to use PrimeNG card components for a cleaner presentation.
- Refactored dashboard content layout to utilize flexbox for better responsiveness.
- Adjusted SCSS styles to align with new component structure and improve overall styling consistency.

This update enhances the user experience and maintains a modern design approach.
…yling

- Adjusted skeleton component heights for better visual consistency.
- Added margin utility class to paragraph elements within skeleton templates.
- Enhanced SCSS styles for skeleton display and h3 elements to improve layout and readability.

These changes aim to refine the user interface and enhance the loading experience in the dot-usage-shell component.
- Introduced DotUsageService to fetch usage summary metrics from the backend API.
- Implemented error handling for various HTTP status codes.
- Added unit tests for DotUsageService to validate summary retrieval and error handling.
- Updated dot-usage-shell component to manage loading and error states using signals.
- Refactored component tests to utilize the new service structure.

These changes enhance the functionality and reliability of the dot-usage feature, ensuring accurate data retrieval and user-friendly error messages.
…itioning calculations for zoom functionality
…nused expanded property from node definitions
…d enhance data structure for container information
…nused service injections for improved code clarity
…handling to scroll to corresponding elements in the editor, improving user navigation experience.
…om levels, enhancing the accuracy of element positioning in the editor.
… for tree nodes, allowing users to reorder rows within the layout. Add event handling for node selection and drop validation to improve user interaction and layout management.
…ve function: implement updateRows method for saving reordered layout rows, enhancing layout management and state handling in the editor.
…s and paddings for improved layout, and modify row label to use styleClass for better representation.
…ith validation, integrate form submission handling, and update layout for improved user interaction. Adjust styles for right sidebar and contentlet tools to support new features.
…ing state during submission, and update submit button behavior for improved user experience.
…order component for improved row management, enhancing drag-and-drop functionality and simplifying layout handling.
@github-actions github-actions bot added the Area : Backend PR changes Java/Maven backend code label Mar 4, 2026
@github-actions github-actions bot removed the Area : Backend PR changes Java/Maven backend code label Mar 5, 2026
@github-actions github-actions bot added Area : Backend PR changes Java/Maven backend code Area : SDK PR changes SDK libraries labels Mar 6, 2026
@rjvelazco rjvelazco changed the title UVE Real-Time Canvas Refactor(UVE): Real-Time Canvas Mar 9, 2026
@rjvelazco rjvelazco marked this pull request as ready for review March 9, 2026 15:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Area : Backend PR changes Java/Maven backend code Area : Documentation PR changes documentation files Area : Frontend PR changes Angular/TypeScript frontend code Area : SDK PR changes SDK libraries

Projects

Status: No status

Development

Successfully merging this pull request may close these issues.

UVE: Real-Time Canvas

4 participants