FleetOps Sidebar Issues: Places Tab & Overlap Fix

Hey guys, have you ever encountered a pesky bug in FleetOps where the sidebar just won't behave? Specifically, when you're cruising through the live map view, clicking on the "Places" tab should ideally close any open place detail sidebars, right? Well, it seems there's a glitch where it doesn't always do that, leading to some frustrating navigation issues. And to top it off, you might find yourself with multiple overlapping sidebars, which is just a visual headache. Let's dive into these quirks and see how we can smooth things out. This article will help you understand the issue, provide steps to reproduce it, explain the expected behavior, identify the affected components, and offer some technical insights.

Bug Description: Sidebar Shenanigans in FleetOps

Okay, so let's get down to the nitty-gritty of the FleetOps sidebar woes. The core problem revolves around two main issues that can disrupt your workflow. First up, we've got the stubborn sidebar that refuses to close when you switch tabs. Imagine you're checking out the details of a specific place, and the place detail sidebar pops up on the right side of the screen. Now, you decide to switch over to the "Places" tab in the map drawer on the left. The expected behavior? The place detail sidebar should gracefully disappear, making way for the new tab's content. Unfortunately, this isn't always the case, and the sidebar can stubbornly stick around. Secondly, we have the issue of overlapping sidebars, which can quickly turn your screen into a cluttered mess. Picture this: you're clicking on different place markers, and instead of the new details replacing the old ones, you end up with multiple sidebars piled on top of each other. This overlapping behavior can obscure crucial information and make it challenging to interact with the map effectively. These issues can significantly hinder your experience when navigating the live map view.

Sidebar Doesn't Close on Tab Switch

The first frustrating quirk is the sidebar that refuses to close when you switch tabs within the map drawer. This behavior creates a disjointed user experience. When you click the “Places” tab, the active place details sidebar should automatically close. But, for some reason, the place details sidebar stays open, creating a messy view. This makes it difficult to navigate the map. The user has to manually close the sidebar to view other content. This can interrupt the workflow and reduce efficiency. Proper tab management is essential for a smooth and intuitive user experience. The bug directly contradicts the expected workflow within the application.

Multiple Overlapping Sidebars

The second problem is the emergence of multiple overlapping sidebars. This behavior directly affects the visual organization of the map. With overlapping sidebars, the details of the places are obscured. The ability to quickly and easily see and interact with all the necessary information is reduced. If the sidebars continue to overlap, the view becomes increasingly cluttered and the user experience degrades. The user ends up wasting time closing the previous sidebar to view the details of the other places. The overlapping sidebars create confusion and frustration. This bug makes it difficult to focus on relevant information and reduces the application's overall usability.

Steps to Reproduce: How to Make the Bug Happen

Alright, let's get hands-on and walk through the steps to reproduce these FleetOps sidebar issues. Follow along, and you'll see exactly how these bugs rear their heads. The goal is to provide a clear and concise guide for reproducing the issues. By following these steps, you can experience the problem first-hand and confirm its presence.

Issue 1: Sidebar Not Closing on Tab Switch

1. Navigate to the Live Map View: Start by launching FleetOps and heading over to Operations -> Live View. This will take you to the map view, where you can see all the action. This step sets the stage for the bug reproduction.
2. Click a Place Marker: Next, click on any place marker on the map. This action will trigger the place details sidebar to open, providing you with more information about the selected location. This is your initial setup for the scenario.
3. Observe the Sidebar: Make sure the place details sidebar is visible on the right side of the screen. This confirms that the sidebar is correctly functioning. This is the starting point for the test.
4. Click the "Places" Tab: Now, click on the "Places" tab in the map drawer on the left side of the screen. This is the crucial step where the bug should manifest. This action is designed to close the sidebar.
5. Expected Outcome: The place details sidebar should automatically close, making way for the content of the "Places" tab. The sidebar should no longer be visible. This is the anticipated result, which indicates proper functionality.
6. Actual Outcome: The place details sidebar remains open, even though you switched tabs. This indicates the bug is present, which means the sidebar fails to close as expected.

Issue 2: Multiple Overlapping Sidebars

