@decidables/discountable-elements 0.1.0

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

@@ -0,0 +1,71 @@
+/* eslint no-restricted-globals: ["off", "self"] */
+
+// Needed for d3 in WebWorker!
+import 'regenerator-runtime/runtime';
+
+import * as BayesDistributions from 'bayes.js/distributions';
+import * as BayesMcmc from 'bayes.js/mcmc';
+import * as d3 from 'd3';
+import HTDMath from '@decidables/discountable-math';
+
+self.onmessage = (event) => {
+  const params = {
+    k: {type: 'real', lower: 0, upper: 100},
+    luce: {type: 'real', lower: 0, upper: 100},
+  };
+
+  const logPost = (state, data) => {
+    let lp = 0;
+
+    // Priors
+    const kMean = 2;
+    const kShape = 3;
+    lp += BayesDistributions.gamma(
+      state.k,
+      kShape,
+      kShape / kMean,
+    );
+    // lp += BayesDistributions.unif(state.k, 0, 100);
+
+    const luceMean = 2;
+    const luceShape = 3;
+    lp += BayesDistributions.gamma(
+      state.luce,
+      luceShape,
+      luceShape / luceMean,
+    );
+    // lp += BayesDistributions.unif(state.luce, 0, 100);
+
+    // Likelihood
+    data.forEach((choice) => {
+      // Values
+      const vs = HTDMath.adk2v(choice.as, choice.ds, state.k);
+      const vl = HTDMath.adk2v(choice.al, choice.dl, state.k);
+
+      // Choice of sooner or later is sampled from a Bernoulli distribution
+      // Luce choice rule is used to compute probability of waiting! (0 = sooner, 1 = later)
+      const binval = 1 / (1 + Math.exp(state.luce * (vs - vl)));
+
+      // Actual response
+      const response = (choice.response === 'first') ? 0 : 1;
+
+      lp += BayesDistributions.bern(response, binval);
+    });
+
+    return lp;
+  };
+
+  // Initializing the sampler
+  const sampler = new BayesMcmc.AmwgSampler(params, logPost, event.data);
+  // Burning some samples to the MCMC gods and sampling 5000 draws
+  sampler.burn(1000);
+  const samples = sampler.sample(5000);
+
+  // Extract summary stats
+  const results = {
+    k: d3.median(samples.k),
+    luce: d3.median(samples.luce),
+  };
+
+  self.postMessage({results: results, samples: samples});
+};

package/src/components/htd-fit.js

