diff --git a/src/components/input-panel/spec-editor/renderer.tsx b/src/components/input-panel/spec-editor/renderer.tsx index 9dee17c24..6ac065fb1 100644 --- a/src/components/input-panel/spec-editor/renderer.tsx +++ b/src/components/input-panel/spec-editor/renderer.tsx @@ -198,7 +198,7 @@ class Editor extends React.PureComponent { prevProps.editorRef && prevProps.editorRef.deltaDecorations(prevProps.decorations, []); } - if (this.props.parse) { + if (this.editor && this.props.parse) { this.editor.focus(); this.editor.layout(); this.updateSpec(this.props.value, this.props.configEditorString); diff --git a/src/features/dataflow/Sidebar.css b/src/features/dataflow/Sidebar.css index 1643fb176..06ea6a614 100644 --- a/src/features/dataflow/Sidebar.css +++ b/src/features/dataflow/Sidebar.css @@ -8,6 +8,7 @@ width: 250px; gap: 10px; } + .sidebar fieldset { overflow: hidden; border-color: var(--light-gray-color); @@ -53,3 +54,23 @@ .type-filter { flex-shrink: 0; } + +.sidebar .id-filter { + padding-bottom: 20px; + flex-shrink: 0; +} + +.sidebar .id-filter > div { + display: flex; + height: 30px; +} + +.sidebar .id-filter > div input { + width: 70px; + height: 100%; +} + +.sidebar .id-filter > div button { + width: 100%; + height: 100%; +} diff --git a/src/features/dataflow/Sidebar.tsx b/src/features/dataflow/Sidebar.tsx index 668d764fc..ddb2d10ee 100644 --- a/src/features/dataflow/Sidebar.tsx +++ b/src/features/dataflow/Sidebar.tsx @@ -3,13 +3,20 @@ import {useDispatch} from 'react-redux'; import {useAppSelector} from '../../hooks'; import {resetPulses, sortedPulsesSelector, pulsesEmptySelector} from './pulsesSlice'; import './Sidebar.css'; -import {selectedPulseSelector, selectedTypesSelector, setSelectedPulse, setSelectedType} from './selectionSlice'; +import { + setSelectedElements, + selectedPulseSelector, + selectedTypesSelector, + setSelectedPulse, + setSelectedType, +} from './selectionSlice'; import {GraphType, types} from './utils/graph'; export function Sidebar() { return (
+
); @@ -42,6 +49,30 @@ function Type({type, label, selected}: {type: GraphType; label: string; selected ); } +function Id() { + const [searchTerm, setSearchTerm] = React.useState(null); + const dispatch = useDispatch(); + return ( +
+ Filter by ID +
+ setSearchTerm(e.target.value)} /> + +
+
+ ); +} + function Pulses() { return (
diff --git a/src/features/dataflow/utils/allRelated.ts b/src/features/dataflow/utils/allRelated.ts index 0a72616f5..447dc8400 100644 --- a/src/features/dataflow/utils/allRelated.ts +++ b/src/features/dataflow/utils/allRelated.ts @@ -26,6 +26,10 @@ export function allRelated({nodes, edges}: Graph, selected: Elements): Set processed.add(i));