Add ExpandableNode Component

ExpandableNode component renders Query Explanation in the thanos
UI. Requires a new package `react-accessible-treeview`.

Signed-off-by: Pradyumna Krishna <[email protected]>

pkg/ui/react-app/package.json

@@ -33,6 +33,7 @@
     "query-string": "^6.14.0",
     "rc-slider": "^9.7.1",
     "react": "^16.14.0",
+    "react-accessible-treeview": "^2.4.0",
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^16.14.0",
     "react-infinite-scroll-component": "^6.1.0",

pkg/ui/react-app/src/components/ExpandableNode.module.css

@@ -0,0 +1,32 @@
+.basic.tree {
+  list-style: none;
+  margin: 0;
+  padding: 20px;
+}
+.basic .tree-node,
+.basic .tree-node-group {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.basic .tree-branch-wrapper,
+.basic .tree-node__leaf {
+  outline: none;
+}
+
+.basic .tree-node--focused {
+  outline-color: rgb(77, 144, 254);
+  outline-style: auto;
+  outline-width: 2px;
+  display: block;
+}
+
+.basic .tree-node__branch {
+  display: block;
+}
+
+.basic .tree-node {
+  cursor: pointer;
+}
+

pkg/ui/react-app/src/components/ExpandableNode.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import TreeView, { flattenTree } from 'react-accessible-treeview';
+import { InputProps } from 'reactstrap';
+import styles from './ExpandableNode.module.css';
+
+export interface NodeTree {
+  name: string;
+  children?: NodeTree[];
+}
+
+interface NodeProps extends InputProps {
+  node: NodeTree | null;
+}
+
+const ControlledExpandedNode: React.FC<NodeProps> = ({ node }) => {
+  if (!node) {
+    node = { name: '' };
+  } else {
+    node = { name: '', children: [node] };
+  }
+
+  const data = flattenTree(node);
+
+  return (
+    <div>
+      <div>
+        <TreeView
+          data={data}
+          className={styles.basic}
+          aria-label="Controlled expanded node tree"
+          nodeRenderer={({ element, getNodeProps, level, handleExpand }) => {
+            return (
+              <div {...getNodeProps()} style={{ paddingLeft: 20 * (level - 1) }}>
+                {element.name}
+              </div>
+            );
+          }}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default ControlledExpandedNode;

pkg/ui/react-app/src/pages/graph/Panel.tsx

@@ -417,6 +417,11 @@ class Panel extends Component<PanelProps & PathPrefixProps, PanelState> {
             </div>
           </Col>
         </Row>
+        <Row>
+          <Col>
+            <ControlledExpandedNode node={this.state.explanation} />
+          </Col>
+        </Row>
         {stores?.length > 0 && (
           <Row>
             <Col>