Assigning to `el_composition.data` would cause the sample to be
considered as `isEdited`.

Before this change, we would `this.state.sortColumn = ...` during render
in order to get the latest value from UserStore. Now we properly listen
(and unlisten) for store changes and update the state using
`this.setState`.

With this change we also set the initial UIStore state when the
component mounts and not only when the store state changes.

The ManagingActions component handles syncing genericEls with UserStore
itself. No need to pass that information in as prop.

We used to copy the state to determine whether the selection had changed
or not. However, we can simply calculate that information from the
UIStore state without the local state.

This used to trigger `UIState.handleSelectSyncCollection` which
forwarded to `UIStore.handleSelectCollection`. Removing in favour of
less indirection.

Before this change, we would always reset the currentTab to 0 and not
use the data stored in the UserStore.

This was fine when we never unmounted/mounted the ElementList component
but leads to the undesired effect of not respecting the user's selected
tab when we unmount/mount the component.

This was used to force a re-render when changing to full screen. It does
not seem to be necessary anymore.

Also fix collection type. JS Array has no `size` property.

Instead of passing a complex `ui` prop with undefined keys, we now pass
only what is necessary to the component.

This shows that the formerly used prop `checked` was not provided.

The `.small-panel` class adds `overflow: hidden`, hiding the dropdown.

This way the buttons jump around less.

With the new layout, the two components will look and function
differently.

While selecting/deselecting would work in production, there were plenty
of errors in the console because the SelectCellRenderer's rowIndex was
not used/passed correctly. Probably because of a API change in
AgGridReact.

...instead of the global NavigationModal

The previous commits make this component obsolete.

There does not seem to be a way to modify this value and there is no
personally customizable theming in the new design.

This patch introduces the app layout structure proposed by Shapefield'
redesign document.

…on logo

...because scanning is a global action and printing depends on the
currently selected samples.

We now keep all collection group headers visible on screen by having the
list of collections in a group scroll when it exceeds the limit of what
can be displayed.

We don't use the currentElement prop in ElementDetails. This means that
we don't need to store it in this component. Subsequently we can boil
down the state to a single `showDetailView` boolean, making it easy to
not re-render when nothing has changed.

The first <Popover.Header> is not the first DOM node in the <Popover>.
React bootstrap prepends another element for the arrow, so :first-child
does not work here.

I attempted to use `.popover > *:nth-child(n + 2 of .popover-header)`
but I suppose our css preprocessor does not support the relatively new
nth-of selector, because the selector is mangled in the compiled output.

https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child#the_of_selector_syntax

This patch introduces the TabLayoutEditor component with a
drag-and-drop interface for reordering and hiding/showing tabs.

The component accepts an ItemComponent via the `getItemComponent` prop
for rendering individual items.

With this patch we no longer need to manage the synthetic 'hidden' Tab
when no tabs are currently hidden. This is now the editor component's
responsibility and using code does not have to manage that.

This also removes the `DragDropItemTypes.LAYOUT` constant in favor of a
unique scope for each instance of the editor, because drag-and-drop is
only supposed to work within a specific visible/hidden list combination
and not globally across editors.

State changes are now propagated via the `onLayoutChange` callback and
not by reaching into the state of the component.