@decidables/accumulable-elements 0.1.0

package/package.json

@@ -0,0 +1,65 @@
+{
+  "name": "@decidables/accumulable-elements",
+  "version": "0.1.0",
+  "description": "accumulable-elements: Web Components for visualizing the Diffusion Decision Model",
+  "keywords": [
+    "web component",
+    "explorable explanation",
+    "explorable",
+    "decision making",
+    "decidables",
+    "hyperbolic temporal discounting",
+    "temporal discounting",
+    "delay discounting",
+    "discountable"
+  ],
+  "type": "module",
+  "main": "./lib/accumulableElements.umd.min.js",
+  "browser": "./lib/accumulableElements.umd.min.js",
+  "module": "./lib/accumulableElements.esm.min.js",
+  "exports": {
+    "./lib/*.js": "./lib/*.js",
+    ".": "./src/index.js",
+    "./components": "./src/components/index.js",
+    "./equations": "./src/equations/index.js",
+    "./examples": "./src/examples/index.js",
+    "./*": "./src/*.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/decidables/decidables.git",
+    "directory": "libraries/accumulable-elements"
+  },
+  "bugs": "https://github.com/decidables/decidables/issues",
+  "homepage": "https://github.com/decidables/decidables/tree/main/libraries/accumulable-elements",
+  "author": "Adam Krawitz (https://web.uvic.ca/~akrawitz/)",
+  "license": "CC-BY-SA-4.0 AND GPL-3.0-or-later",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "package.json",
+    "*.md",
+    "src",
+    "lib"
+  ],
+  "scripts": {
+    "lint": "gulp lint",
+    "test": "gulp test",
+    "build": "gulp build"
+  },
+  "devDependencies": {
+    "gulp": "^5.0.0"
+  },
+  "dependencies": {
+    "@decidables/accumulable-math": "^0.1.0",
+    "@decidables/decidables-elements": "^0.4.7",
+    "@lit-labs/motion": "^1.0.7",
+    "@observablehq/plot": "^0.6.14",
+    "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
+    "d3": "^7.9.0",
+    "lit": "^3.1.3",
+    "regenerator-runtime": "^0.14.1"
+  },
+  "gitHead": "bd8032a47624293a88f7f70e0b331c1cea1ef399"
+}

package/src/accumulable-element.js

