search

EQWorks / widget-studio

Widget-creating tool for charts, maps, tables, stats
https://eqworks.github.io/widget-studio/
2 stars 3 forks source link

[G2M] Add map layer styling controls #86

Closed geoerika closed 2 years ago

geoerika commented 2 years ago

Changes:

Editor Right Panel

  1. Added range Radius, simple Radius & Elevation sliders to Layer Displaysection in the right Editor panel
Screen Shot 2022-02-14 at 8 58 26 AM Screen Shot 2022-02-14 at 8 59 32 AM Screen Shot 2022-02-14 at 9 00 16 AM
  1. Created a general Slider component which can function in both modes, simple or range and replacing the Rangecomponent. Also, adjusted the with of the Slider to take the whole panel width to accommodate longer values.
  2. Created a common SliderControlcomponent which can be used in both Value Filters & MapLayerDisplay components
Screen Shot 2022-02-14 at 9 09 37 AM Screen Shot 2022-02-14 at 9 09 51 AM
  1. Replaced StylingMap comp with MapLayerDisplay comp
  2. Completed uniqueOptions constants in type-info to include default values for map widget
  3. Adjusted some margins throughout the code in the right panel to fit better the map styling controls, also some of the spaces looked too large in the previous implementation - all up to revision

To Do:

  1. Outline for polygons when we have no elevation doesn't work. It looks like a react-maps issue, as all props are setup correctly in the deck.gl GeoJSON layer.
  2. Clean up a bit map widget code
  3. Try fix the active status of the lumen-labs TextFields used in MapLayerDisplay
  4. If time allows, fix the Slider value label - it is not fitting long numbers
github-actions[bot] commented 2 years ago

📚 Storybook preview (updated to c69b3b0c5f2ac9e066ba12316f7c2f9168f1bb7b)

geoerika commented 2 years ago

Looks good and seems to work well. I also made some refactoring adjustments to the range control component in an incoming PR, so I'll just rebase it on this.

Question: why not use the slider component for opacity and outline width as well?

@kyle The design opted for text fields. I actually prefer the slider as well. Will ask Catherine.

geoerika commented 2 years ago

Looks good and seems to work well. I also made some refactoring adjustments to the range control component in an incoming PR, so I'll just rebase it on this. Question: why not use the slider component for opacity and outline width as well?

@vxsl The outline is a bit trickier as it can appear on either sides of the panel and I only have the design to expend the menu to the right , it won't fit with the current slider implementation. But can certainly look into it. Also, the increments on that outline cannot be changed too drastically, so not sure, the arrows might be a better solution, if you try, there is almost no use case for after 5-6 pixels for outline. That's my next on the task list as well, look at the min and max and set them all more realistically. Most of them are fine, for outline I am torn to what value I should restrict the line width to, the 100 I am using now doesn't make much sense.

vxsl commented 2 years ago

@vxsl The outline is a bit trickier as it can appear on either sides of the panel and I only have the design to expend the menu to the right , it won't fit with the current slider implementation. But can certainly look into it. Also, the increments on that outline cannot be changed too drastically, so not sure, the arrows might be a better solution, if you try, there is almost no use case for after 5-6 pixels for outline. That's my next on the task list as well, look at the min and max and set them all more realistically. Most of them are fine, for outline I am torn to what value I should restrict the line width to, the 100 I am using now doesn't make much sense.

Right that makes sense - don't have a strong opinion was just curious