Tab pane not set in local storage for /targets/1

[davner]

Describe the bug
The Jquery to store the tab pane in target_detail.html in tom_targets/templates/tom_targets does not function as expected. The pane is not remembered or reloaded on refresh.

To Reproduce
Steps to reproduce the behavior:

1. Create a target
2. Go to http://localhost:8000/targets/1/
3. Click on a tab pane other than Observe such as Observations
4. Reload the page
5. See that the tab pane is not remembered
6. Adding a console.log to the javascript that does the storing to local storage to the tab event doesn't not get triggered.

Expected behavior
We expect the tab pane to be remembered (stored) and loaded to that pane upon refresh.

Desktop (please complete the following information):

• Chrome
• Dev branch commit 4f0729b
• Python 3.10.13

Proposed Solution
Option 1 (preferred)
Rather than storing the tab pane to local storage, have the ability to load a specific pane by adding in a url param tab. The vanilla javascript to accomplish this:

document.addEventListener("DOMContentLoaded", function() {
  // Fetch the URL and look for the 'tab' query parameter.
  const url = new URL(window.location.href);
  const tabQuery = url.searchParams.get('tab');

  // If a tab is specified in the URL, make it active.
  if (tabQuery) {
    const activeTab = '#' + tabQuery;
    // Remove the 'tab' query parameter to avoid unwanted persistence across
    // page reloads.
    url.searchParams.delete('tab');
    history.replaceState({}, document.title, url.toString());

    // Show the active tab, if any.
    const tabElement = document.querySelector(`a[href="${activeTab}"]`);
    if (tabElement) {
      tabElement.click();
    }
  }
});

Then in the views.py for whatever TOM package, add it to the url to open to that pane.
return redirect(reverse('tom_targets:detail', args=(target_id,)) + '?tab=observations')

This will redirect to the url http://localhost:8000/targets/1/?tab=observations, flips the tab pane to Observations and then strips the param and sets the url to http://localhost:8000/targets/1/.

This gives us the advantage of being able to load any pane upon return such as using the buttons in `/targets/:

• Update Observation Status
• Add Existing Observation
• Upload for photometry

Option 2
Do the previous behavior of storing the tab pane viewed in local storage and restore it.

I prefer option 1 as it gives us control of what page to redirect to. I don't see the need to remember the pane in local storage and could cause some interesting behaviors.

I can have a fork with a branch ready for a Pull Request with whatever method we agree on.

[jchate6]

Hi Dan,
Option 1 sounds great to me. We would greatly appreciate any PRs you get us.

[davner]

@jchate6 a PR was created with Option 1 implemented.