Commit 43a62cec authored by Dorian Goepp's avatar Dorian Goepp

Allow for widgets to share data

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