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">