@decidables/detectable-elements 0.1.3 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -56,11 +56,11 @@
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.3.0",
+    "@decidables/decidables-elements": "^0.3.1",
     "@decidables/detectable-math": "^0.1.1",
     "d3": "^7.3.0",
     "jstat": "^1.9.5",
     "lit": "^2.2.1"
   },
-  "gitHead": "6cb4f73701fe96a9344ae979a1a8d6782e7bc94d"
+  "gitHead": "0afa544a1711ac1d34594934ab6c03064481810f"
 }

package/src/components/detectable-control.js

@@ -81,7 +81,7 @@ export default class DetectableControl extends DetectableElement {
     this.duration = undefined;
     this.coherence = undefined;
     this.payoff = undefined;
-    this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome'];
+    this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
     this.color = undefined;
     this.zRoc = undefined;
     this.run = false;
@@ -239,6 +239,7 @@ export default class DetectableControl extends DetectableElement {
               <decidables-toggle-option name="toggle" value="stimulus" ?checked=${this.color === 'stimulus'}>Stimulus</decidables-toggle-option>
               <decidables-toggle-option name="toggle" value="response" ?checked=${this.color === 'response'}>Response</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``}

package/src/components/detectable-response.js

@@ -302,6 +302,11 @@ export default class DetectableResponse extends DetectableElement {
           border: 1px solid var(---color-element-border);
         }
 
+        :host([payoff="trial"]) .feedback,
+        :host([payoff="total"]) .feedback {
+          height: 5rem;
+        }
+
         .feedback.h {
           background-color: var(---color-h-light);
         }
@@ -337,17 +342,12 @@ export default class DetectableResponse extends DetectableElement {
           line-height: 1.15;
         }
 
-        :host([payoff="trial"]) .feedback,
-        :host([payoff="total"]) .feedback {
-          height: 4rem;
-        }
-
         /* Payoff feedback */
-        .payoff {
+        .total {
           text-align: center;
         }
 
-        .payoff .label {
+        .total .label {
           font-weight: 600;
         }
       `,
@@ -355,6 +355,21 @@ export default class DetectableResponse extends DetectableElement {
   }
 
   render() {
+    const payoffFormatter = new Intl.NumberFormat('en-US', {
+      style: 'currency',
+      currency: 'USD',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    });
+    const payoffFormat = (number) => {
+      return payoffFormatter.formatToParts(number).map(({type, value}) => {
+        if (type === 'minusSign') {
+          return '−';
+        }
+        return value;
+      }).reduce((string, part) => { return string + part; });
+    };
+
     return html`
       <div class="holder">
         <div class="responses">
@@ -394,15 +409,15 @@ export default class DetectableResponse extends DetectableElement {
                             ? html`<span class="outcome">Error</span>`
                             : html`<span class="outcome">No<br>Response</span>`
                       : ''}
-                    ${(this.payoff === 'trial' || this.payoff === 'total')
-                      ? html`<span class="payoff">${this.trialPayoff}</span>`
+                    ${((this.state === 'feedback') && (this.payoff === 'trial' || this.payoff === 'total'))
+                      ? html`<span class="payoff">${payoffFormat(this.trialPayoff)}</span>`
                       : html``}
                   </div>`
                 : html``}
               ${(this.payoff === 'total')
                 ? html`
-                  <div class="payoff">
-                    <span class="label">Total: </span><span class="value">${this.totalPayoff}</span>
+                  <div class="total">
+                    <span class="label">Total: </span><span class="value">${payoffFormat(this.totalPayoff)}</span>
                   </div>`
                 : html``}
             </div>`

package/src/components/detectable-table.js

@@ -118,8 +118,8 @@ export default class DetectableTable extends DetectableElement {
     this.summaries = ['stimulusRates', 'responseRates', 'accuracy'];
     this.summary = new Set();
 
-    this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome'];
-    this.color = 'outcome';
+    this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
+    this.color = 'all';
 
     this.h = 40;
     this.m = 60;
@@ -318,7 +318,7 @@ export default class DetectableTable extends DetectableElement {
 
         /* Color schemes & Table emphasis */
 
-        /* (Default) Outcome color scheme */
+        /* (Default) All color scheme */
         .h {
           background: var(---color-h-light);
           border-top: 2px solid var(---color-element-emphasis);
@@ -417,6 +417,15 @@ export default class DetectableTable extends DetectableElement {
           background: var(---color-element-background);
         }
 
+        /* Outcome color scheme */
+        :host([color="outcome"]) .hr,
+        :host([color="outcome"]) .far,
+        :host([color="outcome"]) .ppv,
+        :host([color="outcome"]) .fomr,
+        :host([color="outcome"]) .acc {
+          background: var(---color-element-background);
+        }
+
         /* No color scheme */
         :host([color="none"]) .cr,
         :host([color="none"]) .fa,
@@ -440,6 +449,14 @@ export default class DetectableTable extends DetectableElement {
       minimumFractionDigits: 0,
       maximumFractionDigits: 0,
     });
+    const payoffFormat = (number) => {
+      return payoffFormatter.formatToParts(number).map(({type, value}) => {
+        if (type === 'minusSign') {
+          return '−';
+        }
+        return value;
+      }).reduce((string, part) => { return string + part; });
+    };
 
     this.alignState();
     let h;
@@ -455,25 +472,25 @@ export default class DetectableTable extends DetectableElement {
       h = html`
         <decidables-spinner ?disabled=${!this.interactive} min="0" .value="${this.h}" @input=${this.hInput.bind(this)}>
           <span>Hits</span>
-          ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.hPayoff)}</span>` : html``}
+          ${this.payoff ? html`<span class="payoff">${payoffFormat(this.hPayoff)}</span>` : html``}
         </decidables-spinner>
       `;
       m = html`
         <decidables-spinner ?disabled=${!this.interactive} min="0" .value="${this.m}" @input=${this.mInput.bind(this)}>
           <span>Misses</span>
-          ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.mPayoff)}</span>` : html``}
+          ${this.payoff ? html`<span class="payoff">${payoffFormat(this.mPayoff)}</span>` : html``}
         </decidables-spinner>
       `;
       fa = html`
         <decidables-spinner ?disabled=${!this.interactive} min="0" .value="${this.fa}" @input=${this.faInput.bind(this)}>
           <span>False Alarms</span>
-          ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.faPayoff)}</span>` : html``}
+          ${this.payoff ? html`<span class="payoff">${payoffFormat(this.faPayoff)}</span>` : html``}
         </decidables-spinner>
       `;
       cr = html`
         <decidables-spinner ?disabled=${!this.interactive} min="0" .value="${this.cr}" @input=${this.crInput.bind(this)}>
           <span>Correct Rejections</span>
-          ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.crPayoff)}</span>` : html``}
+          ${this.payoff ? html`<span class="payoff">${payoffFormat(this.crPayoff)}</span>` : html``}
         </decidables-spinner>
       `;
       hr = html`
@@ -503,13 +520,13 @@ export default class DetectableTable extends DetectableElement {
       `;
     } else {
       h = html`<span>Hits</span>
-        ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.hPayoff)}</span>` : html``}`;
+        ${this.payoff ? html`<span class="payoff">${payoffFormat(this.hPayoff)}</span>` : html``}`;
       m = html`<span>Misses</span>
-        ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.mPayoff)}</span>` : html``}`;
+        ${this.payoff ? html`<span class="payoff">${payoffFormat(this.mPayoff)}</span>` : html``}`;
       fa = html`<span>False Alarms</span>
-        ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.faPayoff)}</span>` : html``}`;
+        ${this.payoff ? html`<span class="payoff">${payoffFormat(this.faPayoff)}</span>` : html``}`;
       cr = html`<span>Correct Rejections</span>
-        ${this.payoff ? html`<span class="payoff">${payoffFormatter.format(this.crPayoff)}</span>` : html``}`;
+        ${this.payoff ? html`<span class="payoff">${payoffFormat(this.crPayoff)}</span>` : html``}`;
       hr = html`<span>Hit Rate</span>`;
       far = html`<span>False Alarm Rate</span>`;
       acc = html`<span>Accuracy</span>`;

package/src/components/rdk-task.js

@@ -188,7 +188,7 @@ export default class RDKTask extends DetectableElement {
     ];
   }
 
-  render() { // eslint-disable-line class-methods-use-this
+  render() { /* eslint-disable-line class-methods-use-this */
     return html``;
   }
 

package/src/components/roc-space.js

@@ -376,7 +376,7 @@ export default class ROCSpace extends DetectableElement {
     ];
   }
 
-  render() { // eslint-disable-line class-methods-use-this
+  render() { /* eslint-disable-line class-methods-use-this */
     return html`
       ${DetectableElement.svgFilters}
     `;

package/src/components/sdt-model.js

@@ -473,7 +473,7 @@ export default class SDTModel extends DetectableElement {
     ];
   }
 
-  render() { // eslint-disable-line class-methods-use-this
+  render() { /* eslint-disable-line class-methods-use-this */
     return html`
       ${DetectableElement.svgFilters}
     `;
@@ -643,7 +643,7 @@ export default class SDTModel extends DetectableElement {
       })
       .on('drag', (event, datum) => {
         this.drag = true;
-        let muS = this.muS; // eslint-disable-line prefer-destructuring
+        let muS = this.muS; /* eslint-disable-line prefer-destructuring */
         if (this.interactive) {
           muS = xScale.invert(event.x);
           // Clamp Signal Curve to stay visible
@@ -653,7 +653,7 @@ export default class SDTModel extends DetectableElement {
               ? xScale.domain()[1]
               : muS;
         }
-        let hS = this.hS; // eslint-disable-line prefer-destructuring
+        let hS = this.hS; /* eslint-disable-line prefer-destructuring */
         if (this.unequal) {
           hS = yScale.invert(event.y);
           // Clamp Signal Curve to stay visible
@@ -849,7 +849,7 @@ export default class SDTModel extends DetectableElement {
       .on('keydown', this.interactive
         ? (event) => {
           if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-            let muN = this.muN; // eslint-disable-line prefer-destructuring
+            let muN = this.muN; /* eslint-disable-line prefer-destructuring */
             switch (event.key) {
               case 'ArrowRight':
                 muN += event.shiftKey ? 0.01 : 0.1;
@@ -1044,7 +1044,7 @@ export default class SDTModel extends DetectableElement {
       .on('keydown.sensitivity', this.interactive
         ? (event) => {
           if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-            let muS = this.muS; // eslint-disable-line prefer-destructuring
+            let muS = this.muS; /* eslint-disable-line prefer-destructuring */
             switch (event.key) {
               case 'ArrowRight':
                 muS += event.shiftKey ? 0.01 : 0.1;
@@ -1072,7 +1072,7 @@ export default class SDTModel extends DetectableElement {
       .on('keydown.variance', this.unequal
         ? (event) => {
           if (['ArrowUp', 'ArrowDown'].includes(event.key)) {
-            let hS = this.hS; // eslint-disable-line prefer-destructuring
+            let hS = this.hS; /* eslint-disable-line prefer-destructuring */
             switch (event.key) {
               case 'ArrowUp':
                 hS += event.shiftKey ? 0.002 : 0.02;
@@ -1326,7 +1326,7 @@ export default class SDTModel extends DetectableElement {
         );
         return (time) => {
           element.d = interpolateD(time);
-          d3.select(element).text(+(element.d).toFixed(3));
+          d3.select(element).text(d3.format('.3')(element.d));
         };
       });
     //  EXIT
@@ -1384,7 +1384,7 @@ export default class SDTModel extends DetectableElement {
         );
         return (time) => {
           element.c = interpolateC(time);
-          d3.select(element).text(+(element.c).toFixed(3));
+          d3.select(element).text(d3.format('.3')(element.c));
         };
       });
     //  EXIT
@@ -1450,7 +1450,7 @@ export default class SDTModel extends DetectableElement {
         );
         return (time) => {
           element.s = interpolateS(time);
-          d3.select(element).text(+(element.s).toFixed(3));
+          d3.select(element).text(d3.format('.3')(element.s));
         };
       });
     //  EXIT
@@ -1480,7 +1480,7 @@ export default class SDTModel extends DetectableElement {
           .call(dragThreshold)
           .on('keydown', (event) => {
             if (['ArrowRight', 'ArrowLeft'].includes(event.key)) {
-              let l = this.l; // eslint-disable-line prefer-destructuring
+              let l = this.l; /* eslint-disable-line prefer-destructuring */
               switch (event.key) {
                 case 'ArrowRight':
                   l += event.shiftKey ? 0.01 : 0.1;

package/src/equations/hfa2ppv.js

@@ -0,0 +1,121 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationHFa2Ppv element
+  <sdt-equation-hm2hr>
+
+  Attributes:
+  Hits; Misses; Hit Rate;
+*/
+export default class SDTEquationHFa2Ppv extends SDTEquation {
+  static get properties() {
+    return {
+      h: {
+        attribute: 'hits',
+        type: Number,
+        reflect: true,
+      },
+      fa: {
+        attribute: 'false-alarms',
+        type: Number,
+        reflect: true,
+      },
+      ppv: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.h = 0;
+    this.fa = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.ppv = SDTMath.hFa2Ppv(this.h, this.fa);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-hfa2ppv-change', {
+      detail: {
+        h: this.h,
+        fa: this.fa,
+        ppv: this.ppv,
+      },
+      bubbles: true,
+    }));
+  }
+
+  hInput(event) {
+    this.h = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  faInput(event) {
+    this.fa = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let h;
+    let fa;
+    let ppv;
+    if (this.numeric) {
+      h = html`
+        <decidables-spinner class="h" ?disabled=${!this.interactive} min="0" .value="${this.h}" @input=${this.hInput.bind(this)}>
+          <var>Hits</var>
+        </decidables-spinner>
+      `;
+      fa = html`
+        <decidables-spinner class="fa" ?disabled=${!this.interactive} min="0" .value="${this.fa}" @input=${this.faInput.bind(this)}>
+          <var>False Alarms</var>
+        </decidables-spinner>
+      `;
+      ppv = html`
+        <decidables-spinner class="ppv" disabled min="0" max="1" step=".001" .value="${+this.ppv.toFixed(3)}">
+          <var>Positive Predictive Value</var>
+        </decidables-spinner>
+      `;
+    } else {
+      h = html`<var class="h">Hits</var>`;
+      fa = html`<var class="fa">False Alarms</var>`;
+      ppv = html`<var class="ppv">Positive Predictive Value</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${ppv}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${h}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${h}<span class="plus">+</span>${fa}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('sdt-equation-hfa2ppv', SDTEquationHFa2Ppv);

