@decidables/accumulable-elements 0.3.3 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/accumulable-elements",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "accumulable-elements: Web Components for visualizing the Diffusion Decision Model",
   "keywords": [
     "web component",
@@ -53,8 +53,8 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/accumulable-math": "^0.2.3",
-    "@decidables/decidables-elements": "^0.5.3",
+    "@decidables/accumulable-math": "^0.2.4",
+    "@decidables/decidables-elements": "^0.5.4",
     "@lit-labs/motion": "^1.0.9",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
@@ -62,5 +62,5 @@
     "lit": "^3.3.1",
     "regenerator-runtime": "^0.14.1"
   },
-  "gitHead": "908a95b3b82c45229f9502d161cf4a2c90f899aa"
+  "gitHead": "c0a4df1a6d35d43648d21c14d63cbcee6dd28f9e"
 }

package/src/components/ddm-model.js

@@ -546,8 +546,13 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
           }
         }
 
-        .measure {
-          stroke-width: 2;
+        .measure .line.short {
+          stroke-width: 0;
+        }
+
+        .measure .markers {
+          fill: none;
+          stroke-width: 0;
         }
 
         .measure .label {
@@ -569,7 +574,9 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
           stroke: var(---color-z);
         }
 
-        .measure.z .label {
+        .measure.z .label,
+        /* Hack to avoid Safari weirdness */
+        .measure.z .label tspan {
           dominant-baseline: hanging;
           text-anchor: start;
         }
@@ -592,6 +599,43 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
           text-anchor: middle;
         }
 
+        .measure-arrow {
+          fill: context-stroke;
+          stroke: context-stroke;
+        }
+
+        .measure-arrow .arrow {
+          stroke-width: 1;
+        }
+
+        .measure-arrow.capped .cap {
+          stroke-width: 2;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.a {
+          fill: var(---color-a);
+          stroke: var(---color-a);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.z {
+          fill: var(---color-z);
+          stroke: var(---color-z);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.v {
+          fill: var(---color-v);
+          stroke: var(---color-v);
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .measure-arrow.t0 {
+          fill: var(---color-t0);
+          stroke: var(---color-t0);
+        }
+
         .sd .indicator,
         .mean .indicator {
           stroke-width: 2;
@@ -617,6 +661,20 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
           stroke: var(---color-error-dark);
         }
 
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.correct {
+          fill: var(---color-correct-dark);
+          stroke: var(---color-correct-dark);
+          stroke-dasharray: 100%;
+        }
+
+        /* Hack to avoid lack of context-stroke and context-fill in Safari */
+        .cap.error {
+          fill: var(---color-error-dark);
+          stroke: var(---color-error-dark);
+          stroke-dasharray: 100%;
+        }
+
         .rt-label rect {
           filter: url("#shadow-2");
 
@@ -883,48 +941,84 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .html(AccumulableElement.svgDefs);
     const svgDefs = svgEnter.append('defs');
     // Arrowhead marker for measures
-    svgDefs.append('marker')
-      .attr('id', 'measure-arrow')
-      .attr('orient', 'auto-start-reverse')
-      .attr('markerUnits', 'userSpaceOnUse')
-      .attr('viewBox', '-5 -5 10 10')
-      .attr('refX', '2')
-      .attr('refY', '0')
-      .attr('markerWidth', '10')
-      .attr('markerHeight', '10')
-      .append('path')
-      .attr('stroke', 'context-stroke')
-      .attr('fill', 'context-stroke')
-      .attr('d', 'M -3 -3 l 6 3 l -6 3 z');
+    const measureArrow = (parameter) => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      svgDefs.append('marker')
+        .attr('id', `measure-arrow-${parameter}`)
+        .attr('class', `measure-arrow ${parameter}`)
+        .attr('orient', 'auto-start-reverse')
+        .attr('markerUnits', 'userSpaceOnUse')
+        .attr('viewBox', '-10 -6 12 12')
+        .attr('refX', '0')
+        .attr('refY', '0')
+        .attr('markerWidth', '12')
+        .attr('markerHeight', '12')
+        .append('path')
+        .attr('class', 'arrow')
+        .attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+    };
+    const measureCappedArrow = (parameter) => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      const marker = svgDefs.append('marker')
+        .attr('id', `measure-capped-arrow-${parameter}`)
+        .attr('class', `measure-arrow capped ${parameter}`)
+        .attr('orient', 'auto-start-reverse')
+        .attr('markerUnits', 'userSpaceOnUse')
+        .attr('viewBox', '-10 -6 12 12')
+        .attr('refX', '0')
+        .attr('refY', '0')
+        .attr('markerWidth', '12')
+        .attr('markerHeight', '12');
+      marker
+        .append('path')
+        .attr('class', 'arrow')
+        .attr('d', 'M -7 -3 l 6 3 l -6 3 z');
+      marker
+        .append('path')
+        .attr('class', 'cap')
+        .attr('d', 'M 0 -4 l 0 8');
+    };
+    measureArrow('a');
+    measureArrow('z');
+    measureCappedArrow('v');
+    measureArrow('t0');
+    measureCappedArrow('t0');
     // Flat markers for SDs
-    svgDefs.append('marker')
-      .attr('id', 'model-sd-cap')
-      .attr('orient', 'auto-start-reverse')
-      .attr('markerUnits', 'userSpaceOnUse')
-      .attr('viewBox', '-5 -5 10 10')
-      .attr('refX', '0')
-      .attr('refY', '0')
-      .attr('markerWidth', '10')
-      .attr('markerHeight', '10')
-      .append('path')
-      .attr('stroke', 'context-stroke')
-      .attr('fill', 'context-stroke')
-      .attr('stroke-width', '2')
-      .attr('d', 'M 0 -4 l 0 8');
-    svgDefs.append('marker')
-      .attr('id', 'data-sd-cap')
-      .attr('orient', 'auto-start-reverse')
-      .attr('markerUnits', 'userSpaceOnUse')
-      .attr('viewBox', '-5 -5 10 10')
-      .attr('refX', '0')
-      .attr('refY', '0')
-      .attr('markerWidth', '10')
-      .attr('markerHeight', '10')
-      .append('path')
-      .attr('stroke', 'context-stroke')
-      .attr('fill', 'context-stroke')
-      .attr('stroke-width', '2')
-      .attr('d', 'M 0 -3 l 0 6');
+    const sdCap = (outcome) => {
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      svgDefs.append('marker')
+        .attr('id', `model-sd-cap-${outcome}`)
+        .attr('class', `model-sd cap ${outcome}`)
+        .attr('orient', 'auto-start-reverse')
+        .attr('markerUnits', 'userSpaceOnUse')
+        .attr('viewBox', '-5 -5 10 10')
+        .attr('refX', '0')
+        .attr('refY', '0')
+        .attr('markerWidth', '10')
+        .attr('markerHeight', '10')
+        .append('path')
+        .attr('stroke', 'context-stroke')
+        .attr('fill', 'context-stroke')
+        .attr('stroke-width', '2')
+        .attr('d', 'M 0 -4 l 0 8');
+      svgDefs.append('marker')
+        .attr('id', `data-sd-cap-${outcome}`)
+        .attr('class', `data-sd cap ${outcome}`)
+        .attr('orient', 'auto-start-reverse')
+        .attr('markerUnits', 'userSpaceOnUse')
+        .attr('viewBox', '-5 -5 10 10')
+        .attr('refX', '0')
+        .attr('refY', '0')
+        .attr('markerWidth', '10')
+        .attr('markerHeight', '10')
+        .append('path')
+        .attr('stroke', 'context-stroke')
+        .attr('fill', 'context-stroke')
+        .attr('stroke-width', '2')
+        .attr('d', 'M 0 -3 l 0 6');
+    };
+    sdCap('error');
+    sdCap('correct');
     const gradient = svgDefs.append('linearGradient')
       .attr('id', 'path-animate')
       .attr('gradientUnits', 'userSpaceOnUse')
@@ -1842,6 +1936,9 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     //  EXIT
     t0zUpdate.exit().remove();
 
+    // Measures
+    const markerCorrection = 2;
+
     // a Measure
     //  DATA-JOIN
     const aUpdate = evidenceOverlayerMerge.selectAll('.measure.a')
@@ -1850,9 +1947,12 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     const aEnter = aUpdate.enter().append('g')
       .classed('measure a', true);
     aEnter.append('line')
-      .classed('line', true)
-      .attr('marker-start', 'url(#measure-arrow)')
-      .attr('marker-end', 'url(#measure-arrow)');
+      .classed('line', true);
+    aEnter.append('line')
+      .classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', 'url(#measure-arrow-a)')
+      .attr('marker-end', 'url(#measure-arrow-a)');
     const aLabel = aEnter.append('text')
       .classed('label', true);
     aLabel.append('tspan')
@@ -1864,15 +1964,26 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     aLabel.append('tspan')
       .classed('value', true);
     //  MERGE
+    const aLength = Math.abs(evidenceScale(this.bounds.upper) - evidenceScale(this.bounds.lower));
+    const aShort = aLength <= (markerCorrection * 2);
     const aMerge = aEnter.merge(aUpdate);
     aMerge.select('.line')
+      .classed('short', aShort)
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
       .ease(d3.easeCubicOut)
       .attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75)
-      .attr('y1', evidenceScale(this.bounds.upper) + 2)
+      .attr('y1', evidenceScale(this.bounds.upper) + markerCorrection)
+      .attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75)
+      .attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+    aMerge.select('.markers')
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', timeScale(this.scale.time.max) - this.rem * 0.75)
+      .attr('y1', evidenceScale(this.bounds.upper))
       .attr('x2', timeScale(this.scale.time.max) - this.rem * 0.75)
-      .attr('y2', evidenceScale(this.bounds.lower) - 2);
+      .attr('y2', evidenceScale(this.bounds.lower));
     const aLabelMerge = aMerge.select('.label')
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
@@ -1892,9 +2003,12 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     const zEnter = zUpdate.enter().append('g')
       .classed('measure z', true);
     zEnter.append('line')
-      .classed('line', true)
-      .attr('marker-start', 'url(#measure-arrow)')
-      .attr('marker-end', 'url(#measure-arrow)');
+      .classed('line', true);
+    zEnter.append('line')
+      .classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', 'url(#measure-arrow-z)')
+      .attr('marker-end', 'url(#measure-arrow-z)');
     const zLabel = zEnter.append('text')
       .classed('label', true);
     zLabel.append('tspan')
@@ -1906,15 +2020,26 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     zLabel.append('tspan')
       .classed('value', true);
     //  MERGE
+    const zLength = Math.abs(evidenceScale(this.startingPoint) - evidenceScale(this.bounds.lower));
+    const zShort = zLength <= (markerCorrection * 2);
     const zMerge = zEnter.merge(zUpdate);
     zMerge.select('.line')
+      .classed('short', zShort)
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
       .ease(d3.easeCubicOut)
       .attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75)
-      .attr('y1', evidenceScale(this.startingPoint) + 2)
+      .attr('y1', evidenceScale(this.startingPoint) + markerCorrection)
       .attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75)
-      .attr('y2', evidenceScale(this.bounds.lower) - 2);
+      .attr('y2', evidenceScale(this.bounds.lower) - markerCorrection);
+    zMerge.select('.markers')
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', timeScale(this.scale.time.min) + this.rem * 0.75)
+      .attr('y1', evidenceScale(this.startingPoint))
+      .attr('x2', timeScale(this.scale.time.min) + this.rem * 0.75)
+      .attr('y2', evidenceScale(this.bounds.lower));
     const zLabelMerge = zMerge.select('.label')
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
@@ -1934,9 +2059,12 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     const vEnter = vUpdate.enter().append('g')
       .classed('measure v', true);
     vEnter.append('path')
-      .classed('line', true)
-      .attr('marker-start', 'url(#measure-arrow)')
-      .attr('marker-end', 'url(#measure-arrow)');
+      .classed('line', true);
+    vEnter.append('path')
+      .classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', 'url(#measure-capped-arrow-v)')
+      .attr('marker-end', 'url(#measure-capped-arrow-v)');
     const vLabel = vEnter.append('text')
       .classed('label', true);
     vLabel.append('tspan')
@@ -1948,18 +2076,38 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     vLabel.append('tspan')
       .classed('value', true);
     //  MERGE
-    const driftAngle = Math.atan((this.v / 1000) * scaleRatio);
+    // Full path
     const driftHypotenuse = timeScale(200) - timeScale(0) + this.rem * 0.75;
+    const driftAngle = Math.atan((this.v / 1000) * scaleRatio);
     const driftX = Math.cos(driftAngle) * driftHypotenuse;
     const driftY = Math.sin(driftAngle) * driftHypotenuse;
+    // Corrected path
+    const driftCorrection = markerCorrection / driftHypotenuse;
+    const driftAngleCorrected = Math.atan((this.v / 1000) * scaleRatio) - driftCorrection;
+    const driftStartX = Math.cos(driftCorrection) * driftHypotenuse;
+    const driftStartY = Math.sin(driftCorrection) * driftHypotenuse;
+    const driftEndX = Math.cos(driftAngleCorrected) * driftHypotenuse;
+    const driftEndY = Math.sin(driftAngleCorrected) * driftHypotenuse;
+    // Short path?
+    const vLength = driftAngleCorrected * driftHypotenuse;
+    const vShort = vLength <= (markerCorrection * 2);
     const vMerge = vEnter.merge(vUpdate);
     vMerge.select('.line')
+      .classed('short', vShort)
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('d', `
+        M ${timeScale(this.t0) + driftStartX}, ${evidenceScale(this.startingPoint) - driftStartY}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 0 0 0 ${timeScale(this.t0) + driftEndX} ${evidenceScale(this.startingPoint) - driftEndY}
+      `);
+    vMerge.select('.markers')
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
       .ease(d3.easeCubicOut)
       .attr('d', `
         M ${timeScale(this.t0 + 200) + this.rem * 0.75}, ${evidenceScale(this.startingPoint)}
-        A ${timeScale(200) - timeScale(0)} ${timeScale(200) - timeScale(0)} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
+        A ${timeScale(200) - timeScale(0) + this.rem * 0.75} ${timeScale(200) - timeScale(0) + this.rem * 0.75} 0 0 0 ${timeScale(this.t0) + driftX} ${evidenceScale(this.startingPoint) - driftY}
       `);
     const vLabelMerge = vMerge.select('.label')
       .transition()
@@ -1980,9 +2128,12 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     const t0Enter = t0Update.enter().append('g')
       .classed('measure t0', true);
     t0Enter.append('line')
-      .classed('line', true)
-      .attr('marker-start', 'url(#measure-arrow)')
-      .attr('marker-end', 'url(#measure-arrow)');
+      .classed('line', true);
+    t0Enter.append('line')
+      .classed('markers', true)
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', 'url(#measure-arrow-t0)')
+      .attr('marker-end', 'url(#measure-capped-arrow-t0)');
     const t0Label = t0Enter.append('text')
       .classed('label', true);
     t0Label.append('tspan')
@@ -1994,14 +2145,25 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
     t0Label.append('tspan')
       .classed('value', true);
     //  MERGE
+    const t0Length = Math.abs(timeScale(0) - timeScale(this.t0));
+    const t0Short = t0Length <= (markerCorrection * 2);
     const t0Merge = t0Enter.merge(t0Update);
     t0Merge.select('.line')
+      .classed('short', t0Short)
+      .transition()
+      .duration(this.drag ? 0 : transitionDuration)
+      .ease(d3.easeCubicOut)
+      .attr('x1', timeScale(0) + markerCorrection)
+      .attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75)
+      .attr('x2', timeScale(this.t0) - markerCorrection)
+      .attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
+    t0Merge.select('.markers')
       .transition()
       .duration(this.drag ? 0 : transitionDuration)
       .ease(d3.easeCubicOut)
-      .attr('x1', timeScale(0) + 2)
+      .attr('x1', timeScale(0))
       .attr('y1', evidenceScale(this.startingPoint) - this.rem * 0.75)
-      .attr('x2', timeScale(this.t0) - 2)
+      .attr('x2', timeScale(this.t0))
       .attr('y2', evidenceScale(this.startingPoint) - this.rem * 0.75);
     const t0LabelMerge = t0Merge.select('.label')
       .transition()
@@ -2091,8 +2253,9 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .attr('class', (datum) => { return `model sd ${datum.outcome}`; });
     sdEnter.append('line')
       .classed('indicator', true)
-      .attr('marker-start', 'url(#model-sd-cap)')
-      .attr('marker-end', 'url(#model-sd-cap)');
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', (datum) => { return `url(#model-sd-cap-${datum.outcome})`; })
+      .attr('marker-end', (datum) => { return `url(#model-sd-cap-${datum.outcome})`; });
     //  MERGE
     const sdMerge = sdEnter.merge(sdUpdate);
     sdMerge.select('.indicator')
@@ -2119,8 +2282,9 @@ export default class DDMModel extends DecidablesMixinResizeable(AccumulableEleme
       .attr('class', (datum) => { return `data sd ${datum.outcome}`; });
     dataSDEnter.append('line')
       .classed('indicator', true)
-      .attr('marker-start', 'url(#data-sd-cap)')
-      .attr('marker-end', 'url(#data-sd-cap)')
+      /* Hack to avoid lack of context-stroke and context-fill in Safari */
+      .attr('marker-start', (datum) => { return `url(#data-sd-cap-${datum.outcome})`; })
+      .attr('marker-end', (datum) => { return `url(#data-sd-cap-${datum.outcome})`; })
       .attr('y1', (datum) => {
         return datum.densityScale(0) + ((datum.outcome === 'correct') ? 0.375 : -0.375) * this.rem;
       })