Time slider by gjmooney · Pull Request #421 · geojupyter/jupytergis

gjmooney · 2025-01-31T15:58:47Z

Description

First attempt at adding a way to display features based on a time field.
Still very much a wip. Right now this works if the selected time feature is a date string (if that string is in one of a few formats).
It also 'works' if the feature is a number, but it's hard to distinguish between a timestamp and any other number, so this requires some vigilance from the user when selecting the feature to use.

I'm also not sure how the UI should look. @martinRenou suggested a double-ended slider to control start and end dates, unfortunately the slider in jupyter-ui-toolkit doesn't support that, but there's plenty of sliders that do. I'm open to any feedback on this.

Edit: Final iteration of UI:

Checklist

PR has a descriptive title and content.
PR description contains references to any issues the PR resolves, e.g. Resolves #XXX.
PR has one of the labels: documentation, bug, enhancement, feature, maintenance
Checks are passing.
Failing lint checks can be resolved with:
- pre-commit run --all-files
- jlpm run lint

📚 Documentation preview: https://jupytergis--421.org.readthedocs.build/en/421/
💡 JupyterLite preview: https://jupytergis--421.org.readthedocs.build/en/421/lite

github-actions · 2025-01-31T15:58:58Z

👈 Launch a Binder on branch gjmooney/jupytergis/time_slider

martinRenou · 2025-01-31T16:06:32Z

Amazing work!

I'm also not sure how the UI should look. @martinRenou suggested a double-ended slider to control start and end dates

I guess I'm only confused about the meaning of the slider position right now. It looks like the blue part (highlighted part) of the slider is the data range we DO NOT show, while the gray part is what we show, which I find a tiny bit confusing.
Is it the QGIS time slider behavior, if it has any?

I would easily make sense of a range slider since it's clear that you'd show only the features within this time range.

gjmooney · 2025-01-31T16:44:57Z

Amazing work!

I'm also not sure how the UI should look. @martinRenou suggested a double-ended slider to control start and end dates

I guess I'm only confused about the meaning of the slider position right now. It looks like the blue part (highlighted part) of the slider is the data range we DO NOT show, while the gray part is what we show, which I find a tiny bit confusing. Is it the QGIS time slider behavior, if it has any?

I would easily make sense of a range slider since it's clear that you'd show only the features within this time range.

For reference, this is what the QGIS version looks like:

mfisher87 · 2025-01-31T17:09:32Z

Awesome!!!

It would be wonderful to have a play/pause (and framerate) control :) Do you think that should be a separate PR?

github-actions · 2025-02-05T13:22:07Z

Integration tests report: appsharing.space

examples/pirates.geojson

martinRenou

Thanks! That looks amazing

I played a bit with it, some things I noticed:

Toggling the time controls panel makes the bottom toolbar disappear

Screencast.From.2025-02-07.09-51-53.mp4

The time controls panel does not update itself upon layer selection

To reproduce:

Open the earthquakes.jGIS doc
Do not select any layer yet
Open the time controls panel (it should say "You need to select a layer")
Select a layer

-> The time controls panel does not update itself automatically

Probably related to the one above, the time controls panel button in the toolbar should be disabled if there is no selection OR if the current selection is a multi-selection OR if the selected object is a source, not a layer

It seems I cannot even make the time slider work on `earthquakes.jGIS`, even though the feature "time" is selected. Nothing shows up

Screencast.From.2025-02-07.09-59-00.mp4

martinRenou · 2025-02-07T08:47:15Z

packages/base/src/mainview/mainView.tsx

        newSource = new VectorSource({
          features: featureCollection
        });
+        console.log('finish');


Suggested change

console.log('finish');

gjmooney · 2025-02-07T12:41:28Z

Thanks! That looks amazing

I played a bit with it, some things I noticed:

The time controls panel does not update itself upon layer selection

-> The time controls panel does not update itself automatically

I swear this used to work 😿

Probably related to the one above, the time controls panel button in the toolbar should be disabled if there is no selection OR if the current selection is a multi-selection OR if the selected object is a source, not a layer

👍

It seems I cannot even make the time slider work on earthquakes.jGIS, even though the feature "time" is selected. Nothing shows up

This was because the range for the earthquake data is only a month, if you went to days for the step it would've worked. I added a check to only display steps that make sense with the data.

All these should be resolved now.

martinRenou · 2025-02-07T12:44:06Z

So now my last question is, did you find a correlation between earthquakes and pirate attacks? 😆

gjmooney · 2025-02-07T12:48:47Z

So now my last question is, did you find a correlation between earthquakes and pirate attacks? 😆

Turns out pirates are actually an earthquake deterrent.

martinRenou

