@decidables/accumulable-elements 0.1.0

package/src/examples/human.js

@@ -0,0 +1,208 @@
+
+// import DDMMath from '@decidables/accumulable-math';
+
+import DDMExample from './ddm-example';
+
+/*
+  DDMExampleHuman element
+  <ddm-example-human>
+*/
+export default class DDMExampleHuman extends DDMExample {
+  constructor() {
+    super();
+
+    this.trialCount = 0;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.accumulableControl = this.querySelector('accumulable-control');
+    this.rdkTask = this.querySelector('rdk-2afc-task');
+    this.accumulableResponse = this.querySelector('accumulable-response');
+    this.accumulableTable = this.querySelector('accumulable-table');
+    this.ddmParameters = this.querySelector('ddm-parameters');
+    this.ddmModel = this.querySelector('ddm-model');
+    this.ddmFit = this.querySelector('ddm-fit');
+
+    // Initialize
+    this.ddmModel.clear();
+
+    if (this.accumulableControl && this.accumulableControl.hasAttribute('trials')) {
+      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;
+        }
+      });
+    }
+
+    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;
+        }
+      });
+    }
+
+    if (this.accumulableControl && this.accumulableControl.hasAttribute('coherence')) {
+      this.accumulableControl.addEventListener('accumulable-control-coherence', (event) => {
+        if (this.rdkTask) {
+          this.rdkTask.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;
+        }
+      });
+    }
+
+    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();
+        }
+
+        if (this.accumulableResponse) {
+          this.accumulableResponse.reset();
+        }
+
+        if (this.accumulableTable) {
+          this.accumulableTable.correctCount = NaN;
+          this.accumulableTable.errorCount = NaN;
+          this.accumulableTable.nrCount = NaN;
+          this.accumulableTable.accuracy = NaN;
+          this.accumulableTable.correctMeanRT = NaN;
+          this.accumulableTable.errorMeanRT = NaN;
+          this.accumulableTable.meanRT = NaN;
+          this.accumulableTable.correctSDRT = NaN;
+          this.accumulableTable.errorSDRT = NaN;
+          this.accumulableTable.sdRT = NaN;
+        }
+
+        // if (this.ddmParameters) {
+        // }
+
+        if (this.ddmModel) {
+          this.ddmModel.clear();
+        }
+
+        if (this.ddmFit) {
+          this.ddmFit.clear();
+        }
+      });
+    }
+
+    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) {
+          this.accumulableResponse.start(event.detail.signal, event.detail.trial);
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-end', (/* event */) => {
+        if (this.accumulableResponse) {
+          this.accumulableResponse.stop();
+        }
+      });
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-block-end', (/* event */) => {
+        if (this.accumulableControl) {
+          this.accumulableControl.complete();
+        }
+      });
+    }
+
+    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;
+        }
+
+        if (this.ddmModel) {
+          this.ddmModel.trial({
+            index: event.detail.trial,
+            rt: event.detail.rt,
+            outcome: event.detail.outcome,
+          });
+        }
+
+        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,
+          });
+        }
+      });
+    }
+
+    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;
+        }
+      });
+    }
+  }
+}
+
+customElements.define('ddm-example-human', DDMExampleHuman);

package/src/examples/index.js

@@ -0,0 +1,4 @@
+
+export {default as DDMExampleHuman} from './human';
+export {default as DDMExampleInteractive} from './interactive';
+export {default as DDMExampleModel} from './model';

package/src/examples/interactive.js

