diff --git a/ui/src/app/shared/components/graph/graph-panel.scss b/ui/src/app/shared/components/graph/graph-panel.scss index 07af039dd5d5..57dcb576df44 100644 --- a/ui/src/app/shared/components/graph/graph-panel.scss +++ b/ui/src/app/shared/components/graph/graph-panel.scss @@ -24,6 +24,11 @@ } } +.node-search-bar { + display: inline-block; + margin-left: 10px; +} + .graph-options-panel { margin: 10px; padding: 10px; diff --git a/ui/src/app/shared/components/graph/graph-panel.tsx b/ui/src/app/shared/components/graph/graph-panel.tsx index 0a6a069e4f25..15e9ee22abae 100644 --- a/ui/src/app/shared/components/graph/graph-panel.tsx +++ b/ui/src/app/shared/components/graph/graph-panel.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import {useEffect} from 'react'; +import {TextInput} from '../../../shared/components/text-input'; import {ScopedLocalStorage} from '../../scoped-local-storage'; import {FilterDropDown} from '../filter-drop-down'; import {Icon} from '../icon'; @@ -55,6 +56,7 @@ export const GraphPanel = (props: Props) => { const [nodeGenres, setNodeGenres] = React.useState(storage.getItem('nodeGenres', props.nodeGenres)); const [nodeClassNames, setNodeClassNames] = React.useState(storage.getItem('nodeClassNames', props.nodeClassNames)); const [nodeTags, setNodeTags] = React.useState(props.nodeTags); + const [nodeSearchKeyword, setNodeSearchKeyword] = React.useState(''); useEffect(() => storage.setItem('nodeSize', nodeSize, props.nodeSize), [nodeSize]); useEffect(() => storage.setItem('horizontal', horizontal, props.horizontal), [horizontal]); @@ -73,7 +75,8 @@ export const GraphPanel = (props: Props) => { return ( nodeGenres[label.genre] && (!nodeClassNames || Object.entries(nodeClassNames).find(([className, checked]) => checked && (label.classNames || '').split(' ').includes(className))) && - (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag)))) + (!nodeTags || Object.entries(nodeTags).find(([tag, checked]) => !label.tags || (checked && label.tags.has(tag)))) && + props.graph.nodes.get(id).label.includes(nodeSearchKeyword) ); }; @@ -132,6 +135,9 @@ export const GraphPanel = (props: Props) => { {props.options} +
+ setNodeSearchKeyword(v)} placeholder={'Search'} /> +
)}