(feat) O3-3980: synchronize schema editor and interactive builder selection

[Twiineenock]

Requirements

• This PR has a title that briefly describes the work done including the ticket number.
• My work conforms to the OpenMRS 3.0 Styleguide and design documentation.
• My work includes tests or is validated by existing tests.

Summary

This PR implements robust two-way synchronization between the JSON Schema Editor and the Interactive Builder. It ensures that selecting an element in one view instantly highlights and scrolls to the corresponding element in the other view.

In addition to the synchronization logic, this PR significantly refactors the InteractiveBuilder component to be more modular, maintainable, and loosely coupled from the UI implementation.

Technical Approach & Design

To achieve a clean separation of concerns and enable easy future UI redesigns, we implemented the following architectural changes:

1. "Headless" Selection Logic (useInteractiveElement)

We extracted the complex logic for ID generation, selection state, and event handling into a custom hook: useInteractiveElement.

• Benefit: The core behavior (knowing "who I am" and "am I selected?") is now strictly separated from the rendering. This allows the UI components to focus purely on presentation.

2. Composition with InteractiveElementWrapper

We introduced a InteractiveElementWrapper component that acts as a contract between the system and the UI.

• It handles the "system" responsibilities: DOM IDs for scrolling, click capture for selection, and conditional highligting classes.
• It wraps purely presentational sub-components (PageElement, SectionElement, QuestionElement).
• Benefit: If we decide to swap the current Accordion UI for a Card-based UI in the future, we simply change the children of the wrapper without risking breakage of the synchronization logic.

3. AST-Aware Selection (schema-navigation.ts)

We refined the JSON traversal algorithms in src/utils/schema-navigation.ts.

• Fix: logic was improved to distinguish between a parent container (e.g., "sections": [...]) and its first child. Clicking a container property now correctly selects the parent object rather than defaulting to the first item in the array.

Changes

• New Components: InteractiveElementWrapper
• New Hooks: useInteractiveElement, useBuilderScroll
• Refactor: InteractiveBuilder now uses hoisted function declarations for sub-components to prevent hoisting errors and improve readability.
• Fixes:
  • Resolved runtime error where the builder attempted to read schema.name before loading completed.
  • Added SelectionProvider to tests to fix failures in interactive-builder.test.tsx.
  • Solved "multiple elements found" errors in tests by refining queries.

Screenshots

The page UI is synced to its json object

The section UI is synced to its json object

The question UI is synced to its json object

Screanshcast

Here is a short video showing the schema editor in sync with the interactive builder

sync.webm

Related Issue

Other

https://openmrs.atlassian.net/browse/O3-3980

[Twiineenock]

Hi @denniskigen , @VeronicaMuthee , @NethmiRodrigo
Could you give me a review here.