feat: Implement modern layout with sliding panels by sandesh-sp · Pull Request #57 · NASA-IMPACT/MMGIS

sandesh-sp · 2026-03-31T21:48:25Z

Purpose

Implement modern layout with flexible panels in MMGIS

Proposed Changes

Update mission configuration fields to allow for modern layout
Use new PanelManager to handle the panel states
Create a new flow for rendering UI if mission is set to "modern" interface mode
Update configure page to expose some of the layout/panel settings

Issues

#48

Testing

Create new mission with "modern" dashboard mode
Update mission config to align with new configuration fields (check docs/MISSION_CONFIG_REFERENCE.md)
Experiment with available settings in User Interface tab (Modern Interface Config section) in mission configuration page
Change and upload mission configuration manually and see if things work as expected

…l management, state handling, and layout recalculation

…ation, tool management, and state handling

…lt and enhanced layout

…config flag

…n layout components and documentation

sandesh-sp · 2026-04-01T15:09:04Z

This file add tools to the panel. It needs further review/modification after we start working on tools. Please ignore this file for now.

2. Update code to use getToolsForPanel function

…odule

…ed configuration validation

…initions

…g unnecessary css properties

slesaad · 2026-04-02T15:17:48Z

        <Typography className={c.subtitle2}>
          {`Choose the rendering engine for this mission's 2D map. This cannot be changed after the mission is created.`}
        </Typography>
+        <FormControl className={c.planetDropdown} variant="filled">


planetDropdown ?

This is leftover from MMGIS. It only had planet dropdown as dropdown field so the class is named planetDropdown. We're using the same class name for all other dropdown fields. Will refactor it to something appropriate.

slesaad · 2026-05-05T19:53:40Z

    },
