fix(ui): SegmentTool background, Clipboard API, context menu test selectors by tariqksoliman · Pull Request #981 · NASA-AMMOS/MMGIS · GitHub
Skip to content

fix(ui): SegmentTool background, Clipboard API, context menu test selectors#981

Merged
tariqksoliman merged 529 commits into
NASA-AMMOS:developmentfrom
JPL-Devin:development
May 21, 2026
Merged

fix(ui): SegmentTool background, Clipboard API, context menu test selectors#981
tariqksoliman merged 529 commits into
NASA-AMMOS:developmentfrom
JPL-Devin:development

Conversation

@tariqksoliman

Copy link
Copy Markdown
Member

With Devin: JPL-Devin#83

Purpose

  • Fix the SegmentTool panel appearing transparent/glassy by giving it an opaque background
  • Modernize the copyToClipboard utility to use the Clipboard API (with execCommand fallback) for reliable right-click copy coordinates
  • Add stable test selectors to the ContextMenu component so E2E tests can target the menu and copy-coordinates action

Proposed Changes

  • [FIX] src/essence/Tools/SegmentTool/SegmentTool.css — add background: var(--color-a) to #segmentTool
  • [FIX] src/essence/Basics/Formulae_/Formulae_.js — replace document.execCommand('copy') with navigator.clipboard.writeText() + fallback helper _copyToClipboardFallback
  • [FIX] configure/src/core/utils.js — same Clipboard API upgrade with copyToClipboardFallback helper
  • [ADD] src/essence/Basics/UserInterface_/components/ContextMenu/ContextMenu.jsx — add .ContextMenuMap class and #contextMenuMapCopyCoords id for E2E test targeting

devin-ai-integration Bot and others added 30 commits April 29, 2026 23:57
…and mmgis.css

- Delete tools.css entirely (both selectors #CurtainToolList and
  .searchToolSelect are unreferenced anywhere in the codebase)
- Remove from mmgisUI.css: .mmgisRadioBar3/4/Vertical (140 lines),
  .mmgispureselect (104 lines), blink/condemned_blink_effect (38 lines),
  .slidecontainer/.slider (41 lines), .ar_slider (91 lines),
  .verticalSlider (91 lines), .mmgisMultirange_elev (19 lines),
  .ui-corner-all/bottom/right/br (9 lines)
- Remove from mmgis.css: #nodeenv, empty #topBar{}, #topBarInfo,
  #topBarHelp, #topBarFullscreen, #toggleUI, #logoGoBack
- Keep #topBarLink (used in BottomBarReact.jsx), #webgl-error-message
  (used by vendored THREE.js)
- All selectors verified with repo-wide grep before removal

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
- Replace Base UI Tooltip with simple React portal tooltip (200ms delay,
  tippy-matching style) — fixes missing tooltips for toolbar/topbar/bottom buttons
