camicroscope / caMicroscope

Digital pathology image viewer with support for human/machine generated annotations and markups.
BSD 3-Clause "New" or "Revised" License
252 stars 290 forks source link

Bug : Responsive table duplication on mobile screens due to stacktable.js multiple initializations #847

Open harshpreet14 opened 7 months ago

harshpreet14 commented 7 months ago

Describe the bug The responsive tables rendered on mobile screens exhibit duplicated tables. The issue is caused by multiple instances of responsive tables being initialized by the stacktable.js plugin, without the previous instances being cleared from the DOM. This results in stacked tables accumulating and rendering duplicate content.

To Reproduce Steps to reproduce the behavior:

  1. Navigate to the Slides table page on a desktop browser.
  2. Activate responsive design mode, simulating a mobile viewport.
  3. Observe the manifestation of duplicate table instances indicated by multiple .stacktable.small-only elements.

Expected behavior There should be no table duplicates in the table.html page.

Screenshots

Screenshot 2024-03-22 202425 image

Desktop (please complete the following information):

Additional context When the page is loaded or when certain actions trigger a table refresh on mobile devices, the stacktable.js plugin is called to create the mobile-friendly table layout. If the plugin is called multiple times without proper cleanup, each call generates a new stacked table, leading to multiple stacked tables being inserted into the DOM.