+    {
+      "name": "Modern Interface Config",
+      "components": [


this doesn't cover all the configurations available, what is the plan for supporting all the config and is it documented somewhere?

I've exposed most of the configurations needed for Panel Manager in another PR but it'll still need some work. We need to decide how much work we are going to put in the current Mission Config app vs our own tool builder.
One blocker is everything is static so I can't conditionally render fields based other fields. Say, only show deck.gl specific config fields if the rendering engine is deck.gl.

slesaad · 2026-05-05T20:03:10Z

+:root {
+    --uswds-primary: #005ea2; /* primary blue */
+    --uswds-primary-dark: #1a4480;
+    --uswds-primary-light: #73b3e7;
+    --uswds-base-darker: #171c1e;
+    --uswds-base-dark: #3d4551;
+    --uswds-base-light: #f0f0f0;
+    --uswds-white: #ffffff;
+    --uswds-shadow: rgba(0, 0, 0, 0.15);
+
+    --modern-bg: #f8f9fa;
+    --modern-panel-bg: rgba(255, 255, 255, 0.95);
+    --modern-border: 1px solid rgba(0, 0, 0, 0.1);
+    --modern-radius: 8px;
+    --modern-glass-blur: blur(12px);
+    --z-index-panel-drag: 10;
+    --z-index-compact-center: 10;
+    --z-index-panel-icons: 2;
+}


putting these under :root will make them leak into the host application if mmgis is embedded, scope it under some mmgis specific unique name or scope with a prefix like --mmgis-modern-…

slesaad · 2026-05-05T20:09:56Z

+    renderStackedLayout: function (panel, body) {
+        const toolsArray = PanelManager_.getToolsForPanel(panel.id)
+        toolsArray.forEach(toolMetadata => {
+            body.append(this.createToolCard(toolMetadata.id, toolMetadata.name))


can you add a "TODO" to all of these lines that need to be changed later if they are not already changed in #80

I've already made all the changes needed to render tools on #80
shouldn't be any TODOs

slesaad · 2026-05-05T20:11:22Z

+                if (panel.tools && panel.tools.size > 0) {
+                    const toolsArray = PanelManager_.getToolsForPanel(panel.id)
+                    toolsArray.forEach(toolMetadata => {
+                        const iconBtn = $(`<button class="ui-panel-icon-btn" title="${toolMetadata.name}" data-tool="${toolMetadata.id}"><span class="mdi mdi-view-dashboard"></span></button>`)


don't we have toolMetadata.icon? if so, use that

I've done that in my next PR

slesaad · 2026-05-05T20:34:35Z

+    "panels": [
+      // Array of panel configurations
+    ],
+    "": {


I've panel id which'll act as a key

slesaad · 2026-05-05T20:37:09Z

+ * @param {string} preset - Preset name ('default', 'minimal', 'full')
+ * @returns {Object} - Dashboard config object
+ */
+export function getDefaultDashboardConfig(preset = 'default') {


this doesn't seem to be called anywhere?

created this as a preset configs which can be used as template in future or can be used to add missing config. it isn't used right now.

slesaad · 2026-05-05T20:41:04Z

+        this._registerPanels()
+
+        // Load and assign tools to panels based on configuration
+        const tools = this.configData?.tools || []


can this.configData ever be undefined? we've been using it like it exists above this line

No, this.configData should always be there. Using optional chaining only for additional safety check

slesaad · 2026-05-05T20:45:27Z

+    const mode = config?.msv?.mode || 'classic'
+
+    if (mode === 'modern') {
+        modern.init(config, missions)


this can throw an error based on modern.js:R109-R113 - but this doesn't catch or anything - user sees a frozen loading page but no errors (only on the console log). show the error to user

slesaad · 2026-05-05T20:48:16Z

also why .js files?

slesaad · 2026-05-05T20:55:29Z

Also add some tests for the newly added files like the validator, the lifecyc le, toolcontroller, etc

…age when the loading fails

…e.js

…nt handling

sandesh-sp · 2026-05-13T19:15:14Z

@slesaad I made changes based on the feedback. Could you please have a look at it? Thanks 😁

sandesh-sp added 21 commits March 25, 2026 16:41

Implement PanelManager class with methods for panel registration, too…

f58b4c7

…l management, state handling, and layout recalculation

Remove unnecessary comments

9032118

Add unit tests for PanelManager functionality including panel registr…

93a68e4

…ation, tool management, and state handling

Initial implementation of enhancedLayout flag to switch between defau…

7386672

…lt and enhanced layout

Initial implementation of modern layout branching based on dashboard …

57b755a

…config flag

Conditionally add panel header and resize handle

b327c22

Fix css for modern layout

40cf63a

Implement stacked and tabbed layout

796670f

Add panel state handling and dynamic resizing for modern layout

eab9d78

Add background map in the modern layout

05565f0

Implement iconified and focused states

ee7478d

Add dynamic CSS Grid template generation based on panel priorities

2b929f7

Add support for compact layout in modern UI

0d00e85

Handle toggle between iconified and focused states

69fed4f

Fix issue with panel size during initialization and resizing

efde13a

refactor: migrate tool assignment logic to ToolControllerModern

0669b53

Move type definition of tools to its own folder

0a72498

Update configuration page to allow moder UI layout configs

1076e13

Remove tools list from mission's panel config

028a932

Add comprehensive dashboard configuration reference for modern layout

8eeb98d

refactor: update terminology from "dashboard" to "interface" in moder…

702e271

…n layout components and documentation

sandesh-sp changed the base branch from development to feat/panel-manager March 31, 2026 22:01

sandesh-sp added 2 commits April 1, 2026 09:49

Merge branch 'feat/panel-manager' into feat/modern-layout

5965bcf

Fix merge error

add0d22

sandesh-sp self-assigned this Apr 1, 2026

sandesh-sp commented Apr 1, 2026

View reviewed changes

sandesh-sp added 2 commits April 1, 2026 10:22

Remove redundant UserInterface flow

8bc6428

Revert UserInterface handler to original state

1fab4d8

sandesh-sp requested review from BhattaraiSijan and slesaad April 1, 2026 15:29

sandesh-sp marked this pull request as draft April 10, 2026 15:13

Base automatically changed from feat/panel-manager to epic/modern-ui April 24, 2026 14:11

sandesh-sp added 11 commits April 24, 2026 09:14

Merge branch 'epic/modern-ui' into feat/modern-layout

54dd1d8

1. Move tool's type definition to ToolController_ folder

c843f7e

2. Update code to use getToolsForPanel function

Add type definitions for modern interface configuration and validation

4a9fe87

Add Dashboard Configuration Validator for modern interface

28e009c

Simplify ToolConfig interface to only include its name, icon and js m…

a0bf004

…odule

Add DashboardConfigFactory to provide preset dashboard configurations

6d5164e

Refactor Modern Interface to use class-based architecture with improv…

973c518

…ed configuration validation

Update ToolControllerModern_ to use ToolConfig type for parameter def…

0f0505a

…initions

Minor code improvement for UserInterfaceModern

27c3f45

Refactor UserInterfaceModern_.js to make it more modular and readable

2798793

Minor changes to UserInterfaceModern_.css adding comments and removin…

88fe2b8

…g unnecessary css properties

sandesh-sp marked this pull request as ready for review April 29, 2026 16:29

sandesh-sp requested review from BhattaraiSijan and slesaad April 29, 2026 16:29

slesaad requested changes May 5, 2026

View reviewed changes

sandesh-sp added 6 commits May 6, 2026 11:25

Add error handling to LandingPage.js and display user with error mess…

22db28c

…age when the loading fails

Replace makeMissionNotFoundDiv with generic makeErrorScreen in essenc…

cfe4027

…e.js

Minor updates based on PR review

72de1ea

Update CSS to use :root for USWDS color palette variables

7741df0

Refactor PanelManager and UserInterfaceModern to use mmgisAPI for eve…

5e883ca

…nt handling

Add unit tests for DashboardConfigValidator

b32a273

slesaad approved these changes May 13, 2026

View reviewed changes

sandesh-sp merged commit 66eb75e into epic/modern-ui May 14, 2026

Conversation

sandesh-sp commented Mar 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Purpose

Proposed Changes

Issues

Testing

Uh oh!

sandesh-sp Apr 1, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

slesaad commented May 5, 2026

Uh oh!

slesaad commented May 5, 2026

Uh oh!

sandesh-sp commented May 13, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sandesh-sp commented Mar 31, 2026 •

edited

Loading

sandesh-sp Apr 1, 2026 •

edited

Loading