Skip to content
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

Merged
merged 30 commits into from
Jan 12, 2022

Conversation

hodoje
Copy link
Collaborator

@hodoje hodoje commented Jan 5, 2022

This PR addresses the issue: #1658
And also it relies on #1665

Here are some component diagrams showing the current and future component layout
Screenshot 2022-01-05 at 21 21 30
Screenshot 2022-01-05 at 21 21 55
Screenshot 2022-01-05 at 21 23 33

How things look now:

List view with two datasets and two layers (one per dataset):
Screenshot 2022-01-05 at 22 52 51

Sort by dataset view for the same datasets and layers:
Screenshot 2022-01-05 at 22 53 08

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:
Screenshot 2022-01-05 at 22 53 24

Screenshot 2022-01-05 at 22 53 47

Did the same thing for the second dataset:
Screenshot 2022-01-05 at 22 54 08

How the order looks when in list view:
Screenshot 2022-01-05 at 22 54 23

When in list view the layers are sortable so after some sorting, we now have this in list view:
Screenshot 2022-01-05 at 22 54 43

Which in sort by dataset view looks like this:
Screenshot 2022-01-05 at 22 54 55

hodoje and others added 20 commits December 10, 2021 19:26
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 <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>
@hodoje hodoje changed the title [Enhancement] order layers by dataset [Enhancement] order layers by dataset [WIP] Jan 5, 2022
@heshan0131
Copy link
Contributor

Please add UI screenshots for this PR, essentially showing what UI has changed, and how it looks like now

@hodoje
Copy link
Collaborator Author

hodoje commented Jan 5, 2022

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.
Will add more screenshots.

@heshan0131
Copy link
Contributor

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. Will add more screenshots.

UI mockup might look different than the actual implementation

@hodoje
Copy link
Collaborator Author

hodoje commented Jan 5, 2022

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. Will add more screenshots.

UI mockup might look different than the actual implementation

True.

Signed-off-by: hodoje <nkaraklic@foursquare.com>
hodoje added 3 commits January 6, 2022 12:35
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>
@hodoje hodoje changed the title [Enhancement] order layers by dataset [WIP] [Enhancement] order layers by dataset Jan 11, 2022
@hodoje hodoje marked this pull request as ready for review January 11, 2022 11:31
@hodoje hodoje changed the title [Enhancement] order layers by dataset [Enhancement] order layers by dataset [WIP] Jan 11, 2022
Signed-off-by: hodoje <nkaraklic@foursquare.com>
@heshan0131
Copy link
Contributor

heshan0131 commented Jan 11, 2022

The dataset selector dropdown should look the same as the datasource selector shown below

Screen Shot 2022-01-11 at 10 42 37 AM

To render a dropdown with search option use Typeahead

<Typeahead
  displayOption={displayOption}
  getOptionValue={getOptionValue}
  onOptionSelected={onSelectScale}
  customListItemComponent={DatasetItem}
  searchable={true}
  // ... other props also needed
/>

Signed-off-by: hodoje <nkaraklic@foursquare.com>
@hodoje hodoje changed the title [Enhancement] order layers by dataset [WIP] [Enhancement] order layers by dataset Jan 12, 2022
@heshan0131
Copy link
Contributor

disable sortable handle in the order by dataset view
Screen Shot 2022-01-12 at 9 54 46 AM

Signed-off-by: hodoje <nkaraklic@foursquare.com>
@heshan0131 heshan0131 merged commit 1e8b3c1 into keplergl:master Jan 12, 2022
cesars-gh added a commit to alphateamhackers/kepler.gl that referenced this pull request Jan 26, 2022
* [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>
bjungs pushed a commit to imec-int/kepler.gl that referenced this pull request Nov 14, 2022
* 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>
bjungs pushed a commit to imec-int/kepler.gl that referenced this pull request Nov 14, 2022
* 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants