updates

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

@@ -54,19 +54,21 @@ function Id() {
   const dispatch = useDispatch();
   return (
     <fieldset className="id-filter">
-      <legend>Filter by id</legend>
-      <input title="Pulse Id Search" onChange={(e) => setSearchTerm(e.target.value)} />
-      <button
-        onClick={() => {
-          if (!searchTerm) {
-            return;
-          }
-          dispatch(setSelectedElements({nodes: [searchTerm], edges: []}));
-          setSearchTerm(null);
-        }}
-      >
-        Search
-      </button>
+      <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>
   );
 }

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));