feat(sunBurst): kids-first#2643 dynamic tree

src/components/UI/Charts/Sunburst/InfoPanel.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
-import React, { FunctionComponent } from 'react';
-import { Phenotype } from 'store/sunburstTypes';
+import React, { FunctionComponent, ReactText } from 'react';
+import { generatePhenotypeByTitle, Phenotype } from 'store/sunburstTypes';
 import { RootState } from 'store/rootState';
 import { connect, ConnectedProps } from 'react-redux';
 import { addTermToActiveIndex } from 'store/actionCreators/virtualStudies';
@@ -13,6 +13,7 @@ import './sunburst.css';
 type OwnProps = {
   data: Pick<Phenotype, 'title' | 'key' | 'results' | 'exactTagCount'>;
   treeData: TreeNode[];
+  getSelectedPhenotype: Function;
 };
 
 type PropsFromRedux = ConnectedProps<typeof connector>;
@@ -33,7 +34,32 @@ const splitTitle = (title: string) => {
   };
 };
 
-const InfoPanel: FunctionComponent<Props> = ({ data, onClickAddTermToActiveIndex, treeData }) => {
+const getPath = (node: string, treeNodes: TreeNode[], path: string[]) => {
+  const currentNodeText = treeNodes[0].key;
+  path.push(currentNodeText);
+  if (node !== currentNodeText) {
+    getPath(node, treeNodes[0].children, path);
+  }
+  return path;
+};
+
+const generateNodeIdClicked = (
+  nodeName: ReactText[],
+  treeData: TreeNode[],
+  getSelectedPhenotype: Function,
+) => {
+  const path = getPath(nodeName[0] as string, treeData, []);
+  const phenotype = generatePhenotypeByTitle(nodeName[0] as string, path.join('-'));
+  getSelectedPhenotype(phenotype);
+  return path.join('-');
+};
+
+const InfoPanel: FunctionComponent<Props> = ({
+  data,
+  onClickAddTermToActiveIndex,
+  treeData,
+  getSelectedPhenotype,
+}) => {
   const { title, key, results, exactTagCount } = data;
   const titleCode = splitTitle(title);
 
@@ -69,6 +95,9 @@ const InfoPanel: FunctionComponent<Props> = ({ data, onClickAddTermToActiveIndex
           expandedKeys={key.split('-')}
           switcherIcon={<div />}
           className={'sunburst-phenotypes-tree'}
+          onSelect={(node) =>
+            node.length ? generateNodeIdClicked(node, treeData, getSelectedPhenotype) : {}
+          }
         />
       </div>
     </div>

src/components/UI/Charts/Sunburst/Sunburst.tsx

@@ -51,6 +51,7 @@ export const hpoTreeTitleFormat = (splitPheno: PhenotypeSplit, currentTerm: stri
 
 class Sunburst extends Component<SunburstProps, State> {
   private readonly ref: React.RefObject<SVGSVGElement>;
+  private sunburstUpdate: (id: string) => void;
   static defaultProps = {
     depth: 2,
     width: 300,
@@ -60,6 +61,7 @@ class Sunburst extends Component<SunburstProps, State> {
   constructor(props: SunburstProps) {
     super(props);
     this.ref = React.createRef();
+    this.sunburstUpdate = () => {};
   }
 
   state = {
@@ -77,14 +79,20 @@ class Sunburst extends Component<SunburstProps, State> {
     });
   };
 
+  getSelectedPhenotypeFromTree = (phenotype: Phenotype) => {
+    this.getSelectedPhenotype(phenotype);
+    this.sunburstUpdate(phenotype.key);
+  };
+
   componentDidMount() {
     const { depth, width, height, tooltipFormatter, centerTextFormatter, data } = this.props;
     const config = {
       depth,
       width,
       height,
     };
-    sunburstD3(this.ref, data, config, this.getSelectedPhenotype, {
+
+    this.sunburstUpdate = sunburstD3(this.ref, data, config, this.getSelectedPhenotype, {
       tooltipFormatter,
       centerTextFormatter,
     });
@@ -120,7 +128,11 @@ class Sunburst extends Component<SunburstProps, State> {
           ref={this.ref}
         />
         <div className={'grid-item'}>
-          <InfoPanel data={{ ...selectedPhenotypeInfo }} treeData={phenotypeTree} />
+          <InfoPanel
+            data={{ ...selectedPhenotypeInfo }}
+            treeData={phenotypeTree}
+            getSelectedPhenotype={this.getSelectedPhenotypeFromTree}
+          />
         </div>
       </div>
     );

src/components/UI/Charts/Sunburst/sunburst-d3.jsx

@@ -265,6 +265,25 @@ const sunburstD3 = (ref, data, config, getSelectedPhenotype, formatters) => {
     const textData = p || selectedPhenotype;
     centerText.text(() => centerTextFormatter(textData.data)).call(wrap);
   };
+
+  const findNodeByKey = (key, node, returnNode) => {
+    if (returnNode) return returnNode;
+    node.children.forEach((n) => {
+      if (key.includes(n.data.name)) {
+        if (key === n.data.key) {
+          returnNode = n;
+        } else {
+          returnNode = findNodeByKey(key, n, returnNode);
+        }
+      }
+    });
+    return returnNode;
+  };
+
+  return (phenotypeKey) => {
+    const targetNode = findNodeByKey(phenotypeKey, root);
+    clicked(targetNode || root);
+  };
 };
 
 export default sunburstD3;

src/store/sunburstTypes.tsx

@@ -23,3 +23,16 @@ export const generateEmptyPhenotype = () => ({
   disabled: true,
   valueText: '',
 });
+
+export const generatePhenotypeByTitle = (title: string, key: string) => ({
+  title: title,
+  children: [],
+  results: 0,
+  exactTagCount: 0,
+  key: key,
+  text: '',
+  name: '',
+  depth: 0,
+  disabled: true,
+  valueText: '',
+});