package/src/equations/index.js

@@ -2,7 +2,9 @@
 export {default as SDTEquationDC2Far} from './dc2far';
 export {default as SDTEquationDC2Hr} from './dc2hr';
 export {default as SDTEquationFaCr2Far} from './facr2far';
+export {default as SDTEquationHFa2Ppv} from './hfa2ppv';
 export {default as SDTEquationHM2Hr} from './hm2hr';
 export {default as SDTEquationHMFaCr2Acc} from './hmfacr2acc';
 export {default as SDTEquationHrFar2C} from './hrfar2c';
 export {default as SDTEquationHrFar2D} from './hrfar2d';
+export {default as SDTEquationMCr2Fomr} from './mcr2fomr';

package/src/equations/mcr2fomr.js

@@ -0,0 +1,121 @@
+
+import {html} from 'lit';
+
+import '@decidables/decidables-elements/spinner';
+import SDTMath from '@decidables/detectable-math';
+
+import SDTEquation from './sdt-equation';
+
+/*
+  SDTEquationMCr2Fomr element
+  <sdt-equation-mcr2fomr>
+
+  Attributes:
+  Hits; Misses; Hit Rate;
+*/
+export default class SDTEquationMCr2Fomr extends SDTEquation {
+  static get properties() {
+    return {
+      m: {
+        attribute: 'misses',
+        type: Number,
+        reflect: true,
+      },
+      cr: {
+        attribute: 'correct-rejections',
+        type: Number,
+        reflect: true,
+      },
+      fomr: {
+        attribute: false,
+        type: Number,
+        reflect: false,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.m = 0;
+    this.cr = 0;
+    this.alignState();
+  }
+
+  alignState() {
+    this.fomr = SDTMath.mCr2Fomr(this.m, this.cr);
+  }
+
+  sendEvent() {
+    this.dispatchEvent(new CustomEvent('sdt-equation-mcr2fomr-change', {
+      detail: {
+        m: this.m,
+        cr: this.cr,
+        fomr: this.fomr,
+      },
+      bubbles: true,
+    }));
+  }
+
+  mInput(event) {
+    this.m = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  crInput(event) {
+    this.cr = parseInt(event.target.value, 10);
+    this.alignState();
+    this.sendEvent();
+  }
+
+  render() {
+    this.alignState();
+    let m;
+    let cr;
+    let fomr;
+    if (this.numeric) {
+      m = html`
+        <decidables-spinner class="m" ?disabled=${!this.interactive} min="0" .value="${this.m}" @input=${this.mInput.bind(this)}>
+          <var>Misses</var>
+        </decidables-spinner>
+      `;
+      cr = html`
+        <decidables-spinner class="cr" ?disabled=${!this.interactive} min="0" .value="${this.cr}" @input=${this.crInput.bind(this)}>
+          <var>Correct Rejections</var>
+        </decidables-spinner>
+      `;
+      fomr = html`
+        <decidables-spinner class="fomr" disabled min="0" max="1" step=".001" .value="${+this.fomr.toFixed(3)}">
+          <var>False Omission Rate</var>
+        </decidables-spinner>
+      `;
+    } else {
+      m = html`<var class="m">Misses</var>`;
+      cr = html`<var class="cr">Correct Rejections</var>`;
+      fomr = html`<var class="fomr">False Omission Rate</var>`;
+    }
+    return html`
+      <div class="holder">
+        <table class="equation">
+          <tbody>
+            <tr>
+              <td rowspan="2">
+                ${fomr}<span class="equals">=</span>
+              </td>
+              <td class="underline">
+                ${m}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                ${m}<span class="plus">+</span>${cr}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    `;
+  }
+}
+
+customElements.define('sdt-equation-mcr2fomr', SDTEquationMCr2Fomr);

package/src/equations/sdt-equation.js

@@ -45,6 +45,7 @@ export default class SDTEquation extends DetectableElement {
         /* Overall <table> */
         .equation {
           text-align: center;
+          white-space: nowrap;
 
           border-collapse: collapse;
 
@@ -118,6 +119,14 @@ export default class SDTEquation extends DetectableElement {
           background: var(---color-fa-light);
         }
 
+        .ppv {
+          background: var(---color-present-light);
+        }
+
+        .fomr {
+          background: var(---color-absent-light);
+        }
+
         .acc {
           background: var(---color-acc-light);
         }

package/src/examples/index.js

@@ -3,4 +3,5 @@ export {default as SDTExampleDoubleInteractive} from './double-interactive';
 export {default as SDTExampleHuman} from './human';
 export {default as SDTExampleInteractive} from './interactive';
 export {default as SDTExampleModel} from './model';
+export {default as SDTExampleMultiple} from './multiple';
 export {default as SDTExampleUnequal} from './unequal';

package/src/examples/multiple.js

@@ -0,0 +1,76 @@
+
+import DecidablesConverterArray from '@decidables/decidables-elements/converter-array';
+
+import SDTExample from './sdt-example';
+
+/*
+  SDTExampleMulti element
+  <sdt-example-multi>
+*/
+export default class SDTExampleMultiple extends SDTExample {
+  static get properties() {
+    return {
+      variable: {
+        attribute: 'variable',
+        type: String,
+        reflect: true,
+      },
+      values: {
+        attribute: 'values',
+        converter: DecidablesConverterArray,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+    this.variables = ['d', 'c'];
+    this.variable = 'd';
+    this.values = [0, 1];
+  }
+
+  firstUpdated(/* changedProperties */) {
+    this.detectableControl = this.querySelector('detectable-control');
+    this.rocSpace = this.querySelector('roc-space');
+    this.sdtModel = this.querySelector('sdt-model');
+
+    if (this.detectableControl) {
+      this.detectableControl.addEventListener('detectable-control-z-roc', (event) => {
+        this.rocSpace.zRoc = event.detail.zRoc;
+      });
+    }
+
+    if (this.rocSpace) {
+      this.rocSpace.setWithSDT(1, 0, 'default', '', 1);
+      if (this.variable === 'd') {
+        this.values.forEach((d, index) => {
+          this.rocSpace.setWithSDT(d, this.sdtModel.c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      } else if (this.variable === 'c') {
+        this.values.forEach((c, index) => {
+          this.rocSpace.setWithSDT(this.sdtModel.d, c, `point${index}`, index + 1, this.sdtModel.s);
+        });
+      }
+    }
+
+    if (this.sdtModel) {
+      this.sdtModel.addEventListener('sdt-model-change', (event) => {
+        if (this.rocSpace) {
+          this.rocSpace.setWithSDT(event.detail.d, event.detail.c, 'default', '', event.detail.s);
+          if (this.variable === 'd') {
+            this.values.forEach((d, index) => {
+              this.rocSpace.setWithSDT(d, event.detail.c, `point${index}`, index + 1, event.detail.s);
+            });
+          } else if (this.variable === 'c') {
+            this.values.forEach((c, index) => {
+              this.rocSpace.setWithSDT(event.detail.d, c, `point${index}`, index + 1, event.detail.s);
+            });
+          }
+        }
+      });
+    }
+  }
+}
+
+customElements.define('sdt-example-multiple', SDTExampleMultiple);