Improve Prevalence Operation

[PatrickAdelberger]

closes Caleydo/cohort#666
closes Caleydo/cohort#588

Summary

Update the layout of the prevalence task:

1. Moved the legend above the bar visualization
2. Added the definition of the input cohorts with inmutable operation selection
3. Updated operations design that define the reference cohort
4. Updated loading icon and its animation
5. Updated the scale/labels for the bar visualization, both are now on the right side of the ruler
6. Added tranisition animation to highlight the changes
7. Show/Hide base cohort
8. Update tooltip for bar and prevalence value: added the confidence interval level of 95%
9. Additional small style changes: legend mark, bar height, ...

Code Changes

• package.json: updated d3 array, format, selection and added the transition package, additionally updated the types for those in the devDependencies
• src/Cohort.ts: added function to get the formatet cohort label as a HTML string
• src/Taskview/SearchBar.ts: updated the d3 selection.on() function due to the new version changes
• src/Taskview/SearchColumn.ts: updated the d3 selection.on() function due to the new version changes
• src/Taskview/tasks/Filter.ts: updated the d3 selection.on() function due to the new version changes
• src/app.ts: updated the d3 selection.on() function due to the new version changes
• src/Taskview/tasks/Prevalence.ts: changes for the prevalence operation
• src/scss/components/task/_prevalence.scss: style changes for the prevalence operation

Implementation

GIF

Updated layout of legend (+ operations) and bars

before

now

Update scale

before

now

Hide base dataset + transition animations

before
These features did not exist before

now

[keckelt]

great work 💯

[mstreit]

very nice!