Panorama MFE: overview

The Panorama MFE (frontend-app-panorama) is an Open edX micro-frontend that shows the Panorama dashboards to users inside the LMS. It is a thin rendering layer: all the logic about which dashboards a user may see lives in the Open edX backend; the MFE just asks the backend and renders what it gets.

Repository: github.com/aulasneo/frontend-app-panorama. It is built on the Open edX frontend platform (@edx/frontend-platform, Paragon, React Router) and uses the Amazon QuickSight embedding SDK.

Where it is served

By default the MFE is served at <mfe base url>/panorama. The Tutor plugin also adds a link to it from the learner dashboard, so users can open it directly.

If a user is not assigned to any dashboard group in the backend, they see the student view (when it is enabled).

What the user sees

The MFE has two routes:

  • / — the Home page. It embeds a mode-specific home page (a different informational page for DEMO, FREE, SAAS, and CUSTOM), served from Aulasneo’s panorama-home-pages S3 bucket.

  • /panels — the dashboards view: a sidebar with a tab per dashboard, and the embedded QuickSight dashboards themselves.

The dashboards view has:

  • A Dashboards button that reveals the list of dashboard tabs. Each tab corresponds to one dashboard’s displayName.

  • A Studio button, shown only to AUTHOR users, which opens the QuickSight console (authoring) experience in an embedded frame.

  • A loading spinner while embed URLs are fetched, and an error modal if something fails.

How it loads (the data flow)

On mount, the MFE calls the backend API (see Open edX Backend: API reference), all under ${LMS_BASE_URL}/panorama/api/:

  1. get-panorama-mode — decides which home page to embed.

  2. get-user-role — decides whether to show the Studio tab and whether to treat the user as a student.

  3. get-embed-url — retrieves the list of dashboards and their QuickSight embed URLs.

It then embeds each dashboard with the QuickSight embedding SDK (amazon-quicksight-embedding-sdk). For student users, the MFE reads the userId and lms parameters from the embed URL fragment and passes them to QuickSight as dashboard parameters, so every visual is filtered to that learner. QuickSight frame and content errors are surfaced in the error modal.

Note

Because the MFE only renders what the backend returns, most operational configuration (modes, dashboards, access, roles) is done in the backend and its Django admin, not in the MFE. See Open edX Backend: Panorama modes and Open edX Backend: administration.

Back to Home