diff --git a/src/InteractionTrace/InteractionTrace.js b/src/InteractionTrace/InteractionTrace.js index d1620cbb02bd2b8eecb5159732528bac64def0b2..f340168c68f4441fe8439927d57029a5a433c59a 100644 --- a/src/InteractionTrace/InteractionTrace.js +++ b/src/InteractionTrace/InteractionTrace.js @@ -12,8 +12,6 @@ import { Backgrounds, Iteration, Actions, Mood, Legend } from './figureElements'; class InteractionTraceStore { - currentInteraction = null; - showInteraction = false; config = {}; configSchema = { title: "Interaction trace", @@ -55,8 +53,6 @@ class InteractionTraceStore { </div>); } decorate(InteractionTraceStore, { - currentInteraction: observable, - showInteraction: observable, config: observable, }) @@ -308,7 +304,7 @@ class InteractionTrace extends Component { y: 4, xScale: xScale, minActions: this.nbPrimitiveActions, - interactionStore: this.interactionStore, + store: this.props.store.sharedData, }, { // Labels for all figure elements component: ComponentLabels, diff --git a/src/InteractionTrace/figureElements.js b/src/InteractionTrace/figureElements.js index 4551d4c751c5ca1b8a334849cd395cf87d8fd551..dc0d55f6601361c14b41d0d9d268bcd85fe87861 100644 --- a/src/InteractionTrace/figureElements.js +++ b/src/InteractionTrace/figureElements.js @@ -12,7 +12,7 @@ export function Separators(props) { // elements.push(<rect x="0" y={y} width="100%" height={height} fill="white" stroke="none"/>); const line_y = props.yLayout.upper(i) + props.yLayout.domain.padding / 2; elements.push( - <line x1="0" y1={line_y} x2="100%" y2={line_y} + <line x1="0" y1={line_y} x2="100%" y2={line_y} key={i} className="separator"/>); } return elements; @@ -57,17 +57,16 @@ export function Actions(props) { if (interaction === undefined || interaction.enacted === undefined) { return null; } - + // These two methods will handle when the mouse hovers and leaves an action. As a result, the hovered interaction - // is stored in props.interactionStore (mobx). The intent is to display information of this interaction somewhere - // else in the application. - const interactionStore = props.interactionStore + // is stored in props.store (mobx). The intent is to display information of this interaction somewhere else in the + // application. const handleOver = () => { - props.interactionStore.currentInteraction = interaction; - interactionStore.showInteraction = true; + props.store.set('currentInteraction', interaction); + props.store.set('showInteraction', true); } const handleOut = () => { - interactionStore.showInteraction = false; + props.store.set('showInteraction', false); } const actions = cloneDeep(interaction.enacted.action_names); @@ -80,7 +79,7 @@ export function Actions(props) { actions.push('︙'); valences.push(0); } - + return ( <text key={actions.join('')+interaction.id} y="0" style={style} onMouseOver={handleOver} onMouseOut={handleOut}> @@ -182,17 +181,17 @@ export function Plots(props) { // d3's line generator const line = d3.line() .x(d => props.xScale(d.x)) // set the x values for the line generator - .y(d => props.yScale(d.y)) // set the y values for the line generator + .y(d => props.yScale(d.y)) // set the y values for the line generator .curve(d3.curveLinear); // don't apply smoothing to the line // .curve(d3.curveMonotoneX) // apply smoothing to the line - + // For each curve return Object.keys(props.data).map((name) => { const data = props.data[name].filter((point, i) => { return !(point === undefined || point.x === undefined || point.y === undefined) }); const colour = props.colour(name); - + // Add markers on the line (by default) const markers = data.map((point, i) => { return <circle className="dot" key={"dot-"+i} fill={colour} @@ -216,7 +215,7 @@ export function Plots(props) { */ export function Legend(props) { const em = props.em || 1; - + const names = Object.keys(props.data); const yScale = index => props.yOffset + index * em * 1.2; @@ -237,8 +236,8 @@ export function Legend(props) { </text>, <path key={"line" + name} className={"line " + name} d={line(data)} stroke={props.colour(name)} /> - + ]})} </g> ); -} \ No newline at end of file +} diff --git a/src/LatestInteraction/LatestInteraction.js b/src/LatestInteraction/LatestInteraction.js index 24aea55f137ae0e0ebe078b4703767fd50e75f03..d87d2c97e88649d0171bfb329b8f8f322eefac07 100644 --- a/src/LatestInteraction/LatestInteraction.js +++ b/src/LatestInteraction/LatestInteraction.js @@ -7,18 +7,18 @@ export const LatestInteraction = observer( function LatestInteraction(props) { let intended, enacted; let iteration = null; - if ('int-trace' in props.store.components && props.store.components['int-trace'].showInteraction) { - intended = props.store.components['int-trace'].currentInteraction.intended; - enacted = props.store.components['int-trace'].currentInteraction.enacted; - const iteration_id = props.store.components['int-trace'].currentInteraction.id; - iteration = [<p key="first"><span className="label">Iteration:</span> {iteration_id}</p>, <hr key="last"/>]; + if (props.store.sharedData.has('currentInteraction') && props.store.sharedData.get('showInteraction')) { + intended = props.store.sharedData.get('currentInteraction').intended; + enacted = props.store.sharedData.get('currentInteraction').enacted; + const iteration_id = props.store.sharedData.get('currentInteraction').id; + iteration = [<p key="first"><span className="label">Iteration:</span> {iteration_id}</p>, <hr key="last"/>]; } else { intended = props.intended; enacted = props.enacted; } /** - * Return the + * Return the * @param {Object} inter object representing the interaction to display (either intended or enacted) * @param {Number} i index of primitive action which row this is makeing */ @@ -27,7 +27,7 @@ function LatestInteraction(props) { return ( <td className={actionClassName(inter.primitive_valences[i])}> {inter.action_names[i]} ({inter.primitive_valences[i]}) - </td>); + </td>); } else { return null; } diff --git a/src/index.js b/src/index.js index 73d63ae0e86e7f6b56f1f6815751746913e11138..7d2c6311c71fd49f4041c843b693b143c9f91121 100644 --- a/src/index.js +++ b/src/index.js @@ -17,6 +17,7 @@ import './Common.css' class ObservableStore { components = {} + sharedData = observable.map() modal = { enabled: false, mode: null, @@ -42,7 +43,7 @@ const Main = observer( class Main extends React.Component { constructor(props) { super(props); - + this.store = new ObservableStore(); this.ros = undefined; @@ -80,7 +81,7 @@ class Main extends React.Component { <Modal store={this.store}/> </div>); } - + return ( <div id="level-1"> <div id="menu">