- Add cursor + hover highlight to vertical splitters (was missing because
  module CSS didn't inherit global .splitterV styles)
- Add hover highlight to tool panel drag handle
- Remove mdi-drag-vertical icon from tool panel drag
- Add mobile toolbar horizontal layout via @media query overrides
- Add 4 new color schemes: High Contrast (a11y), Dark Mars, Dark Midnight,
  Light Warm (total: 10 themes)
- Previous fixes also included in working tree:
  - timeUI border moved to toolsWrapper border-bottom (conditional)
  - #toggleTimeUI button removed entirely
  - CoordinatesDiv: vertical centering, unified background, 12px right offset
  - barBottom padding-bottom: 8px

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Pre-existing bug: `TimeControl.enabled = true` was assigning instead of
comparing. Changed to `TimeControl.enabled === true`.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…eWhenField

- Added all 10 theme presets to dropdown (was missing Dark Mars, Dark Midnight,
  Light Warm, High Contrast)
- Added 'Custom' option: skips preset theme, uses only color picker values
- Moved Theming section directly under Rebranding
- Nested 'Custom Color Options' under Theming with subdescription
- Added enableWhenField support to Maker.js: disables color pickers unless
  theme is set to Custom
- Renamed color options with clearer names and improved descriptions:
  Primary → Surface Color, Secondary → Deep Background Color,
  Tertiary → Text Color, Body → Page Body Color, Highlight → Feature Highlight
- Stylize.js: skip setTheme() when theme is 'Custom'
- Rebuilt configure page

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
1. Tooltip: Replaced custom React portal tooltip with tippy.js wrapper.
   Uses the existing tippy.js dependency and 'blue' theme for consistency.

2. Dropdown: Replaced Base UI Menu with native portal dropdown.
   Base UI's nested Menu.Trigger + BaseButton composition was swallowing
   click events, breaking userAvatar and menuBtn menus. New implementation
   uses simple state + createPortal with proper outside-click dismissal.

3. About modal: Professional redesign with centered MMGIS ASCII art header,
   proper GitHub SVG logo link, clean metadata section, centered link
   buttons, attributions section, and NASA-AMMOS footer.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…ation

The global .mmgisHelpButton styles (yellow color, compact 18x18px sizing,
0.7 opacity) were removed when Help.css was converted to Help.module.css.
Since Help.getComponent() emits raw HTML strings for jQuery-rendered tool
headers, it cannot use CSS Module scoped classes. Restored the base styles
in mmgis.css alongside the related .mmgisToolHelpBtn definition.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
… theme, Stylize.js, Default Tool config

- Login: skip session.regenerate() for token-based re-auth (useToken:true)
  so reloading the main page no longer invalidates the configure page session
- About modal: replace ASCII art with mmgis.png logo, rename Attributions to
  Map Layer Attributions, remove footer logo, link NASA-AMMOS to ammos.nasa.gov
- High Contrast theme: change accent from #ffff00 to #ffd700 (gold) for better
  contrast ratios against dark backgrounds
- Stylize.js: color overrides only apply when theme is Custom or unset,
  preventing preset themes from being clobbered by stale config values
- Restore Default Tool config section in tab-ui-config.json (accidentally
  removed during Theming section reorganization)

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
The case was accidentally removed during the Configure page UI tab
restructure (d7f96c5). Without it, the Default Tool dropdown in the
Configure page rendered as nothing despite the config referencing it.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
- High Contrast theme: tooltips now use black text on yellow background
  via --color-c2-text variable (white for all other themes)
- About modal links use var(--color-f) for consistent theme text color
- Panel toggle buttons: 11px uppercase with 600 weight for better
  visibility
- Mapping scale button moved to bottom-right of compass (was top-left)

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
- Viewer: dropdown selector at top-right edge, OSD buttons stacked
  vertically below it; settings panel opens to the left
- Globe: home, exaggerate, observe, walk, link controls moved from
  TopLeft to TopRight corner via addControl 4th arg
- Style consistency: OSD buttons and LithoSphere controls now match
  Leaflet zoom controls (var(--color-a) bg, var(--color-f) text,
  var(--color-mmgis) hover, 30px size, 3px border-radius)
- Viewer settings sliders use var(--color-a3) instead of hardcoded
  #444444
- Az/el indicator stays at bottom center (exception per design)

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Modal theming:
- All modals now share consistent styling: backdrop-filter blur, semi-transparent
  background via --color-a-rgb, 10px border-radius, header divider line, box-shadow
- Updated: loginModal, Help, ConfirmationModal, Settings, Hotkeys, About modals
- Tool panel backgrounds changed from opaque var(--color-k) to transparent so the
  ToolPanel's existing backdrop-filter effect shows through
- Legend tool header updated to match consistent 44px height with divider
- applyTheme.js now auto-derives --color-a-rgb from theme's --color-a hex value
- Modal service wrapper gets backdrop-filter: blur(12px)

Session security (Devin Review fix):
- Token re-auth now calls req.session.regenerate() with data preservation to
  prevent session fixation while maintaining multi-tab compatibility
- Token is rotated via crypto.randomBytes on every re-auth (was being reused)

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…n header

1. Viewer OSD settings moved to top of button stack, panel opens downward
2. Overlay buttons consistent 30x30px (OSD line-height fix, home button)
3. Menu/icon contrast improved: Dropdown items and IconButtons use --color-a5
   (was --color-a3) with --color-f on hover for better dark theme legibility
4. CoordinatesDiv fixed to 30px height, pickLngLat button centered
5. Login modal now has a header bar with 'Log In' title and close X button;
   title toggles to 'Sign Up' when switching modes

Also reverts session regeneration for token re-auth (Devin Review feedback):
token-based re-auth now refreshes session data in-place without regeneration
or token rotation, preserving multi-tab compatibility.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…icator, toast

1. Description nav popover: added z-index:9000 so menu appears above map panels
2. Separated tools: default color changed from accent to --color-f; fixed CSS
   selector from .toolButtonSep to .toolSep to match actual class names
3. Compass + mapping scale shifted left by 30px for better positioning
4. Map zoom/home controls: use --color-f instead of accent --color-c to reduce
   visual prominence; hover still highlights with accent color
5. Status indicators (reload/ws disconnect/layer update) moved from Leaflet
   control to TopBar with soft pulsing fade animation and tooltip on hover
6. WebSocket retry toast: rounded corners, glass background with backdrop-filter,
   border-left accent for failure state instead of solid red background

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Header alignment:
- LayersTool: align-items center on #filterLayers, gap between right icons
- InfoTool: align-items center on #infoToolHeader, 44px height
- ViewshedTool: align-items center, restructured header with left/right divs
- IsochroneTool: restructured flat header into nested mmgisToolHeader pattern
- ShadeTool: align-items center on #vstHeader children

Icon spacing:
- LayersTool: increased right margin to 28px + gap 2px
- ViewshedTool: #vstNew padding-right 30px (clear of close button)
- IsochroneTool: #iscNew padding-right 30px

Missing components:
- SitesTool: added Help import + help icon via mmgisToolHeader pattern
- AnimationTool: added full mmgisToolHeader with title and help icon

Background fixes:
- InfoTool: changed toolsContainer background from transparent to var(--color-a)
- DrawTool: changed toolsContainer background from transparent to var(--color-a)

Layout fixes:
- DrawTool: #drawToolContents top 81px, height calc(100%-81px), #drawToolNav margin-right 0
- MeasureTool: removed padding-left:0 override from mmgisToolHeader child selector

Functional fixes:
- InfoTool: updated jQuery selectors from #InfoTool to #toolButtonInfo (React toolbar IDs changed)
- CurtainTool: deferred OpenSeadragon init with requestAnimationFrame (React 18 async render)
- CurtainTool: curtainToolBar justify-content flex-end (icons at bottom)

Security:
- TopBar StatusIndicator: escape HTML in layer names to prevent XSS via addLayerQueue

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…al order

1. mapToolBar: set pointer-events:none on both #mapToolBar and direct children
   so clicks pass through to the map; leaf elements still get auto via
   .childpointerevents rule
2. #loginModalBody: padding changed to 40px 0px 0px
3. Default tool: deferred click to requestAnimationFrame so React toolbar
   has rendered before getElementById runs
4. About modal: moved mainInfoModalCustom to right below mainInfoModalHero

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…r, InfoTool close btn, statusIndicator position

1. All tool panel headers: changed from 44px to exactly 40px height
   - Global .mmgisToolHeader and .mmgisToolTitle in mmgis.css
   - InfoTool.css, ViewshedTool.css, IsochroneTool.css, ShadeTool.css

2. LayersTool #filterLayers: height 40px, .right > div height unset,
   .right margin-right 30px, .right > div margin 0px 3px

3. ViewshedTool: restructured header — title+help in mmgisToolHeader row,
   vstToggleAll (left) and vstNew (right) on a new #vstSubHeader row below

4. AnimationTool: removed old #animationToolHeader CSS (padding 15px 20px,
   white background, 18px font), now uses standard mmgisToolHeader class.
   Fixed color from var(--color-a) (background) to var(--color-f) (text)

