Finish up new catalog design - Time Series

[lexvand]

There is a new design for the catalog.

Updated design with time series export options and polygon selection feature: https://xd.adobe.com/view/2ca9bb91-e3f0-45c8-bc17-a0f15a4dfefc-79fa/

How to use:

1. Switch between details and actions
2. When in actions, click on select time series
3. Click on the date picker to see how it expands
4. Deselect Waterlevel in observation types
5. Deselect Temperatuur in observation types
6. Hover over the point in the middle of the map
7. Click on the map, you will now have selected two points

Notes:

Since we are going to use a library to select a polygon, i just made a button for now.

The modal of selecting time series should be an overlay, now the screen shows a black background

General improvements:

• Better view of the map
• Better spacing
• Different approach with details/actions tabs
• Redesign of filtering
• Slightly different layout

Time series

• Selection screen for time series

API Endpoints needed:

• Fill in for back-end

Joeri Verheijden
Casper van der Wel

Jose Maria Vazquez Jimenez

Carsten Byrman

[FRNT-878] created by lirry.pinter

[lexvand]

Lirry Pinter Can you share the design?

Tagging Carsten Byrman and Jose Maria Vazquez Jimenez as well as they actually the ones designing the API endpoint for the timeseries.

by casper.vanderwel

[lexvand]

I posted the design now!

by 5bc5ef6c31ce0f38feb36968

[lexvand]

After talk with Joeri Verheijden I am redesigning a small portion

by 5bc5ef6c31ce0f38feb36968

[lexvand]

Joeri Verheijden

2 options:

• Clicking observation types will select all locations with that observation type. The selected locations will only contain the time series with those observation types.

Pros: Quickly select all the locations with observation types.

Cons: Not a lot of flexibility and confusion when the user does not select an observation type

• Clicking observation types will work as a filter. The user has to click the stations and all the observation types that the users wants.

Pros: More flexible and structured clicking

Cons: Quickly selecting all locations with the same observation type is not possible anymore.

Solution:

• Observation type first.
• Map is filtered by chosen observation type (locations which dont have the selected observation type wont be shown)
• Searchbar
• Show code by hovering
• Selection happens on map, not by clicking observation. (so its a filter).

by 5bc5ef6c31ce0f38feb36968

[lexvand]

Joeri Verheijden Casper van der Wel updated the design

by 5bc5ef6c31ce0f38feb36968

[lexvand]

When user clicks on selected location in the list, the map zooms and centers this location. Hover effect stays in place when locations are selected.

by 5bc5ef6c31ce0f38feb36968

[hoanphungt]

@LirryPinter Hi Lirry,

I have few questions regarding the timeseries selection modal:

1. search bar on the map: is it to filter location by location's name?

2. the select period section: is it to export selected timeseries during the selected period only?Does it have anything to do with filtering the locations shown on the map?

3. Do I understand correctly that for the map, only filter on observation type is applied to locations on the map? The locations actualy don't have information about observation types. So to do this, I probably need to filter timeseries and then show only the locations that have these timeseries.

[Derryrover]

@LirryPinter

Hi Lirry

We are currently in a reviewing phase for the catalogue ticket: https://github.com/nens/lizard-catalogue/issues/192 We test here: https://nxt3.staging.lizard.net/catalogue

I personally do find some things about the usability a bit hard. Nothing serious, I could eventually find what I was looking for (export timeseries), but still good to mention them i think.

• The dropdown to choose which table to choose from (raster timeseries wms) was not right away clear to me what its purpose is. I would not intuitively know that the table that I look at in the center is the table that I selected on the left in the dropdown. Maybe the name of the table should be in the center above the table. To switch between tables the previous tiled approach worked better for me, but I like the tiled approach in the management client even better.

• The organisation filters with the collapse now look very similar to the table dropdown. Also the + icons make me think I can click on them to add another organisation.

• The right side screen tabs are not immedeatly clear to me that they are tabs.

• If I click "select" timeseries the modal that opens up is also not right away clear to me. It works completely different from the previous screen. -- The filters are now below the map, while in my previous screen they where on the left side inside a collapse -- The map is on the left, while on the previous screen the map was on the right -- The list is on the right, while in the previous screen it was in the center. The list itself is also not formatted in a table wise fashion and missing controls to remove single items from the selection. I know the filters and steps 1,2,3 have explaining text, but I initially do not read those.

• The shopping card seems to be no longer used, correct? We could remove?

• the exported timeseries come up in the "export icon" in the mainscreen, but that one is greyed out because of the modal. I personally didnot notice my export was ready.

• The polygon tool is for selecting timeseries right? In that case I would recomment a select box instead. People know how that works from their OS.

Please have a look on staging. I can explain these comments in a call if needed.

kr Tom

