@decidables/detectable-elements 0.4.5 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/detectable-elements",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "description": "detectable-elements: Web Components for visualizing Signal Detection Theory",
   "keywords": [
     "web component",
@@ -54,11 +54,13 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.5",
+    "@decidables/decidables-elements": "^0.5.6",
     "@decidables/detectable-math": "^0.2.5",
+    "color": "^5.0.3",
     "d3": "^7.9.0",
+    "d3-interpolate-path": "^2.3.0",
     "jstat": "^1.9.6",
     "lit": "^3.3.1"
   },
-  "gitHead": "045955a4696ea4b38440d84d467cad3ddaad812d"
+  "gitHead": "8c39b095d6cc3cf6a5f49457048bebf53e7158c1"
 }

package/src/components/detectable-control.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 import '@decidables/decidables-elements/slider';

package/src/components/detectable-response.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/button';
 

package/src/components/detectable-table.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/spinner';
 import DecidablesConverterSet from '@decidables/decidables-elements/converter-set';

package/src/components/rdk-task.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 import * as d3 from 'd3';
 
 import {DecidablesMixinResizeable} from '@decidables/decidables-elements';

package/src/components/roc-space.js

@@ -1,6 +1,8 @@
 
-import {html, css} from 'lit';
+import {css, html, render} from 'lit';
 import * as d3 from 'd3';
+import {interpolatePath} from 'd3-interpolate-path';
+import color from 'color';
 
 import {DecidablesMixinResizeable} from '@decidables/decidables-elements';
 import SDTMath from '@decidables/detectable-math';
@@ -362,9 +364,7 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
   }
 
   render() { /* eslint-disable-line class-methods-use-this */
-    return html`
-      ${DetectableElement.svgFilters}
-    `;
+    return html``;
   }
 
   willUpdate() {
@@ -477,7 +477,11 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
       }]);
     //  ENTER
     const svgEnter = svgUpdate.enter().append('svg')
-      .classed('main', true);
+      .classed('main', true)
+      .each((datum, index, nodes) => {
+        // Filters for shadows
+        render(DetectableElement.svgFilters, nodes[index]);
+      });
     //  MERGE
     const svgMerge = svgEnter.merge(svgUpdate)
       .attr('viewBox', `0 0 ${elementSize} ${elementSize}`);
@@ -558,23 +562,29 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
         const contours = d3.contours()
           .size([n, n])
           .thresholds(contourThresholds);
-        const contourColorStart = this.getComputedStyleValue((this.contour === 'bias')
-          ? '---color-element-background'
-          : (this.contour === 'sensitivity')
-            ? '---color-d'
-            : (this.contour === 'accuracy')
-              ? '---color-acc-dark'
-              : null);
-        const contourColorEnd = this.getComputedStyleValue((this.contour === 'bias')
-          ? '---color-c'
-          : (this.contour === 'sensitivity')
+        const contourColorStart = this.getComputedStyleValue(
+          (this.contour === 'bias')
             ? '---color-element-background'
-            : (this.contour === 'accuracy')
+            : (this.contour === 'sensitivity')
+              ? '---color-d'
+              : (this.contour === 'accuracy')
+                ? '---color-acc-dark'
+                : null,
+        );
+        const contourColorEnd = this.getComputedStyleValue(
+          (this.contour === 'bias')
+            ? '---color-c'
+            : (this.contour === 'sensitivity')
               ? '---color-element-background'
-              : null);
+              : (this.contour === 'accuracy')
+                ? '---color-element-background'
+                : null,
+        );
         const contourColor = d3.scaleLinear()
           .domain(d3.extent(contourThresholds))
-          .interpolate(() => { return d3.interpolateRgb(contourColorStart, contourColorEnd); });
+          .interpolate(() => {
+            return d3.interpolateRgb(color(contourColorStart).hex(), color(contourColorEnd).hex());
+          });
         //  DATA-JOIN
         const contourPlotUpdate = underlayerMerge.selectAll('.plot-contour')
           .data([this.contour]);
@@ -595,8 +605,15 @@ export default class ROCSpace extends DecidablesMixinResizeable(DetectableElemen
         contoursEnter.merge(contoursUpdate).transition()
           .duration(transitionDuration * 2) // Extra long transition!
           .ease(d3.easeCubicOut)
-          .attr('d', d3.geoPath(d3.geoIdentity().scale(width / n))) // ????
+          // .attr('d', d3.geoPath(d3.geoIdentity().scale(width / n))) // ????
+          .attrTween('d', (datum, index, elements) => {
+            const element = elements[index];
+            const previous = d3.select(element).attr('d');
+            const current = d3.geoPath(d3.geoIdentity().scale(width / n))(datum);
+            return interpolatePath(previous, current);
+          })
           .attr('fill', (datum) => { return contourColor(datum.value); });
+
         //  EXIT
         contoursUpdate.exit().remove();
 

package/src/components/sdt-model.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html, render} from 'lit';
 import * as d3 from 'd3';
 import jStat from 'jstat';
 
@@ -269,6 +269,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
           filter: url("#shadow-4");
 
           /* HACK: This gets Safari to correctly apply the filter! */
+          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
           transform: translateX(0);
         }
 
@@ -459,9 +460,7 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
   }
 
   render() { /* eslint-disable-line class-methods-use-this */
-    return html`
-      ${DetectableElement.svgFilters}
-    `;
+    return html``;
   }
 
   sendEvent() {
@@ -665,7 +664,11 @@ export default class SDTModel extends DecidablesMixinResizeable(DetectableElemen
       }]);
     // ENTER
     const svgEnter = svgUpdate.enter().append('svg')
-      .classed('main', true);
+      .classed('main', true)
+      .each((datum, index, nodes) => {
+        // Filters for shadows
+        render(DetectableElement.svgFilters, nodes[index]);
+      });
     // MERGE
     const svgMerge = svgEnter.merge(svgUpdate)
       .attr('viewBox', `0 0 ${elementWidth} ${elementHeight}`);

package/src/components/sdt-parameters.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import '@decidables/decidables-elements/slider';
 import SDTMath from '@decidables/detectable-math';

package/src/examples/sdt-example.js

@@ -1,5 +1,5 @@
 
-import {html, css} from 'lit';
+import {css, html} from 'lit';
 
 import DetectableElement from '../detectable-element';