@@ -0,0 +1,87 @@
+
+import {
+  css,
+  unsafeCSS,
+} from 'lit';
+import * as d3 from 'd3';
+
+import {DecidablesElement} from '@decidables/decidables-elements';
+
+/*
+  AccumulableElement Base Class - Not intended for instantiation!
+*/
+export default class AccumulableElement extends DecidablesElement {
+  static get properties() {
+    return {
+      interactive: {
+        attribute: 'interactive',
+        type: Boolean,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.interactive = false;
+  }
+
+  static get colors() {
+    return {
+      a: d3.schemeSet1[0],
+      z: d3.schemeSet1[1],
+      v: d3.schemeSet1[4],
+      t0: d3.schemeSet1[7],
+      s: d3.schemeSet1[8],
+      left: '#f032e6',
+      right: '#10dbc9',
+      correct: d3.schemeSet1[2],
+      error: d3.schemeSet1[3],
+      nr: '#cccccc',
+    };
+  }
+
+  static get lights() {
+    return Object.keys(AccumulableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(AccumulableElement.colors[cur], '#ffffff')(0.5);
+      return acc;
+    }, {});
+  }
+
+  static get darks() {
+    return Object.keys(AccumulableElement.colors).reduce((acc, cur) => {
+      acc[cur] = d3.interpolateRgb(AccumulableElement.colors[cur], '#000000')(0.5);
+      return acc;
+    }, {});
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          /* Declare base colors */
+          ${
+            unsafeCSS(Object.keys(AccumulableElement.colors).map((color) => {
+              return `---color-${color}: var(--color-${color}, ${this.colors[color]});`;
+            }).join('\n'))
+          }
+
+          /* Declare light colors */
+          ${
+            unsafeCSS(Object.keys(AccumulableElement.colors).map((color) => {
+              return `---color-${color}-light: var(--color-${color}-light, ${this.lights[color]});`;
+            }).join('\n'))
+          }
+
+          /* Declare dark colors */
+          ${
+            unsafeCSS(Object.keys(AccumulableElement.colors).map((color) => {
+              return `---color-${color}-dark: var(--color-${color}-dark, ${this.darks[color]});`;
+            }).join('\n'))
+          }
+        }
+      `,
+    ];
+  }
+}

package/src/components/accumulable-control.js

@@ -0,0 +1,249 @@
+
+import {html, css} from 'lit';
+
+import '@decidables/decidables-elements/button';
+import '@decidables/decidables-elements/slider';
+import '@decidables/decidables-elements/switch';
+import '@decidables/decidables-elements/toggle';
+import '@decidables/decidables-elements/toggle-option';
+
+import AccumulableElement from '../accumulable-element';
+
+/*
+  AccumulableControl element
+  <accumulable-control>
+
+  Attributes:
+
+*/
+export default class AccumulableControl extends AccumulableElement {
+  static get properties() {
+    return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      resample: {
+        attribute: 'resample',
+        type: Boolean,
+        reflect: true,
+      },
+
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+      coherence: {
+        attribute: 'coherence',
+        type: Number,
+        reflect: true,
+      },
+      color: {
+        attribute: 'color',
+        type: String,
+        reflect: true,
+      },
+
+      run: {
+        attribute: 'run',
+        type: Boolean,
+        reflect: true,
+      },
+      pause: {
+        attribute: 'pause',
+        type: Boolean,
+        reflect: true,
+      },
+      reset: {
+        attribute: 'reset',
+        type: Boolean,
+        reflect: true,
+      },
+
+      state: {
+        attribute: false,
+        type: String,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.trials = undefined;
+    this.resample = false;
+
+    this.duration = undefined;
+    this.coherence = undefined;
+    this.colors = ['none', 'measure', 'outcome', 'all'];
+    this.color = undefined;
+
+    this.run = false;
+    this.pause = false;
+    this.reset = false;
+
+    // Properties
+    this.states = ['resetted', 'running', 'paused', 'ended'];
+    this.state = 'resetted';
+  }
+
+  setTrials(e) {
+    this.trials = e.target.value;
+    this.dispatchEvent(new CustomEvent('accumulable-control-trials', {
+      detail: {
+        trials: this.trials,
+      },
+      bubbles: true,
+    }));
+  }
+
+  doResample() {
+    this.dispatchEvent(new CustomEvent('accumulable-control-resample', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  setDuration(e) {
+    this.duration = e.target.value;
+    this.dispatchEvent(new CustomEvent('accumulable-control-duration', {
+      detail: {
+        duration: this.duration,
+      },
+      bubbles: true,
+    }));
+  }
+
+  setCoherence(e) {
+    this.coherence = e.target.value;
+    this.dispatchEvent(new CustomEvent('accumulable-control-coherence', {
+      detail: {
+        coherence: this.coherence,
+      },
+      bubbles: true,
+    }));
+  }
+
+  chooseColor(e) {
+    this.color = e.target.value;
+    this.dispatchEvent(new CustomEvent('accumulable-control-color', {
+      detail: {
+        color: this.color,
+      },
+      bubbles: true,
+    }));
+  }
+
+  doRun() {
+    this.state = 'running';
+    this.dispatchEvent(new CustomEvent('accumulable-control-run', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  doPause() {
+    this.state = 'paused';
+    this.dispatchEvent(new CustomEvent('accumulable-control-pause', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  doReset() {
+    this.state = 'resetted';
+    this.dispatchEvent(new CustomEvent('accumulable-control-reset', {
+      detail: {},
+      bubbles: true,
+    }));
+  }
+
+  complete() {
+    this.state = 'ended';
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        .holder {
+          display: flex;
+
+          flex-direction: row;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+
+        .buttons {
+          display: flex;
+
+          flex-direction: column;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        ${this.trials
+          ? html`<decidables-slider class="trials" min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>`
+          : html``}
+        ${this.resample
+          ? html`
+            <div class="buttons">
+              ${this.resample
+                ? html`<decidables-button name="resample" @click=${this.doResample.bind(this)}>Resample</decidables-button>`
+                : html``}
+            </div>
+          `
+          : html``}
+        ${this.duration
+          ? html`<decidables-slider class="duration" min="10" max="2000" step="10" .value=${this.duration} @change=${this.setDuration.bind(this)} @input=${this.setDuration.bind(this)}>Duration</decidables-slider>`
+          : html``}
+        ${this.coherence
+          ? html`<decidables-slider class="coherence" min="0" max="1" step=".01" .value=${this.coherence} @change=${this.setCoherence.bind(this)} @input=${this.setCoherence.bind(this)}>Coherence</decidables-slider>`
+          : html``}
+        ${this.color !== undefined
+          ? html`
+            <decidables-toggle class="color" @change=${this.chooseColor.bind(this)}>
+              <span slot="label">Emphasis</span>
+              <decidables-toggle-option name="toggle" value="none" ?checked=${this.color === 'none'}>None</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="measure" ?checked=${this.color === 'measure'}>Measure</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="outcome" ?checked=${this.color === 'outcome'}>Outcome</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="all" ?checked=${this.color === 'all'}>All</decidables-toggle-option>
+            </decidables-toggle>
+          `
+          : html``}
+        ${this.run || this.pause || this.reset
+          ? html`
+            <div class="buttons">
+              ${this.run
+                ? html`<decidables-button name="run" ?disabled=${this.state === 'running' || this.state === 'ended'} @click=${this.doRun.bind(this)}>Run</decidables-button>`
+                : html``}
+              ${this.pause
+                ? html`<decidables-button name="pause" ?disabled=${this.state !== 'running'} @click=${this.doPause.bind(this)}>Pause</decidables-button>`
+                : html``}
+              ${this.reset
+                ? html`<decidables-button name="reset" ?disabled=${this.state === 'resetted'} @click=${this.doReset.bind(this)}>Reset</decidables-button>`
+                : html``}
+            </div>
+          `
+          : html``}
+      </div>`;
+  }
+}
+
+customElements.define('accumulable-control', AccumulableControl);