Error should be raised when we try to set slider of output variable [#19]

src/actions/index.js

@@ -27,12 +27,17 @@
  */
 
 import * as types from '../constants/action-types';
-import { setSliderByIndex, getImageData } from '../lib/calc-helpers';
+import {
+  setSliderByIndex,
+  getImageData,
+  getSliderExpressions
+} from '../lib/calc-helpers';
 import { startTimer, clearTimer } from '../lib/timer';
 import {
   gifCreationProblem,
   badBurstInput,
-  badSettingsInput
+  badSettingsInput,
+  noSlidersFound
 } from '../lib/error-messages';
 import { getBurstErrors, getSettingsErrors } from '../lib/input-helpers';
 
@@ -217,3 +222,16 @@ export const generateGIF = (images, opts) => (dispatch, getState) => {
     }
   });
 };
+
+export const getBurstSliders = () => dispatch => {
+  const sliders = getSliderExpressions();
+  if (!sliders.length) {
+    dispatch(flashError(noSlidersFound()));
+  }
+  dispatch(updateBurstSliders(sliders));
+};
+
+const updateBurstSliders = sliders => ({
+  type: types.UPDATE_BURST_SLIDERS,
+  payload: sliders
+});

src/components/Burst.css

@@ -31,6 +31,16 @@
   text-align: center;
 }
 
+.Burst-dropdown {
+  height: 33px;
+  width: 114px;
+  margin-bottom: 15px;
+  margin-top: 5px;
+  border: 1px solid #000;
+  font-size: 1em;
+  outline: none !important;
+}
+
 .Burst-input-error {
   border-color: #cc0000;
 }

src/components/Burst.js

@@ -6,9 +6,8 @@ import './Burst.css';
 class Burst extends Component {
   constructor(props) {
     super(props);
-
     this.state = {
-      idx: 1,
+      idx: null,
       min: -10,
       max: 10,
       step: 1,
@@ -38,24 +37,32 @@ class Burst extends Component {
   }
 
   render() {
-    const { idx, min, max, step, errors } = this.state;
-    const { expanded } = this.props;
+    const { min, max, step, errors } = this.state;
+    const { expanded, burstSliders } = this.props;
 
     if (!expanded) return <div className="Burst" />;
 
     return (
       <div className={classNames('Burst', { 'Burst-expanded': expanded })}>
-        <div>Slider Index</div>
-        <input
-          className={classNames('Burst-input', {
-            'Burst-input-error': !!errors.idx
-          })}
-          type="number"
+        <div>Slider</div>
+        <select
+          className="Burst-dropdown"
           name="idx"
           aria-label="slider index"
-          value={isNaN(idx) ? '' : idx}
           onChange={this.handleInputUpdate}
-        />
+        >
+          <option value={null} defaultValue>
+            {burstSliders.length ? 'Choose Slider' : 'No Sliders'}
+          </option>
+          {burstSliders.map(exp => {
+            return (
+              <option key={`slider-${exp.id}`} value={exp.id}>
+                {' '}
+                {exp.latex.split('=').join(' = ')}
+              </option>
+            );
+          })}
+        </select>
         <div>Slider Min</div>
         <input
           className={classNames('Burst-input', {

src/components/Sidebar.js

@@ -21,8 +21,9 @@ class Sidebar extends Component {
   }
 
   handleToggleBurst() {
-    const { togglePane } = this.props;
+    const { togglePane, getBurstSliders, expandedPane } = this.props;
     togglePane(panes.BURST);
+    if (expandedPane !== 'BURST') getBurstSliders();
   }
 
   handleToggleSettings() {

src/constants/action-types.js

@@ -19,6 +19,7 @@ export const PLAY_PREVIEW = 'PLAY_PREVIEW';
 export const PAUSE_PREVIEW = 'PAUSE_PREVIEW';
 export const SET_ERROR = 'SET_ERROR';
 export const CLEAR_ERROR = 'CLEAR_ERROR';
+export const UPDATE_BURST_SLIDERS = 'UPDATE_BURST_SLIDERS';
 
 // Settings
 export const UPDATE_IMAGE_SETTING = 'UPDATE_IMAGE_SETTING';

src/containers/BurstContainer.js

@@ -11,7 +11,8 @@ const mapStateToProps = (state, ownProps) => {
     expanded: ui.expandedPane === panes.BURST,
     width,
     height,
-    oversample
+    oversample,
+    burstSliders: ui.burstSliders
   };
 };
 

src/containers/SidebarContainer.js

@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import Sidebar from '../components/Sidebar';
-import { requestFrame, togglePane, reset } from '../actions';
+import { requestFrame, togglePane, reset, getBurstSliders } from '../actions';
 
 const mapStateToProps = (state, ownProps) => {
   const { images, settings, ui } = state;
@@ -23,7 +23,8 @@ const SidebarContainer = connect(
   {
     requestFrame,
     togglePane,
-    reset
+    reset,
+    getBurstSliders
   }
 )(Sidebar);
 

src/lib/calc-helpers.js

@@ -39,3 +39,12 @@ export const setSliderByIndex = (idx, val) => {
   const identifier = match[1];
   calculator.setExpression({ id, latex: `${identifier}=${val}` });
 };
+
+export const getSliderExpressions = () => {
+  return calculator
+    .getExpressions()
+    .filter(
+      exp =>
+        exp.latex && exp.latex !== '' && exp.latex.match(/[a-z]/gi).length === 1
+    );
+};

src/lib/error-messages.js

@@ -11,6 +11,8 @@ export const noSuchExpression = idx =>
 export const notASlider = idx =>
   `Looks like expression ${idx} doesn't define a slider.`;
 
+export const noSlidersFound = () => `Looks like the graph has no sliders.`;
+
 export const gifCreationProblem = () =>
   'There was a problem creating your GIF. :(';
 
@@ -40,7 +42,7 @@ export const badBurstInput = errors => {
   }
 
   if (propText === propMap.idx)
-    return `Your ${propText} must be a positive integer.`;
+    return `Please choose a slider or define an expression`;
 
   return `Your ${propText} isn't quite right.`;
 };

src/lib/input-helpers.js

@@ -16,7 +16,7 @@ export const getBurstErrors = inputs => {
     if (isNaN(inputs[prop])) errors[prop] = true;
   }
 
-  if (!isPositiveInteger(idx)) errors.idx = true;
+  if (!idx) errors.idx = true;
   if (min >= max) {
     errors.min = true;
     errors.max = true;

src/reducers/ui.js

@@ -6,6 +6,7 @@
  * previewIdx: the index of the frame being previewed in the preview pane
  * playing: whether the preview is animating
  * error: currently displayed error message
+ * burstSliders: expressions from the calculator that are valid sliders
  */
 
 import {
@@ -15,15 +16,17 @@ import {
   PAUSE_PREVIEW,
   SET_ERROR,
   CLEAR_ERROR,
-  RESET
+  RESET,
+  UPDATE_BURST_SLIDERS
 } from '../constants/action-types';
 import panes from '../constants/pane-types';
 
 const initialState = {
   expandedPane: panes.NONE,
   previewIdx: 0,
   playing: false,
-  error: ''
+  error: '',
+  burstSliders: []
 };
 
 const ui = (state = initialState, { type, payload }) => {
@@ -88,6 +91,13 @@ const ui = (state = initialState, { type, payload }) => {
         }
       };
 
+    case UPDATE_BURST_SLIDERS: {
+      return {
+        ...state,
+        burstSliders: payload
+      };
+    }
+
     default:
       return state;
   }