5. InfoTool close X: re-inject close button after use() rebuilds content
   via TC_.injectCloseButton() (toolsContainer.empty() was removing it)

6. StatusIndicator: moved to left of topBarTitle in JSX render order.
   Added align-items:center to #topBarMain for vertical alignment.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…p-center

1. TimeUI dropdowns: added z-index 10000 to all dropy content ul elements
   so they render above the vertical tool panel (z-index 1400). Also set
   timeUIDock to position:relative with z-index 10000 and overflow:visible.

2. Toast notifications: repositioned #toast-container from bottom-right to
   top-center just below the topbar (top: 44px, centered with transform).

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
… consistency

1. StatusIndicator: use display:none/flex instead of opacity:0/1 so it
   takes no space when there's no active status indicator.

2. CurtainTool: added close X button at top of curtainToolBar (matching
   MeasureTool pattern) with flex spacer pushing other buttons to bottom.

3. Header title font consistency: InfoTool, ShadeTool, CurtainTool titles
   now match mmgisToolTitle standard (font-weight:600, padding-left:10px,
   height:40px for CurtainTool which was 34px).

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
1. Legend: show 'No active layers with legends' when no legend items
   are present. Also fixed container height calc(100% - 40px).

2. Mapping Scale (.leaflet-control-scalefactor): shifted 10px right
   (left 26→36px) and 1px down (bottom 30→29px).

