mbari-org / SeafloorMappingDB

Make MBARI seafloor mapping datasets more accessible and useful
GNU General Public License v3.0
3 stars 6 forks source link

Add time bounds to query for Missions on overview home page #88

Closed MBARIMike closed 2 years ago

MBARIMike commented 3 years ago

With the ability now to see the nav tracks following the work of https://github.com/mbari-org/SeafloorMappingDB/issues/69 we now have the need to constrain the visualization to selected start and end times. This can be achieved with two HTML sliders at the top of the page as described here: https://stackoverflow.com/a/64612997/1281657. Upon setting a new temporal bounds the database will be queried. It might be helpful to add the geospatial bounds to the query based on the current viewport. We want the response to be quick.

MBARIMike commented 3 years ago

I think this can all be done client-side without any intermediate queries of the backend database. It's done for the Spatial 3D animation in the STOQS UI by hiding and showing elements using JavaScript. All (currently 567) of the nav_tracks are available in the DOM on initial page load in less than 4 seconds. If they were timestamped then we can use sliders to select them for display. Here's an example of doing that with Leaflet: http://dwilhelm89.github.io/LeafletSlider/

MBARIMike commented 3 years ago

The range slider at the top of the page above the map operates in steps of the time differences between the nav track features. The steps are not regular in time as might be expected. I attempted to fudge in additional markers to create a regularly stepped time slider but the JavaScript code became too complicated, so we'll live with the understanding that the time range slider operates with irregular time steps.

MBARIMike commented 3 years ago

Initial overview home page now looks like:

Screen Shot 2021-10-13 at 6 37 21 PM

Sliding the time sliders updates the display of the nav tracks all in the browser: smdb_time_bounds

Check the box next to the time range and click Update to re-query the database with the set time constraints. The same thing can be done with the spatial bounds checkbox on the lower left of the map. The URL for the resulting query can be saved, edited, and shared.

MBARIMike commented 2 years ago

It looks like this feature is working well in production now.