make intended valence plot dashed (and alter its legend)

src/InteractionTrace/figureElements.js

@@ -21,7 +21,7 @@ export function Separators(props) {
 export function Backgrounds(props) {
   let elements = [];
   const overflow = props.yLayout.domain.padding/2;
-  const colours = ["none", "#ebebec"]; // "#f9f9f9", "#f5f5f6" -> background colour, "#edecec" -> latest value
+  const colours = ["none", "#ebebec"]
   const colour = d3.scaleOrdinal()
         .domain([0, colours.length-1])
         .range(colours);
@@ -199,12 +199,10 @@ export function Plots(props) {
             cx={props.xScale(point.x)} cy={props.yScale(point.y)} r="4" />
     });
 
-    const lineClass = "line " + name;
-
     // The whole curve (line and markers)
     return (
       <g key={"plot" + name}>
-        <path className={lineClass} d={line(data)} stroke={colour} />
+        <path className={"line " + name} d={line(data)} stroke={colour} />
         {markers}
       </g>);
   });
@@ -221,16 +219,26 @@ export function Legend(props) {
   
   const names = Object.keys(props.data);
   const yScale = index => props.yOffset + index * em * 1.2;
-  
+
+  const line = d3.line()
+    .x(d => props.xOffset*d.x)
+    .y(d => yScale(d.y*2 + 1))
+    .curve(d3.curveLinear); // don't apply smoothing to the line
+
   return (
     <g transform={"translate(0," + props.yOffset + ")"}>
-      {names.map((name, index) => (
-        <text key={"legend" + name} x={props.xOffset} y={yScale(index)}
-              textAnchor="end" dominantBaseline="middle"
+      {names.map((name, index) => {
+        const data = [{x: 0, y: index}, {x: 1, y: index}];
+        return [
+        <text key={"legend" + name} x={0} y={yScale(index*2)}
+              textAnchor="start" dominantBaseline="middle"
               className="interaction-trace legend" style={{ fill: props.colour(name)}}>
           {name}
-        </text>
-      ))}
+        </text>,
+        <path key={"line" + name} className={"line " + name}
+              d={line(data)} stroke={props.colour(name)} />
+        
+      ]})}
     </g>
   );
 }
\ No newline at end of file