@@ -0,0 +1,197 @@
+
+import {html, css} from 'lit';
+import * as Plot from '@observablehq/plot';
+
+// Special Web Worker import for rollup-plugin-web-worker-loader
+import HTDFitWorker from 'web-worker:./htd-fit-worker'; /* eslint-disable-line import/no-unresolved */
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  HTDFit element
+  <htd-fit>
+
+  Attributes:
+    interactive: true/false
+
+*/
+export default class HTDFit extends DiscountableElement {
+  static get properties() {
+    return {
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.k = 0.05;
+
+    this.choices = [];
+    this.samples = null;
+
+    this.working = false;
+    this.queued = false;
+    this.worker = new HTDFitWorker();
+
+    this.worker.onmessage = (event) => {
+      this.working = false;
+      this.samples = event.data.samples;
+      this.k = event.data.results.k;
+      this.requestUpdate();
+
+      this.dispatchEvent(new CustomEvent('htd-fit-update', {
+        detail: {
+          k: this.k,
+        },
+        bubbles: true,
+      }));
+
+      if (this.queued) {
+        this.fit();
+      }
+    };
+
+    this.fit();
+  }
+
+  fit() {
+    if (!this.working) {
+      this.worker.postMessage(this.choices);
+      this.working = true;
+      this.queued = false;
+    } else {
+      this.queued = true;
+    }
+  }
+
+  clear() {
+    this.choices = [];
+
+    this.fit();
+  }
+
+  get(name = 'default') {
+    const choice = this.choices.find((item) => {
+      return (item.name === name);
+    });
+
+    return (choice === undefined) ? null : choice;
+  }
+
+  set(as, ds, al, dl, response, name = '', label = '') {
+    const choice = this.choices.find((item) => {
+      return (item.name === name);
+    });
+    if (choice === undefined) {
+      this.choices.push({
+        as: as,
+        ds: ds,
+        al: al,
+        dl: dl,
+        response: response,
+        name: name,
+        label: label,
+      });
+    } else {
+      choice.as = as;
+      choice.ds = ds;
+      choice.al = al;
+      choice.dl = dl;
+      choice.response = response;
+      choice.label = label;
+    }
+
+    this.fit();
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        /* :host {
+          display: inline-block;
+        } */
+
+        figure {
+          margin: 0.625rem;
+        }
+
+        figure h2 {
+          margin: 0.25rem 0;
+
+          font-size: 1.125rem;
+          font-weight: 600;
+        }
+
+        .trace,
+        .hist {
+          display: inline-block;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div>
+        <div>After ${this.choices.length} trials:</div>
+        <div>Current:
+          <var class="math-var k">k</var> = ${this.k.toFixed(2)}
+        </div>
+        <div class="param">
+          <div class="trace k"></div>
+          <div class="hist k"></div>
+        </div>
+        <div class="param">
+          <div class="trace luce"></div>
+          <div class="hist luce"></div>
+        </div>
+      </div>
+    `;
+  }
+
+  plotParam(param) {
+    this.shadowRoot.querySelector(`.hist.${param}`).replaceChildren(
+      Plot.plot({
+        title: `Posterior of ${param}`,
+        x: {label: `${param}`},
+        width: 320,
+        height: 240,
+        style: 'font-size: 0.75rem; font-family: var(---font-family-base);',
+        marks: [
+          Plot.rectY(
+            this.samples[param],
+            Plot.binX({y: 'count'}, {x: Plot.identity}),
+          ),
+        ],
+      }),
+    );
+
+    this.shadowRoot.querySelector(`.trace.${param}`).replaceChildren(
+      Plot.plot({
+        title: `Traceplot of ${param}`,
+        x: {label: 'Samples'},
+        y: {label: `${param}`},
+        width: 320,
+        height: 240,
+        style: 'font-size: 0.75rem; font-family: var(---font-family-base);',
+        marks: [
+          Plot.lineY(
+            this.samples[param],
+          ),
+        ],
+      }),
+    );
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.samples !== null) {
+      this.plotParam('k');
+      this.plotParam('luce');
+    }
+  }
+}
+
+customElements.define('htd-fit', HTDFit);

package/src/components/index.js

@@ -0,0 +1,9 @@
+
+export {default as DiscountableControl} from './discountable-control';
+export {default as DiscountableResponse} from './discountable-response';
+export {default as HTDCalculation} from './htd-calculation';
+export {default as HTDCurves} from './htd-curves';
+export {default as HTDFit} from './htd-fit';
+export {default as ITCChoice} from './itc-choice';
+export {default as ITCOption} from './itc-option';
+export {default as ITCTask} from './itc-task';

package/src/components/itc-choice.js

@@ -0,0 +1,134 @@
+
+import {html, css} from 'lit';
+
+import DiscountableElement from '../discountable-element';
+import './itc-option';
+
+/*
+  ITCChoice element
+  <itc-choice>
+
+  Attributes:
+*/
+export default class ITCChoice extends DiscountableElement {
+  static get properties() {
+    return {
+      state: {
+        attribute: 'state',
+        type: String,
+        reflect: true,
+      },
+
+      as: {
+        attribute: 'amount-ss',
+        type: Number,
+        reflect: true,
+      },
+      ds: {
+        attribute: 'delay-ss',
+        type: Number,
+        reflect: true,
+      },
+      al: {
+        attribute: 'amount-ll',
+        type: Number,
+        reflect: true,
+      },
+      dl: {
+        attribute: 'delay-ll',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.states = ['choice', 'fixation', 'blank']; // Possible states
+    this.state = 'choice'; // Current state
+
+    this.as = 10;
+    this.ds = 5;
+    this.al = 40;
+    this.dl = 30;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        .holder {
+          user-select: none;
+        }
+
+        .holder > * {
+          vertical-align: middle;
+        }
+
+        .query {
+          margin: 0 0.5rem;
+
+          font-family: var(--font-family-code);
+          font-size: 1.75rem;
+        }
+
+        itc-option {
+          width: 10rem;
+          height: 10rem;
+        }
+      `,
+    ];
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('itc-choice-change', {
+      detail: {
+        as: this.as,
+        ds: this.ds,
+        al: this.al,
+        dl: this.dl,
+      },
+      bubbles: true,
+    }));
+  }
+
+  ssChange(event) {
+    this.as = parseFloat(event.detail.a);
+    this.ds = parseFloat(event.detail.d);
+    this.sendEvent();
+  }
+
+  llChange(event) {
+    this.al = parseFloat(event.detail.a);
+    this.dl = parseFloat(event.detail.d);
+    this.sendEvent();
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        <itc-option 
+          state=${this.state}
+          ?interactive=${this.interactive}
+          amount="${this.as}"
+          delay="${this.ds}"
+          @itc-option-change=${this.ssChange.bind(this)}>
+        </itc-option><span class="query"
+         >${(this.state === 'choice') ? '?' : (this.state === 'fixation') ? '+' : html`∙`}</span
+        ><itc-option 
+          state=${this.state}
+          ?interactive=${this.interactive}
+          amount="${this.al}"
+          delay="${this.dl}"
+          @itc-option-change=${this.llChange.bind(this)}>
+        </itc-option>
+      </div>`;
+  }
+}
+
+customElements.define('itc-choice', ITCChoice);

package/src/components/itc-option.js

@@ -0,0 +1,173 @@
+
+import {html, css} from 'lit';
+
+import DiscountableElement from '../discountable-element';
+
+/*
+  ITCOption element
+  <itc-option>
+
+  Attributes:
+  State
+  Amount, Delay
+*/
+export default class ITCOption extends DiscountableElement {
+  static get properties() {
+    return {
+      state: {
+        attribute: 'state',
+        type: String,
+        reflect: true,
+      },
+
+      a: {
+        attribute: 'amount',
+        type: Number,
+        reflect: true,
+      },
+      d: {
+        attribute: 'delay',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.states = ['choice', 'fixation', 'blank']; // Possible states
+    this.state = 'choice'; // Current state
+
+    this.a = 0;
+    this.d = 0;
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+          
+          width: 10rem;
+          height: 10rem;
+        }
+
+        .holder {
+          display: flex;
+          
+          flex-flow: column nowrap;
+
+          align-items: center;
+          justify-content: center;
+
+          width: 100%;
+          height: 100%;
+          overflow: visible;
+          
+
+          background: var(---color-element-background);
+          border: 2px solid var(---color-element-emphasis);
+          border-radius: 50%;
+        }
+
+        .interactive,
+        .static {
+          font-size: 1.75rem;
+        }
+
+        .interactive {
+          --decidables-spinner-font-size: 1.75rem;
+        }
+
+        .static {
+          padding: 0 0.25rem;
+          
+          border-radius: var(---border-radius);
+        }
+
+        .amount {
+          --decidables-spinner-prefix: "$";
+          background-color: var(---color-a-light);
+        }
+
+        .amount.interactive {
+          --decidables-spinner-input-width: 4rem;
+        }
+
+        .delay {
+          background-color: var(---color-d-light);
+        }
+        
+        .delay.interactive {
+          --decidables-spinner-input-width: 6.75rem;
+          --decidables-spinner-postfix: "days";
+          --decidables-spinner-postfix-padding: 3.75rem;
+        }
+      `,
+    ];
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('itc-option-change', {
+      detail: {
+        a: this.a,
+        d: this.d,
+      },
+      bubbles: true,
+    }));
+  }
+
+  aInput(event) {
+    this.a = parseFloat(event.target.value);
+    this.sendEvent();
+  }
+
+  dInput(event) {
+    this.d = parseFloat(event.target.value);
+    this.sendEvent();
+  }
+
+  render() { /* eslint-disable-line class-methods-use-this */
+    return html`
+      <div class="holder">
+        ${(this.state === 'choice')
+          ? this.interactive
+            ? html`<decidables-spinner
+              class="amount interactive"
+              ?disabled=${!this.interactive}
+              step="1"
+              .value="${this.a}"
+              @input=${this.aInput.bind(this)}
+              ></decidables-spinner>`
+            : html`<div
+              class="amount static"
+              >$${this.a}</div>`
+          : ''
+        }
+        ${(this.state === 'choice')
+          ? html`<div class="in">in</div>`
+          : ''
+        }
+        ${(this.state === 'choice')
+          ? this.interactive
+            ? html`<decidables-spinner
+              class="delay interactive"
+              ?disabled=${!this.interactive}
+              min="0" 
+              step="1"
+              .value="${this.d}"
+              @input=${this.dInput.bind(this)}
+              ></decidables-spinner>`
+            : html`<div
+              class="delay static"
+              >${this.d} days</div>`
+          : ''
+        }
+      </div>
+    `;
+  }
+}
+
+customElements.define('itc-option', ITCOption);