diff --git a/src/components/tree/infoPanels/click.js b/src/components/tree/infoPanels/click.js index f9c8e88e6..6877480a1 100644 --- a/src/components/tree/infoPanels/click.js +++ b/src/components/tree/infoPanels/click.js @@ -4,6 +4,7 @@ import { infoPanelStyles } from "../../../globalStyles"; import { numericToCalendar } from "../../../util/dateHelpers"; import { getTraitFromNode, getFullAuthorInfoFromNode, getVaccineFromNode, getAccessionFromNode, getUrlFromNode, collectMutations } from "../../../util/treeMiscHelpers"; +import { changePage } from "../../../actions/navigation"; export const styles = { container: { @@ -31,11 +32,13 @@ export const stopProp = (e) => { }; /* min width to get "collection date" on 1 line: 120 */ -const item = (key, value, href) => ( +const item = (key, value, href, onClick) => ( {key} {href ? ( {value} + ) : onClick ? ( + {value} ) : value } @@ -212,7 +215,7 @@ const getTraitsToDisplay = (node) => { return Object.keys(node.node_attrs).filter((k) => !ignore.includes(k)); }; -const Trait = ({node, trait, colorings}) => { +const Trait = ({node, trait, colorings, dispatch}) => { const value_tmp = getTraitFromNode(node, trait); let value = value_tmp; if (typeof value_tmp === "number") { @@ -225,6 +228,12 @@ const Trait = ({node, trait, colorings}) => { const name = (colorings && colorings[trait] && colorings[trait].title) ? colorings[trait].title : trait; + + const changeDatasetAction = experimentalMakeChangeDatasetAction(node, trait, dispatch); + if (changeDatasetAction) { + return item(name, value, undefined, changeDatasetAction); + } + const url = getUrlFromNode(node, trait); if (url) { return ; @@ -239,7 +248,7 @@ const Trait = ({node, trait, colorings}) => { * @param {function} props.goAwayCallback * @param {object} props.colorings */ -const TipClickedPanel = ({tip, goAwayCallback, colorings, t}) => { +const TipClickedPanel = ({tip, goAwayCallback, colorings, t, dispatch}) => { if (!tip) {return null;} const panelStyle = { ...infoPanelStyles.panel}; panelStyle.maxHeight = "70%"; @@ -255,7 +264,7 @@ const TipClickedPanel = ({tip, goAwayCallback, colorings, t}) => { {getTraitsToDisplay(node).map((trait) => ( - + ))} {item("", "")} @@ -271,3 +280,10 @@ const TipClickedPanel = ({tip, goAwayCallback, colorings, t}) => { }; export default TipClickedPanel; + +function experimentalMakeChangeDatasetAction(node, trait, dispatch) { + if (!node.node_attrs || !node.node_attrs[trait] || !node.node_attrs[trait].dataset) return undefined; + const dataset = node.node_attrs[trait].dataset; + // todo: best-effort validation of `dataset` + return () => dispatch(changePage({path: dataset})); +} diff --git a/src/components/tree/tree.js b/src/components/tree/tree.js index 635f584e2..d92712fa8 100644 --- a/src/components/tree/tree.js +++ b/src/components/tree/tree.js @@ -169,6 +169,7 @@ class Tree extends React.Component { tip={this.state.selectedTip} colorings={this.props.metadata.colorings} t={t} + dispatch={this.props.dispatch} /> {this.props.showTangle && this.state.tree && this.state.treeToo ? (