[LirryPinter]

@Derryrover @joeriverheijden @hoanphungt

Thanks for your feedback

• Concering the dropdrown and filters: I think you have a point. I could add the name of the type above the table. It should be alligned to the left though, since everything is alligned that way. Additionally we could add a bit more shade to make the button more different compared to the filters. Also instead of '245 items' we could make it say the type of data ('245 rasters', etc).

• The top filter (in this case the organisation) should be opened at the start. This way the users know what the plus and minus button is for and they will instantly see that these are filters. @hoanphungt Could you make the fonts a bit larger and more like the design? I was not sure if the backend supported multiple selections but if we do we should make the radiobuttons in to checkboxes.

• That you don't see the tabs as tabs is indeed a personal thing i think. When we let the users test this I will add it to my list of things to look at to see if you are right.

• The shopping cart is for multiple selections so its still needed (for wms layers and rasters)

• Comments about the modal and export I can't look at now because I do not have rights to timeseries, i will ask @lexvand to give me some. So I will respond to these comments later.

[Derryrover]

@LirryPinter

Okey dankje voor de reactie Lirry.

[LirryPinter]

@Derryrover @joeriverheijden @hoanphungt

I can open some timeseries now.

• The flow of the export time series we though about it a lot. And that it is different from the general interface is fine because these are done in steps (select on the map, filter which observation types you want, check your list and maybe add a time frame). I do agree though that we cant remove a single timeseries from the list, other then deselecting that green circle on the map again. Putting an "X" behind the selected timeseries should suffice for that.

• What i noticed though is that there are observation types in the modal that are not in the data (selecting them will give you an empty map). I thought we could filter those with the backend? (because the monitoring network will tell you that it only contain certain observation types).

• I cant see the polygon tool

• Some remarks for @hoanphungt The actions and details tabs should remain in place. When I am in the time series section of the catalogue the tabs jump up. Lastly, the shade that from the tabs that is in the design is not visible here. Can you add it? I think it will give a clearer idea that this section is clickable.

[hoanphungt]

Hi @LirryPinter

Regarding your points, I summarize them as below:

• Dropdown and filter: more shade for the data type dropdown
• instead of 245 items --> 245 rasters / WMS layers / monitoring networks
• font-size bigger for the filter
• Top filter is open by default
• actions/details tab: tab jumping when switching
• Missing shade around the actions/details box
• Multiple selection in the filter bar (i.e. organisations): when I made the catalogue, it is not possible to have multiple selections, that's why we chose radio button. If multiple selection is now supported by backend, we can turn it to checkboxes. I checked with organisation and it is indeed possible to filter on multiple organisations. However, this deserves a separate ticket for it. I make one here: https://github.com/nens/lizard-catalogue/issues/204

Timeseries modal:

• X behind selected location to remove single selection
• Observation type filter: it works correctly but the data on staging for Utrecht contains many data with no geometry infos, so they cannot be shown on the map (so for now, only waterhoogte has data with geometry to show)
• Polygon tool: last time talking to you, there is no concrete answer whether we want this feature or idea on how it works so I left it out. I make a separate ticket for it if we still want this in the future: https://github.com/nens/lizard-catalogue/issues/205

The above improvements will be done under this ticket: https://github.com/nens/lizard-catalogue/issues/202 plus with some other comments from Lex

[hoanphungt]

@LirryPinter @Derryrover By the way, the point from Tom about the dropdown, I feel like it's not very clear what to do in this case yet and it would be better to update the design so Tom can have a look at it again:

The dropdown to choose which table to choose from (raster timeseries wms) was not right away clear to me what its purpose is. I would not intuitively know that the table that I look at in the center is the table that I selected on the left in the dropdown. Maybe the name of the table should be in the center above the table. To switch between tables the previous tiled approach worked better for me, but I like the tiled approach in the management client even better.

And also design for the X after the selected location to remove single selection:

I do agree though that we cant remove a single timeseries from the list, other then deselecting that green circle on the map again. Putting an "X" behind the selected timeseries should suffice for that.

[LirryPinter]

After a talk with @hoanphungt and @joeriverheijden Some new designs are needed:

• New type selection button (bigger and shadower)
• X’s for deleting single timeseries in selection
• Hover color for middle section
• Show more table, and lines

[LirryPinter]

@hoanphungt @joeriverheijden

Updated the design: https://xd.adobe.com/view/42a1c54f-2241-4240-b933-fb5ea4aaa18a-17f2/

• Button is larger and will have a color to make it pop out more (#F4F4F4). Filters are moved down a bit and will start at the same height as the coloumn names.

• Same color (#F4F4F4) is used for hovering over items

• Same color is used to make a border box and lines for the table

• Icons for deleting timeseries from selection is added.