Skip to content
Snippets Groups Projects
Commit 3175ec85 authored by Tatiana Fritzová's avatar Tatiana Fritzová
Browse files

select in view by color

parent e31bbf2c
No related branches found
No related tags found
No related merge requests found
...@@ -14,6 +14,7 @@ export interface CentralityParams { ...@@ -14,6 +14,7 @@ export interface CentralityParams {
export interface Params { export interface Params {
tags?: Colored[], tags?: Colored[],
colors?: Colored[],
types?: NodeType[], types?: NodeType[],
clear: boolean, clear: boolean,
betweennessCentrality?: CentralityParams, betweennessCentrality?: CentralityParams,
......
...@@ -4,7 +4,7 @@ import FormControl from "@material-ui/core/FormControl"; ...@@ -4,7 +4,7 @@ import FormControl from "@material-ui/core/FormControl";
import Button from "@material-ui/core/Button"; import Button from "@material-ui/core/Button";
import ColoredAutocomplete from "../annotations/ColoredAutocomplete"; import ColoredAutocomplete from "../annotations/ColoredAutocomplete";
import { SliderFormControl } from "./SliderFormControl"; import { SliderFormControl } from "./SliderFormControl";
import { getTags } from "../../../../../api/annotations-api"; import { getColors, getTags } from "../../../../../api/annotations-api";
import { useParams } from "react-router-dom"; import { useParams } from "react-router-dom";
import { MultiSelect } from "../../../../common/MultiSelect"; import { MultiSelect } from "../../../../common/MultiSelect";
import { NodeTypeValues } from "../../../../../parsers/node-type"; import { NodeTypeValues } from "../../../../../parsers/node-type";
...@@ -13,8 +13,10 @@ const ViewQueryForm = ({ selectByParams }) => { ...@@ -13,8 +13,10 @@ const ViewQueryForm = ({ selectByParams }) => {
const { id } = useParams(); const { id } = useParams();
const [tags, setTags] = useState([]); const [tags, setTags] = useState([]);
const [colors, setColors] = useState([]);
const [selectedTypes, setSelectedTypes] = useState([]); const [selectedTypes, setSelectedTypes] = useState([]);
const [selectedColors, setSelectedColors] = useState([]);
const [selectedTags, setSelectedTags] = useState([]); const [selectedTags, setSelectedTags] = useState([]);
const [betweennessCentrality, setBetweennessCentrality] = useState({ const [betweennessCentrality, setBetweennessCentrality] = useState({
apply: false, apply: false,
...@@ -35,9 +37,19 @@ const ViewQueryForm = ({ selectByParams }) => { ...@@ -35,9 +37,19 @@ const ViewQueryForm = ({ selectByParams }) => {
} }
}, [id]); }, [id]);
useEffect(() => {
if (id) {
getColors(id).then(response => {
setColors(response.data);
});
}
}, [id]);
const handleSelect = (clear) => () => { const handleSelect = (clear) => () => {
selectByParams({ selectByParams({
tags: selectedTags, tags: selectedTags,
colors: selectedColors,
types: selectedTypes, types: selectedTypes,
clear, clear,
betweennessCentrality, betweennessCentrality,
...@@ -46,7 +58,7 @@ const ViewQueryForm = ({ selectByParams }) => { ...@@ -46,7 +58,7 @@ const ViewQueryForm = ({ selectByParams }) => {
}; };
return ( return (
<Grid container spacing={1}> <Grid container spacing={2}>
<Grid item xs={12}> <Grid item xs={12}>
<FormControl variant="outlined" fullWidth> <FormControl variant="outlined" fullWidth>
<ColoredAutocomplete <ColoredAutocomplete
...@@ -57,6 +69,16 @@ const ViewQueryForm = ({ selectByParams }) => { ...@@ -57,6 +69,16 @@ const ViewQueryForm = ({ selectByParams }) => {
/> />
</FormControl> </FormControl>
</Grid> </Grid>
<Grid item xs={12}>
<FormControl variant="outlined" fullWidth>
<ColoredAutocomplete
label="Colors"
options={colors}
selectedValues={selectedColors}
setSelectedValues={setSelectedColors}
/>
</FormControl>
</Grid>
<Grid item xs={12}> <Grid item xs={12}>
<MultiSelect <MultiSelect
label="Node types" label="Node types"
......
...@@ -170,7 +170,7 @@ export function FetchForm({ processActionResult }) { ...@@ -170,7 +170,7 @@ export function FetchForm({ processActionResult }) {
/> />
</Grid> </Grid>
<Grid container item xs={12} direction="column" alignItems="flex-end"> <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 Fetch
</Button> </Button>
</Grid> </Grid>
......
import { import {
applicationTypes, applicationTypes,
filterNeighboursByTypes,
getAllNeighbours, getAllNeighbours,
getApplicationNeighbours, getApplicationNeighbours,
getConnectionNeighbours, getHostDataNeighbours, getConnectionNeighbours, getHostDataNeighbours,
...@@ -8,7 +7,6 @@ import { ...@@ -8,7 +7,6 @@ import {
getNodeAttributesMenuFunction, hostDataTypes, selectByTypes getNodeAttributesMenuFunction, hostDataTypes, selectByTypes
} from "./functions"; } from "./functions";
import { handleTargetNodeOnly } from "./utils"; import { handleTargetNodeOnly } from "./utils";
import { NodeSingular } from "cytoscape";
export const contextMenuOptions = (visualizationId, loading, processActionResult, timelineClustering) => { export const contextMenuOptions = (visualizationId, loading, processActionResult, timelineClustering) => {
const menuItemWithFetch = (onClickFunction) => async (event) => { const menuItemWithFetch = (onClickFunction) => async (event) => {
......
...@@ -188,6 +188,11 @@ export const GraphService = (cy: GranefCore) => { //todo undo-redo types or cy a ...@@ -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'))); 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)) { if (!isEmpty(params.types)) {
filters.push((node: NodeSingular) => node.data('dgraph.type') filters.push((node: NodeSingular) => node.data('dgraph.type')
&& params.types?.includes(node.data('dgraph.type'))) && params.types?.includes(node.data('dgraph.type')))
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment