[G2M] UI/editor rework 3

vxsl commented 2 years ago

depends on EQWorks/chart-system#161

controls

fixed CustomDropdown blur issues
color picker is now collapsed by default
implemented functionality for some buttons
- editor mode 'reset' button
- editor mode 'reload data' button
- 'clear' buttons
- Value Configuration (map and non-map versions)
- Filters
fix bug that sometimes caused malformed data when changing domains
disable legend position controls if !showLegend
disable title position controls if no titles are being shown
add toggle for displaying the widget title in the viz area
- currently hidden for map type widget, all other widget types depend on EQWorks/chart-system#161 to implement this feature
Left, and Right have been disabled for title position controls
encapsulate DataTransformationControls
columns subtitle in value controls when !group
introduced Data Transformations section as per design
introduced percentageMode state with corresponding toggle in Data Transformations
- introduced percentageData in useTransformedData that produces a series of percentages based on aggregatedData. Map type widget is currently excluded from this feature due to difference in transformation steps, but this can be modified in the future.
- uses new util roundToTwoDecimals
title, legend position controls now exist inside dropdown
implement multiple color representations (hex, RGB, HSL)
- introduced COLOR_REPRESENTATIONS, which contains a set of functions and values that constitute everything needed by ColorSchemeControls to provide base colour controls in that representation. This collection of utils is memoized via ui.colorRepresentation in the store.
the right sidebar now displays a message if !isReady : -
dev-restricted button to download config is now visible in editor mode
hide some elements that are not implemented
refine 'Group By'/'Index By' radio behaviour

style

several miscellaneous tweaks
improve WidgetControlCard clear button

store

reloadData action toasts on data reload success
type is now resettable, i.e. when the user clicks RESET, the widget type becomes undefined
resetWidget action now correctly resets uniqueOptions
introduced resetValue action, which performs a partial reset on the global state (currently used in 'Clear' buttons)
uniqueOptions default values are now asserted on widget type change
config object now includes groupFilter (oops)
loadConfig action now only loads states that exist in stateDefaults
- sort of a workaround for a bug where newly-introduced dataFormatFunctions state was being manually assigned in this method, even though it is supposed to be computed
remove all computed states from stateDefaults (it was redundant to have them there, as they cannot/should not be 'resettable' or have default values)

components

WidgetControlCards now accept clear prop, which is a callback for the clear button. This button not rendered if no clear prop is provided.
XYSelect now accepts an array of disabled cells, which defaults to [[0.5, 0.5]].
XYSelect styling has been updated to more closely match the latest design
PluralLinkedSelect tweaks
- always shows a minimum of 1 row, instead of just the Add button
fixed disabled SVG color in CustomButton

util

introduce roundToTwoDecimals

deps

update @eqworks/lumen-labs to v0.1.0-alpha.27
update @eqworks/chart-system to v0.6.3-alpha.8
add colord
add use-debounce

github-actions[bot] commented 2 years ago

📚 Storybook preview (updated to 108df48c29b222ea5dfcbd414670f188418732f8)

sallkall commented 2 years ago

weird icon behaviour in `open in editor`

input box prefix and suffix

is it possible to use the ^lumen-labs TextField component features namely prefix and suffix for HSL and RGB? So actual input area only has to be comma separated

unify padding

can we unify the padding around the square?

button icon not aligned:

geoerika commented 2 years ago

Didn't look at all styling in Figma, but I noticed the icons in the buttons look smaller than before and the styling is different than in Figma design. You have a white border for the buttons that the design doesn't have:

geoerika commented 2 years ago

When using the slider in the Value Filter, the min and max values below don't update.

vxsl commented 2 years ago

Didn't look at all styling in Figma, but I noticed the icon buttons look smaller than before and the styling is different than in Figma design. You have a white border that the design doesn't have:

@geoerika Will adjust the size when I go through and fix up the sizes throughout the entire app (most of them are wrong because I was using the wrong base size for my px->rem calculations).

Thanks for noticing the border inconsistency, I assumed they were the same between QL mode and Editor mode :open_mouth: . Actually, @sallkall, can you let me know if I should make them different or make them both as they are shown in the editor design?

editor design:

QL design:

... Also just realized I am missing the icon titles in editor mode. Will add.

When using the slider in the Value Filter, the min and max values below don't update.

@geoerika Good catch, thanks. Will push the fix here

sallkall commented 2 years ago

Didn't look at all styling in Figma, but I noticed the icon buttons look smaller than before and the styling is different than in Figma design. You have a white border that the design doesn't have:

@geoerika Will adjust the size when I go through and fix up the sizes throughout the entire app (most of them are wrong because I was using the wrong base size for my px->rem calculations).

Thanks for noticing the border inconsistency, I assumed they were the same between QL mode and Editor mode :open_mouth: . Actually, @sallkall, can you let me know if I should make them different or make them both as they are shown in the editor design?

editor design:

QL design:

... Also just realized I am missing the icon titles in editor mode. Will add.

When using the slider in the Value Filter, the min and max values below don't update.

@geoerika Good catch, thanks. Will push the fix here

I intentionally removed the white border and added the label for the widget type icons in editor. So yeah between QL and editor they are different.

vxsl commented 2 years ago

@sallkall

weird icon behaviour in open in editor

fixed in #80

is it possible to use the ^lumen-labs TextField component features namely prefix and suffix for HSL and RGB? So actual input area only has to be comma separated

I did try to implement this and it cascaded into a lot of roadblocks. Maybe something I will pick up again in the future but for now is it ok if we leave it like this? Besides, there is one benefit to omitting the prefix and suffix: the user can copy paste values from a color picker. :shrug:

can we unify the padding around the square?

fixed in #80

button icon not aligned:

fixed in #80

sallkall commented 2 years ago

@sallkall

weird icon behaviour in open in editor

fixed in #80

is it possible to use the ^lumen-labs TextField component features namely prefix and suffix for HSL and RGB? So actual input area only has to be comma separated

I did try to implement this and it cascaded into a lot of roadblocks. Maybe something I will pick up again in the future but for now is it ok if we leave it like this? Besides, there is one benefit to omitting the prefix and suffix: the user can copy paste values from a color picker. 🤷

can we unify the padding around the square?

fixed in #80

button icon not aligned:

fixed in #80

I see, if it's not working don't worry about it :)) And agreed, but given we have a color picker right below the input box not sure how often would people still look for an external color picker. Anyways we can leave it as is.

EQWorks / widget-studio