3. sep-tool-header span: font-weight changed from 600 to 400.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…g context

#splitscreens had z-index:1 which created a stacking context, confining
its children (including bottomFloatingBar at z-index:1500) to that context.
Since ToolPanel (z-index:1400) was a sibling outside splitscreens, it
painted above all splitscreens children regardless of their internal
z-index values.

Fix: change #splitscreens z-index from 1 to auto so it no longer creates
a stacking context. Now bottomFloatingBar (1500) participates in the
same stacking context as ToolPanel (1400), and 1500 > 1400 means the
TimeUI dropdown correctly paints above the tool panel.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
- Replace CursorInfo.update() toast-like calls with Toast.info/success/warning/error
- Preserve message colors: blue→info, green→success, yellow→warning, red→error
- Keep 12 legitimate cursor-following CursorInfo calls unchanged
- Files migrated: DrawTool.js, DrawTool_Files.js, DrawTool_FileModal.js,
  DrawTool_Templater.js, DrawTool_SetOperations.js, DrawTool_Drawing.js,
  DrawTool_Editing.js, DrawTool_Shapes.js, LayersTool.js, ShadeTool.js,
  chemistrychart.js
- Fix Devin Review: Change misleading 'Bad token' to 'Login failed' in users.js
- Normalize line endings (CRLF→LF) in affected files

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…te ID, topBar padding

- Add Toast.js to version control (was untracked, causing webpack module error)
- Bump CoordinatesDiv z-index from 20 to 1001 (was hidden behind splitscreens
  children after z-index:auto change)
- Fix Legend duplicate ID: separated tool icon was #LegendTool, same as content
  container div, causing empty message to appear in button instead of panel
- Add hasStatus class to #topBarMain when statusIndicator is active, setting
  #topBarTitleName padding-left to 0

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…getId

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…AGENTS.md

- Move Toast.js from UserInterface_/components/Toast/ to design-system/components/Toast/
  (generic component belongs in design-system, not MMGIS-specific UserInterface_)
- Update all 11 Toast import paths to new location
- Bump --color-a3 in 5 dark themes to pass WCAG AA 4.5:1 contrast for text:
  Dark Default #747c81→#81888d, Dark Blue #64748b→#738399,
  Dark Warm #8b7a5e→#908064, Dark Mars #8a6a60→#98796f,
  Dark Midnight #606088→#7a7a9e