1. Open the Live Map View: As before, start by navigating to FleetOps -> Operations -> Live View to access the map view. This is your starting point for the second test scenario.
2. Open the First Sidebar: Click on a place marker on the map to open its details sidebar. This opens the first sidebar.
3. Open the Second Sidebar: Click on another place marker on the map. This should ideally close the first sidebar and open the new one.
4. Observe Overlapping: Observe the screen. You will notice that multiple sidebars are open, overlapping each other. This is the visual manifestation of the bug. This shows that the expected behavior is not happening.

Expected Behavior: What Should Happen

So, what should be the ideal behavior in FleetOps to avoid these sidebar headaches? Let's clarify what a smooth and user-friendly experience should look like. The expected behavior ensures that the interface remains clean, intuitive, and efficient for users.

Sidebar Closure on Tab Switch

When you're interacting with the live map view, the system should intelligently manage sidebars. Specifically, when you switch to the "Places" tab in the map drawer, any open place detail sidebar should automatically close. This is critical for maintaining a clutter-free interface and ensuring that the content of the active tab is always front and center. The design should prioritize clean transitions and avoid unnecessary visual distractions. This also ensures that the user can seamlessly transition between different sections of the application.

Single Sidebar Instance

Opening new place detail sidebars should always replace any existing sidebars of the same type. This prevents the undesirable effect of multiple sidebars stacking on top of each other. The system should enforce a single instance of each sidebar, so only one place detail sidebar is open at a time. By enforcing single-instance behavior, the interface will stay organized and easy to navigate. This approach improves usability and reduces cognitive load, allowing users to focus on the information they need without getting overwhelmed by a cluttered screen.

Affected Components: Where the Bugs Reside

Let's put on our detective hats and figure out which components are causing these sidebar shenanigans in FleetOps. Knowing where the issues live is crucial for anyone trying to fix them. Here is a breakdown of the key components involved in this problem.

• packages/fleetops/addon/components/map/leaflet-live-map.js: This file contains the onPlaceClicked method, responsible for handling place marker clicks on the map. The bug occurs when clicking on a place marker to open its details sidebar.
• packages/fleetops/addon/services/place-actions.js: This service includes the panel.view() method, which is responsible for managing the place detail sidebars. This is where the sidebars are opened and managed when a place marker is clicked. The method uses resourceContextPanel.open() to handle the sidebar.
• packages/fleetops/addon/components/map/drawer.js: This is where the tab management logic resides. The tab management logic in the map drawer isn't properly communicating with the resource context panel. When the tab switches, it doesn't instruct the panel service to close the open sidebars.
• packages/ember-ui/addon/services/resource-context-panel.js: This service is responsible for managing resource context panels, including sidebars. It appears that this service allows multiple overlays to be open simultaneously, without enforcing single-instance behavior for the same resource type. It is where the overlay management takes place. This lack of enforcement leads to the overlapping sidebar issue.

Technical Notes: Digging into the Code

Alright, let's dive a bit deeper into the technical side of things and see what's causing these bugs to pop up. Understanding the technical aspects helps pinpoint the root cause of the issues and offers insights into how to fix them.

The core of the problem lies in a few key areas:

1. Sidebar Opening: Place clicks trigger sidebars via placeActions.panel.view(), which in turn uses resourceContextPanel.open(). This is how the sidebars are initiated and displayed on the screen.
2. Tab Switching Communication Gap: The tab switching within the map drawer isn't properly communicating with the resourceContextPanel service. When a tab switch happens, there's no signal sent to the service to close existing overlays, causing them to remain open.
3. Resource Context Panel Behavior: The resourceContextPanel service allows multiple overlays of the same resource type to be open simultaneously. There's no built-in mechanism to enforce single-instance behavior for the same resource type. This means the service doesn't prevent multiple sidebars from opening at the same time.

These elements combined create the perfect storm for our sidebar issues, and resolving these issues involves ensuring proper communication between the tab management, the place actions, and the resource context panel services. It also requires the implementation of a single-instance behavior for the same resource type to ensure only one place detail sidebar is open at a time.

Environment: Where the Bug Appears

To better understand where you might encounter these issues, here's a quick rundown of the environment.

• FleetOps Version: This bug is present in the current main branch of FleetOps. So, if you're working with the latest codebase, you might run into this.
• Affected Views: The issues primarily affect the Operations -> Live View (map layout). This means the problems are most noticeable when interacting with the live map.
• Browser Compatibility: The bug is confirmed to affect all browsers. No matter which browser you prefer, you can expect to see these issues.

These details will help you determine when you might see these bugs and which areas of the application are most affected.