1 files changed, 187 insertions, 0 deletions
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeInfo.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeInfo.js
new file mode 100644
index 00000000000..159613c7aab
--- /dev/null
+++ b/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeInfo.js
@@ -0,0 +1,187 @@
+import React from "react";
+import { connect } from "react-redux";
+import { FixedSizeList } from "react-window";
+import { AutoSizer } from "react-virtualized";
+import { makeStyles } from "@material-ui/core/styles";
+import List from "@material-ui/core/List";
+import ListItem from "@material-ui/core/ListItem";
+import ListItemText from "@material-ui/core/ListItemText";
+import Collapse from "@material-ui/core/Collapse";
+import ExpandLess from "@material-ui/icons/ExpandLess";
+import ExpandMore from "@material-ui/icons/ExpandMore";
+import Paper from "@material-ui/core/Paper";
+import Box from "@material-ui/core/Box";
+
+import { getNodeInfos } from "./redux/store";
+
+import theme from "./theme";
+
+import OverflowTooltip from "./OverflowTooltip";
+
+const NodeInfo = ({ nodeInfos, node, width }) => {
+  const useStyles = makeStyles((theme) => ({
+    root: {
+      width: "100%",
+      maxWidth: width,
+      backgroundColor: theme.palette.background.paper,
+    },
+    nested: {
+      paddingLeft: theme.spacing(4),
+    },
+    listItem: {
+      width: width,
+    },
+  }));
+
+  const rowHeight = 25;
+  const classes = useStyles();
+  const [openDependers, setOpenDependers] = React.useState(false);
+  const [openDependencies, setOpenDependencies] = React.useState(false);
+  const [openNodeAttribs, setOpenNodeAttribs] = React.useState(false);
+
+  const [nodeInfo, setNodeInfo] = React.useState({
+    id: 0,
+    node: "test/test.so",
+    name: "test",
+    attribs: [{ name: "test", value: "test" }],
+    dependers: [{ node: "test/test3.so", symbols: [] }],
+    dependencies: [{ node: "test/test2.so", symbols: [] }],
+  });
+
+  React.useEffect(() => {
+    setNodeInfo(nodeInfos.filter((nodeInfo) => nodeInfo.node == node.node)[0]);
+  }, [nodeInfos]);
+
+  function renderAttribRow({ index, style, data }) {
+    return (
+      <ListItem style={style} key={index}>
+        <Box style={{ margin: "5px" }}>
+          <OverflowTooltip
+            value={data[index].name}
+            text={String(data[index].name) + ":"}
+          />
+        </Box>
+        <OverflowTooltip
+          value={String(data[index].value)}
+          text={String(data[index].value)}
+        />
+      </ListItem>
+    );
+  }
+
+  function renderNodeRow({ index, style, data }) {
+    return (
+      <ListItem style={style} key={index}>
+        <OverflowTooltip
+          button
+          name={data[index].name}
+          value={data[index].node}
+          text={data[index].node}
+        />
+      </ListItem>
+    );
+  }
+
+  function listHeight(numItems) {
+    const size = numItems * rowHeight;
+    if (size > 350) {
+      return 350;
+    }
+    return size;
+  }
+
+  if (nodeInfo == undefined) {
+    return "";
+  }
+  return (
+    <List
+      component="nav"
+      aria-labelledby="nested-list-subheader"
+      className={classes.root}
+      dense={true}
+    >
+      <Paper elevation={3} style={{ backgroundColor: "rgba(0, 0, 0, .03)" }}>
+        <ListItem button>
+          <ListItemText primary={nodeInfo.node} />
+        </ListItem>
+        <ListItem button>
+          <ListItemText primary={nodeInfo.name} />
+        </ListItem>
+
+        <ListItem button onClick={() => setOpenNodeAttribs(!openNodeAttribs)}>
+          <ListItemText primary="Attributes" />
+          {openNodeAttribs ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={openNodeAttribs} timeout="auto" unmountOnExit>
+          <Paper
+            elevation={2}
+            style={{
+              width: "100%",
+              backgroundColor: theme.palette.background.paper,
+            }}
+          >
+            <AutoSizer disableHeight={true}>
+              {({ height, width }) => (
+                <FixedSizeList
+                  height={listHeight(nodeInfo.attribs.length)}
+                  width={width}
+                  itemSize={rowHeight}
+                  itemCount={nodeInfo.attribs.length}
+                  itemData={nodeInfo.attribs}
+                >
+                  {renderAttribRow}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
+          </Paper>
+        </Collapse>
+
+        <ListItem button onClick={() => setOpenDependers(!openDependers)}>
+          <ListItemText primary="Dependers" />
+          {openDependers ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={openDependers} timeout="auto" unmountOnExit>
+          <Paper elevation={4}>
+            <AutoSizer disableHeight={true}>
+              {({ height, width }) => (
+                <FixedSizeList
+                  height={listHeight(nodeInfo.dependers.length)}
+                  width={width}
+                  itemSize={rowHeight}
+                  itemCount={nodeInfo.dependers.length}
+                  itemData={nodeInfo.dependers}
+                >
+                  {renderNodeRow}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
+          </Paper>
+        </Collapse>
+
+        <ListItem button onClick={() => setOpenDependencies(!openDependencies)}>
+          <ListItemText primary="Dependencies" />
+          {openDependencies ? <ExpandLess /> : <ExpandMore />}
+        </ListItem>
+        <Collapse in={openDependencies} timeout="auto" unmountOnExit>
+          <Paper elevation={4}>
+            <AutoSizer disableHeight={true}>
+              {({ height, width }) => (
+                <FixedSizeList
+                  height={listHeight(nodeInfo.dependencies.length)}
+                  width={width}
+                  itemSize={rowHeight}
+                  itemCount={nodeInfo.dependencies.length}
+                  itemData={nodeInfo.dependencies}
+                >
+                  {renderNodeRow}
+                </FixedSizeList>
+              )}
+            </AutoSizer>
+          </Paper>
+        </Collapse>
+      </Paper>
+    </List>
+  );
+};
+
+export default connect(getNodeInfos)(NodeInfo);