Connects to #914 kl progress bar style

[kgliu0101]

This PR modifies layout of progress bar and does not change functionality of pathogenicity calculator.

Compared to the layout in R7alpha2, changes in this PR includes:

1. Changed background color of progress bar to light grey.
2. Three groups (Benign criteria, Pathogenic criteria and Calculated Pathogenicity) are displayed horizontally in large, medium and small browser sizes, but stacked vertically in extra small size.
3. Removed border of each group.
4. Enlarge white space between adjacent groups so that they can be visually easy to be separated.
5. Number of criteria met at each strength level is shown in a badge and bind to relevant strength label as one element. When wrapped, the whole element will be moved to a new line so that there is no break between strength label and its number.
6. Add icon at left of each group.

Important Code changes

• In file src/clincoded/static/components/variant_central/interpretation/shared/calculator.js:
  • Delete class TestCalculator. This class was temporarily used for testing and is not necessary any longer.
  • Relocate function calculatePathogenicity as a internal function in class PathogenicityCalculator.
  • Edit function render and use Bootstrap grid system to handle layout change.
• In file src/clincoded/static/scss/clincoded/modules/_curator.scss:
  • Add new css classes for layout elements.
• In file src/clincoded/static/scss/fontawesome/_icons.scss:
  • Use calculator icon.

Steps to Test the Layout

• Set browser to LARGE SIZE (> 1200 pixels in width).
• In VCI, enter ClinVar variation id "12345", click Save and View Evidence, and then click Start a New Interpretation button. Expect to see the progress bra as:
  
• Associate disease "ORPHA777".
• In Population tab, change BA1 to 'Met' and then click Save.
• In Predictors/Missense, change BP4 to Met, change BP1 to BP1_Strong and click Save.
• In Predictors/Loss of Function, change PVS1 to Met and click Save.
• In Segregation/Case, change PS4 to Met and click Save, change PP1 to Met and click Save, change PM6 to Met and click Save.
• After selections above, expect to see progress bar (in LARGE SIZE browser) as:
  
• Narrow browser to MEDIUM SIZE (the first change of layout), expect to see the progress bar as:
  
• Narrow browser to SMALL SIZE (the second change of layout), expect to see the progress bar as:
  
• Narrow browser to extra small size (the third change of layout), expect to see the progress bar as:
  
• Enlarge browser back to SMALL SIZE, MEDIUM SIZE and then LARGE SIZE. Expect to see relevant layout change as above each.

End of Test

[kilodalton]

Merged #914. Nice teamwork @jimmyzhen and @kgliu0101

[kilodalton]

[pls ignore: comment added only to refresh PR display on waffle]

[jimmyzhen]

Not so much of a problem in this release, but we should address the overlapping issues as shown in the screenshot below (e.g. buttons overlapping title, textarea field overlapping label) when the browser window width is small.