Variable editor UI

[zachberry]

Need a UI in the editor to handle variables ( #554 ):

In the MoreInfoBox we'd add a Variables item with a button to edit them:

That dialog would look like this:

Left-hand side is a list of variables with the name and summary of the variable. The selected variable would be blue and bolded. Right side is details about that variable. When first opened the first variable would be selected by default.

The details on the right include:

1. Name and help button to explain the variable naming rules (alphanumeric plus underscore only)
2. Delete button which would ask them to confirm the deletion
3. Type select box
4. A box containing the options for the type of variable and a value preview for variables that are randomly generated. This screenshot, for example, shows the options for 'Random Number'. The example values area would display a few values (how many depends on the type). The refresh button would generate more examples. Large examples would increase the height of the box to fit more text.
5. A button to create a new variable which would be a duplicate of this variable, but with the name modified (By incrementing any number at the end of the variable name or appending a 2 if no number exists. So for example, x would become x2, x45 would become x46. When a user clicks on the duplicate button a new variable item would be added to the list on the left, selected, and the focus would sit in the 'Name' field on the right-hand side.

When clicking '+ Create Variable` the display would show this:

The focus should move to the first item in the list (Static Number of Text Value) - here shown with it's focus/hover state of light purple. This list should be a radio button list in the DOM so that the user can use up and down arrows to move between the list

Note that the '+ Create Variable' button is replaced by a new list item that simply says 'New Variable...'. An x in the upper right appears which would cancel the new variable creation. In that case nothing from the list on the left would be selected and the right side would simply be gray.

When opening this dialog with no variables then the 'What type of variable do you want to create?' UI should be displayed by default.

The forms for each type would be as follows:

Static Number of Text Value:

Value: [ text input ]
(No example box shown)

Random Number:

Min value: [ number input ]
Max value: [ number input ]
Decimals places: [ number input (min=0, force to be int on blur) ] to [ number input (min=0, force to be int on blur) ]
('Some example values:' Three example values shown)

Static List:

Values: [ text input ]
"Enter values, separating each value with a comma (eg. '1, 2, 3')"
(No example box shown)

Random Numeric List:

List size: [ number input (min=1, force to be int on blur) ] to [ number input (min=1, force to be int on blur) ]
[ Checkbox ] No duplicate values
<hr>
Min value: [ number input ]
Max value: [ number input ]
Decimals places: [ number input (min=0, force to be int on blur) ] to [ number input (min=0, force to be int on blur) ]
('An example:', Show one example list)

Random Numeric Sequence:

List size: [ number input (min=1, force to be int on blur) ] to [ number input (min=1, force to be int on blur) ]
First value: [ number input ] to [ number input ]
Series type: [ select (values='Arithmetic (Add)', 'Geometric (Multiply)') ]
Step by: [ number input ]
('An example:', Show one example list)

Randomly pick one:

Values: [ text input ]
"Enter values, separating each value with a comma (eg. '1, 2, 3')"
('An example:', Show one value)

Randomly pick one or more:

Values: [ text input ]
"Enter values, separating each value with a comma (eg. '1, 2, 3')"
Choose: [ number input (min=1, force to be int on blur) ] to [ number input (min=1, force to be int on blur) ]
[ Checkbox ] Pick items in same order
('An example:', Show one example list)

For the inputs like [ ] to [ ] then changing one value should sometimes change the other in these cases:

1. When both values are equal and the first value is changed then the second value should match the first.
2. When both values are equal and the second value is decreased the first value should match the second. Increasing the second value shouldn't update the first.
3. When the first value is typed in that is larger than the second value then the second value should match the first.
4. When the second value is typed in that is smaller than the first then the first value should be updated to match the second.

Last, here's how to create summaries below the variable names on the left-hand side (The mockup is a little different then the values below - use these instead of taking from the mockup):

Static Number of Text Value:

<b>${the value}</b>
Example: 3

Random Number:

Random number <b>(${min value at min number of decimals places}-${max value at max number of decimal places})</b>
Example: Random number (2.0-3.000)

Static List:

<b>[${the list printed as a comma separated list of items}]</b>
Example: [Doug, Susan, Mike]

Random Numeric List:

Random list <b>(${min number of items}-${max number of items} items of ${min value at min number of decimals places}-${max value at max number of decimal places})</b>
Example: Random list (4-7 items of 1-9.0)
NOTE: If it's the same number of items then it would be in the form "Random list (4 items of 1-9.0)"

Random Numeric Sequence:

Random seq <b>(${min number of items}-${max number of items} items starting from ${first value})</b>
Example: Random seq (4-7 items starting from 8.8)
NOTE: If it's the same number of items then it would be in the form "Random seq (4 items starting from 8.8)"

Randomly pick one:

Pick from <b>[${the list}]</b>
Example: Pick from [John, Rod, Douglas]

Randomly pick one or more:

${min number of items}-${max number of items} item{s} from <b>[${the list}]</b>
Example: 2-4 items from [Alpha, Omega, Sigma, Lambda]
NOTE: If it's the same number of items then it would be in the form "2 items from [Alpha, Omega, Sigma, Lambda]"

In the case that the summary is too long it should be cut off, ideally with an ellipsis (...)

Here are the data structures behind each type of variable:

// Static number or text value:
x = {
	type: 'static-value',
	name: 'my-var-name',
	value: '123'
}

// Random number:
x = {
	type: 'random-number',
	name: 'my-var-name',
	valueMin: 1,
	valueMax: 2,
	decimalPlacesMin: 0,
	decimalPlacesMax: 1
}

// Static list:
x = {
	type: 'static-list',
	name: 'my-var-name',
	value: ['1', 'apple', '98.3']
}

// Random Numeric List:
x = {
	type: 'random-list',
	name: 'my-var-name',
	sizeMin: 10,
	sizeMax: 20,
	unique: false,
	valueMin: 1,
	valueMax: 2,
	decimalPlacesMin: 0,
	decimalPlacesMax: 1
}

// Random Numeric Sequence:
x = {
	type: 'random-sequence',
	name: 'my-var-name',
	sizeMin: 1,
	sizeMax: 5,
	start: 8,
	seriesType: 'arithmetic', // 'arithmetic' or 'geometric'
	step: 1.1
}

// Randomly pick one:
x = {
	type: 'pick-one',
	name: 'my-var-name',
	values: ['a', 'b', 'c']
}

// Randomly pick one or more
x = {
	type: 'pick-list',
	name: 'my-var-name',
	values: ['a', 'b', 'c'],
	chooseMin: 1,
	chooseMax: 3,
	ordered: true
}

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep our backlog under control, but we thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep our backlog under control, but we thank you for your contributions.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. We do this to keep our backlog under control, but we thank you for your contributions.