select in view by color

client/src/components/visualization/graph/side-panel/annotations/annotation-types.ts

@@ -14,6 +14,7 @@ export interface CentralityParams {
 
 export interface Params {
   tags?: Colored[],
+  colors?: Colored[],
   types?: NodeType[],
   clear: boolean,
   betweennessCentrality?: CentralityParams,

client/src/components/visualization/graph/side-panel/query/ViewQueryForm.js

@@ -4,7 +4,7 @@ import FormControl from "@material-ui/core/FormControl";
 import Button from "@material-ui/core/Button";
 import ColoredAutocomplete from "../annotations/ColoredAutocomplete";
 import { SliderFormControl } from "./SliderFormControl";
-import { getTags } from "../../../../../api/annotations-api";
+import { getColors, getTags } from "../../../../../api/annotations-api";
 import { useParams } from "react-router-dom";
 import { MultiSelect } from "../../../../common/MultiSelect";
 import { NodeTypeValues } from "../../../../../parsers/node-type";
@@ -13,8 +13,10 @@ const ViewQueryForm = ({ selectByParams }) => {
   const { id } = useParams();
 
   const [tags, setTags] = useState([]);
+  const [colors, setColors] = useState([]);
 
   const [selectedTypes, setSelectedTypes] = useState([]);
+  const [selectedColors, setSelectedColors] = useState([]);
   const [selectedTags, setSelectedTags] = useState([]);
   const [betweennessCentrality, setBetweennessCentrality] = useState({
     apply: false,
@@ -35,9 +37,19 @@ const ViewQueryForm = ({ selectByParams }) => {
     }
   }, [id]);
 
+  useEffect(() => {
+    if (id) {
+      getColors(id).then(response => {
+        setColors(response.data);
+      });
+    }
+  }, [id]);
+
+
   const handleSelect = (clear) => () => {
     selectByParams({
       tags: selectedTags,
+      colors: selectedColors,
       types: selectedTypes,
       clear,
       betweennessCentrality,
@@ -46,7 +58,7 @@ const ViewQueryForm = ({ selectByParams }) => {
   };
 
   return (
-    <Grid container spacing={1}>
+    <Grid container spacing={2}>
       <Grid item xs={12}>
         <FormControl variant="outlined" fullWidth>
           <ColoredAutocomplete
@@ -57,6 +69,16 @@ const ViewQueryForm = ({ selectByParams }) => {
           />
         </FormControl>
       </Grid>
+      <Grid item xs={12}>
+        <FormControl variant="outlined" fullWidth>
+          <ColoredAutocomplete
+            label="Colors"
+            options={colors}
+            selectedValues={selectedColors}
+            setSelectedValues={setSelectedColors}
+          />
+        </FormControl>
+      </Grid>
       <Grid item xs={12}>
         <MultiSelect
           label="Node types"

client/src/components/visualization/graph/side-panel/query/fetch/FetchForm.js

@@ -170,7 +170,7 @@ export function FetchForm({ processActionResult }) {
           />
         </Grid>
         <Grid container item xs={12} direction="column" alignItems="flex-end">
-          <Button onClick={handleFetch} variant="contained" color="secondary" disabled={loading} fullWidth>
+          <Button onClick={handleFetch} variant="contained" color="secondary" disabled={loading} fullWidth disableElevation>
             Fetch
           </Button>
         </Grid>

client/src/context-menu/options.js

 import {
   applicationTypes,
-  filterNeighboursByTypes,
   getAllNeighbours,
   getApplicationNeighbours,
   getConnectionNeighbours, getHostDataNeighbours,
@@ -8,7 +7,6 @@ import {
   getNodeAttributesMenuFunction, hostDataTypes, selectByTypes
 } from "./functions";
 import { handleTargetNodeOnly } from "./utils";
-import { NodeSingular } from "cytoscape";
 
 export const contextMenuOptions = (visualizationId, loading, processActionResult, timelineClustering) => {
   const menuItemWithFetch = (onClickFunction) => async (event) => {

client/src/cy-extensions/manipulation/graph-service.ts

@@ -188,6 +188,11 @@ export const GraphService = (cy: GranefCore) => { //todo undo-redo types or cy a
       filters.push((node: NodeSingular) => nodeIds.includes(node.data('id')));
     }
 
+    if (params.colors && !isEmpty(params.colors)) {
+      const hexArr = params.colors.map(color => color.hex);
+      filters.push((node: NodeSingular) => hexArr.includes(node.data('bg').toUpperCase()));
+    }
+
     if (!isEmpty(params.types)) {
       filters.push((node: NodeSingular) => node.data('dgraph.type')
         && params.types?.includes(node.data('dgraph.type')))