Basic onClick functionality for rendered structuredLang

src/actions/creators.js

@@ -1,8 +1,9 @@
 import * as types from './types.js';
 
-export const traceActivated = (trace) => {
+export const traceActivated = (lang, trace) => {
     return {
         type: types.TRACE_ACTIVATED,
+        lang,
         trace,
     };
 }

src/components/structuredlang/StructuredExpWrapper.js

@@ -3,16 +3,17 @@ import PropTypes from 'prop-types';
 
 import StructuredExp from './recursive/StructuredExp.js';
 
-const StructuredExpWrapper = ({ lang, sExp }) => (
+const StructuredExpWrapper = ({ lang, sExp, createOnClick }) => (
     <pre>
         <span>{lang}</span><br />
-        <StructuredExp sExp={sExp} />
+        <StructuredExp sExp={sExp} createOnClick={createOnClick} />
     </pre>
 )
 
 StructuredExpWrapper.propTypes = {
     lang: PropTypes.string.isRequired,
     sExp: PropTypes.object.isRequired,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default StructuredExpWrapper;

src/components/structuredlang/StructuredLangTrees.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import StructuredExpWrapper from './StructuredExpWrapper.js';
 
-const StructuredLangTrees = ({ trees }) => {
+const StructuredLangTrees = ({ trees, createOnClick }) => {
     if (!trees) {
         return null;
     }
@@ -13,6 +13,7 @@ const StructuredLangTrees = ({ trees }) => {
             key={tree.lang}
             lang={tree.lang}
             sExp={tree.prog}
+            createOnClick={createOnClick(tree.lang)}
         />
     ));
 
@@ -24,6 +25,7 @@ StructuredLangTrees.propTypes = {
         lang: PropTypes.string.isRequired,
         prog: PropTypes.object.isRequired,
     })),
-}
+    createOnClick: PropTypes.func.isRequired,
+};
 
 export default StructuredLangTrees;

src/components/structuredlang/recursive/Item.js

@@ -10,11 +10,11 @@ const shouldSurround = (item) => item.args && item.args.length > 0;
 
 // This function is intended to be used as the `callback` argument in a call to
 // `Array.prototype.map`, hence the index argument.
