User configurable columns

[megheaiulian]

User should be able to open up a list of all available column and set for any column if it should be disabled,enabled or default.
The column list could also:

• show a counter (badge) of filters set on hidden column (red colored)
• allow editing some other properties (e.g flex, priority) etc...
• data from it should be JSON serializable so we can put it in localStore

To do: Refine this .....

[cristinecula]

Related #78

[cristinecula]

UX improvements

Here are the UX improvements we are planning to implement in the near future.

Resizable columns (finished #448)

We'll improve upon the prototype that is now available behind the resizable flag. We have tested the prototype live and some issues have become immediately apparent:

1. the columns adjust size on both sides of the actively resizing column, which causes the cursor to be misaligned with the resize nub
2. when you have lots of columns, columns start dropping left and right, according to their priority, leading to ugly jumps in layout
3. you can make a column as wide or wider than the omnitable, leading to a broken and possible unrecoverable state
4. there is a weird glitch when you make a column smaller, which causes the omnitable to cram more and more columns, making it unusable

We'll adjust the algorithm as follows:

• when dragging a resize nub, all of the columns to the left of the actively resized column become fixed width and are exempt from automatic dropping. Effectively this means that columns will only drop to the right of the resized column. This addresses issues 1 and 2. This will make the cursor always line up with the resize nub, even while dragging. To achieve this, the priorities of the columns are updated when you interact with a column.
• make sure the last column does not have a resize nub
• while dragging, the resized size is considered fixed width (flex 0). This prevents sudden jumps in resized width when columns are hidden. (issue 2)
• you cannot make a column wider than the omnitable (issue 3)
• you cannot make a column smaller than the developer defined minWidth (issue 4)

These minor tweaks will make for a more intuitive and user-friendly resize behavior.

Horizontal scroll

Sometimes the user needs to see lots of columns at the same time, due to their specific workflow. We'll add support for a horizontal-scroll mode, to accomodate such needs. In this mode, the omnitable will list all of the enabled columns, all the time (the automatic column drop algorithm will be disabled). All columns will be displayed at their defined width, ignoring the flex attribute (which only makes sense in the "fit" mode, that we have today). A horizontal scroll bar will be visible. The header and "select row" checkboxes will always be visible, no matter where you scroll. The headers will always be aligned with the corresponding column. This mode is 100% compatible with the resizable columns feature (it is even easier to support it). The expand row area will be disabled entirely.

User configuration UI

Re RM:26479

We'll add a table configuration menu (button with dropdown). The button will be placed in the top-right part of the omnitable (aligned with the expand arrows). The dropdown will allow you to switch between the two layout modes, "fit" (current layout mode) and "scroll" (horizontal scroll mode, described above). The UI will allow you to add/drop columns and to sort them. Depending on the layout mode, it will behave a little bit different, to make sure that the operation is intuitive for the user.

Scroll mode

I will start with this mode, since it's the easier to explain. Here is a mockup of how it will look like:

You can drag on the sort nubs to arrange the columns as desired. You can add/drop columns using the enabled toggle. All of the enabled columns are visible all of the time.

Fit mode

This one is a bit trickier to get right, because of the added complexity of the automatic column drop algorithm. Here is how it differs from the Scroll mode:

You can adjust both the order of columns and their priority using the same drag-and-sort UI. Using the Order | Priority toggle, you can switch between the two:

The Order mode works just like the one for the Scroll layout.

The Priority sort will allow you to mark which columns are more important for you, and increase/decrease their priority. This will inform the fit columns algorithm, which columns you want to keep visible, in a cross-resolution compatible way (mobile will only display the first 2 or 3, full desktop will display them all). This will interplay very nicely with the resizable columns feature, as columns you have interacted with will increase in priority automatically.

Alongside this, the enabled toggle will now have three states: enabled and visible, enabled and hidden (visible in expand area) and disabled. You can only enable/disable an column, the visibility is determined by the fit columns algorithm.

Mockup of the three states of the enabled toggles:
https://neovici.slack.com/archives/C0APSNTPB/p1622814079065900?thread_ts=1622812559.065000&cid=C0APSNTPB

In the picture there is one enabled and visible column (the first one), six enabled and hidden columns (visible in the expand area) and four disabled columns.

Save layout

All of the user configuration is fully serializable. This opens up lots of possibilities:

• Cosmoz can remember the user's preferences and preserve them automatically after reload
• as a user, you can generate a link to your specific layout that you can share with your colleagues
• as a user, you can save a layout as a user-defined view, which you can pin in the left menu and share with your colleagues