@@ -0,0 +1,150 @@
+
+import DDMExample from './ddm-example';
+
+/*
+  DDMExampleInteractive element
+  <ddm-example-interactive>
+*/
+export default class DDMExampleInteractive extends DDMExample {
+  static get properties() {
+    return {
+      trials: {
+        attribute: 'trials',
+        type: Number,
+        reflect: true,
+      },
+      a: {
+        attribute: 'boundary-separation',
+        type: Number,
+        reflect: true,
+      },
+      z: {
+        attribute: 'starting-point',
+        type: Number,
+        reflect: true,
+      },
+      v: {
+        attribute: 'drift-rate',
+        type: Number,
+        reflect: true,
+      },
+      t0: {
+        attribute: 'nondecision-time',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.trials = 10;
+    this.a = 1.2;
+    this.z = 0.35;
+    this.v = 1.5;
+    this.t0 = 150;
+
+    this.accumulableControl = null;
+    this.accumulableTable = null;
+    this.ddmParameters = null;
+    this.ddmModel = null;
+
+    this.data = undefined;
+    this.model = undefined;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.accumulableControl = this.querySelector('accumulable-control');
+    this.accumulableTable = this.querySelector('accumulable-table');
+    this.ddmParameters = this.querySelector('ddm-parameters');
+    this.ddmModel = this.querySelector('ddm-model');
+
+    if (this.accumulableControl) {
+      this.accumulableControl.addEventListener('accumulable-control-resample', (/* event */) => {
+        this.ddmModel?.resample();
+        this.requestUpdate();
+      });
+      this.accumulableControl.addEventListener('accumulable-control-trials', (event) => {
+        this.trials = event.detail.trials;
+      });
+    }
+
+    if (this.ddmParameters) {
+      this.ddmParameters.addEventListener('ddm-parameters-a', (event) => {
+        this.a = event.detail.a;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-z', (event) => {
+        this.z = event.detail.z;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-v', (event) => {
+        this.v = event.detail.v;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-t0', (event) => {
+        this.t0 = event.detail.t0;
+      });
+    }
+
+    if (this.ddmModel) {
+      this.ddmModel.addEventListener('ddm-model-a', (event) => {
+        this.a = event.detail.a;
+      });
+      this.ddmModel.addEventListener('ddm-model-z', (event) => {
+        this.z = event.detail.z;
+      });
+      this.ddmModel.addEventListener('ddm-model-v', (event) => {
+        this.v = event.detail.v;
+      });
+      this.ddmModel.addEventListener('ddm-model-t0', (event) => {
+        this.t0 = event.detail.t0;
+      });
+      this.ddmModel.addEventListener('ddm-model-output', (event) => {
+        this.data = event.detail.data;
+        this.model = event.detail.model;
+        this.requestUpdate();
+      });
+    }
+
+    this.requestUpdate();
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.accumulableControl) {
+      this.accumulableControl.trials = this.trials;
+    }
+
+    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;
+    }
+
+    if (this.ddmParameters) {
+      this.ddmParameters.a = this.a;
+      this.ddmParameters.z = this.z;
+      this.ddmParameters.v = this.v;
+      this.ddmParameters.t0 = this.t0;
+    }
+
+    if (this.ddmModel) {
+      this.ddmModel.trials = this.trials;
+      this.ddmModel.a = +this.a;
+      this.ddmModel.z = +this.z;
+      this.ddmModel.v = +this.v;
+      this.ddmModel.t0 = +this.t0;
+    }
+  }
+}
+
+customElements.define('ddm-example-interactive', DDMExampleInteractive);

package/src/examples/model.js

