SERVER-67341 Add node selection by path to libdeps visualizer

erikbeebe · Jun 29, 2022 · b950bea · b950bea
1 parent cb9472a
commit b950bea
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 15 deletions.
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/NodeList.js
@@ -8,18 +8,21 @@ import DataGrid from "./DataGrid";
 import LoadingBar from "./LoadingBar";
 import TextField from "@material-ui/core/TextField";
 
-import { setNodes } from "./redux/nodes";
+import { setNodes, updateCheckbox, updateSelected } from "./redux/nodes";
+import { setGraphData } from "./redux/graphData";
 import { addLinks } from "./redux/links";
 import { setLoading } from "./redux/loading";
 import { setListSearchTerm } from "./redux/listSearchTerm";
+import { Button, Autocomplete, Grid } from "@material-ui/core";
 
 const columns = [
   { dataKey: "check", label: "Selected", width: 70 },
   { dataKey: "name", label: "Name", width: 200 },
   { id: "ID", dataKey: "node", label: "Node", width: 200 },
 ];
 
-const NodeList = ({ selectedGraph, nodes, loading, setFindNode, setNodes, addLinks, setLoading, setListSearchTerm }) => {
+const NodeList = ({ selectedGraph, nodes, searchedNodes, loading, setFindNode, setNodes, addLinks, setLoading, setListSearchTerm, updateCheckbox, updateSelected, setGraphData}) => {
+  const [searchPath, setSearchPath] = React.useState('');
 
   React.useEffect(() => {
     let gitHash = selectedGraph;
@@ -38,24 +41,121 @@ const NodeList = ({ selectedGraph, nodes, loading, setFindNode, setNodes, addLin
         addLinks(data.links);
         setLoading(false);
       });
+    setSearchPath(null);
+    setListSearchTerm('');
   }, [selectedGraph]);
 
+  function newGraphData() {
+    let gitHash = selectedGraph;
+    let postData = {
+        "selected_nodes": nodes.filter(node => node.selected == true).map(node => node.node)
+    };
+    fetch('/api/graphs/' + gitHash + '/d3', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(postData)
+    })
+      .then(response => response.json())
+      .then(data => {
+        setGraphData(data.graphData);
+      });
+    fetch('/api/graphs/' + gitHash + '/nodes/details', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(postData)
+    })
+      .then(response => response.json())
+      .then(data => {
+        setNodeInfos(data.nodeInfos);
+      });
+  }
+
+  function nodePaths() {
+    const paths = nodes.map(node => node.node.substring(0, node.node.lastIndexOf('/') + 1));
+    return [...new Set(paths)];
+  }
+
   function handleRowClick(event) {
     setFindNode(event.target.textContent);
   }
 
-  function handleSearchTermChange(event) {
-    setListSearchTerm(event.target.value);
+  function handleSelectAll(event) {
+    searchedNodes.forEach(node => {
+      updateCheckbox({ node: node.id, value: "flip" });
+      updateSelected({ index: node.id, value: true });
+    });
+    newGraphData();
+  }
+
+  function handleDeselectAll(event) {
+    searchedNodes.forEach(node => {
+      updateCheckbox({ node: node.id, value: "flip" });
+      updateSelected({ index: node.id, value: false });
+    });
+    newGraphData();
+  }
+
+  function handleSearchTermChange(event, newTerm) {
+    if (newTerm == null) {
+      setSearchPath('');
+      setListSearchTerm(newTerm);
+    } else {
+      setSearchPath(newTerm);
+      setListSearchTerm(newTerm);
+    }
   }
 
   return (
     <LoadingBar loading={loading} height={"95%"}>
-      <TextField
-        fullWidth
-        onChange={handleSearchTermChange}
-        onClick={(event)=> event.target.select()}
-        label="Search for Node"
-      />
+      <Grid container spacing={2}>
+        <Grid item xs={12}/>
+        <Grid item xs={12}>
+          <Autocomplete
+            fullWidth
+            freeSolo
+            ListboxProps={{ style: { maxHeight: "9rem" } }}
+            value={searchPath}
+            onInputChange={handleSearchTermChange}
+            onChange={handleSearchTermChange}
+            options={nodePaths()}
+            renderInput={(params) => <TextField {...params}
+              label="Search by Path or Name"
+              variant="outlined"
+              onClick={(event) => event.target.select()}
+              />}
+          />
+        </Grid>
+        <Grid item xs={12}>
+          <Grid
+            container
+            direction="row"
+            justifyContent="center"
+            spacing={4}
+          >
+            <Grid item>
+              <Button
+                variant="contained"
+                onClick={handleSelectAll}
+              >
+                Select All
+              </Button>
+            </Grid>
+            <Grid item>
+              <Button
+                variant="contained"
+                onClick={handleDeselectAll}
+              >
+                Deselect All
+              </Button>
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}/>
+      </Grid>
       <DataGrid
         rows={nodes}
         columns={columns}
@@ -67,4 +167,4 @@ const NodeList = ({ selectedGraph, nodes, loading, setFindNode, setNodes, addLin
   );
 };
 
-export default connect(getNodes, { setFindNode, setNodes, addLinks, setLoading, setListSearchTerm })(NodeList);
+export default connect(getNodes, { setFindNode, setNodes, addLinks, setLoading, setListSearchTerm, updateCheckbox, updateSelected, setGraphData })(NodeList);
diff --git a/buildscripts/libdeps/graph_visualizer_web_stack/src/theme.js b/buildscripts/libdeps/graph_visualizer_web_stack/src/theme.js
@@ -1,13 +1,13 @@
-import { lightGreen, blueGrey, grey } from "@material-ui/core/colors";
+import { green, red, grey } from "@material-ui/core/colors";
 import { createMuiTheme } from "@material-ui/core/styles";
 
 // A custom theme for this app
 const theme = createMuiTheme({
   palette: {
     primary: {
-      light: lightGreen[300],
-      main: lightGreen[500],
-      dark: lightGreen[700],
+      light: green[300],
+      main: green[500],
+      dark: green[700],
     },
     secondary: {
       light: grey[300],