UI Redesign

[texodus]

A redesigned UX by Thought Merchants and the Prospective Co.

Superstore Demo.

UI changes:

• New themes, Pro Light and Pro Dark, replace Material Light and Material Dark.
  • New icons, new colors, new attitude.
• New plugin selector with fancy indicator icons.
• Move settings origin to the top-right corner.
• Moves the config selector controls (Group By, Split By, Order By, Where) to vertical orientation and places them above the column selector, with which it now shares a scroll panel.
• Aggregate selectors no longer expand the drag container.
• Expression delete button is now inside the expression dropdown.
• Adds a title persistence field, as well as an user-editable title control that persists when the settings panel closes if it is non-empty.
• StatusBar now shows total/virtual rows and total/virtual columns.
• Adds section labels for all plugins, including perspective-viewer-datagrid.
• Makes Treemap and Sunburst charts render when Group By is empty (even though this is not yet a particularly useful view due to the coupling of Group By with the axis label)

Non-UI changes:

• Switch to serde_wasm_bindgen, improves performance and asset payload.
• Refactor ScrollPanel to
  • Take inconsistently-sized children.
  • Scroll via transform: translateY() to reduce screen-shear.
• Adds Table.num_rows and Table.num_columns to @finos/perspective.

TODO:

• Missing axis-switching icons.
• Missing boolean column icons.

[thoughtmerchant]

Looks great dude!

[timkpaine]

chrome:

safari, settings button is present but invisible

it has opacity: 0 which is not being set to 1 during whatever event handler is in place

[mhkeller]

In Firefox 110.0 I don't see the Configure button on the right side. It shows up in Chrome, though.

vs Chrome:

It may also be nicer to have Configure float above the column headers instead of overlap

[texodus]

Thanks @timkpaine @mhkeller looks like :host-context is only supported on Chrome. This should be fixed now on the updated demo.

Re: the positioning of the button, there is now an optional header displayed even when the config panel is closed which removes this overlap. It can currently be enabled by giving the viewer a title:

Screen.Recording.2023-02-21.at.9.26.24.PM.mov

[GREEB]

great design i like it a lot, there is a weird problem with the theme drop-down (export and copy drop-down work as expected)

after opening and closing the dropdown without choosing an option it seems to be in a weird state.
If choosing an option is seems fine. Firefox 110

[texodus]

@GREEB Thanks for the feedback!

This bug doesn't look related to this PR, as it repros on the current release 1.9.4. Also, while we want to fix Firefox bugs when they are reported, we don't currently have the capability to run automated tests against this browser and it is therefore not officially supported yet (Chrome only). There is some effort being put in to fix this (and an initial PR #2114).

I've opened a bug for this #2115

[davisford]

This was some solid work. Kudos to all the players that made this happen!