@decidables/discountable-elements 0.3.9 → 0.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/discountable-elements",
-  "version": "0.3.9",
+  "version": "0.4.0",
   "description": "discountable-elements: Web Components for visualizing Hyperbolic Temporal Discounting",
   "keywords": [
     "web component",
@@ -52,8 +52,8 @@
     "gulp": "^5.0.0"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.4.9",
-    "@decidables/discountable-math": "^0.1.9",
+    "@decidables/decidables-elements": "^0.5.0",
+    "@decidables/discountable-math": "^0.2.0",
     "@lit-labs/motion": "^1.0.7",
     "@observablehq/plot": "^0.6.16",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
@@ -61,5 +61,5 @@
     "lit": "^3.2.1",
     "regenerator-runtime": "^0.14.1"
   },
-  "gitHead": "00eb1274a09e86f55fff70b01b446f6729e608f3"
+  "gitHead": "0320347d03a20fb478784fe296c82f11018c276b"
 }

package/src/components/discountable-control.js

@@ -145,10 +145,10 @@ export default class DiscountableControl extends DiscountableElement {
   render() {
     return html`
       <div class="holder">
-        ${this.trials
+        ${this.trials != null
           ? html`<decidables-slider min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>`
           : html``}
-        ${this.duration
+        ${this.duration != null
           ? html`<decidables-slider min="10" max="4000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>`
           : html``}
         ${this.run || this.pause || this.reset

package/src/components/discountable-response.js

@@ -117,6 +117,30 @@ export default class DiscountableResponse extends DiscountableElement {
     this.response = undefined;
   }
 
+  keydown(event) {
+    if (this.state === 'waiting') {
+      if (event.key === 'ArrowLeft') {
+        this.responded('first');
+        event.preventDefault();
+      } else if (event.key === 'ArrowRight') {
+        this.responded('second');
+        event.preventDefault();
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    window.addEventListener('keydown', this.keydown.bind(this));
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.keydown.bind(this));
+
+    super.disconnectedCallback();
+  }
+
   static get styles() {
     return [
       super.styles,

package/src/components/htd-calculation.js

@@ -59,7 +59,7 @@ export default class HTDCalculation extends HTDEquation {
     this.al = 50;
     this.dl = 40;
 
-    this.k = 0.1;
+    this.k = HTDMath.k.DEFAULT;
 
     this.alignState();
   }
@@ -149,26 +149,62 @@ export default class HTDCalculation extends HTDEquation {
     let vl;
     let vDiff;
     if (this.numeric) {
-      as = html`<decidables-spinner class="a as" ?disabled=${!this.interactive} step="1" .value="${this.as}" @input=${this.asInput.bind(this)}>
+      as = html`<decidables-spinner class="a as"
+          ?disabled=${!this.interactive}
+          step="1"
+          .value=${this.as}
+          @input=${this.asInput.bind(this)}
+        >
           <var class="math-var">A<sub class="subscript">ss</sub></var>
         </decidables-spinner>`;
-      ds = html`<decidables-spinner class="d ds" ?disabled=${!this.interactive} min="0" step="1" .value="${this.ds}" @input=${this.dsInput.bind(this)}>
+      ds = html`<decidables-spinner class="d ds"
+          ?disabled=${!this.interactive}
+          min="0"
+          step="1"
+          .value=${this.ds}
+          @input=${this.dsInput.bind(this)}
+        >
           <var class="math-var">D<sub class="subscript">ss</sub></var>
         </decidables-spinner>`;
-      al = html`<decidables-spinner class="a al" ?disabled=${!this.interactive} step="1" .value="${this.al}" @input=${this.alInput.bind(this)}>
+      al = html`<decidables-spinner class="a al"
+          ?disabled=${!this.interactive}
+          step="1"
+          .value=${this.al}
+          @input=${this.alInput.bind(this)}
+        >
           <var class="math-var">A<sub class="subscript">ll</sub></var>
         </decidables-spinner>`;
-      dl = html`<decidables-spinner class="d dl" ?disabled=${!this.interactive} min="0" step="1" .value="${this.dl}" @input=${this.dlInput.bind(this)}>
+      dl = html`<decidables-spinner class="d dl"
+          ?disabled=${!this.interactive}
+          min="0"
+          step="1"
+          .value=${this.dl}
+          @input=${this.dlInput.bind(this)}
+        >
           <var class="math-var">D<sub class="subscript">ll</sub></var>
         </decidables-spinner>`;
-      k = html`<decidables-spinner class="k" ?disabled=${!this.interactive} min="0" max="100" step=".001" .value="${this.k}" @input=${this.kInput.bind(this)}>
+
+      k = html`<decidables-spinner class="k"
+          ?disabled=${!this.interactive}
+          min=${HTDMath.k.MIN}
+          max=${HTDMath.k.MAX}
+          step=${HTDMath.k.STEP}
+          .value=${+this.k.toFixed(3)}
+          @input=${this.kInput.bind(this)}
+        >
           <var class="math-var">k</var>
         </decidables-spinner>`;
 
-      vs = html`<decidables-spinner class="v vs" disabled .value="${+this.vs.toFixed(2)}">
+      vs = html`<decidables-spinner class="v vs"
+          disabled
+          .value=${+this.vs.toFixed(2)}
+        >
           <var class="math-var">V<sub class="subscript">ss</sub></var>
         </decidables-spinner>`;
-      vl = html`<decidables-spinner class="v vl" disabled .value="${+this.vl.toFixed(2)}">
+      vl = html`<decidables-spinner class="v vl"
+          disabled
+          .value=${+this.vl.toFixed(2)}
+        >
           <var class="math-var">V<sub class="subscript">ll</sub></var>
         </decidables-spinner>`;
       vDiff = html`${(this.vDiff > 0)

package/src/components/htd-curves.js

@@ -74,18 +74,12 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         step: 1,
         round: Math.round,
       },
-      discount: {
-        min: 0,
-        max: 100,
-        step: 0.001,
-        round: (k) => { return +k.toFixed(3); },
-      },
     };
 
     this.a = null;
     this.d = null;
     this.label = '';
-    this.k = 0.1;
+    this.k = HTDMath.k.DEFAULT;
 
     this.options = [
       {
@@ -353,6 +347,19 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #0000ff;
         }
+
+        /* Make larger targets for touch users */
+        .interactive .touch {
+          stroke: #000000;
+          stroke-opacity: 0;
+        }
+
+        @media (pointer: coarse) {
+          .interactive .touch {
+            stroke-linecap: round;
+            stroke-width: 12;
+          }
+        }
       `,
     ];
   }
@@ -549,9 +556,33 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     const optionEnter = optionUpdate.enter().append('g')
       .classed('option', true);
     // Curve
-    optionEnter.append('path')
+    const curveEnter = optionEnter.append('g')
       .classed('curve', true)
-      .attr('clip-path', 'url(#clip-htd-curves)')
+      .attr('clip-path', 'url(#clip-htd-curves)');
+    curveEnter.append('path')
+      .classed('path', true)
+      .attr('d', (datum) => {
+        const curve = d3.range(xScale(datum.d), xScale(0), -1).map((range) => {
+          return {
+            d: xScale.invert(range),
+            v: HTDMath.adk2v(
+              datum.a,
+              datum.d - xScale.invert(range),
+              this.k,
+            ),
+          };
+        });
+        return line(curve);
+      })
+      .attr('stroke-dasharray', (datum, index, nodes) => {
+        if (datum.trial) {
+          const length = nodes[index].getTotalLength();
+          return `0,${length}`;
+        }
+        return 'none';
+      });
+    curveEnter.append('path')
+      .classed('path touch', true)
       .attr('d', (datum) => {
         const curve = d3.range(xScale(datum.d), xScale(0), -1).map((range) => {
           return {
@@ -573,8 +604,23 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         return 'none';
       });
     // Bar
-    optionEnter.append('line')
-      .classed('bar', true)
+    const barEnter = optionEnter.append('g')
+      .classed('bar', true);
+    barEnter.append('line')
+      .classed('line', true)
+      .attr('x1', (datum) => { return xScale(datum.d); })
+      .attr('x2', (datum) => { return xScale(datum.d); })
+      .attr('y1', yScale(0))
+      .attr('y2', (datum) => { return yScale(datum.a); })
+      .attr('stroke-dasharray', (datum, index, nodes) => {
+        if (datum.trial) {
+          const length = nodes[index].getTotalLength();
+          return `0,${length}`;
+        }
+        return 'none';
+      });
+    barEnter.append('line')
+      .classed('line touch', true)
       .attr('x1', (datum) => { return xScale(datum.d); })
       .attr('x2', (datum) => { return xScale(datum.d); })
       .attr('y1', yScale(0))
@@ -599,7 +645,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         return 1;
       });
     pointEnter.append('circle')
-      .classed('mark', true);
+      .classed('mark touch', true);
     pointEnter.append('text')
       .classed('label', true);
     //  MERGE
@@ -609,7 +655,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Curve
     optionMerge
       .filter((datum, index, nodes) => {
-        return (this.interactive && !nodes[index].classList.contains('interactive'));
+        return (this.interactive && !d3.select(nodes[index]).select('.curve').classed('interactive'));
       })
       .select('.curve')
       .classed('interactive', true)
@@ -641,11 +687,11 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
               ? datum.a
               : dragV;
           const k = HTDMath.adv2k(datum.a, d, v);
-          this.k = (k < this.scale.discount.min)
-            ? this.scale.discount.min
-            : (k > this.scale.discount.max)
-              ? this.scale.discount.max
-              : this.scale.discount.round(k);
+          this.k = (k < HTDMath.k.MIN)
+            ? HTDMath.k.MIN
+            : (k > HTDMath.k.MAX)
+              ? HTDMath.k.MAX
+              : k;
           this.alignState();
           this.requestUpdate();
           this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -666,26 +712,26 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       // Keyboard interaction
       .on('keydown', (event, datum) => {
         if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-          let keyK = this.k;
+          let {k} = this;
           switch (event.key) {
             case 'ArrowUp':
             case 'ArrowLeft':
-              keyK *= event.shiftKey ? 0.95 : 0.85;
+              k *= event.shiftKey ? 0.95 : 0.85;
               break;
             case 'ArrowDown':
             case 'ArrowRight':
-              keyK *= event.shiftKey ? 1.05 : 1.15;
+              k *= event.shiftKey ? (1 / 0.95) : (1 / 0.85);
               break;
             default:
               // no-op
           }
-          keyK = (keyK < this.scale.discount.min)
-            ? this.scale.discount.min
-            : (keyK > this.scale.discount.max)
-              ? this.scale.discount.max
-              : this.scale.discount.round(keyK);
-          if (keyK !== this.k) {
-            this.k = keyK;
+          k = (k < HTDMath.k.MIN)
+            ? HTDMath.k.MIN
+            : (k > HTDMath.k.MAX)
+              ? HTDMath.k.MAX
+              : k;
+          if (k !== this.k) {
+            this.k = k;
             this.alignState();
             this.requestUpdate();
             this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -705,7 +751,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Bar
     optionMerge
       .filter((datum, index, nodes) => {
-        return (this.interactive && !datum.trial && !nodes[index].classList.contains('interactive'));
+        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.bar').classed('interactive'));
       })
       .select('.bar')
       .classed('interactive', true)
@@ -793,7 +839,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Point
     optionMerge
       .filter((datum, index, nodes) => {
-        return (this.interactive && !datum.trial && !nodes[index].classList.contains('interactive'));
+        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.point').classed('interactive'));
       })
       .select('.point')
       .classed('interactive', true)
@@ -883,7 +929,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Curve
     optionMerge
       .filter((datum, index, nodes) => {
-        return (!this.interactive && nodes[index].classList.contains('interactive'));
+        return (!this.interactive && d3.select(nodes[index]).select('.curve').classed('interactive'));
       })
       .select('.curve')
       .classed('interactive', false)
@@ -893,7 +939,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Bar
     optionMerge
       .filter((datum, index, nodes) => {
-        return ((!this.interactive || datum.trial) && nodes[index].classList.contains('interactive'));
+        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.bar').classed('interactive'));
       })
       .select('.bar')
       .classed('interactive', false)
@@ -903,7 +949,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Point
     optionMerge
       .filter((datum, index, nodes) => {
-        return ((!this.interactive || datum.trial) && nodes[index].classList.contains('interactive'));
+        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.point').classed('interactive'));
       })
       .select('.point')
       .classed('interactive', false)
@@ -917,7 +963,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.curve').transition()
+      .select('.curve .path').transition()
       .duration(transitionDuration)
       .delay(transitionDuration + transitionDuration / 10)
       .ease(d3.easeLinear)
@@ -939,12 +985,35 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           bubbles: true,
         }));
       });
+    optionMerge
+      .filter((datum) => {
+        return (datum.new);
+      })
+      .select('.curve .path.touch').transition()
+      .duration(transitionDuration)
+      .delay(transitionDuration + transitionDuration / 10)
+      .ease(d3.easeLinear)
+      .attrTween('stroke-dasharray', (datum, index, nodes) => {
+        const length = nodes[index].getTotalLength();
+        return d3.interpolate(`0,${length}`, `${length},${0}`);
+      });
     // Bar
     optionMerge
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.bar').transition()
+      .select('.bar .line').transition()
+      .duration(transitionDuration)
+      .ease(d3.easeLinear)
+      .attrTween('stroke-dasharray', (datum, index, nodes) => {
+        const length = nodes[index].getTotalLength();
+        return d3.interpolate(`0,${length}`, `${length},${length}`);
+      });
+    optionMerge
+      .filter((datum) => {
+        return (datum.new);
+      })
+      .select('.bar .line.touch').transition()
       .duration(transitionDuration)
       .ease(d3.easeLinear)
       .attrTween('stroke-dasharray', (datum, index, nodes) => {
@@ -963,7 +1032,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       .attrTween('opacity', () => { return d3.interpolate(0, 1); });
 
     // All options
-    optionUpdate.select('.curve').transition()
+    optionUpdate.select('.curve .path').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate
@@ -996,7 +1065,80 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           return line(curve);
         };
       });
-    optionUpdate.select('.bar').transition()
+    optionUpdate.select('.curve .path.touch').transition()
+      .duration(this.drag
+        ? 0
+        : (this.firstUpdate
+          ? (transitionDuration * 2)
+          : transitionDuration))
+      .ease(d3.easeCubicOut)
+      .attrTween('d', (datum, index, elements) => {
+        const element = elements[index];
+        const interpolateA = d3.interpolate(
+          (element.a !== undefined) ? element.a : datum.a,
+          datum.a,
+        );
+        const interpolateD = d3.interpolate(
+          (element.d !== undefined) ? element.d : datum.d,
+          datum.d,
+        );
+        return (time) => {
+          element.a = interpolateA(time);
+          element.d = interpolateD(time);
+          const curve = d3.range(xScale(element.d), xScale(0), -1).map((range) => {
+            return {
+              d: xScale.invert(range),
+              v: HTDMath.adk2v(
+                element.a,
+                element.d - xScale.invert(range),
+                this.k,
+              ),
+            };
+          });
+          return line(curve);
+        };
+      });
+    optionUpdate.select('.bar .line').transition()
+      .duration(this.drag
+        ? 0
+        : (this.firstUpdate
+          ? (transitionDuration * 2)
+          : transitionDuration))
+      .ease(d3.easeCubicOut)
+      .attrTween('x1', (datum, index, elements) => {
+        const element = elements[index];
+        const interpolateD = d3.interpolate(
+          (element.d !== undefined) ? element.d : datum.d,
+          datum.d,
+        );
+        return (time) => {
+          element.d = interpolateD(time);
+          return `${xScale(element.d)}`;
+        };
+      })
+      .attrTween('x2', (datum, index, elements) => {
+        const element = elements[index];
+        const interpolateD = d3.interpolate(
+          (element.d !== undefined) ? element.d : datum.d,
+          datum.d,
+        );
+        return (time) => {
+          element.d = interpolateD(time);
+          return `${xScale(element.d)}`;
+        };
+      })
+      .attrTween('y2', (datum, index, elements) => {
+        const element = elements[index];
+        const interpolateA = d3.interpolate(
+          (element.a !== undefined) ? element.a : datum.a,
+          datum.a,
+        );
+        return (time) => {
+          element.a = interpolateA(time);
+          return `${yScale(element.a)}`;
+        };
+      });
+    optionUpdate.select('.bar .line.touch').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate

package/src/components/htd-fit-worker.js

@@ -10,7 +10,7 @@ import HTDMath from '@decidables/discountable-math';
 
 self.onmessage = (event) => {
   const params = {
-    k: {type: 'real', lower: 0, upper: 100},
+    k: {type: 'real', lower: HTDMath.k.MIN, upper: HTDMath.k.MAX},
     luce: {type: 'real', lower: 0, upper: 100},
   };
 

package/src/components/htd-fit.js

@@ -2,6 +2,8 @@
 import {html, css} from 'lit';
 import * as Plot from '@observablehq/plot';
 
+import HTDMath from '@decidables/discountable-math';
+
 // Special Web Worker import for rollup-plugin-web-worker-loader
 import HTDFitWorker from 'web-worker:./htd-fit-worker'; /* eslint-disable-line import/no-unresolved */
 
@@ -24,7 +26,7 @@ export default class HTDFit extends DiscountableElement {
   constructor() {
     super();
 
-    this.k = 0.05;
+    this.k = HTDMath.k.DEFAULT;
 
     this.choices = [];
     this.samples = null;
@@ -136,7 +138,7 @@ export default class HTDFit extends DiscountableElement {
       <div>
         <div>After ${this.choices.length} trials:</div>
         <div>Current:
-          <var class="math-var k">k</var> = ${this.k.toFixed(2)}
+          <var class="math-var k">k</var> = ${this.k.toFixed(3)}
         </div>
         <div class="param">
           <div class="trace k"></div>
@@ -161,7 +163,22 @@ export default class HTDFit extends DiscountableElement {
         marks: [
           Plot.rectY(
             this.samples[param],
-            Plot.binX({y: 'count'}, {x: Plot.identity}),
+            Plot.binX(
+              {y: 'count'},
+              {x: Plot.identity},
+            ),
+          ),
+          Plot.rectY(
+            this.samples[param],
+            Plot.pointerX(Plot.binX(
+              {y: 'count'},
+              {
+                x: Plot.identity,
+                stroke: 'black',
+                fill: 'white',
+                tip: true,
+              },
+            )),
           ),
         ],
       }),
@@ -170,7 +187,7 @@ export default class HTDFit extends DiscountableElement {
     this.shadowRoot.querySelector(`.trace.${param}`).replaceChildren(
       Plot.plot({
         title: `Traceplot of ${param}`,
-        x: {label: 'Samples'},
+        x: {label: 'Sample'},
         y: {label: `${param}`},
         width: 320,
         height: 240,
@@ -179,6 +196,17 @@ export default class HTDFit extends DiscountableElement {
           Plot.lineY(
             this.samples[param],
           ),
+          Plot.dot(
+            this.samples[param],
+            Plot.pointer({
+              x: Plot.indexOf,
+              y: Plot.identity,
+              stroke: 'black',
+              fill: 'white',
+              r: 4,
+              tip: true,
+            }),
+          ),
         ],
       }),
     );