@decidables/detectable-elements 0.2.16 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.2.16",
+  "version": "0.3.0",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -53,11 +53,11 @@
     "gulp": "^5.0.0"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.4.9",
-    "@decidables/detectable-math": "^0.1.13",
+    "@decidables/decidables-elements": "^0.5.0",
+    "@decidables/detectable-math": "^0.2.0",
     "d3": "^7.9.0",
     "jstat": "^1.9.6",
     "lit": "^3.2.1"
   },
-  "gitHead": "00eb1274a09e86f55fff70b01b446f6729e608f3"
+  "gitHead": "0320347d03a20fb478784fe296c82f11018c276b"
 }

package/src/components/detectable-control.js

@@ -49,6 +49,7 @@ export default class DetectableControl extends DetectableElement {
         type: Boolean,
         reflect: true,
       },
+
       run: {
         attribute: 'run',
         type: Boolean,
@@ -84,6 +85,7 @@ export default class DetectableControl extends DetectableElement {
     this.colors = ['none', 'accuracy', 'stimulus', 'response', 'outcome', 'all'];
     this.color = undefined;
     this.zRoc = undefined;
+
     this.run = false;
     this.pause = false;
     this.reset = false;
@@ -218,19 +220,19 @@ export default class DetectableControl extends DetectableElement {
   render() {
     return html`
       <div class="holder">
-        ${this.trials
+        ${this.trials != null
           ? html`<decidables-slider min="1" max="100" step="1" .value=${this.trials} @change=${this.setTrials.bind(this)} @input=${this.setTrials.bind(this)}>Trials</decidables-slider>`
           : html``}
-        ${this.duration
+        ${this.duration != null
           ? html`<decidables-slider 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
+        ${this.coherence != null
           ? html`<decidables-slider min="0" max="1" step=".01" .value=${this.coherence} @change=${this.setCoherence.bind(this)} @input=${this.setCoherence.bind(this)}>Coherence</decidables-slider>`
           : html``}
-        ${this.payoff
+        ${this.payoff != null
           ? html`<decidables-slider class="payoff" min="0" max="100" step="1" .value=${this.payoff} @change=${this.setPayoff.bind(this)} @input=${this.setPayoff.bind(this)}>Payoff</decidables-slider>`
           : html``}
-        ${this.color !== undefined
+        ${this.color != null
           ? html`
             <decidables-toggle @change=${this.chooseColor.bind(this)}>
               <span slot="label">Emphasis</span>
@@ -243,7 +245,7 @@ export default class DetectableControl extends DetectableElement {
             </decidables-toggle>
           `
           : html``}
-        ${this.zRoc !== undefined
+        ${this.zRoc != null
           ? html`
             <decidables-switch ?checked=${this.zRoc} @change=${this.flipZRoc.bind(this)}>
               <span class="math-var">z</span>ROC

package/src/components/detectable-response.js

@@ -227,6 +227,30 @@ export default class DetectableResponse extends DetectableElement {
     this.e = 0;
   }
 
+  keydown(event) {
+    if (this.state === 'waiting') {
+      if (event.key === 'ArrowUp') {
+        this.responded('present');
+        event.preventDefault();
+      } else if (event.key === 'ArrowDown') {
+        this.responded('absent');
+        event.preventDefault();
+      }
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+
+    window.addEventListener('keydown', this.keydown.bind(this));
+  }
+
+  disconnectedCallback() {
+    window.removeEventListener('keydown', this.keydown.bind(this));
+
+    super.disconnectedCallback();
+  }
+
   static get styles() {
     return [
       super.styles,

package/src/components/index.js

@@ -1,7 +1,8 @@
 
-export {default as RDKTask} from './rdk-task';
-export {default as ROCSpace} from './roc-space';
 export {default as DetectableControl} from './detectable-control';
-export {default as SDTModel} from './sdt-model';
 export {default as DetectableResponse} from './detectable-response';
 export {default as DetectableTable} from './detectable-table';
+export {default as RDKTask} from './rdk-task';
+export {default as ROCSpace} from './roc-space';
+export {default as SDTModel} from './sdt-model';
+export {default as SDTParameters} from './sdt-parameters';

package/src/components/roc-space.js

@@ -104,7 +104,7 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
     this.far = 0.25;
     this.hr = 0.75;
 
-    this.s = 1;
+    this.s = SDTMath.s.DEFAULT;
 
     this.label = '';
 
@@ -261,15 +261,6 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
           stroke-width: 0;
         }
 
-        /* Make a larger target for touch users */
-        @media (pointer: coarse) {
-          .point.interactive .circle {
-            stroke: #000000;
-            stroke-opacity: 0;
-            stroke-width: 12px;
-          }
-        }
-
         .point.interactive:hover {
           filter: url("#shadow-4");
 
@@ -353,6 +344,19 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
 
           fill: var(---color-text-inverse);
         }
+
+        /* Make a larger target for touch users */
+        .interactive .touch {
+          stroke: #000000;
+          stroke-opacity: 0;
+        }
+
+        @media (pointer: coarse) {
+          .interactive .touch {
+            stroke-linecap: round;
+            stroke-width: 12;
+          }
+        }
       `,
     ];
   }
@@ -1012,7 +1016,7 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
     const pointEnter = pointUpdate.enter().append('g')
       .classed('point', true);
     pointEnter.append('circle')
-      .classed('circle', true);
+      .classed('circle touch', true);
     pointEnter.append('text')
       .classed('label', true);
     //  MERGE

package/src/components/sdt-model.js

@@ -109,8 +109,8 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
     super();
 
     // Attributes
-    this.colors = ['outcome', 'response', 'stimulus', 'none']; // Allowable values of 'color'
-    this.color = 'outcome'; // How to color distributions and trials
+    this.colors = ['all', 'outcome', 'response', 'stimulus', 'none']; // Allowable values of 'color'
+    this.color = 'all'; // How to color distributions and trials
     this.distributions = false; // Show distributions?
     this.threshold = false; // Show threshold?
     this.unequal = false; // Allow unequal variance?
@@ -119,9 +119,9 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
     this.variance = false; // Show variance?
     this.histogram = false; // Show histogram?
 
-    this.d = 1; // Sensitivity
-    this.c = 0; // Bias
-    this.s = 1; // Variance
+    this.d = SDTMath.d.DEFAULT; // Sensitivity
+    this.c = SDTMath.c.DEFAULT; // Bias
+    this.s = SDTMath.s.DEFAULT; // Variance
 
     // Properties
     this.binWidth = 0.25; // Histogram bin width in units of evidence
@@ -399,15 +399,6 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
           r: 6px;
         }
 
-        /* Make a larger target for touch users */
-        @media (pointer: coarse) {
-          .threshold.interactive .handle {
-            stroke: #000000;
-            stroke-opacity: 0;
-            stroke-width: 12px;
-          }
-        }
-
         .measure-d .line,
         .measure-d .cap-left,
         .measure-d .cap-right {
@@ -450,6 +441,19 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
           text-anchor: middle;
           fill: currentColor;
         }
+
+        /* Make a larger target for touch users */
+        .interactive .touch {
+          stroke: #000000;
+          stroke-opacity: 0;
+        }
+
+        @media (pointer: coarse) {
+          .interactive .touch {
+            stroke-linecap: round;
+            stroke-width: 12;
+          }
+        }
       `,
     ];
   }
@@ -544,14 +548,13 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
       })
       .on('drag', (event) => {
         this.drag = true;
-        let l = xScale.invert(event.x);
-        // Clamp lambda to stay visible
-        l = (l < xScale.domain()[0])
-          ? xScale.domain()[0]
-          : (l > xScale.domain()[1])
-            ? xScale.domain()[1]
-            : l;
-        this.c = SDTMath.l2C(l, this.s);
+        const l = xScale.invert(event.x);
+        const c = SDTMath.l2C(l, this.s);
+        this.c = (c < SDTMath.c.MIN)
+          ? SDTMath.c.MIN
+          : (c > SDTMath.c.MAX)
+            ? SDTMath.c.MAX
+            : c;
         this.alignState();
         this.sendEvent();
       })
@@ -571,14 +574,13 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
       })
       .on('drag', (event) => {
         this.drag = true;
-        let muN = xScale.invert(event.x);
-        // Clamp Noise Curve to stay visible
-        muN = (muN < xScale.domain()[0])
-          ? xScale.domain()[0]
-          : (muN > xScale.domain()[1])
-            ? xScale.domain()[1]
-            : muN;
-        this.d = SDTMath.muN2D(muN, this.s);
+        const muN = xScale.invert(event.x);
+        const d = SDTMath.muN2D(muN, this.s);
+        this.d = (d < SDTMath.d.MIN)
+          ? SDTMath.d.MIN
+          : (d > SDTMath.d.MAX)
+            ? SDTMath.d.MAX
+            : d;
         this.alignState();
         this.sendEvent();
       })
@@ -605,22 +607,10 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
         let muS = this.muS; /* eslint-disable-line prefer-destructuring */
         if (this.interactive) {
           muS = xScale.invert(event.x);
-          // Clamp Signal Curve to stay visible
-          muS = (muS < xScale.domain()[0])
-            ? xScale.domain()[0]
-            : (muS > xScale.domain()[1])
-              ? xScale.domain()[1]
-              : muS;
         }
         let hS = this.hS; /* eslint-disable-line prefer-destructuring */
         if (this.unequal) {
           hS = yScale.invert(event.y);
-          // Clamp Signal Curve to stay visible
-          hS = (hS < 0.01)
-            ? 0.01
-            : (hS > yScale.domain()[0])
-              ? yScale.domain()[0]
-              : hS;
         }
         if (this.interactive && this.unequal) {
           // Use shift key as modifier for single dimension
@@ -633,10 +623,25 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
           }
         }
         if (this.unequal) {
-          this.s = SDTMath.h2S(hS);
-          this.c = SDTMath.l2C(this.l, this.s);
+          const s = SDTMath.h2S(hS);
+          this.s = (s < SDTMath.s.MIN)
+            ? SDTMath.s.MIN
+            : (s > SDTMath.s.MAX)
+              ? SDTMath.s.MAX
+              : s;
+          const c = SDTMath.l2C(this.l, this.s);
+          this.c = (c < SDTMath.c.MIN)
+            ? SDTMath.c.MIN
+            : (c > SDTMath.c.MAX)
+              ? SDTMath.c.MAX
+              : c;
         }
-        this.d = SDTMath.muS2D(muS, this.s);
+        const d = SDTMath.muS2D(muS, this.s);
+        this.d = (d < SDTMath.d.MIN)
+          ? SDTMath.d.MIN
+          : (d > SDTMath.d.MAX)
+            ? SDTMath.d.MAX
+            : d;
         this.alignState();
         this.sendEvent();
       })
@@ -818,17 +823,14 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                 break;
               default:
             }
-            // Clamp C to visible extent
-            muN = (muN < xScale.domain()[0])
-              ? xScale.domain()[0]
-              : (muN > xScale.domain()[1])
-                ? xScale.domain()[1]
-                : muN;
-            if (muN !== this.muN) {
-              this.d = SDTMath.muN2D(muN, this.s);
-              this.alignState();
-              this.sendEvent();
-            }
+            const d = SDTMath.muN2D(muN, this.s);
+            this.d = (d < SDTMath.d.MIN)
+              ? SDTMath.d.MIN
+              : (d > SDTMath.d.MAX)
+                ? SDTMath.d.MAX
+                : d;
+            this.alignState();
+            this.sendEvent();
             event.preventDefault();
           }
         }
@@ -1013,17 +1015,14 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                 break;
               default:
             }
-            // Clamp C to visible extent
-            muS = (muS < xScale.domain()[0])
-              ? xScale.domain()[0]
-              : (muS > xScale.domain()[1])
-                ? xScale.domain()[1]
-                : muS;
-            if (muS !== this.muS) {
-              this.d = SDTMath.muS2D(muS, this.s);
-              this.alignState();
-              this.sendEvent();
-            }
+            const d = SDTMath.muS2D(muS, this.s);
+            this.d = (d < SDTMath.d.MIN)
+              ? SDTMath.d.MIN
+              : (d > SDTMath.d.MAX)
+                ? SDTMath.d.MAX
+                : d;
+            this.alignState();
+            this.sendEvent();
             event.preventDefault();
           }
         }
@@ -1041,19 +1040,17 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                 break;
               default:
             }
-            // Clamp s so distribution stays visible
-            hS = (hS < 0.01)
-              ? 0.01
-              : (hS > yScale.domain()[0])
-                ? yScale.domain()[0]
-                : hS;
-            if (hS !== this.hS) {
-              this.s = SDTMath.h2S(hS);
-              this.d = SDTMath.muN2D(this.muN, this.s);
-              this.c = SDTMath.l2C(this.l, this.s);
-              this.alignState();
-              this.sendEvent();
-            }
+            hS = (hS < 0) ? 0 : hS;
+            const s = SDTMath.h2S(hS);
+            this.s = (s < SDTMath.s.MIN)
+              ? SDTMath.s.MIN
+              : (s > SDTMath.s.MAX)
+                ? SDTMath.s.MAX
+                : s;
+            this.d = SDTMath.muN2D(this.muN, this.s);
+            this.c = SDTMath.l2C(this.l, this.s);
+            this.alignState();
+            this.sendEvent();
             event.preventDefault();
           }
         }
@@ -1424,8 +1421,10 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
       .classed('threshold', true);
     thresholdEnter.append('line')
       .classed('line', true);
+    thresholdEnter.append('line')
+      .classed('line touch', true);
     thresholdEnter.append('circle')
-      .classed('handle', true);
+      .classed('handle touch', true);
     //  MERGE
     const thresholdMerge = thresholdEnter.merge(thresholdUpdate)
       .attr('tabindex', this.interactive ? 0 : null)
@@ -1449,17 +1448,14 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                   break;
                 default:
               }
-              // Clamp C to visible extent
-              l = (l < xScale.domain()[0])
-                ? xScale.domain()[0]
-                : (l > xScale.domain()[1])
-                  ? xScale.domain()[1]
-                  : l;
-              if (l !== this.l) {
-                this.c = SDTMath.l2C(l, this.s);
-                this.alignState();
-                this.sendEvent();
-              }
+              const c = SDTMath.l2C(l, this.s);
+              this.c = (c < SDTMath.c.MIN)
+                ? SDTMath.c.MIN
+                : (c > SDTMath.c.MAX)
+                  ? SDTMath.c.MAX
+                  : c;
+              this.alignState();
+              this.sendEvent();
               event.preventDefault();
             }
           });
@@ -1476,6 +1472,13 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
       .attr('y1', yScale(0))
       .attr('x2', xScale(this.l))
       .attr('y2', yScale(0.54));
+    thresholdMerge.select('.line.touch').transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', xScale(this.l))
+      .attr('y1', yScale(0))
+      .attr('x2', xScale(this.l))
+      .attr('y2', yScale(0.54));
     thresholdMerge.select('.handle').transition()
       .duration(this.drag ? 0 : transitionDuration)
       .ease(d3.easeCubicOut)
@@ -1571,7 +1574,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                   : this.getComputedStyleValue('---color-far')
                 : (this.color === 'response')
                   ? this.getComputedStyleValue(`---color-${datum.response}`)
-                  : (this.color === 'outcome')
+                  : (this.color === 'outcome') || (this.color === 'all')
                     ? this.getComputedStyleValue(`---color-${datum.outcome}`)
                     : this.getComputedStyleValue('---color-acc'),
             );
@@ -1587,7 +1590,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                   : this.getComputedStyleValue('---color-far-light')
                 : (this.color === 'response')
                   ? this.getComputedStyleValue(`---color-${datum.response}-light`)
-                  : (this.color === 'outcome')
+                  : (this.color === 'outcome') || (this.color === 'all')
                     ? this.getComputedStyleValue(`---color-${datum.outcome}-light`)
                     : this.getComputedStyleValue('---color-acc-light'),
             );
@@ -1661,7 +1664,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                   : this.getComputedStyleValue('---color-far')
                 : (this.color === 'response')
                   ? this.getComputedStyleValue(`---color-${datum.response}`)
-                  : (this.color === 'outcome')
+                  : (this.color === 'outcome') || (this.color === 'all')
                     ? this.getComputedStyleValue(`---color-${datum.outcome}`)
                     : this.getComputedStyleValue('---color-acc'),
             );
@@ -1676,7 +1679,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
                   : this.getComputedStyleValue('---color-far-light')
                 : (this.color === 'response')
                   ? this.getComputedStyleValue(`---color-${datum.response}-light`)
-                  : (this.color === 'outcome')
+                  : (this.color === 'outcome') || (this.color === 'all')
                     ? this.getComputedStyleValue(`---color-${datum.outcome}-light`)
                     : this.getComputedStyleValue('---color-acc-light'),
             );
@@ -1700,7 +1703,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
               : this.getComputedStyleValue('---color-far')
             : (this.color === 'response')
               ? this.getComputedStyleValue(`---color-${datum.response}`)
-              : (this.color === 'outcome')
+              : (this.color === 'outcome') || (this.color === 'all')
                 ? this.getComputedStyleValue(`---color-${datum.outcome}`)
                 : this.getComputedStyleValue('---color-acc');
         })
@@ -1711,7 +1714,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
               : this.getComputedStyleValue('---color-far-light')
             : (this.color === 'response')
               ? this.getComputedStyleValue(`---color-${datum.response}-light`)
-              : (this.color === 'outcome')
+              : (this.color === 'outcome') || (this.color === 'all')
                 ? this.getComputedStyleValue(`---color-${datum.outcome}-light`)
                 : this.getComputedStyleValue('---color-acc-light');
         });

package/src/components/sdt-parameters.js

@@ -0,0 +1,163 @@
+
+import {html, css} from 'lit';
+
+import '@decidables/decidables-elements/slider';
+import SDTMath from '@decidables/detectable-math';
+
+import DetectableElement from '../detectable-element';
+
+/*
+  SDTParameters element
+  <sdt-paramters>
+
+  Attributes:
+
+*/
+export default class SDTParameters extends DetectableElement {
+  static get properties() {
+    return {
+      d: {
+        attribute: 'd',
+        type: Number,
+        reflect: true,
+      },
+      c: {
+        attribute: 'c',
+        type: Number,
+        reflect: true,
+      },
+      s: {
+        attribute: 's',
+        type: Number,
+        reflect: true,
+      },
+    };
+  }
+
+  constructor() {
+    super();
+
+    // Attributes
+    this.d = undefined;
+    this.c = undefined;
+    this.s = undefined;
+  }
+
+  setSensitivity(e) {
+    this.d = +e.target.value;
+    this.dispatchEvent(new CustomEvent('sdt-parameters-d', {
+      detail: {
+        d: this.d,
+      },
+      bubbles: true,
+    }));
+  }
+
+  setBias(e) {
+    this.c = +e.target.value;
+    this.dispatchEvent(new CustomEvent('sdt-parameters-c', {
+      detail: {
+        c: this.c,
+      },
+      bubbles: true,
+    }));
+  }
+
+  setVariance(e) {
+    this.s = +e.target.value;
+    this.dispatchEvent(new CustomEvent('sdt-parameters-s', {
+      detail: {
+        s: this.s,
+      },
+      bubbles: true,
+    }));
+  }
+
+  static get styles() {
+    return [
+      super.styles,
+      css`
+        :host {
+          display: inline-block;
+        }
+
+        .holder {
+          display: flex;
+
+          flex-direction: row;
+
+          align-items: stretch;
+          justify-content: center;
+        }
+
+        decidables-slider {
+          line-height: 1;
+          text-align: center;
+        }
+
+        decidables-slider  div {
+          margin-bottom: 0.25rem;
+        }
+
+        .d {
+          --decidables-slider-background-color: var(---color-d-light);
+          --decidables-slider-color: var(---color-d);
+        }
+
+        .c {
+          --decidables-slider-background-color: var(---color-c-light);
+          --decidables-slider-color: var(---color-c);
+        }
+
+        .s {
+          --decidables-slider-background-color: var(---color-s-light);
+          --decidables-slider-color: var(---color-s);
+        }
+      `,
+    ];
+  }
+
+  render() {
+    return html`
+      <div class="holder">
+        ${this.d != null
+          ? html`<decidables-slider class="d"
+            ?disabled=${!this.interactive}
+            scale
+            min=${SDTMath.d.MIN}
+            max=${SDTMath.d.MAX}
+            step=${SDTMath.d.STEP}
+            .value=${+this.d.toFixed(2)}
+            @change=${this.setSensitivity.bind(this)}
+            @input=${this.setSensitivity.bind(this)}
+          ><div>Sensitivity<br><span class="math-var">d′</span></div></decidables-slider>`
+          : html``}
+        ${this.c != null
+          ? html`<decidables-slider class="c"
+            ?disabled=${!this.interactive}
+            scale
+            min=${SDTMath.c.MIN}
+            max=${SDTMath.c.MAX}
+            step=${SDTMath.c.STEP}
+            .value=${+this.c.toFixed(2)}
+            @change=${this.setBias.bind(this)}
+            @input=${this.setBias.bind(this)}
+          ><div>Bias<br><span class="math-var">c</span></div></decidables-slider>`
+          : html``}
+        ${this.s != null
+          ? html`<decidables-slider class="s"
+            ?disabled=${!this.interactive}
+            scale
+            min=${SDTMath.s.MIN}
+            max=${SDTMath.s.MAX}
+            step=${SDTMath.s.STEP}
+            .value=${+this.s.toFixed(2)}
+            @change=${this.setVariance.bind(this)}
+            @input=${this.setVariance.bind(this)}
+          ><div>Variance<br><span class="math-var">σ</span></div></decidables-slider>`
+          : html``}
+      </div>`;
+  }
+}
+
+customElements.define('sdt-parameters', SDTParameters);