- Update AGENTS.md: document design-system/ vs UserInterface_/ distinction
  in project structure and Key Directories

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…mportant

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…FromMMWebGIS

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
- Add setToolPanelDragVisible(false) to closeActiveTool() (was only in makeTool toggle-off path)
- Also guard drag handle display on isOpen (toolPanelWidth > 0) as safety net

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
tariqksoliman and others added 25 commits May 13, 2026 13:32
…tays visible

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…ncies

When a plugin tool/component/backend overrides a standard one by reusing
the same directory name, only the override's deps should contribute to
the aggregated plugin manifests. Previously, gatherDependencies()
concatenated standard + plugin entries and fed both to mergeNpm/
mergePython, which could spuriously flag the same package as
conflicting between the standard and override versions.

Extract winnersByName() (mirroring API/updateTools.js +
API/setups.js override behavior) and use it for all three plugin
kinds. Add unit tests covering the override case and the
spurious-conflict regression.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Plugin deps installed in the builder via `npm install --no-save
--no-package-lock` aren't recorded in package.json/package-lock.json,
so the runtime stage's `npm ci --only=production` would lose them.
Frontend deps are bundled by webpack into ./build so they're fine, but
backend plugins that `require()` their declared npm dependencies at
runtime would crash with 'Cannot find module'.

Copy plugin-package.json from the builder and re-run the same
conditional install in the runtime stage so backend plugin deps land
in the runtime image's node_modules. `--ignore-scripts` prevents the
inner install from re-entering the root postinstall hook.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Add #operationsClock to BottomElementPositioner's reactive positioning
so it shifts to bottom:58px when timeUIActive is true (TimeUI dock
visible) and back to bottom:40px when closed. Avoids overlap with
the bottom floating bar without adding new state to OperationsClock
itself. Mobile path is unchanged — OperationsClock.setupMobilePositioning
manages mobile positioning separately.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Revert the dynamic positioning in BottomElementPositioner and just
hardcode bottom:58px in OperationsClock.css. Simpler, no cross-cutting
state dependency.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…improvements

feat(plugins): per-plugin deps, lazy tool loading, validation & shared discovery
Forward evenIfOff, evenIfControlled, forceRequery, and
skipOrderedBringToFront parameters to TimeControl.reloadLayer()
for each layer in the batch. Fully backward-compatible — existing
callers that pass only layerNames get undefined for all flags.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…reloadLayers docs

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…arams

feat(api): pass through reloadLayer flags in mmgisAPI.reloadLayers
…HTTP URLs

- Rename 'field': 'dem' → 'url' and 'name': 'DEM Path' → 'DEM URL' in
  src/essence/Tools/Measure/config.json (layer-specific DEM objectarray)
- Rename same in configure/src/metaconfigs/layer-tile-config.json
- Add http:// and https:// prefix handling in makeProfile() so external
  URLs are not mangled with the mission path prefix

The top-level variables.dem field (primary DEM) is unchanged.

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…ueprint

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…kward compatibility

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
fix(measure): rename config DEM field from 'dem' to 'url'
…ectors

- Add solid background to #segmentTool so panel is opaque
- Modernize copyToClipboard to use Clipboard API with execCommand fallback
- Add stable .ContextMenuMap class and #contextMenuMapCopyCoords id for E2E tests

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…r layers

Co-Authored-By: tariq.k.soliman <tariqksoliman@gmail.com>
…ipboard-contextmenu

fix(ui): SegmentTool background, Clipboard API, context menu test selectors
@tariqksoliman tariqksoliman self-assigned this May 21, 2026
@tariqksoliman tariqksoliman added the bug Something isn't working label May 21, 2026
@tariqksoliman tariqksoliman merged commit 3eee511 into NASA-AMMOS:development May 21, 2026
4 of 7 checks passed
@github-project-automation github-project-automation Bot moved this to Done in MMGIS May 21, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

Status: Done

Development

Successfully merging this pull request may close these issues.

1 participant