@decidables/accumulable-elements 0.1.3 → 0.2.0

package/src/equations/azv2pc.js

@@ -41,9 +41,9 @@ export default class DDMEquationAZV2PC extends DDMEquation {
 
   constructor() {
     super();
-    this.a = 1.5;
-    this.z = 0.5;
-    this.v = 0.1;
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
     this.alignState();
   }
 
@@ -92,19 +92,46 @@ export default class DDMEquationAZV2PC extends DDMEquation {
     let s;
     let accuracy;
     if (this.numeric) {
-      a = html`<decidables-spinner class="a bottom" ?disabled=${!this.interactive} min="0.1" max="2" step="0.01" .value="${this.a}" @input=${this.aInput.bind(this)}>
+      a = html`<decidables-spinner class="a bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.a.MIN}
+          max=${DDMMath.a.MAX}
+          step=${DDMMath.a.STEP}
+          .value=${this.a}
+          @input=${this.aInput.bind(this)}
+        >
           <var class="math-var">a</var>
         </decidables-spinner>`;
-      z = html`<decidables-spinner class="z bottom" ?disabled=${!this.interactive} min="0.01" max="0.99" step="0.01" .value="${this.z}" @input=${this.zInput.bind(this)}>
+      z = html`<decidables-spinner class="z bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.z.MIN}
+          max=${DDMMath.z.MAX}
+          step=${DDMMath.z.STEP}
+          .value=${this.z}
+          @input=${this.zInput.bind(this)}
+        >
           <var class="math-var">z</var>
         </decidables-spinner>`;
-      v = html`<decidables-spinner class="v bottom" ?disabled=${!this.interactive} min="0.01" max="5" step="0.01" .value="${this.v}" @input=${this.vInput.bind(this)}>
+      v = html`<decidables-spinner class="v bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.v.MIN}
+          max=${DDMMath.v.MAX}
+          step=${DDMMath.v.STEP}
+          .value=${this.v}
+          @input=${this.vInput.bind(this)}
+        >
           <var class="math-var">v</var>
         </decidables-spinner>`;
-      s = html`<decidables-spinner class="s bottom" disabled min="0.01" max="1" step="0.01" .value="${DDMMath.s}">
+      s = html`<decidables-spinner class="s bottom"
+          disabled
+          .value=${DDMMath.s.DEFAULT}
+        >
           <var class="math-var">s</var>
         </decidables-spinner>`;
-      accuracy = html`<decidables-spinner class="accuracy bottom" disabled min="0" max="1" step="0.01" .value="${+this.accuracy.toFixed(2)}">
+      accuracy = html`<decidables-spinner class="accuracy bottom"
+          disabled
+          .value=${+this.accuracy.toFixed(2)}
+        >
           <var>Accuracy</var>
         </decidables-spinner>`;
     } else {

package/src/equations/azvt02m.js

@@ -46,10 +46,10 @@ export default class DDMEquationAZVT02M extends DDMEquation {
 
   constructor() {
     super();
-    this.a = 1.5;
-    this.z = 0.5;
-    this.v = 0.1;
-    this.t0 = 200;
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
+    this.t0 = DDMMath.t0.DEFAULT;
     this.alignState();
   }
 
@@ -106,22 +106,56 @@ export default class DDMEquationAZVT02M extends DDMEquation {
     let s;
     let meanRT;
     if (this.numeric) {
-      a = html`<decidables-spinner class="a bottom" ?disabled=${!this.interactive} min="0.1" max="2" step="0.01" .value="${this.a}" @input=${this.aInput.bind(this)}>
+      a = html`<decidables-spinner class="a bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.a.MIN}
+          max=${DDMMath.a.MAX}
+          step=${DDMMath.a.STEP}
+          .value=${this.a}
+          @input=${this.aInput.bind(this)}
+        >
           <var class="math-var">a</var>
         </decidables-spinner>`;
-      z = html`<decidables-spinner class="z bottom" ?disabled=${!this.interactive} min="0.01" max="0.99" step="0.01" .value="${this.z}" @input=${this.zInput.bind(this)}>
+      z = html`<decidables-spinner class="z bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.z.MIN}
+          max=${DDMMath.z.MAX}
+          step=${DDMMath.z.STEP}
+          .value=${this.z}
+          @input=${this.zInput.bind(this)}
+        >
           <var class="math-var">z</var>
         </decidables-spinner>`;
-      v = html`<decidables-spinner class="v bottom" ?disabled=${!this.interactive} min="0.01" max="5" step="0.01" .value="${this.v}" @input=${this.vInput.bind(this)}>
+      v = html`<decidables-spinner class="v bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.v.MIN}
+          max=${DDMMath.v.MAX}
+          step=${DDMMath.v.STEP}
+          .value=${this.v}
+          @input=${this.vInput.bind(this)}
+        >
           <var class="math-var">v</var>
         </decidables-spinner>`;
-      t0 = html`<decidables-spinner class="t0 bottom" ?disabled=${!this.interactive} min="0" max="500" step="1" .value="${this.t0}" @input=${this.t0Input.bind(this)}>
+      t0 = html`<decidables-spinner class="t0 bottom"
+          ?disabled=${!this.interactive}
+          min=${DDMMath.t0.MIN}
+          max=${DDMMath.t0.MAX}
+          step=${DDMMath.t0.STEP}
+          .value=${this.t0}
+          @input=${this.t0Input.bind(this)}
+        >
           <var class="math-var">t<sub>0</sub></var>
         </decidables-spinner>`;
-      s = html`<decidables-spinner class="s bottom" disabled min="0.01" max="1" step="0.01" .value="${DDMMath.s}">
+      s = html`<decidables-spinner class="s bottom"
+          disabled
+          .value=${DDMMath.s.DEFAULT}
+        >
           <var class="math-var">s</var>
         </decidables-spinner>`;
-      meanRT = html`<decidables-spinner class="mean-rt bottom" disabled min="0" max="1" step="0.01" .value="${+this.meanRT.toFixed(0)}">
+      meanRT = html`<decidables-spinner class="mean-rt bottom"
+          disabled
+          .value=${+this.meanRT.toFixed(0)}
+        >
           <var>Mean RT</var>
         </decidables-spinner>`;
     } else {

package/src/examples/human.js

@@ -1,5 +1,5 @@
 
-// import DDMMath from '@decidables/accumulable-math';
+import DDMMath from '@decidables/accumulable-math';
 
 import DDMExample from './ddm-example';
 
@@ -8,10 +8,75 @@ import DDMExample from './ddm-example';
   <ddm-example-human>
 */
 export default class DDMExampleHuman extends DDMExample {
+  static get properties() {
+    return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      duration: {
+        attribute: 'duration',
+        type: Number,
+        reflect: true,
+      },
+      coherence: {
+        attribute: 'coherence',
+        type: Number,
+        reflect: true,
+      },
+      color: {
+        attribute: 'color',
+        type: String,
+        reflect: true,
+      },
+
+      a: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+      z: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+      v: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+      t0: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
   constructor() {
     super();
 
-    this.trialCount = 0;
+    this.trials = 10;
+    this.duration = 2000;
+    this.coherence = 0.5;
+    this.colors = ['none', 'measure', 'outcome', 'all'];
+    this.color = 'outcome';
+
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
+    this.t0 = DDMMath.t0.DEFAULT;
+
+    this.accumulableControl = null;
+    this.rdkTask = null;
+    this.accumulableResponse = null;
+    this.accumulableTable = null;
+    this.ddmParameters = null;
+    this.ddmModel = null;
+    this.ddmFit = null;
+
+    this.data = undefined;
   }
 
   connectedCallback() {
@@ -28,61 +93,35 @@ export default class DDMExampleHuman extends DDMExample {
     // Initialize
     this.ddmModel.clear();
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('trials')) {
+    if (this.accumulableControl) {
       this.accumulableControl.addEventListener('accumulable-control-trials', (event) => {
-        if (this.rdkTask) {
-          this.rdkTask.trials = event.detail.trials;
-        }
-
-        if (this.accumulableResponse) {
-          this.accumulableResponse.trialTotal = event.detail.trials;
-        }
+        this.trials = event.detail.trials;
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('duration')) {
       this.accumulableControl.addEventListener('accumulable-control-duration', (event) => {
-        if (this.rdkTask) {
-          this.rdkTask.duration = event.detail.duration;
-          this.rdkTask.wait = event.detail.duration;
-          this.rdkTask.iti = event.detail.duration;
-        }
+        this.duration = event.detail.duration;
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('coherence')) {
       this.accumulableControl.addEventListener('accumulable-control-coherence', (event) => {
-        if (this.rdkTask) {
-          this.rdkTask.coherence = event.detail.coherence;
-        }
+        this.coherence = event.detail.coherence;
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('color')) {
       this.accumulableControl.addEventListener('accumulable-control-color', (event) => {
-        if (this.accumulableTable) {
-          this.accumulableTable.color = event.detail.color;
-        }
+        this.color = event.detail.color;
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('run')) {
       this.accumulableControl.addEventListener('accumulable-control-run', (/* event */) => {
         if (this.rdkTask) {
           this.rdkTask.running = true;
         }
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('pause')) {
       this.accumulableControl.addEventListener('accumulable-control-pause', (/* event */) => {
         if (this.rdkTask) {
           this.rdkTask.running = false;
         }
       });
-    }
 
-    if (this.accumulableControl && this.accumulableControl.hasAttribute('reset')) {
       this.accumulableControl.addEventListener('accumulable-control-reset', (/* event */) => {
         if (this.rdkTask) {
           this.rdkTask.reset();
@@ -118,12 +157,6 @@ export default class DDMExampleHuman extends DDMExample {
       });
     }
 
-    if (this.rdkTask) {
-      if (this.accumulableResponse) {
-        this.accumulableResponse.trialTotal = this.rdkTask.trials;
-      }
-    }
-
     if (this.rdkTask) {
       this.rdkTask.addEventListener('rdk-trial-start', (event) => {
         if (this.accumulableResponse) {
@@ -150,18 +183,7 @@ export default class DDMExampleHuman extends DDMExample {
 
     if (this.accumulableResponse) {
       this.accumulableResponse.addEventListener('accumulable-response', (event) => {
-        if (this.accumulableTable) {
-          this.accumulableTable.correctCount = event.detail.correctCount;
-          this.accumulableTable.errorCount = event.detail.errorCount;
-          this.accumulableTable.nrCount = event.detail.nrCount;
-          this.accumulableTable.accuracy = event.detail.accuracy;
-          this.accumulableTable.correctMeanRT = event.detail.correctMeanRT;
-          this.accumulableTable.errorMeanRT = event.detail.errorMeanRT;
-          this.accumulableTable.meanRT = event.detail.meanRT;
-          this.accumulableTable.correctSDRT = event.detail.correctSDRT;
-          this.accumulableTable.errorSDRT = event.detail.errorSDRT;
-          this.accumulableTable.sdRT = event.detail.sdRT;
-        }
+        this.data = event.detail.data;
 
         if (this.ddmModel) {
           this.ddmModel.trial({
@@ -173,36 +195,99 @@ export default class DDMExampleHuman extends DDMExample {
 
         if (this.ddmFit) {
           this.ddmFit.set({
-            accuracy: event.detail.accuracy,
-            correctMeanRT: event.detail.correctMeanRT,
-            errorMeanRT: event.detail.errorMeanRT,
-            meanRT: event.detail.meanRT,
-            correctSDRT: event.detail.correctSDRT,
-            errorSDRT: event.detail.errorSDRT,
-            sdRT: event.detail.sdRT,
+            accuracy: event.detail.data.accuracy,
+            correctMeanRT: event.detail.data.correctMeanRT,
+            errorMeanRT: event.detail.data.errorMeanRT,
+            meanRT: event.detail.data.meanRT,
+            correctSDRT: event.detail.data.correctSDRT,
+            errorSDRT: event.detail.data.errorSDRT,
+            sdRT: event.detail.data.sdRT,
           });
         }
+
+        this.requestUpdate();
       });
     }
 
     if (this.ddmFit) {
       this.ddmFit.addEventListener('ddm-fit-update', (event) => {
-        if (this.ddmParameters) {
-          this.ddmParameters.a = event.detail.a;
-          this.ddmParameters.z = 0.5; // event.detail.z;
-          this.ddmParameters.v = event.detail.v;
-          this.ddmParameters.t0 = event.detail.t0;
-        }
-
-        if (this.ddmModel) {
-          this.ddmModel.a = event.detail.a;
-          this.ddmModel.z = 0.5; // event.detail.z;
-          this.ddmModel.v = event.detail.v;
-          this.ddmModel.t0 = event.detail.t0;
-        }
+        this.a = event.detail.a;
+        this.z = 0.5; // event.detail.z;
+        this.v = event.detail.v;
+        this.t0 = event.detail.t0;
       });
     }
   }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.accumulableControl) {
+      this.accumulableControl.trials = (this.accumulableControl.trials != null)
+        ? this.trials
+        : undefined;
+      this.accumulableControl.duration = (this.accumulableControl.duration != null)
+        ? this.duration
+        : undefined;
+      this.accumulableControl.coherence = (this.accumulableControl.coherence != null)
+        ? this.coherence
+        : undefined;
+      this.accumulableControl.color = (this.accumulableControl.color != null)
+        ? this.color
+        : undefined;
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.trials = this.trials;
+      this.rdkTask.duration = this.duration;
+      this.rdkTask.wait = this.duration;
+      this.rdkTask.iti = this.duration;
+      this.rdkTask.coherence = this.coherence;
+    }
+
+    if (this.ddmParameters) {
+      this.ddmParameters.a = (this.ddmParameters.a != null)
+        ? this.a
+        : undefined;
+      this.ddmParameters.z = (this.ddmParameters.z != null)
+        ? this.z
+        : undefined;
+      this.ddmParameters.v = (this.ddmParameters.a != null)
+        ? this.v
+        : undefined;
+      this.ddmParameters.t0 = (this.ddmParameters.t0 != null)
+        ? this.t0
+        : undefined;
+    }
+
+    if (this.ddmModel) {
+      this.ddmModel.a = +this.a;
+      this.ddmModel.z = +this.z;
+      this.ddmModel.v = +this.v;
+      this.ddmModel.t0 = +this.t0;
+    }
+
+    if (this.accumulableResponse) {
+      this.accumulableResponse.trialTotal = this.trials;
+    }
+
+    if (this.accumulableTable) {
+      this.accumulableTable.color = this.color;
+    }
+
+    if (this.accumulableTable && this.data) {
+      this.accumulableTable.correctCount = this.data.correctCount;
+      this.accumulableTable.errorCount = this.data.errorCount;
+      this.accumulableTable.nrCount = this.data.nrCount;
+      this.accumulableTable.accuracy = this.data.accuracy;
+      this.accumulableTable.correctMeanRT = this.data.correctMeanRT;
+      this.accumulableTable.errorMeanRT = this.data.errorMeanRT;
+      this.accumulableTable.meanRT = this.data.meanRT;
+      this.accumulableTable.correctSDRT = this.data.correctSDRT;
+      this.accumulableTable.errorSDRT = this.data.errorSDRT;
+      this.accumulableTable.sdRT = this.data.sdRT;
+    }
+  }
 }
 
 customElements.define('ddm-example-human', DDMExampleHuman);

package/src/examples/interactive.js

@@ -1,4 +1,6 @@
 
+import DDMMath from '@decidables/accumulable-math';
+
 import DDMExample from './ddm-example';
 
 /*
@@ -13,6 +15,11 @@ export default class DDMExampleInteractive extends DDMExample {
         type: Number,
         reflect: true,
       },
+      color: {
+        attribute: 'color',
+        type: String,
+        reflect: true,
+      },
       a: {
         attribute: 'boundary-separation',
         type: Number,
@@ -40,10 +47,13 @@ export default class DDMExampleInteractive extends DDMExample {
     super();
 
     this.trials = 10;
-    this.a = 1.2;
-    this.z = 0.35;
-    this.v = 1.5;
-    this.t0 = 150;
+    this.colors = ['none', 'measure', 'outcome', 'all'];
+    this.color = 'outcome';
+
+    this.a = DDMMath.a.DEFAULT;
+    this.z = DDMMath.z.DEFAULT;
+    this.v = DDMMath.v.DEFAULT;
+    this.t0 = DDMMath.t0.DEFAULT;
 
     this.accumulableControl = null;
     this.accumulableTable = null;
@@ -70,6 +80,9 @@ export default class DDMExampleInteractive extends DDMExample {
       this.accumulableControl.addEventListener('accumulable-control-trials', (event) => {
         this.trials = event.detail.trials;
       });
+      this.accumulableControl.addEventListener('accumulable-control-color', (event) => {
+        this.color = event.detail.color;
+      });
     }
 
     if (this.ddmParameters) {
@@ -114,7 +127,16 @@ export default class DDMExampleInteractive extends DDMExample {
     super.update(changedProperties);
 
     if (this.accumulableControl) {
-      this.accumulableControl.trials = this.trials;
+      this.accumulableControl.trials = (this.accumulableControl.trials != null)
+        ? this.trials
+        : undefined;
+      this.accumulableControl.color = (this.accumulableControl.color != null)
+        ? this.color
+        : undefined;
+    }
+
+    if (this.accumulableTable) {
+      this.accumulableTable.color = this.color;
     }
 
     if (this.accumulableTable && this.data) {
@@ -131,10 +153,18 @@ export default class DDMExampleInteractive extends DDMExample {
     }
 
     if (this.ddmParameters) {
-      this.ddmParameters.a = this.a;
-      this.ddmParameters.z = this.z;
-      this.ddmParameters.v = this.v;
-      this.ddmParameters.t0 = this.t0;
+      this.ddmParameters.a = (this.ddmParameters.a != null)
+        ? this.a
+        : undefined;
+      this.ddmParameters.z = (this.ddmParameters.z != null)
+        ? this.z
+        : undefined;
+      this.ddmParameters.v = (this.ddmParameters.a != null)
+        ? this.v
+        : undefined;
+      this.ddmParameters.t0 = (this.ddmParameters.t0 != null)
+        ? this.t0
+        : undefined;
     }
 
     if (this.ddmModel) {