.. _mfe_overview:

Panorama MFE: overview
======================

.. contents:: On this page
   :local:
   :depth: 2

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 :ref:`Open edX backend <backend_overview>`; the
MFE just asks the backend and renders what it gets.

Repository:
`github.com/aulasneo/frontend-app-panorama <https://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 :ref:`backend_api`), all under
``${LMS_BASE_URL}/panorama/api/``:

#. ``get-panorama-mode`` — decides which home page to embed.
#. ``get-user-role`` — decides whether to show the Studio tab and whether to treat the user as
   a student.
#. ``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 :ref:`backend_modes` and :ref:`backend_administration`.

`Back to Home <index.html>`_