@decidables/detectable-elements 0.0.3 → 0.1.2

package/package.json

@@ -1,7 +1,19 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.0.3",
+  "version": "0.1.2",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
+  "keywords": [
+    "web component",
+    "explorable explanation",
+    "explorable",
+    "decision making",
+    "decidables",
+    "signal detection theory",
+    "receiver operating characteristic",
+    "roc",
+    "random dot kinematogram",
+    "detectable"
+  ],
   "type": "module",
   "main": "./lib/detectableElements.umd.min.js",
   "browser": "./lib/detectableElements.umd.min.js",
@@ -39,20 +51,16 @@
     "test:file": "web-test-runner $@ --config ../../.webtestrunnerrc.js",
     "build": "gulp build"
   },
-  "browserslist": [
-    "> 0.25%",
-    "not dead"
-  ],
   "devDependencies": {
     "@web/test-runner": "^0.13.27",
     "gulp": "^4.0.2"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.0.4",
-    "@decidables/detectable-math": "^0.0.3",
+    "@decidables/decidables-elements": "^0.2.0",
+    "@decidables/detectable-math": "^0.1.1",
     "d3": "^7.3.0",
     "jstat": "^1.9.5",
-    "lit": "^2.1.2"
+    "lit": "^2.2.1"
   },
-  "gitHead": "f3e3115ad33a8e1ad5db8ae455b67f571f4561c6"
+  "gitHead": "07fdb2ad62b19a19a284992cb74119bd0963b2a3"
 }

package/src/components/detectable-control.js

@@ -234,11 +234,11 @@ 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>
           `
           : html``}

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 {
@@ -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,7 +361,7 @@ 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 {
@@ -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 */
@@ -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) {
@@ -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)

package/src/examples/sdt-example.js

@@ -16,9 +16,6 @@ export default class SDTExample extends DetectableElement {
           ---border: var(--border, 1px solid var(---color-border));
           display: inline-block;
 
-          /* This makes IE11 happy */
-          width: 100%;
-
           margin-bottom: 1rem;
         }