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 ? (