From 4efbf4f2ff3bc41a4cc33231f9882eb80f7394b1 Mon Sep 17 00:00:00 2001
From: Carrie Cai <cjcai@google.com>
Date: Mon, 3 Aug 2020 19:28:02 -0700
Subject: [PATCH] for new user study, changing variant B to be no-AI (as
 opposed to mask-generation only) -- removing Generate button and Mask button
 if variant=b

---
 src/components/controls.tsx |   9 ++-
 src/components/generate.tsx | 123 ++++++++++++++++++------------------
 2 files changed, 68 insertions(+), 64 deletions(-)

diff --git a/src/components/controls.tsx b/src/components/controls.tsx
index 2d4846a..8695c8e 100644
--- a/src/components/controls.tsx
+++ b/src/components/controls.tsx
@@ -39,6 +39,7 @@ import { Voice } from '../core/note';
 
 import { KeySignatures } from './key-signatures';
 import { Spacer } from './spacer';
+import featureFlags from '../core/feature-flags';
 
 interface State {
   keyDialogOpen: boolean;
@@ -51,6 +52,7 @@ export class Controls extends React.Component<{}, State> {
   };
 
   render() {
+    const { baseline } = featureFlags;
     const PADDING = 0;
     const width = layout.editorWidth;
 
@@ -112,9 +114,10 @@ export class Controls extends React.Component<{}, State> {
           <ToggleButton value={EditorTool.DRAW}>
             <Edit />
           </ToggleButton>
-          <ToggleButton value={EditorTool.MASK} disabled={maskButtonDisabled}>
-            <SelectAll />
-          </ToggleButton>
+          {baseline ? null : (
+            <ToggleButton value={EditorTool.MASK} disabled={maskButtonDisabled}>
+              <SelectAll />
+            </ToggleButton>)}
           <ToggleButton value={EditorTool.ERASE}>
             <DeleteSweep />
           </ToggleButton>
diff --git a/src/components/generate.tsx b/src/components/generate.tsx
index 24caf52..905ff99 100644
--- a/src/components/generate.tsx
+++ b/src/components/generate.tsx
@@ -76,7 +76,7 @@ function getPositionRange(noteSequences: NoteSequence[]) {
 
 const horizontalSliderStyle = style({});
 
-export interface GenerateProps {}
+export interface GenerateProps { }
 
 @observer
 export class Generate extends React.Component<GenerateProps> {
@@ -127,20 +127,21 @@ export class Generate extends React.Component<GenerateProps> {
     const similaritySliderEnabled = candidateSequenceSelected
       ? true
       : maskedSequenceExists;
-
     return (
       <div className="container">
-        <Button
-          disabled={isGenerateButtonDisabled}
-          variant="outlined"
-          color="primary"
-          onClick={() => {
-            generator.generate();
-          }}
-        >
-          🤖 Generate
+        {baseline ? null : (
+          <Button
+            disabled={isGenerateButtonDisabled}
+            variant="outlined"
+            color="primary"
+            onClick={() => {
+              generator.generate();
+            }}
+          >
+
+            🤖 Generate
           <MusicNote />
-        </Button>
+          </Button>)}
         {baseline ? null : (
           <FormControl classes={{ root: nSequenceContainerStyle }}>
             <Select
@@ -163,58 +164,58 @@ export class Generate extends React.Component<GenerateProps> {
         )}
         {baseline ? null : (
           <>
-            <ParameterSlider
-              value={generator.conventionalSurprising}
-              onChange={newValue =>
-                generator.setConventionalSurprising(newValue)
-              }
-              onChangeCommitted={() => {
-                logging.logEvent(
-                  Events.SET_CONVENTIONAL_SURPRISING,
-                  generator.conventionalSurprising
-                );
-              }}
-              range={[MIN_SURPRISE_FACTOR, MAX_SURPRISE_FACTOR]}
-              labels={['Conventional', 'Surprising']}
-              nMarks={3}
-            />
-            <ParameterSlider
-              value={generator.majorMinor}
-              onChange={newValue => generator.setMajorMinor(newValue)}
-              onChangeCommitted={() => {
-                logging.logEvent(Events.SET_MAJOR_MINOR, generator.majorMinor);
-              }}
-              range={[MIN_HAPPY_SAD_FACTOR, MAX_HAPPY_SAD_FACTOR]}
-              labels={['😢 Minor', 'Major 😊']}
-              nMarks={3}
-            />
-            <ParameterSlider
-              value={generator.differenceFromOriginal}
-              onChange={newValue =>
-                generator.setDifferenceFromOriginal(newValue)
-              }
-              onChangeCommitted={() => {
-                logging.logEvent(
-                  Events.SET_SIMILAR_DIFFERENT,
-                  generator.differenceFromOriginal
-                );
-              }}
-              range={[MIN_DIFFERENCE_FACTOR, MAX_DIFFERENCE_FACTOR]}
-              labels={['Similar', 'Different']}
-              disabled={!similaritySliderEnabled}
-              nMarks={3}
-            />
+          <ParameterSlider
+            value={generator.conventionalSurprising}
+            onChange={newValue =>
+              generator.setConventionalSurprising(newValue)
+            }
+            onChangeCommitted={() => {
+              logging.logEvent(
+                Events.SET_CONVENTIONAL_SURPRISING,
+                generator.conventionalSurprising
+              );
+            }}
+            range={[MIN_SURPRISE_FACTOR, MAX_SURPRISE_FACTOR]}
+            labels={['Conventional', 'Surprising']}
+            nMarks={3}
+          />
+          <ParameterSlider
+            value={generator.majorMinor}
+            onChange={newValue => generator.setMajorMinor(newValue)}
+            onChangeCommitted={() => {
+              logging.logEvent(Events.SET_MAJOR_MINOR, generator.majorMinor);
+            }}
+            range={[MIN_HAPPY_SAD_FACTOR, MAX_HAPPY_SAD_FACTOR]}
+            labels={['😢 Minor', 'Major 😊']}
+            nMarks={3}
+          />
+          <ParameterSlider
+            value={generator.differenceFromOriginal}
+            onChange={newValue =>
+              generator.setDifferenceFromOriginal(newValue)
+            }
+            onChangeCommitted={() => {
+              logging.logEvent(
+                Events.SET_SIMILAR_DIFFERENT,
+                generator.differenceFromOriginal
+              );
+            }}
+            range={[MIN_DIFFERENCE_FACTOR, MAX_DIFFERENCE_FACTOR]}
+            labels={['Similar', 'Different']}
+            disabled={!similaritySliderEnabled}
+            nMarks={3}
+          />
           </>
         )}
         {showCandidateSequences && (
           <>
-            {this.renderSequences()}
-            <Button
-              variant="outlined"
-              color="primary"
-              onClick={() => generator.commitSelectedCandidateSequence()}
-            >
-              Choose
+          {this.renderSequences()}
+          <Button
+            variant="outlined"
+            color="primary"
+            onClick={() => generator.commitSelectedCandidateSequence()}
+          >
+            Choose
             </Button>
           </>
         )}
@@ -286,5 +287,5 @@ function ParameterSlider(props: ParameterSliderProps) {
 
 ParameterSlider.defaultProps = {
   enabled: true,
-  onChangeCommitted: () => {},
+  onChangeCommitted: () => { },
 };