Skip to content

Conversation

@subashtiwari1010
Copy link
Contributor

@subashtiwari1010 subashtiwari1010 commented Jul 15, 2025

Description

This PR fixes issue #11304. It improves the space between the Baselayer switcher and the Timeline plugin, and fixes the overlapping issue with the Widget tray when the Timeline Plugin is expanded.

Please check if the PR fulfills these requirements

What kind of change does this PR introduce? (check one with "x", remove the others)

  • Bugfix

Issue

What is the current behavior?
Fix #11304

  • There is quite a space between the background switcher and the timeline.
  • When the timeline is expanded, it overlaps with the widget tray.
    image

What is the new behavior?

  • The layout of the timeline is shifted near the baselayer switcher to reduce the space between them.
  • Similarly, the timeline only expands up to the widget tray when it is expanded. Hence, resolving the overlapping issue.
    image

Breaking change

Does this PR introduce a breaking change? (check one with "x", remove the other)

  • Yes, and I documented them in migration notes
  • No

Other useful information

@subashtiwari1010 subashtiwari1010 self-assigned this Jul 15, 2025
@subashtiwari1010 subashtiwari1010 marked this pull request as ready for review July 15, 2025 10:18
@tdipisa tdipisa modified the milestones: 2025.01.01, 2025.02.00 Jul 15, 2025
Comment on lines +237 to +245
useEffect(() => {
if (collapsed) return;
const widgetsTrayElement = document.querySelector('.widgets-tray');
if (widgetsTrayElement) {
const dims = widgetsTrayElement.getBoundingClientRect();
// set the right offset to the left of the widgets tray with some margin to avoid overlap
setRightOffset(window.innerWidth - dims.left - style.marginRight + 10);
}
}, [collapsed, style, expandedWidgetTray]);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should not compute inside a side effect the size of plugin inside another plugin. Plugins implementations in general shouldn't know about other plugins.

The style.right position is computed inside the maplayout selector . We should investigate if we can use the logic already implemented inside the maplayout epic that controls the right position based also on side panel state

marginLeft: 100,
...style,
right: collapsed ? 'auto' : (style.right || 0)
right: collapsed ? 'auto' : (rightOffset || style.right || 0)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use the logic already implemented for the style.right maplayout selctor if possible instead to add a new rightOffset variable

@allyoucanmap
Copy link
Contributor

@subashtiwari1010 @tdipisa In addition to the previous review I did a local test and noticed the timeline is not resizing correctly after one side panel is open. If we want to cover also this case I think we should review the implemented logic covering all possible cases that the maplyout is introducing, to note also that the widget tray disappear when a side panel is open.
My proposal is to approach this task in a different way and review the layout of the bottom area of the map viewer that include the MapFooter:

  1. Improve the responsiveness of the map footer and make it a plugin container (here a PoC allyoucanmap@f275856)
  2. Include the widget tray inside the map footer removing all the absolute positioning

So if we move the widget tray inside the footer we don't need anymore do adjust the width of the timeline

image

This work could be a starting point to refactor the map footer section and in the future could allow us to place other plugins such as the timeline or the table attribute inside the lower part of the layout removing logic from the maplyout

An example

image image

This issue is temporary blocked because this work needs to be addressed in multiple steps starting from the refactor of the MapFooter refactor

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Improving timeline layout

4 participants