-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Enhancement] order layers by dataset #1675
Conversation
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nikolakaraklic@gmail.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
…ove unnecessary memoization Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Please add UI screenshots for this PR, essentially showing what UI has changed, and how it looks like now |
I thought the screenshots in the issue itself were enough. |
UI mockup might look different than the actual implementation |
True. |
Signed-off-by: hodoje <nkaraklic@foursquare.com>
src/components/side-panel/layer-panel/panel-view-list-toggle.js
Outdated
Show resolved
Hide resolved
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
src/components/side-panel/layer-panel/panel-view-list-toggle.js
Outdated
Show resolved
Hide resolved
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
The dataset selector dropdown should look the same as the datasource selector shown below To render a dropdown with search option use <Typeahead
displayOption={displayOption}
getOptionValue={getOptionValue}
onOptionSelected={onSelectScale}
customListItemComponent={DatasetItem}
searchable={true}
// ... other props also needed
/> |
Signed-off-by: hodoje <nkaraklic@foursquare.com>
Signed-off-by: hodoje <nkaraklic@foursquare.com>
* [Bug] do not display geocoder dataset in side panel Signed-off-by: hodoje <nikolakaraklic@gmail.com> * [Bug] fix pin table column overide dataset (keplergl#1625) Signed-off-by: Shan He <heshan0131@gmail.com> * [chore] export types, add script to build types (keplergl#1636) - export types, add script to build types - ignore getDistanceScales type check (for now) - upload button to PF - fix localization file compile errors - move translations to translations folder Signed-off-by: Shan He <heshan0131@gmail.com> Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com> Co-authored-by: Giuseppe Macrì <macri.giuseppe@gmail.com> * [Enhancement] extract layers list to a separate component (keplergl#1665) Signed-off-by: hodoje <nkaraklic@foursquare.com> * [Enhancement] order layers by dataset (keplergl#1675) * extract layers list to a separate component * organize layers by dataset * add additional toggleLayerPanelListView action * extract add layer button to separate component * remove drag handle when in order by dataset view Signed-off-by: hodoje <nkaraklic@foursquare.com> * [Bug] fix filtered datasets memoization (keplergl#1678) Signed-off-by: hodoje <nkaraklic@foursquare.com> * update package script Co-authored-by: Nikola Karaklic <nikolakaraklic@gmail.com> Co-authored-by: Shan He <heshan0131@gmail.com> Co-authored-by: Giuseppe Macrì <macri.giuseppe@gmail.com> Co-authored-by: Nikola Karaklic <nkaraklic@foursquare.com>
* extract layers list to a separate component * organize layers by dataset * add additional toggleLayerPanelListView action * extract add layer button to separate component * remove drag handle when in order by dataset view Signed-off-by: hodoje <nkaraklic@foursquare.com>
* extract layers list to a separate component * organize layers by dataset * add additional toggleLayerPanelListView action * extract add layer button to separate component * remove drag handle when in order by dataset view Signed-off-by: hodoje <nkaraklic@foursquare.com>
This PR addresses the issue: #1658
And also it relies on #1665
Here are some component diagrams showing the current and future component layout



How things look now:
List view with two datasets and two layers (one per dataset):

Sort by dataset view for the same datasets and layers:

Clicking on the AddLayer button will open a dropdown list that will list all the loaded datasets and clicking on one of the items will create an empty layer for the selected dataset:

Did the same thing for the second dataset:

How the order looks when in list view:

When in list view the layers are sortable so after some sorting, we now have this in list view:

Which in sort by dataset view looks like this:
