[Meta][Canvas] Usability improvements

[ryankeairns]

This is a meta issue to track usability improvements to consider a we approach GA and beyond.

Feedback & observations

Highest priority

• Add ability to undo via Cmd-Z/Ctrl-Z - [Canvas] Ability to undo actions #23614
• Allow for a larger expression editor window - [Canvas] Larger expression editor #27697 (pop out window? flyout?)
• Continue adding common keyboard shortcuts - [Layout Engine] Keyboard Shortcuts: Element Basic Commands #23053
• Clarify that time filter applies to the entire workpad by default (make filter groups more discoverable) [Canvas] Clarify that the 'Time filter' element applies to the entire workpad #31329
• [Box select] Add ability to click-and-drag to select layers for grouping Status: WIP PR [Canvas] Feat: Box select #32995
• Add number formatting elements that display values (e.g. currency, decimals, etc.) - Create arg type for formatnumber #23111
• Add ability to zoom in/out of workpad (helps with positioning elements/images that go off the work area) - [Canvas] Ability to zoom in/out on a workpad #27123 & [Canvas] Fit workpad to window #27124
• Add ability to nudge layers using arrow keys - Nudge elements with arrow keys #23150 and [Accessibility] Unable to move Canvas Elements via arrow keys #25504
• Display element settings for all items in a group (accordion layers) - [Canvas] Grouped elements accordion menu #35907

---

Shortcuts/Working with layers

• Add UI controls (buttons) for grouping and ungrouping for better affordance/discoverability (ideas -> [Layout Engine] Grouping: Define Groups of Elements #23054)
• Make the layer ordering controls more obvious/discoverable

Loading/Saving

• Improve the loading design - [Canvas] Improve UI design to better communicate status/progress when loading a workpad #25140
• Saving indicator - Saving indicator to show workpad saving progress / completion #23114
• Warning message changes weren't saved - Warn user when changes are not applied #25062

Workpad Loader

• Grid view - [Canvas] Show template and workpad thumbnails on home page #23142

Settings panel

• Add background image upload to page config - Add background image upload to page config #23931
• master slide settings - Master slide or "apply to all" button in page config  #23933
• Add a red set to the color picker (possibly replace the pink)
• Clarify that the main workpad color picker manages colors for all color pickers (or allow all color pickers to manage [add or remove] colors)
• Add custom colors to the color picker (e.g. I keep re-using my brand of green)
• Add setting to change fill color on SVG assets (similar to border)
• Increase border size (width) when a border color is selected (currently sticks on 0)
• Add border radius UI control on the Shape element
• Add ability to do borders on specific sides (currently applies to all sides only)
• Add ability to enter a specific height on an element (e.g. 240px)
• Add more sans-serif fonts that work well for displaying number values
• Add ability to change text within a grouped element (from the side panel vs ungroup/edit/regroup)
• Allow custom fonts - [Canvas] Support custom fonts #23332
• Replace the existing palette picker with the upcoming EUI palette picker component
• Replace the existing Markdown textarea with the upcoming EUI Markdown component - [Canvas] Replace the Markdown textarea input with EUI Markdown component #55743

Expression editor

• Add font size controls - Add text size options to expression editor #23934
• Add syntax highlighting - Spec syntax highlighting #23051
• Improved interaction/typing in expression editor - [Canvas] Usability issues when editing an expression #26791
• Make the expression editor more obvious and better indicate its relationship to an asset layer
• Add example usage to each function in the docs
• Allow expression editor to be popped out into a separate window - [Canvas] Popout Canvas to another monitor #43609

Working with data

• Provide additional docs/guidance/examples for working with data
• Provide a way to view a list of available field names for the current data set

Elements

• Add ability to upload bulk asset images Feat: Bulk Upload in Asset Manager #29007
• Add an icon element (similar to image; add an icon then select/change it's type) (use EUI icon set?)
• Identify which elements support the use of sample/live data (add a tag/badge?)
• fix default colors in dark mode [Canvas] Fix elements' default colors in dark mode #33279

Errors

• element with math error Canvas needs to display results not available during that time period instead of math error #32420 Better errors when math function fails #32602
• Exceed asset limit Advanced settings date format change doesn't propagate to Canvas workpads #31430

[elasticmachine]

Pinging @elastic/kibana-canvas

[monfera]

@ryankeairns

Add ability to click-and-drag to select layers for grouping

Is it the box select feature?

[ryankeairns]

@monfera Ah yes, that would be the same. Is there an existing issue for that? I could not find one.

[monfera]

@ryankeairns I'd've sworn there was one but couldn't find it 😄

[cqliu1]

• Provide a way to view a list of available field names for the current data set

@ryankeairns We do provide a list of fields in the datacolumn arg for plots. Where else should we provide the list of fields?

[jsanz]

Thank you for your contribution! We are grooming our backlog to narrow in on items that we have prioritized. If our priorities change, we can reopen.