Sliders nicely formatted and refinement on original only shows up whe…

…n relevant

src/components/sequences.tsx

@@ -25,7 +25,7 @@ import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import { MusicNote } from '@material-ui/icons';
 
-import { engine, sequences, layout, Note } from '../core';
+import { editor, engine, sequences, layout, Note } from '../core';
 
 import { Sequence } from './sequence';
 import { MAX_PITCH, MIN_PITCH, TOTAL_SIXTEENTHS, RefineOnOriginal } from '../core/constants';
@@ -58,28 +58,40 @@ function getPositionRange(noteSequences: Note[][]) {
   return [minPosition, maxPosition];
 }
 
-const refineSliderMarks = [0, 1, 2, 3, 4].map(value => {
+const horizontalSliderStyle = style({
+  marginLeft: 20,
+  marginRight: 20,
+});
+
+const surprisingSliderMarks = [
+  {
+    value: 0.01,
+    label: "Ordinary"
+  },
+  {
+    value: 0.99,
+    label: "Surprising"
+  }
+];
+
+// limit, middle, end
+const refineSliderMarks = [0, 2, 4].map(value => {
   return {
     value: value,
     label: refineSliderTextOptions(value)
   };
 });
 
+
 function refineSliderTextOptions(value: number) {
   if (value === RefineOnOriginal.VerySimilarNotes) {
-    return "Very Similar";
-  }
-  else if (value === RefineOnOriginal.SimilarNotes) {
     return "Similar";
   }
   else if (value === RefineOnOriginal.NoRefinement) {
-    return "No Refinement";
-  }
-  else if (value === RefineOnOriginal.DifferentNotes) {
-    return "Different";
+    return "Independent";
   }
   else if (value === RefineOnOriginal.VeryDifferentNotes) {
-    return "Very Different";
+    return "Different";
   }
 }
 
@@ -136,6 +148,33 @@ export class Sequences extends React.Component<SequencesProps> {
     );
   }
 
+  renderRefineOnOriginal() {
+    return (
+      <div>
+        <Typography variant="overline" align="center">
+          get _____ to <MusicNote /> in mask
+        </Typography>
+        <div className={horizontalSliderStyle}>
+          <Slider
+            value={sequences.refineOnOriginalStrategy}
+            onChange={(e: any, newValue: number | number[]) => {
+              if (newValue!== null) {
+                sequences.refineOnOriginalStrategy = Number(newValue);
+              }
+            }}
+            getAriaValueText={refineSliderTextOptions}
+            aria-labelledby="refine-on-original-slider-restrict"
+            step={1}
+            valueLabelDisplay="off"
+            marks={refineSliderMarks}
+            min={0}
+            max={4}
+          />
+        </div>
+      </div>
+    );
+  }
+
   render() {
     const harmonizeEnabled = engine.isModelLoaded && !engine.isWorking;
 
@@ -147,12 +186,8 @@ export class Sequences extends React.Component<SequencesProps> {
       width: layout.sequencesWidth,
     });
 
-    const refineOnOriginalStyle = style({
-      height: 100,
-    });
-
-
     const showCandidateSequences = sequences.candidateSequences.length > 0;
+    const showRefineOnOriginal = editor.getMaskedSequence.length > 0;
 
     return (
       <div className={containerStyle}>
@@ -183,49 +218,23 @@ export class Sequences extends React.Component<SequencesProps> {
           </Select>
           <FormHelperText style={{ width: 100 }}>n sequences</FormHelperText>
         </FormControl>
-        <Typography id="temperature-slider" gutterBottom>
-          Temperature
-        </Typography>
-        <div>
+        <div className={horizontalSliderStyle}>
           <Slider
             value={sequences.temperature}
             onChange={(e: any, newValue: number | number[]) => {
               if (newValue !== null) {
                 sequences.temperature = Number(newValue);
               }
             }}
-            // valueLabelFormat={refineSliderTextOptions}
-            // getAriaValueText={refineSliderTextOptions}
             aria-labelledby="temperature-slider-restrict"
             step={0.01}
             valueLabelDisplay="auto"
-            // marks={refineSliderMarks}
+            marks={surprisingSliderMarks}
             min={0.01}
             max={0.99}
           />
         </div>
-        <Typography id="refine-on-original-slider" gutterBottom>
-          Refine On Original
-        </Typography>
-        <div className={refineOnOriginalStyle}>
-          <Slider
-            orientation="vertical"
-            value={sequences.refineOnOriginalStrategy}
-            onChange={(e: any, newValue: number | number[]) => {
-              if (newValue!== null) {
-                sequences.refineOnOriginalStrategy = Number(newValue);
-              }
-            }}
-            valueLabelFormat={refineSliderTextOptions}
-            getAriaValueText={refineSliderTextOptions}
-            aria-labelledby="refine-on-original-slider-restrict"
-            step={1}
-            valueLabelDisplay="auto"
-            marks={refineSliderMarks}
-            min={0}
-            max={4}
-          />
-        </div>
+        {showRefineOnOriginal && this.renderRefineOnOriginal()}
         {showCandidateSequences && this.renderSequences()}
       </div>
     );

src/core/editor.ts

@@ -321,7 +321,7 @@ class Editor {
     return false;
   }
 
-  getMaskedSequence() {
+  @computed get getMaskedSequence() {
     const notes = this.allNotes;
     const maskedSequence: NoteSequence = [];
 

src/core/engine.ts

@@ -263,7 +263,7 @@ class Engine {
     }
 
     // Now, set the first candidate sequence to be the original, masked sequence
-    const maskedSequence = editor.getMaskedSequence();
+    const maskedSequence = editor.getMaskedSequence;
     editor.removeCandidateNoteSequence(maskedSequence);
     sequences.addCandidateSequences([maskedSequence, ...outputSequences]);