-const renderAndMaybeSurround = (sExp, index) => {
-    const rendered = <StructuredExp sExp={sExp} key={index} />;
+const renderAndMaybeSurround = (props) => {
+    const rendered = <StructuredExp {...props} />;
 
     let arr = [];
-    if (shouldSurround(sExp)) {
+    if (shouldSurround(props.sExp)) {
         arr = ['(', rendered, ')'];
     } else {
         arr = [rendered];
@@ -23,19 +23,27 @@ const renderAndMaybeSurround = (sExp, index) => {
     return arr;
 }
 
-const Item = ({ name, args, trace }) => {
-    const nestedRenderedArgs = args.map(renderAndMaybeSurround);
+const Item = ({ name, args, trace, createOnClick }) => {
+    const decorated = args.map((arg, index) => ({
+        sExp: arg,
+        key: index,
+        createOnClick,
+    }));
+    const nestedRenderedArgs = decorated.map(renderAndMaybeSurround);
     const nestedNameAndArgs = [name].concat(nestedRenderedArgs);
     const nestedWithSpaces = intersperse(' ', nestedNameAndArgs);
     const withSpaces = _.flatten(nestedWithSpaces);
 
-    return <span>{withSpaces}</span>;
+    const onClick = createOnClick(trace);
+
+    return <span onClick={onClick}>{withSpaces}</span>;
 }
 
 Item.propTypes = {
     name: PropTypes.string.isRequired,
     args: PropTypes.array.isRequired,
     trace: PropTypes.object,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default Item;

src/components/structuredlang/recursive/List.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import SurroundAndSeparate from './SurroundAndSeparate.js';
 
-const List = ({ elements }) =>
+const List = ({ elements, createOnClick }) =>
     <SurroundAndSeparate
         left={'['}
         right={']'}
         separator='; '
         elements={elements}
+        createOnClick={createOnClick}
     />;
 
 List.propTypes = {
     elements: PropTypes.array.isRequired,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default List;

src/components/structuredlang/recursive/StructuredExp.js

@@ -5,14 +5,14 @@ import Item from './Item.js';
 import List from './List.js';
 import Tuple from './Tuple.js';
 
-const StructuredExp = ({ sExp }) => {
+const StructuredExp = ({ sExp, createOnClick }) => {
     let rendered;
     if (Array.isArray(sExp)) {
-        rendered = <List elements={sExp} />;
+        rendered = <List elements={sExp} createOnClick={createOnClick} />;
     } else if (sExp.isTuple) {
-        rendered = <Tuple elements={sExp.elements} />;
+        rendered = <Tuple elements={sExp.elements} createOnClick={createOnClick} />;
     } else {
-        rendered = <Item {...sExp} />;
+        rendered = <Item {...sExp} createOnClick={createOnClick} />;
     }
 
     return rendered;
@@ -24,6 +24,7 @@ StructuredExp.propTypes = {
         PropTypes.object,
         PropTypes.array,
     ]).isRequired,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default StructuredExp;

src/components/structuredlang/recursive/SurroundAndSeparate.js

@@ -5,8 +5,14 @@ import { intersperse } from '../../../utils/ArrayUtils.js';
 
 import StructuredExp from './StructuredExp.js';
 
-const SurroundAndSeparate = ({ left, right, separator, elements }) => {
-    const renderedElements = elements.map((element, index) => <StructuredExp sExp={element} key={index} />);
+const SurroundAndSeparate = ({ left, right, separator, elements, createOnClick }) => {
+    const renderedElements = elements.map((element, index) => (
+        <StructuredExp
+            sExp={element}
+            key={index}
+            createOnClick={createOnClick}
+        />
+    ));
     const withSeparator = intersperse(separator, renderedElements);
     return <span>{left}{withSeparator}{right}</span>;
 }
@@ -16,6 +22,7 @@ SurroundAndSeparate.propTypes = {
     right: PropTypes.string.isRequired,
     separator: PropTypes.string.isRequired,
     elements: PropTypes.array.isRequired,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default SurroundAndSeparate;

src/components/structuredlang/recursive/Tuple.js

@@ -3,16 +3,18 @@ import PropTypes from 'prop-types';
 
 import SurroundAndSeparate from './SurroundAndSeparate.js';
 
-const Tuple = ({ elements }) =>
+const Tuple = ({ elements, createOnClick }) =>
     <SurroundAndSeparate
         left={'('}
         right={')'}
         separator=', '
         elements={elements}
+        createOnClick={createOnClick}
     />;
 
 Tuple.propTypes = {
     elements: PropTypes.array.isRequired,
+    createOnClick: PropTypes.func.isRequired,
 };
 
 export default Tuple;

src/containers/LangTreesContainer.js

@@ -1,12 +1,23 @@
 import { connect } from 'react-redux';
 
+import { traceActivated, traceDeactivated } from '../actions/creators.js';
+
 import StructuredLangTrees from '../components/structuredlang/StructuredLangTrees.js';
 
 const mapStateToProps = (state) => ({
     trees: state.trees.trees,
 })
 
-const mapDispatchToProps = (dispatch) => ({})
+const mapDispatchToProps = (dispatch) => ({
+    createOnClick: (lang) => (trace) => (event) => {
+        event.stopPropagation();
+        if (trace) {
+            dispatch(traceActivated(lang, trace));
+        } else {
+            dispatch(traceDeactivated());
+        }
+    },
+})
 
 const LangTreesContainer = connect(
     mapStateToProps,

src/reducers/highlightedTrace.js

@@ -3,7 +3,10 @@ import { TRACE_ACTIVATED, TRACE_DEACTIVATED } from '../actions/types.js';
 const highlightedTrace = (state = null, action) => {
     switch (action.type) {
         case TRACE_ACTIVATED:
-            return action.trace;
+            return {
+                lang: action.lang,
+                trace: action.trace,
+            };
         case TRACE_DEACTIVATED:
             return null;
         default: