Working on labeled slider example.

.jsbeautifyrc

@@ -0,0 +1,24 @@
+{
+  "brace_style": "collapse-preserve-inline",
+  "break_chained_methods": false,
+  "comma_first": false,
+  "end_with_newline": true,
+  "eol": "\n",
+  "eval_code": false,
+  "indent_char": " ",
+  "indent_level": 0,
+  "indent_size": 2,
+  "indent_with_tabs": false,
+  "jslint_happy": false,
+  "keep_array_indentation": false,
+  "keep_function_indentation": false,
+  "max_preserve_newlines": 10,
+  "preserve_newlines": true,
+  "space_after_anon_function": false,
+  "space_before_conditional": true,
+  "space_in_paren": false,
+  "unescape_strings": false,
+  "wrap_attributes": "auto",
+  "wrap_attributes_indent_size": 4,
+  "wrap_line_length": 0
+}

labeled-sliders/labeledSlider/update.js

@@ -1,10 +1,10 @@
 import { assoc } from "ramda";
 import { Action } from "./action";
 
-// handler : Model -> [ model, Maybe (Task Action) ]
+// handler : Model -> Model
 const handler = model => ({
-  NoOp: () => [model],
-  Update: value => [assoc("value", value, model)]
+  NoOp: () => model,
+  Update: value => assoc("value", value, model)
 });
 
 // update : Action -> Model -> [ model, Maybe (Task Action) ]

labeled-sliders/labeledSlider/widget.js

@@ -2,12 +2,12 @@ import { initialModel } from "./model";
 import { update } from "./update";
 import { view } from "./view.jsx";
 
-const createLabeledSliderWidget = id => {
+const createLabeledSliderWidget = (id, actions, model) => {
   const widget = {
     id: id,
-    initialModel: [initialModel],
+    model: model || initialModel,
     update: update,
-    view: view
+    view: view(actions)
   };
 
   return widget;

labeled-sliders/sliderContainer/action.js

@@ -2,9 +2,9 @@ import Type from "union-type";
 
 const Action = Type({
   NoOp: [],
-  AddMeasurement: [],
+  AddMeasurement: [Function],
   RemoveMeasurement: [Number],
-  ModifyMeasurement: [Object]
+  UpdateMeasurement: [Object] // {id: N, action: labeledSlider.Action}
 });
 
 export { Action };

labeled-sliders/sliderContainer/update.js

@@ -2,16 +2,42 @@ import { append, assoc } from "ramda";
 import { Action } from "./action";
 import { createLabeledSliderWidget } from "../labeledSlider/widget";
 
+const updateMeasurement = update => measurement =>
+  update.id === measurement.id
+    ? assoc("model", measurement.update(update.action)(measurement.model), measurement)
+    : measurement;
+
+const rnd = (min, max) => Math.round(Math.random() * min) + (max || 0);
+
 // handler : Model -> [ model, Maybe (Task Action) ]
 const handler = model => ({
   NoOp: () => [model],
-  AddMeasurement: () => [
-    assoc("nextId", model.nextId + 1,
-      assoc("measurements", append(createLabeledSliderWidget(model.nextId), model.measurements), model)
+  AddMeasurement: subaction => [
+    assoc("nextId",
+      model.nextId + 1,
+      assoc("measurements",
+        append(
+          createLabeledSliderWidget(
+            model.nextId,
+            subaction(model.nextId),
+            {
+              label: "Measurement",
+              value: rnd(50),
+              max: rnd(50,100),
+              units: rnd(10) % 2 === 0 ? "cm" : "mm"
+            }
+          ),
+          model.measurements
+        ),
+        model
+      )
     )
   ],
   RemoveMeasurement: id => [
     assoc("measurements", model.measurements.filter(m => m.id !== id), model)
+  ],
+  UpdateMeasurement: update => [
+    assoc("measurements", model.measurements.map(updateMeasurement(update)), model)
   ]
 });
 

labeled-sliders/sliderContainer/view.jsx

@@ -4,24 +4,31 @@ import { Action } from "./action";
 
 const view = actions => model => {
 
-  const onAddMeasurement = _evt => actions.onNext(Action.AddMeasurement());
+  const onAddMeasurement = _evt => {
+    const subaction = id => ({
+      onNext: labeledSliderAction => actions.onNext(Action.UpdateMeasurement({id, action: labeledSliderAction}))
+    });
+    actions.onNext(Action.AddMeasurement(subaction));
+  };
+
   const onRemoveMeasurement = id =>  _evt => actions.onNext(Action.RemoveMeasurement(id));
 
   const renderMeasurement = measurement => {
-    const view = measurement.view(actions);
-
     return (
-      <div key={measurement.id}>
-        {measurement.id}
-        {view(model)}
-        <button onClick={onRemoveMeasurement(measurement.id)}>Remove Measurement</button>
+      <div key={measurement.id} style={{border:"1px solid gray"}}>
+        id: {measurement.id}
+        {measurement.view(measurement.model)}
+        <div><button className="btn btn-danger btn-sm" onClick={onRemoveMeasurement(measurement.id)}>Remove Measurement</button></div>
       </div>
     );
   };
 
   return (
     <div>
-      <button onClick={onAddMeasurement}>Add Measurement</button>
+      <div>
+        Measurements: {model.measurements.map(m => JSON.stringify(m.model))}
+      </div>
+      <div><button className="btn btn-primary btn-sm" onClick={onAddMeasurement}>Add Measurement</button></div>
       {model.measurements.map(renderMeasurement)}
     </div>
   );

public/index.html

@@ -1,11 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
+    <link rel="shortcut icon" size="16x16, 32x32, 48x48, 64x64, 128x128, 256x256" href="/favicon.ico">
+    <link rel="icon" type="image/x-icon" href="/favicon.ico">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.6/flatly/bootstrap.min.css">
+    <link rel="stylesheet" href="/style.css">
+
     <title>Meiosis Example</title>
   </head>
-  <body>
+  <body class="container">
     <div>
-      <h1>Meiosis Example</h1>
+      <img src="/images/meiosis.png"> <h1 style="display: inline">Meiosis Example</h1>
 
       <div id="app"></div>
     </div>

public/style.css

@@ -0,0 +1,5 @@
+div {
+  margin-top: 8px;
+  margin-bottom: 8px;
+  padding: 4px;
+}