@decidables/detectable-elements 0.1.1 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.1.1",
+  "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.1.1",
+    "@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": "9a364dd56fa4a8deff0fb0fc6ab6556ee8508321"
+  "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;
@@ -234,11 +234,12 @@ export default class DetectableControl extends DetectableElement {
           ? html`
             <decidables-toggle @change=${this.chooseColor.bind(this)}>
               <span slot="label">Emphasis</span>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="none" ?checked=${this.color === 'none'}>None</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="accuracy" ?checked=${this.color === 'accuracy'}>Accuracy</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="stimulus" ?checked=${this.color === 'stimulus'}>Stimulus</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="response" ?checked=${this.color === 'response'}>Response</decidables-toggle-option>
-              <decidables-toggle-option name=${`${this.uniqueId}-color`} value="outcome" ?checked=${this.color === 'outcome'}>Outcome</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="none" ?checked=${this.color === 'none'}>None</decidables-toggle-option>
+              <decidables-toggle-option name="toggle" value="accuracy" ?checked=${this.color === 'accuracy'}>Accuracy</decidables-toggle-option>
+              <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>`;
@@ -527,10 +544,10 @@ export default class DetectableTable extends DetectableElement {
           </tr>
           <tr>
             <th class="th th-sub" scope="col">
-              "Present"
+              ‘Present’
             </th>
             <th class="th th-sub" scope="col">
-              "Absent"
+              ‘Absent’
             </th>
           </tr>
         </thead>

package/src/components/rdk-task.js

@@ -164,7 +164,7 @@ export default class RDKTask extends DetectableElement {
         }
 
         .dot {
-          /* r: 2px; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 2px;
         }
 
         .dots.coherent {
@@ -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``;
   }
 
@@ -213,8 +213,7 @@ export default class RDKTask extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -556,8 +555,7 @@ export default class RDKTask extends DetectableElement {
       .data((datum) => { return datum; });
     //  ENTER
     const dotEnter = dotUpdate.enter().append('circle')
-      .classed('dot', true)
-      .attr('r', 2); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('dot', true);
     //  MERGE
     dotEnter.merge(dotUpdate)
       .attr('cx', (datum) => { return datum.x; })

package/src/components/roc-space.js

@@ -361,13 +361,13 @@ export default class ROCSpace extends DetectableElement {
         .point .circle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         .point .label {
           font-size: 0.75rem;
 
-          dominant-baseline: middle;
+          dominant-baseline: central;
           text-anchor: middle;
 
           fill: var(---color-text-inverse);
@@ -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}
     `;
@@ -403,8 +403,7 @@ export default class ROCSpace extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -1054,8 +1053,7 @@ export default class ROCSpace extends DetectableElement {
     const pointEnter = pointUpdate.enter().append('g')
       .classed('point', true);
     pointEnter.append('circle')
-      .classed('circle', true)
-      .attr('r', 6); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('circle', true);
     pointEnter.append('text')
       .classed('label', true);
     //  MERGE

package/src/components/sdt-model.js

@@ -415,7 +415,7 @@ export default class SDTModel extends DetectableElement {
         .threshold .handle {
           fill: var(---color-element-emphasis);
 
-          /* r: 6; HACK: Firefox does not support CSS SVG Geometry Properties */
+          r: 6px;
         }
 
         /* Make a larger target for touch users */
@@ -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}
     `;
@@ -517,8 +517,7 @@ export default class SDTModel extends DetectableElement {
     super.firstUpdated(changedProperties);
 
     // Get the width and height after initial render/update has occurred
-    // HACK Edge: Edge doesn't have width/height until after a 0ms timeout
-    window.setTimeout(this.getDimensions.bind(this), 0);
+    this.getDimensions();
   }
 
   update(changedProperties) {
@@ -644,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
@@ -654,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
@@ -850,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;
@@ -1045,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;
@@ -1073,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;
@@ -1327,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
@@ -1385,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
@@ -1451,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
@@ -1467,8 +1466,7 @@ export default class SDTModel extends DetectableElement {
     thresholdEnter.append('line')
       .classed('line', true);
     thresholdEnter.append('circle')
-      .classed('handle', true)
-      .attr('r', 6); /* HACK: Firefox does not support CSS SVG Geometry Properties */
+      .classed('handle', true);
     //  MERGE
     const thresholdMerge = thresholdEnter.merge(thresholdUpdate)
       .attr('tabindex', this.interactive ? 0 : null)
@@ -1482,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/hmfacr2acc.js

@@ -149,7 +149,7 @@ export default class SDTEquationHMFaCr2Acc extends SDTEquation {
             </tr>
             <tr>
               <td>
-                ${h}<span class="plus">+</span>${m}<span class="plus">+</span>${fa}<span class="plus">+</span>${cr}
+                ${h}<span class="plus">+</span>${cr}<span class="plus">+</span>${m}<span class="plus">+</span>${fa}
               </td>
             </tr>
           </tbody>

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';