@@ -0,0 +1,307 @@
+
+// import DDMMath from '@decidables/accumulable-math';
+
+import DDMExample from './ddm-example';
+
+/*
+  DDMExampleModel element
+  <ddm-example-model>
+*/
+export default class DDMExampleModel 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: 'boundary-separation',
+        type: Number,
+        reflect: true,
+      },
+      z: {
+        attribute: 'starting-point',
+        type: Number,
+        reflect: true,
+      },
+      v: {
+        attribute: 'drift-rate',
+        type: Number,
+        reflect: true,
+      },
+      t0: {
+        attribute: 'nondecision-time',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    this.trials = 10;
+    this.duration = 2000;
+    this.coherence = 0.5;
+    this.colors = ['none', 'measure', 'outcome', 'all'];
+    this.color = 'outcome';
+
+    this.a = 1.2;
+    this.z = 0.35;
+    this.v = 1.5;
+    this.t0 = 150;
+
+    this.accumulableControl = null;
+    this.rdkTask = null;
+    this.ddmParameters = null;
+    this.ddmModel = null;
+    this.accumulableResponse = null;
+    this.accumulableTable = null;
+
+    this.trialCount = 0;
+    this.signals = ['left', 'right']; // Possible values of 'signal'
+    this.signal = undefined; // Signal for current trial
+    this.data = undefined;
+    this.model = undefined;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    this.accumulableControl = this.querySelector('accumulable-control');
+    this.rdkTask = this.querySelector('rdk-2afc-task');
+    this.ddmParameters = this.querySelector('ddm-parameters');
+    this.ddmModel = this.querySelector('ddm-model');
+    this.accumulableResponse = this.querySelector('accumulable-response');
+    this.accumulableTable = this.querySelector('accumulable-table');
+
+    if (this.accumulableControl) {
+      if (this.accumulableControl.hasAttribute('trials')) {
+        this.accumulableControl.addEventListener('accumulable-control-trials', (event) => {
+          this.trials = event.detail.trials;
+        });
+      }
+
+      if (this.accumulableControl.hasAttribute('duration')) {
+        this.accumulableControl.addEventListener('accumulable-control-duration', (event) => {
+          this.duration = event.detail.duration;
+        });
+      }
+
+      if (this.accumulableControl.hasAttribute('color')) {
+        this.accumulableControl.addEventListener('accumulable-control-color', (event) => {
+          this.color = event.detail.color;
+        });
+      }
+
+      if (this.accumulableControl.hasAttribute('run')) {
+        this.accumulableControl.addEventListener('accumulable-control-run', (/* event */) => {
+          if (this.rdkTask) {
+            this.rdkTask.running = true;
+          }
+
+          if (this.ddmModel) {
+            this.ddmModel.resumeTrial();
+          }
+        });
+      }
+
+      if (this.accumulableControl.hasAttribute('pause')) {
+        this.accumulableControl.addEventListener('accumulable-control-pause', (/* event */) => {
+          if (this.rdkTask) {
+            this.rdkTask.running = false;
+          }
+
+          if (this.ddmModel) {
+            this.ddmModel.pauseTrial();
+          }
+        });
+      }
+
+      if (this.accumulableControl.hasAttribute('reset')) {
+        this.accumulableControl.addEventListener('accumulable-control-reset', (/* event */) => {
+          this.trialCount = 0;
+          this.signal = undefined;
+
+          if (this.rdkTask) {
+            this.rdkTask.reset();
+          }
+
+          if (this.ddmModel) {
+            this.ddmModel.trials = this.trialCount;
+          }
+
+          if (this.accumulableResponse) {
+            this.accumulableResponse.reset();
+          }
+
+          if (this.accumulableTable) {
+            // this.accumulableTable.clear();
+          }
+        });
+      }
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.addEventListener('rdk-trial-start', (event) => {
+        this.signal = event.detail.signal;
+
+        if (this.accumulableResponse) {
+          this.accumulableResponse.start(
+            event.detail.signal,
+            event.detail.trial,
+          );
+        }
+
+        if (this.ddmModel) {
+          this.trialCount += 1;
+          this.ddmModel.trial();
+        }
+      });
+
+      this.rdkTask.addEventListener('rdk-trial-end', (/* event */) => {
+        this.signal = undefined;
+
+        if (this.accumulableResponse) {
+          this.accumulableResponse.stop();
+        }
+      });
+
+      this.rdkTask.addEventListener('rdk-block-end', (/* event */) => {
+        if (this.accumulableControl) {
+          this.accumulableControl.complete();
+        }
+      });
+    }
+
+    if (this.ddmParameters) {
+      this.ddmParameters.addEventListener('ddm-parameters-a', (event) => {
+        this.a = event.detail.a;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-z', (event) => {
+        this.z = event.detail.z;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-v', (event) => {
+        this.v = event.detail.v;
+      });
+      this.ddmParameters.addEventListener('ddm-parameters-t0', (event) => {
+        this.t0 = event.detail.t0;
+      });
+    }
+
+    if (this.ddmModel) {
+      this.ddmModel.addEventListener('ddm-model-a', (event) => {
+        this.a = event.detail.a;
+      });
+      this.ddmModel.addEventListener('ddm-model-z', (event) => {
+        this.z = event.detail.z;
+      });
+      this.ddmModel.addEventListener('ddm-model-v', (event) => {
+        this.v = event.detail.v;
+      });
+      this.ddmModel.addEventListener('ddm-model-t0', (event) => {
+        this.t0 = event.detail.t0;
+      });
+      this.ddmModel.addEventListener('ddm-model-output', (event) => {
+        this.data = event.detail.data;
+        this.model = event.detail.model;
+        this.requestUpdate();
+      });
+
+      if (this.ddmModel) {
+        this.ddmModel.addEventListener('accumulable-response', (event) => {
+          if (this.accumulableResponse) {
+            const response = (event.detail.outcome === 'correct')
+              ? this.signal
+              : (this.signal === 'left')
+                ? 'right'
+                : 'left';
+            this.accumulableResponse.responded(response);
+          }
+
+          this.data = event.detail.data;
+          this.model = event.detail.model;
+          this.requestUpdate();
+        });
+      }
+    }
+
+    this.requestUpdate();
+  }
+
+  update(changedProperties) {
+    super.update(changedProperties);
+
+    if (this.trialCount > this.trials) {
+      this.trialCount = this.trials;
+    }
+
+    if (this.accumulableControl) {
+      this.accumulableControl.trials = this.trials;
+      this.accumulableControl.duration = this.duration;
+      this.accumulableControl.coherence = this.coherence;
+      this.accumulableControl.color = this.color;
+    }
+
+    if (this.rdkTask) {
+      this.rdkTask.trials = this.trials;
+      this.rdkTask.duration = this.duration;
+      this.rdkTask.coherence = this.coherence;
+    }
+
+    if (this.ddmParameters) {
+      this.ddmParameters.a = this.a;
+      this.ddmParameters.z = this.z;
+      this.ddmParameters.v = this.v;
+      this.ddmParameters.t0 = this.t0;
+    }
+
+    if (this.ddmModel) {
+      this.ddmModel.trials = this.trialCount;
+      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-model', DDMExampleModel);

package/src/index.js

@@ -0,0 +1,6 @@
+
+// Internal dependencies
+export {default as AccumulableElement} from './accumulable-element';
+export * from './components';
+export * from './equations';
+export * from './examples';