NightingaleConservationTrack: rename letter-order "property" to "defa…

…ult"

packages/nightingale-conservation-track/README.md

@@ -2,7 +2,7 @@
 
 [![Published on NPM](https://img.shields.io/npm/v/@nightingale-elements/nightingale-conservation-track.svg)](https://www.npmjs.com/package/@nightingale-elements/nightingale-conservation-track)
 
-The `nightingale-conservation-track` component is used to display sequence conservation across a set of sequences. It displays a column for each sequence position, which is divided into rectangles based on probabilities of individual amino acids occurring on this position. Each rectangle contains a label with one-letter code of the amino acid (if space allows). The input sequence conservation data can be provided via the `data` property.
+The `nightingale-conservation-track` component is used to display sequence conservation across a set of sequences. It displays a column for each sequence position, which is divided into rectangles based on probabilities of individual amino acids occurring on this position. Each rectangle contains a label with one-letter code of the amino acid (if space allows). Rectangles are colored based on amino acid groups (aromatic, hydrophobic, polar, positive, negative, proline, cysteine, glycine). The input sequence conservation data can be provided via the `data` property.
 
 As `nightingale-conservation-track` implements from `withZoom` and `withHighlight`, it will respond to zooming changes, highlight events and emit events when interacting with features (helpful if you want to display tooltips).
 
@@ -15,7 +15,7 @@ Most of the rendering is implemented via HTML canvas, but some non-critical part
   id="my-track-id"
   height="200"
   min-width="200"
-  letter-order="property"
+  letter-order="default"
   font-family="Helvetica,sans-serif"
   min-font-size="6"
   fade-font-size="12"
@@ -50,10 +50,10 @@ track.data = {
 
 ### Atributes
 
-#### `letter-order?: "property" | "probability" (default: "property")`
+#### `letter-order?: "default" | "probability" (default: "default")`
 
 Order of amino acids within a column (top-to-bottom).
-- "property" - fixed order based on amino acid grouping
+- "default" - fixed order based on amino acid groups
 - "probability" - on every position sort by descending probability
 
 #### `font-family?: string (default: "Helvetica,sans-serif")`
@@ -78,6 +78,8 @@ Maximum font size for labels. Set equal to `min-font-size` to keep font size con
 
 Gets or sets sequence conservation data. See example above.
 
+The keys in the `probabilities` object are typically one-letter amino acid codes but can be arbitrary strings (e.g. nucleotides: A, C, G, T).
+
 ### Other attributes and properties
 
 This component inherits from `NightingaleElement`.

packages/nightingale-conservation-track/src/nightingale-conservation-track.ts

@@ -79,7 +79,7 @@ interface YPositions {
   end: { [letter: string]: number[] },
 }
 
-type LetterOrder = "property" | "probability";
+type LetterOrder = "default" | "probability";
 
 /** Type for `NightingaleConservationTrack.data`` */
 export interface SequenceConservationData {
@@ -102,9 +102,9 @@ export default class NightingaleConservationTrack extends withCanvas(
     )
   )
 ) {
-  /** Order of amino acids within a column (top-to-bottom). property = fixed order based on amino acid grouping, probability = on every position sort by descending probability */
+  /** Order of amino acids within a column (top-to-bottom). default = fixed order based on amino acid groups, probability = on every position sort by descending probability */
   @property({ type: String })
-  "letter-order": LetterOrder = "property";
+  "letter-order": LetterOrder = "default";
 
   /** Font family for labels (can be a list of multiple font families separated by comma, like in CSS) */
   @property({ type: String })

stories/20.NightingaleConservationTrack/NightingaleConservationTrack.stories.ts

@@ -8,7 +8,7 @@ export default { title: "Components/Tracks/NightingaleConservationTrack" } as Me
 
 
 const DefaultArgs = {
-  "letter-order": "property",
+  "letter-order": "default",
   "min-width": 400,
   "height": 200,
   "highlight-event": "onmouseover",
@@ -19,7 +19,7 @@ type Args = typeof DefaultArgs;
 
 const ArgumentTypes: Partial<ArgTypes<Args>> = {
   "highlight-event": { control: "select", options: ["onmouseover", "onclick"] },
-  "letter-order": { control: "select", options: ["property", "probability"] },
+  "letter-order": { control: "select", options: ["default", "probability"] },
 };