fix: bar chart selection

[dv-usama-ansari]

Follow up of #438

Developer Checklist (Definition of Done)

Issue

• All acceptance criteria from the issue are met
• Tested in latest Chrome/Firefox

UI/UX/Vis

• Requires UI/UX/Vis review
  • Reviewer(s) are notified @thinkh @dvmoritzschoefl
  • Review has occurred (link to notes)
  • Feedback is included in this PR
  • Reviewer(s) approve of concept and design

Code

• Branch is up-to-date with the branch to be merged with, i.e., develop
• Code is cleaned up and formatted
• Unit tests are written (frontend/backend if applicable)
• Integration tests are written (if applicable)

PR

• Descriptive title for this pull request is provided (will be used for release notes later)
• Reviewer and assignees are defined
• Add type label (e.g., bug, feature) to this pull request
• Add release label (e.g., release: minor) to this PR following semver
• The PR is connected to the corresponding issue (via Closes #...)
• Summary of changes is written

Summary of changes

• Fix bar plot selection

Screenshots

• TBD

Additional notes for the reviewer(s)

• N/A

[thinkh]

@dv-usama-ansari Currently open tasks:

• Bar background color for grouped bars, add the alpha to the hex value #RRGGBBAA instead of #RRGGBB + opacity (see example) -> the numbers on top of the bar should not be transparent because the opacity is not set
• Global min/max for all facets to calculate the scale for all the echart bar charts
• Fix selection after global min/max
• Make category labels on the y-axis wider (e.g., more than just REACTOME_...)
• Clipped tooltip in view -> set higher z-index for tooltip
• Sorting of the categorical axis (Daniela's feedback)
• A single bar chart should use the full height of the container -> add a config flag use full height with default value false (Daniela's feedback)
• Check if there is a flag margin/padding of the domain -> echarts should do this automatically according to these demos -> agreed with Dominic that we don't need this for now

[dv-usama-ansari]

@thinkh
I have addressed all the points mentioned by you in the comment

Make category labels on the y-axis wider (e.g., more than just REACTOME_...)

I made this ☝️ work in a way we would expect to see the truncation in DOM elements. We now have a constant to define the maximum label width in pixels and the component would handle truncated text automatically:

visyn_core/src/vis/bar/constants.ts

Line 24 in 3f2337e

export const AXIS_LABEL_MAX_WIDTH = 72;

As of 3f2337e, I still have to fix the heights of individual charts when the group type is Grouped in Horizontal direction with facets enabled.

I would document this in detail in this PR very soon.

[dv-usama-ansari]

It was a tricky implementation but according to 13b22fc, the bar plot labels are now responsive like we saw in the PowerBI dashboard

responsive-labels-bar-plot.webm