Add id search to dataflow viewer (#1379)

src/components/input-panel/spec-editor/renderer.tsx

@@ -198,7 +198,7 @@ class Editor extends React.PureComponent<Props> {
       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);

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%;
+}

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 (
     <div className="sidebar">
       <Types />
+      <Id />
       <Pulses />
     </div>
   );
@@ -42,6 +49,30 @@ function Type({type, label, selected}: {type: GraphType; label: string; selected
   );
 }
 
+function Id() {
+  const [searchTerm, setSearchTerm] = React.useState<string | null>(null);
+  const dispatch = useDispatch();
+  return (
+    <fieldset className="id-filter">
+      <legend>Filter by ID</legend>
+      <div>
+        <input type="search" title="Pulse Id Search" onChange={(e) => setSearchTerm(e.target.value)} />
+        <button
+          onClick={() => {
+            if (!searchTerm) {
+              return;
+            }
+            dispatch(setSelectedElements({nodes: [searchTerm], edges: []}));
+            setSearchTerm(null);
+          }}
+        >
+          Search
+        </button>
+      </div>
+    </fieldset>
+  );
+}
+
 function Pulses() {
   return (
     <fieldset>

src/features/dataflow/utils/allRelated.ts

@@ -26,6 +26,10 @@ export function allRelated({nodes, edges}: Graph, selected: Elements): Set<strin
         // Mark the compound node relations as visited
         // and add their immediate parents to the queue
         const node = nodes[id];
+        // if the user inputs an invalid node, just ignore it
+        if (node === undefined) {
+          continue;
+        }
         const parents = node.parent !== undefined ? [node.parent] : [];
         const relatedCompound = [...parents, ...node.children];
         relatedCompound.forEach((i) => processed.add(i));