This looks amazing really, but I still have comments/suggestions 😄

When there is only one selectable feature, should we automatically select it?

martinRenou · 2025-02-07T12:57:05Z

examples/earthquakes.jGIS

+    "348d85fa-3a71-447f-8a64-e283ec47cc7c": {
+      "name": "Custom GeoJSON Layer Source",
+      "parameters": {
+        "path": "../../examples/eq.json"


I'm curious to know why the path changed, we may have a bug somewhere around the file selector. This path change makes it fail when I try to load that file in JupyterLite, it should stay:

Suggested change

"path": "../../examples/eq.json"

"path": "eq.json"

gjmooney · 2025-02-07T14:47:05Z

Animation works in lite now, this slider is weird.

gjmooney · 2025-02-07T14:47:40Z

please update snapshots

martinRenou · 2025-02-07T14:50:30Z

packages/base/src/mainview/TemporalSlider.tsx

+  const playAnimation = () => {
+    // Clear any existing interval first
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current);


I've never seen this interval thingy, I'm more familiar with the requestAnimationFrame, could it be more reliable for browser animation?

I don't think it's related to that. The html version of slider has valuesasnumber, valuenow, and current-value attributes in lite, but in lab it has value and current-value (I don't know why they change). The callback in the interval changes currentValue in the component correctly, but for some reason only setting the valueAsNumber prop works in lab (setting value instead of valueAsNumber make the slider out of sync with the actual value), but in lite the slider is based on the value prop.

That's a long way of saying the interval was happening correctly.

Oh, could JupyterLite be providing an outdated version of the ui-toolkit that provides that slider?

It looks like lite is using 0.16.7 and we're on 0.16.6, but they should both resolve to 0.16.7

gjmooney · 2025-02-07T15:57:28Z

please update snapshots

gjmooney · 2025-02-10T08:46:52Z

please update snapshots

martinRenou

Some more things I noticed while testing:

The feature on which to run the time controls should be selected automatically when opening the controls (first one from the list)
If we remove the layer on which the time controls are running, we should close the time controls
If I open the time controls, play with the animation a bit, then change the symbology of the vector layer to e.g. a heatmap, the time controls stop working

gjmooney · 2025-02-10T16:16:22Z

Some more things I noticed while testing:

* The feature on which to run the time controls should be selected automatically when opening the controls (first one from the list)

* If we remove the layer on which the time controls are running, we should close the time controls

* If I open the time controls, play with the animation a bit, then change the symbology of the vector layer to e.g. a heatmap, the time controls stop working

The first two are done. For now I just made the controller close when changing to a heatmap. I'm trying to get the slider to work with heatmap layers, but no luck with that so far.

mfisher87

🤩 Wow, there's a lot here. How'd you get this done so fast? 😅 Amazing work 🤩

packages/base/src/commands.ts

packages/base/src/dialogs/symbology/vector_layer/types/Graduated.tsx

packages/base/src/dialogs/symbology/vector_layer/types/Categorized.tsx

packages/base/src/mainview/TemporalSlider.tsx

packages/base/src/tools.ts

packages/schema/src/model.ts

martinRenou

Thanks a lot! Quite a lot of work done here :D

* Refactor getFeature stuff * Add toolbar item * Add temporal boolean * Start adding time slider thing * Continue * New example * wip * Add date-fns and examples * wip * Saving * I think it works * wip * Still works * Clean up slider * Add CSS class * Emit signal on feature select * Examples * Use awareness to hold time boolean * UI tweak * UI rework * Refactor filters logic * Make the icon toggleable * Refactor adding filter in slider component * Do time filtering in memory * Save * CSS * Clean up * Fix state check * Add FPS control * Update commands * yarrr * Fix layer selecting * Only display steps that make sense * Enable/Disabel toolbar button based on selection * Clean up * Fix CSS for mainview * Add raster layer check * Clean up * Actually use state * Clear filter when closing * Fix animate in lite * Add borders * Remove status bar border and restore screenshots * Remove filter from example * Select default feature * Pass commands to mainview * Close on layer deleteion or type change * Set default step correctly * Suggestions * Heatmap wip * Remove feature from schema * Enable for heatmap layers * Close * Heatmaps work? * Tweak * State restore wip * Set filter states in mainview * Fixed * Clean up

gjmooney force-pushed the time_slider branch from e141dc7 to b85dc81 Compare February 5, 2025 13:12

gjmooney added the enhancement New feature or request label Feb 5, 2025

gjmooney force-pushed the time_slider branch from b85dc81 to 401721f Compare February 6, 2025 10:53

gjmooney marked this pull request as ready for review February 6, 2025 11:51

gjmooney force-pushed the time_slider branch from 401721f to 9ed3730 Compare February 6, 2025 13:36

gjmooney requested review from martinRenou and mfisher87 February 6, 2025 13:37

gjmooney force-pushed the time_slider branch 2 times, most recently from 67a97ce to 3618cb9 Compare February 6, 2025 14:27

martinRenou reviewed Feb 6, 2025

View reviewed changes

examples/pirates.geojson Outdated Show resolved Hide resolved

martinRenou requested changes Feb 7, 2025

View reviewed changes

martinRenou added this to the 0.4.0 milestone Feb 7, 2025

gjmooney force-pushed the time_slider branch from f4a9272 to cb0fd5e Compare February 7, 2025 14:33

martinRenou reviewed Feb 7, 2025

View reviewed changes

gjmooney force-pushed the time_slider branch from cf2b0e2 to 743c271 Compare February 7, 2025 15:25

gjmooney force-pushed the time_slider branch from 743c271 to 7942eab Compare February 10, 2025 10:37

martinRenou requested changes Feb 10, 2025

View reviewed changes

gjmooney added 10 commits February 10, 2025 12:49

Actually use state

7075d65

Clear filter when closing

b38fc6b

Fix animate in lite

d833d68

Add borders

d8c99a4

Remove status bar border and restore screenshots

91bea01

Remove filter from example

ff9d5c4

Select default feature

9cf7bb7

Pass commands to mainview

67cdc5d

Close on layer deleteion or type change

45c8c51

Set default step correctly

a8ec175

gjmooney force-pushed the time_slider branch from 7942eab to a8ec175 Compare February 10, 2025 14:00

mfisher87 reviewed Feb 10, 2025

View reviewed changes

gjmooney force-pushed the time_slider branch from 407fdff to d056ffc Compare February 11, 2025 10:12

Suggestions

fede96c

gjmooney force-pushed the time_slider branch from d056ffc to fede96c Compare February 11, 2025 10:26

gjmooney added 10 commits February 11, 2025 14:44

Heatmap wip

6830760

Remove feature from schema

bd8e83a

Enable for heatmap layers

1d538b6

Close

95cf5bc

Heatmaps work?

e392085

Tweak

685134d

State restore wip

7b56775

Set filter states in mainview

69b4126

Fixed

2723642

Clean up

a3000e2

martinRenou approved these changes Feb 13, 2025

View reviewed changes

martinRenou merged commit 142a554 into geojupyter:main Feb 13, 2025
13 checks passed

gjmooney deleted the time_slider branch February 13, 2025 13:11

Conversation

gjmooney commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Checklist

Uh oh!

github-actions bot commented Jan 31, 2025

Uh oh!

martinRenou commented Jan 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

gjmooney commented Jan 31, 2025

Uh oh!

mfisher87 commented Jan 31, 2025

Uh oh!

github-actions bot commented Feb 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

Toggling the time controls panel makes the bottom toolbar disappear

The time controls panel does not update itself upon layer selection

Probably related to the one above, the time controls panel button in the toolbar should be disabled if there is no selection OR if the current selection is a multi-selection OR if the selected object is a source, not a layer

It seems I cannot even make the time slider work on earthquakes.jGIS, even though the feature "time" is selected. Nothing shows up

Uh oh!

martinRenou Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney commented Feb 7, 2025

The time controls panel does not update itself upon layer selection

Probably related to the one above, the time controls panel button in the toolbar should be disabled if there is no selection OR if the current selection is a multi-selection OR if the selected object is a source, not a layer

It seems I cannot even make the time slider work on earthquakes.jGIS, even though the feature "time" is selected. Nothing shows up

Uh oh!

martinRenou commented Feb 7, 2025

Uh oh!

gjmooney commented Feb 7, 2025

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

Uh oh!

martinRenou Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney commented Feb 7, 2025

Uh oh!

gjmooney commented Feb 7, 2025

Uh oh!

martinRenou Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

martinRenou Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney Feb 7, 2025

Choose a reason for hiding this comment

Uh oh!

gjmooney commented Feb 7, 2025

Uh oh!

gjmooney commented Feb 10, 2025

Uh oh!

martinRenou left a comment

Choose a reason for hiding this comment

Uh oh!

gjmooney commented Feb 10, 2025

Uh oh!

mfisher87 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

gjmooney commented Jan 31, 2025 •

edited

Loading

martinRenou commented Jan 31, 2025 •

edited

Loading

github-actions bot commented Feb 5, 2025 •

edited

Loading

It seems I cannot even make the time slider work on `earthquakes.jGIS`, even though the feature "time" is selected. Nothing shows up

It seems I cannot even make the time slider work on `earthquakes.jGIS`, even though the feature "time" is selected. Nothing shows up